/* HiHelloBye chat-room styles — extracted for cache + parallel load */
:root{
    --purple:#8b5cf6; --pink:#ec4899; --blue:#60a5fa;
    --rail-bg:#f7f6fb; --rail-border:#d3cceb; --rail-ic:#7c7691; --rail-ic-hover-bg:rgba(139,92,246,0.1); --rail-ic-hover:#5b4fd1; --rail-ic-active-bg:rgba(139,92,246,0.16); --rail-ic-active:#6d3fc9;
    --panel-bg:#ffffff; --panel-border:#d3cceb;
    --text-dark:#232037; --text-mute:#8b869e;
    --topic-bg:#f8ecd0; --topic-text:#1c1c1c; --input-bg:#f4f2fa;
    --page-backdrop:#eef0f6;
    --line-w:2px; --line-sty:solid;
    --avatar-shape:50%; --avatar-border-width:0px; --avatar-border-style:solid; --avatar-border-color:transparent;
    --corner-radius:12px;
    --icon-bg-color:transparent;
    --icon-border-color:var(--panel-border);
    --room-direction:row;
    /* Fallback appended after whatever font a user/room has chosen — none of the Latin
       or decorative fonts above cover Arabic-script glyphs, so Urdu/Arabic text would
       otherwise render as tofu boxes. Browsers automatically use this fallback only for
       the characters the primary font can't render, so English/Urdu mixed in one message
       still looks right either way. */
    --font-rtl-fallback:'Noto Nastaliq Urdu','Noto Sans Arabic';
  }
  /* Auto-direction (like <bdi>/dir="auto" but as a single reusable rule): each element
     picks its internal character shaping/ordering per its own first strong character,
     via the Unicode Bidi Algorithm — so Urdu/Arabic renders correctly right-to-left
     and an English message renders left-to-right, both in the same chat log without
     either breaking. Explicitly pinned to text-align:left on top of that (unicode-bidi
     alone also shifts the block's own alignment to match its detected direction) so an
     Urdu/Arabic message's block stays put beside its nickname, same position as every
     other message, rather than the whole line jumping to the right side of the log. */
  .txt, .who, #topic-text, .p-status, .p-name, .reaction-pill{
    unicode-bidi: plaintext;
    text-align: left;
  }
  /* Input/typing fields keep natural RTL-while-typing (no text-align override) — that's
     standard, expected behavior for typing Urdu/Arabic, not part of the above. */
  #msg-input, input[type="text"], textarea{
    unicode-bidi: plaintext;
  }
  body.dark-mode{
    --rail-bg:#1c1533; --rail-border:#453a72; --rail-ic:#b9b2d1; --rail-ic-hover-bg:rgba(255,255,255,0.06); --rail-ic-hover:#fff; --rail-ic-active-bg:rgba(139,92,246,0.25); --rail-ic-active:#fff;
    --panel-bg:#1c1533; --panel-border:#453a72;
    --text-dark:#f0edf9; --text-mute:#9a92b8;
    --topic-bg:#2a2145; --topic-text:#e8c988; --input-bg:#241d3f;
    --page-backdrop:#0d0916;
  }
  body.dark-mode{ background:var(--page-backdrop); }
  body.dark-mode .people, body.dark-mode .room, body.dark-mode .chat-main{ background:var(--panel-bg); }
  body.dark-mode .log{ background:#150e28; }
  body.dark-mode .search input{ background:#241d3f; color:#f0edf9; border-color:#2e2650; }
  body.dark-mode .person:hover{ background:#241d3f; }
  body.dark-mode .composer input{ color:#f0edf9; }
  body.dark-mode .nick-popup{ background:#1c1533; color:#f0edf9; border-color:#2e2650; }
  body.dark-mode .nick-popup .np-btn{ background:#241d3f; color:#f0edf9; border-color:#2e2650; }
  body.dark-mode #dark-toggle{ color:#ffd166; }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  body{
    font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', var(--font-rtl-fallback), sans-serif;
    display:flex; align-items:center; justify-content:center;
    /* --vh is set by JS below to the *real* visible viewport height. Plain 100vh on
       mobile browsers includes the space behind the collapsing address/tab bar, which
       pushed the composer down off the actual visible screen, hidden underneath the
       fixed mobile bottom nav. calc(var(--vh)*100) fixes it on every mobile browser;
       100dvh (where supported) is used as the modern, JS-free equivalent. */
    height:calc(var(--vh, 1vh) * 100);
    overflow:hidden; background:var(--page-backdrop); color:var(--text-dark); padding:0;
  }
  @supports (height: 100dvh){
    body{ height:100dvh; }
  }
  .app-shell{
    display:flex; flex-direction:var(--room-direction, row); width:100%; height:100%; max-width:none;
    border-radius:0; overflow:hidden; background:var(--panel-bg);
    box-shadow:none;
  }
  .rail{
    width:70px; background:var(--rail-bg); border-right:var(--line-w) var(--line-sty) var(--rail-border);
    display:flex; flex-direction:column; align-items:center;
    padding:22px 0; gap:8px; flex-shrink:0;
  }
  .rail .brand{
    width:43px; height:43px; border-radius:50%; margin-bottom:16px;
    background:linear-gradient(135deg, var(--purple), var(--pink));
    display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:19px; line-height:1;
    cursor:pointer;
  }
  .rail .ic{
    width:50px; height:50px; border-radius:var(--icon-radius, 14px); display:flex; align-items:center; justify-content:center;
    font-size:21px; line-height:1; color:var(--rail-ic); cursor:pointer; text-decoration:none; overflow:hidden;
    border:var(--icon-border-w, 1px) var(--icon-border-style, solid) var(--icon-border-color, var(--panel-border)); background:var(--icon-bg-color, transparent); box-shadow:var(--icon-shadow, none);
  }
  .rail .ic svg{display:block;}
  .rail .ic.active{background:var(--rail-ic-active-bg); color:var(--rail-ic-active);}
  .rail .ic:hover{background:var(--rail-ic-hover-bg); color:var(--rail-ic-hover);}
  #logout-icon:hover, #logout-icon:active{background:#fde8e8 !important; color:#c0392b !important;}
  .rail .spacer{flex:1;}

  .people{width:335px; min-width:230px; max-width:480px; background:var(--panel-bg); display:flex; flex-direction:column; flex-shrink:0;}
  .col-resizer{width:6px; flex-shrink:0; cursor:col-resize; background:var(--panel-border); position:relative;}
  .col-resizer::after{content:''; position:absolute; top:0; bottom:0; left:-3px; right:-3px;}
  .col-resizer:hover, .col-resizer.dragging{background:var(--purple);}
  .col-resizer.hidden{display:none;}
  .people-mobile-resizer{display:none;} /* desktop: edge resize uses .col-resizer */
  .people-head{padding:16px 16px 10px; font-size:11px; font-weight:800; letter-spacing:0.1em; color:var(--text-mute);}
  .search{margin:0 16px 12px;}
  .search input{width:100%; padding:9px 12px; border-radius:var(--corner-radius, 8px); border:1px solid var(--panel-border); background:#f7f6fb; font-size:13.5px;}
  .people-list{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:12px;}
  .section-label{padding:14px 16px 6px; font-size:10.5px; font-weight:800; letter-spacing:0.1em; color:var(--text-mute); display:flex; align-items:center; gap:6px;}
  .section-label .sd{width:6px; height:6px; border-radius:50%; background:#34d399;}
  .section-label.people-sec-toggle:hover{ opacity:0.92; }
  .people-sec-body{ min-height:0; }
  .person{display:flex; align-items:flex-start; gap:14px; padding:8px 16px; min-width:0;}
  .person:hover{background:#f7f6fb;}
  /* Avatar box is fixed; border is drawn with box-shadow so it never eats layout width
     or overlaps the nick column (box-sizing border alone still left dashed rings looking
     "merged" into names when border-width was large). */
  .av{
    width:38px; height:38px; border-radius:var(--avatar-shape, 50%); flex-shrink:0;
    position:relative; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:16px; color:#fff; overflow:hidden;
    border:none;
    /* outline respects dashed/solid from Theme Settings without changing box size */
    outline: var(--avatar-border-width, 0px) var(--avatar-border-style, solid) var(--avatar-border-color, transparent);
    outline-offset: 0px;
    box-sizing:border-box;
  }
  .av-wrap{
    position:relative; display:inline-flex; flex-shrink:0; align-items:center; justify-content:center;
    width:38px; height:38px; overflow:visible;
  }
  .av-wrap .av{ width:100%; height:100%; }
  .av-wrap img, .av img{ max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain; display:block; }
  .av-wrap .os{position:absolute; bottom:-1px; right:-1px; width:10px; height:10px; border-radius:50%; border:1.5px solid #fff; box-shadow:none; z-index:2;}
  /* Status dot stays bottom-right of avatar (same as LTR) */
  body.mirrored-layout .av-wrap .os{right:-1px; left:auto;}
  /* Mirror people list: avatar BEFORE nick (left→right), then badges/level/mod on outer right.
     Do not reverse the row — previous row-reverse put nick before avatar. */
  body.mirrored-layout .person{flex-direction:row;}
  body.mirrored-layout .person .av-wrap{order:0;}
  body.mirrored-layout .person .p-info{order:1; text-align:left;}
  body.mirrored-layout .person .badge-icon{order:2;}
  body.mirrored-layout .person .level-icon{order:3;}
  body.mirrored-layout .person .mod-dots{order:4;}
  body.mirrored-layout .person .p-name{text-align:left;}
  /* Nick arrow before the nick in MAIN CHAT messages (all layouts — mirror or not).
     Glyph/direction come from site setting (server). Click opens user quick-menu. */
  /* Nick arrow before username — must use a symbol-capable font stack; many
     body fonts omit geometric arrows and the glyph renders as blank. */
  .nick-mirror-arrow{
    display:inline-block;
    color:var(--text-dark, #232037);
    font-size:12px;
    line-height:1;
    margin-right:5px;
    font-weight:700;
    opacity:1;
    vertical-align:baseline;
    cursor:pointer;
    user-select:none;
    min-width:0.9em;
    text-align:center;
    font-family: "Segoe UI Symbol", "Segoe UI", "Apple Symbols", "Noto Sans Symbols 2", "Noto Sans Symbols", "DejaVu Sans", "Arial Unicode MS", sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .nick-mirror-arrow:hover{color:var(--purple, #8b5cf6); opacity:1;}
  /* Small sender avatar used by all mobile chat skins. */
  .wa-msg-avatar{
    display:none; flex:0 0 26px; width:26px; height:26px; min-width:26px;
    border-radius:50%; align-items:center; justify-content:center;
    color:#fff; font-weight:800; font-size:11px; line-height:1;
    overflow:hidden; background-size:cover; background-position:center;
    border:1px solid rgba(0,0,0,0.08); cursor:pointer; user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  /* Server-controlled sender display — shared by mobile + desktop + every skin.
     Display modes: avatar-arrow, arrow-only, avatar-only.
     When both are displayed, menuTarget decides whether the menu opens from
     the arrow, the avatar, or both. */
  body.hhb-sender-display-avatar-arrow .nick-mirror-arrow{ display:inline-flex !important; }
  body.hhb-sender-display-avatar-arrow .wa-msg-avatar{ display:flex !important; }
  body.hhb-sender-display-arrow-only .nick-mirror-arrow{ display:inline-flex !important; }
  body.hhb-sender-display-arrow-only .wa-msg-avatar{ display:none !important; }
  body.hhb-sender-display-avatar-only .nick-mirror-arrow{ display:none !important; }
  body.hhb-sender-display-avatar-only .wa-msg-avatar{ display:flex !important; }
  body.hhb-sender-menu-target-arrow .wa-msg-avatar,
  body.hhb-sender-menu-target-avatar .nick-mirror-arrow{ cursor:default !important; pointer-events:none; }
  body.hhb-sender-menu-target-both .nick-mirror-arrow,
  body.hhb-sender-menu-target-both .wa-msg-avatar,
  body.hhb-sender-menu-target-arrow .nick-mirror-arrow,
  body.hhb-sender-menu-target-avatar .wa-msg-avatar{ cursor:pointer; }
  /* WhatsApp uses the same sender-control mode as every other skin — but
     WhatsApp skin has its own older, hardcoded rules elsewhere (always show
     the avatar, always hide the arrow) that are MORE specific than the base
     body.hhb-sender-display-* rules above, so on WhatsApp skin specifically
     those old rules always won and the dropdown had no visible effect.
     These compound selectors add enough specificity to make WhatsApp obey
     the selected mode too, in both directions (arrow and avatar). */
  body.ui-skin-whatsapp.hhb-sender-display-avatar-arrow .line .who .nick-mirror-arrow{
    display:inline-flex !important;
  }
  body.ui-skin-whatsapp.hhb-sender-display-avatar-arrow .line .wa-msg-avatar{
    display:flex !important;
  }
  body.ui-skin-whatsapp.hhb-sender-display-arrow-only .line .who .nick-mirror-arrow{
    display:inline-flex !important;
  }
  body.ui-skin-whatsapp.hhb-sender-display-arrow-only .line .wa-msg-avatar{
    display:none !important;
  }
  body.ui-skin-whatsapp.hhb-sender-display-avatar-only .line .who .nick-mirror-arrow{
    display:none !important;
  }
  body.ui-skin-whatsapp.hhb-sender-display-avatar-only .line .wa-msg-avatar{
    display:flex !important;
  }
  body.dark-mode .nick-mirror-arrow{ color: var(--text-dark, #f0edf9); }
  /* PM: decorative nick-arrow glyph before each bubble (no click menu) */
  .pm-msg-arrow{
    display:inline-flex; align-items:center; justify-content:center;
    flex-shrink:0; align-self:center;
    color:var(--text-dark, #232037);
    font-size:11px; line-height:1; font-weight:700;
    cursor:default; user-select:none; opacity:0.85; pointer-events:none;
    min-width:0.9em; padding:2px 1px;
    font-family: "Segoe UI Symbol", "Segoe UI", "Apple Symbols", "Noto Sans Symbols 2", "Noto Sans Symbols", "DejaVu Sans", "Arial Unicode MS", sans-serif;
  }
  body.dark-mode .pm-msg-arrow{ color: var(--text-dark, #f0edf9); }
  /* Your PM bubbles are right-aligned (row-reverse) — flip the arrow so it points
     the other way from the other person's messages. */
  .pm-msg-arrow.pm-arrow-mine{ transform: scaleX(-1); }
  /* Composer typing bar removed — who is typing shows as a small pencil on their avatar */
  .typing-bar{ display:none; }
  .typing-bar-entry{display:inline-flex; align-items:center; gap:5px; color:#6d3fc9; font-size:11.5px; line-height:1;}
  .typing-bar-entry .typing-bar-pencil{font-size:11px; line-height:1;}
  .typing-bar-entry .typing-bar-nick{font-weight:700; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .typing-bar-entry .typing-bar-dots{display:inline-flex; gap:1px; align-items:flex-end; height:12px;}
  .typing-bar-entry .typing-bar-dot{width:3px; height:3px; border-radius:50%; background:currentColor; animation:hhbTypingDot 1.2s infinite ease-in-out;}
  .typing-bar-entry .typing-bar-dot:nth-child(2){animation-delay:.18s;}
  .typing-bar-entry .typing-bar-dot:nth-child(3){animation-delay:.36s;}
  @keyframes hhbTypingDot{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-3px);opacity:1}}
  body.dark-mode .typing-bar-entry{color:#c9b8f5;}
  body.dark-mode .typing-bar-entry{color:#c9b8f5;}
  .typing-indicator{
    display:inline-flex; align-items:center; justify-content:center;
    gap:0; vertical-align:middle; line-height:1;
  }
  /* Top-left corner of avatar box (status stays bottom-right; DND stays top-right) */
  .av-wrap .typing-indicator{
    position:absolute; top:-3px; left:-3px; z-index:3;
    width:14px; height:14px; min-width:14px; padding:0;
    border-radius:50%;
    background:linear-gradient(145deg, #8b5cf6, #6d3fc9);
    border:1.5px solid #fff;
    box-shadow:0 1px 4px rgba(109,63,201,0.4);
    pointer-events:none;
  }
  body.mirrored-layout .av-wrap .typing-indicator{ left:-3px; right:auto; }
  .typing-indicator .typing-pencil{font-size:8px; line-height:1; display:block;}
  .typing-indicator .typing-dots{display:none;}
  body.dark-mode .av-wrap .typing-indicator,
  body.ui-skin-discord .av-wrap .typing-indicator,
  body.ui-skin-neon .av-wrap .typing-indicator{ border-color:#1e1b2e; }
  /* PM modal header: tiny inline pencil next to status text */
  #pm-modal-overlay .typing-indicator{
    margin-left:4px; width:auto; height:auto; background:transparent; border:none; box-shadow:none;
    position:static;
  }
  #pm-modal-overlay .typing-indicator .typing-pencil{font-size:10px;}
  /* Send button ALWAYS on the right, normal orientation — typing is LTR in every
     layout (desktop/mobile, portrait/landscape, mirror on/off). Never flip or reorder. */
  .composer,
  body.mirrored-layout .composer,
  #pm-modal-overlay .composer,
  body.mirrored-layout #pm-modal-overlay .composer{
    flex-direction:row !important;
    direction:ltr;
  }
  .composer .send-btn,
  body.mirrored-layout .composer .send-btn,
  #pm-modal-overlay .send-btn,
  body.mirrored-layout #pm-modal-overlay .send-btn{
    order:2 !important;
    transform:none !important;
  }
  .composer #msg-input,
  .composer input,
  body.mirrored-layout .composer #msg-input,
  body.mirrored-layout .composer input{
    order:0 !important;
  }
  .composer .frozen-tag,
  body.mirrored-layout .composer .frozen-tag{ order:1 !important; }
  body.mirrored-layout #pm-modal-overlay .above-composer > div[style*="display:flex"]{flex-direction:row;}

  /* PM-only: tools row + full-width typing bar (must NOT target main .composer) */
  #pm-modal-overlay .pm-tools-row .comp-ic,
  #pm-modal-overlay .pm-tools-row .emoji-btn{
    width:32px; height:32px; flex-shrink:0;
  }
  #pm-modal-overlay .pm-composer-wrap{
    width:100%; box-sizing:border-box;
  }
  #pm-modal-overlay .pm-composer-bar{
    display:flex !important;
    align-items:center;
    gap:8px;
    width:100%;
    box-sizing:border-box;
    padding:0 14px 14px;
  }
  #pm-modal-overlay .pm-composer-bar input#pm-modal-input{
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    height:40px;
    padding:10px 14px;
    border-radius:10px;
    border:1px solid #e7e3f3;
    background:#f4f2fa;
    font-size:14.5px;
    font-family:inherit;
    box-sizing:border-box;
  }
  #pm-modal-overlay .pm-composer-bar input#pm-modal-input:focus{
    outline:none; border-color:#8b5cf6;
  }
  body.dark-mode #pm-modal-overlay .pm-composer-bar input#pm-modal-input{
    background:#241d3f; border-color:#3a2f5c; color:#f0edf9;
  }
  #pm-modal-overlay .pm-composer-bar .send-btn{
    width:40px; height:40px; flex-shrink:0;
    border-radius:10px; border:none;
    background:linear-gradient(135deg,#8b5cf6,#60a5fa);
    color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:15px; line-height:1;
  }
  .av .os.speaking{background:#16a34a !important; box-shadow:0 0 0 3px rgba(22,163,74,0.35); width:11px; height:11px;}
  .av .os.muted-mic{background:#e14545 !important;}
  .av-wrap .os.on{background:#34d399;}
  .av-wrap .os.off{background:#c9c4d8;}
  .av-wrap .os.busy{background:#f97316;}
  .av-wrap .os.manual-away{background:#e14545;}
  /* Do Not Disturb badge — top-right corner of avatar (online status stays bottom-right) */
  .av-wrap .dnd-badge{
    position:absolute; top:-4px; right:-4px; z-index:3;
    min-width:18px; height:18px; padding:0 3px; border-radius:999px;
    background:linear-gradient(145deg, #6d28d9, #4c1d95);
    color:#fff; font-size:10px; line-height:18px; font-weight:800;
    border:2px solid #fff; box-shadow:0 1px 5px rgba(76,29,149,0.45);
    display:flex; align-items:center; justify-content:center;
    pointer-events:none; letter-spacing:-0.02em;
  }
  body.mirrored-layout .av-wrap .dnd-badge{ right:auto; left:-4px; }
  .p-info{flex:1 1 auto; min-width:0; overflow:hidden; padding-top:2px;}
  .p-name{font-size:13.5px; font-weight:700; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .p-status{font-size:11px; color:var(--text-mute); margin-top:2px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .badge-lv{font-size:9.5px; font-weight:800; padding:2px 6px; border-radius:5px; color:#fff; flex-shrink:0;}
  .tag-badge{font-size:9px; font-weight:800; padding:1px 6px; border-radius:5px; margin-left:4px; white-space:nowrap;}
  .av-emoji{font-size:16px; background:none !important;}
  .line.whisper{background:#fdf3ff; border-radius:8px; padding:5px 10px; border-left:3px solid #c86dd7; line-height:1.3;}
  .line.whisper .whisper-tag{font-size:10.5px; color:#6d3fc9; font-weight:700; margin-right:4px;}
  .line.whisper .who{color:#6d3fc9 !important;}
  .line.whisper .txt{color:#6d3fc9 !important;}
  .cmd-notice{padding:5px 20px; font-size:12px; color:#6d3fc9; background:#f4effe; font-style:italic; line-height:1.3;}

  .nick-popup{
    position:fixed; z-index:200; background:#fff; border:1px solid #e7e3f3; border-radius:14px;
    box-shadow:0 20px 50px rgba(0,0,0,0.18); width:230px; padding:16px;
  }
  .nick-popup .np-head{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
  .nick-popup .np-avatar{width:42px; height:42px; border-radius:var(--avatar-shape, 50%); border:var(--avatar-border-width, 0px) var(--avatar-border-style, solid) var(--avatar-border-color, transparent); box-sizing:border-box; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:17px; overflow:hidden;}
  .nick-popup .np-name{font-weight:800; font-size:14.5px;}
  .nick-popup .np-badges{margin-top:2px;}
  .np-row{display:flex; gap:8px; margin-bottom:8px;}
  .np-icon-row{display:flex; gap:6px; justify-content:space-between;}
  .np-icon-btn{
    flex:1; display:flex; align-items:center; justify-content:center; height:34px;
    border-radius:9px; border:1px solid #e7e3f3; background:#f7f6fb; font-size:15px; cursor:pointer;
  }
  .np-icon-btn:hover{background:#efe9fe;}
  .np-icon-btn.active{background:#efe9fe; border-color:#c9b8f5;}
  .np-btn{flex:1; padding:8px 0; border-radius:9px; border:1px solid #e7e3f3; background:#f7f6fb; font-size:12.5px; font-weight:700; cursor:pointer; text-align:center; color:#232037;}
  .np-btn.active{background:#efe9fe; color:#6d3fc9; border-color:#c9b8f5;}
  .nick-popup .np-stats{display:flex; justify-content:space-between; font-size:12px; color:#8b869e; margin-top:10px; padding-top:10px; border-top:1px solid #f0edf7;}

  .line{position:relative; cursor:pointer;}
  /* Reply/React/Edit/Delete/Flag/Whisper toolbar floats in a small card just above the
     message (bottom:100% of .line, which is position:relative) instead of sitting
     inline at the end of the row. It used to only be inline, which on any narrow
     window — mobile OR a resized desktop browser — could wrap onto its own line and
     visibly push every message below it down the page ("line shifting"). Floating it
     means revealing it never changes that row's own height, on every screen size. */
  /* margin:0 (not a small gap) is deliberate: with a gap, that sliver of screen space
     belongs to no hoverable part of THIS line, so moving the mouse from the message up
     to the toolbar crosses a dead zone, drops :hover on this .line, and the toolbar
     vanishes mid-move — landing the cursor on the message above instead of on
     React/Edit/Delete. Flush contact means the hoverable area is continuous from the
     message straight into the toolbar, so it never disappears while you're moving
     toward it. */
  .line .msg-actions{
    display:none; gap:4px;
    position:absolute; bottom:100%; right:4px; left:auto; margin:0;
    background:#fff; border:1px solid #e7e3f3; border-radius:10px;
    box-shadow:0 8px 22px rgba(0,0,0,0.16); padding:3px 4px; z-index:30;
    flex-wrap:nowrap; max-width:calc(100vw - 24px); overflow-x:auto;
  }
  body.dark-mode .line .msg-actions{ background:#1c1533; border-color:#332a55; }
  /* Padding/margin only on true hover devices — on touch phones :hover can stick after
     tap and make a just-sent line "expand" by ~16px for a flash. Selected still highlights. */
  .line.selected{background:#f4f2fa; border-radius:8px;}
  @media (hover: hover) and (pointer: fine){
    .line:hover, .line.selected{background:#f4f2fa; border-radius:8px; padding-left:8px; padding-right:8px; margin-left:-8px; margin-right:-8px;}
  }
  .line:hover .msg-actions, .line.selected .msg-actions{display:inline-flex;}
  .line .msg-actions span{font-size:14px; padding:2px 5px; border-radius:6px; color:#8b869e; line-height:1; cursor:pointer; flex-shrink:0;}
  .line .msg-actions span:hover{background:#f0edf7; color:#5b4fd1;}
  .line .msg-actions span.reacted{background:#ece7fb; color:#5b4fd1;}
  .line .msg-actions .msg-pin-btn{ font-size:15px; }
  /* Keep toolbar visible while pointer is on the floating actions themselves */
  .line .msg-actions:hover{ display:inline-flex; }
  .reply-chip{display:flex; align-items:flex-start; gap:5px; background:#fff; border:1px solid #e9d5f5; border-radius:10px; padding:4px 12px; font-size:10.5px; color:#9691a8; margin-bottom:4px; max-width:100%; white-space:normal; word-break:break-word; line-height:1.4; --emoji-size:15px;}
  .reply-chip .rc-name{font-weight:800; flex-shrink:0;}
  body.dark-mode .reply-chip{background:#241d3f; border-color:#3a2f5c; color:#a9a3bc;}
  .love-pill{display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:999px; background:#fdeaf1; color:#c2255c; font-size:11px; font-weight:700; line-height:1.3; animation:alertPop .35s ease-out;}
  .reward-card{display:inline-flex; flex-direction:column; gap:3px; min-width:180px; max-width:min(420px,92%); padding:8px 12px; border-radius:14px; border:1px solid #b7ebc9; background:linear-gradient(180deg,#f4fbf6,#e7f7ec); box-shadow:0 1px 0 rgba(22,163,74,.08); animation:alertPop .35s ease-out;}
  .reward-card.down{border-color:#f3c1c1; background:linear-gradient(180deg,#fff6f6,#fdecec);}
  .reward-top{font-size:12.5px; font-weight:700; line-height:1.35; color:#166534;}
  .reward-card.down .reward-top{color:#b42318;}
  .reward-top b{font-weight:800;}
  .reward-pts{display:inline-block; margin:0 4px; padding:1px 7px; border-radius:999px; background:rgba(22,163,74,.12); font-size:11px;}
  .reward-card.down .reward-pts{background:rgba(180,35,24,.1);}
  .reward-by{font-weight:600; opacity:.8;}
  .reward-reason{font-size:11px; line-height:1.35; color:#3f6212; opacity:.95;}
  .reward-card.down .reward-reason{color:#7f1d1d;}
  body.dark-mode .love-pill{background:#3a1a2a; color:#f472b6;}
  body.dark-mode .reward-card{border-color:#24613a; background:linear-gradient(180deg,#14301f,#102616); box-shadow:none;}
  body.dark-mode .reward-card.down{border-color:#7f2a2a; background:linear-gradient(180deg,#3a1616,#2a1010);}
  body.dark-mode .reward-top{color:#86efac;}
  body.dark-mode .reward-card.down .reward-top{color:#fca5a5;}
  body.dark-mode .reward-reason{color:#bbf7d0;}
  body.dark-mode .reward-card.down .reward-reason{color:#fecaca;}
  .notice-banner-card{position:relative; background:#fff; border:2px solid var(--nb-color, #1fae5f); border-radius:10px; padding:16px 40px 14px 16px; max-width:min(520px, 90%); animation:alertPop .35s ease-out;}
  body.dark-mode .notice-banner-card{background:#1c1533;}
  .notice-banner-tab{position:absolute; top:-2px; left:-2px; background:var(--nb-color, #1fae5f); color:#fff; font-weight:800; font-size:11.5px; padding:6px 14px; border-radius:9px 0 9px 0;}
  .notice-banner-icon{position:absolute; top:10px; right:32px; font-size:19px;}
  .notice-banner-close{position:absolute; top:10px; right:10px; cursor:pointer; font-size:14px; font-weight:800; color:#8b869e;}
  .notice-banner-text{margin-top:20px; color:var(--nb-color, #1fae5f); font-weight:700; font-size:13.5px; line-height:1.5;}
  /* Reactions sit immediately after the last character of the message (not at the far end of the row). */
  .reaction-pills{display:inline-flex; align-items:center; flex-wrap:wrap; gap:3px; margin-left:4px; vertical-align:middle; flex:0 0 auto; max-width:100%;}
  .pm-reaction-pills{display:inline-flex; align-items:center; flex-wrap:wrap; gap:3px; margin-left:4px; margin-top:0; vertical-align:middle; flex:0 0 auto;}
  /* Bubble only as wide as content so pills sit where the text ends */
  #pm-modal-log .pm-bubble{
    display:inline-flex; flex-wrap:wrap; align-items:flex-end; gap:2px 4px;
    width:fit-content; max-width:100%; box-sizing:border-box;
  }
  #pm-modal-log .pm-bubble .pm-body{flex:0 1 auto; min-width:0; max-width:100%; word-break:break-word; overflow-wrap:break-word;}
  #pm-modal-log .pm-bubble .msg-actions{margin-left:4px; flex:0 0 auto;}
  .reaction-pill{font-size:11px; background:#f4f2fa; border-radius:999px; padding:1px 7px; flex-shrink:0; cursor:pointer; user-select:none;}
  body.dark-mode .reaction-pill{background:#2a2148; color:#e9e4f5;}
  .deleted-msg{color:#c3bfd1; font-style:italic;}
  .edited-tag{font-size:10px; color:#c3bfd1; margin-left:4px;}

  .cmd-autocomplete{background:#fff; border:1px solid #e7e3f3; border-radius:var(--corner-radius, 10px); box-shadow:0 -6px 20px rgba(0,0,0,0.08); max-height:220px; overflow-y:auto; margin-bottom:6px;}
  body.dark-mode .cmd-autocomplete{background:#1c1533; border-color:#332a55;}
  .cmd-autocomplete .cmd-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 12px; cursor:pointer; font-size:12.5px;}
  .cmd-autocomplete .cmd-row:hover, .cmd-autocomplete .cmd-row.active{background:#f4f2fa;}
  body.dark-mode .cmd-autocomplete .cmd-row:hover, body.dark-mode .cmd-autocomplete .cmd-row.active{background:#2a2148;}
  .cmd-autocomplete .cmd-name{color:#8b5cf6; font-weight:700; white-space:nowrap;}
  .cmd-autocomplete .cmd-desc{color:#8b869e; font-size:11.5px; text-align:right;}
  .cmd-autocomplete .cmd-hint{padding:6px 12px; font-size:10.5px; color:#8b869e; text-transform:uppercase; letter-spacing:0.05em;}

  .mod-user-row{display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid #f4f2fa;}
  .mod-user-row .name{flex:1; font-size:13px; font-weight:700;}
  .mod-user-row button{font-size:10.5px; padding:4px 8px; border-radius:6px; border:none; background:#f4f2fa; color:#5b4fd1; cursor:pointer; margin-left:4px;}
  .mod-user-row button.danger{background:#fdeaea; color:#c0392b;}
  .mod-user-row button.loc-toggle-btn{width:22px; padding:4px 0; text-align:center; font-weight:800;}
  .mod-user-row .status-pill{
    font-size:13px; line-height:1; padding:3px 6px; border-radius:999px;
    font-weight:800; white-space:nowrap; flex-shrink:0;
    min-width:22px; text-align:center; box-sizing:border-box;
  }
  .mod-user-row .status-pill.danger{background:#fdeaea; color:#e14545;}
  .mod-user-row .status-pill.ok{background:#e9fbf1; color:#16a34a;}
  @media (max-width:768px){
    .mod-user-row .status-pill{ font-size:14px; padding:4px 7px; min-width:24px; }
  }
  .lv-guest{background:#c4bfd6;} .lv-reg{background:#7cc576;} .lv-vip{background:#e0457a;} .lv-blue{background:#4a90d9;}

  .room{flex:1; display:flex; flex-direction:column; min-width:0; position:relative; border-left:var(--line-w) var(--line-sty) var(--panel-border);}
  body.mirrored-layout .room{border-left:none; border-right:var(--line-w) var(--line-sty) var(--panel-border);}
  /* Mirror: thin vertical strip on the left edge — marks where nick & chat content starts */
  body.mirrored-layout .room::before{
    content:'';
    position:absolute;
    top:0; bottom:0; left:0;
    width:6px;
    background:linear-gradient(180deg, #e8e4f8 0%, #d9d2f0 45%, #e8e4f8 100%);
    border-radius:0 4px 4px 0;
    pointer-events:none;
    z-index:30;
    box-shadow:1px 0 0 rgba(139,92,246,0.08);
  }
  body.dark-mode.mirrored-layout .room::before{
    background:linear-gradient(180deg, #2a2148 0%, #3a2f5c 45%, #2a2148 100%);
    box-shadow:1px 0 0 rgba(168,130,255,0.12);
  }
  body.mirrored-layout .rail{border-right:none; border-left:var(--line-w) var(--line-sty) var(--rail-border);}
  /* pinned-bar: unpin ✕ stacked above 📌 so brush/clear tools cannot cover it */
  #pinned-bar{ position:relative; z-index:30; }
  #pinned-bar .pin-icon-col{ z-index:31; }
  #pinned-bar .pin-unpin-btn{ -webkit-tap-highlight-color:transparent; }
  @media (max-width:768px){
    #pinned-bar{ padding:10px 12px !important; max-height:160px !important; }
    #pinned-bar .pin-unpin-btn{ min-width:32px !important; min-height:32px !important; font-size:15px !important; }
  }

  .topic-bar{background:var(--topic-bg); color:var(--topic-text); padding:6px 14px; font-size:13px; font-weight:400; font-style:normal; border-bottom:var(--line-w) var(--line-sty) #dfc79a; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:4px 8px;}
  body.dark-mode .topic-bar{border-bottom-color:#453a72;}
  .topic-bar-text{flex:1; min-width:180px; cursor:pointer; line-height:1.4; font-style:normal;}
  .topic-setby{font-weight:500; font-size:11.5px; opacity:0.75; margin-left:4px;}
  .topic-bar-actions{display:flex; align-items:center; gap:6px; flex-shrink:0; margin-left:auto; align-self:center;}
  #topic-label{transition:opacity .15s;}
  #topic-label:hover{opacity:0.7;}
  .topic-bar.collapsed{padding-top:4px; padding-bottom:4px;}
  .topic-bar.collapsed .topic-bar-text, .topic-bar.collapsed .topic-bar-actions{display:none;}
  .topic-action-btn{
    display:flex; align-items:center; justify-content:center; gap:3px;
    min-width:26px; height:24px; padding:0 6px; border-radius:7px; cursor:pointer;
    background:rgba(0,0,0,0.06); font-size:12px; font-weight:700;
  }
  .topic-action-btn:hover{background:rgba(0,0,0,0.1);}
  .topic-action-btn .cnt{font-size:10.5px; font-weight:800;}
  body.dark-mode .topic-action-btn{background:rgba(255,255,255,0.1);}
  body.dark-mode .topic-action-btn:hover{background:rgba(255,255,255,0.16);}
  .log{flex:1; overflow-y:auto; padding:20px 24px 8px; display:flex; flex-direction:column; gap:0; position:relative; z-index:1;}
  .join-note.story-notice-line{color:var(--text-mute);}
  .join-note.story-notice-line .story-notice-ico{flex:0 0 auto;font-size:13px;line-height:1;}
  .join-note.story-notice-line .story-notice-play{border:0;background:transparent;cursor:pointer;padding:0 2px;font-size:15px;line-height:1;color:#a78bfa;}
  .join-note.story-notice-line .story-notice-play:hover{color:#7c3aed;}
  body.dark-mode .join-note.story-notice-line .story-notice-play{color:#c4b5fd;}
  .join-note{font-size:12.5px; color:var(--text-mute); margin:4px 0; display:flex; align-items:center; gap:6px; line-height:1.3;}
  .join-note.mod-action-note{font-size:11px; color:#9a94ab; font-style:italic; margin:2px 0;}
  body.dark-mode .join-note.mod-action-note{color:#7c7495;}
  /* Whisper alerts intentionally use ONE uniform alert style for the complete line.
     Nick, "whispered to", message text, and points text must all look exactly like
     the existing system/alert message — no avatar, no nick-design color override,
     and no chat-message font override. */
  /* Compact whisper alert styling — matches the reference screenshot. */
  .whisper-alert-line{
    gap:4px; flex-wrap:wrap; line-height:1.35; font-size:12px;
    color:#7e7fc8 !important; font-style:italic !important;
    font-family:inherit !important; font-weight:400 !important;
    min-height:18px; padding:2px 8px; box-sizing:border-box;
  }
  /* Whisper content: same size/style family as alert; purple + lavender highlight */
  .whisper-message-line{
    background:#f3e5f5 !important; color:#6d3fc9 !important; border-radius:4px;
    margin:1px 0 0 !important; padding:2px 8px !important;
    font-style:normal !important; font-size:12px !important;
  }
  /* Keep whisper bubble + points line tightly stacked (no extra join-note gap) */
  .join-note.whisper-message-line + .join-note.whisper-points-line{
    margin-top:0 !important;
  }
  .whisper-message-line .whisper-alert-copy,
  .whisper-message-line .whisper-alert-message,
  .whisper-message-line .whisper-ear,
  .whisper-message-line .ts{
    color:#6d3fc9 !important; font-size:12px !important; font-style:normal !important;
    font-family:inherit !important; font-weight:400 !important;
  }
  .whisper-message-line .whisper-alert-nick{
    color:#6d3fc9 !important; font-weight:700 !important; font-style:normal !important;
    font-size:12px !important; font-family:inherit !important;
  }
  .whisper-points-line{
    background:transparent !important; color:#7e7fc8 !important;
    margin:0 0 2px !important; padding:0 8px 1px !important;
    font-style:italic !important; font-size:9px !important;
  }
  .whisper-points-line .whisper-alert-copy,
  .whisper-points-line .whisper-info-ico,
  .whisper-points-line .ts{
    color:#7e7fc8 !important; font-size:9px !important; font-style:italic !important;
    font-weight:400 !important; font-family:inherit !important;
  }
  .whisper-info-ico{flex:0 0 auto; opacity:0.9; margin-right:2px;}
  .whisper-alert-line *{
    color:inherit !important;
    font-family:inherit !important;
    font-weight:inherit !important;
    font-style:inherit !important;
  }
  .whisper-alert-line .whisper-alert-copy,
  .whisper-alert-line .whisper-alert-nick,
  .whisper-alert-line .whisper-alert-message,
  .whisper-alert-line .whisper-alert-points{
    color:inherit !important;
    font:inherit !important;
  }
  /* Whisper sender nickname: bold only. Everything else keeps the exact alert style. */
  .whisper-alert-line .whisper-alert-nick{
    color:inherit !important;
    font-family:inherit !important;
    font-size:inherit !important;
    font-style:inherit !important;
    font-weight:700 !important;
  }
  .whisper-alert-line .ts{margin-left:auto; color:inherit !important;}
  .whisper-ear{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; font-size:11px; line-height:1; width:13px; height:13px; margin-right:2px; color:inherit !important; font-style:normal !important; font-weight:400 !important;}
  /* Kick notice mini-animation — deliberately tiny (fits the system-message row height,
     never breaks its layout) and plays exactly once on insert via a CSS animation, no
     JS timer needed since a freshly-appended element starts its animation automatically. */
  .kick-anim{display:inline-flex; align-items:center; position:relative; width:64px; height:16px; overflow:hidden; vertical-align:middle; margin:0 2px;}
  .kick-anim .kicker{position:absolute; left:0; font-size:12px; transform-origin:70% 80%; animation:kickerSwing 1.1s ease-in-out;}
  .kick-anim .ball{position:absolute; left:12px; font-size:10px; animation:ballFly 1.1s ease-out forwards;}
  .kick-anim .goal{position:absolute; right:0; font-size:9px; font-weight:900; color:#16a34a; opacity:0; animation:goalPop 0.5s ease-out 0.9s forwards; letter-spacing:0.02em;}
  @keyframes kickerSwing{
    0%, 38%{ transform:rotate(0deg); }
    48%{ transform:rotate(-28deg); }
    58%, 100%{ transform:rotate(0deg); }
  }
  @keyframes ballFly{
    0%, 42%{ transform:translate(0,0) scale(1); opacity:1; }
    68%{ transform:translate(32px,-4px) scale(0.85); }
    100%{ transform:translate(46px,0) scale(0.75); opacity:0.85; }
  }
  @keyframes goalPop{
    0%{ opacity:0; transform:scale(0.4); }
    65%{ opacity:1; transform:scale(1.2); }
    100%{ opacity:1; transform:scale(1); }
  }
  .notice-action{color:#8b5cf6; cursor:pointer; text-decoration:underline; text-underline-offset:2px;}
  .notice-action:hover{color:#6d3fc9;}
  .notice-locked{color:#8b869e; font-weight:700;}
  .line{padding:1px 0; font-size:15px; line-height:1.55; position:relative;}
  .line-row{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;}
  /* Text + reactions share one flex item so pills sit right after the message ends
     (not at the far right of the row). flex-basis:0% keeps long text beside the nick. */
  .msg-main{flex:1 1 0%; min-width:0; word-break:break-word; overflow-wrap:break-word;}
  .msg-main .txt{display:inline; word-break:break-word; overflow-wrap:break-word;}
  .msg-main .reaction-pills{display:inline-flex; vertical-align:middle;}
  /* Legacy: bare .txt still used in some paths — don't grow alone past the reactions */
  .txt{min-width:0; word-break:break-word; overflow-wrap:break-word;}
  .line .who{font-weight:800; flex-shrink:0;}
  .ts{margin-left:auto; font-size:11px; color:#c3bfd1; flex-shrink:0; padding-left:10px;}

  .composer{display:flex; flex-direction:row; direction:ltr; align-items:center; gap:10px; padding:10px 20px; border-top:var(--line-w) var(--line-sty) var(--panel-border); background:var(--panel-bg);}
  .comp-ic{width:32px; height:32px; border-radius:var(--icon-radius, 8px); display:flex; align-items:center; justify-content:center; font-size:14px; line-height:1; cursor:pointer; flex-shrink:0; border:var(--icon-border-w, 1px) var(--icon-border-style, solid) var(--icon-border-color, var(--panel-border)); box-sizing:border-box; background:var(--icon-bg-color, transparent); box-shadow:var(--icon-shadow, none); transition:background .15s, border-color .15s, box-shadow .15s;}
  .comp-ic.active{background:#fdeaea; border-color:#e05a5a; color:#c0392b; font-size:11px; font-weight:700; width:auto; padding:0 8px;}
  /* Radio icon — soft purple idle, vivid green when playing */
  #radio-toggle{
    background:linear-gradient(145deg, #f8f6ff, #efeafd);
    border:1px solid rgba(139,92,246,0.22);
    color:#7c3aed;
    box-shadow:0 1px 3px rgba(109,63,201,0.08);
    transition:transform .15s, box-shadow .2s, background .2s, border-color .2s, color .2s;
  }
  #radio-toggle:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(109,63,201,0.18);
    border-color:rgba(139,92,246,0.4);
  }
  #radio-toggle:active{ transform:translateY(0); }
  #radio-toggle.radio-on,
  .comp-ic.radio-on{
    background:linear-gradient(145deg, #16a34a, #22c55e);
    border-color:#15803d;
    color:#fff;
    box-shadow:0 0 0 3px rgba(34,197,94,0.22), 0 4px 14px rgba(22,163,74,0.28);
  }
  body.dark-mode #radio-toggle{
    background:linear-gradient(145deg, #2a2148, #1c1533);
    border-color:rgba(168,130,255,0.28);
    color:#c9b8f5;
  }
  body.dark-mode #radio-toggle.radio-on{
    background:linear-gradient(145deg, #16a34a, #22c55e);
    color:#fff;
  }
  #radio-dj-live-badge{
    display:none; align-items:center; justify-content:center; gap:4px;
    padding:3px 8px; border-radius:999px;
    background:linear-gradient(90deg, #fee2e2, #ffedd5);
    color:#b91c1c; font-size:9px; font-weight:800; letter-spacing:0.04em;
    cursor:pointer; animation:pulse-live 1.4s infinite; flex-shrink:0;
    border:1px solid rgba(185,28,28,0.2); box-shadow:0 1px 4px rgba(185,28,28,0.12);
  }
  #radio-autodj-badge{
    display:none; align-items:center; justify-content:center; gap:4px;
    padding:3px 8px; border-radius:999px;
    background:linear-gradient(90deg, #ede9fe, #faf5ff);
    color:#6d28d9; font-size:9px; font-weight:800; letter-spacing:0.04em;
    cursor:pointer; animation:pulse-live 1.4s infinite; flex-shrink:0;
    border:1px solid rgba(109,40,217,0.2); box-shadow:0 1px 4px rgba(109,40,217,0.1);
  }
  .radio-live-bars{display:inline-flex; align-items:flex-end; gap:2px; height:12px; flex-shrink:0;}
  .radio-live-bars span{width:2.5px; background:currentColor; border-radius:1px; animation:radioBar 0.9s ease-in-out infinite; opacity:0.9;}
  .radio-live-bars span:nth-child(1){height:5px; animation-delay:0s;}
  .radio-live-bars span:nth-child(2){height:11px; animation-delay:0.2s;}
  .radio-live-bars span:nth-child(3){height:7px; animation-delay:0.4s;}
  @keyframes radioBar{ 0%,100%{transform:scaleY(0.4);} 50%{transform:scaleY(1);} }
  /* Radio station picker */
  #radio-station-picker{ font-family:inherit; }
  #radio-station-picker .rsp-head{
    display:flex; align-items:center; gap:10px;
    padding:12px 14px 10px; margin:-8px -8px 8px;
    background:linear-gradient(135deg, #8b5cf6 0%, #a855f7 45%, #ec4899 100%);
    border-radius:14px 14px 0 0; color:#fff;
  }
  #radio-station-picker .rsp-head-icon{
    width:32px; height:32px; border-radius:10px;
    background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center;
    font-size:16px; flex-shrink:0;
  }
  #radio-station-picker .rsp-head-title{font-size:13px; font-weight:800; letter-spacing:0.02em;}
  #radio-station-picker .rsp-head-sub{font-size:10.5px; opacity:0.85; font-weight:600; margin-top:1px;}
  #radio-station-picker .rsp-row{
    padding:10px 12px; border-radius:11px; font-size:13px; font-weight:650;
    cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px;
    color:#3a3550; margin-bottom:4px; transition:background .12s, transform .12s, box-shadow .12s;
    border:1px solid transparent;
  }
  #radio-station-picker .rsp-row:hover{ background:#f7f4ff; border-color:rgba(139,92,246,0.12); }
  #radio-station-picker .rsp-row:active{ transform:scale(0.99); }
  #radio-station-picker .rsp-row.active{
    background:linear-gradient(90deg, #f3e8ff, #faf5ff);
    border-color:rgba(139,92,246,0.25); color:#6d28d9; font-weight:700;
    box-shadow:0 2px 8px rgba(139,92,246,0.1);
  }
  #radio-station-picker .rsp-row.live{
    background:linear-gradient(90deg, #fef2f2, #fff7ed);
    border-color:rgba(220,38,38,0.18); color:#b91c1c; font-weight:700;
  }
  #radio-station-picker .rsp-row.off{ color:#dc2626; font-weight:700; }
  #radio-station-picker .rsp-row.off:hover{ background:#fef2f2; border-color:rgba(220,38,38,0.15); }
  #radio-station-picker .rsp-ico{
    width:28px; height:28px; border-radius:9px; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(145deg, #f4f0ff, #ebe6fa);
    border:1px solid rgba(139,92,246,0.14); font-size:13px;
  }
  #radio-station-picker .rsp-row.live .rsp-ico{
    background:linear-gradient(145deg, #fee2e2, #ffedd5); border-color:rgba(185,28,28,0.2);
  }
  #radio-station-picker .rsp-row.active .rsp-ico{
    background:linear-gradient(145deg, #ede9fe, #f5f3ff); border-color:rgba(109,40,217,0.25);
  }
  #radio-station-picker .rsp-label{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1;
  }
  body.dark-mode #radio-station-picker{ background:#1c1533 !important; border-color:#3a2f5c !important; }
  body.dark-mode #radio-station-picker .rsp-row{ color:#e8e4f5; }
  body.dark-mode #radio-station-picker .rsp-row:hover{ background:#2a2148; }
  body.dark-mode #radio-station-picker .rsp-row.active{
    background:linear-gradient(90deg, #2a2148, #332a55); color:#c9b8f5;
  }
  body.dark-mode #radio-station-picker .rsp-ico{ background:#241d3f; border-color:#3a2f5c; }
  .comp-ic.call{color:var(--icon-active-color, #16a34a);}
  .comp-ic.call.in-call{background:#fdeaea; border-color:#e14545; color:#e14545;}
  .comp-ic.mic-toggle{background:#f4f2fa; color:#8b869e;}
  .comp-ic.mic-toggle.speaking{background:#dcfce7; color:#16a34a; box-shadow:0 0 0 2px #86efac;}
  .comp-ic.mic-toggle.muted{background:#fde8e8; color:#e14545;}
  .composer input{flex:1; padding:11px 16px; border-radius:var(--corner-radius, 10px); border:1px solid var(--panel-border); background:var(--input-bg); font-size:14.5px; font-family:inherit;}
  .composer input:focus{outline:none; border-color:var(--purple);}
  .send-btn{width:38px; height:38px; border-radius:var(--corner-radius, 10px); border:none; cursor:pointer; flex-shrink:0; background:linear-gradient(135deg, var(--purple), var(--blue)); color:#fff; font-size:15px; display:flex; align-items:center; justify-content:center;}
  .frozen-tag{font-size:10.5px; background:#fff3d6; color:#a8762c; padding:3px 9px; border-radius:999px; font-weight:700;}
  .mention-banner{padding:8px 24px; font-size:12.5px; background:#f4effe; color:#6d3fc9; font-weight:700;}
  .line.mentioned{background:#fffdf0; border-left:3px solid #f0d874; border-radius:8px; padding-left:8px; padding-right:8px; margin-left:0;}
  body.dark-mode .mention-banner{background:#2a2148; color:#c9b8f5;}
  body.dark-mode .line.mentioned{background:#332f1c; border-left-color:#8a7a2e;}
  body.dark-mode .cmd-notice{background:#241d3f; color:#c9b8f5;}
  .help-card{background:#f9f8fc; border:1px solid #efeaf9; border-radius:12px; padding:14px 16px; margin-bottom:12px;}
  .help-jumpnav{background:#fff;}
  .help-pill{background:#f4effe; color:#6d3fc9;}
  body.dark-mode .help-card{background:#1f1836; border-color:#2e2650;}
  body.dark-mode .help-jumpnav{background:#241d3f;}
  body.dark-mode .help-pill{background:#2a2148; color:#c9b8f5;}

  .rail-badge{
    position:absolute; top:2px; right:2px; background:#ec4899; color:#fff; font-size:9px; font-weight:800;
    border-radius:999px; min-width:15px; height:15px; display:flex; align-items:center; justify-content:center; padding:0 3px;
  }
  .rail .ic{position:relative;}

  .above-composer{position:relative;}
  .emoji-toggle-row{display:flex; align-items:center; padding:6px 20px 10px; gap:8px;}
  /* display:contents by default so wrapping call-btn/mic-toggle-btn together changes
     NOTHING here on desktop — both remain plain flex siblings in .emoji-toggle-row,
     exactly as before. Mobile overrides this to a real box (see the mobile block)
     purely so the in-call mute button has something to anchor above without resizing
     the row when it appears — see that override's comment for why. */
  .call-mic-group{ display:contents; }
  /* Desktop: + hidden; wrap + menu are transparent so radio / voice-note / call stay in the row. */
  .composer-plus-btn{ display:none !important; }
  .composer-plus-wrap, .composer-plus-menu{ display:contents; }
  /* Normal: tools left, Register pushed right. Mirror: tools (emoji, voice, radio, minimized
     PM/DJ/games, etc.) cluster on the RIGHT; Register stays on the left when visible. */
  body.mirrored-layout .emoji-toggle-row{
    flex-direction:row;
    justify-content:flex-end;
  }
  #guest-register-btn{margin-left:auto;}
  body.mirrored-layout #guest-register-btn{
    margin-left:0 !important;
    margin-right:auto !important;
    order:-1;
  }
  .emoji-btn{
    width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center;
    font-size:15px; cursor:pointer; background:#f4f2fa; border:1px solid var(--panel-border);
  }
  .emoji-panel{
    position:absolute; bottom:100%; left:20px; margin-bottom:8px; width:360px;
    background:#fff; border:1px solid var(--panel-border); border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,0.15);
    padding:12px; z-index:50; display:none;
  }
  /* Mirror: panel opens on the right, above the emoji/tools cluster (Register stays left) */
  body.mirrored-layout .emoji-panel{
    left:auto; right:20px;
  }
  body.mirrored-layout #pm-emoji-panel{
    left:auto; right:14px;
  }
  .emoji-panel.open{display:block;}
  body.dark-mode .emoji-panel{background:#1c1533; border-color:#2e2650;}
  .emoji-tabs{display:flex; gap:8px; margin-bottom:10px;}
  .emoji-tab{padding:5px 12px; border-radius:999px; font-size:11.5px; font-weight:700; color:var(--text-mute); background:#f4f2fa; cursor:pointer;}
  .emoji-tab.active{background:var(--purple); color:#fff;}
  body.dark-mode .emoji-tab{background:#241d3f;}
  .emoji-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:5px; max-height:280px; overflow-y:auto;}
  .emoji-code-find{display:flex; align-items:center; gap:8px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--panel-border);}
  .emoji-code-find input{flex:1; padding:7px 10px; border-radius:8px; border:1px solid var(--panel-border); background:#f4f2fa; font-size:12.5px; font-family:inherit;}
  body.dark-mode .emoji-code-find input{background:#241d3f; color:#f0edf9;}
  .emoji-code-find-preview{width:32px; height:32px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--text-mute); border-radius:8px; background:#f4f2fa;}
  body.dark-mode .emoji-code-find-preview{background:#241d3f;}
  .emoji-code-find-preview img{width:26px; height:26px; object-fit:contain;}
  .emoji-item{font-size:20px; cursor:pointer; text-align:center; padding:4px; border-radius:6px; display:flex; align-items:center; justify-content:center;}
  .emoji-item:hover{background:#f4f2fa;}
  @keyframes emoji-bounce{0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);}}
  @keyframes pulse-live{0%,100%{opacity:1;} 50%{opacity:0.3;}}
  @keyframes alertPop{0%{transform:scale(0.85); opacity:0;} 100%{transform:scale(1); opacity:1;}}
  .emoji-anim{animation:emoji-bounce 0.9s ease-in-out infinite;}
  /* High-quality downscale on retina; avoid pixelated/crisp-edges which makes
     illustrated stickers and Noto GIFs look blocky when shown small.
     vertical-align:middle here — a plain small emoji at the default 22px is close
     enough to the surrounding ~15-16px text that middle-aligning it keeps it sitting
     on the text's own center line, which is what people expect from an inline emoji.
     All sizes (static, animated GIF, sticker, doodle) share vertical-align:middle so
     avatar → arrow → nick → chat → emoji → sticker → doodle sit on one centerline. */
  .chat-emoji-img{
    width:var(--emoji-size, 22px); height:var(--emoji-size, 22px);
    object-fit:contain; vertical-align:middle; margin:0 1px;
    image-rendering:auto;
    -ms-interpolation-mode:bicubic;
  }
  /* GIF-size emoji: share the same horizontal center line as nick/text/avatar. */
  .chat-emoji-img-gif{
    width:calc(var(--emoji-size, 22px) * 1.6); height:calc(var(--emoji-size, 22px) * 1.6);
    vertical-align:middle;
  }
  /* Stickers: readable size, same horizontal center line as avatar/arrow/nick/chat. */
  .chat-emoji-img-sticker{
    width:calc(var(--emoji-size, 22px) * 5.5); height:calc(var(--emoji-size, 22px) * 5.5);
    max-width:min(140px, 55vw); max-height:min(140px, 55vw);
    margin:2px 2px;
    vertical-align:middle;
    image-rendering:auto;
    border-radius:8px;
    cursor:zoom-in;
    transition:transform .12s ease, filter .12s ease;
  }
  .chat-emoji-img-sticker:hover{ transform:scale(1.06); filter:brightness(1.03); }
  .chat-emoji-img-sticker:active{ transform:scale(0.97); }

  /* Doodles: same horizontal center line as avatar/arrow/nick/chat/emoji. */
  .chat-doodle-thumb{
    display:inline-block;
    vertical-align:middle !important;
    max-width:72px;
    max-height:72px;
    width:auto;
    height:auto;
    border-radius:8px;
    margin:0 0 0 4px !important;
    border:2px solid #e14545;
    background:#fff;
    cursor:zoom-in;
    box-shadow:0 2px 8px rgba(225,69,69,0.12);
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .msg-main .txt .chat-doodle-thumb{
    margin-top:0 !important; margin-bottom:0 !important;
    vertical-align:middle !important;
    position:relative; top:0 !important;
  }
  .mobile-msg-flow .msg-main .txt .chat-doodle-thumb{
    display:inline-block !important;
    vertical-align:middle !important;
    margin:0 0 0 4px !important;
  }
  .chat-doodle-thumb:hover{ transform:scale(1.04); box-shadow:0 4px 14px rgba(225,69,69,0.28); }
  body.dark-mode .chat-doodle-thumb{ background:#1e1b2e; border-color:#e14545; }
  /* Mobile: even smaller doodle thumbs in the main chat log */
  @media (max-width:768px){
    .chat-doodle-thumb{
      max-width:52px;
      max-height:52px;
      border-radius:7px;
      margin:0 0 0 3px !important;
      vertical-align:middle !important;
    }
  }

  .people.collapsed{width:0 !important; min-width:0; overflow:hidden;}
  .rail-collapse{margin-top:auto;}

  .mod-dots{padding:2px 6px; border-radius:6px; color:#8b869e; font-weight:800; cursor:pointer; flex-shrink:0;}
  .mod-dots:hover{background:#f0ecfd; color:#5b4fd1;}
  .mod-menu{
    position:absolute; background:#fff; border:1px solid #e7e3f3; border-radius:var(--corner-radius, 10px);
    box-shadow:0 12px 30px rgba(0,0,0,0.15); z-index:100; min-width:150px; overflow:hidden;
  }
  .mod-menu .item{padding:9px 14px; font-size:13px; font-weight:600; cursor:pointer; color:#232037;}
  .mod-menu .item:hover{background:#f4f2fa;}
  .mod-menu .item.danger{color:#c0392b;}

  /* Mobile main-chat typing strip: one active nick only, immediately above the composer. */
  @media (max-width:768px){
    .typing-bar.visible{
      display:flex !important; align-items:center; justify-content:flex-start;
      flex:1 1 100%; order:-1; width:100%;
      min-height:18px; height:18px; padding:0 10px;
      margin:0; border:0; background:transparent;
      overflow:hidden;
    }
    .typing-bar-entry{font-size:11px; min-width:0;}
    .typing-bar-entry .typing-bar-nick{max-width:120px;}
  }

  .mobile-bottom-nav{display:none;}

  @media (max-width: 768px){
    .rail{display:none;}
    .col-resizer{display:none;}
    /* iOS Safari auto-zooms the whole page when focusing any input/textarea/select
       with a font-size under 16px — this is the most common cause of a mobile chat
       page seeming to "get stuck" zoomed in after tapping to type. Every text input in
       the app gets bumped to 16px here specifically for mobile; nothing else changes. */
    input[type="text"], input[type="password"], input[type="number"], input[type="search"], textarea, select{
      font-size:16px !important;
    }
    /* People drawer — width is user-resizable (drag the edge strip), same idea as desktop */
    .people{
      position:fixed; top:0; left:0; bottom:calc(52px + env(safe-area-inset-bottom));
      width:var(--people-mobile-w, 220px);
      min-width:160px !important;
      max-width:min(92vw, 420px) !important;
      z-index:50; box-shadow:2px 0 20px rgba(0,0,0,0.15);
    }
    body.mirrored-layout .people{
      left:auto; right:0;
      box-shadow:-2px 0 20px rgba(0,0,0,0.15);
    }
    .people:not(.mobile-open){ display:none; }
    .people .person{padding:8px 10px; gap:12px;}
    .people .people-head, .people .section-label{padding-left:10px; padding-right:10px;}
    .people .search{margin-left:10px; margin-right:10px;}
    /* Drag handle on the open edge of the people drawer */
    .people-mobile-resizer{
      display:block !important;
      position:absolute; top:0; bottom:0; right:0;
      width:18px; z-index:55;
      cursor:ew-resize; touch-action:none;
      background:transparent;
    }
    .people-mobile-resizer::after{
      content:''; position:absolute; top:50%; right:4px; transform:translateY(-50%);
      width:4px; height:48px; border-radius:4px;
      background:rgba(139,92,246,0.55);
    }
    .people-mobile-resizer.dragging::after,
    .people-mobile-resizer:active::after{ background:var(--purple, #6d3fc9); height:64px; }
    body.mirrored-layout .people-mobile-resizer{ right:auto; left:0; }
    body.mirrored-layout .people-mobile-resizer::after{ right:auto; left:4px; }
    #people-close-tab{
      display:flex !important; align-items:center; justify-content:center;
      position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
      width:52px; height:30px; border-radius:15px;
      background:var(--purple, #6d3fc9); color:#fff;
      font-weight:900; font-size:16px; line-height:1;
      box-shadow:0 2px 8px rgba(0,0,0,0.25); cursor:pointer; z-index:51;
    }
    .app-shell{width:100%; height:100%; max-width:none;}
    .room{width:100%; flex:1 1 auto; min-width:0; min-height:0;}
    .topic-bar{font-size:12.5px; padding:7px 12px;}
    .composer{width:100%; box-sizing:border-box;}
    .composer #msg-input, .composer input{flex:1 1 auto; min-width:0;}
    .mobile-only-arrow{display:inline-block !important;}
    .gc-window{
      width:calc(100vw - 16px) !important; max-width:none !important; right:8px !important; left:8px !important;
      bottom:56px !important; height:calc(var(--vh, 1vh) * 100 - 100px) !important; max-height:none !important;
    }
    /* The mixer's desktop position (right:792px, set inline in JS) assumes there's room
       beside a 760px-wide group chat/radio window — on a phone that pushes it entirely
       off-screen to the left, making it completely inaccessible. Same fix pattern as
       .gc-window above: override the inline positioning here instead of changing the
       JS, since the JS position is still correct for desktop. */
    #dj-mixer-panel{
      width:calc(100vw - 16px) !important; max-width:none !important; right:8px !important; left:8px !important;
      bottom:56px !important; max-height:calc(var(--vh, 1vh) * 100 - 120px) !important;
    }
    /* The co-host popup's fixed 220px width is already safe on ordinary phone widths,
       but this keeps it consistent with everything else here and safe on the very
       narrowest devices too. */
    #cohost-control-popup{
      width:calc(100vw - 16px) !important; max-width:280px !important; right:8px !important; left:8px !important; bottom:56px !important;
    }
    .gc-body{ flex-direction:column !important; }
    /* The PM window's raw 90vh cap (set inline in JS) is exactly the classic mobile
       viewport bug — phone browsers routinely miscalculate vh against their own
       address bar/chrome showing or hiding, so 90vh can end up taller than what's
       actually visible, cutting off the message input at the bottom. Same --vh fix
       already used for .gc-window and #dj-mixer-panel above, applied here too. */
    #pm-modal-overlay{ padding:8px !important; }
    .pm-modal-card{
      width:100% !important; height:calc(var(--vh, 1vh) * 100 - 16px) !important; max-height:none !important;
    }
    .gc-member-panel{
      width:100% !important; height:auto !important; max-height:80px; flex-shrink:0 !important;
      border-right:none !important; border-bottom:1px solid #e7e3f3;
      display:flex !important; flex-direction:row !important; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    }
    #gc-invite-toast-wrap, [id^="gc-invite-toast-"]{ bottom:60px !important; right:8px !important; left:8px !important; width:auto !important; }
    .log{padding:12px 14px;}
    .ts{display:none;}
    .line{padding:4px 0; line-height:1.4;}
    /* Mobile chat layout: keep nickname and message on the SAME row.
       The message starts immediately beside the nickname instead of dropping
       underneath it. */
    .line-row{
      display:flex !important;
      flex-direction:row !important;
      align-items:baseline !important;
      gap:6px !important;
      flex-wrap:nowrap !important;
      width:100%;
      min-width:0;
    }
    /* Universal mobile chat polish — applies to every skin, not just WhatsApp. */
    .topic-bar, #topic-bar{ display:none !important; }
    #clear-my-view-btn{ display:none !important; }
    .line-row{ gap:5px !important; align-items:center !important; }
    /* display intentionally not set here — see the matching desktop rule's
       comment above. This mobile copy had the same bug: forcing display on
       every skin at 2-class specificity ties (and, by later source order,
       beats) the body.hhb-sender-display-* rules that are supposed to
       control avatar visibility, so Arrow Only / Avatar Only silently had
       no effect on mobile. Only sizing/shape stays here. */
    .line-row > .wa-msg-avatar{
      flex:0 0 26px !important; width:26px !important; height:26px !important;
      min-width:26px !important; border-radius:50% !important; font-size:11px !important;
      margin:1px 1px 0 0 !important; cursor:pointer;
    }
    .mobile-msg-flow{
      flex:1 1 auto !important; min-width:0 !important; max-width:none !important;
      display:block !important; line-height:1.38 !important; overflow-wrap:anywhere; word-break:break-word;
    }
    .mobile-msg-flow .who{
      display:inline !important; width:auto !important; max-width:none !important;
      white-space:normal !important; font-size:13.5px; line-height:1.38 !important;
      font-weight:700; vertical-align:baseline !important;
    }
    .mobile-msg-flow .who .nick-mirror-arrow{ font-size:11px !important; }
    .mobile-msg-flow .wa-nick{ font-size:13.5px; font-weight:700; }
    .mobile-msg-flow .msg-main{
      display:inline !important; width:auto !important; max-width:none !important; min-width:0 !important;
      font-size:14px; line-height:1.38 !important; overflow-wrap:anywhere; word-break:break-word;
    }
    .mobile-msg-flow .msg-main .txt{
      font-size:14px; line-height:1.38 !important;
    }
    .mobile-msg-flow .reaction-pills{ display:inline !important; }
    /* MOBILE SETTINGS PARITY: mobile must not replace a user's/room's per-message
       nick or text font settings (family/size/weight/style, set via inline style
       from their Profile/Settings) with the fixed defaults above. Those defaults
       only apply when nothing more specific was set, same as desktop. */
    .line .who, .line .wa-nick{
      font-size:inherit; font-weight:inherit; font-style:inherit;
    }
    .line .msg-main, .line .msg-main .txt{
      font-size:inherit; font-weight:inherit; font-style:inherit;
    }
    .line{ line-height:1.38 !important; }
    .line-row > .who{
      flex:0 0 auto !important;
      width:auto !important;
      max-width:max-content !important;
      white-space:nowrap;
    }
    .line-row > .msg-main{
      flex:1 1 auto !important;
      width:auto !important;
      min-width:0 !important;
      max-width:none !important;
      display:inline !important;
      overflow-wrap:anywhere;
      word-break:break-word;
    }
    .line .who{
      display:inline-flex;
      align-items:baseline;
      gap:4px;
      flex-shrink:0;
      max-width:100%;
    }
    .msg-main{
      flex:1 1 auto;
      width:auto;
      min-width:0;
      display:inline-block;
    }
    .msg-main .txt{
      display:inline;
      word-break:break-word;
      overflow-wrap:anywhere;
    }
    /* Never change horizontal padding on mobile — that was the post-send “expand a bit” jump. */
    .line:hover, .line.selected{
      padding-left:0 !important; padding-right:0 !important;
      margin-left:0 !important; margin-right:0 !important;
      background:#f4f2fa; border-radius:8px;
    }
    body.dark-mode .line:hover, body.dark-mode .line.selected{ background:#2a2640; }
    .line.whisper{padding:3px 8px; line-height:1.25;}
    .join-note{margin:2px 0; line-height:1.25;}
    /* Keep emoji/img box size reserved so late-loading assets don't reflow the line.
       Plain emoji stays middle-aligned (matches the base rule); only the GIF size
       needs its own top-alignment, same split as the base rule above and for the
       same reason — see the comment on .chat-emoji-img/.chat-emoji-img-gif. */
    .line .chat-emoji-img, .line .chat-emoji-img-gif{
      display:inline-block;
      width:var(--emoji-size, 22px); height:var(--emoji-size, 22px);
      object-fit:contain;
    }
    .line .chat-emoji-img{
      vertical-align:middle;
    }
    .line .chat-emoji-img-gif{
      vertical-align:middle;
      width:calc(var(--emoji-size, 22px) * 1.6); height:calc(var(--emoji-size, 22px) * 1.6);
    }
    /* ---- WhatsApp-style single-row composer ----
       Desktop keeps a separate icon row above the input (.emoji-toggle-row); on mobile
       that row's own box is dissolved (display:contents) so its remaining children —
       currently just the voice-note/mic button — become flex items of .above-composer
       directly, landing in the SAME visual row as the text input instead of a row
       above it. (Emoji is handled separately below — it's moved into the input pill
       itself. Radio and Send are hidden on mobile entirely — see further down.) The
       bar's background/border move up to .above-composer so the whole thing reads as
       one continuous strip. Kept LTR/simple regardless of mirrored-layout, same stance
       the site already takes for .composer itself (see the "Send button ALWAYS on the
       right" rule near the top of this stylesheet) — these icons are now part of that
       same row, so they follow it. */
    .above-composer{
      display:flex; flex-direction:row; flex-wrap:wrap; align-items:center;
      gap:6px; padding:6px 10px; box-sizing:border-box;
      border-top:var(--line-w) var(--line-sty) var(--panel-border); background:var(--panel-bg);
    }
    /* v5: mobile no longer uses a floating call/mic/voice-timer badge — call, mic and
       voice-note now render inline in .emoji-toggle-row exactly like desktop (see the
       .composer-plus-wrap/.composer-plus-menu/.call-mic-group rules further down, which
       now stay display:contents on mobile too instead of popping into a separate popup). */
    #cmd-autocomplete, #reply-preview-chip{ flex:1 1 100%; order:-1; }
    .emoji-toggle-row:not(.pm-tools-row){ display:contents; }
    /* Emoji is moved (see the placeEmojiToggleForViewport JS near the emoji-panel
       setup) to be an actual DOM child of .composer on mobile, so it can sit truly
       INSIDE the input pill's left edge — not just visually beside it as a separate
       box — while desktop keeps it in the untouched icon row above the input. */
    .composer{
      /* flex-basis:0 (not auto) so the input's own natural/intrinsic width doesn't get
         counted when the row decides whether things fit on one line — it still grows to
         fill the space via flex-grow, but no longer forces voice-note/call/mic (order:11,
         after it) to wrap onto their own line just because an empty <input> "wants" to be
         wide. */
      order:10; flex:1 1 0; min-width:0; width:auto; /* override the width:100% set above — it must share the row now */
      padding:0; border-top:none; background:transparent; position:relative;
    }
    /* Emoji + doodle: same size/border as other mobile composer icons (lavender ring) */
    .composer #emoji-toggle,
    .composer #doodle-btn{
      position:absolute; top:50%; transform:translateY(-50%);
      z-index:2; width:32px; height:32px; min-width:32px; min-height:32px;
      font-size:15px; line-height:1; padding:0; margin:0;
      background:var(--icon-bg-color, #fff) !important;
      border:1.5px solid var(--icon-border-color, #d4c4f0) !important;
      border-radius:50% !important;
      box-shadow:var(--icon-shadow, none) !important;
      display:flex !important; align-items:center; justify-content:center;
      box-sizing:border-box; flex-shrink:0; color:inherit;
    }
    .composer #emoji-toggle{ left:4px; }
    .composer #doodle-btn{ left:40px; }
    body.dark-mode .composer #emoji-toggle,
    body.dark-mode .composer #doodle-btn{
      background:#1e1b2e !important;
      border-color:rgba(196,181,253,0.45) !important;
    }
    .composer #msg-input, .composer input{order:0 !important; padding-left:76px !important;}
    .composer .frozen-tag{order:1 !important;}
    /* Send stuck to the extreme right of the composer row */
    .send-btn{
      display:flex !important;
      width:34px; height:34px; min-width:34px;
      border-radius:10px; font-size:14px;
      order:99; flex-shrink:0; margin:0 0 0 auto; padding:0;
      align-items:center; justify-content:center;
    }
    /* v8: composer-plus-btn is a small up-arrow that floats just above Send; tapping it
       opens composer-plus-menu as a compact vertical popup (voice-note, call, mic) right
       above the arrow — see toggleComposerPlusMenu(). .above-composer is the positioned
       ancestor (position:relative, set in the base non-mobile CSS) both anchor to. Radio
       never appears in this menu — it stays exclusively in the bottom nav (#mb-tab-tools,
       below). Desktop is untouched: its base (non-mobile) rules keep everything inline
       via display:contents. */
    .composer-plus-wrap{ display:contents; }
    .composer-plus-btn{
      display:flex !important;
      position:absolute !important; right:10px; bottom:100%; margin-bottom:8px;
      /* !important: a higher-specificity rule (.above-composer .comp-ic, and the
         compact skin's own .composer-plus-btn override) would otherwise win the 30px
         sizing back — this button needs to stay a fixed 36px circle regardless. */
      width:36px !important; height:36px !important; min-width:36px !important;
      border-radius:50% !important;
      background:var(--panel-bg, #fff); border:1.5px solid var(--icon-border-color, #d4c4f0);
      box-shadow:0 4px 14px rgba(20,10,40,0.18);
      align-items:center; justify-content:center;
      z-index:60;
    }
    body.dark-mode .composer-plus-btn{
      background:#1e1b2e; border-color:rgba(196,181,253,0.45); color:#c4b5fd;
    }
    /* Arrow flips to point down while the menu is open — doubles as the "tap to close" cue */
    .composer-plus-btn .plus-arrow-icon{ transition:transform .15s; }
    .composer-plus-btn.open .plus-arrow-icon{ transform:rotate(180deg); }
    .composer-plus-menu{
      display:none;
      position:absolute; right:10px; bottom:100%; margin-bottom:52px;
      flex-direction:column; align-items:center; gap:6px;
      padding:6px; background:var(--panel-bg); border:1px solid var(--panel-border);
      border-radius:12px; box-shadow:0 8px 20px rgba(20,10,40,0.16); z-index:59;
    }
    .composer-plus-menu.open{ display:flex; }
    #mb-tab-tools{ position:relative; }
    /* Fixed 36×36 slot for + / timer / hangup / radio — never grow or shrink */
    #mb-tab-tools .mb-icon{
      width:36px; height:36px; min-width:36px; min-height:36px; max-width:36px; max-height:36px;
      border-radius:12px;
      display:flex; align-items:center; justify-content:center;
      overflow:hidden; box-sizing:border-box; flex-shrink:0;
      transition: background .15s, color .15s, box-shadow .15s;
    }
    #mb-tab-tools.state-radio .mb-icon{
      background:#dcfce7; color:#16a34a; box-shadow:0 0 0 2px #86efac;
    }
    #mb-tab-tools.state-radio .mb-icon svg{
      width:18px; height:18px; display:block; flex-shrink:0; pointer-events:none;
    }
    body.dark-mode #mb-tab-tools.state-radio .mb-icon{ background:#14532d; color:#86efac; box-shadow:0 0 0 2px #166534; }
    /* v5: call/recording no longer have their own #mb-tab-tools state — the bottom-nav
       tab is a plain radio toggle only; call/mic/voice-note live in the composer-plus-menu
       popup instead (see the v8 rules above). */
    /* Radio badges stay hidden on mobile main row (radio icon itself is never shown here).*/
    #radio-dj-live-badge, #radio-autodj-badge{ display:none !important; }
    /* Everything else that used to live in the icon row (the various "resume minimized
       panel" buttons, guest register) only renders when its own trigger condition is
       active — let those wrap to their own line instead of crowding the input row on
       a narrow phone screen. */
    #pm-minimized-icon, #dj-mixer-minimized-icon,
    #cohost-popup-minimized-icon, #games-minimized-icon, #guest-register-btn{
      order:20; flex:0 0 auto; flex-basis:auto;
    }
    #guest-register-btn{ flex-basis:100%; margin-left:0; margin-top:4px; }
    .above-composer .comp-ic{ width:30px; height:30px; font-size:13px; }
    /* v8: call-mic-group stays display:contents (base rule) so call-btn/mic-toggle-btn
       become direct flex children of .composer-plus-menu, stacking vertically with
       voice-note-btn inside the popup instead of sitting in the main row. */
    /* v6: radio only lives in the bottom nav on mobile (#mb-tab-tools) — never shown
       in the composer-plus-menu popup either, so it's never shown twice. */
    #radio-toggle{ display:none !important; }
    /* v6: while recording, let the voice-note button grow into a pill so the
       "● 0:12" timer has room instead of being squeezed into a fixed 30px circle. */
    .above-composer .comp-ic#voice-note-btn.active{
      width:auto; min-width:30px; padding:0 10px;
      white-space:nowrap; font-variant-numeric:tabular-nums;
      font-size:12px; font-weight:800;
    }
    /* .line .msg-actions' floating-above-the-message behavior now lives in the base
       (non-mobile) stylesheet above, since desktop needed the exact same fix — only
       the viewport-relative max-width above was mobile-specific, and it's harmless to
       keep universal too, so nothing mobile-only remains here. */
    .emoji-panel{width:calc(100vw - 24px); left:12px; right:12px;}
    .emoji-grid{grid-template-columns:repeat(6, 1fr);}
    .nick-popup{width:calc(100vw - 32px); max-width:230px;}
    body{padding-bottom:calc(52px + env(safe-area-inset-bottom));}
    body.ui-skin-whatsapp{padding-bottom:calc(44px + env(safe-area-inset-bottom, 0px)) !important;}
    .mobile-bottom-nav{
      display:flex; position:fixed; bottom:0; left:0; right:0; height:52px;
      padding-bottom:env(safe-area-inset-bottom); box-sizing:content-box;
      background:var(--rail-bg); z-index:60; align-items:center; justify-content:space-around;
      border-top:1px solid var(--rail-border); box-shadow:0 -4px 20px rgba(20,10,40,0.06);
    }
    .mobile-bottom-nav .mb-item{
      display:flex; align-items:center; justify-content:center;
      color:#8b869e; cursor:pointer; position:relative; flex:1; height:100%;
      -webkit-tap-highlight-color:transparent;
    }
    .mobile-bottom-nav .mb-item .mb-icon{
      width:34px; height:34px; display:flex; align-items:center; justify-content:center;
      border-radius:11px; background:transparent; border:1px solid transparent;
      opacity:0.85; transition:opacity .15s, background .15s, color .15s, border-color .15s, transform .12s, box-shadow .15s;
      margin:auto; padding:0; box-sizing:border-box; color:inherit;
    }
    .mobile-bottom-nav .mb-item .mb-icon svg{ width:20px; height:20px; display:block; stroke-width:1.85; }
    .mobile-bottom-nav .mb-item:active .mb-icon{ transform:scale(0.92); }
  @media(max-width:600px){ .mobile-bottom-nav{grid-template-columns:repeat(8,minmax(0,1fr));} #mb-tab-story .mb-icon{font-size:23px !important;} }

    .mobile-bottom-nav .mb-item.active{color:#fff;}
    .mobile-bottom-nav .mb-item.active .mb-icon{
      opacity:1; background:linear-gradient(145deg, var(--purple), #7c3aed);
      border-color:transparent; color:#fff;
      box-shadow:0 4px 12px rgba(139,92,246,0.35);
    }
    .mobile-bottom-nav .mb-badge{
      position:absolute; top:0; right:22%; background:#ec4899; color:#fff; font-size:9px; font-weight:800;
      border-radius:999px; min-width:14px; height:14px; display:flex; align-items:center; justify-content:center; padding:0 3px;
    }
  }
  /* Compact more-menu drawer: only wide enough for icon + label + chevron */
  .mobile-more-screen{display:none; position:fixed; top:0; right:0; bottom:calc(56px + env(safe-area-inset-bottom)); z-index:200; background:var(--panel-bg); flex-direction:column; width:min(220px, 70vw); max-width:70vw; box-shadow:-8px 0 32px rgba(20,10,40,0.18); border-left:1px solid var(--panel-border);}
  .mobile-more-screen.open{display:flex;}
  /* No "Menu" title — compact back only */
  .mobile-more-head{display:flex; align-items:center; padding:8px 10px; border-bottom:1px solid var(--panel-border); flex-shrink:0; position:relative; background:linear-gradient(180deg, rgba(139,92,246,0.06), transparent);}
  .mobile-more-head .mm-back{
    width:34px; height:34px; border-radius:10px; z-index:1; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--purple); background:rgba(139,92,246,0.1); border:1px solid rgba(139,92,246,0.18);
    transition:background .15s, transform .15s;
  }
  .mobile-more-head .mm-back:active{transform:scale(0.96); background:rgba(139,92,246,0.18);}
  .mobile-more-head .mm-back svg{width:18px; height:18px; display:block;}
  .mobile-more-head .mm-title{display:none !important;}
  .mobile-more-list{flex:1; overflow-y:auto; padding:6px 10px 8px; -webkit-overflow-scrolling:touch; min-height:0;}
  /* Close always visible at bottom of drawer (outside scroll) */
  .mobile-more-screen > .mm-close-bottom{
    flex-shrink:0; margin:0 10px 10px; width:auto;
  }
  .mm-row{
    display:flex; align-items:center; gap:10px; padding:10px 10px; margin-bottom:4px;
    cursor:pointer; border-radius:12px; border:1px solid transparent;
    font-size:13.5px; font-weight:650; color:var(--text-dark);
    transition:background .15s, border-color .15s, transform .12s;
  }
  .mm-row:active{background:rgba(139,92,246,0.08); border-color:rgba(139,92,246,0.14); transform:scale(0.99);}
  .mm-row .mm-icon{
    width:32px; height:32px; border-radius:10px; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(145deg, #f4f0ff, #ebe6fa);
    border:1px solid rgba(139,92,246,0.14);
    color:#6d3fc9; box-shadow:0 1px 2px rgba(109,63,201,0.06);
  }
  .mm-row .mm-icon svg{width:18px; height:18px; display:block; stroke:currentColor;}
  .mm-row .mm-chev{margin-left:auto; color:var(--text-mute); font-size:18px; font-weight:400; opacity:0.55;}
  .mm-row.mm-danger{color:#e14545;}
  .mm-row.mm-danger .mm-icon{background:linear-gradient(145deg, #fef2f2, #fde8e8); border-color:rgba(225,69,69,0.18); color:#e14545;}
  body.dark-mode .mobile-more-head{background:linear-gradient(180deg, rgba(139,92,246,0.12), transparent);}
  body.dark-mode .mm-row .mm-icon{background:linear-gradient(145deg, #2a2148, #241d3f); border-color:rgba(168,130,255,0.2); color:#c9b8f5;}
  body.dark-mode .mm-row:active{background:rgba(139,92,246,0.15); border-color:rgba(168,130,255,0.22);}
  body.dark-mode .mm-row.mm-danger .mm-icon{background:linear-gradient(145deg, #3a1e2e, #2e1824); border-color:rgba(225,69,69,0.25); color:#ff8a9a;}
  body.dark-mode .mobile-more-head .mm-back{background:rgba(139,92,246,0.18); border-color:rgba(168,130,255,0.25); color:#c9b8f5;}
  /* Close control at the bottom of the More menu (below Log Out) */
  .mm-close-bottom{
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin:14px 4px 8px; padding:12px 14px;
    border-radius:12px; cursor:pointer;
    background:var(--purple, #6d3fc9); color:#fff;
    font-weight:800; font-size:13.5px; letter-spacing:0.02em;
    box-shadow:0 2px 10px rgba(109,63,201,0.28);
    -webkit-tap-highlight-color:transparent;
  }
  .mm-close-bottom:active{transform:scale(0.98); opacity:0.92;}
  .mm-close-bottom .mm-close-icon{font-size:14px; line-height:1; font-weight:900;}
  body.dark-mode .mm-close-bottom{background:#7c5cbf; box-shadow:0 2px 10px rgba(0,0,0,0.35);}

  /* ========== Room UI skins (Dashboard → Room UI Style). !important beats inline theme BGs. ========== */
  /* Messages use .line .txt (not .text/.bubble). */

  /* F · BlaB AX inspired skin — original clean-room implementation.
     Visual target: compact dark floating chat box, black message canvas, narrow online
     roster on the right, blue hairline header, cream message composer. Existing HiHelloBye
     DOM/functions remain in place; this block only changes presentation. */
  body.ui-skin-blabax{
    --blab-bg:#3b3b3b;
    --blab-window:#0b0b0b;
    --blab-panel:#242424;
    --blab-panel-2:#191919;
    --blab-line:#3c3c3c;
    --blab-blue:#4aa7ff;
    --blab-text:#dedede;
    --blab-muted:#8d8d8d;
    --blab-input:#eee8d7;
    --blab-input-text:#262626;
    --blab-green:#9ccf2f;
    background:
      radial-gradient(circle at 18% 18%,rgba(255,255,255,.08),transparent 30%),
      linear-gradient(135deg,#555 0%,#2d2d2d 46%,#171717 100%) !important;
    color:var(--blab-text) !important;
  }

  body.ui-skin-blabax .app-shell{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 172px !important;
    grid-template-rows:minmax(0,1fr) !important;
    width:min(980px,94vw) !important;
    height:min(650px,88vh) !important;
    margin:auto !important;
    position:relative !important;
    overflow:hidden !important;
    background:var(--blab-window) !important;
    border:1px solid #555 !important;
    border-radius:2px !important;
    box-shadow:0 22px 60px rgba(0,0,0,.62),0 0 0 5px rgba(0,0,0,.18) !important;
  }

  /* BlaB has the chat canvas first and the online roster on the right. */
  body.ui-skin-blabax .room{
    grid-column:1 !important; grid-row:1 !important;
    min-width:0 !important; position:relative !important;
    background:#050505 !important;
    color:#d9d9d9 !important;
    border:0 !important;
    overflow:hidden !important;
  }
  body.ui-skin-blabax .people{
    grid-column:2 !important; grid-row:1 !important;
    width:auto !important; min-width:0 !important; max-width:none !important;
    background:var(--blab-panel) !important;
    border-left:1px solid #3b3b3b !important;
    color:#d5d5d5 !important;
    overflow:hidden !important;
  }
  body.ui-skin-blabax .col-resizer{ display:none !important; }
  body.ui-skin-blabax .rail{ display:none !important; }

  /* Top bar: black, tiny window dots, blue hairline, room title/status. */
  body.ui-skin-blabax .topic-bar{
    height:34px !important; min-height:34px !important;
    padding:0 9px 0 76px !important;
    background:#050505 !important;
    border:0 !important;
    border-bottom:2px solid #2c86d8 !important;
    color:#d4d4d4 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
    position:relative !important;
    z-index:5 !important;
  }
  body.ui-skin-blabax .topic-bar::before{
    content:'•••';
    position:absolute; left:9px; top:2px;
    font-size:17px; line-height:24px; letter-spacing:1px;
    color:#eee; text-shadow:0 0 0 #eee;
  }
  body.ui-skin-blabax .topic-bar::after{
    content:'BLAB! AX';
    position:absolute; left:25px; top:7px;
    font-size:10px; line-height:14px; font-weight:800;
    letter-spacing:.08em; color:#a8a8a8;
  }
  body.ui-skin-blabax #topic-label{ display:none !important; }
  body.ui-skin-blabax .topic-bar-text{
    color:#bdbdbd !important; font-size:10.5px !important;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:72%;
  }
  body.ui-skin-blabax .topic-bar-actions{ margin-left:auto !important; }
  body.ui-skin-blabax .topic-action-btn{ color:#aaa !important; }

  /* Right-side Online panel. */
  body.ui-skin-blabax .people::before{
    content:'Online'; display:block;
    height:35px; padding:9px 10px 0;
    box-sizing:border-box;
    background:#151515; color:#eee;
    font-size:12px; font-weight:800;
    border-bottom:1px solid #3c3c3c;
  }
  body.ui-skin-blabax .people-head,
  body.ui-skin-blabax .search{ display:none !important; }
  body.ui-skin-blabax .people-list{
    padding:6px 4px 10px !important;
    background:var(--blab-panel) !important;
  }
  body.ui-skin-blabax .section-label{
    padding:7px 7px 3px !important;
    color:#9b9b9b !important;
    font-size:9px !important;
    letter-spacing:.05em !important;
    text-transform:none !important;
  }
  body.ui-skin-blabax .person{
    min-height:29px !important;
    padding:3px 6px !important;
    gap:6px !important;
    border-radius:1px !important;
    color:#ddd !important;
  }
  body.ui-skin-blabax .person:hover{ background:#303030 !important; }
  body.ui-skin-blabax .person .av-wrap,
  body.ui-skin-blabax .person .av{
    width:23px !important; height:23px !important;
  }
  body.ui-skin-blabax .p-name{ color:#ddd !important; font-size:11px !important; }
  body.ui-skin-blabax .p-status{ color:#777 !important; font-size:9px !important; }
  body.ui-skin-blabax .os{ box-shadow:0 0 0 1px #242424 !important; }

  /* Black chat canvas + dense single-line messages. */
  body.ui-skin-blabax .log{
    background:#050505 !important;
    color:#d4d4d4 !important;
    padding:10px 7px 8px !important;
    scrollbar-color:#3b3b3b #080808;
  }
  body.ui-skin-blabax .log::before{
    content:'BlaB';
    position:absolute; left:14%; top:43%;
    font-size:clamp(60px,10vw,150px); font-weight:900;
    letter-spacing:-.08em; color:rgba(80,125,175,.10);
    pointer-events:none; user-select:none;
    transform:rotate(-7deg);
  }
  body.ui-skin-blabax .line{
    margin:0 !important; padding:2px 4px !important;
    color:#d5d5d5 !important;
    background:transparent !important;
    border-radius:0 !important;
    font-size:12px !important;
    line-height:1.22 !important;
  }
  body.ui-skin-blabax .line:hover{ background:rgba(255,255,255,.035) !important; }
  body.ui-skin-blabax .line .line-row{ align-items:center !important; }
  body.ui-skin-blabax .line .who{ color:#e06b68 !important; font-size:12px !important; font-weight:700 !important; }
  body.ui-skin-blabax .line .txt{ color:#cfcfcf !important; font-size:12px !important; }
  body.ui-skin-blabax .ts{ color:#777 !important; font-size:9px !important; }
  body.ui-skin-blabax .join-note,
  body.ui-skin-blabax .mod-action-note{ color:#777 !important; font-size:10px !important; }

  /* Keep the requested HiHelloBye avatar/nick/message/doodle center-line behavior. */
  body.ui-skin-blabax .line .line-row,
  body.ui-skin-blabax .line .sender-row,
  body.ui-skin-blabax .line .av-wrap,
  body.ui-skin-blabax .line .doodle-wrap{ align-items:center !important; vertical-align:middle !important; }

  /* Classic BlaB-style cream composer with compact black send button. */
  body.ui-skin-blabax .above-composer{
    background:#171717 !important;
    border-top:1px solid #3b3b3b !important;
  }
  body.ui-skin-blabax .typing-bar{
    color:#8c8c8c !important; background:#171717 !important;
    font-size:9px !important; min-height:14px !important;
  }
  body.ui-skin-blabax .emoji-toggle-row{ background:#171717 !important; }
  body.ui-skin-blabax .composer{
    min-height:47px !important; padding:6px !important; gap:5px !important;
    background:#090909 !important;
    border-top:1px solid #444 !important;
  }
  body.ui-skin-blabax .composer input,
  body.ui-skin-blabax #msg-input{
    min-height:31px !important;
    background:var(--blab-input) !important;
    color:var(--blab-input-text) !important;
    border:1px solid #9f9b8d !important;
    border-radius:1px !important;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.22) !important;
    padding:6px 8px !important;
    font-size:13px !important;
  }
  body.ui-skin-blabax .send-btn{
    width:38px !important; min-width:38px !important; height:31px !important;
    border-radius:1px !important;
    background:#050505 !important; color:#fff !important;
    border:1px solid #777 !important;
    font-size:20px !important; line-height:1 !important;
    box-shadow:none !important;
  }
  body.ui-skin-blabax .comp-ic,
  body.ui-skin-blabax .composer-plus-btn{
    border-radius:1px !important;
    background:#252525 !important; color:#bbb !important;
    border:1px solid #444 !important;
  }
  body.ui-skin-blabax .comp-ic:hover,
  body.ui-skin-blabax .composer-plus-btn:hover{ background:#333 !important; }
  body.ui-skin-blabax .mobile-bottom-nav{ display:none !important; }

  /* Compact modal/popover treatment so opened tools still belong to the skin. */
  body.ui-skin-blabax .hhb-modal-card,
  body.ui-skin-blabax .nick-popup,
  body.ui-skin-blabax .mod-menu,
  body.ui-skin-blabax .cmd-autocomplete{
    background:#1e1e1e !important; color:#ddd !important;
    border:1px solid #4b4b4b !important; border-radius:2px !important;
    box-shadow:0 18px 45px rgba(0,0,0,.65) !important;
  }
  body.ui-skin-blabax button{ border-radius:2px !important; }

  @media (max-width:768px){
    body.ui-skin-blabax{
      background:#050505 !important;
    }
    body.ui-skin-blabax .app-shell{
      display:flex !important; flex-direction:column !important;
      width:100vw !important; height:100dvh !important; margin:0 !important;
      border:0 !important; border-radius:0 !important; box-shadow:none !important;
    }
    body.ui-skin-blabax .room{
      display:flex !important; flex:1 1 auto !important; min-height:0 !important;
      width:100% !important;
    }
    body.ui-skin-blabax .people{ display:none; }
    body.ui-skin-blabax .topic-bar{
      height:31px !important; min-height:31px !important;
      padding-left:72px !important;
    }
    body.ui-skin-blabax .topic-bar::before{ top:0; }
    body.ui-skin-blabax .topic-bar::after{ top:6px; }
    body.ui-skin-blabax .topic-bar-text{ max-width:60%; font-size:9.5px !important; }
    body.ui-skin-blabax .log{ padding:7px 5px 8px !important; }
    body.ui-skin-blabax .line{ font-size:11.5px !important; padding:2px 3px !important; }
    body.ui-skin-blabax .line .who,
    body.ui-skin-blabax .line .txt{ font-size:11.5px !important; }
    body.ui-skin-blabax .composer{ padding:5px !important; min-height:45px !important; }
    body.ui-skin-blabax .composer input,
    body.ui-skin-blabax #msg-input{ font-size:13px !important; min-height:30px !important; }
    body.ui-skin-blabax .send-btn{ width:35px !important; min-width:35px !important; height:30px !important; }
    body.ui-skin-blabax .mobile-bottom-nav{
      display:flex !important; background:#111 !important; border-top:1px solid #383838 !important;
    }
    body.ui-skin-blabax .mobile-bottom-nav .mb-item{ color:#aaa !important; }
    body.ui-skin-blabax .mobile-bottom-nav .mb-item.active{ color:#fff !important; }
  }

  /* A · Discord-like */
  body.ui-skin-discord{
    --panel-bg:#1e1b2e !important; --rail-bg:#15131f !important; --page-backdrop:#0f0d16 !important;
    --panel-border:#2e2a42 !important; --rail-border:#2e2a42 !important;
    --text-dark:#ece8f7 !important; --text-mute:#9b94b0 !important;
    --input-bg:#2a2540 !important; --topic-bg:#252038 !important; --topic-text:#e8e4f5 !important;
    --purple:#a78bfa;
    background:#0f0d16 !important; color:#ece8f7;
  }
  body.ui-skin-discord .app-shell{ background:#0f0d16 !important; border-color:#2e2a42 !important; }
  body.ui-skin-discord .rail{ background:#15131f !important; border-color:#2e2a42 !important; }
  body.ui-skin-discord .rail .ic{ color:#b9b2d1 !important; }
  body.ui-skin-discord .rail .ic:hover, body.ui-skin-discord .rail .ic.active{ background:rgba(167,139,250,0.18) !important; color:#c4b5fd !important; }
  body.ui-skin-discord .people,
  body.ui-skin-discord .room,
  body.ui-skin-discord .chat-main{ background:#1e1b2e !important; border-color:#2e2a42 !important; color:#ece8f7; }
  body.ui-skin-discord .people-head{ color:#a78bfa !important; }
  body.ui-skin-discord .search input{ background:#2a2540 !important; color:#ece8f7 !important; border-color:#3d3660 !important; }
  body.ui-skin-discord .section-label{ color:#a78bfa !important; letter-spacing:0.08em; }
  body.ui-skin-discord .person:hover{ background:#2a2540 !important; }
  body.ui-skin-discord .p-name{ color:#ece8f7; }
  body.ui-skin-discord .p-status{ color:#9b94b0; }
  body.ui-skin-discord .log{ background:#161322 !important; color:#ece8f7; }
  body.ui-skin-discord .line{ color:#ece8f7; }
  body.ui-skin-discord .line .txt{
    background:#2a2540 !important; border-radius:10px; padding:8px 12px;
    display:inline-block; max-width:min(100%, 520px); color:#ece8f7;
  }
  body.ui-skin-discord .line .who{ color:#c4b5fd; }
  body.ui-skin-discord .topic-bar{
    background:#252038 !important; color:#e8e4f5 !important; border-bottom:1px solid #3d3660 !important;
  }
  body.ui-skin-discord .topic-bar-text, body.ui-skin-discord #topic-text{ color:#e8e4f5 !important; }
  body.ui-skin-discord .composer{
    background:#1a1728 !important; border-top:1px solid #2e2a42 !important;
  }
  body.ui-skin-discord .composer input,
  body.ui-skin-discord #msg-input{
    background:#2a2540 !important; color:#ece8f7 !important; border-color:#3d3660 !important;
  }
  body.ui-skin-discord .comp-ic{ background:#2a2540; color:#c4b5fd; border-color:#3d3660; }
  body.ui-skin-discord .mobile-bottom-nav{ background:#15131f !important; border-color:#2e2a42 !important; }
  body.ui-skin-discord .os{ box-shadow:0 0 0 2px #1e1b2e; }

  /* B · Clean bubbles */
  body.ui-skin-clean{
    --panel-bg:#f7f8fa !important; --rail-bg:#ffffff !important; --page-backdrop:#e8eaef !important;
    --panel-border:#e5e7eb !important; --rail-border:#e5e7eb !important;
    --text-dark:#111827 !important; --text-mute:#6b7280 !important;
    --input-bg:#ffffff !important; --topic-bg:#ffffff !important; --topic-text:#374151 !important;
    --corner-radius:18px; --purple:#059669;
    background:#e8eaef !important; color:#111827;
  }
  body.ui-skin-clean .app-shell{ background:#fff !important; border-color:#e5e7eb !important; box-shadow:0 8px 30px rgba(0,0,0,0.06); }
  body.ui-skin-clean .rail{ background:#fff !important; width:56px; border-color:#e5e7eb !important; }
  body.ui-skin-clean .people{ background:#f7f8fa !important; border-right:1px solid #e5e7eb !important; }
  body.ui-skin-clean .room, body.ui-skin-clean .chat-main{ background:#efeae2 !important; }
  body.ui-skin-clean .log{ background:#efeae2 !important; }
  body.ui-skin-clean .section-label{ font-weight:600; color:#9ca3af !important; text-transform:none; letter-spacing:0.02em; }
  body.ui-skin-clean .line{ margin:6px 0; }
  body.ui-skin-clean .line .txt{
    background:#ffffff !important; border-radius:16px; padding:10px 14px;
    box-shadow:0 1px 2px rgba(0,0,0,0.08); display:inline-block; max-width:min(100%, 480px); color:#111827;
  }
  body.ui-skin-clean .line.mine .txt,
  body.ui-skin-clean .line[data-mine="1"] .txt{ background:#dcf8c6 !important; }
  body.ui-skin-clean .composer{
    background:#f0f2f5 !important; border-top:none !important; padding:12px 16px;
  }
  body.ui-skin-clean .composer input, body.ui-skin-clean #msg-input{
    border-radius:24px !important; border:none !important; background:#fff !important;
    padding:12px 18px !important; box-shadow:0 1px 2px rgba(0,0,0,0.06);
  }
  body.ui-skin-clean .topic-bar{
    background:#fff !important; border-bottom:1px solid #e5e7eb !important; color:#374151 !important;
  }
  body.ui-skin-clean .search input{ background:#fff !important; border-radius:20px; border-color:#e5e7eb; }

  /* C · Neon lounge */
  body.ui-skin-neon{
    --panel-bg:#160c28 !important; --rail-bg:#0c0618 !important; --page-backdrop:#07040f !important;
    --panel-border:rgba(232,121,249,0.35) !important; --rail-border:rgba(139,92,246,0.4) !important;
    --text-dark:#f5e9ff !important; --text-mute:#c4b5e0 !important;
    --input-bg:#281446 !important; --topic-text:#ffe8ff !important; --purple:#e879f9;
    background:#07040f !important; color:#f5e9ff;
  }
  body.ui-skin-neon .app-shell{
    background:#0c0618 !important;
    box-shadow:0 0 40px rgba(168,85,247,0.3), inset 0 0 0 1px rgba(232,121,249,0.25) !important;
    border-color:rgba(232,121,249,0.3) !important;
  }
  body.ui-skin-neon .rail{ background:#0c0618 !important; border-color:rgba(139,92,246,0.35) !important; }
  body.ui-skin-neon .rail .ic{ color:#e9d5ff !important; }
  body.ui-skin-neon .rail .ic:hover, body.ui-skin-neon .rail .ic.active{
    background:rgba(232,121,249,0.2) !important; color:#f0abfc !important;
    box-shadow:0 0 14px rgba(232,121,249,0.45);
  }
  body.ui-skin-neon .people,
  body.ui-skin-neon .room,
  body.ui-skin-neon .chat-main{
    background:rgba(18,10,36,0.95) !important; border-color:rgba(232,121,249,0.28) !important; color:#f5e9ff;
  }
  body.ui-skin-neon .log{
    background:radial-gradient(ellipse at top, #1a0b32 0%, #0a0614 75%) !important; color:#f5e9ff;
  }
  body.ui-skin-neon .section-label{ color:#e879f9 !important; text-shadow:0 0 12px rgba(232,121,249,0.5); }
  body.ui-skin-neon .person:hover{ background:rgba(232,121,249,0.1) !important; }
  body.ui-skin-neon .p-name{ color:#f5e9ff; }
  body.ui-skin-neon .search input{
    background:#281446 !important; color:#f5e9ff !important; border-color:rgba(232,121,249,0.35) !important;
  }
  body.ui-skin-neon .line .txt{
    background:rgba(48,24,80,0.85) !important; border:1px solid rgba(232,121,249,0.3);
    border-radius:14px; padding:9px 13px; display:inline-block; max-width:min(100%, 520px);
    box-shadow:0 0 16px rgba(139,92,246,0.15); color:#f5e9ff;
  }
  body.ui-skin-neon .topic-bar{
    background:linear-gradient(90deg, rgba(139,92,246,0.45), rgba(236,72,153,0.35)) !important;
    border-bottom:1px solid rgba(232,121,249,0.4) !important; color:#ffe8ff !important;
  }
  body.ui-skin-neon .topic-bar-text, body.ui-skin-neon #topic-text{ color:#ffe8ff !important; }
  body.ui-skin-neon .composer{
    background:rgba(20,10,40,0.98) !important; border-top:1px solid rgba(232,121,249,0.35) !important;
  }
  body.ui-skin-neon .composer input, body.ui-skin-neon #msg-input{
    background:#281446 !important; color:#f5e9ff !important;
    border:1px solid rgba(232,121,249,0.4) !important;
    box-shadow:0 0 12px rgba(139,92,246,0.2);
  }
  body.ui-skin-neon .comp-ic{ border-color:rgba(232,121,249,0.35); color:#f0abfc; background:rgba(40,20,70,0.8); }
  body.ui-skin-neon .mobile-bottom-nav{ background:#0c0618 !important; border-color:rgba(232,121,249,0.3) !important; }

  /* ── Discord / Neon: readable black text, modals, popups, admin lists ── */
  /* Default bubble text on dark skins */
  body.ui-skin-discord .line .txt,
  body.dark-mode .line .txt{ color:#ece8f7; }
  body.ui-skin-neon .line .txt{ color:#f5e9ff; }
  /* Override near-black inline sender colors (default #232037 / pure black) */
  body.ui-skin-discord .line .txt[style*="color:#000"],
  body.ui-skin-discord .line .txt[style*="color: #000"],
  body.ui-skin-discord .line .txt[style*="color:#000000"],
  body.ui-skin-discord .line .txt[style*="color:#232037"],
  body.ui-skin-discord .line .txt[style*="color: #232037"],
  body.ui-skin-discord .line .txt[style*="color:black"],
  body.ui-skin-neon .line .txt[style*="color:#000"],
  body.ui-skin-neon .line .txt[style*="color: #000"],
  body.ui-skin-neon .line .txt[style*="color:#000000"],
  body.ui-skin-neon .line .txt[style*="color:#232037"],
  body.ui-skin-neon .line .txt[style*="color: #232037"],
  body.ui-skin-neon .line .txt[style*="color:black"],
  body.dark-mode .line .txt[style*="color:#000"],
  body.dark-mode .line .txt[style*="color:#232037"],
  body.dark-mode .line .txt[style*="color: #232037"]{
    color:#ece8f7 !important;
  }
  body.ui-skin-neon .line .txt[style*="color:#000"],
  body.ui-skin-neon .line .txt[style*="color:#232037"],
  body.ui-skin-neon .line .txt[style*="color: #232037"]{
    color:#f5e9ff !important;
  }
  body.ui-skin-discord .line .who{ color:#c4b5fd !important; }
  body.ui-skin-neon .line .who{ color:#f0abfc !important; }
  body.ui-skin-discord .join-note,
  body.ui-skin-neon .join-note,
  body.ui-skin-discord .join-note.mod-action-note,
  body.ui-skin-neon .join-note.mod-action-note{ color:#a9a3bc !important; }
  body.ui-skin-discord #topic-label,
  body.ui-skin-neon #topic-label{ color:#e8e4f5 !important; }
  body.ui-skin-discord .ts,
  body.ui-skin-neon .ts{ color:#8b869e !important; }

  /* Generic modals (Room Control, Settings, Friends, lists, etc.) */
  body.ui-skin-discord .hhb-modal-card,
  body.ui-skin-neon .hhb-modal-card,
  body.dark-mode .hhb-modal-card{
    background:#1c1533 !important;
    color:#ece8f7 !important;
    border:1px solid #3d3660 !important;
    box-shadow:0 30px 80px rgba(0,0,0,0.55) !important;
  }
  body.ui-skin-neon .hhb-modal-card{
    background:#160a2c !important;
    border-color:rgba(232,121,249,0.35) !important;
    color:#f5e9ff !important;
  }
  body.ui-skin-discord .hhb-modal-head,
  body.ui-skin-neon .hhb-modal-head,
  body.dark-mode .hhb-modal-head{
    border-bottom-color:#3d3660 !important;
  }
  body.ui-skin-discord .hhb-modal-title,
  body.ui-skin-neon .hhb-modal-title,
  body.dark-mode .hhb-modal-title,
  body.ui-skin-discord .hhb-modal-body,
  body.ui-skin-neon .hhb-modal-body,
  body.dark-mode .hhb-modal-body{
    color:#ece8f7 !important;
  }
  body.ui-skin-neon .hhb-modal-title,
  body.ui-skin-neon .hhb-modal-body{ color:#f5e9ff !important; }
  body.ui-skin-discord .hhb-modal-close,
  body.ui-skin-neon .hhb-modal-close,
  body.dark-mode .hhb-modal-close{ color:#a9a3bc !important; }

  /* Inputs / selects / buttons inside themed modals */
  body.ui-skin-discord .hhb-modal-body input,
  body.ui-skin-discord .hhb-modal-body select,
  body.ui-skin-discord .hhb-modal-body textarea,
  body.ui-skin-neon .hhb-modal-body input,
  body.ui-skin-neon .hhb-modal-body select,
  body.ui-skin-neon .hhb-modal-body textarea,
  body.dark-mode .hhb-modal-body input,
  body.dark-mode .hhb-modal-body select,
  body.dark-mode .hhb-modal-body textarea{
    background:#2a2540 !important;
    color:#ece8f7 !important;
    border-color:#3d3660 !important;
  }
  body.ui-skin-neon .hhb-modal-body input,
  body.ui-skin-neon .hhb-modal-body select,
  body.ui-skin-neon .hhb-modal-body textarea{
    background:#281446 !important;
    color:#f5e9ff !important;
    border-color:rgba(232,121,249,0.35) !important;
  }
  body.ui-skin-discord .hhb-modal-body button,
  body.ui-skin-neon .hhb-modal-body button,
  body.dark-mode .hhb-modal-body button{
    border-color:#3d3660 !important;
  }
  /* Force common hardcoded dark text inside modal bodies to light ink */
  body.ui-skin-discord .hhb-modal-body [style*="color:#232037"],
  body.ui-skin-discord .hhb-modal-body [style*="color: #232037"],
  body.ui-skin-discord .hhb-modal-body [style*="color:#000"],
  body.ui-skin-discord .hhb-modal-body [style*="color:#111"],
  body.ui-skin-neon .hhb-modal-body [style*="color:#232037"],
  body.ui-skin-neon .hhb-modal-body [style*="color: #232037"],
  body.ui-skin-neon .hhb-modal-body [style*="color:#000"],
  body.dark-mode .hhb-modal-body [style*="color:#232037"],
  body.dark-mode .hhb-modal-body [style*="color: #232037"]{
    color:#ece8f7 !important;
  }
  body.ui-skin-discord .hhb-modal-body [style*="background:#fff"],
  body.ui-skin-discord .hhb-modal-body [style*="background: #fff"],
  body.ui-skin-discord .hhb-modal-body [style*="background:#ffffff"],
  body.ui-skin-discord .hhb-modal-body [style*="background:#f7f6fb"],
  body.ui-skin-discord .hhb-modal-body [style*="background:#f4f2fa"],
  body.ui-skin-neon .hhb-modal-body [style*="background:#fff"],
  body.ui-skin-neon .hhb-modal-body [style*="background: #fff"],
  body.ui-skin-neon .hhb-modal-body [style*="background:#ffffff"],
  body.ui-skin-neon .hhb-modal-body [style*="background:#f7f6fb"],
  body.ui-skin-neon .hhb-modal-body [style*="background:#f4f2fa"],
  body.dark-mode .hhb-modal-body [style*="background:#fff"],
  body.dark-mode .hhb-modal-body [style*="background:#f7f6fb"],
  body.dark-mode .hhb-modal-body [style*="background:#f4f2fa"]{
    background:#2a2540 !important;
    color:#ece8f7 !important;
    border-color:#3d3660 !important;
  }
  body.ui-skin-discord .hhb-modal-body [style*="border:1px solid #e7e3f3"],
  body.ui-skin-neon .hhb-modal-body [style*="border:1px solid #e7e3f3"],
  body.dark-mode .hhb-modal-body [style*="border:1px solid #e7e3f3"]{
    border-color:#3d3660 !important;
  }
  body.ui-skin-discord .hhb-modal-body [style*="color:#8b869e"],
  body.ui-skin-neon .hhb-modal-body [style*="color:#8b869e"],
  body.dark-mode .hhb-modal-body [style*="color:#8b869e"]{
    color:#a9a3bc !important;
  }

  /* Nick popup + people lists */
  body.ui-skin-discord .nick-popup,
  body.ui-skin-neon .nick-popup{
    background:#1c1533 !important;
    color:#ece8f7 !important;
    border-color:#3d3660 !important;
  }
  body.ui-skin-neon .nick-popup{
    background:#160a2c !important;
    border-color:rgba(232,121,249,0.35) !important;
    color:#f5e9ff !important;
  }
  body.ui-skin-discord .nick-popup .np-btn,
  body.ui-skin-neon .nick-popup .np-btn{
    background:#2a2540 !important;
    color:#ece8f7 !important;
    border-color:#3d3660 !important;
  }
  body.ui-skin-discord .nick-popup .np-stats,
  body.ui-skin-neon .nick-popup .np-stats{
    color:#a9a3bc !important;
    border-top-color:#3d3660 !important;
  }
  body.ui-skin-discord .mod-menu,
  body.ui-skin-neon .mod-menu{
    background:#1c1533 !important;
    border-color:#3d3660 !important;
  }
  body.ui-skin-discord .mod-menu .item,
  body.ui-skin-neon .mod-menu .item{
    color:#ece8f7 !important;
  }
  body.ui-skin-discord .mod-menu .item:hover,
  body.ui-skin-neon .mod-menu .item:hover{
    background:#2a2540 !important;
  }
  body.ui-skin-discord .cmd-autocomplete,
  body.ui-skin-neon .cmd-autocomplete{
    background:#1c1533 !important;
    border-color:#3d3660 !important;
    color:#ece8f7 !important;
  }
  body.ui-skin-discord .cmd-autocomplete .cmd-row:hover,
  body.ui-skin-discord .cmd-autocomplete .cmd-row.active,
  body.ui-skin-neon .cmd-autocomplete .cmd-row:hover,
  body.ui-skin-neon .cmd-autocomplete .cmd-row.active{
    background:#2a2540 !important;
  }

  /* PM modal card */
  body.ui-skin-discord #pm-modal-overlay .pm-modal-card,
  body.ui-skin-neon #pm-modal-overlay .pm-modal-card{
    background:#1c1533 !important;
    color:#ece8f7 !important;
    border:1px solid #3d3660;
  }
  body.ui-skin-neon #pm-modal-overlay .pm-modal-card{
    background:#160a2c !important;
    border-color:rgba(232,121,249,0.35);
    color:#f5e9ff !important;
  }
  body.ui-skin-discord #pm-modal-overlay .pm-modal-card [style*="border-bottom:1px solid #e7e3f3"],
  body.ui-skin-neon #pm-modal-overlay .pm-modal-card [style*="border-bottom:1px solid #e7e3f3"]{
    border-bottom-color:#3d3660 !important;
  }
  body.ui-skin-discord #pm-modal-log,
  body.ui-skin-neon #pm-modal-log{
    background:#161322 !important;
  }
  body.ui-skin-neon #pm-modal-log{
    background:#0a0614 !important;
  }

  /* D · Compact power-user */
  body.ui-skin-compact{
    --panel-bg:#f8f7fc; --corner-radius:6px;
  }
  body.ui-skin-compact .rail{ width:52px !important; }
  body.ui-skin-compact .rail .ic{ width:36px; height:36px; font-size:16px; margin:2px auto; }
  body.ui-skin-compact .people{ min-width:180px; }
  body.ui-skin-compact .people-head{ padding:8px 10px 4px; font-size:10px; }
  body.ui-skin-compact .person{ padding:4px 8px; gap:6px; }
  body.ui-skin-compact .person .av-wrap{ width:28px; height:28px; }
  body.ui-skin-compact .person .av{ width:28px; height:28px; font-size:12px; }
  body.ui-skin-compact .section-label{ padding:4px 10px; font-size:10px; }
  body.ui-skin-compact .topic-bar{ padding:4px 10px; font-size:12px; }
  body.ui-skin-compact .composer{ padding:6px 10px; gap:6px; }
  body.ui-skin-compact .composer input, body.ui-skin-compact #msg-input{ padding:8px 12px; font-size:13px; }
  body.ui-skin-compact .line{ padding:2px 10px; font-size:13px; }
  body.ui-skin-compact .log{ font-size:13px; }
  body.ui-skin-compact .line .txt{ padding:2px 0; }

  /* E · WhatsApp (mobile-style) */
  body.ui-skin-whatsapp{
    --panel-bg:#efeae2 !important; --rail-bg:#ffffff !important; --page-backdrop:#d1d7db !important;
    --panel-border:#d1d7db !important; --rail-border:#d1d7db !important;
    --text-dark:#111b21 !important; --text-mute:#667781 !important;
    --input-bg:#ffffff !important; --topic-bg:#075e54 !important; --topic-text:#ffffff !important;
    --corner-radius:12px; --purple:#25d366;
    background:#d1d7db !important; color:#111b21;
  }
  body.ui-skin-whatsapp .app-shell{
    background:#fff !important; border-color:#d1d7db !important;
    box-shadow:0 4px 24px rgba(0,0,0,0.12);
    border-radius:16px !important; overflow:hidden;
  }
  body.ui-skin-whatsapp .room,
  body.ui-skin-whatsapp .chat-main{
    border-radius:0 0 16px 16px;
  }
  @media (max-width:768px){
    body.ui-skin-whatsapp .app-shell{
      border-radius:0 !important; /* full-bleed on phone chrome */
    }
    body.ui-skin-whatsapp .room{
      border-radius:12px 12px 0 0 !important;
      overflow:hidden;
    }
    body.ui-skin-whatsapp #wa-topbar{
      border-radius:12px 12px 0 0;
    }
    body.ui-skin-whatsapp .log{
      border-radius:0;
    }
  }
  body.ui-skin-whatsapp .rail{ background:#f0f2f5 !important; width:56px; border-color:#d1d7db !important; }
  body.ui-skin-whatsapp .rail .ic{ color:#54656f !important; }
  body.ui-skin-whatsapp .rail .ic:hover, body.ui-skin-whatsapp .rail .ic.active{ background:rgba(37,211,102,0.15) !important; color:#075e54 !important; }
  body.ui-skin-whatsapp .people{ background:#ffffff !important; border-right:1px solid #e9edef !important; }
  body.ui-skin-whatsapp .people-head{ color:#075e54 !important; }
  body.ui-skin-whatsapp .search input{ background:#f0f2f5 !important; border-radius:8px; border:none !important; color:#111b21; }
  body.ui-skin-whatsapp .section-label{ font-weight:600; color:#667781 !important; text-transform:none; letter-spacing:0.02em; }
  body.ui-skin-whatsapp .person:hover{ background:#f5f6f6 !important; }
  body.ui-skin-whatsapp .p-name{ color:#111b21; }
  body.ui-skin-whatsapp .p-status{ color:#667781; }
  body.ui-skin-whatsapp .room,
  body.ui-skin-whatsapp .chat-main,
  body.ui-skin-whatsapp .log{
    background:#efeae2 !important;
    background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4cdc4' fill-opacity='0.35'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  }
  /* Stable WhatsApp doodle wallpaper origin: all chat surfaces start the pattern
     at the same top-left point so the wallpaper does not jump when the nick row
     or message height changes. */
  body.ui-skin-whatsapp .room,
  body.ui-skin-whatsapp .chat-main,
  body.ui-skin-whatsapp .log{
    background-position:0 0 !important;
    background-size:60px 60px !important;
    background-repeat:repeat !important;
    background-attachment:scroll !important;
  }
  body.ui-skin-whatsapp .line{
    margin:2px 6px; color:#111b21;
    display:flex; flex-direction:column; align-items:flex-start; /* all chat on the left */
  }
  body.ui-skin-whatsapp .line.mine,
  body.ui-skin-whatsapp .line[data-mine="1"]{
    align-items:flex-start; /* right chat moved to left */
  }
  /* WhatsApp-style: small avatar + bubble column */
  body.ui-skin-whatsapp .line .line-row{
    display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center;
    gap:2px; max-width:min(92%, 520px); width:auto;
  }
  body.ui-skin-whatsapp .line .wa-msg-avatar{
    width:28px; height:28px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:800; font-size:11px;
    overflow:hidden; background-size:cover; background-position:center;
    border:1px solid rgba(0,0,0,0.08);
    margin-bottom:2px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    user-select:none;
  }
  body.ui-skin-whatsapp .line .wa-msg-col{
    display:flex; flex-direction:column; align-items:flex-start;
    gap:2px; min-width:0; max-width:calc(100% - 34px);
  }
  body.ui-skin-whatsapp .line .who{
    display:block !important; visibility:visible !important;
    color:var(--wa-nick-color,#075e54) !important; font-weight:700 !important; font-size:14px !important;
    margin:0 0 1px 0; order:0; line-height:1.15;
  }
  body.ui-skin-whatsapp .line .wa-nick{
    color:var(--wa-nick-color,#075e54) !important; font-weight:700 !important;
  }
  /* WhatsApp nicknames are clean: the sender menu is opened from the avatar. */
  body.ui-skin-whatsapp .line .who .nick-mirror-arrow{
    display:none !important;
  }
  /* WhatsApp avatar shares the universal centerline with nick/emoji/sticker/doodle. */
  body.ui-skin-whatsapp .line .wa-msg-avatar{
    display:flex !important; width:28px !important; height:28px !important;
    min-width:28px !important; border-radius:50% !important;
    font-size:12px !important; font-weight:800 !important;
    margin:0 2px 0 0 !important;
    align-self:center !important;
  }
  body.ui-skin-whatsapp .line .wa-msg-col{
    display:block; min-width:0; max-width:none !important; flex:1 1 auto;
    align-self:center !important; padding-top:0 !important;
  }
  body.ui-skin-whatsapp .line .wa-msg-content-row{
    display:flex; align-items:flex-end; gap:4px; min-width:0; max-width:100%;
  }
  body.ui-skin-whatsapp .line .wa-msg-content-row .msg-main{
    min-width:0; max-width:100%;
  }
  body.ui-skin-whatsapp .line .line-row{
    flex-direction:row !important; align-items:center !important;
    flex-wrap:nowrap !important; gap:2px !important;
  }
  /* WhatsApp mobile: plain chat text, no bubble/card around each message. */
  body.ui-skin-whatsapp .line .txt{
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    padding:0 !important;
    box-shadow:none !important;
    display:inline !important; max-width:none; color:#111b21;
  }
  body.ui-skin-whatsapp .line.mine .txt,
  body.ui-skin-whatsapp .line[data-mine="1"] .txt{
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    padding:0 !important;
  }
  body.ui-skin-whatsapp .line .ts{
    align-self:flex-end; margin-left:0; padding-left:0; font-size:11px; color:#667781;
  }
  body.ui-skin-whatsapp .line .msg-main{ display:inline-block; max-width:100%; }
  /* Nick + message are one inline flow: short messages stay beside the nick, and
     wrapped lines restart under the nickname's first character, not under the text. */
  body.ui-skin-whatsapp .line .wa-inline-message{
    display:block !important; width:100%; min-width:0;
    line-height:1.35;
    overflow-wrap:anywhere; word-break:normal;
  }
  body.ui-skin-whatsapp .line .wa-inline-message .who{
    display:inline !important; margin:0 !important; line-height:inherit !important;
    vertical-align:baseline;
  }
  body.ui-skin-whatsapp .line .wa-inline-message .who .wa-nick{
    display:inline !important;
  }
  body.ui-skin-whatsapp .line .wa-inline-message .msg-main{
    display:inline !important; max-width:none !important; min-width:0;
    vertical-align:baseline;
  }
  body.ui-skin-whatsapp .line .wa-inline-message .msg-main .txt{
    /* Compact WhatsApp bubble: stay in the same inline flow as the nick,
       but never create a large/wide block or collide with the next chat row. */
    display:inline !important;
    width:auto !important; max-width:none !important; min-width:0 !important;
    box-sizing:border-box !important;
    padding:0 !important;
    margin:0 !important;
    line-height:1.35 !important;
    vertical-align:baseline !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    box-decoration-break:clone; -webkit-box-decoration-break:clone;
    white-space:normal; overflow-wrap:anywhere; word-break:normal;
  }
  /* The compact inline bubble must not inherit the larger block-bubble sizing
     used by the other skins. */
  body.ui-skin-whatsapp .line .wa-inline-message .msg-main{
    display:inline !important; width:auto !important; max-width:none !important;
    min-width:0 !important; margin:0 0 0 0.35em !important; padding:0 !important;
    line-height:1.35 !important;
  }
  body.ui-skin-whatsapp .line .wa-inline-message{
    line-height:1.35 !important;
    vertical-align:baseline !important;
  }
  body.ui-skin-whatsapp .line .wa-inline-message .reaction-pills{
    display:inline !important;
  }
  body.ui-skin-whatsapp .line .wa-inline-message + *{ margin-top:0; }
  /* Hide topic + reactions completely on WhatsApp skin */
  body.ui-skin-whatsapp #topic-bar,
  body.ui-skin-whatsapp .topic-bar,
  body.ui-skin-whatsapp #topic-label,
  body.ui-skin-whatsapp .topic-bar-text,
  body.ui-skin-whatsapp .topic-bar-actions,
  body.ui-skin-whatsapp #topic-reaction-pills,
  body.ui-skin-whatsapp .topic-action-btn{
    display:none !important;
  }
  /* Static (sticky) top bar for WhatsApp */
  #wa-topbar{
    display:none;
    position:sticky; top:0; z-index:50;
    background:#075e54; color:#fff;
    padding:8px 10px; min-height:52px;
    align-items:center; justify-content:flex-end; gap:4px;
    flex-shrink:0; width:calc(100% + 1px); box-sizing:border-box; margin-right:-1px;
    border-radius:12px 12px 0 0;
    box-shadow:0 1px 0 rgba(0,0,0,0.12);
  }
  body.ui-skin-whatsapp #wa-topbar{ display:flex !important; }
  body.ui-skin-whatsapp #wa-install-banner{
    display:none; align-items:center; gap:9px;
    width:100%; box-sizing:border-box; padding:8px 10px;
    background:#dcf8d1; color:#111b21; border-bottom:1px solid #c6e8bd;
    font-size:12px; line-height:1.25; flex-shrink:0;
  }
  body.ui-skin-whatsapp #wa-install-banner.show{ display:flex !important; }
  body.ui-skin-whatsapp #wa-install-banner .wa-install-copy{ flex:1; min-width:0; }
  body.ui-skin-whatsapp #wa-install-banner .wa-install-title{
    font-weight:800; color:#075e54; margin-bottom:1px;
  }
  body.ui-skin-whatsapp #wa-install-banner button{
    border:0; border-radius:999px; padding:6px 11px;
    background:#075e54; color:#fff; font:inherit; font-weight:800;
    cursor:pointer; white-space:nowrap;
  }
  body.ui-skin-whatsapp #wa-topbar .wa-room-letter{
    width:34px; height:34px; border-radius:50%; flex-shrink:0;
    background:#128c7e;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:14px; color:#fff;
    border:2px solid rgba(255,255,255,0.35);
  }
  body.ui-skin-whatsapp #wa-topbar .wa-topbar-spacer{ flex:1; min-width:4px; }
  body.ui-skin-whatsapp #mb-tab-more{ display:none !important; }
  body.ui-skin-whatsapp #wa-topbar .wa-header-btn{
    display:flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%;
    color:#e8f5e9; cursor:pointer; flex-shrink:0;
    background:transparent; font-size:16px;
    position:relative; border:none;
  }
  body.ui-skin-whatsapp #wa-topbar .wa-header-btn:hover{ background:rgba(255,255,255,0.15); }
  /* Mic stays hidden until in a call — do not force display:flex on all buttons */
  body.ui-skin-whatsapp #wa-header-mic{ display:none !important; }
  body.ui-skin-whatsapp #wa-header-mic.wa-mic-on{ display:flex !important; }
  body.ui-skin-whatsapp #wa-header-call.in-call{
    background:#25d366 !important; color:#fff !important;
    box-shadow:0 0 0 2px rgba(37,211,102,0.45);
  }
  body.ui-skin-whatsapp #wa-topbar .wa-header-btn.recording{
    background:#dc2626 !important; color:#fff !important;
    font-size:11px; font-weight:800; width:auto; min-width:34px; padding:0 8px; border-radius:18px;
  }
  body.ui-skin-whatsapp #wa-topbar .wa-header-btn.muted{ background:#b91c1c !important; color:#fff !important; }
  body.ui-skin-whatsapp #wa-topbar .wa-badge{
    position:absolute; top:-2px; right:-2px; min-width:14px; height:14px; padding:0 3px;
    border-radius:999px; background:#e14545; color:#fff; font-size:9px; font-weight:800;
    display:none; align-items:center; justify-content:center;
  }
  body.ui-skin-whatsapp #wa-topbar .wa-badge.show{ display:flex; }
  /* Compact bottom nav on WhatsApp */
  body.ui-skin-whatsapp .mobile-bottom-nav{
    height:44px !important;
    padding-top:2px;
    padding-bottom:calc(2px + env(safe-area-inset-bottom)) !important;
    box-sizing:border-box !important;
  }
  body.ui-skin-whatsapp .mobile-bottom-nav .mb-item .mb-icon{
    width:28px !important; height:28px !important; border-radius:8px !important;
  }
  body.ui-skin-whatsapp .mobile-bottom-nav .mb-item .mb-icon svg{ width:18px !important; height:18px !important; }
  body.ui-skin-whatsapp .mobile-bottom-nav .mb-item.active .mb-icon{
    background:#075e54 !important; box-shadow:none !important;
  }
  @media (max-width:768px){
    body.ui-skin-whatsapp{
      padding-top:0 !important; padding-bottom:calc(44px + env(safe-area-inset-bottom, 0px)) !important;
      margin:0 !important; overflow:hidden !important;
    }
    body.ui-skin-whatsapp .app-shell{
      margin:0 !important; width:100vw !important; max-width:none !important;
      height:calc(var(--vh, 1vh) * 100 - 44px - env(safe-area-inset-bottom, 0px)) !important;
      min-height:0 !important; box-shadow:none !important; border:0 !important;
    }
    body.ui-skin-whatsapp .room{
      margin:0 !important; padding-top:0 !important;
      border-radius:0 !important; height:100% !important; min-height:0 !important;
    }
    body.ui-skin-whatsapp #wa-topbar{
      margin:0 !important; border-radius:12px 12px 0 0 !important;
      min-height:48px !important; padding:5px 8px !important;
      width:100% !important; box-sizing:border-box !important;
      align-self:stretch !important;
    }
    body.ui-skin-whatsapp .log{
      padding:5px 4px !important; margin:0 !important;
      border-radius:0 !important;
    }
    body.ui-skin-whatsapp #clear-my-view-btn{ display:none !important; }
    body.ui-skin-whatsapp .line{ margin:2px 4px !important; padding:0 !important; }
    body.ui-skin-whatsapp .line .txt{ padding:1px 5px !important; border-radius:8px !important; line-height:1.35 !important; }
    body.ui-skin-whatsapp .line .who{ font-size:14px !important; line-height:1.15 !important; }
    body.ui-skin-whatsapp .line .line-row{ gap:2px !important; }
    body.ui-skin-whatsapp .line .wa-msg-col{ max-width:calc(100% - 30px) !important; }
    body.ui-skin-whatsapp .line .wa-msg-content-row{ gap:3px !important; }
  }
  /* Hide register chip after it's been shown a while (also forced by JS) */
  body.ui-skin-whatsapp #guest-register-btn.wa-reg-hide{ display:none !important; }
  /* Desktop-only WA composer chrome (mobile overrides live in the max-width:768 block) */
  @media (min-width: 769px){
    body.ui-skin-whatsapp .composer{
      background:#f0f2f5 !important; border-top:none !important; padding:10px 12px;
    }
    body.ui-skin-whatsapp .composer input, body.ui-skin-whatsapp #msg-input{
      border-radius:24px !important; border:none !important; background:#fff !important;
      padding:10px 16px !important; box-shadow:none; color:#111b21 !important;
    }
    body.ui-skin-whatsapp .emoji-toggle-row{
      display:flex; align-items:center; gap:4px; flex-wrap:wrap;
    }
    body.ui-skin-whatsapp #emoji-toggle,
    body.ui-skin-whatsapp #doodle-btn{
      width:36px; height:36px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      background:#fff !important; border:1px solid #e9edef !important;
      color:#54656f !important; box-shadow:none !important;
    }
  }
  body.ui-skin-whatsapp .send-btn{
    background:#25d366 !important; color:#fff !important;
    border-radius:50% !important; width:42px; height:42px; min-width:42px;
    box-shadow:0 2px 6px rgba(37,211,102,0.35);
  }
  body.ui-skin-whatsapp .comp-ic{ background:#fff; color:#54656f; border-color:#e9edef; }
  body.ui-skin-whatsapp .mobile-bottom-nav{ background:#f0f2f5 !important; border-color:#d1d7db !important; }
  body.ui-skin-whatsapp .os{ box-shadow:0 0 0 2px #efeae2; }
  body.ui-skin-whatsapp .ts{ color:#667781 !important; }
  /* WA topbar is injected by placeWhatsAppMobileLayout */

  /* People list: never let name column collapse under avatar / badges */
  .person .p-info{ flex:1 1 auto; min-width:0; overflow:hidden; }
  .person .p-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .person .badge-icon, .person .level-icon, .person .mod-dots{ flex-shrink:0; }

  /* ---- Mobile skin overrides ----
     On mobile the visible composer strip is .above-composer (composer itself is
     transparent). Hover/selected lines force a light #f4f2fa. Bottom nav is separate.
     Without these, skins looked “desktop-only”. */
  @media (max-width: 768px){
    /* Discord */
    body.ui-skin-discord .above-composer{
      background:#1a1728 !important; border-top-color:#2e2a42 !important;
    }
    body.ui-skin-discord .composer{ background:transparent !important; border-top:none !important; }
    body.ui-skin-discord .composer #msg-input,
    body.ui-skin-discord .composer input{
      background:#2a2540 !important; color:#ece8f7 !important; border-color:#3d3660 !important;
    }
    body.ui-skin-discord .composer-plus-btn{
      background:#2a2540 !important; color:#c4b5fd !important;
    }
    body.ui-skin-discord .line:hover,
    body.ui-skin-discord .line.selected{ background:#2a2540 !important; }
    body.ui-skin-discord .people{ background:#1e1b2e !important; }
    body.ui-skin-discord .room,
    body.ui-skin-discord .chat-main,
    body.ui-skin-discord .log{ background:#161322 !important; }
    body.ui-skin-discord .topic-bar{ background:#252038 !important; color:#e8e4f5 !important; }
    body.ui-skin-discord .mobile-bottom-nav{
      background:#15131f !important; border-top-color:#2e2a42 !important;
    }
    body.ui-skin-discord .mobile-bottom-nav .mb-item{ color:#b9b2d1 !important; }
    body.ui-skin-discord .mobile-bottom-nav .mb-item.active{ color:#c4b5fd !important; }
    body.ui-skin-discord .mb-icon{ color:inherit; }

    /* Clean */
    body.ui-skin-clean .above-composer{
      background:#f0f2f5 !important; border-top:none !important;
    }
    body.ui-skin-clean .composer{ background:transparent !important; }
    body.ui-skin-clean .composer #msg-input,
    body.ui-skin-clean .composer input{
      background:#fff !important; border:none !important; border-radius:24px !important;
      box-shadow:0 1px 2px rgba(0,0,0,0.06);
    }
    body.ui-skin-clean .composer-plus-btn{
      background:#fff !important; color:#059669 !important;
    }
    body.ui-skin-clean .line:hover,
    body.ui-skin-clean .line.selected{ background:rgba(255,255,255,0.55) !important; }
    body.ui-skin-clean .people{ background:#f7f8fa !important; }
    body.ui-skin-clean .room,
    body.ui-skin-clean .chat-main,
    body.ui-skin-clean .log{ background:#efeae2 !important; }
    body.ui-skin-clean .topic-bar{ background:#fff !important; border-bottom:1px solid #e5e7eb !important; }
    body.ui-skin-clean .mobile-bottom-nav{
      background:#fff !important; border-top-color:#e5e7eb !important;
    }
    body.ui-skin-clean .mobile-bottom-nav .mb-item.active{ color:#059669 !important; }

    /* Neon */
    body.ui-skin-neon .above-composer{
      background:rgba(20,10,40,0.98) !important;
      border-top:1px solid rgba(232,121,249,0.35) !important;
    }
    body.ui-skin-neon .composer{ background:transparent !important; }
    body.ui-skin-neon .composer #msg-input,
    body.ui-skin-neon .composer input{
      background:#281446 !important; color:#f5e9ff !important;
      border:1px solid rgba(232,121,249,0.4) !important;
    }
    body.ui-skin-neon .composer-plus-btn{
      background:rgba(40,20,70,0.9) !important; color:#f0abfc !important;
      box-shadow:0 0 10px rgba(232,121,249,0.25);
    }
    body.ui-skin-neon .line:hover,
    body.ui-skin-neon .line.selected{ background:rgba(232,121,249,0.12) !important; }
    body.ui-skin-neon .people{ background:rgba(18,10,36,0.95) !important; }
    body.ui-skin-neon .room,
    body.ui-skin-neon .chat-main{ background:rgba(18,10,36,0.95) !important; }
    body.ui-skin-neon .log{
      background:radial-gradient(ellipse at top, #1a0b32 0%, #0a0614 75%) !important;
    }
    body.ui-skin-neon .topic-bar{
      background:linear-gradient(90deg, rgba(139,92,246,0.45), rgba(236,72,153,0.35)) !important;
      color:#ffe8ff !important;
    }
    body.ui-skin-neon .mobile-bottom-nav{
      background:#0c0618 !important; border-top-color:rgba(232,121,249,0.3) !important;
    }
    body.ui-skin-neon .mobile-bottom-nav .mb-item{ color:#e9d5ff !important; }
    body.ui-skin-neon .mobile-bottom-nav .mb-item.active{ color:#f0abfc !important; }

    /* Compact — keep density on mobile composer strip */
    body.ui-skin-compact .above-composer{ padding:4px 8px; gap:4px; }
    body.ui-skin-compact .composer-plus-btn{ width:30px; height:30px; min-width:30px; font-size:16px; }
    body.ui-skin-compact .send-btn{ width:30px; height:30px; min-width:30px; }

    /* WhatsApp — mobile: full-width input, emoji flush left, no gap above bottom nav */
    body.ui-skin-whatsapp .above-composer{
      background:#f0f2f5 !important; border-top:none !important;
      padding:4px 6px 4px !important; gap:4px !important;
      margin:0 !important;
      /* sit flush against the fixed bottom nav */
      margin-bottom:0 !important;
      padding-bottom:4px !important;
    }
    body.ui-skin-whatsapp .composer{
      background:transparent !important;
      margin:0 !important; padding:0 !important; gap:4px !important;
      width:100% !important; flex:1 1 auto !important; min-width:0 !important;
    }
    body.ui-skin-whatsapp .composer #msg-input,
    body.ui-skin-whatsapp .composer input{
      background:#fff !important; border:none !important; border-radius:24px !important;
      color:#111b21 !important; box-shadow:none !important;
      /* room for emoji (24) + doodle (24) + small gap — no dead space on the left */
      padding:8px 12px 8px 52px !important;
      margin:0 !important;
      width:100% !important; min-width:0 !important; flex:1 1 auto !important;
      box-sizing:border-box !important;
    }
    /* Emoji + doodle flush to the left edge of the input pill (Firefox-safe) */
    body.ui-skin-whatsapp .composer #emoji-toggle{
      left:0 !important; top:50% !important; transform:translateY(-50%) !important;
      width:24px !important; height:24px !important; font-size:16px !important;
      margin:0 !important; padding:0 !important;
      background:transparent !important; border:none !important; border-radius:50% !important;
      box-shadow:none !important; color:#54656f !important;
    }
    body.ui-skin-whatsapp .composer #doodle-btn{
      left:24px !important; top:50% !important; transform:translateY(-50%) !important;
      width:24px !important; height:24px !important; font-size:14px !important;
      margin:0 !important; padding:0 !important;
      background:transparent !important; border:none !important; border-radius:50% !important;
      box-shadow:none !important; color:#54656f !important;
    }
    /* Kill leftover spacing that creates a gap above the bottom bar (esp. Firefox) */
    body.ui-skin-whatsapp{
      padding-bottom:calc(44px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.ui-skin-whatsapp .room,
    body.ui-skin-whatsapp .chat-main{
      padding-bottom:0 !important; margin-bottom:0 !important;
    }
    body.ui-skin-whatsapp .mobile-bottom-nav{
      height:44px !important;
      margin:0 !important;
      padding-top:0 !important;
      padding-bottom:env(safe-area-inset-bottom, 0px) !important;
      box-sizing:content-box !important;
    }
    body.ui-skin-whatsapp .composer-plus-wrap{
      bottom:calc(44px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.ui-skin-whatsapp #scroll-to-bottom-btn{
      /* Now anchored off .above-composer itself (bottom:100%, see markup) instead of a
         room-relative px offset, so it stays flush above the composer regardless of the
         WhatsApp skin's own bottom-nav/composer heights — no magic number to keep in sync. */
      bottom:100% !important; margin-bottom:10px !important;
    }
    body.ui-skin-whatsapp .composer-plus-btn{
      background:#fff !important; color:#075e54 !important;
    }
    /* Keep enter/send — green circle like WA mic/send */
    body.ui-skin-whatsapp .send-btn{
      background:#25d366 !important; color:#fff !important;
      border-radius:50% !important; width:42px !important; height:42px !important;
      min-width:42px !important; box-shadow:0 2px 6px rgba(37,211,102,0.35) !important;
      font-size:16px !important;
    }
    body.ui-skin-whatsapp .line:hover,
    body.ui-skin-whatsapp .line.selected{ background:rgba(255,255,255,0.4) !important; }
    body.ui-skin-whatsapp .people{ background:#fff !important; }
    body.ui-skin-whatsapp .room,
    body.ui-skin-whatsapp .chat-main,
    body.ui-skin-whatsapp .log{
      background:#efeae2 !important;
      background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4cdc4' fill-opacity='0.35'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
    }
    body.ui-skin-whatsapp #topic-bar,
    body.ui-skin-whatsapp .topic-bar{ display:none !important; }
    body.ui-skin-whatsapp #wa-topbar{
      display:flex !important; position:sticky; top:0; z-index:50;
    }
    /* Bottom + is radio — green when playing */
    body.ui-skin-whatsapp #mb-tab-tools.state-radio .mb-icon,
    body.ui-skin-whatsapp #mb-tab-tools .mb-icon{
      color:#075e54;
    }
    body.ui-skin-whatsapp #mb-tab-tools.state-radio .mb-icon{
      background:#dcfce7 !important; color:#16a34a !important; box-shadow:0 0 0 2px #86efac;
    }
    /* Games + Mentions on bottom bar */
    body.ui-skin-whatsapp #mb-tab-games,
    body.ui-skin-whatsapp #mb-tab-mentions{ display:flex !important; }
    body.ui-skin-whatsapp .mobile-bottom-nav{
      background:#f0f2f5 !important; border-top-color:#d1d7db !important;
    }
    body.ui-skin-whatsapp .mobile-bottom-nav .mb-item{ color:#54656f !important; }
    body.ui-skin-whatsapp .mobile-bottom-nav .mb-item.active{ color:#075e54 !important; }
  }


  /* Lavender SVG icon theme — size SVGs to fit rail/composer icon boxes */
  .ic.hhb-svg-icon,
  .comp-ic.hhb-svg-icon,
  .emoji-btn.hhb-svg-icon{
    display:flex !important;
    align-items:center;
    justify-content:center;
    color:var(--hhb-icon, #8f82d8);
  }
  .ic.hhb-svg-icon svg,
  .comp-ic.hhb-svg-icon svg,
  .emoji-btn.hhb-svg-icon svg{
    width:18px;
    height:18px;
    display:block;
    flex-shrink:0;
  }
  /* Lavender icon theme: every rail/composer icon gets the same boxed boundary
     (border + soft lavender fill + rounded corners) the 😊 emoji button already
     has on desktop, instead of floating as a bare, unbounded line glyph. */
  body.hhb-icon-theme-lavender .ic,
  body.hhb-icon-theme-lavender .comp-ic{
    color:var(--hhb-icon, #8f82d8);
    background:var(--hhb-icon-bg, #f0eafb);
    border-color:#ddd3f5;
  }
  body.hhb-icon-theme-lavender .ic:hover,
  body.hhb-icon-theme-lavender .comp-ic:hover{
    color:var(--hhb-icon-active, #a84fd1);
    border-color:#c9b8ef;
  }

  /* ================================================================
     UNIVERSAL CENTERLINE — ALL SKINS, DESKTOP + MOBILE
     ================================================================
     Avatar → Arrow → Nick → Chat text → Emoji (static/animated/GIF) →
     Sticker → Doodle all share ONE horizontal center line.

     • .line-row uses align-items:center so every direct child (avatar,
       content column, timestamp) shares the same vertical midline.
     • Inline pieces (arrow, nick, text, emoji, sticker, doodle) use
       vertical-align:middle so they sit on that same midline.
     • Skin rules may change color/size but must not override these
       alignment properties.
     ================================================================ */

  .line .line-row,
  .line .line-row.wa-line-row,
  body.ui-skin-whatsapp .line .line-row,
  body.ui-skin-whatsapp .line .line-row.wa-line-row,
  body.ui-skin-blabax .line .line-row,
  body.ui-skin-discord .line .line-row,
  body.ui-skin-neon .line .line-row,
  body[class*="ui-skin-"] .line .line-row{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:4px !important;
    min-height:28px !important;
  }

  /* Avatar — fixed box, vertically centered on the shared line.
     display is NOT forced here so body.hhb-sender-display-* still controls visibility. */
  .line .line-row > .wa-msg-avatar,
  body.ui-skin-whatsapp .line .line-row > .wa-msg-avatar,
  body.ui-skin-whatsapp .line .wa-msg-avatar,
  body[class*="ui-skin-"] .line .line-row > .wa-msg-avatar{
    align-self:center !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 28px !important;
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    margin:0 2px 0 0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    line-height:1 !important;
  }

  /* Content column — also centered on the shared line (no top-nudge). */
  .line .line-row > .mobile-msg-flow,
  .line .line-row > .wa-msg-col,
  body.ui-skin-whatsapp .line .line-row > .mobile-msg-flow,
  body.ui-skin-whatsapp .line .line-row > .wa-msg-col,
  body.ui-skin-whatsapp .line .wa-msg-col,
  body[class*="ui-skin-"] .line .line-row > .mobile-msg-flow,
  body[class*="ui-skin-"] .line .line-row > .wa-msg-col{
    display:block !important;
    flex:1 1 auto !important;
    align-self:center !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1.35 !important;
    box-sizing:border-box !important;
  }

  .line .wa-inline-message,
  .line .mobile-msg-flow > .who,
  .line .wa-inline-message > .who{
    line-height:1.35 !important;
    vertical-align:middle !important;
  }

  /* Arrow — same centerline; visibility still owned by sender-display rules. */
  .line .nick-mirror-arrow,
  .line .wa-inline-message .nick-mirror-arrow,
  .line .mobile-msg-flow .nick-mirror-arrow{
    align-items:center !important;
    justify-content:center !important;
    vertical-align:middle !important;
    line-height:1 !important;
    height:auto !important;
    margin:0 4px 0 0 !important;
    padding:0 !important;
  }

  body.ui-skin-whatsapp .line .who .nick-mirror-arrow{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  .line .wa-nick,
  .line .wa-inline-message .wa-nick,
  .line .mobile-msg-flow .wa-nick,
  .line .msg-main,
  .line .msg-main .txt,
  .line .who{
    vertical-align:middle !important;
  }

  /* EVERY media type on the shared centerline (static, animated, GIF, sticker, doodle). */
  .line .chat-emoji-img,
  .line .chat-emoji-img-gif,
  .line .chat-emoji-img-sticker,
  .line .chat-doodle-thumb,
  .line .msg-main .txt .chat-emoji-img,
  .line .msg-main .txt .chat-emoji-img-gif,
  .line .msg-main .txt .chat-emoji-img-sticker,
  .line .msg-main .txt .chat-doodle-thumb,
  .line .mobile-msg-flow .chat-doodle-thumb,
  body[class*="ui-skin-"] .line .chat-emoji-img,
  body[class*="ui-skin-"] .line .chat-emoji-img-gif,
  body[class*="ui-skin-"] .line .chat-emoji-img-sticker,
  body[class*="ui-skin-"] .line .chat-doodle-thumb{
    vertical-align:middle !important;
  }

  .line .chat-doodle-thumb,
  .line .msg-main .txt .chat-doodle-thumb{
    margin-top:0 !important;
    margin-bottom:0 !important;
    position:relative;
    top:0 !important;
  }

  /* Timestamp + actions share the same centerline. */
  .line .line-row > .ts,
  .line .line-row > .msg-actions{
    align-self:center !important;
    margin-top:0 !important;
  }

  @media (max-width:768px){
    .line .line-row,
    .line .line-row.wa-line-row,
    body.ui-skin-whatsapp .line .line-row,
    body.ui-skin-whatsapp .line .line-row.wa-line-row,
    body[class*="ui-skin-"] .line .line-row{
      align-items:center !important;
      gap:4px !important;
      min-height:26px !important;
    }
    .line .line-row > .wa-msg-avatar,
    body.ui-skin-whatsapp .line .wa-msg-avatar,
    body[class*="ui-skin-"] .line .line-row > .wa-msg-avatar{
      flex:0 0 26px !important;
      width:26px !important;
      height:26px !important;
      min-width:26px !important;
      margin:0 2px 0 0 !important;
      align-self:center !important;
    }
    .line .line-row > .mobile-msg-flow,
    .line .line-row > .wa-msg-col,
    body[class*="ui-skin-"] .line .line-row > .mobile-msg-flow{
      line-height:1.35 !important;
      align-self:center !important;
      margin-top:0 !important;
    }
    .line .line-row > .ts,
    .line .line-row > .msg-actions{
      align-self:center !important;
      margin-top:0 !important;
    }
    .line .wa-inline-message,
    .line .mobile-msg-flow > .who,
    .line .wa-inline-message > .who,
    .line .wa-nick,
    .line .wa-inline-message .wa-nick,
    .line .mobile-msg-flow .wa-nick,
    .line .wa-inline-message > .msg-main,
    .line .mobile-msg-flow > .msg-main,
    .line .msg-main .txt,
    .line .wa-inline-message .msg-main .txt{
      line-height:1.35 !important;
      vertical-align:middle !important;
    }
    .line .nick-mirror-arrow,
    .line .wa-inline-message .nick-mirror-arrow,
    .line .mobile-msg-flow .nick-mirror-arrow{
      height:auto !important;
      vertical-align:middle !important;
    }
    .line .chat-emoji-img,
    .line .chat-emoji-img-gif,
    .line .chat-emoji-img-sticker,
    .line .chat-doodle-thumb,
    .line .msg-main .txt .chat-doodle-thumb{
      vertical-align:middle !important;
    }
    .line .chat-doodle-thumb,
    .line .msg-main .txt .chat-doodle-thumb{
      max-width:48px !important;
      max-height:48px !important;
      margin-left:3px !important;
    }
  }

/* hhb-mobile-align-css */
@media (max-width: 768px){
  .line{ padding:1px 8px !important; margin:0 !important; }
  .line + .line{ margin-top:0 !important; }
  .line .line-row,
  .line .line-row.wa-line-row{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:flex-start !important;
    gap:4px !important;
  }
  .line .line-row > .wa-msg-avatar{
    flex:0 0 22px !important;
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    margin:6px 0 0 0 !important;
    position:relative !important;
    top:0 !important;
    align-self:flex-start !important;
  }
  .line .line-row > .nick-mirror-arrow,
  .line .line-row > .line-arrow{
    position:relative !important;
    float:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 16px !important;
    width:16px !important;
    height:22px !important;
    min-width:16px !important;
    margin:6px 0 0 0 !important;
    padding:0 !important;
    top:0 !important;
    left:auto !important;
    transform:none !important;
    line-height:22px !important;
    font-size:13px !important;
  }
  .line .line-row > .mobile-msg-flow,
  .line .line-row > .wa-msg-col{
    display:block !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    position:static !important;
    line-height:22px !important;
    word-spacing:normal !important;
    letter-spacing:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
    white-space:normal !important;
  }
  .line .wa-inline-message,
  .line .mobile-msg-flow .who,
  .line .wa-nick,
  .line .msg-main,
  .line .msg-main .txt{
    display:inline !important;
    line-height:22px !important;
    vertical-align:middle !important;
    margin:0 !important;
    padding:0 !important;
    word-spacing:normal !important;
    letter-spacing:normal !important;
    word-break:normal !important;
    white-space:normal !important;
  }
  .line .txt img, .line .emoji, .chat-emoji{ vertical-align:middle !important; }
  .chat-doodle-thumb{
    max-width:36px !important; max-height:36px !important; vertical-align:middle !important;
  }
}

/* Final main-chat avatar ↔ nickname alignment.
   Keep the avatar centered on the first nickname line, not the full
   multi-line message block. This prevents the avatar from drifting when
   the message wraps or when a status/extra content is present. */
html body #log .line .line-row,
html body #log .line .line-row.wa-line-row{
  align-items:flex-start !important;
}

html body #log .line .line-row > .wa-msg-avatar{
  align-self:flex-start !important;
  margin:0 2px 0 0 !important;
  transform:translateY(-2px) !important;
}

html body #log .line .line-row > .mobile-msg-flow,
html body #log .line .line-row > .wa-msg-col{
  align-self:flex-start !important;
}

html body #log .line .sender-head,
html body #log .line .sender-head .who,
html body #log .line .sender-head .wa-nick{
  line-height:1.35 !important;
  vertical-align:middle !important;
}

html body #log .line .sender-head .who,
html body #log .line .sender-head .wa-nick{
  display:inline-flex !important;
  align-items:center !important;
}

@media (max-width:768px){
  html body #log .line .line-row,
  html body #log .line .line-row.wa-line-row{
    align-items:flex-start !important;
  }

  html body #log .line .line-row > .wa-msg-avatar{
    align-self:flex-start !important;
    margin:0 2px 0 0 !important;
    transform:translateY(-2px) !important;
  }

  html body #log .line .sender-head,
  html body #log .line .sender-head .who,
  html body #log .line .sender-head .wa-nick{
    line-height:1.35 !important;
  }
}

/* Final People-list layout fix — applies to EVERY People-list section/skin.
   Keep avatar and nickname on the same visual center line even when a status
   is present; the status is allowed to extend the row downward. */
.people-list .person,
.people-list .people-sec-body .person,
.people-list .person[data-username]{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  gap:14px !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

.people-list .person .av-wrap{
  flex:0 0 38px !important;
  width:38px !important;
  height:38px !important;
  margin:0 !important;
  align-self:flex-start !important;
}

.people-list .person .p-info{
  flex:1 1 auto !important;
  min-width:0 !important;
  min-height:38px !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
}

/* The nickname occupies the avatar-height line, so its text is centered
   against the avatar. A status below it increases the row instead of
   pushing the nickname upward. */
.people-list .person .p-name{
  flex:0 0 38px !important;
  height:38px !important;
  min-height:38px !important;
  display:flex !important;
  align-items:center !important;
  padding:0 !important;
  margin:0 !important;
  line-height:1.2 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

.people-list .person .p-status{
  flex:0 0 auto !important;
  height:auto !important;
  min-height:14px !important;
  margin:0 !important;
  padding:0 0 2px !important;
  line-height:1.25 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

.people-list .person .badge-icon,
.people-list .person .level-icon,
.people-list .person .mod-dots{
  align-self:center !important;
  flex-shrink:0 !important;
}

/* Override skin-specific compact/blabax spacing so every section gets the
   same avatar-to-name breathing room. */
body.ui-skin-blabax .people-list .person,
body.ui-skin-compact .people-list .person,
body.ui-skin-whatsapp .people-list .person,
body.ui-skin-discord .people-list .person,
body.ui-skin-clean .people-list .person,
body.ui-skin-neon .people-list .person,
body[class*="ui-skin-"] .people-list .person{
  gap:14px !important;
}

@media (max-width:768px){
  .people-list .person,
  .people-list .people-sec-body .person,
  .people-list .person[data-username],
  body.ui-skin-blabax .people-list .person,
  body.ui-skin-compact .people-list .person,
  body.ui-skin-whatsapp .people-list .person,
  body.ui-skin-discord .people-list .person,
  body.ui-skin-clean .people-list .person,
  body.ui-skin-neon .people-list .person,
  body[class*="ui-skin-"] .people-list .person{
    gap:12px !important;
  }

  .people-list .person .av-wrap{
    flex-basis:38px !important;
    width:38px !important;
    height:38px !important;
  }
}

/* Final People-list text rendering fix: never clip the nickname vertically.
   Keep the name centered beside the avatar while allowing status to extend below. */
.people-list .person .p-info{
  overflow:visible !important;
  min-height:38px !important;
  height:auto !important;
  align-self:stretch !important;
}

.people-list .person .p-name{
  flex:0 0 auto !important;
  width:100% !important;
  min-height:38px !important;
  height:auto !important;
  display:flex !important;
  align-items:center !important;
  box-sizing:border-box !important;
  padding:1px 0 2px !important;
  margin:0 !important;
  line-height:1.25 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.people-list .person .p-status{
  display:block !important;
  height:auto !important;
  min-height:14px !important;
  padding:0 0 2px !important;
  margin:0 !important;
  line-height:1.25 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

@media (max-width:768px){
  .people-list .person .p-name{
    min-height:38px !important;
    line-height:1.25 !important;
    padding-top:1px !important;
    padding-bottom:2px !important;
  }
}

/* Status sits with the nick, not a full avatar-height below it. */
.people-list .person .p-name{
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  line-height:1.2 !important;
}
.people-list .person .p-status{
  margin-top:1px !important;
  padding:0 !important;
}
.people-list .person .p-info{
  min-height:0 !important;
  justify-content:center !important;
}
/* Compact people list: avatar-to-nick gap, stronger than the shared 14px rule. */
body.ui-skin-compact .people-list .person,
body.ui-skin-compact #people-list .person,
body.ui-skin-compact .person{
  gap:22px !important;
  column-gap:22px !important;
}
body.ui-skin-compact .people-list .person .av-wrap,
body.ui-skin-compact .person .av-wrap{
  margin-right:4px !important;
}
body.ui-skin-compact .person .av-wrap,
body.ui-skin-compact .person .av{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  flex-basis:32px !important;
}


/* hhb-mobile-composer-fill — composer uses the leftover left gap; emoji + doodle stay colored */
@media (max-width:768px){
  html body .above-composer{
    width:100% !important;
    margin:0 !important;
    padding:4px 6px 4px 2px !important;
    gap:4px !important;
    box-sizing:border-box !important;
  }
  html body .composer{
    flex:1 1 auto !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
  html body .composer #msg-input{
    width:100% !important;
    margin:0 !important;
    padding-left:58px !important;
    box-sizing:border-box !important;
  }
  html body .composer #emoji-toggle,
  html body .composer #doodle-btn{
    opacity:1 !important;
    filter:none !important;
    -webkit-text-fill-color:initial !important;
  }
  html body .composer #emoji-toggle{
    left:2px !important;
    width:26px !important; height:26px !important; min-width:26px !important; min-height:26px !important;
    font-size:16px !important;
    background:linear-gradient(180deg,#ffe08a,#ff9f1c) !important;
    border:1.5px solid #e8890b !important;
    box-shadow:0 1px 4px rgba(232,137,11,.5) !important;
    border-radius:50% !important;
  }
  html body .composer #doodle-btn{
    left:30px !important;
    width:26px !important; height:26px !important; min-width:26px !important; min-height:26px !important;
    font-size:15px !important;
    color:#fff !important;
    background:linear-gradient(180deg,#ddd6fe,#7c3aed) !important;
    border:1.5px solid #6d28d9 !important;
    box-shadow:0 1px 4px rgba(109,40,217,.5) !important;
    border-radius:50% !important;
  }
}

/* ===== Grok Style (body.ui-skin-grok only — other skins unchanged) ===== */
html body.ui-skin-grok,
html body.ui-skin-grok.dark-mode{
  background:#eef0f6 !important;
  --panel-bg:#ffffff;
  --page-backdrop:#eef0f6;
  --text-dark:#232037;
  --text-mute:#8b869e;
  --input-bg:#f4f2fa;
  --rail-bg:#eef0f6;
}
html body.ui-skin-grok .app-shell,
html body.ui-skin-grok .room,
html body.ui-skin-grok .chat-main,
html body.ui-skin-grok .log,
html body.ui-skin-grok #log,
html body.ui-skin-grok .people,
html body.ui-skin-grok .topic-bar,
html body.ui-skin-grok .above-composer,
html body.ui-skin-grok .composer,
html body.ui-skin-grok .mobile-bottom-nav,
html body.ui-skin-grok.dark-mode .log,
html body.ui-skin-grok.dark-mode #log,
html body.ui-skin-grok.dark-mode .room,
html body.ui-skin-grok.dark-mode .chat-main,
html body.ui-skin-grok.dark-mode .people,
html body.ui-skin-grok.dark-mode .topic-bar,
html body.ui-skin-grok.dark-mode .above-composer,
html body.ui-skin-grok.dark-mode .composer,
html body.ui-skin-grok.dark-mode .mobile-bottom-nav{
  background:#ffffff !important;
  background-image:none !important;
}
html body.ui-skin-grok .rail,
html body.ui-skin-grok.dark-mode .rail{
  background:#eef0f6 !important;
  background-image:none !important;
}
html body.ui-skin-grok.dark-mode,
html body.ui-skin-grok.dark-mode .people,
html body.ui-skin-grok.dark-mode .person,
html body.ui-skin-grok.dark-mode .p-name,
html body.ui-skin-grok.dark-mode .topic-bar,
html body.ui-skin-grok.dark-mode .log,
html body.ui-skin-grok.dark-mode .composer input,
html body.ui-skin-grok.dark-mode #msg-input{
  color:#232037 !important;
}
html body.ui-skin-grok #log#log .line{
  background:transparent !important;
  padding:1px 8px !important;
  margin:0 !important;
  line-height:1.25 !important;
}
html body.ui-skin-grok #log#log .line.mine{
  background:rgba(0,0,0,0.045) !important;
}
html body.ui-skin-grok #log#log .line .who,
html body.ui-skin-grok #log#log .line .wa-nick,
html body.ui-skin-grok #log#log .line .txt,
html body.ui-skin-grok #log#log .line .msg-main,
html body.ui-skin-grok #log#log .line .sender-head{
  line-height:1.25 !important;
}
html body.ui-skin-grok #log#log .line .chat-emoji-img,
html body.ui-skin-grok #log#log .line .chat-doodle-thumb,
html body.ui-skin-grok #log#log .line .msg-main img{
  vertical-align:middle !important;
}
html body.ui-skin-grok #log#log .join-note:not(.whisper-alert-line):not(.whisper-message-line):not(.story-notice-line){
  display:flex !important;
  flex-direction:row !important;
  direction:ltr !important;
  justify-content:flex-start !important;
  text-align:left !important;
  align-items:center !important;
  align-self:stretch !important;
  width:100% !important;
  font-size:12px !important;
  color:#8b869e !important;
  background:transparent !important;
  margin:2px 0 !important;
  padding-left:2px !important;
  box-sizing:border-box !important;
}
html body.ui-skin-grok #log#log .join-note:not(.whisper-alert-line):not(.whisper-message-line):not(.story-notice-line) b{
  color:#8b869e !important;
  font-weight:600 !important;
}

/* Display-in-chat: mobile must obey Avatar only / None (the drawn arrow was forced on). */
@media (max-width:768px){
  html body.hhb-sender-display-avatar-only #log#log .line .nick-mirror-arrow,
  html body.hhb-sender-display-avatar-only #log#log .line .line-arrow,
  html body.hhb-sender-display-none #log#log .line .nick-mirror-arrow,
  html body.hhb-sender-display-none #log#log .line .line-arrow,
  html body.hhb-sender-display-none #log#log .line .wa-msg-avatar{
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
  html body.hhb-sender-display-avatar-only{ --hhb-hang:24px; }
  html body.hhb-sender-display-none{ --hhb-hang:0px; }
}

/* Grok skin only: emoji + doodle side by side (not overlapping) on phones. */
@media (max-width:768px){
  html body.ui-skin-grok .composer #emoji-toggle{
    position:absolute !important;
    left:4px !important;
    right:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:30px !important; height:30px !important;
    min-width:30px !important; max-width:30px !important;
    min-height:30px !important; max-height:30px !important;
    margin:0 !important; padding:0 !important; overflow:hidden !important;
    z-index:3 !important; box-sizing:border-box !important;
    background:linear-gradient(180deg,#ffe08a,#ff9f1c) !important;
    border:1.5px solid #e8890b !important; border-radius:50% !important;
  }
  html body.ui-skin-grok .composer #doodle-btn{
    position:absolute !important;
    left:40px !important;
    right:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:30px !important; height:30px !important;
    min-width:30px !important; max-width:30px !important;
    min-height:30px !important; max-height:30px !important;
    margin:0 !important; padding:0 !important; overflow:hidden !important;
    z-index:3 !important; color:#fff !important; box-sizing:border-box !important;
    background:linear-gradient(180deg,#ddd6fe,#7c3aed) !important;
    border:1.5px solid #6d28d9 !important; border-radius:50% !important;
  }
  html body.ui-skin-grok .composer #msg-input,
  html body.ui-skin-grok .composer input{ padding-left:78px !important; }
}
html body.ui-skin-grok.mirrored-layout #log#log .join-note:not(.whisper-alert-line):not(.whisper-message-line):not(.story-notice-line){
  justify-content:flex-start !important;
  text-align:left !important;
  direction:ltr !important;
  width:100% !important;
  align-self:stretch !important;
}

/* Grok only — .com tight lines, with a small gap so avatars do not collide. */
html body.ui-skin-grok #log#log .line{
  padding:2px 6px !important;
  margin:0 !important;
  line-height:1.35 !important;
}
html body.ui-skin-grok #log#log .line .line-row,
html body.ui-skin-grok #log#log .line .line-row.wa-line-row{
  min-height:0 !important;
  height:auto !important;
  align-items:center !important;
  gap:4px !important;
  padding:0 !important;
  margin:0 !important;
}
html body.ui-skin-grok #log#log .line .wa-msg-avatar{
  flex:0 0 22px !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  font-size:10px !important;
  margin:0 4px 0 0 !important;
  transform:none !important;
  overflow:hidden !important;
  align-self:center !important;
  position:relative !important;
}
html body.ui-skin-grok #log#log .line .sender-head{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
}
html body.ui-skin-grok #log#log .line .line-row > .mobile-msg-flow,
html body.ui-skin-grok #log#log .line .line-row > .wa-msg-col{
  line-height:1.35 !important;
  align-self:center !important;
}
html body.ui-skin-grok #log#log .line .wa-nick,
html body.ui-skin-grok #log#log .line .who{
  font-weight:700 !important;
  line-height:1.35 !important;
}
html body.ui-skin-grok #log#log .line .line-row > .ts{
  margin-left:auto !important;
  font-size:10px !important;
  color:#9a96ad !important;
  align-self:center !important;
  padding-left:8px !important;
  white-space:nowrap !important;
}
html body.ui-skin-grok .composer{
  padding:6px 10px !important;
  gap:6px !important;
}
html body.ui-skin-grok #log .chat-alert-line:has(.notice-banner-tab){
  display:none !important;
}


/* ===== HHB skin — .com chat look only. Other skins unchanged. ===== */
html body.ui-skin-hhb{
  background:#f4f1fb !important;
  --panel-bg:#ffffff;
  --rail-bg:#f6f1fc;
  --text-dark:#2a2440;
  --text-mute:#8d86a3;
  --panel-border:#eadff5;
  --topic-bg:#fff6e4;
  --topic-text:#3a3428;
}
html body.ui-skin-hhb .app-shell{
  background:#fff !important;
}
html body.ui-skin-hhb .rail{
  width:62px !important;
  background:#f6f1fc !important;
  border-left:1px solid #eadff5 !important;
  border-right:none !important;
  padding:12px 0 !important;
  gap:6px !important;
}
html body.ui-skin-hhb .rail .brand{
  width:36px !important; height:36px !important; border-radius:12px !important;
  margin-bottom:8px !important; background:#7c3aed !important; font-size:16px !important;
}
html body.ui-skin-hhb .rail .ic{
  width:40px !important; height:40px !important; border-radius:12px !important;
  background:#fff !important; border:1px solid #eadff5 !important; color:#6d28d9 !important;
  font-size:18px !important; box-shadow:none !important;
}
html body.ui-skin-hhb .rail .ic:hover,
html body.ui-skin-hhb .rail .ic.active{
  background:#efe6ff !important; color:#5b21b6 !important;
}
html body.ui-skin-hhb .people{
  width:280px; min-width:220px;
  background:#f7f3fc !important; border-left:1px solid #eadff5 !important; border-right:none !important;
}
html body.ui-skin-hhb .people.collapsed{
  width:0 !important; min-width:0 !important; max-width:0 !important;
  overflow:hidden !important; border:0 !important; padding:0 !important;
}
html body.ui-skin-hhb .people-head{ color:#7a7390 !important; letter-spacing:.12em !important; }
html body.ui-skin-hhb .search input{
  background:#fff !important; border:1px solid #eadff5 !important; border-radius:999px !important;
}
html body.ui-skin-hhb .person:hover{ background:#efe8f8 !important; }
html body.ui-skin-hhb .room{ background:#fff !important; }
html body.ui-skin-hhb .topic-bar,
html body.ui-skin-hhb #topic-bar{
  background:#fff6e4 !important; color:#3a3428 !important;
  border-bottom:1px solid #f0e2c4 !important;
}
html body.ui-skin-hhb #log,
html body.ui-skin-hhb .log{ background:#fff !important; }
html body.ui-skin-hhb #log#log .line{
  background:transparent !important;
  padding:1px 10px !important;
  margin:0 !important;
  line-height:1.45 !important;
  font-size:14px !important;
}
html body.ui-skin-hhb #log#log .line.mine{ background:transparent !important; }
html body.ui-skin-hhb #log#log .line .line-row,
html body.ui-skin-hhb #log#log .line .line-row.wa-line-row{
  min-height:0 !important; gap:0 !important; align-items:baseline !important;
}
html body.ui-skin-hhb #log#log .line .wa-msg-avatar,
html body.ui-skin-hhb #log#log .line .nick-mirror-arrow{
  display:none !important; width:0 !important; min-width:0 !important; margin:0 !important; padding:0 !important;
}
html body.ui-skin-hhb #log#log .line .wa-nick,
html body.ui-skin-hhb #log#log .line .who{
  font-weight:700 !important; line-height:1.45 !important;
}
html body.ui-skin-hhb #log#log .line .line-row > .ts{
  margin-left:auto !important; color:#b0a8c4 !important; font-size:11px !important; white-space:nowrap !important;
}
html body.ui-skin-hhb #log#log .join-note:not(.whisper-alert-line):not(.whisper-message-line):not(.story-notice-line){
  justify-content:flex-start !important; text-align:left !important; color:#8d86a3 !important;
  font-size:12px !important; background:transparent !important;
}
html body.ui-skin-hhb #clear-my-view-btn{ display:none !important; }
html body.ui-skin-hhb .composer{
  background:#f6f3fb !important; border-top:1px solid #eadff5 !important;
  padding:8px 12px !important; gap:8px !important;
}
html body.ui-skin-hhb .composer #msg-input,
html body.ui-skin-hhb .composer input{
  background:#fff !important; border:1px solid #e6def2 !important; border-radius:20px !important;
  padding:8px 14px !important; color:#2a2440 !important;
}
html body.ui-skin-hhb .composer .send-btn{
  background:transparent !important; color:#7c3aed !important; box-shadow:none !important; border:0 !important;
}
@media (max-width:768px){
  html body.ui-skin-hhb .rail{ display:none !important; }
  html body.ui-skin-hhb .topic-bar,
  html body.ui-skin-hhb #topic-bar{
    display:flex !important; background:#fff6e4 !important; font-size:13px !important;
  }
  html body.ui-skin-hhb .mobile-bottom-nav{
    background:#fff !important; border-top:1px solid #eadff5 !important;
    height:62px !important; padding-bottom:env(safe-area-inset-bottom) !important;
  }
  html body.ui-skin-hhb .mb-item{
    flex-direction:column !important; gap:1px !important; color:#8d86a3 !important; font-size:10px !important; font-weight:600 !important;
  }
  html body.ui-skin-hhb .mb-item.active{ color:#7c3aed !important; }
  html body.ui-skin-hhb #mb-tab-messages,
  html body.ui-skin-hhb #mb-tab-games,
  html body.ui-skin-hhb #mb-tab-tools,
  html body.ui-skin-hhb #mb-tab-story{ display:none !important; }
  html body.ui-skin-hhb #mb-tab-chat::after{ content:"Messages"; }
  html body.ui-skin-hhb #mb-tab-mentions::after{ content:"Mentions"; }
  html body.ui-skin-hhb #mb-tab-users::after{ content:"Users"; }
  html body.ui-skin-hhb #mb-tab-more::after{ content:"More"; }
  html body.ui-skin-hhb .composer-plus-menu{
    display:flex !important; position:static !important; flex-direction:row !important;
    background:transparent !important; box-shadow:none !important; border:0 !important; padding:0 !important;
  }
  html body.ui-skin-hhb #composer-plus-btn{ display:none !important; }
  html body.ui-skin-hhb #call-btn{ display:flex !important; }
}
html body.ui-skin-hhb .emoji-toggle-row,
html body.ui-skin-hhb #call-btn,
html body.ui-skin-hhb .call-mic-group{
  display:flex !important;
}


/* HHB icons: Lucide line icons (same set .com uses, ISC). Unmatched controls keep their own art. */
html body.ui-skin-hhb .rail .ic:not(#logout-icon){
  font-size:0 !important;
  color:#6d28d9 !important;
}
html body.ui-skin-hhb .rail .ic:not(#logout-icon)::before{
  content:"";
  width:18px; height:18px; display:block;
  background:currentColor;
  -webkit-mask: var(--hhb-ico) center / contain no-repeat;
  mask: var(--hhb-ico) center / contain no-repeat;
}
html body.ui-skin-hhb #collapse-toggle::before{ transform:scaleX(-1); }
html body.ui-skin-hhb:has(.people.collapsed) #collapse-toggle{ --hhb-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M9%203v18%22/%3E%3Cpath%20d%3D%22m14%209%203%203-3%203%22/%3E%3C/svg%3E"); }

html body.ui-skin-hhb #switch-room-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203%204%207l4%204%22/%3E%3Cpath%20d%3D%22M4%207h16%22/%3E%3Cpath%20d%3D%22m16%2021%204-4-4-4%22/%3E%3Cpath%20d%3D%22M20%2017H4%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #collapse-toggle{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M9%203v18%22/%3E%3Cpath%20d%3D%22m16%2015-3-3%203-3%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #pm-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2216%22%20x%3D%222%22%20y%3D%224%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22m22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #group-chat-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%224%22%20x2%3D%2220%22%20y1%3D%229%22%20y2%3D%229%22/%3E%3Cline%20x1%3D%224%22%20x2%3D%2220%22%20y1%3D%2215%22%20y2%3D%2215%22/%3E%3Cline%20x1%3D%2210%22%20x2%3D%228%22%20y1%3D%223%22%20y2%3D%2221%22/%3E%3Cline%20x1%3D%2216%22%20x2%3D%2214%22%20y1%3D%223%22%20y2%3D%2221%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #friends-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cline%20x1%3D%2219%22%20x2%3D%2219%22%20y1%3D%228%22%20y2%3D%2214%22/%3E%3Cline%20x1%3D%2222%22%20x2%3D%2216%22%20y1%3D%2211%22%20y2%3D%2211%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #profile-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2215%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M10%2015H6a4%204%200%200%200-4%204v2%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #top-users-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2218%22%20x2%3D%2218%22%20y1%3D%2220%22%20y2%3D%2210%22/%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%2220%22%20y2%3D%224%22/%3E%3Cline%20x1%3D%226%22%20x2%3D%226%22%20y1%3D%2220%22%20y2%3D%2214%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #most-loved-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209H4.5a2.5%202.5%200%200%201%200-5H6%22/%3E%3Cpath%20d%3D%22M18%209h1.5a2.5%202.5%200%200%200%200-5H18%22/%3E%3Cpath%20d%3D%22M4%2022h16%22/%3E%3Cpath%20d%3D%22M18%202H6v7a6%206%200%200%200%2012%200V2Z%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #games-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2212%22%20height%3D%2212%22%20x%3D%222%22%20y%3D%2210%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22m17.92%2014%203.5-3.5a2.24%202.24%200%200%200%200-3l-5-4.92a2.24%202.24%200%200%200-3%200L10%206%22/%3E%3Cpath%20d%3D%22M6%2018h.01%22/%3E%3Cpath%20d%3D%22M10%2014h.01%22/%3E%3Cpath%20d%3D%22M15%206h.01%22/%3E%3Cpath%20d%3D%22M18%209h.01%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #mentions-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M16%208v5a3%203%200%200%200%206%200v-1a10%2010%200%201%200-4%208%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #settings-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2221%22%20x2%3D%2214%22%20y1%3D%224%22%20y2%3D%224%22/%3E%3Cline%20x1%3D%2210%22%20x2%3D%223%22%20y1%3D%224%22%20y2%3D%224%22/%3E%3Cline%20x1%3D%2221%22%20x2%3D%2212%22%20y1%3D%2212%22%20y2%3D%2212%22/%3E%3Cline%20x1%3D%228%22%20x2%3D%223%22%20y1%3D%2212%22%20y2%3D%2212%22/%3E%3Cline%20x1%3D%2221%22%20x2%3D%2216%22%20y1%3D%2220%22%20y2%3D%2220%22/%3E%3Cline%20x1%3D%2212%22%20x2%3D%223%22%20y1%3D%2220%22%20y2%3D%2220%22/%3E%3Cline%20x1%3D%2214%22%20x2%3D%2214%22%20y1%3D%222%22%20y2%3D%226%22/%3E%3Cline%20x1%3D%228%22%20x2%3D%228%22%20y1%3D%2210%22%20y2%3D%2214%22/%3E%3Cline%20x1%3D%2216%22%20x2%3D%2216%22%20y1%3D%2218%22%20y2%3D%2222%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #help-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%3Cpath%20d%3D%22M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203%22/%3E%3Cpath%20d%3D%22M12%2017h.01%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #suggestion-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2014c.2-1%20.7-1.7%201.5-2.5%201-.9%201.5-2.2%201.5-3.5A6%206%200%200%200%206%208c0%201%20.2%202.2%201.5%203.5.7.7%201.3%201.5%201.5%202.5%22/%3E%3Cpath%20d%3D%22M9%2018h6%22/%3E%3Cpath%20d%3D%22M10%2022h4%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #mod-tab-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z%22/%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #server-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%223%22%20rx%3D%222%22/%3E%3Cline%20x1%3D%228%22%20x2%3D%2216%22%20y1%3D%2221%22%20y2%3D%2221%22/%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%2217%22%20y2%3D%2221%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #install-app-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22/%3E%3Cpolyline%20points%3D%227%2010%2012%2015%2017%2010%22/%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%2215%22%20y2%3D%223%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #story-wall-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%3Cpolygon%20points%3D%2210%208%2016%2012%2010%2016%2010%208%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #light-chat-toggle-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2213%202%203%2014%2012%2014%2011%2022%2021%2010%2012%2010%2013%202%22/%3E%3C/svg%3E"); }

html body.ui-skin-hhb #emoji-toggle,
html body.ui-skin-hhb #doodle-btn,
html body.ui-skin-hhb #voice-note-btn{
  font-size:0 !important; color:#6d28d9 !important;
  display:flex !important; align-items:center; justify-content:center;
}
html body.ui-skin-hhb #emoji-toggle::before,
html body.ui-skin-hhb #doodle-btn::before,
html body.ui-skin-hhb #voice-note-btn::before{
  content:""; width:18px; height:18px; display:block; background:currentColor;
  -webkit-mask: var(--hhb-ico) center / contain no-repeat;
  mask: var(--hhb-ico) center / contain no-repeat;
}
html body.ui-skin-hhb #emoji-toggle{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%3Cpath%20d%3D%22M8%2014s1.5%202%204%202%204-2%204-2%22/%3E%3Cline%20x1%3D%229%22%20x2%3D%229.01%22%20y1%3D%229%22%20y2%3D%229%22/%3E%3Cline%20x1%3D%2215%22%20x2%3D%2215.01%22%20y1%3D%229%22%20y2%3D%229%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #doodle-btn{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.174%206.812a1%201%200%200%200-3.986-3.987L3.842%2016.174a2%202%200%200%200-.5.83l-1.321%204.352a.5.5%200%200%200%20.623.622l4.353-1.32a2%202%200%200%200%20.83-.497z%22/%3E%3Cpath%20d%3D%22m15%205%204%204%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #voice-note-btn{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202a3%203%200%200%200-3%203v7a3%203%200%200%200%206%200V5a3%203%200%200%200-3-3Z%22/%3E%3Cpath%20d%3D%22M19%2010v2a7%207%200%200%201-14%200v-2%22/%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%2219%22%20y2%3D%2222%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb .comp-ic svg,
html body.ui-skin-hhb #call-btn,
html body.ui-skin-hhb #radio-toggle{ color:#6d28d9 !important; }
html body.ui-skin-hhb .mobile-bottom-nav .mb-icon svg{ display:none !important; }
html body.ui-skin-hhb .mobile-bottom-nav .mb-icon::before{
  content:""; width:22px; height:22px; display:block; background:currentColor;
  -webkit-mask: var(--hhb-ico) center / contain no-repeat;
  mask: var(--hhb-ico) center / contain no-repeat;
}
html body.ui-skin-hhb #mb-tab-chat .mb-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #mb-tab-messages .mb-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.38%208.38%200%200%201-.9%203.8%208.5%208.5%200%200%201-7.6%204.7%208.38%208.38%200%200%201-3.8-.9L3%2021l1.9-5.7a8.38%208.38%200%200%201-.9-3.8%208.5%208.5%200%200%201%204.7-7.6%208.38%208.38%200%200%201%203.8-.9h.5a8.48%208.48%200%200%201%208%208v.5z%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #mb-tab-mentions .mb-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M16%208v5a3%203%200%200%200%206%200v-1a10%2010%200%201%200-4%208%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #mb-tab-users .mb-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22/%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #mb-tab-more .mb-icon{ --hhb-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2212%22%20r%3D%221%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221%22/%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2212%22%20r%3D%221%22/%3E%3C/svg%3E"); }
html body.ui-skin-hhb #mb-tab-messages{ display:flex !important; }
html body.ui-skin-hhb #mb-tab-chat::after{ content:"Chat"; }
html body.ui-skin-hhb #mb-tab-messages::after{ content:"Messages"; }

html body.ui-skin-hhb #switch-room-icon,
html body.ui-skin-hhb #collapse-toggle,
html body.ui-skin-hhb #pm-icon,
html body.ui-skin-hhb #group-chat-icon,
html body.ui-skin-hhb #friends-icon,
html body.ui-skin-hhb #profile-icon,
html body.ui-skin-hhb #top-users-icon,
html body.ui-skin-hhb #most-loved-icon,
html body.ui-skin-hhb #games-icon,
html body.ui-skin-hhb #mentions-icon,
html body.ui-skin-hhb #settings-icon,
html body.ui-skin-hhb #help-icon,
html body.ui-skin-hhb #suggestion-icon,
html body.ui-skin-hhb #mod-tab-icon,
html body.ui-skin-hhb #server-icon,
html body.ui-skin-hhb #install-app-icon,
html body.ui-skin-hhb #story-wall-icon,
html body.ui-skin-hhb #light-chat-toggle-icon,
html body.ui-skin-hhb #emoji-toggle,
html body.ui-skin-hhb #doodle-btn,
html body.ui-skin-hhb #voice-note-btn{
  font-size:0 !important;
  line-height:0 !important;
}
@media (max-width:768px){
  html body.ui-skin-hhb #emoji-toggle,
  html body.ui-skin-hhb #doodle-btn{
    position:static !important;
    left:auto !important;
    top:auto !important;
  }
  html body.ui-skin-hhb .composer #msg-input,
  html body.ui-skin-hhb .composer input{
    padding-left:14px !important;
  }
}

/* HHB composer matches .com: tools sit on the left of the input, call beside the mic, send on the right. */
html body.ui-skin-hhb .above-composer{
  display:flex !important;
  flex-flow:row wrap !important;
  align-items:center !important;
  gap:6px !important;
  padding:6px 8px 8px !important;
  background:#f6f3fb !important;
}
html body.ui-skin-hhb .emoji-toggle-row,
html body.ui-skin-hhb .composer-plus-wrap,
html body.ui-skin-hhb .composer-plus-menu,
html body.ui-skin-hhb .call-mic-group,
html body.ui-skin-hhb .composer{
  display:contents !important;
}
html body.ui-skin-hhb .typing-bar,
html body.ui-skin-hhb #reply-preview-chip,
html body.ui-skin-hhb .emoji-panel,
html body.ui-skin-hhb .cmd-autocomplete{
  flex:1 0 100% !important;
  order:-1 !important;
}
html body.ui-skin-hhb #composer-plus-btn,
html body.ui-skin-hhb #radio-toggle,
html body.ui-skin-hhb #radio-dj-live-badge,
html body.ui-skin-hhb #radio-autodj-badge{
  display:none !important;
}
html body.ui-skin-hhb #emoji-toggle,
html body.ui-skin-hhb #doodle-btn,
html body.ui-skin-hhb #voice-note-btn,
html body.ui-skin-hhb #call-btn{
  position:static !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  flex:0 0 36px !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  order:1 !important;
}
html body.ui-skin-hhb #emoji-toggle{ order:1 !important; }
html body.ui-skin-hhb #doodle-btn{ order:2 !important; }
html body.ui-skin-hhb #voice-note-btn{ order:3 !important; }
html body.ui-skin-hhb #call-btn{ order:4 !important; }
html body.ui-skin-hhb .composer #msg-input,
html body.ui-skin-hhb .composer input{
  order:5 !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  height:36px !important;
  margin:0 !important;
  padding:0 12px !important;
  position:static !important;
}
html body.ui-skin-hhb .composer .send-btn,
html body.ui-skin-hhb #send-btn{
  order:6 !important;
  position:static !important;
  flex:0 0 auto !important;
  width:36px !important;
  height:36px !important;
  margin:0 !important;
  color:#7c3aed !important;
}
html body.ui-skin-hhb #guest-register-btn{ order:7 !important; margin-left:0 !important; }

html body.ui-skin-hhb .above-composer{ flex-wrap:nowrap !important; }
html body.ui-skin-hhb #msg-input{
  width:auto !important;
  max-width:none !important;
  flex:1 1 0px !important;
  min-width:0 !important;
}
html body.ui-skin-hhb #send-btn{ flex:0 0 36px !important; }
html body.ui-skin-hhb #emoji-toggle,
html body.ui-skin-hhb #doodle-btn,
html body.ui-skin-hhb #voice-note-btn{ color:transparent !important; }
html body.ui-skin-hhb #emoji-toggle::before,
html body.ui-skin-hhb #doodle-btn::before,
html body.ui-skin-hhb #voice-note-btn::before{ background:#6d28d9 !important; }

html body.ui-skin-hhb .composer input:not(#msg-input){
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  flex:0 0 0px !important;
  margin:0 !important;
  padding:0 !important;
}
html body.ui-skin-hhb #msg-input{
  position:relative !important;
  left:auto !important;
  width:auto !important;
  height:36px !important;
  flex:1 1 0px !important;
  min-width:0 !important;
}

/* HHB: .com composer has no emoji or doodle. Voice-note and call keep their status. */
html body.ui-skin-hhb #emoji-toggle,
html body.ui-skin-hhb #doodle-btn{
  display:none !important;
}
html body.ui-skin-hhb #voice-note-btn.active{
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
  color:#e14545 !important;
  background:#fdeaea !important;
  border-color:#e14545 !important;
  width:auto !important;
  min-width:54px !important;
  flex:0 0 auto !important;
  padding:0 8px !important;
  white-space:nowrap !important;
}
html body.ui-skin-hhb #voice-note-btn.active::before{ display:none !important; content:none !important; }
html body.ui-skin-hhb #call-btn.in-call{
  background:#fdeaea !important;
  color:#e14545 !important;
  border-color:#e14545 !important;
}
html body.ui-skin-hhb #call-btn.in-call svg{ stroke:#e14545 !important; }
html body.ui-skin-hhb #mic-toggle-btn.muted{
  background:#fde8e8 !important;
  color:#e14545 !important;
}
html body.ui-skin-hhb #mic-toggle-btn.speaking{
  background:#dcfce7 !important;
  color:#16a34a !important;
}

/* HHB matches .com: the wrapped line starts at the nick, not indented past it. */
html body.ui-skin-hhb{ --hhb-hang:0px !important; }
html body.ui-skin-hhb #log#log .line .mobile-msg-flow.mobile-msg-flow,
html body.ui-skin-hhb #log#log .line .wa-inline-message{
  padding-left:0 !important;
  text-indent:0 !important;
}

/* Grok mobile: own-message tint runs edge to edge, behind the avatar and arrow, no right gap. */
@media (max-width:768px){
  html body.ui-skin-grok #log,
  html body.ui-skin-grok .log{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  html body.ui-skin-grok #log#log .line.mine{
    background:rgba(0,0,0,0.045) !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    border-radius:0 !important;
    box-sizing:border-box !important;
    padding:2px 8px !important;
  }
  html body.ui-skin-grok #log#log .line.mine .line-row,
  html body.ui-skin-grok #log#log .line.mine .sender-head{
    background:transparent !important;
  }
}

/* Grok mobile: emoji/doodle stay inside the field. Arrow stays beside the nick, not off the left edge. */
@media (max-width:768px){
  html body.ui-skin-grok .composer #emoji-toggle{
    position:absolute !important;
    left:16px !important;
    right:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    margin:0 !important;
  }
  html body.ui-skin-grok .composer #doodle-btn{
    position:absolute !important;
    left:50px !important;
    right:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    margin:0 !important;
  }
  html body.ui-skin-grok .composer #msg-input,
  html body.ui-skin-grok .composer input{
    padding-left:88px !important;
  }
  html body.ui-skin-grok #log,
  html body.ui-skin-grok .log{
    padding-left:10px !important;
    padding-right:8px !important;
  }
  html body.ui-skin-grok #log#log .line.mine{
    margin-left:-10px !important;
    margin-right:-8px !important;
    width:calc(100% + 18px) !important;
    padding-left:10px !important;
    padding-right:8px !important;
  }
  html body.ui-skin-grok #log .line .sender-head .nick-mirror-arrow,
  html body.ui-skin-grok #log .line .sender-head .line-arrow,
  html body.ui-skin-grok #log#log .line .nick-mirror-arrow,
  html body.ui-skin-grok #log#log .line .line-arrow{
    position:static !important;
    right:auto !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    float:none !important;
    display:inline-block !important;
    margin:0 4px 0 0 !important;
    vertical-align:middle !important;
  }
}

/* Grok mobile: avatar + arrow stay on the line, nothing clipped on the left, no empty gap on the right. */
@media (max-width:768px){
  html body.ui-skin-grok{ --hhb-hang:0px !important; }
  html body.ui-skin-grok #log,
  html body.ui-skin-grok .log{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  html body.ui-skin-grok #log#log .line,
  html body.ui-skin-grok #log#log .line.mine{
    margin-left:0 !important;
    margin-right:0 !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    padding:2px 8px !important;
    border-radius:0 !important;
  }
  html body.ui-skin-grok #log#log .line .line-row:has(> .mobile-msg-flow) > .mobile-msg-flow,
  html body.ui-skin-grok #log#log .line .mobile-msg-flow,
  html body.ui-skin-grok #log#log .line .wa-msg-col,
  html body.ui-skin-grok #log#log .line .wa-inline-message{
    padding-left:0 !important;
    text-indent:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  html body.ui-skin-grok #log#log .line .wa-nick,
  html body.ui-skin-grok #log#log .line .who,
  html body.ui-skin-grok #log#log .line .txt,
  html body.ui-skin-grok #log#log .line .msg-main{
    text-indent:0 !important;
  }
  html body.ui-skin-grok.hhb-sender-display-avatar-arrow #log#log .line .wa-msg-avatar,
  html body.ui-skin-grok.hhb-sender-display-avatar-only #log#log .line .wa-msg-avatar{
    display:inline-flex !important;
    position:static !important;
    right:auto !important;
    left:auto !important;
    float:none !important;
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    margin:0 5px 0 0 !important;
    vertical-align:middle !important;
    transform:none !important;
  }
  html body.ui-skin-grok #log#log .line .sender-head .nick-mirror-arrow,
  html body.ui-skin-grok #log#log .line .sender-head .line-arrow,
  html body.ui-skin-grok #log#log .line .nick-mirror-arrow,
  html body.ui-skin-grok #log#log .line .line-arrow{
    position:static !important;
    right:auto !important;
    left:auto !important;
    top:auto !important;
    float:none !important;
    transform:translateY(-1px) !important;
    margin:0 5px 0 0 !important;
    vertical-align:middle !important;
  }
}

/* Grok mobile: line 2 starts at the nick again. Avatar and arrow stay on screen. Tint still full width. */
@media (max-width:768px){
  html body.ui-skin-grok{ --hhb-hang:40px !important; }
  html body.ui-skin-grok.hhb-sender-display-avatar-arrow{ --hhb-hang:40px !important; }
  html body.ui-skin-grok.hhb-sender-display-arrow-only{ --hhb-hang:15px !important; }
  html body.ui-skin-grok.hhb-sender-display-avatar-only{ --hhb-hang:25px !important; }
  html body.ui-skin-grok.hhb-sender-display-none{ --hhb-hang:0px !important; }
  html body.ui-skin-grok #log#log .line .sender-head{
    display:inline !important;
    float:none !important;
    position:static !important;
  }
  html body.ui-skin-grok #log#log .line .line-row:has(> .mobile-msg-flow) > .mobile-msg-flow,
  html body.ui-skin-grok #log#log .line .mobile-msg-flow{
    padding-left:var(--hhb-hang) !important;
    text-indent:calc(-1 * var(--hhb-hang)) !important;
  }
  html body.ui-skin-grok #log#log .line .wa-nick,
  html body.ui-skin-grok #log#log .line .who,
  html body.ui-skin-grok #log#log .line .txt,
  html body.ui-skin-grok #log#log .line .msg-main{
    text-indent:inherit !important;
  }
}


/* Grok: login/logout arrow stays fully visible. Do not rotate it. */
html body.ui-skin-grok #log#log .join-note:not(.whisper-alert-line):not(.whisper-message-line):not(.story-notice-line){
  padding-left:14px !important;
  overflow:visible !important;
}
html body.ui-skin-grok #log#log .join-note:not(.whisper-alert-line):not(.whisper-message-line):not(.story-notice-line) > span:first-child{
  display:inline-block !important;
  transform:none !important;
  overflow:visible !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
}

/* Grok mobile: emoji sits just inside the field's left edge, small gap only. */
@media (max-width:768px){
  html body.ui-skin-grok .composer #emoji-toggle{ left:10px !important; }
  html body.ui-skin-grok .composer #doodle-btn{ left:44px !important; }
  html body.ui-skin-grok .composer #msg-input,
  html body.ui-skin-grok .composer input{ padding-left:80px !important; }
}

/* Grok mobile: field's left edge sits a little further left than the emoji, not on the screen edge. */
@media (max-width:768px){
  html body.ui-skin-grok .composer{ padding-left:4px !important; }
  html body.ui-skin-grok .composer #emoji-toggle{ left:14px !important; }
  html body.ui-skin-grok .composer #doodle-btn{ left:48px !important; }
}

/* Grok mobile: small gap from the outer left line, and less empty space above and below the field. */
@media (max-width:768px){
  html body.ui-skin-grok .above-composer{
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  html body.ui-skin-grok .composer{
    padding:2px 10px 2px 10px !important;
  }
}

/* Grok mobile: typing is only the words, no line above it, and neither it nor the call arrow covers the chat. */
@media (max-width:768px){
  html body.ui-skin-grok .above-composer:has(#main-typing-bar.visible){
    border-top:none !important;
  }
  html body.ui-skin-grok #main-typing-bar.typing-bar,
  html body.ui-skin-grok #main-typing-bar.typing-bar.visible{
    position:relative !important;
    top:auto !important;
    bottom:auto !important;
    order:-5 !important;
    flex:1 0 100% !important;
    width:100% !important;
    height:16px !important;
    min-height:16px !important;
    margin:0 !important;
    padding:0 8px !important;
    border:0 !important;
    border-top:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    z-index:1 !important;
  }
  html body.ui-skin-grok .composer{
    max-width:none !important;
    width:auto !important;
    flex:1 1 0 !important;
  }
  html body.ui-skin-grok #composer-plus-btn{
    position:absolute !important;
    right:10px !important;
    bottom:100% !important;
    top:auto !important;
    left:auto !important;
    margin:0 0 8px 0 !important;
    order:0 !important;
    flex:none !important;
    z-index:60 !important;
  }
}

/* Grok mobile: input sits a little further right, composer stays open, input and send keep a gap. */
@media (max-width:768px){
  html body.ui-skin-grok .above-composer{
    padding-left:0 !important;
    padding-right:2px !important;
  }
  html body.ui-skin-grok .composer{
    padding:2px 4px 2px 16px !important;
    gap:10px !important;
    max-width:none !important;
  }
}

/* Grok mobile: emoji and doodle sit inside the input, lined up with the field. */
@media (max-width:768px){
  html body.ui-skin-grok .composer #emoji-toggle{ left:22px !important; }
  html body.ui-skin-grok .composer #doodle-btn{ left:56px !important; }
  html body.ui-skin-grok .composer #msg-input,
  html body.ui-skin-grok .composer input{ padding-left:84px !important; }
}

/* Grok mobile: input icons match the composer field height. */
@media (max-width:768px){
  html body.ui-skin-grok .composer #emoji-toggle,
  html body.ui-skin-grok .composer #doodle-btn{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    font-size:18px !important;
  }
  html body.ui-skin-grok .composer #emoji-toggle{ left:20px !important; }
  html body.ui-skin-grok .composer #doodle-btn{ left:64px !important; }
  html body.ui-skin-grok .composer #msg-input,
  html body.ui-skin-grok .composer input{
    min-height:44px !important;
    padding-left:100px !important;
  }
}

/* Grok mobile: shorter emoji/doodle, less left gap, that space goes to the typing area. */
@media (max-width:768px){
  html body.ui-skin-grok .composer{
    padding-left:8px !important;
  }
  html body.ui-skin-grok .composer #emoji-toggle,
  html body.ui-skin-grok .composer #doodle-btn{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
    font-size:16px !important;
  }
  html body.ui-skin-grok .composer #emoji-toggle{ left:12px !important; }
  html body.ui-skin-grok .composer #doodle-btn{ left:48px !important; }
  html body.ui-skin-grok .composer #msg-input,
  html body.ui-skin-grok .composer input{ padding-left:78px !important; }
}

/* Grok mobile: smaller gap before send, that width goes to the typing area. */
@media (max-width:768px){
  html body.ui-skin-grok .composer{ gap:4px !important; }
  html body.ui-skin-grok .composer .send-btn{ margin-left:0 !important; }
}

/* Grok mobile: send button is the same height as the composer field. */
@media (max-width:768px){
  html body.ui-skin-grok .composer .send-btn{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    align-self:center !important;
  }
}

/* Grok mobile wrap follows the standard sizes: avatar 20, arrow 13. */
@media (max-width:768px){
  html body.ui-skin-grok{ --hhb-hang:42px !important; }
  html body.ui-skin-grok.hhb-sender-display-avatar-arrow{ --hhb-hang:42px !important; }
  html body.ui-skin-grok.hhb-sender-display-arrow-only{ --hhb-hang:18px !important; }
  html body.ui-skin-grok.hhb-sender-display-avatar-only{ --hhb-hang:24px !important; }
}

/* Grok mobile: bottom icons a little fuller, every one the same size. */
@media (max-width:768px){
  html body.ui-skin-grok .mobile-bottom-nav .mb-item{ color:#5c5674 !important; }
  html body.ui-skin-grok .mobile-bottom-nav .mb-item .mb-icon,
  html body.ui-skin-grok #mb-tab-tools .mb-icon,
  html body.ui-skin-grok #mb-tab-tools.state-radio .mb-icon,
  html body.ui-skin-grok #mb-tab-story .mb-icon{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    max-width:34px !important;
    max-height:34px !important;
    opacity:1 !important;
  }
  html body.ui-skin-grok .mobile-bottom-nav .mb-item .mb-icon svg,
  html body.ui-skin-grok #mb-tab-tools .mb-icon svg,
  html body.ui-skin-grok #mb-tab-tools.state-radio .mb-icon svg{
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
    max-width:22px !important;
    max-height:22px !important;
    stroke-width:2.2 !important;
  }
  html body.ui-skin-grok #mb-tab-story .mb-icon{
    font-size:19px !important;
    line-height:22px !important;
  }
}

/* Grok mobile: emoji, doodle and send are 15% shorter, still round. */
@media (max-width:768px){
  html body.ui-skin-grok .composer #emoji-toggle,
  html body.ui-skin-grok .composer #doodle-btn{
    width:27px !important;
    height:27px !important;
    min-width:27px !important;
    min-height:27px !important;
    max-width:27px !important;
    max-height:27px !important;
    font-size:14px !important;
  }
  html body.ui-skin-grok .composer #emoji-toggle{ left:12px !important; }
  html body.ui-skin-grok .composer #doodle-btn{ left:43px !important; }
  html body.ui-skin-grok .composer #msg-input,
  html body.ui-skin-grok .composer input{ padding-left:68px !important; }
  html body.ui-skin-grok .composer .send-btn{
    width:37px !important;
    height:37px !important;
    min-width:37px !important;
    min-height:37px !important;
    max-width:37px !important;
    max-height:37px !important;
  }
}

/* Grok mobile: composer field is the same height as the send button, and they line up. */
@media (max-width:768px){
  html body.ui-skin-grok .composer{
    align-items:center !important;
    padding-top:2px !important;
    padding-bottom:2px !important;
  }
  html body.ui-skin-grok .composer #msg-input,
  html body.ui-skin-grok .composer input{
    height:37px !important;
    min-height:37px !important;
    max-height:37px !important;
    box-sizing:border-box !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    line-height:37px !important;
  }
  html body.ui-skin-grok .composer .send-btn{
    align-self:center !important;
  }
}