/* ══════════════════════════════════════════════════════════════════════════
   Chat UI — Clean Modern Design
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Layout ───────────────────────────────────────────────────────────── */
.chat-fullpage {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}

.chat-page {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Sidebar
   ══════════════════════════════════════════════════════════════════════════ */
.session-sidebar {
  width: 272px;
  min-width: 240px;
  border-right: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.session-new-btn {
  margin: 14px 14px 6px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 150ms;
}

.session-new-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
}

/* ── Nav buttons (Secretary, Activity) ────────────────────────────────── */
.session-nav-btn {
  margin: 2px 14px;
  padding: 8px 12px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 120ms;
  text-align: left;
}

.session-nav-btn:hover { background: var(--surface-hover); color: var(--text); }
.session-nav-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-left: 2px solid var(--accent);
  padding-left: 10px;
}

.session-activity-btn {
  margin-top: auto;
  margin-bottom: 10px;
}

/* ── Search ───────────────────────────────────────────────────────────── */
.session-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 14px 8px;
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  background: var(--surface);
  border: 1px solid transparent;
  color: var(--text-secondary);
  transition: border-color 150ms;
}

.session-search-wrap:focus-within {
  border-color: var(--accent);
}

.session-search {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  outline: none;
}

.session-search::placeholder { color: var(--text-secondary); }

/* ── List & Groups ────────────────────────────────────────────────────── */
.session-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.session-list-virtualized {
  position: relative;
  contain: strict;
}

.session-group { margin-bottom: 2px; }

.session-group-label {
  padding: 10px 16px 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Session tree ─────────────────────────────────────────────────────── */
.session-tree-node { position: relative; }
.session-tree-primary { display: flex; align-items: stretch; }

.session-expand-btn {
  width: 20px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 4px;
  color: var(--text-secondary);
}

.session-expand-btn::before {
  content: '';
  display: block;
  width: 0; height: 0;
  border-left: 4px solid currentColor;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transition: transform 150ms;
  transform: rotate(90deg);
}

.session-expand-btn.collapsed::before { transform: rotate(0deg); }
.session-expand-btn:hover { color: var(--accent); }

.session-children {
  position: relative;
  margin-left: 12px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}

.session-child-count {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  padding: 2px 16px 2px 36px;
  text-align: left;
}

.session-child-count:hover { color: var(--accent); }

.session-unread-badge {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* ── Session item ─────────────────────────────────────────────────────── */
.session-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-xs);
  margin: 1px 8px;
  width: calc(100% - 16px);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: background 120ms, border-color 120ms;
  border-left: 2px solid transparent;
}

.session-item:hover { background: var(--surface-hover); }
.session-item.active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

.session-item.session-item-child {
  padding: 5px 12px 5px 6px;
  border-left: none;
  font-size: 12px;
  position: relative;
  margin: 0;
  width: 100%;
}

.session-tree-line {
  position: absolute;
  left: -8px;
  top: 0;
  bottom: 50%;
  width: 8px;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-bottom-left-radius: 4px;
  pointer-events: none;
}

.session-tree-line.last { bottom: 50%; }

.session-agent-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 0 5px;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-right: 4px;
}

.session-runtime-badge {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  margin-right: 4px;
  flex-shrink: 0;
}

.session-runtime-badge svg {
  width: 12px;
  height: 12px;
}

.session-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.session-dot.status-running { background: var(--green); opacity: 0.35; }
.session-dot.status-running-idle { background: var(--green); opacity: 0.35; }
.session-dot.status-tool-active {
  background: var(--green);
  box-shadow: 0 0 4px color-mix(in srgb, var(--green) 55%, transparent);
}
.session-dot.status-reflecting {
  background: var(--yellow);
  box-shadow: 0 0 4px color-mix(in srgb, var(--yellow) 55%, transparent);
}
.session-dot.status-idle    { background: var(--accent); opacity: 0.7; }
.session-dot.status-done    { background: var(--green); }
.session-dot.status-pending { background: var(--text-secondary); opacity: 0.4; }
.session-dot.status-failed  { background: var(--red); }
.session-dot.status-cancelled { background: var(--text-secondary); opacity: 0.3; }
.session-dot.status-blocked { background: var(--yellow); }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

.session-item-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.session-item-title {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.session-item-meta {
  font-size: 11px;
  color: var(--text-secondary);
}

.session-delete-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: all 120ms;
}

.session-delete-btn:hover { color: var(--red); background: rgba(248, 113, 113, 0.1); }

.session-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Task Header Bar
   ══════════════════════════════════════════════════════════════════════════ */
.task-header-shell {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}

.task-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  gap: 12px;
  min-height: 48px;
  /* Defensive: contain children so a too-wide pill row can't paint over
     the right-side action cluster when the panel is dragged narrow. */
  min-width: 0;
}

.task-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  /* Allow the pill row to flow onto a second line in a narrow panel
     instead of overflowing under the action buttons. */
  flex-wrap: wrap;
  row-gap: 6px;
}

.task-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 120ms;
  /* Title may shrink first to leave room for the status pill / actions,
     but never below something legible. */
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
}

.task-title:hover { color: var(--accent); }

.task-title-input {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius-xs);
  padding: 2px 8px;
  font-family: inherit;
  outline: none;
  width: 100%;
  max-width: 400px;
}

.task-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.task-status-pill[data-status="running"] { color: var(--green); }
.task-status-pill[data-status="idle"]    { color: var(--accent); }
.task-status-pill[data-status="failed"]  { color: var(--red); }
.task-status-pill[data-status="blocked"] { color: var(--yellow); }

.task-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.task-status-pill[data-working="true"] .task-status-dot {
  opacity: 0.9;
  box-shadow: 0 0 5px color-mix(in srgb, currentColor 45%, transparent);
}

.task-tool-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(52, 211, 153, 0.08);
  color: var(--green);
  font-size: 11px;
  flex-shrink: 0;
}

.task-tool-pill code {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  background: none;
  padding: 0;
}

.task-projection-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(234, 179, 8, 0.08);
  color: var(--yellow);
  font-size: 10px;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  flex-shrink: 0;
}

.task-role-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.08);
  color: var(--green);
  font-size: 11px;
  flex-shrink: 0;
}

.task-employee-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.08);
  color: var(--accent);
  font-size: 11px;
  flex-shrink: 0;
}

.task-employee-icon {
  font-size: 11px;
  line-height: 1;
}

.task-agent-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(14, 165, 233, 0.08);
  color: var(--blue);
  font-size: 11px;
  flex-shrink: 0;
}

.task-agent-icon {
  font-size: 11px;
  line-height: 1;
}

.task-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.task-header-avatars { display: flex; }

.task-header-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 2px solid var(--bg);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -4px;
}

.task-header-avatar:first-child { margin-left: 0; }

.task-header-time {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.6;
}

.task-header-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 0 20px 10px;
}

.task-runtime-metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent 15%);
  background: color-mix(in srgb, var(--surface) 86%, var(--bg-elevated) 14%);
}

.task-runtime-metric-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.task-runtime-metric-value {
  font-size: 11px;
  color: var(--text);
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.task-stop-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: 1px solid var(--red);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--red);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 120ms;
}

.task-stop-btn:hover { background: var(--red); color: #fff; }
.task-stop-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.task-stop-btn:disabled:hover {
  background: transparent;
  color: var(--red);
}

.task-resume-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 120ms;
}

.task-resume-btn:hover { background: var(--accent); color: #fff; }

.task-done-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: 1px solid var(--green);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--green);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 120ms;
}

.task-done-btn:hover { background: var(--green); color: #fff; }

.task-board-btn {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 120ms;
}

.task-board-btn:hover { background: var(--surface-hover); color: var(--text); }

/* ── Responsive: react to the ctx-panel's own width via container queries.
   Viewport-based @media doesn't work here because users can drag the panel
   narrow while the browser window stays wide. ───────────────────────────── */

@container ctxpanel (max-width: 720px) {
  .task-header-bar {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 8px;
  }
  .task-header-right {
    /* Push the action cluster to a second row underneath the pills, so it
       can never paint over them. */
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .task-header-metrics {
    padding: 0 14px 10px;
  }
}

@container ctxpanel (max-width: 560px) {
  /* At this width hide the lower-signal pills — projection-id, employee,
     tool ticker, and the relative timestamp — so the title, status, and
     executing agent stay legible. The data is still in the tooltip on the
     title for advanced users. */
  .task-projection-pill,
  .task-employee-pill,
  .task-tool-pill,
  .task-header-time {
    display: none;
  }
  .task-header-avatars {
    display: none;
  }
  .task-header-bar {
    padding: 10px 12px;
  }
  .task-runtime-metric-value {
    font-size: 10.5px;
  }
}

@container ctxpanel (max-width: 420px) {
  /* Extra-narrow: also collapse the role pill and demote the action buttons
     into compact icon-only chips. */
  .task-role-pill {
    display: none;
  }
  .task-agent-pill .task-agent-icon {
    margin-right: 0;
  }
  .task-stop-btn span,
  .task-done-btn span,
  .task-resume-btn span {
    display: none;
  }
  .task-stop-btn,
  .task-done-btn,
  .task-resume-btn {
    padding: 5px 8px;
  }
  .task-header-bar {
    padding: 8px 10px;
  }
  .task-header-metrics {
    padding: 0 10px 8px;
    gap: 6px 8px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Chat Main Area
   ══════════════════════════════════════════════════════════════════════════ */
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
}

.chat-main-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 48px;
}

.chat-main-icon {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}

.chat-main-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.chat-main-desc {
  margin-left: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 400;
}

/* ══════════════════════════════════════════════════════════════════════════
   Message List
   ══════════════════════════════════════════════════════════════════════════ */
.msg-list-shell {
  flex: 1;
  min-height: 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.msg-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 0 20px;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  scrollbar-color: var(--border) transparent;
  overscroll-behavior-y: contain;
  position: relative;
}

.msg-list:focus {
  outline: none;
}

.msg-list-following {
  overflow-anchor: none;
}

.msg-list-browsing {
  overflow-anchor: auto;
}

.msg-list-content {
  width: 100%;
  min-height: 100%;
}

.msg-timeline-row {
  overflow-anchor: auto;
}

.msg-list-following .msg-timeline-row {
  overflow-anchor: none;
}

.msg-end-anchor {
  height: 1px;
  flex-shrink: 0;
  overflow-anchor: none;
}

.msg-list-floating-actions {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 8;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  pointer-events: none;
}

.msg-list-float-btn {
  pointer-events: auto;
  min-width: 0;
  max-width: min(320px, 70vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--border) 72%, var(--accent) 28%);
  border-radius: 999px;
  padding: 7px 12px;
  background: color-mix(in srgb, var(--bg-elevated) 92%, var(--accent) 8%);
  color: var(--text);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.msg-list-float-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--bg-elevated) 84%, var(--accent) 16%);
}

.msg-list-pending-btn {
  border-color: color-mix(in srgb, var(--yellow) 55%, var(--border));
  color: var(--yellow);
}

.msg-history-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px 14px;
  flex-wrap: wrap;
}

.msg-history-load-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}

.msg-history-load-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
}

.msg-history-load-btn:disabled {
  opacity: 0.65;
  cursor: default;
}

.msg-history-meta {
  font-size: 11px;
  color: var(--text-secondary);
}

/* ── Welcome ──────────────────────────────────────────────────────────── */
.msg-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 56px 24px;
  color: var(--text-secondary);
  text-align: center;
  /* Center vertically when the list area is taller than the welcome block;
     keep the message anchored toward the top on shorter viewports. */
  flex: 1;
  min-height: 0;
}

.msg-welcome-icon {
  color: var(--accent);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 18%, transparent 82%), transparent 70%),
    color-mix(in srgb, var(--accent-soft) 65%, var(--bg-elevated) 35%);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent 78%);
  border-radius: 50%;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--accent) 22%, transparent 78%) inset,
    0 8px 24px -10px color-mix(in srgb, var(--accent) 60%, transparent 40%);
}

.msg-welcome-icon svg { width: 26px; height: 26px; opacity: 0.85; }

.msg-welcome-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-top: 2px;
  letter-spacing: -0.01em;
}

.msg-welcome-hint {
  font-size: 13px;
  line-height: 1.55;
  max-width: 320px;
  color: var(--text-secondary);
  opacity: 0.85;
}

@container ctxpanel (max-width: 480px) {
  .msg-welcome {
    padding: 36px 20px;
    gap: 10px;
  }
  .msg-welcome-icon {
    width: 48px;
    height: 48px;
  }
  .msg-welcome-icon svg { width: 22px; height: 22px; }
  .msg-welcome-title { font-size: 16px; }
  .msg-welcome-hint { font-size: 12px; line-height: 1.5; }
}

/* ── Date separator ───────────────────────────────────────────────────── */
.msg-date-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0 8px;
}

.msg-date-sep span {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 12px;
  background: var(--surface);
  border-radius: 999px;
}

/* ── System message ───────────────────────────────────────────────────── */
.msg-system {
  display: flex;
  justify-content: center;
  padding: 6px 20px;
}

.msg-system span {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--surface);
  padding: 4px 12px;
  border-radius: 999px;
}

/* ── Work-item divider ───────────────────────────────────────────────────── */
.work-item-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  max-width: 820px;
  margin: 4px auto;
  animation: msg-enter 200ms ease-out;
}

.work-item-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
}

.work-item-divider-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  white-space: nowrap;
  text-transform: capitalize;
}

.work-item-divider-icon {
  font-size: 10px;
  line-height: 1;
}

.work-item-divider-action {
  font-weight: 400;
  opacity: 0.7;
  font-size: 10px;
}

.work-item-divider-active .work-item-divider-icon { color: #F59E0B; }
.work-item-divider-active .work-item-divider-line { background: linear-gradient(90deg, transparent, rgba(245,158,11,0.25) 20%, rgba(245,158,11,0.25) 80%, transparent); }

.work-item-divider-passed .work-item-divider-icon { color: #10B981; }
.work-item-divider-passed .work-item-divider-label { color: #10B981; opacity: 0.8; }
.work-item-divider-passed .work-item-divider-line { background: linear-gradient(90deg, transparent, rgba(16,185,129,0.2) 20%, rgba(16,185,129,0.2) 80%, transparent); }

.work-item-divider-rejected .work-item-divider-icon { color: #F59E0B; }
.work-item-divider-rejected .work-item-divider-label { color: #F59E0B; opacity: 0.8; }

.work-item-divider-failed .work-item-divider-icon { color: var(--red); }
.work-item-divider-failed .work-item-divider-label { color: var(--red); opacity: 0.8; }
.work-item-divider-failed .work-item-divider-line { background: linear-gradient(90deg, transparent, rgba(239,68,68,0.15) 20%, rgba(239,68,68,0.15) 80%, transparent); }

.work-item-divider-waiting .work-item-divider-icon { color: var(--text-secondary); }
.work-item-divider-waiting .work-item-divider-label { color: var(--text-secondary); }

/* ── Message row ──────────────────────────────────────────────────────── */
.msg-row {
  display: flex;
  gap: 10px;
  padding: 6px 24px;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  animation: msg-enter 200ms ease-out;
  border-radius: var(--radius-xs);
  transition: background 100ms;
}

/* Agent row hover handled by .msg-content-agent-card */

@keyframes msg-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.msg-row.user {
  justify-content: flex-end;
}

.msg-row.deleted-sender { opacity: 0.5; }

/* ── Grouped messages (consecutive same sender) ──────────────────────── */
.msg-row.grouped {
  padding-top: 0;
  padding-bottom: 0;
  animation: none;
}

.msg-row-inline-progress {
  align-items: flex-start;
}

.msg-row-context,
.msg-row-draft {
  align-items: flex-start;
}

.msg-row.agent.grouped .msg-content-agent-card {
  border-top: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-top: -1px;
}

.msg-row.user.grouped {
  padding-top: 2px;
}

.msg-row.user.grouped .msg-content-user {
  border-radius: 18px 4px 4px 18px;
}

.msg-avatar-spacer {
  width: 34px;
  flex-shrink: 0;
}

.msg-time-inline {
  font-size: 10px;
  opacity: 0;
  transition: opacity 150ms;
}

.msg-row:hover .msg-time-inline { opacity: 0.6; }

/* ── Avatar ───────────────────────────────────────────────────────────── */
.msg-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  margin-top: 1px;
}

.agent-avatar {
  background: linear-gradient(135deg, var(--accent-soft), var(--surface));
  color: #fff;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.msg-avatar-context {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(14, 165, 233, 0.28));
  color: var(--accent);
}

.msg-avatar-draft {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(59, 130, 246, 0.2));
  color: var(--green);
}

/* ── Message body ─────────────────────────────────────────────────────── */
.msg-body {
  flex: 1;
  min-width: 0;
}

.msg-inline-progress-body {
  width: 100%;
}

.msg-inline-progress-shell {
  width: 100%;
  max-width: 100%;
}

.msg-body-user {
  max-width: 70%;
}

/* ── Agent header ─────────────────────────────────────────────────────── */
.msg-agent-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.msg-sender {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.msg-sender.deleted { color: var(--text-secondary); text-decoration: line-through; }

.msg-time {
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.6;
}

.msg-reply-indicator {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 2px 0 4px 10px;
  border-left: 2px solid var(--accent-soft);
  margin-bottom: 4px;
}

/* ── System ops row (compact log line for "[Delegating to codex]" etc.) ── */
/* Renders system operational events as a single-line summary instead of a
   full agent card. The row matches the same centered/max-width container
   as .msg-row so it visually sits in the same column as agent messages,
   then indents internal content past where the avatar would be. Click
   expands to reveal the raw payload (cmd, paths). */
.msg-ops-row {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Mirror .msg-row centered-column layout but never overflow when the
     panel is narrow. `min(820px, 100%)` collapses below 820px without
     stretching beyond the panel. */
  width: min(820px, 100%);
  margin: 2px auto;
  /* Avatar column width = 36 (avatar) + 10 (gap) + 10 (row-padding) = 56px.
     We mirror that so the dot sits roughly where the avatar would be,
     then `clamp` lets the pad gracefully shrink when the panel is narrow
     (without needing media queries everywhere). */
  padding: 5px clamp(12px, 3vw, 24px) 5px clamp(20px, 8vw, 56px);
  box-sizing: border-box;
  border-radius: 8px;
  font-size: clamp(11px, 0.74rem, 12.5px);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  cursor: default;
  user-select: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  /* Defensive: never produce a horizontal scrollbar on the message list,
     even if a child overflows. */
  min-width: 0;
}

.msg-ops-row[role='button'] {
  cursor: pointer;
}

.msg-ops-row:hover,
.msg-ops-row.expanded {
  background: color-mix(in srgb, var(--surface) 60%, transparent 40%);
  border-color: color-mix(in srgb, var(--border) 60%, transparent 40%);
  color: var(--text);
}

.msg-ops-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--text-secondary) 60%, transparent 40%);
}

.msg-ops-tone-info    .msg-ops-dot { background: color-mix(in srgb, var(--accent) 80%, transparent 20%); }
.msg-ops-tone-success .msg-ops-dot { background: var(--green); }
.msg-ops-tone-warning .msg-ops-dot { background: var(--yellow); }
.msg-ops-tone-danger  .msg-ops-dot { background: var(--red); }

.msg-ops-label {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  flex-shrink: 0;
}

.msg-ops-tone-info    .msg-ops-label { color: color-mix(in srgb, var(--accent) 88%, var(--text) 12%); }
.msg-ops-tone-success .msg-ops-label { color: color-mix(in srgb, var(--green)  90%, var(--text) 10%); }
.msg-ops-tone-warning .msg-ops-label { color: color-mix(in srgb, var(--yellow) 90%, var(--text) 10%); }
.msg-ops-tone-danger  .msg-ops-label { color: color-mix(in srgb, var(--red)    90%, var(--text) 10%); }

.msg-ops-summary {
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-ops-time {
  font-size: 10.5px;
  color: var(--text-secondary);
  opacity: 0.55;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.msg-ops-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  opacity: 0.6;
  flex-shrink: 0;
  transition: transform 160ms ease, opacity 160ms ease;
  transform: rotate(0deg);
}

.msg-ops-row.expanded .msg-ops-chevron {
  opacity: 1;
}

.msg-ops-details {
  /* Same containment & padding system as `.msg-ops-row` so the expanded
     panel aligns under the row at every panel width. */
  width: min(820px, 100%);
  margin: 0 auto 6px;
  padding: 10px clamp(12px, 3vw, 24px) 10px clamp(20px, 8vw, 56px);
  box-sizing: border-box;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-elevated) 80%, var(--surface) 20%);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
}

.msg-ops-details-pre {
  margin: 0;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
}

/* Note: the `.msg-ops-row` and `.msg-ops-details` padding is already
   fluid via `clamp()` — no extra container query needed. The clamp
   floor (12/20) handles panels as narrow as ~280px without breaking. */

.msg-ops-bundle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(820px, 100%);
  margin: 3px auto;
  padding: 6px clamp(12px, 3vw, 24px) 6px clamp(20px, 8vw, 56px);
  box-sizing: border-box;
  border: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.msg-ops-bundle:hover,
.msg-ops-bundle.expanded {
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  color: var(--text);
}

.msg-ops-bundle-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--accent) 72%, transparent);
}

.msg-ops-bundle-title {
  flex: 0 0 auto;
  color: var(--text);
  font-weight: 650;
}

.msg-ops-bundle-summary {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-ops-bundle-time {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: var(--text-secondary);
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

.msg-ops-bundle-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  flex: 0 0 auto;
}

.msg-ops-bundle-details {
  width: min(820px, 100%);
  margin: 0 auto 8px;
  padding: 6px clamp(12px, 3vw, 24px) 8px clamp(20px, 8vw, 56px);
  box-sizing: border-box;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-elevated) 80%, var(--surface) 20%);
  border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}

.msg-ops-bundle-event {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 0;
  font-size: 11.5px;
}

/* ── Agent message card ───────────────────────────────────────────────── */
.msg-content-agent-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 2px var(--radius-sm) var(--radius-sm) 2px;
  padding: 10px 14px;
  transition: border-color 200ms, box-shadow 200ms, border-left-color 200ms;
}

.msg-attached-thinking {
  margin-bottom: 10px;
}

.msg-row.agent:hover .msg-content-agent-card {
  border-color: var(--border-hover);
  border-left-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.msg-context-card {
  border-left-color: rgba(59, 130, 246, 0.75);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.06), var(--surface));
}

.msg-context-label,
.msg-draft-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.msg-draft-card {
  border-style: dashed;
  border-left-color: var(--green);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.06), var(--surface));
}

.msg-row-project-update .msg-body {
  min-width: 0;
}

.msg-project-update-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 2px var(--radius-sm) var(--radius-sm) 2px;
  padding: 11px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}

.msg-project-update-report {
  border-left-color: var(--accent);
}

.msg-project-update-review {
  border-left-color: var(--green);
}

.msg-project-update-update {
  border-left-color: var(--yellow);
}

.msg-project-update-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.msg-project-update-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.msg-project-update-chip {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: color-mix(in srgb, var(--green) 86%, var(--text) 14%);
  font-size: 11px;
  font-weight: 650;
}

.msg-project-update-title {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.msg-project-update-summary {
  color: var(--text);
  line-height: 1.58;
  font-size: 14px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.msg-project-update-summary p {
  margin: 0 0 7px;
}

.msg-project-update-summary p:last-child {
  margin-bottom: 0;
}

.msg-project-update-section {
  min-width: 0;
}

.msg-project-update-section-label {
  margin-bottom: 5px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.msg-project-update-artifacts {
  display: grid;
  gap: 6px;
}

.msg-project-update-artifact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-elevated) 46%, transparent);
}

.msg-project-update-artifact-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 650;
}

.msg-project-update-artifact-status {
  color: var(--green);
  font-size: 11px;
  font-weight: 650;
  text-transform: lowercase;
}

.msg-project-update-artifact-path {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  background: transparent;
  font-size: 11px;
}

.msg-project-update-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.msg-project-update-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.48;
  min-width: 0;
}

.msg-project-update-list li {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 680px) {
  .msg-project-update-grid {
    grid-template-columns: 1fr;
  }

  .msg-project-update-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .msg-project-update-chip {
    max-width: 100%;
  }
}

.msg-content-agent {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  word-wrap: break-word;
}

.msg-content-agent h1,
.msg-content-agent h2,
.msg-content-agent h3,
.msg-content-agent h4,
.msg-content-agent h5,
.msg-content-agent h6 {
  margin: 0 0 10px;
  line-height: 1.35;
}

.msg-content-agent p { margin: 0 0 8px; }
.msg-content-agent p:last-child { margin-bottom: 0; }
.msg-content-agent ul, .msg-content-agent ol { margin: 4px 0 8px; padding-left: 20px; }
.msg-content-agent li { margin-bottom: 3px; line-height: 1.55; }

.msg-content-agent pre {
  background: var(--bg);
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
  margin: 8px 0;
}

.msg-content-agent code {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  background: var(--accent-soft);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--accent);
}

.msg-content-agent pre code {
  background: transparent;
  padding: 0;
  color: var(--text);
}

.msg-content-agent blockquote {
  margin: 8px 0;
  padding: 6px 14px;
  border-left: 3px solid var(--accent-soft);
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.04);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

.msg-content-agent table {
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 13px;
  width: 100%;
}

.msg-content-agent th, .msg-content-agent td {
  border: 1px solid var(--border);
  padding: 6px 12px;
  text-align: left;
}

.msg-content-agent th {
  background: var(--bg);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.msg-content-agent strong { color: var(--text); }
.msg-content-agent a { color: var(--accent); text-decoration: none; }
.msg-content-agent a:hover { text-decoration: underline; }
.msg-content-agent hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }

/* ── User message ─────────────────────────────────────────────────────── */
.msg-content-user {
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  border-radius: 18px 18px 4px 18px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.msg-content-user-markdown {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.msg-content-user-markdown h1,
.msg-content-user-markdown h2,
.msg-content-user-markdown h3,
.msg-content-user-markdown h4,
.msg-content-user-markdown h5,
.msg-content-user-markdown h6 {
  margin: 0 0 8px;
  line-height: 1.35;
  color: inherit;
}

.msg-content-user-markdown p { margin: 0 0 8px; }
.msg-content-user-markdown p:last-child { margin-bottom: 0; }
.msg-content-user-markdown ul,
.msg-content-user-markdown ol { margin: 4px 0 8px; padding-left: 20px; }
.msg-content-user-markdown li { margin-bottom: 3px; line-height: 1.5; }
.msg-content-user-markdown strong { color: inherit; }
.msg-content-user-markdown a { color: inherit; text-decoration: underline; }
.msg-content-user-markdown code {
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  border-radius: 4px;
  padding: 0.08em 0.35em;
  font-size: 0.92em;
}
.msg-content-user-markdown pre {
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  margin: 8px 0;
  overflow-x: auto;
}
.msg-content-user-markdown pre code {
  background: transparent;
  border: none;
  padding: 0;
}

.msg-meta-user {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
  opacity: 0;
  transition: opacity 150ms;
}

.msg-row.user:hover .msg-meta-user { opacity: 1; }

/* ── Message actions ──────────────────────────────────────────────────── */
.msg-card-actions {
  display: flex;
  gap: 2px;
  margin-top: 4px;
  padding-top: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 150ms, height 150ms;
}

.msg-row:hover .msg-card-actions {
  opacity: 1;
  height: 26px;
}

/* (actions now inside card — see .msg-card-actions) */

.msg-action-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  transition: all 120ms;
}

.msg-action-btn:hover {
  background: var(--surface);
  color: var(--text);
}

/* ── Agent working indicator ──────────────────────────────────────────── */
.agent-working-row {
  animation: msg-enter 200ms ease-out;
}

.agent-working-row .progress-block {
  border: 1px dashed var(--border-hover);
  background: transparent;
}

/* ══════════════════════════════════════════════════════════════════════════
   Agent Progress Timeline (ptl-*)
   ══════════════════════════════════════════════════════════════════════════ */
.ptl-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: ptl-enter 200ms ease-out;
}

@keyframes ptl-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Live status (thinking / running tool) ─────────────────────────────── */
.ptl-live {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
}

.ptl-live-think {
  background: var(--accent-soft);
  color: var(--accent);
}

.ptl-live-tool {
  background: rgba(52, 211, 153, 0.06);
  color: var(--green);
}

.ptl-live-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ptl-live-think .ptl-live-icon {
  animation: ptl-spin 3s linear infinite;
}

@keyframes ptl-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.ptl-live-text { white-space: nowrap; }

.ptl-live-tool-name {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  background: rgba(52, 211, 153, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.ptl-live-shimmer {
  flex: 1;
  height: 2px;
  min-width: 32px;
  border-radius: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    currentColor 50%,
    transparent 100%
  );
  opacity: 0.25;
  background-size: 200% 100%;
  animation: ptl-shimmer 1.5s ease-in-out infinite;
}

@keyframes ptl-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Tool elapsed time in live status ────────────────────────────────── */
.ptl-live-elapsed {
  font-size: 10px;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ── Last tool result summary ────────────────────────────────────────── */
.ptl-last-tool-summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 12px;
  font-size: 11px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(128, 128, 128, 0.08);
}
.ptl-last-tool-label {
  font-weight: 600;
  white-space: nowrap;
  color: var(--green);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ptl-last-tool-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Autonomy / permission card ──────────────────────────────────────── */
.ptl-autonomy-card {
  border-left-color: var(--yellow);
}
.ptl-autonomy-detail {
  color: var(--text-secondary);
  font-size: 11px;
  padding: 4px 8px;
}

/* ── Approval metric highlight ───────────────────────────────────────── */
.task-runtime-metric-approval {
  color: var(--yellow);
  font-weight: 600;
}

/* ── Completion indicator (terminal state) ─────────────────────────────── */
.ptl-completion {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-top: 4px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.ptl-completion-icon {
  font-size: 13px;
  line-height: 1;
}
.ptl-completion-done {
  color: var(--green);
  background: rgba(16, 185, 129, 0.08);
}
.ptl-completion-failed {
  color: var(--red);
  background: rgba(239, 68, 68, 0.08);
}
.ptl-completion-cancelled {
  color: var(--text-secondary);
  background: rgba(128, 128, 128, 0.06);
}

/* ── Expand toggle ─────────────────────────────────────────────────────── */
.ptl-expand {
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 12px;
  margin-bottom: 2px;
  transition: color 120ms;
}

.ptl-expand:hover { color: var(--accent); }

/* ── Timeline container ────────────────────────────────────────────────── */
.ptl-timeline {
  display: flex;
  flex-direction: column;
  padding-left: 2px;
}

/* ── Individual entry ──────────────────────────────────────────────────── */
.ptl-entry {
  display: flex;
  gap: 0;
  min-height: 30px;
  animation: ptl-entry-in 180ms ease-out;
}

@keyframes ptl-entry-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Connector (dot + line) ────────────────────────────────────────────── */
.ptl-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 26px;
  flex-shrink: 0;
}

.ptl-dot {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 200ms, background 200ms;
}

.ptl-dot svg { width: 12px; height: 12px; }

.ptl-entry:hover .ptl-dot {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 6%, var(--surface));
}

.ptl-line {
  width: 1px;
  flex: 1;
  background: var(--border);
  min-height: 8px;
}

.ptl-entry-last .ptl-line { display: none; }

/* ── Entry content ─────────────────────────────────────────────────────── */
.ptl-content {
  flex: 1;
  min-width: 0;
  padding: 2px 0 8px 8px;
}

.ptl-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-height: 22px;
}

.ptl-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.ptl-tool-badge {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  background: rgba(52, 211, 153, 0.08);
  color: var(--green);
  padding: 1px 7px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.ptl-summary {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.ptl-tool-card {
  width: 100%;
  min-width: 0;
  background: color-mix(in srgb, var(--surface) 78%, #d9dde5 22%);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.ptl-tool-toggle {
  width: 100%;
  border: none;
  background: transparent;
  padding: 8px 10px;
  text-align: left;
}

.ptl-tool-toggle.clickable {
  cursor: pointer;
}

.ptl-tool-toggle.clickable:hover {
  background: color-mix(in srgb, var(--surface) 70%, #e7ebf2 30%);
}

.ptl-tool-chevron {
  margin-left: auto;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
}

.ptl-tool-card-detail {
  border-top: 1px solid var(--border);
  padding: 9px 10px 10px;
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow-x: auto;
  max-width: 100%;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  background: color-mix(in srgb, var(--surface) 86%, #f2f4f8 14%);
}

.ptl-thinking-detail {
  font-family: inherit;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
  max-height: 300px;
  overflow-y: auto;
}

.ptl-time {
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.5;
  flex-shrink: 0;
  white-space: nowrap;
}

.ptl-detail {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.7;
  margin-top: 2px;
  padding-left: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  max-width: 400px;
}

.ckpt-escalation {
  border-color: color-mix(in srgb, var(--yellow) 55%, var(--border) 45%);
}

.ckpt-icon-escalation {
  color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 14%, transparent);
}

.ckpt-escalation-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.ckpt-escalation-line {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

.ckpt-escalation-actions {
  flex-wrap: wrap;
}

.ckpt-escalation-hint {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-secondary);
}

/* ── Working indicator row styling ─────────────────────────────────────── */
.agent-working-row .ptl-block {
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: transparent;
}

/* ══════════════════════════════════════════════════════════════════════════
   Code Block (fenced code)
   ══════════════════════════════════════════════════════════════════════════ */
.code-block-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 8px 0;
}

.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.code-block-lang {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.code-block-copy {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 10px;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 120ms;
}

.code-block-copy:hover { color: var(--text); background: var(--surface-hover); }

.code-block-wrap pre {
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--bg) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Message Composer
   ══════════════════════════════════════════════════════════════════════════ */
.msg-composer {
  padding: 4px 24px 16px;
  flex-shrink: 0;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
}

.msg-composer .composer-input-area {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 200ms, box-shadow 200ms;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.msg-composer.focused .composer-input-area {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 0 0 3px var(--accent-glow);
}

.msg-composer .composer-input-area textarea {
  width: 100%;
  padding: 14px 16px 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  resize: none;
  min-height: 24px;
  max-height: 200px;
  line-height: 1.5;
}

.msg-composer .composer-input-area textarea::placeholder {
  color: var(--text-secondary);
}

.composer-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 8px 16px;
}

.composer-config-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent-soft) 22%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 88%, white 12%), color-mix(in srgb, var(--surface) 86%, var(--bg-elevated) 14%));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 20px rgba(15, 23, 42, 0.08);
  min-width: 0;
  flex-shrink: 0;
}

.composer-config-divider {
  width: 1px;
  height: 24px;
  background: color-mix(in srgb, var(--border) 72%, transparent 28%);
  border-radius: 999px;
  flex-shrink: 0;
}

.composer-mode-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-shrink: 0;
  padding: 0 4px;
}

.composer-mode-inline-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.composer-mode-inline[data-kind='mode'] .composer-mode-inline-label {
  color: color-mix(in srgb, var(--accent) 74%, var(--text-secondary) 26%);
}

.composer-mode-inline[data-kind='agent'] .composer-mode-inline-label {
  color: color-mix(in srgb, var(--yellow) 78%, var(--text-secondary) 22%);
}

.composer-mode-inline[data-kind='org'] .composer-mode-inline-label {
  color: color-mix(in srgb, var(--green) 74%, var(--text-secondary) 26%);
}

.composer-mode-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.composer-mode-select-wrap::after {
  content: '';
  position: absolute;
  right: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--text-secondary);
  border-bottom: 1.5px solid var(--text-secondary);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.composer-mode-select {
  appearance: none;
  min-height: 30px;
  max-width: 210px;
  padding: 5px 28px 5px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 70%, var(--bg-elevated) 30%);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 150ms, background 150ms, box-shadow 150ms, transform 150ms;
}

.composer-mode-select:hover {
  border-color: color-mix(in srgb, var(--border-hover) 70%, var(--accent-soft) 30%);
  background: color-mix(in srgb, var(--surface-hover) 76%, var(--bg-elevated) 24%);
}

.composer-mode-select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border) 48%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-soft) 78%, transparent 22%);
}

.composer-mode-select:disabled {
  opacity: 0.5;
  cursor: default;
}

.composer-mode-inline[data-kind='org'] .composer-mode-select {
  max-width: 260px;
}

.composer-hint {
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.5;
  flex: 1;
}

.composer-mode {
  font-size: 10px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 72%, var(--bg-elevated) 28%);
  color: var(--text);
  flex-shrink: 0;
}

.composer-mode[data-kind='mode'] {
  color: var(--accent);
}

.composer-mode[data-kind='agent'] {
  color: var(--yellow);
}

/* ── Locked-mode chip (replaces dropdown after chat has started) ───────── */

.composer-config-group[data-locked='true'] {
  /* Softer card to signal "this is now a status display, not a control" */
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 94%, transparent 6%), color-mix(in srgb, var(--surface) 92%, var(--bg-elevated) 8%));
  border-color: color-mix(in srgb, var(--border) 90%, transparent 10%);
  box-shadow: none;
}

.composer-mode-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent 22%);
  background: color-mix(in srgb, var(--surface) 60%, var(--bg-elevated) 40%);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  cursor: default;
  outline: none;
  transition: border-color 150ms, background 150ms;
}

/* Invisible bridge that extends the chip's hover area upward so the popover
   stays open as the mouse traverses the 8px gap between chip and popover. */
.composer-mode-chip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: -8px;
  right: -8px;
  height: 12px;
  background: transparent;
  pointer-events: none;
}

.composer-mode-chip:hover::before,
.composer-mode-chip:focus-within::before {
  pointer-events: auto;
}

.composer-mode-chip:hover,
.composer-mode-chip:focus-visible {
  border-color: color-mix(in srgb, var(--border-hover) 78%, var(--accent-soft) 22%);
  background: color-mix(in srgb, var(--surface-hover) 70%, var(--bg-elevated) 30%);
}

.composer-mode-chip[data-kind='mode'] {
  color: color-mix(in srgb, var(--accent) 92%, var(--text) 8%);
}

.composer-mode-chip[data-kind='agent'] {
  color: color-mix(in srgb, var(--yellow) 88%, var(--text) 12%);
}

.composer-mode-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 6px;
  background: color-mix(in srgb, currentColor 14%, transparent 86%);
  color: currentColor;
  flex-shrink: 0;
  opacity: 0.85;
}

.composer-mode-chip-label {
  letter-spacing: 0.01em;
}

.composer-mode-chip-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.18),
    0 2px 6px rgba(15, 23, 42, 0.08);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
  z-index: 20;
}

.composer-mode-chip-popover::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--bg-elevated);
  filter: drop-shadow(0 1px 0 var(--border));
}

.composer-mode-chip:hover .composer-mode-chip-popover,
.composer-mode-chip:focus-visible .composer-mode-chip-popover,
.composer-mode-chip:focus-within .composer-mode-chip-popover {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.composer-mode-chip-popover-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

.composer-mode-chip-popover-body {
  font-size: 11px;
  color: var(--text-secondary);
}

.composer-mode-chip-popover-body strong {
  color: var(--text);
  font-weight: 600;
}

.composer-mode-chip-popover-divider {
  height: 1px;
  margin: 4px -12px 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--border) 80%, transparent 20%) 16%,
    color-mix(in srgb, var(--border) 80%, transparent 20%) 84%,
    transparent 100%
  );
}

.composer-mode-chip-popover-action-title {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.composer-mode-chip-popover-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px -4px -2px;
}

.composer-mode-chip-popover-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.composer-mode-chip-popover-action:hover,
.composer-mode-chip-popover-action:focus-visible {
  background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface) 65%);
  border-color: color-mix(in srgb, var(--accent) 36%, transparent 64%);
  outline: none;
}

.composer-mode-chip-popover-action:active {
  transform: scale(0.985);
}

.composer-mode-chip-popover-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 70%, var(--bg-elevated) 30%);
  color: var(--accent);
  flex-shrink: 0;
  transition: background 140ms ease, color 140ms ease;
}

.composer-mode-chip-popover-action:hover .composer-mode-chip-popover-action-icon,
.composer-mode-chip-popover-action:focus-visible .composer-mode-chip-popover-action-icon {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface) 82%);
  color: var(--accent);
}

.composer-mode-chip-popover-action-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.composer-mode-chip-popover-action-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}

.composer-mode-chip-popover-action-desc {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.3;
}

.composer-mode-chip-popover-action-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--text-secondary);
  opacity: 0.6;
  transform: translateX(-2px);
  transition: transform 160ms ease, opacity 160ms ease, color 160ms ease;
  flex-shrink: 0;
}

.composer-mode-chip-popover-action:hover .composer-mode-chip-popover-action-arrow,
.composer-mode-chip-popover-action:focus-visible .composer-mode-chip-popover-action-arrow {
  opacity: 1;
  color: var(--accent);
  transform: translateX(0);
}

/* Anchor the popover to the right side of the chip when the chat panel is
   narrow, so the menu never overflows past the panel's right edge. Uses a
   container query against the ctx-panel (or multi-card container) so it
   correctly reacts to the panel's actual width, not the viewport's. */
@container ctxpanel (max-width: 540px) {
  .composer-mode-chip-popover {
    left: auto;
    right: 0;
    transform: translateY(4px);
  }
  .composer-mode-chip-popover::after {
    left: auto;
    right: 16px;
    transform: none;
  }
  .composer-mode-chip:hover .composer-mode-chip-popover,
  .composer-mode-chip:focus-visible .composer-mode-chip-popover,
  .composer-mode-chip:focus-within .composer-mode-chip-popover {
    transform: translateY(0);
  }
}

.composer-send-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 150ms;
}

.composer-send-btn:disabled { opacity: 0.3; cursor: default; }
.composer-send-btn:not(:disabled):hover { filter: brightness(1.15); transform: scale(1.05); }

/* Container-driven wrap: composer reacts to its host panel's actual width,
   not the viewport, so the wrap kicks in when the chat is dragged narrow. */
@container ctxpanel (max-width: 540px) {
  .composer-bottom {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 32px 32px;
    grid-template-areas:
      "attach hint context send"
      "config config config config";
    align-items: center;
    row-gap: 8px;
    column-gap: 8px;
  }

  .composer-config-group {
    grid-area: config;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    justify-content: stretch;
    padding: 6px;
    border-radius: 16px;
  }

  .composer-mode-inline {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    padding: 0;
  }

  .composer-mode-select-wrap {
    width: 100%;
    min-width: 0;
  }

  .composer-mode-select {
    max-width: none;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .composer-config-divider {
    height: 28px;
  }

  .composer-attach-btn { grid-area: attach; }
  .composer-hint {
    grid-area: hint;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .composer-context-ring { grid-area: context; justify-self: end; }
  .composer-send-btn { grid-area: send; justify-self: end; }
}

/* Fallback for usage outside ctx-panel (e.g., future hosts): keep the old
   viewport-based wrap so the composer doesn't regress in standalone use. */
@media (max-width: 760px) {
  .composer-bottom {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 32px 32px;
    grid-template-areas:
      "attach hint context send"
      "config config config config";
    align-items: center;
    row-gap: 8px;
    column-gap: 8px;
  }

  .composer-config-group {
    grid-area: config;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    justify-content: stretch;
  }

  .composer-mode-inline {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 0;
  }

  .composer-mode-select-wrap,
  .composer-mode-select {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .composer-attach-btn { grid-area: attach; }
  .composer-hint { grid-area: hint; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .composer-context-ring { grid-area: context; justify-self: end; }
  .composer-send-btn { grid-area: send; justify-self: end; }
}

@container ctxpanel (max-width: 430px) {
  .msg-composer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .msg-composer .composer-input-area textarea {
    padding: 13px 14px 2px;
  }

  .composer-bottom {
    grid-template-columns: 36px minmax(0, 1fr) 32px;
    grid-template-areas:
      "attach hint send"
      "config config config";
  }

  .composer-context-ring {
    display: none;
  }

  .composer-config-group {
    grid-template-columns: 1fr;
    gap: 6px;
    border-radius: 14px;
  }

  .composer-config-divider {
    display: none;
  }

  .composer-mode-inline {
    grid-template-columns: minmax(68px, auto) minmax(0, 1fr);
    gap: 8px;
    width: 100%;
  }
}

@media (max-width: 430px) {
  .composer-bottom {
    grid-template-columns: 36px minmax(0, 1fr) 32px;
    grid-template-areas:
      "attach hint send"
      "config config config";
  }

  .composer-context-ring {
    display: none;
  }

  .composer-config-group {
    grid-template-columns: 1fr;
  }

  .composer-config-divider {
    display: none;
  }

  .composer-mode-inline {
    grid-template-columns: minmax(68px, auto) minmax(0, 1fr);
    width: 100%;
  }
}

/* ── Composer status bar (when agent working) ─────────────────────────── */
.composer-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.composer-status-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}

.composer-status-text {
  flex: 1;
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.composer-stop-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: 1px solid var(--red);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--red);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 120ms;
}

.composer-stop-btn:hover { background: var(--red); color: #fff; }
.composer-stop-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.composer-stop-btn:disabled:hover {
  background: transparent;
  color: var(--red);
}

/* ── Composer disabled ───────────────────────────────────────────────── */
.msg-composer .composer-input-area textarea:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.msg-composer .composer-input-area textarea:disabled::placeholder {
  font-style: italic;
}

/* ── Composer working state glow ─────────────────────────────────────── */
.msg-composer.working .composer-input-area {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.08);
}

/* ══════════════════════════════════════════════════════════════════════════
   Split Layout (parent + child sessions)
   ══════════════════════════════════════════════════════════════════════════ */
.chat-main.chat-main-split { flex: 1; }

.child-sessions-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-left: 1px solid var(--border);
  min-width: 300px;
  max-width: 50%;
}

.child-session-panel {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border);
  min-height: 200px;
  max-height: 400px;
}

.child-session-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.child-session-agent { font-weight: 700; color: var(--accent); }

.child-session-title {
  flex: 1;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.child-session-status {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.child-session-status.status-running { color: var(--yellow); border-color: var(--yellow); }
.child-session-status.status-done { color: var(--green); border-color: var(--green); }
.child-session-status.status-failed { color: var(--red); border-color: var(--red); }

.child-session-messages {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Agent Work Panel (Master-Detail sidebar for child sessions)
   ══════════════════════════════════════════════════════════════════════════ */
.awp {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  width: clamp(280px, 30vw, 420px);
  min-width: 280px;
  min-height: 0;
  background: var(--bg);
  overflow: hidden;
}

.awp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  flex-shrink: 0;
}

.awp-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.awp-count {
  font-weight: 400;
  font-size: 10px;
  color: var(--text-secondary);
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.awp-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.awp-filter {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
}
.awp-filter:focus { outline: 1px solid var(--accent); }

.awp-search-toggle {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.awp-search-toggle:hover, .awp-search-toggle.active {
  color: var(--accent);
  background: var(--bg);
}
.awp-search-toggle svg { width: 14px; height: 14px; }

.awp-search-bar {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.awp-search-input {
  width: 100%;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.awp-search-input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }

/* ── Compact list ────────────────────────────────────── */
.awp-list {
  flex: 1 1 260px;
  min-height: 180px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.awp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 12px;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-size: 11px;
  transition: background 0.12s;
}
.awp-row:hover { background: var(--bg-elevated); }
.awp-row-selected {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-left: 2px solid var(--accent);
  padding-left: 10px;
}
.awp-row-active .awp-row-activity { color: var(--accent); font-weight: 600; }

.awp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-secondary);
  flex-shrink: 0;
  opacity: 0.5;
}
.awp-dot-active {
  background: var(--green);
  opacity: 1;
  box-shadow: 0 0 4px var(--green);
  animation: awp-pulse 2s ease-in-out infinite;
}

@keyframes awp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.awp-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.awp-row-name {
  font-weight: 600;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.awp-row-projection {
  font-size: 9px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}

.awp-row-activity {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.awp-row-time {
  font-size: 9px;
  color: var(--text-muted, var(--text-secondary));
  opacity: 0.6;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 20px;
  text-align: right;
}

.awp-empty {
  padding: 16px;
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
}

/* ── Detail panel ────────────────────────────────────── */
.awp-detail {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  overflow: hidden;
}

.awp-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  flex-shrink: 0;
}

.awp-detail-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.awp-detail-avatar {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.awp-detail-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.awp-detail-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}

.awp-detail-projection {
  font-size: 10px;
  color: var(--accent);
  text-transform: capitalize;
}

.awp-detail-role {
  font-size: 10px;
  color: var(--green);
}

.awp-detail-employee {
  font-size: 10px;
  color: var(--text-secondary);
}

.awp-detail-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.awp-detail-expand,
.awp-detail-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.awp-detail-expand:hover,
.awp-detail-close:hover {
  color: var(--text);
  background: var(--bg);
}
.awp-detail-expand svg,
.awp-detail-close svg { width: 14px; height: 14px; }

.awp-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.awp-detail-section { margin-bottom: 12px; }

.awp-detail-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.awp-detail-section-label svg { width: 12px; height: 12px; }

.awp-detail-handoff {
  font-size: 11px;
  color: var(--text-secondary);
  max-height: 220px;
  overflow-y: auto;
}

.awp-detail-handoff-markdown {
  padding: 2px 0;
}

.awp-detail-empty {
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  padding: 12px;
}

/* ── AWP terminal state icons ──────────────────────────────────────────── */
.awp-terminal-icon {
  width: 16px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 1;
}
.awp-terminal-done  { color: var(--green); }
.awp-terminal-failed { color: var(--red); }
.awp-terminal-cancelled { color: var(--text-secondary); opacity: 0.6; }

/* ── AWP row terminal styling ──────────────────────────────────────────── */
.awp-row-terminal {
  opacity: 0.7;
}
.awp-row-terminal:hover {
  opacity: 0.9;
}
.awp-row-terminal .awp-row-activity {
  font-weight: 500;
}
.awp-row-terminal.awp-terminal-done .awp-row-activity { color: var(--green); }
.awp-row-terminal.awp-terminal-failed .awp-row-activity { color: var(--red); }

/* ── AWP result banner ─────────────────────────────────────────────────── */
.awp-result-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 8px 12px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
}
.awp-result-icon {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.awp-result-done {
  background: rgba(16, 185, 129, 0.1);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.2);
}
.awp-result-failed {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.awp-result-cancelled {
  background: rgba(128, 128, 128, 0.08);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* ── AWP detail avatar terminal states ─────────────────────────────────── */
.awp-detail-avatar.awp-terminal-done {
  border: 2px solid var(--green);
}
.awp-detail-avatar.awp-terminal-failed {
  border: 2px solid var(--red);
}
.awp-detail-avatar.awp-terminal-cancelled {
  border: 2px solid var(--text-secondary);
  opacity: 0.6;
}

/* ══════════════════════════════════════════════════════════════════════════
   Kanban status badge
   ══════════════════════════════════════════════════════════════════════════ */
.kanban-status-badge {
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .session-sidebar { width: 60px; min-width: 60px; }
  .session-new-btn span { display: none; }
  .session-new-btn { justify-content: center; padding: 10px; }
  .session-search-wrap { display: none; }
  .session-group-label { display: none; }
  .session-item-content { display: none; }
  .session-item { padding: 10px; justify-content: center; margin: 1px 4px; width: calc(100% - 8px); border-left: none; }
  .session-item.active { border-left: none; }
  .session-dot { width: 10px; height: 10px; }
  .session-nav-btn span { display: none; }
  .session-nav-btn { justify-content: center; }
  .session-expand-btn { display: none; }
  .session-children { display: none; }
  .session-child-count { display: none; }
  .session-tree-primary { justify-content: center; }
  .session-delete-btn { display: none; }
}

@media (max-width: 700px) {
  .chat-page { flex-direction: column; }
  .session-sidebar {
    width: 100%;
    max-height: 52px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
    overflow: hidden;
  }
  .session-new-btn { margin: 8px; padding: 6px 12px; }
  .session-search-wrap { display: none; }
  .session-list { display: flex; overflow-x: auto; padding: 4px 8px; gap: 4px; flex-direction: row; }
  .session-list.session-list-virtualized { display: block; overflow-x: hidden; overflow-y: auto; padding: 4px 8px; }
  .session-group { display: flex; gap: 2px; margin-bottom: 0; }
  .session-group-label { display: none; }
  .session-item {
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    flex-shrink: 0;
    margin: 0;
    width: auto;
  }
  .session-item.active { border-color: var(--accent); background: var(--accent-soft); border-left: none; }
  .session-item-meta { display: none; }
  .session-nav-btn { display: none; }
  .session-expand-btn { display: none; }
  .session-children { display: none; }
  .session-child-count { display: none; }
  .session-item.session-item-child { display: none; }
  .session-tree-primary { flex-shrink: 0; }
  .msg-row { padding: 8px 16px; }
  .msg-body-user { max-width: 85%; }
  .msg-composer { padding: 0 12px 12px; }
  .msg-composer .composer-input-area textarea { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Checkpoint Panels (ckpt-*)
   ══════════════════════════════════════════════════════════════════════════ */
.ckpt-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  animation: msg-enter 200ms ease-out;
}

.ckpt-recruitment { border-left: 3px solid var(--accent); }
.ckpt-staffing    { border-left: 3px solid var(--green); }
.ckpt-reorg      { border-left: 3px solid var(--yellow); }
.ckpt-user-input { border-left: 3px solid var(--blue); }

/* ── Header ──────────────────────────────────────────────────────────── */
.ckpt-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.ckpt-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ckpt-icon-recruit { background: var(--accent-soft); color: var(--accent); }
.ckpt-icon-staffing { background: rgba(52, 211, 153, 0.1); color: var(--green); }
.ckpt-icon-reorg   { background: rgba(251, 191, 36, 0.1); color: var(--yellow); }
.ckpt-icon-user-input { background: rgba(59, 130, 246, 0.1); color: var(--blue); }

.ckpt-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

/* ── Badges ──────────────────────────────────────────────────────────── */
.ckpt-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.ckpt-badge-profile    { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.ckpt-badge-responded  { color: var(--green); border-color: var(--green); background: rgba(52, 211, 153, 0.06); }
.ckpt-badge-scope      { color: var(--yellow); border-color: var(--yellow); background: rgba(251, 191, 36, 0.06); }

.ckpt-badge-proposed_hire    { color: var(--accent); border-color: var(--accent); }
.ckpt-badge-existing_staff   { color: var(--green); border-color: var(--green); }
.ckpt-badge-fallback_role_only { color: var(--text-secondary); }
.ckpt-badge-direct_role_execution { color: var(--blue); border-color: var(--blue); }
.ckpt-badge-employee { color: var(--green); border-color: var(--green); }
.ckpt-badge-template { color: var(--accent); border-color: var(--accent); }
.ckpt-badge-fallback { color: var(--text-secondary); }

/* ── Summary / Rationale ──────────────────────────────────────────────── */
.ckpt-summary {
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.ckpt-rationale {
  padding: 6px 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  font-style: italic;
}

.ckpt-recruitment-reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}

.ckpt-recruitment-reason {
  min-width: 0;
  padding: 10px 14px;
  background: var(--bg);
}

.ckpt-recruitment-reason .ckpt-rationale {
  padding: 0;
}

/* ── Proposals list ──────────────────────────────────────────────────── */
.ckpt-proposals {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
}

.ckpt-proposal-card {
  padding: 10px 14px;
  background: var(--bg);
}

.ckpt-proposal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.ckpt-role-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
}

.ckpt-role-labels {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.ckpt-field-tag {
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* ── Candidate / Employee ─────────────────────────────────────────────── */
.ckpt-candidate,
.ckpt-employee {
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-top: 4px;
}

.ckpt-cand-name,
.ckpt-emp-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.ckpt-cand-meta {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.ckpt-cand-category {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.ckpt-domain-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(52, 211, 153, 0.08);
  color: var(--green);
  font-weight: 500;
}

.ckpt-emp-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ckpt-emp-id {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
}

/* ── Experience bar ──────────────────────────────────────────────────── */
.ckpt-exp-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  height: 16px;
  background: var(--bg);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
}

.ckpt-exp-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--green));
  border-radius: 8px 0 0 8px;
  transition: width 500ms ease-out;
  min-width: 4px;
}

.ckpt-exp-label {
  position: absolute;
  right: 6px;
  font-size: 9px;
  font-weight: 700;
  color: var(--text);
}

.ckpt-agent-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.ckpt-recruiter-agent {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 72%, var(--bg));
}

.ckpt-agent-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0;
  flex: 0 0 auto;
}

.ckpt-agent-select {
  min-width: 180px;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}

.ckpt-agent-select:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ── Manual staffing grid ───────────────────────────────────────────────── */
.ckpt-staffing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--border);
}

.ckpt-staffing-card {
  min-width: 0;
  padding: 10px 14px;
  background: var(--bg);
}

.ckpt-staffing-selected {
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 8px;
}

.ckpt-staffing-search {
  width: 100%;
  padding: 7px 10px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  outline: none;
}

.ckpt-staffing-search:focus { border-color: var(--accent); }
.ckpt-staffing-search:disabled { opacity: 0.7; cursor: not-allowed; }

.ckpt-staffing-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.ckpt-staffing-option {
  min-width: 0;
  min-height: 42px;
  padding: 6px 8px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color 120ms, background 120ms;
}

.ckpt-staffing-option:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--surface-hover);
}

.ckpt-staffing-option.active {
  border-color: var(--green);
  background: rgba(52, 211, 153, 0.08);
}

.ckpt-staffing-option:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.ckpt-staffing-option-kind {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.ckpt-staffing-option-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .ckpt-recruiter-agent,
  .ckpt-agent-picker {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
  }

  .ckpt-agent-select {
    width: 100%;
    min-width: 0;
  }
}

/* ── Reorg badges row ─────────────────────────────────────────────────── */
.ckpt-reorg-badges {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}

/* ── Change sections ─────────────────────────────────────────────────── */
.ckpt-changes-section {
  padding: 8px 14px;
  border-top: 1px solid var(--border);
}

.ckpt-changes-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.ckpt-change-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
}

.ckpt-change-action {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}

.ckpt-action-add     { background: rgba(52, 211, 153, 0.1); color: var(--green); }
.ckpt-action-remove  { background: rgba(248, 113, 113, 0.1); color: var(--red); }
.ckpt-action-replace { background: rgba(251, 191, 36, 0.1); color: var(--yellow); }
.ckpt-action-update  { background: var(--accent-soft); color: var(--accent); }

.ckpt-change-id {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

.ckpt-change-arrow {
  color: var(--text-secondary);
  font-size: 12px;
}

.ckpt-change-reason {
  color: var(--text-secondary);
  font-size: 11px;
  margin-left: auto;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Impact ──────────────────────────────────────────────────────────── */
.ckpt-impact {
  display: flex;
  gap: 16px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-secondary);
}

.ckpt-section,
.ckpt-task-section {
  padding: 10px 14px 0;
}

.ckpt-section + .ckpt-section,
.ckpt-task-section + .ckpt-task-section {
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  margin-top: 10px;
}

.ckpt-section-title,
.ckpt-task-section-title {
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.ckpt-markdown {
  min-width: 0;
  font-size: 13px;
  line-height: 1.58;
  color: var(--text);
}

.ckpt-markdown-muted {
  color: var(--text-secondary);
}

.ckpt-markdown > :first-child { margin-top: 0; }
.ckpt-markdown > :last-child { margin-bottom: 0; }
.ckpt-markdown p { margin: 0 0 8px; }
.ckpt-markdown ul,
.ckpt-markdown ol {
  margin: 0 0 8px;
  padding-left: 20px;
}
.ckpt-markdown li + li { margin-top: 4px; }
.ckpt-markdown code {
  font-size: 12px;
  border-radius: 4px;
  padding: 1px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.ckpt-markdown pre code {
  padding: 0;
  border: 0;
  background: transparent;
}

.ckpt-task-prompt {
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  background: var(--bg);
}

.ckpt-task-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text);
}

.ckpt-task-list li + li {
  margin-top: 6px;
}

.ckpt-task-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ckpt-task-note {
  padding: 10px 14px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.ckpt-choice-list {
  display: grid;
  gap: 12px;
}

.ckpt-choice-question {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ckpt-question-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.ckpt-choice-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.ckpt-choice-option {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.ckpt-choice-option:hover {
  border-color: var(--accent);
  background: var(--surface-hover);
}

.ckpt-choice-option.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.ckpt-choice-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}

.ckpt-choice-option.is-selected .ckpt-choice-letter {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.ckpt-choice-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ckpt-choice-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.ckpt-choice-desc {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary);
}

.ckpt-other-field {
  min-height: 64px;
}

.ckpt-runtime-details {
  margin: 10px 14px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text-secondary);
}

.ckpt-runtime-details summary {
  cursor: pointer;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ckpt-runtime-body {
  display: grid;
  gap: 5px;
  padding: 0 10px 10px;
  font-size: 12px;
  line-height: 1.45;
}

/* ── Action buttons ──────────────────────────────────────────────────── */
.ckpt-actions {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.ckpt-actions-inline-feedback {
  align-items: stretch;
}

.ckpt-btn {
  padding: 6px 16px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 120ms;
}

.ckpt-btn:disabled { opacity: 0.4; cursor: default; }

.ckpt-btn-approve {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.ckpt-btn-approve:not(:disabled):hover { filter: brightness(1.1); }

.ckpt-btn-deny {
  background: transparent;
  color: var(--red);
  border-color: var(--red);
}
.ckpt-btn-deny:hover { background: var(--red); color: #fff; }

.ckpt-btn-feedback {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.ckpt-btn-feedback:hover { background: var(--accent-soft); }

.ckpt-btn-cancel {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border);
}
.ckpt-btn-cancel:hover { background: var(--surface-hover); }

/* ── Feedback area ───────────────────────────────────────────────────── */
.ckpt-feedback-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.ckpt-feedback-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  min-height: 48px;
}

.ckpt-feedback-input:focus { border-color: var(--accent); }

.ckpt-feedback-inline-input {
  min-height: 34px;
  flex: 1;
  resize: vertical;
}

.ckpt-feedback-btns {
  display: flex;
  gap: 6px;
}

@media (max-width: 640px) {
  .ckpt-actions-inline-feedback {
    flex-direction: column;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Work-Item Progress Card
   ══════════════════════════════════════════════════════════════════════════ */

.wi-progress-card {
  width: 100%;
  min-width: 0;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wi-progress-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.wi-progress-header svg {
  color: var(--accent);
}

/* ── Pipeline (horizontal projection chips) ────────────────────────────── */

.wi-progress-pipeline {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  row-gap: 6px;
}

.wi-projection-group {
  display: flex;
  align-items: center;
  gap: 0;
}

.wi-projection-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms, border-color 120ms;
  white-space: nowrap;
}

.wi-projection-chip:hover {
  background: var(--surface-hover, rgba(255, 255, 255, 0.04));
}

.wi-projection-label {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wi-projection-icon {
  font-size: 10px;
  line-height: 1;
}

/* Projection status variants */
.wi-projection-active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.wi-projection-done {
  border-color: var(--green);
  color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent);
}

.wi-projection-failed {
  border-color: var(--red);
  color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, transparent);
}

.wi-projection-waiting {
  border-color: var(--yellow);
  color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 10%, transparent);
}

.wi-projection-pending {
  color: var(--text-secondary);
}

@keyframes wf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.wi-projection-pulse {
  animation: wf-pulse 1.5s ease-in-out infinite;
}

/* ── Projection connector arrow ────────────────────────────────────────── */

.wi-projection-connector {
  margin: 0 4px;
  color: var(--text-tertiary, var(--text-secondary));
  font-size: 12px;
  opacity: 0.6;
}

.wi-progress-toggle {
  align-self: flex-start;
  margin-top: -2px;
}

/* ── Role summary list ───────────────────────────────────────────── */

.wf-role-summaries {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wf-role-summary {
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wf-role-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.wf-role-summary-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wf-role-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 11px;
  color: var(--text-secondary);
}

.wf-role-open {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 120ms, color 120ms, background 120ms;
  flex-shrink: 0;
}

.wf-role-open:hover {
  color: var(--text);
  border-color: var(--border-hover);
  background: var(--surface-hover);
}

.wf-role-summary-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wf-role-summary-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wf-role-summary-block-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.wf-role-summary-block-content {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── Per-role turn list (chronological, kanban-column-labelled) ─── */

.wf-role-turns {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wf-role-turn {
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-muted, rgba(255, 255, 255, 0.03));
}

.wf-role-turn-button {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wf-role-turn-button:hover {
  background: var(--surface-hover, rgba(255, 255, 255, 0.06));
}

/* Kanban-column badge — mirrors the colour scheme of the board so
 * the vocabulary stays consistent between the progress bar and the
 * column headers. */
.wf-role-turn-column {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-muted, rgba(255, 255, 255, 0.06));
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Column badge colours mirror the agreed status palette:
 *   todo        → muted gray (no work yet)
 *   in_progress → orange (matches ``--accent``, "actively working")
 *   in_review   → yellow (matches ``--yellow``, "waiting on review")
 *   done        → green (matches ``--green``, terminal-success)
 * Prior values had in_progress = blue and in_review = orange, which
 * conflicted with the chip pulse semantics elsewhere. Aligning the badge
 * colours with the chip means a glance at the row tells you the same
 * thing as the chip above it. */
.wf-role-turn-column-todo {
  background: color-mix(in srgb, var(--text-secondary) 18%, transparent);
  color: var(--text-secondary);
}

.wf-role-turn-column-in_progress {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

.wf-role-turn-column-in_review {
  background: color-mix(in srgb, var(--yellow) 18%, transparent);
  color: var(--yellow);
}

.wf-role-turn-column-done {
  background: color-mix(in srgb, var(--green) 18%, transparent);
  color: var(--green);
}

.wf-role-turn-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-primary);
}

.wf-role-turn-time {
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.wf-role-turn-active .wf-role-turn-title {
  font-weight: 600;
}

.wf-role-turn-failed .wf-role-turn-column {
  background: rgba(255, 100, 100, 0.18);
  color: rgba(255, 150, 150, 0.95);
}

/* "Show N earlier turns" / "Collapse earlier turns" row. */
.wf-role-turn-expander {
  border-style: dashed;
  background: transparent;
}

.wf-role-turn-expander-button {
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  text-align: center;
}

.wf-role-turn-expander-button:hover {
  color: var(--text-primary);
  background: var(--surface-hover, rgba(255, 255, 255, 0.04));
}

/* ── Latest event detail row ──────────────────────────────────────── */

.wf-event-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.wf-event-icon {
  display: flex;
  flex-shrink: 0;
}

.wf-event-icon svg {
  width: 14px;
  height: 14px;
}

.wf-event-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wf-event-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

.wf-event-time {
  flex-shrink: 0;
  font-size: 11px;
  opacity: 0.7;
}

@media (max-width: 640px) {
  .wf-role-summary-head {
    flex-direction: column;
  }

  .wf-role-open {
    width: fit-content;
  }
}

/* ── Attachment preview strip in composer ──────────────── */
.composer-attachments {
  display: flex;
  gap: 10px;
  padding: 10px 12px 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.attachment-chip {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 85%, transparent), color-mix(in srgb, var(--surface) 92%, transparent));
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  min-width: 220px;
  max-width: min(320px, 72vw);
  flex-shrink: 0;
}
.attachment-chip.error {
  border-color: color-mix(in srgb, var(--red) 55%, var(--border));
  background: color-mix(in srgb, var(--red) 10%, var(--bg-elevated));
}
.attachment-chip-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  color: var(--text-secondary);
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.attachment-chip:hover .attachment-chip-remove,
.attachment-chip-remove:focus-visible { opacity: 1; }
.attachment-chip-remove:hover {
  background: color-mix(in srgb, var(--red) 16%, var(--bg-elevated));
  color: var(--red);
}
.attachment-thumb {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
}
.attachment-file-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.attachment-file-icon.tone-image {
  background: color-mix(in srgb, var(--green) 12%, var(--bg-elevated));
  color: var(--green);
}
.attachment-file-icon.tone-video {
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-elevated));
  color: color-mix(in srgb, var(--accent) 70%, var(--text));
}
.attachment-file-icon.tone-pdf {
  background: color-mix(in srgb, var(--red) 12%, var(--bg-elevated));
  color: var(--red);
}
.attachment-file-icon.tone-office {
  background: color-mix(in srgb, var(--yellow) 14%, var(--bg-elevated));
  color: var(--yellow);
}
.attachment-file-icon.tone-data {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
  color: var(--accent);
}
.attachment-file-icon.tone-text {
  background: color-mix(in srgb, var(--text-secondary) 16%, var(--bg-elevated));
  color: var(--text);
}
.attachment-file-icon.tone-code {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
  color: color-mix(in srgb, var(--accent) 40%, var(--text));
}
.attachment-chip-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}
.attachment-chip-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.attachment-chip-size {
  font-size: 11px;
  color: var(--text-secondary);
}
.attachment-chip.error .attachment-chip-size {
  color: var(--red);
}
.attachment-progress-ring {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.attachment-progress-ring svg {
  width: 32px;
  height: 32px;
  transform: rotate(-90deg);
}
.attachment-progress-track,
.attachment-progress-value {
  fill: none;
  stroke-width: 2.5;
}
.attachment-progress-track {
  stroke: color-mix(in srgb, var(--border) 85%, transparent);
}
.attachment-progress-value {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.2s ease;
}
.attachment-progress-ring.ready .attachment-progress-value {
  stroke: var(--green);
}
.attachment-progress-ring.error .attachment-progress-value {
  stroke: var(--red);
}
.attachment-progress-center {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--text);
}
.attachment-progress-ring.ready .attachment-progress-center {
  color: var(--green);
}
.attachment-progress-ring.error .attachment-progress-center {
  color: var(--red);
}
.attachment-progress-center svg {
  width: 13px;
  height: 13px;
  transform: none;
}
.composer-attach-btn {
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  border: 1px solid var(--border);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  border-radius: 10px;
  color: var(--text-secondary);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.composer-attach-btn:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--border-hover);
  background: color-mix(in srgb, var(--surface-hover) 88%, transparent);
}

/* ── Attachment display in message bubbles ─────────────── */
.msg-attachments { margin-top: 10px; }
.msg-attachment-grid {
  display: grid;
  gap: 8px;
}
.msg-attachment-grid.cols-2 {
  grid-template-columns: 1fr 1fr;
}
.msg-attachment-image {
  max-width: 320px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.msg-attachment-video {
  width: 100%;
  max-width: 320px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
}
.msg-attachment-image:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}
.msg-attachment-files {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, max-content));
  gap: 8px;
  margin-top: 8px;
}
.msg-attachment-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  font-size: 12px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.msg-attachment-file-chip:hover {
  background: color-mix(in srgb, var(--surface-hover) 96%, transparent);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}
.msg-attachment-file-size {
  color: var(--text-secondary);
  font-size: 11px;
  margin-left: 4px;
}

/* ── Image lightbox ────────────────────────────────────── */
@media (max-width: 640px) {
  .attachment-chip {
    min-width: min(250px, 82vw);
    max-width: 82vw;
  }

  .msg-attachment-files {
    grid-template-columns: 1fr;
  }
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  cursor: zoom-out;
}
.lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 8px;
}

/* ── Inline delete confirmation ─────────────────────────────── */
.session-confirm-delete {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
  animation: msgListFadeIn 0.15s ease-out;
}
.session-confirm-yes {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 4px;
  border: none;
  background: #e53935;
  color: white;
  cursor: pointer;
  font-weight: 600;
}
.session-confirm-yes:hover { background: #c62828; }
.session-confirm-no {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border, #ddd);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.session-confirm-no:hover { background: var(--surface-hover, #f0f0f0); }

/* ── Session switch fade-in ────────────────────────────────── */
@keyframes msgListFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.msg-list { animation: msgListFadeIn 0.2s ease-out; }

/* ══════════════════════════════════════════════════════════════════════════
   Message Content Collapsing & Code Block Truncation
   ══════════════════════════════════════════════════════════════════════════ */

/* ── "Show more / Show less" toggle for long messages ────────────────── */
.msg-collapse-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 120ms;
}

.msg-collapse-toggle:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* ── Code block omitted lines indicator ──────────────────────────────── */
.code-block-omitted {
  display: block;
  padding: 6px 0;
  color: var(--accent);
  font-style: italic;
  font-weight: 500;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 120ms;
  user-select: none;
}

.code-block-omitted:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ── Code block collapse button (shown when expanded) ────────────────── */
.code-block-collapse-btn {
  display: block;
  width: 100%;
  padding: 4px 12px;
  border: none;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: background 120ms;
}

.code-block-collapse-btn:hover {
  background: var(--accent-soft);
}

/* ── Context window ring (in composer bottom bar) ────────────────────── */
.composer-context-ring {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  cursor: default;
}

.composer-context-ring svg {
  width: 28px;
  height: 28px;
  transform: rotate(-90deg);
}

.composer-context-ring-track,
.composer-context-ring-value {
  fill: none;
  stroke-width: 2.5;
}

.composer-context-ring-track {
  stroke: color-mix(in srgb, var(--border) 85%, transparent);
}

.composer-context-ring-value {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease, stroke 0.4s ease;
}

.composer-context-ring.low .composer-context-ring-value {
  stroke: var(--yellow);
}

.composer-context-ring.critical .composer-context-ring-value {
  stroke: var(--red);
}

.composer-context-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 700;
  color: var(--text-secondary);
  line-height: 1;
  pointer-events: none;
}

.composer-context-ring.low .composer-context-ring-label {
  color: var(--yellow);
}

.composer-context-ring.critical .composer-context-ring-label {
  color: var(--red);
}


.composer-send-btn:focus-visible,
.composer-attach-btn:focus-visible,
.composer-stop-btn:focus-visible,
.msg-action-btn:focus-visible,
.session-item:focus-visible,
.awp-row:focus-visible,
.awp-filter:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Work-item-driven Execution Progress additions ─────────────────────
 * Styles supporting the role / work-item rollup (see
 * ``WorkItemProgressCard.tsx`` and ``AgentWorkPanelRoleView``).
 * Colour scheme mirrors the chip vocabulary so the row, chip, and badge
 * speak the same language. */

.wf-role-turn-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--yellow) 22%, transparent);
  color: var(--yellow);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wf-role-turn-chevron {
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
  margin-left: 4px;
}

.wf-role-turn-expanded {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.wf-role-turn-activity {
  padding: 8px 10px 10px;
  border-top: 1px dashed var(--border);
  background: var(--surface, rgba(255, 255, 255, 0.02));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wf-role-turn-activity-sections {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wf-role-turn-activity-section {
  padding: 6px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.wf-role-turn-activity-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.wf-role-turn-activity-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  min-width: 0;
  font-size: 11px;
  color: var(--text-secondary);
}

.wf-role-turn-activity-section-title {
  color: var(--text-primary);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wf-role-turn-activity-section-role,
.wf-role-turn-activity-section-count {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 55%, transparent);
}

.wf-role-turn-empty-activity {
  color: var(--text-secondary);
  font-size: 12px;
  padding: 4px 0;
}

.wf-role-turn-open-session {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
}

.wf-role-turn-open-session:hover {
  background: var(--surface-hover, rgba(255, 255, 255, 0.06));
  color: var(--text-primary);
}

/* AgentWorkPanel role-view dot colours align with the role's
 * aggregated status. ``.awp-dot-active`` was a green pulse before; we
 * override it for the role-view to use the orange accent because
 * "active" in that context means "this role is working right now" —
 * orange matches the chip. The pulse animation is preserved (defined in
 * ``@keyframes awp-pulse`` above) so the dot still alternates opacity
 * and reads as alive at a glance. */
.awp-dot-active {
  background: var(--accent);
  opacity: 1;
  box-shadow: 0 0 4px var(--accent);
  animation: awp-pulse 2s ease-in-out infinite;
}
.awp-dot-waiting {
  background: var(--yellow);
  opacity: 1;
}
.awp-dot-pending {
  background: var(--text-secondary);
  opacity: 0.6;
}
.awp-dot-done {
  background: var(--green);
  opacity: 1;
}
.awp-dot-failed {
  background: var(--red);
  opacity: 1;
}

.awp-row-terminal.awp-terminal-active .awp-row-activity { color: var(--accent); }
.awp-row-terminal.awp-terminal-waiting .awp-row-activity { color: var(--yellow); }