/* ==========================================================================
   Books Catalog — "Paper & Gilt" Design System

   Aesthetic: Warm paper reading surface + a midnight-and-gold "Gilt" world for
   every AI feature. Editorial, tactile, index-card texture.
   Color palette: Warm paper cream + rust accent (ink for body copy);
   AI features live on a midnight surface with gilt (gold) accents.
   Typography: Hanken Grotesk (UI) + Newsreader serif (editorial headings /
   book titles) + IBM Plex Mono (labels).
   ========================================================================== */

/* --- Bootstrap Icons font-display override ---
   The CDN stylesheet omits font-display, causing invisible icon text
   during load. This override adds swap to prevent FOIT. */
@font-face {
    font-family: 'bootstrap-icons';
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6') format('woff2');
}

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
    /* Palette — warm paper + rust */
    --color-bg:          #F4EEE1;
    --color-bg-card:     #FDFBF5;
    --color-bg-subtle:   #EFE8D9;
    --color-ink:         #221C15;
    --color-ink-light:   #4A4136;
    --color-ink-muted:   #6B6154;
    --color-accent:      #B0432B;
    --color-accent-hover:#8C3320;
    --color-border:      #E4D9C4;
    --color-border-focus:#B0432B;
    --color-success:     #3F6B45;
    --color-danger:      #8E2F1C;
    --color-warning-star:#C88A2E;

    /* Supporting accents — UI elements (status dots, tags, chart accents) */
    --color-teal:        #3E7D6E;
    --color-coral:       #E07A57;
    --color-gold:        #D6A24E;

    /* Gilt — the AI world (stays dark in BOTH themes) */
    --color-gilt:        #C68A34;
    --color-gilt-bright: #D6A24E;
    --color-gilt-soft:   #E7C384;
    --color-ai-surface:  #14213B;
    --color-ai-surface-2:#0E1830;
    --color-ai-ink:      #F4EEE1;
    --color-ai-ink-muted:#A9B2C4;
    --color-ai-border:   rgba(198,138,52,0.30);
    --color-ai-glow:     0 24px 60px rgba(10,16,30,0.25);

    /* Legacy AI gradient tokens — REPOINTED to solid so old usages stop looking
       indigo. Anything that referenced --color-ai-from/to/bg now renders
       gilt/midnight. */
    --color-ai-from:     #C68A34;
    --color-ai-to:       #D6A24E;
    --color-ai-bg:       #14213B;

    /* Typography */
    --font-display: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif:   'Newsreader', Georgia, 'Times New Roman', serif;
    --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;

    /* Shadows — diffuse, airy feel */
    --shadow-sm:  0 2px 6px rgba(15, 23, 42, 0.04);
    --shadow-md:  0 6px 18px rgba(15, 23, 42, 0.055);
    --shadow-lg:  0 12px 32px rgba(15, 23, 42, 0.08);
    --shadow-hover: 0 12px 32px rgba(15, 23, 42, 0.10);

    /* Borders — softer geometry */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 50%;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
}

/* --- Dark mode overrides --- */
[data-bs-theme="dark"] {
    --color-bg:          #17110B;
    --color-bg-card:     #201811;
    --color-bg-subtle:   #2B2016;
    --color-ink:         #F1E7D6;
    --color-ink-light:   #D8CCB8;
    --color-ink-muted:   #A99A83;
    --color-accent:      #E27A57;
    --color-accent-hover:#EE9070;
    --color-border:      #3A2C1D;
    --color-border-focus:#E27A57;
    --color-success:     #86B084;
    --color-danger:      #E88D71;
    --color-warning-star:#E7C384;

    /* Supporting accents — brightened for dark surfaces */
    --color-teal:        #5AA393;
    --color-coral:       #EE9070;
    --color-gold:        #E7C384;

    /* Gilt world stays midnight+gold regardless of app theme */
    --color-gilt:        #D6A24E;
    --color-gilt-bright: #E7C384;
    --color-ai-surface:  #101B31;
    --color-ai-surface-2:#0A1224;
    --color-ai-border:   rgba(214,162,78,0.32);
    --color-ai-from:     #D6A24E;
    --color-ai-to:       #E7C384;
    --color-ai-bg:       #101B31;

    --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.15);
    --shadow-md:  0 6px 18px rgba(0, 0, 0, 0.25);
    --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* Bootstrap component overrides for dark mode */
[data-bs-theme="dark"] .badge.bg-light {
    background-color: var(--color-bg-subtle) !important;
    color: var(--color-ink) !important;
    border-color: var(--color-border) !important;
}

[data-bs-theme="dark"] .table {
    --bs-table-bg: var(--color-bg-card);
    --bs-table-color: var(--color-ink);
    --bs-table-hover-bg: var(--color-bg-subtle);
    --bs-table-border-color: var(--color-border);
}

[data-bs-theme="dark"] .modal-content {
    background-color: var(--color-bg-card);
    color: var(--color-ink);
    border-color: var(--color-border);
}

[data-bs-theme="dark"] .input-group-text {
    background-color: var(--color-bg-subtle);
    color: var(--color-ink-muted);
    border-color: var(--color-border);
}

[data-bs-theme="dark"] .progress {
    background-color: var(--color-bg-subtle);
    border-color: var(--color-border);
}

/* Dark mode theme toggle button */
.bc-theme-toggle {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0;
}

.bc-theme-toggle:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* --- Base Reset & Body --- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-ink);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    flex: 1;
}

/* --- Typography --- */
h1, h2 {
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-ink);
    letter-spacing: -0.02em;
}

h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-ink);
    letter-spacing: -0.01em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

@media (min-width: 768px) {
    h1 { font-size: 3.25rem; }
    h2 { font-size: 2.5rem; }
}

p {
    color: var(--color-ink-light);
    margin-bottom: var(--space-md);
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-hover);
}

/* Book title typography — serif for literary character */
.bc-book-title {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Subtle decorative line used as section divider */
.divider {
    width: 60px;
    height: 3px;
    background: var(--color-accent);
    border: none;
    margin: var(--space-lg) 0;
    border-radius: 2px;
}

/* --- Skip to content (accessibility) --- */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-md);
    background: var(--color-accent);
    color: #fff;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    z-index: 9999;
    font-weight: 600;
}

.skip-link:focus {
    top: var(--space-md);
    color: #fff;
}

/* --- Navbar --- */
.bc-navbar {
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-sm) 0;
    box-shadow: var(--shadow-sm);
}

.bc-navbar .navbar-brand {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-ink);
    letter-spacing: -0.02em;
}

.bc-navbar .navbar-brand i {
    color: var(--color-accent);
    margin-right: var(--space-xs);
}

.bc-navbar .nav-link {
    font-weight: 500;
    color: var(--color-ink-light);
    padding: var(--space-sm) var(--space-md) !important;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    font-size: 0.95rem;
}

.bc-navbar .nav-link:hover,
.bc-navbar .nav-link.active {
    color: var(--color-accent);
    background: var(--color-bg-subtle);
}

.bc-navbar .avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid var(--color-border);
    transition: border-color var(--transition-fast);
}

.bc-navbar .avatar:hover {
    border-color: var(--color-accent);
}

/* --- Buttons --- */
.btn-accent {
    background: var(--color-accent);
    color: #fff;
    border: 1px solid var(--color-accent);
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-lg);
    transition: all var(--transition-fast);
}

.btn-accent:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #fff;
    box-shadow: var(--shadow-md);
}

.btn-outline-accent {
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-lg);
    transition: all var(--transition-fast);
}

.btn-outline-accent:hover {
    background: var(--color-accent);
    color: #fff;
}

/* --- Cards --- */
.bc-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
    overflow: hidden;
}

.bc-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
}

.bc-card .card-body {
    padding: var(--space-lg);
}

/* --- AI-powered feature cards: the "Gilt" world ---
   A solid midnight surface (dark on the light paper page = "special"),
   with a single gilt hairline. Stays midnight+gold in both app themes. */
.bc-ai-card {
    background: var(--color-ai-surface);
    color: var(--color-ai-ink);
    border: 1px solid var(--color-ai-border);
    border-radius: var(--radius-md);
    box-shadow: var(--color-ai-glow);
    overflow: hidden;
    position: relative;
}

.bc-ai-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-gilt-bright);   /* single gilt hairline, no gradient */
}

.bc-ai-card .card-body {
    padding: var(--space-lg);
}

/* Text inside the dark card must flip light. */
.bc-ai-card,
.bc-ai-card h1,
.bc-ai-card h2,
.bc-ai-card h3,
.bc-ai-card h4,
.bc-ai-card h5,
.bc-ai-card p {
    color: var(--color-ai-ink);
}

.bc-ai-card .text-muted {
    color: var(--color-ai-ink-muted) !important;
}

.bc-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25em 0.6em;
    border-radius: var(--radius-sm);
    background: var(--color-gilt);
    color: #0E1830;
}

/* --- Book cover images --- */
.book-cover {
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base);
}

.book-cover:hover {
    transform: scale(1.03);
}

.book-cover-sm {
    width: 80px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

/* --- Progressive-disclosure wrapper (Add Book manual form) ---
   Hidden via display:none, NOT removed — all form-init JS (Quill, Tom Select,
   field visibility) still runs at load because the nodes exist in the DOM. */
.bc-collapsible { transition: none; }
.bc-collapsible.is-collapsed { display: none; }

/* --- Cover-forward library shelf (My Books card view) --- */
.bc-shelf-item { display: flex; flex-direction: column; gap: .8rem; }
.bc-cover-link { display: block; height: 100%; }
.bc-cover {
    position: relative; aspect-ratio: 2/3; border-radius: var(--radius-sm); overflow: hidden;
    background: var(--color-bg-subtle);
    box-shadow: 0 10px 22px rgba(34,28,21,.22), inset 3px 0 0 rgba(255,255,255,.14), inset -1px 0 0 rgba(0,0,0,.2);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.bc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-cover:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(34,28,21,.20); }
.bc-cover::before { /* status ribbon at top */
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2; background: var(--color-ink-muted);
}
.bc-status-edge-to_read::before   { background: var(--color-coral); }
.bc-status-edge-reading::before   { background: var(--color-teal); }
.bc-status-edge-finished::before  { background: var(--color-gold); }
.bc-status-edge-abandoned::before { background: var(--color-border); }
.bc-cover-fallback { width: 100%; height: 100%; padding: 14px 12px; display: flex; flex-direction: column; justify-content: space-between; }
.bc-cover-fallback-title  { font-family: var(--font-serif); font-size: 1rem; line-height: 1.15; color: #F6EFE1; }
.bc-cover-fallback-author { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(246,239,225,.72); }
.bc-cover-actions {
    position: absolute; inset: auto 8px 8px 8px; display: flex; gap: 6px; justify-content: flex-end;
    opacity: 0; transform: translateY(6px); transition: all var(--transition-fast); z-index: 3;
}
.bc-cover:hover .bc-cover-actions, .bc-cover:focus-within .bc-cover-actions { opacity: 1; transform: none; }
.bc-shelf-meta .bc-book-title { display: block; font-size: .95rem; color: var(--color-ink); text-decoration: none; line-height: 1.2; }
.bc-shelf-author { font-size: .8rem; color: var(--color-ink-muted); margin-top: 2px; }
.bc-shelf-line { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.bc-shelf-status { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; }
.bc-status-text-to_read   { color: var(--color-coral); }
.bc-status-text-reading   { color: var(--color-teal); }
.bc-status-text-finished  { color: var(--color-gold); }
.bc-status-text-abandoned { color: var(--color-ink-muted); }
.bc-shelf-rating { color: var(--color-warning-star); font-size: .8rem; }
@media (max-width: 575.98px) { .bc-cover-actions { opacity: 1; transform: none; } } /* always-visible on touch */

/* --- Rating stars --- */
.rating-stars .bi {
    font-size: 1rem;
}

.text-warning {
    color: var(--color-warning-star) !important;
}

/* --- Forms --- */
.bc-form .form-control,
.bc-form .form-select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.9rem;
    font-size: 0.95rem;
    color: var(--color-ink);
    background-color: var(--color-bg-card);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.bc-form .form-control:focus,
.bc-form .form-select:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px rgba(176, 67, 43, 0.18);
    outline: none;
}

.bc-form .form-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-ink);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bc-form .form-text {
    color: var(--color-ink-muted);
    font-size: 0.82rem;
}

.bc-form .invalid-feedback,
.bc-form .text-danger {
    color: var(--color-danger);
    font-size: 0.82rem;
}

/* Tom Select overrides */
.ts-wrapper .ts-control {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.5rem 0.75rem !important;
    background: var(--color-bg-card) !important;
}

.ts-wrapper.focus .ts-control {
    border-color: var(--color-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(176, 67, 43, 0.15) !important;
}

/* --- Auth pages (login, signup, etc.) --- */
.auth-card {
    max-width: 440px;
    margin: var(--space-2xl) auto;
}

.auth-card .bc-card {
    padding: var(--space-xl);
}

.social-divider {
    display: flex;
    align-items: center;
    margin: var(--space-lg) 0;
    color: var(--color-ink-muted);
    font-size: 0.85rem;
}

.social-divider::before,
.social-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.social-divider span {
    padding: 0 var(--space-md);
}

/* --- Hero section --- */
.bc-hero {
    padding: var(--space-2xl) 0;
}

.bc-hero h1 {
    font-size: 2.75rem;
    line-height: 1.1;
    margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
    .bc-hero h1 {
        font-size: 3.75rem;
    }
}

.bc-hero p {
    font-size: 1.15rem;
    max-width: 540px;
}

/* Home hero — decorative cover shelf (replaces the old illustration) */
.bc-hero-shelf {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    height: 300px;
    padding-bottom: 14px;
    border-bottom: 6px solid var(--color-border);
}
.bc-hero-spine {
    width: 46px;
    height: var(--h, 90%);
    border-radius: 3px 3px 0 0;
    box-shadow: inset 3px 0 0 rgba(255,255,255,.14), inset -1px 0 0 rgba(0,0,0,.2), 0 8px 18px rgba(34,28,21,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.bc-hero-spine span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-serif);
    font-size: .82rem;
    color: #F6EFE1;
    white-space: nowrap;
    max-height: 82%;
    overflow: hidden;
}
@media (max-width: 991.98px) {
    .bc-hero-shelf { height: 220px; margin-top: 1.5rem; }
}

/* Home hero (logged-out) — a fanned shelf of cover cards. Each card is
   absolutely stacked at the centre, then rotated about a shared pivot well
   below the fan, which splays the cards into a convex arc: the upright front
   cover sits highest and centre, the rest cascade out and down. */
.bc-hero-fan {
    position: relative;
    height: 320px;
    max-width: 100%;
    margin: 0 auto;
}
.bc-hero-cover {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 132px;
    height: 196px;
    margin-left: -66px;
    padding: 16px 15px;
    display: flex;
    flex-direction: column;
    border-radius: 4px 4px 7px 7px;
    color: #F6EFE1;
    box-shadow: 0 16px 32px rgba(34,28,21,.30),
                inset 3px 0 0 rgba(255,255,255,.12),
                inset -1px 0 0 rgba(0,0,0,.22);
    transform-origin: 50% 430px;
    transform: rotate(var(--rot, 0deg));
}
.bc-hero-cover-title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.15;
}
.bc-hero-cover-author {
    margin-top: auto;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(246,239,225,.72);
}
@media (max-width: 991.98px) {
    .bc-hero-fan { transform: scale(0.82); margin-top: 1rem; }
}
@media (max-width: 575.98px) {
    .bc-hero-fan { transform: scale(0.62); height: 230px; }
}

/* Empty-state "waiting shelf" — blank cloth spines with a rust bookmark
   ribbon. Used where the user has no books yet (no real covers to show). */
.bc-empty-shelf {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 7px;
    height: 120px;
    margin-bottom: var(--space-xl);
    padding-bottom: 10px;
    border-bottom: 5px solid var(--color-border);
}
.bc-empty-spine {
    width: 30px;
    height: var(--h, 90%);
    border-radius: 2px 2px 0 0;
    box-shadow: inset 3px 0 0 rgba(255,255,255,.12), inset -1px 0 0 rgba(0,0,0,.2), 0 6px 14px rgba(34,28,21,.18);
}
/* The one spine with a bookmark ribbon spilling over its top edge. */
.bc-empty-spine--marked {
    position: relative;
}
.bc-empty-spine--marked::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 30px;
    background: var(--color-accent);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}

/* --- Stats cards (dashboard) --- */
.stat-card {
    text-align: center;
    padding: var(--space-lg);
}

.stat-card .stat-value {
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-weight: 500;
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.stat-card .stat-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-ink-muted);
}

/* Compact stat cards (6-column row) */
.stat-card-compact {
    text-align: center;
    padding: var(--space-md) var(--space-sm);
}

.stat-card-compact .stat-value-compact {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.stat-card-compact .stat-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted);
}

/* --- Reading Ledger (dashboard stat row) ---
   One card, six cells separated by hairline dividers. The stat classes are
   used bare here (not under .stat-card-compact), so style them in-context. */
.bc-ledger { display: grid; grid-template-columns: repeat(6, 1fr); }
.bc-ledger-cell {
    padding: 28px 22px;
    border-right: 1px solid var(--color-border);
    text-align: center;
}
.bc-ledger-cell:last-child { border-right: none; }
.bc-ledger-cell .stat-value-compact {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: 6px;
}
.bc-ledger-cell .stat-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted);
}
@media (max-width: 767.98px) {
    .bc-ledger { grid-template-columns: repeat(3, 1fr); }
    .bc-ledger-cell:nth-child(3n) { border-right: none; }
    .bc-ledger-cell:nth-child(n+4) { border-top: 1px solid var(--color-border); }
}

/* --- Chart containers --- */
.chart-card {
    padding: var(--space-lg);
}

.chart-card-header {
    margin-bottom: var(--space-md);
}

.chart-card-header h3 {
    font-size: 1rem;
    margin-bottom: 0.15rem;
    color: var(--color-ink);
}

.chart-card-header p {
    font-size: 0.82rem;
    color: var(--color-ink-muted);
    margin-bottom: 0;
}

.chart-card canvas {
    width: 100% !important;
    height: auto !important;
}

/* Shown in place of a chart when there isn't enough data to plot yet. */
.bc-chart-empty {
    padding: 48px 24px;
    text-align: center;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--color-ink-muted);
}

/* Currently reading covers in dashboard */
.currently-reading-cover {
    width: 40px;
    height: 60px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.currently-reading-cover-placeholder {
    width: 40px;
    height: 60px;
    background: var(--color-bg-subtle);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- Footer --- */
.bc-footer {
    background: var(--color-bg-card);
    border-top: 1px solid var(--color-border);
    padding: var(--space-lg) 0;
    flex-shrink: 0;
    margin-top: var(--space-2xl);
}

.bc-footer a {
    color: var(--color-ink-muted);
    font-size: 0.85rem;
}

.bc-footer a:hover {
    color: var(--color-accent);
}

.bc-footer .text-muted {
    font-size: 0.82rem;
    color: var(--color-ink-muted) !important;
}

/* --- Messages / Alerts --- */
.bc-alert {
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    color: var(--color-ink);
    padding: var(--space-md) var(--space-lg);
}

/* --- Empty state --- */
.empty-state {
    text-align: center;
    padding: var(--space-2xl) var(--space-md);
}

.empty-state img {
    max-width: 280px;
    margin-bottom: var(--space-xl);
    opacity: 0.85;
}

/* Legacy Bootstrap icon empty states (e.g. filtered "No X books") keep some
   breathing room below the icon. */
.empty-state > .bi {
    margin-bottom: var(--space-sm);
}

/* --- Simple-DataTables overrides --- */
.dataTable-wrapper {
    font-size: 0.9rem;
}

.dataTable-wrapper .dataTable-table {
    border-collapse: collapse;
}

.dataTable-wrapper .dataTable-table th {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-ink-muted);
    border-bottom: 2px solid var(--color-border);
    padding: var(--space-sm) var(--space-md);
}

.dataTable-wrapper .dataTable-table td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.dataTable-wrapper .dataTable-input,
.dataTable-wrapper .dataTable-selector {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-xs) var(--space-sm);
}

/* --- Page-level animations --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-in {
    animation: fadeInUp 0.5s ease forwards;
}

.animate-in-delay-1 { animation-delay: 0.1s; opacity: 0; }
.animate-in-delay-2 { animation-delay: 0.2s; opacity: 0; }
.animate-in-delay-3 { animation-delay: 0.3s; opacity: 0; }

/* --- Reduced motion: disable entrance/pulse/shimmer animations --- */
@media (prefers-reduced-motion: reduce) {
    .animate-in,
    .animate-in-delay-1,
    .animate-in-delay-2,
    .animate-in-delay-3 { animation: none !important; opacity: 1 !important; }
    .bc-voice-btn.btn-danger,
    .bc-skeleton,
    .bc-chat-typing span { animation: none !important; }
    html { scroll-behavior: auto; }
}

/* --- Responsive utilities --- */
@media (max-width: 767.98px) {
    .bc-hero {
        text-align: center;
        padding: var(--space-xl) 0;
    }

    .bc-hero p {
        margin-left: auto;
        margin-right: auto;
    }

    .stat-card .stat-value {
        font-size: 1.75rem;
    }
}

/* --- Book detail layout --- */
/* --- Book detail page — paper-surface header + paper body for the work. --- */
.bc-book-detail {
    margin-top: var(--space-md);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
}

.bc-book-header {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-xl);
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
}

.bc-book-header-cover {
    flex: 0 0 auto;
    width: 180px;
    aspect-ratio: 2 / 3;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.bc-book-header-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bc-book-header-meta { min-width: 0; padding-top: var(--space-sm); }

.bc-book-status-kicker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}
.bc-book-kicker-sep { opacity: 0.5; }
.bc-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-teal);
    flex-shrink: 0;
}
.bc-status-dot--reading   { background: var(--color-teal); }
.bc-status-dot--finished  { background: var(--color-gold); }
.bc-status-dot--to_read   { background: var(--color-coral); }
.bc-status-dot--abandoned { background: var(--color-ink-muted); }

.bc-book-header-title {
    margin: 0 0 0.35rem;
    font-family: var(--font-serif);
    font-size: 2.4rem;
    line-height: 1.05;
    color: var(--color-ink);
}
.bc-book-header-author {
    margin: 0 0 1.35rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--color-ink-light);
}

.bc-book-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* Paper body — main column + metadata sidebar */
.bc-book-body {
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: var(--space-xl);
    padding: var(--space-xl);
    background: var(--color-bg-card);
}

.bc-book-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    min-width: 0;
}

.bc-book-section-label {
    margin: 0 0 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Review — a rust-ruled pull quote */
.bc-book-review {
    border-left: 3px solid var(--color-accent);
    padding-left: 1.1rem;
    font-style: italic;
    color: var(--color-ink-light);
}

/* Metadata sidebar */
.bc-book-aside { display: flex; flex-direction: column; }
.bc-book-aside-item {
    padding: 0.85rem 0;
    border-top: 1px solid var(--color-border);
}
.bc-book-aside-item:first-child { padding-top: 0; border-top: none; }
.bc-book-aside-label {
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}
.bc-book-aside-value { color: var(--color-ink); }

@media (max-width: 768px) {
    .bc-book-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--space-lg);
    }
    .bc-book-header-cover { width: 140px; }
    .bc-book-header-actions { justify-content: center; }
    .bc-book-header-title { font-size: 1.9rem; }
    .bc-book-body {
        grid-template-columns: 1fr;
        padding: var(--space-lg);
    }
}

/* --- Status badges --- */
.bc-status-badge {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3em 0.7em;
    border-radius: var(--radius-sm);
}

.bc-status-to_read {
    background: rgba(176, 67, 43, 0.1);
    color: var(--color-accent);
}

.bc-status-reading {
    background: rgba(62, 125, 110, 0.12);
    color: #2E6356;
}

.bc-status-finished {
    background: rgba(214, 162, 78, 0.12);
    color: #8A6A20;
}

.bc-status-abandoned {
    background: rgba(107, 97, 84, 0.12);
    color: var(--color-ink-muted);
}

/* Dark mode status badge overrides */
[data-bs-theme="dark"] .bc-status-to_read {
    background: rgba(226, 122, 87, 0.16);
    color: var(--color-accent);
}

[data-bs-theme="dark"] .bc-status-reading {
    background: rgba(90, 163, 147, 0.16);
    color: var(--color-teal);
}

[data-bs-theme="dark"] .bc-status-finished {
    background: rgba(231, 195, 132, 0.16);
    color: var(--color-gold);
}

[data-bs-theme="dark"] .bc-status-abandoned {
    background: rgba(169, 154, 131, 0.18);
    color: var(--color-ink-muted);
}

/* --- Tag badge --- */
.bc-tag {
    background: rgba(62, 125, 110, 0.1);
    color: var(--color-teal);
    border: 1px solid rgba(62, 125, 110, 0.2);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.35em 0.7em;
    border-radius: var(--radius-sm);
}

/* --- Status filter tabs --- */
.bc-status-tabs {
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.bc-status-tabs .nav-link {
    color: var(--color-ink-light);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    border: 1px solid transparent;
    transition: all var(--transition-fast);
}

.bc-status-tabs .nav-link:hover {
    background: var(--color-bg-subtle);
    color: var(--color-ink);
}

.bc-status-tabs .nav-link.active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

/* --- Book search results (Smart Add) --- */
/* Search-first: elevate the search input as the primary action. */
#bookSearchCard { box-shadow: var(--shadow-md); }
#bookSearchInput {
    font-size: 1.15rem;
    padding: 0.75rem 1rem;
}

.bc-search-result-title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--color-ink);
}

/* Language flag on non-English search results — a quiet gilt pill so a
   foreign-language edition is obvious before the user picks it. */
.bc-lang-pill {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.4rem;
    padding: 0.05rem 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-ink-light);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-gilt);
    border-radius: 999px;
    white-space: nowrap;
}

.book-search-thumb {
    width: 60px;
    height: 90px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.book-search-thumb-placeholder {
    width: 60px;
    height: 90px;
    background: var(--color-bg-subtle);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-ink-muted);
}

.book-search-result {
    border-left: 3px solid transparent !important;
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast);
}

.book-search-result:hover {
    border-left-color: var(--color-accent) !important;
    background: var(--color-bg-subtle) !important;
}

/* --- Progress bar (reading goal) --- */
.progress {
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
}

.progress-bar {
    transition: width 0.6s ease;
    border-radius: 6px;
}

/* --- Quill editor overrides --- */
.bc-quill-editor {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    min-height: 120px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-ink);
}

.bc-quill-editor .ql-editor {
    min-height: 120px;
    max-height: 400px;
    overflow-y: auto;
}

.bc-quill-editor .ql-editor.ql-blank::before {
    color: var(--color-ink-muted);
    font-style: normal;
}

.ql-toolbar.ql-snow {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    background: var(--color-bg-subtle);
}

.ql-container.ql-snow {
    border: 1px solid var(--color-border) !important;
    border-top: none !important;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
}

/* Dark mode: Quill hard-codes a dark (#444) stroke/fill on its toolbar SVG
   icons, which is invisible against the dark toolbar background. Recolor the
   icons and picker labels to the theme's ink color, and use the indigo accent
   on hover/active/focus to mirror the affordance shown in light mode. */
[data-bs-theme="dark"] .ql-snow.ql-toolbar button,
[data-bs-theme="dark"] .ql-snow .ql-picker {
    color: var(--color-ink-light);
}

[data-bs-theme="dark"] .ql-snow .ql-stroke {
    stroke: var(--color-ink-light);
}

[data-bs-theme="dark"] .ql-snow .ql-fill {
    fill: var(--color-ink-light);
}

[data-bs-theme="dark"] .ql-snow.ql-toolbar button:hover .ql-stroke,
[data-bs-theme="dark"] .ql-snow.ql-toolbar button:focus .ql-stroke,
[data-bs-theme="dark"] .ql-snow.ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--color-accent);
}

[data-bs-theme="dark"] .ql-snow.ql-toolbar button:hover .ql-fill,
[data-bs-theme="dark"] .ql-snow.ql-toolbar button:focus .ql-fill,
[data-bs-theme="dark"] .ql-snow.ql-toolbar button.ql-active .ql-fill {
    fill: var(--color-accent);
}

/* Rich content display (book detail page) */
.bc-rich-content {
    line-height: 1.7;
    color: var(--color-ink-light);
}

.bc-rich-content p {
    margin-bottom: 0.5rem;
}

.bc-rich-content p:last-child {
    margin-bottom: 0;
}

.bc-rich-content ul,
.bc-rich-content ol {
    padding-left: 1.5rem;
}

.bc-rich-content blockquote {
    border-left: 3px solid var(--color-accent);
    padding-left: var(--space-md);
    color: var(--color-ink-muted);
    font-style: italic;
}

/* --- Reader DNA: illuminated artifact ---
   Styles the AI-generated HTML blob (flat <h3>/<p>/<ul> with book links and
   Add-to-TBR buttons) into a designed artifact: hero opener, numbered
   chapters, gilt rules and links, recommendation cards. Always renders on the
   midnight bc-ai-card, so the light ink reads in both themes. */
.bc-reader-dna-content { color: var(--color-ai-ink); counter-reset: dna; }

/* Body copy — lifted contrast for long-form reading on midnight */
.bc-reader-dna-content p,
.bc-reader-dna-content li { color: #D8CFBE; font-size: 1.02rem; line-height: 1.62; }
.bc-reader-dna-content strong { color: var(--color-ai-ink); font-weight: 700; }
.bc-reader-dna-content em { color: var(--color-ai-ink); }

/* Book links → gilt underline (was faint/near-invisible) */
.bc-reader-dna-content a {
    color: var(--color-gilt-bright);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(214, 162, 78, 0.5);
}
.bc-reader-dna-content a:hover { text-decoration-color: var(--color-gilt-bright); }

/* Section headers → numbered chapters with a gilt hairline above each */
.bc-reader-dna-content h3 {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    margin: 2.4rem 0 0.9rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--color-ai-border);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gilt-bright);
    background: none;
    -webkit-text-fill-color: currentColor;
}
.bc-reader-dna-content h3::before {
    counter-increment: dna;
    content: counter(dna, decimal-leading-zero);
    color: var(--color-gilt);
    font-size: 0.9em;
}

/* HERO — the first section (Reading Identity) is the showpiece, not a header */
.bc-reader-dna-content h3:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.bc-reader-dna-content h3:first-of-type::before {
    counter-increment: none;
    content: "\2726"; /* ✦ */
}
.bc-reader-dna-content h3:first-of-type + p {
    max-width: 24ch;
    margin-bottom: 1.2rem;
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(1.4rem, 2.6vw, 2.1rem);
    line-height: 1.2;
    color: var(--color-ai-ink);
}

/* Recommendation lists (items with an Add-to-TBR button) → card grid.
   Uses :has(), supported in current evergreen browsers. */
.bc-reader-dna-content ul:has(.quick-add-tbr) {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.bc-reader-dna-content li:has(.quick-add-tbr) {
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-ai-border);
    border-radius: 12px;
    margin-bottom: 0;
}

/* Plain (non-rec) lists keep a simple gilt marker */
.bc-reader-dna-content ul:not(:has(.quick-add-tbr)) { list-style: none; padding-left: 0; }
.bc-reader-dna-content ul:not(:has(.quick-add-tbr)) li { position: relative; padding-left: 1.2em; }
.bc-reader-dna-content ul:not(:has(.quick-add-tbr)) li::before {
    content: "\00B7"; /* · */
    position: absolute;
    left: 0;
    color: var(--color-gilt);
    font-weight: 700;
}

/* Add-to-TBR button → gilt pill (still POSTs via initQuickAddTbr) */
.bc-reader-dna-content .quick-add-tbr {
    background: var(--color-gilt);
    color: #0E1830;
    border: none;
    font-weight: 600;
    border-radius: 7px;
}
.bc-reader-dna-content .quick-add-tbr:hover {
    background: var(--color-gilt-soft);
    color: #0E1830;
}

/* Pull quote — the Hidden Patterns line, tagged by JS in reader_dna.html */
.bc-reader-dna-content .dna-pullquote {
    margin: 1.8rem 0;
    padding-left: 20px;
    border-left: 2px solid var(--color-gilt-bright);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.2rem, 2.2vw, 1.7rem);
    line-height: 1.3;
    color: var(--color-ai-ink);
}

/* --- Smart TBR --- */
.bc-smart-tbr-content .tbr-pick {
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--color-ai-border);
}

.bc-smart-tbr-content .tbr-pick:last-of-type {
    border-bottom: none;
}

.bc-smart-tbr-content .tbr-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    margin-right: var(--space-sm);
}

.bc-smart-tbr-content h4 {
    font-size: 1.05rem;
    margin-bottom: var(--space-xs);
}

.bc-smart-tbr-content .tbr-reason {
    color: var(--color-ai-ink-muted);
    margin-bottom: 0;
    font-size: 0.95rem;
}

.bc-smart-tbr-content a {
    color: var(--color-gilt-bright);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Reading streak card (opt-in daily habit) --- */
.bc-streak {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.bc-streak-flame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-full);
    background: var(--color-bg-subtle);
    color: var(--color-ink-muted);
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* The flame only "lights up" once a streak is live — gentle, not naggy. */
.bc-streak--active .bc-streak-flame {
    background: rgba(176, 67, 43, 0.12);
    color: var(--color-accent);
}

.bc-streak-body {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    line-height: 1;
}

.bc-streak-count {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-ink);
}

.bc-streak-label {
    color: var(--color-ink-muted);
    font-size: 0.95rem;
}

/* AI taste-fit chip — Smart TBR ranking + Post-Finish recommendations.
   A small mono "data" pill on the gilt AI surface. The score is an AI estimate
   of fit (see the caveat in the host templates), not a computed metric. */
.bc-smart-tbr-content .tbr-match,
.bc-ai-card .rec-match {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-full);
    background: rgba(198, 138, 52, 0.16);
    color: var(--color-gilt-bright);
    border: 1px solid var(--color-ai-border);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    vertical-align: middle;
    white-space: nowrap;
}

/* --- Review Assistant --- */
.bc-review-assistant-content h4 {
    font-size: 1.1rem;
    margin-bottom: var(--space-md);
}

.bc-review-assistant-content .review-prompts {
    list-style: none;
    padding: 0;
}

.bc-review-assistant-content .review-prompts li {
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    background: var(--color-ai-surface-2);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-gilt);
    color: var(--color-ai-ink);
    line-height: 1.6;
}

.bc-review-assistant-content .review-hint {
    color: var(--color-ai-ink-muted);
    font-size: 0.9rem;
    font-style: italic;
    margin-top: var(--space-md);
}

/* --- Voice dictation button --- */
.bc-voice-btn.btn-danger {
    animation: pulse-recording 1.5s ease-in-out infinite;
}

@keyframes pulse-recording {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* --- AI loading skeleton --- */
.bc-ai-loading {
    padding: var(--space-xl) var(--space-lg);
}

.bc-skeleton {
    background: linear-gradient(90deg,
        var(--color-bg-subtle) 25%,
        var(--color-bg-card) 50%,
        var(--color-bg-subtle) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

/* On the midnight AI surface the skeleton must shimmer dark, not paper. */
.bc-ai-card .bc-skeleton {
    background: linear-gradient(90deg,
        var(--color-ai-surface-2) 25%,
        rgba(255, 255, 255, 0.08) 50%,
        var(--color-ai-surface-2) 75%
    );
    background-size: 200% 100%;
}

.bc-skeleton-line {
    height: 14px;
    margin-bottom: var(--space-sm);
}

.bc-skeleton-line-short { width: 60%; }
.bc-skeleton-line-medium { width: 80%; }
.bc-skeleton-line-long { width: 95%; }

.bc-skeleton-heading {
    height: 22px;
    width: 40%;
    margin-bottom: var(--space-md);
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.bc-ai-loading-text {
    text-align: center;
    color: var(--color-ink-muted);
    font-size: 0.9rem;
    margin-top: var(--space-md);
}

/* --- Profile --- */
.profile-avatar-lg {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 3px solid var(--color-border);
}

/* --- Gilt/accent text utility (for AI headings) ---
   The spec calls for solid gilt, but this class is also used for AI *page
   titles* that sit on the light paper page — gilt on cream fails AA and breaks
   the palette's contrast rule. So: rust on paper, gilt only on the midnight
   AI card (where gilt-on-midnight passes). */
.bc-gradient-text {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--color-accent);
}

.bc-ai-card .bc-gradient-text {
    color: var(--color-gilt-bright);
}


/* --- Book Agent Chat --- */

.bc-chat-container {
    display: flex;
    flex-direction: column;
    /* Grows with the conversation between these bounds instead of reserving a
       fixed void; the input stays pinned once the max is reached. */
    min-height: 460px;
    max-height: calc(100vh - 180px);
    padding: 0;
    overflow: hidden;
    position: relative;
    /* Paper surface — a tool, not an artifact. The AI identity is carried by
       the message bubbles and the single gilt hairline below. */
    background: var(--color-bg-card);
    color: var(--color-ink);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* Gilt hairline at the top — the one cue that this is an AI surface. */
.bc-chat-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-gilt-bright);
    z-index: 1;
}

.bc-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--color-ink);
}

/* Empty state — centre the welcome so the paper never reads as dead space. */
.bc-chat-messages--welcome {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.bc-agent-welcome {
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.bc-agent-welcome-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 0.6rem;
    border-radius: 50%;
    background: var(--color-ai-surface);
    color: var(--color-gilt-bright);
    font-size: 1.1rem;
}

.bc-agent-welcome h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: var(--color-ink);
}

.bc-agent-welcome p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--color-ink-muted);
}

.bc-chat-bubble {
    max-width: 85%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    line-height: 1.6;
    word-wrap: break-word;
}

.bc-chat-bubble p:last-child,
.bc-chat-bubble ul:last-child,
.bc-chat-bubble ol:last-child { margin-bottom: 0; }

.bc-chat-bubble--user {
    align-self: flex-end;
    background: var(--color-accent);
    color: #fff;
    border-bottom-right-radius: var(--radius-sm);
}

/* Assistant bubble — the midnight + gilt "AI is here" cue on the paper room. */
.bc-chat-bubble--assistant {
    align-self: flex-start;
    background: var(--color-ai-surface);
    border: 1px solid var(--color-ai-border);
    color: var(--color-ai-ink);
    border-bottom-left-radius: var(--radius-sm);
}

.bc-chat-bubble--assistant .text-muted {
    color: var(--color-ai-ink-muted) !important;
}

/* Typing indicator — three pulsing dots, in a midnight bubble to match. */
.bc-chat-typing {
    align-self: flex-start;
    display: flex;
    gap: 0.3rem;
    padding: 0.75rem 1rem;
    background: var(--color-ai-surface);
    border: 1px solid var(--color-ai-border);
    border-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-sm);
}

.bc-chat-typing span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-ai-ink-muted);
    animation: typingPulse 1.4s ease-in-out infinite;
}

.bc-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.bc-chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingPulse {
    0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
    30% { opacity: 1; transform: scale(1); }
}

/* Tool status indicator */
.bc-chat-tool-status {
    align-self: flex-start;
    font-size: 0.8rem;
    color: var(--color-ink-muted);
    padding: 0.25rem 0;
}

.bc-chat-tool-done { opacity: 0.5; }

.bc-spin {
    display: inline-block;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Input area — pinned to the bottom of the chat container, on paper */
.bc-chat-input-area {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
}

.bc-chat-input-area .form-control {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.9rem;
    font-size: 0.95rem;
    background: var(--color-bg-card);
    color: var(--color-ink);
}

.bc-chat-input-area .form-control::placeholder {
    color: var(--color-ink-muted);
}

.bc-chat-input-area .form-control:focus {
    border-color: var(--color-gilt);
    box-shadow: 0 0 0 3px rgba(198, 138, 52, 0.25);
    outline: none;
}

/* Suggestion chips — centred under the welcome on the empty state */
.bc-chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 0 1.5rem 0.75rem;
}

.bc-chat-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    color: var(--color-ink-muted);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.bc-chat-chip:hover {
    border-color: var(--color-gilt);
    color: var(--color-accent);
}

/* Responsive — a slightly shorter container on mobile */
@media (max-width: 768px) {
    .bc-chat-container { min-height: 400px; max-height: calc(100vh - 130px); }
    .bc-chat-bubble { max-width: 92%; }
    .bc-chat-suggestions { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 1rem; }
    .bc-chat-chip { white-space: nowrap; }
}

/* --- Public share page: card hero image --- */
/* The share card already renders on paper cream, so a hairline border keeps
   its edges from blending into the equally-cream public page background. */
.bc-share-hero {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(34, 28, 21, 0.08);
}