/* /AIWK_RELAY/side_panel.css */
/* AIWK Relay v112-domain-module-loader-log */
:root { color-scheme: dark light; }
body { margin:0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:13px; background:#111827; color:#e5e7eb; user-select:text; }
.relay-head { position:sticky; top:0; z-index:50; padding:9px 10px; background:#0f172a; border-bottom:1px solid #334155; }
.relay-head-main { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.relay-title { font-size:15px; font-weight:800; }
.relay-sub { margin-top:4px; color:#93c5fd; user-select:text; font-size:12px; }
.relay-window-tools { display:flex; align-items:center; gap:4px; }
.icon-btn { min-width:26px; height:26px; padding:0; border-radius:8px; font-weight:900; line-height:1; }
.relay-card { margin:8px; padding:8px; border:1px solid #334155; border-radius:10px; background:#1f2937; }
h2 { margin:0 0 8px; font-size:13px; color:#bfdbfe; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.section-toggle { width:24px; height:22px; padding:0; border-radius:7px; font-size:11px; }
.section-body.collapsed { display:none; }
button { padding:5px 8px; border:1px solid #64748b; border-radius:7px; background:#0f172a; color:#e5e7eb; cursor:pointer; user-select:text; }
button:hover { background:#1e3a8a; }
.relay-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.compact-actions { margin-top:0; margin-bottom:6px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space:pre-wrap; user-select:text; }
.small { font-size:12px; color:#d1d5db; }
.tabs-box, .flow-box, .client-map-box, .chat-box { max-height:230px; overflow:auto; border:1px solid #334155; border-radius:8px; padding:7px; background:#020617; user-select:text; }
.chat-box { min-height:38px; height:42px; max-height:70vh; resize:vertical; display:flex; flex-direction:column; gap:6px; }
.flow-line, .tab-line, .client-line { padding:6px 0; border-bottom:1px dotted #334155; user-select:text; }
.tab-line.active { background:rgba(59,130,246,.12); border-radius:8px; padding-left:5px; padding-right:5px; }
.tab-top, .active-client-row, .client-top { display:flex; align-items:center; flex-wrap:wrap; gap:5px; user-select:text; }
.client-group-title { margin:8px 0 4px; color:#facc15; font-weight:800; font-size:12px; }
.client-group-title:first-child { margin-top:0; }
.client-line { cursor:pointer; border-radius:7px; padding-left:5px; padding-right:5px; }
.client-line:hover { background:rgba(59,130,246,.13); }
.client-badge { display:inline-flex; align-items:center; justify-content:center; min-width:34px; padding:2px 8px; border-radius:999px; border:1px solid rgba(147,197,253,.85); background:rgba(30,64,175,.85); color:#eff6ff; font-weight:800; letter-spacing:.02em; user-select:text; }
.client-badge.unknown { border-color:#64748b; background:#334155; color:#cbd5e1; }
.status-pill { display:inline-flex; align-items:center; gap:4px; border-radius:999px; padding:2px 7px; font-size:11px; border:1px solid #475569; background:#0f172a; }
.status-pill.online { color:#bbf7d0; border-color:#22c55e; background:rgba(22,101,52,.25); }
.status-pill.offline { color:#cbd5e1; border-color:#64748b; background:rgba(51,65,85,.25); }
.status-dot { width:7px; height:7px; border-radius:50%; background:#64748b; display:inline-block; }
.status-pill.online .status-dot { background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,.8); }
.rt-text { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight:700; user-select:text; }
.tab-id-text, .tab-url, .tab-title { user-select:text; }
.active-mark { font-weight:800; }
.flow-line:last-child, .tab-line:last-child, .client-line:last-child { border-bottom:0; }
.ok { color:#86efac; }
.warn { color:#fde68a; }
.bad { color:#fca5a5; }
.rx { color:#93c5fd; }
.tx { color:#c4b5fd; }
.status { color:#facc15; }
input.full, textarea { width:100%; box-sizing:border-box; margin:4px 0 8px; border:1px solid #475569; border-radius:7px; padding:6px; background:#020617; color:#e5e7eb; font-family:inherit; user-select:text; }
textarea { min-height:2.2em; resize:vertical; }
label { display:block; color:#cbd5e1; margin-top:4px; }
.chat-msg { max-width:86%; border:1px solid #334155; border-radius:12px; padding:6px 8px; line-height:1.35; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-msg.me { align-self:flex-end; background:rgba(37,99,235,.28); border-color:#3b82f6; }
.chat-msg.peer { align-self:flex-start; background:rgba(51,65,85,.5); }
.chat-msg.system { align-self:center; max-width:96%; background:rgba(113,63,18,.22); border-color:#854d0e; color:#fde68a; }
.chat-meta { display:flex; gap:6px; align-items:center; margin-bottom:3px; font-size:11px; opacity:.92; }
.chat-text { user-select:text; }
@media (prefers-color-scheme: light) {
  body { background:#f8fafc; color:#111827; }
  .relay-head { background:#e2e8f0; border-bottom-color:#cbd5e1; }
  .relay-card { background:#ffffff; border-color:#cbd5e1; }
  .tabs-box, .flow-box, .client-map-box, .chat-box, input.full, textarea { background:#ffffff; color:#111827; border-color:#cbd5e1; }
  button { background:#ffffff; color:#111827; border-color:#94a3b8; }
  .chat-msg.peer { background:#f1f5f9; }
}

/* v091 · 공통 client/status 표시 */
.relay-client-badge,
.popup-client-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  margin-left:6px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(147,197,253,.85);
  background:rgba(30,64,175,.85);
  color:#eff6ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  user-select:text;
}
.relay-conn-badge {
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:4px;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid #64748b;
  background:rgba(15,23,42,.78);
  font-size:11px;
  font-weight:800;
  user-select:text;
}
.relay-conn-badge.online{border-color:#22c55e;color:#bbf7d0;background:rgba(22,101,52,.28);}
.relay-conn-badge.offline{border-color:#ef4444;color:#fecaca;background:rgba(127,29,29,.26);}
.relay-conn-badge.reconnecting{border-color:#eab308;color:#fef08a;background:rgba(113,63,18,.3);}
.relay-conn-badge.replaced{border-color:#a78bfa;color:#ddd6fe;background:rgba(76,29,149,.3);}
.status-pill.reconnecting { color:#fef08a; border-color:#eab308; background:rgba(113,63,18,.28); }
.status-pill.replaced { color:#ddd6fe; border-color:#a78bfa; background:rgba(76,29,149,.28); }
.status-pill.reconnecting .status-dot { background:#eab308; box-shadow:0 0 8px rgba(234,179,8,.8); }
.status-pill.replaced .status-dot { background:#a78bfa; box-shadow:0 0 8px rgba(167,139,250,.8); }
.status-emoji,.status-emoji-inline{display:inline-flex;align-items:center;justify-content:center;min-width:1.25em;user-select:text;}

/* v096 · WSS/BUS/NR triple status + section order */
.relay-conn-badge{min-width:54px;justify-content:center;letter-spacing:-.08em;}
.relay-card[data-section="map"]{border-color:rgba(34,211,238,.38);}
.relay-card[data-section="chat"]{border-color:rgba(34,197,94,.32);}


/* v096 · 연결지도 승인/미승인/binding 상태 */
.status-pill.unapproved { color:#fef08a; border-color:#eab308; background:rgba(113,63,18,.28); }
.status-pill.unknown { color:#cbd5e1; border-color:#64748b; background:rgba(51,65,85,.32); }
.status-pill.limited { color:#fecaca; border-color:#ef4444; background:rgba(127,29,29,.28); }
.status-pill.unapproved .status-dot { background:#eab308; box-shadow:0 0 8px rgba(234,179,8,.75); }
.status-pill.unknown .status-dot { background:#64748b; }
.status-pill.limited .status-dot { background:#ef4444; box-shadow:0 0 8px rgba(239,68,68,.75); }
.client-approve-btn { margin-left:auto; padding:2px 6px; font-size:11px; border-radius:999px; }
.client-clean-title { color:#dbeafe; margin-top:3px; }
.client-addr-line { color:#94a3b8; font-size:11px; overflow-wrap:anywhere; }
.muted { color:#94a3b8; }


/* v102 · Relay tab badge + room badges */
.relay-tab-badge { display:inline-flex; align-items:center; margin-left:6px; padding:2px 8px; border-radius:999px; border:1px solid #38bdf8; background:rgba(14,116,144,.45); color:#e0f2fe; font-size:12px; font-weight:900; user-select:text; white-space:nowrap; }
.client-map-header-badges { display:inline-flex; flex-wrap:wrap; gap:4px; margin-left:6px; vertical-align:middle; }
.client-map-mini-badge { display:inline-flex; align-items:center; gap:2px; padding:1px 6px; border-radius:999px; border:1px solid #64748b; background:#0f172a; color:#e5e7eb; font-size:11px; font-weight:900; user-select:text; cursor:pointer; }
.client-map-mini-badge:hover { filter:brightness(1.2); text-decoration:underline; }
.client-map-mini-badge.online { border-color:#22c55e; color:#bbf7d0; background:rgba(22,101,52,.25); }
.client-map-mini-badge.unapproved { border-color:#eab308; color:#fef08a; background:rgba(113,63,18,.28); }
.client-map-mini-badge.unknown { border-color:#64748b; color:#cbd5e1; background:rgba(51,65,85,.32); }
.client-map-mini-badge.limited { border-color:#ef4444; color:#fecaca; background:rgba(127,29,29,.28); }
.client-map-mini-badge.offline { border-color:#ef4444; color:#fecaca; background:rgba(127,29,29,.26); }
@media (prefers-color-scheme: light) { .relay-tab-badge { background:#e0f2fe; color:#075985; } }

/* v122 · 중복 client/tab 표시 정리 */
.client-conflict { color:#fca5a5; margin-top:3px; font-weight:700; }


/* v123 · 묶임/승인 상태를 연결 상태와 분리 표시 */
.binding-badge { display:inline-flex; align-items:center; gap:4px; border-radius:999px; padding:2px 7px; font-size:11px; border:1px solid #64748b; background:#0f172a; font-weight:800; user-select:text; }
.binding-badge.bound { color:#bfdbfe; border-color:#38bdf8; background:rgba(14,116,144,.28); }
.binding-badge.unbound { color:#cbd5e1; border-color:#64748b; background:rgba(51,65,85,.28); }
.binding-dot { width:7px; height:7px; border-radius:50%; background:#64748b; display:inline-block; }
.binding-badge.bound .binding-dot { background:#38bdf8; box-shadow:0 0 8px rgba(56,189,248,.8); }
.client-approve-btn.bound { border-color:#38bdf8; color:#e0f2fe; background:rgba(14,116,144,.28); }
.client-approve-btn.unbound { border-color:#64748b; color:#e5e7eb; background:rgba(15,23,42,.9); }
.client-approve-btn.bound:hover { background:rgba(14,116,144,.55); }
.client-approve-btn.unbound:hover { background:rgba(30,58,138,.75); }
@media (prefers-color-scheme: light) { .binding-badge.bound { background:#e0f2fe; color:#075985; } .binding-badge.unbound { background:#f8fafc; color:#334155; } }

/* v133 · 묶기/승인 실패 danger 안내 */
.relay-danger-toast {
  position:fixed;
  left:10px;
  right:10px;
  bottom:10px;
  z-index:9999;
  display:none;
  gap:8px;
  align-items:flex-start;
  border:1px solid #ef4444;
  border-radius:8px;
  background:#7f1d1d;
  color:#fee2e2;
  padding:9px 10px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  white-space:pre-wrap;
  user-select:text;
}
.relay-danger-toast.show { display:flex; }
.relay-toast-close {
  flex:0 0 auto;
  width:22px;
  height:22px;
  padding:0;
  border-color:#fecaca;
  background:#991b1b;
  color:#fff;
}
.relay-toast-text { flex:1 1 auto; overflow-wrap:anywhere; }


/* v154 · PC 이름 root 기반 자체 트리 렌더러. CDN/외부 JS 없이 side_panel.js에서 생성한다. */
.aiwk-tree-node { margin:3px 0 3px 8px; }
.aiwk-tree-node.level-pc { margin-left:0; }
.aiwk-tree-head { cursor:pointer; user-select:text; padding:4px 6px; border-radius:7px; border:1px solid rgba(100,116,139,.45); background:rgba(15,23,42,.55); font-weight:800; }
.aiwk-tree-head:hover { background:rgba(30,64,175,.35); }
.aiwk-tree-node.closed > .aiwk-tree-head { opacity:.85; }
.aiwk-tree-node.closed > .aiwk-tree-head::after { content:"  ▸"; color:#93c5fd; }
.aiwk-tree-node:not(.closed) > .aiwk-tree-head::after { content:"  ▾"; color:#93c5fd; }
.aiwk-tree-body { margin-left:13px; padding-left:9px; border-left:1px dashed rgba(148,163,184,.38); }
.aiwk-tree-node.level-pc > .aiwk-tree-head { border-color:rgba(34,211,238,.45); background:rgba(8,47,73,.32); }
.aiwk-tree-node.level-group > .aiwk-tree-head { color:#fde68a; }
.aiwk-tree-node.level-room > .aiwk-tree-head { color:#bfdbfe; }
.aiwk-tree-leaf { margin:3px 0; padding:5px 6px; border-radius:8px; border:1px solid rgba(51,65,85,.55); background:rgba(2,6,23,.52); }
.aiwk-tree-leaf:hover { background:rgba(59,130,246,.13); }
.source-badge { display:inline-flex; align-items:center; padding:1px 5px; border-radius:999px; border:1px solid rgba(100,116,139,.55); font-size:11px; }
@media (prefers-color-scheme: light) {
  .aiwk-tree-head { background:#f8fafc; border-color:#cbd5e1; }
  .aiwk-tree-node.level-pc > .aiwk-tree-head { background:#ecfeff; border-color:#67e8f9; }
  .aiwk-tree-leaf { background:#ffffff; border-color:#cbd5e1; }
}