/* Shared user-facing chat surface.
 * Domain pages own state, messages and side panels; this file owns the
 * repeated window / notice / scroll / composer geometry.
 */
body.hf-chat-page {
  --hf-chat-line: var(--hf-color-line);
  --hf-chat-surface: var(--hf-color-surface);
  --hf-chat-notice-color: var(--hf-color-muted);
  --hf-chat-notice-bg: var(--hf-color-primary-soft);
  --hf-chat-notice-line: var(--hf-color-primary-border);
  --hf-chat-input-bg: var(--hf-color-surface);
  --hf-chat-input-line: var(--hf-color-line);
  --hf-chat-composer-line: var(--hf-color-line);
  --hf-chat-focus: var(--hf-focus-color);
  --hf-chat-focus-shadow: var(--hf-focus-ring);
  --hf-chat-action: var(--hf-button-primary-bg);
  --hf-chat-action-hover: var(--hf-button-primary-hover-bg);
  --hf-chat-window-radius: 18px;
  --hf-chat-window-shadow: 0 10px 30px rgba(28, 50, 64, 0.08);
  --hf-chat-notice-margin: 12px 12px 0;
  --hf-chat-notice-padding: 10px 12px;
  --hf-chat-notice-font-size: 11px;
  --hf-chat-scroll-padding: 18px 16px;
  --hf-chat-composer-padding: 11px 12px;
  --hf-chat-composer-inline-padding: 12px;
  --hf-chat-composer-gap: 8px;
  --hf-chat-control-height: 44px;
  --hf-chat-action-width: 72px;
  --hf-chat-action-font-size: 12px;
  --hf-chat-stage-bg: var(--hf-color-line);
  --hf-chat-viewport-height: 100dvh;
  --hf-chat-footer-guard: 1px;
  --hf-chat-stage-min-height: calc(
    var(--hf-chat-viewport-height) - var(--hf-chat-header-height, 64px) +
      var(--hf-chat-footer-guard)
  );
  --hf-chat-stage-center-padding: 24px;
  --hf-chat-shell-max-width: var(--hf-site-max-width);
  --hf-chat-side-width: 280px;
  --hf-chat-layout-gap: 16px;
  --hf-chat-topline-height: 58px;
  --hf-chat-topline-gap: 14px;
  --hf-chat-topline-margin: 14px;
  --hf-chat-topline-padding: 0 14px;
  --hf-chat-topline-bg: rgba(255, 255, 255, 0.96);
  --hf-chat-topline-line: var(--hf-color-line);
  --hf-chat-side-bg: rgba(255, 255, 255, 0.98);
  --hf-chat-side-text: var(--hf-color-text-strong);
  --hf-chat-topline-radius: 15px;
  --hf-chat-topline-shadow: 0 7px 24px rgba(28, 50, 64, 0.07);
  --hf-chat-side-padding: 12px 16px;
  --hf-chat-shell-padding: 0;
  --hf-chat-panel-height: clamp(420px, calc(100dvh - 180px), 650px);
  --hf-chat-mobile-appbar-height: var(--hf-mobile-header-height);
  --hf-chat-mobile-appbar-side-width: 80px;
  --hf-chat-mobile-appbar-action-size: 36px;
  --hf-chat-bubble-radius: 14px;
  --hf-chat-bubble-join-radius: 4px;
  --hf-chat-message-group-gap: 3px;
  --hf-chat-message-block-gap: 10px;
}

/* Chat theme consumer. The global theme bootstrap sets html[data-hf-theme]
 * before first paint, so chat surfaces consume that state directly and never
 * wait for JavaScript to paint the correct dark/light surface. */
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage] {
  color-scheme: dark;
  --hf-chat-line: var(--hf-color-line);
  --hf-chat-surface: var(--hf-color-surface);
  --hf-chat-stage-bg: #132b2c;
  --hf-chat-notice-color: var(--hf-color-muted);
  --hf-chat-notice-bg: #172733;
  --hf-chat-notice-line: #294657;
  --hf-chat-input-bg: var(--hf-color-surface-elevated);
  --hf-chat-input-line: var(--hf-color-line-strong);
  --hf-chat-composer-line: var(--hf-color-line);
  --hf-chat-topline-bg: rgba(17, 24, 32, 0.97);
  --hf-chat-topline-line: var(--hf-color-line);
  --hf-chat-topline-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  --hf-chat-side-bg: rgba(17, 24, 32, 0.98);
  --hf-chat-side-text: var(--hf-color-text-strong);
  --stage8-ink: var(--hf-color-text-strong);
  --stage8-muted: var(--hf-color-muted);
  --stage8-line: var(--hf-color-line);
  --stage8-soft: var(--hf-color-surface-soft);
  --room-text: var(--hf-color-text-strong);
  --room-muted: var(--hf-color-muted);
  --room-line: var(--hf-color-line);
  --room-soft: var(--hf-color-surface-soft);
  --h-chat-text: var(--hf-color-text-strong);
  --h-chat-muted: var(--hf-color-muted);
  --h-chat-line: var(--hf-color-line);
  --h-chat-surface: var(--hf-color-surface);
  --h-chat-page: var(--hf-color-page);
  --mypage-line: var(--hf-color-line);
  --mypage-muted: var(--hf-color-muted);
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .hf-chat-topline,
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .hf-chat-window,
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .hf-chat-scroll,
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .hf-chat-composer {
  color: var(--hf-color-text-strong);
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  :where(
    .stage8-profile-link,
    .room-text-button,
    .room-secondary-button,
    .h-chat-back-link,
    .mypage-conversation-back
  ) {
  color: #c7d4da !important;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  :where(
    .stage8-random-side-card,
    .room-poll-card,
    .room-participant-panel,
    .h-chat-security,
    .mypage-conversation-shell,
    .mypage-conversation-page-head
  ) {
  color: var(--hf-color-text-strong);
  background-color: var(--hf-color-surface);
  border-color: var(--hf-color-line);
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  :where(
    .room-system-message,
    .mypage-conversation-date-divider span,
    .mypage-conversation-empty,
    .h-chat-security
  ) {
  color: var(--hf-color-muted);
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .room-system-message,
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .mypage-conversation-date-divider
  span {
  background: #1d2932;
  border-color: #30424d;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .room-poll-card {
  background: #17212b;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.3),
    0 1px 4px rgba(0, 0, 0, 0.5);
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .room-poll-option {
  color: #dce6eb;
  background: #18242d;
  border-color: #344854;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .mypage-conversation-message-area {
  background: #111820;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .mypage-conversation-page-head {
  background: rgba(17, 24, 32, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .mypage-conversation-partner
  strong {
  color: #f1f6f8;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .h-chat-security {
  background: #211d17;
  border-color: #4b3e2c;
}

/* Shared visual frame for 1:1, room and H chat. Domain CSS owns only
 * domain-specific state/actions; background and panel geometry live here. */
body.hf-chat-page .hf-chat-stage[data-hf-chat-stage] {
  position: relative;
  color-scheme: light;
  background-color: var(--hf-chat-stage-bg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* A shared stage may also be an application view (room detail).
 * Author-level flex rules must never override the HTML hidden state. */
body.hf-chat-page .hf-chat-stage[data-hf-chat-stage][hidden] {
  display: none !important;
}

body.hf-chat-page .hf-chat-stage[data-hf-chat-stage].is-day {
  background-image: url("/back_img_day1.png");
}

body.hf-chat-page .hf-chat-stage[data-hf-chat-stage].is-night {
  background-image: url("/back_img_night1.png");
}

@media (min-width: 1550px) {
  body.hf-chat-page .hf-chat-stage[data-hf-chat-stage].is-day {
    background-image: url("/back_img_day2.png");
  }

  body.hf-chat-page .hf-chat-stage[data-hf-chat-stage].is-night {
    background-image: url("/back_img_night2.png");
  }
}

@media (min-width: 769px) {
  body.hf-chat-page {
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.hf-chat-page .hf-chat-stage[data-hf-chat-stage] {
    min-height: var(--hf-chat-stage-min-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: var(--hf-chat-stage-center-padding);
    padding-bottom: var(--hf-chat-stage-center-padding);
    box-sizing: border-box;
  }
}

body.hf-chat-page .hf-chat-shell {
  width: min(
    var(--hf-chat-shell-max-width),
    calc(100% - var(--hf-site-inline-space))
  );
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  padding: var(--hf-chat-shell-padding);
  box-sizing: border-box;
}

body.hf-chat-page .hf-chat-topline {
  min-height: var(--hf-chat-topline-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--hf-chat-topline-gap);
  margin: 0 0 var(--hf-chat-topline-margin);
  padding: var(--hf-chat-topline-padding);
  background: var(--hf-chat-topline-bg);
  border: 1px solid var(--hf-chat-topline-line);
  border-radius: var(--hf-chat-topline-radius);
  box-shadow: var(--hf-chat-topline-shadow);
  box-sizing: border-box;
}

body.hf-chat-page .hf-chat-layout {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hf-chat-side-width);
  gap: var(--hf-chat-layout-gap);
  align-items: stretch;
}

body.hf-chat-page .hf-chat-layout > .hf-chat-window,
body.hf-chat-page .hf-chat-layout > .hf-chat-side-panel {
  height: var(--hf-chat-panel-height);
  min-height: 0;
  max-height: var(--hf-chat-panel-height);
}

body.hf-chat-page .hf-chat-side-panel {
  min-width: 0;
  padding: var(--hf-chat-side-padding);
  color: var(--hf-chat-side-text);
  background: var(--hf-chat-side-bg);
  border: 1px solid var(--hf-chat-line);
  border-radius: var(--hf-chat-window-radius);
  box-shadow: var(--hf-chat-window-shadow);
  box-sizing: border-box;
}

body.hf-chat-page .hf-chat-window[data-hf-chat-window] {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--hf-chat-surface);
  border: 1px solid var(--hf-chat-line);
  border-radius: var(--hf-chat-window-radius);
  box-shadow: var(--hf-chat-window-shadow);
}

body.hf-chat-page
  :where(
    .send_box,
    .receive_box,
    .room-bubble,
    .h-chat-bubble,
    .mypage-conversation-bubble p
  ) {
  font-family: var(--hf-chat-message-font-family, Helvetica, Arial, sans-serif);
}

/* Shared message-group visual system. Domain clients provide only sender/time
 * attributes; grouping shape and spacing are owned here. */
body.hf-chat-page [data-hf-chat-message] {
  margin-top: var(--hf-chat-message-block-gap);
  margin-bottom: 0;
}

body.hf-chat-page [data-hf-chat-message]:first-child {
  margin-top: 0;
}

body.hf-chat-page [data-hf-chat-message].hf-chat-group-middle,
body.hf-chat-page [data-hf-chat-message].hf-chat-group-last {
  margin-top: var(--hf-chat-message-group-gap);
}

body.hf-chat-page [data-hf-chat-message] [data-hf-chat-identity] {
  align-self: flex-start;
}

body.hf-chat-page
  [data-hf-chat-message].hf-chat-group-middle
  [data-hf-chat-identity],
body.hf-chat-page
  [data-hf-chat-message].hf-chat-group-last
  [data-hf-chat-identity] {
  visibility: hidden;
}

body.hf-chat-page
  [data-hf-chat-message].hf-chat-group-middle
  [data-hf-chat-identity-label],
body.hf-chat-page
  [data-hf-chat-message].hf-chat-group-last
  [data-hf-chat-identity-label] {
  display: none !important;
}

body.hf-chat-page
  [data-hf-chat-message][data-hf-chat-side="peer"].hf-chat-group-single
  [data-hf-chat-bubble] {
  border-radius: var(--hf-chat-bubble-radius);
}

body.hf-chat-page
  [data-hf-chat-message][data-hf-chat-side="peer"].hf-chat-group-first
  [data-hf-chat-bubble] {
  border-radius: var(--hf-chat-bubble-radius) var(--hf-chat-bubble-radius)
    var(--hf-chat-bubble-radius) var(--hf-chat-bubble-join-radius);
}

body.hf-chat-page
  [data-hf-chat-message][data-hf-chat-side="peer"].hf-chat-group-middle
  [data-hf-chat-bubble] {
  border-radius: var(--hf-chat-bubble-join-radius) var(--hf-chat-bubble-radius)
    var(--hf-chat-bubble-radius) var(--hf-chat-bubble-join-radius);
}

body.hf-chat-page
  [data-hf-chat-message][data-hf-chat-side="peer"].hf-chat-group-last
  [data-hf-chat-bubble] {
  border-radius: var(--hf-chat-bubble-join-radius) var(--hf-chat-bubble-radius)
    var(--hf-chat-bubble-radius) var(--hf-chat-bubble-radius);
}

body.hf-chat-page
  [data-hf-chat-message][data-hf-chat-side="mine"].hf-chat-group-single
  [data-hf-chat-bubble] {
  border-radius: var(--hf-chat-bubble-radius);
}

body.hf-chat-page
  [data-hf-chat-message][data-hf-chat-side="mine"].hf-chat-group-first
  [data-hf-chat-bubble] {
  border-radius: var(--hf-chat-bubble-radius) var(--hf-chat-bubble-radius)
    var(--hf-chat-bubble-join-radius) var(--hf-chat-bubble-radius);
}

body.hf-chat-page
  [data-hf-chat-message][data-hf-chat-side="mine"].hf-chat-group-middle
  [data-hf-chat-bubble] {
  border-radius: var(--hf-chat-bubble-radius) var(--hf-chat-bubble-join-radius)
    var(--hf-chat-bubble-join-radius) var(--hf-chat-bubble-radius);
}

body.hf-chat-page
  [data-hf-chat-message][data-hf-chat-side="mine"].hf-chat-group-last
  [data-hf-chat-bubble] {
  border-radius: var(--hf-chat-bubble-radius) var(--hf-chat-bubble-join-radius)
    var(--hf-chat-bubble-radius) var(--hf-chat-bubble-radius);
}

body.hf-chat-page .hf-chat-notice[data-hf-chat-notice] {
  position: relative;
  flex: 0 0 auto;
  margin: var(--hf-chat-notice-margin);
  padding: var(--hf-chat-notice-padding);
  color: var(--hf-chat-notice-color);
  background: var(--hf-chat-notice-bg);
  border: 1px solid var(--hf-chat-notice-line);
  border-radius: 11px;
  font-size: var(--hf-chat-notice-font-size);
  line-height: 1.55;
  text-align: center;
}

body.hf-chat-page .hf-chat-notice[data-hf-chat-notice].is-hf-notice-dismissed {
  display: none !important;
}

body.hf-chat-page .hf-chat-notice-guide-icon {
  margin-right: 5px;
}

body.hf-chat-page .hf-chat-notice-close {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--hf-color-muted);
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
}

body.hf-chat-page .hf-chat-notice-close:hover,
body.hf-chat-page .hf-chat-notice-close:focus {
  color: var(--hf-color-text-strong);
  background: var(--hf-color-surface-hover);
  outline: none;
}

@media (min-width: 769px) {
  body.hf-chat-page
    .hf-chat-notice[data-hf-chat-notice][data-hf-chat-notice-dismissible] {
    padding-right: 38px;
    padding-left: 38px;
  }
}

body.hf-chat-page .hf-chat-scroll[data-hf-chat-scroll] {
  position: relative;
  inset: auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 0%;
  margin: 0;
  padding: var(--hf-chat-scroll-padding);
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--hf-chat-surface);
  border: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  box-sizing: border-box;
}

/* Optional chat-stream utility: short transient chats start at the bottom,
 * while long histories keep the message area as the only scroll owner. */
body.hf-chat-page
  .hf-chat-scroll[data-hf-chat-scroll].hf-chat-scroll-bottom-stack {
  display: flex;
  flex-direction: column;
}

body.hf-chat-page
  .hf-chat-scroll[data-hf-chat-scroll].hf-chat-scroll-bottom-stack::before {
  content: "";
  width: 100%;
  min-height: 0;
  flex: 1 0 0;
}

body.hf-chat-page
  .hf-chat-scroll[data-hf-chat-scroll].hf-chat-scroll-bottom-stack
  > * {
  flex: 0 0 auto;
}

/* Desktop/tablet conversations should read from top to bottom. The optional
 * bottom-stack spacer is reserved for the compact mobile chat experience. */
@media (min-width: 769px) {
  body.hf-chat-page
    .hf-chat-scroll[data-hf-chat-scroll].hf-chat-scroll-bottom-stack {
    display: block;
  }

  body.hf-chat-page
    .hf-chat-scroll[data-hf-chat-scroll].hf-chat-scroll-bottom-stack::before {
    display: none;
  }
}

/* New-message indicator stays above the composer without changing chat geometry. */
body.hf-chat-page .hf-chat-new-message[data-hf-chat-new-message] {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 20;
  max-width: calc(100% - 24px);
  min-height: 32px;
  display: none;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 7px 11px;
  overflow: hidden;
  color: #ffffff;
  background: rgba(18, 31, 40, 0.84);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 5px 16px rgba(18, 31, 40, 0.18);
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
}

body.hf-chat-page .hf-chat-new-message[data-hf-chat-new-message] span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.hf-chat-page .hf-chat-new-message[data-hf-chat-new-message]:hover,
body.hf-chat-page .hf-chat-new-message[data-hf-chat-new-message]:focus {
  color: #ffffff;
  background: rgba(18, 31, 40, 0.94);
  outline: none;
}

body.hf-chat-page .hf-chat-command-key {
  display: inline-flex;
  min-width: 21px;
  height: 20px;
  align-items: center;
  justify-content: center;
  margin: 0 4px;
  color: #007fae;
  background-color: #ffffff;
  border: 1px solid rgba(var(--hf-color-primary-rgb), 0.3);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

body.hf-chat-page .hf-chat-composer[data-hf-chat-composer] {
  position: relative;
  inset: auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: var(--hf-chat-composer-gap);
  margin: 0;
  padding: var(--hf-chat-composer-padding);
  background: var(--hf-chat-surface);
  border: 0;
  border-top: 1px solid var(--hf-chat-composer-line);
  border-bottom: 1px solid var(--hf-chat-composer-line);
  box-shadow: none;
  box-sizing: border-box;
}

@media (min-width: 769px) {
  body.hf-chat-page .hf-chat-composer[data-hf-chat-composer] {
    border-bottom: 0;
  }
}

body.hf-chat-page .hf-chat-composer-row {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  gap: var(--hf-chat-composer-gap);
}

body.hf-chat-page .hf-chat-emoji-toggle,
body.hf-chat-page .hf-chat-emoji-picker {
  display: none;
}

@media (min-width: 769px) {
  body.hf-chat-page .hf-chat-emoji-toggle {
    width: var(--hf-chat-control-height);
    min-width: var(--hf-chat-control-height);
    height: var(--hf-chat-control-height);
    flex: 0 0 var(--hf-chat-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    color: #687780;
    background: var(--hf-chat-input-bg);
    border: 1px solid var(--hf-chat-input-line);
    border-radius: 11px;
    font-size: 18px;
    cursor: pointer;
    box-sizing: border-box;
  }

  body.hf-chat-page .hf-chat-emoji-toggle:disabled {
    color: var(--hf-color-muted-light);
    background: var(--hf-color-surface-hover);
    border-color: var(--hf-color-line);
    cursor: default;
  }

  body.hf-chat-page .hf-chat-emoji-toggle:hover,
  body.hf-chat-page .hf-chat-emoji-toggle:focus,
  body.hf-chat-page .hf-chat-emoji-toggle.is-open {
    color: var(--hf-color-primary-hover);
    border-color: var(--hf-chat-focus);
    background: rgba(var(--hf-color-primary-rgb), 0.05);
    outline: none;
  }

  body.hf-chat-page .hf-chat-emoji-picker {
    position: absolute;
    left: var(--hf-chat-composer-inline-padding);
    bottom: calc(100% + 8px);
    z-index: 80;
    width: 278px;
    height: 174px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-content: start;
    gap: 4px;
    padding: 9px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--hf-color-text-strong);
    background: var(--hf-color-surface);
    border: 1px solid var(--hf-color-line);
    border-radius: 13px;
    box-shadow: 0 12px 28px rgba(25, 42, 54, 0.16);
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--hf-color-line-strong) transparent;
  }

  body.hf-chat-page .hf-chat-emoji-picker::-webkit-scrollbar {
    width: 7px;
  }

  body.hf-chat-page .hf-chat-emoji-picker::-webkit-scrollbar-thumb {
    background: var(--hf-color-line-strong);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
  }

  body.hf-chat-page .hf-chat-emoji-picker[hidden] {
    display: none !important;
  }

  body.hf-chat-page .hf-chat-emoji-option {
    width: 38px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
  }

  body.hf-chat-page .hf-chat-emoji-option:hover,
  body.hf-chat-page .hf-chat-emoji-option:focus {
    background: var(--hf-color-surface-hover);
    outline: none;
  }
}

body.hf-chat-page .hf-chat-input[data-hf-chat-input] {
  width: auto;
  min-width: 0;
  height: var(--hf-chat-control-height);
  flex: 1 1 auto;
  margin: 0;
  padding: 0 13px;
  color: var(--hf-color-text-strong);
  background: var(--hf-chat-input-bg);
  border: 1px solid var(--hf-chat-input-line);
  border-radius: 11px;
  outline: none;
  box-shadow: none;
  box-sizing: border-box;
  font-family: "Helvetica";
}

body.hf-chat-page .hf-chat-input[data-hf-chat-input]:focus {
  background: var(--hf-chat-input-bg);
  border-color: var(--hf-chat-focus);
  box-shadow: 0 0 0 3px var(--hf-chat-focus-shadow);
}

body.hf-chat-page .hf-chat-input[data-hf-chat-input]:disabled {
  color: var(--hf-color-muted-light);
  background: var(--hf-color-surface-hover);
}

body.hf-chat-page .hf-chat-send[data-hf-chat-send] {
  width: var(--hf-chat-action-width);
  min-width: var(--hf-chat-action-width);
  height: var(--hf-chat-control-height);
  flex: 0 0 var(--hf-chat-action-width);
  margin: 0;
  padding: 0 10px;
  color: #ffffff;
  background: var(--hf-chat-action);
  border: 1px solid var(--hf-chat-action);
  border-radius: 11px;
  font-size: var(--hf-chat-action-font-size);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
}

body.hf-chat-page .hf-chat-send[data-hf-chat-send]:hover,
body.hf-chat-page .hf-chat-send[data-hf-chat-send]:focus {
  color: #ffffff;
  background: var(--hf-chat-action-hover);
  border-color: var(--hf-chat-action-hover);
  outline: none;
}

body.hf-chat-page .hf-chat-send[data-hf-chat-send]:disabled {
  color: #9ca7ac;
  background: var(--hf-color-surface-pressed);
  border-color: var(--hf-color-surface-pressed);
}

/* Shared chat back action. Desktop geometry/typography is owned here so
 * random / room / H / persistent conversation do not drift apart. */
body.hf-chat-page .hf-chat-mobile-appbar-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

body.hf-chat-page .hf-chat-mobile-appbar-back .fa {
  margin: 0;
  flex: 0 0 auto;
}

body.hf-chat-page .hf-chat-mobile-appbar-back span {
  line-height: 1.5;
}

@media (min-width: 769px) {
  body.hf-chat-page
    .hf-chat-stage[data-hf-chat-stage]
    .hf-chat-mobile-appbar-back {
    min-height: 36px;
    justify-self: start;
    gap: 7px;
    padding: 7px 4px;
    color: #5f6973 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.5;
    text-decoration: none !important;
    transition: color 0.15s ease;
  }

  body.hf-chat-page
    .hf-chat-stage[data-hf-chat-stage]
    .hf-chat-mobile-appbar-back
    .fa {
    font-size: 14px;
    line-height: 1;
  }

  body.hf-chat-page
    .hf-chat-stage[data-hf-chat-stage]
    .hf-chat-mobile-appbar-back:hover,
  body.hf-chat-page
    .hf-chat-stage[data-hf-chat-stage]
    .hf-chat-mobile-appbar-back:focus {
    color: var(--hf-color-primary-hover) !important;
    background: transparent !important;
    outline: none;
  }
}

body.hf-chat-page .hf-chat-mobile-only {
  display: none;
}

body.hf-chat-page .hf-chat-mobile-appbar-actions {
  min-width: 0;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

@media (max-width: 900px) and (min-width: 769px) {
  body.hf-chat-page .hf-chat-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body.hf-chat-page .hf-chat-layout > .hf-chat-window {
    width: min(800px, 100%);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  /*
   * Native mobile chat application shell.
   * Safari owns keyboard/visual-viewport panning; chat layout stays on one
   * stable top:0 / height:100% coordinate system instead of replaying
   * visualViewport.offsetTop/height into CSS during keyboard animation.
   */
  body.hf-chat-native-mobile-active {
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.hf-chat-native-mobile-active .hf-chat-native-mobile-shell {
    position: fixed;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.hf-chat-native-mobile-active.hf-mobile-bottom-nav-enabled
    .hf-chat-native-mobile-shell[data-hf-chat-native-bottom-nav="reserve"] {
    height: calc(100% - var(--hf-mobile-bottom-nav-total-height));
    max-height: calc(100% - var(--hf-mobile-bottom-nav-total-height));
  }

  body.hf-chat-native-mobile-active .hf-chat-native-mobile-shell > #header_nav {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100%;
    flex: 0 0 auto;
    margin: 0;
  }

  body.hf-chat-native-mobile-active .hf-chat-native-mobile-main {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Native chat pages use one compact in-app bar instead of stacking the
   * global site header above the conversation. This remains a normal flex
   * item; no fixed/sticky/visualViewport geometry is involved. */
  body.hf-chat-native-mobile-active .hf-chat-native-mobile-shell > #header_nav {
    display: none !important;
  }

  body.hf-chat-native-mobile-active.hf-chat-page .hf-chat-mobile-appbar,
  body.room-chat-page.hf-chat-page .room-page-header.hf-chat-mobile-appbar {
    width: 100%;
    height: var(--hf-chat-mobile-appbar-height);
    min-height: var(--hf-chat-mobile-appbar-height);
    flex: 0 0 var(--hf-chat-mobile-appbar-height);
    display: grid !important;
    grid-template-columns:
      var(--hf-chat-mobile-appbar-side-width)
      minmax(0, 1fr)
      var(--hf-chat-mobile-appbar-side-width);
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0 8px 0 4px;
    background: var(--hf-chat-mobile-appbar-bg, rgba(255, 255, 255, 0.98));
    border-width: 0 0 1px;
    border-style: solid;
    border-color: var(--hf-chat-topline-line);
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
  }

  body.hf-chat-page .hf-chat-mobile-appbar-back {
    grid-column: 1;
    width: var(--hf-chat-mobile-appbar-action-size);
    min-width: var(--hf-chat-mobile-appbar-action-size);
    height: var(--hf-chat-mobile-appbar-action-size);
    min-height: var(--hf-chat-mobile-appbar-action-size);
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0;
    color: var(--hf-color-text);
    background: transparent;
    border: 0;
    border-radius: 10px;
    font-size: 0 !important;
    line-height: 1;
    text-decoration: none !important;
  }

  body.hf-chat-page .hf-chat-mobile-appbar-back .fa {
    margin: 0;
    font-size: 22px;
    line-height: 1;
  }

  body.hf-chat-page .hf-chat-mobile-appbar-back span {
    display: none;
  }

  body.hf-chat-page .hf-chat-mobile-appbar-title {
    grid-column: 2;
    min-width: 0;
    justify-self: stretch;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
  }

  body.hf-chat-page .hf-chat-mobile-appbar-title strong {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.hf-chat-page .hf-chat-mobile-appbar-title small {
    margin: 0;
    font-size: 9px;
    line-height: 1.1;
    margin-top: 4px;
  }

  body.hf-chat-page .hf-chat-mobile-appbar-actions,
  body.hf-chat-page .hf-chat-mobile-appbar-actions-mobile {
    grid-column: 3;
    width: var(--hf-chat-mobile-appbar-side-width);
    min-width: 0;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: nowrap;
  }

  body.hf-chat-page .hf-chat-mobile-appbar-action {
    width: var(--hf-chat-mobile-appbar-action-size) !important;
    min-width: var(--hf-chat-mobile-appbar-action-size) !important;
    height: var(--hf-chat-mobile-appbar-action-size) !important;
    min-height: var(--hf-chat-mobile-appbar-action-size) !important;
    flex: 0 0 var(--hf-chat-mobile-appbar-action-size) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0 !important;
    border-radius: 10px;
    font-size: 0 !important;
    line-height: 1;
  }

  body.hf-chat-page .hf-chat-mobile-appbar-action .fa {
    margin: 0;
    font-size: 14px;
    line-height: 1;
  }

  body.hf-chat-page
    .hf-chat-mobile-appbar-action
    > span:not(.hf-chat-mobile-action-content) {
    display: none;
  }

  body.hf-chat-page
    .hf-chat-mobile-appbar
    .hf-chat-mobile-appbar-action.hf-chat-mobile-profile-action
    .fa {
    color: var(--hf-color-primary-text);
    font-size: 16px;
  }

  body.hf-chat-page .hf-chat-notice-close {
    display: none;
  }

  body.hf-chat-page .hf-chat-notice[data-hf-chat-notice].is-mobile-auto-hidden {
    display: none !important;
  }

  body.hf-chat-page {
    --hf-chat-notice-margin: 8px 10px 0;
    --hf-chat-notice-padding: 9px 10px;
    --hf-chat-notice-font-size: 11px;
    --hf-chat-scroll-padding: 14px 12px 16px;
    --hf-chat-composer-padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
    --hf-chat-control-height: 44px;
    --hf-chat-action-font-size: 12px;
    --hf-chat-topline-height: 54px;
    --hf-chat-topline-margin: 0;
    --hf-chat-topline-padding: 0 12px;
    --hf-chat-panel-height: 100%;
    --hf-chat-shell-padding: 0;
  }

  body.hf-chat-page .hf-chat-shell {
    width: 100%;
    height: 100%;
    padding: 0;
  }

  body.hf-chat-page .hf-chat-topline {
    min-height: var(--hf-chat-topline-height);
    margin: 0;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
  }

  body.hf-chat-page .hf-chat-layout {
    flex: 1 1 0%;
    min-height: 0;
    display: block;
  }

  body.hf-chat-page.hf-chat-mobile-fullscreen
    .hf-chat-window[data-hf-chat-window] {
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1 1 0%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Theme-specific overrides that must win over domain mobile CSS loaded before
 * this shared stylesheet. */
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .hf-chat-mobile-appbar {
  color: #f1f6f8;
  background: rgba(17, 24, 32, 0.98);
  border-color: #2a3944;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .hf-chat-mobile-appbar-back,
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .hf-chat-mobile-appbar-title,
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .hf-chat-mobile-appbar-title
  strong,
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .hf-chat-mobile-appbar-title
  small {
  color: #f1f6f8 !important;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .stage8-profile-link.secondary-button.compact,
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .room-secondary-button,
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .room-compact-button {
  color: #d8e4e9 !important;
  background: #18242d !important;
  border-color: #344854 !important;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .stage8-random-status-panel,
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .stage8-random-side-card,
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .stage8-random-side-panel {
  color: #d9e4e9;
  background: #151f28;
  border-color: #2a3944;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .mypage-conversation-shell,
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .mypage-conversation-message-area,
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .mypage-conversation-composer {
  color: #f1f6f8;
  background-color: #111820;
  border-color: #2a3944;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .room-participant-item.is-me {
  background: #173242;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .room-role-chip {
  color: #8edcf7;
  background: #173242;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .room-poll-card.is-result {
  background: #15252f;
  border-color: #2d4c5c;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .room-poll-result-option {
  color: #dce6eb;
  background: #18242d;
  border-color: #344854;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .room-poll-result-option.is-selected {
  background: #173242;
  border-color: #39758e;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .room-poll-card
  small {
  color: #aebcc4;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .room-profile-badge {
  box-shadow: 0 0 0 1px rgba(219, 232, 238, 0.42);
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .h-chat-security
  strong {
  color: #f0d7a8;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .h-chat-security
  span {
  color: #c4ad88;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .mypage-conversation-empty
  strong,
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .mypage-conversation-empty
  p,
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .mypage-conversation-message-time {
  color: #9aabb5;
}

@media (max-width: 768px) {
  body.room-chat-page.hf-chat-page
    .room-detail-view.hf-chat-stage[data-hf-chat-stage]
    .room-detail-topline.hf-chat-mobile-appbar {
    grid-template-columns: 116px minmax(0, 1fr) 116px;
  }

  body.room-chat-page.hf-chat-page
    .room-detail-view.hf-chat-stage[data-hf-chat-stage]
    .room-detail-actions.hf-chat-mobile-appbar-actions {
    width: 116px;
  }

  body.hf-chat-page
    html[data-hf-theme="dark"]
    .hf-chat-stage[data-hf-chat-stage] {
    background-color: #132b2c !important;
    background-image: url("/back_img_night1.png") !important;
  }
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .stage8-random-profile-grid {
  background: #17212b;
  border-color: #2a3944;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .stage8-random-profile-grid
  span,
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .stage8-random-side-state
  .stage8-eyebrow.eyebrow,
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .stage8-random-side-state
  > p {
  color: #9aabb5;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .stage8-random-notice.chat-notice,
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .stage8-random-notice.chat-notice.stage8-random-notice-info {
  color: #afc0c9;
  background: #172733;
  border-color: #294657;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .stage8-random-notice.chat-notice.stage8-random-notice-positive {
  color: #9fd8ba;
  background: #162b22;
  border-color: #28513d;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .stage8-random-notice.chat-notice.stage8-random-notice-negative {
  color: #efb0b0;
  background: #321d20;
  border-color: #5b3035;
}

/* Dark-theme completeness audit. Keep domain business/state classes intact while
 * making every visible chat-stage surface use the shared dark palette. */
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  :where(
    .official_message_wrap,
    .stage8-random-typing-text,
    .stage8-random-cancel-button,
    .stage8-random-ended-secondary,
    .stage8-command-card,
    .stage8-random-block-button,
    .stage8-random-ended-protection.management-outline-button,
    .stage8-random-ended-ad
  ) {
  color: #d9e4e9 !important;
  background: #18242d !important;
  border-color: #344854 !important;
}

html[data-hf-theme="dark"]
  body.stage8-random-page.stage8-random-is-connected
  .hf-chat-stage[data-hf-chat-stage]
  .stage8-random-end-button.danger-outline-button {
  color: #f19a9f !important;
  background: #321d20 !important;
  border-color: #6a363d !important;
}

html[data-hf-theme="dark"]
  body.stage8-random-page.stage8-random-is-connected
  .hf-chat-stage[data-hf-chat-stage]
  .stage8-random-end-button.danger-outline-button:hover {
  color: #ffb2b6 !important;
  background: #432429 !important;
  border-color: #91434b !important;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  :where(
    .stage8-random-back,
    .stage8-random-title small,
    .stage8-random-side-card > p,
    .stage8-random-profile-summary,
    .random-chat-connected-text,
    .stage8-random-typing-text,
    .stage8-random-state .stage8-eyebrow,
    .stage8-random-state p,
    .stage8-random-ended-hint,
    .stage8-random-ended-ad > span,
    .stage8-random-ended-ad small,
    .stage8-random-ended-block,
    .stage8-random-block-button.chat-block-button,
    .stage8-random-ended-back.ended-back-link,
    .stage8-random-ended-main > p,
    .stage8-random-recent-chat-card
      > span:not(.stage8-random-recent-chat-arrow),
    .stage8-random-ended-protection-link,
    .room-message-nickname,
    .room-panel-caption,
    .room-participant-item small,
    .room-poll-card small,
    .mypage-conversation-meta,
    .mypage-conversation-meta time
  ) {
  color: #9aabb5 !important;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  :where(
    .stage8-random-title,
    .stage8-random-state h2,
    .stage8-command-card strong,
    .stage8-random-ended-ad strong,
    .stage8-ended-feedback .random-chat-feedback-title,
    .room-participant-head h2,
    .room-participant-item strong,
    .room-poll-card strong,
    .h-chat-title-group strong
  ) {
  color: #f1f6f8 !important;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .stage8-random-recent-chat-arrow {
  color: #91a6b2;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  :where(.stage8-random-state-icon, .stage8-command-guide.command-guide kbd) {
  color: #d9e4e9;
  background: #1d2932;
  border-color: #3a4d58;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  :where(.stage8-random-simple-info-list > div, .stage8-command-card small) {
  color: #9aabb5;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .stage8-mini-dot {
  background: #607681;
}

body.stage8-random-page.stage8-random-is-ended
  html[data-hf-theme="dark"]
  .hf-chat-stage[data-hf-chat-stage]
  .stage8-random-message-scroll {
  background: #111820 !important;
}

/* 정말 종료 */
body.stage8-random-page.stage8-random-is-connected
  html[data-hf-theme="dark"]
  .hf-chat-stage[data-hf-chat-stage]
  .stage8-random-composer-action.stage8-random-end-action.stage8-random-end-confirming {
  color: #ff8b8b !important;
  background: #3a2024 !important;
  border-color: #91434b !important;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .room-participant-item.is-me {
  background: #173242;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .room-poll-option.is-selected {
  color: #eef6f8;
  background: #26351f;
  border-color: #6e7540;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .room-poll-result-option
  b {
  color: #70d3f7;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .h-chat-bubble-content
  a {
  color: #70d3f7;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .hf-chat-command-key {
  color: #70d3f7;
  background: #18242d;
  border-color: #365565;
}

@media (hover: hover) and (pointer: fine) {
  body.hf-chat-page
    html[data-hf-theme="dark"]
    .hf-chat-stage[data-hf-chat-stage]
    :where(
      .stage8-profile-link.secondary-button.compact,
      .stage8-random-cancel-button,
      .stage8-random-ended-secondary.secondary-button,
      .stage8-random-block-button.management-outline-button,
      .stage8-random-ended-protection.management-outline-button,
      .stage8-random-recent-chat-card,
      .room-secondary-button,
      .room-compact-button,
      .h-chat-back-link,
      .mypage-conversation-back
    ):hover {
    color: #f1f6f8 !important;
    background: #22323d !important;
    border-color: #49606c !important;
  }

  body.hf-chat-page
    html[data-hf-theme="dark"]
    .hf-chat-stage[data-hf-chat-stage]
    :where(
      .stage8-random-start-button,
      .stage8-random-ended-primary.primary-button,
      .room-primary-button,
      .hf-chat-send[data-hf-chat-send]
    ):hover {
    color: #fff !important;
    background: var(--hf-button-primary-hover-bg) !important;
    border-color: var(--hf-button-primary-hover-bg) !important;
  }

  body.hf-chat-page
    html[data-hf-theme="dark"]
    .hf-chat-stage[data-hf-chat-stage]
    :where(
      .stage8-random-end-button.danger-outline-button,
      .stage8-random-ended-protection-link
    ):hover {
    color: #f19a9f !important;
    background: #321d20 !important;
    border-color: #6a363d !important;
  }

  body.hf-chat-page
    html[data-hf-theme="dark"]
    .hf-chat-stage[data-hf-chat-stage]
    .room-poll-option:not(:disabled):hover,
  body.hf-chat-page
    html[data-hf-theme="dark"]
    .hf-chat-stage[data-hf-chat-stage]
    .room-participant-item:hover {
    color: #f1f6f8;
    background: #22323d;
    border-color: #49606c;
  }
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .h-chat-info-heading
  strong,
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .h-chat-learning-item
  strong {
  color: #e7eef2;
}

html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .h-chat-learning-item,
html[data-hf-theme="dark"]
  body.hf-chat-page
  .hf-chat-stage[data-hf-chat-stage]
  .h-chat-learning-empty {
  color: #9aabb5;
  border-color: #2a3944;
}