/* Shared Kairos interface. Empryo supplies the spatial reference: floating
   context pills, open transcripts and a compact input. Paint stays entirely
   in the existing appearance system, including a person's custom dark base. */
:root {
  /* --ms-ios-nudge (style.css): an iPhone moves its top content a little further down. */
  --mobile-safe-top: calc(var(--native-safe-top, env(safe-area-inset-top, 0px)) + var(--ms-ios-nudge, 0px));
  --mobile-safe-right: var(--native-safe-right, env(safe-area-inset-right, 0px));
  --mobile-safe-bottom: var(--native-safe-bottom, env(safe-area-inset-bottom, 0px));
  --mobile-safe-left: var(--native-safe-left, env(safe-area-inset-left, 0px));
  --ui-round: 24px;
  --ui-control: 999px;
  --ui-surface: var(--bg-panel-solid);
  --ui-wash: color-mix(in srgb, var(--bg-panel-solid) 88%, var(--surface-2));
  --ui-line: color-mix(in srgb, var(--border) 80%, var(--hairline-soft));
  --ui-shadow: 0 2px 5px rgba(var(--shade-rgb), .035), 0 12px 30px rgba(var(--shade-rgb), .055);
}

/* App shell: the sidebar and the content area sit edge to edge with hard
   corners again, as before the 2026-10-12 mobile redesign floated them as
   rounded cards (David, 2026-10-14). The buttons, pills and controls inside
   keep their newer shapes; only these two containers went back. */
@media (min-width: 769px) {
  .view { padding: 28px 32px 36px; }
  .view.chat-layout, .view.forge-shell-view { padding: 0; }
}
.nav-item { border-radius: 14px; margin-bottom: 3px; }
.nav-item.active { box-shadow: inset 0 0 0 1px var(--hairline-soft); }
.sidebar-user-card { border-radius: 16px; padding: 10px 8px; }
.sidebar-avatar { width: 32px; height: 32px; background: var(--ui-surface); }
#sidebar-footer { border-color: var(--ui-line); }
.mobile-view-context { display: none; }
.view-header { flex-wrap: wrap; gap: 12px; padding: 0 0 20px; border: 0; margin-bottom: 16px; }
.view-header > div { min-width: 0; }
.view-header h2 { font-size: 36px; }
.view-header .sub { max-width: 65ch; line-height: 1.65; }

/* Shared panels and controls reach every built-in view and compatible tabs. */
.glass, .card, .dashboard-section, .library-section, .automation-card,
.agent-tile, .google-browser, .google-toolbar, .library-vault-browser,
.set-group, .cal-grid, .cal-day-panel {
  border-color: var(--ui-line); border-radius: var(--ui-round);
  background-color: var(--ui-surface);
}
.card, .dashboard-section, .automation-card, .agent-tile { box-shadow: var(--ui-shadow); }
.card { padding: 18px 20px; }
.card .title { font-size: 14px; font-weight: 500; }
.card .meta { line-height: 1.6; }
.card-row { gap: 14px; }
.btn { border-radius: var(--ui-control); padding: 8px 16px; min-height: 36px; }
.btn:not(.primary):not(.quiet):not(.danger):not(.forge-composer-send) { background: var(--ui-wash); }
.btn:hover { border-color: var(--hairline); }
input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select,
.custom-select-btn { border-radius: 14px; }
.custom-select-btn { background-color: var(--ui-wash); }
.segmented-tabs { padding: 5px; gap: 4px; border: 1px solid var(--ui-line); border-radius: var(--ui-control); background: var(--ui-wash); }
.segmented-tab { border-radius: var(--ui-control); padding: 8px 16px; }
.segmented-tab.active { background: var(--ui-surface); box-shadow: 0 2px 8px rgba(var(--shade-rgb), .07); }
.custom-select-menu, .model-picker-menu, .overflow-menu, .chat-reference-picker,
.panel-dialog, .modal-panel, .chat-summary-dialog {
  border-radius: 20px; border-color: var(--ui-line); background: var(--ui-surface);
  box-shadow: var(--shadow-elevated);
}
.permission-dialog { border-radius: 26px; border-color: var(--ui-line); max-height: 90dvh; overflow-y: auto; }
.overflow-menu-item, .model-picker-item, .custom-select-option { border-radius: 12px; }
.disclosure-panel { border-radius: 20px; }
.empty-state-rich { padding: 48px 24px; }

/* Home, collections and planning use the same surface rhythm. */
.dashboard-hero { border-radius: 30px; box-shadow: var(--ui-shadow); }
.dashboard-actions .primary { border-radius: var(--ui-control); padding: 12px 20px; }
.dashboard-section { padding: 20px; }
.dashboard-section-header { margin-bottom: 14px; }
.dashboard-section-header h2 { font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--text); }
.dashboard-row { padding: 10px 0; font-size: 13px; }
.dashboard-section-header .btn { min-height: 32px; }
.dashboard-stats { gap: 8px; }
.dashboard-stat { border-color: var(--ui-line); background: var(--ui-surface); }
.library-section-summary { padding: 20px; }
.library-document-card, .library-file-row, .library-chat-group, .google-account-line,
.google-file-row, .task-card, .task-board-card { border-radius: 18px; }
.library-document-card, .library-file-row { background: var(--ui-wash); }
.library-section-icon, .library-document-icon, .agent-avatar { border-radius: 14px; }
.automation-grid, .agent-grid, .document-grid { gap: 14px; }
.agent-tile, .automation-card { padding: 20px; }
.agent-status, .cal-event-pill, .set-pill { border-radius: var(--ui-control); }
.cal-grid { overflow: hidden; }
.cal-nav { gap: 8px; }

/* Settings preserves its row-based navigation and mobile back stack. */
.settings-window { border-radius: 26px; border-color: var(--ui-line); }
.settings-nav { background: var(--ui-wash); }
.settings-nav-item { border-radius: 14px; padding: 9px 12px; }
.settings-search { border-radius: var(--ui-control); }
.set-group { box-shadow: var(--ui-shadow); }
.set-row { padding: 16px 18px; }
.set-title { font-size: 24px; }
.set-section-title { font-size: 14px; }
.set-description { font-size: 13px; line-height: 1.65; }

/* Conversation and model are two context pills, outside the input. */
.chat-mobile-header {
  position: relative; z-index: 10; gap: 10px; padding: 14px 20px 10px;
  min-height: 84px; border: 0; background: transparent;
}
#chat-history-toggle {
  display: flex; align-items: center; gap: 10px; width: auto; min-width: 0;
  max-width: 320px; height: 58px; padding: 8px 14px 8px 8px; flex: 1 1 200px;
  border: 1px solid var(--ui-line); border-radius: var(--ui-control);
  background: var(--ui-surface); box-shadow: var(--ui-shadow); color: var(--text); text-align: left;
}
#chat-history-toggle:hover { background: var(--ui-wash); border-color: var(--hairline); }
#chat-history-toggle > svg { width: 12px; height: 12px; flex: none; color: var(--text-faint); }
.conversation-mark, .chat-author-mark {
  display: grid; place-items: center; flex: none; border-radius: 50%; color: var(--text);
}
.conversation-mark { width: 38px; height: 38px; background: var(--ui-wash); }
.conversation-mark svg { width: 36px; height: 36px; }
.conversation-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.chat-title { color: var(--text); font-size: 14px; font-weight: 550; line-height: 1.25; }
.conversation-caption { color: var(--text-faint); font-size: 11px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* One model control, one line (David, 2026-10-14: "a little off visually and
   UX"). It was two stacked buttons in a 58px pill with the chevron stranded at
   the far right. Now it matches the 44px context ring and tools button beside
   it; the conversation pill stays the taller, primary element. */
.chat-header-model.model-pill {
  position: relative; flex: 0 1 auto; display: flex; align-items: center;
  height: 44px; max-width: 300px; min-width: 0; padding: 0; border-radius: 999px;
  border: 1px solid var(--ui-line); background: var(--ui-surface); box-shadow: var(--ui-shadow);
}
.chat-header-model .model-picker-wrap { position: static; display: flex; width: 100%; height: 100%; min-width: 0; }
.chat-header-model .model-picker-btn {
  display: flex; align-items: center; width: 100%; max-width: 100%; min-width: 0; height: 100%; min-height: 0;
  border: 0; padding: 0 12px 0 14px; gap: 8px; background: transparent;
  color: var(--text); font-size: 13px; white-space: nowrap; text-align: left;
}
.chat-header-model #model-picker-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chat-header-model #model-picker-mark:empty { display: none; }
.chat-header-model .model-picker-btn > svg:last-child { flex: none; color: var(--text-faint); }
.chat-header-model .model-picker-menu {
  top: calc(100% + 10px); bottom: auto; right: 0;
  width: min(380px, calc(100vw - 24px)); min-width: min(280px, calc(100vw - 24px));
  max-height: min(480px, 70dvh); overflow-y: auto;
}
.chat-header-model .model-picker-btn:hover { background: var(--accent-dim); }
.model-picker-unified .model-version-section { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.model-picker-unified .model-picker-item[aria-current='true'] { font-weight: 550; }
.model-picker-unified .model-custom-details > summary { padding: 10px 12px; cursor: pointer; color: var(--text-dim); font-size: 12px; }
.model-picker-unified .model-add-item { margin-top: 6px; border-top: 1px solid var(--border); color: var(--accent); }
.chat-mobile-header > .chat-files-toggle,
.chat-mobile-header > .chat-documents-toggle,
.chat-mobile-header > .chat-summary-trigger { display: none; }
.chat-phone-tools { display: block; position: relative; flex: none; }
.chat-phone-tools > button {
  width: 44px; height: 44px; border: 1px solid var(--ui-line); border-radius: 50%;
  background: var(--ui-surface); box-shadow: var(--ui-shadow);
}
.chat-phone-tools .overflow-menu { top: calc(100% + 12px); bottom: auto; right: 0; left: auto; min-width: 230px; }

/* Open assistant prose, soft prompt bubbles and real progress disclosures. */
#chat-messages { padding: 26px 32px 24px; --chat-message-gap: 32px; gap: var(--chat-message-gap); }
#chat-messages .msg { font-size: 16px; line-height: 1.8; }
#chat-messages .chat-prose { font-size: 16px; }
.chat-layout > .chat-backdrop { opacity: .42; }
.msg.user .msg-body { padding: 16px 20px; border-radius: 24px 24px 8px 24px; background: var(--ui-wash); border-color: var(--ui-line); }
.chat-author { display: flex; align-items: center; gap: 9px; color: var(--text-dim); font-size: 13px; font-weight: 550; margin-bottom: 12px; }
.chat-author-mark { width: 28px; height: 28px; background: var(--ui-surface); }
.chat-author-mark svg { width: 28px; height: 28px; }
.chat-activity { border: 0; border-radius: 16px; background: var(--ui-wash); padding: 10px 14px; margin-bottom: 16px; max-width: 100%; }
.chat-activity summary { font-size: 12px; }
.chat-jump.btn { border-radius: var(--ui-control); background: var(--ui-surface); box-shadow: var(--ui-shadow); min-height: 40px; }

/* One stable, growing input. Overflow houses mode and Open Mic, while
   attachments, context, queued messages and permission notices stay live. */
.chat-composer-dock { width: min(calc(100% - 40px), var(--chat-column)); padding-bottom: 8px; }
.chat-input-bar {
  gap: 0 6px; align-items: center; padding: 8px; margin: 0;
  border: 1px solid var(--hairline-soft); border-radius: 30px;
  background: var(--ui-surface); box-shadow: var(--shadow-elevated);
}
.chat-input-bar:not(.forge-composer) { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; }
.chat-input-bar:focus-within { border-color: var(--accent); }
.chat-input-top { grid-column: 2; grid-row: 1; min-width: 0; }
#chat-input { font-size: 16px; min-height: 44px; padding: 9px 4px; line-height: 1.6; }
.chat-input-bar:not(.forge-composer) .chat-input-bottom,
.chat-input-bar:not(.forge-composer) .chat-input-left { display: contents; }
.chat-input-left > .overflow-wrapper { grid-column: 1; grid-row: 1; align-self: center; }
.chat-input-right { grid-column: 3; grid-row: 1; gap: 4px; flex-wrap: nowrap; margin: 0; }
.chat-input-left > #workspace-pill-slot, .chat-input-left > .context-pill,
.chat-input-left > .computer-watch { grid-column: 1 / -1; justify-self: start; margin: 6px 8px; }
#workspace-pill-slot:empty { display: none; }
.chat-input-bar .input-icon-btn, #chat-send { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%; }
#overflow-plus-btn { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--hairline-soft); }
#chat-mic { background: var(--ui-wash); }
#chat-send { background: var(--text); color: var(--bg-panel-solid); border: 0; }
#chat-send[data-mode=stop] { background: var(--danger); color: var(--bg-panel-solid); }
.chat-input-bar.border-beam::before, .chat-input-bar.border-beam::after { display: none; }
.composer-hint { padding: 8px 10px 2px; font-size: 10px; line-height: 1.4; }
.composer-menu-options { display: grid; gap: 8px; padding: 8px; }
.composer-menu-options .chat-permission-control { width: 100%; justify-content: space-between; margin: 0; height: 44px; border-radius: 12px; }
.composer-menu-options .chat-permission-control select { min-height: 44px; }
.composer-menu-options .chat-openmic-btn { display: flex; width: 100%; height: auto; min-height: 44px; gap: 10px; padding: 8px 10px; border-radius: 12px; font-size: 12px; text-align: left; }
.composer-menu-options .chat-openmic-btn[hidden] { display: none; }
.chat-input-bar .overflow-menu { min-width: 250px; max-width: calc(100vw - 24px); max-height: min(520px, 64dvh); overflow-y: auto; }

/* Forge, split chat and embedded composers inherit the same vocabulary. */
.forge-composer, .forge-transcript-composer, .side-chat-composer, .session-chat-composer {
  border-radius: 26px; border-color: var(--hairline-soft); background: var(--ui-surface); box-shadow: var(--ui-shadow);
}
.forge-composer.chat-input-bar { display: block; padding: 14px; }
.forge-composer .chat-input-bottom { gap: 10px; }
.forge-panel { border-radius: var(--ui-round); background: var(--ui-surface); border-color: var(--ui-line); box-shadow: var(--ui-shadow); }
.forge-prompt { border-radius: 22px 22px 8px 22px; padding: 14px 18px; background: var(--ui-wash); }
.forge-work-label { padding-block: 10px; }
.forge-session-card { border-radius: 16px; padding: 12px; }
.forge-surface-tab-group { border-radius: var(--ui-control); }
.forge-review-bar, .forge-turn-review { border-radius: 16px; }

@media (max-width: 768px) {
  .mobile-view-context {
    display: flex; align-items: center; gap: 8px; position: fixed;
    top: calc(var(--titlebar-h) + 14px + var(--mobile-safe-top));
    left: calc(64px + var(--mobile-safe-left)); right: max(16px, var(--mobile-safe-right));
    height: 44px; max-width: 300px; padding: 4px 14px 4px 6px; z-index: 54;
    border: 1px solid var(--ui-line); border-radius: var(--ui-control);
    background: var(--ui-surface); color: var(--text); box-shadow: var(--ui-shadow);
    font: inherit; text-align: left; cursor: pointer;
  }
  :root[data-view=chat] .mobile-view-context, :root[data-view=settings] .mobile-view-context,
  :root[data-view=forgeShell] .mobile-view-context { display: none; }
  .mobile-context-mark { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ui-wash); }
  .mobile-context-mark svg { width: 32px; height: 32px; }
  .mobile-context-copy { display: grid; flex: 1; gap: 1px; min-width: 0; }
  .mobile-context-copy strong { font-size: 13px; font-weight: 550; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-context-copy > span { font-size: 10px; color: var(--text-faint); line-height: 1.25; }
  .mobile-menu-btn { top: calc(var(--titlebar-h) + 14px + var(--mobile-safe-top)); border-radius: 50%; border-color: var(--ui-line); background: var(--ui-surface); box-shadow: var(--ui-shadow); backdrop-filter: none; }
  #sidebar, #chat-sessions { border-radius: 0 28px 28px 0; border-right: 1px solid var(--ui-line); }
  #sidebar.open, #chat-sessions.open { box-shadow: var(--shadow-lifted); }
  .nav-item { min-height: 48px; padding: 12px 14px; }
  .view { padding: 82px 16px max(24px, var(--mobile-safe-bottom)); }
  .view-header { gap: 12px; margin-bottom: 18px; }
  .view-header h2 { font-size: 34px; }
  .view-header > .btn, .view-header > .custom-select { flex: 0 1 auto; }
  .btn { min-height: 44px; padding: 10px 16px; }
  .card, .dashboard-section, .automation-card, .agent-tile { padding: 18px; }
  .card-row { flex-wrap: wrap; }
  .card .title { font-size: 15px; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select { font-size: 16px; }
  .segmented-tabs { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .segmented-tab { min-height: 44px; white-space: nowrap; flex: none; padding: 10px 16px; }
  .dashboard { padding: 82px 16px max(24px, var(--mobile-safe-bottom)); }
  .dashboard-hero { min-height: 360px; padding: 20px; border-radius: 28px; }
  .dashboard-intro { padding-top: 24px; }
  .dashboard-intro h1 { font-size: 42px; }
  .dashboard-grid { gap: 16px; }
  .dashboard-section-header .btn { min-height: 44px; }
  .dashboard-row { min-height: 44px; font-size: 14px; }
  .library-section-summary { padding: 18px; }
  .document-grid { padding: 12px; }
  .agent-grid { grid-template-columns: minmax(0, 1fr); }
  .set-row { padding: 16px; }
  .settings-mobile-page .settings-titlebar { border: 0; background: var(--bg); }
  .settings-mobile-page .settings-nav-item { border-radius: 18px; min-height: 54px; background: var(--ui-surface); margin-bottom: 6px; border: 1px solid var(--ui-line); }
  .settings-mobile-page .set-title { font-size: 24px; }
  .settings-mobile-page .set-description { font-size: 14px; }
  .settings-mobile-page .set-group { border-radius: 22px; }
  .chat-layout.view { padding: 0; }
  .chat-mobile-header {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
    gap: 6px; padding: 8px 12px 8px 64px; min-height: 78px; background: transparent;
  }
  #chat-history-toggle { width: 100%; max-width: none; height: 60px; padding: 8px 10px; gap: 4px; }
  .conversation-mark { display: none; }
  .chat-title { font-size: 13px; }
  .conversation-caption { font-size: 10px; }
  .chat-header-model.model-pill { width: 100%; max-width: none; min-width: 0; height: 60px; padding: 0; border-radius: var(--ui-control); }
  .chat-header-model .model-picker-btn { padding: 0 10px; font-size: 12px; gap: 5px; }
  /* Stacked here so a narrow pill still shows which version is in use. */
  .chat-header-model #model-picker-label { display: grid; gap: 2px; line-height: 1.2; }
  .chat-header-model .model-label-sep { display: none; }
  .chat-header-model .model-label-name, .chat-header-model .model-label-version { overflow: hidden; text-overflow: ellipsis; }
  .chat-header-model .model-label-version { font-size: 10px; color: var(--text-faint); }
  .chat-header-model .model-picker-wrap { min-width: 0; }
  .chat-header-model .model-picker-menu { right: -50px; max-height: min(400px, 55dvh); }
  .chat-phone-tools { align-self: center; }
  .chat-mobile-header .chat-phone-tools > button { border-radius: 50%; }
  #chat-messages { padding: 24px 20px 18px; --chat-message-gap: 32px; gap: var(--chat-message-gap); scrollbar-gutter: auto; }
  .msg.user .msg-body { max-width: 92%; padding: 14px 18px; }
  .msg-actions { opacity: 1; flex-wrap: wrap; gap: 6px; }
  .msg-actions .msg-action-btn { min-height: 36px; padding-inline: 10px; }
  .chat-author { margin-bottom: 12px; font-size: 13px; }
  .chat-composer-dock { width: calc(100% - 24px); padding-bottom: max(8px, var(--mobile-safe-bottom)); }
  .chat-input-bar { padding: 6px; border-radius: 30px; gap: 0 4px; }
  #chat-input { max-height: min(180px, 25dvh); }
  .chat-input-right { flex-wrap: nowrap; flex-shrink: 0; gap: 2px; }
  .composer-hint { padding-block: 6px 0; }
  .overflow-menu-item, .model-picker-item, .custom-select-option { min-height: 44px; }
  .forge-transcript-composer { width: calc(100% - 20px); margin-bottom: max(10px, var(--mobile-safe-bottom)); }
  .forge-transcript-document { padding: 12px 4px 24px; }
  .forge-prose.chat-prose { font-size: 16px; line-height: 1.75; }
  .forge-prompt { font-size: 15px; line-height: 1.7; }
  .forge-composer.chat-input-bar { padding: 12px; }
  .forge-composer.chat-input-bar .custom-select-btn { min-height: 44px; height: 44px; }
  .forge-session-header .btn, .forge-transcript-footer .btn, .forge-composer-chips .custom-select-btn { min-height: 44px; height: 44px; }
}
@media (max-width: 360px) {
  .chat-mobile-header { padding-left: 60px; padding-right: 8px; gap: 4px; }
  #chat-history-toggle { padding: 8px; }
  .chat-title { font-size: 12px; }
  .chat-header-model #model-picker-mark { display: none; }
  #chat-messages { padding-inline: 16px; }
}
@media (max-height: 500px) and (max-width: 768px) {
  .chat-mobile-header { padding-block: 4px; min-height: 60px; }
  .chat-header-model.model-pill { height: 52px; }
  .chat-header-model .model-picker-wrap { flex: 1; }
  #chat-history-toggle { height: 52px; }
  .composer-hint { display: none; }
  .chat-composer-dock { padding-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-input-bar, .card, .nav-item, .segmented-tab { transition: none; }
}

/* Kairos refinement: quiet page chrome, precise controls and one bottom dock. */
#app [hidden] { display: none !important; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; }
.btn > svg, button > svg { display: block; flex-shrink: 0; }
.input-icon-btn, .sidebar-settings-btn, .chat-phone-tools > button {
  display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
}
.input-icon-btn:not(#chat-history-toggle):not(.chat-history-close):not(.chat-openmic-btn) { aspect-ratio: 1; }
.chat-input-bar .input-icon-btn, #chat-send { padding: 0; }
.chat-history-close { padding: 8px 12px; }
.chat-header-model .model-picker-btn { border-radius: inherit; }
.chat-header-model .model-picker-wrap:first-child { border-radius: inherit; }
.context-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: none; min-height: 44px; padding: 8px 10px; border: 1px solid var(--ui-line);
  border-radius: 50px; background: var(--ui-surface); color: var(--text-dim); cursor: pointer;
}
.context-pill:hover { background: var(--ui-wash); }
.context-pill .context-ring { width: 24px; height: 24px; }
.composer-menu-options .composer-hint { text-align: left; font-size: 12px; padding: 8px 10px; }
.composer-menu-options .chat-permission-notice { padding: 8px 10px; text-align: left; }
.composer-menu-options .computer-watch { width: 100%; justify-content: flex-start; }
.chat-composer-dock { padding-bottom: 12px; }
.view-header h2, .set-title { letter-spacing: -.025em; }
.card, .dashboard-section, .library-section, .automation-card, .agent-tile, .set-group { border-radius: 20px; }
.nav-item { border-radius: 12px; }
.set-group > .set-row:first-child { border-top-left-radius: 19px; border-top-right-radius: 19px; }
.set-group > .set-row:last-child { border-bottom-left-radius: 19px; border-bottom-right-radius: 19px; }
.set-group > .set-row:only-child { border-radius: 19px; }
/* A highlight paints inside exactly the same outline as its control. */
.btn::before, .btn::after, .input-icon-btn::before, .input-icon-btn::after,
.nav-item::before, .nav-item::after { border-radius: inherit; }
.btn:hover, .input-icon-btn:hover { background-clip: padding-box; }
@media (hover: none) {
  .btn:not(.primary):not(.danger):hover, .input-icon-btn:hover { background-color: var(--ui-wash); }
}
@media (max-width: 768px) {
  /* Phones dock the composer at the bottom, where the keyboard rises to meet
     it. Scoped to this breakpoint deliberately: unscoped, these two beat
     style.css's `#chat-main.is-empty` rules on source order alone and left
     the desktop new-chat composer pinned to the bottom instead of centred
     (caught by ui-smoke's "New-chat composer is centered"). */
  #chat-main.is-empty #chat-messages { flex: 1; }
  #chat-main.is-empty .chat-composer-dock { margin-block: 0; margin-inline: auto; }
  .mobile-view-context { display: none !important; }
  .view:not(.chat-layout):not(.settings-mobile-page):not(.forge-shell-view) { padding-top: calc(20px + var(--mobile-safe-top)); }
  .view:not(.chat-layout) .view-header:first-child > div > h2 { padding-left: 54px; min-height: 44px; }
  .view.dashboard:not(.chat-layout):not(.settings-mobile-page):not(.forge-shell-view) { padding-top: calc(80px + var(--mobile-safe-top)); }
  #sidebar .sidebar-header { padding-left: 0; padding-right: 46px; }
  #sidebar #brand { padding-left: 2px; }
  .mobile-menu-btn { padding: 0; display: grid; place-content: center; gap: 4px;
    transition: transform .22s ease, background-color .22s ease;
    transform: translateX(var(--menu-travel, 0px)); }
  .mobile-menu-open .mobile-menu-btn { --menu-travel: calc(min(78vw, 300px) - 56px - max(12px, var(--mobile-safe-left))); --menu-progress: 1; }
  .menu-stroke { display: block; width: 18px; height: 1.5px; border-radius: 2px; background: currentColor;
    transition: transform .22s ease, opacity .22s ease; }
  .menu-stroke:first-child { transform: translateY(calc(var(--menu-progress, 0) * 5.5px)) rotate(calc(var(--menu-progress, 0) * 45deg)); }
  .menu-stroke:nth-child(2) { opacity: calc(1 - var(--menu-progress, 0)); }
  .menu-stroke:last-child { transform: translateY(calc(var(--menu-progress, 0) * -5.5px)) rotate(calc(var(--menu-progress, 0) * -45deg)); }
  .mobile-menu-btn.menu-dragging, .menu-dragging .menu-stroke { transition: none; }
  .chat-mobile-header { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px 44px;
    align-items: center; min-height: 70px; gap: 5px; padding: 10px 10px 10px 64px; }
  .chat-mobile-header:has(.context-pill[hidden]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
  #chat-history-toggle, .chat-header-model.model-pill { height: 48px; box-shadow: none; }
  .chat-header-model .model-picker-btn { padding-inline: 8px; }
  .conversation-caption { display: none; }
  .context-pill { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; }
  .context-pill:has(.context-ring) .context-text { display: none; }
  .context-pill:not(:has(.context-ring)) { font-size: 9px; }
  .context-pill .context-ring { width: 28px; height: 28px; }
  #chat-history-toggle > svg { width: 9px; }
  .chat-phone-tools .overflow-menu { max-width: calc(100vw - 24px); }
  #chat-messages { padding-top: 18px; }
  .chat-composer-dock { padding-bottom: calc(16px + var(--mobile-safe-bottom)); }
  .chat-header-model .model-picker-menu { position: fixed; top: calc(76px + var(--mobile-safe-top)); right: 12px; }
}
@media (max-width: 360px) {
  .chat-mobile-header { padding-left: 60px; gap: 3px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px 44px; }
  #chat-history-toggle { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu-btn, .menu-stroke { transition: none; }
}

/* Menus and settings rows have their own geometry, rather than inheriting
   the dimensions of circular composer icons. */
.chat-header-model .model-picker-menu { z-index: 80; }
.chat-camera-action { display: none; }
.chat-input-bar #overflow-menu { width: 224px; min-width: 0; padding: 6px; }
.composer-menu-options { gap: 4px; padding: 4px 0; }
.composer-menu-options .chat-openmic-btn {
  aspect-ratio: auto; width: 100%; height: 44px; min-height: 44px;
  justify-content: flex-start; padding: 0 10px; font-size: 13px;
}
.composer-menu-options .chat-openmic-btn > svg { width: 18px; height: 18px; }
.composer-menu-options .chat-permission-control { padding: 0 8px 0 10px; gap: 8px; font-size: 13px; }
.composer-menu-options .chat-permission-control select { min-width: 84px; height: 44px; font-size: 13px; }
.composer-extra-tools > summary, .composer-input-help > summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; padding: 8px 10px; border-radius: 12px;
  font-size: 13px; color: var(--text-dim); cursor: pointer; list-style: none;
}
.composer-extra-tools > summary::-webkit-details-marker,
.composer-input-help > summary::-webkit-details-marker { display: none; }
.composer-extra-tools > summary::after, .composer-input-help > summary::after { content: '›'; font-size: 20px; }
.composer-extra-tools[open] > summary::after, .composer-input-help[open] > summary::after { transform: rotate(90deg); }
.composer-extra-tools > summary:hover, .composer-input-help > summary:hover { background: var(--ui-wash); }
.composer-input-help .composer-hint { text-align: left; padding: 6px 10px; }
.cal-calendars-trigger { align-self: flex-start; }
.cal-calendars-trigger svg { width: 18px; height: 18px; }
.cal-calendars-dialog { width: min(400px, calc(100vw - 24px)); }
.cal-calendars-dialog .cal-calendar-list { display: grid; align-items: stretch; gap: 8px; margin: 0; }
.cal-calendars-dialog .cal-calendar-list > strong { display: none; }
.cal-calendars-dialog .cal-calendar-choice {
  min-height: 44px; padding: 10px 12px; gap: 12px; border-radius: 12px;
  background: var(--ui-wash); font-size: 14px; overflow-wrap: anywhere;
}
.cal-calendars-dialog .cal-calendar-choice input { flex: none; }
.settings-nav-item { display: flex; align-items: center; text-align: left; width: 100%; }
.settings-nav-icon { display: grid; place-items: center; flex: none; width: 20px; }
.settings-titlebar-btn { display: grid; place-items: center; padding: 0; line-height: 1; }
@media (max-width: 768px) {
  .modal-backdrop > .panel-dialog.cal-calendars-dialog {
    width: calc(100vw - 32px); max-width: 400px; height: auto; max-height: 70dvh;
    padding: 16px; border-radius: 24px;
  }
  :root.chat-history-open #mobile-menu-btn { visibility: hidden; pointer-events: none; }
  #chat-sessions .mobile-drawer-heading { position: relative; padding-right: 56px; }
  #chat-sessions .chat-history-close {
    display: flex; position: absolute; top: 0; right: 0;
    justify-content: center; align-items: center; width: 44px; height: 44px;
    padding: 0; margin: 0; border: 1px solid var(--ui-line);
    border-radius: 50%; background: var(--ui-wash); color: var(--text);
  }
  .chat-history-close svg { width: 18px; height: 18px; }
  .chat-camera-action { display: flex; }
  .composer-extra-tools > .overflow-menu-item:first-of-type { display: none; }
  .settings-mobile-page .settings-nav { padding: 12px 16px max(28px, var(--mobile-safe-bottom)); }
  .view.settings-mobile-page { padding: 0; }
  .settings-mobile-page .settings-titlebar { min-height: 70px; padding: 10px 16px 10px 64px; }
  .settings-mobile-page .settings-titlebar .title { min-height: 44px; }
  .settings-mobile-page .settings-mobile-back { width: 44px; height: 44px; flex: none; }
  .settings-mobile-page .settings-nav-block {
    display: grid; gap: 6px; border: 0; border-radius: 0; background: transparent; overflow: visible;
  }
  .settings-mobile-page .settings-nav-item {
    display: flex; width: 100%; min-height: 54px; padding: 12px 14px;
    margin: 0; gap: 12px; border: 1px solid var(--ui-line); border-radius: 16px;
    background: var(--ui-surface); font-size: 15px;
  }
  .settings-mobile-page .settings-nav-item:hover,
  .settings-mobile-page .settings-nav-item:active { background: var(--ui-wash); }
  .settings-mobile-page .settings-nav-icon { width: 20px; height: 20px; }
  .settings-mobile-page .settings-search { border-radius: 16px; }
  .settings-mobile-page .settings-nav-group { padding-left: 2px; }
}

/* Full-bleed phone pages scroll beneath the status bar, while each fixed
   header/overlay reserves its own safe area. Native WKWebView supplies the
   insets when WebKit's environment values are unavailable. */
@media (max-width: 768px) {
  html::after {
    content: ''; position: fixed; inset: 0 0 auto; z-index: 11000;
    height: calc(var(--mobile-safe-top) + 10px); pointer-events: none;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    mask-image: linear-gradient(to bottom, var(--text) 0, var(--text) var(--mobile-safe-top), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, var(--text) 0, var(--text) var(--mobile-safe-top), transparent 100%);
  }
  /* Scroll remains available by touch, mouse wheel and keyboard. */
  *, *::before, *::after { scrollbar-width: none; }
  *::-webkit-scrollbar { display: none; width: 0; height: 0; }
  #chat-messages { scrollbar-width: thin; }
  #chat-messages::-webkit-scrollbar { display: block; width: 4px; height: 4px; }
  #chat-main { padding-top: var(--mobile-safe-top); }
  .chat-layout.view { overflow: hidden; }
  .library-editor > .view-header { padding-left: 54px; }
  .view.forge-shell-view { padding-top: calc(72px + var(--mobile-safe-top)); }
  .forge-project-sidebar {
    padding: var(--mobile-safe-top) var(--mobile-safe-right) var(--mobile-safe-bottom) var(--mobile-safe-left);
  }
  .settings-mobile-page .settings-titlebar { padding-top: calc(10px + var(--mobile-safe-top)); flex-shrink: 0; }
  .modal-backdrop > .panel-dialog {
    padding: calc(16px + var(--mobile-safe-top)) max(16px, var(--mobile-safe-right))
      calc(16px + var(--mobile-safe-bottom)) max(16px, var(--mobile-safe-left));
  }
  .artifact-panel {
    padding-top: var(--mobile-safe-top); padding-bottom: var(--mobile-safe-bottom);
    padding-left: var(--mobile-safe-left); padding-right: var(--mobile-safe-right);
  }
  #chat-progress-host {
    top: calc(var(--titlebar-h) + 76px + var(--mobile-safe-top));
    right: max(12px, var(--mobile-safe-right));
    max-width: calc(100vw - 24px - var(--mobile-safe-left) - var(--mobile-safe-right));
    max-height: calc(100dvh - var(--titlebar-h) - 88px - var(--mobile-safe-top) - var(--mobile-safe-bottom));
  }
  /* Drawers own the phone surface while open, including their backdrops. */
  :root.mobile-menu-open #chat-progress-host,
  :root.chat-history-open #chat-progress-host { visibility: hidden; }
  .chat-summary-backdrop {
    padding-top: calc(20px + var(--mobile-safe-top)); padding-bottom: calc(20px + var(--mobile-safe-bottom));
  }
  .chat-summary-dialog { max-height: min(690px, calc(100dvh - 40px - var(--mobile-safe-top) - var(--mobile-safe-bottom))); }
}
@media (prefers-reduced-transparency: reduce) and (max-width: 768px) {
  html::after { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* Agent profile (2026-10-13): fixed sheet covers the work area so its drafts
   remain mounted while the underlying agent changes state. */
.agent-inbox-host:not([hidden]) { margin-top: 14px; }
.agent-profile-backdrop:not([hidden]) { position: fixed; inset: 0; z-index: 1190; background: var(--scrim); animation: agent-scrim-in 220ms ease-out both; }
.agent-profile-sheet:not([hidden]) { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1191;
  display: flex; flex-direction: column; width: min(420px, 42vw); box-sizing: border-box;
  background: var(--bg-panel-solid); color: var(--text); box-shadow: -16px 0 48px rgba(var(--shade-rgb), .2);
  border-radius: 20px 0 0 20px; font-family: Jost, sans-serif; animation: agent-sheet-in 220ms cubic-bezier(.22, 1, .36, 1) both; }
.agent-profile-sheet.is-closing:not([hidden]) { animation: agent-sheet-out 220ms ease-in both; }
.agent-profile-backdrop.is-closing:not([hidden]) { animation: agent-scrim-out 220ms ease-in both; }
@keyframes agent-sheet-in { from { opacity: .7; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes agent-sheet-out { to { opacity: .7; transform: translateX(28px); } }
@keyframes agent-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes agent-scrim-out { to { opacity: 0; } }
.agent-profile-sheet[hidden], .agent-profile-backdrop[hidden] { display: none; }
.agent-profile-top { display: flex; flex-direction: column; align-items: stretch; padding: 20px 20px 0; }
.agent-profile-top > .btn { align-self: flex-end; margin-top: 8px; }
.agent-profile-titlebar { display: flex; align-items: center; gap: 14px; }
.agent-profile-titlebar h2 { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.agent-profile-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 12px 20px 0; }
.agent-profile-tabs::before { content: ''; position: absolute; inset: 5px auto 5px 5px; width: calc(50% - 7px); border-radius: var(--ui-control);
  background: var(--ui-surface); box-shadow: var(--ui-shadow); transition: transform 220ms cubic-bezier(.22, 1, .36, 1); }
.agent-profile-tabs[data-active="library"]::before { transform: translateX(calc(100% + 4px)); }
.agent-profile-tabs .agent-profile-tab { position: relative; z-index: 1; border: 0; background: transparent; color: var(--text-dim); cursor: pointer; }
.agent-profile-tabs .agent-profile-tab.active { color: var(--text); box-shadow: none; background: transparent; }
.agent-profile-body { overflow: auto; min-height: 0; padding: 18px 20px 30px; }
.agent-profile-details, .agent-profile-all { display: flex; flex-direction: column; gap: 14px; }
.agent-profile-section-body { display: flex; flex-direction: column; }
.agent-profile-details[hidden], .agent-profile-library[hidden], .agent-profile-all[hidden], .agent-profile-tabs[hidden],
.agent-profile-section[hidden], .agent-profile-top > .btn[hidden] { display: none; }
/* The child selector above outranks interface.css's base .btn display rule. */
.agent-profile-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.agent-profile-field { min-width: 0; }
.agent-profile-field input, .agent-profile-field textarea, .agent-profile-field select { width: 100%; box-sizing: border-box; }
.agent-profile-field input[type="checkbox"] { width: auto; align-self: flex-start; }
.agent-profile-counter { align-self: flex-end; font-variant-numeric: tabular-nums; }
.agent-profile-counter[hidden], .agent-profile-conflict[hidden], .agent-profile-drift[hidden], .agent-profile-drift .is-error[hidden] { display: none; }
.agent-profile-conflict, .agent-profile-drift { padding: 10px; border: 1px solid var(--warn); border-radius: 12px; background: color-mix(in srgb, var(--warn) 10%, var(--bg-panel-solid)); }
.agent-profile-conflict .btn { margin-top: 7px; }

.agent-profile-section { margin: 0; }
.agent-profile-section > summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 2px; cursor: pointer; list-style: none; }
.agent-profile-section > summary::-webkit-details-marker { display: none; }
.agent-profile-chevron { font-size: 22px; color: var(--text-dim); transition: transform 220ms cubic-bezier(.22, 1, .36, 1); }
.agent-profile-section[open] .agent-profile-chevron { transform: rotate(90deg); }
.agent-profile-section-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-profile-section-body > .btn { align-self: flex-end; margin: 12px 14px; }
.agent-profile-section-body > :not(.set-row):not(.btn):not(.agent-avatar-picker) { padding: 12px 16px; }
.agent-profile-details > .btn { align-self: flex-start; }
.agent-profile-details > .btn.primary { align-self: flex-end; }
.agent-profile-details .set-section { margin-bottom: 4px; }
.agent-profile-details .set-group > .agent-avatar-picker { border: 0; border-radius: 0; box-shadow: none; }
.agent-profile-identity { border: 0; border-radius: 0; box-shadow: none; }
/* 2026-10-14: keep the shared model picker's controls and poll semantics;
   only arrange its existing labels as the Settings kit's paired rows. */
.agent-model-picker { border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-surface); overflow: hidden; }
.agent-model-picker > label.agent-profile-field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 12px; align-items: center; min-height: 56px; padding: 12px 16px; margin: 0; }
.agent-model-picker > label.agent-profile-field + label.agent-profile-field { border-top: 1px solid var(--ui-line); }
.agent-model-picker > label.agent-profile-field > span { color: var(--text); font-size: 13px; }
.agent-model-picker > label.agent-profile-field > :is(input, select) { width: 100%; min-width: 0; }
.agent-model-picker > .agent-model-summary { margin: 0; padding: 12px 16px; border-top: 1px solid var(--ui-line); color: var(--text-dim); }
.agent-profile-section-body > .agent-model-picker { border: 0; border-radius: 0; }
.agent-profile-file-text { max-height: 180px; overflow: auto; white-space: pre-wrap; font-size: 12px; }
.agent-profile-file { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.agent-profile-file img { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; }
.agent-profile-file-icon { width: 54px; text-align: center; font-size: 26px; }
.agent-draft-notice { color: var(--warn); margin: 0 0 8px; font-size: 12px; }
@media (max-width: 768px) {
  .agent-profile-sheet:not([hidden]) { width: 100vw; max-width: none; border-radius: 0; }
  .agent-profile-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .agent-model-picker > label.agent-profile-field { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .agent-profile-sheet, .agent-profile-backdrop, .agent-profile-tabs::before, .agent-profile-chevron { transition: none !important; animation: none !important; }
}

/* Unit 4-iii, 2026-10-14: the creation surface outranks the shared panel
   width and height rules above, which otherwise cap it at 480px and 80vh. */
.modal-backdrop > .panel-dialog.agent-create-dialog { width: min(900px, calc(100vw - 32px)); max-width: 900px;
  height: min(760px, 94dvh); max-height: 94dvh; border-radius: 20px; font-family: Jost, sans-serif; }
.modal-backdrop:not(.hidden) > .panel-dialog.agent-create-dialog { animation: agent-create-in 200ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes agent-create-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.agent-create-dialog .modal-body { flex: 1; }
.agent-create-body { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; }
.agent-create-nav { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 4px; }
.agent-create-nav button { border: 0; border-radius: 12px; padding: 9px 10px; background: transparent; color: var(--text-dim);
  text-align: left; font: inherit; cursor: pointer; }
.agent-create-nav button:hover, .agent-create-nav button:focus-visible { background: var(--ui-wash); color: var(--text); }
.agent-create-nav button.active { color: var(--text); background: var(--ui-wash); box-shadow: inset 3px 0 0 var(--accent); }
.agent-create-sections { min-width: 0; }
.agent-create-section { scroll-margin-top: 12px; padding: 0 0 24px; margin: 0 0 24px; border-bottom: 1px solid var(--ui-line); }
.agent-create-section h3 { margin: 0 0 10px; font-size: 19px; font-weight: 500; }
.agent-create-section .agent-create-field.set-row { min-width: 0; margin: 0; }
.agent-create-field .set-row-control { min-width: 0; }
.agent-create-field input, .agent-create-field textarea { box-sizing: border-box; width: 100%; }
.agent-create-field textarea { resize: vertical; }
.agent-create-count { align-self: flex-end; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.agent-create-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.agent-create-preset { display: flex; flex-direction: column; gap: 4px; min-height: 68px; padding: 10px 12px; text-align: left;
  border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-wash); color: var(--text); font: inherit; cursor: pointer; }
.agent-create-preset strong { font-size: 13px; font-weight: 600; }
.agent-create-preset span { font-size: 11px; line-height: 1.4; color: var(--text-dim); }
.agent-create-preset[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.agent-create-preset:focus-visible, .agent-profile-sheet :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.agent-create-identity-grid { display: grid; grid-template-columns: minmax(0, 1fr) 108px; gap: 18px; }
.agent-create-preview { padding-top: 20px; }
.agent-create-cadence { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agent-create-cadence input { max-width: 140px; }
.agent-create-cadence [hidden] { display: none; }
.agent-create-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; width: 100%; }
.agent-create-validity { margin: 0 auto 0 0; font-size: 12px; color: var(--text-dim); }
.agent-create-notice { border: 1px solid var(--warn); border-radius: 12px; padding: 10px 14px; background: var(--ui-wash); }
.agent-chat-honesty { grid-column: 2; margin: 0 0 -6px; color: var(--text-faint); font-size: 12px; }
.agent-chat:has(.agent-chat-honesty) { grid-template-rows: auto minmax(0, 1fr); }
.agent-chat:has(.agent-chat-honesty) .agent-chat-side { grid-row: 1 / 3; }
.agent-chat-honesty + .agent-chat-main { grid-column: 2; }
.agent-turn-working { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: 20px;
  background: var(--ui-wash); }
.agent-turn-working[hidden], .agent-turn-heading[hidden] { display: none; }
.agent-turn-heading { display: flex; align-items: center; gap: 9px; }
.agent-turn-verb { font-weight: 500; }
.agent-turn-elapsed { margin-left: auto; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.agent-turn-step { margin: 8px 0 0 46px; border-left: 2px solid var(--ui-line); padding: 4px 8px; font-size: 12px; }
.agent-turn-step.is-failed { border-color: var(--danger); }
.agent-turn-step summary { cursor: pointer; }
.agent-turn-step pre { overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; }
@media (max-width: 768px) {
  /* Outrank interface.css's shared phone panel and preserve full scrolling. */
  .modal-backdrop > .panel-dialog.agent-create-dialog { width: 100vw; max-width: 100vw; height: var(--ms-page-height); max-height: var(--ms-page-height); border-radius: 0; }
  .agent-create-body { display: block; }
  .agent-create-nav { position: sticky; z-index: 1; top: 0; flex-direction: row; overflow-x: auto; background: var(--ui-surface); }
  .agent-create-nav button.active { box-shadow: inset 0 -3px 0 var(--accent); }
  .agent-create-presets { grid-template-columns: minmax(0, 1fr); }
  .agent-create-identity-grid { grid-template-columns: minmax(0, 1fr) 84px; gap: 8px; }
  .agent-create-footer { flex-wrap: wrap; }
  .agent-chat-honesty, .agent-chat-honesty + .agent-chat-main { grid-column: 1; }
  .agent-chat:has(.agent-chat-honesty) { grid-template-rows: auto auto minmax(0, 1fr); }
  .agent-chat:has(.agent-chat-honesty) .agent-chat-side { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-turn-working, .agent-turn-working *, .modal-backdrop:has(> .agent-create-dialog),
  .modal-backdrop > .panel-dialog.agent-create-dialog { animation: none !important; transition: none !important; }
}
/* The liquid morph between the conversation pill and the panel (2026-10-14).
   Blobs are flat surface under chat.js's #kairos-goo filter, which supplies
   the merged outline and its shadow; the title rides above, unfiltered. */
.chat-history-goo-wrap { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.chat-history-goo { position: fixed; filter: url(#kairos-goo); }
.chat-history-goo-blob { position: absolute; background: var(--ui-surface); }
.chat-history-goo-title { position: fixed; display: flex; align-items: center; gap: 10px; box-sizing: border-box;
  height: 58px; max-width: 320px; padding: 8px 14px 8px 8px; white-space: nowrap; overflow: hidden;
  color: var(--text); text-align: left; background: none; border: 0; box-shadow: none; }

/* Agents, 2026-10-14: the paper roster leads with faces and readable work.
   Scope buttons below to outrank interface.css's later base .btn display and
   dimensions; hidden picker and reply controls must stay hidden on phones. */
.agent-dot-avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; max-width: 100%; aspect-ratio: 1; }
.agent-dot-avatar img { display: block; width: 100%; height: 100%; object-fit: contain; }
.agents-view { min-width: 0; }
.agents-view > .view-header { margin-bottom: 24px; }
.agents-view > .view-header h2 { font-size: clamp(32px, 4vw, 48px); }
.agents-view .agent-roster-title { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
.agents-view .agent-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 275px), 1fr)); gap: 16px; margin: 0 0 28px; }
/* 2026-10-14: interface.css loads last; these scoped selectors outrank its
   shared card paint so every roster and team tile follows Appearance. */
.agents-view .agent-tile { min-width: 0; min-height: 210px; padding: 20px; border: 1px solid var(--ui-line); border-radius: 20px;
  background: var(--ui-surface); box-shadow: var(--ui-shadow); color: var(--text); transition: transform .18s ease, box-shadow .18s ease; }
.agents-view .agent-tile:hover { transform: translateY(-2px); box-shadow: 0 13px 29px rgba(var(--shade-rgb), .12); }
.agents-view .agent-tile:focus-visible, .agents-view .agent-tab:focus-visible,
.agent-avatar-picker :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.agents-view .agent-tile-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.agents-view .agent-tile-name { width: 100%; }
.agents-view .agent-tile-name .title { font-size: 19px; line-height: 1.25; }
.agents-view .agent-tile-name .meta { min-height: 2.8em; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; font-size: 13px; }
.agents-view .agent-tile-foot { margin-top: auto; }
.agent-status-line { display: inline-block; padding: 3px 0 3px 12px; border-left: 4px solid var(--border-strong); color: var(--text-dim);
  font-size: 13px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
/* Kairos tokens, per the spec: accent needs you, success green works, muted waits (2026-10-14). */
.agent-status-line.agent-status-needs_you { border-color: var(--accent); color: var(--accent); }
.agent-status-line.agent-status-working { border-color: var(--success); color: var(--success); }
.agent-status-line.agent-status-teammate, .agent-status-line.agent-status-queued { border-color: var(--text-dim); color: var(--text-dim); }
.agent-status-line.agent-status-off { border-color: var(--text-faint); color: var(--text-faint); }
.agents-view .agent-new-card { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--border-strong);
  background: var(--ui-wash); color: var(--text); font-size: 17px; font-weight: 600; text-align: center; }
.agents-view .agent-inbox-host:not([hidden]) { margin: 0 0 30px; }
.agents-view .agent-inbox { padding: 18px 22px; border-radius: 20px; background: var(--ui-surface); }
.agents-view .agent-inbox > .title { margin-bottom: 10px; font-size: 17px; }
.agents-view .agent-inbox-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px;
  padding: 12px 0; border: 0; border-top: 1px solid var(--ui-line); border-radius: 0; background: transparent; }
.agents-view .agent-inbox-head { grid-column: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.agents-view .agent-inbox-title { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 600; }
.agents-view .agent-inbox-kind { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.agents-view .agent-inbox-time { margin-left: auto; white-space: nowrap; }
.agents-view .agent-inbox-body { grid-column: 1; color: var(--text-dim); line-height: 1.45; }
.agents-view .agent-inbox-actions { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; gap: 5px; }
.agents-view .agent-inbox-compose { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.agents-view .agent-inbox-compose[hidden], .agents-view .agent-tab-panel[hidden] { display: none; }
.agents-view .agent-inbox-compose .agent-reply { flex: 1; min-width: 0; }
.agents-view .agent-inbox-actions .btn, .agents-view .agent-inbox-compose .btn { min-height: 40px; padding: 8px 12px; }
.agents-view .agent-inbox-actions .btn.quiet { text-decoration: underline; background: transparent; border-color: transparent; }
.agents-view .agent-teams { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--ui-line); }
.agents-view .team-tile { min-height: 145px; }
.agents-view .agent-header { padding: 22px; align-items: center; border: 1px solid var(--ui-line); border-radius: 20px;
  background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.agents-view .agent-header-text h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.1; }
.agents-view .agent-header-text .sub { margin-top: 4px; font-size: 16px; color: var(--text-dim); }
.agents-view .agent-header-blurb { max-width: 65ch; margin: 10px 0 8px; color: var(--text-dim); line-height: 1.5; }
.agents-view .agent-header-actions { align-self: flex-end; }
.agents-view .agent-header-actions .btn { min-height: 44px; }
.agents-view .agent-tabs { gap: 22px; overflow-x: auto; overflow-y: hidden; margin-top: 20px; }
.agents-view .agent-tab { flex: none; min-height: 44px; padding: 10px 3px; font: 600 14px Jost, sans-serif; }
.agents-view .agent-tab.active { border-bottom-width: 3px; }
.agents-view .agent-work-host, .agents-view .agent-routines-host, .agents-view .agent-memory-host { max-width: 880px; padding-top: 18px; }
.agents-view .agent-work-host > .card, .agents-view .agent-routines-host > .card, .agents-view .agent-memory-host > .card { margin-bottom: 16px; border-radius: 20px; }
.agents-view .agent-assignment-card { justify-content: flex-start; gap: 12px; }
.agents-view .agent-assignment-card > div { flex: 1; }
.agent-profile-sheet:not([hidden]) { width: min(560px, 50vw); }
.agent-profile-sheet .agent-profile-titlebar .agent-dot-avatar { width: 80px !important; height: 80px !important; }
.agent-avatar-picker { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px;
  border: 1px solid var(--ui-line); border-radius: 20px; background: var(--ui-surface); }
.agent-avatar-picker-preview { display: flex; justify-content: center; align-items: center; min-height: 184px;
  border-radius: 16px; background: var(--ui-wash); }
.agent-avatar-picker-controls { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.agent-avatar-choice h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.agent-avatar-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 7px; }
.agent-avatar-options-color { display: flex; flex-wrap: wrap; }
.agent-avatar-options-finish { display: flex; flex-wrap: wrap; }
.agent-avatar-picker .agent-avatar-option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 0; min-height: 68px; padding: 5px; border: 1px solid var(--ui-line); border-radius: 12px;
  background: var(--ui-wash); color: var(--text-dim); font: inherit; font-size: 10px; cursor: pointer; text-transform: capitalize; }
.agent-avatar-picker .agent-avatar-option img { width: 42px; height: 42px; }
.agent-avatar-picker .agent-avatar-option[aria-checked="true"] { border: 2px solid var(--accent); color: var(--text); background: var(--ui-surface); }
.agent-avatar-picker .agent-avatar-swatch { width: 44px; min-height: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--swatch); color: var(--text); font-size: 22px; }
/* A swatch is also an option; keep its own colour when chosen, or the option rule above paints it over. */
.agent-avatar-picker .agent-avatar-swatch[aria-checked="true"] { background: var(--swatch); border: 0; box-shadow: 0 0 0 2px var(--ui-surface), 0 0 0 4px var(--accent); }
.agent-avatar-picker .segmented-tabs .segmented-tab { flex: 1; min-height: 44px; border-radius: var(--ui-control); }
.agent-avatar-picker .agent-avatar-custom-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* 2026-10-14: interface.css's base .btn wins by load order; scope the picker action here. */
.agent-avatar-picker-controls .agent-avatar-shuffle.btn { min-height: 40px; align-self: flex-start; border-color: var(--ui-line); }
.agent-create-dialog .agent-create-identity-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr); }
.agent-create-dialog .agent-avatar-picker { grid-template-columns: 1fr; }
.agent-create-dialog .agent-avatar-picker-preview { justify-content: center; }
@media (max-width: 700px) {
  .agents-view .agent-back { margin-left: 44px; }
  .agents-view .agent-inbox-actions .btn, .agents-view .agent-inbox-compose .btn,
  .agent-avatar-picker-controls .agent-avatar-shuffle.btn,
  .agent-create-dialog .agent-create-nav button { min-height: 44px; }
  .agent-profile-sheet .agent-profile-tab { min-height: 44px; }
  .agents-view .agent-header { align-items: flex-start; }
  .agents-view .agent-header > .agent-dot-avatar { width: 88px !important; height: 88px !important; }
  .agents-view .agent-header-actions { width: 100%; }
  .agents-view .agent-inbox-item { grid-template-columns: minmax(0, 1fr); }
  .agents-view .agent-inbox-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .agent-profile-sheet:not([hidden]) { width: 100vw; }
  .agent-create-dialog .agent-create-identity-grid { grid-template-columns: minmax(0, 1fr); }
  .agent-avatar-picker { grid-template-columns: minmax(0, 1fr); }
  .agent-avatar-picker-controls { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .agents-view .agent-tile, .agent-avatar-picker * { transition: none !important; animation: none !important; } }

/* Setup changes in a bot's profile History, each with its Undo (2026-10-14). */
.agent-profile-subhead { margin: 14px 0 6px; font-size: 13px; font-weight: 600; }
.agent-profile-setup-change { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border); }

/* Bot surfaces on a phone (Agents 2.0 unit 6-ii, 2026-10-14). The audit in
   scripts/agents-phone-checks.cjs found no sideways scroll but 74 controls
   under 44px: form fields at 41px, dropdowns at 34, presets at 30, disclosure
   rows at 35, two close buttons, the bot chat's input and a toggle switch.
   Scoped to bot surfaces so the rest of the phone layout is untouched. */
@media (max-width: 768px) {
  :is(.agents-view, .agent-profile-sheet, .agent-create-dialog)
    :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea, .custom-select-btn, .btn) {
    min-height: 44px; box-sizing: border-box;
  }
  :is(.agents-view, .agent-profile-sheet, .agent-create-dialog) summary { min-height: 44px; box-sizing: border-box; padding-block: 11px; }
  .agents-view .agent-tab { min-width: 44px; justify-content: center; }
  .agents-view .chat-code-header button { min-height: 44px; padding-inline: 12px; }
  .agent-profile-sheet .btn[aria-label="Close profile"] { min-width: 44px; }
  .agent-create-dialog .modal-close-btn { width: 44px; height: 44px; }
  /* The switch keeps its look; a transparent border makes it a 44px target,
     with its visible edge drawn inside as a shadow. The knob is positioned
     against the padding box, so it does not move. */
  :is(.agents-view, .agent-profile-sheet, .agent-create-dialog) .set-switch {
    box-sizing: border-box; width: 58px; height: 44px; border: 12px solid transparent;
    background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--border-strong);
  }
  :is(.agents-view, .agent-profile-sheet, .agent-create-dialog) .set-switch[aria-checked="true"] { border-color: transparent; box-shadow: none; }
}
/* UI-3, 2026-10-14: the conversation owns the page. Scoped selectors
   deliberately outrank interface.css's base .btn and the earlier hero rules. */
.agents-view.agent-conversation-page { max-width: 1440px; width: 100%; min-width: 0; }
.agent-conversation-topbar { display: grid; grid-template-columns: 48px minmax(0, 1fr) 180px auto; align-items: center; gap: 18px; margin-bottom: 22px; }
.agent-conversation-page .agent-back { border-radius: 50%; width: 44px; height: 44px; padding: 0; font-size: 22px; background: var(--ui-surface); }
.agent-conversation-page .agent-mobile-menu-slot { display: none; }
.agent-conversation-page .agent-header { display: flex; gap: 10px; padding: 0; border: 0; background: var(--ui-surface); border-radius: 22px; box-shadow: none; margin: 0; }
.agent-conversation-page .agent-profile-face { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.agent-conversation-page .agent-profile-face h2 { font-size: 14px; margin: 0; }
.agent-conversation-page .agent-profile-open { display: none; }
.agent-conversation-page .agent-thread-search { min-width: 0; width: 100%; min-height: 44px; border-radius: 24px; background: var(--ui-surface); color: var(--text); border: 1px solid var(--ui-line); }
.agent-conversation-page .agent-tabs { --segment: 0; position: relative; justify-self: center; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; width: min(100%, 430px); padding: 4px; margin: 0; border: 1px solid var(--ui-line); border-radius: 24px; background: var(--ui-wash); overflow: hidden; isolation: isolate; }
.agent-conversation-page .agent-tabs::before { content: ''; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 4); border-radius: 20px; background: var(--ui-surface); box-shadow: var(--ui-shadow); transform: translateX(calc(var(--segment) * 100%)); transition: transform 220ms cubic-bezier(.22, 1, .36, 1); }
.agent-conversation-page .agent-tab { min-height: 44px; min-width: 0; padding: 8px 10px; margin: 0; border: 0; border-radius: 20px; font: inherit; font-size: 13px; background: transparent; color: var(--text); white-space: nowrap; }
.agent-conversation-layout { display: grid; grid-template-columns: minmax(235px, 300px) minmax(0, 1fr); gap: 28px; align-items: start; }
.agent-conversation-page:not([data-agent-tab=chat]) .agent-conversation-layout { display: none; }
.agent-conversation-page .agent-live-panels { display: flex; flex-direction: column; gap: 14px; min-width: 0; max-height: calc(100dvh - 170px); overflow-y: auto; padding: 3px; }
.agent-conversation-page .agent-live-panel, .agent-conversation-page .agent-next-panel { padding: 18px; border: 1px solid var(--ui-line); border-radius: 20px; background: var(--ui-surface); color: var(--text); }
.agent-conversation-page .agent-live-panel .title { margin-bottom: 12px; }
.agent-conversation-page .agent-model-summary { color: var(--text); font-size: 12px; }
.agent-conversation-page .agent-header-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.agent-conversation-page .agent-header-actions .btn { min-height: 44px; }
.agent-conversation-page .agent-give-job { width: 100%; min-height: 52px; border-radius: 20px; background: var(--ui-wash); color: var(--text); }
.agent-conversation-page .agent-routine-preview { display: flex; flex-direction: column; gap: 5px; text-align: left; width: 100%; min-height: 64px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--ui-line); background: transparent; color: var(--text); font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.agent-routine-preview span { font-size: 12px; }
.agent-conversation-page .agent-chat { display: flex; flex-direction: column; margin: 0; height: max(520px, calc(100dvh - 180px)); gap: 10px; }
.agent-search-scope { font-size: 12px; color: var(--text); margin: 8px 0; }
.agent-conversation-page .agent-chat-item[hidden] { display: none; }
.agent-conversation-page .agent-chat-main { flex: 1; min-height: 0; height: auto; border: 0; background: transparent; }
.agent-conversation-page .agent-chat-honesty { margin: 0; color: var(--text); }
.agent-conversation-stream { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 4px 20px; scroll-padding-block: 20px; }
.agent-conversation-page .session-chat-messages { flex: none; min-height: 100%; overflow: visible; padding: 8px 2px; gap: 18px; }
.agent-conversation-page .msg { animation: agent-conversation-rise 180ms ease-out both; min-width: 0; }
.agent-conversation-page .msg.assistant > .msg-body, .agent-conversation-page .msg.user > .msg-body { max-width: 88%; padding: 14px 18px; border: 1px solid var(--ui-line); border-radius: 20px; color: var(--text); background: var(--ui-surface); line-height: 1.6; }
.agent-conversation-page .msg.user > .msg-body { background: color-mix(in srgb, var(--ui-surface) 70%, var(--surface-2)); border-bottom-right-radius: 7px; }
.agent-conversation-page .msg.assistant > .msg-body { border-bottom-left-radius: 7px; }
.agent-conversation-page .msg-body:empty { display: none; }
.agent-conversation-page .agent-turn-working { width: min(100%, 520px); border-radius: 20px; background: var(--ui-surface); padding: 14px; border: 1px solid var(--ui-line); color: var(--text); }
.agent-composer-row { display: flex; align-items: flex-end; gap: 10px; padding: 12px 0 0; flex: none; }
.agent-composer-orb { flex: none; padding-bottom: 8px; }
.agent-conversation-page .side-chat-composer { flex: 1; min-width: 0; flex-wrap: nowrap; align-items: center; margin: 0; padding: 8px; border-radius: 24px; border: 1px solid var(--ui-line); background: var(--ui-surface); color: var(--text); }
.agent-conversation-page .side-chat-input-top { min-width: 0; flex: 1; }
.agent-conversation-page .side-chat-input { color: var(--text); min-height: 44px; }
.agent-conversation-page .side-chat-composer .btn { min-width: 44px; min-height: 44px; padding: 8px; border-radius: 50%; }
.agent-conversation-page .agent-composer-add { font-size: 22px; }
.agent-inline-activity { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.agent-inline-activity:empty { display: none; }
.agent-conversation-page .agent-approval-card { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--ui-line); padding: 16px; border-radius: 20px; background: var(--ui-surface); color: var(--text); animation: agent-conversation-rise 180ms ease-out both; }
.agent-conversation-page .agent-approval-card .agent-inbox-head { display: flex; }
.agent-conversation-page .agent-approval-card .agent-inbox-title { flex-basis: 100%; color: var(--text); }
.agent-conversation-page .agent-waiting-details { text-align: left; font: inherit; font-weight: 600; background: transparent; border: 0; min-height: 44px; padding: 0; cursor: pointer; }
.agent-conversation-page .agent-approval-card .agent-inbox-body { color: var(--text); max-height: 160px; }
.agent-conversation-page .agent-approval-card .agent-inbox-actions { display: flex; flex-direction: row-reverse; }
.agent-conversation-page .agent-approval-card .agent-inbox-actions .btn { flex: 1; min-height: 44px; text-decoration: none; }
.agent-conversation-page .agent-approval-card .agent-inbox-compose { flex-wrap: wrap; }
.agent-blocked-status { font-size: 11px; color: var(--text); padding-bottom: 8px; border-bottom: 1px solid var(--ui-line); }
.agent-conversation-page .agent-assignment-card { width: 100%; text-align: left; font: inherit; background: transparent; color: var(--text); border: 0; border-top: 1px solid var(--ui-line); cursor: pointer; min-height: 64px; }
.agent-conversation-page .agent-inline-permission { position: static; display: block; width: 100%; max-width: 100%; margin: 12px 0; padding: 16px; border: 1px solid var(--ui-line); border-radius: 20px; background: var(--ui-surface); color: var(--text); box-sizing: border-box; }
.agent-inline-permission .permission-choices { display: flex; flex-wrap: wrap; }
.agent-inline-permission .permission-choices .btn { min-height: 44px; flex: 1; }
.agent-item-sheet { position: fixed; inset: auto 0 0; box-sizing: border-box; width: min(100%, 540px); max-height: 85dvh; margin: 0 auto; padding: 24px; overflow-y: auto; border: 1px solid var(--ui-line); border-bottom: 0; border-radius: 24px 24px 0 0; color: var(--text); background: var(--ui-surface); font-family: var(--font-sans); box-shadow: var(--ui-shadow); }
.agent-item-sheet[open] { animation: agent-sheet-rise 220ms cubic-bezier(.22, 1, .36, 1); }
.agent-item-sheet::backdrop { background: rgba(var(--shade-rgb), .4); animation: agent-scrim-fade 180ms ease-out; }
.agent-item-sheet .agent-item-close { position: absolute; top: 14px; right: 14px; border-radius: 50%; width: 44px; height: 44px; padding: 0; }
.agent-item-grip { width: 44px; height: 5px; margin: -12px auto 16px; border-radius: 4px; background: var(--border-strong); touch-action: none; }
.agent-item-portrait { display: grid; place-items: center; min-height: 155px; border-radius: 18px; background: var(--ui-wash); touch-action: none; }
.agent-item-sheet h2 { margin: 18px 0 10px; font-size: 22px; }
.agent-item-sheet p { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.agent-item-sheet .agent-item-primary, .agent-item-sheet .agent-item-secondary { width: 100%; min-height: 44px; margin-top: 10px; }
@keyframes agent-conversation-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes agent-sheet-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes agent-scrim-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 768px) {
  .agent-conversation-page .agent-conversation-topbar { grid-template-columns: 76px minmax(0, 1fr) 76px; gap: 6px; margin-bottom: 12px; }
  .agent-conversation-page .agent-back { display: none; }
  .agent-conversation-page .agent-mobile-menu-slot { display: block; width: 44px; height: 44px; grid-column: 1; grid-row: 1; }
  .agent-conversation-page .agent-header { display: contents; }
  .agent-conversation-page .agent-profile-face { grid-column: 2; grid-row: 1; flex-direction: column; justify-self: center; gap: 3px; }
  .agent-conversation-page .agent-profile-face h2 { font-size: 13px; }
  .agent-conversation-page .agent-profile-open { display: block; grid-column: 3; grid-row: 1; min-height: 44px; padding: 8px 10px; border-radius: 24px; }
  .agent-conversation-page .agent-tabs { grid-column: 1 / -1; grid-row: 2; width: 100%; box-sizing: border-box; overflow-x: auto; margin-top: 6px; }
  .agent-conversation-page .agent-live-panels { display: none; }
  .agent-conversation-layout { display: block; }
  .agent-conversation-page .agent-chat { height: max(480px, calc(100dvh - 270px)); }
  .agent-conversation-page .agent-chat-main { min-height: 320px; }
  .agent-conversation-page .agent-chat-delete { opacity: 1; width: 44px; height: 44px; }
  .agent-conversation-page .agent-chat-open { min-height: 44px; }
  .agent-conversation-page .msg.assistant > .msg-body, .agent-conversation-page .msg.user > .msg-body { max-width: 94%; padding: 12px 14px; }
  .agent-conversation-page .agent-composer-row { gap: 5px; }
  .agent-conversation-page .side-chat-composer { gap: 2px; padding: 4px; }
  .agent-conversation-page .side-chat-composer .btn { font-size: 12px; }
  .agent-conversation-page .side-chat-input { padding: 8px 2px; }
  .agent-conversation-page .agent-inline-activity { margin-top: 18px; }
  .agent-conversation-page .session-chat-messages { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-conversation-page *, .agent-conversation-page *::before, .agent-conversation-page *::after,
  .agent-item-sheet, .agent-item-sheet::backdrop { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* 2026-10-14: balance the centre segment independently of the right tools. */
.agent-conversation-topbar { grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr); }
.agent-topbar-tools { display: flex; align-items: center; justify-self: end; gap: 14px; min-width: 0; }
.agent-conversation-page .routine-details-open { min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
@media (max-width: 1100px) and (min-width: 769px) {
  .agent-conversation-page .agent-profile-face h2 { display: none; }
  .agent-conversation-page .agent-tabs { width: 340px; }
}
@media (max-width: 768px) {
  .agent-conversation-page .agent-topbar-tools { display: contents; }
}
/* The app-wide reply-progress pill is pinned top-right, exactly where the bot
   page puts its search and face; drop it below the bot's top bar there
   (2026-10-14). */
@media (min-width: 769px) {
  :root:has(.agent-conversation-page) #chat-progress-host { top: calc(var(--titlebar-h) + 96px); }
}
/* 2026-10-14: the face is a control as well as a portrait; keep its hit area
   at the same 44px minimum as the rest of the phone navigation. */
.agent-conversation-page .agent-profile-face { min-width: 44px; min-height: 44px; }
.agent-conversation-page .agent-approval-card .agent-inbox-title { order: 1; }
.agent-conversation-page .agent-approval-card .agent-inbox-time { font-size: 11px; }
@media (prefers-reduced-motion: reduce) {
  .agent-item-sheet *, .agent-item-sheet *::before, .agent-item-sheet *::after { animation: none !important; transition: none !important; }
}
/* 2026-10-14: the scroll container itself inherits the app's scrollbar-colour
   transition. Reduced motion covers the root as well as cards and controls. */
@media (prefers-reduced-motion: reduce) {
  .agent-conversation-page { animation: none !important; transition: none !important; }
}

/* Profile sheet placement (2026-10-15, David: "the right sidebar is too tall
   with the name and character going off screen"). Measured: the sheet began
   at the window's top edge, so the desktop title bar (36px, z-index 10100)
   covered the face, and on a phone the status bar did the same. In a short
   window the flex column also squeezed the Details/Library tabs to a sliver
   (20px on a 390x844 phone). Start below the title bar, keep the safe area,
   hold the header rows at their natural height, and fold the face, name,
   "All settings" and close into one compact row. */
.agent-profile-sheet:not([hidden]) { top: var(--titlebar-h); padding-top: var(--mobile-safe-top); }
.agent-profile-sheet > .agent-profile-top, .agent-profile-sheet > .agent-profile-tabs { flex: none; }
.agent-profile-sheet > .agent-profile-top { flex-direction: row; align-items: center; gap: 12px; padding: 16px 16px 0 20px; }
.agent-profile-sheet .agent-profile-titlebar { display: contents; }
.agent-profile-sheet .agent-profile-titlebar .agent-dot-avatar { order: 0; flex: none; width: 52px !important; height: 52px !important; }
.agent-profile-sheet .agent-profile-titlebar h2 { order: 1; flex: 1; min-width: 0; font-size: 20px; line-height: 1.2; }
.agent-profile-sheet > .agent-profile-top > .btn { order: 2; align-self: center; margin: 0; white-space: nowrap; }
.agent-profile-sheet .agent-profile-titlebar > .btn { order: 3; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.agent-profile-sheet > .agent-profile-tabs { margin-top: 14px; }

/* Conversations (2026-10-15, David wanted the dropdown "somewhere else").
   On a desktop it heads the left column as a panel with its own search; the
   Hark reference keeps navigation in that column too. */
.agent-conversation-page .agent-chat-side { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--ui-line);
  border-radius: 20px; background: var(--ui-surface); color: var(--text); }
.agent-chat-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agent-chat-side-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.agent-conversation-page .agent-chat-side-head .agent-chat-new { min-height: 36px; padding: 6px 14px; border-radius: 999px; }
.agent-conversation-page .agent-chat-side .agent-thread-search { display: block; width: 100%; box-sizing: border-box; min-height: 40px; padding: 8px 14px; }
.agent-conversation-page .agent-chat-side .agent-search-scope { margin: 0; color: var(--text-dim); }
.agent-conversation-page .agent-chat-side .agent-chat-list { max-height: 228px; }
.agent-conversation-page .agent-chat-item { border-radius: 12px; }
.agent-conversation-page .agent-chat-item.active { background: var(--ui-wash); }
.agent-conversation-page .agent-chat-title { font-size: 13px; }
.agent-conversation-page .agent-conversations-close, .agent-conversation-page .agent-more, .agent-more-menu[hidden] { display: none; }
/* The face pill's name sat on its right edge; give it the pill's padding. */
@media (min-width: 1101px) { .agent-conversation-page .agent-profile-face { padding-right: 16px; } }

/* A phone reads like Messages (2026-10-15, David): the app menu on the left,
   the bot's face and name centred, Settings and More on the right; More holds
   Chat and conversations, Work, Routines and Memory. Bubbles follow Messages:
   the person's on the right in an accent tint, the bot's on the left in a
   soft wash, tight runs, a pill composer with a round send arrow. */
@media (max-width: 768px) {
  .agent-conversation-page .agent-conversation-topbar { position: relative; grid-template-columns: 44px 44px minmax(0, 1fr) 44px 44px;
    gap: 6px; margin: 0 0 6px; padding-bottom: 8px; border-bottom: 1px solid var(--ui-line); }
  .agent-conversation-page .agent-tabs { display: none; }
  .agent-conversation-page .agent-profile-face { grid-column: 3; }
  .agent-conversation-page .agent-profile-face .agent-dot-avatar { width: 40px !important; height: 40px !important; }
  .agent-conversation-page .agent-profile-face h2 { font-size: 12px; font-weight: 600; }
  /* Scoped past interface.css's base .btn, which otherwise wins by load order. */
  .agent-conversation-page .agent-header .agent-profile-open, .agent-conversation-page .agent-topbar-tools .agent-more {
    grid-row: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0;
    border: 1px solid var(--ui-line); border-radius: 50%; background: var(--ui-surface); color: var(--text); cursor: pointer; }
  .agent-conversation-page .agent-header .agent-profile-open { grid-column: 4; }
  .agent-conversation-page .agent-topbar-tools .agent-more { grid-column: 5; }
  .agent-conversation-page .agent-more[aria-expanded="true"] { background: var(--ui-wash); }
  .agent-profile-open .agent-icon { display: flex; width: 20px; height: 20px; }
  .agent-profile-open .agent-icon svg { width: 20px; height: 20px; }
  .agent-conversation-page .agent-profile-open-label { display: none; }
  .agent-more-menu:not([hidden]) { position: absolute; z-index: 40; top: calc(100% - 2px); right: 0; display: flex; flex-direction: column;
    min-width: 230px; padding: 6px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-surface);
    box-shadow: var(--ui-shadow); animation: agent-menu-in 160ms cubic-bezier(.22, 1, .36, 1) both; transform-origin: top right; }
  .agent-more-menu .agent-more-item { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 10px 14px;
    border: 0; border-radius: 11px; background: transparent; color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
  .agent-more-menu .agent-more-item:hover, .agent-more-menu .agent-more-item:focus-visible { background: var(--ui-wash); outline: none; }
  .agent-more-menu .agent-more-item[aria-checked="true"]::after { content: '\2713'; color: var(--accent); font-weight: 700; }

  /* Conversations open as a full sheet from More, over the thread. */
  .agent-conversation-page .agent-live-panels { display: contents; }
  .agent-conversation-page .agent-live-panels > :not(.agent-conversations-home) { display: none; }
  .agent-conversation-page .agent-conversations-home { display: none; }
  .agent-conversation-page .agent-conversations-home.is-open { position: fixed; z-index: 1100; inset: var(--titlebar-h) 0 0; display: flex;
    flex-direction: column; gap: 10px; box-sizing: border-box; padding: calc(14px + var(--mobile-safe-top)) max(16px, var(--mobile-safe-right))
    calc(16px + var(--mobile-safe-bottom)) max(16px, var(--mobile-safe-left)); background: var(--bg); animation: agent-sheet-rise 240ms cubic-bezier(.22, 1, .36, 1) both; }
  .agent-conversation-page .agent-conversations-home.is-open .agent-conversations-close { display: block; align-self: flex-end; min-height: 44px; font-weight: 600; }
  .agent-conversation-page .agent-conversations-home .agent-chat-side { flex: 1; min-height: 0; padding: 0; border: 0; background: transparent; }
  .agent-conversation-page .agent-conversations-home .agent-chat-side-head h3 { font-size: 28px; }
  .agent-conversation-page .agent-conversations-home .agent-chat-list { flex: 1; max-height: none; }
  .agent-conversation-page .agent-conversations-home .agent-chat-item { border-bottom: 1px solid var(--ui-line); border-radius: 0; }
  .agent-conversation-page .agent-conversations-home .agent-chat-open { min-height: 60px; padding: 10px 4px; }
  .agent-conversation-page .agent-conversations-home .agent-chat-title { font-size: 15px; font-weight: 600; }
  :root:has(.agent-conversations-open) #mobile-menu-btn { visibility: hidden; }

  /* The thread fills the screen under the top bar. */
  .agent-conversation-page .agent-chat { height: calc(100dvh - var(--titlebar-h) - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 120px); min-height: 380px; gap: 6px; }
  .agent-conversation-page .agent-chat-main { min-height: 0; }
  .agent-conversation-page .session-chat-messages { gap: 4px; padding: 10px 0; }
  .agent-conversation-page .msg + .msg:not(.user) , .agent-conversation-page .msg.user + .msg:not(.user) { margin-top: 10px; }
  .agent-conversation-page .msg.assistant > .msg-body, .agent-conversation-page .msg.user > .msg-body {
    max-width: 78%; padding: 9px 14px; border: 0; border-radius: 20px; line-height: 1.45; font-size: 15px; }
  .agent-conversation-page .msg.assistant > .msg-body { background: var(--ui-wash); color: var(--text); border-bottom-left-radius: 6px; }
  .agent-conversation-page .msg.user { display: flex; flex-direction: column; align-items: flex-end; }
  /* An accent tint, not the ink fill: it stays a dark surface on a dark
     appearance, as the appearance checks require (2026-10-15). */
  .agent-conversation-page .msg.user > .msg-body { background: color-mix(in srgb, var(--accent) 24%, var(--ui-surface)); color: var(--text); border-bottom-right-radius: 6px; }
  .agent-conversation-page .agent-composer-row { padding-top: 6px; }
  .agent-conversation-page .agent-composer-orb { display: none; }
  .agent-conversation-page .side-chat-composer { padding: 3px 3px 3px 4px; border-radius: 22px; }
  /* 44px targets for the phone audit; the visible circles are drawn inside.
     The :not() chain outranks interface.css's base .btn background rule. */
  .agent-conversation-page .side-chat-composer .btn:is(.agent-composer-add, .side-chat-send):not(.primary):not(.danger) {
    position: relative; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; box-shadow: none; }
  .agent-conversation-page .side-chat-composer .btn:is(.agent-composer-add, .side-chat-send)::before {
    content: ''; position: absolute; inset: 4px; z-index: -1; border-radius: 50%; }
  .agent-conversation-page .side-chat-composer { isolation: isolate; }
  .agent-conversation-page .side-chat-composer .agent-composer-add { color: var(--text); font-size: 22px; }
  .agent-conversation-page .side-chat-composer .agent-composer-add::before { background: var(--ui-wash); }
  /* The send arrow keeps the button's text for screen readers and tests. */
  .agent-conversation-page .side-chat-composer .side-chat-send { overflow: hidden; color: transparent; font-size: 0; }
  .agent-conversation-page .side-chat-composer .side-chat-send::before { background: var(--text); }
  .agent-conversation-page .side-chat-composer .side-chat-send::after { content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
    background: var(--bg-panel-solid); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 14V3M3.5 7.5 8 3l4.5 4.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 14V3M3.5 7.5 8 3l4.5 4.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
  .agent-conversation-page .side-chat-composer .side-chat-send[data-mode="stop"]::after { width: 12px; height: 12px; border-radius: 2px; -webkit-mask: none; mask: none; }
  .agent-conversation-page .side-chat-composer .side-chat-send:disabled { opacity: .45; }
}
@keyframes agent-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .agent-more-menu, .agent-conversations-home { animation: none !important; transition: none !important; }
}

/* Agents messenger: one stable chat rail, a conversation, and live profile. */
.view.agents-shell-view { padding: 16px; overflow: hidden; }
.agents-messenger { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 16px; flex: 1; min-height: 0; color: var(--text); }
.agents-messenger [hidden] { display: none !important; }
.agents-chat-rail { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; border: 1px solid var(--ui-line); border-radius: 24px; background: var(--ui-wash); padding: 12px; overflow-y: auto; }
.agents-rail-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agents-rail-top h2 { font-size: 17px; margin: 0 8px; }
.agents-rail-action { display: grid; place-items: center; flex: none; height: 44px; width: 44px; border-radius: 16px; border: 1px solid transparent; background: var(--ui-surface); color: var(--text); cursor: pointer; }
.agents-rail-action svg { width: 20px; height: 20px; }
.agents-messenger .agents-rail-search { width: 100%; height: 44px; min-height: 44px; min-width: 0; flex: none; box-sizing: border-box; border-radius: 16px; background: var(--ui-surface); color: var(--text); border: 1px solid var(--ui-line); }
.agents-rail-create { display: flex; gap: 8px; }
.agents-rail-create .btn { flex: 1; min-width: 0; min-height: 44px; border-radius: 16px; padding: 8px; }
.agents-rail-group h3 { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text); margin: 20px 10px 8px; font-weight: 500; }
.agents-messenger .agents-rail-item { display: flex; flex-direction: row; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 64px; border: 1px solid transparent; border-radius: 16px; padding: 10px; margin: 2px 0; color: var(--text); background: transparent; text-align: left; font: inherit; box-shadow: none; cursor: pointer; }
.agents-messenger .agents-rail-item:hover, .agents-rail-action:hover { background: var(--ui-surface); border-color: var(--ui-line); }
.agents-messenger .agents-rail-item[aria-current=page] { background: var(--ui-surface); border-color: var(--ui-line); box-shadow: var(--ui-shadow); }
.agents-rail-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.agents-rail-copy strong { font-size: 13px; font-weight: 600; }
.agents-rail-copy > span { font-size: 12px; }
.agents-rail-copy > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agents-team-avatar { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 14px; background: var(--accent-dim); color: var(--text); }
.agents-team-avatar svg { width: 24px; height: 24px; }
.agents-rail-inbox { margin-top: auto; min-height: 44px; white-space: normal; }
.agents-rail-no-match, .agents-team-error { font-size: 12px; padding: 8px; }
.agents-rail-history { border-top: 1px solid var(--ui-line); }
.agents-rail-history:empty { display: none; }
.agents-rail-history .agent-conversations-home { position: static; display: block; padding: 0; border: 0; background: transparent; width: auto; height: auto; max-height: none; box-shadow: none; }
.agents-rail-history .agent-conversations-close { display: none; }
.agents-rail-history .agent-chat-side { border: 0; background: transparent; padding: 12px 0 0; min-width: 0; }
.agents-rail-history .agent-chat-side-head { flex-wrap: wrap; gap: 8px; }
.agents-rail-history .agent-chat-side h3 { font-size: 12px; }
.agents-rail-history .agent-chat-new { min-height: 44px; padding: 8px; }
.agents-rail-history .agent-thread-search { width: 100%; min-width: 0; min-height: 44px; font-size: 12px; }
.agents-rail-history .agent-search-scope { font-size: 11px; }
.agents-rail-history .agent-chat-list { max-height: 220px; overflow: auto; }
.agents-rail-history .agent-chat-item { min-width: 0; }
.agents-rail-history .agent-chat-open { min-width: 0; min-height: 44px; }
.agents-rail-history .agent-chat-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agents-rail-history .agent-chat-delete { min-width: 44px; height: 44px; opacity: 1; }
.agents-messenger-body { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.agents-messenger-stage { display: flex; flex: 1; min-width: 0; min-height: 0; overflow: hidden; border-radius: 24px; background: var(--ui-wash); border: 1px solid var(--ui-line); }
.agents-messenger-page { flex: 1; min-height: 0; min-width: 0; overflow: auto; padding: 20px; }
.agents-messenger .agent-conversation-page { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 20px; max-width: none; }
.agents-messenger .agent-conversation-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0; gap: 12px; }
.agents-messenger .agent-back, .agents-messenger .agent-mobile-menu-slot { display: none; }
.agents-messenger .agent-tabs { width: auto; flex: 1; max-width: 400px; order: 2; }
.agents-messenger .agent-topbar-tools { order: 1; }
.agents-messenger .agent-profile-face h2 { display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agents-messenger .agent-conversation-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; flex: 1; min-height: 0; align-items: stretch; }
.agents-messenger .agent-chat-host { grid-column: 1; grid-row: 1; min-height: 0; min-width: 0; }
.agents-messenger .agent-live-panels { grid-column: 2; grid-row: 1; display: flex; max-height: none; min-height: 0; overflow-y: auto; }
.agents-messenger .agent-live-panel { border: 0; box-shadow: none; padding: 16px; }
.agents-inspector-profile { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; margin-bottom: 24px; padding: 8px 0; border: 0; color: var(--text); font: inherit; background: transparent; cursor: pointer; }
.agents-inspector-profile > span:last-child { font-size: 12px; overflow-wrap: anywhere; }
.agents-messenger .agent-chat { height: 100%; min-height: 0; }
.agents-messenger .agent-chat-main { min-height: 0; }
.agents-messenger .agent-conversation-stream { padding: 12px 4px 24px; }
.agents-messenger .agent-tab-panel:not(.agent-chat-host) { overflow-y: auto; min-height: 0; }
.agents-messenger .agent-chat-empty { text-align: center; }
.agents-messenger-welcome { flex: 1; align-self: center; padding: 24px; text-align: center; }
.agents-messenger-welcome h1 { font-size: clamp(20px, 2.4vw, 28px); margin: 24px 0 12px; }
.agents-messenger-welcome p { font-size: 14px; margin: 0 0 24px; }
.agents-messenger-faces { display: flex; justify-content: center; align-items: center; min-height: 90px; }
.agents-messenger-faces > * + * { margin-left: -12px; margin-top: 20px; }
.agents-messenger-faces svg { width: 72px; height: 72px; }
.agents-welcome-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.agents-welcome-actions .btn { min-height: 44px; }
.agents-inbox-view .agent-grid, .agents-inbox-view .agent-roster-title, .agents-inbox-view .agent-teams { display: none; }
.agents-messenger :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.agents-messenger.is-rail-collapsed { grid-template-columns: 76px minmax(0, 1fr); }
.is-rail-collapsed .agents-chat-rail { padding: 8px; align-items: center; }
.is-rail-collapsed .agents-rail-top h2, .is-rail-collapsed .agents-rail-search, .is-rail-collapsed .agents-rail-create,
.is-rail-collapsed .agents-rail-copy, .is-rail-collapsed .agents-rail-group h3, .is-rail-collapsed .agents-rail-history,
.is-rail-collapsed .agents-rail-inbox { display: none; }
.is-rail-collapsed .agents-rail-lists { width: 100%; }
.is-rail-collapsed .agents-rail-item { justify-content: center; padding: 6px; min-height: 56px; }
.agents-messenger .swarm-view { padding: 20px; gap: 12px; overflow: auto; }
.agents-messenger .swarm-header > button:first-child { display: none; }
.agents-messenger .swarm-header h1 { font-size: 18px; }
.agents-messenger .swarm-mobile-tabs { display: flex; gap: 8px; }
.agents-messenger .swarm-layout { display: flex; flex-direction: column; min-height: 300px; }
.agents-messenger .swarm-layout > section { display: none; border: 0; box-shadow: none; padding: 8px; flex: 1; }
.agents-messenger .swarm-layout[data-mobile-panel=inbox] > .swarm-conversation { display: flex; }
.agents-messenger .swarm-layout[data-mobile-panel=team] > .swarm-team,
.agents-messenger .swarm-layout[data-mobile-panel=work] > .swarm-work { display: block; }
.agents-messenger .swarm-conversation > h2 { display: none; }
.agents-messenger .swarm-message { padding: 14px 18px; border-radius: 20px; background: var(--ui-surface); border: 1px solid var(--ui-line); }
.agents-messenger .swarm-composer { background: var(--ui-surface); padding: 12px; border: 1px solid var(--ui-line); border-radius: 24px; }
.agents-messenger .swarm-composer textarea { background: transparent; border: 0; min-height: 52px; max-height: 140px; }
.agents-messenger .swarm-mobile-tabs .btn, .agents-messenger .swarm-view-tabs .btn, .agents-messenger .swarm-actions .btn { min-height: 44px; }
.agents-rail-scrim { display: none; }
@media (max-width: 1200px) {
  .agents-messenger .agent-conversation-layout { grid-template-columns: minmax(0, 1fr); }
  .agents-messenger .agent-live-panels { display: none; }
  .agents-messenger .agent-tabs { max-width: none; }
}
@media (max-width: 768px) {
  .view.agents-shell-view { padding: 70px 8px max(8px, var(--mobile-safe-bottom)); }
  .agents-messenger, .agents-messenger.is-rail-collapsed { display: flex; gap: 0; }
  .agents-messenger-body { flex: 1; }
  .agents-chat-rail { display: none; }
  .agents-messenger.is-rail-open .agents-chat-rail { display: flex; position: fixed; z-index: 250; top: calc(var(--titlebar-h) + max(16px, var(--mobile-safe-top))); left: 8px; bottom: max(8px, var(--mobile-safe-bottom)); width: min(310px, calc(100vw - 32px)); box-sizing: border-box; background: var(--ui-surface); box-shadow: var(--ui-shadow); align-items: stretch; }
  :root:has(.agents-messenger.is-rail-open) #mobile-menu-btn { visibility: hidden; }
  .is-rail-open .agents-rail-top h2, .is-rail-open .agents-rail-search, .is-rail-open .agents-rail-create, .is-rail-open .agents-rail-copy,
  .is-rail-open .agents-rail-group h3, .is-rail-open .agents-rail-history, .is-rail-open .agents-rail-inbox { display: revert; }
  .is-rail-open .agents-rail-create, .is-rail-open .agents-rail-copy { display: flex; }
  .is-rail-open .agents-rail-item { justify-content: flex-start; padding: 10px; }
  .agents-rail-scrim { display: block; position: fixed; inset: 0; z-index: 240; border: 0; background: rgba(var(--shade-rgb), .55); }
  .agents-messenger .agent-conversation-page { padding: 12px; gap: 8px; }
  .agents-messenger .agent-conversation-topbar { display: grid; grid-template-columns: 44px 44px minmax(0, 1fr) 44px 44px; justify-content: normal; gap: 6px; }
  .agents-messenger .agent-topbar-tools, .agents-messenger .agent-header { display: contents; }
  .agents-messenger .agent-profile-face { display: flex; flex-direction: column; min-width: 44px; max-width: 100%; }
  .agents-messenger .agent-profile-face h2 { max-width: 100%; }
  .agents-messenger .agent-tabs { display: none; }
  .agents-messenger .agent-more { display: grid; }
  .agents-messenger .agent-chat, .agents-messenger .agent-chat-main { height: 100%; min-height: 0; }
  .agents-messenger .agent-live-panels { display: none; }
  .agents-messenger .swarm-view { padding: 12px; }
  .agents-messenger .swarm-header h1 { min-width: 0; }
  .agents-messenger .swarm-composer .swarm-actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .agents-messenger *, .agents-messenger *::before, .agents-messenger *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}