.message{align-items:flex-start;gap:12px;margin-bottom:22px;position:relative}
.avatar{position:relative;display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:13px;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 24px rgba(0,0,0,.2);overflow:hidden}
.avatar-mira{color:#fff;background:linear-gradient(145deg,#a78bfa 0%,#7057e8 46%,#12758e 100%)}
.avatar-mira::after{content:"";position:absolute;inset:1px;border-radius:11px;background:linear-gradient(145deg,rgba(255,255,255,.28),transparent 45%);pointer-events:none}
.avatar-mira svg{width:24px;height:24px;position:relative;z-index:1;filter:drop-shadow(0 2px 5px rgba(24,10,70,.35))}
.avatar-user{background:linear-gradient(145deg,#303747,#1d2230);color:#eef1f7}
.avatar-user::before{content:"";position:absolute;inset:3px;border:1px solid rgba(255,255,255,.1);border-radius:9px}
.avatar-user span{position:relative;z-index:1;font:700 10px Manrope;letter-spacing:.02em}
.message-content{min-width:0;max-width:calc(100% - 50px)}
.message-meta{display:flex;align-items:baseline;gap:8px;margin:1px 2px 7px}
.message-meta strong{font:700 12px Manrope;letter-spacing:.01em;color:var(--text)}
.message-meta time{font-size:10px;color:var(--muted);opacity:.72;font-variant-numeric:tabular-nums}
.bubble{max-width:100%;font-size:15px;line-height:1.72;letter-spacing:.002em;color:var(--text)}
.message.assistant .bubble{padding:14px 16px;border:1px solid rgba(255,255,255,.07);border-radius:5px 17px 17px 17px;background:linear-gradient(145deg,rgba(18,22,32,.68),rgba(14,18,27,.42));box-shadow:0 10px 30px rgba(0,0,0,.08)}
.message.user{flex-direction:row-reverse}
.message.user .message-content{display:flex;flex-direction:column;align-items:flex-end}
.message.user .message-meta{flex-direction:row-reverse;margin-right:2px}
.message.user .bubble{background:linear-gradient(145deg,rgba(31,37,52,.98),rgba(22,27,39,.98));border:1px solid rgba(255,255,255,.09);border-radius:17px 5px 17px 17px;padding:11px 15px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.message-actions{display:flex;gap:4px;min-height:27px;margin-top:5px;opacity:0;transform:translateY(-3px);transition:.18s ease}
.message:hover .message-actions,.message:focus-within .message-actions{opacity:1;transform:none}.message.user .message-actions{justify-content:flex-end}
.message-action{display:flex;align-items:center;gap:5px;min-height:27px;padding:3px 7px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:10px}.message-action:hover,.message-action.done{background:rgba(139,92,246,.09);color:#b8a9ff}.message-action svg{width:14px;height:14px}
.header-identity,.header-actions{display:flex;align-items:center}.header-identity{gap:10px}.header-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:linear-gradient(145deg,#8b5cf6,#176f87);color:#fff;box-shadow:0 8px 22px rgba(99,76,210,.22)}
.header-identity>div{display:flex;flex-direction:column;gap:1px}.header-identity b{font-size:13px}.header-identity small{font-size:9px;color:var(--muted);letter-spacing:.04em}
.header-actions{gap:14px}.online{display:flex;align-items:center;gap:5px}.online i{width:6px;height:6px;border-radius:50%;background:#48d59b;box-shadow:0 0 0 4px rgba(72,213,155,.09)}
.header-action{display:flex;align-items:center;gap:6px;min-height:34px;padding:0 10px!important;border:1px solid var(--line)!important;border-radius:10px!important;background:rgba(255,255,255,.025)!important;color:var(--muted)!important;font-size:11px!important}.header-action:hover{background:rgba(255,255,255,.055)!important;color:var(--text)!important}.header-action svg{width:16px;height:16px}
.composer-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 5px 0;color:#565e70;font-size:10px}.composer-meta small{font-size:10px}.composer-meta>span{white-space:nowrap}.composer-meta kbd{padding:1px 4px;border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.03);font:500 9px DM Sans}.composer-meta b{font-weight:600;color:var(--muted)}
#sendBtn svg{width:19px;height:19px;transition:transform .2s ease}#sendBtn.ready svg{transform:translateY(-1px)}#sendBtn:disabled{opacity:.5;cursor:wait}
.typing{min-height:27px;align-items:center;padding:4px 10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.035)}
.messages{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(139,92,246,.42) transparent}
.messages::-webkit-scrollbar,.rich-content pre::-webkit-scrollbar,.rich-content .table-wrap::-webkit-scrollbar{width:8px;height:8px}
.messages::-webkit-scrollbar-thumb,.rich-content pre::-webkit-scrollbar-thumb,.rich-content .table-wrap::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:999px;background:rgba(139,92,246,.42);background-clip:padding-box}
.scroll-latest{position:absolute;right:max(22px,calc((100% - 820px)/2));bottom:105px;z-index:3;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:rgba(18,22,32,.92);color:var(--text);box-shadow:0 12px 30px rgba(0,0,0,.24);opacity:0;visibility:hidden;transform:translateY(8px) scale(.92);transition:.2s ease;backdrop-filter:blur(14px)}
.scroll-latest.show{opacity:1;visibility:visible;transform:none}
.rich-content{line-height:1.62;word-break:break-word;white-space:normal}
.rich-content>:first-child{margin-top:0}.rich-content>:last-child{margin-bottom:0}
.rich-content h1,.rich-content h2,.rich-content h3{font-family:Manrope,sans-serif;letter-spacing:-.025em;line-height:1.28;color:var(--text);scroll-margin-top:80px}
.rich-content h1{font-size:1.45rem;margin:1.15em 0 .48em}.rich-content h2{font-size:1.22rem;margin:1.08em 0 .44em}.rich-content h3{font-size:1.05rem;margin:1em 0 .4em}
.rich-content p{margin:.58em 0}.rich-content strong{font-weight:700;color:var(--text)}.rich-content em{color:color-mix(in srgb,var(--text) 88%,var(--violet))}
.rich-content ul,.rich-content ol{margin:.58em 0;padding-left:1.35em}.rich-content li{margin:.26em 0;padding-left:.12em}.rich-content li::marker{color:#8b73e8}
.rich-content blockquote{margin:1em 0;padding:.15em 0 .15em 1em;border-left:3px solid #8b5cf6;color:var(--muted)}
.rich-content hr{height:1px;margin:1.35em 0;border:0;background:var(--line)}
.rich-content a{color:#66d9ef;text-decoration-thickness:1px;text-underline-offset:3px}.rich-content a:hover{text-decoration-thickness:2px}
.rich-content code{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.88em}
.rich-content :not(pre)>code{padding:.18em .42em;border:1px solid rgba(139,92,246,.18);border-radius:6px;background:rgba(139,92,246,.1);color:#c4b5fd}
.rich-content pre{position:relative;margin:1em 0;overflow:auto;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:#0a0d14;color:#e6edf3;box-shadow:0 12px 30px rgba(0,0,0,.18)}
.rich-content pre code{display:block;min-width:max-content;padding:15px 17px 17px;line-height:1.65;white-space:pre}
.code-toolbar{position:sticky;left:0;display:flex;align-items:center;justify-content:space-between;min-width:100%;padding:8px 10px 8px 14px;border-bottom:1px solid rgba(255,255,255,.08);background:#10141d;color:#7f899b;font:600 10px Manrope;text-transform:uppercase;letter-spacing:.08em}
.code-copy{border:0;border-radius:7px;padding:5px 8px;background:rgba(255,255,255,.06);color:#b6bdca;font:600 10px DM Sans;text-transform:none;letter-spacing:0}.code-copy:hover,.code-copy.copied{background:rgba(139,92,246,.17);color:#ddd6fe}
.rich-content table{width:100%;border-collapse:separate;border-spacing:0;margin:1em 0;font-size:.92em;display:block;overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.rich-content th,.rich-content td{min-width:110px;padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}.rich-content th{background:rgba(139,92,246,.08);font-weight:700}.rich-content tr:last-child td{border-bottom:0}
.rich-content input[type=checkbox]{accent-color:#8b5cf6}
.is-writing::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-.14em;background:#8b5cf6;animation:caretBlink .75s steps(1) infinite}
.content-ready>*{animation:contentLift .34s cubic-bezier(.2,.8,.2,1) both}.content-ready>*:nth-child(2){animation-delay:.035s}.content-ready>*:nth-child(3){animation-delay:.07s}.content-ready>*:nth-child(n+4){animation-delay:.1s}
@keyframes caretBlink{50%{opacity:0}}@keyframes contentLift{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(prefers-color-scheme:light){.avatar{border-color:rgba(51,65,85,.1);box-shadow:0 7px 20px rgba(51,65,85,.12)}.avatar-user{background:linear-gradient(145deg,#e8ecf4,#d7deea);color:#334155}.message.assistant .bubble{background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(248,250,252,.75));border-color:rgba(51,65,85,.08);box-shadow:0 8px 26px rgba(51,65,85,.05)}.message.user .bubble{background:linear-gradient(145deg,#f3f5f9,#e9edf4);border-color:rgba(51,65,85,.1);box-shadow:0 7px 20px rgba(51,65,85,.08)}.header-action{background:rgba(255,255,255,.55)!important}}
@media(max-width:760px){.message{gap:9px;margin-bottom:16px}.avatar{flex-basis:34px;width:34px;height:34px;border-radius:11px}.avatar-mira svg{width:21px;height:21px}.message-content{max-width:calc(100% - 43px)}.bubble{font-size:14.5px;line-height:1.58}.message-meta{margin-bottom:5px}.message.assistant .bubble{padding:11px 13px}.message.user .bubble{padding:9px 12px;max-width:100%}.message-actions{opacity:1;transform:none}.message-action span{display:none}.header-mark,.header-identity small,.header-action span,.composer-meta>span{display:none}.header-actions{gap:9px}.header-action{width:34px;padding:0!important;justify-content:center}.composer-meta{justify-content:center}.scroll-latest{right:15px;bottom:98px}.rich-content h1{font-size:1.28rem}.rich-content h2{font-size:1.14rem}.rich-content h3{font-size:1rem}.rich-content pre{max-width:calc(100vw - 62px)}}
@media(prefers-reduced-motion:reduce){.content-ready>*,.is-writing::after{animation:none}.messages{scroll-behavior:auto}.scroll-latest{transition:none}}

/* Refined color system: calm, professional contrast across both themes. */
:root{
  --accent:#8b7cf6;
  --accent-strong:#7567e8;
  --accent-soft:rgba(139,124,246,.12);
  --accent-border:rgba(139,124,246,.28);
  --text-secondary:#b8bfce;
  --text-tertiary:#7d8799;
  --surface-hover:rgba(255,255,255,.055);
  --surface-active:rgba(139,124,246,.12);
  --focus-ring:rgba(139,124,246,.34);
  --danger:#fb7185;
  --success:#4adea0;
}
button{transition:color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
button:focus-visible,textarea:focus-visible,.code-inputs input:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
button:disabled{cursor:not-allowed;filter:saturate(.65)}
.brand,.brand-identity b,.profile b,header b{color:var(--text)}
.brand-identity small,.profile small,.side-title,.composer-meta,.message-meta time{color:var(--text-tertiary)}
.new-chat{color:var(--text);background:linear-gradient(135deg,var(--accent-soft),rgba(34,211,238,.045));border-color:var(--accent-border)}
.new-chat:hover{color:#fff;background:linear-gradient(135deg,rgba(139,124,246,.24),rgba(34,211,238,.09));border-color:rgba(167,139,250,.5);box-shadow:0 10px 26px rgba(76,60,180,.16);transform:translateY(-1px)}
.new-chat:active{transform:translateY(0) scale(.985)}
#history button{color:var(--text-secondary)}
#history button:hover{color:var(--text);background:var(--surface-hover)}
#history button.active{color:#ddd8ff;background:linear-gradient(90deg,var(--surface-active),rgba(139,124,246,.025));box-shadow:inset 2px 0 var(--accent)}
.sidebar-close,.header-action,.mobile-menu,.message-action{color:var(--text-tertiary)}
.sidebar-close:hover,.header-action:hover,.mobile-menu:hover,.message-action:hover{color:var(--text);background:var(--surface-hover)!important;border-color:rgba(255,255,255,.13)!important}
.header-action:active,.sidebar-close:active,.mobile-menu:active{transform:scale(.96)}
.online{color:var(--success)}
.online i,.profile>i{background:var(--success);box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 12%,transparent)}
.welcome>p,.suggestions span{color:var(--text-tertiary)}
.suggestions button{color:var(--text-secondary);background:color-mix(in srgb,var(--panel) 82%,transparent)}
.suggestions button:hover{color:var(--text);border-color:var(--accent-border);background:var(--accent-soft);box-shadow:0 10px 28px rgba(0,0,0,.1)}
.scroll-latest{left:50%;right:auto;bottom:104px;display:grid;place-items:center;width:42px;height:42px;padding:0;border-color:transparent;background:transparent;color:var(--text-secondary);box-shadow:none;transform:translate(-50%,10px) scale(.9);backdrop-filter:none}
.scroll-latest.show{transform:translateX(-50%)}
.scroll-latest svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;animation:arrowDrop 1.55s cubic-bezier(.45,0,.25,1) infinite}
.scroll-latest:hover{border-color:var(--accent-border);background:var(--accent-soft);color:#cfc8ff;box-shadow:0 10px 26px rgba(76,60,180,.12);transform:translateX(-50%)}
.scroll-latest:active{transform:translateX(-50%) scale(.94)}
textarea{color:var(--text)}textarea::placeholder{color:var(--text-tertiary)}
#sendBtn{color:#fff;background:linear-gradient(135deg,var(--accent),#587de6);box-shadow:0 8px 22px rgba(95,79,210,.22)}
#sendBtn:hover:not(:disabled){background:linear-gradient(135deg,#9b8cf8,#6689eb);box-shadow:0 10px 28px rgba(95,79,210,.32);transform:translateY(-1px)}
#sendBtn:active:not(:disabled){transform:translateY(0) scale(.96)}
#sendBtn:disabled{color:var(--text-tertiary);background:color-mix(in srgb,var(--panel) 82%,#64748b 18%);box-shadow:none;opacity:.72}
.message-action.done,.code-copy.copied{color:#d8d1ff;background:var(--accent-soft)}
.rich-content a{color:#67d4e7}.rich-content a:hover{color:#9be7f2}
.auth-submit{background:linear-gradient(135deg,var(--accent),#587de6);box-shadow:0 14px 34px rgba(95,79,210,.24)}
.auth-submit:hover:not(:disabled){background:linear-gradient(135deg,#9b8cf8,#6689eb);box-shadow:0 16px 40px rgba(95,79,210,.32);transform:translateY(-1px)}
.auth-submit:active:not(:disabled){transform:translateY(0) scale(.99)}
.auth-submit:disabled{color:rgba(255,255,255,.72);background:linear-gradient(135deg,#645b9b,#51617f);box-shadow:none}

@media(prefers-color-scheme:light){
  :root{--accent:#6d5bd0;--accent-strong:#5948bd;--accent-soft:rgba(109,91,208,.09);--accent-border:rgba(109,91,208,.24);--text-secondary:#475569;--text-tertiary:#64748b;--surface-hover:#f1f5f9;--surface-active:#eeebff;--focus-ring:rgba(109,91,208,.26);--danger:#be123c;--success:#07865f}
  .new-chat:hover{color:#312e81;background:linear-gradient(135deg,#eeebff,#effbfc);border-color:rgba(109,91,208,.34);box-shadow:0 10px 24px rgba(51,65,85,.08)}
  #history button.active{color:#4338a4}
  .sidebar-close:hover,.header-action:hover,.mobile-menu:hover,.message-action:hover{border-color:rgba(15,23,42,.12)!important}
  .suggestions button:hover{box-shadow:0 10px 24px rgba(51,65,85,.07)}
  .scroll-latest{border-color:transparent;background:transparent;color:#5142b5;box-shadow:none}
  .scroll-latest:hover{border-color:rgba(109,91,208,.22);background:rgba(109,91,208,.08);color:#4338a4;box-shadow:0 10px 24px rgba(51,65,85,.08)}
  #sendBtn{background:linear-gradient(135deg,#7563d8,#526fd1);box-shadow:0 8px 20px rgba(79,70,180,.2)}
  #sendBtn:hover:not(:disabled){background:linear-gradient(135deg,#6855cb,#455fc0)}
  #sendBtn:disabled{color:#94a3b8;background:#e7eaf0}
  .rich-content a{color:#087f96}.rich-content a:hover{color:#075d70}
  .message-action.done,.code-copy.copied{color:#5142b5}
  .auth-submit{background:linear-gradient(135deg,#7563d8,#526fd1)}
}
@media(max-width:760px){.scroll-latest{left:50%;right:auto;bottom:92px;width:40px;height:40px}}
@keyframes arrowDrop{0%{opacity:.35;transform:translateY(-4px)}45%{opacity:1}75%{opacity:1;transform:translateY(4px)}100%{opacity:.25;transform:translateY(7px)}}
@media(prefers-reduced-motion:reduce){.scroll-latest svg{animation:none}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.model-picker{position:relative;display:flex;align-items:center;width:max-content;margin-left:-7px}
.model-picker select{max-width:210px;height:25px;padding:0 25px 0 7px;border:1px solid transparent;border-radius:7px;outline:0;appearance:none;background:transparent;color:var(--text-tertiary);font:600 10px "DM Sans";cursor:pointer;transition:.18s ease}
.model-picker svg{position:absolute;right:7px;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;pointer-events:none;color:var(--text-tertiary)}
.model-picker:hover select,.model-picker select:focus-visible{border-color:var(--accent-border);background:var(--accent-soft);color:var(--text)}
.model-picker select option{background:var(--panel);color:var(--text)}
@media(max-width:760px){.header-identity>div{min-width:0}.model-picker select{max-width:142px;font-size:9px}.model-picker select option{font-size:12px}}

/* Stable responsive header: isolate identity, model picker and actions. */
main>header{min-width:0;height:64px;padding:0 22px;gap:16px;background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.018)}
main>header .header-identity{min-width:0;flex:1;gap:10px}
main>header .header-identity>div{min-width:0;max-width:100%}
main>header .header-identity b{line-height:1.15;white-space:nowrap}
main>header .model-picker{min-width:0;max-width:100%;margin-left:-7px}
main>header .model-picker select{width:auto;max-width:min(250px,100%);text-overflow:ellipsis;white-space:nowrap}
main>header .header-actions{flex:0 0 auto;gap:10px}
main>header .online{white-space:nowrap}
main>header .header-action{flex:0 0 auto}
@media(max-width:760px){
  main>header{height:calc(58px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(10px,env(safe-area-inset-right)) 0 64px;gap:8px}
  main>header .header-identity{overflow:hidden;gap:0}
  main>header .header-identity>div{width:100%;overflow:hidden}
  main>header .header-identity b{font-size:13px}
  main>header .model-picker{width:100%;margin-left:-7px;overflow:hidden}
  main>header .model-picker select{display:block;width:100%;max-width:170px;height:24px;padding-right:22px;font-size:9px}
  main>header .header-actions{gap:6px}
  main>header .online{width:8px;font-size:0;gap:0}
  main>header .online i{width:7px;height:7px}
  main>header .header-action{width:36px;height:36px;min-height:36px;border-radius:10px!important}
}
@media(max-width:360px){main>header{padding-left:58px}main>header .model-picker select{max-width:132px}}
.clear-all-chats{display:flex;align-items:center;gap:9px;width:100%;min-height:38px;margin-bottom:9px;padding:0 10px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--text-tertiary);font-size:11px;text-align:left}
.clear-all-chats svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.clear-all-chats:hover{border-color:color-mix(in srgb,var(--danger) 28%,transparent);background:color-mix(in srgb,var(--danger) 8%,transparent);color:var(--danger)}
.clear-all-chats:active{transform:scale(.985)}
.stream-tail{white-space:pre-wrap}

/* On small screens, long desktop tables become readable field cards. */
@media(max-width:760px){
  .message.assistant .bubble{padding:3px 1px;border:0;background:transparent;box-shadow:none}
  .rich-content h1{font-size:1.22rem;line-height:1.3;margin:.72em 0 .42em}
  .rich-content h2{font-size:1.1rem;line-height:1.34;margin:.72em 0 .38em}
  .rich-content h3{font-size:1rem;line-height:1.38;margin:.68em 0 .34em}
  .rich-content p{margin:.48em 0}
  .rich-content table{display:table;width:100%;margin:.75em 0;border:0;border-radius:0;background:transparent;overflow:visible;font-size:1em}
  .rich-content table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .rich-content table tbody,.rich-content table tr,.rich-content table td{display:block;width:100%}
  .rich-content table tr{margin:0 0 10px;padding:4px 12px;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb,var(--panel) 76%,transparent)}
  .rich-content table td{display:grid;grid-template-columns:minmax(82px,34%) minmax(0,1fr);gap:12px;min-width:0;padding:10px 0;border:0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
  .rich-content table td:last-child{border-bottom:0}
  .rich-content table td::before{content:attr(data-label);color:var(--text-tertiary);font-size:.78rem;font-weight:700;letter-spacing:.01em}
}