/* ==========================================================================
   Treasury System theme — Matrix binary-code aesthetic
   Green-on-black terminal styling. All rules scoped under
   [data-theme="treasurysystem"] so the theme is fully self-contained.
   The animated binary rain is rendered by js/themes/treasurysystem.js.
   ========================================================================== */

/* :root[...] is used (not bare [data-theme]) so these tokens out-specify the
   inline :root block in index.html, which would otherwise win on source order. */
:root[data-theme="treasurysystem"] {
    /* Core surfaces — deep translucent green so the binary rain pours through */
    --bg: #000000;
    --surface: rgba(0, 12, 4, 0.58);
    --surface-2: rgba(0, 20, 8, 0.5);
    --surface-3: rgba(0, 32, 12, 0.55);
    --hairline: rgba(0, 255, 102, 0.22);
    --hairline-strong: rgba(0, 255, 102, 0.45);

    /* Brand / accent — classic matrix green */
    --accent: #00ff66;
    --accent-2: #00cc44;
    --accent-3: #00922d;
    --accent-gradient: linear-gradient(135deg, #00ff66 0%, #00cc44 55%, #00922d 100%);
    --accent-gradient-soft: linear-gradient(135deg, rgba(0, 255, 102, 0.18) 0%, rgba(0, 204, 68, 0.18) 55%, rgba(0, 146, 45, 0.18) 100%);
    --accent-glow: rgba(0, 255, 102, 0.55);

    /* Text */
    --text: #b9ffce;
    --text-secondary: #2ecc71;

    /* Bubbles */
    --bubble-sent: var(--accent-gradient);
    --bubble-received: var(--surface-2);

    /* Shape & elevation — sharper corners for a terminal feel */
    --radius-sm: 3px;
    --radius: 4px;
    --radius-lg: 6px;
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 24px rgba(0, 255, 65, 0.06);
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 255, 65, 0.05);

    /* Terminal font */
    --font-family: 'VT323', 'Courier New', Courier, monospace;

    /* Legacy --tg-* aliases */
    --tg-background: var(--bg);
    --tg-sidebar-background: var(--surface);
    --tg-chat-background: transparent;
    --tg-text-primary: var(--text);
    --tg-text-secondary: var(--text-secondary);
    --tg-message-sent: #00cc33;
    --tg-message-received: var(--surface-2);
    --tg-input-background: var(--surface);
    --mobile-nav-height: 65px;
}

/* Terminal font — no global glow; glow is applied only to decorative headings. */
[data-theme="treasurysystem"] * {
    font-family: var(--font-family);
    letter-spacing: 0.3px;
}

[data-theme="treasurysystem"] #sidebar {
    text-shadow: 0 0 4px rgba(0, 255, 102, 0.25);
}

[data-theme="treasurysystem"] body {
    background-color: #000000;
    /* Pure black base; the canvas provides the rain, and a faint radial
       green bloom adds volumetric depth behind it. */
    background-image:
        radial-gradient(1200px 800px at 50% 0%, rgba(0, 255, 102, 0.06), transparent 70%),
        radial-gradient(900px 700px at 50% 100%, rgba(0, 200, 80, 0.05), transparent 70%);
    color: var(--text);
}

/* Keep the Material Icons glyph font working despite the global override. */
[data-theme="treasurysystem"] .material-icons {
    font-family: 'Material Icons' !important;
    letter-spacing: normal;
    text-shadow: 0 0 8px var(--accent-glow);
}

/* --------------------------------------------------------------------------
   Effects layer: full-viewport canvas + scanlines + vignette.
   Sits behind every app surface (z-index 0); UI is lifted above it.
   -------------------------------------------------------------------------- */
#theme-effects-layer {
    display: none;
}

[data-theme="treasurysystem"] #theme-effects-layer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* The canvas is positioned/sized by JS to cover only the sidebar (left panel),
   so the binary rain stays out of the main chat panel. */
[data-theme="treasurysystem"] #theme-effects-layer canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}

/* Scanlines — crisp repeating horizontal lines for a CRT terminal look. */
[data-theme="treasurysystem"] #theme-effects-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 1px,
        rgba(0, 0, 0, 0.35) 2px,
        rgba(0, 0, 0, 0) 3px
    );
    opacity: 0.6;
    z-index: 2;
}

/* Vignette + central green bloom — moody, volumetric, immersive frame. */
[data-theme="treasurysystem"] #theme-effects-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, rgba(0, 255, 102, 0.05) 0%, rgba(0, 0, 0, 0) 40%),
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.85) 100%);
    z-index: 3;
}

/* Subtle CRT brightness flicker. */
@keyframes treasuryFlicker {
    0%, 100% { opacity: 1; }
    47%      { opacity: 0.96; }
    48%      { opacity: 0.85; }
    49%      { opacity: 0.98; }
    72%      { opacity: 0.92; }
    73%      { opacity: 1; }
}

/* Glitch: brief horizontal shift + green/cyan split, toggled by JS. */
@keyframes treasuryGlitch {
    0%   { transform: translate(0, 0); filter: none; }
    20%  { transform: translate(-3px, 0); filter: drop-shadow(3px 0 rgba(0, 255, 102, 0.6)); }
    40%  { transform: translate(3px, 0); filter: drop-shadow(-3px 0 rgba(0, 220, 255, 0.5)); }
    60%  { transform: translate(-2px, 1px); filter: drop-shadow(2px 0 rgba(0, 255, 102, 0.6)); }
    80%  { transform: translate(2px, -1px); filter: none; }
    100% { transform: translate(0, 0); filter: none; }
}

[data-theme="treasurysystem"] #theme-effects-layer.treasury-glitch-active {
    animation: treasuryGlitch 0.16s steps(2, end);
}

/* --------------------------------------------------------------------------
   Lift the real UI above the effects layer.
   Modals and dropdowns must stay position:fixed with a high z-index — do NOT
   demote them to position:relative or they break (Create Qing, etc.).
   -------------------------------------------------------------------------- */
[data-theme="treasurysystem"] #sidebar,
[data-theme="treasurysystem"] #chat-container {
    position: relative;
    z-index: 1;
}

[data-theme="treasurysystem"] .modal,
[data-theme="treasurysystem"] .search-dropdown,
[data-theme="treasurysystem"] .notification {
    position: fixed;
    z-index: 1000000;
}

[data-theme="treasurysystem"] .mobile-panel {
    position: relative;
    z-index: 1;
}

/* Translucent panels so the rain pours through the chrome. A light blur
   keeps text readable over the moving rain while preserving immersion. */
[data-theme="treasurysystem"] #sidebar {
    background-color: var(--surface);
    border-right: 1px solid var(--hairline-strong);
    box-shadow: inset -1px 0 0 rgba(0, 255, 102, 0.15), 0 0 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

[data-theme="treasurysystem"] #sidebar-header {
    background-color: rgba(0, 12, 4, 0.45);
    border-color: var(--hairline);
}

[data-theme="treasurysystem"] #chat-header,
[data-theme="treasurysystem"] #message-input-container {
    background-color: rgba(0, 12, 4, 0.55);
    border-color: var(--hairline-strong);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

[data-theme="treasurysystem"] #chat-header {
    box-shadow: 0 1px 0 rgba(0, 255, 102, 0.15);
}

[data-theme="treasurysystem"] #messages-container,
[data-theme="treasurysystem"] #chat-container {
    background-color: transparent;
    background-image: none;
}

/* Brand name and empty-state headings: strong neon glow. */
[data-theme="treasurysystem"] .app-name,
[data-theme="treasurysystem"] #connection-prompt h2,
[data-theme="treasurysystem"] #no-chat-selected {
    text-shadow: 0 0 12px var(--accent-glow), 0 0 22px var(--accent-glow);
    color: var(--accent);
}

/* Message bubbles — crisp, readable text with no neon glow. */
[data-theme="treasurysystem"] .message,
[data-theme="treasurysystem"] .message * {
    text-shadow: none;
}

[data-theme="treasurysystem"] .message {
    font-size: 18px;
    line-height: 1.35;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[data-theme="treasurysystem"] .message.sent {
    background-image: var(--accent-gradient);
    color: #001a06;
    box-shadow: 0 0 10px rgba(0, 255, 102, 0.2);
}

[data-theme="treasurysystem"] .message.sent .message-header,
[data-theme="treasurysystem"] .message.sent .message-sender,
[data-theme="treasurysystem"] .message.sent .message-time {
    color: rgba(0, 26, 6, 0.85);
    text-shadow: none;
}

[data-theme="treasurysystem"] .message.received {
    background-color: rgba(0, 18, 8, 0.88);
    border: 1px solid var(--hairline-strong);
    color: #d4ffe4;
    box-shadow: 0 0 8px rgba(0, 255, 102, 0.08);
}

[data-theme="treasurysystem"] .message.received .message-sender {
    color: var(--accent);
}

[data-theme="treasurysystem"] .message.received .message-time {
    color: var(--text-secondary);
}

/* Status accents remapped to matrix-green variants. */
[data-theme="treasurysystem"] .message.new-message {
    border-left-color: var(--accent) !important;
    background-color: rgba(0, 255, 102, 0.08) !important;
}

[data-theme="treasurysystem"] .message.real-time-message {
    border-left-color: var(--accent-2) !important;
    background-color: rgba(0, 204, 68, 0.08) !important;
}

[data-theme="treasurysystem"] .message.real-time-message::before {
    background-color: var(--accent-2);
    color: #001a06;
}

/* Inputs and scrollbars. */
[data-theme="treasurysystem"] #search-input,
[data-theme="treasurysystem"] #message-input {
    background-color: var(--surface-2);
    border-color: var(--hairline);
    color: var(--text);
}

[data-theme="treasurysystem"] #message-input:focus,
[data-theme="treasurysystem"] #search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-glow), 0 0 12px var(--accent-glow);
    outline: none;
}

[data-theme="treasurysystem"] #messages-container::-webkit-scrollbar-thumb {
    background: var(--accent-3);
}

[data-theme="treasurysystem"] #messages-container::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* Theme picker — green selection state. */
[data-theme="treasurysystem"] .theme-option {
    background-color: rgba(0, 18, 6, 0.5);
}

[data-theme="treasurysystem"] .theme-option.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-glow), 0 0 14px var(--accent-glow);
    background-image: var(--accent-gradient-soft);
}

[data-theme="treasurysystem"] .theme-option.active .theme-option-check {
    color: #001a06;
}

/* Chat list rows — translucent with a green hover glow. */
[data-theme="treasurysystem"] .chat-item {
    background-color: transparent;
    border-bottom: 1px solid rgba(0, 255, 102, 0.08);
}

[data-theme="treasurysystem"] .chat-item:hover {
    background-color: rgba(0, 255, 102, 0.06);
}

/* Modals, dropdowns and settings panel — dark translucent green glass. */
[data-theme="treasurysystem"] .modal {
    background-color: rgba(0, 0, 0, 0.75);
}

[data-theme="treasurysystem"] .modal-content,
[data-theme="treasurysystem"] .search-dropdown,
[data-theme="treasurysystem"] #settings-panel,
[data-theme="treasurysystem"] .mobile-panel {
    background-color: rgba(0, 10, 4, 0.92);
    border: 1px solid var(--hairline-strong);
    box-shadow: 0 0 30px rgba(0, 255, 102, 0.15);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

[data-theme="treasurysystem"] .input-group input {
    background-color: var(--surface-2);
    border-color: var(--hairline);
    color: var(--text);
}

[data-theme="treasurysystem"] .input-group input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Create Qing modal button — dark text on neon green for contrast. */
[data-theme="treasurysystem"] #create-qing-button {
    background-image: var(--accent-gradient);
    color: #001a06;
    text-shadow: none;
    box-shadow: 0 0 20px var(--accent-glow);
}

[data-theme="treasurysystem"] #create-qing-button:hover:not(:disabled) {
    box-shadow: 0 0 28px var(--accent-glow);
}

[data-theme="treasurysystem"] #create-qing-button:disabled {
    background: var(--surface-3);
    background-image: none;
    color: var(--text-secondary);
}

/* Send button glow. */
[data-theme="treasurysystem"] #send-button {
    background-image: var(--accent-gradient);
    box-shadow: 0 0 16px var(--accent-glow);
}

/* Connect-wallet CTA gets a neon-green glow. */
[data-theme="treasurysystem"] #connect-wallet-btn {
    box-shadow: 0 0 24px var(--accent-glow) !important;
    color: #001a06 !important;
}

[data-theme="treasurysystem"] #sidebar-footer {
    border-top: none;
}

/* --------------------------------------------------------------------------
   Mobile layout — match Modern/Original.
   backdrop-filter on #sidebar creates a containing block so position:fixed
   #sidebar-footer sticks to the sidebar bottom (65px above the viewport).
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    [data-theme="treasurysystem"] #sidebar {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Open chat view — solid background like Modern/Original; sidebar panel unchanged. */
    [data-theme="treasurysystem"] #chat-container,
    [data-theme="treasurysystem"] #chat-container.active,
    [data-theme="treasurysystem"] #messages-container {
        background-color: var(--bg);
        background-image: none;
    }

    [data-theme="treasurysystem"] body.chat-active #chat-header,
    [data-theme="treasurysystem"] body.chat-active #message-input-container {
        background-color: #000c04;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    [data-theme="treasurysystem"] .mobile-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 65px;
        z-index: 1000;
    }

    [data-theme="treasurysystem"] #chat-container.active {
        position: fixed;
    }
}