/* ===========================================================
   WEBSOCKET TESTER STYLES
=========================================================== */
.ws-root .ws-body { gap: 4px; }
.ws-log-pane { flex: 2; min-width: 0; }
.ws-send-pane { flex: 1; min-width: 280px; max-width: 420px; display: flex; flex-direction: column; }

.ws-state {
  padding: 2px 8px; border-radius: 8px;
  font-family: Verdana, sans-serif; font-size: 10px;
  color: #ffffff; background: #808080;
  font-weight: bold;
}
.ws-state.closed { background: #808080; }
.ws-state.connecting { background: #c08000; }
.ws-state.open { background: #008000; }

.ws-stats {
  font-family: "Courier New", monospace; font-size: 10px;
  color: #cce4ff; font-weight: normal;
}

.ws-log {
  flex: 1; overflow: auto;
  background: #1a1a1a; color: #c0c0c0;
  padding: 6px 8px;
  font-family: "Courier New", monospace; font-size: 12px;
  min-height: 0;
}
.ws-frame {
  display: flex; gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid #303030;
}
.ws-frame.ws-in { background: rgba(0,128,0,0.12); }
.ws-frame.ws-out { background: rgba(0,64,200,0.18); }
.ws-frame.ws-sys { color: #808080; font-style: italic; }
.ws-arrow {
  flex: 0 0 14px; font-weight: bold; font-size: 13px;
}
.ws-frame.ws-in .ws-arrow { color: #80ff80; }
.ws-frame.ws-out .ws-arrow { color: #80b0ff; }
.ws-frame.ws-sys .ws-arrow { color: #808080; }
.ws-time { flex: 0 0 70px; color: #707070; font-size: 11px; }
.ws-body {
  flex: 1; margin: 0; padding: 0; min-width: 0;
  white-space: pre-wrap; word-wrap: break-word;
  font-family: "Courier New", monospace; font-size: 12px;
  color: #d0d0d0;
}
.ws-frame.ws-in .ws-body code { color: #80ff80; }
.ws-frame.ws-out .ws-body code { color: #b0d0ff; }

.ws-send-pane textarea {
  flex: 1; min-height: 80px;
  border: 2px inset #ffffff; background: #ffffff;
  padding: 6px 8px; resize: none; margin: 0;
  font-family: "Courier New", monospace; font-size: 12px;
}
.ws-send-bar {
  display: flex; gap: 4px;
  padding: 4px;
  background: #c0c0c0; border-top: 2px groove #ffffff;
  flex-shrink: 0;
}

.ws-empty {
  padding: 30px; text-align: center;
  color: #606060; font-style: italic;
  font-family: Verdana, sans-serif;
}