/* wbs-chat.css — the live chat room (/chat/), 2026-09-02. Same palette as
   wbs.css (variables come from it); the layout is protonchat.com's chat
   under the MyWBS top bar: the "here now" column on the left and the room
   on the right, collapsing to a single pane with a slide-in list on phones.

   Owner request 2026-09-03: the room fills the WHOLE screen below the menu,
   no padding on any side. The page is a flex column — menu on top, room
   taking every remaining pixel — so it fits whatever height the bar has
   (one row, the two rows a moderator's bar wraps to, or the phone burger)
   without measuring anything. The body never scrolls; only the message
   list and the member list do. */

html, body { height:100%; }
body { min-height:0; height:100vh; height:100dvh; overflow:hidden;
  display:flex; flex-direction:column; }
#wbs-nav { flex:none; }
.chat-page { flex:1; min-height:0; display:flex; margin:0; padding:0;
  max-width:none; }
/* The signed-out gate (WBS.gate) lands inside the same page: keep it a
   centred card instead of an edge-to-edge sheet. */
.chat-page > .gate { margin:auto; width:min(520px, 92vw); }
.chat {
  flex:1; min-width:0; min-height:0;
  display:grid; grid-template-columns:250px minmax(0,1fr);
  /* minmax(0,1fr) on the row: an auto row would grow with a tall message
     list and push the composer off the screen (seen on phones). */
  grid-template-rows:minmax(0,1fr);
  background:var(--card); overflow:hidden; position:relative;
}
.grow { flex:1; }

/* ---- here now ---------------------------------------------------------- */
.chat-side { border-right:1px solid var(--line); display:flex;
  flex-direction:column; min-width:0; background:#14161c; }
.side-head { display:flex; align-items:center; gap:8px; padding:16px 16px 10px; }
.side-title { font-weight:700; font-size:1.02em; }
.side-count { color:var(--muted); font-size:.85em; }
.side-close { display:none; margin-left:auto; background:none; border:none;
  color:var(--muted); font-size:1em; cursor:pointer; padding:2px 6px; }
.member-list { flex:1; overflow-y:auto; padding:0 8px 8px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.member { display:flex; align-items:center; gap:10px; padding:6px 8px;
  border-radius:9px; color:var(--text); font-size:.93em; text-decoration:none; }
.member:hover { background:var(--card-2); text-decoration:none; }
.member img { width:30px; height:30px; border-radius:50%; flex:none;
  border:1px solid var(--line-2); }
.member .m-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0; }
.member .you { color:var(--faint); font-size:.82em; }
.member .dot { width:9px; height:9px; border-radius:50%; flex:none;
  margin-left:auto; background:#31d158; box-shadow:0 0 6px rgba(49,209,88,.6); }
.side-empty { color:var(--muted); font-size:.88em; padding:12px 16px; line-height:1.6; }
.side-foot { color:var(--faint); font-size:.78em; line-height:1.6;
  padding:12px 16px 14px; border-top:1px solid var(--line); }
.side-foot a { color:var(--faint); text-decoration:underline; }

/* ---- room -------------------------------------------------------------- */
.chat-main { display:flex; flex-direction:column; min-width:0; min-height:0; }
.chat-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 18px; border-bottom:1px solid var(--line); }
.side-toggle { display:none; background:none; border:none; color:var(--text);
  font-size:1.15em; cursor:pointer; padding:2px 6px; }
.chan-name { font-weight:700; font-size:1.05em; white-space:nowrap; }
.chan-hint { color:var(--faint); font-size:.82em; }
.conn-status { font-size:.8em; color:#e6b450; display:none; }
.conn-status.show { display:inline; }
.head-btn { color:var(--muted); font-size:.85em; text-decoration:none;
  padding:4px 10px; border:1px solid var(--line); border-radius:8px;
  background:transparent; font-family:inherit; cursor:pointer; line-height:1.4; }
.head-btn:hover { color:var(--text); background:var(--card-2); text-decoration:none; }

.messages { flex:1; min-height:0; overflow-y:auto; padding:18px 18px 8px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent; }

.day-divider { display:flex; align-items:center; gap:12px; margin:18px 0 10px;
  color:var(--muted); font-size:.78em; font-weight:600; }
.day-divider::before, .day-divider::after { content:""; flex:1; height:1px;
  background:var(--line); }
.new-divider { display:flex; align-items:center; gap:10px; margin:12px 0 6px;
  color:#e0565f; font-size:.74em; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; }
.new-divider::before, .new-divider::after { content:""; flex:1; height:1px;
  background:#7a3b41; }
.new-divider::before { flex:0 0 12px; }
.empty-note { color:var(--muted); text-align:center; padding:40px 20px;
  font-size:.95em; line-height:1.6; }

.msg { display:flex; gap:12px; padding:3px 8px; border-radius:8px; position:relative; }
.msg:hover { background:#1d2027; }
.msg > a.av img, .msg img.avatar { width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line-2); margin-top:2px; flex:none; display:block; }
.msg.first { margin-top:10px; }
.msg.grouped .gutter { width:36px; flex:none; color:var(--faint);
  font-size:.68em; text-align:right; padding-top:4px; visibility:hidden; }
.msg.grouped:hover .gutter { visibility:visible; }
.msg-content { min-width:0; flex:1; }
.msg-head { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.msg-author { font-weight:700; font-size:.95em; color:var(--text); }
.msg-author:hover { text-decoration:underline; }
.msg-time { color:var(--faint); font-size:.72em; }
.msg-body { font-size:.95em; line-height:1.45; color:#e8eaed;
  white-space:pre-wrap; overflow-wrap:anywhere; }
.msg-body a { color:var(--link); }
.msg-me { font-style:italic; color:#b9bec7; }
.edited-tag { color:#5f6672; font-size:.78em; font-style:normal; }

.code-block { display:block; margin:6px 0; background:#10131a;
  border:1px solid var(--line); border-radius:8px; padding:10px 12px;
  overflow-x:auto; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.88em; line-height:1.5; white-space:pre; }
.code-inline { background:#10131a; border:1px solid var(--line); border-radius:5px;
  padding:1px 5px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.88em; color:#e8b4b9; }

.msg-imgs { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px; }
.chat-img { display:block; max-width:min(360px, 100%); max-height:280px;
  border-radius:10px; border:1px solid var(--line); cursor:zoom-in;
  background:#10131a; }
.img-gone { display:inline-block; color:var(--faint); font-size:.85em;
  font-style:italic; background:#10141c; border:1px dashed var(--line);
  border-radius:8px; padding:6px 12px; margin:4px 0; }

/* hover toolbar */
.msg-tools { position:absolute; top:-12px; right:12px; display:none; gap:2px;
  background:var(--card-2); border:1px solid var(--line-2); border-radius:9px;
  padding:2px; box-shadow:0 4px 14px rgba(0,0,0,.4); z-index:2; }
.msg:hover .msg-tools { display:flex; }
.tool-btn { background:none; border:none; cursor:pointer; font-size:.95em;
  padding:4px 7px; border-radius:6px; color:var(--text); font-family:inherit; }
.tool-btn:hover { background:#2a2e39; }

/* reactions */
.reactions { display:flex; flex-wrap:wrap; gap:6px; }
.reactions:not(:empty) { margin-top:5px; }
.react-chip { display:inline-flex; align-items:center; gap:4px;
  background:var(--card-2); border:1px solid var(--line-2); border-radius:999px;
  color:#c9cdd4; font-size:.8em; padding:2px 9px; cursor:pointer; font-family:inherit; }
.react-chip:hover { border-color:var(--accent); }
.react-chip.mine { background:#26284a; border-color:var(--accent); color:#dfe2ff; }
.react-picker { position:fixed; z-index:10001; display:none; gap:2px;
  flex-wrap:wrap; max-width:calc(100vw - 16px); background:var(--card-2);
  border:1px solid var(--line-2); border-radius:12px; padding:6px;
  box-shadow:0 8px 26px rgba(0,0,0,.55); }
.react-picker.show { display:flex; }
.react-picker button { background:none; border:none; cursor:pointer;
  font-size:1.15em; padding:5px 6px; border-radius:8px; }
.react-picker button:hover { background:#2a2e39; }

/* ---- composer (class is chat-composer: wbs.css styles the feed's
   .composer textarea, and that must not leak in here) ------------------- */
.typing-line { height:18px; padding:0 22px; color:var(--muted); font-size:.76em;
  font-style:italic; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.chat-composer { padding:2px 18px 14px; position:relative; }
.edit-banner { display:none; align-items:center; gap:12px; background:#1b2534;
  border:1px solid #2c4a6b; border-radius:10px 10px 0 0; border-bottom:none;
  color:#9fc4ea; font-size:.8em; padding:6px 14px; }
.edit-banner.show { display:flex; }
.edit-banner button { background:none; border:none; color:var(--link);
  cursor:pointer; font-size:1em; text-decoration:underline; padding:0; font-family:inherit; }
.attach-previews { display:flex; flex-wrap:wrap; gap:8px; }
.attach-previews:not(:empty) { padding:8px 0 6px; }
.attach-previews .pv { position:relative; width:84px; height:84px; }
.attach-previews img { width:100%; height:100%; object-fit:cover;
  border-radius:10px; border:1px solid var(--line-2); display:block; }
.attach-previews .pv button { position:absolute; top:-6px; right:-6px;
  width:22px; height:22px; border-radius:50%; border:1px solid var(--line-2);
  background:var(--card); color:var(--text); cursor:pointer; font-size:.75em;
  line-height:1; }
.attach-previews .pv.busy { display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:.78em; border:1px dashed var(--line-2);
  border-radius:10px; }
.emoji-pop { position:absolute; bottom:calc(100% + 4px); left:18px; z-index:50;
  display:none; flex-direction:column; min-width:220px; background:var(--card-2);
  border:1px solid var(--line-2); border-radius:12px; padding:5px;
  box-shadow:0 8px 26px rgba(0,0,0,.55); }
.emoji-pop.show { display:flex; }
.emoji-row { display:flex; align-items:center; gap:9px; text-align:left;
  background:none; border:none; cursor:pointer; color:#c9cdd4; font-size:.9em;
  padding:6px 10px; border-radius:8px; font-family:inherit; }
.emoji-row span { font-size:1.15em; }
.emoji-row.sel, .emoji-row:hover { background:#2a2e4a; color:var(--text); }

.composer-box { display:flex; align-items:flex-end; gap:8px; background:var(--card-2);
  border:1px solid var(--line-2); border-radius:12px; padding:8px 8px 8px 8px; }
.composer-box:focus-within { border-color:var(--accent); }
#attach-btn { flex:none; width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; background:transparent;
  border:none; cursor:pointer; color:var(--muted); font-size:1.15em; }
#attach-btn:hover { color:var(--text); background:#2a2e39; }
#input { flex:1; resize:none; border:none; outline:none; background:transparent;
  color:var(--text); font:inherit; font-size:.95em; line-height:1.4;
  max-height:180px; padding:6px 4px; }
#input::placeholder { color:var(--faint); }
#input:disabled { opacity:.5; }
#send-btn { flex:none; width:34px; height:34px; border-radius:9px; border:none;
  cursor:pointer; background:var(--accent); color:#0b0d12; display:flex;
  align-items:center; justify-content:center; }
#send-btn svg { width:18px; height:18px; }
#send-btn:hover { background:var(--accent-2); }
#send-btn:disabled { background:#2a2e39; color:var(--faint); cursor:default; }
.composer-meta { display:flex; justify-content:space-between; gap:12px;
  padding:5px 4px 0; font-size:.72em; color:#4d5561; flex-wrap:wrap; }
.composer-meta em { font-style:normal; color:#6b7280; }
.upload-status { color:var(--teal); margin-left:auto; white-space:nowrap; }
.char-count.warn { color:#e6b450; }

/* ---- overlays ---------------------------------------------------------- */
.drop-hint { position:fixed; inset:0; z-index:10000; display:none; align-items:center;
  justify-content:center; background:rgba(11,13,18,.85); border:3px dashed var(--accent);
  border-radius:18px; color:var(--accent); font-size:1.3em; font-weight:700;
  pointer-events:none; }
.drop-hint.show { display:flex; }
.lightbox { position:fixed; inset:0; z-index:10002; background:rgba(5,6,9,.92);
  display:flex; align-items:center; justify-content:center; cursor:zoom-out;
  padding:24px; }
.lightbox img { max-width:100%; max-height:calc(100vh - 60px); border-radius:12px;
  border:1px solid var(--line); }

/* ---- phones ------------------------------------------------------------ */
@media (max-width:860px) {
  .chat { grid-template-columns:1fr; }
  .chat-side { position:absolute; inset:0 30% 0 0; z-index:5;
    transform:translateX(-100%); transition:transform .2s;
    box-shadow:8px 0 30px rgba(0,0,0,.5); border-right:1px solid var(--line-2); }
  .chat-side.open { transform:translateX(0); }
  .side-close { display:inline-block; }
  .side-toggle { display:inline-block; }
  .chan-hint { display:none; }
  .composer-meta .hint { display:none; }
}