:root {
    --bg-base: #111112;
    --bg-panel: #151515;
    --bg-card: #1b1b1d;
    --bg-card-hover: #242424;
    --border-subtle: #28282b;
    --accent: #ff9f1c;
    --accent-strong: #ff7a18;
    --accent-soft: rgba(255, 159, 28, 0.13);
    --text-primary: #f2f2f3;
    --text-muted: #a0a0a8;
    --danger: #e5484d;
}

html, body {
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--bg-base);
    color: var(--text-primary);
}

body {
    overflow-x: hidden;
}

html {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 159, 28, 0.46) rgba(255, 255, 255, 0.035);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.035);
    border-radius: 999px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    border: 2px solid rgba(17, 17, 18, 0.92);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 159, 28, 0.72), rgba(130, 130, 138, 0.58));
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--accent), rgba(255, 122, 24, 0.82));
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--accent);
}

.btn-primary {
    color: #1a1205;
    background-color: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}

    .btn-primary:hover, .btn-primary:active {
        color: #1a1205;
        background-color: var(--accent-strong);
        border-color: var(--accent-strong);
    }

.btn-outline-accent {
    color: var(--accent);
    border: 1px solid var(--accent);
    background: transparent;
    font-weight: 600;
}

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

/* Solid counterpart of .btn-outline-accent — used for toggle buttons in their active state
   (e.g. the Merge / Cancel merge toggle in the memory and lore panels). */
.btn-accent {
    color: #101013;
    background: var(--accent);
    border: 1px solid var(--accent);
    font-weight: 700;
}

    .btn-accent:hover {
        color: #101013;
        background: var(--accent);
        border-color: var(--accent);
        filter: brightness(1.08);
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem #0d0d0f, 0 0 0 0.2rem var(--accent);
}

.content {
    padding-top: 1.1rem;
}

.fl-page-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.35rem;
}

.fl-page-title {
    color: #fff;
    font-size: clamp(1.55rem, 2vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 0.35rem;
}

.fl-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fl-search-shell {
    width: min(590px, 38vw);
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: #151515;
    color: #6f6f75;
    font-weight: 500;
}

.fl-search-icon {
    color: #8d8d92;
    font-size: 1.3rem;
    line-height: 1;
}

.fl-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.fl-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 40px;
    padding: 0 1rem;
    border-radius: 8px;
    background: #1b1b1d;
    border: 1px solid #202024;
    color: #c7c7ce;
    font-size: 0.88rem;
    font-weight: 700;
}

.fl-tab.active {
    color: #fff;
    background: #252525;
    border-color: #333338;
}

.fl-tab b {
    min-width: 18px;
    min-height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #8a4d0a;
    color: var(--accent);
    font-size: 0.7rem;
}

/* Cards and panels */
.ai-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
}

.ai-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 1rem;
}

.scenario-detail-hero {
    margin-bottom: 1.35rem;
}

.scenario-detail-hero.has-cover {
    position: relative;
    overflow: hidden;
    min-height: clamp(320px, 36vw, 430px);
    padding: clamp(1rem, 2.4vw, 1.5rem);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: #101012;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.32);
    isolation: isolate;
}

.scenario-detail-hero.has-cover::before,
.scenario-detail-hero.has-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.scenario-detail-hero.has-cover::before {
    z-index: -2;
    background-image: var(--scenario-detail-cover);
    background-position: center;
    background-size: cover;
    opacity: 0.62;
    filter: saturate(0.95) contrast(1.08);
    transform: scale(1.03);
}

.scenario-detail-hero.has-cover::after {
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(8, 8, 10, 0.94), rgba(8, 8, 10, 0.68) 44%, rgba(8, 8, 10, 0.26)),
        linear-gradient(0deg, rgba(8, 8, 10, 0.78), rgba(8, 8, 10, 0.18) 58%, rgba(8, 8, 10, 0.42));
}

.scenario-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0;
}

.scenario-detail-heading {
    min-width: 0;
    flex: 1 1 auto;
}

.scenario-detail-hero.has-cover .scenario-detail-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    align-items: end;
    min-height: inherit;
    margin-bottom: 0;
    gap: 1.25rem;
}

.scenario-detail-hero.has-cover .scenario-detail-heading {
    align-self: end;
    padding-block: 1rem;
}

.scenario-detail-title {
    max-width: min(100%, 32em);
    margin: 0 0 0.5rem;
    color: var(--accent);
    font-size: clamp(1.75rem, 3.35vw, 2.65rem);
    line-height: 1.08;
    font-weight: 850;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.scenario-detail-hero.has-cover .scenario-detail-title {
    max-width: min(100%, 14ch);
    color: #fff;
    font-size: clamp(2rem, 5vw, 4.2rem);
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.7);
}

.scenario-detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.scenario-detail-hero.has-cover .scenario-detail-chips .chip {
    border-color: rgba(255, 159, 28, 0.62);
    background: rgba(8, 8, 10, 0.72);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

.scenario-detail-hero-side {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.75rem;
}

.scenario-detail-cover-frame {
    overflow: hidden;
    aspect-ratio: 4 / 5;
    max-height: 310px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
}

.scenario-detail-cover-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scenario-detail-actions {
    flex: 0 1 430px;
    min-width: min(360px, 100%);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
}

.scenario-detail-hero.has-cover .scenario-detail-actions {
    width: 100%;
    min-width: 0;
    flex-basis: auto;
    padding: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(9, 9, 11, 0.62);
    backdrop-filter: blur(8px);
}

.scenario-detail-action-buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.scenario-detail-hero.has-cover .scenario-detail-action-buttons {
    justify-content: stretch;
}

.scenario-detail-action {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0.45rem 0.9rem;
    font-size: 0.92rem;
    line-height: 1.1;
    white-space: nowrap;
}

.scenario-detail-hero.has-cover .scenario-detail-action {
    flex: 1 1 140px;
}

.scenario-character-picker {
    width: min(360px, 100%);
    align-self: flex-end;
}

.scenario-detail-hero.has-cover .scenario-character-picker {
    width: 100%;
    align-self: stretch;
}

.scenario-character-help {
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-align: right;
}

.scenario-mechanics-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.scenario-mechanics-section {
    min-width: 0;
}

.scenario-mechanics-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.scenario-mechanics-count {
    min-width: 1.65rem;
    padding: 0.08rem 0.45rem;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.35;
    text-align: center;
}

.scenario-mechanics-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.scenario-mechanics-item {
    min-width: 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}

.scenario-mechanics-item-title,
.scenario-mechanics-trigger-title {
    min-width: 0;
    color: var(--text-primary);
    font-size: 0.93rem;
    font-weight: 750;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.scenario-mechanics-trigger-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.scenario-mechanics-trigger-title .chip {
    flex: 0 0 auto;
    padding-top: 0.12rem;
    padding-bottom: 0.12rem;
    font-size: 0.72rem;
}

.scenario-mechanics-item-body {
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .scenario-detail-hero.has-cover {
        min-height: auto;
        padding: 0.85rem;
    }

    .scenario-detail-header {
        flex-direction: column;
        gap: 0.85rem;
        margin-bottom: 0;
    }

    .scenario-detail-hero.has-cover .scenario-detail-header {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    .scenario-detail-hero.has-cover .scenario-detail-heading {
        padding-block: 0.4rem;
    }

    .scenario-detail-title {
        max-width: 100%;
        font-size: clamp(1.65rem, 7.4vw, 2.25rem);
    }

    .scenario-detail-hero.has-cover .scenario-detail-title {
        max-width: 100%;
        font-size: clamp(1.9rem, 10vw, 2.8rem);
    }

    .scenario-detail-cover-frame {
        aspect-ratio: 16 / 9;
        max-height: none;
    }

    .scenario-detail-actions {
        width: 100%;
        min-width: 0;
        flex-basis: auto;
    }

    .scenario-detail-hero.has-cover .scenario-detail-actions {
        padding: 0.65rem;
    }

    .scenario-detail-action-buttons {
        justify-content: stretch;
    }

    .scenario-detail-action {
        flex: 1 1 145px;
        padding-inline: 0.75rem;
    }

    .scenario-character-picker {
        width: 100%;
    }

    .scenario-character-help {
        text-align: left;
    }
}

.scenario-introduction-content {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.scenario-introduction-content img,
.scenario-introduction-content video,
.scenario-introduction-content iframe {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
    border-radius: 8px;
}

.scenario-introduction-content table,
.scenario-introduction-content pre {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.rich-text-editor-error {
    margin-top: 0.35rem;
    color: #ff8a8a;
    font-size: 0.78rem;
}

.scenario-introduction-editor .ql-editor.ql-blank::before {
    color: #d7dbe5 !important;
    opacity: 1 !important;
    font-weight: 500;
    text-shadow: none;
}

/* Memory Matrix grouped card layout */
.memory-lab-shell {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.memory-lab-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.memory-lab-search {
    flex: 1 1 420px;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.95rem;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-panel);
}

.memory-lab-search span {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.memory-lab-search .form-control {
    min-width: 0;
    border: 0;
    background: transparent;
    padding-inline: 0;
    box-shadow: none;
}

.memory-lab-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.memory-lab-view-toggle {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: #151515;
}

.memory-lab-view-button {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 0;
    border-radius: 6px;
    padding: 0 0.65rem;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.memory-lab-view-button:hover,
.memory-lab-view-button.active {
    background: var(--accent-soft);
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px rgba(255, 174, 66, 0.26);
}

.memory-lab-view-icon {
    position: relative;
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
}

.memory-lab-view-icon.cards {
    border-radius: 2px;
    background:
        linear-gradient(currentColor 0 0) 0 0 / 0.39rem 0.39rem no-repeat,
        linear-gradient(currentColor 0 0) 100% 0 / 0.39rem 0.39rem no-repeat,
        linear-gradient(currentColor 0 0) 0 100% / 0.39rem 0.39rem no-repeat,
        linear-gradient(currentColor 0 0) 100% 100% / 0.39rem 0.39rem no-repeat;
}

.memory-lab-view-icon.list::before,
.memory-lab-view-icon.list::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 0.18rem;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0.36rem 0 currentColor;
}

.memory-lab-view-icon.list::before {
    top: 0.08rem;
}

.memory-lab-view-icon.list::after {
    bottom: 0.08rem;
}

.memory-lab-sort {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: #151515;
}

.memory-lab-sort span {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.memory-lab-sort .form-select {
    width: auto;
    min-width: 150px;
    min-height: 36px;
    border: 0;
    background-color: transparent;
    color: var(--text-primary);
    box-shadow: none;
}

.memory-lab-tabs {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.memory-lab-tab {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: #c9c9cf;
    font-size: 0.86rem;
    font-weight: 750;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.memory-lab-tab:hover,
.memory-lab-tab.active {
    border-color: var(--accent);
    color: var(--text-primary);
    background: var(--accent-soft);
}

.memory-lab-tab b {
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #262629;
    color: var(--accent);
    font-size: 0.72rem;
}

.memory-lab-sections {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* "Show all (N)" — reveals a section's cards beyond the render cap. */
.memory-lab-show-all {
    display: block;
    width: calc(100% - 1.7rem);
    margin: 0 0.85rem 0.85rem;
    padding: 0.45rem 0.75rem;
}

.memory-lab-section {
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-panel);
    overflow: hidden;
}

.memory-lab-section-header {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border-subtle);
}

.memory-lab-section-toggle {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 850;
    letter-spacing: 0.3px;
    cursor: pointer;
    padding: 0.2rem 0;
}

.memory-lab-chevron {
    width: 18px;
    color: var(--accent);
    font-family: Consolas, monospace;
    text-align: center;
}

.memory-lab-count {
    color: var(--text-muted);
    font-weight: 650;
}

.memory-lab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
    padding: 0.85rem;
}

.memory-lab-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.85rem;
}

.memory-lab-list-row {
    position: relative;
    min-height: 112px;
    /* Let the browser skip layout/paint of below-the-fold rows (progressive enhancement). */
    content-visibility: auto;
    contain-intrinsic-size: auto 112px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 28%);
    gap: 1rem;
    align-items: center;
    width: 100%;
    text-align: left;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 0.85rem 0.95rem 0.85rem 1.12rem;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.memory-lab-list-row:hover {
    transform: translateY(-1px);
    border-color: var(--accent);
    background: var(--bg-card-hover);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
}

.memory-lab-list-main,
.memory-lab-list-side {
    min-width: 0;
}

.memory-lab-list-main {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.memory-lab-list-kicker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.memory-lab-list-title {
    color: #fff;
    font-size: 0.98rem;
    line-height: 1.25;
    font-weight: 820;
    margin: 0;
    overflow-wrap: anywhere;
}

.memory-lab-list-preview {
    color: #b9b9c0;
    font-size: 0.84rem;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.memory-lab-list-side {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    align-items: stretch;
}

.memory-lab-card {
    position: relative;
    min-height: 218px;
    /* Let the browser skip layout/paint of below-the-fold cards (progressive enhancement). */
    content-visibility: auto;
    contain-intrinsic-size: auto 218px;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    text-align: left;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 0.9rem 0.95rem 0.95rem 1.12rem;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.memory-lab-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    background: var(--bg-card-hover);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.24);
}

.memory-lab-card-accent {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--accent);
}

.memory-lab-card.tone-character .memory-lab-card-accent,
.memory-lab-list-row.tone-character .memory-lab-card-accent {
    background: #58d68d;
}

.memory-lab-card.tone-premise .memory-lab-card-accent,
.memory-lab-list-row.tone-premise .memory-lab-card-accent {
    background: #ff9f1c;
}

.memory-lab-card.tone-location .memory-lab-card-accent,
.memory-lab-list-row.tone-location .memory-lab-card-accent {
    background: #4bb3fd;
}

.memory-lab-card.tone-relationship .memory-lab-card-accent,
.memory-lab-list-row.tone-relationship .memory-lab-card-accent {
    background: #ef6f9f;
}

.memory-lab-card.tone-lore .memory-lab-card-accent,
.memory-lab-list-row.tone-lore .memory-lab-card-accent {
    background: #b995ff;
}

.memory-lab-card.tone-quest .memory-lab-card-accent,
.memory-lab-list-row.tone-quest .memory-lab-card-accent {
    background: #ffd166;
}

.memory-lab-card.tone-discovery .memory-lab-card-accent,
.memory-lab-list-row.tone-discovery .memory-lab-card-accent {
    background: #6ee7d8;
}

.memory-lab-card.tone-rules .memory-lab-card-accent,
.memory-lab-list-row.tone-rules .memory-lab-card-accent {
    background: #c4c4cc;
}

.memory-lab-card-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.lore-card-top {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-right: 2.1rem;
}

.lore-card-headline {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    flex: 1 1 auto;
}

.lore-grid-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--text-muted);
}

.lore-grid-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.memory-lab-type-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 0 0.65rem;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid rgba(255, 174, 66, 0.32);
    font-size: 0.72rem;
    font-weight: 800;
}

.lore-origin-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.lore-origin-chip,
.lore-source-chip {
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0 0.55rem;
    font-size: 0.68rem;
    font-weight: 850;
    white-space: nowrap;
}

.lore-origin-chip.original {
    color: #a8d8ff;
    border: 1px solid rgba(75, 179, 253, 0.34);
    background: rgba(75, 179, 253, 0.12);
}

.lore-origin-chip.dynamic {
    color: #6ee7d8;
    border: 1px solid rgba(110, 231, 216, 0.34);
    background: rgba(110, 231, 216, 0.12);
}

.lore-origin-chip.manual {
    color: #d8c4ff;
    border: 1px solid rgba(166, 120, 255, 0.32);
    background: rgba(166, 120, 255, 0.11);
}

.lore-source-chip {
    color: #ffd89a;
    border: 1px solid rgba(255, 174, 66, 0.34);
    background: rgba(255, 174, 66, 0.11);
}

.memory-lab-meta {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 650;
    white-space: nowrap;
}

/* Content-size chip: how much text a card holds, so heavy cards are visible before opening
   (e.g. when picking merge candidates). Tone escalates as the content grows. */
.memory-lab-size {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    border-radius: 999px;
    padding: 0 0.5rem;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 750;
    white-space: nowrap;
}

.memory-lab-size.size-medium {
    border-color: rgba(255, 174, 66, 0.4);
    color: #e8b878;
}

.memory-lab-size.size-large {
    border-color: rgba(255, 122, 92, 0.55);
    color: #ff9a7a;
}

.memory-lab-card-title {
    color: #fff;
    font-size: 1.02rem;
    line-height: 1.25;
    font-weight: 820;
    margin: 0;
    overflow-wrap: anywhere;
}

.memory-lab-card-preview {
    flex: 1 1 auto;
    color: #b9b9c0;
    font-size: 0.86rem;
    line-height: 1.45;
    margin: 0;
    overflow-wrap: anywhere;
}

.memory-lab-importance {
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: #2b2b30;
    overflow: hidden;
}

.memory-lab-importance span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.memory-lab-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 24px;
}

.lore-lab-card-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.lore-lab-status-dot {
    position: absolute;
    top: 0.88rem;
    right: 0.9rem;
    z-index: 2;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.05),
        0 6px 14px rgba(0, 0, 0, 0.34),
        inset 0 1px 2px rgba(255, 255, 255, 0.45);
}

.lore-lab-status-dot.active {
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.08) 28%, transparent 34%),
        linear-gradient(135deg, #93f58f 0%, #28c76f 48%, #0b8f4d 100%);
    border-color: rgba(121, 245, 153, 0.72);
    box-shadow:
        0 0 0 3px rgba(40, 199, 111, 0.16),
        0 0 18px rgba(40, 199, 111, 0.5),
        0 6px 14px rgba(0, 0, 0, 0.34),
        inset 0 1px 2px rgba(255, 255, 255, 0.52);
}

.lore-lab-status-dot.inactive {
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.08) 28%, transparent 34%),
        linear-gradient(135deg, #ff8f8f 0%, #ef4444 48%, #a91625 100%);
    border-color: rgba(255, 124, 124, 0.7);
    box-shadow:
        0 0 0 3px rgba(239, 68, 68, 0.14),
        0 0 18px rgba(239, 68, 68, 0.45),
        0 6px 14px rgba(0, 0, 0, 0.34),
        inset 0 1px 2px rgba(255, 255, 255, 0.52);
}

.lore-dedupe-modal {
    width: min(1120px, 100%);
}

.lore-dedupe-message {
    margin-bottom: 0.85rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(255, 174, 66, 0.26);
    border-radius: 8px;
    background: rgba(255, 174, 66, 0.08);
    color: #f0d3a6;
    font-size: 0.88rem;
}

.lore-dedupe-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.lore-dedupe-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.95rem;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}

.lore-dedupe-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.lore-dedupe-kicker {
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lore-dedupe-card h3 {
    margin: 0.15rem 0 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.lore-dedupe-confidence {
    min-width: 58px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(130, 220, 110, 0.3);
    background: rgba(130, 220, 110, 0.1);
    color: #bcefa0;
    font-size: 0.78rem;
    font-weight: 850;
}

.lore-dedupe-reason {
    margin: 0;
    color: #b9b9c0;
    font-size: 0.86rem;
    line-height: 1.45;
}

.lore-dedupe-candidates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.55rem;
}

.lore-dedupe-candidate {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.65rem;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
}

.lore-dedupe-candidate-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.lore-dedupe-candidate-meta > span:not(.lore-origin-chip):not(.lore-source-chip) {
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 800;
}

.lore-dedupe-candidate-meta b {
    margin-left: auto;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 850;
    white-space: nowrap;
}

.lore-dedupe-candidate-meta b.keep {
    color: #bcefa0;
    border-color: rgba(130, 220, 110, 0.28);
    background: rgba(130, 220, 110, 0.1);
}

.lore-dedupe-candidate-meta b.danger {
    color: #ffb0b0;
    border-color: rgba(229, 72, 77, 0.35);
    background: rgba(229, 72, 77, 0.12);
}

.lore-dedupe-candidate-meta b.warning {
    color: #ffd89a;
    border-color: rgba(255, 174, 66, 0.34);
    background: rgba(255, 174, 66, 0.11);
}

.lore-dedupe-candidate-meta b.info {
    color: #a8d8ff;
    border-color: rgba(75, 179, 253, 0.32);
    background: rgba(75, 179, 253, 0.1);
}

.lore-dedupe-candidate-meta b.neutral {
    color: #c9c9cf;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
}

.lore-dedupe-candidate strong {
    color: #fff;
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.lore-dedupe-candidate small {
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.lore-dedupe-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.lore-dedupe-edit-grid label {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.lore-dedupe-action-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.lore-dedupe-edit-grid label span {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lore-dedupe-action-field > span {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lore-dedupe-action-segments {
    display: inline-flex;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.lore-dedupe-action-segment {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    border: 0;
    border-right: 1px solid var(--border-subtle);
    background: transparent;
    color: #c9c9cf;
    padding: 0 0.85rem;
    font-size: 0.88rem;
    font-weight: 750;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.lore-dedupe-action-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    opacity: 0.86;
}

.lore-dedupe-action-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lore-dedupe-action-segment:last-child {
    border-right: 0;
}

.lore-dedupe-action-segment:hover,
.lore-dedupe-action-segment.active {
    background: var(--accent-soft);
    color: var(--text-primary);
    box-shadow: inset 0 -2px 0 rgba(255, 174, 66, 0.38);
}

.lore-dedupe-action-segment.noop.active {
    background: rgba(255, 255, 255, 0.09);
    color: #d7d7dd;
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.18);
}

.lore-dedupe-action-segment.danger {
    color: #ffb0b0;
}

.lore-dedupe-action-segment.danger:hover,
.lore-dedupe-action-segment.danger.active {
    background: rgba(229, 72, 77, 0.14);
    color: #ffd1d1;
    box-shadow: inset 0 -2px 0 rgba(229, 72, 77, 0.52);
}

.lore-dedupe-wide {
    grid-column: 1 / -1;
}

.lore-dedupe-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lore-dedupe-retry {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px dashed #3a3a42;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.lore-dedupe-retry-head {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.lore-dedupe-retry-head span {
    font-weight: 600;
    font-size: 0.85rem;
}

.lore-dedupe-retry-head small {
    color: var(--text-muted);
}

.lore-dedupe-retry-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lore-dedupe-retry-row label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    width: 6.5rem;
}

.lore-dedupe-retry-btn {
    margin-left: auto;
    white-space: nowrap;
}

.lore-dedupe-retry-msg {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.lore-dedupe-retry-msg.error {
    color: #ffb4b4;
}

.lore-dedupe-retry-toggle {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
}

.lore-dedupe-retry-toggle:hover {
    color: var(--text-primary, #fff);
    text-decoration: underline;
}

.lore-dedupe-retry-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lore-dedupe-retry-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}

.lore-dedupe-retry-close:hover {
    color: #ffb4b4;
}

.lore-dedupe-retry-result {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid #33333b;
    font-size: 0.8rem;
}

.lore-dedupe-retry-result strong {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lore-dedupe-retry-text {
    white-space: pre-wrap;
    max-height: 9rem;
    overflow-y: auto;
}

.lore-dedupe-retry-apply {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lore-dedupe-retry-typewas {
    color: var(--text-muted);
}

.lore-retry-toggle {
    color: var(--text-muted);
}

.lore-retry-toggle:hover {
    color: var(--accent, #f0a020);
}

.lore-retry-result {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #33333b;
}

.lore-retry-result-field strong {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.125rem;
}

.lore-retry-result-text {
    white-space: pre-wrap;
    font-size: 0.82rem;
    max-height: 10rem;
    overflow-y: auto;
}

.lore-retry-extract {
    padding: 0.75rem;
    border: 1px dashed #3a3a42;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.lore-retry-extract-head {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-bottom: 0.5rem;
}

.lore-retry-extract-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lore-retry-extract-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 6.5rem;
}

.lore-retry-extract-btn {
    margin-left: auto;
    white-space: nowrap;
}

.memory-lab-empty {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #39393f;
    border-radius: 8px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.015);
}

.memory-lab-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    background: rgba(0, 0, 0, 0.74);
    overflow-y: auto;
    backdrop-filter: blur(3px);
}

.memory-lab-modal {
    width: min(960px, 100%);
    max-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-card);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* Single-card view/edit dialogs (lore or memory, opened from the Activated Context panel)
   read better narrower than the full lab modal. */
.memory-lab-modal.compact-card-modal {
    width: min(640px, 100%);
}

.memory-lab-modal-header,
.memory-lab-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
}

.memory-lab-modal-header h2 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 850;
    margin: 0;
}

.memory-lab-modal-actions,
.memory-lab-modal-footer {
    flex-wrap: wrap;
}

.memory-lab-modal-body {
    padding: 1rem;
    overflow-y: auto;
}

.memory-lab-modal-body .ai-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.memory-lab-modal-footer {
    justify-content: flex-end;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 0;
}

.knowledge-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.78);
    overflow-y: auto;
    /* No backdrop blur here (unlike other overlays): this one hosts a large scrolling card list,
       and a full-screen blur re-composites the whole story page behind it on every frame. The
       0.78 black wash alone looks near-identical. */
}

.knowledge-modal {
    width: min(1120px, 100%);
    max-height: calc(100dvh - 3rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-card);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58);
}

.knowledge-modal-header {
    position: relative;
    min-height: 104px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    overflow: hidden;
    padding: 1rem;
    background-color: #101012;
    background-position: center;
    background-size: cover;
    border-bottom: 1px solid var(--border-subtle);
}

.knowledge-modal-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.34));
    pointer-events: none;
}

.knowledge-modal-header > * {
    position: relative;
    z-index: 1;
}

.knowledge-modal-header.lore {
    background-image: url("../images/session-settings/lore-database-banner.png");
}

.knowledge-modal-header.memories {
    background-image: url("../images/session-settings/ai-memories-banner.png");
}

.knowledge-modal-header h2 {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 850;
    margin: 0;
}

.knowledge-modal-body {
    min-height: 0;
    padding: 1rem;
    overflow-y: auto;
}

.knowledge-modal-body .memory-lab-modal-overlay {
    z-index: 2110;
}

/* Banner-embedded stats (Turns / Memory Cards / Next auto-summary) */
.knowledge-modal-heading {
    min-width: 0;
}

.knowledge-modal-header-right {
    display: flex;
    align-items: flex-end;
    gap: 0.9rem;
    min-width: 0;
}

.knowledge-modal-stats {
    display: flex;
    align-items: stretch;
    gap: 0.55rem;
    min-width: 0;
}

.knowledge-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(12, 12, 14, 0.42);
    backdrop-filter: blur(3px);
}

.knowledge-stat-value {
    font-size: 1.5rem;
    font-weight: 850;
    line-height: 1;
    color: var(--accent);
}

.knowledge-stat-label {
    margin-top: 0.2rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
}

.knowledge-stat-wide {
    min-width: 0;
    max-width: 300px;
}

.knowledge-stat-note {
    margin-top: 0.22rem;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
}

/* Drop the scroll container's top padding so the sticky header can sit flush against the banner.
   Without this, a sticky top:0 element pins at the padded content edge, leaving a gap the cards
   scroll through (the bleed-through). */
.knowledge-modal-body.knowledge-modal-flush {
    padding-top: 0;
}

/* Groups the search row + category tabs. On standalone pages it is just a flex column; inside a
   knowledge modal it becomes the sticky, opaque header. */
.memory-lab-sticky {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Pin the search row + category tabs flush under the banner; the card list scrolls under an opaque
   header so nothing bleeds through. Negative side margins span the body padding for full-width cover. */
.knowledge-modal-body .memory-lab-sticky {
    position: sticky;
    top: 0;
    z-index: 6;
    margin: 0 -1rem;
    padding: 0.85rem 1rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
}

@media (max-width: 760px) {
    .knowledge-modal-header {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .knowledge-modal-header-right {
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }

    .knowledge-modal-stats {
        flex: 1 1 auto;
        flex-wrap: wrap;
    }

    .knowledge-stat-wide {
        display: none;
    }

    .knowledge-modal-body .memory-lab-sticky {
        margin: 0 -0.85rem;
        padding: 0.7rem 0.85rem;
    }
}

@media (max-width: 760px) {
    .memory-lab-toolbar {
        align-items: stretch;
    }

    .memory-lab-search,
    .memory-lab-actions,
    .memory-lab-actions .btn {
        width: 100%;
    }

    .memory-lab-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .memory-lab-sort,
    .memory-lab-sort .form-select {
        width: 100%;
    }

    .memory-lab-view-toggle {
        width: 100%;
    }

    .memory-lab-view-button {
        flex: 1 1 0;
    }

    .memory-lab-grid {
        grid-template-columns: 1fr;
    }

    .memory-lab-list-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        align-items: stretch;
    }

    .memory-lab-list-side {
        gap: 0.55rem;
    }

    .memory-lab-modal-overlay {
        padding: 0.75rem;
    }

    .memory-lab-modal {
        max-height: calc(100vh - 1.5rem);
    }

    .memory-lab-modal-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .lore-dedupe-card-header,
    .lore-dedupe-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .lore-dedupe-confidence {
        width: max-content;
    }

    .lore-dedupe-edit-grid {
        grid-template-columns: 1fr;
    }

    .lore-dedupe-actions .btn {
        width: 100%;
    }

    .knowledge-modal-overlay {
        padding: 0;
    }

    .knowledge-modal {
        width: 100%;
        max-height: 100dvh;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .knowledge-modal-header {
        min-height: 92px;
    }

    .knowledge-modal-body {
        padding: 0.85rem;
    }

    .lore-delete-confirm {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 1rem;
    }

    .lore-delete-confirm-icon {
        width: 2rem;
        height: 2rem;
    }

    .lore-delete-confirm-actions {
        flex-direction: column-reverse;
    }

    .lore-delete-confirm-actions .btn {
        width: 100%;
    }
}

.fl-dashed-panel,
.fl-empty-state {
    border: 2px dashed #343438;
    background: transparent;
}

.fl-empty-state {
    width: min(385px, 100%);
    min-height: 225px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border-radius: 18px;
    color: var(--text-muted);
    text-align: center;
}

.fl-empty-state a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.fl-empty-state a:hover {
    color: var(--accent);
}

.fl-empty-state span {
    color: #9a9aa1;
    font-size: 0.8rem;
}

.ai-card-button {
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .ai-card-button:hover {
        background: var(--bg-card-hover);
        border-color: var(--accent);
    }

    .ai-card-button.selected {
        border-color: var(--accent);
        background: var(--accent-soft);
    }

.session-card {
    position: relative;
    min-height: 12rem;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.session-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.session-card-header h5 {
    min-width: 0;
    overflow-wrap: anywhere;
}

.session-card-player {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.6rem;
}

.session-card-avatar {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.session-card-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft, rgba(255, 159, 28, 0.22));
    color: var(--accent, #ff9f1c);
    font-weight: 700;
    font-size: 0.85rem;
}

.session-card-player-name {
    min-width: 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-card-footer {
    margin-top: auto;
    padding-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.session-card-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
}

.session-card-stat {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.session-card-updated {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    font-size: 0.79rem;
    color: var(--text-muted);
}

.session-card-relative {
    color: rgba(255, 255, 255, 0.78);
}

/* Cover-image variant — mirrors .fl-scenario-card-cover */
.session-card-cover {
    border-color: rgba(255, 255, 255, 0.14);
    color: #fff;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 14px 32px rgba(0, 0, 0, 0.28);
}

.session-card-cover::before,
.session-card-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.session-card-cover::before {
    z-index: -2;
    background-image: var(--scenario-cover-image);
    background-position: center;
    background-size: cover;
    transform: scale(1);
    transition: transform 0.65s ease;
}

.session-card-cover::after {
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.55) 72%, rgba(0, 0, 0, 0.72) 100%);
}

.session-card-cover:hover {
    border-color: rgba(255, 159, 28, 0.5);
    background-color: transparent;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 14px 32px rgba(0, 0, 0, 0.28);
}

.session-card-cover:hover::before {
    transform: scale(1.045);
}

.session-card-cover h5,
.session-card-cover .session-card-stat,
.session-card-cover .session-card-updated,
.session-card-cover .session-card-relative,
.session-card-cover .session-card-player-name {
    color: #fff !important;
    text-shadow:
        0 1px 1px rgba(0, 0, 0, 1),
        0 2px 4px rgba(0, 0, 0, 0.95),
        0 0 12px rgba(0, 0, 0, 0.92);
}

/* Bottom action row for scenario / session cards: the edit/delete buttons sit on their own
   right-aligned row instead of floating over the title. Inside this row the buttons render
   inline (not absolutely positioned) and a touch smaller than the standalone variant. */
.card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.85rem;
}

.card-actions .session-edit-btn,
.card-actions .session-delete-btn {
    position: static;
    top: auto;
    right: auto;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.card-actions .session-trash-icon,
.card-actions .session-pencil-icon {
    width: 1.02rem;
    height: 1.02rem;
}

.session-delete-btn {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(229, 72, 77, 0.65);
    border-radius: 10px;
    background: rgba(176, 32, 38, 0.82);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.session-delete-btn:hover,
.session-delete-btn:focus-visible {
    background: rgba(214, 40, 46, 0.95);
    border-color: rgba(255, 120, 124, 0.9);
    transform: translateY(-1px);
}

.session-delete-btn:disabled {
    cursor: wait;
    opacity: 0.55;
}

.session-trash-icon {
    width: 1.3rem;
    height: 1.3rem;
    background: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2m3 0v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6h14ZM10 11v6M14 11v6'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2m3 0v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6h14ZM10 11v6M14 11v6'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

/* Edit-setup button on session cards: sits left of the delete button, neutral accent. */
.session-edit-btn {
    position: absolute;
    top: 0.85rem;
    right: 3.75rem;
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 10px;
    background: rgba(38, 42, 52, 0.82);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.session-edit-btn:hover,
.session-edit-btn:focus-visible {
    background: rgba(255, 159, 28, 0.85);
    border-color: rgba(255, 196, 110, 0.9);
    transform: translateY(-1px);
}

.session-pencil-icon {
    width: 1.3rem;
    height: 1.3rem;
    background: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.section-title {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.3px;
}

.text-muted-soft {
    color: var(--text-muted) !important;
}

.confirm-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(4px);
}

.confirm-dialog {
    width: min(420px, calc(100vw - 2rem));
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
}

.confirm-dialog .h5 {
    color: var(--danger);
    font-weight: 700;
}

.lore-delete-confirm-overlay {
    z-index: 2300;
    padding: 1rem;
}

.lore-delete-confirm {
    width: min(460px, 100%);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    border-color: rgba(229, 72, 77, 0.28);
    border-radius: 8px;
    padding: 1.1rem;
}

.lore-delete-confirm-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(229, 72, 77, 0.4);
    border-radius: 999px;
    background: rgba(229, 72, 77, 0.12);
    color: #ffb0b0;
    font-weight: 900;
    line-height: 1;
}

.lore-delete-confirm-copy {
    min-width: 0;
}

.lore-delete-confirm-copy p {
    line-height: 1.45;
}

.lore-delete-confirm-copy strong {
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.lore-delete-confirm-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.65rem;
}

.lore-delete-confirm-meta span {
    min-height: 1.55rem;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 0 0.55rem;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 750;
}

.lore-delete-confirm-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    padding-top: 0.15rem;
}

.lore-delete-confirm-actions .btn {
    min-height: 2.35rem;
    border-radius: 8px;
    font-weight: 750;
}

.session-delete-overlay {
    z-index: 2300;
    padding: 1rem;
}

.session-delete-dialog {
    width: min(520px, 100%);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.95rem;
    border-color: rgba(229, 72, 77, 0.32);
    border-radius: 8px;
    padding: 1.15rem;
}

.session-delete-icon {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(229, 72, 77, 0.42);
    border-radius: 999px;
    background: rgba(229, 72, 77, 0.12);
    color: #ffb0b0;
    font-weight: 900;
    line-height: 1;
}

.session-delete-copy {
    min-width: 0;
}

.session-delete-copy p {
    line-height: 1.45;
}

.session-delete-copy strong {
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.session-delete-reassurance {
    margin-top: 0.75rem;
    border: 1px solid rgba(135, 191, 80, 0.22);
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    background: rgba(135, 191, 80, 0.08);
    color: #badc9c;
    font-size: 0.9rem;
}

.session-delete-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.session-delete-meta span {
    min-height: 1.55rem;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 0 0.55rem;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 750;
}

.session-delete-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    padding-top: 0.2rem;
}

.session-delete-actions .btn {
    min-height: 2.35rem;
    border-radius: 8px;
    font-weight: 750;
}

@media (max-width: 560px) {
    .session-card {
        min-height: 10.5rem;
    }

    .session-delete-dialog {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .session-delete-icon {
        width: 2.15rem;
        height: 2.15rem;
    }

    .session-delete-actions {
        flex-direction: column-reverse;
    }

    .session-delete-actions .btn {
        width: 100%;
    }
}

.character-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(4px);
}

.character-modal,
.character-crop-modal {
    position: relative;
    width: min(480px, calc(100vw - 2rem));
    border: 1px solid #252529;
    border-radius: 18px;
    background: #111112;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.62);
}

.character-modal {
    padding: 1.25rem 1.5rem 1.45rem;
}

.character-setup-modal {
    display: flex;
    flex-direction: column;
    width: min(620px, calc(100vw - 2rem));
    height: min(70vh, calc(100vh - 2rem));
    height: min(70dvh, calc(100dvh - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: hidden;
}

.character-modal-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 32px;
    flex: 0 0 auto;
}

.character-modal-header h2 {
    color: #fff;
    font-size: 1.42rem;
    line-height: 1.12;
    font-weight: 740;
    margin: 0;
    letter-spacing: 0;
}

.character-modal-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.character-help,
.character-modal-close {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.character-help {
    border: 1px solid #4f4f57;
    color: #aaaab2;
}

.character-modal-close {
    border: 0;
    color: #eeeef2;
}

.character-help:hover,
.character-help:focus-visible,
.character-modal-close:hover,
.character-modal-close:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    outline: none;
}

.character-modal-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-top: 1rem;
    padding-right: 0.2rem;
}

.character-avatar-picker {
    position: relative;
    width: 116px;
    height: 116px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    overflow: hidden;
    border-radius: 999px;
    border: 2px solid #4a4a51;
    background: #232327;
    color: var(--accent);
    font-size: 1.35rem;
    font-weight: 850;
    cursor: pointer;
}

.character-avatar-picker::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 34px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
    opacity: 0;
    transition: opacity 0.15s ease;
}

.character-avatar-picker:hover::after,
.character-avatar-picker:focus-within::after {
    opacity: 1;
}

.character-avatar-picker img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.character-avatar-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* Avatar picker + "Generate with AI" toggle, stacked and centered above the name field. */
.character-avatar-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    align-self: center;
}

.character-ai-generate-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.34rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.character-ai-generate-toggle.is-open,
.character-ai-generate-toggle:hover,
.character-ai-generate-toggle:focus-visible {
    background: var(--accent);
    color: #10100f;
    outline: none;
}

.character-ai-avatar-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}

.character-ai-avatar-prompt {
    min-height: 74px;
    resize: vertical;
}

.character-ai-avatar-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.character-name-input {
    min-height: 40px;
}

.character-description-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    gap: 0.28rem;
}

.character-description-input {
    flex: 1 0 auto;
    height:250px;
    font-size: 0.92rem;
    line-height: 1.44;
    resize: vertical;
}

.character-description-counter {
    align-self: flex-end;
    color: #b8b8bf;
    font-size: 0.76rem;
    line-height: 1.2;
}

.character-skill-editor {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.35rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.character-skill-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #f4f4f5;
    font-size: 0.92rem;
    font-weight: 760;
}

.character-skill-budget {
    color: #b8b8bf;
    font-size: 0.82rem;
}

.character-skill-budget.is-over {
    color: #ff8f8f;
}

.character-skill-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.character-skill-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.character-skill-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.character-skill-copy strong {
    color: #f4f4f5;
    font-size: 0.9rem;
    line-height: 1.2;
}

.character-skill-copy span {
    color: #b8b8bf;
    font-size: 0.78rem;
    line-height: 1.35;
}

.character-skill-level {
    min-height: 36px;
    text-align: center;
}

.character-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.9rem;
    flex: 0 0 auto;
    padding-top: 1rem;
}

.character-secondary-btn,
.character-save-btn {
    min-width: 92px;
    min-height: 40px;
    border-radius: 999px;
    border: 0;
    padding: 0 1rem;
    font-weight: 650;
    cursor: pointer;
}

.character-secondary-btn {
    background: transparent;
    color: #fff;
}

.character-save-btn {
    background: #f4f4f5;
    color: #171719;
}

.character-secondary-btn:disabled,
.character-save-btn:disabled {
    cursor: wait;
    opacity: 0.65;
}

@media (max-width: 575.98px) {
    .character-setup-modal {
        width: calc(100vw - 1rem);
        height: min(70vh, calc(100vh - 1rem));
        height: min(70dvh, calc(100dvh - 1rem));
        max-height: calc(100dvh - 1rem);
        padding: 0.95rem;
    }

    .character-modal-header h2 {
        font-size: 1.32rem;
    }

    .character-modal-body {
        padding-top: 0.85rem;
    }

    .character-avatar-picker {
        width: 104px;
        height: 104px;
    }

    .character-description-input {
        min-height: clamp(130px, 25dvh, 240px);
    }

    .character-skill-row {
        grid-template-columns: minmax(0, 1fr) 64px;
        padding: 0.65rem;
    }

    .character-modal-footer {
        gap: 0.55rem;
    }
}

.character-crop-modal {
    padding: 1.1rem;
}

.character-crop-close {
    top: 0.45rem;
    right: 0.55rem;
}

.character-crop-frame {
    position: relative;
    width: min(340px, calc(100vw - 4.5rem));
    aspect-ratio: 1;
    margin: 1rem auto 0.85rem;
    overflow: hidden;
    border-radius: 8px;
    background: #070708;
}

.character-crop-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
}

.character-crop-ring {
    position: absolute;
    inset: 10%;
    border: 2px solid rgba(255, 255, 255, 0.86);
    border-radius: 999px;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.36);
    pointer-events: none;
}

.character-crop-controls {
    display: grid;
    gap: 0.6rem;
}

.character-crop-controls label {
    display: grid;
    grid-template-columns: 84px 1fr;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.character-crop-controls input {
    width: 100%;
}

.min-w-0 {
    min-width: 0;
}

/* Session header — flush square top bar that sticks to the very top */
.session-header {
    position: sticky;
    top: 0;
    z-index: 5;
    border-radius: 0;
}

.session-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.session-header-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.session-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.session-header-cover {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.session-header-cover-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
    font-size: 1.4rem;
}

.session-header-title {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text-primary);
}

/* Circular icon buttons (header actions) */
.header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .header-icon-btn:hover {
        background: var(--bg-card-hover);
        border-color: var(--accent);
        color: var(--accent);
    }

    .header-icon-btn.active {
        border-color: var(--accent);
        color: var(--accent);
        background: var(--accent-soft);
    }

/* Read-only memory-compression countdown pill in the session header */
.header-memory-countdown {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 40px;
    padding: 0 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: default;
    user-select: none;
    font-variant-numeric: tabular-nums;
}

    .header-memory-countdown-value {
        font-weight: 600;
        font-size: 0.9rem;
        line-height: 1;
    }

    .header-memory-countdown.is-imminent {
        border-color: var(--accent);
        color: var(--accent);
        background: var(--accent-soft);
    }

@media (max-width: 640px) {
    .session-header-row {
        align-items: flex-start;
    }

    .session-header-cover {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

    .header-icon-btn {
        width: 36px;
        height: 36px;
    }

    .header-memory-countdown {
        height: 36px;
        padding: 0 0.6rem;
    }
}

@media (max-width: 520px) {
    .session-header-row {
        flex-wrap: wrap;
    }

    .session-header-identity {
        flex: 1 1 min(100%, 15rem);
    }

    .session-header-actions {
        width: 100%;
        justify-content: flex-start;
        padding-left: 3.5rem;
    }
}

/* World state readable list */
.world-state-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.world-state-row {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.world-state-label {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.85rem;
    min-width: 110px;
    flex-shrink: 0;
}

.world-state-value {
    color: var(--text-primary);
    font-size: 0.9rem;
    margin: 0;
    word-break: break-word;
}

.world-state-skills {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.world-state-skills .world-state-row {
    justify-content: space-between;
}

.world-state-skills .world-state-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Rank label sits left of the pill; the pill always lands on the right edge so numbers align. */
.skill-rank {
    font-size: 0.82rem;
    text-align: right;
}

.world-state-skills .skill-level-pill {
    flex-shrink: 0;
}

.skill-level-pill {
    display: inline-block;
    min-width: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 0.6rem;
    background: var(--accent);
    color: #1a1a1a;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}

.world-state-legend {
    margin-top: 1rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.world-state-legend-title {
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 0.45rem;
}

.world-state-legend-scale {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
}

.world-state-legend-scale span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.4rem;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.3;
}

.world-state-legend-scale b {
    color: var(--accent);
    font-weight: 700;
}

.world-state-objectives {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.objective-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.objective-item {
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-subtle);
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.02);
}

.objective-item.is-paused { opacity: 0.7; }
.objective-item.is-resolved { opacity: 0.6; }

.objective-main {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.objective-status-pill {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.05rem 0.35rem;
    border-radius: 0.5rem;
    background: rgba(255, 174, 66, 0.15);
    color: var(--accent);
    flex-shrink: 0;
}

.objective-title { font-size: 0.85rem; font-weight: 600; }
.objective-desc { margin-top: 0.15rem; }

.objective-actions {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.35rem;
    flex-wrap: wrap;
}

.objective-btn {
    font-size: 0.72rem;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--border-subtle);
    border-radius: 0.35rem;
    background: transparent;
    color: var(--text-muted-soft, #9aa);
    cursor: pointer;
}

.objective-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.objective-btn:disabled { opacity: 0.5; cursor: default; }
.objective-btn-danger:hover:not(:disabled) { color: #e06c6c; border-color: #e06c6c; }

.objective-add {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}

.objective-history summary {
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--text-muted-soft, #9aa);
}

.world-state-secret {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.world-state-secret-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.world-state-secret-chevron {
    color: var(--accent);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
}

.world-state-secret-body {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.world-state-updated {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.78rem;
}

/* Session layout shell: main column plus a right-side slide-out settings drawer */
.session-shell {
    display: flex;
    align-items: flex-start;
    gap: 0;
    /* Pull the shell under the article's top padding so the header sits flush at the top (no gap). */
    margin-top: -1.5rem;
}

.session-shell.is-initial-positioning {
    visibility: hidden;
}

.session-load-screen {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: var(--bg-base);
}

/* Dynamic per-location backdrop: fixed full-viewport image behind the session content.
   The image itself is set from JS (aiStoryBackdrop) as an inline background-image.
   z-index 0 (positioned) paints above the opaque .page/main backgrounds; the session column
   is lifted to z-index 1 below, and the sidebar (20) / drawer (1050) already stack higher. */
.session-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}

/* Keep the story column above the backdrop layer. */
.session-main {
    position: relative;
    z-index: 1;
}

/* "Generating…" chip shown next to the Dynamic Backgrounds label while a backdrop is being made. */
/* Settings toggle row: label/description on the left, on–off switch on the right. */
.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    cursor: pointer;
    margin: 0;
}

/* Polished on/off switch (replaces the default checkbox). */
.settings-switch {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    position: relative;
    width: 42px;
    height: 24px;
    margin: 0;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.settings-switch::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f4f4f5;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    transform: translateY(-50%);
    transition: transform 0.2s ease;
}

.settings-switch:checked {
    background: var(--accent);
    border-color: var(--accent);
}

.settings-switch:checked::after {
    transform: translate(18px, -50%);
}

.settings-switch:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 2px;
}

.settings-switch:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.settings-generating-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--accent);
    background: rgba(243, 178, 80, 0.14);
    border: 1px solid rgba(243, 178, 80, 0.35);
}

.settings-generating-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--accent);
    animation: settings-generating-pulse 1s ease-in-out infinite;
}

@keyframes settings-generating-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

/* Page-level indicator while a backdrop generates (visible during play with the drawer closed). */
.backdrop-generating-toast {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--text-main);
    background: rgba(22, 22, 23, 0.9);
    border: 1px solid rgba(243, 178, 80, 0.35);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.backdrop-generating-toast .spinner-border {
    width: 0.9rem;
    height: 0.9rem;
    border-width: 0.15em;
    color: var(--accent);
}

.session-backdrop.session-backdrop-visible {
    opacity: 1;
}

/* Dark scrim so story text and controls stay readable over any image. */
.session-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(10, 10, 12, 0.35), rgba(10, 10, 12, 0.6));
}

html.aistory-initial-scroll-lock,
body.aistory-initial-scroll-lock {
    scroll-behavior: auto !important;
    overflow: hidden;
}

.session-main {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 840px;
    /* Center the reading column, leaving even space on both sides (FictionLab-style). */
    margin-inline: auto;
}

.session-main-reader {
    max-width: min(1180px, calc(100vw - 2rem));
}

.session-main .session-header.ai-panel {
    background: rgba(17, 17, 18, 0.62);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: blur(10px);
}

.session-chat-panel {
    min-height: 50vh;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.session-drawer {
    flex: 0 0 auto;
    width: min(320px, calc(100vw - 2rem));
    overflow: hidden;
    position: fixed;
    top: 0.5rem;
    /* Slide via `right` rather than `transform`: a transformed ancestor becomes the containing
       block for position:fixed descendants, which would trap full-screen modals (e.g. the character
       setup dialog) inside this 320px drawer instead of letting them cover the viewport. */
    right: -22rem;
    bottom: 0.5rem;
    border-radius: 14px;
    background: var(--bg-panel);
    border: 1px solid transparent;
    opacity: 0;
    pointer-events: none;
    transition: right 0.22s ease, opacity 0.16s ease, border-color 0.22s ease;
    z-index: 1050;
}

.session-shell.drawer-open .session-drawer {
    border-color: var(--border-subtle);
    overflow-y: auto;
    opacity: 1;
    pointer-events: auto;
    right: 1rem;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.45);
}

.settings-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    background: var(--bg-panel);
    z-index: 1;
}

.settings-drawer-body {
    padding: 0.75rem 1rem 1.25rem;
}

.settings-section {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

    .settings-section:last-child {
        border-bottom: none;
    }

.settings-memory-system {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.55rem;
}

.settings-memory-card {
    position: relative;
    min-height: 58px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(255, 174, 66, 0.18);
    border-radius: 8px;
    padding: 0 0.85rem;
    color: var(--accent);
    background-color: #121214;
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.38);
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.settings-memory-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.22));
    pointer-events: none;
}

.settings-memory-card > span {
    position: relative;
    z-index: 1;
}

.settings-memory-card:hover,
.settings-memory-card:focus-visible {
    border-color: rgba(255, 174, 66, 0.62);
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.18), 0 10px 24px rgba(0, 0, 0, 0.22);
    outline: none;
    transform: translateY(-1px);
}

.settings-memory-card-lore {
    background-image: url("../images/session-settings/lore-database-banner.png");
}

.settings-memory-card-memories {
    background-image: url("../images/session-settings/ai-memories-banner.png");
}

.settings-memory-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.38);
    color: #fff;
    font-size: 1.45rem;
    line-height: 1;
}

.settings-label {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Label paired with an inline help "?" icon; anchors the help bubble across its full width */
.settings-label-row {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

    .settings-label-row .settings-label {
        margin-bottom: 0;
    }

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

.settings-edit-btn {
    border-radius: 8px;
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.settings-character-summary {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.settings-character-avatar {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid #3a3a3f;
    background: #222226;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 800;
}

.settings-character-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-character-name {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 750;
}

.settings-counter {
    text-align: right;
    margin-top: 0.25rem;
}

.settings-collapse-section {
    padding-block: 0.85rem;
}

.settings-collapse-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 174, 66, 0.09), rgba(255, 255, 255, 0.035));
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.settings-collapse-toggle:hover,
.settings-collapse-toggle:focus-visible {
    border-color: rgba(255, 174, 66, 0.45);
    background: linear-gradient(135deg, rgba(255, 174, 66, 0.14), rgba(255, 255, 255, 0.05));
    outline: none;
}

.settings-collapse-title {
    display: block;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.settings-collapse-summary {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.settings-collapse-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 174, 66, 0.3);
    background: rgba(255, 174, 66, 0.09);
    color: var(--accent);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    flex: 0 0 auto;
}

.settings-collapse-body {
    margin-top: 0.75rem;
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
}

.settings-subsection {
    padding: 0 0 0.85rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid var(--border-subtle);
}

.settings-subsection:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

/* Segmented control (response length) */
.segmented {
    display: flex;
    gap: 0.25rem;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 0.25rem;
}

.segmented-item {
    flex: 1 1 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.4rem 0.3rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .segmented-item:hover {
        color: var(--text-primary);
    }

    .segmented-item.active {
        background: var(--accent);
        color: #1a1205;
    }

/* Inline "?" help affordance: hover on desktop, tap to toggle on mobile.
   The bubble is anchored to the surrounding .settings-label-row (full width) rather than
   the tiny icon, so it opens as a tidy panel below the label instead of shooting off-edge. */
.help-tip {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 0.35rem;
}

.help-tip-btn {
    width: 16px;
    height: 16px;
    padding: 0;
    line-height: 1;
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .help-tip-btn:hover,
    .help-tip.is-open .help-tip-btn {
        background: var(--accent);
        color: #1a1205;
        border-color: var(--accent);
    }

.help-tip-bubble {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}

    .help-tip:hover .help-tip-bubble,
    .help-tip:focus-within .help-tip-bubble,
    .help-tip.is-open .help-tip-bubble {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

/* On narrow screens the drawer overlays the content instead of shrinking it */
@media (max-width: 900px) {
    .session-drawer {
        top: 0;
        right: -22rem;
        bottom: 0;
        width: min(320px, 90vw);
        border-radius: 0;
    }

    .session-shell.drawer-open .session-drawer {
        right: 0;
        width: min(320px, 90vw);
    }
}

/* Form controls */
.form-control, .form-select {
    background-color: #121216;
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

    .form-control:focus, .form-select:focus {
        background-color: #121216;
        color: var(--text-primary);
        border-color: var(--accent);
    }

    .form-control::placeholder {
        color: #6c6c75;
    }

/* Tag chips */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid rgba(255, 174, 66, 0.35);
}

.chip-neutral {
    background: #25252b;
    color: var(--text-muted);
    border-color: var(--border-subtle);
}

/* Hub gradient cards */
.hub-card {
    min-height: 220px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
    box-shadow: inset 0 -90px 120px rgba(0, 0, 0, 0.34);
}

    .hub-card:hover {
        transform: translateY(-3px);
        border-color: var(--accent);
        color: #fff;
    }

.hub-card-1 {
    background-image:
        linear-gradient(90deg, rgba(28, 15, 7, 0.92) 0%, rgba(44, 23, 9, 0.58) 48%, rgba(44, 23, 9, 0.12) 100%),
        url("../images/home/create.png");
}

.hub-card-2 {
    background-image:
        linear-gradient(90deg, rgba(6, 16, 32, 0.92) 0%, rgba(8, 31, 58, 0.58) 48%, rgba(8, 31, 58, 0.12) 100%),
        url("../images/home/scenarios.png");
}

.hub-card-3 {
    background-image:
        linear-gradient(90deg, rgba(27, 8, 35, 0.92) 0%, rgba(55, 12, 66, 0.58) 48%, rgba(55, 12, 66, 0.12) 100%),
        url("../images/home/story-sessions.png");
}

.fl-scenario-card {
    position: relative;
    /* Fill the (equal-height) grid column so every card in a row matches the tallest. */
    height: 100%;
    min-height: 230px;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Accent genre subtitle, clamped to one line so long "genre" strings don't blow up the card. */
.fl-scenario-card-genre {
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Clamp the blurb to two lines and end with an ellipsis rather than a hard cut. */
.fl-scenario-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fl-scenario-card-updated {
    margin-top: 0.55rem;
    font-size: 0.74rem;
    color: var(--text-muted);
}

/* Bottom metadata row: chip cluster on the left, delete action pinned bottom-right. */
.fl-scenario-card-meta {
    margin-top: auto;
    padding-top: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.fl-scenario-card-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.fl-scenario-card-meta .session-delete-btn {
    position: static;
    top: auto;
    right: auto;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.fl-scenario-card-meta .session-trash-icon {
    width: 1.02rem;
    height: 1.02rem;
}

.chip-mature {
    background: rgba(176, 32, 38, 0.22);
    color: #ff9a9e;
    border-color: rgba(229, 72, 77, 0.5);
}

/* Keep metadata legible over cover art. */
.fl-scenario-card-cover .fl-scenario-card-genre {
    color: #ffcf8f;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92);
}

.fl-scenario-card-cover .fl-scenario-card-updated {
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92);
}

.fl-scenario-card-cover .chip-neutral {
    background: rgba(0, 0, 0, 0.42);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(4px);
}

.fl-scenario-card:hover {
    border-color: rgba(255, 159, 28, 0.42);
    background-color: var(--bg-card);
}

.fl-scenario-card h5,
.hub-card h4 {
    color: #fff;
    font-weight: 800;
}

.fl-scenario-card-cover {
    border-color: rgba(255, 255, 255, 0.14);
    color: #fff;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 14px 32px rgba(0, 0, 0, 0.28);
}

.fl-scenario-card-cover::before,
.fl-scenario-card-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.fl-scenario-card-cover::before {
    z-index: -2;
    background-image: var(--scenario-cover-image);
    background-position: center;
    background-size: cover;
    transform: scale(1);
    transition: transform 0.65s ease;
}

.fl-scenario-card-cover::after {
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.22) 100%);
}

.fl-scenario-card-cover:hover {
    border-color: rgba(255, 159, 28, 0.5);
    background-color: transparent;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 14px 32px rgba(0, 0, 0, 0.28);
}

.fl-scenario-card-cover:hover::before {
    transform: scale(1.045);
}

.fl-scenario-card-cover h5,
.fl-scenario-card-cover p,
.fl-scenario-card-cover .text-muted-soft {
    color: #fff !important;
    text-shadow:
        0 1px 1px rgba(0, 0, 0, 1),
        0 2px 4px rgba(0, 0, 0, 0.95),
        0 0 12px rgba(0, 0, 0, 0.92);
}

.fl-scenario-card-cover .chip {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.34);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(4px);
}

@media (max-width: 900px) {
    .fl-page-toolbar {
        flex-direction: column;
    }

    .fl-toolbar-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .fl-search-shell {
        width: 100%;
    }
}

/* Chat bubbles */
/* Performance guard: long story sessions can contain hundreds of turn nodes.
   These classes keep resize/layout work scoped to visible turns; do not remove
   without testing browser resize and Session Settings open/close on a large session. */
.story-turn-list {
    overflow-anchor: none;
}

.story-turn-item {
    content-visibility: auto;
    contain-intrinsic-size: auto 28rem;
    overflow: visible;
}

.story-turn-item:hover,
.story-turn-item:focus-within {
    content-visibility: visible;
    contain: none;
}

.turn-speaker {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.turn-speaker-player {
    align-self: flex-end;
    justify-content: flex-end;
    max-width: min(46ch, 48%);
    margin-left: auto;
}

.turn-speaker-ai {
    max-width: 100%;
    justify-content: flex-start;
}

.turn-speaker-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.turn-speaker-avatar,
.turn-scenario-avatar {
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.turn-speaker-avatar-sm {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.62rem;
}

.turn-speaker-avatar-fallback,
.turn-scenario-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.turn-ai-message {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    align-items: start;
    gap: 0.65rem;
    width: min(calc(68ch + 4.05rem), 82%);
    margin-right: auto;
}

.turn-ai-stack {
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
    min-width: 0;
}

.turn-scenario-avatar {
    width: 3.4rem;
    height: 3.4rem;
    font-size: 1rem;
}

.bubble-user {
    background: rgba(56, 44, 31, 0.82);
    border: 0;
    border-radius: 10px 10px 2px 10px;
    padding: 0.62rem 0.8rem;
    margin-left: auto;
    max-width: min(46ch, 48%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

@media (min-width: 901px) {
    .session-shell.drawer-open .turn-speaker-player,
    .session-shell.drawer-open .bubble-user {
        /* Keep player bubbles closer to the reading center when the fixed settings drawer overlaps the chat column. */
        margin-right: max(0rem, calc(48.25rem - 50vw));
    }
}

.bubble-ai {
    background: rgba(27, 27, 29, 0.82);
    border: 0;
    border-radius: 10px 10px 10px 2px;
    padding: 0.68rem 0.85rem;
    margin-right: auto;
    max-width: min(68ch, 72%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(3px);
}

.turn-ai-message .bubble-ai {
    width: 100%;
    max-width: none;
    margin-right: 0;
}

/* Ephemeral out-of-character side-chat (/ooc:). Muted, dashed, and narrower than story bubbles so
   the exchange reads as a meta note rather than part of the narration. */
.ooc-exchange {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.15rem 0;
}

.bubble-ooc {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border: 1px dashed rgba(170, 170, 185, 0.55);
    border-radius: 8px;
    background: rgba(32, 32, 38, 0.92);
    color: #d6d6dd;
    font-size: 0.94em;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(3px);
}

.bubble-ooc-user {
    margin-left: auto;
    max-width: min(46ch, 60%);
    border-radius: 8px 8px 2px 8px;
}

.bubble-ooc-ai {
    margin-right: auto;
    max-width: min(68ch, 80%);
    border-radius: 8px 8px 8px 2px;
}

.ooc-tag {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent, #f3b250);
    opacity: 0.85;
}

.ooc-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.turn-response-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: -0.05rem 0 0.7rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-main);
    white-space: normal;
}

.turn-response-kicker {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
}

/* Thumbnails of the characters the director detected in this turn's scene (own row under the header). */
.turn-scene-characters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: -0.35rem 0 0.7rem;
}

/* Square with rounded corners (overrides the circular .turn-speaker-avatar); size set inline from settings. */
.turn-scene-character-avatar {
    width: 100px;
    height: 100px;
    font-size: 2rem;
    border-radius: 15px;
}

/* Thumbnail wrapped in a button when the character has a backing lore card: click opens the card. */
.turn-scene-character-btn {
    display: inline-flex;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 15px;
}

.turn-scene-character-btn .turn-scene-character-avatar {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.turn-scene-character-btn:hover .turn-scene-character-avatar,
.turn-scene-character-btn:focus-visible .turn-scene-character-avatar {
    box-shadow: 0 0 0 2px var(--accent);
    transform: translateY(-1px);
}

.turn-scene-character-btn:focus-visible {
    outline: none;
}

.turn-response-time {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    .turn-response-time span {
        display: inline-flex;
        align-items: center;
        min-height: 1.35rem;
        padding: 0.1rem 0.45rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.055);
        border: 0;
    }

.turn-response-body {
    white-space: pre-wrap;
}

.dialogue-text {
    font-weight: 650;
}

.story-turn-list-reader {
    gap: 1.55rem !important;
}

.story-turn-list-reader .story-turn-item {
    gap: 0.75rem !important;
    padding-bottom: 1.45rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.story-turn-list-reader .story-turn-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.story-turn-list-reader .turn-speaker-player {
    display: none;
}

.story-turn-list-reader .bubble-user {
    align-self: stretch;
    max-width: none;
    margin: 0 0 0.2rem;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    box-shadow: none;
    color: var(--accent) !important;
    font-style: italic;
    line-height: 1.35;
}

.story-turn-list-reader .turn-content-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 1.1rem;
    width: 100%;
}

.story-turn-list-reader .turn-content-main {
    min-width: 0;
    width: 100%;
    max-width: none;
    flex: none;
    gap: 0.55rem;
}

.story-turn-list-reader .turn-ai-message {
    display: block;
    width: 100%;
}

.story-turn-list-reader .turn-scenario-avatar,
.story-turn-list-reader .turn-speaker-ai {
    display: none;
}

.story-turn-list-reader .turn-ai-stack {
    display: block;
}

.story-turn-list-reader .bubble-ai {
    width: 100%;
    max-width: none;
    padding: 0.6rem 0.7rem;
    border-radius: 6px;
    box-shadow: none;
    backdrop-filter: blur(3px);
}

.story-turn-list-reader .turn-response-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0 0 0.9rem;
}

.story-turn-list-reader .turn-response-kicker {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.story-turn-list-reader .turn-response-time {
    flex-wrap: wrap;
    gap: 0.35rem;
    color: var(--text-main);
    white-space: normal;
}

.story-turn-list-reader .turn-response-time span {
    min-height: 0;
    padding: 0;
    background: transparent;
}

.story-turn-list-reader .turn-response-body {
    line-height: 1.5;
}

.story-turn-list-reader .turn-action-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    max-width: none;
    margin-left: 0;
    width: 100%;
}

.story-turn-list-reader .turn-content-main .turn-action-row {
    max-width: none;
}

.story-turn-list-reader .turn-reroll-error,
.story-turn-list-reader .turn-image-generation-status {
    max-width: none;
    margin-left: 0;
}

.turn-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.45rem;
    margin-top: -0.15rem;
    margin-left: 4.05rem;
    width: 100%;
    max-width: min(68ch, calc(82% - 4.05rem));
}

.story-turn-progress-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: min(68ch, calc(82% - 4.05rem));
    margin-top: 1rem;
    margin-left: 4.05rem;
}

.story-turn-progress-row .spinner-border {
    flex: 0 0 auto;
}

.story-turn-progress-row .text-muted-soft {
    min-width: 0;
}

.turn-action-slot {
    display: flex;
    align-items: center;
    min-width: 0;
}

.turn-action-slot-left {
    justify-content: flex-start;
}

.turn-action-slot-center {
    justify-content: center;
    gap: 0.35rem;
}

.turn-action-slot-right {
    justify-content: flex-end;
}

.turn-reroll-error {
    width: 100%;
    max-width: min(68ch, calc(82% - 4.05rem));
    margin-left: 4.05rem;
    margin-top: -0.25rem;
    color: var(--danger);
    font-size: 0.78rem;
    line-height: 1.35;
}

.turn-image-generation-status {
    width: 100%;
    max-width: min(68ch, calc(82% - 4.05rem));
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: -0.2rem 0 0 4.05rem;
    font-size: 0.78rem;
    line-height: 1.35;
}

.turn-image-generation-status .spinner-border {
    flex: 0 0 auto;
}

.story-input-row {
    position: relative;
    display: grid;
    grid-template-columns: 4.05rem minmax(0, 1fr);
    align-items: end;
    width: min(calc(68ch + 4.05rem), 82%);
    max-width: 100%;
    margin-right: auto;
}

.story-input-textarea {
    grid-column: 2;
    min-width: 0;
}

.story-input-row .btn {
    position: absolute;
    left: calc(100% + 0.5rem);
    bottom: 0;
}

.story-input-disclaimer {
    width: min(68ch, calc(82% - 4.05rem));
    max-width: calc(100% - 4.05rem);
    margin: 0.25rem 0 0.5rem 4.05rem;
}

/* Chat metadata popovers */
.chat-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-top: -0.15rem;
}

.meta-popover-wrap {
    position: relative;
    display: inline-flex;
}

.meta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 1.75rem;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.055);
    color: var(--text-main);
    font-size: 0.74rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.meta-badge:hover,
.meta-badge:focus-visible {
    transform: translateY(-1px);
    outline: none;
}

.meta-badge-image {
    border-color: rgba(255, 174, 66, 0.32);
    background: rgba(255, 174, 66, 0.11);
    color: var(--accent);
}

.meta-popover {
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.55rem);
    z-index: 30;
    width: min(340px, calc(100vw - 2rem));
    max-width: 78vw;
    padding: 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(20, 20, 20, 0.98);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
    color: var(--text-main);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.meta-popover::after {
    content: "";
    position: absolute;
    left: 1.1rem;
    bottom: -0.45rem;
    width: 0.8rem;
    height: 0.8rem;
    background: rgba(20, 20, 20, 0.98);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    transform: rotate(45deg);
}

.meta-popover-wrap:hover .meta-popover,
.meta-popover-wrap:focus-within .meta-popover {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.meta-popover-title {
    margin-bottom: 0.5rem;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.meta-detail-row {
    display: grid;
    grid-template-columns: minmax(5.5rem, 0.45fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.45rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
}

.meta-detail-row span {
    color: var(--text-muted);
}

.meta-detail-row strong {
    color: var(--text-main);
    font-weight: 750;
    line-height: 1.35;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.meta-detail-row.turn-debug-warn strong {
    color: var(--danger);
}

@media (max-width: 640px) {
    .turn-ai-message {
        grid-template-columns: 2.65rem minmax(0, 1fr);
        gap: 0.5rem;
        width: 100%;
    }

    .turn-scenario-avatar {
        width: 2.65rem;
        height: 2.65rem;
        font-size: 0.82rem;
    }

    .turn-speaker-player,
    .bubble-user {
        max-width: 92%;
    }

    .turn-action-row {
        width: calc(100% - 3.15rem);
        max-width: none;
        margin-left: 3.15rem;
        /* Keep the desktop 3-column layout (info | actions | generate) on one row.
           Labels are hidden on small screens so the icon-only buttons still fit. */
        gap: 0.3rem;
    }

    .story-turn-progress-row {
        width: calc(100% - 3.15rem);
        max-width: none;
        margin-left: 3.15rem;
    }

    .turn-reroll-error {
        width: calc(100% - 3.15rem);
        max-width: none;
        margin-left: 3.15rem;
    }

    .story-input-row {
        grid-template-columns: 3.15rem minmax(0, 1fr);
        width: 100%;
        max-width: none;
    }

    .story-input-row .btn {
        position: static;
        grid-column: 2;
        justify-self: end;
        margin-top: 0.45rem;
    }

    .story-input-disclaimer {
        width: calc(100% - 3.15rem);
        max-width: none;
        margin-left: 3.15rem;
    }

    .turn-action-slot {
        width: 100%;
    }

    .turn-action-slot-left {
        justify-content: flex-start;
    }

    .turn-action-slot-center {
        justify-content: center;
        flex-wrap: wrap;
    }

    .turn-action-slot-right {
        justify-content: flex-end;
    }

    .turn-reroll-error {
        max-width: 92%;
    }

    .turn-image-generation-status {
        max-width: 92%;
    }

    .turn-response-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.4rem;
    }

    .turn-response-time {
        flex-wrap: wrap;
    }

    .meta-popover {
        left: 50%;
        max-width: calc(100vw - 1.5rem);
        transform: translate(-50%, 6px);
    }

    .meta-popover-wrap:hover .meta-popover,
    .meta-popover-wrap:focus-within .meta-popover {
        transform: translate(-50%, 0);
    }

    .meta-popover::after {
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
    }
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── Color & appearance settings ────────────────────────────────── */

/* One shared grid so every color row's label and swatch line up in fixed columns. */
.chat-settings-box {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    column-gap: 0.85rem;
    row-gap: 0.75rem;
}

/* Each row's children join the parent grid directly, so the label column is a single shared width. */
.setting-box {
    display: contents;
}

.setting-box .scenario-box-title {
    margin: 0;
    font-size: 0.76rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.color-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.color-input-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.color-input-label input[type="color"] {
    width: 32px;
    height: 32px;
    border: 2px solid var(--border-subtle);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.15s ease;
}

.color-input-label input[type="color"]:hover {
    border-color: var(--accent);
}

.color-input-label input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-input-label input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}

.color-hex-text {
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    min-width: 4.2rem;
}

.reset-colors-btn {
    grid-column: 1 / -1;
    text-align: center;
    cursor: pointer;
    padding: 0.35rem 0;
    margin-top: 0.15rem;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.reset-colors-btn:hover {
    background: var(--accent-soft);
}

.reset-colors-btn p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--accent);
    font-weight: 600;
}

/* ── Font slider box ────────────────────────────────── */

.font-slider-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.3rem;
}

.number-input {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 0.25rem 0.25rem 0.25rem 0.6rem;
    width: 90px;
    flex-shrink: 0;
}

.number-input .input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    outline: none;
    text-align: left;
}

.number-input .right-section {
    display: flex;
    align-items: center;
}

.number-input .controls {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.number-input .control {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    border-radius: 3px;
    transition: color 0.12s ease, background 0.12s ease;
}

.number-input .control:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

/* ── Range slider ────────────────────────────────── */

.range-slider {
    position: relative;
    height: 6px;
    background: var(--bg-card);
    border-radius: 3px;
    flex: 1 1 auto;
    cursor: pointer;
    border: 1px solid var(--border-subtle);
}

.range-slider__range {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    pointer-events: none;
}

.range-slider__thumb {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: box-shadow 0.12s ease;
    z-index: 2;
}

.range-slider__thumb:hover {
    box-shadow: 0 0 0 6px var(--accent-soft);
}

.range-slider__thumb[aria-disabled="true"] {
    background: var(--border-subtle);
    cursor: default;
    pointer-events: none;
}

.range-slider__thumb[aria-disabled="true"]:hover {
    box-shadow: none;
}

/* ── Native range sliders (settings drawer): real drag + step snapping ── */

.settings-range {
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 auto;
    width: 100%;
    height: 16px;
    background: transparent;
    cursor: pointer;
    margin: 0;
}

.settings-range:focus {
    outline: none;
}

/* Track — WebKit reads the inline --track gradient so the fill follows the value. */
.settings-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--track, var(--bg-card));
}

.settings-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    box-shadow: 0 0 0 0 var(--accent-soft);
    transition: box-shadow 0.12s ease;
}

.settings-range:hover::-webkit-slider-thumb,
.settings-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 6px var(--accent-soft);
}

/* Firefox draws its own progress fill, so the inline gradient is not needed there. */
.settings-range::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
}

.settings-range::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
}

.settings-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
}

/* ── Scene Image Dialog ────────────────────────────────── */

.scene-image-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
}

.scene-image-dialog {
    width: min(920px, 100%);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.scene-image-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.scene-image-dialog-title-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    min-width: 0;
}

.scene-regenerate-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(255, 159, 28, 0.45);
    border-radius: 7px;
    background: rgba(255, 159, 28, 0.08);
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.1;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.scene-regenerate-button:hover:not(:disabled),
.scene-regenerate-button:focus-visible:not(:disabled) {
    background: rgba(255, 159, 28, 0.16);
    border-color: rgba(255, 159, 28, 0.7);
    transform: translateY(-1px);
}

.scene-regenerate-button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.scene-image-dialog-body {
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 0.75rem;
    flex: 1 1 auto;
    padding-right: 0.35rem;
}

.scene-image-dialog-footer {
    position: sticky;
    bottom: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border-subtle);
    padding-top: 0.75rem;
    padding-bottom: 0.25rem;
    z-index: 2;
}

/* ── Character Cards in Dialog ────────────────────────── */

.character-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
}

.scene-image-dialog-body::-webkit-scrollbar,
.character-card-list::-webkit-scrollbar,
.scene-image-overlay::-webkit-scrollbar,
.knowledge-modal-overlay::-webkit-scrollbar,
.knowledge-modal-body::-webkit-scrollbar,
.memory-lab-modal-overlay::-webkit-scrollbar,
.memory-lab-modal-body::-webkit-scrollbar,
.settings-drawer-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.scene-image-dialog-body::-webkit-scrollbar-track,
.character-card-list::-webkit-scrollbar-track,
.scene-image-overlay::-webkit-scrollbar-track,
.knowledge-modal-overlay::-webkit-scrollbar-track,
.knowledge-modal-body::-webkit-scrollbar-track,
.memory-lab-modal-overlay::-webkit-scrollbar-track,
.memory-lab-modal-body::-webkit-scrollbar-track,
.settings-drawer-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.035);
    border-radius: 999px;
}

.scene-image-dialog-body::-webkit-scrollbar-thumb,
.character-card-list::-webkit-scrollbar-thumb,
.scene-image-overlay::-webkit-scrollbar-thumb,
.knowledge-modal-overlay::-webkit-scrollbar-thumb,
.knowledge-modal-body::-webkit-scrollbar-thumb,
.memory-lab-modal-overlay::-webkit-scrollbar-thumb,
.memory-lab-modal-body::-webkit-scrollbar-thumb,
.settings-drawer-body::-webkit-scrollbar-thumb {
    border: 2px solid rgba(17, 17, 18, 0.92);
    background: linear-gradient(180deg, rgba(255, 159, 28, 0.72), rgba(130, 130, 138, 0.58));
    border-radius: 999px;
}

.scene-image-dialog-body::-webkit-scrollbar-thumb:hover,
.character-card-list::-webkit-scrollbar-thumb:hover,
.scene-image-overlay::-webkit-scrollbar-thumb:hover,
.knowledge-modal-overlay::-webkit-scrollbar-thumb:hover,
.knowledge-modal-body::-webkit-scrollbar-thumb:hover,
.memory-lab-modal-overlay::-webkit-scrollbar-thumb:hover,
.memory-lab-modal-body::-webkit-scrollbar-thumb:hover,
.settings-drawer-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--accent), rgba(255, 122, 24, 0.82));
}

.scene-image-dialog-body,
.character-card-list,
.scene-image-overlay,
.knowledge-modal-overlay,
.knowledge-modal-body,
.memory-lab-modal-overlay,
.memory-lab-modal-body,
.settings-drawer-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 159, 28, 0.62) rgba(255, 255, 255, 0.035);
}

.character-card {
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}

    .character-card.character-selected {
        border-color: var(--accent);
        background: var(--accent-soft);
    }

.micro-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-bottom: 0.1rem;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.scene-aspect-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.scene-aspect-option {
    min-height: 4.4rem;
    display: grid;
    grid-template-rows: 1.3rem auto auto;
    justify-items: center;
    align-items: center;
    gap: 0.1rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text-main);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.scene-aspect-option:hover,
.scene-aspect-option:focus-visible {
    border-color: rgba(255, 174, 66, 0.55);
    background: rgba(255, 174, 66, 0.08);
    outline: none;
}

.scene-aspect-option.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.scene-aspect-icon {
    display: block;
    border: 2px solid rgba(255, 255, 255, 0.22);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.18);
}

.scene-aspect-icon.square {
    width: 1.25rem;
    height: 1.25rem;
}

.scene-aspect-icon.landscape {
    width: 1.8rem;
    height: 1.05rem;
}

.scene-aspect-icon.portrait {
    width: 1.05rem;
    height: 1.8rem;
}

.scene-aspect-name {
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.1;
}

.scene-aspect-size {
    color: var(--text-muted);
    font-size: 0.68rem;
    line-height: 1.1;
}

@media (max-width: 560px) {
    .scene-aspect-options {
        grid-template-columns: 1fr;
    }
}

/* ── Turn Action Buttons ─────────────────────────────── */

.turn-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--accent);
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    font-size: 0.78rem;
    padding: 0.2rem 0.6rem;
    border-radius: 8px;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.turn-action-btn:hover:not(:disabled),
.turn-action-btn:focus-visible:not(:disabled) {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    outline: none;
}

.turn-action-btn:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.continue-turn-btn {
    width: 2rem;
    min-width: 2rem;
    height: 1.85rem;
    padding: 0;
    border-color: rgba(255, 159, 28, 0.22);
    background: rgba(255, 159, 28, 0.06);
}

.continue-turn-btn .turn-action-icon,
.continue-turn-btn .turn-action-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.turn-action-icon,
.turn-action-icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

.turn-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.turn-action-icon svg {
    display: block;
}

.reroll-turn-btn {
    width: 2rem;
    min-width: 2rem;
    height: 1.85rem;
    padding: 0;
    border-color: rgba(255, 174, 66, 0.42);
    background: rgba(255, 174, 66, 0.09);
    color: var(--accent);
    font-weight: 750;
}

.reroll-turn-btn .turn-action-icon,
.reroll-turn-btn .turn-action-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

/* Inline response-length picker (S/M/L/XL/XXL) on the latest turn. Mirrors the Session
   Settings response-length slider — both write the same target word count. */
.turn-length-segmented {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    padding: 0.15rem;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    border-radius: 8px;
}

.turn-length-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    height: 1.55rem;
    padding: 0 0.35rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.turn-length-item:hover {
    color: var(--text-primary);
}

.turn-length-item.active {
    background: var(--accent);
    color: #1a1205;
}

.reroll-turn-btn:hover:not(:disabled),
.reroll-turn-btn:focus-visible:not(:disabled) {
    border-color: rgba(255, 174, 66, 0.78);
    background: rgba(255, 174, 66, 0.16);
    color: var(--accent);
    transform: translateY(-1px);
}

.reroll-turn-btn .spinner-border {
    width: 0.85rem;
    height: 0.85rem;
    border-width: 0.12rem;
}

.delete-turn-btn {
    width: 2rem;
    min-width: 2rem;
    height: 1.85rem;
    padding: 0;
    border-color: rgba(229, 83, 83, 0.32);
    background: rgba(229, 83, 83, 0.07);
    color: #e55353;
}

.delete-turn-btn:hover:not(:disabled),
.delete-turn-btn:focus-visible:not(:disabled) {
    border-color: rgba(229, 83, 83, 0.7);
    background: rgba(229, 83, 83, 0.16);
    color: #e55353;
    transform: translateY(-1px);
}

.delete-turn-btn .turn-action-icon,
.delete-turn-btn .turn-action-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.delete-turn-btn .spinner-border {
    width: 0.85rem;
    height: 0.85rem;
    border-width: 0.12rem;
}

.edit-turn-btn {
    width: 2rem;
    min-width: 2rem;
    height: 1.85rem;
    padding: 0;
}

.edit-turn-btn .turn-action-icon,
.edit-turn-btn .turn-action-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.generate-scene-btn {
    margin-left: 0;
}

/* Small screens: drop the text labels (Info / Reroll / Generate) so the turn-action
   buttons stay icon-only and fit on a single row like desktop. Placed after the base
   button rules above so these equal-specificity overrides win by source order. */
@media (max-width: 640px) {
    .turn-action-label {
        display: none;
    }

    .reroll-turn-btn {
        min-width: 2rem;
        width: 2rem;
        height: 1.85rem;
        padding: 0;
    }

    .info-turn-btn,
    .generate-scene-btn {
        min-height: 1.85rem;
        padding: 0.2rem 0.5rem;
    }
}

/* ── Turn Edit Dialog ──────────────────────────────────── */

.turn-edit-dialog {
    width: min(680px, 100%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-radius: 8px;
    padding: 1.15rem;
    text-align: left;
}

.turn-edit-hint {
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
}

.turn-edit-textarea {
    min-height: 220px;
    resize: vertical;
}

.turn-edit-timeline {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.turn-edit-timeline-field {
    flex: 1 1 0;
    min-width: 0;
}

/* ── Turn Pagination ───────────────────────────────────── */

.turn-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.turn-pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.32rem 0.75rem;
    border-radius: 8px;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

    .turn-pagination-btn:hover:not(:disabled),
    .turn-pagination-btn:focus-visible {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
        outline: none;
    }

    .turn-pagination-btn:disabled {
        opacity: 0.4;
        cursor: default;
    }

    .turn-pagination-btn span {
        font-size: 0.9em;
        line-height: 1;
    }

.turn-pagination-range {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Generated Image Panel ─────────────────────────────── */

/* Turn content row: narration column on the left, generated-image rail on the right.
   The rail's right edge lines up with the user bubble's right margin. */
.turn-content-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
}

.turn-content-main {
    /* Same width the narration column had before the image rail existed
       (mirrors .turn-ai-message's own cap) so text width never shrinks. */
    flex: 0 0 auto;
    width: min(calc(68ch + 4.05rem), 82%);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Inside the fixed-width main column the narration takes the full column width;
   re-capping at 82% here would shrink the text. */
.turn-content-main .turn-ai-message {
    width: 100%;
}

.turn-content-main .turn-action-row {
    max-width: calc(100% - 4.05rem);
}

/* The rail only gets the space left over next to the narration column. */
.turn-side-images {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 340px;
    margin-left: auto;
    /* Line the first thumbnail up with the narration bubble's top edge: the main column
       starts with the speaker label (0.78rem font x 1.1 line-height) plus the 0.38rem
       .turn-ai-stack gap before the bubble. */
    margin-top: calc(0.78rem * 1.1 + 0.38rem);
}

.story-turn-list-reader .turn-side-images {
    width: 100%;
    max-width: none;
    margin: 0;
}

.story-turn-list-reader .generated-image-panel {
    gap: 0.45rem;
    width: 100%;
}

.story-turn-list-reader .generated-image-card {
    width: 100%;
    border-radius: 4px;
    background: transparent;
}

.story-turn-list-reader .generated-image-clickable,
.story-turn-list-reader .generated-image-img,
.story-turn-list-reader .generated-image-placeholder {
    width: 100%;
    border-radius: 4px;
}

.story-turn-list-reader .generated-image-meta {
    justify-content: center;
    gap: 0.45rem;
    padding: 0.5rem 0 0;
}

.story-turn-list-reader .turn-image-generating-card {
    min-height: 12rem;
}

/* Animated square placeholder shown in the rail while a turn's image is generating;
   holds the exact spot (and footprint) where the finished thumbnail will appear. */
.turn-image-generating-card {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-top: 0.6rem;
    border: 1px dashed rgba(255, 174, 66, 0.35);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.75rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.76rem;
    animation: turn-image-generating-pulse 1.8s ease-in-out infinite;
}

.turn-image-generating-card:first-child {
    margin-top: 0;
}

@keyframes turn-image-generating-pulse {
    0%, 100% {
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 174, 66, 0.22);
    }

    50% {
        background: rgba(255, 174, 66, 0.09);
        border-color: rgba(255, 174, 66, 0.5);
    }
}

.generated-image-panel {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}

.generated-image-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    /* No overflow:hidden — it clipped the Image Info popover now that the card is a
       narrow rail thumbnail. Corner rounding is handled on the image viewport below. */
    width: 100%;
}

/* Fixed square viewport: portrait/landscape images keep their ratio and letterbox on black. */
.generated-image-clickable {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #000;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.generated-image-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 12px 12px 0 0;
}

/* Compact the per-image toolbar so it fits under the rail thumbnails. */
.generated-image-meta {
    padding: 0.4rem 0.5rem;
    gap: 0.3rem;
    flex-wrap: nowrap;
}

/* The rail sits at the right edge of the content column, so anchor the Image Info
   popover to the button's LEFT side to keep it on screen (default anchors left:0,
   which would push a 340px popover past the viewport edge). */
.generated-image-meta .meta-popover {
    left: auto;
    right: 0;
}

/* Icon-only buttons (Image Info / View prompt / Delete) — one row under each thumbnail. */
.generated-image-panel .image-icon-btn {
    width: 1.7rem;
    min-width: 1.7rem;
    height: 1.7rem;
    min-height: 1.7rem;
    padding: 0;
    border-radius: 999px;
}

.generated-image-panel .image-icon-btn svg {
    width: 0.95rem;
    height: 0.95rem;
    display: block;
}

@media (max-width: 640px) {
    /* Mobile: images stack below the narration text at full width. */
    .turn-content-row {
        flex-direction: column;
    }

    .story-turn-list-reader .turn-content-row {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .turn-content-main {
        width: 100%;
    }

    .story-turn-list-reader .turn-action-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.35rem;
    }

    .story-turn-list-reader .turn-action-slot-left {
        grid-column: 1;
        grid-row: 1;
    }

    .story-turn-list-reader .turn-action-slot-center {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .story-turn-list-reader .turn-action-slot-right {
        grid-column: 2;
        grid-row: 1;
    }

    .turn-side-images {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-top: 0;
    }

    .story-turn-list-reader .turn-side-images {
        margin-top: 0;
    }
}

.generated-image-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--bg-base);
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.generated-image-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
}

.generated-image-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.image-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.8rem;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.055);
    color: var(--text-main);
    font-size: 0.74rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.image-action-btn:hover,
.image-action-btn:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255, 174, 66, 0.45);
    background: rgba(255, 174, 66, 0.1);
    color: var(--accent);
    outline: none;
}

.image-action-danger {
    color: #ff9b9b;
    border-color: rgba(229, 72, 77, 0.3);
    background: rgba(229, 72, 77, 0.08);
}

.image-action-danger:hover,
.image-action-danger:focus-visible {
    color: #ffc4c4;
    border-color: rgba(229, 72, 77, 0.62);
    background: rgba(229, 72, 77, 0.16);
}

/* Prompt popup dialog (opened from the eye button under a generated image). */
.prompt-dialog {
    width: min(680px, 100%);
    text-align: left;
}

.prompt-dialog-text {
    margin: 0;
    padding: 0.65rem 0.75rem;
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-main);
    font-size: 0.82rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Prompt Preview Box ────────────────────────────────── */

.prompt-preview-box {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
}

/* ── Generated Image Clickable ───────────────────────── */

.generated-image-clickable {
    cursor: pointer;
    transition: opacity 0.15s ease;
}

    .generated-image-clickable:hover {
        opacity: 0.85;
    }

    .generated-image-clickable:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
    }

/* ── Image Lightbox ──────────────────────────────────── */

.image-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}

.image-lightbox-container {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-lightbox-close {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

    .image-lightbox-close:hover {
        background: var(--accent);
        color: #1a1205;
    }

.image-lightbox-img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.image-lightbox-prompt {
    margin-top: 0.75rem;
    max-width: 90vw;
    width: 100%;
    max-width: 700px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    color: var(--text-muted);
}

/* Mobile lightbox adjustments */
@media (max-width: 576px) {
    .image-lightbox-overlay {
        padding: 0.5rem;
    }

    .image-lightbox-img {
        max-width: 98vw;
        max-height: 70vh;
    }

    .image-lightbox-close {
        top: 0.25rem;
        right: 0.25rem;
        width: 32px;
        height: 32px;
        font-size: 1.2rem;
    }
}

/* Transcript import and memory indexing */
.transcript-import-overlay {
    padding: 1rem;
}

.transcript-import-dialog {
    width: min(720px, 100%);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.transcript-import-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.transcript-import-header h2 {
    margin: 0;
    color: var(--accent);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.15;
}

.transcript-import-close {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--text-main);
    font-weight: 800;
    line-height: 1;
}

.transcript-import-close:hover,
.transcript-import-close:focus-visible {
    border-color: rgba(243, 178, 80, 0.42);
    color: var(--accent);
    outline: none;
}

.transcript-import-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.8fr);
    gap: 0.9rem;
    margin-bottom: 0.9rem;
}

.transcript-import-file-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.9rem;
}

.transcript-import-file {
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.8rem;
    border: 1px solid rgba(243, 178, 80, 0.32);
    border-radius: 8px;
    background: rgba(243, 178, 80, 0.08);
    color: var(--accent);
    font-weight: 750;
    cursor: pointer;
}

.transcript-import-file:hover,
.transcript-import-file:focus-within {
    background: rgba(243, 178, 80, 0.14);
    border-color: rgba(243, 178, 80, 0.55);
}

.transcript-import-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1rem;
}

.memory-index-session-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 16rem) auto;
    gap: 0.8rem;
    align-items: center;
    margin: 0 0 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(243, 178, 80, 0.26);
    border-radius: 8px;
    background: rgba(24, 24, 25, 0.86);
}

.memory-index-session-banner.is-failed {
    border-color: rgba(229, 72, 77, 0.38);
}

.memory-index-session-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.memory-index-session-copy strong {
    color: var(--text-main);
    font-size: 0.9rem;
    line-height: 1.2;
}

.memory-index-session-copy span {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

.memory-index-session-meter {
    height: 0.45rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.memory-index-session-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), #87bf50);
    transition: width 0.25s ease;
}

.turn-response-time .turn-response-location {
    display: inline-block;
    min-width: 0;
    max-width: min(26ch, 36vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .transcript-import-grid,
    .transcript-import-file-row,
    .memory-index-session-banner {
        grid-template-columns: 1fr;
    }

    .transcript-import-actions {
        flex-direction: column-reverse;
    }

    .transcript-import-actions .btn {
        width: 100%;
    }

    /* The mobile NavMenu top bar (56px, sticky) sits at the viewport top, so the
       sticky session header must dock below it — otherwise its action buttons
       (context / world state / settings) hide behind the nav bar. */
    .session-header {
        top: 56px;
    }

    .session-shell {
        margin-top: 0;
    }
}

/* ===== Activated Context panel ===== */
.context-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
}

.context-empty svg {
    color: var(--accent);
    opacity: 0.6;
    margin-bottom: 0.25rem;
}

.context-empty-title {
    color: var(--text-primary);
    font-weight: 600;
}

.context-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.context-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.78rem;
}

.context-chip strong {
    color: var(--accent);
    font-weight: 700;
}

.context-section {
    margin-bottom: 1.1rem;
}

.context-section-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 0 0 0.3rem;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.context-section-head:hover .context-section-title {
    color: var(--accent-strong);
}

.context-chevron {
    margin-left: auto;
    color: var(--text-muted);
    transform: rotate(-90deg);
    transition: transform 0.15s ease;
}

.context-chevron.is-open {
    transform: rotate(0deg);
}

.context-section-title {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.3px;
    font-size: 0.92rem;
}

.context-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
}

.context-card {
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--bg-card);
    margin-bottom: 0.5rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.context-card:hover {
    border-color: rgba(255, 159, 28, 0.4);
    background: var(--bg-card-hover);
}

.context-card-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Title sits on its own line under the badge row. */
.context-card-title {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 0.3rem;
    min-width: 0;
}

/* Pencil affordance rides the right edge of the badge row. */
.context-card-head .context-title-edit-icon {
    margin-left: auto;
}

/* Clickable context card (lore/memory): the whole card opens its editor from the Activated Context panel. */
.context-card-clickable {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.context-card-clickable:hover .context-card-title,
.context-card-clickable:focus-visible .context-card-title {
    color: var(--accent);
}

.context-card-clickable .context-title-edit-icon {
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(-2px);
    color: var(--accent);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.context-card-clickable:hover .context-title-edit-icon,
.context-card-clickable:focus-visible .context-title-edit-icon {
    opacity: 1;
    transform: translateX(0);
}

.context-card-clickable:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 2px;
}

.context-pin {
    color: var(--accent);
    font-size: 0.85rem;
}

.context-card-snippet {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
    margin-top: 0.35rem;
}

.context-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.45rem;
}

.context-meta-chip {
    padding: 0.12rem 0.45rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 0.72rem;
    letter-spacing: 0.3px;
}

.context-meta-person {
    background: var(--accent-soft);
    color: var(--accent);
}

.context-meta-score {
    font-variant-numeric: tabular-nums;
}

.context-meta-origin {
    text-transform: uppercase;
    font-size: 0.66rem;
    letter-spacing: 0.5px;
}

/* type / category badges */
.context-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge-plot { background: rgba(255, 159, 28, 0.14); color: #ffb454; }
.badge-relationship { background: rgba(229, 72, 153, 0.16); color: #f06bb0; }
.badge-character { background: rgba(94, 167, 255, 0.16); color: #76b3ff; }
.badge-location { background: rgba(74, 201, 155, 0.16); color: #5fd3ad; }
.badge-faction { background: rgba(180, 130, 255, 0.16); color: #c19bff; }
.badge-race { background: rgba(120, 200, 210, 0.16); color: #84d4de; }
.badge-monster { background: rgba(229, 72, 77, 0.16); color: #f0767a; }
.badge-item { background: rgba(255, 206, 84, 0.16); color: #ffd766; }
.badge-quest { background: rgba(140, 190, 80, 0.16); color: #a6d36a; }
.badge-discovery { background: rgba(110, 200, 255, 0.16); color: #84cffe; }
.badge-rule { background: rgba(160, 160, 168, 0.16); color: #b8b8c0; }
.badge-lore { background: rgba(200, 170, 130, 0.16); color: #d4b58a; }
.badge-system { background: rgba(160, 160, 168, 0.14); color: #a0a0a8; }

/* relationships */
.context-rel-pair {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.context-rel-entity {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.88rem;
}

.context-rel-arrow {
    color: var(--accent);
    font-weight: 700;
}

.context-rel-arc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.context-rel-state {
    padding: 0.12rem 0.45rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 0.74rem;
}

.context-rel-state.is-current {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.context-rel-then {
    color: var(--text-muted);
    font-size: 0.7rem;
    opacity: 0.7;
}

/* ---------- Admin pages ---------- */

.admin-dashboard .ai-panel {
    font-size: 0.9rem;
}

.admin-page .fl-page-toolbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    align-items: center;
    margin-bottom: 0.8rem;
    padding: 0.35rem 0 0.45rem;
    background: rgba(13, 13, 15, 0.96);
    border-bottom: 1px solid var(--border-subtle);
    backdrop-filter: blur(10px);
}

.admin-page .fl-page-title {
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    letter-spacing: 0;
    margin-bottom: 0.12rem;
}

.admin-page .fl-page-toolbar p {
    font-size: 0.78rem;
    line-height: 1.25;
}

.admin-page .fl-toolbar-actions {
    gap: 0.5rem;
}

    .admin-page .fl-toolbar-actions .btn,
    .admin-page .fl-toolbar-actions .form-select,
    .admin-page .fl-toolbar-actions .form-control {
        font-size: 0.82rem;
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
    }

.admin-utc-clock {
    display: flex;
    flex-direction: column;
    gap: 0.02rem;
    min-width: 9.5rem;
    padding: 0.28rem 0.52rem;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    font-size: 0.62rem;
    line-height: 1.15;
}

    .admin-utc-clock span {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .admin-utc-clock time {
        color: var(--text-primary);
        font-size: 0.76rem;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

.admin-dashboard .ai-panel h2.h6 {
    font-size: 0.9rem;
}

.admin-dashboard .table {
    font-size: 0.82rem;
    line-height: 1.28;
}

    .admin-dashboard .table > :not(caption) > * > * {
        padding: 0.36rem 0.3rem;
    }

.admin-dashboard .badge {
    font-size: 0.68rem;
}

.admin-dashboard ul.small,
.admin-dashboard p.small,
.admin-dashboard .small {
    font-size: 0.8rem;
}

@media (max-width: 575.98px) {
    .admin-page .fl-page-toolbar {
        align-items: stretch;
    }

    .admin-page .fl-toolbar-actions {
        align-items: stretch;
    }

    .admin-dashboard .table {
        font-size: 0.8rem;
    }

        .admin-dashboard .table > :not(caption) > * > * {
            padding: 0.34rem 0.28rem;
        }

    .admin-utc-clock {
        min-width: 100%;
    }
}

.admin-text-block {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.9rem;
    max-height: 420px;
    overflow-y: auto;
}

.admin-pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.78rem;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    padding: 0.6rem;
    max-height: 480px;
    overflow-y: auto;
    margin-bottom: 0;
}

/* Bootstrap tables default to a light body background; inside dark panels use the app palette. */
.ai-panel .table,
.knowledge-modal .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-subtle);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: rgba(255, 159, 28, 0.08);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-active-bg: rgba(255, 159, 28, 0.12);
    --bs-table-active-color: var(--text-primary);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

    .ai-panel .table > thead th,
    .knowledge-modal .table > thead th {
        color: var(--text-muted);
        font-weight: 600;
        border-bottom-color: var(--border-subtle);
        background: transparent;
    }

/* Compact modal chrome for admin popups (no banner image, slimmer header). */
.admin-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: #101012;
    border-bottom: 1px solid var(--border-subtle);
}

    .admin-modal-header h2 {
        color: #fff;
        font-size: 1.1rem;
        font-weight: 800;
        margin: 0;
    }

/* ============================================================
   Home discovery page: public scenario sections + cover cards.
   ============================================================ */

.home-hero {
    position: relative;
    min-height: clamp(330px, 36vw, 470px);
    display: flex;
    align-items: stretch;
    margin-bottom: 1rem;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--bg-base);
    background:
        linear-gradient(90deg, rgba(9, 9, 12, 0.96) 0%, rgba(9, 9, 12, 0.88) 28%, rgba(9, 9, 12, 0.36) 60%, rgba(9, 9, 12, 0.1) 100%),
        linear-gradient(0deg, rgba(9, 9, 12, 0.84) 0%, rgba(9, 9, 12, 0.06) 46%, rgba(9, 9, 12, 0.32) 100%),
        url("../images/home/hero-fantasy-slice-of-life.png") center right / cover no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 1px 0 0 rgba(255, 255, 255, 0.07),
        inset -1px 0 0 rgba(255, 255, 255, 0.07),
        0 24px 58px rgba(0, 0, 0, 0.36);
}

.home-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px;
    height: 42%;
    z-index: -1;
    background: linear-gradient(0deg, var(--bg-base), rgba(17, 17, 18, 0));
    pointer-events: none;
}

.home-hero-content {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
    padding: clamp(1.2rem, 3vw, 2.2rem);
}

.home-hero-copy {
    width: min(100%, 520px);
}

.home-hero-title {
    max-width: 10ch;
    margin: 0 0 0.8rem;
    color: #fff;
    font-size: clamp(2.45rem, 6vw, 5.6rem);
    line-height: 0.95;
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.72);
}

.home-hero-text {
    max-width: 34rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(0.98rem, 1.35vw, 1.15rem);
    line-height: 1.55;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.62);
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.35rem;
}

.home-hero-primary,
.home-hero-secondary {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding-inline: 1rem;
}

.home-hero-secondary {
    background: rgba(7, 7, 9, 0.5);
    backdrop-filter: blur(8px);
}

.home-hero-login-panel {
    justify-self: end;
    width: min(100%, 330px);
    padding: 1rem;
    border: 1px solid rgba(255, 159, 28, 0.34);
    border-radius: 10px;
    background: rgba(12, 12, 15, 0.78);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(10px);
}

.home-hero-login-panel h2 {
    margin: 0 0 0.45rem;
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.2;
    font-weight: 850;
}

.home-hero-login-panel p {
    margin: 0 0 0.9rem;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.86rem;
    line-height: 1.45;
}

.home-hero-login-panel .btn {
    width: 100%;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.home-hero-register-link {
    display: block;
    margin-top: 0.65rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.home-hero-register-link:hover {
    color: var(--accent);
    text-decoration: underline;
}

.home-quick-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 0 1.6rem;
}

.home-quick-link {
    min-width: 0;
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
        var(--bg-card);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

    .home-quick-link:hover {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--text-primary);
        transform: translateY(-1px);
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
    }

.home-quick-link-icon {
    width: 2.45rem;
    height: 2.45rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 159, 28, 0.12);
    color: var(--accent);
}

.home-quick-link-icon::before {
    content: "";
    width: 1.18rem;
    height: 1.18rem;
    background: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.home-quick-link-icon-scenarios::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 4.5A2.5 2.5 0 0 1 7.5 2H20v17.5h-1.5V3.5h-11A1 1 0 0 0 6.5 4.5V18c.31-.13.65-.2 1-.2H20V21H7.5A2.5 2.5 0 0 1 5 18.5v-14Zm2.5 14.8a1 1 0 0 0 0 2H18.5v-2H7.5Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 4.5A2.5 2.5 0 0 1 7.5 2H20v17.5h-1.5V3.5h-11A1 1 0 0 0 6.5 4.5V18c.31-.13.65-.2 1-.2H20V21H7.5A2.5 2.5 0 0 1 5 18.5v-14Zm2.5 14.8a1 1 0 0 0 0 2H18.5v-2H7.5Z'/%3E%3C/svg%3E");
}

.home-quick-link-icon-sessions::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5.2v13.6L18.6 12 8 5.2Zm-2 0C6 3.6 7.8 2.6 9.1 3.5l10.6 6.8c1.3.8 1.3 2.7 0 3.5L9.1 20.5C7.8 21.4 6 20.4 6 18.8V5.2Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5.2v13.6L18.6 12 8 5.2Zm-2 0C6 3.6 7.8 2.6 9.1 3.5l10.6 6.8c1.3.8 1.3 2.7 0 3.5L9.1 20.5C7.8 21.4 6 20.4 6 18.8V5.2Z'/%3E%3C/svg%3E");
}

.home-quick-link-icon-create::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3h1.5v7.5H21V12h-7.5V21H12v-9H3v-1.5h9V3Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3h1.5v7.5H21V12h-7.5V21H12v-9H3v-1.5h9V3Z'/%3E%3C/svg%3E");
}

.home-quick-link strong,
.home-quick-link small {
    display: block;
    min-width: 0;
}

.home-quick-link strong {
    color: #fff;
    font-size: 0.94rem;
    font-weight: 800;
    line-height: 1.2;
}

.home-quick-link small {
    margin-top: 0.12rem;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.3;
}

.home-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
    scroll-margin-top: 1rem;
}

.home-section-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
}

.home-section-emblem {
    font-size: 1rem;
    vertical-align: 0.1em;
}

.home-mature-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85rem;
    user-select: none;
}

.home-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

/* Card: full-bleed cover art with a bottom info gradient. */
.home-scenario-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 16 / 11;
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;
    background: var(--bg-card);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

    .home-scenario-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background-image: var(--home-cover);
        background-size: cover;
        background-position: center top;
        transition: transform 0.35s ease;
    }

    /* Readability gradient over the art. */
    .home-scenario-card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(180deg, rgba(10, 10, 12, 0.35) 0%, rgba(10, 10, 12, 0) 30%, rgba(10, 10, 12, 0.16) 55%, rgba(10, 10, 12, 0.93) 100%);
    }

    .home-scenario-card:hover,
    .home-scenario-card:focus-visible {
        transform: translateY(-3px);
        border-color: rgba(255, 159, 28, 0.55);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
        outline: none;
    }

        .home-scenario-card:hover::before,
        .home-scenario-card:focus-visible::before {
            transform: scale(1.045);
        }

/* Gradient stand-ins for scenarios without cover art. */
.home-cover-fallback::before {
    background-image: none;
}

.home-cover-fallback-0::before {
    background: linear-gradient(135deg, #3b2410, #191114 55%, #0f0f11);
}

.home-cover-fallback-1::before {
    background: linear-gradient(135deg, #14243a, #131019 55%, #0f0f11);
}

.home-cover-fallback-2::before {
    background: linear-gradient(135deg, #2c1230, #170f16 55%, #0f0f11);
}

.home-cover-fallback-3::before {
    background: linear-gradient(135deg, #0f3028, #101413 55%, #0f0f11);
}

.home-card-topline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 0.75rem;
}

.home-card-genre {
    padding: 0.14rem 0.6rem;
    border-radius: 999px;
    background: rgba(12, 12, 14, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #eaeaec;
    font-size: 0.72rem;
    font-weight: 600;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

.home-card-mature-badge {
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    background: rgba(229, 72, 77, 0.85);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.home-card-plays {
    margin-left: auto;
    padding: 0.14rem 0.6rem;
    border-radius: 999px;
    background: rgba(12, 12, 14, 0.68);
    border: 1px solid rgba(255, 159, 28, 0.4);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
}

.home-card-info {
    padding: 0 0.85rem 0.75rem;
}

.home-card-title {
    color: #fff;
    font-size: 1.02rem;
    font-weight: 800;
    margin: 0 0 0.15rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-card-author {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.home-card-dot {
    opacity: 0.6;
    margin: 0 0.15rem;
}

.home-card-desc {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8rem;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* Loading shimmer while the home feed is fetched. */
.home-card-skeleton {
    pointer-events: none;
    border-color: var(--border-subtle);
    background: linear-gradient(100deg, var(--bg-card) 40%, #232326 50%, var(--bg-card) 60%);
    background-size: 200% 100%;
    animation: home-skeleton-sweep 1.4s ease-in-out infinite;
}

@keyframes home-skeleton-sweep {
    from { background-position: 120% 0; }
    to { background-position: -80% 0; }
}

@media (max-width: 575.98px) {
    .home-hero {
        min-height: 500px;
        align-items: flex-end;
        background:
            linear-gradient(180deg, rgba(9, 9, 12, 0.18) 0%, rgba(9, 9, 12, 0.52) 38%, rgba(9, 9, 12, 0.96) 100%),
            url("../images/home/hero-fantasy-slice-of-life.png") 70% center / cover no-repeat;
    }

    .home-hero-content {
        grid-template-columns: 1fr;
        align-items: flex-end;
        padding: 1rem;
    }

    .home-hero-title {
        max-width: 100%;
        font-size: clamp(2.2rem, 14vw, 3.5rem);
    }

    .home-hero-text {
        font-size: 0.95rem;
        line-height: 1.45;
    }

    .home-hero-actions {
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .home-hero-primary,
    .home-hero-secondary {
        flex: 1 1 145px;
        padding-inline: 0.75rem;
    }

    .home-hero-login-panel {
        justify-self: stretch;
        width: 100%;
        padding: 0.85rem;
    }

    .home-quick-links {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .home-quick-link {
        min-height: 68px;
        padding: 0.75rem;
    }

    .home-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }
}

/* ── Manual lore merge ─────────────────────────────────────────────── */
.lore-merge-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(255, 159, 28, 0.4);
    border-radius: 8px;
    background: var(--accent-soft);
}

.lore-merge-bar-info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.55rem;
    font-size: 0.86rem;
}

.lore-merge-bar-count {
    font-weight: 700;
    color: var(--accent);
}

.lore-merge-bar-actions {
    display: flex;
    gap: 0.5rem;
}

/* Card selection affordances in merge mode */
.memory-lab-card.merge-selectable,
.memory-lab-list-row.merge-selectable {
    padding-left: 2.35rem;
    padding-right: 2.35rem;
}

/* Merge-mode magnifier: opens a read-only full-content peek without toggling the card's tick. */
.lore-merge-peek {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--bg-card);
    font-size: 0.8rem;
    line-height: 1;
    z-index: 2;
    cursor: pointer;
}

.lore-merge-peek:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* Lore cards keep their active/inactive status dot in the top-right corner; sit the peek below it. */
.lore-merge-peek.lore-peek-under-dot {
    top: 2.3rem;
}

/* Full-content peek dialog body: preserve the card text's own line breaks. */
.lore-peek-content {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin-bottom: 0;
}

.memory-lab-card.merge-selected,
.memory-lab-list-row.merge-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent) inset;
}

.lore-merge-check {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    width: 1.2rem;
    height: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--accent);
    border-radius: 5px;
    background: var(--bg-card);
    color: #101013;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    z-index: 2;
}

.lore-merge-check.checked {
    background: var(--accent);
}

/* Review modal */
.lore-merge-modal {
    max-width: 1040px;
    width: min(96vw, 1040px);
}

.lore-merge-note {
    margin-bottom: 0.85rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(255, 174, 66, 0.26);
    border-radius: 8px;
    background: rgba(255, 174, 66, 0.08);
    color: #f0d3a6;
    font-size: 0.85rem;
}

.lore-merge-error {
    margin-bottom: 0.85rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid rgba(255, 92, 92, 0.35);
    border-radius: 8px;
    background: rgba(255, 92, 92, 0.08);
    color: #ff9a9a;
    font-size: 0.84rem;
    font-weight: 600;
}

.lore-merge-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    gap: 1.1rem;
    align-items: start;
}

.lore-merge-form .form-label {
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.lore-merge-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.lore-merge-field-head .form-label {
    min-width: 0;
}

.lore-merge-counter {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.2;
}

.lore-merge-counter.over-limit {
    color: #ffb0b0;
}

.lore-merge-sources {
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-card);
    padding: 0.85rem;
}

.lore-merge-sources-head {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.lore-merge-hint {
    font-size: 0.79rem;
    color: var(--text-muted);
    margin-bottom: 0.7rem;
}

.lore-merge-source-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.lore-merge-source {
    cursor: pointer;
}

.lore-merge-source > label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.5rem;
    border: 1px solid var(--border-subtle);
    border-radius: 7px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.lore-merge-source > label:hover {
    border-color: var(--accent);
}

.lore-merge-source.keep > label {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.lore-merge-source-thumb {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card-hover);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
}

.lore-merge-source-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lore-merge-source-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.lore-merge-source-title {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lore-merge-source-sub {
    font-size: 0.74rem;
    color: var(--text-muted);
}

.lore-merge-keep-chip {
    flex: 0 0 auto;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--accent);
}

@media (max-width: 720px) {
    .lore-merge-grid {
        grid-template-columns: 1fr;
    }

    .lore-merge-field-head {
        gap: 0.5rem;
    }

    .lore-merge-counter {
        font-size: 0.7rem;
    }
}