/* /start/random deep-consolidated styles: semantic duplicates merged, latest cascade preserved. */

:root {
  --stage8-blue: var(--hf-color-primary);
  --stage8-blue-dark: var(--hf-color-primary-hover);
  --stage8-blue-soft: var(--hf-color-primary-soft);
  --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);
  --stage8-warm: #fff9f3;
  --stage8-warm-line: #f0dfca;
}

.stage8-entry-page {
  min-height: 100vh;
  overflow-x: hidden;
  background: #fff;
  color: var(--stage8-ink);
}

.stage8-chat-main-shell {
  width: min(
    var(--hf-site-max-width),
    calc(100% - var(--hf-site-inline-space))
  );
  min-height: calc(100vh - 117px); /* header + footer 높이 뺌 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  padding: 72px 0 90px;
}

.stage8-chat-main-heading {
  max-width: 680px;
  margin-bottom: 34px;
}

.stage8-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #657078;
  font-size: 13px;
  font-weight: 700;
}

.stage8-online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hf-color-success);
  box-shadow: 0 0 0 4px rgba(57, 196, 124, 0.12);
}

.stage8-chat-main-heading h1 {
  margin: 14px 0 12px;
  color: #171b1f;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.055em;
}

.stage8-chat-main-heading p {
  margin: 0;
  color: var(--stage8-muted);
  font-size: 15px;
  line-height: 1.7;
}

.stage8-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.stage8-service-card {
  min-height: 155px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 28px;
  color: inherit;
  text-decoration: none !important;
  background: var(--hf-card-bg);
  border: 1px solid var(--hf-card-border);
  border-radius: 22px;
  transition: 0.18s ease;
}

.stage8-service-card:hover {
  color: inherit;
  text-decoration: none;
  border-color: var(--hf-color-primary-border);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(29, 53, 73, 0.09);
}

.stage8-service-card:focus {
  color: inherit;
  text-decoration: none;
  border-color: var(--hf-color-primary-border);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(29, 53, 73, 0.09);
}

.stage8-service-card.is-primary {
  background: linear-gradient(
    135deg,
    var(--hf-color-primary-soft),
    var(--hf-card-bg)
  );
  border-color: var(--hf-color-primary-border);
}

.stage8-service-card.is-warm {
  background: linear-gradient(135deg, var(--stage8-warm), #fff);
  border-color: var(--stage8-warm-line);
}

.stage8-service-card.is-muted {
  background: #fbfcfd;
}

.stage8-service-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--stage8-blue-dark);
  background: #fff;
  border: 1px solid rgba(var(--hf-color-primary-rgb), 0.15);
  border-radius: 18px;
  font-size: 23px;
  font-weight: 800;
}

.stage8-service-content {
  min-width: 0;
  flex: 1;
}

.stage8-service-content strong {
  display: block;
}

.stage8-service-content small {
  display: block;
}

.stage8-service-content strong {
  margin-bottom: 8px;
  font-size: 21px;
  letter-spacing: -0.03em;
}

.stage8-service-content small {
  color: var(--stage8-muted);
  font-size: 14px;
  line-height: 1.55;
}

.stage8-service-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.stage8-service-title-row > strong {
  min-width: 0;
  margin-bottom: 0;
}

.stage8-service-live-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 3px 7px;
  color: #61727c;
  background: rgba(var(--hf-color-primary-rgb), 0.06);
  border: 1px solid rgba(var(--hf-color-primary-rgb), 0.12);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.stage8-service-live-dot {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: var(--hf-color-success);
}

.stage8-service-arrow {
  color: #75828a;
  font-size: 24px;
}

.stage8-home-link {
  align-self: flex-start;
  margin-top: 28px;
  color: var(--stage8-blue-dark);
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 700;
}

@media (min-width: 769px) {
  body.stage8-random-page {
    overflow: auto;
    background: var(--stage8-soft);
  }

  body.stage8-random-page .stage8-random-viewport {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    background-position: center;
    background-size: cover;
  }

  body.stage8-random-page .stage8-random-shell {
    width: min(var(--hf-site-max-width), 100%);
    height: auto;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
  }

  body.stage8-random-page .stage8-random-topline {
    min-height: 58px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    padding: 0 4px;
  }

  body.stage8-random-page .stage8-random-back {
    color: #41515b;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 700;
  }

  .stage8-profile-link {
    color: #41515b;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 700;
  }

  .stage8-profile-link {
    justify-self: end;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(211, 222, 227, 0.95);
    border-radius: 10px;
  }

  body.stage8-random-page .stage8-random-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #273038;
  }

  .stage8-random-title strong {
    display: block;
    font-size: 15px;
  }

  .stage8-random-title small {
    display: block;
    margin-top: 2px;
    color: #78858d;
    font-size: 11px;
  }

  body.stage8-random-page .stage8-random-grid {
    min-height: 0;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 18px;
  }

  body.stage8-random-page .stage8-random-side-card {
    align-self: start;
    padding: 24px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(218, 226, 230, 0.95);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(29, 53, 73, 0.06);
  }

  body.stage8-random-page .stage8-random-side-card h3 {
    margin: 10px 0 9px;
    font-size: 19px;
    letter-spacing: -0.03em;
  }

  body.stage8-random-page .stage8-random-side-card > p {
    margin: 0;
    color: #738089;
    font-size: 12px;
    line-height: 1.65;
  }

  .stage8-command-guide {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e7ecee;
  }

  .stage8-command-guide > div {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .stage8-command-guide kbd {
    min-width: 36px;
    padding: 7px 10px;
    color: #26343c;
    background: #f3f6f7;
    border: 1px solid #dce4e7;
    border-radius: 9px;
    box-shadow: none;
    text-align: center;
  }

  .stage8-command-guide strong {
    display: block;
  }

  .stage8-command-guide small {
    display: block;
  }

  .stage8-command-guide strong {
    font-size: 12px;
  }

  .stage8-command-guide small {
    margin-top: 3px;
    color: #7b888f;
    font-size: 10px;
    line-height: 1.45;
  }
}

@media (max-width: 768px) {
  .stage8-chat-main-shell {
    width: min(100% - 28px, 560px);
    min-height: calc(100vh - 110px);
    padding: 38px 0 54px;
  }

  .stage8-chat-main-heading {
    margin-bottom: 24px;
  }

  .stage8-chat-main-heading h1 {
    font-size: 32px;
  }

  .stage8-chat-main-heading p {
    font-size: 13px;
  }

  .stage8-service-grid {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .stage8-service-card {
    min-height: 112px;
    padding: 20px;
    border-radius: 18px;
  }

  .stage8-service-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 15px;
    font-size: 19px;
  }

  .stage8-service-content strong {
    margin-bottom: 5px;
    font-size: 17px;
  }

  .stage8-service-title-row {
    gap: 10px;
    margin-bottom: 5px;
  }

  .stage8-service-title-row > strong {
    margin-bottom: 0;
  }

  .stage8-service-live-status {
    min-height: 18px;
    padding: 2px 6px;
    font-size: 9px;
  }

  .stage8-service-content small {
    font-size: 12px;
  }
}

body.stage8-random-page .stage8-random-start-button:hover {
  background: var(--hf-color-primary-hover);
  border-color: var(--hf-color-primary-hover);
}

body.stage8-random-page .stage8-random-start-button:focus {
  background: var(--hf-color-primary-hover);
  border-color: var(--hf-color-primary-hover);
}

body.stage8-random-page .stage8-random-profile-summary {
  display: block;
  margin-top: 12px;
  color: #879198;
  font-size: 10px;
  line-height: 1.5;
}

@keyframes stage8RandomSpin {
  to {
    transform: rotate(360deg);
  }
}

body.stage8-random-page #stage8_random_status_dot.is-idle {
  background: #a7b0b6;
  box-shadow: 0 0 0 4px rgba(167, 176, 182, 0.13);
}

body.stage8-random-page #stage8_random_status_dot.is-matching {
  background: #f3a83b;
  box-shadow: 0 0 0 4px rgba(243, 168, 59, 0.14);
}

body.stage8-random-page #stage8_random_status_dot.is-connected {
  background: var(--hf-color-success);
  box-shadow: 0 0 0 4px rgba(57, 196, 124, 0.12);
}

body.stage8-random-page.stage8-random-is-idle .stage8-random-composer {
  display: none;
}

body.stage8-random-page.stage8-random-is-matching .stage8-random-composer {
  display: none;
}

body.stage8-random-page .stage8-random-composer-input {
  box-sizing: border-box;
  -webkit-appearance: none;
  outline: none;
  font-family: "Helvetica";
}

body.stage8-random-page .official_message_wrap {
  width: fit-content;
  max-width: 88%;
  margin: 10px auto;
  padding: 7px 11px;
  color: #7a858c;
  background: #f1f4f5;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

body.stage8-random-page .random-chat-milestone-notice {
  width: fit-content;
  max-width: 82%;
  margin: 12px auto;
  padding: 8px 12px;

  border-radius: 12px;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.65;

  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
}

body.stage8-random-page .stage8-random-connected-message {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: auto;
  margin-right: auto;
}

body.stage8-random-page .random-chat-connected-check {
  flex: 0 0 auto;
  color: var(--hf-color-success);
  font-size: 12px;
}

body.stage8-random-page .random-chat-connected-text {
  color: #6f7b82;
  white-space: nowrap;
  line-height: 1;
}

body.stage8-random-page .random-chat-connected-time {
  flex: 0 0 auto;
  margin-left: 2px;
  color: var(--hf-color-muted-light);
  font-size: 9px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
}

body.stage8-random-page #one_to_one_chat_tip {
  max-width: min(92%, 580px);
  border-radius: 12px;
}

@media (min-width: 769px) {
  body.stage8-random-page {
    --hf-chat-composer-padding: 14px;
    --hf-chat-composer-gap: 13px;
    --hf-chat-control-height: 45px;
  }

  body.stage8-random-page .msg_wrap {
    margin-top: 3px;
  }
}

body.stage8-random-page.stage8-random-is-connected .stage8-random-side-actions {
  display: grid;
}

body.stage8-random-page .stage8-random-end-button:disabled {
  opacity: 0.55;
  cursor: default;
}

body.stage8-random-page .stage8-random-block-button:disabled {
  opacity: 0.55;
  cursor: default;
}

body.stage8-random-page .stage8-random-action-dialog h2 {
  margin: 0;
  color: var(--stage8-ink);
  font-size: 21px;
  letter-spacing: -0.035em;
}

body.stage8-random-page .stage8-random-action-options button.is-danger {
  background: rgba(228, 93, 93, 0.035);
  border-color: rgba(228, 93, 93, 0.2);
}

body.stage8-random-page .stage8-random-action-options button.is-report {
  background: rgba(229, 145, 45, 0.04);
  border-color: rgba(229, 145, 45, 0.24);
}

body.stage8-random-page .stage8-random-action-options strong {
  display: block;
  color: #2c3439;
  font-size: 14px;
}

body.stage8-random-page .stage8-random-action-options span {
  display: block;
  margin-top: 6px;
  color: var(--stage8-muted);
  font-size: 11px;
  line-height: 1.55;
}

body.stage8-random-page #stage8_random_status_dot.is-ended {
  background: #a7b0b6;
  box-shadow: 0 0 0 4px rgba(167, 176, 182, 0.13);
}

body.stage8-random-page .stage8-random-ended-ad {
  min-height: 86px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 28px 0;
  padding: 16px 18px;
  text-align: left;
  background: #f7f9fa;
  border-top: 1px solid var(--stage8-line);
  border-bottom: 1px solid var(--stage8-line);
}

body.stage8-random-page .stage8-random-ended-ad > span {
  color: #a4abb0;
  font-size: 9px;
  font-weight: 900;
}

body.stage8-random-page .stage8-random-ended-ad strong {
  display: block;
  color: #505b62;
  font-size: 12px;
}

body.stage8-random-page .stage8-random-ended-ad small {
  display: block;
  margin-top: 5px;
  color: var(--stage8-muted);
  font-size: 10px;
  line-height: 1.5;
}

body.stage8-random-page .stage8-random-ended-block {
  margin-top: 17px;
  padding: 0;
  color: #8d979d;
  background: transparent;
  border: 0;
  font-size: 10px;
  text-decoration: underline;
}

body.stage8-random-page .stage8-random-ended-ad-slot:empty::before {
  content: "AD";
  color: #a4abb0;
  font-size: 9px;
  font-weight: 900;
}

body.stage8-random-page
  .stage8-random-ended-ad-slot
  #mootoon_start_state_banner {
  width: 100%;
  margin: 0;
}

body.stage8-random-page .stage8-random-viewport.time-background {
  position: relative;
  margin: 0;
  isolation: isolate;
}

body.stage8-random-page .stage8-random-shell.chat-page {
  width: min(
    var(--hf-site-max-width),
    calc(100% - var(--hf-site-inline-space))
  );
  min-height: auto;
  height: auto;
  margin: 0 auto;
  padding: var(--hf-chat-shell-padding);
}

body.stage8-random-page .stage8-random-back.text-button {
  justify-self: start;
  padding: 7px 0;
  color: #5f6973;
  background: transparent;
  border: 0;
  font-size: 13px;
  font-weight: 800;
}

body.stage8-random-page .stage8-random-title.chat-title-group small {
  margin: 0;
  color: var(--stage8-muted);
  font-size: 11px;
  line-height: 1.2;
}

body.stage8-random-page .chat-topline-actions {
  justify-self: end;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

body.stage8-random-page .stage8-profile-link.secondary-button.compact {
  min-height: 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 13px;
  color: var(--hf-button-secondary-text);
  background: var(--hf-button-secondary-bg);
  border: 1px solid var(--hf-button-secondary-border);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none !important;
}

body.stage8-random-page .stage8-profile-link.secondary-button.compact:hover {
  background: var(--hf-button-secondary-hover-bg);
  border-color: var(--hf-color-line-strong);
}

body.stage8-random-page .stage8-profile-link.secondary-button.compact .fa {
  color: var(--stage8-blue-dark);
  font-size: 14px;
}

body.stage8-random-page .msg_wrap {
  padding: 0;
  overflow: hidden;
}

body.stage8-random-page .send_box {
  max-width: min(70%, 540px);
  padding: 8px 13px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  box-shadow: 0 4px 14px rgba(31, 50, 66, 0.04);
  border: 1px solid var(--stage8-blue);
  color: var(--hf-chat-bubble-mine-text);
  background: var(--hf-chat-bubble-mine-bg);
  border-color: var(--hf-chat-bubble-mine-bg);
  border-radius: 15px 15px 4px 15px;
}

body.stage8-random-page .receive_box {
  max-width: min(70%, 540px);
  padding: 8px 13px;
  font-size: 14px;
  line-height: 1.55;
  border: 1px solid var(--stage8-line);
  box-shadow: 0 4px 14px rgba(31, 50, 66, 0.04);
  color: var(--hf-chat-bubble-peer-text);
  background: var(--hf-chat-bubble-peer-bg);
  border-radius: 15px 15px 15px 4px;
}

body.stage8-random-page .stage8-random-typing-row {
  display: none;
}

body.stage8-random-page .stage8-random-typing-text {
  width: fit-content;
  max-width: min(70%, 540px);
  padding: 8px 13px;
  font-size: 13px;
  line-height: 1.55;
  color: #6e7680;
  background: #fff;
  border: 1px solid var(--stage8-line);
  border-radius: 15px 15px 15px 4px;
  box-shadow: 0 4px 14px rgba(31, 50, 66, 0.04);
}

body.stage8-random-page .stage8-eyebrow.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #68717a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.stage8-random-page .stage8-random-side-card.chat-side-card > p {
  margin: 0;
  color: var(--stage8-muted);
  font-size: 13px;
  line-height: 1.7;
}

body.stage8-random-page .stage8-command-guide.command-guide > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.stage8-random-page .stage8-random-block-button.chat-block-button {
  width: 100%;
  min-height: 40px;
  color: #747d84;
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.stage8-random-page .stage8-random-ended-back.ended-back-link {
  position: absolute;
  top: 24px;
  left: 0;
  color: #5f6973;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none !important;
}

body.stage8-random-page .stage8-random-ended-actions.ended-actions {
  display: flex;
  gap: 9px;
  justify-content: center;
  margin-top: 26px;
}

body.stage8-random-page .stage8-random-ended-secondary.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border: 1px solid var(--stage8-line);
  min-height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  font-weight: 800;
  color: #343a40;
  background: #fff;
  border-color: var(--stage8-line);
  text-decoration: none !important;
}

body.stage8-random-page .stage8-random-ended-hint.ended-recent-hint {
  max-width: 480px;
  line-height: 1.65;
  margin: 14px auto 0 !important;
  color: #8b9399 !important;
  font-size: 11px !important;
}

body.stage8-random-page .stage8-random-action-dialog.mobile-chat-action-dialog {
  color: var(--stage8-ink);
}

body.stage8-random-page
  .stage8-random-action-options.mobile-chat-action-options {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}

body.stage8-random-page
  .stage8-random-action-options.mobile-chat-action-options
  button {
  min-height: 68px;
  padding: 14px 16px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--stage8-line);
  border-radius: 14px;
}

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

  body.stage8-random-page .stage8-random-side-card.chat-side-card {
    order: -1;
  }
}

body.stage8-random-page #send_picture_btn {
  display: none !important;
}

body.stage8-random-page #select_picture {
  display: none !important;
}

@media (min-width: 769px) and (max-width: 900px) {
  body.stage8-random-page .stage8-random-shell.chat-page.one-to-one-page {
    display: flex;
  }

  body.stage8-random-page .stage8-random-topline.chat-topline {
    display: grid;
  }

  body.stage8-random-page .stage8-random-grid.chat-layout {
    display: grid;
  }

  body.stage8-random-page .stage8-random-chat-window.chat-window {
    display: flex;
  }

  body.stage8-random-page .stage8-random-notice.chat-notice {
    display: block;
  }

  body.stage8-random-page .stage8-random-side-card.chat-side-card {
    display: flex;
    flex-direction: column;
  }
}

body.stage8-random-page {
  --stage8-blue: var(--hf-color-primary);
  --stage8-blue-dark: var(--hf-color-primary-hover);
  --stage8-blue-soft: var(--hf-color-primary-soft);
  --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);
  --stage8-green: var(--hf-color-success);
  --stage8-danger: var(--hf-color-danger);
  --hf-chat-line: var(--stage8-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(--stage8-line);
  --hf-chat-focus: var(--stage8-blue);
  --hf-chat-focus-shadow: var(--hf-focus-ring);
  --hf-chat-action: var(--stage8-blue);
  --hf-chat-action-hover: var(--stage8-blue-dark);
  --hf-chat-window-radius: 18px;
  --hf-chat-window-shadow: 0 8px 28px rgba(29, 53, 73, 0.055);
  --hf-chat-notice-margin: 15px 15px 0;
  --hf-chat-notice-padding: 11px 13px;
  --hf-chat-scroll-padding: 22px 24px 18px;
  --hf-chat-composer-padding: 13px;
  --hf-chat-control-height: 44px;
  --hf-chat-action-width: 72px;
  margin: 0;
  min-width: 320px;
  color: var(--stage8-ink);
  background: #fff;
  font-family:
    "Pretendard",
    "Noto Sans KR",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  --stage8-random-panel-height: var(--hf-chat-panel-height);
}

body.stage8-random-page .stage8-random-topline.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);
  backdrop-filter: blur(8px);
  border-radius: var(--hf-chat-topline-radius);
  box-shadow: var(--hf-chat-topline-shadow);
}

body.stage8-random-page .stage8-random-title.chat-title-group {
  justify-self: center;
  align-items: center;
  color: var(--stage8-ink);
  text-align: center;
  display: inline-flex;
  grid-template-columns: none;
  gap: 8px;
}

body.stage8-random-page .stage8-random-title.chat-title-group .status-dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  background: var(--stage8-green);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(37, 182, 111, 0.12);
  grid-row: auto;
}

body.stage8-random-page .stage8-random-title.chat-title-group strong {
  font-size: 14px;
  letter-spacing: -0.02em;
}

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

body.stage8-random-page.stage8-random-is-ended .stage8-random-grid.chat-layout {
  grid-template-columns: minmax(0, 1fr) var(--hf-chat-side-width);
  align-items: stretch;
}

body.stage8-random-page.stage8-random-is-ended
  .stage8-random-chat-window.chat-window {
  height: var(--stage8-random-panel-height);
  min-height: 0;
  max-height: var(--stage8-random-panel-height);
}

body.stage8-random-page .stage8-random-chat-window.chat-window {
  max-height: var(--stage8-random-panel-height);
  min-height: 0;
  height: var(--stage8-random-panel-height);
}

body.stage8-random-page .stage8-random-side-card.chat-side-card {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--stage8-line);
  backdrop-filter: blur(8px);
  height: var(--stage8-random-panel-height);
  min-height: 0;
  max-height: var(--stage8-random-panel-height);
  align-self: stretch;
  padding: var(--hf-chat-side-padding);
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(29, 53, 73, 0.055);
  display: flex !important;
  flex-direction: column;
}

body.stage8-random-page.stage8-random-is-ended
  .stage8-random-side-card.chat-side-card {
  height: var(--stage8-random-panel-height);
  min-height: 0;
  max-height: var(--stage8-random-panel-height);
  align-self: stretch;
  padding: var(--hf-chat-side-padding);
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(29, 53, 73, 0.055);
  display: flex !important;
  flex-direction: column;
}

body.stage8-random-page .stage8-random-notice.chat-notice {
  display: block !important;
}

body.stage8-random-page
  .stage8-random-notice.chat-notice.is-peer-connection-wait-hidden {
  display: none !important;
}

body.stage8-random-page .stage8-random-connection-notice[hidden] {
  display: none !important;
}

body.stage8-random-page.stage8-random-is-ended
  .stage8-random-notice.chat-notice {
  color: #647b87;
  background: #e8faff;
  border-color: #daeff6;
  display: block !important;
}

body.stage8-random-page
  .stage8-random-notice.chat-notice.stage8-random-notice-info {
  color: #647b87;
  background: #effbff;
  border-color: #daeff6;
}

body.stage8-random-page
  .stage8-random-notice.chat-notice.stage8-random-notice-positive {
  color: #337256;
  background: var(--hf-color-success-soft);
  border-color: #cfe8da;
}

body.stage8-random-page
  .stage8-random-notice.chat-notice.stage8-random-notice-negative {
  color: #a24b4b;
  background: var(--hf-color-danger-soft);
  border-color: #f0cece;
}

body.stage8-random-page .stage8-random-notice .stage8-random-notice-countdown,
body.stage8-random-page .stage8-random-notice .stage8-random-notice-delay {
  font-weight: 800;
  color: #d94f4f;
}

body.stage8-random-page .stage8-random-message-scroll {
  line-height: 1.5;
}

body.stage8-random-page:not(.stage8-random-is-connected)
  .stage8-random-composer {
  display: none !important;
}

body.stage8-random-page.stage8-random-is-ended
  .stage8-random-composer.chat-composer {
  display: none !important;
}

body.stage8-random-page.stage8-random-is-connected .stage8-random-composer {
  display: flex !important;
}

body.stage8-random-page .stage8-random-state {
  box-sizing: border-box;
  width: min(520px, calc(100% - 48px));
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
  padding: 34px 0;
  text-align: center;
}

body.stage8-random-page .stage8-random-state-icon {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
  color: #667984;
  background: #f5f8f9;
  border: 1px solid var(--stage8-line);
  border-radius: 18px;
  font-size: 24px;
  font-weight: 800;
}

body.stage8-random-page .stage8-random-state .stage8-eyebrow {
  color: #7c8b93;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
}

body.stage8-random-page .stage8-random-state h2 {
  font-weight: 800;
  margin: 10px 0 9px;
  color: var(--stage8-ink);
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -0.045em;
}

body.stage8-random-page .stage8-random-state p {
  max-width: 440px;
  word-break: keep-all;
  margin: 0;
  color: #7c878e;
  font-size: 12px;
  line-height: 1.75;
}

body.stage8-random-page .stage8-random-start-button {
  cursor: pointer;
  min-width: 150px;
  min-height: 42px;
  margin-top: 24px;
  padding: 0 16px;
  border-radius: 11px;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  background: var(--stage8-blue);
  border: 1px solid var(--stage8-blue);
}

body.stage8-random-page .stage8-random-cancel-button {
  cursor: pointer;
  min-width: 150px;
  min-height: 42px;
  margin-top: 24px;
  padding: 0 16px;
  border-radius: 11px;
  font-size: 16px;
  font-weight: 800;
  color: var(--hf-button-secondary-text);
  background: var(--hf-button-secondary-bg);
  border: 1px solid var(--hf-button-secondary-border);
}

body.stage8-random-page .stage8-random-cancel-button:hover {
  background: var(--hf-button-secondary-hover-bg);
  border-color: var(--hf-color-line-strong);
}

body.stage8-random-page .stage8-random-matching-spinner {
  border-radius: 50%;
  width: auto;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 18px;
  border: 0;
  animation: none;
}

body.stage8-random-page .stage8-random-matching-spinner i {
  width: 7px;
  height: 7px;
  display: block;
  background: #98a7af;
  border-radius: 50%;
  animation: stage8-random-dot-pulse 1.1s infinite ease-in-out;
}

body.stage8-random-page .stage8-random-matching-spinner i:nth-child(2) {
  animation-delay: 0.14s;
}

body.stage8-random-page .stage8-random-matching-spinner i:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes stage8-random-dot-pulse {
  0%,
  80%,
  100% {
    opacity: 0.28;
    transform: translateY(0);
  }

  40% {
    opacity: 1;
    transform: translateY(-5px);
  }
}

body.stage8-random-page .stage8-random-connected-message {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 80%;
  margin: 8px auto 22px !important;
  padding: 7px 11px !important;
  color: #5b656a !important;
  background: #f0f4f6 !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  text-align: center;
}

body.stage8-random-page .stage8-random-side-content {
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

body.stage8-random-page .stage8-random-side-action-dock {
  flex: 0 0 auto;
}

body.stage8-random-page #stage8_random_side_live_actions[hidden] {
  display: none !important;
}

body.stage8-random-page #stage8_random_side_live_actions:not([hidden]) {
  display: grid;
}

body.stage8-random-page .stage8-random-side-state {
  height: 100%;
  min-height: 0;
  display: none;
  flex-direction: column;
  overflow-y: auto;
}

body.stage8-random-page.stage8-random-is-idle .stage8-random-side-idle {
  display: flex;
}

body.stage8-random-page.stage8-random-is-matching .stage8-random-side-matching {
  display: flex;
}

body.stage8-random-page.stage8-random-is-connected .stage8-random-side-live {
  display: flex;
}

body.stage8-random-page.stage8-random-is-ended .stage8-random-side-ended {
  display: flex;
}

body.stage8-random-page .stage8-random-side-state .stage8-eyebrow.eyebrow {
  margin-bottom: 6px;
  color: #7c8b93;
  font-size: 10px;
  letter-spacing: 0.07em;
}

body.stage8-random-page .stage8-random-side-card.chat-side-card h3 {
  margin: 4px 0 9px;
  color: var(--stage8-ink);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.035em;
}

body.stage8-random-page .stage8-random-side-state > p {
  margin: 0;
  color: #687278;
  font-size: 11px;
  line-height: 1.7;
}

body.stage8-random-page .stage8-random-side-state > h3 {
  margin: 11px 0 9px;
  color: var(--stage8-ink);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.035em;
  font-weight: 700;
}

body.stage8-random-page .stage8-random-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 12px;
  padding: 12px 0;
  background: var(--hf-color-surface-soft);
  border: 1px solid var(--hf-color-line);
  border-radius: 10px;
  text-align: center;
}

body.stage8-random-page .stage8-random-profile-grid > div {
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

body.stage8-random-page .stage8-random-profile-grid > div + div {
  border-left: 1px solid var(--stage8-line);
}

body.stage8-random-page .stage8-random-profile-grid span {
  display: block;
  color: var(--hf-color-muted-light);
  font-size: 9px;
}

body.stage8-random-page .stage8-random-profile-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

body.stage8-random-page .stage8-random-simple-info-list {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

body.stage8-random-page .stage8-random-simple-info-list > div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #67737a;
  font-size: 11px;
}

body.stage8-random-page .stage8-mini-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: #c4cdd2;
  border-radius: 50%;
}

body.stage8-random-page .stage8-command-guide.command-guide {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
}

body.stage8-random-page
  .stage8-command-guide.command-guide
  > .stage8-command-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--hf-color-surface-soft);
  border: 1px solid var(--hf-color-line);
  border-radius: 10px;
}

body.stage8-random-page .stage8-command-guide.command-guide kbd {
  color: #26343c;
  box-shadow: none;
  text-align: center;
  min-width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #fff;
  border: 1px solid #d9e0e4;
  border-radius: 7px;
  font-size: 12px;
}

body.stage8-random-page .stage8-command-card strong {
  display: block;
  font-size: 11px;
}

body.stage8-random-page .stage8-random-side-actions.chat-side-actions {
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 10px;
  padding-top: 0;
}

body.stage8-random-page .stage8-random-end-button.danger-outline-button {
  cursor: pointer;
  padding: 0 8px;
  font-size: 14px;
  text-decoration: none;
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  font-weight: 800;
  color: var(--hf-color-danger-hover);
  background: var(--hf-button-secondary-bg);
  border: 1px solid var(--hf-color-danger);
}

body.stage8-random-page .stage8-random-end-button.danger-outline-button:hover {
  background: var(--hf-color-danger-soft);
}

body.stage8-random-page .stage8-random-block-button.management-outline-button {
  cursor: pointer;
  width: 100%;
  min-height: 42px;
  padding: 0 8px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  color: var(--hf-button-secondary-text);
  background: var(--hf-button-secondary-bg);
  border: 1px solid var(--hf-button-secondary-border);
}

body.stage8-random-page
  .stage8-random-block-button.management-outline-button:hover {
  background: var(--hf-color-surface-hover);
}

body.stage8-random-page.stage8-random-is-ended .stage8-random-message-scroll {
  background: var(--hf-color-surface);
  display: block;
  overflow-y: auto;
  padding: 0 !important;
}

body.stage8-random-page .stage8-random-ended-flow.ended-flow {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  min-height: 0;
  display: block;
  margin: 0;
  padding: 28px 34px 24px;
}

body.stage8-random-page .stage8-random-ended-main.ended-flow-main {
  width: min(666px, 100%);
  margin: 0 auto;
  text-align: center;
}

body.stage8-random-page .stage8-random-ended-icon.state-icon {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  color: #43a66f;
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 32px;
  line-height: 1;
}

body.stage8-random-page .stage8-random-ended-main h1 {
  margin: 0;
  color: var(--stage8-ink);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.045em;
}

body.stage8-random-page .stage8-random-ended-main .stage8-random-ended-meta {
  margin: 7px 0 0;
  color: #9aa3a8;
  font-size: 12px;
  line-height: 1.5;
}

body.stage8-random-page .stage8-random-ended-ad-zone {
  width: 100%;
  margin-top: 20px;
  padding: 6px;
  overflow: hidden;
  box-sizing: border-box;
  background: #f2f4f5;
  border: 1px solid #e5eaed;
  border-radius: 14px;
}

body.stage8-random-page .stage8-random-ended-ad-slot.ended-inline-ad {
  width: 100%;
  min-height: 62px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 10px;
}

/*
 * Post-chat A안: 광고와 Handsfriend action을 물리적으로 분리한 뒤
 * 평가/최근 채팅/보호/재매칭을 하나의 surface로 묶는다.
 * PC/Mobile은 같은 markup과 디자인 token을 사용한다.
 */
body.stage8-random-page .stage8-random-ended-service-zone {
  width: 100%;
  margin-top: 24px;
  padding: 16px;
  display: grid;
  gap: 0;
  box-sizing: border-box;
  overflow: hidden;
  text-align: left;
  background: var(--hf-color-surface-soft);
  border: 1px solid var(--hf-color-line);
  border-radius: 14px;
  box-shadow: none;
}

body.stage8-random-page .stage8-ended-feedback.rating-block {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 16px;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hf-color-line);
  border-radius: 0;
  box-shadow: none;
}

body.stage8-random-page .stage8-random-ended-feedback-header {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.stage8-random-page .stage8-ended-feedback .random-chat-feedback-title {
  min-width: 0;
  margin: 0;
  display: block;
  color: var(--hf-color-text);
  font-size: 12px;
  font-weight: 800;
}

body.stage8-random-page
  .stage8-ended-feedback
  .random-chat-feedback-description {
  display: none;
}

.random-chat-feedback-title.is-submitted .fa {
  margin-right: 5px;
  color: var(--hf-color-success);
  font-size: 12px;
  vertical-align: -1px;
}

body.stage8-random-page .stage8-ended-feedback .random-chat-feedback-primary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

body.stage8-random-page .stage8-ended-feedback .random-chat-feedback-btn {
  min-height: 36px;
  padding: 6px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--hf-color-text);
  background: var(--hf-color-surface);
  border: 1px solid var(--hf-color-line);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

@media (hover: hover) and (pointer: fine) {
  body.stage8-random-page
    .stage8-ended-feedback
    .random-chat-feedback-btn:not(:disabled):hover {
    color: var(--hf-color-text-strong);
    background: var(--hf-button-secondary-hover-bg);
    border-color: var(--hf-color-line-strong);
  }
}

body.stage8-random-page .random-chat-feedback-emoji {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  font-size: 14px;
  line-height: 1;
}

body.stage8-random-page .random-chat-feedback-label {
  display: block;
}

body.stage8-random-page .stage8-ended-feedback .random-chat-feedback-reason {
  min-height: 36px;
  padding: 0 10px;
  text-align: left;
  color: var(--hf-color-text);
  background: var(--hf-color-surface);
  border: 1px solid var(--hf-color-line);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
}

body.stage8-random-page .stage8-ended-feedback .random-chat-feedback-reasons {
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

body.stage8-random-page .stage8-random-ended-protection {
  min-height: 28px;
  flex: 0 0 auto;
  padding: 0 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--hf-color-muted);
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

body.stage8-random-page .stage8-random-ended-protection:hover,
body.stage8-random-page .stage8-random-ended-protection:focus {
  color: var(--hf-color-text);
  background: var(--hf-color-surface-hover);
}

body.stage8-random-page .stage8-random-ended-protection-emoji {
  font-size: 12px;
  line-height: 1;
}

body.stage8-random-page .stage8-random-ended-protection-only {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hf-color-line);
}

body.stage8-random-page .stage8-random-recent-chat-card {
  position: relative;
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 14px 34px 15px 2px;
  color: var(--stage8-ink);
  text-align: left;
  text-decoration: none !important;
  background: transparent;
  border: 0;
  border-radius: 0;
}

body.stage8-random-page .stage8-random-recent-chat-card:hover,
body.stage8-random-page .stage8-random-recent-chat-card:focus {
  color: var(--stage8-ink);
  background: var(--hf-color-surface-hover);
  text-decoration: none !important;
}

body.stage8-random-page .stage8-random-recent-chat-card span {
  display: block;
}

body.stage8-random-page .stage8-random-recent-chat-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--hf-color-primary-text);
  background: var(--hf-color-primary-soft);
  border-radius: 50%;
  font-size: 12px;
}

body.stage8-random-page .stage8-random-recent-chat-copy {
  min-width: 0;
  flex: 1 1 auto;
}

body.stage8-random-page .stage8-random-recent-chat-card strong {
  display: block;
  color: var(--hf-color-text-strong);
  font-size: 11px;
  font-weight: 800;
}

body.stage8-random-page .stage8-random-recent-chat-copy > span {
  margin-top: 3px;
  color: var(--hf-color-muted);
  font-size: 9px;
  line-height: 1.45;
}

body.stage8-random-page .stage8-random-recent-chat-arrow {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  color: var(--hf-color-muted);
  font-size: 14px;
}

body.stage8-random-page .stage8-random-ended-recent-chat-card {
  display: flex;
}

body.stage8-random-page .stage8-random-ended-inline-actions {
  display: block;
  padding-top: 14px;
  border-top: 1px solid var(--hf-color-line);
}

body.stage8-random-page .stage8-random-ended-primary.primary-button {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  background: rgba(var(--hf-color-primary-rgb), 0.88);
  border: 1px solid var(--hf-color-primary);
  border-radius: 11px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none !important;
}

body.stage8-random-page .stage8-random-ended-primary.primary-button:hover,
body.stage8-random-page .stage8-random-ended-primary.primary-button:focus {
  color: #fff;
  background: var(--hf-color-primary-hover);
  border-color: var(--hf-color-primary-hover);
}

body.stage8-random-page .stage8-random-ended-primary.primary-button .fa-random {
  font-size: 13px;
}

body.stage8-random-page
  #random_chat_peer_connection_wait_message_wrap
  .stage8-random-peer-reconnect-spinner {
  margin-right: 6px;
  color: var(--hf-color-primary);
}

@media (max-width: 768px) {
  /*
   * Stage 8 mobile random chat has one layout owner.
   * The shared native app shell stays on a stable layout-viewport coordinate
   * system; this block owns only the random stage/stream/composer internals.
   */
  body.stage8-random-page {
    --stage8-random-panel-height: 100%;
    overflow: hidden;
  }

  body.stage8-random-page .stage8-random-viewport.time-background {
    box-sizing: border-box;
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    flex: 1 1 0%;
    margin: 0;
    overflow: hidden;
    background-image: none !important;
    transform: none !important;
  }

  body.stage8-random-page .stage8-random-viewport.time-background::before {
    display: none;
  }

  body.stage8-random-page .stage8-random-shell.chat-page.one-to-one-page {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }

  body.stage8-random-page .stage8-random-topline.chat-topline {
    display: grid !important;
  }

  body.stage8-random-page .stage8-random-grid.chat-layout,
  body.stage8-random-page.stage8-random-is-ended
    .stage8-random-grid.chat-layout {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    display: block;
  }

  body.stage8-random-page .stage8-random-side-card.chat-side-card,
  body.stage8-random-page.stage8-random-is-ended
    .stage8-random-side-card.chat-side-card {
    display: none !important;
  }

  body.stage8-random-page {
    --hf-chat-notice-margin: 10px 10px 0;
    --hf-chat-notice-padding: 9px 10px;
    --hf-chat-notice-font-size: 10px;
    --hf-chat-scroll-padding: 14px 12px 12px;
    --hf-chat-composer-padding: 10px 10px
      calc(10px + env(safe-area-inset-bottom));
    --hf-chat-composer-gap: 8px;
    --hf-chat-control-height: 44px;
    --hf-chat-action-width: 56px;
  }

  body.stage8-random-page .stage8-random-notice.chat-notice,
  body.stage8-random-page.stage8-random-is-ended
    .stage8-random-notice.chat-notice {
    display: block !important;
  }

  body.stage8-random-page .stage8-random-conversation-stream {
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }

  body.stage8-random-page.stage8-random-is-idle
    .stage8-random-conversation-stream,
  body.stage8-random-page.stage8-random-is-matching
    .stage8-random-conversation-stream {
    height: 100%;
  }

  body.stage8-random-page .stage8-random-message-log {
    width: 100%;
    min-width: 0;
  }

  body.stage8-random-page .stage8-random-message-log > #blank {
    display: none;
  }

  body.stage8-random-page.stage8-random-is-idle .stage8-random-message-log,
  body.stage8-random-page.stage8-random-is-matching .stage8-random-message-log {
    height: 100%;
  }

  /*
   * margin-top:auto is scoped to the connected/ended stream only.
   * Short conversations and the ended summary sit at the bottom; when
   * content overflows the automatic margin collapses to zero and the parent
   * remains the single scroll owner.
   */
  body.stage8-random-page.stage8-random-is-connected .stage8-random-message-log,
  body.stage8-random-page.stage8-random-is-ended .stage8-random-message-log {
    margin-top: auto;
  }

  body.stage8-random-page .stage8-random-typing-row {
    flex: 0 0 auto;
    width: 100%;
    margin-top: 3px;
  }

  body.stage8-random-page .stage8-random-typing-text {
    margin: 0;
  }

  body.stage8-random-page.stage8-random-is-connected
    .stage8-random-composer-action.stage8-random-menu-action {
    width: 56px;
    min-width: 56px;
    padding: 0;
    letter-spacing: 0;
    font-size: 11px;
  }

  body.stage8-random-page.stage8-random-is-connected
    .stage8-random-composer-action.stage8-random-end-action {
    color: var(--hf-color-text);
    background: var(--hf-color-surface-soft);
    border: 1px solid var(--hf-color-line-strong);
  }

  body.stage8-random-page.stage8-random-is-connected
    .stage8-random-composer-action.stage8-random-end-action.stage8-random-end-confirming {
    color: #ff6868 !important;
    background: var(--hf-color-danger-soft) !important;
    border-color: var(--hf-color-danger);
  }

  body.stage8-random-page .send_box,
  body.stage8-random-page .receive_box {
    max-width: 82%;
  }

  body.stage8-random-page .stage8-random-state {
    width: calc(100% - 36px);
    min-height: 100%;
    padding: 28px 0;
  }

  body.stage8-random-page .stage8-random-state h2 {
    font-size: 22px;
  }

  body.stage8-random-page .stage8-random-start-button,
  body.stage8-random-page .stage8-random-cancel-button {
    width: min(100%, 280px);
  }

  body.stage8-random-page .stage8-random-action-description {
    margin: 10px 0 0;
    color: var(--stage8-muted);
    font-size: 12px;
    line-height: 1.65;
  }

  body.stage8-random-page.stage8-random-is-ended .stage8-random-message-scroll {
    display: block;
    padding: 0 !important;
  }

  body.stage8-random-page .stage8-random-ended-flow.ended-flow {
    width: 100%;
    min-height: 0;
    padding: 24px 18px 16px;
  }

  body.stage8-random-page .stage8-random-ended-icon.state-icon {
    margin-bottom: 7px;
    font-size: 24px;
  }

  body.stage8-random-page .stage8-random-ended-main h1 {
    font-size: 21px;
  }

  body.stage8-random-page .stage8-random-ended-main .stage8-random-ended-meta {
    margin-top: 5px;
    font-size: 10px;
  }

  body.stage8-random-page .stage8-random-ended-main.ended-flow-main {
    display: flex;
    flex-direction: column;
  }

  body.stage8-random-page .stage8-random-ended-ad-zone {
    order: 2;
    margin-top: 15px;
    padding: 4px;
    border-radius: 12px;
  }

  body.stage8-random-page .stage8-random-ended-service-zone {
    order: 1;
    margin-top: 22px;
    padding: 14px;
    border-radius: 12px;
  }

  body.stage8-random-page .stage8-ended-feedback .random-chat-feedback-reasons {
    grid-template-columns: 1fr;
  }

  body.stage8-random-page .stage8-ended-feedback.rating-block {
    padding: 0 0 16px;
  }

  body.stage8-random-page .stage8-random-ended-actions.ended-actions {
    align-items: stretch;
    flex-direction: column;
  }

  body.stage8-random-page .stage8-random-ended-actions.ended-actions > * {
    width: 100%;
  }

  body.stage8-random-page .stage8-ended-feedback .random-chat-feedback-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.stage8-random-page .stage8-random-ended-feedback-header {
    min-height: 30px;
  }

  body.stage8-random-page .stage8-ended-feedback .random-chat-feedback-primary {
    margin-top: 11px;
  }

  body.stage8-random-page .stage8-ended-feedback .random-chat-feedback-btn {
    min-height: 38px;
  }

  body.stage8-random-page .stage8-random-recent-chat-card {
    min-height: 60px;
    padding-top: 15px;
    padding-bottom: 16px;
  }

  body.stage8-random-page .stage8-random-ended-inline-actions {
    padding-top: 15px;
  }

  body.stage8-random-page .stage8-random-ended-inline-actions button {
    width: 100%;
    min-height: 46px;
    font-size: 15px;
  }

  body.stage8-random-page .stage8-random-ended-recent-chat-card {
    display: flex;
  }

  body.stage8-random-page .stage8-random-ended-ad-slot {
    margin: 0;
  }

  body.stage8-random-page #foot_wrap,
  body.stage8-random-page footer {
    display: none !important;
  }

  .stage8-service-content strong {
    font-weight: 800;
  }

  body.stage8-random-page .send_box {
    font-weight: 400;
  }
}

@media (max-width: 355px) {
  body.stage8-random-page .stage8-random-ended-ad-zone {
    width: calc(100% + 36px);
    margin-left: -18px;
    padding: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
}

body.stage8-random-page
  .stage8-random-action-options.mobile-chat-action-options
  button[data-stage8-random-end-cancel] {
  color: #fff;
  background: var(--hf-color-primary-soft);
  border-color: var(--stage8-blue);
}

body.stage8-random-page.stage8-random-is-ended
  .stage8-random-notice.chat-notice {
  display: none !important;
}

/* PC random post-chat Mobisense: keep one iframe shell for the page lifetime. */
body.stage8-random-page .stage8-random-persistent-ended-ad-layer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 24;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

@media (min-width: 769px) {
  body.stage8-random-page .stage8-random-persistent-ended-ad-layer.is-visible {
    visibility: visible;
    pointer-events: auto;
  }

  body.stage8-random-page
    .stage8-random-persistent-ended-ad-layer
    > .mootoon-affiliate-inline {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  body.stage8-random-page .stage8-random-ended-ad-slot.ended-inline-ad {
    min-height: 119px;
  }
}

@media (max-width: 768px) {
  body.stage8-random-page .stage8-random-persistent-ended-ad-layer {
    display: none !important;
  }
}