.conversation-metrics { display:flex; align-items:center; gap:12px; flex:none; border-bottom:1px solid var(--line); padding:8px 18px; background:var(--white); }
.conversation-meta { display:flex; flex:1; min-width:0; flex-direction:column; gap:4px; }
.chat-stream { display:inline-flex; align-items:center; gap:6px; flex:none; color:var(--muted); font-size:10px; }
.chat-stream i { width:5px; height:5px; border-radius:50%; background:var(--muted); }
.chat-stream[data-state=connected] i { background:var(--green); box-shadow:0 0 0 3px #466b4e0b; }
.chat-model { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:10px; }
.chat-context { display:flex; flex:none; width:142px; min-height:32px; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--muted); text-align:left; font-size:10px; }
.chat-context>span:first-child,.chat-context>span:last-child { display:flex; flex:none; }
.chat-context .icon { width:13px; height:13px; }
.chat-context>span:nth-child(2) { flex:none; font-weight:500; color:var(--ink); }
.chat-context>span:last-child { margin-left:auto; }
.chat-context[aria-expanded=true]>span:last-child { transform:rotate(180deg); }
.chat-context meter { flex:1; min-width:30px; max-width:38px; height:5px; margin-left:auto; border:0; appearance:none; background:var(--line); border-radius:5px; }
.chat-context meter::-webkit-meter-bar { background:var(--line); border:0; height:5px; border-radius:5px; }
.chat-context meter::-webkit-meter-optimum-value { background:var(--green); border-radius:5px; }
.chat-context meter::-moz-meter-bar { background:var(--green); }
.chat-context[data-level=low] meter::-webkit-meter-optimum-value { background:var(--signal); }
.context-panel { flex:none; max-height:240px; overflow:auto; padding:16px; border-bottom:1px solid var(--line); background:var(--paper); }
.context-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.context-panel-heading strong { font-size:12px; font-weight:600; }
.context-panel-heading span { color:var(--muted); font-size:9px; }
.context-panel dl { margin:0; }
.context-panel dl>div { display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:11px; }
.context-panel dt { color:var(--muted); }
.context-panel dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.context-panel p { margin:12px 0 8px; font-size:10px; line-height:1.65; color:var(--muted); }
.context-panel small { font-size:9px; color:var(--muted); }
.history-load { flex:none; width:100%; min-height:36px; padding:8px 12px; border-bottom:1px solid var(--line); background:transparent; color:var(--muted); font-size:10px; }
.history-load:hover { background:var(--paper); color:var(--ink); }
.chat-messages { padding:24px 20px 16px; overflow-anchor:none; }
.message { margin-bottom:32px; }
.message-header { gap:7px; margin-bottom:9px; }
.message-header time { margin-left:auto; font-variant-numeric:tabular-nums; font-size:9px; }
.message-avatar { display:grid; place-items:center; flex:none; width:23px; height:23px; border-radius:7px; color:var(--ink); background:var(--paper); border:1px solid var(--line); font-size:9px; font-weight:600; }
.message-avatar .icon { width:13px; height:13px; }
.message.user .message-avatar { background:var(--white); }
.message.user { margin-left:22px; padding:12px 14px; border-color:#e2e3db; }
.message-body { white-space:normal; font-size:13px; line-height:1.85; }
.message-body p,.timeline-body p { margin:0; white-space:pre-wrap; }
.paragraph-gap { height:9px; }
.message-body h4,.timeline-body h4 { margin:12px 0 5px; font-size:12px; font-weight:600; }
.message-body ul,.timeline-body ul { margin:7px 0; padding-left:18px; }
.message-body li { margin:4px 0; }
.message-body a,.timeline-body a { color:var(--signal); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.message-body code,.timeline-body code { padding:1px 4px; background:var(--paper); border:1px solid var(--line); border-radius:4px; font:10px/1.7 ui-monospace,monospace; }
.code-block { margin:12px 0; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
.code-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:4px 10px; color:var(--muted); border-bottom:1px solid var(--line); font-size:9px; }
.copy-code { min-height:28px; padding:3px 5px; color:var(--muted); background:transparent; font-size:9px; }
.copy-code:hover { color:var(--ink); }
.code-block pre,.message .code-block pre { margin:0; padding:10px; border:0; border-radius:0; white-space:pre; font:11px/1.7 ui-monospace,monospace; }
.code-block pre code { border:0; padding:0; background:none; font:inherit; }
.message[data-status=running] .message-body>:last-child::after { content:""; display:inline-block; width:5px; height:12px; margin-left:4px; border-radius:1px; background:var(--signal); vertical-align:middle; animation:stream-cursor 1.1s ease-in-out infinite; }
.message-status.running { color:var(--green); }
.message-status.queued { color:var(--muted); }
.timeline-detail { margin:0 0 16px; border:1px solid var(--line); border-radius:9px; background:var(--white); min-width:0; }
.timeline-detail summary { display:flex; align-items:center; gap:8px; min-height:52px; padding:10px; list-style:none; cursor:pointer; }
.timeline-detail summary::-webkit-details-marker { display:none; }
.timeline-detail summary:hover { background:var(--paper); border-radius:9px; }
.timeline-glyph { display:grid; place-items:center; width:25px; height:25px; flex:none; color:var(--muted); }
.timeline-glyph .icon { width:16px; height:16px; }
.timeline-label { display:flex; flex:1; min-width:0; flex-direction:column; gap:4px; }
.timeline-label strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:550; }
.timeline-label>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font:9px/1.5 var(--font-body); }
.timeline-state { flex:none; color:var(--muted); font-size:8px; font-variant-numeric:tabular-nums; }
.timeline-detail[data-status=running] .timeline-state,.timeline-detail[data-status=inProgress] .timeline-state { color:var(--green); }
.timeline-detail[data-status=failed] .timeline-state { color:var(--signal); }
.timeline-detail[data-status=running] .timeline-glyph { color:var(--green); }
.timeline-chevron { display:flex; flex:none; color:var(--muted); }
.timeline-chevron .icon { width:12px; height:12px; }
.timeline-detail[open] .timeline-chevron { transform:rotate(180deg); }
.timeline-body { padding:12px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; line-height:1.8; overflow-wrap:anywhere; }
.timeline-body section+section { margin-top:14px; }
.timeline-body section h4 { margin:0 0 6px; font-size:9px; text-transform:uppercase; letter-spacing:.07em; }
.timeline-body pre { max-height:260px; overflow:auto; margin:0; padding:10px; border-radius:6px; background:var(--paper); color:var(--ink); font:10px/1.7 ui-monospace,monospace; white-space:pre-wrap; overflow-wrap:anywhere; scrollbar-width:thin; }
.timeline-detail.reasoning { background:var(--paper); border-color:transparent; }
.timeline-detail.reasoning .timeline-state { display:none; }
.timeline-event { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:7px; margin:18px 0; font-size:9px; color:var(--muted); }
.timeline-event>span:first-child { display:flex; }
.timeline-event .icon { width:13px; height:13px; }
.timeline-event p { width:100%; margin:0; text-align:center; }
.tool-exit { margin-top:10px!important; font-size:9px; }
.chat-to-bottom { z-index:2; box-shadow:0 3px 18px #2629220c; }
@keyframes stream-cursor { 50% { opacity:.25; } }
@media (prefers-reduced-motion:reduce) { .message[data-status=running] .message-body>:last-child::after { animation:none; } }
@media (max-width:680px) {
  .conversation-metrics { padding:10px 14px; }
  .chat-context { min-height:38px; font-size:11px; }
  .history-load { min-height:44px; font-size:11px; }
  .message-body { font-size:13px; }
  .timeline-label strong { font-size:12px; }
  .timeline-label>span { font-size:10px; }
  .app[data-panel=chat] .session-workspace { flex:1; min-height:0; }
  .app[data-panel=chat] .workspace-grid { min-height:0; }
  .app[data-panel=chat] .chat-panel { height:auto; min-height:0; }
}

/* Keep the conversation in view; compose expands only while writing. */
.chat-heading { min-height:62px; padding:10px 18px; }
.chat-heading .chat-avatar { width:30px; height:30px; border-radius:9px; }
.chat-context>span:first-child { display:none; }
.chat-composer { display:grid; grid-template-columns:minmax(0,1fr) 38px; align-items:end; gap:0 8px; margin:0 12px 12px; padding:7px 8px 7px 12px; border-radius:12px; box-shadow:none; }
.chat-composer textarea { display:block; min-height:40px; max-height:128px; padding:9px 0; line-height:1.55; font-size:13px; }
.composer-footer { display:contents; }
.composer-footer>span { display:none; grid-column:1/-1; grid-row:2; max-width:none; margin-top:5px; padding:0 2px 3px; font-size:9px; }
.chat-composer:focus-within .composer-footer>span { display:block; }
.composer-footer .send-button { grid-column:2; grid-row:1; width:36px; height:36px; margin-bottom:2px; border-radius:9px; }
.tool-batch { margin:4px 0 26px; min-width:0; border-block:1px solid var(--line); }
.tool-batch>summary { display:flex; align-items:center; gap:10px; min-height:55px; padding:12px 3px; list-style:none; cursor:pointer; color:var(--muted); }
.tool-batch>summary::-webkit-details-marker { display:none; }
.tool-batch>summary>span:first-child { display:flex; flex:none; }
.tool-batch>summary .icon { width:15px; height:15px; }
.tool-batch-label { display:flex; flex:1; min-width:0; flex-direction:column; gap:4px; }
.tool-batch-label strong { color:var(--ink); font-size:11px; font-weight:500; }
.tool-batch-label small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.tool-batch-arrow { display:flex; flex:none; }
.tool-batch[open] .tool-batch-arrow { transform:rotate(180deg); }
.tool-batch-items { padding:4px 0 4px 10px; border-left:1px solid var(--line); margin:0 0 14px 6px; }
.tool-batch-items .timeline-detail { margin-bottom:10px; }
@media (min-width:1201px) { .workspace-grid { grid-template-columns:minmax(0,1fr) minmax(380px,37%); gap:22px; } }
@media (min-width:1700px) { .workspace-grid { grid-template-columns:minmax(0,1fr) minmax(430px,33%); } }
@media (max-width:1200px) and (min-width:981px) { .workspace-grid { grid-template-columns:minmax(0,1fr) 340px; } }
@media (max-width:680px) {
  .chat-heading { min-height:60px; padding:9px 16px; }
  .chat-messages { padding:22px 18px 12px; }
  .chat-composer { grid-template-columns:minmax(0,1fr) 44px; margin:0 10px 10px; padding:6px 6px 6px 12px; }
  .chat-composer textarea { min-height:44px; font-size:16px; }
  .composer-footer .send-button { width:44px; height:44px; margin:0; }
  .chat-context { min-height:34px; }
}