/* ── Variables ───────────────────────────────────────── */
    :root {
      --bg:      #07090e;
      --bg2:     #0d1117;
      --bg3:     #111820;
      --border:  #1a2535;
      --primary: #4db8ff;
      --ok:      #33cc77;
      --warn:    #ffaa22;
      --danger:  #ff4444;
      --muted:   #3a5070;
      --text:    #c8d8e8;
      --dim:     #6a8aaa;
      --font:    'JetBrains Mono', monospace;
      --th:      34px;
      --slw:     164px;
      --srw:     220px;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background: var(--bg); color: var(--text);
      font-family: var(--font); font-size: 11px;
      height: 100vh; overflow: hidden;
      display: flex; flex-direction: column;
    }
    code { color: var(--primary); }
    ::-webkit-scrollbar { width: 3px; height: 3px; }
    ::-webkit-scrollbar-thumb { background: var(--border); }

    /* ── Topbar ──────────────────────────────────────────── */
    #topbar {
      height: var(--th); background: var(--bg2);
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; padding: 0 10px; gap: 10px;
      flex-shrink: 0;
    }
    .tb-logo { font-size: 13px; font-weight: 700; color: var(--primary); letter-spacing: 3px; }
    .tb-sep  { color: var(--border); }
    .tb-lbl  { font-size: 9px; text-transform: uppercase; color: var(--dim); }
    .tb-val  { font-size: 10px; color: var(--text); }
    .pill {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 2px 8px; border-radius: 3px; font-size: 10px; font-weight: 600; border: 1px solid;
    }
    .pill-ok  { color: var(--ok);   border-color: var(--ok);   background: rgba(51,204,119,.08); }
    .pill-warn{ color: var(--warn); border-color: var(--warn); background: rgba(255,170,34,.08); }
    .pill-dim { color: var(--dim);  border-color: var(--muted); background: transparent; }
    .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
    .blink { animation: blink 2s infinite; }
    .tb-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
    #tb-clock { color: var(--dim); font-size: 10px; }
    #btn-kill {
      background: var(--danger); color: #fff; border: none;
      padding: 3px 10px; border-radius: 2px; font-family: var(--font);
      font-size: 10px; font-weight: 700; letter-spacing: 1px; cursor: pointer;
    }
    #btn-kill:hover { background: #cc2222; }

    /* ── Layout ──────────────────────────────────────────── */
    #layout { display: flex; flex: 1; overflow: hidden; }

    /* ── Left sidebar ────────────────────────────────────── */
    #sl {
      width: var(--slw); background: var(--bg2);
      border-right: 1px solid var(--border);
      overflow-y: auto; flex-shrink: 0; padding: 6px 0 12px;
    }
    .sl-hdr {
      font-size: 8px; font-weight: 700; letter-spacing: 1.5px;
      text-transform: uppercase; color: var(--dim);
      padding: 8px 10px 4px; border-top: 1px solid var(--border);
    }
    .sl-hdr:first-child { border-top: none; padding-top: 4px; }
    .sl-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 3px 10px; font-size: 10px; color: var(--dim);
    }
    .sl-row .lft { display: flex; align-items: center; gap: 6px; }
    .si-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
    .si-dot.ok   { background: var(--ok); }
    .si-dot.warn { background: var(--warn); }
    .si-dot.off  { background: var(--muted); }
    .badge { font-size: 8px; padding: 1px 5px; border-radius: 2px; font-weight: 600; }
    .b-ok  { background: rgba(51,204,119,.12); color: var(--ok); }
    .b-dim { background: rgba(58,80,112,.3);   color: var(--dim); }
    .b-pri { background: rgba(77,184,255,.12); color: var(--primary); }
    .b-warn{ background: rgba(255,170,34,.12); color: var(--warn); }
    .pipe-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 3px 10px; font-size: 10px; color: var(--dim);
    }
    .pipe-row .nm { display: flex; align-items: center; gap: 5px; }
    .c-ok  { color: var(--ok); }
    .c-dim { color: var(--muted); }
    .wi-row { display: flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 10px; }
    .wi-done    { color: var(--ok); }
    .wi-current { color: var(--primary); font-weight: 600; }
    .wi-pend    { color: var(--dim); }

    /* ── Main ────────────────────────────────────────────── */
    #main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    #tabs {
      display: flex; background: var(--bg2);
      border-bottom: 1px solid var(--border); padding: 0 12px; flex-shrink: 0;
    }
    .tab {
      padding: 8px 14px; font-size: 10px; font-weight: 600;
      letter-spacing: .5px; color: var(--dim); cursor: pointer;
      border-bottom: 2px solid transparent; text-transform: uppercase;
    }
    .tab:hover { color: var(--text); }
    .tab.active { color: var(--primary); border-bottom-color: var(--primary); }
    #tab-body { flex: 1; overflow: hidden; display: flex; }
    .pane { display: none; flex: 1; overflow-y: auto; padding: 12px; flex-direction: column; gap: 12px; }
    .pane.active { display: flex; }

    /* ── Panels ──────────────────────────────────────────── */
    .panel { background: var(--bg2); border: 1px solid var(--border); border-radius: 3px; }
    .ph {
      display: flex; align-items: center; justify-content: space-between;
      padding: 6px 10px; border-bottom: 1px solid var(--border);
      font-size: 9px; font-weight: 700; letter-spacing: 1px;
      text-transform: uppercase; color: var(--dim);
    }
    .pb  { padding: 10px; }
    .pb0 { padding: 0; }

    /* KPI grid */
    .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap: 8px; }
    .kpi { background: var(--bg3); border: 1px solid var(--border); border-radius: 3px; padding: 8px 10px; }
    .kpi-lbl { font-size: 8px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
    .kpi-val { font-size: 20px; font-weight: 700; line-height: 1; }
    .kpi-val.ok  { color: var(--ok); }
    .kpi-val.pri { color: var(--primary); }
    .kpi-val.dim { color: var(--muted); }
    .kpi-sub { font-size: 9px; color: var(--dim); margin-top: 3px; }

    /* Data table */
    .dt { width: 100%; border-collapse: collapse; font-size: 10px; }
    .dt th {
      padding: 5px 8px; color: var(--dim); font-weight: 600;
      font-size: 8px; letter-spacing: .5px; text-transform: uppercase;
      border-bottom: 1px solid var(--border); text-align: left;
    }
    .dt td { padding: 5px 8px; border-bottom: 1px solid rgba(26,37,53,.4); }
    .dt tr:last-child td { border-bottom: none; }
    .dt .r  { text-align: right; font-variant-numeric: tabular-nums; }
    .dt .ok { color: var(--ok); }
    .dt .d  { color: var(--dim); }
    .dt .p  { color: var(--primary); }
    .dt .w  { color: var(--warn); }
    .dt .empty { color: var(--dim); text-align: center; padding: 16px; }

    /* Log */
    .log { font-size: 10px; height: 110px; overflow-y: auto; line-height: 1.65; }
    .le { display: flex; gap: 8px; }
    .le-ts { color: var(--dim); flex-shrink: 0; }
    .le-d  { color: var(--dim); }

    /* ── Right sidebar ───────────────────────────────────── */
    #sr {
      width: var(--srw); background: var(--bg2);
      border-left: 1px solid var(--border); overflow-y: auto; flex-shrink: 0;
    }
    .sr-s { border-bottom: 1px solid var(--border); padding: 10px; }
    .sr-hdr {
      font-size: 8px; font-weight: 700; letter-spacing: 1.5px;
      color: var(--dim); text-transform: uppercase; margin-bottom: 8px;
    }
    .sr-row { display: flex; justify-content: space-between; align-items: center; padding: 2px 0; font-size: 10px; }
    .sr-k { color: var(--dim); }
    .sr-v { font-weight: 500; }
    .sr-v.ok  { color: var(--ok); }
    .sr-v.pri { color: var(--primary); }
    .sr-v.dim { color: var(--dim); }
    .wi-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 3px; padding: 8px; margin-top: 6px; }
    .wi-card-id   { font-size: 9px; color: var(--primary); font-weight: 700; margin-bottom: 2px; }
    .wi-card-name { font-size: 10px; margin-bottom: 6px; }
    .wi-task { font-size: 9px; padding: 2px 0; display: flex; gap: 5px; }
    .wi-task.done { color: var(--ok); }
    .wi-task.todo { color: var(--dim); }

    /* ── Refresh bar ─────────────────────────────────────── */
    #refresh-bar {
      height: 2px; background: var(--bg3); flex-shrink: 0; position: relative; overflow: hidden;
    }
    #refresh-fill {
      position: absolute; left: 0; top: 0; height: 100%;
      background: var(--warn); width: 0%;
      transition: width 0.1s linear;
    }
    #refresh-cd { font-size: 9px; color: var(--warn); margin-left: 4px; min-width: 36px; }

    /* ── Content row (layout + push drawer) ────────────────── */
    #content-row { display: flex; flex: 1; overflow: hidden; }

    /* ── Combined AI + Narration Panel (push drawer) ─────── */
    #assist-drawer {
      width: 0; overflow: hidden; flex-shrink: 0;
      background: var(--bg2);
      display: flex; flex-direction: column;
      transition: width 0.22s cubic-bezier(.4,0,.2,1);
    }
    #assist-drawer.open { width: 380px; min-width: 380px; border-left: 1px solid var(--border); }

    /* Narration section */
    #narr-section {
      display: flex; flex-direction: column;
      flex: 0 0 42%; min-height: 0; overflow: hidden;
      border-bottom: 1px solid var(--border);
    }
    #narr-top {
      background: var(--bg3); border-bottom: 1px solid var(--border);
      padding: 6px 10px; flex-shrink: 0;
    }
    #narr-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
    #narr-step-num { font-size: 8px; color: var(--primary); font-weight: 700; min-width: 28px; }
    #narr-step-title { font-size: 10px; font-weight: 700; color: var(--text); flex: 1;
                       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #narr-btns { display: flex; gap: 4px; align-items: center; }
    #narr-btns button {
      background: transparent; border: 1px solid var(--border);
      color: var(--dim); font-family: var(--font); font-size: 12px;
      padding: 2px 8px; border-radius: 2px; cursor: pointer; line-height: 1;
    }
    #narr-btns button:hover { border-color: var(--primary); color: var(--primary); }
    #narr-play-btn {
      color: var(--ok) !important; border-color: rgba(51,204,119,.4) !important;
      min-width: 34px; font-size: 11px !important;
    }
    #narr-step-sel {
      background: var(--bg); border: 1px solid var(--border);
      color: var(--dim); font-family: var(--font); font-size: 8px;
      padding: 3px 4px; border-radius: 2px; cursor: pointer;
      width: 100%; margin-top: 5px; display: block;
    }
    #narr-search {
      flex: 1; min-width: 0;
      background: var(--bg); border: 1px solid var(--border);
      color: var(--text); font-family: var(--font); font-size: 8px;
      padding: 2px 6px; border-radius: 2px; outline: none;
    }
    #narr-search::placeholder { color: var(--dim); }
    #narr-search:focus { border-color: var(--primary); }
    #narr-search::-webkit-search-cancel-button { cursor: pointer; }
    #narr-text-wrap { flex: 1; overflow-y: auto; padding: 10px 12px; }
    .narr-seg {
      font-size: 10px; line-height: 1.75; color: var(--dim);
      margin-bottom: 4px; padding: 3px 5px; border-radius: 2px;
      transition: background .12s, color .12s;
    }
    .narr-seg.narr-hl { color: var(--text); background: rgba(77,184,255,.09); }

    /* Panel divider (drag handle) */
    #panel-divider {
      height: 7px; background: var(--bg); border-top: 1px solid var(--border);
      cursor: row-resize; flex-shrink: 0; display: flex; align-items: center;
      justify-content: center; transition: background .15s;
    }
    #panel-divider:hover { background: rgba(77,184,255,.06); }
    #panel-divider::after { content: '⋯'; font-size: 9px; color: var(--muted); letter-spacing: 3px; }

    /* AI section */
    #ai-section { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
    #assist-hdr {
      height: 34px; display: flex; align-items: center; padding: 0 10px; gap: 7px;
      border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--bg3);
    }
    #assist-hdr-title { font-size: 11px; font-weight: 700; color: var(--primary); }
    #assist-model-badge {
      font-size: 8px; padding: 1px 6px; border-radius: 2px; font-weight: 600;
      background: rgba(77,184,255,.12); color: var(--primary);
      border: 1px solid rgba(77,184,255,.25);
    }
    #assist-close-btn {
      margin-left: auto; background: none; border: none; color: var(--dim);
      cursor: pointer; font-size: 16px; font-family: var(--font); line-height: 1;
    }
    #assist-close-btn:hover { color: var(--text); }
    #assist-msgs {
      flex: 1; overflow-y: auto; padding: 10px 8px;
      display: flex; flex-direction: column; gap: 7px;
    }
    .amsg { display: flex; flex-direction: column; gap: 2px; }
    .amsg-user { align-items: flex-end; }
    .amsg-bot  { align-items: flex-start; }
    .amsg-bubble {
      max-width: 90%; font-size: 10px; line-height: 1.65; padding: 7px 10px;
      border-radius: 4px; white-space: pre-wrap; word-break: break-word;
    }
    .amsg-user .amsg-bubble {
      background: rgba(77,184,255,.13); color: var(--text);
      border: 1px solid rgba(77,184,255,.2);
    }
    .amsg-bot .amsg-bubble {
      background: var(--bg3); color: var(--text);
      border: 1px solid var(--border);
    }
    .amsg-ts { font-size: 8px; color: var(--dim); }

    /* ── Markdown rendering in bot bubbles ───────────────── */
    .amsg-bubble.rendered  { white-space: normal; }
    .amsg-bubble pre.amsg-pre {
      background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
      padding: 6px 8px; margin: 4px 0; overflow-x: auto;
      font-size: 9px; line-height: 1.7; white-space: pre;
    }
    .amsg-bubble code.amsg-code {
      background: rgba(77,184,255,.1); padding: 1px 4px; border-radius: 2px;
      color: var(--primary); font-size: 9px;
    }
    .amsg-bubble strong { color: var(--text); font-weight: 700; }
    /* Section labels */
    .amsg-sec {
      display: block; font-size: 8px; font-weight: 700; letter-spacing: 1.2px;
      text-transform: uppercase; margin: 7px 0 2px;
      padding: 2px 6px; border-left: 2px solid var(--border);
      border-radius: 0 2px 2px 0;
    }
    .amsg-sec-significato { color: var(--primary); border-color: var(--primary); background: rgba(77,184,255,.05); }
    .amsg-sec-calcolo     { color: var(--ok);      border-color: var(--ok);      background: rgba(51,204,119,.05); }
    .amsg-sec-tecnico, .amsg-sec-misura { color: var(--warn); border-color: var(--warn); background: rgba(255,170,34,.05); }
    /* Details toggle */
    details.amsg-details {
      margin: 5px 0; border: 1px solid var(--border); border-radius: 3px; overflow: hidden;
    }
    summary.amsg-details-sum {
      padding: 4px 8px; font-size: 9px; font-weight: 600; cursor: pointer;
      color: var(--dim); background: var(--bg3); user-select: none; list-style: none;
    }
    summary.amsg-details-sum::-webkit-details-marker { display: none; }
    summary.amsg-details-sum::before { content: "▶ "; font-size: 7px; opacity: .7; }
    details.amsg-details[open] > summary.amsg-details-sum::before { content: "▼ "; }
    summary.amsg-details-sum:hover { color: var(--text); }
    .amsg-details-body {
      padding: 6px 9px; font-size: 9px; line-height: 1.7;
      color: var(--dim); border-top: 1px solid var(--border);
    }

    #assist-status-bar {
      padding: 3px 10px; font-size: 9px; border-top: 1px solid var(--border);
      display: flex; align-items: center; gap: 5px; flex-shrink: 0;
      color: var(--dim); background: var(--bg3);
    }
    #assist-status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--dim); flex-shrink: 0; }
    #assist-status-dot.ok  { background: var(--ok); }
    #assist-status-dot.err { background: var(--danger); }
    #assist-input-row {
      display: flex; border-top: 1px solid var(--border); flex-shrink: 0;
    }
    #assist-input {
      flex: 1; background: var(--bg3); border: none; border-right: 1px solid var(--border);
      color: var(--text); font-family: var(--font); font-size: 10px;
      padding: 8px 10px; outline: none; resize: none; height: 56px;
    }
    #assist-send-btn {
      background: var(--primary); color: var(--bg); border: none;
      width: 44px; cursor: pointer; font-size: 16px; font-weight: 700;
    }
    #assist-send-btn:hover   { opacity: .85; }
    #assist-send-btn:disabled { opacity: .35; cursor: default; }
    /* Shortcuts below the input */
    #assist-shortcuts {
      padding: 4px 8px; display: flex; flex-wrap: wrap; gap: 4px;
      border-top: 1px solid var(--border); background: var(--bg3); flex-shrink: 0;
    }
    .assist-chip {
      font-size: 8px; padding: 2px 7px; border-radius: 10px;
      border: 1px solid var(--border); color: var(--dim); cursor: pointer;
      background: transparent; font-family: var(--font);
    }
    .assist-chip:hover { border-color: var(--primary); color: var(--primary); }
    #btn-ops {
      background: transparent; color: var(--ok);
      border: 1px solid rgba(51,204,119,.35); padding: 3px 10px;
      border-radius: 2px; font-family: var(--font); font-size: 10px;
      font-weight: 700; text-decoration: none; letter-spacing: .5px;
    }
    #btn-ops:hover { background: rgba(51,204,119,.1); }
    #btn-assist {
      background: transparent; color: var(--primary);
      border: 1px solid rgba(77,184,255,.3); padding: 3px 10px;
      border-radius: 2px; font-family: var(--font); font-size: 10px; cursor: pointer;
    }
    #btn-assist:hover { background: rgba(77,184,255,.08); }

    /* ── Kill overlay ────────────────────────────────────── */
    #kill-ov {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,.8); z-index: 100;
      align-items: center; justify-content: center;
    }
    #kill-ov.show { display: flex; }
    #kill-box {
      background: var(--bg2); border: 2px solid var(--danger);
      border-radius: 4px; padding: 24px 32px; text-align: center;
    }
    #kill-box h2 { color: var(--danger); font-size: 14px; margin-bottom: 8px; }
    #kill-box p  { color: var(--dim); font-size: 11px; margin-bottom: 16px; }
    #kill-box button {
      font-family: var(--font); font-size: 11px;
      padding: 6px 20px; border-radius: 3px; cursor: pointer; border: 1px solid;
    }
    #kill-yes { background: var(--danger); color: #fff; border-color: var(--danger); margin-right: 8px; }
    #kill-no  { background: transparent; color: var(--dim); border-color: var(--border); }