/* ════════════════════════════════════════════════════════════════
   opusfund — port of /Users/nuxos/Downloads/index.html design
   ════════════════════════════════════════════════════════════════ */

:root {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;

  --periwinkle: #8b9dff;
  --mint-up: #6ee7b7;
  --coral-down: #fca5a5;
  --amber-hold: #fcd34d;
  --gold-payout: #d9a441;

  --color-primary-500: #8b9dff;
  --color-neutral-300: #888888;
  --color-bg-500: #141414;
  --color-bg-900: #050505;
  --color-foreground-200: #ededed;
  --color-foreground-500: #c4c4c4;
  --color-success-400: #6ee7b7;
  --color-warning-400: #fcd34d;
  --color-danger-300: #fca5a5;

  --color-background: #0a0a0a;
  --color-surface: #0f0f0f;
  --color-surface-raised: #141414;
  --color-border: #2a2a2a;
  --color-foreground: #ededed;
  --color-text-secondary: #c4c4c4;
  --color-text-muted: #888888;
  --color-primary: #8b9dff;
  --color-sentiment-up: #6ee7b7;
  --color-sentiment-hold: #fcd34d;
  --color-sentiment-down: #fca5a5;

  --text-hero: 3.25rem;
  --text-hero--line-height: 3.5rem;
  --text-hero--letter-spacing: -0.025em;
  --text-body-sm: 0.875rem;
  --text-body-sm--line-height: 1.375rem;
  --text-caption: 0.75rem;
  --text-caption--line-height: 1.125rem;
  --text-micro: 0.6875rem;
  --text-micro--line-height: 1rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  --shadow-focus: 0 0 0 3px rgb(139 157 255 / 0.28);

  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;

  --page-padding-mobile: 1.25rem;
  --page-padding-desktop: 2.5rem;

  --color-success-bg-opacity: rgba(110, 231, 183, 0.1);
  --color-warning-bg-opacity: rgba(252, 211, 77, 0.1);
  --color-danger-bg-opacity: rgba(252, 165, 165, 0.1);
  --color-info-bg-opacity: rgba(139, 157, 255, 0.1);
  --color-foreground-bg-subtle: #ededed26;
  --color-warning-bg-subtle: #fcd34d26;
}

.hosted-runtime-maintenance-banner {
  padding: 0.75rem 1rem;
  color: var(--yw);
  background: color-mix(in srgb, var(--yw) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--yw) 35%, transparent);
  text-align: center;
  font-size: 0.875rem;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input,
button,
textarea,
select {
  -webkit-font-smoothing: inherit;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--color-background);
  color: var(--color-foreground);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  color: inherit;
}

input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  font-weight: 300;
}

a,
button,
input,
label {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
label:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ── brand ────────────────────────────────────────────────────── */
.brand {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-foreground);
  gap: 6px;
}

.brand .ac {
  color: var(--color-sentiment-up);
}

/* ── step shell ───────────────────────────────────────────────── */
.step-shell {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 75px 1fr;
  background: var(--color-background);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-6) var(--page-padding-mobile);
}

@media (min-width: 768px) {
  .topbar {
    padding-inline: var(--page-padding-desktop);
  }
}

/* ── progress ─────────────────────────────────────────────────── */
.progress {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 120px;
  height: 2px;
}

.progress-segment {
  height: 2px;
  width: 18px;
  border-radius: var(--radius-full);
  background: var(--color-foreground-500);
  opacity: 0.9;
  transition: width .2s, background-color .2s;
}

.progress-segment.is-active {
  width: 32px;
  background: var(--color-primary);
  opacity: 1;
}

@media (max-width: 720px) {
  .progress {
    width: auto;
  }
}

/* ── step area + card ─────────────────────────────────────────── */
.step-area {
  display: flex;
  justify-content: center;
  padding: 3.5rem var(--page-padding-mobile) 5rem;
}

@media (min-width: 768px) {
  .step-area {
    padding-inline: var(--page-padding-desktop);
  }
}

.step-area.pt-12 {
  padding-top: var(--spacing-12);
}

.card {
  width: min(620px, 100%);
  animation: fade-up .4s cubic-bezier(.4, 0, .2, 1);
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  .card {
    width: 100%;
  }
}

@media (max-width: 820px) {
  .step-shell {
    grid-template-rows: 70px 1fr;
  }

  .step-area {
    padding: 3rem clamp(1.25rem, 4vw, 2rem) 5rem;
  }

  .step-area.pt-12 {
    padding-top: 3rem;
  }

  .card {
    width: min(100%, 704px);
  }
}

/* ── step kicker + headings ───────────────────────────────────── */
.step-kicker {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.375rem;
}

.step-number {
  color: var(--color-primary);
}

.hero-title {
  max-width: 620px;
  margin: var(--spacing-2) 0 0;
  color: var(--color-foreground);
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 11vw, var(--text-hero));
  font-style: italic;
  font-weight: 500;
  letter-spacing: var(--text-hero--letter-spacing);
  line-height: 0.98;
}

.lead {
  max-width: 620px;
  margin: var(--spacing-2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
}

.is-accent {
  color: var(--color-primary);
}

/* ── actions / buttons ────────────────────────────────────────── */
.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  min-height: 48px;
  margin-top: var(--spacing-8);
}

.actions.justify-end {
  justify-content: flex-end;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  min-width: 91px;
  min-height: 40px;
  border-radius: var(--radius-md);
  padding: 0.6875rem 1.125rem;
  border: 1px solid transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.125rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:disabled,
.btn.disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
}

.btn:disabled:hover,
.btn.disabled:hover {
  transform: none;
}

.btn-primary {
  min-width: 146px;
  background: var(--color-primary);
  color: var(--color-background);
}

.btn-primary:hover {
  background: #9aa9ff;
}

.hosted-wizard .btn-ghost {
  padding: 12px 24px;
  width: min(156px, 100%);
  background: var(--color-bg-500);
  color: var(--color-primary);
}

.hosted-wizard .btn-ghost:hover {
  background: #17191f;
}

.btn-secondary {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-foreground);
}

.btn-secondary:hover {
  background: #1a1a1a;
}

.btn.min-w-48 {
  min-width: 12rem;
}

.btn-block {
  width: 100%;
  min-height: 44px;
}

@media (max-width: 720px) {
  .actions {
    align-items: stretch;
  }

  .btn {
    flex: 1 1 auto;
  }
}

/* ── auth screens ─────────────────────────────────────────────── */
.auth-area {
  align-items: flex-start;
  padding-top: 3.5rem;
  padding-bottom: 5rem;
}

.auth-card {
  width: min(458px, 100%);
  overflow: hidden;
}

.auth-title {
  width: 100%;
  margin-top: var(--spacing-2);
  font-size: 3.25rem;
  line-height: 3.5rem;
  letter-spacing: 0;
}

.auth-lead {
  width: 100%;
  max-width: 458px;
}

.auth-form {
  display: grid;
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
}

.auth-fields {
  display: grid;
  gap: var(--spacing-4);
}

.auth-card .terms {
  align-items: flex-start;
  margin-top: 0;
  padding-top: 0.25rem;
}

.auth-card .terms span {
  min-width: 0;
}

.auth-actions {
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-6);
  margin-top: 0;
}

.auth-actions .btn {
  width: 100%;
  min-height: 44px;
}

.auth-passkey {
  padding-top: var(--spacing-2);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
  width: 100%;
}

.auth-divider span {
  height: 1px;
  flex: 1 1 0;
  background: var(--color-border);
}

.auth-divider em {
  color: var(--color-foreground);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.875rem;
  letter-spacing: 0;
}

.auth-modal-backdrop {
  z-index: 90;
  background: rgb(0 0 0 / 0.25);
  backdrop-filter: blur(1.5px);
}

.auth-dialog {
  position: relative;
  width: min(460px, 100%);
  border: 1px solid #2a2d34;
  border-radius: 12px;
  background: #0e0f11;
  overflow: hidden;
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.38);
}

.auth-dialog-content {
  display: grid;
  justify-items: center;
  gap: var(--spacing-6);
  padding: var(--spacing-6);
  text-align: center;
}

.auth-dialog-close {
  position: absolute;
  top: 12px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #1f2126;
  border-radius: 6px;
  background: var(--color-surface-raised);
  color: var(--color-foreground);
  font-size: 24px;
  line-height: 1;
  z-index: 1;
}

.auth-dialog-close:hover {
  background: #1a1b1f;
}

.auth-dialog-icon {
  display: inline-flex;
  width: 96px;
  height: 96px;
  color: var(--color-primary);
}

.auth-dialog-icon svg {
  width: 100%;
  height: 100%;
}

.auth-dialog-copy {
  display: grid;
  gap: var(--spacing-2);
  width: 100%;
}

.auth-dialog-title {
  margin: 0;
  color: var(--color-foreground);
  font-family: var(--font-display);
  font-size: 2rem;
  font-style: italic;
  font-weight: 500;
  line-height: 2.375rem;
  letter-spacing: 0;
}

.auth-dialog-description {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  font-weight: 300;
  line-height: var(--text-body-sm--line-height);
}

.auth-dialog-description strong {
  color: var(--color-foreground);
  font-weight: 600;
}

.auth-dialog-button {
  min-height: 40px;
}

@media (max-width: 720px) {
  .auth-area {
    padding-top: 3rem;
  }

  .auth-title {
    font-size: clamp(2.75rem, 12vw, 3.25rem);
    line-height: 1.08;
  }
}

/* ── banner ───────────────────────────────────────────────────── */
.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  min-height: 28px;
  margin-top: var(--spacing-8);
  border-radius: var(--radius-sm);
  padding: 0.4375rem 0.625rem;
  background: rgb(110 231 183 / 0.1);
  color: var(--color-sentiment-up);
  font-size: var(--text-micro);
  font-weight: 500;
  line-height: var(--text-micro--line-height);
}

.icon-btn {
  display: inline-grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: currentColor;
  cursor: pointer;
}

/* ── field (bordered box around label + input) ────────────────── */
.field {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 64px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-3) 0.875rem;
  background: var(--color-surface-raised);
}

.field:focus-within {
  border-color: var(--color-primary);
}

.field-label,
.section-label,
.tiny-step {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 0.875rem;
  text-transform: uppercase;
}

.section-label.is-accent {
  color: var(--color-primary);
}

.field-input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-foreground);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}

.field-input:focus,
.field-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.field-input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.5;
}

.hosted-wallet-fields {
  display: grid;
  gap: var(--spacing-4);
  margin-top: var(--spacing-8);
}

.hosted-wallet-address-value {
  overflow-wrap: anywhere;
}

.hosted-wallet-address-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.hosted-wallet-address-row .field-input {
  flex: 1;
}

.hosted-wallet-password-hint,
.hosted-wallet-password-error {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
}

.hosted-wallet-password-hint {
  color: var(--color-text-muted);
}

.hosted-wallet-password-error {
  color: var(--color-danger-300);
}

.field:has(.field-input[aria-invalid="true"]) {
  border-color: var(--color-danger-300);
}

.hosted-wallet-complete {
  color: var(--color-text-muted);
}

.hosted-wallet-verified {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0;
  color: var(--color-foreground);
  font-weight: 600;
}

.hosted-wallet-verified span {
  display: inline-grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--color-primary);
}

.hosted-wallet-completion-graphic {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: -12px 0 -8px;
}

.hosted-wallet-completion-graphic .opf-hop {
  margin: 0;
}

.hosted-wallet-success-card {
  box-sizing: border-box;
  width: min(580px, 100%);
  margin: 8px auto 0;
  padding: 36px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 18px 48px rgb(0 0 0 / .22);
  text-align: center;
}

.hosted-wallet-success-card .hosted-wizard-title {
  margin: 0 0 8px;
}

.hosted-wallet-success-card .hosted-wizard-subtitle {
  max-width: 420px;
  margin: 0 auto;
}

.hosted-wallet-success-list {
  display: grid;
  width: fit-content;
  gap: 10px;
  margin: 28px auto 0;
  text-align: left;
}

/* ── hosted onboarding · wallet backup ───────────────────────── */
.hosted-wallet-address {
  margin: 34px 0 30px;
  padding: 16px 18px;
  border: 1px solid #1b1e25;
  border-radius: 10px;
  background: #101216;
}

.hosted-wallet-security-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  color: #aeb8dd;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.hosted-wallet-security-note svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--color-primary);
}

.hosted-wallet-surface {
  margin-top: 30px;
  padding: 26px;
  border: 1px solid #252a35;
  border-radius: 16px;
  background: linear-gradient(145deg, #12151b, #0e1014);
  box-shadow: 0 18px 45px rgb(0 0 0 / .18);
}

.hosted-wallet-surface .hosted-wallet-address {
  margin: 0 0 26px;
  padding: 0 0 22px;
  border: 0;
  border-bottom: 1px solid #252a35;
  border-radius: 0;
  background: transparent;
}

.hosted-wallet-surface:has([data-hosted-wallet-target="confirmation"]:not([hidden])) {
  padding-block: 20px;
}

.hosted-wallet-surface:has([data-hosted-wallet-target="confirmation"]:not([hidden])) .hosted-wallet-address {
  margin-bottom: 18px;
  padding-bottom: 16px;
}

.hosted-wallet-surface:has([data-hosted-wallet-target="confirmation"]:not([hidden])) .hosted-wallet-password-confirmation {
  margin-top: 12px;
}

.hosted-wallet-surface:has([data-hosted-wallet-target="confirmation"]:not([hidden])) .hosted-wallet-download {
  margin-top: 18px;
}

.hosted-wallet-surface:has([data-hosted-wallet-target="confirmation"]:not([hidden])) .hosted-wallet-download-note {
  margin-top: 5px;
}

.hosted-wallet-address-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.hosted-wallet-address-label {
  color: #7a8090;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.hosted-wallet-address-badge {
  padding: 3px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hosted-wallet-address-value {
  display: block;
  color: #c9cdd6;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.hosted-wallet-success-card .hosted-wallet-fields {
  margin-top: 28px;
}

.hosted-wallet-success-card .hosted-wallet-address {
  margin: 0;
  text-align: left;
}

.hosted-wallet-success-card .hosted-wallet-address-head {
  margin-bottom: 10px;
}

.hosted-wallet-success-card .hosted-wizard-footer {
  width: 100%;
  margin-top: 28px;
  padding-top: 24px;
}

.hosted-wallet-success-card .hosted-wizard-footer-actions,
.hosted-wallet-success-card .btn-primary {
  width: 100%;
}

@media (max-width: 600px) {
  .hosted-wallet-success-card {
    padding: 28px 20px;
  }
}

.hosted-wallet-password-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0;
}

.hosted-wallet-character-count {
  flex: none;
  color: var(--color-primary);
  font: inherit;
}

.hosted-wallet-password-heading-actions {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
}

.hosted-wallet-generate-button {
  padding: 4px 9px;
  border: 1px solid #343a48;
  border-radius: 5px;
  background: #171a20;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.hosted-wallet-generate-button:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: rgb(139 157 255 / .12);
}

.hosted-wallet-generate-button:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: .5;
}

.hosted-wallet-copy-button {
  display: inline-grid;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-primary);
  cursor: pointer;
}

.hosted-wallet-copy-button[hidden] {
  display: none;
}

.hosted-wallet-copy-button:hover {
  background: rgb(139 157 255 / .1);
}

.hosted-wallet-copy-button svg {
  width: 17px;
  height: 17px;
}

.hosted-wallet-copy-check {
  display: none;
}

.hosted-wallet-copy-button.is-copied {
  color: var(--color-sentiment-up);
}

.hosted-wallet-copy-button.is-copied .hosted-wallet-copy-icon {
  display: none;
}

.hosted-wallet-copy-button.is-copied .hosted-wallet-copy-check {
  display: block;
}

.hosted-wallet-visibility-button {
  display: inline-grid;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.hosted-wallet-visibility-button:hover {
  background: rgb(139 157 255 / .1);
  color: var(--color-foreground);
}

.hosted-wallet-visibility-button svg {
  width: 18px;
  height: 18px;
}

.hosted-wallet-visibility-hide {
  display: none;
}

.hosted-wallet-visibility-button.is-visible {
  color: var(--color-primary);
}

.hosted-wallet-visibility-button.is-visible .hosted-wallet-visibility-show {
  display: none;
}

.hosted-wallet-visibility-button.is-visible .hosted-wallet-visibility-hide {
  display: block;
}

.hosted-wallet-strength {
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
}

.hosted-wallet-strength-bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.hosted-wallet-strength-bars i {
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-border);
}

.hosted-wallet-strength[data-score="1"] .hosted-wallet-strength-bars i:nth-child(-n+1),
.hosted-wallet-strength[data-score="2"] .hosted-wallet-strength-bars i:nth-child(-n+2) {
  background: var(--color-danger-300);
}

.hosted-wallet-strength[data-score="3"] .hosted-wallet-strength-bars i:nth-child(-n+3),
.hosted-wallet-strength[data-score="4"] .hosted-wallet-strength-bars i {
  background: var(--color-sentiment-up);
}

.hosted-wallet-strength-label {
  color: var(--color-foreground);
}

.hosted-wallet-strength-feedback {
  grid-column: 1 / -1;
}

.hosted-wallet-generated-status {
  display: block;
  min-height: 1em;
  margin-top: 8px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
}

@media (max-width: 560px) {
  .hosted-wallet-strength {
    grid-template-columns: 1fr auto;
  }

  .hosted-wallet-strength-bars {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.hosted-wallet-password {
  display: block;
}

.hosted-wallet-file {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #1a1a1a;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.hosted-wallet-file:hover {
  border-color: #4d5362;
}

.hosted-wallet-file:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(139 157 255 / .12);
}

.hosted-wallet-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.hosted-wallet-file-icon {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: none;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgb(139 157 255 / .1);
  color: var(--color-primary);
}

.hosted-wallet-file-icon svg {
  width: 19px;
  height: 19px;
}

.hosted-wallet-file-copy {
  min-width: 0;
  flex: 1;
}

.hosted-wallet-file-name,
.hosted-wallet-file-hint {
  display: block;
}

.hosted-wallet-file-name {
  overflow: hidden;
  color: var(--color-foreground);
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hosted-wallet-file-hint {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 17px;
}

.hosted-wallet-file-action {
  flex: none;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: rgb(139 157 255 / .12);
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 480px) {
  .hosted-wallet-file {
    align-items: flex-start;
  }

  .hosted-wallet-file-action {
    display: none;
  }
}

.hosted-wallet-password-confirmation {
  margin-top: 18px;
}

.hosted-wallet-password-intro {
  margin: -2px 0 10px;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.hosted-wallet-password-match {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
}

.hosted-wallet-password-match[hidden] {
  display: none;
}

.hosted-wallet-password-match.is-valid {
  color: var(--color-sentiment-up);
}

.hosted-wallet-password-match.is-invalid {
  color: var(--color-danger-300);
}

.hosted-wallet-password-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #1a1a1a;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.hosted-wallet-password-row.is-valid {
  border-color: var(--color-sentiment-up);
  box-shadow: none;
}

.hosted-wallet-password-row.is-invalid {
  border-color: var(--color-danger-300);
}

.hosted-wallet-password-row input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-foreground);
  font-size: 14px;
  line-height: 20px;
}

.hosted-wallet-password-row input:focus {
  outline: none;
}

/* opufunds-icons/check — sits at the right edge of the field once the rule is met */
.hosted-wallet-password-valid {
  flex: none;
  display: inline-flex;
  color: var(--color-sentiment-up);
}

.hosted-wallet-password-valid[hidden] {
  display: none;
}

.hosted-wallet-password-valid svg {
  width: 16px;
  height: 16px;
}

/* Rules on the left, remaining-character countdown on the right — both below the field */
.hosted-wallet-password-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.hosted-wallet-password-counter {
  flex: none;
  margin-top: 8px;
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 19px;
  white-space: nowrap;
}

/* Narrow screens stack the countdown above the rules, still right-aligned */
@media (max-width: 560px) {
  .hosted-wallet-password-meta {
    flex-direction: column;
    gap: 0;
  }

  .hosted-wallet-password-counter {
    order: -1;
    align-self: flex-end;
  }
}

.hosted-wallet-password-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 19px;
  cursor: pointer;
}

.hosted-wallet-password-toggle:hover {
  color: #a8b5ff;
}

.hosted-wallet-rules {
  display: grid;
  gap: 0;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 19px;
}

.hosted-wallet-rules li {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.hosted-wallet-rules li::before {
  content: "•";
  color: var(--color-text-muted);
}

.hosted-wallet-download {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

.hosted-wallet-download-primary {
  width: 100%;
}

.hosted-wallet-download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 0 24px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #121318;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.hosted-wallet-download-button:hover:not(:disabled) {
  border-color: #aebaff;
  background: #aebaff;
}

.hosted-wallet-download-button:disabled {
  border-color: var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-primary);
  opacity: .35;
  cursor: not-allowed;
}

.hosted-wallet-download-note {
  margin: 9px 0 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
}

.hosted-wallet-restart-dialog {
  width: min(420px, calc(100vw - 32px));
  margin: auto;
  padding: 24px;
  border: 1px solid #343a48;
  border-radius: 16px;
  background: #15181e;
  box-shadow: 0 24px 80px rgb(0 0 0 / .58);
  color: var(--color-foreground);
}

.hosted-wallet-restart-dialog::backdrop {
  background: rgb(0 0 0 / .72);
}

.hosted-wallet-restart-dialog-copy {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.hosted-wallet-restart-dialog-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: none;
  place-items: center;
  border-radius: 9px;
  background: rgb(139 157 255 / .12);
  color: var(--color-primary);
  font-size: 1.25rem;
}

.hosted-wallet-restart-dialog-eyebrow {
  margin: 0 0 5px;
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hosted-wallet-restart-dialog h2 {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.3;
}

.hosted-wallet-restart-dialog p:last-child {
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.hosted-wallet-restart-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

@media (max-width: 480px) {
  .hosted-wallet-restart-dialog {
    padding: 20px;
  }

  .hosted-wallet-restart-dialog-actions {
    flex-direction: column-reverse;
  }

  .hosted-wallet-restart-dialog-actions .btn {
    width: 100%;
  }
}

.hosted-wallet-download-icon {
  flex: none;
  width: 24px;
  height: 24px;
}

/* Validation feedback beside the download button: icon + label, gap 4px */
.hosted-wallet-download-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  color: #4a4a4a;
  font-size: 13px;
  line-height: 19px;
}

.hosted-wallet-download-status.is-done {
  color: var(--color-sentiment-up);
}

/* opufunds-icons/check, tinted by currentColor through the mask */
.hosted-wallet-download-status.is-done::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.28 6.31 11.17 12.5 4.83'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.28 6.31 11.17 12.5 4.83'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hosted-wallet-download-status.is-stale {
  color: var(--color-sentiment-hold);
}

/* opufunds-icons/mark — solid dot in a 16px box */
.hosted-wallet-download-status.is-stale::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: var(--radius-full);
  background: currentColor;
  transform: scale(0.375);
}

.hosted-wallet-confirm {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 48px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

/* Checkbox — 20px hit area around an 18px box */
.hosted-wallet-confirm input[type="checkbox"] {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 1px;
  border: 1.5px solid var(--color-border);
  border-radius: 4px;
  background: transparent;
  cursor: inherit;
  transition: background .15s ease, border-color .15s ease;
}

.hosted-wallet-confirm input[type="checkbox"]:checked {
  border-color: var(--color-primary);
  background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.28 6.31 11.17 12.5 4.83'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

.hosted-wallet-confirm input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.hosted-wallet-confirm:has(input:disabled) {
  opacity: .5;
  cursor: not-allowed;
}

.hosted-wizard-footer-actions {
  display: flex;
  width: 100%;
  justify-content: right;
  align-items: center;
  gap: 16px;
}

.hosted-wallet-footer-hint {
  color: #6f7688;
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* ==========================================================================
   opusfund animated mark
   Geometry matches opusfund.svg exactly. The one substitution: the body ring
   is a stroked rounded rect on the original ring's centreline instead of the
   original filled path, so it can be drawn on with stroke-dashoffset.
   Centreline: x 6.5443 y 14.1770 w 21.8113 h 19.6301 r 3.2713, stroke 1.87.
   Perimeter = 77.27 -> dasharray 78.

   Phase A  0 - 2.4s   the mark assembles itself
   Phase B  2.4s on    the mark idles alive
   ========================================================================== */

.opf-mark {
  --opf-ink: #ffffff;
  --opf-up: #6EE7B7;
  --opf-dn: #FCA5A5;
  --opf-scan: #7C7CF0;

  --opf-blink-rate: 3.4s;
  --opf-tick-rate: 1.5s;
  --opf-swing-rate: 1.5s;
  /* half a period: the centre-to-right entry covers half the distance in
     half the time, so it enters at the loop's own average speed */
  --opf-swing-half: calc(var(--opf-swing-rate) / 2);

  display: block;
  width: auto;
  height: 156px;
}

.opf-mark .opf-eyes {
  fill: var(--opf-ink)
}

.opf-mark .opf-body {
  fill: none;
  stroke: var(--opf-ink);
  stroke-width: 1.87
}

.opf-mark .opf-seed {
  fill: var(--opf-ink)
}

.opf-mark .opf-scan {
  fill: var(--opf-scan)
}

.opf-mark .opf-up {
  fill: var(--opf-up)
}

.opf-mark .opf-dn {
  fill: var(--opf-dn)
}

/* transforms on SVG children need an explicit box and origin */
.opf-mark .opf-eyes,
.opf-mark .opf-eyes circle,
.opf-mark .opf-body,
.opf-mark .opf-seed,
.opf-mark .opf-scan,
.opf-mark .opf-up,
.opf-mark .opf-dn {
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------- phase A: assembly ---------- */

@keyframes opf-draw {
  from {
    stroke-dashoffset: 78
  }

  to {
    stroke-dashoffset: 0
  }
}

@keyframes opf-seed-in {
  from {
    opacity: 0;
    transform: scale(.4)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes opf-fade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes opf-up-in {
  from {
    opacity: 0;
    transform: translateY(-5px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes opf-dn-in {
  from {
    opacity: 0;
    transform: translateY(5px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* ---------- phase B: vitals ---------- */

@keyframes opf-blink {

  0%,
  88%,
  96%,
  100% {
    transform: scaleY(1)
  }

  92% {
    transform: scaleY(.08)
  }
}

/* Travel is +/- 6 from a bar centred at x 17.45, leaving 1.47 clearance on
   both inner walls of the body.

   The bar fades in at rest in the centre, so the loop cannot simply start at
   the left extreme — that snaps. Instead it leaves the centre rightward over
   half a period (opf-swing-in), then hands off to the alternating loop, which
   begins at +6 exactly where the entry ended. Both curves have zero velocity
   at the extremes, so the join is invisible. */
@keyframes opf-swing-in {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(6px)
  }
}

@keyframes opf-swing {
  from {
    transform: translateX(6px)
  }

  to {
    transform: translateX(-6px)
  }
}

@keyframes opf-tick-a {

  0%,
  49.9% {
    opacity: .18
  }

  50%,
  100% {
    opacity: 1
  }
}

@keyframes opf-tick-b {

  0%,
  49.9% {
    opacity: 1
  }

  50%,
  100% {
    opacity: .18
  }
}

/* ---------- composition ---------- */

.opf-mark .opf-body {
  stroke-dasharray: 78;
  animation: opf-draw .9s cubic-bezier(.4, 0, .2, 1) both;
}

.opf-mark .opf-seed {
  animation: opf-seed-in .4s cubic-bezier(.2, 1.5, .4, 1) .75s both;
}

.opf-mark .opf-eyes {
  animation: opf-fade .3s ease-out 1.1s both;
}

.opf-mark .opf-eyes circle {
  animation: opf-blink var(--opf-blink-rate) ease-in-out 2.4s infinite;
}

.opf-mark .opf-up {
  animation:
    opf-up-in .32s cubic-bezier(.2, 1.6, .4, 1) 1.5s both,
    opf-tick-a var(--opf-tick-rate) steps(1) 2.4s infinite;
}

.opf-mark .opf-dn {
  animation:
    opf-dn-in .32s cubic-bezier(.2, 1.6, .4, 1) 1.78s both,
    opf-tick-b var(--opf-tick-rate) steps(1) 2.4s infinite;
}

.opf-mark .opf-scan {
  animation:
    opf-fade .35s ease-out 2.1s both,
    opf-swing-in var(--opf-swing-half) cubic-bezier(.45, 0, .55, 1) 2.4s both,
    opf-swing var(--opf-swing-rate) cubic-bezier(.45, 0, .55, 1) calc(2.4s + var(--opf-swing-half)) infinite alternate;
}

/* ---------- modifiers ---------- */

/* long wait: the mark slows down rather than speeding up */
.opf-mark--calm {
  --opf-blink-rate: 5.2s;
  --opf-tick-rate: 2.6s;
  --opf-swing-rate: 2.4s;
}

/* resting logo: no motion, no scan line */
.opf-mark--static * {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  stroke-dashoffset: 0 !important;
}

.opf-mark--static .opf-scan {
  display: none;
}

/* skip assembly and land straight in the idle loop */
.opf-mark--idle .opf-body,
.opf-mark--idle .opf-seed,
.opf-mark--idle .opf-eyes {
  animation-delay: 0s;
  animation-duration: 0s;
}

.opf-mark--idle .opf-eyes circle,
.opf-mark--idle .opf-up,
.opf-mark--idle .opf-dn {
  animation-delay: 0s;
}

/* the scan runs three animations, so its delays must be listed per-animation
   or the loop would start on top of the entry */
.opf-mark--idle .opf-scan {
  animation-delay: 0s, 0s, var(--opf-swing-half);
}

@media (prefers-reduced-motion: reduce) {
  .opf-mark * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }

  .opf-mark .opf-scan {
    opacity: .5 !important;
  }
}

/* ── hosted onboarding wizard ────────────────────────────────── */
.hosted-wizard {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, min(25%, 500px)) minmax(0, 1fr);
  background: #08090a;
}

/* Mobile chrome — hidden until the wizard drops to one column, where it takes
   the place of the sidebar (see the tablet/mobile block further down). */
.hosted-wizard-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
}

.hosted-wizard-topbar-brand {
  display: inline-flex;
  align-items: center;
}

.hosted-wizard-topbar-brand img {
  display: block;
  width: 89px;
  height: 32px;
}

.hosted-wizard-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hosted-wizard-dots li {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: #4a4a4a;
  transition: width .2s ease, background .2s ease;
}

.hosted-wizard-dots li.is-complete {
  background: var(--color-primary);
}

.hosted-wizard-dots li.is-current {
  width: 18px;
  background: var(--color-primary);
}

/* Footer back / sign-out: label on desktop, icon-only on mobile */
.hosted-wizard-back-icon {
  display: none;
  width: 24px;
  height: 24px;
}

.hosted-wizard-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 46px 40px 44px;
  overflow: hidden;
  border-right: 1px solid #14161b;
  background: url("/assets/opusfund/opusfund-gradient-0a28a1e4.png") center / cover no-repeat;
}

/* soft blurred bloom behind the headline, matching the comp */
.hosted-wizard-sidebar::before {
  content: "";
  position: absolute;
  top: -14%;
  right: -26%;
  width: 78%;
  height: 46%;
  border-radius: 50%;
  background: rgb(126 140 200 / .28);
  filter: blur(70px);
  pointer-events: none;
}

.hosted-wizard-sidebar>* {
  position: relative;
}

.hosted-wizard-brand {
  display: inline-flex;
}

.hosted-wizard-brand img {
  width: 154px;
  height: auto;
}

.hosted-wizard-pitch {
  margin-top: 58px;
}

.hosted-wizard-eyebrow,
.hosted-wizard-label,
.hosted-provider-label {
  margin: 0 0 16px;
  color: #7d859c;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hosted-wizard-label,
.hosted-provider-label {
  margin: 34px 0 14px;
}

.hosted-wizard-headline {
  display: grid;
  gap: 4px;
  margin: 0 0 20px;
  color: #f4f5f8;
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-style: italic;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.hosted-wizard-body {
  margin: 0;
  /* max-width: 30ch; */
  color: #a9b0c2;
  font-size: var(--text-body-sm);
  line-height: 1.7;
}

.hosted-wizard-callout {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radius-md);
  background: rgba(252, 211, 77, 0.15);
  color: var(--color-sentiment-hold);
  font-size: 13px;
  font-weight: 500;
  line-height: 19px;
}

/* opufunds-icons/info */
.hosted-wizard-callout-icon {
  flex: none;
  width: 16px;
  height: 16px;
}

.hosted-wizard-footnote {
  margin: 16px 0 0;
  color: #6e7488;
  font-size: 0.6875rem;
  letter-spacing: 0.01em;
}

.hosted-wizard-steps {
  display: grid;
  gap: 8px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.hosted-wizard-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid rgb(255 255 255 / .05);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0.55;
}

.hosted-wizard-steps li.is-current {
  border-color: rgb(255 255 255 / .09);
  background: var(--bg3);
  color: #f4f5f8;
  font-weight: 600;
  opacity: 100%;
}

.hosted-wizard-steps li.is-complete {
  color: #98a0b4;
}

.hosted-wizard-step-number {
  display: grid;
  width: 20px;
  height: 20px;
  flex: none;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background-color: var(--color-surface);
  color: #868da1;
  font-family: var(--font-mono);
  font-size: 0.625rem;
}

.is-current .hosted-wizard-step-number {
  background: var(--color-primary);
  color: var(--color-background);
  border: none;
  font-weight: 700;
}

/* completed steps swap the digit for a stroked tick that fills the box; the glyph
   would otherwise render at the 10px step-number size and read as a speck */
.is-complete .hosted-wizard-step-number {
  color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3c9d8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
}

.hosted-wizard-main {
  display: flex;
  min-width: 0;
  min-height: 100svh;
  flex-direction: column;
  align-items: center;
  padding: 44px 56px 40px;
}

/* steps that wrap their content and footer in one form carry the measure on the form,
   so the two cannot size independently; every step is on the same measure */
.hosted-wizard-flow {
  display: flex;
  width: min(700px, 100%);
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

/* opt-in wider measure; no step uses it today, add it to the form to widen one */
.hosted-wizard-flow.is-wide {
  width: min(900px, 100%);
}

.hosted-wizard-content {
  width: min(700px, 100%);
  flex: 1;
}

@media (min-width: 1040px) {
  .hosted-wizard-main:has(.hosted-provider-picker) .hosted-wizard-content,
  .hosted-wizard-main:has(.hosted-provider-picker) .hosted-wizard-footer {
    width: min(920px, 100%);
  }
}

.hosted-field {
  margin-bottom: 32px;
}

.hosted-field:first-of-type {
  margin-top: 30px;
}

.hosted-field-label {
  display: block;
  margin-bottom: 10px;
  color: #8b909e;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.hosted-field-input {
  width: 100%;
  height: 44px;
  border: 1px solid #EDEDED26;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: var(--bg3);
  color: #f7f8f8;
  font-size: 0.9375rem;
  outline: 0;
}

.hosted-field-input:focus {
  border-color: var(--color-primary);
}

.hosted-field-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 10px 0 0;
  color: #6f7688;
  font-size: 0.8125rem;
}

.hosted-field-count {
  flex: none;
  color: #5c616c;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.hosted-wizard-crumb {
  margin: 0 0 20px;
  color: #5c616c;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.hosted-wizard-crumb span {
  color: #9ea3ad;
}

.hosted-wizard-title {
  margin: 0 0 12px;
  color: var(--color-foreground);
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.hosted-wizard-subtitle {
  margin: 0 0 48px;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.6;
}

.hosted-wizard-box {
  border: 1px solid #1c1e24;
  border-radius: 12px;
  padding: 24px;
  background: #0c0d10;
}

.hosted-wizard-box .field {
  margin-bottom: 18px;
}

.hosted-wizard-box .field:last-child {
  margin-bottom: 0;
}

.hosted-wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.hosted-runtime-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 70px 0 0;
  text-align: center;
}

.hosted-runtime-graphic {
  height: 316px;
  display: flex;
  align-items: center;
}

.hosted-runtime-eyebrow {
  margin: 0;
  color: #6f7688;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hosted-runtime-stage .opf-mark,
.hosted-runtime-stage .opf-hop {
  margin: 14px 0 6px;
}

.hosted-runtime-status {
  margin: 0;
  color: #f7f8f8;
}

.hosted-runtime-note {
  max-width: 460px;
  margin: 0;
  color: #6f7688;
  font-size: 0.8125rem;
  line-height: 1.6;
}

.hosted-runtime-progress {
  width: min(100%, 360px);
  margin: 12px 0 0;
  padding: 18px 20px;
  border: 1px solid #1c1e24;
  border-radius: 12px;
  background: #0c0d10;
  list-style: none;
  text-align: left;
}

.hosted-runtime-progress-step {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  color: #555b6a;
  font-size: 0.75rem;
}

.hosted-runtime-progress-step:not(:last-child)::after {
  position: absolute;
  top: 29px;
  bottom: -9px;
  left: 10px;
  width: 1px;
  background: #242732;
  content: "";
}

.hosted-runtime-progress-marker {
  position: relative;
  z-index: 1;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid #303441;
  border-radius: 50%;
  background: #111318;
  color: #6f7688;
  font-family: var(--font-mono);
  font-size: 0.625rem;
}

.hosted-runtime-progress-step--complete {
  color: #a4a9b5;
}

.hosted-runtime-progress-step--complete .hosted-runtime-progress-marker {
  border-color: color-mix(in srgb, var(--gn) 55%, #303441);
  color: var(--gn);
}

.hosted-runtime-progress-step--current {
  color: #f7f8f8;
  font-weight: 600;
}

.hosted-runtime-progress-step--current .hosted-runtime-progress-marker {
  border-color: var(--pr);
  color: var(--pr);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pr) 12%, transparent);
}

.hosted-runtime-progress-spinner {
  width: 10px;
  height: 10px;
  border: 2px solid color-mix(in srgb, var(--pr) 28%, transparent);
  border-top-color: var(--pr);
  border-radius: 50%;
  animation: hosted-runtime-progress-spin 0.8s linear infinite;
}

@keyframes hosted-runtime-progress-spin {
  to { transform: rotate(360deg); }
}

.hosted-runtime-activity {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #6f7688;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

.hosted-runtime-activity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pr);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pr) 12%, transparent);
  animation: hosted-runtime-activity-pulse 1.8s ease-in-out infinite;
}

.hosted-runtime-activity--complete .hosted-runtime-activity-dot {
  background: var(--gn);
  box-shadow: none;
  animation: none;
}

@keyframes hosted-runtime-activity-pulse {
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .hosted-runtime-activity-dot { animation: none; }
  .hosted-runtime-progress-spinner { animation: none; }
}

/* ── Local development runtime configuration (dev-only disclosure) ───── */

.hosted-runtime-config {
  width: 100%;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}

.hosted-runtime-config-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}

.hosted-runtime-config-summary::-webkit-details-marker {
  display: none;
}

.hosted-runtime-config-summary::before {
  content: "\25BC";
  flex: none;
  width: 14px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 19px;
  transform: rotate(-90deg);
  transition: transform 160ms ease;
}

.hosted-runtime-config[open]>.hosted-runtime-config-summary::before {
  transform: rotate(0deg);
}

.hosted-runtime-config-summary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

.hosted-runtime-config-title {
  flex: 1 0 0;
  min-width: 0;
  color: var(--color-foreground);
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
}

.hosted-runtime-config-badge {
  flex: none;
  border-radius: 4px;
  padding: 4px 8px;
  background: rgba(252, 211, 77, 0.15);
  color: var(--color-sentiment-hold);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0;
}

.hosted-runtime-config-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 16px;
}

.hosted-runtime-config-note {
  width: 100%;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 19px;
}

.hosted-runtime-config-note code {
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
}

.hosted-runtime-config-body .btn {
  min-width: 0;
  min-height: 36px;
  border-radius: var(--radius-sm);
  padding: 0 12px;
  background: var(--color-surface-raised);
  border-color: var(--color-border);
  color: var(--color-foreground);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.hosted-runtime-config-body .btn:hover {
  background: #1a1a1a;
}

.hosted-runtime-config-json {
  width: 100%;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  background: #1a1a1a;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.hosted-wizard-footer-note {
  color: #6f7688;
  font-size: 0.8125rem;
}

.hosted-wizard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid #1c1e24;
  width: min(700px, 100%);
}

.hosted-wizard-footer--end {
  justify-content: flex-end;
}

/* .btn-primary is a fixed 156px, which clips the longest wizard CTA
   ("Continue to cockpit →"); here the width is a floor, not a size. */
.hosted-wizard-footer .btn-primary {
  flex: none;
  width: auto;
  min-width: min(156px, 100%);
}

.agent-chat-setup {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.agent-chat-setup:hover {
  color: var(--color-text);
  border-color: var(--color-primary);
}

.agent-chat-mobile-setup {
  position: fixed;
  z-index: 51;
  top: 8px;
  right: 12px;
  /* AI setup is reachable from the model chip in the composer. */
  display: none;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--app-fg);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.agent-chat-mobile-setup:hover {
  background: var(--panel-head);
}

@media (max-width: 1039px) {
  .app-shell .sidebar {
    inset: 0 auto 0 0;
    z-index: 60;
    width: min(280px, 90vw);
  }

  .app-shell .footer-menu {
    left: auto;
    right: 8px;
  }

  .app-shell:has(.sidebar.is-open)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgb(0 0 0 / 0.2);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .app-shell .sidebar-head .brand {
    display: inline-flex;
  }

  .app-shell .sidebar-head .brand-wordmark {
    display: block;
    height: 26px;
  }

  .app-shell .sidebar-head .sidebar-collapse-button {
    display: none;
  }

  .app-shell .sidebar-head .sidebar-head-close {
    display: inline-grid;
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--app-fg);
  }
}

/* Shared surface for the AI setup panel, used both as a modal (agent chat)
   and inline (hosted onboarding providers step). */
.agent-provider-surface {
  padding: 0 16px 16px;
  border: 1px solid #2A2A2A;
  border-radius: 16px;
  background: #141414;
  color: var(--color-text);
}

/* ── AI provider setup (from feature/td-2dd3ef-chat-redesign-ui) ────────────
   The panel's internals are shared with the hosted onboarding providers step
   through .agent-provider-surface; .agent-provider-dialog adds only what is
   specific to the modal (positioning, backdrop, mobile full-screen).

   Centring is left to the dialog's own `inset: 0; margin: auto` — a transform
   measured against 100vh overshoots the visible viewport on iOS Safari and
   pushes the top edge, header included, off screen. */
.agent-provider-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(847px, calc(100vw - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  overflow: hidden;
  box-shadow: 0 24px 90px rgb(0 0 0 / 0.58);
}

/* Scoped to [open] so it layers on top of the UA's `display: none` for a closed
   dialog instead of replacing it. */
.agent-provider-dialog[open] {
  display: flex;
  flex-direction: column;
}

.agent-provider-dialog::backdrop {
  background: rgb(0 0 0 / 0.72);
}

/* The picker is the only part that scrolls. min-height: 0 is what lets a flex
   item shrink below its content and scroll instead of stretching the dialog. */
.agent-provider-surface .hosted-provider-picker {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
}

.agent-provider-surface-header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
  color: #FFFFFF;
  padding-top: 16px;
  padding-bottom: 12px;
  background: #141414;
}

.agent-provider-surface-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.agent-provider-dialog-subtitle {
  margin: 10px 0 0;
  max-width: 58ch;
  color: #C4C4C4;
  font-size: 13px;
  line-height: 19px;
  font-weight: 400;
}

.agent-provider-dialog-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid #2a2d36;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.agent-provider-dialog-close:hover {
  border-color: #3a3e47;
  color: var(--color-text);
}

/* The dialog stages one provider at a time: cards on top, the chosen
   provider's action centred in the panel below. */
.agent-provider-surface .hosted-provider-credential {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 300px;
  margin-top: 16px;
  padding: 28px;
  border-radius: 12px;
  background: #0A0A0A;
  text-align: center;
}

/* The rule above sets `display`, which beats the UA's `[hidden] { display: none }`
   whatever the specificity — author origin wins — so it has to be restated or
   the inactive provider's panel renders alongside the active one. */
.agent-provider-surface .hosted-provider-credential[hidden] {
  display: none;
}

.agent-provider-surface .hosted-provider-credential>.hosted-provider-label {
  display: none;
}

/* Disconnect is the destructive action in the setup flow, in the onboarding
   wizard and the chat dialog alike. */
[data-agent-provider-target="disconnectOpenai"],
[data-agent-provider-target="disconnectOllama"] {
  color: var(--coral-down);
}

/* Every step past the bare CTA reads left-to-right: the device code, the API
   key form, the model picker, and the disconnect confirmation. */
.agent-provider-surface .hosted-provider-credential:has(.hosted-provider-device-code:not([hidden])),
.agent-provider-surface .hosted-provider-credential:has(.hosted-provider-key-field:not([hidden])),
.agent-provider-surface .hosted-provider-credential:has(.hosted-provider-model-picker:not([hidden])),
.agent-provider-surface .hosted-provider-credential:has(.hosted-provider-disconnect-confirm:not([hidden])) {
  align-items: stretch;
  text-align: left;
  padding: 48px;
}

.agent-provider-surface .hosted-provider-credential:has(.hosted-provider-device-code:not([hidden]))>[data-agent-provider-target="openai"] {
  display: none;
}

/* Stretching the panel must not stretch its buttons. OpenAI's single sign-in
   button sits centred; Ollama's follows its left-aligned key form. */
.agent-provider-surface [data-agent-provider-target="openaiPanel"]>.btn {
  align-self: center;
}

.agent-provider-surface [data-agent-provider-target="ollamaPanel"]>.btn {
  align-self: flex-start;
}

/* Both credential CTAs are lone children of a 300px-tall panel, so every
   stretching default — flex, grid, and align-self alike — has to be refused or
   the button grows to the full panel height. Alignment stays with the
   panel-scoped rules above, which out-specify this one. */
[data-agent-provider-target="openai"],
[data-agent-provider-target="ollama"] {
  flex: none;
  align-self: center;
  justify-self: center;
  height: 42px;
  min-height: 42px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Inside the dialog the values read as prose, not as codes: Inter for the
   inputs, and the Model/Effort labels keep their sentence case. */
.agent-provider-surface .field-input {
  font-family: var(--font-body);
}

#ollama-api-key {
  font-size: 14px;
  line-height: 20px;
}

.agent-provider-surface .hosted-provider-model-fields .field-label {
  text-transform: none;
  font-size: 10px;
  line-height: 14px;
}

.agent-provider-surface .hosted-provider-credential .field,
.agent-provider-surface .hosted-provider-model-picker {
  width: 100%;
  text-align: left;
}

/* The provider picker is shared with the cockpit. Keep its existing dialog
   frame and layout intact; the new surface rules above apply to onboarding. */
.agent-provider-dialog {
  padding: 0 16px 16px;
  border: 1px solid #2A2A2A;
  border-radius: 16px;
  background: #141414;
  color: var(--color-text);
}

.agent-provider-dialog .hosted-provider-picker {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
}

.agent-provider-dialog-header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
  padding-top: 16px;
  padding-bottom: 12px;
  background: #141414;
  color: var(--color-foreground-200);
}

.agent-provider-dialog-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.agent-provider-dialog .hosted-provider-credential {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 300px;
  margin-top: 16px;
  padding: 28px;
  border-radius: 12px;
  background: #0A0A0A;
  text-align: center;
}

.agent-provider-dialog .hosted-provider-credential[hidden] {
  display: none;
}

.agent-provider-dialog .hosted-provider-credential>.hosted-provider-label {
  display: none;
}

.agent-provider-dialog .hosted-provider-credential:has(.hosted-provider-device-code:not([hidden])),
.agent-provider-dialog .hosted-provider-credential:has(.hosted-provider-key-field:not([hidden])),
.agent-provider-dialog .hosted-provider-credential:has(.hosted-provider-model-picker:not([hidden])),
.agent-provider-dialog .hosted-provider-credential:has(.hosted-provider-disconnect-confirm:not([hidden])) {
  align-items: stretch;
  padding: 48px;
  text-align: left;
}

.agent-provider-dialog .hosted-provider-credential:has(.hosted-provider-device-code:not([hidden]))>[data-agent-provider-target="openai"] {
  display: none;
}

.agent-provider-dialog [data-agent-provider-target="openaiPanel"]>.btn {
  align-self: center;
}

.agent-provider-dialog [data-agent-provider-target="ollamaPanel"]>.btn {
  align-self: flex-start;
}

.agent-provider-dialog .field-input {
  font-family: var(--font-body);
}

.agent-provider-dialog .hosted-provider-model-fields .field-label {
  text-transform: none;
  font-size: 10px;
  line-height: 14px;
}

.hosted-wallet-unlock-dialog {
  width: min(680px, calc(100vw - 32px));
}

.hosted-wallet-unlock-body {
  display: grid;
  gap: 20px;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 4px 20px;
}

.hosted-wallet-unlock-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hosted-wallet-unlock-options .hosted-wallet-confirm {
  margin: 0;
}

.hosted-wallet-unlock-forget {
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.hosted-wallet-unlock-forget:hover {
  color: var(--color-foreground);
}

.hosted-wallet-unlock-status {
  min-height: 19px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 19px;
}

.hosted-wallet-unlock-status[data-state="error"] {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--rd) 45%, var(--color-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--rd) 9%, transparent);
  color: var(--rd);
  font-weight: 600;
}

.hosted-wallet-unlock-status[data-state="error"]::before {
  margin-right: 8px;
  content: "!";
}

.hosted-wallet-unlock-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px 4px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 12px;
}

.hosted-wallet-unlock-footer .btn {
  width: auto;
  min-width: 156px;
}

.hosted-wallet-status-dialog {
  width: min(560px, calc(100vw - 32px));
}

.hosted-wallet-status-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.hosted-wallet-status-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--gn) 45%, var(--color-border));
  border-radius: 50%;
  background: color-mix(in srgb, var(--gn) 10%, transparent);
  color: var(--gn);
}

.hosted-wallet-status-icon svg {
  width: 22px;
  height: 22px;
}

.hosted-wallet-status-body {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-border);
}

.hosted-wallet-status-detail {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--color-surface);
}

.hosted-wallet-status-detail > span {
  color: var(--color-text-muted);
  font-size: 12px;
}

.hosted-wallet-status-detail strong,
.hosted-wallet-status-detail code {
  min-width: 0;
  color: var(--color-foreground);
  font-size: 13px;
}

.hosted-wallet-status-detail code {
  overflow-wrap: anywhere;
}

.hosted-wallet-status-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 14px 16px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 12px;
}

.hosted-wallet-status-note > span {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--yw);
}

.hosted-wallet-status-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
}

.hosted-wallet-status-footer .btn {
  min-width: 140px;
}

.btn.hosted-wallet-lock-button {
  border-color: var(--rd);
  background: var(--rd);
  color: var(--color-background);
}

.btn.hosted-wallet-lock-button:hover {
  background: #ffb5b5;
  color: var(--color-background);
}

@media (max-width: 520px) {
  .hosted-wallet-unlock-dialog {
    width: 100vw;
    max-height: 100dvh;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
  }

  .hosted-wallet-unlock-body {
    padding-inline: 0;
  }

  .hosted-wallet-unlock-options,
  .hosted-wallet-unlock-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .hosted-wallet-unlock-footer .btn {
    width: 100%;
  }

  .hosted-wallet-status-dialog {
    width: calc(100vw - 24px);
  }

  .hosted-wallet-status-detail {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .hosted-wallet-status-footer .btn {
    width: 100%;
  }
}

.agent-provider-dialog .hosted-provider-credential .field,
.agent-provider-dialog .hosted-provider-model-picker {
  width: 100%;
  text-align: left;
}

.hosted-provider-label {
  margin: 0 0 8px;
}

.hosted-provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

.hosted-provider-picker--rail .hosted-provider-rail {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 8px;
}

.hosted-provider-picker--rail .hosted-provider-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.hosted-provider-picker--rail .hosted-provider-grid::-webkit-scrollbar { display: none; }

.hosted-provider-picker--rail .hosted-provider-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 64px;
  padding: 8px;
}

.hosted-provider-picker--rail .hosted-provider-card-logo { width: 32px; height: 32px; }
.hosted-provider-picker--rail .hosted-provider-card-body > span:last-child { display: none; }
.hosted-provider-picker--rail .hosted-provider-card-top { gap: 5px; font-size: 13px; line-height: 18px; }
.hosted-provider-picker--rail .hosted-provider-tag { padding: 2px 5px; font-size: 0.5625rem; line-height: 12px; }

.hosted-provider-rail-control {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-primary);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}

.hosted-provider-rail-control:hover { border-color: var(--color-primary); background: rgb(139 157 255 / .1); }

@media (min-width: 562px) {
  .hosted-provider-picker--rail .hosted-provider-rail { grid-template-columns: minmax(0, 1fr); }
  .hosted-provider-rail-control { display: none; }
}

.hosted-provider-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 19px;
  text-align: left;
}

/* Provider marks ship as 40px PNGs on a white plate, so the tile only has to
   round them. */
.hosted-provider-card-logo {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.hosted-provider-card-body {
  display: grid;
  gap: 0;
  min-width: 0;
  align-content: center;
}

.hosted-provider-card:hover {
  border-color: #3a3e47;
}

.hosted-provider-card.is-selected {
  border-color: var(--color-primary);
  background: rgba(139, 157, 255, 0.15);
}

.hosted-provider-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #EDEDED;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.hosted-provider-card-tags {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hosted-provider-tag {
  border: 0;
  border-radius: 4px;
  padding: 2px 8px;
  background: #8B9DFF26;
  color: #8B9DFF;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0;
  white-space: pre;
}

/* Once a provider is connected its status pill is the only tag worth reading,
   so the marketing tag steps aside. */
.hosted-provider-card-tags:has(.hosted-provider-card-connection:not([hidden])) .hosted-provider-tag {
  display: none;
}

.hosted-provider-card-connection {
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 4px;
  padding: 3px 8px;
  background: #6EE7B726;
  color: #6EE7B7;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0;
}

.hosted-provider-credential {
  margin-top: 22px;
}

/* Onboarding-only provider layout. Scoped to the wizard column (and, for the
   width, to the step that actually renders the picker) so the chat page's
   .agent-provider-surface keeps its own sizing and spacing. */
.hosted-wizard-content:has(.hosted-provider-picker) {
  width: min(700px, 100%);
}

/* ── Connect your AI · onboarding step 5 ──────────────────────────────────
   The chat page renders this same picker inside a bordered .agent-provider-
   surface card. On the wizard there is no outer card: the header sits on the
   page and the credential panel below is the only surface. */
.hosted-wizard-content .agent-provider-surface {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.hosted-wizard-content .agent-provider-surface-header {
  display: block;
  margin-bottom: 32px;
  padding: 0;
  background: transparent;
}

.hosted-wizard-content .agent-provider-surface-header .hosted-wizard-subtitle {
  margin-bottom: 0;
}

.hosted-wizard-content .hosted-provider-picker {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* The dialog scrolls its picker inside a fixed-height modal; the wizard step
     scrolls with the page. This has to be unset rather than left alone: a box
     with `overflow-y: auto` computes `overflow-x: visible` to `auto`, so the
     full-bleed children below would turn the whole picker into a horizontal
     scroller and drag the panel and note along with the card strip. */
  overflow: visible;
}

.hosted-provider-picker--no-disconnect [data-agent-provider-target="disconnectOpenai"],
.hosted-provider-picker--no-disconnect [data-agent-provider-target="disconnectOllama"],
.hosted-provider-picker--no-disconnect [data-agent-provider-target="openaiDisconnectConfirm"],
.hosted-provider-picker--no-disconnect [data-agent-provider-target="ollamaDisconnectConfirm"] {
  display: none !important;
}

/* The credential panel is a surface in its own right, with whichever step the
   provider is on centred inside it. min-height rather than height: the model
   picker and device-code states are taller than the bare sign-in button. */
.hosted-wizard-content .hosted-provider-credential {
  display: flex;
  min-height: 356px;
  margin: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 48px;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.hosted-wizard-content .hosted-provider-credential>* {
  margin-top: 0;
}

.hosted-wizard-content .hosted-provider-credential>.hosted-provider-device-code,
.hosted-wizard-content .hosted-provider-credential>.hosted-provider-model-picker,
.hosted-wizard-content .hosted-provider-credential>.hosted-provider-disconnect-confirm {
  width: 100%;
}

/* Form-shaped content keeps a readable measure inside the wide panel */
.hosted-wizard-content [data-agent-provider-target="ollamaPanel"]>.field,
.hosted-wizard-content [data-agent-provider-target="ollamaPanel"]>.hosted-provider-notice {
  width: 100%;
  max-width: 420px;
}

.hosted-wizard-content [data-agent-provider-target="ollamaPanel"]>.btn {
  width: fit-content;
}

/* A 14-inch laptop has enough width for the desktop wizard but substantially
   less height. Compact the provider step so its single forward action remains
   visible; credential states that need more room can still grow naturally. */
@media (min-width: 1040px) and (max-height: 900px) {
  .hosted-wizard-main:has(.hosted-provider-picker) {
    padding-block: 20px;
  }

  .hosted-wizard-content .agent-provider-surface-header {
    margin-bottom: 16px;
  }

  .hosted-wizard-content .hosted-provider-picker {
    gap: 12px;
  }

  .hosted-wizard-content .hosted-provider-credential {
    min-height: 240px;
    padding: 24px 32px;
  }

  .hosted-wizard-main:has(.hosted-provider-picker) .hosted-wizard-footer {
    margin-top: 12px;
    padding-top: 12px;
  }
}

/* Closing note: mint dot, then one line of secondary text */
.hosted-provider-credentials-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: #1a1a1a;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 19px;
}

.hosted-provider-credentials-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-sentiment-up);
}

.hosted-provider-help,
.hosted-provider-status,
.hosted-provider-device-code {
  margin: 7px 0 0;
  color: #868b95;
  font-size: 0.75rem;
  line-height: 1.5;
}

.hosted-provider-status {
  color: #9ea3ad;
}

.hosted-provider-status--success {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--gn) 28%, transparent);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: color-mix(in srgb, var(--gn) 9%, transparent);
  color: var(--color-foreground);
  font-size: 0.8125rem;
  font-weight: 500;
}

.hosted-provider-status--success::before {
  display: grid;
  width: 20px;
  height: 20px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gn) 14%, transparent);
  color: var(--gn);
  content: "✓";
}

/* The one-time code owns the panel: plain copy on top, the code in its own
   surface, then the single primary action. */
.hosted-provider-device-code {
  display: grid;
  gap: 6px;
  margin-top: 0;
  padding: 6px 0 0;
  border: 0;
  background: transparent;
}

.hosted-provider-device-code-title,
.hosted-provider-device-code-instruction {
  margin: 0;
}

.hosted-provider-device-code-title {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.hosted-provider-device-code-instruction {
  color: #c4c4c4;
  font-size: 14px;
  font-weight: 400;
}

.hosted-provider-device-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0;
  padding: 28px 32px;
  border-radius: 12px;
  background: #131417;
}

.hosted-provider-device-code code {
  color: #f7f8f8;
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 20px;
  line-height: 100%;
  white-space: nowrap;
}

.hosted-provider-device-code-actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}

.hosted-provider-device-code-action {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8b9dff;
  cursor: pointer;
}

.hosted-provider-device-code-action svg {
  width: 24px;
  height: 24px;
}

.hosted-provider-device-code-action:hover,
.hosted-provider-device-code-action:focus-visible {
  background: rgb(139 157 255 / .12);
}

.hosted-provider-device-code-action.is-copied {
  color: #FFFFFF;
}

.hosted-provider-device-code>.btn {
  justify-self: start;
  margin-top: 4px;
}

.hosted-provider-model-picker {
  position: relative;
  display: grid;
  gap: 24px;
  margin-top: 16px;
  padding: 18px;
  border-radius: 8px;
}

.hosted-provider-model-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 8px;
  background: rgb(12 13 16 / .88);
  color: #c4c4c4;
  font-size: .8125rem;
  font-weight: 600;
}

.hosted-provider-model-loading span {
  width: 16px;
  height: 16px;
  border: 2px solid rgb(139 157 255 / .3);
  border-top-color: #8b9dff;
  border-radius: 50%;
  animation: hosted-provider-spin .7s linear infinite;
}

@keyframes hosted-provider-spin {
  to {
    transform: rotate(1turn);
  }
}

.hosted-provider-model-picker-title,
.hosted-provider-model-picker-help {
  margin: 0;
}

.hosted-provider-model-picker-title {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.hosted-provider-model-picker-help {
  margin-top: 4px;
  color: #C4C4C4;
  font-size: 14px;
  line-height: 20px;
}

.hosted-provider-model-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.hosted-provider-model-fields .field {
  margin: 0;
  background: #1a1a1a;
  padding: 12px 16px;
  border: unset;
}

.hosted-provider-model-fields .field-input {
  min-height: 20px;
  background: #1a1a1a;
  color: #f7f8f8;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.hosted-provider-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* API key row: label over input, with Paste parked on the right. */
.hosted-provider-key-field {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label paste"
    "input paste";
  align-items: center;
  column-gap: 12px;
  background: #1a1a1a;
  border: unset;
}

.hosted-provider-key-field .field-label {
  grid-area: label;
}

.hosted-provider-key-field .field-input {
  grid-area: input;
}

.hosted-provider-key-paste {
  grid-area: paste;
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: #141414;
  color: var(--color-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  cursor: pointer;
}

.hosted-provider-key-paste:hover {
  background: #2c2c2c;
}

.hosted-provider-disconnect-confirm {
  display: grid;
  gap: 4px;
}

/* The destructive answer gets its own breathing room under the question, and
   both answers carry the same weight, so they share one column width. */
.hosted-provider-disconnect-confirm .hosted-provider-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 174px));
  padding-top: 20px;
}

.btn .btn-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.btn.hosted-provider-danger {
  background: var(--coral-down);
  border-color: var(--coral-down);
  color: var(--color-background);
}

.btn.hosted-provider-danger:hover {
  background: #fdb9b9;
}

.hosted-provider-notice {
  padding: 11px 14px;
  border-radius: 6px;
  background: #FCD34D1A;
  color: #EDEDED;
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
}

.hosted-provider-notice strong {
  color: var(--color-warning-400);
  font-weight: 500;
}

.hosted-provider-developer-settings {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  border-top: 1px solid #252833;
  padding-top: 20px;
  padding-bottom: 14px;
}

.hosted-provider-developer-settings h3 {
  margin: 2px 0 4px;
  color: var(--color-text);
  font-size: 16px;
}

.hosted-provider-developer-settings p:not(.hosted-provider-label) {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.hosted-provider-developer-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #282b35;
  border-radius: 8px;
  padding: 12px 14px;
  background: #101116;
}

.hosted-provider-developer-setting>div {
  display: grid;
  gap: 3px;
}

.hosted-provider-developer-setting strong {
  color: var(--color-text);
  font-size: 13px;
}

.hosted-provider-developer-setting span {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.4;
}

/* ── hosted onboarding · tablet + mobile ──────────────────────────────────
   Past this width the two-column wizard stops being comfortable: the pitch
   panel and the 700px measure cannot both hold their size. The panel is
   dropped for a top bar carrying the logo and the step as dots, and the
   footer collapses its leading action to an icon — the [Mobile] frames. */
@media (max-width: 1039px) {
  .hosted-wizard {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .hosted-wizard-sidebar {
    display: none;
  }

  .hosted-wizard-topbar {
    display: flex;
  }

  .hosted-wizard-main {
    min-height: 0;
    padding: 16px;
  }

  .hosted-wizard-title {
    margin-bottom: 8px;
  }

  .hosted-wizard-subtitle {
    margin-bottom: 32px;
  }

  /* The hairline runs edge to edge while the actions stay on the 16px gutter */
  .hosted-wizard-footer {
    width: auto;
    align-self: stretch;
    align-items: flex-end;
    gap: 16px;
    margin: 16px -16px 0;
    padding: 16px 16px 0;
  }

  /* Square icon button. `.btn`/`.btn-ghost` size themselves for a text label
     (91px min-width, 156px width, 12px/24px padding) — every one of those has
     to be unwound, and flex-none keeps the footer row from shrinking it. */
  .hosted-wizard-footer .hosted-wizard-back {
    position: relative;
    flex: none;
    box-sizing: border-box;
    width: 44px;
    min-width: 0;
    height: 44px;
    min-height: 0;
    padding: 0;
    gap: 0;
    aspect-ratio: 1 / 1;
  }

  .hosted-wizard-back-icon {
    display: block;
  }

  .hosted-wizard-back-label {
    /* Kept in the accessibility tree — the icon alone carries no name */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .hosted-wizard-footer-actions {
    flex: 1;
    width: auto;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  .hosted-wizard-footer-actions .btn-primary {
    width: 100%;
  }

  /* Runtime has no primary action while it waits; its note holds the right edge */
  .hosted-wizard-footer-note {
    margin: auto 0 auto auto;
  }

  .hosted-runtime-stage {
    padding-top: 40px;
  }

  /* Wallet: the download button keeps its size and the status moves beneath it */
  .hosted-wallet-download {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* The one-time code stops sharing its row well before the wizard reflows: past
   this width the code and its actions collide. */
@media (max-width: 781px) {
  .hosted-provider-device-code-row {
    flex-direction: column;
  }
}

/* Narrow screens swipe through the providers instead of stacking them: the
   cards keep their width and the row scrolls, snapping onto each card.

   The switch happens here rather than at the dialog's own breakpoint because
   two columns stop fitting first: below this the card body is narrower than
   `name + tag`, and the tag — `white-space: pre`, in a flex row whose items
   cannot shrink past their content — spills out of the card. */
@media (max-width: 561.98px) {
  .hosted-provider-grid {
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 82%);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .hosted-provider-grid::-webkit-scrollbar {
    display: none;
  }

  .hosted-provider-card {
    scroll-snap-align: start;
    align-items: self-start;
  }
}


@media (max-width: 520px) {

  /* Full-bleed inside the dialog: the dialog hands its horizontal padding to
     each block, and the strip is the one that carries it inside itself. It can
     then run edge to edge with the first card still in line, so the next card
     is cut by the dialog edge instead of by padding.

     At this width the dialog also stops floating and takes the whole screen,
     so the frame lines up with the viewport it is measured against. */
  /* Full-screen sizing belongs to the modal alone; the inline onboarding panel
     keeps flowing with the page. */
  .agent-provider-dialog {
    height: 100dvh;
  }

  .agent-provider-surface {
    padding-inline: 0;
    padding-bottom: 0;
  }

  .agent-provider-surface-header,
  .agent-provider-surface .hosted-provider-picker> :not(.hosted-provider-grid, .hosted-provider-notice) {
    padding-inline: 16px;
  }

  /* The notice is a filled pill, so it takes the inset as margin and keeps its
     own padding — otherwise its background runs to the screen edge. */
  .agent-provider-surface .hosted-provider-picker>.hosted-provider-notice {
    margin-inline: 16px;
  }

  .agent-provider-surface-header {
    padding-top: max(16px, env(safe-area-inset-top));
  }

  .agent-provider-surface .hosted-provider-picker {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .agent-provider-surface .hosted-provider-grid {
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }

  .hosted-provider-model-fields {
    grid-template-columns: 1fr;
  }

  /* Once the cards swipe, the panel keeps its vertical breathing room but gives
     the horizontal padding back to the content. Every staged variant is listed
     so none of them out-specifies this. */
  .agent-provider-surface .hosted-provider-credential,
  .agent-provider-surface .hosted-provider-credential:has(.hosted-provider-device-code:not([hidden])),
  .agent-provider-surface .hosted-provider-credential:has(.hosted-provider-key-field:not([hidden])),
  .agent-provider-surface .hosted-provider-credential:has(.hosted-provider-model-picker:not([hidden])),
  .agent-provider-surface .hosted-provider-credential:has(.hosted-provider-disconnect-confirm:not([hidden])) {
    padding: 48px 16px;
    margin: 16px;
  }

  /* Confirm and Disconnect stop sharing a row — each gets its own. The
     disconnect confirmation keeps Cancel beside its answer. */
  .hosted-provider-model-picker .hosted-provider-actions {
    display: grid;
    /* Own row each, but the buttons keep a fixed width instead of stretching. */
    grid-template-columns: minmax(0, 174px);
    justify-content: center;
  }

  /* One column of controls: the provider CTAs read better centred under them. */
  .hosted-provider-device-code>.btn {
    justify-self: center;
  }

  .hosted-provider-device-code-row {
    padding: 20px 16px;
  }

  .hosted-provider-device-code code {
    font-size: 22px;
    letter-spacing: 8px;
    text-align: center;
    width: 100%;
    /* letter-spacing trails the last glyph; this keeps the row optically centred. */
    text-indent: 8px;
  }

  /* Same treatment for the key form: Paste sits under the field. */
  .hosted-provider-key-field {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "label"
      "input"
      "paste";
    row-gap: 4px;
  }

  .agent-provider-surface [data-agent-provider-target="ollamaPanel"]>.btn {
    align-self: center;
  }

  .hosted-wizard-title {
    font-size: 2rem;
  }
}

/* Onboarding's Connect your AI on phones. Two blocks leave the 16px gutter and
   run to the viewport edge: the card strip, so the next card is cut by the
   screen rather than by padding, and the credential panel, which becomes a flat
   band with its own inner gutter instead of a rounded surface. The closing note
   stays on the gutter.

   Deliberately placed after the dialog's 520px block even though it opens at a
   wider width: that block hands the panel `padding: 48px 16px; margin: 16px`
   across every staged variant and the wizard needs the opposite, and a media
   query's position in the file — not its breakpoint — decides the cascade. The
   four classes clear the `:has()` variants on specificity; .hosted-wizard-content
   keeps the chat dialog out of it. */
@media (max-width: 561.98px) {

  /* Both of these come from the dialog's full-screen mode, where the surface is
     the viewport. On the wizard .hosted-wizard-main already owns the gutter. */
  .hosted-wizard-content .agent-provider-surface-header {
    margin-bottom: 24px;
    padding-top: 0;
  }

  .hosted-wizard-content .agent-provider-surface .hosted-provider-picker {
    padding-bottom: 0;
  }

  .hosted-wizard-content .hosted-provider-grid,
  .hosted-wizard-content .agent-provider-surface .hosted-provider-picker .hosted-provider-credential {
    width: auto;
    margin: 0 -16px;
  }

  .hosted-wizard-content .hosted-provider-grid {
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }

  .hosted-wizard-content .agent-provider-surface .hosted-provider-picker .hosted-provider-credential {
    min-height: 0;
    gap: 16px;
    padding: 24px 16px;
    border-radius: 0;
  }

  /* The panel absorbs whatever height is left between the card strip and the
     closing note, so the note sits on the footer rather than floating under a
     fixed-height box. Every ancestor down to it has to pass the height along:
     a percentage-free `flex: 1` only resolves if its parent has a definite
     height, which the wizard's `1fr` grid row gives .hosted-wizard-main. */
  .hosted-wizard-content:has(.hosted-provider-picker),
  .hosted-wizard-content .agent-provider-surface {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
  }

  .hosted-wizard-content .agent-provider-surface .hosted-provider-picker {
    flex: 1;
    min-height: 0;
  }

  .hosted-wizard-content .agent-provider-surface .hosted-provider-picker .hosted-provider-credential:not([hidden]) {
    flex: 1;
  }
}

.banner-feedback {
  margin-top: 10px;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-foreground);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
}

.banner-feedback.ok {
  background: var(--color-success-bg-opacity);
  color: var(--color-success-400);
}

.banner-feedback.info {
  background: var(--color-info-bg-opacity);
  color: var(--color-primary);
}

.banner-feedback.error {
  background: var(--color-danger-bg-opacity);
  color: var(--color-danger-300);
}

.banner-feedback.warn {
  background: var(--color-warning-bg-opacity);
  color: var(--color-warning-400);
}

/* ── terms ────────────────────────────────────────────────────── */
.terms {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--spacing-4);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  cursor: pointer;
}

.terms a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-surface-raised);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 120ms, border-color 120ms;
}

.checkbox:hover {
  border-color: var(--color-primary);
}

.checkbox:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.checkbox:checked::after {
  content: "";
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-1px);
}

.recaptcha-slot {
  width: 256px;
  min-height: 60px;
  margin-top: var(--spacing-4);
}

.recaptcha-slot .grecaptcha-badge {
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ── grids ────────────────────────────────────────────────────── */
.team-grid,
.market-grid,
.size-grid,
.download-grid,
.install-steps {
  display: grid;
  gap: var(--spacing-2);
}

.team-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--spacing-4);
}

.market-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--spacing-3);
}

.size-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--spacing-3);
}

.install-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--spacing-4);
}

@media (max-width: 720px) {

  .team-grid,
  .market-grid,
  .size-grid,
  .download-grid,
  .install-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {

  .market-grid,
  .size-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-3);
  }

  .download-grid,
  .install-steps {
    grid-template-columns: 1fr;
  }
}

/* ── agent card ───────────────────────────────────────────────── */
.agent-card {
  min-height: 238px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.125rem;
  background: var(--color-surface-raised);
}

.agent-top {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--spacing-3);
}

.avatar {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: var(--radius-full);
  color: var(--color-foreground);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-style: italic;
  line-height: 2rem;
}

.avatar-cooper {
  background: linear-gradient(135deg, #8b1e3f 0%, #d2415c 100%);
}

.avatar-sage {
  background: linear-gradient(135deg, #1e3a8b 0%, #4f6fc8 100%);
}

.agent-name {
  margin: 0;
  color: var(--color-foreground);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.625rem;
  letter-spacing: var(--text-hero--letter-spacing);
}

.agent-role,
.agent-copy,
.file-name {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-micro);
  font-weight: 500;
  line-height: var(--text-micro--line-height);
}

.agent-copy {
  margin-top: var(--spacing-4);
}

.agent-card .field {
  margin-top: var(--spacing-8);
}

/* ── choice cards (markets) ───────────────────────────────────── */
.choice-card {
  min-height: 107px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.875rem var(--spacing-4);
  background: var(--color-background);
  color: var(--color-foreground);
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.choice-card:hover,
.choice-card[aria-pressed="true"],
.size-card:hover,
.size-card[aria-pressed="true"] {
  border-color: var(--color-primary);
}

.choice-card[aria-pressed="true"],
.size-card[aria-pressed="true"] {
  background: rgb(139 157 255 / 0.25);
  color: #fff;
}

.choice-card[aria-pressed="true"] *,
.size-card[aria-pressed="true"] * {
  color: #fff;
}

.choice-code {
  display: block;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
}

.choice-title {
  display: block;
  margin-top: 4px;
  color: var(--color-foreground);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: -0.01em;
}

.size-value {
  display: block;
  margin-top: 4px;
  color: var(--color-foreground);
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.04em;
}

.choice-desc,
.size-desc {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
}

/* ── size card ────────────────────────────────────────────────── */
.size-card {
  min-height: 102px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1.625rem var(--spacing-4);
  background: var(--color-background);
  text-align: center;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

@media (max-width: 820px) {
  .choice-card {
    min-height: 132px;
    padding: 1.25rem 1.375rem;
  }

  .size-card {
    min-height: 132px;
    padding: 2rem var(--spacing-4);
  }

  .choice-title {
    margin-top: 0.625rem;
    font-size: 1.75rem;
    line-height: 2rem;
  }

  .choice-desc,
  .size-desc {
    margin-top: 0.625rem;
    font-size: var(--text-caption);
    line-height: var(--text-caption--line-height);
  }

  .size-value {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

/* ── download block ───────────────────────────────────────────── */
.download-block {
  margin-top: var(--spacing-8);
}

.download-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  margin-top: var(--spacing-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.download-col {
  display: grid;
  align-content: start;
  min-height: 290px;
  padding: var(--spacing-4) 1.125rem;
}

.download-col+.download-col {
  border-left: 1px solid var(--color-border);
}

@media (max-width: 720px) {
  .download-col+.download-col {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .download-col {
    min-height: auto;
  }
}

.download-index {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}

.download-copy {
  margin-top: var(--spacing-6);
}

.download-title {
  margin: 0;
  color: var(--color-foreground);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.625rem;
}

.file-name {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}

.download-col .btn {
  width: 100%;
  margin-top: 1.75rem;
}

.link-list {
  margin-top: var(--spacing-6);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}

.link-list a {
  color: var(--color-primary);
  text-decoration: underline;
}

.link-list ul.list-disc {
  margin-top: 0.25rem;
  padding-left: 1.25rem;
  list-style: disc;
}

@media (max-width: 820px) {
  .download-grid {
    grid-template-columns: 1fr;
  }

  .download-col {
    min-height: auto;
    padding: 2rem;
  }

  .download-col+.download-col {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .download-index {
    width: 56px;
    height: 56px;
    font-size: 1.25rem;
  }

  .download-title {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .file-name {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .download-col .btn {
    margin-top: 2rem;
  }

  .link-list {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.warning {
  margin-top: var(--spacing-6);
  border-radius: var(--radius-sm);
  padding: var(--spacing-3);
  background: rgb(252 211 77 / 0.12);
  color: var(--color-sentiment-hold);
  font-size: var(--text-micro);
  font-weight: 500;
  line-height: var(--text-micro--line-height);
}

/* ── before install card ──────────────────────────────────────── */
.before-card {
  margin-top: var(--spacing-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.375rem;
  background: var(--color-surface-raised);
}

.before-title {
  margin: 0;
  color: var(--color-foreground);
  font-size: var(--text-body-sm);
  font-weight: 600;
  line-height: var(--text-body-sm--line-height);
}

.before-copy {
  margin: 0;
  color: var(--color-text-muted);
  margin-top: 4px;
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
}

.install-step {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: var(--spacing-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-2);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.12em;
  line-height: var(--text-micro--line-height);
  list-style: none;
}

.install-step strong {
  display: grid;
  width: 20px;
  height: 18px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-secondary);
  font-size: 0.625rem;
}

.install-steps {
  list-style: none;
  padding: 0;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-8 {
  margin-top: var(--spacing-8);
}

.normal-case {
  text-transform: none;
  letter-spacing: 0;
}

/* ── toast (centralized notifications) ────────────────────────── */
.toast {
  position: fixed;
  top: 22px;
  right: 22px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 11px 16px;
  color: var(--color-foreground);
  font-size: 13px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  z-index: 300;
  transform: translateY(-80px);
  opacity: 0;
  transition: all .28s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  align-items: center;
  gap: 9px;
  pointer-events: none;
  min-width: 220px;
  max-width: 340px;
}

.toast strong {
  font-weight: 500;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.toast.ok {
  border-left: 2px solid var(--color-sentiment-up);
}

.toast.info {
  border-left: 2px solid var(--color-primary);
}

.toast.error {
  border-left: 2px solid var(--color-sentiment-down);
}

.toast.warn {
  border-left: 2px solid var(--color-sentiment-hold);
}

.toast.ok .ic {
  color: var(--color-sentiment-up);
}

.toast.info .ic {
  color: var(--color-primary);
}

.toast.error .ic {
  color: var(--color-sentiment-down);
}

.toast.warn .ic {
  color: var(--color-sentiment-hold);
}

.ic {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ── turbo progress bar ───────────────────────────────────────── */
.turbo-progress-bar {
  height: 2px;
  background: var(--color-primary);
}

/* ── legacy short tokens (kept so funds/* views still work) ───── */
:root {
  --bg: var(--color-background);
  --bg1: var(--color-surface);
  --bg2: var(--color-surface-raised);
  --bg3: #1a1a1a;
  --bg4: #222;
  --ln: #1f1f1f;
  --ln2: var(--color-border);
  --ln3: #3a3a3a;
  --fg: var(--color-foreground);
  --fg2: var(--color-text-secondary);
  --fg3: #aaaaaa;
  --mu: var(--color-text-muted);
  --mu2: #5a5a5a;
  --mu3: #3e3e3e;
  --pr: var(--color-primary);
  --pr-h: #9aa9ff;
  --pr-d: #6f7ee6;
  --prs: rgba(139, 157, 255, .12);
  --prl: rgba(139, 157, 255, .30);
  --gn: var(--color-sentiment-up);
  --gns: rgba(110, 231, 135, .12);
  --rd: var(--color-sentiment-down);
  --yw: var(--color-sentiment-hold);
  --serif: var(--font-display);
  --sans: var(--font-body);
  --mono: var(--font-mono);
  --r: 8px;
  --rs: 6px;
  --rl: 12px;

  /* cockpit tokens */
  --app-bg: #08090a;
  --nav-bg: #0e0f11;
  --panel-bg: #0e0f11;
  --panel-head: #131417;
  --app-line: #1f2126;
  --app-line-strong: #2a2d34;
  --app-muted: #8a8f99;
  --app-dim: #5c616c;
  --app-fg: #f7f8f8;
  --color-surface-hover: #1a1a1a;
  --motion-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-state: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ════════════════════════════════════════════════════════════════
   cockpit shell (funds#index)
   ════════════════════════════════════════════════════════════════ */

.app-shell {
  min-height: 100vh;
  background: var(--app-bg);
}

.sidebar {
  position: fixed;
  inset: 52px auto 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: min(280px, 86vw);
  overflow-y: auto;
  background: var(--nav-bg);
  border-right: 1px solid var(--app-line);
  transform: translateX(-100%);
  transition: transform var(--motion-state);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

.sidebar nav {
  padding-right: 8px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0 8px;
}

.sidebar-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px;
}

/* Mobile-only close button; shown in the mobile block, hidden everywhere else.
   Needs .sidebar-head to outrank .icon-button's display:inline-grid. */
.sidebar-head .sidebar-head-close {
  display: none;
}

/* logo + wordmark stay left; the collapse button is pushed to the right. */
.sidebar-head .sidebar-collapse-button {
  margin-left: auto;
}

.sidebar-collapse {
  width: 30px;
  height: 30px;
  border-color: transparent;
  background: transparent;
  color: var(--app-dim);
}

.sidebar-collapse:hover {
  background: var(--color-surface-hover);
  color: var(--app-fg);
}

/* Chat-with-CEO card — the primary, emphasized entry */
.nav-chat-card {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  min-width: 48px;
  margin-bottom: 4px;
  padding: 8px 6px;
  border-radius: var(--radius-md);
  color: var(--color-neutral-300);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  transition: background var(--motion-fast), color var(--motion-fast);
}

/* Icons are inlined SVGs painted with currentColor, so hover / active lift the
   glyph and the label together, per the design. */
.nav-chat-card:hover,
.nav-chat-card[aria-current="page"] {
  color: var(--color-foreground);
}

/* Active sits on the solid vault tone; hover is the lighter ivory wash, so the
   two states stay distinguishable (including when hovering the active item). */
.nav-chat-card[aria-current="page"] {
  background: var(--color-surface-hover);
}

.nav-chat-card:hover {
  background: var(--color-foreground-bg-subtle);
}

.nav-chat-icon {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
}

/* "Chat with …" — plus glyph on a tinted disc, per the sidebar design. The
   disc keeps the shared 26px icon column so labels stay aligned. */
.nav-chat-icon.is-circle {
  background: var(--color-foreground-bg-subtle);
}

.nav-chat-icon.is-circle .nav-icon-xl {
  width: 16px;
  height: 16px;
}

.nav-chat-icon svg {
  display: block;
  color: inherit;
}

/* Add funds — filled accent button */
.nav-add-funds {
  min-height: 32px;
  margin: 0 8px 12px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-background);
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  cursor: pointer;
  transition: background var(--motion-fast);
}

.nav-add-funds:hover {
  background: #6b77e0;
}

/* Disabled / coming-soon rows: styled like nav-link but inert */
.nav-link.is-disabled {
  color: var(--app-dim);
  opacity: 0.55;
  cursor: default;
}

.nav-link.is-disabled:hover {
  background: transparent;
  color: var(--app-dim);
}

.nav-soon-badge {
  font-family: var(--font-mono);
  padding: 6px 8px;
  font-size: 10px;
  letter-spacing: 12%;
  margin-left: auto;
  border-radius: var(--radius-sm);
  background: var(--color-foreground-bg-subtle);
  color: var(--color-neutral-300);
  font-weight: 700;
  line-height: 14px;
  text-transform: uppercase;
}

/* Footer: user identity + live status, pinned to the bottom */
.sidebar-footer {
  position: relative;
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--app-line);
  transition: background var(--motion-fast);
}

/* The whole footer strip takes the hover wash, and holds it while its menu
   is open. */
.sidebar-footer:hover,
.sidebar-footer:has(.sidebar-footer-trigger[aria-expanded="true"]) {
  background: var(--color-foreground-bg-subtle);
}

.sidebar-footer-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 10px;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* Rows run edge to edge, so the menu pads vertically only and clips them to
   its radius. */
.footer-menu {
  position: fixed;
  bottom: 64px;
  left: 196px;
  z-index: 200;
  width: 220px;
  padding: 4px 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  box-shadow:
    0 0 0 1px rgb(16 24 40 / 0.03),
    0 6px 12px rgb(16 24 40 / 0.11),
    0 14px 32px rgb(16 24 40 / 0.06);
}

.footer-menu-header {
  padding: 8px 12px;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 19px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.footer-menu-divider {
  height: 1px;
  margin: 4px 0;
  background: var(--color-border);
}

.footer-menu .nav-link {
  min-height: 36px;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 0;
  color: var(--color-foreground);
  line-height: 20px;
}

.footer-menu .nav-link:hover {
  background: var(--color-surface-hover);
}

/* Icons take the row's ivory text color, per the design. */
.footer-menu .nav-link svg {
  display: block;
  flex: 0 0 auto;
}

.sidebar-footer-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sidebar-footer-name {
  color: var(--app-fg);
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-footer-status {
  display: inline-flex;
  font-family: var(--font-mono);
  align-items: center;
  gap: 5px;
  color: var(--app-dim);
  font-size: 10px;
  line-height: 14px;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-sentiment-up, #4ade80);
}

.sidebar-footer-settings {
  width: 28px;
  height: 28px;
  align-content: center;
  justify-items: center;
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--app-dim);
}

.sidebar.is-open {
  transform: translateX(0);
}

.sidebar .brand,
.mobile-bar .brand {
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: var(--app-fg);
}

.mobile-bar .brand-logo {
  height: 26px;
}

.sidebar .brand {
  display: none;
}

.brand-dot {
  color: #5e6ad2;
}

.brand-logo {
  display: block;
  width: auto;
  height: 44px;
}

.brand-wordmark {
  display: block;
  width: auto;
  height: 28px;
}

.nav-icon-lg {
  width: 20px;
  height: 20px;
}

.nav-icon-xl {
  width: 24px;
  height: 24px;
}

.nav-icon-sm {
  width: 16px;
  height: 16px;
}

.nav-chat-card.is-disabled {
  color: var(--app-dim);
  opacity: 0.55;
  cursor: default;
}

.nav-chat-card.is-disabled:hover {
  background: var(--color-surface-raised);
}

.nav-group-label {
  margin-top: 12px;
  padding: 12px;
  color: var(--app-dim);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.6px;
  line-height: 13px;
  text-transform: uppercase;
}

.nav-group-label.spaced {
  padding-top: 12px;
}

.nav-link,
.sub-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 30px;
  gap: 10px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  color: #b4b8c0;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  transition: background var(--motion-fast), color var(--motion-fast);
}

.nav-link:hover,
.sub-link:hover,
.nav-link[aria-current="page"],
.sub-link[aria-current="page"] {
  background: var(--color-surface-hover);
  color: var(--app-fg);
}

.nav-count-badge {
  font-family: var(--font-mono);
  padding: 6px 8px;
  font-size: 10px;
  letter-spacing: 12%;
  margin-left: auto;
  border-radius: var(--radius-sm);
  background: var(--color-warning-bg-subtle);
  color: var(--amber-hold);
  font-weight: 700;
  line-height: 14px;
  text-transform: uppercase;
}

.nav-icon {
  width: 16px;
  height: 16px;
  color: currentColor;
  opacity: 0.86;
}

.sub-link {
  min-height: 30px;
  padding: 6px 12px 6px 24px;
  color: var(--app-dim);
  font-size: 12px;
  font-weight: 400;
  line-height: 15px;
}

.avatar-mini {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: white;
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
}

.avatar-pablo {
  background: linear-gradient(135deg, #5b21b6 0%, #a78bfa 70.721%);
}

.mobile-bar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  background: rgb(8 9 10 / 0.94);
  border-bottom: 1px solid var(--app-line);
  backdrop-filter: blur(16px);
}

.icon-button {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  background: var(--nav-bg);
  color: var(--app-fg);
}

.sidebar-collapse-button {
  width: 40px;
  height: 40px;
  border: none;
}

/* Expanded: always show the collapse glyph; the mini logo is collapsed-only. */
.sidebar-collapse-button .collapse-icon-default {
  display: none;
  width: 32px !important;
  height: 44px !important;
  opacity: 1;
}

.sidebar-collapse-button .collapse-icon-hover {
  display: block;
}

.icon-button .nav-icon {
  width: 24px;
  height: 24px;
}

/* Mobile close glyph is 20px in the design. Same specificity as the rule above,
   so source order wins. */
.sidebar-head-close .nav-icon {
  display: block;
  width: 20px;
  height: 20px;
}

.mobile-menu-button {
  height: 32px;
  width: 32px;
}

.mobile-menu-button .close-icon,
.mobile-menu-button[aria-expanded="true"] .menu-icon {
  display: none;
}

.mobile-menu-button[aria-expanded="true"] {
  background: var(--panel-head);
}

.mobile-menu-button[aria-expanded="true"] .close-icon {
  display: block;
}

.main-area {
  min-width: 0;
  padding-top: 52px;
}

.app-shell .topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 28px;
  background: var(--app-bg);
  border-bottom: 1px solid var(--app-line);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--app-muted);
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
  font-weight: 300;
}

.breadcrumb-separator {
  color: #3e424b;
}

.breadcrumb-current {
  color: var(--app-fg);
  font-weight: 500;
}

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

.dashboard-refresh-button {
  display: inline-grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color var(--motion-fast), background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}

.dashboard-refresh-button svg { width: 18px; height: 18px; }
.dashboard-refresh-button:hover { border-color: var(--color-primary); background: var(--color-foreground-bg-subtle); color: var(--color-primary); }
.dashboard-refresh-button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.dashboard-refresh-button:active { transform: rotate(45deg); }

.dashboard-mobile-refresh-form {
  position: fixed;
  z-index: 51;
  top: 10px;
  right: 12px;
}

.dashboard-refresh-button--mobile { width: 32px; height: 32px; background: var(--nav-bg); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 28px;
  border: 0;
  border-radius: var(--radius-md);
  padding: 5px 18px;
  background: var(--color-primary);
  color: var(--color-background);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  transition: filter var(--motion-fast), transform var(--motion-fast);
}

.button:hover {
  filter: brightness(1.06);
}

.button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.35) brightness(0.72);
  opacity: 0.62;
}

.button:active {
  transform: translateY(1px);
}

.button-icon {
  width: 14px;
  height: 14px;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-background);
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--color-sentiment-up);
}

.live-pill-paper {
  color: #cfd4de;
}

.live-pill-off {
  color: #d7c2c2;
}

.status-dot-paper {
  background: var(--color-warning-400);
}

.status-dot-off {
  background: var(--color-sentiment-down);
}

.content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: calc(100vh - 32px);
  padding: 28px 16px 72px;
  overflow: hidden;
}

.page-header {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.page-header-with-action {
  align-items: flex-start;
  gap: 14px;
}

.page-title {
  margin: 0;
  color: var(--app-fg);
  font-family: var(--font-display);
  font-size: 34px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 41px;
}

.page-subtitle {
  margin: 0;
  color: var(--app-muted);
  font-size: 14px;
  line-height: 17px;
}

.dashboard-title-block {
  display: grid;
  gap: 5px;
}

.dashboard-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.dashboard-polymarket-link {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .page-header-with-action {
    flex-direction: row;
    justify-content: space-between;
  }
}

.app-shell .card,
.memo,
.data-table,
.position-table {
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
  width: auto;
  animation: none;
}

.memo {
  display: flex;
}

.memo::before {
  content: "";
  width: 4px;
  flex: 0 0 4px;
  background: var(--color-primary);
}

.memo-body {
  padding: 16px 20px;
}

.memo-copy {
  margin: 0;
  color: var(--app-fg);
  font-family: var(--font-display);
  font-size: 17px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
}

.memo-author {
  margin: 6px 0 0;
  color: var(--app-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  line-height: 13px;
  text-transform: uppercase;
}

.chart-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
}

.chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.eyebrow {
  margin: 0;
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.66px;
  line-height: 13px;
  text-transform: uppercase;
}

.metric-large {
  margin: 4px 0;
  color: var(--color-sentiment-up);
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 500;
  line-height: 34px;
}

.microcopy {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 15px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: flex-end;
}

.tab {
  min-height: 25px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  background: transparent;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 15px;
}

.tab[aria-selected="true"] {
  border-color: var(--app-line-strong);
  background: var(--color-surface-hover);
  color: var(--app-fg);
}

.chart-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
}

.chart-wrap--empty {
  display: grid;
  min-height: 120px;
  place-items: center;
}

turbo-frame#pnl_card {
  display: block;
}

/* Turbo marks the frame [busy] while a range tab is fetching. The only loading
   state is the chart skeleton, brought back over the outgoing canvas — the
   headline and tabs stay untouched. */
turbo-frame#pnl_card[busy] .chart-skeleton--settled {
  opacity: 1;
  visibility: visible;
}

/* Placeholder held over the chart until Chart.js paints, and shown again while
   another range is fetched. chart_skeleton_controller marks it --settled once
   the chart exists; it stays in the DOM so it can be revived. */
.chart-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  align-items: end;
  padding: 0 0 28px;
  border-radius: var(--radius-md);
  background: var(--panel-head);
  pointer-events: none;
}

.chart-skeleton--settled {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-fast), visibility var(--motion-fast);
}

/* Stand-in for the plotted line: a flat rule that sweeps left to right. */
.chart-skeleton__line {
  height: 2px;
  background: linear-gradient(90deg,
      var(--app-line) 0%,
      var(--app-line-strong) 35%,
      var(--app-muted) 50%,
      var(--app-line-strong) 65%,
      var(--app-line) 100%);
  background-size: 220% 100%;
  animation: chart-skeleton-sweep 1.4s ease-in-out infinite;
}

@keyframes chart-skeleton-sweep {
  from {
    background-position: 120% 0;
  }

  to {
    background-position: -120% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chart-skeleton__line {
    background: var(--app-line-strong);
    animation: none;
  }
}

.pnl-chart {
  width: min(930px, 100%);
  min-width: 680px;
  height: 200px;
}

.axis-label,
.tick-label {
  fill: var(--app-dim);
  font-family: var(--font-mono);
  font-size: 10px;
}

.grid-line {
  stroke: var(--app-line);
  stroke-width: 1;
}

.area-fill {
  fill: url("#chartGradient");
}

.line-stroke {
  fill: none;
  stroke: var(--color-sentiment-up);
  stroke-width: 2;
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.stat-card {
  min-height: 95px;
  padding: 14px 16px;
}

.stat-label {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 15px;
}

.stat-value {
  margin: 5px 0;
  color: var(--app-fg);
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  line-height: 29px;
}

.stat-note {
  margin: 0;
  color: var(--app-muted);
  font-size: 11px;
  line-height: 13px;
}

@media (max-width: 719px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-card--total {
    grid-column: 1 / -1;
  }

  .stat-card--total {
    order: 1;
  }

  .stat-card--available {
    order: 2;
  }

  .stat-card--wallet {
    order: 3;
  }

  .stat-card--open-bets {
    order: 4;
  }

  .stat-card--claimable {
    order: 5;
  }

  .stat-card--awaiting-resolution {
    order: 6;
  }

  .stat-card--total {
    min-height: 112px;
    padding: 18px 16px;
  }

  .stat-card--available {
    border-color: var(--app-line-strong);
  }
}

.positive {
  color: var(--color-sentiment-up);
}

.negative {
  color: var(--color-sentiment-down);
}

.app-shell .warning {
  color: var(--color-sentiment-hold);
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  margin-top: 0;
}

/* modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgb(0 0 0 / 0.62);
}

.modal-backdrop.is-open {
  display: grid;
}

.modal {
  width: min(460px, 100%);
  border: 1px solid var(--app-line);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.42);
  overflow: hidden;
}

.modal-header,
.modal-body,
.modal-actions {
  padding: 18px 20px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--app-line);
  background: #101113;
}

.modal-title {
  margin: 0;
  color: var(--app-fg);
  font-family: var(--font-display);
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  line-height: 27px;
}

.modal-subtitle {
  margin: 3px 0 0;
  color: var(--app-muted);
  font-size: 13px;
  line-height: 16px;
}

.app-shell .modal .field {
  display: grid;
  gap: 8px;
  margin: 0;
  border: none;
  border-radius: 0;
  padding: 0;
  min-height: auto;
  background: transparent;
}

.app-shell .modal .field label {
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 600;
}

.app-shell .modal .field input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  padding: 0 12px;
  background: var(--color-surface-raised);
  color: var(--app-fg);
}

.modal-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.modal-field-label {
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
}

.modal-input,
.modal-select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  padding: 0 12px;
  background: var(--color-surface-raised);
  color: var(--app-fg);
  font-size: 13px;
  line-height: 18px;
}

.modal-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--app-muted) 50%), linear-gradient(135deg, var(--app-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  padding-right: 34px;
}

.modal-input:focus,
.modal-select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: var(--shadow-focus);
}

.modal-error-message {
  margin: 0 0 14px;
  color: var(--rd);
  font-size: var(--text-body-sm);
  font-weight: 600;
  line-height: var(--text-body-sm--line-height);
}

.add-analyst-header {
  min-height: 76px;
  padding: 18px 22px 14px;
}

.add-analyst-body {
  display: grid;
  gap: 14px;
  padding: 18px 22px;
}

.add-analyst-copy {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 15px;
}

.add-analyst-actions {
  padding: 12px 22px;
}

.helper-text {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 18px;
}

.add-funds-modal .modal-header {
  padding: 18px 22px 16px;
  border-bottom: none;
}

.add-funds-body {
  display: grid;
  gap: 16px;
  padding: 0px 16px;
}

.deposit-card {
  display: grid;
  justify-items: center;
  gap: 24px;
  min-width: 0;
  min-height: 197px;
  border: 1px solid var(--app-line-strong);
  border-radius: 8px;
  padding: 48px 16px;
  background: var(--color-background);
}

.deposit-qr {
  width: 230px;
  height: 230px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.04);
}

.deposit-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.deposit-address {
  width: 100%;
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
  overflow-wrap: anywhere;
  text-align: center;
}

.modal-title#funds-modal-title {
  font-size: 32px;
}

.add-funds-modal .modal-actions .button {
  min-width: 156px;
  width: auto;
  height: 44px;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 24px;
  background: var(--color-bg-500);
  color: var(--color-foreground);
}

.add-funds-close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--app-dim);
}

.add-funds-close:hover {
  color: var(--app-fg);
}

.deposit-address-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
}

.deposit-address-row .deposit-address {
  width: auto;
  flex: 1 1 auto;
  text-align: left;
  color: var(--color-primary);
}

.deposit-copy {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  color: var(--color-primary);
}

/* Outrank .icon-button .nav-icon (24px) without !important via source order. */
.deposit-copy .nav-icon {
  width: 16px;
  height: 16px;
}

.deposit-copy:hover {
  color: var(--color-primary);
}

.deposit-warning {
  align-items: center;
  text-align: center;
  margin: 0;
  border-radius: 6px;
  padding: 12px 16px;
  background: rgb(252 211 77 / 0.13);
  color: #b9b1a0;
  font-size: 12px;
  line-height: 16px;
}

.deposit-warning strong {
  color: var(--color-sentiment-hold);
  font-weight: 700;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--app-line);
  background: #101113;
}

.add-wallet-modal .modal-header {
  min-height: 76px;
  padding: 18px 22px 12px;
}

.add-wallet-body {
  display: grid;
  gap: 14px;
  padding: 18px 22px;
}

.add-wallet-modal .modal-field {
  gap: 5px;
}

.add-wallet-modal .modal-field-label {
  color: #b4b8c0;
  font-weight: 500;
}

.add-wallet-modal .modal-input {
  min-height: 35px;
  border-color: var(--app-line-strong);
  border-radius: var(--radius-sm);
  background: #131417;
  font-size: 14px;
}

.add-wallet-address-input {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 8px 0 12px;
}

.add-wallet-address-field {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--app-fg);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 17px;
}

.add-wallet-address-field:focus,
.add-wallet-address-field:focus-visible {
  outline: none;
  box-shadow: none;
}

.add-wallet-address-input:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.add-wallet-address-field::placeholder,
.add-wallet-modal .modal-input::placeholder {
  color: #5c616c;
  opacity: 1;
}

.chain-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-height: 18px;
  border: 1px solid rgb(94 106 210 / 0.3);
  border-radius: 4px;
  padding: 2px 8px;
  background: rgb(94 106 210 / 0.12);
  color: #5e6ad2;
  font-size: 10px;
  font-weight: 600;
  line-height: 12px;
}

.chain-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5e6ad2;
}

.add-wallet-warning {
  min-height: 50px;
  border: 1px solid rgb(252 211 77 / 0.2);
  padding: 10px 14px;
  color: #b9b1a0;
}

.add-wallet-actions {
  padding: 12px 22px;
}

.modal-backdrop:has(.dialog-card-success) {
  place-items: center;
}

.add-wallet-modal:has(.dialog-card-success) {
  width: min(403px, 100%);
  border-color: #2a2d34;
  border-radius: 12px;
  background: #0e0f11;
}

.dialog-card {
  position: relative;
  width: 100%;
  padding: 24px;
}

.dialog-card-success {
  min-height: 238px;
}

.dialog-close-button {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #1f2126;
  border-radius: 6px;
  background: #141414;
  color: var(--color-foreground-200);
}

.dialog-close-button:hover {
  background: #1a1b1f;
}

.dialog-card-content {
  display: grid;
  justify-items: center;
  gap: 24px;
}

.dialog-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dialog-icon-success {
  width: 48px;
  height: 48px;
  color: #6ee7b7;
}

.dialog-copy {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  text-align: center;
}

.dialog-title {
  margin: 0;
  color: #ededed;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}

.dialog-title-lg {
  font-size: 32px;
  line-height: 38px;
  letter-spacing: -0.8px;
}

.dialog-description {
  margin: 0;
  color: #c4c4c4;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.dialog-actions {
  display: grid;
  width: 100%;
  padding-top: 8px;
}

.dialog-button {
  width: 100%;
  min-height: 40px;
  border-radius: 8px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.dialog-button-secondary {
  border: 1px solid #2a2a2a;
  background: #0f0f0f;
  color: #ededed;
}

.dialog-button-secondary:hover {
  background: #141414;
}

.confirm-modal-actions form {
  margin: 0;
}

.add-funds-modal .modal-actions {
  justify-content: center;
  padding: 16px;
  border-top: none;
}

.button-secondary {
  border: 1px solid var(--app-line);
  background: var(--color-surface-hover);
  color: var(--app-fg);
}

.button-ghost {
  border: 0;
  background: transparent;
  color: var(--app-muted);
}

/* responsive */
@media (min-width: 720px) {
  .content {
    padding: 28px 36px 80px;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .app-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .sidebar {
    position: sticky;
    top: 0;
    right: auto;
    bottom: auto;
    left: auto;
    height: 100vh;
    transform: none;
  }

  .mobile-bar {
    display: none;
  }

  .sidebar .brand {
    display: inline-flex;
  }

  .app-shell .topbar {
    display: flex;
  }

  .dashboard-mobile-refresh-form { display: none; }

  .main-area {
    padding-top: 0;
  }

  .stat-grid {
    grid-template-columns: repeat(var(--stat-cols, 4), minmax(0, 1fr));
  }

  /* Collapsed sidebar: icon rail. The grid column drives the width so the
     main area reflows automatically. */
  .app-shell {
    transition: grid-template-columns var(--motion-state);
  }

  .app-shell.is-collapsed {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .app-shell.is-collapsed .brand-wordmark,
  .app-shell.is-collapsed .sidebar-head .brand,
  .app-shell.is-collapsed .nav-group-label,
  .app-shell.is-collapsed .nav-card-label,
  .app-shell.is-collapsed .nav-count-badge,
  .app-shell.is-collapsed .nav-soon-badge,
  .app-shell.is-collapsed .nav-add-funds,
  .app-shell.is-collapsed .sidebar-footer-meta {
    display: none;
  }

  .app-shell.is-collapsed .sidebar {
    width: 64px;
    gap: 36px;
  }

  .app-shell.is-collapsed .sidebar-head {
    justify-content: center;
  }

  .app-shell.is-collapsed .sidebar-head .sidebar-collapse-button {
    margin-left: 0;
  }

  .app-shell.is-collapsed .nav-chat-card {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 0;
  }

  /* The "Polymarket Prediction" group label (.spaced) is hidden when collapsed;
     restore the gap it created before its first item (Positions). The first
     group's label (fund name, no .spaced) is skipped so Chat stays flush. */
  .app-shell.is-collapsed .nav-group-label.spaced+.nav-chat-card {
    margin-top: 48px;
  }

  /* Footer collapses to just the avatar, centered. */
  .app-shell.is-collapsed .sidebar-footer-trigger {
    justify-content: center;
    gap: 0;
  }

  .app-shell.is-collapsed .sidebar-footer-settings {
    display: none;
  }

  /* The base menu anchors at left: 196px (tuned for the 280px sidebar). When
     collapsed to 64px it detaches; re-anchor it to the collapsed rail's edge. */
  .app-shell.is-collapsed .footer-menu {
    left: 8px;
  }

  /* Collapsed: mini logo by default, swap to the collapse glyph on hover/focus. */
  .app-shell.is-collapsed .sidebar-collapse-button .collapse-icon-default {
    display: block;
  }

  .app-shell.is-collapsed .sidebar-collapse-button .collapse-icon-hover {
    display: none;
  }

  .app-shell.is-collapsed .sidebar-collapse-button:hover .collapse-icon-default,
  .app-shell.is-collapsed .sidebar-collapse-button:focus-visible .collapse-icon-default {
    display: none;
  }

  .app-shell.is-collapsed .sidebar-collapse-button:hover .collapse-icon-hover,
  .app-shell.is-collapsed .sidebar-collapse-button:focus-visible .collapse-icon-hover {
    display: block;
  }
}

/* Collapsed-rail tooltip. Rendered on <body> by nav_tooltip_controller so the
   sidebar's overflow/transform can't clip it; the controller sets top/left. */
.nav-tooltip {
  position: fixed;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-hover);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-fast);
}

.nav-tooltip[hidden] {
  display: none;
}

.nav-tooltip.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .nav-tooltip {
    transition: none;
  }
}

/* ── position tables ─────────────────────────────────────────── */

.table-scroll {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-md);
}

/* ── agent detail ── */
.agent-detail-header {
  display: flex;
  flex-direction: row;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--app-line);
  align-items: end;
  justify-content: space-between;
}

.agent-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.avatar-profile {
  display: inline-grid;
  width: 72px;
  height: 72px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-display);
  font-size: 32px;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
}

.agent-kicker {
  margin: 0 0 4px;
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .66px;
  line-height: 13px;
  text-transform: uppercase;
}

.agent-detail-title {
  margin: 0;
  color: var(--app-fg);
  font-family: var(--font-display);
  font-size: 42px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 48px;
}

.agent-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.agent-edit-button {
  flex: 0 0 auto;
  margin-top: 4px;
}

.agent-rename-form {
  display: grid;
  gap: 10px;
}

.agent-rename-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.agent-rename-input {
  min-width: min(320px, 100%);
}

.agent-rename-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agent-rename-help,
.agent-rename-error {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
}

.agent-rename-help {
  color: var(--app-muted);
}

.agent-rename-error {
  color: var(--color-sentiment-down);
}

.agent-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.agent-status-text {
  color: var(--color-success-400);
  font-weight: 600;
}

/* instruction box */
.instruction-box {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
}

.instruction-box::before {
  content: "";
  width: 4px;
  flex: 0 0 4px;
  background: var(--instruction-accent, var(--color-primary));
}

.instruction-box.crypto {
  --instruction-accent: #5e6ad2;
}

.instruction-body {
  display: grid;
  gap: 14px;
  width: 100%;
  padding: 16px;
}

.instruction-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-small {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
  font-weight: 600;
}

.instruction-title {
  margin: 0;
  color: var(--app-fg);
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
}

.instruction-subtitle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 15px;
}

.instruction-textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  padding: 12px;
  background: var(--color-surface-raised);
  color: var(--app-fg);
  line-height: 20px;
}

.instruction-textarea::placeholder {
  color: var(--app-dim);
}

.instruction-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

/* decisions */
.decision-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
}

.decision-row {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--app-line);
}

.decision-row:last-child {
  border-bottom: 0;
}

.decision-row-clickable {
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}

.decision-row-clickable:hover,
.decision-row-clickable:focus-visible {
  background: var(--color-surface-hover);
  outline: none;
}

.decision-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.decision-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #d9dbde;
  font-size: 13px;
  line-height: 18px;
}

.decision-meta {
  margin: 0;
  color: var(--app-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 13px;
}

.decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.decision-research-link {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  line-height: 18px;
  cursor: pointer;
}

.decision-research-link:hover,
.decision-research-link:focus-visible {
  color: #bec7ff;
  text-decoration: underline;
  outline: none;
}

.ticket-history-modal {
  width: min(460px, 100%);
}

.ticket-history-header {
  min-height: 76px;
  padding: 18px 22px 14px;
}

.ticket-history-header .modal-title {
  max-width: 416px;
  overflow-wrap: anywhere;
}

.ticket-history-body {
  display: grid;
  gap: 18px;
  padding: 18px 22px;
}

.ticket-modal-section {
  display: grid;
  gap: 8px;
}

.ticket-modal-label {
  margin: 0;
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .66px;
  line-height: 12px;
  text-transform: uppercase;
}

.ticket-research-box {
  border: 1px solid var(--app-line-strong);
  border-radius: 8px;
  padding: 12px 14px;
  background: #141518;
}

.ticket-research-box p {
  margin: 0;
  color: #d9dbde;
  font-size: 13px;
  line-height: 20px;
}

.ticket-history-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 4px 0 0;
  list-style: none;
}

.ticket-history-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.ticket-history-dot {
  width: 9px;
  height: 9px;
  margin: 4px 0 0 1.5px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(139 157 255 / 0.12);
}

.ticket-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 15px;
}

.ticket-history-badge {
  display: inline-flex;
  min-height: 17px;
  align-items: center;
  border: 1px solid var(--app-line-strong);
  border-radius: 4px;
  padding: 2px 8px;
  background: var(--color-surface-hover);
  color: #b4b8c0;
  font-size: 11px;
  line-height: 13px;
}

.ticket-history-copy {
  margin: 3px 0 0;
  color: #d9dbde;
  font-size: 13px;
  line-height: 16px;
}

.ticket-history-actions {
  padding: 12px 22px;
}

/* tickets */
.ticket-table table {
  min-width: 860px;
}

.ticket-cell {
  color: var(--app-fg);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}

.ticket-market {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: #d9dbde;
}

.inline-badge {
  display: inline-flex;
  min-height: 16px;
  align-items: center;
  border-radius: 4px;
  padding: 2px 6px;
  background: rgb(252 211 77 / 0.12);
  color: var(--color-sentiment-hold);
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  white-space: nowrap;
}

.stage-cell {
  color: var(--app-muted);
  font-size: 11px;
  white-space: nowrap;
}

.stage-live {
  color: var(--color-sentiment-up);
}

.stage-waiting,
.stage-researching {
  color: var(--color-sentiment-hold);
}

/* info banner */
.info-banner {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: rgb(139 157 255 / 0.1);
  color: var(--color-primary);
  font-size: 13px;
  line-height: 16px;
}

.info-banner strong {
  color: #fff;
  font-weight: 700;
}

/* module tabs */
.module-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.module-tab {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-sm);
  padding: 7px 16px;
  background: var(--panel-bg);
  color: #b4b8c0;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}

.module-tab[aria-current="page"] {
  border-color: #3a3e47;
  background: var(--color-surface-hover);
  color: var(--app-fg);
}

.module-tab-add {
  border-style: dashed;
}

/* mandate */
.mandate-box {
  overflow: hidden;
  width: 100%;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
}

.mandate-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--app-line);
  background: var(--panel-head);
}

.mandate-toolbar-label {
  margin: 0;
  color: #b4b8c0;
  font-size: 12px;
  font-weight: 500;
}

.select-pill {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-sm);
  padding: 4px 9px;
  background: var(--color-surface-hover);
  color: #e6e7e8;
  font-size: 12px;
  line-height: 15px;
}

.mandate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mandate-body {
  display: grid;
  gap: 18px;
  padding: 8px 16px 22px;
}

.mandate-intro {
  margin: 0;
  color: var(--app-muted);
  font-size: 13px;
  line-height: 18px;
}

.mandate-field {
  display: grid;
  gap: 8px;
}

.mandate-label {
  display: grid;
  gap: 4px;
}

.mandate-label strong {
  color: var(--app-fg);
  font-size: 13.5px;
  line-height: 16px;
}

.mandate-label span,
.mandate-help {
  color: var(--app-dim);
  font-size: 12px;
  line-height: 15px;
}

.mandate-input,
.mandate-textarea {
  width: 100%;
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--panel-head);
  color: var(--app-fg);
  font-size: 13px;
  line-height: 18px;
}

.mandate-textarea {
  min-height: 38px;
  resize: vertical;
}

.mandate-setting {
  display: grid;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--app-line);
}

.mandate-setting:last-child {
  border-bottom: 0;
}

.mandate-setting-title {
  margin: 0;
  color: var(--app-fg);
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
}

.mandate-setting-control {
  display: grid;
  gap: 8px;
}

.mono-field {
  max-width: 360px;
  background: var(--color-background);
  color: var(--app-fg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
}

/* rules */
.rules-card {
  overflow: hidden;
  width: 100%;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
}

.rules-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 45px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--app-line);
  background: var(--panel-head);
}

.rules-title {
  margin: 0;
  color: var(--app-fg);
  font-family: var(--font-display);
  font-size: 17px;
  font-style: italic;
  font-weight: 500;
  line-height: 21px;
}

.api-badge {
  display: inline-flex;
  min-height: 17px;
  align-items: center;
  border: 1px solid var(--app-line-strong);
  border-radius: 4px;
  padding: 2px 8px;
  background: var(--color-surface-hover);
  color: #b4b8c0;
  font-size: 11px;
  line-height: 13px;
  white-space: nowrap;
}

.rule-row {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--app-line);
}

.rule-row:last-child {
  border-bottom: 0;
}

.rule-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.rule-name {
  margin: 0;
  color: var(--app-fg);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
}

.rule-description {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 15px;
}

.rule-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rule-input {
  width: 86px;
  min-height: 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  background: var(--color-background);
  color: var(--app-fg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  text-align: right;
}

.rule-unit {
  color: var(--app-muted);
  font-size: 12px;
  line-height: 15px;
}

.toggle {
  display: inline-flex;
  width: 32px;
  height: 18px;
  align-items: center;
  border: 0;
  border-radius: var(--radius-full);
  padding: 2px;
  background: #30343c;
  transition: background var(--motion-fast);
}

.toggle::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e6e7e8;
  transition: transform var(--motion-fast);
}

.toggle[aria-pressed="true"] {
  background: var(--color-primary);
}

.toggle[aria-pressed="true"]::before {
  transform: translateX(14px);
}

.save-bar {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  min-height: 68px;
  border-top: 1px solid var(--app-line);
  padding: 14px 18px;
  background: var(--panel-bg);
}

.save-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.save-actions .button {
  min-height: 40px;
  border-radius: 8px;
}

.save-actions .button-ghost {
  min-height: 36px;
  padding-inline: 16px;
  font-weight: 500;
}

.save-actions .button:disabled {
  opacity: 0.5;
}

.save-actions .button-ghost:disabled {
  cursor: default;
  filter: none;
  opacity: 1;
}

/* fund approval review */
.approval-row .rule-control {
  justify-content: flex-start;
}

.approval-page-title {
  max-width: 28ch;
  overflow-wrap: anywhere;
}

.approval-stat-card {
  min-height: 112px;
}

.approval-stat-value {
  font-size: 18px;
  line-height: 24px;
  word-break: break-word;
}

.approval-stat-value-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 19px;
}

.approval-value {
  min-width: 0;
  color: var(--app-fg);
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
  text-align: right;
}

.approval-value-mono {
  font-family: var(--font-mono);
  font-size: 12px;
}

.approval-status-badge {
  display: inline-flex;
  min-height: 17px;
  align-items: center;
  border: 1px solid var(--app-line-strong);
  border-radius: 4px;
  padding: 2px 8px;
  background: var(--color-surface-hover);
  color: #b4b8c0;
  font-size: 11px;
  line-height: 13px;
  white-space: nowrap;
}

.approval-status-badge-awaiting {
  border-color: rgba(252, 211, 77, .35);
  background: rgba(252, 211, 77, .10);
  color: var(--yw);
}

.approval-status-badge-approved,
.approval-status-badge-executed {
  border-color: rgba(110, 231, 135, .35);
  background: var(--gns);
  color: var(--gn);
}

.approval-status-badge-rejected,
.approval-status-badge-failed {
  border-color: rgba(248, 113, 113, .35);
  background: rgba(248, 113, 113, .10);
  color: var(--rd);
}

.approval-status-badge-expired {
  color: var(--app-muted);
}

.approval-action-bar {
  gap: 16px;
  justify-content: space-between;
}

.approval-reject-form form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.approval-reject-input {
  width: min(320px, 42vw);
  min-height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  background: var(--color-background);
  color: var(--app-fg);
  font-size: 12px;
  line-height: 18px;
}

.approval-readonly-copy {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 15px;
}

.approval-flash {
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--panel-bg);
  color: var(--app-muted);
  font-size: 13px;
  line-height: 18px;
}

.approval-flash-success {
  border-color: rgba(110, 231, 135, .28);
  color: var(--gn);
}

.approval-flash-alert {
  border-color: rgba(248, 113, 113, .28);
  color: var(--rd);
}

.approval-rationale-row {
  gap: 8px;
  align-items: start;
}

.approval-rationale-copy {
  color: var(--app-fg);
  font-size: 13px;
  line-height: 20px;
  max-width: 72ch;
}

.approval-list-control {
  display: grid;
  justify-items: end;
  min-width: 96px;
}

.approval-list-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.approval-list-title-row .rule-name {
  margin: 0;
  min-width: 0;
}

.approval-list-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.approval-list-amount {
  margin: 0;
  color: var(--app-fg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 15px;
}

.approval-list-time {
  color: var(--app-dim);
}

.approval-list-link {
  min-width: 96px;
  min-height: 34px;
  padding-inline: 14px;
}

.approval-history-row-link {
  color: inherit;
  grid-template-columns: minmax(0, 1fr);
  text-decoration: none;
  transition: background 160ms ease;
}

.approval-history-row-link:hover {
  background: rgba(139, 157, 255, .04);
}

.approval-history-row-link:focus-visible {
  outline: 1px solid rgba(139, 157, 255, .45);
  outline-offset: -1px;
}

@media (max-width: 720px) {

  .approval-action-bar,
  .approval-reject-form form,
  .approval-action-bar .save-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .approval-reject-input {
    width: 100%;
  }

  .approval-list-control {
    align-items: flex-start;
    justify-items: start;
    min-width: 0;
  }

  .approval-list-title-row {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .approval-list-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

.amount {
  font-family: var(--font-mono);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.pill.warning {
  background: rgb(252 211 77 / 0.12);
  color: var(--color-sentiment-hold);
}

/* responsive */
@media (min-width:720px) {
  .instruction-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .decision-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .rule-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mandate-setting {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
  }

  .mandate-actions {
    margin-left: auto;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
}

.position-table table {
  min-width: 800px;
}

/* Sections rendering the shared position table share one column geometry, so
   the four of them stacked down the page align with each other. Only tables
   carrying the matching <colgroup> opt in — the pending, collected and activity
   tables have their own column sets and size themselves. */
.position-table table.position-columns {
  /* Pinned columns sum to 728px; the floor leaves Market ~170px before the
     surrounding .table-scroll starts scrolling horizontally. */
  min-width: 900px;
  table-layout: fixed;
}

.position-columns .col-outcome {
  width: 76px;
}

.position-columns .col-shares {
  width: 84px;
}

.position-columns .col-price {
  width: 92px;
}

.position-columns .col-price-wide {
  width: 108px;
}

.position-columns .col-value {
  width: 96px;
}

.position-columns .col-payout {
  width: 104px;
}

.position-columns .col-pnl {
  width: 168px;
}

.position-columns .col-start-value {
  width: 110px;
}

/* The resolved-loss table carries five columns rather than eight, so it does
   not need the eight-column floor — Market simply takes the slack. */
.position-table table.lost-columns {
  min-width: 560px;
}

/* Long market titles wrap rather than stretch the pinned columns. */
.position-columns td:first-child {
  overflow-wrap: anywhere;
}

/* P&L carries a figure and a percentage. A fixed column cannot grow for a
   large fund, so let the pair wrap onto a second line instead of spilling
   over the cell — .numeric would otherwise hold it on one line. Matched on a
   class, not a position, so reordering the columns cannot detach it. */
.position-columns .pnl-cell {
  white-space: normal;
}

/* Potential return is the decision-making figure in an open position, so it
   gets a distinct reward accent without changing the column geometry. */
.position-columns .payout-heading,
.position-columns .payout-cell {
  color: var(--gold-payout);
}

.position-columns .payout-cell {
  font-size: 13px;
  font-weight: 700;
}

th {
  background: var(--panel-head);
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 13px;
  text-align: left;
}

td {
  color: #b4b8c0;
  font-size: 12px;
  line-height: 15px;
}

th,
td {
  border-bottom: 1px solid var(--app-line);
  padding: 11px 16px;
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: 0;
}

.position-table thead {
  background: var(--panel-bg);
}

.position-table th {
  box-sizing: border-box;
  height: 28px;
  /* Horizontal padding has to match the data cells' 16px, or every header
     sits offset from the column it labels — left-aligned ones 16px too far
     left, right-aligned numbers 8px too far right. Only the vertical padding
     differs, to keep the header row shorter than a data row. */
  padding: 8px 16px;
  background: var(--panel-bg);
  color: #5c616c;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 12px;
}

.position-table th:first-child {
  padding-left: 14px;
}

.position-table th:last-child {
  padding-right: 14px;
}

.position-table td:first-child {
  padding-left: 14px;
}

.position-table td:last-child {
  padding-right: 14px;
}

.mono {
  font-family: var(--font-mono);
}

.numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgb(139 157 255 / 0.12);
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  white-space: nowrap;
}

.pill-yes {
  background: rgb(110 231 183 / 0.15);
  color: var(--color-sentiment-up);
}

.pill-no {
  background: rgb(252 165 165 / 0.15);
  color: var(--color-sentiment-down);
}

.pill-neutral {
  background: var(--color-surface-hover);
  color: var(--app-muted);
}

.position-section {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
}

.position-section .position-table {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.position-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  gap: 16px;
  height: 35px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--app-line);
  background: var(--panel-head);
}

.position-bar-title {
  margin: 0;
  color: #b4b8c0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.66px;
  line-height: 13px;
}

.position-meta {
  margin: 0;
  color: #8a8f99;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 15px;
  white-space: nowrap;
}

.position-meta-live {
  color: #6ee7b7;
}

.market-title {
  display: block;
  color: var(--app-fg);
  line-height: 15px;
}

.market-title-link {
  text-decoration: underline;
  text-decoration-color: rgb(180 184 192 / 0.35);
  text-underline-offset: 3px;
}

.market-title-link:hover {
  color: var(--color-primary);
  text-decoration-color: currentColor;
}

.td-issue-button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--app-muted);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(180 184 192 / 0.35);
  text-underline-offset: 3px;
  cursor: pointer;
}

.td-issue-button:hover {
  color: var(--color-primary);
  text-decoration-color: currentColor;
}

.td-rationale-modal {
  width: min(560px, 100%);
}

.td-rationale-copy {
  margin: 0;
  color: var(--app-fg);
  font-size: 14px;
  line-height: 21px;
  white-space: pre-wrap;
}

.market-id {
  display: block;
  margin-top: 2px;
  color: var(--app-dim);
  font-family: var(--font-mono);
  font-size: 10px;
}

.status-text {
  color: var(--app-muted);
  font-size: 11px;
  white-space: nowrap;
}

.section-heading {
  display: flex;
  align-items: center;
  gap: 6px;
}

.section-title {
  margin: 0;
  color: #e6e7e8;
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
}

.section-count {
  color: var(--app-muted);
  font-size: 13px;
  line-height: 16px;
  font-weight: 300;
}

/* ── agent grid ──────────────────────────────────────────────── */

.agent-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
}

.agent-card {
  display: flex;
  min-height: 136px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 20px;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
  text-align: center;
  width: auto;
  animation: none;
}

.agent-card-add {
  border-color: #3a3e47;
  border-style: dashed;
  background: transparent;
}

.avatar-large {
  display: inline-grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border-radius: 50%;
  color: white;
  font-family: var(--font-display);
  font-size: 26px;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
}

.avatar-add {
  background: var(--color-surface-hover);
  color: var(--app-muted);
  font-family: var(--font-body);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
}

.agent-name {
  margin: 0;
  color: var(--app-fg);
  font-family: var(--font-display);
  font-size: 21px;
  font-style: italic;
  font-weight: 500;
  line-height: 25px;
}

.agent-role,
.agent-description {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 15px;
}

.agent-description {
  color: #b4b8c0;
}

.agent-action {
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 500;
  line-height: 13px;
}

@media (min-width: 720px) {
  .agent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .agent-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── settings & fund-setup pages ─────────────────────────────── */
.settings-card {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  background: var(--panel-bg);
}

.settings-card.danger {
  border-color: #3a2326;
}

.settings-card-title {
  margin: 0;
  color: var(--app-fg);
  font-family: var(--font-display);
  font-size: 21px;
  font-style: italic;
  font-weight: 500;
  line-height: 26px;
}

.settings-card.danger .settings-card-title {
  color: var(--color-sentiment-down);
}

.settings-card-desc {
  margin: 3px 0 16px;
  color: var(--app-muted);
  font-size: 13px;
  line-height: 18px;
}

.settings-row {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
}

.settings-row:not(:first-child) {
  border-top: 1px solid var(--app-line);
}

.settings-row-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.settings-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.passkey-action-button {
  cursor: pointer;
}

.passkey-action-button svg {
  width: 17px;
  height: 17px;
  pointer-events: none;
}

.passkey-remove-button:hover {
  border-color: var(--rd);
  color: var(--rd);
}

.account-order-mode-actions {
  align-items: center;
}

.account-order-mode-actions .setup-segmented {
  width: min(420px, 100%);
}

.settings-row-title {
  margin: 0;
  color: var(--app-fg);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
}

.settings-row-meta {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 15px;
}

.key-pill {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 25px;
  align-items: center;
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-sm);
  padding: 4px 9px;
  background: var(--panel-head);
  color: var(--app-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 15px;
  overflow-wrap: anywhere;
}

.wallet-settings {
  gap: 22px;
}

.wallet-settings-card {
  padding: 20px 22px;
}

.wallet-settings-card .settings-card-title {
  font-size: 22px;
  line-height: 26px;
  letter-spacing: -0.22px;
}

.wallet-settings-card .settings-card-desc {
  margin: 3px 0 16px;
  font-size: 14px;
  line-height: 22px;
}

.wallet-settings-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--app-line);
}

.wallet-settings-row:first-of-type {
  border-top: 1px solid var(--app-line);
}

.wallet-settings-row .settings-row-copy {
  gap: 4px;
}

.wallet-settings-row .settings-row-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}

.wallet-settings-row .key-pill {
  min-height: 25px;
  padding: 5px 9px;
  background: #131417;
  font-size: 12px;
  line-height: 15px;
}

.wallet-settings-button {
  gap: 8px;
  min-height: 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 4px 12px;
  background: var(--color-surface);
  color: var(--app-fg);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.wallet-settings-button:hover {
  background: var(--color-surface-raised);
}

.wallet-settings-button-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.wallet-settings-button-danger {
  border-color: transparent;
  background: var(--color-sentiment-down);
  color: var(--color-background);
}

.wallet-settings-button-danger:hover {
  background: #ffb5b5;
}

.wallet-settings-add-row {
  display: flex;
  justify-content: flex-end;
  padding: 16px 0 0;
  border-top: 1px solid var(--app-line);
}

.wallet-settings-add-button {
  gap: 8px;
  min-height: 44px;
  border-color: var(--color-border);
  border-radius: var(--radius-md);
  padding: 11px 18px;
  background: var(--color-surface);
  color: var(--app-fg);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.wallet-settings-add-button:hover {
  background: var(--color-surface-raised);
}

@media (max-width: 719px) {
  .wallet-settings-row {
    grid-template-columns: 1fr;
  }

  .wallet-settings-row .settings-row-actions {
    justify-content: flex-start;
  }

  .wallet-settings-add-row {
    justify-content: stretch;
  }

  .wallet-settings-add-button {
    width: 100%;
  }
}

.setup-body {
  display: grid;
  gap: 0;
  padding: 8px 16px 0;
}

.setup-intro {
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--app-line);
  color: var(--app-muted);
  font-size: 13px;
  line-height: 18px;
}

.setup-field {
  display: grid;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--app-line);
}

.setup-field:last-child {
  border-bottom: 0;
}

.setup-label {
  margin: 0;
  color: var(--app-fg);
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
}

.setup-control {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.setup-control-wide {
  max-width: 420px;
}

.setup-input {
  width: min(360px, 100%);
  min-height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  background: var(--color-background);
  color: var(--app-fg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
}

.setup-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.setup-segmented-option {
  position: relative;
  min-width: 0;
}

.setup-segmented-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.setup-segmented-label {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  background: var(--color-background);
  color: var(--app-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  transition: border-color var(--motion-fast), background var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}

.setup-segmented-input:focus-visible+.setup-segmented-label {
  outline: 2px solid rgb(139 157 255 / 0.4);
  outline-offset: 2px;
}

.setup-segmented-input:checked+.setup-segmented-label {
  border-color: transparent;
  background: var(--color-primary);
  color: #0a0a0a;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}

.analyst-row {
  display: grid;
  gap: 10px;
  width: 100%;
}

.setup-add-agent-button {
  justify-self: start;
  align-self: center;
}

.setup-footer {
  display: flex;
  justify-content: flex-end;
  padding: 14px 18px;
  border-top: 1px solid var(--app-line);
  background: var(--panel-bg);
}

.button-danger {
  background: var(--color-sentiment-down);
  color: var(--color-background);
}

/* ──────────────────────────────────────────────────────────────────
   OTP / secure-action modal
   Used by shared/otp/_template_form.html.erb and friends.
   ────────────────────────────────────────────────────────────────── */

.otp-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  min-width: min(420px, 90vw);
}

.otp-shell-heading {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.otp-shell-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-foreground-200);
}

.otp-shell-sub {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-foreground-500);
  margin: 0;
  padding: 0 0.5rem;
}

.otp-shell-resend {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-foreground-500);
}

.otp-shell-resend-line {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
}

.otp-resend-button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-foreground-200);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

.otp-resend-button:disabled {
  color: var(--color-neutral-300);
  cursor: not-allowed;
  text-decoration: none;
}

.otp-input-wrapper {
  margin: 1rem 0;
  padding: 1rem;
  background: var(--color-bg-500);
  border-radius: 12px;
  border: 1px solid var(--color-border, #2a2a2a);
}

.otp-input-row {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.otp-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 40px;
  margin-bottom: 0.75rem;
}

.otp-input-row.with-error .otp-digit {
  border-color: var(--color-sentiment-down);
  color: var(--color-sentiment-down);
}

.otp-digit {
  width: 2.75rem;
  height: 3rem;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--font-mono);
  background: var(--color-background);
  color: var(--color-foreground-200);
  border: 1px solid var(--color-border, #2a2a2a);
  border-radius: 8px;
  outline: none;
}

.otp-digit:focus {
  border-color: var(--color-primary-500);
  box-shadow: var(--shadow-focus);
}

.otp-paste-link {
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;
  color: var(--color-primary-500);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.otp-paste-button {
  min-width: 140px;
}

.otp-paste-progress {
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;
}

.otp-submit-row {
  display: flex;
  justify-content: flex-start;
  margin-top: 1rem;
}

.otp-submit-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.trusted-wallet-otp-modal {
  display: grid;
  gap: 1rem;
}

.trusted-wallet-otp-summary {
  border: 1px solid var(--app-line);
  border-radius: 12px;
  padding: 1rem;
  background: var(--color-bg-500);
}

.trusted-wallet-otp-summary-title,
.trusted-wallet-otp-summary-address {
  margin: 0;
  color: var(--app-fg);
}

.trusted-wallet-otp-summary-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.trusted-wallet-otp-summary-address {
  margin-top: 0.5rem;
  color: var(--app-muted);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.trusted-wallet-otp-resend {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  color: var(--app-muted);
  font-size: 0.85rem;
}

.trusted-wallet-otp-resend-action {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
}

.add-wallet-modal:has(.trusted-wallet-otp-modal) {
  width: min(502px, 100%);
}

.trusted-wallet-otp-header {
  align-items: flex-start;
  gap: 12px;
  min-height: 58px;
  padding: 16px;
  background: var(--panel-bg);
}

.trusted-wallet-otp-heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.trusted-wallet-otp-eyebrow {
  margin: 0;
  color: var(--app-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.trusted-wallet-otp-header .modal-title {
  font-size: 22px;
  line-height: 27px;
}

.trusted-wallet-otp-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--app-fg);
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
}

.trusted-wallet-otp-close:hover {
  background: var(--color-surface-hover);
}

.trusted-wallet-otp-modal {
  display: block;
  padding: 0;
}

.trusted-wallet-otp-modal turbo-frame,
.trusted-wallet-otp-modal form {
  display: block;
  width: 100%;
}

.trusted-wallet-otp-summary {
  margin: 16px 16px 0;
  border-color: var(--app-line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: #131417;
}

.trusted-wallet-otp-summary-title {
  color: #e6e7e8;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.trusted-wallet-otp-summary-address {
  margin-top: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 17px;
}

.trusted-wallet-otp-code {
  display: flex;
  justify-content: center;
  padding: 26px 16px 37px;
}

.trusted-wallet-otp-code .otp-input-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.trusted-wallet-otp-code .otp-input-row {
  order: 1;
  gap: 10px;
  margin-top: 0;
}

.trusted-wallet-otp-code .otp-toolbar {
  order: 2;
  justify-content: center;
  min-height: 28px;
  margin: 16px 0 0;
}

.trusted-wallet-otp-code .otp-digit {
  width: 50px;
  height: 56px;
  border-color: var(--app-line-strong);
  border-radius: var(--radius-md);
  background: #131417;
  color: var(--color-primary);
  font-size: 36px;
  font-weight: 400;
  line-height: 50px;
}

.trusted-wallet-otp-code .otp-paste-button {
  min-width: 0;
  min-height: 28px;
  border-color: var(--color-border);
  border-radius: var(--radius-md);
  padding: 4px 12px;
  background: var(--color-surface);
  color: var(--app-fg);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.trusted-wallet-otp-actions {
  align-items: center;
  justify-content: space-between;
  min-height: 61px;
  padding: 16px 20px 12px 18px;
  background: var(--panel-bg);
}

.trusted-wallet-otp-actions .trusted-wallet-otp-resend {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  color: var(--app-fg);
  font-size: 14px;
  line-height: 22px;
}

.trusted-wallet-otp-actions .trusted-wallet-otp-resend-action {
  gap: 4px;
}

.trusted-wallet-otp-actions .otp-resend-button {
  color: var(--color-primary);
  text-decoration: underline;
}

.trusted-wallet-otp-actions .otp-resend-button:disabled {
  color: var(--color-primary);
  cursor: not-allowed;
  opacity: 0.6;
  text-decoration: underline;
}

.trusted-wallet-otp-submit {
  min-width: 117px;
  min-height: 36px;
  padding: 9px 18px;
  color: #0a0a0a;
}

@media (max-width: 719px) {
  .trusted-wallet-otp-resend {
    flex-direction: column;
    align-items: flex-start;
  }

  .otp-submit-row .otp-submit-button {
    width: 100%;
  }

  .trusted-wallet-otp-code .otp-input-row {
    gap: 6px;
  }

  .trusted-wallet-otp-code .otp-digit {
    width: 42px;
    height: 52px;
    font-size: 32px;
  }

  .trusted-wallet-otp-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .trusted-wallet-otp-submit {
    width: 100%;
  }
}

.spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-border, #2a2a2a);
  border-top-color: var(--color-primary-500);
  border-radius: 50%;
  animation: otp-spin 0.8s linear infinite;
  display: inline-block;
}

@keyframes otp-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (min-width:720px) {
  .settings-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .account-order-mode-row {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
  }

  .setup-field {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .analyst-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
  }
}

/* ── Pagy pagination nav ─────────────────────────────────────── */
nav.pagy.series-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

nav.pagy.series-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--app-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
  cursor: pointer;
}

nav.pagy.series-nav a:not([aria-disabled="true"]):hover {
  background: var(--color-surface-hover);
  color: var(--app-fg);
  border-color: var(--app-line-strong);
}

nav.pagy.series-nav a[aria-current="page"] {
  background: var(--color-primary);
  color: var(--color-background);
  border-color: var(--color-primary);
  font-weight: 700;
  cursor: default;
}

nav.pagy.series-nav a[aria-disabled="true"] {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

nav.pagy.series-nav a[role="separator"] {
  border: 0;
  background: transparent;
  color: var(--app-dim);
  pointer-events: none;
  min-width: 20px;
}

/* ── Markets mandate summary ─────────────────────────────────── */
.mandate-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 0 20px;
}

.mandate-summary-card {
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  min-width: 160px;
}

.mandate-summary-card--wide {
  flex: 1;
  min-width: 240px;
}

.mandate-summary-label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--app-dim);
  text-transform: uppercase;
}

.mandate-summary-value {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--app-fg);
}

.mandate-summary-body {
  margin: 0;
  font-size: 13px;
  color: var(--app-muted);
  line-height: 18px;
}

/* ── Shared empty states ─────────────────────────────────────── */
.empty-note {
  padding: 20px 16px;
  color: var(--app-dim);
  font-size: 13px;
}

.empty-state {
  padding: 48px 0;
  text-align: center;
  color: var(--app-dim);
}

.empty-state-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--app-muted);
  margin: 0 0 8px;
}

.empty-state-body {
  font-size: 13px;
  margin: 0;
}

/* ── Dev warning banner ──────────────────────────────────────── */
.dev-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 20px;
  background: rgb(252 211 77 / 0.08);
  border-bottom: 1px solid rgb(252 211 77 / 0.25);
  color: var(--color-sentiment-hold);
  font-size: 13px;
  line-height: 18px;
}

.dev-banner-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.dev-tag {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgb(252 211 77 / 0.15);
  color: var(--color-sentiment-hold);
  line-height: 1.4;
}

/* ── Table utilities ─────────────────────────────────────────── */
.market-id-cell {
  font-size: 11px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-actions-cell {
  display: flex;
  gap: 6px;
}

.td-empty {
  text-align: center;
  color: var(--app-muted);
}

/* ── Text utilities ──────────────────────────────────────────── */
.text-dim {
  opacity: 0.5;
}

.text-negative {
  color: var(--color-sentiment-down);
}

.heading-negative {
  color: var(--color-sentiment-down);
}

/* ── Pagy nav wrapper ────────────────────────────────────────── */
.pagy-nav-wrapper {
  display: flex;
  justify-content: center;
  padding: 14px 16px 16px;
}

/* ── Position meta modifier ──────────────────────────────────── */
.position-meta--negative {
  color: var(--color-sentiment-down);
}

/* ── Agent / article states ──────────────────────────────────── */
.article--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Tag list ────────────────────────────────────────────────── */
.tag-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Form layout ─────────────────────────────────────────────── */
.form-group {
  margin-bottom: 24px;
}

.form-group--lg {
  margin-bottom: 32px;
}

.form-row {
  margin-bottom: 10px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.field-label-upper {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.66px;
  color: var(--app-muted);
  text-transform: uppercase;
  margin: 0 0 12px;
}

.field-hint {
  font-size: 11px;
  color: var(--app-muted);
  margin-bottom: 6px;
}

.field-hint--inline {
  margin-bottom: 0;
  margin-left: 6px;
}

/* Wizard fund-naming field: label above, bordered input, hints + counter below.
   Standalone from .field (which is a bordered container reused across 6 pages). */
.wizard-field {
  display: grid;
  gap: 10px;
  width: 100%;
}

.wizard-field-input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-foreground);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}

.wizard-field-input::placeholder {
  color: var(--app-dim);
}

.wizard-field-input:focus {
  outline: 0;
  border-color: var(--color-primary);
}

.wizard-field-hints {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.wizard-field-hints .field-hint {
  margin-bottom: 0;
}

.sr-hidden {
  display: none;
}

.icon-sm {
  width: 14px;
  height: 14px;
}

/* ── Hosted agent chat ───────────────────────────────────────── */
.agent-runtime-status {
  color: var(--color-text-muted);
  font-size: 12px;
}

.agent-runtime-status--online {
  color: var(--gn);
}

.agent-runtime-status--offline {
  color: var(--rd);
}

.agent-chat-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 982px;
  min-height: 560px;
  max-height: calc(100vh - 210px);
  margin: auto;
  width: 100%;
}

/* Empty conversation: centre the hero above the composer, like the entry screen. */
.agent-chat-panel:not(:has(.agent-chat-messages > *)) {
  justify-content: center;
}

/* Session header: only an open conversation is a named room. */
.agent-chat-session {
  /* Positioned only to pin the stacking order: the Playbook menu, which can grow
     past the top of the chat surface, has to clear this band. */
  position: relative;
  z-index: 1;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 21px 32px;
  border-bottom: 1px solid var(--color-border);
}

.main-area:has(.agent-chat-messages > *) .agent-chat-session {
  /* flex: none — the chat surface takes every spare pixel, the band keeps its own. */
  display: flex;
  flex: none;
}

.agent-chat-booting .agent-chat-session {
  visibility: hidden;
}

/* The mark draws its own frame, so it needs no border or padding here. */
.agent-chat-session-mark {
  flex: none;
  width: 24px;
  height: 24px;
}

.agent-chat-session-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 4px;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0px;
  white-space: nowrap;
}

.agent-chat-session-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.agent-chat-session-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gn);
}

/* No provider yet, or a runtime we cannot reach: only the dot changes. */
.agent-chat-session-live--offline .agent-chat-session-live-dot {
  background: var(--rd);
}

.agent-wallet-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  margin-left: 0;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: default;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
}

.agent-wallet-status[data-state="unavailable"] {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
}

.agent-wallet-status-icon {
  width: 15px;
  height: 15px;
  flex: none;
}

.agent-wallet-status-icon--unlocked,
.agent-wallet-status[data-state="unlocked"] .agent-wallet-status-icon--locked {
  display: none;
}

.agent-wallet-status[data-state="unlocked"] .agent-wallet-status-icon--unlocked {
  display: block;
}

.agent-wallet-status:not(:disabled) {
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.agent-wallet-status:not(:disabled):hover {
  border-color: var(--color-primary);
  background: var(--color-foreground-bg-subtle);
}

.agent-wallet-status:not(:disabled):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.agent-wallet-status[data-state="unlocked"] {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
}

.agent-wallet-status[data-state="locked"],
.agent-wallet-status[data-state="unlocking"] {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
}

.agent-wallet-status[data-state="locked"] .agent-wallet-status-icon,
.agent-wallet-status[data-state="unlocking"] .agent-wallet-status-icon { color: color-mix(in srgb, var(--yw) 72%, var(--color-text-secondary)); }
.agent-wallet-status[data-state="unavailable"] .agent-wallet-status-icon { color: var(--rd); }

.agent-chat-session-new-session {
  flex: none;
  height: 38px;
  padding: 0 14px;
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-foreground-200);
  font-weight: 600;
  white-space: nowrap;
}

.agent-chat-session-schedule {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.agent-chat-session-schedule svg {
  width: 20px;
  height: 20px;
}

.agent-chat-session-schedule:hover,
.agent-chat-session-new-session:hover {
  border-color: var(--color-primary);
  background: var(--color-foreground-bg-subtle);
}

.agent-chat-session-schedule:focus-visible,
.agent-chat-session-new-session:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.agent-schedule-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(680px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 48px));
  overflow: hidden;
  padding: 0;
  border: 1px solid #34363d;
  border-radius: 18px;
  background: var(--color-surface-raised);
  color: var(--color-foreground);
  box-shadow: 0 28px 90px rgb(0 0 0 / 70%), 0 0 0 1px rgb(139 157 255 / 8%);
}

.agent-schedule-dialog::backdrop {
  background: rgb(3 5 12 / 76%);
}

.agent-schedule-header,
.agent-schedule-dialog footer {
  padding: 20px 24px;
}

.agent-schedule-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--color-border);
}

.agent-schedule-header h2 {
  margin: 0;
}

.agent-schedule-header p,
.agent-schedule-dialog footer {
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.agent-schedule-actions {
  display: flex;
  gap: 8px;
}

.agent-schedule-actions button {
  min-height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.agent-schedule-actions .agent-schedule-refresh {
  display: grid;
  width: 36px;
  padding: 0;
  place-items: center;
}

.agent-schedule-refresh svg {
  width: 18px;
  height: 18px;
}

.agent-schedule-state {
  display: grid;
  min-height: 124px;
  margin: 0;
  padding: 32px 24px;
  place-items: center;
  color: var(--color-text-secondary);
  text-align: center;
}

.agent-schedule-list {
  max-height: 560px;
  padding: 8px 24px 24px;
  overflow-y: auto;
}

.agent-schedule-day {
  margin: 18px 0 8px;
  color: var(--color-text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.agent-schedule-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}

.agent-schedule-card time {
  font-weight: 700;
}

.agent-schedule-card h4,
.agent-schedule-card p {
  margin: 0;
  overflow-wrap: anywhere;
}

.agent-schedule-card h4 {
  font-size: 14px;
}

.agent-schedule-card p {
  margin-top: 5px;
  color: var(--color-text-muted);
  font-size: 12px;
}

.agent-schedule-card .agent-schedule-overlap {
  color: var(--yw);
  font-weight: 700;
}

.agent-schedule-dialog footer {
  border-top: 1px solid var(--color-border);
}

@media (max-width: 640px) {
  .agent-schedule-dialog {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }

  .agent-schedule-list {
    max-height: calc(100dvh - 180px);
  }
}

.agent-chat-mobile-actions {
  display: none;
}

.agent-chat-mobile-live,
.agent-chat-mobile-new-session {
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
}

.agent-chat-mobile-live .agent-chat-session-live-dot {
  width: 8px;
  height: 8px;
}

.agent-wallet-status--mobile {
  width: 38px;
  min-width: 38px;
  height: 38px;
  margin: 0;
  justify-content: center;
  padding: 0;
}

.agent-chat-session-title {
  margin: 0;
  color: var(--color-foreground-200);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-chat-hero {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 clamp(18px, 2.5vw, 36px) 32px;
  text-align: center;
}

.agent-chat-panel:not(:has(.agent-chat-messages > *)) .agent-chat-hero {
  display: flex;
}

/* Nothing said yet: the hero owns the space, the transcript stays out of flow. */
.agent-chat-panel:not(:has(.agent-chat-messages > *)) .agent-chat-messages {
  display: none;
}

/* Once the transcript exists the composer is pinned to the bottom of the panel
   and drops the entry-screen glow for a plain ivory-15% hairline. */
.agent-chat-panel:has(.agent-chat-messages > *) .agent-chat-composer {
  margin-top: auto;
  border-color: rgb(237 237 237 / 0.15);
  background: var(--color-bg-500);
  box-shadow: none;
}

/* On a wide screen an open conversation fills the viewport, so the composer
   ends up at the bottom edge and only the transcript scrolls. */
@media (min-width: 1040px) {

  /* The session band takes its own height off the top, so the surface below it
     is what fills the rest of the viewport. */
  .agent-chat-shell .main-area:has(.agent-chat-messages > *) {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }

  .agent-chat.content:has(.agent-chat-messages > *) {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding: 0 0 32px 0;
  }

  .agent-chat.content:has(.agent-chat-messages > *) .agent-chat-panel {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    gap: 32px;
  }
}

.agent-chat-booting .agent-chat-hero,
.agent-chat-booting .agent-chat-suggestions {
  visibility: hidden;
}

.agent-chat-suggestions {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.agent-chat-panel:not(:has(.agent-chat-messages > *)) .agent-chat-suggestions {
  display: flex;
}

.agent-chat-suggestion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-500);
  color: var(--color-foreground-200);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  padding: 10px 14px;
  transition: border-color var(--motion-fast), background var(--motion-fast);
  font-weight: 600;
}

.agent-chat-suggestion svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.agent-chat-suggestion:hover,
.agent-chat-suggestion:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-surface-raised);
}

.agent-chat-hero-logo {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.agent-chat-hero-title {
  margin: 0;
  color: var(--color-foreground-200);
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-style: italic;
  font-weight: 500;
  line-height: 56px;
  letter-spacing: normal;
}

@media (max-width: 700px) {
  .agent-chat-hero-title {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

.agent-chat-messages {
  --agent-chat-message-gap: 4px;
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: none;
  /* Without this the transcript refuses to shrink and slides under the composer. */
  min-height: 0;
  gap: var(--agent-chat-message-gap);
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 16px max(clamp(18px, 2.5vw, 36px), calc((100% - 762px) / 2));
  scrollbar-color: var(--color-border) transparent;
  scrollbar-width: thin;
}

.agent-chat-messages::-webkit-scrollbar {
  width: 6px;
}

.agent-chat-messages::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--color-border);
}

.agent-chat-panel--offline-empty .agent-chat-messages {
  align-items: center;
  justify-content: center;
}

.agent-chat-offline-state {
  max-width: 440px;
  text-align: center;
}

.agent-chat-offline-state h2 {
  margin: 0;
  font-size: 20px;
}

.agent-chat-offline-state p {
  margin: 10px 0 20px;
  color: var(--color-text-muted);
}

.agent-chat-offline-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.agent-chat-load-older {
  align-self: center;
  margin: 12px 0 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.agent-chat-load-older:hover {
  color: var(--color-text);
}

/* Floats over the faded tail of the transcript; the fade itself is a mask on
   the scroller, right below. */
.agent-chat-jump-latest {
  position: relative;
  z-index: 1;
  align-self: center;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  /* Sits on an almost-black scrim, so the pill needs its own lift: a brighter
     rim and a real drop shadow (--shadow-sm was never defined). */
  border: 1px solid #3A3A3A;
  border-radius: 10px;
  background: #1A1A1A;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.55);
  cursor: pointer;
  margin: -48px 0 8px;
  padding: 0;
}

/* The tail of the transcript dissolves into the page while the jump button is
   up, so the button reads as floating over it. Masking the scroller itself
   avoids an overlay: a negative z-index pseudo paints above its own element's
   background, which swallowed the pill. */
.agent-chat-panel:has(.agent-chat-jump-latest:not([hidden])) .agent-chat-messages {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 72px), rgb(0 0 0 / 0) 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 72px), rgb(0 0 0 / 0) 100%);
}

.agent-chat-jump-latest svg {
  width: 24px;
  height: 24px;
}

.agent-chat-activity {
  color: var(--color-text-muted);
  font-size: 12px;
}

.agent-chat-message--queued {
  opacity: 0.72;
}

.agent-chat-message--queued::after {
  display: block;
  margin-top: 4px;
  content: "Queued after current response";
  font-size: 11px;
}

/* Reconnect is transport recovery, not a failed send. Keep that distinction
   visible after porting the redesign's message chrome. */
.agent-chat-message--reconnecting {
  opacity: 0.72;
}

.agent-chat-message--reconnecting::after {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted);
  content: "Reconnecting; message will retry automatically";
  font-size: 11px;
}

.agent-chat-working-elapsed {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.agent-chat-queue-status {
  display: block;
  min-height: 18px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.agent-chat-model {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  /* No border to add, so the padding carries the chip to the same 30px as the
     bordered chips beside it. */
  padding: 5.5px 10px;
  font-weight: 400;
  line-height: 19px;
}

.agent-chat-model-provider {
  color: var(--color-foreground-200);
}

.agent-chat-model-name {
  color: var(--color-text-muted);
}

.agent-chat-model-chevron,
.agent-chat-model-icon {
  flex: 0 0 auto;
  align-self: center;
  width: 16px;
  height: 16px;
}

/* No provider yet: the chip becomes the call to action and the bubble above
   explains why the composer will not answer. */
/* The slot deliberately stays unpositioned: the bubble measures itself against
   the whole actions row, so it can never spill past the composer edge. */
.agent-chat-model-slot {
  display: inline-flex;
}

/* New session sits alone on the left of the composer's action row. */
.agent-chat-icon-button.agent-chat-new-session {
  margin-right: auto;
  width: 32px;
  height: 32px;
  min-height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

/* The glyph is drawn inset in its own 32px box, so the icon fills the button. */
.agent-chat-icon-button.agent-chat-new-session .button-icon {
  width: 32px;
  height: 32px;
}

.agent-chat-icon-button.agent-chat-new-session:hover:not(:disabled),
.agent-chat-icon-button.agent-chat-new-session:focus-visible:not(:disabled) {
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.agent-chat-icon-button.agent-chat-new-session:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.agent-chat-model--disconnected,
.agent-chat-model--disconnected .agent-chat-model-name {
  color: var(--amber-hold);
}

.agent-chat-model-retry {
  border: 0;
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  font: inherit;
}

/* Anchored to the chip's right edge so the bubble grows inwards and stays
   inside the composer instead of spilling past it. */
/* Right edge stops with the send button; the tail drops onto the middle of the
   "Connect agent" chip. */
.agent-chat-model-tip {
  /* send button (32px) + gap (8px) + half the chip, less half the tail */
  --agent-chat-tip-tail: 92px;
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  z-index: 2;
  margin: 0;
  width: max-content;
  max-width: 204px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #2E3A61;
  color: #8B9DFF;
  font-size: 14px;
  line-height: 140%;
  text-align: center;
}

.agent-chat-model-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  right: var(--agent-chat-tip-tail);
  border: 7px solid transparent;
  border-bottom: 0;
  border-top-color: #2E3A61;
}

/* The glyphs inherit currentColor, so hover has to lift them with the label. */
.agent-chat-model:hover .agent-chat-model-name,
.agent-chat-model:hover .agent-chat-model-icon,
.agent-chat-model:hover .agent-chat-model-chevron {
  color: var(--color-foreground-200);
}

.agent-chat-message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
}

.agent-chat-message--user {
  align-self: flex-end;
  max-width: min(620px, 60%);
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--color-bg-500);
  color: var(--color-foreground-200);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.agent-chat-message--pending {
  opacity: 0.65;
}

.agent-chat-message--failed {
  outline: 1px solid var(--rd);
}

.agent-chat-message--failed::after {
  display: block;
  margin-top: 4px;
  color: var(--rd);
  content: attr(data-failure-label);
  font-size: 11px;
}

.agent-chat-scheduled-run {
  align-self: stretch;
  padding: 13px 15px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--pr);
  border-radius: 10px;
  background: var(--color-background);
}

.agent-chat-scheduled-run-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.agent-chat-scheduled-run-heading strong {
  color: var(--pr);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.agent-chat-scheduled-run-heading span {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-chat-scheduled-run-timing,
.agent-chat-scheduled-run-status,
.agent-chat-scheduled-run details {
  margin: 5px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
}

.agent-chat-scheduled-run-status {
  flex: 0 0 auto;
  margin-left: auto;
}

.agent-chat-scheduled-run-prompt {
  margin: 8px 0 0;
  color: var(--color-text);
  white-space: pre-wrap;
}

.agent-chat-scheduled-run details p {
  margin: 6px 0 0;
}

.agent-chat-scheduled-run summary {
  cursor: pointer;
}

.agent-chat-scheduled-run-copy {
  border: 0;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

.agent-chat-scheduled-run[data-state="completed"] .agent-chat-scheduled-run-status {
  color: var(--gn);
}

.agent-chat-scheduled-run[data-state="failed"] {
  border-left-color: var(--rd);
}

.agent-chat-scheduled-run[data-state="failed"] .agent-chat-scheduled-run-status {
  color: var(--rd);
}

.agent-chat-message--assistant {
  align-self: flex-start;
  width: 100%;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  white-space: normal;
}

.agent-chat-streaming-text {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.agent-chat-message--assistant+.agent-chat-message--assistant {
  margin-top: -6px;
}

.agent-chat-message--assistant+.agent-chat-message--user {
  margin-top: 10px;
}

.agent-chat-message--loading {
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--color-background) 25%, var(--color-surface-muted, #eef0f5) 50%, var(--color-background) 75%);
  background-size: 200% 100%;
  animation: agent-chat-history-loading 1.4s ease-in-out infinite;
}

.agent-chat-message--loading-user {
  align-self: flex-end;
  width: min(280px, 45%);
}

.agent-chat-message--loading-assistant {
  width: min(460px, 78%);
}

.agent-chat-working-cue {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.agent-chat-working-spinner {
  --spinner-duration: 0.8s;
  --spinner-dim: 0.12;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

/* Every spoke runs the same fade, offset by an eighth of the cycle, so a bright
   head chases clockwise with a trailing tail. One keyframe, eight delays — no
   rotation, no repaint churn. */
.agent-chat-working-spinner line {
  stroke: var(--color-primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  animation: agent-chat-working-flutter var(--spinner-duration) linear infinite;
}

/* Negative delays start every spoke mid-cycle, so the cascade is already
   running on the first painted frame — no dark flash on mount. */
.agent-chat-working-spinner line:nth-child(1) {
  animation-delay: calc(var(--spinner-duration) * -1);
}

.agent-chat-working-spinner line:nth-child(2) {
  animation-delay: calc(var(--spinner-duration) * -0.875);
}

.agent-chat-working-spinner line:nth-child(3) {
  animation-delay: calc(var(--spinner-duration) * -0.75);
}

.agent-chat-working-spinner line:nth-child(4) {
  animation-delay: calc(var(--spinner-duration) * -0.625);
}

.agent-chat-working-spinner line:nth-child(5) {
  animation-delay: calc(var(--spinner-duration) * -0.5);
}

.agent-chat-working-spinner line:nth-child(6) {
  animation-delay: calc(var(--spinner-duration) * -0.375);
}

.agent-chat-working-spinner line:nth-child(7) {
  animation-delay: calc(var(--spinner-duration) * -0.25);
}

.agent-chat-working-spinner line:nth-child(8) {
  animation-delay: calc(var(--spinner-duration) * -0.125);
}

.agent-chat-streaming-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  background: var(--color-primary);
  vertical-align: -0.12em;
  animation: agent-chat-cursor 0.8s steps(1) infinite;
}

@keyframes agent-chat-working-flutter {
  from {
    opacity: 1;
  }

  to {
    opacity: var(--spinner-dim);
  }
}

@keyframes agent-chat-cursor {

  0%,
  45% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: 0;
  }
}

@keyframes agent-chat-history-loading {
  to {
    background-position: -200% 0;
  }
}

@keyframes agent-chat-working-breathe {

  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {

  .agent-chat-streaming-cursor,
  .agent-chat-message--loading {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* The chase is directional movement, so drop it. A slow whole-mark breathe
     still signals the agent is alive. */
  .agent-chat-working-spinner line {
    animation: none;
    opacity: 0.45;
  }

  .agent-chat-working-spinner {
    animation: agent-chat-working-breathe 2.4s ease-in-out infinite;
  }
}

.agent-chat-message--assistant> :first-child {
  margin-top: 0;
}

.agent-chat-message--assistant> :last-child {
  margin-bottom: 0;
}

.agent-chat-message--assistant h1,
.agent-chat-message--assistant h2,
.agent-chat-message--assistant h3,
.agent-chat-message--assistant h4 {
  margin: 1em 0 0.45em;
  line-height: 26px;
  font-size: 18px;
  font-weight: 600;
}

.agent-chat-message--assistant ul,
.agent-chat-message--assistant ol {
  margin: 0.65em 0;
  padding-left: 1.5em;
}

.agent-chat-message--assistant p,
.agent-chat-message--assistant blockquote,
.agent-chat-message--assistant pre {
  margin: 8px 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.agent-chat-message--assistant blockquote {
  padding-left: 0.9em;
  border-left: 3px solid var(--color-border);
  color: var(--color-text-muted);
}

.agent-chat-message--assistant code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
}

.agent-chat-message--assistant :not(pre)>code {
  padding: 0.1em 0.32em;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-background);
  white-space: break-spaces;
}

.agent-chat-message--assistant a {
  color: var(--color-primary);
  text-underline-offset: 2px;
}

.agent-chat-message--assistant pre {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: auto;
  padding: 1em;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-background);
  white-space: pre;
}

.agent-chat-message--assistant table {
  width: 100%;
  margin: 0.8em 0;
  border-collapse: collapse;
  font-size: 0.95em;
}

.agent-chat-message--assistant th,
.agent-chat-message--assistant td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.agent-chat-message--assistant th {
  color: var(--color-text-muted);
  font-size: 0.85em;
  font-weight: 600;
}

.agent-chat-answer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

/* Copy / Ask again stay out of the way until the answer is hovered. Pointer
   devices only, so touch keeps them permanently reachable. */
@media (hover: hover) {
  .agent-chat-answer-actions {
    opacity: 0;
    transition: opacity 150ms ease;
  }

  .agent-chat-message--assistant:hover .agent-chat-answer-actions,
  .agent-chat-answer-actions:focus-within {
    opacity: 1;
  }

  /* Same treatment for the whole sent-message row: timestamp and copy come out
     together on hover. */
  .agent-chat-user-actions .agent-chat-icon-action,
  .agent-chat-user-actions .agent-chat-timestamp {
    opacity: 0;
    transition: opacity 150ms ease;
  }

  .agent-chat-message--user:hover+.agent-chat-user-actions .agent-chat-icon-action,
  .agent-chat-message--user:hover+.agent-chat-user-actions .agent-chat-timestamp,
  .agent-chat-user-actions:hover .agent-chat-icon-action,
  .agent-chat-user-actions:hover .agent-chat-timestamp,
  .agent-chat-user-actions .agent-chat-icon-action:focus-visible,
  .agent-chat-user-actions:focus-within .agent-chat-timestamp {
    opacity: 1;
  }
}

/* Sent-message row: timestamp then copy, aligned under the user bubble. The
   negative margin cancels the transcript gap so the row hugs its message. */
.agent-chat-user-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-height: 28px;
}

.agent-chat-user-actions .agent-chat-timestamp {
  margin-right: 6px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0;
}

.agent-chat-message--pending+.agent-chat-user-actions,
.agent-chat-message--queued+.agent-chat-user-actions {
  visibility: hidden;
}

.agent-chat-copy,
.agent-chat-icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}

.agent-chat-icon-action svg,
.agent-chat-copy svg {
  width: 28px;
  height: 28px;
}

.agent-chat-icon-action:hover,
.agent-chat-icon-action:focus-visible {
  background: var(--color-surface-raised);
}

.agent-chat-icon-action.is-copied svg {
  opacity: 0.4;
}

.agent-chat-icon-action:disabled {
  cursor: default;
}

.agent-chat-icon-action:disabled:hover {
  background: transparent;
}

.agent-chat-copy:hover,
.agent-chat-copy:focus-visible {
  background: var(--color-background);
  color: var(--color-text);
}


.agent-chat-composer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid rgb(139 157 255 / 0.5);
  border-radius: 16px;
  background: var(--color-bg-500);
  box-shadow: 0 6px 75px 0 rgb(139 157 255 / 0.3);
  padding: 12px;
  margin-left: auto;
  margin-right: auto;
  max-width: 752px;
  width: 100%;
}

.agent-chat-composer textarea {
  width: 100%;
  min-height: 54px;
  /* resizeComposer() reads this back, so the cap lives here and nowhere else. */
  max-height: 156px;
  resize: none;
  overflow-y: auto;
  border: 0;
  background: transparent;
  color: var(--color-foreground-200);
  padding: 8px;
  font: inherit;
  line-height: 20px;
  font-size: 14px;
  font-weight: 400;
}

.agent-chat-composer textarea:focus {
  outline: none;
}

.agent-chat-composer textarea::placeholder {
  color: var(--color-text-muted);
}

.agent-chat-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
}

/* Left end of the action row; the model chip and send button stay right. */
.agent-chat-actions-start {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.agent-chat-suggest {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #2A2A2A;
  border-radius: 16px;
  padding: 4.5px 12px;
  background: transparent;
  color: #C4C4C4;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 19px;
  transition: border-color var(--motion-fast), color var(--motion-fast), background-color var(--motion-fast);
}

.agent-chat-suggest-icon,
.agent-chat-suggest-caret {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

/* The chevron points at the composer while the menu is shut and flips up once it
   is open, so the button reads the same way in both states. */
.agent-chat-suggest-caret {
  transition: transform var(--motion-fast);
}

.agent-chat-suggest.is-open .agent-chat-suggest-caret {
  transform: rotate(180deg);
}

/* One-click twins for the two prompts asked for most; the rest live in the
   Playbook. They stay text-only so the sparkle keeps marking the menu. */
.agent-chat-quick-prompt {
  display: inline-flex;
  align-items: center;
  border: 1px solid #2A2A2A;
  border-radius: 16px;
  padding: 4.5px 12px;
  background: transparent;
  color: #C4C4C4;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 19px;
  white-space: nowrap;
  transition: border-color var(--motion-fast), color var(--motion-fast), background-color var(--motion-fast);
}

/* Hover only warms the fill; the border and label hold until the button is
   actually pressed. */
.agent-chat-quick-prompt:hover,
.agent-chat-quick-prompt:focus-visible {
  background: #EDEDED0D;
}

.agent-chat-quick-prompt:active {
  border-color: #EDEDED26;
  background: #141414;
  color: #EDEDED;
}

.agent-chat-suggest:hover,
.agent-chat-suggest:focus-visible {
  background: #EDEDED0D;
}

/* The open menu and the press share one look, so the button reads as active
   the whole time the Playbook is up. */
.agent-chat-suggest:active,
.agent-chat-suggest.is-open {
  border-color: #8B9DFF;
  background: #8B9DFF26;
  color: #EDEDED;
}

.agent-chat-suggest:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Anchored to the composer, so it clears the whole box — message field included
   — rather than sitting on top of it. */
.agent-chat-shortcuts-menu {
  position: absolute;
  bottom: calc(100% + 12px);
  /* Anchored to both edges of the composer, so the menu is exactly its width. */
  left: 0;
  right: 0;
  z-index: 60;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  padding: 16px 16px 0;
  background: #141414;

  /* Column layout so the prompt list is the only part that ever scrolls. */
  display: flex;
  flex-direction: column;
  max-height: min(70dvh, 560px);
}

.agent-chat-playbook-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.agent-chat-playbook-mark {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #EDEDED;
}

.agent-chat-playbook-title {
  margin: 0;
  color: #EDEDED;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

/* Monospaced so the count can tick with the search without shifting the row. */
.agent-chat-playbook-count {
  margin-left: auto;
  color: #888888;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
}

.agent-chat-playbook-search {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #2A2A2A;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  background: #1A1A1A;
  color: #888888;
  transition: border-color var(--motion-fast);
}

.agent-chat-playbook-search:focus-within {
  border-color: #8B9DFF;
}

.agent-chat-playbook-search svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.agent-chat-playbook-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: #EDEDED;
  font: inherit;
  font-size: 15px;
  line-height: 20px;
}

/* The wrapper carries the focus ring, so the field itself drops the global one
   instead of drawing a second border inside it. */
.agent-chat-playbook-search input:focus,
.agent-chat-playbook-search input:focus-visible {
  outline: none;
  box-shadow: none;
}

.agent-chat-playbook-search input::placeholder {
  color: #6B6B6B;
}

.agent-chat-playbook-groups {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.agent-chat-playbook-group+.agent-chat-playbook-group {
  margin-top: 16px;
}

.agent-chat-shortcuts-label {
  margin: 0 0 10px;
  color: #888888;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 15px;
}

.agent-chat-playbook-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Pills rather than rows: the prompt text now lives only in the composer, so the
   title carries the whole affordance. */
.agent-chat-shortcut {
  display: flex;
  align-items: center;
  border: 1px solid #2A2A2A;
  border-radius: 16px;
  padding: 4.5px 12px;
  background: transparent;
  color: #C4C4C4;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color var(--motion-fast), background-color var(--motion-fast), color var(--motion-fast);
}

.agent-chat-shortcut:hover,
.agent-chat-shortcut:focus-visible {
  background: #EDEDED0D;
}

.agent-chat-shortcut:active {
  border-color: #EDEDED26;
  background: #141414;
  color: #EDEDED;
}

/* Colour rides on the button so it matches the composer's quick prompts. */
.agent-chat-shortcut-title {
  color: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 19px;
  white-space: nowrap;
}

.agent-chat-playbook-empty {
  margin: 0;
  color: #888888;
  font-size: 14px;
  line-height: 20px;
}

/* Negative inline margin pulls the rule out to the panel edge; the padding puts
   the text back on the panel's 16px line. */
.agent-chat-playbook-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin: 16px -16px 0;
  border-top: 1px solid #2A2A2A;
  padding: 16px;
  color: #888888;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
}

.agent-chat-playbook-footer kbd {
  border: 1px solid #2A2A2A;
  border-radius: 4px;
  padding: 1px 6px;
  background: #1A1A1A;
  color: #888888;
  font: inherit;
}

.agent-chat-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
}

.agent-chat-icon-button .button-icon {
  width: 18px;
  height: 18px;
}

.agent-chat-send {
  border: 0;
  border-radius: 10px;
  background: var(--color-primary);
  cursor: pointer;
}

.agent-chat-send:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.agent-chat-send .button-icon {
  width: 20px;
  height: 20px;
}

/* Stop joins Send while a turn is active: one controls the current turn and
   the other queues the next one. */
.agent-chat-abort {
  display: none;
}

.agent-chat--awaiting .agent-chat-abort {
  display: inline-flex;
}

@media (min-width: 1440px) {
  .agent-chat-panel {
    max-width: 1180px;
  }

  .agent-chat-messages {
    padding-inline: max(clamp(18px, 2.5vw, 36px), calc((100% - 900px) / 2));
  }

  .agent-chat-composer {
    max-width: 900px;
  }
}

@media (max-width: 1039px) {

  html.agent-chat-page,
  body.agent-chat-page {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.agent-chat-page {
    position: fixed;
    inset: 0;
    width: 100%;
  }

  .agent-chat-shell {
    position: fixed;
    top: var(--agent-chat-viewport-top, 0px);
    right: 0;
    left: 0;
    height: var(--agent-chat-viewport-height, 100dvh);
    min-height: 0;
    overflow: hidden;
  }

  .agent-chat-shell .main-area {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
  }

  .agent-chat-shell .mobile-bar,
  .agent-chat-shell .agent-chat-mobile-setup,
  .agent-chat-shell .agent-chat-mobile-actions {
    position: absolute;
  }

  .agent-chat.content {
    flex: 1 1 auto;
    min-height: 0;
    max-width: 100%;
    gap: 0;
    padding: 16px;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .agent-chat-panel {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }

  .agent-chat.content:has(.agent-chat-messages > *) {
    padding: 0;
  }

  .agent-chat.content:has(.agent-chat-messages > *) .agent-chat-panel {
    gap: 12px;
  }

  /* The mobile bar already names the screen; a second header would eat the
     transcript's space. */
  .main-area:has(.agent-chat-messages > *) .agent-chat-session {
    display: none;
  }

  .main-area:has(.agent-chat-messages > *) .agent-chat-mobile-actions {
    z-index: 51;
    top: 8px;
    right: 12px;
    display: flex;
    gap: 8px;
  }

  .agent-chat-mobile-new-session {
    display: inline-flex;
    min-height: 38px;
  }

  .agent-chat-messages {
    --agent-chat-message-gap: 4px;
    width: 100%;
    min-height: 0;
    padding: 16px;
    overscroll-behavior: contain;
  }

  .agent-chat-message--user {
    max-width: 92%;
  }

  /* The transcript runs the full panel width here, so the 752px desktop cap
     would leave the composer visibly narrower than the messages above it. */
  .agent-chat-composer {
    gap: 8px;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  }

  /* The transcript view drops the screen padding, so the composer carries the
     16px inset itself instead of sitting flush against the edges. */
  .agent-chat.content:has(.agent-chat-messages > *) .agent-chat-composer {
    width: auto;
    margin: 0 16px max(16px, env(safe-area-inset-bottom));
    padding: 10px 12px;
  }

  .agent-chat-composer textarea {
    min-height: 44px;
    max-height: 120px;
    padding: 6px 4px;
  }

  .agent-chat-actions {
    gap: 6px;
  }

  .agent-chat-suggest,
  .agent-chat-model {
    min-height: 28px;
    padding-inline: 10px;
  }

  /* The action row is already tight on a phone; the Playbook still holds these. */
  .agent-chat-quick-prompt {
    display: none;
  }

  .agent-chat-model-slot {
    flex: 0 1 150px;
    min-width: 0;
  }

  .agent-chat-model {
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
  }

  .agent-chat-model-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .agent-chat-icon-button {
    width: 32px;
    height: 32px;
    min-height: 32px;
  }

  /* The composer spans the screen here, so centring in it centres on screen.
     There is no room above it either, so the menu sits over the message field
     instead, resting on the action row: row height + gap + bottom padding. */
  .agent-chat-shortcuts-menu {
    left: 50%;
    right: auto;
    width: min(560px, calc(96vw - 32px));
    transform: translateX(-50%);
    bottom: calc(40px + max(10px, env(safe-area-inset-bottom)));
    max-height: 60dvh;
    padding-bottom: 16px;
  }

  /* No physical ESC key on a phone; an outside tap closes the menu instead. */
  .agent-chat-playbook-footer {
    display: none;
  }

  .agent-chat-suggestions {
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(3px, 1vw, 6px);
    margin-top: 24px;
    overflow: hidden;
  }

  .agent-chat-suggestion {
    flex: 0 0 auto;
    padding: 6px clamp(5px, 1.4vw, 9px);
    border-radius: 8px;
    font-size: clamp(9px, 2.4vw, 12px);
    line-height: 16px;
    white-space: nowrap;
  }

  .agent-chat-message--assistant table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* ==========================================================================
   opusfund character — continuous hop with confetti

   The two loops are locked together rather than running independently:
     hop      1.4s
     confetti 2.8s, in two waves offset by exactly one hop

   So a fresh burst launches on every landing, and each piece survives two
   hops — the air stays populated instead of emptying between jumps.

   The hop carries squash and stretch (anticipation before takeoff, stretch
   in flight, compression on landing, one rebound). The ground shadow shrinks
   as the character rises, which is what actually makes it read as leaving
   the floor rather than floating.
   ========================================================================== */

.opf-hop {
  --opf-ink: #ffffff;
  --opf-up: #6EE7B7;
  --opf-dn: #FCA5A5;
  --opf-accent: #8B9DFF;

  --opf-hop-dur: 1.4s;
  --opf-life: 2.8s;

  display: block;
  width: 200px;
  height: 240px;
}

.opf-hop .opf-eyes {
  fill: var(--opf-ink)
}

.opf-hop .opf-body {
  fill: none;
  stroke: var(--opf-ink);
  stroke-width: 1.87
}

.opf-hop .opf-seed {
  fill: var(--opf-ink)
}

.opf-hop .opf-flat {
  fill: var(--opf-ink)
}

.opf-hop .opf-smile {
  fill: none;
  stroke: var(--opf-ink);
  stroke-width: 1.25;
  stroke-linecap: round
}

.opf-hop .opf-up {
  fill: var(--opf-up)
}

.opf-hop .opf-dn {
  fill: var(--opf-dn)
}

.opf-hop .opf-ground {
  fill: var(--opf-accent)
}

/* excited by default: the pill mouth gives way to a shallow arc */
.opf-hop .opf-flat {
  opacity: 0
}

.opf-hop--flat .opf-flat {
  opacity: 1
}

.opf-hop--flat .opf-smile {
  opacity: 0
}

.opf-hop .opf-cx,
.opf-hop .opf-cy,
.opf-hop .opf-piece,
.opf-hop .opf-eyes circle,
.opf-hop .opf-ground {
  transform-box: fill-box;
  transform-origin: center;
}

/* the hopper pivots on its feet, not its centre */
.opf-hop .opf-hopper {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* ---------- the hop ---------- */

@keyframes opf-hop-cycle {
  0% {
    transform: translateY(0) scale(1, 1);
    animation-timing-function: cubic-bezier(.4, 0, .7, .4);
  }

  11% {
    transform: translateY(1.7px) scale(1.09, .89);
    animation-timing-function: cubic-bezier(.1, .8, .3, 1);
  }

  27% {
    transform: translateY(-5.2px) scale(.94, 1.1);
    animation-timing-function: cubic-bezier(.25, .5, .4, 1);
  }

  44% {
    transform: translateY(-9.6px) scale(1, 1);
    animation-timing-function: cubic-bezier(.5, 0, .8, .5);
  }

  63% {
    transform: translateY(-4px) scale(.96, 1.07);
    animation-timing-function: cubic-bezier(.6, 0, .9, .5);
  }

  75% {
    transform: translateY(0) scale(1.11, .87);
    animation-timing-function: cubic-bezier(.2, 1.4, .4, 1);
  }

  88% {
    transform: translateY(0) scale(.98, 1.03)
  }

  100% {
    transform: translateY(0) scale(1, 1)
  }
}

/* inverse of the hop — small and faint at the apex */
@keyframes opf-hop-ground {

  0%,
  11% {
    transform: scale(1, 1);
    opacity: .22
  }

  44% {
    transform: scale(.6, 1);
    opacity: .07
  }

  75%,
  100% {
    transform: scale(1, 1);
    opacity: .22
  }
}

.opf-hop .opf-hopper {
  animation: opf-hop-cycle var(--opf-hop-dur) infinite;
}

.opf-hop .opf-ground {
  animation: opf-hop-ground var(--opf-hop-dur) infinite;
}

/* blink is deliberately off the hop rhythm so the two never lock up */
@keyframes opf-hop-blink {

  0%,
  91%,
  95%,
  100% {
    transform: scaleY(1)
  }

  93% {
    transform: scaleY(.08)
  }
}

.opf-hop .opf-eyes circle {
  animation: opf-hop-blink 4.7s ease-in-out infinite;
}

/* ---------- confetti ---------- */

@keyframes opf-cf-x {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(var(--dx))
  }
}

/* easing declared at a keyframe governs the interval starting there, so the
   piece decelerates on the way up and accelerates on the way down */
@keyframes opf-cf-y {
  0% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(.12, .72, .4, 1);
  }

  42% {
    transform: translateY(var(--peak));
    animation-timing-function: cubic-bezier(.5, 0, .85, .55);
  }

  100% {
    transform: translateY(var(--fall))
  }
}

@keyframes opf-cf-r {
  0% {
    transform: rotate(0);
    opacity: 0
  }

  6% {
    opacity: 1
  }

  70% {
    opacity: 1
  }

  100% {
    transform: rotate(var(--spin));
    opacity: 0
  }
}

.opf-hop .opf-cx {
  animation: opf-cf-x var(--opf-life) linear var(--d) infinite
}

.opf-hop .opf-cy {
  animation: opf-cf-y var(--opf-life) var(--d) infinite
}

.opf-hop .opf-piece {
  animation: opf-cf-r var(--opf-life) linear var(--d) infinite
}

/* ---------- modifiers ---------- */

/* calmer bounce for a persistent screen rather than a one-off moment */
.opf-hop--gentle {
  --opf-hop-dur: 1.9s;
  --opf-life: 3.8s
}

/* hop with no celebration behind it */
.opf-hop--bare .opf-cx,
.opf-hop--bare .opf-cy,
.opf-hop--bare .opf-piece {
  animation: none;
  opacity: 0
}

.opf-hop--sm {
  width: 140px;
  height: 168px
}

.opf-hop--lg {
  width: 260px;
  height: 312px
}

/* ---------- reduced motion ---------- */
/* no jumping, no thrown objects — the character stands and breathes */
@media (prefers-reduced-motion: reduce) {

  .opf-hop .opf-cx,
  .opf-hop .opf-cy,
  .opf-hop .opf-piece,
  .opf-hop .opf-ground,
  .opf-hop .opf-eyes circle {
    animation: none
  }

  .opf-hop .opf-piece {
    opacity: .35
  }

  .opf-hop .opf-ground {
    opacity: .22
  }

  .opf-hop .opf-hopper {
    animation: opf-hop-breathe 4.4s ease-in-out infinite;
  }

  @keyframes opf-hop-breathe {

    0%,
    100% {
      transform: scale(1, 1)
    }

    50% {
      transform: scale(1.012, 1.012)
    }
  }
}