/* Importing base styles */
/* inlined: base.css */
/* || General HTML Elements */
html {
    position: relative;
    min-height: 100%;
}

body {
    font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    line-height: 1.4;
    word-wrap: break-word;
    font-weight: 400;
    background-color: var(--bs-light);
}

/* Defense-in-depth for partial CSS loads: --bs-light's dark value lives in
   variables.css; if that ever fails to load, var(--bs-light) resolves to
   Bootstrap's static near-white #f8f9fa and dark mode renders as a blinding
   white page with dark controls. Pin the dark body background here (literal,
   same #222222 as variables.css) so a degraded load stays a coherent dark
   page. */
[data-bs-theme=dark] body {
    background-color: #222222;
}

p {
    margin-bottom: 0.5rem;
}

p:last-child {
    margin-bottom: 0;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

a, a:hover, a:not([href]):not([class]) {
    font-weight: 500;
}

/* Anchors styled as buttons should keep the button font weight at rest AND
   on hover. Without this, the global a:hover rule above (specificity 0,0,1,1)
   wins over .btn (0,0,1,0) and the text un-bolds on hover, causing reflow. */
a.btn, a.btn:hover {
    font-weight: var(--bs-btn-font-weight);
}

a:not([href]):not([class]):hover {
    color: var(--bs-primary-darker);
}

::selection {
    background: var(--bs-primary);
    color: var(--bs-primary-white);
}

/* || Typography */
.fw-500 { font-weight: 500; }
.fs-0 { display: inline-flex; align-items: center; gap: 0; } /* Use flexbox instead of font-size:0 for accessibility */
.fs-12 { font-size: 0.857rem; }
.fs-13 { font-size: 0.929rem; }
.fs-14 { font-size: 1.000rem; }
.fs-16 { font-size: 1.143rem; }
.fs-18 { font-size: 1.286rem; }
.fs-20 { font-size: 1.429rem; }
.fs-24 { font-size: 1.714rem; }
.lh-12 { line-height: 1.2; }
.lh-14 { line-height: 1.4; }

/* || Text Styles */
.text-premium { color: var(--bs-orange) !important; }
.text-basic { color: var(--bs-gray-basic) !important; }
.text-plus { color: var(--bs-gray-plus) !important; }
.text-support { color: var(--bs-purple) !important; }

/* || Tier-specific utility classes */
.border-premium { border-color: var(--bs-orange) !important; }
.border-basic { border-color: var(--bs-gray-basic) !important; }
.border-plus { border-color: var(--bs-gray-plus) !important; }
.bg-premium { background-color: var(--bs-orange) !important; }
.bg-basic { background-color: var(--bs-gray-basic) !important; }
.bg-plus { background-color: var(--bs-gray-plus) !important; }
.text-semi-muted { color: var(--bs-semi-muted) !important; }
.text-very-muted { color: var(--bs-very-muted) !important; }

.font-laila {
    font-family: "Laila", serif;
    letter-spacing: -0.04em;
    font-weight: 700;
}

/* || Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--bs-secondary-rgb), 0.3);
    border-radius: 4px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--bs-secondary-rgb), 0.5);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--bs-secondary-rgb), 0.3) transparent;
}

/* Importing component styles */
/* inlined: components/buttons.css */
/* || BUTTONS */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.4;
    --bs-btn-disabled-opacity: 0.33;
}

.btn-sm {
    font-size: 0.75rem;
}

.btn-md {
    padding: 0.25rem 0.5rem;
    font-size: .875rem;
    line-height: 1.4;
    border-radius: 0.2rem;
}

.btn-check+.btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-border-color);
}

/* Zero padding so btn-links sit inline with surrounding text — but it also
   means icon-button rows have NO intrinsic spacing or hit-area separation.
   Adjacent btn-links render flush unless their CONTAINER supplies the gap.
   Convention: wrap icon-button rows in `d-flex align-items-center gap-3`
   (preferred over per-button me-N or ms-N margins: gap collapses around
   display:none children, so hidden buttons don't leave stray space).
   NB: never write a star-slash sequence like "me-* /" flush together in
   this comment — it terminates the comment and eats the rule below. */
.btn-link {
    padding: 0;
    border: 0;
    vertical-align: baseline;
    font-weight: 500;
}

/* Primary button styles */
.btn-primary {
    --bs-btn-color: var(--bs-primary-white);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-primary-white);
    --bs-btn-hover-bg: var(--bs-primary-darker);
    --bs-btn-hover-border-color: var(--bs-primary-darker);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--bs-primary-white);
    --bs-btn-active-bg: var(--bs-primary-darker);
    --bs-btn-active-border-color: var(--bs-primary-darker);
    --bs-btn-disabled-color: var(--bs-primary-white);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

/* Outline button styles */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-premium,
.btn-outline-support,
.btn-outline-basic,
.btn-outline-plus {
    background-color: transparent;
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-primary-white);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-color: var(--bs-primary-white);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

/* Success button styles */
.btn-success {
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: var(--bs-success-darker);
    --bs-btn-hover-border-color: var(--bs-success-darker);
    --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
    --bs-btn-active-bg: var(--bs-success-darker);
    --bs-btn-active-border-color: var(--bs-success-darker);
}

.btn-outline-success {
    --bs-btn-color: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-color: var(--bs-primary-white);
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-success);
    --bs-btn-active-color: var(--bs-primary-white);
    --bs-btn-active-bg: var(--bs-success);
    --bs-btn-active-border-color: var(--bs-success);
    --bs-btn-disabled-color: var(--bs-success);
    --bs-btn-disabled-border-color: var(--bs-success);
}

/* Warning button styles */
.btn-warning {
    --bs-btn-color: var(--bs-primary-white);
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: var(--bs-primary-white);
    --bs-btn-hover-bg: var(--bs-warning-darker);
    --bs-btn-hover-border-color: var(--bs-warning-darker);
    --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
    --bs-btn-active-color: var(--bs-primary-white);
    --bs-btn-active-bg: var(--bs-warning-darker);
    --bs-btn-active-border-color: var(--bs-warning-darker);
}

.btn-outline-warning {
    --bs-btn-color: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: var(--bs-primary-white);
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-warning);
    --bs-btn-active-color: var(--bs-primary-white);
    --bs-btn-active-bg: var(--bs-warning);
    --bs-btn-active-border-color: var(--bs-warning);
    --bs-btn-disabled-color: var(--bs-warning);
    --bs-btn-disabled-border-color: var(--bs-warning);
}

/* Danger button styles */
.btn-danger {
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: var(--bs-danger-darker);
    --bs-btn-hover-border-color: var(--bs-danger-darker);
    --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
    --bs-btn-active-bg: var(--bs-danger-darker);
    --bs-btn-active-border-color: var(--bs-danger-darker);
}

.btn-outline-danger {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-color: var(--bs-primary-white);
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-border-color: var(--bs-danger);
    --bs-btn-active-color: var(--bs-primary-white);
    --bs-btn-active-bg: var(--bs-danger);
    --bs-btn-active-border-color: var(--bs-danger);
    --bs-btn-disabled-color: var(--bs-danger);
    --bs-btn-disabled-border-color: var(--bs-danger);
}

/* Premium button styles */
.btn-premium {
    --bs-btn-color: var(--bs-primary-white);
    --bs-btn-bg: var(--bs-orange);
    --bs-btn-border-color: var(--bs-orange);
    --bs-btn-hover-color: var(--bs-primary-white);
    --bs-btn-hover-bg: var(--bs-orange-darker);
    --bs-btn-hover-border-color: var(--bs-orange-darker);
    --bs-btn-focus-shadow-rgb: var(--bs-orange-rgb);
    --bs-btn-active-color: var(--bs-primary-white);
    --bs-btn-active-bg: var(--bs-orange-darker);
    --bs-btn-active-border-color: var(--bs-orange-darker);
}

.btn-outline-premium {
    --bs-btn-color: var(--bs-orange);
    --bs-btn-border-color: var(--bs-orange);
    --bs-btn-hover-color: var(--bs-primary-white);
    --bs-btn-hover-bg: var(--bs-orange);
    --bs-btn-hover-border-color: var(--bs-orange);
    --bs-btn-active-color: var(--bs-primary-white);
    --bs-btn-active-bg: var(--bs-orange);
    --bs-btn-active-border-color: var(--bs-orange);
    --bs-btn-disabled-color: var(--bs-orange);
    --bs-btn-disabled-border-color: var(--bs-orange);
}

/* Basic tier button styles (light grey) */
.btn-basic {
    --bs-btn-color: var(--bs-primary-white);
    --bs-btn-bg: var(--bs-gray-basic);
    --bs-btn-border-color: var(--bs-gray-basic);
    --bs-btn-hover-color: var(--bs-primary-white);
    --bs-btn-hover-bg: var(--bs-gray-basic-darker);
    --bs-btn-hover-border-color: var(--bs-gray-basic-darker);
    --bs-btn-focus-shadow-rgb: 184, 184, 184;
    --bs-btn-active-color: var(--bs-primary-white);
    --bs-btn-active-bg: var(--bs-gray-basic-darker);
    --bs-btn-active-border-color: var(--bs-gray-basic-darker);
}

.btn-outline-basic {
    --bs-btn-color: var(--bs-gray-basic);
    --bs-btn-border-color: var(--bs-gray-basic);
    --bs-btn-hover-color: var(--bs-primary-white);
    --bs-btn-hover-bg: var(--bs-gray-basic);
    --bs-btn-hover-border-color: var(--bs-gray-basic);
    --bs-btn-active-color: var(--bs-primary-white);
    --bs-btn-active-bg: var(--bs-gray-basic);
    --bs-btn-active-border-color: var(--bs-gray-basic);
    --bs-btn-disabled-color: var(--bs-gray-basic);
    --bs-btn-disabled-border-color: var(--bs-gray-basic);
}

/* Plus tier button styles (dark grey) */
.btn-plus {
    --bs-btn-color: var(--bs-primary-white);
    --bs-btn-bg: var(--bs-gray-plus);
    --bs-btn-border-color: var(--bs-gray-plus);
    --bs-btn-hover-color: var(--bs-primary-white);
    --bs-btn-hover-bg: var(--bs-gray-plus-darker);
    --bs-btn-hover-border-color: var(--bs-gray-plus-darker);
    --bs-btn-focus-shadow-rgb: 120, 120, 120;
    --bs-btn-active-color: var(--bs-primary-white);
    --bs-btn-active-bg: var(--bs-gray-plus-darker);
    --bs-btn-active-border-color: var(--bs-gray-plus-darker);
}

.btn-outline-plus {
    --bs-btn-color: var(--bs-gray-plus);
    --bs-btn-border-color: var(--bs-gray-plus);
    --bs-btn-hover-color: var(--bs-primary-white);
    --bs-btn-hover-bg: var(--bs-gray-plus);
    --bs-btn-hover-border-color: var(--bs-gray-plus);
    --bs-btn-active-color: var(--bs-primary-white);
    --bs-btn-active-bg: var(--bs-gray-plus);
    --bs-btn-active-border-color: var(--bs-gray-plus);
    --bs-btn-disabled-color: var(--bs-gray-plus);
    --bs-btn-disabled-border-color: var(--bs-gray-plus);
}

/* Support button styles */
.btn-support {
    --bs-btn-color: var(--bs-primary-white);
    --bs-btn-bg: var(--bs-purple);
    --bs-btn-border-color: var(--bs-purple);
    --bs-btn-hover-color: var(--bs-primary-white);
    --bs-btn-hover-bg: var(--bs-purple-darker);
    --bs-btn-hover-border-color: var(--bs-purple-darker);
    --bs-btn-focus-shadow-rgb: var(--bs-purple-rgb);
    --bs-btn-active-color: var(--bs-primary-white);
    --bs-btn-active-bg: var(--bs-purple-darker);
    --bs-btn-active-border-color: var(--bs-purple-darker);
}

.btn-outline-support {
    --bs-btn-color: var(--bs-purple);
    --bs-btn-border-color: var(--bs-purple);
    --bs-btn-hover-color: var(--bs-primary-white);
    --bs-btn-hover-bg: var(--bs-purple);
    --bs-btn-hover-border-color: var(--bs-purple);
    --bs-btn-active-color: var(--bs-primary-white);
    --bs-btn-active-bg: var(--bs-purple);
    --bs-btn-active-border-color: var(--bs-purple);
    --bs-btn-disabled-color: var(--bs-purple);
    --bs-btn-disabled-border-color: var(--bs-purple);
}

/* Display spinner in button while a HTMX request is in flight */
button.btn.htmx-request::before {
    content: url("/static/spin.f728dc668b6a.svg");
    vertical-align: middle;
}

.mode-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: baseline;
    width: 7.143rem; /* Set a fixed width for all buttons */
    white-space: nowrap;
    overflow: hidden;
}

/* Adjust width for small screens */
@media (max-width: 567.9px) {
    .mode-button {
        width: 4.286rem; /* Narrower width for small screens */
    }
}
/* inlined: components/cards.css */
/* || CARDS */
.card {
    box-shadow: var(--bs-box-shadow);
    border: none;
    --bs-card-cap-padding-y: 1rem;
    --bs-card-cap-padding-x: 1rem;
    width: 100%;
    max-width: 100%;
    flex-shrink: 1;
    margin-bottom: 0.5rem;
}

.card > .card-header + .list-group, 
.card > .list-group + .card-footer {
    border-top: var(--bs-border-width) solid var(--bs-border-color-translucent);
}

.card-with-link {
    z-index: 1;
}

/* In dark mode, sidebar cards need subtle contrast against the background. */
[data-bs-theme="dark"] .card-with-link {
    background-color: var(--bs-card-elevated-bg);
}

.card-with-link:hover:not(:has(.card-text-link:hover)) {
    filter: brightness(0.95);
}

.card-bg-current {
    opacity: 0.6;
}

/* Card Title and Author Styles */
.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.05rem;
    margin-right: 0.25rem;
}

.card-summary {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.card-text-link { 
    position: relative; 
    z-index: 2; 
}

a.card-text-link.link:hover,
a.card-text-link.link:hover nobr,
a.card-text-link.link:hover span {
    text-decoration: underline;
}

.collapsed-card-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
}

/* Handle overflow in text elements */
.card-title, .card-text {
    overflow-wrap: anywhere;
}

.ms-4 {
    margin-left: 1.5rem;
}


/* || BULK SELECT CHATS */
.chat-bulk-card {
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.chat-bulk-checkbox {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    z-index: 3;
    display: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.chat-bulk-checkbox .chat-bulk-checkbox-on {
    display: none;
    color: var(--bs-primary);
}

.chats-bulk-wrapper.select-mode .chat-bulk-checkbox {
    display: inline-block;
}

.chats-bulk-wrapper.select-mode .chat-bulk-card .card-body {
    padding-left: 2.75rem;
}

.chats-bulk-wrapper.select-mode .chat-bulk-card {
    cursor: pointer;
}

/* While in select mode the card is a select target — links and buttons inside shouldn't swallow the click */
.chats-bulk-wrapper.select-mode .chat-bulk-card .link-spanner,
.chats-bulk-wrapper.select-mode .chat-bulk-card a,
.chats-bulk-wrapper.select-mode .chat-bulk-card button {
    pointer-events: none;
}

.chat-bulk-card.bulk-selected {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.chat-bulk-card.bulk-selected .chat-bulk-checkbox-off { display: none; }
.chat-bulk-card.bulk-selected .chat-bulk-checkbox-on { display: inline-block; }

.chat-bulk-card.bulk-hidden {
    display: none !important;
}

.chat-bulk-action-bar {
    position: sticky;
    bottom: 1rem;
    margin: 1rem auto 0;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    z-index: 10;
}

.chat-bulk-action-bar[hidden] {
    display: none !important;
}


/* Used in chapter_locked.html */
.promo-card {
    height: 100%;
    max-width: 300px;
    box-shadow: 0 0 2.143rem 0 var(--bs-border-color-translucent);
}

.promo-card .price-section {
    font-size: 0.857rem;
    text-align: center;
    margin-top: auto !important;
}

.promo-card .price-details {
    position: relative;
    margin-bottom: 0.5rem;
}

.promo-card .price {
    font-size: 2.143rem;
    font-weight: 600;
}

.promo-card .currency,
.promo-card .billing-cycle {
    font-size: 0.857rem;
}

/* || RECYCLE BIN (profile page Bin tab) */
/* Cards in the bin reuse the normal card components, but their links point
   at pages that reject hidden content — so the whole card is inert and only
   the Restore / Delete-permanently controls below it are interactive. */
.bin-item .card a,
.bin-item .card button {
    pointer-events: none;
}

.bin-item .card {
    opacity: 0.85;
    margin-bottom: 0.25rem;
}

/* Box each item together with its controls row so it's unambiguous that
   Restore / Delete permanently act on that one item, not the whole bin. */
.bin-item {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.5rem 0.5rem 0.25rem;
    margin: 0 0.714rem 1rem;
}

.bin-item .bin-item-controls {
    border-top: 1px solid var(--bs-border-color-translucent);
    padding-top: 0.5rem;
}

/* inlined: components/cookie_banner.css */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--bs-light);
    border-top: 1px solid var(--bs-border-color);
    padding: 1.071rem 0;
    z-index: 1050;
    box-shadow: 0 -2px 0.714rem rgba(0, 0, 0, 0.1);
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 1.071rem;
}

.cookie-content p {
    margin: 0;
    padding: 0.714rem 0;
    font-size: 1.000rem;
}

.cookie-buttons {
    display: flex;
    gap: 0.714rem;
}

@media (max-width: 767.9px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cookie-buttons {
        margin-top: 0.714rem;
    }
} 
/* inlined: components/restriction_banner.css */
.restriction-banner {
    width: 100%;
    background-color: var(--bs-light);
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.5rem 0;
    box-shadow: 0 2px 0.714rem rgba(0, 0, 0, 0.05);
}

.restriction-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.071rem;
}

.restriction-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.restriction-row p {
    margin: 0;
    padding: 0.357rem 0;
    font-size: 0.929rem;
    flex: 1 1 auto;
    min-width: 0;
}

.restriction-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}

.restriction-buttons .btn {
    padding: 0.25rem 0.625rem;
    font-size: 0.857rem;
    line-height: 1.3;
}

@media (max-width: 767.9px) {
    .restriction-row {
        flex-direction: column;
        text-align: center;
    }

    .restriction-buttons {
        margin-top: 0.357rem;
        margin-left: 0;
    }
}

/* inlined: components/emergency_banner.css */
.emergency-banner {
    width: 100%;
    padding: 0.5rem 0;
    font-weight: 600;
    font-size: 0.929rem;
    text-align: center;
    border-bottom: 1px solid var(--bs-border-color);
}

.emergency-banner--warning {
    background-color: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

.emergency-banner--danger {
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

.emergency-banner--info {
    background-color: var(--bs-info-bg-subtle);
    color: var(--bs-info-text-emphasis);
}

/* inlined: components/sale_banner.css */
.sale-banner {
    width: 100%;
    padding: 0.5rem 0;
    font-weight: 600;
    font-size: 0.929rem;
    text-align: center;
    border-bottom: 1px solid var(--bs-border-color);
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

.sale-banner__cta {
    color: var(--bs-success-text-emphasis);
    text-decoration: underline;
    white-space: nowrap;
}

.sale-banner__close {
    /* Small glyph, but padding keeps the hit area ≥24px (WCAG 2.5.8) */
    font-size: 0.7rem;
    padding: 0.75em;
    margin-left: 0.25rem;
}

/* inlined: components/expandables.css */
/* || ACCORDIONS */
.accordion {
    --bs-accordion-btn-color: var(--bs-semi-muted);
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-btn-padding-y: 1.25rem;
    --bs-accordion-btn-icon-width: 1rem;
    --bs-accordion-btn-focus-border-color: var(--bs-primary);
    --bs-accordion-btn-focus-box-shadow: 0;
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-body-padding-y: 0rem;
    --bs-accordion-active-color: var(--bs-dark);
    --bs-accordion-active-bg: var(--bs-white);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23212929df'%3E%3Cpath fill-rule='evenodd' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23212929'%3E%3Cpath fill-rule='evenodd' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
}

[data-bs-theme="dark"] .accordion {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23e0e0e0'%3E%3Cpath fill-rule='evenodd' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23e0e0e0'%3E%3Cpath fill-rule='evenodd' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
}

/* || COLLAPSE */
.collapse-title { display: inline-block; }
.collapse-title a:before {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    float:right;
    margin: 0.143rem 0.714rem 0rem 0.714rem;
    transition: transform 0.3s ease;
}
.collapse-title a[aria-expanded="true"]:before {
    transform: rotate(-180deg);
}

/* || DROPDOWNS */
.dropdown-item {
    font-size: 1.000rem;
    background-color: var(--bs-white);
    line-height: 1.2;   
    font-weight: 500;
    padding: 0.5rem 1.5rem 0.5rem 1rem;
    color: var(--bs-gray-800);
}
.dropdown-item:hover {
    background-color: var(--bs-gray-100);
}
.dropdown-item-blue {
    background-color: var(--bs-dropdown-item-blue);
}
.dropdown-item-blue:hover {
    background-color: var(--bs-dropdown-item-blue-hover);
}
.notifications-item-blue {
    background-color: var(--bs-dropdown-item-blue)
}
.notifications-item-blue:hover {
    background-color: var(--bs-dropdown-item-blue-hover)
}

#notifications-dropdown {
    width: 35.714rem;
}

@media (max-width: 991.9px) {
    #notifications-dropdown {
        width: 23.571rem;
    }
}

#notifications-dropdown {
    display: flex;
    flex-direction: column;
    /* from bootstrap's .dropdown-menu, but without display: none */
    position: absolute;
    top: 100%;
    z-index: 1000;
    float: left;
    max-height: 28rem;
    overflow: hidden;
    min-width: 10rem;
    padding: 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: var(--bs-dark);
    text-align: left;
    list-style: none;
    background-color: var(--bs-white);
    background-clip: padding-box;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: .25rem;
    right: 0; /* from .dropdown-menu-right */
    left: auto;
}

#notifications-scroll-area {
    overflow-y: auto;
    flex: 1;
    padding: .5rem 0;
}

.dropdown-divider {
    margin: 0.286rem 0rem; 
}


/* || LIST GROUPS */
.list-group-item {
    --bs-list-group-item-padding-y: 1rem;
    --bs-list-group-item-padding-x: 1rem;
}


/* || MODULES <- This is for "show more" and "show less" on the story summary */
#module p.collapse:not(.show) {
    height: 7.143rem;
    overflow: hidden;
    display: block;
}
#module p.collapsing {
    height: 7.143rem;
}
#module p.show {
    height: auto;
}
#module p.height-auto {
    height: auto !important;
}
#module a.collapsed:after  {
    content: ' Show More';
}
#module a:not(.collapsed):after {
    content: ' Show Less';
}

#module .summary-gradient {
    position:relative;
    z-index:2;
    background-image: linear-gradient(to bottom, var(--bs-white-translucent), var(--bs-light)); 
}
#module p.show ~ .summary-gradient {
    height:0rem;
    margin-top:0rem;
}
#module p:not(.show) ~ .summary-gradient {
    height: 4.286rem;
    margin-top:-4.286rem;
}


/* || POPOVERS */
.popover {
    --bs-popover-header-bg: var(--bs-light);
    z-index: 1057; /* Higher than modals (1055) but lower than toasts (1060) */
}
.popover-body {
    padding: 0.5rem 1rem 0.75rem 1rem;
}
.popover-header {
    padding: 1rem 1rem 0.75rem 1rem;
}


/* || TOOLTIPS */
.tooltip {
    --bs-tooltip-max-width: 300px; /* TODO: replace large tooltips with popovers */
    --bs-tooltip-color: var(--bs-white);
    --bs-tooltip-bg: var(--bs-dark);
    --bs-tooltip-opacity: 0.95;
    z-index: 1057; /* Higher than modals (1055) but lower than toasts (1060) */
}
/* inlined: components/forms.css */
/* || FORMS */
.form-control { 
    font-size: 1.000rem; 
    color: var(--bs-body-color);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check-input:focus {
    border-color: var(--bs-primary);
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-label { 
    font-size: 1rem; 
}

input:-webkit-autofill, 
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 2.143rem var(--bs-primary-border-subtle) inset !important;
}

.invalid-feedback {
    margin-top: 0.5rem;
    font-size: 1.000rem;
    color: var(--bs-danger);
}

.form-check-input.is-invalid~.form-check-label, 
.was-validated .form-check-input:invalid~.form-check-label {
    color: currentColor;
}

.form-control:focus {
    border-color: var(--bs-primary);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.2);
}

/* Form error display styles */
.form-error-display {
    color: var(--bs-danger);
    margin-top: 0.5rem;
}

/* Input group text styles */
.input-group-text {
    background-color: inherit;
    color: var(--bs-primary);
    font-size: inherit;
}
.input-group-text:hover {
    color: var(--bs-primary-darker);
    text-decoration: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    width: 1.143rem;
    height: 1.143rem;
}
/* Contact form screenshot attachment thumbnails (contactAttachments.js) */
.contact-attachment-thumb {
    position: relative;
    display: inline-block;
}
.contact-attachment-thumb img {
    width: 4.571rem;
    height: 4.571rem;
    object-fit: cover;
    border-radius: 0.357rem;
    border: 1px solid var(--bs-border-color);
}
.contact-attachment-remove {
    position: absolute;
    top: -0.429rem;
    right: -0.429rem;
    width: 1.429rem;
    height: 1.429rem;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: 0.786rem;
    line-height: 1;
}
.contact-attachment-remove:hover {
    color: var(--bs-danger);
}

/* "Explicit | Safe" segmented rating pill (allow_explicit_toggle.html).
   One visually-hidden checkbox drives it — checked = Explicit. Sized in em
   so it scales with the 'small' wrapper the start surfaces use. */
.rating-toggle {
    display: inline-flex;
    border: 1px solid var(--bs-border-color);
    border-radius: 2em;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
}
.rating-toggle-opt {
    padding: 0.2em 0.75em;
    line-height: 1.4;
    color: var(--bs-secondary-color);
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.rating-toggle-input:checked + .rating-toggle .rating-toggle-on,
.rating-toggle-input:not(:checked) + .rating-toggle .rating-toggle-off {
    background-color: var(--bs-primary);
    color: var(--bs-primary-white, #fff);
}
.rating-toggle-input:focus-visible + .rating-toggle {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}
/* Wrapper around the two option segments. Invisible on desktop (the caption
   and opts sit in one pill); on narrow screens it takes over the pill chrome
   so the caption can drop underneath and the control fits on one line beside
   the character counter (mobile rules live below the caption block, which
   they must out-cascade). */
.rating-toggle-opts {
    display: contents;
}

/* "Manga | Photo | Custom" segmented style pill (segment_image_edit_mode.html).
   Radio-driven sibling of .rating-toggle above — same pill language, but each
   option is its own visually-hidden radio lighting the label that follows it. */
.style-toggle {
    display: inline-flex;
    border: 1px solid var(--bs-border-color);
    border-radius: 2em;
    overflow: hidden;
    user-select: none;
}
.style-toggle-opt {
    padding: 0.2em 0.75em;
    line-height: 1.4;
    color: var(--bs-secondary-color);
    cursor: pointer;
    margin-bottom: 0;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.style-toggle-input:checked + .style-toggle-opt {
    background-color: var(--bs-primary);
    color: var(--bs-primary-white, #fff);
}
.style-toggle-input:focus-visible + .style-toggle-opt {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

/* Start-surface input grid (new-chat box, chats tab, outline): textarea in
   column 1, submit arrow in column 2 bottom-aligned to the textarea, and
   the counter/rating meta row confined to column 1 so its right edge lines
   up with the textarea edge (not the arrow's). */
.chat-start-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}
.chat-start-meta {
    grid-column: 1;
}

/* Caption segment inside the rating pill — a built-in label, never
   highlighted; clicking it still toggles (the whole pill is the label). */
.rating-toggle-caption {
    padding: 0.2em 0.75em;
    line-height: 1.4;
    color: var(--bs-secondary-color);
    background-color: rgba(var(--bs-secondary-color-rgb), 0.075);
    border-right: 1px solid var(--bs-border-color);
    white-space: nowrap;
}

/* Narrow screens: the caption drops out of the pill and sits underneath the
   Enabled | Disabled options as bare small text, so the whole control fits on
   one line beside the character counter. */
@media (max-width: 575.98px) {
    .rating-toggle {
        flex-direction: column;
        align-items: center;
        gap: 0.1em;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }
    .rating-toggle-opts {
        display: inline-flex;
        border: 1px solid var(--bs-border-color);
        border-radius: 2em;
        overflow: hidden;
    }
    .rating-toggle-caption {
        order: 2;
        padding: 0;
        background-color: transparent;
        border-right: 0;
        font-size: 0.8em;
    }
}

/* inlined: components/navigation.css */
/* || NAVBAR */
.navbar {
    z-index: 1031;
    --bs-navbar-padding-y: 0.2rem; /* Reduce vertical padding */
    --bs-navbar-nav-link-padding-x: 1rem;
    --bs-nav-link-font-weight: 500;
    --bs-navbar-color: rgba(var(--bs-dark-rgb), 0.75);
    --bs-navbar-hover-color: var(--bs-dark-rgb);
}

[data-bs-theme="dark"] .navbar {
    background-color: var(--bs-navbar-dark-bg) !important;
}

.nav-link { 
    font-weight: 500;
    padding-top: 0.5rem;    /* Reduce padding */
    padding-bottom: 0.5rem; /* Reduce padding */
}

.nav-icon {
    width: 1.143rem;
    text-align: center;
    margin-right: 0.5rem;
}

/* Mobile menu improvements */
@media (max-width: 767.9px) {
    .navbar-collapse {
        position: absolute;
        top: 125%;
        left: 0;
        right: 0;
        background-color: var(--bs-light);
        padding-top: 0.25rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        border-radius: 0 0 0.5rem 0.5rem;
        box-shadow: 0 0.5rem 1rem var(--bs-border-color-translucent);
        z-index: 1030;
    }

    .navbar > .container-lg {
        position: relative;
    }
    /* Make nav-item / dropdown elements clickable on their entire space */
    .navbar-nav .nav-item {
        margin-bottom: 0;
        padding: 0;
        border-radius: 0;
    }

    .navbar-nav .nav-item > .nav-link,
    .navbar-nav .nav-item > .dropdown-toggle {
        display: block;
        padding: 1rem;
        width: 100%;
    }

    .navbar-nav .dropdown-menu {
        width: 100%;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus {
        background-color: rgba(var(--bs-secondary-rgb), 0.1);
    }

    .navbar-nav .dropdown-menu {
        border: 1px solid rgba(var(--bs-dark-rgb), 0.1);
        background-color: transparent;
        padding-left: 1rem;
    }

    .navbar-nav .dropdown-item {
        padding: 1rem 1rem;
        color: var(--bs-navbar-color);
        background-color: transparent;
    }

    .navbar-nav .dropdown-item:hover,
    .navbar-nav .dropdown-item:focus {
        background-color: rgba(var(--bs-secondary-rgb), 0.1);
        color: var(--bs-navbar-hover-color);
    }
}

.nav-tabs {
    --bs-nav-tabs-link-active-color: var(--bs-semi-muted);
    --bs-nav-tabs-link-active-bg: var(--bs-light);
    --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-light);
}

/* Mobile profile tab bar: five labelled tabs are tight — tighten padding and
   keep them on one row, letting the bar scroll sideways on very narrow
   screens instead of wrapping the Bin tab onto a second row. */
#nav-tab-mobile {
    flex-wrap: nowrap;
    overflow-x: auto;
}

#nav-tab-mobile .nav-link {
    --bs-nav-link-padding-x: 0.5rem;
    white-space: nowrap;
}

/* On the narrowest phones, step the type down a notch so the Bin tab stays
   visible without scrolling. */
@media (max-width: 359.9px) {
    #nav-tab-mobile .nav-link {
        --bs-nav-link-padding-x: 0.35rem;
        font-size: 0.857rem;
    }
}

/* Profile Bin tab: deep red so the destructive area reads differently from
   the content tabs (it also sits apart, far right via ms-auto on desktop). */
.nav-tabs .bin-tab,
.nav-tabs .bin-tab.active {
    color: #9b1c1c;
}

.nav-tabs .bin-tab:hover,
.nav-tabs .bin-tab:focus {
    color: #7f1414;
}

[data-bs-theme="dark"] .nav-tabs .bin-tab,
[data-bs-theme="dark"] .nav-tabs .bin-tab.active {
    color: #e57373;
}

[data-bs-theme="dark"] .nav-tabs .bin-tab:hover,
[data-bs-theme="dark"] .nav-tabs .bin-tab:focus {
    color: #ef9a9a;
}


/* || FOOTER */
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 0.857rem;
}

.footer-link a {
    padding: 0rem 0.286rem;
    display: inline-block;
}

.footer-nav a {
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: var(--bs-blue) !important;
}

.social-icons a {
    font-size: 1.2rem;
    color: var(--bs-light-text-emphasis);
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: var(--bs-blue);
}




/* || LINKS */
.link {
    text-decoration: none;
    color: currentColor;
    font-weight: 500 !important;
}

.link:hover,
.link:focus-visible {
    text-decoration: underline;
    color: currentColor;
}

.link-darken:hover,
.link-darken:focus-visible {
    text-decoration: none;
    color: currentColor;
    filter: brightness(0.85);
}

.link-hover-semi-muted:hover {
    color: var(--bs-semi-muted) !important;
    text-decoration: none;
}

.link-spanner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
/* inlined: components/other_components.css */
/* Keeps the chapter title and other details sticky when scrolling */
.sticky-story-details {
    position: sticky;
    top: 3.571rem;
    z-index: 10;
}

/* || SVGS */
.fill-primary { fill: var(--bs-primary); }
.fill-primary:hover { fill: var(--bs-primary-darker); }

.mce-content-body {
    padding: 1.429rem;
    background-color: var(--bs-white);
}

.chapter-type {
    margin-bottom: 0.429rem;
    margin-left: 2.429rem;
    color: var(--bs-semi-muted);
    font-style: italic;
}

.locked-gradient {
    position:relative;
    margin-top:-14.286rem;
    z-index:2;
    height: 14.286rem;
    background-image: linear-gradient(to bottom, var(--bs-white-translucent), var(--bs-white));
}   


/* || MODALS */
.modal-content {
    box-shadow: var(--bs-box-shadow);
    border: none;
}
/* inlined: components/stats-tags-icons.css */
/* || BADGES */
.badge {
    --bs-badge-font-weight: 500;
    font-size: 0.85em; /* Relative to parent font size */
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
}

.outfox-badge {
    display: inline-block;
    height: 1.333em;
    padding: 0.1em 0.1em 0.1em 0.25em;
}

/* || COLOR BACKGROUND */
.text-bg-primary {
    background-color: rgba(var(--bs-primary-rgb), var(--bs-badge-bg-opacity)) !important;
}

.text-bg-support {
    background-color: rgba(var(--bs-purple-rgb), var(--bs-badge-bg-opacity));
}


/* Icons */
.icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 2;
}

.icon-link {
    display: inline-block;
    align-items: center;
    height: 1.3em;
    text-decoration: none;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    z-index: 3;
}

/* Specific styles for chapters */
.large-icon-container .icon-link {
    font-size: 1.25em; /* Larger size for chapters */
}

.icon-link:hover,
.icon-link:focus-visible {
    opacity: 0.8;
}

.flex-chapter-tags-stats-parent-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
    margin-bottom: -0.25rem;
}

/* || TAGS */
.tag {
    background-color: rgba(var(--bs-secondary-color-rgb), 0.075);
    display: inline-block;
    color: var(--bs-secondary-color);
    font-size: 0.75em;
    border-radius: 1rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.35em 0.65em;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
    vertical-align: baseline;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}
.tag:hover,
.tag:focus-visible {
    background-color: rgba(var(--bs-secondary-color-rgb), 0.15);
    color: var(--bs-semi-muted);
    text-decoration: none;
}
.tag-more {
    display: none; /* Hidden by default, shown by JS when tags overflow */
    color: var(--bs-gray-400);
    font-size: 0.75rem;
    padding: 0.15rem;
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
}

.tag-container {
    display: flex;
    flex-wrap: nowrap;
    flex-grow: 10;
    gap: 0.25rem;
    font-size: 1rem;
    position: relative;
    min-width: 0;
    overflow: hidden;
}

/* || STATS */
.stats-container {
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.9rem;
}
.stat-item {
    display: inline-flex;
    align-items: center;
    vertical-align: baseline;
    height: 1.3em;
    text-decoration: none;
    gap: 0.25rem;
    margin-left: 0.75rem;
    font-weight: 500;
    z-index: 3;
}
.stat-item:first-child {
    margin-left: 0;
}
.stat-item:hover,
.stat-item:focus-visible {
    opacity: 0.8;
}
.full-width-chapter-details .stat-item {
    background-color: transparent;
    display: inline-block;
    border-radius: 1rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
    vertical-align: baseline;
    padding: 0.25em 0.5em;

    align-items: center;
    height: 1.5em;
    z-index: 3;
}
.scaffold-link {
    font-size:1.143rem;
    font-weight: 500;
    line-height: 1.5;
}
.scaffold-link a {
    padding-right: 1.429rem;
    display: inline-block;
}
.sidebar-stat {
    padding: 0.714rem;
    display: inline-block;
}
.sidebar-stat-link {
    color:var(--bs-black);
    padding: 0.714rem;
    display: inline-block;
    border-radius:0.5rem;
    text-decoration: none;
}
.sidebar-stat-link:hover {
    color:var(--bs-black);
    background-color: var(--bs-gray-100);
    text-decoration: none;
}

.stat-link:hover,
.stat-link:focus-visible {
    background-color: rgba(var(--bs-secondary-color-rgb), 0.15);
}
/* inlined: components/toasts.css */
/* || TOASTS */
#toast-container {
    position: fixed;
    top: 4.286rem; /* Adjust this value to match your navbar height */
    right: 1.429rem;
    z-index: 1060; /* Higher than navbar to float over everything */
    width: 22.857rem;
    max-width: calc(100% - 2.857rem); /* Ensure it doesn't overflow on small screens */
}

@media (max-width: 991.9px) {
    #toast-container {
        right: 0.714rem;
        left: 0.714rem;
        width: auto;
    }
    .toast {
        max-width: none;
        width: 100%;
        margin-bottom: 0 !important;
        margin-top: 1.25rem;
    }
}

.toast {
    opacity: 1;
    margin-bottom: 0.75rem;
    box-shadow: 0 0.5rem 1rem var(--bs-border-color-translucent);
    flex: 0; /* don't stretch (i.e. don't actually flex) */
}

@keyframes toast-fade { from { opacity: 0; transform: translateY(-1.429rem); } to { opacity: 1; transform: translateY(0); } }
.toast.fade-in   { animation: 0.3s ease-out    0s 1 normal  toast-fade;             }
.toast.timed-out { animation: 0.3s ease-in-out 0s 1 reverse toast-fade; opacity: 0; }
.toast.dismissed { animation: 0.2s ease-out    0s 1 reverse toast-fade; opacity: 0; }
/* inlined: components/welcome_banner.css */
.welcome-banner {
    position: relative;
}

.welcome-content {
    position: relative;
    z-index: 2;
    max-width: 856px;
}

.welcome-title {
    font-size: 2.000rem;
}

.welcome-logo {
    max-width: 376px;
}

.welcome-description {
    font-size: 1.429rem;
}

.welcome-explanation {
    font-size: 1.143rem;
}

.welcome-learn-more {
    font-size: 1.429rem;
}

.welcome-button {
    width: 6.071rem;
    font-size: 1.000rem;
}

.welcome-graphic {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
}

.welcome-graphic svg {
    float: right;
    position: relative;
    top: 0.357rem;
    right: -6.071rem;
    height: 22.857rem;
    width: 22.857rem;
}
/* inlined: components/feedback_tab.css */
/* Floating quick-feedback tab (templates/components/feedback_tab.html).
   Sits bottom-left; bottom-right belongs to the DEBUG persona switcher.
   z-index below the cookie banner (1050) and modal stack so both cover it. */
.feedback-tab {
    position: fixed;
    bottom: 0.857rem;
    left: 0.857rem;
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    gap: 0.429rem;
    padding: 0.357rem 0.786rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: 0.929rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    opacity: 0.75;
    transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
}

.feedback-tab:hover,
.feedback-tab:focus-visible {
    opacity: 1;
    color: var(--bs-body-color);
}

/* Phones: tucked tighter into the corner. */
@media (max-width: 767.98px) {
    .feedback-tab {
        bottom: 0.643rem;
        left: 0.643rem;
    }
}

@media print {
    .feedback-tab {
        display: none;
    }
}

/* inlined: components/chapter.css */
.chapter-title {
    line-height:1.75rem; 
    margin-bottom:0; 
    font-weight: 500;
}

.chapter-title-edit {
    width: 100%; 
    border: var(--bs-border-width) solid var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    padding: 0.25rem; 
    line-height:1.75rem; 
    font-size: 1.25rem; 
    margin-bottom:0;
    font-weight: 500;
}

.chapter-tags-edit {
    width: 100%; 
    border: var(--bs-border-width) solid var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    margin-bottom:0;
}   

/* inlined: components/chat.css */
.chat-title {
    line-height:1.75rem; 
    margin-bottom:0; 
    font-weight: 500;
}

.chat-title-edit {
    width: 100%; 
    border: var(--bs-border-width) solid var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    padding: 0.25rem; 
    line-height:1.75rem; 
    font-size: 1.25rem; 
    margin-bottom:0;
    font-weight: 500;
}

.thinking-trace-container {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.thinking-trace-container .btn-link {
    padding: 0.25rem 0.5rem;
}

.thinking-trace-container .fa-chevron-down {
    transition: transform 0.2s ease;
}

.thinking-trace-container .btn-link[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

/* Thinking trace text styling for both chat segments and old global container */
#thinking-trace-text,
[id^="thinking-trace-text-"] {
    max-height: 400px;
    overflow-y: auto;
    background-color: var(--bs-light);
    padding: 1rem;
    border-radius: 0.25rem;
}

/* Instruction background - darker than content for better mobile readability */
.bg-instruction {
    background-color: var(--bs-instruction-bg) !important;
}

/* Target instruction elements by their ID pattern for darker background */
[id^="segmentInstructionDisplayMode"] > .list-group-item,
[id^="segmentInstructionEditMode"] > .list-group-item {
    background-color: var(--bs-instruction-bg) !important;
}

/* Media Gallery */
.media-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.media-gallery-item {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0.375rem;
    background-color: var(--bs-light);
}

.media-gallery-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.media-gallery-thumbnail:hover {
    opacity: 0.85;
}

/* Videos section of the media panel: reuses the illustrations'
   .media-gallery-grid / .media-gallery-item square tiles so the two
   sections read as one system (canon chain at both hierarchy levels).
   object-fit: cover crops the clip into the square exactly like the
   image thumbnails; the native controls' fullscreen button shows it
   uncropped. The fixed square also means no reflow when playback
   replaces the poster. */
.media-gallery-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: #000;
}


/* Cast panel (canonical character designs) */
.character-card .character-portrait {
    width: 64px;
    height: 64px;
    object-fit: cover;
}

.character-portrait-placeholder {
    background-color: var(--bs-light);
    border: 1px dashed var(--bs-border-color);
    font-size: 1.5rem;
}

.character-card .character-portrait.segment-image-clickable {
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.character-card .character-portrait.segment-image-clickable:hover {
    opacity: 0.85;
}

.character-card .min-w-0 {
    min-width: 0; /* allow text-truncate inside a flex child */
}


/* Segment action buttons hidden while a text generation is streaming.
 * The body-level .text-generation-active class is toggled by
 * ButtonManager.disable/enableTextOperationButtons in static/js/utils.js.
 * Marks: copy, AI's notes, split chat, edit segment.
 * The Generate Image button stays visible: image generation is an
 * independent task type that can run concurrently with text generation,
 * so there's no reason to hide it mid-stream.
 * Regenerate and navigation buttons stay visible (so users can still
 * cancel/navigate while waiting). */
body.text-generation-active .hide-during-text-gen {
    display: none !important;
}

/* Rewrite-selection floating bar — a compact instruction input + Rewrite button
 * that appears above a text selection inside a canon AI message the user owns.
 * One step: type the instruction and hit Rewrite (or just hit Rewrite for a
 * default). Anchored to the selection (page coords) so it scrolls with content.
 * Coexists with the native OS Copy/Share menu on mobile rather than replacing it. */
.chat-rewrite-bar {
    position: absolute;
    z-index: 1081;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 0.5rem;
    width: min(380px, calc(100vw - 16px));
}

.chat-rewrite-bar-preview {
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-rewrite-bar-row {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
}

.chat-rewrite-bar-input {
    flex: 1 1 auto;
    min-width: 0;
}

.chat-rewrite-bar-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 567.9px) {
    .chat-rewrite-bar {
        width: calc(100vw - 16px);
    }
    /* Larger touch targets on small screens. */
    .chat-rewrite-bar-input,
    .chat-rewrite-bar-submit {
        min-height: 2.5rem;
        font-size: 1rem;
    }
}

/* Persistent highlight over the rewrite target — drawn once the input takes
 * focus (which collapses the native selection) so the user can still see what
 * they're rewriting. Primary path is the CSS Custom Highlight API (renders
 * behind text, follows reflow). */
::highlight(chat-rewrite-selection) {
    background-color: rgba(13, 110, 253, 0.28);
    color: inherit;
}

/* Fallback for browsers without the Highlight API: translucent overlay rects. */
.chat-rewrite-highlight-rect {
    position: absolute;
    z-index: 1080;            /* below the bar (1081), above content */
    background-color: rgba(13, 110, 253, 0.28);
    border-radius: 2px;
    pointer-events: none;     /* never block taps/clicks on the text beneath */
}

/* In-progress partial-rewrite display. While the replacement streams in, the
 * message is shown as [unchanged prefix][rewrite zone][preserved suffix]: the
 * zone is highlighted with a blinking caret so the user sees exactly where the
 * change is happening, and the suffix stays visible (gently de-emphasised) so
 * the text after the selection doesn't vanish until completion. Before real
 * content arrives (during the thinking phase), the zone shows the original
 * selection struck-through, signalling it's about to be replaced. */
.chat-rewrite-pending {
    text-decoration: line-through;
    /* Dim the struck text via colour (not opacity) so the teal caret below,
       which is an inline-block with its own background, stays full strength. */
    color: var(--bs-gray-500);
    background-color: rgba(220, 53, 69, 0.10);  /* faint red "about to be removed" */
    border-radius: 2px;
}

.chat-rewrite-zone {
    background-color: rgba(13, 110, 253, 0.13);
    border-radius: 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Flashing Outfox-teal caret — a loading indicator through the thinking phase
   (after the struck original) and the "writing here" cursor while streaming.
   inline-block so the parent's line-through doesn't strike across it. */
.chat-rewrite-pending::after,
.chat-rewrite-zone::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 1px;
    background-color: var(--bs-primary);  /* Outfox teal (#00b2b2) */
    vertical-align: text-bottom;
    animation: chat-rewrite-caret 1s steps(1) infinite;
}

@keyframes chat-rewrite-caret {
    50% { opacity: 0; }
}

.chat-rewrite-suffix {
    opacity: 0.6;   /* preserved trailing text — visible but visually subordinate */
}

/* Active "AI's Notes" button — the one segment whose story_notes are actually   */
/* sent to the AI on the next turn (set client-side by activeNotesHighlight.js). */
/* Brand-coloured + bold so users can find and edit the live notes. The base     */
/* .link-hover-semi-muted greys the icon on hover; that rule is :hover-only with  */
/* no !important, so this default-state colour wins until hovered.                */
.active-notes-btn,
.active-notes-btn > i {
    color: var(--bs-primary) !important;
    font-weight: 700;
}


/* Importing utility styles */
/* inlined: utilities.css */
/* || TRANSFORM */
.rotate-180 {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

/* Hide Alpine.js elements until they're ready */
[x-cloak]:not(.no-wobble) { 
    display: none !important; 
}
[x-cloak].no-wobble { 
    visibility: hidden; 
}

/* Used on js-interactive elements (htmx, alpine) */
.clickable {
    cursor: pointer;
}

/* Tooltip triggers must look — and to iOS, *be* — clickable.
   On touch devices tooltips are created lazily, by a single delegated click
   listener on `document` (TooltipManager._setupLazyInit in utils.js). iOS
   Safari only delivers click events to document-level listeners when the tap
   target is "clickable": a link, a form control, or an element with its own
   click handler or cursor:pointer. A bare <i>/<span> trigger is none of those,
   so its tooltip could never initialise on iPhone no matter how accurately it
   was tapped. Buttons and links were unaffected, which is why this only showed
   up on icon/text triggers (the Cast panel's help icon, card stat items). */
[data-bs-toggle="tooltip"] {
    cursor: pointer;
}

/* Icon-only help triggers: pad out a ~14px glyph to a finger-sized target
   without disturbing surrounding layout. */
.help-icon {
    padding: 0.5rem;
    margin: -0.5rem;
    /* Keeps the padded box from swallowing clicks meant for neighbours when
       the icon sits inline in a heading. */
    display: inline-block;
    line-height: 1;
}

/* HTMX loading indicator */
.htmx-indicator {
    display: none;
}

.loading-indicator {
    height: 0.75rem;
    width: 0.75rem;
}

#notifications-spinner {
    width: 100%;
    height: 100%;
}

/* Display loading indicator for HTMX requests */
/* Note: The two selectors serve different purposes:
   1. .htmx-request .htmx-indicator: Shows the indicator inside an element making an HTMX request
   2. .htmx-request.htmx-indicator: Shows the indicator when the element itself is both the requester and the indicator */
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-block;
}

/* Horizontal scroll container */
.horizontal-scroll-container {
    overflow-x: auto;
}

/* Shadow styles */
.shadow-sm-up { 
    box-shadow: 0 -0.125rem 0.25rem var(--bs-border-color-translucent);
}

/* Text truncate styles */
.text-truncate-body-large {
    -webkit-line-clamp: 6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-truncate-body-small {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Anchor offset styles */
a.anchor-offset {
    display: block;
    position: relative;
    top: -5.714rem;
    visibility: hidden;
}

/* Make htmx links look like normal links */
a[hx-get], a[hx-post], a[hx-put], a[hx-delete] {
    cursor: pointer;
}

/* Used for dulling out operation buttons when they're disabled */
.operation-button {
    opacity: inherit;
    transition: opacity 0.2s ease-in-out;
}

.operation-button.disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

/* Grey out JS-dependent buttons until scripts have loaded.
   Scoped to <main> so navbar, footer, modals are unaffected.
   button[type="button"] excludes form submit buttons that work without JS.
   Fallback animation re-enables buttons after 5s if JS never loads
   (e.g. Brave Shields, ad blockers, broken cache). Intentionally longer
   than the 3s JS fallback in base.html — this CSS-only fallback is the
   last resort when even the inline fallback script fails. When JS loads
   normally it removes .js-loading well before either fallback fires. */
.js-loading main [data-action],
.js-loading main button[type="button"] {
    opacity: 0.33;
    pointer-events: none;
    animation: js-loading-timeout 0s 5s forwards;
}

@keyframes js-loading-timeout {
    to {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Allow a flex/grid item to shrink below its content's min-content width
   (used by card columns whose tag rows are nowrap). Deliberately NOT
   !important: the story-map page overrides it with an inline
   min-width:400px on the same element, and inline must win. */
.min-w-0 {
    min-width: 0;
}


/* Importing variable styles */
/* inlined: variables.css */
:root,
[data-bs-theme=light] {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #a250b2; /* SUPPORT */
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #d94f21; /* PREMIUM / PATRON - darker premium orange */
  --bs-gray-basic: #999999; /* BASIC - medium grey */
  --bs-gray-plus: #6e6e6e; /* PLUS - medium grey */
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-primary-white: #fff;
  --bs-gray: #7f7f7f;
  --bs-gray-dark: #404040;
  --bs-gray-100: #e5e5e5;
  --bs-gray-200: #cccccc;
  --bs-gray-300: #b3b3b3;
  --bs-gray-400: #999999;
  --bs-gray-500: #7f7f7f;
  --bs-gray-600: #666666;
  --bs-gray-700: #4d4d4d;
  --bs-gray-800: #333333;
  --bs-gray-900: #1a1a1a;
  --bs-primary: #00b2b2; /* PRIMARY */
  --bs-secondary: #7f7f7f; /* SECONDARY */
  --bs-success: #73b21b; /* SUCCESS */
  --bs-info: #0dcaf0;
  --bs-warning: #cd9a00; /* WARNING */
  --bs-danger: #cc1f3c; /* DANGER */
  --bs-light: #f8f8f8; /* LIGHT */
  --bs-dark: #262626; /* DARK */
  --bs-primary-rgb: 0, 178, 178;
  --bs-secondary-rgb: 108, 125, 125;
  --bs-success-rgb: 115, 178, 27;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 205, 154, 0;
  --bs-danger-rgb: 204, 31, 60;
  --bs-light-rgb: 248, 248, 248;
  --bs-dark-rgb: 38, 38, 38;
  --bs-purple-rgb: 162, 80, 178; /* SUPPORT */
  --bs-primary-darker: #009999;
  --bs-success-darker: #639917;
  --bs-warning-darker: #d9a50b;
  --bs-danger-darker: #b31b34;
  --bs-purple-darker: #8b4599;
  --bs-orange-darker: #c44a1d;
  --bs-gray-basic-darker: #858585; /* BASIC hover */
  --bs-gray-plus-darker: #565656; /* PLUS hover */
  --bs-primary-text-emphasis: #052c65;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0a3622;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #58151c;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #9ec5fe;
  --bs-secondary-border-subtle: #c4c8cb;
  --bs-success-border-subtle: #a3cfbb;
  --bs-info-border-subtle: #9eeaf9;
  --bs-warning-border-subtle: #ffe69c;
  --bs-danger-border-subtle: #f1aeb5;
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #262626;
  --bs-body-color-rgb: 38, 38, 38;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: rgba(38, 38, 38, 0.75);
  --bs-secondary-color-rgb: 38, 38, 38;
  --bs-secondary-bg: #ededed;
  --bs-secondary-bg-rgb: 237, 237, 237;
  --bs-tertiary-color: rgba(38, 38, 38, 0.5);
  --bs-tertiary-color-rgb: 38, 38, 38;
  --bs-tertiary-bg: #f8f8f8;
  --bs-tertiary-bg-rgb: 248, 248, 248;
  --bs-link-color: #00b2b2;
  --bs-link-color-rgb: 0, 178, 178;
  --bs-link-decoration: none;
  --bs-link-hover-color: #009999;
  --bs-link-hover-color-rgb: 0, 153, 153;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #e3e3e3;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(0, 178, 178, 0.25);
  --bs-form-valid-color: var(--bs-success);
  --bs-form-valid-border-color: var(--bs-success);
  --bs-form-invalid-color: var(--bs-danger);
  --bs-form-invalid-border-color: var(--bs-danger);
  --bs-dropdown-item-blue: #f0f8ff;
  --bs-dropdown-item-blue-hover: #e9f1f8;
  --bs-white-translucent: rgba(255, 255, 255, 0);

  --bs-semi-muted: rgba(33, 41, 41, 0.875);
  --bs-very-muted: rgba(33, 41, 41, 0.4);
  --bs-dark-muted: rgba(33, 41, 41, 0.4);
  
  --bs-badge-bg-opacity: 0.15;

  /* Chat segment instruction background - darker than bg-light for better distinction */
  --bs-instruction-bg: #ececec;
}

[data-bs-theme=dark] {
  /* Base colors */
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #a250b2; /* SUPPORT */
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #d94f21; /* PREMIUM / PATRON - darker premium orange */
  --bs-gray-basic: #999999; /* BASIC - medium grey */
  --bs-gray-plus: #6e6e6e; /* PLUS - medium grey */
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #f0f0f0;
  --bs-white: #222222;
  --bs-primary-white: #fff;
  --bs-gray: #9a9a9a;
  --bs-gray-dark: #d9d9d9;

  /* Gray scale */
  --bs-gray-100: #2f2f2f;
  --bs-gray-200: #3f3f3f;
  --bs-gray-300: #575757;
  --bs-gray-400: #737373;
  --bs-gray-500: #939393;
  --bs-gray-600: #b3b3b3;
  --bs-gray-700: #cdcdcd;
  --bs-gray-800: #e6e6e6;
  --bs-gray-900: #fafafa;

  /* Theme colors */
  --bs-primary: #00b2b2;
  --bs-secondary: #9a9a9a;
  --bs-success: #73b21b;
  --bs-info: #0dcaf0;
  --bs-warning: #f2b90c;
  --bs-danger: #cc1f3c;
  --bs-light: #222222;
  --bs-dark: #e6e6e6;

  /* RGB values */
  --bs-primary-rgb: 0, 178, 178;
  --bs-secondary-rgb: 154, 154, 154;
  --bs-success-rgb: 115, 178, 27;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 242, 185, 12;
  --bs-danger-rgb: 204, 31, 60;
  --bs-light-rgb: 34, 34, 34;
  --bs-dark-rgb: 230, 230, 230;
  --bs-purple-rgb: 162, 80, 178; /* SUPPORT */

  /* Darker variants */
  --bs-primary-darker: #009999;
  --bs-success-darker: #639917;
  --bs-warning-darker: #d9a50b;
  --bs-danger-darker: #b31b34;
  --bs-purple-darker: #8b4599;
  --bs-orange-darker: #c44a1d;
  --bs-gray-basic-darker: #858585; /* BASIC hover */
  --bs-gray-plus-darker: #565656; /* PLUS hover */

  /* Text emphasis colors */
  --bs-primary-text-emphasis: #b3ebeb;
  --bs-secondary-text-emphasis: #e0e0e0;
  --bs-success-text-emphasis: #d1ecb0;
  --bs-info-text-emphasis: #b0e8fa;
  --bs-warning-text-emphasis: #ffedb3;
  --bs-danger-text-emphasis: #ffb3bc;
  --bs-light-text-emphasis: #ababab;
  --bs-dark-text-emphasis: #f5f5f5;

  /* Subtle background colors */
  --bs-primary-bg-subtle: #005757;
  --bs-secondary-bg-subtle: #404040;
  --bs-success-bg-subtle: #314521;
  --bs-info-bg-subtle: #1e535d;
  --bs-warning-bg-subtle: #524517;
  --bs-danger-bg-subtle: #521e27;
  --bs-light-bg-subtle: #3a3a3a;
  --bs-dark-bg-subtle: #4f4f4f;

  /* Subtle border colors */
  --bs-primary-border-subtle: #008585;
  --bs-secondary-border-subtle: #555555;
  --bs-success-border-subtle: #4e712f;
  --bs-info-border-subtle: #288fa3;
  --bs-warning-border-subtle: #8f731a;
  --bs-danger-border-subtle: #8f283a;
  --bs-light-border-subtle: #484848;
  --bs-dark-border-subtle: #626262;

  /* Other adjustments */
  --bs-white-rgb: 34, 34, 34;
  --bs-black-rgb: 240, 240, 240;
  --bs-body-color: #e6e6e6;
  --bs-body-color-rgb: 230, 230, 230;
  --bs-body-bg: #2a2a2a;
  --bs-body-bg-rgb: 42, 42, 42;
  --bs-emphasis-color: #f0f0f0;
  --bs-emphasis-color-rgb: 240, 240, 240;
  --bs-secondary-color: rgba(230, 230, 230, 0.75);
  --bs-secondary-color-rgb: 230, 230, 230;
  --bs-secondary-bg: #333333;
  --bs-secondary-bg-rgb: 51, 51, 51;
  --bs-tertiary-color: rgba(230, 230, 230, 0.5);
  --bs-tertiary-color-rgb: 230, 230, 230;
  --bs-tertiary-bg: #3f3f3f;
  --bs-tertiary-bg-rgb: 63, 63, 63;

  /* Improved hover effects */
  --bs-link-hover-color: #00e6e6;
  --bs-link-hover-color-rgb: 0, 230, 230;
  --bs-btn-hover-bg-tint: rgba(255, 255, 255, 0.15);
  --bs-hover-bg: #444444;
  --bs-hover-border-color: #555555;
  --bs-hover-box-shadow: 0 0 0.571rem rgba(0, 178, 178, 0.4);
  --bs-nav-link-hover-color: #00e6e6;
  --bs-dropdown-link-hover-bg: #444444;
  --bs-dropdown-link-hover-color: #ffffff;

  --bs-semi-muted: rgba(230, 230, 230, 0.875);
  --bs-very-muted: rgba(230, 230, 230, 0.4);
  --bs-dark-muted: rgba(33, 41, 41, 0.4);

  /* Unchanged properties */
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-link-color: #00b2b2;
  --bs-link-color-rgb: 0, 178, 178;
  --bs-link-decoration: none;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #524517;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #3f3f3f;
  --bs-border-color-translucent: rgba(240, 240, 240, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.35);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(0, 178, 178, 0.25);
  --bs-form-valid-color: var(--bs-success);
  --bs-form-valid-border-color: var(--bs-success);
  --bs-form-invalid-color: var(--bs-danger);
  --bs-form-invalid-border-color: var(--bs-danger);
  --bs-dropdown-item-blue: #0a1a2f;
  --bs-dropdown-item-blue-hover: #0d2140;
  --bs-white-translucent: rgba(0, 0, 0, 0);
  
  --bs-badge-bg-opacity: 0.2;

  /* Chat segment instruction background - darker than bg-light for better distinction */
  --bs-instruction-bg: #363636;

  /* Card background - subtle contrast against sidebar/page background */
  --bs-card-elevated-bg: #333333;

  /* Navbar background - slightly lighter than body-bg for visibility */
  --bs-navbar-dark-bg: #313131;
}

/* Importing responsive styles */
/* inlined: responsive.css */
@media only screen and (min-width: 769px) { /* desktop */
    .device-big, .index-tab > .tab-pane {
        display: block;
    }
    .device-small {
        display: none;
    }
    body {
        margin-bottom: 8.929rem;
    }

    html {
        font-size: 14px; /* Default is typically 14px */
    }
}

@media (max-width: 991.9px) { /* mobile */
    /* Scale down the base font size for mobile devices */
    html {
        font-size: 13.5px;
    }

    /* Stats items */
    .stat-item {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        margin-left: 0.75rem;
    }
    
    /* Icons in stats */
    .stat-item i {
        margin-right: 0.15rem;
        font-size: 0.85em;
    }
    
    /* Other essential responsive behavior */
    .device-big {
        display: none;
    }
    .device-small {
        display: block;
    }
    
    body {
        margin-bottom: 12.500rem;
    }
    
    /* Mobile sidebar functionality */
    #sidebar {
        position: fixed;
        left: 0;
        top: 4.286rem; /* 60px in rems */
        width: 36.571rem; /* 512px in rems */
        max-width: calc(100vw - 5.714rem); /* 80px in rems */
        height: 100%;
        background-color: var(--bs-body-bg);
        z-index: 1060; /* Above cookie banner (1050) */
        overflow-x: hidden;
        transition: transform 0.5s ease-out;
        transform: translateX(-110%); /* Initially offscreen */
        box-shadow: 0.286rem 0.286rem 0.286rem 0.286rem var(--bs-border-color-translucent); /* 4px in rems */
    }
    #sidebar.active {
        transform: translateX(0); /* Slide in */
    }
    #overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--bs-dark-muted);
        z-index: 500;
        display: block;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        pointer-events: none; /* Ensures clicks can pass through when it's invisible */
    }
    
    /* BOOTSTRAP OVERRIDES - keep only core layout classes */
    .container {
      max-width: 616px;
    }
    
    /* Column classes */
    .col-md-1 { flex: 0 0 auto; width: 25%; }
    .col-md-2 { flex: 0 0 auto; width: 50%; }
    .col-md-3 { flex: 0 0 auto; width: 75%; }
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* Additional mobile at smaller widths */
@media (max-width: 567.9px) {
    .searchbar {
        width: 8.571rem;
    }

    /* Tighter spacing for very small screens */
    .stat-item {
        margin-left: 0.5rem;
    }
}

/* Ensure text end class works correctly */
.text-end {
    text-align: right !important;
}

/* Override any conflicting flex-wrap properties */
.flex-wrap.stats-container,
.flex-wrap-reverse.stats-container {
    flex-wrap: nowrap !important;
}
/* NOTE: do not pin inputs to 16px here. iOS Safari auto-zooms any focused
   field whose computed font-size is under 16px, but a hard 16px pin made
   typed text visibly larger than the 13.5px-root body text around it. The
   auto-zoom is instead suppressed by the iOS-only maximum-scale=1 viewport
   script in templates/base.html, so inputs can stay at their designed 1rem. */