:root { color-scheme:light; --brand-50:#f6f9f2; --brand-100:#eaf0e2; --brand-200:#e0ebd4; --brand-300:#d7e6c6; --brand-500:#a8c98e; --brand-700:#74a557; --brand-900:#466a33; --ink:#293c22; --muted:#718066; --sage:#d7e6c6; --paper:#f6f9f2; --line:#dce6d3; --accent:#74a557; --signal:#996521; --deep-green:#20382e; --motion-out:cubic-bezier(.23,1,.32,1); --motion-move:cubic-bezier(.2,.8,.2,1); font:100%/1.5 'Poppins',sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--brand-100); color:var(--ink); }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; color:inherit; }
button:disabled { cursor:wait; opacity:.55; }
button { -webkit-tap-highlight-color:transparent; }
button:active:not(:disabled) { transform:scale(.975); }
button,input,textarea { outline-offset:4px; }
:focus-visible { outline:2px solid #4f7851; }
[hidden] { display:none!important; }
svg.icon { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.icon-library { position:absolute; width:0; height:0; overflow:hidden; }
.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; }
.copilot-shell { width:100%; max-width:560px; height:100dvh; margin:0 auto; display:flex; flex-direction:column; background:radial-gradient(ellipse at 100% 0%,#d7e6c670,transparent 65%),var(--brand-50); overflow:hidden; box-shadow:0 0 80px #466a3312; }
.chat-header { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; min-height:72px; padding:14px 22px; gap:12px; border-bottom:1px solid var(--line); background:rgba(234,240,226,.85); }
.header-actions { display:flex; gap:2px; align-items:center; }
.connection-status { display:none; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:38px; min-width:38px; height:40px; background:transparent; border:0; border-radius:10px; transition:background 140ms; font-size:20px; }
.icon-button:hover { background:#edf3ec; }
.workspace-bar { display:flex; align-items:center; padding:12px 22px 0; flex-shrink:0; }
.view-tabs { display:flex; align-items:center; background:#e0ebd4; padding:4px; border-radius:12px; width:100%; }
.view-tabs button { display:flex; align-items:center; justify-content:center; gap:7px; flex:1; padding:9px 10px; border:0; border-radius:9px; font-size:12px; font-weight:550; color:var(--muted); background:transparent; transition:background 140ms,color 140ms; }
.view-tabs button[aria-selected=true] { background:#fff; color:var(--brand-900); box-shadow:0 2px 8px #74a55715; }
.view-tabs .icon { width:16px; height:16px; }
.surveillance-btn__badge { position:static; align-items:center; justify-content:center; min-width:18px; height:18px; border-radius:6px; background:#e9eedf; color:#536638; font:600 10px/1 system-ui; }
.command-hint { display:none; }
.workspace-grid { flex:1; min-height:0; display:flex; overflow:hidden; }
.conversation-view { flex:1; min-width:0; display:flex; flex-direction:column; position:relative; }
.chat-main { flex:1; min-height:0; overflow:auto; padding:0 24px 24px; scroll-behavior:smooth; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#d6e1d5 transparent; }
.welcome-state { display:flex; flex-direction:column; align-items:flex-start; padding-top:32px; }
.eyebrow { font-size:9px; font-weight:650; letter-spacing:1.6px; color:var(--muted); }
.welcome-state h1 { margin:10px 0 14px; font-size:clamp(25px,6.5vw,31px); font-weight:500; letter-spacing:-1.2px; line-height:1.15; }
.welcome-state h1 span { color:#779072; }
.welcome-copy { font-size:13px; line-height:1.75; color:var(--muted); margin:0 0 22px; }
.starter-grid { display:grid; gap:9px; width:100%; }
.question-categories { display:flex; gap:6px; margin:0 0 14px; width:100%; }
.question-categories button { border:1px solid transparent; border-radius:8px; padding:7px 11px; background:transparent; color:var(--muted); font-size:11px; }
.question-categories button[aria-pressed=true] { background:var(--brand-200); color:var(--brand-900); border-color:#c2d9ab; }
.question-categories button:hover { color:var(--brand-900); background:var(--brand-100); }
.starter-card { display:flex; align-items:center; width:100%; gap:12px; padding:15px 13px; background:rgba(255,255,255,.8); border:1px solid var(--line); border-radius:14px; text-align:left; transition:background 150ms,border-color 150ms; }
.starter-card:hover { background:#f6f9f3; border-color:#c5d5bd; }
.starter-icon { display:grid; place-items:center; width:33px; height:36px; border-radius:10px; background:#eaf0e2; color:var(--brand-700); flex-shrink:0; }
.starter-icon .icon { width:18px; height:18px; }
.starter-card strong { display:block; font-size:12px; font-weight:500; letter-spacing:-.1px; line-height:1.75; }
.starter-card small { display:block; margin-top:3px; color:var(--muted); font-size:10px; line-height:1.5; }
.starter-arrow { margin-left:auto; color:#86947f; width:15px!important; }
.welcome-footnote { font-size:10px; color:#879286; margin:18px 0 0; }
.chat-footer { flex-shrink:0; padding:12px 18px; background:linear-gradient(#f6f9f200,var(--brand-50) 18%); }
.message-composer { background:rgba(255,255,255,.92); border:1px solid #c2d9ab; box-shadow:0 6px 24px #74a5570d; border-radius:17px; padding:13px 13px 9px; transition:border-color 140ms,box-shadow 140ms; }
.message-composer:focus-within { border-color:#9fb591; box-shadow:0 0 0 3px #e8f0e359; }
#userInput { display:block; resize:none; width:100%; min-height:44px; max-height:120px; padding:0 2px; background:transparent; border:0; outline:0; color:var(--ink); font-size:13px; line-height:1.65; }
#userInput::placeholder { color:#8a958a; }
.composer-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.composer-identity { display:flex; gap:5px; align-items:center; font-size:10px; font-weight:500; color:#788775; }
.composer-identity .icon { width:13px; height:13px; }
.composer-controls { display:flex; align-items:center; gap:10px; }
.composer-shortcut { font-size:9px; color:#929d90; }
.send-btn,.stop-btn { display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:11px; color:white; background:linear-gradient(145deg,#a8c98e,#74a557); box-shadow:0 3px 10px #74a55726; }
.send-btn .icon { width:17px; height:17px; }
.stop-btn span { width:11px; height:11px; background:white; border-radius:2px; }
.composer-note { font-size:9px; color:#879185; text-align:center; margin:9px 0 0; }
.context-ribbon { display:flex; align-items:center; gap:9px; background:#eaf1e3; border:1px solid #d5e2c8; border-radius:12px 12px 0 0; padding:8px 11px; margin:0 7px -1px; }
.context-ribbon>.icon { color:#607b52; width:17px; }
.context-ribbon div { flex:1; min-width:0; }
.context-ribbon span { display:block; font-size:7px; letter-spacing:1px; color:#6e8060; }
.context-ribbon strong { display:block; font-size:10px; font-weight:550; overflow-wrap:anywhere; }
.context-ribbon .icon-button { width:28px; min-width:28px; height:28px; }
.followup-row { display:flex; gap:6px; padding:1px 0 10px; flex-wrap:wrap; }
.followup-row:empty { display:none; }
.followup-row button { border:1px solid #e1e8dd; background:white; border-radius:7px; padding:6px 8px; font-size:10px; color:#657b5b; }
.followup-row button:hover { background:#f0f5ec; }
.messages-container { padding-top:24px; }
.messages-container:empty { display:none; }
.message-group { margin-bottom:23px; animation:answer-appear 180ms ease-out; }
.message-group.user { display:flex; justify-content:flex-end; }
.message { font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
.user-msg { padding:12px 16px; border-radius:16px 16px 4px 16px; background:#e0ebd4; color:#466a33; max-width:90%; white-space:pre-wrap; }
.message-group.bot:not(:has(.thinking-block)):before { content:'Risk Copilot'; display:block; color:#788971; font-size:10px; font-weight:600; margin:0 0 8px; }
.bot-msg { color:#35473d; }
.bot-msg p { margin:0 0 12px; }
.bot-msg ul,.bot-msg ol { padding-left:20px; }
.bot-msg h1,.bot-msg h2,.bot-msg h3 { font-size:15px; margin:20px 0 8px; }
.bot-msg pre { padding:12px; overflow:auto; background:#f2f5f0; border-radius:10px; font-size:11px; }
.bot-msg code { font-family:Consolas,monospace; font-size:.88em; }
.bot-msg table { display:block; overflow:auto; border-collapse:collapse; font-size:11px; }
.bot-msg th,.bot-msg td { padding:7px 10px; border:1px solid var(--line); text-align:left; }
.bot-msg a { color:#466a33; text-underline-offset:3px; }
.bot-msg blockquote { border-left:2px solid #b8cba7; margin:12px 0; padding-left:12px; color:var(--muted); }
.answer-actions { display:flex; gap:8px; margin-top:9px; align-items:center; }
.answer-actions .cached-answer-tag { color:#899581; font-size:10px; margin-right:4px; font-weight:500; }
.answer-actions button { display:flex; align-items:center; gap:5px; border:0; border-radius:6px; background:transparent; color:#7d8b76; font-size:10px; padding:5px 7px; }
.answer-actions button:hover { background:#f2f5ee; }
.answer-actions .icon { width:12px; height:12px; }
.request-status { display:flex; align-items:center; gap:8px; font-size:11px; color:#71816a; padding:10px 0; }
.request-status:before { content:''; width:12px; height:12px; border:2px solid #dce7d5; border-top-color:#668559; border-radius:50%; animation:spin .8s linear infinite; }
.request-error { border:1px solid #e9dcca; padding:12px; border-radius:12px; background:#fcf9f3; font-size:12px; color:#7a602f; }
.request-error button { display:block; margin-top:8px; border:1px solid #dcccaf; padding:6px 10px; border-radius:7px; background:white; font-size:11px; }
.scroll-bottom-btn { position:absolute; bottom:185px; left:50%; transform:translateX(-50%); display:none; border:1px solid var(--line); background:white; padding:6px 12px; font-size:11px; border-radius:20px; box-shadow:0 3px 14px #20382e0a; }
.scroll-bottom-btn.visible { display:block; }
.copilot-shell .surveillance-panel { position:relative; width:100%; max-width:none; height:auto; flex:1; min-height:0; transform:none; visibility:visible; transition:none; border:0; box-shadow:none; backdrop-filter:none; display:none; background:transparent; font-family:inherit; }
.copilot-shell .surveillance-panel { flex-direction:column; }
.copilot-shell[data-view=risk] .conversation-view { display:none; }
.copilot-shell[data-view=risk] .surveillance-panel { display:flex; }
.copilot-shell .surveillance-panel__header { display:flex; justify-content:space-between; align-items:center; min-height:0; padding:27px 24px 15px; background:transparent; box-shadow:none; }
.surveillance-panel__header h2 { display:flex; align-items:center; gap:9px; font-weight:500; font-size:24px; letter-spacing:-1px; margin:4px 0 0; }
.desk-dot { width:6px; height:6px; border-radius:50%; background:#a1b38f; }
.copilot-shell .surveillance-panel__body { flex:1; min-height:0; overflow:auto; padding:0 24px 24px; display:flex; flex-direction:column; gap:15px; scrollbar-width:thin; }
.desk-description { margin:0; font-size:12px; color:var(--muted); line-height:1.8; }
.copilot-shell #resultsSection { margin:3px 0 0; }
.surveillance-section__header { display:flex; align-items:center; justify-content:space-between; }
.copilot-shell #resultsSection .surveillance-section__title { font-size:8px; letter-spacing:1.1px; color:#819078; }
.surveillance-section__count { font:11px/1.5 Consolas,monospace; color:#8a9c7c; }
.copilot-shell .risk-result__label { font-size:18px; }
.copilot-shell .risk-result__toggle { padding:18px; }
.copilot-shell .risk-result__body { padding:18px; }
.copilot-shell .risk-result__account { font-size:8px; }
.copilot-shell .risk-result__account span { font-size:11px; }
.copilot-shell .risk-result__hint { font-size:10px; }
.copilot-shell .risk-result__summary { font-size:12px; line-height:1.85; }
.copilot-shell .risk-result { border-radius:14px; }
.risk-card-actions { display:flex; gap:6px; margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
.risk-card-actions button { padding:8px 10px; font-size:10px; border-radius:8px; border:1px solid #dfe7d7; background:#f0f5eb; color:#536e43; }
.surveillance-action-btn { border:1px solid #d8e2d0; background:#eef3e8; color:#5a704c; padding:10px; font-size:11px; border-radius:9px; min-height:40px; }
.single-risk-empty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:65px 12px; }
.empty-risk-icon { display:grid; place-items:center; width:68px; height:68px; background:var(--brand-200); border:1px solid #c2d9ab; border-radius:22px; color:var(--brand-700); margin-bottom:19px; }
.empty-risk-icon .icon { width:30px; height:30px; }
.single-risk-empty h3,.risk-pending h3 { font-weight:500; font-size:17px; letter-spacing:-.4px; margin:0 0 9px; }
.single-risk-empty p,.risk-pending p { color:var(--muted); font-size:12px; line-height:1.9; margin:0; }
.risk-context { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; border:1px solid #c2d9ab; border-radius:14px; background:linear-gradient(120deg,var(--brand-200),var(--brand-100)); }
.risk-context div>span { display:block; font-size:8px; letter-spacing:1.4px; color:var(--brand-900); margin-bottom:3px; }
.risk-context strong { font:500 18px 'Poppins',sans-serif; letter-spacing:.2px; overflow-wrap:anywhere; }
#riskAlert { max-width:60%; font-size:11px; line-height:1.7; color:var(--brand-900); text-align:right; overflow-wrap:anywhere; }
.risk-pending { display:flex; flex-direction:column; align-items:center; text-align:center; padding:50px 10px; }
.classification-spinner { width:33px; height:33px; border:2px solid #d7e6c6; border-top-color:var(--brand-700); border-radius:50%; animation:spin .9s linear infinite; margin-bottom:22px; }
.risk-result-caption { color:var(--muted); font-size:9px; letter-spacing:1.2px; margin:14px 0 12px; }
#riskRetry { align-self:flex-start; min-height:38px; background:rgba(255,255,255,.7); padding:8px 16px; font-family:inherit; font-size:11px; }
.copilot-shell .risk-result { background:rgba(255,255,255,.9); border-color:var(--line); }
.copilot-shell .risk-result__label { font-weight:500; letter-spacing:-.5px; }
.copilot-shell .risk-result__summary { font-size:12px; }
.copilot-shell .risk-result__score { background:var(--brand-50); }
.copilot-shell .risk-result__hint { color:var(--brand-900); }
.preview-controls { margin-top:auto; padding-top:24px; border-top:1px solid var(--line); }
.preview-controls p { font-size:10px; color:var(--muted); margin:0 0 10px; }
.preview-controls button { width:100%; border:1px dashed #a8c98e; background:#eaf0e2; border-radius:10px; padding:11px; color:var(--brand-900); font-size:11px; }
.surveillance-empty,.surveillance-loading { font-size:12px; line-height:1.7; color:var(--muted); }
.thinking-block-wrapper { display:none; }
.typing-indicator { display:none; }
.metadata-panel { display:none; }
.command-dialog { width:calc(100% - 32px); max-width:480px; border:1px solid #dce5d8; padding:0; border-radius:18px; box-shadow:0 24px 90px #152c2326; color:var(--ink); }
.command-dialog::backdrop { background:#20382e38; backdrop-filter:blur(5px); }
.command-search { display:flex; align-items:center; gap:9px; padding:13px 16px; border-bottom:1px solid var(--line); }
.command-search input { flex:1; width:0; border:0; outline:0; font-size:13px; }
.command-search .icon { width:17px; color:#8a9a80; }
#closeCommands { font-size:10px; border:1px solid var(--line); min-width:30px; width:30px; height:25px; border-radius:5px; }
#commandResults { padding:8px; max-height:310px; overflow:auto; }
#commandResults button { width:100%; display:flex; align-items:center; justify-content:space-between; padding:13px 12px; text-align:left; background:white; border:0; border-radius:9px; font-size:12px; }
#commandResults button:hover,#commandResults button:focus { background:#edf3e7; }
#commandResults button span { font-size:9px; color:#8b9b80; }
#commandResults p { font-size:12px; padding:5px 12px; color:var(--muted); }
.command-dialog footer { padding:10px 18px; border-top:1px solid var(--line); color:#899581; font-size:9px; }
.command-dialog footer span { margin-left:15px; }
.toast { position:fixed; z-index:500; bottom:25px; left:50%; transform:translateX(-50%); max-width:calc(100vw - 32px); padding:10px 17px; background:#20382e; color:white; font-size:11px; border-radius:11px; box-shadow:0 6px 20px #20382e20; }
.access-denied-overlay { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--paper); }
.access-denied-card { max-width:320px; }
.access-denied-card>.icon { width:32px; height:32px; color:#7c9967; }
.access-denied-card h1 { font-size:24px; line-height:1.3; letter-spacing:-.8px; }
.access-denied-card p { font-size:13px; line-height:1.8; color:var(--muted); }
.preview-indicator { font-size:9px; text-align:center; color:#8a7144; background:#f6f0e4; padding:5px 12px; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes answer-appear { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media (max-height:740px) { .welcome-state { padding-top:25px; } .welcome-copy { margin-bottom:18px; } .welcome-state h1 { font-size:28px; } .starter-card { padding:12px; } }
@media (max-width:350px) { .chat-header { padding:12px 16px; } .chat-main { padding:0 18px 18px; } .workspace-bar { padding:10px 16px 0; } .composer-shortcut { display:none; } }
@media (prefers-reduced-motion:reduce) { html,.chat-main { scroll-behavior:auto!important; } .request-status:before,.classification-spinner { animation:none!important; } }
@media (prefers-reduced-transparency:reduce) { .chat-footer,.chat-header { background:white; } .command-dialog::backdrop { backdrop-filter:none; background:#20382e66; } }
@media (prefers-contrast:more) { :root { --muted:#344c3d; --line:#6b806e; } .eyebrow,.composer-note,.welcome-footnote { color:#344c3d; } }

/* Risk Copilot: quiet surveillance surface with motion reserved for meaningful state changes. */
.chat-header {
  min-height:70px;
  padding:13px 22px;
  background:rgba(246,249,242,.88);
  backdrop-filter:blur(16px) saturate(130%);
}
.product-identity { display:grid; gap:1px; min-width:0; }
.product-identity span { color:#73866c; font-size:8px; font-weight:650; letter-spacing:1.45px; line-height:1.2; }
.product-identity strong { color:var(--deep-green); font-size:17px; font-weight:550; letter-spacing:-.7px; line-height:1.2; }
.header-actions { gap:4px; }
.icon-button { transition:background 150ms var(--motion-out),transform 120ms var(--motion-out); }
.icon-button:active { transform:scale(.96); }

.view-tabs { position:relative; isolation:isolate; background:#e4eddd; overflow:hidden; }
.view-tabs::before { content:''; position:absolute; z-index:-1; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:9px; background:#fff; box-shadow:0 2px 8px #466a3312; transform:translateX(0); transition:transform 210ms var(--motion-move); }
.copilot-shell[data-view=risk] .view-tabs::before { transform:translateX(100%); }
.view-tabs button[aria-selected=true] { background:transparent; box-shadow:none; }
.view-tabs button { transition:color 150ms var(--motion-out),transform 120ms var(--motion-out); }
.view-tabs button:active { transform:scale(.98); }

.welcome-state { padding-top:38px; }
.risk-copilot-intro { animation:risk-intro-in 220ms var(--motion-out) both; }
.risk-copilot-intro .eyebrow { display:inline-flex; align-items:center; gap:7px; color:#607e58; }
.risk-copilot-intro .eyebrow::before { content:''; width:7px; height:7px; border-radius:50%; background:#79a065; box-shadow:0 0 0 3px #dbe9d0; }
.welcome-state h1 { max-width:13ch; margin:12px 0 13px; color:var(--deep-green); font-size:clamp(28px,7vw,34px); font-weight:500; letter-spacing:-1.55px; line-height:1.1; }
.welcome-state h1 span { display:block; color:#6c9262; }
.welcome-copy { max-width:35ch; font-size:12px; line-height:1.8; margin-bottom:26px; }
.question-categories { margin-bottom:13px; }
.question-categories button { transition:background 150ms var(--motion-out),color 150ms var(--motion-out),border-color 150ms var(--motion-out),transform 120ms var(--motion-out); }
.question-categories button:active { transform:scale(.97); }
.starter-card { position:relative; overflow:hidden; transition:background 160ms var(--motion-out),border-color 160ms var(--motion-out),transform 160ms var(--motion-out),box-shadow 160ms var(--motion-out); }
.starter-card::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.65),transparent 80%); transform:translateX(-120%); transition:transform 380ms var(--motion-out); }
@media (hover:hover) and (pointer:fine) { .starter-card:hover { transform:translateY(-2px); box-shadow:0 8px 18px #45603d0d; } .starter-card:hover::after { transform:translateX(120%); } }
.starter-card:active { transform:scale(.985); }
.welcome-footnote { margin-top:17px; }

.chat-footer { background:linear-gradient(#f6f9f200,var(--brand-50) 22%); }
.message-composer { position:relative; border-color:#c7d9bd; box-shadow:0 9px 28px #274c2110; transition:border-color 170ms var(--motion-out),box-shadow 170ms var(--motion-out),transform 170ms var(--motion-out); }
.message-composer:focus-within { border-color:#8da97e; box-shadow:0 0 0 3px #e8f0e359,0 12px 32px #274c2114; }
.composer-identity { color:#687d62; }
.composer-identity .icon { color:#5e8553; }
.composer-controls { gap:9px; }
.composer-action-slot { position:relative; display:block; width:84px; height:40px; }
.send-btn,.stop-btn { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:6px; width:84px; height:40px; padding:4px 5px 4px 12px; border-radius:13px; font-size:11px; font-weight:600; letter-spacing:-.1px; transition:opacity 130ms var(--motion-out),transform 130ms var(--motion-out),box-shadow 160ms var(--motion-out),background 160ms var(--motion-out),color 160ms var(--motion-out); }
.send-btn { color:#fff; background:linear-gradient(135deg,#29472f,#517d49); box-shadow:0 6px 16px #2a532d2e; }
.send-btn[data-ready=false] { background:#e3ebe0; color:#94a493; box-shadow:none; }
.send-btn__icon,.stop-btn__icon { display:grid; place-items:center; width:28px; height:28px; margin-left:auto; border-radius:9px; background:rgba(255,255,255,.17); transition:transform 150ms var(--motion-out),background 150ms var(--motion-out); }
.send-btn[data-ready=false] .send-btn__icon { background:#f1f5ee; }
.send-btn .icon { width:16px; height:16px; }
.send-btn[data-ready=true]:not(:disabled):hover { background:linear-gradient(135deg,#20382e,#5b8c50); box-shadow:0 9px 20px #2a532d39; transform:translateY(-1px); }
.send-btn[data-ready=true]:not(:disabled):hover .send-btn__icon { transform:translateX(1px); background:rgba(255,255,255,.24); }
.send-btn:active:not(:disabled) { transform:scale(.96); }
.message-composer[aria-busy=true] .send-btn { opacity:0; transform:scale(.92); pointer-events:none; }
.stop-btn { color:#50674a; background:#edf3e9; box-shadow:0 4px 12px #466a3310; opacity:0; transform:scale(.92); pointer-events:none; }
.stop-btn__icon { width:11px; height:11px; margin-left:2px; border-radius:3px; background:#7d9d70; }
.message-composer[aria-busy=true] .stop-btn { opacity:1; transform:scale(1); pointer-events:auto; }
.stop-btn:hover { background:#e1ecda; color:#385534; }
.stop-btn:active { transform:scale(.96); }
.composer-note { letter-spacing:.01em; }

.message-group.bot:not(:has(.thinking-block)):before { content:'Risk Copilot'; color:#66805d; letter-spacing:.1px; }
.message-group { animation:answer-appear 180ms var(--motion-out); }
.request-status { animation:risk-content-in 160ms var(--motion-out) both; }

.copilot-shell[data-risk-arrival=true][data-view=risk] .surveillance-panel { animation:risk-panel-arrive 210ms var(--motion-move) both; }
.risk-pending:not([hidden]) { animation:risk-content-in 180ms var(--motion-out) both; }
.copilot-shell .risk-result { animation:risk-result-arrive 220ms var(--motion-move) both; }
.copilot-shell .risk-result[open] .risk-result__body { animation:risk-content-in 170ms var(--motion-out) both; }
.risk-result__toggle { transition:background 150ms var(--motion-out),transform 120ms var(--motion-out); }
.risk-result__toggle:active { transform:scale(.99); }
.risk-card-actions button,.surveillance-action-btn { transition:background 150ms var(--motion-out),border-color 150ms var(--motion-out),transform 120ms var(--motion-out),box-shadow 150ms var(--motion-out); }
.risk-card-actions button:active,.surveillance-action-btn:active { transform:scale(.975); }

.toast { opacity:0; transform:translate(-50%,8px); transition:opacity 160ms var(--motion-out),transform 160ms var(--motion-out); }
.toast[data-visible=true] { opacity:1; transform:translate(-50%,0); }

@keyframes risk-intro-in { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@keyframes risk-content-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes risk-panel-arrive { from { opacity:0; transform:translateX(8px); } to { opacity:1; transform:translateX(0); } }
@keyframes risk-result-arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

@media (prefers-reduced-motion:reduce) {
  .risk-copilot-intro,.request-status,.risk-pending:not([hidden]),.copilot-shell[data-risk-arrival=true][data-view=risk] .surveillance-panel,.copilot-shell .risk-result,.copilot-shell .risk-result[open] .risk-result__body,.message-group { animation:risk-fade-in 120ms ease-out both!important; transform:none!important; }
  .view-tabs::before,.send-btn,.stop-btn,.toast,.starter-card,.question-categories button,.message-composer,.risk-result__toggle,.risk-card-actions button,.surveillance-action-btn { transition:opacity 100ms ease!important; }
  .starter-card::after { display:none; }
}
@keyframes risk-fade-in { from { opacity:0; } to { opacity:1; } }

/* ===========================================================================
   Finkit: the analysis in the conversation, and the parts of the engine
   (script.js) the archived copilot did not have.
   =========================================================================== */

/* Progress: one quiet status line (the archive's request-status) instead of the
   step-by-step thinking block. */
.thinking-block-wrapper { display:block; }
.thinking-block { display:none; }
.typing-indicator { display:flex; align-items:center; gap:8px; padding:4px 0 0; font-size:11px; color:#71816a; animation:risk-content-in 160ms var(--motion-out) both; }
.typing-indicator__dots { display:none; }
.typing-indicator::before { content:''; width:12px; height:12px; flex-shrink:0; border:2px solid #dce7d5; border-top-color:#668559; border-radius:50%; animation:spin .8s linear infinite; }
.message-group#thinking-group::before, .message-group:has(> .thinking-block-wrapper)::before { content:none!important; }

/* The welcome state belongs to an empty conversation. */
.chat-main:has(.message-group) .welcome-state, body.is-risk-mode .welcome-state { display:none; }

/* The analysis status under the header: which login, and how far the analysis is. */
.analysis-status { display:flex; align-items:center; gap:8px; margin:10px 22px 0; padding:9px 12px; border:1px solid #d5e2c8; border-radius:12px; background:linear-gradient(120deg,var(--brand-200),var(--brand-100)); font-size:11px; color:var(--brand-900); flex-shrink:0; animation:risk-content-in 180ms var(--motion-out) both; }
.analysis-status__dot { width:7px; height:7px; border-radius:50%; background:#a1b38f; flex-shrink:0; }
.analysis-status__dot[data-state=analyzing] { background:#c08a3e; box-shadow:0 0 0 3px #f1e3cc; animation:status-pulse 1.4s ease-in-out infinite; }
.analysis-status__dot[data-state=ready] { background:#5c8a43; box-shadow:0 0 0 3px #dbe9d0; }
.analysis-status__dot[data-state=error] { background:#a2621d; }
.analysis-status__text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.analysis-status__login { font-weight:600; white-space:nowrap; }
@keyframes status-pulse { 50% { opacity:.45; } }

/* The analysis card, as the first message of the conversation. */
.message-group--risk::before { content:'Risk analysis'!important; display:block; color:#66805d; font-size:10px; font-weight:600; margin:0 0 8px; }
.message-group--risk .classification-message { border-radius:16px; border-color:var(--line); box-shadow:0 9px 28px #274c210d; }

/* Suggested questions under a finished analysis (the archive's follow-up chips). */
.analysis-followups { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.analysis-followups__chip { border:1px solid #dfe7d7; background:#f0f5eb; border-radius:8px; padding:7px 10px; font-size:11px; line-height:1.4; color:#536e43; text-align:left; transition:background 150ms var(--motion-out),border-color 150ms var(--motion-out),transform 120ms var(--motion-out); }
.analysis-followups__chip:hover { background:#e3eedb; border-color:#c5d5bd; }
.analysis-followups__chip:active { transform:scale(.975); }

/* The ribbon names the analysis the conversation is about. */
.context-ribbon strong { font-size:11px; }
.context-ribbon span { font-size:8px; }

/* Command palette: the highlighted row follows the arrow keys. */
#commandResults button[aria-selected=true] { background:#edf3e7; }
#commandResults { max-height:380px; }
.command-section-title { padding:9px 12px 4px; font-size:9px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; color:#73866c; }
.command-chat-row { display:flex; align-items:center; gap:4px; border-radius:9px; border-left:3px solid transparent; transition:border-color 120ms; }
.command-chat-row[aria-current="true"], .command-chat-row.is-current { border-left-color:var(--brand-600, #4a6b36); }
.command-chat-row[aria-current="true"] .command-chat-open, .command-chat-row.is-current .command-chat-open { background:#f3f7ef; }
#commandResults .command-chat-open { flex:1; min-width:0; align-items:flex-start; gap:10px; padding:10px 12px; }
.command-chat-main { display:grid; gap:2px; flex:1; min-width:0; }
.command-chat-title { font-size:12px; font-weight:600; color:var(--deep-green); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.command-chat-snippet { font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.command-chat-meta { font-size:9px; color:#8b9b80; white-space:nowrap; padding-top:2px; }
.command-chat-open-tag { display:inline-block; font-size:9px; font-weight:600; color:var(--brand-700, #365027); background:#e2ecd7; border:1px solid #c8dbc0; border-radius:4px; padding:1px 5px; line-height:1.2; text-transform:uppercase; letter-spacing:.03em; }
#commandResults .command-chat-delete { width:26px; min-width:26px; height:26px; padding:0; justify-content:center; border-radius:7px; color:#8b9b80; font-size:14px; line-height:1; opacity:.65; transition:all 140ms ease; }
#commandResults .command-chat-delete:hover { background:#f6e8e6; color:#9c3b2e; opacity:1; }
#commandResults .command-chat-delete.is-confirming { width:auto; min-width:54px; height:26px; padding:0 8px; font-size:11px; font-weight:600; color:#dc2626; background:#fee2e2; border:1px solid #fca5a5; opacity:1; }
.command-empty { padding:24px 16px; text-align:center; font-size:13px; color:#73866c; margin:0; }

/* Messages read a little larger than the archive's 13px on wide screens. */
@media (min-width:600px) { .message { font-size:14px; } }

/* The status line after "Thought for…" history entries stays out of the way. */
.thinking-block.completed { display:none; }

@media (prefers-reduced-motion:reduce) {
  .typing-indicator::before, .analysis-status__dot[data-state=analyzing] { animation:none!important; }
  .analysis-status, .typing-indicator, .analysis-followups__chip { animation:none!important; transition:none!important; }
}

/* Once the analysis is complete the review tab and the ribbon say so: the status line is
   only for an analysis in progress, or one that failed. */
.analysis-status:has(.analysis-status__dot[data-state=ready]) { display:none; }

/* Before the login is known the card heading sits at the start, not under a missing login. */
.classification-message__login[hidden] + .classification-message__eyebrow { max-width:none; margin-right:auto; text-align:left; }

/* One conversation: the analysis is a message in it. */
.analysis-status { margin-top:12px; }
.chat-main { padding-top:4px; }
.message-group--risk { scroll-margin-top:12px; }
.message-group--risk.is-spotlit .classification-message { animation:analysis-spotlight 1.4s var(--motion-out); }
@keyframes analysis-spotlight { 0%,100% { box-shadow:0 9px 28px #274c210d; } 25% { box-shadow:0 0 0 3px #c2d9ab, 0 9px 28px #274c2114; } }

/* "Discussing" ribbon: the View action jumps back to the analysis. */
.context-ribbon { gap:8px; }
.ribbon-view { border:1px solid #c7d9bd; background:#fff; color:var(--brand-900); border-radius:8px; padding:5px 10px; font-size:10px; font-weight:600; transition:background 140ms var(--motion-out),transform 120ms var(--motion-out); }
.ribbon-view:hover { background:#f0f5eb; }
.ribbon-view:active { transform:scale(.96); }

/* Follow-up suggestions above the composer (the archive's follow-up row). */
.followup-row { flex-wrap:nowrap; overflow-x:auto; padding:0 2px 10px; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent); }
.followup-row::-webkit-scrollbar { display:none; }
.followup-row button { flex:0 0 auto; white-space:nowrap; font-size:11px; line-height:1.4; transition:background 140ms var(--motion-out),transform 120ms var(--motion-out); animation:risk-content-in 160ms var(--motion-out) both; }
.followup-row button:active { transform:scale(.97); }
@media (prefers-reduced-motion:reduce) { .message-group--risk.is-spotlit .classification-message, .followup-row button { animation:none!important; } }

/* "↓ Latest" sits just above the footer (suggestions, ribbon and composer change its height). */
.chat-footer { position:relative; }
.chat-footer .scroll-bottom-btn { bottom:auto; top:-40px; z-index:2; }

/* Once the discussion has started, the suggestions live above the composer only. */
.message-group--risk.has-discussion .analysis-followups { display:none; }

/* ---------- motion polish ---------- */
/* Jump-to-latest toggles while scrolling: it fades and rises instead of popping in and out.
   `translate` (not transform) keeps it centred under the global button press scale. */
.scroll-bottom-btn { display:block; transform:none; translate:-50% 6px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 160ms var(--motion-out),translate 160ms var(--motion-out),transform 120ms var(--motion-out),visibility 0s 160ms; }
.scroll-bottom-btn.visible { translate:-50% 0; opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
/* Copy / retry under an answer: soft feedback instead of an instant swap. */
.answer-actions button { transition:background 150ms var(--motion-out),color 150ms var(--motion-out),transform 120ms var(--motion-out); }
.answer-actions button:hover { color:var(--brand-900); }
/* "Discussing" ribbon rises out of the composer it belongs to. */
.context-ribbon:not([hidden]) { animation:ribbon-in 200ms var(--motion-out) backwards; }
@keyframes ribbon-in { from { opacity:0; transform:translateY(6px); } }
/* Starter cards arrive one after another (welcome screen, category switch). `backwards` only,
   so the hover lift keeps its own transition once they have landed. */
.starter-card { animation:starter-in 220ms var(--motion-out) backwards; }
.starter-card:nth-child(2) { animation-delay:40ms; }
.starter-card:nth-child(3) { animation-delay:80ms; }
.starter-card:nth-child(4) { animation-delay:120ms; }
.starter-card:nth-child(5) { animation-delay:160ms; }
.starter-card:nth-child(n+6) { animation-delay:200ms; }
@keyframes starter-in { from { opacity:0; transform:translateY(6px); } }
@media (prefers-reduced-motion:reduce) {
  .scroll-bottom-btn,.scroll-bottom-btn.visible { translate:-50% 0; transition:opacity 120ms ease,visibility 0s; }
  .context-ribbon:not([hidden]),.starter-card { animation:risk-fade-in 120ms ease backwards!important; animation-delay:0s!important; }
  .answer-actions button { transition:background 120ms ease,color 120ms ease; }
}
