/* ==========================================================================
   Sleek theme — black & red gradient, high-end cyberpunk minimalism.
   Matte-black surfaces transitioning into crimson/blood-red gradients with
   thin glowing red hairlines and glossy metallic chrome. All rules scoped
   under [data-theme="sleek"] so the theme is fully self-contained.
   The subtle drifting particle/line field is rendered by js/themes/sleek.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="sleek"] {
    /* Core surfaces — deep matte black with glossy translucent panels */
    --bg: #050506;
    --surface: rgba(16, 10, 12, 0.72);
    --surface-2: rgba(24, 12, 16, 0.7);
    --surface-3: rgba(34, 14, 20, 0.72);
    --hairline: rgba(255, 40, 60, 0.16);
    --hairline-strong: rgba(255, 40, 60, 0.38);

    /* Brand / accent — blood-red to crimson */
    --accent: #ff1f3d;
    --accent-2: #c40d23;
    --accent-3: #7a0511;
    --accent-gradient: linear-gradient(135deg, #ff2d4d 0%, #c40d23 55%, #7a0511 100%);
    --accent-gradient-soft: linear-gradient(135deg, rgba(255, 45, 77, 0.18) 0%, rgba(196, 13, 35, 0.18) 55%, rgba(122, 5, 17, 0.18) 100%);
    --accent-glow: rgba(255, 31, 61, 0.5);

    /* Text */
    --text: #f6eaec;
    --text-secondary: #b07079;

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

    /* Shape & elevation — smooth, premium rounding with red-tinted glow */
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --shadow: 0 10px 36px rgba(0, 0, 0, 0.7), 0 0 26px rgba(255, 31, 61, 0.08);
    --shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 31, 61, 0.06);

    /* 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: #c40d23;
    --tg-message-received: var(--surface-2);
    --tg-input-background: var(--surface);
    --mobile-nav-height: 65px;
}

[data-theme="sleek"] body {
    background-color: #050506;
    /* Matte black base with a soft volumetric crimson bloom for depth. */
    background-image:
        radial-gradient(1200px 820px at 50% -8%, rgba(255, 31, 61, 0.10), transparent 70%),
        radial-gradient(900px 700px at 50% 108%, rgba(122, 5, 17, 0.12), transparent 72%);
    color: var(--text);
}

[data-theme="sleek"] .material-icons {
    text-shadow: 0 0 8px var(--accent-glow);
}

/* --------------------------------------------------------------------------
   Effects layer: full-viewport canvas + vignette behind the sidebar UI.
   Sits behind every app surface (z-index 0); UI is lifted above it.
   -------------------------------------------------------------------------- */
[data-theme="sleek"] #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 particle field stays out of the main chat panel. */
[data-theme="sleek"] #theme-effects-layer canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}

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

/* --------------------------------------------------------------------------
   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="sleek"] #sidebar,
[data-theme="sleek"] #chat-container {
    position: relative;
    z-index: 1;
}

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

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

/* Glossy translucent panels with a thin glowing red edge. */
[data-theme="sleek"] #sidebar {
    background-color: var(--surface);
    background-image: linear-gradient(180deg, rgba(255, 45, 77, 0.05) 0%, rgba(0, 0, 0, 0) 40%);
    border-right: 1px solid var(--hairline-strong);
    box-shadow: inset -1px 0 0 rgba(255, 40, 60, 0.18), 0 0 40px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

[data-theme="sleek"] #sidebar-header {
    background-color: rgba(16, 10, 12, 0.55);
    border-color: var(--hairline);
}

[data-theme="sleek"] #chat-header,
[data-theme="sleek"] #message-input-container {
    background-color: rgba(16, 10, 12, 0.62);
    border-color: var(--hairline-strong);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="sleek"] #chat-header {
    box-shadow: 0 1px 0 rgba(255, 40, 60, 0.16);
}

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

/* Brand name and empty-state headings: crimson glow. */
[data-theme="sleek"] .app-name,
[data-theme="sleek"] #connection-prompt h2,
[data-theme="sleek"] #no-chat-selected {
    text-shadow: 0 0 14px var(--accent-glow), 0 0 26px rgba(255, 31, 61, 0.35);
    color: var(--text);
}

/* Message bubbles. */
[data-theme="sleek"] .message {
    box-shadow: var(--shadow-sm);
}

[data-theme="sleek"] .message.sent {
    background-image: var(--accent-gradient);
    color: #fff5f6;
    box-shadow: 0 6px 18px rgba(122, 5, 17, 0.4), 0 0 16px rgba(255, 31, 61, 0.22);
}

[data-theme="sleek"] .message.sent .message-header,
[data-theme="sleek"] .message.sent .message-sender,
[data-theme="sleek"] .message.sent .message-time {
    color: rgba(255, 245, 246, 0.82);
}

[data-theme="sleek"] .message.received {
    background-color: rgba(24, 12, 16, 0.9);
    border: 1px solid var(--hairline-strong);
    color: #f6eaec;
}

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

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

/* Status accents remapped to crimson variants. */
[data-theme="sleek"] .message.new-message {
    border-left-color: var(--accent) !important;
    background-color: rgba(255, 31, 61, 0.08) !important;
}

[data-theme="sleek"] .message.real-time-message {
    border-left-color: var(--accent-2) !important;
    background-color: rgba(196, 13, 35, 0.08) !important;
}

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

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

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

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

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

/* Chat list rows — translucent with a red hover glow. */
[data-theme="sleek"] .chat-item {
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 40, 60, 0.07);
}

[data-theme="sleek"] .chat-item:hover {
    background-color: rgba(255, 31, 61, 0.06);
}

[data-theme="sleek"] .chat-item.active {
    background-image: var(--accent-gradient-soft);
    box-shadow: inset 2px 0 0 var(--accent);
}

/* Theme picker — crimson selection state. */
[data-theme="sleek"] .theme-option {
    background-color: rgba(24, 12, 16, 0.55);
}

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

[data-theme="sleek"] .theme-option.active .theme-option-check {
    color: #fff5f6;
}

/* Modals, dropdowns and settings panel — dark glossy red-tinted glass. */
[data-theme="sleek"] .modal {
    background-color: rgba(0, 0, 0, 0.78);
}

[data-theme="sleek"] .modal-content,
[data-theme="sleek"] .search-dropdown,
[data-theme="sleek"] #settings-panel,
[data-theme="sleek"] .mobile-panel {
    background-color: rgba(14, 8, 10, 0.94);
    border: 1px solid var(--hairline-strong);
    box-shadow: 0 0 34px rgba(255, 31, 61, 0.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

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

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

/* Create Qing modal button — crimson gradient with glow. */
[data-theme="sleek"] #create-qing-button {
    background-image: var(--accent-gradient);
    color: #fff5f6;
    box-shadow: 0 0 22px var(--accent-glow);
}

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

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

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

/* Connect-wallet CTA gets a crimson glow. */
[data-theme="sleek"] #connect-wallet-btn {
    box-shadow: 0 0 26px var(--accent-glow) !important;
    color: #fff5f6 !important;
}

[data-theme="sleek"] #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="sleek"] #sidebar {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

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

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

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

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