:root {
      --bg: #f5f5f4;
      --card: #ffffff;
      --ink: #1c1917;
      --dim: #78716c;
      --faint: #e7e5e4;
      --hairline: #e7e5e4;
      --green: #16a34a;
      --green-bg: #f0fdf4;
      --amber: #d97706;
      --amber-bg: #fffbeb;
      --red: #dc2626;
      --red-bg: #fef2f2;
      --accent: #4f46e5;
      --accent-hover: #4338ca;
      --accent-bg: #eef2ff;
      --code-bg: #1e1e2e;
      --code-ink: #cdd6f4;
      --inline-code-bg: #f3eddf;
      --inline-code-ink: #29251f;
      --inline-code-border: #ada18c;
      --radius: 12px;
      --radius-sm: 8px;
      --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
      --sidebar-w: 280px;
      --tabbar-h: 56px;
}

/* Author display rules (for example .icon-btn { display: grid }) must never
   resurrect controls that application state marked as unavailable. */
[hidden] { display: none !important; }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
    /* Drop the double-tap-to-zoom gesture (and its 300ms click delay) on
       controls only; pinch-zoom on content stays available. */
    button, a, .dm-item, .nav-item, .tabbar-item, .icon-btn, .pool-line,
    .suggestion-chip, .banner-action, .outbox-action, .app-confirm-actions button,
    .app-confirm-close, .session-health-card, textarea, input, select {
      touch-action: manipulation;
    }
    body {
      background: var(--bg);
      color: var(--ink);
      font: 15px/1.6 -apple-system, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
      font-feature-settings: "tnum";
      letter-spacing: .005em;
    }
    .num { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-feature-settings: "tnum"; }

    /* ── SPA layout ── */
    .app { display: flex; height: 100vh; height: 100dvh; }

    /* ── sidebar ── */
    .sidebar {
      width: var(--sidebar-w);
      background: var(--card);
      border-right: 1px solid var(--hairline);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      transition: transform .25s cubic-bezier(.22,1,.36,1);
    }
    .sidebar-header {
      padding: 20px 20px 16px;
      border-bottom: 1px solid var(--hairline);
    }
    .sidebar-header h1 {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .sidebar-header .live {
      display: flex; align-items: center; gap: 6px;
      font-size: 12px; color: var(--dim); margin-top: 4px;
    }
    .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
    .dot.warn { background: var(--amber); }
    .dot.crit { background: var(--red); }
    .dot.pulse { animation: pulse 1.6s ease-in-out infinite; }
    @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.85); } }

    .sidebar-nav {
      padding: 12px 12px;
      border-bottom: 1px solid var(--hairline);
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .nav-item {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 12px; border-radius: var(--radius-sm);
      font-size: 14px; color: var(--dim);
      cursor: pointer; transition: all .15s ease;
      text-decoration: none;
    }
    .nav-item:hover { background: var(--bg); color: var(--ink); }
    .nav-item.active { background: var(--accent-bg); color: var(--accent); font-weight: 550; }
    .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }

    .webmcp-panel {
      margin: 12px; padding: 12px;
      border: 1px solid #c7d2fe; border-radius: var(--radius-sm);
      background: #f5f7ff; color: var(--dim);
      display: grid; gap: 7px; font-size: 11px; line-height: 1.4;
    }
    .webmcp-panel strong { color: var(--accent); font-size: 12px; letter-spacing: .03em; }
    .webmcp-panel button {
      border: 1px solid #a5b4fc; border-radius: 7px; background: var(--card);
      color: var(--accent); padding: 7px 8px; cursor: pointer;
      font: inherit; font-size: 11px; font-weight: 600; line-height: 1.3;
    }
    .webmcp-panel button[aria-pressed="true"] { background: var(--accent); color: white; }
    .webmcp-panel button:disabled { cursor: not-allowed; opacity: .55; }
    .webmcp-panel small { color: var(--dim); }

    .sidebar-section {
      padding: 16px 20px 6px;
      font-size: 11px; font-weight: 600;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--dim);
    }
    .sidebar-list { flex: 1; overflow-y: auto; padding: 0 12px 16px; }

    .channel-item {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 12px; border-radius: var(--radius-sm);
      font-size: 14px; cursor: pointer;
      transition: all .15s ease;
    }
    .channel-item:hover { background: var(--bg); }
    .channel-item.active { background: var(--accent-bg); color: var(--accent); font-weight: 550; }
    .channel-item .hash { color: var(--dim); font-weight: 400; }
    .channel-item.active .hash { color: var(--accent); }

    .dm-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 12px; border-radius: var(--radius-sm);
      font-size: 14px; cursor: pointer;
      transition: all .15s ease;
    }
    .dm-item:hover { background: var(--bg); }
    .dm-item.active { background: var(--accent-bg); }
    .dm-avatar {
      width: 32px; height: 32px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 700; flex-shrink: 0;
    }
    .dm-avatar.codex { background: #ecfdf5; color: #059669; }
    .dm-avatar.claude { background: #fff7ed; color: #c2410c; }
    .dm-avatar.dsh { background: #eff6ff; color: #1d4ed8; }
    .dm-avatar.kimi { background: #eff6ff; color: #3b82f6; }
    .dm-avatar.grok { background: #fef3c7; color: #d97706; }
    .dm-info { flex: 1; min-width: 0; }
    .dm-name { font-weight: 550; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dm-desc { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dm-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .dm-status.on { background: var(--green); box-shadow: 0 0 0 2px var(--card); }
    .dm-status.off { background: var(--faint); }
    .dm-status.idle { background: var(--green); }
    .dm-status.working { background: var(--amber); animation: pulse 1.5s ease-in-out infinite; }
    .dm-status.agent_unavailable { background: var(--dim); }
    .dm-status.project_offline { background: var(--red); }
    .agent-loading {
      padding: 12px; color: var(--dim); font-size: 13px; text-align: center;
    }
    .chat-scope-note {
      margin: auto 16px 16px; padding: 10px 12px;
      border-radius: var(--radius-sm); background: var(--bg);
      color: var(--dim); font-size: 12px; line-height: 1.5;
    }

    /* sidebar chat-only sections hidden in dashboard view */
    .sidebar .chat-only { display: none; }
    .app.view-chat .sidebar .chat-only,
    .app.view-voice .sidebar .chat-only { display: block; }
    .app.view-chat .sidebar .chat-only.sidebar-list,
    .app.view-voice .sidebar .chat-only.sidebar-list { display: block; }

    /* ── main area ── */
    .main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg); }

    /* ── views ── */
    .view { display: none; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; }
    .view.active { display: flex; }

    /* ── dashboard view ── */
    #viewDashboard { overflow-y: auto; }
    #viewDashboard .wrap { max-width: 720px; margin: 0 auto; padding: 32px 20px 60px; width: 100%; }

    .mast { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 24px; }
    .mast h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
    .mast .live { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dim); }

    .hero { background: var(--card); border-radius: var(--radius); padding: 28px 24px; margin-bottom: 20px; box-shadow: var(--shadow); border: 1px solid var(--hairline); }
    .hero .big { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
    .hero .big em { font-style: normal; }
    .hero .big em.ok { color: var(--green); }
    .hero .big em.warn { color: var(--amber); }
    .hero .big em.crit { color: var(--red); }
    .hero .sub { margin-top: 8px; font-size: 14px; color: var(--dim); line-height: 1.5; }
    .fleet-health-summary {
      display: flex; align-items: center; gap: 7px; margin-top: 14px; padding-top: 12px;
      border-top: 1px solid var(--hairline); color: var(--dim); font-size: 12px; line-height: 1.4;
    }
    .fleet-health-summary i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
    .fleet-health-summary strong { color: var(--ink); }
    .fleet-health-summary.fleet-yellow i { background: var(--amber); }
    .fleet-health-summary.fleet-red i { background: var(--red); }

    .session-health { display: grid; gap: 10px; }
    .session-health-card {
      width: 100%; padding: 16px 18px; border: 1px solid var(--hairline); border-left: 5px solid var(--green);
      border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: var(--shadow);
      text-align: left; cursor: pointer; font: inherit; transition: transform .14s ease, box-shadow .14s ease;
    }
    .session-health-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(28,25,23,.09); }
    .session-health-card.monitor-only { cursor: default; }
    .session-health-card.monitor-only:hover { transform: none; box-shadow: var(--shadow); }
    .session-health-card.monitor-only:disabled { opacity: 1; color: var(--ink); }
    .session-health-card.notice { border-left-color: #ca8a04; }
    .session-health-card.warning { border-left-color: var(--amber); background: #fffdf5; }
    .session-health-card.critical { border-left-color: var(--red); background: #fff7f7; }
    .session-health-card.unknown { border-left-color: var(--dim); }
    .session-health-top, .session-health-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
    .session-health-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 16px/1.25 "Courier New", "PingFang SC", monospace; }
    .session-health-badge { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: 11px; font-weight: 700; }
    .session-health-card.notice .session-health-badge,
    .session-health-card.warning .session-health-badge { background: var(--amber-bg); color: var(--amber); }
    .session-health-card.critical .session-health-badge { background: var(--red-bg); color: var(--red); }
    .session-health-card.unknown .session-health-badge { background: var(--bg); color: var(--dim); }
    .session-health-meta { display: block; margin-top: 5px; color: var(--dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .session-health-meter { display: block; height: 7px; margin: 12px 0 8px; overflow: hidden; border-radius: 4px; background: var(--faint); }
    .session-health-meter i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
    .session-health-card.notice .session-health-meter i,
    .session-health-card.warning .session-health-meter i { background: var(--amber); }
    .session-health-card.critical .session-health-meter i { background: var(--red); }
    .session-health-foot strong { font-size: 18px; }
    .session-health-foot span { color: var(--dim); font-size: 11px; text-align: right; }
    .session-health-empty { width: 100%; padding: 20px; border: 1px dashed var(--hairline); border-radius: var(--radius); background: var(--card); color: var(--dim); text-align: center; font: inherit; }
    .session-health-connect { cursor: pointer; color: var(--accent); font-weight: 700; }

    .gateway-usage-card { display: block; }
    .gateway-card {
      padding: 18px; border: 1px solid var(--hairline); border-radius: var(--radius);
      background: var(--card); color: var(--ink); box-shadow: var(--shadow);
    }
    .gateway-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
    .gateway-kicker { display: block; color: var(--accent); font: 800 10px/1.2 "Courier New", monospace; letter-spacing: .12em; }
    .gateway-card-head h2 { margin-top: 7px; font: 900 20px/1.15 "Courier New", "PingFang SC", monospace; }
    .gateway-card-head p { margin-top: 5px; color: var(--dim); font-size: 12px; }
    .gateway-state { flex: none; padding: 5px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 800; }
    .gateway-state.verified, .gateway-state.live { color: var(--green); background: var(--green-bg); }
    .gateway-state.cached { color: var(--accent); background: #eef0ff; }
    .gateway-state.stale { color: var(--amber); background: var(--amber-bg); }
    .gateway-state.pending { color: var(--dim); background: var(--bg); }
    .gateway-billing { margin-top: 18px; padding: 16px; border: 1px solid var(--hairline); border-radius: calc(var(--radius) - 2px); background: var(--bg); }
    .gateway-billing-head, .gateway-billing-foot { display: flex; justify-content: space-between; gap: 12px; }
    .gateway-billing-head span, .gateway-billing-foot { color: var(--dim); font-size: 11px; }
    .gateway-billing-head strong { display: block; margin-top: 4px; font: 900 28px/1 "Courier New", monospace; }
    .gateway-billing-head strong small { font: 700 11px/1 "PingFang SC", sans-serif; }
    .gateway-billing-total { text-align: right; }
    .gateway-meter { height: 10px; margin: 16px 0 9px; overflow: hidden; border-radius: 999px; background: var(--faint); }
    .gateway-meter i { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--green); }
    .gateway-billing-foot { align-items: center; }
    .gateway-billing-foot span:first-child { color: var(--ink); font-weight: 800; }
    .gateway-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
    .gateway-fact { min-width: 0; padding: 12px; border: 1px solid var(--hairline); background: var(--card); }
    .gateway-fact > span { display: block; color: var(--dim); font-size: 10px; font-weight: 700; }
    .gateway-fact strong { display: block; margin-top: 6px; overflow: hidden; color: var(--ink); font: 900 14px/1.25 "Courier New", "PingFang SC", monospace; text-overflow: ellipsis; white-space: nowrap; }
    .gateway-fact strong.pending { color: var(--dim); }
    .gateway-fact small { display: block; margin-top: 5px; overflow: hidden; color: var(--dim); font-size: 10px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
    .gateway-warnings { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 8px; margin-top: 12px; padding: 10px 12px; border-left: 4px solid var(--amber); background: var(--amber-bg); color: #6b4b00; font-size: 11px; line-height: 1.45; }
    .gateway-warnings span { font: 900 13px/1.45 "Courier New", monospace; }
    .gateway-warnings p { margin: 0; }

    .sec { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 28px 0 12px; padding-left: 2px; }

    .svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
    .svc-column { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
    @media (max-width: 640px) {
      .svc-grid, .ext-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
      .svc-column { gap: 8px; }
    }
    .svc { background: var(--card); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); border: 1px solid var(--hairline); }
    .svc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .svc-name { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
    .svc-name span { color: var(--dim); font-weight: 400; font-size: 13px; margin-left: 6px; }
    .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
    .badge.ok { background: var(--green-bg); color: var(--green); }
    .badge.warn { background: var(--amber-bg); color: var(--amber); }
    .badge.crit { background: var(--red-bg); color: var(--red); }
    .badge.pending { background: var(--faint); color: var(--dim); }

    .meter { padding: 10px 0; }
    .meter + .meter { border-top: 1px solid var(--faint); }
    .meter .m-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
    .meter .m-label { font-size: 13px; color: var(--dim); }
    .meter .m-val { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
    .meter .m-val.ok { color: var(--ink); }
    .meter .m-val.warn { color: var(--amber); }
    .meter .m-val.crit { color: var(--red); }
    .meter .m-bar { height: 6px; background: var(--faint); border-radius: 3px; overflow: hidden; }
    .meter .m-bar > i { display: block; height: 100%; border-radius: 3px; transition: width .6s cubic-bezier(.22,1,.36,1); }
    .meter .m-bar.ok > i { background: var(--green); }
    .meter .m-bar.warn > i { background: var(--amber); }
    .meter .m-bar.crit > i { background: var(--red); }
    .meter .m-sub { font-size: 12px; color: var(--dim); margin-top: 4px; }

    .cost-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--hairline); overflow: hidden; }
    .cost { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 20px; }
    .cost + .cost { border-top: 1px solid var(--faint); }
    .cost .c-model { font-size: 14px; font-weight: 550; }
    .cost .c-model span { color: var(--dim); font-weight: 400; font-size: 12px; margin-left: 8px; }
    .cost .c-val { font-size: 15px; font-weight: 650; }
    .cost .c-val span { color: var(--dim); font-weight: 400; font-size: 12px; margin-left: 8px; }
    .cost-empty { padding: 20px; text-align: center; color: var(--dim); font-size: 14px; }
    .cost-trend-card {
      overflow: hidden; background: rgba(255,254,249,.97); border: 2px solid var(--ink);
      box-shadow: 4px 4px 0 var(--ink);
    }
    .cost-trend-head {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
      padding: 18px 20px 15px; border-bottom: 2px solid var(--ink); background: #fff8cd;
    }
    .cost-trend-kicker { margin-bottom: 4px; color: #806a00; font: 900 10px/1 "Courier New", monospace; letter-spacing: .14em; }
    .cost-trend-head h2 { margin: 0; font: 900 20px/1.1 "Courier New", "PingFang SC", monospace; letter-spacing: -.03em; }
    .cost-trend-period { padding: 5px 8px; border: 1.5px solid var(--ink); background: #ffdc45; font: 900 10px/1 "Courier New", "PingFang SC", monospace; }
    .cost-range-switch { display: inline-grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
    .cost-range-switch button {
      min-width: 66px; padding: 7px 11px; border: 0; border-right: 2px solid var(--ink); border-radius: 0;
      background: #fffef9; color: var(--ink); box-shadow: none; font: 900 11px/1 "Courier New", "PingFang SC", monospace;
    }
    .cost-range-switch button:last-child { border-right: 0; }
    .cost-range-switch button:hover { transform: none; box-shadow: none; }
    .cost-range-switch button.active { background: #ded8ff; box-shadow: inset 0 -3px 0 var(--ink); }
    #costTodayView[hidden], #costTrendView[hidden] { display: none !important; }
    .cost-trend-summary { display: grid; grid-template-columns: 1.3fr 1fr 1fr; border-bottom: 1px solid #d8d3c5; }
    .cost-trend-summary > div { min-width: 0; padding: 13px 20px; border-right: 1px solid #d8d3c5; }
    .cost-trend-summary > div:last-child { border-right: 0; }
    .cost-trend-summary span { display: block; margin-bottom: 3px; color: var(--dim); font-size: 10px; font-weight: 700; }
    .cost-trend-summary strong { font-size: 17px; }
    .cost-trend-plot {
      display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: stretch; gap: 12px;
      height: 238px; padding: 30px 22px 12px;
      background-image: repeating-linear-gradient(to top, transparent 0, transparent 44px, rgba(25,24,21,.09) 45px, transparent 46px);
    }
    .cost-trend-plot.range-30 { grid-template-columns: repeat(30, minmax(5px, 1fr)); gap: 5px; }
    .cost-trend-column { position: relative; min-width: 0; display: grid; grid-template-rows: 18px minmax(0, 1fr) 20px; align-items: end; }
    .cost-trend-value { align-self: start; justify-self: center; font-size: 10px; font-weight: 900; }
    .cost-trend-bar {
      width: min(100%, 58px); min-height: 8px; margin: 0 auto; display: flex; flex-direction: column-reverse;
      overflow: hidden; border: 2px solid var(--ink); background: #ebe7db; transition: height .32s cubic-bezier(.2,.8,.2,1), transform .15s ease;
    }
    .cost-trend-bar.is-zero { min-height: 0; border: 0; }
    .range-30 .cost-trend-bar { border-width: 1.5px; }
    .cost-trend-column:hover .cost-trend-bar { transform: translateY(-3px); }
    .cost-trend-column.is-today .cost-trend-bar { box-shadow: 3px 0 0 #ee4b43; }
    .cost-trend-bar i { display: block; min-height: 2px; border-top: 1px solid rgba(25,24,21,.34); }
    .cost-trend-bar i:last-child { border-top: 0; }
    .cost-trend-label { align-self: end; justify-self: center; white-space: nowrap; color: var(--dim); font: 700 9px/1 "Courier New", monospace; }
    .cost-trend-column.is-today .cost-trend-label { color: var(--ink); font-weight: 900; }
    .cost-trend-foot { padding: 13px 20px 15px; border-top: 1px solid #d8d3c5; }
    .cost-trend-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; }
    .cost-trend-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: 10px; font-weight: 700; }
    .cost-trend-legend i { width: 10px; height: 10px; border: 1.5px solid var(--ink); }
    .cost-trend-source-note { margin-top: 11px; color: var(--dim); font-size: 10px; line-height: 1.5; }
    .cost-trend-source-note span { margin-right: 7px; padding: 2px 6px; border: 1.5px solid var(--ink); background: #ded8ff; color: var(--ink); font: 900 9px/1 "Courier New", monospace; }
    .cost-trend-plot.is-empty { display: grid; grid-template-columns: 1fr; place-items: center; }
    .cost-trend-empty { color: var(--dim); font-size: 12px; font-weight: 700; text-align: center; }
    .cost-trend-selected {
      display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
      margin: 10px 20px 12px; padding: 9px 12px;
      border: 1.5px solid var(--ink); background: #fffef9;
      font-size: 11px; line-height: 1.35;
    }
    .cost-trend-selected:empty { display: none; }
    .cost-trend-selected strong { font: 900 12px/1.2 "Courier New", monospace; }
    .cost-trend-selected span { color: var(--dim); }
    .cost-detail-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
    .cost-detail-heading { margin: 0 0 12px !important; }
    .sec-with-note { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
    .sec-with-note > span:last-child { color: var(--dim); font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; }
    .cli-cost-card { margin-bottom: 2px; }
    .cli-cost { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
    .cli-cost .cli-avatar {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 2px solid var(--ink);
      border-radius: 2px;
      background: #ded8ff;
      color: var(--ink);
      box-shadow: 2px 2px 0 var(--ink);
      font: 900 14px/1 "Courier New", monospace;
    }
    .cli-cost .cli-codex { background: #d9f6c9; }
    .cli-cost .cli-hermes { background: #ffdc45; }
    .cli-cost .cli-claude-code { background: #ffd0b8; }
    .cli-cost .cli-grok-cli { background: #d7d0c2; }
    .cli-cost .cli-kimi-code { background: #bfe7ff; }
    .cli-cost .cli-gemini-cli { background: #cdd8ff; }
    .cli-cost .cli-device { background: #cdd8ff; }
    .cli-cost.is-error { background: var(--red-bg); }
    .cli-cost .c-model { min-width: 0; }
    .cli-cost .c-model > span { display: block; margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    @media (max-width: 520px) {
      .sec-with-note { align-items: flex-start; flex-direction: column; gap: 3px; }
      .cli-cost { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
      .cli-cost .c-val { grid-column: 2; display: flex; justify-content: space-between; gap: 8px; width: 100%; }
      .cli-cost .c-val span { margin-left: 0; }
      .cost-trend-head { padding: 15px 14px 13px; }
      .cost-trend-head h2 { font-size: 17px; }
      .cost-range-switch button { min-width: 52px; padding-inline: 8px; }
      .cost-trend-summary > div { padding: 10px 11px; }
      .cost-trend-summary strong { font-size: 14px; }
      .cost-trend-plot { height: 210px; gap: 7px; padding: 24px 12px 10px; }
      .cost-trend-plot.range-30 { gap: 2px; overflow: hidden; }
      .range-30 .cost-trend-bar { border-width: 1px; }
      .cost-trend-foot { padding: 12px 14px 14px; }
      .cost-detail-toolbar { display: block; }
      .cost-detail-toolbar .cost-mode-switch { display: grid; width: 100%; }
      .cost-detail-toolbar .cost-mode-switch button { min-width: 0; }
    }

    .pool-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--hairline); overflow: hidden; }
    .pool-line { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; }
    .pool-line + .pool-line { border-top: 1px solid var(--faint); }
    .pool-line .p-name { font-size: 14px; font-weight: 550; }
    .pool-line .p-count { font-size: 14px; color: var(--dim); }
    .pool-detail { padding: 0 20px 16px; font-size: 12px; color: var(--dim); }
    .pool-detail > div { display: flex; justify-content: space-between; gap: 16px; margin-top: 5px; }
    .pool-detail strong { color: var(--ink); font-size: 13px; }
    .pool-detail .pool-note { display: block; color: var(--dim); opacity: .85; }
    .pool-detail .pool-note.secondary { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--faint); }
    .newapi-health-summary { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--faint); }
    .newapi-health-stat { padding: 16px 20px 14px; border-right: 1px solid var(--faint); }
    .newapi-health-stat:last-child { border-right: 0; }
    .newapi-health-stat strong { display: block; color: var(--ink); font-size: 21px; line-height: 1.1; }
    .newapi-health-stat span { display: block; margin-top: 6px; color: var(--dim); font-size: 11px; }
    .newapi-health-section { border-bottom: 1px solid var(--faint); }
    .newapi-health-section-head { display: flex; justify-content: space-between; gap: 16px; padding: 13px 20px 7px; color: var(--dim); font-size: 12px; }
    .newapi-health-section-head strong { color: var(--ink); font-size: 13px; }
    .newapi-health-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 15px; padding: 10px 20px; border-top: 1px solid var(--faint); }
    .newapi-health-model { display: flex; align-items: center; gap: 9px; min-width: 0; }
    .newapi-health-model > span:last-child { display: flex; flex-direction: column; min-width: 0; }
    .newapi-health-model strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
    .newapi-health-model small { overflow: hidden; margin-top: 3px; color: var(--dim); font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
    .newapi-rank { display: inline-grid; width: 21px; height: 21px; flex: 0 0 21px; place-items: center; border-radius: 50%; background: var(--faint); color: var(--dim); font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
    .newapi-health-rate { display: flex; min-width: 124px; flex-direction: column; align-items: flex-end; }
    .newapi-health-rate strong { color: var(--ink); font-size: 13px; }
    .newapi-health-rate small { margin-top: 3px; color: var(--dim); font-size: 10px; }
    .newapi-health-empty { padding: 15px 20px 17px; color: var(--dim); font-size: 12px; }
    .newapi-pool-detail { padding-bottom: 14px; }

    .cpa-diagnostics { margin-top: 18px; }
    .cpa-diagnostics-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--faint); }
    .cpa-diagnostics-head h2 { margin: 0; color: var(--ink); font: 900 14px/1.4 "Courier New", "PingFang SC", monospace; }
    .cpa-diagnostics-head p { margin: 5px 0 0; color: var(--dim); font-size: 11px; }
    .cpa-diagnostics-head button { flex: 0 0 auto; border: 2px solid var(--ink); padding: 8px 10px; background: #ffdc45; color: var(--ink); box-shadow: 2px 2px 0 var(--ink); font: 800 11px/1.2 "PingFang SC", sans-serif; }
    .cpa-diagnostics-head button:disabled { opacity: .6; cursor: wait; box-shadow: none; }
    .cpa-diagnostics-section + .cpa-diagnostics-section { border-top: 1px solid var(--faint); }
    .cpa-diagnostics-section h3 { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin: 0; padding: 13px 20px 9px; color: var(--ink); font-size: 12px; }
    .cpa-diagnostics-section h3 > span { color: var(--dim); font-size: 10px; font-weight: 500; }
    .cpa-check-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--faint); }
    .cpa-check-label { min-width: 0; }
    .cpa-check-label strong, .cpa-latency-row > strong { display: block; overflow-wrap: anywhere; color: var(--ink); font: 700 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
    .cpa-check-label small, .cpa-check-timing small { display: block; margin-top: 4px; color: var(--dim); font-size: 10px; line-height: 1.4; }
    .cpa-check-timing { text-align: right; white-space: nowrap; }
    .cpa-check-timing strong { color: var(--ink); font-size: 12px; }
    .cpa-check-row .badge { justify-self: end; white-space: nowrap; }
    .cpa-latency-row { padding: 11px 20px; border-top: 1px solid var(--faint); }
    .cpa-latency-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 7px; color: var(--dim); font-size: 11px; }
    .cpa-latency-stats strong { margin-left: 5px; color: var(--ink); }
    .cpa-latency-note { margin: 7px 0 0; color: var(--dim); font-size: 10px; line-height: 1.5; }
    .cpa-diagnostics-note, .cpa-diagnostics-error { margin: 0; padding: 11px 20px; color: var(--dim); font-size: 11px; line-height: 1.6; }
    .cpa-diagnostics-note { border-top: 1px solid var(--faint); background: rgba(255,220,69,.12); }
    .cpa-diagnostics-error { background: var(--red-bg); color: var(--red); }
    @media (max-width: 520px) {
      .cpa-diagnostics-head { align-items: flex-start; flex-wrap: wrap; padding-inline: 14px; }
      .cpa-diagnostics-section h3, .cpa-latency-row, .cpa-diagnostics-note, .cpa-diagnostics-error { padding-inline: 14px; }
      .cpa-check-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding-inline: 14px; }
      .cpa-check-row .badge { grid-column: 1 / -1; justify-self: start; }
    }

    /* ── Model API pool: tactile one-click configs in the dashboard language ── */
    .api-pool-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
    .api-pool-heading .sec { flex: 1; margin: 0; }
    .api-pool-view-switch, .api-protocol-switch { display: inline-grid; grid-auto-flow: column; gap: 0; border: 2px solid var(--ink); background: #fff; box-shadow: 3px 3px 0 var(--ink); }
    .api-pool-view-switch button, .api-protocol-switch button { min-width: 88px; border: 0; border-radius: 0; padding: 8px 12px; background: #fff; box-shadow: none; font: 900 11px/1 "Courier New", monospace; }
    .api-pool-view-switch button + button, .api-protocol-switch button + button { border-left: 2px solid var(--ink); }
    .api-pool-view-switch button.active, .api-protocol-switch button.active { background: #ffdc45; color: var(--ink); }
    .api-pool-view { animation: api-pool-in .18s ease-out; }
    @keyframes api-pool-in { from { opacity: 0; transform: translateY(5px); } }
    .api-pool-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
    .api-pool-search { display: flex; min-width: 0; flex: 1; align-items: center; gap: 9px; border: 2px solid var(--ink); background: #fff; padding: 9px 12px; box-shadow: 3px 3px 0 var(--ink); }
    .api-pool-search > span { font: 900 20px/1 "Courier New", monospace; transform: rotate(-15deg); }
    .api-pool-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 700 13px/1.3 "Courier New", "PingFang SC", monospace; }
    .api-pool-search input::placeholder { color: #948d82; }
    .api-pool-count { flex: 0 0 auto; border: 2px solid var(--ink); background: #f98bb5; padding: 10px 12px; box-shadow: 3px 3px 0 var(--ink); font: 900 11px/1 "Courier New", monospace; }
    .api-family-filter { display: flex; gap: 7px; margin: 14px 0; overflow-x: auto; padding: 0 3px 4px 0; scrollbar-width: thin; }
    .api-family-filter button { flex: 0 0 auto; border: 2px solid var(--ink); border-radius: 0; padding: 7px 10px; background: #fff; box-shadow: 2px 2px 0 var(--ink); font: 900 10px/1 "Courier New", "PingFang SC", monospace; }
    .api-family-filter button.active { background: #d9f6c9; transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
    .api-platform-filter { margin: -4px 0 14px; }
    .api-platform-filter button { border: 1px solid #d8d5ce; border-radius: 4px; padding: 5px 9px; box-shadow: none; color: var(--dim); font-size: 10px; }
    .api-platform-filter button.active { border-color: var(--ink); background: #f0efe8; color: var(--ink); transform: none; box-shadow: none; }
    .api-model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .api-model-card { position: relative; display: flex; min-width: 0; min-height: 92px; flex-direction: column; align-items: stretch; justify-content: space-between; border: 2px solid var(--ink); border-radius: 0; padding: 13px 14px 12px; overflow: hidden; background: #fff; color: var(--ink); text-align: left; box-shadow: 4px 4px 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
    .api-model-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; background: #ffdc45; }
    .api-model-card[data-family-tone="green"]::before { background: #64d990; }
    .api-model-card[data-family-tone="blue"]::before { background: #9dcfff; }
    .api-model-card[data-family-tone="pink"]::before { background: #f98bb5; }
    .api-model-card[data-family-tone="lilac"]::before { background: #c7b9ff; }
    .api-model-card:hover, .api-model-card:focus-visible { transform: translate(-1px, -1px); background: #fffdf2; box-shadow: 6px 6px 0 var(--ink); outline: 0; }
    .api-model-card:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
    .api-model-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 9px 4px; }
    .api-model-tags span { padding: 3px 6px; border: 1px solid #d8d5ce; background: #f7f6f2; color: var(--dim); font: 800 10px/1.2 "PingFang SC", sans-serif; }
    .api-model-card strong { display: block; padding-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 13px/1.25 "Courier New", monospace; }
    .api-model-card small { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-left: 4px; color: var(--dim); font: 800 9px/1.2 "Courier New", "PingFang SC", monospace; }
    .api-model-card small b { color: var(--green); font-size: 10px; }
    .api-model-empty { grid-column: 1 / -1; border: 2px dashed var(--ink); padding: 28px; text-align: center; color: var(--dim); font: 800 12px/1.5 "Courier New", monospace; }
    .api-pool-footnote { margin-top: 15px; padding: 10px 12px; border-left: 6px solid #ffdc45; background: rgba(255,220,69,.16); color: var(--dim); font-size: 11px; }

    .api-config-layer { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 22px; }
    .api-config-layer[hidden] { display: none; }
    .api-config-scrim { position: absolute; inset: 0; background: rgba(28,25,23,.64); backdrop-filter: blur(3px); }
    .api-config-sheet { position: relative; width: min(720px, 100%); max-height: min(820px, calc(100dvh - 36px)); overflow: auto; border: 3px solid var(--ink); background: #fffdf7; box-shadow: 10px 10px 0 var(--ink); color: var(--ink); animation: api-config-rise .2s cubic-bezier(.2,.8,.2,1); }
    @keyframes api-config-rise { from { opacity: 0; transform: translateY(18px) rotate(-.3deg); } }
    .api-config-tape { position: absolute; z-index: 2; top: -3px; left: 50%; width: 116px; height: 22px; border: 2px solid var(--ink); background: #f98bb5; transform: translate(-50%, -45%) rotate(-1deg); }
    .api-config-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 29px 28px 20px; border-bottom: 3px solid var(--ink); background: #ffdc45; }
    .api-config-eyebrow { margin-bottom: 5px; font: 900 10px/1 "Courier New", monospace; letter-spacing: .1em; }
    .api-config-head h2 { overflow-wrap: anywhere; font: 900 clamp(20px, 4vw, 30px)/1.1 "Courier New", "PingFang SC", monospace; letter-spacing: -.03em; }
    .api-config-head p { margin-top: 7px; color: #554f45; font: 800 11px/1.3 "Courier New", "PingFang SC", monospace; }
    .api-config-close { width: 38px; height: 38px; flex: 0 0 38px; border: 2px solid var(--ink); border-radius: 0; padding: 0; background: #fff; box-shadow: 3px 3px 0 var(--ink); font: 900 25px/1 "Courier New", monospace; }
    .api-config-body { padding: 22px 28px 26px; }
    .api-protocol-switch { margin-bottom: 20px; }
    .api-config-loading, .api-config-error, .api-config-auth { border: 2px solid var(--ink); padding: 18px; background: #fff; box-shadow: 4px 4px 0 var(--ink); font: 800 12px/1.5 "Courier New", "PingFang SC", monospace; }
    .api-config-loading::before { content: '↻'; display: inline-block; margin-right: 8px; animation: api-spin 1s linear infinite; }
    @keyframes api-spin { to { transform: rotate(360deg); } }
    .api-config-error { border-color: var(--red); background: var(--red-bg); color: var(--red); box-shadow: 4px 4px 0 var(--red); }
    .api-config-auth strong, .api-config-auth span { display: block; }
    .api-config-auth span { margin-top: 4px; color: var(--dim); }
    .api-config-auth > div { display: flex; gap: 8px; margin-top: 13px; }
    .api-config-auth input { min-width: 0; flex: 1; border: 2px solid var(--ink); border-radius: 0; padding: 9px 10px; background: #fff; font: 12px/1.2 "Courier New", monospace; }
    .api-config-auth button { border: 2px solid var(--ink); border-radius: 0; background: #d9f6c9; box-shadow: 2px 2px 0 var(--ink); }
    .api-config-fields { display: grid; gap: 13px; }
    .api-config-fields > label > span { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font: 900 10px/1 "Courier New", monospace; letter-spacing: .08em; }
    .api-config-fields > label > span b { border: 1px solid var(--ink); background: #d9f6c9; padding: 3px 6px; color: var(--ink); letter-spacing: 0; }
    .api-config-fields > label > div { display: flex; align-items: stretch; border: 2px solid var(--ink); background: #fff; box-shadow: 3px 3px 0 var(--ink); }
    .api-config-fields code, .api-config-fields input { min-width: 0; flex: 1; overflow: hidden; border: 0; padding: 11px 12px; background: transparent; color: var(--ink); font: 800 12px/1.4 "Courier New", monospace; text-overflow: ellipsis; white-space: nowrap; }
    .api-config-fields label button { flex: 0 0 auto; border: 0; border-left: 2px solid var(--ink); border-radius: 0; background: #fff; box-shadow: none; padding: 8px 11px; }
    .api-config-fields label button:hover { background: #ffdc45; }
    .api-config-policy { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--ink); background: #d9f6c9; box-shadow: 3px 3px 0 var(--ink); }
    .api-config-policy > * { padding: 9px 8px; text-align: center; font: 900 10px/1.2 "Courier New", "PingFang SC", monospace; }
    .api-config-policy > * + * { border-left: 2px solid var(--ink); }
    .api-config-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; }
    .api-config-actions button { border: 2px solid var(--ink); border-radius: 0; box-shadow: 3px 3px 0 var(--ink); }
    .api-config-actions button.primary { background: var(--ink); color: #fff !important; }
    .api-config-security { color: var(--dim); font-size: 10px; line-height: 1.5; }
    .api-config-toast { min-height: 22px; padding: 0 28px 18px; color: var(--green); font: 900 11px/1.3 "Courier New", "PingFang SC", monospace; }

    @media (max-width: 520px) {
      .api-pool-heading { align-items: stretch; flex-direction: column; }
      .api-pool-view-switch { align-self: stretch; }
      .api-pool-view-switch button { width: 50%; }
      .api-pool-toolbar { align-items: stretch; flex-direction: column; }
      .api-pool-count { align-self: flex-start; }
      .api-model-grid { grid-template-columns: 1fr; }
      .api-model-card { min-height: 82px; }
      .api-config-layer { align-items: end; padding: 0; }
      .api-config-sheet { width: 100%; max-height: 92dvh; border-width: 3px 0 0; box-shadow: none; }
      .api-config-head { padding: 25px 17px 17px; }
      .api-config-body { padding: 18px 16px 22px; }
      .api-protocol-switch { display: grid; width: 100%; grid-template-columns: 1fr 1fr; }
      .api-protocol-switch button { min-width: 0; }
      .api-config-auth > div { flex-direction: column; }
      .api-config-policy { grid-template-columns: 1fr 1fr; }
      .api-config-policy > *:nth-child(3) { border-top: 2px solid var(--ink); border-left: 0; }
      .api-config-policy > *:nth-child(4) { border-top: 2px solid var(--ink); }
      .api-config-actions { display: grid; grid-template-columns: 1fr 1fr; }
      .api-config-actions button:first-child { grid-column: 1 / -1; }
      .api-config-toast { padding: 0 16px 16px; }
    }

    .ext-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .ext-card { background: var(--card); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); border: 1px solid var(--hairline); }
    .ext-card .s-title { font-size: 15px; font-weight: 650; }
    .ext-card .s-desc { font-size: 13px; color: var(--dim); margin-top: 4px; line-height: 1.5; }
    .ext-card .s-tag { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 550; color: var(--accent); }
    .ext-card.disabled { opacity: .5; }
    .ext-card.disabled .s-tag { color: var(--dim); }

    .foot { margin-top: 32px; padding: 16px 0; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--dim); }
    .foot .actions { display: flex; gap: 8px; }
    button {
      font: 600 13px/1 inherit; letter-spacing: .02em;
      color: var(--ink); background: var(--card); border: 1px solid var(--faint);
      border-radius: 8px; padding: 8px 16px; cursor: pointer;
      transition: all .15s ease; box-shadow: var(--shadow);
    }
    button:hover { border-color: var(--dim); }
    button.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
    button.primary:hover { background: #292524; }
    button:disabled { opacity: .35; cursor: default; }

    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }

    /* ── chat view ── */
    #viewChat {
      position: relative;
      min-height: 0;
      min-width: 0;
      overflow: hidden;
    }
    .chat-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 16px;
      background: var(--card);
      border-bottom: 1px solid var(--hairline);
      flex-shrink: 0;
      position: relative; z-index: 21;
      gap: 10px;
      min-width: 0;
    }
    .chat-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
    .chat-header-meta { min-width: 0; flex: 1; }
    .chat-title-row {
      display: flex; align-items: center; gap: 8px; min-width: 0;
    }
    .chat-agent-avatar {
      width: 34px; height: 34px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; font-weight: 700; flex-shrink: 0;
    }
    .chat-agent-avatar.codex { background: #ecfdf5; color: #059669; }
    .chat-agent-avatar.claude { background: #fff7ed; color: #c2410c; }
    .chat-agent-avatar.dsh { background: #eff6ff; color: #1d4ed8; }
    .chat-agent-avatar.kimi { background: #eff6ff; color: #3b82f6; }
    .chat-agent-avatar.grok { background: #fef3c7; color: #d97706; }
    .chat-title {
      font-size: 15px; font-weight: 650; letter-spacing: -0.01em;
      min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .chat-subtitle {
      font-size: 12px; color: var(--dim); margin-top: 1px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .chat-header-right { display: flex; gap: 6px; flex-shrink: 0; }
    .font-settings-btn {
      width: 34px; height: 34px; padding: 0;
      border-radius: var(--radius-sm);
      border: 1px solid var(--chat-term-border, var(--faint));
      background: var(--chat-term-panel, var(--card));
      color: var(--chat-term-dim, var(--dim));
      font: 600 13px/1 "SF Mono", ui-monospace, Menlo, monospace;
      letter-spacing: -.08em;
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all .15s ease;
    }
    .font-settings-btn:hover,
    .font-settings-btn[aria-expanded="true"] {
      color: var(--chat-term-fg, var(--ink));
      border-color: var(--chat-term-blue, var(--dim));
      background: var(--faint);
    }
    .icon-btn {
      width: 34px; height: 34px; border-radius: var(--radius-sm);
      border: 1px solid var(--faint); background: var(--card);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all .15s ease; color: var(--dim);
    }
    .icon-btn:hover { border-color: var(--dim); color: var(--ink); background: var(--bg); }
    .icon-btn.danger { color: var(--red); border-color: rgba(220,38,38,.32); }
    .icon-btn.danger:hover {
      color: var(--red); border-color: var(--red); background: var(--red-bg);
    }
    .icon-btn.danger[aria-busy="true"] { animation: stop-pulse 1s ease-in-out infinite; }
    @keyframes stop-pulse { 50% { opacity: .48; } }
    /* Keep compact controls readable even when a browser reset changes SVG defaults. */
    .icon-btn > svg,
    .send-btn > svg,
    .voice-btn > svg {
      display: block;
      flex: 0 0 auto;
      overflow: visible;
    }
    #viewChat .icon-btn > svg {
      width: 18px; height: 18px;
      stroke: currentColor;
    }
    #viewChat .send-btn > svg {
      width: 17px; height: 17px;
      stroke: currentColor;
    }
    #viewChat .send-btn:disabled {
      opacity: 1;
      background: #252b57;
      color: #77809c;
      border: 1px solid #303b68;
    }

    .chat-mode-pill {
      flex-shrink: 0; padding: 2px 8px;
      border-radius: 999px; background: var(--bg); color: var(--dim);
      font-size: 11px; font-weight: 600; white-space: nowrap;
    }
    .chat-mode-pill.tmux, .chat-mode-pill.ccb { background: var(--green-bg); color: var(--green); }
    .chat-mode-pill.readonly { background: var(--amber-bg); color: var(--amber); }
    .chat-mode-pill.remote { background: var(--accent-bg); color: var(--accent); }
    .mobile-session-picker { display: none; flex-shrink: 0; }
    .font-settings-panel {
      position: absolute; top: 58px; right: 12px; z-index: 26;
      width: min(300px, calc(100vw - 24px));
      padding: 14px;
      border: 1px solid var(--chat-term-border);
      border-radius: 12px;
      background: rgba(22,27,34,.98);
      color: var(--chat-term-fg);
      box-shadow: 0 16px 44px rgba(0,0,0,.42);
    }
    .font-settings-panel[hidden] { display: none; }
    .font-settings-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 12px; font-size: 13px;
    }
    .font-settings-close {
      width: 26px; height: 26px; padding: 0; border: 0;
      background: transparent; color: var(--chat-term-dim);
      box-shadow: none; font-size: 20px; line-height: 1; cursor: pointer;
    }
    .font-settings-close:hover { color: var(--chat-term-fg); background: var(--faint); }
    .font-setting-row { display: block; margin-top: 10px; color: var(--chat-term-dim); font-size: 12px; }
    .font-setting-row > span { display: flex; justify-content: space-between; margin-bottom: 6px; }
    .font-setting-row output { color: var(--chat-term-blue); font-family: "SF Mono", ui-monospace, Menlo, monospace; }
    .font-setting-row select {
      width: 100%; padding: 7px 9px; border: 1px solid var(--chat-term-border);
      border-radius: 7px; background: var(--chat-term-bg); color: var(--chat-term-fg);
      font: inherit; color-scheme: light;
    }
    .font-setting-row input[type="range"] { width: 100%; accent-color: var(--chat-term-blue); }
    .font-settings-note { margin-top: 11px; color: var(--chat-term-dim); font-size: 11px; line-height: 1.4; }
    .font-settings-reset {
      width: 100%; margin-top: 11px; padding: 7px 9px;
      border-color: var(--chat-term-border); background: var(--chat-term-bg);
      color: var(--chat-term-blue); box-shadow: none; font-size: 12px;
    }

    /* Workspace body: either transcript log OR live terminal (never both) */
    .chat-body {
      flex: 1 1 auto;
      min-height: 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .messages {
      flex: 1 1 auto;
      min-height: 0;
      min-width: 0;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 12px 16px 14px;
      display: flex; flex-direction: column; gap: 2px;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
    }
    /* Controllable tmux: terminal only — hide the chat log dual pane */
    .chat-body.has-terminal .messages {
      display: none !important;
    }
    .chat-body.has-embed .messages,
    .chat-body.has-embed .chat-terminal-panel {
      display: none !important;
    }
    .chat-embed-panel {
      display: none;
      flex: 1 1 auto;
      min-height: 0;
      min-width: 0;
      position: relative;
      background: #0b0f14;
    }
    .chat-body.has-embed .chat-embed-panel:not([hidden]) {
      display: flex;
      flex-direction: column;
    }
    .chat-embed-toolbar {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--hairline);
      background: #f8fafc;
    }
    .chat-embed-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .chat-embed-copy strong {
      font-size: 13px;
      color: var(--ink, #111);
    }
    .chat-embed-copy span {
      font-size: 11px;
      line-height: 1.35;
      color: var(--dim, #666);
    }
    .chat-embed-open {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 14px;
      border: 2px solid var(--ink, #111);
      background: #2563eb;
      color: #fff !important;
      text-decoration: none !important;
      font-size: 13px;
      font-weight: 700;
      box-shadow: 3px 3px 0 var(--ink, #111);
    }
    .chat-embed-offline {
      flex-shrink: 0;
      padding: 8px 12px;
      font-size: 12px;
      color: #92400e;
      background: var(--amber-bg);
      border-bottom: 1px solid var(--hairline);
    }
    .chat-embed-frame {
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
      border: 0;
      background: #0b0f14;
    }
    #viewChat.has-embed-agent .input-area {
      display: none;
    }
    .chat-banner, .chat-error {
      flex-shrink: 0; padding: 5px 12px; font-size: 11px; line-height: 1.4;
      border-bottom: 1px solid var(--hairline);
    }
    .chat-banner { color: #92400e; background: var(--amber-bg); }
    .chat-banner.epoch { color: var(--accent); background: var(--accent-bg); }
    .chat-banner.typing { color: var(--dim); background: var(--card); }
    .banner-action {
      margin-left: 8px; padding: 4px 8px; box-shadow: none;
      color: var(--accent); border-color: rgba(79,70,229,.25);
    }
    .chat-error { color: var(--red); background: var(--red-bg); }
    .token-gate {
      position: absolute; inset: 0; z-index: 30;
      display: flex; align-items: center; justify-content: center;
      padding: 20px; background: rgba(245,245,244,.96);
    }
    .token-gate[hidden] { display: none; }
    #viewChat.token-gated .chat-body,
    #viewChat.token-gated .input-area,
    #viewChat.token-gated .mobile-session-picker {
      visibility: hidden;
      pointer-events: none;
    }
    .token-card {
      width: min(420px, 100%); padding: 24px;
      border: 1px solid var(--hairline); border-radius: var(--radius);
      background: var(--card); box-shadow: var(--shadow);
      display: flex; flex-direction: column; gap: 12px;
    }
    .token-title { font-size: 18px; font-weight: 650; }
    .token-desc { color: var(--dim); font-size: 13px; }
    .token-card input {
      width: 100%; padding: 11px 12px;
      border: 1px solid var(--faint); border-radius: var(--radius-sm);
      /* 16px keeps iOS Safari from zooming the page on focus. */
      font: 16px/1.4 "SF Mono", ui-monospace, Menlo, monospace;
      outline: none;
    }
    .token-card input:focus { border-color: var(--accent); }
    .messages::-webkit-scrollbar { width: 6px; }
    .messages::-webkit-scrollbar-track { background: transparent; }
    .messages::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 3px; }
    .messages::-webkit-scrollbar-thumb:hover { background: var(--dim); }

    .chat-terminal-panel {
      flex: 0 0 auto;
      min-height: 0;
      min-width: 0;
      display: none;
      flex-direction: column;
      overflow: hidden;
      margin: 0;
      border: 0;
      border-radius: 0;
      background: var(--card);
      color: var(--ink);
    }
    .chat-body.has-terminal .chat-terminal-panel:not([hidden]) {
      display: flex;
      flex: 1 1 auto;
      min-height: 0;
    }
    .chat-terminal-panel[hidden] { display: none !important; }
    .chat-terminal-status {
      flex-shrink: 0;
      padding: 4px 12px;
      background: var(--bg);
      border-bottom: 1px solid var(--hairline);
      font-size: 11px;
      color: var(--amber);
      font-family: "SF Mono", ui-monospace, Menlo, monospace;
    }
    .chat-terminal-status[hidden] { display: none; }
    .chat-terminal-status.attention { color: var(--amber); font-weight: 650; }
    .chat-terminal-screen {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
      overflow: auto;
      margin: 0;
      padding: 8px 10px;
      white-space: pre;
      font: 12px/1.4 "SF Mono", ui-monospace, Menlo, monospace;
      -webkit-overflow-scrolling: touch;
    }

    /* ── chat view: light workspace skin ── */
    #viewChat {
      --chat-term-bg: #f5f5f4;
      --chat-term-panel: #ffffff;
      --chat-term-border: #e7e5e4;
      --chat-term-fg: #1c1917;
      --chat-term-dim: #78716c;
      --chat-term-blue: #4f46e5;
      --chat-term-green: #16a34a;
      --chat-term-amber: #b45309;
      --chat-terminal-font: "SF Mono", ui-monospace, Menlo, Monaco, "PingFang SC", monospace;
      --chat-terminal-size: 12px;
      background: var(--chat-term-bg);
      color: var(--chat-term-fg);
    }
    #viewChat .chat-header,
    #viewChat .mobile-session-picker,
    #viewChat .input-area {
      background: var(--chat-term-bg);
      border-color: var(--chat-term-border);
      color: var(--chat-term-fg);
    }
    #viewChat .chat-header { box-shadow: 0 1px 0 rgba(255,255,255,.03); }
    #viewChat .chat-title {
      color: var(--chat-term-fg);
      font-family: "SF Mono", ui-monospace, Menlo, monospace;
      font-size: 14px;
    }
    #viewChat .chat-subtitle,
    #viewChat .chat-mode-note,
    #viewChat .msg-time { color: var(--chat-term-dim); }
    #viewChat .chat-agent-avatar.codex { background: var(--green-bg); color: var(--chat-term-green); }
    #viewChat .chat-agent-avatar.claude { background: #fff7ed; color: #c2410c; }
    #viewChat .chat-agent-avatar.kimi { background: #eff6ff; color: #3b82f6; }
    #viewChat .chat-agent-avatar.grok { background: var(--amber-bg); color: var(--chat-term-amber); }
    #viewChat .chat-mode-pill { background: var(--chat-term-panel); color: var(--chat-term-dim); }
    #viewChat .chat-mode-pill.tmux,
    #viewChat .chat-mode-pill.ccb { background: var(--green-bg); color: var(--chat-term-green); }
    #viewChat .chat-mode-pill.readonly { background: var(--amber-bg); color: var(--chat-term-amber); }
    #viewChat .icon-btn,
    #viewChat .chat-back-btn {
      border-color: var(--chat-term-border);
      background: var(--chat-term-panel);
      color: var(--chat-term-dim);
    }
    #viewChat .icon-btn:hover,
    #viewChat .chat-back-btn:hover { border-color: var(--chat-term-dim); color: var(--chat-term-fg); background: var(--faint); }
    #viewChat .icon-btn.danger { color: var(--red); border-color: rgba(220,38,38,.3); }
    #viewChat .icon-btn.danger:hover { color: var(--red); border-color: var(--red); background: var(--red-bg); }
    #viewChat .mobile-session-picker select {
      border-color: var(--chat-term-border);
      background: var(--chat-term-panel);
      color: var(--chat-term-fg);
      color-scheme: light;
    }
    #viewChat .chat-banner,
    #viewChat .chat-error {
      background: var(--chat-term-panel);
      border-color: var(--chat-term-border);
    }
    #viewChat .chat-banner { color: var(--chat-term-amber); }
    #viewChat .chat-banner.epoch { color: var(--chat-term-blue); }
    #viewChat .chat-error { color: var(--red); }
    #viewChat .messages {
      background: var(--chat-term-bg);
      padding: 10px 14px 12px;
      gap: 0;
      min-width: 0;
      overflow-x: hidden;
      font-family: "SF Mono", ui-monospace, Menlo, monospace;
    }
    #viewChat .messages::-webkit-scrollbar-thumb { background: var(--chat-term-border); }
    #viewChat .msg-group { margin-bottom: 4px; gap: 0; }
    #viewChat .msg {
      display: block;
      width: 100%; max-width: none;
      margin: 0 0 6px;
      padding: 4px 0 4px 10px;
      border-left: 2px solid var(--chat-term-border);
    }
    #viewChat .msg-user { border-left-color: var(--chat-term-green); }
    #viewChat .msg.is-streaming .msg-text {
      white-space: pre-wrap;
    }
    #viewChat .stream-caret {
      display: inline-block;
      width: 0.55em;
      height: 1em;
      margin-left: 2px;
      vertical-align: text-bottom;
      background: currentColor;
      opacity: 0.55;
      animation: dsh-caret 1s steps(1) infinite;
    }
    @keyframes dsh-caret {
      50% { opacity: 0; }
    }

    #viewChat .msg-avatar { display: none; }
    #viewChat .msg-body { width: 100%; min-width: 0; }
    #viewChat .msg-meta { margin-bottom: 2px; gap: 6px; }
    #viewChat .msg-sender {
      color: var(--chat-term-blue);
      font-family: "SF Mono", ui-monospace, Menlo, monospace;
      font-size: 12px;
    }
    #viewChat .msg-user .msg-sender { color: var(--chat-term-green); }
    #viewChat .msg-user .msg-sender::before { content: '$ '; }
    #viewChat .msg-agent .msg-sender::before { content: '> '; }
    #viewChat .msg-time { font-size: 11px; }
    #viewChat .msg-text {
      color: var(--chat-term-fg);
      font-family: var(--chat-terminal-font);
      font-size: var(--chat-terminal-size);
      line-height: 1.5;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    #viewChat .msg-text br { content: ''; display: block; }
    #viewChat .msg-text code.inline {
      padding: 1px 5px;
      border: 1px solid var(--inline-code-border);
      border-radius: 3px;
      background: var(--inline-code-bg);
      color: var(--inline-code-ink);
      box-shadow: 1px 1px 0 rgba(41,37,31,.22);
      font-size: .94em;
      font-weight: 700;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }
    #viewChat .msg-text a { color: var(--chat-term-blue); }
    #viewChat .code-block {
      margin: 6px 0;
      border: 1px solid var(--hairline);
      border-radius: 6px;
      background: #f6f4ee;
      max-width: 100%;
    }
    #viewChat .code-block pre { color: var(--ink); }
    #viewChat .code-block .code-header { background: var(--bg); color: var(--dim); }
    #viewChat .code-block .code-copy { color: var(--dim); }
    #viewChat .code-block .code-copy:hover { color: var(--ink); background: var(--faint); }
    #viewChat .code-block pre {
      max-width: 100%;
      overflow-x: auto;
      white-space: pre;
    }
    #viewChat .code-header { background: var(--chat-term-panel); color: var(--chat-term-dim); }
    #viewChat .code-copy { color: var(--chat-term-dim); }
    #viewChat .code-copy:hover { color: var(--chat-term-fg); background: var(--faint); }
    #viewChat .empty {
      background: var(--chat-term-bg);
      color: var(--chat-term-dim);
      padding: 20px 12px;
      gap: 8px;
    }
    #viewChat .empty-icon {
      width: auto; height: auto;
      border: 0; border-radius: 0;
      background: transparent;
      color: var(--chat-term-green);
      font: 18px/1 "SF Mono", ui-monospace, Menlo, monospace;
    }
    #viewChat .empty-title {
      color: var(--chat-term-fg);
      font-family: "SF Mono", ui-monospace, Menlo, monospace;
      font-size: 13px;
    }
    #viewChat .empty-desc {
      color: var(--chat-term-dim);
      font-family: "SF Mono", ui-monospace, Menlo, monospace;
      font-size: 12px;
      max-width: none;
      text-align: inherit;
    }
    #viewChat .outbox-delivery_unknown .msg-body { border-left-color: var(--chat-term-amber); }
    #viewChat .outbox-failed_safe .msg-body { border-left-color: var(--red); }
    #viewChat .outbox-hint { color: var(--chat-term-amber); }
    #viewChat .outbox-state { color: var(--chat-term-dim); }
    #viewChat .chat-terminal-panel {
      background: var(--chat-term-bg);
      border-top: 0;
    }
    #viewChat .chat-terminal-status {
      background: var(--chat-term-panel);
      border-color: var(--chat-term-border);
      color: var(--chat-term-amber);
    }
    #viewChat .chat-terminal-screen {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 8px 10px;
      background: var(--chat-term-bg);
      color: var(--chat-term-fg);
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
      font: var(--chat-terminal-size)/1.45 var(--chat-terminal-font);
    }
    #viewChat .chat-control-bar button {
      border-color: var(--chat-term-border);
      background: var(--faint);
      color: var(--chat-term-fg);
    }
    #viewChat .input-area {
      padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px));
      background: var(--chat-term-panel);
      border-top-color: var(--chat-term-border);
    }
    #viewChat .chat-control-bar { padding-bottom: 5px; }
    #viewChat .chat-session-actions:not(:has(button:not([hidden]))) { display: none; }
    #viewChat .input-box {
      background: var(--chat-term-bg);
      border-color: var(--chat-term-border);
      border-radius: 8px;
      padding: 8px 10px;
    }
    #viewChat .input-box:focus-within { border-color: var(--chat-term-blue); box-shadow: 0 0 0 3px rgba(121,192,255,.12); }
    #viewChat .input-box textarea { color: var(--chat-term-fg); font-family: var(--chat-terminal-font); font-size: max(16px, var(--chat-terminal-size)); }
    #viewChat .input-box textarea::placeholder { color: var(--chat-term-dim); }
    #viewChat .voice-btn {
      border-color: var(--chat-term-border);
      color: var(--chat-term-dim);
    }
    #viewChat .voice-btn:hover { border-color: var(--chat-term-blue); color: var(--chat-term-blue); }
    #viewChat .voice-btn.listening { border-color: var(--red); background: #da3633; color: #fff; }
    #viewChat .voice-btn.error { border-color: var(--red); color: var(--red); }
    #viewChat .voice-status { color: var(--chat-term-dim); }
    #viewChat .voice-status.listening,
    #viewChat .voice-status.starting { color: var(--amber); }
    #viewChat .voice-status.error,
    #viewChat .voice-status.unavailable { color: var(--chat-term-amber); }
    #viewChat .msg-speak-btn {
      border-color: var(--chat-term-border);
      color: var(--chat-term-dim);
      background: var(--chat-term-panel);
    }
    #viewChat .msg-speak-btn:hover,
    #viewChat .msg-speak-btn.speaking { border-color: var(--chat-term-blue); color: var(--chat-term-blue); }
    #viewChat .migrate-btn,
    #viewChat .restart-btn {
      border-color: var(--chat-term-border);
      background: var(--chat-term-bg);
      color: var(--chat-term-blue);
    }
    #viewChat .migrate-btn { color: var(--chat-term-amber); }
    #viewChat .token-gate { background: rgba(13,17,23,.96); }
    #viewChat .token-card { background: var(--chat-term-panel); border-color: var(--chat-term-border); color: var(--chat-term-fg); }
    #viewChat .token-desc { color: var(--chat-term-dim); }
    #viewChat .token-card input { border-color: var(--chat-term-border); background: var(--chat-term-bg); color: var(--chat-term-fg); color-scheme: light; }

    .date-divider {
      display: flex; align-items: center; gap: 12px;
      padding: 16px 0 8px;
      font-size: 12px; color: var(--dim);
    }
    .date-divider::before, .date-divider::after {
      content: ''; flex: 1; height: 1px; background: var(--hairline);
    }

    .msg-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
    .msg-group .msg:first-child { margin-top: 0; }
    .msg {
      display: flex; gap: 12px;
      max-width: 780px;
      padding: 2px 0;
      animation: msgIn .2s ease-out;
    }
    @keyframes msgIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .msg-avatar {
      width: 36px; height: 36px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; font-weight: 700; flex-shrink: 0;
      margin-top: 2px;
    }
    .msg-avatar.user { background: var(--accent-bg); color: var(--accent); }
    .msg-avatar.agent { background: #fef3c7; color: #92400e; }
    .msg-avatar.agent.codex { background: #ecfdf5; color: #059669; }
    .msg-avatar.agent.claude { background: #fff7ed; color: #c2410c; }
    .msg-avatar.agent.kimi { background: #eff6ff; color: #3b82f6; }
    .msg-avatar.agent.grok { background: #fef3c7; color: #d97706; }
    .msg-avatar.hidden { visibility: hidden; }
    .msg-body { flex: 1; min-width: 0; }
    .msg-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
    .msg-sender { font-weight: 650; font-size: 14px; }
    .msg-time { font-size: 12px; color: var(--dim); }
    .msg-text {
      font-size: 14px; line-height: 1.65;
      color: var(--ink);
      word-break: break-word;
    }
    .msg-text + .msg-text { margin-top: 2px; }
    .msg-speak-btn {
      margin-top: 5px; padding: 3px 7px;
      border: 1px solid var(--faint); border-radius: 6px;
      background: transparent; color: var(--dim);
      font-size: 11px; line-height: 1.3; cursor: pointer;
      box-shadow: none;
    }
    .msg-speak-btn:hover, .msg-speak-btn.speaking { color: var(--accent); border-color: var(--accent); }
    .outbox-state {
      margin-top: 6px; color: var(--dim); font-size: 12px;
    }
    .outbox-sending, .outbox-accepted { opacity: .78; }
    .outbox-delivery_unknown .msg-body {
      border-left: 3px solid var(--amber); padding-left: 10px;
    }
    .outbox-failed_safe .msg-body {
      border-left: 3px solid var(--red); padding-left: 10px;
    }
    .outbox-stale { opacity: .55; }
    .outbox-action {
      margin-left: 8px; padding: 4px 8px;
      font-size: 11px; box-shadow: none;
    }
    .outbox-hint { margin-left: 6px; color: var(--amber); }
    .outbox-delivery_unknown { touch-action: pan-y; -webkit-user-select: none; user-select: none; }

    .msg-text strong { font-weight: 650; }
    .msg-text em { font-style: italic; }
    .msg-text code.inline {
      font-family: "SF Mono", ui-monospace, Menlo, monospace;
      font-size: 13px;
      background: var(--inline-code-bg);
      color: var(--inline-code-ink);
      padding: 2px 6px;
      border: 1px solid var(--inline-code-border);
      border-radius: 4px;
    }
    .msg-text a { color: var(--accent); text-decoration: none; }
    .msg-text a:hover { text-decoration: underline; }

    .code-block {
      margin: 8px 0;
      border-radius: var(--radius-sm);
      overflow: hidden;
      background: var(--code-bg);
    }
    .code-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 8px 12px;
      background: rgba(255,255,255,.05);
      font-size: 12px; color: rgba(255,255,255,.5);
    }
    .code-lang { text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
    .code-copy {
      background: none; border: none; color: rgba(255,255,255,.5);
      cursor: pointer; font-size: 12px; padding: 2px 6px;
      border-radius: 4px; transition: all .15s;
    }
    .code-copy:hover { color: #fff; background: rgba(255,255,255,.1); }
    .code-block pre {
      padding: 12px 16px;
      overflow-x: auto;
      font-family: "SF Mono", ui-monospace, Menlo, monospace;
      font-size: 13px; line-height: 1.5;
      color: var(--code-ink);
    }
    .code-block pre::-webkit-scrollbar { height: 4px; }
    .code-block pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }

    .typing {
      display: flex; gap: 12px; align-items: center;
      padding: 4px 0;
      animation: msgIn .2s ease-out;
    }
    .typing-dots {
      display: flex; gap: 4px; align-items: center;
      padding: 8px 12px;
      background: var(--card);
      border-radius: 16px;
      border: 1px solid var(--hairline);
    }
    .typing-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--dim);
      animation: typingBounce 1.4s ease-in-out infinite;
    }
    .typing-dot:nth-child(2) { animation-delay: .2s; }
    .typing-dot:nth-child(3) { animation-delay: .4s; }
    @keyframes typingBounce {
      0%, 60%, 100% { transform: translateY(0); opacity: .4; }
      30% { transform: translateY(-4px); opacity: 1; }
    }

    .empty {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      color: var(--dim); gap: 16px;
      padding: 40px 20px;
    }
    .empty-icon {
      width: 64px; height: 64px; border-radius: 16px;
      background: var(--card); border: 1px solid var(--hairline);
      display: flex; align-items: center; justify-content: center;
      font-size: 28px;
    }
    .empty-title { font-size: 17px; font-weight: 650; color: var(--ink); }
    .empty-desc { font-size: 14px; color: var(--dim); text-align: center; max-width: 320px; line-height: 1.5; }
    .empty-suggestions {
      display: flex; flex-wrap: wrap; gap: 8px;
      justify-content: center; margin-top: 8px;
    }
    .suggestion-chip {
      padding: 8px 16px;
      background: var(--card);
      border: 1px solid var(--faint);
      border-radius: 999px;
      font-size: 13px; color: var(--dim);
      cursor: pointer; transition: all .15s ease;
    }
    .suggestion-chip:hover {
      border-color: var(--accent); color: var(--accent);
      background: var(--accent-bg);
    }

    .input-area {
      padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
      background: var(--card);
      border-top: 1px solid var(--hairline);
      flex-shrink: 0;
      min-width: 0;
    }
    .chat-control-bar {
      display: flex; align-items: center; gap: 5px; overflow-x: auto;
      padding-bottom: 6px; -webkit-overflow-scrolling: touch;
    }
    .chat-control-bar[hidden] { display: none; }
    .chat-control-bar button {
      flex: 0 0 auto; padding: 5px 8px; border-radius: 6px;
      box-shadow: none; background: var(--bg); font-size: 11px;
      touch-action: manipulation;
    }
    .chat-session-actions {
      display: flex; gap: 6px; flex-wrap: wrap;
      margin-bottom: 6px;
    }
    .chat-session-actions:not(:has(button:not([hidden]))) { display: none; }
    .chat-mode-note {
      margin-bottom: 6px; color: var(--dim);
      font-size: 11px; line-height: 1.4;
    }
    .chat-mode-note[hidden] { display: none; }
    .migrate-btn,
    .restart-btn {
      flex: 1 1 auto;
      min-width: 0;
      width: auto;
      margin: 0;
      padding: 7px 10px;
      font-size: 12px;
      box-shadow: none;
    }
    .migrate-btn {
      border-color: rgba(217,119,6,.35); background: var(--amber-bg);
      color: #92400e;
    }
    .migrate-btn[hidden] { display: none; }
    .restart-btn {
      border-color: rgba(37,99,235,.28); background: var(--accent-bg);
      color: var(--accent);
    }
    .restart-btn[hidden] { display: none; }
    .input-box {
      display: flex; align-items: flex-end; gap: 8px;
      background: var(--bg);
      border: 1.5px solid var(--faint);
      border-radius: 12px;
      padding: 8px 12px;
      transition: border-color .2s ease;
      min-width: 0;
    }
    .input-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
    .input-box textarea {
      flex: 1; border: none; outline: none; resize: none;
      /* 16px keeps iOS Safari from zooming the page on focus. */
      /* Keep these as separate declarations: `font: 16px/1.5 inherit`
         is invalid CSS and gets ignored by the browser. */
      font-size: 16px;
      line-height: 1.5;
      font-family: inherit;
      background: transparent; color: var(--ink);
      max-height: 120px;
      min-height: 24px;
    }
    .input-box textarea::placeholder { color: var(--dim); }
    .input-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
    .voice-btn {
      width: 32px; height: 32px; border-radius: var(--radius-sm);
      border: 1px solid var(--faint); background: transparent; color: var(--dim);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all .15s ease; flex-shrink: 0;
    }
    .voice-btn svg { width: 17px; height: 17px; }
    .voice-btn:hover { color: var(--accent); border-color: var(--accent); }
    .voice-btn.listening {
      color: #fff; background: var(--red); border-color: var(--red);
      animation: voicePulse 1.2s ease-in-out infinite;
    }
    .voice-btn.error { color: var(--red); border-color: var(--red); }
    .voice-btn:disabled { opacity: .35; cursor: default; }
    .voice-status {
      min-height: 16px; padding: 4px 2px 0;
      color: var(--dim); font-size: 11px; line-height: 1.35;
    }
    .voice-status[hidden] { display: none; }
    .voice-status.listening, .voice-status.starting { color: var(--red); }
    .voice-status.error, .voice-status.unavailable { color: var(--amber); }
    @keyframes voicePulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.35); }
      50% { box-shadow: 0 0 0 5px rgba(220,38,38,0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .voice-btn.listening { animation: none; }
    }
    .send-btn {
      width: 32px; height: 32px; border-radius: var(--radius-sm);
      background: var(--accent); color: #fff;
      border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all .15s ease;
      flex-shrink: 0;
    }
    .send-btn:hover { background: var(--accent-hover); }
    .send-btn:active { transform: scale(.95); }
    .send-btn:disabled { opacity: .35; cursor: default; transform: none; }
    .send-btn svg { width: 16px; height: 16px; }

    /* ── mobile: back button in chat header ── */
    .chat-back-btn {
      display: none;
      width: 36px; height: 36px; border-radius: var(--radius-sm);
      border: 1px solid var(--faint); background: var(--card);
      padding: 0;
      align-items: center; justify-content: center;
      cursor: pointer; color: var(--dim); font-size: 18px;
      flex-shrink: 0;
    }
    .chat-back-btn > svg {
      display: block;
      width: 18px; height: 18px;
      flex: 0 0 auto;
      overflow: visible;
      stroke: currentColor;
    }
    .secure-entry-link {
      display: inline-block;
      margin-left: 5px;
      color: inherit;
      font-weight: 800;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    /* ── mobile: bottom tab bar ── */
    .tabbar {
      display: none;
      position: fixed; bottom: 0; left: 0; right: 0;
      /* height is content + safe-area; main padding must match both */
      min-height: var(--tabbar-h);
      background: var(--card);
      border-top: 1px solid var(--hairline);
      z-index: 200;
      padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .tabbar-inner {
      display: flex; height: var(--tabbar-h);
    }
    .tabbar-item {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 2px;
      cursor: pointer; color: var(--dim);
      font-size: 11px; font-weight: 550;
      transition: color .15s ease;
      text-decoration: none;
    }
    .tabbar-item.active { color: var(--accent); }
    .tabbar-item svg { width: 22px; height: 22px; }

    /* ── mobile responsive ── */
    @media (max-width: 768px) {
      .sidebar { display: none; }
      .tabbar { display: block; }
      /* Reserve tab bar + home indicator so content never sits under it. */
      .main {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
      }

      /* dashboard mobile */
      #viewDashboard .wrap { padding: 20px 14px 48px; }
      .hero .big { font-size: 24px; }
      .hero { padding: 20px; }
      .svc { padding: 14px 12px; }
      .svc-head { align-items: flex-start; gap: 8px; margin-bottom: 10px; }
      .svc-name { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
      .svc-name span { display: block; margin: 2px 0 0; font-size: 11px; }
      .svc-head .badge { align-self: flex-start; padding: 3px 7px; font-size: 10px; }
      .meter { padding: 8px 0; }
      .meter .m-label { font-size: 11px; }
      .meter .m-val { font-size: 16px; }
      .meter .m-sub { font-size: 10px; line-height: 1.35; }
      .ext-card { padding: 14px 12px; }
      .ext-card .s-title { font-size: 13px; }
      .ext-card .s-desc, .ext-card .s-tag { font-size: 11px; }

      /* chat mobile: full screen, show back btn; tabbar owns safe-area */
      .chat-back-btn { display: flex; }
      .chat-header { padding: 8px 12px; gap: 8px; }
      .chat-agent-avatar { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
      .icon-btn, .chat-back-btn { width: 32px; height: 32px; }
      .mobile-session-picker {
        display: block; padding: 4px 10px 6px; background: var(--card);
        border-bottom: 1px solid var(--hairline); flex-shrink: 0;
      }
      .mobile-session-picker[hidden] { display: none !important; }
      .mobile-session-picker select {
        width: 100%; min-width: 0; padding: 8px 10px;
        border: 1px solid var(--faint); border-radius: 9px;
        background: var(--bg); color: var(--ink);
        /* iOS Safari zooms focused form controls below 16px. */
        font-size: 16px; line-height: 1.4; font-family: inherit;
      }
      .messages { padding: 10px 12px; }
      .chat-terminal-screen {
        overflow-x: hidden;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        word-break: break-word;
      }
      /* Tab bar already accounts for home indicator — don't double-pad. */
      .input-area { padding: 8px 10px 10px; }
      #viewChat .input-area { padding: 8px 10px 10px; }
      .msg { max-width: 100%; }
      .chat-title-row { gap: 6px; }
      .chat-mode-pill { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
      .pool-detail > div { display: block; }
      .pool-detail > div span { display: block; margin-top: 2px; }
    }

    /* App-owned confirmation: warm retro utility, never a browser chrome alert. */
    html.app-modal-open { overflow: hidden; }
    .app-confirm-layer {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: grid;
      place-items: center;
      padding: 24px;
      isolation: isolate;
    }
    .app-confirm-scrim {
      position: absolute;
      inset: 0;
      z-index: -1;
      background: rgba(28, 25, 23, .68);
      backdrop-filter: blur(2px) saturate(.7);
      animation: app-confirm-fade .14s ease-out both;
    }
    .app-confirm-card {
      position: relative;
      width: min(520px, 100%);
      padding: 22px;
      border: 3px solid var(--ink);
      border-radius: 3px;
      background-color: #fffef9;
      background-image: radial-gradient(rgba(28,25,23,.08) .7px, transparent .7px);
      background-size: 7px 7px;
      box-shadow: 9px 9px 0 var(--ink);
      color: var(--ink);
      outline: none;
      animation: app-confirm-in .18s cubic-bezier(.2,.8,.2,1) both;
    }
    .app-confirm-tape {
      position: absolute;
      top: -12px;
      left: 50%;
      width: 94px;
      height: 22px;
      transform: translateX(-50%) rotate(-1.5deg);
      border: 2px solid var(--ink);
      background: #ffdc45;
      box-shadow: 2px 2px 0 rgba(28,25,23,.25);
    }
    .app-confirm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
    .app-confirm-eyebrow {
      margin-bottom: 5px;
      color: var(--red);
      font: 900 11px/1.2 "Courier New", "PingFang SC", monospace;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .app-confirm-card h2 {
      margin: 0;
      font: 900 23px/1.25 "Courier New", "PingFang SC", monospace;
      letter-spacing: -.03em;
    }
    .app-confirm-close {
      flex: 0 0 34px;
      width: 34px;
      height: 34px;
      border: 2px solid var(--ink);
      border-radius: 2px;
      background: #fffef9;
      color: var(--ink);
      box-shadow: 2px 2px 0 var(--ink);
      font: 900 22px/1 monospace;
      cursor: pointer;
    }
    .app-confirm-content { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; margin: 24px 0 22px; }
    .app-confirm-mark {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border: 2px solid var(--ink);
      border-radius: 50%;
      background: #ffb4c0;
      box-shadow: 3px 3px 0 var(--ink);
      font: 900 28px/1 "Courier New", monospace;
    }
    .app-confirm-content p {
      margin: 0;
      color: #44403c;
      font: 600 14px/1.75 "PingFang SC", "Microsoft YaHei", sans-serif;
      white-space: pre-line;
    }
    .app-confirm-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 12px; }
    .app-confirm-actions button {
      min-height: 46px;
      padding: 10px 16px;
      border: 2px solid var(--ink);
      border-radius: 2px;
      color: var(--ink);
      box-shadow: 3px 3px 0 var(--ink);
      font: 900 14px/1.2 "Courier New", "PingFang SC", monospace;
      cursor: pointer;
      transition: transform .1s ease, box-shadow .1s ease, background .1s ease;
    }
    .app-confirm-actions button:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
    .app-confirm-actions button:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
    .app-confirm-cancel { background: #f0eee8; }
    .app-confirm-submit { background: #ffb4c0; }
    .app-confirm-layer[data-tone="warning"] .app-confirm-submit,
    .app-confirm-layer[data-tone="warning"] .app-confirm-mark { background: #ffdc45; }
    .app-confirm-hint { margin-top: 13px; color: var(--dim); text-align: center; font: 700 10px/1 "Courier New", monospace; letter-spacing: .08em; }
    .app-confirm-close:focus-visible,
    .app-confirm-actions button:focus-visible { outline: 3px solid #8065ed; outline-offset: 3px; }
    @keyframes app-confirm-fade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes app-confirm-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

    @media (max-width: 640px) {
      .app-confirm-layer { place-items: end center; padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px)); }
      .app-confirm-card { width: 100%; padding: 20px 18px 18px; box-shadow: 6px 6px 0 var(--ink); }
      .app-confirm-card h2 { font-size: 20px; }
      .app-confirm-content { grid-template-columns: 38px 1fr; gap: 12px; margin: 20px 0; }
      .app-confirm-mark { width: 38px; height: 38px; font-size: 23px; box-shadow: 2px 2px 0 var(--ink); }
      .app-confirm-content p { font-size: 13px; line-height: 1.65; }
      .app-confirm-actions { grid-template-columns: 1fr; }
      .app-confirm-submit { order: -1; }
      .app-confirm-hint { display: none; }
      .session-health-card { padding: 14px; }
      .session-health-foot { align-items: center; }
      .session-health-foot span { max-width: 68%; }
    }

    @media (prefers-reduced-motion: reduce) {
      .app-confirm-scrim, .app-confirm-card { animation: none; }
    }

    /* Narrow phones: keep workspace usable, kill horizontal scroll */
    @media (max-width: 430px) {
      #viewChat, #viewChat .chat-body, #viewChat .messages,
      #viewChat .chat-terminal-panel, #viewChat .input-area {
        min-width: 0;
        max-width: 100%;
      }
      #viewChat .msg-text,
      #viewChat .chat-terminal-screen {
        overflow-wrap: anywhere;
        word-break: break-word;
      }
    }

    /* ── Tailnet services view ── */
    #viewServices { overflow-y: auto; }
    .services-wrap {
      width: 100%; max-width: 920px; margin: 0 auto;
      padding: 48px 28px 72px;
    }
    .services-head {
      display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
      margin-bottom: 20px;
    }
    .services-kicker {
      margin-bottom: 8px; color: var(--accent);
      font: 650 11px/1.3 "SF Mono", ui-monospace, Menlo, monospace;
      letter-spacing: .14em;
    }
    .services-head h1 { font-size: 30px; letter-spacing: -.035em; line-height: 1.15; }
    .services-head p { margin-top: 7px; color: var(--dim); font-size: 14px; }
    .services-actions { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
    .services-github {
      display: inline-flex; align-items: center; gap: 7px;
      min-height: 40px; padding: 9px 13px;
      color: var(--ink); background: #ffdc45;
      border: 2px solid var(--ink); border-radius: var(--radius-sm);
      box-shadow: 2px 2px 0 var(--ink); text-decoration: none;
      font: 800 12px/1 "Courier New", "PingFang SC", monospace;
      transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    }
    .services-github:hover { color: var(--ink); background: #ffd21c; transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
    .services-github:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
    .services-refresh {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 9px 13px; color: var(--accent); background: var(--card);
      border-color: rgba(79,70,229,.22); box-shadow: var(--shadow);
    }
    .services-refresh:hover { border-color: var(--accent); }
    .services-refresh.loading svg { animation: serviceSpin .8s linear infinite; }
    @keyframes serviceSpin { to { transform: rotate(360deg); } }
    .services-summary {
      display: flex; align-items: center; gap: 7px;
      min-height: 22px; margin-bottom: 16px; color: var(--dim); font-size: 12px;
    }
    .services-summary strong { color: var(--ink); font-size: 13px; }
    .services-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
    .services-live-dot.all-online { background: var(--green); box-shadow: 0 0 0 4px var(--green-bg); }
    .services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .service-card {
      min-width: 0; padding: 20px; color: var(--ink); text-decoration: none;
      background: var(--card); border: 1px solid var(--hairline); border-radius: 16px;
      box-shadow: var(--shadow); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }
    .service-card:hover {
      transform: translateY(-2px); border-color: rgba(79,70,229,.32);
      box-shadow: 0 12px 30px rgba(15,23,42,.09);
    }
    .service-card.offline { background: color-mix(in srgb, var(--card) 84%, var(--bg)); }
    .service-card-top, .service-meta, .service-url {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }
    .service-category {
      padding: 3px 8px; border-radius: 999px;
      color: var(--accent); background: var(--accent-bg); font-size: 11px; font-weight: 650;
    }
    .service-state { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: 11px; }
    .service-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
    .service-state.online { color: var(--green); }
    .service-state.online i { background: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
    .service-name { margin-top: 18px; font-size: 19px; font-weight: 700; letter-spacing: -.025em; }
    .service-description { min-height: 38px; margin-top: 6px; color: var(--dim); font-size: 13px; line-height: 1.5; }
    .service-meta { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--faint); color: var(--dim); font-size: 11px; }
    .service-url { margin-top: 10px; color: var(--dim); font: 500 11px/1.4 "SF Mono", ui-monospace, Menlo, monospace; }
    .service-open-link { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
    .service-open-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .service-open-link strong { flex-shrink: 0; color: var(--accent); font-family: inherit; }
    .service-github-link {
      flex: 0 0 auto; color: var(--dim); text-decoration: none; font: inherit; font-weight: 700;
    }
    .service-github-link:hover, .service-open-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
    .service-github-missing { flex: 0 0 auto; color: #9a9488; font: inherit; }
    .services-empty {
      grid-column: 1 / -1; padding: 40px 20px; text-align: center;
      color: var(--dim); background: var(--card); border: 1px dashed var(--faint); border-radius: 14px;
    }
    .services-note { margin-top: 18px; color: var(--dim); font-size: 11px; line-height: 1.55; }
    @media (max-width: 768px) {
      .services-wrap { padding: 28px 14px 48px; }
      .services-head { align-items: center; }
      .services-head h1 { font-size: 25px; }
      .services-head p { font-size: 12px; }
      .services-actions { gap: 7px; }
      .services-github { min-width: 40px; padding: 9px; justify-content: center; }
      .services-github span { display: none; }
      .services-refresh { padding: 9px; }
      .services-refresh svg { width: 18px; height: 18px; }
      .services-grid { grid-template-columns: 1fr; gap: 10px; }
      .service-card { padding: 17px; border-radius: 14px; }
      .service-name { margin-top: 14px; font-size: 18px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .service-card { transition: none; }
      .services-refresh.loading svg { animation: none; }
    }

    /* ── voice view ── */
    #viewVoice {
      position: relative;
      overflow-y: auto;
      background:
        radial-gradient(circle at 50% 8%, rgba(79,70,229,.15), transparent 34%),
        linear-gradient(180deg, #f8f7ff 0%, var(--bg) 55%);
    }
    .voice-header {
      position: sticky; top: 0; z-index: 10;
      display: flex; align-items: center; gap: 10px;
      min-height: 58px; padding: 10px 16px;
      border-bottom: 1px solid rgba(79,70,229,.12);
      background: rgba(255,255,255,.88);
      backdrop-filter: blur(18px);
    }
    .voice-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
    .voice-heading strong { font-size: 15px; letter-spacing: -.01em; }
    .voice-heading span { color: var(--dim); font-size: 11px; }
    .voice-auth {
      flex: 1; display: grid; place-items: center; padding: 24px;
    }
    .voice-auth[hidden], .voice-stage[hidden] { display: none !important; }
    .voice-auth-card {
      width: min(420px, 100%); padding: 24px;
      display: flex; flex-direction: column; gap: 12px;
      border: 1px solid rgba(79,70,229,.14); border-radius: 18px;
      background: rgba(255,255,255,.95); box-shadow: 0 20px 50px rgba(79,70,229,.1);
    }
    .voice-auth-card input {
      width: 100%; padding: 11px 12px;
      border: 1px solid var(--faint); border-radius: var(--radius-sm);
      background: #fff; color: var(--ink); outline: none;
      font: 16px/1.4 "SF Mono", ui-monospace, Menlo, monospace;
    }
    .voice-auth-card input:focus { border-color: var(--accent); }
    .voice-stage {
      width: min(760px, 100%); margin: 0 auto;
      padding: 24px 20px 42px;
      display: flex; flex-direction: column; align-items: center;
    }
    .voice-session-row {
      width: 100%; display: flex; align-items: center; gap: 12px;
      padding: 10px 12px; border: 1px solid rgba(79,70,229,.12); border-radius: 12px;
      background: rgba(255,255,255,.75);
    }
    .voice-session-row label { flex-shrink: 0; color: var(--dim); font-size: 12px; font-weight: 600; }
    .voice-session-row select {
      flex: 1; min-width: 0; padding: 7px 9px;
      border: 1px solid var(--faint); border-radius: 8px;
      background: #fff; color: var(--ink); font: 14px/1.4 inherit;
    }
    .voice-intro { margin: 30px 0 20px; text-align: center; }
    .voice-kicker { color: var(--accent); font: 650 11px/1.3 "SF Mono", ui-monospace, Menlo, monospace; letter-spacing: .14em; }
    .voice-intro h2 { margin-top: 8px; font-size: clamp(24px, 4vw, 34px); line-height: 1.2; letter-spacing: -.035em; }
    .voice-intro p { margin-top: 7px; color: var(--dim); font-size: 13px; }
    .voice-orb {
      position: relative; width: 112px; height: 112px; padding: 0;
      display: grid; place-items: center;
      border: 0; border-radius: 50%;
      color: #fff; background: linear-gradient(145deg, #6366f1, #4338ca);
      box-shadow: 0 20px 42px rgba(79,70,229,.3), inset 0 1px 1px rgba(255,255,255,.35);
      cursor: pointer; isolation: isolate;
    }
    .voice-orb svg { width: 42px; height: 42px; }
    .voice-orb:hover { transform: translateY(-2px); box-shadow: 0 24px 50px rgba(79,70,229,.36); }
    .voice-orb:active { transform: scale(.97); }
    .voice-orb:disabled { opacity: .42; cursor: default; transform: none; box-shadow: none; }
    .voice-orb-ring {
      position: absolute; inset: -10px; z-index: -1;
      border: 1px solid rgba(79,70,229,.2); border-radius: inherit;
    }
    .voice-orb.listening { background: linear-gradient(145deg, #ef4444, #be123c); }
    .voice-orb.listening .voice-orb-ring { animation: voiceRing 1.25s ease-out infinite; border-color: rgba(225,29,72,.5); }
    .voice-orb.error { background: linear-gradient(145deg, #f97316, #dc2626); }
    @keyframes voiceRing { from { transform: scale(.92); opacity: .85; } to { transform: scale(1.28); opacity: 0; } }
    .voice-main-status { min-height: 24px; margin-top: 18px; color: var(--dim); font-size: 13px; text-align: center; }
    .voice-main-status.listening, .voice-main-status.starting { color: #be123c; font-weight: 600; }
    .voice-main-status.error, .voice-main-status.unavailable { color: var(--red); }
    .voice-main-status.waiting { color: var(--accent); }
    .voice-panels {
      width: 100%; margin-top: 24px;
      display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    }
    .voice-card {
      min-width: 0; padding: 16px;
      display: flex; flex-direction: column; gap: 11px;
      border: 1px solid rgba(79,70,229,.12); border-radius: 16px;
      background: rgba(255,255,255,.9); box-shadow: 0 8px 28px rgba(28,25,23,.05);
    }
    .voice-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 650; color: var(--dim); }
    .voice-card-head button { padding: 3px 7px; color: var(--dim); background: transparent; box-shadow: none; font-size: 11px; }
    .voice-card textarea {
      width: 100%; min-height: 84px; resize: vertical;
      padding: 10px 11px; border: 1px solid var(--faint); border-radius: 10px;
      background: #fafafa; color: var(--ink); outline: none;
      font: 16px/1.5 inherit;
    }
    .voice-card textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,70,229,.08); }
    .voice-send, .voice-speak {
      width: 100%; min-height: 40px; border-radius: 10px; box-shadow: none;
    }
    .voice-send { border-color: var(--accent); background: var(--accent); color: #fff; }
    .voice-send:hover { background: var(--accent-hover); }
    .voice-speak { color: var(--accent); border-color: rgba(79,70,229,.22); background: var(--accent-bg); }
    .voice-auto { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-weight: 500; cursor: pointer; }
    .voice-auto input { accent-color: var(--accent); }
    .voice-reply-text {
      flex: 1; min-height: 84px; max-height: 180px; overflow-y: auto;
      color: var(--ink); font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
    }
    .voice-footnote { max-width: 620px; margin-top: 18px; color: var(--dim); font-size: 11px; line-height: 1.55; text-align: center; }
    @media (max-width: 640px) {
      .voice-stage { padding: 14px 12px 28px; }
      .voice-intro { margin: 22px 0 16px; }
      .voice-orb { width: 96px; height: 96px; }
      .voice-orb svg { width: 36px; height: 36px; }
      .voice-panels { grid-template-columns: 1fr; margin-top: 18px; }
      .voice-reply-text { min-height: 62px; }
      .voice-session-row select { font-size: 16px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .voice-orb, .voice-orb-ring { animation: none !important; transition: none !important; }
    }

    /* ── shared product surface ──
       Dashboard and Services establish the app's light card language. Chat
       and Voice use the same shell so switching tabs feels like one product;
       only the live terminal output keeps its deliberately dark canvas. */
    #viewChat {
      --chat-term-bg: var(--bg);
      --chat-term-panel: var(--card);
      --chat-term-border: var(--hairline);
      --chat-term-fg: var(--ink);
      --chat-term-dim: var(--dim);
      --chat-term-blue: var(--accent);
      --chat-term-green: var(--green);
      --chat-term-amber: var(--amber);
      background: var(--bg);
      color: var(--ink);
    }
    #viewChat .chat-header,
    #viewChat .mobile-session-picker,
    #viewChat .input-area {
      background: var(--card);
      border-color: var(--hairline);
      color: var(--ink);
    }
    #viewChat .chat-header { box-shadow: var(--shadow); }
    #viewChat .chat-title {
      color: var(--ink);
      font-family: inherit;
    }
    #viewChat .chat-agent-avatar.codex { background: var(--green-bg); color: var(--green); }
    #viewChat .chat-agent-avatar.claude { background: #fff7ed; color: #c2410c; }
    #viewChat .chat-agent-avatar.kimi { background: #eff6ff; color: #3b82f6; }
    #viewChat .chat-agent-avatar.grok { background: var(--amber-bg); color: var(--amber); }
    #viewChat .icon-btn,
    #viewChat .chat-back-btn,
    #viewChat .font-settings-btn {
      border-color: var(--faint);
      background: var(--card);
      color: var(--dim);
    }
    #viewChat .icon-btn:hover,
    #viewChat .chat-back-btn:hover,
    #viewChat .font-settings-btn:hover,
    #viewChat .font-settings-btn[aria-expanded="true"] {
      border-color: var(--accent);
      background: var(--accent-bg);
      color: var(--accent);
    }
    #viewChat .icon-btn.danger { color: var(--red); border-color: rgba(220,38,38,.28); }
    #viewChat .icon-btn.danger:hover { color: var(--red); border-color: var(--red); background: var(--red-bg); }
    #viewChat .mobile-session-picker select,
    #viewChat .font-setting-row select,
    #viewChat .token-card input {
      background: var(--bg);
      border-color: var(--faint);
      color: var(--ink);
      color-scheme: light;
    }
    #viewChat .font-settings-panel {
      background: var(--card);
      border-color: var(--hairline);
      color: var(--ink);
      box-shadow: 0 14px 34px rgba(28,25,23,.14);
    }
    #viewChat .font-settings-close { color: var(--dim); }
    #viewChat .font-settings-close:hover { color: var(--accent); background: var(--accent-bg); }
    #viewChat .font-setting-row output { color: var(--accent); }
    #viewChat .font-setting-row input[type="range"] { accent-color: var(--accent); }
    #viewChat .font-settings-reset {
      border-color: rgba(79,70,229,.22);
      background: var(--accent-bg);
      color: var(--accent);
    }
    #viewChat .messages { background: var(--bg); }
    #viewChat .chat-control-bar button {
      border-color: var(--faint);
      background: var(--bg);
      color: var(--ink);
    }
    #viewChat .input-box { background: var(--bg); border-color: var(--faint); }
    #viewChat .input-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
    #viewChat .input-box textarea { color: var(--ink); }
    #viewChat .input-box textarea::placeholder { color: var(--dim); }
    #viewChat .voice-btn { border-color: var(--faint); color: var(--dim); }
    #viewChat .voice-btn:hover { border-color: var(--accent); color: var(--accent); }
    #viewChat .send-btn:disabled {
      background: #e0e7ff;
      border-color: #c7d2fe;
      color: #818cf8;
    }
    #viewChat .token-gate { background: rgba(245,245,244,.96); }
    #viewChat .token-card { background: var(--card); border-color: var(--hairline); color: var(--ink); }
    #viewChat .token-desc { color: var(--dim); }
    #viewChat .chat-terminal-panel:not([hidden]) {
      margin: 12px 16px;
      border: 1px solid var(--hairline);
      border-radius: var(--radius);
      box-shadow: 0 8px 24px rgba(28,25,23,.12);
      background: var(--card);
      color: var(--ink);
    }
    #viewChat .chat-terminal-panel .chat-terminal-status {
      background: var(--bg);
      border-color: var(--hairline);
      color: var(--amber);
    }
    #viewChat .chat-terminal-panel .chat-terminal-screen {
      background: var(--card);
      color: var(--ink);
    }

    #viewVoice {
      background: var(--bg);
      color: var(--ink);
    }
    #viewVoice .voice-header {
      background: var(--card);
      border-bottom-color: var(--hairline);
      box-shadow: var(--shadow);
    }
    #viewVoice .voice-auth-card,
    #viewVoice .voice-session-row,
    #viewVoice .voice-card {
      background: var(--card);
      border-color: var(--hairline);
      box-shadow: var(--shadow);
    }
    #viewVoice .voice-session-row { border-radius: var(--radius); }
    #viewVoice .voice-intro { margin-top: 28px; }
    #viewVoice .voice-orb {
      background: var(--accent);
      box-shadow: 0 16px 34px rgba(79,70,229,.24), inset 0 1px 1px rgba(255,255,255,.35);
    }
    #viewVoice .voice-orb:hover { background: var(--accent-hover); box-shadow: 0 20px 40px rgba(79,70,229,.3); }
    #viewVoice .voice-card { border-radius: var(--radius); }
    #viewVoice .voice-panels { gap: 12px; }
    #viewVoice .voice-footnote { color: var(--dim); }

    @media (max-width: 768px) {
      #viewChat .chat-terminal-panel:not([hidden]) { margin: 8px 10px; }
      #viewVoice .voice-header { box-shadow: 0 1px 3px rgba(28,25,23,.06); }
      #viewVoice .voice-stage { padding-top: 16px; }
    }

    /* ── reference skin: warm retro desktop / pixel utility ── */
    :root {
      --bg: #fffdf4;
      --card: #fffef9;
      --ink: #141414;
      --dim: #5f5a50;
      --faint: #d7d0c2;
      --hairline: #171717;
      --accent: #4534d7;
      --accent-hover: #3424ad;
      --accent-bg: #ded8ff;
      --green: #148f47;
      --green-bg: #d9f6c9;
      --amber: #bc6a00;
      --amber-bg: #fff0a9;
      --red: #d7293e;
      --red-bg: #ffdce2;
      --radius: 4px;
      --radius-sm: 3px;
      --shadow: 3px 3px 0 rgba(20,20,20,.92);
    }
    body {
      background-color: var(--bg);
      background-image: radial-gradient(rgba(20,20,20,.11) .7px, transparent .7px);
      background-size: 6px 6px;
      font-family: "SF Mono", "Courier New", ui-monospace, Menlo, "PingFang SC", monospace;
      letter-spacing: 0;
    }
    .main { background: transparent; }
    button, input, select, textarea { border-radius: var(--radius-sm); }
    button { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
    button:hover { border-color: var(--ink); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
    button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
    button.primary { background: #ffdc45; color: var(--ink); border-color: var(--ink); }
    button.primary:hover { background: #ffd21c; }

    /* Sidebar: make the first two tabs the shared visual anchor. */
    .sidebar {
      width: 210px;
      background: rgba(255,254,249,.97);
      border-right: 2px solid var(--ink);
    }
    .sidebar-header {
      position: relative;
      min-height: 92px;
      padding: 18px 16px 14px 68px;
      border-bottom: 2px solid var(--ink);
    }
    .sidebar-header::before {
      content: '';
      position: absolute;
      left: 16px; top: 17px;
      width: 38px; height: 38px;
      display: grid; place-items: center;
      color: var(--ink); background: #ffdc45 url('/static/assets/pixel-dashboard-bot.png') center / 34px 34px no-repeat;
      border: 2px solid var(--ink);
      box-shadow: 3px 3px 0 var(--ink);
      font: 800 25px/1 "Courier New", monospace;
    }
    .sidebar-header h1 { font: 800 18px/1.2 "Courier New", "PingFang SC", monospace; }
    .sidebar-header .live { margin-top: 7px; font: 11px/1.2 "Courier New", monospace; color: var(--dim); }
    .sidebar-nav { padding: 10px 10px 12px; border-bottom: 2px solid var(--ink); gap: 7px; }
    .nav-item {
      min-height: 42px;
      padding: 8px 10px;
      border: 2px solid transparent;
      border-radius: 2px;
      color: var(--ink);
      font: 700 13px/1.2 "Courier New", "PingFang SC", monospace;
      transition: background .12s ease, transform .12s ease, box-shadow .12s ease;
    }
    .nav-item:hover { background: var(--accent-bg); color: var(--ink); border-color: var(--ink); transform: translate(-1px,-1px); box-shadow: 2px 2px 0 var(--ink); }
    .nav-item.active { background: #ffdc45; color: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); font-weight: 800; }
    .nav-item svg { width: 19px; height: 19px; }
    .sidebar-section { padding: 14px 16px 7px; color: var(--ink); font: 800 11px/1.2 "Courier New", monospace; letter-spacing: .04em; }
    .sidebar-list { padding: 0 10px 14px; }
    .dm-item { padding: 8px 6px; border: 2px solid transparent; border-bottom-color: var(--faint); border-radius: 2px; }
    .dm-item:hover, .dm-item.active { background: var(--accent-bg); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
    .dm-avatar { border: 2px solid var(--ink); border-radius: 3px; }
    .chat-scope-note { margin: 0 10px 12px; padding: 9px 10px; border: 2px solid var(--ink); border-radius: 2px; background: #f0eee8; box-shadow: 2px 2px 0 var(--ink); font: 10px/1.5 "PingFang SC", sans-serif; }

    /* Dashboard / services: black outlines, paper cards, bright status chips. */
    #viewDashboard .wrap { max-width: 760px; padding-top: 22px; }
    .mast { padding: 12px 0 18px; }
    .mast h1, .services-head h1 { font-family: "Courier New", "PingFang SC", monospace; font-weight: 900; }
    .mast h1::before { content: '◈'; display: inline-block; margin-right: 8px; color: #ffb400; text-shadow: 1px 1px 0 var(--ink); }
    .hero, .svc, .cost-card, .pool-card, .ext-card, .service-card, .gateway-card {
      border: 2px solid var(--ink);
      border-radius: 3px;
      box-shadow: var(--shadow);
    }
    .hero { position: relative; overflow: hidden; background: #ffea73; padding: 24px 22px; }
    .hero::after { content: '!!'; position: absolute; right: 18px; bottom: 4px; color: var(--red); font: 900 42px/1 "Courier New", monospace; transform: rotate(-8deg); opacity: .8; }
    .sec { color: var(--ink); font: 900 12px/1.2 "Courier New", "PingFang SC", monospace; letter-spacing: .03em; text-transform: uppercase; }
    .dashboard-switcher {
      position: sticky; top: 0; z-index: 12;
      display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0; margin: 22px 0 4px;
      border: 2px solid var(--ink); background: #f0eee8;
      box-shadow: 3px 3px 0 var(--ink);
    }
    .dashboard-switch {
      min-width: 0; min-height: 58px; padding: 9px 10px;
      display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
      border: 0; border-right: 2px solid var(--ink); border-radius: 0;
      background: #fffef9; color: var(--ink); box-shadow: none;
      font-family: "Courier New", "PingFang SC", monospace; text-align: left;
    }
    .dashboard-switch:last-child { border-right: 0; }
    .dashboard-switch:hover { transform: none; box-shadow: inset 0 -4px 0 #ded8ff; }
    .dashboard-switch.active { background: #ffdc45; box-shadow: inset 0 -5px 0 var(--ink); }
    .dashboard-switch span { font-size: 13px; font-weight: 900; white-space: nowrap; }
    .dashboard-switch small { max-width: 100%; overflow: hidden; color: var(--dim); font: 700 10px/1.2 "Courier New", monospace; text-overflow: ellipsis; white-space: nowrap; }
    .dashboard-panel { min-height: 330px; animation: dashboard-panel-in .16s ease-out; }
    .dashboard-panel[hidden] { display: none !important; }
    @keyframes dashboard-panel-in { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: none; } }
    .panel-more {
      width: 100%; margin-top: 12px; padding: 10px 14px;
      background: #ded8ff; color: var(--ink);
      font: 900 12px/1.2 "Courier New", "PingFang SC", monospace;
    }
    .cost-mode-switch {
      display: inline-grid; grid-template-columns: repeat(3, 1fr);
      margin-bottom: 12px; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
    }
    .cost-mode-switch button {
      min-width: 110px; padding: 8px 14px; border: 0; border-right: 2px solid var(--ink);
      border-radius: 0; background: #fffef9; box-shadow: none;
      color: var(--ink); font: 900 11px/1 "Courier New", "PingFang SC", monospace;
    }
    .cost-mode-switch button:last-child { border-right: 0; }
    .cost-mode-switch button:hover { transform: none; box-shadow: none; }
    .cost-mode-switch button.active { background: #ded8ff; box-shadow: inset 0 -3px 0 var(--ink); }
    .cost-mode-panel[hidden] { display: none !important; }
    .dashboard-panel .sec { margin-top: 20px; }
    .dashboard-panel .session-health-card { padding: 12px 16px; }
    .dashboard-panel .session-health-meter { height: 6px; margin: 8px 0 5px; }
    .dashboard-panel .session-health-foot strong { font-size: 16px; }
    .gateway-card { background: rgba(255,254,249,.96); }
    .gateway-billing { border: 2px solid var(--ink); border-radius: 2px; background: #fff8dc; }
    .gateway-fact { border: 2px solid var(--ink); border-radius: 2px; }
    .gateway-meter { border: 2px solid var(--ink); border-radius: 2px; background: #ebe7db; }
    .gateway-meter i { border-radius: 0; background: #55d77e; }
    .gateway-warnings { border: 2px solid var(--ink); border-left-width: 7px; background: #ffef9e; color: var(--ink); }
    .svc { background: rgba(255,254,249,.96); }
    .badge { border: 2px solid var(--ink); border-radius: 2px; padding: 3px 8px; font: 800 10px/1 "Courier New", monospace; }
    .badge.ok { background: var(--green-bg); color: var(--ink); }
    .badge.warn { background: var(--amber-bg); color: var(--ink); }
    .badge.crit { background: var(--red-bg); color: var(--ink); }
    .meter .m-bar { height: 8px; border: 2px solid var(--ink); background: #ebe7db; border-radius: 1px; }
    .meter .m-bar > i { border-radius: 0; }
    .services-wrap { max-width: 980px; padding-top: 30px; }
    .services-kicker, .voice-kicker { color: var(--accent); font-weight: 900; }
    .services-refresh { background: #ded8ff; color: var(--ink); }
    .services-summary { color: var(--ink); font-weight: 700; }
    .service-card { background: rgba(255,254,249,.96); }
    .service-card:hover { transform: translate(-2px,-2px); border-color: var(--ink); box-shadow: 5px 5px 0 var(--ink); }
    .service-category { border: 2px solid var(--ink); border-radius: 2px; color: var(--ink); background: #ded8ff; font: 800 10px/1 "Courier New", monospace; }
    .service-state.online { color: var(--green); font-weight: 800; }
    .service-state.online i { box-shadow: 0 0 0 2px var(--green-bg); }

    /* Chat: light paper shell around the live terminal. */
    #viewChat .chat-header { background: #d9f6c9; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
    #viewChat .chat-title { font-family: "Courier New", "PingFang SC", monospace; font-weight: 900; }
    #viewChat .chat-agent-avatar { border: 2px solid var(--ink); border-radius: 3px; }
    #viewChat .chat-mode-pill { border: 2px solid var(--ink); border-radius: 2px; color: var(--ink); }
    #viewChat .icon-btn, #viewChat .chat-back-btn, #viewChat .font-settings-btn { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); color: var(--ink); }
    #viewChat .icon-btn.danger { color: var(--red); border-color: var(--ink); background: #ffb4c0; }
    #viewChat .font-settings-panel { border: 2px solid var(--ink); border-radius: 2px; box-shadow: 4px 4px 0 var(--ink); }
    #viewChat .chat-terminal-panel:not([hidden]) { border: 2px solid var(--ink); border-radius: 3px; box-shadow: 4px 4px 0 var(--ink); }
    #viewChat .input-area { background: #fff0a9; border-top: 2px solid var(--ink); }
    #viewChat .input-box { border: 2px solid var(--ink); border-radius: 3px; background: var(--card); }
    #viewChat .voice-btn { border: 2px solid var(--ink); color: var(--ink); }
    #viewChat .send-btn { border: 2px solid var(--ink); border-radius: 3px; background: #ffb4c0; color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
    #viewChat .send-btn:hover { background: #ff91a4; }
    #viewChat .send-btn:disabled { background: #ded8ff; border-color: var(--ink); color: var(--ink); }

    /* Voice: lavender paper, matching the same card and control grammar. */
    #viewVoice { background-color: #f3efff; background-image: radial-gradient(rgba(69,52,215,.12) .7px, transparent .7px); background-size: 6px 6px; }
    #viewVoice .voice-header { background: #ded8ff; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
    #viewVoice .voice-heading strong, #viewVoice .voice-intro h2 { font-family: "Courier New", "PingFang SC", monospace; font-weight: 900; }
    #viewVoice .voice-auth-card, #viewVoice .voice-session-row, #viewVoice .voice-card { border: 2px solid var(--ink); border-radius: 3px; box-shadow: var(--shadow); }
    #viewVoice .voice-session-row { background: var(--card); }
    #viewVoice .voice-orb { border: 2px solid var(--ink); border-radius: 50%; background: #8065ed; box-shadow: 4px 4px 0 var(--ink); }
    #viewVoice .voice-orb:hover { background: #684be0; box-shadow: 5px 5px 0 var(--ink); }
    #viewVoice .voice-card textarea { border: 2px solid var(--ink); border-radius: 2px; background: #fffef9; }
    #viewVoice .voice-send, #viewVoice .voice-speak { border: 2px solid var(--ink); border-radius: 2px; box-shadow: 2px 2px 0 var(--ink); }
    #viewVoice .voice-send { background: #b9a5ff; color: var(--ink); }
    #viewVoice .voice-speak { background: #ded8ff; color: var(--ink); }

    .tabbar { background: #fffef9; border-top: 2px solid var(--ink); }
    .tabbar-item { color: var(--ink); font: 800 10px/1.2 "Courier New", "PingFang SC", monospace; }
    .tabbar-item.active { color: var(--ink); background: #ffdc45; box-shadow: inset 0 -3px 0 var(--ink); }
    .tabbar-item svg { stroke-width: 2.2; }

    @media (max-width: 768px) {
      .sidebar-header { min-height: 78px; padding: 14px 12px 11px 58px; }
      .sidebar-header::before { left: 12px; top: 13px; width: 34px; height: 34px; }
      #viewDashboard .wrap { padding-top: 14px; }
      .hero { padding: 18px 16px; }
      .hero::after { right: 8px; font-size: 28px; }
      .dashboard-switcher { margin-top: 14px; }
      .dashboard-switch { min-height: 54px; padding: 8px 6px; }
      .dashboard-switch span { font-size: 11px; }
      .dashboard-switch small { font-size: 9px; }
      .dashboard-panel { min-height: 280px; }
      #viewChat .chat-header { border-left: 0; border-right: 0; border-radius: 0; box-shadow: 0 2px 0 var(--ink); }
      #viewVoice .voice-header { border-left: 0; border-right: 0; border-radius: 0; box-shadow: 0 2px 0 var(--ink); }
      #viewVoice .voice-orb { box-shadow: 3px 3px 0 var(--ink); }
    }
    @media (max-width: 480px) {
      .dashboard-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .dashboard-switch:nth-child(2) { border-right: 0; }
      .dashboard-switch:nth-child(-n+2) { border-bottom: 2px solid var(--ink); }
      .dashboard-switch:nth-child(3) { border-right: 2px solid var(--ink); }
      .dashboard-switch span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    }

    /* Interactive cost points: reset the global retro button treatment. */
    .cost-trend-plot .cost-trend-column {
      min-width: 0; padding: 0; border: 0; border-radius: 0;
      background: transparent; color: var(--ink); box-shadow: none;
      font: inherit; text-align: center;
    }
    .cost-trend-plot .cost-trend-column:hover,
    .cost-trend-plot .cost-trend-column:active {
      border: 0; background: transparent; color: var(--ink);
      transform: none; box-shadow: none;
    }
    .cost-trend-plot .cost-trend-column:focus-visible {
      outline: 2px solid var(--accent); outline-offset: 3px;
    }
    .cost-trend-value { min-height: 18px; transition: opacity .15s ease; }
    .cost-trend-value.is-hover-only { opacity: 0; }
    .cost-trend-column:hover .cost-trend-value.is-hover-only,
    .cost-trend-column:focus-visible .cost-trend-value.is-hover-only,
    .cost-trend-column.is-selected .cost-trend-value.is-hover-only { opacity: 1; }
    .cost-trend-column.is-selected .cost-trend-bar { box-shadow: 3px 0 0 #ee4b43, 0 -3px 0 var(--ink); }
    .cost-trend-selected { margin-inline: 14px; }

    /* Devices: a dense field board for observer-only phone status. */
    #viewDevices {
      overflow-y: auto;
      background-color: #edf4eb;
      background-image:
        linear-gradient(rgba(25,35,27,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(25,35,27,.055) 1px, transparent 1px);
      background-size: 18px 18px;
    }
    .devices-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 30px 28px 90px; }
    .devices-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
    .devices-kicker { margin-bottom: 7px; color: #256137; font: 900 11px/1.2 "Courier New", monospace; letter-spacing: .11em; }
    .devices-head h1 { margin: 0; color: var(--ink); font: 900 34px/1 "Courier New", "PingFang SC", monospace; }
    .devices-head p { max-width: 600px; margin: 10px 0 0; color: #526057; font-size: 13px; line-height: 1.6; }
    .devices-refresh {
      display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto;
      margin-left: auto; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 3px;
      background: #d9f6c9; color: var(--ink); box-shadow: 3px 3px 0 var(--ink);
      font: 900 12px/1 "Courier New", "PingFang SC", monospace;
    }
    .devices-refresh:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
    .devices-refresh.loading svg { animation: device-spin .8s linear infinite; }
    @keyframes device-spin { to { transform: rotate(360deg); } }
    .devices-source {
      display: inline-flex; align-items: center; margin-top: 14px; padding: 7px 10px;
      border: 2px solid var(--ink); border-radius: 2px; background: #fffef9;
      color: var(--ink); font: 800 11px/1.2 "Courier New", "PingFang SC", monospace;
    }
    .devices-source::before { content: ''; width: 8px; height: 8px; margin-right: 7px; border: 1px solid var(--ink); border-radius: 50%; background: #a8b0aa; }
    .devices-source.healthy::before { background: #3cc56a; }
    .devices-source.degraded::before { background: #ffbf3f; }
    .devices-source.offline::before { background: #ee5d62; }
    .usb-devices-section { margin: 22px 0 12px; }
    .usb-device-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
    .usb-device-card { padding: 14px 12px 12px 18px; }
    .usb-device-card .device-identity h2 { font-size: 15px; }
    .usb-device-detail, .usb-devices-note { margin: 10px 0 0 4px; color: #5f6c63; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
    .usb-devices-note { margin: 12px 0 0; }
    .devices-switcher { position: sticky; top: 0; z-index: 8; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 8px; }
    .devices-panel { min-height: 240px; }
    .devices-panel[hidden] { display: none !important; }
    .devices-summary { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; margin: 0 0 14px; }
    .device-stat {
      min-width: 0; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 3px;
      background: rgba(255,254,249,.96); box-shadow: 2px 2px 0 var(--ink);
    }
    .device-stat strong { display: block; color: var(--ink); font: 900 25px/1 "Courier New", monospace; }
    .device-stat span { display: block; margin-top: 5px; color: #607066; font-size: 11px; font-weight: 800; }
    .devices-tree, .devices-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; align-items: start; }
    .device-card {
      position: relative; min-width: 0; overflow: hidden; padding: 0;
      border: 2px solid var(--ink); border-radius: 4px; background: #fffef9;
      box-shadow: 4px 4px 0 var(--ink);
    }
    .device-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 7px; background: #a8b0aa; border-right: 2px solid var(--ink); }
    .device-card.state-ready::before { background: #55d77e; }
    .device-card.state-busy::before { background: #ffcf48; }
    .device-card.state-issue::before { background: #ff7f86; }
    .device-card.state-offline::before, .device-card.state-blocked::before { background: #bcc2be; }
    .device-tree-toggle {
      display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center;
      width: 100%; padding: 14px 14px 14px 18px; border: 0; border-radius: 0;
      background: transparent; box-shadow: none; text-align: left; cursor: pointer;
    }
    .device-tree-toggle:hover { transform: none; box-shadow: none; background: #f5f8f2; }
    .device-tree-card.is-open .device-tree-toggle { border-bottom: 1px solid #d5dbd5; background: #f3f7ef; }
    .device-tree-chevron {
      width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
      transform: rotate(-45deg); transition: transform .14s ease; margin-right: 4px;
    }
    .device-tree-card.is-open .device-tree-chevron { transform: rotate(45deg); }
    .device-tree-summary { margin: 4px 0 0; color: #5f6c63; font-size: 11px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .device-tree-body { padding: 0 14px 14px 18px; }
    .device-tree-body[hidden] { display: none !important; }
    .device-card-top { display: flex; justify-content: space-between; gap: 12px; padding-left: 4px; min-width: 0; }
    .device-identity { display: flex; align-items: center; min-width: 0; gap: 11px; }
    .device-alias {
      display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px;
      border: 2px solid var(--ink); border-radius: 50%; background: #d9f6c9;
      color: var(--ink); font: 900 13px/1 "Courier New", monospace;
    }
    .device-identity h2 { overflow: hidden; margin: 0; color: var(--ink); font-size: 16px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
    .device-identity p { margin: 4px 0 0; color: #68736b; font-size: 11px; }
    .device-state { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; flex: 0 0 auto; padding: 5px 7px; border: 2px solid var(--ink); border-radius: 2px; color: var(--ink); font-size: 10px; font-weight: 900; }
    .device-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
    .device-state.ready { background: #d9f6c9; }
    .device-state.busy { background: #ffea91; }
    .device-state.issue { background: #ffc6ca; }
    .device-state.offline, .device-state.blocked, .device-state.unknown { background: #eceeea; }
    .device-task { margin: 16px 0 12px 4px; padding: 12px; border: 2px solid #d7dcd7; background: #f4f4ef; }
    .device-task.active { border-color: var(--ink); background: #fff2b8; box-shadow: 2px 2px 0 var(--ink); }
    .device-task-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
    .device-task-label { display: block; color: #617066; font: 900 9px/1 "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
    .device-task-status { flex: 0 0 auto; padding: 3px 6px; border: 1px solid var(--ink); background: #ffcf48; color: var(--ink); font: 900 8px/1 "Courier New", monospace; letter-spacing: .04em; text-transform: uppercase; }
    .device-task-status.idle { border-color: #91a096; background: #e8eee8; color: #526057; }
    .device-task strong { display: block; overflow-wrap: anywhere; color: var(--ink); font-size: 12px; line-height: 1.45; }
    .device-task small { display: block; margin-top: 6px; overflow-wrap: anywhere; color: #59635c; font-size: 10px; line-height: 1.4; }
    .device-glance { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; margin-left: 4px; border: 2px solid var(--ink); background: var(--ink); }
    .device-glance > div { min-width: 0; padding: 9px 10px; background: #fffef9; }
    .device-glance span, .device-glance strong, .device-glance small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .device-glance span { color: #68736b; font-size: 9px; font-weight: 800; }
    .device-glance strong { margin-top: 5px; color: var(--ink); font: 900 11px/1.2 "Courier New", "PingFang SC", monospace; }
    .device-glance small { margin-top: 4px; color: #7a847d; font-size: 8px; }
    .device-glance .freshness-stale { background: #fff0cf; }
    .device-issue { margin: 10px 0 0 4px; padding: 8px 10px; border: 2px solid var(--ink); background: #ffc6ca; color: var(--ink); font-size: 11px; font-weight: 800; }
    .device-details { margin: 11px 0 0 4px; padding: 12px; border: 2px solid var(--ink); background: #eef4ea; box-shadow: inset 0 0 0 3px #fffef9; }
    .device-details-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 9px; border-bottom: 1px solid #aab6ac; }
    .device-details-head span { color: #48604f; font: 900 9px/1 "Courier New", monospace; letter-spacing: .1em; }
    .device-details-head b { padding: 3px 6px; background: var(--ink); color: #fffef9; font-size: 8px; letter-spacing: .08em; }
    .device-details dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin: 3px 0 0; }
    .device-details dl > div { min-width: 0; padding: 9px 0; border-bottom: 1px solid #cbd4cc; }
    .device-details dt { color: #68736b; font-size: 8px; font-weight: 900; letter-spacing: .04em; }
    .device-details dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--ink); font: 800 10px/1.45 "Courier New", "PingFang SC", monospace; }
    .device-details dd em { padding: 2px 4px; background: #ffe6a4; font: inherit; font-size: 8px; font-style: normal; }
    .device-details p { margin: 10px 0 0; color: #5d6a60; font: 800 8px/1.5 "Courier New", "PingFang SC", monospace; }
    .device-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 0 0 4px; }
    .device-actions button { min-width: 0; padding: 9px 10px; border: 2px solid var(--ink); border-radius: 2px; color: var(--ink); box-shadow: 2px 2px 0 var(--ink); font-size: 10px; font-weight: 900; }
    .device-actions button:first-child { background: #d9f6c9; }
    .device-actions button:last-child { background: #dfe8ff; }
    .device-actions button:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
    .device-screen { position: relative; margin: 14px 0 0 4px; padding: 10px; border: 2px solid var(--ink); background: #1c211d; }
    .device-screen-meta { margin-bottom: 8px; color: #d9e6d9; font: 800 10px/1.2 "Courier New", "PingFang SC", monospace; }
    .device-screen-image { display: block; width: 100%; max-height: 460px; object-fit: contain; background: #080a08; }
    .device-screen-fallback { display: none; min-height: 150px; place-items: center; color: #aeb7af; font-size: 11px; }
    .device-screen.unavailable .device-screen-fallback { display: grid; }
    /* ADB remote control (Mac-local USB phones) */
    .adb-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 0 4px; }
    .adb-chips span { padding: 3px 6px; border: 1px solid #aab6ac; background: #f4f7f1; color: #3f4d43; font: 800 9px/1.2 "Courier New", "PingFang SC", monospace; }
    .adb-lease-chip.mine { border-color: #0b7a53; background: #d9f6c9; color: #0b5a3e; }
    .adb-lease-chip.other { border-color: #b7372d; background: #ffe0e0; color: #8a241c; }
    .adb-thumb { display: block; width: 100%; max-height: 220px; margin: 10px 0 0 4px; object-fit: contain; border: 2px solid var(--ink); background: #080a08; cursor: pointer; }
    .adb-card-actions { grid-template-columns: 1fr; }
    .adb-card-actions button:first-child { background: #ffe6a4; }
    .adb-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0; padding: 10px 12px; border: 2px solid var(--ink); background: #fffef9; }
    .adb-toolbar[hidden] { display: none; }
    .adb-toolbar span { min-width: 0; color: #3f4d43; font: 800 10px/1.5 "Courier New", "PingFang SC", monospace; overflow-wrap: anywhere; }
    .adb-toolbar button { min-height: 40px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 2px; background: #dfe8ff; color: var(--ink); box-shadow: 2px 2px 0 var(--ink); font-size: 11px; font-weight: 900; }
    .adb-toolbar button:disabled { opacity: .55; }
    .adb-control { margin: 14px 0 0; padding: 12px; border: 2px solid var(--ink); background: #1c211d; color: #e6efe6; }
    .adb-control[hidden] { display: none; }
    .adb-control-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
    .adb-control-head strong { display: block; font-size: 14px; }
    .adb-control-head small { display: block; margin-top: 3px; color: #aeb7af; font: 800 9px/1.3 "Courier New", "PingFang SC", monospace; }
    .adb-head-right { display: flex; align-items: center; gap: 8px; }
    .adb-takeover { min-height: 32px; padding: 4px 10px; border: 2px solid #ffd27a; border-radius: 2px; background: #5a4a1e; color: #ffe6a4; font-size: 11px; font-weight: 900; }
    .adb-takeover[hidden] { display: none; }
    .adb-control-head .adb-lease-chip { padding: 4px 7px; border: 1px solid #748078; font: 900 9px/1 "Courier New", "PingFang SC", monospace; }
    .adb-screen-wrap { position: relative; display: grid; place-items: center; min-height: 240px; background: #080a08; }
    .adb-screen { display: block; width: 100%; max-height: 72vh; object-fit: contain; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
    .adb-screen-wrap:not(.ready) .adb-screen { visibility: hidden; }
    .adb-overlay { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
    .adb-screen-empty { position: absolute; color: #aeb7af; font-size: 11px; pointer-events: none; }
    .adb-screen-wrap.ready .adb-screen-empty { display: none; }
    .adb-control.sending .adb-overlay { cursor: progress; background: rgba(255,255,255,.04); }
    .adb-hint { margin: 6px 0 0; color: #aeb7af; font-size: 10px; text-align: center; }
    .adb-control-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
    .adb-control-row button, .adb-text-row button { min-height: 44px; padding: 6px 4px; border: 2px solid #e6efe6; border-radius: 2px; background: #2b332d; color: #e6efe6; font-size: 11px; font-weight: 900; }
    .adb-control-row button[aria-pressed="true"] { background: #ffe6a4; color: var(--ink); }
    .adb-control-row [data-adb-close] { background: #5a2a26; }
    .adb-text-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-top: 8px; }
    .adb-text-row input { min-width: 0; min-height: 44px; padding: 0 10px; border: 2px solid #e6efe6; border-radius: 2px; background: #0f1310; color: #e6efe6; font-size: 16px; }
    .adb-text-row button { padding: 6px 12px; }
    .adb-control.readonly .adb-control-row [data-adb-key], .adb-control.readonly .adb-control-row [data-adb-swipe], .adb-control.readonly .adb-text-row { opacity: .45; }
    .adb-control.readonly .adb-overlay { cursor: not-allowed; }
    .adb-control-status { min-height: 18px; margin-top: 8px; color: #aeb7af; font: 800 10px/1.5 "Courier New", "PingFang SC", monospace; }
    .adb-control-status[data-tone="ok"] { color: #9be3a5; }
    .adb-control-status[data-tone="warn"] { color: #ffd27a; }
    .adb-control-status[data-tone="error"] { color: #ff9c94; }
    @media (max-width: 520px) { .adb-control-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .devices-empty { grid-column: 1/-1; display: grid; gap: 8px; min-height: 180px; place-items: center; align-content: center; padding: 28px; border: 2px dashed #748078; background: rgba(255,254,249,.78); color: #5f6c63; text-align: center; }
    .devices-empty strong { color: var(--ink); font-size: 15px; }
    .devices-empty span { max-width: 420px; font-size: 12px; line-height: 1.6; }
    .devices-note { margin-top: 18px; color: #667269; font-size: 10px; text-align: center; }

    /* Control tower: keep cross-layer truth visible without turning the
       device cards into an operations console. Optional overview facts remain
       explicitly labelled until the versioned Observer DTO is available. */
    .tower-summary { margin: 0; }
    .tower-panel { padding: 16px; border: 2px solid var(--ink); background: rgba(255,254,249,.94); box-shadow: 3px 3px 0 var(--ink); }
    .tower-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
    .tower-kicker { display: block; margin-bottom: 5px; color: #256137; font: 900 10px/1.2 "Courier New", monospace; letter-spacing: .12em; }
    .tower-panel h2 { margin: 0; color: var(--ink); font: 900 20px/1.1 "Courier New", "PingFang SC", monospace; }
    .tower-readonly { flex: 0 0 auto; padding: 5px 7px; border: 2px solid var(--ink); background: #e8eee8; color: var(--ink); font: 900 9px/1 "Courier New", monospace; }
    .tower-panel-intro { margin: 8px 0 14px; color: #5c6a60; font-size: 11px; line-height: 1.5; }
    .tower-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 10px; }
    .tower-chip {
      display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px;
      border: 1px solid #aab6ac; background: #eef4ea; color: #435549;
      font: 900 9px/1 "Courier New", "PingFang SC", monospace;
    }
    .tower-chip i { width: 6px; height: 6px; border-radius: 50%; background: #a8b0aa; }
    .tower-chip.tower-fresh { border-color: #75b77e; background: #f0fae9; }
    .tower-chip.tower-fresh i { background: #3cc56a; }
    .tower-chip.tower-stale { border-color: #d6a638; background: #fff6d5; }
    .tower-chip.tower-stale i { background: #ffbf3f; }
    .tower-chip.tower-offline { border-color: #d37c82; background: #fff0f0; }
    .tower-chip.tower-offline i { background: #ee5d62; }
    .tower-source-grid, .tower-facts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .tower-facts-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .tower-facts-primary { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
    .tower-fact-primary strong { font-size: 18px; }
    .tower-more { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #cbd4cc; display: grid; gap: 10px; }
    .tower-more[hidden] { display: none !important; }
    .tower-more-btn {
      padding: 7px 10px; border: 2px solid var(--ink); border-radius: 2px;
      background: #e8eee8; color: var(--ink); box-shadow: 2px 2px 0 var(--ink);
      font: 900 10px/1 "Courier New", "PingFang SC", monospace;
    }
    .tower-more-btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
    .tower-split-tight { margin-top: 10px; gap: 8px; }
    .tower-split-tight .tower-xw { margin-top: 0; padding-top: 0; border-top: 0; }
    .tower-source { min-width: 0; padding: 10px; border: 1px solid #aab6ac; background: #eef4ea; }
    .tower-source > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .tower-source span { overflow: hidden; color: #435549; font-size: 10px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
    .tower-source b { flex: 0 0 auto; padding: 3px 5px; border: 1px solid var(--ink); background: #e8eee8; color: var(--ink); font: 900 8px/1 "Courier New", monospace; }
    .tower-source small, .tower-source em { display: block; overflow: hidden; margin-top: 6px; color: #6a776e; font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
    .tower-source em { margin-top: 3px; color: #4e5d52; font-style: normal; font-weight: 800; }
    .tower-source.tower-fresh { border-color: #75b77e; background: #f0fae9; }
    .tower-source.tower-fresh b { background: #d9f6c9; }
    .tower-source.tower-stale { border-color: #d6a638; background: #fff6d5; }
    .tower-source.tower-stale b { background: #ffea91; }
    .tower-source.tower-offline { border-color: #d37c82; background: #fff0f0; }
    .tower-source.tower-offline b { background: #ffc6ca; }
    .tower-facts-grid { margin-top: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tower-fact { min-width: 0; padding: 10px; border: 2px solid #d5dbd5; background: #fffef9; }
    .tower-fact span, .tower-fact strong, .tower-fact small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tower-fact span { color: #68736b; font-size: 9px; font-weight: 900; }
    .tower-fact strong { margin-top: 5px; color: var(--ink); font: 900 14px/1.2 "Courier New", "PingFang SC", monospace; }
    .tower-fact small { margin-top: 5px; color: #68736b; font-size: 9px; }
    .tower-xw { margin-top: 12px; padding-top: 12px; border-top: 1px solid #cbd4cc; }
    .tower-subhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
    .tower-subhead span { color: #435549; font: 900 10px/1 "Courier New", monospace; letter-spacing: .08em; }
    .tower-subhead small { color: #738077; font-size: 9px; }
    .tower-xw-list { display: grid; gap: 6px; }
    .tower-xw-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(150px, .9fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #cbd4cc; background: #f5f7f2; }
    .tower-xw-row > div:first-child { min-width: 0; }
    .tower-xw-row strong, .tower-xw-row span, .tower-xw-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tower-xw-row strong { color: var(--ink); font: 900 10px/1.2 "Courier New", monospace; }
    .tower-xw-row span { margin-top: 3px; color: #69766d; font-size: 9px; }
    .tower-xw-row > div:nth-child(2) { display: flex; gap: 5px; }
    .tower-xw-row b { padding: 3px 5px; border: 1px solid #9eaaa0; color: #4f5e53; font: 900 8px/1 "Courier New", monospace; }
    .tower-xw-row small { color: #6b786e; font-size: 9px; }
    .tower-xw-empty { display: grid; gap: 4px; padding: 10px; border: 1px dashed #9eaaa0; background: #f5f7f2; }
    .tower-xw-empty strong { color: #4a5a4e; font-size: 10px; }
    .tower-xw-empty span { color: #6b786e; font-size: 9px; line-height: 1.4; }
    .tower-xw-empty-compact { padding: 8px 10px; }
    .tower-xw-empty-compact span { display: none; }
    .tower-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
    .tower-blocker-list, .tower-job-list { display: grid; gap: 6px; }
    .tower-blocker { padding: 10px; border-top: 4px solid #b7372d; background: #261b18; color: #fff; }
    .tower-blocker span, .tower-blocker small { display: block; color: #f0a69f; font: 900 9px/1.3 "Courier New", monospace; }
    .tower-blocker strong { display: block; margin: 6px 0 4px; color: #fff; font-size: 12px; line-height: 1.35; }
    .tower-job-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid #cbd4cc; background: #f5f7f2; }
    .tower-job-row strong, .tower-job-row span, .tower-job-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tower-job-row strong { color: var(--ink); font: 900 11px/1.2 "Courier New", "PingFang SC", monospace; }
    .tower-job-row span { margin-top: 3px; color: #69766d; font-size: 9px; }
    .tower-job-row small { color: #6b786e; font-size: 9px; }
    .tower-job-row.tone-good { border-left: 4px solid #0b7a53; }
    .tower-job-row.tone-bad { border-left: 4px solid #b7372d; }
    .tower-job-row.tone-live { border-left: 4px solid #d47b12; }
    .tower-console-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #cbd4cc; }
    .tower-console-link a { color: #1e5f86; font: 900 11px/1.3 "Courier New", "PingFang SC", monospace; text-decoration: none; border-bottom: 2px solid #1e5f86; }
    .tower-console-link span { color: #6b786e; font-size: 9px; }
    .device-stat small { display: block; margin-top: 4px; color: #7a847d; font-size: 8px; line-height: 1.25; }
    .device-actions button { min-height: 44px; }

    @media (max-width: 820px) {
      .devices-wrap { padding: 22px 18px 100px; }
      .devices-tree, .devices-grid { grid-template-columns: 1fr; }
      .devices-switcher { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .devices-switcher .dashboard-switch { min-height: 52px; padding: 8px 6px; }
      .devices-switcher .dashboard-switch span { font-size: 11px; }
      .devices-switcher .dashboard-switch small { font-size: 9px; }
      .devices-switcher .dashboard-switch:nth-child(n) { border-bottom: 0; border-right: 2px solid var(--ink); }
      .devices-switcher .dashboard-switch:last-child { border-right: 0; }
      .tower-source-grid, .tower-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .tower-facts-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .tower-split { grid-template-columns: 1fr; }
      .tower-xw-row { grid-template-columns: minmax(0, 1fr) auto; }
      .tower-xw-row small { grid-column: 1 / -1; }
    }
    @media (max-width: 560px) {
      .devices-wrap { padding: 14px 12px 90px; }
      .devices-label { display: none; }
      .devices-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 12px; }
      .devices-head > div { min-width: 0; }
      .devices-kicker { margin-bottom: 4px; font-size: 10px; }
      .devices-head h1 { font-size: 24px; }
      .devices-head p { display: none; }
      .devices-refresh {
        grid-column: 2; grid-row: 1; align-self: start;
        width: 42px; height: 42px; padding: 0; gap: 0;
      }
      .devices-refresh-label { display: none; }
      .devices-source { margin-top: 8px; font-size: 10px; }
      .devices-panel > .sec { display: none; }
      .devices-panel { min-height: 0; }
      .devices-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; overflow: visible; padding: 0; }
      .device-stat:last-child { grid-column: 1 / -1; }
      .device-stat { padding: 10px 9px; }
      .device-stat strong { font-size: 20px; }
      .device-stat small { font-size: 8px; }
      .device-tree-toggle { padding: 12px 12px 12px 16px; }
      .device-tree-body { padding: 0 12px 12px 16px; }
      .device-card-top { gap: 8px; }
      .device-state { padding: 4px 6px; }
      .device-glance > div { padding: 8px 6px; }
      .device-glance small { display: none; }
      .device-details dl { grid-template-columns: 1fr; }
      .tower-panel { padding: 12px; }
      .tower-panel h2 { font-size: 16px; }
      .tower-chip-row { margin: 8px 0; gap: 5px; }
      .tower-chip { padding: 4px 6px; font-size: 8px; }
      .tower-facts-primary { gap: 6px; }
      .tower-fact-primary { padding: 8px; }
      .tower-fact-primary strong { font-size: 16px; margin-top: 3px; }
      .tower-split { grid-template-columns: 1fr; gap: 8px; }
      .tower-blocker { padding: 8px; }
      .tower-blocker strong { font-size: 11px; margin: 4px 0; }
      .tower-job-row { padding: 7px 8px; }
      .tower-console-link { margin-top: 10px; padding-top: 10px; }
      .tower-source em, .tower-source small, .tower-fact small { display: none; }
      .tower-subhead { align-items: flex-start; flex-direction: column; gap: 4px; }
      .tower-xw-row { grid-template-columns: 1fr; gap: 7px; }
      .tower-xw-row > div:nth-child(2) { flex-wrap: wrap; }
      .tower-xw-row small { grid-column: auto; }
      .tower-console-link span { display: none; }
    }

    /* ── chat identity/readability reset ──
       The live terminal remains dark, while the conversation shell keeps the
       original paper/card treatment. Identity glyphs and names must stay a
       matched, readable pair in the sidebar, header, and transcript. */
    #viewChat {
      --chat-terminal-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", sans-serif;
      --chat-terminal-size: 14px;
      background: #fffef9;
      color: var(--ink);
    }
    #viewChat .chat-header {
      background: #fff0a9;
      color: var(--ink);
      border: 2px solid var(--ink);
      box-shadow: 3px 3px 0 var(--ink);
    }
    #viewChat .chat-header-left { gap: 12px; }
    #viewChat .chat-agent-avatar,
    .app.view-chat .dm-avatar {
      display: grid;
      place-items: center;
      border: 2px solid var(--ink);
      border-radius: 3px;
      color: var(--ink);
      font: 900 14px/1 "Courier New", "PingFang SC", monospace;
    }
    #viewChat .chat-agent-avatar { width: 38px; height: 38px; }
    .app.view-chat .dm-avatar { width: 34px; height: 34px; }
    .app.view-chat .dm-name {
      color: var(--ink);
      font: 800 13px/1.3 "PingFang SC", "Hiragino Sans GB", sans-serif;
    }
    .app.view-chat .dm-desc {
      margin-top: 2px;
      font: 11px/1.3 "SF Mono", "PingFang SC", monospace;
    }
    #viewChat .chat-title {
      color: var(--ink);
      font: 900 16px/1.25 "PingFang SC", "Hiragino Sans GB", sans-serif;
      letter-spacing: 0;
    }
    #viewChat .chat-subtitle {
      color: #5e5a50;
      font: 700 12px/1.35 "PingFang SC", "Hiragino Sans GB", sans-serif;
    }
    #viewChat .chat-mode-pill {
      color: var(--ink);
      font: 800 11px/1.2 "PingFang SC", "Hiragino Sans GB", sans-serif;
    }
    #viewChat .chat-body { background: #fffef9; }
    #viewChat .messages {
      background: #fffef9;
      color: var(--ink);
      font-family: var(--chat-terminal-font);
    }
    #viewChat .msg {
      display: flex;
      width: min(100%, 900px);
      max-width: 900px;
      padding: 4px 0;
      border-left: 0;
    }
    #viewChat .msg-avatar {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      margin-top: 2px;
      border: 2px solid var(--ink);
      border-radius: 3px;
      color: var(--ink);
      font: 900 13px/1 "Courier New", "PingFang SC", monospace;
    }
    #viewChat .msg-avatar.hidden { display: grid; visibility: hidden; }
    #viewChat .msg-sender {
      color: var(--ink);
      font: 800 13px/1.3 "PingFang SC", "Hiragino Sans GB", sans-serif;
    }
    #viewChat .msg-user .msg-sender { color: #14783c; }
    #viewChat .msg-agent .msg-sender { color: #2f3f99; }
    #viewChat .msg-time { color: #817a6d; font: 11px/1.3 "SF Mono", monospace; }
    #viewChat .msg-text {
      color: var(--ink);
      font-family: var(--chat-terminal-font);
      font-size: var(--chat-terminal-size);
      line-height: 1.65;
    }
    #viewChat .chat-terminal-screen {
      font: var(--chat-terminal-size)/1.5 var(--chat-terminal-font);
    }
    #viewChat .chat-terminal-status,
    #viewChat .chat-control-bar button,
    #viewChat .input-box textarea {
      font-family: var(--chat-terminal-font);
    }
    #viewChat .input-box textarea { font-size: max(16px, var(--chat-terminal-size)); }

    /* ── reference fidelity pass: numbered utility screens + denser cards ── */
    .screen-label {
      display: flex; align-items: center; gap: 10px;
      margin: 0 0 13px; color: var(--ink);
      font: 900 11px/1 "Courier New", "PingFang SC", monospace;
      letter-spacing: .08em;
    }
    .screen-label span {
      display: grid; place-items: center; width: 38px; height: 38px;
      border: 2px solid var(--ink); background: #ffdc45;
      box-shadow: 3px 3px 0 var(--ink); color: var(--ink);
      font-size: 21px; letter-spacing: -.08em;
    }
    .services-label span { background: #88e66e; }
    .devices-label span { background: #9bd4ff; }
    .chat-screen-label span { background: #a9c9ff; }
    .voice-screen-label span { background: #d0b7ff; }
    .pixel-mascot {
      display: block; width: 76px; height: 76px; object-fit: contain;
      image-rendering: pixelated; pointer-events: none; user-select: none;
    }

    #viewDashboard .wrap { max-width: 860px; padding: 18px 22px 76px; }
    .mast {
      display: grid; grid-template-columns: minmax(0, 1fr) auto 76px;
      gap: 16px; min-height: 86px; padding: 0 0 14px;
    }
    .mast-title p { max-width: 420px; margin-top: 5px; color: var(--dim); font: 700 11px/1.5 "PingFang SC", sans-serif; }
    .mast .live { align-self: start; margin-top: 6px; }
    .pixel-mascot-dashboard { align-self: center; }
    .hero { margin-bottom: 15px; background: #ff8db3; }
    .hero .big { max-width: calc(100% - 58px); font-size: clamp(23px, 4vw, 34px); }
    .hero .sub { max-width: calc(100% - 54px); color: #3c2530; font-weight: 700; }
    .dashboard-switcher { position: relative; top: auto; margin: 14px 0 3px; }
    .dashboard-panel { min-height: 0; }
    .dashboard-panel .sec { margin: 16px 0 9px; }
    .svc-grid { gap: 10px; }
    .svc-column { gap: 10px; }
    .svc { padding: 13px 14px; }
    .svc-head { margin-bottom: 7px; }
    .svc-name { font: 900 15px/1.25 "Courier New", "PingFang SC", monospace; }
    .svc-name span { display: block; margin: 2px 0 0; font: 700 10px/1.3 "Courier New", monospace; }
    .meter { padding: 7px 0; }
    .meter .m-row { margin-bottom: 4px; }
    .meter .m-label { color: var(--ink); font-size: 11px; font-weight: 700; }
    .meter .m-val { font-size: 16px; }
    .meter .m-sub { margin-top: 3px; font-size: 10px; line-height: 1.35; }
    .foot { margin-top: 16px; padding: 10px 0; }

    .services-wrap { max-width: 980px; padding: 22px 24px 78px; }
    .services-head { align-items: center; margin-bottom: 10px; }
    .services-head h1 { font-size: 29px; }
    .services-summary { margin: 10px 0 12px; }
    .services-grid { grid-template-columns: 1fr; gap: 9px; }
    .service-card {
      display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(210px, .8fr);
      grid-template-areas: "top name meta" "top description url";
      column-gap: 16px; row-gap: 4px; align-items: center;
      padding: 10px 13px; border-radius: 3px;
    }
    .service-card-top { grid-area: top; align-self: stretch; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; }
    .service-name { grid-area: name; margin: 0; font: 900 16px/1.25 "Courier New", "PingFang SC", monospace; }
    .service-description { grid-area: description; min-height: 0; margin: 0; font-size: 11px; line-height: 1.35; }
    .service-meta { grid-area: meta; align-self: end; margin: 0; padding: 0 0 5px; border: 0; font-size: 10px; }
    .service-url { grid-area: url; align-self: start; margin: 0; font-size: 10px; }
      .service-url strong { padding-left: 8px; }
    .services-note { margin-top: 11px; text-align: center; }

    #viewChat { padding-top: 0; background: #fff8dc; }
    .chat-screen-label, .voice-screen-label {
      flex: 0 0 auto; margin: 0; padding: 10px 14px;
      border-bottom: 2px solid var(--ink); background: #fffef9;
    }
    #viewChat .chat-header { margin: 10px 12px 8px; background: #fff0a9; }
    #viewChat .chat-body { position: relative; margin: 0 12px; border: 2px solid var(--ink); background: #fffef9; box-shadow: 4px 4px 0 var(--ink); }
    #viewChat .messages { color: var(--ink); background: #fffef9; }
    #viewChat .chat-terminal-panel:not([hidden]) { margin: 0; border: 0; box-shadow: none; }
    #viewChat .input-area { margin: 8px 12px 12px; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
    .pixel-mascot-chat { position: absolute; right: 18px; bottom: 14px; z-index: 2; width: 64px; height: 64px; }

    #viewVoice { overflow-y: auto; }
    #viewVoice .voice-header { margin: 10px 12px 0; background: #ded8ff; }
    #viewVoice .voice-stage { width: min(860px, 100%); padding-top: 14px; }
    #viewVoice .voice-session-row { padding: 8px 10px; }
    #viewVoice .voice-intro { position: relative; min-width: 280px; margin: 14px 0 10px; padding-right: 76px; text-align: left; }
    #viewVoice .voice-intro h2 { font-size: clamp(24px, 4vw, 31px); }
    .pixel-mascot-voice { position: absolute; right: 0; bottom: -4px; }
    #viewVoice .voice-orb { width: 104px; height: 104px; }
    #viewVoice .voice-main-status { margin-top: 12px; }
    #viewVoice .voice-panels { margin-top: 16px; }
    #viewVoice .voice-card { padding: 13px; }

    @media (max-width: 768px) {
      .screen-label { margin-bottom: 10px; }
      .screen-label span { width: 32px; height: 32px; font-size: 17px; box-shadow: 2px 2px 0 var(--ink); }
      #viewDashboard .wrap { padding: 12px 13px 82px; }
      .mast { grid-template-columns: minmax(0, 1fr) auto 54px; gap: 9px; min-height: 60px; }
      .mast h1 { font-size: 21px; }
      .mast-title p { font-size: 9px; }
      .pixel-mascot-dashboard { width: 54px; height: 54px; }
      .hero { padding: 16px 14px; }
      .hero .big { font-size: 22px; }
      .hero .sub { font-size: 11px; }
      .dashboard-switcher { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .dashboard-switch { min-height: 48px; padding: 7px 5px; }
      .dashboard-switch span { font-size: 10px; }
      .dashboard-switch small { font-size: 8px; }
      .dashboard-switch:nth-child(n) { border-bottom: 0; }
      .dashboard-switch:nth-child(2) { border-right: 2px solid var(--ink); }
      .gateway-card { padding: 13px; }
      .gateway-card-head { gap: 9px; }
      .gateway-card-head h2 { font-size: 17px; }
      .gateway-card-head p { font-size: 10px; }
      .gateway-billing { padding: 12px; }
      .gateway-billing-head strong { font-size: 22px; }
      .gateway-facts { grid-template-columns: 1fr; gap: 7px; }
      .svc { padding: 11px 10px; }
      .services-wrap { padding: 12px 13px 82px; }
      .service-card { display: block; padding: 11px 12px; }
      .service-card-top { flex-direction: row; align-items: center; }
      .service-name { margin-top: 9px; font-size: 15px; }
      .service-description { margin-top: 3px; font-size: 10px; }
      .service-meta { margin-top: 9px; padding-top: 7px; border-top: 1px solid var(--faint); }
      .service-url { margin-top: 5px; }
      .chat-screen-label, .voice-screen-label { padding: 7px 10px; }
      #viewChat .chat-header, #viewVoice .voice-header { margin: 7px 8px 6px; border: 2px solid var(--ink); }
      #viewChat .chat-body { margin: 0 8px; }
      #viewChat .input-area { margin: 6px 8px 8px; }
      #viewVoice .voice-stage { padding: 8px 11px 82px; }
      #viewVoice .voice-intro { min-width: 250px; padding-right: 66px; }
      .pixel-mascot-voice { width: 64px; height: 64px; }
    }

    @media (max-width: 420px) {
      .mast-title p { display: none; }
      .mast { grid-template-columns: minmax(0, 1fr) auto 50px; }
      .hero .big, .hero .sub { max-width: calc(100% - 34px); }
      .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
      .svc-column { gap: 7px; }
      .svc-name { font-size: 13px; }
      .meter .m-label { font-size: 10px; }
      .meter .m-val { font-size: 14px; }
      .foot { align-items: flex-end; gap: 10px; font-size: 10px; }
      .foot .actions { gap: 6px; }
      .foot button { padding: 8px 10px; }
    }

    /* ── chat mobile repair: one compact header, one message surface ── */
    @media (max-width: 768px) {
      .chat-screen-label { display: none; }
      #viewChat { background: #fff8dc; }
      #viewChat .chat-header {
        min-height: 54px; margin: 0 0 6px; padding: 6px 8px;
        border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
        box-shadow: none; background: #fff0a9;
      }
      #viewChat .chat-header-left { gap: 6px; overflow: hidden; }
      #viewChat .chat-agent-avatar { width: 28px; height: 28px; border-width: 1.5px; font-size: 11px; }
      #viewChat .chat-header-meta { overflow: hidden; }
      #viewChat .chat-title-row { gap: 5px; }
      #viewChat .chat-title { max-width: 100%; font-size: 13px; }
      #viewChat .chat-subtitle { margin-top: 1px; font-size: 9px; }
      #viewChat .chat-mode-pill {
        max-width: 74px; padding: 2px 5px; overflow: hidden;
        border-width: 1.5px; font-size: 8px; text-overflow: ellipsis; white-space: nowrap;
      }
      #viewChat .chat-header-right { align-items: center; gap: 4px; }
      #viewChat .mobile-session-picker {
        position: relative; display: block; width: 78px; padding: 0;
        border: 0; background: transparent;
      }
      #viewChat .mobile-session-picker[hidden] { display: none !important; }
      #viewChat .mobile-session-picker select {
        width: 100%; height: 32px; min-width: 0; padding: 4px 18px 4px 6px;
        overflow: hidden; border: 1.5px solid var(--ink); border-radius: 2px;
        background: #fffef9; color: var(--ink); box-shadow: 1px 1px 0 var(--ink);
        font: 800 10px/1.2 "Courier New", "PingFang SC", monospace;
        text-overflow: ellipsis; white-space: nowrap; color-scheme: light;
      }
      #viewChat .font-settings-btn,
      #viewChat .icon-btn,
      #viewChat .chat-back-btn { width: 30px; height: 30px; flex: 0 0 30px; }

      #viewChat .chat-body {
        margin: 0 8px; border: 2px solid var(--ink);
        background: #fffef9; box-shadow: none;
      }
      #viewChat .messages {
        padding: 10px 11px 12px; background: #fffef9;
        color: var(--ink); gap: 0;
      }
      #viewChat .messages::before { content: ''; margin-top: auto; }
      #viewChat .msg-group { margin-bottom: 7px; }
      #viewChat .msg { margin-bottom: 4px; padding: 3px 0 3px 8px; }
      #viewChat .msg-meta { margin-bottom: 1px; }
      #viewChat .msg-text { color: var(--ink); font-size: var(--chat-terminal-size); line-height: 1.48; }
      #viewChat .msg-user { border-left-color: #299b52; }
      #viewChat .msg-agent { border-left-color: #4776d0; }
      #viewChat .msg-user .msg-sender { color: #16743b; }
      #viewChat .msg-agent .msg-sender { color: #315fae; }
      #viewChat .msg-time { color: #746f65; }
      #viewChat .msg-text a { color: #315fae; }
      #viewChat .msg-text code.inline {
        padding: 0 2px; border: 0; border-radius: 0;
        background: transparent; color: #8a5900; box-shadow: none;
        font-size: .96em; font-weight: 700;
      }
      #viewChat .msg-speak-btn {
        float: right; margin: 3px 0 0 8px; padding: 2px 0;
        border: 0; background: transparent; box-shadow: none;
        color: #6c736d; font-size: 9px; opacity: .78;
      }
      #viewChat .msg-speak-btn:hover,
      #viewChat .msg-speak-btn.speaking { background: transparent; }
      #viewChat .pixel-mascot-chat { display: none; }
      #viewChat .empty { background: #fffef9; color: #746f65; }
      #viewChat .empty-title { color: var(--ink); }
      #viewChat .empty-desc { color: #746f65; }

      #viewChat .input-area {
        margin: 6px 8px 8px; padding: 6px;
        border: 2px solid var(--ink); box-shadow: none; background: #fff0a9;
      }
      #viewChat .input-box { min-height: 44px; padding: 6px 8px; border: 1.5px solid var(--ink); }
      #viewChat .input-box textarea { max-height: 84px; font-size: 16px; line-height: 1.35; }
      #viewChat .voice-status { margin-top: 4px; font-size: 9px; line-height: 1.3; }
      #viewChat .chat-control-bar { gap: 4px; padding-bottom: 5px; }
      #viewChat .chat-control-bar button { padding: 4px 7px; font-size: 10px; }
    }

    @media (max-width: 480px) {
      #viewChat .font-settings-btn { display: none; }
      #viewChat .mobile-session-picker { width: 70px; }
      #viewChat .chat-mode-pill { max-width: 62px; }
    }

    /* ── chat desktop restoration: match the original identity-led layout ──
       This is intentionally scoped to the conversation view. Other views keep
       the compact shared shell introduced later. */
    @media (min-width: 769px) {
      .app.view-chat .sidebar {
        width: 262px;
      }
      .app.view-chat .sidebar-header {
        min-height: 115px;
        padding: 22px 18px 17px 84px;
      }
      .app.view-chat .sidebar-header::before {
        left: 20px;
        top: 22px;
        width: 50px;
        height: 50px;
        background-size: 44px 44px;
      }
      .app.view-chat .sidebar-header h1 {
        font-size: 20px;
      }
      .app.view-chat .sidebar-header .live {
        margin-top: 8px;
        font-size: 12px;
      }
      .app.view-chat .sidebar-nav {
        padding: 20px 12px 19px;
        gap: 9px;
      }
      .app.view-chat .nav-item {
        min-height: 50px;
        padding: 11px 14px;
        gap: 12px;
        font-size: 16px;
      }
      .app.view-chat .nav-item svg {
        width: 21px;
        height: 21px;
      }
      .app.view-chat .sidebar-section {
        padding: 18px 20px 8px;
        font-size: 12px;
      }
      .app.view-chat .sidebar-list {
        padding: 0 13px 16px;
      }
      .app.view-chat .dm-item {
        min-height: 74px;
        padding: 10px 8px;
        gap: 11px;
      }
      .app.view-chat .dm-avatar {
        width: 42px;
        height: 42px;
        font-size: 16px;
      }
      .app.view-chat .dm-name {
        font-size: 16px;
        font-weight: 800;
      }
      .app.view-chat .dm-desc {
        margin-top: 3px;
        font-size: 12px;
      }
      .app.view-chat .chat-scope-note {
        margin: auto 13px 13px;
        padding: 10px 12px;
        font-size: 11px;
      }

      .app.view-chat .chat-screen-label {
        min-height: 73px;
        padding: 12px 18px;
      }
      .app.view-chat .chat-screen-label span {
        width: 48px;
        height: 48px;
        font-size: 24px;
      }
      .app.view-chat #viewChat .chat-header {
        margin: 13px 17px 10px;
        padding: 17px 20px;
      }
      .app.view-chat #viewChat .chat-header-left {
        gap: 13px;
      }
      .app.view-chat #viewChat .chat-agent-avatar {
        width: 42px;
        height: 42px;
        font-size: 16px;
      }
      .app.view-chat #viewChat .chat-title {
        font-size: 18px;
        line-height: 1.25;
      }
      .app.view-chat #viewChat .chat-subtitle {
        margin-top: 4px;
        font-size: 13px;
      }
      .app.view-chat #viewChat .chat-mode-pill {
        padding: 4px 10px;
        font-size: 12px;
      }
      .app.view-chat #viewChat .font-settings-btn,
      .app.view-chat #viewChat .icon-btn {
        width: 44px;
        height: 44px;
      }
      .app.view-chat #viewChat .chat-body {
        margin: 0 17px;
      }
      .app.view-chat #viewChat .messages {
        padding: 16px 18px 18px;
      }
      .app.view-chat #viewChat .msg-text {
        font-size: var(--chat-terminal-size);
        line-height: 1.6;
      }
      .app.view-chat #viewChat .chat-terminal-screen {
        padding: 12px 18px;
        font-size: var(--chat-terminal-size);
        line-height: 1.5;
      }
      .app.view-chat #viewChat .input-area {
        margin: 8px 17px 12px;
        padding: 10px 12px 12px;
      }
      .app.view-chat #viewChat .input-box {
        padding: 10px 12px;
      }
      .app.view-chat #viewChat .input-box textarea {
        font-size: 18px;
        line-height: 1.45;
      }
      .app.view-chat #viewChat .voice-btn,
      .app.view-chat #viewChat .send-btn {
        width: 42px;
        height: 42px;
      }
      .app.view-chat #viewChat .voice-btn svg {
        width: 20px;
        height: 20px;
      }
      .app.view-chat #viewChat .send-btn svg {
        width: 19px;
        height: 19px;
      }
    }

    /* ── Herdr runtime controls ─────────────────────────────────────── */
    #viewChat .chat-mode-pill.herdr {
      background: #e5f4ff;
      color: #145b91;
      border-color: #145b91;
    }
    #viewChat .chat-mode-pill.tmux {
      background: #f2f0e8;
      color: #625d50;
      border-color: #8b8474;
    }
    #viewChat .session-create-wrap {
      position: relative;
      flex: 0 0 auto;
    }
    #viewChat .session-create-btn {
      color: #145b91;
      border-color: #6a9dc2;
      background: #e5f4ff;
    }
    #viewChat .session-create-btn:hover,
    #viewChat .session-create-btn[aria-expanded="true"] {
      color: #0e456f;
      border-color: #145b91;
      background: #cfeaff;
    }
    #viewChat .session-create-wrap[hidden],
    #viewChat .session-create-menu[hidden],
    #viewChat .session-create-option[hidden],
    #viewChat .workspace-create-panel[hidden] {
      display: none !important;
    }
    #viewChat .session-create-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 30;
      width: min(260px, calc(100vw - 34px));
      padding: 6px;
      border: 2px solid var(--ink);
      border-radius: 3px;
      background: #fffef9;
      box-shadow: 4px 4px 0 rgba(25, 28, 36, .18);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    #viewChat .session-create-option {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      width: 100%;
      margin: 0;
      padding: 10px 12px;
      border: 0;
      border-radius: 2px;
      background: transparent;
      color: var(--ink);
      text-align: left;
      font: inherit;
      cursor: pointer;
    }
    #viewChat .session-create-option:hover,
    #viewChat .session-create-option:focus-visible {
      background: #eef6ff;
      outline: none;
    }
    #viewChat .session-create-option strong {
      font-size: 13px;
      font-weight: 700;
    }
    #viewChat .session-create-option span {
      font-size: 11px;
      color: #625d50;
      line-height: 1.35;
    }
    #viewChat .chat-more-wrap {
      position: relative;
      flex: 0 0 auto;
    }
    #viewChat .chat-more-menu[hidden],
    #viewChat .chat-more-option[hidden] {
      display: none !important;
    }
    #viewChat .chat-more-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 30;
      width: min(220px, calc(100vw - 34px));
      padding: 6px;
      border: 2px solid var(--ink);
      border-radius: 3px;
      background: #fffef9;
      box-shadow: 4px 4px 0 rgba(25, 28, 36, .18);
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    #viewChat .chat-more-option {
      width: 100%;
      margin: 0;
      padding: 10px 12px;
      border: 0;
      border-radius: 2px;
      background: transparent;
      color: var(--ink);
      text-align: left;
      font: inherit;
      font-size: 13px;
      cursor: pointer;
    }
    #viewChat .chat-more-option:hover,
    #viewChat .chat-more-option:focus-visible {
      background: #f3f1ea;
      outline: none;
    }
    #viewChat .chat-host-btn {
      min-width: 46px;
      padding: 0 8px;
      font: 800 12px/1 "Courier New", "PingFang SC", monospace;
      letter-spacing: .04em;
      color: #145b91;
      border-color: #6a9dc2;
      background: #e5f4ff;
    }
    #viewChat .chat-host-btn.is-windows {
      color: #1d4ed8;
      border-color: #93c5fd;
      background: #eff6ff;
    }
    #viewChat .chat-host-btn[aria-expanded="true"] {
      background: #cfeaff;
    }
    #viewChat .chat-host-option {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
    }
    #viewChat .chat-host-option strong {
      font-size: 13px;
      font-weight: 700;
    }
    #viewChat .chat-host-option span {
      font-size: 11px;
      color: #625d50;
      line-height: 1.35;
    }
    #viewChat .chat-host-option.is-active {
      background: #eef6ff;
    }
    #viewChat .chat-more-secondary {
      border-top: 1px solid #e7e2d6;
      margin-top: 2px;
      color: #625d50;
      font-size: 12px;
    }
    #viewChat .workspace-create-panel {
      position: absolute;
      top: 76px;
      right: 17px;
      z-index: 28;
      width: min(390px, calc(100vw - 34px));
      padding: 15px;
      border: 2px solid var(--ink);
      border-radius: 3px;
      background: #fffef9;
      color: var(--ink);
      box-shadow: 5px 5px 0 rgba(25, 28, 36, .2);
    }
    #viewChat .workspace-create-head,
    #viewChat .workspace-create-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    #viewChat .workspace-create-head {
      padding-bottom: 11px;
      border-bottom: 1px solid #c9c4b8;
    }
    #viewChat .workspace-create-head > div {
      display: flex;
      align-items: baseline;
      gap: 9px;
    }
    #viewChat .workspace-create-head span {
      color: #145b91;
      font: 800 10px/1 "SF Mono", ui-monospace, Menlo, monospace;
      letter-spacing: .12em;
    }
    #viewChat .workspace-create-head strong {
      font-size: 16px;
    }
    #viewChat .workspace-create-close {
      width: 28px;
      height: 28px;
      padding: 0;
      border: 0;
      background: transparent;
      color: #625d50;
      box-shadow: none;
      font-size: 22px;
      line-height: 1;
    }
    #viewChat .workspace-create-field {
      display: block;
      margin-top: 12px;
      font-size: 12px;
      font-weight: 750;
    }
    #viewChat .workspace-create-field > span {
      display: block;
      margin-bottom: 5px;
    }
    #viewChat .workspace-create-field input {
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      padding: 9px 10px;
      border: 1.5px solid var(--ink);
      border-radius: 2px;
      outline: 0;
      background: #fff;
      color: var(--ink);
      font: 13px/1.35 var(--chat-terminal-font);
    }
    #viewChat .workspace-create-field input:focus {
      border-color: #145b91;
      box-shadow: 0 0 0 3px rgba(20, 91, 145, .13);
    }
    #viewChat .workspace-create-note {
      margin: 10px 0 13px;
      color: #625d50;
      font-size: 11px;
      line-height: 1.45;
    }
    #viewChat .workspace-create-actions {
      justify-content: flex-end;
    }
    #viewChat .workspace-create-actions button {
      width: auto;
      min-width: 84px;
      padding: 8px 12px;
      box-shadow: none;
    }
    #viewChat .workspace-create-actions .danger-text {
      margin-right: auto;
      min-width: 0;
      color: #b91c1c;
      background: transparent;
      border: 0;
    }
    #viewChat .workspace-create-actions .danger-text:hover {
      background: #fef2f2;
    }

    @media (max-width: 768px) {
      #viewChat .workspace-create-panel {
        position: fixed;
        top: 62px;
        right: 8px;
        left: 8px;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - 76px);
        overflow-y: auto;
        padding: 13px;
        box-shadow: 3px 3px 0 rgba(25, 28, 36, .2);
      }
      #viewChat .workspace-create-field input {
        font-size: 16px;
      }
    }

    @media (max-width: 480px) {
      #viewChat .session-create-btn {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
      }
    }

    #viewChat .dsh-create-panel[hidden] {
      display: none !important;
    }
    #viewChat .dsh-cwd-row {
      display: flex;
      gap: 8px;
      align-items: stretch;
    }
    #viewChat .dsh-cwd-row input {
      flex: 1 1 auto;
      min-width: 0;
    }
    #viewChat .dsh-cwd-row button {
      flex: 0 0 auto;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      border-radius: 8px;
      padding: 0 12px;
      font: inherit;
      cursor: pointer;
    }
    #viewChat .dsh-browse-box {
      margin-top: 8px;
      border: 1px solid #dbe3ef;
      border-radius: 10px;
      background: #f8fafc;
      overflow: hidden;
    }
    #viewChat .dsh-browse-toolbar {
      display: flex;
      gap: 6px;
      align-items: center;
      padding: 8px;
      border-bottom: 1px solid #e2e8f0;
    }
    #viewChat .dsh-browse-toolbar button {
      border: 1px solid #cbd5e1;
      background: #fff;
      border-radius: 6px;
      padding: 4px 8px;
      font: inherit;
      font-size: 12px;
      cursor: pointer;
    }
    #viewChat .dsh-browse-path {
      flex: 1 1 auto;
      min-width: 0;
      font-size: 11px;
      color: #64748b;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #viewChat .dsh-browse-list {
      max-height: min(320px, 42vh);
      min-height: 120px;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    @media (max-width: 768px) {
      #viewChat .dsh-browse-list {
        max-height: min(360px, 48dvh);
        min-height: 160px;
      }
    }
    #viewChat .dsh-browse-item {
      display: flex;
      width: 100%;
      border: 0;
      border-bottom: 1px solid #eef2f7;
      background: transparent;
      text-align: left;
      padding: 9px 12px;
      font: inherit;
      font-size: 13px;
      cursor: pointer;
      gap: 8px;
    }
    #viewChat .dsh-browse-item:hover {
      background: #eff6ff;
    }
    #viewChat .dsh-browse-item[data-type="file"] {
      color: #94a3b8;
      cursor: default;
    }
    #viewChat .dsh-browse-item .kind {
      flex: 0 0 auto;
      color: #64748b;
      font-size: 11px;
      text-transform: uppercase;
      min-width: 2.6em;
    }
    #viewChat .dsh-browse-item.is-recent {
      background: #f8fafc;
    }
    #viewChat .dsh-browse-item.is-recent .kind {
      color: #1d4ed8;
      text-transform: none;
    }
    #viewChat .dsh-browse-text {
      display: flex;
      flex-direction: column;
      min-width: 0;
      gap: 2px;
    }
    #viewChat .dsh-browse-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #viewChat .dsh-browse-sub {
      color: #94a3b8;
      font-size: 11px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #viewChat .dsh-browse-empty {
      padding: 14px 12px;
      color: #94a3b8;
      font-size: 13px;
      line-height: 1.45;
    }
    #viewChat .dsh-browse-empty-sub {
      margin-top: 6px;
      color: #64748b;
      font-size: 12px;
    }

    /* ── Imagine: light image creation studio ── */
    #viewImagine {
      overflow-y: auto;
      background:
        radial-gradient(circle at 82% 8%, rgba(79, 70, 229, .09), transparent 28rem),
        linear-gradient(180deg, #f8f8ff 0, var(--bg) 32rem);
      --imagine-accent: #4f46e5;
      --imagine-accent-soft: #eef2ff;
    }
    #viewImagine .imagine-wrap {
      width: min(100%, 1040px);
      margin: 0 auto;
      padding: 22px 28px 84px;
    }
    #viewImagine .imagine-screen-label span { background: #c7d2fe; }
    #viewImagine .imagine-header {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 9px 0 27px;
    }
    #viewImagine .chat-back-btn {
      display: flex;
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--hairline);
      border-radius: 11px;
      background: rgba(255, 255, 255, .82);
      color: var(--ink);
      box-shadow: var(--shadow);
      cursor: pointer;
    }
    #viewImagine .chat-back-btn:hover { border-color: #a5b4fc; color: var(--imagine-accent); transform: translateX(-2px); }
    #viewImagine .imagine-header > div { min-width: 0; }
    #viewImagine .imagine-header h1 { font-size: 28px; line-height: 1.15; letter-spacing: -.035em; }
    #viewImagine .imagine-header p { margin-top: 4px; color: var(--dim); font-size: 13px; }
    #viewImagine .imagine-mock-badge {
      margin-left: auto;
      padding: 5px 9px;
      border: 1px solid #c7d2fe;
      border-radius: 999px;
      background: rgba(238, 242, 255, .82);
      color: #4338ca;
      font: 700 10px/1.2 "SF Mono", ui-monospace, monospace;
      letter-spacing: .08em;
      white-space: nowrap;
    }
    #viewImagine .imagine-content { display: grid; gap: 18px; }
    #viewImagine .imagine-section {
      min-width: 0;
      padding: 20px;
      border: 1px solid rgba(231, 229, 228, .9);
      border-radius: 16px;
      background: rgba(255, 255, 255, .9);
      box-shadow: 0 8px 30px rgba(50, 43, 88, .055);
      animation: imagine-rise .42s cubic-bezier(.22, 1, .36, 1) both;
    }
    #viewImagine .imagine-section:nth-child(2) { animation-delay: .05s; }
    #viewImagine .imagine-section:nth-child(3) { animation-delay: .1s; }
    @keyframes imagine-rise { from { opacity: 0; transform: translateY(9px); } }
    #viewImagine .imagine-section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 15px;
    }
    #viewImagine .imagine-section-head > div { display: flex; align-items: center; gap: 9px; }
    #viewImagine .imagine-section-head > div > span {
      color: var(--imagine-accent);
      font: 700 10px/1 "SF Mono", ui-monospace, monospace;
      letter-spacing: .08em;
    }
    #viewImagine .imagine-section-head h2 { font-size: 16px; line-height: 1.2; letter-spacing: -.015em; }
    #viewImagine .imagine-section-head p { color: var(--dim); font-size: 11px; }
    #viewImagine .imagine-templates {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding: 2px 2px 10px;
      scroll-snap-type: x mandatory;
      scrollbar-width: thin;
      scrollbar-color: #c7d2fe transparent;
    }
    #viewImagine .imagine-templates-empty {
      display: grid;
      justify-items: start;
      gap: 3px;
      width: 100%;
      padding: 22px 16px;
      border: 1px dashed #c7d2fe;
      border-radius: 12px;
      background: #fafaff;
      color: var(--dim);
    }
    #viewImagine .imagine-templates-empty strong { color: var(--ink); font-size: 13px; }
    #viewImagine .imagine-templates-empty span { font-size: 11px; }
    #viewImagine .imagine-template {
      position: relative;
      width: 168px;
      flex: 0 0 168px;
      scroll-snap-align: start;
      overflow: hidden;
      border: 1px solid var(--hairline);
      border-radius: 13px;
      background: var(--card);
      box-shadow: 0 2px 8px rgba(28, 25, 23, .035);
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    #viewImagine .imagine-template:hover,
    #viewImagine .imagine-template:focus-within,
    #viewImagine .imagine-template.is-selected {
      transform: translateY(-3px);
      border-color: hsl(var(--hue) 62% 62%);
      box-shadow: 0 10px 24px hsla(var(--hue) 48% 30% / .13);
    }
    #viewImagine .imagine-template.is-selected { border-color: #fb7185; }
    #viewImagine .imagine-template-main {
      display: block;
      width: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--ink);
      text-align: left;
      font: inherit;
      cursor: pointer;
    }
    #viewImagine .imagine-template-main:focus-visible { outline: 0; }
    #viewImagine .imagine-template-cover {
      position: relative;
      display: block;
      height: 96px;
      overflow: hidden;
      background:
        radial-gradient(circle at 72% 28%, hsla(calc(var(--hue) + 48) 90% 88% / .92) 0 9%, transparent 10%),
        linear-gradient(135deg, hsl(var(--hue) 72% 72%), hsl(calc(var(--hue) + 56) 68% 42%));
    }
    #viewImagine .imagine-template-cover::before,
    #viewImagine .imagine-template-cover::after,
    #viewImagine .imagine-template-cover i {
      content: "";
      position: absolute;
      border-radius: 50%;
      background: rgba(255,255,255,.19);
      filter: blur(1px);
    }
    #viewImagine .imagine-template-cover::before { width: 86px; height: 86px; left: -22px; top: 24px; }
    #viewImagine .imagine-template-cover::after { width: 55px; height: 55px; right: -8px; bottom: -18px; }
    #viewImagine .imagine-template-cover i { width: 38px; height: 38px; left: 64px; top: 28px; background: rgba(255,255,255,.12); }
    #viewImagine .imagine-template-cover.is-photo { background: #ece7ff; }
    #viewImagine .imagine-template-cover.is-photo::before,
    #viewImagine .imagine-template-cover.is-photo::after,
    #viewImagine .imagine-template-cover.is-photo i { display: none; }
    #viewImagine .imagine-template-cover img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    #viewImagine .imagine-template-cover b {
      position: absolute;
      right: 9px;
      bottom: 7px;
      color: rgba(255,255,255,.82);
      font: 700 10px/1 "SF Mono", ui-monospace, monospace;
      letter-spacing: .08em;
      text-shadow: 0 1px 2px rgba(28,25,23,.35);
    }
    #viewImagine .imagine-template-main > strong { display: block; padding: 11px 12px 1px; font-size: 13px; }
    #viewImagine .imagine-template-main > small { display: block; padding: 0 12px 12px; color: var(--dim); font-size: 10px; line-height: 1.45; }
    #viewImagine .imagine-template-delete {
      position: absolute;
      top: 6px;
      right: 6px;
      z-index: 2;
      display: grid;
      width: 22px;
      height: 22px;
      place-items: center;
      border: 1px solid rgba(255,255,255,.7);
      border-radius: 50%;
      background: rgba(28,25,23,.62);
      color: #fff;
      font: 14px/1 sans-serif;
      cursor: pointer;
      opacity: 0;
      transition: opacity .16s ease;
    }
    #viewImagine .imagine-template:hover .imagine-template-delete,
    #viewImagine .imagine-template:focus-within .imagine-template-delete,
    #viewImagine .imagine-template-delete:focus-visible { opacity: 1; }
    #viewImagine .imagine-prompt-field { position: relative; display: block; }
    #viewImagine .imagine-prompt-field textarea {
      display: block;
      width: 100%;
      min-height: 116px;
      resize: vertical;
      padding: 15px 17px 28px;
      border: 1px solid #d6d3d1;
      border-radius: 12px;
      background: #fcfcff;
      color: var(--ink);
      font: inherit;
      line-height: 1.65;
      outline: 0;
      transition: border-color .16s ease, box-shadow .16s ease;
    }
    #viewImagine .imagine-prompt-field textarea:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
    #viewImagine .imagine-prompt-field textarea.is-invalid { border-color: var(--red); box-shadow: 0 0 0 3px rgba(220, 38, 38, .09); }
    #viewImagine .imagine-prompt-field small { position: absolute; right: 11px; bottom: 8px; color: #a8a29e; font: 10px/1.2 "SF Mono", ui-monospace, monospace; }
    #viewImagine .imagine-prompt-field small b { font-weight: 600; color: var(--dim); }
    #viewImagine .imagine-reference-block {
      margin-top: 14px;
      padding: 13px;
      border: 1px solid #dddff6;
      border-radius: 12px;
      background: linear-gradient(135deg, #fafaff, #f7f7fc);
    }
    #viewImagine .imagine-reference-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 9px;
    }
    #viewImagine .imagine-reference-head > div { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
    #viewImagine .imagine-reference-head strong { font-size: 11px; }
    #viewImagine .imagine-reference-head span { overflow: hidden; color: var(--dim); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
    #viewImagine .imagine-reference-head button {
      flex: 0 0 auto;
      border: 0;
      background: transparent;
      color: var(--imagine-accent);
      font: inherit;
      font-size: 9px;
      font-weight: 700;
      cursor: pointer;
    }
    #viewImagine .imagine-dropzone {
      display: flex;
      min-height: 62px;
      align-items: center;
      gap: 11px;
      padding: 10px 12px;
      border: 1px dashed #a5b4fc;
      border-radius: 10px;
      background: rgba(255,255,255,.72);
      color: var(--ink);
      cursor: pointer;
      transition: border-color .16s ease, background .16s ease, transform .16s ease;
    }
    #viewImagine .imagine-dropzone:hover,
    #viewImagine .imagine-dropzone.is-dragging { border-color: var(--imagine-accent); background: #eef2ff; transform: translateY(-1px); }
    #viewImagine .imagine-dropzone.is-compact { min-height: 48px; padding-block: 7px; }
    #viewImagine .imagine-dropzone-icon {
      display: grid;
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      place-items: center;
      border-radius: 9px;
      background: var(--imagine-accent-soft);
      color: var(--imagine-accent);
    }
    #viewImagine .imagine-dropzone-icon svg { width: 17px; height: 17px; }
    #viewImagine .imagine-dropzone > span:nth-of-type(2) { display: grid; flex: 1; line-height: 1.35; }
    #viewImagine .imagine-dropzone > span:nth-of-type(2) strong { font-size: 11px; }
    #viewImagine .imagine-dropzone > span:nth-of-type(2) small { color: var(--dim); font-size: 9px; }
    #viewImagine .imagine-dropzone > b { color: #818cf8; font: 700 9px/1 "SF Mono", ui-monospace, monospace; }
    #viewImagine .imagine-reference-error { margin-top: 7px; color: var(--red); font-size: 9px; }
    #viewImagine .imagine-reference-previews {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin-top: 9px;
    }
    #viewImagine .imagine-reference-preview {
      position: relative;
      min-width: 0;
      overflow: hidden;
      border: 1px solid #d6d3d1;
      border-radius: 9px;
      background: var(--card);
    }
    #viewImagine .imagine-reference-preview img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--faint); }
    #viewImagine .imagine-reference-preview figcaption { display: flex; align-items: center; gap: 5px; padding: 5px 6px; }
    #viewImagine .imagine-reference-preview figcaption span { color: var(--imagine-accent); font: 700 8px/1 "SF Mono", ui-monospace, monospace; }
    #viewImagine .imagine-reference-preview figcaption small { min-width: 0; overflow: hidden; color: var(--dim); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
    #viewImagine .imagine-reference-preview > button {
      position: absolute;
      top: 5px;
      right: 5px;
      display: grid;
      width: 20px;
      height: 20px;
      place-items: center;
      border: 1px solid rgba(255,255,255,.75);
      border-radius: 50%;
      background: rgba(28,25,23,.68);
      color: #fff;
      font: 14px/1 sans-serif;
      cursor: pointer;
      backdrop-filter: blur(5px);
    }
    #viewImagine .imagine-strength {
      display: grid;
      grid-template-columns: minmax(125px, .65fr) 1fr 38px;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
      padding-top: 9px;
      border-top: 1px solid #e3e4f4;
    }
    #viewImagine .imagine-strength > span { display: grid; line-height: 1.35; }
    #viewImagine .imagine-strength strong { font-size: 10px; }
    #viewImagine .imagine-strength small { color: var(--dim); font-size: 8px; }
    #viewImagine .imagine-strength input { width: 100%; accent-color: var(--imagine-accent); }
    #viewImagine .imagine-strength output { color: var(--imagine-accent); font: 700 10px/1 "SF Mono", ui-monospace, monospace; text-align: right; }
    #viewImagine .imagine-controls {
      display: grid;
      grid-template-columns: 1.5fr .8fr 1.15fr 1.4fr;
      gap: 13px;
      margin-top: 15px;
    }
    #viewImagine .imagine-control { min-width: 0; border: 0; }
    #viewImagine .imagine-control legend,
    #viewImagine .imagine-control > span { display: block; margin-bottom: 6px; color: var(--dim); font-size: 10px; font-weight: 650; }
    #viewImagine .imagine-segmented {
      display: flex;
      min-height: 36px;
      padding: 3px;
      border: 1px solid var(--hairline);
      border-radius: 9px;
      background: var(--bg);
    }
    #viewImagine .imagine-segmented button {
      min-width: 0;
      flex: 1;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: var(--dim);
      font: inherit;
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      cursor: pointer;
    }
    #viewImagine .imagine-segmented button.active { background: var(--card); color: var(--imagine-accent); box-shadow: 0 1px 4px rgba(28,25,23,.1); }
    /* 比例选择：格子按真实宽高比画空心矩形，横竖一眼可辨 */
    #viewImagine .imagine-ratio {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 3px;
    }
    #viewImagine .imagine-ratio button {
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 4px;
      flex: none;
      padding: 6px 0 5px;
      font-size: 10px;
    }
    #viewImagine .imagine-ratio i {
      display: block;
      border: 1.5px solid currentColor;
      border-radius: 2.5px;
      background: color-mix(in srgb, currentColor 16%, transparent);
    }
    #viewImagine .imagine-model-control select {
      width: 100%;
      height: 36px;
      padding: 0 28px 0 10px;
      border: 1px solid var(--hairline);
      border-radius: 9px;
      background: var(--card);
      color: var(--ink);
      font: inherit;
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      outline: 0;
    }
    #viewImagine .imagine-concurrency-control {
      display: grid;
      grid-template-columns: 1fr auto;
      align-content: start;
      column-gap: 10px;
    }
    #viewImagine .imagine-concurrency-control > span { grid-column: 1 / -1; }
    #viewImagine .imagine-concurrency-control input {
      width: 100%;
      height: 20px;
      margin-top: 6px;
      accent-color: var(--imagine-accent);
    }
    #viewImagine .imagine-concurrency-control input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: #d9dcfa; }
    #viewImagine .imagine-concurrency-control input::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -6px; border: 3px solid #fff; border-radius: 50%; background: var(--imagine-accent); box-shadow: 0 1px 5px rgba(67,56,202,.32); -webkit-appearance: none; }
    #viewImagine .imagine-concurrency-control output { align-self: center; color: #4338ca; font-size: 10px; font-weight: 700; white-space: nowrap; }
    #viewImagine .imagine-submit {
      display: flex;
      width: 100%;
      align-items: center;
      margin-top: 16px;
      padding: 12px 14px;
      border: 1px solid #4338ca;
      border-radius: 11px;
      background: var(--imagine-accent);
      color: #fff;
      font: inherit;
      cursor: pointer;
      box-shadow: 0 5px 14px rgba(79, 70, 229, .2);
      transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    }
    #viewImagine .imagine-submit:hover { transform: translateY(-1px); background: #4338ca; box-shadow: 0 8px 20px rgba(79,70,229,.25); }
    #viewImagine .imagine-submit span { font-size: 13px; font-weight: 750; }
    #viewImagine .imagine-submit small { margin-left: 9px; color: rgba(255,255,255,.66); font-size: 10px; }
    #viewImagine .imagine-submit svg { width: 18px; height: 18px; margin-left: auto; }
    #viewImagine .imagine-auth {
      display: grid;
      grid-template-columns: minmax(160px, 1fr) minmax(180px, .8fr) auto;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
      padding: 11px;
      border: 1px solid #f5c2c7;
      border-radius: 10px;
      background: #fff7f7;
    }
    #viewImagine .imagine-auth[hidden] { display: none; }
    #viewImagine .imagine-auth > div { display: grid; gap: 2px; }
    #viewImagine .imagine-auth strong { font-size: 10px; }
    #viewImagine .imagine-auth span { color: var(--dim); font-size: 9px; }
    #viewImagine .imagine-auth input {
      min-width: 0;
      height: 34px;
      padding: 0 10px;
      border: 1px solid #d6d3d1;
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      font: inherit;
      font-size: 10px;
      outline: 0;
    }
    #viewImagine .imagine-auth input:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
    #viewImagine .imagine-auth button {
      height: 34px;
      padding: 0 12px;
      border: 0;
      border-radius: 8px;
      background: #292524;
      color: #fff;
      font: inherit;
      font-size: 10px;
      font-weight: 700;
      cursor: pointer;
    }
    #viewImagine .imagine-queue { display: grid; gap: 12px; }
    #viewImagine .imagine-empty {
      display: grid;
      justify-items: center;
      gap: 3px;
      padding: 35px 18px;
      border: 1px dashed #c7d2fe;
      border-radius: 12px;
      background: #fafaff;
      color: var(--dim);
    }
    #viewImagine .imagine-empty i { display: grid; width: 34px; height: 34px; place-items: center; margin-bottom: 5px; border-radius: 50%; background: var(--imagine-accent-soft); color: var(--imagine-accent); font-style: normal; }
    #viewImagine .imagine-empty strong { color: var(--ink); font-size: 13px; }
    #viewImagine .imagine-empty span { font-size: 11px; }
    #viewImagine .imagine-job {
      overflow: hidden;
      padding: 15px;
      border: 1px solid var(--hairline);
      border-radius: 12px;
      background: var(--card);
    }
    #viewImagine .imagine-job-top { display: flex; align-items: flex-start; gap: 14px; }
    #viewImagine .imagine-job-copy { min-width: 0; flex: 1; }
    #viewImagine .imagine-job-copy > span { display: block; margin-bottom: 3px; color: #818cf8; font: 700 9px/1.2 "SF Mono", ui-monospace, monospace; letter-spacing: .08em; }
    #viewImagine .imagine-job-copy > strong { display: -webkit-box; overflow: hidden; font-size: 12px; line-height: 1.5; font-weight: 600; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    #viewImagine .imagine-status { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; background: var(--bg); color: var(--dim); font-size: 10px; font-weight: 700; }
    #viewImagine .imagine-status.is-running { background: var(--imagine-accent-soft); color: var(--imagine-accent); }
    #viewImagine .imagine-status.is-completed { background: var(--green-bg); color: var(--green); }
    #viewImagine .imagine-status.is-failed { background: var(--red-bg); color: var(--red); }
    #viewImagine .imagine-job-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
    #viewImagine .imagine-job-meta > span { padding: 3px 7px; border-radius: 6px; background: #f5f5f4; color: var(--dim); font-size: 9px; }
    #viewImagine .imagine-job-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
    #viewImagine .imagine-job-actions button { border: 0; background: transparent; color: var(--imagine-accent); font: inherit; font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer; }
    #viewImagine .imagine-job-references { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 7px 8px; border-radius: 8px; background: #f8f7ff; }
    #viewImagine .imagine-job-references > span { color: #635ca6; font-size: 9px; font-weight: 700; white-space: nowrap; }
    #viewImagine .imagine-job-references > div { display: flex; min-width: 0; gap: 4px; }
    #viewImagine .imagine-job-references img { width: 28px; height: 28px; border: 1px solid #fff; border-radius: 6px; object-fit: cover; box-shadow: 0 1px 3px rgba(28,25,23,.12); }
    #viewImagine .imagine-progress { height: 4px; margin-top: 12px; overflow: hidden; border-radius: 4px; background: #e7e5e4; }
    #viewImagine .imagine-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #818cf8, var(--imagine-accent)); transition: width .25s linear; }
    #viewImagine .imagine-job-error { margin-top: 10px; color: var(--red); font-size: 10px; }
    #viewImagine .imagine-job-warning { margin-top: 10px; color: #a16207; font-size: 10px; }
    #viewImagine .imagine-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
    #viewImagine .imagine-result { position: relative; min-width: 0; overflow: hidden; border-radius: 9px; background: var(--faint); }
    #viewImagine .imagine-result img { display: block; width: 100%; aspect-ratio: var(--result-ratio); object-fit: cover; cursor: zoom-in; }
    #viewImagine .imagine-result-actions {
      position: absolute;
      right: 7px;
      bottom: 7px;
      display: flex;
      gap: 5px;
    }
    #viewImagine .imagine-result-actions button {
      padding: 5px 8px;
      border: 1px solid rgba(255,255,255,.55);
      border-radius: 999px;
      background: rgba(28,25,23,.72);
      color: #fff;
      font: inherit;
      font-size: 10px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      backdrop-filter: blur(8px);
    }
    #viewImagine .imagine-dialog {
      position: fixed;
      inset: 0;
      z-index: 40;
      display: grid;
      place-items: center;
      padding: 18px;
    }
    #viewImagine .imagine-dialog[hidden] { display: none; }
    #viewImagine .imagine-dialog-scrim { position: absolute; inset: 0; background: rgba(28, 25, 23, .38); }
    #viewImagine .imagine-dialog-card {
      position: relative;
      width: min(100%, 420px);
      padding: 18px;
      border: 1px solid #dddff6;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 18px 50px rgba(50, 43, 88, .18);
    }
    #viewImagine .imagine-dialog-card h3 { font-size: 16px; letter-spacing: -.02em; }
    #viewImagine .imagine-dialog-card > p { margin-top: 6px; color: var(--dim); font-size: 12px; line-height: 1.5; }
    #viewImagine .imagine-dialog-error { color: var(--red) !important; }
    #viewImagine .imagine-dialog-field { display: grid; gap: 6px; margin-top: 14px; }
    #viewImagine .imagine-dialog-field span { color: var(--dim); font-size: 10px; font-weight: 700; }
    #viewImagine .imagine-dialog-field input {
      height: 38px;
      padding: 0 11px;
      border: 1px solid #d6d3d1;
      border-radius: 9px;
      background: #fcfcff;
      color: var(--ink);
      font: inherit;
      outline: 0;
    }
    #viewImagine .imagine-dialog-field input:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
    #viewImagine .imagine-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
    #viewImagine .imagine-dialog-actions button {
      height: 34px;
      padding: 0 12px;
      border: 0;
      border-radius: 8px;
      font: inherit;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }
    #viewImagine #imagineTemplateCancel { background: #f5f5f4; color: var(--ink); }
    #viewImagine #imagineTemplateConfirm { background: var(--imagine-accent); color: #fff; }
    #viewImagine .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

    /* 生图大图查看层：body 级，盖过 tabbar(200)，低于 app-confirm(1000) */
    .imagine-lightbox {
      position: fixed;
      inset: 0;
      z-index: 300;
      display: grid;
      place-items: center;
      padding: 18px;
    }
    .imagine-lightbox[hidden] { display: none; }
    .imagine-lightbox-scrim {
      position: absolute;
      inset: 0;
      background: rgba(28, 25, 23, .72);
      backdrop-filter: blur(3px);
    }
    .imagine-lightbox-stage {
      position: relative;
      display: grid;
      justify-items: center;
      gap: 10px;
      max-width: 100%;
      animation: imagine-lightbox-in .18s cubic-bezier(.22, 1, .36, 1) both;
    }
    .imagine-lightbox-stage img {
      display: block;
      max-width: min(96vw, 1400px);
      max-height: 84vh;
      object-fit: contain;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 18px 50px rgba(50, 43, 88, .18);
    }
    .imagine-lightbox-stage p {
      max-width: min(96vw, 900px);
      color: rgba(255, 255, 255, .85);
      font-size: 11px;
      line-height: 1.5;
      text-align: center;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .imagine-lightbox-stage button {
      position: absolute;
      top: -14px;
      right: -14px;
      width: 30px;
      height: 30px;
      border: 1px solid rgba(255,255,255,.55);
      border-radius: 999px;
      background: rgba(28,25,23,.78);
      color: #fff;
      font: inherit;
      font-size: 15px;
      line-height: 1;
      cursor: pointer;
      backdrop-filter: blur(8px);
    }
    @keyframes imagine-lightbox-in {
      from { opacity: 0; transform: scale(.97); }
      to { opacity: 1; transform: scale(1); }
    }
    @media (prefers-reduced-motion: reduce) {
      .imagine-lightbox-stage { animation: none; }
    }
    @media (max-width: 480px) {
      .imagine-lightbox { padding: 12px; }
      .imagine-lightbox-stage img { max-width: 92vw; }
      .imagine-lightbox-stage button { top: -12px; right: -8px; }
    }

    @media (max-width: 860px) {
      #viewImagine .imagine-controls { grid-template-columns: 1.25fr .75fr 1fr; }
      #viewImagine .imagine-concurrency-control { grid-column: 1 / -1; }
    }
    @media (max-width: 768px) {
      #viewImagine .imagine-wrap { padding: 12px 13px calc(var(--tabbar-h) + 34px); }
      #viewImagine .imagine-screen-label { margin-bottom: 4px; }
      #viewImagine .imagine-header { padding: 4px 0 18px; }
      #viewImagine .imagine-header h1 { font-size: 23px; }
      #viewImagine .imagine-header p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
      #viewImagine .imagine-mock-badge { display: none; }
      #viewImagine .imagine-section { padding: 15px; border-radius: 14px; }
      #viewImagine .imagine-section-head { align-items: center; }
      #viewImagine .imagine-section-head p { display: none; }
      #viewImagine .imagine-template { width: 146px; flex-basis: 146px; }
      #viewImagine .imagine-template-cover { height: 84px; }
      #viewImagine .imagine-template-delete { opacity: 1; }
      #viewImagine .imagine-controls { grid-template-columns: 1fr 1fr; }
      #viewImagine .imagine-ratio-control { grid-column: 1 / -1; }
      #viewImagine .imagine-model-control,
      #viewImagine .imagine-concurrency-control { grid-column: 1 / -1; }
      #viewImagine .imagine-reference-previews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #viewImagine .imagine-auth { grid-template-columns: 1fr; }
      #viewImagine .imagine-strength { grid-template-columns: 1fr 38px; }
      #viewImagine .imagine-strength > span { grid-column: 1 / -1; }
      #viewImagine .imagine-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 420px) {
      #viewImagine .imagine-ratio-control { grid-column: 1 / -1; }
      #viewImagine .imagine-controls { gap: 11px; }
      #viewImagine .imagine-segmented button { font-size: 10px; }
      #viewImagine .imagine-job-top { gap: 8px; }
      #viewImagine .imagine-status { padding-inline: 6px; }
      #viewImagine .imagine-reference-head span { display: none; }
      #viewImagine .imagine-job-references { align-items: flex-start; flex-direction: column; gap: 5px; }
    }
    @media (prefers-reduced-motion: reduce) {
      #viewImagine .imagine-section { animation: none; }
      #viewImagine .imagine-template,
      #viewImagine .imagine-template-delete,
      #viewImagine .imagine-submit,
      #viewImagine .chat-back-btn { transition: none; }
    }

/* Imagine video composer shares the existing image workspace. */
#viewImagine .imagine-content[hidden],
#viewImagine .video-note[hidden],
#viewImagine .video-quote[hidden] { display: none; }
#viewImagine .imagine-mode { max-width: 320px; margin: 0 0 18px; min-height: 42px; }
#viewImagine .video-controls { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 13px; margin-top: 16px; }
#viewImagine .video-controls select { width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: 12px; }
#viewImagine .video-note { margin-top: 12px; color: var(--dim); font-size: 12px; line-height: 1.6; }
#viewImagine .video-quote { margin-top: 16px; padding: 16px; border: 1px solid #c7d2fe; border-radius: 12px; background: var(--imagine-accent-soft); }
#viewImagine .video-quote strong { font-size: 13px; }
#viewImagine .video-quote p { margin-top: 8px; color: var(--dim); font-size: 12px; line-height: 1.6; }
#viewImagine .video-references { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
#viewImagine .video-references img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
#viewImagine .video-job video { display: block; width: 100%; max-height: 480px; margin-top: 14px; border-radius: 10px; background: #171717; }
#viewImagine .video-download, #viewImagine .video-refresh { display: inline-block; margin: 12px 12px 0 0; color: var(--imagine-accent); font: inherit; font-size: 12px; }
#viewImagine .video-refresh { border: 0; background: transparent; cursor: pointer; }
#viewImagine #videoAuth a { font-size: 11px; color: var(--imagine-accent); }
#viewImagine #imagineVideoPanel button:disabled { opacity: .55; cursor: wait; }
@media (max-width: 720px) { #viewImagine .video-controls { grid-template-columns: 1fr 1fr; } #viewImagine .video-controls > :first-child { grid-column: 1 / -1; } }

#viewImagine .video-mention-menu[hidden] { display: none; }
#viewImagine .video-mention-menu { display: grid; gap: 4px; margin-top: 8px; padding: 6px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--card); box-shadow: 0 8px 22px rgba(28,25,23,.08); }
#viewImagine .video-mention-menu button { display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
#viewImagine .video-mention-menu button[aria-selected="true"], #viewImagine .video-mention-menu button:hover { background: var(--imagine-accent-soft); }
#viewImagine .video-mention-menu img { width: 42px; height: 42px; border-radius: 6px; object-fit: cover; }
#viewImagine .video-mention-menu span { display: grid; gap: 4px; min-width: 0; }
#viewImagine .video-mention-menu strong { font-size: 12px; }
#viewImagine .video-mention-menu small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); font-size: 10px; }
#viewImagine .video-mention-menu p { padding: 8px; color: var(--dim); font-size: 12px; }
#viewImagine .video-reference { display: grid; gap: 5px; padding: 6px; border: 1px solid var(--hairline); border-radius: 9px; color: var(--imagine-accent); background: var(--card); cursor: pointer; font: inherit; }
#viewImagine .video-reference strong { font-size: 10px; }
#viewImagine .video-reference:hover { border-color: var(--imagine-accent); background: var(--imagine-accent-soft); }

#viewImagine .video-reference-clips { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 10px; }
#viewImagine .video-reference-clip { display: grid; align-content: start; gap: 7px; min-width: 0; padding: 8px; border: 1px solid var(--hairline); border-radius: 10px; }
#viewImagine .video-reference-clip video { display: block; width: 100%; max-height: 180px; border-radius: 7px; background: #171717; }
#viewImagine .video-reference-clip small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); font-size: 10px; }
#viewImagine .video-mention-icon { display: grid; flex: 0 0 42px; height: 42px; place-items: center; border-radius: 6px; background: var(--imagine-accent-soft); color: var(--imagine-accent); font-size: 24px; font-style: normal; }