/* Chat owns the portal's remaining viewport; only the transcript scrolls. */
body:has(.chat-page){overflow:hidden}
main:has(.chat-page){height:100dvh;min-width:0;display:flex;flex-direction:column;overflow:hidden}
main:has(.chat-page)>.topbar{flex-shrink:0}
.page.chat-page{flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:0;display:block}
.chat-app{display:flex;height:100%;min-height:0;position:relative;color:var(--ink)}
.chat-app button,.chat-popover button,.chat-image-dialog button{min-height:var(--sp-10)}
.chat-app .btn{flex-shrink:0}
.chat-history{display:flex;flex-direction:column;width:14rem;flex-shrink:0;gap:var(--sp-3);padding:var(--sp-4) var(--sp-3);background:var(--surface-2);border-right:1px solid var(--line);min-height:0}
.chat-history>header{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.chat-history h2{font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
#chat-history-close{display:none}
.chat-history-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-1)}
.chat-history-item{text-align:left;display:flex;flex-direction:column;gap:var(--sp-1);border-radius:var(--radius-md);padding:var(--sp-3);width:100%;background:transparent;cursor:pointer;border:1px solid transparent}
.chat-history-item>span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm)}
.chat-history-item small{font-size:var(--fs-2xs);color:var(--muted)}
.chat-history-item:hover{background:var(--purple-soft)}
.chat-history-item.is-current{background:var(--purple-soft);border-color:var(--purple-line);color:var(--purple)}
.chat-local-note{font-size:var(--fs-2xs);line-height:var(--lh-xs);color:var(--muted);padding:var(--sp-2)}
.chat-workspace{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;position:relative;background:var(--paper)}
.chat-header{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-6);border-bottom:1px solid var(--line);flex-shrink:0;background:var(--paper)}
.chat-header>div{min-width:0}
.chat-header h1{font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-header p{font-size:var(--fs-2xs);line-height:var(--lh-xs);color:var(--muted);margin-top:var(--sp-1)}
#chat-history-open{display:none}
.chat-icon{width:var(--sp-10);padding:0;justify-content:center;color:var(--muted)}
.chat-icon:hover{color:var(--ink)}
#chat-send.chat-icon{color:var(--on-brand)}
#chat-new{gap:var(--sp-2)}
.chat-latest{gap:var(--sp-2)}
.chat-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:var(--sp-8) var(--sp-6)}
.chat-column{max-width:48rem;margin-inline:auto;min-width:0}
.chat-message{min-width:0;margin-bottom:var(--sp-8);font-size:var(--fs-base);line-height:var(--lh-base);overflow-wrap:anywhere}
.chat-message-label{font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:600;color:var(--purple);margin-bottom:var(--sp-3)}
.chat-message[data-role=user]{margin-left:auto;max-width:85%;width:fit-content}
.chat-message[data-role=user] .chat-message-label{text-align:right;color:var(--muted)}
.chat-message[data-role=user] .chat-message-body{background:var(--purple-soft);border:1px solid var(--purple-line);border-radius:var(--radius-lg) var(--radius-lg) var(--sp-1) var(--radius-lg);padding:var(--sp-3) var(--sp-4)}
.chat-user-text{white-space:pre-wrap}
.chat-message footer{display:flex;align-items:center;gap:var(--sp-1);margin-top:var(--sp-2);font-size:var(--fs-2xs);line-height:var(--lh-xs);color:var(--muted)}
.chat-message footer .btn{font-size:var(--fs-2xs);color:var(--muted);padding-inline:var(--sp-2)}
.chat-message[data-role=user] footer{justify-content:flex-end}
.chat-answer-cost{white-space:nowrap}
.chat-content{min-width:0;line-height:var(--lh-base)}
.chat-content>:first-child{margin-top:0}.chat-content>:last-child{margin-bottom:0}
.chat-content p,.chat-content ul,.chat-content ol,.chat-content blockquote,.chat-content .chat-table,.chat-content .chat-code{margin-block:var(--sp-4)}
.chat-content h1,.chat-content h2,.chat-content h3,.chat-content h4,.chat-content h5,.chat-content h6{margin-block:var(--sp-6) var(--sp-3);font-weight:600;line-height:var(--lh-lg)}
.chat-content h1{font-size:var(--fs-2xl);line-height:var(--lh-2xl)}.chat-content h2{font-size:var(--fs-xl)}.chat-content h3{font-size:var(--fs-lg)}
.chat-content h4,.chat-content h5,.chat-content h6{font-size:var(--fs-md)}
.chat-content ul{list-style:disc;padding-left:var(--sp-6)}.chat-content ol{list-style:decimal;padding-left:var(--sp-6)}
.chat-content li+li{margin-top:var(--sp-2)}.chat-content li>p{margin-block:var(--sp-2)}
.chat-content blockquote{border-left:3px solid var(--purple-line);padding-left:var(--sp-4);color:var(--muted)}
.chat-content a,.chat-message-images a{color:var(--purple);text-decoration:underline;text-underline-offset:var(--sp-1)}
.chat-content :not(pre)>code{font-family:var(--font-mono);font-size:var(--fs-xs);background:var(--purple-soft);border-radius:var(--radius-sm);padding:var(--sp-1)}
.chat-code{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface-2)}
.chat-code-bar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-inline:var(--sp-4) var(--sp-2);color:var(--muted);font-family:var(--font-mono);font-size:var(--fs-2xs)}
.chat-code-bar .btn{font-family:var(--font-sans);font-size:var(--fs-2xs);color:var(--muted)}
.chat-code pre{max-width:100%;overflow-x:auto;padding:var(--sp-4);font-family:var(--font-mono);font-size:var(--fs-xs);line-height:var(--lh-sm);margin:0;tab-size:2}
.chat-table{max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-md)}
.chat-table table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);text-align:left}
.chat-table th,.chat-table td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);min-width:7rem}
.chat-table th{background:var(--surface-2);font-weight:600}.chat-table tr:last-child td{border-bottom:0}
.chat-content hr{border-color:var(--line);margin-block:var(--sp-6)}
/* Syntax colors follow the same light/dark palette as the rest of the portal. */
.hljs{color:var(--ink)}.hljs-comment,.hljs-quote{color:var(--muted);font-style:italic}
.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-name,.hljs-tag{color:var(--purple)}
.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute{color:var(--green)}
.hljs-title,.hljs-section,.hljs-number,.hljs-symbol,.hljs-built_in,.hljs-type{color:var(--gold-text)}
.hljs-deletion{color:var(--danger)}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:600}
.chat-compose-area{position:relative;flex-shrink:0;padding:var(--sp-3) var(--sp-6) var(--sp-2);background:var(--paper)}
.chat-composer{max-width:48rem;margin:auto;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-lg);padding:var(--sp-2);box-shadow:var(--shadow-2)}
.chat-composer:focus-within{border-color:var(--purple);box-shadow:var(--focus-ring)}
#chat-input{display:block;box-sizing:border-box;width:100%;min-height:var(--sp-16);max-height:9rem;resize:none;background:transparent;border:0;outline:0;padding:var(--sp-3);font-size:var(--fs-base);line-height:var(--lh-base);box-shadow:none;color:var(--ink)}
#chat-input::placeholder{color:var(--muted)}
.chat-tools{display:flex;align-items:center;gap:var(--sp-1);min-width:0}

.chat-model-trigger{min-width:0;max-width:70%;gap:var(--sp-1);font-size:var(--fs-sm);font-weight:500;padding-inline:var(--sp-3);border-radius:var(--radius-pill)}
.chat-model-trigger svg{color:var(--muted);flex-shrink:0}
.chat-model-trigger span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#chat-send,#chat-stop{border-radius:var(--radius-pill)}
.chat-footnote{font-size:var(--fs-2xs);line-height:var(--lh-xs);color:var(--muted);text-align:center;margin:var(--sp-2) auto 0;max-width:48rem}
#chat-error{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--danger);max-width:48rem;margin:0 auto}
#chat-error:not(:empty){padding-top:var(--sp-2)}
.chat-latest{position:absolute;bottom:calc(100% + var(--sp-2));left:50%;transform:translateX(-50%);border-radius:var(--radius-pill);box-shadow:var(--shadow-2);background:var(--surface);z-index:2;white-space:nowrap}
.chat-empty{min-height:100%;max-width:40rem;margin:var(--sp-12) auto var(--sp-8);text-align:center}
.chat-empty-mark{display:grid;place-items:center;width:var(--sp-16);height:var(--sp-16);border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);margin:0 auto var(--sp-5)}
.chat-empty h2{font-size:var(--fs-2xl);line-height:var(--lh-2xl);font-weight:600;text-wrap:balance;margin-bottom:var(--sp-3)}
.chat-empty>p{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--muted)}
.chat-examples{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-8);text-align:left}
.chat-examples button{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);font-size:var(--fs-sm);line-height:var(--lh-sm);text-align:left;cursor:pointer}
.chat-examples button>span{color:var(--purple);display:inline-flex}
.chat-examples button:hover{background:var(--purple-soft);border-color:var(--purple-line)}
.chat-popover{position:fixed;inset:auto auto var(--sp-16) var(--sp-6);margin:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);padding:var(--sp-3);box-shadow:var(--shadow-3);max-height:min(70dvh,36rem);width:min(23rem,calc(100vw - var(--sp-8)));overflow:auto}
.chat-popover::backdrop{background:transparent}
.chat-model-popover>input{width:100%;min-height:var(--sp-10);position:sticky;top:0;z-index:1;background:var(--surface)}
.chat-model-popover>input:focus-visible{outline:0;box-shadow:none;border-color:var(--purple)}
#chat-model-list{padding-top:var(--sp-2)}
#chat-model-list h3{font-size:var(--fs-2xs);line-height:var(--lh-xs);font-weight:600;color:var(--muted);padding:var(--sp-3) var(--sp-2) var(--sp-1)}
#chat-model-list [role=option]{display:flex;align-items:baseline;justify-content:space-between;width:100%;padding:var(--sp-2) var(--sp-3);gap:var(--sp-3);text-align:left;border-radius:var(--radius-md);cursor:pointer;font-size:var(--fs-sm);border:1px solid transparent;background:transparent;color:var(--ink)}
#chat-model-list [role=option]>span{white-space:nowrap}
#chat-model-list small{font-size:var(--fs-2xs);color:var(--muted-2);font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#chat-model-list [aria-selected=true]{color:var(--purple);font-weight:600}
#chat-model-list .is-active,#chat-model-list [role=option]:hover{background:var(--purple-soft)}
.chat-settings h2{font-size:var(--fs-md);font-weight:600}.chat-settings label{font-size:var(--fs-xs)}
.chat-settings .textarea,.chat-settings .select{width:100%;min-height:var(--sp-10)}
.chat-image-options{display:flex;gap:var(--sp-3);padding:var(--sp-2);flex-wrap:wrap}
.chat-image-options label{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);color:var(--muted)}
.chat-image-options .select{min-height:var(--sp-10);font-size:var(--fs-xs);padding-left:var(--sp-3)}
.chat-attachments{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chat-attachments>div{position:relative;padding-top:var(--sp-2);padding-right:var(--sp-2)}
.chat-attachments img{width:var(--sp-16);height:var(--sp-16);object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--line)}
.chat-attachments button{position:absolute;right:0;top:0;min-width:var(--sp-10);border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow-1);cursor:pointer}
.chat-message-images{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.chat-message-images:empty{display:none}
.chat-message-images figure{margin-top:var(--sp-3);max-width:100%}
.chat-image-button{padding:0;border:0;background:transparent;cursor:zoom-in;display:block;max-width:100%}
.chat-image-button img,.chat-content img{max-width:100%;max-height:22rem;border-radius:var(--radius);object-fit:contain}
.chat-content img.chat-image{cursor:zoom-in}
.chat-message-images figcaption{font-size:var(--fs-xs);padding-top:var(--sp-2)}
.chat-image-dialog{max-width:min(90vw,64rem);width:fit-content}
.chat-image-dialog>div{max-width:none}.chat-enlarged{max-width:100%;max-height:70dvh;object-fit:contain}
#chat-editing{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-left:var(--sp-3);font-size:var(--fs-xs);color:var(--purple)}
.chat-page.is-dragging .chat-composer{outline:2px dashed var(--purple);outline-offset:var(--sp-1)}
.chat-app [hidden],.chat-popover [hidden]{display:none!important}
.chat-app :focus-visible,.chat-popover :focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.chat-app button:disabled{opacity:.5;cursor:default}
.chat-scrim{display:none}
@media(max-width:1279px){
  .chat-history{position:absolute;inset:0 auto 0 0;width:min(19rem,85%);z-index:11;box-shadow:var(--shadow-3);display:none}
  .chat-history.is-open{display:flex}
  #chat-history-open,#chat-history-close{display:inline-flex}
  .chat-scrim:not([hidden]){display:block;position:absolute;inset:0;z-index:10;background:var(--overlay);border:0}
}
@media(max-width:640px){
  main:has(.chat-page)>.topbar{padding-inline:var(--sp-3);gap:var(--sp-2)}
  .chat-header{padding:var(--sp-2) var(--sp-3);gap:var(--sp-1)}
  .chat-scroll{padding:var(--sp-5) var(--sp-4);scrollbar-gutter:auto}
  .chat-compose-area{padding:var(--sp-2) var(--sp-3) max(var(--sp-2),env(safe-area-inset-bottom))}
  .chat-footnote{font-size:var(--fs-2xs);line-height:var(--lh-2xs)}
  .chat-composer{padding:var(--sp-1);border-radius:var(--radius)}
  #chat-input{min-height:var(--sp-16);padding:var(--sp-2)}
  .chat-model-trigger{max-width:calc(100% - var(--sp-10)*3 - var(--sp-4));padding-inline:var(--sp-1)}
  .chat-message[data-role=user]{max-width:92%}
  .chat-message{margin-bottom:var(--sp-6)}
  .chat-empty{margin-top:var(--sp-4)}
  .chat-empty-mark{width:var(--sp-12);height:var(--sp-12);font-size:var(--fs-stat);margin-bottom:var(--sp-4)}
  .chat-examples{grid-template-columns:1fr;gap:var(--sp-2);margin-top:var(--sp-5)}
  .chat-examples button{padding:var(--sp-3);gap:var(--sp-2);font-size:var(--fs-xs)}
  .chat-popover{width:calc(100vw - var(--sp-6))}
}
@media(prefers-reduced-motion:reduce){.chat-app *{scroll-behavior:auto!important}}
.chat-popover:not(:popover-open){display:none}