:root {
  color-scheme: light;
  --paper: #F3F6F5;
  --ink: #17232B;
  --muted: #647178;
  --line: #CBD4D7;
  --accent: #E65B36;
  --accent-dark: #B64529;
  --panel: #E7ECEE;
  --dark-line: #52616A;
  --dark-muted: #AAB5BA;
  --masthead: #17232B;
  --success: #166B54;
  --success-pale: #e5f1ec;
  --sans: "Space Grotesk", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; height: 100%; margin: 0; }
body { overflow-x: hidden; background: var(--paper); color: var(--ink); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hidden { display: none !important; }

/* Technical-paper sign-in */
.auth-screen { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--paper); }
.auth-panel { width: min(420px, 100%); display: grid; gap: 13px; padding: 30px; border: 1px solid var(--line); background: #fff; }
.auth-mark { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--dark-line); background: var(--masthead); color: #fff; font-weight: 700; }
.auth-panel .eyebrow { margin: 4px 0 -8px; color: var(--accent-dark); font: 11px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.auth-panel h1 { margin: 0; color: var(--ink); font-size: 27px; line-height: .98; letter-spacing: -.055em; }
.auth-copy { margin: 0 0 7px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.auth-panel label { color: var(--ink); font: 11px var(--mono); text-transform: uppercase; }
.auth-panel input { width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 0; outline: none; background: var(--paper); color: var(--ink); }
.auth-panel input:focus { border-color: var(--accent); }
.auth-error { min-height: 16px; margin: 0; color: var(--accent-dark); font: 11px/1.5 var(--mono); }
.auth-panel .auth-submit { width: 100%; height: 44px; }
.auth-screen #recaptcha-container { min-height: 0; }

/* Conversation-first desktop workspace */
.app-shell { width: 100%; height: 100vh; height: 100dvh; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr); overflow: hidden; background: var(--paper); }
.sidebar { width: 280px; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 18px 12px 12px; border-right: 1px solid #34444D; background: var(--masthead); color: #fff; }
.sidebar-projects { max-height: 34vh; }
.sidebar-section { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.sidebar-section-heading { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 8px; color: var(--dark-muted); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.sidebar-add { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--dark-line); background: transparent; color: #f28a6c; font: 18px/1 var(--sans); }
.sidebar-add:hover { border-color: var(--accent); background: #22313a; color: #fff; }
.sidebar-channels { min-height: 0; flex: 1; }
.agent-list { flex: 1; }
.agent-item { cursor: pointer; }
.agent-item:focus-visible { outline: 2px solid #f28a6c; outline-offset: 1px; }
.sidebar-footer { min-width: 0; flex: none; display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid #34444d; }
.user-profile { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 0 5px; }
.profile-avatar { width: 31px; height: 31px; flex: none; display: grid; place-items: center; border: 1px solid #596a72; background: #22313a; color: #fff; font: 11px var(--mono); }
.profile-copy { min-width: 0; display: grid; }
.profile-copy strong, .profile-copy small { max-width: 190px; overflow: hidden; color: #edf1f0; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy small { color: var(--dark-muted); font: 9px var(--mono); }
.sidebar-settings { width: 100%; min-height: 35px; margin: 0; display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 9px; border-color: #34444d; text-transform: none; }
.sidebar-settings span { color: #f28a6c; }
.brand { height: 38px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 5px; white-space: nowrap; font-size: 14px; letter-spacing: -.02em; }
.brand b { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #76858b; background: #22313a; color: #fff; font: 12px var(--mono); }
.brand strong { font-weight: 650; }
.sidebar-actions { display: flex; align-items: center; gap: 8px; margin: 0; }
.icon-button, .tiny-action { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--dark-line); border-radius: 0; background: transparent; color: var(--dark-muted); }
.icon-button:hover, .tiny-action:hover { border-color: var(--accent); color: #fff; }
.new-chat { min-width: 0; height: 44px; flex: 1; padding: 0 12px; border: 1px solid var(--dark-line); border-radius: 0; background: transparent; color: #e8edef; font: 11px var(--mono); text-transform: uppercase; white-space: nowrap; }
.new-chat span { margin-right: 7px; color: #f28a6c; }
.new-chat:hover { border-color: var(--accent); color: #ffb19c; }
.team-heading { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 3px 8px 0; color: var(--dark-muted); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.sidebar-projects { flex: none; min-height: 0; max-height: 30vh; display: flex; flex-direction: column; gap: 5px; }
.sidebar-section-heading { display: flex; justify-content: space-between; margin: 0 8px; color: var(--dark-muted); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.project-list { min-height: 0; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #52616a transparent; }
.project-item { width: 100%; min-width: 0; min-height: 34px; flex: none; padding: 6px 9px; overflow: hidden; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #e7edef; font: 11px var(--mono); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.project-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.project-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.project-item small { flex: none; color: var(--dark-muted); font: 9px var(--mono); }
.project-item:hover { background: #1d2a32; }
.project-item.active { border-color: #34444d; background: #202d35; color: #fff; }
.project-empty { padding: 4px 8px; color: var(--dark-muted); font-size: 10px; }
.preset-control { display: inline-flex; align-items: center; gap: 5px; letter-spacing: 0; }
.preset-control select { max-width: 102px; padding: 3px 5px; border: 1px solid #34444d; border-radius: 0; background: #202d35; color: #e7edef; font: 9px var(--mono); }
.agent-list { min-width: 0; min-height: 0; flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 5px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #52616a transparent; }
.agent-item { position: relative; width: 100%; min-width: 0; min-height: 66px; flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #e7edef; text-align: left; }
.agent-item.active { border-color: #34444d; background: #202d35; }
.agent-item:hover { background: #1d2a32; }
.agent-avatar { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid #586871; border-radius: 7px !important; background: var(--avatar-bg) !important; font-size: 16px; }
.agent-copy { min-width: 0; display: block; }
.agent-title { display: flex; gap: 5px; align-items: baseline; overflow: hidden; white-space: nowrap; }
.agent-title strong { color: #fff; font-size: 12px; font-weight: 700; }
.agent-title em { overflow: hidden; color: var(--dark-muted); font-size: 10px; font-style: normal; text-overflow: ellipsis; }
.agent-preview { display: block; overflow: hidden; margin-top: 2px; color: var(--dark-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-bottom { min-width: 0; flex: none; display: flex; align-items: center; gap: 9px; padding: 12px 4px 3px; border-top: 1px solid #34444d; }
.runtime-dot { width: 7px; height: 7px; flex: none; border: 1px solid var(--dark-muted); border-radius: 50%; background: transparent; }
.runtime-dot.ok { border-color: #8dd2b8; background: #8dd2b8; }
.runtime-dot.bad { border-color: #f08a6c; background: #f08a6c; }
.sidebar-bottom strong, .sidebar-bottom small { display: block; max-width: 175px; overflow: hidden; color: #e8edef; font: 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.sidebar-bottom small { margin-top: 2px; color: var(--dark-muted); }
.sidebar-bottom .tiny-action { margin-left: auto; width: 28px; height: 28px; border: 0; }

/* Conversation work surface */
.conversation { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); }
.conversation-header { flex: none; min-height: 62px; display: flex; align-items: center; gap: 11px; padding: 10px clamp(16px, 4vw, 54px); border-bottom: 1px solid var(--line); background: var(--paper); }
.conversation-header .project-context { margin-left: auto; max-width: 40%; overflow: hidden; color: var(--muted); font: 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.active-avatar { width: 33px; height: 33px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 0 !important; background: var(--panel) !important; font-size: 16px; }
.header-identity { min-width: 0; display: grid; }
.header-identity strong { color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.25; }
.header-identity span { color: var(--muted); font-size: 11px; }
.status-badge { display: inline-flex; align-items: center; gap: 7px; margin-left: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 0; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; }
.status-badge i { width: 6px; height: 6px; background: var(--accent); }
.status-badge[data-status="running"] i { animation: blink 1.2s infinite; }
.status-badge[data-status="failed"] { border-color: #d99b88; color: var(--accent-dark); }
@keyframes blink { 50% { opacity: .25; } }
.settings-button { min-height: 44px; margin-left: auto; padding: 0 11px; border: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: 10px var(--mono); text-transform: uppercase; }
.settings-button + .settings-button { margin-left: 0; }
.settings-button:hover { border-color: var(--accent); color: var(--accent-dark); }
.workspace-tabs { flex: none; display: flex; gap: 4px; padding: 0 clamp(16px, 4vw, 54px); border-bottom: 1px solid var(--line); background: var(--paper); }
.workspace-tab { min-height: 42px; padding: 0 13px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; }
.workspace-tab.active { border-bottom-color: var(--accent); color: var(--ink); }
.workspace-tab span { margin-left: 5px; color: var(--accent-dark); }
.work-stage { width: 100%; min-width: 0; min-height: 0; flex: 1 1 0; display: flex; overflow: hidden; }
.conversation-scroll { min-width: 0; min-height: 0; overflow-y: auto; scroll-behavior: smooth; }
.conversation-scroll { flex: 1; }
.activity-panel { min-width: 0; min-height: 0; flex: 1; overflow-y: auto; scroll-behavior: smooth; }
.activity-inner { width: min(960px, 100%); display: grid; gap: 25px; margin: 0 auto; padding: 20px clamp(16px, 3vw, 36px) 32px; }
.activity-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.activity-heading h2 { margin: 0; color: var(--ink); font-size: 13px; }
.activity-heading span { color: var(--muted); font: 9px var(--mono); text-transform: uppercase; }
.activity-task-list, .activity-log-list { display: grid; gap: 7px; }
.activity-empty { padding: 14px; border: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.activity-task, .activity-log { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 11px 12px; border: 1px solid var(--line); background: #fff; }
.activity-task strong, .activity-log strong { min-width: 0; color: var(--ink); font-size: 12px; overflow-wrap: anywhere; }
.activity-task small, .activity-log small { color: var(--muted); font: 9px var(--mono); text-transform: uppercase; }
.activity-task p, .activity-log p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.activity-log.error { border-left: 3px solid var(--accent); }
.activity-log.success { border-left: 3px solid var(--success); }
.conversation-inner { width: min(960px, 100%); min-height: 100%; display: flex; flex-direction: column; margin: 0 auto; padding: 22px clamp(16px, 3vw, 36px); }
.message-stream { width: 100%; display: flex; flex-direction: column; gap: 17px; margin: auto 0 0; padding: 12px 0 20px; }
.machine-panel { display: none; }
.machine-panel-head, .machine-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--dark-muted); font: 11px var(--mono); letter-spacing: .07em; }
.machine-live { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.machine-live i { width: 6px; height: 6px; border: 1px solid #73838a; }
.machine-live i.online { border-color: #91c8b2; background: #91c8b2; }
.machine-live i.offline { border-color: var(--accent); background: var(--accent); }
.machine-screen { position: relative; min-height: 220px; flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 24px clamp(16px, 3vw, 38px); border-top: 1px solid #52616a; border-bottom: 1px solid #52616a; }
.machine-corner { position: absolute; width: 22px; height: 22px; border-color: var(--accent); border-style: solid; }
.machine-corner.top-left { top: 0; left: 0; border-width: 1px 0 0 1px; }
.machine-corner.top-right { top: 0; right: 0; border-width: 1px 1px 0 0; }
.machine-corner.bottom-left { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.machine-corner.bottom-right { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.machine-reticle { position: absolute; top: 50%; right: 12%; width: clamp(66px, 8vw, 104px); aspect-ratio: 1; transform: translateY(-50%); border: 1px solid #50616a; border-radius: 50%; opacity: .75; }
.machine-reticle::before, .machine-reticle::after { position: absolute; top: 50%; left: 50%; content: ""; transform: translate(-50%, -50%); background: var(--accent); }
.machine-reticle::before { width: 1px; height: 130%; }
.machine-reticle::after { width: 130%; height: 1px; }
.machine-reticle span { position: absolute; inset: 27%; border: 1px solid #52616a; border-radius: 50%; background: var(--masthead); }
.machine-reticle span::after { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border: 1px solid var(--accent); content: ""; transform: translate(-50%, -50%); background: var(--masthead); }
.machine-label { position: relative; z-index: 1; margin: 0 0 11px; color: #e98c72; font: 11px var(--mono); letter-spacing: .08em; }
.machine-screen h2 { position: relative; z-index: 1; max-width: 74%; margin: 0; color: #f4f6f5; font-size: clamp(29px, 4vw, 52px); line-height: .95; letter-spacing: -.06em; overflow-wrap: anywhere; }
.machine-caption { position: relative; z-index: 1; max-width: 72%; margin: 11px 0 0; color: var(--dark-muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.machine-progress-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--dark-muted); font: 11px var(--mono); letter-spacing: .06em; }
.machine-progress-row span:last-child { color: #fff; }
.machine-progress { height: 2px; background: #43525a; }
.machine-progress span { width: 0; height: 100%; display: block; background: var(--accent); transition: width .2s ease; }
.machine-readouts { display: grid; }
.machine-readouts > div { min-width: 0; display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 12px; padding: 9px 0; border-top: 1px solid #43525a; }
.machine-readouts span { color: var(--dark-muted); font: 11px var(--mono); letter-spacing: .06em; }
.machine-readouts strong { min-width: 0; color: #eef1f0; font-size: 11px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.machine-foot { margin-top: auto; padding-top: 2px; border-top: 1px solid #43525a; }
.machine-foot b { color: #e98c72; font-weight: 400; }
.date-divider { display: flex; align-items: center; gap: 12px; margin: 0 0 2px; color: var(--muted); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.date-divider::before, .date-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.message-row { max-width: 88%; display: flex; align-items: flex-start; gap: 9px; }
.message-row.user { align-self: flex-end; flex-direction: row-reverse; }
.message-avatar { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 0 !important; background: #fff; font-size: 13px; }
.message-content { min-width: 0; }
.message-meta { display: flex; align-items: center; gap: 9px; margin: 0 0 5px 1px; color: var(--muted); font: 10px var(--mono); }
.message-meta strong { color: var(--accent-dark); font: 11px var(--mono); font-weight: 500; text-transform: uppercase; }
.message-row.user .message-meta { justify-content: flex-end; margin-right: 1px; }
.message-row.user .message-meta strong { color: var(--ink); }
.message-meta time { color: var(--muted); }
.bubble { padding: 10px 13px; border: 1px solid var(--line); border-radius: 0; background: var(--panel); color: var(--ink); font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-row.agent .bubble, .message-row.agent-primary .bubble { background: #fff; }
.message-row.user .bubble { border-color: #66767d; background: var(--masthead); color: #f3f6f5; }
.message-time { margin: 5px 2px 0; color: var(--muted); font: 9px var(--mono); }
.empty-conversation { min-height: min(58vh, 540px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin: auto; text-align: center; }
.empty-conversation h1 { margin: 0; color: var(--ink); font-size: clamp(21px, 3vw, 30px); letter-spacing: -.04em; }
.empty-conversation p { max-width: 390px; margin: 0; color: var(--muted); font-size: 13px; }
.empty-mark, .empty-avatar { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 5px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 15px var(--mono); }
.message-row.user .message-time { text-align: right; }
.message-block { display: grid; gap: 9px; }
.summary-wrap { display: grid; justify-items: center; gap: 8px; }
.summary-pill { max-width: 100%; padding: 6px 9px; border: 1px solid var(--line); border-radius: 0; background: var(--panel); color: #59666D; font: 10px var(--mono); cursor: pointer; }
.summary-pill:hover { border-color: var(--accent); color: var(--accent-dark); }
.summary-pill strong { color: var(--accent-dark); font-weight: 500; }
.summary-details { display: none; width: min(600px, 100%); padding: 11px 13px; border: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--muted); font: 10px/1.65 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.summary-wrap.open .summary-details { display: block; }
.action-card { margin: 4px 0 0 37px; padding: 14px 15px; border: 1px solid var(--dark-line); border-left: 3px solid var(--accent); border-radius: 0; background: var(--masthead); color: #f3f6f5; }
.action-card.success { border-color: #7cae9c; border-left-color: var(--success); background: var(--success-pale); color: var(--ink); }
.action-head { display: flex; align-items: flex-start; gap: 10px; }
.action-icon { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border: 1px solid #74858a; border-radius: 0; color: #f28a6c; font: 12px var(--mono); }
.action-card.success .action-icon { border-color: #88b8a6; color: var(--success); }
.action-copy { min-width: 0; }
.action-copy strong { display: block; color: #fff; font-size: 12px; font-weight: 700; }
.action-card.success .action-copy strong { color: var(--success); }
.action-copy p { margin: 4px 0 0; color: #d5dddf; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.action-card.success .action-copy p { color: #59666D; }
.action-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.option-pill, .action-button { min-height: 44px; padding: 6px 10px; border: 1px solid var(--dark-line); border-radius: 0; background: transparent; color: #f3f6f5; font: 10px var(--mono); text-transform: uppercase; }
.option-pill:hover, .action-button:hover { border-color: var(--accent); color: #ffad96; }
.action-card.success .action-button { border-color: #719285; color: var(--ink); }
.action-card.success .action-button:hover { border-color: var(--success); color: var(--success); }
.action-button:disabled { opacity: .65; cursor: default; }
.action-button.primary { border-color: var(--accent-dark); background: var(--accent-dark); color: #fff; }

/* Pinned command bar */
.composer-area { flex: none; padding: 13px clamp(16px, 4vw, 54px) 11px; border-top: 1px solid var(--line); background: var(--paper); }
.composer-area { padding-top: 10px; }
.composer textarea:disabled { cursor: not-allowed; opacity: .65; }
.composer .mic-button.recording { border-color: #c7332d; background: #c7332d; color: #fff; animation: recording-pulse 1s ease-in-out infinite; }
@keyframes recording-pulse { 50% { box-shadow: 0 0 0 5px #c7332d33; } }
.delegation-copy strong, .delegation-copy span { display: block; }
.delegation-copy span { color: var(--muted); font-size: 11px; }
.signout-button { width: max-content; min-height: 38px; padding: 0 13px; border: 1px solid #d1aaa0; background: #fff; color: var(--accent-dark); font: 10px var(--mono); text-transform: uppercase; }
.signout-button:hover { border-color: var(--accent); background: #fff8f5; }
.delegation-bar { width: min(860px, 100%); display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0 auto 7px; padding: 0; }
.delegation-copy { min-width: 0; margin-right: auto; color: var(--muted); font-size: 10px; }
.delegation-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delegation-button { min-width: 0; min-height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: 10px var(--mono); text-transform: none; }
.delegation-button:hover { border-color: var(--accent); background: #fff; color: var(--ink); }
.composer { width: min(860px, 100%); min-height: 58px; display: flex; align-items: center; gap: 9px; margin: 0 auto; padding: 6px; border: 1px solid #aab7bb; border-radius: 0; background: #fff; }
.composer:focus-within { border-color: var(--accent); }
.composer-tool { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font: 16px var(--mono); }
.composer-tool:hover { border-color: var(--accent); color: var(--accent-dark); }
.composer textarea { min-width: 0; min-height: 44px; max-height: 140px; flex: 1; align-self: center; resize: none; padding: 9px 3px 7px; border: 0; outline: none !important; box-shadow: none !important; background: transparent; color: var(--ink); font-size: 13px; line-height: 1.5; }
.composer textarea::placeholder { color: #59666D; opacity: 1; }
.send-button { width: auto; min-width: 64px; height: 44px; flex: none; display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--accent-dark); border-radius: 0; background: var(--accent-dark); color: #fff; font: 11px var(--mono); text-transform: uppercase; }
.send-button:hover { border-color: var(--accent-dark); background: var(--accent-dark); }
.send-button:disabled { opacity: .55; cursor: default; }
.send-button span { font-size: 20px; line-height: 1; transform: translateY(-1px); }
.composer-hint { width: min(860px, 100%); display: flex; justify-content: space-between; gap: 8px; margin: 7px auto 0; color: var(--muted); font: 9px var(--mono); }
kbd { padding: 1px 4px; border: 1px solid var(--line); border-radius: 0; background: var(--panel); font: inherit; }

/* Functional dialogs and status messages */
.dialog { width: min(560px, calc(100vw - 28px)); max-height: 92vh; padding: 0; border: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--ink); box-shadow: 0 14px 40px #17232b24; overflow: auto; }
.dialog::backdrop { background: #17232bb5; }
.dialog form { display: grid; gap: 14px; padding: 22px; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.dialog-heading h2 { margin: 4px 0 0; color: var(--ink); font-size: 23px; line-height: .98; letter-spacing: -.055em; }
.eyebrow { margin: 0; color: var(--accent-dark); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.dialog-heading .icon-button { border: 1px solid var(--line); color: var(--ink); font-size: 20px; }
.dialog-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.quiet-action, .picker-item { min-height: 44px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: 10px var(--mono); text-transform: uppercase; }
.quiet-action:hover, .picker-item:hover { border-color: var(--accent); color: var(--accent-dark); }
.picker-list { display: grid; }
.picker-item { display: flex; justify-content: space-between; gap: 12px; border-width: 1px 0 0; text-align: left; text-transform: none; }
.picker-item span:last-child { color: var(--muted); font-size: 9px; }
.dialog form label { display: grid; gap: 6px; width: 100%; color: var(--ink); font: 10px var(--mono); text-transform: uppercase; }
.dialog form label span { color: var(--muted); font-weight: 400; }
.dialog input:not([type=checkbox]), .dialog form select { width: 100%; height: 42px; display: block; margin-top: 5px; padding: 8px 10px; border: 1px solid #aab7bb; border-radius: 0; background: #fff; color: var(--ink); font: 12px var(--sans); }
.dialog input::placeholder { color: #77858a; opacity: 1; }
.dialog form select { color-scheme: light; }
.dialog input[type="password"] { min-width: 0; }
.provider-current { margin-right: auto; color: var(--muted); font: 9px var(--mono); }
.dialog-note code { color: var(--ink); font-family: var(--mono); }
.team-preset-options { min-width: 0; display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.team-preset-card-list { display: grid; gap: 7px; max-height: 45vh; overflow-y: auto; }
.team-preset-options legend { margin-bottom: 2px; color: var(--ink); font: 10px var(--mono); text-transform: uppercase; }
.dialog form .team-preset-card { min-width: 0; display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; text-transform: none; cursor: pointer; }
.dialog form .team-preset-card:has(input:checked) { border-color: var(--accent); background: #fff8f5; box-shadow: inset 3px 0 var(--accent); }
.team-preset-card input[type="radio"] { width: 16px; height: 16px; flex: none; margin: 2px 0 0; accent-color: var(--accent-dark); }
.team-preset-copy { min-width: 0; display: grid; gap: 3px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.team-preset-copy strong { color: var(--ink); font-size: 12px; }
.team-preset-copy small { color: var(--muted); font: 9px/1.4 var(--mono); text-transform: none; }
.team-preset-copy strong em { margin-left: 4px; color: var(--accent-dark); font: 9px var(--mono); font-style: normal; text-transform: uppercase; }
.toast { position: fixed; z-index: 150; right: 18px; bottom: 18px; max-width: min(420px, calc(100vw - 36px)); padding: 11px 14px; transform: translateY(12px); border: 1px solid var(--dark-line); border-left: 3px solid var(--accent); border-radius: 0; background: var(--masthead); color: #f3f6f5; font-size: 11px; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.toast.visible { transform: translateY(0); opacity: 1; }
.toast.error { border-left-color: #f28a6c; }

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 220px minmax(0,1fr); }
  .sidebar { width: 220px; gap: 12px; padding: 13px 9px 10px; }
  .agent-item { min-height: 55px; gap: 7px; padding: 6px; }
  .agent-avatar { width: 30px; height: 30px; }
  .profile-copy strong, .profile-copy small { max-width: 135px; }
  .conversation-header { padding-inline: 14px; }
  .conversation-inner { padding: 15px 13px; }
  .message-row { max-width: 96%; gap: 7px; }
  .message-avatar { width: 25px; height: 25px; }
  .composer-area { padding: 9px 12px max(9px, env(safe-area-inset-bottom)); }
  .dialog form { padding: 18px; }
  .dialog-actions { flex-wrap: wrap; }
  .provider-current { flex-basis: 100%; }
}
@media (max-width: 600px) {
  .app-shell { grid-template-columns: minmax(0,1fr); grid-template-rows: 205px minmax(0,1fr); }
  .sidebar { width: 100%; min-height: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(52px,auto) minmax(0,1fr) auto; gap: 7px; padding: 8px 10px; border-right: 0; border-bottom: 1px solid #34444d; }
  .brand { height: 28px; }
  .sidebar-projects { max-height: none; }
  .sidebar-projects .project-list { max-height: 50px; flex-direction: row; overflow: auto; }
  .project-item { width: auto; }
  .sidebar-channels { min-height: 0; }
  .agent-list { flex-direction: row; gap: 5px; overflow-x: auto; overflow-y: hidden; }
  .agent-item { width: auto; min-height: 39px; flex: none; gap: 5px; padding: 4px 7px; }
  .agent-title em, .agent-preview { display: none; }
  .agent-title strong { font-size: 10px; }
  .agent-avatar { width: 25px; height: 25px; font-size: 12px; }
  .sidebar-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; }
  .profile-avatar { width: 26px; height: 26px; }
  .profile-copy strong, .profile-copy small { max-width: 135px; }
  .sidebar-settings { width: auto; min-height: 31px; }
  .conversation { grid-row: 2; }
  .conversation-header { min-height: 54px; gap: 8px; padding: 8px 13px; }
  .active-avatar { width: 29px; height: 29px; }
  .header-identity strong { font-size: 13px; }
  .header-identity span { max-width: 145px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .conversation-header .project-context { max-width: 30%; font-size: 8px; }
  .composer { min-height: 58px; gap: 3px; padding: 5px; }
  .composer-tool { width: 44px; height: 44px; }
  .composer textarea { font-size: 13px; }
  .send-button { min-width: 58px; height: 44px; padding: 0 9px; }
  .delegation-bar { gap: 6px; }
  .delegation-button { width: auto; flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}