/* TandemX UI library v4 (tx-ui). Shared by DemoX and the TandemX main app; both carry this exact file.
   Rules and usage: docs/UI-LIBRARY.md. Change it in one app, copy it to the other, bump the version line. */

/* ---------- Tokens ----------
   Neutral greys with no colour tint. Cobalt is used only for the primary action (send, primary button) and links.
   Light = white; Dim = classic charcoal (#212121); Dark = near-black (#0d0d0d). */
:root, [data-theme="light"] {
  --tx-bg: #ffffff; --tx-side: #f9f9f9; --tx-surface: #ffffff; --tx-raised: #f4f4f4; --tx-hover: #ececec;
  --tx-line: #e5e5e5; --tx-line-strong: #d4d4d4;
  --tx-text: #0d0d0d; --tx-sub: #5d5d5d; --tx-faint: #6e6e6e;
  --tx-accent: #2348f2; --tx-accent-ink: #ffffff; --tx-link: #2348f2; --tx-brand: #c6f432;
  --tx-bubble: #f4f4f4; --tx-ok: #127a44; --tx-ok-soft: rgba(18, 122, 68, 0.1); --tx-warn: #b4521b; --tx-warn-soft: rgba(217, 70, 29, 0.1);
  --tx-shadow: 0 8px 28px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}
[data-theme="dim"] {
  --tx-bg: #212121; --tx-side: #181818; --tx-surface: #212121; --tx-raised: #2f2f2f; --tx-hover: #353535;
  --tx-line: #383838; --tx-line-strong: #4a4a4a;
  --tx-text: #e3e3e3; --tx-sub: #b4b4b4; --tx-faint: #9a9a9a;
  --tx-accent: #4c6fff; --tx-accent-ink: #ffffff; --tx-link: #8aa2ff; --tx-brand: #c6f432;
  --tx-bubble: #303030; --tx-ok: #5fd08f; --tx-ok-soft: rgba(95, 208, 143, 0.12); --tx-warn: #ff9a6b; --tx-warn-soft: rgba(255, 154, 107, 0.12);
  --tx-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] {
  --tx-bg: #0d0d0d; --tx-side: #090909; --tx-surface: #141414; --tx-raised: #1c1c1c; --tx-hover: #242424;
  --tx-line: #262626; --tx-line-strong: #333333;
  --tx-text: #ededed; --tx-sub: #a8a8a8; --tx-faint: #8a8a8a;
  --tx-accent: #2f5bff; --tx-accent-ink: #ffffff; --tx-link: #7f9bff; --tx-brand: #c6f432;
  --tx-bubble: #1f2a52; --tx-ok: #5fd08f; --tx-ok-soft: rgba(95, 208, 143, 0.12); --tx-warn: #ff9a6b; --tx-warn-soft: rgba(255, 154, 107, 0.12);
  --tx-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
}
:root {
  --tx-font: "Geist Variable", -apple-system, "SF Pro Text", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  /* One corner scale everywhere: box (cards, panels, composer, bubbles), sm (fields, tiles, small chips), pill (buttons). */
  --tx-radius-box: 20px; --tx-radius-sm: 10px; --tx-radius: var(--tx-radius-sm); --tx-radius-lg: var(--tx-radius-box); --tx-pill: 999px;
  --tx-text-sm: 13px; --tx-text-md: 15px; --tx-text-lg: 16px;
  --tx-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Primitives ---------- */
.tx-composer { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 8px 6px 14px; border-radius: var(--tx-radius-box); background: var(--tx-raised); border: 1px solid var(--tx-line); color: var(--tx-text); font-family: var(--tx-font); }
.tx-composer textarea, .tx-composer input { flex: 1; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: var(--tx-text-lg); resize: none; }
.tx-icon-btn { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 0; border-radius: var(--tx-pill); background: transparent; color: var(--tx-sub); cursor: pointer; transition: background .15s var(--tx-ease), color .15s; }
.tx-icon-btn:hover { background: var(--tx-hover); color: var(--tx-text); }
.tx-send { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 0; border-radius: var(--tx-pill); background: var(--tx-accent); color: var(--tx-accent-ink); cursor: pointer; }
.tx-send:disabled { opacity: .35; cursor: default; }

.tx-bubble { max-width: 70%; margin-left: auto; padding: 10px 16px; border-radius: var(--tx-radius-box); background: var(--tx-bubble); color: var(--tx-text); font-size: var(--tx-text-md); line-height: 1.5; }
.tx-answer { color: var(--tx-text); font-size: var(--tx-text-md); line-height: 1.65; }
.tx-actions { display: flex; gap: 2px; margin-top: 6px; }
.tx-actions .tx-icon-btn { width: 34px; height: 34px; font-size: 15px; }

.tx-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 10px 8px; border-radius: var(--tx-radius); color: var(--tx-text); text-decoration: none; background: transparent; border: 0; width: 100%; text-align: left; font: inherit; cursor: pointer; }
.tx-row:hover { background: var(--tx-hover); }
.tx-row small { display: block; color: var(--tx-sub); font-size: var(--tx-text-sm); }
.tx-tile { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--tx-radius-sm); background: var(--tx-raised); border: 1px solid var(--tx-line); font-size: 20px; }

.tx-option { display: grid; grid-template-columns: 22px 1fr 16px; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--tx-line); border-radius: var(--tx-radius); background: transparent; color: var(--tx-text); text-align: left; font: inherit; cursor: pointer; transition: background .15s var(--tx-ease), border-color .15s; }
.tx-option:hover { background: var(--tx-hover); border-color: var(--tx-line-strong); }
.tx-option b { display: block; font-weight: 600; }
.tx-option small { color: var(--tx-sub); }

.tx-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--tx-radius-sm); font-size: 12px; font-weight: 500; background: var(--tx-raised); color: var(--tx-sub); }
.tx-badge.ok { background: var(--tx-ok-soft); color: var(--tx-ok); }
.tx-badge.warn { background: var(--tx-warn-soft); color: var(--tx-warn); }

.tx-toast { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border-radius: var(--tx-pill); background: var(--tx-raised); border: 1px solid var(--tx-line); box-shadow: var(--tx-shadow); color: var(--tx-text); font-size: 14px; }

.tx-segment { display: inline-flex; gap: 4px; }
.tx-segment button { border: 0; padding: 7px 14px; border-radius: var(--tx-pill); background: transparent; color: var(--tx-sub); font: inherit; font-size: 14px; cursor: pointer; }
.tx-segment button[aria-pressed="true"], .tx-segment button.on { background: var(--tx-raised); color: var(--tx-text); font-weight: 500; }

.tx-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--tx-pill); border: 1px solid var(--tx-line-strong); background: transparent; color: var(--tx-text); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.tx-btn:hover { background: var(--tx-hover); }
.tx-btn.primary { background: var(--tx-text); color: var(--tx-bg); border-color: transparent; }
.tx-btn.primary:hover { opacity: .88; }

.tx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tx-table th { text-align: left; font-weight: 600; color: var(--tx-sub); padding: 8px 10px; border-bottom: 1px solid var(--tx-line); }
.tx-table td { padding: 10px; border-bottom: 1px solid var(--tx-line); vertical-align: top; }
.tx-table a { color: var(--tx-link); text-decoration: none; }

.tx-footnote { color: var(--tx-sub); font-size: 12px; text-align: center; }

@media (prefers-reduced-motion: reduce) { .tx-composer, .tx-option, .tx-row, .tx-icon-btn { transition: none; } }

/* ---------- Fields and states ---------- */
/* Fields share the small corner; focus is a soft accent ring, never a hard white box. */
textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select { border-radius: var(--tx-radius-sm); }
textarea:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--tx-accent); outline-offset: 1px; }
/* Disabled buttons keep readable text and simply fade. */
button:disabled { opacity: .45; cursor: default; }

/* ---------- Hand-off route (the one distinctive element) ----------
   Who asked, who holds the request now, and whether it came back. Lime marks only the current stop. */
.tx-route { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 10px 0 12px; padding: 0; }
.tx-route-stop { position: relative; display: grid; gap: 2px; padding-top: 18px; min-width: 0; }
.tx-route-stop b { font-size: 13px; font-weight: 600; color: var(--tx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-route-stop small { font-size: 12px; color: var(--tx-sub); }
.tx-route-dot { position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: var(--tx-pill); background: var(--tx-line-strong); z-index: 1; }
.tx-route-stop.done .tx-route-dot { background: var(--tx-text); }
.tx-route-stop.now .tx-route-dot { width: 14px; height: 14px; top: -2px; left: -2px; background: var(--tx-brand); box-shadow: 0 0 0 2px var(--tx-text); }
.tx-route-line { position: absolute; top: 4px; right: 100%; width: 100%; height: 2px; background: repeating-linear-gradient(90deg, var(--tx-line-strong) 0 4px, transparent 4px 8px); }
.tx-route-line.done { background: var(--tx-text); }
.tx-route-stop.next b { color: var(--tx-sub); font-weight: 500; }

/* Product marks are images, never a source of UI colours or connection status. Their neutral plate protects
   original dark artwork across themes without recolouring the mark. Names remain visible beside them. */
.tx-company-logo { flex: 0 0 40px; overflow: hidden; color: var(--tx-sub); font-size: 13px; font-weight: 600; }
.tx-company-logo.has-asset { background: var(--tx-accent-ink); }
.tx-company-logo img { display: block; width: 24px; height: 24px; object-fit: contain; max-width: 100%; }
.tx-company-logo.compact { width: 28px; height: 28px; flex-basis: 28px; font-size: 10px; }
.tx-company-logo.compact img { width: 20px; height: 20px; }
.tx-company-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }