/* Live chat window (js/48-chat.js). A "pocket" bubble that opens into a draggable window;
   colours come from the site variables so the light theme works too. z-index 90 keeps it above
   the site pages (40) and below dialogs (100+), so a profile card opened from chat sits on top. */
#chat-root{ position:fixed; inset:0; pointer-events:none; z-index:90; font-family:var(--font-body); }
#chat-bubble{ position:fixed; pointer-events:auto; display:grid; place-items:center; border-radius:50%; cursor:grab; touch-action:none;
  background:linear-gradient(145deg,var(--accent),#5a1fb8); color:#fff; border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 28px rgba(139,61,255,.45), 0 0 0 0 rgba(139,61,255,.5); transition:transform .15s var(--ease-out,ease), box-shadow .2s; }
#chat-bubble:hover{ transform:scale(1.06); box-shadow:0 10px 32px rgba(139,61,255,.6); }
#chat-bubble:active{ cursor:grabbing; }
#chat-bubble svg{ width:55%; height:55%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
#chat-bubble[hidden], #chat-win[hidden]{ display:none; }
.chat-badge{ position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px; border-radius:99px; background:#ff4d6d; color:#fff;
  font:700 11px/20px var(--font-body); text-align:center; box-shadow:0 0 0 2px var(--bg-1); }
.chat-badge[hidden]{ display:none; }

#chat-win{ position:fixed; pointer-events:auto; width:360px; height:480px; max-width:calc(100vw - 8px); max-height:calc(100vh - 8px); display:flex; flex-direction:column;
  background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-xl,16px); overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(139,61,255,.18); animation:chat-pop .18s var(--ease-out,ease); }
@keyframes chat-pop{ from{ opacity:0; transform:translateY(10px) scale(.97); } }
.chat-head{ display:flex; align-items:center; gap:6px; padding:8px 8px 8px 10px; cursor:grab; user-select:none; touch-action:none;
  background:linear-gradient(180deg,rgba(139,61,255,.16),transparent), var(--bg-3); border-bottom:1px solid var(--border-soft); }
.chat-head:active{ cursor:grabbing; }
.chat-grip{ flex:none; color:var(--text-faint); font-size:15px; line-height:1; padding:0 2px; }
.chat-tabs{ display:flex; gap:2px; flex:1; min-width:0; }
.chat-tabs button{ position:relative; flex:1; padding:7px 6px; border-radius:var(--r-sm,8px); background:none; border:0; color:var(--text-dim); font:600 12.5px var(--font-body); cursor:pointer; }
.chat-tabs button:hover{ color:var(--text); background:var(--bg-4); }
.chat-tabs button.active{ color:var(--text); background:var(--accent-soft,rgba(139,61,255,.2)); box-shadow:inset 0 -2px 0 var(--accent); }
.chat-dot{ position:absolute; top:5px; right:7px; width:8px; height:8px; border-radius:50%; background:#ff4d6d; }
.chat-dot[hidden]{ display:none; }
.chat-min{ flex:none; width:30px; height:30px; border-radius:var(--r-sm,8px); border:0; background:none; color:var(--text-dim); font-size:20px; line-height:1; cursor:pointer; }
.chat-min:hover{ background:var(--bg-4); color:var(--text); }
.chat-body{ flex:1; min-height:0; display:flex; flex-direction:column; }

.chat-ttl{ margin:0; padding:5px 12px; font-size:11px; color:var(--text-faint); background:var(--bg-3); border-bottom:1px solid var(--border-soft); }
.chat-list{ flex:1; min-height:0; overflow-y:auto; padding:10px 10px 4px; display:flex; flex-direction:column; gap:8px; scrollbar-width:thin; }
.chat-msg{ display:flex; gap:8px; align-items:flex-start; }
.chat-msg-main{ min-width:0; flex:1; }
.chat-meta{ display:flex; align-items:baseline; gap:8px; font-size:12px; }
.chat-meta time{ color:var(--text-faint); font-size:11px; }
.chat-more{ margin-left:auto; border:0; background:none; color:var(--text-faint); cursor:pointer; opacity:0; padding:0 4px; font-size:14px; }
.chat-msg:hover .chat-more, .chat-more:focus-visible, .chat-more[aria-expanded="true"]{ opacity:1; }
.chat-text{ margin:2px 0 0; font-size:13.5px; line-height:1.45; overflow-wrap:anywhere; white-space:pre-wrap; }
.chat-msg.mine .chat-text{ color:var(--text); }
.chat-actions{ display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.chat-actions[hidden]{ display:none; }
.chat-form, .chat-newdm{ display:flex; gap:6px; padding:8px 10px; border-top:1px solid var(--border-soft); background:var(--bg-2); }
.chat-newdm{ border-top:0; border-bottom:1px solid var(--border-soft); }
.chat-form input, .chat-newdm input{ flex:1; min-width:0; }
.chat-note{ margin:0; padding:6px 12px; font-size:12px; color:var(--text-dim); background:var(--bg-3); }
.chat-note[hidden]{ display:none; }
.chat-empty, .chat-empty-hint{ margin:auto; padding:20px; text-align:center; color:var(--text-dim); font-size:13px; line-height:1.55; }
.chat-empty{ display:grid; gap:12px; justify-items:center; }

.chat-rows{ flex:1; min-height:0; overflow-y:auto; padding:6px 8px 10px; display:flex; flex-direction:column; gap:6px; }
.chat-sec{ margin:10px 4px 2px; font:600 11px var(--font-body); letter-spacing:.07em; text-transform:uppercase; color:var(--text-dim); display:flex; align-items:center; gap:8px; }
.chat-row{ position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-md,10px); background:var(--bg-3); border:1px solid var(--border-soft); cursor:pointer; }
.chat-row:hover{ border-color:var(--accent-border,var(--accent)); }
.chat-row.unread{ border-color:var(--accent); }
.chat-row-main{ min-width:0; flex:1; display:grid; gap:1px; }
.chat-row-main b{ font-size:13px; display:flex; align-items:center; gap:6px; }
.chat-preview{ font-size:12px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-row{ flex-wrap:wrap; }
.chat-row-acts{ display:flex; gap:4px; flex:none; width:100%; justify-content:flex-end; }
.chat-count{ min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--accent); color:#fff; font:700 11px/20px var(--font-body); text-align:center; }
.chat-online{ width:8px; height:8px; border-radius:50%; background:#3ddc84; box-shadow:0 0 0 2px var(--bg-3); }
.chat-thread-head{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--border-soft); background:var(--bg-3); }
.chat-thread-head.has-banner > .cos-bg{ opacity:.4; }
.chat-thread-head b{ font-size:13.5px; }

@media (max-width: 599px){
  /* Phones: a bottom sheet instead of a free-floating window. */
  #chat-win{ left:4px !important; right:4px; top:auto !important; bottom:4px; width:auto; height:min(70vh, 520px); }
  .chat-head{ cursor:default; }
}
@media (prefers-reduced-motion: reduce){ #chat-win{ animation:none; } #chat-bubble{ transition:none; } }