/* ═══════════════════════════════════════════════════════════════════════════
   AGENTIR NETWORK — UNIFIED THEME (v2)
   Codex aesthetic = canonical. Carries over to AgentIR terminal app.
   ═══════════════════════════════════════════════════════════════════════════
   
   Rules:
     - Codex's dark/light tokens are the source of truth
     - Grid background ONLY on chrome (sidebar, header, app body), 
       NOT inside chat bubbles or input areas
     - Full opacity on all readable text (no squinting)
     - Codex's border-color hover + translateY(-2px) is the standard
     - Buttons, borders, headers all have proper contrast in both themes
     - Chat input must be visibly bordered, not subtle
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── DESIGN TOKENS ───────────────────────────────────────────────────────── */

:root,
[data-theme="light"] {
    /* Surfaces */
    --bg:           #ebedef;
    --sidebar:      #f8f8f8;
    --panel-bg:     #ffffff;
    --bg-card:      #f0f0f0;
    --header:       #f0f0f0;
    
    /* Text — full opacity readable */
    --text:         #1a1a1b;
    --text-primary: #1a1a1b;
    --text-secondary:#2a3a42;
    --text-muted:   #5a6c74;
    
    /* Accent — darker green for light contrast */
    --accent:       #008f1e;
    --accent-dim:   #008f1e1a;
    --accent-glow:  #008f1e44;
    --accent-rgb:   0, 143, 30;
    
    /* Gold */
    --gold:         #a67c00;
    --gold-dim:     #a67c0022;
    
    /* Status */
    --text-error:   #cc0000;
    --text-warn:    #a67c00;
    
    /* Borders — visible, not faint */
    --border:       #5a6c74;
    --border-bright:#008f1e;
    
    /* Chat */
    --chat-bubble-ai:   #ffffff;
    --chat-text-ai:     #1a1a1b;
    --chat-bubble-user: #008f1e;
    --chat-text-user:   #ffffff;
    
    /* Grid */
    --grid-line:    rgba(0, 143, 30, 0.08);
}

[data-theme="dark"] {
    /* Surfaces */
    --bg:           #0a0a0a;
    --sidebar:      #111111;
    --panel-bg:     #141414;
    --bg-card:      #111111;
    --header:       #0b0b0b;
    
    /* Text — full opacity readable */
    --text:         #ffffff;
    --text-primary: #00FF41;
    --text-secondary:#00cc34;
    --text-muted:   #009922;
    
    /* Accent — bright on black */
    --accent:       #00FF41;
    --accent-dim:   #00FF4122;
    --accent-glow:  #00FF4188;
    --accent-rgb:   0, 255, 65;
    
    /* Gold */
    --gold:         #FFD700;
    --gold-dim:     #FFD70033;
    
    /* Status */
    --text-error:   #FF4141;
    --text-warn:    #FFD700;
    
    /* Borders */
    --border:       #2a3a30;
    --border-bright:#00FF41;
    
    /* Chat */
    --chat-bubble-ai:   #111111;
    --chat-text-ai:     #00FF41;
    --chat-bubble-user: #00FF41;
    --chat-text-user:   #000000;
    
    /* Grid */
    --grid-line:    rgba(0, 255, 65, 0.05);
}

/* Fonts */
:root {
    --font-mono:    'Space Mono', 'Courier New', monospace;
    --font-body:    'JetBrains Mono', monospace;
    --font-header:  'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
    --font-prose:   'DM Sans', sans-serif;
}

/* ── UNIFIED HEADER ──────────────────────────────────────────────────────── */

.app-header {
    height: 50px;
    background: var(--header);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    flex-shrink: 0;
    z-index: 100;
    position: relative;
}

.app-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-muted);
    white-space: nowrap;
}

.app-header-right {
    display: flex;
    gap: 8px;
    align-items: center;
}


/* ── BRAND MARK (unified across both apps) ──────────────────────────────── */

.brand-wrap {
    display: flex;
    gap: 6px;
    align-items: center;
}

.brand-wrap .logo-wrap img {
    height: 22px;
    display: none;
}
[data-theme="dark"]  .brand-wrap .logo-dark   { display: block; }
[data-theme="light"] .brand-wrap .logo-light  { display: block; }

.brand-name {
    margin: 0;
    font-family: var(--font-header);
    font-size: 18px;
    letter-spacing: 3px;
    font-weight: 400;
    color: var(--accent);
}

.brand-suffix {
    font-family: var(--font-header);
    font-size: 18px;
    letter-spacing: 3px;
    color: var(--text-muted);
}


/* ── HEADER PILLS (user status, theme toggle) ────────────────────────────── */

.app-pill {
    border: 1px solid var(--border);
    padding: 4px 10px;
    color: var(--text);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    background: transparent;
}
.app-pill:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-dim);
}
.app-pill.active {
    color: var(--gold);
    border-color: var(--gold);
}
.app-pill.active:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: var(--gold-dim);
}

.app-subscribe-btn {
    background: var(--accent);
    color: var(--bg);
    border: none;
    padding: 5px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
}
.app-subscribe-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}


/* ── UNIFIED SIDEBAR ───────────────────────────────────────────────────── */

.app-sidebar {
    width: 260px;
    min-width: 260px;
    background: var(--sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    height: 100%;
    flex-shrink: 0;
    overflow-y: auto;
    transition: transform 0.3s;
    z-index: 105;
}

.app-section {
    margin-bottom: 18px;
}

.app-section-title {
    font-family: var(--font-header);
    letter-spacing: 2px;
    font-size: 12px;
    color: var(--accent);
    padding: 4px 16px;
    border-left: 2px solid var(--accent);
    margin: 0 0 4px 0;
}


/* ── SIDEBAR ITEMS (background-fill hover, no shift) ─────────────────────── */

.app-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px 7px 28px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-decoration: none;
    color: var(--text);
    cursor: pointer;
    background: transparent;
    border-left: 2px solid transparent;
    transition: color 0.15s, background 0.15s, border-left-color 0.15s;
}
.app-item:hover,
.app-item.active {
    color: var(--accent);
    background: var(--accent-dim);
    border-left-color: var(--accent);
}

.app-item .glyph {
    color: var(--text-muted);
    transition: color 0.15s;
}
.app-item:hover .glyph,
.app-item.active .glyph {
    color: var(--accent);
}

.app-item .price-tag {
    margin-left: auto;
    color: var(--gold);
    font-size: 10px;
    letter-spacing: 1px;
}

.app-item .lock {
    margin-left: auto;
    color: var(--text-muted);
}


/* ── ACCOUNT STATUS CARD ─────────────────────────────────────────────────── */

.app-status-card {
    margin: 12px 12px 0 12px;
    padding: 10px 12px;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 2px;
    font-family: var(--font-mono);
}

.app-card-title {
    font-family: var(--font-header);
    letter-spacing: 2px;
    font-size: 11px;
    color: var(--accent);
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
}

.app-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 10px;
    letter-spacing: 1px;
}

.app-card-label {
    color: var(--text-muted);
    font-weight: 700;
}

.app-card-value {
    color: var(--accent);
    font-weight: 700;
}


/* ── RESTORE SESSION CARD ─────────────────────────────────────────────────── */

.app-restore-card {
    margin: 8px 12px 0 12px;
    padding: 10px 12px;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 2px;
}

.app-card-input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 6px 8px;
    outline: none;
    margin-bottom: 6px;
    border-radius: 2px;
    transition: border-color 0.15s;
}
.app-card-input:focus {
    border-color: var(--accent);
}

.app-card-btn {
    width: 100%;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    border-radius: 2px;
    text-transform: uppercase;
}
.app-card-btn:hover {
    background: var(--accent);
    color: var(--bg);
}

.app-card-msg {
    font-size: 10px;
    margin-top: 6px;
    color: var(--text-muted);
}


/* ── LEGAL FOOTER LINKS ─────────────────────────────────────────────────── */

.app-legal {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.app-legal .app-item {
    font-size: 10px;
    padding: 6px 16px 6px 28px;
}


/* ── MOBILE BREAKPOINTS ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .app-header-center { display: none; }
    
    .app-sidebar {
        position: fixed;
        top: 50px;
        left: 0;
        height: calc(100dvh - 50px);
        transform: translateX(-100%);
        width: 280px;
    }
    .app-sidebar.open {
        transform: translateX(0);
    }
}
/* ── BASE RESET ──────────────────────────────────────────────────────────── */

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

body,
html {
    width: 100%;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.5;
}

body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    overflow: hidden;
}


/* ── GRID BACKGROUND — ON BODY ONLY (chrome).
   Chat bubbles & inputs override with solid bg to stay clean. ────────────── */

body {
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 24px 24px;
}


/* ── CRT SCANLINES (subtle texture) ──────────────────────────────────────── */

body::after {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.20) 50%),
        linear-gradient(90deg, rgba(255,0,0,0.04), rgba(0,255,0,0.02), rgba(0,0,255,0.04));
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    opacity: 0.12;
    z-index: 9999;
}


/* ── ANIMATIONS ──────────────────────────────────────────────────────────── */

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

@keyframes terminal-blink {
    to { visibility: hidden; }
}

.blink {
    animation: 1s step-end infinite blink;
    color: var(--accent);
}

.terminal-cursor {
    animation: 1s steps(2, start) infinite terminal-blink;
    color: var(--accent);
}


/* ── TYPOGRAPHY ──────────────────────────────────────────────────────────── */

h1, h2, h3 {
    font-family: var(--font-header);
    font-weight: 400;
    letter-spacing: 3px;
    color: var(--accent);
}


/* ── BUTTONS (Codex pattern) ─────────────────────────────────────────────── */

.btn {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 10px 20px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
    text-transform: uppercase;
}
.btn:hover {
    background: var(--accent);
    color: var(--bg);
    transform: translateY(-1px);
}
.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-gold {
    border-color: var(--gold);
    color: var(--gold);
}
.btn-gold:hover {
    background: var(--gold);
    color: var(--bg);
}

.action-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.15s;
}
.action-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}


/* ── BRAND MARK (Agentir_) — 18px to match Codex scale ───────────────────── */

.brand-wrap {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-right: auto;
}
.brand-name {
    margin: 0;
    font-family: var(--font-header);
    font-size: 18px;
    letter-spacing: 3px;
    font-weight: 400;
    padding-left: 6px;
    color: var(--accent);
}
.logo-wrap img       { display: none; height: 22px; }
[data-theme="dark"] .logo-dark   { display: block; }
[data-theme="light"] .logo-light { display: block; }


/* ── NAV LINKS (full opacity, Codex hover) ──────────────────────────────── */

.nav-link {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 2px;
    padding: 10px 0;
    color: var(--text);
    cursor: pointer;
    transition: color 0.15s, border-left-color 0.15s, padding-left 0.15s;
    border-left: 2px solid transparent;
}
.nav-link:hover,
.nav-link.active {
    color: var(--accent);
    border-left-color: var(--accent);
    padding-left: 6px;
}


/* ── SCROLLBARS ─────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { 
    background: var(--accent); 
    border-radius: 6px;
    opacity: 0.6;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--bg);
}


/* ── MIC BUTTON ──────────────────────────────────────────────────────────── */

#mic-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--accent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    cursor: pointer;
    transition: 0.15s;
}
#mic-btn:hover {
    background: var(--accent-dim);
    transform: translateY(-1px);
}
#mic-btn.listening {
    background: var(--text-error);
    border-color: var(--text-error);
    color: #fff;
}


/* ── HAMBURGER (mobile) ─────────────────────────────────────────────────── */

#hamburger,
.hamburger {
    display: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--accent);
    background: transparent;
    border: none;
}


/* ── SIDEBAR OVERLAY (mobile drawer backdrop) ────────────────────────────── */

.sidebar-overlay {
    display: none;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
}


/* ── INPUT AUTOFILL ─────────────────────────────────────────────────────── */

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--sidebar) inset !important;
    -webkit-text-fill-color: var(--text) !important;
}


/* ── CHAT MESSAGES — NO grid bg inside bubbles ───────────────────────────── */

#chat-messages,
.msg-user,
.msg-ai,
.chat-bubble-ai,
.chat-bubble-user {
    background-image: none !important;
}

.msg-user {
    background: var(--chat-bubble-user);
    color: var(--chat-text-user);
}
.msg-ai {
    background: var(--chat-bubble-ai);
    color: var(--chat-text-ai);
    border: 1px solid var(--border);
}


/* ── CHAT INPUT (visible border, not subtle) ─────────────────────────────── */

#chat-input {
    background: var(--panel-bg);
    color: var(--text);
    border: 1px solid var(--border);
    background-image: none !important;
}
#chat-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-glow);
}


/* ── SECTION TITLES (sidebar group headers) ──────────────────────────────── */

.section-title {
    font-family: var(--font-header);
    letter-spacing: 2px;
    font-size: 13px;
    color: var(--accent);
    padding: 6px 16px;
    border-left: 2px solid var(--accent);
    margin-bottom: 6px;
}


/* ── MOBILE BREAKPOINT ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
    #hamburger,
    .hamburger {
        display: block;
    }
    
    #sidebar,
    nav.sidebar {
        position: fixed;
        top: 50px;
        left: 0;
        height: calc(100dvh - 50px);
        transform: translateX(-100%);
        z-index: 105;
        width: 260px;
        transition: transform 0.3s;
    }
    #sidebar.open,
    nav.sidebar.open {
        transform: translateX(0);
    }
    #sidebar.open + .sidebar-overlay,
    nav.sidebar.open ~ .sidebar-overlay {
        display: block;
    }
    
    .hide-mobile {
        display: none !important;
    }
}

.section {
            margin-bottom: 24px;
        }
        
        .section-item {
            padding: 8px 16px 8px 28px;
            font-size: 12px;
            color: var(--text-secondary);
            cursor: pointer;
            letter-spacing: 1px;
            border-left: 2px solid transparent;
            transition: background 0.1s, color 0.1s, border-color 0.1s;
        }

            .section-item:hover, .section-item.active {
                background: var(--accent-dim);
                color: var(--accent);
                border-left-color: var(--accent);
            }

            .section-item .glyph {
                margin-right: 6px;
                color: var(--text-muted);
            }

            .section-item:hover .glyph, .section-item.active .glyph {
                color: var(--accent);
            }

            .section-item .price-tag {
                float: right;
                color: var(--gold);
                font-size: 10px;
                letter-spacing: 1px;
            }

            .section-item .lock {
                float: right;
                color: var(--text-muted);
            }

/* ── PRINT MODE ─────────────────────────────────────────────────────────── */

@media print {
    body *               { visibility: hidden; }
    .wiki-modal-body,
    .wiki-modal-body *   { visibility: visible; }
    .wiki-modal-body     { position: absolute; left: 0; top: 0; width: 100%; }
    body::after          { display: none; }
    body                 { background-image: none !important; }
    
    :root {
        --bg: #ffffff !important;
        --sidebar: #ffffff !important;
        --panel-bg: #ffffff !important;
        --text: #000000 !important;
        --accent: #007a1e !important;
        --border: #cccccc !important;
    }
}