/* hhb-skins-fix.css (2026-10-02 22:50 AST). Functional fixes already live for HHB + Grok, now in the other
   skins (Classic, WhatsApp, Neon, Discord, Blabax, Clean, Compact, Aurora). Each skin keeps its own look: only
   position / visibility / font fallback change here. HHB and Grok are excluded (they have their own rules).
   Loaded after hhb-ui-fix.css. */

/* 1) Mobile "X is typing…": it used to take 22px from the chat, so the chat shrank and jumped every time someone
      started or stopped typing. Now it floats just above the composer inside a 20px band the chat always keeps
      at its bottom, so the chat and the composer never move and the last message is never covered. */
@media (max-width:768px){
  html body:not(.ui-skin-hhb):not(.ui-skin-grok) .above-composer.above-composer{ position:relative !important; }
  html body:not(.ui-skin-hhb):not(.ui-skin-grok) #log#log{ padding-bottom:20px !important; scroll-padding-bottom:20px; }
  html body:not(.ui-skin-hhb):not(.ui-skin-grok) #main-typing-bar#main-typing-bar.visible{
    position:absolute !important; left:0 !important; right:0 !important; bottom:100% !important; top:auto !important;
    margin:0 !important; z-index:6 !important; pointer-events:none; }
}

/* 2) Room call: while you are in this room's call (body.hhb-call-on, set by hhb-ui-fix.js block 8 from the call
      code's own callback) the voice-note recorder is hidden and the app's mute toggle shows instead (the app
      already shows #mic-toggle-btn during a call). Mobile "+" menu and desktop composer. Comes back after the call. */
html body.hhb-call-on:not(.ui-skin-hhb):not(.ui-skin-grok) #voice-note-btn#voice-note-btn,
html body:not(.ui-skin-hhb):not(.ui-skin-grok):has(#call-btn.in-call) #voice-note-btn#voice-note-btn{ display:none !important; }

/* 3) Missing fonts: a sender's font the phone doesn't have (Century Gothic, Comic Sans MS, Lucida…) fell straight
      through to 'Noto Nastaliq Urdu', whose Latin letters are widely spaced. Now: the skin's own text font for
      Latin, then the Urdu / Arabic fonts for those scripts, then colour emoji. */
html body:not(.ui-skin-hhb):not(.ui-skin-grok){ --font-rtl-fallback:'Inter','Noto Nastaliq Urdu','Noto Sans Arabic','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji'; }
html body.ui-skin-aurora.ui-skin-aurora:not(.ui-skin-hhb){ --font-rtl-fallback:'Plus Jakarta Sans','Inter','Noto Nastaliq Urdu','Noto Sans Arabic','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji'; }
html body:not(.ui-skin-hhb):not(.ui-skin-grok) #log .line .msg-main .txt{ letter-spacing:normal !important; word-spacing:normal !important; }

/* 4) Blabax mobile: the page was 100% screen tall inside a body that keeps 52px at the bottom for the nav, and the
      body centres it, so the room sat 26px above the screen (topic bar + arrow cut off) and the composer 26px
      under the bottom nav. The room now fills exactly the space above the nav. */
@media (max-width:768px){
  html body.ui-skin-blabax > .app-shell.app-shell{ height:100% !important; max-height:100% !important; min-height:0 !important; align-self:stretch !important; }
}

/* 5) HHB in a room call: the mute toggle drew two mics (its mask icon AND its inline SVG), same bug v19 fixed for
      the other HHB icons. Keep the mask (it turns red / shows the muted mic), drop the duplicate SVG. */
html body.ui-skin-hhb.ui-skin-hhb #mic-toggle-btn#mic-toggle-btn > svg{ display:none !important; }

/* 6) Desktop People list readable in every skin (2026-10-02 22:55 AST). Measured at 1280 + 1920 px:
      Grok / Classic / WhatsApp / Neon / Discord / Clean / Compact / Aurora are already 335px with 13.5px names
      (unchanged). Blabax was 172px with 11px names (nicks cut to "Ira…"), HHB 210px. Now Blabax 240px (its
      centred box grows by the same amount, the chat keeps its 806px), names 13px; HHB 236px by default (the
      drag-to-resize width still wins once set). Looks / colours unchanged. */
@media (min-width:769px){
  html body.ui-skin-blabax > .app-shell.app-shell{ grid-template-columns:minmax(0,806px) 240px !important; width:min(1046px, calc(100vw - 24px)) !important; }
  html body.ui-skin-blabax #people-panel#people-panel.people:not(.collapsed){ width:240px !important; min-width:240px !important; }
  html body.ui-skin-blabax #people-panel#people-panel .person .p-name{ font-size:13px !important; }
  html body.ui-skin-blabax #people-panel#people-panel .section-label{ font-size:10.5px !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people:not(.hhb-pw-set):not(.collapsed){
    width:236px !important; min-width:236px !important; max-width:236px !important; flex:0 0 236px !important; }
}