:root {
  color-scheme: light;
  --navy-950: #04132f;
  --navy-900: #071d49;
  --navy-800: #0a2f70;
  --blue-700: #064aa3;
  --blue-600: #0874d1;
  --blue-500: #079cf0;
  --blue-100: #dff3ff;
  --blue-50: #f2f9ff;
  --paper: #ffffff;
  --canvas: #f5f9fd;
  --ink: #0b1c36;
  --muted: #61728b;
  --line: #d9e5f1;
  --success: #16855b;
  --danger: #b52e32;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
button, textarea, input, select { font: inherit; }
button { cursor: pointer; }

.app-shell { display: grid; grid-template-columns: 286px 1fr; height: 100dvh; min-height: 640px; }
.sidebar { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 24px 18px 18px; overflow: hidden; color: white; background: radial-gradient(circle at -10% 8%, rgba(18,167,255,.28), transparent 30%), linear-gradient(160deg, var(--navy-900), var(--navy-950) 72%); }
.sidebar::after { content: ""; position: absolute; right: -90px; bottom: 70px; width: 210px; height: 210px; border: 1px solid rgba(57,179,255,.12); border-radius: 50%; pointer-events: none; }
.brand { position: relative; z-index: 1; display: flex; align-items: center; min-height: 70px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 14px 35px rgba(0,0,0,.18); }
.brand img { display: block; width: 100%; height: 46px; object-fit: contain; }
.new-chat { display: flex; gap: 10px; align-items: center; margin-top: 30px; padding: 13px 15px; border: 1px solid rgba(80,190,255,.38); border-radius: 13px; color: white; background: rgba(12,112,204,.22); transition: background .2s, transform .2s, border-color .2s; }
.new-chat span { color: #4fc3ff; font-size: 20px; line-height: 1; }
.new-chat:hover { border-color: rgba(94,201,255,.68); background: rgba(13,129,232,.32); transform: translateY(-1px); }
.history { display: grid; gap: 5px; margin: 18px -4px 12px; max-height: 46vh; overflow-y: auto; scrollbar-color: rgba(118,198,246,.45) transparent; }
.history button, .admin-link { overflow: hidden; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: rgba(255,255,255,.72); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.history button:hover, .history button.active, .admin-link:hover { background: rgba(63,172,241,.16); color: white; }
.history button.active { box-shadow: inset 3px 0 #24b6ff; }
.sidebar-spacer { flex: 1; }
.history-row { display: grid; grid-template-columns: minmax(0,1fr) 36px; align-items: start; }
.history-row .history-title { width: 100%; text-align: left; }
.history-row .history-more { display: grid; place-items: center; width: 36px; height: 40px; padding: 0; text-overflow: clip; font-size: 22px; line-height: 1; }
.history-menu { grid-column: 1/-1; display: flex; gap: 4px; padding: 4px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(255,255,255,.07); }
.history-menu button { flex: 1; }
.sidebar-powered { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 15px; padding: 9px 10px; border-radius: 11px; color: rgba(255,255,255,.57); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-powered img { width: 82px; height: 40px; object-fit: contain; padding: 4px 6px; border-radius: 8px; background: rgba(255,255,255,.94); }
.profile-card { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); }
.profile-card strong, .profile-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-card strong { font-size: 13px; }
.profile-card small { margin-top: 3px; color: rgba(255,255,255,.57); font-size: 11px; }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: linear-gradient(145deg,#17b8ff,#0860bd); color: white; font-size: 11px; font-weight: 800; box-shadow: 0 6px 18px rgba(0,141,231,.25); }
.profile-card button { border: 0; background: transparent; color: rgba(255,255,255,.7); font-size: 12px; }

.chat-panel { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; background: var(--paper); }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 82px; padding: 16px 30px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.93); backdrop-filter: blur(14px); }
.topbar-title { display: flex; align-items: center; gap: 12px; }
.topbar-title > img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 7px 12px rgba(4,92,179,.18)); }
.topbar h1 { margin: 1px 0 0; font-size: 18px; letter-spacing: -.02em; }
.eyebrow { margin: 0; color: var(--blue-700); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #d9efe7; border-radius: 999px; background: #f0fbf7; color: #147150; font-size: 12px; font-weight: 700; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: #2bb77b; box-shadow: 0 0 0 4px #d9f2e7; }
.mobile-menu { display: none; }
.conversation { position: relative; overflow-y: auto; padding: 36px clamp(22px,7vw,100px); background: radial-gradient(circle at 50% 18%,#edf8ff 0,transparent 36%), linear-gradient(180deg,#fbfdff,#fff 52%); }
.welcome { width: min(760px,100%); margin: clamp(24px,7vh,82px) auto 0; text-align: center; }
.welcome-mark { display: grid; place-items: center; width: 82px; height: 82px; margin: 0 auto 24px; border: 1px solid rgba(24,151,231,.18); border-radius: 28px; background: linear-gradient(145deg,rgba(255,255,255,.95),#e3f5ff); box-shadow: 0 18px 48px rgba(7,90,171,.17), inset 0 1px 0 white; }
.welcome-mark img { width: 66px; height: 66px; object-fit: contain; filter: drop-shadow(0 9px 14px rgba(6,70,148,.2)); }
.welcome h2 { margin: 11px 0 10px; color: var(--navy-900); font-size: clamp(34px,4.5vw,54px); font-weight: 760; letter-spacing: -.055em; line-height: 1.05; }
.welcome-copy { margin: 0; color: var(--muted); font-size: 16px; }
.suggestions { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin-top: 40px; text-align: left; }
.suggestions button { position: relative; overflow: hidden; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.9); color: var(--ink); box-shadow: 0 10px 30px rgba(10,47,112,.05); transition: border .2s, box-shadow .2s, transform .2s; }
.suggestions button::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--blue-500),var(--blue-700)); opacity: 0; transition: opacity .2s; }
.suggestions button:hover { border-color: #9ed5f3; box-shadow: 0 15px 35px rgba(7,81,159,.11); transform: translateY(-3px); }
.suggestions button:hover::before { opacity: 1; }
.suggestions span, .suggestions small { display: block; }
.suggestions span { color: var(--navy-900); font-weight: 750; }
.suggestions small { margin-top: 8px; color: var(--muted); line-height: 1.35; }
.messages { width: min(800px,100%); margin: 0 auto; }
.message { display: flex; align-items: flex-start; gap: 12px; margin: 24px 0; animation: appear .28s ease both; }
.message.user { justify-content: flex-end; }
.bubble { max-width: min(650px,84%); padding: 15px 18px; border-radius: 19px; line-height: 1.58; white-space: pre-wrap; }
.assistant .bubble { border: 1px solid #dfeaf4; border-top-left-radius: 6px; background: white; box-shadow: 0 8px 25px rgba(8,50,107,.07); }
.user .bubble { border-bottom-right-radius: 6px; background: linear-gradient(135deg,var(--navy-800),var(--blue-700)); color: white; box-shadow: 0 10px 24px rgba(7,67,143,.16); }
.bot-avatar { flex: 0 0 auto; display: block; width: 38px; height: 38px; border: 1px solid #bde5fb; border-radius: 13px; overflow: hidden; background: #edf9ff url('/assets/sonia-wheel.png') center/32px 32px no-repeat; color: transparent; box-shadow: 0 7px 18px rgba(8,95,178,.13); }
.answer-content { max-width: min(650px,84%); min-width: 0; }
.answer-content .bubble { max-width: 100%; }
.feedback { display: flex; gap: 4px; margin-top: 6px; }
.feedback button { display: grid; place-items: center; width: 36px; height: 36px; padding: 6px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); }
.feedback button:hover { background: var(--blue-50); color: var(--blue-700); }
.feedback button[aria-pressed="true"] { color: var(--blue-700); background: var(--blue-100); }
.feedback button[aria-pressed="true"] svg { fill: currentColor; }
.feedback .thumb-down { transform: rotate(180deg); }
.chat-progress { display: flex; align-items: center; gap: 11px; margin: 24px 0; padding: 3px 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.chat-progress .typing { margin-left: 2px; }
.typing { display: inline-flex; gap: 4px; align-items: center; height: 20px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-500); animation: bounce 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
.chat-error .bubble { border-color: #efb5b5; }
.chat-error button { margin-top: 10px; padding: 8px 14px; border: 1px solid var(--blue-700); border-radius: 8px; background: white; color: var(--blue-700); }

.composer-wrap { padding: 12px clamp(22px,7vw,100px) 18px; background: linear-gradient(transparent,var(--paper) 18%); }
.composer { display: flex; align-items: flex-end; gap: 10px; width: min(800px,100%); margin: 0 auto; padding: 10px 10px 10px 19px; border: 1px solid #cbddeb; border-radius: 22px; background: white; box-shadow: 0 14px 40px rgba(8,49,104,.11); }
.composer:focus-within { border-color: #72c2ed; box-shadow: 0 14px 40px rgba(8,49,104,.14), 0 0 0 4px rgba(8,156,240,.1); }
.composer textarea { flex: 1; max-height: 130px; padding: 8px 0; resize: none; border: 0; outline: 0; background: transparent; color: var(--ink); line-height: 1.45; }
.composer textarea::placeholder { color: #8291a7; }
.send { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 14px; background: linear-gradient(145deg,var(--blue-600),var(--navy-800)); color: white; box-shadow: 0 8px 18px rgba(4,96,184,.25); transition: transform .2s, box-shadow .2s; }
.send:hover { box-shadow: 0 11px 24px rgba(4,96,184,.34); transform: translateY(-2px); }
.send svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.composer-wrap > p { margin: 9px auto 0; color: #8190a5; font-size: 11px; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.auth-screen { min-height: 100dvh; display: grid; grid-template-columns: minmax(440px,.9fr) 1.1fr; background: var(--paper); }
.auth-brand { position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: clamp(48px,7vw,105px); background: radial-gradient(circle at 15% 12%,rgba(30,178,255,.48),transparent 32%), linear-gradient(150deg,#0b438e,var(--navy-950) 72%); color: white; }
.auth-brand::before, .auth-brand::after { content: ""; position: absolute; border: 1px solid rgba(90,195,255,.16); border-radius: 50%; }
.auth-brand::before { width: 420px; height: 420px; right: -170px; top: -110px; }
.auth-brand::after { width: 270px; height: 270px; left: -120px; bottom: -70px; }
.auth-glow { position: absolute; right: 8%; top: 38%; width: 160px; height: 160px; border-radius: 50%; background: #009ffb33; filter: blur(45px); }
.auth-sonia-logo { position: relative; z-index: 1; width: min(440px,90%); padding: 18px 22px; border: 1px solid rgba(255,255,255,.28); border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: 0 24px 70px rgba(0,0,0,.22); }
.auth-intro { position: relative; z-index: 1; margin-top: 44px; }
.auth-intro .eyebrow { color: #56c8ff; }
.auth-intro h2 { margin: 13px 0 15px; font-size: clamp(34px,4vw,55px); line-height: 1.02; letter-spacing: -.055em; }
.auth-intro > p:last-child { max-width: 500px; color: rgba(255,255,255,.7); font-size: 16px; line-height: 1.65; }
.powered-by { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; margin-top: 36px; color: rgba(255,255,255,.55); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.powered-by img { width: 120px; height: 62px; object-fit: contain; padding: 7px 10px; border-radius: 12px; background: rgba(255,255,255,.96); }
.auth-card { display: grid; place-items: center; padding: 38px; background: radial-gradient(circle at 100% 0,#e7f7ff 0,transparent 34%); }
.auth-mobile-brand { display: none; }
.auth-form { width: min(430px,100%); }
.auth-form h1 { margin: 9px 0; color: var(--navy-900); font-size: clamp(36px,4vw,48px); font-weight: 760; letter-spacing: -.045em; line-height: 1.08; }
.auth-form > p:not(.eyebrow):not(.form-message) { color: var(--muted); }
.auth-form label { display: grid; gap: 7px; margin: 20px 0; color: var(--navy-900); font-size: 13px; font-weight: 750; }
.auth-form input, .create-user input, .create-user select { width: 100%; padding: 13px 14px; border: 1px solid #cbddeb; border-radius: 11px; background: white; color: var(--ink); outline: 0; }
.auth-form input:focus, .create-user input:focus, .create-user select:focus { border-color: #67bce9; box-shadow: 0 0 0 4px rgba(8,156,240,.1); }
.primary { width: 100%; padding: 13px 18px; border: 0; border-radius: 11px; background: linear-gradient(135deg,var(--blue-700),var(--navy-800)); color: white; font-weight: 750; box-shadow: 0 8px 20px rgba(5,74,163,.18); }
.primary:hover { background: linear-gradient(135deg,var(--blue-600),var(--blue-700)); }
.link-button { width: 100%; margin-top: 14px; border: 0; background: transparent; color: var(--blue-700); font-weight: 650; }
.form-message { min-height: 20px; color: var(--danger); font-size: 13px; line-height: 1.5; }
.form-message.success { color: var(--success); }
.field-help { color: var(--muted); font-size: 13px; line-height: 1.5; }

.admin-screen { min-height: 100dvh; background: var(--canvas); }
.admin-screen > header { display: flex; justify-content: space-between; align-items: center; padding: 17px clamp(22px,6vw,80px); border-bottom: 1px solid var(--line); background: white; }
.admin-brand, .admin-header-actions { display: flex; align-items: center; gap: 18px; }
.admin-brand > img { width: 145px; height: 54px; object-fit: contain; }
.admin-header-actions > img { width: 88px; height: 48px; object-fit: contain; }
.admin-screen h1, .admin-screen h2 { margin: 4px 0; color: var(--navy-900); }
.admin-screen > header button { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--blue-700); font-weight: 650; }
.admin-screen main { width: min(1200px,calc(100% - 40px)); margin: 32px auto; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.admin-nav a, .pagination button { padding: 12px 16px; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--blue-700); text-decoration: none; }
.admin-nav a[aria-current="page"] { border-color: var(--blue-700); background: linear-gradient(135deg,var(--blue-700),var(--navy-800)); color: white; box-shadow: 0 8px 20px rgba(5,74,163,.15); }
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.stats article, .admin-card { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 10px 28px rgba(8,50,107,.04); }
.stats article { position: relative; overflow: hidden; }
.stats article::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--blue-500),var(--blue-700)); }
.stats strong, .stats span { display: block; }
.stats strong { color: var(--navy-800); font-size: 32px; font-weight: 760; }
.stats span { margin-top: 5px; color: var(--muted); font-size: 13px; }
.admin-card { margin-top: 22px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.section-heading p { margin: 5px 0; color: var(--muted); }
.compact { width: auto; }
.admin-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin: 22px 0; }
.admin-filters label, .admin-filter { display: grid; gap: 8px; }
.admin-filter { margin-top: 20px; max-width: 450px; }
.admin-filters input, .admin-filter input, .admin-filters select { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); max-width: 100%; }
.create-user { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 22px 0; padding: 20px; border: 1px solid #e0edf7; border-radius: 14px; background: var(--blue-50); }
.create-user > label { display: grid; gap: 7px; font-size: 13px; font-weight: 700; }
.create-user .form-message { grid-column: 1/-1; margin: 0; }
.form-wide { grid-column: 1/-1; }
.show-password, .auth-form label.show-password { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 13px; font-weight: 400; }
.show-password input, .auth-form .show-password input { width: auto; padding: 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin-top: 18px; }
th, td { padding: 14px 10px; border-top: 1px solid var(--line); text-align: left; font-size: 13px; }
th { color: var(--muted); font-size: 11px; text-transform: uppercase; }
td strong, td small { display: block; }
td small { margin-top: 4px; color: var(--muted); }
.badge { display: inline-block; padding: 5px 8px; border-radius: 99px; background: #e8f7f0; color: var(--success); }
.badge.warning { background: #fff0da; color: #925700; }
.badge.muted { background: #eee; color: #666; }
.actions { white-space: nowrap; }
.actions button { margin: 2px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--blue-700); }
.review-message { border-top: 1px solid var(--line); padding: 20px 0; overflow-wrap: anywhere; }
.review-message p { white-space: pre-wrap; line-height: 1.6; }
.review-message a { color: var(--blue-700); font-weight: 700; }
.pagination { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.rating-good { color: var(--success); }
.rating-bad { color: var(--danger); }
#admin-status { color: var(--muted); }
#admin-status button { margin-left: 12px; }
.user-dialog { width: min(500px,calc(100% - 32px)); max-height: 90dvh; overflow-y: auto; border: 1px solid var(--line); border-radius: 20px; padding: 28px; color: var(--ink); background: var(--paper); box-shadow: 0 24px 70px rgba(4,19,47,.3); }
.user-dialog::backdrop { background: rgba(4,19,47,.58); backdrop-filter: blur(3px); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.dialog-actions button { border: 1px solid var(--line); padding: 11px 14px; border-radius: 10px; }
.danger { border: 0 !important; background: var(--danger); color: white; }
.actions button.danger-text { color: var(--danger); }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: 380px; padding: 14px 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: var(--navy-950); color: white; box-shadow: 0 14px 38px rgba(4,19,47,.3); }
button:disabled { cursor: wait; opacity: .6; }

@keyframes appear { from { opacity: 0; transform: translateY(8px); } }
@keyframes bounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
@media (max-width: 900px) {
  .auth-screen { grid-template-columns: minmax(340px,.85fr) 1.15fr; }
  .auth-brand { padding: 45px; }
  .auth-intro h2 { font-size: 40px; }
  .stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 780px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: flex; position: fixed; inset: 0 14% 0 0; z-index: 10; transform: translateX(-105%); transition: transform .2s; box-shadow: 12px 0 40px rgba(0,0,0,.25); }
  .menu-open .sidebar { transform: translateX(0); }
  .mobile-menu { display: block; margin-right: 10px; border: 0; background: transparent; color: var(--navy-900); font-size: 22px; }
  .topbar { min-height: 72px; padding: 13px 16px; }
  .topbar-title { margin-right: auto; }
  .topbar-title > img { width: 36px; height: 36px; }
  .topbar .eyebrow { display: none; }
  .status { padding: 7px 9px; font-size: 0; }
  .conversation { padding: 22px 16px; }
  .welcome { margin-top: 30px; }
  .welcome-mark { width: 70px; height: 70px; border-radius: 23px; }
  .welcome-mark img { width: 57px; height: 57px; }
  .suggestions { grid-template-columns: 1fr; margin-top: 28px; }
  .composer-wrap { padding: 10px 14px 14px; }
  .bubble { max-width: 88%; }
  .answer-content { max-width: calc(100% - 50px); }
  .auth-screen { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-card { align-content: center; gap: 28px; padding: 28px 24px; }
  .auth-mobile-brand { display: flex; width: min(430px,100%); align-items: center; justify-content: space-between; gap: 16px; }
  .auth-mobile-brand > img { width: min(210px,58%); }
  .auth-mobile-brand .powered-by { margin: 0; color: var(--muted); font-size: 0; }
  .auth-mobile-brand .powered-by img { width: 88px; height: 48px; padding: 3px; }
  .admin-screen > header { align-items: flex-start; gap: 14px; padding: 14px 18px; }
  .admin-brand > img { width: 110px; }
  .admin-header-actions > img { display: none; }
  .admin-screen > header h1 { font-size: 18px; }
  .admin-screen > header .eyebrow { display: none; }
  .admin-screen main { width: min(100% - 24px,1200px); margin-top: 20px; }
  .create-user { grid-template-columns: 1fr; }
  .create-user .form-message, .form-wide { grid-column: auto; }
  .section-heading { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 470px) {
  .welcome h2 { font-size: 34px; }
  .auth-mobile-brand { justify-content: center; }
  .auth-mobile-brand .powered-by { display: none; }
  .auth-mobile-brand > img { width: 230px; }
  .stats { grid-template-columns: 1fr; }
  .admin-brand > img { display: none; }
  .admin-header-actions { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
/* Viewport layout: keep navigation and composer fixed; scroll conversation only. */
html, body { height: 100%; overflow: hidden; }
.app-shell { height: 100dvh; min-height: 0; overflow: hidden; }
.chat-panel { min-height: 0; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; }
.conversation { min-height: 0; overscroll-behavior: contain; overflow-x: hidden; }
.bubble { overflow-wrap: anywhere; }
.sidebar { min-height: 0; }
.sidebar > * { flex-shrink: 0; }
.history { flex-shrink: 1; min-height: 0; max-height: none; overflow-y: auto; }
.sidebar-spacer { flex: 1 1 0; }
.brand, .logo-frame { position: relative; overflow: hidden; display: block; }
.brand { height: 86px; min-height: 86px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.brand img, .logo-frame img { position: absolute; width: 126%; max-width: none; height: auto; left: -12%; top: 50%; transform: translateY(-50%); }
.new-chat { margin-top: 20px; }
.admin-link { margin: 12px 0 16px; padding: 13px 12px; border: 1px solid #69bfff; background: #125bad; color: white; font-weight: 700; box-shadow: 0 4px 16px #0002; }
.admin-link:hover { background: #1676d3; }
.history-menu { flex-direction: column; margin: 4px 0 8px; background: #11294a; border-color: #29496c; padding: 5px; gap: 2px; box-shadow: 0 8px 20px #0002; }
.history-menu button { display: flex; align-items: center; gap: 10px; color: #e1edfa; background: transparent; font-size: 13px; font-weight: 500; padding: 10px 12px; text-align: left; }
.history-menu button:last-child { color: #ffb3ba; background: transparent; }
.history-menu button:hover { background: #203e61; color: white; }
.history-menu button:last-child:hover { background: #492c40; color: #ffd6da; }
.history-row .history-more { color: #bed2eb; background: transparent; }
.history-row .history-more:hover, .history-row .history-more[aria-expanded="true"] { color: white; background: #ffffff14; }
.composer-wrap { padding-bottom: 10px; }
.composer-wrap > .composer-powered { color: #476488; font-size: 11px; margin-top: 8px; font-weight: 600; }
.composer-wrap > p { max-width: 800px; margin-top: 5px; }
.welcome { margin-top: clamp(10px,4vh,45px); }
.auth-screen { height: 100dvh; min-height: 0; overflow: hidden; }
.auth-brand { min-height: 0; padding: clamp(24px,4vw,65px); }
.auth-logo-frame { width: 100%; max-width: 520px; aspect-ratio: 3.35; flex-shrink: 0; background: transparent; border-radius: 0; }
.auth-intro { margin-top: clamp(16px,3vh,32px); }
.auth-intro h2 { font-size: clamp(30px,3.5vw,50px); }
.auth-brand .powered-by { margin-top: clamp(12px,3vh,28px); }
.auth-card { min-height: 0; padding: clamp(18px,3vh,32px); }
.auth-form h1 { font-size: clamp(30px,4vh,43px); }
.auth-form label { margin: 14px 0; }
.auth-form .form-message:empty { display: none; }
.auth-form .field-help { font-size: 12px; }
.admin-screen { height: 100dvh; min-height: 0; overflow-y: auto; }
.admin-logo-link { width: 155px; height: 48px; flex-shrink: 0; }
:focus-visible { outline: 3px solid #40b6ff; outline-offset: 3px; }
@media (max-height: 730px) {
 .auth-intro h2 { font-size: 33px; margin: 10px 0; }
 .auth-intro > p:last-child { font-size: 14px; line-height: 1.45; }
 .auth-form > p { margin: 8px 0; }
 .auth-form label { margin: 10px 0; }
 .auth-form input { padding: 10px 12px; }
 .welcome-mark { margin-bottom: 12px; }
 .suggestions { margin-top: 22px; }
}
@media (max-width: 780px) {
 .auth-card { gap: 14px; padding: 16px 24px; }
 .auth-mobile-brand { position: relative; width: 240px; height: 72px; overflow: hidden; flex-shrink: 0; }
 .auth-mobile-brand > img { position: absolute; width: 126%; max-width: none; left: -12%; top: 50%; transform: translateY(-50%); }
 .auth-mobile-brand .powered-by { display: none; }
 .auth-form h1 { font-size: 32px; }
 .auth-form .field-help { font-size: 11px; line-height: 1.4; }
 .auth-form > p { margin: 8px 0; }
 .auth-form label { margin: 11px 0; }
 .auth-form input { padding: 11px 12px; }
 .auth-form .link-button { margin-top: 12px; }
 .admin-logo-link { width: 100px; height: 36px; }
 .admin-brand { gap: 8px; }
 .composer-wrap > p { font-size: 10px; }
 .welcome h2 { font-size: 32px; }
 .suggestions { gap: 8px; }
 .suggestions button { padding: 13px; }
}
@media (max-height: 580px) {
 .auth-card { gap: 4px; padding: 10px 20px; }
 .auth-mobile-brand { height: 48px; width: 170px; }
 .auth-form label { margin: 7px 0; }
 .auth-form h1 { font-size: 26px; }
 .auth-form input, .auth-form .primary { padding: 8px 12px; }
 .auth-form .eyebrow { display: none; }
 .auth-form > p { font-size: 11px; margin: 6px 0; }
 .auth-intro > p:last-child { display: none; }
}
.brand img, .logo-frame img { width: 118%; left: -8%; }
@media (max-width: 780px) {
 .sidebar { box-shadow: none; }
 .menu-open .sidebar { box-shadow: 12px 0 40px rgba(0,0,0,.25); }
}

/* Monochrome logo for dark brand surfaces; original colors on light surfaces. */
.sidebar .brand img, .auth-logo-frame img { filter: brightness(0) invert(1); }
.history-menu svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Mobile drawer with independent dismissal and compact branding. */
.sidebar-close, .menu-backdrop { display: none; }
@media (max-width: 780px) {
 .sidebar { inset: 0 auto 0 0; width: min(320px,86vw); padding: 16px; }
 .sidebar .brand { width: 185px; height: 62px; min-height: 62px; margin-right: 46px; }
 .sidebar-close { position: absolute; display: grid; place-items: center; top: 22px; right: 12px; width: 40px; height: 40px; padding: 0; border: 1px solid #ffffff25; border-radius: 10px; background: #ffffff0d; color: white; font-size: 28px; line-height: 1; z-index: 2; }
 .sidebar-close:hover { background: #ffffff20; }
 .menu-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 9; border: 0; padding: 0; background: #04132f66; }
 .new-chat { margin-top: 16px; }
 .sidebar .admin-link { font-size: 13px; }
 .chat-panel { width: 100%; }
 .composer textarea { min-width: 0; }
 .send { flex-shrink: 0; }
 .auth-mobile-brand { width: 185px; height: 58px; }
 .auth-mobile-brand > img { width: 118%; left: -8%; }
 .admin-filters label { min-width: 0; width: 100%; }
 .admin-filters input, .admin-filters select, .admin-filter input { width: 100%; min-width: 0; }
 .admin-card { padding: 16px; min-width: 0; }
 .admin-screen > header { align-items: center; }
 .admin-screen > header button { font-size: 12px; padding: 9px; }
 .admin-brand h1 { font-size: 16px; }
 .admin-logo-link { width: 82px; }
 .toast { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}
@media (max-width: 360px) {
 .sidebar .brand { width: 165px; }
 .topbar { padding-inline: 12px; }
 .topbar-title { gap: 8px; }
 .topbar h1 { font-size: 16px; }
 .admin-brand { gap: 5px; }
}