/*
 * ORGN Support portal styles.
 *
 * Tokens derived from the ORGN Design System bundle in the Claude Design project
 * 511195e3 (`_ds/orgn-design-system-29ba5ed4.../tokens/`), itself extracted verbatim from
 * apps/agent's production globals.css. Layout values are measured from
 * web/design/ORGN-Support-Portal.dc.html — 47px shell bands, 48px corner cells, 205.5px rail,
 * 38px rail band, 48px content band, 1fr/168px row grid.
 *
 * `scripts/pull-design.md` documents pulling the full bundle (and the Berkeley Mono
 * licensing gate) when the portal needs more of it.
 *
 * House rules, none negotiable: Berkeley Mono everywhere with a monospace fallback; square
 * corners (rounded-full only for dots and avatars, 4px only for kbd); flat — structure is
 * 1px hairlines and background steps, never shadows; tokens store complete colour values.
 */

/* ---------------------------------------------------------------- tokens: light */
:root {
  --app-font-family: 'Berkeley Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --app-font-mono: var(--app-font-family);

  --background: hsl(0 0% 100%);
  --foreground: hsl(240 10% 3.9%);
  --card: hsl(0 0% 100%);
  --popover: hsl(0 0% 100%);
  --primary: hsl(240 5.9% 10%);
  --primary-foreground: hsl(0 0% 98%);
  --secondary: hsl(240 4.8% 95.9%);
  --muted: hsl(240 4.8% 95.9%);
  --muted-foreground: hsl(240 5% 32%);
  --accent: hsl(240 4.8% 95.9%);
  --accent-foreground: hsl(240 5.9% 10%);
  --destructive: hsl(0 84.2% 60.2%);
  --border: hsl(240 5.9% 90%);
  --input: hsl(240 6% 54%); /* WCAG 1.4.11: control border >= 3:1 */
  --ring: hsl(240 10% 3.9%);
  --link: hsl(221 83% 53%);

  --shell-panel-bg: rgb(250 250 250 / 0.9);
  --shell-strip-bg: rgb(15 23 42 / 0.03);
  --shell-border: rgb(15 23 42 / 0.09);
  --shell-muted-text: rgb(15 23 42 / 0.62);

  --surface-base: #fafafa;
  --surface-strong: #f5f5f5;
  --border-weak: hsl(240 5.9% 90%);
  --content-strong: hsl(240 10% 3.9%);
  --content-base: hsl(240 5% 26%);
  --content-weak: hsl(240 5% 45%);
  --icon-base: hsl(240 5% 26%);
  --icon-weak-base: hsl(240 5% 45%);

  --color-brand-green: #00d492;
  --color-status-green: #00d492;
  --color-status-orange: #ea580c;
  --color-status-purple: #7c3aed;
  --color-status-red: #dc2626;
  /* Ink for text sitting on brand green — near-black, never pure white. */
  --on-brand: #00110c;

  --code-inline-bg: #f5f5f5;
  --code-inline-border: #e0e0e0;
  --stream-text: hsl(240 10% 3.9% / 0.85);
  --terminal-background: hsl(240 4.8% 95.9%);
  --terminal-border: hsl(240 5.9% 85%);
  --terminal-text-command: hsl(192 91% 32%);
  --terminal-text-error: hsl(0 72% 51%);
  --terminal-text-muted: hsl(240 5% 45%);

  --nav-height: 47px;
  --cell: 48px;
  --rail-w: 205.5px;
  --control-h: 36px;
  --control-h-sm: 32px;
}

/* ----------------------------------------------------------------- tokens: dark */
.dark {
  --background: hsl(0 0% 0%); /* pure black, not slate, not zinc */
  --foreground: hsl(220 13% 91%);
  --card: hsl(0 0% 0%);
  --popover: hsl(240 10% 3.9%);
  --primary: hsl(0 0% 98%);
  --primary-foreground: hsl(240 5.9% 10%);
  --secondary: hsl(240 3.7% 15.9%);
  --muted: hsl(240 3.7% 15.9%);
  --muted-foreground: hsl(240 5% 64.9%);
  --accent: hsl(240 3.7% 15.9%);
  --accent-foreground: hsl(0 0% 98%);
  --destructive: hsl(358.7 100% 69.6%);
  --border: hsl(0 0% 17%);
  --input: hsl(240 4% 42%);
  --ring: hsl(240 4.9% 83.9%);
  --link: hsl(204 94% 68%);

  --shell-panel-bg: rgb(5 5 5 / 0.9);
  --shell-strip-bg: rgb(255 255 255 / 0.015);
  --shell-border: rgb(255 255 255 / 0.08);
  --shell-muted-text: rgb(255 255 255 / 0.56);

  --surface-base: #141414;
  --surface-strong: #1a1a1a;
  --border-weak: #2b2b2b;
  --content-strong: #f1ecec;
  --content-base: #b7b1b1;
  --content-weak: #716c6b;
  --icon-base: #b7b1b1;
  --icon-weak-base: #716c6b;

  --color-status-orange: #ff8c00;
  --color-status-purple: #8b5cf6;
  --color-status-red: #ef4444;

  --code-inline-bg: rgba(255, 255, 255, 0.1);
  --code-inline-border: rgba(255, 255, 255, 0.2);
  --stream-text: #f8f8f2;
  --terminal-background: hsl(0 0% 4%);
  --terminal-border: hsl(0 0% 23%);
  --terminal-text-command: hsl(188 94% 82%);
  --terminal-text-error: hsl(0 91% 82%);
  --terminal-text-muted: hsl(0 0% 50%);
}

/* ------------------------------------------------------------------- base */
* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--app-font-family);
  font-size: 13px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
a {
  color: var(--link);
  text-decoration: none;
}
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
svg {
  flex-shrink: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Diagonal pin-stripes, 6px pitch at -45deg — the signature shell texture. */
.app-shell-stripes {
  background-image: repeating-linear-gradient(-45deg, var(--shell-strip-bg) 0 1px, transparent 1px 6px);
}

@keyframes orgnLive {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
@keyframes orgnSpin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Keep state legible without looping: the dot holds at full opacity rather than vanishing. */
  .live-dot, .live-spin svg {
    animation: none !important;
    opacity: 1 !important;
  }
  * {
    transition: none !important;
  }
}

/* --------------------------------------------------------------- shell */
.shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.shell-nav {
  display: flex;
  height: var(--nav-height);
  flex-shrink: 0;
  align-items: stretch;
  border-bottom: 1px solid var(--shell-border);
}
.nav-cell {
  display: flex;
  width: var(--cell);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: var(--icon-weak-base);
}
.nav-cell--icon {
  border-right: 1px solid var(--shell-border);
}
.nav-cell--avatar {
  border-left: 1px solid var(--shell-border);
}
/* Account menu.
   Built on <details>/<summary> so it opens, closes, and takes focus with no JavaScript —
   the script below only adds Escape-to-close and click-outside, which are refinements
   rather than the mechanism. A menu that needs JS to open is a menu that strands anyone
   whose bundle failed. */
.user-menu {
  position: relative;
}
.user-menu > summary {
  list-style: none;
  cursor: pointer;
}
.user-menu > summary::-webkit-details-marker,
.user-menu > summary::marker {
  display: none;
  content: '';
}
.user-menu > summary:focus-visible {
  outline: 1px solid var(--color-brand-green);
  outline-offset: 2px;
}
.user-menu[open] > summary {
  background: var(--accent);
}
.user-menu-panel {
  position: absolute;
  top: calc(100% + 1px);
  /* Flush, not -1px: the avatar is the last cell in the row, so a negative offset pushes the
     panel's right border past the shell, which clips it (`.shell` is overflow:hidden). */
  right: 0;
  z-index: 40;
  min-width: 232px;
  border: 1px solid var(--border);
  background: var(--background);
  display: flex;
  flex-direction: column;
  text-align: left;
}
.user-menu-id {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.user-menu-name {
  font-size: 13px;
  color: var(--foreground);
  overflow-wrap: anywhere;
}
.user-menu-sub {
  font-size: 11px;
  color: var(--content-weak);
  overflow-wrap: anywhere;
}
.user-menu-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.user-menu-tag {
  border: 1px solid var(--border);
  padding: 1px 5px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--content-weak);
}
/* Agent status is worth stating plainly: it decides whether the inbox is reachable. */
.user-menu-tag--agent {
  border-color: var(--color-brand-green);
  color: var(--color-brand-green);
}
.user-menu-item {
  display: block;
  width: 100%;
  padding: 9px 14px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  text-align: left;
  color: var(--foreground);
  text-decoration: none;
  cursor: pointer;
}
.user-menu-item:hover {
  background: var(--accent);
}
.user-menu-item:focus-visible {
  outline: 1px solid var(--color-brand-green);
  outline-offset: -1px;
}
.user-menu-item--danger {
  border-top: 1px solid var(--border);
  color: var(--destructive);
}

.avatar {
  display: flex;
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  align-items: center;
  justify-content: center;
  background: var(--muted);
  color: var(--content-base);
  font-size: 10px;
}
/* The lockup replaces the old icon + wordmark pair and the dead panel toggle beside it.
   Clearspace per the asset README is 0.25x cap height; at 15px tall that is 6px, and the
   14px side padding clears it comfortably. */
.nav-brand {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-right: 1px solid var(--shell-border);
  color: var(--foreground);
  text-decoration: none;
}
.nav-brand svg {
  display: block;
  height: 15px;
  width: auto;
}
.nav-brand:hover {
  background: var(--muted);
}
.nav-brand:focus-visible {
  outline: 1px solid var(--color-brand-green);
  outline-offset: -1px;
}
.nav-team {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-right: 1px solid var(--shell-border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--content-weak);
}
.nav-spacer {
  flex: 1;
  min-width: 0;
}
.nav-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
}
.nav-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--shell-border);
  padding: 4px 10px;
  color: var(--content-weak);
}
.nav-search input {
  all: unset;
  width: 150px;
  font-family: inherit;
  font-size: 11px;
  color: var(--foreground);
}
.nav-search input::placeholder {
  color: var(--content-weak);
}
.nav-bell {
  display: flex;
  padding: 6px;
  color: var(--icon-weak-base);
  position: relative;
}
.bell-dot {
  position: absolute;
  top: 4px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-brand-green);
}
.orgn-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 20px;
  padding: 0 4px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  background: color-mix(in srgb, var(--muted) 50%, transparent);
  font-family: var(--app-font-mono);
  font-size: 10px;
  color: var(--muted-foreground);
}

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

/* --------------------------------------------------------------- rail */
.shell-rail {
  width: var(--rail-w);
  flex-shrink: 0;
  border-right: 1px solid var(--shell-border);
  display: flex;
  flex-direction: column;
}
.rail-band {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-bottom: 1px dashed var(--shell-border);
}
.rail-band-title {
  flex: 1;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--shell-muted-text);
}
.rail-band-count {
  font-size: 10px;
  color: var(--shell-muted-text);
  font-variant-numeric: tabular-nums;
}
.rail-groups {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 6px;
  flex: 1;
  overflow-y: auto;
}
.orgn-nav-section-label {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-family: var(--app-font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--muted-foreground) 60%, transparent);
}
.orgn-nav-row {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  text-align: left;
  font-family: var(--app-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  background: transparent;
  border: 0;
  text-decoration: none;
}
.orgn-nav-row:hover {
  background: color-mix(in srgb, var(--muted) 40%, transparent);
  color: var(--foreground);
}
.orgn-nav-row[data-active='true'] {
  background: var(--muted);
  color: var(--foreground);
}
.orgn-nav-row[data-active='true']::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--foreground);
}
.orgn-nav-count {
  margin-left: auto;
  font-size: 9px;
  color: color-mix(in srgb, var(--muted-foreground) 80%, transparent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}
.rail-foot {
  border-top: 1px dashed var(--shell-border);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.rail-foot a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--content-weak);
}
.rail-foot a:hover {
  color: var(--foreground);
}

/* --------------------------------------------------------------- main */
.shell-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.main-band {
  display: flex;
  height: var(--cell);
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed var(--shell-border);
  padding: 0 24px;
}
.main-band-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.orgn-status-square {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  display: inline-block;
  background: var(--color-brand-green);
}
.main-band-title, .main-band-count {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--shell-muted-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main-band-count {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  padding-left: 16px;
}
.main-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ------------------------------------------------------------ toolbar */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.toolbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--input);
  height: var(--control-h-sm);
  padding: 0 10px;
  min-width: 280px;
  color: var(--content-weak);
}
.toolbar-search input {
  all: unset;
  flex: 1;
  font-family: inherit;
  font-size: 12px;
  color: var(--foreground);
}
.toolbar-search input::placeholder {
  color: var(--content-weak);
}
.toolbar-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--control-h-sm);
  padding: 0 10px;
  border: 1px dashed var(--border);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--content-weak);
}

.btn-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--control-h-sm);
  padding: 0 12px;
  border: 1px solid transparent;
  background: var(--color-brand-green);
  color: var(--on-brand);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.btn-new:hover {
  background: color-mix(in srgb, var(--color-brand-green) 88%, black);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-h-sm);
  padding: 0 12px;
  border: 1px solid var(--input);
  background: transparent;
  color: var(--foreground);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}
.btn-ghost:hover {
  background: var(--accent);
}

/* ------------------------------------------------------- ticket rows */
.rows {
  display: flex;
  flex-direction: column;
}
.row {
  display: grid;
  grid-template-columns: 1fr 168px;
  gap: 20px;
  padding: 13px 24px 13px 22px;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}
.row:hover {
  background: color-mix(in srgb, var(--foreground) 3%, transparent);
}
.row[data-unread='true'] {
  border-left-color: var(--color-brand-green);
  background: color-mix(in srgb, var(--color-brand-green) 5%, transparent);
}
.row[data-unread='true']:hover {
  background: color-mix(in srgb, var(--color-brand-green) 9%, transparent);
}
.row-main {
  min-width: 0;
}
.row-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.row-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-brand-green);
  flex-shrink: 0;
}
.row-subject {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-pill {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 5px;
  background: var(--color-brand-green);
  color: var(--on-brand);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.row-meta {
  margin-top: 5px;
  font-size: 11px;
  color: var(--content-weak);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row[data-unread='true'] .row-meta {
  padding-left: 14px;
}
.row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.row-when {
  font-size: 10px;
  color: var(--content-weak);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------- empty */
.empty-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}
.empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  border: 1px dashed var(--border);
  padding: 44px 56px;
  max-width: 460px;
}
.empty-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.empty-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--content-weak);
}

/* --------------------------------------------------------------- signin */
.signin {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.signin-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.signin-kicker {
  margin: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--content-weak);
}
.signin-lede {
  margin: 0;
  font-size: 13px;
  color: var(--content-base);
}

/* --------------------------------------------------------------- footer */
.shell-footer {
  display: flex;
  height: var(--nav-height);
  flex-shrink: 0;
  align-items: stretch;
  border-top: 1px solid var(--shell-border);
}
.foot-cell {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-right: 1px solid var(--shell-border);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--shell-muted-text);
}
.foot-mid {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  padding: 0 16px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--shell-muted-text);
  overflow: hidden;
}
.live {
  display: flex;
  align-items: center;
  gap: 7px;
}
.live-dot {
  width: 7px;
  height: 7px;
  background: currentColor;
  display: none;
}
.live-spin, .live-off {
  display: none;
}
.live[data-state='live'] {
  color: var(--color-brand-green);
}
.live[data-state='live'] .live-dot {
  display: block;
  animation: orgnLive 2s ease-in-out infinite;
}
.live[data-state='reconnecting'] {
  color: var(--color-status-orange);
}
.live[data-state='reconnecting'] .live-spin {
  display: flex;
  animation: orgnSpin 1s linear infinite;
}
.live[data-state='offline'] {
  color: var(--shell-muted-text);
}
.live[data-state='offline'] .live-off {
  display: flex;
}
.foot-toggle {
  width: var(--nav-height);
  flex-shrink: 0;
  justify-content: center;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--shell-border);
  background: none;
  color: var(--icon-weak-base);
  cursor: pointer;
  font: inherit;
  letter-spacing: 0;
  -webkit-appearance: none;
  appearance: none;
}
.foot-toggle:hover {
  color: var(--foreground);
}

/* ----------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .shell-rail {
    display: none;
  }
  .nav-team, .nav-search {
    display: none;
  }
  .row {
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 12px 16px 12px 14px;
  }
  .row-when {
    display: none;
  }
  .main-band, .toolbar, .thread-head {
    padding-left: 16px;
    padding-right: 16px;
  }
  .thread, .composer, .form-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  .reopen-notice {
    margin-left: 16px;
    margin-right: 16px;
  }
  .toolbar-search {
    min-width: 0;
    flex: 1;
  }
}
@media (max-width: 560px) {
  .row {
    grid-template-columns: 1fr;
  }
  .row-side {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
  }
  .foot-mid {
    gap: 12px;
  }
  .foot-mid > span:first-child {
    display: none;
  }
}

/* Coarse pointers get 44px targets. Height only — the type scale is the design's. */
@media (pointer: coarse) {
  .btn-new, .btn-ghost, .toolbar-search, .toolbar-chip {
    height: 44px;
  }
  .orgn-input, .orgn-select {
    height: 44px;
  }
  .nav-bell {
    padding: 14px;
  }
  .rail-foot a {
    min-height: 44px;
  }
  .orgn-nav-row {
    padding-top: 11px;
    padding-bottom: 11px;
  }
  .thread-back {
    width: 44px;
    height: 44px;
  }
}

.signin-note {
  margin: 0;
  max-width: 46ch;
  font-size: 11px;
  line-height: 1.7;
  color: var(--content-weak);
}
.signin-note strong {
  color: var(--content-base);
  font-weight: 600;
}

/* --------------------------------------------------------- sign-in forms */
.signin-box {
  width: 100%;
  max-width: 340px;
}
.signin-field {
  width: 100%;
  text-align: left;
  margin: 4px 0 4px;
}
.signin-alt {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--content-weak);
}
.signin-alt::before, .signin-alt::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.signin-alt a {
  color: var(--content-weak);
}
.signin-alt a:hover {
  color: var(--foreground);
}
.code-input {
  text-align: center;
  font-size: 24px;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  font-variant-numeric: tabular-nums;
  height: 52px;
}
.dev-code {
  margin: 0;
  width: 100%;
  border: 1px dashed var(--color-status-orange);
  padding: 8px 10px;
  font-size: 11px;
  color: var(--color-status-orange);
}
.dev-code strong {
  font-size: 14px;
  letter-spacing: 0.2em;
}

/* ------------------------------------------------------------ auth screen */
.auth-stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  min-height: 0;
}
/* Faint radial brand ambience in opposite corners — the house shell glow, kept subtle
   enough that it reads as depth rather than as a gradient. */
.orgn-ambient-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      60ch 40ch at 8% 0%,
      color-mix(in srgb, var(--color-brand-green) 5%, transparent),
      transparent 70%
    ),
    radial-gradient(
    50ch 36ch at 100% 100%,
    color-mix(in srgb, var(--color-brand-green) 4%, transparent),
    transparent 70%
  );
}
.auth-card {
  position: relative;
  width: 400px;
  max-width: 100%;
  border: 1px solid var(--border);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--background);
}
/* Corner brackets: the house frame for an important card, at the cost of four 1px rules. */
.bracket {
  position: absolute;
  width: 9px;
  height: 9px;
}
.bracket--tl {
  top: -1px;
  left: -1px;
  border-top: 1px solid var(--foreground);
  border-left: 1px solid var(--foreground);
}
.bracket--tr {
  top: -1px;
  right: -1px;
  border-top: 1px solid var(--foreground);
  border-right: 1px solid var(--foreground);
}
.bracket--bl {
  bottom: -1px;
  left: -1px;
  border-bottom: 1px solid var(--foreground);
  border-left: 1px solid var(--foreground);
}
.bracket--br {
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid var(--foreground);
  border-right: 1px solid var(--foreground);
}

.auth-wordmark {
  display: block;
  color: var(--foreground);
  margin-bottom: 34px;
}
.auth-wordmark svg {
  height: 22px;
  width: auto;
  display: block;
}
.auth-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-field {
  width: 100%;
  text-align: left;
}
.auth-btn {
  width: 100%;
  height: var(--control-h);
}
/* The SSO call to action, matching ORGN Studio's sign-in button
   (apps/agent/components/auth/signin-client.tsx): 48px tall, transparent, a 1px dashed
   hairline, and four solid 12px corner brackets laid over it.

   Studio hardcodes white because its sign-in is always on black. This is token-driven so it
   survives the portal's light theme, where a white-on-white button would be invisible. */
.btn-unlock {
  position: relative;
  display: flex;
  width: 100%;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px dashed color-mix(in srgb, var(--foreground) 30%, transparent);
  background: transparent;
  color: var(--foreground);
  font-family: var(--app-font-family);
  font-size: 21px;
  font-weight: 900;
  font-synthesis: weight;
  line-height: 1;
  letter-spacing: 0.15em;
  /* The tracking adds a trailing gap after the last glyph, which reads as off-centre. */
  text-indent: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.btn-unlock:hover {
  border-color: color-mix(in srgb, var(--foreground) 60%, transparent);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}
.btn-unlock:focus-visible {
  outline: 1px solid var(--color-brand-green);
  outline-offset: 2px;
}
/* 12px arms, 1px thick, solid where the border is dashed — the same contrast Studio uses to
   pin the corners of a dashed frame. */
.btn-unlock::before,
.btn-unlock::after,
.btn-unlock > .unlock-corner::before,
.btn-unlock > .unlock-corner::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--foreground);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}
.btn-unlock::before {
  top: -1px;
  left: -1px;
  border-top-width: 1px;
  border-left-width: 1px;
}
.btn-unlock::after {
  top: -1px;
  right: -1px;
  border-top-width: 1px;
  border-right-width: 1px;
}
.btn-unlock > .unlock-corner::before {
  bottom: -1px;
  left: -1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
}
.btn-unlock > .unlock-corner::after {
  bottom: -1px;
  right: -1px;
  border-bottom-width: 1px;
  border-right-width: 1px;
}
.unlock-corner {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* The label is its own node so the scramble can rewrite text without destroying the
   bracket span next to it. */
.unlock-label {
  position: relative;
}

.error-status {
  margin: 0 0 4px;
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--content-weak);
}
.auth-lede {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.auth-note {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--content-weak);
}
.auth-note strong {
  color: var(--content-base);
  font-weight: 600;
}
.auth-note a {
  color: var(--content-base);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* The field label. `.orgn-label` was applied throughout the markup and never defined, so
   every form label in the portal rendered as plain body copy — reading as a heading rather
   than as the small, quiet caption a field label should be. */
.orgn-label {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--content-weak);
}

/* Input and its action on one line, sharing a single hairline instead of stacking two.
   Stacked, their adjacent 1px borders doubled up and the pair read as one broken control
   rather than as a field plus a button. */
.input-row {
  display: flex;
  width: 100%;
  align-items: stretch;
}
.input-row .orgn-input {
  flex: 1;
  min-width: 0;
  border-right: 0;
}
.input-row .btn-ghost {
  height: var(--control-h);
  flex-shrink: 0;
  padding: 0 16px;
  border-color: var(--input);
}
/* The button is the affordance here, so it carries the weight the input does not. */
.input-row .btn-ghost:hover {
  background: var(--foreground);
  color: var(--background);
  border-color: var(--foreground);
}

.auth-otp {
  width: 100%;
  text-align: left;
}
.auth-note--tight {
  margin-top: 8px;
  text-align: center;
}

/* A field with no visible focus state is unusable by keyboard. Brand green rather than the
   UA default so it belongs to this shell, and inset so it cannot be clipped by the row. */
.orgn-input:focus-visible,
.orgn-textarea:focus-visible,
.orgn-select:focus-visible {
  outline: 1px solid var(--color-brand-green);
  outline-offset: -1px;
  border-color: var(--color-brand-green);
}
.input-row .orgn-input:focus-visible {
  position: relative;
  z-index: 1;
}
.btn-ghost:focus-visible,
.btn-new:focus-visible {
  outline: 1px solid var(--color-brand-green);
  outline-offset: 2px;
}

.auth-or {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--content-weak);
}
.auth-or::before, .auth-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.foot-mid a {
  color: var(--shell-muted-text);
}
.foot-mid a:hover {
  color: var(--foreground);
  text-decoration: none;
}

/* ═══════════════════════════════════════════════ centred document column
   Thread and form sit in a bordered column rather than running full-bleed: the reading
   measure stays sane on a wide monitor, and the rules give the page an edge to hang from. */
.doc {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.doc--thread {
  max-width: 900px;
}
.doc--form {
  max-width: 760px;
}

.doc-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 44px;
  flex-shrink: 0;
  border-bottom: 1px dashed var(--shell-border);
  padding: 0 24px;
}
.doc-band-left, .doc-band-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--shell-muted-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-back {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--shell-muted-text);
}
.doc-back:hover {
  color: var(--foreground);
  text-decoration: none;
}
.live-inline {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.doc-head {
  border-bottom: 1px solid var(--border);
}
.doc-title-block {
  padding: 20px 24px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.doc-title-main {
  min-width: 0;
}
.doc-key-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.doc-key {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--content-weak);
  font-variant-numeric: tabular-nums;
}
.doc-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.doc-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: right;
  flex-shrink: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--content-weak);
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────── messages */
.thread {
  flex: 1;
}
.msg {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
/* The customer's own turns are tinted, so scanning finds "what did I say" instantly. */
.msg[data-author='customer'] {
  background: var(--surface-base);
}
.msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--muted);
  color: var(--content-base);
  font-size: 10px;
}
.msg-avatar--agent {
  border-radius: 0;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--foreground);
}
.msg-avatar--agent svg {
  height: 13px;
  width: auto;
}
.msg-main {
  min-width: 0;
}
.msg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.msg-who {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.msg-name {
  font-size: 12px;
  font-weight: 600;
}
.role-you {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--content-weak);
}
.role-badge {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 5px;
  border: 1px solid var(--border);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--content-weak);
}
.unread-badge {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 5px;
  background: var(--color-brand-green);
  color: var(--on-brand);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.msg-when {
  font-size: 11px;
  color: var(--content-weak);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.msg-body {
  font-size: 13px;
  line-height: 1.75;
  color: var(--stream-text);
  max-width: 72ch;
}
.msg-body p {
  margin: 0 0 14px;
}
.msg-body p:last-child {
  margin-bottom: 0;
}
.msg-body code {
  background: var(--code-inline-bg);
  border: 1px solid var(--code-inline-border);
  padding: 1px 5px;
  font-size: 12px;
}
.msg-body pre {
  margin: 0 0 14px;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: inherit;
  font-size: 12px;
  line-height: 20px;
  white-space: pre-wrap;
}
.msg-body pre span {
  display: block;
}
.msg-body pre.term {
  border: 1px solid var(--terminal-border);
  background: var(--terminal-background);
}
.msg-body pre.code {
  border: 1px solid var(--border);
  background: var(--surface-strong);
}
.msg-body .tl-cmd {
  color: var(--terminal-text-command);
}
.msg-body .tl-err {
  color: var(--terminal-text-error);
}
.msg-body .tl-mut {
  color: var(--terminal-text-muted);
}

.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  padding: 7px 11px;
  margin-top: 4px;
  color: var(--icon-weak-base);
}
.attach-name {
  font-size: 12px;
  color: var(--foreground);
}
.attach-size {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--content-weak);
  font-variant-numeric: tabular-nums;
}

/* System events are a rule between messages, never another message. */
.sys-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 24px;
  border-bottom: 1px solid var(--border);
}
.sys-line {
  flex: 1;
  height: 1px;
  border-top: 1px dashed var(--border);
}
.sys-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sys-square {
  width: 5px;
  height: 5px;
  background: currentColor;
  display: inline-block;
}

/* ────────────────────────────────────────────────────────────── composer */
.composer {
  border-top: 1px solid var(--border);
  padding: 16px 24px 18px;
  background: var(--background);
}
.composer-box {
  border: 1px solid var(--input);
}
.composer-box textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.7;
  color: var(--foreground);
  resize: vertical;
  outline: none;
}
.composer-box textarea::placeholder {
  color: var(--content-weak);
}
.composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--border);
  padding: 8px 10px 8px 14px;
}
.composer-bar-left, .composer-bar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.composer-hint {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--content-weak);
}
.kbd-hint {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* The consequence sits above the box the user is about to type in, not after they send. */
.reopen-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px dashed var(--border);
  border-left: 2px solid var(--color-status-green);
  padding: 13px 16px;
  margin-bottom: 12px;
}
.reopen-callout p {
  margin: 0;
  flex: 1;
  font-size: 12px;
  line-height: 1.7;
  color: var(--content-base);
}
.reopen-callout strong {
  color: var(--content-strong);
  font-weight: 600;
}

/* ────────────────────────────────────────────────────────────────── form */
.doc--form form {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field > label, .field-label-row label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--content-weak);
}
.field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.field-aside {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--content-weak);
}
.field-help {
  font-size: 11px;
  color: var(--content-weak);
  line-height: 1.6;
}
.req {
  color: var(--color-status-red);
  margin-left: 4px;
}
.field-err {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--destructive);
  animation: orgnUp 0.2s ease-out;
}
.orgn-input, .orgn-textarea, .orgn-select {
  width: 100%;
  border: 1px solid var(--input);
  background: transparent;
  border-radius: 0;
  font-family: var(--app-font-family);
  font-size: 14px;
  line-height: 20px;
  color: var(--foreground);
}
.orgn-input, .orgn-select {
  height: var(--control-h);
  padding: 0 12px;
}
.orgn-textarea {
  padding: 10px 12px;
  resize: vertical;
}
.orgn-textarea.desc {
  font-size: 13px;
  line-height: 1.7;
  min-height: 200px;
}
.orgn-input::placeholder, .orgn-textarea::placeholder {
  color: var(--content-weak);
}
.dark .orgn-input, .dark .orgn-select, .dark .orgn-textarea {
  background: color-mix(in srgb, var(--input) 12%, transparent);
}
.orgn-input[aria-invalid='true'], .orgn-textarea[aria-invalid='true'], .orgn-select[aria-invalid='true'] {
  border-color: var(--destructive);
}
.dropzone {
  border: 1px dashed var(--input);
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: var(--icon-weak-base);
}
.dz-lede {
  margin: 0;
  font-size: 12px;
  color: var(--content-weak);
}
.dz-note {
  margin: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--content-weak);
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  align-items: center;
}

@media (max-width: 900px) {
  .doc {
    border-left: 0;
    border-right: 0;
  }
  .doc-band, .doc-title-block, .msg, .sys-rule, .composer {
    padding-left: 16px;
    padding-right: 16px;
  }
  .doc--form form {
    padding: 20px 16px 28px;
  }
  .doc-title-block {
    flex-direction: column;
    gap: 12px;
  }
  .doc-meta {
    text-align: left;
  }
}
/* The form band groups its mark and label together; only the thread band splits. */
.doc-band--start {
  justify-content: flex-start;
}

/* Agents carry both hats; the switch belongs in the nav, not buried in a menu. */
.nav-inbox-link {
  width: auto;
  padding: 4px 10px;
  border: 1px solid var(--shell-border);
  color: var(--content-weak);
  text-decoration: none;
}
.nav-inbox-link:hover {
  color: var(--foreground);
  background: transparent;
}
.nav-inbox-link[data-active='true']::before {
  content: none;
}

/* An internal note must never be mistakable for something the requester can read. */
.msg[data-internal='true'] {
  background: color-mix(in srgb, var(--color-status-orange) 6%, transparent);
  border-left: 2px solid var(--color-status-orange);
}
.internal-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--content-weak);
}
.doc-meta form, form.doc-meta {
  align-items: flex-end;
}