:root {
  --brand: #2b73d9;
  --brand-strong: #245fba;
  --brand-soft: #eaf3ff;
  --canvas: #ecf7fd;
  --chat-canvas: #f4f7fb;
  --surface: #fff;
  --ink: #1b2b42;
  --text-2: #607089;
  --text-3: #8ca0b8;
  --line: #d8e6f3;
  --success: #12a150;
  --font-app: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { background: #e7f0f8; color: var(--ink); font-family: var(--font-app); }
body { margin: 0; min-width: 320px; background: #e7f0f8; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, textarea { font: inherit; }
button { color: inherit; }
::selection { background: #bcd9ff; color: #123c74; }
input::placeholder, textarea::placeholder { color: #8b9db4; opacity: 1; }
:focus-visible { outline: 3px solid rgba(43, 115, 217, .3); outline-offset: 2px; }
.page-stage { min-height: 100dvh; display: flex; justify-content: center; background: #e7f0f8; }
.phone-frame { position: relative; width: 100%; min-height: 100dvh; overflow-x: hidden; background: var(--canvas); }
.top-bar { height: 64px; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; padding: 0 12px; }
.top-bar h1 { margin: 0; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.top-bar-blue { background: var(--brand); color: #fff; }
.top-bar-white { height: 58px; border-bottom: 1px solid var(--line); background: #fff; }
.icon-button, .icon-placeholder { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: transparent; }
.icon-button:active { transform: scale(.97); background: rgba(255, 255, 255, .12); }
.top-bar-white .icon-button:active { background: #eef4fa; }
.icon-button svg, .icon-placeholder svg { width: 23px; height: 23px; }
.icon-placeholder { justify-self: end; }
.home-content { padding: 16px 18px 20px; }
.institution-heading { min-height: 80px; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 8px 20px rgba(40, 92, 145, .1); }
.institution-heading-icon, .selected-icon { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--brand); color: #fff; }
.institution-heading-icon svg, .selected-icon svg { width: 24px; height: 24px; }
.institution-heading h2 { margin: 0; font-size: 21px; line-height: 1.15; }
.institution-list { margin-top: 12px; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(40, 92, 145, .11); }
.institution-row { width: 100%; height: 54px; display: grid; grid-template-columns: 44px 1fr 24px; align-items: center; padding: 0 10px 0 13px; border: 0; border-bottom: 1px solid #e8eff7; background: #fff; text-align: left; transition: transform 120ms cubic-bezier(.23, 1, .32, 1), background-color 120ms ease-out; }
.institution-row:last-child { border-bottom: 0; }
.institution-row:active { transform: scale(.985); background: #f7fbff; }
.institution-row strong { font-size: 14px; font-weight: 600; }
.institution-row > svg { width: 17px; color: #7891ad; }
.institution-index { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.intake-content { padding: 16px 18px 28px; }
.stepper { height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: 15px; background: #fff; }
.step { display: flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 12px; white-space: nowrap; }
.step i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #f0f4f8; font-style: normal; font-weight: 700; }
.step i svg { width: 14px; }
.step-active { color: var(--brand); font-weight: 600; }
.step-active i { background: var(--brand); color: #fff; }
.step-done { color: var(--success); font-weight: 600; }
.step-done i { background: #e9f8ef; }
.selected-institution { min-height: 66px; margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid #a7c9ff; border-radius: 15px; background: #e9f3ff; }
.selected-icon { width: 42px; height: 42px; border-radius: 12px; }
.selected-institution > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.selected-institution small { color: var(--text-2); font-size: 11px; }
.selected-institution strong { margin-top: 1px; font-size: 17px; }
.selected-institution button { min-width: 70px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--brand); font-size: 12px; font-weight: 600; }
.intake-card { margin-top: 12px; padding: 18px 14px 20px; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px rgba(40, 92, 145, .08); }
.intake-card h2 { margin: 0 0 18px; font-size: 20px; line-height: 1.25; }
.intake-card label { display: block; margin-top: 14px; }
.intake-card label > span { display: block; margin: 0 0 7px; font-size: 13px; font-weight: 600; }
.field { height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid #cfe0f2; border-radius: 11px; background: #f8fafc; }
.field svg { width: 18px; color: #8196af; }
.field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.field-invalid { border-color: #d92d20; }
.field-error { min-height: 18px; display: block; margin: 5px 0 -4px; color: #d92d20; font-size: 11px; line-height: 1.4; }
.field-error[hidden] { display: none; }
.appeal-field { overflow: hidden; border: 1px solid #cfe0f2; border-radius: 11px; background: #f8fafc; }
.appeal-field textarea { width: 100%; height: 78px; padding: 12px; resize: none; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; line-height: 1.6; }
.appeal-field > div { min-height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 6px; }
.appeal-field button { min-height: 36px; display: flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--brand); font-size: 12px; font-weight: 600; }
.appeal-field button svg { width: 17px; }
.appeal-field em { color: #6f8299; font-size: 10px; font-style: normal; font-variant-numeric: tabular-nums; }
.primary-action { width: 100%; height: 47px; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--brand); color: #fff; font-size: 14px; font-weight: 700; transition: transform 120ms cubic-bezier(.23, 1, .32, 1), background-color 120ms ease-out; }
.primary-action svg { flex: 0 0 auto; width: 18px; height: 18px; }
.primary-action:active { transform: scale(.97); background: var(--brand-strong); }
.off-hours-content { min-height: calc(100dvh - 116px); display: grid; place-items: center; padding: 24px 18px 116px; }
.off-hours-card { width: 100%; padding: 34px 18px 18px; border-radius: 18px; background: #fff; text-align: center; box-shadow: 0 12px 26px rgba(40, 92, 145, .1); }
.clock-icon { width: 54px; height: 54px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 18px; background: var(--brand-soft); color: var(--brand); }
.off-hours-card h2 { margin: 0; font-size: 21px; }
.off-hours-card > p { margin: 9px 0 22px; color: var(--text-2); font-size: 12px; }
.off-hours-card > div { min-height: 58px; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); text-align: left; }
.off-hours-card > div span { display: flex; flex-direction: column; color: var(--text-2); font-size: 10px; }
.off-hours-card > div strong { margin-top: 3px; color: var(--brand); font-size: 13px; }
.chat-view { display: flex; flex-direction: column; background: var(--chat-canvas); }
.chat-scroll { flex: 1; min-height: 0; height: calc(100dvh - 110px); overflow-y: auto; padding-bottom: 86px; scrollbar-width: thin; scrollbar-color: #bfd1e5 transparent; }
.message-timeline { padding: 14px 14px 24px; }
.timeline-date { margin: 0 0 12px; text-align: center; color: #71869e; font-size: 10px; font-variant-numeric: tabular-nums; }
.intake-bubble { width: 82%; margin: 0 0 15px auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 7px; border-radius: 14px 4px 14px 14px; background: var(--brand); color: #fff; font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
.intake-bubble strong { font-size: 11px; }
.system-line { margin: 9px 0; text-align: center; color: #71869e; font-size: 10px; }
.queue-line { margin: 13px 0; display: flex; align-items: center; justify-content: center; gap: 7px; color: #607089; font-size: 11px; }
.message-row { margin: 14px 0; display: flex; align-items: flex-start; gap: 8px; }
.message-row-user { justify-content: flex-end; }
.agent-avatar { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.message-stack { max-width: 82%; }
.agent-name { margin: 0 0 5px; color: var(--text-2); font-size: 10px; }
.text-bubble { padding: 12px; border: 1px solid #cfe0f2; border-radius: 6px 14px 14px 14px; background: #fff; color: var(--ink); font-size: 12px; line-height: 1.7; white-space: pre-wrap; }
.message-row-user .text-bubble { border: 0; border-radius: 14px 6px 14px 14px; background: var(--brand); color: #fff; }
.composer { position: sticky; bottom: 0; z-index: 20; min-height: 78px; display: flex; align-items: center; gap: 7px; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
.composer textarea { flex: 1; height: 44px; max-height: 88px; padding: 12px; resize: none; border: 0; border-radius: 12px; outline: 0; background: #f0f3f7; color: var(--ink); font-size: 12px; line-height: 20px; }
.composer-icon { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text-2); }
.send-button { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 13px; background: var(--brand); color: #fff; }
.sdk-view { height: 100dvh; background: #fff; }
.sdk-frame { display: block; width: 100%; height: 100dvh; border: 0; background: #fff; }
.sdk-back { position: absolute; z-index: 20; top: max(8px, env(safe-area-inset-top)); left: 8px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .92); color: var(--brand); box-shadow: 0 8px 20px rgba(27, 71, 120, .14); }
@media (max-width: 350px) { .home-content, .intake-content { padding-left: 12px; padding-right: 12px; } .step { gap: 4px; font-size: 10px; } }
@media (min-width: 768px) { .phone-frame { width: 390px; box-shadow: 0 16px 48px rgba(27, 71, 120, .12); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }