/*
 * 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);
}
/* The composer's model picker (ModelPicker.tsx) and its effort slider
   (EffortControl.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 a 70px 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;
  --mp-blue-text: #5b92dc;
  --mp-track: rgba(255, 255, 255, 0.14);
  --mp-dot: rgba(255, 255, 255, 0.28);
  --mp-dot-on: rgba(255, 255, 255, 0.62);
  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;
  --mp-blue-text: #2f6fc6;
  --mp-track: rgba(0, 0, 0, 0.08);
  --mp-dot: rgba(0, 0, 0, 0.22);
  --mp-dot-on: rgba(255, 255, 255, 0.7);
  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;
}
.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 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;
  border-top: 1px solid var(--mp-line);
}
.effort {
  position: relative;
  padding: 0 10px 10px;
  isolation: isolate;
}
.effort__head {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4.5px;
}
.effort__bolt {
  position: absolute;
  left: 2px;
  color: var(--mp-blue);
  transition: color 240ms ease;
}
.effort__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--mp-blue-text);
  animation: effort-label-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition: color 240ms ease;
}
@keyframes effort-label-in {
  from {
    opacity: 0;
    transform: translateY(4px);
    filter: blur(1.5px);
  }
}
.effort__reset {
  position: absolute;
  right: -1.5px;
  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 300ms cubic-bezier(0.3, 1.4, 0.5, 1);
}
.effort__reset:hover:not(:disabled) {
  color: var(--mp-text);
}
.effort__reset:active:not(:disabled) {
  transform: rotate(-140deg);
}
.effort__reset:disabled {
  opacity: 0.55;
}

.effort__track {
  position: relative;
  height: 24px;
  border-radius: 12px;
  background: var(--mp-track);
  touch-action: none;
  outline: none;
  transition: background-color 240ms ease;
}
.effort__track:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mp-blue) 55%, transparent);
}
.effort__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 12px;
  background: var(--mp-blue);
  transition: background-color 240ms ease;
}
.effort__dot {
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--mp-dot);
  transition: opacity 120ms ease, background-color 160ms ease;
}
.effort__dot[data-filled] {
  background: var(--mp-dot-on);
}
.effort__dot[data-hidden] {
  opacity: 0;
}
.effort__thumb {
  position: absolute;
  top: -2px;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.35),
    0 0 0 0.5px rgba(0, 0, 0, 0.12);
  will-change: transform;
  pointer-events: none;
}
.effort__thumb::after {
  /* Pressed: the thumb grows a little, without moving its centre. */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #ffffff;
  transform: scale(1);
  transition: transform 160ms cubic-bezier(0.3, 1.5, 0.5, 1);
}
.effort__track[data-dragging] .effort__thumb::after {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* The top level: a purple pixel field behind the row, and the row in white. */
.effort__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity 260ms ease;
}
.effort__field[data-on] {
  opacity: 1;
}
.effort[data-top] .effort__bolt,
.effort[data-top] .effort__label {
  color: #ffffff;
}
.effort[data-top] .effort__reset {
  color: rgba(255, 255, 255, 0.7);
}
.effort[data-top] .effort__track {
  background: rgba(10, 4, 30, 0.35);
}
.effort[data-top] .effort__fill {
  background: #b9a2ff;
}
.effort[data-top] .effort__dot {
  background: rgba(255, 255, 255, 0.45);
}
.effort[data-top] .effort__dot[data-filled] {
  background: rgba(60, 25, 140, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .effort__label,
  .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;
}
@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;
}
/* 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;
  }
}
/*
 * 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);
  max-height: 220px;
  overflow: auto;
  overscroll-behavior: contain;
}

/* ---- 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 ---- */

.tasks__list {
  list-style: none;
  margin: 0;
  padding: 2px 12px 10px;
}

.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;
}

@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;
  }
}
/* 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;
  }
}
/*
 * The approval card (agent/ApprovalCard.tsx): the dialog over Chat and the
 * card above a worker's composer.
 *
 * 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;
}

/* ---- 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);
  }
}

@media (prefers-reduced-motion: reduce) {
  .approval-layer,
  .approval-layer .approval,
  .approval[data-variant='inline'],
  .approval__dot,
  .approval__json,
  .approval[data-risk='high'] .approval__tile::after {
    animation: none !important;
  }
}
/* ==================================================================
   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;
  align-items: baseline;
  justify-content: space-between;
  gap: 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;
}
/* Settings → Payments */

.pay-form {
  gap: 12px;
}
.pay-field {
  display: flex;
  flex-direction: column;
  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;
}
/*
 * 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;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-xxs: 11px;
  --fs-title: 28px;
  --fs-h1: 30px;
  --fs-h2: 15px;

  --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
  );
}

/* ---------- 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. */
  --menu-bg: color-mix(in srgb, var(--surface-3), transparent 24%);

  --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 18%);

  --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);
}

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;
  padding: 0 7px;
  overflow-y: auto;
}

/* ---------------- 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;
}
.chat-header.topbar:not([data-collapsed]),
.page__bar.topbar:not([data-collapsed]) {
  /* Same inset on both sides and on both kinds of row, so the switch sits at
     the true centre and does not shift a few pixels between screens. */
  padding-left: 16px;
  padding-right: calc(16px + var(--window-controls-right));
}
.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;
}
.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);
}

/* 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;
}

.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);
}

.sidebar__footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 6px 8px 10px 7px;
}
.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);
  }
}

/* Text that shimmers while the model is working. */
.shimmer {
  background: linear-gradient(90deg, var(--text-4) 20%, var(--text) 45%, var(--text-4) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 2.4s linear infinite;
}
@keyframes shimmer {
  from {
    background-position: 140% 0;
  }
  to {
    background-position: -40% 0;
  }
}

/* ---- 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 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0 0;
}

.home__title {
  font-size: var(--fs-title);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 26px;
  text-align: center;
}
.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: 18px 0 0;
}
.suggestion-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  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);
}

/* 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 12px;
}

.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 {
  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 {
    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.
   ================================================================== */

/* ---- Thoughts --------------------------------------------------- */

/* A thought is a row among the turn's tool calls (agent.css `.tool`), in the
   order it happened: "Thought" and its title, opening into the reasoning. The
   title is prose, so it gets the reply's font rather than a call's mono. */
.thought__title {
  min-width: 0;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thought .tool__head[data-static] {
  cursor: default;
}
.thought .tool__head[data-static]:hover {
  color: var(--text-3);
}
/* The reasoning itself, quieter than the reply it led to: a short window
   under the row (agent.css .tool__panel) that follows it as it streams. */
.thought__body {
  max-height: 175px;
  padding: 2px 4px 2px 0;
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.thought__body strong {
  color: var(--text-2);
  font-weight: 600;
}
.thought__body .md__p {
  margin-bottom: 6px;
}
.thought__body .md__p:last-child {
  margin-bottom: 0;
}
.thought__body .md__heading {
  margin: 8px 0 4px;
  font-size: var(--fs-sm);
}

/* ---- 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. */
.msg-row {
  animation: msg-in var(--dur-spring) var(--spring-moderate) 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. */
.msg--user {
  animation: user-msg-in var(--dur-spring-fast) var(--spring-fast) backwards;
}
@keyframes user-msg-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
}

/* ---- 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);
  }
}

/* ---- Streaming caret --------------------------------------------
   A caret on the last line while tokens are still arriving, so a slow
   or paused stream is distinguishable from a finished one. */
/* On the last paragraph rather than the message: the reply is a stack of
   blocks now, so a caret on the container sat alone under the final code block
   or tool call instead of trailing the sentence being written. It is suppressed
   entirely when the reply currently ends in something other than prose, where
   there is no line for it to trail. */
.msg--assistant[data-streaming='true'] > .md__p:last-child::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  border-radius: 1px;
  background: var(--provider-accent);
  animation: caret-blink 1.05s steps(1, end) infinite;
}

/* 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;
  }
}
@keyframes caret-blink {
  0%,
  45% {
    opacity: 1;
  }
  50%,
  95% {
    opacity: 0;
  }
}
/*
 * 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 ends in an ellipsis rather than running
   into the next one; the body's cells wrap instead (see .tbl__text). */
.tbl__head .tbl__text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.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: shimmer, spinner, pixel grid ----------
   Adapted from MIT and Apache-2.0 components; see components/agent/LICENSES.txt.
   A label that is still happening has a slow sweep of light across it; a call
   in flight has a thin arc; the model at work has a 3×3 grid with a wave
   crossing it. All three stop under reduced motion. */

.step-shimmer {
  background-image: linear-gradient(
    90deg,
    var(--text-3) 0%,
    var(--text-3) 38%,
    var(--text) 50%,
    var(--text-3) 62%,
    var(--text-3) 100%
  );
  background-size: 250% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: step-shimmer 1.4s linear infinite;
}
/* The sweep runs through nested spans (a file name in a card's title) too,
   and they take the plain colour back when the sweep is off. */
.step-shimmer *,
.step-card__title.step-shimmer .step-card__file {
  color: inherit;
}
@keyframes step-shimmer {
  from {
    background-position: 100% center;
  }
  to {
    background-position: 0% center;
  }
}

.spin-arc {
  display: block;
  flex: none;
  animation: spin-arc 850ms linear infinite;
}
@keyframes spin-arc {
  to {
    rotate: 360deg;
  }
}

.pixel-grid {
  display: inline-grid;
  flex: none;
  grid-template-columns: repeat(3, var(--cell));
  gap: calc(var(--cell) * 0.375);
}
.pixel-grid__cell {
  width: var(--cell);
  height: var(--cell);
  border-radius: 1px;
  background: var(--text);
  opacity: 0.15;
  animation: pixel-on 650ms ease-in-out infinite;
}
@keyframes pixel-on {
  0%,
  40%,
  100% {
    opacity: 0.15;
  }
  20% {
    opacity: 1;
  }
}

/* A reply that has started and has nothing to show yet. */
.loading-state {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  min-height: 28px;
}
.loading-state__label {
  font-size: var(--fs-sm);
  font-weight: 500;
}
.loading-state__clock {
  color: var(--text-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .step-shimmer,
  .pixel-grid__cell,
  .spin-arc {
    animation: none;
  }
}
body[data-reduce-motion='on'] .step-shimmer,
body[data-reduce-motion='on'] .pixel-grid__cell,
body[data-reduce-motion='on'] .spin-arc {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .step-shimmer {
    background: none;
    color: var(--text-2);
  }
}
body[data-reduce-motion='on'] .step-shimmer {
  background: none;
  color: var(--text-2);
}

/* File-type marks, shared by the edit cards and the files-changed card. */
.file-icon {
  display: block;
  flex: none;
  color: var(--text-3);
}
.file-icon[data-ext='react'] {
  color: #5cc3e8;
}
.file-icon[data-ext='css'] {
  color: #a77bf3;
}
.file-icon[data-ext='data'] {
  color: #d9a53a;
}
.file-icon[data-ext='markup'] {
  color: #e8784e;
}
.file-icon[data-ext='code'] {
  color: #6b9eff;
}

/* ---------- 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: 8px;
  max-width: 100%;
  height: 28px;
  padding: 0 7px 0 2px;
  border-radius: var(--r-sm);
  text-align: left;
  color: var(--text-3);
  font-size: var(--fs-sm);
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.tool__head:not([data-static]):hover {
  background: var(--hover);
  color: var(--text-2);
}
.tool__glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--text-3);
}
.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: var(--text-2);
  font-weight: 450;
}
.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 was about — a file, a query, a URL — as a small pill. */
.tool__chip {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--hover);
  box-shadow: inset 0 0 0 0.5px var(--border-soft);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.tool__head:hover .tool__chip {
  color: var(--text-2);
}
.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;
  }
}
.tool__panel > div {
  margin: 2px 0 6px 9px;
  padding-left: 15px;
  border-left: 1px solid var(--border-soft);
}
.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);
}

/* ---------- Activity: a run of calls as one line ----------
   The line says what the run did ("Thought, read 3 files and ran 2
   searches"); while it is live it is the step in progress, with a clock. */

.activity {
  margin: 2px 0;
  white-space: normal;
}
.activity__head {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 28px;
  padding: 0 7px 0 2px;
  border-radius: var(--r-sm);
  text-align: left;
  color: var(--text-3);
  font-size: var(--fs-sm);
  transition:
    color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}
.activity__head:hover {
  background: var(--hover);
  color: var(--text-2);
}
.activity__orb {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
}
.activity__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity__detail {
  min-width: 0;
  color: var(--text-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity__clock {
  flex: none;
  color: var(--text-4);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.activity__flag {
  flex: none;
  color: color-mix(in srgb, var(--danger), var(--text-3) 35%);
}
.activity__flag::before {
  content: '·';
  margin-right: 8px;
  color: var(--text-4);
}
.activity__chevron {
  flex: none;
  color: var(--text-4);
  transition: transform var(--dur) var(--ease);
}
.activity[data-open] .activity__chevron {
  transform: rotate(90deg);
}
/* The steps, hung off a hairline so they read as the line's contents. */
.activity__list {
  margin: 2px 0 4px 9px;
  padding-left: 12px;
  border-left: 1px solid var(--border-soft);
  overflow: hidden;
  interpolate-size: allow-keywords;
  transition:
    height 240ms var(--ease),
    opacity 160ms var(--ease);
}
@starting-style {
  .activity__list {
    height: 0;
    opacity: 0;
  }
}
/* A live run past a few steps: a window onto the newest, fading out at the
   top, that follows each step as it lands. */
.activity__list[data-window] {
  max-height: 172px;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
}
.activity__list > .step {
  animation: step-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.activity__list .tool {
  animation: none;
}
@keyframes step-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
.activity__live {
  margin: 2px 0 6px 26px;
  max-height: 140px;
}

/* ---------- Step cards: an edit's diff, a command and its output ----------
   Adapted from MIT and Apache-2.0 components; see components/agent/LICENSES.txt.
   A bordered card with a quiet header band: what happened, to what, and how
   it ended, over the thing itself. */

.step-card,
.files-changed {
  --card-line: var(--border);
  --card-head: color-mix(in srgb, var(--bg), var(--fg) 4%);
  --card-body: color-mix(in srgb, var(--bg), var(--sink-color) 22%);
}
[data-theme='light'] .step-card,
[data-theme='light'] .files-changed {
  --card-head: color-mix(in srgb, var(--bg), var(--fg) 3%);
  --card-body: var(--bg);
}
.step-card {
  margin: 8px 0;
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  background: var(--card-body);
  overflow: hidden;
  white-space: normal;
  animation: tool-in var(--dur-spring) var(--spring-moderate) both;
}
.step-card__head {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  height: 30px;
  padding: 0 9px 0 10px;
  background: var(--card-head);
  color: var(--text-3);
  font-size: var(--fs-xs);
  text-align: left;
  transition: color var(--dur) var(--ease);
}
.step-card__head:not(:disabled):hover {
  color: var(--text-2);
}
.step-card[data-open] > .step-card__head,
.command-card > .step-card__head {
  border-bottom: 1px solid var(--card-line);
}
.step-card__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  color: var(--text-3);
}
.step-card[data-status='error'] .step-card__icon,
.step-card[data-status='denied'] .step-card__icon {
  color: var(--danger);
}
.step-card__title {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.step-card__file {
  color: var(--text);
  font-weight: 500;
}
.step-card__folder {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--text-4);
  font-size: var(--fs-xxs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.step-card__end {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-left: 6px;
}
.step-card__stat {
  display: inline-flex;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  font-variant-numeric: tabular-nums;
}
.step-card__note {
  color: var(--text-3);
  font-size: var(--fs-xxs);
}
.step-card__exit {
  color: var(--diff-del-fg);
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
}
.step-card__chevron {
  color: var(--text-4);
  transition: transform var(--dur) var(--ease);
}
.step-card[data-open] .step-card__chevron {
  transform: rotate(180deg);
}
.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 card, without its own card around it. */
.edit-card__body {
  position: relative;
}
.edit-card__body[data-clipped] {
  max-height: 168px;
  overflow: hidden;
}
.step-card .diff,
.files-changed .diff {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.step-card .diff__body,
.files-changed .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: the line it ran, then the tail of what it printed. */
.command-card__body {
  padding: 8px 10px 9px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 17px;
}
.command-card__line {
  display: flex;
  gap: 7px;
}
.command-card__prompt {
  flex: none;
  color: #d29922;
  user-select: none;
}
[data-theme='light'] .command-card__prompt {
  color: #b26b00;
}
.command-card__command {
  min-width: 0;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.step-card[data-status='denied'] .command-card__command {
  color: var(--text-3);
}
.command-card__output {
  margin: 6px 0 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;
}
/* Folded output shows its last lines; the ones above fade out. */
.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;
}

/* ---------- Files changed: the turn's edits, once, at the end ---------- */

.files-changed {
  margin-top: 14px;
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  background: var(--card-body);
  overflow: hidden;
  white-space: normal;
}
.files-changed__head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 6px 0 12px;
  border-bottom: 1px solid var(--card-line);
  background: var(--card-head);
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.files-changed__title {
  font-weight: 500;
}
.files-changed__review {
  height: 24px;
  margin-left: auto;
  padding: 0 9px;
  border-radius: var(--r-xs);
  color: var(--text-2);
  font-size: var(--fs-xs);
  transition:
    color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}
.files-changed__review:hover {
  color: var(--text);
  background: var(--hover);
}
.files-changed__file + .files-changed__file {
  border-top: 1px solid var(--border-soft);
}
.files-changed__row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 0 12px 0 8px;
  text-align: left;
  font-size: var(--fs-sm);
  transition: background var(--dur) var(--ease);
}
.files-changed__row:hover,
.files-changed__file[data-open] .files-changed__row {
  background: var(--hover);
}
.files-changed__chevron {
  flex: none;
  color: var(--text-4);
  transition: transform var(--dur) var(--ease);
}
.files-changed__file[data-open] .files-changed__chevron {
  transform: rotate(90deg);
}
.files-changed__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
}
.files-changed__name {
  flex: none;
  max-width: 60%;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.files-changed__folder {
  min-width: 0;
  flex: 1;
  color: var(--text-4);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.files-changed__stat {
  flex: none;
  display: flex;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  font-variant-numeric: tabular-nums;
}
.files-changed__row .files-changed__stat {
  margin-left: auto;
}
.files-changed__diffs {
  border-top: 1px solid var(--border-soft);
}
.files-changed__diffs .diff + .diff {
  border-top: 1px dashed var(--border-soft);
}
/*
 * 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: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  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;
}
@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 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 9px 8px;
  color: var(--text-3);
  /* The menu itself is the scroll container, so without this the search field
     scrolls away from a long list — exactly when it is most needed. */
  position: sticky;
  top: -5px;
  z-index: 1;
  margin: -5px -5px 0;
  padding: 9px 14px 8px;
  /* Opaque on purpose. `--menu-bg` is deliberately translucent so `.menu`'s
     backdrop-filter has something to frost — but that frosts what is behind
     the *whole menu* and does nothing for the menu's own scrolling children,
     so painting this header with it left the list legible through the search
     field. Giving the header its own backdrop-filter does not fix it either:
     Chromium will not sample same-stacking-context scrolled siblings into a
     nested backdrop root, so the bleed only softened.
     `--surface-3` is the solid colour `--menu-bg` is mixed from, so this reads
     as the same material while actually blocking what scrolls beneath it. */
  background: var(--surface-3);
}
.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;
}
.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(--toggle-on);
  color: var(--on-accent);
}
.btn--accent:hover:not(:disabled) {
  background: color-mix(in srgb, var(--toggle-on), #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;
}
.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);
}

/* ---------------- 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;
  z-index: 150;
  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: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  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-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: #34d399;
  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);
  color: var(--on-accent, #fff);
}
.header-btn--primary:hover {
  background: color-mix(in srgb, var(--accent), #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;
}
/* 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 8px;
}

.settings__nav-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 7px 16px;
}

.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;
}

/* Narrow windows (a split screen, or zoomed in): 252px of navigation left the
   page 268px at 520. The nav becomes an icon rail; each item keeps its name
   as a tooltip and an accessible label (SettingsShell). */
@media (max-width: 639px) {
  .settings__nav {
    width: 68px;
    flex-basis: 68px;
  }
  .settings__search,
  .settings__back span,
  .settings__nav .nav-item__label {
    display: none;
  }
  .settings__back {
    justify-content: center;
    padding: 0;
  }
  .settings__nav .nav-item {
    justify-content: center;
    padding: 0;
  }
  /* The group names are hidden; a hairline keeps the groups apart. */
  .settings__group {
    height: 1px;
    margin: 8px 12px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
    background: var(--border-soft);
  }
  .settings__group:first-child {
    display: none;
  }
  .settings__scroll {
    padding: 0 16px 90px;
  }
}
.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;
  padding: 0 24px 90px;
}
.settings__inner {
  width: var(--settings-w);
  max-width: 100%;
  margin: 0 auto;
}

.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;
}

.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;
}
.row__trail {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.row--stack {
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
}

/* 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: flex;
  gap: 14px;
}
.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-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;
}

/* 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);
  color: #4ade80;
}
.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;
}

.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;
  align-items: center;
  justify-content: space-between;
  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(--provider-accent);
  color: var(--on-accent);
}
.btn--provider:hover:not(:disabled) {
  background: var(--provider-accent-strong);
}
.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;
}

.usage {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.usage__track {
  width: 74px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-4);
  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);
}

.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));
}

.credits-projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}
.credits-project {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
  color: var(--text);
  text-align: left;
  cursor: default;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.credits-project:hover {
  background: var(--hover-strong);
  border-color: var(--border-strong);
}
.credits-project__name {
  font-size: var(--fs-base);
  font-weight: 500;
}
.credits-project__what {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* ---------------- Star prompt (components/StarPrompt.tsx) ---------------- */

/* A card in the bottom corner, over whatever is open, until it is answered. */
.star-card {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  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);
}
/* 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 keeps the terminal icon and drops its label. */
@media (max-width: 1120px) {
  .code-terminal-btn span {
    display: none;
  }
}
.code-folder {
  gap: 6px;
  /* Room for project / session. */
  max-width: 420px;
  color: var(--text);
}
.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;
}
.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: blur(20px) saturate(1.4);
  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-assistant[data-streaming='true'] > .code-text[data-caret] > .md__p:last-child::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  border-radius: 1px;
  background: var(--provider-accent);
  animation: caret-blink 1.05s steps(1, end) infinite;
}

.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;
}
.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);
}
/* 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[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. */
.sched-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  margin: 0 -22px;
  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-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);
}
.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: #4ade80;
}
/* 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: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  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);
}
.mlib-meta > * + *::before {
  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;
  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 {
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--text);
}
.worker-card__purpose {
  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;
}
.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 on the composer, in its column: the dock centres its
   children, and without a width of its own a long question stretched this
   to the whole pane, wider than both the thread and the composer. */
.worker-asks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: var(--composer-chat-w);
  max-width: calc(100% - 48px);
  max-height: 40vh;
  margin-bottom: 8px;
  overflow: auto;
  overscroll-behavior: contain;
}
.worker-ask {
  flex: none;
  padding: 12px 14px;
  border-radius: var(--r-composer);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.worker-ask[data-kind='approve'] {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent), transparent 60%);
}
.worker-ask__head {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.worker-ask[data-kind='approve'] .worker-ask__head svg {
  color: var(--accent);
}
.worker-ask__who {
  color: var(--text-2);
  font-weight: 500;
}
.worker-ask__when {
  margin-left: auto;
}
.worker-ask__question {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  white-space: pre-wrap;
}
.worker-ask__action {
  margin: 4px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.worker-ask__tool {
  color: var(--text-4);
  font-family: var(--font-mono);
}
.worker-ask__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
/* An answer can be a sentence: it wraps inside its chip rather than running
   past the card. */
.worker-ask__actions .btn {
  max-width: 100%;
  height: auto;
  min-height: 28px;
  padding-top: 4px;
  padding-bottom: 4px;
  white-space: normal;
  text-align: left;
  line-height: 1.35;
}
/* The reply box takes a line of its own once the chips leave it too little. */
.worker-ask__reply {
  flex: 1 1 220px;
  min-width: 0;
  height: 28px;
  font-size: var(--fs-sm);
}
.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;
}

/* ---- 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);
}


/* ---------------------------------------------------------------- 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 {
  max-height: min(420px, 60vh);
  overflow-y: auto;
}
.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;
}
/**
 * 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;
}
.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;
}
.term-wrapper .xterm {
  position: relative;
  z-index: 1;
}
.term-pane .xterm {
  height: 100%;
}
.term-pane .xterm-viewport {
  scrollbar-width: thin;
  /* 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;
}

/* 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__own {
  padding: 0 14px 12px;
  text-align: left;
  font: inherit;
  font-size: 11.5px;
  color: var(--link);
}
.theme-picker__own:hover {
  text-decoration: underline;
}

/* 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));
}
/* 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 → 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 three "connect" tiles. */
.ch-apps {
  display: grid;
  /* Three across in a wide window, 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);
}

.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);
}
/* 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 {
  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-footnote {
  margin: 4px 0 0;
  font-size: var(--fs-xs);
  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 */

.tr-hero {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
}
.tr-hero__top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tr-broker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
}
.tr-broker[data-real] {
  background: var(--danger-soft);
  color: var(--danger);
}
.tr-market {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.tr-market__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-4);
}
.tr-market[data-open] .tr-market__dot {
  background: var(--diff-add-fg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--diff-add-fg), transparent 80%);
}
/* The one hero figure on the page: big, in the UI sans, proportional digits. */
.tr-hero__value {
  font-size: 52px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text);
}
.tr-hero__deltas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: var(--fs-sm);
}

.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;
}
.tr-session__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tr-session__title {
  font-weight: 600;
  color: var(--text);
}
.tr-session__meta {
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.tr-session__last {
  font-size: var(--fs-sm);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------- 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 */

.tr-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.tr-kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
}
.tr-kpi__label {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.tr-kpi__value {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.tr-kpi__note {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* --------------------------------------------------------------- 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);
}
.eq-chart__table-toggle {
  position: absolute;
  right: 0;
  top: -40px;
}
.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-start {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--sunken);
}
.tr-start__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.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-brokers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.tr-broker-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  text-align: left;
  color: var(--text);
}
.tr-broker-card[aria-checked='true'] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.tr-broker-card__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--fs-sm);
}
.tr-broker-card[data-real] .tr-broker-card__name svg {
  color: var(--danger);
}
.tr-broker-card__desc {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.4;
}
.tr-keys {
  display: flex;
  gap: 8px;
  width: 100%;
}
.tr-keys .input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.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;
}
/* Settings → 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;
}

/* ---------------- 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;
}

/* ---- 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;
}

/* One series, so no legend: the section label names it. Bars in the accent,
   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;
}
/* Plan use at API rates: the top of the bar, lighter, since it was never charged. */
.usage-chart__bar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.usage-chart__plan {
  flex: none;
  width: 100%;
  background: color-mix(in srgb, var(--accent), var(--surface-1) 58%);
}
.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;
}
.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;
}

@media (prefers-reduced-motion: reduce) {
  .usage-chart__bar {
    transition: none;
  }
  .usage-heat__grid .usage-heat__cell {
    animation: none;
  }
}
/* ---- The ADE header's usage meter (components/code/UsageMeter.tsx) ---- */

.usage-pill {
  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-tool__account {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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);
}

/* ---- 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;
}
.account-row__plan,
.account-row__tag {
  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);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.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;
}