/* Consultant geometry owner. Shared sidebar widths live only in navigation.css. */
body.is-chat {
  --chat-column-width: 780px;
  --chat-gutter: 32px;
  --chat-scrollbar-width: 0px;
  --chat-input-min-height: 34px;
  --chat-question-fill: #e8f2ff;
  overflow: hidden;
}
body.is-chat .shell { height:var(--chat-viewport-height,100dvh); min-height:0; overflow:hidden; }
body.is-chat #app { display:flex; flex-direction:column; flex:1 1 auto; width:100%; max-width:none; min-width:0; min-height:0; margin:0; padding:0; overflow:hidden; }
body.is-chat .footer { display:none; }
body.is-chat #app>.page-heading { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:12px; flex:0 0 56px; height:56px; min-height:56px; width:100%; margin:0; padding:6px 24px; }
body.is-chat .page-heading .page-title-copy { min-width:0; flex:1; }
body.is-chat .page-heading h1 { margin:0; font-size:18px; line-height:24px; font-weight:500; letter-spacing:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.is-chat .page-heading .subtitle { display:none; }
body.is-chat .page-heading>.button-row { display:flex; flex:0 0 auto; margin:0; }
body.is-chat [data-action="chat-new"] { box-sizing:border-box; width:224px; max-width:100%; height:44px; min-height:44px; padding:8px 14px; font-size:14px; line-height:20px; border:1px solid var(--color-accent-line); border-radius:8px; background:var(--color-accent-soft); color:var(--color-accent); box-shadow:none; }
body.is-chat [data-action="chat-new"]:hover { border-color:var(--color-accent); background:var(--color-accent-soft); }

/* The scrollport spans the workspace; only its child is a reading column. */
.chat-container { display:flex; flex-direction:column; flex:1 1 auto; width:100%; max-width:none; min-width:0; min-height:0; margin:0; container-type:inline-size; container-name:consultant; }
.chat-thread { position:relative; flex:1 1 auto; width:100%; min-width:0; min-height:0; }
.chat-stream { box-sizing:border-box; position:absolute; inset:0; width:100%; height:100%; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; scrollbar-gutter:stable; padding:16px var(--chat-gutter) 32px; scrollbar-width:thin; scrollbar-color:#cbd2dc transparent; }
.chat-stream:focus-visible { outline:2px solid var(--color-accent-line); outline-offset:-2px; }
.chat-stream::-webkit-scrollbar { width:6px; height:6px; }
.chat-stream::-webkit-scrollbar-track { background:transparent; }
.chat-stream::-webkit-scrollbar-thumb { background:#cbd2dc; border-radius:8px; }
.chat-stream::-webkit-scrollbar-thumb:hover { background:#aab5c4; }
.chat-column,.composer-column { width:100%; max-width:var(--chat-column-width); min-width:0; margin-inline:auto; }
.chat-column { display:flex; flex-direction:column; min-height:100%; }
.chat-column>.messages { display:flex; flex-direction:column; gap:30px; width:100%; min-width:0; padding:0; margin:0; }
.chat-column #agent-run-mount:empty { display:none; }
.chat-column .answer { width:100%; max-width:none; min-width:0; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; font-family:var(--font-ui); font-style:normal; }
.chat-column .answer-head { padding:0 0 12px; border:0; background:transparent; gap:12px; flex-wrap:wrap; }
.chat-column .answer-body { padding:0; font-size:16px; line-height:26px; font-weight:400; letter-spacing:normal; overflow-wrap:anywhere; }
.chat-column .answer p { margin:0 0 14px; }
.chat-column .answer h3 { font-size:18px; line-height:26px; font-weight:500; letter-spacing:normal; margin:0 0 8px; }
.chat-column .dialogue-step,.chat-column .agent-answer-steps>section { margin:24px 0; }
.chat-column .dialogue-step p,.chat-column .agent-answer-steps p,.agent-intro { max-width:none; font-size:16px; line-height:26px; font-weight:400; letter-spacing:normal; }
.chat-column .answer .sources,.chat-column .answer .answer-actions { padding-left:0; padding-right:0; }
.chat-column .user-message { width:fit-content; max-width:75%; min-width:0; align-self:flex-end; margin:0 0 0 auto; padding:12px 16px; border:0; border-radius:22px; background:var(--chat-question-fill); color:var(--color-text); box-shadow:none; font-size:16px; line-height:26px; font-weight:400; overflow-wrap:anywhere; }
.agent-note { display:flex; align-items:flex-start; gap:10px; padding:0; margin:0; font-size:16px; line-height:26px; color:var(--color-muted); }
.agent-note>svg { width:18px; height:18px; margin-top:4px; flex:0 0 18px; color:var(--color-accent); }
.agent-intro { width:100%; min-width:0; margin:0 0 24px; padding:0; }
.agent-intro p { margin:0 0 14px; }
.intro-author { display:flex; align-items:center; gap:9px; margin-bottom:16px; color:var(--color-accent); }
.intro-author b { font-size:13px; font-weight:500; }
.intro-source-link { font-weight:500; font-size:inherit; white-space:normal; text-align:left; }
.intro-scope-hint { color:var(--color-muted); font-size:13px; line-height:20px; }
.agent-intro .dialog-suggestions { justify-content:flex-start; }
.agent-intro .dialog-suggestions .btn { font-weight:400; }
.chat-column>.agent-task { width:100%; min-width:0; margin:24px 0 0; }
.chat-column .agent-task,.chat-column .agent-result { scroll-margin-top:16px; }
.chat-column .agent-plan-details,.chat-column .agent-plan-steps { font-size:14px; line-height:22px; }
.chat-column .table-wrap { display:block; width:100%; max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-x:contain; }
.chat-column .data-table,.chat-column .data-table th,.chat-column .data-table td,.chat-column .data-table td p { font-size:14px; line-height:22px; }
.chat-column .data-table td { white-space:normal; vertical-align:top; overflow-wrap:anywhere; }
.chat-column .data-table td p { margin-top:10px; }
.chat-column .app-result .data-table td,.chat-column .instruction-result .data-table td { min-width:150px; }
.chat-column .answer .inline-citation { display:inline; width:auto; min-height:0; height:auto; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--color-accent); font:inherit; line-height:inherit; letter-spacing:inherit; white-space:normal; text-align:inherit; vertical-align:baseline; cursor:pointer; }
.chat-column .answer .inline-citation:hover { text-decoration:underline; text-underline-offset:3px; }
.chat-column .answer .inline-citation:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
.chat-column .answer>.agent-audit { margin:8px 0 18px; font-size:12px; line-height:18px; }
.chat-column .app-risks p { font-size:16px; line-height:26px; }
.chat-column .app-risks p.tiny { font-size:12px; line-height:18px; }
.chat-to-bottom { position:absolute; z-index:4; bottom:16px; right:max(var(--chat-gutter),calc((100% - var(--chat-column-width) + var(--chat-scrollbar-width)) / 2)); max-width:min(400px,calc(100% - 32px)); min-height:36px; font-size:12px; line-height:18px; white-space:normal; text-align:left; box-shadow:0 3px 12px var(--color-shadow-popup); }
.chat-to-bottom svg { width:15px; height:15px; transform:rotate(90deg); }
.chat-to-bottom span { min-width:0; overflow-wrap:anywhere; }

/* One compact composer with an independently growing textarea. */
.agent-composer-area { box-sizing:border-box; flex:0 0 auto; width:100%; min-width:0; margin:0; padding:8px calc(var(--chat-gutter) + var(--chat-scrollbar-width)) max(24px,env(safe-area-inset-bottom)) var(--chat-gutter); background:var(--color-canvas); }
.composer-note { display:flex; align-items:center; justify-content:center; gap:4px; margin:0 0 8px; min-height:18px; font-size:12px; line-height:18px; color:var(--color-muted); }
.composer { box-sizing:border-box; width:100%; margin:0; padding:12px; border:1px solid var(--color-accent-line); border-radius:26px; background:var(--color-surface); box-shadow:0 3px 14px var(--color-shadow-soft); }
.composer-fieldset { border:0; padding:0; margin:0; min-width:0; }
.composer-fieldset:disabled { opacity:.5; }
.composer textarea { box-sizing:border-box; display:block; width:100%; min-width:0; min-height:var(--chat-input-min-height); height:var(--chat-input-min-height); max-height:min(184px,24dvh); padding:0; margin:0; border:0; outline:0; resize:none; overflow-y:auto; background:transparent; color:var(--color-text); box-shadow:none; font-family:var(--font-ui); font-size:16px; line-height:26px; font-weight:400; }
.composer textarea:focus { outline:0; box-shadow:none; }
.composer textarea::placeholder { color:var(--color-muted); opacity:1; }
.composer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:12px; height:36px; min-height:36px; margin:8px 0 0; padding:0; border:0; }
.composer .agent-send { position:relative; display:inline-flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px; min-width:44px; min-height:44px; margin:-4px -4px -4px 0; padding:0; border:0; border-radius:14px; background:var(--color-agent); color:#fff; box-shadow:none; isolation:isolate; }
.composer .agent-send:hover { background:var(--color-agent-hover); }
.composer .agent-send:disabled { opacity:1; color:var(--color-agent-disabled-ink); background:var(--color-agent-disabled); cursor:not-allowed; }
.composer .agent-send:focus-visible { outline:2px solid var(--color-agent); outline-offset:3px; }
.composer .agent-send>svg { width:21px; height:21px; stroke-width:2.1; }
.composer .agent-stop-square { width:12px; height:12px; border-radius:3px; background:currentColor; }
.agent-scope.scope-inline { position:relative; display:inline-flex; align-items:center; flex:0 1 auto; width:auto; max-width:calc(100% - 56px); min-width:0; height:36px; min-height:36px; gap:7px; margin:0; padding:0 10px; border:1px solid var(--color-accent-line); border-radius:8px; background:var(--color-accent-soft); color:var(--color-accent); font-size:12px; line-height:18px; font-weight:500; text-align:left; box-shadow:none; }
.agent-scope.scope-inline::after { content:""; position:absolute; left:0; right:0; top:-4px; bottom:-4px; }
.agent-scope.scope-inline:hover { border-color:var(--color-accent); background:var(--color-accent-soft); }
.agent-scope.scope-inline:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; }
.agent-scope.scope-inline.needs-selection { border-color:var(--color-warning); background:var(--color-warning-soft); color:var(--color-text); }
.scope-inline>svg { width:16px; height:16px; flex:0 0 16px; }
.scope-prefix { flex:0 0 auto; font-size:12px; }
.scope-inline-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.scope-chevron { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; flex:0 0 16px; margin-left:2px; }
.scope-chevron>svg { display:block; width:16px; height:16px; }
.scope-empty-hint { font-size:12px; line-height:18px; margin:0 0 8px; }

/* Operational stages are visible only while the agent works. */
.agent-progress { width:100%; min-width:0; margin:0; padding:24px 0 8px; }
.agent-progress-head { display:flex; align-items:center; gap:12px; }
.agent-progress-head p { flex:1; margin:0; font-size:16px; line-height:24px; font-weight:500; }
.agent-progress-head>span:last-child { color:var(--color-muted); font-size:12px; font-variant-numeric:tabular-nums; }
.agent-spinner { width:20px; height:20px; flex:0 0 20px; border:2px solid var(--color-border); border-top-color:var(--color-accent); border-radius:50%; animation:agent-spin 1s linear infinite; }
.agent-progress ol { display:grid; gap:12px; list-style:none; margin:16px 0; padding:0; }
.agent-progress li { display:flex; align-items:center; gap:10px; color:var(--color-muted); font-size:14px; line-height:22px; }
.agent-progress li>span:nth-child(2) { flex:1; min-width:0; }
.agent-progress li>span:last-child { font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.run-step-icon { width:23px; height:23px; flex:0 0 23px; border-radius:50%; display:grid; place-items:center; background:var(--color-surface-muted); font-size:12px; }
.run-step-icon svg { width:15px; height:15px; }
.is-running .run-step-icon { background:var(--color-accent-soft); color:var(--color-accent); }
.agent-progress .is-running { color:var(--color-text); }
.is-done .run-step-icon { color:var(--color-success); background:var(--color-success-soft); border:1px solid var(--color-success-line); }
.agent-progress-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.agent-progress-footer small { font-size:12px; line-height:18px; color:var(--color-muted); }

/* Welcome content follows the same column; it is not a separate wide panel. */
.is-welcome .chat-column { justify-content:center; }
.welcome { width:100%; min-width:0; max-width:100%; margin:auto; padding:16px 0 40px; text-align:center; }
.welcome-icon { display:grid; place-items:center; width:44px; height:44px; margin:0 auto 16px; color:var(--color-accent); background:transparent; }
.welcome-icon svg { width:30px; height:30px; }
.welcome h2 { font-size:24px; line-height:32px; font-weight:500; margin:0 0 12px; }
.welcome>p { max-width:580px; margin:0 auto 24px; color:var(--color-muted); font-size:14px; line-height:22px; }
.examples { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0; }
.example { display:flex; flex-direction:column; align-items:flex-start; gap:12px; width:100%; height:100%; min-width:0; min-height:142px; margin:0; padding:16px; text-align:left; border:1px solid var(--color-border); border-radius:12px; background:var(--color-surface); color:var(--color-text); }
.example:hover { border-color:var(--color-accent-line); background:var(--color-accent-soft); }
.example>svg { width:20px; height:20px; color:var(--color-accent); }
.example span { font-size:13px; line-height:20px; }
.example b { display:block; font-size:14px; line-height:20px; font-weight:500; margin-bottom:6px; }
@container consultant (max-width:900px) { .chat-stream { padding-inline:24px; } .agent-composer-area { padding-left:24px; padding-right:calc(24px + var(--chat-scrollbar-width)); } }
@container consultant (max-width:700px) { .examples { grid-template-columns:1fr; } .example { min-height:0; flex-direction:row; gap:12px; padding:14px 16px; } .example>svg { margin-top:2px; } .welcome { padding-block:12px 24px; } .chat-column .user-message { max-width:90%; } }
@container consultant (max-width:620px) { .chat-stream { padding-inline:16px; } .agent-composer-area { padding-left:16px; padding-right:calc(16px + var(--chat-scrollbar-width)); } .chat-column .agent-task .form-grid { grid-template-columns:minmax(0,1fr); } .chat-column .agent-task { padding:16px; } .agent-plan-details { grid-template-columns:1fr; gap:4px; } .agent-plan-details dd { margin-bottom:10px; } }
@container consultant (max-width:400px) { .scope-prefix { display:none; } .welcome h2 { font-size:22px; line-height:30px; } .agent-progress-head { align-items:flex-start; } }
@media(max-width:650px) { body.is-chat #app>.page-heading { padding-inline:8px; gap:8px; } body.is-chat .page-heading>.mobile-menu { display:inline-flex; } body.is-chat .page-heading h1 { font-size:16px; line-height:24px; } body.is-chat [data-action="chat-new"] { width:auto; padding-inline:12px; } .agent-composer-area { padding-bottom:max(16px,env(safe-area-inset-bottom)); } }
@media(max-height:520px) { .composer-note { display:none; } .agent-composer-area { padding-top:4px; padding-bottom:max(8px,env(safe-area-inset-bottom)); } }
@media(prefers-reduced-motion:reduce) { .agent-spinner { animation:none; border-color:var(--color-accent); } .composer .agent-send { transition:none; } }