/* ══ DESIGN TOKENS ══ */
      /* Token definitions live in theme.css (central source of truth). */

      /* ══ RESET ══ */
      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

      html {
        height: 100%;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        overflow-x: hidden;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', 'Inter', ui-sans-serif, "Segoe UI", Roboto, sans-serif;
        color: var(--ink);
        background: var(--bg);
        min-height: 100vh;
        height: var(--app-vh);
        overflow: hidden;
        display: flex;
        flex-direction: row;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        padding-top: var(--safe-top);
        padding-right: var(--safe-right);
        padding-bottom: var(--safe-bottom);
        padding-left: var(--safe-left);
      }
      body.mobile-nav-open { overflow: hidden; }

      ::-webkit-scrollbar { width: 5px; }
      ::-webkit-scrollbar-track { background: transparent; }
      ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
      ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }
      body[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); }
      body[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.18); }

      /* Firefox scrollbar */
      * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; }
      body[data-theme="light"] * { scrollbar-color: rgba(0,0,0,0.1) transparent; }

      ::selection { background: var(--accent); color: #fff; }

      :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .sidebar-select:focus-visible, .km-input:focus-visible, .km-textarea:focus-visible,
      .km-select:focus-visible, .input-row textarea:focus-visible { outline: none; }

      /* ══ SIDEBAR ══ */
      .sidebar {
        width: var(--sidebar-width);
        flex-shrink: 0;
        background: var(--sidebar-bg);
        border-right: 1px solid var(--sidebar-border);
        display: flex;
        flex-direction: column;
        padding: 0 14px 20px;
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
        z-index: 20;
        transition: width var(--transition), padding var(--transition);
        -webkit-overflow-scrolling: touch;
      }
      .sidebar::after {
        content: '';
        position: absolute;
        top: 0; right: -1px; bottom: 0;
        width: 1px;
        background: linear-gradient(180deg, transparent 10%, var(--accent-glow) 50%, transparent 90%);
        pointer-events: none;
      }

      .sidebar-brand {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 26px 22px 20px;
        border-bottom: 1px solid var(--line);
        margin-bottom: 12px;
        margin-left: -14px;
        margin-right: -14px;
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--sidebar-bg);
      }
      .sidebar-brand-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }
      .sidebar-brand-icon {
        width: 36px; height: 36px;
        background: linear-gradient(145deg, rgba(59, 130, 246, 0.12), rgba(52, 211, 153, 0.06)), var(--panel);
        border: 1px solid var(--line-strong);
        border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        overflow: hidden;
        box-shadow: var(--shadow-inset), 0 8px 18px rgba(0, 0, 0, 0.18);
        flex-shrink: 0;
        color: var(--accent);
      }
      .sidebar-brand-mark {
        width: 24px;
        height: 24px;
        display: block;
      }
      .sidebar-brand-shield {
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linejoin: round;
        fill: rgba(59, 130, 246, 0.08);
      }
      .sidebar-brand-circuit {
        stroke: var(--ink-secondary);
        stroke-width: 1.1;
        stroke-linecap: round;
        opacity: 0.78;
      }
      .sidebar-brand-node {
        fill: var(--sidebar-bg);
        stroke: currentColor;
        stroke-width: 1.2;
      }
      .sidebar-brand-core {
        fill: var(--green);
        stroke: var(--sidebar-bg);
        stroke-width: 1;
      }
      .sidebar-collapse-btn {
        width: 30px;
        height: 30px;
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-xs);
        background: var(--tag-bg);
        color: var(--muted);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all var(--transition);
        flex-shrink: 0;
      }
      .sidebar-collapse-btn:hover {
        color: var(--ink);
        border-color: var(--accent);
      }
      .sidebar-collapse-btn svg {
        width: 14px;
        height: 14px;
        transition: transform var(--transition);
      }
      .sidebar-brand-text {
        font-weight: 700; font-size: 1.1rem; color: var(--ink);
        line-height: 1.15; letter-spacing: -0.02em;
        min-width: 0;
      }
      .sidebar-brand-name { display: block; }
      .sidebar-brand-text .accent { color: var(--accent); }
      .sidebar-brand-sub {
        font-size: 0.58rem; font-weight: 400; font-style: italic;
        color: var(--muted); letter-spacing: 0.02em; margin-top: 2px;
        display: block;
      }

      /* Nav items */
      .sidebar-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
      .sidebar-nav-item {
        display: flex; align-items: center; gap: 11px;
        padding: 10px 12px;
        border: none; background: transparent;
        color: var(--muted);
        font: inherit; font-size: 0.82rem; font-weight: 600;
        border-radius: var(--radius-xs);
        cursor: pointer;
        transition: all var(--transition);
        position: relative;
        text-align: left;
        letter-spacing: 0.01em;
      }
      .sidebar-nav-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .sidebar-nav-item:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
      body[data-theme="light"] .sidebar-nav-item:hover { background: rgba(0,0,0,0.04); }
      .sidebar-nav-item.active {
        color: var(--accent);
        background: var(--accent-soft);
      }
      .sidebar-nav-item.active::before {
        content: '';
        position: absolute; left: 0; top: 6px; bottom: 6px;
        width: 3px; border-radius: 0 3px 3px 0;
        background: var(--accent);
        box-shadow: 0 0 8px var(--accent-glow);
      }
      .sidebar-nav-item svg {
        width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7;
      }
      .sidebar-nav-item.active svg { opacity: 1; }

      /* Quick-add button on Knowledge tab */
      .sidebar-nav-item .quick-add-btn {
        display: flex;
        margin-left: auto;
        width: 22px; height: 22px;
        border: 1px solid rgba(59, 130, 246,0.25);
        background: var(--accent-soft);
        color: var(--accent);
        border-radius: var(--radius-xs);
        font-size: 0.85rem; font-weight: 700;
        line-height: 1;
        cursor: pointer;
        transition: all var(--transition);
        align-items: center; justify-content: center;
        flex-shrink: 0;
        padding: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }
      .sidebar-nav-item:hover .quick-add-btn,
      .sidebar-nav-item.active .quick-add-btn {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
      .sidebar-nav-item .quick-add-btn:hover {
        background: rgba(59, 130, 246,0.22);
        border-color: rgba(59, 130, 246,0.45);
        transform: scale(1.1);
      }
      @media (hover: none) and (pointer: coarse) {
        .sidebar-nav-item .quick-add-btn {
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
          width: 28px;
          height: 28px;
        }
      }

      .sidebar-divider { height: 1px; background: var(--line); margin: 4px 8px 8px; }

      .sidebar.sidebar-collapsed {
        width: 96px;
        padding: 0 10px 18px;
      }
      .sidebar.sidebar-collapsed .sidebar-brand {
        align-items: center;
        padding: 22px 12px 16px;
        margin-left: -10px;
        margin-right: -10px;
      }
      .sidebar.sidebar-collapsed .sidebar-brand-row {
        width: 100%;
        flex-direction: column;
        gap: 8px;
        justify-content: center;
      }
      .sidebar.sidebar-collapsed .sidebar-collapse-btn {
        position: static;
        margin: 0 auto;
      }
      .sidebar.sidebar-collapsed .sidebar-collapse-btn svg {
        transform: rotate(180deg);
      }
      .sidebar.sidebar-collapsed .sidebar-brand-text {
        text-align: center;
        font-size: 0.76rem;
        width: 100%;
      }
      .sidebar.sidebar-collapsed .sidebar-brand-suffix,
      .sidebar.sidebar-collapsed .sidebar-brand-sub,
      .sidebar.sidebar-collapsed .sidebar-divider,
      .sidebar.sidebar-collapsed .sidebar-section,
      .sidebar.sidebar-collapsed .sidebar-spacer,
      .sidebar.sidebar-collapsed .sidebar-metrics,
      .sidebar.sidebar-collapsed #tenantUsageSection,
      .sidebar.sidebar-collapsed .sidebar-theme-btn,
      .sidebar.sidebar-collapsed .sidebar-legal {
        display: none !important;
      }
      .sidebar.sidebar-collapsed .sidebar-nav {
        align-items: center;
        gap: 8px;
        margin-bottom: 0;
      }
      .sidebar.sidebar-collapsed .sidebar-nav-item {
        width: 100%;
        justify-content: center;
        gap: 0;
        padding: 11px 10px;
      }
      .sidebar.sidebar-collapsed .sidebar-nav-label,
      .sidebar.sidebar-collapsed .sidebar-nav-item .quick-add-btn {
        display: none !important;
      }
      .sidebar.sidebar-collapsed .sidebar-nav-item.active::before {
        left: 50%;
        top: auto;
        bottom: 4px;
        width: 22px;
        height: 3px;
        transform: translateX(-50%);
        border-radius: 3px 3px 0 0;
      }

      .sidebar-section { padding: 6px 4px; }
      .sidebar-label {
        display: block; font-size: 0.6rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.1em;
        color: var(--muted); margin-bottom: 6px; padding-left: 2px;
      }
      .sidebar-select {
        width: 100%;
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-xs);
        padding: 7px 10px;
        font: inherit; font-size: 0.76rem;
        background: var(--sunken); color: var(--ink);
        outline: none; cursor: pointer;
        transition: border-color var(--transition), box-shadow var(--transition);
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236c6c8a'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
        padding-right: 28px;
      }
      .sidebar-select:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-glow);
      }
      .sidebar-select option { background: var(--surface); color: var(--ink); }

      .sidebar-btn-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
      .sidebar-btn-row > .sidebar-btn { flex: 1 1 0; min-width: 0; }
      .sidebar-btn {
        flex: 1;
        border: 1px solid rgba(59, 130, 246, 0.2);
        border-radius: var(--radius-xs);
        padding: 7px 10px;
        background: var(--accent-soft); color: var(--accent);
        font: inherit; font-size: 0.72rem; font-weight: 700;
        cursor: pointer;
        transition: all var(--transition);
        letter-spacing: 0.01em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        text-decoration: none;
        line-height: 1.2;
        min-height: 30px;
        white-space: nowrap;
      }
      .sidebar-btn:hover {
        background: rgba(59, 130, 246, 0.18);
        border-color: rgba(59, 130, 246, 0.35);
      }
      .sidebar-btn:disabled { opacity: 0.35; cursor: not-allowed; }
      .sticky-agent-banner {
        margin-top: 6px;
        padding: 6px 8px;
        border-radius: 6px;
        background: rgba(59, 130, 246, 0.14);
        border: 1px solid rgba(59, 130, 246, 0.35);
        color: var(--text);
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
      }
      .sticky-agent-banner[hidden] { display: none; }
      .sticky-agent-exit {
        font-size: 11px;
        padding: 2px 8px;
        border-radius: 4px;
        border: 1px solid rgba(59, 130, 246, 0.4);
        background: transparent;
        color: var(--text);
        cursor: pointer;
      }
      .sticky-agent-exit:hover {
        background: rgba(59, 130, 246, 0.2);
      }
      .sidebar-btn-danger {
        color: var(--red);
        border-color: rgba(248, 113, 113, 0.2);
        background: var(--red-soft);
      }
      .sidebar-btn-danger:hover {
        border-color: rgba(248, 113, 113, 0.4);
        background: rgba(248, 113, 113, 0.15);
      }

      .sidebar-tool-limit-section {
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-sm);
        padding: 10px 10px 8px;
        background: var(--sunken);
        box-shadow: var(--shadow-inset);
      }
      .sidebar-tool-limit-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
      }
      .sidebar-tool-limit-header .sidebar-label { margin-bottom: 0; }
      .sidebar-toggle-row {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 0.62rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--muted);
        cursor: pointer;
        transition: color var(--transition);
        user-select: none;
      }
      .sidebar-toggle-row:hover { color: var(--ink-secondary); }
      .sidebar-toggle-switch {
        position: relative;
        display: inline-flex;
        flex-shrink: 0;
        width: 26px;
        height: 15px;
      }
      .sidebar-toggle-input {
        position: absolute;
        opacity: 0;
        width: 100%; height: 100%;
        cursor: pointer;
        margin: 0; z-index: 1;
      }
      .sidebar-toggle-thumb {
        position: absolute; inset: 0;
        border-radius: 8px;
        background: var(--bg);
        border: 1px solid var(--line-strong);
        transition: background var(--transition), border-color var(--transition);
        pointer-events: none;
      }
      .sidebar-toggle-thumb::after {
        content: '';
        position: absolute;
        top: 2px; left: 2px;
        width: 9px; height: 9px;
        border-radius: 50%;
        background: var(--muted);
        transition: transform var(--transition), background var(--transition);
      }
      .sidebar-toggle-input:checked + .sidebar-toggle-thumb {
        background: var(--accent-soft);
        border-color: rgba(59, 130, 246, 0.4);
      }
      .sidebar-toggle-input:checked + .sidebar-toggle-thumb::after {
        transform: translateX(11px);
        background: var(--accent);
      }
      .sidebar-tool-limit-input-row {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .sidebar-number-input {
        flex: 1;
        min-width: 0;
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-xs);
        padding: 6px 8px;
        font: inherit;
        font-size: 0.74rem;
        background: var(--bg);
        color: var(--ink);
        -moz-appearance: textfield;
      }
      .sidebar-number-input::-webkit-inner-spin-button,
      .sidebar-number-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
      .sidebar-number-input:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-glow);
      }
      .sidebar-number-input:disabled { opacity: 0.4; cursor: not-allowed; }
      .sidebar-tool-limit-input-row .sidebar-btn {
        flex: 0 0 auto;
        padding-inline: 10px;
      }
      .sidebar-inline-note {
        margin-top: 6px;
        font-size: 0.66rem;
        color: var(--muted);
      }

      /* ── Change Password Modal ── */
      .cp-overlay {
        display: none; position: fixed; inset: 0; z-index: 9999;
        background: rgba(0,0,0,0.45); align-items: center; justify-content: center;
        overflow: auto; padding: 20px 12px;
        -webkit-overflow-scrolling: touch;
      }
      .cp-overlay.visible { display: flex; }
      .cp-dialog {
        background: var(--surface); border: 1px solid var(--line-strong);
        border-radius: var(--radius-md); padding: 24px; width: 340px; max-width: 90vw;
        max-height: calc(var(--app-vh) - 40px); overflow: auto;
        box-shadow: 0 8px 32px rgba(0,0,0,0.18);
        -webkit-overflow-scrolling: touch;
      }
      .cp-dialog h3 { margin: 0 0 16px; font-size: 0.95rem; color: var(--ink); }
      .cp-dialog label { display: block; font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
      .cp-dialog input {
        width: 100%; box-sizing: border-box; padding: 8px 10px; margin-bottom: 12px;
        border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
        background: var(--bg); color: var(--ink); font-size: 0.82rem; font-family: inherit;
      }
      .cp-dialog input:focus { outline: none; border-color: var(--accent); }
      .cp-alert { font-size: 0.78rem; padding: 8px 10px; border-radius: var(--radius-sm); margin-bottom: 12px; }
      .cp-alert-error { background: var(--red-soft); color: var(--red); }
      .cp-alert-ok { background: rgba(52,211,153,0.12); color: #34d399; }
      .cp-actions { display: flex; gap: 8px; justify-content: flex-end; }
      .cp-actions button {
        padding: 7px 16px; border-radius: var(--radius-sm); font-size: 0.78rem;
        font-family: inherit; cursor: pointer; border: 1px solid var(--line-strong);
        background: var(--surface); color: var(--ink);
      }
      .cp-actions button:hover { background: var(--bg); }
      .cp-actions .cp-save { background: var(--accent); color: #fff; border-color: var(--accent); }
      .cp-actions .cp-save:hover { opacity: 0.9; }
      .ca-dialog {
        width: min(1040px, 94vw);
        max-width: min(1040px, 94vw);
      }
      .ca-head-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
      }
      .ca-mode-controls {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }
      .ca-editor-frame {
        position: relative;
        min-height: 460px;
        border: 1px solid var(--line-strong);
        border-radius: 14px;
        background: rgba(15,18,25,0.72);
        overflow: hidden;
      }
      body[data-theme="light"] .ca-editor-frame {
        background: rgba(255,255,255,0.88);
      }
      .ca-prompt {
        width: 100%;
        min-height: 460px;
        border: none;
        outline: none;
        resize: vertical;
        padding: 18px 20px;
        background: transparent;
        color: var(--ink);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
        font-size: 0.84rem;
        line-height: 1.65;
        box-sizing: border-box;
      }
      .ca-preview {
        display: none;
        min-height: 460px;
        max-height: min(68vh, 760px);
        overflow: auto;
        padding: 18px 20px;
        -webkit-overflow-scrolling: touch;
      }
      .ca-preview.active { display: block; }
      .ca-help-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 10px;
        font-size: 0.85rem;
        color: var(--muted);
      }
      .ca-actions {
        margin-top: 16px;
      }

      @media (max-width: 720px) {
        .ca-head-row,
        .ca-help-row,
        .ca-actions {
          flex-direction: column;
          align-items: stretch;
        }
        .ca-mode-controls {
          justify-content: flex-start;
        }
        .ca-editor-frame,
        .ca-prompt,
        .ca-preview {
          min-height: 360px;
        }
      }

      .sidebar-spacer { flex: 1; min-height: 12px; }

      .sidebar-metrics {
        padding: 14px; margin-top: 4px;
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-sm);
        background: var(--sunken);
        box-shadow: var(--shadow-inset);
        display: flex; flex-direction: column; gap: 10px;
      }
      .sidebar-metric {
        display: flex; justify-content: space-between; align-items: baseline;
      }
      .sidebar-metric-label {
        font-size: 0.6rem; text-transform: uppercase;
        letter-spacing: 0.1em; color: var(--muted); font-weight: 700;
      }
      .sidebar-metric-value {
        font-size: 1rem; font-weight: 800;
        color: var(--ink); font-variant-numeric: tabular-nums;
        letter-spacing: -0.02em;
      }
      .sidebar-status {
        display: flex; align-items: center; gap: 8px;
        font-size: 0.7rem; color: var(--muted); font-weight: 500;
        padding-top: 8px; border-top: 1px solid var(--line);
      }

      .sidebar-theme-btn {
        margin-top: 8px;
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-xs);
        padding: 8px; width: 100%;
        background: var(--tag-bg); color: var(--muted);
        font: inherit; font-size: 0.72rem; font-weight: 600;
        cursor: pointer;
        transition: all var(--transition);
        letter-spacing: 0.02em;
      }
      .sidebar-theme-btn:hover { color: var(--ink); border-color: var(--accent); }

      .sidebar-legal {
        margin-top: 12px;
        border-top: 1px solid var(--line);
        padding-top: 12px;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .sidebar-legal-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
      }
      .sidebar-legal-link {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--muted);
        font-size: 0.64rem;
        font-family: inherit;
        padding: 0;
        transition: color var(--transition);
        border-bottom: 1px dashed var(--line-strong);
      }
      .sidebar-legal-link:hover {
        color: var(--ink);
        border-bottom-color: var(--accent);
      }
      .sidebar-legal-dot {
        color: var(--muted);
        font-size: 0.64rem;
        opacity: 0.5;
        user-select: none;
      }
      .sidebar-copyright {
        font-size: 0.64rem;
        color: var(--muted);
        opacity: 0.65;
      }

      /* ── Help & Resources Modal Styles ── */
      .help-modal-tabs {
        display: flex;
        gap: 4px;
        border-bottom: 1px solid var(--line);
        padding: 0 22px;
        background: var(--bg-muted, rgba(255,255,255,0.02));
      }
      .help-modal-tab {
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        color: var(--muted);
        font: inherit;
        font-size: 0.8rem;
        font-weight: 600;
        padding: 12px 16px;
        cursor: pointer;
        transition: all var(--transition);
      }
      .help-modal-tab:hover {
        color: var(--ink);
        border-bottom-color: var(--line-strong);
      }
      .help-modal-tab.active {
        color: var(--accent);
        border-bottom-color: var(--accent);
      }
      
      .resources-layout {
        display: flex;
        height: 100%;
        min-height: 450px;
      }
      .resources-menu {
        width: 160px;
        border-right: 1px solid var(--line);
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 16px 12px;
        background: var(--bg-muted, rgba(255,255,255,0.02));
        flex-shrink: 0;
      }
      .resources-menu-item {
        background: transparent;
        border: none;
        color: var(--muted);
        font: inherit;
        font-size: 0.72rem;
        font-weight: 600;
        padding: 8px 10px;
        border-radius: var(--radius-xs);
        text-align: left;
        cursor: pointer;
        transition: all var(--transition);
      }
      .resources-menu-item:hover {
        color: var(--ink);
        background: rgba(255,255,255,0.04);
      }
      body[data-theme="light"] .resources-menu-item:hover {
        background: rgba(0,0,0,0.04);
      }
      .resources-menu-item.active {
        color: var(--accent);
        background: rgba(59, 130, 246, 0.08);
      }
      .resources-content-pane {
        flex: 1;
        overflow-y: auto;
        padding: 22px;
        background: var(--bg);
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      
      .res-card {
        background: var(--bg-elev, #1b1d22);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 20px;
      }
      .res-card h1 {
        font-size: 1.25rem;
        margin-bottom: 6px;
        color: var(--ink);
        font-weight: 700;
      }
      .res-card small {
        display: block;
        font-size: 0.72rem;
        color: var(--muted);
        margin-bottom: 16px;
      }
      .res-card h2 {
        font-size: 0.95rem;
        margin-top: 18px;
        margin-bottom: 8px;
        color: var(--ink-secondary);
        font-weight: 600;
        border-bottom: 1px solid var(--line);
        padding-bottom: 4px;
      }
      .res-card p {
        font-size: 0.78rem;
        line-height: 1.5;
        margin-bottom: 10px;
        color: var(--ink-secondary);
      }
      .res-card ul {
        margin-bottom: 10px;
        padding-left: 20px;
        font-size: 0.78rem;
        color: var(--ink-secondary);
      }
      .res-card li {
        margin-bottom: 4px;
      }

      /* Status dot */
      .status-dot {
        width: 7px; height: 7px; border-radius: 50%;
        background: var(--green);
        box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
        animation: pulse-dot 2.5s ease-in-out infinite;
        flex-shrink: 0;
      }
      @keyframes pulse-dot {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.45; }
      }

      /* ══ WORKSPACE ══ */
      .workspace {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
      }

      /* ══ ALPHA BANNER ══ */
      /* Persistent top-of-app warning that the product is in alpha. The
         banner is dismissible per session via sessionStorage and can be
         silenced permanently via the user-preferences API. It does not
         block any UI — it sits above the shell in normal flow. */
      .alpha-banner {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 8px 18px;
        border-bottom: 1px solid rgba(251, 191, 36, 0.28);
        background: linear-gradient(90deg, rgba(251, 191, 36, 0.18), rgba(249, 115, 22, 0.14));
        color: var(--ink);
        font-size: 0.78rem;
        line-height: 1.35;
      }
      .alpha-banner[hidden] { display: none; }
      body[data-theme="light"] .alpha-banner {
        background: linear-gradient(90deg, rgba(251, 191, 36, 0.22), rgba(249, 115, 22, 0.18));
      }
      .alpha-banner-icon {
        font-size: 1rem;
        color: var(--amber);
        flex-shrink: 0;
      }
      .alpha-banner-text {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 4px 10px;
      }
      .alpha-banner-title {
        font-weight: 700;
        color: var(--ink);
      }
      .alpha-banner-sub {
        color: var(--ink-secondary);
      }
      .alpha-banner-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
      }
      .alpha-banner-mute {
        background: var(--tag-bg);
        border: 1px solid var(--tag-border);
        color: var(--ink-secondary);
        border-radius: var(--radius-xs);
        padding: 4px 10px;
        font: inherit;
        font-size: 0.7rem;
        font-weight: 600;
        cursor: pointer;
        transition: all var(--transition);
      }
      .alpha-banner-mute:hover {
        color: var(--ink);
        border-color: var(--line-strong);
      }
      .alpha-banner-close {
        width: 26px;
        height: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid var(--tag-border);
        background: var(--tag-bg);
        color: var(--muted);
        font: inherit;
        font-size: 1rem;
        line-height: 1;
        cursor: pointer;
        transition: all var(--transition);
      }
      .alpha-banner-close:hover {
        color: var(--ink);
        border-color: var(--line-strong);
      }
      @media (max-width: 640px) {
        .alpha-banner { gap: 10px; padding: 8px 12px; }
        .alpha-banner-mute { display: none; }
      }

      /* ══ SHELL LAYOUT ══ */
      .shell {
        flex: 1;
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px 28px;
        min-height: 0;
        overflow: hidden;
      }

      /* View switching */
      body.can-view-diagnostics .shell[data-view="chat"] .tp { display: none; }

      .shell[data-view="knowledge"] { grid-template-columns: 1fr; grid-template-rows: 1fr; padding: 0; }
      .shell[data-view="knowledge"] .chat-col,
      .shell[data-view="knowledge"] .tp { display: none; }
      .shell[data-view="knowledge"] .km-col { display: flex; }

      .shell[data-view="changes"] { grid-template-columns: 1fr; }
      .shell[data-view="changes"] .chat-col,
      .shell[data-view="changes"] .tp,
      .shell[data-view="changes"] .km-col { display: none; }
      .shell[data-view="changes"] .cl-col { display: flex; }

      .shell[data-view="canvas"] { grid-template-columns: 1fr 1fr; }
      .shell[data-view="canvas"] .tp,
      .shell[data-view="canvas"] .km-col,
      .shell[data-view="canvas"] .cl-col { display: none; }
      .shell[data-view="canvas"] .cv-col { display: flex; }

      .shell[data-view="roadmap"] { grid-template-columns: 1fr; }
      .shell[data-view="roadmap"] .chat-col,
      .shell[data-view="roadmap"] .tp,
      .shell[data-view="roadmap"] .km-col,
      .shell[data-view="roadmap"] .cl-col,
      .shell[data-view="roadmap"] .cv-col { display: none; }
      .shell[data-view="roadmap"] .rm-col { display: flex; }

      .shell[data-view="graph"] { grid-template-columns: 1fr; }
      .shell[data-view="graph"] .chat-col,
      .shell[data-view="graph"] .tp,
      .shell[data-view="graph"] .km-col,
      .shell[data-view="graph"] .cl-col,
      .shell[data-view="graph"] .cv-col,
      .shell[data-view="graph"] .rm-col { display: none; }
      .shell[data-view="graph"] .kg-col { display: flex; }

      /* ══ CANVAS PANEL ══ */
      .cv-col {
        display: none; flex-direction: column; gap: 0;
        min-width: 0; min-height: 0; overflow: hidden;
      }
      .cv-toolbar {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 16px;
        background: var(--surface); border: 1px solid var(--line-strong);
        border-radius: var(--radius) var(--radius) 0 0;
        flex-shrink: 0;
      }
      .cv-toolbar-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
      .cv-toolbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
      .cv-title {
        font-weight: 700; font-size: 0.78rem; text-transform: uppercase;
        letter-spacing: 0.08em; color: var(--muted);
        display: flex; align-items: center; gap: 8px;
      }
      .cv-title::before {
        content: ''; display: inline-block; width: 3px; height: 14px;
        background: var(--green); border-radius: 2px;
      }
      .cv-project-title {
        font-size: 0.76rem; font-weight: 500; color: var(--ink-secondary);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        max-width: 300px;
      }
      .cv-toolbar-btn {
        background: var(--accent-soft); border: 1px solid var(--accent-glow);
        color: var(--accent); border-radius: var(--radius-xs); padding: 6px 14px;
        font: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer;
        transition: all var(--transition); display: flex; align-items: center; gap: 5px;
        white-space: nowrap;
      }
      .cv-toolbar-btn:hover { background: rgba(59, 130, 246,0.18); border-color: rgba(59, 130, 246,0.35); }
      .cv-toolbar-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
      .cv-toolbar-btn-green {
        background: var(--green-soft); border-color: rgba(52,211,153,0.2); color: var(--green);
      }
      .cv-toolbar-btn-green:hover { background: rgba(52,211,153,0.18); border-color: rgba(52,211,153,0.35); }
      .cv-toolbar-sep { width: 1px; height: 20px; background: var(--line-strong); flex-shrink: 0; }

      .cv-body {
        flex: 1; display: flex; min-height: 0;
        border: 1px solid var(--line-strong); border-top: none;
        border-radius: 0 0 var(--radius) var(--radius);
        overflow: hidden;
      }
      .cv-editor-pane {
        flex: 1; display: flex; flex-direction: column;
        min-width: 0; min-height: 0; position: relative;
      }
      .cv-editor-tabs {
        display: flex; gap: 0; background: var(--sunken);
        border-bottom: 1px solid var(--line); flex-shrink: 0;
      }
      .cv-editor-tab {
        padding: 8px 16px; font: inherit; font-size: 0.74rem; font-weight: 600;
        color: var(--muted); background: transparent; border: none;
        border-bottom: 2px solid transparent; cursor: pointer;
        transition: all var(--transition);
      }
      .cv-editor-tab:hover { color: var(--ink-secondary); background: rgba(255,255,255,0.02); }
      body[data-theme="light"] .cv-editor-tab:hover { background: rgba(0,0,0,0.02); }
      .cv-editor-tab.active {
        color: var(--accent); border-bottom-color: var(--accent);
        background: var(--surface);
      }
      .cv-editor-area {
        flex: 1; min-height: 0; position: relative;
      }
      .cv-editor-area textarea {
        position: absolute; inset: 0; width: 100%; height: 100%;
        background: var(--surface); color: var(--ink); border: none;
        padding: 14px 16px; font-family: 'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;
        font-size: 0.82rem; line-height: 1.6; resize: none; outline: none;
        tab-size: 2; white-space: pre; overflow: auto;
        overscroll-behavior-y: contain;
      }
      .cv-editor-area textarea::placeholder { color: var(--muted); }

      .cv-resize-handle {
        width: 6px; cursor: col-resize; flex-shrink: 0;
        background: var(--line); position: relative;
        transition: background var(--transition);
      }
      .cv-resize-handle:hover, .cv-resize-handle.dragging {
        background: var(--accent);
      }
      .cv-resize-handle::after {
        content: ''; position: absolute; top: 50%; left: 50%;
        transform: translate(-50%,-50%); width: 2px; height: 24px;
        border-radius: 1px; background: var(--muted); opacity: 0.4;
      }

      .cv-preview-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 6px 12px; background: var(--sunken);
        border-bottom: 1px solid var(--line); flex-shrink: 0;
      }
      .cv-preview-label {
        font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.08em; color: var(--muted);
      }
      .cv-preview-frame {
        flex: 1; border: none; width: 100%; min-height: 0;
        background: #fff;
      }

      .cv-console {
        max-height: 160px; overflow-y: auto; background: var(--sunken);
        border-top: 1px solid var(--line); flex-shrink: 0;
        font-family: 'SF Mono','Fira Code','Consolas',monospace;
        font-size: 0.72rem; line-height: 1.5; overscroll-behavior-y: contain;
      }
      .cv-console.collapsed { display: none; }
      .cv-console-row {
        padding: 4px 12px; border-bottom: 1px solid var(--line);
        white-space: pre-wrap; word-break: break-all;
      }
      .cv-console-row:last-child { border-bottom: none; }
      .cv-console-log { color: var(--ink-secondary); }
      .cv-console-warn { color: var(--amber); background: rgba(251,191,36,0.06); }
      .cv-console-error { color: var(--red); background: var(--red-soft); }
      .cv-console-empty {
        padding: 10px 12px; color: var(--muted); font-style: italic;
      }

      .cv-empty-state {
        position: absolute; inset: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 12px; color: var(--muted); text-align: center; padding: 24px;
        background: var(--surface);
      }
      .cv-empty-state svg { opacity: 0.25; }
      .cv-empty-state p {
        font-size: 0.88rem; font-weight: 600; color: var(--ink-secondary); margin: 0;
      }
      .cv-empty-state span {
        font-size: 0.74rem; color: var(--muted); font-style: italic;
      }
      .cv-empty-state.hidden { display: none; }

      .cv-preview-pane {
        flex: 1; display: flex; flex-direction: column;
        min-width: 0; min-height: 0; background: #fff;
        position: relative;
      }

      @media (max-width: 768px) {
        .shell[data-view="canvas"] { grid-template-columns: 1fr; }
        .shell[data-view="canvas"] .cv-col { max-height: 50vh; }
        .cv-body { flex-direction: column; }
        .cv-resize-handle { display: none; }
        .cv-editor-pane, .cv-preview-pane { flex: none; height: 50%; }
        .cv-toolbar { flex-wrap: wrap; }
      }

      /* ══ CHAT COLUMN ══ */
      .chat-col {
        display: flex; flex-direction: column;
        gap: 16px; min-width: 0; min-height: 0;
      }

      .chat-history {
        flex: 1; overflow-y: auto;
        display: flex; flex-direction: column;
        gap: 16px; padding: 16px 8px; min-height: 0;
        overscroll-behavior-y: contain;
        scrollbar-gutter: stable;
        -webkit-overflow-scrolling: touch;
      }

      button,
      [role="button"],
      a {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
      }

      @media (pointer: coarse) {
        /* iOS auto-zooms any input/textarea/select with font-size < 16px,
           and the visual viewport does not always snap back when the
           keyboard dismisses. Force every text-entry control to >= 16px
           with !important because per-component selectors below set
           sub-16px sizes (e.g. `.input-row textarea` at 0.9rem). */
        input,
        textarea,
        select,
        [contenteditable="true"] {
          font-size: 16px !important;
        }
      }

      /* Messages */
      .msg {
        max-width: min(76%, 720px);
        padding: 14px 18px;
        border-radius: var(--radius);
        font-size: 0.9rem; line-height: 1.7;
        white-space: pre-wrap; word-break: break-word;
        animation: msg-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
      }
      .msg-copy-btn {
        position: absolute;
        bottom: 8px;
        right: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        padding: 0;
        border: 1px solid var(--tag-border);
        background: transparent;
        color: var(--muted);
        border-radius: var(--radius-xs);
        font: inherit;
        cursor: pointer;
        opacity: 0;
        transition: all var(--transition);
      }
      .msg:hover .msg-copy-btn { opacity: 1; }
      @media (hover: none) and (pointer: coarse) {
        .msg .msg-copy-btn { opacity: 1; }
      }
      .msg-copy-btn:hover {
        background: var(--accent-soft);
        color: var(--accent);
        border-color: rgba(59, 130, 246, 0.28);
      }
      .msg-copy-btn:disabled { opacity: 0.7; cursor: default; }
      .msg-copy-btn svg {
        width: 13px;
        height: 13px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .msg-user .msg-copy-btn {
        border-color: rgba(255,255,255,0.18);
        color: rgba(255,255,255,0.6);
      }
      .msg-user .msg-copy-btn:hover {
        background: rgba(255,255,255,0.14);
        color: #fff;
        border-color: rgba(255,255,255,0.3);
      }
      @keyframes msg-in {
        from { opacity: 0; transform: translateY(12px) scale(0.98); }
        to { opacity: 1; transform: translateY(0) scale(1); }
      }
      .msg-user {
        align-self: flex-end;
        background: linear-gradient(135deg, var(--accent), var(--accent-hover));
        color: #fff;
        border-bottom-right-radius: 4px;
        box-shadow: 0 4px 24px var(--accent-glow);
      }
      .msg-assistant {
        align-self: flex-start;
        background: var(--raised);
        border: 1px solid var(--line-strong);
        border-bottom-left-radius: 4px;
        box-shadow: var(--shadow-up);
      }
      .msg-error {
        align-self: flex-start;
        background: var(--red-soft);
        border: 1px solid rgba(248, 113, 113, 0.2);
        color: var(--red);
        border-bottom-left-radius: 4px;
      }
      .msg-meta {
        font-size: 0.68rem; color: var(--ink-secondary);
        margin-top: 8px; opacity: 0.6;
      }
      .msg-user .msg-meta { color: rgba(255,255,255,0.55); }

      .msg-asset-players {
        margin-top: 12px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .msg-audio-player {
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-sm);
        background: var(--sunken);
        padding: 10px;
        display: grid;
        gap: 8px;
      }
      .msg-audio-title {
        color: var(--ink);
        font-size: 0.78rem;
        font-weight: 700;
        line-height: 1.3;
      }
      .msg-audio-player audio {
        display: block;
        width: 100%;
        min-width: 220px;
        height: 36px;
      }
      .msg-audio-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        color: var(--muted);
        font-size: 0.68rem;
        line-height: 1.3;
      }
      .msg-audio-footer a {
        color: var(--accent);
        font-weight: 700;
        text-decoration: none;
      }
      .msg-audio-footer a:hover { text-decoration: underline; }

      .msg-artifact-actions {
        margin-top: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .msg-artifact-btn {
        border: 1px solid rgba(59, 130, 246, 0.28);
        background: var(--accent-soft);
        color: var(--accent);
        border-radius: var(--radius-xs);
        padding: 5px 10px;
        font: inherit;
        font-size: 0.72rem;
        font-weight: 700;
        cursor: pointer;
        transition: all var(--transition);
      }
      .msg-artifact-btn:hover {
        background: rgba(59, 130, 246, 0.18);
        border-color: rgba(59, 130, 246, 0.4);
      }
      .msg-artifact-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      .msg-artifact-btn-muted {
        border-color: var(--line-strong);
        background: var(--panel);
        color: var(--ink-secondary);
        font-weight: 600;
        white-space: normal;
        text-align: left;
        max-width: 100%;
      }
      .msg-artifact-btn-muted:hover {
        background: var(--bg-secondary);
        border-color: var(--line-strong);
      }
      .msg-artifact-path {
        color: var(--muted);
        font-size: 0.66rem;
        font-family: 'SF Mono', 'Fira Code', monospace;
      }

      /* Reasoning block */
      .msg-reasoning {
        margin-bottom: 10px; border-radius: 8px;
        border: 1px solid var(--border); overflow: hidden; font-size: 0.85rem;
      }
      .msg-reasoning-toggle {
        display: flex; align-items: center; gap: 6px;
        padding: 8px 12px; cursor: pointer; user-select: none;
        font-weight: 500; color: var(--ink-secondary);
        background: var(--bg-secondary); transition: background 0.15s;
      }
      .msg-reasoning-toggle:hover { background: var(--border); }
      .msg-reasoning-toggle .arrow {
        display: inline-block; transition: transform 0.2s; font-size: 0.65rem;
      }
      .msg-reasoning.open .msg-reasoning-toggle .arrow { transform: rotate(90deg); }
      .msg-reasoning-content {
        display: none; padding: 10px 12px;
        color: var(--ink-secondary); line-height: 1.5;
        white-space: pre-wrap; max-height: 400px; overflow-y: auto;
        font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
        font-size: 0.8rem; background: var(--bg-primary);
      }
      .msg-reasoning.open .msg-reasoning-content { display: block; }

      /* Markdown */
      .msg-markdown { white-space: normal; }
      .msg-markdown p { margin: 0 0 10px; }
      .msg-markdown p:last-child { margin-bottom: 0; }
      .msg-markdown h1, .msg-markdown h2, .msg-markdown h3,
      .msg-markdown h4, .msg-markdown h5, .msg-markdown h6 {
        margin: 0 0 8px; line-height: 1.35;
      }
      .msg-markdown ul, .msg-markdown ol { margin: 0 0 10px 20px; padding: 0; }
      .msg-markdown li { margin: 2px 0; }
      .msg-markdown li > ul, .msg-markdown li > ol { margin-top: 6px; margin-bottom: 6px; }
      .msg-markdown blockquote {
        margin: 0 0 10px; padding: 8px 12px;
        border-left: 3px solid var(--accent); opacity: 0.85;
        background: var(--panel); border-radius: 8px; color: var(--ink-secondary);
      }
      .msg-markdown pre {
        margin: 0 0 10px; padding: 12px 14px;
        border: 1px solid var(--line-strong); border-radius: 8px;
        background: var(--sunken); overflow-x: auto;
      }
      .msg-markdown code {
        font-family: "SF Mono", "Fira Code", monospace; font-size: 0.82rem;
      }
      .msg-markdown :not(pre) > code {
        background: var(--panel); border: 1px solid var(--line-strong);
        padding: 1px 6px; border-radius: 5px;
      }
      .msg-markdown a { color: var(--accent); text-decoration: underline; }
      .msg-markdown table {
        width: 100%; border-collapse: collapse; margin: 0 0 10px; font-size: 0.82rem;
      }
      .msg-markdown hr {
        border: 0; border-top: 1px solid var(--line-strong); margin: 12px 0;
      }
      .msg-markdown th, .msg-markdown td {
        border: 1px solid var(--line-strong); padding: 6px 8px;
        text-align: left; vertical-align: top;
      }
      .msg-markdown th { background: var(--panel); }

      /* Chat empty */
      .chat-empty {
        flex: 1; display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 20px; color: var(--muted);
      }
      .chat-empty-icon {
        width: 72px; height: 72px; border-radius: 50%;
        background: var(--raised); box-shadow: var(--shadow-up);
        display: flex; align-items: center; justify-content: center;
        font-size: 1.8rem;
      }
      .chat-empty-text {
        font-size: 0.9rem; text-align: center; line-height: 1.6;
      }
      .chat-empty-text strong {
        display: block; color: var(--ink); font-size: 1.15rem;
        margin-bottom: 4px; letter-spacing: -0.01em;
      }

      /* Typing indicator */
      .typing-indicator {
        align-self: flex-start; display: none; gap: 5px;
        padding: 14px 18px; background: var(--raised);
        border: 1px solid var(--line-strong); border-radius: var(--radius);
        border-bottom-left-radius: 4px; box-shadow: var(--shadow-up);
      }
      .typing-indicator.visible { display: flex; }
      .typing-dot {
        width: 7px; height: 7px; border-radius: 50%;
        background: var(--muted);
        animation: typing-bounce 1.4s ease-in-out infinite;
      }
      .typing-dot:nth-child(2) { animation-delay: 0.15s; }
      .typing-dot:nth-child(3) { animation-delay: 0.3s; }
      @keyframes typing-bounce {
        0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
        30% { transform: translateY(-6px); opacity: 1; }
      }

      /* Input area */
      .input-area {
        background: var(--surface);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius); padding: 4px;
        box-shadow: var(--shadow-up);
        transition: border-color var(--transition), box-shadow var(--transition);
        flex-shrink: 0;
        position: relative;
      }
      .input-area:focus-within {
        border-color: var(--accent);
        box-shadow: var(--shadow-up), 0 0 0 3px var(--accent-glow);
      }
      .input-row { display: flex; gap: 0; align-items: flex-end; }
      .input-row textarea {
        flex: 1; border: none; border-radius: 12px;
        padding: 12px 14px; font: inherit; font-size: 0.9rem;
        resize: none; min-height: 48px; max-height: 160px;
        line-height: 1.5; background: transparent;
        color: var(--ink); outline: none;
      }
      .input-row textarea::placeholder { color: var(--muted); }

      .composer-options-drawer {
        display: flex;
        align-items: center;
      }
      .composer-expand-btn {
        display: none;
      }

      .composer-model-select {
        height: 36px;
        max-width: 220px;
        margin: auto 0 auto 6px;
        padding: 0 26px 0 10px;
        border: 1px solid var(--line);
        border-radius: var(--radius-xs);
        background: var(--surface);
        color: var(--ink-secondary);
        font: inherit;
        font-size: 0.72rem;
        line-height: 1.2;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        background-image:
          linear-gradient(45deg, transparent 50%, var(--muted) 50%),
          linear-gradient(135deg, var(--muted) 50%, transparent 50%);
        background-position:
          calc(100% - 14px) 15px,
          calc(100% - 9px) 15px;
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
        flex-shrink: 1;
        min-width: 120px;
      }
      .composer-model-select:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 2px var(--accent-glow);
      }
      .composer-model-select option {
        background: var(--surface);
        color: var(--ink);
      }

      .composer-model-rate {
        margin: 2px 8px 6px;
        color: var(--muted);
        font-size: 0.67rem;
        line-height: 1.35;
      }
      .composer-attachment-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 4px 8px 2px;
      }
      .composer-attachment-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        max-width: 100%;
        border: 1px solid var(--tag-border);
        background: var(--tag-bg);
        border-radius: 999px;
        color: var(--ink-secondary);
        padding: 3px 8px;
        font-size: 0.67rem;
      }
      .composer-attachment-name {
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .composer-attachment-meta {
        color: var(--muted);
        font-size: 0.63rem;
      }
      .composer-attachment-remove {
        border: none;
        background: transparent;
        color: var(--muted);
        padding: 0;
        line-height: 1;
        cursor: pointer;
        font-size: 0.75rem;
      }
      .composer-attachment-remove:hover {
        color: var(--red);
      }

      .composer-hint-row {
        display: none;
        align-items: center;
        gap: 8px;
        padding: 2px 10px 8px;
        color: var(--muted);
        font-size: 0.68rem;
        letter-spacing: 0.02em;
      }
      .composer-hint-row.visible { display: flex; }
      .composer-hint-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 6px;
        border-radius: 999px;
        border: 1px solid var(--tag-border);
        color: var(--ink-secondary);
        background: var(--tag-bg);
        font-weight: 600;
        line-height: 1;
      }
      .composer-hint-text {
        text-transform: uppercase;
        font-weight: 600;
      }

      .send-btn {
        background: linear-gradient(135deg, var(--accent), var(--accent-hover));
        color: #fff; border: none; border-radius: 12px;
        width: 44px; height: 44px; margin: 2px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; flex-shrink: 0;
        box-shadow: 0 2px 12px var(--accent-glow);
        transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
      }

      .composer-copy-btn {
        background: transparent;
        border: 1px solid var(--tag-border);
        color: var(--muted);
        border-radius: var(--radius-xs);
        width: 36px;
        height: 36px;
        margin: auto 0 auto 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        font: inherit;
        padding: 0;
        transition: all var(--transition);
      }
      .composer-attach-btn {
        background: transparent;
        border: 1px solid var(--tag-border);
        color: var(--muted);
        border-radius: var(--radius-xs);
        width: 36px;
        height: 36px;
        margin: auto 0 auto 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        font: inherit;
        padding: 0;
        transition: all var(--transition);
      }
      .composer-attach-btn:hover {
        background: var(--accent-soft);
        color: var(--accent);
        border-color: rgba(59, 130, 246, 0.28);
      }
      .composer-attach-btn:disabled {
        opacity: 0.45;
        cursor: default;
      }
      .composer-attach-btn.is-uploading {
        opacity: 0.7;
      }
      .composer-attach-btn svg {
        width: 15px;
        height: 15px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .composer-copy-btn:hover {
        background: var(--accent-soft);
        color: var(--accent);
        border-color: rgba(59, 130, 246, 0.28);
      }
      .composer-copy-btn:disabled { opacity: 0.5; cursor: default; }
      .composer-copy-btn svg {
        width: 15px;
        height: 15px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .send-btn:hover { transform: scale(1.06); box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4); }
      .send-btn:active { transform: scale(0.96); }
      .send-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
      .send-btn svg {
        width: 20px; height: 20px; fill: none; stroke: currentColor;
        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
      }

      .stop-btn {
        background: var(--red-soft); color: var(--red);
        border: 1px solid rgba(248, 113, 113, 0.2);
        border-radius: 12px; width: 44px; height: 44px;
        margin: 2px 0 2px 8px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; flex-shrink: 0;
        transition: transform var(--transition), opacity var(--transition);
      }
      .stop-btn:hover { transform: scale(1.04); border-color: rgba(248, 113, 113, 0.4); }
      .stop-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

      .command-picker,
      .mention-picker {
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: calc(100% + 8px);
        background: var(--surface);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius);
        box-shadow: var(--shadow-up);
        max-height: 240px;
        overflow-y: auto;
        z-index: 20;
        display: none;
        padding: 6px;
        backdrop-filter: blur(10px);
      }
      .command-picker.visible,
      .mention-picker.visible { display: block; }
      .command-option,
      .mention-option {
        width: 100%;
        border: none;
        background: transparent;
        color: var(--ink);
        display: block;
        padding: 10px 12px;
        text-align: left;
        cursor: pointer;
        border-radius: 12px;
        transition: background var(--transition), border-color var(--transition), transform var(--transition);
      }
      .command-option:hover,
      .command-option.active,
      .mention-option:hover,
      .mention-option.active {
        background: var(--accent-soft);
      }
      .command-option-main {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
      }
      .command-option-title-row {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }
      .command-option-title {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--ink);
      }
      .command-option-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 2px 8px;
        border-radius: var(--radius-xs);
        background: var(--tag-bg);
        color: var(--ink-secondary);
        border: 1px solid var(--tag-border);
        font-size: 0.62rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .command-option-meta {
        margin-top: 3px;
        font-size: 0.68rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .command-option-description {
        margin-top: 6px;
        font-size: 0.73rem;
        color: var(--ink-secondary);
        line-height: 1.4;
        max-width: 54ch;
      }
      body[data-theme="light"] .mention-option:hover,
      body[data-theme="light"] .mention-option.active {
        background: rgba(0,0,0,0.05);
      }
      body[data-theme="light"] .command-option:hover,
      body[data-theme="light"] .command-option.active {
        background: rgba(0,0,0,0.05);
      }
      .mention-option-title {
        font-size: 0.83rem;
        font-weight: 600;
      }
      .mention-option-meta {
        font-size: 0.7rem;
        color: var(--muted);
      }
      .mention-option-path {
        font-size: 0.68rem;
        color: var(--ink-secondary);
        font-family: "SF Mono", "Fira Code", monospace;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 44%;
      }

      /* ══ TRANSPARENCY PANEL ══ */
      .tp {
        display: none; flex-direction: column;
        background: var(--surface);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius);
        overflow: hidden;
        overflow-y: auto;
        min-height: 0;
        box-shadow: var(--shadow-up);
        overscroll-behavior-y: contain;
      }
      .tp-header {
        padding: 14px 18px;
        font-weight: 700; font-size: 0.72rem;
        text-transform: uppercase; letter-spacing: 0.1em;
        color: var(--muted);
        border-bottom: 1px solid var(--line);
        display: flex; align-items: center; justify-content: space-between;
        position: sticky; top: 0; background: var(--surface);
        z-index: 1; backdrop-filter: blur(8px);
      }
      .tp-header .latency {
        font-weight: 700; font-size: 0.72rem;
        color: var(--green); font-variant-numeric: tabular-nums;
      }

      .tp-section { border-bottom: 1px solid var(--line); }
      .tp-section:last-child { border-bottom: none; }

      .tp-label {
        display: flex; align-items: center; justify-content: space-between;
        padding: 10px 18px; font-size: 0.78rem; font-weight: 600;
        color: var(--ink-secondary); cursor: pointer; user-select: none;
        transition: background var(--transition), color var(--transition);
      }
      .tp-label:hover { background: rgba(255,255,255,0.02); color: var(--ink); }
      body[data-theme="light"] .tp-label:hover { background: rgba(0,0,0,0.02); }
      .tp-label .arrow {
        font-size: 0.55rem; color: var(--muted);
        transition: transform 0.2s ease;
      }
      .tp-section.open .arrow { transform: rotate(90deg); }
      .tp-section.open .tp-label { color: var(--ink); }

      .tp-body {
        display: none; padding: 0 18px 14px;
        font-size: 0.78rem; line-height: 1.6; color: var(--ink);
      }
      .tp-section.open .tp-body { display: block; }

      .tp-kv { display: flex; gap: 8px; padding: 3px 0; }
      .tp-k {
        color: var(--muted); min-width: 56px; flex-shrink: 0;
        font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
      }
      .tp-v { word-break: break-all; color: var(--ink-secondary); }

      .tag-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
      .tag {
        display: inline-block; padding: 3px 9px;
        border-radius: var(--radius-xs); font-size: 0.7rem; font-weight: 500;
        background: var(--tag-bg); border: 1px solid var(--tag-border);
        color: var(--ink-secondary); transition: all var(--transition);
      }
      .tag-active {
        background: var(--green-soft);
        border-color: rgba(52, 211, 153, 0.2); color: var(--green);
      }
      .tag-none { color: var(--muted); font-style: italic; font-size: 0.72rem; }

      .badge {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 2px 10px; border-radius: var(--radius-xs);
        font-size: 0.7rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.04em;
      }
      .badge-pass { background: var(--green-soft); color: var(--green); }
      .badge-fail { background: var(--red-soft); color: var(--red); }
      .badge-intent { background: var(--blue-soft); color: var(--blue); }

      .tp-empty {
        padding: 36px 18px; color: var(--muted);
        font-size: 0.82rem; text-align: center; line-height: 1.5;
      }

      .tp-raw-toggle { padding: 8px 18px 12px; text-align: right; }
      .tp-raw-toggle button {
        background: var(--tag-bg); border: 1px solid var(--tag-border);
        border-radius: var(--radius-xs); padding: 4px 12px;
        font-size: 0.7rem; font-weight: 500; color: var(--muted);
        cursor: pointer; transition: all var(--transition);
      }
      .tp-raw-toggle button:hover { color: var(--ink); border-color: var(--line-strong); }
      .tp-raw-toggle button + button { margin-left: 8px; }

      .tp-raw {
        display: none; padding: 12px 18px 16px;
        font-size: 0.68rem;
        font-family: 'SF Mono', 'Fira Code', monospace;
        line-height: 1.5; white-space: pre-wrap; word-break: break-all;
        color: var(--muted); background: var(--sunken);
        border-top: 1px solid var(--line);
        max-height: 300px; overflow-y: auto;
      }
      .tp-raw.visible { display: block; }

      /* Trace */
      .tp-trace-list { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
      .tp-section[data-section="trace"] .tp-body {
        max-height: 260px; overflow-y: auto; scrollbar-gutter: stable;
        overscroll-behavior-y: contain;
      }
      .tp-trace-row {
        border: 1px solid var(--line); border-radius: var(--radius-xs);
        background: var(--sunken); padding: 7px 9px;
        transition: border-color var(--transition);
      }
      .tp-trace-row:hover { border-color: var(--line-strong); }
      .tp-trace-head {
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px; font-size: 0.68rem;
      }
      .tp-trace-type {
        color: var(--ink); text-transform: uppercase;
        letter-spacing: 0.04em; font-weight: 700;
      }
      .tp-trace-time { color: var(--muted); font-variant-numeric: tabular-nums; }
      .tp-trace-meta {
        margin-top: 4px; color: var(--ink-secondary);
        font-size: 0.72rem; line-height: 1.45; word-break: break-word;
      }
      .tp-trace-decision {
        display: inline-flex; align-items: center;
        border: 1px solid var(--tag-border); border-radius: var(--radius-xs);
        padding: 1px 6px; color: var(--muted);
        font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em;
      }

      /* Section decorators */
      .tp-section[data-section="model"] .tp-label::before { content: ''; display: inline-block; width: 3px; height: 14px; background: var(--accent); border-radius: 2px; margin-right: 8px; }
      .tp-section[data-section="intent"] .tp-label::before { content: ''; display: inline-block; width: 3px; height: 14px; background: var(--blue); border-radius: 2px; margin-right: 8px; }
      .tp-section[data-section="rules"] .tp-label::before { content: ''; display: inline-block; width: 3px; height: 14px; background: var(--green); border-radius: 2px; margin-right: 8px; }
      .tp-section[data-section="sops"] .tp-label::before { content: ''; display: inline-block; width: 3px; height: 14px; background: var(--amber); border-radius: 2px; margin-right: 8px; }
      .tp-section[data-section="skills"] .tp-label::before { content: ''; display: inline-block; width: 3px; height: 14px; background: #f472b6; border-radius: 2px; margin-right: 8px; }
      .tp-section[data-section="tools"] .tp-label::before { content: ''; display: inline-block; width: 3px; height: 14px; background: #fb923c; border-radius: 2px; margin-right: 8px; }
      .tp-section[data-section="guardrails"] .tp-label::before { content: ''; display: inline-block; width: 3px; height: 14px; background: var(--red); border-radius: 2px; margin-right: 8px; }
      .tp-section[data-section="run"] .tp-label::before { content: ''; display: inline-block; width: 3px; height: 14px; background: var(--muted); border-radius: 2px; margin-right: 8px; }
      .tp-section[data-section="trace"] .tp-label::before { content: ''; display: inline-block; width: 3px; height: 14px; background: #22d3ee; border-radius: 2px; margin-right: 8px; }

      /* ══ CHANGELOG PANEL ══ */
      .cl-col {
        display: none; flex-direction: column; gap: 0;
        min-width: 0; min-height: 0; overflow-y: auto;
        max-width: 720px; margin: 0 auto; width: 100%;
        padding: 20px 16px 40px;
        overscroll-behavior-y: contain;
        scrollbar-gutter: stable;
      }
      .cl-toolbar {
        flex-shrink: 0;
        position: sticky; top: 0; z-index: 1;
        padding: 14px 0 18px;
        background: var(--bg);
      }
      .cl-toolbar-title {
        font-size: 1.1rem; font-weight: 700;
        color: var(--ink);
      }
      .cl-toolbar-sub {
        margin-top: 4px;
        font-size: 0.78rem; line-height: 1.45;
        color: var(--muted);
      }
      .cl-release {
        flex-shrink: 0;
        border-left: 2px solid var(--line-strong);
        margin-left: 6px;
        padding: 0 0 0 20px;
        margin-bottom: 28px;
        position: relative;
      }
      .cl-release::before {
        content: '';
        position: absolute; left: -5px; top: 4px;
        width: 8px; height: 8px; border-radius: 50%;
        background: var(--accent);
        border: 2px solid var(--bg);
      }
      .cl-release-header {
        display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
        margin-bottom: 10px;
      }
      .cl-version {
        font-size: 0.72rem; font-weight: 700;
        font-family: 'SF Mono', 'Fira Code', monospace;
        color: var(--accent);
      }
      .cl-title {
        font-size: 0.88rem; font-weight: 600;
        color: var(--ink); line-height: 1.35;
      }
      .cl-date {
        font-size: 0.7rem; color: var(--muted); font-variant-numeric: tabular-nums;
        margin-left: auto; flex-shrink: 0;
      }
      .cl-changes {
        display: flex; flex-direction: column; gap: 6px;
      }
      .cl-change {
        display: flex; align-items: baseline; gap: 8px;
        font-size: 0.82rem; line-height: 1.55; color: var(--ink);
        padding: 4px 0;
      }
      .cl-type {
        display: inline-block;
        font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.05em; padding: 2px 7px; border-radius: 3px;
        flex-shrink: 0; margin-top: 2px;
        min-width: 58px; text-align: center;
      }
      .cl-type-added { background: var(--green-soft); color: var(--green); }
      .cl-type-changed { background: var(--blue-soft); color: var(--blue); }
      .cl-type-fixed { background: rgba(251, 191, 36, 0.15); color: var(--amber); }
      .cl-type-removed { background: var(--red-soft); color: var(--red); }
      .cl-change-desc {
        min-width: 0;
        word-break: break-word;
      }
      .cl-empty { padding: 40px 18px; text-align: center; color: var(--muted); font-size: 0.85rem; }

      /* ══ ROADMAP PANEL ══ */
      .rm-col {
        display: none; flex-direction: column; gap: 0;
        min-width: 0; min-height: 0; overflow-y: auto;
        max-width: 820px; margin: 0 auto; width: 100%;
        padding: 20px 16px 40px;
        overscroll-behavior-y: contain;
        scrollbar-gutter: stable;
      }
      .rm-toolbar {
        flex-shrink: 0;
        position: sticky; top: 0; z-index: 1;
        padding: 14px 0 18px;
        background: var(--bg);
        display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap;
      }
      .rm-toolbar-left {}
      .rm-toolbar-title {
        font-size: 1.1rem; font-weight: 700;
        color: var(--ink);
      }
      .rm-toolbar-sub {
        margin-top: 4px;
        font-size: 0.78rem; line-height: 1.45;
        color: var(--muted);
      }
      .rm-filters {
        display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px;
      }
      .rm-filter-btn {
        padding: 4px 12px; border-radius: 20px;
        font-size: 0.72rem; font-weight: 600;
        background: var(--tag-bg); border: 1px solid var(--tag-border);
        color: var(--ink-secondary); cursor: pointer; transition: var(--transition);
      }
      .rm-filter-btn.active {
        background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
      }
      .rm-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
      .rm-submit-btn {
        padding: 8px 16px; border-radius: var(--radius-xs);
        font-size: 0.78rem; font-weight: 600;
        background: var(--accent); color: #fff; border: none; cursor: pointer;
        transition: var(--transition);
      }
      .rm-submit-btn:hover { background: var(--accent-hover); }
      .rm-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
      .rm-card {
        background: var(--raised); border: 1px solid var(--line-strong);
        border-radius: var(--radius-sm); padding: 16px 18px;
        box-shadow: var(--shadow-up); transition: var(--transition);
      }
      .rm-card:hover { border-color: var(--accent); }
      .rm-card-header {
        display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
      }
      .rm-card-title { font-size: 0.92rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
      .rm-card-meta {
        display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap;
      }
      .rm-badge {
        display: inline-block; font-size: 0.6rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.05em;
        padding: 2px 8px; border-radius: 3px;
      }
      .rm-badge-feature { background: var(--blue-soft); color: var(--blue); }
      .rm-badge-request { background: var(--green-soft); color: var(--green); }
      .rm-badge-bug { background: var(--red-soft); color: var(--red); }
      .rm-badge-backlog { background: var(--tag-bg); color: var(--muted); }
      .rm-badge-planned { background: var(--blue-soft); color: var(--blue); }
      .rm-badge-in-progress { background: rgba(251, 191, 36, 0.15); color: var(--amber); }
      .rm-badge-done { background: var(--green-soft); color: var(--green); }
      .rm-card-desc {
        font-size: 0.8rem; color: var(--ink-secondary); line-height: 1.55;
        margin-top: 8px; overflow: hidden;
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
      }
      .rm-card-footer {
        display: flex; justify-content: space-between; align-items: center;
        margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
      }
      .rm-card-submitter { font-size: 0.7rem; color: var(--muted); }
      .rm-vote-btn {
        display: flex; align-items: center; gap: 6px;
        padding: 6px 14px; border-radius: 20px;
        font-size: 0.78rem; font-weight: 600;
        background: var(--tag-bg); border: 1px solid var(--tag-border);
        color: var(--ink-secondary); cursor: pointer; transition: var(--transition);
      }
      .rm-vote-btn:hover { border-color: var(--accent); color: var(--accent); }
      .rm-vote-btn.voted {
        background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
      }
      .rm-vote-btn svg { width: 14px; height: 14px; }
      .rm-empty { padding: 40px 18px; text-align: center; color: var(--muted); font-size: 0.85rem; }
      .rm-sort-select {
        padding: 4px 8px; border-radius: var(--radius-xs);
        font-size: 0.72rem; background: var(--tag-bg); border: 1px solid var(--tag-border);
        color: var(--ink-secondary); cursor: pointer; font-family: inherit;
      }

      /* Roadmap submit modal */
      .rm-modal-overlay {
        display: none; position: fixed; inset: 0;
        background: rgba(0,0,0,0.6); z-index: 1000;
        align-items: center; justify-content: center;
      }
      .rm-modal-overlay.visible { display: flex; }
      .rm-modal {
        background: var(--raised); border: 1px solid var(--line-strong);
        border-radius: var(--radius); padding: 24px;
        width: 90%; max-width: 520px; box-shadow: var(--shadow-up);
      }
      .rm-modal h3 { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 16px; }
      .rm-modal label {
        display: block; font-size: 0.75rem; font-weight: 600;
        color: var(--ink-secondary); margin-bottom: 4px; margin-top: 12px;
      }
      .rm-modal input, .rm-modal textarea, .rm-modal select {
        width: 100%; padding: 10px 12px; border-radius: var(--radius-xs);
        font-size: 0.82rem; font-family: inherit;
        background: var(--sunken); border: 1px solid var(--line-strong);
        color: var(--ink); transition: var(--transition);
      }
      .rm-modal input:focus, .rm-modal textarea:focus, .rm-modal select:focus {
        outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow);
      }
      .rm-modal textarea { min-height: 100px; resize: vertical; }
      .rm-modal-actions {
        display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px;
      }
      .rm-modal-cancel {
        padding: 8px 16px; border-radius: var(--radius-xs);
        font-size: 0.78rem; font-weight: 600;
        background: var(--tag-bg); border: 1px solid var(--tag-border);
        color: var(--ink-secondary); cursor: pointer;
      }
      .rm-modal-submit {
        padding: 8px 16px; border-radius: var(--radius-xs);
        font-size: 0.78rem; font-weight: 600;
        background: var(--accent); color: #fff; border: none; cursor: pointer;
      }
      .rm-modal-submit:hover { background: var(--accent-hover); }
      .rm-modal-err {
        font-size: 0.75rem; color: var(--red); margin-top: 8px; display: none;
      }

      /* ══ SCHEDULES (REMINDERS) MODAL ══ */
      /* The schedules modal lives inside `.rm-modal` so it inherits the
         neumorphic dark theme and the sunken-input styling. These rules tune
         the layout and add the segmented tabs / attachments picker so the
         entire surface reads as one coherent panel. */
      #schedulesModalOverlay .rm-modal {
        max-width: 760px;
        padding: 22px 22px 20px;
        max-height: 90vh;
        overflow-y: auto;
        scrollbar-gutter: stable;
      }
      #schedulesModalOverlay .rm-modal h3 {
        font-size: 1.05rem; margin-bottom: 0;
      }
      .schedules-header {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--line);
      }

      .schedules-tabs {
        display: flex;
        gap: 4px;
        padding: 4px;
        margin: 14px 0 6px;
        background: var(--sunken);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-sm);
      }
      .schedules-tab {
        flex: 1;
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        padding: 8px 14px;
        background: transparent;
        border: 1px solid transparent;
        border-radius: var(--radius-xs);
        color: var(--ink-secondary);
        font-size: 0.78rem; font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        transition: var(--transition);
      }
      .schedules-tab:hover {
        color: var(--ink);
        background: var(--tag-bg);
      }
      .schedules-tab.active {
        background: var(--raised);
        border-color: var(--line-strong);
        color: var(--ink);
        box-shadow: var(--shadow-up);
      }
      .schedules-tab-count {
        font-size: 0.66rem; font-weight: 700;
        padding: 1px 8px;
        border-radius: 999px;
        background: var(--tag-bg);
        border: 1px solid var(--tag-border);
        color: var(--ink-secondary);
        min-width: 20px; text-align: center;
      }
      .schedules-tab.active .schedules-tab-count {
        background: var(--accent-soft);
        border-color: var(--accent);
        color: var(--accent);
      }
      .schedules-hint {
        font-size: 0.74rem; color: var(--ink-secondary);
        margin: 6px 2px 12px;
        line-height: 1.4;
      }

      .schedules-list {
        max-height: 240px; overflow: auto;
        background: var(--sunken);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-xs);
        padding: 4px;
        margin-bottom: 14px;
      }
      .schedules-empty {
        font-size: 0.78rem; color: var(--muted);
        padding: 24px 16px; text-align: center;
      }
      .schedules-row {
        display: flex; align-items: flex-start; justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        background: transparent;
        border-radius: var(--radius-xs);
        border: 1px solid transparent;
        transition: var(--transition);
      }
      .schedules-row + .schedules-row { margin-top: 2px; }
      .schedules-row:hover {
        background: var(--raised);
        border-color: var(--line);
      }
      .schedules-row-main { flex: 1; min-width: 0; }
      .schedules-row-title {
        font-weight: 600; font-size: 0.84rem; color: var(--ink);
        display: flex; align-items: center; gap: 6px;
      }
      .schedules-row-disabled {
        font-size: 0.62rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.04em;
        color: var(--muted);
        background: var(--tag-bg);
        border: 1px solid var(--tag-border);
        padding: 1px 6px;
        border-radius: 999px;
      }
      .schedules-row-sub {
        font-size: 0.7rem; color: var(--ink-secondary); margin-top: 4px;
      }
      .schedules-row-att {
        display: inline-flex; align-items: center; gap: 4px;
        font-size: 0.66rem; font-weight: 600; color: var(--accent);
        background: var(--accent-soft);
        border: 1px solid var(--accent);
        border-radius: 999px;
        padding: 1px 8px;
        margin-top: 6px;
      }
      .schedules-row-err {
        font-size: 0.68rem; color: var(--red);
        background: var(--red-soft);
        border: 1px solid var(--red);
        border-radius: var(--radius-xs);
        padding: 4px 8px;
        margin-top: 6px;
      }
      .schedules-row-actions {
        display: flex; gap: 6px; flex-shrink: 0;
      }
      .schedules-row-delete:hover {
        color: var(--red);
        border-color: var(--red);
      }
      /* Per-row run-status chips. The `run-running` chip uses an animated
         pulse so a hung job is visually obvious; `run-failed` reuses the red
         palette already used for last-error rows. */
      .schedules-row-status {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 0.66rem; font-weight: 600;
        border-radius: 999px;
        padding: 1px 8px;
        margin-top: 6px;
        cursor: pointer;
      }
      .schedules-row-status.run-running {
        color: var(--accent);
        background: var(--accent-soft);
        border: 1px solid var(--accent);
      }
      .schedules-row-status.run-running::before {
        content: "";
        display: inline-block;
        width: 7px; height: 7px;
        border-radius: 50%;
        background: var(--accent);
        animation: schedules-pulse 1.2s ease-in-out infinite;
      }
      @keyframes schedules-pulse {
        0%, 100% { opacity: 0.35; }
        50% { opacity: 1; }
      }
      .schedules-row-status.run-failed {
        color: var(--red);
        background: var(--red-soft);
        border: 1px solid var(--red);
      }
      .schedules-row-status.run-completed {
        color: var(--muted);
        background: var(--tag-bg);
        border: 1px solid var(--tag-border);
      }
      /* Run history modal — reuses the schedules modal palette. */
      .schedules-runs-list {
        display: flex; flex-direction: column; gap: 8px;
        margin-top: 8px;
        max-height: 50vh; overflow-y: auto;
      }
      .schedules-run-row {
        border: 1px solid var(--line);
        border-radius: var(--radius-xs);
        padding: 8px 10px;
        font-size: 0.78rem;
      }
      .schedules-run-row.status-running { border-color: var(--accent); }
      .schedules-run-row.status-failed { border-color: var(--red); background: var(--red-soft); }
      .schedules-run-row .schedules-run-title {
        font-weight: 600; display: flex; gap: 8px; align-items: center;
      }
      .schedules-run-row .schedules-run-meta {
        font-size: 0.7rem; color: var(--ink-secondary); margin-top: 4px;
      }
      .schedules-run-row .schedules-run-error {
        font-size: 0.7rem; color: var(--red);
        margin-top: 4px;
        white-space: pre-wrap; word-break: break-word;
      }
      .schedules-form-header {
        display: flex; align-items: center; justify-content: space-between;
        margin: 4px 0 10px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
        font-size: 0.85rem; font-weight: 600; color: var(--ink);
      }
      .schedules-create-bar {
        display: flex; justify-content: center;
        margin: 10px 0 4px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
      }
      .schedules-create-bar .rm-modal-submit {
        min-width: 220px;
      }

      /* Attachment block lives inside the form. Use the sunken/raised
         vocabulary so it reads as a recessed sub-panel rather than a
         floating box. */
      .schedule-attachments-block {
        margin: 14px 0 6px;
        padding: 12px;
        background: var(--sunken);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-xs);
      }
      .schedule-attachments-header {
        display: flex; align-items: center; justify-content: space-between;
        gap: 8px; margin-bottom: 4px;
      }
      .schedule-attachments-header label {
        margin: 0 !important;
      }
      .schedule-attachments-help {
        font-size: 0.7rem; color: var(--muted);
        margin-bottom: 10px;
        line-height: 1.4;
      }
      .schedule-attachments-chips {
        display: flex; flex-wrap: wrap; gap: 6px;
        min-height: 28px;
        align-items: center;
      }
      .schedule-attach-empty {
        font-size: 0.72rem; color: var(--muted); font-style: italic;
      }
      .schedule-attach-chip {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 4px 4px 4px 6px;
        background: var(--raised);
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        font-size: 0.72rem;
        max-width: 100%;
      }
      .schedule-attach-chip-label {
        max-width: 200px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        color: var(--ink);
      }
      .schedule-attach-chip-remove {
        background: var(--tag-bg);
        border: 1px solid var(--tag-border);
        color: var(--ink-secondary);
        cursor: pointer;
        font-size: 0.85rem; line-height: 1;
        width: 18px; height: 18px;
        display: inline-flex; align-items: center; justify-content: center;
        padding: 0;
        border-radius: 999px;
        transition: var(--transition);
      }
      .schedule-attach-chip-remove:hover {
        color: var(--red);
        border-color: var(--red);
        background: var(--red-soft);
      }

      /* Type badges share the same shape; the per-type tints come from the
         theme color tokens so they stay legible in both dark and light
         palettes. */
      .schedule-attach-chip-type,
      .schedule-attach-result-type {
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 0.58rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.06em;
        padding: 2px 7px;
        border-radius: 4px;
        background: var(--tag-bg);
        color: var(--ink-secondary);
        border: 1px solid var(--tag-border);
      }
      .schedule-attach-chip-type.type-note,
      .schedule-attach-result-type.type-note {
        background: var(--green-soft); border-color: var(--green); color: var(--green);
      }
      .schedule-attach-chip-type.type-task,
      .schedule-attach-result-type.type-task {
        background: rgba(251, 191, 36, 0.14); border-color: var(--amber); color: var(--amber);
      }
      .schedule-attach-chip-type.type-sop,
      .schedule-attach-result-type.type-sop {
        background: var(--blue-soft); border-color: var(--blue); color: var(--blue);
      }
      .schedule-attach-chip-type.type-skill,
      .schedule-attach-result-type.type-skill {
        background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
      }

      .schedule-attach-picker {
        margin-top: 12px;
        padding: 10px;
        background: var(--raised);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-xs);
      }
      .schedule-attach-picker-row {
        display: flex; gap: 6px; margin-bottom: 8px;
      }
      .schedule-attach-picker-row input[type="search"] {
        flex: 1;
      }
      .schedule-attach-filters {
        display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px;
      }
      .schedule-attach-filter {
        padding: 4px 12px;
        background: var(--tag-bg);
        border: 1px solid var(--tag-border);
        border-radius: 999px;
        color: var(--ink-secondary);
        font-size: 0.68rem; font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        transition: var(--transition);
      }
      .schedule-attach-filter:hover {
        color: var(--accent);
        border-color: var(--accent);
      }
      .schedule-attach-filter.active {
        background: var(--accent-soft);
        border-color: var(--accent);
        color: var(--accent);
      }
      .schedule-attach-results {
        max-height: 220px; overflow: auto;
        display: flex; flex-direction: column; gap: 2px;
        background: var(--sunken);
        border: 1px solid var(--line);
        border-radius: var(--radius-xs);
        padding: 4px;
      }
      .schedule-attach-loading,
      .schedule-attach-error {
        padding: 16px; text-align: center;
        font-size: 0.74rem; color: var(--muted);
      }
      .schedule-attach-error { color: var(--red); }
      .schedule-attach-result {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center; gap: 10px;
        padding: 8px 10px;
        background: transparent;
        border: 1px solid transparent;
        border-radius: var(--radius-xs);
        text-align: left;
        cursor: pointer;
        font-size: 0.76rem;
        color: var(--ink);
        font-family: inherit;
        transition: var(--transition);
      }
      .schedule-attach-result:hover {
        background: var(--raised);
        border-color: var(--line-strong);
      }
      .schedule-attach-result.is-selected {
        background: var(--accent-soft);
        border-color: var(--accent);
      }
      .schedule-attach-result.is-selected::after {
        content: "✓";
        color: var(--accent);
        font-weight: 700;
        font-size: 0.85rem;
      }
      .schedule-attach-result-title {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        font-weight: 600;
      }
      .schedule-attach-result-path {
        font-size: 0.66rem; color: var(--muted);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        max-width: 240px;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      }

      @media (max-width: 640px) {
        #schedulesModalOverlay .rm-modal {
          padding: 16px;
          max-height: 92vh;
          overflow-y: auto;
        }
        .schedules-tabs { flex-wrap: wrap; }
        .schedules-tab { padding: 8px 10px; font-size: 0.74rem; }
        .schedules-row { flex-direction: column; }
        .schedules-row-actions { align-self: flex-end; }
        .schedule-attach-result { grid-template-columns: auto 1fr; }
        .schedule-attach-result-path { display: none; }
      }

      /* ══ KNOWLEDGE GRAPH PANEL ══ */
      /* ══ KNOWLEDGE GRAPH PANEL — Palantir/Obsidian HUD ══ */
      .kg-col {
        display: none; flex-direction: column; gap: 0;
        min-width: 0; min-height: 0; overflow: hidden;
        position: relative;
        background: #0d1117;
      }
      
      /* Subtle grid background on canvas wrap */
      .kg-canvas-wrap {
        flex: 1; min-height: 0; position: relative; overflow: hidden;
        background-color: #0b0d13;
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
        background-size: 24px 24px;
        transition: background-position 0.05s ease-out;
      }

      /* Glassmorphic command bar */
      .glassmorphic {
        background: rgba(15, 20, 35, 0.72) !important;
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
      }

      .kg-toolbar {
        flex-shrink: 0;
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 20px;
        z-index: 10;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
      }
      
      .kg-toolbar-left {
        display: flex; flex-direction: column; gap: 2px;
      }

      .kg-toolbar-title-cyber {
        font-family: 'Outfit', 'Inter', sans-serif;
        font-size: 0.82rem; font-weight: 800; 
        letter-spacing: 0.14em;
        background: linear-gradient(135deg, #a78bfa, #60a5fa);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 12px rgba(167, 139, 250, 0.15);
      }

      .kg-toolbar-sub {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 0.65rem; color: #6e7681;
        letter-spacing: 0.04em;
      }

      .kg-toolbar-controls {
        display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
      }

      /* High-tech search bar */
      .kg-search-cyber {
        padding: 6px 14px; border-radius: 20px;
        font-size: 0.74rem; font-family: inherit;
        background: rgba(10, 12, 22, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #f0f6fc; min-width: 160px; max-width: 220px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .kg-search-cyber:focus {
        outline: none; 
        border-color: #818cf8; 
        box-shadow: 0 0 10px rgba(129, 140, 248, 0.3);
        background: rgba(10, 12, 22, 0.95);
      }

      /* Curated filters and parameters */
      .kg-filter-btn {
        padding: 5px 12px; border-radius: 16px;
        font-size: 0.68rem; font-weight: 700;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #8b949e; cursor: pointer;
        transition: all 0.18s ease;
      }
      .kg-filter-btn:hover {
        border-color: rgba(255, 255, 255, 0.25);
        color: #f0f6fc;
      }
      .kg-filter-btn.active {
        background: rgba(129, 140, 248, 0.14) !important;
        border-color: #818cf8 !important;
        color: #a5b4fc !important;
        text-shadow: 0 0 8px rgba(129, 140, 248, 0.4);
      }
      .cyber-accent-btn {
        background: linear-gradient(135deg, rgba(167, 139, 250, 0.12), rgba(96, 165, 250, 0.12));
        border: 1px solid rgba(167, 139, 250, 0.4);
        color: #c084fc;
      }
      .cyber-accent-btn:hover {
        border-color: #c084fc;
        background: linear-gradient(135deg, rgba(167, 139, 250, 0.22), rgba(96, 165, 250, 0.22));
      }

      .kg-toolbar-sep {
        width: 1px; height: 18px; background: rgba(255, 255, 255, 0.1); margin: 0 6px;
      }

      .kg-toggle-cyber {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 5px 12px; border-radius: 16px;
        font-size: 0.68rem; font-weight: 600;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.06);
        color: #8b949e; cursor: pointer; user-select: none;
        transition: all 0.15s ease;
      }
      .kg-toggle-cyber:hover {
        border-color: rgba(255, 255, 255, 0.2);
        color: #f0f6fc;
      }
      .kg-toggle-cyber input {
        margin: 0; cursor: pointer; accent-color: #818cf8;
      }

      /* Sliding Tactical Physics HUD */
      .kg-physics-panel {
        z-index: 9;
        position: absolute; top: 62px; left: 20px; right: 20px;
        border-radius: var(--radius-sm);
        padding: 16px 20px;
        border-top: none !important;
        animation: kg-slide-down 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }
      @keyframes kg-slide-down {
        from { transform: translateY(-16px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }

      .kg-physics-title {
        font-size: 0.62rem; font-weight: 800; letter-spacing: 0.15em;
        color: #a78bfa; margin-bottom: 12px;
      }

      .kg-physics-grid {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
      }
      @media (max-width: 768px) {
        .kg-physics-grid { grid-template-columns: 1fr; gap: 12px; }
      }

      .kg-physics-control {
        display: flex; flex-direction: column; gap: 6px;
      }
      .kg-physics-control label {
        font-size: 0.66rem; color: #8b949e; font-weight: 600;
      }
      .kg-physics-input-row {
        display: flex; align-items: center; gap: 12px;
      }
      .kg-physics-input-row input[type="range"] {
        flex: 1; accent-color: #818cf8; background: rgba(255,255,255,0.08); height: 4px;
        border-radius: 2px; outline: none; cursor: pointer;
      }
      .kg-physics-value {
        font-family: ui-monospace, monospace; font-size: 0.68rem; color: #f0f6fc;
        min-width: 50px; text-align: right;
      }

      /* Tactical Stats Overlay */
      .kg-stats-cyber {
        position: absolute; top: 16px; left: 20px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 0.65rem; color: rgba(139, 148, 158, 0.7);
        letter-spacing: 0.02em; pointer-events: none; z-index: 5;
        line-height: 1.5;
      }

      /* High-Tech Tactical Hints */
      .kg-hints-cyber {
        position: absolute; top: 16px; right: 20px;
        display: flex; flex-direction: column; gap: 4px;
        align-items: flex-end; z-index: 5; pointer-events: none;
      }
      .kg-hint-pill {
        padding: 3px 8px; border-radius: 4px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.05);
        color: rgba(139, 148, 158, 0.6);
        font-size: 0.62rem; text-transform: uppercase;
        letter-spacing: 0.06em;
      }

      /* Standardized Cybernetic Legend */
      .kg-legend {
        position: absolute; bottom: 16px; left: 20px;
        display: flex; flex-direction: column; gap: 8px;
        font-size: 0.68rem; z-index: 5; pointer-events: none;
        background: rgba(10, 12, 22, 0.6);
        padding: 10px 14px; border-radius: var(--radius-xs);
        border: 1px solid rgba(255,255,255,0.04);
        backdrop-filter: blur(8px);
      }

      /* Premium Palantir Docking Inspector */
      .glassmorphic-detail {
        background: rgba(13, 17, 26, 0.88) !important;
        backdrop-filter: blur(20px) saturate(200%);
        -webkit-backdrop-filter: blur(20px) saturate(200%);
        border: 1px solid rgba(129, 140, 248, 0.22);
        box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5);
      }

      .kg-node-detail {
        position: absolute; bottom: 16px; right: 20px; top: 16px;
        width: 330px; z-index: 8;
        border-radius: var(--radius-sm); padding: 20px;
        display: flex; flex-direction: column; gap: 14px;
        overflow-y: auto;
        animation: kg-fade-slide-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }
      
      @keyframes kg-fade-slide-in {
        from { transform: translateX(20px); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
      }

      .kg-detail-hud-header {
        display: flex; align-items: center; justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding-bottom: 8px;
      }
      .kg-detail-hud-badge {
        font-family: ui-monospace, monospace;
        font-size: 0.6rem; font-weight: 800;
        letter-spacing: 0.12em; color: #818cf8;
        border: 1px solid rgba(129, 140, 248, 0.3);
        padding: 2px 8px; border-radius: 3px;
        background: rgba(129, 140, 248, 0.08);
      }
      .kg-detail-close-btn {
        background: transparent; border: none; color: #8b949e;
        font-size: 1.2rem; cursor: pointer; padding: 0; line-height: 1;
        transition: color 0.15s ease;
      }
      .kg-detail-close-btn:hover { color: #f0f6fc; }

      .kg-node-detail-title-cyber {
        font-family: 'Outfit', 'Inter', sans-serif;
        font-size: 0.94rem; font-weight: 800; color: #f0f6fc;
        line-height: 1.35;
      }

      .kg-node-detail-meta-cyber {
        font-family: ui-monospace, monospace;
        font-size: 0.65rem; color: #8b949e;
        word-break: break-all;
      }

      .kg-node-detail-section {
        display: flex; flex-direction: column; gap: 6px;
      }
      .kg-detail-sec-title {
        font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em;
        color: #6e7681; text-transform: uppercase;
      }

      /* Note Excerpt Cyber Box */
      .kg-detail-preview-box {
        font-size: 0.74rem; color: #c9d1d9;
        line-height: 1.5; padding: 10px 12px;
        background: rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: var(--radius-xs);
        max-height: 140px; overflow-y: auto;
        white-space: pre-wrap;
        word-break: break-word;
        font-family: 'Inter', sans-serif;
      }

      .kg-node-detail-links-cyber {
        font-size: 0.72rem; color: #c9d1d9; line-height: 1.6;
        display: flex; flex-direction: column; gap: 4px;
      }
      .kg-node-detail-links-cyber div {
        display: flex; align-items: center; justify-content: space-between;
        background: rgba(255, 255, 255, 0.01);
        padding: 4px 8px; border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.03);
      }
      .kg-node-detail-links-cyber a {
        color: #58a6ff; cursor: pointer; text-decoration: none;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        max-width: 170px;
        font-weight: 600;
      }
      .kg-node-detail-links-cyber a:hover { text-decoration: underline; color: #79c0ff; }

      .kg-detail-action-bar {
        margin-top: auto; padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
      }
      .kg-open-btn-cyber {
        width: 100%; padding: 8px 16px; border-radius: var(--radius-xs);
        font-size: 0.74rem; font-weight: 700;
        background: #388bfd; color: #ffffff; border: none; cursor: pointer;
        transition: all 0.15s ease;
        box-shadow: 0 4px 12px rgba(56, 139, 253, 0.2);
      }
      .kg-open-btn-cyber:hover {
        background: #58a6ff;
        box-shadow: 0 4px 16px rgba(56, 139, 253, 0.35);
      }

      @media (max-width: 768px) {
        .cl-col { padding: 14px 10px 30px; }
        .cl-toolbar { position: static; }
        .cl-release-header { flex-direction: column; gap: 4px; }
        .cl-date { margin-left: 0; }
      }

      /* ══ KNOWLEDGE PANEL — Obsidian style ══ */
      .km-col {
        display: none; flex-direction: row;
        min-width: 0; min-height: 0; overflow: hidden;

      /* ══ HELP / TOOLS PANEL — moved to modal in index.html ══ */
        gap: 0;
      }

      /* Left file-tree pane */
      .km-sidebar {
        width: 230px; flex-shrink: 0;
        background: var(--sidebar-bg);
        border-right: 1px solid var(--sidebar-border);
        display: flex; flex-direction: column;
        overflow: hidden;
      }
      .km-sidebar-header {
        padding: 14px 14px 10px;
        display: flex; flex-direction: column; gap: 8px;
        border-bottom: 1px solid var(--line);
        flex-shrink: 0;
      }
      .km-sidebar-headline {
        display: flex; align-items: center; justify-content: space-between;
        gap: 8px;
      }
      .km-sidebar-title {
        font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.1em; color: var(--muted);
      }
      .km-sidebar-collapse-btn {
        width: 26px; height: 26px;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--tag-border); background: var(--tag-bg); color: var(--muted);
        border-radius: 999px; padding: 0; font: inherit;
        font-size: 1rem; line-height: 1; font-weight: 700; cursor: pointer;
        transition: color var(--transition), border-color var(--transition), background var(--transition), transform var(--transition);
      }
      .km-sidebar-collapse-btn:hover {
        color: var(--accent); border-color: rgba(59,130,246,0.35);
        background: var(--accent-soft);
      }
      .km-sidebar-headline-actions { display: flex; gap: 6px; align-items: center; }
      .km-sidebar-action-btn {
        border: 1px solid var(--tag-border);
        background: var(--tag-bg);
        color: var(--muted);
        border-radius: 999px;
        padding: 0 10px;
        height: 26px;
        font: inherit;
        font-size: 0.68rem;
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        cursor: pointer;
        transition: color var(--transition), border-color var(--transition), background var(--transition);
      }
      .km-sidebar-action-btn:hover {
        color: var(--accent);
        border-color: rgba(59,130,246,0.35);
        background: var(--accent-soft);
      }
      .km-sidebar-gear-btn {
        width: 26px; height: 26px;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--tag-border); background: var(--tag-bg); color: var(--muted);
        border-radius: 999px; padding: 0; font: inherit;
        font-size: 0.86rem; line-height: 1; cursor: pointer;
        transition: color var(--transition), border-color var(--transition), background var(--transition), transform var(--transition);
      }
      .km-sidebar-gear-btn:hover {
        color: var(--accent); border-color: rgba(59,130,246,0.35);
        background: var(--accent-soft); transform: rotate(35deg);
      }

      .km-view-settings-dialog {
        width: min(560px, calc(100vw - 48px));
        max-height: min(640px, calc(100vh - 72px));
      }
      .km-view-settings-scope {
        font-size: 0.72rem; color: var(--ink-secondary);
      }
      .km-view-settings-section {
        background: var(--sunken);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-sm);
        padding: 12px 14px;
      }
      .km-view-settings-section + .km-view-settings-section { margin-top: 12px; }
      .km-view-settings-label {
        font-size: 0.62rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.1em;
        color: var(--muted); margin-bottom: 10px;
      }
      .km-view-settings-modes {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }
      .km-view-settings-mode-btn {
        display: flex; flex-direction: column; align-items: flex-start;
        gap: 2px;
        padding: 9px 12px; cursor: pointer;
        border: 1px solid var(--tag-border); background: var(--tag-bg);
        border-radius: var(--radius-xs); color: var(--ink-secondary);
        transition: all var(--transition);
      }
      .km-view-settings-mode-btn input { display: none; }
      .km-view-settings-mode-btn:hover {
        color: var(--ink); border-color: var(--line-strong);
      }
      .km-view-settings-mode-btn.is-active {
        background: var(--accent-soft); color: var(--accent);
        border-color: rgba(59,130,246,0.35);
      }
      .km-view-settings-mode-name {
        font-size: 0.78rem; font-weight: 700;
      }
      .km-view-settings-mode-desc {
        font-size: 0.66rem; color: var(--muted);
        text-transform: uppercase; letter-spacing: 0.06em;
      }
      .km-view-settings-mode-btn.is-active .km-view-settings-mode-desc {
        color: var(--accent); opacity: 0.8;
      }

      .km-view-settings-props-list {
        display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px;
      }
      @media (max-width: 540px) {
        .km-view-settings-props-list { grid-template-columns: 1fr; }
        .km-view-settings-modes { grid-template-columns: 1fr; }
      }
      .km-view-settings-section.disabled .km-view-settings-props-list { opacity: 0.55; }
      .km-view-settings-prop {
        display: flex; align-items: center; gap: 8px;
        padding: 6px 10px;
        border: 1px solid var(--tag-border); background: var(--surface);
        border-radius: var(--radius-xs);
        font-size: 0.78rem; color: var(--ink-secondary);
        cursor: pointer; user-select: none;
        transition: all var(--transition);
      }
      .km-view-settings-prop:hover {
        color: var(--ink); border-color: var(--line-strong);
      }
      .km-view-settings-prop.is-checked {
        background: var(--accent-soft); color: var(--accent);
        border-color: rgba(59,130,246,0.3);
      }
      .km-view-settings-prop input { accent-color: var(--accent); margin: 0; }
      .km-view-settings-prop input:disabled { cursor: not-allowed; }
      .km-view-settings-prop--locked { cursor: default; }
      .km-view-settings-prop-name {
        flex: 1; min-width: 0;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .km-view-settings-prop-badge {
        font-size: 0.58rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.08em;
        color: var(--muted);
        background: var(--tag-bg); border: 1px solid var(--tag-border);
        padding: 1px 6px; border-radius: 999px;
      }
      .km-view-settings-hint {
        font-size: 0.7rem; color: var(--muted);
        margin-top: 10px; line-height: 1.5;
      }
      .km-view-settings-hint-small {
        display: block;
        font-size: 0.7rem;
        color: var(--muted);
        margin-top: 2px;
        font-weight: normal;
      }
      .km-default-tab-select {
        width: 100%;
        padding: 8px 10px;
        font: inherit;
        font-size: 0.85rem;
        color: var(--ink);
        background: var(--sunken);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-xs);
        outline: none;
        transition: border-color var(--transition), box-shadow var(--transition);
      }
      .km-default-tab-select:hover {
        border-color: var(--line-strong);
      }
      .km-default-tab-select:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-glow);
      }
      [data-vp-hide] { display: none !important; }
      .km-sidebar-search {
        background: var(--sunken); border: 1px solid var(--line-strong);
        border-radius: var(--radius-xs); padding: 7px 10px;
        font: inherit; font-size: 0.8rem; color: var(--ink);
        outline: none; width: 100%;
        transition: border-color var(--transition), box-shadow var(--transition);
      }
      .km-sidebar-search:focus {
        border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
      }
      .km-sidebar-search::placeholder { color: var(--muted); }
      .km-sidebar-filter-row {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
      }
      .km-sidebar-filter-select {
        width: 100%;
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-xs);
        padding: 7px 10px;
        font: inherit;
        font-size: 0.74rem;
        background: var(--sunken);
        color: var(--ink);
        outline: none;
        cursor: pointer;
        transition: border-color var(--transition), box-shadow var(--transition);
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236c6c8a'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
        padding-right: 28px;
      }
      .km-sidebar-filter-select:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-glow);
      }
      .km-sidebar-filter-select option {
        background: var(--surface);
        color: var(--ink);
      }
      .km-filter-tag {
        border: 1px solid var(--tag-border); background: var(--tag-bg);
        color: var(--muted); border-radius: 99px; padding: 2px 10px;
        font: inherit; font-size: 0.68rem; font-weight: 600;
        cursor: pointer; transition: all var(--transition);
        text-transform: uppercase; letter-spacing: 0.06em;
      }
      .km-filter-tag:hover { color: var(--ink); border-color: var(--line-strong); }
      .km-filter-tag.active { color: #fff; border-color: transparent; }
      .km-filter-tag[data-tag="ALL"].active { background: var(--accent); }
      .km-filter-tag[data-tag="SOP"].active { background: var(--amber); color: #111; }
      .km-filter-tag[data-tag="SKILL"].active { background: #f472b6; }
      .km-filter-tag[data-tag="AGENT"].active { background: #d946ef; color: #fff; }
      .km-filter-tag[data-tag="GENERAL"].active { background: var(--blue); }
      .km-filter-tag[data-tag="TODO"].active { background: #06b6d4; color: #082f49; }
      .km-filter-tag[data-tag="DECISION"].active { background: #22c55e; color: #052e16; }
      .km-filter-tag[data-tag="CHECKLIST"].active { background: #f97316; }
      .km-filter-tag[data-tag="ARCHIVED"].active { background: #78716c; }
      .km-filter-tag[data-tag="PERSON"].active { background: #60a5fa; }
      .km-filter-tag[data-tag="COMPANY"].active { background: #14b8a6; }

      .km-col.km-sidebar-collapsed .km-sidebar {
        width: 48px;
      }
      .km-col.km-sidebar-collapsed .km-sidebar-title,
      .km-col.km-sidebar-collapsed .km-sidebar-search,
      .km-col.km-sidebar-collapsed .km-sidebar-filter-row,
      .km-col.km-sidebar-collapsed .km-search-results,
      .km-col.km-sidebar-collapsed .km-tree,
      .km-col.km-sidebar-collapsed .km-sidebar-actions,
      .km-col.km-sidebar-collapsed .km-sidebar-action-btn,
      .km-col.km-sidebar-collapsed .km-sidebar-gear-btn {
        display: none;
      }
      .km-col.km-sidebar-collapsed .km-sidebar-header {
        padding: 12px 0;
        border-bottom: none;
      }
      .km-col.km-sidebar-collapsed .km-sidebar-headline {
        justify-content: center;
      }
      .km-col.km-sidebar-collapsed .km-sidebar-headline-actions {
        gap: 0;
      }

      .km-tree {
        flex: 1; overflow-y: auto; padding: 8px 0;
        overscroll-behavior-y: contain; scrollbar-gutter: stable;
      }
      .km-sidebar-actions {
        display: flex;
        flex-direction: column;
      }
      .km-action-group {
        display: flex;
        gap: 8px;
        margin: 10px 14px;
      }
      .km-action-group .km-add-fab {
        margin: 0;
        width: 100%;
        flex: 1;
      }
      .km-sidebar-actions[hidden] {
        display: none !important;
      }
      .km-task-view-toggle {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        margin: 0 14px 10px;
      }
      .km-task-view-btn {
        border: 1px solid rgba(6,182,212,0.2);
        background: rgba(6,182,212,0.1);
        color: #67e8f9;
        border-radius: var(--radius-xs);
        padding: 7px 10px;
        font: inherit;
        font-size: 0.72rem;
        font-weight: 700;
        cursor: pointer;
        transition: all var(--transition);
      }
      .km-task-view-btn:hover {
        background: rgba(6,182,212,0.16);
        border-color: rgba(6,182,212,0.38);
      }
      .km-task-view-btn.active {
        background: rgba(6,182,212,0.24);
        border-color: rgba(6,182,212,0.48);
        color: #ecfeff;
      }
      .km-tree-group { margin-bottom: 4px; }
      .km-tree-group-label {
        display: flex; align-items: center; gap: 6px;
        padding: 5px 14px; font-size: 0.62rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
        cursor: pointer; user-select: none;
        transition: color var(--transition);
      }
      .km-tree-group-label:hover { color: var(--ink); }
      .km-tree-group-label .gtag-dot {
        width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
      }
      .km-tree-group-label .gcount {
        margin-left: auto; font-size: 0.6rem; background: var(--tag-bg);
        border: 1px solid var(--tag-border); border-radius: 99px;
        padding: 0 6px; color: var(--muted);
      }
      .km-tree-group-label .garrow {
        font-size: 0.5rem; transition: transform 0.2s; margin-right: 2px;
      }
      .km-tree-group.collapsed .garrow { transform: rotate(-90deg); }
      .km-tree-group.collapsed .km-tree-items { display: none; }

      .km-tree-items { padding: 0 8px 4px; }
      .km-tree-item {
        display: flex; align-items: center; gap: 7px;
        padding: 6px 10px 6px 14px;
        font-size: 0.8rem; color: var(--ink-secondary);
        cursor: pointer; border: none; background: transparent;
        width: 100%; text-align: left; font: inherit; font-size: 0.8rem;
        border-radius: var(--radius-xs);
        transition: background var(--transition), color var(--transition);
        position: relative;
      }
      .km-tree-item:hover { background: rgba(255,255,255,0.05); color: var(--ink); }
      body[data-theme="light"] .km-tree-item:hover { background: rgba(0,0,0,0.045); }
      .km-tree-item.active {
        background: var(--accent-soft); color: var(--accent);
      }
      .km-tree-item.active::before {
        content: ''; position: absolute; left: -8px; top: 6px; bottom: 6px;
        width: 3px; background: var(--accent); border-radius: 0 3px 3px 0;
      }
      .km-tree-item-icon { font-size: 0.7rem; flex-shrink: 0; opacity: 0.6; }
      .km-tree-item-name {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
      }
      .km-tree-item-tags,
      .km-tree-item-summary,
      .km-tree-item-meta {
        display: none;
      }

      .km-add-fab {
        flex-shrink: 0;
        margin: 10px 14px;
        background: var(--accent-soft); border: 1px solid rgba(59, 130, 246,0.2);
        color: var(--accent); border-radius: var(--radius-xs); padding: 8px 0;
        font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer;
        transition: all var(--transition); width: calc(100% - 28px);
        text-align: center;
      }
      .km-add-fab:hover { background: rgba(59, 130, 246,0.18); border-color: rgba(59, 130, 246,0.35); }

      .km-scan-overlay {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
        background: rgba(0, 0, 0, 0.58);
      }
      .km-scan-overlay.visible { display: flex; }
      .km-scan-dialog {
        width: min(560px, 100%);
        max-height: calc(var(--app-vh) - 36px);
        overflow: auto;
        background: var(--surface);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-md);
        box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
        padding: 16px;
      }
      .km-scan-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
      }
      .km-scan-header h3 {
        margin: 0 0 4px;
        color: var(--ink);
        font-size: 1rem;
      }
      .km-scan-header p {
        margin: 0;
        color: var(--muted);
        font-size: 0.78rem;
        line-height: 1.4;
      }
      .km-scan-header p.error { color: var(--red); }
      .km-scan-icon-btn {
        width: 32px;
        height: 32px;
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-xs);
        background: var(--bg);
        color: var(--ink);
        cursor: pointer;
        font: inherit;
        font-size: 1.1rem;
      }
      .km-scan-preview {
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        aspect-ratio: 4 / 3;
        overflow: hidden;
        display: grid;
        place-items: center;
        margin-bottom: 12px;
      }
      .km-scan-preview video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #05070d;
      }
      .km-scan-label {
        display: block;
        margin: 0 0 5px;
        color: var(--muted);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }
      .km-scan-input {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-xs);
        background: var(--bg);
        color: var(--ink);
        font: inherit;
        font-size: 0.84rem;
        padding: 9px 10px;
        margin-bottom: 12px;
      }
      .km-scan-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }
      .km-scan-actions button {
        min-height: 38px;
        border-radius: var(--radius-xs);
        font: inherit;
        font-size: 0.78rem;
        font-weight: 700;
        cursor: pointer;
      }
      .km-scan-secondary {
        border: 1px solid var(--line-strong);
        background: var(--bg);
        color: var(--ink-secondary);
      }
      .km-scan-primary {
        border: 1px solid rgba(59, 130, 246, 0.45);
        background: var(--accent-soft);
        color: var(--accent);
      }
      .km-scan-actions button:disabled {
        opacity: 0.55;
        cursor: not-allowed;
      }

      /* Right editor/reader pane */
      .km-editor-pane {
        flex: 1; display: flex; flex-direction: column;
        min-width: 0; min-height: 0; overflow: hidden;
        background: var(--sunken);
      }
      .km-editor-toolbar {
        display: flex; align-items: center; gap: 8px;
        padding: 10px 18px;
        background: var(--surface); border-bottom: 1px solid var(--line);
        flex-shrink: 0;
      }
      .km-editor-path {
        font-size: 0.7rem; font-family: 'SF Mono','Fira Code',monospace;
        color: var(--muted); flex: 1; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap;
      }
      /* Back-to-list chevron — only visible on mobile (Apple HIG back button). */
      .km-editor-back-btn {
        display: none;
        align-items: center;
        gap: 2px;
        background: none;
        border: none;
        padding: 6px 8px 6px 4px;
        margin-right: 2px;
        color: var(--accent);
        font: inherit;
        font-size: 0.88rem;
        font-weight: 500;
        line-height: 1;
        cursor: pointer;
        border-radius: var(--radius-xs);
        -webkit-tap-highlight-color: transparent;
        min-height: 36px;
      }
      .km-editor-back-btn:active { opacity: 0.55; }
      .km-editor-back-btn svg { flex-shrink: 0; }
      .km-editor-mode-btn {
        background: var(--tag-bg); border: 1px solid var(--tag-border); color: var(--muted);
        border-radius: var(--radius-xs); padding: 4px 12px; font: inherit;
        font-size: 0.72rem; font-weight: 600; cursor: pointer;
        transition: all var(--transition);
      }
      .km-editor-mode-btn:hover { color: var(--ink); border-color: var(--line-strong); }
      .km-editor-mode-btn.active { background: var(--accent-soft); color: var(--accent); border-color: rgba(59, 130, 246,0.25); }
      .km-editor-action-btn {
        background: transparent; border: 1px solid var(--tag-border); color: var(--muted);
        border-radius: var(--radius-xs); padding: 4px 12px; font: inherit;
        font-size: 0.72rem; font-weight: 600; cursor: pointer;
        transition: all var(--transition);
      }
      .km-editor-action-btn:hover { color: var(--ink); border-color: var(--line-strong); }
      .km-editor-action-btn.attach {
        background: var(--accent-soft); color: var(--accent); border-color: rgba(59, 130, 246,0.2);
      }
      .km-editor-action-btn.attach:hover { background: rgba(59, 130, 246,0.18); border-color: rgba(59, 130, 246,0.35); }
      .km-editor-save-btn {
        background: linear-gradient(135deg, var(--accent), #2563eb); color: #fff;
        border: none; border-radius: var(--radius-xs); padding: 5px 16px;
        font: inherit; font-size: 0.76rem; font-weight: 700; cursor: pointer;
        transition: opacity var(--transition);
      }
      .km-editor-save-btn:hover { opacity: 0.88; }
      .km-editor-save-btn:disabled { opacity: 0.35; cursor: not-allowed; }
      .km-editor-delete-btn {
        background: var(--red-soft); border: 1px solid rgba(248,113,113,0.2);
        color: var(--red); border-radius: var(--radius-xs); padding: 5px 12px;
        font: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer;
        transition: all var(--transition);
      }
      .km-editor-delete-btn:hover { border-color: rgba(248,113,113,0.4); }

      /* Editor body */
      .km-editor-body {
        flex: 1; min-height: 0; position: relative; overflow: hidden;
        background: var(--sunken);
      }
      .km-editor-textarea {
        position: absolute; inset: 0; width: 100%; height: 100%;
        background: var(--surface); color: var(--ink); border: none;
        padding: 36px max(28px, calc((100% - 760px) / 2));
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 1.02rem; line-height: 1.85; resize: none; outline: none;
        tab-size: 2; overflow-y: auto; overscroll-behavior-y: contain;
        box-shadow: inset 0 1px 0 var(--line);
      }
      .km-editor-textarea::placeholder { color: var(--muted); }

      .km-preview-body {
        position: absolute; inset: 0; width: 100%; height: 100%;
        overflow-y: auto; overflow-x: auto; overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        padding: 36px max(28px, calc((100% - 760px) / 2));
        line-height: 1.85;
        font-size: 0.96rem; color: var(--ink);
        background: var(--surface);
        box-shadow: inset 0 1px 0 var(--line);
        display: none;
      }
      .km-preview-body.active { display: block; }
      .km-preview-body[contenteditable="true"] { cursor: text; outline: none; }
      .km-preview-body[contenteditable="true"]:focus { box-shadow: inset 0 0 0 2px rgba(59, 130, 246,0.15); border-radius: 4px; }
      .km-preview-body h1 { font-size: 1.8rem; font-weight: 800; color: var(--ink); margin: 0 0 18px; letter-spacing: -0.02em; line-height: 1.25; }
      .km-preview-body h2 { font-size: 1.3rem; font-weight: 700; color: var(--ink); margin: 28px 0 10px; letter-spacing: -0.01em; }
      .km-preview-body h3 { font-size: 1.08rem; font-weight: 700; color: var(--ink-secondary); margin: 22px 0 8px; }
      .km-preview-body p { margin: 0 0 14px; }
      .km-preview-body ul, .km-preview-body ol { margin: 0 0 14px 24px; }
      .km-preview-body li { margin: 4px 0; }
      .km-preview-body code { font-family: 'SF Mono','Fira Code',monospace; font-size: 0.81rem; background: var(--panel); border: 1px solid var(--line-strong); padding: 1px 6px; border-radius: 5px; }
      .km-preview-body pre { background: var(--sunken); border: 1px solid var(--line-strong); border-radius: 8px; padding: 14px 16px; overflow-x: auto; margin: 0 0 12px; }
      .km-preview-body pre code { background: none; border: none; padding: 0; }
      .km-preview-body blockquote { border-left: 3px solid var(--accent); padding: 8px 14px; background: var(--panel); border-radius: 6px; margin: 0 0 12px; color: var(--ink-secondary); }
      .km-preview-body table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 0.84rem; }
      .km-preview-body th, .km-preview-body td { border: 1px solid var(--line-strong); padding: 6px 10px; text-align: left; }
      .km-preview-body th { background: var(--panel); font-weight: 700; }
      .km-preview-body hr { border: 0; border-top: 1px solid var(--line-strong); margin: 16px 0; }
      .km-preview-body a { color: var(--accent); text-decoration: underline; }

      /* [[wikilink]] rendered chips */
      .km-wikilink {
        display: inline-flex; align-items: center; gap: 4px;
        background: var(--accent-soft); border: 1px solid rgba(59, 130, 246,0.2);
        color: var(--accent); border-radius: var(--radius-xs);
        padding: 1px 8px; font-size: 0.78rem; cursor: pointer;
        text-decoration: none; transition: all var(--transition);
      }
      .km-wikilink:hover { background: rgba(59, 130, 246,0.18); border-color: rgba(59, 130, 246,0.4); }
      .km-wikilink-missing {
        background: var(--red-soft); border-color: rgba(248,113,113,0.2); color: var(--red);
      }

      /* Frontmatter meta bar */
      .km-meta-bar {
        display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
        padding: 8px 32px 0; flex-shrink: 0;
      }
      .km-classifier-panel {
        margin: 10px 32px 0;
        padding: 10px 12px;
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-sm);
        background: var(--sunken);
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .km-classifier-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
      }
      .km-classifier-label {
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
      }
      .km-classifier-select {
        min-width: 160px;
        max-width: 220px;
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-xs);
        padding: 5px 8px;
        font: inherit;
        font-size: 0.75rem;
        background: var(--surface);
        color: var(--ink);
      }
      .km-classifier-hint {
        font-size: 0.7rem;
        color: var(--muted);
      }
      .km-root-badge {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 3px 10px; border-radius: 99px;
        font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .km-root-badge-SOP { background: rgba(251,191,36,0.15); color: var(--amber); border: 1px solid rgba(251,191,36,0.25); }
      .km-root-badge-SKILL { background: rgba(244,114,182,0.12); color: #f472b6; border: 1px solid rgba(244,114,182,0.2); }
      .km-root-badge-AGENT { background: rgba(217,70,239,0.12); color: #d946ef; border: 1px solid rgba(217,70,239,0.25); }
      .km-root-badge-GENERAL { background: var(--blue-soft); color: var(--blue); border: 1px solid rgba(96,165,250,0.2); }
      .km-root-badge-TODO { background: rgba(6,182,212,0.14); color: #22d3ee; border: 1px solid rgba(6,182,212,0.28); }
      .km-root-badge-DECISION { background: rgba(34,197,94,0.12); color: #22c55e; border: 1px solid rgba(34,197,94,0.25); }
      .km-root-badge-CHECKLIST { background: rgba(249,115,22,0.12); color: #fb923c; border: 1px solid rgba(249,115,22,0.25); }
      .km-root-badge-ARCHIVED { background: rgba(120,113,108,0.12); color: #a8a29e; border: 1px solid rgba(120,113,108,0.25); }
      .km-root-badge-PERSON { background: rgba(167,139,250,0.18); color: #bfdbfe; border: 1px solid rgba(167,139,250,0.3); }
      .km-root-badge-COMPANY { background: rgba(20,184,166,0.16); color: #5eead4; border: 1px solid rgba(20,184,166,0.28); }
      #kmMetaTags {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
      }
      .km-meta-tag-label {
        font-size: 0.63rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
        font-weight: 700;
        padding-left: 2px;
      }
      .km-meta-tag-chip {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 8px;
        border-radius: 999px;
        border: 1px solid var(--tag-border);
        background: var(--tag-bg);
        font-size: 0.68rem;
        color: var(--ink-secondary);
      }
      .km-meta-tag-chip button {
        border: none;
        background: transparent;
        color: var(--muted);
        font: inherit;
        font-size: 0.78rem;
        line-height: 1;
        cursor: pointer;
        padding: 0;
      }
      .km-meta-tag-chip button:hover { color: var(--ink); }
      .km-meta-tag-input {
        min-width: 72px;
        border: 1px dashed var(--line-strong);
        border-radius: 999px;
        background: transparent;
        color: var(--ink);
        padding: 3px 10px;
        font: inherit;
        font-size: 0.68rem;
      }
      .km-meta-tag-input:focus {
        outline: none;
        border-style: solid;
        border-color: var(--accent);
      }

      /* Graph panel */

      .km-bulk-tags-btn {
        flex-shrink: 0;
        margin: 0 14px 10px;
        background: var(--tag-bg); border: 1px solid var(--tag-border); color: var(--muted);
        border-radius: var(--radius-xs); padding: 6px 0; font: inherit;
        font-size: 0.72rem; font-weight: 600; cursor: pointer;
        transition: all var(--transition); width: calc(100% - 28px); text-align: center;
      }
      .km-bulk-tags-btn:hover { color: var(--ink); border-color: var(--line-strong); }

      .km-board-pane {
        display: none;
        flex: 1;
        min-height: 0;
        padding: 16px;
        background: radial-gradient(circle at 10% 0%, rgba(6,182,212,0.08), transparent 45%), var(--surface);
        overflow: hidden;
      }
      .km-board-pane.visible {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .km-gantt-pane {
        display: none;
        flex: 1;
        min-height: 0;
        padding: 16px;
        background: radial-gradient(circle at 90% 0%, rgba(96,165,250,0.09), transparent 42%), var(--surface);
        overflow: hidden;
      }
      .km-gantt-pane.visible {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .km-board-toolbar {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }
      .km-gantt-toolbar {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }
      .km-board-title {
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #22d3ee;
      }
      .km-gantt-title {
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--blue);
      }
      .km-board-lane-menu-wrap {
        position: relative;
      }
      .km-board-lane-menu {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        min-width: 180px;
        padding: 8px;
        border-radius: 10px;
        border: 1px solid var(--line-strong);
        background: var(--surface);
        box-shadow: 0 14px 26px rgba(0,0,0,0.32);
        z-index: 20;
      }
      .km-board-lane-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.72rem;
        color: var(--ink-secondary);
        padding: 4px 2px;
      }
      .km-board-lane-item input { accent-color: #06b6d4; }
      .km-board-lane-hint {
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid var(--line);
        font-size: 0.62rem;
        color: var(--muted);
      }
      .km-board-toolbar-spacer { flex: 1; }
      .km-gantt-toolbar-spacer { flex: 1; }
      .km-board-switch {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.72rem;
        color: var(--ink-secondary);
      }
      .km-board-switch input { accent-color: #06b6d4; }
      .km-gantt-summary {
        font-size: 0.74rem;
        color: var(--ink-secondary);
      }
      .km-gantt-grid-wrap {
        flex: 1;
        min-height: 0;
        overflow: auto;
        border: 1px solid var(--line-strong);
        border-radius: 12px;
        background: var(--raised);
      }
      .km-gantt-empty {
        font-size: 0.78rem;
        color: var(--muted);
        padding: 18px;
        text-align: center;
      }
      .km-gantt-grid {
        min-width: max-content;
      }
      .km-gantt-table {
        display: grid;
        grid-template-columns: 260px minmax(720px, 1fr);
      }
      .km-gantt-head-meta,
      .km-gantt-head-track,
      .km-gantt-row-meta,
      .km-gantt-row-track {
        border-bottom: 1px solid var(--line);
      }
      .km-gantt-head-meta {
        padding: 10px 12px;
        background: var(--sunken);
        font-size: 0.66rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
      }
      .km-gantt-head-track {
        display: grid;
        grid-template-columns: repeat(var(--km-gantt-day-count), minmax(44px, 1fr));
        background: var(--sunken);
      }
      .km-gantt-head-day {
        padding: 10px 6px;
        text-align: center;
        font-size: 0.62rem;
        font-weight: 700;
        color: var(--ink-secondary);
        border-left: 1px solid var(--line);
      }
      .km-gantt-row-meta {
        padding: 12px;
        background: transparent;
        border-left: none;
        border-right: none;
        text-align: left;
        cursor: pointer;
      }
      .km-gantt-row-meta:hover .km-gantt-row-title {
        color: var(--ink);
      }
      .km-gantt-row-title {
        display: block;
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--ink-secondary);
      }
      .km-gantt-row-sub {
        display: block;
        margin-top: 4px;
        font-size: 0.66rem;
        color: var(--muted);
        text-transform: capitalize;
      }
      .km-gantt-row-track {
        position: relative;
        display: grid;
        grid-template-columns: repeat(var(--km-gantt-day-count), minmax(44px, 1fr));
        align-items: center;
        min-height: 60px;
        padding: 0 8px;
      }
      .km-gantt-track-grid {
        position: absolute;
        inset: 0 8px;
        display: grid;
        grid-template-columns: repeat(var(--km-gantt-day-count), minmax(44px, 1fr));
        pointer-events: none;
      }
      .km-gantt-track-cell {
        border-left: 1px solid var(--line);
      }
      .km-gantt-bar {
        position: relative;
        z-index: 1;
        margin: 0 2px;
        border: 1px solid transparent;
        border-radius: 999px;
        padding: 6px 10px;
        font: inherit;
        font-size: 0.7rem;
        font-weight: 700;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
      }
      .km-gantt-bar-backlog { background: rgba(148,163,184,0.18); color: #cbd5e1; border-color: rgba(148,163,184,0.28); }
      .km-gantt-bar-todo { background: rgba(34,211,238,0.18); color: #a5f3fc; border-color: rgba(34,211,238,0.32); }
      .km-gantt-bar-in-progress { background: rgba(96,165,250,0.18); color: #bfdbfe; border-color: rgba(96,165,250,0.34); }
      .km-gantt-bar-blocked { background: rgba(248,113,113,0.18); color: #fecaca; border-color: rgba(248,113,113,0.34); }
      .km-gantt-bar-review { background: rgba(251,191,36,0.2); color: #fde68a; border-color: rgba(251,191,36,0.34); }
      .km-gantt-bar-done { background: rgba(52,211,153,0.18); color: #bbf7d0; border-color: rgba(52,211,153,0.32); }
      .km-gantt-unscheduled {
        border: 1px solid var(--line-strong);
        border-radius: 12px;
        background: var(--raised);
        padding: 12px;
      }
      .km-gantt-unscheduled-title {
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
        margin-bottom: 10px;
      }
      .km-gantt-unscheduled-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .km-gantt-unscheduled-chip {
        border: 1px solid var(--tag-border);
        background: var(--tag-bg);
        color: var(--ink-secondary);
        border-radius: 999px;
        padding: 6px 10px;
        font: inherit;
        font-size: 0.72rem;
        font-weight: 600;
        cursor: pointer;
        transition: all var(--transition);
      }
      .km-gantt-unscheduled-chip:hover {
        color: var(--ink);
        border-color: var(--line-strong);
      }
      .km-board-columns {
        flex: 1;
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(var(--km-board-column-count, 6), minmax(180px, 1fr));
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 4px;
      }
      .km-board-col {
        background: var(--sunken);
        border: 1px solid var(--line-strong);
        border-radius: 10px;
        min-height: 0;
        display: flex;
        flex-direction: column;
      }
      .km-board-col.drag-over {
        border-color: rgba(6,182,212,0.55);
        box-shadow: inset 0 0 0 1px rgba(6,182,212,0.4);
      }
      .km-board-col-head {
        padding: 9px 10px;
        border-bottom: 1px solid var(--line);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--ink-secondary);
        font-weight: 700;
      }
      .km-board-col-head-right {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .km-board-col-add {
        border: 1px solid var(--tag-border);
        background: transparent;
        color: var(--muted);
        border-radius: 6px;
        padding: 2px 7px;
        font: inherit;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: none;
        cursor: pointer;
      }
      .km-board-col-add:hover {
        color: #22d3ee;
        border-color: rgba(6,182,212,0.42);
        background: rgba(6,182,212,0.14);
      }
      .km-board-col-count {
        border: 1px solid var(--tag-border);
        background: var(--tag-bg);
        border-radius: 99px;
        padding: 0 7px;
        font-size: 0.62rem;
        color: var(--muted);
      }
      .km-board-cards {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 8px;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .km-board-empty {
        font-size: 0.68rem;
        color: var(--muted);
        border: 1px dashed var(--line-strong);
        border-radius: 8px;
        padding: 10px;
        text-align: center;
      }
      .km-board-group-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        padding: 4px 2px;
        margin-top: 2px;
        border-top: 1px dashed var(--line-strong);
      }
      .km-board-group-head:first-child { border-top: none; margin-top: 0; }
      .km-board-group-count {
        font-size: 0.62rem;
        font-weight: 700;
        color: var(--ink-secondary);
        background: var(--panel);
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        padding: 1px 7px;
      }
      .km-board-group-head--unscheduled {
        color: #f59e0b;
        border-top: none;
      }
      .km-board-group-head--unscheduled .km-board-group-count {
        color: #f59e0b;
        background: rgba(245,158,11,0.12);
        border-color: rgba(245,158,11,0.35);
      }
      .km-todo-card--unscheduled {
        border-color: rgba(245,158,11,0.55);
        background: linear-gradient(180deg, rgba(245,158,11,0.08), var(--raised));
        box-shadow: inset 3px 0 0 0 #f59e0b;
      }
      .km-todo-card--unscheduled:hover {
        border-color: rgba(245,158,11,0.85);
      }
      .km-todo-schedule-flag {
        display: inline-block;
        margin-left: 8px;
        padding: 1px 7px;
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #f59e0b;
        background: rgba(245,158,11,0.12);
        border: 1px solid rgba(245,158,11,0.4);
        border-radius: 999px;
        vertical-align: middle;
      }
      .km-todo-card.km-todo-card--priority-high {
        border-color: rgba(248, 113, 113, 0.45);
        box-shadow: inset 4px 0 0 0 #f87171;
      }
      .km-todo-card.km-todo-card--priority-high:hover {
        border-color: rgba(248, 113, 113, 0.85);
        box-shadow: inset 4px 0 0 0 #f87171, 0 10px 24px rgba(0,0,0,0.2);
      }
      .km-todo-card.km-todo-card--priority-medium {
        border-color: rgba(245, 158, 11, 0.45);
        box-shadow: inset 4px 0 0 0 #f59e0b;
      }
      .km-todo-card.km-todo-card--priority-medium:hover {
        border-color: rgba(245, 158, 11, 0.85);
        box-shadow: inset 4px 0 0 0 #f59e0b, 0 10px 24px rgba(0,0,0,0.2);
      }
      .km-todo-card.km-todo-card--priority-low {
        border-color: rgba(59, 130, 246, 0.45);
        box-shadow: inset 4px 0 0 0 #3b82f6;
      }
      .km-todo-card.km-todo-card--priority-low:hover {
        border-color: rgba(59, 130, 246, 0.85);
        box-shadow: inset 4px 0 0 0 #3b82f6, 0 10px 24px rgba(0,0,0,0.2);
      }

      .km-todo-priority-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 8px;
        border-radius: var(--radius-xs);
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        width: fit-content;
        margin-top: 2px;
      }
      .km-todo-priority-badge.priority-high {
        background: rgba(248, 113, 113, 0.12);
        border: 1px solid rgba(248, 113, 113, 0.35);
        color: #f87171;
      }
      .km-todo-priority-badge.priority-medium {
        background: rgba(245, 158, 11, 0.12);
        border: 1px solid rgba(245, 158, 11, 0.35);
        color: #f59e0b;
      }
      .km-todo-priority-badge.priority-low {
        background: rgba(59, 130, 246, 0.12);
        border: 1px solid rgba(59, 130, 246, 0.35);
        color: #3b82f6;
      }
      .km-todo-priority-badge .priority-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        display: inline-block;
      }
      .km-todo-priority-badge.priority-high .priority-dot {
        background: #f87171;
        box-shadow: 0 0 6px rgba(248, 113, 113, 0.6);
      }
      .km-todo-priority-badge.priority-medium .priority-dot {
        background: #f59e0b;
        box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
      }
      .km-todo-priority-badge.priority-low .priority-dot {
        background: #3b82f6;
        box-shadow: 0 0 6px rgba(59, 130, 246, 0.6);
      }

      .km-todo-card {
        border: 1px solid var(--line-strong);
        border-radius: 8px;
        background: var(--raised);
        padding: 8px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
        transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
      }
      .km-todo-card:hover {
        border-color: rgba(6,182,212,0.36);
        box-shadow: 0 10px 24px rgba(0,0,0,0.2);
        transform: translateY(-1px);
      }
      .km-todo-card:focus-visible {
        outline: 2px solid rgba(6,182,212,0.7);
        outline-offset: 2px;
      }
      .km-todo-card:active { cursor: grabbing; }
      .km-todo-title {
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--ink);
        line-height: 1.35;
      }
      .km-todo-path {
        font-size: 0.62rem;
        font-family: 'SF Mono','Fira Code',monospace;
        color: var(--muted);
      }
      .km-todo-dates {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
      }
      .km-todo-date-chip {
        border: 1px solid var(--tag-border);
        border-radius: 99px;
        padding: 1px 7px;
        font-size: 0.62rem;
        color: var(--ink-secondary);
        background: var(--tag-bg);
      }
      .km-todo-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
      }
      .km-todo-open-btn {
        border: 1px solid var(--tag-border);
        background: transparent;
        color: var(--muted);
        border-radius: 6px;
        padding: 3px 8px;
        font: inherit;
        font-size: 0.68rem;
        cursor: pointer;
      }
      .km-todo-open-btn:hover { color: var(--ink); border-color: var(--line-strong); }

      .km-todo-modal {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(9, 11, 18, 0.58);
        backdrop-filter: blur(8px);
        z-index: 9999;
      }
      .km-todo-modal.visible { display: flex; }
      .km-todo-modal-dialog {
        position: relative;
        width: min(920px, calc(100vw - 64px));
        max-height: min(760px, calc(100vh - 72px));
        background: linear-gradient(180deg, rgba(26,31,46,0.98), rgba(19,22,32,0.98));
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 18px;
        box-shadow: 0 28px 80px rgba(0,0,0,0.45);
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      body[data-theme="light"] .km-todo-modal-dialog {
        background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(240,242,247,0.98));
      }
      .km-todo-modal-head {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px 16px;
        padding: 18px 64px 14px 20px;
        border-bottom: 1px solid var(--line);
      }
      .km-todo-modal-head-main {
        flex: 1 1 240px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .km-todo-modal-kicker {
        font-size: 0.66rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #22d3ee;
        font-weight: 800;
      }
      .km-todo-modal-title {
        font-size: 1.12rem;
        font-weight: 800;
        color: var(--ink);
        line-height: 1.25;
      }
      .km-todo-modal-path {
        font-size: 0.67rem;
        font-family: 'SF Mono','Fira Code',monospace;
        color: var(--muted);
        word-break: break-all;
      }
      .km-todo-modal-controls {
        flex: 1 1 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding-bottom: 2px;
      }
      .km-todo-modal-controls > * { flex-shrink: 0; }
      .km-todo-modal-status-field {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border: 1px solid var(--tag-border);
        border-radius: 999px;
        background: var(--tag-bg);
        color: var(--ink-secondary);
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .km-todo-modal-status-select {
        border: none;
        outline: none;
        background: transparent;
        color: var(--ink);
        font: inherit;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: none;
        cursor: pointer;
      }
      .km-todo-modal-status-select option {
        background: var(--surface);
        color: var(--ink);
      }
      .km-todo-modal-date-field {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border: 1px solid var(--tag-border);
        border-radius: 999px;
        background: var(--tag-bg);
        color: var(--ink-secondary);
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .km-todo-modal-date-input {
        border: none;
        outline: none;
        background: transparent;
        color: var(--ink);
        font: inherit;
        font-size: 0.72rem;
        font-weight: 700;
        min-width: 116px;
      }
      .km-todo-modal-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .km-todo-modal-body {
        flex: 1;
        min-height: 0;
        min-width: 0;
        padding: 0 20px 18px;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .km-todo-modal-frame {
        flex: 1;
        min-height: 320px;
        min-width: 0;
        position: relative;
        border: 1px solid var(--line-strong);
        border-radius: 14px;
        background: rgba(15,18,25,0.72);
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }
      body[data-theme="light"] .km-todo-modal-frame {
        background: rgba(255,255,255,0.88);
      }
      .km-todo-modal-textarea {
        flex: 1;
        width: 100%;
        min-width: 0;
        min-height: 320px;
        border: none;
        outline: none;
        resize: none;
        padding: 18px 20px;
        background: transparent;
        color: var(--ink);
        font: inherit;
        font-size: 0.86rem;
        line-height: 1.6;
        white-space: pre-wrap;
        word-break: break-word;
        overflow-wrap: anywhere;
      }
      .km-todo-modal-preview {
        display: none;
        flex: 1;
        min-height: 0;
        min-width: 0;
        overflow: auto;
        padding: 18px 20px;
        word-break: break-word;
        overflow-wrap: anywhere;
      }
      .km-todo-modal-preview.active { display: block; }
      .km-todo-modal-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 14px 20px 18px;
        border-top: 1px solid var(--line);
      }
      .km-todo-modal-status {
        font-size: 0.72rem;
        color: var(--muted);
      }
      .km-todo-modal-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
      }
      .km-todo-modal-close {
        position: absolute;
        top: 18px;
        right: 20px;
        width: 34px;
        height: 34px;
        border-radius: 999px;
        border: 1px solid var(--tag-border);
        background: var(--tag-bg);
        color: var(--muted);
        font: inherit;
        font-size: 1.05rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100;
        transition: all var(--transition);
      }
      .km-todo-modal-close:hover { color: var(--ink); border-color: var(--line-strong); }
      
      .km-todo-modal-action {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        border: 1px solid var(--tag-border);
        background: var(--tag-bg);
        color: var(--muted);
        font: inherit;
        font-size: 1rem;
        line-height: 1;
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .km-todo-modal-action:hover {
        color: var(--accent);
        border-color: var(--accent);
        background: rgba(0, 123, 255, 0.05);
      }
      .km-todo-modal-action.km-copy-success,
      .km-sidebar-action-btn.km-copy-success,
      .km-editor-action-btn.km-copy-success {
        color: #28a745;
        border-color: #28a745;
        background: rgba(40, 167, 69, 0.1);
      }

      @media (max-width: 900px) {
        .km-todo-modal {
          padding: calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left));
        }
        .km-todo-modal-dialog {
          width: calc(100vw - 24px);
          max-height: calc(var(--app-vh) - 24px - var(--safe-top) - var(--safe-bottom));
        }
        .km-todo-modal-head {
          padding: 16px 56px 12px 16px !important;
        }
        .km-todo-modal-close {
          top: 12px !important;
          right: 12px !important;
        }
        .km-todo-modal-head,
        .km-todo-modal-foot {
          flex-direction: column;
          align-items: stretch;
        }
        .km-todo-modal-controls {
          justify-content: flex-start;
          margin-top: 8px;
          gap: 8px;
        }
        .km-todo-modal-controls > * {
          flex: 1 1 calc(50% - 4px) !important;
          max-width: none !important;
          box-sizing: border-box;
        }
        .km-todo-modal-controls .km-editor-mode-btn {
          flex: 1 1 auto !important;
          max-width: none !important;
          text-align: center;
          justify-content: center;
        }
        .km-todo-modal-actions {
          justify-content: flex-start;
        }
        /* Narrow the knowledge sidebar on tablets */
        .km-sidebar { width: 200px; }
      }

      /* New file form */
      .km-new-form {
        display: none; flex-direction: column; gap: 10px;
        padding: 16px; border-bottom: 1px solid var(--line);
        background: var(--sunken);
      }
      .km-new-form.visible { display: flex; }
      .km-input, .km-textarea, .km-select {
        background: var(--surface); border: 1px solid var(--line-strong);
        border-radius: var(--radius-xs); padding: 8px 12px; font: inherit;
        font-size: 0.82rem; color: var(--ink); outline: none; width: 100%;
        transition: border-color var(--transition), box-shadow var(--transition);
      }
      .km-input:focus, .km-textarea:focus, .km-select:focus {
        border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
      }
      .km-input::placeholder { color: var(--muted); }
      .km-select { cursor: pointer; }
      .km-select option { background: var(--surface); }
      .km-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
      .km-btn-save {
        background: linear-gradient(135deg, var(--accent), #2563eb); color: #fff;
        border: none; border-radius: var(--radius-xs); padding: 7px 18px;
        font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
        transition: opacity var(--transition);
      }
      .km-btn-save:hover { opacity: 0.88; }
      .km-btn-cancel {
        background: var(--tag-bg); border: 1px solid var(--tag-border); color: var(--muted);
        border-radius: var(--radius-xs); padding: 7px 14px; font: inherit;
        font-size: 0.8rem; cursor: pointer;
        transition: color var(--transition), border-color var(--transition);
      }
      .km-btn-cancel:hover { color: var(--ink); border-color: var(--line-strong); }
      .km-form-err { font-size: 0.78rem; color: var(--red); padding: 4px 0; display: none; }
      .km-form-err.visible { display: block; }

      .km-tag-input {
        display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
        min-height: 38px;
        background: var(--surface); border: 1px solid var(--line-strong);
        border-radius: var(--radius-xs); padding: 6px 8px;
        transition: border-color var(--transition), box-shadow var(--transition);
      }
      .km-tag-input:focus-within {
        border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
      }
      .km-tag-chip {
        display: inline-flex; align-items: center; gap: 5px;
        border: 1px solid rgba(59, 130, 246,0.25);
        background: var(--accent-soft); color: var(--accent);
        border-radius: 999px; padding: 2px 8px;
        font-size: 0.72rem; font-weight: 600;
      }
      .km-tag-chip button {
        border: none; background: transparent; color: inherit;
        cursor: pointer; font-size: 0.72rem; line-height: 1;
        padding: 0;
      }
      .km-tag-entry {
        border: none; outline: none; background: transparent;
        color: var(--ink); font: inherit; font-size: 0.8rem;
        min-width: 120px; flex: 1;
      }
      .km-tag-entry::placeholder { color: var(--muted); }

      .km-bulk-panel {
        display: none;
        padding: 14px 16px;
        border-bottom: 1px solid var(--line);
        background: var(--sunken);
        flex-direction: column;
        gap: 10px;
      }
      .km-bulk-panel.visible { display: flex; }
      .km-bulk-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      /* Empty state */
      .km-empty-state {
        flex: 1; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 14px;
        color: var(--muted); text-align: center; padding: 40px;
      }
      .km-empty-state p { font-size: 0.9rem; color: var(--ink-secondary); margin: 0; font-weight: 600; }
      .km-empty-state span { font-size: 0.8rem; color: var(--muted); font-style: italic; }

      /* ── Notes inline chat ── */
      .km-chat {
        flex-shrink: 0;
        border-top: 1px solid var(--line);
        background: var(--surface);
        padding: 0;
        display: flex;
        flex-direction: column;
      }
      .km-chat-response {
        max-height: 260px;
        overflow-y: auto;
        padding: 0;
        overscroll-behavior-y: contain;
        scroll-behavior: smooth;
      }
      .km-chat-response:empty { display: none; }
      .km-chat-response .km-chat-bubble {
        padding: 12px 18px;
        font-size: 0.85rem;
        line-height: 1.6;
        color: var(--ink);
      }
      .km-chat-response .km-chat-bubble.user {
        background: var(--accent-soft);
        border-bottom: 1px solid var(--line);
        font-weight: 500;
        font-size: 0.8rem;
        color: var(--ink-secondary);
      }
      .km-chat-response .km-chat-bubble.assistant {
        background: transparent;
      }
      .km-chat-response .km-chat-meta {
        padding: 4px 18px 8px;
        font-size: 0.65rem;
        color: var(--muted);
        text-align: right;
      }
      .km-chat-input-area {
        background: var(--surface);
        border-top: 1px solid var(--line);
        padding: 8px 12px 8px;
      }
      .km-chat-input-row {
        display: flex;
        gap: 0;
        align-items: flex-end;
      }
      .km-chat-input-row textarea {
        flex: 1;
        border: 1px solid var(--line-strong);
        border-radius: 12px;
        padding: 10px 14px;
        font: inherit;
        font-size: 0.85rem;
        resize: none;
        min-height: 42px;
        max-height: 120px;
        line-height: 1.5;
        background: var(--bg);
        color: var(--ink);
        outline: none;
        transition: border-color var(--transition), box-shadow var(--transition);
      }
      .km-chat-input-row textarea:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-glow);
      }
      .km-chat-input-row textarea::placeholder { color: var(--muted); }
      .km-chat-input-row .send-btn {
        width: 38px; height: 38px; margin-left: 6px;
      }
      .km-chat-input-row .send-btn svg { width: 17px; height: 17px; }
      .km-chat-input-row .stop-btn {
        width: 38px; height: 38px; margin-left: 4px;
      }
      .km-chat-context-hint {
        font-size: 0.65rem;
        color: var(--muted);
        padding: 4px 4px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .km-chat-context-hint:empty { display: none; }

      .km-toast {
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 1200;
        padding: 9px 12px;
        border-radius: 10px;
        border: 1px solid var(--line-strong);
        background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft) 12%);
        color: var(--ink-secondary);
        font-size: 0.76rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
        transition: opacity 180ms ease, transform 180ms ease;
      }

      .km-toast.visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* Search results overlay */
      .km-search-results {
        display: none;
        flex-direction: column;
        gap: 0;
        overflow-y: auto;
        flex: 1;
        overscroll-behavior-y: contain;
      }
      .km-search-results.visible { display: flex; }
      .km-search-result-item {
        padding: 10px 14px;
        border-bottom: 1px solid var(--line);
        cursor: pointer;
        transition: background var(--transition);
      }
      .km-search-result-item:hover { background: rgba(255,255,255,0.04); }
      body[data-theme="light"] .km-search-result-item:hover { background: rgba(0,0,0,0.04); }
      .km-search-result-path { font-size: 0.68rem; font-family: 'SF Mono','Fira Code',monospace; color: var(--muted); margin-bottom: 3px; }
      .km-search-result-snippet { font-size: 0.78rem; color: var(--ink-secondary); line-height: 1.4; }
      .km-search-result-snippet mark { background: rgba(59, 130, 246,0.25); color: var(--ink); border-radius: 2px; padding: 0 2px; }

      /* Notes inline chat typing indicator */
      .km-chat-typing {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 2px;
      }
      .km-chat-typing span {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--muted);
        animation: km-typing-dot 1.2s ease-in-out infinite;
      }
      .km-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
      .km-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
      @keyframes km-typing-dot {
        0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
        40% { opacity: 1; transform: scale(1); }
      }

      /* Backlinks section */
      .km-backlinks {
        flex-shrink: 0; border-top: 1px solid var(--line);
        background: var(--sunken); padding: 12px 32px;
        max-height: 140px; overflow-y: auto;
      }
      .km-backlinks-title {
        font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.1em; color: var(--muted); margin-bottom: 8px;
      }
      .km-backlink-chip {
        display: inline-flex; align-items: center; gap: 4px;
        background: var(--tag-bg); border: 1px solid var(--tag-border);
        color: var(--ink-secondary); border-radius: var(--radius-xs);
        padding: 3px 10px; font-size: 0.74rem; cursor: pointer; margin: 3px 4px 3px 0;
        transition: all var(--transition); font: inherit; font-size: 0.74rem;
      }
      .km-backlink-chip:hover { color: var(--accent); border-color: rgba(59, 130, 246,0.3); background: var(--accent-soft); }

      /* Risk badge kept for tools */
      .km-risk-badge {
        display: inline-block; padding: 1px 8px; border-radius: 99px;
        font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.04em; margin-left: 6px;
      }
      .km-risk-low { background: var(--green-soft); color: var(--green); }
      .km-risk-high { background: var(--red-soft); color: var(--red); }

      /* Dot colors by rootTag */
      .gtag-dot-SOP { background: var(--amber); }
      .gtag-dot-SKILL { background: #f472b6; }
      .gtag-dot-AGENT { background: #d946ef; }
      .gtag-dot-GENERAL { background: var(--blue); }
      .gtag-dot-TODO { background: #06b6d4; }
      .gtag-dot-DECISION { background: #22c55e; }
      .gtag-dot-CHECKLIST { background: #f97316; }
      .gtag-dot-ARCHIVED { background: #78716c; }
      .gtag-dot-PERSON { background: #60a5fa; }
      .gtag-dot-COMPANY { background: #14b8a6; }

      /* ══ EDITOR LINK PICKER ══ */
      .km-editor-link-picker {
        display: none;
        position: absolute;
        bottom: 4px; left: 16px; right: 16px;
        z-index: 200;
        background: var(--surface);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-up);
        max-height: 220px;
        overflow-y: auto;
        scrollbar-gutter: stable;
      }
      .km-editor-link-picker.visible { display: block; }
      .km-elink-option {
        display: flex; align-items: center; justify-content: space-between;
        padding: 8px 14px; cursor: pointer; font-size: 0.82rem;
        border-bottom: 1px solid var(--line); gap: 8px;
        transition: background var(--transition);
      }
      .km-elink-option:last-child { border-bottom: none; }
      .km-elink-option:hover, .km-elink-option.active { background: var(--accent-soft); }
      .km-elink-title { color: var(--ink); font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .km-elink-badge {
        font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.06em; padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
      }
      .km-elink-badge-wikilink { background: var(--accent-soft); color: var(--accent); }
      .km-elink-badge-mention { background: var(--blue-soft); color: var(--blue); }
      .km-elink-tag-path { color: var(--muted); font-size: 0.66rem; font-family: 'SF Mono','Fira Code',monospace; flex-shrink: 0; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

      /* graph edge type chips */
      .km-wikilink-tag { background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.18); color: var(--blue); opacity: 0.75; font-style: italic; }
      .km-wikilink-frontmatter { background: rgba(52,211,153,0.1); border-color: rgba(52,211,153,0.2); color: var(--green); }

      /* rename inline form */
      .km-rename-form { display: none; flex: 1; align-items: center; gap: 6px; }
      .km-rename-form.visible { display: flex; }
      .km-rename-input {
        flex: 1; background: var(--sunken);
        border: 1px solid var(--accent); border-radius: var(--radius-xs);
        padding: 4px 10px; font: inherit; font-size: 0.8rem; color: var(--ink);
        outline: none; box-shadow: 0 0 0 3px var(--accent-glow);
      }

      /* ══ MOBILE HEADER ══ */
      /* NOTE: <body> already applies the four safe-area insets, so this
         element only needs its own visual padding. Re-adding safe-area
         here would double the inset on notched devices. */
      .mobile-header {
        display: none; align-items: center; gap: 12px;
        padding: 8px 12px;
        background: var(--sidebar-bg);
        border-bottom: 1px solid var(--sidebar-border);
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 30;
      }
      .mobile-menu-btn {
        background: none; border: none; color: var(--ink);
        padding: 10px; cursor: pointer; border-radius: var(--radius-xs);
        display: flex; align-items: center; justify-content: center;
        min-width: 44px; min-height: 44px;
        transition: background var(--transition);
        -webkit-tap-highlight-color: transparent;
      }
      .mobile-menu-btn:hover { background: rgba(255,255,255,0.06); }
      body[data-theme="light"] .mobile-menu-btn:hover { background: rgba(0,0,0,0.06); }
      .mobile-header-title { font-weight: 700; font-size: 1rem; color: var(--ink); }
      .sidebar-backdrop {
        display: none; position: fixed; inset: 0;
        background: rgba(0,0,0,0.5); z-index: 90;
        backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
        touch-action: none;
      }
      .sidebar-backdrop.visible { display: block; }

      /* ══ MOBILE BOTTOM TAB BAR (Apple HIG UITabBar) ══ */
      /* Hidden by default; revealed inside the mobile media query.
         Uses the bottom safe-area inset itself so it sits flush with
         the home-indicator on devices that have one. */
      .mobile-tabbar {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 80;
        padding: 6px max(10px, var(--safe-left)) max(6px, var(--safe-bottom)) max(10px, var(--safe-right));
        background: color-mix(in srgb, var(--sidebar-bg) 92%, transparent);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        border-top: 1px solid var(--sidebar-border);
        align-items: stretch;
        justify-content: space-around;
        gap: 2px;
      }
      .mtab {
        flex: 1 1 0;
        min-width: 0;
        min-height: 49px; /* Apple HIG tab bar standard */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 4px 2px;
        background: none;
        border: none;
        color: var(--muted);
        font: inherit;
        font-size: 0.62rem;
        font-weight: 500;
        letter-spacing: 0.01em;
        cursor: pointer;
        border-radius: 10px;
        -webkit-tap-highlight-color: transparent;
        transition: color var(--transition);
      }
      .mtab svg {
        width: 24px;
        height: 24px;
        stroke-width: 1.8;
      }
      .mtab.active {
        color: var(--accent);
      }
      .mtab.active svg {
        stroke-width: 2.2;
      }
      .mtab-label {
        font-size: 0.62rem;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }

      /* ══ RESPONSIVE ══ */
      @media (max-width: 1100px) {
        .shell { grid-template-columns: 1fr; }
      }
      @media (max-width: 768px) {
        .mobile-header { display: flex; }
        /* Fixed-position sidebar bypasses <body>'s safe-area padding,
           so it has to handle the notch and home indicator itself. */
        .sidebar {
          position: fixed;
          top: var(--safe-top);
          left: 0;
          bottom: 0;
          max-height: calc(var(--app-vh) - var(--safe-top));
          padding-top: 0;
          padding-right: 14px;
          padding-bottom: max(20px, calc(var(--safe-bottom) + 12px));
          padding-left: max(14px, var(--safe-left));
          transform: translateX(-100%);
          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          z-index: 100; box-shadow: none;
        }
        .sidebar .sidebar-brand {
          padding-top: 26px;
          padding-right: 22px;
          padding-bottom: 20px;
          padding-left: calc(8px + max(14px, var(--safe-left)));
          margin-left: calc(-1 * max(14px, var(--safe-left)));
          margin-right: -14px;
        }
        .sidebar.mobile-open {
          transform: translateX(0);
          box-shadow: 4px 0 24px rgba(0,0,0,0.4);
        }
        .sidebar.sidebar-collapsed {
          width: var(--sidebar-width);
          padding-top: 0;
          padding-right: 14px;
          padding-bottom: max(20px, calc(var(--safe-bottom) + 12px));
          padding-left: max(14px, var(--safe-left));
        }
        .sidebar.sidebar-collapsed .sidebar-brand {
          align-items: stretch;
          padding-top: 26px;
          padding-right: 22px;
          padding-bottom: 20px;
          padding-left: calc(8px + max(14px, var(--safe-left)));
          margin-left: calc(-1 * max(14px, var(--safe-left)));
          margin-right: -14px;
        }
        .sidebar.sidebar-collapsed .sidebar-brand-row {
          width: auto;
          justify-content: space-between;
          position: static;
        }
        .sidebar.sidebar-collapsed .sidebar-collapse-btn {
          position: static;
        }
        .sidebar.sidebar-collapsed .sidebar-collapse-btn svg {
          transform: none;
        }
        .sidebar.sidebar-collapsed .sidebar-brand-text {
          text-align: left;
          font-size: 1.1rem;
        }
        .sidebar.sidebar-collapsed .sidebar-brand-suffix,
        .sidebar.sidebar-collapsed .sidebar-brand-sub,
        .sidebar.sidebar-collapsed .sidebar-divider,
        .sidebar.sidebar-collapsed .sidebar-section,
        .sidebar.sidebar-collapsed .sidebar-spacer,
        .sidebar.sidebar-collapsed .sidebar-metrics,
        .sidebar.sidebar-collapsed #tenantUsageSection,
        .sidebar.sidebar-collapsed .sidebar-theme-btn,
        .sidebar.sidebar-collapsed .sidebar-legal {
          display: initial !important;
        }
        .sidebar.sidebar-collapsed .sidebar-nav {
          align-items: stretch;
          gap: 2px;
          margin-bottom: 16px;
        }
        .sidebar.sidebar-collapsed .sidebar-nav-item {
          justify-content: flex-start;
          gap: 11px;
          padding: 12px 12px;
        }
        .sidebar.sidebar-collapsed .sidebar-nav-label {
          display: inline;
        }
        .sidebar.sidebar-collapsed .sidebar-nav-item.active::before {
          left: 0;
          top: 6px;
          bottom: 6px;
          width: 3px;
          height: auto;
          transform: none;
          border-radius: 0 3px 3px 0;
        }
        body { flex-direction: column; }
        .workspace { min-height: 0; }
        /* <body> already pads the safe-area insets; .shell only needs
           its own visual padding to avoid double-insetting content. */
        .shell {
          padding: 12px 16px;
          gap: 12px;
          overscroll-behavior-y: contain;
        }
        .msg { max-width: 92%; }
        /* Defensive: nothing inside a chat message may exceed its container.
           Long URLs, code blocks, wide tables, and oversized images would
           otherwise push the page wider than the viewport on mobile,
           forcing the user to pinch-zoom out after every reply. */
        .msg, .msg-markdown { min-width: 0; max-width: 100%; }
        .msg-markdown { overflow-wrap: anywhere; word-break: break-word; }
        .msg-markdown pre {
          max-width: 100%;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
        }
        .msg-markdown pre code {
          white-space: pre;
          word-break: normal;
          overflow-wrap: normal;
        }
        .msg-markdown :not(pre) > code { overflow-wrap: anywhere; word-break: break-word; }
        .msg-markdown img { max-width: 100%; height: auto; }
        .msg-markdown a { overflow-wrap: anywhere; word-break: break-word; }
        /* Tables that don't fit get a horizontal scroll *inside* the message
           rather than stretching the whole page. */
        .msg-markdown table {
          display: block;
          width: 100%;
          max-width: 100%;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          white-space: nowrap;
        }
        /* Final safety net so an unexpected wide child can never widen the
           viewport. The chat history scrolls vertically, never horizontally. */
        .chat-history, .chat-col { max-width: 100%; min-width: 0; overflow-x: hidden; }
        .input-row textarea { min-height: 44px; }
        .input-area { padding-bottom: 4px; }
        .sidebar-nav-item { padding: 12px 12px; min-height: 44px; }

        /* Sidebar touch targets */
        .sidebar-select { min-height: 44px; padding: 10px 28px 10px 12px; font-size: 0.82rem; }
        .sidebar-btn { min-height: 44px; font-size: 0.78rem; }

        .input-row { flex-wrap: wrap; }
        .composer-options-drawer {
          display: none;
          width: 100%;
          order: -1;
          padding: 8px 12px;
          border-bottom: 1px solid var(--line);
          background: var(--sunken);
          gap: 12px;
          align-items: center;
        }
        .input-area.options-expanded .composer-options-drawer {
          display: flex;
        }
        .composer-expand-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          background: transparent;
          border: 1px solid var(--tag-border);
          color: var(--muted);
          border-radius: var(--radius-xs);
          width: 44px;
          height: 44px;
          margin: 2px;
          cursor: pointer;
          flex-shrink: 0;
          transition: all var(--transition);
        }
        .composer-expand-btn:hover,
        .composer-expand-btn.active {
          background: var(--accent-soft);
          color: var(--accent);
          border-color: rgba(59, 130, 246, 0.28);
        }
        .composer-expand-btn svg {
          width: 18px;
          height: 18px;
          fill: currentColor;
        }

        .composer-attach-btn,
        .composer-copy-btn,
        .composer-model-select,
        .send-btn,
        .stop-btn {
          width: 44px;
          height: 44px;
          margin-top: 2px;
          margin-bottom: 2px;
        }
        .composer-model-select {
          width: auto;
          min-width: 132px;
          max-width: 44%;
          padding-right: 26px;
        }
        .composer-options-drawer .composer-model-select {
          flex: 1;
          min-width: 140px;
          max-width: 240px;
          margin: 0;
        }
        .composer-options-drawer .composer-attach-btn,
        .composer-options-drawer .composer-copy-btn {
          margin: 0;
        }

        /* Knowledge panel: stack sidebar above editor.
           The notes list (sidebar) is the primary view on mobile — let it
           take all available height. The editor pane only takes space when
           a note is actually loaded (its body is display:none until then). */
        .km-col { flex-direction: column; height: 100%; min-height: 0; }
        .km-sidebar {
          width: 100%;
          max-height: none;
          flex: 1 1 auto;
          min-height: 0;
          border-right: none; border-bottom: 1px solid var(--sidebar-border);
        }
        .km-editor-pane { min-height: 0; flex: 0 1 auto; }
        /* Once a note is open the editor body becomes visible — give it
           real estate by promoting it to a flex peer. */
        .km-col:has(.km-editor-body:not([style*="display:none"])) .km-sidebar {
          flex: 1 1 40%;
        }
        .km-col:has(.km-editor-body:not([style*="display:none"])) .km-editor-pane {
          flex: 1 1 60%;
        }
        .km-preview-body { padding: 16px; }
        .km-editor-textarea { padding: 16px; }
        .km-col.km-sidebar-collapsed .km-sidebar {
          width: 100%;
          max-height: none;
          flex: 0 0 auto;
        }
        .km-col.km-sidebar-collapsed .km-sidebar-header {
          padding: 10px 12px;
        }
        .km-col.km-sidebar-collapsed .km-sidebar-headline {
          justify-content: flex-start;
        }
        .km-col.km-sidebar-collapsed .km-sidebar-search,
        .km-col.km-sidebar-collapsed .km-sidebar-filter-row,
        .km-col.km-sidebar-collapsed .km-search-results,
        .km-col.km-sidebar-collapsed .km-tree,
        .km-col.km-sidebar-collapsed .km-sidebar-actions {
          display: initial !important;
        }
        .km-col.km-sidebar-collapsed .km-tree {
          display: block !important;
          overflow-y: auto;
          min-height: 0;
        }
        .km-sidebar-search { min-height: 44px; font-size: 0.85rem; }
        .km-sidebar-filter-select { min-height: 40px; font-size: 0.82rem; }
        /* Compact action row so it doesn't crowd out the tree */
        .km-sidebar-actions {
          flex-direction: row;
          flex-wrap: wrap;
          gap: 6px;
          padding: 8px 10px;
          border-top: 1px solid var(--line);
        }
        .km-sidebar-actions > * { flex: 1 1 auto; }
        .km-action-group {
          margin: 0;
          width: 100%;
          gap: 6px;
        }
        .km-bulk-tags-btn,
        .km-add-fab,
        .km-task-view-btn { min-height: 40px; font-size: 0.76rem; }
        .km-gantt-table { grid-template-columns: 220px minmax(640px, 1fr); }

        /* ── Compact filters on mobile ── */
        .km-sidebar-header {
          padding: 8px 10px 6px;
          gap: 6px;
        }
        .km-sidebar-search {
          min-height: 36px;
          padding: 6px 12px;
          font-size: 0.82rem;
          border-radius: 8px;
        }
        .km-sidebar-filter-row {
          margin: 0;
          padding: 0;
        }
        .km-sidebar-filter-select {
          min-height: 32px;
          padding: 4px 26px 4px 10px;
          font-size: 0.74rem;
          border-radius: 8px;
        }

        /* ── Editor back button: visible on mobile only ── */
        .km-editor-back-btn { display: inline-flex; }
        /* When user taps "Notes" back-chevron the editor pane collapses
           so the file tree fills the screen again. The note state is
           preserved; tapping any tree row reopens the editor. */
        .km-col.km-mobile-list-view .km-editor-pane { display: none !important; }
        .km-col.km-mobile-list-view .km-sidebar { flex: 1 1 auto !important; }
        /* Override the :has() rule that splits the panes when a note is open */
        .km-col.km-mobile-list-view:has(.km-editor-body:not([style*="display:none"])) .km-sidebar {
          flex: 1 1 auto !important;
        }

        /* ── Full-screen editor overlay (note / task open on mobile) ──
           When an editor body is showing AND the user has not collapsed
           back to the list, lift the editor pane above everything: it
           covers the file tree, the mobile header, and the bottom tab
           bar so the body of the note/task owns the entire viewport. */
        .km-col:has(.km-editor-body:not([style*="display:none"])):not(.km-mobile-list-view) .km-editor-pane {
          position: fixed;
          inset: 0;
          padding-top: var(--safe-top);
          padding-bottom: var(--safe-bottom);
          padding-left: var(--safe-left);
          padding-right: var(--safe-right);
          background: var(--bg);
          z-index: 200;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
        }
        /* Hide the bottom tab bar and the brand header behind the overlay
           so the user has a single clear "Back" affordance to dismiss. */
        body:has(.shell[data-view="knowledge"] .km-col:has(.km-editor-body:not([style*="display:none"])):not(.km-mobile-list-view)) .mobile-tabbar,
        body:has(.shell[data-view="knowledge"] .km-col:has(.km-editor-body:not([style*="display:none"])):not(.km-mobile-list-view)) .mobile-header {
          display: none !important;
        }
        body:has(.shell[data-view="knowledge"] .km-col:has(.km-editor-body:not([style*="display:none"])):not(.km-mobile-list-view)) .workspace {
          padding-bottom: 0;
        }

        /* ── De-emphasize metadata in the mobile editor ──
           Tags, classifier "Related Notes" picker, and backlinks are
           desktop power-features. On a phone the body of the note must
           own the screen. Hide them by default; users can edit metadata
           on tablet+ where there is real estate. */
        .km-col:has(.km-editor-body:not([style*="display:none"])):not(.km-mobile-list-view) .km-meta-bar,
        .km-col:has(.km-editor-body:not([style*="display:none"])):not(.km-mobile-list-view) .km-classifier-panel,
        .km-col:has(.km-editor-body:not([style*="display:none"])):not(.km-mobile-list-view) .km-backlinks {
          display: none !important;
        }

        /* Knowledge editor toolbar: wrap buttons */
        .km-editor-toolbar { flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
        /* Inside the full-screen editor overlay, make the toolbar an
           iOS-style sticky nav bar pinned to the top edge. */
        .km-col:has(.km-editor-body:not([style*="display:none"])):not(.km-mobile-list-view) .km-editor-toolbar {
          position: sticky;
          top: 0;
          z-index: 1;
          background: var(--surface);
          border-bottom: 1px solid var(--line);
        }
        .km-editor-path { width: 100%; flex: none; }
        .km-editor-mode-btn,
        .km-editor-action-btn,
        .km-editor-save-btn,
        .km-editor-delete-btn { min-height: 36px; padding: 6px 12px; }
        .km-rename-form { width: 100%; flex: none; flex-wrap: wrap; }
        .km-rename-input { flex: 1; min-width: 0; }

        /* New file form: stack title and type */
        .km-new-form > div:first-child { flex-direction: column; }
        .km-new-form .km-input,
        .km-new-form .km-select { min-height: 44px; }
        .km-meta-bar { padding: 6px 12px 0; }
        .km-classifier-panel { margin: 8px 12px 0; }

        /* Todo board: scroll hint */
        .km-board-columns {
          grid-template-columns: none;
          grid-auto-flow: column;
          grid-auto-columns: minmax(84vw, 84vw);
          overflow-x: auto;
          overflow-y: hidden;
          scroll-snap-type: x mandatory;
          -webkit-overflow-scrolling: touch;
          padding-bottom: 8px;
        }
        .km-board-col {
          scroll-snap-align: start;
          min-height: min(62vh, 520px);
        }
        .km-board-toolbar { flex-wrap: wrap; gap: 8px; }

        /* Mention picker wider on mobile */
        .mention-picker { left: 4px; right: 4px; }

        /* Canvas mobile */
        .cv-toolbar { flex-wrap: wrap; gap: 6px; }
        .cv-toolbar-btn { min-height: 36px; }

        /* Changelog mobile */
        .cl-col { padding: 12px 8px 30px; }

        /* ── Apple HIG bottom tab bar — show on mobile ── */
        .mobile-tabbar { display: flex; }
        /* Reserve space above the tab bar so content isn't hidden under it.
           <body> already pads the bottom safe-area; the tab bar sits in
           that zone, so we need extra padding to push content up. */
        body { padding-bottom: 0; }
        .workspace { padding-bottom: calc(62px + var(--safe-bottom)); }

        /* ── Mobile header: large-title style (Apple HIG) ── */
        .mobile-header-title {
          font-size: 1.05rem;
          font-weight: 600;
          letter-spacing: -0.01em;
        }

        /* ── Hide "nice-to-have" features on mobile to keep it minimal
              and fully functional. Heavy / advanced surfaces stay
              available on tablet+ where there is real estate. ── */

        /* Sidebar primary nav becomes redundant — bottom tab bar is the
           primary nav. Sidebar drawer is now a Settings/More surface. */
        .sidebar-nav,
        .sidebar-divider { display: none; }

        /* Heavy in-sidebar metrics & tenant usage: drop on mobile */
        .sidebar-metrics,
        #tenantUsageSection { display: none; }

        /* Notes panel nice-to-haves */
        #kmViewSettingsBtn,
        .km-bulk-tags-btn { display: none !important; }

        /* Tasks: mobile only shows the Kanban board — hide the
           Kanban/Gantt toggle to save vertical space. The board is the
           default render so no JS change is needed. */
        #kmTaskViewToggle { display: none !important; }

        /* Tasks on mobile: skip the Kanban / Gantt surfaces entirely. The
           sidebar tree (already filtered by status) becomes the task list,
           matching the Notes pattern. JS forces editor view on mobile. */
        #kmBoardPane,
        #kmGanttPane { display: none !important; }

        /* The sidebar headline collapse button is desktop-only */
        #kmSidebarCollapseBtn { display: none; }

        /* Roadmap / Graph / Changes / Canvas are advanced views — keep
           them reachable from "More" but de-prioritize their chrome */

        /* Compact alpha banner: kill the verbose mute button in tight
           layouts; close (×) is enough. */
        .alpha-banner-mute { display: none; }

        /* Hamburger now opens settings drawer (we still keep it for
           one-handed reach), but the More tab is the primary affordance. */
      }

      @media (max-width: 540px) {
        .mobile-header-title {
          font-size: 0.92rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: calc(100vw - 90px - var(--safe-left) - var(--safe-right));
        }
        .input-row {
          flex-wrap: wrap;
          align-items: stretch;
          gap: 6px;
        }
        .input-row textarea {
          width: 100%;
        }
        .composer-model-select {
          order: 2;
          flex: 1 1 170px;
          max-width: 100%;
          margin: 0;
        }
        .composer-attach-btn,
        .composer-copy-btn,
        .send-btn,
        .stop-btn {
          margin: 0;
        }
        .stop-btn {
          margin-left: auto;
        }
        .km-scan-overlay {
          align-items: stretch;
          padding: 10px;
        }
        .km-scan-dialog {
          width: 100%;
          max-height: calc(var(--app-vh) - 20px);
        }
        .km-scan-actions {
          grid-template-columns: 1fr;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          scroll-behavior: auto !important;
        }
      }

      /* ══ NOTE TYPE CHANGE ══ */
      .km-type-select {
        border: 1px solid var(--tag-border);
        background: var(--tag-bg);
        color: var(--ink-secondary);
        border-radius: 99px;
        padding: 3px 10px;
        font: inherit;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        cursor: pointer;
        transition: all var(--transition);
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%236c6c8a'%3E%3Cpath d='M1 3l4 4 4-4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
        padding-right: 22px;
      }
      .km-type-select:hover {
        border-color: var(--accent);
        color: var(--ink);
      }
      .km-type-select:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-glow);
      }
      .km-type-select option {
        background: var(--surface);
        color: var(--ink);
        text-transform: none;
      }

      /* ══ SIDEBAR DRAG/DROP FOR NOTE TYPE CHANGE ══ */
      .km-tree-group.drag-target {
        border: 2px dashed var(--accent);
        border-radius: var(--radius-sm);
        background: var(--accent-soft);
      }
      .km-tree-item[draggable="true"] {
        cursor: grab;
      }
      .km-tree-item[draggable="true"]:active {
        cursor: grabbing;
      }
      .km-tree-item.dragging {
        opacity: 0.4;
      }

      /* -- Task setup modal (post-create prompt for dates / reminder / objectives) -- */
      .km-task-setup-dialog {
        max-width: 560px;
      }
      .km-task-setup-section {
        margin-bottom: 18px;
      }
      .km-task-setup-section:last-of-type {
        margin-bottom: 4px;
      }
      .km-task-setup-label {
        display: block;
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--ink-secondary);
        margin-bottom: 8px;
      }
      .km-task-setup-hint {
        text-transform: none;
        letter-spacing: 0;
        font-weight: 500;
        font-size: 0.78rem;
        color: var(--ink-tertiary, var(--ink-secondary));
        opacity: 0.85;
        margin-left: 4px;
      }
      .km-task-setup-row {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
      }
      .km-task-setup-reminder {
        width: 100%;
        max-width: 320px;
      }
      .km-task-setup-objectives {
        width: 100%;
        min-height: 110px;
        resize: vertical;
        padding: 10px 12px;
        border: 1px solid var(--tag-border);
        border-radius: 8px;
        background: var(--surface);
        color: var(--ink);
        font: inherit;
        line-height: 1.4;
      }
      .km-task-setup-counter {
        margin-top: 6px;
        font-size: 0.78rem;
        color: var(--ink-secondary);
        opacity: 0.8;
      }
      .km-task-setup-error {
        color: var(--danger, #ef4444);
        font-size: 0.85rem;
        margin-top: 4px;
      }

      /* -- Task duplicate-check modal (pre-create similarity warning) -- */
      .km-task-dup-dialog {
        max-width: 640px;
      }
      .km-task-dup-intro {
        font-size: 0.92rem;
        color: var(--ink-secondary);
        margin-bottom: 12px;
        line-height: 1.45;
      }
      .km-task-dup-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: 320px;
        overflow-y: auto;
      }
      .km-task-dup-item {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 12px;
        border: 1px solid var(--tag-border);
        border-radius: 10px;
        background: var(--tag-bg);
      }
      .km-task-dup-item-main {
        flex: 1 1 auto;
        min-width: 0;
      }
      .km-task-dup-item-title {
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 4px;
        word-break: break-word;
      }
      .km-task-dup-item-meta {
        font-size: 0.8rem;
        color: var(--ink-secondary);
        opacity: 0.85;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .km-task-dup-item-meta .km-task-dup-status {
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.04em;
        font-size: 0.7rem;
        padding: 2px 8px;
        border-radius: 999px;
        background: var(--surface);
        border: 1px solid var(--tag-border);
        color: var(--ink);
      }
      .km-task-dup-item-meta .km-task-dup-score {
        font-variant-numeric: tabular-nums;
      }
      .km-task-dup-item-actions {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
      }
      .km-task-dup-open-btn {
        font: inherit;
        font-size: 0.82rem;
        padding: 6px 10px;
        border-radius: 8px;
        border: 1px solid var(--tag-border);
        background: var(--surface);
        color: var(--ink);
        cursor: pointer;
      }
      .km-task-dup-open-btn:hover {
        border-color: var(--accent, #7c5cfc);
      }

      /* ══ EDITOR ACTIONS DROPDOWN ══ */
      .km-dropdown {
        position: relative;
        display: inline-block;
      }
      .km-actions-trigger {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--tag-bg);
        border: 1px solid var(--tag-border);
        color: var(--muted);
        font-weight: 600;
        cursor: pointer;
        padding: 4px 12px;
        border-radius: var(--radius-xs);
        transition: all var(--transition);
      }
      .km-actions-trigger:hover,
      .km-actions-trigger[aria-expanded="true"] {
        color: var(--ink);
        border-color: var(--line-strong);
        background: var(--surface);
      }
      .km-dropdown-chevron {
        font-size: 0.65rem;
        opacity: 0.7;
      }
      .km-dropdown-menu {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        min-width: 180px;
        background: var(--surface);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-sm);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
        padding: 6px;
        z-index: 100;
        animation: kmDropdownFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
        display: none;
      }
      body[data-theme="light"] .km-dropdown-menu {
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
      }
      @keyframes kmDropdownFadeIn {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: translateY(0); }
      }
      .km-dropdown-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 7px 10px;
        border: none;
        background: transparent;
        color: var(--ink-secondary);
        font: inherit;
        font-size: 0.76rem;
        text-align: left;
        border-radius: var(--radius-xs);
        cursor: pointer;
        transition: all var(--transition);
      }
      .km-dropdown-item:hover {
        background: var(--tag-bg);
        color: var(--ink);
      }
      .km-dropdown-item-icon {
        font-size: 0.88rem;
        opacity: 0.8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
      }
      .km-dropdown-item-danger {
        color: var(--red);
      }
      .km-dropdown-item-danger:hover {
        background: var(--red-soft);
        color: var(--red);
      }
      .km-dropdown-divider {
        height: 1px;
        background: var(--line);
        margin: 4px 6px;
      }