/* ════════════════════════════════════════════════════════════════════════
   TIME TRAVEL CSS v1.0 — agent-timetravel.css
   Feature 12: ⏱ Time-Travel Debugging & Branching — AlphaVault AI
   ════════════════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ───────────────────────────────────────────────── */
:root {
    --att-primary     : #6366f1;
    --att-primary-bg  : rgba(99,102,241,.10);
    --att-border      : var(--mcp-border,    #e2e8f0);
    --att-surface     : var(--mcp-surface,   #ffffff);
    --att-bg-2        : var(--mcp-bg-2,      #f8fafc);
    --att-text        : var(--mcp-text,      #1e293b);
    --att-muted       : var(--mcp-text-muted,#64748b);
    --att-font        : var(--mcp-font,      'Inter', -apple-system, sans-serif);
    --att-mono        : 'JetBrains Mono', 'Fira Code', monospace;
    --att-radius      : 12px;
    --att-transition  : all .16s ease;

    /* Step type colors */
    --att-c-start     : #64748b;
    --att-c-reasoning : #6366f1;
    --att-c-tool      : #f59e0b;
    --att-c-result    : #10b981;
    --att-c-output    : #8b5cf6;
    --att-c-error     : #ef4444;
    --att-c-branch    : #06b6d4;
}

@keyframes att-fade-in  { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@keyframes att-slide-in { from{transform:translateX(40px);opacity:0} to{transform:none;opacity:1} }
@keyframes att-pulse-dot{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.6} }
@keyframes att-spin     { to{transform:rotate(360deg)} }

/* ═══════════════════════════════════════════════════════════════════════════
   TRIGGER BUTTON (inside abReActBar)
═══════════════════════════════════════════════════════════════════════════ */

.att-trigger-btn {
    display      : flex;
    align-items  : center;
    gap          : 6px;
    padding      : 5px 12px;
    border-radius: 8px;
    border       : 1.5px solid rgba(99,102,241,.25);
    background   : rgba(99,102,241,.08);
    color        : #6366f1;
    font-size    : 11px;
    font-weight  : 800;
    cursor       : pointer;
    font-family  : var(--att-font);
    transition   : var(--att-transition);
    position     : relative;
    margin-left  : auto;
}

.att-trigger-btn:hover {
    background   : rgba(99,102,241,.15);
    border-color : rgba(99,102,241,.5);
}

.att-trigger-badge {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 18px;
    height         : 18px;
    border-radius  : 50%;
    background     : #6366f1;
    color          : white;
    font-size      : 9px;
    font-weight    : 900;
    flex-shrink    : 0;
}

.att-trigger-badge.att-hidden { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   PANEL OVERLAY
═══════════════════════════════════════════════════════════════════════════ */

.att-overlay {
    position       : fixed;
    inset          : 0;
    z-index        : 14000;
    background     : rgba(0,0,0,.52);
    backdrop-filter: blur(5px);
    display        : flex;
    justify-content: flex-end;
    opacity        : 0;
    pointer-events : none;
    transition     : opacity .22s ease;
}

.att-overlay.att-open {
    opacity       : 1;
    pointer-events: auto;
}

/* ── Panel ───────────────────────────────────────────────────────────────── */
.att-panel {
    width         : 100%;
    max-width     : 640px;
    height        : 100%;
    background    : var(--att-surface);
    display       : flex;
    flex-direction: column;
    box-shadow    : -12px 0 48px rgba(0,0,0,.2);
    transform     : translateX(40px);
    transition    : transform .22s ease;
    overflow      : hidden;
    font-family   : var(--att-font);
}

.att-overlay.att-open .att-panel { transform: translateX(0); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.att-header {
    display      : flex;
    align-items  : center;
    gap          : 12px;
    padding      : 15px 20px;
    border-bottom: 1px solid var(--att-border);
    background   : linear-gradient(135deg, rgba(99,102,241,.07), rgba(118,75,162,.04));
    flex-shrink  : 0;
    flex-wrap    : wrap;
}

.att-header-icon {
    width          : 40px;
    height         : 40px;
    border-radius  : 12px;
    background     : linear-gradient(135deg, #667eea, #764ba2);
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : white;
    font-size      : 16px;
    flex-shrink    : 0;
}

.att-header-title {
    font-size  : 15px;
    font-weight: 800;
    color      : var(--att-text);
}

.att-header-sub {
    font-size: 11px;
    color    : var(--att-muted);
}

.att-header-actions {
    display    : flex;
    align-items: center;
    gap        : 6px;
    margin-left: auto;
    flex-wrap  : wrap;
}

.att-tab-btn {
    display      : flex;
    align-items  : center;
    gap          : 5px;
    padding      : 5px 11px;
    border-radius: 8px;
    border       : 1.5px solid var(--att-border);
    background   : var(--att-bg-2);
    color        : var(--att-muted);
    font-size    : 11px;
    font-weight  : 700;
    cursor       : pointer;
    font-family  : var(--att-font);
    transition   : var(--att-transition);
    white-space  : nowrap;
}

.att-tab-btn:hover:not(:disabled) { border-color: #6366f1; color: #6366f1; }
.att-tab-btn.active {
    background  : rgba(99,102,241,.1);
    border-color: #6366f1;
    color       : #6366f1;
}
.att-tab-btn:disabled { opacity: .4; cursor: not-allowed; }

.att-header-close {
    background   : none;
    border       : none;
    cursor       : pointer;
    color        : var(--att-muted);
    font-size    : 16px;
    padding      : 5px;
    border-radius: 8px;
    transition   : var(--att-transition);
}
.att-header-close:hover { color: var(--att-text); background: var(--att-bg-2); }

/* ── Scrollable Body ─────────────────────────────────────────────────────── */
.att-body {
    flex      : 1;
    overflow-y: auto;
    display   : flex;
    flex-direction: column;
    gap       : 0;
}

/* ── Session Badge ───────────────────────────────────────────────────────── */
.att-session-badge {
    display    : flex;
    align-items: center;
    gap        : 7px;
    padding    : 9px 18px;
    background : linear-gradient(135deg, rgba(99,102,241,.05), rgba(139,92,246,.03));
    border-bottom: 1px solid var(--att-border);
    font-size  : 11px;
    font-weight: 700;
    color      : var(--att-muted);
    font-family: var(--att-mono);
    flex-shrink: 0;
}

.att-session-dot {
    width        : 6px;
    height       : 6px;
    border-radius: 50%;
    background   : #10b981;
    animation    : att-pulse-dot 2s ease infinite;
}

.att-session-started { opacity: .7; }

/* ── Section Headers ─────────────────────────────────────────────────────── */
.att-section-title {
    display    : flex;
    align-items: center;
    gap        : 7px;
    padding    : 12px 18px 6px;
    font-size  : 11px;
    font-weight: 800;
    color      : var(--att-muted);
    text-transform: uppercase;
    letter-spacing: .6px;
}

.att-step-count-badge {
    font-size    : 11px;
    font-weight  : 700;
    background   : rgba(99,102,241,.1);
    color        : #6366f1;
    padding      : 1px 8px;
    border-radius: 20px;
    margin-left  : 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIMELINE SCRUBBER
═══════════════════════════════════════════════════════════════════════════ */

.att-timeline-section {
    flex-shrink: 0;
    border-bottom: 1px solid var(--att-border);
    padding-bottom: 14px;
}

.att-timeline-scroll {
    overflow-x  : auto;
    padding     : 8px 18px 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(99,102,241,.2) transparent;
}

.att-timeline-scroll::-webkit-scrollbar { height: 4px; }
.att-timeline-scroll::-webkit-scrollbar-thumb { background: rgba(99,102,241,.2); border-radius: 4px; }

.att-timeline-track {
    display    : flex;
    align-items: center;
    min-width  : max-content;
    padding    : 8px 0;
}

/* ── Step Node ───────────────────────────────────────────────────────────── */
.att-step-wrap {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 4px;
    flex-shrink   : 0;
}

.att-step-node {
    width          : 32px;
    height         : 32px;
    border-radius  : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 12px;
    cursor         : pointer;
    border         : 2.5px solid transparent;
    transition     : var(--att-transition);
    position       : relative;
    background     : var(--step-bg, rgba(99,102,241,.12));
    color          : var(--step-color, #6366f1);
    flex-shrink    : 0;
}

.att-step-node:hover {
    transform  : scale(1.18);
    box-shadow : 0 0 0 4px var(--step-bg, rgba(99,102,241,.12));
}

.att-step-node.att-selected {
    border-color : var(--step-color, #6366f1);
    box-shadow   : 0 0 0 5px rgba(99,102,241,.18);
    transform    : scale(1.12);
}

.att-step-node.att-current {
    border-color : var(--step-color, #6366f1);
    animation    : att-pulse-current 2s ease infinite;
}

@keyframes att-pulse-current {
    0%,100% { box-shadow: 0 0 0 0 rgba(99,102,241,.35); }
    50%      { box-shadow: 0 0 0 7px rgba(99,102,241,.0); }
}

/* Step type color overrides */
.att-step-node.start       { --step-color: #64748b; --step-bg: rgba(100,116,139,.12); }
.att-step-node.reasoning   { --step-color: #6366f1; --step-bg: rgba(99,102,241,.12); }
.att-step-node.tool_call   { --step-color: #f59e0b; --step-bg: rgba(245,158,11,.12); }
.att-step-node.tool_result { --step-color: #10b981; --step-bg: rgba(16,185,129,.12); }
.att-step-node.output      { --step-color: #8b5cf6; --step-bg: rgba(139,92,246,.12); }
.att-step-node.error       { --step-color: #ef4444; --step-bg: rgba(239,68,68,.12); }
.att-step-node.branch_pt   { --step-color: #06b6d4; --step-bg: rgba(6,182,212,.12); }

.att-step-label {
    font-size  : 9px;
    font-weight: 700;
    color      : var(--att-muted);
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
}

.att-step-sublabel {
    font-size  : 8px;
    color      : var(--att-muted);
    opacity    : .7;
    white-space: nowrap;
    font-family: var(--att-mono);
}

/* ── Connector lines ─────────────────────────────────────────────────────── */
.att-connector {
    width     : 28px;
    height    : 2px;
    background: var(--att-border);
    flex-shrink: 0;
    margin-bottom: 20px;
}

.att-connector.att-conn-error { background: rgba(239,68,68,.35); }

/* ═══════════════════════════════════════════════════════════════════════════
   INSPECTOR
═══════════════════════════════════════════════════════════════════════════ */

.att-inspector {
    flex      : 1;
    padding   : 16px 18px;
    border-bottom: 1px solid var(--att-border);
    animation : att-fade-in .2s ease;
    overflow-y: auto;
    max-height: 340px;
}

.att-inspector-empty {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : 10px;
    min-height      : 160px;
    color           : var(--att-muted);
    font-size       : 13px;
    text-align      : center;
}

.att-inspector-empty i { font-size: 28px; opacity: .3; }

.att-inspector-header {
    display      : flex;
    align-items  : center;
    gap          : 12px;
    margin-bottom: 14px;
}

.att-inspector-icon {
    width          : 40px;
    height         : 40px;
    border-radius  : 12px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 16px;
    flex-shrink    : 0;
}

.att-inspector-title {
    font-size  : 15px;
    font-weight: 800;
    color      : var(--att-text);
    display    : flex;
    align-items: center;
    gap        : 8px;
    flex-wrap  : wrap;
}

.att-type-badge {
    font-size    : 10px;
    font-weight  : 800;
    padding      : 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.att-err-badge {
    font-size    : 9px;
    font-weight  : 900;
    padding      : 2px 7px;
    border-radius: 4px;
    background   : rgba(239,68,68,.15);
    color        : #ef4444;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.att-inspector-sub {
    font-size: 11px;
    color    : var(--att-muted);
    margin-top: 2px;
}

/* ── Property groups ─────────────────────────────────────────────────────── */
.att-prop-group {
    margin-bottom: 12px;
}

.att-prop-label {
    font-size    : 10px;
    font-weight  : 800;
    color        : var(--att-muted);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 5px;
}

.att-prop-val {
    font-size  : 13px;
    font-weight: 600;
    color      : var(--att-text);
}

.att-prop-mono {
    font-family  : var(--att-mono);
    font-size    : 12px;
    background   : var(--att-bg-2);
    padding      : 4px 8px;
    border-radius: 6px;
    border       : 1px solid var(--att-border);
    display      : inline-block;
}

.att-code-block {
    background   : var(--att-bg-2);
    border       : 1px solid var(--att-border);
    border-radius: 8px;
    padding      : 10px 12px;
    font-size    : 11px;
    font-family  : var(--att-mono);
    line-height  : 1.6;
    color        : var(--att-text);
    overflow-x   : auto;
    white-space  : pre;
    max-height   : 140px;
    overflow-y   : auto;
    margin       : 0;
    scrollbar-width: thin;
}

.att-result-block { border-color: rgba(16,185,129,.25); background: rgba(16,185,129,.03); }

.att-reason-text {
    font-size  : 12px;
    line-height: 1.6;
    color      : var(--att-muted);
    font-style : italic;
    background : var(--att-bg-2);
    padding    : 8px 12px;
    border-radius: 8px;
    border-left: 3px solid rgba(99,102,241,.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACTION BUTTONS (in inspector)
═══════════════════════════════════════════════════════════════════════════ */

.att-action-row {
    display  : flex;
    flex-wrap: wrap;
    gap      : 7px;
    margin   : 14px 0 10px;
}

.att-action-btn {
    display      : flex;
    align-items  : center;
    gap          : 5px;
    padding      : 7px 12px;
    border-radius: 8px;
    border       : 1.5px solid var(--att-border);
    background   : var(--att-bg-2);
    color        : var(--att-muted);
    font-size    : 11px;
    font-weight  : 700;
    cursor       : pointer;
    font-family  : var(--att-font);
    transition   : var(--att-transition);
    white-space  : nowrap;
}

.att-action-btn:hover { border-color: #6366f1; color: #6366f1; background: rgba(99,102,241,.06); }

.att-action-rewind:hover { border-color: #f59e0b; color: #f59e0b; background: rgba(245,158,11,.06); }
.att-action-branch:hover { border-color: #06b6d4; color: #06b6d4; background: rgba(6,182,212,.06); }
.att-action-delete:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.06); }

/* ═══════════════════════════════════════════════════════════════════════════
   WHAT-IF SECTION
═══════════════════════════════════════════════════════════════════════════ */

.att-whatif-section {
    margin-top   : 14px;
    padding      : 14px;
    border-radius: var(--att-radius);
    background   : linear-gradient(135deg, rgba(245,158,11,.06), rgba(239,68,68,.03));
    border       : 1px solid rgba(245,158,11,.2);
}

.att-whatif-title {
    display      : flex;
    align-items  : center;
    gap          : 7px;
    font-size    : 12px;
    font-weight  : 800;
    color        : #d97706;
    margin-bottom: 10px;
}

.att-whatif-desc {
    font-size  : 10px;
    font-weight: 400;
    color      : var(--att-muted);
    margin-left: 4px;
}

.att-whatif-row {
    display    : flex;
    align-items: center;
    gap        : 7px;
    flex-wrap  : wrap;
}

.att-whatif-input {
    flex         : 1;
    min-width    : 80px;
    padding      : 7px 10px;
    border-radius: 7px;
    border       : 1.5px solid rgba(245,158,11,.3);
    background   : var(--att-bg-2);
    font-size    : 12px;
    font-family  : var(--att-mono);
    color        : var(--att-text);
    outline      : none;
    transition   : border-color .15s;
}

.att-whatif-input:focus { border-color: #f59e0b; }
.att-whatif-input::placeholder { color: var(--att-muted); font-family: var(--att-font); }

.att-whatif-eq {
    font-size  : 14px;
    font-weight: 900;
    color      : #d97706;
    flex-shrink: 0;
}

.att-whatif-btn {
    display      : flex;
    align-items  : center;
    gap          : 5px;
    padding      : 7px 14px;
    border-radius: 7px;
    border       : none;
    background   : linear-gradient(135deg, #f59e0b, #d97706);
    color        : white;
    font-size    : 11px;
    font-weight  : 800;
    cursor       : pointer;
    font-family  : var(--att-font);
    transition   : opacity .15s;
    flex-shrink  : 0;
}

.att-whatif-btn:hover { opacity: .88; }

/* ═══════════════════════════════════════════════════════════════════════════
   BRANCHES SECTION
═══════════════════════════════════════════════════════════════════════════ */

.att-branches-section {
    border-top: 1px solid var(--att-border);
    flex-shrink: 0;
}

.att-branch-item {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 11px 18px;
    border-bottom  : 1px solid var(--att-border);
    transition     : background .12s;
}

.att-branch-item:hover { background: rgba(99,102,241,.03); }

.att-branch-item-left {
    display    : flex;
    align-items: center;
    gap        : 10px;
    flex       : 1;
    min-width  : 0;
}

.att-branch-status-dot {
    font-size : 14px;
    flex-shrink: 0;
}

.att-branch-name {
    font-size  : 13px;
    font-weight: 700;
    color      : var(--att-text);
    white-space: nowrap;
    overflow   : hidden;
    text-overflow: ellipsis;
}

.att-branch-meta {
    font-size: 11px;
    color    : var(--att-muted);
    white-space: nowrap;
    overflow : hidden;
    text-overflow: ellipsis;
}

.att-branch-actions { display: flex; gap: 5px; flex-shrink: 0; }

.att-branch-btn {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 28px;
    height         : 28px;
    border-radius  : 7px;
    border         : 1.5px solid var(--att-border);
    background     : var(--att-bg-2);
    color          : var(--att-muted);
    font-size      : 11px;
    cursor         : pointer;
    transition     : var(--att-transition);
}

.att-branch-btn:hover { border-color: #6366f1; color: #6366f1; }
.att-branch-btn.att-branch-btn-danger:hover { border-color: #ef4444; color: #ef4444; }

/* ═══════════════════════════════════════════════════════════════════════════
   BRANCH COMPARE VIEW
═══════════════════════════════════════════════════════════════════════════ */

.att-compare-empty {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : 12px;
    min-height     : 260px;
    color          : var(--att-muted);
    font-size      : 13px;
    text-align     : center;
    padding        : 24px;
}

.att-compare-empty i { font-size: 36px; opacity: .25; }

.att-compare-selector {
    display    : flex;
    align-items: center;
    gap        : 10px;
    padding    : 12px 18px;
    border-bottom: 1px solid var(--att-border);
    font-size  : 12px;
    font-weight: 700;
    color      : var(--att-muted);
    background : var(--att-bg-2);
    flex-shrink: 0;
}

.att-compare-select {
    padding      : 5px 10px;
    border-radius: 7px;
    border       : 1.5px solid var(--att-border);
    background   : var(--att-surface);
    font-size    : 12px;
    font-family  : var(--att-font);
    color        : var(--att-text);
    cursor       : pointer;
    outline      : none;
}

.att-compare-view {
    display       : flex;
    flex-direction: column;
    flex          : 1;
    overflow      : hidden;
}

.att-compare-cols {
    display : grid;
    grid-template-columns: 1fr 1fr;
    flex    : 1;
    overflow: hidden;
}

.att-compare-col {
    display       : flex;
    flex-direction: column;
    overflow      : hidden;
    border-right  : 1px solid var(--att-border);
}

.att-compare-col:last-child { border-right: none; }

.att-compare-col-header {
    padding    : 10px 14px;
    font-size  : 11px;
    font-weight: 800;
    display    : flex;
    align-items: center;
    gap        : 7px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--att-border);
}

.att-col-main   { background: rgba(99,102,241,.06); color: #6366f1; }
.att-col-branch { background: rgba(6,182,212,.06);  color: #06b6d4; }

.att-compare-col-count {
    font-size : 10px;
    font-weight: 600;
    opacity   : .7;
    margin-left: 4px;
}

.att-compare-steps {
    flex      : 1;
    overflow-y: auto;
    padding   : 8px;
}

.att-compare-step {
    display      : flex;
    align-items  : flex-start;
    gap          : 8px;
    padding      : 8px 10px;
    border-radius: 8px;
    margin-bottom: 6px;
    transition   : background .12s;
}

.att-compare-step.att-cmp-main   { background: rgba(99,102,241,.04); }
.att-compare-step.att-cmp-branch { background: rgba(6,182,212,.04); }
.att-compare-step.att-cmp-shared { background: var(--att-bg-2); opacity: .65; }

.att-cmp-icon {
    width          : 24px;
    height         : 24px;
    border-radius  : 6px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 10px;
    flex-shrink    : 0;
}

.att-cmp-type  { font-size: 11px; font-weight: 700; color: var(--att-text); }
.att-cmp-text  { font-size: 10px; color: var(--att-muted); margin-top: 2px; line-height: 1.5; }

.att-compare-fork-marker {
    display      : flex;
    align-items  : center;
    gap          : 6px;
    padding      : 7px 10px;
    margin-bottom: 6px;
    border-radius: 8px;
    background   : rgba(6,182,212,.08);
    border       : 1px dashed rgba(6,182,212,.3);
    color        : #06b6d4;
    font-size    : 10px;
    font-weight  : 700;
    font-style   : italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SESSIONS VIEW
═══════════════════════════════════════════════════════════════════════════ */

.att-sessions-view {
    flex      : 1;
    overflow-y: auto;
    padding   : 8px;
}

.att-sessions-loading {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 10px;
    min-height     : 180px;
    color          : var(--att-muted);
    font-size      : 13px;
}

.att-spinner {
    width        : 20px;
    height       : 20px;
    border       : 2px solid rgba(99,102,241,.2);
    border-top   : 2px solid #6366f1;
    border-radius: 50%;
    animation    : att-spin .7s linear infinite;
}

.att-sessions-empty {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 10px;
    min-height     : 180px;
    justify-content: center;
    color          : var(--att-muted);
    font-size      : 13px;
}

.att-session-item {
    display      : flex;
    align-items  : center;
    gap          : 12px;
    padding      : 11px 14px;
    border-radius: var(--att-radius);
    border       : 1.5px solid var(--att-border);
    background   : var(--att-surface);
    cursor       : pointer;
    transition   : var(--att-transition);
    margin-bottom: 7px;
}

.att-session-item:hover {
    border-color: #6366f1;
    box-shadow  : 0 2px 12px rgba(99,102,241,.1);
}

.att-session-item-icon {
    width          : 36px;
    height         : 36px;
    border-radius  : 10px;
    background     : rgba(99,102,241,.1);
    color          : #6366f1;
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-shrink    : 0;
    font-size      : 14px;
}

.att-session-item-body { flex: 1; min-width: 0; }

.att-session-item-id {
    font-size    : 12px;
    font-weight  : 700;
    color        : var(--att-text);
    font-family  : var(--att-mono);
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}

.att-session-item-meta { font-size: 11px; color: var(--att-muted); }

.att-session-del-btn {
    display      : flex;
    align-items  : center;
    justify-content: center;
    width        : 28px;
    height       : 28px;
    border-radius: 7px;
    border       : 1.5px solid transparent;
    background   : none;
    color        : var(--att-muted);
    cursor       : pointer;
    font-size    : 11px;
    transition   : var(--att-transition);
    flex-shrink  : 0;
}

.att-session-del-btn:hover { color: #ef4444; border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.06); }

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER BUTTONS
═══════════════════════════════════════════════════════════════════════════ */

.att-footer {
    display    : flex;
    align-items: center;
    gap        : 8px;
    padding    : 13px 18px;
    border-top : 1px solid var(--att-border);
    background : var(--att-bg-2);
    flex-shrink: 0;
    flex-wrap  : wrap;
}

.att-btn-primary {
    display      : flex;
    align-items  : center;
    gap          : 6px;
    padding      : 8px 18px;
    border-radius: 8px;
    border       : none;
    background   : linear-gradient(135deg, #667eea, #764ba2);
    color        : white;
    font-size    : 12px;
    font-weight  : 800;
    cursor       : pointer;
    font-family  : var(--att-font);
    transition   : opacity .15s;
}

.att-btn-primary:hover { opacity: .88; }

.att-btn-ghost {
    display      : flex;
    align-items  : center;
    gap          : 6px;
    padding      : 8px 14px;
    border-radius: 8px;
    border       : 1.5px solid var(--att-border);
    background   : var(--att-surface);
    color        : var(--att-muted);
    font-size    : 12px;
    font-weight  : 700;
    cursor       : pointer;
    font-family  : var(--att-font);
    transition   : var(--att-transition);
}

.att-btn-ghost:hover { border-color: #6366f1; color: #6366f1; }

.att-btn-danger:hover { border-color: #ef4444; color: #ef4444; }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE
═══════════════════════════════════════════════════════════════════════════ */

body.dark-mode .att-panel     { background: #1e293b; }
body.dark-mode .att-header    { background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(118,75,162,.06)); }
body.dark-mode .att-footer,
body.dark-mode .att-session-badge,
body.dark-mode .att-compare-selector { background: #0f172a; }
body.dark-mode .att-step-node { border-color: rgba(255,255,255,.08); }
body.dark-mode .att-code-block { background: #0f172a; border-color: rgba(255,255,255,.08); color: #e2e8f0; }
body.dark-mode .att-reason-text { background: #0f172a; }
body.dark-mode .att-whatif-section { background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(239,68,68,.04)); }
body.dark-mode .att-whatif-input { background: #0f172a; border-color: rgba(245,158,11,.25); color: #e2e8f0; }
body.dark-mode .att-session-item { background: #1e293b; border-color: rgba(255,255,255,.08); }
body.dark-mode .att-session-item:hover { border-color: #6366f1; }
body.dark-mode .att-compare-col-header { border-color: rgba(255,255,255,.08); }
body.dark-mode .att-tab-btn { background: #0f172a; border-color: rgba(255,255,255,.1); }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .att-panel         { max-width: 100%; }
    .att-compare-cols  { grid-template-columns: 1fr; }
    .att-compare-col   { max-height: 280px; border-right: none; border-bottom: 1px solid var(--att-border); }
    .att-header        { flex-wrap: wrap; }
    .att-header-actions{ flex-wrap: wrap; gap: 4px; }
    .att-action-row    { gap: 5px; }
    .att-action-btn    { padding: 6px 9px; font-size: 10px; }
}