/**
 * TXF chat surface styles.
 *
 * Every value here reads from a `--thox-*` design token emitted by
 * `tools/ux-engine` from TOKENS.json. There are no literal colors: hardcoded
 * values fail the branding validator, and they break the light and mesh themes,
 * which redefine the same variable names.
 *
 * These are plain CSS classes rather than Tailwind utilities so the components
 * work in Next, Vite, Tauri, a plain HTML page, and inside a Web Component
 * shadow root — the Space version was Tailwind-coupled and therefore only
 * consumable by surfaces that had already adopted Tailwind.
 *
 * Fallbacks are supplied on every var() so a host that has not yet loaded
 * thox-tokens.css still renders a legible dark surface rather than an unstyled
 * one.
 */

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

/* The fabric must lay out correctly without borrowing the host's reset.
 *
 * Every TXF container pairs `width: 100%` with padding, which overflows unless
 * the box model counts padding inward. Most web hosts set `box-sizing:
 * border-box` globally, so this went unnoticed there - but the iOS WebView
 * bundle has no host stylesheet to borrow from, and the whole chat surface
 * scrolled sideways at phone width.
 *
 * Scoped to TXF-owned elements so embedding the fabric never changes the
 * host's own box model. */
[class^="txf-"],
[class*=" txf-"],
[class^="txf-"] *,
[class*=" txf-"] *,
[class^="txf-"] *::before,
[class*=" txf-"] *::after {
  box-sizing: border-box;
}

.txf-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: var(--thox-color-bg-canvas, #09090b);
  color: var(--thox-color-text-primary, #f9f9f9);
  font-family: var(--thox-type-family-sans, Inter, system-ui, sans-serif);
}

.txf-chat__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.txf-chat__thread {
  display: flex;
  flex-direction: column;
  gap: var(--thox-space-6, 20px);
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--thox-space-6, 20px) var(--thox-space-4, 16px);
}

/* --------------------------------------------------------------------------
   Turns
   -------------------------------------------------------------------------- */

.txf-turn {
  display: flex;
  gap: var(--thox-space-3, 12px);
  animation: txf-fade-up var(--thox-motion-duration-base, 200ms)
    var(--thox-motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
}

.txf-turn--user {
  justify-content: flex-end;
}

.txf-turn__bubble {
  max-width: 85%;
  padding: var(--thox-space-3, 12px) var(--thox-space-4, 16px);
  border: 1px solid var(--thox-color-border-default, #3f3f46);
  border-radius: var(--thox-radius-md, 12px);
  border-top-right-radius: var(--thox-radius-sm, 8px);
  background: var(--thox-color-bg-surface, #18181b);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.txf-turn__avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border-radius: var(--thox-radius-full, 9999px);
  border: 1px solid var(--thox-color-border-default, #3f3f46);
  color: var(--thox-color-text-secondary, #a1a1aa);
}

.txf-turn__avatar--assistant {
  border-color: transparent;
  background: var(--thox-color-brand-soft, rgba(16, 185, 129, 0.15));
  color: var(--thox-color-brand-primary, #05a451);
}

.txf-turn__body {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: var(--thox-space-4, 16px);
  border-left: 2px solid var(--thox-color-brand-primary, #05a451);
}

.txf-turn__footer {
  display: flex;
  align-items: center;
  gap: var(--thox-space-3, 12px);
  margin-top: var(--thox-space-2, 8px);
  flex-wrap: wrap;
}

.txf-turn__stats {
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  color: var(--thox-color-text-muted, #71717a);
}

/* --------------------------------------------------------------------------
   Prose
   -------------------------------------------------------------------------- */

.txf-prose {
  line-height: var(--thox-type-line-height-body, 1.65);
  font-size: 0.95rem;
  color: var(--thox-color-text-primary, #f9f9f9);
  overflow-wrap: anywhere;
}

.txf-prose > *:first-child {
  margin-top: 0;
}
.txf-prose > *:last-child {
  margin-bottom: 0;
}

.txf-prose h1,
.txf-prose h2,
.txf-prose h3,
.txf-prose h4 {
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 1.4em 0 0.6em;
}

.txf-prose h1 { font-size: 1.5rem; }
.txf-prose h2 { font-size: 1.25rem; }
.txf-prose h3 { font-size: 1.1rem; }

.txf-prose p { margin: 0.7em 0; }

.txf-prose a {
  color: var(--thox-color-text-accent, #37c77a);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.txf-prose ul,
.txf-prose ol {
  margin: 0.7em 0;
  padding-left: 1.4em;
}
.txf-prose ul { list-style: disc; }
.txf-prose ol { list-style: decimal; }
.txf-prose li { margin: 0.3em 0; }
.txf-prose li::marker { color: var(--thox-color-brand-primary, #05a451); }

.txf-prose blockquote {
  margin: 0.8em 0;
  padding-left: 1em;
  border-left: 3px solid var(--thox-color-brand-primary, #05a451);
  color: var(--thox-color-text-secondary, #a1a1aa);
}

.txf-prose hr {
  border: 0;
  border-top: 1px solid var(--thox-color-border-subtle, #27272a);
  margin: 1.2em 0;
}

.txf-prose table {
  display: table;
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0.8em 0;
  font-size: 0.85rem;
  /* Wide tables scroll inside the thread box; the thread never scrolls sideways.
     display:table (not block) keeps column sizing intrinsic so long unbreakable
     ids ellipsize instead of collapsing sibling columns to min-content. */
  overflow-x: auto;
}

.txf-prose table th,
.txf-prose table td {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.txf-prose th,
.txf-prose td {
  border: 1px solid var(--thox-color-border-default, #3f3f46);
  padding: 0.4em 0.7em;
  text-align: left;
}

.txf-prose th {
  background: var(--thox-color-bg-surface, #18181b);
  font-weight: 600;
}

.txf-prose :not(pre) > code {
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--thox-color-border-subtle, #27272a);
  border-radius: var(--thox-radius-sm, 8px);
  background: var(--thox-color-bg-surface, #18181b);
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.85em;
  color: var(--thox-color-text-code, #37c77a);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Shared panel chrome
   -------------------------------------------------------------------------- */

.txf-panel {
  overflow: hidden;
  margin-top: var(--thox-space-3, 12px);
  border: 1px solid var(--thox-color-border-default, #3f3f46);
  border-radius: var(--thox-radius-md, 12px);
  background: var(--thox-color-bg-surface, #18181b);
}

.txf-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--thox-space-2, 8px);
  padding: var(--thox-space-2, 8px) var(--thox-space-3, 12px);
  border-bottom: 1px solid var(--thox-color-border-default, #3f3f46);
  background: var(--thox-color-bg-canvas, #09090b);
}

.txf-panel__title {
  display: inline-flex;
  align-items: center;
  gap: var(--thox-space-2, 8px);
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--thox-color-text-secondary, #a1a1aa);
}

.txf-panel__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--thox-space-2, 8px);
}

.txf-panel__body {
  padding: var(--thox-space-3, 12px);
}

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

.txf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--thox-space-2, 8px);
  min-height: var(--thox-target-pointer, 24px);
  padding: var(--thox-space-2, 8px) var(--thox-space-3, 12px);
  border: 1px solid var(--thox-color-border-default, #3f3f46);
  border-radius: var(--thox-radius-sm, 8px);
  background: transparent;
  color: var(--thox-color-text-secondary, #a1a1aa);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--thox-motion-duration-fast, 100ms),
    border-color var(--thox-motion-duration-fast, 100ms),
    background-color var(--thox-motion-duration-fast, 100ms);
}

.txf-button:hover:not(:disabled) {
  border-color: var(--thox-color-brand-primary, #05a451);
  color: var(--thox-color-text-primary, #f9f9f9);
}

.txf-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.txf-button--primary {
  border-color: transparent;
  background: var(--thox-color-brand-primary, #05a451);
  color: var(--thox-color-text-on-accent, #09090b);
  font-weight: 600;
}

.txf-button--primary:hover:not(:disabled) {
  background: var(--thox-color-brand-hover, #37c77a);
  color: var(--thox-color-text-on-accent, #09090b);
}

.txf-button--danger {
  border-color: var(--thox-color-state-danger, #ef4444);
  color: var(--thox-color-state-text-danger, #ef4444);
}

.txf-button--icon {
  width: var(--thox-target-touch, 44px);
  height: var(--thox-target-touch, 44px);
  padding: 0;
}

.txf-button--active {
  border-color: var(--thox-color-brand-primary, #05a451);
  background: var(--thox-color-brand-soft, rgba(16, 185, 129, 0.12));
  color: var(--thox-color-text-accent, #37c77a);
}

/* Focus is never removed, only restyled - accessibility floor. */
.txf-button:focus-visible,
.txf-composer__input:focus-visible,
.txf-suggestion:focus-visible,
.txf-disclosure__summary:focus-visible {
  outline: 2px solid var(--thox-color-focus-ring, #05a451);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Disclosures (reasoning, citations)
   -------------------------------------------------------------------------- */

.txf-disclosure {
  margin: var(--thox-space-3, 12px) 0;
  padding: var(--thox-space-2, 8px) var(--thox-space-3, 12px);
  border: 1px solid var(--thox-color-border-subtle, #27272a);
  border-radius: var(--thox-radius-sm, 8px);
  background: var(--thox-color-bg-surface, #18181b);
  font-size: 0.85rem;
  color: var(--thox-color-text-secondary, #a1a1aa);
}

.txf-disclosure__summary {
  display: flex;
  align-items: center;
  gap: var(--thox-space-2, 8px);
  cursor: pointer;
  list-style: none;
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-weight: 500;
  color: var(--thox-color-text-accent, #37c77a);
}

.txf-disclosure__summary::-webkit-details-marker {
  display: none;
}

.txf-disclosure[open] > .txf-disclosure__summary {
  margin-bottom: var(--thox-space-2, 8px);
}

.txf-disclosure__content {
  white-space: pre-wrap;
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.8rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Code blocks
   -------------------------------------------------------------------------- */

.txf-code {
  overflow: hidden;
  margin: var(--thox-space-3, 12px) 0;
  border: 1px solid var(--thox-color-border-default, #3f3f46);
  border-radius: var(--thox-radius-sm, 8px);
  background: var(--thox-color-bg-canvas, #09090b);
}

.txf-code__lang {
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--thox-color-text-muted, #71717a);
}

.txf-code__scroll {
  overflow-x: auto;
}

.txf-code__pre {
  margin: 0;
  padding: var(--thox-space-4, 16px);
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--thox-color-text-primary, #f9f9f9);
  /* A long line scrolls inside its own block. Model output routinely emits
   * lines wider than a phone, and without this the whole thread scrolls
   * sideways instead. Never wrap code: a broken line changes what it says. */
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Route disclosure
   -------------------------------------------------------------------------- */

.txf-route {
  display: inline-flex;
  align-items: center;
  gap: var(--thox-space-2, 8px);
  padding: 2px var(--thox-space-2, 8px);
  border: 1px solid var(--thox-color-border-default, #3f3f46);
  border-radius: var(--thox-radius-full, 9999px);
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  color: var(--thox-color-text-secondary, #a1a1aa);
}

.txf-route__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--thox-radius-full, 9999px);
  background: currentColor;
}

/* Locality is carried by a text label as well as a color, so the state is
   never communicated by color alone. */
.txf-route--local,
.txf-route--private {
  border-color: var(--thox-color-state-success, #05a451);
  color: var(--thox-color-state-text-success, #37c77a);
}

.txf-route--remote,
.txf-route--cloud {
  border-color: var(--thox-color-state-warning, #f59e0b);
  color: var(--thox-color-state-text-warning, #f59e0b);
}

.txf-route--unavailable {
  border-color: var(--thox-color-state-danger, #ef4444);
  color: var(--thox-color-state-text-danger, #ef4444);
}

.txf-consent {
  margin: var(--thox-space-3, 12px) 0;
  padding: var(--thox-space-4, 16px);
  border: 1px solid var(--thox-color-state-warning, #f59e0b);
  border-radius: var(--thox-radius-md, 12px);
  background: var(--thox-color-bg-surface, #18181b);
}

.txf-consent__statement {
  margin: 0 0 var(--thox-space-2, 8px);
  color: var(--thox-color-text-primary, #f9f9f9);
  font-weight: 600;
}

.txf-consent__destination,
.txf-consent__detail {
  margin: 0 0 var(--thox-space-2, 8px);
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.8rem;
  color: var(--thox-color-text-secondary, #a1a1aa);
}

.txf-consent__actions {
  display: flex;
  gap: var(--thox-space-2, 8px);
  margin-top: var(--thox-space-3, 12px);
}

/* --------------------------------------------------------------------------
   Approval
   -------------------------------------------------------------------------- */

.txf-approval {
  margin: var(--thox-space-3, 12px) 0;
  padding: var(--thox-space-4, 16px);
  border: 1px solid var(--thox-color-state-warning, #f59e0b);
  border-radius: var(--thox-radius-md, 12px);
  background: var(--thox-color-bg-surface, #18181b);
}

.txf-approval--approved { border-color: var(--thox-color-state-success, #05a451); }
.txf-approval--rejected { border-color: var(--thox-color-state-danger, #ef4444); }
.txf-approval--expired { border-color: var(--thox-color-border-default, #3f3f46); }

.txf-approval__class {
  display: inline-block;
  padding: 2px var(--thox-space-2, 8px);
  border: 1px solid currentColor;
  border-radius: var(--thox-radius-full, 9999px);
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.txf-approval__summary {
  margin: var(--thox-space-2, 8px) 0;
  color: var(--thox-color-text-primary, #f9f9f9);
}

.txf-approval__audit {
  margin: 0;
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  color: var(--thox-color-text-muted, #71717a);
}

.txf-approval__actions {
  display: flex;
  gap: var(--thox-space-2, 8px);
  margin-top: var(--thox-space-3, 12px);
}

/* --------------------------------------------------------------------------
   Tool timeline
   -------------------------------------------------------------------------- */

.txf-tools {
  margin: var(--thox-space-3, 12px) 0;
  padding: 0;
  list-style: none;
}

.txf-tools__step {
  display: flex;
  align-items: center;
  gap: var(--thox-space-2, 8px);
  padding: var(--thox-space-2, 8px) 0;
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  color: var(--thox-color-text-secondary, #a1a1aa);
}

.txf-tools__state {
  min-width: 5.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.6875rem;
}

.txf-tools__step--running .txf-tools__state { color: var(--thox-color-state-text-info, #3b82f6); }
.txf-tools__step--waiting .txf-tools__state { color: var(--thox-color-state-text-warning, #f59e0b); }
.txf-tools__step--complete .txf-tools__state { color: var(--thox-color-state-text-success, #37c77a); }
.txf-tools__step--failed .txf-tools__state { color: var(--thox-color-state-text-danger, #ef4444); }

.txf-tools__detail {
  color: var(--thox-color-text-muted, #71717a);
}

/* --------------------------------------------------------------------------
   Citations
   -------------------------------------------------------------------------- */

.txf-citations__list {
  margin: var(--thox-space-2, 8px) 0 0;
  padding: 0;
  list-style: none;
}

.txf-citations__item {
  display: flex;
  gap: var(--thox-space-2, 8px);
  margin: var(--thox-space-2, 8px) 0;
  font-size: 0.85rem;
}

.txf-citations__index {
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  color: var(--thox-color-text-muted, #71717a);
}

.txf-citations__link {
  color: var(--thox-color-text-accent, #37c77a);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Artifacts
   -------------------------------------------------------------------------- */

.txf-artifact__frame {
  width: 100%;
  height: 380px;
  border: 0;
  background: var(--thox-color-core-white, #ffffff);
}

.txf-artifact__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 380px;
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  color: var(--thox-color-text-muted, #71717a);
}

.txf-artifact__badge {
  padding: 1px var(--thox-space-2, 8px);
  border: 1px solid var(--thox-color-border-default, #3f3f46);
  border-radius: var(--thox-radius-full, 9999px);
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--thox-color-text-muted, #71717a);
}

/* --------------------------------------------------------------------------
   Structured blocks
   -------------------------------------------------------------------------- */

.txf-block {
  margin: var(--thox-space-4, 16px) 0;
  padding: var(--thox-space-4, 16px);
  border: 1px solid var(--thox-color-border-default, #3f3f46);
  border-radius: var(--thox-radius-md, 12px);
  background: var(--thox-color-bg-surface, #18181b);
}

.txf-block__title {
  margin: 0 0 var(--thox-space-3, 12px);
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--thox-color-text-secondary, #a1a1aa);
}

.txf-block__grid {
  display: grid;
  gap: var(--thox-space-3, 12px);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.txf-block__item-title {
  margin: 0 0 var(--thox-space-1, 4px);
  font-weight: 600;
  color: var(--thox-color-text-primary, #f9f9f9);
}

.txf-block__item-body {
  margin: 0;
  font-size: 0.875rem;
  color: var(--thox-color-text-secondary, #a1a1aa);
}

/* hero */
.txf-block--hero { text-align: left; }
.txf-block__eyebrow {
  margin: 0 0 var(--thox-space-2, 8px);
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--thox-color-text-accent, #37c77a);
}
.txf-block__headline {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--thox-color-text-primary, #f9f9f9);
}
.txf-block__subhead {
  margin: var(--thox-space-2, 8px) 0 0;
  color: var(--thox-color-text-secondary, #a1a1aa);
}

/* stats */
.txf-block__stat-value {
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--thox-color-text-primary, #f9f9f9);
}
.txf-block__stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--thox-color-text-muted, #71717a);
}
.txf-block__stat-delta {
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  color: var(--thox-color-text-accent, #37c77a);
}

/* steps */
.txf-block__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: txf-step;
}
.txf-block__step {
  position: relative;
  counter-increment: txf-step;
  padding: 0 0 var(--thox-space-4, 16px) var(--thox-space-8, 32px);
  border-left: 1px solid var(--thox-color-border-default, #3f3f46);
}
.txf-block__step:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}
.txf-block__step::before {
  content: counter(txf-step);
  position: absolute;
  left: -13px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: var(--thox-radius-full, 9999px);
  border: 1px solid var(--thox-color-brand-primary, #05a451);
  background: var(--thox-color-bg-surface, #18181b);
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  color: var(--thox-color-brand-primary, #05a451);
}

/* split */
.txf-block__split {
  display: grid;
  gap: var(--thox-space-4, 16px);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .txf-block__split { grid-template-columns: 1fr 1fr; }
}

/* table + compare */
.txf-block__table-scroll { overflow-x: auto; }
.txf-block__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.txf-block__table th,
.txf-block__table td {
  padding: var(--thox-space-2, 8px) var(--thox-space-3, 12px);
  border: 1px solid var(--thox-color-border-default, #3f3f46);
  text-align: left;
}
.txf-block__table th {
  background: var(--thox-color-bg-elevated, #27272a);
  font-weight: 600;
  color: var(--thox-color-text-primary, #f9f9f9);
}
.txf-block__table td { color: var(--thox-color-text-secondary, #a1a1aa); }

/* chart */
.txf-chart { width: 100%; }
.txf-chart__caption {
  margin: var(--thox-space-2, 8px) 0 0;
  font-size: 0.75rem;
  color: var(--thox-color-text-muted, #71717a);
}
.txf-chart__bar { fill: var(--thox-color-brand-primary, #05a451); }
.txf-chart__line {
  fill: none;
  stroke: var(--thox-color-brand-primary, #05a451);
  stroke-width: 2;
}
.txf-chart__area { fill: var(--thox-color-brand-soft, rgba(16, 185, 129, 0.2)); }
.txf-chart__axis { stroke: var(--thox-color-border-default, #3f3f46); stroke-width: 1; }
.txf-chart__label {
  fill: var(--thox-color-text-muted, #71717a);
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 11px;
}
.txf-chart__value {
  fill: var(--thox-color-text-secondary, #a1a1aa);
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 11px;
}
.txf-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--thox-space-3, 12px);
  margin-top: var(--thox-space-3, 12px);
  padding: 0;
  list-style: none;
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  color: var(--thox-color-text-secondary, #a1a1aa);
}
.txf-chart__swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--thox-space-2, 8px);
  border-radius: 2px;
}

/* skeleton shown while a block streams */
.txf-block--skeleton {
  min-height: 96px;
}
.txf-skeleton__bar {
  height: 12px;
  margin-bottom: var(--thox-space-2, 8px);
  border-radius: var(--thox-radius-sm, 8px);
  background: var(--thox-color-bg-elevated, #27272a);
  animation: txf-pulse 1.4s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Agent experience
   -------------------------------------------------------------------------- */

.txf-team {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--thox-space-2, 8px);
  padding: var(--thox-space-3, 12px) var(--thox-space-4, 16px);
  border-bottom: 1px solid var(--thox-color-border-default, #3f3f46);
  background: var(--thox-color-bg-canvas, #09090b);
}

.txf-team__label {
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--thox-color-text-muted, #71717a);
}

.txf-team__member {
  display: inline-flex;
  align-items: center;
  gap: var(--thox-space-2, 8px);
  padding: var(--thox-space-1, 4px) var(--thox-space-2, 8px);
  border: 1px solid var(--thox-color-border-default, #3f3f46);
  border-radius: var(--thox-radius-full, 9999px);
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  color: var(--txf-accent, var(--thox-color-text-secondary, #a1a1aa));
  border-color: var(--txf-accent, var(--thox-color-border-default, #3f3f46));
}

.txf-team__member--idle {
  opacity: 0.5;
  color: var(--thox-color-text-muted, #71717a);
  border-color: var(--thox-color-border-default, #3f3f46);
}

.txf-team__member--active {
  animation: txf-pulse 1.4s ease-in-out infinite;
}

.txf-agent-turn {
  animation: txf-fade-up var(--thox-motion-duration-base, 200ms)
    var(--thox-motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
}

.txf-agent-turn__header {
  display: flex;
  align-items: center;
  gap: var(--thox-space-2, 8px);
  flex-wrap: wrap;
}

.txf-agent-turn__name {
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--txf-accent, var(--thox-color-brand-primary, #05a451));
}

.txf-agent-turn__role {
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  color: var(--thox-color-text-muted, #71717a);
}

.txf-agent-turn__body {
  margin-top: var(--thox-space-2, 8px);
  padding-left: var(--thox-space-4, 16px);
  border-left: 2px solid var(--txf-accent, var(--thox-color-brand-primary, #05a451));
}

.txf-badge {
  padding: 1px var(--thox-space-2, 8px);
  border: 1px solid currentColor;
  border-radius: var(--thox-radius-full, 9999px);
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.txf-badge--high { color: var(--thox-color-state-text-success, #37c77a); }
.txf-badge--medium { color: var(--thox-color-state-text-warning, #f59e0b); }
.txf-badge--low { color: var(--thox-color-state-text-danger, #ef4444); }
.txf-badge--synthesis { color: var(--thox-color-text-accent, #37c77a); }

.txf-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--thox-space-4, 16px);
}

.txf-card {
  padding: var(--thox-space-3, 12px) var(--thox-space-4, 16px);
  border: 1px solid var(--thox-color-border-default, #3f3f46);
  border-radius: var(--thox-radius-md, 12px);
  background: var(--thox-color-bg-surface, #18181b);
}

.txf-card--plan { border-color: var(--thox-color-brand-primary, #05a451); }
.txf-card--handoff { border-color: var(--thox-color-state-warning, #f59e0b); }

.txf-card__header {
  display: flex;
  align-items: center;
  gap: var(--thox-space-2, 8px);
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  color: var(--thox-color-text-secondary, #a1a1aa);
}

.txf-card__body {
  margin: var(--thox-space-2, 8px) 0 0;
  font-size: 0.9rem;
  color: var(--thox-color-text-primary, #f9f9f9);
}

.txf-card__meta {
  margin: var(--thox-space-2, 8px) 0 0;
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  color: var(--thox-color-text-muted, #71717a);
}

.txf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--thox-space-2, 8px);
  margin-top: var(--thox-space-2, 8px);
}

.txf-chip {
  padding: 1px var(--thox-space-2, 8px);
  border: 1px solid var(--thox-color-border-default, #3f3f46);
  border-radius: var(--thox-radius-sm, 8px);
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  color: var(--thox-color-text-muted, #71717a);
}

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

.txf-composer {
  flex: 0 0 auto;
  padding: var(--thox-space-3, 12px) var(--thox-space-4, 16px);
  border-top: 1px solid var(--thox-color-border-default, #3f3f46);
  background: var(--thox-color-bg-canvas, #09090b);
}

.txf-composer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--thox-space-2, 8px);
  max-width: 48rem;
  margin: 0 auto;
}

.txf-composer__field {
  display: flex;
  align-items: flex-end;
  gap: var(--thox-space-2, 8px);
  padding: var(--thox-space-2, 8px) var(--thox-space-3, 12px);
  border: 1px solid var(--thox-color-border-default, #3f3f46);
  border-radius: var(--thox-radius-md, 12px);
  background: var(--thox-color-bg-surface, #18181b);
}

.txf-composer__field:focus-within {
  border-color: var(--thox-color-border-focus, #05a451);
}

.txf-composer__input {
  flex: 1 1 auto;
  max-height: 200px;
  padding: var(--thox-space-1, 4px) 0;
  border: 0;
  background: transparent;
  color: var(--thox-color-text-primary, #f9f9f9);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  resize: none;
}

.txf-composer__input:focus {
  outline: none;
}

.txf-composer__input::placeholder {
  color: var(--thox-color-text-muted, #71717a);
}

.txf-composer__hint {
  margin: 0;
  text-align: center;
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  color: var(--thox-color-text-muted, #71717a);
}

/* --------------------------------------------------------------------------
   States
   -------------------------------------------------------------------------- */

.txf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--thox-space-6, 20px);
  padding: var(--thox-space-9, 40px) 0;
  text-align: center;
}

.txf-empty__title {
  margin: 0;
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--thox-color-brand-primary, #05a451);
}

.txf-empty__body {
  margin: var(--thox-space-2, 8px) 0 0;
  max-width: 30rem;
  font-size: 0.875rem;
  color: var(--thox-color-text-muted, #71717a);
}

.txf-suggestions {
  display: grid;
  gap: var(--thox-space-2, 8px);
  width: 100%;
  max-width: 36rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .txf-suggestions--grid { grid-template-columns: 1fr 1fr; }
}

.txf-suggestion {
  padding: var(--thox-space-3, 12px);
  border: 1px solid var(--thox-color-border-default, #3f3f46);
  border-radius: var(--thox-radius-sm, 8px);
  background: var(--thox-color-bg-surface, #18181b);
  color: var(--thox-color-text-secondary, #a1a1aa);
  font-family: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.txf-suggestion:hover {
  border-color: var(--thox-color-brand-primary, #05a451);
  color: var(--thox-color-text-primary, #f9f9f9);
}

.txf-status {
  display: inline-flex;
  align-items: center;
  gap: var(--thox-space-2, 8px);
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.8rem;
  color: var(--thox-color-text-muted, #71717a);
}

.txf-status__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--thox-radius-full, 9999px);
  background: var(--thox-color-brand-primary, #05a451);
  animation: txf-pulse 1.4s ease-in-out infinite;
}

.txf-error {
  margin: var(--thox-space-2, 8px) 0;
  padding: var(--thox-space-3, 12px);
  border: 1px solid var(--thox-color-state-danger, #ef4444);
  border-radius: var(--thox-radius-sm, 8px);
  background: var(--thox-color-bg-surface, #18181b);
  color: var(--thox-color-state-text-danger, #ef4444);
  font-size: 0.875rem;
}

.txf-error__actions {
  display: flex;
  gap: var(--thox-space-2, 8px);
  margin-top: var(--thox-space-3, 12px);
}

/* Screen-reader-only live region: state reaches assistive tech even when it is
   conveyed visually by an icon or color. */
.txf-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;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@keyframes txf-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes txf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* The spec requires honoring reduced motion, so every animation collapses. */
@media (prefers-reduced-motion: reduce) {
  .txf-turn,
  .txf-agent-turn,
  .txf-team__member--active,
  .txf-status__dot,
  .txf-skeleton__bar {
    animation: none;
    transition: none;
  }
}

/* ==========================================================================
   Shell — plane navigation, launcher, skills, runtime, onboarding (TXF 2.2)
   ========================================================================== */

.txf-shell {
  display: flex;
  min-height: 0;
  height: 100%;
  background: var(--thox-color-bg-canvas, #09090b);
  color: var(--thox-color-text-primary, #f9f9f9);
  font-family: var(--thox-type-family-sans, Inter, system-ui, sans-serif);
}

.txf-shell--sidebar,
.txf-shell--collapsible-sidebar {
  flex-direction: row;
}

/* Bottom-bar and card-stack shells stack vertically with nav last in the DOM,
   so assistive technology reaches the content before the navigation. */
.txf-shell--bottom-bar,
.txf-shell--card-stack,
.txf-shell--spoken-list {
  flex-direction: column;
}

.txf-shell__content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

/* --- Plane navigation ---------------------------------------------------- */

.txf-plane-nav {
  display: flex;
  gap: var(--thox-space-1, 4px);
  background: var(--thox-color-bg-canvas, #09090b);
}

.txf-plane-nav--sidebar,
.txf-plane-nav--collapsible-sidebar {
  flex-direction: column;
  flex: 0 0 auto;
  width: 13rem;
  padding: var(--thox-space-4, 16px) var(--thox-space-3, 12px);
  border-right: 1px solid var(--thox-color-border-default, #3f3f46);
}

.txf-plane-nav--collapsible-sidebar {
  width: 11rem;
}

.txf-plane-nav--bottom-bar,
.txf-plane-nav--card-stack,
.txf-plane-nav--spoken-list {
  flex: 0 0 auto;
  justify-content: space-around;
  padding: var(--thox-space-2, 8px);
  border-top: 1px solid var(--thox-color-border-default, #3f3f46);
}

.txf-plane-nav__item {
  display: flex;
  align-items: center;
  gap: var(--thox-space-3, 12px);
  /* The accessibility floor. The phone bar caps at five planes because a
     six-item bar keeps 18 px between adjacent targets at 375 px, while eight
     items leave only 2 px. */
  min-height: var(--thox-target-touch, 44px);
  padding: var(--thox-space-2, 8px) var(--thox-space-3, 12px);
  border: 0;
  border-radius: var(--thox-radius-sm, 8px);
  background: transparent;
  color: var(--thox-color-text-secondary, #a1a1aa);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  transition: color var(--thox-motion-duration-fast, 100ms),
    background-color var(--thox-motion-duration-fast, 100ms);
}

.txf-plane-nav__item:hover {
  background: var(--thox-color-bg-surface, #18181b);
  color: var(--thox-color-text-primary, #f9f9f9);
}

.txf-plane-nav__item--active {
  background: var(--thox-color-bg-surface, #18181b);
  color: var(--thox-color-text-accent, #37c77a);
}

.txf-plane-nav--bottom-bar .txf-plane-nav__item,
.txf-plane-nav--card-stack .txf-plane-nav__item,
.txf-plane-nav--spoken-list .txf-plane-nav__item {
  flex-direction: column;
  gap: var(--thox-space-1, 4px);
  min-width: var(--thox-target-touch, 44px);
  padding: var(--thox-space-1, 4px);
  font-size: 0.6875rem;
}

.txf-plane-nav__label {
  white-space: nowrap;
}

.txf-plane-nav__overflow {
  position: relative;
}

.txf-plane-nav__menu {
  position: absolute;
  bottom: calc(100% + var(--thox-space-2, 8px));
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  padding: var(--thox-space-2, 8px);
  border: 1px solid var(--thox-color-border-default, #3f3f46);
  border-radius: var(--thox-radius-md, 12px);
  background: var(--thox-color-bg-elevated, #27272a);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.72);
}

.txf-plane-nav--sidebar .txf-plane-nav__menu,
.txf-plane-nav--collapsible-sidebar .txf-plane-nav__menu {
  bottom: auto;
  top: 100%;
  left: 0;
  right: auto;
}

.txf-plane-nav__menu-item {
  display: flex;
  align-items: center;
  gap: var(--thox-space-3, 12px);
  min-height: var(--thox-target-touch, 44px);
  padding: var(--thox-space-2, 8px);
  border: 0;
  border-radius: var(--thox-radius-sm, 8px);
  background: transparent;
  color: var(--thox-color-text-secondary, #a1a1aa);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.txf-plane-nav__menu-item:hover {
  background: var(--thox-color-bg-surface, #18181b);
  color: var(--thox-color-text-primary, #f9f9f9);
}

/* --- Launcher ------------------------------------------------------------ */

.txf-launcher {
  display: flex;
  flex-direction: column;
  gap: var(--thox-space-7, 24px);
  padding: var(--thox-space-6, 20px) var(--thox-space-4, 16px);
}

.txf-launcher__heading {
  margin: 0 0 var(--thox-space-3, 12px);
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--thox-color-text-muted, #71717a);
}

.txf-launcher__grid {
  display: grid;
  gap: var(--thox-space-3, 12px);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.txf-launcher__grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.txf-launcher__grid--muted {
  margin-top: var(--thox-space-3, 12px);
  opacity: 0.75;
}

.txf-app {
  display: flex;
  align-items: flex-start;
  gap: var(--thox-space-3, 12px);
  min-height: var(--thox-target-touch, 44px);
  padding: var(--thox-space-3, 12px);
  border: 1px solid var(--thox-color-border-default, #3f3f46);
  border-radius: var(--thox-radius-md, 12px);
  background: var(--thox-color-bg-surface, #18181b);
  color: var(--thox-color-text-primary, #f9f9f9);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--thox-motion-duration-fast, 100ms);
}

.txf-app:hover:not(:disabled) {
  border-color: var(--thox-color-brand-primary, #05a451);
}

.txf-app:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.txf-app--compact {
  align-items: center;
  padding: var(--thox-space-2, 8px) var(--thox-space-3, 12px);
}

.txf-app--running {
  border-color: var(--thox-color-state-success, #05a451);
}

.txf-app__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--thox-radius-sm, 8px);
  background: var(--thox-color-bg-elevated, #27272a);
  color: var(--thox-color-text-accent, #37c77a);
}

.txf-app--compact .txf-app__icon {
  width: 26px;
  height: 26px;
}

.txf-app__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.txf-app__label {
  display: inline-flex;
  align-items: center;
  gap: var(--thox-space-2, 8px);
  font-size: 0.875rem;
  font-weight: 600;
}

.txf-app__desc {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--thox-color-text-muted, #71717a);
}

.txf-app__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--thox-radius-full, 9999px);
  background: var(--thox-color-state-success, #05a451);
}

/* --- Lists (skills, tools) ----------------------------------------------- */

.txf-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.txf-list__row {
  display: flex;
  align-items: flex-start;
  gap: var(--thox-space-4, 16px);
  padding: var(--thox-space-3, 12px) 0;
  border-bottom: 1px solid var(--thox-color-border-subtle, #27272a);
}

.txf-list__row--muted {
  opacity: 0.65;
}

.txf-list__main {
  flex: 1 1 auto;
  min-width: 0;
}

.txf-list__main .txf-block__item-title {
  display: flex;
  align-items: center;
  gap: var(--thox-space-2, 8px);
  flex-wrap: wrap;
}

/* --- Runtime ------------------------------------------------------------- */

.txf-runtime--online {
  border-color: var(--thox-color-state-success, #05a451);
  color: var(--thox-color-state-text-success, #37c77a);
}
.txf-runtime--offline {
  border-color: var(--thox-color-border-default, #3f3f46);
  color: var(--thox-color-text-muted, #71717a);
}
.txf-runtime--busy,
.txf-runtime--thinking,
.txf-runtime--updating {
  border-color: var(--thox-color-state-info, #3b82f6);
  color: var(--thox-color-state-text-info, #3b82f6);
}
.txf-runtime--warning {
  border-color: var(--thox-color-state-warning, #f59e0b);
  color: var(--thox-color-state-text-warning, #f59e0b);
}
.txf-runtime--error {
  border-color: var(--thox-color-state-danger, #ef4444);
  color: var(--thox-color-state-text-danger, #ef4444);
}

/* --- Onboarding ---------------------------------------------------------- */

.txf-onboarding {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--thox-space-9, 40px) var(--thox-space-4, 16px);
}

.txf-onboarding__progress {
  display: flex;
  gap: var(--thox-space-2, 8px);
  margin: 0 0 var(--thox-space-6, 20px);
  padding: 0;
  list-style: none;
}

.txf-onboarding__tick {
  flex: 1 1 auto;
  height: 3px;
  border-radius: var(--thox-radius-full, 9999px);
  background: var(--thox-color-bg-elevated, #27272a);
}

.txf-onboarding__tick--done {
  background: var(--thox-color-brand-primary, #05a451);
}

.txf-onboarding__tick--active {
  background: var(--thox-color-brand-hover, #37c77a);
}

@media (prefers-reduced-motion: reduce) {
  .txf-plane-nav__item,
  .txf-app {
    transition: none;
  }
}

/* --- Command palette ------------------------------------------------------ */

.txf-palette__backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  background: rgba(0, 0, 0, 0.6);
}

.txf-palette {
  width: min(36rem, calc(100vw - 2rem));
  overflow: hidden;
  border: 1px solid var(--thox-color-border-default, #3f3f46);
  border-radius: var(--thox-radius-md, 12px);
  background: var(--thox-color-bg-elevated, #27272a);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.72);
}

.txf-palette__input {
  width: 100%;
  padding: var(--thox-space-4, 16px);
  border: 0;
  border-bottom: 1px solid var(--thox-color-border-default, #3f3f46);
  background: transparent;
  color: var(--thox-color-text-primary, #f9f9f9);
  font: inherit;
  font-size: 0.95rem;
}

.txf-palette__input:focus {
  outline: none;
}

.txf-palette__input::placeholder {
  color: var(--thox-color-text-muted, #71717a);
}

.txf-palette__list {
  margin: 0;
  padding: var(--thox-space-2, 8px);
  max-height: 22rem;
  overflow-y: auto;
  list-style: none;
}

.txf-palette__item {
  display: flex;
  align-items: center;
  gap: var(--thox-space-3, 12px);
  width: 100%;
  min-height: var(--thox-target-touch, 44px);
  padding: var(--thox-space-2, 8px) var(--thox-space-3, 12px);
  border: 0;
  border-radius: var(--thox-radius-sm, 8px);
  background: transparent;
  color: var(--thox-color-text-secondary, #a1a1aa);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.txf-palette__item--active {
  background: var(--thox-color-bg-surface, #18181b);
  color: var(--thox-color-text-primary, #f9f9f9);
}

.txf-palette__label {
  flex: 1 1 auto;
}

.txf-palette__plane {
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--thox-color-text-muted, #71717a);
}

.txf-palette__shortcut {
  padding: 2px var(--thox-space-2, 8px);
  border: 1px solid var(--thox-color-border-default, #3f3f46);
  border-radius: var(--thox-radius-sm, 8px);
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  color: var(--thox-color-text-muted, #71717a);
}

.txf-palette__empty {
  margin: 0;
  padding: var(--thox-space-6, 20px);
  text-align: center;
  font-size: 0.875rem;
  color: var(--thox-color-text-muted, #71717a);
}

/* --- Mesh dispatch timeline ---------------------------------------------- */

.txf-dispatch__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.txf-dispatch__group + .txf-dispatch__group {
  margin-top: var(--thox-space-5, 20px);
}

.txf-dispatch {
  padding: var(--thox-space-3, 12px) 0;
  border-bottom: 1px solid var(--thox-color-border-subtle, #27272a);
}

.txf-dispatch:last-child {
  border-bottom: 0;
}

.txf-dispatch__head {
  display: flex;
  align-items: center;
  gap: var(--thox-space-2, 8px);
}

.txf-dispatch__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--thox-color-text-primary, #f9f9f9);
}

.txf-dispatch__state {
  margin-left: auto;
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--thox-color-text-muted, #71717a);
}

.txf-dispatch__state--running { color: var(--thox-color-state-text-info, #3b82f6); }
.txf-dispatch__state--complete { color: var(--thox-color-state-text-success, #37c77a); }
.txf-dispatch__state--failed,
.txf-dispatch__state--rejected { color: var(--thox-color-state-text-danger, #ef4444); }

.txf-dispatch__meta {
  display: flex;
  align-items: center;
  gap: var(--thox-space-2, 8px);
  flex-wrap: wrap;
  margin-top: var(--thox-space-2, 8px);
}

.txf-dispatch__locality {
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.8;
}

.txf-dispatch__meters {
  display: grid;
  gap: var(--thox-space-3, 12px);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: var(--thox-space-3, 12px);
}

.txf-meter__head {
  display: flex;
  justify-content: space-between;
  gap: var(--thox-space-2, 8px);
  margin-bottom: var(--thox-space-1, 4px);
}

.txf-meter__label {
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--thox-color-text-muted, #71717a);
}

.txf-meter__value {
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  color: var(--thox-color-text-secondary, #a1a1aa);
}

.txf-meter__track {
  height: 4px;
  border-radius: var(--thox-radius-full, 9999px);
  background: var(--thox-color-bg-elevated, #27272a);
  overflow: hidden;
}

.txf-meter__fill {
  height: 100%;
  border-radius: var(--thox-radius-full, 9999px);
  background: var(--thox-color-brand-primary, #05a451);
}

/* --- Voice ---------------------------------------------------------------
 *
 * The phase IS the label. In a hands-free mode the button is the only thing
 * telling someone whose turn it is, so it says "Listening" / "Thinking" /
 * "Speaking" rather than showing a spinner. */

.txf-voice {
  display: flex;
  align-items: center;
  gap: var(--thox-space-2, 8px);
  flex-wrap: wrap;
}

.txf-voice__button {
  gap: var(--thox-space-2, 8px);
  min-height: 44px;
}

.txf-voice__button--listening {
  border-color: var(--thox-color-brand-primary, #05a451);
}

.txf-voice__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--thox-radius-full, 9999px);
  background: var(--thox-color-text-muted, #71717a);
  flex: 0 0 auto;
}

.txf-voice__dot--listening {
  background: var(--thox-color-brand-primary, #05a451);
  animation: txf-voice-pulse 1.4s ease-in-out infinite;
}

.txf-voice__dot--sending { background: var(--thox-color-state-info, #3b82f6); }
.txf-voice__dot--speaking {
  background: var(--thox-color-state-success, #22c55e);
  animation: txf-voice-pulse 0.9s ease-in-out infinite;
}
.txf-voice__dot--failed { background: var(--thox-color-state-danger, #ef4444); }

.txf-voice__note {
  font-size: 0.6875rem;
  color: var(--thox-color-text-muted, #71717a);
}

@keyframes txf-voice-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  /* The dot still changes colour, so phase stays legible without motion. */
  .txf-voice__dot--listening,
  .txf-voice__dot--speaking { animation: none; }
}

/* --- Live preview ---------------------------------------------------------
 *
 * The frame runs model-authored code in an opaque origin (allow-scripts, and
 * deliberately no allow-same-origin). It is visually a panel like any other, so
 * a viewer can tell a running preview from a static block by its header chip,
 * not by guessing. */

.txf-preview {
  margin: var(--thox-space-4, 16px) 0;
  border: 1px solid var(--thox-color-border-default, #3f3f46);
  border-radius: var(--thox-radius-md, 12px);
  background: var(--thox-color-bg-surface, #18181b);
  overflow: hidden;
}

.txf-preview__head {
  display: flex;
  align-items: center;
  gap: var(--thox-space-2, 8px);
  padding: var(--thox-space-2, 8px) var(--thox-space-3, 12px);
  border-bottom: 1px solid var(--thox-color-border-default, #3f3f46);
}

.txf-preview__title {
  font-size: 0.6875rem;
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--thox-color-text-muted, #71717a);
}

.txf-preview__tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  margin-left: var(--thox-space-2, 8px);
}

.txf-preview__tab {
  padding: 2px var(--thox-space-2, 8px);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  font-family: var(--thox-type-family-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  color: var(--thox-color-text-muted, #71717a);
  cursor: pointer;
  white-space: nowrap;
  /* The a11y floor applies to a tab as much as to a button. */
  min-height: 44px;
}

.txf-preview__tab--active {
  border-bottom-color: var(--thox-color-brand-primary, #05a451);
  color: var(--thox-color-text-primary, #f9f9f9);
}

.txf-button--play {
  border-color: var(--thox-color-brand-primary, #05a451);
  color: var(--thox-color-text-accent, #37c77a);
}

.txf-preview__frame {
  display: block;
  width: 100%;
  /* An iframe carries an intrinsic 300px width, which would push a narrow
   * thread sideways before `width: 100%` is honoured. */
  max-width: 100%;
  border: 0;
  background: var(--thox-color-bg-canvas, #09090b);
}

/* --- Dashboard ------------------------------------------------------------ */

.txf-dashboard {
  margin: var(--thox-space-4, 16px) 0;
}

.txf-dashboard__grid {
  display: grid;
  gap: var(--thox-space-3, 12px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.txf-dashboard__grid--1 { grid-template-columns: 1fr; }
.txf-dashboard__grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.txf-dashboard__grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Tiles carry their own surface, so the block inside drops its outer margin. */
.txf-dashboard__tile > .txf-block {
  margin: 0;
  height: 100%;
}

/* --- Artifact viewer (Sandpack drop-in) ----------------------------------- */

.txf-viewer {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--thox-color-border-default, #3f3f46);
  border-radius: var(--thox-radius-md, 12px);
  background: var(--thox-color-bg-surface, #18181b);
}

.txf-viewer__tabs {
  display: flex;
  gap: var(--thox-space-1, 4px);
  padding: var(--thox-space-2, 8px);
  border-bottom: 1px solid var(--thox-color-border-default, #3f3f46);
}

.txf-viewer__tab {
  min-height: var(--thox-target-touch, 44px);
  padding: var(--thox-space-2, 8px) var(--thox-space-3, 12px);
  border: 0;
  border-radius: var(--thox-radius-sm, 8px);
  background: transparent;
  color: var(--thox-color-text-secondary, #a1a1aa);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.txf-viewer__tab--active {
  background: var(--thox-color-bg-elevated, #27272a);
  color: var(--thox-color-text-accent, #37c77a);
}

.txf-viewer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.txf-runner {
  width: 100%;
  height: 380px;
}