/* RP Hub main page. Colors, shadows, radii and motion come from theme.css tokens,
   so every rule here works in light and dark mode without special cases. */

/* ==========================================================================
   Foundations
   ========================================================================== */

:root {
    --app-visual-height: 100vh;
    --keyboard-inset: 0px;
    --chat-bg-height: 100vh;
}

@supports (height: 100dvh) {
    :root { --app-visual-height: 100dvh; }
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    background-color: var(--c-canvas);
    color: var(--c-text);
    font-family: var(--font-sans) !important;
    font-size: 100% !important;
    font-weight: 500 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

.font-normal { font-weight: 500 !important; }
[v-cloak] { display: none !important; }

#app {
    font-family: var(--font-sans) !important;
    height: var(--app-visual-height);
    min-height: 0;
}

.app-logo,
.app-logo *,
.entry-transition-logo,
.entry-transition-logo * {
    font-family: var(--font-serif) !important;
}

/* Names and titles read like a book's: serif. Figures stay tabular so they never jitter. */
.char-grid-item h3,
.desc-panel h3,
.chat-empty__title,
.markdown-body :is(h1, h2, h3) { font-family: var(--font-serif); letter-spacing: 0.01em; }
.font-mono,
.tabular-nums { font-variant-numeric: tabular-nums; }

.app-native-fullscreen,
html:fullscreen #app,
html:-webkit-full-screen #app {
    width: 100vw;
    height: var(--app-visual-height);
    background-color: var(--c-canvas);
}

.app-native-fullscreen :is(.app-navigation-layer, .app-nav-trigger),
html:fullscreen #app :is(.app-navigation-layer, .app-nav-trigger),
html:-webkit-full-screen #app :is(.app-navigation-layer, .app-nav-trigger) {
    display: none !important;
}

.app-native-fullscreen .app-main,
html:fullscreen #app .app-main,
html:-webkit-full-screen #app .app-main {
    width: 100vw;
    max-width: 100vw;
    flex: 1 1 auto;
}

/* Desktop scrollbars: a slim pill that only takes color on hover. */
@media (min-width: 769px) {
    html, body, #app { overflow-x: hidden; }

    * {
        scrollbar-width: thin;
        scrollbar-color: rgb(var(--gray-300)) transparent;
    }

    ::-webkit-scrollbar { width: 10px; height: 0; }
    ::-webkit-scrollbar:horizontal { display: none; }
    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-corner { background: transparent; }

    ::-webkit-scrollbar-thumb {
        min-height: 48px;
        border: 3px solid transparent;
        border-radius: 999px;
        background: rgb(var(--gray-300)) content-box;
    }

    ::-webkit-scrollbar-thumb:hover { background: rgb(var(--primary-300)) content-box; }
    .custom-scrollbar::-webkit-scrollbar { width: 8px; }
    .custom-scrollbar::-webkit-scrollbar-thumb { min-height: 36px; border-width: 2px; }

    .chat-input-scrollbar { scrollbar-color: transparent transparent; }
    .chat-input-scrollbar::-webkit-scrollbar { width: 6px; }
    .chat-input-scrollbar::-webkit-scrollbar-thumb { border-width: 2px; background: transparent; }
    .chat-input-scrollbar:is(:hover, :focus) { scrollbar-color: rgb(var(--gray-300)) transparent; }
    .chat-input-scrollbar:is(:hover, :focus)::-webkit-scrollbar-thumb { background: rgb(var(--gray-300)) content-box; }

    .markdown-body :is(pre, table) { scrollbar-width: none; }
    .markdown-body :is(pre, table)::-webkit-scrollbar { display: none; }
}

/* ==========================================================================
   Entry splash
   ========================================================================== */

.entry-transition {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background:
        radial-gradient(60% 50% at 28% 18%, rgb(var(--primary-200) / 0.55), transparent 70%),
        radial-gradient(50% 45% at 80% 88%, rgba(128, 196, 186, 0.28), transparent 70%),
        var(--c-canvas);
    animation: entry-screen-out 0.7s var(--ease-in-out) 1.5s backwards;
}

.entry-transition-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    color: var(--c-text);
    animation: entry-brand 2.2s var(--ease-out) 0.05s backwards;
}

.entry-transition-book {
    position: relative;
    width: 80px;
    height: 60px;
    margin-bottom: 26px;
    color: rgb(var(--primary-400));
    perspective: 275px;
}

.entry-transition-book svg { display: block; width: 100%; height: 100%; }
.entry-transition-book path[fill] { fill: var(--c-surface); }

.entry-transition-book .entry-book-page {
    position: absolute;
    left: 50%;
    top: 0;
    width: 43.75%;
    height: 100%;
    overflow: visible;
    opacity: 0;
    transform-origin: left center;
    animation: entry-page-turn 1.2s cubic-bezier(0.45, 0, 0.35, 1) 0.18s backwards;
}

.entry-transition-logo { display: inline-flex; align-items: baseline; gap: 0.55rem; line-height: 1; }

.entry-logo-rp {
    position: relative;
    font-size: clamp(2rem, 6.5vw, 2.6rem);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.entry-logo-rp::before,
.entry-logo-rp::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 3px;
    border-radius: 999px;
}

.entry-logo-rp::before { background: rgb(var(--gray-200)); }

.entry-logo-rp::after {
    background: linear-gradient(90deg, rgb(var(--primary-500)), #7cc2b5);
    transform-origin: left center;
    animation: entry-progress-in 1.2s cubic-bezier(0.2, 0.6, 0.3, 1) 0.35s backwards;
}

.entry-logo-hub {
    font-size: clamp(1.35rem, 4.5vw, 1.75rem);
    font-weight: 500;
    color: rgb(var(--primary-text-500, var(--primary-500)));
    letter-spacing: 0.14em;
}

@keyframes entry-brand {
    0% { opacity: 0; transform: translateY(28px); filter: blur(6px); }
    40% { opacity: 1; transform: none; filter: none; }
    100% { transform: scale(1.015); }
}
@keyframes entry-progress-in { from { transform: scaleX(0); } }
@keyframes entry-page-turn {
    0% { opacity: 0; transform: rotateY(0deg); }
    12%, 80% { opacity: 1; }
    100% { opacity: 0; transform: rotateY(-180deg); }
}
@keyframes entry-screen-out {
    from { opacity: 1; visibility: visible; }
    to { opacity: 0; visibility: hidden; }
}

/* ==========================================================================
   Shared motion
   ========================================================================== */

@keyframes view-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }

/* Management pages enter softly; backwards fill leaves no transform behind once done.
   The chat view shows at once so its background never flashes the bare canvas. */
.management-view { animation: view-in var(--dur-4) var(--ease-out) backwards; }

.fade-enter-active, .fade-leave-active { transition: opacity var(--dur-3) var(--ease-out); }
.fade-enter-from, .fade-leave-to { opacity: 0; }

/* Modals (ModalShell): overlay fades, panel rises and settles. */
.app-modal-overlay {
    background: var(--overlay);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    backdrop-filter: blur(6px) saturate(120%);
}
.modal-enter-active { transition: opacity var(--dur-3) var(--ease-out); }
.modal-leave-active { transition: opacity var(--dur-1) var(--ease-in); }
.modal-enter-from, .modal-leave-to { opacity: 0; }
.modal-enter-active > .app-modal-panel { transition: transform var(--dur-4) var(--ease-out); }
.modal-leave-active > .app-modal-panel { transition: transform var(--dur-1) var(--ease-in); }
.modal-enter-from > .app-modal-panel { transform: translate3d(0, 18px, 0) scale(0.965); }
.modal-leave-to > .app-modal-panel { transform: translate3d(0, 8px, 0) scale(0.985); }

/* Character description panel */
.dropdown-enter-active { transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.dropdown-leave-active { transition: opacity var(--dur-1) var(--ease-in), transform var(--dur-2) var(--ease-in); }
.dropdown-enter-from, .dropdown-leave-to { opacity: 0; transform: translate3d(0, -10px, 0) scale(0.97); }
.desc-panel-chevron { transition: transform var(--dur-3) var(--ease-out); }

.usage-roll-enter-active,
.usage-roll-leave-active { transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) ease; }
.usage-roll-enter-from { opacity: 0; transform: translateY(75%); }
.usage-roll-leave-to { opacity: 0; transform: translateY(-75%); }

/* ==========================================================================
   Navigation
   ========================================================================== */

.app-nav-trigger--embedded,
.app-navigation-panel {
    background:
        linear-gradient(150deg, var(--glass-sheen), transparent 55%),
        var(--glass-bg-strong);
    border: 1px solid var(--glass-edge);
    -webkit-backdrop-filter: blur(var(--navigation-blur, 24px)) saturate(160%);
    backdrop-filter: blur(var(--navigation-blur, 24px)) saturate(160%);
}

.app-nav-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-right: 12px;
    color: var(--c-text-3);
    cursor: pointer;
    transition: color var(--dur-1) ease, transform var(--dur-2) var(--ease-out);
}

.app-nav-trigger--chat { color: #fff; }

.app-nav-trigger--embedded {
    position: absolute;
    left: 6px;
    top: 48%;
    z-index: 20;
    width: 38px;
    height: 38px;
    margin-right: 0;
    border-radius: var(--r-md);
    color: var(--c-text-2);
    box-shadow: var(--glass-highlight), var(--shadow-2);
}
.app-nav-trigger--embedded::before { content: ''; position: absolute; inset: -3px; }
.app-nav-trigger--embedded svg { width: 21px; height: 21px; }

.app-navigation-layer { position: fixed; inset: 0; z-index: 50; }
.app-navigation-layer--centered { display: flex; align-items: center; justify-content: center; }
.app-navigation-layer--centered .app-navigation-panel { position: relative; top: auto; left: auto; transform-origin: center; }

.app-navigation-layer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(var(--gray-900) / 0.1);
    pointer-events: none;
}
:root[data-app-theme="dark"] .app-navigation-layer::before { background: rgba(0, 0, 0, 0.35); }

.app-navigation-panel {
    position: absolute;
    top: 60px;
    left: 12px;
    display: flex;
    flex-direction: column;
    width: min(376px, calc(100vw - 24px));
    max-height: calc(var(--app-visual-height) - 24px);
    overflow: hidden;
    border-radius: var(--r-2xl);
    color: var(--c-text-2);
    outline: none;
    transform-origin: top left;
    box-shadow: var(--glass-highlight), var(--shadow-3), 0 0 0 1px rgb(var(--gray-900) / 0.05);
}

.app-navigation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 18px 18px 12px 22px;
}

.app-navigation-brand { position: relative; display: inline-flex; align-items: center; }
.app-navigation-brand::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 44px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgb(var(--primary-500)), rgb(var(--primary-500) / 0));
}
.app-navigation-brand > span { font-size: 20px; font-weight: 800; letter-spacing: 0.06em; color: var(--c-text); }
.app-navigation-brand em { font-size: 13px; font-style: normal; letter-spacing: 0.16em; color: rgb(var(--primary-text-500, var(--primary-500))); }

.app-navigation-close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--c-text-3);
    transition: color var(--dur-1) ease, background-color var(--dur-2) ease, transform var(--dur-3) var(--ease-spring);
}
.app-navigation-close svg { width: 18px; height: 18px; }

.app-navigation-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 14px 16px; }
.app-navigation-section + .app-navigation-section { margin-top: 16px; }
.app-navigation-section h3 { margin: 0 8px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--c-text-3); }
.app-navigation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.app-navigation-grid--online { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.app-navigation-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 54px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: var(--r-lg);
    background: rgb(var(--gray-500) / 0.06);
    color: var(--c-text-2);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease, color var(--dur-2) ease,
        box-shadow var(--dur-2) ease, transform var(--dur-3) var(--ease-out);
}
.app-navigation-grid--online .app-navigation-item { flex-direction: column; justify-content: center; gap: 5px; padding: 10px 4px; font-size: 12px; }

.app-navigation-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 29px;
    height: 29px;
    border-radius: 10px;
    color: var(--c-text-3);
    transition: color var(--dur-2) ease, transform var(--dur-3) var(--ease-spring);
}
.app-navigation-icon svg { width: 21px; height: 21px; }

.app-navigation-item.is-current {
    background: rgb(var(--primary-500) / 0.1);
    border-color: rgb(var(--primary-400) / 0.3);
    color: var(--c-accent-text);
    box-shadow: var(--glass-highlight), 0 6px 16px -10px rgb(var(--primary-600) / 0.6);
}
.app-navigation-item.is-current .app-navigation-icon { color: var(--c-accent-text); }

.app-navigation-status {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(var(--primary-500));
    box-shadow: 0 0 0 0 rgb(var(--primary-500) / 0.5);
    animation: status-pulse 1.8s var(--ease-out) infinite;
}
@keyframes status-pulse { 70%, 100% { box-shadow: 0 0 0 6px rgb(var(--primary-500) / 0); } }

.app-navigation-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin: 0 14px 14px;
    padding: 10px 12px;
    border: 1px solid var(--glass-edge);
    border-radius: var(--r-lg);
    background: rgb(var(--gray-500) / 0.06);
}
.app-navigation-user img,
.app-navigation-avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--r-md); object-fit: cover; }
.app-navigation-avatar {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgb(var(--primary-400)), rgb(var(--primary-700)));
    color: #fff;
    font-size: 15px;
}
.app-navigation-user > div { min-width: 0; }
.app-navigation-user strong { display: block; overflow: hidden; color: var(--c-text); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

.app-nav-trigger:focus-visible,
.app-navigation-item:focus-visible,
.app-navigation-close:focus-visible { outline: 2px solid rgb(var(--primary-500)); outline-offset: 2px; }
.app-nav-trigger:active,
.app-navigation-item:active,
.app-navigation-close:active { transform: scale(0.95); }

@media (hover: hover) and (pointer: fine) {
    .app-nav-trigger:hover { color: var(--c-text); }
    .app-nav-trigger--chat:hover { color: #fff; }
    :where(.app-nav-trigger--embedded):hover { transform: translateY(-1px); }
    .app-navigation-item:hover { background-color: rgb(var(--gray-500) / 0.12); border-color: var(--glass-edge); color: var(--c-text); }
    .app-navigation-item:hover .app-navigation-icon { transform: scale(1.08); }
    .app-navigation-item.is-current:hover { background: rgb(var(--primary-500) / 0.14); color: var(--c-accent-text); }
    .app-navigation-close:hover { background: rgb(var(--gray-500) / 0.12); color: var(--c-text); }
}

/* Panel springs open from its trigger; items follow in a short cascade. */
.app-navigation-enter-active::before { transition: opacity var(--dur-3) ease; }
.app-navigation-leave-active::before { transition: opacity var(--dur-2) ease; }
.app-navigation-enter-from::before,
.app-navigation-leave-to::before { opacity: 0; }
.app-navigation-enter-active .app-navigation-panel { transition: transform var(--dur-4) var(--ease-out), opacity var(--dur-2) ease; }
.app-navigation-leave-active .app-navigation-panel { transition: transform var(--dur-2) var(--ease-in), opacity var(--dur-2) ease; }
.app-navigation-enter-from .app-navigation-panel { opacity: 0; transform: translateY(-10px) scale(0.94); }
.app-navigation-leave-to .app-navigation-panel { opacity: 0; transform: translateY(-4px) scale(0.97); }
.app-navigation-enter-active :is(.app-navigation-item, .app-navigation-section h3, .app-navigation-user) {
    animation: rise-in 320ms var(--ease-out) backwards;
    animation-delay: calc(40ms + var(--i, 0) * 14ms);
}

@media (max-width: 768px) {
    .app-nav-trigger--embedded, .app-navigation-panel { --navigation-blur: 16px; }
    .app-navigation-panel { border-radius: 24px; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .app-nav-trigger--embedded, .app-navigation-panel { background: var(--c-surface); }
}

/* ==========================================================================
   Page shells
   ========================================================================== */

.management-view {
    --management-padding: 1rem;
    height: 100%;
    padding: var(--management-padding);
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.settings-page-header,
.character-management-header { width: 100%; max-width: 64rem; margin-inline: auto; }

.settings-page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 1rem; }

.management-page-heading { display: flex; align-items: center; min-height: 48px; }
.management-page-heading h2 { white-space: nowrap; letter-spacing: 0.01em; }
.management-view .app-nav-trigger { width: 40px; height: 40px; padding: 0; margin-right: 8px; border-radius: var(--r-md); }

@media (hover: hover) and (pointer: fine) {
    .management-view .app-nav-trigger:hover { background: rgb(var(--gray-500) / 0.1); }
}

@media (min-width: 768px) {
    .settings-page-header { margin-bottom: 1.5rem; }
    .management-view { --management-padding: 1.5rem; }
}

@media (min-width: 640px) and (orientation: landscape) {
    .management-view:not(.character-management--deck) > * { max-width: 64rem; margin-inline: auto; }
}

@media (max-width: 360px) {
    .management-page-heading h2 { font-size: 18px; }
    .settings-page-header :is(.settings-icon-button, .settings-create-button) { padding: 7px; }
}

.embedded-loading-spinner {
    width: 2.8125rem;
    height: 2.8125rem;
    margin-bottom: 1rem;
    color: var(--c-accent);
    animation: generated-image-spinner-rotate 2s linear infinite;
}
.embedded-loading-spinner circle {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    animation: generated-image-spinner-dash 1.5s ease-in-out infinite;
}

/* Shared page pieces: an overview card with headline figures, a list heading,
   a single card holding a list, and the empty state. */
.summary-card {
    margin-bottom: 1.75rem;
    padding: 1.25rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    background: var(--c-surface);
    box-shadow: var(--glass-highlight), var(--shadow-1);
}
.summary-facts { display: flex; flex-wrap: wrap; gap: 1rem 3rem; }
.summary-facts dt { display: flex; align-items: center; color: var(--c-text-3); font-size: 0.8125rem; font-weight: 600; }
.summary-facts dd { margin-top: 0.25rem; color: var(--c-text); font-size: 1.25rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.summary-facts small { margin-left: 0.375rem; color: var(--c-text-4); font-size: 0.75rem; font-weight: 500; }
.list-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.625rem; padding-inline: 0.25rem; }
.list-heading h3 { color: var(--c-text); font-size: 0.875rem; font-weight: 700; }
.list-heading span { color: var(--c-text-4); font-size: 0.75rem; }
.list-card { overflow: hidden; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--shadow-1); }
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 3rem 1rem;
    border: 1px dashed var(--c-border-strong);
    border-radius: var(--r-lg);
    color: var(--c-text-2);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
}
.empty-state svg { width: 2.25rem; height: 2.25rem; margin-bottom: 0.5rem; color: var(--c-text-4); }
.empty-state small { color: var(--c-text-4); font-size: 0.75rem; font-weight: 400; }
@media (min-width: 768px) {
    .summary-card { padding: 1.5rem 1.75rem; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.modal-primary-button,
.modal-secondary-button,
.settings-icon-button,
.settings-create-button,
.settings-action {
    transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease, color var(--dur-2) ease,
        box-shadow var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}

.modal-primary-button:active,
.modal-secondary-button:active,
.settings-icon-button:active,
.settings-create-button:active,
.settings-action:active:not(:disabled) { transform: scale(0.96); transition-duration: var(--dur-1); }

.modal-primary-button {
    display: flex;
    align-items: center;
    padding: 0.625rem 1.5rem;
    border-radius: var(--r-md);
    background: linear-gradient(180deg, rgb(var(--primary-500)), rgb(var(--primary-600)));
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25rem;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), var(--shadow-accent);
}
.modal-primary-button:hover { background: linear-gradient(180deg, rgb(var(--primary-600)), rgb(var(--primary-700))); }

.modal-secondary-button {
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    color: var(--c-text-2);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    box-shadow: var(--shadow-1);
}
.modal-secondary-button:hover { background: var(--c-raised); border-color: var(--c-border-strong); color: var(--c-text); }

.settings-icon-button,
.settings-create-button {
    padding: 0.625rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    color: var(--c-text-2);
    box-shadow: var(--shadow-1);
}
.settings-create-button { color: var(--c-accent-text); }
.settings-icon-button:hover,
.settings-create-button:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-2); }
.settings-create-button:hover { border-color: var(--c-accent-edge); background: var(--c-accent-soft); }

.settings-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    font-size: 0.8125rem;
    font-weight: 600;
}
.settings-action:hover:not(:disabled) { border-color: var(--c-border-strong); background: var(--c-raised); }
.settings-action:focus-visible { outline: 2px solid rgb(var(--primary-500)); outline-offset: 2px; }
.settings-action:disabled { opacity: 0.4; cursor: not-allowed; }
.settings-action--icon { flex: none; width: 2.5rem; padding: 0.5rem; }

.settings-model-button {
    width: 100%;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-field);
    color: var(--c-text);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.settings-model-button:is(:hover, :focus-visible) { border-color: rgb(var(--primary-400)); box-shadow: var(--ring); outline: none; }

.item-action-button {
    padding: 0.5rem;
    border-radius: var(--r-sm);
    color: var(--c-text-4);
    transition: color var(--dur-1) ease, background-color var(--dur-1) ease, transform var(--dur-2) var(--ease-out);
}
.item-action-button:active { transform: scale(0.9); }
.item-action-button--edit:hover { background: var(--c-accent-soft); color: var(--c-accent-text); }
.item-action-button--delete:hover { background: var(--c-danger-soft); color: rgb(var(--red-text-600, var(--red-600))); }

.modal-close-button {
    padding: 0.5rem;
    border-radius: 999px;
    color: var(--c-text-4);
    transition: color var(--dur-1) ease, background-color var(--dur-2) ease, transform var(--dur-3) var(--ease-spring);
}
.modal-close-button:hover { background: var(--c-raised); color: var(--c-text); }

.pagination-button {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    color: var(--c-text-3);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    transition: color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.pagination-button:hover:not(:disabled) { border-color: var(--c-accent-edge); color: var(--c-accent-text); }
.pagination-button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Choice modals: a short title, then one row per action; each row leads with an icon and ends with a chevron. */
.choice-modal { padding: 1.25rem; }
.choice-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.choice-modal__head h3 { color: var(--c-text); font-size: 1.125rem; font-weight: 700; line-height: 1.75rem; }
.choice-modal__head p { color: var(--c-text-3); font-size: 0.8125rem; line-height: 1.25rem; }
.choice-modal__head .modal-close-button { flex-shrink: 0; margin: -0.25rem -0.5rem 0 0; }
.choice-modal__head + .choice-modal__list { margin-top: 1rem; }
.choice-modal__label { margin: 1rem 0 0.5rem; color: var(--c-text-4); font-size: 0.75rem; font-weight: 600; line-height: 1rem; }
.choice-modal__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }

.choice-card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 0.75rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    color: var(--c-text);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dur-2) ease, background-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}
.choice-card::after {
    content: '';
    width: 0.4375rem;
    height: 0.4375rem;
    flex-shrink: 0;
    border-top: 1.75px solid;
    border-right: 1.75px solid;
    color: var(--c-text-4);
    transform: rotate(45deg);
    transition: color var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}
.choice-card:hover { border-color: var(--c-accent-edge); background: var(--c-accent-soft); }
.choice-card:hover::after { color: var(--c-accent-text); }
.choice-card:active { transform: scale(0.98); }
.choice-card:focus-visible { outline: 2px solid rgb(var(--primary-400)); outline-offset: 2px; }
.choice-card__icon {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: var(--c-accent-soft);
    color: var(--c-accent-text);
    transition: background-color var(--dur-2) ease, transform var(--dur-3) var(--ease-spring);
}
.choice-card:hover .choice-card__icon { background: var(--c-surface); }
.choice-card__icon svg { width: 1.25rem; height: 1.25rem; }
.choice-card__body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.choice-card__title { font-size: 0.9375rem; font-weight: 600; line-height: 1.375rem; }
.choice-card__desc { overflow: hidden; color: var(--c-text-3); font-size: 0.75rem; line-height: 1.125rem; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Form controls
   ========================================================================== */

.settings-toggle {
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 999px;
    background: rgb(var(--gray-300));
    transition: background-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}

.settings-toggle::after {
    content: '';
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
    /* Only animate when the user toggles; saved state applied on load must not slide. */
    transition: none;
}
label:is(:active, :focus-within) .settings-toggle::after { transition: transform var(--dur-3) var(--ease-spring), width var(--dur-2) var(--ease-out); }

.settings-toggle-input:focus-visible + .settings-toggle { box-shadow: var(--ring); }
.settings-toggle-input:checked + .settings-toggle { background: rgb(var(--primary-600)); }
.settings-toggle-input:checked + .settings-toggle::after { transform: translateX(100%); }

.settings-toggle--compact { width: 2.5rem; height: 1.375rem; }
.settings-toggle--compact::after { top: 0.1875rem; left: 0.1875rem; width: 1rem; height: 1rem; }
.settings-toggle-input:checked + .settings-toggle--compact::after { transform: translateX(1.125rem); }

.segmented-switch {
    position: relative;
    display: flex;
    padding: 0.25rem;
    border-radius: var(--r-md);
    background: rgb(var(--gray-100));
    box-shadow: inset 0 1px 2px rgb(var(--gray-900) / 0.06);
}

.segmented-switch__indicator {
    position: absolute;
    inset-block: 0.25rem;
    left: 0.25rem;
    z-index: 0;
    width: calc(50% - 0.25rem);
    border-radius: 0.5rem;
    background: var(--c-elevated);
    box-shadow: var(--shadow-1), 0 0 0 1px rgb(var(--gray-900) / 0.04);
    pointer-events: none;
    transition: transform var(--dur-4) cubic-bezier(0.3, 1.25, 0.5, 1);
}
.segmented-switch__indicator.is-right { transform: translateX(calc(100% + 0.125rem)); }
.segmented-switch--four .segmented-switch__indicator { width: calc(25% - 0.125rem); }
.segmented-switch--four .segmented-switch__indicator.is-position-2 { transform: translateX(100%); }
.segmented-switch--four .segmented-switch__indicator.is-position-3 { transform: translateX(200%); }
.segmented-switch--four .segmented-switch__indicator.is-position-4 { transform: translateX(300%); }
.segmented-switch--three .segmented-switch__indicator { width: calc(33.333% - 0.1667rem); }
.segmented-switch--three .segmented-switch__indicator.is-position-2 { transform: translateX(100%); }
.segmented-switch--three .segmented-switch__indicator.is-position-3 { transform: translateX(200%); }

.segmented-switch__option {
    position: relative;
    z-index: 10;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-radius: 0.5rem;
    color: var(--c-text-3);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25rem;
    transition: color var(--dur-2) ease;
}
.segmented-switch__option:not(.is-active):hover { color: var(--c-text); }
.segmented-switch__option.is-active { color: var(--c-accent-text); }
.segmented-switch--compact .segmented-switch__option { font-size: 0.75rem; line-height: 1rem; }
.segmented-switch--slim .segmented-switch__option { padding-block: 0.375rem; }

.compact-range::-webkit-slider-thumb {
    width: 15px;
    height: 15px;
    border: 2px solid #fff;
    border-radius: 999px;
    -webkit-appearance: none;
    appearance: none;
    background: rgb(var(--primary-600));
    box-shadow: 0 1px 4px rgb(var(--primary-700) / 0.45);
    transition: transform var(--dur-2) var(--ease-spring);
}
.compact-range:active::-webkit-slider-thumb { transform: scale(1.2); }
.compact-range::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: rgb(var(--primary-600));
    box-shadow: 0 1px 4px rgb(var(--primary-700) / 0.45);
}

.settings-help-trigger {
    display: inline-flex;
    width: 0.9375rem;
    height: 0.9375rem;
    margin-left: 0.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-surface);
    color: var(--c-text-4);
    transition: color var(--dur-1) ease, border-color var(--dur-1) ease, background-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.settings-help-trigger svg { width: 0.9375rem; height: 0.9375rem; }
.settings-help-trigger:hover { border-color: var(--c-accent-edge); background: var(--c-accent-soft); color: var(--c-accent-text); }
.settings-help-trigger.is-open { border-color: rgb(var(--primary-300)); background: rgb(var(--primary-100)); color: var(--c-accent-text); }
.settings-help-trigger:focus-visible { outline: 2px solid rgb(var(--primary-500) / 0.35); outline-offset: 1px; }

.settings-help-popover {
    position: fixed;
    z-index: 1000;
    width: 16rem;
    max-width: calc(100vw - 1rem);
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    color: var(--c-text-2);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    box-shadow: var(--shadow-3);
    transform-origin: top left;
    animation: pop-in var(--dur-2) var(--ease-out) both;
}
.settings-help-popover-content { display: block; padding-left: 0.5rem; border-left: 2px solid rgb(var(--primary-400)); }

/* ==========================================================================
   Settings
   ========================================================================== */

.settings-stack { display: grid; gap: 1.5rem; max-width: 64rem; margin-inline: auto; padding-bottom: 1rem; }

.settings-card {
    min-width: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    background: var(--c-surface);
    box-shadow: var(--glass-highlight), var(--shadow-1);
}

.settings-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.5rem;
    border-bottom: 1px solid var(--c-border-soft);
}

.settings-card__title { display: flex; align-items: center; gap: 0.625rem; color: var(--c-text); font-size: 1rem; font-weight: 700; }
.settings-card__title > svg {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    padding: 0.5rem;
    border-radius: var(--r-md);
    background: var(--c-accent-soft);
    color: var(--c-accent-text);
    box-shadow: inset 0 0 0 1px rgb(var(--primary-200) / 0.6);
}

.settings-card__body { padding: 1.5rem; }
.settings-profile-layout { display: flex; align-items: flex-start; gap: 1.5rem; }
.settings-profile-avatar { width: 6rem; height: 6rem; border-radius: 1.5rem; }
.settings-profile-actions { position: relative; display: flex; align-items: center; gap: 0.5rem; min-width: 0; max-width: 100%; }
.settings-profile-actions .profile-dropdown-container { position: static; min-width: 0; }
.settings-profile-actions .settings-action:not(.settings-action--icon) { width: 100%; }

.settings-label { display: block; margin-bottom: 0.5rem; color: var(--c-text-2); font-size: 0.8125rem; font-weight: 600; }
.settings-subheading { color: var(--c-text); font-size: 0.875rem; font-weight: 600; }

.settings-view .settings-control {
    width: 100%;
    min-width: 0;
    min-height: 2.875rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-field);
    color: var(--c-text);
    font-size: 0.875rem;
    line-height: 1.5rem;
    box-shadow: none;
    transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease, background-color var(--dur-2) ease;
}
.settings-view .settings-control--icon { padding-left: 2.75rem; }
/* Key fields: copy and show/hide appear on the right while the field is in use. */
.secret-input { position: relative; }
.settings-view .secret-input:focus-within input { padding-right: 4.75rem; }
.secret-input__actions {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    display: flex;
    gap: 0.125rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity var(--dur-2) ease;
}
.secret-input:focus-within .secret-input__actions { opacity: 1; pointer-events: auto; }
.secret-input__actions button { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: var(--r-sm); color: var(--c-text-4); }
.secret-input__actions button:hover:not(:disabled) { background: var(--c-raised); color: var(--c-text); }
.secret-input__actions button:disabled { opacity: 0.4; cursor: not-allowed; }
.secret-input__actions svg { width: 1.125rem; height: 1.125rem; }
.settings-view button.settings-control { height: 2.875rem; }
.settings-view textarea.settings-control { resize: vertical; }
.settings-view .settings-control > svg { flex-shrink: 0; }
.settings-view .settings-control:hover { border-color: var(--c-border-strong); }
.settings-view .settings-control:focus { outline: none; border-color: rgb(var(--primary-400)); box-shadow: var(--ring); }
.settings-view .settings-control::placeholder { color: var(--c-text-4); }
.settings-view .segmented-switch { min-height: 2.875rem; box-shadow: none; }
.settings-view .segmented-switch__option { min-width: 0; gap: 0.25rem; }
.settings-view .segmented-switch__option > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-view .segmented-switch__option > span:first-child { flex-shrink: 0; }

.settings-fields { display: grid; border-top: 1px solid var(--c-border-soft); }
.settings-field { position: relative; padding: 1rem 0; border-bottom: 1px solid var(--c-border-soft); }
.settings-field:last-child { border-bottom: 0; padding-bottom: 0.25rem; }

.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
}

.model-setting-row {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0.875rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
}

.settings-collapse {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
    transition: grid-template-rows var(--dur-3) var(--ease-out), opacity var(--dur-2) ease;
}
.settings-collapse.is-open { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; }
.settings-collapse__inner { min-height: 0; overflow: hidden; }
.settings-collapse__content { opacity: 0.6; transform: translateY(-0.375rem); transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-3) ease; }
.settings-collapse.is-open .settings-collapse__content { opacity: 1; transform: none; }
.settings-collapse-trigger { transition: color var(--dur-2) ease, background-color var(--dur-2) ease, box-shadow var(--dur-2) ease; }
.settings-collapse-chevron { transition: transform var(--dur-3) var(--ease-out) !important; }

@media (max-width: 767px) {
    .settings-stack { gap: 1rem; }
    .settings-card { border-radius: var(--r-lg); }
    .settings-card__header, .settings-card__body { padding: 1rem; }
    .settings-profile-layout { flex-direction: column; gap: 1.25rem; }
    .settings-profile-avatar { width: 5rem; height: 5rem; border-radius: 1.25rem; }
    .settings-profile-actions { margin-left: auto; }
}

/* Memory: the browse card opens with its title, the compression rate and a bar where the solid
   part is what the context keeps and the striped part is what the summaries saved. */
.memory-browse { padding: 1rem 1.125rem 0.875rem; border-bottom: 1px solid var(--c-border-soft); }
.memory-browse__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.memory-browse__head h3 { color: var(--c-text); font-size: 0.8125rem; font-weight: 700; }
.memory-browse__head span { color: var(--c-text-3); font-size: 0.8125rem; white-space: nowrap; }
.memory-browse__head b { margin-left: 0.25rem; color: var(--c-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.memory-compression { --saved: repeating-linear-gradient(-45deg, rgb(var(--gray-400) / 0.4) 0 3px, rgb(var(--gray-400) / 0.16) 3px 6px); margin-top: 0.75rem; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
/* Short ticks stand out above and below the bar where the compressed text ends and where the original ends. */
.memory-compression__track { position: relative; height: 0.625rem; border-radius: 999px 0 0 999px; background: var(--saved); }
.memory-compression__track::after,
.memory-compression__fill::after { content: ''; position: absolute; top: 50%; right: 0; width: 2px; height: 1rem; border-radius: 1px; transform: translate(50%, -50%); }
.memory-compression__track::after { background: rgb(var(--gray-400)); }
/* The fill and the stripes both end square against their ticks; only the start of the bar is rounded. */
.memory-compression__fill { position: relative; z-index: 1; width: var(--summary-retained); height: 100%; border-radius: 999px 0 0 999px; background: rgb(var(--primary-500)); transition: width var(--dur-4) var(--ease-out); }
.memory-compression__fill::after { background: rgb(var(--primary-600)); }
.memory-compression__labels { display: flex; align-items: center; gap: 1rem; margin-top: 0.625rem; color: var(--c-text-3); white-space: nowrap; }
.memory-compression__labels span:last-child { margin-left: auto; }
.memory-compression__labels strong { color: var(--c-text); font-weight: 600; }
.memory-compression__labels i { display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.375rem; border-radius: 2px; }
.memory-compression__labels .is-kept { background: rgb(var(--primary-500)); }

.memory-timeline { padding-block: 0.375rem; }
.memory-item { position: relative; padding: 0.75rem 1rem 0.75rem 2.5rem; }
.memory-item::before {
    content: '';
    position: absolute;
    top: 1.125rem;
    left: 1.125rem;
    z-index: 1;
    width: 0.625rem;
    height: 0.625rem;
    border: 2px solid rgb(var(--primary-500));
    border-radius: 999px;
    background: var(--c-surface);
}
.memory-item:not(:last-child)::after { content: ''; position: absolute; top: 1.75rem; bottom: -1.125rem; left: calc(1.4375rem - 1px); width: 2px; background: rgb(var(--primary-500) / 0.18); }
.memory-item__head { display: flex; align-items: center; gap: 0.75rem; min-height: 1.75rem; }
.memory-item__turn { color: var(--c-text); font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.memory-item__chars { margin-left: auto; color: var(--c-text-4); font-size: 0.75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.memory-item__chars b { color: var(--c-text-2); font-weight: 600; }
.memory-item__retry {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--r-sm);
    color: var(--c-text-3);
    transition: background-color var(--dur-2) ease, color var(--dur-2) ease;
}
.memory-item__retry svg { width: 0.9375rem; height: 0.9375rem; }
.memory-item__retry:hover:not(:disabled) { background: rgb(var(--gray-500) / 0.12); color: var(--c-accent-text); }
.memory-item__retry:disabled { opacity: 0.4; cursor: not-allowed; }
.memory-item__text { margin-top: 0.25rem; color: var(--c-text-2); font-size: 0.875rem; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }

/* Memory citations in replies: the sentence gets a dotted underline and ends in a small number chip;
   either opens the summary the model leaned on. */
.memory-cite-text {
    text-decoration: underline dotted rgb(var(--primary-400) / 0.75);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.3em;
    cursor: pointer;
}
.memory-cite {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4em;
    height: 1.4em;
    margin: 0 0.15em;
    padding: 0 0.35em;
    border-radius: 999px;
    background: rgb(var(--primary-500) / 0.12);
    color: var(--c-accent-text);
    font-family: var(--font-sans);
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    vertical-align: 0.4em;
    cursor: pointer;
    transition: background-color var(--dur-2) ease;
}
.memory-cite:focus-visible { outline: 2px solid rgb(var(--primary-400)); outline-offset: 1px; }
/* In the thinking timeline the chip sits on the text line at the same size as the reasoning text. */
.timeline-thinking-detail .memory-cite { margin: 0; font-size: 1em; vertical-align: baseline; }
@media (hover: hover) and (pointer: fine) {
    .memory-cite:hover { background: rgb(var(--primary-500) / 0.22); }
    .memory-cite-text:hover { background: rgb(var(--primary-500) / 0.08); }
}
.compact-modal-panel.memory-cite-panel { max-width: 28rem; }
.memory-cite-list { display: grid; gap: 0.625rem; max-height: min(60vh, 30rem); margin-top: 1rem; overflow-y: auto; overscroll-behavior: contain; }
.memory-cite-card { padding: 0.75rem 0.875rem; border: 1px solid var(--c-border-soft); border-radius: var(--r-md); background: rgb(var(--gray-500) / 0.05); }
.memory-cite-card header { display: flex; align-items: center; gap: 0.5rem; color: var(--c-text-3); font-size: 0.75rem; }
.memory-cite-card header b { color: var(--c-accent-text); font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.memory-cite-card p { margin-top: 0.375rem; color: var(--c-text-2); font-size: 0.875rem; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
.memory-cite-card p.is-missing { color: var(--c-text-4); }

/* ==========================================================================
   Usage statistics
   ========================================================================== */

.usage-toolbar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.usage-range-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.5rem;
    padding: 0 0.875rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    color: var(--c-text-2);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--shadow-1);
    transition: border-color var(--dur-2) ease, background-color var(--dur-2) ease, color var(--dur-2) ease;
}
.usage-range-button svg { width: 1rem; height: 1rem; }
.usage-range-button:hover { border-color: var(--c-border-strong); color: var(--c-text); }
.usage-range-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 30;
    width: 9rem;
    padding: 0.375rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-elevated);
    box-shadow: var(--shadow-3);
    transform-origin: top right;
}
.usage-range-menu button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: var(--r-sm);
    color: var(--c-text-2);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.usage-range-menu button:hover { background: var(--c-raised); color: var(--c-text); }
.usage-range-menu button.is-active { background: var(--c-accent-soft); color: var(--c-accent-text); }
.usage-range-menu svg { width: 1rem; height: 1rem; }


.usage-meter { display: flex; height: 0.5rem; margin-top: 1.25rem; overflow: hidden; border-radius: 999px; background: rgb(var(--gray-200) / 0.7); }
.usage-meter span { flex: 0 1 0; min-width: 0; transition: flex-grow var(--dur-4) var(--ease-out); }
/* Square swatches mark the same four figures everywhere: overview, log rows and the composer. */
.usage-swatch { display: inline-block; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 2px; }
.usage-tone--input { background: rgb(var(--primary-500)); }
.usage-tone--cache { background: rgb(var(--primary-300)); }
.usage-tone--output { background: rgb(var(--amber-400)); }
.usage-tone--cost { background: rgb(var(--green-500)); }
.usage-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.875rem; color: var(--c-text-3); font-size: 0.8125rem; }
.usage-legend li { display: inline-flex; align-items: center; gap: 0.5rem; }

.usage-legend b { color: var(--c-text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Request log: one card, a row per request; model and time on the left, figures on the right. */
/* Cost sits in the top-right corner of each row; phones stack the figures under the title. */
.usage-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main cost" "stats stats";
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    transition: background-color var(--dur-2) ease;
}
.usage-row__main { grid-area: main; min-width: 0; }
.usage-row__cost { grid-area: cost; align-self: start; color: var(--c-text); font-size: 0.8125rem; font-weight: 600; line-height: 1.25rem; font-variant-numeric: tabular-nums; }
.usage-row + .usage-row { border-top: 1px solid var(--c-border-soft); }
.usage-row__model { overflow: hidden; color: var(--c-text); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.usage-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; margin-top: 0.375rem; color: var(--c-text-4); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.usage-type { padding: 0.0625rem 0.5rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; }
.usage-type--chat { background: rgb(var(--primary-500) / 0.12); color: var(--c-accent-text); }
.usage-type--memory { background: rgb(var(--green-500) / 0.14); color: rgb(var(--green-text-600, var(--green-600))); }
.usage-type--variables { background: rgb(var(--amber-500) / 0.16); color: rgb(var(--amber-text-700, var(--amber-700))); }
/* Phones: three equal columns (input, cache, output); the cost stays in the row's top-right corner. */
.usage-row__stats { display: grid; grid-area: stats; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.usage-row__stats > div { min-width: 0; }
.usage-row__stats > .usage-row__stat-cost { display: none; }
.usage-row__stats dt { display: flex; align-items: center; gap: 0.375rem; color: var(--c-text-4); font-size: 0.6875rem; }
.usage-row__stats .usage-swatch { width: 0.4375rem; height: 0.4375rem; }
.usage-row__stats dd {
    overflow: hidden;
    color: var(--c-text);
    font-size: 0.8125rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.usage-row__stats dd.is-empty { color: var(--c-text-4); font-weight: 400; }

@media (min-width: 768px) {
    /* Desktop: one line per request; the cost joins the figures as a fourth, green column. */
    .usage-row { grid-template-areas: "main stats"; align-items: center; gap: 1.5rem; padding: 0.875rem 1.25rem; }
    .usage-row__stats { grid-template-columns: repeat(4, 6rem); gap: 0; text-align: right; }
    .usage-row__stats > .usage-row__stat-cost { display: block; }
    .usage-row__cost { display: none; }
    .usage-row__stats dt { justify-content: flex-end; }
}
@media (max-width: 480px) {
    .usage-range-button { padding: 0 0.75rem; }
}

/* ==========================================================================
   Sortable lists, badges and placement pickers
   ========================================================================== */

.sortable-list { display: grid; gap: 10px; }

.sortable-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    min-height: 70px;
    padding: 14px 18px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow-1);
    overflow-anchor: none;
    transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}
.sortable-list-item:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-2); }
/* Switched-off rows fade their title and details back; the toggle and buttons stay at full strength. */
.sortable-list-item.is-off .sortable-item-main { opacity: 0.5; }

.sortable-item-main { display: flex; align-items: center; flex: 1; min-width: 0; margin-right: 16px; }
.sortable-item-actions,
.sortable-item-buttons { display: flex; align-items: center; flex-shrink: 0; }
.sortable-item-actions { gap: 14px; }
.sortable-item-actions > label { min-height: 36px; }
.sortable-item-actions .settings-toggle { position: relative; }
.sortable-item-buttons { gap: 4px; padding-left: 12px; border-left: 1px solid var(--c-border-soft); }
.sortable-list-item .item-action-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; }
.sortable-list-item .item-action-button svg { width: 18px; height: 18px; }
.sortable-list-item .item-action-button:focus-visible,
button.sortable-item-main:focus-visible { outline: 2px solid rgb(var(--primary-400)); outline-offset: 2px; }

.sortable-list-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    height: 36px;
    margin: -4px 8px -4px -4px;
    border-radius: var(--r-sm);
    color: var(--c-text-4);
    cursor: grab;
    touch-action: none;
    user-select: none;
    transition: color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.sortable-list-handle:hover,
.sortable-list-chosen .sortable-list-handle { color: var(--c-text-2); background: var(--c-raised); }
.sortable-list-chosen { border-color: var(--c-border-strong); }
.sortable-list-chosen .sortable-list-handle { cursor: grabbing; }
.sortable-list-placeholder { opacity: 0.3; box-shadow: none; }
.sortable-list-preview {
    opacity: 1 !important;
    border-color: rgb(var(--primary-300));
    box-shadow: var(--shadow-3);
    transform: scale(1.015);
    transition: none !important;
    will-change: transform;
}

.sortable-item-heading { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sortable-item-heading > h3 { min-width: 0; max-width: 100%; color: var(--c-text); font-size: 15px; font-weight: 600; line-height: 22px; }

.meta-badge {
    --badge-tone: var(--gray-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid rgb(var(--badge-tone) / 0.28);
    border-radius: 7px;
    background: rgb(var(--badge-tone) / 0.1);
    color: rgb(var(--badge-text, var(--badge-tone)));
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}
.meta-badge--system { --badge-tone: var(--red-500); --badge-text: var(--red-text-700, var(--red-700)); }
.meta-badge--user { --badge-tone: var(--green-500); --badge-text: var(--green-text-700, var(--green-700)); }
.meta-badge--assistant { --badge-tone: 139 92 214; --badge-text: 118 72 190; }
.meta-badge--global { --badge-tone: var(--primary-500); --badge-text: var(--primary-text-700, var(--primary-700)); }
.meta-badge--bound { --badge-tone: var(--amber-500); --badge-text: var(--amber-text-700, var(--amber-700)); }
:root[data-app-theme="dark"] .meta-badge--assistant { --badge-text: 196 170 245; }

.message-placement {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    gap: 8px;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    color: var(--c-text-3);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease;
}
.message-placement:is(:hover, :focus-within) { border-color: rgb(var(--primary-400)); }
.message-placement:focus-within { outline: 2px solid rgb(var(--primary-200)); outline-offset: 2px; }
.message-placement.is-selected { background: var(--c-accent-soft); border-color: rgb(var(--primary-300)); color: var(--c-accent-text); }
.message-placement-check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    height: 16px;
    border: 1px solid var(--c-border-strong);
    border-radius: 5px;
    background: var(--c-surface);
    transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.message-placement.is-selected .message-placement-check { border-color: rgb(var(--primary-600)); background: rgb(var(--primary-600)); }

@media (max-width: 767px) {
    .meta-badge--desktop { display: none; }
    .sortable-list-item { min-height: 64px; padding: 12px; }
    .sortable-item-main { margin-right: 10px; }
    .sortable-list-handle { margin-right: 6px; }
    .sortable-item-heading > h3 { font-size: 14px; line-height: 21px; }
    .sortable-item-actions { gap: 8px; }
    .sortable-item-buttons { padding-left: 8px; }
    .sortable-list-item .item-action-button { width: 32px; }
}

/* ==========================================================================
   Modals
   ========================================================================== */

.compact-modal-panel {
    position: relative;
    z-index: 10;
    display: flex;
    width: 100%;
    max-width: 24rem;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow-3);
}

.editor-modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--c-border-soft);
    background: rgb(var(--gray-50) / 0.8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Context viewer: what the request is made of, then every message as a one-line preview that opens in place. */
.ctx-viewer { border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--shadow-3); }
.ctx-viewer__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.25rem 1.25rem; }
.ctx-section + .ctx-section { margin-top: 1.25rem; }
.ctx-section__title { display: flex; align-items: center; gap: 0.375rem; color: var(--c-text); font-size: 0.8125rem; font-weight: 700; }
.ctx-count { padding: 0 0.375rem; border-radius: 999px; background: rgb(var(--gray-500) / 0.1); color: var(--c-text-3); font-size: 0.6875rem; font-weight: 600; line-height: 1.125rem; font-variant-numeric: tabular-nums; }
.ctx-muted { margin-top: 0.5rem; color: var(--c-text-4); font-size: 0.8125rem; }
.ctx-legend { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; margin-top: 0.625rem; color: var(--c-text-3); font-size: 0.75rem; }
.ctx-legend li { display: inline-flex; align-items: center; gap: 0.375rem; }
.ctx-legend b { color: var(--c-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ctx-tone--system { --ctx-tone: var(--red-500); }
.ctx-tone--worldinfo { --ctx-tone: var(--green-500); }
.ctx-tone--memory { --ctx-tone: var(--amber-500); }
.ctx-tone--original { --ctx-tone: var(--primary-500); }
.ctx-tone--tool { --ctx-tone: 32 150 170; }
.usage-meter > [class*="ctx-tone--"], .usage-swatch[class*="ctx-tone--"] { background: rgb(var(--ctx-tone)); }
.ctx-section > .usage-meter { margin-top: 0; }
.ctx-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.ctx-tag { display: inline-flex; align-items: baseline; gap: 0.375rem; max-width: 100%; padding: 0.1875rem 0.5rem; border-radius: var(--r-sm); background: rgb(var(--primary-500) / 0.08); color: var(--c-accent-text); font-size: 0.75rem; }
.ctx-tag b { font-weight: 600; }
.ctx-tag small { overflow: hidden; color: var(--c-text-3); font-size: 0.6875rem; text-overflow: ellipsis; white-space: nowrap; }
.ctx-messages { display: grid; gap: 0.5rem; margin-top: 0.625rem; }
.ctx-message { overflow: hidden; border: 1px solid var(--c-border-soft); border-left: 3px solid rgb(var(--ctx-tone)); border-radius: var(--r-md); background: var(--c-surface); }
.ctx-message__head { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-width: 0; padding: 0.625rem 0.75rem; text-align: left; }
.ctx-role { flex-shrink: 0; color: rgb(var(--ctx-tone)); font-size: 0.75rem; font-weight: 700; }
.ctx-floor { flex-shrink: 0; color: var(--c-text-4); font-family: var(--font-mono); font-size: 0.6875rem; white-space: nowrap; }
.ctx-floor.is-text { font-family: var(--font-sans); }
.ctx-preview { flex: 1; min-width: 0; overflow: hidden; color: var(--c-text-3); font-size: 0.8125rem; text-overflow: ellipsis; white-space: nowrap; }
.ctx-length { flex-shrink: 0; margin-left: auto; color: var(--c-text-4); font-size: 0.75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctx-chevron { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--c-text-4); transition: transform var(--dur-3) var(--ease-out); }
.ctx-chevron.is-open { transform: rotate(180deg); }
.ctx-message__tags { margin: -0.125rem 0.75rem 0.625rem; }
.ctx-message__body { border-top: 1px solid var(--c-border-soft); }
.ctx-content { max-height: 28rem; overflow-y: auto; padding: 0.875rem 0.875rem 1rem; color: var(--c-text-2); font-size: 0.8125rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 767px) {
    .ctx-viewer__body { padding: 0.875rem; }
}

.model-selector-panel { height: min(860px, 94vh); height: min(860px, 94dvh); max-height: 100%; }

@media (max-height: 520px) {
    .model-selector-panel > section { overflow-y: auto; overscroll-behavior: contain; }
    .model-selector-heading { position: sticky; top: 0; z-index: 1; background: var(--c-surface); }
    .model-selector-panel .model-selector-list { flex: none; overflow: visible; }
}

@media (min-width: 768px) {
    .editor-modal-header { padding: 1.25rem; }
}

/* ==========================================================================
   Chat
   ========================================================================== */

.chat-header-scrim {
    position: absolute;
    inset: 0 0 auto;
    height: 7rem;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.28) 32%, rgba(0, 0, 0, 0.1) 62%, transparent);
}

.chat-header-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    border-radius: 999px;
    color: rgb(255 255 255 / 0.75);
    transition: color var(--dur-1) ease, background-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}
.chat-header-button:hover { color: #fff; background: rgb(255 255 255 / 0.14); }
.chat-header-button:active { transform: scale(0.9); }
.chat-header-button--danger:hover { color: rgb(255 160 164); }

/* Soft ambient backdrop when the character has no background image. */
.chat-ambient {
    background:
        radial-gradient(55% 40% at 12% 0%, rgb(var(--primary-200) / 0.35), transparent 70%),
        radial-gradient(45% 35% at 100% 100%, rgba(124, 194, 181, 0.16), transparent 70%),
        var(--c-canvas);
}

/* Empty chat: a quiet glass card, or the character's portrait breathing softly. */
.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    height: 100%;
    text-align: center;
    animation: rise-in var(--dur-4) var(--ease-out) both;
}
.chat-empty__icon {
    display: grid;
    place-items: center;
    width: 5.5rem;
    height: 5.5rem;
    border: 1px solid var(--glass-edge);
    border-radius: var(--r-2xl);
    background: var(--glass-bg-strong);
    color: var(--c-accent-text);
    box-shadow: var(--glass-highlight), var(--shadow-2);
}
.chat-empty__icon svg { width: 2.5rem; height: 2.5rem; }
.chat-empty__avatar {
    width: 6rem;
    height: 6rem;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: 0 0 0 4px var(--glass-edge), var(--shadow-3);
    animation: breathe 4.5s var(--ease-in-out) infinite;
}
@keyframes breathe { 50% { transform: scale(1.04); } }
.chat-empty__title {
    padding: 0.4rem 1rem;
    border: 1px solid var(--glass-edge);
    border-radius: 999px;
    background: var(--glass-bg);
    color: var(--c-text-2);
    font-size: 0.9rem;
    font-weight: 600;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Bubbles: glass by default, tinted for the user's own lines and system notices. */
.msg-bubble-glass {
    --bubble-rgb: var(--surface);
    border: 1px solid var(--glass-edge);
    border-radius: var(--r-xl);
    background-color: rgb(var(--bubble-rgb) / 0.85);
    color: var(--c-text);
    box-shadow: var(--glass-highlight), var(--shadow-1);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
}
/* A live blur cannot see through an ancestor that is still fading in (the browser treats it as
   a backdrop root), so the glass settles in only after the entrance: after a bubble pops in,
   and after a row scrolls into view. */
@keyframes glass-in { from { -webkit-backdrop-filter: blur(0) saturate(100%); backdrop-filter: blur(0) saturate(100%); } }
.msg-bubble-glass,
.msg-name-tag { transition: -webkit-backdrop-filter var(--dur-4) var(--ease-out) 0.7s, backdrop-filter var(--dur-4) var(--ease-out) 0.7s; }
.msg-bubble-glass.animate-message-in { animation: message-in 0.5s var(--ease-out) backwards, glass-in var(--dur-4) var(--ease-out) 0.5s backwards; }
/* An error takes the waiting bubble's place beside the same avatar and name, so it grows out of the
   avatar corner instead of popping in as a new message. */
@keyframes bubble-swap { from { opacity: 0; transform: scale(0.92); } }
.msg-bubble-glass.animate-bubble-swap { transform-origin: top left; animation: bubble-swap 0.5s var(--ease-out) backwards, glass-in var(--dur-4) var(--ease-out) 0.5s backwards; }
.scroll-reveal-container:not(.reveal-active):not([data-revealed="true"]) :is(.msg-bubble-glass, .msg-name-tag) {
    -webkit-backdrop-filter: blur(0) saturate(100%);
    backdrop-filter: blur(0) saturate(100%);
}
.msg-bubble--self { --bubble-rgb: var(--primary-50); border-color: rgb(var(--primary-300) / 0.45); box-shadow: var(--glass-highlight), 0 6px 18px -10px rgb(var(--primary-600) / 0.35); }
.msg-bubble--system { --bubble-rgb: var(--red-50); border-color: rgb(var(--red-300) / 0.45); color: rgb(var(--red-text-800, var(--red-800))); }
.standard-message-shell .msg-bubble-glass:not(.msg-bubble--self) { border-top-left-radius: 6px; }
.standard-message-shell .msg-bubble--self { border-top-right-radius: 6px; }

.msg-name-tag {
    width: fit-content;
    margin-bottom: 0.3rem;
    padding: 0.125rem 0.45rem;
    border: 1px solid var(--glass-edge);
    border-radius: 7px;
    background: var(--glass-bg);
    color: var(--c-text-2);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: var(--shadow-1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    user-select: none;
}

.msg-avatar { box-shadow: 0 0 0 2px var(--glass-edge), var(--shadow-1); }

.message-edit-group { width: 100%; max-width: 100%; }

.message-content-wrapper { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.message-content-wrapper.has-user-images > .markdown-body > *:first-child { padding-top: 0.4rem; }
.message-content-wrapper.has-user-images > .markdown-body > *:last-child { padding-bottom: 0.55rem; }

/* Bubbles drift in from their speaker's side; transform/opacity only. */
.scroll-reveal-left,
.scroll-reveal-right,
.scroll-reveal-center {
    opacity: 0;
    transition: transform 0.6s var(--ease-out), opacity 0.5s var(--ease-out);
}
.scroll-reveal-left { transform: translate3d(-28px, 10px, 0); }
.scroll-reveal-right { transform: translate3d(28px, 10px, 0); }
.scroll-reveal-center { transform: translate3d(0, 16px, 0) scale(0.985); }
.reveal-active,
.scroll-reveal-container[data-revealed="true"] { opacity: 1 !important; transform: none !important; }

@keyframes message-in { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.98); } }
.animate-message-in { animation: message-in 0.5s var(--ease-out) backwards; transform-origin: bottom center; }
.animate-message-fade-in { animation: fade-in var(--dur-3) ease-out backwards; }

.message-action-bar {
    gap: 0.125rem;
    padding: 0.0625rem 0.125rem;
    border: 1px solid var(--glass-edge);
    border-radius: 999px;
    /* Same fill as the chat bubbles it sits under. */
    background: rgb(var(--surface) / 0.85);
    box-shadow: var(--shadow-1);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
}
.message-action-bar:focus-within { opacity: 1 !important; }

.message-action-button,
.message-style-filter-button {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    height: 1.625rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--c-text-3);
    transition: color var(--dur-1) ease, background-color var(--dur-1) ease, transform var(--dur-2) var(--ease-out);
}
.message-action-button { width: 1.75rem; }
.message-style-filter-button { gap: 0.25rem; padding: 0 0.5rem; font-size: 0.625rem; font-weight: 700; white-space: nowrap; }
.message-action-button:is(:hover, :focus),
.message-style-filter-button.is-active { color: var(--c-accent-text); background: rgb(var(--primary-500) / 0.12); outline: none; }
.message-action-button:hover { transform: translateY(-1px); }
.message-action-button:active { transform: scale(0.9); }
.message-style-filter-button:active { transform: scale(0.96); }
.message-action-button--danger:hover { color: rgb(var(--red-text-600, var(--red-600))); background: rgb(var(--red-500) / 0.12); }
.message-style-filter-popover { max-width: calc(100vw - 1.5rem); animation: pop-in var(--dur-2) var(--ease-out) both; }

@media (hover: none) {
    .message-action-button:hover,
    .message-action-button--danger:hover { color: var(--c-text-3); background: transparent; transform: none; }
    .message-action-button.is-tapped { animation: message-action-tap 0.3s var(--ease-out); }
}
@keyframes message-action-tap {
    50% { color: var(--c-accent-text); background: rgb(var(--primary-500) / 0.14); transform: scale(0.88); }
}

@media (min-width: 768px) {
    .message-action-button { width: 1.875rem; height: 1.75rem; }
    .message-style-filter-button { height: 1.75rem; }
}
@media (max-width: 767px) {
    .message-style-filter-popover { transform: translateX(-65%); animation: none; }
}

.desc-panel-stat-number { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

/* Typing indicator: three dots breathing in sequence. */
.typing-indicator { display: flex; align-items: center; gap: 7px; padding: 4px 8px; }
.typing-indicator span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(var(--primary-500));
    animation: typing 1.3s var(--ease-in-out) infinite both;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.3s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.15s; }
@keyframes typing {
    0%, 80%, 100% { opacity: 0.3; transform: translateY(0) scale(0.85); }
    40% { opacity: 1; transform: translateY(-4px) scale(1); }
}

.typing-timer-badge {
    border: 1px solid var(--glass-edge);
    background: var(--glass-bg);
    color: var(--c-text-3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Composer: one glass field holding the text, the tools and the send button. */
.input-island {
    padding: 0.375rem;
    border: 1px solid var(--glass-edge);
    border-radius: 1.375rem;
    background:
        linear-gradient(160deg, var(--glass-sheen), transparent 45%),
        var(--glass-bg-strong);
    box-shadow: var(--glass-highlight), var(--shadow-3), 0 0 0 1px rgb(var(--gray-900) / 0.04);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    transition: box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) ease;
}
.input-island:focus-within { border-color: rgb(var(--primary-500) / 0.32); }

.island-usage { margin: 0.125rem 0.5rem 0; padding: 0.25rem 0 0.5rem; }

.island-input {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    max-height: min(40vh, 20rem);
    padding: 0.625rem 0.75rem 0.25rem;
    border: 0;
    background: transparent;
    color: var(--c-text);
    font-size: 1rem;
    line-height: 1.6;
    resize: none;
}
.island-input::placeholder { color: var(--c-text-4); }
.island-input:focus { outline: none; }

/* 10px from the send button to the frame, so its corner sits concentric with the composer's. */
.island-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.125rem 0.25rem 0.25rem; }

/* Tools are quiet ghost icons; only the send button carries color. */
.island-button {
    display: grid;
    place-items: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.625rem;
    color: var(--c-text-3);
    transition: color var(--dur-1) ease, background-color var(--dur-2) ease, transform var(--dur-2) var(--ease-spring);
}
.island-button svg { width: 1.0625rem; height: 1.0625rem; }
/* Touch screens keep :hover after a tap, which would leave the gray wash on until the next tap. */
@media (hover: hover) and (pointer: fine) {
    .island-button:hover:not(:disabled) { color: var(--c-text); background: rgb(var(--gray-500) / 0.12); }
}
.island-button:active:not(:disabled) { transform: scale(0.88); transition-duration: var(--dur-1); }
.island-button:disabled { opacity: 0.4; cursor: not-allowed; }
.island-button.is-active { color: var(--c-accent-text); background: rgb(var(--primary-500) / 0.14); }

/* Send: a solid rounded square. Stop swaps in plain red with no motion at all. */
.island-send {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: rgb(var(--primary-600));
    color: #fff;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 1px 2px rgb(var(--gray-900) / 0.12);
    transition: background-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}
.island-send svg { width: 1.125rem; height: 1.125rem; }
.island-send:active:not(:disabled) { transform: scale(0.92); transition-duration: var(--dur-1); }
.island-send:disabled { background: rgb(var(--gray-200)); color: var(--c-text-4); box-shadow: none; cursor: not-allowed; }
.island-send--stop { background: rgb(var(--red-600)); transition: none; }

@media (hover: hover) and (pointer: fine) {
    .island-send:hover:not(:disabled) { background: rgb(var(--primary-700)); }
    .island-send--stop:hover { background: rgb(var(--red-700)); }
}

/* Nested inside the island's own backdrop-filter, so a live blur would not reach the page:
   use an opaque surface instead. */
.chat-quick-panel {
    border: 1px solid var(--c-border);
    background: linear-gradient(160deg, var(--glass-sheen), transparent 40%), var(--c-surface);
    box-shadow: var(--glass-highlight), var(--shadow-3);
}
.chat-quick-panel .settings-toggle--compact { position: relative; }
.chat-quick-panel .compact-range { height: 20px; margin: 0; background: linear-gradient(rgb(var(--gray-300)), rgb(var(--gray-300))) center / 100% 3px no-repeat; }
.chat-model-slots > .segmented-switch__indicator {
    inset-block-end: auto;
    width: calc(100% - 0.5rem);
    height: calc((100% - 1.25rem) / 3);
    transform: translateY(calc(var(--slot-index, 0) * (100% + 0.375rem)));
}

/* ==========================================================================
   Markdown
   ========================================================================== */

.markdown-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.markdown-body > * {
    min-width: 0;
    max-width: 100%;
    margin-bottom: 0.75em;
    padding-left: 0.9rem;
    padding-right: 0.8rem;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: left;
}
.markdown-body > *:first-child { padding-top: 0.75rem; }
.markdown-body > *:last-child { padding-bottom: 0.75rem; margin-bottom: 0; }

/* Full-width HTML cards */
.markdown-body > iframe,
.markdown-body > .html-card-container {
    width: 100%;
    min-width: 100%;
    max-width: none;
    align-self: stretch;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.markdown-body > .html-card-container > iframe { display: block; width: 100% !important; min-width: 0; }
/* Standalone HTML may use 100vw; keep its root inside the chat bubble. */
.markdown-body > style:first-child ~ :not(style):not(script) { min-width: 0 !important; max-width: 100% !important; }

.markdown-body :is(p, ul, ol, strong, h1, h2, h3, h4) { color: inherit; }
.markdown-body ul { list-style-type: disc; margin-left: 1.5em; }
.markdown-body ol { list-style-type: decimal; margin-left: 1.5em; }
.markdown-body li::marker { color: rgb(var(--primary-400)); }
.markdown-body strong { font-weight: 700; }
.markdown-body em { font-style: italic; }
.markdown-body h1 { margin-top: 1em; margin-bottom: 0.5em; font-size: 1.5em; font-weight: 700; line-height: 1.2; }
.markdown-body h2 { margin-top: 1em; margin-bottom: 0.5em; font-size: 1.25em; font-weight: 600; line-height: 1.25; }
.markdown-body h3 { margin-top: 1em; margin-bottom: 0.5em; font-size: 1.1em; font-weight: 600; line-height: 1.3; }
.markdown-body h4 { margin-top: 1em; margin-bottom: 0.5em; font-weight: 600; }
.markdown-body code {
    padding: 0.15em 0.45em;
    border: 1px solid rgb(var(--primary-200) / 0.6);
    border-radius: 0.45em;
    background: rgb(var(--primary-500) / 0.08);
    color: var(--c-accent-text);
    font-family: var(--font-mono);
    font-size: 0.88em;
}
.markdown-body pre {
    margin-inline: 0.5rem;
    padding: 1.1em 1.25em;
    overflow-x: auto;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: rgb(var(--gray-50));
    box-shadow: inset 0 1px 2px rgb(var(--gray-900) / 0.04);
}
.markdown-body pre code { padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--c-text); }
.markdown-body blockquote {
    margin-inline: 0.5rem;
    padding-left: 1em;
    border-left: 3px solid rgb(var(--primary-300));
    border-radius: 0 0.5rem 0.5rem 0;
    color: var(--c-text-3);
}
.markdown-body a { color: var(--c-accent-text); text-decoration: underline; text-decoration-color: rgb(var(--primary-400) / 0.5); text-underline-offset: 3px; overflow-wrap: anywhere; transition: text-decoration-color var(--dur-1) ease; }
.markdown-body a:hover { text-decoration-color: currentColor; }
.markdown-body hr { height: 1px; margin: 1.5em 0.5rem; border: 0; background: linear-gradient(90deg, transparent, var(--c-border-strong), transparent); }
.markdown-body table { display: block; width: auto; margin: 0 0.5rem 1em; overflow-x: auto; border-collapse: collapse; }
.markdown-body :is(th, td) { padding: 0.5em 0.75em; border: 1px solid var(--c-border); text-align: left; }
.markdown-body th { background: rgb(var(--gray-50)); font-weight: 600; }
.markdown-body del { color: inherit; text-decoration: line-through; opacity: 0.7; }

/* Specific fix for an immersive container produced by a known regex script. */
.markdown-body div[style*="rgba(20, 10, 20, 0.7)"] { color: #fff !important; white-space: pre-wrap; }

.update-content .markdown-body { line-height: 1.5 !important; letter-spacing: 0.05em !important; }
.update-content .markdown-body > * { margin-bottom: 1em !important; }
.update-content .markdown-body li { margin-top: 0.5em !important; margin-bottom: 0.5em !important; }

.response-error-text { color: rgb(var(--red-text-600, var(--red-600))); font-weight: 700; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; animation: rise-in 0.5s var(--ease-out) backwards; }

/* ==========================================================================
   Thinking & tool timeline
   ========================================================================== */

.cot-ui {
    min-width: 0;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid var(--c-border);
    border-radius: 0.875rem;
    background: var(--c-surface);
    transition: border-color var(--dur-3) ease, box-shadow var(--dur-3) ease, margin var(--dur-3) var(--ease-out);
}
.cot-ui.is-open { border-color: rgb(var(--primary-200)); box-shadow: 0 6px 18px -10px rgb(var(--primary-600) / 0.3); }

.cot-header {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.8rem;
    border-radius: 0.875rem;
    background: var(--c-surface);
    color: var(--c-text-3);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--dur-2) ease, color var(--dur-2) ease;
}
.cot-header:hover { background: var(--c-raised); color: var(--c-accent-text); }
.cot-ui.is-open .cot-header { border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: var(--c-accent-soft); color: var(--c-accent-text); }

.cot-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-out); }
.cot-body.is-open { grid-template-rows: 1fr; }
.cot-inner { overflow: hidden; }
.chevron { transition: transform var(--dur-3) var(--ease-out); }
.cot-ui.is-open .chevron { transform: rotate(180deg); }

.thinking-summary-dots { width: 0.875rem; height: 0.875rem; gap: 3px; color: rgb(var(--primary-500)); }
.thinking-summary-dots i { width: 5px; height: 5px; animation-name: thinking-summary-dot; }
@keyframes thinking-summary-dot {
    0%, 80%, 100% { opacity: 0.2; transform: translateY(0) scale(0.82); }
    40% { opacity: 1; transform: translateY(-2px) scale(1.18); }
}
.thinking-summary-bulb { color: rgb(var(--amber-500)); }

/* A light sweep across the step title while it is still running. The copy on top mirrors the
   title's own spans so the sweep lines up with every glyph. */
.timeline-tool-title-flow {
    position: absolute;
    inset: 0 auto auto 0;
    display: inline-flex;
    align-items: baseline;
    max-width: 100%;
    overflow: hidden;
    color: transparent !important;
    font: inherit;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0.85;
    background: linear-gradient(90deg, transparent, var(--c-surface) 50%, transparent) no-repeat;
    background-size: 72px 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: timeline-tool-title-flow 1.65s infinite;
}
@keyframes timeline-tool-title-flow {
    0% { background-position: -72px 50%; animation-timing-function: cubic-bezier(0.22, 0.72, 0.18, 1); }
    72%, 100% { background-position: calc(100% + 72px) 50%; }
}

/* Step markers: a hollow dot that sends out a soft ring while its step is still running. */
.timeline-marker {
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid rgb(var(--gray-400));
    border-radius: 999px;
    background: var(--c-surface);
    transition: border-color var(--dur-2) ease;
}
.timeline-marker.is-live { border-color: rgb(var(--primary-500)); animation: marker-pulse 1.8s var(--ease-out) infinite; }
.timeline-marker.is-error { border-color: rgb(var(--red-400)); }
@keyframes marker-pulse {
    from { box-shadow: 0 0 0 0 rgb(var(--primary-500) / 0.45); }
    to { box-shadow: 0 0 0 7px rgb(var(--primary-500) / 0); }
}

/* Tree lines for native reasoning lists */
.native-thinking-body .markdown-body ul { list-style: none !important; padding-left: 0.5rem !important; margin-left: 0.25rem !important; }
.native-thinking-body .markdown-body ul > li { position: relative; padding-left: 1.25rem; margin-bottom: 0.25rem; }
.native-thinking-body .markdown-body ul > li::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c-border-strong); }
.native-thinking-body .markdown-body ul > li:last-child::before { height: 0.65em; }
.native-thinking-body .markdown-body ul > li::after { content: ''; position: absolute; left: 0; top: 0.65em; width: 0.8rem; height: 2px; background: var(--c-border-strong); }
.native-thinking-body .markdown-body > * { padding-left: 0.4rem !important; padding-right: 0.4rem !important; }

.native-thinking-wrapper { width: 100%; margin: 0; }
.summary-timeline-card { width: calc(100% - 0.2rem); margin: 0.25rem 0.1rem 0.35rem; }
.native-thinking-header { width: 100%; border: 0; font: inherit; text-align: left; appearance: none; -webkit-appearance: none; }
.native-thinking-card.is-live { border-color: rgb(var(--primary-200)); box-shadow: 0 6px 18px -10px rgb(var(--primary-600) / 0.3); }
.native-thinking-card.is-live .native-thinking-body { transition: none; }


.timeline-step-count { display: inline-block; min-width: 4.75em; margin-left: 0.5rem; font-variant-numeric: tabular-nums; font-weight: 400; opacity: 0.55; text-align: left; white-space: nowrap; }
.timeline-step-title-row { position: relative; display: inline-flex; align-items: baseline; min-width: 0; max-width: 100%; }
.timeline-step-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-thinking-detail { max-height: min(55vh, 34rem); overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; }

.tool-call-detail { display: flex; flex-direction: column; gap: 0.55rem; color: var(--c-text-2); font-family: inherit !important; font-size: 0.78rem; }
.tool-call-detail :is(pre, code) { font-family: inherit !important; }
.tool-description-preview { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.active-tool-waiting { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-height: 5rem; padding: 1.25rem 0.75rem 1rem; }

@media (max-width: 768px) and (orientation: portrait) {
    #active-tools-list .tool-description-preview { display: none; }
}

/* Lightweight live-state dots */
@keyframes live-dot {
    0%, 80%, 100% { opacity: 0.35; transform: scale(0.85); }
    40% { opacity: 1; transform: scale(1); }
}
.live-dots,
.ui-build-dots { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 4px; }
.live-dots i,
.ui-build-dots i { display: block; border-radius: 999px; background: currentColor; animation: live-dot 1.25s ease-in-out infinite; }
.live-dots i { width: 4px; height: 4px; }
.ui-build-dots { gap: 8px; min-height: 3rem; color: rgb(var(--primary-500)); }
.ui-build-dots i { width: 10px; height: 10px; }
:is(.live-dots, .ui-build-dots) i:nth-child(2) { animation-delay: 0.15s; }
:is(.live-dots, .ui-build-dots) i:nth-child(3) { animation-delay: 0.3s; }

/* ==========================================================================
   Generated images & spinners
   ========================================================================== */

.generated-image-card { position: relative; }
.generated-image-card.is-generating { min-height: 220px; }

.generated-image-reroll {
    position: absolute;
    right: 0.65rem;
    bottom: 0.65rem;
    z-index: 4;
    display: inline-flex;
    width: 2.1rem;
    height: 2.1rem;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 !important;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.55));
    transition: opacity var(--dur-2) ease, transform var(--dur-3) var(--ease-spring);
}
.generated-image-reroll svg { width: 1.3rem; height: 1.3rem; }
.generated-image-card:is(.is-generating, .is-rerolling) .generated-image-reroll { opacity: 0; pointer-events: none; }

.generated-image-progress {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.2);
    color: #fff;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    pointer-events: none;
}
.generated-image-card:is(.is-generating, .is-generation-error) .generated-image-progress { display: flex; }
.generated-image-progress-label { font-size: 0.875rem; font-weight: 600; text-shadow: 0 1px 3px rgba(15, 23, 42, 0.45); }
.generated-image-progress-track { width: min(72%, 320px); height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.28); }
.generated-image-progress-bar { display: block; width: 0; height: 100%; border-radius: inherit; background: #fff; transition: width 170ms linear; }
.generated-image-card.is-generation-error :is(.generated-image-spinner, .generated-image-progress-track) { display: none; }

.generated-image-spinner { width: 72px; height: 72px; animation: generated-image-spinner-rotate 2s linear infinite; }
.generated-image-spinner-path { stroke: #fff; stroke-linecap: round; animation: generated-image-spinner-dash 1.5s ease-in-out infinite; }
.character-switch-spinner { width: 2.75rem; height: 2.75rem; }

@keyframes generated-image-spinner-rotate { to { transform: rotate(360deg); } }
@keyframes generated-image-spinner-dash {
    0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

/* ==========================================================================
   UI templates
   ========================================================================== */

/* Template list: rows line up with the settings bar above them. */
.ui-template-list > .sortable-list-item { padding-left: 20px; }

/* Template editor: code tabs beside a live stage; the stage stays in view while the code scrolls. */
.ui-template-workspace { display: grid; gap: 1.25rem; }
.ui-template-code {
    display: block;
    width: 100%;
    min-height: 20rem;
    margin-top: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-field);
    color: var(--c-text);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.7;
    tab-size: 2;
    resize: vertical;
    transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.ui-template-code--prose { font-family: var(--font-sans); font-size: 0.875rem; }
.ui-template-code:focus { outline: none; border-color: rgb(var(--primary-400)); box-shadow: var(--ring); }
.ui-template-code::placeholder { color: var(--c-text-4); }
.ui-template-stage-label { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; color: var(--c-text-2); font-size: 0.8125rem; font-weight: 600; }
.ui-template-stage-label span { color: var(--c-text-4); font-size: 0.75rem; font-weight: 400; }
/* The stage uses the bubble surface, so the preview matches what the chat will show. */
.ui-template-stage { max-height: 30rem; padding: 0.75rem; overflow: auto; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
.ui-template-check { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.8125rem; line-height: 1.5; }
.ui-template-check svg { flex: none; width: 1rem; height: 1rem; margin-top: 0.125rem; }
.ui-template-check.is-ok { color: rgb(var(--green-text-600, var(--green-600))); }
.ui-template-check.is-error { color: rgb(var(--red-text-600, var(--red-600))); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (min-width: 1024px) {
    .ui-template-workspace { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .ui-template-code { min-height: 32rem; }
    .ui-template-stage-wrap { position: sticky; top: 0; }
}

/* Change log: one compact row per variable, old value struck through, new value tinted. */
.ui-template-history { overflow: hidden; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
.ui-template-history__meta { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--c-border-soft); color: var(--c-text-2); font-size: 0.8125rem; font-weight: 600; }
.ui-template-history__meta span + span { color: var(--c-text-4); font-weight: 400; font-variant-numeric: tabular-nums; }
.ui-template-history__row { display: grid; gap: 0.375rem; padding: 0.75rem 1rem; }
.ui-template-history__row + .ui-template-history__row { border-top: 1px solid var(--c-border-soft); }
.ui-template-history__key { color: var(--c-text-2); font-family: var(--font-mono); font-size: 0.8125rem; overflow-wrap: anywhere; }
.ui-template-history__values { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.375rem 0.5rem; font-size: 0.8125rem; line-height: 1.6; }
.ui-template-history__values :is(del, ins) { padding: 0.0625rem 0.375rem; border-radius: 0.375rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-template-history__values del { background: rgb(var(--red-500) / 0.1); color: rgb(var(--red-text-600, var(--red-600))); text-decoration-color: rgb(var(--red-500) / 0.5); }
.ui-template-history__values ins { background: rgb(var(--green-500) / 0.14); color: rgb(var(--green-text-700, var(--green-700))); text-decoration: none; }
.ui-template-history__values svg { flex: none; width: 0.875rem; height: 0.875rem; margin-top: 0.25rem; color: var(--c-text-4); }
@media (min-width: 640px) {
    .ui-template-history__row { grid-template-columns: 10rem minmax(0, 1fr); align-items: start; gap: 1rem; }
}


.ui-template-render,
.ui-template-preview { width: 100%; max-width: 100%; }
.ui-template-render { display: block; align-self: stretch; min-width: 0; }
:is(.ui-template-render, .ui-template-preview) > :is(iframe, .html-card-container) {
    width: 100%;
    min-width: 100%;
    max-width: none;
    align-self: stretch;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
:is(.ui-template-render, .ui-template-preview) > .html-card-container > iframe { display: block; width: 100% !important; min-width: 0; margin: 0 !important; border: 0 !important; }
.ui-template-render .bottom-safe { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
:is(.ui-template-render, .ui-template-preview) :is(*, *::before, *::after) { box-sizing: border-box; max-width: 100%; }
:is(.ui-template-render, .ui-template-preview) :is(img, svg) { max-width: 100%; height: auto; }

.ui-template-message-block { display: flex; flex-direction: column; align-self: stretch; gap: 0.75rem; width: 100%; padding-inline: 0; }
.ui-template-message-block-top { padding-top: 0; }
.ui-template-message-block-bottom { padding-bottom: 0; }
.ui-template-message-block + .markdown-body { margin-top: 0; }

.ui-template-pending-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    min-height: 4.25rem;
    padding: 0.8rem 0.95rem;
    overflow: hidden;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--c-surface), rgb(var(--primary-50) / 0.6));
    color: var(--c-text-2);
    box-shadow: var(--glass-highlight), var(--shadow-1);
}
/* A slow shimmer says "working" without a spinner. */
.ui-template-pending-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, var(--glass-sheen) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: shimmer 2.2s var(--ease-in-out) infinite;
    pointer-events: none;
}
@keyframes shimmer { to { transform: translateX(100%); } }

.ui-template-pending-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid rgb(var(--primary-300) / 0.35);
    border-radius: var(--r-md);
    background: rgb(var(--primary-100) / 0.9);
    color: var(--c-accent-text);
}
.ui-template-pending-icon svg { width: 1.1rem; height: 1.1rem; }
.ui-template-pending-icon .live-dots {
    position: absolute;
    right: -0.12rem;
    bottom: -0.12rem;
    width: 1.1rem;
    height: 0.7rem;
    gap: 2px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-surface);
    color: rgb(var(--primary-500));
    box-shadow: var(--shadow-1);
}
.ui-template-pending-icon .live-dots i { width: 3px; height: 3px; }
.ui-template-pending-content { position: relative; z-index: 1; flex: 1; min-width: 0; }
.ui-template-pending-row { display: flex; align-items: center; gap: 0.6rem; }
.ui-template-pending-title { color: var(--c-text); font-size: 0.95rem; font-weight: 800; line-height: 1.2; }

@media (max-width: 520px) {
    .ui-template-pending-card { padding: 0.78rem 0.85rem; }
    .ui-template-pending-icon { width: 2.25rem; height: 2.25rem; }
    .ui-template-pending-row { gap: 0.45rem; }
}

/* ==========================================================================
   Character cards & deck
   ========================================================================== */

.char-grid-item {
    content-visibility: auto;
    contain-intrinsic-size: 1px 300px;
    transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) ease;
}
.character-card-cover { transition: transform 0.7s var(--ease-out); }
.char-grid-item.is-cover-zoomed .character-card-cover { transform: scale(1.08); }
.char-grid-item.is-card-pressing { transform: scale(0.95); transition-duration: 120ms; }
.char-grid-item.is-card-releasing { transform: scale(1); transition: transform 0.45s var(--ease-spring); }
.char-grid-item .character-card-actions > button { transition: transform var(--dur-3) var(--ease-spring), background-color var(--dur-2) ease, color var(--dur-2) ease; }

/* The deck reuses the regular card and its management actions. */
.character-management--deck { padding: 0; }
.character-management--deck > .character-management-content {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: var(--management-padding);
    isolation: isolate;
    container-type: inline-size;
}

.character-deck {
    --deck-easing: cubic-bezier(0.22, 0.72, 0.18, 1);
    --deck-card-width: clamp(240px, min(32cqw, calc((100dvh - 240px) / 1.5)), 560px);
    --deck-spread: 50%;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 4px 0 20px;
}
.character-deck:focus-visible { outline: 2px solid rgb(var(--primary-300)); outline-offset: -3px; }

.character-deck__backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: rgb(var(--gray-200)); }
.character-deck__backdrop img { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 1; filter: blur(40px) saturate(1.1); transform: scale(1.14); will-change: opacity; }
.character-deck__backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(var(--gray-50) / 0.7), rgb(var(--gray-50) / 0.06) 45%, rgb(var(--gray-50) / 0.34));
}
.character-backdrop-enter-active,
.character-backdrop-leave-active { transition: opacity 0.85s var(--deck-easing); }
.character-backdrop-enter-from,
.character-backdrop-leave-to { opacity: 0 !important; }

.character-deck__stage {
    position: relative;
    height: calc(var(--deck-card-width) * 1.5 + 42px);
    flex-shrink: 0;
    overflow-x: clip;
    perspective: 1600px;
    touch-action: pan-y pinch-zoom;
    user-select: none;
    cursor: grab;
}

.character-deck__item {
    position: absolute;
    top: 8px;
    left: 50%;
    width: var(--deck-card-width);
    height: calc(var(--deck-card-width) * 1.5);
    transform-origin: center 65%;
    transform: translateX(calc(-50% + var(--deck-offset) * var(--deck-spread)))
        translateY(calc(var(--deck-depth) * 10px)) rotateY(calc(var(--deck-offset) * -10deg))
        rotateZ(calc(var(--deck-offset) * 3deg)) scale(calc(1 - var(--deck-depth) * 0.1));
    opacity: calc(1 - var(--deck-depth) * 0.18);
    filter: blur(calc(var(--deck-depth) * 1.6px)) saturate(calc(1 - var(--deck-depth) * 0.12));
    /* z-index follows the focused card instantly; animating it would let side cards cover the main one. */
    transition: transform 0.7s var(--deck-easing), opacity 0.7s var(--deck-easing), filter 0.7s var(--deck-easing);
    will-change: transform, opacity, filter;
}
.character-deck--opening .character-deck__item { animation: character-deck-open 0.75s var(--deck-easing) both; }
@keyframes character-deck-open {
    from { transform: translateX(-50%) translateY(16px) rotateY(0deg) rotateZ(0deg) scale(0.92); }
}
.character-deck__stage.is-dragging { cursor: grabbing; }
.character-deck__stage.is-dragging .character-deck__item { transition: none; }
.character-deck__stage.is-importing { overflow: hidden; }
.character-deck__stage.is-importing .character-deck__item.is-focused { transition: none; }
.character-deck-enter-from,
.character-deck-leave-to { opacity: 0; }
.character-deck-leave-active { pointer-events: none; }

.character-card--deck {
    height: 100%;
    content-visibility: visible;
    border: 0;
    border-radius: 22px;
    background: #1e1e28;
    box-shadow: 0 18px 38px -16px rgba(10, 10, 25, 0.5);
    transition: box-shadow 0.7s var(--deck-easing);
}
.is-focused > .character-card--deck { box-shadow: 0 30px 60px -22px rgba(10, 10, 25, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.character-card--deck::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 30;
    border: 1px solid rgba(10, 10, 25, 0.4);
    border-radius: inherit;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.38), inset 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px rgba(10, 10, 25, 0.24);
    pointer-events: none;
}
.character-deck__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 112px;
    font-weight: 800;
    background: radial-gradient(ellipse at 25% 15%, #9a9ab8, transparent 65%), linear-gradient(145deg, #4a4a66, #1c1f4a);
}

.character-card--deck .character-card-name {
    display: -webkit-box;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.35;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.character-card--deck > .absolute.bottom-0 { padding: 22px 18px; }
.character-card--deck .text-\[8px\] { font-size: 10px; }
.character-card--deck button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: rgba(12, 12, 24, 0.4); }
.character-card--deck button:hover { background: rgba(12, 12, 24, 0.72); }
.character-card--deck > .absolute.top-3.right-3 { transition: opacity var(--dur-3) ease; }
.character-deck__item:not(.is-focused) .character-card--deck > .absolute.top-3.right-3 { opacity: 0; }
.character-deck__peek { position: absolute; inset: 0; width: 100%; border-radius: 22px; cursor: pointer; }
.character-deck__peek:focus-visible { outline: 3px solid rgb(var(--primary-400)); outline-offset: 3px; }

.character-deck__navigation { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 20px; align-items: center; width: min(100%, 360px); margin: 0 auto; padding: 0 16px; }
.character-deck__arrow,
.character-deck__enter { display: flex; align-items: center; justify-content: center; height: 46px; border: 1px solid var(--glass-edge); }
.character-deck__arrow {
    border-radius: 50%;
    background: var(--glass-bg-strong);
    color: var(--c-text-2);
    box-shadow: var(--glass-highlight), var(--shadow-2);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: transform var(--dur-3) var(--ease-spring), background-color var(--dur-2) ease, color var(--dur-2) ease;
}
.character-deck__arrow svg { width: 21px; height: 21px; }
.character-deck__arrow:hover:not(:disabled) { color: var(--c-accent-text); }
.character-deck__arrow:active:not(:disabled) { transform: scale(0.9); }
.character-deck__enter {
    gap: 18px;
    border-color: rgba(255, 255, 255, 0.25);
    border-radius: var(--r-lg);
    background: var(--deck-button-bg, rgb(var(--primary-600)));
    color: var(--deck-button-text, #fff);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    box-shadow: 0 10px 24px -10px rgba(10, 10, 25, 0.45), inset 0 1px rgba(255, 255, 255, 0.18);
    transition: transform var(--dur-3) var(--ease-spring), filter var(--dur-2) ease, background-color 0.7s var(--deck-easing), color 0.7s var(--deck-easing);
}
.character-deck__enter svg { width: 18px; height: 18px; transition: transform var(--dur-3) var(--ease-spring); }
.character-deck__enter:hover:not(:disabled) { filter: brightness(1.08); }
.character-deck__enter:active:not(:disabled) { transform: scale(0.97); }
.character-deck__navigation button:disabled { opacity: 0.45; cursor: default; }

@media (max-width: 767px) {
    .character-deck { --deck-card-width: min(84cqw, 380px, max(220px, calc((100dvh - 250px) / 1.5))); --deck-spread: 44%; }
    .character-deck__stage { margin-inline: -1rem; }
    .character-deck__backdrop img { filter: blur(25px) saturate(1.05); }
    .character-deck__navigation { gap: 16px; max-width: 340px; margin-top: 12px; }
    .character-card--deck > .absolute.bottom-0 { padding: 18px 14px; }
}

/* ==========================================================================
   Story route map
   ========================================================================== */

.story-route-modal-body { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 20px 24px 24px; overflow: hidden; background: var(--c-surface); }

.story-route-map-panel { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }

.story-route-map-scroll {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    background: rgb(var(--gray-50));
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.story-route-map-scroll.is-dragging,
.story-route-map-scroll.is-dragging * { cursor: grabbing !important; }
.story-route-map-scroll.is-single-route { align-items: center; justify-content: center; }

.story-route-canvas {
    position: relative;
    flex: 0 0 auto;
    margin: 0 auto;
    background-color: rgb(var(--gray-50));
    background-image: radial-gradient(circle, rgb(var(--gray-400) / 0.3) 1px, transparent 1px);
    background-size: 20px 20px;
}

.story-route-links { position: absolute; inset: 0; pointer-events: none; }
.story-route-link { fill: none; stroke: rgb(var(--gray-300)); stroke-width: 2; stroke-linecap: round; transition: stroke var(--dur-2) ease, stroke-width var(--dur-2) ease; }
.story-route-link.is-active { stroke: rgb(var(--primary-300)); stroke-width: 2.5; }
.story-route-link.is-selected { stroke: rgb(var(--primary-600)); stroke-width: 3; }

.story-route-node {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 124px;
    height: 64px;
    padding: 9px 10px;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    background: var(--c-surface);
    color: var(--c-text-2);
    text-align: center;
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) ease, background-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.story-route-node:hover { z-index: 2; border-color: rgb(var(--primary-300)); box-shadow: var(--shadow-2); }
.story-route-node:focus-visible { outline: 3px solid rgb(var(--primary-500) / 0.25); outline-offset: 3px; }
.story-route-node.is-on-route { border-color: rgb(var(--primary-200)); }
.story-route-node.is-selected { z-index: 1; border-color: rgb(var(--primary-600)); background: var(--c-accent-soft); box-shadow: 0 12px 28px -10px rgb(var(--primary-600) / 0.4); }

.story-route-node-checkpoint {
    position: absolute;
    top: 0;
    left: 50%;
    width: 12px;
    height: 12px;
    border: 2px solid var(--c-surface);
    border-radius: 3px;
    background: rgb(var(--gray-300));
    box-shadow: 0 0 0 1px rgb(var(--gray-300));
    transform: translate(-50%, -50%) rotate(45deg);
    transition: background-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.story-route-node.is-on-route .story-route-node-checkpoint { background: rgb(var(--primary-400)); box-shadow: 0 0 0 1px rgb(var(--primary-400)); }
.story-route-node:is(.is-on-selected-route, .is-selected) .story-route-node-checkpoint { background: rgb(var(--primary-600)); box-shadow: 0 0 0 1px rgb(var(--primary-600)); }
.story-route-node.is-selected .story-route-node-checkpoint { box-shadow: 0 0 0 1px rgb(var(--primary-600)), 0 0 0 5px rgb(var(--primary-600) / 0.15); }

.story-route-node-copy { display: flex; flex: 1; flex-direction: column; align-items: center; width: 100%; min-width: 0; overflow: hidden; }
.story-route-node-type { color: var(--c-text-4); font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: 0.12em; }
.story-route-node-copy strong { display: block; width: 100%; max-width: 100%; overflow: hidden; color: var(--c-text); font-size: 14px; font-weight: 800; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.story-route-node-type + strong { margin-top: 4px; }
.story-route-node-copy small { margin-top: 4px; overflow: hidden; color: var(--c-text-3); font-size: 10px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.story-route-node-current { position: absolute; top: 8px; right: 8px; padding: 3px 6px; border-radius: 999px; background: rgb(var(--primary-600)); color: #fff; font-size: 9px; font-weight: 800; line-height: 1; }

.story-route-actions { display: flex; flex-wrap: nowrap; flex-shrink: 0; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 14px; }

.story-route-enter-button,
.story-route-edit-button,
.story-route-delete-button {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    color: var(--c-accent-text);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: var(--shadow-1);
    transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-2) var(--ease-out);
}
.story-route-delete-button { color: rgb(var(--red-text-600, var(--red-600))); }
:is(.story-route-enter-button, .story-route-edit-button):hover:not(:disabled) { border-color: var(--c-accent-edge); background: var(--c-accent-soft); }
.story-route-delete-button:hover:not(:disabled) { border-color: rgb(var(--red-300)); background: var(--c-danger-soft); }
:is(.story-route-enter-button, .story-route-edit-button, .story-route-delete-button):active:not(:disabled) { transform: scale(0.97); }
:is(.story-route-enter-button, .story-route-edit-button, .story-route-delete-button):disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 640px) {
    .story-route-modal-body { padding: 14px; }
    .story-route-actions { width: 100%; }
    .story-route-actions button { flex: 1; min-width: 0; height: 32px; padding: 0 10px; font-size: 12px; }
}

/* ==========================================================================
   Pointer-only hover motion (taps on touch screens never leave things lifted)
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
    /* :where keeps hover weaker than each control's :active press feedback. */
    :where(.modal-primary-button, .settings-icon-button, .settings-create-button):hover { transform: translateY(-1px); }
    :where(.character-deck__arrow, .character-deck__enter):hover:not(:disabled),
    .story-route-node:hover { transform: translateY(-2px); }
    .character-deck__enter:hover:not(:disabled) svg { transform: translateX(4px); }
    .character-card--deck button:hover { transform: scale(1.06); }
    .usage-row:hover { background: rgb(var(--gray-500) / 0.05); }
    .choice-card:hover .choice-card__icon { transform: scale(1.1) rotate(-4deg); }
    .choice-card:hover::after { transform: translateX(2px) rotate(45deg); }
    .generated-image-reroll:hover { transform: rotate(-30deg) scale(1.08); }
}

/* ==========================================================================
   Layout: desktop message column, mobile viewport & performance
   ========================================================================== */

@media (min-width: 769px) {
    .standard-message-row,
    .immersive-message-row { justify-content: center !important; }
    .centered-message-shell { width: 50vw; max-width: 50vw !important; }
    .immersive-message-shell { justify-content: center; }
    .immersive-message-column { width: 100%; align-items: flex-start !important; }
    .immersive-message-shell.flex-row-reverse .immersive-message-column { align-items: flex-end !important; }
    .immersive-message-column > .group:not(.message-edit-group) { width: fit-content; max-width: 100%; }
    .immersive-message-column > .group.w-full { width: 100%; }
    .immersive-message-column .active-tool-waiting { width: fit-content; min-width: 9.5rem; max-width: 100%; margin-inline: auto; }
}

@media (max-width: 768px) {
    .immersive-message-row > .immersive-message-shell { max-width: 100%; }

    html, body, #app {
        height: var(--app-visual-height) !important;
        min-height: 0 !important;
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    .app-main,
    .chat-view-root {
        min-height: 0 !important;
        height: var(--app-visual-height) !important;
    }

    .char-bg-blur {
        inset: -1rem -1rem auto !important;
        height: calc(var(--chat-bg-height) + 2rem) !important;
        background-position: center center !important;
        background-size: cover !important;
        filter: blur(2px) !important;
        transition: none !important;
        backface-visibility: hidden;
        contain: paint;
    }

    .mobile-keyboard-active :is(.app-main, .chat-view-root, .input-area-mobile, .input-island, .char-bg-blur) {
        transition: none !important;
        animation: none !important;
    }
    .mobile-keyboard-active .char-bg-blur { will-change: auto !important; }

    ::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

    /* Live blur is the most expensive effect on phones; trade it for denser fills. */
    * {
        scrollbar-width: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    [class*="blur-"]:not(.char-bg-blur) { filter: none !important; }

    :is(.msg-name-tag, .typing-timer-badge) { background: var(--glass-bg-strong); }
    :is(.desc-panel, .input-island) { background: var(--c-surface) !important; }
    :is(.app-navigation-panel, .app-nav-trigger--embedded) { background: linear-gradient(150deg, var(--glass-sheen), transparent 55%), var(--c-surface); }
    .desc-panel-overlay { background-color: rgba(0, 0, 0, 0.14) !important; }

    .input-area-mobile {
        bottom: var(--keyboard-inset) !important;
        border-top: none !important;
        background-color: transparent !important;
    }
    .island-button { width: 2.25rem; height: 2.25rem; }
}