body {
      font-family: 'Inter', sans-serif;
    }

    /* Readability floor: the dashboard leans on Tailwind arbitrary sizes as
       small as 8px for labels/telemetry (84x text-[10px] alone), often
       stacked with uppercase + tracking-widest. Below ~12px that combo is
       genuinely hard to read, so raise the floor globally rather than
       editing every call site (including markup rendered from JS). */
    [class~="text-[8px]"],
    [class~="text-[9px]"] {
      font-size: 11px !important;
    }

    [class~="text-[10px]"] {
      font-size: 12px !important;
    }

    [class~="text-[11px]"] {
      font-size: 12.5px !important;
    }

    /* Wide letter-spacing reads fine on large headings but turns to visual
       noise once the text is this small — dial it back for those cases. */
    [class~="text-[8px]"].tracking-widest,
    [class~="text-[9px]"].tracking-widest,
    [class~="text-[10px]"].tracking-widest,
    [class~="text-[11px]"].tracking-widest {
      letter-spacing: 0.04em !important;
    }

    .material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

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

    .line-through-dim {
      text-decoration: line-through;
      text-decoration-color: #64748b;
      color: #94a3b8;
    }

    .topology-grid {
      background-image: radial-gradient(rgba(0, 218, 243, 0.05) 1px, transparent 1px);
      background-size: 24px 24px;
    }

    /* Collapsible left rail: the sidebar slides out of view and everything that
       was offset by its width (header, main) reclaims the space. */
    #side-nav {
      transition: transform .25s ease;
    }

    #top-nav,
    #main-content {
      transition: margin-left .25s ease, width .25s ease;
    }

    body.nav-collapsed #side-nav {
      transform: translateX(-100%);
    }

    body.nav-collapsed #top-nav {
      margin-left: 0;
      width: 100%;
    }

    body.nav-collapsed #main-content {
      margin-left: 0;
    }

    /* Chat composer: wraps text and grows with the content up to a ceiling. */
    #chat-input {
      resize: none;
      overflow-y: auto;
      white-space: pre-wrap;
      overflow-wrap: break-word;
      min-height: 4.5rem;
      max-height: 15rem;
      line-height: 1.5rem;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(8px)
      }

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

    .msg-enter {
      animation: fadeIn .3s ease-out;
    }

    /* Live status indicator — the one line above the composer that says what
       the system is doing right now. Motion is decorative only: every rule
       below is switched off under prefers-reduced-motion, and the indicator
       stays fully readable without it. */
    .si-icon {
      animation: si-pulse 1.8s ease-in-out infinite;
    }

    .si-bar {
      animation: si-glow 2s ease-in-out infinite;
    }

    /* A slow highlight sweeping across the phrase. The gradient needs literal
       colours (currentColor would resolve to the transparent text colour set
       right below it), so it is pinned to the `on-surface` token — which is
       what every animated phase renders in. */
    .si-shimmer {
      background: linear-gradient(100deg, #e1e2eb 0%, #e1e2eb 40%, #ffffff 50%, #e1e2eb 60%, #e1e2eb 100%);
      background-size: 220% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: si-sweep 3.2s linear infinite;
    }

    @keyframes si-pulse {

      0%,
      100% {
        opacity: .55;
        transform: scale(.96)
      }

      50% {
        opacity: 1;
        transform: scale(1.06)
      }
    }

    @keyframes si-glow {

      0%,
      100% {
        opacity: .45
      }

      50% {
        opacity: 1
      }
    }

    @keyframes si-sweep {
      0% {
        background-position: 120% 0
      }

      100% {
        background-position: -120% 0
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .si-icon,
      .si-bar,
      .si-shimmer {
        animation: none
      }

      .si-icon {
        opacity: 1;
        transform: none
      }

      .si-shimmer {
        background: none;
        color: #e1e2eb
      }
    }

    /* Tool Viewer: renders tool args/results as an indented key/value tree
       (no literal {}/[] — nested objects and arrays both recurse) and lets a
       long block collapse behind a fade with a "Show more" toggle instead of
       being cut off silently. */
    .tv-row {
      padding: 1px 0;
    }

    .tv-key {
      color: #00daf3;
      font-weight: 600;
    }

    .tv-bullet {
      color: #94a3b8;
      margin-right: 6px;
    }

    .tv-string,
    .tv-text {
      white-space: pre-wrap;
      word-break: break-word;
    }

    .tv-scalar {
      color: #40e56c;
    }

    .tv-null,
    .tv-empty {
      color: #94a3b8;
      font-style: italic;
    }

    .tv-spin {
      animation: tv-spin 1.1s linear infinite;
    }

    @keyframes tv-spin {
      to {
        transform: rotate(360deg);
      }
    }

    .tv-collapsible {
      max-height: 12rem;
      overflow: hidden;
      position: relative;
    }

    .tv-collapsible.tv-expanded {
      max-height: none;
      overflow: visible;
    }

    .tv-collapsible:not(.tv-expanded)::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2.25rem;
      background: linear-gradient(to bottom, transparent, rgba(11, 14, 20, .92));
      pointer-events: none;
    }

    /* Markdown-rendered agent messages (see renderMarkdown()). Tailwind's
       preflight strips list styling/margins, so those are restored here. */
    .md-body {
      line-height: 1.6;
    }

    .md-body>*:first-child {
      margin-top: 0;
    }

    .md-body>*:last-child {
      margin-bottom: 0;
    }

    .md-body p {
      margin: 0.5em 0;
    }

    .md-body ul,
    .md-body ol {
      margin: 0.5em 0;
      padding-left: 1.4em;
    }

    .md-body ul {
      list-style: disc;
    }

    .md-body ol {
      list-style: decimal;
    }

    .md-body li {
      margin: 0.15em 0;
    }

    .md-body h1,
    .md-body h2,
    .md-body h3,
    .md-body h4 {
      font-weight: 700;
      margin: 0.8em 0 0.4em;
      line-height: 1.3;
    }

    .md-body h1 {
      font-size: 1.25em;
    }

    .md-body h2 {
      font-size: 1.15em;
    }

    .md-body h3,
    .md-body h4 {
      font-size: 1.05em;
    }

    .md-body strong {
      font-weight: 700;
    }

    .md-body em {
      font-style: italic;
    }

    .md-body code {
      background: rgba(140, 144, 161, 0.15);
      border-radius: 4px;
      padding: 0.1em 0.35em;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.85em;
    }

    .md-body pre {
      background: rgba(140, 144, 161, 0.1);
      border: 1px solid rgba(66, 70, 86, 0.4);
      border-radius: 8px;
      padding: 0.75em 1em;
      overflow-x: auto;
      margin: 0.5em 0;
    }

    .md-body pre code {
      background: none;
      padding: 0;
    }

    .md-body blockquote {
      border-left: 2px solid rgba(140, 144, 161, 0.4);
      padding-left: 0.75em;
      margin: 0.5em 0;
      color: #c2c6d8;
    }

    .md-body hr {
      border: none;
      border-top: 1px solid rgba(66, 70, 86, 0.4);
      margin: 0.75em 0;
    }

    .md-body table {
      border-collapse: collapse;
      margin: 0.5em 0;
      width: 100%;
    }

    .md-body th,
    .md-body td {
      border: 1px solid rgba(66, 70, 86, 0.4);
      padding: 0.3em 0.6em;
      text-align: left;
    }

    /* ── Roadmap & Plan Interactive Styles ────────────────────────────────── */
    .roadmap-card {
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    }

    .roadmap-card:hover {
      border-color: rgba(0, 218, 243, 0.35);
      box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4);
    }

    .roadmap-card.highlighted {
      animation: roadmap-glow 2s ease-in-out;
      border-color: #00daf3 !important;
    }

    .roadmap-card.editing {
      border-color: rgba(0, 218, 243, 0.45) !important;
      box-shadow: 0 8px 30px -4px rgba(0, 218, 243, 0.15), 0 4px 16px rgba(0, 0, 0, 0.6) !important;
      background: rgba(29, 32, 38, 0.98) !important;
    }

    .roadmap-card.editing select {
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238c90a1'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 0.4rem center;
      background-size: 1rem;
      appearance: none;
      -webkit-appearance: none;
    }

    @keyframes roadmap-glow {
      0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 218, 243, 0);
      }
      30%, 70% {
        box-shadow: 0 0 25px 4px rgba(0, 218, 243, 0.45);
      }
    }

    .roadmap-desc-clamp {
      max-height: 4.5rem;
      overflow: hidden;
      position: relative;
      transition: max-height 0.25s ease;
    }

    .roadmap-desc-clamp.expanded {
      max-height: none;
    }

    .roadmap-desc-clamp:not(.expanded)::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2rem;
      background: linear-gradient(to bottom, transparent, rgba(16, 19, 25, 0.95));
      pointer-events: none;
    }

    /* Mini progress bar inside the status indicator main card */
    .si-mini-progress {
      height: 3px;
      border-radius: 2px;
      background: rgba(66, 70, 86, 0.3);
      overflow: hidden;
    }

    .si-mini-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #00daf3, #40e56c);
      transition: width 0.4s ease;
    }

    /* ── Accessibility & Contrast Enhancements ─────────────────────────────
       Ensure all secondary, muted, and placeholder elements meet WCAG AA
       contrast (>= 4.5:1) against dark backgrounds (#101319 / #191c22). */
    .text-\[\#424656\] {
      color: #94a3b8 !important;
    }

    .bg-\[\#424656\] {
      background-color: #64748b !important;
    }

    /* Improved contrast for form input placeholders */
    input::placeholder,
    textarea::placeholder {
      color: #94a3b8 !important;
      opacity: 0.75 !important;
    }

    /* ── Activity Rail HUD Styles ────────────────────────────────────────── */
    #activity-rail {
      box-shadow: inset 0 1px 0 0 rgba(0, 218, 243, 0.14), 0 10px 24px -6px rgba(0, 0, 0, 0.6);
    }

    /* Micro-scrollbars for activity rail horizontal scrolling */
    #activity-agents::-webkit-scrollbar,
    #activity-tools::-webkit-scrollbar {
      height: 3px;
    }

    #activity-agents::-webkit-scrollbar-track,
    #activity-tools::-webkit-scrollbar-track {
      background: rgba(22, 26, 35, 0.5);
      border-radius: 9999px;
    }

    #activity-agents::-webkit-scrollbar-thumb,
    #activity-tools::-webkit-scrollbar-thumb {
      background: rgba(148, 163, 184, 0.2);
      border-radius: 9999px;
    }

    #activity-agents:hover::-webkit-scrollbar-thumb,
    #activity-tools:hover::-webkit-scrollbar-thumb {
      background: rgba(0, 218, 243, 0.5);
    }

    /* Plan tracker: a visible thin scrollbar, since a long plan must be scrolled */
    #plan-tracker-list::-webkit-scrollbar {
      width: 4px;
    }

    #plan-tracker-list::-webkit-scrollbar-thumb {
      background: rgba(148, 163, 184, 0.25);
      border-radius: 9999px;
    }

    #plan-tracker-list:hover::-webkit-scrollbar-thumb {
      background: rgba(0, 218, 243, 0.5);
    }

    #plan-tracker-list {
      scrollbar-width: thin;
      scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
    }

    .rail-chip-busy {
      box-shadow: 0 0 16px -2px rgba(0, 218, 243, 0.35), inset 0 0 8px rgba(0, 218, 243, 0.08);
    }

    .rail-chip-selected {
      box-shadow: 0 0 12px -2px rgba(0, 218, 243, 0.3);
    }

    /* Radar ping dot for active computation */
    @keyframes railPing {
      75%, 100% {
        transform: scale(2.2);
        opacity: 0;
      }
    }

    .rail-ping-anim {
      animation: railPing 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
    }

    /* Internal tools on Work Order cards: hidden unless the viewer turned
       "Show internal agents and tools" on (state.js sets the class). */
    html:not(.show-internal) .wo-internal {
      display: none !important;
    }