:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --bg: #f4f7fc; --panel: #ffffff; --soft: #eef3fb; --line: #dce4f0; --line-strong: #c9d5e6;
  --text: #182236; --muted: #68758c; --accent: #3867e8; --accent2: #2754cf; --accent-soft: #eaf0ff;
  --danger: #cf3f59; --success: #16866b; --warning: #a96500; --shadow: 0 12px 38px rgba(43, 66, 108, .1);
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, textarea, input { font: inherit; }
button { color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; transition: transform .16s ease, border-color .16s ease, color .16s ease, background-color .16s ease, box-shadow .16s ease, opacity .16s ease; }
button:not(:disabled):not(.session-delete):not(.sidebar-backdrop):active { transform: translateY(1px) scale(.985); }
button:focus-visible, textarea:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid rgba(56, 103, 232, .28); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

.app-shell { display: grid; grid-template: calc(60px + var(--safe-top)) minmax(0, 1fr) / 292px minmax(0, 1fr); width: 100%; height: 100dvh; }
.topbar { z-index: 20; grid-column: 1 / -1; display: flex; align-items: center; gap: 11px; min-width: 0; padding: var(--safe-top) 18px 0; border-bottom: 1px solid rgba(209, 219, 234, .9); background: rgba(255, 255, 255, .9); box-shadow: 0 2px 14px rgba(43, 66, 108, .05); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; }
.brand > div { min-width: 0; }
.brand strong, .brand span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand strong { color: #15213a; font-size: 15px; letter-spacing: .01em; }
.brand-mark, .login-logo, .empty-icon { display: grid; place-items: center; flex: none; font-family: ui-monospace, Menlo, monospace; font-weight: 800; color: #fff; background: linear-gradient(145deg, #4e7bf0, #2b55ce); box-shadow: 0 10px 26px rgba(56, 103, 232, .25); }
.brand-mark { width: 35px; height: 35px; border-radius: 11px; }
.connection-status { margin-top: 2px; color: var(--muted); font-size: 11px; }
.connection-status::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #9aa5b5; box-shadow: 0 0 0 3px rgba(154, 165, 181, .12); }
.connection-status.online::before { background: var(--success); box-shadow: 0 0 0 3px rgba(22, 134, 107, .12); }
.connection-status.offline::before { background: var(--danger); box-shadow: 0 0 0 3px rgba(207, 63, 89, .12); }
.icon-button, .text-button, .quiet-button, .danger-quiet, .modal-close { border: 0; background: transparent; cursor: pointer; }
.icon-button { display: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #dbe4f1; border-radius: 13px; color: #324461; background: rgba(255, 255, 255, .82); box-shadow: 0 5px 14px rgba(43, 66, 108, .08); font-size: 20px; }
.icon-button:hover { border-color: #becdec; color: var(--accent2); background: #f7f9ff; box-shadow: 0 7px 18px rgba(43, 66, 108, .12); }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 1px solid #d9e3f2; border-radius: 11px; color: #435573; background: rgba(255, 255, 255, .8); box-shadow: 0 4px 12px rgba(42, 63, 101, .05); font-size: 12px; font-weight: 720; white-space: nowrap; }
.text-button::before { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; color: var(--accent2); background: var(--accent-soft); font-size: 11px; font-weight: 850; }
#runtimeButton::before { content: "◇"; }
#installButton::before { content: "↓"; }
.text-button:hover { border-color: #b9c9eb; color: var(--accent2); background: #fff; box-shadow: 0 7px 18px rgba(42, 63, 101, .09); }

.sidebar { z-index: 10; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: linear-gradient(180deg, #fbfcff 0%, #f6f8fc 100%); }
.sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 17px 13px; }
.sidebar-header h1 { margin: 0; color: #26334c; font-size: 17px; }
.primary-small, .primary-button, .send-button, .allow-button { border: 1px solid rgba(35, 79, 197, .16); border-radius: 13px; color: #fff; background: linear-gradient(135deg, #5b83f2 0%, #3868e7 48%, #2856cf 100%); box-shadow: 0 8px 20px rgba(45, 91, 213, .24), inset 0 1px 0 rgba(255, 255, 255, .22); font-weight: 760; cursor: pointer; }
.primary-small { min-height: 36px; padding: 0 13px; font-size: 13px; }
.primary-small:hover, .primary-button:hover, .send-button:hover { background: linear-gradient(135deg, #668cf5 0%, #3e70ed 48%, #2c59d5 100%); box-shadow: 0 11px 24px rgba(45, 91, 213, .3), inset 0 1px 0 rgba(255, 255, 255, .28); transform: translateY(-1px); }
.session-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px 16px; overscroll-behavior: contain; }
.session-entry { position: relative; margin: 3px 0; }
.session-item { display: block; width: 100%; margin: 0; padding: 11px 58px 11px 12px; overflow: hidden; border: 1px solid transparent; border-radius: 13px; color: var(--text); background: transparent; text-align: left; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.session-item:hover { background: #fff; }
.session-item.active { border-color: #d4dff5; background: #fff; box-shadow: 0 6px 18px rgba(55, 78, 119, .07); }
.session-delete { position: absolute; top: 50%; right: 8px; z-index: 1; display: grid; place-items: center; min-width: 42px; min-height: 30px; padding: 0 8px; transform: translateY(-50%); border: 1px solid transparent; border-radius: 10px; color: #9b6671; background: rgba(255, 255, 255, .45); font-size: 11px; font-weight: 680; cursor: pointer; }
.session-delete:hover, .session-delete:focus-visible { border-color: #efc4cd; color: #bd304b; background: #fff2f4; box-shadow: 0 5px 13px rgba(184, 47, 73, .09); }
.session-delete:active { transform: translateY(calc(-50% + 1px)) scale(.97); }
.session-entry.active .session-delete { color: #b44257; }
.session-title, .session-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-title { font-size: 14px; font-weight: 680; }
.session-meta { margin-top: 4px; color: var(--muted); font-size: 11px; }
.sidebar-actions { display: grid; gap: 7px; padding: 12px 13px calc(14px + var(--safe-bottom)); border-top: 1px solid var(--line); background: rgba(255, 255, 255, .72); }
.quiet-button, .danger-quiet { display: flex; align-items: center; min-height: 39px; padding: 0 12px; border: 1px solid #dce4ef; border-radius: 11px; background: rgba(255, 255, 255, .8); text-align: left; font-size: 12px; font-weight: 670; }
.quiet-button::before, .danger-quiet::before { display: grid; place-items: center; width: 22px; margin-right: 8px; font-size: 15px; }
.quiet-button::before { content: "↗"; } .danger-quiet::before { content: "⌫"; }
.quiet-button { color: #5d6c82; } .danger-quiet { border-color: #f0d7dc; color: #b94359; background: #fffafb; }
.quiet-button:hover { border-color: #c9d5e6; color: #33445f; background: #fff; box-shadow: 0 5px 15px rgba(42, 63, 101, .07); }
.danger-quiet:hover { border-color: #efbcc6; color: #bd304b; background: #fff2f4; box-shadow: 0 5px 15px rgba(184, 47, 73, .08); }
.sidebar-backdrop { display: none; }

.chat-panel { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-width: 0; min-height: 0; background: radial-gradient(circle at 74% -15%, rgba(127, 168, 245, .2), transparent 37%), linear-gradient(180deg, #f8faff 0%, var(--bg) 48%); }
.messages { grid-row: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 36px clamp(18px, 4vw, 48px) 28px; overflow-y: auto; scroll-behavior: smooth; overscroll-behavior: contain; }
.message { display: flex; margin: 0 0 26px; }
.message.assistant { justify-content: center; }
.message.user { justify-content: flex-end; }
.message-bubble { max-width: min(88%, 880px); border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.message.assistant .message-bubble { width: min(100%, 900px); padding: 22px clamp(22px, 4vw, 34px) 28px; border-color: #dbe3ef; box-shadow: 0 14px 44px rgba(42, 63, 101, .08); }
.message.user .message-bubble { max-width: min(72%, 680px); padding: 13px 16px 15px; border-color: transparent; border-bottom-right-radius: 7px; color: #fff; background: linear-gradient(135deg, #5279e8, #3862d8); box-shadow: 0 10px 27px rgba(56, 98, 216, .18); }
.message-header { display: flex; align-items: center; gap: 9px; min-width: 0; margin-bottom: 18px; }
.message-avatar { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 10px; color: #3159c9; background: #e8efff; font: 750 12px/1 ui-monospace, Menlo, monospace; }
.message-label { min-width: 0; color: #26344f; font-size: 13px; font-weight: 760; letter-spacing: .01em; }
.message-time { margin-left: auto; color: #8994a6; font-size: 11px; white-space: nowrap; }
.message.user .message-header { margin-bottom: 8px; }
.message.user .message-avatar { width: 25px; height: 25px; border-radius: 8px; color: #fff; background: rgba(255, 255, 255, .16); font: 700 11px/1 ui-sans-serif, sans-serif; }
.message.user .message-label, .message.user .message-time { color: rgba(255, 255, 255, .76); }
.message-text { color: #222d40; font-size: 16px; line-height: 1.82; letter-spacing: .005em; overflow-wrap: anywhere; }
.message.assistant .message-text { width: 100%; max-width: 76ch; }
.message.user .message-text { color: #fff; font-size: 15px; line-height: 1.66; letter-spacing: 0; }
.message-text > :first-child { margin-top: 0; }
.message-text > :last-child { margin-bottom: 0; }
.message-text p { margin: .8em 0; }
.message-text p + p { margin-top: 1em; }
.message-text ul, .message-text ol { margin: .9em 0; padding: .72em 1em .72em 2.25em; border-radius: 12px; background: #f7f9fd; }
.message-text li { margin: .48em 0; padding-left: .18em; }
.message-text li::marker { color: var(--accent); font-weight: 750; }
.message-text .task-item { display: flex; align-items: flex-start; gap: 8px; margin-left: -1.35em; list-style: none; }
.message-text .task-item input { width: 15px; height: 15px; margin: .38em 0 0; accent-color: var(--accent); }
.message-text h1, .message-text h2, .message-text h3, .message-text h4, .message-text h5, .message-text h6 { color: #15213a; margin: 1.5em 0 .62em; line-height: 1.32; letter-spacing: -.015em; }
.message-text h1 { font-size: 1.62em; }
.message-text h2 { position: relative; padding-left: 14px; border: 0; font-size: 1.32em; }
.message-text h2::before { content: ""; position: absolute; top: .18em; bottom: .18em; left: 0; width: 4px; border-radius: 999px; background: linear-gradient(180deg, #5f84ea, #315bd6); }
.message-text h3 { color: #284784; font-size: 1.15em; }
.message-text strong { color: #0f1f3d; font-weight: 780; }
.message-text em { color: #465873; }
.message-text blockquote { margin: 1.05em 0; padding: .85em 1.05em; border: 1px solid #dce6fa; border-left: 4px solid #6488e8; border-radius: 0 12px 12px 0; color: #405273; background: #f3f7ff; }
.message-text blockquote > :first-child { margin-top: 0; } .message-text blockquote > :last-child { margin-bottom: 0; }
.message-text hr { height: 1px; margin: 1.7em 0; border: 0; background: linear-gradient(90deg, transparent, #cdd8e8 12%, #cdd8e8 88%, transparent); }
.message-text code { padding: .14em .4em; border: 1px solid #dbe4f4; border-radius: 6px; color: #284c9d; background: #f0f4fb; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .92em; }
.code-block { max-width: 100%; margin: 1.2em 0; overflow: hidden; border: 1px solid #24334c; border-radius: 13px; background: #111a2a; box-shadow: 0 9px 26px rgba(22, 34, 54, .1); }
.code-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 39px; padding: 5px 8px 5px 15px; border-bottom: 1px solid #2b3b56; color: #9aa9be; background: #172236; }
.code-language { overflow: hidden; font: 11px/1.2 ui-sans-serif, sans-serif; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.code-copy-button { display: grid; place-items: center; width: 34px; height: 31px; padding: 0; border: 1px solid #445674; border-radius: 9px; color: #dce5f3; background: linear-gradient(180deg, #263650, #1d2b42); box-shadow: 0 4px 10px rgba(5, 12, 24, .18), inset 0 1px 0 rgba(255, 255, 255, .06); font: 17px/1 ui-sans-serif, sans-serif; cursor: pointer; }
.code-copy-button:hover { border-color: #7891be; color: #fff; background: linear-gradient(180deg, #314665, #263753); box-shadow: 0 6px 14px rgba(5, 12, 24, .24); }
.code-copy-button:active { transform: translateY(1px); }
.message-text pre { max-width: 100%; margin: 0; padding: 18px 19px 20px; overflow-x: auto; border: 0; border-radius: 0; color: #edf2fa; background: #111a2a; font-size: 15px; line-height: 1.7; tab-size: 4; white-space: pre; -webkit-overflow-scrolling: touch; }
.message-text pre code { padding: 0; border: 0; color: inherit; background: transparent; font-size: inherit; }
.copy-fallback { position: fixed; top: -1000px; left: -1000px; width: 1px; height: 1px; opacity: 0; }
.message-text table { display: block; width: 100%; max-width: 100%; margin: 1.15em 0; overflow-x: auto; border: 1px solid #d5deeb; border-radius: 12px; border-collapse: separate; border-spacing: 0; background: #fff; box-shadow: 0 5px 18px rgba(48, 69, 104, .05); -webkit-overflow-scrolling: touch; }
.message-text th, .message-text td { min-width: 110px; padding: 10px 12px; border-right: 1px solid #e1e7f0; border-bottom: 1px solid #e1e7f0; text-align: left; vertical-align: top; white-space: normal; }
.message-text th { color: #263653; background: #f4f7fc; font-size: .92em; font-weight: 750; }
.message-text tr:last-child td { border-bottom: 0; } .message-text th:last-child, .message-text td:last-child { border-right: 0; }
.message-text a, .artifact-card a { color: var(--accent2); font-weight: 650; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.message.user .message-text a, .message.user .message-text strong, .message.user .message-text h1, .message.user .message-text h2, .message.user .message-text h3 { color: #fff; }
.message.user .message-text :not(pre) > code { border-color: rgba(255, 255, 255, .24); color: #fff; background: rgba(255, 255, 255, .13); }
.message.user .message-text ul, .message.user .message-text ol { background: rgba(255, 255, 255, .1); }
.message.user .message-text li::marker { color: #fff; }
.message.user .message-text h2::before { background: rgba(255, 255, 255, .7); }

.artifacts { display: grid; gap: 11px; margin-top: 16px; }
.artifact-card { display: grid; grid-template-columns: minmax(0, 140px) 1fr; gap: 12px; padding: 10px; border: 1px solid #d8e1ee; border-radius: 13px; background: #f8faff; }
.artifact-card:not(:has(img)) { grid-template-columns: 1fr; }
.artifact-card img { width: 100%; max-height: 160px; object-fit: contain; border: 1px solid #e1e7f0; border-radius: 9px; background: #fff; }
.artifact-card .artifact-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.artifact-card strong { max-width: 100%; color: #1c2b48; overflow-wrap: anywhere; } .artifact-card small { color: var(--muted); line-height: 1.5; }
.interactive-chart-card { display: block; width: min(100%, 760px); padding: 13px; }
.chart-card-header { margin-bottom: 11px; }
.chart-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.chart-expand-button, .chart-viewer-controls button, .chart-card-actions a, .artifact-meta > a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 12px; border: 1px solid #c7d4ef; border-radius: 11px; color: var(--accent2); background: linear-gradient(180deg, #fff, #f2f6ff); box-shadow: 0 4px 12px rgba(44, 75, 137, .08); font-size: 12px; font-weight: 720; text-decoration: none; cursor: pointer; }
.chart-expand-button::before { content: "↗"; margin-right: 6px; font-size: 13px; }
.chart-expand-button:hover, .chart-viewer-controls button:hover, .chart-card-actions a:hover, .artifact-meta > a:hover { border-color: #9eb4e7; color: #224cc0; background: #edf3ff; box-shadow: 0 7px 16px rgba(44, 75, 137, .12); transform: translateY(-1px); }
.interactive-chart { width: 100%; min-height: 220px; }
.chart-surface { position: relative; width: 100%; overflow: hidden; border: 1px solid #dbe3ee; border-radius: 11px; background: #fff; }
.chart-surface svg { display: block; width: 100%; height: auto; min-height: 220px; touch-action: pan-y; }
.chart-title { fill: #1c2941; font-size: 15px; font-weight: 700; }
.chart-grid { stroke: #e2e8f1; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-axis-text { fill: #718096; font-size: 10px; }
.chart-axis-label { fill: #55647b; font-size: 11px; }
.chart-crosshair { stroke: #506fae; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.chart-overlay { fill: transparent; cursor: crosshair; outline: none; }
.chart-overlay:focus { stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-tooltip { position: absolute; z-index: 2; top: 12px; display: grid; gap: 4px; min-width: 135px; max-width: 240px; padding: 9px 10px; transform: translateX(-50%); border: 1px solid #c9d4e4; border-radius: 10px; color: #26334b; background: rgba(255, 255, 255, .96); box-shadow: 0 10px 28px rgba(42, 61, 94, .16); font-size: 11px; pointer-events: none; }
.chart-tooltip strong { margin-bottom: 2px; }
.chart-tooltip span, .chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-tooltip i, .chart-legend i { width: 8px; height: 8px; flex: none; border-radius: 50%; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 9px; color: var(--muted); font-size: 11px; }
.chart-status { margin: 0; padding: 60px 12px; color: var(--muted); text-align: center; }
.chart-status.error { color: var(--danger); }
.chart-viewer { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: max(10px, var(--safe-top)) max(10px, env(safe-area-inset-right)) max(10px, var(--safe-bottom)) max(10px, env(safe-area-inset-left)); background: rgba(34, 45, 67, .45); backdrop-filter: blur(10px); }
.chart-viewer-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(1400px, 100%); height: min(920px, 100%); overflow: hidden; border: 1px solid #d7e0ed; border-radius: 17px; background: #f7f9fd; box-shadow: 0 28px 90px rgba(30, 47, 78, .25); }
.chart-viewer-toolbar { z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 11px 13px; border-bottom: 1px solid var(--line); background: #fff; }
.chart-viewer-toolbar > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-viewer-controls { display: flex; align-items: center; gap: 6px; flex: none; }
.chart-viewer-controls button { min-width: 38px; }
.chart-viewer-controls button:last-child { border-color: #ead1d7; color: #b43d54; background: #fff7f8; }
.chart-zoom-value { min-width: 44px; color: var(--muted); font: 12px ui-monospace, Menlo, monospace; text-align: center; }
.chart-viewer-viewport { min-width: 0; min-height: 0; padding: 12px; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.chart-viewer-canvas { max-width: none; }
.chart-viewer .chart-surface svg { touch-action: pan-x pan-y; }
.empty-state { grid-row: 1; align-self: center; justify-self: center; max-width: 490px; padding: 34px; color: var(--muted); text-align: center; }
.empty-state h2 { margin: 20px 0 8px; color: #1f2c46; font-size: 22px; }
.empty-state p { margin: 0; line-height: 1.65; }
.empty-icon { width: 68px; height: 68px; margin: 0 auto; border-radius: 21px; font-size: 25px; }

.execution-panel { grid-row: 2; width: min(920px, calc(100% - 24px)); max-height: min(62dvh, 650px); margin: 0 auto 9px; overflow: hidden; border: 1px solid #d3deed; border-radius: 16px; background: rgba(255, 255, 255, .97); box-shadow: 0 -8px 34px rgba(50, 73, 113, .1); backdrop-filter: blur(16px); }
.execution-summary { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 14px; border: 0; background: linear-gradient(90deg, #fbfcff, #f1f5fd); text-align: left; cursor: pointer; }
.execution-summary::after { content: "⌄"; display: grid; place-items: center; width: 24px; height: 24px; flex: none; border: 1px solid #d7e1ef; border-radius: 8px; color: #64748e; background: #fff; font-size: 15px; transition: transform .18s ease, color .18s ease, border-color .18s ease; }
.execution-summary[aria-expanded="true"]::after { transform: rotate(180deg); }
.execution-summary:hover { background: #edf3fc; }
.execution-summary:hover::after { border-color: #aec0e8; color: var(--accent2); }
.execution-heading { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.execution-heading strong { color: #26334c; }
.execution-heading small { margin-top: 2px; color: var(--muted); }
.execution-state { padding: 4px 8px; border-radius: 999px; color: var(--warning); background: #fff3dc; font-size: 11px; font-weight: 700; }
.execution-state.completed { color: var(--success); background: #e8f7f2; } .execution-state.failed, .execution-state.incomplete, .execution-state.interrupted { color: var(--danger); background: #fff0f2; }
.run-elapsed { color: var(--muted); font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.spinner { width: 15px; height: 15px; flex: none; border: 2px solid #c5d0e0; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.execution-body { display: grid; grid-template-rows: auto auto auto minmax(120px, 1fr) auto auto; gap: 10px; max-height: calc(min(62dvh, 650px) - 52px); padding: 12px 14px 14px; }
.execution-panel.collapsed .execution-body { display: none; }
.execution-note { margin: 0; color: #62718a; font-size: 12px; }
.execution-metrics { display: flex; flex-wrap: wrap; gap: 7px 16px; color: var(--muted); font-size: 11px; }
.execution-metrics b { color: #26334c; }
.timeline-filters { display: flex; gap: 7px; overflow-x: auto; padding: 2px 1px 5px; }
.timeline-filters button { min-height: 31px; padding: 0 12px; border: 1px solid #dce4ef; border-radius: 999px; color: #66758c; background: rgba(255, 255, 255, .9); box-shadow: 0 2px 7px rgba(42, 63, 101, .04); font-size: 11px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.timeline-filters button:hover { border-color: #bdcae1; color: #3e557c; background: #f9fbff; }
.timeline-filters button.active { border-color: #9eb4ea; color: #244fc7; background: linear-gradient(180deg, #f1f5ff, #e6eeff); box-shadow: 0 4px 11px rgba(56, 103, 232, .12), inset 0 1px 0 #fff; font-weight: 760; }
.timeline-scroll { position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.execution-list { display: grid; gap: 9px; margin: 0; padding: 2px 2px 12px; list-style: none; }
.timeline-empty { padding: 18px 10px; color: var(--muted); text-align: center; font-size: 12px; }
.timeline-item { display: grid; grid-template-columns: 24px 1fr; gap: 8px; min-width: 0; }
.timeline-marker { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #4866a9; background: #e5ecfa; font-size: 12px; font-weight: 800; }
.timeline-item.success .timeline-marker { color: #fff; background: var(--success); } .timeline-item.failed .timeline-marker { color: #fff; background: var(--danger); }
.timeline-item.failed.recovered .timeline-marker { color: #42639f; background: #dfe8f8; }
.timeline-item.failed.recovered .timeline-heading strong { color: #52627a; }
.timeline-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.timeline-heading strong { color: #29364f; font-size: 13px; } .timeline-heading time, .timeline-item small { color: var(--muted); font-size: 10px; }
.timeline-item p { margin: 3px 0; color: #536178; font-size: 12px; overflow-wrap: anywhere; }
.timeline-item details { margin-top: 4px; color: var(--muted); font-size: 11px; }
.timeline-item dl, .approval-card dl, .runtime-details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 10px; margin: 7px 0; }
.timeline-item dt, .timeline-item dd, .approval-card dt, .approval-card dd, .runtime-details dt, .runtime-details dd { margin: 0; overflow-wrap: anywhere; }
.timeline-item summary { width: max-content; max-width: 100%; padding: 3px 0; color: var(--accent2); cursor: pointer; }
.tool-debug { margin-top: 8px; padding: 10px; overflow: hidden; border: 1px solid #d7e1ef; border-radius: 10px; background: #f7f9fd; color: #40506b; }
.tool-debug .debug-note, .tool-debug .debug-error { margin: 0 0 8px; font-size: 11px; }
.tool-debug .debug-note { color: var(--muted); } .tool-debug .debug-error { color: var(--danger); }
.tool-debug .debug-grid { grid-template-columns: max-content minmax(0, 1fr); margin: 0 0 9px; }
.tool-debug .debug-grid dt { color: var(--muted); } .tool-debug .debug-grid dd { color: #28364e; }
.tool-debug .debug-title { display: block; margin: 9px 0 5px; color: #25334d; font-size: 11px; }
.tool-debug .debug-size { display: block; margin: -2px 0 5px; color: var(--muted); }
.tool-debug .debug-output { max-width: 100%; max-height: 280px; margin: 0; padding: 10px; overflow: auto; border: 1px solid #26354e; border-radius: 8px; background: #111a29; color: #e3e9f2; font: 10.5px/1.48 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-overflow-scrolling: touch; }
.tool-debug .debug-actions { margin: 0; padding-left: 21px; color: #3d4b61; }
.latest-button { position: sticky; bottom: 4px; display: block; min-height: 34px; margin: 0 auto; padding: 0 14px; border: 1px solid #aebfe7; border-radius: 999px; color: var(--accent2); background: rgba(255, 255, 255, .96); box-shadow: 0 7px 18px rgba(40, 70, 130, .14); font-size: 11px; font-weight: 720; cursor: pointer; backdrop-filter: blur(10px); }
.latest-button::before { content: "↓"; margin-right: 6px; }
.approval-card { padding: 12px; border: 1px solid #efd18a; border-radius: 12px; background: #fff9eb; }
.approval-header { display: flex; justify-content: space-between; color: var(--warning); }
.approval-card dl { font-size: 12px; } .approval-card dt { color: var(--muted); } .approval-card dd { font-family: ui-monospace, Menlo, monospace; }
.approval-scope-note { margin: 9px 0 0; color: #7a6642; font-size: 11px; line-height: 1.5; }
.approval-actions, .execution-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; }
.allow-button, .allow-task-button, .deny-button, .stop-button, .retry-button { display: inline-flex; align-items: center; justify-content: center; min-height: 39px; padding: 0 14px; border-radius: 11px; font-size: 12px; font-weight: 740; cursor: pointer; }
.allow-button::before, .deny-button::before, .stop-button::before, .retry-button::before { margin-right: 7px; font-size: 14px; }
.allow-button::before { content: "✓"; } .deny-button::before { content: "×"; } .stop-button::before { content: "■"; font-size: 10px; } .retry-button::before { content: "↻"; }
.allow-button { border-color: rgba(18, 116, 87, .18); background: linear-gradient(135deg, #28a47c, #14785d); box-shadow: 0 8px 18px rgba(22, 134, 107, .22), inset 0 1px 0 rgba(255, 255, 255, .2); }
.allow-task-button { border: 1px solid #b8c8eb; color: var(--accent2); background: #f4f7ff; }
.allow-button:hover { background: linear-gradient(135deg, #2aae83, #168164); box-shadow: 0 10px 22px rgba(22, 134, 107, .28); transform: translateY(-1px); }
.deny-button, .stop-button { border: 1px solid #edbcc5; color: #b82f49; background: linear-gradient(180deg, #fff, #fff2f4); box-shadow: 0 4px 11px rgba(184, 47, 73, .07); }
.retry-button { border: 1px solid #b8c8eb; color: var(--accent2); background: linear-gradient(180deg, #fff, #eef3ff); box-shadow: 0 4px 11px rgba(45, 86, 190, .09); }
.deny-button:hover, .stop-button:hover { border-color: #e49baa; background: #ffecef; box-shadow: 0 7px 16px rgba(184, 47, 73, .12); }
.retry-button:hover { border-color: #97afe2; background: #e7efff; box-shadow: 0 7px 16px rgba(45, 86, 190, .14); }

.composer { grid-row: 3; display: grid; gap: 8px; padding: 9px clamp(12px, 3vw, 24px) calc(11px + var(--safe-bottom)); border-top: 1px solid rgba(212, 222, 236, .9); background: rgba(255, 255, 255, .92); box-shadow: 0 -5px 22px rgba(51, 73, 111, .05); backdrop-filter: blur(16px); }
.composer.dragging-files { background: #edf3ff; box-shadow: inset 0 0 0 2px #8da9eb, 0 -5px 22px rgba(51, 73, 111, .05); }
.composer-row { display: flex; align-items: flex-end; gap: 10px; width: min(920px, 100%); margin: auto; }
.file-mode { display: flex; align-items: center; gap: 6px; width: min(920px, 100%); margin: auto; color: var(--muted); font-size: 12px; }
.file-mode input { width: 15px; height: 15px; accent-color: var(--accent); }
.attachment-tray { display: flex; gap: 8px; width: min(920px, 100%); margin: auto; padding: 2px 0; overflow-x: auto; scrollbar-width: thin; }
.attachment-chip { display: grid; grid-template-columns: 36px minmax(90px, 180px) 26px; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 46px; padding: 5px 6px; border: 1px solid #d8e1ee; border-radius: 12px; background: #f8faff; }
.attachment-chip img, .attachment-file-icon { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.attachment-file-icon { display: grid; place-items: center; color: #4565ac; background: #e7eefc; font-size: 9px; font-weight: 800; }
.attachment-chip-text { display: grid; min-width: 0; gap: 2px; }
.attachment-chip-text strong { overflow: hidden; color: #2b3952; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.attachment-chip-text small { color: #7b8799; font-size: 10px; }
.attachment-remove { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; color: #8c6270; background: transparent; font-size: 18px; cursor: pointer; }
.attachment-remove:hover { color: #b8344d; background: #fbecef; }
.attachment-button { display: grid; flex: 0 0 auto; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid #d1dbea; border-radius: 12px; color: #52647f; background: #f5f7fa; cursor: pointer; }
.attachment-button:hover { border-color: #b4c4df; color: #315fd6; background: #edf3ff; }
.attachment-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.composer textarea { flex: 1; min-height: 46px; max-height: 180px; resize: none; padding: 12px 14px; border: 1px solid #cfd9e8; border-radius: 15px; color: var(--text); background: #fff; box-shadow: inset 0 1px 2px rgba(34, 51, 82, .03); line-height: 1.45; }
.composer textarea::placeholder { color: #929daf; }
.composer textarea:focus { border-color: #8ba8ec; }
.send-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 86px; min-height: 46px; padding: 0 15px; }
.send-button::after { content: "↑"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 8px; color: #315bd6; background: rgba(255, 255, 255, .92); font-size: 14px; font-weight: 900; }
.input-artifact { border-color: #d9e2ef; background: #f9fbfe; }
button:disabled, textarea:disabled, input:disabled { cursor: not-allowed; opacity: .46; filter: saturate(.65); box-shadow: none; transform: none !important; }

.modal-layer { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: calc(18px + var(--safe-top)) 18px calc(18px + var(--safe-bottom)); background: rgba(42, 55, 79, .38); backdrop-filter: blur(10px); }
.modal-card, .sheet { position: relative; width: min(440px, 100%); padding: 25px; border: 1px solid #d8e1ee; border-radius: 21px; background: #fff; box-shadow: 0 30px 80px rgba(38, 55, 86, .22); }
.login-logo { width: 57px; height: 57px; border-radius: 18px; }
.modal-card h2, .sheet h2 { margin: 15px 0 8px; color: #1d2a43; }
.modal-card p, .sheet p { color: var(--muted); line-height: 1.6; }
.modal-card form { display: grid; gap: 9px; }
.modal-card input { width: 100%; padding: 12px; border: 1px solid #cbd7e8; border-radius: 11px; color: var(--text); background: #f9fbfe; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; padding: 0 16px; }
.primary-button::before { content: "✓"; display: grid; place-items: center; width: 21px; height: 21px; margin-right: 8px; border-radius: 7px; color: #315bd6; background: rgba(255, 255, 255, .92); font-size: 12px; }
.form-error { min-height: 1.2em; color: var(--danger) !important; }
.modal-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #dce4ef; border-radius: 12px; color: #68758b; background: #f8faff; box-shadow: 0 4px 12px rgba(42, 63, 101, .06); font-size: 22px; line-height: 1; }
.modal-close:hover { border-color: #c4d0e2; color: #33445f; background: #fff; box-shadow: 0 6px 16px rgba(42, 63, 101, .1); }
.runtime-details dt { color: var(--muted); } .runtime-details dd { font-family: ui-monospace, Menlo, monospace; }
.sheet { position: fixed; z-index: 60; right: max(14px, env(safe-area-inset-right)); bottom: calc(14px + var(--safe-bottom)); }
.update-banner { position: fixed; z-index: 70; top: calc(70px + var(--safe-top)); left: 50%; display: flex; align-items: center; gap: 12px; padding: 9px 14px; transform: translateX(-50%); border: 1px solid #b8c9ed; border-radius: 999px; color: #334a7d; background: #fff; box-shadow: var(--shadow); }
.update-banner button { min-height: 30px; padding: 0 11px; border: 1px solid #b8c9ed; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #4774ed, #315bd6); box-shadow: 0 5px 12px rgba(56, 103, 232, .18); font-size: 12px; font-weight: 740; cursor: pointer; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: calc(92px + var(--safe-bottom)); max-width: calc(100% - 30px); padding: 11px 15px; transform: translateX(-50%); border: 1px solid #cdd8e7; border-radius: 12px; color: #25334c; background: #fff; box-shadow: var(--shadow); text-align: center; }

.offline-page { display: grid; place-items: center; min-height: 100dvh; padding: 24px; overflow: auto; background: radial-gradient(circle at 50% 0, #e6eeff, transparent 42%), var(--bg); }
.offline-page main { width: min(460px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.offline-page h1 { margin: 20px 0 8px; color: #1e2b45; font-size: 23px; }
.offline-page p { margin: 0 0 20px; color: var(--muted); line-height: 1.65; }
.offline-page a { display: inline-block; padding: 10px 16px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #4774ed, #315bd6); box-shadow: 0 7px 18px rgba(56, 103, 232, .2); font-weight: 700; text-decoration: none; }

/* Refined light controls: restrained color, quieter depth, consistent geometry. */
.text-button::before, .quiet-button::before, .danger-quiet::before, .chart-expand-button::before,
.latest-button::before, .allow-button::before, .deny-button::before, .stop-button::before,
.retry-button::before, .send-button::after, .primary-button::before { display: none; content: none; }
.icon-button { border-color: transparent; border-radius: 10px; color: #3d4b61; background: #f3f6fa; box-shadow: none; }
.icon-button:hover { border-color: transparent; color: #244fc7; background: #e9effb; box-shadow: none; }
.text-button { gap: 0; min-height: 34px; padding: 0 11px; border: 0; border-radius: 9px; color: #4e5d73; background: #f3f6fa; box-shadow: none; font-size: 12px; font-weight: 650; }
.text-button:hover { border-color: transparent; color: #244fc7; background: #e9effb; box-shadow: none; }
.primary-small, .primary-button, .send-button { border: 0; border-radius: 10px; background: #3f6fe8; box-shadow: 0 4px 11px rgba(51, 96, 213, .2); font-weight: 700; }
.primary-small { min-height: 34px; padding: 0 13px; }
.primary-small:hover, .primary-button:hover, .send-button:hover { background: #315fd6; box-shadow: 0 5px 13px rgba(51, 96, 213, .24); transform: none; }
.session-delete { min-width: 40px; min-height: 28px; border: 0; border-radius: 8px; color: #9e6973; background: transparent; font-weight: 620; }
.session-delete:hover, .session-delete:focus-visible { border-color: transparent; color: #bf3f57; background: #fceff2; box-shadow: none; }
.sidebar-actions { gap: 2px; padding-top: 9px; background: rgba(255, 255, 255, .65); }
.quiet-button, .danger-quiet { min-height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; font-weight: 620; }
.quiet-button { color: #69758a; }
.danger-quiet { color: #b34b5e; background: transparent; }
.quiet-button:hover { border-color: transparent; color: #3e4c62; background: #edf1f7; box-shadow: none; }
.danger-quiet:hover { border-color: transparent; color: #bd304b; background: #fceff2; box-shadow: none; }
.code-copy-button { width: 33px; height: 30px; border-color: #3d4d68; border-radius: 8px; background: #223149; box-shadow: none; }
.code-copy-button:hover { border-color: #62799f; background: #2c3e5b; box-shadow: none; }
.chart-expand-button, .chart-viewer-controls button, .chart-card-actions a, .artifact-meta > a { min-height: 34px; padding: 0 11px; border-color: #d1dbea; border-radius: 9px; color: #365daf; background: #fff; box-shadow: none; font-weight: 650; }
.chart-expand-button:hover, .chart-viewer-controls button:hover, .chart-card-actions a:hover, .artifact-meta > a:hover { border-color: #aebfdf; color: #244fc7; background: #f2f6fd; box-shadow: none; transform: none; }
.chart-viewer-controls button:last-child { border-color: #e7d3d8; color: #ab4558; background: #fff; }
.execution-summary { min-height: 50px; background: #f7f9fc; }
.execution-summary::after { width: 22px; height: 22px; border: 0; border-radius: 0; color: #728096; background: transparent; font-size: 16px; }
.execution-summary:hover { background: #f0f4f9; }
.execution-summary:hover::after { border-color: transparent; color: #365daf; }
.timeline-filters { gap: 6px; }
.timeline-filters button { min-height: 29px; padding: 0 11px; border-color: transparent; color: #68758b; background: #f1f4f8; box-shadow: none; font-weight: 620; }
.timeline-filters button:hover { border-color: transparent; color: #405370; background: #e9eef5; }
.timeline-filters button.active { border-color: transparent; color: #2e59c7; background: #e6edfc; box-shadow: none; font-weight: 700; }
.latest-button { min-height: 32px; border-color: #ccd7e8; color: #365daf; box-shadow: 0 3px 9px rgba(40, 70, 130, .09); font-weight: 650; }
.allow-button, .allow-task-button, .deny-button, .stop-button, .retry-button { min-height: 37px; padding: 0 13px; border-radius: 9px; font-weight: 680; }
.allow-button { border: 0; background: #1d8b6c; box-shadow: 0 4px 10px rgba(22, 134, 107, .16); }
.allow-button:hover { background: #14785d; box-shadow: 0 4px 11px rgba(22, 134, 107, .2); transform: none; }
.allow-task-button { border-color: #b8c8e6; color: #3159bd; background: #fff; box-shadow: none; }
.allow-task-button:hover { border-color: #99add8; color: #244fc7; background: #edf3ff; }
.deny-button, .stop-button { border-color: #e8c9d0; color: #b33f55; background: #fff; box-shadow: none; }
.retry-button { border-color: #c8d4e8; color: #365daf; background: #fff; box-shadow: none; }
.deny-button:hover, .stop-button:hover { border-color: #deb1bb; background: #fdf1f3; box-shadow: none; }
.retry-button:hover { border-color: #aebfdf; background: #f2f6fd; box-shadow: none; }
.send-button { min-width: 74px; min-height: 46px; padding: 0 16px; }
.primary-button { min-height: 44px; }
.modal-close { top: 13px; right: 13px; width: 34px; height: 34px; border: 0; border-radius: 10px; color: #657187; background: #f2f5f9; box-shadow: none; }
.modal-close:hover { border-color: transparent; color: #344258; background: #e8edf4; box-shadow: none; }
.update-banner button { min-height: 29px; border: 0; border-radius: 8px; background: #3f6fe8; box-shadow: none; font-weight: 680; }

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .icon-button { display: grid; }
  .topbar { gap: 6px; padding-left: 8px; padding-right: 10px; }
  .text-button { min-width: 38px; min-height: 38px; padding: 0 10px; font-size: 11px; }
  .text-button::before { display: none; }
  .sidebar { position: fixed; z-index: 30; top: calc(60px + var(--safe-top)); bottom: 0; left: 0; width: min(86vw, 324px); transform: translateX(-105%); box-shadow: 18px 0 50px rgba(34, 51, 82, .16); transition: transform .18s ease; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; z-index: 25; inset: calc(60px + var(--safe-top)) 0 0; display: block; visibility: hidden; border: 0; opacity: 0; background: rgba(40, 51, 73, .34); transition: opacity .18s; }
  .sidebar-backdrop.open { visibility: visible; opacity: 1; }
  .messages { padding: 20px 12px 16px; }
  .message { margin-bottom: 17px; }
  .message-bubble { max-width: 96%; border-radius: 16px; }
  .message.assistant .message-bubble { width: 100%; padding: 18px 16px 22px; }
  .message.user .message-bubble { max-width: 88%; padding: 12px 14px 14px; }
  .message-header { margin-bottom: 15px; }
  .message-text { font-size: 15.5px; line-height: 1.78; }
  .message.user .message-text { font-size: 14.5px; }
  .message-text h1 { font-size: 1.4em; } .message-text h2 { font-size: 1.22em; }
  .message-text ul, .message-text ol { padding: .65em .8em .65em 2em; }
  .message-text pre { padding: 16px 15px 18px; font-size: 14px; line-height: 1.68; }
  .code-toolbar { min-height: 38px; padding-left: 13px; }
  .message-text th, .message-text td { min-width: 100px; padding: 8px 9px; }
  .execution-panel { width: calc(100% - 12px); margin-bottom: 6px; }
  .execution-summary { gap: 7px; padding: 10px; }
  .execution-body { padding: 10px; }
  .artifact-card { grid-template-columns: minmax(0, 96px) 1fr; }
  .interactive-chart-card { padding: 9px; }
  .chart-surface svg { min-height: 190px; }
  .chart-viewer { padding: var(--safe-top) 0 var(--safe-bottom); }
  .chart-viewer-panel { height: 100%; border-right: 0; border-left: 0; border-radius: 0; }
  .chart-viewer-toolbar { align-items: flex-start; flex-direction: column; }
  .chart-viewer-controls { width: 100%; overflow-x: auto; }
  .chart-viewer-controls button { white-space: nowrap; }
  .chart-viewer-viewport { padding: 8px; }
  .send-button { min-width: 68px; width: auto; padding: 0 14px; font-size: 13px; }
  .send-button::after { display: none; content: none; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .app-shell { grid-template-rows: calc(50px + var(--safe-top)) minmax(0, 1fr); }
  .sidebar { top: calc(50px + var(--safe-top)); }
  .execution-panel { max-height: 68dvh; }
  .execution-body { max-height: calc(68dvh - 48px); }
  .composer { padding-top: 5px; padding-bottom: calc(5px + var(--safe-bottom)); }
  .file-mode { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}