/* Redesign preview: Agents and Teams, a light pass. Every rule is scoped under
   .kairos-redesign, so with the switch off the tab is untouched. Built on the
   --rd-* tokens from redesign.css; no raw colors. The messenger's layout,
   structure and behaviour stay as they are: this only changes paint (surfaces,
   hairlines, type, pills, fields). The village art and the call orb are left
   alone; only the panels around them follow the redesign. Gold is a hairline,
   never text. The washed sky behind the view comes from redesign.css. */

/* -- Page title and the view switch ------------------------------------------ */
.kairos-redesign .agents-workspace-bar h2 {
  font-family: var(--rd-font-title); font-style: italic; font-weight: 500; letter-spacing: 0; line-height: 1.05;
  font-size: clamp(28px, 3.4vw, 38px); color: var(--rd-ink);
  text-shadow: 0 0 10px rgba(var(--wash-rgb), .95), 0 0 22px rgba(var(--wash-rgb), .8), 0 0 2px rgba(var(--wash-rgb), .9);
}
.kairos-redesign .agents-workspace-tabs {
  background: var(--rd-surface); border-color: var(--rd-line); border-radius: var(--rd-radius-pill); box-shadow: var(--rd-shadow);
}
.kairos-redesign .agents-workspace-tabs button { border-radius: var(--rd-radius-pill); font-family: var(--rd-font-ui); font-weight: 500; }
.kairos-redesign .agents-workspace-tabs button[aria-selected=true] {
  background: var(--rd-surface-solid); border-color: var(--rd-line-strong); box-shadow: none;
}

/* -- Panels: the rail, the conversation stage, the village frame ------------- */
.kairos-redesign :is(.agents-chat-rail, .agents-messenger-stage, .agent-ecosystem) {
  background: var(--rd-surface); border-color: var(--rd-line); border-radius: var(--rd-radius-card); box-shadow: var(--rd-shadow);
}
.kairos-redesign .agents-messenger-stage > .agent-conversation-page,
.kairos-redesign .agents-messenger-stage > .swarm-view { background: transparent; }

/* -- Section titles ---------------------------------------------------------- */
.kairos-redesign :is(.agents-rail-top h2, .agents-messenger-welcome h1, .agent-call-scene h1, .ecosystem-header h2, .swarm-view h1, .agent-chat-empty .title) {
  font-family: var(--rd-font-title); font-style: italic; font-weight: 500; letter-spacing: 0; color: var(--rd-ink);
}
.kairos-redesign .agents-rail-top h2 { font-size: 24px; line-height: 1.1; }
.kairos-redesign .agents-messenger-welcome h1 { font-size: clamp(28px, 3.2vw, 38px); }
.kairos-redesign .ecosystem-header h2 { font-size: 26px; }
.kairos-redesign .swarm-view h1 { font-size: 30px; line-height: 1.1; }
.kairos-redesign .agent-call-scene h1 { font-size: 26px; }
.kairos-redesign .agent-call:is([data-state=setup], [data-state=preparing]) .agent-call-scene h1 { font-size: 22px; }
/* Small uppercase tracked labels */
.kairos-redesign :is(.agents-rail-group h3, .agents-rail-history > summary, .swarm-layout > section > h2, .swarm-view .swarm-field > span) {
  font-family: var(--rd-font-ui); font-size: var(--rd-label-size); font-weight: 500;
  letter-spacing: var(--rd-label-tracking); text-transform: uppercase; color: var(--rd-ink-dim);
}
.kairos-redesign .swarm-view .swarm-field > span { font-size: 11px; }

/* -- Rail rows: hairline for the current chat, no stacked card chrome -------- */
.kairos-redesign .agents-messenger .agents-rail-item { box-shadow: none; background: transparent; border-color: transparent; border-radius: 18px; }
.kairos-redesign .agents-messenger .agents-rail-item:hover { background: var(--rd-surface-2); border-color: var(--rd-line); }
.kairos-redesign .agents-messenger .agents-rail-item[aria-current=page] {
  background: var(--rd-surface-solid); border-color: var(--rd-line-strong); box-shadow: var(--rd-shadow);
}
.kairos-redesign .agents-rail-action { background: var(--rd-surface-solid); border-color: var(--rd-line); border-radius: var(--rd-radius-pill); }
.kairos-redesign .agents-rail-history { border-top-color: var(--rd-line); }
.kairos-redesign .agents-rail-create .btn { border-radius: var(--rd-radius-pill); }
.kairos-redesign .agents-messenger .agents-rail-search,
.kairos-redesign .agent-thread-search { background: color-mix(in srgb, var(--rd-surface-solid) 92%, transparent); border-color: var(--rd-line-strong); border-radius: var(--rd-radius-pill); }
.kairos-redesign .agents-chat-unread { background: var(--rd-primary-bg); color: var(--rd-primary-fg); }

/* -- Conversation: top bar, bubbles, composer -------------------------------- */
.kairos-redesign .is-messages .agent-profile-face { background: var(--rd-surface-solid); border: 1px solid var(--rd-line); border-radius: var(--rd-radius-pill); }
.kairos-redesign .is-messages .agent-profile-face:hover { border-color: var(--rd-line-strong); }
.kairos-redesign .is-messages :is(.agent-info-toggle, .agent-call-open) { border-radius: var(--rd-radius-pill); }
.kairos-redesign .is-messages .session-chat-messages .msg > .msg-body { background: var(--rd-surface-solid); border: 1px solid var(--rd-line); }
.kairos-redesign .is-messages .session-chat-messages .msg.user > .msg-body { background: var(--accent-dim); border-color: var(--rd-line-strong); }
.kairos-redesign .agent-conversation-page .side-chat-composer,
.kairos-redesign .swarm-composer {
  background: color-mix(in srgb, var(--rd-surface-solid) 92%, transparent); border-color: var(--rd-line-strong); box-shadow: var(--rd-shadow);
}
.kairos-redesign .agent-conversation-page .side-chat-composer:focus-within { border-color: var(--rd-focus); }
.kairos-redesign .agent-conversation-page .side-chat-input { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
@media (min-width: 769px) {
  /* The desktop Send is the primary pill; the phone keeps its round arrow. */
  .kairos-redesign .agent-conversation-page .side-chat-composer .btn.side-chat-send:not(.primary):not(.quiet):not(.danger):not(.forge-composer-send) {
    background: var(--rd-primary-bg); color: var(--rd-primary-fg); border-color: transparent; border-radius: var(--rd-radius-pill); padding-inline: 18px;
  }
  .kairos-redesign .agent-conversation-page .side-chat-composer .btn.side-chat-send:not(.primary):not(.quiet):not(.danger):not(.forge-composer-send):hover:not(:disabled) { background: var(--rd-primary-hover); }
}

/* -- Inbox and the profile sheet --------------------------------------------- */
.kairos-redesign .agents-view .agent-inbox,
.kairos-redesign .agent-approval-card,
.kairos-redesign .agent-live-panel,
.kairos-redesign .agent-next-panel,
.kairos-redesign .agent-model-panel {
  background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: var(--rd-radius-card); box-shadow: var(--rd-shadow);
}
.kairos-redesign .agent-profile-sheet { border-color: var(--rd-line); box-shadow: var(--rd-shadow); }
.kairos-redesign .agent-profile-tabs { border-color: var(--rd-line); border-radius: var(--rd-radius-pill); }
.kairos-redesign .agents-chat-actions,
.kairos-redesign .agent-item-sheet {
  background: var(--rd-surface-solid); border: 1px solid var(--rd-line); border-radius: var(--rd-radius-card); box-shadow: var(--rd-shadow);
}
.kairos-redesign .agents-chat-actions h2 { font-family: var(--rd-font-title); font-style: italic; font-weight: 500; font-size: 24px; }

/* -- Calls: the panel around the orb, not the orb ---------------------------- */
.kairos-redesign .agent-call {
  background: var(--rd-surface-solid); border-color: var(--rd-line); border-radius: var(--rd-radius-card); box-shadow: var(--rd-shadow);
}
.kairos-redesign .agent-call-tabs { background: var(--rd-surface); border-color: var(--rd-line); border-radius: var(--rd-radius-pill); }
.kairos-redesign .agent-call-tabs > span { border-radius: var(--rd-radius-pill); }
.kairos-redesign .agent-call .agent-call-action {
  background: var(--rd-surface); border-color: var(--rd-line-strong); border-radius: var(--rd-radius-pill); font-family: var(--rd-font-ui); font-weight: 500;
}
.kairos-redesign .agent-call .agent-call-action:hover { background: var(--rd-surface-2); border-color: var(--rd-line-strong); }
.kairos-redesign .agent-call .agent-call-action.is-end { background: rgba(var(--danger-rgb), .1); border-color: rgba(var(--danger-rgb), .3); }
.kairos-redesign .agent-call-setup { background: var(--rd-surface); border-color: var(--rd-line); border-radius: var(--rd-radius-card); }
.kairos-redesign .agent-call-setup :is(select, input:not([type=checkbox])),
.kairos-redesign .agent-call-runtime input {
  background: color-mix(in srgb, var(--rd-surface-solid) 92%, transparent); border-color: var(--rd-line-strong); border-radius: var(--rd-radius-field); font-family: var(--rd-font-ui);
}
.kairos-redesign .agent-call-setup > button[type=submit] { box-shadow: 0 0 0 8px var(--rd-surface-solid); }
.kairos-redesign .agent-call-setup label { text-transform: uppercase; letter-spacing: var(--rd-label-tracking); font-size: 11px; }

/* -- Ecosystem: the frame and its controls (the village art is untouched) ---- */
.kairos-redesign :is(.ecosystem-control, .ecosystem-more > summary, .ecosystem-locate) {
  background: var(--rd-surface-solid); border-color: var(--rd-line-strong); border-radius: var(--rd-radius-pill); font-family: var(--rd-font-ui);
}
.kairos-redesign :is(.ecosystem-control, .ecosystem-more > summary):hover { background: var(--rd-surface-2); }
.kairos-redesign .ecosystem-extra-tools { background: var(--rd-surface-solid); border-color: var(--rd-line); border-radius: var(--rd-radius-card); box-shadow: var(--rd-shadow); }

/* -- Teams -------------------------------------------------------------------- */
.kairos-redesign .swarm-system-card,
.kairos-redesign .swarm-layout > section,
.kairos-redesign .swarm-notice {
  background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: var(--rd-radius-card); box-shadow: var(--rd-shadow);
}
.kairos-redesign .is-messages .swarm-layout > .swarm-conversation { background: transparent; border: 0; box-shadow: none; }
.kairos-redesign .swarm-system-card:hover { border-color: var(--rd-line-strong); }
.kairos-redesign .swarm-system-card h2 { font-family: var(--rd-font-title); font-style: italic; font-weight: 500; font-size: 24px; }
.kairos-redesign .swarm-state { background: var(--rd-surface); border-color: var(--rd-line); border-radius: var(--rd-radius-pill); }
.kairos-redesign .swarm-view .view-header .sub { color: var(--rd-ink-dim); }
.kairos-redesign .swarm-view [aria-pressed="true"] { background: var(--rd-surface-solid); border-color: var(--rd-line-strong); }
.kairos-redesign .swarm-agent, .kairos-redesign .swarm-budget, .kairos-redesign .swarm-record,
.kairos-redesign .swarm-composer, .kairos-redesign .swarm-dialog-header { border-color: var(--rd-line); }
.kairos-redesign .swarm-dialog {
  background: var(--rd-surface-solid); border-color: var(--rd-line); border-radius: var(--rd-radius-card); box-shadow: var(--rd-shadow);
}
.kairos-redesign .swarm-dialog-header h2 { font-family: var(--rd-font-title); font-style: italic; font-weight: 500; font-size: 26px; }
.kairos-redesign .swarm-field :is(input, textarea, select) {
  background: color-mix(in srgb, var(--rd-surface-solid) 92%, transparent); border-color: var(--rd-line-strong); border-radius: var(--rd-radius-field); font-family: var(--rd-font-ui);
}
.kairos-redesign .swarm-field :is(input, textarea, select):focus { border-color: var(--rd-focus); }
.kairos-redesign :is(.swarm-member-form, .swarm-schedule, .swarm-memory) { border-color: var(--rd-line); border-radius: var(--rd-radius-field); }
.kairos-redesign .swarm-panel-tabs { background: transparent; }

/* Round two light pass: keep messenger, ecosystem and calls in place. */
.kairos-redesign[data-view=agents] :is(.agents-rail-item, .agent-conversation-topbar, .side-chat-composer, .agent-thread-search) { font-family: var(--rd-font-ui); color: var(--rd-ink); }
.kairos-redesign[data-view=agents] :is(.agent-profile-face h2, .agent-chat-empty .title) { font-family: var(--rd-font-title); font-style: italic; font-weight: 500; }
.kairos-redesign[data-view=agents] :is(.agent-info-toggle, .agent-call-open, .agents-rail-action) { background: var(--rd-surface-solid); border-color: var(--rd-line-strong); color: var(--rd-ink); }
.kairos-redesign[data-view=agents] :is(.agent-info-toggle, .agent-call-open, .agents-rail-action):focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 2px; }
.kairos-redesign[data-view=agents] .is-messages .session-chat-messages .msg.user > .msg-body { background: var(--rd-primary-bg); color: var(--rd-primary-fg); border-color: var(--rd-primary-bg); }

/* -- Phones: titles a little smaller; every control keeps its 44px target ----- */
@media (max-width: 768px) {
  .kairos-redesign .agents-workspace-bar h2 { font-size: 26px; }
  .kairos-redesign .swarm-view h1 { font-size: 26px; }
  .kairos-redesign .agents-messenger-welcome h1 { font-size: 28px; }
  .kairos-redesign .ecosystem-header h2 { font-size: 22px; }
  .kairos-redesign :is(.agents-chat-rail, .agents-messenger-stage, .agent-ecosystem) { border-radius: var(--rd-radius-card); }
  /* The redesign's fields and switch are a little shorter than 44px; give
     them back the phone tap target the Agents surfaces already guarantee. */
  .kairos-redesign :is(.agents-view, .agent-profile-sheet, .agent-create-dialog) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]) { min-height: 44px; box-sizing: border-box; }
  .kairos-redesign :is(.agents-view, .agent-profile-sheet, .agent-create-dialog) .set-switch {
    box-sizing: border-box; width: 62px; height: 44px; border: 9px solid transparent; background-clip: padding-box;
  }
}
/* ==== PHONE-AGENTS-GENERATED-BELOW ==== */

/* ==========================================================================
   Phones: Agents in the "Kairos Mobile v2" boards (2026-10-23, David: restyle
   Agents on phone to the mobile v2 boards, keeping the messenger, ecosystem
   and calls). Desktop and the classic look are untouched: every rule is under
   .kairos-redesign[data-view=agents] and a phone width. Colours are theme
   tokens only; the boards' parchment hexes map to --rd-* tokens.
   Boards: Agents (list, needs you and working), AgentDM, AgentsClear, Motion.
   ========================================================================== */
@media (max-width: 768px) {
  /* -- Page: 20px gutters; the header row holds the title and two round 46px buttons --- */
  .kairos-redesign[data-view=agents] .view.agents-shell-view { padding-inline: 20px; }
  .kairos-redesign[data-view=agents] .agents-workspace { gap: 18px; }
  .kairos-redesign[data-view=agents] .agents-workspace-bar { display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; padding: 0; min-height: 0; margin-top: 8px; }
  .kairos-redesign[data-view=agents] .agents-workspace-controls { display: contents; }
  .kairos-redesign[data-view=agents] .agents-workspace-controls .agents-chats-open { display: none; }
  .kairos-redesign[data-view=agents] .agents-workspace:not(.has-conversation) .agents-phone-actions {
    position: absolute; z-index: 30; top: calc(var(--mobile-safe-top, env(safe-area-inset-top, 0px)) + 6px); right: 20px;
    display: flex; gap: 8px; height: 46px;
  }
  .kairos-redesign[data-view=agents] .agents-phone-round, .kairos-redesign[data-view=agents] .agent-call-open, .kairos-redesign[data-view=agents] .is-messages .agent-more, .kairos-redesign[data-view=agents] .agents-workspace.has-conversation .agents-conversation-back:not([hidden]) {
    box-sizing: border-box; display: grid; place-items: center; width: 46px; height: 46px; min-width: 46px; min-height: 46px; padding: 0;
    border: 1px solid var(--rd-line); border-radius: var(--rd-radius-pill); background: var(--rd-surface-solid); color: var(--rd-ink);
    box-shadow: none; cursor: pointer; font: inherit;
  }
  .kairos-redesign[data-view=agents] :is(.agents-phone-round, .agent-call-open, .is-messages .agent-more, .agents-conversation-back):focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 2px; }
  .kairos-redesign[data-view=agents] .agents-phone-round:active, .kairos-redesign[data-view=agents] .agent-call-open:active, .kairos-redesign[data-view=agents] .is-messages .agent-more:active { background: var(--rd-surface-2); }

  /* Options menu: scales in from the button (menus and pickers, 160ms). The list actions sit above the Ecosystem map tools (z-index 4). */
  .kairos-redesign[data-view=agents] .agents-phone-menu:not([hidden]) {
    position: absolute; z-index: 40; top: 54px; right: 0; display: flex; flex-direction: column; min-width: 220px; padding: 6px;
    border: 1px solid var(--rd-line); border-radius: 22px; background: var(--rd-surface-solid); box-shadow: var(--rd-shadow);
    transform-origin: top right;
  }
  .kairos-redesign[data-view=agents] .agents-phone-menu-item {
    display: flex; align-items: center; min-height: 46px; padding: 10px 14px; border: 0; border-radius: 16px; background: transparent;
    color: var(--rd-ink); font: 400 15px var(--rd-font-ui); text-align: left; cursor: pointer;
  }
  .kairos-redesign[data-view=agents] .agents-phone-menu-item:is(:hover, :focus-visible) { background: var(--rd-surface-2); outline: none; }

  /* -- Segmented control: sunk track, raised selection that slides (240ms) ------- */
  .kairos-redesign[data-view=agents] .agents-workspace-tabs {
    position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; width: 100%; box-sizing: border-box;
    padding: 5px; border: 0; border-radius: var(--rd-radius-pill); background: var(--rd-surface-2); box-shadow: none;
  }
  .kairos-redesign[data-view=agents] .agents-workspace-tabs::before {
    content: ''; position: absolute; z-index: -1; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 2); border-radius: var(--rd-radius-pill);
    background: var(--rd-surface-solid); box-shadow: 0 2px 8px rgba(var(--shade-rgb), .1); transition: transform var(--rd-dur-tab) var(--rd-ease);
  }
  .kairos-redesign[data-view=agents] .agents-workspace-tabs::before { transform: translateX(calc(var(--ms-page, 0) * 100%)); }
  .kairos-redesign[data-view=agents] .agents-workspace.ms-dragging .agents-workspace-tabs::before { transition: none; }
  @media (prefers-reduced-motion: reduce) { .kairos-redesign[data-view=agents] .agents-workspace-tabs::before { transition: none; } }
  .kairos-redesign[data-view=agents] .agents-workspace-tabs button {
    box-sizing: border-box; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: var(--rd-radius-pill); background: transparent;
    color: var(--rd-ink-dim); font: 400 15px var(--rd-font-ui); box-shadow: none;
  }
  .kairos-redesign[data-view=agents] .agents-workspace-tabs button[aria-selected=true] { background: transparent; border: 0; box-shadow: none; color: var(--rd-ink); font-weight: 500; }

  /* -- The list page: the rail is the page until a chat is picked ---------------- */
  .kairos-redesign[data-view=agents] .agents-workspace:not(.has-conversation) .agents-messenger { display: block; }
  .kairos-redesign[data-view=agents] .agents-workspace:not(.has-conversation) .agents-messenger-body,
  .kairos-redesign[data-view=agents] .agents-workspace:not(.has-conversation) .agents-rail-scrim { display: none; }
  .kairos-redesign[data-view=agents] .agents-workspace:not(.has-conversation) .agents-chat-rail {
    display: flex; flex-direction: column; gap: 18px; position: static; width: auto; max-width: none; padding: 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none; overflow: visible;
  }
  .kairos-redesign[data-view=agents] .agents-workspace:not(.has-conversation) :is(.agents-rail-top, .agents-rail-create, .agents-rail-history, .agents-rail-inbox) { display: none; }
  .kairos-redesign[data-view=agents] .agents-workspace:not(.has-conversation) .agents-rail-search { display: none; }
  .kairos-redesign[data-view=agents] .agents-workspace:not(.has-conversation) .agents-messenger.is-searching .agents-rail-search {
    display: block; box-sizing: border-box; width: 100%; height: 46px; padding: 0 20px; border: 1px solid var(--rd-line-strong); border-radius: var(--rd-radius-pill);
    background: var(--rd-surface-solid); color: var(--rd-ink); font: 400 15px var(--rd-font-ui);
  }
  .kairos-redesign[data-view=agents] .agents-workspace:not(.has-conversation) :is(.agents-phone-top, .agents-phone-listhead) { display: flex; }
  .kairos-redesign[data-view=agents] .agents-workspace:not(.has-conversation) .agents-rail-lists .rd-empty-state { display: block; }
  .kairos-redesign[data-view=agents] .agents-phone-top { flex-direction: column; gap: 18px; }
  .kairos-redesign[data-view=agents] .agents-phone-top:empty { display: none; }
  .kairos-redesign[data-view=agents] .agents-section-head, .kairos-redesign[data-view=agents] .agents-phone-listhead { display: flex; justify-content: space-between; align-items: baseline; }
  .kairos-redesign[data-view=agents] :is(.agents-section-head, .agents-phone-listhead) h2 { margin: 0; font: italic 600 26px/1.2 var(--rd-font-title); color: var(--rd-ink); }
  /* The boards' small link is 14px text; its tap area is 44px tall inside the row's rhythm. */
  .kairos-redesign[data-view=agents] :is(.agents-see-all, .agents-mark-read) {
    min-width: 44px; min-height: 44px; margin: -12px 0; padding: 0; display: inline-flex; align-items: center; justify-content: flex-end;
    border: 0; background: none; color: var(--accent); font: 400 14px var(--rd-font-ui); cursor: pointer;
  }
  .kairos-redesign[data-view=agents] :is(.agents-see-all, .agents-mark-read):is(:hover, :focus-visible) { text-decoration: underline; }
  .kairos-redesign[data-view=agents] .agents-phone-top .agents-working-now { display: flex; flex-direction: column; gap: 12px; }
  .kairos-redesign[data-view=agents] .agents-working-strip { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px 4px; }
  .kairos-redesign[data-view=agents] .agents-working-strip::-webkit-scrollbar { display: none; }
  .kairos-redesign[data-view=agents] .agents-working-chip {
    flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
    color: var(--rd-ink); font: inherit; cursor: pointer;
  }
  .kairos-redesign[data-view=agents] .agents-working-face {
    position: relative; box-sizing: border-box; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--rd-line); border-radius: var(--rd-radius-pill); background: var(--rd-surface-solid);
  }
  .kairos-redesign[data-view=agents] .agents-working-dot {
    position: absolute; right: 1px; bottom: 1px; width: 14px; height: 14px; box-sizing: border-box; border: 2px solid var(--rd-ground);
    border-radius: var(--rd-radius-pill); background: var(--rd-ink-faint);
  }
  .kairos-redesign[data-view=agents] .agents-working-chip[data-state=needs_you] .agents-working-dot { background: var(--k-gold); }
  .kairos-redesign[data-view=agents] .agents-working-chip[data-state=working] .agents-working-dot { background: var(--success); }
  .kairos-redesign[data-view=agents] .agents-working-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--rd-ink-dim); }
  .kairos-redesign[data-view=agents] .agents-working-chip:focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 2px; border-radius: 18px; }

  /* Inbox card and the all-caught-up card: 26px cards. */
  .kairos-redesign[data-view=agents] :is(.agents-inbox-card, .agents-clear-card, .agents-next-card) {
    box-sizing: border-box; border: 1px solid var(--rd-line); border-radius: var(--rd-radius-card); background: var(--rd-surface-solid);
    box-shadow: 0 1px 2px rgba(var(--shade-rgb), .05); color: var(--rd-ink);
  }
  .kairos-redesign[data-view=agents] .agents-inbox-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
  .kairos-redesign[data-view=agents] .agents-inbox-card-copy, .kairos-redesign[data-view=agents] .agents-clear-copy { flex: 1; min-width: 0; }
  .kairos-redesign[data-view=agents] .agents-inbox-card-label { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--rd-ink-dim); }
  .kairos-redesign[data-view=agents] :is(.agents-inbox-card-title, .agents-clear-title) { font: 600 22px/1.25 var(--rd-font-title); }
  .kairos-redesign[data-view=agents] .agents-inbox-card .rd-pill { min-height: 44px; padding: 0 18px; font-size: 14px; }
  .kairos-redesign[data-view=agents] .agents-clear-card { display: flex; align-items: center; gap: 16px; padding: 18px; }
  .kairos-redesign[data-view=agents] .agents-clear-faces { display: flex; }
  .kairos-redesign[data-view=agents] .agents-clear-faces > * + * { margin-left: -12px; }
  .kairos-redesign[data-view=agents] .agents-clear-sub { font-size: 13px; color: var(--rd-ink-dim); }
  .kairos-redesign[data-view=agents] .agents-next-up { display: flex; flex-direction: column; gap: 12px; }
  .kairos-redesign[data-view=agents] .agents-next-card { padding: 4px 16px; }
  .kairos-redesign[data-view=agents] .agents-next-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--rd-surface-2); }
  .kairos-redesign[data-view=agents] .agents-next-row:last-child { border-bottom: 0; }
  .kairos-redesign[data-view=agents] .agents-next-name { flex: 1; min-width: 0; font-size: 15px; }
  .kairos-redesign[data-view=agents] .agents-next-time { font-size: 13px; color: var(--rd-ink-dim); white-space: nowrap; }

  /* Your agents: one 26px card of rows. */
  .kairos-redesign[data-view=agents] .agents-workspace:not(.has-conversation) .agents-rail-lists { display: block; }
  .kairos-redesign[data-view=agents] .agents-rail-group {
    display: flex; flex-direction: column; margin: 0; padding: 2px 16px; box-sizing: border-box; border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius-card); background: var(--rd-surface-solid); box-shadow: 0 1px 2px rgba(var(--shade-rgb), .05);
  }
  .kairos-redesign[data-view=agents] .agents-rail-group:empty { display: none; }
  .kairos-redesign[data-view=agents] .agents-rail-row { position: relative; border-bottom: 1px solid var(--rd-surface-2); }
  .kairos-redesign[data-view=agents] .agents-rail-row:last-child { border-bottom: 0; }
  .kairos-redesign[data-view=agents] .agents-messenger .agents-rail-item, .kairos-redesign[data-view=agents] .agents-messenger .agents-rail-item:hover, .kairos-redesign[data-view=agents] .agents-messenger .agents-rail-item[aria-current=page] {
    box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 0; padding: 13px 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none; color: var(--rd-ink); font-family: var(--rd-font-ui); text-align: left; text-decoration: none; cursor: pointer;
  }
  .kairos-redesign[data-view=agents] .agents-messenger .agents-rail-item .agent-avatar { width: 44px !important; height: 44px !important; flex: none; }
  .kairos-redesign[data-view=agents] .agents-messenger .agents-rail-copy { flex: 1; min-width: 0; display: block; }
  .kairos-redesign[data-view=agents] .agents-messenger .agents-rail-copy > strong { display: block; font-size: 15px; font-weight: 500; }
  .kairos-redesign[data-view=agents] .agents-messenger .agents-rail-copy > span:not(.agents-row-role) {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--rd-ink-dim);
  }
  .kairos-redesign[data-view=agents] .agents-messenger .agents-rail-meta { display: flex; flex-direction: column; align-items: flex-end; align-self: center; gap: 6px; padding: 0; font-size: 12px; color: var(--rd-ink-dim); }
  .kairos-redesign[data-view=agents] .agents-messenger .agents-chat-unread {
    box-sizing: border-box; min-width: 22px; height: 22px; padding: 0 6px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--rd-radius-pill); background: var(--rd-primary-bg); color: var(--rd-primary-fg); font-size: 12px;
  }
  .kairos-redesign[data-view=agents] .agents-messenger .agents-chat-pin { font-size: 11px; }
  .kairos-redesign[data-view=agents] .agents-messenger .agents-row-menu { display: none; }
  .kairos-redesign[data-view=agents] .agents-messenger .agents-team-avatar { width: 44px; height: 44px; flex: none; }
  .kairos-redesign[data-view=agents] .agents-messenger .agents-team-avatar .agent-avatar { width: 28px !important; height: 28px !important; }
  .kairos-redesign[data-view=agents] .agents-messenger .agents-rail-item:focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 2px; border-radius: 18px; }
  .kairos-redesign[data-view=agents] :is(.agents-rail-no-match, .agents-team-error) { margin: 12px 0 0; font-size: 13px; color: var(--rd-ink-dim); text-align: center; }
  .kairos-redesign[data-view=agents] .agents-rail-lists .rd-empty-state { padding: 24px 0; }
  .kairos-redesign[data-view=agents] .agents-rail-lists .rd-empty-state h2 { font: italic 600 26px/1.2 var(--rd-font-title); margin: 12px 0 6px; }
  .kairos-redesign[data-view=agents] .agents-rail-lists .rd-empty-state p { margin: 0 0 18px; font-size: 14px; }

  /* All answered (AgentsClear): the agents become a two-column grid of cards. */
  .kairos-redesign[data-view=agents] .agents-workspace:not(.has-conversation) .agents-chat-rail[data-clear=true] .agents-rail-group {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  }
  .kairos-redesign[data-view=agents] .agents-chat-rail[data-clear=true] .agents-rail-row {
    border: 1px solid var(--rd-line); border-radius: var(--rd-radius-card); background: var(--rd-surface-solid); box-shadow: 0 1px 2px rgba(var(--shade-rgb), .05);
  }
  .kairos-redesign[data-view=agents] .agents-messenger .agents-chat-rail[data-clear=true] .agents-rail-item { padding: 14px; gap: 10px; }
  .kairos-redesign[data-view=agents] .agents-messenger .agents-chat-rail[data-clear=true] .agents-rail-item .agent-avatar { width: 38px !important; height: 38px !important; }
  .kairos-redesign[data-view=agents] .agents-messenger .agents-chat-rail[data-clear=true] .agents-rail-copy > span:not(.agents-row-role) { display: none; }
  .kairos-redesign[data-view=agents] .agents-messenger .agents-chat-rail[data-clear=true] .agents-row-role { display: block; font-size: 12px; color: var(--rd-ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kairos-redesign[data-view=agents] .agents-messenger .agents-chat-rail[data-clear=true] .agents-rail-meta time, .kairos-redesign[data-view=agents] .agents-messenger .agents-chat-rail[data-clear=true] .agents-chat-pin { display: none; }
  .kairos-redesign[data-view=agents] .agents-chat-rail[data-clear=true] .agents-mark-read { display: none; }
  .kairos-redesign[data-view=agents] .agents-chat-rail[data-clear=true] .agents-rail-meta:not(:has(.agents-chat-unread)) { display: none; }
  .kairos-redesign[data-view=agents] .agents-messenger .agents-chat-rail[data-clear=true] .agents-chat-unread { position: absolute; top: 10px; right: 12px; }
}

/* -- AgentDM board: Back, Call, More; the bot card; bubbles; a floating pill composer ---- */
@media (max-width: 768px) {
  .kairos-redesign[data-view=agents] .agents-workspace.has-conversation { gap: 0; }
  .kairos-redesign[data-view=agents] .agents-workspace.has-conversation .agents-workspace-bar { margin: 0; }
  .kairos-redesign[data-view=agents] .agents-workspace.has-conversation .agents-workspace-bar > h2,
  .kairos-redesign[data-view=agents] .agents-workspace.has-conversation .agents-workspace-tabs,
  .kairos-redesign[data-view=agents] .agents-workspace.has-conversation .agents-chats-open { display: none; }
  .kairos-redesign[data-view=agents] .agents-workspace.has-conversation .agents-conversation-back:not([hidden]) {
    position: absolute; z-index: 3; top: calc(var(--mobile-safe-top, env(safe-area-inset-top, 0px)) + 6px); left: 20px; margin: 0; font-size: 0;
  }
  .kairos-redesign[data-view=agents] .agents-conversation-back svg { width: 20px; height: 20px; }
  /* The conversation sits on the page, not in a frame. */
  .kairos-redesign[data-view=agents] .agents-workspace.has-conversation .agents-messenger-stage { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
  .kairos-redesign[data-view=agents] .agents-workspace.has-conversation .agents-messenger-page { padding: 0; overflow: visible; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-conversation-page { padding: 0; gap: 12px; overflow: visible; background: transparent; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-conversation-page .agent-conversation-topbar {
    position: absolute; z-index: 3; top: calc(var(--mobile-safe-top, env(safe-area-inset-top, 0px)) + 6px); right: 20px; left: auto; display: flex; gap: 8px;
    height: 46px; width: auto; margin: 0; padding: 0; border: 0; grid-template-columns: none;
  }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-conversation-topbar > :is(.agent-back, .agent-mobile-menu-slot, .agent-tabs) { display: none; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-topbar-tools { display: flex; align-items: center; gap: 8px; width: auto; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-topbar-tools .agent-info-toggle { display: none; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-topbar-tools .agent-call-open .agent-call-open-label { display: none; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-topbar-tools .agent-call-open .agent-call-open-icon { display: grid; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-call-open.is-call-active { background: var(--rd-primary-bg); color: var(--rd-primary-fg); border-color: var(--rd-primary-bg); }
  .kairos-redesign[data-view=agents] .agents-messenger .is-messages .agent-more[aria-expanded=true], .kairos-redesign[data-view=agents] .agents-messenger .agent-more[aria-expanded=true] { background: var(--rd-surface-2); }
  .kairos-redesign[data-view=agents] .agent-more-menu:not([hidden]) {
    top: 54px; right: 0; min-width: 230px; padding: 6px; border: 1px solid var(--rd-line); border-radius: 22px; background: var(--rd-surface-solid);
    box-shadow: var(--rd-shadow); animation: rd-menu var(--rd-dur-menu) var(--rd-ease) backwards; transform-origin: top right;
  }
  .kairos-redesign[data-view=agents] .agent-more-menu .agent-more-item { min-height: 46px; border-radius: 16px; font: 400 15px var(--rd-font-ui); color: var(--rd-ink); }
  .kairos-redesign[data-view=agents] .agent-more-menu .agent-more-item:is(:hover, :focus-visible) { background: var(--rd-surface-2); }

  /* The bot card, compact so more of the conversation shows: Kip 52, serif italic name 24, role, pills. */
  .kairos-redesign[data-view=agents] .agent-conversation-page .agent-dm-card {
    display: block; margin: -6px 0 0; padding: 12px 14px; box-sizing: border-box; border: 1px solid var(--rd-line); border-radius: var(--rd-radius-card);
    background: var(--rd-surface-solid); box-shadow: 0 1px 2px rgba(var(--shade-rgb), .05);
  }
  .kairos-redesign[data-view=agents] .agent-conversation-page .agent-dm-card:empty { display: none; }
  .kairos-redesign[data-view=agents] .agent-dm-card .agent-header { display: block; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .kairos-redesign[data-view=agents] .agent-dm-card .agent-profile-face {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto 28px; column-gap: 12px; align-items: center; width: 100%;
    min-height: 52px; max-width: none; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--rd-ink); text-align: left; cursor: pointer;
  }
  .kairos-redesign[data-view=agents] .agent-dm-card .agent-profile-face:focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 4px; border-radius: 18px; }
  .kairos-redesign[data-view=agents] .agent-dm-card .agent-profile-face .agent-avatar { grid-row: 1 / 4; grid-column: 1; width: 52px !important; height: 52px !important; }
  .kairos-redesign[data-view=agents] .agent-dm-card .agent-profile-face h2 { grid-column: 2; grid-row: 1; align-self: end; max-width: none; margin: 0; font: italic 600 24px/1 var(--rd-font-title); color: var(--rd-ink); }
  .kairos-redesign[data-view=agents] .agent-dm-card .agent-dm-role { grid-column: 2; grid-row: 2; display: block; margin-top: 2px; font: 400 13px/1.3 var(--rd-font-ui); color: var(--rd-ink-dim); }
  .kairos-redesign[data-view=agents] .agent-dm-card .agent-dm-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: -28px 0 0 64px; position: relative; }
  .kairos-redesign[data-view=agents] .agent-dm-card .agent-dm-pill { padding: 4px 10px; border-radius: var(--rd-radius-pill); background: var(--rd-surface-2); color: var(--rd-ink); font-size: 12px; line-height: 1.3; }

  /* Messages */
  .kairos-redesign[data-view=agents] .is-messages .agent-conversation-stream { padding: 4px 0 8px; }
  .kairos-redesign[data-view=agents] .is-messages .session-chat-messages { gap: 12px; padding: 0; }
  .kairos-redesign[data-view=agents] .is-messages .agent-message-byline { display: none; }
  .kairos-redesign[data-view=agents] .is-messages .agent-message-date { padding: 0; align-self: center; font-size: 12px; color: var(--rd-ink-dim); }
  .kairos-redesign[data-view=agents] .is-messages .session-chat-messages .msg { max-width: 80%; gap: 0; }
  .kairos-redesign[data-view=agents] .is-messages .session-chat-messages .msg.user { max-width: 72%; }
  .kairos-redesign[data-view=agents] .is-messages .session-chat-messages .msg + .msg, .kairos-redesign[data-view=agents] .is-messages .msg.user + .msg.user { margin-top: 0; }
  .kairos-redesign[data-view=agents] .is-messages .session-chat-messages .msg > .msg-body {
    padding: 13px 16px; border-radius: 22px 22px 22px 6px; border: 1px solid var(--rd-line); background: var(--rd-surface-solid); color: var(--rd-ink);
    font-size: 15px; line-height: 1.45; max-width: none;
  }
  .kairos-redesign[data-view=agents] .is-messages .session-chat-messages .msg.user > .msg-body { border-radius: 22px 22px 6px 22px; border-color: var(--rd-primary-bg); background: var(--rd-primary-bg); color: var(--rd-primary-fg); }
  .kairos-redesign[data-view=agents] .is-messages .session-chat-messages .msg > .msg-body p { margin: 0; }
  .kairos-redesign[data-view=agents] .is-messages .session-chat-messages .msg > .msg-body p + p { margin-top: 8px; }

  /* Waiting-for-your-response cards inside the thread (the board's bubble). */
  .kairos-redesign[data-view=agents] .agent-conversation-page .agent-approval-card {
    gap: 10px; max-width: 84%; padding: 14px 16px; box-sizing: border-box; border: 1px solid var(--rd-line-strong); border-radius: 22px;
    background: var(--rd-surface-solid); box-shadow: none; animation: none;
  }
  .kairos-redesign[data-view=agents] .agent-approval-card .agent-blocked-status { order: -1; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
  .kairos-redesign[data-view=agents] .agent-approval-card .agent-inbox-head { display: flex; flex-wrap: wrap; gap: 6px; }
  .kairos-redesign[data-view=agents] .agent-approval-card .agent-inbox-head .agent-avatar, .kairos-redesign[data-view=agents] .agent-approval-card .agent-inbox-kind, .kairos-redesign[data-view=agents] .agent-approval-card .agent-inbox-time { display: none; }
  .kairos-redesign[data-view=agents] .agent-approval-card .agent-inbox-title { font-size: 15px; font-weight: 400; color: var(--rd-ink); }
  .kairos-redesign[data-view=agents] .agent-approval-card .agent-inbox-body { color: var(--rd-ink-dim); font-size: 13px; }
  .kairos-redesign[data-view=agents] .agent-approval-card .agent-inbox-actions { flex-direction: row; gap: 8px; }
  .kairos-redesign[data-view=agents] .agent-approval-card .agent-inbox-actions .btn {
    flex: 0 0 auto; min-height: 44px; padding: 0 16px; border: 1px solid var(--rd-line-strong); border-radius: var(--rd-radius-pill); background: transparent;
    color: var(--rd-ink); font: 400 13px var(--rd-font-ui); text-decoration: none;
  }
  .kairos-redesign[data-view=agents] .agent-approval-card .agent-inbox-actions .btn.primary { order: -1; border-color: var(--rd-primary-bg); background: var(--rd-primary-bg); color: var(--rd-primary-fg); }
  .kairos-redesign[data-view=agents] .agent-approval-card .agent-inbox-compose { gap: 8px; flex-wrap: wrap; }
  .kairos-redesign[data-view=agents] .agent-approval-card .agent-inbox-compose input { flex: 1 1 100%; border-radius: var(--rd-radius-pill); }

  /* Composer: one floating pill (input and send); the model row opens with focus. */
  .kairos-redesign[data-view=agents] .is-messages .agent-composer-row { padding-top: 0; }
  .kairos-redesign[data-view=agents] .is-messages .side-chat-composer {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px 44px; align-items: center; gap: 4px; padding: 8px; box-sizing: border-box;
    border: 1px solid var(--rd-line); border-radius: 30px; background: var(--rd-surface-solid); box-shadow: 0 10px 30px rgba(var(--shade-rgb), .1);
  }
  .kairos-redesign[data-view=agents] .is-messages .side-chat-composer .agent-composer-add { grid-row: 1; grid-column: 1; }
  .kairos-redesign[data-view=agents] .is-messages .side-chat-composer .side-chat-input-top { grid-row: 1; grid-column: 2; }
  .kairos-redesign[data-view=agents] .is-messages .side-chat-composer .agent-composer-mic { grid-row: 1; grid-column: 3; }
  .kairos-redesign[data-view=agents] .is-messages .side-chat-composer .side-chat-send { grid-row: 1; grid-column: 4; }
  .kairos-redesign[data-view=agents] .is-messages .side-chat-composer .side-chat-input { min-height: 44px; padding: 11px 6px; font: 400 15px var(--rd-font-ui); }
  .kairos-redesign[data-view=agents] .is-messages .side-chat-composer .session-chat-tools { display: none; grid-row: 2; grid-column: 1 / -1; padding: 4px 4px 0; }
  .kairos-redesign[data-view=agents] .is-messages .side-chat-composer:focus-within .session-chat-tools { display: flex; }
  .kairos-redesign[data-view=agents] .agent-conversation-page .side-chat-composer .btn:is(.agent-composer-add, .side-chat-send):not(.primary):not(.danger) { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .kairos-redesign[data-view=agents] .agent-conversation-page .side-chat-composer .btn:is(.agent-composer-add, .side-chat-send)::before { inset: 1px; }
  .kairos-redesign[data-view=agents] .agent-conversation-page .side-chat-composer .agent-composer-add::before { background: transparent; }
  .kairos-redesign[data-view=agents] .agent-conversation-page .side-chat-composer .side-chat-send::before { background: var(--rd-primary-bg); }
  .kairos-redesign[data-view=agents] .agent-conversation-page .side-chat-composer .side-chat-send::after { background: var(--rd-primary-fg); }
  .kairos-redesign[data-view=agents] .is-messages .agent-chat-empty .title { font: italic 600 26px/1.2 var(--rd-font-title); }
}

@media (max-width: 768px) {
  .kairos-redesign[data-view=agents] .agent-dm-card .agent-profile-face kairos-mascot { width: 52px !important; height: 52px !important; }
  .kairos-redesign[data-view=agents] :is(.agents-inbox-card-title, .agents-clear-title) { font-style: normal; }
  .kairos-redesign[data-view=agents] .is-messages .agent-conversation-stream { overflow-y: auto; overscroll-behavior: contain; }
  .kairos-redesign[data-view=agents] .agent-conversation-page .agent-chat-main, .kairos-redesign[data-view=agents] .agent-conversation-page .session-chat { overflow: hidden; }
}

/* Features without a board take the boards' language: 26px cards, serif italic titles, pills. */
@media (max-width: 768px) {
  .kairos-redesign[data-view=agents] .agents-inbox-view .view-header h2 { font: italic 600 30px/1.1 var(--rd-font-title); }
  .kairos-redesign[data-view=agents] .agents-view :is(.glass.card, .agent-inbox) { border: 1px solid var(--rd-line); border-radius: var(--rd-radius-card); background: var(--rd-surface-solid); box-shadow: 0 1px 2px rgba(var(--shade-rgb), .05); }
  .kairos-redesign[data-view=agents] .agents-view .glass.card > .title, .kairos-redesign[data-view=agents] .agents-view .agent-inbox > .title { font: italic 600 22px/1.2 var(--rd-font-title); }
  .kairos-redesign[data-view=agents] .agents-view .agent-inbox-kind { letter-spacing: .16em; font-size: 11px; font-weight: 500; }
  .kairos-redesign[data-view=agents] .agents-view :is(.agent-inbox-actions, .agent-inbox-compose) .btn {
    min-height: 44px; padding: 0 18px; border: 1px solid var(--rd-line-strong); border-radius: var(--rd-radius-pill); background: transparent;
    color: var(--rd-ink); font: 400 14px var(--rd-font-ui); text-decoration: none;
  }
  .kairos-redesign[data-view=agents] .agents-view :is(.agent-inbox-actions, .agent-inbox-compose) .btn.primary { border-color: var(--rd-primary-bg); background: var(--rd-primary-bg); color: var(--rd-primary-fg); }
  .kairos-redesign[data-view=agents] .agents-view .agent-inbox-item { border-top-color: var(--rd-surface-2); }
  .kairos-redesign[data-view=agents] .agents-view :is(.agent-assignment-card, .agent-routine-preview) { border-radius: 18px; }
  .kairos-redesign[data-view=agents] .agents-view .disclosure-panel { border: 1px solid var(--rd-line); border-radius: var(--rd-radius-card); background: var(--rd-surface-solid); }
  .kairos-redesign[data-view=agents] .agent-ecosystem { border-radius: var(--rd-radius-card); box-shadow: 0 1px 2px rgba(var(--shade-rgb), .05); }
  .kairos-redesign[data-view=agents] .agent-ecosystem .ecosystem-header h2 { font: italic 600 26px/1.2 var(--rd-font-title); }
  .kairos-redesign[data-view=agents] .agent-ecosystem :is(.ecosystem-control, .ecosystem-more > summary) { border-radius: var(--rd-radius-pill); }
  .kairos-redesign[data-view=agents] .agents-messenger .swarm-view h1 { font: italic 600 30px/1.1 var(--rd-font-title); }
  .kairos-redesign[data-view=agents] .agents-messenger .swarm-composer { border-radius: 30px; }
  .kairos-redesign[data-view=agents] .agents-messenger .swarm-message { border-radius: 22px 22px 22px 6px; }
  .kairos-redesign[data-view=agents] .agents-messenger :is(.swarm-view, .swarm-layout > section) { background: transparent; }
  .kairos-redesign[data-view=agents] .agent-call .agent-call-action { border-radius: var(--rd-radius-pill); }
}

@media (max-width: 768px) {
  .kairos-redesign[data-view=agents] .view.agents-shell-view { padding-bottom: calc(max(24px, var(--mobile-safe-bottom, env(safe-area-inset-bottom, 0px)))); }
  .kairos-redesign[data-view=agents] .view.agents-shell-view:has(.agents-workspace.has-conversation) { padding-bottom: 0; }
}

@media (max-width: 768px) {
  /* The list page scrolls as a page; the conversation and the village keep their own fixed frames. */
  .kairos-redesign[data-view=agents] .view.agents-shell-view:has(.agents-workspace:not(.has-conversation) > .agents-messenger:not([hidden])) { overflow-y: auto; }
  .kairos-redesign[data-view=agents] .agents-workspace:not(.has-conversation):has(> .agents-messenger:not([hidden])) { flex: none; min-height: auto; }
  .kairos-redesign[data-view=agents] .agents-workspace:not(.has-conversation) > .agents-messenger:not([hidden]) { flex: none; min-height: auto; }
}

@media (max-width: 768px) {
  /* The title box ends where the two round buttons begin. */
  .kairos-redesign[data-view=agents] #view-content .agents-workspace-bar > h2 { right: auto; width: auto; max-width: calc(100% - 140px); }
}

@media (max-width: 768px) {
  .kairos-redesign[data-view=agents] .agents-messenger .agent-conversation-page .agent-conversation-topbar, .kairos-redesign[data-view=agents] .agents-messenger .agent-topbar-tools { align-items: flex-start; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-topbar-tools { height: 46px; }
}

/* -- Desktop agent conversation (David, 2026-10-25) --------------------------
   One top row: the name card on the left, a compact Chat / Work / Routines /
   Memory control on the right (it wraps under the card, then shrinks its labels,
   as the stage narrows). The old side cards sit beside the thread and fill its
   height; the stage is a size container, so a narrow window tucks the cards
   behind Info instead of squeezing the thread. The "..." button is gone: its
   four places are the tabs, and the conversation list is the left rail. */
@media (min-width: 769px) {
  .kairos-redesign[data-view=agents] .agents-messenger-stage { container: agent-stage / inline-size; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-conversation-page { padding: 16px 20px; gap: 14px; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-conversation-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; min-height: 0; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-topbar-tools { display: contents; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-more, .kairos-redesign[data-view=agents] .agents-messenger .agent-more-menu { display: none; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-header { order: 1; flex: 1 1 160px; min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; margin: 0; padding: 6px 14px 6px 6px;
    background: var(--rd-surface-solid); border: 1px solid var(--rd-line); border-radius: var(--rd-radius-pill); box-shadow: var(--rd-shadow); }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-header .agent-profile-face { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; flex: 0 1 auto; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-header .agent-profile-face:focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 3px; border-radius: var(--rd-radius-pill); }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-header .agent-profile-face .agent-avatar { grid-row: 1 / 3; grid-column: 1; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-header .agent-profile-face h2 { grid-column: 2; grid-row: 1; align-self: end; max-width: none; margin: 0; font: italic 600 20px/1.05 var(--rd-font-title); color: var(--rd-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-header .agent-dm-role { grid-column: 2; grid-row: 2; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px/1.3 var(--rd-font-ui); color: var(--rd-ink-dim); }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-header .agent-dm-pills { display: flex; flex: none; gap: 6px; margin-left: auto; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-header .agent-dm-pill { padding: 3px 10px; border-radius: var(--rd-radius-pill); background: var(--rd-surface-2); color: var(--rd-ink); font: 500 12px/1.3 var(--rd-font-ui); white-space: nowrap; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-tabs { --segment: 0; order: 2; display: grid; flex: 0 1 330px; width: auto; min-width: 0; max-width: 100%; margin: 0; padding: 3px; gap: 0;
    border: 1px solid var(--rd-line); border-radius: var(--rd-radius-pill); background: var(--rd-surface-2); box-shadow: none; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-tabs::before { top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 4); border-radius: var(--rd-radius-pill); background: var(--rd-surface-solid); border: 1px solid var(--rd-line-strong); box-sizing: border-box; box-shadow: none; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-tab { min-height: 30px; padding: 4px 8px; border-radius: var(--rd-radius-pill); font: 500 12.5px/1.2 var(--rd-font-ui); color: var(--rd-ink-dim); overflow: hidden; text-overflow: ellipsis; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-tab.active { color: var(--rd-ink); }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-tab:focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 1px; }
  .kairos-redesign[data-view=agents] .agents-messenger :is(.agent-call-open, .agent-info-toggle) { min-height: 36px; min-width: 0; padding: 4px 14px; font: 500 13px var(--rd-font-ui); }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-call-open { order: 3; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-info-toggle { order: 4; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-conversation-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 16px; align-items: stretch; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-conversation-layout > .agent-chat-host { grid-column: 1; grid-row: 1; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-live-panels { display: none; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-live-panels:not([hidden]) { grid-column: 2; grid-row: 1; flex-direction: column; gap: 12px; min-height: 0; max-height: none; overflow-y: auto; padding: 0; }
  .kairos-redesign[data-view=agents] .agents-messenger .is-info-open .agent-live-panels:not([hidden]) { display: flex; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-live-panels > :is(.agent-live-panel, .agent-next-panel, .agent-model-panel) { flex: none; padding: 16px 18px; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-live-panels .agent-next-panel { flex: 1 1 auto; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-live-panel .agents-inspector-profile { display: none; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-live-panels > .agent-inline-activity { flex: none; max-height: 40dvh; overflow-y: auto; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-live-panels :is(.agent-header-actions, .agent-model-panel) .btn { min-height: 34px; padding: 4px 14px; justify-content: center; font: 500 13px var(--rd-font-ui);
    background: var(--rd-surface-solid); color: var(--rd-ink); border: 1px solid var(--rd-line-strong); border-radius: var(--rd-radius-pill); }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-live-panels .agent-header-actions { margin-top: 10px; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-model-panel .agent-model-summary { margin: 0 0 12px; }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-live-panels .agent-give-job { flex: none; width: 100%; min-height: 52px; padding: 12px 18px; justify-content: flex-start; text-align: left; font: 600 14px var(--rd-font-ui);
    background: var(--rd-surface-solid); color: var(--rd-ink); border: 1px solid var(--rd-line-strong); border-radius: var(--rd-radius-card); box-shadow: var(--rd-shadow); }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-live-panels .agent-give-job:is(:hover, :focus-visible) { background: var(--rd-surface-2); }
  .kairos-redesign[data-view=agents] .agents-messenger .agent-live-panels .agent-give-job:focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 2px; }
  @container agent-stage (max-width: 760px) {
    .kairos-redesign[data-view=agents] .agents-messenger .agent-tabs { order: 5; flex: 1 1 100%; }
  }
  @container agent-stage (max-width: 560px) {
    .kairos-redesign[data-view=agents] .agents-messenger .agent-header .agent-dm-pills { display: none; }
    .kairos-redesign[data-view=agents] .agents-messenger .agent-tab { padding: 4px 3px; font-size: 12px; }
  }
  @container agent-stage (min-width: 560px) {
    .kairos-redesign[data-view=agents] .agents-messenger .is-info-open .agent-conversation-layout { grid-template-columns: minmax(0, 1fr) 240px; }
  }
  @container agent-stage (min-width: 800px) {
    .kairos-redesign[data-view=agents] .agents-messenger .agent-conversation-layout { grid-template-columns: minmax(0, 1fr) 264px; }
    .kairos-redesign[data-view=agents] .agents-messenger .agent-live-panels:not([hidden]) { display: flex; }
    .kairos-redesign[data-view=agents] .agents-messenger .agent-info-toggle { display: none; }
  }
  @container agent-stage (max-width: 559px) {
    .kairos-redesign[data-view=agents] .agents-messenger .is-info-open .agent-conversation-layout { grid-template-rows: minmax(0, 40%) minmax(0, 1fr); }
    .kairos-redesign[data-view=agents] .agents-messenger .is-info-open .agent-live-panels:not([hidden]) { grid-column: 1; grid-row: 1; }
    .kairos-redesign[data-view=agents] .agents-messenger .is-info-open .agent-conversation-layout > .agent-chat-host { grid-row: 2; }
  }
}
@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
  .kairos-redesign[data-view=agents] .agents-messenger .agent-tabs::before { transition: none; }
}

/* The phone's info panel keeps showing the model as one plain line, as it did before the desktop got its own card. */
@media (max-width: 768px) {
  .kairos-redesign .agent-model-panel { padding: 0 16px; background: none; border: 0; box-shadow: none; }
  .kairos-redesign .agent-model-panel :is(.title, .agent-model-change) { display: none; }
}