/* ═══════════════════════════════════════════════════════════════════════
   glass.css — Ωhm Glassmorphism + Floating Background System
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Glass token defaults (dark / default theme) ── */
:root {
    --glass-bg:          rgba(13, 21, 32, 0.65);
    --glass-blur:        16px;
    --glass-border:      rgba(255, 255, 255, 0.08);
    --glass-shadow:      0 8px 32px rgba(0, 0, 0, 0.28);
    --glass-highlight:   inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --glass-sat:         160%;
    --gutter-bg:         rgba(0, 0, 0, 0.15);
    /* Floating orb colors */
    --float-c1: rgba(59,  130, 246, 0.07);
    --float-c2: rgba(139,  92, 246, 0.05);
    --float-c3: rgba(6,   182, 212, 0.04);
}

/* ── Arc theme overrides ── */
html[data-theme="arc"] {
    --glass-bg:       rgba(255, 255, 255, 0.62);
    --glass-border:   rgba(148, 163, 184, 0.22);
    --glass-shadow:   0 8px 32px rgba(99, 102, 241, 0.08);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    --gutter-bg:      rgba(0, 0, 0, 0.04);
    --float-c1: rgba(99,  102, 241, 0.08);
    --float-c2: rgba(139,  92, 246, 0.06);
    --float-c3: rgba(59,  130, 246, 0.05);
}

/* ── Linear theme overrides ── */
html[data-theme="linear"] {
    --glass-bg:       rgba(255, 255, 255, 0.68);
    --glass-border:   rgba(0, 0, 0, 0.07);
    --glass-shadow:   0 4px 24px rgba(94, 106, 210, 0.07);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    --gutter-bg:      rgba(0, 0, 0, 0.04);
    --float-c1: rgba(94,  106, 210, 0.06);
    --float-c2: rgba(109,  40, 217, 0.04);
    --float-c3: rgba(79,   70, 229, 0.05);
}

/* ── Andoriasoft theme overrides ── */
html[data-theme="andoriasoft"] {
    --glass-bg:       rgba(6, 8, 28, 0.72);
    --glass-border:   rgba(0, 212, 255, 0.1);
    --glass-shadow:   0 8px 32px rgba(0, 0, 0, 0.4);
    --glass-highlight: inset 0 1px 0 rgba(0, 212, 255, 0.06);
    --float-c1: rgba(0,   212, 255, 0.07);
    --float-c2: rgba(124,  77, 255, 0.06);
    --float-c3: rgba(0,   255, 204, 0.04);
}

/* ── Esoteric theme overrides ── */
html[data-theme="esoteric"] {
    --glass-bg:       rgba(14, 11, 7, 0.78);
    --glass-border:   rgba(201, 149, 31, 0.1);
    --glass-shadow:   0 8px 32px rgba(0, 0, 0, 0.5);
    --glass-highlight: inset 0 1px 0 rgba(201, 149, 31, 0.04);
    --float-c1: rgba(201, 149,  31, 0.06);
    --float-c2: rgba(232, 200, 106, 0.04);
    --float-c3: rgba(160, 112,  16, 0.04);
}

/* ─────────────────────────────────────────────────────
   Floating background orbs
   ───────────────────────────────────────────────────── */
#floating-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.float-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    will-change: transform, opacity;
}

.float-orb.c1 { background: var(--float-c1); }
.float-orb.c2 { background: var(--float-c2); }
.float-orb.c3 { background: var(--float-c3); }

@keyframes floatDrift1 {
    0%   { transform: translate(0px, 0px)    rotate(0deg)   scale(1);    }
    20%  { transform: translate(60px, -80px)  rotate(30deg)  scale(1.08); }
    45%  { transform: translate(-40px, 50px)  rotate(-15deg) scale(0.94); }
    70%  { transform: translate(80px, 30px)   rotate(45deg)  scale(1.05); }
    100% { transform: translate(0px, 0px)    rotate(0deg)   scale(1);    }
}
@keyframes floatDrift2 {
    0%   { transform: translate(0px, 0px)    rotate(0deg)   scale(1);    }
    25%  { transform: translate(-70px, 60px)  rotate(-25deg) scale(1.06); }
    55%  { transform: translate(50px, -40px)  rotate(20deg)  scale(0.92); }
    80%  { transform: translate(-30px, -60px) rotate(-10deg) scale(1.04); }
    100% { transform: translate(0px, 0px)    rotate(0deg)   scale(1);    }
}
@keyframes floatDrift3 {
    0%   { transform: translate(0px, 0px)    rotate(0deg)   scale(1);    }
    30%  { transform: translate(40px, 70px)   rotate(15deg)  scale(1.07); }
    60%  { transform: translate(-60px, -30px) rotate(-35deg) scale(0.96); }
    100% { transform: translate(0px, 0px)    rotate(0deg)   scale(1);    }
}

/* ─────────────────────────────────────────────────────
   Glassmorphic utility class
   ───────────────────────────────────────────────────── */
.glass {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow), var(--glass-highlight) !important;
}

/* ─────────────────────────────────────────────────────
   Chat bubbles — glassmorphic
   ───────────────────────────────────────────────────── */
.bot-message .message {
    background: linear-gradient(
        145deg,
        rgba(13, 21, 40, 0.82) 0%,
        rgba(20, 35, 70, 0.72) 50%,
        rgba(13, 25, 55, 0.78) 100%
    ) !important;
    backdrop-filter: blur(18px) saturate(170%) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(18px) saturate(170%) brightness(1.05) !important;
    border: 1px solid rgba(99, 160, 255, 0.18) !important;
    border-left: 2px solid var(--accent) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(255,255,255,0.03),
        0 0 0 0.5px rgba(99,160,255,0.08) !important;
    color: var(--text-primary) !important;
    position: relative !important;
}
/* Subtle sheen on top edge */
.bot-message .message::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(170deg, rgba(255,255,255,0.04) 0%, transparent 40%);
    pointer-events: none;
}

.user-message .message {
    background: linear-gradient(
        145deg,
        rgba(37, 99, 235, 0.75) 0%,
        rgba(79, 70, 229, 0.65) 40%,
        rgba(59, 130, 246, 0.7) 100%
    ) !important;
    backdrop-filter: blur(16px) saturate(160%) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) brightness(1.08) !important;
    border: 1px solid rgba(147, 197, 253, 0.25) !important;
    box-shadow:
        0 8px 28px rgba(59, 130, 246, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 -1px 0 rgba(255,255,255,0.04) !important;
    color: #ffffff !important;
    position: relative !important;
}
.user-message .message::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(170deg, rgba(255,255,255,0.08) 0%, transparent 45%);
    pointer-events: none;
}

/* Arc: light theme user bubble */
html[data-theme="arc"] .user-message .message {
    background: linear-gradient(135deg, rgba(79,70,229,0.9), rgba(124,58,237,0.85)) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Esoteric: gold-tinted user bubble */
html[data-theme="esoteric"] .user-message .message {
    background: linear-gradient(135deg, rgba(100,60,5,0.7), rgba(160,100,10,0.55)) !important;
    border-color: rgba(201,149,31,0.22) !important;
}

/* Andoriasoft: cyan-tinted user bubble */
html[data-theme="andoriasoft"] .user-message .message {
    background: linear-gradient(135deg, rgba(0,100,140,0.6), rgba(0,212,255,0.22)) !important;
    border-color: rgba(0,212,255,0.18) !important;
}

/* ─────────────────────────────────────────────────────
   Panel chrome — glass treatment
   ───────────────────────────────────────────────────── */
.document-panel,
.content-panel,
.content-panel-inner {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
    border-left-color: var(--glass-border) !important;
}

.panel-header,
.cp-header,
.cp-detail-header,
.cp-toolbar {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(130%) !important;
    border-bottom-color: var(--glass-border) !important;
}

.panel-tabs {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--glass-border) !important;
}

/* Document panel glass */
.pdf-toolbar {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom-color: var(--glass-border) !important;
}

/* Admin + friends panels */
#admin-panel,
#friends-panel,
.admin-panel {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
    border-left-color: var(--glass-border) !important;
}

/* Sandbox + Codex panels */
#sandbox-panel,
#codex-panel {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
    border-left-color: var(--glass-border) !important;
}

/* ─────────────────────────────────────────────────────
   Library panel — items & cards
   ───────────────────────────────────────────────────── */
.cp-item {
    background: transparent;
    border-color: transparent;
    transition: background 0.18s, border-color 0.18s, transform 0.15s, box-shadow 0.15s;
}
.cp-item:hover {
    background: rgba(255,255,255,0.04) !important;
    border-color: var(--glass-border) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.cp-item.active {
    background: rgba(59,130,246,0.12) !important;
    border-color: rgba(59,130,246,0.3) !important;
}

/* ─────────────────────────────────────────────────────
   IDE-style editor pane (library review)
   ───────────────────────────────────────────────────── */
.cp-editor-pane {
    position: relative;
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: rgba(8, 12, 20, 0.85);
    box-shadow: 0 2px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.03);
    transition: border-color 0.2s, box-shadow 0.2s;
}
html[data-theme="arc"] .cp-editor-pane,
html[data-theme="linear"] .cp-editor-pane {
    background: rgba(248, 250, 252, 0.9);
    border-color: rgba(148,163,184,0.25);
}
.cp-editor-pane:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.12), 0 2px 12px rgba(0,0,0,0.2);
}

.cp-editor-gutter {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    min-width: 36px;
    background: var(--gutter-bg);
    border-right: 1px solid var(--glass-border);
    text-align: right;
    user-select: none;
    flex-shrink: 0;
}
.cp-gutter-line {
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-muted);
    padding: 0 8px;
    opacity: 0.5;
}

.cp-rev-textarea {
    flex: 1;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    border: none !important;
    outline: none !important;
    resize: none !important;
    padding: 10px 12px !important;
    tab-size: 4;
    box-shadow: none !important;
    min-height: 80px;
}

/* Tags input — pill style */
.cp-rev-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    min-height: 36px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    cursor: text;
    transition: border-color 0.2s;
}
html[data-theme="arc"] .cp-rev-tags-wrap,
html[data-theme="linear"] .cp-rev-tags-wrap {
    background: rgba(0,0,0,0.03);
}
.cp-rev-tags-wrap:focus-within { border-color: var(--accent); }
.cp-rev-tags-wrap input {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    color: var(--text-primary) !important;
    font-size: 0.85rem !important;
    flex: 1;
    min-width: 80px;
    box-shadow: none !important;
    padding: 0 !important;
}
.cp-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent-light, var(--accent));
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
    cursor: default;
    white-space: nowrap;
}
.cp-tag-pill-del {
    cursor: pointer;
    opacity: 0.6;
    line-height: 1;
    font-size: 0.9rem;
    padding: 0 1px;
}
.cp-tag-pill-del:hover { opacity: 1; }

/* Slide cards — glass */
.cp-rev-slide-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid var(--glass-border) !important;
    border-left: 2px solid var(--accent) !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    overflow: hidden !important;
}
.cp-rev-slide-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2) !important;
}
/* slide card border-left inherits --accent per theme — no overrides needed */

/* Section headers */
.cp-rev-section-header {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 10px 4px 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 6px;
}

/* Review label */
.cp-rev-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Slide summary row */
.cp-rev-slide-summary {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    list-style: none;
}
.cp-rev-slide-summary::-webkit-details-marker { display: none; }
.cp-rev-slide-arrow {
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}
details[open] .cp-rev-slide-arrow { transform: rotate(90deg); }
.cp-rev-slide-num {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    min-width: 50px;
}
.cp-rev-slide-title {
    font-size: 0.82rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cp-rev-slide-untitled { color: var(--text-muted); font-size: 0.78rem; }

/* Review pane toolbar (notes) */
.cp-rev-toolbar {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(0,0,0,0.12);
    border-bottom: 1px solid var(--glass-border);
    border-radius: 7px 7px 0 0;
}
html[data-theme="arc"] .cp-rev-toolbar,
html[data-theme="linear"] .cp-rev-toolbar { background: rgba(0,0,0,0.04); }
.cp-rev-tb-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.78rem;
    transition: color 0.15s, background 0.15s;
}
.cp-rev-tb-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }

/* ─────────────────────────────────────────────────────
   Admin panel rows
   ───────────────────────────────────────────────────── */
.ap-user-row {
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.ap-user-row:hover {
    background: rgba(255,255,255,0.04) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    border-color: var(--glass-border) !important;
}

/* ─────────────────────────────────────────────────────
   Modal overlays — glass card style
   ───────────────────────────────────────────────────── */
.modal-content,
.profile-modal-content,
.inbox-modal,
.chat-modal {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35), var(--glass-highlight) !important;
}

/* ─────────────────────────────────────────────────────
   User chip popup — glass
   ───────────────────────────────────────────────────── */
.user-chip-popup {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(16px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
}

/* ─────────────────────────────────────────────────────
   Accessibility: ensure sufficient contrast for muted text
   ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .float-orb { animation: none !important; }
    .cp-item { transition: none !important; }
    .cp-rev-slide-card { transition: none !important; }
}