/**
 * Glass surface theme for Cheetah Reader
 *
 * This file owns the *look* of the app chrome (sidebars, buttons, inputs,
 * cards). app.css / chapters-sidebar.css own layout and behaviour. Keep it
 * that way - one source of truth per concern.
 *
 * Design intent: a calm reading tool. Frosted glass on ONE layer (the
 * sidebars), quiet hover feedback, and zero always-on animation.
 */

:root {
    /* Glass materials */
    --glass-bg-sidebar: rgba(20, 20, 30, 0.82);
    --glass-bg-panel: rgba(255, 255, 255, 0.06);
    --glass-bg-hover: rgba(255, 255, 255, 0.12);
    --glass-bg-active: rgba(96, 165, 250, 0.22);

    --glass-blur: blur(20px);

    --glass-border: rgba(255, 255, 255, 0.16);
    --glass-border-accent: rgba(96, 165, 250, 0.55);

    --glass-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.18);
    --glass-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.22);

    --glass-accent: #60a5fa;
    --glass-accent-hover: #3b82f6;
}

/* ============================================
   BODY
   ============================================ */

body {
    background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
    background-attachment: fixed;
    overflow: hidden;
}

/* Static ambient tint - no animation */
#app::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 28% 20%, rgba(96, 165, 250, 0.10) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   SIDEBARS - the one frosted-glass layer
   ============================================ */

#sidebar,
#chapters-sidebar {
    background: var(--glass-bg-sidebar);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}

#chapters-sidebar { border-width: 0 1px 0 0; }
#sidebar { border-width: 0 0 0 1px; }

/* ============================================
   SIDEBAR SECTION CARDS
   ============================================ */

.sidebar-section,
.book-metadata {
    background: var(--glass-bg-panel);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
}

.section-header {
    background: transparent;
    transition: background 0.18s ease;
}

.section-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* ============================================
   TOGGLE BUTTONS (floating)
   ============================================ */

.sidebar-toggle,
.chapters-toggle {
    background: var(--glass-bg-sidebar);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow-md);
}

/* ============================================
   BUTTONS
   ============================================ */

button {
    background: var(--glass-bg-panel);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-sm);
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

button:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-accent);
}

button:active {
    background: rgba(255, 255, 255, 0.16);
}

button.active {
    background: var(--glass-bg-active);
    border-color: var(--glass-accent);
    color: #fff;
}

/* Primary upload action */
.upload-btn {
    background: rgba(96, 165, 250, 0.9);
    border: 1px solid rgba(96, 165, 250, 0.9);
    color: #0b1220;
    box-shadow: var(--glass-shadow-md);
}

.upload-btn:hover {
    background: rgba(96, 165, 250, 1);
    border-color: rgba(96, 165, 250, 1);
    color: #0b1220;
}

.paste-btn {
    background: var(--glass-bg-panel);
    border: 1px solid var(--glass-border);
    color: var(--ui-text, #ececf1);
}

.paste-btn:hover {
    background: var(--glass-bg-hover);
    color: var(--ui-text, #ececf1);
}

.chapter-nav-btn {
    background: var(--glass-bg-panel);
    border: 1px solid var(--glass-border);
}

.chapter-nav-btn:hover:not(:disabled) {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-accent);
}

.reset-link {
    background: none;
    border: none;
    box-shadow: none;
}

/* ============================================
   SELECTS
   ============================================ */

select {
    background: var(--glass-bg-panel);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-sm);
    transition: background 0.18s ease, border-color 0.18s ease;
}

select:hover {
    background: var(--glass-bg-hover);
}

/* ============================================
   CHAPTER LIST ITEMS
   ============================================ */

.chapter-item {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.chapter-item:hover {
    background: var(--glass-bg-panel);
    border-color: var(--glass-border);
}

.chapter-item.active {
    background: var(--glass-bg-active);
    border-color: var(--glass-accent);
}

/* ============================================
   CHAPTER NAV BAR
   ============================================ */

.chapter-nav-bar {
    background: var(--glass-bg-sidebar);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--glass-border);
}

/* ============================================
   READER SURFACE
   ============================================ */

#reader-container {
    background: rgba(20, 20, 30, 0.35);
    position: relative;
}

.ebook-reader-area {
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-md);
}

/* ============================================
   BOOK COVER
   ============================================ */

.book-cover-placeholder {
    background: var(--glass-bg-panel);
    border: 1px solid var(--glass-border);
}

/* ============================================
   SCROLLBARS
   ============================================ */

#sidebar::-webkit-scrollbar,
#chapters-sidebar::-webkit-scrollbar,
.chapters-list::-webkit-scrollbar {
    width: 8px;
}

#sidebar::-webkit-scrollbar-thumb,
#chapters-sidebar::-webkit-scrollbar-thumb,
.chapters-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 4px;
}

#sidebar::-webkit-scrollbar-thumb:hover,
#chapters-sidebar::-webkit-scrollbar-thumb:hover,
.chapters-list::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.5);
}

/* ============================================
   ONE-SHOT ENTRANCE (not looping)
   ============================================ */

.sidebar-section {
    animation: fadeInUp 0.3s ease backwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    #app::before { background: none; }
    .sidebar-section { animation: none; }
}