/* Provider logos Eaon didn't ship (icons/customLogo.tsx). */
.plogo {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  user-select: none;
}
.plogo > img {
  display: block;
  grid-area: 1 / 1;
}
.plogo[data-full] > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* An image's own edge, so a white one doesn't bleed into a white panel. */
.plogo[data-full]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.1);
  pointer-events: none;
}
[data-theme='dark'] .plogo[data-full]::after {
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.1);
}

/* Tiles: colour and dark logos on white like the built-in tiles; a white logo on a dark tile. */
.plogo--tile {
  background: #fff;
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.08);
}
.plogo--tile[data-tone='light'] {
  background: #18181b;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.08);
}

/* Bare marks: the provider's dark-mode logo in dark mode, else a one-colour logo flipped where it would vanish. */
.plogo > .plogo__dark {
  display: none;
}
[data-theme='dark'] .plogo[data-has-dark] > .plogo__light {
  display: none;
}
[data-theme='dark'] .plogo[data-has-dark] > .plogo__dark {
  display: block;
}
[data-theme='dark'] .plogo--mark[data-tone='dark'] > img {
  filter: invert(1);
}
[data-theme='light'] .plogo--mark[data-tone='light'] > img {
  filter: brightness(0);
  opacity: 0.86;
}
/* The ADE header's plan usage rings and their card (components/UsageRings.tsx).
   Each window has its colour — the session green, the week amber — until
   it runs low, when it turns to a warning and then to danger. */

.usage-rings,
.usage-card {
  --ring-session: #3fb984;
  --ring-week: #e9b443;
  --ring-warn: #f08c4a;
  --ring-low: var(--danger);
}
[data-theme='light'] .usage-rings,
[data-theme='light'] .usage-card {
  --ring-session: #1f9d63;
  --ring-week: #c98a12;
  --ring-warn: #d0661c;
}

.usage-rings {
  display: flex;
  align-items: center;
  gap: 2px;
  -webkit-app-region: no-drag;
}

/* They sit in the header's row of buttons: small, centred. */
.usage-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition:
    background var(--dur) var(--ease),
    transform 160ms var(--ease);
  -webkit-app-region: no-drag;
}
.usage-ring:hover,
.usage-ring[data-open] {
  background: var(--hover);
}
.usage-ring:active {
  transform: scale(0.94);
}
.usage-ring[data-off] {
  opacity: 0.55;
}
.usage-ring__svg {
  position: absolute;
  inset: 1px;
  width: 26px;
  height: 26px;
  overflow: visible;
}
.usage-ring__track {
  fill: none;
  stroke: var(--hover-strong, var(--border));
  stroke-width: 2.6;
}
.usage-ring__arc {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  transition:
    stroke-dasharray 700ms var(--ease),
    stroke 300ms var(--ease);
  animation: ring-draw 900ms var(--ease) both;
}
@keyframes ring-draw {
  from {
    stroke-dasharray: 0 200;
  }
}
.usage-ring__arc[data-tone='session'] {
  stroke: var(--ring-session);
}
.usage-ring__arc[data-tone='week'] {
  stroke: var(--ring-week);
}
.usage-ring__arc[data-tone='warn'] {
  stroke: var(--ring-warn);
}
.usage-ring__arc[data-tone='low'] {
  stroke: var(--ring-low);
}
.usage-ring__mark {
  position: relative;
  display: grid;
  place-items: center;
  transform: scale(0.82);
}

/* ---- card ---- */

/* Solid, not the menus' frosted glass: the card sits over the conversation,
   and its figures must not share the page with the text behind them. */
.menu.usage-card {
  max-height: none;
  padding: 0;
  background: var(--surface-3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.usage-card__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 14px 8px;
}
.usage-card__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.usage-card__title {
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 600;
}
.usage-card__plan {
  margin-left: auto;
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.usage-card__refresh {
  align-self: center;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  border-radius: var(--r-xs);
  color: var(--text-4);
  transition:
    color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}
.usage-card__head .usage-card__title + .usage-card__refresh {
  margin-left: auto;
}
.usage-card__refresh:hover {
  background: var(--hover);
  color: var(--text);
}
.usage-card__refresh[data-spinning] svg {
  animation: usage-spin 900ms linear infinite;
}
@keyframes usage-spin {
  to {
    transform: rotate(360deg);
  }
}
.usage-card__legend {
  display: flex;
  gap: 14px;
  margin-top: -4px;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.usage-card__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.usage-card__legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.usage-card__legend i[data-tone='session'] {
  background: var(--ring-session);
}
.usage-card__legend i[data-tone='week'] {
  background: var(--ring-week);
}
.usage-card__note {
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.usage-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: tool-in 260ms var(--ease) both;
}
.usage-row__top {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-variant-numeric: tabular-nums;
}
.usage-row__label {
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 600;
}
.usage-row__left {
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.usage-row__reset {
  margin-left: auto;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.usage-row__bar {
  position: relative;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--hover);
}
.usage-row__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 700ms var(--ease);
  animation: bar-grow 800ms var(--ease) both;
}
@keyframes bar-grow {
  from {
    width: 0;
  }
}
.usage-row__bar > span[data-tone='session'] {
  background: var(--ring-session);
}
.usage-row__bar > span[data-tone='week'] {
  background: var(--ring-week);
}
.usage-row__bar > span[data-tone='warn'] {
  background: var(--ring-warn);
}
.usage-row__bar > span[data-tone='low'] {
  background: var(--ring-low);
}
/* The pace mark: where an even spend would have the bar by now. */
.usage-row__bar > i {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--text);
  opacity: 0.7;
  box-shadow: 0 0 0 2px var(--surface-3);
}
.usage-row__pace {
  display: flex;
  justify-content: space-between;
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.usage-row__pace [data-over] {
  color: var(--ring-warn);
}

.usage-card__more {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  margin: 0 -6px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-align: left;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.usage-card__more:hover {
  background: var(--hover);
  color: var(--text);
}
.usage-card__account {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-4);
  font-size: var(--fs-xs);
}

@media (prefers-reduced-motion: reduce) {
  .usage-ring__arc,
  .usage-row,
  .usage-row__bar > span {
    animation: none;
  }
}
/* Settings → Usage & limits and the sidebar rings' cards (LimitsCard.tsx):
   each provider's limits as bars of what's left, then its details. */

.settings__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.settings__title-row .settings__h1 {
  margin-bottom: 0;
}
.limits-restore,
.limits-head .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.limits-spin {
  animation: limits-spin 900ms linear infinite;
}
@keyframes limits-spin {
  to {
    transform: rotate(360deg);
  }
}

.limits-provider {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.limits-provider__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}

.limits-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 28px 0 10px;
}
.limits-head .settings__section-label {
  margin: 0;
}
.limits-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.limits-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  animation: tool-in 240ms var(--ease) both;
}
.limits-card[data-flat] {
  padding: 0;
  border: 0;
  background: none;
  animation: none;
}
.limits-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.limits-card__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.limits-card__who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.limits-card__name {
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 600;
}
.limits-card__account {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.limits-card__plan {
  flex: none;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--hover);
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.limits-card__limits {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.limits-card__note {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.limits-card__note > span:last-child {
  text-align: right;
}
.limits-card__aside {
  margin: -4px 0 0;
  color: var(--text-3);
  font-size: var(--fs-xs);
}

.limit {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.limit__name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 500;
}
.limit__detail {
  margin-left: auto;
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.limit__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--limit-good);
}
.limit__dot[data-tone='warn'] {
  background: var(--limit-warn);
}
.limit__dot[data-tone='low'] {
  background: var(--limit-low);
}
.limit__bar {
  position: relative;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--hover);
}
.limit__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--limit-good);
  transition: width 700ms var(--ease);
  animation: limit-grow 800ms var(--ease) both;
}
.limit__bar > span[data-tone='warn'] {
  background: var(--limit-warn);
}
.limit__bar > span[data-tone='low'] {
  background: var(--limit-low);
}
@keyframes limit-grow {
  from {
    width: 0;
  }
}
/* Where an even spend would have the bar by now. */
.limit__bar > i {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 1px;
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--limit-good);
}
.limit__line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.limit__line--quiet {
  margin-top: -2px;
  color: var(--text-3);
}
.limit__line [data-over] {
  color: var(--limit-warn);
}

.limits-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.limits-card__toggle:hover {
  color: var(--text);
}
.limits-card__toggle svg {
  transition: transform 200ms var(--ease);
}
.limits-card__toggle[aria-expanded='true'] svg {
  transform: rotate(180deg);
}
.limits-card__details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  animation: ide-pane-in 200ms var(--ease) both;
}
.limits-detail {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.limits-detail > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.limits-detail__label {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.limits-detail__sub {
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.limits-detail__value {
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.limits-card,
.usage-card {
  --limit-good: #3fb984;
  --limit-warn: #f08c4a;
  --limit-low: var(--danger);
}
[data-theme='light'] .limits-card,
[data-theme='light'] .usage-card {
  --limit-good: #1f9d63;
  --limit-warn: #d0661c;
}

/* The ring's popover: the card, then refresh and the way to the page. */
.usage-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.usage-card__foot .usage-card__more {
  margin: 0;
}
/*
 * The generate_image card (components/agent/ImageGeneration.tsx).
 *
 * A tile per image, drawn at the shape that was asked for, so the picture
 * lands in the space that was waiting for it. While it is being made the
 * tile "develops": a soft field of the theme's accent drifts under film
 * grain while a band of light passes over it. When the file arrives it
 * resolves out of a blur, each tile a beat after the one before.
 */

.imggen {
  margin: 6px 0 10px;
  max-width: 560px;
  animation: tool-in var(--dur-spring) var(--spring-moderate) both;
}

.imggen__head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 2px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.imggen__glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
}
.imggen[data-status='error'] .imggen__glyph,
.imggen[data-status='denied'] .imggen__glyph {
  color: var(--danger);
}
.imggen__title {
  color: var(--text-2);
}
.imggen__meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

.imggen__prompt {
  margin: 0 0 8px 26px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.imggen__error {
  margin: 0 0 0 26px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

/* One image sits at a comfortable size; two and four tile in pairs, three in a row. */
.imggen__grid {
  display: grid;
  gap: 8px;
  margin-left: 26px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.imggen[data-count='1'] .imggen__grid {
  grid-template-columns: minmax(0, 380px);
}
.imggen[data-count='3'] .imggen__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.imggen__tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-lg);
  background: var(--sunken);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}

/* The developing field: two soft lights in the accent drifting past each other. */
.imggen__field {
  position: absolute;
  inset: -45%;
  z-index: 0;
  background:
    radial-gradient(closest-side at 34% 38%, color-mix(in srgb, var(--accent) 42%, transparent), transparent),
    radial-gradient(closest-side at 68% 66%, color-mix(in srgb, var(--accent) 22%, color-mix(in srgb, var(--fg) 14%, transparent)), transparent),
    radial-gradient(closest-side at 52% 50%, color-mix(in srgb, var(--fg) 6%, transparent), transparent);
  filter: blur(22px);
  opacity: 0.9;
  animation: imggen-drift 7.5s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -1.9s);
}
@keyframes imggen-drift {
  from {
    transform: translate(-7%, -5%) rotate(0deg) scale(1);
  }
  to {
    transform: translate(7%, 6%) rotate(28deg) scale(1.14);
  }
}

/* Film grain, so the field reads as an exposure rather than a gradient. */
.imggen__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: imggen-grain 0.9s steps(3) infinite;
}
@keyframes imggen-grain {
  0% {
    background-position: 0 0;
  }
  33% {
    background-position: -37px 21px;
  }
  66% {
    background-position: 19px -43px;
  }
}

/* A band of light passing over, every couple of seconds. */
.imggen__sweep {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 30%,
    color-mix(in srgb, var(--fg) 9%, transparent) 46%,
    color-mix(in srgb, var(--fg) 14%, transparent) 50%,
    color-mix(in srgb, var(--fg) 9%, transparent) 54%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: imggen-sweep 2.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
  animation-delay: calc(var(--i, 0) * 0.35s);
}
@keyframes imggen-sweep {
  60%,
  100% {
    transform: translateX(100%);
  }
}

.imggen__stage {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  max-width: calc(100% - 20px);
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(8px);
  color: var(--text-2);
  font-size: var(--fs-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Once a file is there the field stops moving; the picture resolves over it. */
.imggen__tile:not([data-state='developing']) .imggen__field,
.imggen__tile:not([data-state='developing']) .imggen__grain {
  animation-play-state: paused;
}
.imggen__tile[data-state='shown'] .imggen__grain {
  opacity: 0;
  transition: opacity 600ms var(--ease);
}

.imggen__open {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  cursor: zoom-in;
}
.imggen__open img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
}
.imggen__tile[data-state='shown'] .imggen__open img {
  animation: imggen-reveal 820ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes imggen-reveal {
  from {
    opacity: 0;
    filter: blur(18px) saturate(0.4) brightness(1.18);
    transform: scale(1.035);
  }
  55% {
    opacity: 1;
  }
  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* Copy path and Show in Finder, in the corner on hover. */
.imggen__actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: translateY(-2px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.imggen__tile:hover .imggen__actions,
.imggen__tile:focus-within .imggen__actions {
  opacity: 1;
  transform: none;
}
.imggen__action {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, #000 45%, transparent);
  backdrop-filter: blur(10px);
  color: #fff;
  transition: background var(--dur) var(--ease);
}
.imggen__action:hover {
  background: color-mix(in srgb, #000 62%, transparent);
}

/* Full size, in the modal. */
.imggen-view img {
  display: block;
  max-width: 100%;
  max-height: 66vh;
  margin: 0 auto;
  border-radius: var(--r-md);
  object-fit: contain;
}
.imggen-view__prompt {
  margin: 12px 0 0;
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .imggen__field,
  .imggen__grain,
  .imggen__sweep {
    animation: none;
  }
  .imggen__sweep {
    display: none;
  }
  .imggen__tile[data-state='shown'] .imggen__open img {
    animation-duration: 1ms;
  }
}
/*
 * The agent's plan, pinned above the composer (WorkBits.tsx TodoPanel).
 *
 * Folded it is one line: a ring that fills as steps get done, the count, and
 * the step in progress. Open it is a timeline: a rail runs down the marks and
 * fills behind the steps that are done, the step in progress has an arc
 * circling its mark, and a step that gets done fills its dot, draws its check
 * and strikes its text through, left to right.
 */

.tasks {
  --tasks-on: var(--accent);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}

/* ---- the folded line ---- */

.tasks__head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 34px;
  padding: 0 12px;
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--text-3);
  border-radius: inherit;
}
.tasks__head:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.tasks__ring {
  flex: none;
  transform: rotate(-90deg);
}
.tasks__ring circle {
  fill: none;
  stroke-width: 2;
}
.tasks__ring-track {
  stroke: var(--border-strong);
}
.tasks__ring-fill {
  stroke: var(--tasks-on);
  stroke-linecap: round;
  transition: stroke-dashoffset 640ms var(--spring-slow);
}

.tasks__title {
  flex: none;
  color: var(--text-2);
  font-weight: 500;
}

.tasks__count {
  flex: none;
  display: inline-flex;
  gap: 0.28em;
  font-variant-numeric: tabular-nums;
}
.tasks__count-done {
  display: inline-block;
  color: var(--text-2);
  animation: tasks-tick 320ms var(--spring-fast) both;
}

.tasks__current {
  min-width: 0;
  flex: 1;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  animation: tasks-swap 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tasks__current::before {
  content: '·';
  margin-right: 8px;
  color: var(--text-4);
}

.tasks__chevron {
  flex: none;
  margin-left: auto;
  color: var(--text-4);
  transition: transform var(--dur) var(--ease);
}
.tasks[data-open] .tasks__chevron {
  transform: rotate(180deg);
}

/* ---- the open list ---- */

/* A long plan scrolls under its line, which stays put, and its scrollbar is
   the app's own: a thin rounded thumb inside the card's edge, shown while the
   pointer is over the plan, rather than a square grey track down its side. */
.tasks__list {
  list-style: none;
  margin: 0;
  padding: 2px 12px 10px;
  max-height: 186px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tasks__list::-webkit-scrollbar {
  width: 10px;
}
.tasks__list::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: transparent;
  background-clip: padding-box;
}
.tasks:hover .tasks__list::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  background-clip: padding-box;
}
.tasks__list::-webkit-scrollbar-track {
  margin-bottom: 8px;
  background: transparent;
}

.tasks__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 0;
  font-size: var(--fs-sm);
  line-height: 18px;
  color: var(--text-2);
  animation: tasks-in 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 32ms);
}

/* The rail: from under this mark to the next one, filled once this step is done. */
.tasks__item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 7.25px;
  top: 21px;
  bottom: -3px;
  width: 1.5px;
  border-radius: 1px;
  background: var(--border-strong);
}
.tasks__item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 7.25px;
  top: 21px;
  bottom: -3px;
  width: 1.5px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--tasks-on) 70%, transparent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1) 160ms;
}
.tasks__item[data-status='done']:not(:last-child)::after {
  transform: scaleY(1);
}

.tasks__mark {
  flex: none;
  margin-top: 1px;
  overflow: visible;
}
.tasks__mark circle,
.tasks__mark path {
  fill: none;
  stroke-width: 1.5;
}
.tasks__mark-ring {
  stroke: var(--text-4);
  transition: stroke 200ms ease;
}
.tasks__mark-orbit {
  stroke: var(--tasks-on);
  stroke-linecap: round;
  stroke-dasharray: 9 29;
  opacity: 0;
  transform-origin: 8px 8px;
  transition: opacity 200ms ease;
}
.tasks__mark-fill {
  fill: var(--tasks-on) !important;
  stroke: none !important;
  transform-origin: 8px 8px;
  transform: scale(0);
  transition: transform 360ms var(--spring-moderate);
}
.tasks__mark-check {
  stroke: var(--on-accent, #fff) !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 9;
  stroke-dashoffset: 9;
  transition: stroke-dashoffset 300ms cubic-bezier(0.65, 0, 0.35, 1) 140ms;
}

.tasks__item[data-status='in_progress'] {
  color: var(--text);
}
.tasks__item[data-status='in_progress'] .tasks__mark-ring {
  stroke: color-mix(in srgb, var(--tasks-on) 28%, transparent);
}
.tasks__item[data-status='in_progress'] .tasks__mark-orbit {
  opacity: 1;
  animation: tasks-orbit 1.1s linear infinite;
}

.tasks__item[data-status='done'] {
  color: var(--text-3);
}
.tasks__item[data-status='done'] .tasks__mark-ring {
  stroke: transparent;
}
.tasks__item[data-status='done'] .tasks__mark-fill {
  transform: scale(1);
}
.tasks__item[data-status='done'] .tasks__mark-check {
  stroke-dashoffset: 0;
}

.tasks__text {
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
}
/* The strike is a drawn line, not text-decoration, so it can sweep across. */
.tasks__label {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / 0% 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition:
    background-size 420ms cubic-bezier(0.65, 0, 0.35, 1) 180ms,
    color 200ms ease;
}
.tasks__item[data-status='done'] .tasks__label {
  background-size: 100% 1px;
}

/* The reply has finished: a step left in progress waits rather than spins. */
.tasks:not([data-live]) .tasks__item[data-status='in_progress'] .tasks__mark-orbit {
  animation: none;
  opacity: 0;
}

@keyframes tasks-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
@keyframes tasks-tick {
  from {
    opacity: 0;
    transform: translateY(55%);
  }
}
@keyframes tasks-swap {
  from {
    opacity: 0;
    transform: translateY(6px);
    filter: blur(2px);
  }
}
@keyframes tasks-orbit {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tasks__item,
  .tasks__count-done,
  .tasks__current,
  .tasks__item[data-status='in_progress'] .tasks__mark-orbit {
    animation: none;
  }
  .tasks__ring-fill,
  .tasks__item::after,
  .tasks__mark-fill,
  .tasks__mark-check,
  .tasks__label {
    transition: none;
  }
}
/* Dictation: the mic button and the bar that takes the text box's place while recording. */

.composer__mic[data-active='true'] {
  color: var(--accent);
}

.voice-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  /* The text box's own height and inset, so nothing jumps when it swaps in. */
  min-height: 46px;
  padding: 8px 6px 4px;
}

.voice-bar__btn {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  color: var(--text-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.voice-bar__btn:hover:not(:disabled) {
  background: var(--surface-4);
  color: var(--text);
}
.voice-bar__btn:disabled {
  opacity: 0.4;
}
.voice-bar__btn--done {
  background: var(--accent);
  color: var(--on-accent);
}
.voice-bar__btn--done:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent), #000000 12%);
  color: var(--on-accent);
}

.voice-wave {
  flex: 1;
  min-width: 0;
  height: 30px;
  /* Older bars fade out at the left edge rather than being cut off. */
  mask-image: linear-gradient(90deg, transparent, #000000 22%);
}

.voice-bar__time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-width: 44px;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.voice-bar[data-state='transcribing'] .voice-bar__time {
  min-width: 0;
}

/* The recording light: a slow breath, not a blink. */
.voice-bar__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
  animation: voice-breath 1.6s ease-in-out infinite;
}
@keyframes voice-breath {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.82);
  }
}

/* Something went wrong: what and why, above the toolbar, until dismissed. */
.voice-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 8px 2px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--danger);
}
.voice-error__text {
  flex: 1;
}
.voice-error button {
  flex: none;
  color: var(--text-3);
}

@media (prefers-reduced-motion: reduce) {
  .voice-bar__dot {
    animation: none;
  }
}
/* Setting up dictation (SpeechSetup.tsx): a card above the message box, like
   the model notice beside it, with the download and its progress in place. */

.speech-setup {
  --go: color-mix(in srgb, var(--link), #ffffff 28%);
  --go-ink: color-mix(in srgb, var(--accent), #000000 64%);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0 0 8px;
  padding: 10px 10px 10px 11px;
  border-radius: 14px;
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--border-soft);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.45;
  animation: speech-setup-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-theme='light'] .speech-setup {
  --go: var(--accent-fill);
  --go-ink: var(--on-accent);
}

@keyframes speech-setup-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}

/* A round mark: the mic, or a check once the model is in. */
.speech-setup__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--link) 14%, transparent);
  color: var(--link);
}
.speech-setup[data-state='ready'] .speech-setup__mark {
  background: color-mix(in srgb, #30a46c 16%, transparent);
  color: #30a46c;
}

.speech-setup__words {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.speech-setup__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  color: var(--text);
  font-weight: 500;
}
.speech-setup__count {
  margin-left: auto;
  color: var(--text-3);
  font-weight: 400;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.speech-setup__desc {
  color: var(--text-2);
  text-wrap: pretty;
}
.speech-setup__desc[data-tone='error'] {
  color: var(--danger);
}

/* The download's progress, under its name. */
.speech-setup__bar {
  display: block;
  height: 4px;
  margin-top: 6px;
  border-radius: var(--r-pill);
  background: var(--hover-strong);
  overflow: hidden;
}
.speech-setup__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--link);
  transition: width 240ms var(--ease);
}

.speech-setup__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.speech-setup__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--hover-strong);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform 120ms var(--ease);
}
.speech-setup__btn:hover {
  background: color-mix(in srgb, var(--hover-strong), var(--text) 8%);
}
.speech-setup__btn--go {
  background: var(--go);
  color: var(--go-ink);
}
.speech-setup__btn--go:hover {
  background: color-mix(in srgb, var(--go), #000000 10%);
}
.speech-setup__btn:active {
  transform: scale(0.96);
}
.speech-setup__close {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--text-3);
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.speech-setup__close:hover {
  background: var(--hover);
  color: var(--text);
}
.speech-setup__btn:focus-visible,
.speech-setup__close:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Over the ADE's terminals: the same card, floating at the foot of the
   workspace where the hold-to-talk pill shows, lifted with a shadow. */
.speech-setup--floating {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 30;
  width: min(600px, calc(100% - 48px));
  margin: 0;
  background: var(--menu-bg);
  -webkit-backdrop-filter: var(--frost);
  backdrop-filter: var(--frost);
  box-shadow:
    0 0 0 1px var(--border),
    var(--shadow-menu);
  transform: translateX(-50%);
  animation-name: speech-setup-float-in;
}
@keyframes speech-setup-float-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .speech-setup,
  .speech-setup--floating {
    animation: none;
  }
  .speech-setup__bar > span {
    transition: none;
  }
}
/* Hold-to-talk in the ADE (AdeDictation.tsx): a pill at the foot of the
   terminals that listens, transcribes, then shows the words arriving. */

.ade-dictation {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 300px;
  max-width: min(620px, calc(100% - 48px));
  min-height: 44px;
  padding: 7px 14px 7px 8px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-menu);
  color: var(--text);
  font-size: var(--fs-sm);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: ade-dictation-in 380ms var(--spring-moderate) both;
  pointer-events: auto;
}

@keyframes ade-dictation-in {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateX(-50%) translateY(10px) scale(0.94);
  }
}

/* Listening: a red mic that breathes with a ring going out from it. */
.ade-dictation__rec {
  position: relative;
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: #ef4444;
  color: #ffffff;
}
.ade-dictation__rec::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 color-mix(in srgb, #ef4444 55%, transparent);
  animation: ade-dictation-ring 1.4s var(--ease) infinite;
}
@keyframes ade-dictation-ring {
  to {
    box-shadow: 0 0 0 9px color-mix(in srgb, #ef4444 0%, transparent);
  }
}

.ade-dictation .voice-wave {
  flex: 1;
  min-width: 150px;
  height: 26px;
}

.ade-dictation__time {
  flex: none;
  min-width: 34px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.ade-dictation__hint {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
}

/* Transcribing: the strip holds and a highlight sweeps it (VoiceWave); the
   word shimmers beside it. */
.ade-dictation[data-phase='transcribing'] {
  padding-left: 14px;
}
.ade-dictation__working {
  flex: none;
  font-weight: 500;
  background: linear-gradient(90deg, var(--text-3) 0%, var(--text) 45%, var(--text-3) 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ade-dictation-shimmer 1.3s linear infinite;
}
.ade-dictation__working::after {
  content: '…';
}
@keyframes ade-dictation-shimmer {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -120% 0;
  }
}

/* Spoken: each word rises out of a blur, one after another, then a glint
   passes over the line as it goes into the terminal. */
.ade-dictation[data-phase='spoken'] {
  padding: 9px 18px;
}
.ade-dictation__words {
  position: relative;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.3em;
  line-height: 1.45;
  overflow: hidden;
}
.ade-dictation__word {
  display: inline-block;
  animation: ade-dictation-word 420ms var(--spring-moderate) both;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes ade-dictation-word {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(8px);
  }
}
.ade-dictation__words::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--accent) 35%, transparent) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: ade-dictation-glint 900ms var(--ease) 750ms both;
  pointer-events: none;
}
@keyframes ade-dictation-glint {
  to {
    transform: translateX(100%);
  }
}

.ade-dictation[data-phase='error'] {
  padding-left: 16px;
}
.ade-dictation__error {
  flex: 1;
  color: var(--text-2);
}
.ade-dictation__close {
  width: 24px;
  height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  color: var(--text-3);
}
.ade-dictation__close:hover {
  background: var(--surface-4);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .ade-dictation,
  .ade-dictation__word {
    animation: ade-dictation-fade 160ms linear both;
  }
  .ade-dictation__rec::after,
  .ade-dictation__words::after,
  .ade-dictation__working {
    animation: none;
  }
  .ade-dictation__working {
    color: var(--text-2);
  }
}
body[data-reduce-motion='on'] .ade-dictation,
body[data-reduce-motion='on'] .ade-dictation__word {
  animation: ade-dictation-fade 160ms linear both;
}
body[data-reduce-motion='on'] .ade-dictation__rec::after,
body[data-reduce-motion='on'] .ade-dictation__words::after,
body[data-reduce-motion='on'] .ade-dictation__working {
  animation: none;
}
@keyframes ade-dictation-fade {
  from {
    opacity: 0;
  }
}
/*
 * Plugins and skills. Imported by the components that use it rather than from
 * main.tsx, so this feature's styles live with the feature.
 */

/* ---------------- Logo tiles ---------------- */

.plugin-logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--border-soft);
  overflow: hidden;
}
.plugin-logo__mark {
  width: 58%;
  height: 58%;
  background-color: var(--text);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.plugin-logo__letter {
  font-weight: 600;
  line-height: 1;
  color: var(--text-2);
}

/* The composer tray overlaps its tiles; a ring in the tray colour separates them. */
.plugin-stack > .plugin-logo {
  box-shadow: 0 0 0 1.5px var(--surface-1);
}

/* ---------------- Catalog ---------------- */

.plugin-catalog__search {
  margin: 8px 0 18px;
}
/* The shared settings link style pins itself to the top of a column; in an
   action row it should sit on the buttons' centre line. */
.plugin-row__actions .plugin-row__link {
  align-self: center;
}
.plugin-row__meta {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-4);
}
.plugin-row__status[data-tone='ok'] .plugin-row__dot {
  background: var(--diff-add-fg);
}
.plugin-row__status[data-tone='busy'] .plugin-row__dot {
  background: var(--text-3);
}
.plugin-row__status[data-tone='warn'] {
  color: var(--text);
}
.plugin-row__status[data-tone='warn'] .plugin-row__dot,
.plugin-row__status[data-tone='error'] .plugin-row__dot {
  background: var(--danger);
}
.plugin-row__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.plugin-row__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.plugin-row__fields--single {
  grid-template-columns: 1fr;
}
.plugin-row__hint {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-3);
  line-height: 1.5;
}
.plugin-row__trading {
  color: var(--text-2);
}
.plugin-row__hint code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.plugin-empty {
  padding: 28px 16px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

/* ---------------- Skills ---------------- */

.skills__toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.skills__toolbar > .search-field {
  flex: 1;
}
.skills__list {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.skill-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  min-height: 60px;
}
.skill-row + .skill-row {
  border-top: 1px solid var(--border);
}
.skill-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.skill-row__title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.skill-row__name {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skill-row__desc {
  font-size: var(--fs-sm);
  color: var(--text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.skill-row[data-off] .skill-row__name,
.skill-row[data-off] .skill-row__desc {
  opacity: 0.55;
}
.skill-row__trail {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.skill-source {
  flex: none;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xxs);
  font-weight: 500;
  color: var(--text-2);
  background: var(--hover-strong);
}
.skill-source[data-project] {
  color: var(--link);
  background: color-mix(in srgb, var(--accent), transparent 86%);
}
.skills__note {
  margin: 10px 2px 0;
  font-size: var(--fs-sm);
  color: var(--text-3);
  line-height: 1.5;
}
.skills__error {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  color: var(--danger);
}
.skill-form .field-label {
  margin-top: 14px;
}
.skill-form .field-label:first-child {
  margin-top: 0;
}
.skill-form textarea.input {
  min-height: 140px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  resize: vertical;
}
/* The composer's "/" and "@" menus. They sit just above the composer box,
   inside .composer-stack (position: relative), rather than in a portal: the
   text box keeps focus and stays clickable while the menu is open. Looks come
   from .menu; only placement changes here. */
.menu.suggest-menu {
  position: absolute;
  left: 4px;
  bottom: calc(100% + 6px);
  width: min(340px, calc(100% - 8px));
  max-height: min(300px, 45vh);
  z-index: 20;
  transform-origin: bottom left;
}
.menu.suggest-menu .menu__item-hint {
  color: var(--text-3);
}

/* A plugin pulled into the message with "@": shown with its logo among the chips. */
.composer-chip__logo {
  display: grid;
  place-items: center;
}
/* Link accounts (components/LinkAccounts.tsx). */

.la {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.la__lede {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.45;
}
.la__all {
  display: flex;
  align-items: center;
  gap: 12px;
}
.la__all > .btn {
  flex: none;
}
.la__fine {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.4;
}
.la__note {
  margin: 0;
  padding: 8px 11px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.la__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* The modal body scrolls; this keeps a long list from pushing Done off-screen. */
  max-height: min(520px, calc(100vh - 300px));
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}

.la-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid transparent;
}
.la-row[data-linked] {
  border-color: color-mix(in srgb, var(--diff-add-fg), transparent 70%);
}
.la-row__head {
  display: flex;
  align-items: center;
  gap: 11px;
}
.la-row__head > svg,
.la-row__head > span:first-child {
  flex: none;
}
.la-row__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.la-row__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
}
.la-row__found {
  font-size: 11px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent), transparent 82%);
  color: var(--text);
  white-space: nowrap;
}
.la-row__blurb {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.35;
}
.la-row__head > .btn {
  flex: none;
}
.la__linked {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--diff-add-fg);
}
.la-row__key {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 45px;
}
.la-row__key .input {
  flex: 1;
  min-width: 0;
  height: 28px;
}
.la-row__why {
  margin: 0;
  padding-left: 45px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.45;
}
.la-row__inline {
  color: var(--accent);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.la-row__error {
  margin: 0;
  padding-left: 45px;
  font-size: var(--fs-xs);
  color: var(--danger);
}

/* A linked provider's models, right under it: pick one to use it now. */
.la-models {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-left: 45px;
}
.la-models__chip,
.la-models__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  font-size: var(--fs-xs);
  color: var(--text);
  transition: background var(--dur) var(--ease);
}
.la-models__chip:hover,
.la-models__more:hover {
  background: var(--surface-4);
}
.la-models__more {
  color: var(--text-3);
}
.la-models__badge {
  font-size: 10px;
  color: var(--text-3);
}

/* In first-run setup, instead of a "Set up" button that would open Settings behind it. */
.la__later {
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
}
/* Adapted from AICSS (MIT, Copyright (c) 2026 AICSS); see components/aicss/LICENSE.
   Colours come from Eaon's theme tokens, so one set covers every theme, light
   and dark; the accent stands in for the original blue. */
._root_7bx98_4 {
  --ss-shell: color-mix(in srgb, var(--fg) 9%, transparent);
  --ss-shell-2: color-mix(in srgb, var(--fg) 6.5%, transparent);
  --ss-line: color-mix(in srgb, var(--fg) 8.4%, transparent);
  --ss-label: var(--text);
  --ss-label-dim: color-mix(in srgb, var(--text) 40%, transparent);
  --ss-tick: color-mix(in srgb, var(--fg) 22%, transparent);
  --ss-thumb-shadow: 0 1px 1px color-mix(in srgb, var(--shadow-ink) 16%, transparent);
  --ss-fill: var(--accent);

  position: relative;
  width: 264px;
  height: 52px;
  user-select: none;
  touch-action: none;
  font-family: inherit;
}

._shell_7bx98_22 {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

._label_7bx98_32 {
  position: absolute;
  top: 2.5px;
  z-index: 2;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  pointer-events: none;
}

._swap_7bx98_44 {
  display: flex;
  gap: 3px;
  animation: _ss-blur-in_7bx98_1 180ms ease-out;
}

@keyframes _ss-blur-in_7bx98_1 {
  from {
    filter: blur(2.5px);
    opacity: 0.35;
  }
  to {
    filter: blur(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._swap_7bx98_44 {
    animation: none;
  }
}

._rest_7bx98_67 {
  position: absolute;
  top: 0;
  right: 6px;
  left: 6px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  line-height: 1;
  color: var(--ss-label-dim);
  pointer-events: none;
}

._restLevel_7bx98_82 {
  color: var(--ss-label);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  animation: _ss-blur-in_7bx98_1 180ms ease-out;
}

._current_7bx98_89 {
  color: var(--ss-label);
}

._next_7bx98_93 {
  color: var(--ss-label-dim);
}

._track_7bx98_97 {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 32px;
  border-radius: 16px;
  cursor: grab;
}

._root_7bx98_4[data-dragging="true"] ._track_7bx98_97 {
  cursor: grabbing;
}

._fill_7bx98_111 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 16px;
  background: linear-gradient(90deg, var(--ss-fill), color-mix(in srgb, var(--ss-fill), #000000 16%));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

._thumb_7bx98_122 {
  position: absolute;
  top: 50%;
  z-index: 2;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #f5f5f5);
  box-shadow: var(--ss-thumb-shadow);
  pointer-events: none;
}

._tick_7bx98_132 {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 1.5px;
  margin-left: -0.75px;
  border-radius: 1px;
  background: var(--ss-tick);
  transform: translateY(-50%);
  pointer-events: none;
}

._tick_7bx98_132[data-active="true"] {
  background: color-mix(in srgb, var(--ss-fill), #ffffff 40%);
}

._tick_7bx98_132[data-on-thumb="true"] {
  background: rgba(0, 0, 0, 0.45);
}

._track_7bx98_97:focus-visible {
  outline: 2px solid var(--ss-fill);
  outline-offset: 3px;
}
/* The composer's model picker (ModelPicker.tsx) and its effort slider
   (ReasoningEffort.tsx). Sizes are taken from the reference design: a 296px
   panel, a 41px tab row, a 29px search row, 27px model rows (seven before it
   scrolls) and the effort row. */

.menu.mp {
  --mp-bg: #181715;
  --mp-line: rgba(255, 255, 255, 0.075);
  --mp-text: #ececec;
  --mp-text-2: #8d8a87;
  --mp-text-3: #6e6b68;
  --mp-kbd: #a29e9b;
  --mp-icon: #a9a7a5;
  --mp-hover: rgba(255, 255, 255, 0.025);
  --mp-blue: #4b84d1;
  max-height: none;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--mp-bg);
  border: 1px solid rgba(255, 255, 255, 0.075);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.25);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--mp-text);
  font-size: 13.5px;
  --pop-origin: bottom left;
}
[data-theme='light'] .menu.mp {
  --mp-bg: #ffffff;
  --mp-line: rgba(0, 0, 0, 0.07);
  --mp-text: #1d1d1f;
  --mp-text-2: #7a7a80;
  --mp-text-3: #a3a3a8;
  --mp-kbd: #8a8a90;
  --mp-icon: #6e6e73;
  --mp-hover: rgba(0, 0, 0, 0.04);
  --mp-blue: #3f7fd6;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.16),
    0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ---------------- Provider marks ---------------- */

.pmark {
  display: block;
  flex: none;
  object-fit: contain;
  user-select: none;
}
[data-theme='light'] .pmark[data-mono] {
  filter: brightness(0);
  opacity: 0.86;
}
.pmark--letter {
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.4px solid currentColor;
  font-weight: 600;
  line-height: 1;
  color: var(--mp-text-2, var(--text-2));
}

/* ---------------- Tabs ---------------- */

.mp__tabs {
  height: 41px;
  flex: none;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--mp-line);
  padding: 0 6px 0 5px;
}
.mp__tabs-scroll {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
}
.mp__tabs-scroll::-webkit-scrollbar {
  display: none;
}
.mp__tab {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 30px;
  padding: 0 7px;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--mp-text);
  font: inherit;
  font-size: 12.5px;
  cursor: default;
}
.mp__tab:hover .mp__tab-mark,
.mp__tab:hover .mp__tab-star {
  opacity: 1;
}
.mp__tab-star {
  color: var(--mp-text-2);
}
.mp__tab[data-active] .mp__tab-star {
  color: var(--mp-text);
}
.mp__tab-mark {
  position: relative;
  display: block;
}
/* Centred on the mark's top-right corner. */
.mp__tab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a09c9d;
  box-shadow: 0 0 0 1.5px var(--mp-bg);
}
.mp__tab-name {
  white-space: nowrap;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: mp-name-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* The open tab's underline: under its mark and name, just above the line. */
.mp__tab[data-active]::after {
  content: '';
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 3px;
  height: 2px;
  border-radius: 1px;
  background: var(--mp-blue);
  animation: mp-underline-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mp__add {
  flex: none;
  width: 28px;
  display: grid;
  place-items: center;
  margin-left: 2px;
  border: 0;
  background: none;
  color: var(--mp-icon);
  cursor: default;
}
.mp__add:hover {
  color: var(--mp-text);
}
@keyframes mp-name-in {
  from {
    opacity: 0;
    transform: translateX(-3px);
  }
}
@keyframes mp-underline-in {
  from {
    transform: scaleX(0.6);
    opacity: 0;
  }
}

/* ---------------- Search ---------------- */

.mp__search {
  height: 29px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px 0 12.5px;
  border-bottom: 1px solid var(--mp-line);
  color: #77736f;
}
.mp__search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--mp-text);
  font: inherit;
  font-size: 12px;
}
.mp__search input::placeholder {
  color: var(--mp-text-3);
}

/* ---------------- Models ---------------- */

/* Scrolls without a visible bar, so the keys and stars sit in the same place
   whether or not there are more than seven models. */
.mp__list {
  position: relative;
  max-height: 200px;
  flex: none;
  overflow-y: auto;
  padding: 4.5px 4px 7px;
  scrollbar-width: none;
}
.mp__list::-webkit-scrollbar {
  display: none;
}
.mp__row {
  position: relative;
  height: 27px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6.5px 0 8px;
  font-size: 13px;
  cursor: default;
}
/* The highlight is a little shorter than the row, so neighbours never touch. */
.mp__row[data-active]::before {
  content: '';
  position: absolute;
  inset: 1px 0;
  border-radius: 8px;
  background: var(--mp-hover);
}
.mp__row > * {
  position: relative;
}
/* "Same as Chat", over the models: a pick of its own, set off by a rule. */
.mp__row--follow {
  margin-bottom: 4px;
}
.mp__row--follow::after {
  content: '';
  position: absolute;
  right: 6px;
  bottom: -3px;
  left: 6px;
  height: 1px;
  background: var(--border-soft);
}
.mp__row--follow:hover::before {
  content: '';
  position: absolute;
  inset: 1px 0;
  border-radius: 8px;
  background: var(--mp-hover);
}
.mp__check {
  flex: none;
  color: var(--mp-text);
}
.mp__row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--mp-text);
}
.mp__kbd {
  flex: none;
  padding: 2px 4px;
  border-radius: 4.5px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--mp-kbd);
  font: inherit;
  font-size: 10.5px;
  line-height: 1.2;
}
[data-theme='light'] .mp__kbd {
  background: rgba(0, 0, 0, 0.04);
}
.mp__fav {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--mp-text-2);
  cursor: default;
  transition: color 120ms ease, transform 160ms cubic-bezier(0.3, 1.6, 0.5, 1);
}
.mp__fav:hover {
  color: var(--mp-text);
}
.mp__fav[data-on] {
  color: var(--mp-text);
}
.mp__fav:active {
  transform: scale(0.86);
}
/* A provider that needs attention: an amber dot where a repeated mark gets grey. */
.mp__tab-badge[data-tone='warn'] {
  background: #d69a3a;
}
/* The chosen model can't be used, or the open provider needs attention: why, and the fix. */
.mp__notice {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--mp-line);
  color: var(--mp-text-2);
  font-size: 11.5px;
  line-height: 1.4;
}
.mp__notice > svg {
  flex: none;
  margin-top: 1.5px;
  color: #d69a3a;
}
.mp__notice--info > svg {
  color: var(--mp-text-3);
}
.mp__notice b {
  color: var(--mp-text);
  font-weight: 500;
}
.mp__notice span {
  flex: 1;
  min-width: 0;
}
.mp__notice-action {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mp-blue-text);
  font: inherit;
  font-weight: 500;
  cursor: default;
}
.mp__notice-action:hover {
  text-decoration: underline;
}
.mp__section {
  padding: 7px 8px 3px;
  color: var(--mp-text-3);
  font-size: 11px;
}
.mp__row[data-attention] .mp__row-name {
  color: var(--mp-text-2);
}
.mp__row-warn {
  flex: none;
  color: #d69a3a;
}
.mp__tag {
  flex: none;
  padding: 1px 5px;
  border-radius: 4.5px;
  border: 1px solid var(--mp-line);
  color: var(--mp-text-2);
  font-size: 10px;
  line-height: 1.3;
}
.mp__empty {
  padding: 22px 12px;
  text-align: center;
  color: var(--mp-text-2);
  font-size: 12.5px;
  display: grid;
  justify-items: center;
  gap: 10px;
}
.mp__empty p {
  margin: 0;
}

/* ---------------- Effort ---------------- */

.mp__foot {
  flex: none;
  display: flex;
  justify-content: center;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--mp-line);
}

@media (prefers-reduced-motion: reduce) {
  .mp__tab-name,
  .mp__tab[data-active]::after {
    animation: none;
  }
}

/* ---------------- The composer's "no usable model" notice ---------------- */

/* Sits above the composer, in its width, before anything is typed
   (ModelNotice.tsx). Amber for a chosen model that can't be used; neutral for
   first run, where nothing is wrong yet, only missing. */
.model-notice {
  --warn: #d69a3a;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 8px;
  padding: 11px 12px 11px 13px;
  border-radius: 14px;
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--border-soft);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.45;
  animation: model-notice-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.model-notice[data-tone='warn'] {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 38%, transparent);
}
.model-notice__icon {
  flex: none;
  margin-top: 2px;
  color: var(--text-3);
}
.model-notice[data-tone='warn'] .model-notice__icon {
  color: var(--warn);
}
.model-notice__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.model-notice__title {
  color: var(--text);
  font-weight: 500;
}
.model-notice__hint {
  margin-top: 4px;
  color: var(--text-2);
}
.model-notice__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  cursor: default;
}
.model-notice__link:hover {
  text-decoration: underline;
}
.model-notice__actions {
  flex: none;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.model-notice__actions--row {
  justify-content: flex-start;
  margin-top: 9px;
}
.model-notice__actions .btn svg {
  margin-right: 2px;
}
/* The event code box (components/RedeemCode.tsx), opened under the notice's buttons. */
.model-notice__code .free-code {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}
@keyframes model-notice-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .model-notice {
    animation: none;
  }
}

/* The composer's model chip, when the chosen model can't be used. */
.chip--model[data-unavailable] .chip__model {
  color: #d69a3a;
}

/* A failed reply's fix and "Copy details", at the end of its error line (ProviderErrorActions.tsx). */
.msg__error-actions {
  margin-left: auto;
  flex: none;
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: -3px;
  margin-bottom: -3px;
}
.msg__error-actions .btn {
  color: var(--text);
}

/* ---------------- ModelSelect: the model field in forms ---------------- */

.ms__trigger {
  min-width: 0;
  max-width: 100%;
}
.ms__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.ms__via {
  flex: none;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-3);
  font-size: var(--fs-xs, 11.5px);
}
.ms__warn {
  flex: none;
  color: #d69a3a;
}
.ms__trigger[data-unavailable] .ms__label {
  color: #d69a3a;
}
.menu.ms {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(420px, calc(100vh - 32px));
}
.ms__search {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-3);
}
.ms__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
}
.ms__notice {
  flex: none;
  display: flex;
  gap: 7px;
  align-items: flex-start;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-2);
  font-size: var(--fs-xs, 11.5px);
  line-height: 1.4;
}
.ms__notice svg {
  flex: none;
  margin-top: 1px;
  color: #d69a3a;
}
.ms__notice b {
  color: var(--text);
  font-weight: 500;
}
.ms__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px;
}
.ms__group {
  padding: 8px 8px 3px;
  color: var(--text-3);
  font-size: var(--fs-xs, 11.5px);
}
.ms__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  cursor: default;
}
.ms__row[data-active] {
  background: var(--hover);
}
.ms__row[data-attention] .ms__name {
  color: var(--text-2);
}
.ms__mark-gap {
  width: 13px;
  flex: none;
}
.ms__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ms__tag {
  flex: none;
  padding: 1px 5px;
  border-radius: 4.5px;
  box-shadow: 0 0 0 1px var(--border-soft);
  color: var(--text-3);
  font-size: 10.5px;
  line-height: 1.3;
}
.ms__check {
  flex: none;
  width: 14px;
  display: grid;
  place-items: center;
  color: var(--text);
}
.ms__empty {
  padding: 18px 12px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-align: center;
}
/*
 * The approval card (agent/ApprovalCard.tsx): the dialog over the app and the
 * card above a worker's composer; and the open chat's row in its transcript.
 *
 * Risk sets one colour, `--risk`, which tints the tile, the line under the
 * title and the Approve button: danger for what can't be taken back (sending,
 * money), amber for acting on the computer, the accent for editing a file.
 */

.approval {
  --risk: #e8a33d;
  --risk-ink: #1f1300;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: var(--surface-1);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
[data-theme='light'] .approval {
  --risk: #b86e00;
  --risk-ink: #ffffff;
  background: var(--bg);
}
.approval[data-risk='high'] {
  --risk: var(--danger);
  --risk-ink: #ffffff;
}
.approval[data-risk='low'] {
  --risk: var(--accent);
  --risk-ink: var(--on-accent, #ffffff);
}

/* ---- header ---- */

.approval__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.approval__tile {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--risk);
  background: color-mix(in srgb, var(--risk) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--risk) 22%, transparent);
}
/* Something that can't be undone gets one soft ring when the card arrives. */
.approval[data-risk='high'] .approval__tile::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--risk) 45%, transparent);
  animation: approval-ring 1.4s cubic-bezier(0.22, 1, 0.36, 1) 260ms 1 both;
}
.approval__titles {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.approval__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.approval__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.approval__does {
  color: color-mix(in srgb, var(--risk) 85%, var(--text));
  white-space: nowrap;
}
.approval__tool {
  min-width: 0;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--hover);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.approval__queue {
  flex: none;
  align-self: flex-start;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--hover-strong);
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* ---- why, and what exactly ---- */

.approval__lead {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-2);
}
.approval__lead .md__p {
  margin-bottom: 6px;
}

.approval__preview {
  min-width: 0;
}
.approval__cmd {
  display: flex;
  gap: 10px;
  max-height: 220px;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--sunken);
  box-shadow: inset 0 0 0 1px var(--border-soft);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
}
.approval__prompt {
  flex: none;
  color: var(--risk);
  user-select: none;
}
.approval__cmd code {
  min-width: 0;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.approval__call {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--sunken);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.approval__summary {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.approval__details-toggle {
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.approval__details-toggle:hover {
  color: var(--text);
}
.approval__json {
  margin: 8px 0 0;
  max-height: 200px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: approval-reveal 200ms ease both;
}
/* FileDiff caps its own body and scrolls it; a cap here too would nest two scroll areas. */
.approval .approval__diff {
  border-radius: 10px;
}

.approval .approval__note {
  width: 100%;
  height: 30px;
  font-size: var(--fs-sm);
}

/* ---- answers ---- */

.approval__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}
.approval__waiting {
  min-width: 0;
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A slow breath: it is paused on you, not stuck. */
.approval__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--risk);
  animation: approval-breathe 2.4s ease-in-out infinite;
}
/* Two classes: this file can load before controls.css, whose .btn would win a tie. */
.approval .approval__approve {
  background: var(--risk);
  color: var(--risk-ink);
  font-weight: 600;
}
.approval .approval__approve:hover:not(:disabled) {
  background: color-mix(in srgb, var(--risk), #000 10%);
}
.approval__approve:focus-visible,
.approval__deny:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.approval__approve:active:not(:disabled),
.approval__deny:active:not(:disabled) {
  transform: scale(0.97);
}
.approval__kbd {
  margin-left: 2px;
  padding: 0 4px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 10.5px;
  line-height: 16px;
  opacity: 0.62;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* ---- the dialog over Chat ---- */

.approval-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.42);
  animation: approval-scrim 180ms ease both;
}
.approval-layer[data-state='out'] {
  animation: approval-scrim-out 200ms ease both;
  pointer-events: none;
}
.approval-layer .approval {
  width: min(460px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  box-shadow:
    inset 0 0 0 1px var(--border-soft),
    var(--shadow-modal);
  animation: approval-in 380ms var(--spring-moderate) both;
}
.approval-layer[data-wide] .approval {
  width: min(640px, 100%);
}
/* The next one in the queue slides in where the last one was. */
.approval-layer .approval[data-swap] {
  animation: approval-next 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* It leaves the way it was answered: up and away when approved, down when denied. */
.approval-layer[data-state='out'][data-answer='approve'] .approval {
  animation: approval-out-up 200ms var(--ease-exit) both;
}
.approval-layer[data-state='out'][data-answer='deny'] .approval {
  animation: approval-out-down 200ms var(--ease-exit) both;
}

/* ---- in the open chat's transcript (agent/ApprovalRow.tsx) ----
   One row under the work so far, lined up with the work log's lines: a dot
   where their icons are, what it wants to do and who wants it, the thing
   itself as a link that opens it in full, and the two answers at the right. */

.ask-row {
  --risk: #e9b949;
  --allow: color-mix(in srgb, var(--link), #ffffff 28%);
  --allow-ink: color-mix(in srgb, var(--accent), #000000 64%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 2px;
  animation: ask-row-in 260ms var(--ease) both;
}
/* It takes focus when it arrives so ⏎ and esc answer it; it isn't ringed as if tabbed to. */
.ask-row:focus-visible {
  outline: none;
}
[data-theme='light'] .ask-row {
  --risk: #c88a00;
  --allow: var(--accent-fill);
  --allow-ink: var(--on-accent);
}
.ask-row[data-risk='low'] {
  --risk: var(--link);
}
.ask-row[data-risk='high'] {
  --risk: var(--danger);
  --allow: var(--danger);
  --allow-ink: #ffffff;
}
.ask-row__line {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
/* The work log's icon column: 20px wide, 3px into the gutter. */
.ask-row__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: calc(var(--fs-base) * 1.6);
  margin-left: -3px;
}
.ask-row__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--risk);
  animation: approval-breathe 2.4s ease-in-out infinite;
}
.ask-row__words {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ask-row__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  font-size: var(--fs-base);
  line-height: 1.6;
}
/* Short of room, the warning gives way first: at 720px both shrank alike and
   the title ("Run rm") was cut to "Ru…". It keeps at least a few words. */
.ask-row__title {
  flex: 0 1 auto;
  min-width: min(8em, 100%);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ask-row__who {
  flex: none;
  color: var(--text-3);
}
.ask-row__warn {
  flex: 0 1000 auto;
  min-width: 4em;
  color: var(--danger);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ask-row__more {
  flex: none;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--hover-strong);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ask-row__link {
  max-width: 100%;
  margin-left: -4px;
  padding: 0 4px;
  border-radius: var(--r-xs);
  color: var(--link);
  font-size: var(--fs-base);
  line-height: 1.6;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ask-row__link[data-code] {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.ask-row__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ask-row__link:focus-visible,
.ask-row__allow:focus-visible,
.ask-row__stop:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ask-row__answers {
  flex: none;
  display: flex;
  gap: 8px;
  margin-left: 12px;
}
.ask-row__allow,
.ask-row__stop {
  height: 28px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition:
    background-color var(--dur) var(--ease),
    transform 120ms var(--ease);
}
.ask-row__allow {
  background: var(--allow);
  color: var(--allow-ink);
}
.ask-row__allow:hover:not(:disabled) {
  background: color-mix(in srgb, var(--allow), #000000 10%);
}
.ask-row__stop {
  background: var(--hover-strong);
  color: var(--text);
}
.ask-row__stop:hover:not(:disabled) {
  background: color-mix(in srgb, var(--hover-strong), var(--text) 8%);
}
.ask-row__allow:active:not(:disabled),
.ask-row__stop:active:not(:disabled) {
  transform: scale(0.97);
}
.ask-row__allow:disabled,
.ask-row__stop:disabled {
  opacity: 0.6;
}
/* What it would do, under the words it opened from. */
.ask-row__preview {
  margin-left: 23px;
  min-width: 0;
  animation: approval-reveal 200ms ease both;
}
.ask-row__preview .approval__diff {
  overflow: hidden;
  border-radius: 10px;
}
@keyframes ask-row-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* ---- the card above a worker's composer ---- */

.approval[data-variant='inline'] {
  padding: 14px;
  gap: 10px;
  animation: approval-rise 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.approval[data-variant='inline'] .approval__title {
  font-size: var(--fs-md, 14px);
}

@keyframes approval-scrim {
  from {
    opacity: 0;
  }
}
@keyframes approval-scrim-out {
  to {
    opacity: 0;
  }
}
@keyframes approval-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}
@keyframes approval-next {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
}
@keyframes approval-out-up {
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
}
@keyframes approval-out-down {
  to {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}
@keyframes approval-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes approval-ring {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--risk) 45%, transparent);
  }
  100% {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--risk) 0%, transparent);
  }
}
@keyframes approval-breathe {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes approval-reveal {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}

/* ---- another chat's question, above the message box (ElsewhereAsk) ----
   The queued follow-ups' panel, with the conversation row's colours and
   buttons: one family of things waiting above the box. */

.elsewhere-ask {
  --risk: #e9b949;
  --allow: color-mix(in srgb, var(--link), #ffffff 28%);
  --allow-ink: color-mix(in srgb, var(--accent), #000000 64%);
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  animation: ask-row-in 220ms var(--ease) both;
}
[data-theme='light'] .elsewhere-ask {
  --risk: #c88a00;
  --allow: var(--accent-fill);
  --allow-ink: var(--on-accent);
}
.elsewhere-ask[data-risk='low'] {
  --risk: var(--link);
}
.elsewhere-ask[data-risk='high'] {
  --risk: var(--danger);
  --allow: var(--danger);
  --allow-ink: #ffffff;
}
.elsewhere-ask__line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.elsewhere-ask__dot {
  flex: none;
  align-self: flex-start;
  width: 7px;
  height: 7px;
  /* On the first line's centre: (line height − dot) / 2. */
  margin-top: calc((var(--fs-sm) * 1.5 - 7px) / 2);
  border-radius: 50%;
  background: var(--risk);
  animation: approval-breathe 2.4s ease-in-out infinite;
}
.elsewhere-ask__words {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.elsewhere-ask__head,
.elsewhere-ask__what {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.elsewhere-ask__chat {
  min-width: 0;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.elsewhere-ask__who {
  flex: none;
  color: var(--text-3);
}
.elsewhere-ask__more {
  flex: none;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--hover-strong);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.elsewhere-ask__title {
  flex: none;
  color: var(--text-2);
}
.elsewhere-ask__link {
  min-width: 0;
  margin-left: -4px;
  padding: 0 4px;
  border-radius: var(--r-xs);
  color: var(--link);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.elsewhere-ask__link[data-code] {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.elsewhere-ask__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.elsewhere-ask__warn {
  color: var(--danger);
  font-size: var(--fs-xs);
}
.elsewhere-ask__answers {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.elsewhere-ask__open,
.elsewhere-ask__deny,
.elsewhere-ask__allow {
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform 120ms var(--ease);
}
.elsewhere-ask__open {
  color: var(--text-2);
}
.elsewhere-ask__open:hover {
  background: var(--hover);
  color: var(--text);
}
.elsewhere-ask__deny {
  background: var(--hover-strong);
  color: var(--text);
}
.elsewhere-ask__deny:hover:not(:disabled) {
  background: color-mix(in srgb, var(--hover-strong), var(--text) 8%);
}
.elsewhere-ask__allow {
  background: var(--allow);
  color: var(--allow-ink);
}
.elsewhere-ask__allow:hover:not(:disabled) {
  background: color-mix(in srgb, var(--allow), #000000 10%);
}
.elsewhere-ask__open:active,
.elsewhere-ask__deny:active:not(:disabled),
.elsewhere-ask__allow:active:not(:disabled) {
  transform: scale(0.96);
}
.elsewhere-ask__deny:disabled,
.elsewhere-ask__allow:disabled {
  opacity: 0.6;
}
.elsewhere-ask__link:focus-visible,
.elsewhere-ask__open:focus-visible,
.elsewhere-ask__deny:focus-visible,
.elsewhere-ask__allow:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* On a page with no message box: the same strip, floating at the window's
   foot over the page, so it lifts off it with a shadow rather than a border. */
.elsewhere-float {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 60;
  width: min(680px, calc(100vw - 48px));
  transform: translateX(-50%);
}
.elsewhere-float .elsewhere-ask {
  margin: 0;
  border-color: transparent;
  background: var(--menu-bg);
  -webkit-backdrop-filter: var(--frost);
  backdrop-filter: var(--frost);
  box-shadow:
    0 0 0 1px var(--border),
    var(--shadow-menu);
}
.elsewhere-float .elsewhere-ask__preview {
  max-height: min(46vh, 420px);
  overflow: auto;
}

/* What it would do, under the words it opened from, lined up with them. */
.elsewhere-ask__preview {
  margin: 10px 0 2px 17px;
  min-width: 0;
  animation: approval-reveal 200ms ease both;
}
.elsewhere-ask__preview .approval__diff {
  overflow: hidden;
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .approval-layer,
  .approval-layer .approval,
  .ask-row,
  .ask-row__dot,
  .ask-row__preview,
  .elsewhere-ask,
  .elsewhere-ask__dot,
  .elsewhere-ask__preview,
  .approval[data-variant='inline'],
  .approval__dot,
  .approval__json,
  .approval[data-risk='high'] .approval__tile::after {
    animation: none !important;
  }
}
/* Adapted from AICSS (MIT, Copyright (c) 2026 AICSS); see components/aicss/LICENSE. */

/* Colours come from Eaon's theme tokens, so the bar sits right in every
   theme; sizes, timing and easing are AICSS's own. */
._root_12s9c_5,
._picker_12s9c_6 {
  --ma-fg: var(--text);
  --ma-muted: var(--text-3);
  --ma-hover: var(--hover);
  --ma-selected: color-mix(in srgb, var(--fg) 7%, transparent);
  --ma-pop: var(--surface-1);
  --ma-line: var(--border-strong);
  /* Hairline first so it stays an even 0.5px on every edge. */
  --ma-elevated:
    0 0 0 0.5px var(--ma-line),
    0 4px 8px rgba(0, 0, 0, 0.28),
    0 8px 12px rgba(0, 0, 0, 0.22),
    0 2px 4px rgba(0, 0, 0, 0.24),
    0 1px 2px rgba(0, 0, 0, 0.32);
  --ma-good: var(--diff-add-fg);
  --ma-bad: var(--danger);
}

[data-theme='light'] ._root_12s9c_5,
[data-theme='light'] ._picker_12s9c_6 {
  --ma-pop: var(--bg);
  --ma-elevated:
    0 0 0 0.5px var(--ma-line),
    0 4px 8px rgba(0, 0, 0, 0.02),
    0 8px 12px rgba(0, 0, 0, 0.02),
    0 2px 4px rgba(0, 0, 0, 0.02),
    0 1px 2px rgba(0, 0, 0, 0.04);
}

._root_12s9c_5 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: inherit;
}

._hit_12s9c_43 {
  display: inline-flex;
}

._tip_12s9c_47 {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--cue-w, max-content);
  overflow: hidden;
  translate: var(--cue-x, 0px) var(--cue-y, 0px);
  padding: 4px 5px;
  border-radius: 6px;
  background: rgba(29, 29, 29, 0.6);
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(1px);
  filter: blur(2px);
  transition:
    opacity 50ms ease,
    transform 50ms ease,
    filter 50ms ease,
    translate 160ms cubic-bezier(0.22, 1, 0.36, 1),
    width 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

._tip_12s9c_47[data-theme="dark"] {
  background: rgba(255, 255, 255, 0.12);
}

._tip_12s9c_47[data-up="true"] {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 150ms ease 80ms,
    transform 150ms ease 80ms,
    filter 150ms ease 80ms,
    translate 160ms cubic-bezier(0.22, 1, 0.36, 1),
    width 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

._tip_12s9c_47[data-hold="true"] {
  transition: none;
}

._tipGauge_12s9c_100 {
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

._btn_12s9c_112 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ma-muted);
  cursor: pointer;
}

._btn_12s9c_112:hover {
  background: var(--ma-hover);
  color: var(--ma-fg);
}

._btn_12s9c_112[data-on="true"] {
  background: var(--ma-selected);
  color: var(--ma-fg);
}

._btn_12s9c_112[data-on="true"]:has(._voteUp_12s9c_137) {
  color: var(--ma-good);
}

._btn_12s9c_112[data-on="true"]:has(._voteDown_12s9c_141) {
  color: var(--ma-bad);
}

._icon_12s9c_145,
._icon_12s9c_145 :is(path, circle, line, rect, polyline, polygon) {
  vector-effect: non-scaling-stroke;
}

._glyph_12s9c_150 {
  display: block;
  width: 12px;
  height: 12px;
  transform-origin: 50% 82%;
}

._reaction_12s9c_157 {
  font-size: 12px;
  line-height: 1;
  transform-origin: center;
  animation: _reactionIn_12s9c_1 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes _reactionIn_12s9c_1 {
  from {
    opacity: 0;
    scale: 1.2;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

._mark_12s9c_175 {
  display: block;
  line-height: 1;
  translate: 0 0.08em;
}

._ago_12s9c_181 {
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin-left: 4px;
  font-size: 12px;
  line-height: 1;
  font-weight: 400;
  color: var(--ma-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  cursor: default;
  opacity: 0;
  transition: opacity 200ms ease;
}

._root_12s9c_5:hover ._ago_12s9c_181,
._root_12s9c_5:focus-within ._ago_12s9c_181 {
  opacity: 1;
}

._minRolls_12s9c_202 {
  display: inline-flex;
}

._minStatic_12s9c_206 {
  display: inline;
}

._minRoll_12s9c_202 {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1em;
  line-height: 1em;
  vertical-align: -0.05em;
}

._minRollInner_12s9c_219 {
  display: flex;
  flex-direction: column;
  transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

._minRollInner_12s9c_219[data-dir="down"] {
  transform: translateY(-1em);
}

._minRollInner_12s9c_219[data-dir="up"][data-shifted="true"] {
  transform: translateY(-1em);
}

._minRollInner_12s9c_219[data-dir="down"][data-shifted="true"] {
  transform: translateY(0);
}

._minRollInner_12s9c_219 span {
  height: 1em;
  line-height: 1em;
}

._glyphDown_12s9c_242 {
  transform-origin: 50% 18%;
}

._smile_12s9c_246 {
  transform-origin: 50% 60%;
}

._replyShaft_12s9c_250 {
  transform-box: view-box;
  transform-origin: 66.667% 50%;
}

._replyHead_12s9c_255 {
  transform-box: view-box;
}

._replyPlay_12s9c_259 ._replyShaft_12s9c_250 {
  animation: _replyGrow_12s9c_1 520ms cubic-bezier(0.22, 1.15, 0.36, 1);
}

._replyPlay_12s9c_259 ._replyHead_12s9c_255 {
  animation: _replyHead_12s9c_255 520ms cubic-bezier(0.22, 1.15, 0.36, 1);
}

._slot_12s9c_267 {
  position: relative;
  display: inline-flex;
}

._bumpUp_12s9c_272 {
  animation: _thumbUp_12s9c_1 520ms cubic-bezier(0.22, 1.15, 0.36, 1);
}

._bumpDown_12s9c_276 {
  animation: _thumbDown_12s9c_1 520ms cubic-bezier(0.22, 1.15, 0.36, 1);
}

._smilePlay_12s9c_280 {
  animation: _smileHop_12s9c_1 560ms cubic-bezier(0.22, 1.2, 0.36, 1);
}

._smilePlay_12s9c_280 ._mouthRest_12s9c_284 {
  opacity: 0;
}

._smilePlay_12s9c_280 ._mouthHappy_12s9c_288 {
  opacity: 1;
}

._mouthHappy_12s9c_288 {
  opacity: 0;
}

._copySwap_12s9c_296 {
  display: grid;
}

._copySwap_12s9c_296 ._glyph_12s9c_150 {
  grid-area: 1 / 1;
}

._copyMark_12s9c_304 {
  opacity: 1;
  transition: opacity 220ms ease;
}

._copySwap_12s9c_296[data-on="true"] ._copyMark_12s9c_304 {
  opacity: 0;
  transition: none;
}

._check_12s9c_314 {
  color: var(--ma-good);
  opacity: 0;
  transition: opacity 220ms ease;
}

._copySwap_12s9c_296[data-on="true"] ._check_12s9c_314 {
  opacity: 1;
  transition: none;
}

._check_12s9c_314 path {
  stroke-dasharray: 28;
  stroke-dashoffset: 0;
}

._copySwap_12s9c_296[data-on="true"] ._check_12s9c_314 path {
  animation: _drawCheck_12s9c_1 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

._pop_12s9c_334 {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  border-radius: 12px;
  background: var(--ma-pop);
  box-shadow: var(--ma-elevated);
  transform-origin: 16px 100%;
  animation: _popIn_12s9c_1 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

._emoji_12s9c_350 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

._emoji_12s9c_350:hover,
._emoji_12s9c_350[data-on="true"] {
  background: var(--ma-hover);
}

._pop_12s9c_334 ._mark_12s9c_175 {
  translate: none;
}

._emojiOut_12s9c_374 {
  overflow: hidden;
  pointer-events: none;
  animation: _emojiOut_12s9c_374 220ms ease forwards;
}

@keyframes _emojiOut_12s9c_374 {
  to {
    width: 0;
    opacity: 0;
    transform: scale(0.9);
  }
}

._moreEmoji_12s9c_388 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ma-muted);
  cursor: pointer;
}

._moreEmoji_12s9c_388:hover {
  background: var(--ma-hover);
  color: var(--ma-fg);
}

._picker_12s9c_6 {
  position: fixed;
  z-index: 30;
  width: 286px;
  border-radius: 16px;
  background: var(--ma-pop);
  color: var(--ma-fg);
  box-shadow: var(--ma-elevated);
  overflow: hidden;
  animation: _popIn_12s9c_1 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

._search_12s9c_418 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 10px;
  border-bottom: 0.5px solid var(--ma-line);
  color: var(--ma-muted);
}

._search_12s9c_418 input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ma-fg);
  font: inherit;
  font-size: 14px;
}

._search_12s9c_418 input::placeholder {
  color: var(--ma-muted);
}

._pickerScroll_12s9c_442 {
  max-height: 248px;
  padding: 0 4px 10px 8px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ma-hover) transparent;
}

._pickerScroll_12s9c_442::-webkit-scrollbar {
  width: 4px;
  height: 0;
}

._pickerScroll_12s9c_442::-webkit-scrollbar:horizontal {
  display: none;
}

._pickerScroll_12s9c_442::-webkit-scrollbar-track,
._pickerScroll_12s9c_442::-webkit-scrollbar-corner {
  background: transparent;
}

._pickerScroll_12s9c_442::-webkit-scrollbar-thumb {
  background: var(--ma-hover);
  border-radius: 999px;
}

._groupLabel_12s9c_470 {
  margin: 10px 4px 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ma-muted);
}

._grid_12s9c_477 {
  display: grid;
  grid-template-columns: repeat(8, 32px);
  gap: 2px;
}

._cell_12s9c_483 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

._cell_12s9c_483:hover,
._cell_12s9c_483[data-on="true"] {
  background: var(--ma-hover);
}

._empty_12s9c_503 {
  margin: 16px 8px;
  font-size: 13px;
  color: var(--ma-muted);
}

._menu_12s9c_509 {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 120px;
  padding: 2px 0;
  border-radius: 10px;
  background: var(--ma-pop);
  box-shadow: var(--ma-elevated);
  transform-origin: 100% 100%;
  animation: _popIn_12s9c_1 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

._item_12s9c_525 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  margin: 0 2px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ma-fg);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

._item_12s9c_525 svg {
  flex: none;
  color: var(--ma-muted);
}

._item_12s9c_525:hover {
  background: var(--ma-hover);
}

._rule_12s9c_553 {
  height: 0.5px;
  margin: 2px 0;
  background: var(--ma-line);
}

._danger_12s9c_559,
._danger_12s9c_559 svg {
  color: var(--ma-bad);
}

._eyeWink_12s9c_564 {
  opacity: 0;
}

._smilePlay_12s9c_280 ._eyeShut_12s9c_568 {
  animation: _winkShut_12s9c_1 560ms cubic-bezier(0.22, 1.2, 0.36, 1);
}

._smilePlay_12s9c_280 ._eyeWink_12s9c_564 {
  animation: _winkLine_12s9c_1 560ms cubic-bezier(0.22, 1.2, 0.36, 1);
}

@keyframes _thumbUp_12s9c_1 {
  0% { transform: none; }
  46% { transform: translateY(-1.5px) rotate(-6deg); }
  100% { transform: none; }
}

@keyframes _thumbDown_12s9c_1 {
  0% { transform: none; }
  46% { transform: translateY(1.5px) rotate(-6deg); }
  100% { transform: none; }
}

@keyframes _drawCheck_12s9c_1 {
  from { stroke-dashoffset: 28; }
  to { stroke-dashoffset: 0; }
}

@keyframes _smileHop_12s9c_1 {
  0% { transform: none; }
  45% { transform: translate(0.4px, -1px) rotate(-3deg); }
  100% { transform: none; }
}

@keyframes _winkShut_12s9c_1 {
  0%, 6% { opacity: 1; }
  16%, 32% { opacity: 0; }
  42%, 100% { opacity: 1; }
}

@keyframes _winkLine_12s9c_1 {
  0%, 6% { opacity: 0; }
  16%, 32% { opacity: 1; }
  42%, 100% { opacity: 0; }
}

@keyframes _replyGrow_12s9c_1 {
  0%, 100% { transform: none; }
  46% { transform: scaleX(1.25); }
}

@keyframes _replyHead_12s9c_255 {
  0%, 100% { transform: none; }
  46% { transform: translateX(-12.5%); }
}

@keyframes _popIn_12s9c_1 {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  ._bumpUp_12s9c_272,
  ._bumpDown_12s9c_276,
  ._smilePlay_12s9c_280,
  ._smilePlay_12s9c_280 ._eyeShut_12s9c_568,
  ._smilePlay_12s9c_280 ._eyeWink_12s9c_564,
  ._replyPlay_12s9c_259 ._replyShaft_12s9c_250,
  ._replyPlay_12s9c_259 ._replyHead_12s9c_255,
  ._check_12s9c_314 path,
  ._pop_12s9c_334,
  ._picker_12s9c_6,
  ._menu_12s9c_509,
  ._emojiOut_12s9c_374,
  ._reaction_12s9c_157 {
    animation: none;
  }
  ._minRollInner_12s9c_219,
  ._ago_12s9c_181 {
    transition: none;
  }
  ._copyMark_12s9c_304,
  ._check_12s9c_314,
  ._tip_12s9c_47 {
    transition: none;
  }
  ._check_12s9c_314 path {
    stroke-dashoffset: 0;
  }
}
/* ==================================================================
   Model Providers additions: search, category groups, the provider
   heading with its description, sign-in panels and URL fields.
   Imported by Providers.tsx so this page does not edit the shared
   settings.css. Selectors are scoped under .providers-shell so they
   win over settings.css regardless of which sheet loads first.
   ================================================================== */

/* The shell is a flex item of .settings__full; without this it sized to its
   content, so the detail pane grew and shrank with each provider's text. */
.providers-shell {
  flex: 1;
  min-width: 0;
}

/* Title and search stay put and only the list under them scrolls. A sticky
   header would need a background, and none matches: the window body already
   paints --canvas (at 82% over vibrancy when translucent), so a second canvas
   layer on top reads as a near-black band. */
.providers-shell .providers-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}
.providers-shell .providers-list__top {
  flex: none;
  padding-bottom: 10px;
  /* The list below gives 10px to its scrollbar; line the search up with the rows. */
  padding-right: 10px;
}
.providers-shell .providers-list__top .providers-list__header {
  position: static;
  background: none;
  padding-bottom: 12px;
  gap: 2px;
}
/* Title first, then Link accounts and Add side by side at the end. */
.providers-shell .providers-list__title {
  flex: 1;
}
.providers-shell .providers-list__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -10px;
  padding: 0 10px 24px;
}

.providers-shell .providers-list__group {
  margin: 18px 0 4px;
}
.providers-shell .providers-list__scroll > div:first-child .providers-list__group {
  margin-top: 6px;
}

.providers-shell .providers-list__empty {
  padding: 18px 8px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.providers-shell .provider-row {
  height: 38px;
}
.providers-shell .provider-row__badge[data-state='pending'] {
  background: var(--text-3);
}

/* Heading: logo, name, one-line description, enable switch. */
.providers-shell .provider-detail__header {
  align-items: center;
  gap: 14px;
}
.providers-shell .provider-detail__heading {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.providers-shell .provider-detail__heading .provider-detail__name {
  flex: none;
  line-height: 1.15;
}
.providers-shell .provider-detail__tagline {
  font-size: var(--fs-sm);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.providers-shell .provider-detail__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 8px;
}
.providers-shell .provider-detail__title-row .provider-detail__section-title {
  margin-bottom: 0;
}

.provider-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--link);
  white-space: nowrap;
}
.provider-link:hover {
  text-decoration: underline;
}

.provider-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.provider-status {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-2);
}
.provider-status[data-tone='error'] {
  color: var(--danger);
}
.provider-status svg {
  flex: none;
  margin-top: 2px;
}

/* ---- Signed-in account ---- */

.provider-account {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
}
.provider-account__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: #34d399;
}
.provider-account__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.provider-account__label {
  font-size: var(--fs-base);
  color: var(--text);
}
.provider-account__sub {
  font-size: var(--fs-sm);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Sign-in in progress ---- */

.provider-signin {
  margin-top: 4px;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--sunken);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.provider-signin__waiting {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.provider-signin__code {
  display: flex;
  align-items: center;
  gap: 10px;
}
.provider-signin__code-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text);
  user-select: all;
}
.provider-signin__manual {
  display: flex;
  gap: 8px;
}
.provider-signin__manual .input {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.provider-signin__toggle {
  align-self: flex-start;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.provider-signin__toggle:hover {
  color: var(--text-2);
}

/* ---- Templated base URL fields (Cloudflare ids, Bedrock region) ---- */

.provider-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.provider-fields .input {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.provider-fields .input::placeholder,
.provider-signin__manual .input::placeholder {
  font-family: var(--font-ui);
}
.provider-url-preview {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
  word-break: break-all;
}

/* ---- Model rows: context size ---- */

.providers-shell .model-row__meta {
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.providers-shell .model-row__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Registering an OAuth app for a provider that only signs in registered apps. */
.provider-client-setup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.provider-client-setup__steps {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.5;
}
.provider-client-setup__steps code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 1px 5px;
  margin: 0 2px;
  border-radius: var(--r-xs);
  background: var(--sunken);
  color: var(--text);
}
.provider-client-setup__steps .provider-link {
  display: inline-flex;
}
.provider-client-setup--inline {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.provider-client-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
}
.provider-no-signin {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin: -4px 0 12px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-3);
}
.provider-no-signin svg {
  flex: none;
  margin-top: 2px;
}
.provider-no-signin__action {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
}

/* ---- Models: filter for long lists, removed models ---- */

.provider-models__search {
  margin-bottom: 4px;
}
.provider-models__hidden {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.provider-models__restore-all {
  margin-top: 8px;
}

/* ---- Needs attention: stored credentials that a check found broken ---- */

.providers-shell .provider-row__badge[data-state='attention'] {
  background: #d69a3a;
}
.provider-row__sub {
  margin-left: 6px;
  color: var(--text-3);
  font-size: var(--fs-xs, 11.5px);
}
.provider-account__dot[data-state='attention'],
.provider-account__dot[data-state='setup'] {
  background: #d69a3a;
}
.provider-account__dot[data-state='unavailable'] {
  background: var(--text-3);
}
.provider-attention {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 22px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  box-shadow: 0 0 0 1px color-mix(in srgb, #d69a3a 40%, transparent);
  background: color-mix(in srgb, #d69a3a 7%, transparent);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-2);
}
.provider-attention > svg {
  flex: none;
  margin-top: 2px;
  color: #d69a3a;
}
.provider-attention__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.provider-attention__title {
  color: var(--text);
  font-weight: 600;
}
.provider-attention .btn {
  flex: none;
  align-self: center;
}
/* Where the model list came from and how old it is, under the Models title. */
.provider-models__freshness {
  margin: -4px 0 8px;
  color: var(--text-3);
  font-size: var(--fs-xs, 11.5px);
}
.model-editor__unknown {
  color: var(--text-3);
  font-style: normal;
}

/* A plan's own API allowance, and how to reach it with a key (Anthropic's monthly API credits). */
.provider-credits {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--border-soft);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-2);
}
.provider-credits__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.provider-credits__detail {
  margin: 4px 0 8px;
}
.provider-credits__steps {
  margin: 0 0 8px;
  padding-left: 18px;
}
.provider-credits__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

/* Eaon Event: today's allowance from the code (Providers.tsx). */
.free-usage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.free-usage__row {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-sm);
}
.free-usage__label {
  color: var(--text-2);
}
.free-usage__bar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.free-usage__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}
.free-usage__fill[data-full] {
  background: var(--danger, #d64545);
}
.free-usage__count {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.free-usage__note {
  font-size: var(--fs-sm);
  color: var(--text-3);
}

/* An event code's box (RedeemCode): set apart where it follows something else, plain where it is the point. */
.free-code {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.provider-detail__section-desc + .free-code[data-compact] {
  margin-top: 0;
  border-top: 0;
  padding-top: 4px;
}
.free-code__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.free-code__desc {
  margin: 4px 0 8px;
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.free-code .input {
  font-family: var(--font-mono, ui-monospace, monospace);
  text-transform: uppercase;
}
.free-code .input::placeholder {
  text-transform: none;
}

/* Speech to text: a row of its own above the providers, marked with a mic. */
.speech-mark {
  flex: none;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text);
}

/* The local Whisper models: a row each, picked like a radio, with its download. */
.local-speech {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.local-speech__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 12px 0 4px;
  transition: background var(--dur) var(--ease);
}
.local-speech__row + .local-speech__row {
  border-top: 1px solid var(--border-soft);
}
.local-speech__row[data-active] {
  background: var(--hover);
}
.local-speech__pick {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  text-align: left;
}
.local-speech__pick:disabled {
  cursor: default;
}
.local-speech__dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
  color: var(--on-accent, #fff);
}
.local-speech__row[data-active] .local-speech__dot {
  background: var(--accent);
  box-shadow: none;
}
.local-speech__pick:disabled .local-speech__dot {
  opacity: 0.4;
}
.local-speech__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.local-speech__name {
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 500;
}
.local-speech__blurb {
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.local-speech__row .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.local-speech__progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.local-speech__bar {
  width: 96px;
  height: 5px;
  border-radius: 999px;
  background: var(--hover-strong);
  overflow: hidden;
}
.local-speech__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 240ms var(--ease);
}
.local-speech__pct {
  min-width: 34px;
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.speech-model-input {
  max-width: 320px;
  margin-top: 8px;
}
.speech-status {
  padding: 0 4px;
}
.speech-status:empty {
  display: none;
}
.speech-status .provider-status {
  margin: 0 0 10px;
}
.provider-status[data-tone='ok'] svg {
  color: #30a46c;
}
/* "In use", beside the local model dictation runs on. */
.local-speech__tag {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text);
  font-size: 11px;
  font-weight: 500;
  vertical-align: 1px;
}
.local-speech__row[data-busy] .local-speech__blurb {
  font-variant-numeric: tabular-nums;
}
/* A downloaded model's delete stays quiet until its row is pointed at. */
.local-speech__delete {
  opacity: 0.55;
  transition: opacity var(--dur) var(--ease);
}
.local-speech__row:hover .local-speech__delete,
.local-speech__delete:focus-visible {
  opacity: 1;
}
/* Online, while dictation runs on this computer: what would change it back. */
.speech-online-off {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  background: var(--hover);
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.speech-online-model {
  margin-top: 8px;
}
/* Settings → General → Speech to text → Model: its download, or what to press. */
.speech-row-progress,
.speech-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.speech-row-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ---- Logo (Settings → a provider): where it comes from, and changing it ---- */

.provider-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}
.provider-logo__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.provider-logo__source {
  font-size: var(--fs-base);
  color: var(--text);
}
.provider-logo__detail {
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.provider-logo__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.provider-logo__actions .btn {
  gap: 6px;
}
.provider-logo__hint {
  margin: 12px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.provider-logo__steps {
  margin-top: 12px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.provider-logo__steps summary {
  cursor: pointer;
  width: fit-content;
  color: var(--text-2);
}
.provider-logo__steps summary:hover {
  color: var(--text);
}
.provider-logo__steps ol {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0 0 0 18px;
}
.provider-logo__steps li {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.provider-logo__url {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-xs);
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.provider-logo__result {
  color: var(--text-3);
}
.provider-logo__steps li[data-found] .provider-logo__result {
  color: var(--diff-add-fg);
}
.provider-logo + .provider-status {
  margin-top: 10px;
}
.provider-logo__steps + .provider-link,
.provider-logo__hint + .provider-link {
  margin-top: 12px;
}

/* Speech to text → On this computer → Find more on Hugging Face (SpeechHub.tsx). */
.speech-hub__open {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  width: 100%;
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: left;
  transition: background-color var(--dur) var(--ease);
}
.speech-hub__open:hover {
  background: var(--hover);
}
.speech-hub__open svg {
  color: var(--text-2);
}
.speech-hub__open-hint {
  margin-left: auto;
  color: var(--text-3);
  font-weight: 400;
}
.speech-hub {
  margin-top: 10px;
  padding: 12px;
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--border);
}
.speech-hub__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.speech-hub__title {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.speech-hub__note {
  margin: 8px 2px 4px;
  color: var(--text-3);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.speech-hub__empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 4px 8px;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.speech-hub__results {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 460px;
  margin-top: 10px;
  overflow-y: auto;
  transition: opacity var(--dur) var(--ease);
}
.speech-hub__results[data-busy] {
  opacity: 0.55;
}
.speech-hub__repo-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 0 2px 6px;
}
.speech-hub__repo-name {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.speech-hub__repo-name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.speech-hub__tag {
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text);
  font-size: 11px;
  font-weight: 500;
}
.speech-hub__repo-meta {
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.speech-hub__files {
  border-radius: var(--r-md);
  background: var(--hover);
  overflow: hidden;
}
.speech-hub__file {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 7px 10px 7px 12px;
}
.speech-hub__file + .speech-hub__file {
  border-top: 1px solid var(--border-soft);
}
.speech-hub__file-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.speech-hub__file-name {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.speech-hub__file-meta {
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.speech-hub__file-meta[data-tone='error'] {
  color: var(--danger);
  white-space: normal;
}
.speech-hub__file .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.speech-hub__in-use {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 0 4px;
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.speech-hub__in-use svg {
  color: #30a46c;
}
.speech-hub__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 6px 2px 0;
  color: var(--link);
  font-size: var(--fs-xs);
}
/* Online: a provider that hasn't listed its models yet, and the way to ask it. */
.speech-online-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  background: var(--hover);
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.speech-online-empty .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.speech-hub__repo-note {
  margin: -2px 2px 8px;
  color: var(--text-2);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
/* See-through windows (components/SeeThrough.tsx).
   The desktop's picture sits behind the whole page, under a wash of the
   theme's own colour (--see-tint, from the tint setting). The page stops
   painting its own background, and its panels turn to frosted glass: they
   blur and soften the picture under them, so text on them stays easy to
   read. Off, none of this applies and nothing here costs anything. */

.see-through {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms var(--ease);
}
.see-through[data-ready] {
  opacity: 1;
}
/* The picture at the display's size, slid so its corner sits on the
   display's: moving the window is one transform, done on the compositor. */
.see-through__layer {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}
.see-through__picture {
  display: block;
  width: 100%;
  height: 100%;
}
/* A video wallpaper shown as it is: filling the display, cropped like a cover. */
.see-through__video {
  object-fit: cover;
}
.see-through__tint {
  position: absolute;
  inset: 0;
  background: var(--canvas);
  opacity: var(--see-tint, 0.55);
  transition: opacity 240ms var(--ease);
}

/* macOS: the title bars drag through the app while see-through is on, so the
   picture can keep up with the window (SeeThrough.tsx). The system's own
   drag would swallow the press before the page saw it. */
body[data-see-through='on'][data-platform='darwin']
  :is(.chat-header, .titlebar, .drag, .dock__bar, .page__bar, .settings__titlebar, .settings__nav-top, .browser__tabs, .crash-screen__drag) {
  -webkit-app-region: no-drag;
}

/* ---- the page over it ---- */

body[data-see-through='on'],
body[data-see-through='on'][data-platform='darwin'][data-translucent='on'] {
  /* Read from the theme's own surfaces before they turn translucent below.
     How much of the picture each lets through, and how soft, follows
     Appearance → Glass (--glass-clear-k and --glass-blur-k, tokens.css). */
  --glass: color-mix(in srgb, var(--canvas) clamp(0%, 100% - 48% * var(--glass-clear-k), 100%), transparent);
  --glass-strong: color-mix(in srgb, var(--canvas) clamp(0%, 100% - 38% * var(--glass-clear-k), 100%), transparent);
  /* What floats over everything — dialogs, menus, cards, toasts — stays
     near opaque: it is read, not looked through. */
  --glass-float: color-mix(in srgb, var(--canvas) clamp(0%, 100% - 16% * var(--glass-clear-k), 100%), transparent);
  /* Lists and cards on a page, fields, and the boxes code sits in. */
  --glass-card: color-mix(in srgb, var(--canvas) clamp(0%, 100% - 42% * var(--glass-clear-k), 100%), transparent);
  --glass-field: color-mix(in srgb, var(--canvas) clamp(0%, 100% - 50% * var(--glass-clear-k), 100%), transparent);
  --glass-code: color-mix(in srgb, var(--canvas) clamp(0%, 100% - 45% * var(--glass-clear-k), 100%), transparent);
  --glass-blur: blur(calc(26px * var(--glass-blur-k))) saturate(150%);
  --glass-blur-float: blur(calc(30px * var(--glass-blur-k))) saturate(160%);
  background: transparent;

  /* The app's solid surfaces become tints of the text colour, so a selected
     row, a segmented switch, a chip or a hovered button reads as a step of
     glass over whatever is behind it rather than a dark slab cut into it. */
  --surface-1: color-mix(in srgb, var(--fg) 5%, transparent);
  --surface-2: color-mix(in srgb, var(--fg) 8%, transparent);
  --surface-3: color-mix(in srgb, var(--fg) 11%, transparent);
  --surface-4: color-mix(in srgb, var(--fg) 15%, transparent);
  --sunken: color-mix(in srgb, #000 24%, transparent);
  --active: color-mix(in srgb, var(--fg) 12%, transparent);

  /* Quiet text is quiet against a flat colour; over a picture the same grey
     can vanish. Each step keeps more of the text colour here. */
  --text-2: color-mix(in srgb, var(--fg), var(--bg) 24%);
  --text-3: color-mix(in srgb, var(--fg), var(--bg) 38%);
  --text-4: color-mix(in srgb, var(--fg), var(--bg) 50%);

  /* An edge is what tells a card, a field or a switch from a busy picture:
     the faint outlines a flat page gets away with vanish over one. */
  --hover: color-mix(in srgb, var(--fg) 8%, transparent);
  --hover-strong: color-mix(in srgb, var(--fg) 12%, transparent);
  --border: color-mix(in srgb, var(--fg) 13%, transparent);
  --border-soft: color-mix(in srgb, var(--fg) 10%, transparent);
  --border-strong: color-mix(in srgb, var(--fg) 20%, transparent);
  --toggle-off: color-mix(in srgb, var(--fg) 28%, transparent);

  /* Every piece of text carries a faint halo on the far side of the theme
     from its own colour: the theme's text gets one the shade of the page,
     and the inverse text of a filled button one the shade of the button.
     Over a panel it vanishes into the panel; over a bright or busy patch of
     picture it is what keeps the letters apart from it. Text lighter than
     --halo-split counts as light: grey text is the theme's text, so the
     split sits below the dark theme's greys and above the light theme's. */
  --halo-split: 0.42;
  --halo: oklch(from currentColor calc(0.97 - 0.82 * clamp(0, (l - var(--halo-split)) * 1000, 1)) 0 0);
  text-shadow:
    0 0 1px color-mix(in oklch, var(--halo) 35%, transparent),
    0 1px 10px color-mix(in oklch, var(--halo) 60%, transparent);
}
/* Controls opt out of inherited text shadows by default; here they take the halo too. */
body[data-see-through='on'] :is(button, input, textarea, select) {
  text-shadow: inherit;
}
/* Code and terminals stay crisp, and long ones stay cheap to paint. */
body[data-see-through='on'] :is(pre, code, kbd, .xterm, .cm-editor, .monaco-editor) {
  text-shadow: none;
}
/* As specific as the block above, or its translucent-window form would win. */
[data-theme='light'] body[data-see-through='on'],
[data-theme='light'] body[data-see-through='on'][data-platform='darwin'][data-translucent='on'] {
  --sunken: color-mix(in srgb, #fff 40%, transparent);
  --halo-split: 0.9;
}

/* Text that sits straight on the picture — page titles, section labels,
   intros and small print — keeps its weight with a soft shadow under it,
   so a bright patch of wallpaper never washes it out. */
body[data-see-through='on']
  :is(.settings__h1, .settings__lede, .settings__section-label, .credits-label, .accounts__fine, .meter-choice__head, .page__title, .page__subtitle, .section-head__title, .library__group, .pr-list__group, .home__title) {
  color: var(--text);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--canvas) 70%, transparent), 0 0 12px color-mix(in srgb, var(--canvas) 55%, transparent);
}
body[data-see-through='on'] :is(.settings__lede, .settings__section-label, .credits-label, .accounts__fine, .meter-choice__hint, .page__subtitle, .section-head__title, .library__group, .pr-list__group) {
  color: var(--text-2);
}

/* Controls that sit straight on the picture, with no panel behind them:
   frosted, so the picture goes soft under them. */
body[data-see-through='on'] :is(.mode-switch, .thread-jump, .review__summary, .review__tools, .usage-pill) {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
/* A plain button is a light tint of the text colour, which reads on a panel
   but leaves it nearly clear on the picture: a frosted pill instead, lifted
   a step off the theme's colour so it still reads as a button on a panel.
   Buttons with a fill and ink of their own (a provider's accent, whose ink
   turns dark on a light accent) keep both: the pill under their ink was
   dark text on dark glass. */
body[data-see-through='on'] .btn:not(.btn--primary, .btn--accent, .btn--ghost, .btn--danger, .btn--provider, .btn--provider-ghost) {
  background: color-mix(in srgb, color-mix(in srgb, var(--canvas), var(--fg) 14%) 62%, transparent);
  box-shadow: inset 0 0 0 0.5px var(--border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
body[data-see-through='on'] .btn:not(.btn--primary, .btn--accent, .btn--ghost, .btn--danger, .btn--provider, .btn--provider-ghost):hover:not(:disabled) {
  background: color-mix(in srgb, color-mix(in srgb, var(--canvas), var(--fg) 22%) 70%, transparent);
}
body[data-see-through='on'] .switch:not([data-on='true']) {
  box-shadow: inset 0 0 0 0.5px var(--border);
}
body[data-see-through='on'] .mode-switch__option[data-active] {
  background: color-mix(in srgb, var(--fg) 14%, transparent);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--fg) 14%, transparent);
}

/* The sidebars' graded edge blur (app.css .edge-veil) sits inside the
   frosted sidebar, and a blur inside frosted glass sees only the glass's own
   tint, not the wallpaper under it: over a bright picture it showed as a dark
   band at both ends of the list. Here the list's own fade is the whole effect. */
body[data-see-through='on'] .edge-veil {
  display: none;
}

/* What floats over everything is read, not looked through: near opaque. */
body[data-see-through='on'] :is(.modal, .approval, .usage-card, .update-toast, .peek, .menu, .star-card) {
  background: var(--glass-float);
  -webkit-backdrop-filter: var(--glass-blur-float);
  backdrop-filter: var(--glass-blur-float);
}
body[data-see-through='on'] .menu.usage-card {
  background: var(--glass-float);
}
/* Another chat's question floating over a page (agent/ElsewhereAsk.tsx). */
body[data-see-through='on'] .elsewhere-float .elsewhere-ask {
  background: var(--glass-float);
  -webkit-backdrop-filter: var(--glass-blur-float);
  backdrop-filter: var(--glass-blur-float);
}

/* Lists, cards and tiles on every page: frosted glass like the sidebar's,
   so what is written on them reads over any part of the picture. (The app's
   surface colours are light tints here, which suits a button or a chip, but
   left these containers nearly clear.) */
body[data-see-through='on']
  :is(
    .plugin-list, .skills__list, .card, .worker-card, .worker-memory, .worker-trading, .worker-fact,
    .tasks, .tr-panel, .tr-strip, .ca-feature, .ca-app, .plan-card, .code-stats, .code-queue, .code-checks,
    .code-failure, .code-dialog__option, .mlib-card, .mlib-banner, .model-card, .provider-detail__section,
    .provider-signin, .usage-hero, .usage-tile, .usage-chart, .usage-heat, .usage-table, .la-row, .la__note,
    .template-card, .suggestion-card, .term-agent-card, .imggen__tile, .ch-app, .purchase__receipt,
    .browser__banner, .team-hint, .bx-status, .credits-hero, .credits-project, .model-notice
  ) {
  background: var(--glass-card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
/* Fields sit on the picture too: a frosted well, so typed text and placeholders read. */
body[data-see-through='on'] :is(.input, .select, .search-field input, .key-field input, .stepper input) {
  background: var(--glass-field);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* A field's own icon (search) sits over the frosted well, not under it. */
body[data-see-through='on'] .search-field__icon {
  z-index: 1;
}

/* Panels that float: frosted, so the picture reads through them softly. */
body[data-see-through='on'] .sidebar__panel,
body[data-see-through='on'] .settings__nav-panel,
body[data-see-through='on'] .dock,
body[data-see-through='on'] .theme-card__preview {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
/* A message bubble scrolls inside the thread, whose fade-out mask keeps a
   blur from reaching past it: a frosted bubble showed as a hard dark box
   under the top bar. It is a tint of glass instead, with no blur of its own. */
body[data-see-through='on'] .msg--user {
  background: color-mix(in srgb, var(--fg) 12%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body[data-see-through='on'] .composer,
body[data-see-through='on'] .queued,
body[data-see-through='on'] .elsewhere-ask,
body[data-see-through='on'] .approval[data-variant='dock'],
body[data-see-through='on'] .composer__above .composer-pill,
body[data-see-through='on'] .suggestion-chip {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* Inside the code panel and the transcript, boxes stay a touch darker than
   the glass around them, so code keeps its contrast. */
body[data-see-through='on'] .ide {
  /* Mostly opaque: it is also what sticky headers hide scrolled code under. */
  --ide-bg: color-mix(in srgb, var(--canvas) 88%, transparent);
  --ide-editor-bg: color-mix(in srgb, var(--canvas) 45%, transparent);
}
body[data-see-through='on'] .code-block,
body[data-see-through='on'] .step-card__box,
body[data-see-through='on'] .cfiles,
body[data-see-through='on'] .tool__panel > div {
  background: var(--glass-code);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* The home screen's character field would fight the picture: the picture is
   the backdrop now. */
body[data-see-through='on'] .home__field {
  display: none;
}

@media (prefers-reduced-transparency: reduce) {
  body[data-see-through='on'] {
    --glass: var(--surface-1);
    --glass-strong: var(--surface-2);
  }
}

/* Settings → Appearance: the chosen wallpaper's thumbnail beside its button. */
.wallpaper-pick {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wallpaper-pick__thumb {
  width: 88px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 1px var(--border-soft);
  animation: chip-in 220ms var(--ease) both;
}

/* Settings → Appearance → Style: each style as a preview of the wallpaper itself. */
.wallpaper-styles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 14px 10px;
  padding: 2px 16px 16px;
}
.wallpaper-styles__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  text-align: left;
  cursor: pointer;
}
.wallpaper-styles__frame {
  position: relative;
  display: block;
  aspect-ratio: 232 / 145;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px oklch(1 0 0 / 0.1);
  transition:
    box-shadow var(--dur) var(--ease),
    transform 120ms var(--ease);
}
[data-theme='light'] .wallpaper-styles__frame {
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.1);
}
.wallpaper-styles__item:hover .wallpaper-styles__frame {
  box-shadow: 0 0 0 1px var(--border-strong, var(--text-4));
}
.wallpaper-styles__item[aria-checked='true'] .wallpaper-styles__frame {
  box-shadow:
    0 0 0 2px var(--surface-1),
    0 0 0 4px var(--accent);
}
.wallpaper-styles__item:active .wallpaper-styles__frame {
  transform: scale(0.96);
}
.wallpaper-styles__item:focus-visible {
  outline: none;
}
.wallpaper-styles__item:focus-visible .wallpaper-styles__frame {
  box-shadow:
    0 0 0 2px var(--surface-1),
    0 0 0 4px var(--focus-ring);
}
.wallpaper-styles__canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* Waiting on the picture: the frame's own colour, not a black box. */
.wallpaper-styles__canvas[data-empty] {
  visibility: hidden;
}
.wallpaper-styles__tint {
  position: absolute;
  inset: 0;
  background: var(--canvas);
  pointer-events: none;
}
.wallpaper-styles__label {
  padding-left: 2px;
  font-size: var(--fs-xs);
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wallpaper-styles__item[aria-checked='true'] .wallpaper-styles__label {
  color: var(--text);
  font-weight: 500;
}

/* A question or approval card sits in the thread, whose fade-out mask keeps
   a backdrop blur from working (see .msg--user above): near-opaque instead. */
body[data-see-through='on'] .ask-card {
  background: var(--glass-float);
}
/* Settings → Agent providers (pages/AgentProviders.tsx). */

.agentp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 12px;
}
.agentp-head .btn,
.agentp-update {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.agentp-head__title {
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 500;
}
.agentp-head__desc {
  margin-top: 2px;
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.agentp-head__count {
  margin-top: 8px;
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.agentp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px 6px;
}
.agentp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  transition:
    border-color var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}
.agentp-row[data-over] {
  border-color: var(--accent);
}
.agentp-row[data-off] .agentp-row__mark,
.agentp-row[data-off] .agentp-row__text {
  opacity: 0.6;
}
.agentp-row__grip {
  flex: none;
  color: var(--text-4);
  cursor: grab;
}
.agentp-row__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
}
.agentp-row__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.agentp-row__name {
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 500;
}
.agentp-row__status {
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.agentp-row__status[data-tone='on'] {
  color: color-mix(in srgb, #3fb984 80%, var(--text));
}
.agentp-row__note {
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.agentp-row__guide {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.agentp-foot,
.agentp-empty {
  padding: 6px 18px 14px;
  color: var(--text-4);
  font-size: var(--fs-xs);
}

.agentp-updates {
  padding: 14px 18px 16px;
  border-top: 1px solid var(--border-soft);
}
.agentp-update-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
}
.agentp-error {
  margin-top: 10px;
  color: var(--danger);
  font-size: var(--fs-sm);
}

.agentp-tools {
  margin: 0 14px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.agentp-tool {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-right: 10px;
}
.agentp-tool + .agentp-tool {
  border-top: 1px solid var(--border-soft);
}
.agentp-tool__row {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  padding: 0 8px 0 16px;
  text-align: left;
}
.agentp-tool__name {
  flex: 1;
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 500;
}
.agentp-tool__version {
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.agentp-tool__chevron {
  flex: none;
  color: var(--text-3);
  transition: transform 200ms var(--ease);
}
.agentp-tool[data-open] .agentp-tool__chevron {
  transform: rotate(90deg);
}
.agentp-tool__more {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 14px;
  animation: ide-pane-in 180ms var(--ease) both;
}
.agentp-tool__more > div {
  display: flex;
  gap: 10px;
  font-size: var(--fs-sm);
}
.agentp-tool__more > div > span {
  width: 52px;
  flex: none;
  color: var(--text-3);
}
.agentp-tool__more code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-2);
}
.agentp-tool__more .btn {
  align-self: flex-start;
}
/* Settings → Workers → Payments */

.pay-form {
  gap: 12px;
}
.pay-field {
  display: flex;
  flex-direction: column;
  /* A label that wraps in a narrow window pushes its field down; the label
     takes the slack so the fields in a row still line up. */
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.pay-field--wide {
  width: 100%;
}
.pay-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
.pay-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pay-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.pay-hint {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.5;
}
.pay-actions {
  display: flex;
  gap: 8px;
}
.pay-error {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--danger);
}
.pay-error--page {
  margin-top: 8px;
}

.pay-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.pay-limit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pay-limit__unit {
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.pay-limit .input {
  width: 96px;
  text-align: right;
}

.pay-purchase__what {
  color: var(--text-3);
  font-weight: 400;
}
.pay-purchase__amount {
  font-size: var(--fs-sm);
  color: var(--fg);
}

/* The waiver */

.pay-waiver {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pay-waiver__lead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: var(--fs-sm);
}
.pay-waiver__lead svg {
  flex: none;
}
.pay-waiver__terms {
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 12px 2px 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-2);
}
.pay-waiver__terms p {
  margin: 0 0 10px;
}
.pay-waiver__terms p:last-child {
  margin-bottom: 0;
}
.pay-waiver__terms:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.pay-waiver__checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.pay-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--fg);
  cursor: pointer;
}
.pay-check input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
/* Settings → Agent engines. Status pills come from extension.css (.bx-status),
   the logo tile from connectApps.css (.ca-logo); only what is new lives here. */

.eng-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.eng-head__text {
  flex: 1;
  min-width: 0;
}
.eng-head__name {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
}
.eng-head__blurb {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.eng-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.eng-command {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 3px 4px 3px 10px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.eng-command code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text);
  overflow-wrap: anywhere;
  user-select: text;
}

.eng-hint {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.row__desc.eng-danger,
.eng-danger {
  color: var(--danger);
}
.eng-fine-line {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.eng-fine {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: 12px;
}
.eng-wait {
  color: var(--text-3);
}

.eng-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 10px 10px 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.45;
}
.eng-notice > span {
  flex: 1;
  min-width: 0;
}
.eng-notice[data-tone='error'] {
  background: var(--danger-soft);
  color: var(--danger);
}

.eng-note {
  margin: 10px 2px 0;
  font-size: var(--fs-sm);
  color: var(--danger);
}
.eng-note[data-ok] {
  color: var(--text-2);
}

.eng-model {
  padding: 11px 16px;
  border-top: 1px solid var(--border);
}
.eng-model__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
}
.eng-model__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.eng-model__meta code {
  font-family: var(--font-mono);
}
.eng-model__desc {
  margin-top: 3px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.eng-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-2);
}
/* Workers: group chats, the group chat editor and the New team dialog. */

.room-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 0 22px;
  text-align: center;
}
.room-intro__faces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.room-intro__member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.room-intro__text {
  max-width: 460px;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-3);
}

.room-post {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.room-post[data-grouped] {
  margin-top: 6px;
}
.room-post__face {
  padding-top: 2px;
}
.room-post__body {
  min-width: 0;
}
.room-post__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.room-post__name {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.room-post__time {
  font-size: var(--fs-xxs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.room-post__text {
  color: var(--fg);
  overflow-wrap: anywhere;
}
.room-post--user {
  margin-top: 18px;
}

.room-typing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 18px 0 8px 40px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.room-typing__member {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-2);
}
.room-typing__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.room-composer__to {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* Choosing members */

.member-picker {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
}
.member-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}
.member-pick:hover {
  background: var(--surface-2);
}
.member-pick[data-on] {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.member-pick:focus-visible,
.template-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.member-pick__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.member-pick__name {
  font-size: var(--fs-sm);
  font-weight: 500;
}
.member-pick__purpose {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.member-pick__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--accent);
}

/* New team */

.team-dialog__lead {
  margin: 0;
}
.template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.template-card {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  padding: 10px 30px 10px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}
.template-card:hover {
  background: var(--surface-2);
}
.template-card[data-on] {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-1));
}
.template-card > :first-child {
  grid-row: 1 / span 2;
}
.template-card__role {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.template-card__purpose {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text-3);
}
.template-card .member-pick__check {
  position: absolute;
  top: 8px;
  right: 8px;
}

.team-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
/* The first-run setup and the tour (components/onboarding). */

/* ---- The setup: over the whole window, under dialogs (the model sign-ins open over it) ---- */

/* Laid out like the app: a floating panel where the sidebar goes, the page beside it. */
.onboarding {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  background: var(--canvas);
  color: var(--text);
  /* clip, not hidden: a hidden box can still be scrolled; focusing a button
     scrolled the whole setup sideways. */
  overflow: clip;
  animation: fade 320ms var(--ease) both;
}
.onboarding[data-leaving='fade'] {
  animation: onboarding-out var(--exit-slow) var(--ease-exit) both;
}
@keyframes onboarding-out {
  to {
    opacity: 0;
  }
}
/* Finishing: everything but the little window steps back while it grows (Onboarding.tsx). */
.onboarding[data-leaving='zoom'] .onboarding__nav,
.onboarding[data-leaving='zoom'] .onboarding__step,
.onboarding[data-leaving='zoom'] .onboarding__titlebar {
  animation: onboarding-recede 220ms var(--ease-exit) both;
}
@keyframes onboarding-recede {
  to {
    opacity: 0;
    transform: scale(0.98);
    filter: blur(3px);
  }
}

/* The steps: the same floating card as `.sidebar__panel` and Settings' navigation. */
.onboarding__nav {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  display: flex;
  padding: var(--sidebar-gap);
  user-select: none;
  animation: onboarding-panel-in 560ms var(--spring-slow) 40ms both;
}
@keyframes onboarding-panel-in {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
}
.onboarding__panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-panel);
  overflow: hidden;
}
/* The traffic lights' row; it drags the window, as the sidebar's does. */
.onboarding__drag {
  height: var(--titlebar-h);
  flex: none;
  -webkit-app-region: drag;
}
.onboarding__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 15px 16px;
}
.onboarding__symbol {
  flex: none;
  color: var(--accent);
}
.onboarding__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.onboarding__brand-name {
  font-size: var(--fs-base);
  font-weight: 600;
}
.onboarding__brand-sub {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* 30px rows, 2px apart: the highlight slides to row `--at`. */
.onboarding__steps {
  --row: 30px;
  --gap: 2px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin: 0;
  padding: 0 7px;
  list-style: none;
}
.onboarding__indicator {
  position: absolute;
  top: 0;
  left: 7px;
  right: 7px;
  height: var(--row);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  transform: translateY(calc(var(--at) * (var(--row) + var(--gap))));
  transition: transform 420ms var(--spring-slow);
}
.onboarding__stepnav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: var(--row);
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  color: var(--text-2);
  text-align: left;
  transition:
    color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}
.onboarding__stepnav[data-state='current'] {
  color: var(--text);
  font-weight: 500;
}
.onboarding__stepnav[data-state='todo'] {
  color: var(--text-3);
}
.onboarding__stepnav:not([data-state='current']):not(:disabled):hover {
  background: var(--hover);
  color: var(--text);
}

/* A step's mark: a ring; the current one gets a dot; a finished one fills and draws a check. */
.onboarding__mark {
  flex: none;
  overflow: visible;
}
.onboarding__mark-ring {
  fill: none;
  stroke: var(--text-4);
  stroke-width: 1.5;
  transition: stroke var(--dur) var(--ease);
}
.onboarding__mark[data-state='current'] .onboarding__mark-ring {
  stroke: var(--text);
}
.onboarding__mark-fill {
  fill: var(--text);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 360ms var(--spring-slow);
}
.onboarding__mark[data-state='current'] .onboarding__mark-fill {
  transform: scale(0.36);
}
.onboarding__mark[data-state='done'] .onboarding__mark-fill {
  transform: scale(1);
  fill: var(--text-2);
}
.onboarding__mark-check {
  fill: none;
  stroke: var(--surface-1);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 280ms var(--ease) 140ms;
}
.onboarding__mark[data-state='done'] .onboarding__mark-check {
  stroke-dashoffset: 0;
}

.onboarding__panel-foot {
  margin-top: auto;
  padding: 10px 7px;
}
.onboarding__skip {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--nav-row-h);
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  color: var(--text-3);
  text-align: left;
  transition:
    color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}
.onboarding__skip:hover {
  background: var(--hover);
  color: var(--text);
}

/* The page. */
.onboarding__main {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  container: onboarding / inline-size;
}
.onboarding__titlebar {
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--titlebar-h) + var(--sidebar-gap));
  -webkit-app-region: drag;
}
/* Shown only when the window is too narrow for the panel. */
.onboarding__progress {
  display: none;
}
.onboarding__layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 620px);
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 56px;
  padding: 56px 48px 48px;
  overflow-x: hidden;
  overflow-y: auto;
}

.onboarding__step {
  --dx: 10px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.onboarding__step[data-direction='-1'] {
  --dx: -10px;
}
/* Each part of a step arrives a beat after the one before, coming into focus. */
.onboarding__step [style*='--i'] {
  animation: onboarding-rise 560ms var(--spring-slow) both;
  animation-delay: calc(40ms + var(--i) * 45ms);
}
@keyframes onboarding-rise {
  from {
    opacity: 0;
    transform: translate(var(--dx), 4px);
    filter: blur(4px);
  }
}

.onboarding__header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.onboarding__title {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.onboarding__lede {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}

/* Welcome: the three places, the one playing beside them highlighted. */
.onboarding__places {
  --row: 56px;
  --gap: 2px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin: 0 -10px;
}
.onboarding__places-indicator {
  position: absolute;
  inset: 0 0 auto;
  height: var(--row);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--border-soft);
  transform: translateY(calc(var(--at) * (var(--row) + var(--gap))));
  transition: transform 460ms var(--spring-slow);
}
.onboarding__place {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--row);
  padding: 0 12px;
  border-radius: var(--r-lg);
  text-align: left;
  overflow: hidden;
  transition: background var(--dur) var(--ease);
}
.onboarding__place:not([data-on]):hover {
  background: var(--hover);
}
.onboarding__place-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
}
.onboarding__place[data-on] .onboarding__place-icon {
  color: var(--text);
}
.onboarding__place-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.onboarding__place-title {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text-2);
  transition: color var(--dur) var(--ease);
}
.onboarding__place[data-on] .onboarding__place-title {
  color: var(--text);
}
.onboarding__place-text {
  font-size: var(--fs-sm);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.onboarding__option {
  cursor: default;
}
/* Rows here are spans (a label can't hold divs); the card's parts stack as they do in Settings. */
.onboarding .card__row-title,
.onboarding .card__row-desc {
  display: block;
}

/* Appearance: three small windows. */
.onboarding__themes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.onboarding__theme {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 6px 9px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface-1);
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background var(--dur) var(--ease);
}
.onboarding__theme:hover {
  background: var(--surface-2);
}
.onboarding__theme[data-on] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.onboarding__theme:active {
  transform: scale(0.98);
}
.onboarding__swatch {
  --win-bg: #f4f4f5;
  --win-side: #e4e4e7;
  --win-line: #d4d4d8;
  display: grid;
  grid-template-columns: 30% 1fr;
  height: 58px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--win-bg);
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}
.onboarding__swatch[data-look='dark'] {
  --win-bg: #18181b;
  --win-side: #111113;
  --win-line: #2e2e33;
}
.onboarding__swatch[data-look='system'] {
  background: linear-gradient(115deg, #f4f4f5 50%, #18181b 50%);
  --win-side: transparent;
  --win-line: #8a8a93;
}
.onboarding__swatch-side {
  background: var(--win-side);
}
.onboarding__swatch-main {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  padding: 9px;
}
.onboarding__swatch-main span {
  height: 5px;
  width: 60%;
  border-radius: var(--r-pill);
  background: var(--win-line);
}
.onboarding__swatch-main span:last-child {
  width: 100%;
  height: 11px;
  border-radius: 4px;
}
.onboarding__theme-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.onboarding__theme[data-on] .onboarding__theme-label {
  color: var(--text);
  font-weight: 500;
}

/* The new appearance spreads out from the click (LookStep): the old snapshot
   stays still underneath and the new one is uncovered over it. */
:root[data-theme-reveal]::view-transition-old(root),
:root[data-theme-reveal]::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
:root[data-theme-reveal]::view-transition-new(root) {
  z-index: 1;
}

/* Finish: the shortcuts, as rows with their keys. */
.onboarding__keys .card__row {
  min-height: 40px;
  padding: 8px 14px;
}
.onboarding__kbd {
  display: flex;
  gap: 4px;
}
.onboarding__kbd kbd {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  box-shadow:
    0 0 0 0.5px var(--border-strong),
    0 1px 0 var(--border-strong);
  font: 500 var(--fs-xs) var(--font-ui);
  color: var(--text-2);
}

/* Every step's buttons. */
.onboarding__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}
.onboarding__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.onboarding__btn {
  height: 32px;
  padding: 0 14px;
  gap: 7px;
  transition:
    background var(--dur) var(--ease),
    transform var(--dur-spring) var(--spring-fast);
}
.onboarding__btn:active:not(:disabled) {
  transform: scale(0.97);
}
.onboarding__back {
  margin-left: -8px;
  padding: 0 10px 0 8px;
}
/* The Tokn account signed in to: the card's first row, over the option. */
.onboarding__account {
  display: grid;
  grid-template-rows: 1fr;
}
.onboarding__account + .card__row {
  border-top: 1px solid var(--border);
}
/* Signed in while the step shows: the row opens in, pushing the option down. */
.onboarding__account[data-arrives] {
  animation: onboarding-account-in 520ms var(--spring-slow) both;
}
@keyframes onboarding-account-in {
  from {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
.onboarding__account-row {
  min-height: 0;
  overflow: hidden;
}
.onboarding__avatar {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--surface-4), var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1;
}
/* Whose account: Tokn's mark on the avatar's corner, cut out of the card. */
.onboarding__avatar-mark {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  border-radius: 5px;
  box-shadow: 0 0 0 2px var(--surface-1);
}
.onboarding__account-status::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 7px 1px 0;
  border-radius: 50%;
  background: var(--diff-add-fg);
  vertical-align: middle;
}
.onboarding__profile {
  flex: none;
  gap: 5px;
  color: var(--text-2);
}
.onboarding__profile:hover {
  color: var(--text);
}
.onboarding__note {
  margin: -12px 0 0;
  text-align: right;
  font-size: var(--fs-xs);
  color: var(--text-3);
  animation: fade 200ms var(--ease);
}
.onboarding__note--error {
  color: var(--danger);
}

/* The little window, which arrives once and then stays while its scenes change. */
.onboarding__stage {
  min-width: 0;
  animation: onboarding-stage-in 820ms var(--spring-slow) 120ms both;
}
@keyframes onboarding-stage-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
}

/* Too narrow for the window beside the words: the words alone. */
@container onboarding (max-width: 860px) {
  .onboarding__layout {
    grid-template-columns: minmax(0, 440px);
  }
  .onboarding__stage {
    display: none;
  }
}
.onboarding__skip--narrow {
  display: none;
}
/* Too narrow for the panel too: a line saying how far along the setup is. */
@media (max-width: 760px) {
  .onboarding__nav {
    display: none;
  }
  .onboarding__progress {
    display: block;
    position: absolute;
    top: calc(var(--titlebar-h) / 2);
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--fs-sm);
    color: var(--text-3);
  }
  .onboarding__skip--narrow {
    display: flex;
    width: auto;
    position: absolute;
    top: calc(var(--titlebar-h) / 2);
    right: 16px;
    transform: translateY(-50%);
    -webkit-app-region: no-drag;
    z-index: 1;
  }
}

/* ---- The little window (MiniApp.tsx). Drawn at 840 × 540 and scaled to fit. ---- */

.mini {
  position: relative;
  width: 100%;
  aspect-ratio: 840 / 540;
  border-radius: 12px;
  overflow: hidden;
  background: var(--canvas);
  box-shadow:
    0 0 0 0.5px var(--border-strong),
    var(--shadow-modal);
  pointer-events: none;
  user-select: none;
  transform-origin: center;
}
.mini__screen {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  transform-origin: 0 0;
  font-size: var(--fs-base);
}
.mini__side {
  width: 200px;
  flex: none;
  display: flex;
  padding: 8px;
}
.mini__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-panel);
  overflow: hidden;
}
.mini__chrome {
  position: relative;
  height: 36px;
  flex: none;
}
.mini__lights {
  position: absolute;
  top: 12px;
  left: 11px;
  display: flex;
  gap: 8px;
}
.mini__lights span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18);
}
.mini__lights span:nth-child(2) {
  background: #febc2e;
}
.mini__lights span:nth-child(3) {
  background: #28c840;
}
.mini__nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 7px;
  animation: mini-in 300ms var(--ease) both;
}
.mini__group {
  padding: 14px 8px 4px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.mini__recent {
  display: block;
  height: var(--nav-row-h);
  line-height: var(--nav-row-h);
  padding: 0 8px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini__recent--new {
  background: var(--surface-2);
  animation: mini-recent-in 460ms var(--spring-slow) both;
}
@keyframes mini-recent-in {
  from {
    height: 0;
    opacity: 0;
    transform: translateY(-6px);
  }
}
.mini__dot {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-4);
}
.mini__dot[data-state='busy'] {
  background: var(--accent);
  animation: mini-pulse 1.4s ease-in-out infinite;
}
.mini__dot[data-state='new'] {
  background: var(--accent);
}
.mini__dot[data-state='done'] {
  background: var(--diff-add-fg);
}
@keyframes mini-pulse {
  50% {
    opacity: 0.35;
  }
}
.mini__caret {
  display: inline-block;
  width: 1.5px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.18em;
  background: var(--text);
  animation: mini-blink 1s steps(1) infinite;
}
@keyframes mini-blink {
  50% {
    opacity: 0;
  }
}
.mini__spinner {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  border-top-color: var(--text);
  animation: mini-spin 0.8s linear infinite;
}
@keyframes mini-spin {
  to {
    transform: rotate(360deg);
  }
}

.mini__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.mini__top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
}
.mini__view {
  position: relative;
  flex: 1;
  min-height: 0;
  animation: mini-view-in 380ms var(--ease) both;
}
@keyframes mini-view-in {
  from {
    opacity: 0;
    transform: translateY(6px);
    filter: blur(4px);
  }
}
@keyframes mini-in {
  from {
    opacity: 0;
  }
}
@keyframes mini-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Chat: the home page, then the conversation once the message is sent. */
.mini-chat {
  position: absolute;
  inset: 0;
}
.mini .mini-chat__title {
  position: absolute;
  top: 118px;
  left: 0;
  right: 0;
  transition:
    opacity 200ms var(--ease),
    transform 420ms var(--ease);
}
.mini .mini-chat[data-sent] .mini-chat__title {
  opacity: 0;
  transform: translateY(-10px);
}
.mini .mini-composer {
  position: absolute;
  top: 172px;
  left: 50%;
  width: 520px;
  translate: -50% 0;
  transition: top 640ms var(--ease);
}
.mini .mini-chat[data-sent] .mini-composer,
.mini .mini-chat[data-low] .mini-composer {
  top: 376px;
}
.mini-composer__input {
  min-height: 46px;
  padding: 13px 11px 8px;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
}
.mini-composer__input[data-empty] {
  color: var(--text-3);
}
.mini-composer .send {
  opacity: 0.45;
}
.mini-composer .send[data-ready] {
  opacity: 1;
}
.mini-chat__chips {
  position: absolute;
  top: 282px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  transition: opacity 180ms var(--ease);
}
.mini-chat__chips[data-hidden],
.mini-chat[data-low] .mini-chat__chips {
  opacity: 0;
}
.mini-chat__thread {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 520px;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mini-chat__bubble {
  transform-origin: bottom right;
  animation: mini-bubble-in 520ms var(--spring-slow) both;
}
@keyframes mini-bubble-in {
  from {
    opacity: 0;
    transform: translateY(90px) scale(0.96);
  }
}
.mini-chat__step {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  color: var(--text-3);
  animation: mini-rise 300ms var(--ease) both;
}
/* Still searching: a light sweeps along the words. */
.mini-chat__step:not([data-done]) span {
  background: linear-gradient(90deg, var(--text-3) 0%, var(--text-3) 40%, var(--text) 50%, var(--text-3) 60%, var(--text-3) 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: mini-sweep 1.6s linear infinite;
}
@keyframes mini-sweep {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -150% 0;
  }
}
.mini .mini-chat__answer {
  white-space: normal;
}
.mini-chat__answer p {
  margin: 0 0 2px;
}

/* The model list, open over the composer. */
.mini-menu {
  position: absolute;
  right: 44px;
  bottom: 40px;
  width: 240px;
  padding: 5px;
  background: var(--menu-bg);
  backdrop-filter: var(--frost);
  -webkit-backdrop-filter: var(--frost);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-menu);
  transform-origin: bottom right;
  animation: mini-pop 300ms var(--spring-slow) 360ms both;
}
@keyframes mini-pop {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}
.mini-menu .menu__item {
  transition: background 120ms var(--ease);
}
.mini-menu__name {
  flex: 1;
}
.mini-menu__ready {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--diff-add-fg);
}
.mini-menu__hint {
  font-size: var(--fs-sm);
  color: var(--text-3);
}

/* Workers. */
.mini-workers {
  position: absolute;
  inset: 0;
  padding: 12px 40px;
}
.mini-page__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.mini-page__title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mini-page__sub {
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.mini-worker {
  margin-bottom: 10px;
  padding: 12px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  animation: mini-rise 500ms var(--spring-slow) both;
  animation-delay: calc(80ms + var(--i) * 70ms);
}
.mini-worker__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mini-worker__name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
}
.mini-worker__when {
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.mini-worker__status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.mini-worker__status svg {
  color: var(--diff-add-fg);
}
.mini-worker__status--quiet {
  color: var(--text-3);
}
.mini-worker__text {
  animation: mini-rise 280ms var(--ease) both;
}
.mini-worker__bar {
  height: 3px;
  margin-top: 10px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.mini-worker__bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left;
  transition:
    transform 900ms var(--ease),
    background 300ms var(--ease);
}
.mini-worker[data-state='done'] .mini-worker__bar span {
  background: var(--diff-add-fg);
}

/* The ADE: two coding agents side by side. */
.mini-ade {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 0 12px 12px 4px;
}
.mini-ade__head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  flex: none;
}
.mini-ade__repo {
  font-weight: 500;
}
.mini-ade__branch {
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.mini-ade__panes {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mini-term {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--code-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  animation: mini-rise 500ms var(--spring-slow) both;
}
.mini-term + .mini-term {
  animation-delay: 80ms;
}
.mini-term__title {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  flex: none;
  padding: 0 12px;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.mini-term__body {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  font: 12px/1.7 var(--font-mono);
  white-space: pre;
  overflow: hidden;
}
.mini-term__prompt {
  margin-bottom: 6px;
}
.mini-term__chevron {
  color: var(--text-3);
}
.mini-term__line {
  animation: mini-line-in 220ms var(--ease) both;
}
@keyframes mini-line-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}
.mini-term__line[data-tone='dim'] {
  color: var(--text-3);
}
.mini-term__line[data-tone='add'] {
  color: var(--diff-add-fg);
}
.mini-term__line[data-tone='ok'] {
  margin-top: 4px;
  color: var(--text);
}
.mini-term__working {
  color: var(--text-3);
  animation: mini-pulse 1.4s ease-in-out infinite;
}

/* Tokn: a profile, filling in. */
.mini-tokn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-bottom: 28px;
}
.mini-tokn__card {
  width: 430px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-menu);
  animation: mini-rise 560ms var(--spring-slow) both;
}
.mini-tokn__who {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mini-tokn__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  font-size: 17px;
  font-weight: 600;
}
.mini-tokn__names {
  display: flex;
  flex-direction: column;
}
.mini-tokn__name {
  font-size: 15px;
  font-weight: 600;
}
.mini-tokn__handle,
.mini-tokn__label {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.mini-tokn__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.mini-tokn__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mini-tokn__value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.mini-tokn__grid {
  display: grid;
  grid-template-rows: repeat(7, 9px);
  grid-auto-flow: column;
  gap: 3px;
}
.mini-tokn__grid span {
  width: 9px;
  height: 9px;
  border-radius: 2.5px;
  background: var(--surface-3);
  animation: mini-dot-in 420ms var(--ease) both;
  animation-delay: var(--d);
}
.mini-tokn__grid[data-filled] span[data-level='1'] {
  background: color-mix(in srgb, var(--accent) 30%, var(--surface-3));
}
.mini-tokn__grid[data-filled] span[data-level='2'] {
  background: color-mix(in srgb, var(--accent) 55%, var(--surface-3));
}
.mini-tokn__grid[data-filled] span[data-level='3'] {
  background: color-mix(in srgb, var(--accent) 80%, var(--surface-3));
}
.mini-tokn__grid[data-filled] span[data-level='4'] {
  background: var(--accent);
}
@keyframes mini-dot-in {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
}
.mini-tokn__chart {
  width: 100%;
  height: 56px;
}
.mini-tokn__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: mini-draw 1400ms var(--ease) 500ms forwards;
}
.mini-tokn__area {
  fill: color-mix(in srgb, var(--accent) 14%, transparent);
  opacity: 0;
  animation: mini-show 800ms var(--ease) 1000ms forwards;
}
@keyframes mini-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes mini-show {
  to {
    opacity: 1;
  }
}

/* ---- The tour ---- */

.tour {
  position: fixed;
  inset: 0;
  /* Over the corner cards and the update toast (96), which would cover its
     Next button; under dialogs and menus (100, 101). */
  z-index: 97;
  --dim: color-mix(in srgb, var(--shadow-ink) 62%, transparent);
}
.tour[data-leaving] {
  animation: onboarding-out var(--exit-slow) var(--ease-exit) both;
}
.tour__catcher {
  position: absolute;
  inset: 0;
}
.tour__catcher[data-dim] {
  background: var(--dim);
  animation: fade 240ms var(--ease);
}
/* The spotlight: a clear hole, the rest of the window dimmed by its shadow. It
   glides from one part of the app to the next, taking on each one's corners. */
.tour__spot {
  position: absolute;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--fg) 24%, transparent),
    0 0 0 9999px var(--dim);
  pointer-events: none;
  animation: tour-spot-in 420ms var(--ease) both;
}
.tour__spot[data-gliding] {
  transition:
    top 520ms var(--spring-slow),
    left 520ms var(--spring-slow),
    width 520ms var(--spring-slow),
    height 520ms var(--spring-slow),
    border-radius 520ms var(--spring-slow);
}
@keyframes tour-spot-in {
  from {
    box-shadow:
      0 0 0 1px transparent,
      0 0 0 9999px transparent;
  }
}
.tour__card {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 14px;
  border-radius: var(--r-xl);
  background: var(--menu-bg);
  backdrop-filter: var(--frost);
  -webkit-backdrop-filter: var(--frost);
  border: 0.5px solid var(--border-strong);
  box-shadow: var(--shadow-modal);
  color: var(--text);
  opacity: 0;
}
.tour__card[data-ready] {
  opacity: 1;
}
.tour__card[data-gliding] {
  transition: transform 520ms var(--spring-slow);
}
/* The first stop: the card settles in from the side it points from. */
.tour__card[data-ready]:not([data-placed]) .tour__content,
.tour__card[data-ready]:not([data-placed]) .tour__foot {
  animation: tour-card-in 380ms var(--spring-slow) both;
}
@keyframes tour-card-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
/* Each later stop's words come in as the card moves. */
.tour__card[data-placed] .tour__content {
  animation: tour-words-in 360ms var(--ease) 80ms both;
}
@keyframes tour-words-in {
  from {
    opacity: 0;
    filter: blur(3px);
  }
}
.tour__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tour__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tour__count {
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.tour__close {
  margin: -6px -6px -6px 0;
}
.tour__title {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tour__body {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-2);
}
.tour__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 6px;
}
.tour__progress {
  flex: 1;
  max-width: 120px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  overflow: hidden;
}
.tour__progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--text-2);
  transform-origin: left;
  transition: transform 520ms var(--spring-slow);
}
.tour__buttons {
  display: flex;
  gap: 6px;
}

/*
 * Connect a model: what's already on (Eaon's own models), then a row for each
 * way in, laid out like the welcome's places. A row opens Link accounts on
 * just its providers, and says which of them are connected.
 */
.onboarding__ways {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 -10px;
}
.onboarding__way {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px;
  border-radius: var(--r-lg);
  text-align: left;
  transition: background var(--dur) var(--ease);
}
button.onboarding__way:hover {
  background: var(--hover);
}
.onboarding__way-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  /* A raised tile: in light mode --surface-3 is the page's own white, so the edge and shadow are what show it. */
  box-shadow:
    0 0 0 1px var(--border-soft),
    0 1px 2px color-mix(in srgb, var(--shadow-ink) 8%, transparent);
  color: var(--text-2);
}
.onboarding__way-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.onboarding__way-title {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
}
.onboarding__way-text {
  font-size: var(--fs-sm);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.onboarding__way-chevron {
  flex: none;
  color: var(--text-4);
  transition:
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
button.onboarding__way:hover .onboarding__way-chevron {
  color: var(--text-2);
  transform: translateX(2px);
}
.onboarding__way-state {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 45%;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.onboarding__way-state svg {
  flex: none;
  color: var(--diff-add-fg);
}
.onboarding__way-names {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.onboarding__ways-rule {
  height: 1px;
  margin: 3px 12px;
  background: var(--border-soft);
}

/* The event code: a quiet link until it's asked for, then its field in the link's place. */
.onboarding__code {
  display: flex;
  align-items: center;
  min-height: 34px;
  margin-top: -6px;
}
.onboarding__link {
  margin-left: -8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-3);
  transition:
    color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}
.onboarding__link:hover {
  background: var(--hover);
  color: var(--text);
}
.onboarding__code .free-code {
  flex: 1;
  margin: 0;
  padding: 0;
  border: 0;
  animation: fade 200ms var(--ease);
}
.onboarding__code .fallback-row .input {
  flex: 1;
}
/* ---------- Purchase schedule (components/purchase) ----------
   The /purchase dialog: what to buy, where, the most per order, how often,
   and a calendar for the first day. The summary at the bottom reads like a
   receipt, since that is what saving it amounts to. */

/* The body scrolls on a short window; keep its scrollbar off the right column. */
.modal__body:has(> .purchase) {
  scrollbar-gutter: stable;
  padding-right: 10px;
}
.purchase {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--text-2);
}
.purchase__lede {
  margin: -2px 0 2px;
  color: var(--text-3);
  font-size: var(--fs-sm);
  text-wrap: pretty;
}

.purchase__notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 12px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  color: var(--text);
  font-size: var(--fs-sm);
}
.purchase__notice svg {
  flex: none;
  color: var(--accent);
}
.purchase__notice span {
  flex: 1;
  min-width: 0;
}

/* ---- Fields ---- */

.purchase__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.purchase__label {
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.purchase__optional {
  margin-left: 4px;
  color: var(--text-4);
  font-weight: 400;
}
.purchase .input[aria-invalid='true'] {
  border-color: color-mix(in srgb, var(--danger) 60%, transparent);
}
.purchase__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px;
  gap: 12px;
}
.purchase__money {
  position: relative;
  display: block;
}
.purchase__currency {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 11px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  font-size: var(--fs-base);
  pointer-events: none;
}
.purchase__money .input {
  padding-left: 26px;
  font-variant-numeric: tabular-nums;
}

/* Segmented controls sit on the dialog's own surface, so they get a track. */
.purchase .segment {
  display: flex;
  padding: 2px;
  border-radius: calc(var(--r-sm) + 2px);
  background: var(--sunken);
  border: 1px solid var(--border);
}
.purchase .segment__item {
  flex: 1;
  padding: 0 8px;
}
.purchase .segment__item[data-active='true'] {
  background: var(--surface-4);
  box-shadow: 0 1px 2px var(--shadow-ink, rgba(0, 0, 0, 0.12));
}

/* ---- When: the calendar beside the day's details ---- */

.purchase__when {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.purchase__side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 22px;
}

.purchase__day {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--sunken);
  border: 1px solid var(--border);
}
.purchase__day-name {
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.purchase__day-note {
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.purchase__day[data-today] {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, var(--sunken));
}
.purchase__day[data-today] .purchase__day-note {
  color: var(--accent);
  font-weight: 500;
}

.purchase__inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--fs-xs);
}
.purchase__inline--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.purchase__time {
  width: 128px;
  height: 30px;
  font-variant-numeric: tabular-nums;
}
.purchase__count {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.purchase__count .input {
  width: 64px;
  height: 30px;
  font-variant-numeric: tabular-nums;
}

.purchase__track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}
.purchase__track-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: var(--text);
  font-size: var(--fs-sm);
}
.purchase__hint {
  color: var(--text-3);
  font-size: var(--fs-xs);
}

/* ---- The calendar ---- */

.daypick {
  padding: 8px 8px 6px;
  border-radius: var(--r-md);
  background: var(--sunken);
  border: 1px solid var(--border);
}
.daypick__head {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 2px 6px 6px;
}
.daypick__month {
  flex: 1;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.daypick__head .icon-btn:disabled {
  opacity: 0.3;
}
.daypick__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.daypick__weekday {
  display: grid;
  place-items: center;
  height: 22px;
  color: var(--text-4);
  font-size: var(--fs-xxs);
  font-weight: 500;
}
.daypick__day {
  position: relative;
  height: 30px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.daypick__day:hover:not(:disabled):not([data-picked]) {
  background: var(--hover);
  color: var(--text);
}
.daypick__day:disabled {
  color: var(--text-4);
  opacity: 0.45;
}
.daypick__day[data-today]::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--accent);
}
.daypick__day[data-picked] {
  background: var(--fg);
  color: var(--bg);
  font-weight: 600;
}
.daypick__day[data-picked][data-today]::after {
  background: var(--bg);
}
.daypick__day:focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent));
  outline-offset: 1px;
}

/* ---- The receipt ---- */

.purchase__receipt {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 2px 0 0;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px dashed var(--border-strong, var(--border));
}
.purchase__receipt > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}
.purchase__receipt dt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.purchase__receipt dt svg {
  flex: none;
  color: var(--text-4);
  transform: translateY(1px);
}
.purchase__receipt dd {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

.purchase__fine {
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-xs);
  line-height: 1.5;
  text-wrap: pretty;
}
.purchase__error {
  margin: -4px 0 0;
  color: var(--danger);
  font-size: var(--fs-xs);
}

@media (max-width: 620px) {
  .purchase__when,
  .purchase__pair {
    grid-template-columns: minmax(0, 1fr);
  }
  .purchase__side {
    padding-top: 0;
  }
}

/* ---- Who buys it ---- */

.purchase .select {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--r-md);
  background: var(--sunken);
  border: 1px solid var(--border);
}
.purchase__worker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: var(--fs-sm);
}
.purchase__money + .purchase__hint {
  margin-top: -1px;
}
/*
 * Design tokens.
 *
 * Colour is driven by four user-editable values per theme — accent, background,
 * foreground and contrast — exactly as the Appearance settings page exposes them.
 * Every surface in the app is mixed from those, so changing the background or
 * dragging the contrast slider re-tones the whole UI coherently.
 */

:root {
  /* ---- Metrics (measured from the design frames) ---- */
  --sidebar-w: 252px;
  /* The sidebar floats as a rounded panel; this is the gutter around it. */
  --sidebar-gap: 8px;
  --r-panel: 14px;
  /* Space the native window controls occupy over the page, per edge. Every
     draggable header derives its padding from these rather than hardcoding a
     number — moving the controls once left four rules 7px too tight.

     macOS puts its traffic lights top-LEFT: they start at
     trafficLightPosition.x (19, TRAFFIC_LIGHTS in main/index.ts) and are three
     14pt buttons 23pt apart (macOS 26 and later), ending at 79, plus 10px of
     breathing room. Nothing is reserved on the right.
     Windows and Linux override these below — their caption buttons are
     usually on the other side. */
  --window-controls-left: 89px;
  --window-controls-right: 0px;
  --titlebar-h: 36px;
  --nav-row-h: 27px;
  --composer-w: 552px;
  --composer-chat-w: 640px;

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-composer: 18px;
  --r-pill: 999px;

  /* The platform's own UI face and nothing else — the same stack ChatGPT uses:
     SF Pro on macOS, Segoe UI on Windows. */
  --font-ui: ui-sans-serif, -apple-system, system-ui, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  --fs-base: 14px;
  /* Follow the base so Appearance → UI font size resizes all the text, not
     just the fifth of it set in --fs-base (same sizes at the default 14px). */
  --fs-sm: calc(var(--fs-base) - 1px);
  --fs-xs: max(10px, calc(var(--fs-base) - 2px));
  --fs-xxs: max(10px, calc(var(--fs-base) - 3px));
  --fs-title: 28px;
  --fs-h1: 30px;
  --fs-h2: calc(var(--fs-base) + 1px);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 160ms;

  /* ---- Motion ----
     Three tiers. Enters are springs; the bigger the thing that moves, the
     slower the tier. Only the largest tier carries any bounce — short travel
     lands exactly, with no overshoot to distract from what actually changed.
     Exits are plain tweens one tier quicker, so a dismissal reads as crisp and
     final rather than replaying the entrance backwards.
     Motion is information here, never decoration. */
  --spring-fast: linear(0.0000, 0.0180, 0.0632, 0.1250, 0.1957, 0.2700, 0.3441, 0.4157, 0.4831, 0.5455, 0.6024, 0.6537, 0.6996, 0.7404, 0.7763, 0.8077, 0.8352, 0.8591, 0.8797, 0.8976, 0.9129, 0.9261, 0.9373, 0.9469, 0.9551, 0.9621, 0.9681, 0.9731, 0.9773, 0.9809, 0.9840, 0.9866, 1.0000);
  --spring-moderate: linear(0.0000, 0.0180, 0.0632, 0.1250, 0.1957, 0.2700, 0.3441, 0.4157, 0.4831, 0.5455, 0.6024, 0.6537, 0.6996, 0.7404, 0.7763, 0.8077, 0.8352, 0.8591, 0.8797, 0.8976, 0.9129, 0.9261, 0.9373, 0.9469, 0.9551, 0.9621, 0.9681, 0.9731, 0.9773, 0.9809, 0.9840, 0.9866, 1.0000);
  --spring-slow: linear(0.0000, 0.0233, 0.0813, 0.1601, 0.2491, 0.3412, 0.4312, 0.5160, 0.5936, 0.6630, 0.7239, 0.7765, 0.8213, 0.8589, 0.8901, 0.9157, 0.9364, 0.9530, 0.9661, 0.9763, 0.9841, 0.9900, 0.9944, 0.9975, 0.9998, 1.0012, 1.0022, 1.0027, 1.0029, 1.0030, 1.0028, 1.0026, 1.0000);
  --dur-spring-fast: 80ms;
  --dur-spring: 160ms;
  --dur-spring-slow: 240ms;
  /* Exits: quicker, no bounce. */
  --exit-fast: 60ms;
  --exit-moderate: 120ms;
  --exit-slow: 160ms;
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  /* Cascade delay between siblings in a staggered reveal. */
  --stagger: 26ms;

  /* These were once a fixed warm tone (#d97757) held deliberately apart from
     the app's accent to match a reference design. That read as a bug in
     practice: primary buttons, provider toggles, radio dots and usage bars
     came out salmon in an otherwise blue app, and they ignored the accent the
     user picked in Appearance. They now derive from --accent like every other
     accented token, so the whole app re-tones together.

     Kept as their own names rather than inlined at the ~16 call sites: the
     grouping still marks which surfaces these are, and makes diverging again a
     one-line change. The mixes match `.btn--accent`'s hover convention in
     controls.css so the two stay visually identical. */
  --provider-accent: var(--accent);
  --provider-accent-strong: color-mix(in srgb, var(--accent), #000 12%);
  --provider-accent-soft: color-mix(in srgb, var(--accent), transparent 86%);

  /* Text and icons drawn on an accent fill. White everywhere used to be fine
     because every accent was a mid-tone; coloured themes bring pastels
     (Dracula purple, Catppuccin mauve, Nord frost) where white text drops to
     about 2:1. This flips to a deep shade of the accent's own hue once the
     accent's OKLCH lightness passes 0.69, the point where white text on the
     accent drops under 3:1. Cobalt, Indigo and Graphite keep their white text;
     brighter accents — Moss, Ember and Rose by night as well as the pastels —
     get a dark ink they can be read with. */
  --on-accent: oklch(
    from var(--accent) calc(1 - clamp(0, (l - 0.69) * 1000, 1) * 0.78) calc(clamp(0, (l - 0.69) * 1000, 1) * c * 0.6) h
  );
  /* The accent as a fill under --on-accent (a button, a badge). With white
     text, a mid-tone accent such as Cobalt's #0A84FF gives only 3.6:1; the
     fill is taken down to OKLCH lightness 0.56 (Cobalt becomes #006FE8,
     4.7:1), the same hue. An accent dark enough already, or one bright
     enough to get dark ink, is used as it is. */
  --accent-fill: oklch(from var(--accent) calc(l - (1 - clamp(0, (l - 0.69) * 1000, 1)) * max(0, l - 0.56)) c h);

  /* ---- Frosted glass ----
     Settings → Appearance → Glass scales how much frosted glass blurs what
     is behind it and how much of it shows through. useTheme() sets both
     from the two sliders: 1 is the design's own, 0 is no blur or solid, 2
     the most either goes. */
  --glass-blur-k: 1;
  --glass-clear-k: 1;
}

/* Declared on body, not :root: a translucent window's ground (app.css) is
   set there, and a custom property takes the var()s it names from where it
   is declared. Everything that floats over the page (menus, popovers,
   toasts, the find bar) frosts with this. */
body {
  --frost: blur(calc(28px * var(--glass-blur-k))) saturate(180%) var(--glass-ground,);
}

/* ---------- Dark (default) ---------- */

/*
 * Nothing below names a neutral. Hovers, borders, toggles, the send button,
 * code blocks, scrollbars and shadows used to be fixed whites, blacks and
 * greys, which was invisible while every theme had a near-grey background and
 * wrong the moment one didn't: a white hover on Solarized's teal reads as a grey
 * smear, and a #fff menu on Gruvbox's cream glows. They are now mixed from
 * --bg and --fg like the surfaces are. The mix amounts were solved so the
 * neutral themes land within a level or two of the old hard-coded values —
 * e.g. dark --toggle-off is 17.5% of #fcfcfc over #111111 = #3a3a3a, where it
 * used to be #3a3a3c.
 */
:root,
[data-theme='dark'] {
  --bg: #111111;
  --fg: #fcfcfc;
  --accent: #0169cc;
  --contrast: 60;
  /* How far the secondary text tones fade toward the background, as a share
     of the full step. 1 for the neutral themes; coloured palettes sit closer
     together (Nord's snow on polar night is ~9:1, not ~18:1), so each one
     carries a smaller value from lib/themes.ts, set by useTheme(), that keeps
     --text-2 at WCAG AA on every surface. */
  --text-fade: 1;

  /* Positive lift = lighter than the canvas. Lifting toward the foreground
     rather than pure white keeps a tinted theme's surfaces in its own hue. */
  --lift-color: var(--fg);
  --sink-color: #000000;
  --u: calc(var(--contrast) * 0.055%);

  --canvas: color-mix(in srgb, var(--bg), var(--sink-color) 22%);
  --sidebar: var(--bg);
  --surface-1: color-mix(in srgb, var(--bg), var(--lift-color) calc(var(--u) * 1.6));
  --surface-2: color-mix(in srgb, var(--bg), var(--lift-color) calc(var(--u) * 2.6));
  --surface-3: color-mix(in srgb, var(--bg), var(--lift-color) calc(var(--u) * 4.2));
  --surface-4: color-mix(in srgb, var(--bg), var(--lift-color) calc(var(--u) * 6));
  --sunken: color-mix(in srgb, var(--bg), var(--sink-color) 34%);

  --hover: color-mix(in srgb, var(--fg) 5.5%, transparent);
  --hover-strong: color-mix(in srgb, var(--fg) 9%, transparent);
  --active: color-mix(in srgb, var(--fg) 13%, transparent);

  --border: color-mix(in srgb, var(--bg), var(--lift-color) 8%);
  --border-soft: color-mix(in srgb, var(--fg) 6%, transparent);
  --border-strong: color-mix(in srgb, var(--fg) 14%, transparent);

  /* Translucent so `.menu`'s backdrop-filter has something to frost; how
     translucent follows Appearance → Glass. */
  --menu-bg: color-mix(in srgb, var(--surface-3), transparent calc(24% * var(--glass-clear-k)));

  --text: var(--fg);
  --text-2: color-mix(in srgb, var(--fg), var(--bg) calc(38% * var(--text-fade)));
  --text-3: color-mix(in srgb, var(--fg), var(--bg) calc(58% * var(--text-fade)));
  --text-4: color-mix(in srgb, var(--fg), var(--bg) calc(72% * var(--text-fade)));

  --toggle-on: var(--accent);
  --toggle-off: color-mix(in srgb, var(--bg), var(--fg) 17.5%);
  --toggle-knob: #ffffff;
  --danger: #ff453a;
  --danger-soft: rgba(255, 69, 58, 0.14);
  /* Lifted off the accent so links stay legible against a dark canvas. */
  --link: color-mix(in srgb, var(--accent), #ffffff 26%);
  --send-bg: color-mix(in srgb, var(--fg) 70%, var(--bg));
  --send-fg: color-mix(in srgb, var(--bg), var(--fg) 4%);
  --focus-ring: color-mix(in srgb, var(--accent), transparent 10%);
  --scrollbar: color-mix(in srgb, var(--fg) 16%, transparent);
  --code-bg: color-mix(in srgb, var(--bg), var(--sink-color) 22%);
  /* Diff green/red are fixed hues rather than accent mixes: added and removed
     have to stay green and red whatever accent the theme picks, or the diff
     stops being readable at a glance. Backgrounds are kept faint so a run of
     changed lines does not out-shout the code sitting on them. */
  --diff-add-fg: #3fb950;
  --diff-add-bg: rgba(63, 185, 80, 0.11);
  --diff-del-fg: #f85149;
  --diff-del-bg: rgba(248, 81, 73, 0.11);
  /* Shadows fall in the background's own darkest shade rather than neutral
     black, so on a blue or plum theme they read as depth, not as dirt. */
  --shadow-ink: color-mix(in srgb, var(--bg), #000000 80%);
  --shadow-menu: 0 0 0 0.5px color-mix(in srgb, var(--shadow-ink) 50%, transparent),
    0 10px 32px color-mix(in srgb, var(--shadow-ink) 44%, transparent),
    0 2px 8px color-mix(in srgb, var(--shadow-ink) 30%, transparent);
  --shadow-modal: 0 24px 64px color-mix(in srgb, var(--shadow-ink) 55%, transparent),
    0 2px 12px color-mix(in srgb, var(--shadow-ink) 40%, transparent);
  color-scheme: dark;
}

/* ---------- Light ---------- */

/* Light mixes toward --fg (a dark ink) instead of black. For the neutral
   themes --fg is within 26 levels of black, so each alpha is scaled by ~1.11
   to land on the same composite over white: rgba(0,0,0,.1) and
   11% of #1a1c1f over #fff both come out at 229. */
[data-theme='light'] {
  --bg: #ffffff;
  --fg: #1a1c1f;
  --accent: #339cff;
  --contrast: 45;
  --text-fade: 1;

  --lift-color: var(--fg);
  --sink-color: var(--fg);
  --u: calc(var(--contrast) * 0.055%);

  --canvas: var(--bg);
  --sidebar: color-mix(in srgb, var(--bg), var(--lift-color) calc(var(--u) * 1.1));
  --surface-1: color-mix(in srgb, var(--bg), var(--lift-color) calc(var(--u) * 1.5));
  --surface-2: color-mix(in srgb, var(--bg), var(--lift-color) calc(var(--u) * 2.4));
  /* The raised surface (menus, popovers, the composer) was a flat #ffffff,
     which glows on a cream or grey-blue page. Most of the way to white keeps
     it the brightest thing on screen while holding the page's hue. */
  --surface-3: color-mix(in srgb, var(--bg), #ffffff 65%);
  --surface-4: color-mix(in srgb, var(--bg), var(--lift-color) calc(var(--u) * 1.2));
  --sunken: color-mix(in srgb, var(--bg), var(--lift-color) calc(var(--u) * 1.8));

  --hover: color-mix(in srgb, var(--fg) 5%, transparent);
  --hover-strong: color-mix(in srgb, var(--fg) 7.8%, transparent);
  --active: color-mix(in srgb, var(--fg) 11%, transparent);

  --border: color-mix(in srgb, var(--fg) 11%, transparent);
  --border-soft: color-mix(in srgb, var(--fg) 7.8%, transparent);
  --border-strong: color-mix(in srgb, var(--fg) 17.8%, transparent);

  --menu-bg: color-mix(in srgb, var(--surface-3), transparent calc(18% * var(--glass-clear-k)));

  --text: var(--fg);
  --text-2: color-mix(in srgb, var(--fg), var(--bg) calc(34% * var(--text-fade)));
  --text-3: color-mix(in srgb, var(--fg), var(--bg) calc(52% * var(--text-fade)));
  --text-4: color-mix(in srgb, var(--fg), var(--bg) calc(66% * var(--text-fade)));

  --toggle-on: var(--accent);
  --toggle-off: color-mix(in srgb, var(--bg), var(--fg) 17%);
  --toggle-knob: #ffffff;
  --danger: #e5342a;
  --danger-soft: rgba(229, 52, 42, 0.1);
  --link: color-mix(in srgb, var(--accent), #000000 18%);
  --send-bg: var(--fg);
  --send-fg: var(--bg);
  --focus-ring: color-mix(in srgb, var(--accent), transparent 10%);
  --scrollbar: color-mix(in srgb, var(--fg) 22%, transparent);
  --code-bg: color-mix(in srgb, var(--bg), var(--fg) 4%);
  /* Darker inks than the dark theme's: the same greens and reds wash out to
     pastel against white and stop reading as added/removed. */
  --diff-add-fg: #1a7f37;
  --diff-add-bg: rgba(26, 127, 55, 0.1);
  --diff-del-fg: #cf222e;
  --diff-del-bg: rgba(207, 34, 46, 0.09);
  --shadow-ink: color-mix(in srgb, var(--fg), #000000 45%);
  --shadow-menu: 0 0 0 0.5px color-mix(in srgb, var(--shadow-ink) 11%, transparent),
    0 10px 32px color-mix(in srgb, var(--shadow-ink) 15%, transparent),
    0 2px 8px color-mix(in srgb, var(--shadow-ink) 9%, transparent);
  --shadow-modal: 0 24px 64px color-mix(in srgb, var(--shadow-ink) 24%, transparent),
    0 2px 12px color-mix(in srgb, var(--shadow-ink) 13%, transparent);
  color-scheme: light;
}

/* ---------- Windows and Linux ---------- */

/* Both get the Window Controls Overlay (titleBarOverlay in main/index.ts):
   minimise/maximise/close drawn over the page, at the top RIGHT on Windows
   and wherever the desktop's button layout puts them on Linux. Linux used to
   fall through to the macOS values, which left an empty gap at the left and
   the header's own buttons under the caption buttons at the right.

   The titlebar-area-* environment variables give the free strip between the
   buttons, so the reservations are read from them rather than guessed: the
   left one is where the strip starts (plus macOS's 10px of breathing room,
   when anything is there at all), the right one is everything past its end.
   Where the variables aren't set, the fallback is Windows' three 46px
   buttons at 100% scale on the right and nothing on the left. Both are
   capped at 200px, so a strip not measured yet (0 wide) can't reserve the
   whole window. */
body[data-platform='win32'],
body[data-platform='linux'] {
  --window-controls-left: min(200px, calc(env(titlebar-area-x, 0px) + min(env(titlebar-area-x, 0px), 10px)));
  --window-controls-right: min(200px, calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, calc(100vw - 138px))));
}
/* Reset, application shell, title bar and sidebar. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--text);
  /* The window's one and only background. `.sidebar`, `.main` and `.settings`
     used to paint their own, which meant any difference between them showed up
     as a seam down the edge of the sidebar — exactly what the translucent state
     produced, since the gutter mixed in vibrancy and `.main` did not. Painting
     it once here makes a seam impossible, and vibrancy still shows through at
     the same 18% because this element is the bottom of the rendered frame. */
  background: var(--canvas);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* macOS only: Windows and Linux windows have no vibrancy behind them, just an
   opaque background colour, so a see-through canvas there only tinted the
   whole app off its theme. The setting defaults to on and is hidden off
   macOS, so it has to be ignored here rather than switched off. */
body[data-platform='darwin'][data-translucent='on'] {
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
}
/* A backdrop blur lays its blurred copy over the page rather than in its
   place, so where the page lets the window's material through, the sharp
   page shows through the frost too: text behind a menu stayed readable
   through it. In a translucent window frosted glass first lays the page on
   its own colour (#glass-ground, index.html), which makes the blurred copy
   opaque and hides what it blurs. A see-through picture is opaque already. */
body[data-platform='darwin'][data-translucent='on']:not([data-see-through='on']) {
  --glass-ground: url(#glass-ground);
}

body[data-font-smoothing='off'] {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

body[data-pointer='on'] button,
body[data-pointer='on'] [role='button'],
body[data-pointer='on'] a,
body[data-pointer='on'] label {
  cursor: pointer;
}

/* Reduce motion (Settings → Appearance, or the system setting). One run of
   each animation, at once: a looping one (every spinner, the streaming caret,
   status pulses) would otherwise restart every 0.001ms and flicker, and a
   staggered entrance would still wait out its delay. A spinner stands still;
   whatever fades or slides in is simply there. */
body[data-reduce-motion='on'] *,
body[data-reduce-motion='on'] *::before,
body[data-reduce-motion='on'] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
/* Before settings load the attribute isn't set yet; follow the system meanwhile. */
@media (prefers-reduced-motion: reduce) {
  body:not([data-reduce-motion]) *,
  body:not([data-reduce-motion]) *::before,
  body:not([data-reduce-motion]) *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: default;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-radius: var(--r-xs);
}

::selection {
  background: color-mix(in srgb, var(--accent), transparent 55%);
}

/* ---- Scrollbars: only visible while the area is hovered ---- */
.scroll {
  overflow-y: auto;
}
/* The app's panes scroll up and down only. With just overflow-y set, the
   browser makes the other axis scrollable too, so one element wider than the
   pane (a long unbroken note) let a trackpad swipe shift the whole layout
   sideways. Wide content inside (code, tables, diffs) scrolls in its own box. */
.thread,
.page__scroll,
.settings__scroll,
.settings__nav-body,
.sidebar__body,
.code-home,
.providers-shell,
.pr-list,
.modal__body {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
.scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.scroll::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.scroll:hover::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  background-clip: padding-box;
}
.scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------------- Shell ---------------- */

.app {
  display: flex;
  height: 100%;
  /* Transparent: `body` paints the window. */
}

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  display: flex;
  flex-direction: column;
  /* Just the gutter around the floating panel — `body` paints it. */
  padding: var(--sidebar-gap);
  user-select: none;
  overflow: hidden;
  transition: flex-basis 240ms var(--ease), width 240ms var(--ease), padding 240ms var(--ease);
}


.sidebar__panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* A raised surface rather than `--sidebar`: that token is tuned for a panel
     sitting flush at `--bg`, which in the dark theme is only three values off
     `--canvas` and left the curve almost invisible. `--surface-1` is the
     token that already means "one step above the canvas". */
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-panel);
  /* Rounded corners only clip children that are actually painted inside; the
     menus anchored in here portal to the body, so nothing gets cut off. */
  overflow: hidden;
}


/* Collapse — the sidebar's own width eases to zero (an accordion on the
   horizontal axis) while its content slides and fades out in the same
   direction it's collapsing, rather than just clipping abruptly. */
.sidebar[data-open='false'] {
  flex-basis: 0;
  width: 0;
  min-width: 0;
  padding: 0;
}

.sidebar__content {
  width: calc(var(--sidebar-w) - var(--sidebar-gap) * 2);
  min-width: calc(var(--sidebar-w) - var(--sidebar-gap) * 2);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: opacity 160ms var(--ease), transform 240ms var(--ease);
}

.sidebar[data-open='false'] .sidebar__content {
  opacity: 0;
  transform: translateX(-24px);
  pointer-events: none;
}

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  /* The top bar's mode switch drops its labels when this gets narrow. */
  container: main / inline-size;
}

.drag {
  -webkit-app-region: drag;
}
.no-drag {
  -webkit-app-region: no-drag;
}

/* ---------------- Title bar ---------------- */

.titlebar {
  height: var(--titlebar-h);
  flex: 0 0 var(--titlebar-h);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 10px 0 var(--window-controls-left);
  -webkit-app-region: drag;
}

/* Inside the floating panel the traffic lights sit at window x 19..79 (three
   14pt buttons, 23pt apart, from trafficLightPosition). The row itself starts
   --sidebar-gap in from the window edge, so reserving 89px of window space
   leaves the same 10px breathing room the flush titlebar had. Controls are
   right-aligned so they sit at the far edge of the panel rather than crowding
   the lights. */
.sidebar__panel .titlebar {
  justify-content: flex-end;
  /* max() so this collapses to a plain 8px on Windows, where the left
     reservation is zero and the controls live on the other side. */
  padding: 0 8px 0 max(8px, calc(var(--window-controls-left) - var(--sidebar-gap)));
}

.titlebar--collapsed {
  padding-left: max(14px, var(--window-controls-left));
  padding-right: calc(10px + var(--window-controls-right));
}

.titlebar--main {
  padding: 0 12px 0 14px;
  justify-content: space-between;
}

.icon-btn {
  position: relative;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--text-3);
  flex: none;
  -webkit-app-region: no-drag;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover:not(:disabled) {
  background: var(--hover);
  color: var(--text);
}
.icon-btn:disabled {
  color: var(--text-4);
  opacity: 0.5;
}
.icon-btn[data-active='true'] {
  background: var(--hover-strong);
  color: var(--text);
}

/* ---------------- Sidebar header ---------------- */



/* ---------------- Sidebar body ---------------- */

.sidebar__body {
  flex: 1;
  min-height: 0;
  /* The list runs to the bottom of the panel; the last row keeps a little room from its edge. */
  padding: 0 7px 10px;
  overflow-y: auto;
}

/* Chat's menu (New chat … Settings) stays put above its projects and chats. */
.sidebar__menu {
  flex: none;
  padding: 0 7px 2px;
}

/* The list under it fades out at an edge with more of it past that edge,
   under a graded blur. Sidebar.tsx's FadingBody sets --fade-top and
   --fade-bottom: 0 at the very end of the list, 1 once a row's worth is
   beyond it. */
.sidebar__fade {
  --fade-top: 0;
  --fade-bottom: 0;
  --fade-top-h: 44px;
  --fade-bottom-h: 72px;
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.sidebar__fade > .sidebar__body {
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgb(0 0 0 / calc(1 - 0.92 * var(--fade-top))) 0,
    rgb(0 0 0 / calc(1 - 0.5 * var(--fade-top))) calc(var(--fade-top) * var(--fade-top-h) * 0.4),
    #000 calc(var(--fade-top) * var(--fade-top-h)),
    #000 calc(100% - var(--fade-bottom) * var(--fade-bottom-h)),
    rgb(0 0 0 / calc(1 - 0.5 * var(--fade-bottom))) calc(100% - var(--fade-bottom) * var(--fade-bottom-h) * 0.4),
    rgb(0 0 0 / calc(1 - 0.92 * var(--fade-bottom))) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgb(0 0 0 / calc(1 - 0.92 * var(--fade-top))) 0,
    rgb(0 0 0 / calc(1 - 0.5 * var(--fade-top))) calc(var(--fade-top) * var(--fade-top-h) * 0.4),
    #000 calc(var(--fade-top) * var(--fade-top-h)),
    #000 calc(100% - var(--fade-bottom) * var(--fade-bottom-h)),
    rgb(0 0 0 / calc(1 - 0.5 * var(--fade-bottom))) calc(100% - var(--fade-bottom) * var(--fade-bottom-h) * 0.4),
    rgb(0 0 0 / calc(1 - 0.92 * var(--fade-bottom))) 100%
  );
}
.edge-veil {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
}
.edge-veil[data-edge='top'] {
  --fade: var(--fade-top);
  --edge: to top;
  top: 0;
  height: var(--fade-top-h);
}
.edge-veil[data-edge='bottom'] {
  --fade: var(--fade-bottom);
  --edge: to bottom;
  bottom: 0;
  height: var(--fade-bottom-h);
}
.edge-veil > span {
  position: absolute;
  inset: 0;
  /* 0.4, 0.8, 1.6, 3.2 px (scaled by Settings → Appearance → Glass → Blur),
     each layer's band a quarter nearer the edge than the last. */
  -webkit-backdrop-filter: blur(calc(0.4px * pow(2, var(--i)) * var(--fade) * var(--glass-blur-k, 1)));
  backdrop-filter: blur(calc(0.4px * pow(2, var(--i)) * var(--fade) * var(--glass-blur-k, 1)));
  -webkit-mask-image: linear-gradient(
    var(--edge),
    transparent calc(var(--i) * 25%),
    #000 calc((var(--i) + 1) * 25%),
    #000 calc((var(--i) + 2) * 25%),
    transparent calc((var(--i) + 3) * 25%)
  );
  mask-image: linear-gradient(
    var(--edge),
    transparent calc(var(--i) * 25%),
    #000 calc((var(--i) + 1) * 25%),
    #000 calc((var(--i) + 2) * 25%),
    transparent calc((var(--i) + 3) * 25%)
  );
}
/* The strongest layer runs right to the edge rather than fading out there. */
.edge-veil > span:last-child {
  -webkit-mask-image: linear-gradient(var(--edge), transparent 50%, #000 90%);
  mask-image: linear-gradient(var(--edge), transparent 50%, #000 90%);
}
@media (prefers-reduced-transparency: reduce) {
  .edge-veil {
    display: none;
  }
}

/* ---------------- Top bar ----------------
   Every screen's top row: left content · the mode switch · right content. The
   side columns are equal, so the switch sits at the centre of the window's
   content area whatever each side holds; when space runs out the sides
   shrink (titles ellipsise) and the switch keeps its place. Specific enough to
   beat `.chat-header` / `.page__bar`, which stay for padding and dragging. */
.chat-header.topbar,
.page__bar.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: 12px;
}
/* Same inset on both sides, on both kinds of row and with the sidebar open
   or closed, so the switch sits at the true centre and does not shift
   between screens. The window controls' room is kept inside the side they
   are on instead: as row padding, the traffic lights' 92px against 12px on
   the right pushed the switch 40px right of centre with the sidebar closed. */
.chat-header.topbar,
.page__bar.topbar,
.chat-header.topbar[data-collapsed],
.page__bar.topbar[data-collapsed] {
  padding-left: 16px;
  padding-right: 16px;
}
.topbar[data-collapsed] .topbar__side--left {
  /* Starts where the row's own padding did: 3px past the traffic lights. */
  padding-left: calc(2px + max(0px, var(--window-controls-left) - 13px));
}
/* Its width is the grid's to give (minmax(0, 1fr)), so it can be asked about. */
.topbar__side--left {
  container: topbar-left / inline-size;
}
.topbar__side {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  /* A side never paints over the switch: what does not fit is clipped (menus
     are portalled, so they are not). The 2px inset keeps focus rings whole. */
  overflow: hidden;
  padding: 2px;
  margin: -2px;
}
/* `safe`: when the actions are wider than their column they overflow to the
   right, off the edge, instead of leftwards under the switch — which is how
   the ADE's context meter ended up drawn over "Workers". */
.topbar__side--right {
  justify-content: safe flex-end;
  /* Windows' caption buttons, drawn over the page at the top right. */
  padding-right: calc(2px + var(--window-controls-right));
}
.topbar .chat-header__title {
  max-width: none;
  min-width: 0;
  flex: 0 1 auto;
}
/* A narrow content area (a split screen, a zoomed-in window): equal side
   columns left a long chat's title one letter wide beside the collapsed
   sidebar's buttons. Here the switch gives up dead-centre and the left side
   takes whatever is left, so the title keeps its room (and its tooltip). */
@container main (max-width: 640px) {
  .chat-header.topbar,
  .page__bar.topbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 8px;
  }
}
.topbar .collapsed-nav {
  margin-right: 2px;
}

/* Chat ⇄ Workers ⇄ ADE, centred in the top bar.
   Sits in a sunken track so the raised option reads as the selected one without
   needing an accent fill, which would fight the accent already spent on primary
   actions. The header is a drag region, so the buttons opt back out of it or
   they would move the window instead of switching mode. */
.mode-switch {
  flex: none;
  justify-self: center;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--sunken);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  -webkit-app-region: no-drag;
}
.mode-switch__option {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: calc(var(--r-lg) - 4px);
  color: var(--text-2);
  font-size: var(--fs-base);
  font-weight: 500;
  white-space: nowrap;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.mode-switch__option:hover {
  color: var(--text);
}
.mode-switch__option[data-active] {
  background: var(--surface-3);
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.mode-switch__option svg {
  flex: none;
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
}
.mode-switch__option[data-active] svg {
  color: var(--text);
}
.mode-switch__option {
  position: relative;
}
/* A worker has something for you: unread replies or a failed task. */
.mode-switch__dot {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--sunken);
}
/*
 * A worker's page has the most header actions of any (Activity, Browser,
 * Check in, Pause, Edit, More). With their words they need about 560px a
 * side, and a side that's narrower clips what doesn't fit — which hid Edit
 * and the More menu at an ordinary window size. Below that they keep their
 * icons (each has a title and a label for screen readers).
 */
@container main (max-width: 1560px) {
  .worker-actions .header-btn > span {
    display: none;
  }
  .worker-actions .header-btn {
    padding: 0 7px;
  }
}
@container main (max-width: 700px) {
  .mode-switch__label {
    display: none;
  }
  .mode-switch__option {
    padding: 0 11px;
  }
  /* A side panel leaves the header little room: its buttons keep their icon (and title). */
  .chat-header__actions .header-btn > span {
    display: none;
  }
  .chat-header__actions .header-btn {
    padding: 0 7px;
  }
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  height: var(--nav-row-h);
  padding: 0 8px 0 6px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-base);
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.nav-item:hover {
  background: var(--hover);
}
.nav-item[data-active='true'] {
  background: var(--surface-2);
}
.nav-item__icon {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-2);
  width: 16px;
}
.nav-item[data-active='true'] .nav-item__icon {
  color: var(--text);
}
.nav-item__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-item__trail {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-3);
  opacity: 0;
}
.nav-item:hover .nav-item__trail,
.nav-item__trail[data-always='true'] {
  opacity: 1;
}

.sidebar__section {
  padding: 0 8px;
  margin: 18px 0 4px;
  font-size: var(--fs-sm);
  color: var(--text-3);
  letter-spacing: -0.005em;
}

.sidebar__section--action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 3px;
}
.sidebar__section-btn {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-xs);
  color: var(--text-3);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidebar__body:hover .sidebar__section-btn,
.sidebar__section-btn:focus-visible {
  opacity: 1;
}
.sidebar__section-btn:hover {
  background: var(--hover-strong);
  color: var(--text);
}

/* Chat's section headings, Projects and Chats: a row of their own between
   the sections, the name on the left and the heading's tools on the right,
   shown while the pointer is on it. Chats folds, so its whole row is the
   button, banded on hover like the rows under it. */
.sidebar-head {
  display: flex;
  align-items: center;
  gap: 1px;
  height: var(--nav-row-h);
  margin: 14px 0 2px;
  padding-right: 3px;
  border-radius: var(--r-sm);
  color: var(--text-3);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* The rule between Projects and Chats, halfway across the gap above the
   heading and inset to the rows' text. */
.sidebar-head[data-divided] {
  position: relative;
  margin-top: 21px;
}
.sidebar-head[data-divided]::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 8px;
  right: 8px;
  border-top: 1px solid var(--border-soft);
  pointer-events: none;
}
.sidebar-head__label {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 8px;
  border-radius: inherit;
  color: inherit;
  font-size: var(--fs-xs);
  letter-spacing: -0.005em;
  text-align: left;
}
.sidebar-head[data-fold]:hover {
  background: var(--hover);
  color: var(--text-2);
}
.sidebar-head__chev {
  flex: none;
  transition: transform var(--dur-spring-fast) var(--spring-fast);
}
.sidebar-head__chev[data-folded] {
  transform: rotate(-90deg);
}
.sidebar-head__tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1px;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
/* Shown with the pointer on the heading, while one of its tools has keyboard
   focus (opacity keeps them in the tab order), and while a tool's menu is open. */
.sidebar-head:hover .sidebar-head__tools,
.sidebar-head:has(:focus-visible) .sidebar-head__tools,
.sidebar-head__tools:has([data-open]) {
  opacity: 1;
}
.sidebar-head__tool {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-xs);
  color: var(--text-3);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidebar-head__tool:hover,
.sidebar-head__tool[data-open] {
  background: var(--hover-strong);
  color: var(--text);
}

/* A project's folder in its Edit dialog: the path, and Choose… */
.project-folder {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 4px 0 11px;
  border-radius: var(--r-sm);
  background: var(--sunken);
  border: 1px solid var(--border);
  color: var(--text-3);
}
.project-folder__path {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* A long path loses its start, not the folder's own name at its end. */
  direction: rtl;
  text-align: left;
}
.field-error {
  font-size: var(--fs-xs);
  color: var(--danger);
}

/* A project row expands to its chats, indented under it. */
.nav-item__chevron {
  flex: none;
  color: var(--text-4);
  transition: transform var(--dur-spring-fast) var(--spring-fast);
}
.nav-item__chevron[data-open] {
  transform: rotate(90deg);
}
.nav-item__action {
  display: none;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: -4px;
  border-radius: var(--r-xs);
  color: var(--text-3);
}
/* Shown on hover, and while the row has keyboard focus, so the button can be
   reached with Tab at all (display: none takes it out of the tab order). */
.nav-item--project:hover .nav-item__action,
.nav-item--project:focus-within .nav-item__action {
  display: grid;
}
.nav-item--project:hover .nav-item__chevron,
.nav-item--project:focus-within .nav-item__chevron {
  display: none;
}
.nav-item__action:hover {
  background: var(--hover-strong);
  color: var(--text);
}
.nav-group {
  padding-left: 16px;
}
.nav-item--muted {
  color: var(--text-3);
}
.nav-item__icon--face {
  width: 18px;
}

/* A chat's reply that finished while another was on screen (Sidebar ChatRow). */
.nav-item__unread {
  width: 7px;
  height: 7px;
  margin: 0 3px;
  border-radius: 50%;
  background: var(--accent);
}
.unread-badge {
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent, #fff);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
}

.sidebar__empty {
  padding: 0 8px;
  height: var(--nav-row-h);
  display: flex;
  align-items: center;
  font-size: var(--fs-base);
  color: var(--text-4);
}

.footer-item {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-base);
  transition: background var(--dur) var(--ease);
}
.footer-item:hover {
  background: var(--hover);
}

/* Leading window-controls cluster shown when the sidebar is hidden; always
   rendered inline inside the screen's own draggable header row, never as a
   second overlapping drag region. */
.collapsed-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  margin-right: 6px;
}

.spinner {
  animation: spin 900ms linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Staggered list entrance ------------------------------------
   Chat rows cascade in when the list is rebuilt (switching workspace,
   loading history) so the order is readable instead of everything
   appearing at once. Keyed rows are reused across re-renders, so this
   plays on mount only — not on every streamed token. */
.nav-item--staggered {
  animation: nav-row-in var(--dur-spring-fast) var(--spring-fast) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}
@keyframes nav-row-in {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}

/* ---------------- Sidebar density ---------------- */

/* The reference sidebar runs a step smaller than the app's base scale — the
   nav is a dense index, not body copy. Scoped to `.sidebar` so the settings
   navigation, which reuses `.nav-item`, keeps the base size. */
.sidebar .nav-item {
  font-size: var(--fs-sm);
}
.sidebar .sidebar__section {
  font-size: var(--fs-xs);
}
.sidebar .sidebar__empty {
  font-size: var(--fs-xs);
}
/* Home hero, composer, tray and the conversation view. */

.home {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Behind the whole page, top bar included; it never takes the pointer. */
.home__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Quieter behind the title and the box, where the eye is meant to rest. */
  -webkit-mask-image: radial-gradient(ellipse 46% 40% at 50% 46%, rgb(0 0 0 / 0.35), #000 100%);
  mask-image: radial-gradient(ellipse 46% 40% at 50% 46%, rgb(0 0 0 / 0.35), #000 100%);
  animation: field-in 900ms var(--ease) both;
}
@keyframes field-in {
  from {
    opacity: 0;
  }
}
.main > .chat-header {
  position: relative;
  z-index: 2;
}
.home__hero {
  flex: 1;
  min-height: 0;
  /* Its own width, not its widest child's: the chips and title below size
     against the column and wrap inside it, rather than spilling over the
     sidebar or a panel beside a narrow chat. */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px 24px;
}
.home__mark {
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  color: var(--text);
  animation: hero-in 520ms var(--ease) both;
}
.home__dock {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 0 16px;
  animation: hero-in 520ms var(--ease) 120ms both;
}
@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.home__title {
  max-width: 100%;
  text-wrap: balance;
  font-size: clamp(calc(var(--fs-title) * 0.9), 3.2vw, calc(var(--fs-title) * 1.12));
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
  text-align: center;
  animation: hero-in 520ms var(--ease) 60ms both;
}
.home__icon {
  color: var(--text-3);
  margin-bottom: 18px;
}

/* Capability chips under the home composer: a starting prompt each, and the
   first hint that Chat does things rather than only answering. They wrap to a
   second line on a narrow window instead of shrinking into unreadable pills. */
.home-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: var(--composer-chat-w);
  max-width: calc(100% - 48px);
  margin: 26px 0 0;
}
.suggestion-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: color-mix(in srgb, var(--canvas) 72%, transparent);
  height: 34px;
  padding: 0 14px 0 12px;
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 1px var(--border-soft);
  font-size: var(--fs-sm);
  color: var(--text-2);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  animation: chip-in var(--dur-spring) var(--spring-moderate) backwards;
  animation-delay: calc(80ms + var(--i, 0) * var(--stagger));
}
.suggestion-chip svg {
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
}
.suggestion-chip:hover {
  background: var(--hover);
  color: var(--text);
}
.suggestion-chip:hover svg {
  color: var(--text-2);
}
@keyframes chip-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* The ADE home's suggestion cards — wired to settings.general.suggestedPrompts.
   Chat's home uses the lighter .home-chips row instead; the two must keep
   separate class names, since the ADE reuses these (see code/CodeView.tsx). */
.suggestions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: var(--composer-w);
  max-width: calc(100% - 48px);
  margin: 0 0 20px;
}
.suggestion-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  min-height: 104px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--border-soft);
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.suggestion-card:hover {
  background: var(--surface-2);
}
.suggestion-card__label {
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--text-2);
  white-space: pre-line;
}

/* The ADE home's project-folder bar, stacked above .composer — negative
   margin equal to the padding tucks the shared edge behind the composer's
   rounded corner (z-index 2 > 1). Chat no longer has one; the ADE does. */
.project-bar {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin: 0 0 -18px;
  padding: 0 16px 18px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--surface-1);
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-align: left;
}
.project-bar__pick {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: inherit;
  font-size: inherit;
  transition: color var(--dur) var(--ease);
}
.project-bar__pick:hover {
  color: var(--text);
}
.project-bar__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-bar__status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.project-bar__status:hover {
  background: var(--hover-strong);
  color: var(--text-2);
}
.project-bar__status[data-error='true'] {
  color: var(--danger);
}

/* ---------------- Composer ---------------- */

.composer-stack {
  width: var(--composer-chat-w);
  max-width: calc(100% - 48px);
  position: relative;
}

.composer-stack--chat {
  width: var(--composer-chat-w);
}

.composer {
  position: relative;
  z-index: 2;
  background: var(--surface-2);
  border-radius: var(--r-composer);
  padding: 0 5px 6px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px var(--border-soft);
  transition: box-shadow var(--dur) var(--ease);
}
.composer:focus-within {
  box-shadow: 0 0 0 1px var(--border-strong);
}

.composer__input {
  width: 100%;
  border: 0;
  background: none;
  resize: none;
  outline: none;
  padding: 13px 11px 8px;
  min-height: 46px;
  max-height: 320px;
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--text);
  overflow-y: auto;
  scrollbar-width: none;
}
.composer__input::placeholder {
  color: var(--text-3);
}
.composer__input::-webkit-scrollbar {
  display: none;
}

.composer__toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  flex: none;
}
.composer__spacer {
  flex: 1;
}

.composer__round {
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  color: var(--text-2);
  flex: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.composer__round:hover,
.composer__round[data-open='true'] {
  background: var(--surface-4);
  color: var(--text);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-base);
  color: var(--text-2);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip:hover,
.chip[data-open='true'] {
  background: var(--surface-4);
  color: var(--text);
}
.chip__icon {
  display: grid;
  place-items: center;
  color: var(--text-2);
  flex: none;
}
.chip--model {
  gap: 7px;
  padding-right: 8px;
  /* Model ids are unbounded ("nemotron 3 super 120b extended"), and with
     `white-space: nowrap` on .chip an unbounded one pushed the whole toolbar
     out of shape. Cap the chip and let the name ellipsize; the effort label
     stays fixed so it is the name that gives way, not the setting. */
  min-width: 0;
  max-width: 220px;
}
.chip--model .chip__model {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip--model .chip__effort {
  color: var(--text-2);
  flex: none;
}

.send {
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--send-bg);
  color: var(--send-fg);
  display: grid;
  place-items: center;
  flex: none;
  margin-left: 2px;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.send:disabled {
  opacity: 0.45;
}
.send:not(:disabled):hover {
  background: color-mix(in srgb, var(--send-bg), var(--lift-color) 25%);
}
.send:not(:disabled):active {
  transform: scale(0.94);
}
.send--stop {
  background: var(--fg);
  color: var(--bg);
}

/* ---- Two shapes ----
   Home: a roomy box, the text over a toolbar of +, permissions, the model
   and send. In a conversation: one line between + and send, with the
   permission and the model on a quiet row under it. Above either, the
   project the agent works in and (in a conversation) what it has changed. */

.composer-stack,
.perm-menu {
  --warn: #f0883e;
}
[data-theme='light'] .composer-stack,
[data-theme='light'] .perm-menu {
  --warn: #c2570c;
}

.composer {
  box-shadow:
    0 0 0 1px var(--border-soft),
    0 10px 30px -18px rgb(0 0 0 / 0.55);
}
.composer:focus-within {
  box-shadow:
    0 0 0 1px var(--border-strong),
    0 10px 30px -18px rgb(0 0 0 / 0.55);
}
.composer__round:not(.composer__mic) {
  background: var(--hover);
}

.composer[data-variant='home'] {
  padding: 0 8px 8px;
}
.composer[data-variant='home'] .composer__input {
  min-height: 74px;
  padding: 16px 8px 8px;
}
.composer[data-variant='home'] .composer__toolbar {
  height: 36px;
  gap: 6px;
}

.composer[data-variant='chat'] {
  padding: 6px;
  border-radius: 22px;
}
.composer__row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
/* One line, the buttons sit on the box's midline; more lines, they stay at
   the bottom by the last one. + matches send's size, so each sits in the
   middle of its own rounded end of the pill. */
.composer__row > .composer__round,
.composer__row > .send {
  margin-bottom: 2px;
}
.composer__row > .composer__round:not(.composer__mic) {
  width: 32px;
  height: 32px;
}
/* The mic is smaller than send: lifted by half the difference. */
.composer__row > .composer__mic {
  margin-bottom: 4px;
}
.composer[data-variant='chat'] .composer__input {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: 8px 4px 7px;
}
.composer[data-variant='chat'] .voice-bar {
  flex: 1;
}

/* Under the box in a conversation: what Eaon may do, and with which model. */
.composer__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  margin-top: 4px;
  padding: 0 2px;
}
.composer__meta .chip--model {
  color: var(--text-2);
}

/* Over the box: the project, and the chat's changes. */
.composer__above {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0 2px;
}

.composer-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 30px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.composer-pill:hover,
.composer-pill[data-open] {
  background: var(--hover);
  color: var(--text);
}
.composer-pill__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-pill__chevron {
  flex: none;
  color: var(--text-4);
}
.composer-pill[data-tone='warn'],
.composer-pill[data-tone='warn'] .composer-pill__chevron {
  color: var(--warn);
}
.composer-pill[data-tone='warn']:hover,
.composer-pill[data-tone='warn'][data-open] {
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}
.composer__above .composer-pill {
  max-width: 260px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.composer__above .composer-pill:hover,
.composer__above .composer-pill[data-open] {
  background: var(--surface-3);
}

/* The project menu runs taller than a menu usually does: the folders, then its way out. */
.menu.project-menu {
  max-height: min(480px, calc(100vh - 24px));
}

/* The permission menu: each choice described; full access in orange. */
.perm-menu__option[data-tone='warn'] .menu__item,
.perm-menu__option[data-tone='warn'] .menu__item svg {
  color: var(--warn);
}
.perm-menu__option[data-tone='warn'] .menu__item [class*='desc'] {
  color: color-mix(in srgb, var(--warn) 80%, var(--text-2));
}

/* Tight on room, the toolbar's controls keep their icons: a pill never
   shrinks past its icon, and the model keeps its mark and a few letters. */
.composer__toolbar > .composer-pill,
.composer__meta > .composer-pill,
.composer__toolbar > .composer__round,
.composer__toolbar > .send {
  flex-shrink: 0;
}
.composer__toolbar > .chip--model,
.composer__meta > .chip--model {
  min-width: 52px;
}

/* The + menu holds every agent control in one short list; it is sized to
   show all of it without scrolling, which the general 340px cap would not. */
.menu.menu--tall {
  max-height: min(460px, calc(100vh - 24px));
}

/* ---------------- Chips for what is switched on ---------------- */

/* Sit between + and the model: one per mode or setting in effect, each with
   its own off switch, so tucking the controls into + never hides state. */
.composer__chips {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}
.composer-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 3px 0 9px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent), transparent 86%);
  color: color-mix(in srgb, var(--accent), var(--fg) 35%);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
  min-width: 0;
  animation: chip-in var(--dur-spring-fast) var(--spring-fast);
}
.composer-chip__label {
  min-width: 0;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-chip__clear {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
  color: inherit;
  opacity: 0.7;
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.composer-chip__clear:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--accent), transparent 78%);
}
/* A chip that opens a choice rather than clearing one: the goal's end time. */
.composer-chip--button {
  padding: 0 8px 0 9px;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.composer-chip--button:hover {
  background: color-mix(in srgb, var(--accent), transparent 78%);
}
.goal-end__at {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 6px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.goal-end__time {
  flex: 1;
  height: 30px;
  font-variant-numeric: tabular-nums;
}

.chip__chevron {
  color: var(--text-3);
  margin-left: -2px;
}

.plugin-stack {
  display: flex;
  align-items: center;
}

/* ---------------- Conversation ---------------- */

.chat-header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 16px;
  /* Keep this row's own buttons out from under the Windows caption
     buttons, which are drawn over the page at the top right. Zero on
     macOS, where the traffic lights are on the other side. */
  padding-right: calc(12px + var(--window-controls-right));
  -webkit-app-region: drag;
  /* Offset by the sidebar gutter so this row lands on the same baseline as the
     floating panel's titlebar (and the traffic lights) rather than sitting 8px
     higher against the window edge. */
  height: calc(var(--titlebar-h) + var(--sidebar-gap));
  padding-top: var(--sidebar-gap);
}
.chat-header[data-collapsed='true'] {
  padding-left: max(16px, calc(var(--window-controls-left) + 3px));
}
.chat-header__title {
  font-size: var(--fs-base);
  color: var(--text);
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-header__spacer {
  flex: 1;
}
.chat-header__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  white-space: nowrap;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-2);
  -webkit-app-region: no-drag;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.header-btn:hover,
.header-btn[data-active] {
  background: var(--hover);
  color: var(--text);
}

.thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* The top bar sits --sidebar-gap below the window's top edge; the thread
     starts the same distance below the bar, so scrolled-up messages disappear
     with room to spare instead of jammed against it. The padding is trimmed
     by as much, so the first message still starts where it did. */
  margin-top: var(--sidebar-gap);
  padding: calc(24px - var(--sidebar-gap)) 0 24px;
  /* The reply fades into the composer rather than being cut off by it. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}

.thread__inner {
  width: var(--composer-chat-w);
  max-width: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Long threads: a message well back from the end skips layout and paint
   while it is off screen, so a chat of hundreds of messages costs about what
   its visible part does. A skipped row stands in at its last drawn height
   (200px before it has ever been drawn). The newest dozen rows never skip:
   opening a chat scrolls to its end before anything has been measured, and
   real heights down there keep it landing on the last message, with scroll
   anchoring absorbing the guesses further up.

   Containment clips a row's painting to its own box, so a row being pointed
   at or used is left whole — its reaction and More menus open upward, past
   the top of a short reply. The padding, cancelled by the negative margin so
   nothing moves, gives tables' and cards' outer rings and shadows room inside
   that box. Rooms lay out their posts with margins of their own. */
.thread__inner:not(.room) > .msg-row {
  padding: 6px 8px;
  margin: -6px -8px;
}
.thread__inner:not(.room) > .msg-row:nth-last-child(n + 13):not(:hover, :focus-within) {
  content-visibility: auto;
  contain-intrinsic-size: auto 200px;
}

.msg--user {
  align-self: flex-end;
  max-width: 78%;
  background: var(--surface-2);
  border-radius: 18px;
  padding: 8px 15px;
  font-size: var(--fs-base);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg--assistant {
  align-self: stretch;
  font-size: var(--fs-base);
  line-height: 1.62;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg__reasoning {
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
  border-left: 2px solid var(--border);
  padding-left: 12px;
  margin-bottom: 14px;
  white-space: pre-wrap;
}

.msg__error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: var(--fs-sm);
}
/* Under the part of the reply that arrived before the failure. */
.msg--assistant + .msg__error {
  margin-top: 10px;
}

.msg__status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: var(--fs-base);
}

/* A column: in Work the goal banner and checklist stack above the composer.
   As a row they sat beside it, both squeezed to half width. */
.composer-dock {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 13px;
}

.msg__actions {
  display: flex;
  gap: 2px;
  margin-top: 2px;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.msg-row:hover .msg__actions,
.msg__actions:focus-within,
.msg__actions[data-pinned] {
  opacity: 1;
}
.msg__actions .usage-line {
  margin-left: 8px;
}

/* The composer sheds its labels when it gets narrow (e.g. browser panel open). */
.composer-stack {
  container-type: inline-size;
}
@container (max-width: 430px) {
  .chip__label,
  .chip--model .chip__effort,
  .composer-chip__label,
  .composer__toolbar .composer-pill__label {
    display: none;
  }
  .chip {
    padding: 0 6px;
  }
}

/* ==================================================================
   Motion: thinking orb, thoughts, message entrances.
   Every animation here reports state — what is running, what arrived,
   in what order. All of it collapses to nothing under reduce-motion
   via the global rule in app.css.
   ================================================================== */

/* ---- Message entrances ------------------------------------------ */

/* New turns rise into place so it's obvious where content appeared, rather
   than it materialising and leaving the eye to hunt for it. Only turns that
   arrive while the chat is open (data-fresh): the ones already there when it
   opens come in with the thread's own fade. A user's message animates its
   bubble below, so its row doesn't move too. */
.msg-row[data-fresh]:not(.msg-user-block) {
  animation: msg-in 260ms var(--ease) backwards;
}
@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* The user's own message comes from the composer, so it enters from lower and
   slightly scaled — the direction it physically travelled — growing from its
   corner nearest the composer. */
.msg-row[data-fresh] > .msg--user {
  transform-origin: 100% 100%;
  animation: user-msg-in 300ms var(--ease) backwards;
}
@keyframes user-msg-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
}

/* ---- The top bar over a conversation ----------------------------
   It floats over the thread rather than sitting above it, so messages
   scroll on up beneath it. Behind it, a veil of graded blur — the way a
   lens defocuses — lies over what passes under the bar: six layers, each
   blurring twice as hard as the last and each masked to a band a little
   higher up, so the blur builds smoothly from nothing at the veil's foot to
   its fullest under the bar's buttons, with no edge anywhere. A faint wash
   of the page's own colour, densest at the top, keeps the bar's text
   legible. It fades in with the first stretch of scrolling. */
.main > .chat-header--float {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 4;
}
/* How far the veil has built, 0 to 1, set from the scroll position. A typed
   property, so a wheel notch's jump in it eases instead of snapping. */
@property --veil {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
.scroll-veil {
  /* Starts above the window's top edge: a blur has nothing to sample past
     its own edge, and right at the top of the window that read as a dark
     rim. Offscreen, the rim never shows. */
  --veil-over: 40px;
  --veil-h: calc(var(--titlebar-h) + var(--sidebar-gap) + 40px + var(--veil-over));
  position: absolute;
  top: calc(-1 * var(--veil-over));
  right: 0;
  left: 0;
  z-index: 3;
  height: var(--veil-h);
  pointer-events: none;
  --veil: 0;
  transition: --veil 320ms cubic-bezier(0.25, 0.8, 0.3, 1);
  /* A light wash, not a dark band: just enough of the page's colour behind
     the bar's text to keep it legible, gone well before the blur ends. */
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--canvas) calc(30% * var(--veil)), transparent) 0%,
    color-mix(in srgb, var(--canvas) calc(18% * var(--veil)), transparent) 55%,
    transparent 85%
  );
}
/* Over a wallpaper the wash would only dim it: the blur alone does the work. */
body[data-see-through='on'] .scroll-veil {
  background: none;
}
.scroll-veil > span {
  position: absolute;
  inset: 0;
  /* 1, 2, 4, 8, 16, 32 px, each layer's band one sixth higher than the last. */
  -webkit-backdrop-filter: blur(calc(1px * pow(2, var(--i)) * var(--veil) * var(--glass-blur-k)));
  backdrop-filter: blur(calc(1px * pow(2, var(--i)) * var(--veil) * var(--glass-blur-k)));
  -webkit-mask-image: linear-gradient(
    to top,
    transparent calc(var(--i) * 16.66%),
    #000 calc((var(--i) + 1) * 16.66%),
    #000 calc((var(--i) + 2) * 16.66%),
    transparent calc((var(--i) + 3) * 16.66%)
  );
  mask-image: linear-gradient(
    to top,
    transparent calc(var(--i) * 16.66%),
    #000 calc((var(--i) + 1) * 16.66%),
    #000 calc((var(--i) + 2) * 16.66%),
    transparent calc((var(--i) + 3) * 16.66%)
  );
}
/* The top layer runs to the very top rather than fading out there. */
.scroll-veil > span:last-child {
  -webkit-mask-image: linear-gradient(to top, transparent 66%, #000 92%);
  mask-image: linear-gradient(to top, transparent 66%, #000 92%);
}
/* A translucent window (macOS) paints the page at 82% so the system's
   material shows through it. A backdrop blur can't keep that: it lays its
   blurred copy over the page rather than in its place, so each layer hid
   more of the material, the top of the page turned darker than the rest,
   and the dark ended in a line where the veil did. There the thread fades
   out under the bar instead, as it fades into the composer, and whatever is
   behind the page shows through unchanged. A see-through window's picture
   is part of the page, so the blur still works there. */
body[data-platform='darwin'][data-translucent='on']:not([data-see-through='on']) .scroll-veil {
  display: none;
}
body[data-platform='darwin'][data-translucent='on']:not([data-see-through='on'])
  .main:has(> .chat-header--float)
  > .thread {
  /* Hidden down to the bar's foot, then shown along a smoothstep curve so the
     fade has no line where it starts or ends. Scaled by --veil, so nothing
     fades until the thread scrolls. */
  --fade-len: 48px;
  --thread-mask: linear-gradient(
    to bottom,
    rgb(0 0 0 / calc(1 - var(--veil))) var(--veil-fade-from),
    rgb(0 0 0 / calc(1 - 0.957 * var(--veil))) calc(var(--veil-fade-from) + var(--fade-len) * 0.125),
    rgb(0 0 0 / calc(1 - 0.844 * var(--veil))) calc(var(--veil-fade-from) + var(--fade-len) * 0.25),
    rgb(0 0 0 / calc(1 - 0.684 * var(--veil))) calc(var(--veil-fade-from) + var(--fade-len) * 0.375),
    rgb(0 0 0 / calc(1 - 0.5 * var(--veil))) calc(var(--veil-fade-from) + var(--fade-len) * 0.5),
    rgb(0 0 0 / calc(1 - 0.316 * var(--veil))) calc(var(--veil-fade-from) + var(--fade-len) * 0.625),
    rgb(0 0 0 / calc(1 - 0.156 * var(--veil))) calc(var(--veil-fade-from) + var(--fade-len) * 0.75),
    rgb(0 0 0 / calc(1 - 0.043 * var(--veil))) calc(var(--veil-fade-from) + var(--fade-len) * 0.875),
    #000 calc(var(--veil-fade-from) + var(--fade-len)),
    #000 calc(100% - 24px),
    transparent
  );
  -webkit-mask-image: var(--thread-mask);
  mask-image: var(--thread-mask);
  transition: --veil 320ms cubic-bezier(0.25, 0.8, 0.3, 1);
}
@media (prefers-reduced-transparency: reduce) {
  .scroll-veil > span {
    display: none;
  }
}

/* The thread runs up under the bar, starting its first message where it did. */
.main:has(> .chat-header--float) > .thread {
  margin-top: 0;
  padding-top: calc(var(--titlebar-h) + var(--sidebar-gap) + 24px);
  scroll-padding-top: calc(var(--titlebar-h) + var(--sidebar-gap) + 12px);
  /* Where what floats over the thread ends: its fade under a translucent window starts here. */
  --veil-fade-from: calc(var(--titlebar-h) + var(--sidebar-gap));
}

/* ---- Back to the latest ----------------------------------------- */

/* Floats over the end of the thread once the reader has scrolled away from
   it, and sinks back out of sight when they're there again. */
.thread-jump {
  position: absolute;
  top: -40px;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  box-shadow:
    0 0 0 1px var(--border-soft),
    0 8px 20px -8px rgb(0 0 0 / 0.5);
  opacity: 0;
  transform: translate(-50%, 8px) scale(0.85);
  pointer-events: none;
  transition:
    opacity 160ms var(--ease),
    transform 260ms var(--ease),
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.thread-jump[data-shown] {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto;
}
.thread-jump:hover {
  background: var(--surface-4);
  color: var(--text);
}
.thread-jump:active {
  transform: translate(-50%, 0) scale(0.92);
}

/* ---- Send / stop morph ------------------------------------------ */

.send svg {
  animation: send-icon-in var(--dur-spring-fast) var(--spring-fast);
}
@keyframes send-icon-in {
  from {
    opacity: 0;
    transform: scale(0.5) rotate(-45deg);
  }
}

/* Each block resolves through a soft blur as it arrives. Only while streaming,
   and only on mount — a block already on screen keeps its identity as its text
   grows, so this plays once per block rather than on every token. Reopening a
   finished chat replays nothing. */
.msg--assistant[data-streaming='true'] > * {
  animation: block-resolve 280ms var(--spring-moderate) both;
}
@keyframes block-resolve {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .msg--assistant[data-streaming='true'] > * {
    animation: none;
  }
}
/*
 * Agent transcript: Markdown, code, diffs and tool calls.
 *
 * Everything here mixes from the same four theme values as the rest of the app
 * (see tokens.css), so a coding turn re-tones with the picked theme instead of
 * being a hard-coded dark slab in the middle of a light window. Motion follows
 * the house rule — springs on enter, quicker plain tweens on exit, and only
 * where the movement carries information.
 */

/* ---------- Markdown ---------- */

.md__p {
  margin: 0 0 10px;
}
.md__p:last-child {
  margin-bottom: 0;
}
.md__heading {
  margin: 16px 0 8px;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.35;
}
.md__heading:first-child {
  margin-top: 0;
}
.md__list {
  margin: 0 0 10px;
  padding-left: 22px;
}
.md__list li {
  margin: 3px 0;
}
.md__list li::marker {
  color: var(--text-3);
}
/* A list inside an item sits tight under it rather than a paragraph's gap below. */
.md__list li > .md__list {
  margin: 3px 0 0;
}
.md__list li > .md__p,
.md__list li > .md__table-wrap {
  margin: 6px 0;
}
/* Task items: a box instead of the bullet. */
.md__list[data-tasks] {
  padding-left: 4px;
  list-style: none;
}
.md__task {
  display: block;
}
.md__check {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin: 0 8px -2px 0;
  border: 1.5px solid var(--text-3);
  border-radius: 4px;
}
.md__check[data-checked] {
  border-color: var(--accent);
  background: var(--accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 11px no-repeat;
}
.md__task:has(.md__check[data-checked]) {
  color: var(--text-2);
}
/* Tables: adapted from AICSS (MIT, Copyright (c) 2026 AICSS); see
   components/aicss/LICENSE. A card whose top band carries the muted header,
   with the rows on an inset sheet split by hairlines. They scroll sideways in
   their own box; the thread itself never does. */
.md__table-wrap {
  max-width: 100%;
  margin: 2px 0 12px;
  /* Room for the card's ring and shadow, which overflow would clip. */
  padding: 1px 1px 3px;
  overflow-x: auto;
}
.tbl {
  --tbl-bg: color-mix(in srgb, var(--bg), var(--fg) 9%);
  --tbl-body-bg: color-mix(in srgb, var(--bg), var(--fg) 4%);
  --tbl-line: color-mix(in srgb, var(--bg), var(--fg) 14%);
  --tbl-ring: color-mix(in srgb, var(--fg) 12%, transparent);
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: var(--tbl-bg);
  box-shadow:
    0 0 0 0.5px var(--tbl-ring),
    0 1px 2px color-mix(in srgb, var(--sink-color) 5%, transparent),
    0 2px 4px color-mix(in srgb, var(--sink-color) 2%, transparent);
  font-size: 13px;
}
[data-theme='light'] .tbl {
  --tbl-bg: color-mix(in srgb, var(--bg), var(--fg) 2%);
  --tbl-body-bg: var(--bg);
  --tbl-line: color-mix(in srgb, var(--bg), var(--fg) 10%);
  --tbl-ring: color-mix(in srgb, var(--fg) 8%, transparent);
}
.tbl__head {
  display: flex;
  color: var(--text-3);
  font-weight: 500;
}
.tbl__head .tbl__cell {
  padding-top: 7px;
  padding-bottom: 7px;
}
/* A header too long for its column wraps between words, as the body's
   cells do (see .tbl__text): in a narrow window an ellipsis left a column
   with no readable name. */
.tbl__head .tbl__text {
  overflow-wrap: break-word;
}
.tbl__body {
  display: flex;
  flex-direction: column;
  margin: 0 -0.5px -0.5px;
  border: 0.5px solid var(--tbl-line);
  border-radius: 12px 12px 0 0;
  background: var(--tbl-body-bg);
}
.tbl__row {
  display: flex;
}
.tbl__row:not(:last-child) {
  border-bottom: 0.5px solid var(--tbl-line);
}
.tbl__cell {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  min-width: 0;
  padding: 9px 12px;
  color: var(--text);
}
.tbl__head .tbl__cell {
  color: inherit;
}
.tbl__cell:not(:last-child) {
  border-right: 0.5px solid var(--tbl-line);
}
/* The cell's text lives in its own box: a flex container would split
   "a **b** c" into separate items and drop the spaces between them. Long
   text wraps rather than being cut off, since a reply's cell is meant to
   be read. */
.tbl__text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.tbl__yes {
  color: var(--diff-add-fg);
}
.tbl__no {
  color: var(--text-3);
}
.md__quote {
  margin: 0 0 10px;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--border-strong);
  color: var(--text-2);
}
.md__rule {
  height: 0;
  margin: 16px 0;
  border: 0;
  border-top: 1px solid var(--border);
}
.md__code {
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--sunken);
  border: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 0.92em;
  /* Long identifiers must not push the bubble wider than the column. */
  overflow-wrap: anywhere;
}

/* ---------- Code block ---------- */

.code-block {
  margin: 0 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--sunken);
  overflow: hidden;
}
.code-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 0 6px 0 10px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-3);
  font-size: var(--fs-xxs);
}
.code-block__lang {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.code-block__copy {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--r-xs);
  color: var(--text-3);
  font-size: var(--fs-xxs);
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.code-block__copy:hover {
  background: var(--hover);
  color: var(--text);
}
.code-block__body {
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.55;
  /* Wrapping code silently changes what it says, so it scrolls instead. */
  white-space: pre;
  tab-size: 2;
}

/* ---------- Diff ----------
   Adapted from AICSS (MIT, Copyright (c) 2026 AICSS); see components/aicss/LICENSE.
   A raised card: file and counts on top, then two line-number gutters split
   from the code by a hairline, a sign column, and an accent bar on the left of
   each changed line (solid for additions, hatched for deletions). Colours come
   from the theme, so it sits right on every palette. */

.diff {
  --diff-card: color-mix(in srgb, var(--bg), var(--lift-color) calc(var(--u) * 1.2));
  --diff-ring: color-mix(in srgb, var(--fg) 12%, transparent);
  --diff-line: var(--border);
  --diff-muted: var(--text-3);
  --diff-code: var(--text);
  /* Dark is the default theme; the light palette follows below. */
  --diff-kw: #ff7b72;
  --diff-str: #a5d6ff;
  --diff-fn: #d2a8ff;
  --diff-num: #79c0ff;
  --diff-cm: #8b949e;
  /* The gutters fold away when no line number is known (see FileDiff.tsx). */
  --diff-ln: 0px;
  margin: 0 0 8px;
  padding: 12px 16px 16px;
  border-radius: 12px;
  background: var(--diff-card);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--sink-color) 5%, transparent),
    0 2px 4px color-mix(in srgb, var(--sink-color) 2%, transparent),
    0 0 0 0.5px var(--diff-ring);
  overflow: hidden;
  font-family: var(--font-mono);
}
[data-theme='light'] .diff {
  --diff-card: var(--bg);
  --diff-ring: color-mix(in srgb, var(--fg) 8%, transparent);
  --diff-kw: #cf222e;
  --diff-str: #0a3069;
  --diff-fn: #8250df;
  --diff-num: #0550ae;
  --diff-cm: #6e7781;
}
.diff[data-numbered] {
  --diff-ln: 32px;
}
.diff__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -12px -16px 0;
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--diff-line);
  font-size: 12.5px;
}
.diff__file-wrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.diff__icon {
  display: block;
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--diff-muted);
}
.diff__file {
  overflow: hidden;
  color: var(--diff-code);
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* A long path keeps its file name and loses the front of the folders. */
  direction: rtl;
  text-align: left;
}
.diff__stat {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 12px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.diff__stat-add {
  color: var(--diff-add-fg);
}
.diff__stat-del {
  color: var(--diff-del-fg);
}
.diff__body {
  position: relative;
  max-height: 340px;
  margin: 0 -16px -16px;
  padding: 4px 0;
  overflow: auto;
  font-size: 12.5px;
  line-height: 20px;
  /* No horizontal bar: long lines scroll sideways on a trackpad, and a bar
     under every short diff was noise. */
  scrollbar-width: none;
}
.diff__body::-webkit-scrollbar:horizontal {
  display: none;
}
.diff__lines {
  position: relative;
  width: max-content;
  min-width: 100%;
}
/* The hairline between the gutters and the code, full height, on the inner
   track so it stays put while the body scrolls sideways. */
.diff__lines::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--diff-ln) * 2);
  z-index: 1;
  width: 0.5px;
  background: var(--diff-line);
  pointer-events: none;
}
.diff:not([data-numbered]) .diff__lines::before {
  display: none;
}
.diff__row {
  position: relative;
  display: grid;
  grid-template-columns: var(--diff-ln) var(--diff-ln) 18px 1fr;
  align-items: stretch;
}
.diff:not([data-numbered]) .diff__row {
  grid-template-columns: 0 0 22px 1fr;
}
.diff__ln,
.diff__sign {
  color: var(--diff-muted);
  font-size: 11px;
  user-select: none;
}
.diff__ln {
  overflow: hidden;
  padding: 0 7px;
  text-align: right;
}
.diff:not([data-numbered]) .diff__ln {
  padding: 0;
}
.diff__sign {
  text-align: center;
}
.diff:not([data-numbered]) .diff__sign {
  padding-left: 4px;
}
.diff__code {
  padding: 0 12px 0 8px;
  color: var(--diff-muted);
  white-space: pre;
}
/* Accent bar: solid for additions, hatched for deletions. */
.diff__row[data-kind='add']::before,
.diff__row[data-kind='del']::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
}
.diff__row[data-kind='add']::before {
  background: var(--diff-add-fg);
}
.diff__row[data-kind='del']::before {
  background: repeating-linear-gradient(45deg, var(--diff-del-fg) 0, var(--diff-del-fg) 1.5px, transparent 1.5px, transparent 3px);
}
.diff__row[data-kind='add'] {
  background: var(--diff-add-bg);
}
.diff__row[data-kind='del'] {
  background: var(--diff-del-bg);
}
.diff__row[data-kind='add'] .diff__sign,
.diff__row[data-kind='add'] .diff__ln--new {
  color: var(--diff-add-fg);
}
.diff__row[data-kind='del'] .diff__sign,
.diff__row[data-kind='del'] .diff__ln--old {
  color: var(--diff-del-fg);
}
.diff__row[data-kind='add'] .diff__code,
.diff__row[data-kind='del'] .diff__code {
  color: var(--diff-code);
}
.diff__code .tk-kw {
  color: var(--diff-kw);
}
.diff__code .tk-str {
  color: var(--diff-str);
}
.diff__code .tk-fn {
  color: var(--diff-fn);
}
.diff__code .tk-num {
  color: var(--diff-num);
}
.diff__code .tk-cm {
  color: var(--diff-cm);
}

/* ---------- Working marks: the dot matrix, and a sweep of light ----------
   Anything still happening shows one mark, the dot matrix (agent/Loaders.tsx):
   each dot runs the same keyframe from a delay its pattern gives it, so light
   moves through the grid as a ripple, a scanline, a sweep. The line naming
   the step has a slow, narrow sweep of light; nothing else moves. Both hold
   still under reduced motion. */

.dot-matrix {
  display: block;
  flex: none;
  overflow: visible;
  color: var(--text);
}
.dot-matrix circle {
  fill: currentColor;
  opacity: 0.16;
  animation: dm-pulse var(--dm-cycle) cubic-bezier(0.3, 0, 0.2, 1) infinite;
}
/* A head that lights at once and fades over a third of the cycle: in sequence
   the dots read as one point of light with a tail. */
@keyframes dm-pulse {
  0% {
    opacity: 1;
  }
  34% {
    opacity: 0.36;
  }
  62%,
  100% {
    opacity: 0.16;
  }
}
.dot-matrix circle[data-still] {
  animation: none;
}
.dot-matrix circle[data-still='hub'] {
  opacity: 0.5;
}
.dot-matrix[data-motion='wait'] circle {
  animation-name: dm-breathe;
  animation-timing-function: ease-in-out;
}
@keyframes dm-breathe {
  0%,
  100% {
    opacity: 0.22;
  }
  50% {
    opacity: 0.8;
  }
}

.step-shimmer {
  background-image: linear-gradient(
    90deg,
    var(--text-3) 0%,
    var(--text-3) 42%,
    var(--text-2) 50%,
    var(--text-3) 58%,
    var(--text-3) 100%
  );
  background-size: 300% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: step-shimmer 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.step-shimmer * {
  color: inherit;
}
@keyframes step-shimmer {
  from {
    background-position: 100% center;
  }
  to {
    background-position: 0% center;
  }
}

/* A reply that has started and has nothing to show yet. */
.loading-state {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  min-height: 30px;
  padding-left: 1px;
  color: var(--text-3);
  animation: loading-in 320ms var(--ease) both;
}
@keyframes loading-in {
  from {
    opacity: 0;
  }
}
.loading-state__icon {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
}
.loading-state__label {
  font-size: var(--fs-base);
}
.loading-state__clock {
  color: var(--text-4);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .dot-matrix circle {
    animation: none;
    opacity: var(--dm-rest, 0.16);
  }
  .step-shimmer {
    animation: none;
    background: none;
    color: var(--text-2);
  }
}
body[data-reduce-motion='on'] .dot-matrix circle {
  animation: none !important;
  opacity: var(--dm-rest, 0.16);
}
body[data-reduce-motion='on'] .step-shimmer {
  animation: none !important;
  background: none;
  color: var(--text-2);
}

/* File-type marks, shared by the edit cards and the edited-files card. */
.file-icon {
  display: block;
  flex: none;
  color: var(--fi, var(--text-3));
}
/* On white the brighter colours (the yellows, the light blue) want a little more weight. */
[data-theme='light'] .file-icon {
  color: color-mix(in srgb, var(--fi, var(--text-3)), #000 16%);
}

/* ---------- Tool call ----------
   A call is a quiet line of the reply, not a card: icon, what it did, and a
   chip naming what it did it to. Runs of calls fold into an activity line
   (below); a lone call shows as its own line. Under the pointer the icon
   turns into the chevron, so the row says it opens without a column of
   chevrons down every line. */

.tool {
  margin: 0;
  border-radius: var(--r-sm);
  white-space: normal;
  animation: tool-in var(--dur-spring) var(--spring-moderate) both;
}
@keyframes tool-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}
.tool__head {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  min-height: 30px;
  padding: 0 4px 0 1px;
  text-align: left;
  color: var(--text-2);
  font-size: var(--fs-base);
  transition: color var(--dur) var(--ease);
}
.tool__head:not([data-static]):hover {
  color: var(--text);
}
.tool__glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
}
.tool__head:not([data-static]):hover .tool__glyph {
  color: var(--text-2);
}
/* A thought being written: its brain breathes. */
.tool__icon[data-pulse],
.loading-state__icon {
  animation: think-pulse 1.6s ease-in-out infinite;
}
@keyframes think-pulse {
  50% {
    opacity: 0.35;
  }
}
.tool__icon,
.tool__chevron {
  grid-area: 1 / 1;
  transition:
    opacity 100ms var(--ease),
    transform 150ms var(--ease);
}
.tool__icon {
  display: grid;
  place-items: center;
}
.tool__chevron {
  color: var(--text-2);
  opacity: 0;
}
/* A running call and a thought being written keep their moving mark. */
.tool:not([data-status='running']):not([data-live]) > .tool__head:not([data-static]):hover .tool__icon,
.tool[data-open]:not([data-status='running']):not([data-live]) > .tool__head .tool__icon {
  opacity: 0;
}
.tool:not([data-status='running']):not([data-live]) > .tool__head:not([data-static]):hover .tool__chevron,
.tool[data-open]:not([data-status='running']):not([data-live]) > .tool__head .tool__chevron {
  opacity: 1;
}
.tool[data-open] > .tool__head .tool__chevron {
  transform: rotate(90deg);
}
.tool[data-status='error'] .tool__glyph,
.tool[data-status='denied'] .tool__glyph {
  color: var(--danger);
}
.tool__label {
  flex: none;
  color: inherit;
}
/* A file the call was about, by name: plain words, not code. */
.tool__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Past the call's words, the sign that it opens; it turns as it does. */
.tool__more {
  flex: none;
  color: var(--text-4);
  transition:
    transform 200ms var(--ease),
    color var(--dur) var(--ease);
}
.tool__head:hover .tool__more {
  color: var(--text-2);
}
.tool[data-open] .tool__more {
  transform: rotate(90deg);
}
.tool__detail {
  min-width: 0;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* What the call ran or looked for — a command, a pattern, a URL — as code. */
.tool__chip,
.step-card__cmd {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-xs);
  background: var(--hover);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.tool__head:hover .tool__chip,
.step-card__head:hover .step-card__cmd {
  color: var(--text);
}
.tool__range {
  flex: none;
  color: var(--text-4);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
/* What a call returned, hung off a hairline under its row. Panels open by
   growing to their height rather than appearing at full size. */
.tool__panel,
.step-card__panel {
  overflow: hidden;
  interpolate-size: allow-keywords;
  transition:
    height 220ms var(--ease),
    opacity 160ms var(--ease);
}
@starting-style {
  .tool__panel,
  .step-card__panel {
    height: 0;
    opacity: 0;
  }
}
/* What a call returned, in a box under its line, in line with its words. */
.tool__panel > div {
  margin: 2px 0 8px 25px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--code-bg);
}
.tool__output {
  margin: 0;
  max-height: 240px;
  overflow: auto;
  padding: 2px 4px 2px 0;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tool__panel .diff {
  margin: 4px 0 6px;
}
.tool__waiting {
  padding: 2px 0;
  font-size: var(--fs-xs);
}

/* ---------- Step rows: an edit, a command ----------
   Adapted from MIT and Apache-2.0 components; see components/agent/LICENSES.txt.
   Lines like the rest of the turn's steps — "Edited index.html +329 −63",
   "Ran npm test" — that open into a box under them: the diff, or what the
   command printed. A running command shows its output's tail there as it
   prints. */

.step-card {
  --card-line: var(--border);
  --card-head: color-mix(in srgb, var(--bg), var(--fg) 4%);
  --card-body: var(--code-bg);
}
[data-theme='light'] .step-card {
  --card-head: color-mix(in srgb, var(--bg), var(--fg) 3%);
  --card-body: var(--bg);
}
.step-card {
  margin: 0;
  white-space: normal;
  animation: tool-in var(--dur-spring) var(--spring-moderate) both;
}
.step-card__bar {
  display: flex;
  align-items: center;
  min-width: 0;
}
.step-card__head {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 30px;
  padding: 0 4px 0 1px;
  color: var(--text-2);
  font-size: var(--fs-base);
  text-align: left;
  transition: color var(--dur) var(--ease);
}
.step-card__head:not(:disabled):hover {
  color: var(--text);
}
.step-card__head:disabled {
  cursor: default;
}
.step-card__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
}
.step-card__head:not(:disabled):hover .step-card__icon {
  color: var(--text-2);
}
.step-card[data-status='error'] .step-card__icon,
.step-card[data-status='denied'] .step-card__icon {
  color: var(--danger);
}
.step-card__title {
  flex: none;
  color: inherit;
}
/* The file, underlined: it is a thing, and the hover card has its whole path. */
.step-card__file {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur) var(--ease);
}
.step-card__head:hover .step-card__file {
  text-decoration-color: currentColor;
}
/* Beside the line, under the pointer: open the file in Chat's code panel. */
.step-card__open {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-xs);
  color: var(--text-4);
  opacity: 0;
  transition:
    opacity var(--dur) var(--ease),
    color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}
.step-card__bar:hover .step-card__open,
.step-card__open:focus-visible {
  opacity: 1;
}
.step-card__open:hover {
  background: var(--hover);
  color: var(--text);
}
.step-card__stat {
  flex: none;
  display: inline-flex;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.step-card__note {
  flex: none;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.step-card__exit {
  flex: none;
  color: var(--diff-del-fg);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.step-card__chevron {
  flex: none;
  color: var(--text-4);
  transition:
    transform 200ms var(--ease),
    color var(--dur) var(--ease);
}
.step-card__head:hover .step-card__chevron {
  color: var(--text-2);
}
.step-card[data-open] .step-card__chevron {
  transform: rotate(90deg);
}
/* What the line opens into, in line with its words. */
.step-card__box {
  margin: 2px 0 8px 25px;
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  background: var(--card-body);
  overflow: hidden;
}
.step-card__message {
  margin: 0;
  max-height: 160px;
  overflow: auto;
  padding: 8px 10px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The diff sits flush in the box, without its own card around it. */
.edit-card__body {
  position: relative;
}
.edit-card__body[data-clipped] {
  max-height: 168px;
  overflow: hidden;
}
.step-card .diff {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.step-card .diff__body {
  max-height: 420px;
  margin: 0;
  padding: 5px 0;
}
.edit-card__body[data-clipped] .diff__body {
  max-height: none;
  overflow: hidden;
}
/* Folded: a fade over the last lines with "Show more"; open, a bar under them. */
.step-card__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 28px;
  border-top: 1px solid var(--card-line);
  color: var(--text-3);
  font-size: var(--fs-xxs);
  transition: color var(--dur) var(--ease);
}
.step-card__more:hover {
  color: var(--text);
}
.edit-card__body[data-clipped] .step-card__more {
  position: absolute;
  inset: auto 0 0;
  height: 56px;
  align-items: flex-end;
  padding-bottom: 7px;
  border-top: 0;
  background: linear-gradient(to bottom, transparent, var(--card-body) 80%);
}
.edit-card__body:not([data-clipped]) .step-card__more svg {
  transform: rotate(180deg);
}

/* A command's output: folded, its last lines; open, all of it, scrolling. */
.command-card__body {
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 17px;
}
.command-card__output {
  margin: 0;
  max-height: 84px;
  overflow: hidden;
  color: var(--text-3);
  font: inherit;
  font-size: 11.5px;
  line-height: 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.command-card__output[data-overflow='true']:not([data-open]) {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}
.command-card__output[data-open] {
  max-height: 340px;
  overflow-y: auto;
}

/* ---------- A turn's header: "Working for 18s" ---------- */

.turn-head {
  display: flex;
  align-items: center;
  margin: 0 0 10px;
  padding: 0 0 9px 1px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

/* ---------- Hover card: a step in full ---------- */

.peek-line {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.peek {
  position: fixed;
  z-index: 60;
  width: max-content;
  padding: 9px 12px 10px;
  border-radius: var(--r-lg);
  background: var(--surface-3);
  border: 0.5px solid var(--border-strong);
  box-shadow: var(--shadow-menu);
  pointer-events: none;
  animation: peek-in 160ms var(--ease) both;
}
@keyframes peek-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}
.peek__label {
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.peek__summary + .peek__label {
  margin-top: 7px;
}
.peek__summary {
  margin-top: 2px;
  color: var(--text);
  font-size: var(--fs-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.peek__raw {
  margin: 2px 0 0;
  max-height: 220px;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/*
 * The conversation's working parts: queued follow-ups, the context meter,
 * editing a message, find, the minimap of the user's messages, quoting a
 * selection, the picture viewer, and code blocks' colours and folds.
 */

/* ---- Context meter ------------------------------------------------ */

.context-meter {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  color: var(--text-3);
  flex: none;
  transition: background var(--dur) var(--ease);
}
.context-meter:hover,
.context-meter[data-open] {
  background: var(--hover);
}
.context-meter svg {
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
}
.context-meter circle {
  fill: none;
  stroke-width: 2.4;
}
.context-meter__track {
  stroke: var(--border);
}
.context-meter__fill {
  stroke: var(--text-2);
  stroke-linecap: round;
  transition: stroke-dashoffset 500ms var(--ease), stroke var(--dur) var(--ease);
}
.context-meter[data-full] .context-meter__fill {
  stroke: var(--warn, #f0883e);
}
@media (prefers-reduced-motion: reduce) {
  .context-meter__fill {
    transition: none;
  }
}

.context-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
}
.context-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--fs-xs);
  color: var(--text-2);
  font-weight: 500;
}
.context-panel__numbers {
  color: var(--text-3);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.context-panel__bar {
  position: relative;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--hover-strong);
}
.context-panel__bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--text-2);
}
.context-panel__bar > span[data-full] {
  background: var(--warn, #f0883e);
}
/* Where summarizing starts. */
.context-panel__bar > i {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 1.5px;
  border-radius: 1px;
  background: var(--text-2);
}
.context-panel__note {
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

/* ---- Queued follow-ups -------------------------------------------- */

.queued {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  padding: 6px;
  animation: queued-in var(--dur-spring) var(--spring-moderate);
}
@keyframes queued-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
.queued__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 6px 4px;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.queued__resume {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--hover-strong);
  color: var(--text);
  font-size: var(--fs-xs);
}
.queued__resume:hover {
  background: var(--active);
}
.queued__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 168px;
  overflow-y: auto;
}
.queued__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 4px 0 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.queued__row:hover {
  background: var(--hover);
}
.queued__icon {
  flex: none;
  color: var(--text-3);
}
.queued__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.queued__files {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.queued__actions {
  display: flex;
  gap: 1px;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.queued__row:hover .queued__actions,
.queued__row:focus-within .queued__actions {
  opacity: 1;
}
.queued__btn {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--text-2);
}
.queued__btn:hover {
  background: var(--hover-strong);
  color: var(--text);
}

.composer__queue {
  color: var(--text);
}

/* ---- Editing a message -------------------------------------------- */

.composer-editing {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 0 4px 0 10px;
  min-height: 30px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.composer-editing > svg {
  flex: none;
  color: var(--accent);
}
.composer-editing > span {
  flex: 1;
  min-width: 0;
}
.composer-editing__cancel {
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  color: var(--text);
  font-size: var(--fs-xs);
}
.composer-editing__cancel:hover {
  background: var(--hover-strong);
}
.composer[data-editing] {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---- The user's messages ------------------------------------------ */

.msg--user[data-folded] .msg-user__body {
  max-height: calc(1.5em * 9);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2em), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2em), transparent);
}
.thread[data-finding] .msg--user[data-folded] .msg-user__body {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.msg-user__more {
  display: block;
  margin: 4px 0 0 auto;
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.msg-user__more:hover {
  color: var(--text);
}

.msg-user__actions {
  display: flex;
  gap: 2px;
  margin-top: -2px;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.msg-row:hover .msg-user__actions,
.msg-user__actions:focus-within {
  opacity: 1;
}
.msg-user__action {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--text-3);
}
.msg-user__action:hover {
  background: var(--hover);
  color: var(--text);
}

/* ---- Find in chat ------------------------------------------------- */

.find-bar {
  position: absolute;
  top: calc(var(--titlebar-h) + var(--sidebar-gap) + 8px);
  /* Clear of the minimap down the right edge. */
  right: 32px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 2px;
  width: min(340px, calc(100% - 32px));
  height: 36px;
  padding: 0 4px 0 10px;
  border-radius: var(--r-lg);
  background: var(--menu-bg);
  -webkit-backdrop-filter: var(--frost);
  backdrop-filter: var(--frost);
  box-shadow: var(--shadow-menu);
  animation: find-in var(--dur-spring) var(--spring-moderate);
}
@keyframes find-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.find-bar__icon {
  flex: none;
  color: var(--text-3);
}
.find-bar__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 6px;
  background: none;
  border: 0;
  outline: none;
  color: var(--text);
  font-size: var(--fs-sm);
}
.find-bar__count {
  flex: none;
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  padding-right: 4px;
}
.find-bar__btn {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--text-2);
}
.find-bar__btn:hover:not(:disabled) {
  background: var(--hover-strong);
  color: var(--text);
}
.find-bar__btn:disabled {
  opacity: 0.4;
}

::highlight(chat-find) {
  background-color: color-mix(in srgb, #f5c400 34%, transparent);
  color: inherit;
}
::highlight(chat-find-current) {
  background-color: #f5c400;
  color: #111111;
}
/* Rows off screen skip layout (chat.css); a match in one must still have a place to scroll to. */
.thread[data-finding] .thread__inner > .msg-row {
  content-visibility: visible;
}

/* ---- Minimap of the user's messages ------------------------------- */

.minimap {
  position: absolute;
  right: 6px;
  z-index: 2;
  width: 18px;
}
.minimap__mark {
  position: absolute;
  right: 3px;
  width: 10px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: var(--text-4);
  opacity: 0.55;
  transition:
    width var(--dur) var(--ease),
    opacity var(--dur) var(--ease),
    background var(--dur) var(--ease);
}
/* A taller target than the mark itself. */
.minimap__mark::before {
  content: '';
  position: absolute;
  inset: -4px -4px;
}
.minimap__mark:hover,
.minimap__mark:focus-visible {
  width: 14px;
  opacity: 1;
  background: var(--text-2);
}
.minimap__mark[data-active] {
  width: 14px;
  opacity: 1;
  background: var(--text);
}
.minimap__peek {
  position: absolute;
  right: 24px;
  width: max-content;
  max-width: 260px;
  padding: 6px 10px;
  border-radius: var(--r-md);
  background: var(--menu-bg);
  -webkit-backdrop-filter: var(--frost);
  backdrop-filter: var(--frost);
  box-shadow: var(--shadow-menu);
  color: var(--text);
  font-size: var(--fs-xs);
  line-height: 1.4;
  transform: translateY(-50%);
  pointer-events: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- Quote a selection -------------------------------------------- */

.quote-pop {
  position: fixed;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--menu-bg);
  -webkit-backdrop-filter: var(--frost);
  backdrop-filter: var(--frost);
  box-shadow: var(--shadow-menu);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 500;
  transform: translate(-50%, calc(-100% - 8px));
  animation: quote-in var(--dur-spring-fast) var(--spring-fast);
}
.quote-pop:hover:not(:disabled) {
  background: var(--surface-4);
}
.quote-pop:disabled {
  color: var(--text-3);
}
@keyframes quote-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-100% - 4px)) scale(0.96);
  }
}

/* ---- Picture viewer ----------------------------------------------- */

.image-viewer {
  position: fixed;
  inset: 0;
  /* Over popovers and menus (controls.css, 100–101). */
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 64px 72px 40px;
  background: color-mix(in srgb, #000 82%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: viewer-in var(--dur-spring) var(--spring-moderate);
}
@keyframes viewer-in {
  from {
    opacity: 0;
  }
}
.image-viewer__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.5);
  cursor: zoom-in;
}
/* Clicked: its own size, scrolling if it's bigger than the window. */
.image-viewer__img[data-zoomed] {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}
.image-viewer:has(.image-viewer__img[data-zoomed]) {
  overflow: auto;
  place-items: start center;
}
.image-viewer__bar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 52px;
  padding: 0 12px 0 calc(var(--window-controls-left) + 8px);
  color: #f5f5f5;
}
.image-viewer__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-sm);
}
.image-viewer__count {
  margin-left: 10px;
  color: rgb(255 255 255 / 0.55);
  font-variant-numeric: tabular-nums;
}
.image-viewer__btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  color: rgb(255 255 255 / 0.8);
}
.image-viewer__btn:hover {
  background: rgb(255 255 255 / 0.12);
  color: #fff;
}
.image-viewer__step {
  position: fixed;
  top: 50%;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  transform: translateY(-50%);
}
.image-viewer__step:hover {
  background: rgb(255 255 255 / 0.2);
}
.image-viewer__step--prev {
  left: 16px;
}
.image-viewer__step--next {
  right: 16px;
}

/* ---- Code blocks: tools, folding, colours -------------------------- */

.code-block__tools {
  display: flex;
  align-items: center;
  gap: 2px;
}
.code-block__tool {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--text-3);
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.code-block__tool:hover {
  background: var(--hover);
  color: var(--text);
}
.code-block__tool[data-on] {
  background: var(--hover-strong);
  color: var(--text);
}
.code-block__body[data-wrapped] {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.code-block[data-folded] .code-block__body {
  overflow-y: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3em), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 3em), transparent);
}
.code-block__fold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 30px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-3);
  font-size: var(--fs-xxs);
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.code-block__fold:hover {
  background: var(--hover);
  color: var(--text);
}
.code-block__fold svg[data-up] {
  transform: rotate(180deg);
}

/* Dark by default; light below. */
.code-block {
  --tok-comment: #8b949e;
  --tok-keyword: #ff7b72;
  --tok-string: #a5d6ff;
  --tok-number: #79c0ff;
  --tok-func: #d2a8ff;
  --tok-type: #ffa657;
  --tok-tag: #7ee787;
  --tok-attr: #79c0ff;
  --tok-meta: #ffa657;
}
[data-theme='light'] .code-block {
  --tok-comment: #6e7781;
  --tok-keyword: #cf222e;
  --tok-string: #0a3069;
  --tok-number: #0550ae;
  --tok-func: #8250df;
  --tok-type: #953800;
  --tok-tag: #116329;
  --tok-attr: #0550ae;
  --tok-meta: #953800;
}
.tok-comment {
  color: var(--tok-comment);
  font-style: italic;
}
.tok-keyword {
  color: var(--tok-keyword);
}
.tok-string {
  color: var(--tok-string);
}
.tok-number,
.tok-literal {
  color: var(--tok-number);
}
.tok-func {
  color: var(--tok-func);
}
.tok-type {
  color: var(--tok-type);
}
.tok-tag {
  color: var(--tok-tag);
}
.tok-attr {
  color: var(--tok-attr);
}
.tok-meta {
  color: var(--tok-meta);
}
.tok-add {
  color: var(--diff-add-fg);
  background: var(--diff-add-bg);
}
.tok-del {
  color: var(--diff-del-fg);
  background: var(--diff-del-bg);
}

/* ---- Callouts: > [!NOTE] and kin ---------------------------------- */

.md__alert {
  --alert: var(--accent);
  margin: 0 0 10px;
  padding: 8px 12px 9px;
  border-left: 3px solid var(--alert);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: color-mix(in srgb, var(--alert) 9%, transparent);
}
.md__alert[data-kind='tip'] {
  --alert: var(--diff-add-fg);
}
.md__alert[data-kind='important'] {
  --alert: #a371f7;
}
.md__alert[data-kind='warning'] {
  --alert: #d29922;
}
.md__alert[data-kind='caution'] {
  --alert: var(--danger);
}
.md__alert-title {
  color: var(--alert);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.md__alert-body {
  margin-top: 2px;
}

/* ---------------- The work log (chat/WorkRows.tsx) ----------------
   Between a reply's sentences, what the agent did: each run of calls a quiet
   line ("Read 2 files and ran 1 command") that opens into the calls, and
   each thought a line of its own. Muted, one size with the reply, an icon in
   a column of its own so the words line up down the turn. */

.wl {
  margin: 6px 0;
  white-space: normal;
}
.wl + .wl {
  margin-top: -2px;
}
.wl-row {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 26px;
  margin-left: -3px;
  padding: 0 6px 0 3px;
  border-radius: var(--r-xs);
  color: var(--text-3);
  font-size: var(--fs-base);
  line-height: 1.6;
  text-align: left;
  transition: color var(--dur) var(--ease);
}
button.wl-row:not([data-static]):hover,
.wl-row[aria-expanded='true'] {
  color: var(--text-2);
}
.wl-row[data-static] {
  cursor: default;
}
.wl-row:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
.wl-row__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--text-4);
}
.wl-row__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wl-row__failed {
  flex: none;
  color: color-mix(in srgb, var(--danger), var(--text-3) 30%);
}
.wl-row__failed[data-skipped] {
  color: var(--text-3);
}
.wl-row__failed::before {
  content: '·';
  margin-right: 6px;
  color: var(--text-4);
}
.wl-row__chev {
  flex: none;
  color: var(--text-4);
  opacity: 0;
  transition:
    opacity var(--dur) var(--ease),
    transform 200ms var(--ease);
}
.wl-row:hover .wl-row__chev,
.wl-row:focus-visible .wl-row__chev,
.wl-row[aria-expanded='true'] .wl-row__chev {
  opacity: 1;
}
.wl-row[aria-expanded='true'] .wl-row__chev {
  transform: rotate(90deg);
}
/* A thought's line is a sentence: it wraps (four lines at most) under its icon. */
.wl-row--wrap {
  align-items: flex-start;
}
.wl-row--wrap .wl-row__icon {
  height: calc(var(--fs-base) * 1.6);
}
.wl-row--wrap .wl-row__label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  white-space: normal;
}
.wl-row--wrap .wl-row__chev {
  margin-top: calc((var(--fs-base) * 1.6 - 14px) / 2);
}
/* What a line opens into: the calls' own rows, or the reasoning, under the words. */
.wl__calls {
  display: flex;
  flex-direction: column;
  margin: 2px 0 4px 23px;
  animation: wl-open 200ms var(--ease) both;
}
.wl__thought {
  margin: 2px 0 6px 9px;
  padding: 0 0 0 15px;
  border-left: 1px solid var(--border-soft);
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
  animation: wl-open 200ms var(--ease) both;
}
.wl__thought strong {
  color: var(--text-2);
}
/* A plan's steps, under its line. */
.wl__plan {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 2px 0 6px 9px;
  padding: 0 0 0 15px;
  border-left: 1px solid var(--border-soft);
  list-style: none;
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
  animation: wl-open 200ms var(--ease) both;
}
.wl__plan li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.wl__plan li > svg {
  flex: none;
  position: relative;
  top: 2px;
  color: var(--text-4);
}
.wl__plan li[data-status='done'] > svg {
  color: var(--text-3);
}
@keyframes wl-open {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wl__calls,
  .wl__plan,
  .wl__thought {
    animation: none;
  }
}

/* A reply the user stopped: said once, quietly, on a hairline across the turn. */
.msg__stopped {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  color: color-mix(in srgb, var(--danger), var(--text-2) 25%);
  font-size: var(--fs-sm);
}
.msg__stopped::before,
.msg__stopped::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}
.msg__stopped::before {
  margin-right: 6px;
}
.msg__stopped::after {
  margin-left: 6px;
}
.msg__stopped-why {
  color: var(--text-3);
}
/*
 * Chat's coding controls (components/chatCode): the top bar's Open, scripts,
 * terminal and Git; the branch pill above the message box; the terminal
 * drawer under the conversation; find in the project; the code panel's Git
 * pane. Colours come from the theme tokens, so both themes follow.
 */

/* ---------------- Split buttons (scripts, Open, Git) ----------------
   Flat like the icon buttons beside them: nothing drawn at rest, a soft fill
   under the pointer, and the menu half a narrow chevron that a hairline
   parts from the button only while it is hovered. */

.split-btn {
  display: inline-flex;
  flex: none;
  align-items: stretch;
  height: 28px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-sm);
  -webkit-app-region: no-drag;
  transition: background-color var(--dur) var(--ease);
}
.split-btn:hover,
.split-btn[data-open] {
  background: var(--hover);
}
.split-btn__main,
.split-btn__more {
  display: inline-flex;
  align-items: center;
  color: inherit;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.split-btn__main {
  gap: 6px;
  padding: 0 7px;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  white-space: nowrap;
}
.split-btn--solo .split-btn__main {
  border-radius: var(--r-sm);
}
/* The icon alone (the dock's file bar). */
.split-btn[data-icon] .split-btn__main {
  padding: 0 6px;
}
.split-btn__more {
  justify-content: center;
  width: 16px;
  margin-left: -2px;
  border-left: 1px solid transparent;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-4);
}
.split-btn:hover .split-btn__more,
.split-btn[data-open] .split-btn__more {
  border-left-color: var(--border-soft);
  color: var(--text-2);
}
.split-btn__main:hover:not(:disabled),
.split-btn__more:hover,
.split-btn[data-open] .split-btn__more {
  background: var(--hover);
  color: var(--text);
}
.split-btn__main:disabled {
  color: var(--text-3);
  cursor: default;
}
.split-btn__main:focus-visible,
.split-btn__more:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.split-btn__label {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Git: the next step's label, what is uncommitted, what is waiting to push. */
.git-actions__stat {
  font-size: var(--fs-xxs);
  font-weight: 500;
}
.git-actions__count {
  min-width: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--hover-strong);
  color: var(--text-2);
  font-size: var(--fs-xxs);
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  text-align: center;
}
.git-actions__branch {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.git-actions__upstream {
  min-width: 0;
  overflow: hidden;
  color: var(--text-4);
  text-overflow: ellipsis;
}

.git-dialog {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.git-dialog__branch {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.git-dialog__branch > span:first-of-type {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.git-dialog__into {
  color: var(--text-3);
}
.git-dialog__base {
  width: auto;
  height: 28px;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.git-dialog__stat {
  margin-left: auto;
  font-size: var(--fs-xs);
}
.git-dialog__message {
  min-height: 72px;
  resize: vertical;
}
.git-dialog__files {
  max-height: 180px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
.git-dialog__file {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 6px;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
}
.git-dialog__file:hover {
  background: var(--hover);
}
.git-dialog__mark {
  flex: none;
  width: 14px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  font-weight: 600;
  text-align: center;
}
.git-dialog__mark[data-status='added'] {
  color: var(--diff-add-fg);
}
.git-dialog__mark[data-status='deleted'] {
  color: var(--diff-del-fg);
}
.git-dialog__mark[data-status='renamed'] {
  color: var(--accent);
}
.git-dialog__path {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.git-dialog__muted {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.git-dialog__hint {
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-xxs);
}
.git-dialog__warn {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, #e3a008 14%, transparent);
  color: var(--text-2);
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.git-dialog__push {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  cursor: pointer;
}

/* An app's own icon, from the system. */
.target-app {
  display: block;
  flex: none;
  margin: -1.5px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* An editor's initials on a tile, where the system gives no icon. */
.target-tile {
  display: inline-grid;
  flex: none;
  place-items: center;
  border-radius: 4px;
  background: color-mix(in srgb, var(--tile, var(--text-3)) 22%, var(--surface-3));
  color: color-mix(in srgb, var(--tile, var(--text)) 70%, var(--text));
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--tile, var(--text-3)) 45%, transparent);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.target-tile[data-target^='vscode'],
.target-tile[data-target='vscodium'] {
  --tile: #3b8eea;
}
.target-tile[data-target='cursor'],
.target-tile[data-target='nova'] {
  --tile: #9a9aa3;
}
.target-tile[data-target='windsurf'] {
  --tile: #2bb6a3;
}
.target-tile[data-target='zed'],
.target-tile[data-target='xcode'] {
  --tile: #4f7cff;
}
.target-tile[data-target='sublime'] {
  --tile: #ff9800;
}
.target-tile[data-target='idea'],
.target-tile[data-target='webstorm'],
.target-tile[data-target='pycharm'],
.target-tile[data-target='goland'],
.target-tile[data-target='rustrover'],
.target-tile[data-target='clion'],
.target-tile[data-target='phpstorm'],
.target-tile[data-target='rider'] {
  --tile: #c45cff;
}
.target-tile[data-target='android-studio'] {
  --tile: #3ddc84;
}


/* ---------------- Scripts ---------------- */

.script-row {
  position: relative;
}
.script-row .menu__item {
  padding-right: 34px;
}
.script-row .menu__item-desc {
  font-family: var(--font-mono);
  font-size: 11px;
}
.script-row__edit {
  position: absolute;
  top: 50%;
  right: 6px;
  translate: 0 -50%;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.script-row:hover .script-row__edit,
.script-row__edit:focus-visible {
  opacity: 1;
}

.script-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.script-form__lede {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.script-form__lede code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.script-form__suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.script-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 0.5px var(--border);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11px;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.script-chip:hover {
  background: var(--hover);
  color: var(--text);
}
.script-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.script-form__field > span {
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.script-form__command {
  font-family: var(--font-mono);
}
.script-form__icons {
  display: flex;
  gap: 6px;
}
.script-form__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 0.5px var(--border);
  color: var(--text-2);
}
.script-form__icon:hover {
  background: var(--hover);
  color: var(--text);
}
.script-form__icon[aria-checked='true'] {
  box-shadow: inset 0 0 0 1.5px var(--accent);
  color: var(--text);
}
.script-form__tick {
  position: absolute;
  top: -4px;
  right: -4px;
  padding: 1px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent, #fff);
}

/* ---------------- Branch pill ---------------- */

.composer-pill--branch .composer-pill__label {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.composer__above .composer-pill--branch {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.composer__above .composer-pill--branch:hover,
.composer__above .composer-pill--branch[data-open] {
  background: var(--surface-3);
}
.branch-sync {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--text-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.branch-menu__list {
  max-height: 300px;
  overflow-y: auto;
}
.branch-menu .menu__item-title {
  font-family: var(--font-mono);
  font-size: 12px;
}
.menu__note {
  margin: 2px 6px 6px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--warning, #f5a524) 12%, transparent);
  color: var(--text-2);
  font-size: var(--fs-xs);
  line-height: 1.4;
}
.menu__empty .spinner {
  vertical-align: -2px;
  margin-right: 4px;
}

/* The terminal drawer and the dock's terminals are in dock.css. */

/* ---------------- Find in project ---------------- */

.code-search__scrim {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  justify-content: center;
  padding: 12vh 16px 16px;
  background: color-mix(in srgb, #000 22%, transparent);
  animation: code-search-fade 160ms var(--ease) both;
}
@keyframes code-search-fade {
  from {
    opacity: 0;
  }
}
.code-search {
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  max-height: min(560px, 76vh);
  border-radius: var(--r-lg);
  /* Solid, not the menus' frosted glass: lines of code over a busy page don't read. */
  background: var(--surface-2);
  box-shadow:
    0 0 0 0.5px var(--border-strong),
    var(--shadow-menu, 0 24px 60px -20px rgb(0 0 0 / 0.5));
  overflow: hidden;
  animation: code-search-in 220ms var(--spring-moderate, var(--ease)) both;
}
@keyframes code-search-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
  }
}
.code-search__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 46px;
  padding: 0 8px 0 14px;
  border-bottom: 0.5px solid var(--border);
}
.code-search__glyph {
  flex: none;
  color: var(--text-3);
}
.code-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin-left: 6px;
  border: 0;
  background: none;
  color: var(--text);
  font-size: var(--fs-base);
  outline: none;
}
.code-search__input::placeholder {
  color: var(--text-3);
}
.code-search__opt {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  color: var(--text-3);
}
.code-search__opt:hover {
  background: var(--hover);
  color: var(--text);
}
.code-search__opt[aria-pressed='true'] {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 60%, transparent);
}
.code-search__summary {
  flex: none;
  padding: 7px 16px 3px;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.code-search__results {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 6px 8px;
}
.code-search__results:empty {
  display: none;
}
.code-search__file + .code-search__file {
  margin-top: 6px;
}
.code-search__file-head {
  position: sticky;
  top: -4px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 8px;
  background: var(--surface-2);
  font-size: var(--fs-sm);
}
.code-search__file-name {
  color: var(--text);
  font-weight: 500;
}
.code-search__file-dir {
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  text-align: left;
}
.code-search__file-count {
  margin-left: auto;
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--hover);
  color: var(--text-2);
  font-size: var(--fs-xxs);
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 16px;
}
.code-search__hit {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 3px 8px 3px 10px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: left;
}
.code-search__hit[data-current] {
  background: var(--hover);
  color: var(--text);
}
.code-search__ln {
  flex: none;
  min-width: 3ch;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.code-search__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}
.code-search__text mark {
  border-radius: 2px;
  background: color-mix(in srgb, #f5c400 38%, transparent);
  color: inherit;
}
.code-search__foot {
  flex: none;
  display: flex;
  gap: 14px;
  padding: 7px 14px;
  border-top: 0.5px solid var(--border-soft);
  color: var(--text-3);
  font-size: var(--fs-xxs);
}
.code-search__foot kbd {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  margin-right: 2px;
  padding: 0 3px;
  border-radius: 4px;
  background: var(--hover);
  font-family: inherit;
  font-size: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .code-search,
  .code-search__scrim {
    animation: none;
  }
}

/* ---------------- Paths in replies ---------------- */

/* A file in a reply: a chip with the file's mark, edged in the accent so it reads as something to open. */
.md__code.md__file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  vertical-align: bottom;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
.md__code.md__file:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--sunken));
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
}
.md__file-icon {
  display: inline-flex;
  margin-left: -1px;
}
.md__file--text {
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text-3) 55%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2.5px;
  transition: text-decoration-color var(--dur) var(--ease);
}
.md__file--text:hover {
  text-decoration-color: currentColor;
}

/* ---------------- HTML preview ---------------- */

.code-block__tool--label {
  display: inline-flex;
  gap: 5px;
  width: auto;
  padding: 0 7px;
  font-size: var(--fs-xs);
}
.html-preview__scrim {
  position: fixed;
  inset: 0;
  z-index: 115;
  display: grid;
  place-items: center;
  padding: 28px;
  background: color-mix(in srgb, #000 40%, transparent);
  animation: code-search-fade 160ms var(--ease) both;
}
.html-preview {
  display: flex;
  flex-direction: column;
  width: min(1180px, 100%);
  height: min(820px, 100%);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow:
    0 0 0 0.5px var(--border-strong),
    var(--shadow-menu, 0 24px 60px -20px rgb(0 0 0 / 0.5));
  overflow: hidden;
  animation: code-search-in 220ms var(--spring-moderate, var(--ease)) both;
}
.html-preview__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 8px 0 16px;
  border-bottom: 0.5px solid var(--border);
}
.html-preview__title {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.html-preview__note {
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.html-preview__sizes {
  display: flex;
  gap: 2px;
  margin-left: auto;
  padding: 2px;
  border-radius: var(--r-sm);
  background: var(--hover);
}
.html-preview__size {
  display: grid;
  place-items: center;
  width: 26px;
  height: 22px;
  border-radius: calc(var(--r-sm) - 2px);
  color: var(--text-3);
}
.html-preview__size[aria-checked='true'] {
  background: var(--surface-4, var(--surface-3));
  color: var(--text);
}
.html-preview__stage {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  padding: 0;
  background: repeating-conic-gradient(var(--hover) 0 25%, transparent 0 50%) 0 0 / 16px 16px;
  overflow: auto;
}
.html-preview__frame {
  max-width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  transition: width 260ms var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .html-preview,
  .html-preview__scrim {
    animation: none;
  }
}

/* A narrow window: the scripts and Open buttons keep their icons and lose
   their words first, then Git its counts, then its word, so the top bar's
   tools fit beside the mode switch. */
@container main (max-width: 1500px) {
  .split-btn:not(.git-actions) .split-btn__main > span:not(.target-tile) {
    display: none;
  }
  .split-btn:not(.git-actions) .split-btn__main {
    padding: 0 7px;
  }
}
@container main (max-width: 1240px) {
  .git-actions__stat,
  .git-actions__count {
    display: none;
  }
}
@container main (max-width: 1080px) {
  .git-actions .split-btn__main > span {
    display: none;
  }
  .git-actions .split-btn__main {
    padding: 0 7px;
  }
}

/* ---------------- The workspace card (chatCode/WorkspaceCard.tsx) ----------------
   Beside a conversation where there is room, over it where there isn't: the
   folder, Open, the scripts; then the branch, the next Git step, the changes.
   Rows read like a menu's: an icon, the words, a split chevron. */

.ws-card {
  --ws-w: 252px;
  position: absolute;
  top: calc(var(--titlebar-h) + var(--sidebar-gap) + 6px);
  right: 16px;
  z-index: 5;
  width: var(--ws-w);
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-2), transparent 6%);
  -webkit-backdrop-filter: var(--frost);
  backdrop-filter: var(--frost);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--shadow-ink) 18%, transparent);
  animation: ws-card-in 220ms var(--ease) both;
}
[data-theme='light'] .ws-card {
  background: color-mix(in srgb, var(--bg), transparent 4%);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.08);
}
.ws-card[data-mode='over'] {
  z-index: 30;
  box-shadow: var(--shadow-menu);
}
@keyframes ws-card-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.985);
  }
}
.ws-card__part {
  display: flex;
  flex-direction: column;
  padding: 2px 0;
}
.ws-card__part + .ws-card__part {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border-soft);
}

.ws-row,
.ws-row__main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border-radius: 14px;
  color: var(--text);
  font-size: var(--fs-base);
  text-align: left;
  transition: background-color var(--dur) var(--ease);
}
.ws-row {
  width: 100%;
}
button.ws-row:hover,
.ws-row[data-open],
.ws-row__main:hover:not(:disabled) {
  background: var(--hover);
}
.ws-row:focus-visible,
.ws-row__main:focus-visible,
.ws-row__more:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.ws-row--split {
  display: flex;
  gap: 0;
  padding: 0;
}
.ws-row--split:hover,
.ws-row--split[data-open] {
  background: none;
}
.ws-row--split .ws-row__main {
  flex: 1;
  border-radius: 14px 4px 4px 14px;
}
.ws-row__main:disabled {
  color: var(--text-3);
  cursor: default;
}
.ws-row__more {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 34px;
  border-radius: 4px 14px 14px 4px;
  color: var(--text-3);
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.ws-row__more::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 1px;
  background: color-mix(in srgb, var(--fg) 14%, transparent);
}
.ws-row__more:hover,
.ws-row--split[data-open] .ws-row__more {
  background: var(--hover);
  color: var(--text);
}
.ws-row__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  color: var(--text-2);
}
.ws-row__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-row__meta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
}
.ws-row__chev {
  flex: none;
  color: var(--text-3);
}
.ws-row-wrap {
  display: flex;
}

/* Beside the conversation: the thread and the message box centre in what is left. */
.thread[data-card],
.composer-dock[data-card] {
  padding-right: calc(252px + 32px);
}
.composer-dock[data-card] > .thread-jump {
  margin-right: 0;
}
/* What floats over the thread's right edge keeps to the left of the card:
   the find bar sat on the card's folder row. */
.main:has(> .thread[data-card]) > .find-bar {
  right: calc(16px + var(--ws-card-w) + 12px);
  width: min(340px, calc(100% - var(--ws-card-w) - 60px));
}
.main:has(> .thread[data-card]) > .minimap {
  right: calc(16px + var(--ws-card-w) + 6px);
}
.main:has(> .thread[data-card]) {
  --ws-card-w: 252px;
}

@media (prefers-reduced-motion: reduce) {
  .ws-card {
    animation: none;
  }
}
/* Chat's diffs (chatCode/diff/DiffCard.tsx) and the code panel's Changes pane
   (chatCode/ChangesPane.tsx). A file is a card: a header that sticks while its
   file scrolls past, then the lines, a changed one tinted and barred in the
   gutter, the words that changed inside it marked a step stronger. */

/* ---------------------------------------------------------------- counts */

.dstat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dstat__add {
  color: var(--diff-add-fg);
}
.dstat__del {
  color: var(--diff-del-fg);
}

/* ------------------------------------------------------------------ card */

.dv {
  --dv-bg: var(--ide-editor-bg, var(--code-bg));
  --dv-head: var(--ide-bg, var(--surface-1));
  --dv-border: color-mix(in srgb, var(--fg) 8%, transparent);
  --dv-add: #3fb950;
  --dv-del: #f85149;
  --dv-add-row: color-mix(in srgb, var(--dv-bg) 89%, var(--dv-add));
  --dv-add-num: color-mix(in srgb, var(--dv-bg) 82%, var(--dv-add));
  --dv-add-em: color-mix(in srgb, var(--dv-bg) 70%, var(--dv-add));
  --dv-del-row: color-mix(in srgb, var(--dv-bg) 89%, var(--dv-del));
  --dv-del-num: color-mix(in srgb, var(--dv-bg) 82%, var(--dv-del));
  --dv-del-em: color-mix(in srgb, var(--dv-bg) 70%, var(--dv-del));
  --dv-hover: color-mix(in srgb, var(--dv-bg) 95%, var(--fg));
  --dv-fold: color-mix(in srgb, var(--dv-bg) 94%, var(--fg));
  --dv-fold-strong: color-mix(in srgb, var(--dv-bg) 89%, var(--fg));
  --dv-num: color-mix(in srgb, var(--fg) 34%, var(--dv-bg));
  --dv-line: 20px;
  --tok-comment: #8b949e;
  --tok-keyword: #ff7b72;
  --tok-string: #a5d6ff;
  --tok-number: #79c0ff;
  --tok-func: #d2a8ff;
  --tok-type: #ffa657;
  --tok-tag: #7ee787;
  --tok-attr: #79c0ff;
  --tok-meta: #ffa657;
  border: 1px solid var(--dv-border);
  border-radius: 10px;
  background: var(--dv-bg);
  overflow: clip;
  transition: box-shadow 260ms var(--ease);
}
[data-theme='light'] .dv {
  --dv-add: #1f883d;
  --dv-del: #cf222e;
  --dv-add-row: color-mix(in srgb, var(--dv-bg) 91%, var(--dv-add));
  --dv-add-num: color-mix(in srgb, var(--dv-bg) 84%, var(--dv-add));
  --dv-add-em: color-mix(in srgb, var(--dv-bg) 76%, var(--dv-add));
  --dv-del-row: color-mix(in srgb, var(--dv-bg) 92%, var(--dv-del));
  --dv-del-num: color-mix(in srgb, var(--dv-bg) 85%, var(--dv-del));
  --dv-del-em: color-mix(in srgb, var(--dv-bg) 78%, var(--dv-del));
  --dv-hover: color-mix(in srgb, var(--dv-bg) 97%, var(--fg));
  --dv-fold: color-mix(in srgb, var(--dv-bg) 95.5%, var(--fg));
  --dv-fold-strong: color-mix(in srgb, var(--dv-bg) 92%, var(--fg));
  --dv-num: color-mix(in srgb, var(--fg) 40%, var(--dv-bg));
  --tok-comment: #6e7781;
  --tok-keyword: #cf222e;
  --tok-string: #0a3069;
  --tok-number: #0550ae;
  --tok-func: #8250df;
  --tok-type: #953800;
  --tok-tag: #116329;
  --tok-attr: #0550ae;
  --tok-meta: #953800;
}
.dv[data-flash] {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
}

.dv__head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 36px;
  padding: 0 6px 0 11px;
  border-bottom: 1px solid var(--dv-border);
  background: var(--dv-head);
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
  user-select: none;
}
.dv[data-collapsed] .dv__head {
  border-bottom-color: transparent;
}
.dv__head:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.dv__icon {
  flex: none;
  display: inline-flex;
  width: 16px;
  justify-content: center;
  color: var(--text-2);
  opacity: 0.85;
}
.dv__title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
}
.dv__name {
  flex: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.dv__name[data-status='deleted'] {
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--text-3) 60%, transparent);
}
.dv__dir {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.dv__was {
  flex: none;
  color: var(--text-3);
  text-decoration: line-through;
}
.dv__arrow {
  flex: none;
  color: var(--text-4);
}
.dv__tag {
  flex: none;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--dv-add) 16%, transparent);
  color: var(--diff-add-fg);
  font-size: var(--fs-xxs);
  font-weight: 500;
  line-height: 17px;
}
.dv__tag[data-tone='del'] {
  background: color-mix(in srgb, var(--dv-del) 16%, transparent);
  color: var(--diff-del-fg);
}
.dv__stat {
  flex: none;
  font-size: var(--fs-xs);
}
.dv__actions {
  flex: none;
  display: inline-flex;
  align-items: center;
  cursor: default;
}
.dv__action {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-xs);
  color: var(--text-3);
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.dv__action:hover,
.dv__action[data-active] {
  background: var(--hover);
  color: var(--text);
}
.dv__chev {
  flex: none;
  margin: 0 4px 0 2px;
  color: var(--text-3);
  transition: transform 220ms var(--ease);
}
.dv[data-collapsed] .dv__chev {
  transform: rotate(-90deg);
}

.dv__note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.dv__load {
  padding: 2px 8px;
  border-radius: var(--r-xs);
  background: var(--hover);
  color: var(--text);
  font-size: var(--fs-xs);
}
.dv__load:hover {
  background: var(--hover-strong);
}

/* ------------------------------------------------------------------ body */

.dv__body {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: calc(var(--fs-base) - 1.5px);
  line-height: var(--dv-line);
  font-variant-ligatures: none;
  tab-size: 4;
  scrollbar-width: thin;
  animation: dv-in 180ms var(--ease) both;
}
@keyframes dv-in {
  from {
    opacity: 0;
  }
}
.dv__lines {
  width: max-content;
  min-width: 100%;
}
.dv__body[data-wrap] .dv__lines {
  width: auto;
}

.dv__row,
.dv__half {
  position: relative;
  display: flex;
  min-height: var(--dv-line);
}
.dv__row:hover {
  background: var(--dv-hover);
}
.dv__row[data-kind='add'],
.dv__half[data-kind='add'] {
  background: var(--dv-add-row);
}
.dv__row[data-kind='del'],
.dv__half[data-kind='del'] {
  background: var(--dv-del-row);
}
.dv__row[data-kind='add']:hover {
  background: color-mix(in srgb, var(--dv-add-row) 90%, var(--dv-add));
}
.dv__row[data-kind='del']:hover {
  background: color-mix(in srgb, var(--dv-del-row) 90%, var(--dv-del));
}
.dv__row[data-flash] {
  animation: dv-flash 900ms var(--ease);
}
@keyframes dv-flash {
  30% {
    box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--accent) 16%, transparent);
  }
}

/* The gutter: one line number (the new file's, or the old one's for a
   removed line), sticking to the left while a long line scrolls. */
.dv__num {
  position: sticky;
  left: 0;
  z-index: 1;
  flex: none;
  display: block;
  width: calc(var(--dv-digits, 3) * 1ch + 30px);
  padding: 0 10px 0 0;
  background: var(--dv-bg);
  color: var(--dv-num);
  font: inherit;
  font-family: var(--font-ui);
  font-size: var(--fs-xxs);
  font-variant-numeric: tabular-nums;
  line-height: var(--dv-line);
  text-align: right;
  user-select: none;
}
.dv__row:hover .dv__num {
  background: var(--dv-hover);
}
.dv__row[data-kind='add'] .dv__num,
.dv__half[data-kind='add'] .dv__num {
  background: var(--dv-add-num);
  color: color-mix(in srgb, var(--diff-add-fg) 85%, var(--dv-bg));
}
.dv__row[data-kind='del'] .dv__num,
.dv__half[data-kind='del'] .dv__num {
  background: var(--dv-del-num);
  color: color-mix(in srgb, var(--diff-del-fg) 85%, var(--dv-bg));
}
.dv__row[data-kind='add'] .dv__num::before,
.dv__half[data-kind='add'] .dv__num::before,
.dv__row[data-kind='del'] .dv__num::before,
.dv__half[data-kind='del'] .dv__num::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
}
.dv__row[data-kind='add'] .dv__num::before,
.dv__half[data-kind='add'] .dv__num::before {
  background: var(--dv-add);
}
/* A removed line's bar is broken, so the two read apart without colour. */
.dv__row[data-kind='del'] .dv__num::before,
.dv__half[data-kind='del'] .dv__num::before {
  background: repeating-linear-gradient(180deg, var(--dv-del) 0 2px, transparent 2px 4px);
}
button.dv__num {
  cursor: pointer;
}
.dv__plus {
  position: absolute;
  top: 50%;
  left: 8px;
  color: var(--accent);
  opacity: 0;
  transform: translateY(-50%) scale(0.9);
  transition:
    opacity 120ms var(--ease),
    transform 120ms var(--ease);
}
.dv__row:hover .dv__plus,
.dv__half:hover .dv__plus,
button.dv__num:focus-visible .dv__plus {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
button.dv__num:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.dv__code {
  flex: 1;
  min-width: 0;
  padding: 0 18px 0 12px;
  color: var(--text);
  white-space: pre;
}
.dv__body[data-wrap] .dv__code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.dv__em {
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
[data-kind='add'] .dv__em {
  background: var(--dv-add-em);
}
[data-kind='del'] .dv__em {
  background: var(--dv-del-em);
}

/* Side by side: the old file on the left, the new on the right. */
.dv__body[data-layout='split'] .dv__lines {
  width: 100%;
}
.dv__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.dv__half {
  min-width: 0;
}
.dv__half + .dv__half {
  box-shadow: inset 1px 0 0 var(--dv-border);
}
.dv__half[data-empty] {
  background: repeating-linear-gradient(-45deg, transparent 0 4px, color-mix(in srgb, var(--fg) 4%, transparent) 4px 5px);
}
.dv__pair:hover .dv__half[data-kind='ctx'],
.dv__pair:hover .dv__half[data-kind='ctx'] .dv__num {
  background: var(--dv-hover);
}

/* Unchanged lines folded away: "24 unmodified lines", opening in place. */
.dv__fold {
  position: sticky;
  left: 8px;
  display: flex;
  align-items: stretch;
  width: calc(var(--dv-view, 100%) - 16px);
  height: 30px;
  margin: 6px 8px;
  overflow: hidden;
  border-radius: 7px;
  background: var(--dv-fold);
  color: var(--text-3);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: 30px;
}
.dv__body[data-wrap] .dv__fold {
  width: auto;
}
.dv__fold-btns {
  display: flex;
}
.dv__fold-btn {
  display: grid;
  place-items: center;
  width: 32px;
  border-right: 2px solid var(--dv-bg);
  background: var(--dv-fold-strong);
  color: var(--text-3);
  transition:
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
.dv__fold-btn:hover {
  background: color-mix(in srgb, var(--dv-fold-strong) 80%, var(--fg));
  color: var(--text);
}
.dv__fold-label {
  flex: 1;
  min-width: 0;
  padding: 0 12px;
  overflow: hidden;
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}
button.dv__fold-label:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dv__break {
  position: sticky;
  left: 0;
  width: var(--dv-view, 100%);
  height: 12px;
  margin: 4px 0;
  background: repeating-linear-gradient(-45deg, transparent 0 4px, color-mix(in srgb, var(--fg) 6%, transparent) 4px 5px);
}
.dv__body[data-wrap] .dv__break {
  width: auto;
}

/* A comment on a line, under it, as wide as the card shows. */
.dv__comment {
  position: sticky;
  left: 0;
  width: var(--dv-view, 100%);
  padding: 6px 10px 8px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: 1.45;
  white-space: normal;
}
.dv__body[data-wrap] .dv__comment {
  width: auto;
}
.dv-note {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--shadow-ink) 22%, transparent);
  animation: dv-note-in 160ms var(--ease) both;
}
@keyframes dv-note-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}
.dv-note__where {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.dv-note__input {
  width: 100%;
  min-height: 52px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  resize: vertical;
}
.dv-note__input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
}
.dv-note__actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* ---------------------------------------------------------- Changes pane */

.cpane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  container: cpane / inline-size;
}
/* Too narrow for a tree beside the diffs: the diffs keep the room. */
@container cpane (max-width: 560px) {
  .ctree {
    display: none;
  }
}
.cpane__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 8px;
  border-bottom: 1px solid var(--border-soft);
}
.cpane__scope {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: min(70%, 320px);
  height: 30px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--hover);
  color: var(--text);
  font-size: var(--fs-sm);
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.cpane__scope:hover,
.cpane__scope[data-open] {
  background: var(--hover-strong);
}
/* The ADE's Diff has only what is uncommitted to show: a label, not a menu. */
.cpane__scope[data-static] {
  cursor: default;
}
.cpane__scope[data-static]:hover {
  background: var(--hover);
}
.cpane__scope-icon {
  display: inline-flex;
  color: var(--text-2);
}
.cpane__scope-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cpane__badge {
  flex: none;
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--hover-strong);
  color: var(--text-2);
  font-size: var(--fs-xxs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 17px;
  text-align: center;
}
.cpane__stat {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 500;
}
.cpane__scope-chev {
  flex: none;
  color: var(--text-3);
}
.cpane__tools {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-left: auto;
  padding: 1px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--hover);
}
.cpane__tool {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  color: var(--text-3);
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.cpane__tool:hover:not(:disabled) {
  background: var(--hover-strong);
  color: var(--text);
}
.cpane__tool[data-active] {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: color-mix(in srgb, var(--accent), var(--fg) 25%);
}
.cpane__tool:disabled {
  opacity: 0.4;
}
.cpane__tool:focus-visible,
.cpane__scope:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
.cpane__sep {
  width: 1px;
  height: 16px;
  margin: 0 2px;
  background: var(--border);
}

.cpane__body {
  flex: 1;
  min-height: 0;
  display: flex;
}
.cpane__scroll {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cpane__files {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 8px 24px;
}
.cpane__state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.cpane__state--error {
  padding: 0 20px;
  color: var(--danger);
  text-align: center;
}
.cpane__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  min-height: 220px;
  padding: 24px;
  text-align: center;
}
.cpane__empty-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--hover);
  color: var(--text-2);
}
.cpane__empty-title {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.cpane__empty-hint {
  max-width: 260px;
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.cpane__jump-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.cpane__jump-name {
  flex: none;
}
.cpane__jump-dir {
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: var(--fs-xxs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The changed files as a tree, beside the diffs. */
.ctree {
  flex: none;
  width: min(32%, 230px);
  padding: 6px 4px 16px;
  overflow-y: auto;
  border-right: 1px solid var(--border-soft);
  animation: ctree-in 200ms var(--ease) both;
}
@keyframes ctree-in {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}
.ctree__row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 26px;
  padding-right: 8px;
  border-radius: var(--r-xs);
  color: var(--text-2);
  font-size: var(--fs-xs);
  text-align: left;
  white-space: nowrap;
}
.ctree__row:hover {
  background: var(--hover);
  color: var(--text);
}
.ctree__row--dir {
  color: var(--text-3);
}
.ctree__chev {
  flex: none;
  transition: transform 180ms var(--ease);
}
.ctree__row--dir[aria-expanded='true'] .ctree__chev {
  transform: rotate(90deg);
}
.ctree__icon {
  flex: none;
  display: inline-flex;
  opacity: 0.85;
}
.ctree__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctree__name[data-status='deleted'] {
  text-decoration: line-through;
}
.ctree__stat {
  margin-left: auto;
  padding-left: 6px;
  font-size: var(--fs-xxs);
}

/* A switch as a menu row (the view menu's Wrap long lines). */
.menu__switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 0 8px 0 10px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.menu__switch-row > span {
  flex: 1;
}
.menu__switch-row > svg {
  color: var(--text-2);
}
.menu__switch-row:hover {
  background: var(--hover);
}
.menu__switch-row[data-disabled] {
  opacity: 0.5;
  cursor: default;
}
.menu__switch-row[data-disabled]:hover {
  background: none;
}

@media (prefers-reduced-motion: reduce) {
  .dv__body,
  .dv-note,
  .ctree {
    animation: none;
  }
}

/* ------------------------------------- a reply's "3 changed files" card */

.cfiles {
  margin-top: 16px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  white-space: normal;
}
[data-theme='light'] .cfiles {
  background: color-mix(in srgb, var(--fg) 3.5%, transparent);
}
.cfiles__head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 6px 8px 6px 12px;
}
.cfiles__title {
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.cfiles__total {
  font-size: var(--fs-xs);
  font-weight: 500;
}
.cfiles__tools {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.cfiles__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--r-xs);
  color: var(--text-3);
  font-size: var(--fs-xs);
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.cfiles__tool:hover {
  background: var(--hover);
  color: var(--text);
}
/* A narrow column keeps the icon and drops the words. */
@container (max-width: 380px) {
  .cfiles__tool--label span {
    display: none;
  }
}
.cfiles__body {
  padding: 0 8px 8px;
}
.cfiles__row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 28px;
  padding-right: 8px;
  border-radius: var(--r-xs);
  color: var(--text-2);
  text-align: left;
  transition: background-color var(--dur) var(--ease);
}
.cfiles__row:hover {
  background: var(--hover);
}
.cfiles__row:hover .cfiles__name {
  color: var(--text);
}
.cfiles__row:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.cfiles__chev {
  flex: none;
  color: var(--text-4);
  transition: transform 180ms var(--ease);
}
.cfiles__row--dir[aria-expanded='true'] .cfiles__chev {
  transform: rotate(90deg);
}
.cfiles__gap {
  flex: none;
  width: 14px;
}
.cfiles__icon {
  flex: none;
  display: inline-flex;
  color: var(--text-3);
  opacity: 0.85;
}
.cfiles__name {
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cfiles__name--file {
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.cfiles__new {
  flex: none;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--diff-add-fg) 15%, transparent);
  color: var(--diff-add-fg);
  font-size: var(--fs-xxs);
  font-weight: 500;
  line-height: 16px;
}
.cfiles__stat {
  margin-left: auto;
  padding-left: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
}
.cfiles__diff {
  padding: 4px 0 6px 22px;
}
.dv[data-bare] {
  border-radius: 8px;
}

/* A diff inside a transcript card: flush with the card, its colours the card's. */
.step-card .dv[data-bare],
.cfiles__diff .dv[data-bare] {
  --dv-bg: var(--card-body, var(--code-bg));
}
.step-card .dv[data-bare] {
  border: 0;
  border-radius: 0;
}
.step-card .dv__body {
  max-height: 420px;
  overflow-y: auto;
}
.edit-card__body[data-clipped] .dv__body {
  max-height: none;
  overflow: hidden;
}

/* "Worked for 2m 4s": a finished turn's work folds under it. */
.turn-head__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: -2px -4px;
  padding: 2px 4px;
  border-radius: var(--r-xs);
  color: inherit;
  font: inherit;
  transition: color var(--dur) var(--ease);
}
.turn-head__toggle:hover {
  color: var(--text);
}
.turn-head__toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
.turn-head__chevron {
  color: var(--text-4);
  transition: transform 200ms var(--ease);
}
.turn-head__toggle[aria-expanded='true'] .turn-head__chevron {
  transform: rotate(90deg);
}
/* ---------- Chat's dock (components/ide/Dock) ----------
   The column to the right of a conversation, flush against it the way the
   conversation sits against the window: its tabs ("surfaces") along the top,
   the one in front under them. The dock's own parts are in dock.css; this
   file keeps the column, its edge to drag, the editor a file opens in, and
   the notices the surfaces share.

   Opening, the column grows from nothing so the conversation glides aside
   instead of jumping; closing runs the same in reverse (`data-closing`,
   while App keeps it mounted). */

.ide {
  --ide-line: 20px;
  --tok-comment: #8b949e;
  --tok-keyword: #ff7b72;
  --tok-string: #a5d6ff;
  --tok-number: #79c0ff;
  --tok-func: #d2a8ff;
  --tok-type: #ffa657;
  --tok-tag: #7ee787;
  --tok-attr: #79c0ff;
  --tok-meta: #ffa657;
  --ide-tree-w: 208px;
  --ide-bg: var(--surface-1);
  /* The editor sits a step into the card, the open tab joined to it. */
  --ide-editor-bg: color-mix(in srgb, var(--ide-bg), var(--sink-color) 16%);
  /* Never wider than leaves the conversation its room: 520px of chat, plus
     the sidebar when it is open. A panel dragged wide on a big window
     shrinks back on a smaller one instead of crushing the chat. */
  --ide-room: 520px;
  --ide-span: max(320px, min(var(--ide-w, 560px), calc(100vw - var(--ide-room))));
  --ide-kw: #ff7b72;
  --ide-str: #a5d6ff;
  --ide-fn: #d2a8ff;
  --ide-num: #79c0ff;
  --ide-cm: #8b949e;
  position: relative;
  flex: none;
  display: flex;
  justify-content: flex-end;
  width: var(--ide-span);
  padding: var(--sidebar-gap) var(--sidebar-gap) var(--sidebar-gap) 0;
  overflow: hidden;
  transition:
    width 300ms var(--ease),
    padding-right 300ms var(--ease),
    opacity 220ms var(--ease);
}
/* Closed is no width at all, gutter included. */
@starting-style {
  .ide {
    width: 0;
    padding-right: 0;
    opacity: 0;
  }
}
.ide[data-closing] {
  width: 0;
  padding-right: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    width 260ms var(--ease),
    padding-right 260ms var(--ease),
    opacity 200ms var(--ease-exit);
}
.app:has(.sidebar[data-open='true']) .ide {
  --ide-room: calc(520px + var(--sidebar-w));
}
/* Dragging the edge follows the pointer exactly. */
body[data-resizing='ide'] .ide {
  transition: none;
}
[data-theme='light'] .ide {
  --tok-comment: #6e7781;
  --tok-keyword: #cf222e;
  --tok-string: #0a3069;
  --tok-number: #0550ae;
  --tok-func: #8250df;
  --tok-type: #953800;
  --tok-tag: #116329;
  --tok-attr: #0550ae;
  --tok-meta: #953800;
  --ide-editor-bg: var(--bg);
  --ide-kw: #cf222e;
  --ide-str: #0a3069;
  --ide-fn: #8250df;
  --ide-num: #0550ae;
  --ide-cm: #6e7781;
}

.ide__resize {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3px;
  z-index: 2;
  width: 8px;
  cursor: col-resize;
  -webkit-app-region: no-drag;
}
.ide__resize::after {
  content: '';
  position: absolute;
  top: calc(var(--sidebar-gap) + var(--r-panel));
  bottom: calc(var(--sidebar-gap) + var(--r-panel));
  left: 2px;
  width: 2px;
  border-radius: 1px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.ide__resize:hover::after,
body[data-resizing='ide'] .ide__resize::after {
  opacity: 0.6;
}
body[data-resizing='ide'],
body[data-resizing='ide'] * {
  cursor: col-resize !important;
  user-select: none;
}

/* ---- Editor ---- */

.ide-editor {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  overflow: auto;
  background: var(--ide-editor-bg);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: var(--ide-line);
}
.ide-editor__gutter {
  position: sticky;
  left: 0;
  z-index: 1;
  flex: none;
  min-width: 44px;
  min-height: 100%;
  padding: 8px 12px 40vh 8px;
  background: var(--ide-editor-bg);
  color: var(--text-4);
  text-align: right;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.ide-editor__code {
  position: relative;
  flex: 1;
  min-width: calc(var(--ide-cols) * 1ch);
  padding: 8px 0 40vh;
}
.ide-editor__view,
.ide-editor__input {
  margin: 0;
  padding: 0 16px 0 4px;
  font: inherit;
  line-height: inherit;
  letter-spacing: 0;
  tab-size: 2;
  white-space: pre;
  word-wrap: normal;
}
.ide-editor__view {
  color: var(--text-2);
  pointer-events: none;
}
.ide-editor__line {
  min-height: var(--ide-line);
}
.ide-editor__input {
  position: absolute;
  inset: 8px 0 0 0;
  width: 100%;
  height: calc(100% - 8px);
  resize: none;
  overflow: hidden;
  border: 0;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: var(--text);
  -webkit-text-fill-color: transparent;
}
.ide-editor__input::selection {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
  -webkit-text-fill-color: transparent;
}
/* Wrapped: no gutter column; each line carries its number in its own left padding, and the
   textarea has the same padding, so both wrap at the same point. */
.ide-editor[data-wrap] .ide-editor__code {
  min-width: 0;
}
.ide-editor[data-wrap] .ide-editor__view,
.ide-editor[data-wrap] .ide-editor__input {
  padding-left: calc(var(--ide-digits, 2) * 1ch + 32px);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ide-editor[data-wrap] .ide-editor__line {
  position: relative;
}
/* Above the textarea, so a number can be pointed at; the rest of the view lets the pointer through. */
.ide-editor[data-wrap] .ide-editor__view {
  position: relative;
  z-index: 1;
}
.ide-editor[data-wrap] .ide-editor__num {
  position: absolute;
  top: 0;
  left: calc(-1 * (var(--ide-digits, 2) * 1ch + 32px));
  width: calc(var(--ide-digits, 2) * 1ch + 20px);
  color: var(--text-4);
  text-align: right;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
/* With something to do with a line: a + beside its number under the pointer. */
.ide-editor[data-line-action] .ide-editor__num {
  position: relative;
  pointer-events: auto;
  cursor: pointer;
}
.ide-editor[data-wrap][data-line-action] .ide-editor__num {
  position: absolute;
}
.ide-editor[data-line-action] .ide-editor__num:hover {
  color: var(--text);
}
.ide-editor[data-line-action] .ide-editor__num:hover::before {
  content: '+';
  position: absolute;
  top: 50%;
  left: -2px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--on-accent, #fff);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.ide-editor[data-wrap][data-line-action] .ide-editor__num:hover::before {
  top: calc(var(--ide-line) / 2);
  left: 4px;
}
/* Colours: the diffs' own (diffView.css), by language. */
.ide-editor .tok-comment {
  color: var(--tok-comment);
  font-style: italic;
}
.ide-editor .tok-keyword {
  color: var(--tok-keyword);
}
.ide-editor .tok-string {
  color: var(--tok-string);
}
.ide-editor .tok-number,
.ide-editor .tok-literal {
  color: var(--tok-number);
}
.ide-editor .tok-func {
  color: var(--tok-func);
}
.ide-editor .tok-type {
  color: var(--tok-type);
}
.ide-editor .tok-tag {
  color: var(--tok-tag);
}
.ide-editor .tok-attr {
  color: var(--tok-attr);
}
.ide-editor .tok-meta {
  color: var(--tok-meta);
}

/* ---- Notices and banners ---- */

.ide__banner {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--accent) 8%, var(--ide-bg));
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.ide__banner[data-tone='danger'] {
  background: var(--danger-soft);
  color: var(--danger);
}
.ide__banner span {
  flex: 1;
  min-width: 0;
}
.ide__banner-btn {
  flex: none;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.ide__banner-btn:hover {
  background: var(--hover);
}

.ide__notice {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--text-3);
  font-size: var(--fs-sm);
  text-align: center;
}
.ide__notice p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ide {
    transition: none;
  }
}
/* ---------- The dock (Chat's and the ADE's): tabs, the launcher and each surface ----------
   components/ide/Dock and ide/surfaces. The column itself (width, the edge
   to drag, opening and closing) is .ide in ide.css. Flush with the
   conversation or the terminals, a hairline between them; the bar on top
   lines up with their top bar and drags the window the same way. */

.dock {
  --dock-bar-h: calc(var(--titlebar-h) + var(--sidebar-gap));
  padding: 0;
  border-left: 1px solid var(--border-soft);
  background: var(--canvas);
}
.dock[data-closing] {
  padding: 0;
}
/* Pinned to the column's right edge at its full width while the column grows or shrinks. */
.dock__frame {
  flex: none;
  display: flex;
  flex-direction: column;
  width: calc(var(--ide-span) - 1px);
  min-height: 0;
}
/* Filling the window: the conversation steps aside, still mounted. */
.dock[data-max] {
  flex: 1;
  width: auto;
  border-left: 0;
  transition: none;
}
.dock[data-max] .dock__frame {
  flex: 1;
  width: auto;
}
.app:has(> .dock[data-max]) > .main {
  display: none;
}
/* Filling the window with the sidebar hidden, its bar is the window's top
   left: it starts past the window's controls (macOS's traffic lights), as
   the top bars do. */
.app:has(> .sidebar[data-open='false']) > .dock[data-max] .dock__bar {
  padding-left: max(8px, calc(var(--window-controls-left) + 3px));
}

/* ---- Bar: + and the tabs, then the dock's own switches ---- */

.dock__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--dock-bar-h);
  padding: var(--sidebar-gap) calc(10px + var(--window-controls-right)) 0 8px;
  border-bottom: 1px solid var(--border-soft);
  -webkit-app-region: drag;
}
.dock__bar button {
  -webkit-app-region: no-drag;
}
.dock__tabs {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  /* More tabs than fit: the end with more past it fades out, so a tab cut
     off there reads as more to scroll to. The fades follow the scroll
     position (as menus' do); a strip that fits has none. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--tabs-fade-start), #000 calc(100% - var(--tabs-fade-end)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--tabs-fade-start), #000 calc(100% - var(--tabs-fade-end)), transparent);
  animation: dock-tab-edges linear both;
  animation-timeline: scroll(self inline);
}
@property --tabs-fade-start {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --tabs-fade-end {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@keyframes dock-tab-edges {
  0% {
    --tabs-fade-start: 0px;
    --tabs-fade-end: 28px;
  }
  8% {
    --tabs-fade-start: 28px;
  }
  92% {
    --tabs-fade-end: 28px;
  }
  100% {
    --tabs-fade-start: 28px;
    --tabs-fade-end: 0px;
  }
}
.dock__tabs::-webkit-scrollbar {
  display: none;
}
.dock__tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* A small square icon button: the dock's switches, and the conversation's three. */
.dock-tool {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  color: var(--text-3);
  -webkit-app-region: no-drag;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.dock-tool:hover {
  background: var(--hover);
  color: var(--text);
}
.dock-tool[data-active] {
  color: var(--text);
}
.dock-tool:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.panel-toggles {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* ---- Tabs ---- */

.dock-tab {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  max-width: 200px;
  height: 28px;
  border-radius: var(--r-sm);
  color: var(--text-3);
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
  animation: dock-tab-in 180ms var(--ease) both;
}
@keyframes dock-tab-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
}
.dock-tab:hover {
  background: var(--hover);
  color: var(--text-2);
}
.dock-tab[data-active] {
  background: var(--hover-strong);
  color: var(--text);
}
.dock-tab__open {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 100%;
  padding: 0 4px 0 9px;
  font-size: var(--fs-sm);
}
.dock-tab__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 14px;
  height: 14px;
}
.dock-tab__favicon {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  object-fit: contain;
}
.dock-tab__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock-tab__count {
  flex: none;
  min-width: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--hover-strong);
  color: var(--text-2);
  font-size: var(--fs-xxs);
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  text-align: center;
}
.dock-tab__live {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: dock-pulse 1.2s ease-in-out infinite;
}
@keyframes dock-pulse {
  50% {
    opacity: 0.3;
  }
}
.dock-tab__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 5px;
  border-radius: 4px;
  color: var(--text-3);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.dock-tab:hover .dock-tab__close,
.dock-tab[data-active] .dock-tab__close,
.dock-tab__close:focus-visible {
  opacity: 1;
}
.dock-tab__close:hover {
  background: var(--hover-strong);
  color: var(--text);
}
/* Unsaved: a dot where the close button sits, the button under the pointer. */
.dock-tab__close[data-dirty] {
  opacity: 1;
}
.dock-tab__close[data-dirty] svg {
  display: none;
}
.dock-tab__close[data-dirty]::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-2);
}
.dock-tab__close[data-dirty]:hover svg {
  display: block;
}
.dock-tab__close[data-dirty]:hover::after {
  display: none;
}

/* ---- Body ---- */

.dock__body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.dock__surface {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  animation: dock-surface-in 160ms var(--ease) both;
}
.dock__surface[hidden] {
  display: none;
}
@keyframes dock-surface-in {
  from {
    opacity: 0;
  }
}
.dock__diff {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* A surface with nothing to show yet: an icon, a line, what to do. */
.dock-note {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--text-3);
  font-size: var(--fs-sm);
  text-align: center;
}
.dock-note p {
  margin: 0;
}
.dock-note__title {
  color: var(--text-2);
  font-weight: 500;
}
.dock-note__hint {
  max-width: 280px;
  color: var(--text-4);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.dock-note__action {
  width: min(240px, 100%);
  margin-top: 8px;
}

/* ---- The empty dock: what it can open ---- */

.dock-launch {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 24px;
}
.dock-launch__card {
  width: min(300px, 100%);
  padding: 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: 0 12px 32px -20px rgb(0 0 0 / 0.45);
  outline: none;
  animation: dock-launch-in 220ms var(--spring-moderate, var(--ease)) both;
}
@keyframes dock-launch-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }
}
.dock-launch__title {
  padding: 8px 10px 6px;
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.dock-choice {
  display: flex;
  align-items: center;
  border-radius: var(--r-sm);
  transition: background var(--dur) var(--ease);
}
.dock-choice:has(> .dock-choice__main:not(:disabled):hover),
.dock-choice:has(> .dock-choice__more:hover) {
  background: var(--hover);
}
.dock-choice__main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 8px 0 10px;
  color: var(--text);
  font-size: var(--fs-sm);
  text-align: left;
}
.dock-choice__main:disabled {
  color: var(--text-4);
  cursor: default;
}
.dock-choice__main:focus-visible,
.dock-choice__more:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}
.dock-choice__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 16px;
  color: var(--text-2);
}
.dock-choice__main:disabled .dock-choice__icon {
  color: var(--text-4);
}
.dock-choice__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock-choice__more {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 2px;
  border-radius: 5px;
  color: var(--text-3);
}
.dock-choice__more:hover,
.dock-choice__more[data-open] {
  background: var(--hover-strong);
  color: var(--text);
}
.dock-choice__key {
  display: grid;
  flex: none;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-right: 6px;
  padding: 0 5px;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  background: var(--canvas);
  color: var(--text-3);
  font-family: var(--font-ui);
  font-size: var(--fs-xxs);
  font-weight: 500;
}
.dock-choice__main .dock-choice__key {
  margin-right: -2px;
}
.dock-choice__main:disabled .dock-choice__key {
  opacity: 0.6;
}
.dock-add .dock-choice__main {
  height: 30px;
}

/* ---- Files ---- */

.files-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.files-view__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 6px;
  border-bottom: 1px solid var(--border-soft);
}
.files-view__tool {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  color: var(--text-3);
}
.files-view__tool:hover {
  background: var(--hover);
  color: var(--text);
}
.files-view__search {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.files-view__search-icon {
  position: absolute;
  left: 8px;
  color: var(--text-4);
  pointer-events: none;
}
.files-view__search input {
  width: 100%;
  height: 28px;
  padding: 0 26px 0 28px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--hover);
  color: var(--text);
  font-size: var(--fs-sm);
  outline: none;
  transition:
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}
.files-view__search input::placeholder {
  color: var(--text-4);
}
.files-view__search input:focus {
  border-color: var(--border-strong);
  background: var(--canvas);
}
.files-view__clear {
  position: absolute;
  right: 4px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  color: var(--text-3);
}
.files-view__clear:hover {
  background: var(--hover-strong);
  color: var(--text);
}
.files-view__tree {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 6px 6px 24px;
}
.files-view__empty {
  padding: 18px 12px;
  color: var(--text-4);
  font-size: var(--fs-sm);
  text-align: center;
}
.files-view__row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 26px;
  padding: 0 8px 0 calc(6px + var(--depth, 0) * 14px);
  border-radius: 5px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-align: left;
  white-space: nowrap;
}
.files-view__row:hover {
  background: var(--hover);
  color: var(--text);
}
.files-view__row[data-active] {
  background: var(--hover-strong);
  color: var(--text);
}
.files-view__row:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.files-view__chev {
  flex: none;
  color: var(--text-4);
  transition: transform var(--dur) var(--ease);
}
.files-view__row[aria-expanded='true'] .files-view__chev {
  transform: rotate(90deg);
}
.files-view__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
  /* Lines up under the folder name, past the chevron's column. */
  margin-left: 20px;
}
.files-view__row--hit .files-view__icon {
  margin-left: 0;
}
.files-view__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.files-view__dir {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-4);
  font-size: var(--fs-xs);
}
/* Changed by the agent in this chat. */
.files-view__touched {
  flex: none;
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--accent);
}
/* Beside an open file: a narrower tree, the same search. */
.files-view[data-compact] .files-view__bar {
  height: 36px;
  padding: 0 4px;
}
.files-view[data-compact] .files-view__row {
  height: 24px;
  font-size: var(--fs-xs);
  padding-left: calc(4px + var(--depth, 0) * 12px);
}
.files-view[data-compact] .files-view__icon {
  margin-left: 18px;
}

/* ---- A file ---- */

.file-surface {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.file-surface__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 6px 0 12px;
  border-bottom: 1px solid var(--border-soft);
}
.file-surface__crumbs {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--text-3);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.file-surface__crumb {
  display: inline-flex;
  flex: none;
  align-items: center;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-surface__crumb[data-last] {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--text);
  font-weight: 500;
}
.file-surface__sep {
  flex: none;
  margin: 0 4px;
  color: var(--text-4);
}
.file-surface__dirty {
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--text-2);
}
.file-surface__tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
}
.file-surface__tools .split-btn {
  margin-right: 4px;
}
.file-surface__tool {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  color: var(--text-3);
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.file-surface__tool:hover {
  background: var(--hover);
  color: var(--text);
}
.file-surface__tool[data-active] {
  background: var(--hover);
  color: var(--text);
}
.file-surface__body {
  flex: 1;
  min-height: 0;
  display: flex;
}
.file-surface__main {
  --ide-editor-bg: var(--canvas);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.file-surface__tree {
  flex: none;
  display: flex;
  width: clamp(170px, 32%, 240px);
  border-left: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--canvas), var(--sink-color) 10%);
}
.file-surface__loading {
  flex: 1;
}
/* No room for both: the file wins. */
@container dock (max-width: 460px) {
  .file-surface__tree {
    display: none;
  }
}
.dock__frame {
  container: dock / inline-size;
}

/* ---- Diff ---- */

.dock__diff .cpane {
  border: 0;
  border-radius: 0;
}

/* ---- Pull requests ---- */

.pr-view {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 18px 18px 28px;
}
.pr-view__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pr-view__state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, #3fb950 16%, transparent);
  color: #3fb950;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.pr-view__state[data-state='DRAFT'],
.pr-view__state[data-state='CLOSED'] {
  background: var(--hover);
  color: var(--text-2);
}
.pr-view__state[data-state='CLOSED'] {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
}
.pr-view__state[data-state='MERGED'] {
  background: color-mix(in srgb, #a371f7 16%, transparent);
  color: #a371f7;
}
.pr-view__number {
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.pr-view__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.pr-view__link:hover {
  background: var(--hover);
  color: var(--text);
}
.pr-view__title {
  margin: 12px 0 4px;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-wrap: pretty;
}
.pr-view__meta {
  margin: 0;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.pr-view__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.pr-view__facts dt {
  color: var(--text-3);
}
.pr-view__facts dd {
  margin: 0;
  color: var(--text);
}
.pr-view__checks {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.pr-view__check {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-align: left;
}
.pr-view__check:not(:disabled):hover {
  background: var(--hover);
  color: var(--text);
}
.pr-view__check[data-status='passed'] svg {
  color: #3fb950;
}
.pr-view__check[data-status='failed'] svg {
  color: var(--danger);
}
.pr-view__check[data-status='pending'] svg,
.pr-view__check[data-status='skipped'] svg {
  color: var(--text-4);
}
.pr-view__check-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-view__check-flow {
  margin-left: auto;
  color: var(--text-4);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.linked-prs {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 8px;
  list-style: none;
}
.linked-prs__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-align: left;
}
.linked-prs__row:hover {
  background: var(--hover);
  color: var(--text);
}
.linked-prs__repo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.linked-prs__number {
  margin-left: auto;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* ---- Device ---- */

.device {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.device__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 6px 0 8px;
  border-bottom: 1px solid var(--border-soft);
}
.device__choice {
  display: flex;
  padding: 2px;
  border-radius: var(--r-sm);
  background: var(--hover);
}
.device__pick {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 5px;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.device__pick[aria-checked='true'] {
  background: var(--canvas);
  color: var(--text);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
}
.device__size,
.device__host {
  color: var(--text-4);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.device__host {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.device__stage {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--canvas), var(--sink-color) 18%);
}
.device__frame {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--fg) 10%, transparent),
    0 18px 40px -18px rgb(0 0 0 / 0.55);
}
.device__page {
  display: flex;
  border: 0;
  transform-origin: 0 0;
}

/* ---- Browsers inside the dock ---- */

/* Scoped to the dock: browser.css and pages.css size the standalone panel, and load later. */
.dock .browser--embedded,
.dock .agent-browser--docked {
  flex: 1;
  width: auto;
  min-width: 0;
  max-width: none;
  border-left: 0;
}
/* The pick-element switch as an icon, like the buttons around it. */
.browser--embedded .browser__design > span {
  display: none;
}
.browser--embedded .browser__design {
  width: 28px;
  padding: 0;
  justify-content: center;
}
.agent-browser--docked .browser__toolbar {
  gap: 6px;
}

/* ---------------- Terminals: Chat's drawer and the dock's Terminal ----------------
   A shell edge to edge, the panes of a split group divided by a hairline, the
   one in use outlined; a small bar floats over the top right corner. */

.term-drawer {
  position: relative;
  flex: none;
  display: flex;
  min-height: 140px;
  border-top: 1px solid var(--border-soft);
  background: var(--term-bg);
  animation: term-drawer-in 240ms var(--spring-moderate, var(--ease)) both;
}
@keyframes term-drawer-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
body[data-resizing='drawer'] {
  cursor: row-resize;
  user-select: none;
}
body[data-resizing='drawer'] .cterm-pane__screen {
  pointer-events: none;
}
.term-drawer__resize {
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  z-index: 3;
  height: 7px;
  cursor: row-resize;
}
.term-drawer__resize::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 2px;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.term-drawer__resize:hover::after,
body[data-resizing='drawer'] .term-drawer__resize::after {
  opacity: 0.6;
}
/* The right edge is kept for the terminal's buttons (.term-tools), so they never sit over its output. */
.term-drawer__main {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  padding-right: var(--term-rail);
}

.dock-term {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  padding-right: var(--term-rail);
  background: var(--term-bg);
}
.term-drawer,
.dock-term {
  --term-rail: 38px;
}
.dock-term--empty {
  padding-right: 0;
  align-items: center;
  justify-content: center;
  color: var(--text-4);
  font-size: var(--fs-sm);
}

.term-group {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
}
.term-group__col {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.term-group__rule {
  flex: none;
  width: 1px;
  background: var(--border-soft);
}
.term-group__rule--row {
  width: auto;
  height: 1px;
}
.cterm-pane {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
}
.cterm-pane[data-active]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  pointer-events: none;
}
.cterm-pane__screen {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 8px 4px 4px 12px;
}
.cterm-pane .xterm {
  height: 100%;
}
/* The pane is already --term-bg; xterm's own black viewport showed as a strip under the last row. */
.cterm-pane .xterm-viewport {
  scrollbar-width: none;
  background-color: transparent !important;
}
/* A slim thumb with no track, as in the ADE. */
.cterm-pane .xterm .xterm-scrollable-element > .scrollbar.vertical {
  width: 10px !important;
  background: transparent !important;
}
.cterm-pane .xterm .xterm-scrollable-element > .scrollbar.vertical > .slider {
  left: 3px !important;
  width: 4px !important;
  border-radius: 999px;
  background: color-mix(in srgb, var(--term-fg, var(--fg)) 22%, transparent) !important;
}
.cterm-pane .xterm .xterm-scrollable-element > .shadow {
  display: none !important;
}

.term-tools {
  position: absolute;
  top: 6px;
  right: 5px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  max-height: calc(100% - 12px);
  overflow-y: auto;
  scrollbar-width: none;
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--term-bg, var(--canvas)) 82%, var(--surface-2));
  box-shadow: 0 6px 18px -10px rgb(0 0 0 / 0.5);
  opacity: 0.72;
  transition: opacity var(--dur) var(--ease);
}
.term-tools:hover,
.term-tools:focus-within,
.term-drawer:hover .term-tools,
.dock-term:hover .term-tools {
  opacity: 1;
}
.term-tools__anchor {
  display: flex;
}
.term-tools__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 6px;
  color: var(--text-3);
  font-size: var(--fs-xs);
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.term-tools__btn:hover,
.term-tools__btn[data-open] {
  background: var(--hover-strong);
  color: var(--text);
}
.term-tools__btn[data-tone='danger']:hover {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}

/* More than one group: picked from a list down the right side. */
.term-list {
  flex: none;
  width: 168px;
  overflow-y: auto;
  padding: 6px;
  border-left: 1px solid var(--border-soft);
}
.term-list__row {
  display: flex;
  align-items: center;
  border-radius: 5px;
  color: var(--text-3);
}
.term-list__row:hover {
  background: var(--hover);
  color: var(--text-2);
}
.term-list__row[data-active] {
  background: var(--hover-strong);
  color: var(--text);
}
.term-list__row[data-nested] .term-list__open {
  padding-left: 22px;
}
.term-list__row[data-status='exited'] .term-list__name {
  text-decoration: line-through;
  text-decoration-color: var(--text-4);
}
.term-list__open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 4px 0 8px;
  font-size: var(--fs-xs);
  text-align: left;
}
.term-list__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.term-list__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: dock-pulse 1.4s ease-in-out infinite;
}
.term-list__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  border-radius: 4px;
  color: var(--text-3);
  opacity: 0;
}
.term-list__row:hover .term-list__close,
.term-list__close:focus-visible {
  opacity: 1;
}
.term-list__close:hover {
  background: var(--hover-strong);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .dock-tab,
  .dock__surface,
  .dock-launch__card,
  .term-drawer {
    animation: none;
  }
  .dock-tab__live,
  .term-list__dot {
    animation: none;
  }
}
/*
 * Work mode: mode pills, attachments, the plan card, the pinned checklist and
 * goal banner, swarm sub-agents, screenshots and the per-turn usage line.
 * Everything is mixed from the theme tokens, so every colour theme applies.
 */

/* ---- Mode pills in the composer toolbar ---- */
.mode-pills {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 2px;
}
.mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  color: var(--text-3);
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mode-pill:hover {
  background: var(--surface-4);
  color: var(--text);
}
.mode-pill[data-on] {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent), transparent 86%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent), transparent 70%);
}
/* A narrow composer keeps the icons and drops the words. */
@container (max-width: 520px) {
  .mode-pill {
    font-size: 0;
    gap: 0;
    padding: 0 7px;
  }
}
.composer {
  container-type: inline-size;
}
.composer[data-goal] {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent), transparent 50%);
}

/* ---- Attachments ---- */
.composer__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 8px 0;
}
.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  height: 30px;
  padding: 0 4px 0 8px;
  border-radius: var(--r-sm);
  background: var(--surface-4);
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.attachment-chip__thumb {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
  margin-left: -4px;
}
.attachment-chip__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-chip__remove {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  color: var(--text-3);
}
.attachment-chip__remove:hover {
  background: var(--hover-strong);
  color: var(--text);
}
.composer-stack[data-dragging] .composer {
  box-shadow: 0 0 0 2px var(--accent);
}

/* ---- Pinned above the composer: goal + checklist ---- */
.composer-dock__pinned {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: var(--composer-chat-w);
  max-width: calc(100% - 48px);
  margin: 0 auto 8px;
}
.composer-dock__pinned:empty {
  display: none;
}

.goal-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 12px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent), var(--surface-1) 88%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent), transparent 72%);
}
.goal-banner[data-status='achieved'] {
  background: color-mix(in srgb, var(--diff-add-fg), var(--surface-1) 90%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--diff-add-fg), transparent 70%);
}
.goal-banner[data-status='blocked'] {
  background: color-mix(in srgb, var(--danger), var(--surface-1) 90%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger), transparent 70%);
}
.goal-banner__icon {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--accent);
}
.goal-banner[data-status='achieved'] .goal-banner__icon {
  color: var(--diff-add-fg);
}
.goal-banner[data-status='blocked'] .goal-banner__icon {
  color: var(--danger);
}
.goal-banner__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.goal-banner__label {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.goal-banner__text {
  font-size: var(--fs-sm);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Plan card ---- */
.plan-card {
  margin: 10px 0 4px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent), transparent 70%);
}
.plan-card[data-status='approved'] {
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.plan-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
}
.plan-card__title {
  flex: 1;
  color: var(--text);
  font-weight: 600;
}
.plan-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--diff-add-fg);
}
.plan-card__summary {
  margin: 8px 0 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.plan-card__steps {
  margin: 8px 0 0;
  padding-left: 22px;
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.plan-card__steps li + li {
  margin-top: 3px;
}
.plan-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* ---- Swarm ---- */
.swarm {
  display: flex;
  flex-direction: column;
  padding: 4px 8px 6px;
  border-top: 1px solid var(--border-soft);
}
.swarm__agent {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.swarm__status {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  color: var(--text-3);
}
.swarm__agent[data-status='done'] .swarm__status {
  color: var(--diff-add-fg);
}
.swarm__agent[data-status='error'] .swarm__status {
  color: var(--danger);
}
.swarm__agent[data-status='running'] .swarm__status {
  color: var(--accent);
}
.swarm__role {
  flex: none;
  min-width: 78px;
  color: var(--text);
  text-transform: capitalize;
}
.swarm__task {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
}
.swarm__calls {
  flex: none;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}

/* ---- Tool screenshots and live output ---- */
.tool-images {
  display: flex;
  gap: 6px;
  padding: 6px 8px 8px;
  border-top: 1px solid var(--border-soft);
}
.tool-images__item {
  display: block;
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--border-soft);
}
.tool-images__item img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  background: var(--sunken);
}
.tool__output--live {
  max-height: 180px;
}

/* ---- Usage ---- */
.usage-line {
  margin-left: 6px;
  font-size: var(--fs-xxs);
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.msg__scheduled {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
  font-size: var(--fs-xxs);
  color: var(--text-3);
}
/* Menus, popovers, modals and form controls. */

.layer {
  position: fixed;
  inset: 0;
  z-index: 100;
}
.layer--transparent {
  background: transparent;
}
.layer--scrim {
  background: rgba(0, 0, 0, 0.42);
  display: grid;
  place-items: center;
  animation: fade var(--dur) var(--ease);
}
@keyframes fade {
  from {
    opacity: 0;
  }
}

.menu {
  position: fixed;
  min-width: 180px;
  /* A menu must never grow into a full-height wall of text. Provider model
     lists run to 100+ entries, and letting the surface match that pinned it to
     the top of the window and ran it off the bottom. Capped, it scrolls
     instead — and the Popover's placement math gets a sane height to work
     with, so it can still flip and clamp correctly. */
  max-height: min(340px, calc(100vh - 24px));
  overflow-y: auto;
  background: var(--menu-bg);
  backdrop-filter: var(--frost);
  -webkit-backdrop-filter: var(--frost);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-menu);
  padding: 5px;
  z-index: 101;
  animation: pop var(--dur-spring-fast) var(--spring-fast);
  transform-origin: var(--pop-origin, top center);
  scrollbar-width: none;
}
.menu::-webkit-scrollbar {
  display: none;
}

/* A menu with a search field (Popover in ui.tsx) holds the field still and
   scrolls the list under it in a body of its own. The field used to stick
   to the top of a menu that scrolled whole, and had to be painted solid so
   the list didn't show through it: a lighter band across the top of a
   frosted menu. Now nothing passes under it, so it is the menu's own glass. */
.menu[data-search] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.menu__body {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 5px;
  scrollbar-width: none;
  /* An edge with more of the list beyond it fades out, so the row cut off
     there reads as more to scroll to rather than as a clipped menu. The
     fades follow the scroll position; a list that fits has none. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--menu-fade-top), #000 calc(100% - var(--menu-fade-bottom)), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 var(--menu-fade-top), #000 calc(100% - var(--menu-fade-bottom)), transparent);
  animation: menu-edges linear both;
  animation-timeline: scroll(self);
}
.menu__body::-webkit-scrollbar {
  display: none;
}
@property --menu-fade-top {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --menu-fade-bottom {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@keyframes menu-edges {
  0% {
    --menu-fade-top: 0px;
    --menu-fade-bottom: 22px;
  }
  10% {
    --menu-fade-top: 22px;
  }
  90% {
    --menu-fade-bottom: 22px;
  }
  100% {
    --menu-fade-top: 22px;
    --menu-fade-bottom: 0px;
  }
}
@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}

.menu__header a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 9px 8px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.menu__label {
  padding: 6px 9px 4px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.menu__sep {
  height: 1px;
  background: var(--border-strong);
  margin: 5px 0;
}

.menu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 30px;
  padding: 0 9px;
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  color: var(--text);
  text-align: left;
  transition: background 90ms var(--ease);
}
.menu__item:hover:not(:disabled),
.menu__item[data-open='true'],
.menu__item[data-highlight='true'],
.menu__item:focus-visible {
  background: var(--hover-strong);
}
/* Arrow keys move focus row to row (Popover in ui.tsx); the ring sits inside the row. */
.menu__item:focus-visible {
  outline-offset: -2px;
}
/* The surface takes focus only to hold it when a menu has no items; no ring for that. */
.menu:focus-visible {
  outline: none;
}
.menu__item:disabled {
  color: var(--text-4);
}
.menu__item--tall {
  align-items: flex-start;
  padding-top: 7px;
  padding-bottom: 7px;
}
.menu__item-icon {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-2);
  width: 18px;
}
.menu__item--tall .menu__item-icon {
  margin-top: 1px;
}
.menu__item-body {
  flex: 1;
  min-width: 0;
}
.menu__item-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu__item-desc {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-top: 1px;
  /* A folder path is one long word to the browser; break it rather than clip it. */
  overflow-wrap: anywhere;
}
.menu__item-hint {
  /* Was `flex: none`, which let a long value (a model id like "nemotron 3
     super 120b extended") push the row's own label clean out of the flex box —
     the "Model" row rendered with no "Model" on it. Shrink and ellipsize
     instead, and never take more than half the row, so the label always wins. */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.menu__item-check {
  flex: none;
  color: var(--text);
  display: grid;
  place-items: center;
  width: 16px;
}
.menu__search {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 8px;
  color: var(--text-3);
  border-bottom: 0.5px solid var(--border);
}
.menu__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-size: var(--fs-base);
  color: var(--text);
}
.menu__search input::placeholder {
  color: var(--text-3);
}
.menu__empty {
  padding: 4px 9px 10px;
  font-size: var(--fs-base);
  color: var(--text-3);
}

/* ---------------- Modal ---------------- */

.modal {
  width: 360px;
  max-width: calc(100vw - 48px);
  /* A tall dialog (the worker editor with trading on) scrolls its body; the
     title and the buttons stay put. Without this it ran off the bottom of a
     small window and its Create button could not be reached. */
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--surface-3);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-modal);
  padding: 22px 22px 18px;
  position: relative;
  animation: pop var(--dur-spring-slow) var(--spring-slow);
}
.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--text-2);
}
.modal__close:hover {
  background: var(--hover);
  color: var(--text);
}
.modal__title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 8px 0 8px;
}
.modal__body {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 22px;
  min-height: 0;
  overflow-y: auto;
  /* Room for focus rings, which the scroll box would otherwise clip. */
  margin-inline: -4px;
  padding-inline: 4px;
}
.modal__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
/* Why the main button is greyed out, at the start of the row. */
.modal__why {
  margin-right: auto;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--text-3);
}
.modal__field {
  width: 100%;
  margin-bottom: 20px;
}

/* ---------------- Buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--surface-3);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:hover:not(:disabled) {
  background: var(--surface-4);
}
.btn:disabled {
  opacity: 0.45;
}
.btn--primary {
  background: var(--fg);
  color: var(--bg);
  font-weight: 500;
}
.btn--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--fg), var(--bg) 14%);
}
.btn--accent {
  background: var(--accent-fill);
  color: var(--on-accent);
}
.btn--accent:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent-fill), #000 12%);
}
.btn--ghost {
  background: none;
  color: var(--text-2);
}
.btn--ghost:hover:not(:disabled) {
  background: var(--hover);
  color: var(--text);
}
.btn--danger {
  background: var(--danger-soft);
  color: var(--danger);
}
.btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger-soft), var(--danger) 14%);
}
.btn--sm {
  height: 26px;
  padding: 0 10px;
  font-size: var(--fs-xs);
}

/* ---------------- Toggle switch ---------------- */

.switch {
  width: 30px;
  height: 18px;
  border-radius: var(--r-pill);
  background: var(--toggle-off);
  position: relative;
  flex: none;
  transition: background 180ms var(--ease);
}
.switch[data-on='true'] {
  background: var(--toggle-on);
}
.switch[data-dimmed='true'] {
  opacity: 0.45;
}
.switch:disabled {
  cursor: default;
  /* It looked exactly like a working switch that did nothing. */
  opacity: 0.45;
}
.switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--toggle-knob);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 180ms var(--ease);
}
.switch[data-on='true'] .switch__knob {
  transform: translateX(12px);
}

/* ---------------- Segmented control ---------------- */

.segment {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.segment__item {
  height: 26px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-3);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segment__item:hover {
  color: var(--text-2);
}
.segment__item[data-active='true'] {
  background: var(--surface-3);
  color: var(--text);
}

/* ---------------- Select ---------------- */

.select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px 0 11px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: nowrap;
  transition: background var(--dur) var(--ease);
}
.select:hover,
.select[data-open='true'] {
  background: var(--surface-4);
}
.select__chevron {
  color: var(--text-3);
  display: grid;
  place-items: center;
}

/* ---------------- Inputs ---------------- */

.input {
  width: 100%;
  height: 34px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  background: var(--sunken);
  border: 1px solid var(--border);
  font-size: var(--fs-base);
  color: var(--text);
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
.input:focus {
  border-color: color-mix(in srgb, var(--toggle-on), transparent 30%);
}
.input::placeholder {
  color: var(--text-3);
}

textarea.input {
  height: auto;
  padding: 10px 11px;
  line-height: 1.5;
  resize: vertical;
  min-height: 96px;
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.search-field__icon {
  position: absolute;
  left: 13px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  pointer-events: none;
}
.search-field input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 40px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  font-size: var(--fs-base);
  color: var(--text);
  outline: none;
}
.search-field input::placeholder {
  color: var(--text-3);
}
/* The same accent edge as .input: --border-strong alone was barely visible. */
.search-field input:focus {
  border-color: color-mix(in srgb, var(--toggle-on), transparent 30%);
}
.search-field--sm input {
  height: 34px;
  border-radius: var(--r-sm);
  padding-left: 34px;
  font-size: var(--fs-sm);
}
.search-field--sm .search-field__icon {
  left: 11px;
}
.search-field--pill input {
  border-radius: var(--r-pill);
  height: 34px;
  padding-left: 36px;
  background: var(--surface-2);
}
.search-field--pill .search-field__icon {
  left: 12px;
}

.stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.stepper input {
  width: 54px;
  height: 30px;
  text-align: center;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  border: 1px solid var(--border-soft);
  color: var(--text);
  outline: none;
  font-size: var(--fs-sm);
}
/* `outline: none` above outranked the app's focus ring, so typing in it had no visible focus. */
.stepper input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

/* ---------------- Slider ---------------- */

.slider {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.slider input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 200px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--toggle-on) 0 var(--fill, 50%),
    var(--surface-4) var(--fill, 50%) 100%
  );
  outline: none;
}
.slider input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  cursor: default;
}
.slider__value {
  font-size: var(--fs-sm);
  color: var(--text-2);
  min-width: 22px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------------- Keycap ---------------- */

.keycap {
  display: inline-flex;
  /* Also on <kbd>, whose default is the monospace face. */
  font-family: inherit;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  border: 0.5px solid var(--border-strong);
  font-size: var(--fs-xs);
  color: var(--text-2);
  white-space: nowrap;
}
.keycap--empty {
  background: none;
  border: 0;
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.color-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px 0 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  min-width: 128px;
  justify-content: flex-start;
  border: 1px solid var(--border-soft);
}
.color-chip__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  flex: none;
}

.tooltip-text {
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.menu__item-title > span + span {
  color: var(--text-3);
}

/* ---------------- Downloads panel ---------------- */

.downloads-panel {
  width: 320px;
  max-height: min(420px, calc(100vh - 24px));
}

.downloads-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 20px 34px;
  color: var(--text-3);
  text-align: center;
}
.downloads-empty p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.45;
}

.downloads-list {
  display: flex;
  flex-direction: column;
}

.download-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 9px;
  border-radius: var(--r-sm);
}
.download-row + .download-row {
  border-top: 1px solid var(--border-soft);
}
.download-row__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
}
.download-row__body {
  flex: 1;
  min-width: 0;
}
.download-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.download-row__title {
  font-size: var(--fs-sm);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.download-row__pct {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.download-row__subtitle {
  display: block;
  margin-top: 1px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.download-row__bar {
  height: 3px;
  margin-top: 7px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.download-row__bar-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
  transition: width 200ms var(--ease);
}

/* Wraps the header's Downloads button so the progress ring can sit centred
   around it — slightly larger than the button itself — without affecting the
   button's own size or its place in the header's flex layout. */
.download-btn-wrap {
  position: relative;
  display: inline-flex;
  flex: none;
}
.download-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.download-ring circle:last-child {
  transition: stroke-dashoffset 200ms var(--ease);
}

/* ---------------- Update toast ---------------- */

.update-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  /* Under dialogs and menus (100, 101), so it never covers their buttons. */
  z-index: 96;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 320px;
  padding: 14px 14px 14px 16px;
  border-radius: var(--r-lg);
  background: var(--menu-bg);
  backdrop-filter: var(--frost);
  -webkit-backdrop-filter: var(--frost);
  border: 0.5px solid var(--border-strong);
  box-shadow: var(--shadow-menu);
  animation: pop var(--dur-spring-slow) var(--spring-slow);
  transform-origin: bottom right;
}
.update-toast__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent), transparent 82%);
  color: var(--accent);
}
.update-toast__body {
  flex: 1;
  min-width: 0;
}
.update-toast__title {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
}
.update-toast__desc {
  margin: 3px 0 11px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.4;
}
.update-toast__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.update-toast__close {
  flex: none;
  margin: -4px -4px 0 0;
}

/* Notices about saved data (StoreNotice.tsx): the update toast's look, above it when both show. */
.update-toast + .store-notice {
  bottom: 148px;
}
.store-notice[data-kind='unsaved'] .store-notice__icon {
  background: color-mix(in srgb, var(--danger), transparent 84%);
  color: var(--danger);
}

/* ---------------- Error details ---------------- */

/* The raw error under a plain one (ErrorDetails in ui.tsx). */
.error-details {
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.error-details summary {
  width: fit-content;
  cursor: default;
  border-radius: var(--r-xs);
}
.error-details summary:hover {
  color: var(--text-2);
}
.error-details__text {
  margin: 6px 0;
  padding: 8px 10px;
  max-height: 140px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-2);
  background: var(--code-bg);
  border-radius: var(--r-sm);
  user-select: text;
}

/* ---------------- Notice (Notice.tsx) ---------------- */

.notice-toast {
  align-items: center;
  padding: 10px 10px 10px 12px;
}
.notice-toast .update-toast__icon {
  width: 26px;
  height: 26px;
  margin-top: 0;
}
.notice-toast .update-toast__icon[data-tone='error'] {
  background: var(--danger-soft);
  color: var(--danger);
}
.notice-toast__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text);
}
.notice-toast .update-toast__close {
  margin: 0;
}
/* Plugin directory, skills, integration manager and the built-in browser. */

:root {
  --page-w: 620px;
  --page-narrow: 572px;
  --page-wide: 900px;
}

.page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.page__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 20px;
  /* Keep this row's own buttons out from under the Windows caption
     buttons, which are drawn over the page at the top right. Zero on
     macOS, where the traffic lights are on the other side. */
  padding-right: calc(12px + var(--window-controls-right));
  -webkit-app-region: drag;
  /* Offset by the sidebar gutter so this row lands on the same baseline as the
     floating panel's titlebar (and the traffic lights) rather than sitting 8px
     higher against the window edge. */
  height: calc(var(--titlebar-h) + var(--sidebar-gap));
  padding-top: var(--sidebar-gap);
}
.page__bar[data-collapsed='true'] {
  padding-left: max(16px, calc(var(--window-controls-left) + 3px));
}
.page__bar .segment,
.page__bar .btn,
.page__bar .icon-btn {
  -webkit-app-region: no-drag;
}
.page__bar-spacer {
  flex: 1;
}

.page__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 24px 80px;
}

.page__inner {
  width: var(--page-w);
  max-width: 100%;
  margin: 0 auto;
}
.page__inner--narrow {
  width: var(--page-narrow);
}
.page__inner--wide {
  width: var(--page-wide);
}

.page__title {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 21px 0 0;
}
.page__subtitle {
  font-size: var(--fs-base);
  color: var(--text-2);
  margin: 10px 0 22px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 34px 0 14px;
}
.section-head__title {
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.section-head--ruled {
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 8px;
}

.installed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 2px 4px;
}

.icon-tile {
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
}
.icon-tile--selected {
  outline: 1.5px solid var(--toggle-on);
  outline-offset: 2px;
}

.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 28px;
}

.entry {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 14px;
  padding: 10px 0;
  min-height: 58px;
  text-align: left;
  width: 100%;
}
.entry__body {
  flex: 1;
  min-width: 0;
}
.entry__title {
  font-size: var(--fs-base);
  color: var(--text);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry__desc {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}
.entry__trail {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
}

.more-line {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin: 14px 0 26px;
}

.avatar-stack {
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  vertical-align: middle;
}
.avatar-stack > * {
  margin-right: -8px;
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--canvas);
}
.avatar-stack > *:last-child {
  margin-right: 0;
}

.see-more {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-base);
  color: var(--text-2);
  padding: 12px 0 4px;
}
.see-more:hover {
  color: var(--text);
}

/* ---- Integration manager (Plugins / MCPs / Skills with toggles) ---- */

.manager__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 0 26px;
}
.manager__tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  /* Harmless outside a draggable header; needed when used inside .chat-header. */
  -webkit-app-region: no-drag;
}
.manager__tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  color: var(--text-3);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.manager__tab:hover {
  color: var(--text-2);
}
.manager__tab[data-active='true'] {
  background: var(--surface-2);
  color: var(--text);
}
.manager__tab-count {
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.manager__search {
  margin-left: auto;
  width: 210px;
  flex: none;
}

.manager__row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 8px 0;
}
.manager__row-label {
  font-size: var(--fs-sm);
  color: var(--text-3);
  flex: none;
}

/* ---- Server card ---- */

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.card__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  min-height: 48px;
}
.card__row + .card__row {
  border-top: 1px solid var(--border);
}
.card__row-body {
  flex: 1;
  min-width: 0;
}
.card__row-title {
  font-size: var(--fs-base);
  color: var(--text);
}
.card__row-desc {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: 2px;
  line-height: 1.45;
}
.card__row-trail {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  color: var(--text-3);
  text-align: center;
}
.empty-state__icon {
  color: var(--text-2);
  margin-bottom: 10px;
}
.empty-state__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.empty-state__body {
  font-size: var(--fs-base);
  color: var(--text-3);
}

/* The whole-window error screen (CrashScreen.tsx); the strip keeps the window draggable. */
.crash-screen {
  position: relative;
  height: 100%;
  padding: 0 24px;
}
.crash-screen__drag {
  position: absolute;
  inset: 0 0 auto;
  height: 40px;
  -webkit-app-region: drag;
}
.crash-screen .empty-state__body {
  max-width: 420px;
}
.crash-screen__error {
  max-width: min(560px, 100%);
  max-height: 120px;
  margin: 8px 0 12px;
  padding: 8px 12px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-2);
  background: var(--hover);
  border-radius: 8px;
}
.crash-screen__actions {
  display: flex;
  gap: 8px;
}
/* The same screen in place of one tab, under its top bar. */
.crash-screen--pane {
  flex: 1;
  height: auto;
  min-height: 0;
}
/* In place of the sidebar or a browser panel. */
.crash-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
  color: var(--text-3);
}
.crash-panel__spacer {
  flex: 1;
}
/* A message that couldn't be drawn, in its place in the thread. */
.row-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

/* ---------------- Built-in browser panel ---------------- */

.browser {
  width: 46%;
  min-width: 320px;
  max-width: 720px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  border-left: 1px solid var(--border-soft);
}
/* Narrow windows: opening a panel hides the sidebar (state/sidePanel.ts), so
   at the 720px minimum the conversation keeps 400px and the panel 320px. If
   the sidebar is opened again on top of a panel, it is the sidebar that
   floats, over the conversation's left edge, instead of squeezing the
   conversation to a sliver; the composer's Send, at the right, stays
   uncovered. Keep 979px in step with SIDE_PANEL_NARROW. */
@media (max-width: 979px) {
  .app:has(> .browser) > .sidebar[data-open='true'] {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    flex: none;
    background: var(--canvas);
    box-shadow: var(--shadow-modal);
  }
}
/* Under 640px (a split screen, or zoomed in) even a bare panel leaves the
   conversation under 300px, and a sheet over it would cover Send (or Stop
   while the agent works in its own browser). The panel goes below the
   conversation instead, which keeps its composer at the bottom of the
   upper half. */
@media (max-width: 639px) {
  .app:has(> .browser) {
    flex-direction: column;
  }
  .app:has(> .browser) > .browser {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 45%;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  /* Mid-window now, not the window's top right edge: no caption buttons to clear, nothing to drag. */
  .app:has(> .browser) .browser__tabs {
    padding-right: 12px;
    -webkit-app-region: no-drag;
  }
}

.browser__tabs {
  height: var(--titlebar-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  /* The panel is the window's right edge, where Windows draws its caption
     buttons; its close button sat under them. */
  padding: 0 calc(12px + var(--window-controls-right)) 0 14px;
  -webkit-app-region: drag;
}
.browser__tabs .icon-btn,
.browser__tab {
  -webkit-app-region: no-drag;
}
/* Every browser panel (this one, Eaon's and a worker's) is the window's
   rightmost column, so on Windows and Linux its tab row runs under the
   caption buttons, a 44px strip (titleBarOverlay in main/index.ts): "Close
   panel" sat right where the window's own close button is drawn. The row
   grows to the strip's height, the same way the page bars beside it are
   offset, and keeps its buttons clear of --window-controls-right. */
body[data-platform='win32'] .browser__tabs,
body[data-platform='linux'] .browser__tabs {
  height: calc(var(--titlebar-h) + var(--sidebar-gap));
  padding-top: var(--sidebar-gap);
  padding-right: calc(12px + var(--window-controls-right));
}
.browser__tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  max-width: 200px;
  min-width: 0;
  padding: 0 4px 0 0;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  color: var(--text);
}
.browser__tab[data-active='false'] {
  background: transparent;
  color: var(--text-3);
}
.browser__tab-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 100%;
  padding-left: 10px;
  border-radius: inherit;
}
.browser__tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser__tab-close {
  width: 18px;
  height: 18px;
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  color: var(--text-3);
  flex: none;
}
.browser__tab-close:hover {
  background: var(--hover-strong);
  color: var(--text);
}

.browser__toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px 10px;
}
.browser__url {
  flex: 1;
  /* A flex item won't shrink below its content's minimum, and an <input>'s is
     its default width (about 170px): at the panel's 320px the menu button was
     pushed 8px past the window's edge. */
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 6px 0 12px;
  border-radius: var(--r-sm);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  margin: 0 6px;
}
.browser__url:focus-within {
  border-color: color-mix(in srgb, var(--toggle-on), transparent 30%);
}
.browser__url input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-size: var(--fs-sm);
  color: var(--text);
}
.browser__url input::placeholder {
  color: var(--text-3);
}

.browser__view {
  flex: 1;
  min-height: 0;
  display: flex;
  background: var(--canvas);
}
.browser__view webview {
  flex: 1;
  border: 0;
}
.browser__view .empty-state {
  flex: 1;
  padding: 24px;
  text-align: center;
}
.browser__error-code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-bottom: 8px;
}

/* ---- Pull requests — real data from the gh CLI ----
   Two columns under the top bar. The list column carries its own controls
   (tabs, search, sort) on the same 12px inset as its rows, so the tabs, the
   search field and every row share one left and one right edge; the detail
   reads from the top of its column, level with the tabs. */

.pr-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}
.pr-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  border-top: 1px solid var(--border-soft);
}

.pr-pane {
  /* The top bar's own inset, so the column lines up under its title. */
  --pr-inset: 16px;
  width: clamp(300px, 34%, 400px);
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--border-soft);
}
.pr-pane__head {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px var(--pr-inset) 6px;
}
/* The tabs fill the column, in equal thirds. */
.pr-pane__head .segment {
  display: flex;
  padding: 2px;
  border-radius: var(--r-md);
  background: var(--surface-1);
}
.pr-pane__head .segment__item {
  flex: 1;
  height: 28px;
}
.pr-search {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pr-search .search-field {
  flex: 1;
  min-width: 0;
}
.pr-search .icon-btn {
  flex: none;
  width: 34px;
  height: 34px;
}

.pr-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* The scrollbar's 10px always reserved and taken out of the right inset, so
     rows end where the tabs and search end, scrolling or not. */
  scrollbar-gutter: stable;
  padding: 0 calc(var(--pr-inset) - 10px) 24px var(--pr-inset);
}
.pr-list__group {
  padding: 0 10px;
  margin: 12px 0 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-3);
}
.pr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 16px;
  color: var(--text-3);
  font-size: var(--fs-sm);
  text-align: center;
}
.pr-empty--error {
  color: var(--danger);
}
.pr-empty__title {
  color: var(--text);
  font-weight: 500;
}
.pr-empty__cmd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  white-space: nowrap;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
}
.pr-empty__actions {
  display: flex;
  gap: 8px;
}

.pr-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--r-md);
  text-align: left;
  cursor: default;
  transition: background var(--dur) var(--ease);
}
.pr-row:hover {
  background: var(--hover);
}
.pr-row[data-active='true'] {
  background: var(--surface-2);
}
.pr-row__icon {
  flex: none;
  display: grid;
  place-items: center;
  height: 20px;
  color: var(--text-3);
}
.pr-row__body {
  flex: 1;
  min-width: 0;
}
.pr-row__top,
.pr-row__bottom {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pr-row__top {
  height: 20px;
}
.pr-row__bottom {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.pr-row__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-base);
  color: var(--text);
}
.pr-row__time {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.pr-row__repo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-row__branch {
  color: var(--text-3);
  opacity: 0.8;
}
.pr-row__open {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  opacity: 0;
  pointer-events: none;
}
.pr-row:hover .pr-row__open,
.pr-row:focus-within .pr-row__open {
  opacity: 1;
  pointer-events: auto;
}
.pr-row:hover .pr-row__time,
.pr-row:focus-within .pr-row__time {
  visibility: hidden;
}

/* State colours, GitHub's: open green, merged purple, closed red, draft grey. */
.pr-page [data-state='open'] {
  --pr-state: #3fb950;
}
.pr-page [data-state='merged'] {
  --pr-state: #a371f7;
}
.pr-page [data-state='closed'] {
  --pr-state: #f85149;
}
.pr-page [data-state='draft'] {
  --pr-state: var(--text-3);
}
.pr-row__icon[data-state] {
  color: var(--pr-state);
}

.pr-stats {
  flex: none;
  display: inline-flex;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.pr-stats__add {
  color: #3fb950;
}
.pr-stats__del {
  color: #f85149;
}

.pr-detail {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}
.pr-detail__empty {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 24px;
  color: var(--text-3);
  font-size: var(--fs-base);
}
.pr-detail__inner {
  max-width: 760px;
  /* Starts level with the tabs across the divider. */
  padding: 12px 32px 32px;
}
.pr-detail__repo {
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.pr-detail__title {
  margin: 6px 0 14px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}
.pr-detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 20px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.pr-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-weight: 500;
  color: var(--pr-state);
  background: color-mix(in srgb, var(--pr-state) 14%, transparent);
}
.pr-detail__branch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.pr-detail__meta .pr-stats {
  font-size: var(--fs-sm);
}
.pr-detail__time {
  color: var(--text-3);
}

/* ---------------- Models (local model hub) ---------------- */

.models-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.models-bar .search-field {
  flex: 1;
}
.models-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.models-toggle span {
  cursor: default;
}
.models-spacer {
  flex: 1;
}

.models-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 64px 0;
  color: var(--text-3);
  font-size: var(--fs-base);
}
.models-empty--error {
  color: var(--danger);
}

.model-card {
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  margin-bottom: 12px;
}
.model-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.model-card__name {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
.model-card__side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.model-card__size-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.model-fits {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.model-fits[data-fits='true'] {
  color: var(--diff-add-fg);
  background: rgba(52, 211, 153, 0.14);
}
.model-fits[data-fits='false'] {
  color: var(--text-3);
  background: var(--surface-2);
}
.model-dl-btn {
  height: 30px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text);
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition: background var(--dur) var(--ease);
}
.model-dl-btn:hover:not(:disabled) {
  background: var(--surface-4);
}
.model-dl-btn:disabled {
  opacity: 0.7;
}
.model-dl-btn--done {
  display: inline-flex;
  align-items: center;
  color: var(--text-3);
  cursor: default;
}
.model-card__downloaded {
  display: flex;
  align-items: center;
  gap: 6px;
}
.model-downloaded-list {
  margin-top: 4px;
  margin-bottom: 14px;
}
.model-downloaded-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
}
.model-downloaded-row:last-child {
  border-bottom: 0;
}
.model-downloaded-row__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.model-downloaded-row__size {
  flex: none;
  color: var(--text-3);
}
.model-card__error {
  margin-top: 8px;
  font-size: var(--fs-sm);
  color: var(--danger);
}
.model-card__desc {
  margin: 12px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.5;
}
.model-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.model-card__author {
  color: var(--text-2);
}
.model-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.model-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.model-variants-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.model-variants-btn:hover {
  color: var(--text);
}

.model-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  margin-bottom: 22px;
}
.model-detail__back:hover {
  color: var(--text);
}
.model-detail__byline {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  margin-bottom: 16px;
}
.model-detail__desc {
  font-size: var(--fs-base);
  color: var(--text-2);
  line-height: 1.55;
  max-width: 720px;
  margin: 0 0 16px;
}
.model-detail__tag {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.variants-table {
  margin-top: 4px;
}
.variants-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 90px 70px 130px;
  align-items: center;
  gap: 12px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
}
.variants-table__row--head {
  color: var(--text-3);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-bottom: 10px;
}
.variants-table__version {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.variants-table__no-fit {
  color: var(--text-4);
}
.variants-table__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.variants-table__done {
  color: var(--text-3);
}
.variants-table__pct {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.variants-table__error {
  color: var(--danger);
  max-width: 220px;
}

/* ---------------- The agent's own browser, live ---------------- */

.agent-browser__title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  -webkit-app-region: no-drag;
}
.agent-browser__live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--danger), transparent 86%);
  color: var(--danger);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.agent-browser__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: bx-pulse 1.2s ease-in-out infinite;
}
.agent-browser .header-btn {
  -webkit-app-region: no-drag;
}
.agent-browser__url {
  margin: 0;
  gap: 8px;
  color: var(--text-3);
  overflow: hidden;
}
.agent-browser__url-text {
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: nowrap;
}
.agent-browser__page-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
}
/* The page sits on a neutral stage at its own aspect, never stretched. */
.agent-browser__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0 12px;
  border-radius: var(--r-md);
  background: var(--sunken);
  border: 1px solid var(--border-soft);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transition: box-shadow var(--dur) var(--ease);
}
.agent-browser__stage[data-working] {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent), transparent 55%);
}
.agent-browser__frame {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
}
.agent-browser__empty {
  margin: auto;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.agent-browser__now {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 7px 11px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--canvas), transparent 8%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--border-soft);
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-browser__now[data-done] {
  color: var(--text-3);
}
.agent-browser__steps {
  flex: none;
  max-height: 150px;
  margin: 8px 12px 12px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
}
.agent-browser__steps li {
  display: flex;
  gap: 10px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  min-width: 0;
}
.agent-browser__step-time {
  flex: none;
  font-variant-numeric: tabular-nums;
}
.agent-browser__step-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Taking control: the picture becomes the page. A clear frame says whose turn it is. */
.agent-browser__stage[data-control] {
  box-shadow: 0 0 0 2px var(--accent);
  outline: none;
}
.agent-browser__stage[data-control] .agent-browser__frame {
  cursor: default;
}
.agent-browser__now--control {
  pointer-events: none;
  color: var(--text);
  background: color-mix(in srgb, var(--accent), var(--canvas) 82%);
}
.agent-browser__url-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text);
  outline: none;
}
.header-btn--primary {
  background: var(--accent-fill);
  color: var(--on-accent, #fff);
}
.header-btn--primary:hover {
  background: color-mix(in srgb, var(--accent-fill), #000 10%);
  color: var(--on-accent, #fff);
}
.header-btn:disabled,
.agent-browser .icon-btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* A worker's browser, in its dialog. */
.agent-browser--dialog {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agent-browser--dialog .agent-browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
}
.agent-browser--dialog .agent-browser__url {
  flex: 1;
  min-width: 0;
}
.agent-browser--dialog .agent-browser__stage {
  margin: 0;
  height: min(540px, 58vh);
  flex: none;
}
.agent-browser--dialog .agent-browser__steps {
  margin: 0;
  max-height: 110px;
}

@media (prefers-reduced-motion: reduce) {
  .agent-browser__live-dot {
    animation: none;
  }
}

/* ---------------- Pull requests: an agent's review (PrReviewPanel.tsx) ---------------- */

.pr-review {
  margin-top: 28px;
  padding: 16px 18px 18px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--border-soft);
}
.pr-review__head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.pr-review__title {
  flex: 1;
  font-size: var(--fs-base);
  font-weight: 600;
}
.pr-review__text {
  margin: 10px 0 14px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-2);
}
.pr-review__waiting {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pr-review__draft {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.pr-review__label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-3);
}
.pr-review__summary {
  min-height: 140px;
  resize: vertical;
}
.pr-review__comment {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pr-review__comment textarea {
  min-height: 64px;
  resize: vertical;
}
.pr-review__where {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.pr-review__fine {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.pr-review__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.pr-review__error {
  margin: 12px 0 0;
  font-size: var(--fs-sm);
  color: var(--danger, #e5484d);
}
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  color: var(--accent, var(--text));
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------- Linear (LinearPage.tsx) ---------------- */

.linear-state {
  flex: none;
  width: 10px;
  height: 10px;
  margin: 3px 2px 0;
  border-radius: 50%;
}
.linear-started {
  font-size: var(--fs-xs);
  color: var(--accent, var(--text-2));
}
.linear-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.linear-pill .linear-state {
  margin: 0;
  width: 8px;
  height: 8px;
}
.linear-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
}
.linear-description {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.linear-who {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.linear-connect {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  margin: 12vh auto 0;
  padding: 0 24px;
  text-align: center;
}
.linear-connect__row {
  display: flex;
  gap: 8px;
  width: 100%;
}
.linear-connect__row .input {
  flex: 1;
}


/* ---------------- One pull request: Overview, Files, Checks, Merge (PullRequestsPage.tsx) ---------------- */

.pr-detail__inner {
  max-width: 920px;
}
.pr-detail__num {
  color: var(--text-3);
  font-weight: 400;
}
.pr-tabs {
  margin: 0 0 16px;
}
.pr-muted {
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.pr-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 14px;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.pr-reviewer {
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  text-transform: none;
}
.pr-reviewer[data-state='APPROVED'] {
  color: var(--diff-add-fg);
}
.pr-reviewer[data-state='CHANGES_REQUESTED'] {
  color: var(--danger);
}
.pr-body {
  padding: 14px 16px;
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  font-size: var(--fs-base);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pr-files .review-file {
  margin: 0 0 6px;
}
.pr-checks {
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.pr-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 0.5px solid var(--border-soft);
  font-size: var(--fs-sm);
}
.pr-check:first-child {
  border-top: 0;
}
.pr-check[data-status='passed'] svg:first-child {
  color: var(--diff-add-fg);
}
.pr-check[data-status='failed'] svg:first-child {
  color: var(--danger);
}
.pr-check[data-status='pending'] svg:first-child,
.pr-check[data-status='skipped'] svg:first-child {
  color: var(--text-3);
}
.pr-check__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pr-check__status {
  color: var(--text-3);
  text-transform: capitalize;
}
.pr-merge {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pr-merge__status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 0.5px solid var(--border);
  border-left: 3px solid var(--diff-add-fg);
  border-radius: var(--r-md);
  background: var(--surface-1);
  font-size: var(--fs-sm);
}
.pr-merge__status > span {
  flex: 1;
}
.pr-merge__status[data-tone='warn'] {
  border-left-color: #d29922;
}
.pr-merge__status[data-tone='bad'] {
  border-left-color: var(--danger);
}
.pr-merge__status[data-tone='done'] {
  border-left-color: #a371f7;
}
.pr-merge__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pr-merge__label {
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.pr-merge__body {
  resize: vertical;
  font: inherit;
  font-size: var(--fs-sm);
}
.pr-merge__check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.pr-merge__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
.pr-merge__spacer {
  flex: 1;
}
.pr-merge__close {
  color: var(--danger);
}

/* Settings → Models → Hugging Face: a speech-to-text model, which chat can't run (HubBrowser.tsx). */
.model-speech-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  background: var(--hover);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.model-speech-note > svg {
  flex: none;
  color: var(--text-3);
}
.model-speech-note > span {
  flex: 1 1 260px;
  min-width: 0;
}
.model-speech-note .btn {
  flex: none;
  margin-left: auto;
}
/* ---------------- In-app browser (BrowserPanel) and Design Mode ----------------
   Builds on the .browser panel in pages.css, which the agents' live browsers
   share. This one is resizable, can fill the window, keeps a page per tab and
   carries Design Mode's tray under the page. */

.browser--web {
  position: relative;
  width: 520px;
  max-width: none;
  min-width: 340px;
}
/* Filling the window beside the sidebar: the page it was beside steps aside
   (still mounted, so terminals and streams carry on). */
.browser--web[data-expanded] {
  flex: 1;
  width: auto;
  border-left: 0;
}
.app[data-browser-expanded] > .main {
  display: none;
}

.browser__resize {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3px;
  width: 6px;
  z-index: 5;
  cursor: col-resize;
  -webkit-app-region: no-drag;
}
.browser__resize::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.browser__resize:hover::after,
body[data-resizing='browser'] .browser__resize::after {
  opacity: 0.6;
}
/* A page under the pointer would take the drag. */
body[data-resizing='browser'],
body[data-resizing='browser'] * {
  cursor: col-resize !important;
  user-select: none;
}
body[data-resizing='browser'] webview {
  pointer-events: none;
}

/* ---- Tabs ---- */

.browser--web .browser__tabs {
  gap: 2px;
  padding-left: 10px;
}
.browser__tab-strip {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.browser__tab-strip::-webkit-scrollbar {
  display: none;
}
.browser--web .browser__tab {
  flex: 0 1 180px;
  min-width: 64px;
  -webkit-app-region: no-drag;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.browser--web .browser__tab[data-active='false']:hover {
  background: var(--hover);
  color: var(--text-2);
}
.browser--web .browser__tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.browser--web .browser__tab-label {
  flex: 1;
  min-width: 0;
}
.browser--web .browser__tab-close {
  opacity: 0;
}
.browser--web .browser__tab[data-active='true'] .browser__tab-close,
.browser--web .browser__tab:hover .browser__tab-close {
  opacity: 1;
}
.browser__new-tab {
  -webkit-app-region: no-drag;
}
.browser__favicon {
  flex: none;
  border-radius: 3px;
  object-fit: contain;
}
.browser__spin {
  flex: none;
  animation: browser-spin 900ms linear infinite;
  color: var(--text-3);
}
@keyframes browser-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Toolbar ---- */

.browser--web .browser__toolbar {
  gap: 2px;
  padding: 2px 10px 8px;
}
.browser--web .browser__url {
  margin: 0 4px;
  height: 30px;
  padding: 0 10px;
  gap: 7px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.browser--web .browser__url[data-focused] {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--canvas);
}
.browser__url-icon {
  flex: none;
  color: var(--text-3);
}
.browser__design {
  margin-right: 2px;
}
.browser__design[data-active] {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.browser__design[data-active]:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}

.browser__design-hint {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 8px;
  padding: 6px 6px 6px 10px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  color: var(--text);
  font-size: var(--fs-xs);
}
.browser__design-hint > svg {
  flex: none;
  color: var(--accent);
}
.browser__design-hint > span {
  flex: 1;
  min-width: 0;
}
.browser__design-hint kbd,
.browser-start kbd {
  display: inline-block;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--surface-3);
  border: 0.5px solid var(--border-strong);
  font: inherit;
  font-size: var(--fs-xxs);
  line-height: 16px;
  text-align: center;
  color: var(--text-2);
}
.browser__design-done {
  flex: none;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--accent);
}
.browser__design-done:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.browser__find {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 12px 8px;
  padding: 0 4px 0 10px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
}
.browser__find input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-size: var(--fs-sm);
  color: var(--text);
}
.browser__find-count {
  min-width: 36px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}

/* ---- Pages ---- */

.browser--web .browser__view {
  position: relative;
  overflow: hidden;
}
/* Every tab's page stays alive; only the active one is shown. Pages stay in
   the flex flow and an inactive one collapses to nothing (Electron's advice
   for hiding a <webview>): taken out of the flow, a page kept the size it
   was created at, laying out at the window's width inside a narrow panel. */
.browser__view webview.browser__page {
  flex: 0 1;
  width: 0;
  height: 0;
  border: 0;
}
.browser__view webview.browser__page[data-active] {
  flex: 1 1 auto;
  width: auto;
  height: auto;
}
.browser__view[data-design]::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
}

.browser__toast {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--menu-bg);
  backdrop-filter: var(--frost);
  box-shadow: var(--shadow-menu);
  font-size: var(--fs-sm);
  color: var(--text);
  animation: browser-toast-in 220ms var(--ease);
  z-index: 2;
}
@keyframes browser-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 6px);
  }
}

.browser-start {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  background: var(--canvas);
}
.browser-start__inner {
  max-width: 440px;
  margin: 0 auto;
  padding: 56px 20px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.browser-start__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--text-2);
}
.browser-start__title {
  margin: 14px 0 6px;
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--text);
}
.browser-start__lede {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-3);
  text-align: center;
  text-wrap: pretty;
}
.browser-start__section {
  align-self: stretch;
  margin-top: 26px;
}
.browser-start__label {
  padding: 0 10px 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-3);
}
.browser-start__row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  color: var(--text-3);
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.browser-start__row:hover {
  background: var(--hover);
}
.browser-start__row-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: var(--text);
}
.browser-start__row-url {
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
}
.browser-start .browser__banner {
  align-self: stretch;
  margin: 28px 0 0;
}

.browser-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  background: var(--canvas);
  color: var(--text-3);
  text-align: center;
}
.browser-error__title {
  margin-top: 6px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
}
.browser-error__body {
  max-width: 340px;
  font-size: var(--fs-sm);
  text-wrap: pretty;
}
.browser-error__url {
  max-width: 340px;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  color: var(--text-4);
}

/* ---- Design Mode's tray ---- */

.design-tray {
  flex: none;
  display: flex;
  flex-direction: column;
  max-height: 42%;
  border-top: 1px solid var(--border-soft);
  background: var(--canvas);
}
.design-tray__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 8px 8px;
}
.design-tray__title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 8px 0 6px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}
.design-tray__title:hover {
  background: var(--hover);
}
.design-tray__title > svg:first-child {
  color: var(--accent);
}
.design-tray__count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  font-size: var(--fs-xxs);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.design-tray__chevron {
  color: var(--text-3);
  transition: transform var(--dur) var(--ease);
}
.design-tray__chevron[data-collapsed] {
  transform: rotate(-90deg);
}

.design-send {
  display: inline-flex;
}
.design-send__main {
  max-width: 220px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.design-send__main > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.design-send__more {
  padding: 0 6px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--bg) 30%, transparent);
}

.design-tray__list {
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0 8px 8px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.design-note {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  border-radius: var(--r-md);
  transition: background var(--dur) var(--ease);
}
.design-note:hover,
.design-note[data-editing] {
  background: var(--surface-1);
}
.design-note__index {
  flex: none;
  width: 16px;
  padding-top: 2px;
  font-size: var(--fs-xxs);
  font-variant-numeric: tabular-nums;
  color: var(--text-4);
  text-align: right;
}
.design-note__thumb {
  flex: none;
  width: 64px;
  height: 44px;
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border-soft);
  display: grid;
  place-items: center;
}
.design-note__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface-1) 0 50%) 0 0 / 10px 10px;
}
.design-note__thumb--none {
  color: var(--text-4);
}
.design-note__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.design-note__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding-right: 52px;
}
.design-note[data-editing] .design-note__meta {
  padding-right: 0;
}
.design-note__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  color: var(--accent);
}
.design-note__source {
  flex: none;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  color: var(--text-3);
}
.design-note__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.design-note__text[data-empty] {
  color: var(--text-3);
}
.design-note__field {
  width: 100%;
  min-height: 52px;
  max-height: 140px;
  resize: vertical;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--canvas);
  outline: none;
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text);
}
.design-note__field::placeholder {
  color: var(--text-3);
}
.design-note__edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
}
.design-note__actions {
  position: absolute;
  top: 5px;
  right: 6px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.design-note:hover .design-note__actions,
.design-note:focus-within .design-note__actions {
  opacity: 1;
}
.design-note__actions .icon-btn {
  width: 24px;
  height: 24px;
}
/* The settings window: left navigation column and the settings body. */

:root {
  --settings-w: 664px;
}

.settings {
  display: flex;
  height: 100%;
  /* Transparent: `body` paints the window — see app.css. */
}

.settings__nav {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  display: flex;
  flex-direction: column;
  /* Just the gutter — the panel inside paints, and `body` paints behind it.
     Matches the app's floating sidebar so the left column reads the same
     whether you are in the app or in settings. */
  padding: var(--sidebar-gap);
  user-select: none;
}

/* Same floating card as `.sidebar__panel` in app.css. */
.settings__nav-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-panel);
  overflow: hidden;
}

/* The traffic lights sit inside this row, so it has to be tall enough to hold
   them with room to breathe: they end at y 33 and this row runs to y 44 once
   the panel's 8px top inset is counted. At the old 36px the "Back to app"
   button started 4px under the buttons and read as if it were colliding. */
.settings__nav-top {
  height: var(--titlebar-h);
  flex: none;
  -webkit-app-region: drag;
}

.settings__back {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 30px;
  margin: 0 7px 4px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  color: var(--text-2);
  width: calc(100% - 14px);
  text-align: left;
}
.settings__back:hover {
  background: var(--hover);
  color: var(--text);
}

.settings__search {
  padding: 0 12px 2px;
}

.settings__nav-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 7px 16px;
  /* Items scrolled up fade out under the search field instead of being
     sliced through their middle at its edge. */
  mask-image: linear-gradient(to bottom, transparent 0, #000 10px);
}

.settings__no-match {
  padding: 12px 8px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.settings__group {
  padding: 0 8px;
  margin: 12px 0 2px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.settings__group:first-child {
  margin-top: 4px;
}

.settings__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* The rail's Search button (below): only in a narrow window. */
.settings__search-btn {
  display: none;
}

/* Narrow windows (a split screen, a small laptop, or zoomed in): at the
   window's 720px minimum, 252px of navigation left Model providers' key
   panel about 90px, one word per line. The nav becomes an icon rail; each
   item keeps its name as a tooltip and an accessible label (SettingsShell).
   The rail is as wide as the window's buttons need (the traffic lights end
   at x 79), and its Search button opens the whole panel over the page,
   names and search field included, until a page is picked. */
@media (max-width: 859px) {
  .settings__nav {
    position: relative;
    z-index: 20;
    width: max(68px, calc(var(--window-controls-left) + var(--sidebar-gap)));
    flex-basis: max(68px, calc(var(--window-controls-left) + var(--sidebar-gap)));
  }
  .settings__nav[data-expanded] .settings__nav-panel {
    position: absolute;
    top: var(--sidebar-gap);
    bottom: var(--sidebar-gap);
    left: var(--sidebar-gap);
    width: calc(var(--sidebar-w) - 2 * var(--sidebar-gap));
    background: var(--menu-bg);
    -webkit-backdrop-filter: var(--frost);
    backdrop-filter: var(--frost);
    box-shadow: var(--shadow-menu);
  }
  .settings__nav:not([data-expanded]) :is(.settings__search, .settings__back span, .nav-item__label, .nav-item__where) {
    display: none;
  }
  .settings__nav:not([data-expanded]) .settings__search-btn {
    display: flex;
  }
  .settings__nav:not([data-expanded]) .settings__back,
  .settings__search-btn {
    justify-content: center;
    padding: 0;
  }
  .settings__nav:not([data-expanded]) .nav-item {
    justify-content: center;
    padding: 0;
  }
  /* The group names are hidden; a hairline keeps the groups apart. */
  .settings__nav:not([data-expanded]) .settings__group {
    height: 1px;
    margin: 8px 12px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
    background: var(--border-soft);
  }
  .settings__nav:not([data-expanded]) .settings__group:first-child {
    display: none;
  }
  .settings__scroll {
    padding: 0 16px 90px;
  }
}
.settings__search-btn {
  align-items: center;
  height: 30px;
  margin: 0 7px 4px;
  width: calc(100% - 14px);
  border-radius: var(--r-sm);
  color: var(--text-2);
}
.settings__search-btn:hover {
  background: var(--hover);
  color: var(--text);
}
.settings__titlebar {
  /* Matches the nav panel's inset row so both columns start together. */
  height: calc(var(--titlebar-h) + var(--sidebar-gap));
  flex: none;
  -webkit-app-region: drag;
}
.settings__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* The page doesn't jump sideways between pages that scroll and pages
     that don't. */
  scrollbar-gutter: stable both-edges;
  padding: 0 24px 90px;
}
.settings__inner {
  width: var(--settings-w);
  max-width: 100%;
  margin: 0 auto;
}

/* Opening a page: its parts rise into place a beat apart, top first. Keyed on
   the page (SettingsShell), so it plays on every switch. Only `from` is
   given, so nothing is left transformed afterwards to trap fixed or sticky
   children. */
.settings__inner.settings__page > * {
  animation: settings-page-in 420ms var(--spring-slow) both;
}
.settings__inner.settings__page > :nth-child(2) {
  animation-delay: 30ms;
}
.settings__inner.settings__page > :nth-child(3) {
  animation-delay: 60ms;
}
.settings__inner.settings__page > :nth-child(4) {
  animation-delay: 90ms;
}
.settings__inner.settings__page > :nth-child(5) {
  animation-delay: 120ms;
}
.settings__inner.settings__page > :nth-child(n + 6) {
  animation-delay: 150ms;
}
/* Model providers fills the pane with its own columns: it arrives as one. */
.settings__full.settings__page {
  animation: settings-page-in 420ms var(--spring-slow) both;
}
@keyframes settings-page-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.settings__h1 {
  font-size: var(--fs-title);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 15px 0 0;
}
.settings__lede {
  font-size: var(--fs-base);
  color: var(--text-2);
  margin: 10px 0 0;
}

/* A page in tabs (Workers): the row under the title, a bar under the open
   tab that slides to the next, and the open tab's content below. */
.settings-tabs {
  position: relative;
  display: flex;
  gap: 22px;
  margin-top: 18px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.settings-tabs::-webkit-scrollbar {
  display: none;
}
.settings-tabs__tab {
  display: flex;
  flex: none;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 1px;
  font-size: var(--fs-base);
  color: var(--text-3);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.settings-tabs__tab:hover {
  color: var(--text-2);
}
.settings-tabs__tab[aria-selected='true'] {
  color: var(--text);
}
/* Inside the ring, which the row's scrolling would clip outside it. */
.settings-tabs__tab:focus-visible {
  outline: none;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 2px var(--focus-ring);
}
.settings-tabs__bar {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition:
    transform 280ms var(--spring-slow, var(--ease)),
    width 280ms var(--spring-slow, var(--ease));
}
.settings-tabpanel {
  padding-top: 8px;
  animation: settings-page-in 320ms var(--spring-slow) both;
}
@media (prefers-reduced-motion: reduce) {
  .settings-tabs__bar {
    transition: none;
  }
  .settings-tabpanel {
    animation: none;
  }
}

/* A tab found by a search, in the nav: the page it's on, after its name. */
.nav-item__where {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.settings__section {
  margin-top: 30px;
}
.settings__section-label {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-bottom: 10px;
}

.row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  min-height: 52px;
}
.row + .row {
  border-top: 1px solid var(--border);
}
.row__body {
  flex: 1;
  min-width: 0;
}
.row__title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
}
.row__desc {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: 3px;
  line-height: 1.45;
  /* Paths and addresses have no spaces to break at. */
  overflow-wrap: anywhere;
}
.row__trail {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}
/* When a wide control (a select, a path field) would leave the text under
   220px, the control moves under the text instead of squeezing it into a
   word per line. Wide rows look exactly as before. */
.row:has(> .row__body) {
  flex-wrap: wrap;
}
.row:has(> .row__body) > .row__body {
  flex: 1 1 220px;
}
.row:has(> .row__body) > .row__trail {
  margin-left: auto;
}
.row--stack {
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
}
.row--stack.row > .row__body {
  flex: 1;
}
.row--stack.row > .row__trail {
  margin-left: 0;
}

/* App icon picker (Appearance). The images keep the macOS icon grid's margin,
   so the selection ring sits a few pixels clear of the tile, concentric with
   its corners, as in macOS's own icon pickers. */

.app-icon-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  justify-items: center;
  gap: 14px 4px;
  padding: 0 16px 16px;
}
/* The picker sits under its row, so the row after it needs the divider rows draw between themselves. */
.app-icon-picker + .row {
  border-top: 1px solid var(--border);
}
.app-icon-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.app-icon-choice__image {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 15px;
  box-shadow: 0 0 0 2px transparent;
  transition: box-shadow 0.12s ease;
}
.app-icon-choice:hover .app-icon-choice__image {
  box-shadow: 0 0 0 2px var(--border);
}
.app-icon-choice[data-active='true'] .app-icon-choice__image {
  box-shadow: 0 0 0 2px var(--accent);
}
.app-icon-choice:focus-visible {
  outline: none;
}
.app-icon-choice:focus-visible .app-icon-choice__image {
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.app-icon-choice__label {
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.app-icon-choice[data-active='true'] .app-icon-choice__label {
  color: var(--text);
}

/* Theme picker */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 14px;
}
.theme-grid--two {
  /* Two cards, each the size of the three above them. */
  grid-template-columns: repeat(3, 1fr);
}
/* Settings → Accounts → Usage meter: a title over picture cards. */
.meter-choice {
  margin-top: 18px;
}
.meter-choice__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.meter-choice__title {
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 500;
}
.meter-choice__hint {
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.meter-choice + .card {
  margin-top: 20px;
}
.meter-preview {
  display: block;
  width: 100%;
  height: 100%;
}
.theme-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.theme-card__preview {
  width: 100%;
  aspect-ratio: 213 / 148;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border);
  display: flex;
}
.theme-card[data-active='true'] .theme-card__preview {
  border-color: var(--fg);
  box-shadow: 0 0 0 1px var(--fg);
}
.theme-card__label {
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.theme-card[data-active='true'] .theme-card__label {
  color: var(--text);
}
.theme-card__half {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.theme-card__bar {
  height: 7px;
  border-radius: 3px;
}
.theme-card__panel {
  margin-top: auto;
  border-radius: 6px 6px 0 0;
  padding: 8px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 62px;
}

/* Appearance → Glass: a corner of a page with a project menu open over it.
   The menu is frosted with the app's own tokens, so it moves with the
   sliders exactly as the real menus do. */
.glass-preview {
  position: relative;
  height: 148px;
  margin: 14px 16px 2px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
}
.glass-preview__page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 0 22px;
  background: var(--canvas);
}
/* A patch of colour for the blur to soften, under where the menu sits. */
.glass-preview__glow {
  position: absolute;
  top: -40px;
  left: 44%;
  width: 220px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 75%, transparent), transparent);
}
.glass-preview__title {
  position: relative;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}
.glass-preview__chips {
  position: relative;
  display: flex;
  gap: 8px;
  white-space: nowrap;
}
.glass-preview__chips > span {
  padding: 4px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.glass-preview__menu {
  position: absolute;
  top: 14px;
  left: max(170px, 40%);
  width: 196px;
  padding: 4px;
  background: var(--menu-bg);
  -webkit-backdrop-filter: var(--frost);
  backdrop-filter: var(--frost);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-menu);
}
body[data-see-through='on'] .glass-preview__menu {
  background: var(--glass-float);
  -webkit-backdrop-filter: var(--glass-blur-float);
  backdrop-filter: var(--glass-blur-float);
}
.glass-preview__search {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -4px -4px 4px;
  padding: 7px 12px;
  border-bottom: 0.5px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.glass-preview__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  font-size: var(--fs-sm);
  color: var(--text);
}
.glass-preview__row > svg {
  color: var(--text-2);
}

/* Diff preview under the theme picker */

.diff-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.7;
}
.diff-preview__side {
  padding: 8px 0;
  overflow: hidden;
}
.diff-preview__line {
  display: flex;
  gap: 12px;
  padding: 0 12px;
  white-space: pre;
}
.diff-preview__num {
  color: var(--text-4);
  min-width: 14px;
  text-align: right;
  flex: none;
}
.diff-preview__line[data-mark='del'] {
  background: rgba(255, 69, 58, 0.12);
  box-shadow: inset 3px 0 0 var(--danger);
}
.diff-preview__line[data-mark='add'] {
  background: rgba(48, 209, 88, 0.12);
  box-shadow: inset 3px 0 0 #30d158;
}
.tok-key {
  color: #c792ea;
}
.tok-str {
  color: #7ec699;
}
.tok-num {
  color: #f78c6c;
}
.tok-name {
  color: #82aaff;
}
.tok-punc {
  color: var(--text-3);
}

.banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--r-lg);
  background: var(--danger-soft);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin-bottom: 12px;
}
.banner__icon {
  color: var(--danger);
  flex: none;
  margin-top: 1px;
}

.shortcut-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  min-height: 52px;
}
.shortcut-row + .shortcut-row {
  border-top: 1px solid var(--border);
}
.shortcut-row__body {
  flex: 1;
  min-width: 0;
}
.shortcut-row__keys {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
.shortcut-row__key {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kv {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: 12px;
}

.provider-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
}
.provider-card__name {
  font-size: var(--fs-base);
  font-weight: 500;
}
.provider-card__meta {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: 2px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xxs);
  background: var(--surface-3);
  color: var(--text-2);
}
.badge--ok {
  background: rgba(48, 209, 88, 0.16);
  /* A fixed light green was about 1.6:1 on a light theme; this one has a dark value there. */
  color: var(--diff-add-fg);
}
.badge--warn {
  background: var(--danger-soft);
  color: var(--danger);
}
.key-input {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.key-input .input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.model-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.model-pill {
  font-size: var(--fs-xs);
  color: var(--text-2);
  background: var(--surface-3);
  border-radius: var(--r-xs);
  padding: 3px 8px;
}

/* ==================================================================
   Model Providers — full-bleed two-pane layout (list + detail), and
   the "Add Custom Provider" modal. Accents come from --provider-accent,
   which now derives from the app's theme accent (see tokens.css) — it
   used to be a fixed warm hex, which read as a bug against a blue app.
   ================================================================== */

.providers-shell {
  display: flex;
  height: 100%;
  min-height: 0;
}

.providers-list {
  width: 300px;
  flex: none;
  overflow-y: auto;
  padding: 0 10px 24px;
  border-right: 1px solid var(--border-soft);
}

.providers-list__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 8px 18px;
  position: sticky;
  top: 0;
  background: var(--canvas);
  z-index: 1;
}

.providers-list__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.providers-list__group {
  padding: 0 8px;
  margin: 16px 0 6px;
  font-size: var(--fs-sm);
  color: var(--text-3);
  letter-spacing: -0.005em;
}
.providers-list__group:first-of-type {
  margin-top: 0;
}

.provider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 42px;
  padding: 0 8px;
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--fs-base);
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.provider-row:hover {
  background: var(--hover);
}
.provider-row[data-active='true'] {
  background: var(--surface-2);
}
.provider-row__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-row__badge {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
}

.providers-detail {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 30px 32px 80px;
}

@media (max-width: 859px) {
  .providers-list {
    width: 232px;
  }
  .providers-detail {
    padding: 30px 20px 80px;
  }
}

.provider-detail__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.provider-detail__name {
  font-size: var(--fs-title);
  font-weight: 400;
  letter-spacing: -0.02em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-detail__section {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.provider-detail__section-title {
  font-size: var(--fs-h2);
  font-weight: 600;
  margin-bottom: 8px;
}
.provider-detail__section-desc {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 14px;
}

.key-field {
  position: relative;
  display: flex;
  align-items: center;
}
.key-field input {
  width: 100%;
  height: 40px;
  padding: 0 76px 0 14px;
  border-radius: var(--r-md);
  background: var(--sunken);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--text);
  outline: none;
}
.key-field input:focus {
  border-color: var(--provider-accent);
}
.key-field input::placeholder {
  color: var(--text-3);
  font-family: var(--font-ui);
  letter-spacing: normal;
}
.key-field__actions {
  position: absolute;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.provider-detail__advanced-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}
.provider-detail__hint {
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: none;
  font-size: var(--fs-sm);
  color: var(--text);
  transition: background var(--dur) var(--ease);
}
.pill-btn:hover {
  background: var(--hover);
}

.provider-detail__advanced {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.field-label {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-bottom: 6px;
}
.fallback-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.provider-detail__section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 8px;
}
.provider-detail__section-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.model-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 6px 0;
}
.model-row + .model-row {
  border-top: 1px solid var(--border);
}
.model-row__name {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
}
.model-row__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
}
.model-row__spacer {
  flex: 1;
}
.model-row__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.model-row:hover .model-row__actions,
.model-row__actions:focus-within {
  opacity: 1;
}
/* The star sits outside the hover-only actions: a starred model keeps
   showing its star, so the toggle reads as a state, not a hidden button. */
.model-row__star {
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.model-row:hover .model-row__star,
.model-row__star:focus-visible,
.model-row__star[data-on='true'] {
  opacity: 1;
}
.model-row__star[data-on='true'] {
  color: var(--provider-accent);
}
/* "Added" (by hand) and "Edited" next to a model's name. */
.model-row__tag {
  font-size: var(--fs-xs);
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 7px;
  line-height: 18px;
}

/* Edit model, in place of its row. */
.model-row[data-editing] {
  align-items: stretch;
}
.model-editor {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 8px 0 6px;
}
.model-editor__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}
.model-editor__field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.model-editor__mono {
  font-family: var(--font-mono);
}
.model-editor__mono[readonly] {
  color: var(--text-3);
}
.model-editor__toggles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.model-editor__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.model-editor__toggle b {
  color: var(--text);
  font-weight: 500;
  margin-right: 6px;
}
.model-editor__actions,
.provider-connection__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 720px) {
  .model-editor__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.model-row--hidden .model-row__name {
  color: var(--text-2);
  font-weight: 400;
}

.add-model-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 2px;
}

.empty-models {
  padding: 18px 0 4px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

/* ---- Radio (API format choice in the Add Custom Provider modal) ---- */

.radio-row {
  display: flex;
  align-items: center;
  gap: 22px;
}
.radio-option {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-base);
  color: var(--text);
}
.radio-dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: grid;
  place-items: center;
  flex: none;
  transition: border-color var(--dur) var(--ease);
}
.radio-dot[data-on='true'] {
  border-color: var(--provider-accent);
}
.radio-dot__fill {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--provider-accent);
  transform: scale(0);
  transition: transform var(--dur) var(--ease);
}
.radio-dot[data-on='true'] .radio-dot__fill {
  transform: scale(1);
}

/* ---- Provider-accent button variants (used only in this area) ---- */

.btn--provider {
  background: var(--accent-fill);
  color: var(--on-accent);
}
.btn--provider:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent-fill), #000 12%);
}
.btn--provider-ghost {
  background: none;
  color: var(--provider-accent);
}
.btn--provider-ghost:hover:not(:disabled) {
  background: var(--provider-accent-soft);
}

.provider-detail__header .switch[data-on='true'] {
  background: var(--provider-accent);
}

.settings__full {
  flex: 1;
  min-height: 0;
  display: flex;
}

/* ---- System Monitor: stat values and usage bars ---- */

.stat-value {
  font-size: var(--fs-base);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* A key shown in part, as a field rather than loose text floating mid-row (Local API Server). */
.key-chip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-2);
  white-space: nowrap;
}
.usage {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.usage__track {
  width: 74px;
  height: 8px;
  border-radius: var(--r-pill);
  /* Not --surface-4: in light themes that is lighter than the card, so the
     fill floated with no track around it. */
  background: color-mix(in srgb, var(--text), transparent 88%);
  overflow: hidden;
  flex: none;
}
.usage__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--provider-accent);
  transition: width 400ms var(--ease);
}
.usage__value {
  font-size: var(--fs-base);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 62px;
  text-align: right;
}

/* ---------------- Colour theme picker ---------------- */

.theme-swatch-grid {
  display: grid;
  /* Auto-fit rather than a fixed count so the row reflows instead of squashing
     when the settings pane narrows. */
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.theme-swatch {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.theme-swatch__preview {
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  border: 1px solid var(--border);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.theme-swatch:hover .theme-swatch__preview {
  border-color: var(--border-strong);
}
.theme-swatch[data-active] .theme-swatch__preview {
  border-color: var(--fg);
  box-shadow: 0 0 0 1px var(--fg);
}
.theme-swatch__side {
  width: 34%;
  flex: none;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.theme-swatch__body {
  flex: 1;
  min-width: 0;
  padding: 8px 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.theme-swatch__bar {
  height: 5px;
  border-radius: 2.5px;
  flex: none;
}
.theme-swatch__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  margin-bottom: 2px;
}
.theme-swatch__pill {
  margin-top: auto;
  align-self: flex-end;
  width: 30%;
  height: 8px;
  border-radius: 4px;
  flex: none;
}
.theme-swatch__name {
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.theme-swatch[data-active] .theme-swatch__name {
  color: var(--text);
}


/* ---------------- Plugin catalog ---------------- */

.plugin-list {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.plugin-row-group + .plugin-row-group {
  border-top: 1px solid var(--border);
}

/* The list clips overflow, which cut the focus ring off; it sits inside the row instead. */
.plugin-row:focus-visible {
  outline-offset: -2px;
}
.plugin-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 16px;
  min-height: 60px;
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.plugin-row:hover {
  background: var(--hover);
}
.plugin-row__logo {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.plugin-row__logo img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.plugin-row__fallback {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
}
.plugin-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plugin-row__name {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
}
.plugin-row__desc {
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.plugin-row__status {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.plugin-row__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
}
.plugin-row__chevron {
  flex: none;
  color: var(--text-3);
  transition: transform var(--dur) var(--ease);
}
.plugin-row__chevron[data-open] {
  transform: rotate(180deg);
}

.plugin-row__panel {
  padding: 0 16px 16px 64px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plugin-row__form {
  display: flex;
  gap: 8px;
}
.plugin-row__form .input {
  flex: 1;
  min-width: 0;
}
.plugin-row__note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-3);
  line-height: 1.5;
}
.plugin-row__note--error {
  color: var(--danger);
}
.plugin-row__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm);
  color: var(--link);
}
.plugin-row__link:hover {
  text-decoration: underline;
}


/* ---------------- Credits (settings/pages/Credits.tsx) ---------------- */

.credits-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 30px 20px 28px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  text-align: center;
}
.credits-hero__line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 0.4em;
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
}
.credits-hero__sub {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.credits-heart {
  flex: none;
  color: var(--danger);
  transform-origin: center;
  animation: credits-beat 2.4s ease-in-out infinite;
}
@keyframes credits-beat {
  0%,
  100% {
    transform: scale(1);
  }
  8% {
    transform: scale(1.18);
  }
  16% {
    transform: scale(1);
  }
  24% {
    transform: scale(1.12);
  }
  34% {
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .credits-heart {
    animation: none;
  }
}
body[data-reduce-motion='on'] .credits-heart {
  animation: none;
}

.credits-label {
  margin: 22px 0 8px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.credits-person {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.credits-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
}

/* ---------------- Star prompt (components/StarPrompt.tsx) ---------------- */

/* A card in the bottom corner, over whatever is open, until it is answered;
   under dialogs (.layer is 100), so it never covers a dialog's buttons. */
.star-card {
  position: fixed;
  right: 20px;
  /* Above the message box when it would cover it (useCornerClear, StarPrompt.tsx). */
  bottom: var(--corner-card-bottom, 20px);
  z-index: 96;
  width: min(360px, calc(100vw - 40px));
  padding: 14px 16px 16px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-modal);
  animation: star-card-in var(--dur-slow, 240ms) var(--ease) both;
}
@keyframes star-card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
body[data-reduce-motion='on'] .star-card {
  animation: none;
}
.star-card__head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.star-card__icon {
  flex: none;
  color: #f0b429;
}
.star-card__title {
  flex: 1;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
}
.star-card__close {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: -4px;
  border-radius: var(--r-xs);
  color: var(--text-3);
}
.star-card__close:hover {
  background: var(--hover-strong);
  color: var(--text);
}
.star-card__text {
  margin: 10px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-2);
}
.star-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.star-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 16px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  color: var(--text);
  font-size: var(--fs-sm);
  transition: background var(--dur) var(--ease);
}
.star-card__btn:hover:not(:disabled) {
  background: var(--surface-4);
}
.star-card__btn--github {
  flex: 1;
  background: color-mix(in srgb, #f0b429 16%, var(--surface-2));
  box-shadow: 0 0 0 1px color-mix(in srgb, #f0b429 22%, transparent);
}
.star-card__btn--github:hover:not(:disabled) {
  background: color-mix(in srgb, #f0b429 24%, var(--surface-2));
}
.star-card__btn:disabled {
  opacity: 0.6;
}

/* ---------------- Settings → ADE: terminal theme ---------------- */

.ade-themes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.ade-theme {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 6px;
  border-radius: var(--r-md);
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.ade-theme:hover {
  background: var(--hover);
}
.ade-theme[data-on] {
  background: var(--surface-3);
  box-shadow: 0 0 0 1.5px var(--accent, var(--text-2));
}
.ade-theme__swatch {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 52px;
  padding: 8px;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--border-soft);
  overflow: hidden;
}
.ade-theme__swatch[data-own] {
  background: var(--surface-1);
}
.ade-theme__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.ade-theme__text {
  position: absolute;
  top: 6px;
  left: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
}
.ade-theme__name {
  overflow: hidden;
  font-size: var(--fs-sm);
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A closing note under a page's cards (Browser control's "had the extension?"). */
.settings__fine {
  margin: 18px 2px 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-3);
}

/* Settings → Remote devices → Control from anywhere: the code to check while linking. */
.rc-link {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rc-link__code {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.08em;
}
/* Styles for the themes feature: the grouped colour-theme picker in
   Settings → Appearance. The swatches themselves live in settings.css. */

.theme-group + .theme-group {
  margin-top: 22px;
}

/* Quieter than the section label above it: these split one picker into two
   shelves rather than start a new section. */
.theme-group__label {
  margin-top: 14px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-3);
}
.theme-group__label + .theme-swatch-grid {
  margin-top: 10px;
}
/*
 * The Code tab: an Eaon Code session. Built on the Chat and Work styles
 * (.chat-header, .thread, .composer, .tool, .diff) so the three tabs read as
 * one app; only what is specific to Eaon Code lives here. Every colour mixes
 * from the theme tokens.
 */

.code-fill {
  flex: 1;
}

/* ---------------- Header ---------------- */

/* The title is what gives way when the row is tight; the controls never wrap. */
.code-header__title {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 34%;
  color: var(--text-2);
}
.code-header .header-btn,
.code-header .chat-header__actions {
  flex: none;
  white-space: nowrap;
}
/* A narrow window (or a browser panel beside the terminals) keeps the
   header's icons and drops their labels; each keeps its title. */
@container main (max-width: 1100px) {
  /* Counts (the review button's pending comments) are information, not a label: they stay. */
  .code-header .chat-header__actions .header-btn:not(.usage-pill) > span:not(.review-btn__count) {
    display: none;
  }
  .code-header .chat-header__actions .header-btn:not(.usage-pill) {
    padding: 0 7px;
  }
}
.code-folder {
  gap: 6px;
  /* Room for project / session. */
  max-width: 420px;
  color: var(--text);
}
/* A narrow window: the chip gives way and its names ellipsise, the session's
   first, rather than running on under the Chat / Workers / ADE switch. */
.code-header .header-btn.code-folder {
  flex: 0 1 auto;
  min-width: 0;
}
.code-folder > svg {
  flex: none;
}
.code-folder__name + .code-folder__sep + .code-folder__name {
  flex-shrink: 4;
}
.code-folder[data-open='true'] {
  background: var(--hover-strong);
}
.code-folder__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.code-folder__chevron {
  flex: none;
  color: var(--text-3);
}

.code-stats {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 10px 0 8px;
  margin-right: 4px;
  border-radius: var(--r-pill);
  background: var(--sunken);
  box-shadow: inset 0 0 0 1px var(--border-soft);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  -webkit-app-region: no-drag;
}
.code-stats__ring {
  flex: none;
  transform: rotate(-90deg);
}
.code-stats__track {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 2.4;
}
.code-stats__fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--dur-spring-slow) var(--spring-slow);
}
.code-stats[data-level='mid'] .code-stats__fill {
  stroke: #e3a33b;
}
.code-stats[data-level='high'] .code-stats__fill {
  stroke: var(--danger);
}
.code-stats__percent {
  color: var(--text);
  font-weight: 500;
}
.code-stats__sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-4);
}

/* ---------------- Home, folder picker, failures ---------------- */

.code-home {
  overflow-y: auto;
  padding-bottom: 24px;
}
/* Centred top to bottom in the pane (the shared .home stopped centring when
   Chat's home moved its composer down). Auto margins rather than
   justify-content, so a long Recent list scrolls from its top instead of
   being cut off above the pane. */
.code-home > :first-child {
  margin-top: auto;
}
.code-home > :last-child {
  margin-bottom: auto;
}
.code-home__stack {
  width: var(--composer-w);
  max-width: calc(100% - 48px);
  display: flex;
  flex-direction: column;
}
.code-home__stack .code-composer {
  width: 100%;
  max-width: 100%;
}
.code-home__title--tight {
  margin-bottom: 10px;
}
.code-home__lede {
  margin: 0 0 22px;
  max-width: 420px;
  text-align: center;
  color: var(--text-2);
  font-size: var(--fs-base);
  line-height: 1.5;
}
.code-home__cta {
  height: 34px;
  padding: 0 16px;
}
.code-home__crash {
  width: var(--composer-w);
  max-width: calc(100% - 48px);
  margin-bottom: 12px;
}

.code-project-bar__status {
  cursor: default;
}
.code-project-bar__status:hover {
  background: none;
  color: var(--text-3);
}
.code-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--diff-add-fg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--diff-add-fg), transparent 82%);
}

.code-recents {
  width: 440px;
  max-width: calc(100% - 48px);
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.code-recents__label {
  padding: 0 10px 6px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.code-recents__row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--r-md);
  color: var(--text-2);
  text-align: left;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.code-recents__row:hover {
  background: var(--hover);
  color: var(--text);
}
.code-recents__name {
  flex: none;
  color: var(--text);
  font-weight: 500;
}
.code-recents__path {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  text-align: left;
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
}

.code-failure {
  width: 520px;
  max-width: calc(100% - 48px);
  padding: 20px;
  border-radius: var(--r-xl);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.code-failure__head {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--danger);
  font-size: var(--fs-h2);
  font-weight: 500;
}
.code-failure__message {
  margin: 10px 0 0;
  color: var(--text);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.code-failure__log {
  margin: 12px 0 0;
  max-height: 200px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--sunken);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.code-failure__actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.code-crash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: var(--composer-chat-w);
  max-width: calc(100% - 48px);
  margin: 0 auto 8px;
  padding: 10px 10px 10px 12px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--danger), var(--surface-1) 90%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger), transparent 72%);
}
.code-home__crash .code-crash {
  width: 100%;
  max-width: 100%;
}
.code-crash__icon {
  flex: none;
  margin-top: 2px;
  color: var(--danger);
}
.code-crash__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.code-crash__title {
  font-size: var(--fs-sm);
  color: var(--text);
}
.code-crash__log {
  margin: 0;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 72px;
  overflow: hidden;
}

.code-toast {
  position: absolute;
  left: 50%;
  bottom: 118px;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(560px, calc(100% - 48px));
  padding: 8px 8px 8px 14px;
  border-radius: var(--r-lg);
  background: var(--menu-bg);
  backdrop-filter: var(--frost);
  box-shadow: var(--shadow-menu);
  color: var(--text);
  font-size: var(--fs-sm);
  animation: code-toast-in var(--dur-spring) var(--spring-moderate) both;
}
@keyframes code-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 6px);
  }
}

/* ---------------- Transcript ---------------- */

.code-user__images {
  display: block;
  margin-top: 4px;
  color: var(--text-3);
  font-size: var(--fs-xs);
}

/* Blocks stack with the rhythm of prose, tool rows tighter. */
.code-assistant {
  display: flex;
  flex-direction: column;
  white-space: normal;
}
.code-assistant > .code-text + .code-text,
.code-assistant > .tool + .code-text,
.code-assistant > .activity + .code-text,
.code-assistant > .code-thinking + .code-text {
  margin-top: 8px;
}
.code-assistant > .code-text + .tool,
.code-assistant > .code-text + .activity {
  margin-top: 6px;
}
.code-text {
  white-space: pre-wrap;
}
.code-thinking {
  margin-bottom: 2px;
}
.code-thinking .thinking__body[data-open='true'] .code-thinking__text {
  padding: 4px 0 8px 12px;
}
.code-thinking__text {
  overflow: hidden;
  min-height: 0;
  margin-left: 3px;
  border-left: 1.5px solid var(--border);
  padding-left: 12px;
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 320px;
  overflow-y: auto;
}

.code-stopped {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.code-model-tag {
  align-self: center;
  margin-left: 4px;
  color: var(--text-4);
  font-size: var(--fs-xxs);
  font-family: var(--font-mono);
}

/* Tool rows: the Work styles plus a diff count and swarm roles. */
.code-tool__stat {
  display: flex;
  gap: 6px;
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
}
.code-tool__hint {
  flex: none;
  font-size: var(--fs-xs);
}
.code-tool .tool__panel .diff:last-child {
  margin-bottom: 0;
}
.tool__output[data-error] {
  color: color-mix(in srgb, var(--danger), var(--text-2) 30%);
}
.code-tool__agents {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 6px 26px;
}
.code-tool__agent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--fs-xxs);
}
.code-tool__agent svg {
  color: var(--diff-add-fg);
}
.code-tool__agent[data-error] svg {
  color: var(--danger);
}
.code-tool__agent-files {
  color: var(--text-3);
}

/* A shell command the user ran with `!`: the user's own action, so it keeps
   a card where the agent's calls are plain lines. */
.code-bash {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
.code-bash .tool__head {
  height: 32px;
  padding: 0 10px;
  cursor: default;
}
.code-bash .tool__panel {
  padding: 0 10px 10px;
}
.code-bash .tool__head:hover {
  background: none;
}
.code-bash__command {
  min-width: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.code-bash__command::before {
  content: '$ ';
  color: var(--text-3);
}
.code-bash__tag {
  flex: none;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-3);
  font-size: var(--fs-xxs);
}
.code-bash__tag[data-error] {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Retries, compaction, extension notes: quiet, centred, expandable. */
.code-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.code-notice__head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 26px;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--border-soft);
  color: var(--text-2);
  font-size: var(--fs-xs);
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.code-notice__head:not(:disabled):hover {
  background: var(--surface-2);
}
.code-notice[data-tone='warning'] .code-notice__head {
  color: #e3a33b;
  background: color-mix(in srgb, #e3a33b, var(--surface-1) 90%);
}
.code-notice[data-tone='error'] .code-notice__head {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger), var(--surface-1) 90%);
}
.code-notice__detail {
  align-self: stretch;
  max-height: 320px;
  overflow-y: auto;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.code-custom__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--text-3);
  font-size: var(--fs-xs);
}

/* ---------------- Composer ---------------- */

.code-dock {
  flex-direction: column;
  align-items: center;
}
.code-composer__box[data-shell] {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--diff-add-fg), transparent 55%);
}
.code-composer__box[data-shell] .composer__input {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* Messages queued behind the running turn, above the box they came from. */
.code-queue {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 12px -14px;
  padding: 8px 12px 22px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--border-soft);
  animation: tool-in var(--dur-spring) var(--spring-moderate) both;
}
.code-queue__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.code-queue__kind {
  flex: none;
  color: var(--text-2);
  font-weight: 500;
}
.code-queue__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: var(--fs-sm);
}
.code-queue__clear {
  position: absolute;
  top: 6px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  color: var(--text-3);
  font-size: var(--fs-xxs);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.code-queue__clear:hover {
  background: var(--hover-strong);
  color: var(--text);
}
.code-queue__widget {
  margin: 0;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  white-space: pre-wrap;
}

/* `/` completion, opening upward out of the composer. */
.code-slash {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  padding: 5px;
  max-height: 300px;
  overflow-y: auto;
  border-radius: var(--r-lg);
  background: var(--surface-3);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--shadow-menu);
  animation: tool-panel-in var(--dur-spring-fast) var(--spring-fast) both;
}
.code-slash__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 30px;
  padding: 6px 9px;
  border-radius: var(--r-sm);
  text-align: left;
}
.code-slash__item[data-active] {
  background: var(--hover-strong);
}
.code-slash__name {
  flex: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.code-slash__desc {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.code-slash__source {
  flex: none;
  color: var(--text-4);
  font-size: var(--fs-xxs);
}

.code-shell-hint,
.code-status-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-left: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.code-shell-hint {
  color: var(--diff-add-fg);
}

.code-modes[data-unsupported] .mode-pill {
  opacity: 0.45;
}
.code-explain {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 10px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.5;
}
.code-explain strong {
  color: var(--text);
  font-weight: 500;
}

/* ---------------- Onboarding ---------------- */

.code-onboarding {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  padding: 7vh 24px 40px;
}
.code-onboarding__card {
  width: 540px;
  max-width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.code-onboarding__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border-soft);
  color: var(--text);
}
.code-onboarding__title {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.code-onboarding__lede {
  margin: 0 0 24px;
  color: var(--text-2);
  line-height: 1.55;
}
.code-checks {
  align-self: stretch;
  margin: 0 0 18px;
  padding: 4px;
  list-style: none;
  border-radius: var(--r-xl);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--border-soft);
  text-align: left;
}
.code-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px;
}
.code-check + .code-check {
  border-top: 1px solid var(--border-soft);
}
.code-check__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--danger-soft);
  color: var(--danger);
}
.code-check[data-ok] .code-check__mark {
  background: var(--diff-add-bg);
  color: var(--diff-add-fg);
}
.code-check__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.code-check__title {
  color: var(--text);
}
.code-check__detail {
  color: var(--text-3);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}
.code-onboarding__hint {
  margin: -4px 0 18px;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.code-onboarding__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.code-onboarding__actions .btn {
  height: 34px;
  padding: 0 14px;
}
.code-onboarding__command {
  margin: 14px 0 0;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.code-onboarding__command code,
.code-onboarding__hint code,
.code-explain code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--sunken);
}
.code-onboarding__log {
  align-self: stretch;
  margin: 16px 0 0;
  max-height: 180px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--sunken);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  line-height: 1.5;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.code-onboarding__error {
  align-self: stretch;
  margin-top: 14px;
  text-align: left;
}
.code-onboarding__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 26px;
  color: var(--link);
  font-size: var(--fs-sm);
}
.code-onboarding__link:hover {
  text-decoration: underline;
}

/* ---------------- Extension dialogs ---------------- */

.code-dialog__options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.code-dialog__option {
  height: 36px;
  padding: 0 12px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  color: var(--text);
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.code-dialog__option:hover,
.code-dialog__option:focus-visible {
  background: var(--surface-4);
}
.code-dialog__editor {
  width: 100%;
  min-height: 220px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* ---------------- Sidebar and settings ---------------- */

.code-session__age {
  color: var(--text-4);
  font-size: var(--fs-xxs);
  font-variant-numeric: tabular-nums;
}
.code-sidebar__muted {
  color: var(--text-2);
}
.code-settings__path {
  width: 220px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

/* ------------------------------------------------------------------ ADE sessions (sidebar) */

/* Projects, each with its sessions; the open session is a card with its agents. */
.ade-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
  --ade-working: #f0a33a;
  --ade-live: #34c759;
}
.ade-project + .ade-project {
  margin-top: 8px;
}
.ade-project__head {
  position: relative;
  display: flex;
  align-items: center;
}
.ade-project__row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 34px;
  padding: 0 34px 0 8px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-base);
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.ade-project__row:hover {
  background: var(--hover);
}
.ade-project__icon {
  flex: none;
  color: var(--ade-working);
}
.ade-project__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ade-project__count {
  flex: none;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.ade-project__add {
  position: absolute;
  right: 6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-xs);
  color: var(--text-3);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ade-project__head:hover .ade-project__add,
.ade-project__add:focus-visible {
  opacity: 1;
}
.ade-project__add:hover {
  background: var(--hover-strong);
  color: var(--text);
}

.ade-session {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ade-session[data-active='true'] {
  background: var(--surface-2);
  border-color: var(--border);
  margin: 2px 0;
}
.ade-session__row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 7px 10px 7px 10px;
  border-radius: var(--r-lg);
  text-align: left;
  color: var(--text);
}
.ade-session:not([data-active='true']) .ade-session__row:hover {
  background: var(--hover);
}
.ade-session[data-active='true'] .ade-session__row {
  cursor: default;
}
.ade-session__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ade-session__title,
.ade-session__branch {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ade-session__title {
  font-size: var(--fs-base);
  line-height: 1.3;
}
.ade-session__branch {
  font-size: var(--fs-sm);
  color: var(--text-3);
}
/* A project that is just its own folder: its New session button sits on its row. */
.ade-session__add {
  top: 7px;
}
/* Uncommitted lines, +added −removed, at the row's end; the + button takes the spot on hover. */
.ade-session__diff {
  display: flex;
  gap: 5px;
  margin-left: auto;
  padding-top: 1px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ade-session__diff-add {
  color: var(--diff-add-fg);
}
.ade-session__diff-del {
  color: var(--diff-del-fg);
}
.ade-session:hover:has(> .ade-session__add) .ade-session__diff {
  visibility: hidden;
}
.ade-session[data-solo='true'] .ade-session__row {
  padding-right: 34px;
}
.ade-session:hover > .ade-session__add {
  opacity: 1;
}
.ade-session[data-state='missing'] .ade-session__title {
  color: var(--text-3);
}

/* A session's state: grey when nothing runs, green when its agents wait, an orange ring while one works. */
.ade-state {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--text-4);
}
.ade-state[data-state='live'] {
  background: var(--ade-live);
}
.ade-state[data-state='missing'] {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--text-4);
}
.ade-state[data-state='working'],
.ade-spinner {
  background: transparent;
  border: 2px solid color-mix(in srgb, var(--ade-working) 22%, transparent);
  border-top-color: var(--ade-working);
  border-right-color: var(--ade-working);
  animation: spin 900ms linear infinite;
}
.ade-state[data-state='working'] {
  width: 11px;
  height: 11px;
  margin-top: 4px;
  margin-left: -1px;
  margin-right: -1px;
}
body[data-reduce-motion='on'] .ade-state,
body[data-reduce-motion='on'] .ade-spinner {
  animation: none !important;
}

.ade-agents {
  padding: 0 6px 6px;
}
.ade-agents__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 5px 6px 5px 26px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.ade-agents__head:hover {
  background: var(--hover);
}
.ade-agents__chevron {
  color: var(--text-3);
  transition: rotate var(--dur) var(--ease);
}
.ade-agents__head[aria-expanded='false'] .ade-agents__chevron {
  rotate: -90deg;
}
.ade-agent {
  display: grid;
  grid-template-columns: 14px 15px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 5px 6px 5px 6px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-align: left;
}
.ade-agent:hover {
  background: var(--hover);
  color: var(--text);
}
.ade-agent__status {
  color: var(--ade-live);
}
.ade-agent[data-kind='exited'] .ade-agent__status {
  color: var(--text-4);
}
.ade-agent .ade-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 1px;
}
.ade-agent__task {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ade-agent__age {
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.ade-agents__more {
  width: 100%;
  padding: 4px 6px 4px 29px;
  border-radius: var(--r-sm);
  text-align: left;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.ade-agents__more:hover {
  background: var(--hover);
  color: var(--text-2);
}

/* The header: project / session (the branch is in the sidebar). */
.code-folder__sep {
  flex: none;
  color: var(--text-4);
}

/* ------------------------------------------------------------------ ADE session dialogs */

.ade-dialog {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* The flex gap spaces the fields; the modal's own field margin would double it. */
.modal__body .ade-dialog .field + .field {
  margin-top: 0;
}
.ade-dialog__lede {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-base);
  line-height: 1.45;
}
.ade-dialog__hint {
  margin: -6px 0 0;
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.ade-dialog__error {
  margin: 0;
  color: var(--danger);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.ade-dialog__branch {
  position: relative;
  display: flex;
  align-items: center;
}
.ade-dialog__branch svg {
  position: absolute;
  left: 10px;
  color: var(--text-3);
  pointer-events: none;
}
.ade-dialog__branch .input {
  width: 100%;
  padding-left: 30px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.ade-dialog__branch .input[aria-invalid='true'] {
  border-color: var(--danger);
}
.ade-dialog__agents {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ade-dialog__agent {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ade-dialog__agent:hover {
  background: var(--hover);
}
.ade-dialog__agent[data-on='true'] {
  border-color: var(--accent);
  background: var(--surface-2);
  color: var(--text);
}
.ade-dialog__check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.ade-dialog__check input {
  margin-top: 3px;
}

/* ------------------------------------------------------------------ Settings → ADE: import */

.ade-import {
  border-top: 1px solid var(--border-soft);
}
.ade-import__bar,
.ade-import__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.ade-import__foot {
  justify-content: flex-end;
  border-top: 1px solid var(--border-soft);
}
.ade-import__toggle {
  color: var(--link);
  font-size: var(--fs-sm);
}
.ade-import__toggle:hover {
  text-decoration: underline;
}
.ade-import__list {
  max-height: 380px;
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ade-import__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--border-soft);
  cursor: pointer;
}
.ade-import__item:hover {
  background: var(--hover);
}
.ade-import__item[data-already='true'] {
  cursor: default;
  opacity: 0.6;
}
.ade-import__item input {
  margin-top: 3px;
}
.ade-import__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ade-import__name {
  color: var(--text);
  font-size: var(--fs-base);
}
.ade-import__in {
  color: var(--text-3);
}
.ade-import__meta,
.ade-import__latest {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ade-import__meta {
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.ade-import__latest {
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.ade-import__counts {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.ade-import__counts > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ade-import__age {
  min-width: 28px;
  justify-content: flex-end;
}
.ade-import__done {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--text-2);
}
.ade-import__error {
  color: var(--danger);
}

/* ------------------------------------------------------------------ review
   The review panel beside the terminals (code/ReviewPanel.tsx). */

.code-body {
  flex: 1;
  min-height: 0;
  display: flex;
}
.code-body > .term-workspace {
  min-width: 0;
}
.review-btn__count {
  min-width: 16px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent, #fff);
  font-size: 10.5px;
  line-height: 16px;
  text-align: center;
}
.review {
  flex: none;
  display: flex;
  flex-direction: column;
  width: min(460px, 42%);
  min-width: 320px;
  margin: 2px 10px 10px 0;
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg);
  overflow: hidden;
}
.review__head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 8px 14px;
  border-bottom: 0.5px solid var(--border-soft);
}
.review__title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
}
.review__branch {
  overflow: hidden;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.review__scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 0 12px;
}
.review__empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  color: var(--text-3);
  font-size: 12.5px;
}
.review__empty--error {
  color: var(--danger);
}
.review__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 0.5px solid var(--border-soft);
}
.review__label {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
}
.review__muted {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.45;
}
.review__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.review__check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  color: var(--text-2);
  font-size: 12px;
}
.review-form__body {
  resize: vertical;
  min-height: 0;
  font: inherit;
  font-size: 12.5px;
}
.review-pr {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.review-pr__title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  text-align: left;
}
.review-pr__title:hover .review-pr__name {
  text-decoration: underline;
}
.review-pr__num {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.review-pr__name {
  overflow: hidden;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.review-pr__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  color: var(--text-3);
  font-size: 11.5px;
}
.review-pr__badge {
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--diff-add-fg) 18%, transparent);
  color: var(--diff-add-fg);
  text-transform: capitalize;
}
.review-pr[data-state='MERGED'] .review-pr__badge {
  background: color-mix(in srgb, #a371f7 20%, transparent);
  color: #a371f7;
}
.review-pr[data-state='CLOSED'] .review-pr__badge {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  color: var(--danger);
}
.review-pr__checks {
  display: inline-flex;
  gap: 8px;
}
.review-pr__pass {
  color: var(--diff-add-fg);
}
.review-pr__fail {
  color: var(--danger);
}
.review__files-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px 6px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
}
.review__add,
.review__del {
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.review__add {
  color: var(--diff-add-fg);
}
.review__del {
  color: var(--diff-del-fg);
}
.review-file {
  margin: 0 8px 6px;
}
.review-file__head {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 5px 6px;
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 12px;
  text-align: left;
}
.review-file__head:hover {
  background: var(--hover);
}
.review-file__chev {
  flex: none;
  color: var(--text-3);
  transition: transform 120ms ease;
}
.review-file__chev[data-open] {
  transform: rotate(90deg);
}
.review-file__status {
  flex: none;
  width: 12px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}
.review-file__status[data-status='added'] {
  color: var(--diff-add-fg);
}
.review-file__status[data-status='deleted'] {
  color: var(--diff-del-fg);
}
.review-file__path {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  white-space: nowrap;
  text-overflow: ellipsis;
  direction: rtl;
  text-align: left;
}
.review-file__comments {
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent, #fff);
  font-size: 10.5px;
  line-height: 16px;
}
.review-file__note {
  padding: 4px 10px 8px 32px;
}
/* The chat's diff card, flattened into the panel: no card, no height cap. */
.diff.review-diff {
  margin: 2px 0 0;
  padding: 0;
  border-radius: var(--r-md);
}
.review-diff .diff__body {
  max-height: none;
  margin: 0;
  font-size: 12px;
  line-height: 19px;
}
.review-diff__hunk {
  padding: 2px 10px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--text-3);
  font-size: 11px;
}
.review-diff__row {
  cursor: pointer;
}
.review-diff__row:hover {
  outline: 0.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: -0.5px;
}
.review-diff__plus {
  position: absolute;
  top: 3px;
  left: 4px;
  color: var(--accent);
  opacity: 0;
}
.review-diff__row:hover .review-diff__plus {
  opacity: 1;
}
.review-comment {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 8px 6px calc(var(--diff-ln) * 2 + 8px);
  padding: 8px 8px 8px 10px;
  border: 0.5px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--bg);
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.45;
  white-space: normal;
}
.review-comment__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.review-comment__body {
  min-width: 0;
  overflow-wrap: anywhere;
}
.review-comment__body .md__p,
.review-comment__preview .md__p {
  margin-bottom: 6px;
}
.review-comment__where {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11px;
}
.review-comment__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.review-comment__preview {
  min-height: 58px;
  padding: 6px 9px;
  border: 0.5px solid var(--border);
  border-radius: var(--r-sm);
  overflow-wrap: anywhere;
}
.review-comment__preview:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
}
/* The lines a comment being written covers. */
.review-diff__row[data-picked] {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
}
.review-file__adrift {
  display: flex;
  flex-direction: column;
  padding: 2px 0 4px;
}
.review-file__adrift > .review__muted {
  padding: 2px 10px 0 32px;
}
.review-file__adrift .review-comment {
  margin-left: 32px;
}
.review-stale .review-comment {
  margin: 0;
}
.review-comment--draft {
  flex-direction: column;
  align-items: stretch;
  white-space: normal;
}
.review-comment--draft textarea {
  resize: vertical;
  font: inherit;
}
.review__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 0.5px solid var(--border-soft);
}
.review__foot-count {
  margin-right: auto;
  color: var(--text-2);
  font-size: 12px;
}

/* The pull request form's head: its label, and the branch it goes into. */
.review-form__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.review-form__base {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: 12px;
}

/* CI checks (code/ReviewChecks.tsx). */
.review-checks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.review-check__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  font-size: 12px;
}
.review-check__icon {
  flex: none;
  color: var(--text-3);
}
.review-check[data-status='passed'] .review-check__icon {
  color: var(--diff-add-fg);
}
.review-check[data-status='failed'] .review-check__icon {
  color: var(--danger);
}
.review-check__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.review-check__status {
  color: var(--text-3);
  font-size: 11.5px;
  text-transform: capitalize;
}
.review-check__error {
  padding: 0 0 6px 22px;
}
.review-log {
  max-height: 280px;
  margin: 4px 0 6px;
  padding: 8px 10px;
  overflow: auto;
  border: 0.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--code-bg, var(--surface-2));
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre;
}
.review-log__cut {
  color: var(--text-3);
  font-style: italic;
}
.review-checks__more {
  align-self: flex-start;
  padding: 2px 0;
  color: var(--text-3);
  font-size: 11.5px;
}
.review-checks__more:hover {
  color: var(--text);
}

/* Conflicts (code/ReviewConflicts.tsx). */
.review-conflicts {
  background: color-mix(in srgb, var(--danger) 5%, transparent);
}
.review-conflict__row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.review-conflict__file {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 12px;
  text-align: left;
}
.review-conflict__file:hover {
  background: var(--hover);
}
.review-conflicts__ask {
  margin-right: auto;
}
.review-resolver {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 8px 18px;
}
.review-resolver__note {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0 6px 24px;
}
.review-resolver__block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 0.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
}
.review-resolver__block[data-chosen] {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}
.review-resolver__head {
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 500;
}
.review-resolver pre {
  margin: 0;
  padding: 4px 8px;
  overflow: auto;
  max-height: 180px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre;
}
.review-resolver__lead {
  color: var(--text-3);
}
.review-resolver__side {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.review-resolver__label {
  color: var(--text-3);
  font-size: 11px;
}
.review-resolver__side[data-side='ours'] pre {
  background: color-mix(in srgb, var(--diff-add-fg) 10%, transparent);
}
.review-resolver__side[data-side='theirs'] pre {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.review-resolver__side[data-side='base'] pre {
  background: var(--hover);
}
.review-resolver__choices .btn[data-on] {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
}
.review-resolver__count {
  margin-right: auto;
}

/* Session over SSH: the add-a-host fields. */
.ade-remote__host {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ade-remote__row {
  display: flex;
  gap: 10px;
}
.ade-remote__row > .field:first-child {
  flex: 1;
}
.ade-remote__port {
  width: 90px;
}
.ade-remote__back {
  align-self: flex-start;
  color: var(--accent);
  font-size: 12px;
}

/* New session: starting one on another machine instead, at the far left of the buttons. */
.ade-dialog__ssh {
  margin-right: auto;
  gap: 6px;
}
/* Styles for the scheduler feature: the Scheduled page and its editor. */

.page__inner--sched {
  width: 680px;
}

.sched-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.sched-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 8px 8px 8px 14px;
  border-radius: var(--r-md);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: var(--fs-sm);
}
.sched-alert > span {
  flex: 1;
}

/* ---- Task card ---- */

.sched-task {
  padding: 16px 16px 4px;
  animation: sched-in var(--dur-spring) var(--spring-moderate) backwards;
}
@keyframes sched-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.sched-task__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.sched-task__icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-2);
}
.sched-task__icon[data-mode='work'] {
  background: color-mix(in srgb, var(--accent), transparent 84%);
  color: color-mix(in srgb, var(--accent), var(--fg) 30%);
}
.sched-task__icon[data-mode='purchase'] {
  background: color-mix(in srgb, var(--fg), transparent 90%);
  color: var(--text);
}
.sched-task[data-paused='true'] .sched-task__icon,
.sched-task[data-paused='true'] .sched-task__name {
  opacity: 0.55;
}
.sched-task__body {
  flex: 1;
  min-width: 0;
}
.sched-task__name {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sched-task__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.sched-task__prompt {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.sched-task__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.sched-task__actions .switch {
  margin-left: 8px;
}

/* Next run / Last run: a two-column key–value block under the header. */
.sched-task__facts {
  margin: 14px 0 0 44px;
  padding: 10px 0 8px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 6px;
}
.sched-fact {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  font-size: var(--fs-sm);
}
.sched-fact dt {
  color: var(--text-3);
}
.sched-fact dd {
  margin: 0;
  min-width: 0;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sched-muted {
  color: var(--text-3);
}

.sched-last {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  text-align: left;
  color: var(--text);
  border-radius: var(--r-xs);
}
.sched-last:not(:disabled):hover .sched-last__detail,
.sched-last:not(:disabled):hover .sched-last__status {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--text-4);
}
.sched-last__when {
  flex: none;
  color: var(--text-3);
}
.sched-last__detail {
  min-width: 0;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status: a dot for finished runs, the app spinner for a live one. */
.sched-status__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-4);
}
.sched-status__dot[data-status='succeeded'] {
  background: var(--diff-add-fg);
}
.sched-status__dot[data-status='failed'] {
  background: var(--danger);
}
.sched-status__spinner {
  flex: none;
  color: var(--accent);
}
[data-status='failed'].sched-last__status,
[data-status='failed'].sched-run__status {
  color: var(--danger);
}
.sched-status__dot[data-status='missed'],
.sched-status__dot[data-status='skipped'] {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--text-4);
}

/* ---- Run history ---- */

.sched-history {
  margin-left: 44px;
  border-top: 1px solid var(--border);
}
.sched-history__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  font-size: var(--fs-sm);
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
}
.sched-history__toggle:hover {
  color: var(--text);
}
.sched-history__count {
  margin-left: 2px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  font-size: var(--fs-xxs);
  line-height: 17px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.sched-history__list {
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
  animation: sched-in var(--dur-spring) var(--spring-moderate);
}
.sched-run {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 32px;
  padding: 0 8px;
  margin: 0 -8px;
  box-sizing: content-box;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  text-align: left;
  color: var(--text-2);
  transition: background var(--dur) var(--ease);
}
.sched-run:not(:disabled):hover {
  background: var(--hover);
}
.sched-run:disabled {
  cursor: default;
}
.sched-run__when {
  flex: none;
  width: 124px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sched-run__status {
  flex: none;
  width: 132px;
}
.sched-run__detail {
  flex: 1;
  min-width: 0;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sched-run__duration {
  flex: none;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.sched-run__chevron {
  flex: none;
  color: var(--text-4);
}
.sched-history__policy {
  margin: 0 0 4px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* A run's record, opened from its line. */
.sched-run__record {
  margin: 2px 0 10px 17px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  animation: sched-in var(--dur-spring) var(--spring-moderate);
}
.sched-run__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin: 0;
}
.sched-run__facts dt {
  color: var(--text-3);
}
.sched-run__facts dd {
  margin: 0;
  min-width: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}
.sched-run__error {
  margin: 10px 0 0;
  padding: 8px 10px;
  max-height: 160px;
  overflow: auto;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sched-run__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.sched-run__actions:empty {
  display: none;
}

/* ---- Editor ---- */

/* The modal can outgrow a short window; the form scrolls, the actions stay. */
/*
 * The form is its own scroll box reaching the dialog's edges. The dialog
 * body around it gives up its focus-ring margin for that; with both, the
 * form was 18px wider than the body, and focusing a field near the right
 * edge scrolled the whole dialog sideways.
 */
.modal__body:has(> .sched-form) {
  margin-inline: -22px;
  padding-inline: 0;
}
.sched-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding: 2px 22px;
  color: var(--text);
}
.sched-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.sched-field > .input {
  width: 100%;
}
.sched-field .field-label {
  display: block;
}
.sched-field__hint {
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.sched-form__prompt {
  min-height: 84px;
  resize: vertical;
}
.sched-form__error {
  margin-right: auto;
  font-size: var(--fs-sm);
  color: var(--danger);
}

/* The modal sits on --surface-3, which is also the resting fill of selects,
   segments and buttons — so inside the form they take the input look
   instead, or they would vanish into the sheet. */
.sched-form .select,
.sched-form__btn {
  background: var(--sunken);
  border: 1px solid var(--border);
}
.sched-form .select:hover,
.sched-form .select[data-open='true'],
.sched-form__btn:hover:not(:disabled) {
  background: var(--hover-strong);
}
.sched-form .segment {
  padding: 2px;
  border-radius: calc(var(--r-sm) + 2px);
  background: var(--sunken);
  border: 1px solid var(--border);
}
.sched-form .segment__item[data-active='true'] {
  background: var(--surface-4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.sched-seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sched-picker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}
.sched-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.sched-input {
  height: 30px;
  font-variant-numeric: tabular-nums;
}
.sched-input--num {
  width: 72px;
}
.sched-input--time {
  width: 120px;
}
.sched-input--datetime {
  width: 220px;
}

.sched-days {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.sched-days__row {
  display: flex;
  gap: 4px;
}
.sched-day {
  width: 32px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--sunken);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sched-day:hover {
  color: var(--text);
}
.sched-day[data-on='true'] {
  background: color-mix(in srgb, var(--toggle-on), transparent 78%);
  border-color: color-mix(in srgb, var(--toggle-on), transparent 45%);
  color: var(--text);
  font-weight: 500;
}
.sched-days__presets {
  display: flex;
  gap: 12px;
}
.sched-link {
  font-size: var(--fs-xs);
  color: var(--link);
}
.sched-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sched-cron {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
}
.sched-cron .sched-inline {
  flex-wrap: wrap;
  max-width: 100%;
}
.sched-input--cron {
  width: 190px;
  min-width: 0;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.sched-input--zone {
  width: 190px;
  min-width: 0;
}
.sched-cron__reads {
  font-size: var(--fs-sm);
  color: var(--text);
}
.sched-upcoming {
  margin: -4px 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.sched-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.sched-preview[data-error='true'] {
  color: var(--danger);
}

.sched-folder {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 0 4px 0 11px;
  border-radius: var(--r-sm);
  background: var(--sunken);
  border: 1px solid var(--border);
  color: var(--text-3);
}
.sched-folder__path {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sched-toggle {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--sunken);
  border: 1px solid var(--border);
}
.sched-toggle__body {
  flex: 1;
  min-width: 0;
}
.sched-toggle__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.sched-toggle__desc {
  margin-top: 3px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text-3);
}

@media (prefers-reduced-motion: reduce) {
  .sched-task,
  .sched-history__list {
    animation: none;
  }
}
/* Settings → Browser extension. */

.bx-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  font-size: var(--fs-sm);
  color: var(--text-2);
  white-space: nowrap;
}
.bx-status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-4);
}
.bx-status[data-state='on'] {
  color: var(--text);
}
/* Green for connected is a fixed hue for the same reason as the diff colours:
   it has to read as "working" whatever accent the theme picks. */
.bx-status[data-state='on'] .bx-status__dot {
  background: var(--diff-add-fg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--diff-add-fg), transparent 78%);
}
.bx-status[data-state='waiting'] .bx-status__dot {
  background: var(--accent);
  animation: bx-pulse 1.6s ease-in-out infinite;
}
.bx-status[data-state='error'],
.bx-status[data-state='paused'] {
  background: var(--danger-soft);
  color: var(--danger);
}
.bx-status[data-state='error'] .bx-status__dot,
.bx-status[data-state='paused'] .bx-status__dot {
  background: var(--danger);
}
@keyframes bx-pulse {
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bx-status__dot {
    animation: none !important;
  }
}

.bx-port {
  width: 96px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bx-pair .row__trail {
  gap: 4px;
}
.bx-code {
  margin-right: 6px;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  background: var(--sunken);
  border: 1px solid var(--border);
  font: 600 17px/1.2 var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--text);
  user-select: all;
  font-variant-numeric: tabular-nums;
}

.bx-steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.bx-steps li {
  padding-left: 2px;
}
.bx-steps li > span {
  margin-right: 8px;
}
.bx-steps code,
.bx-path__text {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text);
}
.bx-steps .btn {
  vertical-align: middle;
}

.bx-path {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 6px 6px 11px;
  border-radius: var(--r-sm);
  background: var(--sunken);
  border: 1px solid var(--border);
}
.bx-path__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* The end of a long path is the part that identifies it. */
  direction: rtl;
  text-align: left;
}

/* One button per installed browser that opens its extensions page. */
.bx-browsers {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  vertical-align: middle;
}

/* The Swift-era extension is still installed. Amber is a fixed hue, like the
   connected green above: it has to read as "needs attention" on any theme. */
.bx-legacy {
  --bx-amber: #d18b0f;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--bx-amber), transparent 90%);
  border: 1px solid color-mix(in srgb, var(--bx-amber), transparent 65%);
}
.bx-legacy__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text);
}
.bx-legacy__head svg {
  color: var(--bx-amber);
  flex: none;
}
.bx-legacy__text,
.bx-legacy__foot {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.bx-legacy__foot {
  color: var(--text-3);
}
.bx-legacy .bx-steps strong {
  color: var(--text);
  font-weight: 600;
}
/* Settings → Computer use. */

.computer__trail {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Setup checklist: one row per macOS permission, numbered until it is done. */
.computer__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Under the "Started from Terminal" note. */
.row + .computer__steps {
  border-top: 1px solid var(--border);
}
/* A step still to do explains itself at length (which switch, other copies
   of Eaon, a path), and beside two buttons that was a 270px column with a
   path broken mid-name. Its buttons go on a line of their own under the
   text, lined up with it; a done step keeps its badge at the end. */
.row.computer__step:not([data-done='true']) {
  align-items: flex-start;
}
.row.computer__step:not([data-done='true']) > .row__body {
  flex: 1 1 calc(100% - 22px - 16px);
}
.row.computer__step:not([data-done='true']) > .row__trail {
  flex-wrap: wrap;
  margin-left: calc(22px + 16px);
}
.computer__step-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
/* The same green as `.badge--ok`, so the tick and "Allowed" read as one state. */
.computer__step[data-done='true'] .computer__step-mark {
  border-color: transparent;
  background: rgba(48, 209, 88, 0.16);
  color: var(--diff-add-fg);
}
/* Computer use was just switched on and this is the step left to do. Once,
   and gone under reduce motion like every other animation. */
.computer__step[data-attention='true'] {
  animation: computer-attention 1.8s ease-in-out;
}
@keyframes computer-attention {
  15%,
  50% {
    background: color-mix(in srgb, var(--accent), transparent 88%);
  }
}

.computer__kbd {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-xs);
  border: 0.5px solid var(--border-strong);
  background: var(--surface-3);
  color: var(--text-2);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}

.computer__test {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 16px 16px;
}

/* The image is shown at the width it was sent at or the card's, whichever is smaller. */
.computer__shot {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  border: 0.5px solid var(--border);
  background: var(--sunken);
}

.computer__meta {
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.computer__error {
  font-size: var(--fs-sm);
  color: var(--danger);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* The note under Accessibility for a switch that is on but belongs to another copy of Eaon. */
.computer__stale--error {
  color: var(--danger);
}

/* Who is using the one real mouse and keyboard, on every screen. */
.computer-lease {
  position: fixed;
  /* Centred without a transform: the pop animation owns that. */
  left: 0;
  right: 0;
  width: fit-content;
  margin-inline: auto;
  bottom: 20px;
  z-index: 140;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(560px, calc(100vw - 40px));
  padding: 8px 8px 8px 12px;
  border-radius: var(--r-pill);
  background: var(--menu-bg);
  backdrop-filter: var(--frost);
  -webkit-backdrop-filter: var(--frost);
  border: 0.5px solid var(--border-strong);
  box-shadow: var(--shadow-menu);
  animation: pop var(--dur-spring-slow) var(--spring-slow);
  transform-origin: bottom center;
}
.computer-lease__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent), transparent 82%);
  color: var(--accent);
}
.computer-lease__body {
  min-width: 0;
}
.computer-lease__title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.computer-lease__sub {
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.computer-lease .btn {
  flex: none;
}
/* Styles for the models feature: the curated library, installed models and
   the detail view. The Hugging Face browser keeps its original classes in
   pages.css (.model-card, .variants-table). */

/* Fit colours are scoped here rather than added to tokens.css: nothing else
   in the app needs a traffic-light scale. Each is tuned per theme so the
   label text stays legible on its surface. */
.mlib {
  --fit-good: #34d399;
  --fit-tight: #f5b544;
  --fit-bad: var(--danger);
}
[data-theme='light'] .mlib {
  --fit-good: #0e8a5f;
  --fit-tight: #a86400;
}

/* ---------------- Page head ---------------- */

.mlib-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.mlib-ollama {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  color: var(--text-3);
  white-space: nowrap;
}
.mlib-ollama__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fit-good);
}
.mlib-ollama[data-state='stopped'] .mlib-ollama__dot {
  background: var(--fit-tight);
}
.mlib-ollama[data-state='missing'] .mlib-ollama__dot {
  background: var(--text-4);
}
.mlib-tabs {
  margin-bottom: 22px;
}

.mlib-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  margin-bottom: 8px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid color-mix(in srgb, var(--fit-tight), transparent 62%);
}
.mlib-banner__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.45;
}
.mlib-banner__body strong {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
}

/* ---------------- Sections ---------------- */

.mlib-section {
  margin-top: 28px;
}
.mlib-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.mlib-section__title {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.mlib-section__actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.mlib-section__count,
.mlib-machine {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

/* ---------------- Shared bits ---------------- */

.mlib-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 2px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
/* The dot trails each item, so a wrapped line never starts with one. */
.mlib-meta > *:not(:last-child)::after {
  content: '·';
  margin: 0 6px;
  color: var(--text-4);
}

.mlib-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.mlib-cap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-xxs);
}

.mlib-fit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}
.mlib-fit__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.mlib-fit[data-fit='good'] {
  color: var(--fit-good);
}
.mlib-fit[data-fit='tight'] {
  color: var(--fit-tight);
}
.mlib-fit[data-fit='too-big'] {
  color: var(--text-3);
}
.mlib-fit[data-fit='too-big'] .mlib-fit__dot {
  background: var(--fit-bad);
}

.mlib-featured {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent), transparent 86%);
  color: var(--link);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}
.mlib-featured--quiet {
  padding: 0;
  background: none;
  font-size: var(--fs-xxs);
}

.mlib-installed {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--fit-good);
  white-space: nowrap;
}
.mlib-get {
  min-width: 62px;
}
.mlib-get-note {
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
}

.mlib-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 168px;
}
.mlib-progress__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 36px;
  font-size: var(--fs-xs);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mlib-progress__track {
  flex: 1;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.mlib-progress__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 240ms var(--ease);
}
.icon-btn.icon-btn--sm {
  width: 22px;
  height: 22px;
}

.mlib-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--danger);
}
.mlib-error svg {
  flex: none;
  margin-top: 1px;
}

.mlib-tag {
  padding: 1px 6px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: var(--fs-xxs);
}
.mlib-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 400;
}
.mlib-link {
  color: var(--link);
  font-size: inherit;
}
.mlib-link:hover {
  text-decoration: underline;
}
.mlib-dim {
  color: var(--text-4);
}
.mlib-confirm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---------------- Suggested grid ---------------- */

.mlib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.mlib-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.mlib-card:hover {
  border-color: var(--border-strong);
}
.mlib-card:focus-visible,
.mlib-row:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.mlib-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 21px;
}
.mlib-card__org {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.mlib-card__name {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.mlib-card__desc {
  flex: none;
  margin: 2px 0 2px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mlib-card .mlib-caps {
  /* Pins capabilities and the footer to the bottom so cards in a row line up
     whatever their description length; the clamp needs the paragraph at its
     natural height to cut cleanly. */
  margin-top: auto;
}
.mlib-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 39px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.mlib-card__pick {
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------- Category chips + list ---------------- */

.mlib-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.mlib-chip {
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-soft);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: var(--fs-sm);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mlib-chip:hover {
  background: var(--surface-2);
  color: var(--text);
}
.mlib-chip[data-active='true'] {
  background: var(--fg);
  border-color: transparent;
  color: var(--bg);
}

.mlib-list {
  display: flex;
  flex-direction: column;
}
.mlib-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 10px;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.mlib-row + .mlib-row {
  border-top: 1px solid var(--border-soft);
}
.mlib-row:hover {
  background: var(--hover);
}
.mlib-row--static {
  cursor: default;
}
.mlib-row--static:hover {
  background: none;
}
.mlib-row__icon {
  flex: none;
  display: inline-flex;
  color: var(--text-3);
}
.mlib-row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mlib-row__title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.mlib-row__name {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mlib-row__side {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
}
.mlib-row__size {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.mlib-row__pick {
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------------- Detail ---------------- */

.mlib-detail__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mlib .mlib-detail__title {
  margin: 0;
}
.mlib-detail__byline {
  margin: 8px 0 14px;
  font-size: var(--fs-sm);
}
.mlib-detail__desc {
  max-width: 720px;
  margin: 0 0 14px;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text-2);
}
.mlib-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--fit-tight), transparent 88%);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text);
}
.mlib-notice svg {
  flex: none;
  margin-top: 2px;
  color: var(--fit-tight);
}
.mlib-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 22px 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
}
.mlib-fact {
  padding: 12px 14px;
  background: var(--surface-1);
}
.mlib-fact dt {
  margin-bottom: 4px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.mlib-fact dd {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--text);
}
.mlib-links {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  margin-left: -10px;
}
.mlib .mlib-detail__variants-head {
  margin-top: 30px;
}

.mlib-variants__row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) 72px 96px 168px;
  align-items: center;
  gap: 12px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
}
.mlib-variants__row--head {
  padding-bottom: 10px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.mlib-variants__row[data-recommended='true'] {
  background: color-mix(in srgb, var(--accent), transparent 94%);
}
.mlib-variants__quant {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text);
  white-space: nowrap;
}
.mlib-recommended {
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent), transparent 86%);
  color: var(--link);
  font-family: var(--font-ui);
  font-size: var(--fs-xxs);
  font-weight: 500;
}
.mlib-variants__source {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
}
.mlib-variants__size {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.mlib-variants__action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.mlib-variants__error {
  grid-column: 1 / -1;
}

/* A model that runs only because Eaon's llama.cpp carries a pending PR. */
.mlib-note {
  margin: 10px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-3);
}
/* "Unload" next to the loaded model in the page header. */
.mlib-unload {
  margin-left: 8px;
  font-size: var(--fs-xs);
}
.mlib-tag--live {
  color: var(--diff-add-fg);
}
/*
 * Eaon Workers: the faces, the team, a worker's page and its editor — plus
 * the Library page and the attachment / mail bubbles in transcripts, which
 * the workers' threads share with chats.
 */

/* ================================================================ Faces */

/* The body is a circle that only breathes; the eyes do the living. Their gaze
   and blinks are scheduled per face in JS (useLivingEyes in WorkerFace.tsx)
   with random timing, because a fixed CSS loop repeats visibly and keeps
   every face on screen in step. CSS supplies the dart of a glance; a blink is
   played from JS too (the Web Animations API), as it restarts at will.

   A face is SVG, and an animation inside an SVG can't be handed to the
   compositor: every frame it moves repaints the face on the main thread. So
   the loops here are few, and every one pauses while the window rests
   (body[data-idle], at the end of this section). */
.wf {
  display: block;
  flex: none;
  overflow: visible;
}
.wf .wf-look {
  transition: transform 220ms var(--ease);
}
/* A glance: a fast dart that eases out, like a saccade, to wherever
   useLivingEyes points --gx/--gy. */
.wf .wf-gaze {
  transform: translate(var(--gx, 0px), var(--gy, 0px));
  transition: transform 150ms cubic-bezier(0.25, 0.9, 0.3, 1);
}
/* Following the pointer writes an inline transform on .wf-look; the eyes'
   own glances stand down meanwhile so the two don't add up. */
.wf .wf-look[data-following] {
  animation: none;
}
.wf .wf-look[data-following] .wf-gaze {
  transform: none;
}
.wf .wf-eye {
  transform-box: fill-box;
  transform-origin: center;
}
/* A wink (a click reaction): the right eye closes and holds while the left
   smiles. */
.wf .wf-focus[data-wink] .wf-eyes > g:nth-child(2) .wf-eye {
  animation: wf-wink 1300ms ease-in-out both;
}
@keyframes wf-wink {
  0%,
  100% {
    transform: scaleY(1);
  }
  12%,
  78% {
    transform: scaleY(0.1);
  }
}
/* A new expression arrives with a blink rather than a cut: the eye group is
   keyed by mood, so it remounts and plays this once. */
.wf .wf-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: wf-open 220ms var(--spring-fast);
}
@keyframes wf-open {
  from {
    transform: scaleY(0.1);
  }
}
/* Surprise widens the eyes with a little overshoot; delight bounces them. */
.wf[data-mood='surprised'] .wf-eyes {
  animation: wf-startle 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes wf-startle {
  from {
    transform: scale(0.55);
  }
}
.wf[data-mood='excited'] .wf-eyes {
  animation: wf-delight 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes wf-delight {
  0% {
    transform: translateY(3px) scaleY(0.4);
  }
  60% {
    transform: translateY(-1.5px) scaleY(1.05);
  }
}
/* Sleepy: heavy lids, and the eyes drift rather than dart (and blink
   slowly, which useLivingEyes sees to). */
.wf[data-mood='sleepy'] .wf-gaze {
  transition: transform 900ms ease-in-out;
}

/* Breathing: a scale too small to notice except as "alive", each face at its
   own phase (--breath-delay, random per face). Big faces only. It scales the
   body inside the <svg>: scaling the <svg> itself (so the compositor could run
   it) measured three to four times as much renderer time with the Workers tab
   open on a machine without GPU compositing, and a face's own arrival
   animation then has no breath to combine with. */
.wf .wf-body {
  transform-box: view-box;
  transform-origin: 50px 50px;
}
.wf[data-alive] .wf-body {
  animation: wf-breath 4.8s ease-in-out var(--breath-delay, 0s) infinite alternate;
}
.wf[data-alive][data-mood='asleep'] .wf-body,
.wf[data-alive][data-mood='sleepy'] .wf-body {
  animation-duration: 6.4s;
}
@keyframes wf-breath {
  to {
    transform: scale(1.016);
  }
}

/* Busy: reading left to right, pausing at each end of the line. It starts
   and ends looking ahead, where the resting eyes usually are, so switching
   to it eases off rather than jumping. */
.wf[data-mood='serious'] .wf-look,
.wf[data-busy] .wf-look {
  animation: wf-scan 3.2s ease-in-out infinite;
}
@keyframes wf-scan {
  0%,
  100% {
    transform: translate(0, 0);
  }
  22%,
  38% {
    transform: translate(-3.2px, 0.5px);
  }
  62%,
  78% {
    transform: translate(3.2px, 0.5px);
  }
}
/* Angry: a short tremble every few seconds, and no patience for blinking
   (useLivingEyes skips blinks). */
.wf[data-mood='angry'] .wf-look {
  animation: wf-tremble 3.4s infinite;
}
@keyframes wf-tremble {
  0%,
  86%,
  100% {
    transform: translate(0, 0);
  }
  88% {
    transform: translate(-0.9px, 0);
  }
  90% {
    transform: translate(0.9px, 0);
  }
  92% {
    transform: translate(-0.7px, 0);
  }
  94% {
    transform: translate(0.5px, 0);
  }
}
/* Asleep: closed eyes drifting with each slow breath. */
.wf[data-mood='asleep'] .wf-look {
  animation: wf-breathe 4.2s ease-in-out infinite;
}
@keyframes wf-breathe {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(1.3px);
  }
}

/* Dead: nothing moves (no gaze, no blinks, no breath). Small faces don't
   read or tremble either: at sidebar size the motion is under a pixel, and
   it would repaint every frame for nothing. */
.wf[data-mood='dead'] .wf-look,
.wf[data-small] .wf-look {
  animation: none;
}

/* ---- Working -------------------------------------------------------------
   One orchestrated motion, not a pile of loops. When a turn starts the eyes
   narrow into focus and the ring draws in around the face, both easing out
   over about half a second; then the ring's arc chases round (a linear spin,
   its length breathing in and out) until the turn ends. The body stays a
   still circle the whole time.

   Ending: finishing well brightens the track into a complete ring that
   ripples outward and fades while the face pops once; stopping or failing
   just fades the ring. WorkerFace keeps the ring mounted for RING_EXIT_MS so
   these can play. */
.wf .wf-focus {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 320ms var(--ease);
}
.wf[data-busy] .wf-focus {
  transform: scaleY(0.8);
}
.wf .wf-ring,
.wf .wf-ring__spin {
  transform-box: view-box;
  transform-origin: 50px 50px;
}
.wf .wf-ring {
  animation: wf-ring-in 480ms var(--ease) both;
}
@keyframes wf-ring-in {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
}
.wf .wf-ring__track {
  stroke-opacity: 0.18;
}
.wf .wf-ring__spin {
  animation: wf-ring-spin 1.8s linear infinite;
}
@keyframes wf-ring-spin {
  to {
    transform: rotate(360deg);
  }
}
/* The arc grows from a dot to a third of the ring and its tail catches up,
   so it never looks like a fixed segment sliding round. */
.wf .wf-ring__arc {
  stroke-dasharray: 1 150;
  animation: wf-ring-arc 1.5s ease-in-out infinite;
}
@keyframes wf-ring-arc {
  0% {
    stroke-dasharray: 1 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 34 150;
    stroke-dashoffset: -10;
  }
  100% {
    stroke-dasharray: 34 150;
    stroke-dashoffset: -98;
  }
}
.wf .wf-ring[data-ending='stopped'] {
  animation: wf-ring-out 240ms ease-out forwards;
}
@keyframes wf-ring-out {
  to {
    opacity: 0;
    transform: scale(0.94);
  }
}
.wf .wf-ring[data-ending='done'] {
  animation: wf-ring-done 560ms var(--ease) forwards;
}
.wf .wf-ring[data-ending='done'] .wf-ring__track {
  animation: wf-ring-fill 160ms ease-out forwards;
}
@keyframes wf-ring-done {
  0%,
  25% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.16);
  }
}
@keyframes wf-ring-fill {
  to {
    stroke-opacity: 1;
  }
}
.wf[data-done] .wf-body {
  animation: wf-pop 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes wf-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.07);
  }
  100% {
    transform: scale(1);
  }
}
.wf .wf-attention {
  stroke: var(--bg);
  transform-box: fill-box;
  transform-origin: center;
  animation: wf-ping 2.2s ease-out infinite;
}
@keyframes wf-ping {
  0%,
  70%,
  100% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.22);
  }
  30% {
    transform: scale(0.96);
  }
}
/* Arriving: drops in and bounces into place, staggered by the card's --i. */
.wf[data-enter] {
  animation: wf-enter 640ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes wf-enter {
  0% {
    transform: translateY(-14px) scale(0.4);
    opacity: 0;
  }
  55% {
    transform: translateY(2px) scale(1.08);
    opacity: 1;
  }
  80% {
    transform: translateY(0) scale(0.97);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* The global reduce-motion rule shrinks durations to ~0, which makes infinite
   loops flicker through every keyframe on every frame. Stop them outright;
   every expression reads correctly at rest. */
body[data-reduce-motion='on'] .wf *,
body[data-reduce-motion='on'] .wf {
  animation: none !important;
  transition: none !important;
}
/* With nothing moving, the ring shows a fixed arc so it still reads as working. */
body[data-reduce-motion='on'] .wf .wf-ring__arc {
  stroke-dasharray: 26 150;
}

/* While the window rests — hidden, or another app in front — the loops hold
   where they are (body[data-idle], set by WorkerFace.tsx). Only the loops: a
   one-shot still plays, or a face that changed while you were away would sit
   with its eyes half open, or not have arrived at all. */
body[data-idle] .wf[data-alive] .wf-body,
body[data-idle] .wf .wf-look,
body[data-idle] .wf .wf-ring__spin,
body[data-idle] .wf .wf-ring__arc,
body[data-idle] .wf .wf-attention {
  animation-play-state: paused;
}

/* ================================================================ Team */

.team {
  padding-bottom: 40px;
}
.team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.worker-card {
  position: relative;
  /* A grid item: a long purpose must wrap inside the column, not widen it. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 22px 16px 16px;
  border-radius: var(--r-xl);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--border-soft);
  text-align: center;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-spring) var(--spring-moderate);
  animation: card-in var(--dur-spring-slow) var(--spring-slow) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}
.worker-card:hover {
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--border-strong);
}
.worker-card:active {
  transform: scale(0.985);
}
@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.worker-card__face {
  position: relative;
  margin-bottom: 10px;
}
.worker-card__badge {
  position: absolute;
  top: -2px;
  right: -6px;
  box-shadow: 0 0 0 3px var(--surface-1);
}
.worker-card__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--text);
}
/* Centred in a column, the text would size itself to its whole line and run
   past the card's edges; it takes the card's width and wraps inside it. */
.worker-card__purpose {
  align-self: stretch;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
.worker-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin-top: 10px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--sunken);
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.worker-card__status-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worker-card--new {
  justify-content: center;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--border);
  border: 0;
}
.worker-card--new .worker-card__name {
  font-weight: 500;
}
.worker-card--new:hover {
  background: var(--hover);
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
}
.worker-card__new-ring {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 10px;
  border-radius: 50%;
  border: 1.5px dashed var(--border-strong);
  color: var(--text-3);
}

/* Status dots: green working, grey idle, violet asleep, red failed, amber paused. */
.status-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--text-4);
}
[data-status='working'] > .status-dot {
  background: #34c759;
  box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.55);
  animation: dot-pulse 1.8s ease-out infinite;
}
[data-status='asleep'] > .status-dot {
  background: #8e8cf0;
}
[data-status='failed'] > .status-dot {
  background: var(--danger);
}
[data-status='paused'] > .status-dot {
  background: #e7a627;
}
body[data-reduce-motion='on'] .status-dot {
  animation: none !important;
}
@keyframes dot-pulse {
  70% {
    box-shadow: 0 0 0 6px rgba(52, 199, 89, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0);
  }
}

.team-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 10px 10px 10px 14px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--border-soft);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.team-hint > svg {
  flex: none;
  color: var(--text-3);
}
.team-hint > span {
  flex: 1;
}

.team-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 72px 20px 40px;
}
.team-empty__faces {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 28px;
}
.team-empty__faces > .wf:first-child,
.team-empty__faces > .wf:last-child {
  margin-bottom: 4px;
}
.team-empty__title {
  font-size: var(--fs-title);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.team-empty__text {
  max-width: 520px;
  margin: 0 0 26px;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-2);
}
.btn--lg {
  height: 38px;
  padding: 0 18px;
  font-size: var(--fs-base);
  border-radius: var(--r-md);
}

/* ================================================================ A worker's page */

.worker-back {
  padding-left: 6px;
}
/* A narrow window: "← Team" keeps its arrow (and its name for screen
   readers) rather than being cut off at the edge of the bar's left side,
   which the collapsed sidebar's buttons and the traffic lights share. */
@container topbar-left (max-width: 280px) {
  .topbar[data-collapsed] .worker-back > span {
    display: none;
  }
  .topbar[data-collapsed] .worker-back {
    padding: 0 7px;
  }
}
@container topbar-left (max-width: 110px) {
  .worker-back > span {
    display: none;
  }
  .worker-back {
    padding: 0 7px;
  }
}
.worker-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.worker-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 0 10px;
}
.worker-profile__name {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 14px 0 4px;
}
.worker-profile__purpose {
  max-width: 480px;
  margin: 0 0 12px;
  color: var(--text-2);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
/* The full width, not the width of its longest pill: a pill with a long note
   used to widen the row past the window, and the thread scrolled sideways. */
.worker-profile__facts {
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
.worker-fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--border-soft);
  font-size: var(--fs-xs);
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.worker-fact svg {
  flex: none;
  color: var(--text-3);
}
/* The text shrinks and ends in "…"; the full text is in the pill's tooltip. */
.worker-fact__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.worker-profile__personality {
  max-width: 460px;
  overflow-wrap: anywhere;
  margin: 12px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-3);
  font-style: italic;
}
.worker-first-job {
  align-self: center;
  max-width: 420px;
  margin: 4px 0 0;
  text-align: center;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-3);
}
.worker-compacted {
  align-self: center;
  font-size: var(--fs-xs);
  color: var(--text-3);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--sunken);
}
.worker-stop {
  color: var(--text);
}

/* ================================================================ Editor */

.worker-editor {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.worker-editor__preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 6px 0 4px;
}
.worker-editor__preview-name {
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--text);
  min-height: 1.4em;
}
.worker-editor__row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.worker-editor__switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 32px;
}
.worker-editor__hint {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.worker-editor__engine-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.worker-editor__engine-note .btn {
  flex: none;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.modal__body .field + .field {
  margin-top: 12px;
}
.worker-editor .field + .field {
  margin-top: 0;
}
.field .field-label {
  margin-bottom: 0;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.swatch {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: transform var(--dur-spring-fast) var(--spring-fast);
}
.swatch:hover {
  transform: scale(1.1);
}
.swatch[aria-checked='true'] {
  box-shadow:
    0 0 0 2px var(--surface-3),
    0 0 0 4px var(--text-3);
}
.swatch--custom {
  background: conic-gradient(from 90deg, #e4574b, #e7b727, #3fae6a, #22a7a0, #5b6cf0, #d6509b, #e4574b);
  cursor: default;
  overflow: hidden;
}
.swatch--custom[data-active] {
  box-shadow:
    0 0 0 2px var(--surface-3),
    0 0 0 4px var(--text-3);
}
.swatch--custom input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.swatch--custom svg {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.persona-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}
.persona-chip {
  height: 26px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  color: var(--text-2);
  box-shadow: 0 0 0 1px var(--border);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.persona-chip:hover {
  background: var(--hover);
  color: var(--text);
}
.persona-chip[data-on] {
  background: color-mix(in srgb, var(--accent), transparent 84%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent), transparent 50%);
  color: var(--text);
}

/* ================================================================ Transcript extras */

/* A user message with files: the files sit above the bubble, right-aligned. */
.msg-user-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.msg-attachments {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 78%;
}
.msg-attachments[data-align='start'] {
  justify-content: flex-start;
  max-width: 100%;
  margin-top: 6px;
}
.msg-attachment {
  border-radius: var(--r-lg);
  overflow: hidden;
}
.msg-attachment--media {
  width: 132px;
  height: 132px;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--border-soft);
}
.msg-attachment--media img,
.msg-attachment--media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.msg-attachment--file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  height: 40px;
  padding: 0 12px;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--border-soft);
  font-size: var(--fs-sm);
  color: var(--text);
}
.msg-attachment--file svg {
  flex: none;
  color: var(--text-3);
}
.msg-attachment--file span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
button.msg-attachment:hover {
  box-shadow: 0 0 0 1px var(--border-strong);
}

/* A worker tool's detail is a sentence ("Coordinating the launch assets"). */
.tool__detail[data-prose] {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
}

/* Worker turns: mail from teammates, and the quiet heartbeat marker. */
.msg-row--mail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.msg__heartbeat {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 90%;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: var(--sunken);
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg__heartbeat svg {
  flex: none;
  color: #e5566b;
}
.msg-mail {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 86%;
}
.msg-mail .wf {
  margin-top: 1px;
}
.msg-mail__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.msg-mail__from {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 3px;
}
.msg-mail__text {
  padding: 8px 14px;
  border-radius: 4px 18px 18px 18px;
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--border-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg-row--queued .msg--user {
  opacity: 0.7;
}
.msg__queued {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xxs);
  color: var(--text-3);
}

/* ================================================================ Library */

.library {
  padding-bottom: 40px;
}
.library__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.library__search {
  margin-left: auto;
  width: 240px;
}
.library__group {
  margin-top: 26px;
}
.library__group-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-3);
  margin: 0 0 10px;
}
.library__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
  gap: 14px;
}
.library-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.library-card__preview {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--border-soft);
  transition: box-shadow var(--dur) var(--ease);
}
.library-card__preview:hover {
  box-shadow: 0 0 0 1px var(--border-strong);
}
.library-card__preview img,
.library-card__preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-spring-slow) var(--spring-slow);
}
.library-card__preview:hover img,
.library-card__preview:hover video {
  transform: scale(1.03);
}
.library-card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  backdrop-filter: blur(6px);
}
.library-card__play svg {
  margin-left: 2px;
}
.library-card__file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  color: var(--text-3);
}
.library-card__ext {
  padding: 2px 8px;
  border-radius: var(--r-xs);
  background: var(--sunken);
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-2);
}
.library-card[data-missing] .library-card__preview {
  opacity: 0.55;
}
.library-card__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 8px 2px 0;
}
.library-card__name {
  font-size: var(--fs-sm);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.library-card__sub {
  font-size: var(--fs-xs);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.library-card__actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface-3), transparent 10%);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px var(--border-soft);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.library-card:hover .library-card__actions,
.library-card:focus-within .library-card__actions {
  opacity: 1;
  transform: none;
}
.library-card__actions .icon-btn {
  width: 24px;
  height: 24px;
  color: var(--text-2);
}
.library-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 80px 20px;
  color: var(--text-3);
}
.library-empty h2 {
  margin: 8px 0 0;
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--text);
}
.library-empty p {
  max-width: 360px;
  margin: 0 0 8px;
  color: var(--text-2);
  line-height: 1.5;
}
.library-none {
  padding: 40px 0;
  text-align: center;
  color: var(--text-3);
}

/* The Freedom choice's one-line explanation, under the Model / Freedom row. */
.worker-editor__access-hint {
  margin: -6px 0 0;
  line-height: 1.45;
}

/* ---- Autonomy: questions waiting on the user, the worker's own memory ---- */
/* Questions sit at the foot of the thread, as cards — see "A worker's thread" below. */
.worker-asks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.worker-memory {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(560px, 100%);
  margin: 14px auto 0;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  font-size: var(--fs-sm);
  color: var(--text-2);
  text-align: left;
}
.worker-memory__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.45;
}
.worker-memory__row svg {
  flex: none;
  margin-top: 2px;
  color: var(--text-3);
}
.worker-memory__label {
  color: var(--text);
  font-weight: 500;
}
.worker-memory__failed {
  color: var(--danger);
}
.worker-memory__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.worker-memory__notes[data-open] .worker-memory__toggle svg {
  transform: rotate(180deg);
}
.worker-memory__text {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--sunken);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  white-space: pre-wrap;
  max-height: 220px;
  overflow: auto;
}

/* Jobs, watches and playbooks among the worker's memory: a row each, with its actions on the right. */
.worker-memory__item {
  display: flex;
  flex-direction: column;
}
.worker-memory__body {
  flex: 1;
  min-width: 0;
}
.worker-memory__actions {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.worker-memory__action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.worker-memory__action:hover {
  background: var(--surface-2);
  color: var(--text);
}
.worker-memory__action--icon {
  width: 22px;
  padding: 0;
  justify-content: center;
}
.worker-memory__row:not(:hover):not(:focus-within) .worker-memory__action--icon {
  opacity: 0;
}
.worker-memory__row[data-running] > svg {
  color: var(--accent);
}
.worker-memory__live {
  color: var(--accent);
}
.worker-memory__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.worker-memory__heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.worker-memory__row--sub {
  align-items: center;
  padding-left: 21px;
}
.worker-memory__playbook {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.worker-memory__playbook svg {
  flex: none;
  align-self: center;
  color: var(--text-3);
  transition: transform 0.15s;
}
.worker-memory__playbook[aria-expanded='true'] svg {
  transform: rotate(180deg);
}
.worker-memory__summary {
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
}
.worker-memory__uses {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.worker-fact--app[data-active] {
  color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent), transparent 60%);
}

/* Teach: the user showing a worker a task in its browser. */
.teach-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 10px 8px;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent), var(--surface-1) 90%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent), transparent 70%);
  font-size: var(--fs-sm);
}
.teach-bar__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.teach-bar__head > svg {
  flex: none;
  color: var(--accent);
}
.teach-bar__title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-weight: 500;
  color: var(--text);
}
.teach-bar__hint {
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.teach-bar__steps {
  margin: 0;
  padding: 6px 10px 6px 28px;
  max-height: 160px;
  overflow: auto;
  border-radius: var(--r-sm);
  background: var(--surface-1);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-2);
}
.teach-bar__finish {
  display: flex;
  align-items: center;
  gap: 6px;
}
.teach-bar__finish .input {
  flex: 1;
  min-width: 0;
  height: 28px;
}
.teach-bar__note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* A job, a watch or a timed goal reporting back: a heartbeat-like marker that opens to what it said. */
.msg__event {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 90%;
}
.msg__event .msg__event-head {
  cursor: pointer;
  /* Its parent is already capped at 90%; another 90% of that cut off the chevron. */
  max-width: 100%;
}
.msg__event-head:hover {
  color: var(--text-2);
}
.msg__event-head svg:first-child {
  color: var(--accent);
}
.msg__event-head .msg__event-chevron {
  flex: none;
  color: var(--text-3);
  transition: transform 0.15s;
}
.msg__event[data-open] .msg__event-chevron {
  transform: rotate(180deg);
}
.msg__event-text {
  align-self: stretch;
  margin: 0;
  padding: 8px 10px;
  max-height: 260px;
  overflow: auto;
  border-radius: var(--r-sm);
  background: var(--sunken);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--text-2);
}

/* ---- The editor's trading section ---- */
.worker-trading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.worker-trading__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.worker-trading__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.worker-trading .worker-editor__hint {
  margin: 0;
  line-height: 1.45;
}
.worker-trading__connect {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.worker-trading__warning[data-warn] {
  color: var(--text-2);
}


/* ================================================================ A worker's thread
   A messenger, not a transcript: the worker's name in a pill over the
   thread, what the user wrote in solid bubbles on the right, the worker's
   replies in soft grey ones on the left, a time over each stretch of
   conversation, and its questions as cards to answer in place. */

.thread--worker,
.composer--worker,
.worker-asks {
  --wk-user-bg: var(--fg);
  --wk-user-fg: var(--bg);
  --wk-bubble: color-mix(in srgb, var(--fg) 7%, var(--canvas));
  --wk-card: var(--surface-3);
}

/* Like Chat: the top bar floats over the thread, which runs up under it
   and under the name pill below it, and the veil's graded blur builds over
   both as the thread scrolls (ChatView's .scroll-veil, a little taller here
   to reach past the pill). */
.main:has(> .chat-header--float) > .thread--worker {
  padding-top: calc(var(--titlebar-h) + var(--sidebar-gap) + 64px);
  scroll-padding-top: calc(var(--titlebar-h) + var(--sidebar-gap) + 52px);
  /* The name pill's foot. */
  --veil-fade-from: calc(var(--titlebar-h) + var(--sidebar-gap) + 42px);
}
.scroll-veil--worker {
  --veil-h: calc(var(--titlebar-h) + var(--sidebar-gap) + 92px + var(--veil-over));
}
.main > .worker-pill-bar {
  position: absolute;
  top: calc(var(--titlebar-h) + var(--sidebar-gap) + 6px);
  right: 0;
  left: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.worker-pill {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(320px, calc(100% - 48px));
  height: 36px;
  padding: 0 15px 0 8px;
  border-radius: var(--r-pill);
  background: var(--wk-card);
  box-shadow:
    0 0 0 1px var(--border-soft),
    0 6px 18px -12px rgb(0 0 0 / 0.45);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
  transition: transform var(--dur) var(--ease);
}
.worker-pill:active {
  transform: scale(0.97);
}
.worker-pill .wf {
  flex: none;
}
.worker-pill__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A worker with threads: their switcher floats under the pill, over the
   thread like the pill itself, and the thread and veil start lower. */
.main:has(> .chat-header--float) > .worker-threads {
  position: absolute;
  top: calc(var(--titlebar-h) + var(--sidebar-gap) + 48px);
  right: 0;
  left: 0;
  z-index: 4;
  margin: 0 auto;
}
.main:has(> .chat-header--float):has(> .worker-threads) > .thread--worker {
  padding-top: calc(var(--titlebar-h) + var(--sidebar-gap) + 100px);
  /* The switcher's foot. */
  --veil-fade-from: calc(var(--titlebar-h) + var(--sidebar-gap) + 84px);
}
.main:has(> .worker-threads) > .scroll-veil--worker {
  --veil-h: calc(var(--titlebar-h) + var(--sidebar-gap) + 128px + var(--veil-over));
}

.thread__inner--worker {
  gap: 18px;
}

/* A time over the first message and over each that follows a long pause. */
.thread-time {
  align-self: center;
  margin: 6px 0 -6px;
  font-size: var(--fs-sm);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.thread--worker .msg--user {
  max-width: min(72%, 560px);
  padding: 10px 18px;
  border-radius: 22px;
  background: linear-gradient(100deg, var(--wk-user-bg) 45%, color-mix(in srgb, var(--wk-user-bg) 88%, var(--wk-user-fg)));
  color: var(--wk-user-fg);
  line-height: 1.45;
}
body[data-see-through='on'] .worker-pill {
  background: var(--glass-float);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
body[data-see-through='on'] .thread--worker .msg--user {
  background: var(--wk-user-bg);
}

/* Each run of the reply's text is a bubble; what it did between them (its
   steps, a plan, the files it changed) keeps the full width. */
.thread--worker .msg--assistant {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.thread--worker .msg--assistant > :not(.msg-bubble) {
  align-self: stretch;
  margin: 4px 0;
}
.msg-bubble {
  min-width: 0;
  max-width: min(80%, 640px);
  padding: 10px 17px;
  border-radius: 22px;
  background: var(--wk-bubble);
  line-height: 1.5;
}
.msg-bubble > :first-child {
  margin-top: 0;
}
.msg-bubble > :last-child {
  margin-bottom: 0;
}
.msg-bubble pre {
  max-width: 100%;
}
.thread--worker .msg--assistant[data-streaming='true'] > .msg-bubble > * {
  animation: block-resolve 280ms var(--spring-moderate) both;
}
@media (prefers-reduced-motion: reduce) {
  .thread--worker .msg--assistant[data-streaming='true'] > .msg-bubble > * {
    animation: none;
  }
}

/* Mail from a colleague: its face, then the same soft bubble. */
.thread--worker .msg-mail__text {
  padding: 10px 16px;
  border-radius: 6px 22px 22px 22px;
  background: var(--wk-bubble);
  box-shadow: none;
  line-height: 1.5;
}
/* Heartbeats and events read as quiet lines between messages, not as pills. */
.thread--worker .msg__heartbeat {
  background: transparent;
  font-size: var(--fs-sm);
}
.thread--worker .msg__event-head:hover {
  background: var(--hover);
}

/* At the foot of the thread while a turn runs. */
.worker-working {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 2px;
  font-size: var(--fs-base);
  animation: wk-rise 260ms var(--ease) both;
}
.worker-working .wf {
  flex: none;
}
.worker-working__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.worker-working__activity {
  color: var(--text-4);
}
@keyframes wk-rise {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
body[data-reduce-motion='on'] .worker-working {
  animation: none;
}

/* ---- Question and approval cards ---- */

.ask-card {
  align-self: flex-start;
  width: min(100%, 620px);
  padding: 20px 22px 18px;
  border-radius: 22px;
  background: var(--wk-card);
  box-shadow:
    0 0 0 1px var(--border-soft),
    0 10px 28px -20px rgb(0 0 0 / 0.5);
  outline: none;
  animation: wk-rise 260ms var(--ease) both;
  transition: opacity var(--dur) var(--ease);
}
.ask-card[aria-busy='true'] {
  opacity: 0.6;
}
.ask-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.ask-card__title .md__p {
  margin: 0 0 4px;
}
.ask-card__title .md__p:last-child {
  margin: 0;
}
.ask-card__hint {
  margin: 3px 0 0;
  font-size: var(--fs-base);
  color: var(--text-3);
}

.ask-card__options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 14px -10px 0;
}
.ask-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 7px 10px;
  border-radius: 12px;
  text-align: left;
  font-size: var(--fs-base);
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.ask-option:hover:not(:disabled),
.ask-option--other:focus-within {
  background: var(--hover);
}
.ask-option:disabled {
  cursor: default;
}
.ask-option__key {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-3);
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur-spring-fast, 200ms) var(--spring-fast, ease);
}
.ask-option[aria-pressed='true'] .ask-option__key,
.ask-option--other[data-filled] .ask-option__key {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent), #ffffff 16%), var(--accent));
  box-shadow: none;
  color: #ffffff;
}
.ask-option[aria-pressed='true']:active .ask-option__key,
.ask-option:active .ask-option__key {
  transform: scale(0.9);
}
.ask-option__label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ask-option__input {
  flex: 1;
  min-width: 0;
  height: 26px;
  border: 0;
  background: none;
  outline: none;
  font: inherit;
  color: var(--text);
}
.ask-option__input::placeholder {
  color: var(--text-3);
}

.ask-card__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
.ask-card__foot--start {
  justify-content: flex-start;
  margin-top: 18px;
}
.ask-btn {
  display: inline-grid;
  place-items: center;
  min-width: 72px;
  height: 36px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
  transition:
    background var(--dur) var(--ease),
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.ask-btn:not(:disabled):hover {
  background: var(--surface-2);
}
.ask-btn--primary {
  background: var(--fg);
  box-shadow: none;
  color: var(--bg);
}
.ask-btn--primary:not(:disabled):hover {
  background: color-mix(in srgb, var(--fg) 86%, var(--bg));
}
.ask-btn:disabled {
  opacity: 0.4;
}
.ask-btn:not(:disabled):active {
  transform: scale(0.96);
}
.ask-btn--lg {
  min-width: 96px;
  height: 44px;
  padding: 0 24px;
  border-radius: 14px;
  font-size: 15px;
}

/* Approval: who wants to do what, a badge, why, and Allow / Deny. */
.ask-card__head--row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.ask-card__title--big {
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.ask-badge {
  --badge: #b86e00;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 13px 0 11px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, #f5a524 20%, transparent);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--badge);
  white-space: nowrap;
}
:root:not([data-theme='light']) .ask-badge {
  --badge: #f5b443;
}
.ask-card[data-risk='high'] .ask-badge {
  --badge: var(--danger);
  background: color-mix(in srgb, var(--danger) 15%, transparent);
}
.ask-badge__icon {
  animation: spin 2.8s linear infinite;
}
body[data-reduce-motion='on'] .ask-badge__icon,
body[data-idle] .ask-badge__icon {
  animation: none;
}
.ask-card__lead {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.ask-card__lead .md__p {
  margin-bottom: 6px;
}
.ask-card__lead .md__p:last-child {
  margin-bottom: 0;
}
.ask-card__disclose {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0 -2px;
  padding: 3px 0;
  font-size: var(--fs-base);
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
}
.ask-card__disclose:hover {
  color: var(--text);
}
.ask-card__disclose svg {
  transition: transform var(--dur) var(--ease);
}
.ask-card__disclose[aria-expanded='true'] svg {
  transform: rotate(90deg);
}
.ask-card__breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.ask-card__summary {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.ask-card__tool {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-4);
}
.ask-card__tool code {
  font-family: var(--font-mono);
}
.ask-card__note {
  height: 32px;
  font-size: var(--fs-sm);
}

/* ---- The composer: one pill, + at one end, the mic or send at the other ---- */
.composer--worker[data-variant='chat'] {
  border-radius: 24px;
  background: var(--wk-card);
}
.composer__meta--worker {
  width: 100%;
}

/* ================================================================ Sidebar rows
   Each worker as a conversation: its face, its name and when it last did
   something, and what it's up to underneath. */
.nav-item.worker-row {
  height: auto;
  min-height: 50px;
  padding: 6px 8px 6px 5px;
  gap: 10px;
}
.worker-row__face {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
}
.worker-row__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.worker-row__top,
.worker-row__bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.worker-row__name,
.worker-row__preview {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.worker-row__name {
  font-weight: 500;
}
.worker-row__time {
  flex: none;
  font-size: var(--fs-xxs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.worker-row__preview {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.worker-row[data-unread] .worker-row__preview {
  color: var(--text-2);
}
.worker-row__trail {
  flex: none;
}
.worker-row .spinner {
  color: var(--text-3);
}

/* ---------------------------------------------------------------- threads */

/* The thread switcher above a worker's transcript: Main, its side threads,
   New task, and the finished ones. Scrolls sideways on its own row rather
   than wrapping, so the transcript never jumps when a thread appears. */
.worker-threads {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  width: var(--composer-chat-w);
  max-width: calc(100% - 32px);
  margin: 0 auto 4px;
  padding: 2px 2px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.worker-threads::-webkit-scrollbar {
  display: none;
}
.worker-thread-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  max-width: 220px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--border-soft);
  color: var(--text-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.worker-thread-tab[data-selected] {
  background: var(--surface-3);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--border-strong);
}
.worker-thread-tab[data-state='failed'] svg {
  color: var(--danger);
}
.worker-thread-tab[data-state='closed'] {
  color: var(--text-3);
}
.worker-thread-tab__main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
  border-radius: var(--r-pill);
}
.worker-thread-tab__main:focus-visible,
.worker-thread-tab__close:focus-visible,
.worker-threads__new:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.worker-thread-tab__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.worker-thread-tab__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-3);
  cursor: pointer;
}
.worker-thread-tab__close:hover {
  background: var(--hover);
  color: var(--text);
}
.worker-threads__new {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--text-3);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}
.worker-threads__new:hover {
  background: var(--hover);
  color: var(--text);
}
.worker-threads__finished {
  display: flex;
  align-items: center;
  gap: 2px;
}
.worker-threads__finished > :first-child {
  flex: 1;
  min-width: 0;
}

/* The top of a side thread, where the main one shows the worker's profile. */
.worker-thread-head {
  width: 100%;
  padding: 8px 0 18px;
  text-align: center;
}
.worker-thread-head__title {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.worker-thread-head__text {
  margin: 6px auto 0;
  max-width: 520px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

/* ---------------------------------------------------------------- activity */

.worker-activity {
  width: 360px;
  min-width: 300px;
  max-width: 42%;
}
.worker-activity__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 14px 24px;
}
.worker-activity__section + .worker-activity__section {
  margin-top: 18px;
}
.worker-activity__heading {
  margin: 6px 0 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-3);
}
.worker-activity__empty {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.worker-run {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border-soft);
}
.worker-run__icon {
  flex: none;
  padding-top: 2px;
  color: var(--text-3);
}
.worker-run[data-state='completed'] .worker-run__icon {
  color: #34c759;
}
.worker-run[data-state='failed'] .worker-run__icon,
.worker-run[data-state='interrupted'] .worker-run__icon {
  color: var(--danger);
}
.worker-run[data-state='running'] .worker-run__icon,
.worker-run[data-state='queued'] .worker-run__icon {
  color: var(--accent);
}
.worker-run__main {
  flex: 1;
  min-width: 0;
}
.worker-run__line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.worker-run__label {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--text);
  overflow-wrap: anywhere;
}
.worker-run__state {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.worker-run__meta {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.worker-run__detail {
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.worker-run__detail[data-error] {
  color: var(--danger);
}
.worker-run__actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.worker-run__actions:empty {
  display: none;
}

/* ---------------------------------------------------------------- search */

.worker-search__results > [data-active] > .menu__item {
  background: var(--hover);
}

@media (prefers-reduced-motion: reduce) {
  .worker-thread-tab,
  .worker-thread-tab .spinner,
  .worker-run .spinner {
    transition: none;
    animation: none;
  }
}
body[data-reduce-motion='on'] .worker-thread-tab .spinner,
body[data-reduce-motion='on'] .worker-run .spinner {
  animation: none;
}

/* Stopping a routine from the memory list, and the Edit link under it. */
.worker-memory__stop {
  margin-left: auto;
  flex: none;
  opacity: 0;
}
.worker-memory__row:hover .worker-memory__stop,
.worker-memory__stop:focus-visible {
  opacity: 1;
}
/* A purchase schedule's row has Buy now and Edit beside Stop: they sit together at the end. */
.worker-memory__stop + .worker-memory__stop {
  margin-left: 0;
}
/**
 * Copyright (c) 2014 The xterm.js authors. All rights reserved.
 * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
 * https://github.com/chjj/term.js
 * @license MIT
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * Originally forked from (with the author's permission):
 *   Fabrice Bellard's javascript vt100 for jslinux:
 *   http://bellard.org/jslinux/
 *   Copyright (c) 2011 Fabrice Bellard
 *   The original design remains. The terminal itself
 *   has been extended to include xterm CSI codes, among
 *   other features.
 */

/**
 *  Default styles for xterm.js
 */

.xterm {
    cursor: text;
    position: relative;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.xterm.focus,
.xterm:focus {
    outline: none;
}

.xterm .xterm-helpers {
    position: absolute;
    top: 0;
    /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
    z-index: 5;
}

.xterm .xterm-helper-textarea {
    padding: 0;
    border: 0;
    margin: 0;
    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    width: 0;
    height: 0;
    z-index: -5;
    /** Prevent wrapping so the IME appears against the textarea at the correct position */
    white-space: nowrap;
    overflow: hidden;
    resize: none;
}

.xterm .composition-view {
    /* TODO: Composition position got messed up somewhere */
    background: #000;
    color: #FFF;
    display: none;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
}

.xterm .composition-view.active {
    display: block;
}

.xterm .xterm-viewport {
    /* On OS X this is required in order for the scroll bar to appear fully opaque */
    background-color: #000;
    overflow-y: scroll;
    cursor: default;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.xterm .xterm-screen {
    position: relative;
}

.xterm .xterm-screen canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.xterm-char-measure-element {
    display: inline-block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -9999em;
    line-height: normal;
}

.xterm.enable-mouse-events {
    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
    cursor: default;
}

.xterm.xterm-cursor-pointer,
.xterm .xterm-cursor-pointer {
    cursor: pointer;
}

.xterm.column-select.focus {
    /* Column selection mode */
    cursor: crosshair;
}

.xterm .xterm-accessibility:not(.debug),
.xterm .xterm-message {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    color: transparent;
    pointer-events: none;
}

.xterm .xterm-accessibility-tree:not(.debug) *::selection {
  color: transparent;
}

.xterm .xterm-accessibility-tree {
  font-family: monospace;
  user-select: text;
  white-space: pre;
}

.xterm .xterm-accessibility-tree > div {
  transform-origin: left;
  width: fit-content;
}

.xterm .live-region {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.xterm-dim {
    /* Dim should not apply to background, so the opacity of the foreground color is applied
     * explicitly in the generated class and reset to 1 here */
    opacity: 1 !important;
}

.xterm-underline-1 { text-decoration: underline; }
.xterm-underline-2 { text-decoration: double underline; }
.xterm-underline-3 { text-decoration: wavy underline; }
.xterm-underline-4 { text-decoration: dotted underline; }
.xterm-underline-5 { text-decoration: dashed underline; }

.xterm-overline {
    text-decoration: overline;
}

.xterm-overline.xterm-underline-1 { text-decoration: overline underline; }
.xterm-overline.xterm-underline-2 { text-decoration: overline double underline; }
.xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; }
.xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; }
.xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; }

.xterm-strikethrough {
    text-decoration: line-through;
}

.xterm-screen .xterm-decoration-container .xterm-decoration {
	z-index: 6;
	position: absolute;
}

.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
	z-index: 7;
}

.xterm-decoration-overview-ruler {
    z-index: 8;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

.xterm-decoration-top {
    z-index: 2;
    position: relative;
}



/* Derived from vs/base/browser/ui/scrollbar/media/scrollbar.css */

/* xterm.js customization: Override xterm's cursor style */
.xterm .xterm-scrollable-element > .scrollbar {
    cursor: default;
}

/* Arrows */
.xterm .xterm-scrollable-element > .scrollbar > .scra {
	cursor: pointer;
	font-size: 11px !important;
}

.xterm .xterm-scrollable-element > .visible {
	opacity: 1;

	/* Background rule added for IE9 - to allow clicks on dom node */
	background:rgba(0,0,0,0);

	transition: opacity 100ms linear;
	/* In front of peek view */
	z-index: 11;
}
.xterm .xterm-scrollable-element > .invisible {
	opacity: 0;
	pointer-events: none;
}
.xterm .xterm-scrollable-element > .invisible.fade {
	transition: opacity 800ms linear;
}

/* Scrollable Content Inset Shadow */
.xterm .xterm-scrollable-element > .shadow {
	position: absolute;
	display: none;
}
.xterm .xterm-scrollable-element > .shadow.top {
	display: block;
	top: 0;
	left: 3px;
	height: 3px;
	width: 100%;
	box-shadow: var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset;
}
.xterm .xterm-scrollable-element > .shadow.left {
	display: block;
	top: 3px;
	left: 0;
	height: 100%;
	width: 3px;
	box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
}
.xterm .xterm-scrollable-element > .shadow.top-left-corner {
	display: block;
	top: 0;
	left: 0;
	height: 3px;
	width: 3px;
}
.xterm .xterm-scrollable-element > .shadow.top.left {
	box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
}
/*
 * The ADE's terminal view: a grid of real terminals (xterm) in the project
 * folder. Panes are painted in --term-bg, a step darker than the app in dark
 * themes and near-white in light ones, so terminal text keeps its contrast.
 */

:root {
  --term-bg: color-mix(in srgb, var(--bg), #000 42%);
}
:root[data-theme='light'] {
  --term-bg: color-mix(in srgb, var(--bg), #fff 70%);
}

.term-workspace {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 2px 10px 10px;
}

.term-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  /* The 8px between terminals is the dividers' own track (gridLayout.ts), so they can be dragged. */
  gap: 0;
}

/* A divider between two columns or rows: a grab area the width of the gap, with a line that shows on hover or drag. */
.term-divider {
  position: relative;
  z-index: 2;
  touch-action: none;
  outline: none;
}
.term-divider[data-axis='cols'] {
  cursor: col-resize;
}
.term-divider[data-axis='rows'] {
  cursor: row-resize;
}
.term-divider::after {
  content: '';
  position: absolute;
  border-radius: var(--r-pill);
  background: transparent;
  transition: background var(--dur) var(--ease);
}
.term-divider[data-axis='cols']::after {
  top: 6px;
  bottom: 6px;
  left: 3px;
  width: 2px;
}
.term-divider[data-axis='rows']::after {
  left: 6px;
  right: 6px;
  top: 3px;
  height: 2px;
}
.term-divider:hover::after {
  background: var(--border-strong);
}
.term-divider[data-active='true']::after,
.term-divider:focus-visible::after {
  background: var(--accent);
}
/* While a divider is dragged the pointer keeps its cursor, and no terminal takes the drag as a selection. */
body[data-term-resizing='cols'],
body[data-term-resizing='cols'] * {
  cursor: col-resize !important;
}
body[data-term-resizing='rows'],
body[data-term-resizing='rows'] * {
  cursor: row-resize !important;
}
body[data-term-resizing] {
  user-select: none;
}
body[data-term-resizing] .term-pane {
  pointer-events: none;
}

.term-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-radius: var(--r-lg);
  background: var(--term-bg);
  box-shadow: 0 0 0 1px var(--border-soft);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease);
  animation: term-pane-in var(--dur-spring) var(--spring-moderate) backwards;
}
.term-pane:focus-within {
  box-shadow: 0 0 0 1px var(--border-strong);
}
@keyframes term-pane-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
}

.term-pane__head[draggable='true'] {
  cursor: grab;
}
.term-pane__head[draggable='true']:active {
  cursor: grabbing;
}
.term-pane__head[draggable='true'] button {
  cursor: default;
}
.term-pane[data-dragging='true'] {
  opacity: 0.5;
}
/* Another terminal is being dragged: this one is a place to drop it. */
.term-pane__drop {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  border: 2px dashed transparent;
  border-radius: inherit;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.term-pane__drop[data-over='true'] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.term-pane__drop-label {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text);
  font-size: var(--fs-sm);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.term-pane__drop[data-over='true'] .term-pane__drop-label {
  opacity: 1;
}

.term-pane__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 5px 0 11px;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-xs);
  color: var(--text-2);
  user-select: none;
}
.term-pane__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--text-4);
  transition: background var(--dur) var(--ease);
}
.term-pane[data-status='working'] .term-pane__dot {
  background: #34c759;
  animation: dot-pulse 1.8s ease-out infinite;
}
.term-pane[data-status='exited'] .term-pane__dot {
  background: var(--danger);
}
body[data-reduce-motion='on'] .term-pane__dot {
  animation: none !important;
}
.term-pane__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text);
}
.term-pane__rename {
  width: 120px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border-strong);
  background: var(--sunken);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
  outline: none;
}
.term-pane__agent {
  color: var(--text-3);
  white-space: nowrap;
}
.term-pane__spacer {
  flex: 1;
}
.term-pane__btn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: var(--r-xs);
  color: var(--text-3);
  opacity: 0.75;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.term-pane:hover .term-pane__btn {
  opacity: 1;
}
.term-pane__btn:hover {
  background: var(--hover-strong);
  color: var(--text);
}
.term-pane__btn--close:hover {
  color: var(--danger);
}

.term-pane__screen {
  flex: 1;
  min-height: 0;
  padding: 6px 2px 2px 10px;
}
/* A file from Finder held over the terminal: it goes on the prompt as a path. */
.term-pane__screen[data-file-over] {
  outline: 1.5px dashed var(--accent);
  outline-offset: -4px;
  border-radius: 6px;
}
.term-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

/* A theme's scene (code/terminal/scenes.ts): pixel art under the terminal's
   see-through background, out to the pane's edges past the screen's padding. */
.term-scene {
  position: absolute;
  inset: -6px -2px -2px -10px;
  width: calc(100% + 12px);
  height: calc(100% + 8px);
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 0;
  /* The blur option (Settings → Appearance, or the theme picker): the scene
     goes soft behind the text. Grown a little while blurred, so its edges
     stay past the pane's rounded corners rather than fading in from them. */
  filter: blur(var(--ade-scene-blur, 0px));
  transform: scale(calc(1 + min(var(--ade-scene-blur, 0px), 40px) / 400px));
  transition:
    filter 260ms var(--ease),
    transform 260ms var(--ease);
}
.term-wrapper .xterm {
  position: relative;
  z-index: 1;
}
.term-pane .xterm {
  height: 100%;
}
.term-pane .xterm-viewport {
  /* xterm draws its own scrollbar (restyled below); the native one under it
     only showed as a dark line down the pane's edge. */
  scrollbar-width: none;
  /* xterm.css paints the viewport black; below the last whole row it showed
     as a darker strip. The pane is already --term-bg, the theme's background. */
  background-color: transparent !important;
}

.term-pane__actions {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  /* Above the terminal, which sits on its own layer over the theme's scene
     (z-index 1); without it Restart was drawn underneath, and invisible. */
  z-index: 6;
  display: flex;
  gap: 8px;
}
.term-pane__restart {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  box-shadow: 0 0 0 1px var(--border-strong), 0 6px 18px rgba(0, 0, 0, 0.3);
  font-size: var(--fs-sm);
  color: var(--text);
}
.term-pane__restart:hover {
  background: var(--surface-4);
}

.term-mark {
  flex: none;
  color: var(--text-3);
}
.term-mark--img {
  border-radius: 22%;
  object-fit: contain;
}
.term-mark--letter {
  display: inline-grid;
  place-items: center;
  border-radius: 22%;
  background: var(--text-2);
  color: var(--bg);
  font-weight: 700;
  line-height: 1;
}

/* No panes yet: one card per agent CLI, the missing ones greyed with how to get them. */
.term-empty {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.term-empty .home__title {
  margin-bottom: 10px;
}
.term-empty__text {
  max-width: 460px;
  margin: 0 0 26px;
  color: var(--text-2);
  line-height: 1.55;
}
/* An empty session's past conversations, above the agent cards: a link until asked for. */
.term-past__open {
  margin: -10px 0 18px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.term-past__open:hover {
  background: var(--hover);
  color: var(--text);
}
.term-past {
  width: min(470px, 100%);
  margin: -8px 0 4px;
  text-align: left;
}
.term-past__heading {
  margin: 0 0 8px 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-3);
}
.term-past__heading--start {
  margin: 20px 0 10px;
  text-align: center;
}
.term-past__list {
  display: flex;
  flex-direction: column;
  padding: 4px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--border-soft);
}
.term-past__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--fs-sm);
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.term-past__item:hover {
  background: var(--hover);
}
.term-past__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.term-past__age {
  flex: none;
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.term-past__more {
  margin: 6px 0 0 4px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.term-empty__agents {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  gap: 10px;
}
.term-agent-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 12px 14px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--border-soft);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.term-agent-card:hover:not(:disabled) {
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--border-strong);
}
.term-agent-card:disabled {
  opacity: 0.45;
}
.term-agent-card__label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}
.term-agent-card__hint {
  margin-top: -6px;
  font-size: var(--fs-xxs);
  color: var(--text-3);
}

/* Agent ⇄ Terminal, in the ADE's top bar. */
.view-toggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-md);
  background: var(--sunken);
  box-shadow: inset 0 0 0 1px var(--border-soft);
  -webkit-app-region: no-drag;
}
.view-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: calc(var(--r-md) - 2px);
  font-size: var(--fs-xs);
  color: var(--text-2);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.view-toggle button:hover {
  color: var(--text);
}
.view-toggle button[data-active] {
  background: var(--surface-3);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
@container main (max-width: 900px) {
  .view-toggle span {
    display: none;
  }
}

/* ---- A terminal theme of its own (code/terminal/themes.ts) ----
   The workspace carries the theme's background and text as --term-bg and
   --term-fg; the panes' headers take their tones from those, so a light theme
   in a dark app (or the other way round) still reads. */
.term-workspace[data-themed] .term-pane {
  --text: var(--term-fg);
  --text-2: color-mix(in srgb, var(--term-fg), var(--term-bg) 30%);
  --text-3: color-mix(in srgb, var(--term-fg), var(--term-bg) 50%);
  --text-4: color-mix(in srgb, var(--term-fg), var(--term-bg) 66%);
  --border-soft: color-mix(in srgb, var(--term-fg) 11%, transparent);
  --border-strong: color-mix(in srgb, var(--term-fg) 24%, transparent);
  --hover-strong: color-mix(in srgb, var(--term-fg) 10%, transparent);
  color: var(--term-fg);
  transition: background var(--dur) var(--ease);
}

/* ---- Theme picker (code/terminal/ThemePicker.tsx) ---- */

.theme-picker__scrim {
  position: absolute;
  inset: 0;
  z-index: 20;
}
.theme-picker {
  position: absolute;
  top: 2px;
  right: 10px;
  bottom: 10px;
  z-index: 21;
  width: min(440px, calc(100% - 20px));
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-modal);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  outline: none;
  overflow: hidden;
  animation: theme-picker-in var(--dur-spring) var(--spring-moderate) backwards;
}
@keyframes theme-picker-in {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
}
body[data-reduce-motion='on'] .theme-picker {
  animation: none;
}

.theme-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px 0 14px;
}
.theme-picker__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 600;
}
.theme-picker__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  align-self: center;
}
.theme-picker__count {
  color: var(--text-3);
  font-weight: 400;
}
.theme-picker__now {
  color: var(--text-3);
  font-weight: 400;
}
.theme-picker__keys {
  margin: 4px 14px 10px;
  color: var(--text-3);
  font-size: 11.5px;
}
.theme-picker__keys kbd {
  font: inherit;
  color: var(--text-2);
}

/* The sample, drawn in the theme under the cursor, scene and all. */
.theme-sample {
  position: relative;
  flex: none;
  margin: 0 12px 10px;
  min-height: 148px;
  border-radius: var(--r-md);
  background: var(--s-bg);
  color: var(--s-fg);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s-fg) 10%, transparent);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.theme-sample .term-scene {
  inset: 0;
  width: 100%;
  height: 100%;
}
.theme-sample__lines {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  line-height: 1.45;
  white-space: nowrap;
}
.s-muted {
  color: var(--s-muted);
}
.s-red {
  color: var(--s-red);
}
.s-green {
  color: var(--s-green);
}
.s-yellow {
  color: var(--s-yellow);
}
.s-cyan {
  color: var(--s-cyan);
}
.s-magenta {
  color: var(--s-magenta);
}
.s-badge {
  padding: 0 5px;
  border-radius: 3px;
}
.s-badge--green {
  background: color-mix(in srgb, var(--s-green) 24%, transparent);
  color: var(--s-green);
}
.s-badge--blue {
  background: color-mix(in srgb, var(--s-blue) 24%, transparent);
  color: var(--s-blue);
}
.s-bar {
  display: inline-block;
  width: 54px;
  height: 7px;
  border-radius: 2px;
  background: var(--s-green);
  vertical-align: middle;
}
.s-meter {
  display: inline-block;
  width: 46px;
  height: 7px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--s-magenta) 25%, transparent);
  vertical-align: middle;
  overflow: hidden;
}
.s-meter > span {
  display: block;
  width: 62%;
  height: 100%;
  background: var(--s-magenta);
}
.s-block {
  display: inline-block;
  width: 26px;
  height: 11px;
  background: var(--s-red);
  vertical-align: middle;
}
.s-blurb {
  margin-top: 2px;
  color: var(--s-muted);
  white-space: normal;
}

.theme-picker__list {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 2px 8px 8px;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: thin;
}
.theme-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 6px;
  border-radius: var(--r-xs);
  cursor: default;
}
.theme-row[data-active] {
  background: var(--hover-strong);
}
.theme-row__swatch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  padding: 4px 6px 4px 7px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent);
}
.theme-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.theme-row__aa {
  margin-left: 5px;
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1;
}
.theme-row__name {
  white-space: nowrap;
}
.theme-row[data-active] .theme-row__name {
  font-weight: 600;
}
.theme-row__check {
  flex: none;
  color: var(--accent);
}
.theme-row__tag {
  padding: 0 5px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--text-3);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.theme-row__scene {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}
.theme-picker__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-2);
}
.theme-picker__foot--blur {
  border-top: 0;
  padding-top: 0;
}
.theme-picker__foot--blur .slider {
  flex: 1;
  max-width: 160px;
  margin-left: auto;
}
.theme-picker__own {
  padding: 0 14px 12px;
  text-align: left;
  font: inherit;
  font-size: 11.5px;
  color: var(--link);
}
.theme-picker__own:hover {
  text-decoration: underline;
}

/* ---- Glass (the See-through theme) ----
   The panes are frosted glass over whatever is behind the app: with
   see-through on (Settings → Appearance), that's the wallpaper. The pane
   keeps a dark veil so the terminal's text holds its contrast, its header a
   little more, and a hairline of light round its edge. */
.term-workspace[data-glass] .term-pane {
  background: color-mix(in srgb, var(--term-bg) 46%, transparent);
  -webkit-backdrop-filter: blur(calc(24px * var(--glass-blur-k))) saturate(150%) var(--glass-ground,);
  backdrop-filter: blur(calc(24px * var(--glass-blur-k))) saturate(150%) var(--glass-ground,);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.08),
    0 12px 32px -18px rgb(0 0 0 / 0.6);
}
.term-workspace[data-glass] .term-pane__head {
  background: color-mix(in srgb, var(--term-bg) 32%, transparent);
  border-bottom-color: rgb(255 255 255 / 0.07);
}
.term-workspace[data-glass] .term-pane:focus-within {
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    0 12px 32px -18px rgb(0 0 0 / 0.6);
}
@media (prefers-reduced-transparency: reduce) {
  .term-workspace[data-glass] .term-pane {
    background: var(--term-bg);
  }
}

/* ---- The terminal's scrollbar ----
   xterm draws a 14px VS Code scrollbar: a flat block the full height of the
   pane down its right edge, which read as a stripe cut into the pane, worst
   on glass. Here it is a slim rounded thumb with no track, inset from the
   edge, that shows while the pane scrolls or is pointed at and fades away
   after. */
.term-pane .xterm .xterm-scrollable-element > .scrollbar.vertical {
  width: 10px !important;
  background: transparent !important;
}
.term-pane .xterm .xterm-scrollable-element > .scrollbar.vertical > .slider {
  left: 3px !important;
  width: 4px !important;
  border-radius: 999px;
  background: color-mix(in srgb, var(--term-fg, var(--fg)) 22%, transparent) !important;
  transition:
    width 120ms var(--ease),
    left 120ms var(--ease),
    background 120ms var(--ease);
}
.term-pane .xterm .xterm-scrollable-element > .scrollbar.vertical:hover > .slider,
.term-pane .xterm .xterm-scrollable-element > .scrollbar.vertical > .slider.active {
  left: 2px !important;
  width: 6px !important;
  background: color-mix(in srgb, var(--term-fg, var(--fg)) 40%, transparent) !important;
}
/* Its inset shadow under the top row when scrolled: a dark bar on glass. */
.term-pane .xterm .xterm-scrollable-element > .shadow {
  display: none !important;
}

/* Files from Finder over a pane: they will be typed in as paths. */
.term-pane[data-file-over] {
  box-shadow: 0 0 0 2px var(--accent, var(--text-2));
}

/* ---- Hand off to another agent (terminal/HandoffDialog.tsx) ---- */

.handoff__lede {
  margin: -4px 0 14px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.5;
}
.handoff__current {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
.handoff__current .term-mark {
  flex: none;
  margin-top: 1px;
}
.handoff__current-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.handoff__current-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.handoff__current-desc {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.45;
}
.handoff__agents {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 232px;
  overflow-y: auto;
  margin: 8px 0 18px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.handoff__agent {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 34px;
  padding: 0 10px 0 6px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-base);
  text-align: left;
}
.handoff__agent:hover {
  background: var(--hover);
}
.handoff__agent[data-selected] {
  background: var(--hover-strong);
}
.handoff__agent:focus-visible {
  outline-offset: -2px;
}
.handoff__check {
  display: inline-flex;
  justify-content: center;
  flex: none;
  width: 16px;
  color: var(--text);
}
.handoff__agent-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.handoff__agent-tag {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.handoff__empty {
  padding: 12px 10px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.handoff__optional {
  font-weight: 400;
  color: var(--text-3);
}
.handoff__note {
  width: 100%;
  min-height: 66px;
  padding: 8px 10px;
  resize: vertical;
  line-height: 1.45;
  font: inherit;
  font-size: var(--fs-sm);
}
.handoff__error {
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--danger);
}
/* Settings → Discord: a preview of the "Playing" card on a Discord profile.
   It keeps Discord's own dark colours whatever Eaon's theme is, since it is a
   picture of Discord rather than a piece of Eaon. */

.dc-stage {
  --dc-page: #121214;
  --dc-card: #1d1d21;
  --dc-line: rgba(255, 255, 255, 0.06);
  --dc-head: #f2f3f5;
  --dc-text: #dbdee1;
  --dc-muted: #949ba4;
  --dc-green: #4fb77a;
  --dc-button: rgba(151, 151, 159, 0.14);
  --dc-button-hover: rgba(151, 151, 159, 0.24);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 20px 18px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(80% 70% at 50% 110%, rgba(246, 138, 102, 0.16), transparent 70%),
    var(--dc-page);
  border: 1px solid var(--border-soft);
}
/* Off: the card fades, not the stage — a faded dark stage turns to mud on
   the light theme. */
.dc-stage[data-off] .dc-card {
  opacity: 0.55;
  filter: saturate(0.5);
}
/* The segmented control sits on Discord's dark page, not Eaon's surface, so
   it takes Discord's colours too — Eaon's light-theme inks vanish on it. */
.dc-stage .segment__item {
  color: var(--dc-muted);
}
.dc-stage .segment__item:hover {
  color: var(--dc-text);
}
.dc-stage .segment__item[data-active='true'] {
  background: rgba(255, 255, 255, 0.08);
  color: var(--dc-head);
}

.dc-card {
  width: min(360px, 100%);
  padding: 14px 16px 16px;
  border-radius: 12px;
  background: var(--dc-card);
  box-shadow: inset 0 0 0 1px var(--dc-line), 0 12px 32px rgba(0, 0, 0, 0.35);
  color: var(--dc-text);
  font-family: var(--font-ui);
  animation: dc-rise 0.56s cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.dc-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
  color: var(--dc-head);
}
.dc-card__head svg {
  color: var(--dc-muted);
}

.dc-card__body {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}

.dc-card__art {
  position: relative;
  flex: none;
  width: 96px;
  height: 96px;
}
/* A warm glow that breathes behind the art. */
.dc-card__art::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 20px;
  background: #f68a66;
  filter: blur(18px);
  opacity: 0.35;
  animation: dc-glow 3.2s ease-in-out infinite;
}
.dc-card__large {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}
.dc-card__small {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 4px solid var(--dc-card);
  background: var(--dc-card);
  animation: dc-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

.dc-card__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dc-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dc-head);
  line-height: 1.25;
}
.dc-card__line {
  font-size: 14px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: dc-fade 0.32s ease-out both;
}
.dc-card__line--dim {
  color: var(--dc-muted);
}
.dc-card__time {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--dc-green);
}
.dc-card__time-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.dc-card__button {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 36px;
  margin-top: 16px;
  border: none;
  border-radius: 8px;
  background: var(--dc-button);
  color: var(--dc-head);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
/* A light sweep across the button, every few seconds and on hover. */
.dc-card__button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: dc-sweep 4.8s ease-in-out 1.2s infinite;
}
.dc-card__button:hover {
  background: var(--dc-button-hover);
}
.dc-card__button:hover::after {
  animation-duration: 1.1s;
}
.dc-card__button:active {
  transform: scale(0.98);
}
.dc-card__button:focus-visible {
  outline: 2px solid #f68a66;
  outline-offset: 2px;
}

@keyframes dc-rise {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}
@keyframes dc-glow {
  0%,
  100% {
    opacity: 0.22;
    transform: scale(0.94);
  }
  50% {
    opacity: 0.45;
    transform: scale(1.04);
  }
}
@keyframes dc-pop {
  from {
    opacity: 0;
    transform: scale(0.4) rotate(-20deg);
  }
}
@keyframes dc-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
@keyframes dc-sweep {
  0% {
    transform: translateX(-100%);
  }
  30%,
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dc-card,
  .dc-card__art::before,
  .dc-card__small,
  .dc-card__line,
  .dc-card__button::after {
    animation: none;
  }
}
/* Settings → Workers → Chat apps, and the chat-app bits of the Workers tab. The status
   pill, pairing code and numbered steps are the Browser extension page's
   (extension.css); only what is new lives here. */

/* The "connect" tiles. */
.ch-apps {
  display: grid;
  /* As many across as fit, stacked when the settings column is narrow. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.ch-app {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  text-align: left;
  color: var(--text);
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.ch-app:hover:not(:disabled) {
  background: var(--surface-3);
  border-color: var(--border-strong, var(--border));
}
.ch-app:disabled {
  opacity: 0.6;
}
.ch-app__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ch-app__name {
  font-weight: 600;
  font-size: var(--fs-base);
}
.ch-app__blurb {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.35;
}
.ch-app__plus {
  flex: none;
  color: var(--text-3);
}

.ch-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* One connection. */
.ch-card__head {
  min-height: 64px;
}
.ch-card__account {
  font-weight: 400;
  color: var(--text-2);
}
.ch-card__head .row__trail {
  gap: 8px;
}

/* Its people, groups and options sit right under it, tighter than a new section. */
.ch-subsection {
  margin-top: 14px;
}

.ch-token {
  display: flex;
  gap: 8px;
  width: 100%;
}
.ch-token .input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
/* Apps that need a server and a token, or two tokens: one field to a line, the button after them. */
.ch-token--fields {
  flex-direction: column;
  align-items: stretch;
}
.ch-token--fields .input {
  flex: none;
}
.ch-token--fields .btn {
  align-self: flex-start;
}

.ch-error {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  color: var(--danger);
}
.row .ch-error {
  margin: 0;
}
.ch-note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.ch-who {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ch-who svg {
  flex: none;
  color: var(--text-3);
}
.ch-who--warn svg {
  color: #d18b0f;
}

.ch-explain {
  padding-top: 11px;
  padding-bottom: 11px;
  min-height: 0;
}
.ch-explain .row__desc {
  margin: 0;
}

/* WhatsApp: the caution and the code to scan. Amber is a fixed hue, as in
   extension.css: it has to read as "take care" on any theme. */
.ch-warn {
  --ch-amber: #d18b0f;
  display: flex;
  gap: 9px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ch-amber), transparent 90%);
  border: 1px solid color-mix(in srgb, var(--ch-amber), transparent 65%);
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.45;
}
.ch-warn svg {
  flex: none;
  margin-top: 2px;
  color: var(--ch-amber);
}
.ch-link {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
}
.ch-link .bx-steps {
  flex: 1;
}
/* The code stays black on white in every theme: phones scan dark on light. */
.ch-qr {
  flex: none;
  width: 196px;
  height: 196px;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: 0 0 0 1px var(--border);
}
.ch-qr--wait {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  color: #666;
}

.ch-popover-note {
  padding: 10px 12px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.ch-group-list {
  max-height: 280px;
  overflow-y: auto;
}

/* Workers tab: which apps a worker answers in, on its profile. Buttons: they open Chat apps. */
.worker-fact--app {
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.worker-fact--app:hover {
  background: var(--surface-2);
}

/* A guest's message in a worker's thread. */
.msg-mail__from .ch-logo {
  margin-right: 6px;
  vertical-align: -2px;
}
.msg-mail__where {
  font-weight: 400;
  color: var(--text-3);
}
.msg-mail__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
}
.msg__via {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-end;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* Two buttons on one setup step ("Copy manifest", "Slack apps") keep apart. */
.ch-card .bx-steps .btn + .btn {
  margin-left: 6px;
}
/* The trading desk (ADE → Trading). Gains and losses use the diff green and
   the danger red, always with an arrow or a sign beside them, never colour
   alone. The chart's line is the accent: one series, and "up or down" is told
   by the baseline, not by repainting the line. */

.trading .page__inner--wide {
  /* The dashboard wants the room: up to a wide monitor's worth, not the pages' reading width. */
  width: min(1720px, 100%);
  padding-inline: 20px;
  padding-bottom: 80px;
}
.tr-desk {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 8px;
}

.tr-muted {
  color: var(--text-3);
}
.tr-error {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  color: var(--danger);
}
.tr-empty {
  margin: 4px 0;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.tr-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--danger-soft);
  color: var(--text);
  font-size: var(--fs-sm);
}
.tr-alert svg {
  flex: none;
  margin-top: 1px;
  color: var(--danger);
}

/* ------------------------------------------------------------- the hero */

/* The one hero figure on the page: big, in the UI sans, proportional digits. */

.tr-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.tr-delta[data-size='lg'] {
  font-size: var(--fs-base);
}
.tr-delta[data-dir='up'] {
  color: var(--diff-add-fg);
}
.tr-delta[data-dir='down'] {
  color: var(--danger);
}
.tr-delta .tr-muted {
  font-weight: 400;
}

.tr-halt[data-on] {
  color: var(--danger);
}

/* ------------------------------------------------------ the active session */

.tr-session {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent), transparent 90%);
  border: 1px solid color-mix(in srgb, var(--accent), transparent 70%);
}
.tr-session__pulse {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  animation: bx-pulse 1.4s ease-in-out infinite;
}

/* ------------------------------------------------------------- panels */

.tr-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  min-width: 0;
}
.tr-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tr-h2 {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
}
.tr-sub {
  margin-top: 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-3);
}
.tr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 1100px) {
  .tr-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------- KPIs */

/* --------------------------------------------------------------- chart */

.eq-chart {
  position: relative;
  min-height: 220px;
}
.eq-chart svg {
  display: block;
  overflow: visible;
  outline: none;
}
.eq-chart svg:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
  border-radius: var(--r-sm);
}
.eq-chart--empty {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.eq-chart--empty p {
  max-width: 340px;
}
.eq-chart__grid {
  stroke: var(--border-soft);
  stroke-width: 1;
}
.eq-chart__tick {
  font-size: 11px;
  fill: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.eq-chart__baseline {
  stroke: var(--text-4);
  stroke-width: 1;
}
.eq-chart__area {
  fill: var(--accent);
  opacity: 0.1;
}
.eq-chart__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.eq-chart__end,
.eq-chart__cross circle {
  fill: var(--accent);
  stroke: var(--surface-1);
  stroke-width: 2;
}
.eq-chart__end-label {
  font-size: 12px;
  font-weight: 600;
  fill: var(--text);
}
.eq-chart__cross line {
  stroke: var(--text-3);
  stroke-width: 1;
}
.eq-chart__tip {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  white-space: nowrap;
}
.eq-chart__tip strong {
  font-size: var(--fs-sm);
  color: var(--text);
}
.eq-chart__tip span {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.tr-panel__tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.eq-table {
  max-height: 220px;
  overflow-y: auto;
}

/* --------------------------------------------------------------- tables */

.tr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.tr-table th {
  text-align: left;
  font-weight: 500;
  font-size: var(--fs-xs);
  color: var(--text-3);
  padding: 0 8px 8px 0;
  border-bottom: 1px solid var(--border-soft);
}
.tr-table td {
  padding: 8px 8px 8px 0;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
  color: var(--text);
}
.tr-table tr:last-child td {
  border-bottom: 0;
}
.tr-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tr-symbol {
  font-weight: 600;
  letter-spacing: 0.01em;
}
.tr-nowrap {
  white-space: nowrap;
}
.tr-row-action {
  text-align: right;
  white-space: nowrap;
}
.tr-side {
  font-weight: 600;
}
.tr-side[data-side='buy'] {
  color: var(--diff-add-fg);
}
.tr-side[data-side='sell'] {
  color: var(--danger);
}
.tr-status {
  font-size: var(--fs-xs);
  color: var(--text-2);
  margin-right: 4px;
}
.tr-status[data-status='rejected'],
.tr-status[data-status='canceled'],
.tr-status[data-status='expired'] {
  color: var(--text-3);
}
.tr-orders tr[data-status='rejected'] td {
  color: var(--text-3);
}
.tr-why {
  color: var(--text-2);
  line-height: 1.4;
  min-width: 200px;
}
.tr-source {
  display: inline-block;
  margin-right: 4px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-3);
}
.tr-refused {
  color: var(--danger);
}
.tr-more {
  align-self: flex-start;
}

/* --------------------------------------------------------- trade ticket */

.tr-ticket__lookup {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tr-ticket__lookup .input {
  text-transform: uppercase;
}
.tr-quote {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-sm);
}
.tr-quote__name {
  display: flex;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}
.tr-quote__name .tr-muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tr-quote__price {
  font-size: 20px;
  font-weight: 600;
}
.tr-quote__price .tr-delta {
  font-size: var(--fs-sm);
}
.tr-ticket__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--fs-sm);
}
.tr-ticket__amount {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tr-ticket__amount .input {
  flex: 1;
  min-width: 0;
}
.tr-note {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--danger);
}
.tr-note[data-ok] {
  color: var(--diff-add-fg);
}

/* ------------------------------------------------------------ sessions */

.tr-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.tr-field--inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.tr-switch-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.tr-time {
  width: 136px;
  font-variant-numeric: tabular-nums;
}
.tr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.tr-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.tr-list > li:last-child > .tr-row,
.tr-list > .tr-row:last-child {
  border-bottom: 0;
}
.tr-row--button {
  width: 100%;
  text-align: left;
  align-items: center;
  color: inherit;
}
.tr-row__icon {
  flex: none;
  margin-top: 2px;
  color: var(--text-3);
}
.tr-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tr-row__title {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text);
}
.tr-row__desc {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.tr-row__strategy {
  font-size: var(--fs-xs);
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tr-log {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 10px 24px;
}
.tr-log[data-open] {
  padding-left: 0;
}
.tr-log__summary {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.tr-log__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.tr-log__list li {
  display: flex;
  gap: 10px;
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.tr-log__time {
  flex: none;
  width: 64px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.tr-log__text {
  color: var(--text-2);
  min-width: 0;
}
.tr-log__list li[data-kind='order'] .tr-log__text {
  color: var(--text);
  font-weight: 500;
}
.tr-log__list li[data-kind='error'] .tr-log__text {
  color: var(--danger);
}

.tr-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tr-editor__row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.tr-hint {
  margin: -4px 0 0;
  font-size: var(--fs-xs);
}
.tr-days {
  display: flex;
  gap: 4px;
}
.tr-day {
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.tr-day[aria-pressed='true'] {
  background: var(--accent);
  color: var(--on-accent, #fff);
}

/* --------------------------------------------------------------- setup */

.tr-number {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.tr-number .input {
  width: 96px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tr-live {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.tr-live p {
  margin: 0;
}
.tr-live__phrase {
  font-family: var(--font-mono);
  color: var(--text) !important;
  user-select: all;
}

@media (prefers-reduced-motion: reduce) {
  .tr-session__pulse {
    animation: none;
  }
}

/* ---- Protective exits: the line under each holding, its editor, the ticket fields ---- */

.tr-exit {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.tr-exit span {
  white-space: nowrap;
}
.tr-exit[data-none] {
  color: var(--text-3);
}
.tr-row-action {
  vertical-align: middle;
}
.tr-row-action .icon-btn {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 2px;
}
.tr-table .tr-exit-row td {
  padding-top: 0;
}
.tr-exit-editor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.tr-exit-editor label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-sm);
  min-width: 0;
}
.tr-exit-editor .input {
  min-width: 0;
}
.tr-exit-editor__actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 4px;
}
.tr-exit-editor__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-sm);
}
.tr-ticket__exits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.tr-ticket__exits .input {
  min-width: 0;
}

/* ---- The agent desk: Claude Code in a pane, mission control and the live feed (AgentDesk.tsx) ---- */

/* Claude Code's pane: the ADE's terminal pane, tall enough to read it work. */
.tr-claude {
  height: 100%;
  min-height: 460px;
  animation: none;
}
.tr-claude__screen {
  min-height: 0;
}
.tr-claude__state {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-3);
}
.tr-claude__state[data-tone='live'] {
  color: var(--diff-add-fg);
}
.tr-claude__state[data-tone='warn'] {
  color: var(--tr-amber);
}
.tr-claude__handover {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--tr-amber), transparent 60%);
  background: color-mix(in srgb, var(--tr-amber), transparent 86%);
  font-size: var(--fs-sm);
  color: var(--text);
}
.tr-claude__handover > svg {
  flex: none;
  color: var(--tr-amber);
}
.tr-claude__handover > span {
  flex: 1;
  min-width: 0;
}
.tr-claude__handover code,
.tr-claude__missing code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  user-select: all;
}
.tr-claude__note {
  margin: 8px 12px 0;
}
.tr-claude__missing {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.tr-claude__missing p {
  margin: 0;
  max-width: 360px;
}

/* Mission control */

.tr-setup-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tr-setup-form__row,
.tr-setup-form__times {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.tr-label {
  width: 52px;
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.tr-setup-form__span {
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.tr-setup-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.tr-hint {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.tr-real span {
  color: var(--danger);
}
.tr-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  margin-right: 8px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent), transparent 85%);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 600;
  vertical-align: 1px;
}

.tr-armed,
.tr-running {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tr-armed__title,
.tr-running__title {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text);
  min-width: 0;
}
.tr-armed__count {
  font-size: var(--fs-sm);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.tr-armed__count strong {
  color: var(--text);
  font-size: var(--fs-base);
}
.tr-armed__goal {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--sunken);
  font-size: var(--fs-sm);
  color: var(--text-2);
  white-space: pre-wrap;
}
.tr-running__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tr-progress {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.tr-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 1s linear;
}
.tr-running__clock {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.tr-running__clock strong {
  color: var(--text);
  font-size: var(--fs-sm);
}
.tr-running__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.tr-running__stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: var(--sunken);
  min-width: 0;
}
.tr-running__stats dt {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.tr-running__stats dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-running__stats dd .tr-muted {
  font-weight: 400;
}
.tr-running__next {
  font-size: var(--fs-sm);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1400px) {
  .tr-running__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The live feed: the session's log and the agent's tool steps, newest first. */
.tr-feed__say {
  display: flex;
  gap: 6px;
}
.tr-feed__say .input {
  flex: 1;
  min-width: 0;
}
.tr-feed__list li[data-kind='error'],

/* "Live · 2s ago" beside the market status. */

@media (prefers-reduced-motion: reduce) {
  .tr-liveage__dot,
  .tr-progress span {
    animation: none;
    transition: none;
  }
}

/* ---- The dashboard (TradingDesk.tsx, Dashboard.tsx): one grid, quiet panels, figures in mono ---- */

.tr-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.tr-label-head {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tr-label-head__live {
  color: var(--diff-add-fg);
}

.tr-desk {
  container-type: inline-size;
}
.tr-dash {
  --tr-amber: #d9a21b;
  display: grid;
  gap: 12px;
  grid-template-columns: 272px minmax(0, 1fr);
  grid-template-areas:
    'strip strip'
    'account chart'
    'mission positions'
    'log log'
    'analytics analytics';
  align-items: stretch;
}
.tr-dash[data-claude] {
  grid-template-columns: 272px minmax(0, 1fr) minmax(360px, 0.85fr);
  grid-template-areas:
    'strip strip strip'
    'account chart claude'
    'mission positions claude'
    'log log analytics';
}
.tr-dash > .tr-strip {
  grid-area: strip;
}
.tr-dash__account {
  grid-area: account;
}
.tr-dash__chart {
  grid-area: chart;
}
.tr-dash__claude {
  grid-area: claude;
  min-height: 0;
  display: flex;
}
.tr-dash__claude > .tr-claude {
  flex: 1;
}
.tr-dash__mission {
  grid-area: mission;
}
.tr-dash__positions {
  grid-area: positions;
}
.tr-dash__log {
  grid-area: log;
}
.tr-dash__analytics {
  grid-area: analytics;
}
.tr-dash > div {
  min-width: 0;
}
.tr-dash > div > .tr-panel {
  height: 100%;
}
@container (max-width: 1180px) {
  .tr-dash[data-claude] {
    grid-template-columns: 260px minmax(0, 1fr);
    grid-template-areas:
      'strip strip'
      'account chart'
      'mission claude'
      'positions positions'
      'log log'
      'analytics analytics';
  }
  .tr-dash__claude {
    height: 560px;
  }
}
@container (max-width: 760px) {
  .tr-dash,
  .tr-dash[data-claude] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'strip' 'account' 'chart' 'claude' 'mission' 'positions' 'log' 'analytics';
  }
}

/* The strip: one quiet line of status across the top. */
.tr-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 9px 14px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.tr-strip__state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tr-strip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-4);
}
.tr-strip__state[data-state='live'] {
  color: var(--diff-add-fg);
}
.tr-strip__state[data-state='live'] .tr-strip__dot {
  background: var(--diff-add-fg);
  animation: bx-pulse 1.4s ease-in-out infinite;
}
.tr-strip__state[data-state='halted'],
.tr-strip__state[data-state='halted'] .tr-strip__dot {
  color: var(--danger);
  background: none;
}
.tr-strip__state[data-state='halted'] .tr-strip__dot {
  background: var(--danger);
}
.tr-strip__item {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
}
.tr-strip__key {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.tr-strip__item > .tr-num {
  color: var(--text);
  font-weight: 600;
}
.tr-strip__spacer {
  flex: 1;
}
.tr-strip .tr-delta {
  font-size: var(--fs-xs);
}

/* The account card */
.tr-acct {
  gap: 6px;
}
.tr-acct__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.tr-acct__badge {
  height: 18px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--text-3);
}
.tr-acct__badge[data-real] {
  border-color: color-mix(in srgb, var(--danger), transparent 55%);
  color: var(--danger);
}
.tr-acct__value {
  margin-top: 6px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
}
.tr-acct__sub {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-xs);
}
.tr-acct__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.tr-acct__stats div {
  min-width: 0;
}
.tr-acct__stats dt {
  font-size: 11px;
  color: var(--text-3);
}
.tr-acct__stats dd {
  margin: 1px 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* The chart's tabs */
.tr-tabs {
  flex: 1;
  display: flex;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tr-tab {
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-sm, 6px);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
}
.tr-tab:hover {
  color: var(--text);
  background: var(--hover);
}
.tr-tab[aria-selected='true'] {
  color: var(--text);
  background: var(--surface-2);
}

/* Candles */
.tr-candles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tr-candles__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.tr-candles__symbol {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-2);
}
.tr-candles__price {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}
.tr-candles__chart {
  position: relative;
  overflow: hidden;
}
.tr-chartpanel {
  min-width: 0;
}
.tr-candles__chart svg {
  display: block;
  overflow: visible;
}
.tr-candle line {
  stroke-width: 1;
}
.tr-candle[data-dir='up'] line,
.tr-candle[data-dir='up'] rect {
  stroke: var(--diff-add-fg);
  fill: var(--diff-add-fg);
}
.tr-candle[data-dir='down'] line,
.tr-candle[data-dir='down'] rect {
  stroke: var(--danger);
  fill: var(--danger);
}
.tr-candles__last {
  stroke: var(--accent);
  stroke-dasharray: 2 3;
  stroke-width: 1;
}
.tr-candles__tag {
  fill: var(--accent);
}
.tr-candles__tag-text {
  fill: var(--on-accent, #fff);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}
.tr-level line {
  stroke-width: 1;
  stroke-dasharray: 4 4;
  stroke: var(--text-3);
}
.tr-level[data-kind='stop'] line {
  stroke: var(--danger);
  opacity: 0.7;
}
.tr-level text {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--text-3);
}
.tr-level[data-kind='stop'] text {
  fill: var(--danger);
}
.tr-candles__readout {
  position: absolute;
  top: 0;
  left: 4px;
  padding: 3px 7px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  font-size: 11px;
  color: var(--text-2);
  pointer-events: none;
}

/* The execution log: a terminal-style column of what the agent did */
.tr-log2 {
  gap: 8px;
}
.tr-log2__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.tr-log2__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
}
.tr-log2__list li {
  display: grid;
  grid-template-columns: 64px 56px minmax(0, 1fr);
  gap: 10px;
  padding: 1px 0;
  color: var(--text-2);
}
.tr-log2__time {
  color: var(--text-4, var(--text-3));
}
.tr-log2__tag {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.tr-log2__text {
  overflow-wrap: anywhere;
}
.tr-log2__detail {
  display: block;
  color: var(--danger);
}
.tr-log2__list li[data-kind='decision'] {
  color: var(--text);
}
.tr-log2__list li[data-kind='decision'] .tr-log2__tag {
  color: var(--accent);
}
.tr-log2__list li[data-kind='order'] .tr-log2__tag {
  color: var(--diff-add-fg);
}
.tr-log2__list li[data-kind='order'] {
  color: var(--text);
}
.tr-log2__list li[data-kind='message'] .tr-log2__tag {
  color: var(--tr-amber, #d9a21b);
}
.tr-log2__list li[data-kind='error'],
.tr-log2__list li[data-kind='error'] .tr-log2__tag,
.tr-log2__list li[data-kind='tool-error'] .tr-log2__tag {
  color: var(--danger);
}
.tr-log2__list li[data-kind^='tool'] {
  color: var(--text-3);
}

/* Analytics: small bar charts */
.tr-analytics__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 20px;
}
.tr-mini {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tr-mini figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.tr-mini__title {
  font-size: 11px;
  color: var(--text-3);
}
.tr-mini__total {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
}
.tr-mini__svg {
  width: 100%;
  height: 56px;
  display: block;
}
.tr-mini__svg rect {
  fill: var(--text-3);
}
.tr-mini__svg rect[data-dir='up'] {
  fill: var(--diff-add-fg);
}
.tr-mini__svg rect[data-dir='down'] {
  fill: var(--danger);
}
.tr-mini__zero {
  stroke: var(--border-soft);
  stroke-width: 0.5;
}
.tr-mini__empty {
  margin: 0;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--sunken);
  font-size: 11px;
  color: var(--text-3);
}
.tr-mini__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: 11px;
  color: var(--text-3);
}

/* The account picker */
.tr-accounts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tr-accounts__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.tr-account {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  padding: 12px 14px;
  border-top: 1px solid var(--border-soft);
}
.tr-account:first-child {
  border-top: 0;
}
.tr-account[data-current] {
  background: color-mix(in srgb, var(--accent), transparent 93%);
}
.tr-account__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.tr-account[data-real] .tr-account__title svg {
  color: var(--danger);
}
.tr-account__state {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
}
.tr-account__state[data-tone='on'] {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--accent);
}
.tr-account__desc {
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text-3);
}
.tr-account__actions {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.tr-account__link {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tr-account__form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tr-account__form .input {
  flex: 1 1 160px;
  min-width: 0;
}
.tr-account__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Settings → Workers → Email. Status pills and tables reuse extension.css and trading.css. */

.em-error {
  margin: 14px 0 0;
  font-size: var(--fs-sm);
  color: var(--danger);
}
.em-error--inline {
  margin: 0;
}
/* How to get a Cloudflare credential, under its field. */
.em-howto {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-3);
}
.em-howto b,
.em-key-note b {
  font-weight: 500;
  color: var(--text-2);
}
.em-key-note {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-2);
}
.em-modal-lede {
  margin: 0 0 12px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.em-footnote {
  margin: 8px 2px 0;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.em-footnote--flush {
  margin: 0;
}
.em-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.em-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.em-actions .input {
  flex: 1;
  min-width: 160px;
}
.em-address-input {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.em-address-input .input {
  flex: 1;
  min-width: 0;
}
/* Next to its button in a row of actions: it grows, the button keeps its size. */
.em-actions .em-address-input {
  flex: 1;
  width: auto;
  min-width: 240px;
}
.em-address-input__domain {
  font-size: var(--fs-sm);
  color: var(--text-2);
  white-space: nowrap;
}
.em-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.em-code {
  max-width: 130px;
  font-family: var(--font-mono);
  letter-spacing: 0.2em;
  text-align: center;
}
.em-number {
  width: 84px;
  text-align: right;
}
.em-address {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.em-address svg {
  color: var(--text-3);
}
.em-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.em-empty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.em-message {
  width: 100%;
  align-items: flex-start;
  text-align: left;
  color: inherit;
  gap: 10px;
}
.em-message:hover {
  background: var(--hover);
}
.em-message__dot {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
}
.em-message[data-unread] .em-message__dot {
  background: var(--accent);
}
.em-message .row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.em-message__top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--fs-sm);
}
.em-message__from {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.em-message[data-unread] .em-message__from,
.em-message[data-unread] .em-message__subject {
  font-weight: 600;
}
.em-message__time {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.em-message__subject {
  font-size: var(--fs-sm);
  color: var(--text);
}
.em-message__preview {
  font-size: var(--fs-xs);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.em-read {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.em-read__head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--fs-sm);
}
.em-read__body {
  margin: 0;
  max-height: 50vh;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text);
}

.em-domain {
  margin-top: 12px;
}
.em-records {
  padding: 4px 16px 14px;
}
/* Fixed columns, so a long DKIM value shortens with "…" (and copies whole)
   instead of pushing Status off the card. */
.em-records .tr-table {
  table-layout: fixed;
}
.em-records th:nth-child(1) {
  width: 72px;
}
.em-records th:nth-child(2) {
  width: 34%;
}
.em-records th:nth-child(4) {
  width: 92px;
}
.em-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.em-cell__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
}
.em-record {
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
}
.em-record[data-status='VALID'] {
  color: var(--diff-add-fg);
}
.em-record[data-status='INVALID'] {
  color: var(--danger);
}

/* The Beta label beside a title (the shared .badge, nudged to sit on the text line). */
.em-beta {
  margin-left: 8px;
  vertical-align: 1px;
  font-weight: 500;
}
.em-address .em-beta {
  margin-left: 2px;
}
/* Settings → Connect apps (components/settings/pages/ConnectApps.tsx). */

/* ---------------- Logos ---------------- */

.ca-logo {
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 24%;
  overflow: hidden;
  /* Logos are drawn for a light ground; the tile keeps them legible on dark themes, the outline on light ones. */
  box-shadow: inset 0 0 0 1px var(--border);
}
.ca-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ca-logo[data-mark] {
  background: #ffffff;
}
.ca-logo[data-mark] img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}
.ca-logo--icon {
  background: var(--surface-4);
  color: var(--text-2);
}

/* ---------------- Status dot ---------------- */

.ca-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--text-4);
}
/* Fixed green, as on the Browser extension page: "working" whatever the accent. */
.ca-dot[data-tone='on'] {
  background: var(--diff-add-fg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--diff-add-fg), transparent 80%);
}
.ca-dot[data-tone='waiting'] {
  background: var(--accent);
}
.ca-dot[data-tone='error'] {
  background: var(--danger);
}

/* ---------------- Recommended ---------------- */

.ca-featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.ca-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 12px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.ca-feature:hover {
  background: var(--surface-3);
}
.ca-feature__main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  color: var(--text);
}
.ca-feature__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ca-feature__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: var(--fs-base);
}
.ca-feature__blurb {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.35;
}

/* The white pill from the reference design; inverted on light themes so it still reads as a button. */
.ca-pill {
  flex: none;
  height: 30px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--fg);
  color: var(--bg);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition:
    background var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}
.ca-pill:hover:not(:disabled) {
  background: color-mix(in srgb, var(--fg), var(--bg) 14%);
}
.ca-pill[data-on] {
  background: var(--surface-4);
  color: var(--text);
}
.ca-pill[data-on]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--surface-4), var(--fg) 8%);
}
.ca-pill:disabled {
  opacity: 0.45;
}

/* ---------------- Other apps ---------------- */

.ca-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
}
.ca-app {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px 8px 8px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid transparent;
  text-align: left;
  color: var(--text);
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.ca-app:hover {
  background: var(--surface-3);
  border-color: var(--border);
}
.ca-app__name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-base);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ca-app__chevron {
  flex: none;
  color: var(--text-4);
}

/* ---------------- Gateway row ---------------- */

.ca-gateway__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Under the row's description, on a line of its own. */
.ca-claude-tools__error {
  display: block;
  margin-top: 4px;
  color: var(--danger);
}

/* ---------------- Sheet ---------------- */

.ca-sheet {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ca-sheet__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ca-sheet__headtext {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.ca-sheet__blurb {
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.ca-sheet__status {
  height: 22px;
  font-size: var(--fs-xs);
}
.ca-sheet__notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.45;
}
.ca-sheet__notice > span {
  flex: 1;
  min-width: 0;
}
.ca-code {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text);
  overflow-wrap: anywhere;
}
.ca-sheet__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ca-field {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ca-field__label {
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.ca-field > .ca-field__label {
  width: 84px;
  flex: none;
}
.ca-picker {
  flex: 1;
  min-width: 0;
  height: 32px;
  /* The sheet is the same surface as a select, so it needs an edge of its own. */
  box-shadow: inset 0 0 0 1px var(--border);
}
.ca-picker__label {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ca-picker__provider {
  flex: none;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.ca-sheet__note {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.45;
}
.ca-sheet__files {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ca-file {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 7px;
  color: var(--text-3);
}
.ca-file svg {
  align-self: center;
}
.ca-file__path {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text);
}
.ca-file__keys {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  overflow-wrap: anywhere;
}
.ca-sheet__fine {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.45;
}
.ca-sheet__gateway {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.ca-sheet__gateway > .ca-dot {
  margin-top: 6px;
}
.ca-sheet__gateway-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.ca-sheet__error {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--danger);
  line-height: 1.45;
}
.ca-sheet__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  flex-wrap: wrap;
}
.ca-sheet__spacer {
  flex: 1;
}
/* Settings → Usage (pages/Usage.tsx): Eaon's spend, tracked with Tokn. */

.tokn-mark {
  flex: none;
  display: block;
}

/* ---- The account entry (account/ToknAccount.tsx): top of Settings ---- */

.account-entry {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  text-align: left;
  color: var(--text);
  transition: background var(--dur) var(--ease);
}
.account-entry:hover,
.account-entry[data-open] {
  background: var(--hover);
}
.account-entry__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent, #fff);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.account-entry__avatar--mark {
  background: none;
  color: var(--text-2);
}
.account-entry__avatar--mark .tokn-mark {
  border-radius: 6px;
}
.account-entry__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.account-entry__name,
.account-entry__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-entry__name {
  font-size: var(--fs-base);
}
.account-entry__sub {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.account-menu__header {
  justify-content: flex-start;
  gap: 9px;
  color: var(--text);
}
/* Settings' sign-in prompt (SignInPrompt), shown only while signed out. A
   one-row grid, so it can fold its height away to nothing once signed in. */
.settings__account {
  display: grid;
  grid-template-rows: 1fr;
  padding: 0 7px 6px;
}
.settings__account-inner {
  display: flex;
  min-height: 0;
  overflow: hidden;
}
/* Signed in from the prompt: "Signed in" for a moment (SIGNED_IN_NOTE_MS), then it folds up. */
.settings__account[data-folding] {
  animation: settings-account-fold 380ms var(--ease) 1200ms forwards;
}
@keyframes settings-account-fold {
  to {
    grid-template-rows: 0fr;
    padding-bottom: 0;
    opacity: 0;
  }
}
.account-entry--done,
.account-entry--done:hover {
  background: none;
  cursor: default;
  animation: fade 240ms var(--ease);
}
.account-entry__avatar--done {
  background: color-mix(in srgb, var(--diff-add-fg) 16%, transparent);
  color: var(--diff-add-fg);
}
/* The icon rail (settings.css, below 860px): the avatar alone, its name in
   the tooltip, until the rail opens out to search. */
@media (max-width: 859px) {
  .settings__nav:not([data-expanded]) .settings__account .account-entry {
    justify-content: center;
    padding: 0;
  }
  .settings__nav:not([data-expanded]) .settings__account .account-entry__text {
    display: none;
  }
}

/* ---- Signed out ---- */

.usage-hero {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}
.usage-hero .tokn-mark {
  border-radius: 10px;
}
.usage-hero__text {
  min-width: 0;
  flex: 1;
}
.usage-hero__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--text);
}
.usage-hero__body {
  margin: 4px 0 14px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.usage-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.usage-hero__signin {
  gap: 8px;
}
.usage-hero__signin .tokn-mark {
  border-radius: 4px;
}
.usage-hero__hint {
  margin: 10px 0 0;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.usage-paste {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.usage-paste .input {
  flex: 1;
  min-width: 0;
}
.usage-error {
  margin: 10px 0 0;
  color: var(--danger);
  font-size: var(--fs-sm);
}
.usage-counted {
  margin: 10px 2px 0;
  color: var(--text-3);
  font-size: var(--fs-xs);
}

/* ---- Signed in ---- */

.usage-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.usage-account .tokn-mark {
  border-radius: 5px;
}
.usage-account__actions {
  display: flex;
  gap: 6px;
}

.usage-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 18px 0 12px;
}

.usage-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 22px;
}
@media (max-width: 760px) {
  .usage-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.usage-tile {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  min-width: 0;
}
.usage-tile__label {
  color: var(--text-3);
  font-size: var(--fs-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.usage-tile__value {
  margin-top: 4px;
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Bars in the accent, or stacked by tool with a legend under the axis; text
   in text colours, the axis recessive. */
.usage-chart {
  position: relative;
  padding: 12px 14px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}
.usage-chart--empty {
  padding: 22px 14px;
  color: var(--text-3);
  font-size: var(--fs-sm);
  text-align: center;
}
.usage-chart__readout {
  height: 20px;
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.usage-chart__readout strong {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-right: 4px;
}
.usage-chart__plot {
  display: flex;
  align-items: stretch;
  height: 120px;
  margin-top: 6px;
  border-bottom: 1px solid var(--border);
}
/* The slot is the hover target: the whole column, not just the bar. */
.usage-chart__slot {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  padding: 0 1px;
}
.usage-chart__bar {
  width: 100%;
  max-width: 22px;
  margin: 0 auto;
  border-radius: 4px 4px 0 0;
  background: var(--accent);
  opacity: 0.8;
  transition:
    opacity var(--dur) var(--ease),
    height 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.usage-chart__slot[data-hover] .usage-chart__bar {
  opacity: 1;
}
/* With Claude Code or Codex in the range, a bar is stacked by tool: Eaon at
   the bottom in the accent, Claude Code in its orange, Codex in grey. */
.usage-chart__bar {
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
}
.usage-chart__bar[data-stacked] {
  background: none;
}
.usage-chart__seg {
  flex: none;
  width: 100%;
}
:is(.usage-chart, .usage-table) [data-tool='eaon'] {
  --tool: var(--accent);
}
:is(.usage-chart, .usage-table) [data-tool='claude-code'] {
  --tool: #d97757;
}
:is(.usage-chart, .usage-table) [data-tool='codex'] {
  --tool: var(--text-2);
}
:is(.usage-chart, .usage-table) [data-tool='claude-desktop'] {
  --tool: #b9876a;
}
:is(.usage-chart, .usage-table) [data-tool='cursor'] {
  --tool: #8a94a6;
}
:is(.usage-chart, .usage-table) [data-tool='gemini-cli'] {
  --tool: #4f8cf7;
}
:is(.usage-chart, .usage-table) [data-tool='grok'] {
  --tool: #a3a3a3;
}
:is(.usage-chart, .usage-table) [data-tool='qwen-code'] {
  --tool: #7c6cf2;
}
:is(.usage-chart, .usage-table) [data-tool='copilot-cli'] {
  --tool: #9b6bd6;
}
:is(.usage-chart, .usage-table) [data-tool='opencode'] {
  --tool: #e0a43a;
}
:is(.usage-chart, .usage-table) [data-tool='amp'] {
  --tool: #e5604d;
}
:is(.usage-chart, .usage-table) [data-tool='droid'] {
  --tool: #d4b25a;
}
:is(.usage-chart, .usage-table) [data-tool='kimi-cli'] {
  --tool: #4fb39a;
}
.usage-chart__seg,
.usage-chart__legend i,
.usage-tool-dot {
  background: var(--tool);
}
.usage-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-top: 2px;
  color: var(--text-2);
  font-size: var(--fs-xxs);
}
.usage-chart__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.usage-chart__legend i,
.usage-tool-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.usage-tool-dot {
  flex: none;
  margin-right: 8px;
}
.usage-chart__plot:hover .usage-chart__slot:not([data-hover]) .usage-chart__bar {
  opacity: 0.45;
}
.usage-chart__axis {
  position: relative;
  height: 20px;
  color: var(--text-3);
  font-size: var(--fs-xxs);
}
.usage-chart__axis span {
  position: absolute;
  top: 5px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.usage-chart__axis span:first-child {
  transform: none;
  left: 0 !important;
}
.usage-chart__axis span:last-child:not(:first-child) {
  transform: none;
  left: auto !important;
  right: 0;
}

/* ---- Activity: a year of days, one column per week ---- */

.usage-heat {
  padding: 12px 14px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}
.usage-heat__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.usage-heat__top .usage-chart__readout {
  flex: 1;
  min-width: 0;
}
.usage-heat__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 6px;
  row-gap: 4px;
}
.usage-heat__months {
  display: grid;
  grid-template-columns: repeat(var(--weeks), minmax(0, 1fr));
  column-gap: 3px;
  height: 14px;
  color: var(--text-3);
  font-size: var(--fs-xxs);
  line-height: 14px;
}
.usage-heat__months span {
  grid-row: 1;
  white-space: nowrap;
  overflow: visible;
}
.usage-heat__weekdays {
  display: grid;
  grid-template-rows: repeat(7, minmax(0, 1fr));
  row-gap: 3px;
  color: var(--text-3);
  font-size: 10px;
}
.usage-heat__weekdays span {
  display: flex;
  align-items: center;
  line-height: 1;
}
.usage-heat__grid {
  display: grid;
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
}
/* Empty days sit just above the panel; used days step up through the accent.
   The accent is mixed into the surface, not made transparent, so the steps
   read the same in every theme. */
.usage-heat__cell {
  display: block;
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--surface-3);
  transition: box-shadow var(--dur) var(--ease);
}
.usage-heat__cell[data-level='1'] {
  background: color-mix(in srgb, var(--accent) 40%, var(--surface-2));
}
.usage-heat__cell[data-level='2'] {
  background: color-mix(in srgb, var(--accent) 60%, var(--surface-2));
}
.usage-heat__cell[data-level='3'] {
  background: color-mix(in srgb, var(--accent) 80%, var(--surface-2));
}
.usage-heat__cell[data-level='4'] {
  background: var(--accent);
}
.usage-heat__grid .usage-heat__cell[data-hover] {
  box-shadow: 0 0 0 1.5px var(--text);
}
/* The year fills in week by week from the left as the section opens. */
.usage-heat__grid .usage-heat__cell {
  animation: usage-heat-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--w) * 9ms);
}
@keyframes usage-heat-in {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}
.usage-heat__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  color: var(--text-3);
  font-size: var(--fs-xxs);
}
.usage-heat__legend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.usage-heat__legend .usage-heat__cell {
  width: 10px;
  margin: 0 1px;
}
.usage-heat__legend .usage-heat__cell:first-of-type {
  margin-left: 5px;
}
.usage-heat__legend .usage-heat__cell:last-of-type {
  margin-right: 5px;
}

.usage-tiles--activity {
  margin: 8px 0 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 760px) {
  .usage-tiles--activity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.usage-tile__sub {
  margin-top: 2px;
  color: var(--text-3);
  font-size: var(--fs-xxs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usage-table {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  overflow: hidden;
}
.usage-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px 80px 128px;
  gap: 12px;
  align-items: center;
  padding: 9px 14px;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.usage-table__row + .usage-table__row {
  border-top: 1px solid var(--border);
}
.usage-table__row > span:not(:first-child) {
  text-align: right;
}
.usage-table__row--head {
  color: var(--text-3);
  font-size: var(--fs-xs);
  padding-top: 8px;
  padding-bottom: 8px;
}
.usage-table__model {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.usage-table__name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.usage-table__via {
  flex: none;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.usage-table__cost[data-muted] {
  color: var(--text-3);
}

.usage-footnote {
  margin: 14px 2px 0;
  color: var(--text-3);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.usage-cursor {
  display: flex;
  align-items: center;
  gap: 8px;
}
.usage-cursor > span {
  flex: 1;
  min-width: 0;
}
.usage-cursor__import {
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .usage-chart__bar {
    transition: none;
  }
  .usage-heat__grid .usage-heat__cell {
    animation: none;
  }
}

/* "Include CLI usage": the tools being counted, each with its logo. */
.usage-cli-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 8px;
}
.usage-cli-tool {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-2);
}
.usage-cli-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
/* ---- The ADE header's usage meter (components/code/UsageMeter.tsx) ---- */

.usage-pill {
  /* The header's other buttons give way in a narrow window; this one keeps
     its figures (it was squeezed to an empty sliver). */
  flex: none;
  gap: 7px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text), transparent 94%);
  box-shadow: inset 0 0 0 0.5px var(--border);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.usage-pill__bar {
  position: relative;
  width: 34px;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text), transparent 84%);
}
.usage-pill__bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--text-2);
  transition: width 300ms var(--ease);
}
.usage-pill__bar > span[data-severity='warning'] {
  background: var(--usage-warn);
}
.usage-pill__bar > span[data-severity='critical'] {
  background: var(--usage-critical);
}

:root {
  --usage-warn: #f0883e;
  --usage-critical: #f85149;
}
[data-theme='light'] {
  --usage-warn: #c2570c;
  --usage-critical: #cf222e;
}

.menu.usage-panel {
  max-height: min(600px, calc(100vh - 24px));
  padding: 0;
}
.usage-panel__inner {
  display: flex;
  flex-direction: column;
  padding: 14px 14px 6px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.usage-panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.usage-panel__title {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.usage-panel__source {
  font-size: 11px;
  color: var(--text-3);
}
.usage-panel__refresh {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  color: var(--text-3);
}
.usage-panel__refresh:hover {
  background: var(--hover);
  color: var(--text);
}
.usage-panel__refresh[data-spinning] svg {
  animation: usage-spin 0.9s linear infinite;
}
@keyframes usage-spin {
  to {
    transform: rotate(360deg);
  }
}
body[data-reduce-motion='on'] .usage-panel__refresh[data-spinning] svg {
  animation: none;
  opacity: 0.5;
}

.usage-panel__views {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  margin-bottom: 14px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--text), transparent 94%);
}
.usage-panel__views button {
  height: 28px;
  border-radius: calc(var(--r-md) - 2px);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.usage-panel__views button[data-active] {
  background: var(--surface-3);
  color: var(--text);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18), inset 0 0 0 0.5px var(--border);
}

.usage-window {
  margin-bottom: 14px;
}
.usage-window__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.usage-window__label {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
}
.usage-window__when {
  flex: 1;
  font-size: 11px;
  color: var(--text-3);
}
.usage-window__percent {
  font-size: 12.5px;
}
.usage-window__bar {
  position: relative;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text), transparent 88%);
}
.usage-window__bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--text-2);
  transition: width 400ms var(--ease);
}
.usage-window[data-severity='warning'] .usage-window__bar > span {
  background: var(--usage-warn);
}
.usage-window[data-severity='critical'] .usage-window__bar > span {
  background: var(--usage-critical);
}
.usage-window__note {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-3);
}

.usage-tool__foot {
  margin: 4px 0 10px;
  font-size: 11px;
  color: var(--text-3);
}

.usage-status {
  margin: 0 0 12px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.usage-status[data-error] {
  color: var(--usage-critical);
}
.usage-status code {
  padding: 0 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text), transparent 92%);
}

.usage-panel__other,
.usage-panel__settings {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin: 0 -8px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--text-2);
  text-align: left;
}
.usage-panel__other {
  border-top: 0.5px solid var(--border);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.usage-panel__other > span:first-child {
  flex: 1;
}
.usage-panel__other-figure {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
}
.usage-panel__other:hover,
.usage-panel__settings:hover {
  background: var(--hover);
  color: var(--text);
}
.usage-panel__settings {
  margin-top: 2px;
  margin-bottom: 2px;
}

.usage-compact {
  margin-bottom: 12px;
}
.usage-compact__tool {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  margin-bottom: 6px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
}
.usage-compact__tool span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-3);
}
.usage-compact[data-picked] .usage-compact__tool::after {
  content: '• in header';
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-3);
}
.usage-compact__row {
  display: grid;
  grid-template-columns: 74px 1fr 36px 54px;
  align-items: center;
  gap: 8px;
  height: 22px;
  font-size: 11.5px;
}
.usage-compact__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
}
.usage-compact__bar {
  position: relative;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text), transparent 88%);
}
.usage-compact__bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--text-2);
}
.usage-compact__row[data-severity='warning'] .usage-compact__bar > span {
  background: var(--usage-warn);
}
.usage-compact__row[data-severity='critical'] .usage-compact__bar > span {
  background: var(--usage-critical);
}
.usage-compact__percent {
  text-align: right;
}
.usage-compact__when {
  text-align: right;
  color: var(--text-3);
}

/* The switcher: the account in use, the CLI's other accounts, and moving panes. */
.usage-tool__active {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
}
.usage-tool__active--compact {
  margin: -2px 0 4px;
  font-size: 12px;
}
.usage-account__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
}
.usage-account__dot[data-active] {
  background: var(--accent);
  box-shadow: none;
}
.usage-account__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.usage-account__plan {
  flex: none;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 16px;
  color: var(--text-2);
  background: color-mix(in srgb, var(--text), transparent 92%);
}
.usage-account__state {
  flex: none;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
}
.usage-accounts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 10px;
}
.usage-accounts__head {
  margin-bottom: 4px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
}
.usage-accounts__fine {
  margin: 4px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-3);
}
.usage-account {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: auto;
  height: auto;
  gap: 1px;
  margin: 0 -8px;
  padding: 7px 8px 6px;
  border-radius: var(--r-sm);
  text-align: left;
  color: inherit;
}
.usage-account__line {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
}
.usage-account:not(:disabled):hover {
  background: var(--hover);
}
.usage-account:not(:disabled):hover .usage-account__state {
  color: var(--accent);
}
.usage-account:not(:disabled):hover .usage-account__dot {
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.usage-account:disabled {
  cursor: default;
  opacity: 0.7;
}
.usage-account__note {
  font-size: 11px;
  color: var(--text-3);
}
.usage-panel__links {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 0.5px solid var(--border);
  margin-top: 2px;
  padding-top: 2px;
}
.usage-panel__links .usage-panel__settings:disabled {
  opacity: 0.5;
}

.move-panes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  padding: 9px 10px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent), transparent 90%);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--accent), transparent 70%);
}
.move-panes[data-compact] {
  margin-top: 6px;
}
.move-panes__text,
.move-panes__done {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2);
}
.move-panes__done {
  margin: 0 0 12px;
  color: var(--text-3);
}
.move-panes__btn {
  gap: 6px;
}

/* ---- Settings → Accounts (components/settings/pages/Accounts.tsx) ---- */

.accounts__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.accounts__refresh {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-sm);
  color: var(--text-3);
}
.accounts__refresh:hover {
  background: var(--hover);
  color: var(--text);
}
.accounts__refresh[data-spinning] svg {
  animation: usage-spin 0.9s linear infinite;
}
.accounts__fine {
  margin: 8px 2px 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-3);
}
.accounts__fine code,
.account-row__usage code {
  font-family: var(--font-mono);
}
.accounts__error {
  margin: 8px 2px 0;
  font-size: var(--fs-sm);
  color: var(--danger);
}
.accounts__add {
  padding: 8px 10px;
}

.account-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 0.5px solid var(--border-soft);
}
.account-row__pick {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
  color: var(--on-accent);
}
.account-row__pick:not(:disabled):hover {
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.account-row[data-active] .account-row__pick {
  background: var(--accent);
  box-shadow: none;
}
.account-row__body {
  flex: 1;
  min-width: 0;
}
.account-row__name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-base);
  color: var(--text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* The name gives way to its plan and "default" tags, ending in an ellipsis. */
.account-row__label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.account-row__plan,
.account-row__tag {
  flex: none;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 17px;
  text-transform: capitalize;
  color: var(--text-2);
  background: color-mix(in srgb, var(--text), transparent 92%);
}
.account-row__tag {
  text-transform: none;
  color: var(--text-3);
  background: none;
  box-shadow: inset 0 0 0 0.5px var(--border);
}
.account-row__usage {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  /* It carries error messages, which were cut off mid-word: an ellipsis
     doesn't apply to a flex container's text, so they were just clipped. */
  overflow-wrap: anywhere;
}
.account-row__actions {
  display: flex;
  gap: 4px;
  flex: none;
}
.account-row__name-input {
  height: 26px;
  width: 100%;
  max-width: 280px;
}

.account-login {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
}
.account-login__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text);
}
.account-login[data-state='failed'] .account-login__head {
  color: var(--danger);
}
.account-login__actions {
  display: flex;
  gap: 6px;
}
.account-login__code {
  display: flex;
  gap: 6px;
}
.account-login__code .input {
  flex: 1;
  height: 28px;
}
.account-login__output {
  margin: 0;
  max-height: 120px;
  overflow: auto;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--code-bg);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-3);
  white-space: pre-wrap;
  word-break: break-all;
}

.account-row__windows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 4px;
}
.account-row__window {
  display: grid;
  grid-template-columns: minmax(64px, max-content) 38px 1fr;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 17px;
  color: var(--text-3);
}
.account-row__window-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
}
.account-row__window-percent {
  text-align: right;
  color: var(--text-2);
}
.account-row__window[data-severity='warning'] .account-row__window-percent {
  color: var(--usage-warn);
}
.account-row__window[data-severity='critical'] .account-row__window-percent {
  color: var(--usage-critical);
}
.account-row__window-when {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-row__windows .account-row__usage {
  margin-top: 1px;
}
.accounts__move:not(:empty) {
  margin-top: 10px;
}
.accounts__move .move-panes {
  margin: 0;
}
/* Settings → Workers → Worker computer, and the Workers tab's "Running on …" row. */

.wh-hint {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-3);
}

.wh-footnote {
  margin: 8px 2px 0;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text-3);
}

.wh-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 12px;
  width: 100%;
  margin-top: 10px;
}
.wh-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--fs-xs);
  color: var(--text-2);
}

.wh-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.wh-actions .btn,
.wh-command .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wh-command {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 10px 0 8px;
}
.wh-command code {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: var(--sunken);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  overflow-x: auto;
  white-space: nowrap;
  user-select: all;
}

.wh-log {
  width: 100%;
  max-height: 180px;
  margin: 0;
  padding: 8px 10px 8px 28px;
  overflow-y: auto;
  border-radius: var(--r-sm);
  background: var(--sunken);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-2);
}
.wh-log li[data-error] {
  color: var(--danger);
}
.wh-log li[data-done] {
  color: var(--text);
  font-weight: 600;
}

.wh-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.wh-status {
  --wh-tone: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-2);
}
.wh-status[data-tone='ok'] {
  --wh-tone: #30a46c;
}
.wh-status[data-tone='wait'] {
  --wh-tone: #d18b0f;
}
.wh-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wh-tone);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wh-tone), transparent 82%);
}
.wh-status[data-tone='wait'] .wh-dot {
  animation: wh-pulse 1.2s ease-in-out infinite;
}
@keyframes wh-pulse {
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wh-status[data-tone='wait'] .wh-dot {
    animation: none;
  }
}

.wh-moving {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.wh-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: var(--fs-sm);
}

/* The Workers sidebar: where they run. */
.nav-item.wh-where {
  color: var(--text-2);
}
.nav-item.wh-where .wh-dot {
  margin: 0 4px;
}