/* Chat shell: only the conversation scrolls; the composer fits the visible viewport. */
:root {
  --text: #fffaf3;
  --text-dim: #e3dce9;
  --muted: #b9adca;
}
/* Normal document flow, like the working Hardline room. Fixing the body itself
   prevents some WebViews from handling focus/resize at the native boundary. */
html { overflow: visible; }
body {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: hidden;
  --maxw: 720px;
  --composer-height: 150px;
}
.chat-shell {
  position: relative;
  top: var(--chat-viewport-top, 0px);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: var(--chat-viewport-height, 100dvh);
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}
.chat-header {
  position: relative;
  flex: 0 0 auto;
  min-height: calc(56px + env(safe-area-inset-top));
  padding: calc(.6rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .6rem;
}
.chat-header .chat-history-link {
  position: absolute;
  top: calc(.35rem + env(safe-area-inset-top));
  right: max(.65rem, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--text);
  border-radius: 12px;
  text-decoration: none;
}
.saju-profile { max-width: 720px; margin: 0 auto; text-align: left; }
.saju-profile[hidden] { display: none; }
.profile-person { display: flex; align-items: baseline; gap: .6rem; padding-right: 88px; min-height: 30px; flex-wrap: wrap; }
#chatFullscreen { position: absolute; right: 54px; top: calc(.35rem + env(safe-area-inset-top)); width: 44px; height: 44px; border: 0; background: transparent; color: var(--text); font-size: 26px; cursor: pointer; }
#chatFullscreen[hidden] { display: none; }
.profile-person strong { color: var(--text); font-size: .9rem; max-width: min(25%, 10rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-person > span { color: var(--text-dim); font-size: .75rem; }
.profile-sinsals { display: flex; align-items: center; gap: 6px; overflow-x: auto; white-space: nowrap; font-size: .75rem; color: var(--text-dim); padding: 2px 0; }
.profile-sinsal { color: #efcf8c; background: #302738; padding: 3px 8px; border-radius: 8px; }
.profile-sinsals:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.chat-scroll {
  min-height: 0;
  flex: 1 1 0;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.8rem max(1rem, env(safe-area-inset-right)) .5rem max(1rem, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  row-gap: 14px;
  overflow-anchor: none;
  scroll-padding-block: 1rem;
}
/* Auto space is above short conversations; long conversations remain scrollable. */
.chat-scroll::before { content: ''; margin-top: auto; }
.chat-scroll > * { flex: 0 0 auto; width: 100%; }
.chat-scroll .msg:last-child { margin-bottom: 0; }
.chat-scroll > .msg, .chat-scroll > .sys-card, .chat-scroll > .typing-message { margin-top: 0; margin-bottom: 0; }
.chat-scroll > [hidden], .history-thread:empty { display: none; }
.chat-scroll > .home-card { margin-bottom: 0; }
.msg { margin-bottom: 14px; overflow-wrap: anywhere; }
.bubble-user { box-shadow: none; border: 1px solid rgba(203,161,78,.15); }
.god-block {
  max-width: 96%;
  padding: 1.25rem 1.35rem;
  background: #2b2335;
  border: 1px solid #493c56;
  border-radius: 8px 26px 26px 26px;
  box-shadow: 0 5px 24px rgba(0,0,0,.15);
}
.god-answer { font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.95; color: #fffaf3; }
.bubble-user { max-width: 82%; border-radius: 24px 8px 24px 24px; }
.home-card .home-sec-body { font-family: var(--font-sans); color: #fffaf3; font-size: 1rem; line-height: 1.95; }
.home-card .home-sec-oneline, .home-card .home-sec-caution { color: #eee7f4; }
.home-card .home-sec { border-radius: 20px; background: #292132; }
.home-card .home-zeigarnik, .home-card .home-continuation { color: #eee7f4; font-size: .92rem; line-height: 1.8; }
/* The home group has no enclosing card: each message has its own bubble. */
.home-card .hc-shell, .home-card .home-sec, .home-card .home-zeigarnik, .home-error {
  width: 100%;
  border: 1px solid #493c56;
  border-radius: 8px 26px 26px 26px;
  background: #2b2335;
  box-shadow: 0 5px 24px rgba(0,0,0,.15);
}
.home-card, .home-card #homeSecs, .home-card .home-secs { display: flex; flex-direction: column; gap: 14px; }
.home-card[hidden], .home-card .home-secs:empty { display: none; }
.home-card .home-secs { margin: 0; }
.home-card .msg, .home-card .typing-message { margin-top: 0; margin-bottom: 0; }
.home-card .home-sec { border-left: 1px solid #493c56; }
.home-card .home-sec-title { font-size: 1rem; line-height: 1.6; }
.home-card .home-sec-oneline { white-space: normal; font-size: .9rem; line-height: 1.7; }
.home-card .sec-row { padding: 1rem 1.1rem; }
.home-card .sec-detail { padding: 0 1.1rem 1.1rem; }
.home-card .home-zeigarnik { width: fit-content; max-width: min(100%, 34rem); margin: 0; padding: .8rem 1rem; }
.home-card .home-followup { margin-bottom: 0; }
.home-card .manse-box { margin-top: 0; border: 0; background: transparent; box-shadow: none; }
.home-card .hc-sum-meta { display: block; }
.home-manse {
  --wood: #9ad8ad; --fire: #ffaaa1; --earth: #f2ce84;
  --metal: #dce3f0; --water: #9dccfa; --danger: #ffb0c1;
  font-family: var(--font-sans);
}
.home-card .home-manse .hc-shell { background: #202432; border-color: #4d566c; }
.home-card .home-manse .hc-body { padding: 0 .65rem .85rem; }
.home-card .home-manse .manse-box { padding: .4rem .25rem; }
.home-card .manse-title, .home-card .elem-tag, .home-card .summary-tags .tag {
  font-family: var(--font-sans);
}
.home-card .manse-title { font-size: .9rem; color: #f4d99b; margin: .4rem 0 .9rem; }
.home-card table.manse { table-layout: fixed; min-width: 0; }
.home-card .manse-label-col { width: 3.1rem; }
.home-card table.manse th, .home-card table.manse td {
  text-align: center; vertical-align: middle; padding: .6rem .15rem;
  border: 1px solid #485064; line-height: 1.5;
}
.home-card table.manse th { background: #30384a; color: #f4f6fc; font-size: .82rem; font-weight: 600; }
.home-card table.manse .row-label { background: #292f3f; color: #dde4f3; font-size: .72rem; white-space: nowrap; }
.home-card td.day-pillar { background: #3a3540; }
.home-card .stem-hanja {
  font-family: var(--font-sans); font-size: 1.65rem; font-weight: 600; line-height: 1.35;
  color: #fff; margin-bottom: .12rem;
}
.home-card .stem-hangul { font-size: .82rem; color: #e7ecf6; line-height: 1.5; }
.home-card .elem-tag { font-size: .7rem; line-height: 1.5; margin-top: .25rem; padding: .08rem .3rem; white-space: nowrap; }
.home-card .tengod, .home-card .twelve-state { font-size: .8rem; color: #f0f3fa; }
.home-card .day-mark { color: #ffe1a0; }
.home-card .hidden-stem { display: block; margin: 0; font-size: .72rem; line-height: 1.65; color: #e0e7f5; white-space: nowrap; }
.home-card .five-elem-bars { margin-top: 1rem; gap: .55rem; }
.home-card .elem-label { width: 3.6rem; font-size: .78rem; }
.home-card .elem-pct { width: 2.5rem; font-size: .78rem; color: #f0f3fa; font-variant-numeric: tabular-nums; }
.home-card .elem-bar-track { height: .55rem; border: 0; background: #111724; }
.home-card .elem-bar-fill { box-shadow: none; }
.home-card .summary-tags { gap: .4rem; }
.home-card .summary-tags .tag, .home-card .sinsal-badge { font-size: .76rem; padding: .3rem .55rem; }
.home-card .summary-tags .tag { color: #e8edf8; background: #30384a; border-color: #525e76; }
.home-card .summary-tags .tag.warn { color: #ffbdc9; }
.home-card .sinsal-group-label { font-size: .78rem; color: #e0e7f5; }
.home-card .manse-verify { margin-top: .9rem; font-size: .76rem; line-height: 1.6; }
.home-card .manse-verify a { color: #d0dbef; }
.home-reading, .home-followup { animation: answerIn .3s ease both; }
.home-error { padding: 1rem 1.1rem; color: #fffaf3; }
.typing-message { width: 100%; margin: 0 auto 1.5rem; display: flex; justify-content: flex-start; }
.typing-bubble {
  max-width: 100%; padding: .85rem 1.1rem 1rem;
  border: 1px solid #594866; border-radius: 8px 26px 26px 26px;
  background: #2b2335; color: #fffaf3;
}
.typing-speaker { display: block; margin-bottom: .6rem; color: #edcf9a; font-size: .72rem; }
.typing-status { display: flex; align-items: center; gap: .75rem; font-size: .85rem; line-height: 1.6; }
.typing-status .dots { flex-shrink: 0; gap: 5px; }
.typing-status .dots span {
  width: 7px; height: 7px; background: #f1d5a5; border-radius: 50%;
  animation: typingDot 1.2s ease-in-out infinite;
}
.typing-status .dots span:nth-child(2) { animation-delay: .16s; }
.typing-status .dots span:nth-child(3) { animation-delay: .32s; }
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-5px); opacity: 1; }
}
.home-continuation { margin-top: .85rem; }
.continuation-question { display: block; margin-top: .6rem; padding: .7rem .9rem; border: 1px solid #776144; border-radius: 18px; color: #ffe2a8; background: #342b35; font: inherit; text-align: left; cursor: pointer; }
/* A suggestion is its own compact message, in live replies and restored history. */
.answer-followup .god-block { width: fit-content; max-width: min(96%, 34rem); padding: .85rem 1.1rem; border-radius: 8px 26px 26px 26px; }
.answer-followup .followup-chip { display: block; margin: 0; padding: 0; border: 0; background: transparent; color: #ffe2a8; font: inherit; line-height: 1.8; text-align: left; }
.answer-followup .followup-chip::before { content: none; }
@media (hover: hover) {
  .answer-followup .followup-chip:hover { background: transparent; text-decoration: underline; }
}
.chat-login-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: 1.1rem; }
.chat-login-option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; min-width: 0; min-height: 88px; padding: .65rem .2rem; border: 1px solid #594866; border-radius: 16px; color: #fffaf3; font: 500 .85rem var(--font-sans); text-decoration: none; }
.chat-login-option:hover { background: #302639; border-color: #b39b76; }
.login-logo { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; }
.login-logo svg { width: 24px; height: 24px; }
.login-logo.kakao { background: #fee500; }
.login-logo.naver { background: #03c75a; }
.login-logo.google { background: #fff; }
.history-thread { width: 100%; max-width: var(--maxw); margin: 0 auto; }
.history-date { margin: 1.5rem 0 1rem; color: var(--muted); text-align: center; font-size: .75rem; }
.history-turn { scroll-margin-top: 20px; border-radius: 24px; outline: none; }
.history-turn.history-highlight .god-block { border-color: var(--primary); box-shadow: 0 0 0 2px var(--gold-glow); }
.history-notice { padding: 1rem; color: var(--text-dim); }
.sys-card { width: fit-content; max-width: 96%; padding: .75rem .9rem; border-radius: 8px 24px 24px 24px; overflow-wrap: anywhere; }
.chat-scroll > .sys-card { width: fit-content; max-width: min(96%, var(--maxw)); margin-left: max(0px, calc((100% - var(--maxw)) / 2)); margin-right: auto; }
.chat-scroll > .indicator { max-width: var(--maxw); width: 100%; }
.empty-hint { margin-top: clamp(1.5rem, 9vh, 6rem); margin-bottom: 2rem; }
.empty-eyebrow { display: block; font-size: .72rem; letter-spacing: .15em; color: var(--primary); }
.empty-hint h2 { margin: .8rem 0; font: 400 clamp(1.35rem, 4.5vw, 1.8rem)/1.5 var(--font-serif); color: var(--text); }
.empty-hint p { font-size: .88rem; color: var(--text-dim); }
.empty-hint .ex { margin-top: 1.6rem; }
.input-bar {
  position: relative;
  bottom: auto;
  flex: 0 0 auto;
  padding: .7rem max(.9rem, env(safe-area-inset-right)) calc(.65rem + var(--chat-safe-bottom, env(safe-area-inset-bottom))) max(.9rem, env(safe-area-inset-left));
  background: rgba(14,11,20,.97);
}
/* Kakao/Instagram Android native chrome already provides the bottom safe area.
   Keep iOS/home-indicator and ordinary-browser safe-area handling intact. */
body.android-inapp { --chat-safe-bottom: 0px; }
.input-inner { padding: .4rem; border-radius: 20px; box-shadow: none; }
.input-inner:focus-within { box-shadow: 0 0 0 3px rgba(203,161,78,.08); }
#q { min-width: 0; font-size: 16px; padding: .55rem .65rem; }
#send { min-height: 44px; padding: .6rem .9rem; border-radius: 14px; font-size: .86rem; }
.latest-message {
  position: absolute;
  z-index: 6;
  bottom: calc(var(--composer-height) + 12px);
  left: 50%;
  transform: translateX(-50%);
  min-height: 44px;
  padding: .5rem 1rem;
  border: 1px solid rgba(203,161,78,.45);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font: 500 .8rem var(--font-sans);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}
.latest-message[hidden] { display: none; }
a:focus-visible, button:focus-visible, .chat-scroll:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
@media (max-width: 600px) {
  .keyboard-open .profile-sinsals, .keyboard-open .profile-sinsal-hint { display: none; }
  .chat-scroll { padding-top: 1.1rem; }
  .god-block { padding: 1rem; }
  .god-answer { font-size: 1rem; line-height: 1.9; }
  .keyboard-open .input-bar { padding-bottom: .5rem; }
}
@media (max-height: 460px) {
  .profile-sinsals, .profile-sinsal-hint { display: none; }
  #q { max-height: 72px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Long replies preview the available conversation height, including their follow-up. */
.answer-content.answer-collapsed { max-height: var(--answer-preview-height); overflow: hidden; mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); }
.answer-expand { display: block; width: 100%; min-height: 44px; margin-top: 8px; border: 0; border-top: 1px solid #493c56; background: transparent; color: #efcf8c; font: 600 .9rem var(--font-sans); cursor: pointer; }
.answer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 4px; }
.answer-actions:has(.answer-expand:not([hidden])) { border-top: 1px solid #493c56; margin-top: 8px; }
.answer-actions:has(.answer-expand[hidden]):not(:has(.answer-share)) { display: none; }
.answer-actions .answer-expand { width: auto; flex: 1; border: 0; margin: 0; }
.answer-share { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #cdbdce; cursor: pointer; }
.answer-share:hover { background: #413448; color: #ffe0a0; }
.chat-share-dialog { position: fixed; inset: 0; margin: auto; width: min(480px, calc(100% - 24px)); max-height: calc(100dvh - 32px); padding: 18px; border: 1px solid #655274; border-radius: 24px; background: #211a2b; color: #fffaf3; overflow: auto; }
.chat-share-dialog::backdrop { background: rgba(7, 5, 12, .72); }
.share-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.share-heading h2 { font: 600 1.1rem var(--font-sans); }
.share-close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 28px; cursor: pointer; }
.share-description { margin: 4px 0 12px; font-size: .85rem; color: #e3dce9; }
.share-preview { display: block; width: 100%; height: min(42dvh, 360px); min-height: 100px; padding: 14px; resize: none; border: 1px solid #53445f; border-radius: 14px; background: #17121f; color: #fffaf3; font: 16px/1.7 var(--font-sans); }
.share-controls { display: flex; gap: 8px; margin-top: 14px; }
.share-controls button { flex: 1; min-height: 44px; border: 1px solid #8b7352; border-radius: 12px; background: #352a40; color: #fffaf3; font: 600 .9rem var(--font-sans); cursor: pointer; }
.share-controls .share-native { background: #e1bb6b; color: #2a2010; }
.share-controls button:disabled { opacity: .6; cursor: wait; }
.share-controls [hidden] { display: none; }
.share-status { color: #efcf8c; font-size: .85rem; margin-top: 8px; }
.share-status:empty { display: none; }
.answer-expand[hidden] { display: none; }
.profile-sinsal-hint { font-size: .7rem; color: var(--text-dim); margin-top: 3px; }
button.profile-sinsal { border: 1px solid #66513b; min-height: 36px; font: inherit; flex: 0 0 auto; cursor: pointer; }
button.profile-sinsal:hover { background: #49384c; }
button.profile-sinsal:disabled { opacity: .55; cursor: wait; }

#send[hidden], #stop[hidden] { display: none; }
#stop { flex: 0 0 auto; min-height: 44px; padding: .6rem .9rem; border-radius: 14px; border: 1px solid #bba071; background: #392d35; color: #fffaf3; font: 600 .86rem var(--font-sans); cursor: pointer; }
#stop:disabled { opacity: .65; cursor: wait; }

/* Shared landing-page film stays behind the independent chat scroll/composer. */
body { isolation: isolate; }
.chat-video-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #080914; }
.chat-video-bg video { display: block; width: 100%; height: 100%; object-fit: cover; }
.chat-video-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(6,8,24,.42), rgba(6,8,24,.75)); }
.chat-scroll { background: transparent; }
/* Live and restored suggestions share a real wrapping row, separate from prose. */
.chips { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 12px; }
.chips .chip { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 44px; max-width: 100%; margin: 0; padding: 8px 12px; white-space: normal; overflow-wrap: anywhere; font-family: inherit; line-height: 1.5; text-align: left; }

/* Keep suggestion rows aligned inside notices, including restored turns. */
.sys-card .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sys-card .chips .chip { justify-content: center; padding: 8px 10px; text-align: center; word-break: keep-all; }
@media (max-width: 359px) {
  .sys-card .chips { grid-template-columns: minmax(0, 1fr); }
}
/* Admin screenshot flow: replace only the account name, retain the shared layout. */
.preview-home { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-block:-7px; align-self:center; color:inherit; text-decoration:none; }