/*
 * Solarized Light over Bootstrap 5.
 * Palette: https://ethanschoonover.com/solarized/
 */
:root {
    --sol-base03: #002b36;
    --sol-base02: #073642;
    --sol-base01: #586e75;
    --sol-base00: #657b83;
    --sol-base0: #839496;
    --sol-base1: #93a1a1;
    --sol-base2: #eee8d5;
    --sol-base3: #fdf6e3;
    --sol-yellow: #b58900;
    --sol-orange: #cb4b16;
    --sol-red: #dc322f;
    --sol-magenta: #d33682;
    --sol-violet: #6c71c4;
    --sol-blue: #268bd2;
    --sol-cyan: #2aa198;
    --sol-green: #859900;

    --bs-body-bg: var(--sol-base3);
    --bs-body-color: var(--sol-base00);
    --bs-emphasis-color: var(--sol-base01);
    --bs-secondary-color: var(--sol-base1);
    --bs-border-color: var(--sol-base2);
    --bs-link-color: var(--sol-blue);
    --bs-link-hover-color: var(--sol-cyan);
}

body {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

h1, h2, h3, h4, h5, h6, .fw-semibold {
    color: var(--sol-base01);
}

/* --- Bootstrap component tuning ------------------------------------- */

.btn-primary {
    --bs-btn-bg: var(--sol-blue);
    --bs-btn-border-color: var(--sol-blue);
    --bs-btn-hover-bg: #1e6fa8;
    --bs-btn-hover-border-color: #1e6fa8;
    --bs-btn-active-bg: #1e6fa8;
    --bs-btn-active-border-color: #1e6fa8;
}

.btn-outline-secondary {
    --bs-btn-color: var(--sol-base01);
    --bs-btn-border-color: var(--sol-base1);
    --bs-btn-hover-bg: var(--sol-base2);
    --bs-btn-hover-border-color: var(--sol-base1);
    --bs-btn-hover-color: var(--sol-base01);
    --bs-btn-active-bg: var(--sol-base2);
    --bs-btn-active-border-color: var(--sol-base1);
    --bs-btn-active-color: var(--sol-base01);
}

.form-control, .form-select {
    background-color: #fffdf5;
    border-color: var(--sol-base1);
    color: var(--sol-base01);
}

.form-control:focus, .form-select:focus {
    background-color: #fffdf5;
    border-color: var(--sol-blue);
    color: var(--sol-base01);
    box-shadow: 0 0 0 0.2rem rgba(38, 139, 210, 0.15);
}

.form-control::placeholder {
    color: var(--sol-base1);
}

.card {
    --bs-card-bg: #fffdf5;
    --bs-card-border-color: var(--sol-base2);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--sol-base00);
    --bs-table-border-color: var(--sol-base2);
}

.alert-danger {
    --bs-alert-bg: #fbeae9;
    --bs-alert-border-color: var(--sol-red);
    --bs-alert-color: var(--sol-red);
}

.text-muted, .form-text {
    color: var(--sol-base1) !important;
}

/* --- App shell -------------------------------------------------------- */

.sidebar {
    width: 220px;
    background: var(--sol-base2);
    border-right: 1px solid #ded8c4;
}

.sidebar .brand {
    color: var(--sol-base01);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.15rem;
}

.sidebar .nav-link {
    color: var(--sol-base00);
    border-radius: 0.375rem;
    padding: 0.4rem 0.75rem;
}

.sidebar .nav-link:hover {
    background: rgba(253, 246, 227, 0.7);
    color: var(--sol-base01);
}

.sidebar .nav-link.active {
    background: var(--sol-base3);
    color: var(--sol-base01);
    font-weight: 500;
}

/* --- Chat -------------------------------------------------------------- */

.chat-bubble {
    border-radius: 1rem;
    padding: 0.6rem 1rem;
    white-space: pre-wrap;
    line-height: 1.5;
}

.msg-user .chat-bubble {
    background: rgba(181, 137, 0, 0.12);
    border-top-right-radius: 0.25rem;
}

.msg-character .chat-bubble {
    background: rgba(38, 139, 210, 0.1);
    border-top-left-radius: 0.25rem;
}

.msg-narrator .chat-bubble {
    background: rgba(133, 153, 0, 0.12);
    border-top-left-radius: 0.25rem;
    font-style: italic;
}

.msg-writer .chat-bubble {
    background: rgba(108, 113, 196, 0.12);
    border-top-left-radius: 0.25rem;
}

/* Roleplay style-guide markup inside bubbles */
.rp-action {
    font-style: italic;
    color: var(--sol-base01);
}

.rp-thought {
    font-style: italic;
    color: var(--sol-cyan);
}

.rp-meta {
    color: var(--sol-base1);
    font-size: 0.85em;
}

.speaker-user { color: var(--sol-yellow); }
.speaker-character { color: var(--sol-blue); }
.speaker-narrator { color: var(--sol-green); }
.speaker-writer { color: var(--sol-violet); }

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.avatar-user { background: rgba(181, 137, 0, 0.18); color: var(--sol-yellow); }
.avatar-character { background: rgba(38, 139, 210, 0.15); color: var(--sol-blue); }
.avatar-narrator { background: rgba(133, 153, 0, 0.18); color: var(--sol-green); }
.avatar-writer { background: rgba(108, 113, 196, 0.15); color: var(--sol-violet); }

/* --- Misc --------------------------------------------------------------- */

.hover-reveal { visibility: hidden; }
.reveal-parent:hover .hover-reveal { visibility: visible; }

.character-portrait {
    aspect-ratio: 3 / 2;
    width: 100%;
    object-fit: cover;
    background: var(--sol-base2);
}

.gallery-item {
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: cover;
}