/* =============================================================================
   chat.css — GLOBAL CHAT DOCK (build 728)
   ---------------------------------------------------------------------------
   PLACEMENT, and why:

   ENTRY is a chip in #statusbar, not a floating button. Every floating position
   in this app is already owned — #top-stack holds the zone banner, the arena's
   bottom corners hold #battle-controls (Bail / AUTO) and #joystick, the HUD's
   right column is the LootCoins/Pro CTA stack, and .hud-bars is display:none in
   landscape. The status row is the one surface that is present on every screen,
   in every orientation, in normal flow — and "how many pilots are online" is
   status, so it reads correctly there.

   PANEL is non-modal and absolute inside #app (NOT fixed — #app is inset 11px
   with overflow:hidden, so a fixed panel would misalign with the nav and escape
   the rounded frame). The battle keeps running and painting behind it: reading
   chat while grinding is the whole point of the feature.

   FIT CONTRACT: .gc-scroll is the one scroll root; it declares its own flex so
   fit-guard.css lets it shrink, and it is registered with the clip auditor in
   js/fit-audit.js. Nothing here pairs a fixed height with overflow:hidden.
   ========================================================================== */

/* ---- entry chip (in #statusbar) ------------------------------------------ */
#gc-chip{flex:none;display:none;align-items:center;gap:6px;height:32px;padding:0 11px;border:1px solid var(--line-2);border-radius:99px;background:linear-gradient(180deg,rgba(30,40,58,.9),rgba(19,26,38,.9));cursor:pointer;font:700 12px/1 'Rajdhani',sans-serif;letter-spacing:.04em;color:var(--muted);margin:0 6px 0 0;position:relative;transition:border-color .16s,color .16s}
#gc-chip.on{display:flex}
/* The auth gate (#login, z-index 60) and the forced-update veil are children of
   #app and the dock sits above them at 79, so a chip or a panel over a login
   form is an obstacle in front of the one thing the player has to do. Ordered
   after .on deliberately: same specificity, later rule wins. */
#gc-chip.gated{display:none}
#gc-chip:hover{border-color:var(--gold-dim);color:var(--text)}
#gc-chip.open{border-color:var(--gold-dim);color:var(--text);background:linear-gradient(180deg,rgba(52,42,18,.9),rgba(32,26,12,.9))}
#gc-chip .gc-ic{width:15px;height:15px;flex:0 0 auto;color:var(--cyan)}
#gc-chip .gc-n{font-variant-numeric:tabular-nums;min-width:8px}
#gc-chip .gc-dot{width:6px;height:6px;border-radius:50%;background:var(--muted-2);flex:0 0 auto}
#gc-chip.live .gc-dot{background:var(--good);box-shadow:0 0 7px rgba(63,197,107,.85)}
#gc-chip .gc-unread{position:absolute;top:-4px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;border:1px solid #1b2434;background:var(--gold);color:#1a1200;font:800 9px/14px 'Rajdhani',sans-serif;text-align:center;display:none}
#gc-chip.unread .gc-unread{display:block}
#gc-chip.unread{border-color:var(--gold-dim);color:var(--text)}
@media (max-width:420px){#gc-chip{padding:0 9px;gap:5px}#gc-chip .gc-lbl{display:none}}

/* ---- dock shell ---------------------------------------------------------- */
#gc-dock{position:absolute;z-index:79;display:none;flex-direction:column;border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(21,29,43,.976),rgba(13,18,27,.986));box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:hidden;contain:layout paint}
#gc-dock.open{display:flex}
/* phone / short window: bottom sheet — arena and ship stay visible above it */
#gc-dock{left:8px;right:8px;bottom:calc(var(--gc-nav,60px) + 8px);height:min(48vh,380px);max-height:calc(100% - 132px);min-height:176px;border-radius:14px}
/* GEOMETRY. Every offset is MEASURED, not guessed — js/chat.js sets --gc-top
   (statusbar + HUD), --gc-nav (bottom nav) and --gc-lift on the dock.
   The hardcoded 132/152px reserves this replaced were too small: the dock's top
   edge cut into the HUD on a short desktop window, hiding the player's own ship
   score and HP. The HUD's height is not a constant either — .hud-bars is
   display:none in landscape — so it has to be read, not assumed.

   --gc-lift clears #battle-controls (Bail / AUTO) while the battle screen is
   showing, so an open dock never costs the player access to their controls. It
   is subtracted from max-height as well as added to the bottom offset, or a tall
   dock plus a lift would push its own top out through the HUD. */
#gc-dock{--gc-lift:0px;left:8px;right:8px;bottom:calc(var(--gc-nav,60px) + 8px + var(--gc-lift));height:min(48vh,380px);max-height:calc(100% - var(--gc-top,150px) - var(--gc-nav,60px) - 16px - var(--gc-lift));min-height:150px;border-radius:14px}
/* Anything wider than a phone gets the right column, not a full-width sheet.
   At a 760px breakpoint a 740px landscape phone stretched the sheet to 708px,
   which is a 90-character measure — unreadable, and it buried the whole arena. */
@media (min-width:620px){#gc-dock{left:auto;right:10px;width:346px;height:min(60vh,540px);border-radius:12px}}

/* ---- header -------------------------------------------------------------- */
.gc-head{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid var(--line);background:rgba(10,14,22,.6)}
.gc-title{font:800 12px/1 'Orbitron',sans-serif;letter-spacing:.12em;color:var(--text);display:flex;align-items:center;gap:7px;min-width:0}
.gc-title .gc-ic{width:14px;height:14px;flex:0 0 auto;color:var(--cyan)}
.gc-count{margin-left:auto;display:flex;align-items:center;gap:5px;flex:0 0 auto;font:700 10px/1 'Rajdhani',sans-serif;letter-spacing:.1em;color:var(--muted)}
.gc-count .gc-dot{width:6px;height:6px;border-radius:50%;background:var(--muted-2)}
.gc-count.live .gc-dot{background:var(--good);box-shadow:0 0 7px rgba(63,197,107,.85)}
.gc-x{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--panel-3);color:var(--muted);font:700 16px/1 sans-serif;cursor:pointer;padding:0}
.gc-x:hover{color:var(--text);border-color:var(--line-2)}

/* ---- message list (THE scroll root) -------------------------------------- */
.gc-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px 10px 10px;display:flex;flex-direction:column;gap:1px}
.gc-scroll::-webkit-scrollbar{width:8px}
.gc-scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.gc-scroll::-webkit-scrollbar-button{display:none}

.gc-msg{padding:3px 0;min-width:0}
.gc-who{display:flex;align-items:baseline;gap:6px;min-width:0;margin-bottom:1px}
.gc-nm{font:700 12px/1.2 'Rajdhani',sans-serif;color:var(--cyan);cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;border:0;padding:0;text-align:left}
.gc-nm:hover{color:var(--text);text-decoration:underline}
.gc-tag{flex:0 0 auto;font:800 9px/1 'Rajdhani',sans-serif;letter-spacing:.08em;color:var(--gold);border:1px solid rgba(242,178,75,.35);border-radius:4px;padding:2px 4px}
.gc-lv{flex:0 0 auto;font:700 9px/1 'Rajdhani',sans-serif;letter-spacing:.06em;color:var(--muted-2)}
.gc-t{flex:0 0 auto;margin-left:auto;font:600 9px/1 'Rajdhani',sans-serif;color:var(--muted-2);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.gc-txt{font:500 13px/1.42 'Rajdhani',sans-serif;color:var(--text);overflow-wrap:anywhere;text-wrap:pretty}
.gc-msg.cont{padding-top:0}
.gc-msg.cont .gc-who{display:none}
/* own message: a left rule INSIDE the row. A negative margin here overflowed the
   scroll root by its own width and produced a horizontal scrollbar. */
.gc-msg.mine{border-left:2px solid var(--gold-dim);padding-left:7px}
.gc-msg.mine .gc-nm{color:var(--gold)}
.gc-msg.pending{opacity:.5}
.gc-flag{flex:0 0 auto;border:0;background:none;color:var(--muted-2);font:700 11px/1 'Rajdhani',sans-serif;cursor:pointer;padding:2px 4px;opacity:0;transition:opacity .12s}
.gc-msg:hover .gc-flag,.gc-msg:focus-within .gc-flag{opacity:1}
.gc-flag:hover{color:var(--bad)}
/* operator announcement */
.gc-msg.sys{margin:5px 0;padding:8px 9px;border:1px solid rgba(242,178,75,.3);border-left:3px solid var(--gold);border-radius:8px;background:rgba(242,178,75,.07)}
.gc-msg.sys .gc-who{display:flex;margin-bottom:3px}
.gc-msg.sys .gc-nm{color:var(--gold);font:800 10px/1 'Orbitron',sans-serif;letter-spacing:.1em;cursor:default}
.gc-msg.sys .gc-nm:hover{text-decoration:none;color:var(--gold)}
.gc-msg.sys .gc-txt{color:#ffe9bd}

.gc-day{align-self:center;margin:8px 0 4px;padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font:700 9px/1 'Rajdhani',sans-serif;letter-spacing:.14em;color:var(--muted-2)}
.gc-empty{margin:auto;padding:14px 12px;text-align:center;font:500 12px/1.55 'Rajdhani',sans-serif;color:var(--muted);max-width:258px;text-wrap:pretty}
.gc-empty b{display:block;font:800 11px/1.3 'Orbitron',sans-serif;letter-spacing:.1em;color:var(--muted);margin-bottom:7px}
.gc-empty .gc-btn{margin-top:11px}

/* new-messages pill */
/* new-messages pill. Anchored off the REAL footer height (--gc-foot, set by
   js/chat.js): the composer grows a note line whenever there is a rule to state,
   and a fixed offset sat on top of that text. */
.gc-jump{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--gc-foot,66px) + 7px);z-index:2;display:none;align-items:center;gap:5px;padding:6px 12px;border:1px solid var(--gold-dim);border-radius:999px;background:rgba(32,25,10,.96);color:var(--gold);font:700 10px/1 'Rajdhani',sans-serif;letter-spacing:.1em;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.gc-jump.on{display:flex}

/* ---- composer ------------------------------------------------------------ */
.gc-foot{flex:0 0 auto;border-top:1px solid var(--line);background:rgba(10,14,22,.62)}
.gc-note{padding:7px 10px 0;font:600 10.5px/1.45 'Rajdhani',sans-serif;color:var(--muted);text-wrap:pretty}
.gc-note:empty{display:none}
.gc-note b{color:var(--gold)}
.gc-note.bad b{color:var(--bad)}
.gc-form{display:flex;align-items:center;gap:7px;padding:8px 9px}
.gc-in{flex:1 1 auto;min-width:0;height:38px;padding:0 10px;border:1px solid var(--line-2);border-radius:9px;background:var(--panel-3);color:var(--text);font:500 13px/38px 'Rajdhani',sans-serif;outline:none}
.gc-in:focus{border-color:var(--gold-dim);box-shadow:var(--glow-gold)}
.gc-in::placeholder{color:var(--muted-2)}
.gc-in:disabled{opacity:.55;cursor:not-allowed}
.gc-left{flex:0 0 auto;font:700 10px/1 'Rajdhani',sans-serif;color:var(--muted-2);font-variant-numeric:tabular-nums}
.gc-left:empty{display:none}
.gc-left.warn{color:var(--gold)}
.gc-send{flex:0 0 auto;min-width:52px;height:38px;padding:0 13px;border:1px solid var(--gold-dim);border-radius:9px;background:linear-gradient(180deg,#f2b24b,#d18f26);color:#1a1200;font:800 11px/1 'Orbitron',sans-serif;letter-spacing:.06em;cursor:pointer;font-variant-numeric:tabular-nums}
.gc-send:disabled{background:var(--panel-3);border-color:var(--line);color:var(--muted-2);cursor:not-allowed}

/* ---- pilot card ---------------------------------------------------------- */
#gc-card{position:absolute;inset:0;z-index:96;display:grid;place-items:center;padding:16px;background:rgba(5,8,13,.74);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.gc-cd{width:100%;max-width:330px;max-height:100%;overflow-y:auto;border:1px solid var(--line-2);border-radius:14px;background:linear-gradient(180deg,var(--panel-2),var(--panel));box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:11px}
.gc-cd h3{margin:0;font:800 15px/1.25 'Orbitron',sans-serif;letter-spacing:.05em;color:var(--text);display:flex;align-items:center;gap:7px;flex-wrap:wrap;overflow-wrap:anywhere}
.gc-cd h3 .gc-tag{font-size:10px;padding:3px 5px}
.gc-cd-on{font:700 10px/1 'Rajdhani',sans-serif;letter-spacing:.08em;color:var(--good)}
.gc-cd-ships{display:flex;gap:5px;flex-wrap:wrap}
.gc-cd-ships:empty{display:none}
.gc-cd-ships img{width:38px;height:38px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.25);padding:2px}
.gc-cd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.gc-cd-stats span{display:flex;flex-direction:column;gap:3px;padding:7px 6px;border:1px solid var(--line);border-radius:9px;background:rgba(0,0,0,.2);font:700 9px/1 'Rajdhani',sans-serif;letter-spacing:.1em;color:var(--muted-2);text-align:center;min-width:0}
.gc-cd-stats b{font:800 13px/1.1 'Rajdhani',sans-serif;letter-spacing:0;color:var(--text);overflow:hidden;text-overflow:ellipsis}
.gc-cd-q{font:500 12px/1.5 'Rajdhani',sans-serif;color:var(--muted);text-wrap:pretty}
.gc-cd-q em{display:block;margin-top:6px;padding:7px 9px;border-left:2px solid var(--line-2);font-style:normal;color:var(--text);overflow-wrap:anywhere}
.gc-cd-btns{display:flex;flex-wrap:wrap;gap:7px}
.gc-btn{flex:1 1 auto;min-width:92px;min-height:44px;padding:0 12px;border:1px solid var(--line-2);border-radius:9px;background:var(--panel-3);color:var(--text);font:800 11px/1.2 'Rajdhani',sans-serif;letter-spacing:.07em;cursor:pointer;display:grid;place-items:center;text-align:center}
.gc-btn:hover{background:#26324a}
.gc-btn.gold{border-color:var(--gold-dim);background:linear-gradient(180deg,#f2b24b,#d18f26);color:#1a1200}
.gc-btn.bad{border-color:rgba(255,73,95,.42);color:#ff8f9d}
.gc-btn.bad:hover{background:rgba(255,73,95,.12)}
.gc-btn:disabled{opacity:.5;cursor:not-allowed}

/* pushed up by the on-screen keyboard (js sets --gc-kb from visualViewport).
   The wide-screen reset must keep --gc-lift, or a desktop dock silently loses
   its clearance over the battle controls the moment the class is applied. */
#gc-dock.kb{bottom:calc(var(--gc-kb,0px) + 8px)}
@media (min-width:620px){#gc-dock.kb{bottom:calc(var(--gc-nav,60px) + 8px + var(--gc-lift))}}