/* v1.21 — final chat presentation layer. Shared account/admin styles stay intact. */
:root { --sidebar-w:260px; --chat-width:780px; }
:root[data-theme="light"] {
 --bg:#faf9f5; --bg-deep:#f0eee6; --surface:#fffefa; --surface-2:#f0eee6;
 --surface-3:#e8e6dd; --line:#d8d5cb; --line-soft:#e8e5dc;
 --ink:#302e29; --ink-2:#625f57; --ink-3:#757168; --motif:none;
 --shadow-pop:0 12px 36px #302e2920; --shadow-soft:0 3px 12px #302e2910;
}
:root:not([data-theme="light"]) {
 --bg:#262624; --bg-deep:#1f1f1d; --surface:#30302e; --surface-2:#353532;
 --surface-3:#41413d; --line:#4a4943; --line-soft:#363631;
 --ink:#eeeae2; --ink-2:#c1bdb3; --ink-3:#a6a298; --motif:none;
}
@media(prefers-color-scheme:light) {
 :root:not([data-theme]) { --bg:#faf9f5; --bg-deep:#f0eee6; --surface:#fffefa; --surface-2:#f0eee6; --surface-3:#e8e6dd; --line:#d8d5cb; --line-soft:#e8e5dc; --ink:#302e29; --ink-2:#625f57; --ink-3:#757168; }
}
.app .sidebar { border-right:1px solid var(--line-soft); }
.sidebar .sb-nav .sb-link { font-size:14px; font-weight:500; }
.sidebar .conv-item>a { font-size:13px; }
.chat { --accent:#c7795b; --accent-soft:#c7795b18; --accent-line:#c7795b66; }
.chat .topbar { background:var(--bg); border-bottom:0; min-height:48px; }
.chat-mode-bar { background:var(--bg); border-bottom:0; padding:9px 20px; gap:5px; }
.chat-mode-bar .btn.primary { color:var(--ink); background:var(--surface-2); border-color:var(--line-soft); }
.chat-mode-bar .btn { font-size:13px; border-radius:8px; }
.chat .thread-inner { width:100%; max-width:var(--chat-width); padding:24px 28px 38px; }
.chat .msg { min-width:0; }
.chat .msg.ai .prose { font-family:Georgia,'Times New Roman',serif; font-size:17px; line-height:1.8; color:var(--ink); }
[data-response-font="sans"] .chat .msg.ai .prose { font-family:var(--font); }
[data-response-font="mono"] .chat .msg.ai .prose { font-family:var(--mono); }
.chat .msg.user .bubble { background:var(--surface-2); border:0; border-radius:16px; padding:12px 18px; line-height:1.65; }
.chat .prose :is(pre,.table-wrap) { max-width:100%; overflow-x:auto; }
.chat .prose pre { font-size:13px; line-height:1.6; }
.chat .prose img { max-width:100%; height:auto; }
.chat .composer-wrap { width:100%; max-width:var(--chat-width); padding:10px 24px 14px; margin-inline:auto; }
.chat .composer { background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:0 3px 14px #00000009; }
.chat .composer:focus-within { border-color:var(--ink-3); box-shadow:0 3px 16px #0000000c; }
.chat .composer textarea { padding:18px 18px 8px; min-height:72px; font-size:16px; line-height:1.6; }
.chat .composer-bar { padding:6px 12px 12px; gap:6px; align-items:center; }
.chat .composer-bar .tools { flex:1; min-width:0; overflow-x:auto; scrollbar-width:thin; flex-wrap:nowrap; }
.chat .composer-bar .pill-btn { white-space:nowrap; flex-shrink:0; font-size:12px; }
.chat .composer-bar .send-btn { flex:0 0 36px; width:36px; height:36px; border-radius:10px; background:#bf7458; color:#fff; box-shadow:none; }
.chat .composer-bar .send-btn:disabled { opacity:.38; }
.chat .composer-bar .spacer { display:none; }
.chat .composer-hint { font-size:10px; color:var(--ink-3); padding-top:8px; }
.chat-empty .welcome { gap:17px; }
.chat-empty .welcome h1 { font:400 clamp(30px,3.6vw,44px)/1.2 Georgia,'Times New Roman',serif; letter-spacing:-.035em; max-width:24ch; }
.chat-empty .welcome p { color:var(--ink-2); font-size:14px; max-width:48ch; }
.chat-empty .welcome-symbol { color:#bf7458; }
.chat-empty .starters { display:flex; flex-wrap:wrap; justify-content:center; max-width:640px; gap:8px; }
.chat-empty .starters .chip { border:1px solid var(--line); background:transparent; border-radius:10px; min-height:38px; padding:8px 12px; font-size:12px; }
.chat-empty .starters .chip:hover { background:var(--surface-2); }
.chat-empty .starters .starter-chevron { display:none; }
.app :is(button,a,input,textarea,select):focus-visible { outline:2px solid #b47757; outline-offset:3px; }
[data-transcript-width="wide"] { --chat-width:1100px; }
@media(min-width:901px) {
 .chat-empty .welcome { margin-top:clamp(12px,9vh,100px); padding-top:65px; min-height:220px; }
 .chat-empty>.welcome+div { max-width:var(--chat-width); }
 .chat-empty .composer textarea { min-height:82px; }
 .app.with-panel .chat .composer-wrap { padding-inline:14px; }
 .app.with-panel .chat .thread-inner { padding-inline:20px; }
}
@media(max-width:900px) {
 .chat-mode-bar { padding:6px 10px; }
 .unified-chat>.chat.chat-existing>.topbar { display:flex; padding:0 14px; min-height:42px; }
 .chat-existing .topbar-title { text-align:left; min-width:0; font-size:13px; }
 .chat .thread-inner { padding:16px 18px 28px; }
 .chat .msg.ai .prose { font-size:16px; line-height:1.75; }
 .chat .composer-wrap { padding:8px 10px max(10px,env(safe-area-inset-bottom)); }
 .chat .composer textarea { min-height:60px; padding:14px 14px 5px; max-height:28dvh; }
 .chat .composer-bar { gap:3px; padding:5px 7px 8px; }
 .chat .composer-bar .tools { gap:2px; }
 .chat .composer-bar .btn.icon,.chat .composer-bar .send-btn { min-width:44px; min-height:44px; }
 .chat .composer-bar .pill-btn { min-height:44px; padding-inline:8px; }
 .chat-empty .welcome { justify-content:center; padding:24px 18px; gap:15px; }
 .chat-empty .welcome h1 { font-size:clamp(29px,7vw,38px); max-width:20ch; }
 .chat-empty .starters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:440px; }
 .chat-empty .starters .chip { min-height:44px; font-size:12px; padding:8px 10px; }
 .chat .composer-hint:has(.hint-warn) { display:block; }
 .app.with-panel>.panel { height:var(--suvi-visible-h,100dvh); max-width:100%; }
}
@media(max-height:620px) {
 .chat-empty .welcome { justify-content:flex-start; padding-top:14px; margin-top:0; }
 .chat-empty .welcome h1 { font-size:28px; }
}
@media(prefers-reduced-motion:reduce) {
 .app *, .app *::before, .app *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}
/* The input's surrounding border is its focus indicator; avoid a nested outline. */
.app .composer textarea:focus-visible { outline:none; }
.chat-empty .starters { margin:4px auto 22px; padding-inline:18px; }
.chat-empty .welcome h1 { max-width:30ch; font-size:clamp(29px,3vw,38px); }
@media(min-width:901px) { .chat-empty .welcome { padding-bottom:24px; min-height:210px; } }
@media(max-width:900px) {
 .chat .composer-bar .composer-mode .mode-label,
 .chat .composer-bar .composer-mode>.ic:last-child,
 .chat .composer-bar .composer-model>.ic:first-child { display:none; }
 .chat .composer-bar .composer-model .ellipsis { max-width:105px!important; }
 .chat .composer-bar .composer-model { flex-shrink:1; min-width:0; }
 .chat .composer-bar .composer-mode { min-width:40px; justify-content:center; }
}