@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"); /* HHB font, loaded the way hihellobye.com does (2026-10-02 AST) */
/* hhb-ui-fix.css (2026-10-02 13:10 AST): user list nicks, mention line alignment, HHB double mic.
   Rollback: restore the backup in /home/hihello/hhb-private-backups/ or remove the hhb-ui-fix <link> in chat-room.html. */

/* 1) User list nicks.
   Cause A: .p-name was display:flex, so text-overflow:ellipsis never ran -> names were chopped mid-letter with no "...".
   Cause B: nick fonts fall back through 'Noto Nastaliq Urdu' (huge ascent/descent) while line-height was 1.2 with
            overflow:hidden -> the bottom of g, q, y, p was cut off.
   Cause C: Grok mobile drawer defaults to 220px; avatar + 3 x 12px gaps + guest/level badges left ~80px for the name. */
html body .people-list .person .p-name{
  display:block !important;
  line-height:normal !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}
html body .people-list .person .p-info{ justify-content:center !important; align-self:center !important; }
@media (max-width:768px){
  html body.ui-skin-grok .people{ width:var(--people-mobile-w, 280px); }
  html body .people-list .person,
  html body[class*="ui-skin-"] .people-list .person{ gap:8px !important; }
}

/* 2) Chat: a line that mentions you got a 3px left border on top of its padding, so its avatar/nick sat 3px to the
      right of every other line. Draw the bar inside the padding instead. */
html body #log#log .line.mentioned{
  border-left-width:0 !important;
  box-shadow:inset 3px 0 0 #f0d874 !important;
}
html body.dark-mode #log#log .line.mentioned{ box-shadow:inset 3px 0 0 #8a7a2e !important; }

/* 3) HHB skin: voice-note button drew its mask icon (::before) AND its inline <svg> = two mics side by side. */
html body.ui-skin-hhb #voice-note-btn:not(.active) > svg{ display:none !important; }

/* 4) HHB companion for hhb-ui-fix.js (2026-10-02 14:00 AST): show chat avatars, single sidebar icons */
/* 2) Main chat avatars: photo/emoji avatar filled in by hhb-ui-fix.js */
html body #log#log .line .wa-msg-avatar.hhb-has-pic{
  background-color:#ece8f6 !important; background-size:cover !important; background-position:center !important;
  background-repeat:no-repeat !important; color:transparent !important; -webkit-text-fill-color:transparent !important;
}
html body #log#log .line .wa-msg-avatar.hhb-has-emo{
  background:#f4f0fb !important; color:inherit !important;
}
/* HHB skin (2026-10-02 14:10 AST): no avatars on chat lines, nick only. Grok keeps avatars; user list unaffected. */
html body.ui-skin-hhb #log#log .line .wa-msg-avatar{ display:none !important; width:0 !important; min-width:0 !important; margin:0 !important; padding:0 !important; }
/* 3) hhb skin: icons drew twice (mask ::before + inline SVG). Keep the mask, drop the duplicate SVG. */
html body.ui-skin-hhb #switch-room-icon > svg, html body.ui-skin-hhb #collapse-toggle > svg,
html body.ui-skin-hhb #pm-icon > svg, html body.ui-skin-hhb #group-chat-icon > svg,
html body.ui-skin-hhb #friends-icon > svg, html body.ui-skin-hhb #profile-icon > svg,
html body.ui-skin-hhb #top-users-icon > svg, html body.ui-skin-hhb #most-loved-icon > svg,
html body.ui-skin-hhb #games-icon > svg, html body.ui-skin-hhb #mentions-icon > svg,
html body.ui-skin-hhb #settings-icon > svg, html body.ui-skin-hhb #help-icon > svg,
html body.ui-skin-hhb #suggestion-icon > svg, html body.ui-skin-hhb #mod-tab-icon > svg,
html body.ui-skin-hhb #server-icon > svg, html body.ui-skin-hhb #install-app-icon > svg,
html body.ui-skin-hhb #story-wall-icon > svg, html body.ui-skin-hhb #light-chat-toggle-icon > svg,
html body.ui-skin-hhb #emoji-toggle > svg, html body.ui-skin-hhb #doodle-btn > svg{ display:none !important; }
/* rail icons with no mask art of their own: keep their SVG, drop the empty mask square */
html body.ui-skin-hhb .rail .ic:not(#logout-icon):not(#switch-room-icon):not(#collapse-toggle):not(#pm-icon):not(#group-chat-icon):not(#friends-icon):not(#profile-icon):not(#top-users-icon):not(#most-loved-icon):not(#games-icon):not(#mentions-icon):not(#settings-icon):not(#help-icon):not(#suggestion-icon):not(#mod-tab-icon):not(#server-icon):not(#install-app-icon):not(#story-wall-icon):not(#light-chat-toggle-icon)::before{
  display:none !important; content:none !important;
}
html body.ui-skin-hhb .rail .ic:not(#logout-icon) > svg{ width:18px; height:18px; }

/* 5) Grok skin only (2026-10-02 17:45 AST): colorful mobile bottom-nav + More drawer icons.
      Each icon has its own color; the active tab gets a filled pill in its color with a white icon.
      HHB and other skins untouched. Remove this block to go back to the plain icons. */
@media (max-width:768px){
  html body.ui-skin-grok #mb-tab-chat{     --nc:#3b82f6; } /* chat: blue */
  html body.ui-skin-grok #mb-tab-messages{ --nc:#06b6d4; } /* messages: cyan */
  html body.ui-skin-grok #mb-tab-games{    --nc:#f59e0b; } /* games: amber */
  html body.ui-skin-grok #mb-tab-mentions{ --nc:#ec4899; } /* mentions/notifications: pink */
  html body.ui-skin-grok #mb-tab-users{    --nc:#22c55e; } /* users: green */
  html body.ui-skin-grok #mb-tab-tools{    --nc:#f97316; } /* radio: orange */
  html body.ui-skin-grok #mb-tab-story{    --nc:#ef4444; } /* story: red */
  html body.ui-skin-grok #mb-tab-more{     --nc:#14b8a6; } /* more: teal */
  html body.ui-skin-grok .mobile-bottom-nav .mb-item{ color:var(--nc, #5c5674) !important; }
  html body.ui-skin-grok .mobile-bottom-nav .mb-item .mb-icon svg,
  html body.ui-skin-grok .mobile-bottom-nav .mb-item .mb-icon svg *{ fill:var(--nc, currentColor) !important; }
  html body.ui-skin-grok .mobile-bottom-nav .mb-item.active .mb-icon{
    background:var(--nc, #8b5cf6) !important;
    background:linear-gradient(145deg, color-mix(in srgb, var(--nc) 80%, #fff), var(--nc)) !important;
    border-color:transparent !important; color:#fff !important;
    box-shadow:0 4px 12px color-mix(in srgb, var(--nc) 40%, transparent) !important;
  }
  html body.ui-skin-grok .mobile-bottom-nav .mb-item.active .mb-icon svg,
  html body.ui-skin-grok .mobile-bottom-nav .mb-item.active .mb-icon svg *{ fill:#fff !important; }

  /* More drawer: color by icon name (set by hhb-ui-fix.js) */
  html body.ui-skin-grok .mobile-more-screen .mm-icon svg.hhb-com-ico{ fill:var(--nc, currentColor) !important; }
  html body.ui-skin-grok .mobile-more-screen .mm-icon svg.hhb-com-ico *{ fill:inherit !important; }
  html body.ui-skin-grok .mobile-more-screen .mm-icon svg.hhb-com-ico,
  html body.ui-skin-grok .mobile-more-screen .mm-icon svg.hhb-com-ico *{ stroke:none !important; } /* no purple outline: solid colored glyph */
  html body.ui-skin-grok svg.hhb-com-ico[data-ico="swap_horiz"]{ --nc:#f97316; }           /* switch room: orange */
  html body.ui-skin-grok svg.hhb-com-ico[data-ico="play_circle"]{ --nc:#ef4444; }          /* story: red */
  html body.ui-skin-grok svg.hhb-com-ico[data-ico="bolt"]{ --nc:#eab308; }                 /* light chat: yellow */
  html body.ui-skin-grok svg.hhb-com-ico[data-ico="chat_bubble_outline"]{ --nc:#06b6d4; }  /* messages: cyan */
  html body.ui-skin-grok svg.hhb-com-ico[data-ico="group_add"]{ --nc:#22c55e; }            /* friends: green */
  html body.ui-skin-grok svg.hhb-com-ico[data-ico="group"]{ --nc:#22c55e; }                /* users: green */
  html body.ui-skin-grok svg.hhb-com-ico[data-ico="tag"]{ --nc:#6366f1; }                  /* group chat: indigo */
  html body.ui-skin-grok svg.hhb-com-ico[data-ico="manage_accounts"]{ --nc:#8b5cf6; }      /* profile: violet */
  html body.ui-skin-grok svg.hhb-com-ico[data-ico="leaderboard"]{ --nc:#0ea5e9; }          /* top users: sky */
  html body.ui-skin-grok svg.hhb-com-ico[data-ico="emoji_events"]{ --nc:#f59e0b; }         /* most loved: gold */
  html body.ui-skin-grok svg.hhb-com-ico[data-ico="tune"]{ --nc:#a855f7; }                 /* settings: purple */
  html body.ui-skin-grok svg.hhb-com-ico[data-ico="help_outline"]{ --nc:#3b82f6; }         /* help: blue */
  html body.ui-skin-grok svg.hhb-com-ico[data-ico="lightbulb_outline"]{ --nc:#eab308; }    /* suggestion: yellow */
  html body.ui-skin-grok svg.hhb-com-ico[data-ico="radio"]{ --nc:#f97316; }                /* radio: orange */
  html body.ui-skin-grok svg.hhb-com-ico[data-ico="logout"]{ --nc:#ef4444; }               /* log out: red */
  html body.ui-skin-grok svg.hhb-com-ico[data-ico="get_app"]{ --nc:#10b981; }              /* install: emerald */
  html body.ui-skin-grok svg.hhb-com-ico[data-ico="casino"]{ --nc:#f59e0b; }               /* games: amber */
  html body.ui-skin-grok svg.hhb-com-ico[data-ico="alternate_email"]{ --nc:#ec4899; }      /* mentions: pink */
  html body.ui-skin-grok svg.hhb-com-ico[data-ico="admin_panel_settings"]{ --nc:#6366f1; } /* mod panel: indigo */
}

/* 6) Grok skin only (2026-10-02 18:20 AST): composer emoji, doodle and send match the bottom-nav icon size
      (mobile 2026-10-22 AST: 27px box, 17px glyph, ~20% smaller; invisible ::after halo keeps ~37px tap target). The input grows/pads so nothing overlaps or gets cut off. HHB untouched.
      Ids are doubled on purpose: hhb-mobile-simple.css gets re-ordered after this file at runtime. */
@media (max-width:768px){
  html body.ui-skin-grok .composer #emoji-toggle#emoji-toggle,
  html body.ui-skin-grok .composer #doodle-btn#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:17px !important;
    top:50% !important; bottom:auto !important; transform:translateY(-50%) !important; margin:0 !important;
  }
  html body.ui-skin-grok .composer #emoji-toggle#emoji-toggle{ left:13px !important; }
  html body.ui-skin-grok .composer #doodle-btn#doodle-btn{ left:44px !important; }
  html body.ui-skin-grok .composer #emoji-toggle#emoji-toggle > svg,
  html body.ui-skin-grok .composer #doodle-btn#doodle-btn > svg{ width:17px !important; height:17px !important; }
  html body.ui-skin-grok .composer #msg-input#msg-input{
    height:32px !important; min-height:32px !important; max-height:32px !important; font-size:16px !important; line-height:32px !important; padding-top:0 !important; padding-bottom:0 !important; padding-left:76px !important; padding-right:12px !important;
    min-width:0 !important; flex:1 1 auto !important; box-sizing:border-box !important;
  }
  html body.ui-skin-grok .composer #send-btn#send-btn{
    width:28.4px !important; height:28.4px !important; min-width:28.4px !important; min-height:28.4px !important;
    max-width:28.4px !important; max-height:28.4px !important; font-size:14.7px !important; line-height:28.4px !important;
    padding:0 !important; flex:0 0 28.4px !important; align-self:center !important; position:relative !important;
  }
  html body.ui-skin-grok .composer #emoji-toggle#emoji-toggle::after,
  html body.ui-skin-grok .composer #doodle-btn#doodle-btn::after,
  html body.ui-skin-grok .composer #send-btn#send-btn::after{ content:""; position:absolute; inset:-4px; } /* send +5% (2026-10-22 AST) */
  /* 2026-10-22 AST: typing bar ~20% shorter to match (input 40->32px, row 44->~36px); 16px text avoids iOS zoom. */
  html body.ui-skin-grok .composer.composer{ min-height:36px !important; height:auto !important; padding-top:2px !important; padding-bottom:2px !important; align-items:center !important; }
  html body.ui-skin-grok .composer.composer > *{ min-height:0 !important; height:auto !important; align-items:center !important; }
  html body.ui-skin-grok .composer #emoji-toggle#emoji-toggle#emoji-toggle,
  html body.ui-skin-grok .composer #doodle-btn#doodle-btn#doodle-btn{ font-size:14px !important; line-height:27px !important; }
}
@media (min-width:769px){
  html body.ui-skin-grok .emoji-toggle-row > .comp-ic,
  html body.ui-skin-grok .emoji-toggle-row > #emoji-toggle#emoji-toggle,
  html body.ui-skin-grok .emoji-toggle-row > #doodle-btn#doodle-btn,
  html body.ui-skin-grok #radio-toggle#radio-toggle,
  html body.ui-skin-grok #voice-note-btn#voice-note-btn,
  html body.ui-skin-grok #call-btn#call-btn{ /* same row: keep it uniform */
    width:34px !important; height:34px !important; min-width:34px !important; min-height:34px !important;
    max-width:34px !important; max-height:34px !important;
  }
  html body.ui-skin-grok .emoji-toggle-row > .comp-ic > svg,
  html body.ui-skin-grok .emoji-toggle-row > #emoji-toggle#emoji-toggle > svg,
  html body.ui-skin-grok .emoji-toggle-row > #doodle-btn#doodle-btn > svg{ width:22px !important; height:22px !important; }
  html body.ui-skin-grok .composer #send-btn#send-btn{
    width:34px !important; height:34px !important; min-width:34px !important; min-height:34px !important;
    max-width:34px !important; max-height:34px !important; font-size:18px !important; padding:0 !important;
    flex:0 0 34px !important; align-self:center !important;
  }
}

/* 7) HHB skin restyled to match hihellobye.com (2026-10-02 AST). HHB only; every rule is scoped to
   body.ui-skin-hhb (class doubled so it outranks hhb-mobile-simple.css, which loads later). Grok untouched. */
html body.ui-skin-hhb.ui-skin-hhb{
  --purple:#c000f0; --hhb-acc:#c000f0; --hhb-acc-dim:rgba(192,0,240,.10);
  --hhb-bg:#eeeef6; --hhb-panel:#f3f3fb; --hhb-text:#282848; --hhb-dim:#6060a0; --hhb-mute:#9898c8; --hhb-line:#d8d8ea;
  background:#eeeef6 !important; color:#282848 !important;
  font-family:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif !important; font-size:14px;
}
html body.ui-skin-hhb.ui-skin-hhb :is(input,button,textarea,select){ font-family:inherit; }
html body.ui-skin-hhb.ui-skin-hhb .app-shell{ background:#eeeef6 !important; padding:0 !important; gap:0 !important; border:0 !important; box-shadow:none !important; }
html body.ui-skin-hhb.ui-skin-hhb .room{ background:#eeeef6 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; margin:0 !important; }
html body.ui-skin-hhb.ui-skin-hhb .room::before{ display:none !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log{ background:#eeeef6 !important; padding:4px 0 !important; }

/* header: one row, ~32px, amber tint, actions inline */
html body.ui-skin-hhb.ui-skin-hhb #topic-bar.topic-bar{
  display:flex !important; flex-wrap:nowrap !important; align-items:center !important; gap:8px !important;
  height:32px !important; min-height:32px !important; max-height:32px !important; padding:0 8px 0 12px !important;
  background:#f1ebe2 !important; border:0 !important; border-bottom:1px solid #dcd6d0 !important; border-radius:0 !important; box-shadow:none !important;
  overflow:hidden !important; font-size:12px !important;
}
html body.ui-skin-hhb.ui-skin-hhb #topic-bar #topic-label{ color:#6060a0 !important; font-weight:400 !important; font-size:12px !important; gap:5px !important; }
html body.ui-skin-hhb.ui-skin-hhb #topic-bar #topic-label::before{ content:""; width:14px; height:14px; background:#f0b42a; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 11v2h4v-2h-4zm-2 6.61c.96.71 2.21 1.65 3.2 2.39.4-.53.8-1.07 1.2-1.6-.99-.74-2.24-1.68-3.2-2.4-.4.54-.8 1.08-1.2 1.61zM20.4 5.6c-.4-.53-.8-1.07-1.2-1.6-.99.74-2.24 1.68-3.2 2.4.4.53.8 1.07 1.2 1.6.96-.72 2.21-1.65 3.2-2.4zM4 9c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2h1v4h2v-4h1l5 3V6L8 9H4zm11.5 3c0-1.33-.58-2.53-1.5-3.35v6.69c.92-.81 1.5-2.01 1.5-3.34z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 11v2h4v-2h-4zm-2 6.61c.96.71 2.21 1.65 3.2 2.39.4-.53.8-1.07 1.2-1.6-.99-.74-2.24-1.68-3.2-2.4-.4.54-.8 1.08-1.2 1.61zM20.4 5.6c-.4-.53-.8-1.07-1.2-1.6-.99.74-2.24 1.68-3.2 2.4.4.53.8 1.07 1.2 1.6.96-.72 2.21-1.65 3.2-2.4zM4 9c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2h1v4h2v-4h1l5 3V6L8 9H4zm11.5 3c0-1.33-.58-2.53-1.5-3.35v6.69c.92-.81 1.5-2.01 1.5-3.34z'/%3E%3C/svg%3E") center/contain no-repeat; }
html body.ui-skin-hhb.ui-skin-hhb #topic-bar #topic-collapse-arrow{ display:none !important; }
html body.ui-skin-hhb.ui-skin-hhb #topic-bar #topic-bar-text{ flex:1 1 auto !important; min-width:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; font-size:13px !important; }
html body.ui-skin-hhb.ui-skin-hhb #topic-bar #topic-text{ font-size:13px !important; font-weight:500 !important; }
html body.ui-skin-hhb.ui-skin-hhb #topic-bar #topic-bar-actions{ flex:0 0 auto !important; display:flex !important; align-items:center !important; gap:4px !important; margin:0 !important; width:auto !important; }
html body.ui-skin-hhb.ui-skin-hhb #topic-bar .topic-action-btn{
  height:22px !important; min-width:24px !important; padding:0 5px !important; font-size:12px !important; line-height:20px !important;
  background:#e4e4f0 !important; border:1px solid #c8c8e0 !important; border-radius:4px !important; box-shadow:none !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
html body.ui-skin-hhb.ui-skin-hhb #topic-bar .reaction-pill{ background:#e4e4f0 !important; border:1px solid #c8c8e0 !important; border-radius:4px !important; font-size:11px !important; padding:0 4px !important; }

/* chat lines: tight, nick colour text, 14px / 1.35, small grey time at right */
html body.ui-skin-hhb.ui-skin-hhb #log#log .line{ padding:2px 12px !important; margin:0 !important; line-height:1.35 !important; font-size:14px !important;
  background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .line .line-row{ align-items:baseline !important; gap:8px !important; padding:0 !important; margin:0 !important; min-height:0 !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .line .mobile-msg-flow,
html body.ui-skin-hhb.ui-skin-hhb #log#log .line .msg-main{ line-height:1.35 !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .line .sender-head,
html body.ui-skin-hhb.ui-skin-hhb #log#log .line .sender-head .who,
html body.ui-skin-hhb.ui-skin-hhb #log#log .line .sender-head .wa-nick{ font-size:14px !important; font-weight:700 !important; line-height:1.35 !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .line .sender-head .who{ margin-right:6px !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .line .nick-mirror-arrow{ font-size:8px !important; color:#9898c8 !important; -webkit-text-fill-color:#9898c8 !important; margin-right:3px !important; vertical-align:1px; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .line .msg-main .txt{ font-size:14px !important; line-height:1.35 !important;
  color:var(--hhb-nc, #282848) !important; -webkit-text-fill-color:var(--hhb-nc, #282848) !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .line.hhb-ngrad .msg-main .txt{ background:var(--hhb-ngrad) !important; -webkit-background-clip:text !important; background-clip:text !important;
  color:transparent !important; -webkit-text-fill-color:transparent !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .line .line-row > .ts,
html body.ui-skin-hhb.ui-skin-hhb #log#log .line .ts{ margin-left:auto !important; font-size:10px !important; color:#9898c8 !important; -webkit-text-fill-color:#9898c8 !important;
  font-style:normal !important; font-weight:400 !important; white-space:nowrap !important; flex:0 0 auto !important; display:inline !important; }
/* mention: 2px bar + faint tint */
html body.ui-skin-hhb.ui-skin-hhb #log#log .line.mentioned{ background:rgba(192,0,240,.06) !important; box-shadow:inset 2px 0 0 #c000f0 !important; border:0 !important; }
/* bot / system lines -> flat italic notices */
html body.ui-skin-hhb.ui-skin-hhb #log#log .chat-alert-line,
html body.ui-skin-hhb.ui-skin-hhb #log#log .join-note:not(.whisper-alert-line):not(.whisper-message-line):not(.story-notice-line){
  display:flex !important; align-items:baseline !important; gap:8px !important;
  background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  margin:0 !important; padding:2px 12px !important; font-size:12px !important; line-height:1.35 !important;
  font-style:italic !important; font-weight:400 !important; color:#6060a0 !important; text-align:left !important; justify-content:flex-start !important;
}
html body.ui-skin-hhb.ui-skin-hhb #log#log .chat-alert-line .ts{ margin-left:auto !important; font-style:normal !important; }
/* reply: small inline chip */
html body.ui-skin-hhb.ui-skin-hhb #log#log .reply-chip{
  display:inline-flex !important; align-items:baseline !important; gap:4px !important; width:fit-content !important; max-width:85% !important;
  margin:2px 0 1px !important; padding:1px 6px !important; font-size:11px !important; line-height:1.3 !important; font-style:normal !important;
  background:#f3f3fb !important; color:#6060a0 !important; border:1px solid #d8d8ea !important; border-left:2px solid #c000f0 !important;
  border-radius:4px !important; box-shadow:none !important; overflow:hidden !important;
}
html body.ui-skin-hhb.ui-skin-hhb #log#log .reply-chip .rc-name{ font-weight:600 !important; flex:0 0 auto !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .reply-chip > span:not(.rc-name):not(.rc-ts){ flex:0 1 auto !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; word-break:normal !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .reply-chip .rc-ts{ font-size:9px !important; color:#9898c8 !important; flex:0 0 auto !important; }

/* composer: one flat grey bar, mic | call | input | send with 1px dividers (icon-only) */
html body.ui-skin-hhb.ui-skin-hhb .above-composer.above-composer{ background:#f3f3fb !important; border-top:1px solid #dcdcec !important; padding:6px 8px !important; gap:0 !important; box-shadow:none !important; }
html body.ui-skin-hhb.ui-skin-hhb #voice-note-btn#voice-note-btn,
html body.ui-skin-hhb.ui-skin-hhb #call-btn#call-btn,
html body.ui-skin-hhb.ui-skin-hhb #send-btn#send-btn{
  width:40px !important; min-width:40px !important; height:38px !important; margin:0 !important; padding:0 !important;
  background:#e8e8f2 !important; color:#9898c8 !important; box-shadow:none !important; transform:none !important;
  border:1px solid #c8c8e0 !important; border-radius:0 !important; border-left-width:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important; flex:0 0 auto !important;
}
html body.ui-skin-hhb.ui-skin-hhb #voice-note-btn#voice-note-btn{ border-left-width:1px !important; border-radius:6px 0 0 6px !important; border-right-color:#d8d8ea !important; }
html body.ui-skin-hhb.ui-skin-hhb #call-btn#call-btn{ border-right-color:#d8d8ea !important; }
html body.ui-skin-hhb.ui-skin-hhb #voice-note-btn#voice-note-btn::before{ background:currentColor !important; }
html body.ui-skin-hhb.ui-skin-hhb #voice-note-btn#voice-note-btn.active{ color:#e14545 !important; }
html body.ui-skin-hhb.ui-skin-hhb #call-btn#call-btn svg{ color:#9898c8 !important; width:18px !important; height:18px !important; }
html body.ui-skin-hhb.ui-skin-hhb .above-composer #msg-input#msg-input{
  flex:1 1 auto !important; min-width:0 !important; height:38px !important; margin:0 !important; padding:0 12px !important;
  background:#e8e8f2 !important; color:#282848 !important; font-size:14px !important; box-shadow:none !important;
  border:1px solid #c8c8e0 !important; border-left:0 !important; border-right:0 !important; border-radius:0 !important; outline:none !important;
}
html body.ui-skin-hhb.ui-skin-hhb .above-composer #msg-input#msg-input::placeholder{ color:#9898c8 !important; font-style:italic; }
html body.ui-skin-hhb.ui-skin-hhb #send-btn#send-btn{ border-left-width:1px !important; border-left-color:#d8d8ea !important; border-radius:0 6px 6px 0 !important; font-size:18px !important; color:#a8a8d0 !important; }
html body.ui-skin-hhb.ui-skin-hhb #send-btn#send-btn:hover{ color:#c000f0 !important; }
html body.ui-skin-hhb.ui-skin-hhb #guest-register-btn#guest-register-btn{ margin-left:8px !important; background:#c000f0 !important; color:#fff !important; border:0 !important; box-shadow:none !important; border-radius:6px !important; }
html body.ui-skin-hhb.ui-skin-hhb #scroll-to-bottom-btn{ background:#c000f0 !important; box-shadow:0 2px 8px rgba(40,40,72,.25) !important; }

/* user list: no avatar ring, coloured LV pills, flat search */
html body.ui-skin-hhb.ui-skin-hhb .people .av-wrap .av{ outline:0 !important; border:0 !important; box-shadow:none !important; }
html body.ui-skin-hhb.ui-skin-hhb .people .search input,
html body.ui-skin-hhb.ui-skin-hhb #search-users{ background:#e8e8f2 !important; border:1px solid #c8c8e0 !important; border-radius:8px !important; box-shadow:none !important; color:#282848 !important; font-size:13px !important; }
html body.ui-skin-hhb.ui-skin-hhb .people .section-label{ font-family:'IBM Plex Mono', ui-monospace, monospace !important; font-size:10px !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:#6060a0 !important; font-weight:600 !important; }
html body.ui-skin-hhb.ui-skin-hhb .people .person{ background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; }
html body.ui-skin-hhb.ui-skin-hhb .people .person:hover{ background:rgba(192,0,240,.05) !important; }
html body.ui-skin-hhb.ui-skin-hhb .people .badge-lv{ border-radius:8px !important; padding:1px 7px !important; font-size:10px !important; font-weight:700 !important; color:#fff !important; line-height:14px !important; }
html body.ui-skin-hhb.ui-skin-hhb .people .badge-lv[data-hhb-lv="1"]{ background:#d9577a !important; }
html body.ui-skin-hhb.ui-skin-hhb .people .badge-lv[data-hhb-lv="2"]{ background:#a6c33a !important; color:#28301a !important; }
html body.ui-skin-hhb.ui-skin-hhb .people .badge-lv[data-hhb-lv="3"]{ background:#4cbd4c !important; }
html body.ui-skin-hhb.ui-skin-hhb .people .badge-lv[data-hhb-lv="4"]{ background:#3fb7a8 !important; }
html body.ui-skin-hhb.ui-skin-hhb .people .badge-lv[data-hhb-lv="5"]{ background:#7cc7e0 !important; color:#1c3a48 !important; }
html body.ui-skin-hhb.ui-skin-hhb .people .badge-lv[data-hhb-lv="6"]{ background:#8c9eea !important; }
html body.ui-skin-hhb.ui-skin-hhb .people .badge-lv[data-hhb-lv="7"]{ background:#d4913b !important; }
html body.ui-skin-hhb.ui-skin-hhb .people .badge-lv[data-hhb-lv="8"]{ background:#4b3fd9 !important; }

@media (max-width:768px){
  /* People: full-screen page with a back arrow, nav stays visible (as on .com) */
  html body.ui-skin-hhb.ui-skin-hhb #people-panel.people.mobile-open{
    left:0 !important; right:0 !important; top:0 !important; width:100vw !important; min-width:0 !important; max-width:100vw !important;
    bottom:calc(50px + env(safe-area-inset-bottom)) !important; background:#fafaff !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; z-index:60 !important;
  }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel .people-mobile-resizer{ display:none !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel .people-head{ height:48px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 48px !important;
    font-size:0 !important; color:#282848 !important;
    background:#eeeef6 !important; border-bottom:1px solid #dcdcec !important; margin:0 0 8px !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel .people-head::after{ content:"People"; font-size:15px; font-weight:600; letter-spacing:0; text-transform:none; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel #people-close-tab{
    display:flex !important; position:absolute !important; top:8px !important; left:8px !important; bottom:auto !important; transform:none !important;
    width:32px !important; height:32px !important; border-radius:6px !important; background:transparent !important; box-shadow:none !important; border:0 !important;
    font-size:0 !important; color:#c000f0 !important; z-index:5 !important;
  }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel #people-close-tab::before{ content:""; width:24px; height:24px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E") center/contain no-repeat; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel .search{ margin:0 12px 8px !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel .person{ padding:8px 14px !important; gap:12px !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel .av-wrap,
  html body.ui-skin-hhb.ui-skin-hhb #people-panel .av-wrap .av{ width:40px !important; height:40px !important; min-width:40px !important; }

  /* bottom nav: flat, no pill, magenta active icon, labels on the others */
  html body.ui-skin-hhb.ui-skin-hhb .mobile-bottom-nav.mobile-bottom-nav{ background:#eeeef6 !important; border-top:1px solid #dcdcec !important; box-shadow:none !important;
    height:calc(50px + env(safe-area-inset-bottom)) !important; }
  html body.ui-skin-hhb.ui-skin-hhb .mobile-bottom-nav .mb-item{ color:#6060a0 !important; font-size:10px !important; font-weight:500 !important; gap:2px !important; background:transparent !important; }
  html body.ui-skin-hhb.ui-skin-hhb .mobile-bottom-nav .mb-item.active{ color:#c000f0 !important; }
  html body.ui-skin-hhb.ui-skin-hhb .mobile-bottom-nav .mb-item.active::after{ display:none !important; }
  html body.ui-skin-hhb.ui-skin-hhb .mobile-bottom-nav .mb-item .mb-icon,
  html body.ui-skin-hhb.ui-skin-hhb .mobile-bottom-nav .mb-item.active .mb-icon{ background:transparent !important; box-shadow:none !important; border:0 !important; border-radius:0 !important;
    width:auto !important; height:auto !important; padding:0 !important; color:inherit !important; transform:none !important; }
  html body.ui-skin-hhb.ui-skin-hhb .mobile-bottom-nav .mb-icon.hhb-com::before{ display:none !important; }
  html body.ui-skin-hhb.ui-skin-hhb .mobile-bottom-nav .mb-icon svg.hhb-com-ico{ display:block !important; width:24px !important; height:24px !important; fill:currentColor !important; stroke:none !important; }
  html body.ui-skin-hhb.ui-skin-hhb .mobile-bottom-nav .mb-item.active .mb-icon svg.hhb-com-ico{ width:28px !important; height:28px !important; }

  /* More: full-screen list, plain magenta icons, dividers */
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen.mobile-more-screen{
    left:0 !important; right:0 !important; top:0 !important; width:100vw !important; max-width:100vw !important; bottom:calc(50px + env(safe-area-inset-bottom)) !important;
    background:#fafaff !important; box-shadow:none !important; border:0 !important; border-radius:0 !important;
  }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen .mobile-more-head{ height:48px !important; padding:0 !important; justify-content:center !important; background:#eeeef6 !important; border-bottom:1px solid #dcdcec !important; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen .mobile-more-head::after{ content:"More"; font-size:15px; font-weight:600; color:#282848; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen .mm-back{ position:absolute !important; left:8px !important; top:8px !important; width:32px !important; height:32px !important;
    background:transparent !important; border:0 !important; box-shadow:none !important; color:#c000f0 !important; display:flex !important; align-items:center !important; justify-content:center !important; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen .mm-back svg{ display:none !important; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen .mm-back::before{ content:""; width:24px; height:24px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E") center/contain no-repeat; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen .mobile-more-list{ padding:0 !important; gap:0 !important; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen .mm-row{ margin:0 !important; padding:0 16px !important; min-height:52px !important; gap:18px !important;
    background:transparent !important; border:0 !important; border-bottom:1px solid #e2e2ee !important; border-radius:0 !important; box-shadow:none !important;
    font-size:14px !important; font-weight:400 !important; color:#282848 !important; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen .mm-row .mm-icon{ width:24px !important; height:24px !important; min-width:24px !important; background:transparent !important; border:0 !important;
    box-shadow:none !important; border-radius:0 !important; color:#c000f0 !important; padding:0 !important; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen .mm-row .mm-icon svg{ width:24px !important; height:24px !important; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen .mm-row .mm-icon svg.hhb-com-ico{ fill:currentColor !important; stroke:none !important; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen .mm-row.mm-danger,
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen .mm-row.mm-danger .mm-icon{ color:#e14545 !important; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen .mm-row .mm-chev{ color:#9898c8 !important; opacity:1 !important; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen .mm-close-bottom{ display:none !important; }
}

@media (min-width:769px){
  /* desktop: un-mirrored (icon bar left, people ~210px, chat right) */
  html body.ui-skin-hhb.ui-skin-hhb .app-shell.app-shell{ flex-direction:row !important; }
  html body.ui-skin-hhb.ui-skin-hhb .rail.rail{ width:42px !important; min-width:42px !important; flex:0 0 42px !important; padding:6px 0 !important; gap:2px !important;
    background:#efe8f8 !important; border:0 !important; border-right:1px solid #dcdcec !important; box-shadow:none !important; }
  html body.ui-skin-hhb.ui-skin-hhb .rail .brand{ width:28px !important; height:28px !important; border-radius:6px !important; background:#c000f0 !important; margin:0 auto 6px !important; font-size:13px !important; box-shadow:none !important; }
  html body.ui-skin-hhb.ui-skin-hhb .rail .ic{ width:32px !important; height:30px !important; min-height:30px !important; margin:0 auto !important; background:transparent !important; border:0 !important;
    box-shadow:none !important; border-radius:6px !important; color:#6060a0 !important; }
  html body.ui-skin-hhb.ui-skin-hhb .rail .ic:hover{ background:rgba(96,96,160,.08) !important; }
  html body.ui-skin-hhb.ui-skin-hhb .rail .ic > svg{ color:#6060a0 !important; }
  html body.ui-skin-hhb.ui-skin-hhb:not(:has(.people.collapsed)) .rail #collapse-toggle{ background:rgba(192,0,240,.12) !important; color:#c000f0 !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel.people{ width:210px !important; min-width:210px !important; max-width:210px !important; flex:0 0 210px !important;
    background:#f3f3fb !important; border:0 !important; border-right:1px solid #dcdcec !important; box-shadow:none !important; border-radius:0 !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel.people.collapsed{ display:none !important; }
  html body.ui-skin-hhb.ui-skin-hhb #col-resizer{ display:none !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel .people-head{ font-size:11px !important; letter-spacing:.08em !important; color:#6060a0 !important; padding:10px 12px 6px !important; height:auto !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel .search{ margin:0 8px 6px !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel .person{ padding:5px 10px !important; gap:8px !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel .av-wrap,
  html body.ui-skin-hhb.ui-skin-hhb #people-panel .av-wrap .av{ width:32px !important; height:32px !important; min-width:32px !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel .section-label{ padding-left:10px !important; padding-right:10px !important; }
}

/* 8) HHB tweaks (2026-10-02 19:00 AST), matched to hihellobye.com's own CSS/JS:
   nick = IBM Plex Mono 14px/700 (.font-nick), message = 14px, sender's weight, line-height 1.35 (.chat-row);
   mobile nav = icon, 2px gap, 0.58rem/500 label (.bottom-nav-btn / .bottom-nav-label);
   join/leave = .chat-system-notice (italic 0.75rem, nick in the same dim colour, person icon, small ghost time);
   room call: recorder icon swaps for the existing mute toggle (#mic-toggle-btn -> toggleGroupMic) while in the call. */
html body.ui-skin-hhb.ui-skin-hhb #log#log#log#log .line .sender-head,
html body.ui-skin-hhb.ui-skin-hhb #log#log#log#log .line .sender-head .who,
html body.ui-skin-hhb.ui-skin-hhb #log#log#log#log .line .sender-head .wa-nick{ font-family:'IBM Plex Mono', ui-monospace, monospace !important; font-size:calc(14px * var(--hhb-display-scale, 1)) !important; font-weight:700 !important; font-style:normal !important; letter-spacing:0 !important; }
@media (max-width:768px){
  html body.ui-skin-hhb.ui-skin-hhb .mobile-bottom-nav .mb-item{ justify-content:center !important; gap:2px !important; padding:4px 0 !important; }
  html body.ui-skin-hhb.ui-skin-hhb .mobile-bottom-nav .mb-item .mb-icon,
  html body.ui-skin-hhb.ui-skin-hhb .mobile-bottom-nav .mb-item.active .mb-icon{ margin:0 !important; line-height:0 !important; }
  html body.ui-skin-hhb.ui-skin-hhb .mobile-bottom-nav .mb-item::after{ font-size:.58rem !important; font-weight:500 !important; letter-spacing:.02em !important; line-height:1.55 !important; margin:0 !important; padding:0 !important; }
}
html body.ui-skin-hhb.ui-skin-hhb #log#log .join-note:not(.whisper-alert-line):not(.whisper-message-line):not(.story-notice-line):not(.mod-action-note):is(:has(> span[style*='16a34a']:first-child), :has(> span[style*='e14545']:first-child)){ display:block !important; padding:4px 12px !important; font-size:.75rem !important; font-style:italic !important; color:#6060a0 !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .join-note:not(.whisper-alert-line):not(.whisper-message-line):not(.story-notice-line):not(.mod-action-note):is(:has(> span[style*='16a34a']:first-child), :has(> span[style*='e14545']:first-child)) > b{ color:inherit !important; -webkit-text-fill-color:currentColor !important; font-weight:400 !important; font-style:italic !important; background:none !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .join-note:not(.whisper-alert-line):not(.whisper-message-line):not(.story-notice-line):not(.mod-action-note):is(:has(> span[style*='16a34a']:first-child), :has(> span[style*='e14545']:first-child)) > span:first-child{ font-size:0 !important; display:inline-block !important; vertical-align:text-bottom !important; margin:0 6px 0 0 !important; position:static !important; top:auto !important; width:.9rem; height:.9rem; opacity:.7; background:currentColor !important; color:#6060a0 !important; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") center/contain no-repeat; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .join-note:not(.whisper-alert-line):not(.whisper-message-line):not(.story-notice-line):not(.mod-action-note):is(:has(> span[style*='16a34a']:first-child), :has(> span[style*='e14545']:first-child)) > span[style*='e14545']:first-child{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8c0-2.21-1.79-4-4-4S6 5.79 6 8s1.79 4 4 4 4-1.79 4-4zm3 2v2h6v-2h-6zM2 18v2h16v-2c0-2.66-5.33-4-8-4s-8 1.34-8 4z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8c0-2.21-1.79-4-4-4S6 5.79 6 8s1.79 4 4 4 4-1.79 4-4zm3 2v2h6v-2h-6zM2 18v2h16v-2c0-2.66-5.33-4-8-4s-8 1.34-8 4z'/%3E%3C/svg%3E"); }
html body.ui-skin-hhb.ui-skin-hhb #log#log .join-note:not(.whisper-alert-line):not(.whisper-message-line):not(.story-notice-line):not(.mod-action-note):is(:has(> span[style*='16a34a']:first-child), :has(> span[style*='e14545']:first-child)) > .ts{ display:inline !important; margin-left:4px !important; font-size:.6rem !important; color:#9898c8 !important; -webkit-text-fill-color:#9898c8 !important; font-style:normal !important; }
/* message text: 14px like .com (the viewer's HHB display-scale still applies, as .com applies its font-size setting) */
html body.ui-skin-hhb.ui-skin-hhb #log#log#log#log .line .msg-main .txt{ font-size:calc(14px * var(--hhb-display-scale, 1)) !important; line-height:1.35 !important; }
/* room call: hide the voice-note recorder, show the mute toggle in its place */
html body.ui-skin-hhb.ui-skin-hhb:has(#call-btn.in-call) #voice-note-btn#voice-note-btn,
html body.ui-skin-hhb.ui-skin-hhb.hhb-call-on #voice-note-btn#voice-note-btn{ display:none !important; }
html body.ui-skin-hhb.ui-skin-hhb #voice-note-btn#voice-note-btn, html body.ui-skin-hhb.ui-skin-hhb #mic-toggle-btn#mic-toggle-btn{ order:1 !important; }
html body.ui-skin-hhb.ui-skin-hhb #call-btn#call-btn{ order:2 !important; }
html body.ui-skin-hhb.ui-skin-hhb .above-composer #msg-input#msg-input{ order:3 !important; }
html body.ui-skin-hhb.ui-skin-hhb #send-btn#send-btn{ order:4 !important; }
html body.ui-skin-hhb.ui-skin-hhb #guest-register-btn#guest-register-btn{ order:5 !important; }
html body.ui-skin-hhb.ui-skin-hhb #mic-toggle-btn#mic-toggle-btn{
  width:40px !important; min-width:40px !important; height:38px !important; margin:0 !important; padding:0 !important; font-size:0 !important; line-height:0 !important;
  background:#e8e8f2 !important; color:#c000f0 !important; box-shadow:none !important; transform:none !important; position:static !important;
  border:1px solid #c8c8e0 !important; border-right-color:#d8d8ea !important; border-radius:6px 0 0 6px !important;
  align-items:center !important; justify-content:center !important; flex:0 0 auto !important; cursor:pointer;
}
html body.ui-skin-hhb.ui-skin-hhb #mic-toggle-btn#mic-toggle-btn::before{ content:""; width:20px; height:20px; display:block; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z'/%3E%3C/svg%3E") center/contain no-repeat; }
html body.ui-skin-hhb.ui-skin-hhb #mic-toggle-btn#mic-toggle-btn.muted{ color:#e14545 !important; background:#f6e6ec !important; }
html body.ui-skin-hhb.ui-skin-hhb #mic-toggle-btn#mic-toggle-btn.muted::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z'/%3E%3C/svg%3E"); }
html body.ui-skin-hhb.ui-skin-hhb #mic-toggle-btn#mic-toggle-btn.speaking:not(.muted){ color:#16a34a !important; }

/* 9) HHB join/leave lines (2026-10-02 19:30 AST): timestamp always at the END of the line, after the text.
   hhb-ui-fix.js tags each login/logout line (.hhb-jl), wraps nick+text in .hhb-jl-text and keeps .ts as the last
   child; no :has() needed, so older phone browsers get the same layout. Dim italic .com style kept. */
html body.ui-skin-hhb.ui-skin-hhb #log#log#log .join-note.hhb-jl{ display:flex !important; flex-wrap:nowrap !important; align-items:baseline !important; justify-content:flex-start !important; gap:0 !important;
  padding:4px 12px !important; margin:0 !important; font-size:.75rem !important; line-height:1.35 !important; font-style:italic !important; font-weight:400 !important;
  color:#6060a0 !important; background:transparent !important; border:0 !important; text-align:left !important; direction:ltr; }
html body.ui-skin-hhb.ui-skin-hhb #log#log#log .join-note.hhb-jl > span:first-child{ font-size:0 !important; display:inline-block !important; flex:0 0 auto !important; align-self:center !important; order:0 !important;
  width:.9rem !important; height:.9rem !important; margin:0 6px 0 0 !important; opacity:.7; background:currentColor !important; color:#6060a0 !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") center/contain no-repeat; }
html body.ui-skin-hhb.ui-skin-hhb #log#log#log .join-note.hhb-jl.hhb-jl-out > span:first-child{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8c0-2.21-1.79-4-4-4S6 5.79 6 8s1.79 4 4 4 4-1.79 4-4zm3 2v2h6v-2h-6zM2 18v2h16v-2c0-2.66-5.33-4-8-4s-8 1.34-8 4z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8c0-2.21-1.79-4-4-4S6 5.79 6 8s1.79 4 4 4 4-1.79 4-4zm3 2v2h6v-2h-6zM2 18v2h16v-2c0-2.66-5.33-4-8-4s-8 1.34-8 4z'/%3E%3C/svg%3E"); }
html body.ui-skin-hhb.ui-skin-hhb #log#log#log .join-note.hhb-jl > .hhb-jl-text{ flex:0 1 auto !important; min-width:0 !important; order:1 !important; overflow-wrap:anywhere; }
html body.ui-skin-hhb.ui-skin-hhb #log#log#log .join-note.hhb-jl > .hhb-jl-text > b{ color:inherit !important; -webkit-text-fill-color:currentColor !important; font-weight:400 !important; font-style:italic !important; background:none !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log#log .join-note.hhb-jl > .ts{ display:inline !important; order:99 !important; flex:0 0 auto !important; align-self:flex-end !important; line-height:16px !important; margin:0 0 0 auto !important; padding-left:10px !important; float:none !important; position:static !important;
  font-size:.6rem !important; font-style:normal !important; font-weight:400 !important; color:#9898c8 !important; -webkit-text-fill-color:#9898c8 !important; white-space:nowrap !important; }

/* 10) HHB people list = hihellobye.com user list (2026-10-02 19:40 AST), values from .com's CSS:
   header 36px uppercase .72rem/600 dim; search pill (radius 14, .78rem, icon); section labels Mono .67rem/700 uppercase
   with dot + fading line (Registered green, Guests/Away grey); rows padding 5px 8px, gap 9px, radius 8, 34px avatar,
   9px status dot; nick .85rem/500 in the user's own colour/font; status .72rem ghost; rank icon 14px + LV pill
   (.64rem/700, radius 8, 1px 6px) at the right of the name line; members sorted A-Z inside each section (hhb-ui-fix.js). */
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel{ background:#ece5f6 !important; }
@media (max-width:768px){ html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.mobile-open{ background:#fafaff !important; } }
@media (min-width:769px){
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .people-head{ height:36px !important; min-height:36px !important; display:flex !important; align-items:center !important; padding:0 12px !important; margin:0 !important;
    border-bottom:1px solid #5050a017 !important; color:#6060a0 !important; font-size:.72rem !important; font-weight:600 !important; letter-spacing:.08em !important; text-transform:uppercase !important; }
}
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .search{ position:relative !important; margin:0 !important; padding:6px 8px !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .search::before{ content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%); width:15px; height:15px; background:#9898c8; pointer-events:none; z-index:1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") center/contain no-repeat; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel #search-users{ width:100% !important; height:auto !important; padding:5px 8px 5px 28px !important; background:#eaeaf4 !important; border:1px solid #5050a02b !important;
  border-radius:14px !important; color:#0c0c22 !important; font-size:.78rem !important; line-height:1.4 !important; box-shadow:none !important; outline:none !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel #search-users:focus{ border-color:#c000f0 !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel #search-users::placeholder{ color:#9898c8 !important; }
/* section labels */
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .section-label{ display:flex !important; align-items:center !important; gap:7px !important; padding:0 10px 5px !important; margin:10px 0 0 !important; min-height:0 !important; height:auto !important;
  font-family:'IBM Plex Mono', ui-monospace, monospace !important; font-size:.67rem !important; font-weight:700 !important; letter-spacing:.08em !important; text-transform:uppercase !important; background:transparent !important; border:0 !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .section-label .sd{ width:6px !important; height:6px !important; min-width:6px !important; border-radius:50% !important; margin:0 !important; box-shadow:0 0 5px currentColor; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .section-label > span:not(.sd):not(.sec-chevron){ flex:1 1 auto !important; display:flex !important; align-items:center !important; gap:7px !important; min-width:0; white-space:nowrap; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .section-label > span:not(.sd):not(.sec-chevron)::after{ content:""; flex:1 1 auto; height:1px; background:linear-gradient(to right, currentColor, transparent); opacity:.19; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .section-label .hhb-sec-cnt{ font-weight:500; opacity:.7; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .section-label .sec-chevron{ font-size:9px !important; opacity:.45 !important; margin-left:4px !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .section-label[data-hhb-sec="registered"]{ color:#27ae60 !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .section-label[data-hhb-sec="registered"] .sd{ background:#27ae60 !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .section-label[data-hhb-sec="bot"]{ color:#ec4899 !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .section-label[data-hhb-sec="guests"], html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .section-label[data-hhb-sec="away"]{ color:#7f8c8d !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .section-label[data-hhb-sec="guests"] .sd, html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .section-label[data-hhb-sec="away"] .sd{ background:#7f8c8d !important; }
/* rows */
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .person{ display:flex !important; align-items:center !important; gap:9px !important; padding:5px 8px !important; margin:1px 4px !important; min-height:0 !important;
  border-radius:8px !important; background:transparent !important; border:0 !important; box-shadow:none !important; transition:background .12s; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .person:hover{ background:#e1e1ef !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .person .av-wrap,
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .person .av-wrap .av{ width:34px !important; height:34px !important; min-width:34px !important; max-width:34px !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .person .av-wrap .av{ border-radius:50% !important; outline:0 !important; border:0 !important; box-shadow:none !important; font-size:15px !important; font-weight:600 !important; font-family:'IBM Plex Sans', sans-serif !important; color:#fff; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .person .av-wrap .os{ width:9px !important; height:9px !important; border:2px solid #ece5f6 !important; border-radius:50% !important; bottom:0 !important; right:0 !important; left:auto !important; top:auto !important; box-shadow:none !important; }
@media (max-width:768px){ html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.mobile-open .person .av-wrap .os{ border-color:#fafaff !important; } }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .person .av-wrap .os.on{ background:#147840 !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .person .p-info{ display:flex !important; flex-direction:column !important; gap:1px !important; min-width:0 !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .person .p-name{ font-size:.85rem !important; font-weight:500 !important; line-height:1.35 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; max-width:100% !important; letter-spacing:0 !important; padding:3px 0 !important; margin:-3px 0 !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .person .p-status{ font-size:.72rem !important; line-height:1.2 !important; color:#9898c8 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; margin:0 !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .person > .badge-icon,
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .person > .level-icon{ display:inline-flex !important; align-items:center !important; flex:0 0 auto !important; margin:0 !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .person > .badge-icon{ margin-right:-6px !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .person:has(.p-status) > .badge-icon,
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .person:has(.p-status) > .level-icon{ align-self:flex-start !important; margin-top:3px !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .person .badge-icon > span{ width:14px !important; height:14px !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .person .badge-icon > span[title="Guest"]{ display:none !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .person .badge-icon > span[title="Registered"]{ color:#9898c8 !important; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E") center/contain no-repeat; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .person .badge-icon > span[title="Registered"] > svg{ display:none !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .person .badge-lv{ border-radius:8px !important; padding:1px 6px !important; font-weight:700 !important; font-size:.64rem !important; line-height:1.5 !important; font-family:'IBM Plex Sans', sans-serif !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.08) !important; letter-spacing:0 !important; min-width:0 !important; height:auto !important; }
/* LV colours as seen on .com (rankColor per level band); guests' LV.1 is pink there */
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .badge-lv[data-hhb-lv="1"]{ background:#cb9b4d !important; color:#111 !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .badge-lv[data-hhb-lv="g"]{ background:#db7093 !important; color:#fff !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .badge-lv[data-hhb-lv="2"]{ background:#aecb4d !important; color:#111 !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .badge-lv[data-hhb-lv="3"]{ background:#60cb4d !important; color:#111 !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .badge-lv[data-hhb-lv="4"]{ background:#6fd0c6 !important; color:#111 !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .badge-lv[data-hhb-lv="5"]{ background:#9adfe6 !important; color:#111 !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .badge-lv[data-hhb-lv="6"]{ background:#a3aef0 !important; color:#111 !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .badge-lv[data-hhb-lv="7"]{ background:#cf8c4a !important; color:#111 !important; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel .badge-lv[data-hhb-lv="8"]{ background:#422bda !important; color:#fff !important; }

/* 11) HHB MOBILE people = narrow right-hand drawer (2026-10-02 19:50 AST): ~43% of the width (150-180px),
   chat stays visible behind a dim backdrop (#hhb-people-backdrop, added by hhb-ui-fix.js; tap it to close),
   compact rows, small LV pill, role icon hidden. Desktop and grok untouched. */
#hhb-people-backdrop { display:none; }
@keyframes hhbDrawerIn { from { transform:translateX(100%); } to { transform:translateX(0); } }
@media (max-width:768px){
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open{
    left:auto !important; right:0 !important; top:0 !important; bottom:calc(50px + env(safe-area-inset-bottom)) !important;
    width:clamp(150px, 43vw, 180px) !important; min-width:0 !important; max-width:45vw !important;
    background:#fafaff !important; border-left:1px solid #5050a02b !important; border-radius:0 !important;
    box-shadow:-4px 0 18px rgba(40,40,72,.18) !important; z-index:60 !important; overflow:hidden !important;
    animation:hhbDrawerIn .18s ease-out;
  }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open .people-head{ height:40px !important; min-height:40px !important; justify-content:flex-start !important; padding:0 36px 0 12px !important; margin:0 !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open .people-head::after{ font-size:14px !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open #people-close-tab{ left:auto !important; right:4px !important; top:4px !important; width:32px !important; height:32px !important; color:#6060a0 !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open #people-close-tab::before{ width:20px !important; height:20px !important; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") center/contain no-repeat !important; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") center/contain no-repeat !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open .search{ padding:6px 6px !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open .search::before{ left:13px !important; width:13px !important; height:13px !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open #search-users{ padding:4px 6px 4px 24px !important; font-size:.74rem !important; min-width:0 !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open .section-label{ padding:0 8px 4px !important; margin-top:8px !important; font-size:.6rem !important; gap:5px !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open .section-label .sec-chevron{ display:none !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open .person{ gap:6px !important; padding:4px 6px !important; margin:1px 3px !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open .person .av-wrap,
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open .person .av-wrap .av{ width:28px !important; height:28px !important; min-width:28px !important; max-width:28px !important; font-size:13px !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open .person .av-wrap .os{ width:8px !important; height:8px !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open .person .p-info{ flex:1 1 auto !important; min-width:0 !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open .person .p-name{ font-size:.8rem !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open .person .p-status{ font-size:.66rem !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open .person > .badge-icon{ display:none !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open .person > .level-icon{ align-self:center !important; margin:0 !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open .person .badge-lv{ font-size:.55rem !important; padding:0 4px !important; line-height:1.45 !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open .person > :not(.av-wrap):not(.p-info):not(.level-icon){ max-width:40px; overflow:hidden; }
  /* backdrop: dims the chat, tap closes the drawer; bottom nav stays usable */
  html body.ui-skin-hhb.ui-skin-hhb #hhb-people-backdrop{ display:none; }
  html body.ui-skin-hhb.ui-skin-hhb:has(#people-panel.mobile-open) #hhb-people-backdrop{
    display:block; position:fixed; left:0; right:0; top:0; bottom:calc(50px + env(safe-area-inset-bottom)); z-index:59;
    background:rgba(20,20,40,.32); -webkit-tap-highlight-color:transparent; cursor:pointer;
  }
}
@media (min-width:769px){ html body.ui-skin-hhb.ui-skin-hhb #hhb-people-backdrop{ display:none !important; } }

/* 12) HHB topic bar auto-hide (2026-10-02 19:50 AST): hhb-ui-fix.js hides #topic-bar 10s after it appears
   (room load / topic change) and shows #hhb-topic-reveal, a small down-arrow at the LEFT end (correction 19:50 AST); tap it to show
   the topic again (it hides again after 10s). Mobile and desktop, HHB only. */
#hhb-topic-reveal { display:none; }
html body.ui-skin-hhb.ui-skin-hhb #topic-bar#topic-bar.topic-bar.hhb-topic-hidden { display:none !important; }
/* keep a 26px strip for the arrow so it never covers the first chat line */
html body.ui-skin-hhb.ui-skin-hhb .room:has(> #topic-bar.hhb-topic-hidden) #log#log { padding-top:26px !important; }
html body.ui-skin-hhb.ui-skin-hhb #topic-bar.hhb-topic-hidden ~ #hhb-topic-reveal {
  display:flex; align-items:center; justify-content:center; position:absolute; top:3px; left:8px; right:auto; z-index:30;
  width:30px; height:20px; padding:0; margin:0; border:1px solid #5050a02b; border-radius:10px;
  background:rgba(250,250,255,.92); box-shadow:0 1px 4px rgba(40,40,72,.12); color:#6060a0; cursor:pointer;
  -webkit-tap-highlight-color:transparent; animation:hhbTopicArrowIn .2s ease-out;
}
html body.ui-skin-hhb.ui-skin-hhb #hhb-topic-reveal::before { content:""; width:18px; height:18px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center/contain no-repeat; }
html body.ui-skin-hhb.ui-skin-hhb #hhb-topic-reveal:hover { color:#3b3b8f; background:#fff; }
html body.ui-skin-hhb.ui-skin-hhb #topic-bar:not(.hhb-topic-hidden) { animation:hhbTopicIn .2s ease-out; }
@keyframes hhbTopicIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@keyframes hhbTopicArrowIn { from { opacity:0; } to { opacity:1; } }
/* 14) HHB: "X is typing…" (and the "/" command list / reply chip) pushed the message input and Send off-screen
   (2026-10-02 20:21 AST). The composer row was nowrap while those items are flex-basis 100%. Now the row
   wraps them onto their own line above, and the typing line floats as a slim strip just above the composer, so
   the composer never moves or hides. Mobile + desktop, HHB only. */
html body.ui-skin-hhb.ui-skin-hhb .above-composer.above-composer{ flex-wrap:wrap !important; }
html body.ui-skin-hhb.ui-skin-hhb #main-typing-bar#main-typing-bar.visible{
  position:absolute !important; left:0 !important; right:0 !important; bottom:100% !important; top:auto !important;
  width:auto !important; height:20px !important; min-height:20px !important; margin:0 !important; padding:0 12px !important;
  display:flex !important; align-items:center !important; z-index:6 !important; pointer-events:none;
  background:rgba(243,243,251,.94) !important; border:0 !important; border-top:1px solid #e2e2ee !important;
}
/* 13) HHB mobile people drawer grows LEFT when a nick is tapped (2026-10-02 20:10 AST): hhb-ui-fix.js
   measures the longest nick and sets --hhb-dw on #people-panel + .hhb-drawer-wide (capped at screen - 40px);
   nicks never wrap. Closing the drawer drops back to the narrow width. Desktop and grok untouched. */
@media (max-width:768px){
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open { transition:width .2s ease-out, max-width .2s ease-out; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open .person .p-name { white-space:nowrap !important; overflow-wrap:normal !important; word-break:normal !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open.hhb-drawer-wide {
    width:var(--hhb-dw, 72vw) !important; max-width:calc(100vw - 40px) !important;
  }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open.hhb-drawer-wide .person .p-name {
    text-overflow:clip !important; overflow:visible !important; max-width:none !important;
  }
  /* measuring pass (one frame, no transition): let the panel size itself to its widest nick */
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open.hhb-drawer-measure {
    width:max-content !important; max-width:calc(100vw - 40px) !important; transition:none !important;
  }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open.hhb-drawer-measure .person .p-name {
    text-overflow:clip !important; overflow:visible !important; max-width:none !important;
  }
}
/* 16) HHB mobile: the "X is typing…" strip must never cover a chat line (2026-10-02 20:27 AST). The chat log
   always keeps a 22px empty band at its bottom, and the strip (20px, floating just above the composer) sits in that
   band, so the last message stays fully visible and nothing jumps when typing starts or stops. */
@media (max-width:768px){
  html body.ui-skin-hhb.ui-skin-hhb #log#log{ padding-bottom:22px !important; scroll-padding-bottom:22px; }
  html body.ui-skin-hhb.ui-skin-hhb #main-typing-bar#main-typing-bar.visible{ background:transparent !important; border-top:0 !important; }
}
/* 17) HHB mobile bottom nav slimmer, close to .com (2026-10-02 20:32 AST): bar 44px (was 50) and the iPhone
   home-indicator area is now padding UNDER the icons (before, the icons were centred in 50px + that area, so the bar
   looked very tall on iPhones). Icons 21px (active 22px, was 24/28), labels right under them. The page, the People
   drawer, its backdrop and the More screen all follow the new height. HHB only. */
@media (max-width:768px){
  html body.ui-skin-hhb.ui-skin-hhb{ padding-bottom:calc(44px + env(safe-area-inset-bottom)) !important; }
  html body.ui-skin-hhb.ui-skin-hhb .mobile-bottom-nav.mobile-bottom-nav{
    height:calc(44px + env(safe-area-inset-bottom)) !important; min-height:0 !important;
    padding:0 0 env(safe-area-inset-bottom) !important; box-sizing:border-box !important; align-items:stretch !important; }
  html body.ui-skin-hhb.ui-skin-hhb .mobile-bottom-nav .mb-item{ height:auto !important; min-height:0 !important; padding:3px 0 2px !important; gap:1px !important; justify-content:center !important; }
  html body.ui-skin-hhb.ui-skin-hhb .mobile-bottom-nav .mb-icon svg.hhb-com-ico{ width:21px !important; height:21px !important; }
  html body.ui-skin-hhb.ui-skin-hhb .mobile-bottom-nav .mb-item.active .mb-icon svg.hhb-com-ico{ width:22px !important; height:22px !important; }
  html body.ui-skin-hhb.ui-skin-hhb .mobile-bottom-nav .mb-item::after{ line-height:1.3 !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.mobile-open,
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen#mobile-more-screen.mobile-more-screen{ bottom:calc(44px + env(safe-area-inset-bottom)) !important; }
  html body.ui-skin-hhb.ui-skin-hhb:has(#people-panel.mobile-open) #hhb-people-backdrop{ bottom:calc(44px + env(safe-area-inset-bottom)) !important; }
}
/* 18) HHB fixes (2026-10-02 20:45 AST), Grok untouched:
   a) composer: call + mic stay together on the LEFT (block 15's "call next to Send" removed). Only the typed text
      moves closer to the left icons: input left padding 12px -> 7px. Mobile + desktop.
   b) desktop: People list back on the RIGHT as before (chat | people | icon bar), the mobile drawer is unchanged.
   (the desktop icon-bar spacing rules of 20:45 were rolled back at 21:00 AST: saw duplicated icons) */
html body.ui-skin-hhb.ui-skin-hhb .above-composer #msg-input#msg-input{ padding-left:7px !important; padding-right:10px !important; text-indent:0 !important; }
@media (min-width:769px){
  html body.ui-skin-hhb.ui-skin-hhb .app-shell.app-shell{ flex-direction:row-reverse !important; }
  html body.ui-skin-hhb.ui-skin-hhb .rail.rail{ border-right:0 !important; border-left:1px solid #dcdcec !important; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel.people{ border-right:0 !important; border-left:1px solid #dcdcec !important; }
}
/* 19) HHB chat text fonts (2026-10-02 20:55 AST), Grok untouched. Each message carries its sender's chosen font
   inline as font-family:'<font>', var(--font-rtl-fallback), sans-serif. Many picks are desktop system fonts (Lucida
   Sans Unicode, Century Gothic, Comic Sans MS…) that phones don't have, so Latin text fell through to the loaded
   'Noto Nastaliq Urdu' web font, whose Latin letters are widely spaced: the "every letter spaced apart" look on
   mobile. Now the fallback is IBM Plex Sans (the skin's normal text font) for Latin, then the Urdu/Arabic fonts for
   those scripts only, then colour-emoji fonts. A sender font that exists on the device is still used as before.
   Also normal letter-spacing / no break-all on message text, and emoji fonts at the end of the skin's base stack. */
html body.ui-skin-hhb.ui-skin-hhb{ --font-rtl-fallback:'IBM Plex Sans','Noto Nastaliq Urdu','Noto Sans Arabic','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji'; }
html body.ui-skin-hhb.ui-skin-hhb #log .line .msg-main .txt{ letter-spacing:normal !important; word-spacing:normal !important; word-break:normal !important; overflow-wrap:anywhere; text-align:start !important; }
html body.ui-skin-hhb.ui-skin-hhb{ font-family:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji' !important; }
/* 20) Grok + HHB (2026-10-02 21:05 AST). Each skin keeps its own look; nothing here changes display/visibility
   of sidebar icons.
   a) Grok composer: emoji + doodle glyphs were 22px (and the mobile emoji drawn in the dark text colour) while the
      other composer icons are 18px in the light purple; now 18px and the same colour/weight. Boxes and positions unchanged.
   b) Grok room call: the voice-note recorder is hidden while you are in this room's call (body.hhb-call-on, set from
      the call code's own onVoiceGroupUIUpdate by block 8); the app's single mute toggle shows next to Call; the
      recorder comes back when the call ends.
   c) Grok fonts: a sender's font the device lacks now falls back to Inter (Grok's text font) for Latin, then the
      Urdu/Arabic fonts for those scripts, then colour emoji (was: straight to Noto Nastaliq Urdu = wide letters).
   d) Grok mobile "X is typing…": floats just above the composer in a reserved band at the bottom of the chat, so
      the chat neither shrinks nor jumps and the composer never moves.
   e) Grok topic auto-hide arrow (block 12 JS now runs on Grok too), Grok colours, at the LEFT end.
   f) HHB desktop icon bar: every icon slot exactly 30px tall with no stray margins (spacing/alignment only). */
html body.ui-skin-grok .emoji-toggle-row > #emoji-toggle#emoji-toggle > svg,
html body.ui-skin-grok .emoji-toggle-row > #doodle-btn#doodle-btn > svg,
html body.ui-skin-grok .composer #emoji-toggle#emoji-toggle > svg,
html body.ui-skin-grok .composer #doodle-btn#doodle-btn > svg{ width:18px !important; height:18px !important; stroke-width:1.8 !important; }
@media (max-width:768px){
  html body.ui-skin-grok .composer #emoji-toggle#emoji-toggle{ color:rgb(143,130,216) !important; font-size:18px !important; }
  html body.ui-skin-grok .composer #doodle-btn#doodle-btn{ font-size:18px !important; }
}
html body.ui-skin-grok.hhb-call-on #voice-note-btn#voice-note-btn,
html body.ui-skin-grok:has(#call-btn.in-call) #voice-note-btn#voice-note-btn{ display:none !important; }
html body.ui-skin-grok{ --font-rtl-fallback:'Inter','Noto Nastaliq Urdu','Noto Sans Arabic','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji'; }
@media (max-width:768px){
  html body.ui-skin-grok #log#log{ padding-bottom:20px !important; scroll-padding-bottom:20px; }
  html body.ui-skin-grok #main-typing-bar#main-typing-bar.visible{
    position:absolute !important; left:0 !important; right:0 !important; bottom:100% !important; top:auto !important;
    margin:0 !important; z-index:6 !important; pointer-events:none; }
}
html body.ui-skin-grok #topic-bar#topic-bar.hhb-topic-hidden{ display:none !important; }
html body.ui-skin-grok .room:has(> #topic-bar.hhb-topic-hidden) #log#log{ padding-top:26px !important; }
html body.ui-skin-grok #topic-bar.hhb-topic-hidden ~ #hhb-topic-reveal{
  display:flex; align-items:center; justify-content:center; position:absolute; top:3px; left:8px; right:auto; z-index:30;
  width:30px; height:20px; padding:0; margin:0; border:1px solid rgba(124,58,237,.25); border-radius:10px;
  background:rgba(255,255,255,.92); box-shadow:0 1px 4px rgba(60,30,120,.14); color:rgb(124,58,237); cursor:pointer;
  -webkit-tap-highlight-color:transparent; }
html body.ui-skin-grok #hhb-topic-reveal::before{ content:""; width:18px; height:18px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center/contain no-repeat; }
html body.dark-mode.ui-skin-grok #topic-bar.hhb-topic-hidden ~ #hhb-topic-reveal{ background:rgba(30,26,48,.92); color:#c9b8f5; border-color:rgba(201,184,245,.3); }
@media (min-width:769px){
  html body.ui-skin-hhb.ui-skin-hhb .rail.rail > .ic{ height:30px !important; min-height:30px !important; max-height:30px !important; flex:0 0 30px !important; margin-top:0 !important; margin-bottom:0 !important; }
}
/* g) HHB desktop icon bar: no big gap between Server and Install App: the spacer is squeezed to 0 (sizing only, it is
      still there), so every icon has the same 2px gap all the way down. Help sits just above Log out (moved by JS). */
@media (min-width:769px){
  html body.ui-skin-hhb.ui-skin-hhb .rail.rail > .spacer{ flex:0 0 0px !important; height:0 !important; min-height:0 !important; margin:-2px 0 0 !important; padding:0 !important; }
}
/* 21) (2026-10-02 21:25 AST)
   a) HHB people list drag-to-resize: a grip on the left edge (#hhb-ppl-grip, added by hhb-ui-fix.js). */
html body #hhb-ppl-grip{ display:none; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel #hhb-ppl-grip{
  display:block; position:absolute; left:0; top:0; bottom:0; width:10px; margin-left:-3px; z-index:70; cursor:ew-resize;
  touch-action:none; -webkit-tap-highlight-color:transparent; background:transparent; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel #hhb-ppl-grip::after{
  content:""; position:absolute; left:3px; top:50%; width:4px; height:36px; margin-top:-18px; border-radius:2px;
  background:#5050a033; transition:background .15s; }
html body.ui-skin-hhb.ui-skin-hhb #people-panel #hhb-ppl-grip:hover::after,
html body.ui-skin-hhb.ui-skin-hhb.hhb-ppl-dragging #people-panel #hhb-ppl-grip::after{ background:#c000f0aa; }
html body.ui-skin-hhb.hhb-ppl-dragging{ user-select:none; -webkit-user-select:none; cursor:ew-resize; }
html body.ui-skin-hhb.hhb-ppl-dragging #people-panel{ transition:none !important; }
@media (max-width:768px){
  html body.ui-skin-hhb.ui-skin-hhb #people-panel:not(.mobile-open) #hhb-ppl-grip{ display:none; }
}
@media (min-width:769px){
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people{ position:relative; }
  html body.ui-skin-hhb.ui-skin-hhb #people-panel#people-panel.people.hhb-pw-set{
    width:var(--hhb-pw) !important; min-width:var(--hhb-pw) !important; max-width:var(--hhb-pw) !important; flex:0 0 var(--hhb-pw) !important; }
}
/* b) HHB chat avatars follow Server Settings (Avatar + Arrow / Avatar only show them, Arrow only / None hide them)
      instead of being always hidden. Size still comes from Server Settings → Avatar, nick & arrow size. */
html body.ui-skin-hhb.ui-skin-hhb.hhb-sender-display-avatar-arrow #log#log .line .wa-msg-avatar,
html body.ui-skin-hhb.ui-skin-hhb.hhb-sender-display-avatar-only #log#log .line .wa-msg-avatar{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 0 auto !important;
  width:20px; min-width:20px !important; height:20px; margin:0 6px 0 0 !important; padding:0 !important; border-radius:50% !important;
  font-size:11px; font-weight:700 !important; font-style:normal !important; line-height:1 !important; color:#fff; vertical-align:middle !important; overflow:hidden !important; }
html body.ui-skin-hhb.ui-skin-hhb.hhb-sender-display-avatar-arrow #log#log .line .nick-mirror-arrow,
html body.ui-skin-hhb.ui-skin-hhb.hhb-sender-display-arrow-only #log#log .line .nick-mirror-arrow{
  display:inline-flex !important; width:auto !important; min-width:0 !important; margin:0 4px 0 0 !important; padding:0 !important; }
/* "Avatar shows: Nick first letter" (Server Settings): coloured circle + letter in every skin */
html body.hhb-avatar-letter #log#log .line .wa-msg-avatar{ background-image:none !important; }
html body.hhb-avatar-letter #log#log .line .wa-msg-avatar.hhb-letter{ color:#fff !important; -webkit-text-fill-color:#fff !important; text-shadow:0 1px 1px rgba(0,0,0,.18); }
/* c) HHB welcome / RJ / poll pills in chat are centred again (block 7 had made every alert line left-aligned) */
html body.ui-skin-hhb.ui-skin-hhb #log#log .chat-alert-line:has(> div[style*="999px"]){
  justify-content:center !important; text-align:center !important; font-style:normal !important; padding:6px 12px !important; margin:8px 0 !important; }
/* d) HHB whispers look like hihellobye.com's: a full-width tinted row (lilac #f3e5f5 = to/from you, yellow #fff3cd =
      someone else's whisper you can see), black italic 0.75rem text, a "hearing" / "visibility" icon in front and a
      small grey time right after the text. No sound or animation (same as .com). */
html body.ui-skin-hhb.ui-skin-hhb #log#log .join-note.whisper-message-line,
html body.ui-skin-hhb.ui-skin-hhb #log#log .join-note.whisper-alert-line.whisper-compact{
  display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:6px !important; flex-wrap:wrap !important;
  width:100% !important; box-sizing:border-box !important; margin:2px 0 !important; padding:4px 12px !important; border:0 !important; border-radius:4px !important;
  background:#f3e5f5 !important; color:#000 !important; font-size:.75rem !important; font-style:italic !important; line-height:1.35 !important;
  text-align:left !important; white-space:normal !important; box-shadow:none !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .join-note.whisper-alert-line.whisper-compact{ background:#fff3cd !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .whisper-message-line :is(.whisper-alert-copy,.whisper-alert-message,.whisper-alert-nick,.whisper-tail),
html body.ui-skin-hhb.ui-skin-hhb #log#log .whisper-compact :is(.whisper-alert-copy,.whisper-alert-message,.whisper-tail,b){
  color:#000 !important; -webkit-text-fill-color:#000 !important; font-size:.75rem !important; font-style:italic !important; font-family:inherit !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .whisper-message-line .whisper-alert-nick,
html body.ui-skin-hhb.ui-skin-hhb #log#log .whisper-compact b{ font-weight:700 !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .whisper-message-line .whisper-alert-copy,
html body.ui-skin-hhb.ui-skin-hhb #log#log .whisper-compact .whisper-alert-copy{ flex:0 1 auto !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .whisper-message-line .whisper-ear,
html body.ui-skin-hhb.ui-skin-hhb #log#log .whisper-compact .whisper-info-ico{
  display:inline-block !important; width:.9rem !important; height:.9rem !important; flex:0 0 .9rem !important; margin:0 !important;
  font-size:0 !important; color:#000 !important; opacity:.9; background:currentColor !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 20c-.29 0-.56-.06-.76-.15-.71-.37-1.21-.88-1.71-2.38-.51-1.56-1.47-2.29-2.39-3-.79-.61-1.61-1.24-2.32-2.53C9.29 10.98 9 9.93 9 9c0-2.8 2.2-5 5-5s5 2.2 5 5h2c0-3.93-3.07-7-7-7S7 5.07 7 9c0 1.26.38 2.65 1.07 3.9.91 1.65 1.98 2.48 2.85 3.15.81.62 1.39 1.07 1.71 2.05.6 1.82 1.37 2.84 2.73 3.55.51.23 1.07.35 1.64.35 2.21 0 4-1.79 4-4h-2c0 1.1-.9 2-2 2zM7.64 2.64 6.22 1.22C4.23 3.21 3 5.96 3 9s1.23 5.79 3.22 7.78l1.41-1.41C6.01 13.74 5 11.49 5 9s1.01-4.74 2.64-6.36zM11.5 9a2.5 2.5 0 0 0 5 0 2.5 2.5 0 0 0-5 0z'/%3E%3C/svg%3E") center/contain no-repeat !important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 20c-.29 0-.56-.06-.76-.15-.71-.37-1.21-.88-1.71-2.38-.51-1.56-1.47-2.29-2.39-3-.79-.61-1.61-1.24-2.32-2.53C9.29 10.98 9 9.93 9 9c0-2.8 2.2-5 5-5s5 2.2 5 5h2c0-3.93-3.07-7-7-7S7 5.07 7 9c0 1.26.38 2.65 1.07 3.9.91 1.65 1.98 2.48 2.85 3.15.81.62 1.39 1.07 1.71 2.05.6 1.82 1.37 2.84 2.73 3.55.51.23 1.07.35 1.64.35 2.21 0 4-1.79 4-4h-2c0 1.1-.9 2-2 2zM7.64 2.64 6.22 1.22C4.23 3.21 3 5.96 3 9s1.23 5.79 3.22 7.78l1.41-1.41C6.01 13.74 5 11.49 5 9s1.01-4.74 2.64-6.36zM11.5 9a2.5 2.5 0 0 0 5 0 2.5 2.5 0 0 0-5 0z'/%3E%3C/svg%3E") center/contain no-repeat !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .whisper-compact .whisper-info-ico{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E") !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .whisper-message-line .ts,
html body.ui-skin-hhb.ui-skin-hhb #log#log .whisper-compact .ts{
  display:inline !important; margin-left:4px !important; font-size:.6rem !important; font-style:normal !important; color:rgba(0,0,0,.5) !important; -webkit-text-fill-color:rgba(0,0,0,.5) !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .whisper-alert-line.whisper-compact > *{ display:inline-block !important; }
html body.ui-skin-hhb.ui-skin-hhb #log#log .whisper-alert-line.whisper-compact > .whisper-info-ico{ display:inline-block !important; }

/* 23) PM window: icon row (emoji / attach / mic / once) sat flush on the message input (2026-10-02 21:45 AST).
   HHB flattens .pm-tools-row (display:contents) inside a gap:0 .above-composer, so the bar touched the icons.
   Give the PM composer bar its own top spacing: ~8px clear gap in every skin, mobile + desktop. PM only —
   the main room .composer is not touched. */
@media (min-width:769px){ html body #pm-modal-overlay .pm-composer-wrap .pm-composer-bar{ margin-top:4px !important; } }
html body.ui-skin-hhb.ui-skin-hhb #pm-modal-overlay .pm-composer-wrap .pm-composer-bar{ margin-top:8px !important; }

/* 24) Every skin, mobile + desktop (2026-10-02 22:00 AST).
   a) Server Settings "Desktop view / Mobile view" (Avatar + Arrow / Arrow only / Avatar only / None) now wins in all
      skins except Grok (Grok keeps its own avatars/look). Before, only HHB obeyed on desktop: the inline "sender-head > .wa-msg-avatar" rule out-ranked the
      Arrow only / None rules, so the avatar always showed; on Grok mobile the arrow stayed for Avatar only / None. */
html body.hhb-sender-display-arrow-only:not(.ui-skin-grok) #log#log .line .wa-msg-avatar,
html body.hhb-sender-display-none:not(.ui-skin-grok) #log#log .line .wa-msg-avatar,
html body.hhb-sender-display-arrow-only:not(.ui-skin-grok) #log#log .line .sender-head > .wa-msg-avatar,
html body.hhb-sender-display-none:not(.ui-skin-grok) #log#log .line .sender-head > .wa-msg-avatar{ display:none !important; }
html body.hhb-sender-display-avatar-only:not(.ui-skin-grok) #log#log .line .nick-mirror-arrow,
html body.hhb-sender-display-none:not(.ui-skin-grok) #log#log .line .nick-mirror-arrow,
html body.hhb-sender-display-avatar-only:not(.ui-skin-grok) #log#log .line .who > .nick-mirror-arrow,
html body.hhb-sender-display-none:not(.ui-skin-grok) #log#log .line .who > .nick-mirror-arrow{ display:none !important; }
/* b) "Avatar shows: Nick first letter" also in the People list (desktop list + mobile drawer), every skin. */
html body.hhb-avatar-letter:not(.ui-skin-grok) #people-list .person .av.hhb-letter{
  display:flex !important; align-items:center !important; justify-content:center !important;
  background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important;
  font-weight:700 !important; font-style:normal !important; font-size:13px !important; line-height:1 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.18); overflow:hidden !important; }
/* c) Topic bar auto-hide + left arrow in every skin (was HHB + Grok only). The bar shows on room load / topic change,
      hides after 10s, the small down-arrow at the left brings it back. Mobile skins used to hide the topic bar
      completely; it now shows there too (except when Light Chat turns "Show Room Topic" off). HHB / Grok keep their
      own colours (higher-specificity rules above). */
@media (max-width:768px){
  html:not(.hhb-lc-hide-topic) body #topic-bar#topic-bar#topic-bar.topic-bar:not(.hhb-topic-hidden){ display:flex !important; }
}
html body #topic-bar#topic-bar#topic-bar.hhb-topic-hidden{ display:none !important; }
html body .room:has(> #topic-bar.hhb-topic-hidden) #log#log{ padding-top:26px !important; }
html body #topic-bar.hhb-topic-hidden ~ #hhb-topic-reveal{
  display:flex; align-items:center; justify-content:center; position:absolute; top:3px; left:8px; right:auto; z-index:30;
  width:30px; height:20px; padding:0; margin:0; border:1px solid rgba(0,0,0,.14); border-radius:10px;
  background:rgba(255,255,255,.92); box-shadow:0 1px 4px rgba(0,0,0,.14); color:#555; cursor:pointer;
  -webkit-tap-highlight-color:transparent; }
html body #hhb-topic-reveal::before{ content:""; width:18px; height:18px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center/contain no-repeat; }
html body.ui-skin-whatsapp #topic-bar.hhb-topic-hidden ~ #hhb-topic-reveal{ color:#008069; border-color:rgba(0,128,105,.3); }
html body.ui-skin-clean #topic-bar.hhb-topic-hidden ~ #hhb-topic-reveal{ color:#2563eb; border-color:rgba(37,99,235,.25); }
html body.ui-skin-blabax #topic-bar.hhb-topic-hidden ~ #hhb-topic-reveal{ color:#c2185b; border-color:rgba(194,24,91,.25); }
html body.ui-skin-neon #topic-bar.hhb-topic-hidden ~ #hhb-topic-reveal,
html body.ui-skin-discord #topic-bar.hhb-topic-hidden ~ #hhb-topic-reveal,
html body.ui-skin-aurora #topic-bar.hhb-topic-hidden ~ #hhb-topic-reveal,
html body.dark-mode:not(.ui-skin-grok):not(.ui-skin-hhb) #topic-bar.hhb-topic-hidden ~ #hhb-topic-reveal{
  background:rgba(24,24,36,.9); color:#e2dcff; border-color:rgba(226,220,255,.28); }

/* 27) (2026-10-03 00:05 AST)
   a) Fast Chat / Light Chat switch (lightning icon + mobile menu row), every skin: hidden unless the room enables it
      (hhb-ui-fix.js block 27 adds html.hhb-lc-avail). */
html:not(.hhb-lc-avail) body #light-chat-toggle-icon#light-chat-toggle-icon,
html:not(.hhb-lc-avail) body #mm-light-chat-row#mm-light-chat-row{ display:none !important; }
/* b) HHB only: the line where you're tagged is a light grey tint (was pink/magenta), mobile + desktop. */
html body.ui-skin-hhb.ui-skin-hhb #log#log .line.mentioned{ background:rgba(17,24,39,.055) !important; box-shadow:inset 2px 0 0 #b4b8c2 !important; border:0 !important; }
html body.ui-skin-hhb.ui-skin-hhb.dark-mode #log#log .line.mentioned{ background:rgba(255,255,255,.07) !important; box-shadow:inset 2px 0 0 #6b7280 !important; }
/* c) HHB desktop icon bar (2026-10-03 00:45 AST, replaces the v30 full-height spread): a compact floating bar
      sized to its icons, vertically centred with space above and below, rounded, soft shadow. Same icons, sizes and
      colours; normal 10-12px gaps (a bit tighter on short windows so it always fits). */
@media (min-width:769px){
  html body.ui-skin-hhb.ui-skin-hhb .rail.rail{ justify-content:flex-start !important; align-self:center !important;
    height:auto !important; min-height:0 !important; max-height:calc(100% - 24px) !important; overflow-y:auto !important; overflow-x:hidden !important; scrollbar-width:none;
    gap:clamp(4px, calc((100vh - 700px) / 18), 12px) !important; padding:10px 0 !important; margin:12px 6px 12px 8px !important;
    border:1px solid #e1d8f1 !important; border-radius:16px !important; box-shadow:0 4px 18px rgba(96,60,160,.12), 0 1px 3px rgba(96,60,160,.08) !important; }
  html body.ui-skin-hhb.ui-skin-hhb .rail.rail::-webkit-scrollbar{ display:none; }
  html body.ui-skin-hhb.ui-skin-hhb .rail.rail > .spacer{ display:none !important; }
  html body.ui-skin-hhb.ui-skin-hhb .rail.rail > .brand{ margin:0 auto 2px !important; flex:0 0 auto !important; }
  html body.ui-skin-hhb.ui-skin-hhb .rail.rail{ margin-top:auto !important; margin-bottom:auto !important; }
}
@media (min-width:769px) and (max-height:760px){
  html body.ui-skin-hhb.ui-skin-hhb .rail.rail > .ic{ height:26px !important; min-height:26px !important; max-height:26px !important; flex:0 0 26px !important; }
}
/* d) HHB: the clear-chat (clear your view) button was hidden by CSS (chat-room.css + hhb-mobile-simple.css
      "ui-skin-hhb #clear-my-view-btn{display:none}", plus the all-skin mobile rule). It is rendered in the page.
      v31 (2026-10-03 00:45 AST): redesigned: a soft white circle with a sparkle-broom icon in the HHB magenta/violet
      palette, subtle shadow, hover lift + active press, "Clear chat" tooltip (hhb-ui-fix.js swaps the native title).
      It sits in the top strip (topic bar / the strip the topic arrow uses when the topic is hidden), so it no longer
      covers the top line's timestamp; the topic bar keeps room for it on the right. Desktop + mobile, light + dark. */
html body.ui-skin-hhb.ui-skin-hhb #clear-my-view-btn#clear-my-view-btn{
  display:flex !important; align-items:center !important; justify-content:center !important;
  top:1px !important; right:10px !important; width:24px !important; height:24px !important; padding:0 !important;
  border-radius:50% !important; background:linear-gradient(180deg,#ffffff 0%,#faf6ff 100%) !important;
  border:1px solid rgba(192,0,240,.16) !important; box-shadow:0 1px 2px rgba(80,30,140,.08), 0 2px 8px rgba(124,58,237,.14) !important;
  font-size:0 !important; line-height:0 !important; color:transparent !important; cursor:pointer; z-index:41 !important;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; -webkit-tap-highlight-color:transparent; }
html body.ui-skin-hhb.ui-skin-hhb #clear-my-view-btn#clear-my-view-btn::before{ content:""; width:16px; height:16px; -webkit-mask:none; mask:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d01cf5'/%3E%3Cstop offset='1' stop-color='%237c3aed'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M21.2 2.8 13.9 10.1' stroke='%239a8fc4' stroke-width='2.2' stroke-linecap='round'/%3E%3Crect x='10.6' y='9.4' width='5.2' height='3.2' rx='1.2' transform='rotate%2845 13.2 11%29' fill='url%28%23g%29'/%3E%3Cpath d='M10.4 11.2 12.8 13.6 10.8 20.6C10.6 21.3 9.8 21.5 9.3 21L3 14.7C2.5 14.2 2.7 13.4 3.4 13.2Z' fill='url%28%23g%29'/%3E%3Cpath d='M9.1 13.9 5.9 17.1M10.7 15.9 7.8 18.8M7.3 12.6 4.6 15.3' stroke='%23fff' stroke-opacity='.55' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M5.6 2.2l.75 1.95 1.95.75-1.95.75-.75 1.95-.75-1.95-1.95-.75 1.95-.75z' fill='%23c000f0'/%3E%3Cpath d='M19.2 14.6l.55 1.4 1.4.55-1.4.55-.55 1.4-.55-1.4-1.4-.55 1.4-.55z' fill='%23a855f7'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .2s ease; }
html body.ui-skin-hhb.ui-skin-hhb #clear-my-view-btn#clear-my-view-btn:hover{ background:linear-gradient(180deg,#fdf7ff 0%,#f3e6ff 100%) !important;
  border-color:rgba(192,0,240,.34) !important; box-shadow:0 2px 4px rgba(80,30,140,.10), 0 4px 14px rgba(192,0,240,.22) !important; transform:translateY(-1px); }
html body.ui-skin-hhb.ui-skin-hhb #clear-my-view-btn#clear-my-view-btn:hover::before{ transform:rotate(-12deg) scale(1.06); }
html body.ui-skin-hhb.ui-skin-hhb #clear-my-view-btn#clear-my-view-btn:active{ transform:scale(.92); box-shadow:0 1px 3px rgba(124,58,237,.18) !important; background:#efe0ff !important; }
html body.ui-skin-hhb.ui-skin-hhb #clear-my-view-btn#clear-my-view-btn:focus-visible{ outline:2px solid rgba(192,0,240,.45) !important; outline-offset:2px; }
/* tooltip */
html body.ui-skin-hhb.ui-skin-hhb #clear-my-view-btn#clear-my-view-btn::after{ content:attr(data-hhb-tip); position:absolute; top:calc(100% + 7px); right:-2px;
  padding:4px 9px; border-radius:7px; background:#2b2140; color:#fff; font:600 11.5px/1.2 'IBM Plex Sans', Inter, system-ui, sans-serif; white-space:nowrap;
  letter-spacing:.01em; box-shadow:0 4px 14px rgba(30,10,60,.25); opacity:0; transform:translateY(-3px); pointer-events:none; transition:opacity .15s ease, transform .15s ease; }
@media (hover:hover){ html body.ui-skin-hhb.ui-skin-hhb #clear-my-view-btn#clear-my-view-btn:hover::after{ opacity:1; transform:none; transition-delay:.25s; } }
html body.ui-skin-hhb.ui-skin-hhb #clear-my-view-btn#clear-my-view-btn:focus-visible::after{ opacity:1; transform:none; }
/* HHB keeps its light look when the dark-mode class is on (the page itself stays light), so the button does too. */
/* keep the topic bar's own buttons clear of it */
html body.ui-skin-hhb.ui-skin-hhb #topic-bar#topic-bar{ padding-right:42px !important; }
@media (max-width:768px){
  html body.ui-skin-hhb.ui-skin-hhb #clear-my-view-btn#clear-my-view-btn{ top:4px !important; right:8px !important; }
  html body.ui-skin-hhb.ui-skin-hhb .room:has(> #topic-bar.hhb-topic-hidden) > #clear-my-view-btn#clear-my-view-btn,
  html.hhb-lc-hide-topic body.ui-skin-hhb.ui-skin-hhb #clear-my-view-btn#clear-my-view-btn{ top:1px !important; }
  html body.ui-skin-hhb.ui-skin-hhb #topic-bar#topic-bar{ padding-right:38px !important; }
}

/* 28) HHB mobile "More" menu (2026-10-03 00:55 AST): it opened as a full-screen page covering the whole chat.
   Now a compact floating panel sized to its content: anchored bottom-right just above the tab bar, with margins,
   rounded, soft shadow, the chat visible behind a light dim (#hhb-more-backdrop, added by hhb-ui-fix.js; a tap on it
   closes the menu). Items are a 3-column grid of icon tiles, so the whole menu fits in about half the screen; it scrolls inside if it ever doesn't.
   HHB + mobile only. */
#hhb-more-backdrop{ display:none; }
@keyframes hhbMoreIn { from { opacity:0; transform:translateY(8px) scale(.97); } to { opacity:1; transform:none; } }
@media (max-width:768px){
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen#mobile-more-screen.mobile-more-screen.open{
    left:auto !important; right:8px !important; top:auto !important; bottom:calc(52px + env(safe-area-inset-bottom)) !important;
    width:min(312px, calc(100vw - 24px)) !important; max-width:calc(100vw - 24px) !important; height:auto !important;
    max-height:calc(100% - 52px - env(safe-area-inset-bottom) - 16px) !important;
    background:#fff !important; border:1px solid #e3dcf0 !important; border-radius:16px !important; overflow:hidden !important;
    box-shadow:0 12px 36px rgba(50,30,100,.22), 0 2px 8px rgba(50,30,100,.10) !important;
    transform-origin:100% 100%; animation:hhbMoreIn .16s ease-out; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen.open .mobile-more-head{ height:40px !important; min-height:40px !important; flex:0 0 40px !important;
    background:#f7f3fc !important; border-bottom:1px solid #eee8f6 !important; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen.open .mobile-more-head::after{ font-size:14px !important; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen.open .mm-back{ left:auto !important; right:6px !important; top:5px !important; width:30px !important; height:30px !important; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen.open .mm-back::before{ width:18px !important; height:18px !important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") center/contain no-repeat !important;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") center/contain no-repeat !important; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen.open .mobile-more-list{ flex:0 1 auto !important; overflow-y:auto !important;
    display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:4px !important; padding:8px !important; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen.open .mm-row{ flex-direction:column !important; justify-content:center !important; align-items:center !important;
    min-height:64px !important; height:auto !important; padding:8px 4px 7px !important; gap:5px !important; margin:0 !important; border:0 !important; border-radius:12px !important;
    font-size:11.5px !important; font-weight:600 !important; line-height:1.15 !important; text-align:center !important; color:#383858 !important; background:transparent !important; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen.open .mm-row:active{ background:#f3ebfc !important; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen.open .mm-row .mm-chev{ display:none !important; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen.open .mm-row .mm-icon{ width:36px !important; height:36px !important; min-width:36px !important; border-radius:11px !important;
    background:#f5eefc !important; display:flex !important; align-items:center !important; justify-content:center !important; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen.open .mm-row .mm-icon svg{ width:20px !important; height:20px !important; min-width:20px !important; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen.open .mm-row.mm-danger .mm-icon{ background:#fdeeee !important; }
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen.open .mm-row.mm-danger{ color:#d93a3a !important; }
  html body.ui-skin-hhb.ui-skin-hhb:has(#mobile-more-screen.open) #hhb-more-backdrop{ display:block; position:fixed; left:0; right:0; top:0;
    bottom:calc(44px + env(safe-area-inset-bottom)); z-index:199; background:rgba(30,20,60,.18); -webkit-tap-highlight-color:transparent; }
}

/* 29) (2026-10-03 01:10 AST)
   a) Nick arrow pushed out to the left + the "jump" when a line renders (every skin except Grok/HHB, mobile + desktop).
      Cause: mobile lines use a hanging indent (.mobile-msg-flow{padding-left:18px; text-indent:-18px}). text-indent is
      inherited; an inline nick ignores it, but gradient nicks are turned into inline-block (needed for the gradient), and
      an inline-block applies the inherited -18px: the arrow slid 18px left out of the line and the nick text slid onto
      its place. Because the inline-block switch happens right after the line is drawn, a new message also jumped
      18px left. The nick box must not re-apply the indent. */
html body:not(.ui-skin-grok):not(.ui-skin-hhb) #log .line .who{ text-indent:0 !important; }
/* b) Composer (Classic, and the same layout in Neon, Discord, Aurora, Clean): emoji + doodle sat jammed against the
      input's left edge 2px apart and smaller than the send button. Now the send button's size (34px) and centre, 6px apart
      with a 6px inset; the input text starts after them; input-to-send gap 6px (was 10px). Colours stay per skin. */
html body:not([class*="ui-skin-"]) .composer, html body.ui-skin-neon .composer, html body.ui-skin-discord .composer, html body.ui-skin-aurora .composer, html body.ui-skin-clean .composer{ gap:6px !important; column-gap:6px !important; }
@media (max-width:768px){
  html body:not([class*="ui-skin-"]) .composer #emoji-toggle, html body.ui-skin-neon .composer #emoji-toggle, html body.ui-skin-discord .composer #emoji-toggle, html body.ui-skin-aurora .composer #emoji-toggle, html body.ui-skin-clean .composer #emoji-toggle{ left:6px !important; width:34px !important; height:34px !important; min-width:34px !important; min-height:34px !important; }
  html body:not([class*="ui-skin-"]) .composer #doodle-btn, html body.ui-skin-neon .composer #doodle-btn, html body.ui-skin-discord .composer #doodle-btn, html body.ui-skin-aurora .composer #doodle-btn, html body.ui-skin-clean .composer #doodle-btn{ left:46px !important; width:34px !important; height:34px !important; min-width:34px !important; min-height:34px !important; }
  html body:not([class*="ui-skin-"]) .composer #msg-input, html body.ui-skin-neon .composer #msg-input, html body.ui-skin-discord .composer #msg-input, html body.ui-skin-aurora .composer #msg-input, html body.ui-skin-clean .composer #msg-input{ padding-left:88px !important; }
}
/* c) Dark skins polish (2026-10-03): the bot/alert lines and reply chips were bright white-lavender boxes on the
      near-black chat (glaring, out of tone). Give them each skin's own dark tint, readable light text. */
html body.ui-skin-neon #log .chat-alert-line{ background:rgba(192,132,252,.10) !important; border-left-color:#e879f9 !important; color:#ecd9ff !important; box-shadow:0 0 0 1px rgba(232,121,249,.16) inset !important; }
html body.ui-skin-neon #log .reply-chip{ background:rgba(255,255,255,.05) !important; border-color:rgba(232,121,249,.28) !important; color:#c9b6e6 !important; }
html body.ui-skin-discord #log .chat-alert-line{ background:#221e36 !important; border-left-color:#5865f2 !important; color:#d4cff2 !important; }
html body.ui-skin-discord #log .reply-chip{ background:#1c1930 !important; border-color:#352f55 !important; color:#b3acd2 !important; }
html body.ui-skin-aurora #log .chat-alert-line{ background:rgba(124,92,255,.13) !important; border-left-color:#7c5cff !important; color:#e2dbff !important; }
html body.ui-skin-aurora #log .reply-chip{ background:rgba(255,255,255,.05) !important; border-color:rgba(124,92,255,.35) !important; color:#c6bee6 !important; }
html body.ui-skin-blabax #log .chat-alert-line{ background:#121212 !important; border-left-color:#8a8a8a !important; color:#cfcfcf !important; }
html body.ui-skin-blabax #log .reply-chip{ background:#0e0e0e !important; border-color:#2a2a2a !important; color:#a8a8a8 !important; }
html body.ui-skin-neon #log .chat-alert-line .ts, html body.ui-skin-discord #log .chat-alert-line .ts, html body.ui-skin-aurora #log .chat-alert-line .ts,
html body.ui-skin-neon #log .reply-chip .rc-ts, html body.ui-skin-discord #log .reply-chip .rc-ts, html body.ui-skin-aurora #log .reply-chip .rc-ts{ color:#9d93bb !important; }
html body.ui-skin-blabax #log .chat-alert-line .ts, html body.ui-skin-blabax #log .reply-chip .rc-ts{ color:#7d7d7d !important; }
/* d) Mention highlight on the dark skins was the light-theme cream band (#fffdf0), a glaring pale strip with dark text
      pills on it. Use each skin's own tone instead (Neon magenta glow, Aurora violet, Discord's amber mention tint). */
html body.ui-skin-neon #log#log .line.mentioned.mentioned{ background:rgba(232,121,249,.13) !important; box-shadow:inset 3px 0 0 #e879f9, inset 0 0 12px rgba(232,121,249,.12) !important; }
html body.ui-skin-aurora #log#log .line.mentioned.mentioned{ background:rgba(124,92,255,.18) !important; box-shadow:inset 3px 0 0 #8b6dff !important; }
html body.ui-skin-discord #log#log .line.mentioned.mentioned{ background:rgba(240,178,50,.10) !important; box-shadow:inset 3px 0 0 #f0b232 !important; }
/* e) Desktop rail + composer tool icons on the dark skins used the light lavender tile (#f0eafb) from the lavender icon
      theme, so Neon's pale icons sat on a white box (nearly invisible) and the column of white tiles glared. Use a dark
      tile in each skin's tone; the clear-chat button gets the same tile. */
html body.ui-skin-neon{ --hhb-icon-bg:rgba(192,132,252,.12); }
html body.ui-skin-discord{ --hhb-icon-bg:#262138; }
html body.ui-skin-aurora{ --hhb-icon-bg:rgba(124,92,255,.14); }
html body.ui-skin-neon.hhb-icon-theme-lavender .ic, html body.ui-skin-neon.hhb-icon-theme-lavender .comp-ic{ border-color:rgba(232,121,249,.28) !important; }
html body.ui-skin-discord.hhb-icon-theme-lavender .ic, html body.ui-skin-discord.hhb-icon-theme-lavender .comp-ic{ border-color:#3a3458 !important; }
html body.ui-skin-aurora.hhb-icon-theme-lavender .ic, html body.ui-skin-aurora.hhb-icon-theme-lavender .comp-ic{ border-color:rgba(124,92,255,.38) !important; }
html body.ui-skin-neon.hhb-icon-theme-lavender .comp-ic, html body.ui-skin-discord.hhb-icon-theme-lavender .comp-ic, html body.ui-skin-aurora.hhb-icon-theme-lavender .comp-ic{ color:#c4b5fd !important; }
html body.ui-skin-neon #clear-my-view-btn{ background:rgba(40,20,70,.92) !important; border:1px solid rgba(232,121,249,.32) !important; box-shadow:0 4px 14px rgba(0,0,0,.4) !important; }
html body.ui-skin-discord #clear-my-view-btn{ background:#262138 !important; border:1px solid #3a3458 !important; box-shadow:0 4px 14px rgba(0,0,0,.4) !important; }
html body.ui-skin-aurora #clear-my-view-btn{ background:rgba(28,22,51,.95) !important; border:1px solid rgba(124,92,255,.4) !important; box-shadow:0 4px 14px rgba(0,0,0,.4) !important; }
html body.ui-skin-aurora .search input{ background:rgba(28,22,51,.95) !important; color:#f6f3ff !important; border-color:rgba(124,92,255,.4) !important; }
html body.ui-skin-aurora .search input::placeholder{ color:#9d93bb !important; }

/* 30) Mobile "More" menu in EVERY skin (2026-10-03 15:45 AST): the HHB compact floating panel (block 28) for all
   skins: ~312px wide, above the tab bar (WhatsApp, which opens it from its top bar: just under the top bar), rounded,
   3-column icon tiles, the chat dimmed behind it (#hhb-more-backdrop), tap outside closes. Each skin keeps its own
   colours through the --mmp-* variables below; Grok keeps its own coloured icons. Placement (--mm-b / --mm-t / --mm-mh /
   --mm-nav) is measured by hhb-ui-fix.js block 31. The header now reads "Expand": tapping it switches between the tiles
   and the old one-item-per-row list (html.hhb-mm-list, remembered in localStorage). */
html body{ --mmp-bg:#fff; --mmp-bd:#e3dcf0; --mmp-head:#f7f3fc; --mmp-headbd:#eee8f6; --mmp-fg:#2f2a4a; --mmp-tile:#f3edfc; --mmp-act:#efe6fb; --mmp-acc:#7c3aed; --mmp-dim:rgba(30,20,60,.18); --mmp-sh:0 12px 36px rgba(50,30,100,.22), 0 2px 8px rgba(50,30,100,.10); }
html body.ui-skin-compact{ --mmp-bg:#fbfaff; }
html body.ui-skin-whatsapp{ --mmp-bg:#fff; --mmp-bd:#d1d7db; --mmp-head:#f0f2f5; --mmp-headbd:#e9edef; --mmp-fg:#111b21; --mmp-tile:#e7f8ef; --mmp-act:#f0f2f5; --mmp-acc:#00a884; --mmp-dim:rgba(11,20,26,.25); --mmp-sh:0 12px 32px rgba(11,20,26,.22), 0 2px 6px rgba(11,20,26,.10); }
html body.ui-skin-clean{ --mmp-bg:#fff; --mmp-bd:#e5e7eb; --mmp-head:#f9fafb; --mmp-headbd:#eef0f3; --mmp-fg:#111827; --mmp-tile:#f3f4f6; --mmp-act:#eef2ff; --mmp-acc:#4f46e5; --mmp-dim:rgba(17,24,39,.2); --mmp-sh:0 12px 32px rgba(17,24,39,.18), 0 2px 6px rgba(17,24,39,.08); }
html body.ui-skin-neon{ --mmp-bg:#170c2e; --mmp-bd:rgba(232,121,249,.32); --mmp-head:rgba(139,92,246,.20); --mmp-headbd:rgba(232,121,249,.18); --mmp-fg:#f5e9ff; --mmp-tile:rgba(192,132,252,.14); --mmp-act:rgba(232,121,249,.18); --mmp-acc:#e879f9; --mmp-dim:rgba(5,2,12,.5); --mmp-sh:0 12px 36px rgba(0,0,0,.55), 0 0 22px rgba(232,121,249,.18); }
html body.ui-skin-discord{ --mmp-bg:#1e1b2e; --mmp-bd:#2e2a42; --mmp-head:#252038; --mmp-headbd:#2e2a42; --mmp-fg:#ece8f7; --mmp-tile:#2a2540; --mmp-act:#322c4c; --mmp-acc:#8b93ff; --mmp-dim:rgba(0,0,0,.45); --mmp-sh:0 12px 36px rgba(0,0,0,.5); }
html body.ui-skin-aurora{ --mmp-bg:#140e27; --mmp-bd:rgba(124,92,255,.4); --mmp-head:rgba(124,92,255,.16); --mmp-headbd:rgba(124,92,255,.25); --mmp-fg:#f6f3ff; --mmp-tile:rgba(124,92,255,.16); --mmp-act:rgba(255,77,157,.14); --mmp-acc:#a78bfa; --mmp-dim:rgba(5,3,14,.5); --mmp-sh:0 12px 36px rgba(0,0,0,.55), 0 0 20px rgba(124,92,255,.2); }
html body.ui-skin-blabax{ --mmp-bg:#0d0d0d; --mmp-bd:#2c2c2c; --mmp-head:#161616; --mmp-headbd:#262626; --mmp-fg:#dedede; --mmp-tile:#1c1c1c; --mmp-act:#232323; --mmp-acc:#eee8d7; --mmp-dim:rgba(0,0,0,.5); --mmp-sh:0 12px 36px rgba(0,0,0,.6); }
html body.ui-skin-grok{ --mmp-bg:#fff; --mmp-bd:#e6e3ef; --mmp-head:#f6f5fb; --mmp-headbd:#eceaf4; --mmp-fg:#232037; --mmp-act:#f1effa; --mmp-acc:#6d5dfc; --mmp-dim:rgba(30,25,60,.2); }
html body.ui-skin-hhb{ --mmp-fg:#282848; --mmp-acc:#c000f0; }
@media (max-width:768px){
  html body[class]:not(.ui-skin-hhb) #mobile-more-screen#mobile-more-screen.mobile-more-screen.open{
    left:auto !important; right:8px !important; top:var(--mm-t, auto) !important; bottom:var(--mm-b, calc(64px + env(safe-area-inset-bottom))) !important;
    width:min(312px, calc(100vw - 24px)) !important; max-width:calc(100vw - 24px) !important; height:auto !important; min-height:0 !important;
    max-height:var(--mm-mh, calc(100% - 80px)) !important; z-index:250 !important;
    background:var(--mmp-bg) !important; border:1px solid var(--mmp-bd) !important; border-radius:16px !important; overflow:hidden !important;
    box-shadow:var(--mmp-sh) !important; transform:none; transform-origin:100% 100%; animation:hhbMoreIn .16s ease-out; }
  html body.ui-skin-whatsapp #mobile-more-screen#mobile-more-screen.mobile-more-screen.open{ transform-origin:100% 0; }
  html body[class]:not(.ui-skin-hhb) #mobile-more-screen.open .mobile-more-head{ position:relative !important; height:40px !important; min-height:40px !important; flex:0 0 40px !important;
    padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important;
    background:var(--mmp-head) !important; border-bottom:1px solid var(--mmp-headbd) !important; }
  html body[class]:not(.ui-skin-hhb) #mobile-more-screen.open .mm-back{ position:absolute !important; left:auto !important; right:6px !important; top:5px !important; width:30px !important; height:30px !important;
    margin:0 !important; padding:0 !important; border:0 !important; border-radius:50% !important; background:transparent !important; box-shadow:none !important;
    color:var(--mmp-fg) !important; opacity:.75; display:flex !important; align-items:center !important; justify-content:center !important; }
  html body[class]:not(.ui-skin-hhb) #mobile-more-screen.open .mm-back svg{ display:none !important; }
  html body[class]:not(.ui-skin-hhb) #mobile-more-screen.open .mm-back::before{ content:""; width:18px; height:18px; background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") center/contain no-repeat; }
  html body[class]:not(.ui-skin-hhb) #mobile-more-screen.open .mobile-more-list{ flex:0 1 auto !important; min-height:0 !important; overflow-y:auto !important; overscroll-behavior:contain;
    display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:4px !important; padding:8px !important; margin:0 !important; background:transparent !important; }
  html body[class]:not(.ui-skin-hhb) #mobile-more-screen.open .mm-row{ flex-direction:column !important; justify-content:center !important; align-items:center !important;
    min-height:64px !important; height:auto !important; width:auto !important; padding:8px 4px 7px !important; gap:5px !important; margin:0 !important;
    border:0 !important; border-radius:12px !important; box-shadow:none !important;
    font-size:11.5px !important; font-weight:600 !important; line-height:1.15 !important; text-align:center !important; color:var(--mmp-fg) !important; background:transparent !important; }
  html body[class]:not(.ui-skin-hhb) #mobile-more-screen.open .mm-row[style*="display:none"], html body[class]:not(.ui-skin-hhb) #mobile-more-screen.open .mm-row[style*="display: none"]{ display:none !important; }
  html body[class]:not(.ui-skin-hhb) #mobile-more-screen.open .mm-row:active{ background:var(--mmp-act) !important; }
  html body[class]:not(.ui-skin-hhb) #mobile-more-screen.open .mm-row .mm-chev{ display:none !important; }
  html body[class]:not(.ui-skin-hhb) #mobile-more-screen.open .mm-row .mm-icon{ width:36px !important; height:36px !important; min-width:36px !important; margin:0 !important; border-radius:11px !important;
    display:flex !important; align-items:center !important; justify-content:center !important; }
  html body[class]:not(.ui-skin-hhb):not(.ui-skin-grok) #mobile-more-screen.open .mm-row .mm-icon{ background:var(--mmp-tile) !important; border:0 !important; box-shadow:none !important; }
  html body.ui-skin-neon #mobile-more-screen.open .mm-row:not(.mm-danger) .mm-icon, html body.ui-skin-discord #mobile-more-screen.open .mm-row:not(.mm-danger) .mm-icon, html body.ui-skin-aurora #mobile-more-screen.open .mm-row:not(.mm-danger) .mm-icon, html body.ui-skin-blabax #mobile-more-screen.open .mm-row:not(.mm-danger) .mm-icon{ color:var(--mmp-acc) !important; }
  html body.ui-skin-neon #mobile-more-screen.open .mm-row .mm-icon svg, html body.ui-skin-neon #mobile-more-screen.open .mm-row .mm-icon svg *, html body.ui-skin-discord #mobile-more-screen.open .mm-row .mm-icon svg, html body.ui-skin-discord #mobile-more-screen.open .mm-row .mm-icon svg *, html body.ui-skin-aurora #mobile-more-screen.open .mm-row .mm-icon svg, html body.ui-skin-aurora #mobile-more-screen.open .mm-row .mm-icon svg *, html body.ui-skin-blabax #mobile-more-screen.open .mm-row .mm-icon svg, html body.ui-skin-blabax #mobile-more-screen.open .mm-row .mm-icon svg *{ fill:currentColor !important; }
  html body[class]:not(.ui-skin-hhb) #mobile-more-screen.open .mm-row .mm-icon svg{ width:20px !important; height:20px !important; min-width:20px !important; }
  html body[class]:not(.ui-skin-hhb) #mobile-more-screen.open .mm-row.mm-danger{ color:#e14545 !important; }
  html body[class]:not(.ui-skin-hhb):not(.ui-skin-grok) #mobile-more-screen.open .mm-row.mm-danger .mm-icon{ background:rgba(225,69,69,.12) !important; color:#e14545 !important; }
  html body[class]:not(.ui-skin-hhb) #mobile-more-screen.open .mm-close-bottom{ display:none !important; }
  html body[class]:not(.ui-skin-hhb):has(#mobile-more-screen.open) #hhb-more-backdrop{ display:block; position:fixed; left:0; right:0; top:0;
    bottom:var(--mm-nav, calc(56px + env(safe-area-inset-bottom))); z-index:199; background:var(--mmp-dim); -webkit-tap-highlight-color:transparent; animation:hhbDimIn .16s ease-out; }
  @keyframes hhbDimIn { from { opacity:0; } to { opacity:1; } }

  /* "Expand" header button (all skins incl. HHB): text + a small icon of the layout it switches to */
  html body.ui-skin-hhb.ui-skin-hhb #mobile-more-screen .mobile-more-head::after{ content:none !important; }
  html body #mobile-more-screen .hhb-mm-title{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:14px; cursor:pointer;
    font-weight:600; font-size:14px; line-height:1; color:var(--mmp-fg); -webkit-tap-highlight-color:transparent; user-select:none; }
  html body #mobile-more-screen .hhb-mm-title:active{ background:var(--mmp-act); }
  html body #mobile-more-screen .hhb-mm-title i{ width:15px; height:15px; background:var(--mmp-acc); display:inline-block;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v2H3zm0 6h18v2H3zm0 6h18v2H3z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v2H3zm0 6h18v2H3zm0 6h18v2H3z'/%3E%3C/svg%3E") center/contain no-repeat; }
  html.hhb-mm-list body #mobile-more-screen .hhb-mm-title i{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3zm10 0h8v8h-8zM3 13h8v8H3zm10 0h8v8h-8z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3zm10 0h8v8h-8zM3 13h8v8H3zm10 0h8v8h-8z'/%3E%3C/svg%3E"); }
  html body #mobile-more-screen:not(.open) .hhb-mm-title{ display:none; }

  /* List view (html.hhb-mm-list): every item a full-width row (icon, label, chevron), one per line, inside the same panel */
  html.hhb-mm-list body[class] #mobile-more-screen.open .mobile-more-list.mobile-more-list{ grid-template-columns:minmax(0,1fr) !important; gap:2px !important; padding:6px !important; }
  html.hhb-mm-list body[class] #mobile-more-screen.open .mobile-more-list .mm-row{ flex-direction:row !important; justify-content:flex-start !important; align-items:center !important;
    min-height:46px !important; padding:5px 10px !important; gap:12px !important; font-size:14px !important; font-weight:500 !important; text-align:left !important; border-radius:10px !important; }
  html.hhb-mm-list body[class] #mobile-more-screen.open .mobile-more-list .mm-row .mm-icon{ width:32px !important; height:32px !important; min-width:32px !important; border-radius:9px !important; }
  html.hhb-mm-list body[class] #mobile-more-screen.open .mobile-more-list .mm-row .mm-icon svg{ width:19px !important; height:19px !important; min-width:19px !important; }
  html.hhb-mm-list body[class] #mobile-more-screen.open .mobile-more-list .mm-row .mm-chev{ display:inline !important; margin-left:auto !important; opacity:.5 !important; color:var(--mmp-fg) !important; }
}

/* 32) YouTube link card + player (2026-10-03; hhb-ui-fix.js block 32). The card sits under its chat line,
   aligned with the nick; the size is reserved (16:9) so the chat doesn't jump when the thumbnail arrives. The player is
   one fixed layer laid over the card, or floating in the corner (mini player) when the card is scrolled out of view. */
#log .line > .hhb-yt-card{ display:block; flex:0 0 auto; align-self:flex-start; height:auto; box-sizing:border-box; width:min(300px, calc(100% - 8px)); max-width:300px; margin-top:5px; margin-bottom:3px;
  border-radius:12px; overflow:hidden; cursor:pointer; position:relative; background:#0b0b0f; border:1px solid rgba(127,127,140,.28);
  box-shadow:0 2px 10px rgba(0,0,0,.12); text-indent:0; line-height:normal; -webkit-tap-highlight-color:transparent; }
#log .line > .hhb-yt-card .hhb-yt-thumb{ position:relative; width:100%; aspect-ratio:16/9; }
#log .line > .hhb-yt-card img{ display:block; width:100%; height:100%; object-fit:cover; border:0; margin:0; }
#log .line > .hhb-yt-card .hhb-yt-play{ position:absolute; left:50%; top:50%; width:52px; height:36px; margin:-18px 0 0 -26px; border-radius:10px; background:rgba(230,33,23,.92);
  box-shadow:0 3px 12px rgba(0,0,0,.35); transition:transform .12s ease, background .12s ease; }
#log .line > .hhb-yt-card .hhb-yt-play::after{ content:""; position:absolute; left:21px; top:10px; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent #fff; }
#log .line > .hhb-yt-card:hover .hhb-yt-play{ transform:scale(1.07); background:#ff0000; }
#log .line > .hhb-yt-card:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; }
#log .line > .hhb-yt-card .hhb-yt-tag{ position:absolute; left:8px; bottom:7px; padding:2px 7px; border-radius:6px; background:rgba(0,0,0,.62); color:#fff; font:600 11px/1.4 system-ui, sans-serif; }
#log .line > .hhb-yt-card.hhb-yt-hosting .hhb-yt-play, #log .line > .hhb-yt-card.hhb-yt-hosting .hhb-yt-tag{ visibility:hidden; }
@media (max-width:768px){ #log .line > .hhb-yt-card{ width:min(260px, calc(100% - 8px)); } }

#hhb-yt-player{ position:fixed; z-index:900; display:flex; flex-direction:column; box-sizing:border-box; background:#000; overflow:hidden; }
#hhb-yt-player .hhb-yt-frame{ position:relative; flex:1 1 auto; min-height:0; }
#hhb-yt-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
#hhb-yt-player .hhb-yt-bar{ display:none; }
#hhb-yt-player.hhb-yt-inline{ z-index:150; border-radius:12px; }
#hhb-yt-player.hhb-yt-float{ border-radius:12px; box-shadow:0 12px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.08); }
#hhb-yt-player.hhb-yt-float .hhb-yt-bar{ display:flex; align-items:center; gap:4px; height:26px; flex:0 0 26px; padding:0 4px 0 9px; background:#18181f; color:#e9e9f0;
  font:600 11.5px/1 system-ui, sans-serif; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
#hhb-yt-player.hhb-yt-float .hhb-yt-grip{ flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.9; }
#hhb-yt-player .hhb-yt-btn{ width:22px; height:20px; border:0; border-radius:6px; padding:0; margin:0; background:transparent; color:#e9e9f0; font:600 12px/20px system-ui, sans-serif; cursor:pointer; position:relative; }
#hhb-yt-player .hhb-yt-btn:hover{ background:rgba(255,255,255,.14); }
#hhb-yt-player .hhb-yt-minbtn::before{ content:""; position:absolute; left:6px; right:6px; top:13px; height:2px; border-radius:2px; background:currentColor; }
#hhb-yt-player.hhb-yt-min{ border-radius:16px; }
#hhb-yt-player.hhb-yt-min .hhb-yt-bar{ height:32px; flex-basis:32px; padding:0 6px 0 12px; border-radius:16px; cursor:pointer; }
#hhb-yt-player.hhb-yt-min .hhb-yt-frame{ position:absolute; left:-10000px; top:0; width:200px; height:113px; } /* keeps playing (audio) while collapsed */
#hhb-yt-player.hhb-yt-min .hhb-yt-minbtn::before{ top:5px; bottom:5px; height:auto; left:5px; right:5px; background:transparent; border:2px solid currentColor; border-radius:3px; }
/* The card replaces the link text (2026-10-03): the carded YouTube URL is hidden; a link-only message shows
   just the nick line + the card (its empty text bubble is hidden too, e.g. Neon/Discord pills). */
#log .line .txt .hhb-yt-url{ display:none !important; }
html body #log#log .line.hhb-yt-only .txt.txt{ display:none !important; }

/* 39) Grok now obeys the Server Settings sender toggle too (2026-10-03 21:00 AST). Block 24 left Grok out, so in
   Grok desktop the avatar always showed (Arrow only / None ignored) and on Grok mobile the arrow always showed
   (Avatar only / None ignored). Grok keeps its own avatar/arrow LOOK; only visibility follows the toggle. */
html body.ui-skin-grok.ui-skin-grok.hhb-sender-display-arrow-only #log#log#log .line .wa-msg-avatar,
html body.ui-skin-grok.ui-skin-grok.hhb-sender-display-none #log#log#log .line .wa-msg-avatar,
html body.ui-skin-grok.ui-skin-grok.hhb-sender-display-arrow-only #log#log#log .line .sender-head > .wa-msg-avatar,
html body.ui-skin-grok.ui-skin-grok.hhb-sender-display-none #log#log#log .line .sender-head > .wa-msg-avatar{ display:none !important; }
html body.ui-skin-grok.ui-skin-grok.hhb-sender-display-avatar-only #log#log#log .line .nick-mirror-arrow,
html body.ui-skin-grok.ui-skin-grok.hhb-sender-display-none #log#log#log .line .nick-mirror-arrow,
html body.ui-skin-grok.ui-skin-grok.hhb-sender-display-avatar-only #log#log#log .line .who > .nick-mirror-arrow,
html body.ui-skin-grok.ui-skin-grok.hhb-sender-display-none #log#log#log .line .who > .nick-mirror-arrow{ display:none !important; }

/* 40) Blabax, mobile: the Users tab did nothing (2026-10-03 audit). chat-room.css hides ".people" in the Blabax mobile
   layout (body.ui-skin-blabax .people{display:none}), which out-ranked the shared ".people.mobile-open" drawer rule, so
   the drawer never appeared. Let the opened drawer show like in the other skins. */
@media (max-width:768px){
  html body.ui-skin-blabax .people.mobile-open{ display:flex !important; }
}

/* 41) /reward banner (2026-10-03a43): centred pill like the /wc welcome banner, gold for a reward, slate→red for a
   point removal. The row itself is transparent in every skin (beats the per-skin .chat-alert-line tints / HHB flat lines). */
html body[class] #log#log .chat-alert-line.hhb-reward-row.hhb-reward-row,
html body #log#log .chat-alert-line.hhb-reward-row.hhb-reward-row{
  display:flex !important; justify-content:center !important; align-items:center !important; text-align:center !important;
  background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  margin:10px 0 !important; padding:0 8px !important; font-style:normal !important; width:100% !important; box-sizing:border-box !important; }
html body #log#log .hhb-reward-row .hhb-reward-pill{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; flex-wrap:nowrap !important;
  gap:8px !important; max-width:100% !important; box-sizing:border-box !important; padding:8px 18px !important; border-radius:999px !important;
  background:linear-gradient(90deg,#b45309,#d97706 55%,#ca8a04) !important; color:#fff !important; -webkit-text-fill-color:#fff !important;
  font-weight:800 !important; font-size:12.5px !important; line-height:1.35 !important; letter-spacing:.02em !important; font-style:normal !important;
  text-shadow:0 1px 1px rgba(0,0,0,.22) !important; box-shadow:0 6px 18px rgba(217,119,6,.35) !important; animation:alertPop .35s ease-out; }
html body #log#log .hhb-reward-row .hhb-reward-pill.hhb-reward-neg{
  background:linear-gradient(90deg,#475569,#dc2626) !important; box-shadow:0 6px 18px rgba(220,38,38,.28) !important; }
html body #log#log .hhb-reward-row .hhb-reward-pill b{ font-weight:900 !important; color:#fff !important; -webkit-text-fill-color:#fff !important; background:none !important; }
html body #log#log .hhb-reward-row .hhb-reward-pill b.hhb-rw-amt{ background:rgba(255,255,255,.22) !important; padding:1px 7px !important; border-radius:999px !important; white-space:nowrap !important; }
html body #log#log .hhb-reward-row .hhb-rw-ico{ font-size:16px !important; line-height:1 !important; flex:0 0 auto !important; }
html body #log#log .hhb-reward-row .hhb-rw-why{ font-weight:700 !important; opacity:.92; }
html body #log#log .hhb-reward-row .hhb-rw-copy{ flex:0 1 auto !important; min-width:0 !important; overflow-wrap:anywhere; text-align:center !important; }
@media (max-width:768px){
  html body #log#log .hhb-reward-row .hhb-reward-pill{ padding:7px 14px !important; font-size:12px !important; border-radius:18px !important; }
  html body #log#log .hhb-reward-row .hhb-rw-ico{ font-size:14px !important; }
}
/* The /wc welcome, RJ and reward pills sit on a clear row in the dark skins too (the a33 dark tint was boxing the
   welcome pill in Neon / Discord / Aurora / Blabax). */
html body.ui-skin-neon #log .chat-alert-line:has(> div[style*="999px"]),
html body.ui-skin-discord #log .chat-alert-line:has(> div[style*="999px"]),
html body.ui-skin-aurora #log .chat-alert-line:has(> div[style*="999px"]),
html body.ui-skin-blabax #log .chat-alert-line:has(> div[style*="999px"]){ background:transparent !important; box-shadow:none !important; border:0 !important; }

/* 42) Pinned message bar: slim pill (2026-10-18 AST; hhb-ui-fix.js block 36). The bar was a tall tinted box
   (up to 120px, one big row per pin). Now: one line, max ~40px, small pin, soft rounded pill, text cut with "…",
   "+N" when more pins, tap/click to open the full text (all pins), small × to minimise to a tiny chip
   (remembered per room until a new pin arrives). Layout is the same in every skin; colours follow each skin. */
html body #pinned-bar.hhb-pin{
  --pin-ac:#8b5cf6; --pin-bg1:rgba(139,92,246,.13); --pin-bg2:rgba(236,72,153,.07); --pin-bd:rgba(139,92,246,.30); --pin-tx:#3b2a5c; --pin-btn:rgba(255,255,255,.75);
  margin:4px var(--pin-mr,8px) 4px 8px !important; padding:0 64px 0 10px !important; min-height:30px !important; max-height:40px !important;
  overflow:hidden !important; border:1px solid var(--pin-bd) !important; border-radius:999px !important;
  background:linear-gradient(90deg,var(--pin-bg1),var(--pin-bg2)) !important; color:var(--pin-tx) !important;
  font-size:12.5px !important; line-height:1.3 !important; box-shadow:0 1px 4px rgba(0,0,0,.06) !important;
  cursor:pointer; box-sizing:border-box !important; -webkit-tap-highlight-color:transparent; user-select:none;
}
html body #pinned-bar.hhb-pin .hhb-pin-row{ margin:0 !important; gap:6px !important; align-items:center !important; min-height:30px; }
html body #pinned-bar.hhb-pin .hhb-pin-row ~ .hhb-pin-row{ display:none !important; }
html body #pinned-bar.hhb-pin .pin-icon-col{ flex-direction:row !important; gap:4px !important; }
html body #pinned-bar.hhb-pin .pin-icon-col > span{ font-size:12px !important; line-height:1 !important; filter:saturate(1.1); }
html body #pinned-bar.hhb-pin .pin-unpin-btn{ display:none !important; }
html body #pinned-bar.hhb-pin .hhb-pin-txt{ padding:0 !important; line-height:1.3 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; color:inherit !important; }
html body #pinned-bar.hhb-pin .hhb-pin-txt b{ color:var(--pin-ac) !important; font-weight:700; }
html body #pinned-bar.hhb-pin .hhb-pin-tools{ position:absolute; right:5px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:4px; }
html body #pinned-bar.hhb-pin .hhb-pin-more{ font-size:11px; font-weight:700; color:var(--pin-ac); }
html body #pinned-bar.hhb-pin .hhb-pin-more:empty{ display:none; }
html body #pinned-bar.hhb-pin .hhb-pin-x{ width:22px; height:22px; min-width:22px; padding:0; margin:0; border:0; border-radius:50%;
  background:var(--pin-btn); color:var(--pin-tx); font:700 15px/22px system-ui,sans-serif; text-align:center; cursor:pointer; opacity:.75; touch-action:manipulation; }
html body #pinned-bar.hhb-pin .hhb-pin-x:hover{ opacity:1; }
/* open: every pin, full text */
html body #pinned-bar.hhb-pin.hhb-pin-open{ max-height:45vh !important; overflow-y:auto !important; border-radius:14px !important; padding:4px 34px 4px 10px !important; user-select:text; }
html body #pinned-bar.hhb-pin.hhb-pin-open .hhb-pin-row ~ .hhb-pin-row{ display:flex !important; border-top:1px dashed var(--pin-bd); }
html body #pinned-bar.hhb-pin.hhb-pin-open .hhb-pin-row{ align-items:flex-start !important; padding:4px 0; }
html body #pinned-bar.hhb-pin.hhb-pin-open .hhb-pin-txt{ white-space:normal !important; overflow-wrap:anywhere; text-overflow:clip !important; }
html body #pinned-bar.hhb-pin.hhb-pin-open .hhb-pin-row > .pin-unpin-btn{ flex:0 0 auto; margin-left:auto; align-self:center; position:relative; z-index:31; }
html body #pinned-bar.hhb-pin.hhb-pin-open .pin-unpin-btn{ display:inline-block !important; min-width:44px !important; min-height:26px !important; padding:0 8px !important; font-size:11.5px !important; font-weight:700 !important; border-radius:999px !important; box-shadow:none !important; }
html body #pinned-bar.hhb-pin.hhb-pin-open .hhb-pin-tools{ top:5px; transform:none; }
html body #pinned-bar.hhb-pin.hhb-pin-open .hhb-pin-more{ display:none; }
/* minimised: a tiny chip, tap to show again */
html body #pinned-bar.hhb-pin.hhb-pin-min{ width:max-content !important; max-width:70px; align-self:flex-start; padding:0 8px !important; min-height:24px !important; max-height:24px !important; }
html body #pinned-bar.hhb-pin.hhb-pin-min .hhb-pin-row{ min-height:24px; }
html body #pinned-bar.hhb-pin.hhb-pin-min .hhb-pin-txt,
html body #pinned-bar.hhb-pin.hhb-pin-min .hhb-pin-x{ display:none !important; }
html body #pinned-bar.hhb-pin.hhb-pin-min .hhb-pin-tools{ position:static; transform:none; }
html body #pinned-bar.hhb-pin.hhb-pin-min .hhb-pin-row{ display:inline-flex !important; }
html body #pinned-bar.hhb-pin.hhb-pin-min .hhb-pin-tools{ display:inline-flex; margin-left:3px; vertical-align:middle; }
@media (max-width:760px){ html body #pinned-bar.hhb-pin{ margin:3px var(--pin-mr,6px) 3px 6px !important; font-size:12px !important; } }
/* colours per skin */
html body.dark-mode #pinned-bar.hhb-pin{ --pin-ac:#c4b5fd; --pin-bg1:rgba(139,92,246,.22); --pin-bg2:rgba(236,72,153,.10); --pin-bd:rgba(196,181,253,.30); --pin-tx:#ece8f7; --pin-btn:rgba(255,255,255,.12); }
html body.ui-skin-grok #pinned-bar.hhb-pin{ --pin-ac:#0f1419; --pin-bg1:rgba(15,20,25,.05); --pin-bg2:rgba(15,20,25,.025); --pin-bd:rgba(15,20,25,.12); --pin-tx:#0f1419; --pin-btn:rgba(15,20,25,.06); box-shadow:none !important; }
html body.ui-skin-grok.dark-mode #pinned-bar.hhb-pin{ --pin-ac:#e7e9ea; --pin-bg1:rgba(255,255,255,.07); --pin-bg2:rgba(255,255,255,.03); --pin-bd:rgba(255,255,255,.14); --pin-tx:#d6d9db; --pin-btn:rgba(255,255,255,.10); }
html body.ui-skin-hhb #pinned-bar.hhb-pin{ --pin-ac:#a000d0; --pin-bg1:rgba(192,0,240,.10); --pin-bg2:rgba(96,96,160,.10); --pin-bd:rgba(96,96,160,.35); --pin-tx:#282848; --pin-btn:rgba(255,255,255,.8); }
html body.ui-skin-whatsapp #pinned-bar.hhb-pin{ --pin-ac:#075e54; --pin-bg1:rgba(7,94,84,.09); --pin-bg2:rgba(37,211,102,.08); --pin-bd:rgba(7,94,84,.22); --pin-tx:#111b21; --pin-btn:rgba(255,255,255,.85); }
html body.ui-skin-neon #pinned-bar.hhb-pin{ --pin-ac:#f0abfc; --pin-bg1:rgba(232,121,249,.16); --pin-bg2:rgba(34,211,238,.08); --pin-bd:rgba(232,121,249,.40); --pin-tx:#f5e9ff; --pin-btn:rgba(255,255,255,.10); box-shadow:0 0 8px rgba(232,121,249,.25) !important; }
html body.ui-skin-discord #pinned-bar.hhb-pin{ --pin-ac:#c4b5fd; --pin-bg1:rgba(196,181,253,.13); --pin-bg2:rgba(196,181,253,.05); --pin-bd:rgba(196,181,253,.26); --pin-tx:#ece8f7; --pin-btn:rgba(255,255,255,.10); }
html body.ui-skin-blabax #pinned-bar.hhb-pin{ --pin-ac:#e06b68; --pin-bg1:rgba(224,107,104,.16); --pin-bg2:rgba(224,107,104,.05); --pin-bd:rgba(224,107,104,.35); --pin-tx:#eee8d7; --pin-btn:rgba(255,255,255,.10); }
html body.ui-skin-clean #pinned-bar.hhb-pin{ --pin-ac:#4f46e5; --pin-bg1:#f3f4f6; --pin-bg2:#eef2ff; --pin-bd:#e5e7eb; --pin-tx:#111827; --pin-btn:#fff; box-shadow:none !important; }
html body.ui-skin-compact #pinned-bar.hhb-pin:not(.hhb-pin-open):not(.hhb-pin-min){ min-height:26px !important; max-height:32px !important; margin:3px var(--pin-mr,6px) 3px 6px !important; font-size:12px !important; }
html body.ui-skin-compact #pinned-bar.hhb-pin .hhb-pin-row{ min-height:26px; }
html body.ui-skin-aurora #pinned-bar.hhb-pin{ --pin-ac:#c4b5fd; --pin-bg1:rgba(124,92,255,.20); --pin-bg2:rgba(236,72,153,.10); --pin-bd:rgba(167,139,250,.38); --pin-tx:#f6f3ff; --pin-btn:rgba(255,255,255,.12); }
html body #pinned-bar.hhb-pin.hhb-pin-min .hhb-pin-row ~ .hhb-pin-row{ display:none !important; }