/* ── Recent tab: the list of recordings in the agent panel (js/components/recentsPanel.js) ── */
/* Lives inside .agent-panel, so it uses the panel's --ap-* tokens (light, and [data-theme="dark"]). */
/* Dots use --rc-warn / --rc-danger (graphics, 3:1); words use the -text pair (4.5:1 on the panel and a hovered row).
   A hovered row is lighter than --ap-fill in light mode so muted text keeps 4.5:1, and its tile turns white and
   ringed so it doesn't melt into the row (in dark the fills stack, so the tile shows as it is). */
.rc {
  --rc-warn: #d97706; --rc-danger: #dc2626; --rc-warn-text: #b45309; --rc-danger-text: #b91c1c;
  --rc-hover: #f8fafc; --rc-tile-hover: var(--ap-bg); --rc-tile-ring: var(--ap-line);
  --rc-ease: cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
}
[data-theme="dark"] .rc {
  --rc-warn: #fbbf24; --rc-danger: #f87171; --rc-warn-text: #fbbf24; --rc-danger-text: #f87171;
  --rc-hover: var(--ap-fill); --rc-tile-hover: var(--ap-fill); --rc-tile-ring: transparent;
}
.rc:focus { outline: none; } /* focus parks here only when the control that had it went away */

.rc-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.rc-state:empty, .rc-list[hidden], .rc-foot[hidden], .rc-older[hidden], .rc-tag[hidden], .rc-chat-time[hidden],
.rc-clear[hidden], .rc-confirm[hidden] { display: none; }

/* ── One chat: its title, then its rows ── */
.rc-chat + .rc-chat { margin-top: 20px; }
.rc-chat-head { display: flex; align-items: center; min-width: 0; min-height: 20px; margin-bottom: 2px; }
/* Margins, not gap: the live "Updating…" span is always there, and takes no room while empty */
.rc-chat-head > * + * { margin-left: 8px; }
.rc-chat-head > .rc-updating:empty { margin-left: 0; }
.rc-chat-title {
  flex: 1 1 auto; min-width: 0; margin: 0; font-size: 0.75rem; font-weight: 600; line-height: 1.4;
  color: var(--ap-muted); letter-spacing: 0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rc-tag {
  flex: none; padding: 1px 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ap-line);
  font-size: 0.6875rem; font-weight: 500; line-height: 1.45; color: var(--ap-muted);
}
.rc-updating { flex: none; font-size: 0.75rem; line-height: 1.4; color: var(--ap-accent); }
.rc-chat-time { flex: none; font-size: 0.75rem; line-height: 1.4; color: var(--ap-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── A row: icon tile, text, time. Rows bleed into the gutter so their text lines up with the title ── */
.rc-rows { display: flex; flex-direction: column; margin: 0 -10px; }
.rc-row {
  position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 12px; align-items: start;
  width: 100%; margin: 0; padding: 10px; border: 0; border-radius: 10px; background: transparent;
  font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease, transform 120ms var(--rc-ease);
}
@media (hover: hover) and (pointer: fine) {
  .rc-row:hover { background: var(--rc-hover); }
  .rc-row:hover .rc-tile { background: var(--rc-tile-hover); box-shadow: inset 0 0 0 1px var(--rc-tile-ring); }
}
/* Press feedback for the pointer only: Enter / Space never animate (a keyboard press is :focus-visible) */
.rc-row:active:not(:focus-visible) { transform: scale(0.98); }
.rc-row:focus { outline: none; }
.rc-row:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: -2px; }
/* A new or changed row: one accent wash that fades out (restarted from recentsPanel.js flash()).
   Plain ease, a colour change: the strong ease-out would spend the fade in its first frames. */
.rc-row::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--ap-accent); opacity: 0; pointer-events: none;
}
.rc-row.is-new::after { animation: rc-flash 300ms ease; }
@keyframes rc-flash { from { opacity: 0.12; } to { opacity: 0; } }

.rc-tile {
  position: relative; width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center; background: var(--ap-fill); color: var(--ap-soft);
  transition: background-color 150ms ease, box-shadow 150ms ease;
}
.rc-tile svg { width: 16px; height: 16px; }
/* The Ideas page's icon is its own tile (assets/ideas/*.svg): nothing behind it */
.rc-tile.is-image { background: transparent; }
@media (hover: hover) and (pointer: fine) { .rc-row:hover .rc-tile.is-image { background: transparent; box-shadow: none; } }
.rc-img { display: block; width: 32px; height: 32px; border-radius: 27%; user-select: none; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.08); }
/* A wrapper lucide never replaces turns, so a page-wide icon refresh doesn't restart it */
.rc-spin { display: grid; place-items: center; width: 16px; height: 16px; animation: rc-spin 0.9s linear infinite; }
@keyframes rc-spin { to { transform: rotate(360deg); } }
/* Waiting / needs you (amber), failed (red); ringed in the panel colour so it reads over the tile */
.rc-dot {
  position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ap-bg);
}
.rc-dot[data-tone="warning"] { background: var(--rc-warn); }
.rc-dot[data-tone="danger"] { background: var(--rc-danger); }

.rc-text { display: block; min-width: 0; }
.rc-title {
  display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.35; color: var(--ap-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rc-desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  margin-top: 2px; font-size: 0.8125rem; line-height: 1.4; color: var(--ap-muted); text-wrap: pretty; overflow-wrap: anywhere;
}
.rc-meta { display: flex; flex-wrap: wrap; margin-top: 4px; font-size: 0.75rem; line-height: 1.4; color: var(--ap-muted); }
.rc-meta > span + span::before { content: '·'; margin: 0 6px; color: var(--ap-faint); } /* decorative: the only faint ink */
.rc-meta > [data-tone="warning"] { color: var(--rc-warn-text); font-weight: 500; }
.rc-meta > [data-tone="danger"] { color: var(--rc-danger-text); font-weight: 500; }
.rc-meta > [data-tone="accent"] { color: var(--ap-accent); font-weight: 500; }
.rc-meta > [data-tone="neutral"] { color: var(--ap-muted); }
/* On the title's line: its line height, in the time's smaller size */
.rc-time {
  font-size: 0.75rem; line-height: calc(0.875rem * 1.35); color: var(--ap-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── Loading: static rows, shown only once loading took 150 ms; no shimmer ── */
.rc-skel { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; padding: 10px 0; }
.rc-skel-tile { width: 32px; height: 32px; border-radius: 8px; background: var(--ap-fill); }
.rc-skel-lines { display: block; padding-top: 3px; }
.rc-skel-line { display: block; width: 62%; height: 10px; border-radius: 5px; background: var(--ap-fill); }
.rc-skel-line + .rc-skel-line { width: 88%; margin-top: 8px; }

/* ── States (signed out, error): the panel's empty state plus one button ── */
.rc-action {
  margin-top: 14px; height: 32px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--ap-line); border-radius: 8px; background: var(--ap-bg); color: var(--ap-ink);
  font: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease, transform 120ms var(--rc-ease);
}
.rc-action svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
  .rc-action:hover { background: var(--ap-fill); }
  .rc-action-primary:hover { background: var(--ap-accent); filter: brightness(1.08); }
  .rc-action.rc-action-danger:hover { background: var(--rc-danger-text); }
  .rc-action.rc-action-danger:not([aria-disabled="true"]):hover { filter: brightness(1.08); }
}
.rc-action:active:not(:focus-visible):not([aria-disabled="true"]) { transform: scale(0.97); }
.rc-action:focus { outline: none; }
.rc-action:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 2px; }
.rc-action[aria-disabled="true"] { opacity: 0.6; cursor: default; }
.rc-action-primary { border-color: transparent; background: var(--ap-accent); color: #fff; }
[data-theme="dark"] .rc-action-primary { color: #0b1220; }
.rc-action-sm { margin-top: 0; height: 28px; padding: 0 12px; font-size: 0.75rem; }
/* Clear: the one destructive control (its word says it; the colour only repeats it) */
.rc-action-danger { border-color: transparent; background: var(--rc-danger-text); color: var(--ap-bg); }

/* ── Footer: retention and Clear recent activity, the next page; Clear's question below them ── */
.rc-foot {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--ap-line);
  font-size: 0.75rem; line-height: 1.4; color: var(--ap-muted);
}
.rc-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rc-foot-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
/* Quiet, and underlined so it reads as a control without its colour */
.rc-clear {
  margin: -2px -4px; padding: 2px 4px; border: 0; border-radius: 4px; background: none;
  font: inherit; color: var(--ap-muted); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  text-decoration: underline; text-decoration-color: var(--ap-faint); text-underline-offset: 2px;
  transition: color 150ms ease, transform 120ms var(--rc-ease);
}
.rc-clear:active:not(:focus-visible) { transform: scale(0.97); }
.rc-clear:focus { outline: none; }
.rc-clear:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 0; }
.rc-confirm { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--ap-fill); }
.rc-confirm-text { margin: 0 0 10px; font-size: 0.8125rem; line-height: 1.45; color: var(--ap-ink); text-wrap: pretty; }
.rc-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.rc-older {
  flex: none; margin: -4px -6px; padding: 4px 6px; border: 0; border-radius: 6px; background: none;
  font: inherit; font-weight: 500; color: var(--ap-accent); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease, transform 120ms var(--rc-ease);
}
@media (hover: hover) and (pointer: fine) {
  .rc-older:hover { background: var(--ap-fill); }
  .rc-clear:hover { color: var(--ap-ink); }
}
.rc-older:active:not(:focus-visible):not([aria-disabled="true"]) { transform: scale(0.97); }
.rc-older[aria-disabled="true"] { color: var(--ap-muted); cursor: default; }
.rc-older:focus { outline: none; }
.rc-older:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 0; }

@media (prefers-reduced-motion: reduce) {
  .rc-row, .rc-action, .rc-older { transition: background-color 150ms ease; }
  .rc-clear { transition: color 150ms ease; }
  .rc-row:active:not(:focus-visible), .rc-action:active:not(:focus-visible):not([aria-disabled="true"]),
  .rc-older:active:not(:focus-visible):not([aria-disabled="true"]), .rc-clear:active:not(:focus-visible) { transform: none; }
  .rc-row.is-new::after { animation: none; }
  .rc-spin { animation: none; }
}