/* ── Design tokens ── */
    :root {
      color-scheme: dark;
      --bg:       #080d12;
      --surface:  #111922;
      --surface2: #172231;
      --surface3: #1c2a38;
      --border:   #2a3b4d;
      --border2:  #3a526a;
      --text:     #d9e4ee;
      --text-dim: #a5b6c6;
      --text-xs:  #899bad;
      --accent:   #1a9ebe;
      --accent-bg:#0d3a4a;
      --green:    #20a060;
      --green-bg: #0a2518;
      --amber:    #d08020;
      --amber-bg: #271a08;
      --red:      #c04040;
      --red-bg:   #280f0f;
      --purple:   #8060c0;
      --purple-bg:#160e28;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 13px;
      line-height: 1.5;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: var(--bg); color: var(--text); min-height: 100vh; }

    /* ── Layout ── */
    header {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; padding: 10px 18px;
      background: var(--surface); border-bottom: 1px solid var(--border);
      position: sticky; top: 0; z-index: 10;
    }
    h1 { font-size: 15px; font-weight: 700; letter-spacing: .02em; color: #e0eaf4; }
    main {
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
      gap: 14px; padding: 14px;
      align-items: start;
    }
    @media (max-width: 800px) {
      main { grid-template-columns: 1fr; }
      .work-panel { order: 2; }
      .exec-panel { order: 1; }
    }
    .exec-panel { grid-column: 2; grid-row: 1; }
    .work-panel { grid-column: 1; grid-row: 1; }

    /* ── Panels ── */
    .panel {
      background: var(--surface); border: 1px solid var(--border2);
      border-radius: 8px; overflow: hidden;
      box-shadow: 0 16px 36px rgba(0, 0, 0, .28);
    }
    .panel-head {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      padding: 10px 14px; border-bottom: 1px solid var(--border2);
      background: var(--surface3);
    }
    .panel-head h2 { font-size: 13px; font-weight: 600; color: #dce8f2; }

    /* ── Badges & status ── */
    .badge {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
      border: 1px solid var(--border2); background: var(--surface2); color: var(--text);
    }
    .badge.live  { border-color: var(--green); background: var(--green-bg); color: #6eded0; }
    .badge.warn  { border-color: var(--amber); background: var(--amber-bg); color: #f0c060; }
    .badge.error { border-color: var(--red);   background: var(--red-bg);   color: #f08080; }

    /* ── Header controls ── */
    .hdr-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    select, button, input {
      font: inherit; font-size: 12px;
      border: 1px solid var(--border2); border-radius: 6px;
      background: var(--surface2); color: var(--text);
      padding: 5px 10px; cursor: pointer;
      transition: border-color .15s, background .15s;
    }
    input { cursor: text; }
    select:focus, button:focus, input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
    button:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-bg); }
    button.primary { background: var(--accent-bg); border-color: var(--accent); color: #e8f6ff; font-weight: 600; }
    button.primary:hover:not(:disabled) { background: #155070; }
    button:disabled { opacity: .45; cursor: not-allowed; }
    .toggle-control {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 10px; border: 1px solid var(--border2); border-radius: 6px;
      background: var(--surface2); color: var(--text); cursor: pointer;
    }
    .toggle-control input { margin: 0; accent-color: var(--accent); }

    /* ── Exec panel ── */
    .exec-body { padding: 12px; display: grid; gap: 8px; }
    .status-row {
      display: flex; align-items: center; justify-content: space-between;
      gap: 8px; font-size: 12px; color: var(--text-dim); flex-wrap: wrap;
    }
    #statusText {
      font-weight: 600; font-size: 13px;
      padding: 3px 10px; border-radius: 6px;
      background: var(--surface2); border: 1px solid var(--border2);
      color: var(--text);
    }
    #statusText.running { border-color: var(--green); background: var(--green-bg); color: #6eded0; }
    #statusText.error   { border-color: var(--red);   background: var(--red-bg);   color: #f08080; }
    #statusText.warn    { border-color: var(--amber);  background: var(--amber-bg); color: #f0c060; }
    #usageLimitStatus { color: var(--text-dim); font-size: 11px; }
    #lastActivity { color: var(--text-dim); font-size: 11px; }
    .mcp-status-note { color: var(--text-dim); }
    .session-config-row {
      display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
      padding: 7px; border: 1px solid var(--border2); border-radius: 7px;
      background: var(--surface2);
    }
    .session-config-row label {
      display: inline-flex; align-items: center; gap: 6px;
      color: var(--text-dim); font-size: 12px;
    }
    .session-config-row select { min-width: 150px; }
    textarea {
      width: 100%; min-height: 80px; padding: 9px 11px; resize: vertical;
      background: var(--surface2); border: 1px solid var(--border2); border-radius: 7px;
      color: var(--text); font: inherit; line-height: 1.45;
    }
    textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
    .control-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
    .utility-actions { padding-top: 2px; }
    .control-btn {
      display: inline-flex; align-items: center; gap: 6px;
    }
    .control-btn::before {
      content: attr(data-icon);
      display: inline-grid; place-items: center;
      min-width: 18px; height: 18px; padding: 0 3px;
      border-radius: 4px; background: rgba(255, 255, 255, .08);
      color: var(--text); font-size: 10px; font-weight: 700;
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    }
    .control-btn.primary::before { color: #9ee7ff; background: rgba(26, 158, 190, .18); }
    .control-btn.warn::before { color: #f0c060; background: var(--amber-bg); }
    .control-btn.danger::before { color: #f08080; background: var(--red-bg); }
    .preset-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
    .preset-btn {
      font-size: 11px; padding: 4px 8px; color: #94d0a8;
      background: #0d1914; border-color: #214536; border-radius: 999px;
    }
    .preset-btn:hover:not(:disabled) { border-color: var(--green); background: #10301f; color: #c8f2d6; }
    .preset-editor {
      border: 1px solid var(--border2); border-radius: 7px;
      background: var(--surface2);
    }
    .preset-editor summary {
      padding: 7px 9px; cursor: pointer; color: var(--text-dim); font-size: 12px;
    }
    .preset-editor-grid {
      display: grid; grid-template-columns: minmax(160px, 220px) minmax(180px, 1fr);
      gap: 7px; padding: 0 8px 8px;
    }
    .preset-editor-grid textarea { grid-column: 1 / -1; min-height: 96px; }
    .preset-editor-actions { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
    @media (max-width: 800px) {
      .preset-editor-grid { grid-template-columns: 1fr; }
    }

    /* ── Stream tabs ── */
    .stream-tabs {
      display: flex; gap: 4px; padding: 8px 12px 0;
      border-bottom: 1px solid var(--border2); overflow-x: auto;
      background: var(--surface3);
    }
    .stream-tab {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 6px 10px; border-radius: 6px 6px 0 0;
      border: 1px solid transparent; border-bottom: none;
      background: transparent; color: var(--text-dim);
      font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer;
    }
    .stream-tab:hover { background: var(--surface2); color: var(--text); }
    .stream-tab.active { background: var(--surface); border-color: var(--border2); color: var(--text); font-weight: 600; }
    .stream-tab.has-new { color: #6eded0; }
    .stream-count {
      min-width: 18px; padding: 1px 4px;
      border-radius: 999px; background: #26394c; color: var(--text);
      font-size: 10px; font-weight: 700; text-align: center;
    }
    .stream-tab.active .stream-count { background: var(--accent); color: #fff; }
    .stream-tab.has-new .stream-count { background: #0d3a30; color: #6eded0; }

    /* ── Stream output panes ── */
    .stream-output { background: var(--bg); }
    .live-agent-status {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 12px; border-bottom: 1px solid var(--border2);
      background: #0d2028; color: #9fd8ce;
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      font-size: 12px;
    }
    .live-agent-status[hidden] { display: none; }
    .live-agent-status.idle, .live-agent-status.done { color: var(--text-dim); }
    .live-agent-status.warn { color: #e0b060; background: #160f04; }
    .live-agent-status.error { color: #f0a0a0; background: #180808; }
    .live-dots { display: inline-flex; gap: 3px; flex: 0 0 auto; }
    .live-dot {
      width: 6px; height: 6px; border-radius: 999px;
      background: currentColor; animation: livePulse 1.05s infinite ease-in-out;
    }
    .live-dot:nth-child(2) { animation-delay: .14s; }
    .live-dot:nth-child(3) { animation-delay: .28s; }
    .live-agent-status.idle .live-dot,
    .live-agent-status.done .live-dot,
    .live-agent-status.error .live-dot { animation: none; opacity: .45; }
    #liveAgentText { color: var(--text); }
    #liveAgentAge { color: var(--text-dim); margin-left: auto; white-space: nowrap; }
    @keyframes livePulse {
      0%, 80%, 100% { opacity: .25; transform: scale(.72); }
      40% { opacity: 1; transform: scale(1); }
    }
    .output {
      display: none; padding: 12px;
      min-height: 480px; max-height: calc(100vh - 280px);
      overflow-y: auto; overflow-x: hidden;
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      font-size: 12.5px; line-height: 1.55;
    }
    .output.active { display: block; }
    .output a { color: #6ab4ff; text-decoration: underline; text-underline-offset: 2px; }

    /* ── Log entries ── */
    .event-frame { margin-bottom: 10px; }
    .event-time { font-size: 10px; color: var(--text-xs); margin-bottom: 3px;
                  font-family: "SFMono-Regular", Consolas, monospace; }
    .log-entry {
      padding: 9px 11px; border-radius: 7px;
      border: 1px solid var(--border2); background: var(--surface2);
      white-space: pre-wrap; overflow-wrap: anywhere;
    }
    /* Type-specific colours — clearly distinct */
    .log-user    { border-color: #356282; background: #10263a; color: #c5e2f4; }
    .agent-message { border-color: #2e684f; background: #0f291f; color: #c2ead8; }
    .thought-log { border-color: #6c542d; background: #2a1b0b; color: #f0d99b; }
    .tool-log    { border-color: #584280; background: #21153c; color: #dacbff; }
    .command-log { border-color: #2e5870; background: #102733; color: #b4dcef; }
    .usage-log   { border-color: #2c5839; background: #102519; color: #b1dfbd; }
    .exit-log    { border-color: #2c5839; background: #102519; color: #b1dfbd; }
    .stream-text { border-color: var(--border2); background: var(--surface2); color: var(--text); }
    .diagnostic-log { border-color: #6a421a; background: #241304; color: #edc17a; }
    .log-error   { border-color: var(--red); background: var(--red-bg); color: #f0a0a0; }
    .device-code {
      display: inline-block; padding: 2px 8px; border-radius: 4px;
      background: #d8e840; color: #1a1e04; font-weight: 800; letter-spacing: .05em;
    }
    details summary { cursor: pointer; color: var(--text-dim); font-weight: 500; }
    details summary:hover { color: var(--text); }
    details div { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
    .log-entry ul { margin: 6px 0 0; padding-left: 16px; }
    .log-entry li.done { color: #80c898; }
    .log-entry li.todo { color: #d8d090; }

    /* ── Work panel ── */
    .work-tabs {
      display: flex; flex-wrap: wrap; gap: 4px;
      padding: 8px 10px; border-bottom: 1px solid var(--border2);
      background: var(--surface3);
    }
    .tab {
      padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: 500;
      border: 1px solid transparent; background: transparent; color: var(--text-dim);
    }
    .tab:hover { background: var(--surface2); color: var(--text); }
    .tab.active { border-color: var(--border2); background: var(--surface); color: var(--text); font-weight: 600; }
    .list-pane { display: none; padding: 10px; overflow-y: auto; max-height: calc(100vh - 200px); }
    .list-pane.active { display: grid; gap: 8px; }

    /* ── Work items ── */
    .item {
      border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
      background: var(--surface2); overflow-wrap: anywhere;
      transition: border-color .15s, background .15s;
    }
    .item:hover { border-color: #4a6380; background: #1a2735; }
    .item-title {
      font-weight: 600; font-size: 13px; color: #c8dff0;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .item-title a { color: inherit; text-decoration: none; }
    .item-title a:hover { color: #6ab4ff; text-decoration: underline; }
    .item-meta { margin-top: 5px; font-size: 11px; color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 6px; }
    .item-meta .pill {
      padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 600;
      border: 1px solid var(--border2); background: var(--surface); color: var(--text);
    }
    .pill.green  { border-color: var(--green); background: var(--green-bg); color: #80d0a0; }
    .pill.amber  { border-color: var(--amber); background: var(--amber-bg); color: #e0b060; }
    .pill.red    { border-color: var(--red);   background: var(--red-bg);   color: #f08080; }
    .pill.purple { border-color: var(--purple);background: var(--purple-bg);color: #c0a0e8; }
    .item-detail { margin-top: 6px; font-size: 11px; color: var(--text-dim); }
    .item-detail strong { color: var(--text); }
    .muted { color: var(--text-xs); }

    /* ── Session history button ── */
    .session-btn {
      display: block; width: 100%; text-align: left;
      background: transparent; border: 0; padding: 0; color: inherit; cursor: pointer;
    }
    .session-btn:hover .item { border-color: var(--accent); }
    .session-status { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
    .session-status.completed { color: #60c080; }
    .session-status.running   { color: #60c0e0; }
    .session-status.failed    { color: #e06060; }
    .session-status.stopped   { color: #a0a060; }
    .session-updated { color: var(--text-xs); }
    .empty { color: var(--text-dim); font-size: 12px; padding: 16px; text-align: center; }
    .wallet-address { font-family: monospace; font-size: 11px; }