/* AgentHub — shared visual system. Layout behavior remains in styles.css.
   All components use the same surfaces, typography, radii and Outline icons. */
:root {
  --bg:#f5f5f8; --surface:#ffffff; --surface-alt:#fafafd; --surface-hover:#f0f0f6;
  --ink:#252534; --muted:#686879; --subtle:#818191; --border:#e5e5ed;
  --accent:#7160ce; --accent-hover:#6050bb; --accent-soft:#f0edfc; --accent-line:#ddd6f6;
  --positive:#267760; --positive-soft:#eaf5ef; --orange:#9b6723; --orange-soft:#fcf3e5;
  --blue:#476dab; --blue-soft:#edf2fb; --rose:#b34d6e; --rose-soft:#fbeef2;
  --sidebar-bg:#191922; --sidebar-text:#b8b8ca; --sidebar-muted:#8f8fa4;
  --hero-bg:#f0edfa; --hero-line:#e2dcf3; --hero-ink:#323044;
  --shadow:0 1px 2px #23233704; --shadow-lg:0 12px 36px #2323370c;
  --r:14px; --header:60px; --work-gutter:18px; --pane-gap:14px; --page-inset:28px;
  --font:"Segoe UI Variable Text",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
:root[data-theme="dark"] {
  --bg:#121217; --surface:#1b1b23; --surface-alt:#202029; --surface-hover:#282832;
  --ink:#ededf4; --muted:#aaaabd; --subtle:#9292a7; --border:#30303d;
  --accent:#b2a4f7; --accent-hover:#c2b6ff; --accent-soft:#302a44; --accent-line:#4c405f;
  --positive:#89cdb0; --positive-soft:#21372f; --orange:#e0b879; --orange-soft:#3b3023;
  --blue:#9bb8e6; --blue-soft:#273248; --rose:#e3a1b6; --rose-soft:#3c2933;
  --sidebar-bg:#15151c; --sidebar-text:#b8b8ca; --sidebar-muted:#9696ab;
  --hero-bg:#292335; --hero-line:#44364f; --hero-ink:#eee8f8;
  --shadow:0 1px 2px #0000000a; --shadow-lg:0 16px 48px #00000035;
}
body { letter-spacing:0; }
.app-icon { stroke-width:1.75; flex-shrink:0; vertical-align:middle; }
.nav-item .app-icon,.avatar .app-icon,.brand-mark .app-icon,.orbit-center .app-icon { stroke-width:1.75; }
.btn,.input,.select,.icon-btn { border-radius:9px; }
.btn { font-size:12px; font-weight:600; min-height:38px; gap:8px; }
.btn.primary { box-shadow:0 1px 2px #30234d12; }
.icon-btn { width:36px; height:36px; }
.btn:focus-visible,.icon-btn:focus-visible,.prompt-card:focus-visible,.project-card:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.input,.select { background:var(--surface); font-size:13px; }
.tag { border-radius:6px; font-size:10.5px; padding:3px 8px; }
.avatar { border:1px solid color-mix(in srgb,currentColor 12%,transparent); }
:root[data-theme] .avatar:is(.green,.violet,.blue,.orange,.rose,.slate) {
  background:var(--surface-hover); color:var(--muted);
}
:root[data-theme] .agent-item.selected .avatar,.project-dash-title .avatar { background:var(--accent-soft); color:var(--accent); }
.panel { box-shadow:var(--shadow); }
.sidebar { border-right:1px solid #ffffff08; }
.nav-edge-toggle { display:none; position:fixed; z-index:45; top:26px; left:calc(var(--sidebar) - 14px); width:28px; height:28px; padding:0; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:50%; color:var(--muted); background:var(--surface); box-shadow:0 2px 8px #15152412; transition:left .18s ease,background .16s,border-color .16s,color .16s; }
.nav-edge-toggle::after { content:""; position:absolute; inset:-6px; border-radius:50%; }
.nav-edge-toggle .app-icon { width:15px; height:15px; transition:transform .18s ease; }
.nav-edge-toggle:hover { color:var(--accent); border-color:var(--accent-line); background:var(--surface-alt); }
.nav-edge-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
:root[data-nav="expanded"] .nav-edge-toggle,:root[data-nav="compact"] .nav-edge-toggle { display:flex; }
:root[data-nav="expanded"] .nav-edge-toggle .app-icon { transform:rotate(180deg); }
.topbar .nav-toggle { display:none; }
:root[data-nav="drawer"] .topbar .nav-toggle { display:inline-flex; }
.brand { height:78px; padding:0 8px; gap:10px; }
.brand-mark { width:33px; height:33px; border-radius:10px; background:#8370d9; box-shadow:inset 0 1px 0 #ffffff26; }
.brand-word { font-size:22px; letter-spacing:-.8px; }
.brand-dot { color:#b7a7f7; }
.brand-version { font-size:7px; letter-spacing:.7px; border:0; padding:0; margin-left:auto; color:#9f99b6; }
.workspace-switch { padding:11px 9px; margin-bottom:16px; background:#ffffff03; border-color:#ffffff10; border-radius:10px; }
.workspace-switch strong { font-size:12px; }
.workspace-switch small { font-size:10px; }
.workspace-symbol { background:#ffffff06; color:#b8abd9; border-color:#ffffff0b; }
.sidebar-search { border:1px solid #ffffff0a; min-height:36px; margin-bottom:22px; color:#a9a9bd; }
.nav-label { font-size:9px; letter-spacing:1.3px; color:#9292a7; }
.nav-item { border-radius:8px; min-height:41px; margin-bottom:3px; font-size:12px; gap:11px; }
.nav-item .app-icon { width:18px; height:18px; color:#9999b0; }
.nav-item.active { background:#a28add16; color:#e1d8ff; }
.nav-item.active .app-icon { color:#c1afff; }
.nav-item.active:before { display:none; }
.sidebar-bottom { padding-top:12px; }
.sidebar-usage { background:#ffffff03; border-color:#ffffff0b; border-radius:10px; }
.sidebar-usage small { color:#a5a5bb; line-height:1.6; }
.sidebar-sample { color:#aaa5bc; }
.topbar { background:var(--surface); padding-inline:24px; gap:12px; }
@media(min-width:761px) {
  :root:not([data-view="workspace"]) .topbar { padding-left:max(var(--page-inset),calc((100% - 1600px) / 2 + var(--page-inset))); }
}
.top-actions { gap:8px; }
.breadcrumbs { font-size:12px; gap:10px; }
.global-search { min-width:190px; background:var(--surface-alt); border-color:var(--border); border-radius:8px; }
.global-search .kbd { margin-left:auto; }
.top-avatar { border-radius:9px; color:var(--muted); background:var(--surface-alt); border:1px solid var(--border); }
.top-avatar .app-icon { width:17px; height:17px; }
.page { padding:26px 28px 32px; max-width:1600px; }
.page-heading { margin-bottom:24px; min-height:40px; }
.page-heading h1 { font-size:25px; font-weight:650; letter-spacing:-.7px; }
.heading-actions { gap:8px; }
.section-heading h2 { font-size:17px; }
.stat-card { padding:20px; }
.stat-value { font-size:30px; font-weight:600; margin:10px 0 7px; }
.stat-icon { border-radius:8px; color:var(--muted); }
.stat-meta { font-size:11px; }
.model-usage-list { padding-top:22px; }
.model-usage-row { margin-bottom:22px; font-size:12px; color:var(--muted); }
.model-usage-row strong { font-weight:550; color:var(--ink); }
.model-usage-list .empty-state { min-height:220px; }
.chart-bar { min-height:0; }
.dashboard-hero { border-radius:16px; background:linear-gradient(115deg,var(--surface),var(--hero-bg)); }
.hero-copy { padding:32px; }
.hero-copy h1 { font-size:34px; letter-spacing:-1px; }
.hero-copy p { font-size:13px; }
.hero-art { opacity:.75; }
.quick-agent,.agent-card,.provider-card,.folder-card { border-radius:14px; box-shadow:var(--shadow); }
.quick-agent:hover,.agent-card:hover,.folder-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.quick-agent h3,.task-card h3 { font-size:14px; }
.task-column { background:var(--surface-alt); border:1px solid var(--border); border-radius:14px; }
.task-card { border-radius:11px; background:var(--surface); box-shadow:var(--shadow); }
.task-card p { line-height:1.7; }
.data-table th { font-size:10.5px; letter-spacing:.3px; background:var(--surface-alt); color:var(--muted); }
.data-table td { font-size:12px; padding-block:16px; }
.data-table tbody tr:hover { background:var(--surface-alt); }
.notice { border-radius:10px; font-size:12px; line-height:1.7; }
.modal { border:1px solid var(--border); border-radius:18px; box-shadow:0 24px 100px #09091825; }
.modal-head { padding:21px 24px; }
.modal-head h2 { font-size:18px; letter-spacing:-.4px; font-weight:650; }
.modal-body { padding:24px; }
.modal-foot { padding:16px 24px; background:var(--surface-alt); }
.modal-intro { font-size:13px; line-height:1.75; }
.overlay-backdrop { background:#10101c65; backdrop-filter:blur(5px); }
.toast { border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg); font-size:12px; }
.toast .app-icon { color:var(--positive); }
.toast.error .app-icon { color:var(--rose); }
/* Workspace: quiet hierarchy, one accent, no competing icon colors. */
.workspace-page,:root[data-density="compact"] .workspace-page,:root[data-focus="true"] .workspace-page {
  width:100%; max-width:none; margin-inline:0; padding:16px var(--work-gutter);
}
.workspace-page>.page-heading { margin-bottom:14px; height:38px; }
.workspace-page>.page-heading h1 { font-size:21px; }
.workspace-stage { container-type:inline-size; }
.workspace-stage>.chat-panel { border-radius:15px; background:var(--surface); }
.workspace-stage { width:100%; }
.workspace-stage>.chat-panel { --reading-width:960px; }
/* Panels use the available screen; only the text column has a reading limit. */
.workspace-stage .chat-feed,:root[data-focus="true"] .workspace-stage .chat-feed {
  padding-inline:max(20px,calc((100% - var(--reading-width)) / 2));
}
.workspace-stage .composer-wrap,:root[data-focus="true"] .workspace-stage .composer-wrap {
  width:100%; max-width:none; margin-inline:0;
  padding-inline:max(16px,calc((100% - var(--reading-width)) / 2));
}
.workspace-stage .chat-feed .message { width:100%; max-width:100%; }
.workspace-stage .chat-feed .message.user { justify-content:flex-end; }
.workspace-stage .chat-feed .message.user .bubble-wrap { width:auto; max-width:85%; }
.workspace-page>.page-heading .heading-actions { min-width:0; }
@container chat (max-width:600px) {
  .chat-head-actions .chat-project-pill { display:none; }
  .chat-header .status-category,.chat-header .status-separator { display:none; }
}
.workspace-stage .chat-header { min-height:62px; height:62px; padding-inline:20px; border-bottom:1px solid var(--border); }
.workspace-stage .chat-header h3 { font-size:13px; font-weight:650; }
.workspace-stage .chat-header .status { font-size:10px; color:var(--muted); }
.chat-project-pill { border:1px solid transparent; background:transparent; border-radius:8px; min-height:32px; color:var(--muted); font-size:11px; gap:7px; }
.chat-project-pill:hover { background:var(--surface-hover); border-color:var(--border); color:var(--ink); }
.agent-list-panel { background:var(--surface); border-radius:15px; box-shadow:none; }
.list-title h3 { font-size:12px; font-weight:650; }
.list-title .count-pill { font-size:10px; }
.workspace-stage[data-agents="expanded"] .list-title>[data-action="create-agent"] { margin-left:auto; }
.workspace-stage[data-agents="compact"] .agent-list-panel .list-head { padding:0 9px; border-bottom:1px solid var(--border); }
.workspace-stage[data-agents="compact"] .agent-list-panel .list-title { height:61px; min-height:61px; margin:0; gap:0; justify-content:center; }
.workspace-stage[data-agents="compact"] .list-title>[data-action="create-agent"] { width:36px; height:36px; min-width:36px; margin:0; flex-shrink:0; }
.agent-item { border-radius:9px; }
.agent-item strong { font-size:12px; font-weight:600; }
.agent-item.selected { background:var(--accent-soft); }
.agent-item.selected strong { color:var(--accent); }
.agent-item .avatar { width:33px; height:33px; border-radius:10px; }
.project-sub-chat { color:var(--muted); }
.project-sub-del { opacity:.6; }
.project-sub-item:focus-within .project-sub-del { opacity:1; }
.chat-feed { padding:24px clamp(20px,3vw,48px); }
.chat-feed:has(.project-dashboard) { display:flex; flex-direction:column; }
.project-dashboard { width:100%; max-width:800px; margin:auto; padding:16px 0 24px; flex-shrink:0; }
.project-intro { padding:0 0 26px; }
.project-eyebrow { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:9px; font-weight:650; letter-spacing:1.2px; margin-bottom:16px; }
.project-eyebrow>.app-icon { color:var(--accent); }
.project-eyebrow>span { margin-left:auto; letter-spacing:0; font-size:10px; font-weight:500; padding:3px 8px; border:1px solid var(--border); border-radius:6px; }
.project-intro h2 { font-size:clamp(26px,3vw,34px); font-weight:650; letter-spacing:-1px; line-height:1.25; color:var(--ink); }
.project-intro>p { max-width:560px; color:var(--muted); font-size:13px; line-height:1.8; margin-top:11px; }
.project-cards-grid { gap:12px; margin-bottom:26px; }
.project-card { border-radius:12px; padding:18px; background:var(--surface-alt); gap:9px; min-width:0; justify-content:flex-start; }
.project-card:hover { background:var(--surface); border-color:var(--accent-line); box-shadow:var(--shadow); }
.project-card-head { margin-bottom:6px; color:var(--subtle); }
.project-card-symbol { color:var(--accent); display:flex; align-items:center; }
.project-card>strong { font-size:13px; font-weight:650; }
.project-card-body { font-size:12px; line-height:1.7; -webkit-line-clamp:2; min-height:40px; }
.project-card-link { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; font-weight:550; margin-top:auto; padding-top:6px; }
.project-card:hover .project-card-link { color:var(--accent); }
.project-section-label { display:flex; justify-content:space-between; gap:10px; color:var(--muted); margin-bottom:12px; font-size:9px; letter-spacing:1px; font-weight:650; }
.project-section-label>span:last-child { letter-spacing:0; font-weight:400; font-size:10px; color:var(--subtle); }
.project-dashboard .prompt-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.project-dashboard .prompt-card { display:flex; align-items:center; gap:12px; min-height:76px; border:1px solid var(--border); background:var(--surface); border-radius:11px; padding:15px; text-align:left; transform:none; }
.project-dashboard .prompt-card:hover { border-color:var(--accent-line); background:var(--surface-alt); box-shadow:var(--shadow); }
.project-dashboard .prompt-grid .prompt-card .prompt-icon { width:32px; height:32px; margin:0; display:flex; align-items:center; justify-content:center; color:var(--muted); background:var(--surface-alt); border-radius:9px; }
.project-dashboard .prompt-card:hover .prompt-icon { color:var(--accent); background:var(--accent-soft); }
.project-dashboard .prompt-card strong { font-size:12px; font-weight:600; }
.project-dashboard .prompt-card p { font-size:10.5px; line-height:1.5; margin-top:3px; color:var(--muted); }
.project-dashboard .prompt-card>.app-icon { position:static; color:var(--subtle); opacity:.65; }
.project-start-hint { color:var(--subtle); font-size:10.5px; line-height:1.7; text-align:center; margin-top:24px; }
.project-chats-section { margin-top:24px; border-radius:12px; }
.project-chats-head { font-size:12px; font-weight:600; background:var(--surface-alt); }
.project-chat-open>.app-icon { color:var(--muted); }
.project-chat-open strong { font-size:12px; }
.project-chat-open small { font-size:10px; }
.composer-wrap,:root[data-focus="true"] .composer-wrap { padding:0 clamp(16px,2vw,32px) 12px; }
.composer { padding:12px 14px 8px; border:1px solid var(--border); border-radius:15px; background:var(--surface); box-shadow:0 4px 20px #25253b06; }
.composer:focus-within { border-color:var(--accent-line); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 6%,transparent),0 4px 20px #25253b06; }
.composer-input-row textarea { font-size:14px; line-height:1.7; }
.composer-input-row .send-btn { border-radius:10px; width:36px; height:36px; }
.composer-actions { flex-wrap:wrap; gap:4px; }
.composer-desktop-tools { flex-wrap:wrap; gap:2px; }
.composer-tools-trigger { display:inline-flex; align-items:center; gap:6px; min-height:31px; padding:0 9px; border:1px solid transparent; border-radius:8px; color:var(--muted); font-size:11px; font-weight:550; white-space:nowrap; flex-shrink:0; }
.composer-tools-trigger:hover { background:var(--surface-alt); color:var(--ink); border-color:var(--border); }
.composer-tools-trigger.active { background:var(--accent-soft); color:var(--accent); }
.tools-count { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:var(--accent); color:var(--surface); font-size:9px; }
.modal[data-kind="composer-tools"] { max-width:440px; }
.composer-tools-intro { color:var(--muted); font-size:12px; line-height:1.7; margin-bottom:16px; }
.composer-tools-list { display:grid; gap:8px; }
.composer-tool-row { display:flex; align-items:center; gap:13px; width:100%; padding:14px 12px; text-align:left; border:1px solid var(--border); border-radius:11px; }
.composer-tool-row:hover { background:var(--surface-alt); }
.composer-tool-row.active { background:var(--accent-soft); border-color:var(--accent-line); }
.composer-tool-icon { display:flex; color:var(--muted); }
.composer-tool-row.active .composer-tool-icon { color:var(--accent); }
.composer-tool-row strong { display:block; font-size:13px; font-weight:600; }
.composer-tool-row small { display:block; font-size:11px; color:var(--muted); line-height:1.6; margin-top:3px; }
.composer-tool-switch { position:relative; width:29px; height:17px; border-radius:999px; background:var(--border); flex-shrink:0; transition:background .16s; }
.composer-tool-switch::after { content:""; position:absolute; top:3px; left:3px; width:11px; height:11px; border-radius:50%; background:var(--surface); box-shadow:0 1px 3px #0002; transition:transform .16s; }
.composer-tool-row.active .composer-tool-switch { background:var(--accent); }
.composer-tool-row.active .composer-tool-switch::after { transform:translateX(12px); }
.composer-actions .icon-btn { width:30px; min-width:30px; height:30px; }
.composer-actions .icon-btn>.app-icon { width:16px; height:16px; }
.composer-actions .model-select { margin-left:auto; flex:0 1 auto; field-sizing:content; min-width:0; width:auto; max-width:150px; min-height:28px; height:28px; padding:3px 5px; text-overflow:ellipsis; font-size:10.5px; border:1px solid transparent; border-radius:7px; background-color:var(--surface-alt); color:var(--muted); }
.composer-actions .model-select:focus { border-color:var(--accent-line); }
.composer-spacer { display:none; }
.composer-divider { margin:0 4px; }
.mode-pill { background:transparent; border:1px solid transparent; height:29px; padding:0 7px; font-size:10.5px; font-weight:550; border-radius:7px; gap:5px; }
.mode-pill.active { border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent); }
.mode-pill:hover { background:var(--surface-alt); border-color:var(--border); }
.char-count { font-size:9px; color:var(--subtle); }
.composer-note { font-size:9px; gap:12px; line-height:1.7; margin-top:7px; }
.composer-note>span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.message.assistant .bubble { line-height:1.85; }
.message.user .bubble { background:var(--surface-hover); border:1px solid var(--border); border-radius:16px 16px 4px 16px; }
.message-meta { color:var(--muted); }
/* One quiet, continuously animated activity line. No simulated progress percentage. */
.live-message { display:flex; align-items:center; gap:12px; width:100%; max-width:100%; min-width:0; margin-block:12px 24px; }
.live-message>.avatar { width:30px; height:30px; border-radius:9px; }
.message.assistant + .live-message>.avatar { visibility:hidden; }
.live-message>.avatar .app-icon { width:16px; height:16px; }
.live-status { display:flex; align-items:center; gap:9px; min-width:0; min-height:30px; font-size:13px; line-height:1.5; }
.live-orbit { position:relative; display:inline-block; width:13px; height:13px; flex:0 0 13px; color:var(--muted); }
.live-orbit::before { content:""; position:absolute; inset:0; border:1.5px solid color-mix(in srgb,var(--muted) 20%,transparent); border-top-color:currentColor; border-right-color:currentColor; border-radius:50%; animation:agentOrbit 1.1s linear infinite; }
.live-orbit::after { content:""; position:absolute; inset:4.5px; border-radius:50%; background:currentColor; }
.live-status .live-label { min-width:0; color:var(--muted); font-weight:500; }
@supports (background-clip:text) {
  .live-status .live-label { background:linear-gradient(105deg,var(--muted) 20%,var(--ink) 42%,var(--muted) 64%); background-size:240% 100%; background-clip:text; -webkit-background-clip:text; color:transparent; animation:agentShimmer 2.5s linear infinite; }
}
.live-status .live-elapsed { margin-left:3px; color:var(--subtle); font-size:11px; font-weight:400; font-variant-numeric:tabular-nums; white-space:nowrap; }
@keyframes agentOrbit { to { transform:rotate(360deg); } }
@keyframes agentShimmer { from { background-position:140% 0; } to { background-position:-100% 0; } }
@keyframes agentBreathe { 0%,100% { opacity:.35; } 50% { opacity:1; } }
:root[data-motion="reduced"] .live-orbit::before,:root[data-motion="reduced"] .live-label { animation:none; }
:root[data-motion="reduced"] .live-status .live-label { color:var(--muted); background:none; }
@media(prefers-reduced-motion:reduce), (forced-colors:active) {
  .live-orbit::before,.live-status .live-label { animation:none; }
  .live-status .live-label { color:var(--muted); background:none; }
}
@media(prefers-reduced-motion:reduce) {
  /* Essential activity feedback: use a gentle fade instead of rotation or shimmer.
     The explicit in-app reduced-motion setting still disables all animation. */
  :root[data-motion="system"] .live-orbit::before { animation:agentBreathe 2s ease-in-out infinite!important; }
}
.md-code-btn { display:inline-flex; align-items:center; gap:5px; min-height:27px; border-radius:6px; }
.md-code-bar { background:var(--surface-alt); padding:8px 12px; }
.md-code-wrap { border-radius:11px; }
.canvas-toolbar { justify-content:flex-start; padding:10px; gap:6px; }
.canvas-pane { min-width:0; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); }
.canvas-pane-head { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:43px; padding:10px 13px; border-bottom:1px solid var(--border); background:var(--surface-alt); font-size:11px; font-weight:600; color:var(--muted); }
.canvas-editor { display:block; border:0; border-radius:0; outline:none; min-height:360px; height:420px; max-height:60vh; background:var(--surface); color:var(--ink); }
.canvas-preview { min-height:360px; max-height:60vh; overflow:auto; padding:18px; font-size:13px; overflow-wrap:anywhere; }
.canvas-editor:focus { box-shadow:inset 0 0 0 2px var(--accent-line); }
.excel-sheet-tab,.file-viewer-mode { display:inline-flex; align-items:center; gap:6px; }
.excel-sheet-tab.active { color:var(--accent); }
.file-viewer-toolbar,.file-viewer-modes { flex-wrap:wrap; }
.code-preview-frame { width:100%; min-height:420px; border:1px solid var(--border); border-radius:12px; background:white; }
@container (max-width:680px) {
  .chat-head-actions .chat-project-pill { display:none; }
  .composer-desktop-tools .mode-pill span { display:none; }
  .composer-desktop-tools .mode-pill { width:29px; justify-content:center; padding:0; }
  .composer-actions .char-count { display:none; }
}
@media(min-width:761px) and (max-width:1100px) {
  :root { --page-inset:22px; }
  .global-search { min-width:0; }
  .top-actions { gap:5px; }
  .page { padding:22px; }
}
@media(max-width:760px) {
  :root,:root[data-view="workspace"] { --header:54px; --work-gutter:12px; }
  .page { padding:20px 16px 90px; }
  .page-heading { gap:10px; margin-bottom:20px; flex-wrap:wrap; }
  .page-heading h1 { font-size:23px; }
  .heading-actions { max-width:100%; flex-wrap:wrap; }
  .heading-actions .btn { min-height:38px; }
  .stats-grid { gap:10px; }
  .stat-card { padding:16px; }
  .stat-label { font-size:11px; }
  .stat-value { font-size:26px; }
  .stat-meta { font-size:10px; }
  .hero-copy { padding:24px; }
  .hero-copy h1 { font-size:28px; }
  .hero-copy p { font-size:12px; }
  .notice { font-size:12px; padding:14px; }
  .task-board { gap:16px; }
  .task-card p { font-size:12px; }
  .modal-head,.modal-body { padding:18px; }
  .modal-head h2 { font-size:17px; }
  .modal-foot { padding:14px 18px; flex-wrap:wrap; }
  .canvas-toolbar .btn { flex:1 0 auto; }
  .canvas-editor { height:300px; min-height:260px; font-size:13px; }
  .canvas-preview { min-height:220px; }
  /* Keep navigation discoverable on mobile; the composer remains fixed in its flex column. */
  :root[data-view="workspace"] .topbar { display:flex!important; height:var(--header); min-height:var(--header); padding:0 12px; border-bottom:1px solid var(--border); background:var(--surface); }
  :root[data-view="workspace"] .topbar .breadcrumbs { display:flex; font-size:11px; gap:7px; }
  :root[data-view="workspace"] .topbar .top-actions { display:flex; gap:4px; }
  :root[data-view="workspace"] .topbar .layout-trigger,:root[data-view="workspace"] .topbar .global-search,
  :root[data-view="workspace"] .topbar .live-pill,:root[data-view="workspace"] .topbar .top-divider,
  :root[data-view="workspace"] .topbar .bell-wrap,:root[data-view="workspace"] .topbar .top-avatar { display:none; }
  :root[data-view="workspace"] .topbar .nav-toggle { display:inline-flex; }
  :root[data-view="workspace"] .topbar .theme-toggle { display:inline-flex; }
  :root[data-view="workspace"] #main-content { height:calc(100% - var(--header)); }
  :root[data-view="workspace"] .workspace-page { height:calc(var(--viewport-height) - var(--header)); padding:0; }
  :root[data-view="workspace"] .workspace-page>.page-heading { display:none; }
  :root[data-view="workspace"] .workspace-stage>.chat-panel { border:0; border-radius:0; }
  :root[data-view="workspace"] .chat-feed { padding:20px 18px; }
  .project-dashboard { padding:6px 0 12px; }
  .project-intro { padding-bottom:20px; }
  .project-eyebrow { font-size:8px; letter-spacing:1px; margin-bottom:14px; }
  .project-intro h2 { font-size:28px; }
  .project-intro>p { font-size:12px; line-height:1.7; }
  .project-cards-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:23px; }
  .project-card { padding:14px; gap:8px; border-radius:11px; }
  .project-card>strong { font-size:12px; }
  .project-card-body { font-size:11px; line-height:1.65; min-height:36px; }
  .project-card-link { font-size:10px; gap:4px; }
  .project-section-label { font-size:8px; }
  .project-section-label>span:last-child { display:none; }
  .project-dashboard .prompt-grid { gap:9px; }
  .project-dashboard .prompt-card { flex-direction:row; padding:12px; min-height:66px; gap:9px; }
  .project-dashboard .prompt-grid .prompt-card .prompt-icon { height:28px; width:28px; }
  .project-dashboard .prompt-icon .app-icon { width:17px; height:17px; }
  .project-dashboard .prompt-card strong { font-size:11px; }
  .project-dashboard .prompt-card p,.project-dashboard .prompt-card>.app-icon { display:none; }
  .project-start-hint { font-size:10px; margin-top:20px; }
  :root[data-view="workspace"] .composer-wrap { padding:8px 12px max(10px,env(safe-area-inset-bottom)); background:var(--surface); }
  :root[data-view="workspace"] .composer { padding:10px 10px 6px; border-radius:15px; background:var(--surface); border:1px solid var(--border); box-shadow:0 3px 16px #25253b06; }
  :root[data-view="workspace"] .composer-input-row { gap:5px; }
  :root[data-view="workspace"] .composer-input-row textarea { font-size:16px; }
  :root[data-view="workspace"] .composer-input-row .icon-btn { min-width:36px; width:36px; height:40px; }
  :root[data-view="workspace"] .composer-input-row .send-btn { width:38px; height:38px; border-radius:10px; }
  :root[data-view="workspace"] .composer-actions { flex-wrap:nowrap; gap:4px; }
  :root[data-view="workspace"] .composer-tools-trigger { min-height:38px; padding-inline:6px; font-size:11px; gap:4px; }
  :root[data-view="workspace"] .composer-agent-switch { max-width:28%; min-width:0; font-size:11px; min-height:38px; gap:6px; padding:0 5px; }
  :root[data-view="workspace"] .composer-actions .model-select { flex:0 1 auto; width:auto; max-width:40%; min-height:38px; height:38px; font-size:11px!important; margin-left:auto; }
  :root[data-view="workspace"] .composer-more { min-width:36px; width:36px; height:38px; }
  .project-sub-del { opacity:1; min-width:36px; min-height:36px; }
  .excel-sheet-tab { min-height:36px; }
  .modal[data-kind^="chat-"] .modal-head { padding:16px 18px; }
  .message.user .user-actions { opacity:1; }
  :root[data-view="workspace"] .live-message>.avatar { display:none; }
}
@media(max-width:360px) {
  .project-cards-grid { grid-template-columns:1fr; }
  .project-card-body { min-height:0; }
  .project-intro h2 { font-size:25px; }
  :root[data-view="workspace"] .topbar .workspace-crumb,:root[data-view="workspace"] .topbar .crumb-slash { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* Shared responsive behavior for every non-chat module.
   Measure the space after the navigation, including manual collapse and browser zoom. */
.main-shell { container-type:inline-size; container-name:app-layout; }
.page:not(.workspace-page) {
  --module-gap:clamp(12px,1.2vw,20px);
  width:100%; max-width:none; margin-inline:0;
  padding:26px var(--page-inset) 32px;
}
@media(min-width:761px) {
  :root { --page-inset:clamp(22px,2vw,32px); }
  :root:not([data-view="workspace"]) .topbar { padding-inline:var(--page-inset); }
}
.page:not(.workspace-page)>* { min-width:0; max-width:100%; }
.page:not(.workspace-page) .page-heading { flex-wrap:wrap; align-items:center; gap:14px 20px; }
.page:not(.workspace-page) .page-heading>div:first-child { flex:1 1 300px; }
.page:not(.workspace-page) .heading-actions { min-width:0; max-width:100%; flex-wrap:wrap; justify-content:flex-end; }
.page:not(.workspace-page) .heading-actions .btn { white-space:normal; text-align:center; }
.page:not(.workspace-page) .stats-grid,
.page:not(.workspace-page) .quick-agent-grid,
.page:not(.workspace-page) .folder-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:var(--module-gap);
}
.page:not(.workspace-page) .card-grid {
  grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:var(--module-gap);
}
.page:not(.workspace-page) .connection-grid {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:var(--module-gap);
}
.page:not(.workspace-page) :is(.stat-card,.quick-agent,.folder-card,.agent-card,.provider-card,.task-card,.chart-card) { min-width:0; }
.page:not(.workspace-page) :is(.agent-desc,.provider-card p,.task-card p,.notice,.history-row p,.file-link strong) { overflow-wrap:anywhere; }
.page:not(.workspace-page) .agent-card-meta { flex-wrap:wrap; gap:8px 14px; }
.page:not(.workspace-page) .agent-card-footer { gap:10px; flex-wrap:wrap; }
.page:not(.workspace-page) :is(.toolbar,.library-toolbar,.section-heading) { flex-wrap:wrap; gap:12px; }
.page:not(.workspace-page) .toolbar>.searchbox { flex:1 1 260px; min-width:0; max-width:420px; width:auto; }
.page:not(.workspace-page) .filter-group { display:flex; flex-wrap:wrap; min-width:0; max-width:100%; gap:8px; }
.page:not(.workspace-page) .filter-group .select { min-width:0; max-width:100%; flex:1 1 130px; }
.page:not(.workspace-page) .library-toolbar .chip-tabs { flex:1 1 300px; min-width:0; overflow-x:auto; }
.page:not(.workspace-page) .chip-tab { flex-shrink:0; }
.page:not(.workspace-page) .section-heading>.searchbox { min-width:0; max-width:100%; flex:0 1 300px; }
.page:not(.workspace-page) .table-wrap { width:100%; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
.page:not(.workspace-page) .data-table { width:100%; }
.page:not(.workspace-page) :is(.table-footer,.selection-bar) { flex-wrap:wrap; gap:10px; }
.page:not(.workspace-page) .task-board { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--module-gap); }
.page:not(.workspace-page) .task-column { min-width:0; }
.page:not(.workspace-page) .task-card-footer { flex-wrap:wrap; gap:8px; }
.page:not(.workspace-page) .task-list-row>.grow { min-width:0; }
.page:not(.workspace-page) .history-row { gap:16px; flex-wrap:wrap; }
.page:not(.workspace-page) .history-row>.flex:first-child { flex:1 1 260px; min-width:0; }
.page:not(.workspace-page) .history-row>.flex:last-child { margin-left:auto; flex-shrink:0; }
.page:not(.workspace-page) .charts-grid { grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr); gap:var(--module-gap); }
.page:not(.workspace-page) .dashboard-lower { grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr); gap:var(--module-gap); }
.page:not(.workspace-page) .permission-layout { grid-template-columns:220px minmax(0,1fr); gap:var(--module-gap); }
.page:not(.workspace-page) .permission-row>div { min-width:0; }
.page:not(.workspace-page) .permission-row .switch { flex-shrink:0; }
.page:not(.workspace-page) .chart { gap:clamp(8px,2cqw,22px); }
@container page (max-width:1000px) {
  .page:not(.workspace-page) .task-board { grid-template-columns:minmax(0,1fr); }
  .page:not(.workspace-page) .task-column { min-height:0; }
  .page:not(.workspace-page) .hero-art,.page:not(.workspace-page) .feature-art { display:none; }
  .page:not(.workspace-page) .hero-copy,.page:not(.workspace-page) .feature-content { width:100%; flex:1; }
}
@container page (max-width:820px) {
  .page:not(.workspace-page) :is(.charts-grid,.dashboard-lower,.permission-layout) { grid-template-columns:minmax(0,1fr); }
  .page:not(.workspace-page) .role-panel { display:flex; overflow-x:auto; gap:6px; }
  .page:not(.workspace-page) .role-item { flex:1 0 140px; margin:0; }
  .page:not(.workspace-page) .stats-grid,
  .page:not(.workspace-page) .quick-agent-grid,
  .page:not(.workspace-page) .folder-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page:not(.workspace-page) .heading-actions { justify-content:flex-start; }
}
@container page (max-width:480px) {
  .page:not(.workspace-page) .heading-actions { width:100%; }
  .page:not(.workspace-page) .heading-actions>.btn { flex:1 1 auto; }
  .page:not(.workspace-page) .toolbar>.searchbox,
  .page:not(.workspace-page) .section-heading>.searchbox { flex-basis:100%; max-width:none; }
  .page:not(.workspace-page) .toolbar>.filter-group { width:100%; }
  .page:not(.workspace-page) .history-row>.flex:last-child { width:100%; justify-content:flex-end; }
  .page:not(.workspace-page) .task-summary { gap:14px; }
  .page:not(.workspace-page) .stat-card { padding:14px; }
  .page:not(.workspace-page) .stat-value { font-size:25px; }
}
@container page (max-width:340px) {
  .page:not(.workspace-page) .quick-agent-grid,
  .page:not(.workspace-page) .folder-grid { grid-template-columns:minmax(0,1fr); }
}
@container app-layout (max-width:1000px) {
  .topbar .global-search { min-width:36px; width:36px; height:36px; padding:0; justify-content:center; }
  .topbar .global-search>span,.topbar .global-search>kbd { display:none; }
  .topbar .live-pill { max-width:180px; }
}
@container app-layout (max-width:720px) {
  .topbar .live-pill,.topbar .top-divider,.topbar .bell-wrap { display:none; }
  .topbar .layout-trigger>span { display:none; }
  .topbar .layout-trigger { width:36px; padding:0; justify-content:center; }
  .topbar .top-actions { gap:4px; flex-shrink:0; }
  .topbar .breadcrumbs .workspace-crumb,.topbar .breadcrumbs .crumb-slash { display:none; }
}
@media(max-width:760px) {
  .page:not(.workspace-page) { --page-inset:16px; padding:20px var(--page-inset) calc(90px + env(safe-area-inset-bottom)); }
}