:root {
  --bg: #faf8ff;
  --grid-line: rgba(126, 91, 190, .045);
  --surface: #ffffff;
  --surface-soft: #fbfaff;
  --surface-alt: #f2eef9;
  --line: #e8e2f0;
  --line-strong: #dcd3e8;
  --text: #292238;
  --muted: #7d748d;
  --primary: #8d61eb;
  --primary-dark: #7245d2;
  --primary-soft: #eee7fc;
  --scrollbar-track: #f5f1fb;
  --scrollbar-thumb: #b99ce8;
  --scrollbar-thumb-hover: #9468dc;
  --pink: #ee91c6;
  --blue: #75a6d8;
  --mint: #67ad9a;
  --danger: #c95364;
  --success: #3d9b72;
  --shadow: 0 14px 38px rgba(61, 43, 83, .08);
  --sidebar: 238px;
  --context: 288px;
}

.auth-link{border:0;background:transparent;color:#76528c;font:inherit;font-weight:600;cursor:pointer;padding:4px 8px;justify-self:center}.auth-link.compact{justify-self:end;padding:2px 0;font-size:12px}.auth-link:hover{text-decoration:underline}.settings-actions{display:flex;gap:10px;flex-wrap:wrap}.user-form-grid.single{grid-template-columns:1fr}.diagnostics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.diagnostic-item{display:flex;align-items:center;gap:10px;min-width:0;padding:12px;border:1px solid var(--border);background:var(--surface-soft);border-radius:7px}.diagnostic-item div{display:grid;min-width:0}.diagnostic-item small{color:var(--muted);overflow-wrap:anywhere}.diagnostic-dot{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:#d7a143;box-shadow:0 0 0 4px rgba(215,161,67,.12)}.diagnostic-dot.ok{background:#2f9d72;box-shadow:0 0 0 4px rgba(47,157,114,.12)}.diagnostic-summary{grid-column:1/-1;display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--border);color:var(--muted)}.diagnostic-summary b{color:var(--text)}
.two-factor-setup,.recovery-codes{display:grid;gap:7px;padding:12px 14px;margin-bottom:14px;border:1px solid var(--border);background:var(--surface-soft);border-radius:7px}.two-factor-setup code,.recovery-codes code{font-size:14px;line-height:1.7;overflow-wrap:anywhere;color:var(--text)}.recovery-codes p{margin:0;color:var(--muted);font-size:13px}
@media(max-width:680px){.diagnostics-grid{grid-template-columns:1fr}.diagnostic-summary{grid-column:auto;align-items:flex-start;flex-direction:column;gap:5px}}

* { box-sizing: border-box; }
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: var(--scrollbar-track); }
*::-webkit-scrollbar-thumb { min-height: 40px; border: 3px solid var(--scrollbar-track); border-radius: 999px; background: var(--scrollbar-thumb); }
*::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
*::-webkit-scrollbar-corner { background: var(--scrollbar-track); }
*::-webkit-scrollbar-button { width: 0; height: 0; display: none; }
html, body { margin: 0; min-height: 100%; }
body { font-family: Inter, "Noto Sans Thai", sans-serif; color: var(--text); background-color: var(--bg); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), radial-gradient(circle at 50% 0, rgba(204, 183, 243, .12), transparent 52%); background-size: 48px 48px, 48px 48px, 100% 100%; font-size: 14px; letter-spacing: 0; }
button, input, textarea, select { font: inherit; letter-spacing: 0; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(141, 97, 235, .22); outline-offset: 2px; }
.hidden { display: none !important; }
.mobile-only { display: none !important; }
svg { width: 18px; height: 18px; stroke-width: 1.8; }

.auth-screen { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(480px, 1.15fr) minmax(440px, .85fr); overflow-x: hidden; overflow-y: auto; background: #fffafd; }
.auth-brand { position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh; padding: clamp(28px,4vw,56px); display: grid; grid-template-rows: auto minmax(250px,1fr) auto auto; gap: 18px; overflow: hidden; color: #30243d; background-color: #c9b8ed; background-image: linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px); background-size: 52px 52px; }
.auth-brand::before,.auth-brand::after { content:""; position:absolute; z-index:-1; width:clamp(150px,19vw,280px); aspect-ratio:1; border-radius:50%; }
.auth-brand::before { top:-70px; right:-60px; background:#f6acd0; border:22px solid rgba(255,255,255,.2); }
.auth-brand::after { left:-70px; bottom:18%; background:#a8d8cf; border:18px solid rgba(255,255,255,.18); }
.auth-logo { display:flex; align-items:center; gap:12px; width:max-content; }
.auth-logo .brand-mark,.auth-mobile-brand .brand-mark { width:44px; height:44px; background:#fff; border:2px solid rgba(255,255,255,.75); box-shadow:0 8px 22px rgba(67,43,96,.14); }
.auth-logo strong,.auth-mobile-brand strong { font:700 24px/1 "Playfair Display",serif; }
.auth-scene { position:relative; align-self:center; justify-self:center; width:min(34vw,420px); aspect-ratio:1.15; display:grid; place-items:center; }
.auth-mascot { width:min(76%,310px); aspect-ratio:1; display:grid; place-items:center; overflow:hidden; border:8px solid rgba(255,255,255,.68); border-radius:50% 46% 52% 44%; background:#fff; box-shadow:0 28px 60px rgba(76,50,106,.18); animation:auth-float 4.6s ease-in-out infinite; }
.auth-mascot img { width:100%; height:100%; object-fit:cover; transform:scale(1.04); }
.auth-greeting { position:absolute; right:-3%; bottom:12%; min-height:42px; display:flex; align-items:center; gap:8px; padding:0 14px; border:2px solid #4a355f; border-radius:8px; background:#fff; box-shadow:5px 6px 0 rgba(74,53,95,.14); font-size:12px; font-weight:700; transform:rotate(-2deg); animation:auth-pop 4.6s ease-in-out infinite; }
.auth-greeting::after { content:""; position:absolute; left:22px; bottom:-8px; width:13px; height:13px; border-right:2px solid #4a355f; border-bottom:2px solid #4a355f; background:#fff; transform:rotate(45deg); }
.auth-greeting svg { width:16px; color:#d85b9d; fill:#f6bad8; }
.auth-float { position:absolute; width:48px; height:48px; display:grid; place-items:center; border:2px solid #4a355f; border-radius:50%; background:#fff; box-shadow:4px 5px 0 rgba(74,53,95,.12); animation:auth-orbit 5s ease-in-out infinite; }
.auth-float svg { width:22px; height:22px; }
.auth-float-star { left:1%; top:12%; color:#8a60d1; }
.auth-float-heart { right:5%; top:4%; color:#d85b9d; animation-delay:-1.4s; }.auth-float-heart svg { fill:#f6bad8; }
.auth-float-flower { left:4%; bottom:8%; color:#3e8e80; animation-delay:-2.7s; }
.auth-brand-copy { max-width:610px; }
.auth-kicker { width:max-content; display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border:1px solid rgba(72,50,92,.2); border-radius:999px; background:rgba(255,255,255,.55); font-size:11px; font-weight:700; }
.auth-kicker svg { width:15px; color:#7651bc; }
.auth-brand-copy h2 { margin:14px 0 9px; font:700 clamp(36px,4.3vw,64px)/1.08 "Playfair Display","Noto Sans Thai",serif; }
.auth-brand-copy p { max-width:550px; margin:0; color:#574765; font-size:14px; line-height:1.75; }
.auth-feature-list { display:flex; flex-wrap:wrap; gap:8px; }
.auth-feature-list span { min-height:34px; display:inline-flex; align-items:center; gap:7px; padding:0 11px; border:1px solid rgba(72,50,92,.16); border-radius:8px; background:rgba(255,255,255,.42); font-size:11px; font-weight:600; }
.auth-feature-list svg { width:15px; }
.auth-panel { position:relative; align-self:center; width:min(100% - 64px,480px); margin:32px auto; padding:clamp(30px,4vw,46px); color:#30283a; background:rgba(255,255,255,.94); border:1px solid #eadff0; border-radius:20px; box-shadow:0 24px 70px rgba(65,42,86,.12); }
.auth-panel::before { content:""; position:absolute; inset:10px; z-index:-1; border:1px dashed #eadff0; border-radius:14px; transform:rotate(1.5deg); }
.auth-mobile-brand { display:none; align-items:center; gap:10px; margin-bottom:24px; }
.auth-welcome-icon { width:44px; height:44px; margin-bottom:16px; display:grid; place-items:center; border-radius:12px; color:#a8477d; background:#ffedf6; border:1px solid #f6cee2; }
.auth-welcome-icon svg { width:20px; height:20px; fill:#f8c7df; }
.auth-heading .eyebrow { display:block; color:#8b7c96; }
.auth-heading h1 { margin:7px 0 8px; font:700 30px/1.32 "Playfair Display","Noto Sans Thai",serif; }
.auth-heading p { color:#7d748d; margin:0 0 28px; line-height:1.65; }
.auth-field { display:grid; gap:8px; margin:16px 0; color:#4d4258; font-size:12px; font-weight:600; }
.auth-input { height:48px; display:flex; align-items:center; gap:9px; padding:0 11px; border:1px solid #ded5e6; border-radius:10px; background:#fff; transition:border-color .16s,box-shadow .16s,transform .16s; }
.auth-input:focus-within { border-color:#9468df; box-shadow:0 0 0 4px rgba(141,97,235,.12); transform:translateY(-1px); }
.auth-input > svg { flex:0 0 auto; width:17px; color:#9b8aa8; }
.auth-input input { min-width:0; width:100%; height:100%; padding:0; border:0; outline:0; color:#30283a; background:transparent; }
.auth-input input::placeholder { color:#b7adbf; }
.auth-password-toggle { flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:8px; color:#8f819a; background:transparent; }
.auth-password-toggle:hover { color:var(--primary-dark); background:var(--primary-soft); }
.auth-password-toggle svg { width:17px; }
.auth-submit { position:relative; min-height:48px!important; border-radius:10px!important; background:#8457d2!important; box-shadow:0 9px 20px rgba(132,87,210,.2); transition:transform .16s,box-shadow .16s,background .16s; }
.auth-submit:hover { transform:translateY(-1px); background:#7144c1!important; box-shadow:0 12px 24px rgba(132,87,210,.26); }
.auth-submit.loading svg { animation:spin .8s linear infinite; }
.auth-panel .form-error { min-height:21px; margin:10px 0 0; color:var(--danger); text-align:center; font-size:11px; }
.auth-note { margin:14px 0 0; display:flex; align-items:center; justify-content:center; gap:6px; color:#95899e; font-size:9px; text-align:center; }
.auth-note svg { width:14px; color:#579985; }
.form-error { min-height:21px; color:var(--danger); text-align:center; }
@keyframes auth-float { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-12px) rotate(1deg); } }
@keyframes auth-orbit { 0%,100% { transform:translateY(0) rotate(-5deg); } 50% { transform:translateY(-9px) rotate(7deg); } }
@keyframes auth-pop { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-7px) rotate(1deg); } }

.app-shell { height: 100vh; height: 100dvh; min-height: 0; display: grid; grid-template-columns: var(--sidebar) minmax(480px, 1fr) var(--context); overflow: hidden; }
.sidebar { background: #fcfbfe; border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 18px 14px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 11px; padding: 3px 6px 22px; }
.brand-mark { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; background: #f8f3ff; border: 1px solid #e6d9f8; box-shadow: 0 9px 18px rgba(112, 67, 205, .18); }.brand-mark img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.28); }
.brand strong { display: block; font: 700 20px "Playfair Display", serif; }
.brand span { color: var(--muted); font-size: 10px; display: block; margin-top: 2px; }
.new-chat { height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; color: white; background: var(--primary); margin: 0 3px 18px; font-weight: 600; }
.new-chat:hover, .btn.primary:hover, .send-btn:hover { background: var(--primary-dark); }
.main-nav { display: grid; gap: 4px; }
.nav-item { border: 0; background: transparent; color: #635a71; min-height: 42px; border-radius: 10px; padding: 0 12px; display: flex; align-items: center; gap: 12px; text-align: left; }
.nav-item:hover { background: #f4f1f8; color: var(--text); }
.nav-item.active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.nav-section-label, .eyebrow { color: #94899f; font-size: 10px; font-weight: 700; letter-spacing: 0; }
.nav-section-label { padding: 25px 12px 8px; }
.sidebar-user { margin-top: auto; border-top: 1px solid var(--line); padding: 16px 4px 0; display: grid; grid-template-columns: 36px 1fr 34px; align-items: center; gap: 9px; min-width: 0; }
.sidebar-user b, .sidebar-user small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sidebar-user b { font-size: 12px; }.sidebar-user small { font-size: 10px; color: var(--muted); margin-top: 2px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--primary-dark); background: var(--primary-soft); font-weight: 700; }

.workspace { height: 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background-color: #faf8ff; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), radial-gradient(circle at 50% 0, rgba(204, 183, 243, .11), transparent 55%); background-size: 48px 48px, 48px 48px, 100% 100%; }
.topbar { min-height: 70px; flex: 0 0 auto; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.88); display: flex; align-items: center; padding: 11px 22px; gap: 14px; }
.workspace-title { margin-right: auto; min-width: 0; }.workspace-title h2 { font-size: 18px; margin: 2px 0 0; }
.top-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.select-control { height: 38px; min-width: 112px; max-width: 190px; border: 1px solid var(--line); border-radius: 10px; padding: 0 31px 0 11px; background: var(--surface); color: var(--text); }
.model-select { width: 175px; }
.connection { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.connection i { width: 7px; height: 7px; border-radius: 50%; background: #aaa; }.connection.online i { background: var(--success); }.connection.offline i { background: var(--danger); }
.view-host { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scroll-behavior: smooth; }
.app-view { display: none; min-height: 100%; padding: 34px clamp(20px, 4vw, 56px); max-width: 1180px; margin: 0 auto; }
.app-view.active { display: block; }
.app-view[data-view-panel="chat"] { max-width: none; padding: 0; }

.welcome { padding: clamp(38px, 6vh, 70px) clamp(22px, 5vw, 64px) 36px; max-width: 1080px; margin: 0 auto; }
.welcome-copy { text-align: center; }.welcome-copy h1 { margin: 10px 0 12px; font: 700 clamp(32px, 4vw, 48px)/1.13 "Playfair Display", "Noto Sans Thai", serif; }.welcome-copy h1 em { font-style: normal; color: var(--primary); }.welcome-copy p { margin: 0; color: var(--muted); font-size: 15px; }
.quick-grid { margin-top: 34px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.quick-card { min-height: 142px; border: 1px solid var(--line); border-radius: 16px; padding: 17px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: #f3effb; color: var(--text); transition: transform .16s, box-shadow .16s, border-color .16s; }
.quick-card:hover { transform: translateY(-2px); border-color: #cfc0e6; box-shadow: var(--shadow); }.quick-card svg { width: 28px; height: 28px; color: var(--primary-dark); }.quick-card b { margin-top: auto; font-size: 13px; }.quick-card span { color: var(--muted); font-size: 11px; margin-top: 5px; }.quick-card.accent-pink { background: #fff2f8; }.quick-card.accent-pink svg { color: #bb5b93; }.quick-card.accent-blue { background: #eff6fb; }.quick-card.accent-blue svg { color: #4c82b8; }.quick-card.accent-mint { background: #edf8f4; }.quick-card.accent-mint svg { color: #438c78; }
.dashboard-row { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(200px, .8fr); gap: 12px; }.calm-panel, .daily-note { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 18px; }.daily-note { display: flex; flex-direction: column; justify-content: center; background: #f9eff7; }.daily-note svg { color: var(--pink); margin-bottom: 18px; }.daily-note span { color: var(--muted); }.daily-note strong { font: 600 18px "Playfair Display", "Noto Sans Thai", serif; margin-top: 3px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.section-head h3 { margin: 3px 0 0; font-size: 15px; }.section-head.spaced { margin: 32px 0 12px; }.text-btn { border: 0; background: none; color: var(--primary-dark); font-size: 12px; }.recent-strip { display: flex; gap: 9px; margin-top: 14px; overflow: hidden; }.recent-chip { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--surface-soft); border-radius: 10px; padding: 10px; text-align: left; }.recent-chip b,.recent-chip small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.recent-chip b { font-size: 11px; }.recent-chip small { color: var(--muted); font-size: 9px; margin-top: 4px; }

.chat-area { min-height: 100%; padding: 26px clamp(18px, 5vw, 64px) 40px; }.chat-messages { max-width: 860px; margin: 0 auto; display: grid; gap: 24px; }.msg { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: flex-start; }.msg.user { grid-template-columns: minmax(0, 1fr) 32px; }.msg.user .message-body { justify-self: end; max-width: 78%; background: var(--primary-soft); border-radius: 15px 15px 4px 15px; padding: 12px 15px; }.msg.user .message-avatar { grid-column: 2; }.msg.user .message-body { grid-column: 1; grid-row: 1; }.message-avatar { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; background: var(--surface-alt); color: var(--primary-dark); font-weight: 700; font-size: 11px; }.msg.assistant .message-avatar { background: #f8f3ff; border: 1px solid #e6d9f8; }.msg.assistant .message-avatar img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.3); }.message-body { min-width: 0; line-height: 1.7; }.message-content { overflow-wrap: anywhere; }.message-content > :first-child { margin-top: 0; }.message-content > :last-child { margin-bottom: 0; }.message-content h1,.message-content h2,.message-content h3 { line-height: 1.35; margin: 1.1em 0 .5em; }.message-content h1 { font-size: 22px; }.message-content h2 { font-size: 18px; }.message-content h3 { font-size: 15px; }.message-content p { margin: .7em 0; }.message-content ul,.message-content ol { padding-left: 22px; }.message-content blockquote { border-left: 3px solid var(--primary); margin: 12px 0; padding: 4px 14px; color: var(--muted); }.message-content pre { background: #211d2a; color: #f4effb; border-radius: 10px; padding: 15px; overflow: auto; position: relative; }.message-content code { font-family: Consolas, monospace; font-size: 12px; }.message-content :not(pre)>code { color: #7143ca; background: var(--primary-soft); padding: 2px 5px; border-radius: 4px; }.message-content table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 12px; }.message-content th,.message-content td { border: 1px solid var(--line); padding: 8px; text-align: left; }.message-content th { background: var(--surface-alt); }.message-actions { display: flex; gap: 2px; margin-top: 8px; opacity: 0; transition: opacity .15s; }.msg:hover .message-actions,.message-actions:focus-within { opacity: 1; }.message-meta { color: var(--muted); font-size: 10px; margin-top: 7px; }.thinking-status { min-height: 30px; width: max-content; display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 11px; line-height: 1; }.thinking-time { min-width: 45px; color: var(--primary-dark); font-variant-numeric: tabular-nums; }.thinking-dots { width: 22px; height: 10px; display: inline-flex; align-items: center; justify-content: space-between; }.thinking-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); animation: thinking-bounce 1s ease-in-out infinite; }.thinking-dots i:nth-child(2) { animation-delay: .14s; }.thinking-dots i:nth-child(3) { animation-delay: .28s; }.typing-cursor::after { content: ""; display: inline-block; width: 7px; height: 15px; margin-left: 4px; vertical-align: -2px; background: var(--primary); animation: blink .8s infinite; } @keyframes blink { 50% { opacity: 0; } } @keyframes thinking-bounce { 0%,60%,100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }

.composer-wrap { position: relative; z-index: 5; flex: 0 0 auto; padding: 10px clamp(16px, 4vw, 38px) 13px; background: rgba(251,250,255,.94); border-top: 1px solid var(--line); }.composer { max-width: 880px; min-height: 54px; margin: 0 auto; border: 1px solid var(--line-strong); border-radius: 17px; background: var(--surface); padding: 7px; display: flex; align-items: flex-end; gap: 5px; box-shadow: 0 7px 22px rgba(58,42,75,.06); }.composer textarea { flex: 1; min-width: 0; max-height: 150px; resize: none; overflow-y: auto; border: 0; outline: 0; background: transparent; color: var(--text); padding: 10px 8px; line-height: 1.5; }.icon-btn,.send-btn { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px; border: 0; display: inline-grid; place-items: center; color: var(--muted); background: transparent; }.icon-btn:hover { color: var(--primary-dark); background: var(--primary-soft); }.send-btn { color: #fff; background: var(--primary); border-radius: 50%; }.icon-btn.stop { color: var(--danger); background: #fcecef; }.composer-meta { max-width: 870px; margin: 6px auto 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }.spacer { flex: 1; }.attached-docs { max-width: 880px; margin: 0 auto 7px; display: flex; gap: 6px; flex-wrap: wrap; }.doc-chip { min-width: 0; max-width: min(260px,100%); display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 8px; background: var(--primary-soft); color: var(--primary-dark); font-size: 10px; }.doc-chip.image { background: #fff0f7; color: #a84f84; }.doc-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.doc-chip b { flex: 0 0 auto; font-size: 9px; font-variant-numeric: tabular-nums; }.doc-chip button { flex: 0 0 auto; border: 0; background: transparent; color: inherit; padding: 0; line-height: 1; }.icon-btn.loading svg,.doc-chip.uploading svg { animation: spin .8s linear infinite; }

.context-panel { min-width: 0; border-left: 1px solid var(--line); background: #fcfbfe; padding: 22px 16px; display: flex; flex-direction: column; gap: 28px; overflow: auto; }.recent-chats,.mini-docs { display: grid; gap: 6px; margin-top: 11px; }.recent-chat { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) 30px; align-items: center; border-radius: 9px; background: transparent; }.recent-chat:hover,.recent-chat.active { background: var(--primary-soft); }.recent-chat-main { min-width: 0; padding: 9px 4px 9px 9px; border: 0; background: transparent; color: inherit; text-align: left; }.recent-chat b,.recent-chat small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.recent-chat b { font-size: 11px; }.recent-chat small { color: var(--muted); font-size: 9px; margin-top: 4px; }.recent-chat-delete { width: 30px; height: 30px; opacity: .55; color: var(--danger); transition: opacity .15s, background .15s; }.recent-chat:hover .recent-chat-delete,.recent-chat:focus-within .recent-chat-delete { opacity: 1; }.recent-chat-delete:hover { color: var(--danger); background: #fcecef; }.mini-doc { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 10px; }.mini-doc svg { width: 15px; }.quote-panel { margin-top: auto; min-height: 130px; border-radius: 16px; padding: 18px; background: #f6edf8; display: flex; flex-direction: column; justify-content: flex-end; }.quote-panel svg { color: var(--pink); margin-bottom: auto; }.quote-panel span { color: var(--muted); }.quote-panel strong { font: 600 17px "Playfair Display", serif; margin-top: 3px; }

@media (hover: none) { .recent-chat-delete { opacity: .75; } }

.page-head { margin-bottom: 28px; }.page-head h1 { margin: 7px 0 8px; font: 700 31px/1.2 "Playfair Display", "Noto Sans Thai", serif; }.page-head p { margin: 0; color: var(--muted); }.page-head.inline { display: flex; justify-content: space-between; align-items: center; }
.btn { min-height: 38px; border-radius: 10px; border: 1px solid transparent; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 600; font-size: 12px; }.btn.primary { color: #fff; background: var(--primary); }.btn.secondary { border-color: var(--line); background: var(--surface); color: var(--text); }.btn.danger { color: var(--danger); background: #fcecef; }.btn.danger-solid { color: #fff; background: var(--danger); }.btn.danger-solid:hover { background: #ad3f50; }.btn:disabled { cursor: not-allowed; opacity: .7; }.btn.wide { width: 100%; margin-top: 20px; min-height: 44px; }
.research-input { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 14px; box-shadow: var(--shadow); }.research-input textarea { width: 100%; border: 0; outline: 0; resize: vertical; color: var(--text); background: transparent; line-height: 1.6; }.research-input > div { border-top: 1px solid var(--line); padding-top: 10px; display: flex; justify-content: flex-end; gap: 8px; }.research-result { margin-top: 22px; border-left: 3px solid var(--primary); padding: 4px 0 4px 20px; }.source-status { margin-top: 18px; border: 1px solid #ebd8a9; background: #fff9e9; color: #806624; padding: 10px 12px; border-radius: 9px; font-size: 11px; }.stack-list { display: grid; gap: 8px; }.stack-item { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 14px; display: grid; grid-template-columns: 1fr auto; gap: 12px; }.stack-item h4 { margin: 0 0 5px; }.stack-item p { margin: 0; color: var(--muted); font-size: 11px; }.stack-actions { display: flex; gap: 4px; align-items: flex-start; }
.drop-zone { min-height: 190px; border: 1px dashed #c9bbdc; border-radius: 16px; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); transition: .15s; position: relative; overflow: hidden; }.drop-zone.dragover { border-color: var(--primary); background: var(--primary-soft); }.drop-zone > svg { width: 34px; height: 34px; color: var(--primary); margin-bottom: 12px; }.drop-zone b { color: var(--text); }.drop-zone span { margin-top: 6px; font-size: 12px; }.drop-zone span button { border: 0; background: none; color: var(--primary-dark); padding: 0; }.upload-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--surface-alt); }.upload-progress i { display: block; width: 0; height: 100%; background: var(--primary); transition: width .15s; }.count-pill,.status-pill { background: var(--surface-alt); color: var(--muted); border-radius: 999px; padding: 5px 9px; font-size: 10px; }.status-pill.online { background: #e5f5ee; color: #287c59; }.status-pill.offline { background: #fae9ec; color: #a23d4e; }
.document-list { display: grid; gap: 7px; }.document-row { min-width: 0; display: grid; grid-template-columns: 38px minmax(0,1fr) auto auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 11px; padding: 11px; background: var(--surface); }.file-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; color: var(--primary-dark); background: var(--primary-soft); text-transform: uppercase; font-size: 9px; font-weight: 700; }.file-info { min-width: 0; }.file-info b,.file-info small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.file-info small { color: var(--muted); margin-top: 4px; font-size: 10px; }.file-state { font-size: 10px; color: var(--muted); }.file-state.ready { color: var(--success); }.file-state.failed { color: var(--danger); }
.tool-catalog { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }.tool-card { min-height: 125px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); padding: 16px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; color: var(--text); }.tool-card:hover { border-color: #cdbde4; box-shadow: var(--shadow); }.tool-card svg { color: var(--primary); width: 23px; height: 23px; }.tool-card b { margin-top: auto; }.tool-card span { color: var(--muted); font-size: 10px; margin-top: 5px; }
.filter-bar { display: flex; gap: 8px; margin-bottom: 15px; }.search-control { height: 38px; flex: 1; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 0 11px; background: var(--surface); color: var(--muted); }.search-control input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); }.history-table { display: grid; gap: 6px; }.history-row { min-width: 0; display: grid; grid-template-columns: 30px minmax(0,1fr) 110px 120px 110px; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); padding: 11px 7px; }.history-main { min-width: 0; cursor: pointer; }.history-main b,.history-main small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.history-main small { color: var(--muted); font-size: 10px; margin-top: 3px; }.mode-tag { color: var(--primary-dark); background: var(--primary-soft); border-radius: 7px; padding: 5px 7px; font-size: 9px; width: max-content; }.history-date { color: var(--muted); font-size: 10px; }.row-actions { display: flex; justify-content: flex-end; gap: 2px; }
.favorite-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.favorite-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--surface); min-width: 0; }.favorite-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }.favorite-card h3 { margin: 6px 0; font-size: 14px; }.favorite-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; color: var(--muted); line-height: 1.6; font-size: 11px; }.favorite-card footer { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 9px; margin-top: 14px; }
.settings-layout { display: grid; gap: 12px; }.settings-section { border-bottom: 1px solid var(--line); padding: 4px 0 22px; }.section-description { margin: 7px 0 15px; color: var(--muted); font-size: 11px; }.detail-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 15px 0; }.detail-item { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 11px; min-width: 0; }.detail-item small,.detail-item b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.detail-item small { color: var(--muted); font-size: 9px; margin-bottom: 5px; }.detail-item b { font-size: 11px; }.provider-test-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }.provider-test-result { min-height:18px; margin:0; color:var(--muted); font-size:11px; }.provider-test-result.success { color:var(--success); }.provider-test-result.error { color:var(--danger); }.model-default-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0 22px; }.model-default-grid label { min-width:0; display:grid; gap:7px; }.model-default-grid label > span { color:var(--text); font-size:11px; font-weight:600; }.model-default-grid .select-control { width:100%; max-width:none; }.route-settings { display: grid; gap: 7px; margin-top: 14px; }.route-row { display: grid; grid-template-columns: 130px 1fr 1fr; gap: 8px; align-items: center; }.route-row b { font-size: 11px; }.route-row select { max-width: none; width: 100%; }.segmented { display: inline-grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: 10px; padding: 3px; margin-top: 14px; background: var(--surface); }.segmented button { min-width: 85px; border: 0; border-radius: 7px; padding: 8px; background: transparent; color: var(--muted); }.segmented button.active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.user-list { max-height: 430px; display: grid; gap: 6px; overflow: auto; }.user-row { min-width: 0; display: grid; grid-template-columns: 40px minmax(150px,1fr) 105px 150px 76px; gap: 12px; align-items: center; padding: 11px 8px; border-bottom: 1px solid var(--line); }.user-avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; }.user-info { min-width: 0; }.user-name { display: flex; align-items: center; gap: 7px; min-width: 0; }.user-name b,.user-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.user-info small { margin-top: 4px; color: var(--muted); font-size: 10px; }.current-user-pill { flex: 0 0 auto; padding: 3px 6px; border-radius: 6px; background: #e5f5ee; color: #287c59; font-size: 8px; font-weight: 700; }.role-pill { width: max-content; padding: 5px 8px; border-radius: 7px; background: var(--surface-alt); color: var(--muted); font-size: 9px; }.role-pill.admin { background: var(--primary-soft); color: var(--primary-dark); }.user-activity small,.user-activity span { display: block; }.user-activity small { color: var(--muted); font-size: 9px; }.user-activity span { margin-top: 3px; font-size: 10px; }.user-actions .icon-btn { width: 34px; height: 34px; }.danger-action { color: var(--danger); }.danger-action:hover { color: var(--danger); background: #fcecef; }
.empty-state { grid-column: 1/-1; padding: 30px; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 11px; font-size: 11px; }.empty-state.compact { padding: 12px; width: 100%; }.alert { padding: 12px; border-radius: 10px; }.alert.danger { background: #fcecef; color: var(--danger); }

.modal { width: min(560px, calc(100vw - 24px)); border: 1px solid var(--line); border-radius: 16px; padding: 0; color: var(--text); background: var(--surface); box-shadow: 0 30px 90px rgba(33,24,45,.24); animation: modal-in .18s ease-out; }.modal::backdrop { background: rgba(35,28,43,.42); backdrop-filter: blur(4px); animation: backdrop-in .18s ease-out; }.modal form { padding: 18px; }.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }.modal-head h3 { margin: 0; }.modal textarea { resize: vertical; }.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 15px; }.attach-list { max-height: 360px; overflow: auto; display: grid; gap: 6px; }.attach-option { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 9px; padding: 10px; }.attach-option input { accent-color: var(--primary); }.attach-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rename-modal { width: min(460px, calc(100vw - 24px)); }.rename-modal form { padding: 20px; }.rename-modal .modal-head { margin-bottom: 18px; }.rename-heading { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 14px; align-items: center; }.rename-heading h3 { margin: 0 0 5px; font-size: 18px; }.rename-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }.rename-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; color: var(--primary-dark); background: var(--primary-soft); }.rename-icon svg { width: 22px; height: 22px; }.rename-field { display: grid; gap: 7px; margin-top: 20px; }.rename-field > span { font-size: 11px; font-weight: 600; }.rename-input { height: 45px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 12px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }.rename-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(141,97,235,.13); }.rename-input svg { flex: 0 0 auto; width: 16px; color: var(--muted); }.rename-input input { min-width: 0; width: 100%; border: 0; outline: 0; padding: 0; color: var(--text); background: transparent; }.rename-field small { min-height: 17px; display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; }.rename-field small b { color: inherit; font-weight: 500; }.field-error { color: var(--danger); }.rename-modal .modal-actions { margin-top: 18px; }
.user-modal { width: min(520px, calc(100vw - 24px)); }.user-modal form { padding: 20px; }.user-modal .modal-head { margin-bottom: 18px; }.user-modal-heading { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 14px; align-items: center; }.user-modal-heading h3 { margin: 0 0 5px; font-size: 18px; }.user-modal-heading p { margin: 0; color: var(--muted); font-size: 12px; }.user-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; margin-top: 20px; }.user-form-grid label { min-width: 0; display: grid; align-content: start; gap: 7px; }.user-form-grid label > span { font-size: 11px; font-weight: 600; }.user-form-grid input,.user-form-grid select { width: 100%; max-width: none; height: 43px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 12px; outline: 0; background: var(--surface); color: var(--text); }.user-form-grid input:focus,.user-form-grid select:focus,.password-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(141,97,235,.13); }.user-form-grid label small { min-height: 14px; color: var(--muted); font-size: 9px; line-height: 1.4; }.password-input { height: 43px; display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }.password-input input { height: 41px; border: 0; box-shadow: none !important; }.password-input .icon-btn { width: 40px; height: 40px; }.modal-error { min-height: 18px; margin: 10px 0 0; text-align: left; font-size: 10px; }.user-modal .modal-actions { margin-top: 8px; }
.confirmation-modal { width: min(440px, calc(100vw - 24px)); }.confirmation-modal form { padding: 20px; }.confirmation-modal .modal-head { margin-bottom: 18px; }.dialog-label { color: var(--muted); font-size: 10px; font-weight: 700; }.confirmation-content { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 14px; align-items: start; }.confirmation-content h3 { margin: 1px 0 6px; font-size: 18px; }.confirmation-content p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }.danger-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; color: var(--danger); background: #fcecef; }.danger-icon svg { width: 22px; height: 22px; }.delete-target { min-width: 0; display: flex; align-items: center; gap: 9px; margin-top: 17px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }.delete-target svg { flex: 0 0 auto; width: 16px; color: var(--muted); }.delete-target span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }.confirmation-modal .modal-actions { margin-top: 20px; }.btn.loading svg { animation: spin .8s linear infinite; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 24px; transform: translate(-50%,20px); padding: 10px 14px; max-width: min(90vw,520px); background: #292238; color: #fff; border-radius: 10px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .18s; font-size: 12px; }.toast.show { opacity: 1; transform: translate(-50%,0); }.toast.error { background: #873645; }

body.theme-dark { --bg:#1e1b24;--surface:#29252f;--surface-soft:#242129;--surface-alt:#35303d;--line:#403947;--line-strong:#51475a;--text:#f4eff8;--muted:#aaa0b4;--primary-soft:#3b3051;--grid-line:rgba(184,146,241,.04);--scrollbar-track:#27232d;--scrollbar-thumb:#7257a3;--scrollbar-thumb-hover:#9874d5;--shadow:0 14px 38px rgba(0,0,0,.18); }.theme-dark .sidebar,.theme-dark .context-panel,.theme-dark .topbar { background:#27232d; }.theme-dark .workspace { background-color:#242129; background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px),radial-gradient(circle at 50% 0,rgba(116,69,210,.08),transparent 55%); background-size:48px 48px,48px 48px,100% 100%; }.theme-dark .composer-wrap { background:rgba(36,33,41,.95); }.theme-dark .message-content pre { background:#17141b; }.theme-dark .danger-icon,.theme-dark .recent-chat-delete:hover,.theme-dark .danger-action:hover { background:#4c2932; }.theme-dark .current-user-pill { background:#244438; color:#84d3b0; }

@media (max-width: 1180px) { :root { --context: 0px; }.app-shell { grid-template-columns: var(--sidebar) minmax(0,1fr); }.context-panel { display: none; }.quick-grid { grid-template-columns: repeat(2,1fr); }.detail-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 760px) {
  .mobile-only { display: inline-grid !important; }.app-shell { display: block; }.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(84vw,290px); transform: translateX(-105%); transition: transform .2s; box-shadow: 20px 0 60px rgba(30,24,37,.16); }.sidebar.open { transform: translateX(0); }.brand .mobile-only { margin-left: auto; }.workspace { height: 100%; }.topbar { min-height: 62px; padding: 9px 12px; }.workspace-title { display: none; }.top-actions { flex:1; }.connection { display:none; }.select-control { min-width:0; flex:1; }.model-select { max-width: 44%; }.app-view { padding: 26px 15px; }.welcome { padding: 34px 15px 22px; }.quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap:8px; }.quick-card { min-height:125px; }.dashboard-row { grid-template-columns:1fr; }.daily-note { display:none; }.composer-wrap { padding:8px 10px calc(10px + env(safe-area-inset-bottom)); }.composer-meta .spacer,.composer-meta .spacer~span { display:none; }.auth-screen { grid-template-columns:1fr; padding:15px; }.auth-brand { display:none; }.auth-panel { margin:auto; width:100%; max-width:440px; padding:25px; }.tool-catalog { grid-template-columns:repeat(2,minmax(0,1fr)); }.favorite-grid { grid-template-columns:1fr; }.history-row { grid-template-columns:26px minmax(0,1fr) auto; }.history-row .mode-tag,.history-date { display:none; }.filter-bar { flex-wrap:wrap; }.filter-bar .search-control { flex-basis:100%; }.detail-grid { grid-template-columns:1fr 1fr; }.route-row { grid-template-columns:1fr; }.route-row b { margin-top:8px; }.page-head.inline { align-items:flex-end; }.msg.user .message-body { max-width:90%; }.user-row { grid-template-columns:40px minmax(0,1fr) auto; gap:9px; }.user-row .role-pill { grid-column:2; }.user-activity { display:none; }.user-actions { grid-column:3; grid-row:1/3; }
}
@media (max-width: 430px) { .quick-grid,.tool-catalog { grid-template-columns:1fr; }.quick-card { min-height:112px; }.top-actions .select-control { font-size:11px; }.page-head h1 { font-size:27px; }.detail-grid,.user-form-grid { grid-template-columns:1fr; }.account-settings .section-head { align-items:flex-start; }.account-settings .section-head .btn { padding:0 10px; }.current-user-pill { display:none; } }
@media (max-width: 620px) { .model-default-grid { grid-template-columns:1fr; } }

.image-mode-btn.active { color:#fff; background:linear-gradient(135deg,var(--primary),#d06ac4); box-shadow:0 4px 12px rgba(141,97,235,.28); }
.image-mode-btn.active:hover { color:#fff; background:linear-gradient(135deg,var(--primary-dark),#b955ae); }
.source-status b,.source-status a { display:block; }
.source-status a { margin-top:7px; color:var(--primary-dark); overflow-wrap:anywhere; }
.generated-image-card { width:min(100%,680px); margin:14px 0 4px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow); }
.generated-image-card img { display:block; width:100%; height:auto; max-height:680px; object-fit:contain; background:var(--surface-alt); }
.generated-image-card figcaption { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; }
.generated-image-card figcaption span { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:10px; }
.generated-image-card figcaption svg { width:15px; height:15px; color:var(--primary); }
.generated-image-card figcaption .btn { text-decoration:none; }
.image-thinking { color:var(--primary-dark); }
.message-actions [data-rating].active { color: var(--primary, #7656b5); background: rgba(132, 96, 190, .14); }
.send-btn.is-stopping { background: var(--primary-dark); }
.send-btn.is-stopping svg { width: 15px; height: 15px; fill: currentColor; }

/* Motion system: subtle feedback without disturbing long-form reading. */
.auth-panel { animation: panel-reveal .5s cubic-bezier(.2,.8,.2,1) both; }
.auth-logo { animation: reveal-down .45s ease-out both; }
.auth-brand-copy { animation: reveal-up .55s .1s ease-out both; }
.auth-feature-list { animation: reveal-up .55s .18s ease-out both; }
.brand-mark { animation: brand-breathe 5.5s ease-in-out infinite; }
.brand:hover .brand-mark,.auth-logo:hover .brand-mark { animation-play-state: paused; transform: translateY(-2px) rotate(-3deg) scale(1.04); }
.brand-mark,.new-chat,.nav-item,.btn,.icon-btn,.send-btn,.recent-chip,.tool-card,.document-row,.history-row,.favorite-card,.stack-item { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.new-chat:hover,.btn:hover { transform: translateY(-1px); }
.new-chat:active,.btn:active,.icon-btn:active,.send-btn:active,.quick-card:active,.tool-card:active { transform: translateY(0) scale(.97); }
.nav-item:hover { transform: translateX(3px); }
.nav-item.active svg { animation: nav-icon-pop .28s cubic-bezier(.2,.9,.3,1.35); }
.icon-btn:hover svg { transform: scale(1.08); }
.icon-btn svg,.send-btn svg,.quick-card svg,.tool-card svg { transition: transform .2s ease; }
.send-btn:hover svg { transform: translateY(-2px); }
.composer { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.composer:focus-within { border-color: rgba(141,97,235,.62); box-shadow: 0 9px 28px rgba(112,67,205,.13), 0 0 0 3px rgba(141,97,235,.09); transform: translateY(-1px); }
.connection.online i { animation: status-pulse 2.4s ease-out infinite; }
.thinking-status { position: relative; overflow: hidden; animation: thinking-in .24s ease-out both; }
.thinking-status::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg,transparent 30%,rgba(141,97,235,.09) 48%,transparent 66%); transform:translateX(-120%); animation:thinking-sheen 2.2s ease-in-out infinite; }
.quote-panel svg,.daily-note svg { animation: sparkle 3.2s ease-in-out infinite; transform-origin:center; }
.drop-zone:hover > svg { animation: upload-float 1.1s ease-in-out infinite; }
.doc-chip { animation: chip-in .24s cubic-bezier(.2,.8,.2,1) both; }
.toast.show { animation: toast-pop .28s cubic-bezier(.2,.9,.3,1.2) both; }

.app-view.view-enter { animation: view-reveal .3s cubic-bezier(.2,.8,.2,1) both; }
.welcome:not(.hidden) .welcome-copy { animation: reveal-up .48s ease-out both; }
.welcome:not(.hidden) .quick-card { animation: card-reveal .46s cubic-bezier(.2,.8,.2,1) both; }
.welcome:not(.hidden) .quick-card:nth-child(2) { animation-delay: .06s; }
.welcome:not(.hidden) .quick-card:nth-child(3) { animation-delay: .12s; }
.welcome:not(.hidden) .quick-card:nth-child(4) { animation-delay: .18s; }
.welcome:not(.hidden) .dashboard-row { animation: reveal-up .48s .2s ease-out both; }
.quick-card:hover svg,.tool-card:hover svg { transform: translateY(-2px) scale(1.06); }
.msg.message-enter { animation: message-in .32s cubic-bezier(.2,.8,.2,1) both; }
.msg.message-enter.user { transform-origin: right bottom; }
.msg.message-enter.assistant { transform-origin: left bottom; }
.message-enter .message-avatar { animation: avatar-pop .38s .06s cubic-bezier(.2,.9,.3,1.3) both; }
.generated-image-card { animation: image-reveal .42s ease-out both; }
.history-row,.document-row,.favorite-card,.stack-item,.user-row { animation: list-item-in .3s ease-out both; }
.history-row:nth-child(2),.document-row:nth-child(2),.favorite-card:nth-child(2),.stack-item:nth-child(2),.user-row:nth-child(2) { animation-delay:.035s; }
.history-row:nth-child(3),.document-row:nth-child(3),.favorite-card:nth-child(3),.stack-item:nth-child(3),.user-row:nth-child(3) { animation-delay:.07s; }
.history-row:nth-child(4),.document-row:nth-child(4),.favorite-card:nth-child(4),.stack-item:nth-child(4),.user-row:nth-child(4) { animation-delay:.105s; }
.history-row:hover,.document-row:hover,.favorite-card:hover,.stack-item:hover { transform: translateY(-1px); border-color:#cfc0e6; box-shadow:0 8px 22px rgba(61,43,83,.06); }

@keyframes panel-reveal { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes reveal-down { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
@keyframes reveal-up { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes view-reveal { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
@keyframes card-reveal { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes list-item-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes message-in { from { opacity:0; transform:translateY(8px) scale(.99); } to { opacity:1; transform:none; } }
@keyframes avatar-pop { from { opacity:0; transform:scale(.72) rotate(-7deg); } to { opacity:1; transform:none; } }
@keyframes image-reveal { from { opacity:0; transform:scale(.985); } to { opacity:1; transform:none; } }
@keyframes chip-in { from { opacity:0; transform:translateY(5px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes nav-icon-pop { 50% { transform:scale(1.18) rotate(-5deg); } }
@keyframes brand-breathe { 0%,88%,100% { transform:none; } 92% { transform:translateY(-2px) rotate(-2deg); } 96% { transform:translateY(-1px) rotate(2deg); } }
@keyframes status-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(61,155,114,.3); } 48% { box-shadow:0 0 0 5px rgba(61,155,114,0); } }
@keyframes thinking-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes thinking-sheen { 0%,30% { transform:translateX(-120%); } 70%,100% { transform:translateX(120%); } }
@keyframes sparkle { 0%,100% { transform:scale(1) rotate(0); } 50% { transform:scale(1.1) rotate(7deg); } }
@keyframes upload-float { 50% { transform:translateY(-5px); } }
@keyframes toast-pop { from { opacity:0; transform:translate(-50%,12px) scale(.97); } to { opacity:1; transform:translate(-50%,0) scale(1); } }

@media (max-width: 980px) {
  .auth-screen { display:block; padding:0 0 24px; background-color:#c9b8ed; background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px); background-size:44px 44px; }
  .auth-brand { min-height:310px; padding:20px; display:grid; grid-template-rows:1fr; overflow:visible; background:transparent; }
  .auth-brand::before { width:150px; top:-74px; right:-52px; border-width:14px; }
  .auth-brand::after { width:120px; left:-52px; bottom:-8px; border-width:12px; }
  .auth-logo,.auth-brand-copy,.auth-feature-list { display:none; }
  .auth-scene { align-self:center; width:min(72vw,290px); }
  .auth-mascot { width:min(75%,215px); border-width:6px; }
  .auth-greeting { right:-5%; bottom:11%; min-height:36px; padding:0 11px; font-size:10px; }
  .auth-float { width:39px; height:39px; }.auth-float svg { width:18px; height:18px; }
  .auth-panel { z-index:2; width:min(calc(100% - 28px),480px); margin:-32px auto 0; padding:30px; border-radius:18px; }
  .auth-mobile-brand { display:flex; }
}

@media (max-width: 480px) {
  .auth-brand { min-height:265px; padding:12px; }
  .auth-scene { width:min(74vw,245px); }
  .auth-mascot { width:min(76%,185px); }
  .auth-float { width:35px; height:35px; }
  .auth-greeting { right:-10%; bottom:8%; }
  .auth-panel { width:calc(100% - 22px); margin:-25px auto 0; padding:25px 22px; }
  .auth-heading h1 { font-size:26px; }
  .auth-heading p { margin-bottom:23px; }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
  .auth-mascot,.auth-float,.auth-greeting,.brand-mark,.connection.online i,.quote-panel svg,.daily-note svg,.thinking-status::after { animation:none!important; }
  .composer:focus-within,.nav-item:hover,.new-chat:hover,.btn:hover,.history-row:hover,.document-row:hover,.favorite-card:hover,.stack-item:hover { transform:none; }
}