/* ==========================================================================
   hhb-mobile-simple.css  (v7, 2026-09-27)
   MOBILE (<=768px): one plain line  [avatar] ➜ Nick: message ... emoji/GIF/sticker/doodle   time
     - fixed drawn arrow (same size + position on every phone), always shown
   DESKTOP: room's own arrow/avatar settings are left alone (nothing forced here).
   BOTH: bold nick, nick+message share one baseline, time sits at the END of the line.
   "#log#log" is intentional: it outranks the older alignment rules.
   ========================================================================== */
@media (max-width: 768px){
  /* The row is a plain text line */
  html body #log#log .line{ padding:3px 8px !important; margin:0 !important; line-height:1.5 !important; }
  html body #log#log .line .line-row,
  html body #log#log .line .line-row.wa-line-row{
    display:block !important; min-height:0 !important; gap:0 !important;
    line-height:1.5 !important; white-space:normal !important; overflow-wrap:anywhere;
  }

  /* Message parts all flow inline */
  html body #log#log .line .mobile-msg-flow,
  html body #log#log .line .wa-msg-col,
  html body #log#log .line .wa-inline-message,
  html body #log#log .line .who,
  html body #log#log .line .wa-nick,
  html body #log#log .line .msg-main,
  html body #log#log .line .msg-main .txt,
  html body #log#log .line .msg-main .txt.hhb-ar{
    display:inline !important; flex:none !important; width:auto !important; max-width:none !important;
    margin:0 !important; padding:0 !important; position:static !important; top:auto !important;
    transform:none !important; line-height:inherit !important; vertical-align:baseline !important;
    text-align:start !important;
  }
  html body #log#log .line .who{ margin-right:4px !important; }

  /* Urdu/Arabic text stays right-to-left inside the same line */
  html body #log#log .line .msg-main .txt.hhb-ar{ direction:rtl !important; unicode-bidi:isolate !important; }

  /* Avatar (when the room shows one): small circle at the start of the line */
  html body.hhb-sender-display-avatar-arrow #log#log .line .wa-msg-avatar,
  html body.hhb-sender-display-avatar-only #log#log .line .wa-msg-avatar{
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    width:20px !important; height:20px !important; min-width:20px !important; flex:none !important;
    margin:0 4px 0 0 !important; padding:0 !important; vertical-align:middle !important;
    position:static !important; top:auto !important; transform:none !important;
    font-size:10px !important; line-height:1 !important; box-sizing:border-box !important;
  }

  /* Arrow: permanent on mobile, drawn as a fixed 16x11 shape (not a font glyph, which
     sits at a different height on every phone), centred on the nick */
  html body #log#log .line .nick-mirror-arrow,
  html body #log#log .line .line-arrow,
  html body[class] #log#log .line .nick-mirror-arrow,
  html body[class] #log#log .line .line-arrow{
    display:inline-block !important; flex:none !important;
    width:13px !important; height:9px !important; min-width:0 !important;
    padding:0 !important; margin:0 5px 0 0 !important;
    vertical-align:middle !important; transform:translateY(-1px) !important;
    position:static !important; top:auto !important; left:auto !important; right:auto !important; float:none !important;
    font-size:14px !important; line-height:0 !important; text-indent:200% !important; white-space:nowrap !important; overflow:hidden !important;
    background:#232037 !important; background-clip:border-box !important; -webkit-background-clip:border-box !important;
    -webkit-text-fill-color:transparent !important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2016%27%3E%3Cpath%20d%3D%27M2%205.2h13.5M2%2010.8h13.5M12.5%202l7.5%206-7.5%206%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat !important;
            mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2016%27%3E%3Cpath%20d%3D%27M2%205.2h13.5M2%2010.8h13.5M12.5%202l7.5%206-7.5%206%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat !important;
  }
  html body.hhb-sender-display-arrow-only #log#log .line .wa-msg-avatar{ display:none !important; }

  /* Emoji / GIF / sticker / doodle: inline on the same line, centred on the text */
  html body #log#log .line .chat-emoji-img{
    display:inline-block !important; width:auto !important; height:1.4em !important;
    max-height:none !important; max-width:none !important;
    vertical-align:middle !important; margin:0 1px !important; object-fit:contain !important;
    position:static !important; top:auto !important;
  }
  html body #log#log .line .chat-emoji-img.chat-emoji-img-gif{ height:1.9em !important; }
  html body #log#log .line .chat-emoji-img.chat-emoji-img-sticker{
    height:56px !important; width:auto !important; max-width:56px !important;
    margin:1px 2px !important; border-radius:6px;
  }
  html body #log#log .line .chat-doodle-thumb{
    display:inline-block !important; height:40px !important; width:auto !important;
    max-height:40px !important; max-width:80px !important;
    vertical-align:middle !important; margin:0 2px !important; position:static !important; top:auto !important;
  }

  /* Reactions follow the text; empty holders take no space */
  html body #log#log .line .reaction-pills{ display:inline !important; margin-left:4px !important; }
  html body #log#log .line .reaction-pills:empty{ display:none !important; }

  /* v2: the nick wrapper (.sender-head) was a raised block — make it plain inline text */
  html body #log#log .line .sender-head{
    display:inline !important; position:static !important; top:auto !important; float:none !important;
    transform:none !important; vertical-align:baseline !important; margin:0 4px 0 0 !important; padding:0 !important;
    line-height:inherit !important; width:auto !important; min-width:0 !important; height:auto !important; min-height:0 !important;
  }
  html body #log#log .line .who,
  html body #log#log .line .wa-nick,
  html body #log#log .line .msg-main,
  html body #log#log .line .msg-main .txt{ line-height:1.5 !important; }
}

/* ---------- BOTH desktop and mobile ---------- */
/* Bold nick */
html body #log#log .line .who,
html body #log#log .line .wa-nick{ font-weight:700 !important; }

/* Nick + message share one text baseline (older rules used vertical-align:middle, which
   drifts when nick and message have different font sizes) */
html body #log#log .line .mobile-msg-flow,
html body #log#log .line .sender-head,
html body #log#log .line .who,
html body #log#log .line .wa-nick,
html body #log#log .line .msg-main,
html body #log#log .line .msg-main .txt{ vertical-align:baseline !important; position:static !important; top:auto !important; transform:none !important; }

/* Time at the END (right side) of the line, level with the first line of the message */
html body #log#log .line .line-row:has(> .mobile-msg-flow){
  display:flex !important; flex-wrap:nowrap !important; align-items:baseline !important; gap:0 !important;
}
html body #log#log .line .line-row:has(> .mobile-msg-flow) > .mobile-msg-flow{
  display:block !important; flex:1 1 auto !important; align-self:baseline !important; min-width:0 !important;
}
html body #log#log .line .line-row:has(> .mobile-msg-flow) > .ts{
  flex:none !important; align-self:baseline !important; margin:0 0 0 auto !important; padding-left:10px !important;
  position:static !important; top:auto !important; transform:none !important;
  vertical-align:baseline !important; white-space:nowrap !important; line-height:1 !important;
}

/* ---------- v9 (2026-09-28) ---------- */
/* The chat log is a flex column: without this, the browser SQUASHES system/whisper
   lines down to one row when the log is full, so a long whisper spilled over the lines
   below it. Every line keeps its natural height. */
html body #log#log > *{ flex-shrink:0 !important; }
/* Whisper lines: long text used to overlap because an older rule squeezed their
   line-height below the font size. Normal line spacing, text wraps cleanly. */
html body #log#log .whisper-alert-line{
  line-height:1.45 !important; height:auto !important; min-height:0 !important;
  align-items:flex-start !important; flex-wrap:wrap !important;
}
html body #log#log .whisper-alert-line .whisper-alert-copy{ flex:1 1 0 !important; min-width:0 !important; line-height:1.45 !important; overflow-wrap:anywhere !important; }

@media (max-width: 768px){
  /* Tighter gap between "Nick:" and the message */
  html body #log#log .line .sender-head{ margin-right:0 !important; }
  html body #log#log .line .who{ margin-right:3px !important; }

  /* Wrapped lines start under the nick, not at the far left edge (hanging indent the
     width of the avatar + arrow in front of the nick). */
  html body{ --hhb-hang:42px; }
  html body.hhb-sender-display-arrow-only{ --hhb-hang:18px; }
  html body:not(.hhb-sender-display-avatar-arrow):not(.hhb-sender-display-avatar-only):not(.hhb-sender-display-arrow-only){ --hhb-hang:18px; }
  html body #log#log .line .line-row:has(> .mobile-msg-flow) > .mobile-msg-flow{
    padding-left:var(--hhb-hang) !important; text-indent:calc(-1 * var(--hhb-hang)) !important;
  }
  html body #log#log .line .wa-msg-avatar,
  html body #log#log .line .chat-emoji-img,
  html body #log#log .line .chat-doodle-thumb,
  html body #log#log .line .reaction-pills{ text-indent:0 !important; }

  /* No timestamps and no Register banner/nudges on phones */
  html body #log#log .ts{ display:none !important; }
  html body #guest-register-btn{ display:none !important; }
  html body #log#log .chat-alert-line:has([onclick*="openGuestRegisterModal"]){ display:none !important; }
}

/* ---------- v10: compact whispers (2026-09-28) ---------- */
/* What everyone else sees: ONE short line — "👂 Abyss → sAdi · free · 1,234 left" */
html body #log#log .whisper-alert-line.whisper-compact{
  display:block !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  font-size:11px !important; line-height:1.5 !important; padding:1px 8px !important; margin:1px 0 !important;
}
html body #log#log .whisper-alert-line.whisper-compact > *{ display:inline !important; }
@media (max-width: 768px){ html body #log#log .whisper-alert-line .ts{ display:none !important; } }
html body #log#log .whisper-alert-line.whisper-compact b{ font-weight:700 !important; }
/* Points info at the end of the whisper itself (no separate second row) */
html body #log#log .whisper-tail{ opacity:.75; font-size:.92em; white-space:nowrap; font-style:italic; }
html body #log#log .whisper-message-line{ padding:3px 8px !important; margin:2px 0 !important; }
/* Whisper actions (↩️ reply as whisper, 🗑️ delete own): hidden until hover / tap, like normal messages */
html body #log#log .whisper-message-line{ position:relative !important; overflow:visible !important; }
html body #log#log .whisper-message-line .whisper-actions{
  display:none !important; position:absolute; right:8px; top:-14px; z-index:5; gap:2px;
  padding:3px 6px; border-radius:999px; background:#fff; border:1px solid #e7e3f3;
  box-shadow:0 4px 14px rgba(28,20,60,.14);
}
html body #log#log .whisper-message-line.selected .whisper-actions{ display:inline-flex !important; }
@media (hover:hover){ html body #log#log .whisper-message-line:hover .whisper-actions{ display:inline-flex !important; } }
html body #log#log .whisper-actions .whisper-act{ cursor:pointer; padding:2px 6px; border-radius:8px; font-size:13px; line-height:1; font-style:normal !important; }
html body #log#log .whisper-actions .whisper-act:hover{ background:#f4f0ff; }

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

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

/* Grok skin only: emoji + doodle must sit side by side inside the composer,
   never stacked on each other. Other skins keep their own spacing. */
@media (max-width:768px){
  html body.ui-skin-grok .composer #emoji-toggle{
    position:absolute !important;
    left:4px !important;
    right:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    z-index:3 !important;
    font-size:16px !important;
    line-height:28px !important;
    box-sizing:border-box !important;
    background:linear-gradient(180deg,#ffe08a,#ff9f1c) !important;
    border:1.5px solid #e8890b !important;
    border-radius:50% !important;
    box-shadow:0 1px 3px rgba(232,137,11,.45) !important;
  }
  html body.ui-skin-grok .composer #doodle-btn{
    position:absolute !important;
    left:40px !important;
    right:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    z-index:3 !important;
    font-size:15px !important;
    line-height:28px !important;
    color:#fff !important;
    box-sizing:border-box !important;
    background:linear-gradient(180deg,#ddd6fe,#7c3aed) !important;
    border:1.5px solid #6d28d9 !important;
    border-radius:50% !important;
    box-shadow:0 1px 3px rgba(109,40,217,.45) !important;
  }
  html body.ui-skin-grok .composer #msg-input,
  html body.ui-skin-grok .composer input{
    padding-left:78px !important;
  }
}
/* Mirror layout must not pull joined/left back to the middle. */
html body.ui-skin-grok.mirrored-layout #log#log .join-note:not(.whisper-alert-line):not(.whisper-message-line):not(.story-notice-line),
html body.mirrored-layout.ui-skin-grok #log .join-note:not(.whisper-alert-line):not(.whisper-message-line):not(.story-notice-line){
  justify-content:flex-start !important;
  text-align:left !important;
  direction:ltr !important;
  margin-left:0 !important;
  margin-right:auto !important;
  align-self:stretch !important;
  width:100% !important;
}

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


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


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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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