/* ============================================================
   panel.css — the right-hand panel: header, chat, draw section,
   footer, and the mobile bar. Everything here was previously
   scattered through style.css; style.css now owns only the page
   shell, the video area and the modals.

   Palette/type come from style.css :root. The only new tokens are
   the layout ones below, so a spacing or radius change is one edit.
   ============================================================ */
:root{
  --p-r:10px;          /* panel radius: cards, menus, inputs */
  --p-r-sm:7px;        /* control radius: buttons, chips */
  --p-pad:12px;        /* standard horizontal padding */
  --p-gap:6px;         /* standard gap between controls */
  --p-ctrl:32px;       /* standard control height */
  --p-row:40px;        /* draw toolbar row height (emoji picker offsets off this) */
  --p-hover:rgba(255,255,255,.055);
  --p-ring:0 0 0 2px rgba(224,168,46,.35);
}

/* ---------- Shell ---------- */
#chat-panel{
  width:var(--panel-w);flex-shrink:0;z-index:1;
  display:flex;flex-direction:column;
  background:var(--surface);
  border-left:1px solid var(--border);
  position:relative;overflow:hidden;
}
body.dock #chat-panel{width:100%;flex:1;}

/* ---------- Header ---------- */
#panel-header{
  flex-shrink:0;display:flex;flex-direction:column;gap:6px;
  padding:7px var(--p-pad) 8px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.ph-top{display:flex;align-items:center;gap:10px;min-width:0;}
.brand{
  font-family:var(--font-mono);font-size:var(--fs-md);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text);
  flex-shrink:0;line-height:1;
}
.stream-status{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  padding:3px 8px;border-radius:999px;
  background:var(--surface2);border:1px solid var(--border);
  font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:.14em;color:var(--text-sub);
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--text-sub);flex-shrink:0;}
.dot.live{background:var(--live);box-shadow:0 0 0 3px rgba(61,220,132,.18);animation:pulse 2s ease-in-out infinite;}
.stream-status:has(.dot.live){color:var(--live);border-color:rgba(61,220,132,.3);}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

.hdr-right{display:flex;align-items:center;gap:var(--p-gap);margin-left:auto;min-width:0;}
.chatter-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 8px;border-radius:999px;
  background:var(--surface2);border:1px solid var(--border);
  font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-sub);
}
.chatter-pill svg{width:13px;height:13px;flex-shrink:0;opacity:.8;}
.chatter-pill .val{color:var(--text);font-weight:600;}
.watch-track{width:42px;height:4px;border-radius:2px;background:var(--border);overflow:hidden;flex-shrink:0;}
.watch-fill{height:100%;width:0%;background:var(--brass);border-radius:2px;transition:width 1s linear;}

/* ---------- Buttons (shared: header strip, draw tools, modals) ---------- */
.tool-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:var(--p-ctrl);padding:0 9px;
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--p-r-sm);
  color:var(--text-dim);cursor:pointer;white-space:nowrap;
  font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;
  transition:background .14s,border-color .14s,color .14s;
}
.tool-btn svg{width:17px;height:17px;display:block;flex-shrink:0;}
.tool-btn span{display:block;line-height:1;}
.tool-btn:hover{background:var(--p-hover);border-color:var(--border-lt);color:var(--text);}
.tool-btn:focus-visible{outline:none;box-shadow:var(--p-ring);}
.tool-btn.active{background:var(--brass);border-color:var(--brass);color:#121216;}
.tool-btn.primary{border-color:var(--brass-dk);color:var(--brass-lt);}
.tool-btn.primary:hover{border-color:var(--brass);background:rgba(224,168,46,.1);color:var(--brass-lt);}
.tool-btn.lg{font-size:var(--fs-md);}
.tool-btn:disabled{opacity:.4;cursor:not-allowed;}

.hdr-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--p-ctrl);height:var(--p-ctrl);
  background:none;border:1px solid transparent;border-radius:var(--p-r-sm);
  color:var(--text-sub);font-size:var(--fs-lg);line-height:1;cursor:pointer;
  transition:background .14s,color .14s;
}
.hdr-btn:hover{background:var(--p-hover);color:var(--text);}
.hdr-btn:focus-visible{outline:none;box-shadow:var(--p-ring);}

/* Header icon strip — one scrollable row, never wraps */
.tool-row{
  display:flex;align-items:center;gap:var(--p-gap);
  overflow-x:auto;scrollbar-width:none;
}
.tool-row::-webkit-scrollbar{display:none;}
.tool-row .tool-btn{min-width:var(--p-ctrl);padding:0 7px;flex-shrink:0;}
.tool-divider{width:1px;height:18px;background:var(--border);flex-shrink:0;margin:0 2px;}

/* ---------- Overflow menu ---------- */
.more-wrap{position:relative;flex-shrink:0;}
.more-menu{
  display:none;position:fixed;z-index:1000;
  flex-direction:column;gap:2px;min-width:188px;padding:5px;
  background:var(--surface2);border:1px solid var(--border-lt);border-radius:var(--p-r);
  box-shadow:0 12px 32px rgba(0,0,0,.55);
}
.more-menu.open{display:flex;}
.more-menu.mobile-anchored{top:auto!important;left:12px!important;right:12px!important;bottom:calc(var(--mobile-bar-h,64px) + 8px)!important;}
.mobile-only-item{display:none;}
.more-menu-item{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:8px 10px;border:none;border-radius:var(--p-r-sm);
  background:none;color:var(--text);text-align:left;cursor:pointer;
  font-family:var(--font-sans);font-size:var(--fs-xs);
  transition:background .14s;
}
.more-menu-item svg{width:16px;height:16px;flex-shrink:0;color:var(--text-sub);}
.more-menu-item:hover{background:var(--p-hover);}
.more-menu-item.active,.more-menu-item.active svg{color:var(--brass-lt);}

/* ---------- Collapsible setting panels ---------- */
.collapse-panel{
  display:none;flex-direction:column;gap:11px;flex-shrink:0;
  padding:12px var(--p-pad);
  background:var(--surface2);border-bottom:1px solid var(--border);
}
.collapse-panel.open{display:flex;}
.cp-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-dim);
}
.cp-row label{flex-shrink:0;color:var(--text-sub);text-transform:uppercase;letter-spacing:.1em;}
.toggle{position:relative;width:36px;height:20px;flex-shrink:0;}
.toggle input{opacity:0;width:0;height:0;}
.toggle-track{position:absolute;inset:0;border-radius:999px;background:var(--border);cursor:pointer;transition:background .18s;}
.toggle-track::after{content:'';position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--text-sub);transition:transform .18s,background .18s;}
.toggle input:checked+.toggle-track{background:var(--brass-dk);}
.toggle input:checked+.toggle-track::after{transform:translateX(16px);background:var(--brass-lt);}
.cp-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:var(--border);outline:none;cursor:pointer;}
.cp-slider::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--brass);cursor:pointer;}
.cp-slider::-moz-range-thumb{width:13px;height:13px;border-radius:50%;border:none;background:var(--brass);cursor:pointer;}
.sound-types{display:flex;gap:4px;flex-wrap:wrap;}
.sound-type{
  padding:4px 9px;border-radius:999px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);color:var(--text-sub);
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;
  transition:background .14s,border-color .14s,color .14s;
}
.sound-type:hover{border-color:var(--border-lt);color:var(--text-dim);}
.sound-type.active{background:var(--brass);border-color:var(--brass);color:#121216;}

#member-list{max-height:150px;overflow-y:auto;}
.member-item{display:flex;align-items:center;gap:8px;padding:5px 2px;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-dim);}
.member-dot{width:6px;height:6px;border-radius:50%;background:var(--brass-dk);flex-shrink:0;}
.member-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.member-badge{font-size:var(--fs-xs);color:var(--brass-lt);}
.member-me{font-size:var(--fs-xs);color:var(--text-sub);font-style:italic;}
.member-empty{padding:8px 2px;text-align:center;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-sub);letter-spacing:.1em;}

/* ---------- Chat ---------- */
#chat-body{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;gap:11px;
  padding:14px var(--p-pad) 4px;
}
/* Message styling (rows, names, clip cards) lives in chat.css, which
   both this page and /chat-only load. */

/* ---------- Draw section (hidden until the Draw button is pressed) ---------- */
#canvas-section,#resize-handle{display:none;}
#chat-panel.draw-open #canvas-section{display:flex;}
#chat-panel.draw-open #resize-handle{display:flex;}

#resize-handle{
  height:9px;flex-shrink:0;cursor:ns-resize;
  align-items:center;justify-content:center;
  background:var(--surface2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  transition:background .14s;
}
#resize-handle:hover{background:var(--p-hover);}
.resize-grip{width:30px;height:2px;border-radius:1px;background:var(--text-sub);}
#resize-handle:hover .resize-grip{background:var(--brass);}

#canvas-section{flex-direction:column;height:260px;min-height:130px;flex-shrink:0;position:relative;}
.ctool-row{
  display:flex;align-items:center;gap:var(--p-gap);flex-shrink:0;
  height:var(--p-row);padding:0 10px;
  background:var(--surface2);border-bottom:1px solid var(--border);
  overflow-x:auto;scrollbar-width:none;
}
.ctool-row::-webkit-scrollbar{display:none;}
.ctool-row .tool-btn{min-height:26px;padding:0 8px;flex-shrink:0;}
.draw-colors{display:flex;gap:5px;align-items:center;flex-shrink:0;}
.draw-color{width:15px;height:15px;border-radius:50%;cursor:pointer;flex-shrink:0;transition:transform .14s;}
.draw-color:hover{transform:scale(1.15);}
.draw-color.active{outline:2px solid var(--text);outline-offset:2px;}
.ctool-sep{width:1px;height:16px;background:var(--border);flex-shrink:0;margin:0 2px;}
.stamp-indicator{display:none;align-items:center;gap:4px;flex-shrink:0;}
.stamp-preview{font-size:var(--fs-xl);line-height:1;}
.stamp-cancel{background:none;border:none;cursor:pointer;color:var(--text-sub);font-size:var(--fs-sm);padding:0 2px;}
.stamp-cancel:hover{color:var(--accent-lt);}
.zoom-controls{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.zoom-btn,#zoom-display{
  height:26px;background:var(--surface);border:1px solid var(--border);border-radius:var(--p-r-sm);
  color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:var(--fs-xs);transition:background .14s,border-color .14s,color .14s;
}
.zoom-btn{width:28px;font-size:var(--fs-lg);font-weight:600;}
#zoom-display{min-width:54px;padding:0 8px;}
.zoom-btn:hover,#zoom-display:hover{background:var(--p-hover);border-color:var(--border-lt);color:var(--text);}
#save-btn{margin-left:auto;}

#emoji-picker{
  position:absolute;left:0;right:0;bottom:0;top:var(--p-row);
  z-index:20;display:none;flex-direction:column;
  background:var(--surface);border-top:1px solid var(--border);
}
#emoji-picker.open{display:flex;}
.ep-search{padding:7px;flex-shrink:0;border-bottom:1px solid var(--border);}
.ep-search input{
  width:100%;padding:7px 9px;border-radius:var(--p-r-sm);
  background:var(--surface2);border:1px solid var(--border);color:var(--text);
  font-family:var(--font-mono);font-size:var(--fs-sm);outline:none;transition:border-color .14s;
}
.ep-search input:focus{border-color:var(--brass-dk);}
.ep-search input::placeholder{color:var(--text-sub);}
.ep-cats{display:flex;gap:2px;padding:5px;flex-shrink:0;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border);}
.ep-cats::-webkit-scrollbar{display:none;}
.ep-cat{background:none;border:none;border-radius:var(--p-r-sm);cursor:pointer;font-size:var(--fs-xl);padding:4px 6px;opacity:.45;flex-shrink:0;transition:opacity .14s,background .14s;}
.ep-cat:hover{opacity:.8;background:var(--p-hover);}
.ep-cat.active{opacity:1;background:var(--p-hover);}
.ep-grid{flex:1;overflow-y:auto;padding:4px;display:flex;flex-wrap:wrap;align-content:flex-start;}
.ep-btn{background:none;border:none;border-radius:var(--p-r-sm);cursor:pointer;font-size:var(--fs-3xl);width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .1s;}
.ep-btn:hover{background:var(--p-hover);}

#canvas-viewport{flex:1;overflow:hidden;position:relative;background:#09090b;}
#draw-canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none;}
#draw-canvas.pan-mode{cursor:grab;}
#draw-canvas.pan-mode:active{cursor:grabbing;}

/* ---------- Footer ---------- */
#chat-foot{padding:10px var(--p-pad) 12px;flex-shrink:0;background:var(--surface);border-top:1px solid var(--border);}
#chat-input{
  width:100%;padding:10px 12px;border-radius:var(--p-r);
  background:var(--surface2);border:1px solid var(--border);color:var(--text);
  font-family:var(--font-sans);font-size:var(--fs-md);outline:none;
  transition:border-color .14s,box-shadow .14s;
}
#chat-input::placeholder{color:var(--text-sub);}
#chat-input:focus{border-color:var(--brass-dk);box-shadow:var(--p-ring);}
#chat-input:disabled{color:var(--text-sub);cursor:not-allowed;}

/* ---------- Panel resize handle (between video and panel) ---------- */
#h-resize{
  width:8px;flex-shrink:0;cursor:ew-resize;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);transition:background .14s;
}
#h-resize:hover{background:var(--p-hover);}
.h-grip{width:2px;height:34px;border-radius:1px;background:var(--border-lt);}
#h-resize:hover .h-grip{background:var(--brass);}
body.dock #h-resize{display:none;}

/* ---------- Scrollbars (panel-wide) ---------- */
#chat-body::-webkit-scrollbar,#member-list::-webkit-scrollbar,.ep-grid::-webkit-scrollbar{width:8px;}
#chat-body::-webkit-scrollbar-thumb,#member-list::-webkit-scrollbar-thumb,.ep-grid::-webkit-scrollbar-thumb{
  background:var(--border-lt);border-radius:4px;border:2px solid var(--surface);
}
#chat-body::-webkit-scrollbar-thumb:hover,#member-list::-webkit-scrollbar-thumb:hover,.ep-grid::-webkit-scrollbar-thumb:hover{background:var(--text-sub);}
#chat-body,#member-list,.ep-grid{scrollbar-width:thin;scrollbar-color:var(--border-lt) transparent;}

/* ---------- Mobile bar ---------- */
#mobile-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:500;
  align-items:stretch;
  background:var(--surface);border-top:1px solid var(--border);
  padding:4px 4px calc(4px + env(safe-area-inset-bottom));
}
.mb-btn{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:7px 4px;border:none;border-radius:var(--p-r-sm);background:none;cursor:pointer;
  color:var(--text-sub);font-family:var(--font-sans);font-size:var(--fs-2xs);
  transition:background .14s,color .14s;
}
.mb-btn svg{width:21px;height:21px;}
.mb-btn:hover{background:var(--p-hover);}
.mb-btn.primary{color:var(--brass-lt);}
.mb-btn.active{color:var(--brass-lt);background:var(--p-hover);}

/* ---------- Mobile reflow ----------
   Stacked layout once video + panel no longer fit side by side.
   The page-shell rules here live with the panel because they only
   exist to hand the panel the full width below the video. */
@media (max-width: 860px){
  body.stream{flex-direction:column;overflow-y:auto;overflow-x:hidden;}
  body.stream #video-section{flex:none;width:100%;aspect-ratio:16/9;min-height:0;}
  body.stream #h-resize{display:none;}
  body.stream #chat-panel{
    width:100%;flex:1;min-height:0;
    border-left:none;border-top:1px solid var(--border);
    padding-bottom:var(--mobile-bar-h,64px);
  }
  .offline-name,.vag-title{font-size:clamp(28px,9vw,56px);letter-spacing:3px;}

  /* mobile-bar is the single control surface; the header strip duplicates it */
  /* mobile-bar duplicates the tool buttons, but not the stream picker —
     hide the row's children rather than the row itself, so the chip
     survives (a child of a display:none parent can't be shown). */
  body.stream #panel-header .tool-row > *:not(.mv-chip){display:none;}
  body.stream #panel-header .tool-row{margin-left:auto;}
  body.stream .stream-status{display:none;}

  /* Chat and draw share the space below the header — one at a time */
  body.stream #chat-panel.mode-draw #canvas-section{display:flex;}
  body.stream #chat-panel.mode-chat #canvas-section{display:none;}
  body.stream #chat-panel.mode-draw #chat-body{display:none;}
  body.stream #canvas-section{height:auto!important;min-height:0;flex:1;}
  body.stream #resize-handle{display:none;}

  #mobile-bar{display:flex;}
  .mobile-only-item{display:flex;}
}

/* ---------- Panel collapse (see js/panel-ui.js) ----------
   One control in one place: a tab fixed to the viewport, sitting just
   left of the panel's drag handle. It lives on <body>, not inside
   #chat-panel, because the panel clips overflow — a child positioned
   outside it is invisible. Its offset comes from --panel-edge, which
   panel-ui.js keeps in sync with the panel's real width, so it tracks
   a drag-resize and slides to the screen edge when hidden. */
#panel-toggle{
  position:fixed;right:var(--panel-edge,328px);top:50%;transform:translateY(-50%);z-index:400;
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:18px 6px;cursor:pointer;
  background:var(--surface2);color:var(--text-dim);
  border:1px solid var(--border-lt);border-right:none;
  border-radius:var(--p-r) 0 0 var(--p-r);
  box-shadow:-4px 0 18px rgba(0,0,0,.45);
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.18em;text-transform:uppercase;
  transition:background .14s,color .14s,border-color .14s;
}
#panel-toggle:hover{background:var(--brass);border-color:var(--brass);color:#121216;}
#panel-toggle:focus-visible{outline:none;box-shadow:var(--p-ring);}
#panel-toggle svg{width:16px;height:16px;display:block;flex-shrink:0;}
#panel-toggle .pt-label{writing-mode:vertical-rl;text-orientation:mixed;display:none;}
body.panel-hidden #panel-toggle .pt-label{display:block;}

body.panel-hidden #chat-panel,
body.panel-hidden #h-resize{display:none;}

/* The panel is the whole interface on mobile and in the dock view —
   no collapsing there. */
body.dock #panel-toggle{display:none!important;}
@media (max-width: 860px){
  /* The edge tab is a desktop affordance; here the Chat button in the
     mobile bar collapses the panel (see js/mobile-bar.js), and the
     video takes the screen instead of leaving dead space below it. */
  #panel-toggle{display:none!important;}
  body.stream.panel-hidden #chat-panel{display:none;}
  body.stream.panel-hidden #h-resize{display:none;}
  body.stream.panel-hidden #video-section{
    flex:1;aspect-ratio:auto;
    height:calc(100dvh - var(--mobile-bar-h,64px));
  }
}

/* Sound on/off glyph in the ⋯ menu — sized to match the SVG icons
   beside it. chatclient.js swaps the character; the label is separate. */
.notif-glyph{
  width:16px;flex-shrink:0;
  font-size:14px;line-height:1;text-align:center;
}

/* ---------- Chat wallpaper (see js/wallpaper.js) ----------
   Image sits under a flat tint; --wp-fade is the tint's alpha, so
   raising opacity thins the tint rather than fading the text. cover
   fills the panel from these tall portrait sources, cropping the
   sides rather than squashing them. */
#chat-body{
  background-image:
    linear-gradient(rgba(18,18,22,var(--wp-fade,.88)), rgba(18,18,22,var(--wp-fade,.88))),
    var(--wp-img, none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.wp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;}
.wp-tile{
  position:relative;aspect-ratio:3/4;padding:0;overflow:hidden;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--p-r-sm);
  transition:border-color .14s,transform .1s;
}
.wp-tile img{width:100%;height:100%;object-fit:cover;display:block;}
.wp-tile:hover{border-color:var(--border-lt);}
.wp-tile:active{transform:scale(.96);}
.wp-tile:focus-visible{outline:none;box-shadow:var(--p-ring);}
.wp-tile.active{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass);}
.wp-tile.wp-none{
  display:flex;align-items:center;justify-content:center;
  color:var(--text-sub);font-family:var(--font-mono);font-size:var(--fs-2xs);
  letter-spacing:.06em;text-transform:uppercase;
}
.wp-op{display:flex;align-items:center;gap:9px;flex:1;justify-content:flex-end;}
.wp-op .cp-slider{max-width:120px;}
.wp-op-val{min-width:34px;text-align:right;color:var(--text);font-size:var(--fs-2xs);}
.wp-op .cp-slider:disabled{opacity:.4;cursor:not-allowed;}

/* style.css has no global border-box reset, so a width:100% input adds
   its padding and borders on top and overflows its container — most
   visibly #chat-input. Scoped to the panel rather than applied
   globally, so the modals and drawers keep their current geometry. */
#chat-panel input,
#chat-panel textarea,
#chat-panel button{box-sizing:border-box;max-width:100%;}

/* Guest nudge above the message field — shown only to people the
   server didn't match to a forum account (see js/chatclient.js). */
#guest-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
  margin-bottom:8px;padding:7px 10px;border-radius:var(--p-r);
  background:var(--surface2);border:1px solid var(--border);
  font-size:var(--fs-2xs);
}
#guest-bar[hidden]{display:none;}
/* The label shrinks and ellipsises; the two links stay on one line as
   a single group. margin-right:auto on the label pushed them apart
   until Register wrapped to its own row. */
/* Short enough to never truncate — the buttons carry the meaning, and
   a half-cut sentence reads worse than no label at all. */
.gb-text{
  flex:0 1 auto;min-width:0;color:var(--text-sub);
  letter-spacing:.1em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gb-actions{margin-left:auto;}
.gb-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.gb-link{
  padding:3px 10px;border-radius:999px;text-decoration:none;white-space:nowrap;
  background:var(--surface);border:1px solid var(--border);color:var(--text-dim);
  font-family:var(--font-mono);letter-spacing:.06em;
  transition:background .14s,border-color .14s,color .14s;
}
.gb-link:hover{background:var(--p-hover);border-color:var(--border-lt);color:var(--text);}
#gb-login{border-color:var(--brass-dk);color:var(--brass-lt);}
#gb-login:hover{background:rgba(224,168,46,.12);border-color:var(--brass);}


/* ---------- Header density ----------
   Trimmed control heights: the panel header was ~64px of chrome above
   the messages, which is a lot in a short overlay window. */
#panel-header{--p-ctrl:28px;}
#panel-header .brand{font-size:var(--fs-sm);letter-spacing:.16em;}
#panel-header .stream-status,
#panel-header .chatter-pill{padding:2px 7px;}
#panel-header .tool-btn svg{width:16px;height:16px;}

/* ---------- Settings panel clears the mobile bar ----------
   #chat-panel's bottom padding clears the fixed bar, but this panel
   scrolls inside that padding, so its own last row still ended up
   underneath. The clearance has to be on the scrolling box itself. */
@media (max-width: 860px){
  body.stream #chat-settings-panel{
    max-height:calc(100dvh - var(--mobile-bar-h, 64px) - 140px);
  }
  body.stream #chat-settings-panel .cs-group:last-child{
    padding-bottom:calc(12px + var(--mobile-bar-h, 64px));
  }
}
.cs-safe-bottom{} /* marker: this block is applied */

/* ---------- Input matches the message text ----------
   The composer should look like the message it becomes, so it scales
   off --chat-fs like everything in chat.css rather than a fixed size. */
#chat-input{
  font-family:var(--font-sans);
  font-size:var(--chat-fs, 15px);
  line-height:1.45;
  padding:8px 11px;
}

/* ---------- Chat Settings (see js/chat-settings.js) ----------
   Compact label/control rows. Scrolls and is capped against the
   viewport, not a fixed height — in a short window a fixed cap would
   push the message list off screen. */
#chat-settings-panel{
  display:none;flex-direction:column;gap:0;padding:0;flex-shrink:0;
  max-height:min(58vh,520px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface2);border-bottom:1px solid var(--border);
}
#chat-settings-panel.open{display:flex;}
#chat-settings-panel::-webkit-scrollbar{width:8px;}
#chat-settings-panel::-webkit-scrollbar-thumb{background:var(--border-lt);border-radius:4px;border:2px solid var(--surface2);}
#chat-settings-panel{scrollbar-width:thin;scrollbar-color:var(--border-lt) transparent;}

.cs-group{padding:8px var(--p-pad) 10px;border-bottom:1px solid var(--border);}
.cs-group:last-child{border-bottom:none;}
.cs-head{
  font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-sub);margin-bottom:7px;
}

.cs-row{display:flex;align-items:center;gap:10px;min-height:28px;padding:2px 0;}
.cs-row.stack{flex-direction:column;align-items:stretch;gap:5px;}
.cs-label{flex:0 0 86px;font-size:var(--fs-2xs);color:var(--text-dim);}
.cs-row.stack .cs-label{flex:none;}
.cs-ctl{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:7px;}
.cs-row.stack .cs-ctl{justify-content:flex-start;}
.cs-status{font-size:var(--fs-2xs);color:var(--text-sub);min-height:13px;margin-top:3px;}

/* Controls, sized for this panel */
#chat-settings-panel .cp-slider{flex:1;max-width:130px;}
#chat-settings-panel #chat-fs-val,
#chat-settings-panel #cooldown-label,
#chat-settings-panel .wp-op-val{
  flex:0 0 auto;min-width:34px;text-align:right;
  font-size:var(--fs-2xs);color:var(--text);
}
#chat-settings-panel #name-color-picker{
  width:30px;height:24px;padding:0;cursor:pointer;
  background:none;border:1px solid var(--border);border-radius:var(--p-r-sm);
}
#chat-settings-panel .tool-btn{min-height:26px;padding:0 9px;}
#chat-settings-panel #rename-input{
  flex:1;min-width:0;padding:5px 8px;border-radius:var(--p-r-sm);
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  font-size:var(--fs-2xs);outline:none;
}
#chat-settings-panel #rename-input:focus{border-color:var(--brass-dk);}
#chat-settings-panel .sound-types{display:flex;flex-wrap:wrap;gap:4px;}

/* The emoji list is long; box it so it doesn't own the panel. */
#chat-settings-panel #emoji-grid{
  grid-template-columns:repeat(10,1fr);
  max-height:104px;overflow-y:auto;width:100%;
}
#chat-settings-panel .wp-grid{width:100%;}

/* Old menu items stay in the DOM so their listeners and the bell glyph
   keep working; the panels they opened are now empty. */
.more-menu-item.cs-merged{display:none!important;}
#notif-panel,#color-panel,#wallpaper-panel{display:none!important;}