/* ============================================
   叮当 AI Platform - Main Stylesheet
   ============================================ */

html {
    font-size: clamp(1rem, 0.95rem + 0.05vw, 1.0625rem);
}

:root {
    --sidebar-width: 16.25rem;
    --conversation-max-width: 48rem;
    --composer-min-height: 3.5rem;
    --shell-control-size: 1.75rem;
    --shell-header-height: 3.5rem;

    --surface-canvas: #212121;
    --surface-sidebar: #171717;
    --surface-elevated: #2f2f2f;
    --surface-hover: #2a2a2a;
    --surface-active: #343434;
    --surface-overlay: rgba(0, 0, 0, 0.48);
    --theme-text-primary: #ececec;
    --theme-text-secondary: #b4b4b4;
    --theme-text-tertiary: #8f8f8f;
    --theme-border: rgba(255, 255, 255, 0.10);
    --theme-border-strong: rgba(255, 255, 255, 0.18);
    --theme-focus: #ffffff;
    --theme-accent: #10a37f;
    --theme-accent-contrast: #ffffff;
    --theme-shadow: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.24);
    --theme-motion-fast: 140ms ease;
    --theme-motion-normal: 220ms ease;

    --glass-bg: color-mix(in srgb, var(--surface-canvas) 92%, transparent);
    --glass-border: var(--theme-border);
    --glass-shadow: rgba(0, 0, 0, 0.24);
    --glass-blur: 1.25rem;
    --glass-glow: rgba(0, 212, 255, 0.08);
    --glass-bg-heavy: var(--surface-elevated);
    --glass-bg-light: var(--surface-hover);
    --glass-blur-light: 0.75rem;

    --accent-blue: var(--theme-accent);
    --accent-purple: #a855f7;
    --accent-pink: #f472b6;
    --accent-orange: #fb923c;
    --accent-green: #22d3ee;
    --accent-red: #ef4444;

    --color-success: #22c55e;
    --color-warning: #fb923c;
    --color-error: #ef4444;
    --color-info: var(--theme-accent);

    --text-primary: var(--theme-text-primary);
    --text-secondary: var(--theme-text-secondary);
    --text-tertiary: var(--theme-text-tertiary);

    --bg-gradient-start: var(--surface-canvas);
    --bg-gradient-end: var(--surface-canvas);
    --bg-gradient-accent: var(--surface-elevated);

    --radius-sm: 0.625rem;
    --radius-md: 1rem;
    --radius-lg: 1.375rem;
    --radius-xl: 1.75rem;

    --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
    --font-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Monaco, 'Cascadia Code', Consolas, monospace;

    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
    --spacing-2xl: 2rem;
    --space-1: 0.125rem;
    --space-3: 0.375rem;
    --space-5: 0.625rem;
    --space-7: 0.875rem;
    --space-10: 1.25rem;
    --space-20: 2.5rem;
    --space-24: 3rem;
    --space-32: 4rem;

    --transition-fast: var(--theme-motion-fast);
    --transition-normal: var(--theme-motion-normal);
    --transition-slow: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Neon glow variables */
    --neon-glow-sm: 0 0 0.5rem rgba(0, 212, 255, 0.3);
    --neon-glow-md: 0 0 1.25rem rgba(0, 212, 255, 0.2);
    --neon-glow-lg: 0 0 2.5rem rgba(0, 212, 255, 0.15);
}

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
    --surface-canvas: #ffffff;
    --surface-sidebar: #f9f9f9;
    --surface-elevated: #ffffff;
    --surface-hover: #ececec;
    --surface-active: #e3e3e3;
    --surface-overlay: rgba(15, 23, 42, 0.26);
    --theme-text-primary: #0d0d0d;
    --theme-text-secondary: #5d5d5d;
    --theme-text-tertiary: #7d7d7d;
    --theme-border: rgba(13, 13, 13, 0.10);
    --theme-border-strong: rgba(13, 13, 13, 0.18);
    --theme-focus: #0d0d0d;
    --theme-shadow: 0 0.5rem 1.75rem rgba(15, 23, 42, 0.10);
}

html[data-theme="system"] {
    color-scheme: dark;
}

@media (prefers-color-scheme: light) {
    html[data-theme="system"] {
        color-scheme: light;
        --surface-canvas: #ffffff;
        --surface-sidebar: #f9f9f9;
        --surface-elevated: #ffffff;
        --surface-hover: #ececec;
        --surface-active: #e3e3e3;
        --surface-overlay: rgba(15, 23, 42, 0.26);
        --theme-text-primary: #0d0d0d;
        --theme-text-secondary: #5d5d5d;
        --theme-text-tertiary: #7d7d7d;
        --theme-border: rgba(13, 13, 13, 0.10);
        --theme-border-strong: rgba(13, 13, 13, 0.18);
        --theme-focus: #0d0d0d;
        --theme-shadow: 0 0.5rem 1.75rem rgba(15, 23, 42, 0.10);
    }
}

/* Collaboration cockpit: compact by default, with task dependencies readable at a glance. */
.collaboration-run-card {
    margin: 0 0 var(--spacing-md);
    padding: 0.875rem;
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.09), rgba(168, 85, 247, 0.07));
    box-shadow: inset 0 1px rgba(255,255,255,0.04), var(--neon-glow-sm);
}
.collaboration-run-head { display:flex; justify-content:space-between; gap:0.625rem; align-items:center; }
.collaboration-run-head strong { display:block; font-size:0.875rem; letter-spacing:.01em; }
.collaboration-kicker { display:block; color:var(--accent-blue); font-size:0.625rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:0.125rem; }
.collaboration-count { color:var(--text-primary); background:rgba(0,212,255,.12); border:1px solid rgba(0,212,255,.2); border-radius:6.1875rem; padding:0.1875rem 0.5rem; font:600 0.6875rem var(--font-mono); }
.collaboration-goal { color:var(--text-secondary); font-size:0.75rem; line-height:1.45; margin:0.5625rem 0 0.6875rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.collaboration-task-graph { display:grid; grid-template-columns:1fr 1fr; gap:0.4375rem; position:relative; }
.collaboration-node { min-width:0; text-align:left; color:var(--text-secondary); border:1px solid rgba(148,163,184,.16); background:rgba(10,14,23,.42); border-radius:0.625rem; padding:0.4375rem; transition:var(--transition-normal); }
.collaboration-node i { display:inline-grid; place-items:center; width:1rem; height:1rem; margin-right:0.25rem; border-radius:50%; font-style:normal; font-size:0.6875rem; background:rgba(148,163,184,.17); }
.collaboration-node span { font-size:0.6875rem; color:var(--text-primary); }
.collaboration-node small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.625rem; margin-top:0.25rem; color:var(--text-tertiary); }
.collaboration-node.pending { opacity:.56; border-style:dashed; background:rgba(10,14,23,.24); }
.collaboration-node.pending i { color:var(--text-tertiary); background:rgba(148,163,184,.1); }
.collaboration-node.running { color:var(--text-primary); border-color:rgba(0,212,255,.8); background:linear-gradient(135deg,rgba(0,212,255,.16),rgba(10,14,23,.68)); box-shadow:0 0 1.25rem rgba(0,212,255,.25), inset 0 0 0.875rem rgba(0,212,255,.06); animation:collaboration-pulse 1.35s ease-in-out infinite; }
.collaboration-node.running i { color:#04121c; background:var(--accent-blue); }
.collaboration-node.completed { opacity:.82; border-color:rgba(34,211,238,.38); background:rgba(34,211,238,.06); }
.collaboration-node.completed i { color:#042026; background:var(--color-success); }
.collaboration-node.failed { border-color:rgba(248,113,113,.65); background:rgba(248,113,113,.09); }
.collaboration-node.failed i { background:var(--color-error); color:white; }
.collaboration-node.secretary { grid-column:1 / -1; border-color:rgba(168,85,247,.32); background:linear-gradient(135deg,rgba(168,85,247,.13),rgba(10,14,23,.42)); }
.collaboration-node.secretary.running { border-color:rgba(192,132,252,.9); box-shadow:0 0 1.375rem rgba(168,85,247,.28), inset 0 0 0.875rem rgba(168,85,247,.08); }
.collaboration-node.secretary i { background:rgba(168,85,247,.25); }
.collaboration-flow { margin-top:0.625rem; padding:0.5625rem; border:1px solid rgba(34,211,238,.14); border-radius:0.625rem; background:rgba(2,12,27,.36); }
.collaboration-flow.is-planning { color:var(--text-tertiary); font-size:0.625rem; text-align:center; }
.collaboration-flow-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.4375rem; font-size:0.625rem; color:var(--text-secondary); }
.collaboration-flow-head strong { color:var(--accent-blue); font-weight:600; }
.collaboration-flow-head span { padding:0.125rem 0.375rem; border-radius:6.1875rem; background:rgba(168,85,247,.14); color:#d8b4fe; }
.collaboration-flow-list { display:grid; gap:0.3125rem; }
.collaboration-flow-edge { display:flex; align-items:center; gap:0.3125rem; min-width:0; color:var(--text-tertiary); font-size:0.625rem; }
.collaboration-flow-edge span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:34%; }
.collaboration-flow-edge i { color:rgba(148,163,184,.55); font-style:normal; }
.collaboration-flow-edge b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; color:var(--text-secondary); }
.collaboration-flow-edge.running { color:var(--text-primary); }
.collaboration-flow-edge.running i { color:var(--accent-blue); animation:flow-pulse 1.1s ease-in-out infinite; }
.collaboration-flow-edge.running b { color:#67e8f9; }
.collaboration-flow-edge.completed { opacity:.72; }
.collaboration-flow-edge.completed i { color:var(--color-success); }
.collaboration-dag { overflow:hidden; background:linear-gradient(145deg,rgba(2,12,27,.62),rgba(12,24,47,.36)); }
.dag-head-actions { display:flex; align-items:center; gap:0.375rem; }
.dag-live-state,.dag-version-chip,.dag-fullscreen-btn { border:1px solid rgba(192,132,252,.28); border-radius:62.438rem; background:rgba(168,85,247,.14); color:#d8b4fe; font:600 0.625rem var(--font-mono); }
.dag-live-state { padding:0.1875rem 0.4375rem; }
.dag-version-chip { padding:0.1875rem 0.4375rem; color:#c4b5fd; }
.dag-live-state.is-live { border-color:rgba(34,211,238,.52); background:rgba(34,211,238,.12); color:#a5f3fc; }
.dag-live-state.is-live::before { content:''; display:inline-block; width:0.3125rem; height:0.3125rem; margin-right:0.3125rem; border-radius:50%; background:var(--accent-blue); box-shadow:0 0 0.5rem var(--accent-blue); animation:collaboration-pulse 1.3s ease-in-out infinite; }
.dag-fullscreen-btn { width:1.625rem; height:1.5rem; padding:0; cursor:pointer; font-size:0.9375rem; line-height:1; transition:var(--transition-normal); }
.dag-fullscreen-btn:hover { color:#fff; border-color:var(--accent-blue); background:rgba(0,212,255,.16); box-shadow:var(--neon-glow-sm); }
.dag-version-note { margin:-0.125rem 0 0.5rem; color:var(--text-tertiary); font-size:0.625rem; line-height:1.4; }
.dag-canvas { overflow-x:auto; border:1px solid rgba(34,211,238,.12); border-radius:0.5rem; background:radial-gradient(circle at 18% 10%,rgba(0,212,255,.09),transparent 34%),rgba(2,9,20,.42); outline:none; }
.dag-canvas:focus-visible { box-shadow:0 0 0 0.125rem var(--accent-blue); }
.dag-canvas svg { display:block; min-width:20rem; width:min(100%, max(20rem, var(--dag-natural-width))); min-height:6.5rem; font-family:var(--font-mono); transition:var(--transition-normal); }
.dag-canvas.is-focused svg { min-height:8.625rem; }
.dag-edge { fill:none; stroke:rgba(103,232,249,.36); stroke-width:1.4; }
.dag-edge-active { stroke:var(--accent-blue); stroke-width:1.8; stroke-dasharray:8 7; filter:drop-shadow(0 0 0.1875rem rgba(0,212,255,.6)); animation:dag-flow 1.15s linear infinite; }
.dag-edge-label { fill:#8ea5bf; font-size:0.5rem; font-weight:600; text-anchor:middle; letter-spacing:.02em; }
.dag-node rect { fill:rgba(15,23,42,.94); stroke:rgba(148,163,184,.35); stroke-width:1; transition:var(--transition-normal); }
.dag-node text { fill:var(--text-primary); font-size:0.625rem; pointer-events:none; }
.dag-node .dag-node-state { fill:var(--text-tertiary); font-size:0.5rem; text-transform:uppercase; }
.dag-node.running rect { fill:rgba(0,212,255,.16); stroke:var(--accent-blue); filter:drop-shadow(0 0 0.3125rem rgba(0,212,255,.55)); }
.dag-node.running .dag-node-state { fill:#67e8f9; }
.dag-node.completed rect { fill:rgba(34,211,238,.09); stroke:rgba(34,211,238,.58); }
.dag-node.completed .dag-node-state { fill:var(--color-success); }
.dag-node.failed rect { fill:rgba(248,113,113,.12); stroke:rgba(248,113,113,.8); }
.dag-node.failed .dag-node-state { fill:var(--color-error); }
.dag-node.pending rect { stroke-dasharray:3 2; opacity:.7; }
.dag-node.dag-muted { opacity:.18; }
.dag-node.dag-focus { opacity:1; }
.dag-node.running rect { stroke-width:1.8; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.dag-fullscreen-modal { position:fixed; inset:0; z-index:1300; display:grid; place-items:center; padding:1.25rem; background:rgba(2,9,20,.82); backdrop-filter:blur(0.75rem); }
.dag-fullscreen-dialog { position:relative; width:min(73.75rem,96vw); max-height:92vh; padding:1.25rem; overflow:auto; border:1px solid rgba(34,211,238,.38); background:linear-gradient(145deg,rgba(5,15,31,.98),rgba(7,17,36,.97)); box-shadow:0 1.625rem 5rem rgba(0,0,0,.48),inset 0 1px 0 rgba(196,247,255,.08); }
.dag-fullscreen-dialog .collaboration-dag { margin:0; min-height:27.5rem; }
.dag-fullscreen-dialog .collaboration-flow-head { padding-right:2.375rem; margin-bottom:0.5625rem; }
.dag-fullscreen-dialog .dag-version-note { max-width:82%; color:#94a9c3; font-size:0.75rem; }
.dag-fullscreen-dialog .dag-canvas { position:relative; min-height:26.25rem; overflow:auto; border-color:rgba(34,211,238,.2); background:radial-gradient(circle at 50% 50%,rgba(0,212,255,.11),transparent 37%),linear-gradient(rgba(34,211,238,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.035) 1px,transparent 1px),rgba(2,9,20,.64); background-size:auto,1.75rem 1.75rem,1.75rem 1.75rem,auto; cursor:grab; }
.dag-fullscreen-dialog .dag-canvas.is-panning { cursor:grabbing; user-select:none; }
.dag-fullscreen-dialog .dag-canvas::before { content:''; position:absolute; inset:12% 20%; border-radius:50%; background:rgba(0,212,255,.08); filter:blur(2.75rem); pointer-events:none; animation:dag-ambient 4.5s ease-in-out infinite alternate; }
.dag-fullscreen-dialog .dag-canvas svg { position:relative; min-width:47.5rem; min-height:26.25rem; animation:dag-reveal .46s cubic-bezier(.2,.8,.2,1) both; }
.dag-fullscreen-dialog .dag-node { animation:dag-node-reveal .42s cubic-bezier(.2,.8,.2,1) both; }
.dag-fullscreen-dialog .dag-node text { font-size:0.75rem; font-weight:600; }
.dag-fullscreen-dialog .dag-node .dag-node-state { font-size:0.5625rem; font-weight:500; letter-spacing:.05em; }
.dag-fullscreen-dialog .dag-node.running rect { filter:drop-shadow(0 0 0.625rem rgba(0,212,255,.68)); }
.dag-navigation-controls { display:flex; align-items:center; gap:0.25rem; margin-left:0.125rem; padding-left:0.375rem; border-left:1px solid rgba(148,163,184,.2); }
.dag-navigation-controls button { min-width:1.625rem; height:1.5rem; padding:0 0.375rem; border:1px solid rgba(103,232,249,.22); border-radius:0.375rem; background:rgba(15,23,42,.72); color:#c7f7ff; cursor:pointer; font:600 0.75rem var(--font-mono); }
.dag-navigation-controls button:last-child { min-width:2.25rem; font-size:0.625rem; }
.dag-navigation-controls button:hover { border-color:var(--accent-blue); background:rgba(0,212,255,.14); }
.dag-navigation-controls output { min-width:2.375rem; color:#8edfea; font:600 0.625rem var(--font-mono); text-align:center; }
.dag-fullscreen-close { position:absolute; top:0.625rem; right:0.625rem; z-index:2; width:1.875rem; height:1.875rem; border:1px solid rgba(148,163,184,.3); border-radius:50%; background:rgba(15,23,42,.82); color:var(--text-primary); font-size:1.375rem; cursor:pointer; }
@keyframes dag-flow { to { stroke-dashoffset:-30; } }
@keyframes dag-reveal { from { opacity:0; transform:scale(.975); } to { opacity:1; transform:scale(1); } }
@keyframes dag-node-reveal { from { opacity:0; } to { opacity:1; } }
@keyframes dag-ambient { from { transform:scale(.92); opacity:.45; } to { transform:scale(1.12); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .dag-node rect { transition:none; } .dag-edge-active,.dag-fullscreen-dialog .dag-canvas::before,.dag-fullscreen-dialog .dag-canvas svg,.dag-fullscreen-dialog .dag-node { animation:none; } }
@keyframes flow-pulse { 50% { transform:translateX(0.125rem); text-shadow:0 0 0.5rem var(--accent-blue); } }
.collaboration-detail { margin-top:0.625rem; padding-top:0.5625rem; border-top:1px solid rgba(148,163,184,.12); color:var(--text-secondary); font-size:0.6875rem; line-height:1.45; white-space:pre-line; }
.collaboration-detail-modal { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:1.5rem; background:rgba(2,9,20,.72); backdrop-filter:blur(0.625rem); }
.collaboration-detail-dialog { position:relative; width:min(42.5rem,100%); max-height:min(78vh,47.5rem); overflow:auto; padding:1.5rem; border:1px solid rgba(34,211,238,.35); box-shadow:0 1.5rem 4.375rem rgba(0,0,0,.42); }
.collaboration-detail-dialog h3 { margin:0.375rem 1.75rem 0.875rem 0; color:var(--text-primary); font-size:1.125rem; }
.collaboration-detail-close { position:absolute; top:0.875rem; right:0.875rem; width:1.875rem; height:1.875rem; border:1px solid rgba(148,163,184,.26); border-radius:50%; background:rgba(15,23,42,.7); color:var(--text-primary); font-size:1.375rem; cursor:pointer; }
.collaboration-trace { padding:0.75rem; border:1px solid rgba(34,211,238,.16); border-radius:0.625rem; background:rgba(2,12,27,.55); color:var(--text-secondary); font-size:0.75rem; line-height:1.6; word-break:break-word; }
.collaboration-markdown { margin-top:1rem; color:var(--text-primary); line-height:1.7; }
/* Secretary confirmation cards — neutral conversation design */
.secretary-plan-card { margin-top:1rem; padding:1rem; border:1px solid var(--theme-border); border-radius:0.875rem; background:var(--surface-elevated); }
.secretary-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.5rem; margin:0.625rem 0; }
.secretary-plan-grid div { min-width:0; padding:0.5625rem; border:1px solid var(--theme-border); border-radius:0.625rem; background:var(--surface-hover); }
.secretary-plan-grid small { display:block; margin-bottom:0.25rem; color:var(--theme-text-tertiary); font-size:0.625rem; }
.secretary-plan-grid strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--theme-text-primary); font-size:0.75rem; }
.secretary-plan-card p { color:var(--theme-text-secondary); font-size:0.8125rem; line-height:1.6; }
.secretary-plan-question { margin-top:0.625rem; padding:0.5625rem 0.625rem; border-left:0.1875rem solid var(--theme-border-strong); background:var(--surface-hover); color:var(--theme-text-primary); font-size:0.75rem; }
.secretary-completion-prompt .message-content { padding:0; overflow:hidden; }
.secretary-completion-card { overflow:hidden; border:1px solid var(--theme-border); border-radius:0.875rem; background:var(--surface-elevated); box-shadow:var(--theme-shadow); }
.secretary-completion-header { display:flex; align-items:flex-start; justify-content:space-between; gap:0.75rem; padding:1rem 1.125rem; border-bottom:1px solid var(--theme-border); }
.secretary-completion-eyebrow { display:flex; align-items:center; gap:0.4375rem; color:var(--theme-text-tertiary); font-family:var(--font-text); font-size:0.75rem; font-weight:600; letter-spacing:0; text-transform:none; }
.secretary-completion-pulse { width:0.4375rem; height:0.4375rem; border-radius:50%; background:var(--theme-accent); box-shadow:none; animation:none; }
.secretary-completion-header h3 { margin:0.375rem 0 0; color:var(--theme-text-primary); font-size:1rem; letter-spacing:0; }
.secretary-completion-status { flex:0 0 auto; padding:0.3125rem 0.5625rem; border:1px solid var(--theme-border); border-radius:999px; background:var(--surface-hover); color:var(--theme-text-secondary); font-size:0.6875rem; font-weight:600; }
.secretary-completion-summary { padding:0.875rem 1.125rem 0; color:var(--theme-text-secondary); font-size:0.875rem; line-height:1.6; }
.secretary-completion-body { margin:0.875rem 1.125rem 0; border:1px solid var(--theme-border); border-radius:0.75rem; background:var(--surface-hover); overflow:hidden; }
.secretary-completion-section-title { display:flex; align-items:center; gap:0.375rem; padding:0.625rem 0.75rem; border-bottom:1px solid var(--theme-border); color:var(--theme-text-primary); font-size:0.8125rem; font-weight:600; }
.secretary-completion-section-title span { color:var(--theme-text-tertiary); }
.secretary-completion-candidate { padding:0.25rem 0.75rem 0.75rem; color:var(--theme-text-primary); line-height:1.65; }
.secretary-completion-candidate > :first-child { margin-top:0.5rem; }
.secretary-completion-candidate > :last-child { margin-bottom:0; }
.secretary-completion-empty p { margin:0.625rem 0.75rem 0.75rem; color:var(--theme-text-tertiary); font-size:0.8125rem; }
.secretary-completion-question { margin:0.75rem 1.125rem 0; padding:0.75rem; border-left:0.1875rem solid var(--theme-border-strong); border-radius:0 0.625rem 0.625rem 0; background:var(--surface-hover); color:var(--theme-text-primary); font-size:0.8125rem; line-height:1.55; }
.secretary-completion-question-label { margin-bottom:0.3125rem; color:var(--theme-text-secondary); font-size:0.6875rem; font-weight:600; }
.secretary-completion-question > :last-child { margin-bottom:0; }
.secretary-completion-footer { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin-top:1rem; padding:0.875rem 1.125rem 1rem; border-top:1px solid var(--theme-border); background:transparent; }
.secretary-completion-hint { color:var(--theme-text-tertiary); font-size:0.6875rem; line-height:1.45; }
.secretary-completion-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:0.5rem; }
.secretary-completion-actions button { min-height:2.125rem; padding:0 0.75rem; font-size:0.75rem; }
 (max-width:40rem) { .secretary-completion-header,.secretary-completion-footer { padding-left:0.875rem; padding-right:0.875rem; } .secretary-completion-summary { padding-left:0.875rem; padding-right:0.875rem; } .secretary-completion-body,.secretary-completion-question { margin-left:0.875rem; margin-right:0.875rem; } .secretary-completion-footer { align-items:stretch; flex-direction:column; } .secretary-completion-actions { justify-content:stretch; } .secretary-completion-actions button { flex:1 1 100%; } }
 collaboration-pulse { 50% { transform:translateY(-1px); } }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, 0.15) transparent;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.125rem rgba(0, 212, 255, 0.5), 0 0 1.25rem rgba(0, 212, 255, 0.2);
    border-radius: inherit;
}

button:active:not(:disabled) {
    transform: scale(0.97) !important;
    transition-duration: 0.05s;
}

html {
    font-size: 1rem;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-text);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
}

::selection {
    background: var(--accent-blue);
    color: white;
}

::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.15);
    border-radius: 0.25rem;
    border: 0.125rem solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.25);
}

.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.bg-gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(7.5rem);
    opacity: 0.6;
    animation: orbFloat 30s ease-in-out infinite;
}

.bg-orb-1 {
    width: 37.5rem;
    height: 37.5rem;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.15) 0%, rgba(168, 85, 247, 0.08) 50%, transparent 70%);
    top: -12.5rem;
    left: -6.25rem;
}

.bg-orb-2 {
    width: 31.25rem;
    height: 31.25rem;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, rgba(244, 114, 182, 0.06) 50%, transparent 70%);
    bottom: -9.375rem;
    right: -6.25rem;
    animation-delay: -8s;
}

.bg-orb-3 {
    width: 25rem;
    height: 25rem;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, rgba(0, 212, 255, 0.05) 50%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -15s;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(0.9375rem, -0.9375rem) scale(1.01); }
    50% { transform: translate(-0.625rem, 0.625rem) scale(0.99); }
    75% { transform: translate(-0.9375rem, -0.625rem) scale(1.005); }
}

/* Sci-fi grid overlay */
.background-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
    background-size: 3.75rem 3.75rem;
    pointer-events: none;
    z-index: 0;
}

.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--spacing-md);
    gap: var(--spacing-lg);
}

.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: calc(var(--spacing-lg) + env(safe-area-inset-top));
    padding-bottom: var(--spacing-lg);
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    border-top: none;
    box-shadow:
        0 0.5rem 2rem rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(0, 212, 255, 0.06),
        0 0 1.25rem rgba(0, 212, 255, 0.06);
    animation: headerSlideDown 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes headerSlideDown {
    from {
        opacity: 0;
        transform: translateY(-1.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.health-monitor { display:flex; align-items:center; gap:0.5rem; margin-left:auto; margin-right:1rem; position:relative; }
.health-monitor-summary { border:1px solid rgba(148,163,184,.26); background:rgba(2,12,27,.46); color:var(--text-secondary); border-radius:62.438rem; padding:0.375rem 0.625rem; font:600 0.6875rem var(--font-text); cursor:pointer; white-space:nowrap; }
.health-monitor-summary:hover { border-color:var(--accent-blue); color:var(--text-primary); }
.health-monitor-dot { display:inline-block; width:0.4375rem; height:0.4375rem; border-radius:50%; margin-right:0.375rem; background:var(--text-tertiary); }
.health-monitor-dot.is-healthy { background:var(--color-success); box-shadow:0 0 0.5rem var(--color-success); }
.health-monitor-dot.is-warning { background:var(--color-warning); box-shadow:0 0 0.5rem var(--color-warning); }
.health-monitor-dot.is-unhealthy { background:var(--color-error); box-shadow:0 0 0.5rem var(--color-error); }
.health-monitor-details { display:none; position:absolute; top:calc(100% + 0.5rem); right:0; width:15.625rem; padding:0.625rem; border:1px solid var(--glass-border); border-radius:0.625rem; background:var(--glass-bg-heavy); box-shadow:var(--neon-glow-md); z-index:110; }
.health-monitor:hover .health-monitor-details, .health-monitor:focus-within .health-monitor-details { display:grid; gap:0.375rem; }
.health-monitor-details div { display:flex; justify-content:space-between; gap:0.5rem; font-size:0.6875rem; color:var(--text-secondary); }
.health-monitor-details strong { color:var(--text-primary); font-weight:600; }
@media (max-width: 47.5rem) { .health-monitor { margin-right:0.375rem; } .health-monitor-details { right:-5rem; } .health-monitor-summary { padding:0.375rem 0.5rem; } }

.dingdang-avatar {
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 212, 255, 0.3);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    cursor: pointer;
}

.dingdang-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 0.375rem 1rem rgba(0, 212, 255, 0.35);
}

.dingdang-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.app-main {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    gap: var(--spacing-lg);
    overflow: hidden;
    padding-top: calc(4.375rem + env(safe-area-inset-top));
    animation: mainFadeIn 0.6s ease 0.1s both;
}

@keyframes mainFadeIn {
    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-header-bar {
    display: flex;
    justify-content: flex-end;
    padding: var(--spacing-md) var(--spacing-xl);
    border-bottom: 1px solid rgba(0, 212, 255, 0.05);
    background: rgba(10, 14, 23, 0.5);
}

.btn-clear-chat {
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(239, 68, 68, 0.12);
    color: var(--accent-red);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.btn-clear-chat:hover {
    background: rgba(239, 68, 68, 0.15);
    transform: translateY(-1px);
}

.btn-clear-chat:active {
    transform: translateY(0);
}

.btn-icon-header {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    border: none;
    background: rgba(0, 212, 255, 0.06);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all var(--transition-fast);
}

.btn-icon-header:hover {
    background: rgba(0, 212, 255, 0.08);
    transform: scale(1.05);
}

.btn-icon-header:active {
    transform: scale(0.95);
}

.chat-area {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    display: flex;
    flex-direction: column;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 0.5rem 2rem var(--glass-shadow);
    overflow: hidden;
}

.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-2xl);
    scroll-behavior: smooth;
}

.welcome-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--spacing-2xl);
    text-align: center;
    animation: welcomeFadeIn 0.8s ease 0.4s both;
}

@keyframes welcomeFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.welcome-avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 1.375rem;
    margin-bottom: var(--spacing-xl);
    overflow: hidden;
    box-shadow: 0 0.5rem 2rem rgba(0, 212, 255, 0.3);
}

.welcome-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.welcome-message h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    letter-spacing: -0.03em;
}

.welcome-message p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-2xl);
    max-width: 80%;
    line-height: 1.6;
}

.message {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    max-width: 92%;
    animation: messageSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(0.9375rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message.user {
    margin-left: auto;
    flex-direction: row-reverse;
}

.message.user .message-avatar {
    display: none;
}

.message-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 0.25rem 0.75rem var(--glass-shadow);
}

.message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.message-content-wrapper {
    display: flex;
    flex-direction: column;
    max-width: calc(100% - 3.5rem);
    position: relative;
}

.message-content {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: 1.25rem;
    line-height: 1.65;
    font-size: 0.95rem;
}

.message.assistant .message-content {
    background: rgba(15, 20, 32, 0.6);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-top-left-radius: 0.375rem;
    box-shadow: 
        0 0.25rem 1rem rgba(0, 0, 0, 0.25),
        inset 0 1px 0 var(--glass-glow),
        0 0 1rem rgba(0, 212, 255, 0.06);
}

.message.user .message-content {
    background: rgba(0, 212, 255, 0.1);
    color: #e2e8f0;
    border-top-right-radius: 0.375rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.5);
}

.agent-raw-result-message .message-content-wrapper {
    width: min(100%, 45rem);
}

.agent-raw-result-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid rgba(103, 232, 249, 0.20);
    border-radius: 0.75rem;
    background: rgba(8, 47, 73, 0.32);
    color: rgba(224, 242, 254, 0.88);
    font-size: 0.72rem;
}

.agent-raw-result-banner span {
    color: #67e8f9;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.agent-raw-result-banner strong {
    color: #f8fafc;
    font-weight: 800;
}

.agent-raw-result-banner em {
    margin-left: auto;
    color: rgba(191, 219, 254, 0.72);
    font-style: normal;
    font-weight: 750;
}

.agent-raw-result-updated .message-content {
    animation: agentResultContentReveal 0.45s ease-out both;
}

.message-meta {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    padding-left: var(--spacing-xs);
}

.meta-item {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    background: rgba(0, 212, 255, 0.05);
    padding: 0.25rem var(--space-10);
    border-radius: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.explore-area {
    padding: var(--spacing-md) var(--spacing-xl);
    display: flex;
    justify-content: flex-start;
    border-top: 1px solid rgba(0, 212, 255, 0.05);
}

.recent-agent-app-entry {
    width: calc(100% - var(--spacing-xl) * 2);
    min-height: 3.375rem;
    margin: 0 var(--spacing-xl) var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border: 1px solid rgba(125, 249, 255, 0.24);
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(168, 85, 247, 0.12)),
        rgba(2, 10, 26, 0.74);
    color: var(--text-primary);
    box-shadow: 0 0.625rem 1.75rem rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.recent-agent-app-entry.is-hidden {
    display: none;
}

.recent-agent-app-entry:hover {
    border-color: rgba(125, 249, 255, 0.46);
    box-shadow: 0 0.75rem 2.125rem rgba(0, 212, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.recent-agent-app-open {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 3.375rem;
    padding: 0.5625rem 0 0.5625rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.recent-agent-app-dismiss {
    flex: 0 0 2.125rem;
    width: 2.125rem;
    height: 2.125rem;
    margin-right: 0.5rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(125, 249, 255, 0.22);
    border-radius: 0.625rem;
    background: rgba(2, 10, 26, 0.56);
    color: rgba(226, 242, 255, 0.80);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.recent-agent-app-dismiss:hover {
    border-color: rgba(248, 113, 113, 0.46);
    color: #fecaca;
    background: rgba(69, 10, 10, 0.38);
}

.recent-agent-app-icon {
    flex: 0 0 2.125rem;
    width: 2.125rem;
    height: 2.125rem;
    display: grid;
    place-items: center;
    border-radius: 0.75rem;
    background: rgba(125, 249, 255, 0.13);
    color: #7df9ff;
    font-size: 1rem;
    font-weight: 900;
}

.recent-agent-app-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    text-align: left;
}

.recent-agent-app-copy strong,
.recent-agent-app-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-agent-app-copy strong {
    font-size: 0.9rem;
    font-weight: 850;
}

.recent-agent-app-copy small {
    color: rgba(191, 219, 254, 0.72);
    font-size: 0.72rem;
    font-weight: 650;
}

.input-area {
    padding: var(--spacing-xl);
    background: rgba(10, 14, 23, 0.8);
    border-top: 1px solid rgba(0, 212, 255, 0.06);
}

.agent-render-mode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid rgba(0, 212, 255, 0.16);
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgba(0, 212, 255, 0.10), rgba(124, 58, 237, 0.08)),
        rgba(2, 8, 22, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0.625rem 1.75rem rgba(0, 0, 0, 0.28);
}

.agent-render-mode.is-off {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.76);
}

.agent-interaction-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    margin: 0 0 var(--spacing-md);
    padding: 0.75rem 0.875rem;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 212, 255, 0.24);
    border-radius: var(--radius-md);
    background: linear-gradient(110deg, rgba(8, 35, 58, 0.88), rgba(30, 25, 68, 0.72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--neon-glow-sm);
}

.agent-interaction-status[hidden],
.agent-interaction-status.is-hidden { display: none !important; }

.agent-interaction-status::before {
    content: '';
    width: 0.4375rem;
    height: 0.4375rem;
    flex: 0 0 0.4375rem;
    border-radius: 62.438rem;
    background: var(--accent-blue);
    box-shadow: 0 0 0 0.25rem rgba(0, 212, 255, 0.10), 0 0 0.875rem rgba(0, 212, 255, 0.8);
}

.agent-interaction-status-copy {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
}

.agent-interaction-status-kicker {
    color: #74e9ff;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.agent-interaction-status-copy strong {
    color: #e5f9ff;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-interaction-status-copy small { color: rgba(214, 239, 255, 0.78); font-size: 0.75rem; }

.agent-interaction-end {
    flex: 0 0 auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 62.438rem;
    color: var(--text-secondary);
    background: rgba(15, 23, 42, 0.46);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.agent-interaction-end:hover:not(:disabled) {
    color: #ffd4dc;
    border-color: rgba(244, 114, 182, 0.55);
    background: rgba(136, 37, 79, 0.30);
    box-shadow: 0 0 0.875rem rgba(244, 114, 182, 0.16);
}
.agent-interaction-end:disabled { opacity: 0.56; cursor: wait; }

.agent-render-mode-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.agent-render-mode-copy strong {
    color: #e0f2fe;
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.3;
}

.agent-render-mode-copy span {
    color: rgba(191, 219, 254, 0.68);
    font-size: 0.68rem;
    line-height: 1.35;
}

.agent-render-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: rgba(226, 232, 240, 0.72);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0;
}

.agent-render-toggle-track {
    width: 2.625rem;
    height: 1.375rem;
    display: inline-flex;
    align-items: center;
    padding: 0.125rem;
    border-radius: 62.438rem;
    background: rgba(51, 65, 85, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.28);
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.agent-render-toggle-thumb {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #94a3b8;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.35);
    transform: translateX(0);
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.agent-render-toggle.is-on {
    color: #bfdbfe;
}

.agent-render-toggle.is-on .agent-render-toggle-track {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.86), rgba(124, 58, 237, 0.86));
    border-color: rgba(103, 232, 249, 0.55);
    box-shadow: 0 0 1.125rem rgba(0, 212, 255, 0.28);
}

.agent-render-toggle.is-on .agent-render-toggle-thumb {
    background: #ffffff;
    transform: translateX(1.25rem);
}

.agent-render-toggle:focus-visible {
    outline: 0.125rem solid rgba(103, 232, 249, 0.72);
    outline-offset: 0.25rem;
    border-radius: 62.438rem;
}

.mode-selector {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.mode-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    background: transparent;
    border-radius: 1.25rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.mode-btn:hover {
    color: var(--text-primary);
    background: rgba(0, 212, 255, 0.06);
}

.mode-btn.active {
    background: var(--text-primary);
    color: white;
}

.input-wrapper {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    background: rgba(15, 20, 32, 0.85);
    border: none;
    border-radius: 1.5rem;
    padding: var(--spacing-md) var(--spacing-lg);
    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.4);
    transition: all var(--transition-fast);
}

.input-wrapper:focus-within {
    box-shadow: 0 0.25rem 1.5rem rgba(0, 212, 255, 0.2), 0 0 0 1px rgba(0, 212, 255, 0.55);
}

.input-wrapper textarea {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    font-family: var(--font-text);
    font-size: 0.95rem;
    line-height: 1.5;
    min-height: 1.5em;
    max-height: 9.375rem;
    overflow-y: hidden;
    background: transparent;
    color: var(--text-primary);
}

/* 焦点光效仅由外层输入容器承担，避免 textarea 再叠加一层内发光描边。 */
.input-wrapper textarea:focus-visible {
    box-shadow: none;
}

.input-wrapper textarea::placeholder {
    color: var(--text-tertiary);
}

.send-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--accent-blue), #7c3aed);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    box-shadow: 0 0.25rem 1rem rgba(0, 212, 255, 0.35);
}

.send-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 0.375rem 1.5rem rgba(0, 212, 255, 0.5);
}

.send-btn:active {
    transform: scale(0.95);
}

.send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.send-btn.sending {
    animation: sendPulse 1.2s ease-in-out infinite;
}

@keyframes sendPulse {
    0%, 100% { box-shadow: 0 0.25rem 1rem rgba(0, 212, 255, 0.35); }
    50% { box-shadow: 0 0.25rem 1.75rem rgba(0, 212, 255, 0.55); }
}

.send-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.image-upload-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: none;
    background: rgba(0, 212, 255, 0.08);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.image-upload-btn:hover {
    background: rgba(0, 212, 255, 0.12);
    color: var(--text-primary);
    transform: scale(1.08);
}

.image-upload-btn:active {
    transform: scale(0.95);
}

.image-upload-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.image-preview-wrapper {
    padding: 0 var(--spacing-lg) var(--spacing-md);
}

.image-preview-container {
    position: relative;
    display: inline-block;
}

.image-preview-thumb {
    width: 3.75rem;
    height: 3.75rem;
    object-fit: cover;
    border-radius: 0.75rem;
    border: 1px solid rgba(0, 212, 255, 0.15);
}

.image-remove-btn {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    border: none;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all var(--transition-fast);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
}

.image-remove-btn:hover {
    background: var(--accent-red);
    transform: scale(1.1);
}

.image-uploading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-uploading-spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 0.125rem solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.message-image {
    margin-bottom: 0.5rem;
}

.message-image img {
    max-width: 12.5rem;
    border-radius: 0.5rem;
    display: block;
}

.tab-view-chat.drag-over {
    border-color: var(--accent-blue);
    box-shadow: 0 0 1.875rem rgba(0, 212, 255, 0.2);
    position: relative;
}

.tab-view-chat.drag-over::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 212, 255, 0.05);
    border: 0.125rem dashed var(--accent-blue);
    border-radius: inherit;
    pointer-events: none;
    z-index: 10;
}

.status-panel {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 24%;
    min-width: 16.25rem;
    max-width: 21.25rem;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 1.5rem;
    box-shadow:
        0 0.5rem 2rem rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(0, 212, 255, 0.06),
        0 0 1.25rem rgba(0, 212, 255, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header {
    padding: var(--spacing-xl);
    border-bottom: 1px solid rgba(0, 212, 255, 0.06);
}

.panel-header h3 {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.panel-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
    scroll-behavior: smooth;
}

.empty-state {
    text-align: center;
    color: var(--text-tertiary);
    padding: var(--spacing-2xl) var(--spacing-lg);
    font-size: 0.9rem;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: rgba(15, 20, 32, 0.95);
    backdrop-filter: blur(1.25rem);
    -webkit-backdrop-filter: blur(1.25rem);
    border: 1px solid rgba(0, 212, 255, 0.06);
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 28.125rem;
    box-shadow: 0 1.5625rem 3.75rem rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 212, 255, 0.06), 0 0 2.5rem rgba(0, 212, 255, 0.08);
    animation: modalSlideUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(1.875rem) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xl);
    border-bottom: 1px solid rgba(0, 212, 255, 0.06);
}

.modal-header h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
}

.close-btn {
    width: 2rem;
    height: 2rem;
    border: none;
    background: rgba(0, 212, 255, 0.06);
    border-radius: 50%;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    background: rgba(0, 212, 255, 0.08);
    color: var(--text-primary);
}

.modal-body {
    padding: var(--spacing-xl);
}

#keycloakRegistrationFrame {
    width: 100%;
    height: min(70vh, 38.75rem);
    border: 0;
    border-radius: 0.625rem;
    background: #fff;
}

.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-group input {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid rgba(0, 212, 255, 0.08);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    outline: none;
    transition: all var(--transition-fast);
    font-family: var(--font-text);
}

.form-group input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 0.1875rem rgba(0, 212, 255, 0.15);
}

.btn-primary {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-xl);
    background: linear-gradient(135deg, var(--accent-blue), #7c3aed);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all var(--transition-fast);
    box-shadow: 0 0.25rem 1rem rgba(0, 212, 255, 0.3);
}

.btn-primary:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.375rem 1.5rem rgba(0, 212, 255, 0.4);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: rgba(0, 212, 255, 0.06);
    color: var(--text-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.btn-secondary:hover {
    background: rgba(0, 212, 255, 0.08);
}

.switch-mode {
    margin-top: var(--spacing-xl);
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.switch-mode span {
    margin-right: var(--spacing-xs);
}

.btn-text {
    background: none;
    border: none;
    color: var(--accent-blue);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0;
    transition: color var(--transition-fast);
}

.btn-text:hover {
    color: #33e0ff;
    text-decoration: underline;
}

.user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    min-width: 0;
}

.header-right {
    min-width: 0;
    margin-left: auto;
}

#adminUsersBtn {
    margin-left: var(--spacing-sm);
}

.user-avatar {
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    flex: 0 0 auto;
}

.user-name {
    font-weight: 500;
    font-size: 0.9rem;
    min-width: 0;
}

.message-content pre {
    background: rgba(0, 212, 255, 0.05);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    margin: var(--spacing-sm) 0;
    font-size: 0.85rem;
}

.message-content code {
    background: rgba(0, 212, 255, 0.08);
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.message-content pre code {
    background: none;
    padding: 0;
}

.typing-indicator {
    display: flex;
    gap: 0.375rem;
    padding: var(--spacing-md);
}

.typing-indicator span {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--accent-blue);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-0.5rem); opacity: 1; }
}

.typing-text {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    margin-top: var(--spacing-sm);
    text-align: center;
}

.agent-selection-container {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    margin: var(--spacing-lg) 0;
    box-shadow: 0 0.5rem 2rem var(--glass-shadow);
    animation: selectionSlideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes selectionSlideIn {
    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.agent-selection-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.agent-selection-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

.agent-column {
    background: rgba(0, 212, 255, 0.03);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.agent-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(0, 212, 255, 0.06);
}

.column-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.column-count {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    background: rgba(15, 20, 32, 0.85);
    padding: 0.25rem var(--spacing-md);
    border-radius: 0.75rem;
    font-weight: 500;
}

.agent-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-height: 45vh;
    min-height: 12.5rem;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.agent-item {
    background: rgba(15, 20, 32, 0.85);
    border: 1px solid rgba(0, 212, 255, 0.06);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    /* Items live inside a height-limited scrolling flex column. They must keep
       their content height; otherwise flex-shrink compresses several cards and
       their text paints over the following rows. */
    flex: 0 0 auto;
    align-items: flex-start;
    gap: var(--spacing-md);
    transition: all var(--transition-fast);
}

.agent-item:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 0.25rem 1rem rgba(0, 212, 255, 0.12);
    transform: translateY(-0.125rem);
}

.agent-item.ioa-item {
    align-items: flex-start;
}

.agent-checkbox-wrapper {
    flex-shrink: 0;
    padding-top: 0.125rem;
}

.agent-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    accent-color: var(--accent-blue);
}

.agent-info {
    flex: 1;
    min-width: 0;
}

.agent-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--spacing-xs);
}

.agent-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.agent-scope-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 1.375rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 62.438rem;
    border: 1px solid rgba(0, 212, 255, 0.30);
    background: rgba(0, 212, 255, 0.10);
    color: #7df9ff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.agent-scope-badge.local {
    border-color: rgba(34, 211, 238, 0.52);
    background: rgba(34, 211, 238, 0.16);
    box-shadow: 0 0 0.875rem rgba(34, 211, 238, 0.13);
}

.agent-scope-badge.cloud {
    border-color: rgba(168, 85, 247, 0.42);
    background: rgba(168, 85, 247, 0.13);
    color: #d8b4fe;
}

.agent-description {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.agent-task {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(0, 212, 255, 0.08);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
}

.task-label {
    color: var(--accent-blue);
    font-weight: 600;
}

.task-content {
    color: var(--text-primary);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.btn-open-agent {
    flex-shrink: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all var(--transition-fast);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 212, 255, 0.3);
}

.btn-open-agent:hover {
    background: #00b8e6;
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 212, 255, 0.35);
}

.agent-execute-footer {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(0, 212, 255, 0.06);
}

.btn-execute-agents {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-xl);
    background: linear-gradient(135deg, var(--accent-blue), #7c3aed);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all var(--transition-fast);
    box-shadow: 0 0.25rem 1rem rgba(0, 212, 255, 0.3);
}

.btn-execute-agents:hover:not(:disabled) {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.375rem 1.5rem rgba(0, 212, 255, 0.4);
}

.btn-execute-agents:active {
    transform: translateY(0);
}

.btn-execute-agents:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.no-agents-message {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--text-secondary);
}

.execution-status {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: rgba(0, 212, 255, 0.03);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 212, 255, 0.06);
}

.execution-header {
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.execution-progress {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.progress-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.85rem;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(15, 20, 32, 0.85);
    border-radius: var(--radius-sm);
}

.progress-item.running {
    color: var(--accent-blue);
}

.progress-item.completed {
    color: var(--accent-green);
}

.progress-item.error {
    color: var(--accent-red);
}

.execution-results {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.result-item {
    background: rgba(15, 20, 32, 0.85);
    border: 1px solid rgba(0, 212, 255, 0.06);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.result-item.success {
    border-left: 0.1875rem solid var(--accent-green);
}

.result-item.error {
    border-left: 0.1875rem solid var(--accent-red);
}

.result-header {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.result-content {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.agent-status-item {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    box-shadow:
        0 0.25rem 1rem rgba(0, 0, 0, 0.25),
        inset 0 1px 0 var(--glass-glow),
        0 0 0.75rem rgba(0, 212, 255, 0.06);
}

.agent-status-item.status-running {
    border-left: 0.1875rem solid var(--accent-green);
}

.agent-status-item.status-success {
    border-left: 0.1875rem solid var(--accent-blue);
}

.agent-status-item.status-error {
    border-left: 0.1875rem solid var(--accent-red);
}

.agent-status-item.status-cancelled {
    border-left: 0.1875rem solid var(--text-tertiary);
    opacity: 0.82;
}

.agent-status-item.status-total {
    border-left: 0.1875rem solid var(--accent-purple);
}

.status-running::after {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--accent-green);
    margin-left: var(--spacing-sm);
    animation: statusPulse 1.5s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.status-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.status-icon {
    font-size: 1rem;
}

.status-agent-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.status-details {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.status-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.status-metric {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    background: rgba(0, 212, 255, 0.05);
    padding: 0.125rem 0.5rem;
    border-radius: 0.625rem;
}

.status-running .status-text {
    color: var(--accent-blue);
}

.status-success .status-text {
    color: var(--accent-green);
}

.status-error .status-text {
    color: var(--accent-red);
}

.copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(128, 128, 128, 0.6);
    border: none;
    border-radius: 0.375rem;
    width: 1.75rem;
    height: 1.75rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
}

.message:hover .copy-btn {
    opacity: 1;
}

.copy-btn:hover {
    background: rgba(100, 100, 100, 0.8);
}

.copy-btn.copied {
    background: var(--color-success);
    animation: copySuccess 0.3s ease;
}

@keyframes copySuccess {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.message-content h1 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    color: inherit;
}

.message-content h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem 0;
    color: inherit;
}

.message-content h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0.75rem 0 0.4rem 0;
    color: inherit;
}

.message-content ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.message-content li {
    margin: 0.25rem 0;
    line-height: 1.5;
}

.message-content p {
    margin: 0.4rem 0;
}

.message-content strong {
    font-weight: 600;
}

.message-content hr {
    border: none;
    border-top: 1px solid var(--theme-border);
    margin: 1.125rem 0;
}

.message-content a {
    color: #00d4ff;
    text-decoration: none;
}

.message-content a:hover {
    text-decoration: underline;
}

.message-content em {
    font-style: italic;
}

.chat-json-summary { margin: 0.75rem 0; padding: 0.75rem; border: 1px solid rgba(0, 212, 255, 0.22); border-radius: 0.625rem; background: rgba(0, 212, 255, 0.05); }
.chat-json-summary-label { margin-bottom: 0.5rem; color: var(--text-secondary); font-size: 0.76rem; font-weight: 700; }
.chat-json-summary-toggle { margin-top: 0.5rem; border: 0; background: transparent; color: #00d4ff; cursor: pointer; padding: 0; font: inherit; }
.chat-json-summary-raw { margin: 0.625rem 0 0; padding: 0.625rem; overflow: auto; white-space: pre-wrap; background: rgba(0, 0, 0, 0.18); border-radius: 0.375rem; }

.user-info-modal {
    max-width: 30rem;
}

.user-info-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(168, 85, 247, 0.08));
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
}

.user-info-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.5rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 212, 255, 0.3);
}

.user-info-details {
    flex: 1;
}

.user-info-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.user-info-status {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.certificate-section {
    padding: var(--spacing-lg);
    background: rgba(0, 212, 255, 0.03);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 212, 255, 0.06);
}

.certificate-info {
    margin-bottom: var(--spacing-lg);
}

.certificate-no-cert {
    text-align: center;
    padding: var(--spacing-xl);
}

.certificate-no-cert-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.6;
}

.certificate-no-cert-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: var(--spacing-lg);
}

.certificate-details {
    padding: var(--spacing-lg);
    background: rgba(15, 20, 32, 0.85);
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 212, 255, 0.06);
}

.certificate-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid rgba(0, 212, 255, 0.06);
    gap: var(--spacing-lg);
}

.certificate-item:last-child {
    border-bottom: none;
}

.certificate-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 5rem;
}

.certificate-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 600;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: right;
    flex: 1;
}

.certificate-warning {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: rgba(251, 146, 60, 0.12);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-lg);
    color: #d97706;
    font-size: 0.85rem;
    font-weight: 500;
}

.certificate-warning-icon {
    font-size: 1.2rem;
}

.certificate-expired {
    background: rgba(239, 68, 68, 0.12);
    color: var(--accent-red);
}

.certificate-actions {
    display: flex;
    gap: var(--spacing-md);
}

.certificate-actions .btn-primary {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 0.9rem;
}

.btn-loading {
    position: relative;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    left: 50%;
    margin-left: -0.5rem;
    margin-top: -0.5rem;
    border: 0.125rem solid transparent;
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.certificate-success-toast {
    position: fixed;
    top: var(--spacing-xl);
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-green);
    color: white;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-md);
    box-shadow: 0 0.5rem 2rem rgba(34, 211, 238, 0.3);
    z-index: 200;
    animation: toastSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-1.25rem);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.toast-fade-out {
    animation: toastFadeOut 0.4s ease forwards;
}

@keyframes toastFadeOut {
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-1.25rem);
    }
}

.user-info-clickable {
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.user-info-clickable:hover {
    transform: scale(1.02);
    box-shadow: 0 0.25rem 1rem rgba(0, 212, 255, 0.2);
}

.user-info-clickable .user-avatar,
.user-info-clickable .user-name {
    cursor: pointer;
}

.admin-users-modal {
    max-width: 61.25rem;
}

.admin-users-toolbar {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.admin-users-toolbar input {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid rgba(0, 212, 255, 0.08);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    outline: none;
}

.admin-users-toolbar input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 0.1875rem rgba(0, 212, 255, 0.15);
}

.admin-users-summary {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.admin-users-table-wrap {
    border: 1px solid rgba(0, 212, 255, 0.06);
    border-radius: var(--radius-md);
    max-height: 26.25rem;
    overflow: auto;
    background: rgba(15, 20, 32, 0.85);
    scroll-behavior: smooth;
}

.admin-users-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 61rem;
}

.admin-aic-entity-cell {
    min-width: 12rem;
}

.admin-aic-entity-cell small {
    display: block;
    max-width: 16rem;
    margin-top: 0.25rem;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-aic-entity-status {
    font-size: 0.78rem;
    font-weight: 600;
}

.admin-aic-entity-status.is-active { color: var(--accent-green); }
.admin-aic-entity-status.is-expiring { color: #f59e0b; }
.admin-aic-entity-status.is-expired,
.admin-aic-entity-status.is-error { color: #ef4444; }
.admin-aic-entity-status.is-missing { color: var(--text-secondary); }

.admin-users-table th,
.admin-users-table td {
    text-align: left;
    padding: var(--spacing-md);
    border-bottom: 1px solid rgba(0, 212, 255, 0.06);
    font-size: 0.88rem;
    vertical-align: top;
}

.admin-users-table th {
    background: rgba(0, 212, 255, 0.05);
    color: var(--text-secondary);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}

.empty-cell {
    text-align: center !important;
    color: var(--text-tertiary);
    padding: var(--spacing-xl) !important;
}

.admin-delete-btn {
    border: none;
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-red);
    border-radius: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.admin-delete-btn:hover {
    background: var(--accent-red);
    color: white;
}

.admin-delete-btn:disabled {
    background: rgba(0, 0, 0, 0.25);
    color: rgba(0, 0, 0, 0.45);
    cursor: not-allowed;
}

.admin-edit-quota-btn {
    border: none;
    background: rgba(0, 212, 255, 0.15);
    color: var(--accent-blue);
    border-radius: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.admin-edit-quota-btn:hover {
    background: var(--accent-blue);
    color: white;
}

.admin-ensure-aic-entity-btn {
    border: none;
    background: rgba(139, 92, 246, 0.16);
    color: #a78bfa;
    border-radius: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.admin-ensure-aic-entity-btn:hover {
    background: #8b5cf6;
    color: white;
}

.admin-reset-quota-btn {
    border: none;
    background: rgba(34, 211, 238, 0.15);
    color: var(--accent-green);
    border-radius: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.admin-reset-quota-btn:hover {
    background: var(--accent-green);
    color: white;
}

/* 自定义复选框 */
.admin-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    border: 0.09375rem solid rgba(0, 212, 255, 0.3);
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    position: relative;
    transition: all var(--transition-fast);
    vertical-align: middle;
}

.admin-checkbox:hover {
    border-color: var(--accent-blue);
    background: rgba(0, 212, 255, 0.08);
}

.admin-checkbox:checked {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

.admin-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 0.3125rem;
    top: 1px;
    width: 0.3125rem;
    height: 0.625rem;
    border: solid #fff;
    border-width: 0 0.125rem 0.125rem 0;
    transform: rotate(45deg);
}

.admin-checkbox:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* 批量操作工具栏 */
.admin-batch-toolbar {
    display: none;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(0, 212, 255, 0.06);
    border: 1px solid rgba(0, 212, 255, 0.1);
    border-radius: var(--radius-md);
    animation: batchBarFadeIn 0.25s ease;
}

.admin-batch-toolbar.active {
    display: flex;
}

@keyframes batchBarFadeIn {
    from { opacity: 0; transform: translateY(-0.25rem); }
    to { opacity: 1; transform: translateY(0); }
}

.admin-batch-count {
    font-size: 0.88rem;
    color: var(--accent-blue);
    font-weight: 600;
    margin-right: auto;
}

.admin-batch-btn {
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 500;
}

.admin-batch-reset-btn {
    background: rgba(34, 211, 238, 0.15);
    color: var(--accent-green);
}

.admin-batch-reset-btn:hover {
    background: var(--accent-green);
    color: white;
}

.admin-batch-quota-btn {
    background: rgba(0, 212, 255, 0.15);
    color: var(--accent-blue);
}

.admin-batch-quota-btn:hover {
    background: var(--accent-blue);
    color: white;
}

.admin-batch-aic-entity-btn {
    background: rgba(139, 92, 246, 0.16);
    color: #a78bfa;
}

.admin-batch-aic-entity-btn:hover {
    background: #8b5cf6;
    color: white;
}

.admin-batch-cancel-btn {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
}

.admin-batch-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

.admin-users-pagination {
    margin-top: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-md);
}

.admin-users-pagination .btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   日志查看（管理员）样式
   ============================================ */

.admin-logs-modal {
    max-width: 67.5rem;
}
.modal.developer-tools-modal {
    inline-size: min(92dvw, 100rem);
    max-inline-size: min(92dvw, 100rem);
    width: min(92dvw, 100rem);
    max-width: none;
}

.modal.developer-tools-layout {
    height: min(98dvh, 70rem);
    max-height: var(--viewport-safe-block);
    max-block-size: 98dvh;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
}

.developer-tools-tabs {
    display: flex;
    gap: 1rem;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--theme-border);
}

.developer-tools-tabs button {
    padding: .75rem 0;
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.developer-tools-tabs button.active {
    color: var(--text-primary);
    border-color: var(--theme-focus);
}

.developer-debug-panel,
.developer-logs-panel {
    min-height: 0;
}

.developer-debug-panel {
    overflow: hidden;
}

.developer-tools-workspace {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(24rem, .85fr) minmax(0, 1.15fr);
}

.developer-debug-inputs {
    min-height: 0;
    padding: 1rem 1.25rem;
    overflow: auto;
    border-right: 1px solid var(--theme-border);
}

.developer-field {
    display: grid;
    gap: .45rem;
    margin-bottom: .5rem;
}

.developer-field label {
    font-size: .875rem;
}

.developer-field-hint {
    color: var(--text-secondary);
    font-size: .75rem;
    line-height: 1.4;
}

.developer-tools-modal textarea {
    width: 100%;
    padding: .75rem;
    color: var(--text-primary);
    background: var(--surface-canvas);
    border: 1px solid var(--theme-border);
    border-radius: var(--radius-sm);
    resize: vertical;
}

#developerAcsInput {
    min-height: 6.75rem;
}

#developerMessageInput {
    min-height: 3rem;
}

.developer-tools-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.developer-tools-actions button {
    min-width: 5.5rem;
    white-space: nowrap;
}

.developer-tools-actions .btn-primary {
    width: auto;
}

.developer-debug-console {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: 3.125rem minmax(0, 1fr);
}

.developer-debug-console-header {
    display: flex;
    align-items: center;
    padding: 0 1.35rem;
    border-bottom: 1px solid var(--theme-border);
}

.developer-debug-console-title {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: .6rem;
    font-size: .875rem;
}

.developer-debug-status-dot {
    width: .45rem;
    height: .45rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--text-secondary);
}

.developer-debug-status {
    margin: 0;
    color: var(--text-secondary);
    font-size: .75rem;
}

.developer-tools-modal pre {
    min-height: 0;
    max-height: none;
    height: 100%;
    margin: 0;
    padding: 1.25rem 1.35rem;
    overflow: auto;
    color: var(--text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--surface-canvas);
    border: 0;
}

.developer-logs-panel {
    overflow: hidden;
}

.developer-logs-panel pre {
    height: 100%;
}

/* Developer tools follow the approved restrained dark-console prototype. */
.modal.developer-tools-layout {
    background: #1b1b1b;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 22px;
    box-shadow: 0 24px 72px rgba(0, 0, 0, .42);
}

.developer-tools-layout .modal-header {
    min-height: 4.75rem;
    padding: 0 1.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.developer-tools-layout .modal-header h2 {
    font-size: 1.375rem;
    font-weight: 620;
    letter-spacing: .01em;
}

.developer-tools-layout .modal-header .close-btn {
    inline-size: 2.125rem;
    block-size: 2.125rem;
    padding: 0;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, .05);
    border: 0;
    border-radius: 50%;
}

.developer-tools-layout .developer-tools-tabs {
    gap: 1.5rem;
    padding: 0 1.75rem;
    border-bottom-color: rgba(255, 255, 255, .12);
}

.developer-tools-layout .developer-tools-tabs button {
    height: 3.375rem;
    padding: 0;
    font-size: .875rem;
}

.developer-tools-layout .developer-tools-workspace {
    grid-template-columns: minmax(24rem, .72fr) minmax(0, 1.28fr);
}

.developer-tools-layout .developer-debug-inputs {
    padding: 1.5rem;
    border-right-color: rgba(255, 255, 255, .12);
}

.developer-tools-layout .developer-field {
    gap: .5rem;
    margin-bottom: 1.125rem;
}

.developer-tools-layout .developer-field-hint {
    line-height: 1.45;
}

.developer-tools-layout textarea {
    padding: .75rem;
    background: #101010;
    border-color: rgba(255, 255, 255, .12);
    border-radius: 8px;
    font: .75rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.developer-tools-layout #developerMessageInput {
    font-family: inherit;
    font-size: .875rem;
}

.developer-tools-layout .developer-acs-templates {
    display: flex;
    margin-top: -.125rem;
}

.developer-tools-layout .developer-acs-templates button {
    min-height: 1.875rem;
    padding: 0 .625rem;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 7px;
    font-size: .75rem;
    white-space: nowrap;
}

.developer-tools-layout .developer-acs-templates button:hover,
.developer-tools-layout .developer-acs-templates button:focus-visible {
    color: var(--text-primary);
    border-color: rgba(121, 210, 195, .72);
}

.developer-tools-layout .developer-message-templates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: -.25rem 0 .5rem;
}

.developer-tools-layout .developer-message-templates > span {
    margin-right: .125rem;
    color: var(--text-secondary);
    font-size: .75rem;
}

.developer-tools-layout .developer-message-templates button {
    min-height: 1.875rem;
    padding: 0 .625rem;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 7px;
    font-size: .75rem;
    white-space: nowrap;
}

.developer-tools-layout .developer-message-templates button:hover,
.developer-tools-layout .developer-message-templates button:focus-visible {
    color: var(--text-primary);
    border-color: rgba(121, 210, 195, .72);
}

.developer-tools-layout .developer-template-hint {
    margin: 0 0 1.125rem;
    color: var(--text-secondary);
    font-size: .75rem;
    line-height: 1.45;
}

.developer-tools-layout .developer-tools-actions {
    gap: .625rem;
}

.developer-tools-layout .developer-tools-actions button {
    min-width: 0;
    min-height: 2.25rem;
    padding: 0 1rem;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 7px;
    font-size: .8125rem;
}

.developer-tools-layout .developer-tools-actions .btn-primary {
    color: #08110f;
    background: #79d2c3;
    border-color: #79d2c3;
}

.developer-tools-layout .developer-tools-actions button:disabled {
    opacity: .46;
}

.developer-tools-layout .developer-debug-console {
    grid-template-rows: 3.125rem minmax(0, 1fr);
}

.developer-tools-layout .developer-debug-console-header {
    padding: 0 1.375rem;
    border-bottom-color: rgba(255, 255, 255, .12);
}

.developer-tools-layout pre {
    padding: 1.25rem 1.375rem;
    color: #d6d6d6;
    background: #111;
    font: .75rem/1.62 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width: 52.5rem) {
    .developer-tools-modal {
        width: min(94dvw, 46rem);
        height: min(90dvh, 52rem);
    }

    .developer-tools-workspace {
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(18rem, 1fr);
    }

    .developer-debug-panel { overflow: auto; }

    .developer-debug-inputs {
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid var(--theme-border);
    }
}

.admin-logs-filters {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid rgba(0, 212, 255, 0.06);
    border-radius: var(--radius-md);
    background: rgba(15, 20, 32, 0.55);
}

.admin-logs-filter-row {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.admin-logs-field {
    flex: 1;
    min-width: 10rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.admin-logs-field label {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.admin-logs-field input,
.admin-logs-field select {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid rgba(0, 212, 255, 0.08);
    border-radius: var(--radius-md);
    background: rgba(15, 20, 32, 0.85);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: all var(--transition-fast);
}

.admin-logs-field input:focus,
.admin-logs-field select:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 0.1875rem rgba(0, 212, 255, 0.15);
}

.admin-logs-filter-actions {
    display: flex;
    justify-content: flex-end;
}

.admin-logs-table {
    min-width: 53.75rem;
}

.admin-logs-content-cell {
    max-width: 26.25rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-secondary);
}

/* ============================================
   随意探索按钮样式
   ============================================ */

.btn-explore {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid rgba(0, 212, 255, 0.08);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.btn-explore:hover {
    background: rgba(0, 212, 255, 0.06);
    color: var(--text-primary);
    border-color: rgba(0, 212, 255, 0.12);
    transform: translateY(-1px);
}

.btn-explore:active {
    transform: translateY(0);
}

.btn-explore:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* 清空对话区按钮：次级操作，靠右低调展示 */
.btn-clear-chat {
    margin-left: auto;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: transparent;
    color: var(--text-tertiary);
    border: 1px solid rgba(239, 68, 68, 0.16);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.btn-clear-chat:hover {
    background: rgba(239, 68, 68, 0.08);
    color: var(--accent-red);
    border-color: rgba(239, 68, 68, 0.32);
    transform: translateY(-1px);
}

.btn-clear-chat:active {
    transform: translateY(0);
}

/* ============================================
   Tab 视图容器
   ============================================ */

.tab-views {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.tab-view {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    display: none;
    flex-direction: column;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 0.5rem 2rem var(--glass-shadow);
    overflow: hidden;
}

.tab-view.active {
    display: flex;
}

.tab-view.chat-area {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

.placeholder-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    text-align: center;
}

.placeholder-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-xl);
    opacity: 0.6;
}

.placeholder-content h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.placeholder-content p {
    font-size: 1rem;
    color: var(--text-secondary);
}

/* ============================================
   响应式断点
   ============================================ */

@media (min-width: 100rem) {
    .app-container {
        max-width: 100rem;
    }
}

@media (max-width: 75rem) {
    .status-panel {
        display: none;
    }
}

@media (max-width: 56.25rem) {
    .app-container {
        padding: var(--spacing-md);
    }

    .agent-selection-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 48rem) {
    .admin-users-modal {
        width: 96%;
    }

    .admin-users-toolbar {
        flex-direction: column;
    }

    .admin-batch-toolbar {
        flex-wrap: wrap;
    }

    .admin-users-pagination {
        justify-content: center;
    }
}

@media (max-width: 37.5rem) {
    :root {
        font-size: 0.875rem;
    }

    .app-header {
        padding-top: calc(var(--spacing-md) + env(safe-area-inset-top));
        padding-bottom: var(--spacing-md);
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
        gap: var(--spacing-sm);
    }

    .header-left {
        flex: 0 0 auto;
    }

    .header-right {
        display: flex;
        justify-content: flex-end;
        overflow: hidden;
    }

    .user-info {
        gap: var(--spacing-sm);
        max-width: 100%;
    }

    /* 管理功能仍可从桌面端使用；手机顶栏只保留身份与退出，
       避免两个管理按钮把整个 header 横向挤压缩放。 */
    #adminUsersBtn,
    #adminLogsBtn {
        display: none;
    }

    .user-name {
        max-width: 7.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .user-info .btn-text {
        flex: 0 0 auto;
    }

    .welcome-message h2 {
        font-size: 1.5rem;
    }

    .message {
        max-width: 95%;
    }

    .messages-container {
        padding: var(--spacing-lg);
    }

    .modal {
        width: 95%;
        border-radius: var(--radius-lg);
    }

    .app-container {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .input-wrapper {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .send-btn {
        width: 2rem;
        height: 2rem;
    }
}

@media (max-width: 26.875rem) {
    :root {
        font-size: 0.9375rem;
    }

    body {
        overflow-x: hidden;
    }

    .app-container {
        max-width: 26.875rem;
        margin: 0 auto;
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
        padding-bottom: 0;
    }

    .app-header {
        padding-top: calc(var(--spacing-md) + env(safe-area-inset-top));
        padding-bottom: var(--spacing-md);
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
        border-radius: var(--radius-lg);
        flex-shrink: 0;
    }

    .header-left {
        gap: var(--spacing-sm);
    }

    .dingdang-avatar {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 0.625rem;
    }

    .app-title {
        font-size: 1.15rem;
    }

    .app-main {
        gap: var(--spacing-sm);
        overflow: hidden;
        padding-top: calc(3.75rem + env(safe-area-inset-top));
    }

    .status-panel {
        display: none;
    }

    .tab-views {
        flex-grow: 1;
        overflow: hidden;
    }

    .tab-view {
        border-radius: var(--radius-lg);
    }

    .tab-view.chat-area {
        border-radius: var(--radius-lg);
    }

    .messages-container {
        padding: var(--spacing-lg);
    }

    .welcome-message {
        padding: var(--spacing-lg);
    }

    .welcome-avatar {
        width: 4rem;
        height: 4rem;
        border-radius: 1.125rem;
        margin-bottom: var(--spacing-lg);
    }

    .welcome-message h2 {
        font-size: 1.5rem;
    }

    .welcome-message p {
        max-width: 100%;
        font-size: 0.95rem;
        margin-bottom: var(--spacing-xl);
    }

    .message {
        max-width: 80%;
        margin-bottom: var(--spacing-lg);
        gap: var(--spacing-md);
    }

    .message.user {
        max-width: 78%;
    }

    .message-avatar {
        width: 2.125rem;
        height: 2.125rem;
        border-radius: 0.625rem;
    }

    .message-content-wrapper {
        max-width: calc(100% - 2.875rem);
    }

    .message-content {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: 0.92rem;
        line-height: 1.6;
        border-radius: 1.125rem;
    }

    .message.assistant .message-content {
        border-top-left-radius: 0.3125rem;
    }

    .message.user .message-content {
        border-top-right-radius: 0.3125rem;
    }

    .message-meta {
        margin-top: var(--spacing-xs);
        gap: var(--spacing-xs);
    }

    .meta-item {
        font-size: 0.65rem;
        padding: 0.1875rem 0.5rem;
    }

    .explore-area {
        padding: var(--spacing-sm) var(--spacing-lg);
    }

    .btn-explore {
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: 0.85rem;
        min-height: 2.5rem;
    }

    .input-area {
        padding: var(--spacing-md);
        flex-shrink: 0;
    }

    .input-wrapper {
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: 1.375rem;
        gap: var(--spacing-sm);
    }

    .input-wrapper textarea {
        font-size: 0.95rem;
        max-height: 7.5rem;
    }

    .send-btn {
        width: 2.5rem;
        height: 2.5rem;
        min-width: 2.5rem;
        min-height: 2.5rem;
    }

    .send-btn svg {
        width: 1.125rem;
        height: 1.125rem;
    }

    .image-upload-btn {
        width: 2.5rem;
        height: 2.5rem;
        min-width: 2.5rem;
        min-height: 2.5rem;
    }

    .image-upload-btn svg {
        width: 1.125rem;
        height: 1.125rem;
    }

    .image-preview-wrapper {
        padding: 0 var(--spacing-md) var(--spacing-sm);
    }

    .message-image img {
        max-width: 10rem;
    }

    .agent-selection-container {
        padding: var(--spacing-lg);
        margin: var(--spacing-md) 0;
        border-radius: var(--radius-lg);
    }

    .agent-selection-header {
        font-size: 1rem;
        margin-bottom: var(--spacing-md);
    }

    .agent-selection-columns {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .process-card {
        margin: var(--spacing-md) 0;
        border-radius: var(--radius-lg);
    }

    .process-card-header {
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .process-card-title {
        font-size: 0.95rem;
    }

    .process-card-body {
        padding: var(--spacing-lg);
    }

    .process-stage {
        padding-left: 2.25rem;
        padding-bottom: var(--spacing-lg);
    }

    .process-stage-dot {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.9rem;
    }

    .process-timeline::before {
        left: 0.8125rem;
    }

    .process-stage-title {
        font-size: 0.9rem;
    }

    .process-stage-status {
        font-size: 0.78rem;
    }

    .process-stage-detail {
        font-size: 0.78rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .process-stage-detail .agent-tag {
        font-size: 0.7rem;
    }

    .process-stage-detail .endpoint-tag {
        font-size: 0.7rem;
    }

    .placeholder-icon {
        font-size: 3.5rem;
    }

    .placeholder-content h2 {
        font-size: 1.35rem;
    }

    .placeholder-content p {
        font-size: 0.95rem;
    }

    .modal {
        width: 92%;
        max-width: 23.75rem;
        border-radius: var(--radius-lg);
    }

    .modal-header {
        padding: var(--spacing-lg);
    }

    .modal-header h2 {
        font-size: 1.1rem;
    }

    .modal-body {
        padding: var(--spacing-lg);
    }

    .btn-primary,
    .btn-secondary {
        min-height: 2.75rem;
    }
}

@media (min-width: 48.062rem) {
    .tab-view.chat-area {
        display: flex;
    }

    .tab-view-discover,
    .tab-view-profile {
        display: none !important;
    }
}

/* ============================================
   ACPs 调用过程卡片
   ============================================ */

.process-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    margin: var(--spacing-lg) 0;
    box-shadow: 
        0 0.5rem 2rem var(--glass-shadow),
        inset 0 1px 0 var(--glass-glow),
        0 0 1.25rem rgba(0, 212, 255, 0.06);
    overflow: hidden;
    animation: processCardSlideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes processCardSlideIn {
    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.process-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid rgba(0, 212, 255, 0.06);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast);
}

.process-card-header:hover {
    background: rgba(0, 212, 255, 0.03);
}

.process-card-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.process-card-identity {
    flex-basis: 100%;
    margin-left: calc(1.2rem + var(--spacing-md));
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.process-card-title-icon {
    font-size: 1.2rem;
}

.process-card-toggle {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    border: none;
    background: rgba(0, 212, 255, 0.06);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all var(--transition-fast);
}

.process-card-toggle:hover {
    background: rgba(0, 212, 255, 0.08);
    color: var(--text-primary);
}

.process-card-toggle.collapsed {
    transform: rotate(-90deg);
}

.process-card-body {
    padding: var(--spacing-xl);
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    overflow: hidden;
}

.process-card-body.collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* ============================================
   ACPs Agent 结果卡片
   ============================================ */

.agent-result-card {
    width: min(47.5rem, 100%);
    margin: var(--spacing-lg) 0;
    border: 1px solid rgba(44, 44, 62, 0.12);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 0.625rem 1.875rem rgba(44, 44, 62, 0.10);
    overflow: hidden;
    animation: agentResultCardEnter 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
    will-change: transform, opacity;
}

@keyframes agentResultCardEnter {
    from {
        opacity: 0;
        transform: translateY(1.125rem) scale(0.985);
        filter: blur(0.1875rem);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.agent-result-card-updated {
    animation: agentResultCardUpdate 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.agent-result-card-updated .agent-result-body,
.agent-result-card-updated .agent-result-evidence,
.agent-result-card-updated .agent-raw-result {
    animation: agentResultContentReveal 0.46s ease both;
}

@keyframes agentResultCardUpdate {
    0% {
        transform: translateY(0) scale(0.995);
        box-shadow: 0 0.625rem 1.875rem rgba(44, 44, 62, 0.10);
        border-color: rgba(32, 150, 116, 0.16);
    }
    45% {
        transform: translateY(-0.1875rem) scale(1.006);
        box-shadow: 0 1.125rem 2.625rem rgba(32, 150, 116, 0.18);
        border-color: rgba(32, 150, 116, 0.36);
    }
    100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 0.625rem 1.875rem rgba(44, 44, 62, 0.10);
        border-color: rgba(44, 44, 62, 0.12);
    }
}

@keyframes agentResultContentReveal {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.agent-result-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid rgba(44, 44, 62, 0.08);
}

.agent-result-kicker {
    margin-bottom: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.agent-result-title {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.agent-result-state {
    flex: 0 0 auto;
    border-radius: 62.438rem;
    padding: 0.25rem 0.625rem;
    background: rgba(32, 150, 116, 0.12);
    color: #16775c;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.agent-result-card.failed .agent-result-state,
.agent-result-card.rejected .agent-result-state,
.agent-result-card.canceled .agent-result-state,
.agent-result-card.error .agent-result-state {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.agent-result-body {
    padding: var(--spacing-lg) var(--spacing-xl);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.agent-a2ui-surface {
    width: 100%;
    min-width: 0;
}

.a2ui-mc-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-width: 0;
}

.a2ui-mc-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-width: 0;
}

.a2ui-mc-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    min-width: 0;
    flex-wrap: wrap;
}

.a2ui-mc-divider {
    width: 100%;
    height: 1px;
    border: 0;
    background: rgba(44, 44, 62, 0.10);
}

.a2ui-mc-text {
    max-width: 100%;
    color: var(--text-primary);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.a2ui-mc-text-h1,
.a2ui-mc-text-h2,
.a2ui-mc-text-h3 {
    font-family: var(--font-display);
    font-weight: 700;
}

.a2ui-mc-text-h1 {
    font-size: 1.24rem;
}

.a2ui-mc-text-h2 {
    font-size: 1.12rem;
}

.a2ui-mc-text-h3 {
    font-size: 1rem;
}

.a2ui-mc-text-caption {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
}

.a2ui-mc-markdown {
    min-width: 0;
}

/* Generic JSON values stay readable without depending on a response schema. */
.json-tree-root,
.json-tree-raw-disclosure {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 212, 255, 0.26);
    border-radius: 0.5rem;
}

.json-tree-root {
    margin: 0.625rem 0 0.875rem;
    padding: 0.625rem;
    background: rgba(4, 24, 45, 0.42);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.5;
}

.json-tree-container,
.json-tree-scalar {
    min-width: 0;
    max-width: 100%;
}

.json-tree-root > summary,
.json-tree-container > summary,
.json-tree-scalar > summary {
    cursor: pointer;
    color: #9fe8ff;
    overflow-wrap: anywhere;
}

.json-tree-children {
    min-width: 0;
    margin: 0.5rem 0 0;
    padding-left: clamp(0.625rem, 2vw, 1.125rem);
    border-left: 1px solid rgba(125, 249, 255, 0.18);
}

.json-tree-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    min-width: 0;
    padding: 0.125rem 0;
}

.json-tree-key {
    color: #c4b5fd;
    overflow-wrap: anywhere;
}

.json-tree-separator {
    color: rgba(191, 219, 254, 0.7);
}

.json-tree-row > :last-child {
    min-width: 0;
    max-width: 100%;
}

.json-tree-string {
    color: rgba(226, 242, 255, 0.92);
    overflow-wrap: anywhere;
}

.json-tree-number,
.json-tree-boolean {
    color: #7df9ff;
}

.json-tree-null {
    color: rgba(191, 219, 254, 0.7);
}

.json-tree-link {
    color: #7df9ff;
    overflow-wrap: anywhere;
}

.json-tree-scalar {
    flex: 1 1 12rem;
    margin: 0.125rem 0;
    padding: 0.3125rem 0.5rem;
    border: 1px solid rgba(125, 249, 255, 0.18);
    border-radius: 0.375rem;
    background: rgba(2, 16, 36, 0.35);
}

.json-tree-scalar > summary {
    color: #d8edfb;
}

.json-tree-scalar > .json-tree-string {
    display: block;
    margin-top: 0.375rem;
}

.json-tree-truncated {
    margin-top: 0.375rem;
    padding: 0.3125rem 0.5rem;
    border: 1px dashed rgba(125, 249, 255, 0.28);
    border-radius: 0.375rem;
    color: rgba(191, 219, 254, 0.8);
    overflow-wrap: anywhere;
}

@media (max-width: 37.5rem) {
    .json-tree-root {
        padding: 0.5rem;
        font-size: 0.78rem;
    }

    .json-tree-children {
        padding-left: 0.625rem;
    }

    .json-tree-row {
        align-items: flex-start;
    }

    .json-tree-scalar {
        flex-basis: 100%;
    }
}

.markdown-table-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0.625rem 0 0.875rem;
    overflow-x: auto;
    border: 1px solid var(--theme-border);
    border-radius: 0.5rem;
    background: var(--result-card-muted-surface);
}

.markdown-table {
    width: 100%;
    min-width: 17.5rem;
    border-collapse: collapse;
    color: var(--text-primary);
    font-size: 0.84rem;
    line-height: 1.45;
}

.markdown-table th,
.markdown-table td {
    border-bottom: 1px solid var(--theme-border);
    padding: 0.5625rem 0.625rem;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.markdown-table th {
    background: var(--surface-hover);
    color: var(--theme-text-primary);
    font-weight: 800;
    white-space: nowrap;
}

.markdown-table td {
    color: var(--theme-text-secondary);
}

.markdown-table tbody tr:last-child td {
    border-bottom: 0;
}

.a2ui-mc-image {
    display: block;
    width: 100%;
    max-height: 13.75rem;
    border-radius: var(--radius-md);
    object-fit: cover;
}

.a2ui-mc-button {
    align-self: flex-start;
    border: 1px solid rgba(44, 44, 62, 0.10);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    background: rgba(44, 44, 62, 0.06);
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.weather-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(22, 119, 255, 0.14);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    background:
        linear-gradient(135deg, rgba(232, 246, 255, 0.92), rgba(255, 255, 255, 0.86) 48%, rgba(238, 250, 244, 0.88)),
        #ffffff;
}

.weather-card-topline,
.weather-card-hero,
.weather-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    min-width: 0;
}

.weather-card-badge {
    flex: 0 0 auto;
    border-radius: 62.438rem;
    padding: 0.25rem 0.5625rem;
    background: rgba(22, 119, 255, 0.12);
    color: #165dba;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.weather-card-source {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 0.72rem;
    overflow-wrap: normal;
    text-align: right;
}

.weather-card-title {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.14rem;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.weather-card-subtitle {
    margin-top: 0.1875rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.weather-visual-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 16.25rem;
    border: 1px solid rgba(22, 119, 255, 0.12);
    border-radius: 0.5rem;
    padding: 1rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 74% 12%, rgba(22, 119, 255, 0.22), transparent 34%),
        linear-gradient(145deg, rgba(12, 28, 54, 0.90), rgba(16, 42, 72, 0.72));
}

.weather-visual-stage > * {
    position: relative;
    z-index: 1;
}

.weather-visual-image,
.weather-visual-scan,
.weather-visual-rain,
.weather-visual-cloud {
    position: absolute;
    pointer-events: none;
}

.weather-visual-image {
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(5, 15, 35, 0.08), rgba(5, 15, 35, 0.66)),
        var(--weather-city-image, radial-gradient(circle at 74% 20%, rgba(80, 200, 255, 0.28), transparent 28%), linear-gradient(160deg, rgba(12, 32, 64, 0.96), rgba(2, 10, 26, 0.86)));
    background-size: cover;
    background-position: center 50%;
    transform: scale(1.015);
}

.weather-visual-stage.is-generic-city .weather-visual-image::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 46%;
    background:
        linear-gradient(90deg, transparent 0 4%, rgba(125, 249, 255, 0.35) 4% 5%, transparent 5% 14%, rgba(125, 249, 255, 0.20) 14% 16%, transparent 16% 30%, rgba(125, 249, 255, 0.28) 30% 31%, transparent 31% 44%, rgba(125, 249, 255, 0.24) 44% 45%, transparent 45% 58%, rgba(125, 249, 255, 0.18) 58% 60%, transparent 60%),
        linear-gradient(180deg, transparent 0 20%, rgba(2, 10, 26, 0.72) 20% 100%);
    clip-path: polygon(0 75%, 8% 61%, 12% 67%, 17% 44%, 24% 72%, 31% 50%, 36% 68%, 44% 38%, 53% 70%, 62% 46%, 70% 66%, 76% 42%, 82% 72%, 88% 56%, 100% 76%, 100% 100%, 0 100%);
}

.weather-visual-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(2, 10, 26, 0.10), rgba(2, 10, 26, 0.54)),
        radial-gradient(circle at 18% 76%, rgba(0, 212, 255, 0.22), transparent 26%);
}

.weather-visual-scan {
    inset: 0;
    z-index: 1;
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 0.5625rem),
        linear-gradient(90deg, rgba(125, 249, 255, 0.18), transparent 26%, transparent 72%, rgba(168, 85, 247, 0.14));
    opacity: 0.38;
}

.weather-visual-header,
.weather-visual-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.875rem;
}

.weather-visual-main {
    align-items: flex-end;
}

.weather-symbol-orb {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    border: 1px solid rgba(125, 249, 255, 0.52);
    border-radius: 50%;
    background:
        radial-gradient(circle at 36% 26%, rgba(255, 255, 255, 0.22), transparent 20%),
        radial-gradient(circle, rgba(0, 212, 255, 0.22), rgba(2, 10, 26, 0.78) 62%);
    color: #dffcff;
    box-shadow:
        0 0 1.5rem rgba(0, 212, 255, 0.28),
        0 0 2rem rgba(0, 212, 255, 0.16) inset;
}

.weather-symbol-orb span {
    font-size: 2rem;
    line-height: 1;
    filter: drop-shadow(0 0 0.75rem rgba(125, 249, 255, 0.72));
}

.weather-visual-condition {
    margin-top: 0.375rem;
    color: rgba(226, 242, 255, 0.90);
    font-size: 0.86rem;
    font-weight: 850;
}

.weather-card-temp {
    flex: 0 0 auto;
    color: #134e4a;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 850;
    line-height: 1;
    text-align: right;
}

.weather-card-summary {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.94rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.weather-card-summary strong {
    font-weight: 850;
}

.weather-card-summary code {
    border-radius: 0.25rem;
    padding: 1px 0.3125rem;
    background: rgba(44, 44, 62, 0.08);
    font-size: 0.88em;
}

.weather-card-summary a {
    color: #1677ff;
    font-weight: 800;
    text-decoration: none;
}

.weather-source-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-sm);
}

.weather-forecast-panel {
    border: 1px solid rgba(0, 212, 255, 0.18);
    border-radius: 0.5rem;
    padding: 0.75rem;
    background: rgba(2, 10, 26, 0.44);
}

.weather-forecast-head,
.weather-forecast-row {
    display: grid;
    grid-template-columns: minmax(5.5rem, 1fr) minmax(4.75rem, 1fr) minmax(5.125rem, 1fr);
    align-items: center;
    gap: 0.625rem;
}

.weather-forecast-head {
    margin-bottom: 0.5rem;
    color: rgba(125, 249, 255, 0.86);
    font-size: 0.75rem;
    font-weight: 850;
}

.weather-forecast-head small {
    grid-column: 2 / -1;
    color: rgba(191, 219, 254, 0.66);
    font-size: 0.7rem;
    text-align: right;
}

.weather-forecast-list {
    display: grid;
    gap: 0.4375rem;
}

.weather-forecast-row {
    min-height: 2.125rem;
    border-radius: 0.5rem;
    padding: 0.4375rem 0.5rem;
    background: rgba(125, 249, 255, 0.06);
    color: rgba(226, 242, 255, 0.90);
    font-size: 0.76rem;
}

.weather-forecast-row strong,
.weather-forecast-row em {
    color: #f8fdff;
    font-style: normal;
    font-weight: 850;
}

.weather-source-item {
    min-width: 0;
    border: 1px solid rgba(44, 44, 62, 0.08);
    border-radius: var(--radius-sm);
    padding: 0.5625rem 0.6875rem;
    background: rgba(255, 255, 255, 0.54);
}

.weather-source-item span {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.70rem;
    font-weight: 800;
}

.weather-source-item strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.82rem;
    line-height: 1.45;
    word-break: normal;
    overflow-wrap: break-word;
}

.weather-input-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    border: 1px solid rgba(22, 119, 255, 0.18);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.64);
}

.weather-input-copy {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.weather-input-copy strong {
    color: var(--text-primary);
    font-size: 0.92rem;
}

.weather-input-copy span {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.weather-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--spacing-sm);
    min-width: 0;
}

.weather-location-input {
    min-width: 0;
    border: 1px solid rgba(44, 44, 62, 0.12);
    border-radius: var(--radius-sm);
    padding: 0.625rem 0.75rem;
    background: rgba(255, 255, 255, 0.86);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
}

.weather-location-input:focus {
    border-color: rgba(22, 119, 255, 0.42);
    box-shadow: 0 0 0 0.1875rem rgba(22, 119, 255, 0.12);
}

.weather-input-submit,
.weather-use-location {
    border: 1px solid rgba(22, 119, 255, 0.20);
    border-radius: var(--radius-sm);
    padding: 0.625rem 0.75rem;
    background: linear-gradient(135deg, #1677ff, #20a67a);
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 800;
    cursor: pointer;
}

.weather-use-location {
    width: fit-content;
    background: rgba(22, 119, 255, 0.10);
    color: #165dba;
}

.weather-use-location:disabled {
    cursor: not-allowed;
    opacity: 0.46;
}

.weather-live-bar {
    position: relative;
    height: 0.25rem;
    overflow: hidden;
    border-radius: 62.438rem;
    background: rgba(22, 119, 255, 0.10);
}

.weather-live-bar span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1677ff, #20a67a);
    animation: weatherLiveSweep 1.2s ease-in-out infinite;
}

.weather-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-sm);
}

.weather-metric {
    min-width: 0;
    border: 1px solid rgba(44, 44, 62, 0.08);
    border-radius: var(--radius-sm);
    padding: 0.625rem 0.75rem;
    background: rgba(255, 255, 255, 0.62);
}

.weather-metric span {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
}

.weather-metric strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.96rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.weather-detail-panel {
    border: 1px solid rgba(44, 44, 62, 0.08);
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.875rem;
    background: rgba(255, 255, 255, 0.58);
}

.weather-detail-panel > span {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 800;
}

.weather-detail-list {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    padding-left: 1.125rem;
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.48;
}

.weather-detail-list li {
    overflow-wrap: anywhere;
}

.weather-chart-wrap .agent-chart {
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.72);
}

.weather-card-foot {
    align-items: flex-start;
    color: var(--text-secondary);
    font-size: 0.74rem;
    line-height: 1.45;
    flex-wrap: wrap;
}

@keyframes weatherLiveSweep {
    0% {
        transform: translateX(-100%);
    }
    55% {
        transform: translateX(85%);
    }
    100% {
        transform: translateX(240%);
    }
}

.agent-result-markdown + .agent-chart,
.agent-chart + .agent-result-markdown {
    margin-top: var(--spacing-lg);
}

.agent-result-body .message-content,
.agent-result-markdown {
    max-width: 100%;
}

.agent-chart {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-lg);
    border: 1px solid rgba(44, 44, 62, 0.10);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.64);
}

.agent-chart-title {
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
}

.agent-chart-svg {
    display: block;
    width: 100%;
    height: 11.25rem;
}

.agent-chart-line {
    fill: none;
    stroke: #1677ff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.agent-chart-point {
    fill: #1677ff;
    stroke: white;
    stroke-width: 2;
}

.agent-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-md);
    height: 11.25rem;
    min-width: 0;
    overflow-x: auto;
    padding-top: var(--spacing-xl);
}

.agent-chart-bar-item {
    flex: 1 0 2.625rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-width: 2.625rem;
}

.agent-chart-bar-value {
    min-height: 1.25rem;
    color: var(--text-secondary);
    font-size: 0.72rem;
    overflow-wrap: anywhere;
}

.agent-chart-bar {
    width: 70%;
    min-height: 0.375rem;
    border-radius: 0.375rem 0.375rem 0.125rem 0.125rem;
    background: linear-gradient(180deg, #1677ff, #42b883);
}

.agent-chart-label {
    width: 100%;
    margin-top: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: 0.72rem;
    text-align: center;
    overflow-wrap: anywhere;
}

.agent-chart-pie-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.agent-chart-pie-row {
    display: grid;
    grid-template-columns: 0.875rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-primary);
    font-size: 0.88rem;
}

.agent-chart-pie-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: #1677ff;
}

.agent-chart-pie-name,
.agent-chart-pie-value {
    overflow-wrap: anywhere;
}

.agent-chart-pie-value {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.agent-chart-empty,
.agent-chart-fallback {
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.agent-result-evidence {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-xl) var(--spacing-lg);
}

.agent-evidence-item {
    max-width: 100%;
    border: 1px solid rgba(44, 44, 62, 0.08);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem;
    background: rgba(44, 44, 62, 0.04);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.agent-evidence-item strong {
    margin-right: 0.375rem;
    color: var(--text-primary);
    font-family: var(--font-text);
}

.agent-raw-result {
    border-top: 1px solid rgba(44, 44, 62, 0.08);
    padding: var(--spacing-md) var(--spacing-xl) var(--spacing-lg);
}

.agent-raw-result summary {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
}

.agent-raw-result pre,
.agent-chart-fallback {
    max-height: 16.25rem;
    overflow: auto;
    margin-top: var(--spacing-sm);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.04);
    padding: var(--spacing-md);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 37.5rem) {
    .agent-result-card {
        width: 100%;
        margin: var(--spacing-md) 0;
        border-radius: var(--radius-md);
    }

    .agent-result-card-header,
    .agent-result-body,
    .agent-result-evidence,
    .agent-raw-result {
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }

    .agent-result-card-header {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .agent-result-state {
        align-self: flex-start;
    }

    .agent-chart {
        padding: var(--spacing-md);
    }

    .agent-chart-svg,
    .agent-chart-bars {
        height: 9.375rem;
    }
}

.process-timeline {
    position: relative;
    padding-left: 0.5rem;
}

.process-timeline::before {
    content: '';
    position: absolute;
    left: 0.9375rem;
    top: 0.75rem;
    bottom: 0.75rem;
    width: 0.125rem;
    background: rgba(0, 212, 255, 0.06);
    border-radius: 1px;
}

.process-stage {
    position: relative;
    padding-left: 2.5rem;
    padding-bottom: var(--spacing-xl);
    transition: all var(--transition-normal);
}

.process-stage:last-child {
    padding-bottom: 0;
}

.process-stage:last-child::after {
    content: none;
}

.process-stage-dot {
    position: absolute;
    left: 0;
    top: 0.125rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: rgba(0, 212, 255, 0.06);
    border: 0.125rem solid rgba(0, 212, 255, 0.08);
    z-index: 1;
    transition: all var(--transition-normal);
}

.process-stage.pending .process-stage-dot {
    background: rgba(0, 212, 255, 0.06);
    border-color: rgba(0, 212, 255, 0.08);
    opacity: 0.5;
}

.process-stage.pending .process-stage-dot::after {
    content: '';
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(0, 212, 255, 0.12);
}

.process-stage.running .process-stage-dot {
    background: rgba(0, 212, 255, 0.12);
    border-color: var(--accent-blue);
    animation: stagePulse 2s ease-in-out infinite;
}

@keyframes stagePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.3); }
    50% { box-shadow: 0 0 0 0.5rem rgba(0, 212, 255, 0); }
}

.process-stage.completed .process-stage-dot {
    background: rgba(34, 211, 238, 0.1);
    border-color: var(--accent-green);
}

.process-stage.completed .process-stage-dot::after {
    content: '✓';
    position: absolute;
    font-size: 0.85rem;
    color: var(--accent-green);
    font-weight: 700;
}

.process-stage.error .process-stage-dot {
    background: rgba(239, 68, 68, 0.12);
    border-color: var(--accent-red);
}

.process-stage.error .process-stage-dot::after {
    content: '✕';
    position: absolute;
    font-size: 0.85rem;
    color: var(--accent-red);
    font-weight: 700;
}

.process-stage-content {
    min-height: 2rem;
}

.process-stage-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    transition: all var(--transition-fast);
}

.process-stage.pending .process-stage-title {
    color: var(--text-tertiary);
    font-weight: 500;
}

.process-stage.running .process-stage-title {
    color: var(--accent-blue);
}

.process-stage.completed .process-stage-title {
    color: var(--accent-green);
}

.process-stage.error .process-stage-title {
    color: var(--accent-red);
}

.process-stage-status {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
    transition: all var(--transition-fast);
    margin-left: calc(1.2rem + var(--spacing-sm));
}

.process-stage.pending .process-stage-status {
    color: var(--text-tertiary);
    opacity: 0.6;
}

.process-stage-detail {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 212, 255, 0.03);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.process-stage-detail ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.process-stage-detail li {
    padding: 0.125rem 0;
}

.process-stage-detail .agent-tag {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: rgba(15, 20, 32, 0.85);
    border-radius: 0.625rem;
    font-size: 0.75rem;
    margin: 0.125rem 0.25rem 0.125rem 0;
    border: 1px solid rgba(0, 212, 255, 0.06);
}

.process-stage-detail .endpoint-tag {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    background: rgba(0, 212, 255, 0.1);
    color: var(--accent-blue);
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    display: inline-block;
}

.process-stage-detail .status-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 0.625rem;
    font-size: 0.7rem;
    font-weight: 500;
    margin-left: 0.375rem;
}

.status-badge.running {
    background: rgba(0, 212, 255, 0.12);
    color: var(--accent-blue);
}

.status-badge.success {
    background: rgba(34, 211, 238, 0.1);
    color: var(--accent-green);
}

.status-badge.error {
    background: rgba(239, 68, 68, 0.12);
    color: var(--accent-red);
}

.status-badge.pending {
    background: rgba(0, 212, 255, 0.06);
    color: var(--text-tertiary);
}

/* ============================================
   无障碍 & 减少动效
   ============================================ */

/* Rich collaboration and partner output are workspace modules, not chat bubbles. */
.messages-container .message.collaboration-message,
.messages-container .message.agent-result-message,
.messages-container .message.agent-raw-result-message {
    width: 100%;
    max-width: 100%;
}

.messages-container .message.collaboration-message .message-content-wrapper,
.messages-container .message.agent-result-message .message-content-wrapper,
.messages-container .message.agent-raw-result-message .message-content-wrapper {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
}

.messages-container .collaboration-run-card,
.messages-container .message.agent-result-message .message-content,
.messages-container .message.agent-raw-result-message .message-content,
.messages-container .agent-result-card {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
    .bg-gradient-orb { animation: none !important; opacity: 0.4; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Agent discovery A: soft hierarchy — use surfaces and selection tint, not nested frames. */
.conversation-canvas .inline-agent-discovery {
    padding: 1rem 0 0.75rem;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.inline-agent-discovery .agent-selection-header {
    padding: 0 0.5rem;
}

.inline-agent-discovery .agent-selection-total,
.inline-agent-discovery .column-count {
    border: 0;
    background: color-mix(in srgb, var(--surface-elevated) 78%, transparent);
}

.inline-agent-discovery .agent-selection-columns {
    gap: 0.875rem;
    padding: 0.75rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface-elevated) 54%, transparent);
}

.inline-agent-discovery .agent-column {
    padding: 0.25rem;
}

.inline-agent-discovery .agent-column + .agent-column {
    padding-left: 0.25rem;
    border-left: 0;
}

.inline-agent-discovery .agent-column-header {
    margin: 0 0 0.375rem;
    padding: 0.125rem 0.375rem 0.5rem;
    border-bottom: 0;
}

.inline-agent-discovery .agent-list {
    gap: 0.25rem;
}

.inline-agent-discovery .agent-item {
    padding: 0.75rem 0.625rem;
    border: 0;
    border-bottom: 0;
    border-radius: 0.75rem;
    background: transparent;
}

.inline-agent-discovery .agent-item:hover {
    background: color-mix(in srgb, var(--surface-hover) 82%, transparent);
}

.inline-agent-discovery .agent-item:has(.agent-checkbox:checked) {
    background: color-mix(in srgb, var(--accent-primary) 9%, var(--surface-elevated));
}

.inline-agent-discovery .agent-assigned-task-input {
    border-color: transparent;
    background: color-mix(in srgb, var(--surface-canvas) 82%, var(--surface-elevated));
    box-shadow: none;
}

.inline-agent-discovery .agent-assigned-task-input:focus {
    border-color: color-mix(in srgb, var(--accent-primary) 52%, transparent);
    box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--accent-primary) 14%, transparent);
}

.inline-agent-discovery .agent-execute-footer {
    position: static;
    margin: 0.75rem 0 0;
    padding: 0.25rem 0.5rem 0;
    border-top: 0;
    background: transparent;
    backdrop-filter: none;
}

.inline-agent-discovery .btn-view-more-agents {
    margin: 0;
    border-color: transparent;
    background: color-mix(in srgb, var(--surface-elevated) 70%, transparent);
}

@media (max-width: 48rem) {
    .conversation-canvas .inline-agent-discovery {
        padding: 0.875rem 0 0.625rem;
    }

    .inline-agent-discovery .agent-selection-columns {
        padding: 0.625rem;
    }

    .inline-agent-discovery .agent-column + .agent-column {
        padding-left: 0.25rem;
        border-top: 0;
    }
}

/* Agent discovery: the final layout is intentionally proportional to its message area. */
.conversation-canvas .inline-agent-discovery {
    width: 72%;
    max-width: none;
    margin: 0 auto 2.4%;
    padding: 2.2%;
    border: 0;
    border-radius: 1.5em;
    background: color-mix(in srgb, var(--surface-elevated) 88%, var(--surface-canvas));
}

.inline-agent-discovery .agent-selection-header {
    margin: 0 0 2%;
    padding: 0;
    border: 0;
}

.inline-agent-discovery .agent-selection-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.inline-agent-discovery .agent-column { padding: 0 4%; border: 0; }
.inline-agent-discovery .agent-column:first-child { padding-left: 0; }
.inline-agent-discovery .agent-column:last-child { padding-right: 0; }
.inline-agent-discovery .agent-column + .agent-column { border-left: 1px solid var(--theme-border); }
.inline-agent-discovery .agent-column-header { margin: 0; padding: 0 0 3%; border-bottom: 0; }
.inline-agent-discovery .agent-list { gap: 0; }
.inline-agent-discovery .agent-item { padding: 4% 0; border-bottom: 1px solid var(--theme-border); }
.inline-agent-discovery .agent-item:last-child { border-bottom: 0; }
.inline-agent-discovery .agent-execute-footer { position: static; margin: 2% 0 0; padding: 2% 0 0; border-top: 1px solid var(--theme-border); background: transparent; backdrop-filter: none; }
.inline-agent-discovery .agent-assigned-task-input { min-height: 4.5em; padding: .6em .7em; border-radius: .7em; }

@media (max-width: 48em) {
    .conversation-canvas .inline-agent-discovery { width: 100%; padding: 4%; }
    .inline-agent-discovery .agent-selection-columns { grid-template-columns: 1fr; }
    .inline-agent-discovery .agent-column { padding: 4% 0 0; }
    .inline-agent-discovery .agent-column + .agent-column { border-top: 1px solid var(--theme-border); border-left: 0; }
}

/* ============================================
   发现页样式
   ============================================ */

.discover-container {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    scroll-behavior: smooth;
}

.discover-search-bar {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.discover-search-input {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid rgba(0, 212, 255, 0.06);
    border-radius: var(--radius-lg);
    font-size: 0.95rem;
    outline: none;
    transition: all var(--transition-fast);
    background: rgba(15, 20, 32, 0.75);
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
    font-family: var(--font-text);
    min-height: 2.75rem;
}

.discover-search-input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 0.1875rem rgba(0, 212, 255, 0.15);
    background: rgba(15, 20, 32, 0.85);
}

.discover-search-btn {
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    background: linear-gradient(135deg, var(--accent-blue), #7c3aed);
    color: white;
    border-radius: var(--radius-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 212, 255, 0.3);
    flex-shrink: 0;
}

.discover-search-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0.375rem 1rem rgba(0, 212, 255, 0.4);
}

.discover-search-btn:active {
    transform: scale(0.95);
}

.discover-categories {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.category-tag {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid rgba(0, 212, 255, 0.06);
    background: rgba(15, 20, 32, 0.7);
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
    border-radius: 1.25rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.9rem;
    color: var(--text-secondary);
    min-height: 2.5rem;
}

.category-tag:hover {
    background: rgba(15, 20, 32, 0.92);
    transform: translateY(-1px);
    color: var(--text-primary);
}

.category-tag.active {
    background: linear-gradient(135deg, var(--accent-blue), #7c3aed);
    color: white;
    border-color: transparent;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 212, 255, 0.3);
}

.category-icon {
    font-size: 1.1rem;
}

.category-label {
    font-weight: 500;
}

.discover-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.discover-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.discover-section-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.discover-agents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    gap: var(--spacing-lg);
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow:
        0 0.25rem 1rem rgba(0, 0, 0, 0.25),
        inset 0 1px 0 var(--glass-glow);
    transition: all var(--transition-fast);
}

.discover-agent-card {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    cursor: pointer;
}

.discover-agent-card:hover {
    transform: translateY(-0.1875rem);
    box-shadow: 
        0 0.5rem 1.5rem rgba(0, 0, 0, 0.4),
        inset 0 1px 0 var(--glass-glow);
    border-color: rgba(0, 212, 255, 0.3);
}

.agent-card-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    background: rgba(15, 20, 32, 0.7);
    border-radius: var(--radius-md);
}

.agent-card-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.agent-card-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.agent-card-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.discover-more-section {
    display: flex;
    justify-content: center;
    padding-top: var(--spacing-md);
}

.btn-discover-more {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-2xl);
    border: 1px solid rgba(0, 212, 255, 0.3);
    background: rgba(0, 212, 255, 0.1);
    color: var(--accent-blue);
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    min-height: 2.75rem;
}

.btn-discover-more:hover {
    background: rgba(0, 212, 255, 0.15);
    transform: translateY(-1px);
}

.btn-discover-more:active {
    transform: translateY(0);
}

/* ============================================
   我的页样式
   ============================================ */

.profile-container {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    scroll-behavior: smooth;
}

.profile-user-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
}

.profile-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.5rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 212, 255, 0.3);
    flex-shrink: 0;
}

.profile-user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

.profile-username {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-role {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.profile-menu-list {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow:
        0 0.25rem 1rem rgba(0, 0, 0, 0.25),
        inset 0 1px 0 var(--glass-glow);
    overflow: hidden;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-xl);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 3.25rem;
    border-bottom: 1px solid rgba(0, 212, 255, 0.05);
}

.profile-menu-item:last-child {
    border-bottom: none;
}

.profile-menu-item:hover {
    background: rgba(0, 212, 255, 0.08);
}

.profile-menu-item:active {
    background: rgba(0, 212, 255, 0.12);
}

.menu-item-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    width: 1.75rem;
    text-align: center;
}

.menu-item-label {
    flex: 1;
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 500;
}

.menu-item-arrow {
    color: var(--text-tertiary);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.profile-logout-section {
    margin-top: auto;
    padding-top: var(--spacing-md);
}

.btn-logout {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-xl);
    background: rgba(239, 68, 68, 0.12);
    color: var(--accent-red);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    min-height: 3rem;
}

.btn-logout:hover {
    background: rgba(239, 68, 68, 0.15);
    transform: translateY(-1px);
}

.btn-logout:active {
    transform: translateY(0);
}

/* ============================================
   弹窗移动端适配优化
   ============================================ */

@media (max-width: 26.875rem) {
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .modal {
        width: 100%;
        max-width: 100%;
        border-radius: 1.25rem 1.25rem 0 0;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        animation: modalSlideUpMobile 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    @keyframes modalSlideUpMobile {
        from {
            transform: translateY(100%);
            opacity: 1;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .modal-header {
        padding: var(--spacing-lg);
        position: relative;
        flex-shrink: 0;
    }

    .modal-header::before {
        content: '';
        position: absolute;
        top: 0.5rem;
        left: 50%;
        transform: translateX(-50%);
        width: 2.25rem;
        height: 0.25rem;
        background: rgba(0, 212, 255, 0.2);
        border-radius: 0.125rem;
    }

    .modal-header h2 {
        font-size: 1.05rem;
        text-align: center;
        flex: 1;
        padding-top: 0.25rem;
    }

    .close-btn {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.4rem;
        position: absolute;
        right: var(--spacing-md);
        top: 50%;
        transform: translateY(-50%);
    }

    .modal-body {
        padding: var(--spacing-lg);
        overflow-y: auto;
        flex: 1;
        -webkit-overflow-scrolling: touch;
    }

    .form-group {
        margin-bottom: var(--spacing-lg);
    }

    .form-group input {
        min-height: 3rem;
        font-size: 1rem;
        padding: var(--spacing-md) var(--spacing-lg);
        border-radius: var(--radius-lg);
    }

    .form-group label {
        font-size: 0.9rem;
        margin-bottom: var(--spacing-sm);
    }

    .btn-primary,
    .btn-secondary {
        min-height: 3rem;
        font-size: 1rem;
        border-radius: var(--radius-lg);
    }

    .switch-mode {
        margin-top: var(--spacing-xl);
        padding-bottom: var(--spacing-md);
    }

    .user-info-modal,
    .admin-users-modal {
        max-width: 100% !important;
        width: 100% !important;
    }

    .admin-users-toolbar {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .admin-users-toolbar input {
        min-height: 2.75rem;
    }

    .admin-users-pagination {
        justify-content: center;
        flex-wrap: wrap;
    }

    .admin-users-table-wrap {
        max-height: 50vh;
    }

    .certificate-section {
        padding: var(--spacing-md);
    }

    .certificate-actions {
        flex-direction: column;
    }

    .certificate-actions .btn-primary {
        width: 100%;
    }
}

@media (max-width: 37.5rem) {
    .close-btn {
        width: 2.5rem;
        height: 2.5rem;
    }

    .form-group input {
        min-height: 2.75rem;
    }

    .btn-primary,
    .btn-secondary {
        min-height: 2.75rem;
    }
}

/* ============================================
   智能体选择面板移动端优化
   ============================================ */

@media (max-width: 26.875rem) {
    .agent-selection-columns {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .agent-column {
        padding: var(--spacing-md);
    }

    .agent-item {
        padding: var(--spacing-md);
        gap: var(--spacing-md);
        height: auto;
        min-height: 4rem;
    }

    .agent-item.ioa-item {
        align-items: flex-start;
    }

    .agent-checkbox-wrapper {
        padding-top: 0.125rem;
        display: flex;
        align-items: center;
    }

    .agent-checkbox {
        width: 1.375rem;
        height: 1.375rem;
    }

    .agent-name {
        font-size: 0.95rem;
    }

    .agent-description {
        font-size: 0.82rem;
    }

    .agent-execute-footer {
        margin-top: var(--spacing-md);
        padding-top: var(--spacing-md);
    }

    .btn-execute-agents {
        min-height: 3rem;
        font-size: 1rem;
        border-radius: var(--radius-lg);
    }

    .agent-list {
        max-height: 40vh;
        min-height: 9.375rem;
    }

    .btn-open-agent {
        min-height: 2.25rem;
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.85rem;
    }
}

/* ============================================
   发现页和我的页移动端适配
   ============================================ */

@media (max-width: 26.875rem) {
    .discover-container,
    .profile-container {
        padding: var(--spacing-lg);
        gap: var(--spacing-lg);
    }

    .discover-agents-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-md);
    }

    .discover-agent-card {
        padding: var(--spacing-md);
    }

    .agent-card-icon {
        width: 2.625rem;
        height: 2.625rem;
        font-size: 1.5rem;
    }

    .agent-card-name {
        font-size: 0.9rem;
    }

    .agent-card-desc {
        font-size: 0.78rem;
    }

    .discover-categories {
        gap: var(--spacing-sm);
    }

    .category-tag {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.85rem;
        min-height: 2.25rem;
    }

    .profile-user-section {
        padding: var(--spacing-lg);
        gap: var(--spacing-md);
    }

    .profile-avatar {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.3rem;
    }

    .profile-username {
        font-size: 1.1rem;
    }

    .profile-menu-item {
        padding: var(--spacing-md) var(--spacing-lg);
        min-height: 3rem;
    }

}

/* ============================================
   图表与代码块样式
   （json-chart 图表 / 围栏代码块 / 表格图表 / 错误降级）
   说明：.code-block 与 .chart-raw 为 <pre> 元素，
   为覆盖既有 .message-content pre 规则，统一挂在 .message-content 作用域下。
   ============================================ */

/* 图表容器：玻璃拟态卡片，防止 SVG 溢出 */
.chart-block {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(0.75rem);
    -webkit-backdrop-filter: blur(0.75rem);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    margin: 0.5rem 0;
    max-width: 100%;
    overflow: hidden;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.25);
}

/* 图表标题 */
.chart-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
    text-align: left;
}

/* SVG 响应式：宽度撑满、高度自适应 */
.chart-block svg {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}

/* SVG 文本：统一浅色，不覆盖 JS 内联的数据颜色 */
.chart-block svg text {
    fill: rgba(255, 255, 255, 0.75);
    font-size: 0.6875rem;
}

/* 坐标轴文字稍小 */
.chart-block svg .axis text {
    font-size: 0.625rem;
    fill: rgba(255, 255, 255, 0.65);
}

/* 网格线 */
.chart-block svg .grid line,
.chart-block svg line.grid {
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 1;
}

/* 坐标轴线 */
.chart-block svg .axis path,
.chart-block svg .axis line {
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 1;
}

/* 数据点圆点描边，提升对比度（fill 由 JS 内联） */
.chart-block svg circle.data-point {
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 1;
}

/* HTML 图例（备用，兼容 JS 用 HTML 画图例的情况） */
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
    justify-content: center;
}

.chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.8);
}

/* 图例色块：只定形状，颜色由 JS 内联 background-color 控制 */
.chart-legend-item .legend-swatch,
.chart-legend-item span.swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.1875rem;
    flex-shrink: 0;
}

/* 错误降级：左侧警告色边框 */
.chart-error {
    border-left: 0.1875rem solid #fbbf24;
    padding-left: 0.625rem;
    margin: 0.375rem 0;
}

.chart-error-title {
    font-size: 0.8125rem;
    color: #fbbf24;
    font-weight: 600;
    margin-bottom: 0.375rem;
}

/* 原始 JSON 降级（<pre>，挂在 message-content 下以覆盖默认 pre 样式） */
.message-content .chart-raw {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.5rem;
    border-radius: 0.375rem;
    overflow-x: auto;
    white-space: pre;
    margin: 0.375rem 0;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* 普通围栏代码块（<pre>，挂在 message-content 下以覆盖默认 pre 样式） */
.message-content .code-block {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78125rem;
    background: rgba(0, 0, 0, 0.35);
    color: rgba(255, 255, 255, 0.85);
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin: 0.5rem 0;
    overflow-x: auto;
    white-space: pre;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 代码块内 <code>：覆盖默认 inline code 样式 */
.message-content .code-block code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* 表格类图表 */
.chart-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 0.5rem;
    overflow: hidden;
    margin: 0.5rem 0;
    font-size: 0.75rem;
}

.chart-table th {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: left;
}

.chart-table td {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.chart-table tbody tr:last-child td {
    border-bottom: none;
}

/* 响应式：小屏优化，避免横向滚动 */
@media (max-width: 26.25rem) {
    .chart-block {
        padding: 0.625rem;
    }

    .chart-title {
        font-size: 0.8125rem;
    }

    .chart-block svg text {
        font-size: 0.5625rem;
    }

    .chart-table th,
    .chart-table td {
        padding: 0.25rem 0.375rem;
    }
}

/* Result cards — neutral conversation design */
.messages-container {
    --result-card-surface: var(--surface-elevated);
    --result-card-muted-surface: var(--surface-hover);
}

.messages-container .agent-result-card,
.messages-container .weather-card {
    position: relative;
    isolation: auto;
    width: min(47.5rem, 100%);
    border: 1px solid var(--theme-border);
    border-radius: 0.875rem;
    background: var(--result-card-surface);
    box-shadow: var(--theme-shadow);
    overflow: hidden;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.messages-container .agent-result-card::before,
.messages-container .agent-result-card::after,
.messages-container .weather-card::before,
.messages-container .weather-card::after {
    content: none;
    display: none;
}

.messages-container .agent-result-card-header {
    position: relative;
    z-index: auto;
    padding: 1rem 1.125rem;
    border-bottom: 1px solid var(--theme-border);
    background: transparent;
    box-shadow: none;
}

.messages-container .agent-result-kicker {
    margin-bottom: 0.25rem;
    color: var(--theme-text-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-shadow: none;
    text-transform: none;
}

.messages-container .agent-result-kicker::before {
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    margin-right: 0.375rem;
    border: 0;
    border-radius: 50%;
    background: var(--theme-accent);
    box-shadow: none;
    content: "";
    transform: none;
}

.messages-container .agent-result-title {
    color: var(--theme-text-primary);
    font-size: 1rem;
    line-height: 1.4;
    text-shadow: none;
}

.messages-container .agent-result-state,
.messages-container .weather-card-badge {
    border: 1px solid var(--theme-border);
    border-radius: 999px;
    background: var(--result-card-muted-surface);
    color: var(--theme-text-secondary);
    box-shadow: none;
    text-shadow: none;
}

.messages-container .agent-result-card.failed .agent-result-state,
.messages-container .agent-result-card.rejected .agent-result-state,
.messages-container .agent-result-card.canceled .agent-result-state,
.messages-container .agent-result-card.error .agent-result-state {
    border-color: color-mix(in srgb, var(--color-error) 42%, var(--theme-border));
    background: color-mix(in srgb, var(--color-error) 10%, var(--result-card-surface));
    color: var(--theme-text-primary);
}

.messages-container .agent-result-body,
.messages-container .agent-result-evidence,
.messages-container .agent-raw-result,
.messages-container .a2ui-mc-card,
.messages-container .a2ui-mc-text,
.messages-container .agent-result-markdown {
    position: relative;
    z-index: auto;
    color: var(--theme-text-primary);
}

.messages-container .agent-result-body {
    background: transparent;
}

.messages-container .agent-result-markdown h1,
.messages-container .agent-result-markdown h2,
.messages-container .agent-result-markdown h3,
.messages-container .agent-result-card .message-content h1,
.messages-container .agent-result-card .message-content h2,
.messages-container .agent-result-card .message-content h3 {
    color: var(--theme-text-primary);
    line-height: 1.35;
    text-shadow: none;
}

.messages-container .agent-result-markdown p,
.messages-container .agent-result-markdown li,
.messages-container .agent-result-card .message-content p,
.messages-container .agent-result-card .message-content li {
    color: var(--theme-text-secondary);
    line-height: 1.7;
}

.messages-container .agent-result-markdown blockquote,
.messages-container .agent-result-card .message-content blockquote {
    margin: 0.875rem 0;
    border-left: 0.1875rem solid var(--theme-border-strong);
    padding: 0.125rem 0 0.125rem 0.875rem;
    color: var(--theme-text-secondary);
}

.messages-container .a2ui-mc-divider {
    background: var(--theme-border);
}

.messages-container .a2ui-mc-card {
    padding-left: 0;
}

.messages-container .a2ui-mc-card::before {
    content: none;
    display: none;
}

.messages-container .a2ui-mc-text-caption,
.messages-container .agent-raw-result summary,
.messages-container .weather-card-source,
.messages-container .weather-card-subtitle,
.messages-container .weather-card-foot,
.messages-container .weather-metric span,
.messages-container .agent-chart-label,
.messages-container .agent-chart-bar-value,
.messages-container .agent-chart-pie-value {
    color: var(--theme-text-tertiary);
}

.messages-container .a2ui-mc-button {
    border: 1px solid var(--theme-border);
    border-radius: 0.625rem;
    background: var(--result-card-muted-surface);
    color: var(--theme-text-primary);
}

.messages-container .weather-card {
    min-height: 0;
    padding: 1rem;
}

.messages-container .weather-card > * {
    position: relative;
    z-index: auto;
}

.messages-container .weather-card-title,
.messages-container .weather-metric strong,
.messages-container .agent-chart-pie-row,
.messages-container .agent-chart-title {
    color: var(--theme-text-primary);
    text-shadow: none;
}

.messages-container .weather-card-temp {
    color: var(--theme-text-primary);
    text-shadow: none;
}

.messages-container .weather-card-summary {
    color: var(--theme-text-secondary);
}

.messages-container .weather-live-bar {
    background: var(--theme-border);
    box-shadow: none;
}

.messages-container .weather-live-bar span,
.messages-container .agent-chart-bar {
    background: var(--theme-accent);
    box-shadow: none;
}

.messages-container .weather-metric,
.messages-container .agent-chart,
.messages-container .weather-chart-wrap .agent-chart,
.messages-container .agent-evidence-item {
    border: 1px solid var(--theme-border);
    border-radius: 0.625rem;
    background: var(--result-card-muted-surface);
    box-shadow: none;
}

.messages-container .agent-chart-line {
    stroke: var(--theme-accent);
    filter: none;
}

.messages-container .agent-chart-point,
.messages-container .agent-chart-pie-dot {
    fill: var(--theme-accent);
    background: var(--theme-accent);
}

.messages-container .agent-evidence-item {
    color: var(--theme-text-secondary);
}

.messages-container .agent-evidence-item strong {
    color: var(--theme-text-primary);
}

.messages-container .agent-raw-result {
    border-top: 1px solid var(--theme-border);
}

.messages-container .agent-raw-result pre,
.messages-container .agent-chart-fallback,
.messages-container .agent-result-card .message-content code,
.messages-container .agent-result-card .message-content pre,
.messages-container .agent-result-markdown code,
.messages-container .agent-result-markdown pre {
    border: 1px solid var(--theme-border);
    border-radius: 0.5rem;
    background: var(--result-card-muted-surface);
    color: var(--theme-text-primary);
}

.messages-container .agent-result-markdown .markdown-table-wrap {
    border-color: var(--theme-border);
    border-radius: 0.625rem;
    background: var(--result-card-muted-surface);
    box-shadow: none;
}

.messages-container .agent-result-markdown .markdown-table {
    color: var(--theme-text-primary);
}

.messages-container .agent-result-markdown .markdown-table th {
    border-bottom-color: var(--theme-border);
    background: color-mix(in srgb, var(--surface-hover) 82%, var(--theme-text-primary));
    color: var(--theme-text-primary);
}

.messages-container .agent-result-markdown .markdown-table td {
    border-bottom-color: var(--theme-border);
    color: var(--theme-text-secondary);
}

.messages-container .agent-result-markdown .markdown-table a {
    color: var(--theme-accent);
}

 (max-width: 37.5rem) {
    .messages-container .agent-result-card,
    .messages-container .weather-card,
    .messages-container .agent-chart {
        border-radius: 0.75rem;
    }

    .messages-container .agent-result-body {
        padding: 0.875rem 1rem 1rem;
    }
}

/* ============================================
   Agent 智能体应用页模式
   ============================================ */

.capability-launch-overlay,
.weather-agent-app-overlay {
    position: fixed;
    inset: 0;
    z-index: 240;
    display: none;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 36%, rgba(0, 212, 255, 0.18), transparent 32%),
        rgba(2, 7, 18, 0.78);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
}

.capability-launch-overlay.active,
.weather-agent-app-overlay.active {
    display: flex;
}

.capability-launch-panel {
    position: relative;
    width: min(26.25rem, calc(100vw - 2.5rem));
    min-height: 16.25rem;
    border: 1px solid rgba(84, 240, 255, 0.52);
    border-radius: 0.5rem;
    padding: 2.125rem 1.75rem 1.625rem;
    overflow: hidden;
    color: #e9fbff;
    text-align: center;
    background:
        radial-gradient(circle at 50% -10%, rgba(125, 249, 255, 0.28), transparent 36%),
        linear-gradient(145deg, rgba(3, 11, 27, 0.98), rgba(6, 29, 52, 0.94) 55%, rgba(18, 13, 43, 0.96));
    box-shadow:
        0 1.875rem 5.625rem rgba(0, 0, 0, 0.56),
        0 0 2.625rem rgba(0, 212, 255, 0.26),
        0 0 0 1px rgba(181, 246, 255, 0.08) inset;
    clip-path: polygon(0 0, calc(100% - 1.375rem) 0, 100% 1.375rem, 100% 100%, 1.375rem 100%, 0 calc(100% - 1.375rem));
    animation: capabilityLaunchIn 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

.capability-launch-panel::before,
.capability-launch-panel::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
}

.capability-launch-panel::before {
    background:
        linear-gradient(90deg, #7df9ff 0 4.25rem, transparent 4.25rem calc(100% - 5.125rem), rgba(168, 85, 247, 0.84) calc(100% - 5.125rem)) top / 100% 1px no-repeat,
        linear-gradient(90deg, rgba(251, 146, 60, 0.68) 0 2.375rem, transparent 2.375rem calc(100% - 3.375rem), rgba(34, 211, 238, 0.84) calc(100% - 3.375rem)) bottom / 100% 1px no-repeat,
        repeating-linear-gradient(180deg, rgba(148, 244, 255, 0.09) 0 1px, transparent 1px 0.8125rem);
}

.capability-launch-panel::after {
    opacity: 0.26;
    background: linear-gradient(112deg, transparent 12%, rgba(255, 255, 255, 0.16) 42%, transparent 56%);
    mix-blend-mode: screen;
}

@keyframes capabilityLaunchIn {
    from {
        opacity: 0;
        transform: translateY(1.25rem) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.capability-launch-orbit {
    position: relative;
    width: 6.75rem;
    height: 6.75rem;
    margin: 0 auto 1.375rem;
    border: 1px solid rgba(125, 249, 255, 0.26);
    border-radius: 50%;
    box-shadow: 0 0 1.875rem rgba(0, 212, 255, 0.18) inset;
}

.capability-launch-orbit::before {
    position: absolute;
    inset: 1.75rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(125, 249, 255, 0.96), rgba(0, 212, 255, 0.20) 48%, transparent 62%);
    box-shadow: 0 0 2.125rem rgba(0, 212, 255, 0.54);
    content: "";
}

.capability-launch-orbit span {
    position: absolute;
    inset: 0.5rem;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: rgba(125, 249, 255, 0.92);
    border-right-color: rgba(168, 85, 247, 0.58);
    animation: capabilityOrbit 1.05s linear infinite;
}

.capability-launch-orbit span + span {
    inset: 1.125rem;
    animation-duration: 1.55s;
    animation-direction: reverse;
    border-top-color: rgba(251, 146, 60, 0.76);
}

@keyframes capabilityOrbit {
    to { transform: rotate(360deg); }
}

.capability-launch-copy,
.capability-launch-route {
    position: relative;
    z-index: 1;
}

.capability-launch-route span {
    max-width: 10.5rem;
}

.capability-launch-route small {
    display: block;
    margin-top: 0.1875rem;
    color: rgba(191, 219, 254, 0.70);
    font-size: 0.68rem;
    font-weight: 700;
}

.capability-launch-kicker {
    margin-bottom: 0.5rem;
    color: rgba(134, 250, 255, 0.88);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.capability-launch-copy h2 {
    margin: 0 0 0.625rem;
    color: #f8fdff;
    font-family: var(--font-display);
    font-size: 1.65rem;
    line-height: 1.18;
    text-shadow: 0 0 1.375rem rgba(0, 212, 255, 0.34);
}

.capability-launch-copy p {
    margin: 0;
    color: rgba(219, 234, 254, 0.86);
    line-height: 1.6;
}

.capability-launch-route {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5625rem;
    margin-top: 1.375rem;
    color: rgba(191, 219, 254, 0.78);
    font-size: 0.75rem;
    font-weight: 700;
    flex-wrap: wrap;
}

.capability-launch-route i {
    width: 1.75rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(125, 249, 255, 0.78), transparent);
    box-shadow: 0 0 0.75rem rgba(0, 212, 255, 0.26);
}

.weather-agent-app-overlay {
    z-index: 230;
    padding: 1rem;
    align-items: stretch;
}

.weather-agent-app {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(26.875rem, calc(100vw - 2rem));
    height: min(58.25rem, calc(100dvh - 2rem));
    min-height: 0;
    max-height: calc(100dvh - 2rem);
    margin: auto;
    border: 1px solid rgba(84, 240, 255, 0.46);
    border-radius: 0.5rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 0, rgba(0, 212, 255, 0.24), transparent 34%),
        linear-gradient(145deg, rgba(3, 11, 27, 0.99), rgba(5, 22, 43, 0.96) 58%, rgba(17, 12, 36, 0.97));
    box-shadow:
        0 2.125rem 6.125rem rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(181, 246, 255, 0.08) inset,
        0 0 2.5rem rgba(0, 212, 255, 0.20);
    clip-path: polygon(0 0, calc(100% - 1.375rem) 0, 100% 1.375rem, 100% 100%, 1.375rem 100%, 0 calc(100% - 1.375rem));
    animation: weatherAppIn 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

.weather-agent-app * {
    min-width: 0;
}

.weather-agent-app::before,
.weather-agent-app::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
}

.weather-agent-app::before {
    z-index: 0;
    background:
        linear-gradient(90deg, #7df9ff 0 4.75rem, transparent 4.75rem calc(100% - 6.375rem), rgba(168, 85, 247, 0.86) calc(100% - 6.375rem)) top / 100% 1px no-repeat,
        linear-gradient(90deg, rgba(251, 146, 60, 0.68) 0 2.75rem, transparent 2.75rem calc(100% - 4rem), rgba(34, 211, 238, 0.84) calc(100% - 4rem)) bottom / 100% 1px no-repeat,
        repeating-linear-gradient(180deg, rgba(148, 244, 255, 0.08) 0 1px, transparent 1px 0.875rem),
        repeating-linear-gradient(90deg, rgba(125, 249, 255, 0.04) 0 1px, transparent 1px 2.625rem);
}

.weather-agent-app::after {
    z-index: 0;
    opacity: 0.28;
    background: linear-gradient(112deg, transparent 8%, rgba(255, 255, 255, 0.13) 44%, transparent 58%);
    mix-blend-mode: screen;
}

@keyframes weatherAppIn {
    from {
        opacity: 0;
        transform: translateY(1.75rem) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.weather-agent-app-header,
.weather-agent-app-body {
    position: relative;
    z-index: 1;
}

.weather-agent-app-header {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 1rem;
    padding: 1.125rem 1.375rem;
    border-bottom: 1px solid rgba(0, 212, 255, 0.20);
    background:
        linear-gradient(90deg, rgba(0, 212, 255, 0.16), rgba(34, 197, 94, 0.06) 44%, rgba(168, 85, 247, 0.10) 74%, transparent),
        rgba(2, 8, 20, 0.68);
}

.weather-agent-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.625rem;
    height: 2.625rem;
    border: 1px solid rgba(84, 240, 255, 0.38);
    border-radius: 0.5rem;
    background: rgba(0, 212, 255, 0.10);
    color: #bff6ff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0 1.125rem rgba(0, 212, 255, 0.12) inset;
}

.weather-agent-app-title-block {
    min-width: 0;
    flex: 1;
}

.weather-agent-app-kicker {
    color: rgba(134, 250, 255, 0.86);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.weather-agent-app-title-block h2 {
    margin: 0.25rem 0 0;
    color: #f8fdff;
    font-family: var(--font-display);
    font-size: 1.65rem;
    line-height: 1.18;
    overflow-wrap: anywhere;
    text-shadow: 0 0 1.375rem rgba(0, 212, 255, 0.30);
}

.weather-agent-app-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.weather-agent-app-state {
    flex: 0 0 auto;
    border: 1px solid rgba(34, 211, 238, 0.52);
    border-radius: 62.438rem;
    padding: 0.4375rem 0.75rem;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.20), rgba(4, 23, 40, 0.88));
    color: #8cf7ff;
    font-size: 0.78rem;
    font-weight: 800;
    text-shadow: 0 0 0.625rem rgba(0, 212, 255, 0.34);
}

.weather-agent-render-toggle {
    min-width: 3.625rem;
    min-height: 1.875rem;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 62.438rem;
    background: rgba(15, 23, 42, 0.82);
    color: rgba(203, 213, 225, 0.88);
    font-size: 0.72rem;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 0 0.875rem rgba(15, 23, 42, 0.38) inset;
    transition: border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.weather-agent-render-toggle.is-on {
    border-color: rgba(103, 232, 249, 0.55);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.18), rgba(124, 58, 237, 0.18));
    color: #bff6ff;
    box-shadow: 0 0 1.125rem rgba(0, 212, 255, 0.20) inset;
}

.weather-agent-render-toggle:focus-visible {
    outline: 0.125rem solid rgba(103, 232, 249, 0.72);
    outline-offset: 0.1875rem;
}

.weather-agent-app-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 1rem;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 1.125rem 1.375rem 1.375rem;
}

.weather-agent-app-hud {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: rgba(191, 219, 254, 0.80);
    font-size: 0.76rem;
    font-weight: 800;
    flex-wrap: wrap;
}

.weather-agent-app-hud i {
    width: 2.375rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(125, 249, 255, 0.78), transparent);
}

.agent-app-invocation-summary {
    border: 1px solid rgba(0, 212, 255, 0.26);
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    background:
        linear-gradient(90deg, rgba(0, 212, 255, 0.12), rgba(168, 85, 247, 0.08)),
        rgba(2, 10, 26, 0.62);
    color: rgba(226, 242, 255, 0.92);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.45;
    overflow-wrap: anywhere;
    box-shadow: 0 0 1.125rem rgba(0, 212, 255, 0.10) inset;
}

.agent-app-invocation-summary[data-scope="local"] {
    border-color: rgba(52, 211, 153, 0.34);
    background:
        linear-gradient(90deg, rgba(52, 211, 153, 0.12), rgba(0, 212, 255, 0.08)),
        rgba(2, 16, 24, 0.70);
}

.agent-app-invocation-summary[data-scope="cloud"] {
    border-color: rgba(125, 249, 255, 0.32);
}

.agent-app-interaction-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.875rem;
    align-items: center;
    border: 1px solid rgba(125, 249, 255, 0.34);
    border-radius: 0.5rem;
    padding: 0.875rem;
    background:
        linear-gradient(135deg, rgba(0, 212, 255, 0.14), rgba(124, 58, 237, 0.12)),
        rgba(2, 10, 26, 0.78);
    box-shadow:
        0 0 1.375rem rgba(0, 212, 255, 0.12) inset,
        0 0.875rem 2.125rem rgba(0, 0, 0, 0.22);
}

.agent-app-interaction-panel.is-hidden {
    display: none;
}

.agent-app-interaction-panel[data-status="error"] {
    border-color: rgba(248, 113, 113, 0.48);
    background:
        linear-gradient(135deg, rgba(248, 113, 113, 0.14), rgba(0, 212, 255, 0.08)),
        rgba(24, 8, 18, 0.82);
}

.agent-app-interaction-copy {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    min-width: 0;
}

.agent-app-interaction-copy span {
    color: rgba(125, 249, 255, 0.82);
    font-size: 0.68rem;
    font-weight: 900;
}

.agent-app-interaction-copy strong {
    color: #f8fdff;
    font-size: 1rem;
    line-height: 1.3;
    text-shadow: 0 0 0.875rem rgba(0, 212, 255, 0.22);
}

.agent-app-interaction-copy em {
    color: rgba(191, 219, 254, 0.82);
    font-size: 0.78rem;
    font-style: normal;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.agent-app-interaction-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.625rem;
    align-items: center;
    min-width: min(100%, 26.25rem);
}

.agent-app-interaction-spinner {
    width: 1.75rem;
    height: 1.75rem;
    border: 0.125rem solid rgba(125, 249, 255, 0.18);
    border-top-color: #7df9ff;
    border-radius: 50%;
    animation: agentAppSpin 0.9s linear infinite;
}

@keyframes agentAppSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 35rem) {
    .agent-app-interaction-panel {
        grid-template-columns: 1fr;
    }

    .agent-app-interaction-controls {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .agent-app-interaction-controls .weather-use-location {
        width: 100%;
    }
}

.agent-app-page-panel,
.agent-app-preset-panel {
    position: relative;
    border: 1px solid rgba(0, 212, 255, 0.18);
    border-radius: 0.5rem;
    padding: 0.75rem;
    background:
        linear-gradient(135deg, rgba(2, 12, 27, 0.82), rgba(9, 24, 46, 0.64)),
        repeating-linear-gradient(90deg, rgba(125, 249, 255, 0.06) 0 1px, transparent 1px 0.875rem);
    box-shadow: 0 0 1.5rem rgba(0, 212, 255, 0.10) inset;
    overflow: hidden;
}

.agent-app-page-panel::before,
.agent-app-preset-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, #7df9ff 0 3rem, transparent 3rem calc(100% - 3.875rem), rgba(168, 85, 247, 0.78) calc(100% - 3.875rem)) top / 100% 1px no-repeat,
        linear-gradient(90deg, rgba(251, 146, 60, 0.58) 0 1.875rem, transparent 1.875rem calc(100% - 2.75rem), rgba(34, 211, 238, 0.74) calc(100% - 2.75rem)) bottom / 100% 1px no-repeat;
    opacity: 0.82;
}

.agent-app-page-head,
.agent-app-preset-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
    color: rgba(191, 219, 254, 0.80);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.agent-app-page-head strong,
.agent-app-preset-head strong {
    color: #f8fdff;
    font-size: 0.78rem;
    letter-spacing: 0;
    text-transform: none;
}

.agent-app-page-list {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.125rem;
    scrollbar-width: thin;
}

.agent-app-page-item {
    flex: 0 0 min(13.125rem, 76vw);
    min-height: 4.375rem;
    border: 1px solid rgba(125, 249, 255, 0.16);
    border-radius: 0.5rem;
    padding: 0.625rem;
    background: rgba(4, 16, 34, 0.72);
    color: rgba(219, 234, 254, 0.82);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.agent-app-page-item.active {
    border-color: rgba(125, 249, 255, 0.66);
    background:
        linear-gradient(135deg, rgba(0, 212, 255, 0.20), rgba(168, 85, 247, 0.12)),
        rgba(4, 16, 34, 0.88);
    box-shadow: 0 0 1.25rem rgba(0, 212, 255, 0.20), 0 0 1.5rem rgba(168, 85, 247, 0.12) inset;
}

.agent-app-page-item span,
.agent-app-page-item strong,
.agent-app-page-item small {
    display: block;
    overflow-wrap: anywhere;
}

.agent-app-page-item span {
    margin-bottom: 0.375rem;
    color: #7df9ff;
    font-size: 0.66rem;
    font-weight: 900;
}

.agent-app-page-item strong {
    color: #f8fdff;
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.25;
}

.agent-app-page-item small {
    margin-top: 0.3125rem;
    color: rgba(191, 219, 254, 0.70);
    font-size: 0.66rem;
    line-height: 1.35;
}

.agent-app-preset-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
}

.agent-app-preset-item {
    min-width: 0;
    min-height: 4.75rem;
    border: 1px solid rgba(125, 249, 255, 0.16);
    border-radius: 0.5rem;
    padding: 0.625rem;
    background: rgba(4, 16, 34, 0.72);
    color: rgba(219, 234, 254, 0.82);
    text-align: left;
    cursor: default;
}

.agent-app-preset-item.active {
    border-color: rgba(125, 249, 255, 0.64);
    background:
        linear-gradient(135deg, rgba(0, 212, 255, 0.20), rgba(168, 85, 247, 0.12)),
        rgba(4, 16, 34, 0.86);
    box-shadow: 0 0 1.25rem rgba(0, 212, 255, 0.20), 0 0 1.5rem rgba(168, 85, 247, 0.12) inset;
}

.agent-app-preset-kind {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.125rem;
    height: 1.25rem;
    margin-bottom: 0.4375rem;
    border: 1px solid rgba(34, 211, 238, 0.34);
    border-radius: 62.438rem;
    color: #7df9ff;
    font-size: 0.66rem;
    font-weight: 900;
}

.agent-app-preset-item strong,
.agent-app-preset-item small {
    display: block;
    overflow-wrap: anywhere;
}

.agent-app-preset-item strong {
    color: #f8fdff;
    font-size: 0.72rem;
    font-weight: 800;
}

.agent-app-preset-item small {
    margin-top: 0.3125rem;
    color: rgba(191, 219, 254, 0.70);
    font-size: 0.66rem;
    line-height: 1.35;
}

.weather-agent-app-surface {
    min-height: 0;
}

.weather-agent-app-surface .agent-a2ui-surface,
.weather-agent-app-surface .a2ui-mc-card {
    width: 100%;
}

.weather-agent-app-surface .a2ui-mc-card {
    position: relative;
    border: 1px solid rgba(0, 212, 255, 0.28);
    border-radius: 0.5rem;
    padding: clamp(1.125rem, 3vw, 1.75rem);
    background:
        radial-gradient(circle at 18% 12%, rgba(0, 212, 255, 0.18), transparent 34%),
        linear-gradient(145deg, rgba(2, 10, 26, 0.92), rgba(11, 28, 53, 0.82));
    color: #dbeafe;
    box-shadow: 0 0 1.75rem rgba(0, 212, 255, 0.12) inset, 0 1.375rem 2.625rem rgba(0, 0, 0, 0.28);
    clip-path: polygon(0 0, calc(100% - 1.125rem) 0, 100% 1.125rem, 100% 100%, 1.125rem 100%, 0 calc(100% - 1.125rem));
}

.weather-agent-app-surface .a2ui-mc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, #7df9ff 0 3.625rem, transparent 3.625rem calc(100% - 4.625rem), rgba(168, 85, 247, 0.78) calc(100% - 4.625rem)) top / 100% 1px no-repeat,
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 0.625rem);
    opacity: 0.42;
}

.weather-agent-app-surface .a2ui-mc-card > * {
    position: relative;
    z-index: 1;
}

.weather-agent-app-surface .a2ui-mc-text,
.weather-agent-app-surface .agent-result-markdown,
.weather-agent-app-surface .agent-result-markdown p,
.weather-agent-app-surface .agent-result-markdown li {
    color: rgba(226, 242, 255, 0.92);
}

.weather-agent-app-surface .a2ui-mc-text-caption {
    color: #7df9ff;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.weather-agent-app-surface .a2ui-mc-text-overline {
    color: rgba(191, 219, 254, 0.72);
    font-size: 0.72rem;
}

.weather-agent-app-surface .markdown-table-wrap {
    border-color: rgba(0, 212, 255, 0.26);
    background:
        linear-gradient(135deg, rgba(0, 212, 255, 0.10), rgba(168, 85, 247, 0.07)),
        rgba(3, 12, 27, 0.74);
    box-shadow: 0 0 1.125rem rgba(0, 212, 255, 0.10) inset;
}

.weather-agent-app-surface .markdown-table {
    color: rgba(226, 242, 255, 0.94);
}

.weather-agent-app-surface .markdown-table th {
    border-bottom-color: rgba(125, 249, 255, 0.22);
    background: rgba(0, 212, 255, 0.13);
    color: #bff6ff;
}

.weather-agent-app-surface .markdown-table td {
    border-bottom-color: rgba(125, 249, 255, 0.12);
    color: rgba(226, 242, 255, 0.92);
}

.weather-agent-app-surface .markdown-table a {
    color: #7df9ff;
}

.weather-agent-app-surface .weather-card {
    position: relative;
    min-height: 27.5rem;
    padding: clamp(1.25rem, 4vw, 2.125rem);
    border: 1px solid rgba(84, 240, 255, 0.54);
    border-radius: 0.5rem;
    background:
        radial-gradient(circle at 16% -18%, rgba(125, 249, 255, 0.24), transparent 32%),
        linear-gradient(145deg, rgba(3, 11, 27, 0.98), rgba(6, 29, 52, 0.94) 50%, rgba(14, 15, 42, 0.96)),
        linear-gradient(90deg, rgba(0, 212, 255, 0.18), rgba(34, 197, 94, 0.08), rgba(168, 85, 247, 0.10));
    box-shadow:
        0 1.125rem 3.125rem rgba(0, 0, 0, 0.46),
        0 0 0 1px rgba(181, 246, 255, 0.08) inset,
        0 0 1.875rem rgba(0, 212, 255, 0.22);
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
}

.weather-agent-app-surface .weather-card::before,
.weather-agent-app-surface .weather-card::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
}

.weather-agent-app-surface .weather-card::before {
    border-radius: inherit;
    background:
        linear-gradient(90deg, #7df9ff 0 3.375rem, transparent 3.375rem calc(100% - 4.375rem), rgba(168, 85, 247, 0.82) calc(100% - 4.375rem)) top / 100% 1px no-repeat,
        linear-gradient(90deg, rgba(34, 211, 238, 0.82) 0 2.125rem, transparent 2.125rem calc(100% - 3rem), rgba(251, 146, 60, 0.62) calc(100% - 3rem)) bottom / 100% 1px no-repeat,
        linear-gradient(180deg, rgba(0, 212, 255, 0.56), transparent 32%) left / 1px 100% no-repeat;
}

.weather-agent-app-surface .weather-card::after {
    opacity: 0.24;
    background:
        linear-gradient(180deg, transparent 0 54%, rgba(0, 212, 255, 0.06) 54% 100%),
        repeating-linear-gradient(90deg, transparent 0 1.375rem, rgba(125, 249, 255, 0.10) 1.375rem 1.4375rem, transparent 1.4375rem 2.625rem),
        repeating-linear-gradient(180deg, rgba(148, 244, 255, 0.12) 0 1px, transparent 1px 0.625rem),
        linear-gradient(112deg, transparent 12%, rgba(255, 255, 255, 0.12) 44%, transparent 58%);
    mix-blend-mode: screen;
}

.weather-agent-app-surface .weather-card > * {
    position: relative;
    z-index: 1;
}

.weather-agent-app-surface .weather-card-badge {
    border: 1px solid rgba(147, 197, 253, 0.48);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.22), rgba(4, 20, 39, 0.82));
    color: #bff6ff;
    box-shadow: 0 0 1rem rgba(0, 212, 255, 0.20) inset, 0 0 1rem rgba(0, 212, 255, 0.12);
}

.weather-agent-app-surface .weather-card-source,
.weather-agent-app-surface .weather-card-subtitle,
.weather-agent-app-surface .weather-card-foot {
    color: rgba(191, 219, 254, 0.78);
}

.weather-agent-app-surface .weather-card-title {
    color: #f8fdff;
    font-size: 1.55rem;
    text-shadow: 0 0 1.25rem rgba(0, 212, 255, 0.22);
}

.weather-agent-app-surface .weather-visual-stage {
    min-height: 20rem;
    border-color: rgba(84, 240, 255, 0.48);
    background:
        radial-gradient(circle at 76% 18%, rgba(0, 212, 255, 0.22), transparent 30%),
        linear-gradient(145deg, rgba(3, 11, 27, 0.96), rgba(6, 29, 52, 0.86));
    box-shadow:
        0 1.125rem 2.5rem rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(181, 246, 255, 0.08) inset,
        0 0 2.125rem rgba(0, 212, 255, 0.15) inset;
}

.weather-agent-app-surface .weather-visual-stage.has-city-image .weather-visual-image {
    opacity: 1;
    background-position: center bottom;
    filter: saturate(1.18) contrast(1.12) brightness(1.08);
}

.weather-agent-app-surface .weather-visual-stage[data-city-asset-state="loading"] .weather-visual-image {
    opacity: 0.72;
}

.weather-agent-app-surface .weather-visual-stage.is-city-image-refreshing .weather-visual-image {
    transition: opacity 0.28s ease, filter 0.28s ease, transform 0.28s ease;
    opacity: 0.64;
}

.weather-agent-app-surface .weather-visual-stage[data-city-asset-state="loaded"] .weather-visual-image {
    filter: saturate(1.22) contrast(1.14) brightness(1.06);
}

.weather-agent-app-surface .weather-visual-stage.weather-city-image-redrawn .weather-visual-image {
    animation: weatherCityImageRedraw 0.62s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes weatherCityImageRedraw {
    0% {
        opacity: 0.58;
        filter: saturate(0.92) contrast(1.02) brightness(0.86);
        transform: scale(1.035);
    }
    100% {
        opacity: 1;
        filter: saturate(1.22) contrast(1.14) brightness(1.06);
        transform: scale(1.015);
    }
}

.weather-agent-app-surface .weather-visual-stage.has-city-image::after {
    background:
        linear-gradient(180deg, rgba(2, 10, 26, 0.04), rgba(2, 10, 26, 0.10) 48%, rgba(2, 10, 26, 0.42)),
        radial-gradient(circle at 18% 76%, rgba(0, 212, 255, 0.24), transparent 28%),
        linear-gradient(90deg, rgba(2, 10, 26, 0.26), transparent 38%, rgba(2, 10, 26, 0.08));
}

.weather-agent-app-surface .weather-visual-stage.weather-atmosphere-cloudy .weather-visual-cloud,
.weather-agent-app-surface .weather-visual-stage.weather-atmosphere-rain .weather-visual-cloud,
.weather-agent-app-surface .weather-visual-stage.weather-atmosphere-storm .weather-visual-cloud,
.weather-agent-app-surface .weather-visual-stage.weather-atmosphere-fog .weather-visual-cloud {
    display: block;
}

.weather-agent-app-surface .weather-visual-cloud {
    display: none;
    z-index: 1;
    border-radius: 62.438rem;
    background:
        radial-gradient(circle at 20% 48%, rgba(210, 246, 255, 0.26), transparent 34%),
        radial-gradient(circle at 58% 38%, rgba(210, 246, 255, 0.20), transparent 42%),
        linear-gradient(90deg, transparent, rgba(125, 249, 255, 0.12), transparent);
    filter: blur(0.3125rem);
}

.weather-agent-app-surface .weather-visual-cloud-a {
    top: 34%;
    right: -8%;
    width: 56%;
    height: 4.625rem;
}

.weather-agent-app-surface .weather-visual-cloud-b {
    top: 52%;
    left: -12%;
    width: 50%;
    height: 3.625rem;
    opacity: 0.72;
}

.weather-agent-app-surface .weather-visual-stage.weather-atmosphere-rain .weather-visual-rain,
.weather-agent-app-surface .weather-visual-stage.weather-atmosphere-storm .weather-visual-rain {
    opacity: 0.72;
}

.weather-agent-app-surface .weather-visual-rain {
    inset: 0;
    z-index: 1;
    opacity: 0;
    background:
        repeating-linear-gradient(110deg, transparent 0 0.8125rem, rgba(125, 249, 255, 0.20) 0.8125rem 0.875rem, transparent 0.875rem 1.6875rem);
    mix-blend-mode: screen;
}

.weather-agent-app-surface .weather-visual-stage.weather-atmosphere-sunny .weather-symbol-orb {
    border-color: rgba(251, 191, 36, 0.60);
    box-shadow: 0 0 1.75rem rgba(251, 191, 36, 0.24), 0 0 2rem rgba(0, 212, 255, 0.14) inset;
}

.weather-agent-app-surface .weather-visual-stage.weather-atmosphere-rain .weather-symbol-orb,
.weather-agent-app-surface .weather-visual-stage.weather-atmosphere-storm .weather-symbol-orb {
    border-color: rgba(96, 165, 250, 0.66);
}

.weather-agent-app-surface .weather-card-temp {
    color: #7df9ff;
    font-size: clamp(2.55rem, 9vw, 4.35rem);
    text-shadow: 0 0 0.75rem rgba(0, 212, 255, 0.58), 0 0 1.75rem rgba(34, 211, 238, 0.32);
    white-space: nowrap;
}

.weather-agent-app-surface .weather-card-hero {
    align-items: flex-end;
    flex-wrap: wrap;
}

.weather-agent-app-surface .weather-card-hero > div:first-child {
    flex: 1 1 16.25rem;
    min-width: min(100%, 15rem);
}

.weather-agent-app-surface .weather-card-summary {
    color: rgba(226, 242, 255, 0.92);
}

.weather-agent-app-surface .weather-card-summary strong {
    color: #f8fdff;
    text-shadow: 0 0 0.75rem rgba(125, 249, 255, 0.20);
}

.weather-agent-app-surface .weather-card-summary code {
    background: rgba(0, 212, 255, 0.12);
    color: #bff6ff;
}

.weather-agent-app-surface .weather-card-summary a {
    color: #7df9ff;
}

.weather-agent-app-surface .weather-source-item {
    border: 1px solid rgba(0, 212, 255, 0.24);
    border-radius: 0.5rem;
    background:
        linear-gradient(135deg, rgba(0, 212, 255, 0.10), rgba(168, 85, 247, 0.07)),
        rgba(3, 12, 27, 0.58);
}

.weather-agent-app-surface .weather-source-item span {
    color: rgba(125, 249, 255, 0.76);
}

.weather-agent-app-surface .weather-source-item strong {
    color: rgba(226, 242, 255, 0.96);
}

.weather-agent-app-surface .weather-input-panel {
    border-color: rgba(125, 249, 255, 0.34);
    background:
        linear-gradient(135deg, rgba(0, 212, 255, 0.12), rgba(168, 85, 247, 0.08)),
        rgba(3, 12, 27, 0.78);
    box-shadow: 0 0 1.125rem rgba(0, 212, 255, 0.12) inset;
}

.weather-agent-app-surface .weather-input-copy strong {
    color: #f8fdff;
}

.weather-agent-app-surface .weather-input-copy span {
    color: rgba(191, 219, 254, 0.78);
}

.weather-agent-app-surface .weather-location-input {
    border-color: rgba(125, 249, 255, 0.26);
    background: rgba(2, 10, 26, 0.78);
    color: #f8fdff;
}

.weather-agent-app-surface .weather-location-input::placeholder {
    color: rgba(191, 219, 254, 0.48);
}

.weather-agent-app-surface .weather-location-input:focus {
    border-color: rgba(125, 249, 255, 0.72);
    box-shadow: 0 0 0 0.1875rem rgba(0, 212, 255, 0.14), 0 0 1.125rem rgba(0, 212, 255, 0.18);
}

.weather-agent-app-surface .weather-input-submit {
    border-color: rgba(125, 249, 255, 0.42);
    background: linear-gradient(135deg, #0891b2, #2563eb 52%, #7c3aed);
    box-shadow: 0 0 1.125rem rgba(0, 212, 255, 0.16);
}

.weather-agent-app-surface .weather-use-location {
    border-color: rgba(125, 249, 255, 0.30);
    background: rgba(0, 212, 255, 0.10);
    color: #bff6ff;
}

.weather-agent-app-surface .weather-live-bar {
    height: 0.3125rem;
    background: rgba(0, 212, 255, 0.12);
    box-shadow: 0 0 0.875rem rgba(0, 212, 255, 0.22) inset;
}

.weather-agent-app-surface .weather-live-bar span {
    background: linear-gradient(90deg, transparent, #7df9ff, #a855f7, transparent);
}

.weather-agent-app-surface .weather-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.weather-agent-app-surface .weather-metric {
    border: 1px solid rgba(0, 212, 255, 0.30);
    border-radius: 0.5rem;
    background:
        linear-gradient(135deg, rgba(0, 212, 255, 0.14), rgba(168, 85, 247, 0.08)),
        rgba(3, 12, 27, 0.76);
    box-shadow: 0 0 1.125rem rgba(0, 212, 255, 0.12) inset;
}

.weather-agent-app-surface .weather-metric span,
.weather-agent-app-surface .agent-chart-label,
.weather-agent-app-surface .agent-chart-bar-value,
.weather-agent-app-surface .agent-chart-pie-value {
    color: rgba(191, 219, 254, 0.78);
}

.weather-agent-app-surface .weather-metric strong,
.weather-agent-app-surface .agent-chart-pie-row {
    color: #f8fdff;
}

.weather-agent-app-surface .weather-detail-panel {
    border: 1px solid rgba(0, 212, 255, 0.28);
    border-radius: 0.5rem;
    background:
        linear-gradient(135deg, rgba(0, 212, 255, 0.10), rgba(168, 85, 247, 0.07)),
        rgba(3, 12, 27, 0.70);
    box-shadow: 0 0 1.125rem rgba(0, 212, 255, 0.10) inset;
}

.weather-agent-app-surface .weather-forecast-panel {
    border-color: rgba(0, 212, 255, 0.28);
    background:
        linear-gradient(135deg, rgba(0, 212, 255, 0.10), rgba(168, 85, 247, 0.07)),
        rgba(3, 12, 27, 0.70);
    box-shadow: 0 0 1.125rem rgba(0, 212, 255, 0.10) inset;
}

.weather-agent-app-surface .weather-forecast-row {
    border: 1px solid rgba(0, 212, 255, 0.16);
    background: rgba(125, 249, 255, 0.07);
}

.weather-agent-app-surface .weather-detail-panel > span {
    color: rgba(125, 249, 255, 0.86);
}

.weather-agent-app-surface .weather-detail-list {
    color: rgba(226, 242, 255, 0.92);
}

.weather-agent-app-surface .agent-chart,
.weather-agent-app-surface .weather-chart-wrap .agent-chart {
    border: 1px solid rgba(0, 212, 255, 0.32);
    border-radius: 0.5rem;
    background:
        linear-gradient(135deg, rgba(0, 212, 255, 0.10), rgba(168, 85, 247, 0.07)),
        repeating-linear-gradient(90deg, rgba(125, 249, 255, 0.04) 0 1px, transparent 1px 2.25rem),
        rgba(3, 12, 27, 0.74);
}

.weather-agent-app-evidence {
    border-top: 1px solid rgba(0, 212, 255, 0.16);
    padding-top: 0.875rem;
}

.weather-agent-app-evidence-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.weather-agent-app-evidence .agent-raw-result {
    margin-top: 0.625rem;
}

@media (max-width: 43.75rem) {
    .weather-agent-app-overlay {
        padding: 0;
        align-items: stretch;
    }

    .weather-agent-app {
        width: 100vw;
        height: 100dvh;
        min-height: 0;
        max-height: 100dvh;
        margin: 0;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        clip-path: none;
    }

    .weather-agent-app-header {
        padding: calc(0.875rem + env(safe-area-inset-top)) 1rem 0.875rem;
        gap: 0.625rem;
    }

    .weather-agent-app-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        padding: 0.875rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
    }

    .weather-agent-app-hud {
        font-size: 0.7rem;
    }

    .agent-app-preset-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agent-app-page-item {
        flex-basis: min(13.75rem, 78vw);
    }

    .agent-app-preset-item {
        min-height: 4.25rem;
    }

    .weather-agent-app-surface .weather-card {
        min-height: 28.75rem;
    }

    .weather-agent-app-surface .weather-visual-stage {
        min-height: 15.625rem;
        padding: 0.875rem;
    }

    .weather-agent-app-surface .weather-visual-header,
    .weather-agent-app-surface .weather-visual-main {
        gap: 0.625rem;
    }

    .weather-symbol-orb {
        width: 3.625rem;
        height: 3.625rem;
    }

    .weather-symbol-orb span {
        font-size: 1.62rem;
    }

    .weather-agent-app-surface .weather-card-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .weather-agent-app-surface .weather-card-temp {
        font-size: 2.85rem;
        text-align: left;
    }

    .weather-agent-app-surface .weather-source-panel {
        grid-template-columns: 1fr;
    }

    .weather-agent-app-surface .weather-source-item strong {
        font-size: 0.78rem;
    }

    .weather-input-row {
        grid-template-columns: 1fr;
    }

    .weather-use-location {
        width: 100%;
    }

    .weather-agent-app-surface .weather-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================
   单智能体直调卡片 - iframe 嵌入调用兜底
   ============================================ */

.single-agent-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-lg);
    border: 1px solid var(--theme-border);
    border-radius: 0.875rem;
    background: var(--surface-elevated);
    box-shadow: var(--theme-shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: all var(--transition-fast);
}

.embedded-agent-confirmation {
    width: min(100%, 47.5rem);
    margin: 0 auto;
    animation: embedded-agent-confirm-in 0.28s ease-out both;
}

@keyframes embedded-agent-confirm-in {
    from { opacity: 0; transform: translateY(0.625rem) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.single-agent-card .agent-call-confirmation-kicker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-text-secondary);
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.04em;
}

.single-agent-card .agent-call-confirmation-kicker small {
    color: var(--text-tertiary);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0;
}

.single-agent-card:hover {
    border-color: var(--theme-border-strong);
    box-shadow: var(--theme-shadow);
    transform: none;
}

.single-agent-card .agent-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.single-agent-card .agent-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.single-agent-card .agent-task-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 3.75rem;
    padding: var(--spacing-sm) var(--spacing-md);
    resize: vertical;
    border: 1px solid var(--theme-border);
    border-radius: var(--radius-md);
    background: var(--surface-hover);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.9rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: all var(--transition-fast);
}

.single-agent-card .agent-task-input::placeholder {
    color: var(--text-secondary);
}

.single-agent-card .agent-task-input:focus {
    border-color: var(--theme-border-strong);
    outline: none;
    background: var(--surface-elevated);
    box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--theme-focus) 18%, transparent);
}

.agent-selection-container .agent-task-editor {
    display: grid;
    gap: 0.375rem;
    margin-top: var(--spacing-sm);
}

.agent-selection-container .agent-task-editor .task-label {
    color: var(--text-tertiary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.agent-selection-container .agent-assigned-task-input {
    width: 100%;
    min-height: 3.625rem;
    padding: 0.5625rem 0.625rem;
    resize: vertical;
    border: 1px solid rgba(0, 212, 255, 0.16);
    border-radius: var(--radius-sm);
    background: rgba(8, 15, 28, 0.56);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.82rem;
    line-height: 1.5;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.agent-selection-container .agent-assigned-task-input:focus {
    border-color: rgba(0, 212, 255, 0.52);
    outline: none;
    background: rgba(10, 24, 42, 0.72);
    box-shadow: 0 0 0 0.1875rem rgba(0, 212, 255, 0.08);
}

.single-agent-card .agent-card-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.single-agent-card .btn-invoke-agent,
.single-agent-card .btn-open-web-agent,
.single-agent-card .btn-cancel-agent-invoke {
    flex: 1;
    min-height: 2.5rem;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: var(--radius-md);
    background: rgba(0, 212, 255, 0.1);
    color: var(--accent-blue);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    transition: all var(--transition-fast);
}

.single-agent-card .btn-invoke-agent:hover,
.single-agent-card .btn-open-web-agent:hover {
    background: rgba(0, 212, 255, 0.15);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 212, 255, 0.2);
    transform: translateY(-1px);
}

.single-agent-card .btn-cancel-agent-invoke {
    flex: 0 0 auto;
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.44);
    color: var(--text-secondary);
}

.single-agent-card .btn-cancel-agent-invoke:hover {
    border-color: rgba(148, 163, 184, 0.42);
    background: rgba(30, 41, 59, 0.58);
    color: var(--text-primary);
}

.single-agent-card .btn-invoke-agent:disabled,
.single-agent-card .btn-open-web-agent:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.single-agent-card .agent-result {
    max-height: 18.75rem;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-md);
    overflow-y: auto;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-bg-light);
    backdrop-filter: blur(var(--glass-blur-light));
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
}

.single-agent-card .agent-result .result-label {
    margin-bottom: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.single-agent-card .agent-result .result-content {
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.single-agent-card .agent-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.single-agent-card .agent-status .status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--accent-orange);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.single-agent-card .agent-status.success .status-dot {
    background: var(--accent-green);
    animation: none;
}

.single-agent-card .agent-status.error .status-dot {
    background: var(--accent-red);
    animation: none;
}

@media (max-width: 48rem) {
    .single-agent-card {
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }

    .single-agent-card .agent-card-header {
        gap: var(--spacing-sm);
    }
}

/* ============================================
   修改密码 - 视图层与表单样式
   沿用深色玻璃拟态 + 蓝紫渐变体系
   ============================================ */

/* --- 视图层淡入淡出过渡 --- */
.user-info-view,
.change-password-view {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 视图隐藏态：淡出 + 轻微下移，配合 JS 的 display 切换 */
.user-info-view.is-hidden,
.change-password-view.is-hidden {
    opacity: 0;
    transform: translateY(0.5rem);
    pointer-events: none;
}

/* 视图显示态：淡入复位 */
.user-info-view.is-visible,
.change-password-view.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- 用户信息操作区 --- */
.user-info-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.user-info-admin-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-sm);
}

.user-info-admin-actions.is-hidden {
    display: none;
}

.user-info-admin-btn {
    min-width: 0;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

/* 修改密码入口按钮：蓝紫渐变边框 + 玻璃背景 */
.btn-change-password {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--glass-bg-light);
    backdrop-filter: blur(var(--glass-blur-light));
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    color: var(--text-primary);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-family: var(--font-text);
    font-size: 0.95rem;
    font-weight: 500;
    /* 蓝紫渐变描边：用 background-clip 双层叠加实现渐变边框 */
    background-image:
        linear-gradient(var(--glass-bg-light), var(--glass-bg-light)),
        linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    -webkit-background-clip: padding-box, border-box;
    transition: all var(--transition-fast);
}

.btn-change-password svg {
    color: var(--accent-blue);
    transition: color var(--transition-fast);
}

.btn-change-password:hover {
    /* hover 发光：蓝紫混合光晕 */
    box-shadow:
        0 0 0 1px rgba(0, 212, 255, 0.3),
        0 0 1.125rem rgba(0, 212, 255, 0.18),
        0 0 1.75rem rgba(168, 85, 247, 0.14);
    transform: translateY(-1px);
}

.btn-change-password:hover svg {
    color: var(--accent-purple);
}

.btn-change-password:active {
    transform: translateY(0);
}

/* --- 返回按钮 --- */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    background: transparent;
    color: var(--text-secondary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-text);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.btn-back:hover {
    color: var(--accent-blue);
    background: rgba(0, 212, 255, 0.06);
}

/* --- 修改密码标题 --- */
.change-password-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xl);
}

/* --- 密码输入组 --- */
.password-input-group {
    position: relative;
    margin-bottom: var(--spacing-lg);
}

.password-input-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    font-family: var(--font-text);
}

/* 输入框包裹层：相对定位，承载 toggle 按钮 */
.password-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

/* 密码输入框：深色玻璃背景 + 聚焦蓝紫发光边框 */
.password-input-group input {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-xl) var(--spacing-md) var(--spacing-lg);
    background: rgba(10, 14, 23, 0.6);
    border: 1px solid rgba(0, 212, 255, 0.1);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: var(--font-text);
    outline: none;
    transition: all var(--transition-fast);
}

.password-input-group input::placeholder {
    color: var(--text-tertiary);
}

/* 聚焦：蓝紫双色发光边框 */
.password-input-group input:focus {
    border-color: var(--accent-blue);
    box-shadow:
        0 0 0 0.1875rem rgba(0, 212, 255, 0.15),
        0 0 1rem rgba(0, 212, 255, 0.18),
        0 0 1.5rem rgba(168, 85, 247, 0.12);
}

/* 输入框错误态：红色边框 */
.password-input-group.error input {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 0.1875rem rgba(239, 68, 68, 0.15);
}

/* --- 眼睛显隐切换按钮 --- */
.password-toggle-btn {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

/* 眼睛图标颜色与 hover */
.eye-icon {
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.password-toggle-btn:hover .eye-icon {
    color: var(--accent-blue);
}

.password-toggle-btn:active {
    transform: translateY(-50%) scale(0.92);
}

/* --- 密码强度条 --- */
.password-strength {
    height: 0.25rem;
    width: 100%;
    margin-top: var(--spacing-sm);
    background: rgba(148, 163, 184, 0.15);
    border-radius: 0.125rem;
    overflow: hidden;
}

/* 强度条：宽度与颜色由 CSS 变量控制（默认 width:0），JS 通过 inline style 设置变量 */
.password-strength-bar {
    height: 100%;
    width: var(--strength-width, 0);
    background: var(--strength-color, var(--accent-blue));
    border-radius: 0.125rem;
    /* 渐变过渡：宽度与颜色平滑变化 */
    transition: width 0.3s ease, background-color 0.3s ease;
}

/* 强度标签 */
.password-strength-label {
    display: inline-block;
    margin-top: var(--spacing-xs);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--strength-color, var(--text-secondary));
    transition: color 0.3s ease;
}

/* --- 长度提示 / 不一致提示 --- */
.password-hint {
    margin-top: var(--spacing-xs);
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-family: var(--font-text);
}

.password-mismatch {
    margin-top: var(--spacing-xs);
    font-size: 0.75rem;
    color: var(--accent-red);
    font-family: var(--font-text);
    min-height: 1em;
}

/* --- 状态提示区：成功绿色 / 错误红色 --- */
.change-password-message {
    margin-top: var(--spacing-md);
    text-align: center;
    font-size: 0.85rem;
    font-family: var(--font-text);
    min-height: 1.2em;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.change-password-message.success {
    color: var(--color-success);
}

.change-password-message.error {
    color: var(--accent-red);
}

/* --- 提交按钮 loading 态 --- */
.btn-primary .btn-primary-spinner {
    display: none;
    /* 旋转图标：用边框实现的圆环 spinner */
    width: 1.125rem;
    height: 1.125rem;
    border: 0.125rem solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: btn-spinner-rotate 0.7s linear infinite;
}

/* loading 态：禁用按钮 + 显示 spinner + 隐藏文字 */
.btn-primary.loading {
    pointer-events: none;
    opacity: 0.75;
    cursor: not-allowed;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.btn-primary.loading .btn-primary-text {
    display: none;
}

.btn-primary.loading .btn-primary-spinner {
    display: inline-block;
}

/* spinner 旋转动画 */
@keyframes btn-spinner-rotate {
    to {
        transform: rotate(360deg);
    }
}

/* --- 移动端适配 --- */
@media (max-width: 48rem) {
    .password-input-group input {
        min-height: 3rem;
        font-size: 1rem;
        padding-right: 3rem;
    }

    .btn-change-password {
        min-height: 3rem;
    }

    .change-password-title {
        font-size: 1rem;
        margin-bottom: var(--spacing-lg);
    }

    .password-toggle-btn {
        width: 2.75rem;
        height: 2.75rem;
        right: var(--spacing-sm);
    }
}

@media (max-width: 30rem) {
    .password-input-group input {
        min-height: 2.75rem;
    }

    .btn-change-password,
    .btn-primary {
        min-height: 2.75rem;
    }
}

/* ACPs 多轮对话：将协议状态转为紧凑、可回看的用户/智能体消息流。 */
.agent-dialogue {
    margin: 0.25rem 0 0.125rem;
    border: 1px solid rgba(67, 204, 255, 0.28);
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(8, 31, 56, 0.88), rgba(14, 18, 55, 0.76));
}

.agent-dialogue-heading {
    min-height: 2.75rem;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: #d9f7ff;
    border-bottom: 1px solid rgba(108, 207, 255, 0.16);
}

.agent-dialogue-heading span {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.agent-dialogue-heading small {
    color: #78e7ff;
    font-size: 0.78rem;
    white-space: nowrap;
}

.agent-dialogue-history {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    max-height: 26.25rem;
    overflow-y: auto;
    scrollbar-color: rgba(87, 219, 255, 0.65) transparent;
}

.agent-dialogue-turn {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    max-width: min(88%, 47.5rem);
}

.agent-dialogue-user {
    margin-left: auto;
    flex-direction: row-reverse;
}

.agent-dialogue-avatar {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 1.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #061321;
    background: linear-gradient(135deg, #68e8ff, #7c75ff);
    font-size: 0.76rem;
    font-weight: 800;
}

.agent-dialogue-user .agent-dialogue-avatar {
    color: #fff;
    background: linear-gradient(135deg, #8069ff, #c75cff);
}

.agent-dialogue-bubble {
    min-width: 0;
    padding: 0.625rem 0.8125rem;
    border: 1px solid rgba(107, 220, 255, 0.23);
    border-radius: 0.25rem 0.875rem 0.875rem 0.875rem;
    color: #e7f5ff;
    background: rgba(8, 41, 72, 0.72);
}

.agent-dialogue-user .agent-dialogue-bubble {
    border-color: rgba(166, 120, 255, 0.35);
    border-radius: 0.875rem 0.25rem 0.875rem 0.875rem;
    background: rgba(80, 49, 142, 0.52);
}

.agent-dialogue-label {
    display: block;
    margin-bottom: 0.25rem;
    color: #84dff3;
    font-size: 0.72rem;
    font-weight: 700;
}

.agent-dialogue-user .agent-dialogue-label {
    color: #d8c4ff;
    text-align: right;
}

.agent-dialogue-content {
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.agent-dialogue-content > :first-child { margin-top: 0; }
.agent-dialogue-content > :last-child { margin-bottom: 0; }

.agent-dialogue-composer {
    padding: 0.875rem 1rem 1rem;
    border-top: 1px solid rgba(108, 207, 255, 0.16);
    background: rgba(1, 13, 30, 0.4);
}

.agent-dialogue-composer-label {
    margin-bottom: 0.5rem;
    color: #d8edf9;
    font-size: 0.88rem;
    font-weight: 650;
}

.agent-dialogue-input-row {
    display: flex;
    align-items: flex-end;
    gap: 0.625rem;
}

.agent-dialogue-input-row textarea {
    width: 100%;
    min-height: 2.875rem;
    max-height: 8.25rem;
    box-sizing: border-box;
    resize: vertical;
    padding: 0.75rem 0.8125rem;
    border: 1px solid rgba(121, 218, 255, 0.34);
    border-radius: 0.75rem;
    outline: none;
    color: #edf9ff;
    background: rgba(2, 17, 37, 0.9);
    font: inherit;
    line-height: 1.4;
}

.agent-dialogue-input-row textarea::placeholder { color: #7894ad; }
.agent-dialogue-input-row textarea:focus { border-color: #54ddff; box-shadow: 0 0 0 0.1875rem rgba(70, 207, 255, 0.14); }
.agent-dialogue-input-row textarea:disabled { opacity: 0.58; cursor: wait; }

.agent-dialogue-send {
    width: 2.875rem;
    height: 2.875rem;
    flex: 0 0 2.875rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0.8125rem;
    color: #fff;
    background: linear-gradient(135deg, #0ad4ef, #6b4ff4);
    box-shadow: 0 0.5rem 1.375rem rgba(45, 111, 255, 0.28);
    font-size: 1.3rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, filter 0.18s ease;
}

.agent-dialogue-send:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.agent-dialogue-send:disabled { cursor: wait; opacity: 0.66; }

/* 叮当的多智能体协调续办卡片：表达“恢复既有协作”，不复用 ACPs 调用过程。 */
.secretary-continuation-card {
    width: min(47.5rem, 100%);
    margin: var(--spacing-lg) 0;
    overflow: hidden;
    border: 1px solid rgba(37, 211, 246, 0.28);
    border-radius: var(--radius-xl);
    background: linear-gradient(145deg, rgba(10, 32, 58, 0.96), rgba(18, 27, 65, 0.94));
    box-shadow: 0 0.75rem 2.125rem rgba(1, 13, 34, 0.30), inset 0 1px 0 rgba(154, 239, 255, 0.12);
    color: #e8f7ff;
    animation: processCardSlideIn 0.45s ease both;
}

.secretary-continuation-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.875rem; padding: 1.125rem 1.25rem 0.875rem; border-bottom: 1px solid rgba(104, 225, 255, 0.13); }
.secretary-continuation-head h3 { margin: 0.1875rem 0 0; color: #f1fbff; font-size: 1.04rem; }
.secretary-continuation-kicker { color: #45dff7; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: .08em; }
.secretary-continuation-state { flex: 0 0 auto; padding: 0.3125rem 0.625rem; border: 1px solid rgba(103, 225, 255, .30); border-radius: 62.438rem; color: #8deeff; background: rgba(38, 211, 246, .10); font-size: .76rem; font-weight: 700; }
.secretary-continuation-state.is-completed { color: #8cf1c7; border-color: rgba(70, 222, 159, .32); background: rgba(41, 184, 125, .14); }
.secretary-continuation-state.is-waiting { color: #ffdc8e; border-color: rgba(255, 193, 93, .35); background: rgba(235, 157, 35, .13); }
.secretary-continuation-state.is-error { color: #ffb6bc; border-color: rgba(255, 111, 126, .35); background: rgba(217, 65, 86, .14); }
.secretary-continuation-context { margin: 0.9375rem 1.25rem 0.75rem; padding: 0.75rem 0.875rem; border-left: 0.1875rem solid #35d8f4; border-radius: 0 0.625rem 0.625rem 0; background: rgba(11, 190, 233, .08); }
.secretary-continuation-context span, .secretary-continuation-members small { color: #8da9c4; font-size: .72rem; }
.secretary-continuation-context p { margin: 0.3125rem 0 0; color: #d8edfb; line-height: 1.5; white-space: pre-wrap; }
.secretary-continuation-members { padding: 0 1.25rem 0.8125rem; }
.secretary-continuation-members > div { display: flex; flex-wrap: wrap; gap: 0.4375rem; margin-top: 0.4375rem; }
.secretary-continuation-members span { padding: 0.25rem 0.5625rem; border-radius: 62.438rem; background: rgba(106, 92, 255, .16); border: 1px solid rgba(141, 130, 255, .25); color: #d8d4ff; font-size: .75rem; }
.secretary-continuation-activity { margin: 0; padding: 0.8125rem 1.25rem 1.0625rem 2.4375rem; border-top: 1px solid rgba(104, 225, 255, .10); }
.secretary-continuation-activity li { position: relative; padding: 0.25rem 0 0.3125rem 0.3125rem; color: #b9d0e2; font-size: .84rem; line-height: 1.45; }
.secretary-continuation-activity li::before { content: ''; position: absolute; left: -0.9375rem; top: 0.625rem; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: #5f7894; }
.secretary-continuation-activity li.is-working::before { background: #38ddf5; box-shadow: 0 0 0 0.3125rem rgba(56, 221, 245, .10); animation: secretaryContinuationPulse 1.5s ease-in-out infinite; }
.secretary-continuation-activity li.is-completed::before { background: #63e1af; }
.secretary-continuation-activity li.is-waiting::before { background: #ffcb71; }
.secretary-continuation-activity li.is-error::before { background: #ff8f9a; }
@keyframes secretaryContinuationPulse { 50% { box-shadow: 0 0 0 0.5rem rgba(56, 221, 245, 0); } }

.agent-dialogue-helper {
    min-height: 1.125rem;
    margin-top: 0.4375rem;
    color: #87a8bd;
    font-size: 0.76rem;
}

.agent-dialogue-composer.is-error .agent-dialogue-helper { color: #ffb6bc; }

.agent-dialogue-spinner {
    width: 0.9375rem;
    height: 0.9375rem;
    border: 0.125rem solid rgba(255, 255, 255, 0.44);
    border-top-color: #fff;
    border-radius: 50%;
    animation: agent-dialogue-spin 0.7s linear infinite;
}

@keyframes agent-dialogue-spin { to { transform: rotate(360deg); } }

@media (max-width: 40rem) {
    .agent-interaction-status { align-items: flex-start; padding: 0.6875rem 0.75rem; }
    .agent-interaction-status-copy strong { white-space: normal; }
    .agent-interaction-end { padding: 0.5rem 0.5625rem; font-size: 0.72rem; }
    .agent-dialogue-heading,
    .agent-dialogue-composer { padding-left: 0.75rem; padding-right: 0.75rem; }
    .agent-dialogue-history { padding: 0.75rem; max-height: 22.5rem; gap: 0.625rem; }
    .agent-dialogue-turn { max-width: 100%; gap: 0.5rem; }
    .agent-dialogue-avatar { width: 1.5625rem; height: 1.5625rem; flex-basis: 1.5625rem; }
    .agent-dialogue-bubble { padding: 0.5625rem 0.6875rem; font-size: 0.94rem; }
    .agent-dialogue-heading small { font-size: 0.72rem; }
    .agent-dialogue-input-row { gap: 0.5rem; }
    .agent-dialogue-send { width: 2.75rem; height: 2.75rem; flex-basis: 2.75rem; border-radius: 0.75rem; }
}

@media (max-width: 23.75rem) {
    .agent-dialogue-heading { min-height: 2.5rem; }
    .agent-dialogue-heading small { display: none; }
    .agent-dialogue-input-row { align-items: stretch; }
    .agent-dialogue-input-row textarea { min-height: 2.75rem; }
}

/* Discovery catalog: keep the inline card compact while retaining access to every returned candidate. */
.btn-view-more-agents {
    width: calc(100% - 1.5rem);
    margin: 0.625rem 0.75rem 0.125rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(83, 202, 255, .36);
    border-radius: 0.5625rem;
    background: rgba(59, 167, 231, .08);
    color: #8edcff;
    cursor: pointer;
}
.btn-view-more-agents:hover { background: rgba(59, 167, 231, .18); }
.agent-catalog-overlay { display: flex; align-items: center; justify-content: center; padding: 1.25rem; z-index: 2000; }
.agent-catalog-modal { width: min(73.75rem, 96vw); height: min(47.5rem, 86vh); max-width: none; max-height: none; display: flex; flex-direction: column; overflow: hidden; border-color: rgba(89, 210, 255, .22); background: linear-gradient(145deg, rgba(9, 24, 47, .98), rgba(18, 23, 57, .97)); }
.agent-catalog-modal .modal-header { flex: 0 0 auto; }
.agent-catalog-modal .modal-close { width: 2.125rem; height: 2.125rem; display: grid; place-items: center; border: 1px solid rgba(94, 216, 255, .38); border-radius: 0.625rem; color: #9ceaff; background: rgba(38, 177, 230, .12); font-size: 1.35rem; line-height: 1; transition: .18s ease; }
.agent-catalog-modal .modal-close:hover { border-color: rgba(128, 230, 255, .75); color: #fff; background: rgba(73, 205, 249, .25); transform: translateY(-1px); }
.agent-catalog-hint { margin: 0 1.25rem 0.75rem; color: #9db5c6; font-size: .86rem; }
.agent-catalog-web-task { display: grid; gap: 0.3125rem; margin: 0 1.25rem 0.75rem; color: #94c6dd; font-size: .8rem; }
.agent-catalog-web-task-input { width: 100%; resize: vertical; border: 1px solid rgba(120, 184, 218, .34); border-radius: 0.4375rem; padding: 0.5rem; background: rgba(3, 23, 42, .65); color: #e7f7ff; font: inherit; }
.agent-catalog-body { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(16.25rem, .8fr); min-height: 0; flex: 1 1 auto; overflow: hidden; padding: 0 1.25rem; }
.agent-catalog-results { min-height: 0; display: flex; flex-direction: column; padding-right: 0.875rem; }
.agent-catalog-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; align-content: start; flex: 1 1 auto; overflow-y: auto; padding: 0.125rem 0 0.5rem; }
.agent-catalog-card { position: relative; min-height: 7.25rem; box-sizing: border-box; padding: 0.9375rem 0.8125rem 0.75rem 2.4375rem; border: 1px solid rgba(128, 190, 226, .18); border-radius: 0.6875rem; background: rgba(8, 29, 52, .58); cursor: pointer; transition: .18s ease; }
.agent-catalog-card:hover, .agent-catalog-card.is-active { border-color: rgba(76, 215, 255, .68); background: rgba(31, 145, 207, .14); transform: translateY(-1px); }
.agent-catalog-card:has(input:checked) { box-shadow: inset 0 0 0 1px rgba(98, 220, 255, .25); }
.agent-catalog-checkbox { position: absolute; top: 0.875rem; left: 0.8125rem; width: 1rem; height: 1rem; accent-color: #48d7fb; }
.agent-catalog-content { display: grid; gap: 0.375rem; min-width: 0; color: #a9c0d1; }
.agent-catalog-content strong { color: #eef8ff; }
.agent-catalog-content > span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: .78rem; line-height: 1.42; }
.agent-catalog-details { overflow-y: auto; padding: 0.875rem; border: 1px solid rgba(110, 204, 241, .2); border-radius: 0.75rem; background: rgba(2, 16, 36, .55); }
.agent-catalog-detail-heading { display: grid; gap: 0.4375rem; color: #aac5d8; font-size: .84rem; line-height: 1.48; }
.agent-catalog-detail-heading strong { color: #f1fbff; font-size: 1rem; }
.agent-catalog-capabilities { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.875rem; }
.agent-catalog-capabilities span { padding: 0.25rem 0.4375rem; border: 1px solid rgba(98, 206, 249, .24); border-radius: 62.438rem; color: #9fe8ff; background: rgba(50, 187, 238, .09); font-size: .72rem; }
.agent-catalog-task { display: grid; gap: 0.3125rem; margin-top: 1rem; color: #94c6dd; font-size: .8rem; }
.agent-catalog-task-input { width: 100%; resize: vertical; border: 1px solid rgba(120, 184, 218, .34); border-radius: 0.4375rem; padding: 0.5rem; background: rgba(3, 23, 42, .65); color: #e7f7ff; font: inherit; }
.agent-catalog-actions { display: flex; justify-content: flex-end; gap: 0.625rem; padding: 1rem 1.25rem 1.25rem; }
.agent-catalog-pagination { display: flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 2.375rem; padding-top: 0.625rem; color: #a9c9db; font-size: .8rem; }
.agent-catalog-page-button, .agent-catalog-select-all { min-height: 2.125rem; padding: 0.4375rem 0.75rem; border: 1px solid rgba(92, 210, 255, .28); border-radius: 0.5625rem; color: #a8e9ff; background: rgba(36, 151, 207, .10); white-space: nowrap; cursor: pointer; }
.agent-catalog-page-button:disabled { opacity: .4; cursor: not-allowed; }
.agent-catalog-page-button:hover:not(:disabled), .agent-catalog-select-all:hover { background: rgba(54, 182, 233, .21); }
.agent-catalog-cancel { min-width: 5.75rem; white-space: nowrap; }
@media (max-width: 56.25rem) { .agent-catalog-modal { height: min(51.25rem, 92vh); } .agent-catalog-body { grid-template-columns: 1fr; gap: 0.75rem; overflow-y: auto; } .agent-catalog-results { padding-right: 0; } .agent-catalog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 0 0 auto; overflow: visible; } .agent-catalog-details { min-height: 9.375rem; } }
@media (max-width: 35rem) { .agent-catalog-overlay { padding: 0.5rem; } .agent-catalog-modal { width: 100%; max-height: 94vh; } .agent-catalog-list { grid-template-columns: 1fr; } .agent-catalog-actions { flex-wrap: wrap; } }
/* Chat message media resources */
.message-resource-list {
    display: grid;
    gap: 0.625rem;
    min-width: 0;
    margin: 0.625rem 0;
}

.message-resource {
    box-sizing: border-box;
    color: var(--text-primary);
    font: inherit;
}

.message-resource-image {
    width: min(100%, 35rem);
    max-width: min(100%, 35rem);
    margin: 0;
    background: transparent;
}

.message-resource-image-button {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 0.875rem;
    background: #080d17;
    cursor: zoom-in;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.message-resource-image-button:hover {
    border-color: rgba(103, 232, 249, 0.52);
    box-shadow: 0 0.75rem 2.125rem rgba(0, 0, 0, 0.32), var(--neon-glow-sm);
    transform: translateY(-1px);
}

.message-resource-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 32.5rem;
    object-fit: contain;
}

.message-resource-image figcaption {
    padding: 0.4375rem 0.125rem 0;
    overflow: hidden;
    color: var(--text-tertiary);
    font-size: 0.76rem;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-resource-file {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) 1.75rem;
    align-items: center;
    gap: 0.75rem;
    width: min(100%, 28.75rem);
    min-height: 4.5rem;
    padding: 0.6875rem 0.8125rem;
    border: 1px solid var(--glass-border);
    border-radius: 0.875rem;
    background: linear-gradient(145deg, rgba(20, 29, 45, 0.88), rgba(11, 17, 29, 0.78));
    box-shadow: inset 0 1px 0 var(--glass-glow), 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.message-resource-file:hover:not(:disabled) {
    border-color: rgba(103, 232, 249, 0.48);
    background: linear-gradient(145deg, rgba(23, 42, 61, 0.94), rgba(12, 23, 39, 0.86));
    transform: translateY(-1px);
}

.message-resource-file:disabled {
    cursor: wait;
    opacity: 0.72;
}

.message-resource-file-icon {
    --message-resource-file-accent: #cbd5e1;
    position: relative;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    border-radius: 0.75rem;
    color: var(--message-resource-file-accent);
    background: rgba(100, 116, 139, 0.16);
}

.message-resource-file-icon svg {
    width: 1.6875rem;
    height: 1.6875rem;
    fill: currentColor;
    opacity: 0.9;
}

.message-resource-file-icon svg path + path {
    fill: none;
    stroke: rgba(5, 12, 22, 0.68);
    stroke-width: 1.7;
}

.message-resource-file-icon small {
    position: absolute;
    right: 0.1875rem;
    bottom: 0.1875rem;
    max-width: 2.625rem;
    padding: 1px 0.1875rem;
    overflow: hidden;
    border-radius: 0.25rem;
    color: #07101c;
    background: var(--message-resource-file-accent);
    font: 800 0.5rem/1.2 var(--font-mono);
    letter-spacing: -0.02em;
    text-overflow: clip;
}

.message-resource-file-icon-pdf { --message-resource-file-accent: #fb7185; background: rgba(251, 113, 133, 0.15); }
.message-resource-file-icon-document { --message-resource-file-accent: #60a5fa; background: rgba(96, 165, 250, 0.15); }
.message-resource-file-icon-spreadsheet { --message-resource-file-accent: #4ade80; background: rgba(74, 222, 128, 0.15); }
.message-resource-file-icon-presentation { --message-resource-file-accent: #fbbf24; background: rgba(251, 191, 36, 0.15); }
.message-resource-file-icon-archive { --message-resource-file-accent: #c084fc; background: rgba(192, 132, 252, 0.15); }
.message-resource-file-icon-audio { --message-resource-file-accent: #22d3ee; background: rgba(34, 211, 238, 0.15); }
.message-resource-file-icon-video { --message-resource-file-accent: #f472b6; background: rgba(244, 114, 182, 0.15); }
.message-resource-file-icon-code { --message-resource-file-accent: #94a3b8; background: rgba(148, 163, 184, 0.15); }
.message-resource-file-icon-generic { --message-resource-file-accent: #cbd5e1; background: rgba(203, 213, 225, 0.12); }

.message-resource-file-copy {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.message-resource-file-copy strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-resource-file-copy small {
    overflow: hidden;
    color: var(--text-tertiary);
    font-size: 0.72rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-resource-download-icon {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 1.75rem;
    border-radius: 50%;
    color: #8ee9fa;
    background: rgba(34, 211, 238, 0.1);
    font-size: 1rem;
    font-weight: 700;
}

.message-resource-image-button:focus-visible,
.message-resource-file:focus-visible,
.message-image-lightbox-close:focus-visible {
    outline: 0.1875rem solid #67e8f9;
    outline-offset: 0.1875rem;
}

body.message-image-lightbox-open {
    overflow: hidden;
}

.message-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    padding: 2rem;
    background: rgba(1, 5, 12, 0.94);
    backdrop-filter: blur(0.875rem);
    -webkit-backdrop-filter: blur(0.875rem);
    cursor: zoom-out;
    animation: message-image-lightbox-in 150ms ease-out;
}

.message-image-lightbox[hidden] {
    display: none;
}

.message-image-lightbox-figure {
    display: grid;
    gap: 0.75rem;
    max-width: 92vw;
    max-height: 92vh;
    margin: 0;
    cursor: default;
}

.message-image-lightbox-figure img {
    display: block;
    max-width: 92vw;
    max-height: 88vh;
    margin: auto;
    border-radius: 0.625rem;
    object-fit: contain;
    box-shadow: 0 1.625rem 5.625rem rgba(0, 0, 0, 0.55);
}

.message-image-lightbox-figure figcaption {
    overflow: hidden;
    color: #dbeafe;
    font-size: 0.84rem;
    line-height: 1.4;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-image-lightbox-close {
    position: fixed;
    top: max(1.125rem, env(safe-area-inset-top));
    right: max(1.125rem, env(safe-area-inset-right));
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    color: #fff;
    background: rgba(15, 23, 42, 0.76);
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
}

@keyframes message-image-lightbox-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 37.5rem) {
    .message.assistant:has(.message-resource-list) {
        width: 100%;
        max-width: 100%;
    }

    .message.assistant:has(.message-resource-list) .message-content-wrapper {
        width: calc(100% - 2.875rem);
        min-width: 0;
        max-width: calc(100% - 2.875rem);
    }

    .message-resource-file,
    .message-resource-image {
        width: 100%;
        max-width: 100%;
    }

    .message-resource-image img {
        max-height: 70vh;
    }

    .message-image-lightbox {
        padding: max(1rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
    }

    .message-image-lightbox-close {
        top: max(0.625rem, env(safe-area-inset-top));
        right: max(0.625rem, env(safe-area-inset-right));
    }
}

@media (prefers-reduced-motion: reduce) {
    .message-resource,
    .message-resource-image-button,
    .message-resource-file,
    .message-image-lightbox {
        animation: none !important;
        transition: none !important;
    }
}
.attachment-preview {
    align-items: stretch;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 0.5rem 2.875rem;
    padding: 0.5rem 0.75rem;
    max-width: min(32.5rem, calc(100% - 3.75rem));
    border: 1px solid var(--border-color, #dfe3ea);
    border-radius: 0.625rem;
    background: var(--card-bg, #fff);
    font-size: 0.8125rem;
}
.attachment-preview-item { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.attachment-preview-item span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-preview-item span:nth-child(3) { color: #667085; }
.attachment-preview button { border: 0; background: transparent; cursor: pointer; font-size: 1.125rem; }
.agent-output-artifacts { display: grid; gap: 0.625rem; margin-top: 0.75rem; }
.agent-output-artifact { border: 1px solid var(--border-color, #dfe3ea); border-radius: 0.625rem; padding: 0.625rem; background: var(--card-bg, #fff); color: inherit; text-align: left; }
.agent-output-artifact img { display: block; max-width: 100%; max-height: 22.5rem; margin: auto; border-radius: 0.5rem; }
.agent-output-artifact audio { width: 100%; }
.agent-output-artifact figcaption, .agent-output-artifact span { display: block; margin-top: 0.375rem; color: #667085; font-size: 0.75rem; }
.agent-output-artifact.is-unavailable { opacity: .7; }

/* ============================================
   Theme-aware ChatGPT-style application shell
   ============================================ */

body {
    min-width: 20rem;
    background: var(--surface-canvas);
    color: var(--theme-text-primary);
    transition: background-color var(--theme-motion-normal), color var(--theme-motion-normal);
}

button,
textarea,
input,
select {
    font: inherit;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 0.125rem solid var(--theme-focus);
    outline-offset: 0.125rem;
    box-shadow: none;
}

.chat-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--surface-canvas);
}

.conversation-sidebar {
    position: relative;
    z-index: 40;
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.625rem 0.5rem 0.75rem;
    /* Desktop account submenus may extend beyond the sidebar. */
    overflow: visible;
    border-right: 1px solid var(--theme-border);
    background: var(--surface-sidebar);
    color: var(--theme-text-primary);
    transition: transform var(--theme-motion-normal), background-color var(--theme-motion-normal);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.925rem;
    font-weight: 600;
}

.sidebar-brand .dingdang-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    cursor: default;
    box-shadow: none;
}

.sidebar-brand .dingdang-avatar:hover {
    transform: none;
    box-shadow: none;
}

.new-conversation-button,
.sidebar-nav-button {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--theme-text-primary);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--theme-motion-fast);
}

.new-conversation-button:hover,
.sidebar-nav-button:hover {
    background: var(--surface-hover);
}

.new-conversation-button svg,
.sidebar-nav-button svg {
    flex: 0 0 auto;
}

.sidebar-nav {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--theme-border);
}

.recent-conversations-section {
    min-height: 0;
    flex: 1;
    padding: 0.5rem 0.25rem;
    overflow-y: auto;
}

.recent-conversations-section h2 {
    margin: 0 0.625rem 0.625rem;
    color: var(--theme-text-tertiary);
    font-size: 0.875rem;
    font-weight: 600;
}

.recent-conversations-empty {
    display: grid;
    gap: 0.3125rem;
    padding: 0.75rem 0.5rem;
    color: var(--theme-text-secondary);
}

.recent-conversations-empty p {
    margin: 0;
    font-size: 0.85rem;
}

.recent-conversations-empty span {
    color: var(--theme-text-tertiary);
    font-size: 0.75rem;
    line-height: 1.45;
}

.recent-conversations-list {
    display: grid;
    gap: 0.125rem;
}

.recent-conversation-entry {
    position: relative;
    width: 100%;
    min-width: 0;
    border-radius: 0.75rem;
    color: var(--theme-text-secondary);
    background: transparent;
    transition: background-color var(--theme-motion-fast), color var(--theme-motion-fast);
}

.recent-conversation-entry:hover,
.recent-conversation-entry.is-active,
.recent-conversation-entry.is-confirming-delete {
    color: var(--theme-text-primary);
    background: var(--surface-hover);
}

.recent-conversation-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 3rem;
    padding: 0.7rem 3rem 0.7rem 0.75rem;
    border: 0;
    border-radius: inherit;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.35;
}

.recent-conversation-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-status-indicator {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.5rem;
    border-radius: 50%;
}

.conversation-status-indicator.is-running {
    border: 1.5px solid rgba(170, 180, 190, 0.34);
    border-top-color: rgba(170, 180, 190, 0.9);
    animation: conversation-status-spin 0.75s linear infinite;
}

.conversation-status-indicator.is-attention {
    background: #8ecbff;
    box-shadow: 0 0 0 2px rgba(142, 203, 255, 0.12);
}

@keyframes conversation-status-spin { to { transform: rotate(360deg); } }

.recent-conversation-delete-button {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    color: var(--theme-text-tertiary);
    background: transparent;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity var(--theme-motion-fast), color var(--theme-motion-fast), background var(--theme-motion-fast);
}

.recent-conversation-delete-button svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.recent-conversation-entry:hover .recent-conversation-delete-button,
.recent-conversation-entry:focus-within .recent-conversation-delete-button,
.recent-conversation-entry.is-active .recent-conversation-delete-button {
    opacity: 1;
}

.recent-conversation-delete-button:hover {
    color: #f87171;
    background: color-mix(in srgb, #f87171 12%, transparent);
}

.recent-conversation-delete-button:focus-visible {
    opacity: 1;
    outline: 2px solid var(--theme-focus);
    outline-offset: 1px;
}

.recent-conversation-delete-confirm {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
    padding: 0.5rem 0.625rem;
    border-radius: inherit;
    background: var(--surface-elevated);
}

.recent-conversation-delete-confirm span {
    margin-right: auto;
    padding-left: 0.125rem;
    color: var(--theme-text-secondary);
    font-size: 0.8125rem;
}

.recent-conversation-delete-confirm button {
    padding: 0.3125rem 0.5rem;
    border: 1px solid var(--theme-border-strong);
    border-radius: 0.4375rem;
    color: var(--theme-text-primary);
    background: transparent;
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.recent-conversation-delete-confirm button:last-child {
    border-color: transparent;
    color: #fff;
    background: #dc2626;
}

.recent-conversation-delete-confirm button:last-child:hover,
.recent-conversation-delete-confirm button:last-child:focus-visible {
    background: #b91c1c;
}

.recent-conversation-delete-confirm button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.sidebar-footer {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    min-height: 2.75rem;
    padding: 0.4375rem 0.5rem;
    border-top: 1px solid var(--theme-border);
    color: var(--theme-text-secondary);
    font-size: 0.8rem;
}

.sidebar-footer-mark {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--surface-active);
    color: var(--theme-text-primary);
    font-weight: 700;
}

.sidebar-account-area {
    position: relative;
    flex: 0 0 auto;
    padding: 0.5rem;
    border-top: 1px solid var(--theme-border);
}

.sidebar-account-trigger {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) 1rem;
    align-items: center;
    width: 100%;
    min-height: 3rem;
    gap: 0.5625rem;
    padding: 0.4375rem;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    color: var(--theme-text-primary);
    text-align: left;
    cursor: pointer;
}

.sidebar-account-trigger:hover,
.sidebar-account-trigger[aria-expanded="true"] {
    background: var(--surface-hover);
}

.sidebar-account-avatar {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--surface-active);
    color: var(--theme-text-primary);
    font-size: 0.8rem;
    font-weight: 650;
}

.sidebar-account-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.sidebar-account-copy strong,
.sidebar-account-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-account-copy strong { font-size: 0.82rem; font-weight: 550; }
.sidebar-account-copy small { color: var(--theme-text-tertiary); font-size: 0.68rem; }
.sidebar-account-chevron { color: var(--theme-text-tertiary); transition: transform var(--theme-motion-fast); }
.sidebar-account-trigger[aria-expanded="true"] .sidebar-account-chevron { transform: rotate(180deg); }

.sidebar-account-menu {
    position: absolute;
    z-index: 45;
    right: 0.5rem;
    bottom: calc(100% + 0.5rem);
    left: 0.5rem;
    display: grid;
    gap: 0.125rem;
    padding: 0.375rem;
    border: 1px solid var(--theme-border);
    border-radius: 0.875rem;
    background: var(--surface-elevated);
    box-shadow: var(--theme-shadow);
}

.sidebar-account-menu[hidden] { display: none; }

.sidebar-account-menu > button,
.sidebar-account-theme-picker > button {
    width: 100%;
    padding: 0.5625rem 0.625rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--theme-text-primary);
    text-align: left;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.sidebar-account-menu > button:hover,
.sidebar-account-theme-picker > button:hover {
    background: var(--surface-hover);
}

.sidebar-account-admin {
    display: grid;
    gap: 0.125rem;
    padding: 0.1875rem 0;
    border-top: 1px solid var(--theme-border);
    border-bottom: 1px solid var(--theme-border);
}

.sidebar-account-admin[hidden] { display: none; }

.sidebar-account-admin button {
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--theme-text-primary);
    text-align: left;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.sidebar-account-admin button:hover { background: var(--surface-hover); }

.sidebar-account-theme-picker { position: relative; }

.sidebar-account-theme-picker .theme-menu {
    top: auto;
    right: auto;
    bottom: -0.375rem;
    left: calc(100% + 1.5rem);
}

.conversation-stage {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    background: var(--surface-canvas);
}

.conversation-header {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--shell-header-height);
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--theme-border);
    background: color-mix(in srgb, var(--surface-canvas) 94%, transparent);
    backdrop-filter: blur(0.875rem);
    color: var(--theme-text-primary);
}

.conversation-header-start,
.conversation-actions,
.header-right,
.user-info {
    display: flex;
    align-items: center;
}

.conversation-header-start {
    min-width: 0;
    gap: 0.5rem;
}

.conversation-actions {
    gap: 0.5rem;
}

.conversation-title {
    display: flex;
    align-items: baseline;
    gap: 0.4375rem;
    min-width: 0;
}

.conversation-title strong {
    font-size: 0.95rem;
    font-weight: 600;
}

.conversation-title span {
    color: var(--theme-text-tertiary);
    font-size: 0.75rem;
}

.shell-icon-button {
    display: grid;
    place-items: center;
    width: var(--shell-control-size);
    height: var(--shell-control-size);
    padding: 0;
    border: 0;
    border-radius: 0.4375rem;
    background: transparent;
    color: var(--theme-text-secondary);
    cursor: pointer;
    transition: background-color var(--theme-motion-fast), color var(--theme-motion-fast);
}

.shell-icon-button:hover {
    background: var(--surface-hover);
    color: var(--theme-text-primary);
}

.sidebar-toggle {
    display: none;
}

.theme-picker {
    position: relative;
}

.theme-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    display: grid;
    width: 8.875rem;
    padding: 0.375rem;
    border: 1px solid var(--theme-border);
    border-radius: 0.75rem;
    background: var(--surface-elevated);
    box-shadow: var(--theme-shadow);
}

.theme-menu[hidden] {
    display: none;
}

.theme-menu button {
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: 0.4375rem;
    background: transparent;
    color: var(--theme-text-primary);
    text-align: left;
    cursor: pointer;
}

.theme-menu button:hover,
.theme-menu button[aria-checked="true"] {
    background: var(--surface-hover);
}

.theme-menu button[aria-checked="true"]::after {
    content: "✓";
    float: right;
    color: var(--theme-accent);
}

.account-button,
.header-right .btn-secondary,
.header-right .btn-text {
    min-height: var(--shell-control-size);
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--theme-border-strong);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--theme-text-primary);
    font-size: 0.78rem;
    cursor: pointer;
}

.header-right .btn-secondary:hover,
.header-right .btn-text:hover,
.account-button:hover {
    border-color: var(--theme-border-strong);
    background: var(--surface-hover);
    box-shadow: none;
    transform: none;
}

.header-right .user-info {
    gap: 0.4375rem;
    color: var(--theme-text-secondary);
    font-size: 0.78rem;
}

.header-right .user-avatar {
    display: grid;
    place-items: center;
    width: var(--shell-control-size);
    height: var(--shell-control-size);
    border-radius: 50%;
    background: var(--surface-active);
    color: var(--theme-text-primary);
}

.health-monitor {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
}

.health-monitor[hidden] {
    display: none;
}

.health-monitor-summary {
    min-height: var(--shell-control-size);
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--theme-border);
    background: transparent;
    color: var(--theme-text-secondary);
    font-size: 0.7rem;
    box-shadow: none;
}

.health-monitor-summary:hover {
    border-color: var(--theme-border-strong);
    background: var(--surface-hover);
    color: var(--theme-text-primary);
}

.health-monitor-details {
    border-color: var(--theme-border);
    background: var(--surface-elevated);
    box-shadow: var(--theme-shadow);
}

.conversation-canvas {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface-canvas);
}

.conversation-canvas .messages-container {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: clamp(2rem, 7vh, 4.5rem) clamp(1.5rem, 5vw, 5.5rem) 1.75rem;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--theme-text-primary);
    scrollbar-color: var(--theme-border-strong) transparent;
}

.conversation-canvas .welcome-message {
    min-height: 100%;
    height: auto;
    padding: 1.5rem 0 5.5rem;
    animation: none;
}

.conversation-canvas .welcome-avatar {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.125rem;
    border-radius: 0.875rem;
    box-shadow: none;
}

.conversation-canvas .welcome-message h1 {
    margin: 0 0 0.625rem;
    color: var(--theme-text-primary);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.035em;
}

.conversation-canvas .welcome-message p {
    max-width: 32.5rem;
    margin: 0;
    color: var(--theme-text-secondary);
    font-size: 0.925rem;
    line-height: 1.6;
}

.conversation-canvas .message {
    width: 100%;
    max-width: 100%;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    animation: messageSlideIn var(--theme-motion-normal);
}

.conversation-canvas .message-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    box-shadow: none;
}

.conversation-canvas .message-content-wrapper {
    max-width: calc(100% - 2.5rem);
}

.conversation-canvas .message-content {
    padding: 0;
    color: var(--theme-text-primary);
    line-height: 1.65;
}

.conversation-canvas .message.assistant .message-content {
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.conversation-canvas .message.user .message-content {
    padding: 0.625rem 1rem;
    border-radius: 1.125rem;
    background: var(--surface-active);
    color: var(--theme-text-primary);
    box-shadow: none;
}

.conversation-canvas .recent-agent-app-entry {
    width: min(calc(100% - 3rem), var(--conversation-max-width));
    margin: 0 auto 0.5rem;
    border-color: var(--theme-border);
    background: var(--surface-elevated);
    color: var(--theme-text-primary);
    box-shadow: var(--theme-shadow);
}

.composer-region {
    position: relative;
    z-index: 5;
    width: min(100%, calc(var(--conversation-max-width) + 3rem));
    margin: 0 auto;
    padding: 0.5rem 1.5rem max(0.5rem, env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, transparent, var(--surface-canvas) 22%);
}

.conversation-phase-status {
    width: 100%;
    margin: -0.5rem 0 1.25rem 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--theme-text-secondary);
    font-size: 0.75rem;
    line-height: 1.4;
    box-shadow: none;
}

.conversation-phase-status.is-flowing,
.typing-text.is-flowing,
.collaboration-detail.is-flowing,
.agent-dialogue-heading small.is-flowing,
.agent-dialogue-helper.is-flowing,
.secretary-completion-status.is-flowing,
.composer-region .agent-interaction-status.is-flowing .agent-interaction-status-kicker,
.composer-region .agent-interaction-status.is-flowing .agent-interaction-status-copy strong,
.composer-region .agent-interaction-status.is-flowing .agent-interaction-status-copy small {
    background: linear-gradient(100deg, var(--theme-text-secondary) 0%, var(--theme-text-secondary) 38%, var(--theme-text-primary) 50%, var(--theme-text-secondary) 62%, var(--theme-text-secondary) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: status-text-flow 2.2s linear infinite;
}

@keyframes status-text-flow { to { background-position: -220% 0; } }

@media (prefers-reduced-motion: reduce) {
    .conversation-phase-status.is-flowing,
    .typing-text.is-flowing,
    .collaboration-detail.is-flowing,
    .agent-dialogue-heading small.is-flowing,
    .agent-dialogue-helper.is-flowing,
    .secretary-completion-status.is-flowing,
    .composer-region .agent-interaction-status.is-flowing .agent-interaction-status-kicker,
    .composer-region .agent-interaction-status.is-flowing .agent-interaction-status-copy strong,
    .composer-region .agent-interaction-status.is-flowing .agent-interaction-status-copy small { animation: none; }
}

.composer-region .agent-interaction-status {
    border-color: var(--theme-border-strong);
    background: var(--surface-elevated);
    box-shadow: none;
}

.composer-region .agent-interaction-status-copy strong,
.composer-region .agent-interaction-status-copy small,
.composer-region .agent-interaction-status-kicker {
    color: var(--theme-text-primary);
}

.conversation-canvas .composer {
    display: grid;
    grid-template-columns: var(--shell-control-size) minmax(0, 1fr) var(--shell-control-size);
    align-items: end;
    gap: 0.5rem;
    min-height: var(--composer-min-height);
    padding: 0.8125rem 0.875rem;
    border: 1px solid var(--theme-border-strong);
    border-radius: 1.75rem;
    background: var(--surface-elevated);
    box-shadow: var(--theme-shadow);
    transition: border-color var(--theme-motion-fast), box-shadow var(--theme-motion-fast), background-color var(--theme-motion-normal);
}

.conversation-canvas .composer:focus-within {
    border-color: var(--theme-border-strong);
    box-shadow: var(--theme-shadow), 0 0 0 1px var(--theme-focus);
}

.conversation-canvas .composer textarea {
    min-height: var(--shell-control-size);
    max-height: 11.25rem;
    padding: 0.1875rem 0.25rem;
    overflow-y: auto;
    color: var(--theme-text-primary);
    line-height: 1.375rem;
}

.conversation-canvas .composer textarea:focus,
.conversation-canvas .composer textarea:focus-visible {
    outline: 0;
    box-shadow: none;
}

.conversation-canvas .composer textarea::placeholder {
    color: var(--theme-text-tertiary);
}

.conversation-canvas .composer-control {
    display: grid;
    place-items: center;
    width: var(--shell-control-size);
    height: var(--shell-control-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
}

.conversation-canvas .image-upload-btn {
    background: transparent;
    color: var(--theme-text-secondary);
}

.conversation-canvas .image-upload-btn:hover {
    background: var(--surface-hover);
    color: var(--theme-text-primary);
    transform: none;
}

.conversation-canvas .send-btn {
    background: var(--theme-text-primary);
    color: var(--surface-canvas);
}

.conversation-canvas .send-btn:hover {
    box-shadow: none;
    transform: none;
    opacity: 0.88;
}

.conversation-canvas .send-btn:disabled {
    background: var(--surface-hover);
    color: var(--theme-text-tertiary);
}

.conversation-canvas .send-btn.is-stopping {
    background: #d9534f;
    color: #fff;
}

.conversation-canvas .send-btn.is-stopping:hover { opacity: .9; }

/* Selected A: readable two-column discovery, constrained inside the message stream. */
.conversation-canvas .inline-agent-discovery {
    max-width: 57.5rem;
    margin-right: auto;
    margin-left: auto;
}

.inline-agent-discovery .agent-selection-columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    border: 1px solid var(--theme-border);
    border-radius: 0.8125rem;
    overflow: hidden;
}

.inline-agent-discovery .agent-column { padding: 0 0.625rem; }
.inline-agent-discovery .agent-column + .agent-column { border-left: 1px solid var(--theme-border); }
.inline-agent-discovery .agent-execute-footer { position: static; }

@media (max-width: 48rem) {
    .inline-agent-discovery .agent-selection-columns { grid-template-columns: 1fr; }
    .inline-agent-discovery .agent-column + .agent-column { border-top: 1px solid var(--theme-border); border-left: 0; }
}

.composer-region .image-preview-wrapper,
.composer-region .attachment-preview {
    margin: 0 0.375rem 0.5rem;
    padding: 0.5rem;
    border-color: var(--theme-border);
    background: var(--surface-elevated);
    color: var(--theme-text-primary);
}

.composer-disclaimer {
    margin: 0.4375rem 0 0;
    color: var(--theme-text-tertiary);
    font-size: 0.68rem;
    text-align: center;
}

.sidebar-backdrop {
    display: none;
}

.modal-overlay {
    background: var(--surface-overlay);
}

.modal-overlay .modal,
.user-info-modal,
.admin-users-modal,
.admin-logs-modal {
    border-color: var(--theme-border);
    background: var(--surface-elevated);
    color: var(--theme-text-primary);
    box-shadow: var(--theme-shadow);
}

.modal-header {
    border-bottom-color: var(--theme-border);
}

.modal-header h2,
.modal-body,
.form-group label {
    color: var(--theme-text-primary);
}

.form-group input,
.admin-logs-field input,
.admin-logs-field select {
    border-color: var(--theme-border-strong);
    background: var(--surface-canvas);
    color: var(--theme-text-primary);
}

/* Business surfaces share the same semantic palette in both themes. */
.agent-selection-container,
.agent-column,
.agent-item,
.agent-catalog-modal,
.agent-catalog-card,
.agent-catalog-details,
.agent-catalog-web-task-input,
.agent-catalog-task-input,
.admin-users-modal,
.admin-logs-modal,
.admin-users-table-wrap,
.admin-users-table th,
.admin-logs-filters,
.collaboration-run-card,
.collaboration-node,
.collaboration-flow,
.collaboration-dag,
.dag-canvas,
.collaboration-detail-dialog,
.collaboration-trace {
    border-color: var(--theme-border);
    background-color: var(--surface-elevated);
    background-image: none;
    color: var(--theme-text-primary);
    box-shadow: none;
}

.agent-column,
.agent-item,
.agent-catalog-card,
.admin-users-table-wrap,
.admin-users-table th,
.admin-logs-filters,
.collaboration-node,
.collaboration-flow,
.dag-canvas,
.collaboration-trace {
    background-color: var(--surface-canvas);
}

.agent-catalog-hint,
.agent-catalog-web-task,
.agent-catalog-content,
.agent-catalog-detail-heading,
.agent-catalog-task,
.agent-catalog-pagination,
.collaboration-goal,
.collaboration-detail,
.collaboration-flow-head,
.collaboration-flow-edge,
.dag-version-note,
.admin-users-summary,
.admin-logs-field label,
.admin-logs-content-cell {
    color: var(--theme-text-secondary);
}

.agent-catalog-content strong,
.agent-catalog-detail-heading strong,
.collaboration-run-head strong,
.collaboration-node span,
.collaboration-markdown,
.admin-users-table td {
    color: var(--theme-text-primary);
}

.agent-catalog-web-task-input,
.agent-catalog-task-input,
.admin-users-toolbar input,
.admin-logs-field input,
.admin-logs-field select {
    border-color: var(--theme-border-strong);
    background: var(--surface-canvas);
    color: var(--theme-text-primary);
}

.agent-catalog-capabilities span,
.agent-catalog-page-button,
.agent-catalog-select-all,
.dag-live-state,
.dag-version-chip,
.dag-fullscreen-btn {
    border-color: var(--theme-border-strong);
    background: var(--surface-hover);
    color: var(--theme-text-secondary);
}

.dag-node rect {
    fill: var(--surface-elevated);
    stroke: var(--theme-border-strong);
}

.dag-node text,
.dag-node .dag-node-state,
.dag-edge-label {
    fill: var(--theme-text-primary);
}

.dag-edge {
    stroke: var(--theme-border-strong);
}

.collaboration-subtask-results {
    display: grid;
    gap: 0.625rem;
    margin-top: 0.75rem;
}

.collaboration-subtask-result {
    padding-top: 0.625rem;
    border-top: 1px solid var(--theme-border);
}

.collaboration-subtask-result > strong {
    color: var(--theme-text-primary);
    font-size: 0.78rem;
}

/* Discovery is part of the conversation, not a separate dashboard. */
.conversation-canvas .inline-agent-discovery {
    width: 100%;
    margin: 0.25rem 0 1.75rem;
    padding: 1.125rem 1.25rem 0.875rem;
    border: 1px solid var(--theme-border);
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--surface-elevated) 92%, var(--surface-canvas));
    box-shadow: none;
    backdrop-filter: none;
}

.inline-agent-discovery .agent-selection-header {
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.875rem;
    font-size: inherit;
}

.agent-selection-heading {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.625rem;
}

.agent-selection-heading > div { display: grid; gap: 0.125rem; }
.agent-selection-heading strong { font-size: 0.96rem; font-weight: 600; }
.agent-selection-kicker { color: var(--theme-text-tertiary); font-size: 0.68rem; letter-spacing: .06em; }
.agent-selection-icon {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5625rem;
    background: var(--surface-active);
    color: var(--theme-accent);
    font-size: 0.9rem;
}
.agent-selection-total,
.inline-agent-discovery .column-count {
    flex: none;
    padding: 0.1875rem 0.5rem;
    border: 1px solid var(--theme-border);
    border-radius: 62.438rem;
    background: transparent;
    color: var(--theme-text-tertiary);
    font-size: 0.68rem;
    font-weight: 550;
}

.inline-agent-discovery .agent-selection-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
}

.inline-agent-discovery .agent-column {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.inline-agent-discovery .agent-column + .agent-column {
    border-left: 1px solid var(--theme-border);
    padding-left: 0.75rem;
}

.inline-agent-discovery .agent-column-header {
    margin: 0 0 0.375rem;
    padding: 0 0.125rem 0.4375rem;
    border-bottom: 1px solid var(--theme-border);
}

.inline-agent-discovery .column-title {
    color: var(--theme-text-secondary);
    font-size: 0.74rem;
    font-weight: 600;
}

.inline-agent-discovery .agent-list {
    display: grid;
    gap: 0;
    max-height: none;
    min-height: 0;
    overflow: visible;
}

.inline-agent-discovery .agent-item {
    min-width: 0;
    padding: 0.75rem 0.5rem;
    border: 0;
    border-bottom: 1px solid var(--theme-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.inline-agent-discovery .agent-item:hover {
    border-color: var(--theme-border);
    background: var(--surface-hover);
    box-shadow: none;
    transform: none;
}

.inline-agent-discovery .agent-info { min-width: 0; flex: 1; }
.inline-agent-discovery .agent-name { font-size: 0.9rem; font-weight: 600; }
.inline-agent-discovery .agent-description {
    margin-top: 0.1875rem;
    color: var(--theme-text-secondary);
    font-size: 0.78rem;
    line-height: 1.45;
}

.inline-agent-discovery .agent-checkbox-wrapper { padding-top: 0.1875rem; }
.inline-agent-discovery .agent-checkbox { accent-color: var(--theme-accent); }
.inline-agent-discovery .agent-scope-badge { margin-left: 0.4375rem; }
.inline-agent-discovery .agent-task-editor { margin-top: 0.5625rem; }
.inline-agent-discovery .agent-task-editor .task-label { color: var(--theme-text-tertiary); }
.inline-agent-discovery .agent-assigned-task-input {
    min-height: 2.875rem;
    padding: 0.5rem 0.625rem;
    border-color: var(--theme-border);
    border-radius: 0.625rem;
    background: var(--surface-canvas);
    color: var(--theme-text-primary);
    font-size: 0.8rem;
}

.inline-agent-discovery .agent-execute-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    margin: 0 -1.25rem -0.875rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--theme-border);
    background: color-mix(in srgb, var(--surface-elevated) 94%, transparent);
    backdrop-filter: blur(0.625rem);
}

.inline-agent-discovery .btn-execute-agents {
    min-height: 2.125rem;
    padding: 0.4375rem 0.8125rem;
    border: 0;
    border-radius: 0.625rem;
    background: var(--theme-accent);
    color: var(--theme-accent-contrast);
    font-size: 0.8rem;
    box-shadow: none;
}

.inline-agent-discovery .btn-view-more-agents,
.inline-agent-discovery .btn-open-agent {
    color: var(--theme-text-secondary);
    font-size: 0.76rem;
}

@media (max-width: 48rem) {
    .conversation-phase-status { margin-left: 2.5rem; }
    .conversation-canvas .inline-agent-discovery { padding: 0.9375rem 1rem 0.75rem; border-radius: 1rem; }
    .inline-agent-discovery .agent-selection-columns { grid-template-columns: 1fr; }
    .inline-agent-discovery .agent-column + .agent-column { border-top: 1px solid var(--theme-border); border-left: 0; padding-left: 0; }
    .inline-agent-discovery .agent-execute-footer { margin: 0 -1rem -0.75rem; padding: 0.625rem 1rem; }
}

@media (max-width: 48rem) {
    .chat-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .conversation-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(var(--sidebar-width), calc(100vw - 3rem));
        overflow: hidden;
        transform: translateX(-100%);
        box-shadow: var(--theme-shadow);
    }

    .sidebar-account-theme-picker .theme-menu {
        position: static;
        width: auto;
        margin: 0.125rem 0 0;
        box-shadow: none;
    }

    .chat-shell.sidebar-open .conversation-sidebar {
        transform: translateX(0);
    }

    .sidebar-toggle {
        display: grid;
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 35;
        border: 0;
        background: var(--surface-overlay);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--theme-motion-normal);
    }

    .chat-shell.sidebar-open .sidebar-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    .conversation-header {
        padding-inline: 0.625rem;
    }

    .conversation-title span,
    .health-monitor-summary span:last-child,
    .header-right .user-name {
        display: none;
    }

    .conversation-actions {
        gap: 0.25rem;
    }

    .header-right .btn-secondary:not(#loginBtn),
    .header-right .btn-text {
        display: none;
    }

    .conversation-canvas .messages-container {
        padding: 1.75rem 1rem 1.25rem;
    }

    .composer-region {
        padding: 0.375rem 0.625rem max(0.5rem, env(safe-area-inset-bottom));
    }

    .conversation-canvas .composer {
        padding: 0.6875rem 0.75rem;
    }

    .composer-disclaimer {
        font-size: 0.625rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .conversation-sidebar,
    .sidebar-backdrop,
    .chat-shell *,
    .chat-shell *::before,
    .chat-shell *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Agent discovery A: strict soft hierarchy. */
.agent-selection-container.inline-agent-discovery {
    width: 100%;
    margin: 0.25rem 0 1.75rem;
    padding: 1rem 0 0.75rem;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.inline-agent-discovery .agent-selection-header {
    padding: 0 0.5rem;
}

.inline-agent-discovery .agent-selection-total,
.inline-agent-discovery .column-count {
    border: 0 !important;
    background: color-mix(in srgb, var(--surface-elevated) 72%, transparent);
}

.inline-agent-discovery .agent-selection-columns {
    gap: 0.875rem;
    padding: 0.75rem;
    border: 0 !important;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface-elevated) 54%, transparent);
}

.inline-agent-discovery .agent-column,
.inline-agent-discovery .agent-column + .agent-column {
    padding: 0.25rem;
    border: 0 !important;
}

.inline-agent-discovery .agent-column-header {
    margin: 0 0 0.375rem;
    padding: 0.125rem 0.375rem 0.5rem;
    border: 0 !important;
}

.inline-agent-discovery .agent-list {
    gap: 0.25rem;
}

.inline-agent-discovery .agent-item {
    padding: 0.75rem 0.625rem;
    border: 0 !important;
    border-radius: 0.75rem;
    background: transparent;
}

.inline-agent-discovery .agent-item:hover {
    background: color-mix(in srgb, var(--surface-hover) 82%, transparent);
}

.inline-agent-discovery .agent-item:has(.agent-checkbox:checked) {
    background: color-mix(in srgb, var(--accent-primary) 9%, var(--surface-elevated));
}

.inline-agent-discovery .agent-assigned-task-input {
    border: 0 !important;
    background: color-mix(in srgb, var(--surface-canvas) 82%, var(--surface-elevated));
    box-shadow: none;
}

.inline-agent-discovery .agent-assigned-task-input:focus {
    outline: 0;
    box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--accent-primary) 14%, transparent);
}

.inline-agent-discovery .agent-execute-footer {
    position: static;
    margin: 0.75rem 0 0;
    padding: 0.25rem 0.5rem 0;
    border: 0 !important;
    background: transparent;
    backdrop-filter: none;
}

.inline-agent-discovery .btn-view-more-agents {
    margin: 0;
    border: 0 !important;
    background: color-mix(in srgb, var(--surface-elevated) 70%, transparent);
}

@media (max-width: 48rem) {
    .agent-selection-container.inline-agent-discovery {
        padding: 0.875rem 0 0.625rem;
    }

    .inline-agent-discovery .agent-selection-columns {
        padding: 0.625rem;
    }

    .inline-agent-discovery .agent-column + .agent-column {
        border: 0 !important;
    }
}

/* Dingdang color system A: ink jade. */
:root,
html[data-theme="dark"] {
    color-scheme: dark;
    --surface-canvas: #0b0c0d;
    --surface-sidebar: #121314;
    --surface-elevated: #1a1b1c;
    --surface-hover: #242627;
    --surface-active: #2c2e2f;
    --surface-overlay: rgba(5, 6, 7, 0.58);
    --theme-text-primary: #f2f1ed;
    --theme-text-secondary: #b1b2ac;
    --theme-text-tertiary: #7d7f79;
    --theme-border: rgba(255, 255, 255, 0.08);
    --theme-border-strong: rgba(255, 255, 255, 0.14);
    --theme-focus: #87bfb5;
    --theme-accent: #55b8aa;
    --theme-accent-contrast: #08100f;
    --theme-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.28);
    --glass-bg: color-mix(in srgb, var(--surface-elevated) 92%, transparent);
    --glass-border: var(--theme-border);
    --glass-shadow: rgba(0, 0, 0, 0.26);
    --glass-glow: rgba(85, 184, 170, 0.06);
    --accent-blue: var(--theme-accent);
    --accent-purple: var(--theme-accent);
    --accent-pink: var(--color-error);
    --accent-orange: var(--color-warning);
    --accent-green: var(--color-success);
    --accent-red: var(--color-error);
    --color-success: #3c9a68;
    --color-warning: #bb8542;
    --color-error: #c75f59;
    --color-info: var(--theme-accent);
    --neon-glow-sm: 0 0.25rem 0.875rem rgba(85, 184, 170, 0.12);
    --neon-glow-md: 0 0.75rem 1.75rem rgba(85, 184, 170, 0.14);
    --neon-glow-lg: 0 1rem 2.5rem rgba(85, 184, 170, 0.16);
}

html[data-theme="light"] {
    color-scheme: light;
    --surface-canvas: #f5f2eb;
    --surface-sidebar: #eeece5;
    --surface-elevated: #fcfbf7;
    --surface-hover: #f0eee8;
    --surface-active: #e7e4dc;
    --surface-overlay: rgba(45, 43, 38, 0.22);
    --theme-text-primary: #23241f;
    --theme-text-secondary: #66675f;
    --theme-text-tertiary: #8c8d85;
    --theme-border: rgba(47, 45, 39, 0.10);
    --theme-border-strong: rgba(47, 45, 39, 0.17);
    --theme-focus: #337e75;
    --theme-accent: #197568;
    --theme-accent-contrast: #ffffff;
    --theme-shadow: 0 1rem 2.5rem rgba(67, 58, 40, 0.12);
    --glass-bg: color-mix(in srgb, var(--surface-elevated) 94%, transparent);
    --glass-border: var(--theme-border);
    --glass-shadow: rgba(67, 58, 40, 0.10);
    --glass-glow: rgba(25, 117, 104, 0.05);
    --accent-blue: var(--theme-accent);
    --accent-purple: var(--theme-accent);
    --accent-pink: var(--color-error);
    --accent-orange: var(--color-warning);
    --accent-green: var(--color-success);
    --accent-red: var(--color-error);
    --color-success: #3c9a68;
    --color-warning: #a77232;
    --color-error: #b9524c;
    --color-info: var(--theme-accent);
    --neon-glow-sm: 0 0.2rem 0.7rem rgba(25, 117, 104, 0.10);
    --neon-glow-md: 0 0.5rem 1.25rem rgba(25, 117, 104, 0.12);
    --neon-glow-lg: 0 0.75rem 2rem rgba(25, 117, 104, 0.14);
}

@media (prefers-color-scheme: light) {
    html[data-theme="system"] {
        color-scheme: light;
        --surface-canvas: #f5f2eb;
        --surface-sidebar: #eeece5;
        --surface-elevated: #fcfbf7;
        --surface-hover: #f0eee8;
        --surface-active: #e7e4dc;
        --surface-overlay: rgba(45, 43, 38, 0.22);
        --theme-text-primary: #23241f;
        --theme-text-secondary: #66675f;
        --theme-text-tertiary: #8c8d85;
        --theme-border: rgba(47, 45, 39, 0.10);
        --theme-border-strong: rgba(47, 45, 39, 0.17);
        --theme-focus: #337e75;
        --theme-accent: #197568;
        --theme-accent-contrast: #ffffff;
        --theme-shadow: 0 1rem 2.5rem rgba(67, 58, 40, 0.12);
        --color-success: #3c9a68;
        --color-warning: #a77232;
        --color-error: #b9524c;
    }
}

/* Primary actions have one brand color; gradients belong to neither theme. */
.btn-primary,
.btn-execute-agents,
.btn-invoke-agent,
.btn-open-agent,
.agent-catalog-actions .btn-primary,
.category-tag.active {
    background: var(--theme-accent) !important;
    color: var(--theme-accent-contrast) !important;
    box-shadow: none !important;
}

/* Cloud is a capability source, not a second brand color. */
.agent-scope-badge,
.agent-scope-badge.cloud,
.agent-scope-badge.local,
.agent-catalog-capabilities span,
.dag-version-chip,
.collaboration-flow-head span {
    border-color: color-mix(in srgb, var(--theme-accent) 34%, var(--theme-border)) !important;
    background: color-mix(in srgb, var(--theme-accent) 10%, var(--surface-hover)) !important;
    color: var(--theme-accent) !important;
}

/* Discovery catalog, dialogs, and collaboration inherit the calm neutral surfaces. */
.agent-catalog-modal,
.agent-catalog-card,
.agent-catalog-details,
.agent-catalog-web-task-input,
.agent-catalog-task-input,
.collaboration-node,
.collaboration-flow,
.dag-canvas,
.collaboration-detail-dialog,
.collaboration-trace {
    border-color: var(--theme-border) !important;
    background-image: none !important;
    background-color: var(--surface-elevated) !important;
    box-shadow: none !important;
    color: var(--theme-text-primary) !important;
}

.agent-catalog-card:hover,
.agent-catalog-card.is-active,
.agent-catalog-card:has(input:checked),
.collaboration-node.running,
.collaboration-node.secretary.running,
.dag-node.running rect {
    border-color: color-mix(in srgb, var(--theme-accent) 55%, var(--theme-border)) !important;
    background: color-mix(in srgb, var(--theme-accent) 11%, var(--surface-elevated)) !important;
    box-shadow: none !important;
}

.agent-catalog-checkbox,
.agent-checkbox { accent-color: var(--theme-accent); }
.agent-catalog-modal .modal-close,
.agent-catalog-page-button,
.agent-catalog-select-all { border-color: var(--theme-border) !important; color: var(--theme-text-secondary) !important; background: var(--surface-hover) !important; }
.agent-catalog-modal .modal-close:hover,
.agent-catalog-page-button:hover:not(:disabled),
.agent-catalog-select-all:hover { color: var(--theme-text-primary) !important; background: var(--surface-active) !important; }

.collaboration-kicker,
.collaboration-flow-head strong,
.dag-live-state.is-live,
.dag-node.running .dag-node-state,
.dag-edge-active { color: var(--theme-accent) !important; stroke: var(--theme-accent); filter: none; }
.dag-live-state.is-live::before { background: var(--theme-accent); box-shadow: none; }
.collaboration-node.completed,
.dag-node.completed rect { border-color: color-mix(in srgb, var(--color-success) 45%, var(--theme-border)) !important; background: color-mix(in srgb, var(--color-success) 8%, var(--surface-elevated)) !important; }

.message-resource-file-icon-archive,
.message-resource-file-icon-audio { --message-resource-file-accent: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 12%, var(--surface-hover)); }

/* Discovery placement follows the assistant message grid. */
.conversation-canvas .agent-selection-container.inline-agent-discovery {
    --assistant-content-offset: calc(1.75rem + 0.75rem);
    width: calc(100% - var(--assistant-content-offset));
    margin-right: 0;
    margin-left: var(--assistant-content-offset);
}

/* Sidebar refinement: compact, calm, and native to the chat surface. */
.conversation-sidebar {
    gap: 0.5rem;
    padding: 0.625rem 0.5rem;
    background: var(--surface-sidebar);
    border-right-color: var(--theme-border);
}

.sidebar-brand {
    min-height: 2.25rem;
    padding: 0.1875rem 0.5rem;
    font-size: 0.88rem;
    font-weight: 620;
}

.sidebar-brand .dingdang-avatar {
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 0.5625rem;
}

.new-conversation-button,
.sidebar-nav-button {
    min-height: 2.25rem;
    gap: 0.5625rem;
    padding: 0.4375rem 0.625rem;
    border-radius: 0.7rem;
    color: var(--theme-text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
}

.new-conversation-button:hover,
.sidebar-nav-button:hover,
.new-conversation-button:focus-visible,
.sidebar-nav-button:focus-visible {
    color: var(--theme-text-primary);
    background: var(--surface-hover);
}

.sidebar-nav {
    padding-bottom: 0.375rem;
    border-bottom-color: var(--theme-border);
}

.recent-conversations-section {
    padding: 0.375rem 0.125rem;
}

.recent-conversations-section h2 {
    margin: 0 0.5rem 0.4375rem;
    color: var(--theme-text-tertiary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.recent-conversations-list { gap: 0.0625rem; }

.recent-conversation-entry {
    border-radius: 0.7rem;
    color: var(--theme-text-secondary);
}

.recent-conversation-entry:hover,
.recent-conversation-entry.is-active,
.recent-conversation-entry.is-confirming-delete {
    color: var(--theme-text-primary);
    background: var(--surface-hover);
}

.recent-conversation-item {
    min-height: 2.5rem;
    padding: 0.5rem 2.5rem 0.5rem 0.625rem;
    font-size: 0.82rem;
    line-height: 1.3;
}

.conversation-status-indicator {
    width: 0.375rem;
    height: 0.375rem;
    margin-left: 0.375rem;
}

.conversation-status-indicator.is-attention {
    background: var(--theme-accent);
    box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--theme-accent) 13%, transparent);
}

.recent-conversation-delete-button {
    right: 0.375rem;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 0.5625rem;
}

.sidebar-account-area {
    padding: 0.4375rem 0.25rem 0;
    border-top-color: var(--theme-border);
}

.sidebar-account-trigger {
    grid-template-columns: 1.8rem minmax(0, 1fr) 0.875rem;
    min-height: 2.5rem;
    gap: 0.5rem;
    padding: 0.375rem;
    border-radius: 0.75rem;
}

.sidebar-account-avatar {
    width: 1.8rem;
    height: 1.8rem;
    font-size: 0.72rem;
}

.sidebar-account-copy strong { font-size: 0.78rem; }
.sidebar-account-copy small { font-size: 0.64rem; }

.sidebar-account-menu {
    right: 0.25rem;
    left: 0.25rem;
    border-color: var(--theme-border);
    border-radius: 0.875rem;
    background: var(--surface-elevated);
    box-shadow: var(--theme-shadow);
}

/* Sidebar shares the chat canvas. */
.conversation-sidebar {
    background: var(--surface-canvas);
    border-right-color: var(--theme-border);
}

/* Directional responsive layout */
:root {
    --responsive-inset: clamp(0.75rem, 2.2vw, 2rem);
    --responsive-gap: clamp(0.625rem, 1.4vw, 1.25rem);
    --responsive-copy: clamp(0.8125rem, 0.75rem + 0.24vw, 1rem);
    --viewport-safe-block: calc(100dvh - var(--responsive-inset) * 2);
}

html,
body,
.chat-shell,
.conversation-canvas,
.tab-view,
.messages-container,
.modal,
.agent-catalog-body,
.agent-catalog-results,
.agent-catalog-list,
.agent-catalog-details {
    min-inline-size: 0;
}

.modal-overlay { padding: var(--responsive-inset); }

.modal {
    max-inline-size: min(96dvw, 48rem);
    max-block-size: var(--viewport-safe-block);
}

.conversation-canvas :is(.message, .markdown-content, .agent-result-card, .collaboration-card, .message-resource, pre, table) {
    min-inline-size: 0;
    max-inline-size: 100%;
}

.conversation-canvas :is(.markdown-content, .agent-description, .agent-catalog-content, .agent-catalog-detail-heading, .agent-catalog-card, .agent-catalog-details) {
    overflow-wrap: anywhere;
}

.agent-catalog-overlay { padding: var(--responsive-inset); }

.agent-catalog-modal {
    inline-size: min(96dvw, 74rem);
    block-size: var(--viewport-safe-block);
    max-block-size: var(--viewport-safe-block);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
}

.agent-catalog-modal:has(.agent-catalog-web-task) {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.agent-catalog-modal .modal-header,
.agent-catalog-hint,
.agent-catalog-body,
.agent-catalog-actions { min-inline-size: 0; }

.agent-catalog-hint {
    margin: 0;
    padding: 0 var(--responsive-inset) var(--responsive-gap);
    font-size: var(--responsive-copy);
}

.agent-catalog-web-task { margin-inline: var(--responsive-inset); }

.agent-catalog-body {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 0.8fr);
    gap: var(--responsive-gap);
    overflow: hidden;
    padding: 0 var(--responsive-inset);
}

.agent-catalog-results,
.agent-catalog-list,
.agent-catalog-details { min-block-size: 0; }

.agent-catalog-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--responsive-gap);
    padding-block: var(--responsive-gap);
    overflow: auto;
    overscroll-behavior: contain;
}

.agent-catalog-card {
    min-block-size: 0;
    padding: clamp(0.75rem, 1.5vw, 1rem) clamp(0.6875rem, 1.35vw, 0.875rem) clamp(0.6875rem, 1.2vw, 0.875rem) clamp(2.25rem, 3.4vw, 2.75rem);
}

.agent-catalog-details {
    padding: var(--responsive-gap);
    overflow: auto;
    overscroll-behavior: contain;
}

.agent-catalog-actions {
    gap: var(--responsive-gap);
    padding: var(--responsive-gap) var(--responsive-inset) var(--responsive-inset);
}

.agent-catalog-actions :is(button, .btn-execute-agents) {
    min-inline-size: 0;
    min-block-size: clamp(2.5rem, 5.5dvh, 3.1rem);
}

.conversation-canvas .inline-agent-discovery {
    inline-size: min(100%, var(--conversation-max-width));
    margin-inline: 0;
}

@media (orientation: portrait) {
    .chat-shell { grid-template-columns: minmax(0, 1fr); }

    .conversation-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        inline-size: min(82dvw, 22rem);
        max-inline-size: calc(100dvw - var(--responsive-inset) * 2);
        overflow: hidden;
        transform: translateX(-100%);
        box-shadow: var(--theme-shadow);
    }

    .chat-shell.sidebar-open .conversation-sidebar { transform: translateX(0); }
    .sidebar-toggle { display: grid; }

    .conversation-canvas .messages-container {
        padding-inline: var(--responsive-inset);
        padding-block: clamp(1rem, 4dvh, 2.5rem);
    }

    .composer-region {
        padding: var(--responsive-gap) var(--responsive-inset) max(var(--responsive-inset), env(safe-area-inset-bottom));
    }

    .conversation-canvas .composer {
        inline-size: min(100%, 54rem);
        padding: clamp(0.625rem, 1.2vw, 0.875rem) clamp(0.75rem, 1.4vw, 1rem);
    }

    .agent-catalog-modal {
        inline-size: min(100%, 60rem);
        block-size: var(--viewport-safe-block);
    }

    .agent-catalog-body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
        overflow: auto;
    }

    .agent-catalog-results { overflow: visible; }

    .agent-catalog-list {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 24em), 1fr));
        overflow: visible;
    }

    .agent-catalog-details {
        border-inline-start: 0;
        border-block-start: 1px solid var(--theme-border);
        border-radius: 0;
        overflow: visible;
    }

    .agent-catalog-actions { justify-content: stretch; }

    .agent-catalog-actions :is(button, .btn-execute-agents) { flex: 1 1 18em; }
    .agent-catalog-actions .btn-execute-agents { flex-basis: 100%; }

    .inline-agent-discovery .agent-selection-columns { grid-template-columns: minmax(0, 1fr); }

    .inline-agent-discovery .agent-column + .agent-column {
        border-inline-start: 0;
        border-block-start: 1px solid var(--theme-border);
        padding-inline-start: 0;
    }
}

/* Catalog layout v4: preserve the native landscape layout and make portrait flow sequentially. */
@media (orientation: landscape) and (min-width: 56.3125rem) {
    .agent-catalog-modal {
        width: min(73.75rem, 96vw);
        height: min(47.5rem, 86vh);
        max-width: none;
        max-height: none;
        display: flex;
        flex-direction: column;
    }

    .agent-catalog-hint { margin: 0 1.25rem 0.75rem; padding: 0; }
    .agent-catalog-web-task { margin: 0 1.25rem 0.75rem; }

    .agent-catalog-body {
        display: grid;
        grid-template-columns: minmax(0, 1.8fr) minmax(16.25rem, .8fr);
        grid-template-rows: none;
        gap: 0;
        min-height: 0;
        flex: 1 1 auto;
        overflow: hidden;
        padding: 0 1.25rem;
    }

    .agent-catalog-results {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding-right: 0.875rem;
    }

    .agent-catalog-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.625rem;
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 0.125rem 0 0.5rem;
    }

    .agent-catalog-card {
        min-height: 7.25rem;
        padding: 0.9375rem 0.8125rem 0.75rem 2.4375rem;
    }

    .agent-catalog-details {
        overflow-y: auto;
        padding: 0.875rem;
    }

    .agent-catalog-actions {
        gap: 0.625rem;
        padding: 1rem 1.25rem 1.25rem;
    }
}

@media (orientation: landscape) and (max-width: 56.25rem) {
    .agent-catalog-modal {
        height: min(51.25rem, 92vh);
        display: flex;
        flex-direction: column;
    }

    .agent-catalog-body {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 0.75rem;
        overflow-y: auto;
        padding: 0 1.25rem;
    }

    .agent-catalog-results { padding-right: 0; }
    .agent-catalog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
    .agent-catalog-details { min-height: 9.375rem; overflow: visible; }
}

@media (orientation: portrait) {
    .agent-catalog-modal {
        display: flex;
        flex-direction: column;
        inline-size: min(100%, 60rem);
        block-size: var(--viewport-safe-block);
        max-block-size: var(--viewport-safe-block);
    }

    .agent-catalog-body {
        display: block;
        flex: 1 1 auto;
        min-block-size: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .agent-catalog-results {
        display: block;
        overflow: visible;
        padding-inline-end: 0;
    }

    .agent-catalog-list {
        grid-template-columns: minmax(0, 1fr);
        overflow: visible;
        padding-block: var(--responsive-gap);
    }

    .agent-catalog-details {
        min-block-size: 0;
        margin-block-end: var(--responsive-gap);
        overflow: visible;
    }

    .agent-catalog-pagination { padding-block: var(--responsive-gap); }

    .agent-catalog-actions {
        flex-wrap: wrap;
        justify-content: stretch;
    }

    .agent-catalog-actions :is(button, .btn-execute-agents),
    .agent-catalog-actions .btn-execute-agents {
        flex: 1 1 100%;
    }
}

/* Wide management dialogs */
.modal-overlay:has(.admin-users-modal),
.modal-overlay:has(.admin-logs-modal) {
    align-items: center;
}

.admin-users-modal,
.admin-logs-modal {
    inline-size: 86dvw;
    max-inline-size: 86dvw;
    max-block-size: var(--viewport-safe-block);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.admin-users-modal > .modal-body,
.admin-logs-modal > .modal-body {
    min-block-size: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.admin-users-table-wrap {
    max-block-size: min(58dvh, calc(var(--viewport-safe-block) - 16dvh));
}

@media (orientation: portrait) {
    .admin-users-modal,
    .admin-logs-modal {
        inline-size: 94dvw;
        max-inline-size: 94dvw;
    }

    .admin-users-table-wrap {
        max-block-size: min(52dvh, calc(var(--viewport-safe-block) - 20dvh));
    }
}
/* Stack discovery columns by available card width, including a narrow split pane. */
.inline-agent-discovery { container-type: inline-size; }
.inline-agent-discovery .agent-selection-heading { min-width: 0; }
.inline-agent-discovery .agent-selection-heading strong { overflow-wrap: anywhere; }
.inline-agent-discovery .agent-selection-total { flex-shrink: 0; }
.inline-agent-discovery .agent-selection-columns:has(> .agent-column:only-child) {
    grid-template-columns: minmax(0, 1fr);
}
@container (max-width: 42rem) {
    .inline-agent-discovery .agent-selection-columns {
        grid-template-columns: minmax(0, 1fr);
    }
    .inline-agent-discovery .agent-column { min-width: 0; max-width: 100%; }
    .inline-agent-discovery .agent-column + .agent-column {
        border-inline-start: 0;
        padding-inline-start: 0;
    }
}