/* A compact service conversation; all colors follow the application tokens. */
html:has(.pa-service),body:has(.pa-service){height:100%;overflow:hidden;overscroll-behavior:none}
.layout:has(.pa-service){position:fixed;inset:0;height:100dvh;min-height:0;overflow:hidden}
.main:has(.pa-service){display:flex;flex-direction:column;height:100vh;height:var(--pa-viewport-height,100dvh);min-height:0;overflow:hidden}
.main:has(.pa-service)>.topbar{flex:none}
.content:has(>.pa-service){display:flex;flex:1;flex-direction:column;min-height:0;width:100%;padding-bottom:24px}
.content:has(>.pa-service)>.footer-note{display:none}
.pa-service{display:flex;flex:1;flex-direction:column;width:100%;max-width:1320px;min-width:0;min-height:0;margin:0 auto;color:var(--ink)}
.pa-service [hidden]{display:none!important}

.pa-heading{display:flex;align-items:center;justify-content:space-between;flex:none;gap:16px;margin-bottom:16px}
.pa-heading-main{display:flex;align-items:center;gap:12px;min-width:0}
.pa-heading-main>div{min-width:0}
.pa-avatar{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:10px;background:var(--brand-soft);color:var(--brand)}
.pa-avatar svg{width:25px;height:25px}
.pa-heading h1{margin:0;font-size:20px;font-weight:600;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-heading p{margin:3px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
.pa-availability{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;line-height:1.6}
.pa-availability:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--muted)}
.pa-availability.is-ready:before{background:var(--success)}
.pa-availability.is-failed:before{background:var(--danger)}
.pa-heading-actions{display:flex;align-items:center;flex:none;gap:8px}
.pa-heading-actions .btn{min-width:44px;min-height:44px;padding:9px 12px;background:var(--paper);color:var(--muted);font-size:13px}
.pa-heading-actions .btn:hover{color:var(--brand);background:var(--brand-soft)}
.pa-heading-actions .btn svg{width:18px;height:18px}
.pa-heading-actions .pa-history-trigger{display:none}

.pa-alert,.pa-service-note{flex:none;margin:0 0 12px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface-subtle);font-size:13px;line-height:1.7;overflow-wrap:anywhere}
.pa-alert{border-color:var(--danger);background:var(--paper);color:var(--danger)}
.pa-alert .btn,.pa-service-note .btn{min-height:44px;margin-left:8px;padding:8px;color:inherit;background:transparent;border:0;text-decoration:underline;text-underline-offset:3px;white-space:normal}
.pa-feedback,.pa-loading{flex:none;margin:0 0 10px;font-size:12px;line-height:1.6;color:var(--muted)}
.pa-feedback{color:var(--success)}
.pa-notices{flex:none}
.pa-notices:not(:has(>*)){display:none}
.pa-messages>.pa-notices{position:sticky;top:0;z-index:1;max-height:min(140px,calc(var(--pa-viewport-height,100dvh) * .25));overflow-y:auto;background:var(--paper);overscroll-behavior:contain}

.pa-layout{display:grid;grid-template-columns:212px minmax(0,1fr);align-items:stretch;flex:1;gap:16px;min-width:0;min-height:0;overflow:hidden}
.pa-history{display:flex;flex-direction:column;min-width:0;min-height:0;border:1px solid var(--line);border-radius:8px;background:var(--paper);overflow:hidden}
.pa-history-top{flex:none;padding:14px 16px;border-bottom:1px solid var(--line)}
.pa-history-top h2{margin:0;color:var(--muted);font-size:13px;font-weight:500;line-height:1.6}
.pa-history-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.pa-history-content nav{display:flex;flex-direction:column;gap:4px;padding:8px}
.pa-history-item{display:block;width:100%;min-height:44px;padding:11px 10px;border:0;border-radius:6px;background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.pa-history-item strong{display:block;overflow:hidden;font-size:13px;font-weight:500;line-height:1.6;text-overflow:ellipsis;white-space:nowrap}
.pa-history-item small{display:block;margin-top:2px;color:var(--muted);font-size:12px;line-height:1.5}
.pa-history-item:hover{background:var(--surface-subtle)}
.pa-history-item.selected{background:var(--brand-soft);color:var(--brand)}
.pa-history-empty{margin:0;padding:18px 14px;color:var(--muted);font-size:12px;line-height:1.8}
.pa-history-item:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

.pa-chat{display:flex;flex-direction:column;min-width:0;min-height:0;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.pa-messages{position:relative;flex:1;min-height:0;padding:24px 28px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.pa-messages:has(>.pa-welcome){display:flex;flex-direction:column}
.pa-welcome{flex:none;width:100%;max-width:540px;margin:auto;padding:24px 0;text-align:center}
.pa-welcome-icon{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 18px;border-radius:12px;background:var(--brand-soft);color:var(--brand)}
.pa-welcome-icon svg{width:29px;height:29px}
.pa-welcome h2{margin:0 0 8px;font-size:22px;font-weight:600;line-height:1.5}
.pa-welcome>p{margin:0 0 24px;color:var(--muted);font-size:14px;line-height:1.8}
.pa-suggestions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;text-align:left}
.pa-suggestions .btn{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-width:0;min-height:76px;padding:13px 16px;border-color:var(--line);background:var(--paper);text-align:left;white-space:normal;line-height:1.6}
.pa-suggestions .btn:hover{border-color:var(--brand);background:var(--brand-soft)}
.pa-suggestion-icon{display:grid;place-items:center;flex:none;color:var(--brand)}
.pa-suggestion-icon svg{width:20px;height:20px}
.pa-suggestions strong{display:block;font-size:14px;font-weight:500}
.pa-suggestions small{display:block;color:var(--muted);font-size:12px;font-weight:400;line-height:1.6}
.pa-turn{min-width:0;margin:0 0 24px}
.pa-turn:last-child{margin-bottom:0}
.pa-question{position:relative;width:fit-content;max-width:85%;margin-left:auto;padding:10px 14px;border-radius:8px;background:var(--brand-soft);font-size:14px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
.pa-response{min-width:0;max-width:100%;margin-top:16px}
.pa-response-label{display:block;margin-bottom:6px;color:var(--muted);font-size:12px;font-weight:500}
.pa-answer{font-size:14px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere}
.pa-message-status{margin:0;color:var(--muted);font-size:14px;line-height:1.8;overflow-wrap:anywhere}
.pa-message-status.is-error{color:var(--danger)}
.pa-sources,.pa-response-actions{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:0 14px;margin-top:6px;color:var(--muted);font-size:12px;line-height:1.6}
.pa-sources a,.pa-response-actions a{display:inline-flex;align-items:center;min-height:44px;max-width:100%;padding:4px 0;border:0;border-radius:0;background:transparent;color:var(--brand);font-size:12px;font-weight:400;line-height:1.6;text-align:left;text-decoration:underline;text-underline-offset:3px;white-space:normal;overflow-wrap:anywhere}
.pa-response-actions a:after{content:"→";margin-left:5px;text-decoration:none}
.pa-sources a:hover,.pa-response-actions a:hover{background:transparent;color:var(--brand-strong)}
.pa-turn-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-top:2px}
.pa-as-of{color:var(--muted);font-size:12px;line-height:1.6}
.pa-turn-tools .btn{flex:none;min-width:44px;min-height:44px;padding:8px;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:400}
.pa-turn-tools .btn:hover{color:var(--brand);background:var(--surface-subtle)}

.pa-compose{position:relative;flex:none;padding:14px 18px;border-top:1px solid var(--line);border-radius:0 0 8px 8px;background:var(--paper)}
.pa-compose-row{display:flex;align-items:flex-end;gap:8px}
.pa-compose textarea{flex:1;min-width:0;width:100%;height:44px;min-height:44px;max-height:120px;padding:9px 12px;resize:none;overflow-y:auto;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);font:inherit;font-size:14px;line-height:24px;scrollbar-width:thin}
.pa-compose textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.pa-compose textarea[aria-invalid=true]{border-color:var(--danger)}
.pa-compose .btn.primary{flex:none;align-self:flex-end;min-width:44px;min-height:44px;padding:9px 12px}
.pa-compose .btn.primary svg{width:18px;height:18px}
.pa-compose>small{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin-top:7px;color:var(--muted);font-size:12px;line-height:1.6}
.pa-keyhint{white-space:nowrap}
.pa-compose .field-error{margin:6px 0 0;color:var(--danger);font-size:12px;line-height:1.6}
.pa-compose .pa-match-note{display:flex;align-items:center;gap:8px;margin:8px 0 0;padding:6px 10px}
.pa-match-note>span{flex:1;min-width:0}
.pa-compose .pa-match-note .btn{flex:none;margin:0}
.pa-service .btn:focus-visible,.pa-service a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

@media(min-width:801px) and (max-width:1050px){
 .pa-layout{grid-template-columns:180px minmax(0,1fr);gap:12px}
 .pa-messages{padding:20px}
 .pa-suggestions .btn{padding:12px}
}
@media(max-width:800px){
 /* The real topbar, workspace switch and fixed navigation determine the space. */
 .layout:has(.pa-service){min-height:0}
 .main:has(.pa-service){height:calc(var(--pa-viewport-height,100vh) - 65px - env(safe-area-inset-bottom,0px));height:calc(var(--pa-viewport-height,100dvh) - 65px - env(safe-area-inset-bottom,0px));min-height:0;padding-bottom:0;overflow:hidden}
 .content:has(>.pa-service){padding:12px 12px 10px;overflow:hidden}
 .content:has(>.pa-service)>.workspace-mobile-switch{flex:none;margin-bottom:10px}
 .content:has(.pa-compose:focus-within)>.workspace-mobile-switch{display:none}
 .main:has(.pa-service) .topbar .agent-trigger{display:none}
 .pa-service{overflow:hidden}
 .pa-service>.pa-notices{flex:1;min-height:0;overflow-y:auto}
 .pa-heading{gap:8px;margin-bottom:12px}
 .pa-heading-main{gap:8px;flex:1}
 .pa-avatar{width:36px;height:36px;border-radius:8px}
 .pa-avatar svg{width:22px;height:22px}
 .pa-heading h1{font-size:18px;line-height:1.5}
 .pa-heading p{display:flex;margin-top:0}
 .pa-availability{font-size:12px}
 .pa-heading-actions{gap:4px}
 .pa-heading-actions .btn{width:44px;padding:10px;border-color:transparent;background:transparent}
 .pa-heading-actions .pa-history-trigger{display:inline-flex}
 .pa-heading-actions .pa-control-label,.pa-keyhint{display:none}
 .pa-alert,.pa-service-note{margin-bottom:8px;padding:8px 10px;font-size:12px}
 .pa-alert .btn,.pa-service-note .btn{margin-left:4px;padding-inline:4px}
 .pa-feedback,.pa-loading{margin-bottom:8px}
 .pa-layout{display:flex;flex-direction:column;gap:0;min-height:0;overflow:hidden}
 .pa-layout>.pa-history{display:none}
 .pa-chat{flex:1;overflow:hidden}
 .pa-messages{min-height:0;padding:16px 14px}
 .pa-welcome{max-width:420px;padding:16px 0}
 .pa-welcome-icon{width:44px;height:44px;margin-bottom:14px;border-radius:10px}
 .pa-welcome-icon svg{width:25px;height:25px}
 .pa-welcome h2{font-size:19px}
 .pa-welcome>p{margin-bottom:18px;font-size:13px;line-height:1.7}
 .pa-suggestions{gap:8px}
 .pa-suggestions .btn{min-height:52px;padding:10px 12px}
 .pa-suggestions strong{font-size:13px}
 .pa-suggestions small{display:none}
 .pa-turn{margin-bottom:20px}
 .pa-question{max-width:92%;padding:9px 12px}
 .pa-response{margin-top:12px}
 .pa-answer{line-height:1.8}
 .pa-sources{gap:0 12px}
 .pa-response-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
 .pa-compose{display:flex;flex-direction:column;flex:0 1 auto;min-height:0;max-height:100%;padding:10px}
 .pa-compose-row,.pa-compose>small{flex:none}
 .pa-compose-feedback{flex:0 1 auto;min-height:0;max-height:min(140px,calc(var(--pa-viewport-height,100dvh) * .2));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
 .pa-compose-feedback:not(:has(>:not([hidden]))){display:none}
 .pa-compose textarea{max-height:clamp(44px,calc(var(--pa-viewport-height,100dvh) * .2),120px);font-size:16px}
 .pa-compose .btn.primary{padding-inline:10px}
 .pa-compose>small{margin-top:6px}
 .pa-compose .pa-match-note{padding:6px 8px}
}
/* Small screens keep the same pinned composer; only the reading areas scroll. */
@media(max-width:800px) and (max-height:600px){
 .content:has(>.pa-service)>.workspace-mobile-switch{display:none}
 .pa-messages{padding:10px 12px}
 .pa-welcome{padding:12px 0}
}
@media(max-width:800px){
 /* The keyboard can leave less space than the usual mobile media query sees. */
 .main.pa-compact-viewport:has(.pa-service)>.topbar{display:none}
 .main.pa-compact-viewport .content:has(>.pa-service){padding:4px 6px}
 .main.pa-compact-viewport .workspace-mobile-switch{display:none}
 .main.pa-compact-viewport .pa-heading{margin-bottom:4px}
 .main.pa-compact-viewport .pa-avatar,.main.pa-compact-viewport .pa-availability{display:none}
 .main.pa-compact-viewport:has(.pa-compose:focus-within) .pa-heading{display:none}
 .main.pa-compact-viewport .pa-messages{padding:8px 10px}
 .main.pa-compact-viewport .pa-compose{padding:4px 6px}
 .main.pa-compact-viewport .pa-compose>small{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}