@font-face {
    font-family: "Lato";
    src: url("/bundles/ruleguidecontao/assets/fonts/lato/Lato-100.woff2") format("woff2");
    font-style: normal;
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: "Lato";
    src: url("/bundles/ruleguidecontao/assets/fonts/lato/Lato-200.woff2") format("woff2");
    font-style: normal;
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: "Lato";
    src: url("/bundles/ruleguidecontao/assets/fonts/lato/Lato-300.woff2") format("woff2");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Lato";
    src: url("/bundles/ruleguidecontao/assets/fonts/lato/Lato-400.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Lato";
    src: url("/bundles/ruleguidecontao/assets/fonts/lato/Lato-500.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Lato";
    src: url("/bundles/ruleguidecontao/assets/fonts/lato/Lato-600.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Lato";
    src: url("/bundles/ruleguidecontao/assets/fonts/lato/Lato-700.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Merriweather";
    src: url("/bundles/ruleguidecontao/assets/fonts/merriweather/Merriweather-Variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 300 700;
    font-stretch: 75% 125%;
    font-display: swap;
}

@font-face {
    font-family: "Merriweather";
    src: url("/bundles/ruleguidecontao/assets/fonts/merriweather/Merriweather-VariableItalic.woff2") format("woff2");
    font-style: italic;
    font-weight: 300 700;
    font-stretch: 75% 125%;
    font-display: swap;
}

@font-face {
    font-family: "Merriweather";
    src: url("/bundles/ruleguidecontao/assets/fonts/merriweather/Merriweather-800.woff2") format("woff2");
    font-style: normal;
    font-weight: 800;
    font-stretch: 100%;
    font-display: swap;
}

:root {
    --font-copy: "Lato", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Merriweather", Georgia, "Times New Roman", serif;
    --chat-content-width: 700px;
    --chat-frame-width: 1024px;
    --entity-drawer-inline-size: min(410px, calc(100vw - 56px));
    --entity-drawer-motion-duration: .34s;
    --entity-drawer-motion-easing: cubic-bezier(.2, .72, .2, 1);
    --rule-guide-account-trigger-radius: 999px;
    color-scheme: light;
    --bg: #a3cbdf;
    --surface: #e5ded4;
    --surface-strong: #f1eadc;
    --ink: #282f2c;
    --muted: #687062;
    --line: #b8aa7f;
    --accent: #5f9094;
    --accent-dark: #3f6668;
    --entity-title-ink: #315f65;
    --table-surface: rgba(255, 253, 247, .9);
    --table-surface-alt: rgba(231, 239, 232, .68);
    --table-head: rgba(213, 230, 225, .94);
    --table-sticky: #f8f5ec;
    --table-hover: rgba(196, 222, 215, .54);
    --stat-orbit-surface: #fbfaf4;
    /* Day mode hover: a light, warm sage reads friendlier than the former
       muted grey-green while retaining enough contrast for active chips. */
    --answer: #e7edd6;
    --question: #6da6c6;
    --shadow: 0 16px 42px rgba(40, 47, 44, .16);
    --cursor-star-1: #f3c85d;
    --cursor-star-2: #f6e1a4;
    --cursor-star-3: #8cc8d1;
    --cursor-star-4: #5f9094;
    --greeting-sheen-base: #3f6668;
    --greeting-sheen-mid: #8ebbc0;
    --greeting-sheen-highlight: #fff3c9;
    --viewport-overscroll-top: #6da6c6;
    --viewport-overscroll-bottom: #5f9094;
    --chat-logo-tone: brightness(0) saturate(100%) invert(96%) sepia(7%) saturate(250%) hue-rotate(88deg) brightness(103%) contrast(96%);
}

body.is-evening-mode {
    color-scheme: light;
    --bg: #d97861;
    --surface: #eadbd2;
    --surface-strong: #fff0dc;
    --ink: #3d2934;
    --muted: #785965;
    --line: #bd826f;
    --accent: #b95867;
    --accent-dark: #70405f;
    --entity-title-ink: #70405f;
    --table-surface: rgba(255, 244, 228, .92);
    --table-surface-alt: rgba(244, 214, 203, .72);
    --table-head: rgba(237, 184, 161, .9);
    --table-sticky: #fff0dc;
    --table-hover: rgba(239, 190, 169, .62);
    --stat-orbit-surface: #fff3df;
    --answer: #f0c9ad;
    --question: #c85f69;
    --shadow: 0 18px 48px rgba(70, 35, 61, .23);
    --cursor-star-1: #ffe09a;
    --cursor-star-2: #f29471;
    --cursor-star-3: #d591bd;
    --cursor-star-4: #8e5c91;
    --greeting-sheen-base: #70405f;
    --greeting-sheen-mid: #e98972;
    --greeting-sheen-highlight: #fff0ad;
    --viewport-overscroll-top: #684d86;
    --viewport-overscroll-bottom: #d86f61;
    --chat-logo-tone: brightness(0) saturate(100%) invert(91%) sepia(33%) saturate(757%) hue-rotate(337deg) brightness(106%) contrast(103%);
}

body.is-dark-mode {
    color-scheme: dark;
    --bg: #1d2b2a;
    --surface: #263633;
    --surface-strong: #30413d;
    --ink: #eee7d7;
    --muted: #bfc2ae;
    --line: #63705f;
    --accent: #75a7a8;
    --accent-dark: #bdd7d0;
    --entity-title-ink: #c8e0d9;
    --table-surface: #202a27;
    --table-surface-alt: #273431;
    --table-head: #38514c;
    --table-sticky: #2d3d39;
    --table-hover: #344944;
    --stat-orbit-surface: #344640;
    --answer: #394b3e;
    --question: #416f7d;
    --shadow: 0 16px 42px rgba(0, 0, 0, .32);
    --cursor-star-1: #d9f3ea;
    --cursor-star-2: #75a7a8;
    --cursor-star-3: #a8d7c6;
    --cursor-star-4: #d7d99b;
    --greeting-sheen-base: #bdd7d0;
    --greeting-sheen-mid: #75a7a8;
    --greeting-sheen-highlight: #f2f7df;
    --viewport-overscroll-top: #527885;
    --viewport-overscroll-bottom: #1d2b2a;
    --chat-logo-tone: brightness(0) saturate(100%) invert(89%) sepia(12%) saturate(340%) hue-rotate(105deg) brightness(100%) contrast(92%);
}

body.is-tavern-mode {
    color-scheme: dark;
    --bg: #34231f;
    --surface: #d1ae7b;
    --surface-strong: #ead2a2;
    --ink: #3a271e;
    --muted: #705039;
    --line: #9c744d;
    --accent: #9a542f;
    --accent-dark: #663722;
    --entity-title-ink: #6b3824;
    --table-surface: #f2dfbb;
    --table-surface-alt: #ead1a3;
    --table-head: #d7b778;
    --table-sticky: #e4c58d;
    --table-hover: #e1bf82;
    --stat-orbit-surface: #efd3a0;
    --answer: #d9ba82;
    --question: #ad6037;
    --shadow: 0 18px 48px rgba(24, 13, 13, .36);
    --cursor-star-1: #ffd87a;
    --cursor-star-2: #f0a657;
    --cursor-star-3: #f8e0ab;
    --cursor-star-4: #c97849;
    --greeting-sheen-base: #663722;
    --greeting-sheen-mid: #c57746;
    --greeting-sheen-highlight: #ffe3a6;
    --viewport-overscroll-top: #70402f;
    --viewport-overscroll-bottom: #1f1a1b;
    --chat-logo-tone: brightness(0) saturate(100%) invert(89%) sepia(28%) saturate(620%) hue-rotate(344deg) brightness(102%) contrast(91%);
}

body.is-dark-mode .chat-panel {
    background: rgba(38, 54, 51, .84);
}

body.is-dark-mode .topbar {
    background: rgba(37, 55, 53, .78);
    border-bottom-color: rgba(112, 143, 133, .3);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: linear-gradient(180deg, #6da6c6 0, #a3cbdf 34%, #8fb9b6 68%, #5f9094 100%);
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--ink);
    background: linear-gradient(180deg, #6da6c6 0, #a3cbdf 34%, #8fb9b6 68%, #5f9094 100%);
    /* Scroll with the document. Fixed page gradients cause costly repainting
       behind translucent UI on mobile; night already uses this cheaper path. */
    background-attachment: scroll;
    font-family: var(--font-copy);
    font-optical-sizing: auto;
    line-height: 1.65;
}

button,
select,
textarea {
    font: inherit;
}

.app-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: stretch;
    padding: 0 24px;
}

.chat-panel {
    width: min(var(--chat-frame-width), 100%);
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    display: grid;
    grid-template-rows: 1fr;
    overflow: visible;
    background: rgb(234 232 229 / 45%);
    border-left: 1px solid rgba(95, 144, 148, .38);
    border-right: 1px solid rgba(95, 144, 148, .38);
    border-radius: 0;
    box-shadow: var(--shadow);
}

.topbar {
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: var(--chat-frame-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 8px 24px;
    border-bottom: 1px solid rgba(184, 170, 127, .32);
    background: rgba(255, 255, 255, .76);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
    backdrop-filter: blur(16px) saturate(1.08);
    box-shadow: 0 8px 18px rgba(64, 82, 78, .055);
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    transition: transform .34s cubic-bezier(.22, .82, .22, 1), opacity .1s ease .16s, border-color .1s ease .16s;
}

/* Experimental scroll affordance: the class is deliberately self-contained,
   so removing this rule and the matching JS block fully reverts the behavior. */
.topbar.is-scroll-hidden {
    pointer-events: none;
    opacity: 0;
    border-bottom-color: transparent;
    transform: translate3d(0, calc(-100% - 3px), 0);
    transition: transform .34s cubic-bezier(.22, .82, .22, 1), opacity .08s ease, border-color .08s ease;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-self: center;
    gap: 0;
    color: var(--accent-dark);
    font-weight: 700;
    letter-spacing: .01em;
}

.brand-logo {
    /* Temporary: keep the asset in the markup so the next logo can simply
       replace it, without leaving the current mark visible meanwhile. */
    display: none;
    width: min(320px, calc(100vw - 144px));
    height: 54px;
    object-fit: contain;
    object-position: center;
}

.brand-symbol {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #fff;
    background: var(--accent);
    border-radius: 6px;
    font-size: 11px;
}

.brand-name {
    font-size: 15px;
}

.topbar-actions {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 8px;
}

.chat-reset {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: var(--accent-dark);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
}

.auth-toggle,
.collection-toggle {
    display: inline-grid;
    width: 36px;
    height: 34px;
    place-items: center;
    padding: 0;
    color: #fff;
    background: #527f88;
    border: 1px solid #2d5964;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 5px rgba(33, 72, 78, .14);
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.auth-toggle {
    width: auto;
    min-width: 64px;
    max-width: 160px;
    padding: 0 12px;
    border-radius: var(--rule-guide-account-trigger-radius, 999px);
    font-size: 12px;
    font-weight: 700;
}

.auth-toggle-label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar .chat-reset {
    display: none;
}

.chat-reset:hover {
    background: rgba(95, 144, 148, .1);
}

.auth-toggle:hover,
.collection-toggle:hover {
    background: #456e75;
    border-color: #244d57;
    transform: translateY(-1px);
}

.auth-toggle.is-authenticated {
    color: #fff;
    background: #527f88;
    border-color: #2d5964;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 5px rgba(33, 72, 78, .14);
}

.collection-toggle:disabled {
    cursor: not-allowed;
    opacity: .42;
}

.collection-toggle:disabled:hover {
    background: #527f88;
    border-color: #2d5964;
    transform: none;
}

.auth-toggle span,
.collection-toggle span {
    transform: translateY(-1px);
}

.collection-toggle.is-hidden {
    display: none !important;
}

body.collection-menu-open {
    overflow: hidden;
}

.collection-panel-backdrop {
    position: fixed;
    z-index: 129;
    inset: 0;
    padding: 0;
    background: transparent;
    border: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease;
}

body.collection-menu-open .collection-panel-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.auth-popover {
    position: fixed;
    z-index: 54;
    top: 76px;
    right: max(16px, calc((100vw - 1120px) / 2 + 16px));
    width: min(360px, calc(100vw - 32px));
    padding: 14px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(35, 61, 69, .16), 0 1px 0 rgba(255, 255, 255, .9) inset;
}

.auth-popover.is-hidden {
    display: none;
}

.auth-popover.is-authenticated {
    width: min(148px, calc(100vw - 20px));
    padding: 5px;
    box-shadow: 0 7px 17px rgba(50, 40, 25, .12);
}

.auth-popover.is-authenticated .auth-popover-header {
    display: none;
}

.auth-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.auth-popover-header strong {
    color: var(--accent-dark);
    font-size: 16px;
    font-weight: 700;
}

.auth-close {
    width: 28px;
    height: 28px;
    color: var(--muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 12px;
    padding: 0;
    overflow: hidden;
    background: rgba(191, 215, 210, .38);
    border: 1px solid rgba(130, 190, 181, .34);
    border-radius: 999px;
}

.auth-tabs.is-hidden {
    display: none;
}

.auth-tab {
    min-height: 34px;
    color: var(--accent-dark);
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    font-weight: 700;
}

.auth-tab + .auth-tab {
    border-left: 1px solid rgba(130, 190, 181, .34);
}

.auth-tab.is-active {
    background: rgba(255, 255, 255, .74);
    box-shadow: none;
}

.auth-form {
    display: grid;
    gap: 10px;
}

.auth-form.is-hidden {
    display: none;
}

.auth-form label {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.auth-form .auth-remember {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    color: var(--accent-dark);
    font-size: 13px;
    font-weight: 700;
}

.auth-form .auth-remember input {
    width: 16px;
    height: 16px;
    padding: 0;
}

.auth-form input {
    min-width: 0;
    min-height: 40px;
    padding: 9px 10px;
    color: var(--ink);
    background: #fcfdfc;
    border: 1px solid #b8d2d2;
    border-radius: 8px;
    font-size: 15px;
}

.auth-form button[type="submit"] {
    min-height: 40px;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(40, 97, 95, .12);
}

.auth-forgot-open,
.auth-mode-back {
    justify-self: start;
    padding: 2px 0;
    color: var(--accent-dark);
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(40, 97, 95, .35);
    text-underline-offset: 3px;
}

.auth-form-hint {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.auth-form input:focus {
    outline: 0;
    border-color: #5d9ca7;
    box-shadow: 0 0 0 3px rgba(93, 156, 167, .16);
}

.auth-message {
    min-height: 18px;
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.auth-message.is-error {
    color: #7a3b30;
}

.auth-message.is-success {
    color: #166c4a;
}

.auth-account {
    display: grid;
    padding: 2px 0;
}

.auth-account-actions {
    display: grid;
    gap: 4px;
}

.auth-logout,
.auth-editorial-link,
.auth-general-report-open {
    min-height: 34px;
    color: var(--accent-dark);
    background: var(--answer);
    border: 1px solid #bfd7d2;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
}

.auth-popover.is-authenticated .auth-account {
    padding: 0;
}

.auth-popover.is-authenticated.is-general-report-open {
    width: min(360px, calc(100vw - 20px));
    padding: 14px;
}

.auth-account.is-reporting .auth-account-actions {
    display: none;
}

/* The compact account menu has no status copy. Keeping the generic message
   slot visible here used to leave an empty strip below “Abmelden”. */
.auth-popover.is-authenticated .auth-message {
    display: none;
    min-height: 0;
    margin: 0;
}

.auth-popover.is-authenticated .auth-editorial-link,
.auth-popover.is-authenticated .auth-general-report-open {
    min-height: 31px;
    padding: 4px 9px;
    color: var(--accent-dark);
    background: rgba(255, 255, 255, .52);
    border: 1px solid rgba(95, 144, 148, .28);
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    opacity: .82;
    text-decoration: none;
}

.auth-popover.is-authenticated .auth-logout {
    min-height: 31px;
    padding: 4px 9px;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent-dark);
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    opacity: 1;
    box-shadow: 0 2px 5px color-mix(in srgb, var(--accent-dark) 18%, transparent);
}

.auth-popover.is-authenticated .auth-general-report-open {
    min-height: 27px;
    padding: 3px 8px;
    justify-content: flex-start;
    color: var(--muted);
    background: transparent;
    border-color: transparent;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: .72;
}

.auth-popover.is-authenticated .auth-editorial-link {
    min-height: 27px;
    padding: 3px 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--muted);
    background: transparent;
    border: 1px solid rgba(95, 144, 148, .34);
    border-radius: 999px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    opacity: .78;
}

.auth-popover.is-authenticated .auth-logout:hover,
.auth-popover.is-authenticated .auth-logout:focus-visible,
.auth-popover.is-authenticated .auth-editorial-link:hover,
.auth-popover.is-authenticated .auth-editorial-link:focus-visible,
.auth-popover.is-authenticated .auth-general-report-open:hover,
.auth-popover.is-authenticated .auth-general-report-open:focus-visible {
    opacity: 1;
}

.auth-popover.is-authenticated .auth-logout:hover,
.auth-popover.is-authenticated .auth-logout:focus-visible {
    color: #fff;
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

.auth-popover.is-authenticated .auth-general-report-open:hover,
.auth-popover.is-authenticated .auth-general-report-open:focus-visible {
    color: var(--accent-dark);
    background: rgba(95, 144, 148, .08);
    border-color: transparent;
}

.auth-popover.is-authenticated .auth-editorial-link:hover,
.auth-popover.is-authenticated .auth-editorial-link:focus-visible {
    color: var(--accent-dark);
    background: rgba(95, 144, 148, .08);
    border-color: rgba(95, 144, 148, .5);
}

.auth-general-report-form {
    display: grid;
    gap: 10px;
}

.auth-general-report-form.is-hidden {
    display: none;
}

.auth-general-report-title {
    color: var(--accent-dark);
    font-size: 15px;
    font-weight: 700;
}

.auth-general-report-form label {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.auth-general-report-form select,
.auth-general-report-form textarea {
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    color: var(--ink);
    background: #fcfdfc;
    border: 1px solid #b8d2d2;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 400;
}

.auth-general-report-form select {
    height: 40px;
}

.auth-general-report-form textarea {
    min-height: 104px;
    resize: vertical;
}

.auth-general-report-form textarea::placeholder {
    font-weight: 400;
}

.auth-general-report-form :is(select, textarea):focus {
    outline: 0;
    border-color: #5d9ca7;
    box-shadow: 0 0 0 3px rgba(93, 156, 167, .16);
}

.auth-general-report-controls {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
}

.auth-general-report-controls button {
    min-height: 34px;
    padding: 6px 10px;
    color: var(--accent-dark);
    background: rgba(255, 255, 255, .62);
    border: 1px solid rgba(95, 144, 148, .3);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.auth-general-report-controls button[type="submit"] {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 700;
}

.auth-general-report-controls button:disabled {
    cursor: wait;
    opacity: .58;
}

.auth-general-report-status {
    min-height: 17px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

.eyebrow {
    margin: 0 0 4px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.1;
}

.status-pill {
    min-width: 96px;
    padding: 8px 10px;
    color: var(--accent-dark);
    background: var(--answer);
    border: 1px solid #bfd7d2;
    border-radius: 999px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.controls {
    display: flex;
    gap: 12px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--line);
}

.controls label {
    display: grid;
    gap: 6px;
    min-width: 160px;
}

.controls span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

select {
    height: 38px;
    padding: 0 34px 0 10px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.messages {
    width: min(100%, calc(var(--chat-content-width) + 48px));
    min-height: 0;
    padding: 80px 24px calc(194px + var(--prompt-suggestions-space, 0px));
    margin: 140px auto 0;
    transition: padding-bottom .16s ease;
}

.message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 18px;
}

.chat-logo-message {
    align-items: center;
    margin-bottom: 4px;
}

.chat-intro-logo-wrap {
    position: relative;
    display: block;
    width: clamp(236px, 70vw, 286px);
    margin-bottom: clamp(-154px, -37.7vw, -127px);
    transform: translateY(-50%);
}

@media (max-width: 767px) {
    .chat-intro-logo-wrap {
        width: clamp(224px, 66.5vw, 272px);
        margin-bottom: clamp(-146px, -35.8vw, -121px);
    }
}

.chat-intro-logo {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: auto;
    filter: var(--chat-logo-tone) drop-shadow(0 3px 7px rgba(24, 43, 45, .38));
    transition: filter .4s ease;
}

/* Give only the large "Rule Guide" lettering a restrained daytime petrol
   tint. The handwritten Mighty mark and Dirty Prototype stay untouched. */
.chat-logo-day-rule-color {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(145deg, rgba(88, 177, 191, .68), rgba(151, 213, 220, .56));
    clip-path: inset(38% 0 25% 34%);
    -webkit-mask: url("/files/Daten/1_Logos/rule-guide-hauptlogo.svg") center / contain no-repeat;
    mask: url("/files/Daten/1_Logos/rule-guide-hauptlogo.svg") center / contain no-repeat;
    opacity: 0;
    transition: opacity .4s ease;
}

body.is-dark-mode .chat-logo-day-rule-color {
    background: linear-gradient(145deg, rgba(111, 186, 181, .64), rgba(177, 220, 209, .5));
    opacity: 0;
}

body.is-tavern-mode .chat-logo-day-rule-color {
    background: linear-gradient(145deg, rgba(194, 105, 58, .68), rgba(235, 168, 91, .52));
    opacity: .28;
}

.chat-intro-logo-wrap::before,
.chat-intro-logo-wrap::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    content: "";
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 260% 100%;
    -webkit-mask: url("/files/Daten/1_Logos/rule-guide-hauptlogo.svg") center / contain no-repeat;
    mask: url("/files/Daten/1_Logos/rule-guide-hauptlogo.svg") center / contain no-repeat;
    opacity: 0;
}

/* The first, restrained light pass belongs only to Mighty Rule Guide. */
.chat-intro-logo-wrap::before {
    background-image: linear-gradient(
        106deg,
        transparent 36%,
        rgba(255, 255, 255, .12) 43%,
        rgba(255, 255, 255, .96) 49%,
        rgba(210, 246, 235, .32) 55%,
        transparent 63%
    );
    clip-path: inset(0 0 27% 0);
}

/* Dirty prototype follows later with a quicker, slightly cheekier colour wink. */
.chat-intro-logo-wrap::after {
    background-image: linear-gradient(
        101deg,
        transparent 28%,
        rgba(255, 217, 123, .16) 37%,
        #fff2a8 44%,
        #a8f1df 50%,
        #ffd0a0 56%,
        transparent 68%
    );
    clip-path: inset(70% 0 0 0);
}

body.is-logo-shimmer-ready .chat-intro-logo-wrap::before {
    animation: chat-logo-shimmer-main 8s linear infinite;
}

body.is-logo-shimmer-ready .chat-intro-logo-wrap::after {
    animation: chat-logo-shimmer-dirty 8s linear infinite;
}

.chat-logo-shooting-star {
    position: absolute;
    z-index: 3;
    top: 40%;
    left: -42%;
    width: 82px;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(232, 132, 69, .12) 32%,
        rgba(255, 176, 105, .62) 70%,
        #ffe1b2 100%
    );
    border-radius: 999px;
    box-shadow: 0 0 11px rgba(242, 145, 78, .7), 0 0 18px rgba(255, 196, 126, .34);
    opacity: 0;
    pointer-events: none;
    transform: rotate(20deg) scaleX(.25);
    transform-origin: right center;
}

body.is-logo-shimmer-ready .chat-logo-shooting-star {
    animation: chat-logo-shooting-star 8s linear infinite;
}

@keyframes chat-logo-shimmer-main {
    0% {
        background-position: 155% 0;
        opacity: 0;
    }
    2% {
        opacity: .9;
    }
    32% {
        background-position: -65% 0;
        opacity: .9;
    }
    36%, 100% {
        background-position: -65% 0;
        opacity: 0;
    }
}

@keyframes chat-logo-shimmer-dirty {
    0%, 11% {
        background-position: 160% 0;
        opacity: 0;
        transform: rotate(0deg) scale(1);
    }
    13% {
        opacity: .95;
        transform: rotate(-1.2deg) scale(1.015);
    }
    49% {
        background-position: -75% 0;
        opacity: .88;
        transform: rotate(1deg) scale(1.025);
    }
    53%, 100% {
        background-position: -75% 0;
        opacity: 0;
        transform: rotate(0deg) scale(1);
    }
}

@keyframes chat-logo-shooting-star {
    0%, 13% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(20deg) scaleX(.25);
    }
    16% {
        opacity: .95;
    }
    31% {
        opacity: .72;
    }
    49% {
        opacity: .45;
        transform: translate3d(310px, 155px, 0) rotate(20deg) scaleX(1);
    }
    53%, 100% {
        opacity: 0;
        transform: translate3d(360px, 180px, 0) rotate(20deg) scaleX(1);
    }
}

body.is-effects-disabled .chat-intro-logo-wrap::before,
body.is-effects-disabled .chat-intro-logo-wrap::after,
body.is-effects-disabled .chat-logo-shooting-star {
    animation: none;
}

@media (min-width: 768px) {
    .chat-intro-logo-wrap {
        width: clamp(210px, 18vw, 240px);
        margin-bottom: clamp(-91px, -6.79vw, -79px);
        transform: translateY(-35%);
    }
}

/* Layout C: minimalist cloud dock. All declarations are Cloud-scoped; a small
   precedence guard at the end protects them from later legacy B breakpoints. */
.quick-options-drawer-toggle {
    display: none;
}

.quick-options-drawer-toggle.is-hidden {
    display: none !important;
}

body.is-chat-cloud-mode .quick-options-drawer-toggle:not(.is-hidden) {
    position: fixed;
    z-index: 76;
    display: inline-grid;
    place-items: center;
    color: #edf8f6;
    background: rgba(44, 83, 89, .88);
    border: 1px solid rgba(205, 231, 227, .34);
    box-shadow: 0 4px 14px rgba(24, 48, 52, .16);
    cursor: pointer;
    transition: opacity .16s ease, transform .2s ease, background-color .16s ease;
}

body.is-chat-cloud-mode .quick-options-drawer-toggle--right {
    top: 50%;
    right: 0;
    width: 26px;
    height: 42px;
    border-right: 0;
    border-radius: 11px 0 0 11px;
    transform: translateY(-50%);
}

body.is-chat-cloud-mode .quick-options-drawer-toggle--top {
    top: 58px;
    left: 50%;
    grid-template-columns: auto auto;
    gap: 5px;
    min-height: 25px;
    padding: 3px 9px;
    border-top: 0;
    border-radius: 0 0 11px 11px;
    font-size: 9px;
    font-weight: 700;
    transform: translateX(-50%);
}

body.is-chat-cloud-mode .quick-options-drawer-toggle:is(:hover, :focus-visible),
body.is-chat-cloud-mode .quick-options-drawer-toggle[aria-expanded="true"] {
    color: #fff;
    background: #315f67;
}

body.is-chat-cloud-mode .quick-settings.is-chat-cloud-drawer {
    position: fixed !important;
    z-index: 75 !important;
    display: flex !important;
    gap: 7px;
    margin: 0 !important;
    padding: 10px !important;
    overflow: auto !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    color: var(--ink);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border: 1px solid var(--line);
    box-shadow: 0 16px 42px rgba(24, 42, 45, .22);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    backdrop-filter: blur(18px) saturate(1.08);
    transition: opacity .18s ease, transform .24s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .24s;
}

body.is-chat-cloud-mode .quick-settings.is-chat-cloud-drawer.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
}

.mod_companion_chat.is-chat-cloud-mode[data-quick-options-placement="right"] .quick-settings.is-chat-cloud-drawer {
    top: 50%;
    right: 31px;
    bottom: auto;
    left: auto;
    flex-direction: column;
    width: min(210px, calc(100vw - 54px));
    max-height: min(70dvh, 520px);
    border-radius: 16px 4px 16px 16px;
    transform: translate(18px, -50%) scale(.97);
}

.mod_companion_chat.is-chat-cloud-mode[data-quick-options-placement="right"] .quick-settings.is-chat-cloud-drawer.is-open {
    transform: translate(0, -50%) scale(1);
}

.mod_companion_chat.is-chat-cloud-mode[data-quick-options-placement="top"] .quick-settings.is-chat-cloud-drawer {
    top: 84px;
    right: auto;
    bottom: auto;
    left: 50%;
    flex-flow: row wrap;
    justify-content: center;
    width: min(620px, calc(100vw - 20px));
    max-height: min(45dvh, 310px);
    border-radius: 14px;
    transform: translate(-50%, -14px) scale(.98);
}

.mod_companion_chat.is-chat-cloud-mode[data-quick-options-placement="top"] .quick-settings.is-chat-cloud-drawer.is-open {
    transform: translate(-50%, 0) scale(1);
}

body.is-chat-cloud-mode .quick-settings.is-chat-cloud-drawer > * {
    flex: 0 0 auto;
    min-width: 38px;
}

body.is-chat-cloud-mode .quick-settings.is-chat-cloud-drawer .chat-dock-group-toggle {
    display: none !important;
}

body.is-chat-cloud-mode .messages {
    padding-bottom: calc(190px + var(--prompt-suggestions-space, 0px));
}

body.is-chat-cloud-mode .entity-drawer-stack-handles,
body.is-chat-cloud-mode.is-chat-dock-scroll-compact .entity-drawer-stack-handles {
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 70px);
    gap: 2px;
    width: min(var(--chat-dock-stage-width, 560px), calc(100% - 24px));
    max-width: calc(100% - 24px);
    max-height: 64px;
    padding: 0 2px;
    overflow-x: hidden;
    overflow-y: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
}

body.is-chat-cloud-mode .entity-drawer-stack-handle,
body.is-chat-cloud-mode.is-chat-dock-scroll-compact .entity-drawer-stack-handle {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px;
    min-width: 0;
    max-width: 108px;
    min-height: 21px;
    height: 21px;
    padding: 2px 6px;
    color: #edf8f6;
    background: rgba(55, 96, 103, .9);
    border-color: rgba(210, 233, 230, .3);
    box-shadow: 0 1px 4px rgba(24, 48, 52, .13);
    font-size: 8px;
    line-height: 1;
}

body.is-chat-cloud-mode .entity-drawer-stack-handle.is-active {
    color: #31575d;
    background: rgba(249, 240, 220, .96);
    border-color: rgba(214, 192, 143, .9);
}

body.is-chat-cloud-mode .chat-dock-tab-icon {
    position: relative;
    width: 11px;
    height: 11px;
    overflow: visible;
    font-size: 10px;
}

body.is-chat-cloud-mode .chat-dock-tab-icon[data-spell-level]::after {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: grid;
    width: 8px;
    height: 8px;
    place-items: center;
    content: attr(data-spell-level);
    color: #fff;
    background: #824667;
    border: 1px solid rgba(255, 244, 238, .88);
    border-radius: 50%;
    font: 700 5.5px/1 var(--font-copy);
}

body.is-chat-cloud-mode .chat-dock-group-label,
body.is-chat-cloud-mode .chat-dock-stage-resize-grab,
body.is-chat-cloud-mode .chat-dock-clear {
    display: none !important;
}

body.is-chat-cloud-mode .entity-drawer.is-chat-dock-layout,
body.is-chat-cloud-mode.is-chat-dock-scroll-compact .entity-drawer.is-chat-dock-layout {
    z-index: 68;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 66px);
    width: min(calc(100% - 24px), var(--chat-content-width));
    max-width: min(calc(100% - 24px), var(--chat-content-width));
    max-height: min(58dvh, calc(100dvh - 170px));
}

.mod_companion_chat.is-chat-cloud-mode.has-chat-dock-tabs .prompt-suggestions,
.mod_companion_chat.is-chat-cloud-mode.is-chat-dock-scroll-compact.has-chat-dock-tabs .prompt-suggestions {
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 78px + var(--chat-dock-tab-height, 64px));
}

body.is-dark-mode.is-chat-cloud-mode .entity-drawer-stack-handle {
    background: rgba(31, 66, 71, .94);
}

body.is-evening-mode.is-chat-cloud-mode .entity-drawer-stack-handle {
    color: #fff4f4;
    background: rgba(91, 46, 72, .94);
    border-color: rgba(229, 167, 184, .34);
}

body.is-evening-mode.is-chat-cloud-mode .chat-dock-tab-icon[data-spell-level]::after {
    background: #9b506d;
}

body.is-tavern-mode.is-chat-cloud-mode .entity-drawer-stack-handle {
    color: #f9ebc8;
    background: rgba(101, 66, 45, .94);
    border-color: rgba(217, 187, 126, .34);
}

@media (max-width: 720px) {
    :root {
        --entity-drawer-inline-size: min(340px, calc(100vw - 52px));
    }

    body.is-chat-cloud-mode .quick-options-drawer-toggle--top {
        top: 54px;
    }

    .mod_companion_chat.is-chat-cloud-mode[data-quick-options-placement="top"] .quick-settings.is-chat-cloud-drawer {
        top: 78px;
        width: calc(100vw - 16px);
    }

    body.is-chat-cloud-mode .entity-drawer-stack-handles,
    body.is-chat-cloud-mode.is-chat-dock-scroll-compact .entity-drawer-stack-handles {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 61px);
        width: min(var(--chat-dock-stage-width, calc(100% - 16px)), calc(100% - 16px));
        max-width: calc(100% - 16px);
        max-height: 58px;
    }

    body.is-chat-cloud-mode .entity-drawer.is-chat-dock-layout,
    body.is-chat-cloud-mode.is-chat-dock-scroll-compact .entity-drawer.is-chat-dock-layout {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 57px);
        width: calc(100% - 16px);
        max-width: calc(100% - 16px);
        height: var(--chat-dock-sheet-height, min(62dvh, calc(100dvh - 132px)));
        max-height: calc(100dvh - 76px);
    }

    body.is-chat-cloud-mode .entity-drawer-stack-handle {
        max-width: 96px;
        min-height: 20px;
        height: 20px;
        padding: 2px 5px;
        font-size: 7.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-intro-logo-wrap::before,
    .chat-intro-logo-wrap::after,
    .chat-logo-shooting-star {
        animation: none;
    }
}

.message.user {
    align-items: flex-end;
}

.response-loader {
    min-height: 28px;
}

.response-loader-bubble {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 42px;
    min-height: 28px;
    padding: 8px 11px;
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.response-loader-bubble span {
    width: 5px;
    height: 5px;
    background: var(--accent);
    border-radius: 50%;
    animation: response-loader-pulse 1s ease-in-out infinite;
    opacity: .3;
}

.response-loader-bubble span:nth-child(2) {
    animation-delay: .14s;
}

.response-loader-bubble span:nth-child(3) {
    animation-delay: .28s;
}

@keyframes response-loader-pulse {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: .3;
    }

    30% {
        transform: translateY(-3px);
        opacity: .9;
    }
}

@media (prefers-reduced-motion: reduce) {
    .response-loader-bubble span {
        animation: none;
        opacity: .6;
    }
}

.bubble {
    position: relative;
    z-index: 1;
    max-width: min(var(--chat-content-width), 100%);
    min-width: 0;
    padding: 15px 18px;
    border: 1px solid var(--line);
    border-radius: 27px;
    background: var(--surface-strong);
    box-shadow: 0 4px 14px rgba(40, 47, 44, .055);
}

.bubble-actions {
    position: absolute;
    z-index: 4;
    top: 6px;
    right: 6px;
}

.bubble-actions.is-hidden {
    display: none;
}

.bubble-actions-toggle {
    display: grid;
    width: 20px;
    height: 24px;
    place-items: center;
    padding: 0;
    color: var(--accent-dark);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    opacity: .42;
}

.bubble-actions-toggle:hover,
.bubble-actions.is-open .bubble-actions-toggle {
    background: rgba(255, 255, 255, .42);
    opacity: .72;
}

.bubble-actions-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    display: none;
    min-width: 116px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(50, 40, 25, .14);
}

.bubble-actions.is-open .bubble-actions-menu {
    display: block;
}

.bubble-actions-menu button {
    width: 100%;
    padding: 7px 9px;
    color: var(--accent-dark);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
}

.bubble-actions-menu button:hover,
.bubble-actions-menu button:focus-visible {
    background: var(--answer);
}

.bubble-report-panel {
    margin-top: 14px;
    padding: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .84), rgba(239, 248, 249, .7));
    border: 1px solid rgba(117, 166, 174, .36);
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(43, 81, 84, .09), inset 0 1px 0 rgba(255, 255, 255, .7);
}

.bubble-report-panel label {
    display: grid;
    gap: 8px;
    color: var(--accent-dark);
    font-size: 13px;
    font-weight: 700;
}

.bubble-report-panel textarea {
    min-height: 92px;
    padding: 10px 12px;
    color: var(--ink);
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(95, 144, 148, .5);
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(40, 47, 44, .05);
    font-size: 13px;
    line-height: 1.4;
    resize: vertical;
}

.bubble-report-panel textarea::placeholder {
    color: color-mix(in srgb, var(--muted), transparent 18%);
}

.bubble-report-panel textarea:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 82%), inset 0 1px 2px rgba(40, 47, 44, .04);
}

.bubble-report-controls {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 12px;
}

.bubble-report-controls button {
    min-height: 36px;
    padding: 7px 13px;
    color: var(--accent-dark);
    background: #fff;
    border: 1px solid #bfd7d2;
    border-radius: 999px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.bubble-report-controls button[type="submit"] {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 5px 12px color-mix(in srgb, var(--accent), transparent 76%);
}

.bubble-report-controls button:hover:not(:disabled),
.bubble-report-controls button:focus-visible:not(:disabled) {
    transform: translateY(-1px);
}

.bubble-report-controls button[type="submit"]:hover:not(:disabled),
.bubble-report-controls button[type="submit"]:focus-visible:not(:disabled) {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

.bubble-report-controls button:disabled {
    cursor: wait;
    opacity: .7;
}

.bubble-report-status {
    min-height: 16px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.message.assistant .bubble {
    width: min(var(--chat-content-width), 100%);
}

.message.user .bubble {
    padding-top: 11px;
    padding-bottom: 11px;
    color: var(--ink);
    background: #bbdbee;
    border-color: #78a6b5;
    box-shadow: 0 5px 14px rgba(63, 102, 104, .11);
    font-weight: 600;
}

.message.assistant .bubble {
    background: rgb(255 251 245 / 97%);
    border-color: #cbbf9c;
}

.message.assistant .bubble.is-greeting {
    width: min(var(--chat-content-width), 100%);
    overflow: visible;
    padding: 8px 12px;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.message.assistant .bubble.is-greeting .bubble-actions {
    display: none;
}

.message.assistant .bubble.is-start-categories {
    width: min(var(--chat-content-width), 100%);
}

.message.assistant .bubble.is-greeting,
.message.assistant .bubble.is-start-categories {
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 721px) {
    .message.assistant .bubble.is-start-categories {
        width: min(var(--chat-content-width), 100%);
        max-width: var(--chat-content-width);
    }
}

.assistant-greeting {
    position: relative;
    display: inline-block;
    isolation: isolate;
    color: var(--accent-dark);
    font-family: var(--font-display);
    font-size: calc(18px * var(--reader-scale));
    font-weight: 700;
}

.assistant-greeting-letter {
    display: inline-block;
}

.assistant-greeting-paragraph-break {
    display: block;
    height: .12em;
}

.assistant-greeting.is-personalized {
    line-height: 1.14;
}

.assistant-greeting-letter.is-name-accent {
    color: #c99a3b;
    text-shadow: 0 1px 8px rgba(231, 192, 91, .2);
}

.assistant-greeting-name-shimmer {
    display: inline-block;
    color: #c99a3b;
    text-shadow: 0 1px 8px rgba(231, 192, 91, .16);
}

.assistant-greeting.is-animated .assistant-greeting-name-shimmer.is-wave {
    background: linear-gradient(122deg, #c99a3b 0%, #c99a3b 42%, #d3aa52 47%, #f0d999 50%, #d3aa52 53%, #c99a3b 58%, #c99a3b 100%);
    background-position: 100% center;
    background-size: 280% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: greeting-name-sheen 1.45s cubic-bezier(.3, .7, .35, 1) .2s both;
}

body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode) .assistant-greeting-letter.is-name-accent,
body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode) .assistant-greeting-name-shimmer {
    --day-greeting-name: #f4f8f7;
    color: var(--day-greeting-name);
    -webkit-text-fill-color: var(--day-greeting-name);
    text-shadow: 0 1px 4px rgba(255, 255, 255, .18);
}

body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode) .assistant-greeting.is-animated .assistant-greeting-name-shimmer.is-wave {
    background-color: #f4f8f7;
    background-image: linear-gradient(
        122deg,
        #f4f8f7 0%,
        #f4f8f7 38%,
        #fff2a8 44%,
        #a8f1df 50%,
        #ffd0a0 56%,
        #f4f8f7 63%,
        #f4f8f7 100%
    );
    -webkit-text-fill-color: transparent;
}

@keyframes greeting-name-sheen {
    from { background-position: 100% center; }
    to { background-position: 0 center; }
}

@media (prefers-reduced-motion: reduce) {
    .assistant-greeting.is-animated .assistant-greeting-name-shimmer.is-wave {
        animation: none;
    }
}

.message.assistant .bubble.is-list-answer {
    width: min(var(--chat-content-width), 100%);
}

.message.assistant .bubble.is-list-answer > .answer-text {
    color: var(--accent-dark);
    font-family: var(--font-display);
    font-size: calc(17px * var(--reader-scale));
    font-weight: 700;
}

.message.assistant .bubble.is-entity-answer {
    border-color: #a99f78;
    box-shadow: 0 7px 20px rgba(40, 47, 44, .09);
}

.bubble p {
    margin: 0;
    line-height: 1.45;
}

.answer-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 5px;
    width: 100%;
    margin: 0 0 10px;
    padding-right: 28px;
}

.answer-category-chip {
    justify-self: start;
    padding: 3px 8px;
    color: var(--muted);
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(130, 120, 105, .28);
    border-radius: 999px;
    font-size: calc(11px * var(--reader-scale-small));
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.answer-topline-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    width: 100%;
}

.answer-heading-row {
    display: block;
    min-width: 0;
    width: 100%;
}

.answer-entity-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 50px;
    justify-content: flex-end;
}

.answer-entity {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: none;
    color: var(--accent-dark);
    font-family: var(--font-display);
    font-size: calc(20px * var(--reader-scale));
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.entity-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.entity-tooltip-button {
    width: 22px;
    height: 22px;
    padding: 0;
    color: var(--accent-dark);
    background: #fff;
    border: 1px solid #bfd7d2;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.entity-tooltip-panel {
    position: fixed;
    z-index: 20;
    top: 96px;
    right: max(34px, calc((100vw - var(--chat-frame-width)) / 2 + 34px));
    display: none;
    width: min(380px, calc(100vw - 48px));
    max-height: calc(100dvh - 216px);
    overflow: auto;
    padding: 14px;
    color: var(--ink);
    background: #fffdf7;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(40, 47, 44, .2);
}

.entity-tooltip.is-open .entity-tooltip-panel {
    display: block;
}

.entity-drawer {
    --scroll-hint-surface: #f7f1e0;
    --drawer-border: #cbbf9c;
    /* The outer frame belongs to the drawer, not to the sand-coloured content
       surface. Keeping it cool removes the stray beige edge at the header. */
    --drawer-frame-border: rgba(85, 121, 130, .56);
    --drawer-surface: #f7f1e0;
    --drawer-header-surface: #557982;
    --drawer-header-control-ink: #3f6668;
    --drawer-handle-surface: #7b6045;
    --drawer-elevation-ring: rgba(255, 253, 247, .5);
    --drawer-grabber-color: rgba(63, 104, 114, .82);
    /* Tooltip typography keeps the same slider response as the chat, but
       starts one calm step smaller so the reading drawer does not overpower
       the conversation it sits above. */
    --drawer-reader-scale: calc(var(--reader-scale) * .9);
    --drawer-reader-scale-heading: calc(var(--reader-scale) * .9);
    --drawer-reader-scale-small: calc(var(--reader-scale-small) * .9);
    --drawer-stack-minimum: 375px;
    --drawer-panel-radius: 18px;
    position: fixed;
    z-index: 70;
    top: 96px;
    right: 0;
    width: var(--entity-drawer-inline-size);
    max-height: calc(100dvh - 214px);
    transform: translateX(100%);
    opacity: 1;
    transition: transform var(--entity-drawer-motion-duration) var(--entity-drawer-motion-easing);
    will-change: transform;
    pointer-events: none;
}

.entity-drawer.has-custom-height {
    top: auto;
    bottom: var(--entity-drawer-bottom, 118px);
    height: var(--entity-drawer-height);
    min-height: 375px;
    max-height: var(--entity-drawer-height);
}

.entity-drawer.has-custom-height .entity-drawer-panel,
.entity-drawer.has-custom-height .entity-drawer-stack-item {
    height: 100%;
    min-height: 0;
    max-height: 100%;
}

.entity-drawer.has-scroll-more::after {
    content: '';
    position: absolute;
    z-index: 8;
    right: 0;
    bottom: 0;
    left: 0;
    height: 38px;
    border-radius: 0 0 0 var(--drawer-panel-radius);
    background: linear-gradient(to bottom, transparent, var(--scroll-hint-surface) 88%);
    pointer-events: none;
}

.entity-drawer.is-hidden {
    display: none;
}

.entity-drawer:not(.is-collapsed) {
    transform: translateX(0);
}

.entity-drawer.is-closing {
    opacity: 1;
}

.entity-drawer-panel {
    display: flex;
    flex-direction: column;
    min-height: min(375px, calc(100dvh - 214px));
    max-height: inherit;
    overflow: hidden;
    color: var(--ink);
    background: rgba(247, 241, 224, .96);
    border: 1px solid var(--drawer-frame-border);
    border-right: 0;
    border-radius: var(--drawer-panel-radius) 0 0 var(--drawer-panel-radius);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 24px 58px rgba(50, 40, 25, .28);
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: visibility 0s linear 0s;
    pointer-events: auto;
}

.entity-drawer.is-collapsed .entity-drawer-panel {
    visibility: hidden;
    opacity: 1;
    transform: none;
    transition-delay: .34s;
    pointer-events: none;
}

.entity-drawer-header {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 10px 5px 12px;
    background: var(--drawer-header-surface);
    border-bottom: 1px solid var(--drawer-border);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Continue the dark header edge around its rounded upper-left corner without
   carrying that stronger colour down the full light reading surface. */
.entity-drawer-header::before,
.entity-drawer-stack-header::before {
    /* The complete outer frame is now one colour; a separate connector would
       leave a small rectangular artefact at the upper-left corner. */
    display: none;
}

.entity-drawer-title {
    min-width: 0;
    overflow: visible;
    color: var(--entity-title-ink, var(--accent-dark));
    font-family: var(--font-display);
    font-size: calc(17px * var(--drawer-reader-scale-heading));
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-drawer-title.is-chat-trigger,
.entity-drawer-stack-title.is-chat-trigger,
.entity-tooltip-title.is-chat-trigger {
    border-radius: 5px;
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    transition: color .18s ease, text-decoration-color .18s ease;
}

.entity-drawer-title.is-chat-trigger:hover,
.entity-drawer-stack-title.is-chat-trigger:hover,
.entity-tooltip-title.is-chat-trigger:hover {
    text-decoration-color: currentColor;
}

.entity-drawer-title.is-chat-trigger:focus-visible,
.entity-drawer-stack-title.is-chat-trigger:focus-visible,
.entity-tooltip-title.is-chat-trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.entity-drawer-title-group {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.entity-drawer-actions {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 5px;
}

.entity-drawer-action,
.entity-drawer-handle {
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: var(--accent-dark);
    background: #f7f1e0;
    border: 1px solid #cbbf9c;
    cursor: pointer;
}

.entity-drawer-action {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1;
    padding: 0;
}

.entity-drawer-action:hover,
.entity-drawer-stack-collapse:hover,
.entity-drawer-stack-close:hover,
.entity-drawer-stack-pin:hover,
.entity-drawer-stack-pin.is-pinned {
    background: #efe2c4;
    border-color: #b89a65;
}

.entity-drawer-handle {
    /* The handles remain easy to find, but deliberately sit behind the drawer
       and its primary actions in the visual hierarchy. */
    --drawer-handle-surface: #557982;
    position: fixed;
    z-index: 71;
    top: 160px;
    right: 0;
    left: auto;
    width: 32px;
    height: 64px;
    margin-right: -1px;
    color: #fff;
    background: var(--drawer-handle-surface);
    border-color: var(--drawer-handle-surface);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    box-shadow: -5px 5px 12px rgba(41, 70, 74, .10);
    font-size: 16px;
    font-weight: 700;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    transition:
        transform var(--entity-drawer-motion-duration) var(--entity-drawer-motion-easing),
        background-color .16s ease,
        box-shadow .16s ease;
}

/* A small overlap turns the handle into a tab that grows out of the drawer,
   rather than a separate floating control. */
.entity-drawer-handle::after,
.entity-drawer-stack-handle::after {
    /* The former connector created a visible square notch inside the panel. */
    display: none;
}

.entity-drawer.is-hidden + .entity-drawer-handle {
    display: none;
}

body:not(.is-chat-dock-mode) .entity-drawer:not(.is-collapsed) + .entity-drawer-handle {
    right: 0;
    transform: translate3d(calc(0px - var(--entity-drawer-inline-size)), 0, 0);
}

.entity-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 14px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.entity-drawer-body .entity-rule-card {
    gap: 10px;
}

.entity-drawer.is-stack-mode .entity-drawer-panel {
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.entity-drawer.is-stack-mode .entity-drawer-panel > .entity-drawer-resize-grab {
    display: none !important;
}

.entity-drawer.is-stack-mode .entity-drawer-header {
    display: none;
}

.entity-drawer.is-stack-mode .entity-drawer-body {
    display: block;
    flex: 1 1 auto;
    max-height: inherit;
    padding: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    overscroll-behavior: contain;
}

.entity-drawer-stack-item {
    flex-direction: column;
    position: relative;
    display: none;
    min-height: min(var(--drawer-stack-minimum), calc(100dvh - 214px));
    max-height: inherit;
    overflow: hidden;
    color: var(--ink);
    background: var(--drawer-surface);
    border: 1px solid var(--drawer-frame-border);
    border-right: 0;
    border-radius: var(--drawer-panel-radius) 0 0 var(--drawer-panel-radius);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 24px 58px rgba(50, 40, 25, .28);
}

.entity-drawer-stack-item.is-active {
    display: flex;
}

.entity-drawer.is-stack-mode .entity-drawer-stack-item:not(.is-active) {
    display: none !important;
}

.entity-drawer-stack-header {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 10px 5px 12px;
    background: var(--drawer-header-surface);
    border-bottom: 1px solid var(--drawer-border);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.entity-drawer-stack-title-group {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.entity-drawer-stack-title {
    min-width: 0;
    overflow: hidden;
    color: var(--entity-title-ink, var(--accent-dark));
    font-family: var(--font-display);
    font-size: calc(16px * var(--drawer-reader-scale-heading));
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-drawer-stack-close,
.entity-drawer-stack-collapse,
.entity-drawer-stack-pin {
    display: inline-grid;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    place-items: center;
    padding: 0;
    color: var(--accent-dark);
    background: #fffaf0;
    border: 1px solid #cbbf9c;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.entity-drawer-stack-pin {
    font-size: 13px;
}

.entity-drawer-stack-pin:disabled {
    cursor: not-allowed;
    opacity: .42;
}

.entity-drawer-stack-pin.is-auto-pinned:disabled {
    cursor: default;
    opacity: 1;
}

.entity-drawer-resize-grab {
    flex: 0 0 16px;
    position: relative;
    z-index: 4;
    top: 0;
    right: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 16px;
    min-height: 16px;
    margin: 0;
    padding: 0;
    color: transparent;
    background: var(--drawer-header-surface);
    border: 0;
    border-radius: 9px 0 0 0 !important;
    cursor: ns-resize;
    touch-action: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.entity-drawer-resize-grab::after {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 42px;
    height: 2px;
    content: '';
    background: color-mix(in srgb, #fff 76%, var(--drawer-header-surface));
    border-radius: 999px;
    opacity: .92;
    transform: translateX(-50%);
}

.entity-drawer-resize-grab:is(:hover, :focus-visible)::after,
body.is-resizing-entity-drawer .entity-drawer-resize-grab::after {
    width: 58px;
    opacity: 1;
}

body.is-resizing-entity-drawer,
body.is-resizing-entity-drawer * {
    cursor: ns-resize !important;
    -webkit-user-select: none;
    user-select: none;
}

.entity-drawer-stack-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 14px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.entity-drawer-stack-item.has-back-control .entity-drawer-stack-body {
    padding-top: 12px;
}

.entity-drawer button.entity-drawer-stack-back {
    position: static;
    display: inline-grid;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin: 0;
    place-items: center;
    padding: 0;
    color: var(--drawer-header-control-ink);
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(255, 255, 255, .56);
    border-radius: 999px !important;
    box-shadow: 0 1px 2px rgba(27, 48, 48, .12);
    cursor: pointer;
    font-size: 15px;
}

.entity-drawer button.entity-drawer-stack-back[hidden] {
    display: none;
}

.entity-drawer button.entity-drawer-stack-back:hover,
.entity-drawer button.entity-drawer-stack-back:focus-visible {
    background: #efe2c4;
    border-color: #b89a65;
}

.entity-drawer .entity-tooltip-list {
    grid-template-columns: fit-content(180px) minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 0;
    align-items: baseline;
    padding: 7px 10px;
    background: rgba(255, 253, 247, .58);
    border: 1px solid rgba(167, 135, 91, .3);
    border-radius: 8px;
}

.entity-drawer .entity-tooltip-list dt,
.entity-drawer .entity-tooltip-list dd {
    min-width: 0;
    padding: 5px 0;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
}

.entity-drawer .entity-tooltip-list dt {
    white-space: nowrap;
}

.entity-drawer .entity-tooltip-list dd {
    overflow-wrap: break-word;
}

@media (max-width: 520px) {
    .entity-drawer .entity-tooltip-list {
        grid-template-columns: minmax(108px, 38%) minmax(0, 1fr);
        column-gap: 10px;
    }

    .entity-drawer .entity-tooltip-list dt {
        white-space: normal;
    }
}

.entity-drawer .entity-tooltip-description {
    gap: 8px;
    line-height: 1.42;
}

.entity-drawer-class-spell-link {
    display: grid;
    justify-items: start;
    gap: 7px;
    margin: 16px 2px 4px;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--line), transparent 48%);
}

.entity-drawer-class-spell-label {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .055em;
}

.entity-drawer-class-spell-chip {
    min-width: 0;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px 7px 12px;
    overflow: hidden;
    color: var(--accent-dark);
    background: rgba(255, 255, 255, .7);
    border: 1px solid color-mix(in srgb, var(--accent), transparent 42%);
    border-radius: 999px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.entity-drawer-class-spell-chip > span:not(.entity-drawer-class-spell-arrow) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-drawer-class-spell-chip > i,
.entity-drawer-class-spell-arrow {
    flex: 0 0 auto;
}

.entity-drawer-class-spell-arrow {
    font-size: 18px;
    line-height: .8;
    opacity: .72;
}

.entity-drawer-class-spell-chip:hover,
.entity-drawer-class-spell-chip:focus-visible {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent-dark);
    outline: 0;
    transform: translateY(-1px);
}

body.is-dark-mode .entity-drawer-class-spell-chip {
    color: #eee7d7;
    background: #30413d;
    border-color: #6f8b82;
}

body.is-dark-mode .entity-drawer-class-spell-chip:hover,
body.is-dark-mode .entity-drawer-class-spell-chip:focus-visible {
    color: #172725;
    background: #a8d7c6;
    border-color: #d9f3ea;
}

body.is-tavern-mode .entity-drawer-class-spell-link {
    border-top-color: rgba(156, 116, 77, .42);
}

body.is-tavern-mode .entity-drawer-class-spell-chip {
    color: #663722;
    background: #ead2a2;
    border-color: #b77a4b;
}

body.is-tavern-mode .entity-drawer-class-spell-chip:hover,
body.is-tavern-mode .entity-drawer-class-spell-chip:focus-visible {
    color: #fff4d4;
    background: #9a542f;
    border-color: #663722;
}

.entity-text-reference {
    display: inline;
    padding: 0;
    color: var(--accent-dark);
    font: inherit;
    font-weight: 600;
    line-height: inherit;
    text-align: inherit;
    text-decoration: underline dotted rgba(57, 108, 111, .58) 1.5px;
    text-underline-offset: .16em;
    background: transparent;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
}

.entity-text-reference:hover,
.entity-text-reference:focus-visible {
    color: var(--accent);
    text-decoration-style: solid;
    outline: none;
}

.entity-text-reference:focus-visible {
    box-shadow: 0 0 0 2px rgba(103, 161, 170, .3);
}

.starting-equipment-chooser {
    display: grid;
    gap: 14px;
    padding: 4px 0 12px;
}

.starting-equipment-intro,
.starting-equipment-empty,
.starting-equipment-selection-note {
    margin: 0;
    line-height: 1.45;
}

.starting-equipment-group {
    display: grid;
    gap: 7px;
}

.starting-equipment-group h3 {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.starting-equipment-entity-choices {
    justify-content: flex-start;
}

.starting-equipment-context {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-dark);
    font-size: 17px;
}

.starting-equipment-options {
    display: grid;
    gap: 9px;
}

.starting-equipment-option {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    padding: 11px;
    color: var(--ink);
    text-align: left;
    background: color-mix(in srgb, var(--answer) 72%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    line-height: 1.38;
}

.starting-equipment-option:hover,
.starting-equipment-option:focus-visible {
    border-color: var(--accent);
    outline: 0;
}

.starting-equipment-option.is-selected {
    background: color-mix(in srgb, var(--answer) 78%, #d9eadf);
    border-color: var(--accent-dark);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.starting-equipment-option-label {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: #fff;
    background: var(--accent-dark);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
}

.starting-equipment-option-value {
    min-width: 0;
}

.starting-equipment-selection-note {
    min-height: 20px;
    color: var(--muted);
    font-size: 12px;
}

body.is-dark-mode .starting-equipment-option {
    background: #314640;
    border-color: #627970;
}

body.is-dark-mode .starting-equipment-option.is-selected {
    background: #405c52;
    border-color: #a8d7c6;
}

.entity-drawer .entity-description-block {
    padding-top: 12px;
}

.entity-drawer-stack-body .entity-rule-card {
    gap: 10px;
}

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

.entity-drawer-list-intro {
    margin: 0;
    color: var(--muted);
    font-size: calc(14px * var(--drawer-reader-scale));
    line-height: 1.35;
}

.entity-drawer-list-suggestions {
    gap: 7px;
    margin: 0;
}

.entity-drawer-list-suggestions .suggestion-button {
    background: var(--drawer-content-surface);
    border-color: var(--drawer-content-border);
}

.entity-drawer-list-suggestions .suggestion-button.is-anchor-target {
    background: rgba(255, 255, 255, .72);
    border-color: #6d9ea5;
    box-shadow: 0 0 0 4px rgba(109, 158, 165, .16);
    transition: background .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.entity-drawer-stack-handles {
    position: fixed;
    z-index: 71;
    top: 128px;
    right: 0;
    display: grid;
    justify-items: end;
    gap: 7px;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    transition: transform var(--entity-drawer-motion-duration) var(--entity-drawer-motion-easing);
}

.entity-drawer-stack-handle {
    --drawer-handle-surface: #557982;
    position: relative;
    display: block;
    width: 34px;
    min-height: 82px;
    max-height: 116px;
    overflow: hidden;
    padding: 8px 6px;
    color: #fff;
    margin-right: -1px;
    background: var(--drawer-handle-surface);
    border: 1px solid var(--drawer-handle-surface);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    box-shadow: -5px 5px 12px rgba(41, 70, 74, .09);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    pointer-events: auto;
    text-align: center;
    text-orientation: mixed;
    text-overflow: ellipsis;
    white-space: nowrap;
    writing-mode: vertical-rl;
}

.entity-drawer-stack-handles.is-compact-height .entity-drawer-stack-handle {
    padding: 5px 4px;
    font-size: 10px;
}

.entity-drawer-stack-handles.is-ultra-compact-height .entity-drawer-stack-handle {
    padding: 3px;
    font-size: 9px;
    line-height: 1;
}

.entity-drawer-stack-handle.is-active {
    --drawer-handle-surface: #668993;
    color: #fff;
    background: #668993;
    border-color: #668993;
}

.entity-drawer-stack-handle.is-pinned {
    box-shadow:
        -5px 5px 12px rgba(41, 70, 74, .09),
        inset 2px 0 0 rgba(255, 255, 255, .52);
}

.entity-drawer.is-stack-mode + .entity-drawer-handle,
.entity-drawer:not(.is-stack-mode) ~ .entity-drawer-stack-handles,
.entity-drawer.is-hidden ~ .entity-drawer-stack-handles {
    display: none;
}

body:not(.is-chat-dock-mode) .entity-drawer.is-stack-mode:not(.is-collapsed) ~ .entity-drawer-stack-handles {
    right: 0;
    transform: translate3d(calc(0px - var(--entity-drawer-inline-size)), 0, 0);
}

.entity-card-actions {
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 10px;
    display: flex;
    justify-content: flex-end;
    margin: 0;
}

.entity-card-save {
    display: inline-grid;
    position: relative;
    place-items: center;
    width: 22px;
    height: 22px;
    min-height: 22px;
    aspect-ratio: 1;
    padding: 0;
    color: var(--accent-dark);
    background: #fff;
    border: 1px solid #bfd7d2;
    border-radius: 999px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.entity-header-save {
    flex: 0 0 auto;
    margin-left: -2px;
}

.answer-entity-actions > .entity-tooltip,
.answer-entity-actions > .entity-header-save {
    align-self: center;
    transform: translateY(-.5px);
}

.answer-entity-actions > .entity-tooltip .entity-tooltip-button,
.answer-entity-actions > .entity-header-save {
    display: inline-grid;
    place-items: center;
}

.entity-drawer-save {
    align-self: center;
    margin-right: 0;
}

.entity-card-save:hover {
    background: #fff;
}

.entity-card-save.is-saved {
    color: #166c4a;
    background: #edf8f1;
    border-color: #b7dbc6;
}

.entity-collection-menu {
    position: fixed;
    z-index: 90;
    top: 0;
    left: 0;
    width: min(280px, calc(100vw - 48px));
    max-height: min(360px, calc(100dvh - 16px));
    overflow: auto;
    color: var(--ink);
    background: #fff;
    border: 1px solid rgba(130, 120, 105, .34);
    border-radius: 9px;
    box-shadow: 0 10px 24px rgba(50, 40, 25, .1);
}

.entity-collection-menu-title {
    display: block;
    padding: 9px 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}

.entity-collection-menu-subhead {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    border-bottom: 0;
}

.entity-collection-menu-subhead .entity-collection-menu-title {
    min-width: 0;
    overflow: hidden;
    padding-left: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-collection-menu-back,
.entity-collection-menu-option {
    color: var(--accent-dark);
    background: #fff;
    border: 0;
    cursor: pointer;
    font-weight: 700;
}

.entity-collection-menu-back {
    width: 32px;
    min-height: 34px;
    font-size: 20px;
}

.entity-collection-menu-option {
    display: block;
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border-top: 1px solid rgba(130, 120, 105, .18);
    font-size: 13px;
    line-height: 1.25;
    text-align: left;
}

.entity-collection-menu-option:hover {
    background: var(--answer);
}

.entity-collection-menu-option.is-saved {
    color: #166c4a;
    background: #f3fbf6;
}

.entity-collection-menu-message {
    margin: 0;
    padding: 10px;
    color: var(--muted);
    border-top: 1px solid rgba(130, 120, 105, .18);
    font-size: 13px;
    line-height: 1.35;
}

.entity-collection-menu-message.is-login,
.entity-collection-menu-message.is-error {
    color: #7a3b30;
}

.entity-collection-menu-message.is-saved {
    color: #166c4a;
    background: #f3fbf6;
    font-weight: 700;
    text-align: center;
}

.entity-collection-menu-create {
    min-height: 28px;
    padding: 3px 6px;
    background: #eeefed;
    border-top: 1px solid rgba(130, 120, 105, .18);
    transition: min-height .18s ease, padding .18s ease, background-color .18s ease;
}

.entity-collection-menu-create.is-editing {
    min-height: 48px;
    padding-block: 6px;
}

.entity-collection-menu-create-trigger {
    display: grid;
    width: 100%;
    min-height: 21px;
    place-items: center;
    padding: 0;
    color: color-mix(in srgb, var(--muted) 78%, transparent);
    background: transparent;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}

.entity-collection-menu-create-trigger span {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-1px);
}

.entity-collection-menu-create-trigger:hover,
.entity-collection-menu-create-trigger:focus-visible {
    color: var(--accent-dark);
    background: rgba(118, 124, 121, .12);
    outline: 0;
}

.entity-collection-menu-create.is-editing .entity-collection-menu-create-trigger {
    display: none;
}

.entity-collection-menu-create-form {
    position: relative;
    display: block;
    max-height: 44px;
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transform-origin: top;
    transition: max-height .18s ease, opacity .14s ease, transform .18s ease;
}

.entity-collection-menu-create-form.is-hidden {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-3px);
    visibility: hidden;
}

.entity-collection-menu-create-input {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 7px 40px 7px 10px;
    color: var(--ink);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
}

.entity-collection-menu-create-input:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
}

.entity-collection-menu-create-input[aria-invalid="true"] {
    border-color: #a94a3e;
    box-shadow: 0 0 0 2px rgba(169, 74, 62, .14);
}

.entity-collection-menu-create-submit {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 3px;
    display: inline-grid;
    width: 32px;
    height: 36px;
    place-items: center;
    padding: 0;
    color: var(--accent-dark);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-50%);
}

.entity-collection-menu-create-submit:hover,
.entity-collection-menu-create-submit:focus-visible {
    color: var(--ink);
    background: rgba(118, 124, 121, .12);
    outline: 0;
}

.entity-collection-menu-create-submit:disabled,
.entity-collection-menu-create-input:disabled {
    cursor: progress;
    opacity: .6;
}

body.is-dark-mode .entity-collection-menu-create {
    background: #2a3d39;
    border-top-color: rgba(168, 215, 198, .18);
}

body.is-dark-mode .entity-collection-menu-create-trigger {
    color: rgba(191, 194, 174, .72);
    background: transparent;
}

body.is-dark-mode .entity-collection-menu-create-trigger:hover,
body.is-dark-mode .entity-collection-menu-create-trigger:focus-visible {
    color: #eee7d7;
    background: rgba(191, 215, 208, .12);
}

body.is-dark-mode .entity-collection-menu-create-input {
    color: #eee7d7;
    background: #1f302d;
    border-color: #627970;
}

body.is-dark-mode .entity-collection-menu-create-submit {
    color: #eee7d7;
    background: transparent;
}

body.is-dark-mode .entity-collection-menu-message.is-saved {
    color: #cce9dc;
    background: #365048;
}

@media (max-width: 720px) {
    .entity-collection-menu-create-input {
        font-size: 16px;
    }
}

.collection-panel {
    --collection-drop-accent: #19777a;
    --collection-drop-ring: rgba(255, 255, 255, .92);
    --collection-side-grabber: #315f67;
    position: fixed;
    z-index: 130;
    inset: 0;
    width: min(45vw, 480px);
    min-width: 300px;
    height: 100dvh;
    max-height: none;
    display: grid;
    grid-template-rows: 50px minmax(0, 1fr);
    overflow: visible;
    color: var(--ink);
    background: linear-gradient(180deg, rgba(45, 89, 101, .96) 0, rgba(62, 113, 128, .96) 100%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    border-right: 1px solid rgba(95, 112, 95, .34);
    border-radius: 0;
    box-shadow: 12px 0 30px rgba(40, 47, 44, .12);
    transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.22, .7, .28, 1);
}

.collection-panel.has-custom-width {
    width: var(--collection-panel-width);
    max-width: min(640px, calc(100vw - 64px));
}

.collection-panel-resize-handle {
    position: absolute;
    z-index: 3;
    top: 0;
    right: -5px;
    bottom: 0;
    width: 10px;
    cursor: col-resize;
    touch-action: none;
}

.collection-panel-resize-handle::after {
    position: absolute;
    top: 50%;
    right: 3px;
    width: 2px;
    height: 46px;
    border-radius: 999px;
    content: '';
    background: rgba(255, 255, 255, .42);
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .16s ease, height .16s ease;
}

.collection-panel-resize-handle:hover::after,
.collection-panel-resize-handle:focus-visible::after,
body.is-resizing-collection-panel .collection-panel-resize-handle::after {
    height: 68px;
    opacity: .9;
}

.collection-panel-side-grabber {
    position: absolute;
    z-index: 5;
    top: 50%;
    right: -14px;
    display: grid;
    width: 14px;
    height: 168px;
    min-width: 14px;
    margin: 0;
    place-items: center;
    padding: 0;
    color: transparent;
    background: var(--collection-side-grabber);
    border: 1px solid color-mix(in srgb, var(--collection-side-grabber) 76%, #fff);
    border-left: 0;
    border-radius: 0 999px 999px 0 !important;
    box-shadow: 5px 5px 14px rgba(25, 45, 48, .2);
    cursor: pointer;
    touch-action: manipulation;
    transform: translateY(-50%);
}

/* Keep a forgiving 24px thumb target around the deliberately narrow visible
   selector handle. */
.collection-panel-side-grabber::before {
    position: absolute;
    inset: 0 -5px;
    content: '';
}

.collection-panel-side-grabber::after {
    width: 2px;
    height: 78px;
    content: '';
    background: rgba(255, 255, 255, .78);
    border-radius: 999px;
    transition: height .16s ease, opacity .16s ease;
}

.collection-panel-side-grabber:not(:disabled):is(:hover, :focus-visible)::after {
    height: 104px;
    opacity: 1;
}

.collection-panel-side-grabber:disabled {
    cursor: not-allowed;
    background: #777d7a;
    border-color: #a8adaa;
    box-shadow: 3px 4px 10px rgba(20, 27, 28, .14);
    filter: saturate(.12);
    opacity: .62;
}

.collection-panel-side-grabber:disabled::after {
    height: 68px;
    background: rgba(239, 241, 240, .5);
    opacity: .72;
}

body.is-resizing-collection-panel .collection-panel-side-grabber::after {
    height: 118px;
    opacity: 1;
}

.collection-panel:is(.is-hidden, .is-collapsed) .collection-panel-side-grabber {
    pointer-events: auto;
}

@media (min-width: 721px) {
    .collection-panel-side-grabber {
        cursor: ew-resize;
    }
}

body.is-resizing-collection-panel,
body.is-resizing-collection-panel * {
    cursor: col-resize !important;
    user-select: none;
}

.collection-panel.is-hidden {
    display: grid;
    transform: translateX(-100%);
    pointer-events: none;
}

.collection-panel:not(.is-hidden) {
    transform: translateX(0);
}

.collection-panel.is-collapsed {
    transform: translateX(-100%);
}

.collection-panel-header {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    background: rgba(31, 72, 88, .54);
    box-shadow: 0 5px 18px rgba(23, 45, 61, .14);
}

.collection-panel-title {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .035em;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.collection-panel-close {
    grid-column: 3;
    width: 34px;
    height: 34px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .36);
    border-radius: 8px;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.collection-panel-close:hover,
.collection-panel-close:focus-visible {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .58);
}

.collection-panel-body {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding:
        16px
        max(14px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom))
        max(14px, env(safe-area-inset-left));
    background: transparent;
    scrollbar-color: rgba(255, 255, 255, .38) transparent;
}

.collection-accordion-controls {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
}

.collection-accordion-toggle {
    display: inline-grid;
    width: 34px;
    min-height: 34px;
    place-items: center;
    padding: 0;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1.1;
}

.collection-accordion-toggle:hover,
.collection-accordion-toggle:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .42);
}

.collection-card-actions {
    z-index: 4;
}

.collection-card-actions.is-open {
    z-index: 12;
}

/* Expanded cards animate their content through a transformed, clipped layer.
   Lift the complete open-menu branch above that layer and release only the
   ancestor content involved while its small action menu is visible. */
.collection-card.has-open-action-menu {
    position: relative;
    z-index: 24;
}

.collection-card.has-open-action-menu > .collection-card-header {
    position: relative;
    z-index: 13;
}

.collection-card.has-open-action-menu:not(.is-collapsed) > .collection-card-content {
    overflow: visible;
}

.collection-panel-message,
.collection-pending-entity {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.35;
}

.collection-panel-message.is-empty {
    padding: 18px 14px;
    background: rgba(241, 234, 220, .7);
    border: 1px dashed rgba(95, 112, 95, .4);
    border-radius: 10px;
    text-align: center;
}

.collection-panel-message.is-login,
.collection-panel-message.is-error {
    color: #7a3b30;
}

/* The collection drawer uses a deep surface; neutral status text needs a
   dedicated light value instead of inheriting the page's muted ink. */
.collection-panel .collection-panel-message:not(.is-login):not(.is-error) {
    color: rgba(255, 255, 255, .88);
}

.collection-pending-entity {
    color: #fff;
    font-weight: 700;
}

.collection-create-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-bottom: 12px;
}

.collection-create-form input {
    min-width: 0;
    padding: 8px 9px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.collection-child-form {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    margin: 7px auto 0;
    width: min(100%, 260px);
}

.collection-child-form.is-hidden {
    display: none;
}

.collection-child-form input {
    width: 100%;
    min-width: 0;
    padding: 7px 40px 7px 9px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    text-align: center;
}

.collection-create-form button,
.collection-card-actions button,
.collection-child-form button {
    min-height: 34px;
    padding: 6px 10px;
    color: var(--accent-dark);
    background: var(--answer);
    border: 1px solid #bfd7d2;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
}

.collection-create-form button:disabled,
.collection-card-actions button:disabled,
.collection-child-form button:disabled {
    cursor: progress;
    opacity: .62;
}

.collection-child-form .collection-create-submit {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 4px;
    display: grid;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    place-items: center;
    padding: 0;
    color: var(--accent-dark);
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-50%);
}

.collection-child-form .collection-create-submit:hover,
.collection-child-form .collection-create-submit:focus-visible {
    color: var(--ink);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    outline: 0;
}

.collection-child-create {
    display: grid;
    justify-items: center;
    margin-top: 8px;
}

.collection-root-create {
    position: relative;
    width: 100%;
    margin: 0;
    justify-items: start;
}

.collection-root-create .collection-child-add-trigger {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .36);
    border-radius: 8px;
    font-size: 18px;
    line-height: 1.1;
    opacity: 1;
}

.collection-root-create .collection-child-add-trigger:hover,
.collection-root-create .collection-child-add-trigger:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .58);
    opacity: 1;
}

.collection-root-create .collection-child-form {
    position: absolute;
    z-index: 3;
    top: calc(100% + 6px);
    left: 0;
    width: min(330px, 100%);
    max-width: 100%;
    margin: 0;
    padding: 5px;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(11, 37, 38, .2), inset 0 1px 0 rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.collection-root-create .collection-child-form input {
    min-height: 44px;
    padding: 8px 46px 8px 16px;
    border: 1px solid rgba(191, 215, 210, .9);
    border-radius: 999px;
    box-shadow: none;
}

.collection-root-create .collection-child-form .collection-create-submit {
    right: 10px;
}

.collection-root-create .collection-child-form input:focus {
    outline: 0;
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(182, 218, 233, .46);
}

.collection-child-add-trigger {
    display: inline-grid;
    position: relative;
    width: 28px;
    height: 22px;
    place-items: center;
    color: var(--accent-dark);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    opacity: .42;
}

.collection-child-add-trigger:hover,
.collection-child-add-trigger:focus-visible {
    background: var(--answer);
    opacity: .78;
}

.collection-child-create.is-editing .collection-child-add-trigger {
    display: none;
}

.collection-list {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 4px;
}

.collection-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 10px;
    background: rgba(241, 234, 220, .96);
    border: 1px solid #c6b98f;
    border-radius: 10px;
    cursor: pointer;
    contain: none;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, opacity .16s ease, transform .16s ease;
}

.collection-card:not(.is-collapsed) {
    background: rgba(241, 234, 220, .98);
    border-color: #b9ad87;
    box-shadow: 0 7px 18px rgba(25, 49, 49, .11);
}

.collection-card.is-collapsed {
   /* background: rgb(239 242 246 / 86%);
    border-color: #bfd2d7;*/
}

.collection-card.is-collapsed.has-open-sibling {
    opacity: 1;
}

.collection-card.is-dragging,
.collection-item.is-dragging {
    z-index: 4;
    opacity: .72;
    outline: 2px solid var(--collection-drop-ring);
    outline-offset: 2px;
    box-shadow: 0 8px 18px rgba(20, 42, 45, .24);
    transform: scale(.985);
    transition: none;
}

.collection-card.is-drop-target,
.collection-item.is-drop-target {
    outline: 3px solid var(--collection-drop-accent);
    outline-offset: 3px;
    box-shadow:
        0 0 0 2px var(--collection-drop-ring),
        0 0 0 6px color-mix(in srgb, var(--collection-drop-accent) 34%, transparent);
}

.collection-card[data-depth="1"].is-collapsed {
    /*background: rgb(233 241 247 / 86%);
    border-color: #bfd2d7;*/
}

.collection-card[data-depth="2"] {
    background: rgba(255, 255, 255, .82);
}

.collection-card[data-depth="0"]:not(.is-collapsed),
.collection-card[data-depth="1"]:not(.is-collapsed),
.collection-card[data-depth="2"]:not(.is-collapsed) {
    background: #fff;
    border-color: #cbbfac;
}

/* Collections form the menu structure; only their books remain cards. */
.collection-list > .collection-card[data-depth="0"] {
    padding: 7px 2px 8px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    border-radius: 0;
    box-shadow: none;
}

.collection-list > .collection-card[data-depth="0"].is-collapsed {
    padding: 6px 8px 10px;
    background: rgba(236, 247, 248, .075);
    border: 1px solid rgba(228, 244, 245, .17);
    border-radius: 16px;
}

.collection-list > .collection-card[data-depth="0"]:first-child {
    padding-top: 4px;
}

.collection-list > .collection-card[data-depth="0"]:last-child {
    border-bottom: 0;
}

.collection-card[data-depth="0"] > .collection-card-header {
    min-height: 46px;
    padding: 11px 13px;
    background: rgba(255, 255, 255, .1);
    border-radius: 12px;
}

.collection-card[data-depth="0"] > .collection-card-header .collection-card-toggle,
.collection-card[data-depth="0"] > .collection-card-header .collection-drag-handle,
.collection-card[data-depth="0"] > .collection-card-header .collection-more,
.collection-card[data-depth="0"] > .collection-card-header .collection-spell-group-toggle {
    color: #fff;
}

.collection-card[data-depth="0"] > .collection-card-header .collection-card-toggle {
    font-size: 15px;
    letter-spacing: .01em;
}

/* An expanded collection should read as a tight title-and-content unit; the
   roomier header remains reserved for the collapsed preview chips. */
.collection-card[data-depth="0"]:not(.is-collapsed) {
    padding: 6px 8px 10px;
    background: rgba(236, 247, 248, .075);
    border: 1px solid rgba(228, 244, 245, .17);
    border-radius: 16px;
}

.collection-card[data-depth="0"]:not(.is-collapsed) > .collection-card-header {
    min-height: 42px;
    padding: 7px 12px;
    background: transparent;
}

.collection-card[data-depth="0"]:not(.is-collapsed) > .collection-card-content > .collection-child-list {
    margin-top: 7px;
}

.collection-card[data-depth="0"] > .collection-card-content > .collection-child-create .collection-child-add-trigger {
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    opacity: 1;
}

.collection-card[data-depth="0"] > .collection-card-content > .collection-child-create .collection-child-add-trigger:hover,
.collection-card[data-depth="0"] > .collection-card-content > .collection-child-create .collection-child-add-trigger:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .4);
}

.collection-card[data-depth="0"] > .collection-card-content > .collection-child-list > .collection-card[data-depth="1"] {
    background: #aac6d0;
    border: 1px solid #89b6c3;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(27, 70, 86, .09);
}

.collection-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    cursor: inherit;
    justify-content: flex-start;
}

.collection-drag-handle {
    flex: 0 0 auto;
    color: var(--muted);
    cursor: grab;
    font-weight: 700;
    line-height: 1.25;
    opacity: .58;
    touch-action: none;
    user-select: none;
}

.collection-card-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    padding: 0;
    color: var(--accent-dark);
    background: transparent;
    border: 0;
    cursor: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
}

.collection-card-toggle::after {
    content: "⌃";
    color: inherit;
    font-size: 12px;
    line-height: 1;
    opacity: .64;
}

.collection-card[data-depth="1"] > .collection-card-header .collection-card-toggle {
    font-weight: 700;
}

.collection-card[data-depth="1"] > .collection-card-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 0;
}

.collection-card[data-depth="1"] > .collection-card-header .collection-card-toggle {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    justify-content: flex-start;
}

.collection-card[data-depth="1"] > .collection-card-header .collection-card-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin-left: 0;
}

.collection-card[data-depth="1"] > .collection-card-header > .collection-drag-handle {
    grid-column: 1;
    grid-row: 1;
}

.collection-card[data-depth="1"] > .collection-card-header > .collection-card-preview {
    grid-column: 1 / -1;
    grid-row: 2;
}

.collection-card.is-locked-empty .collection-card-toggle::after {
    content: "🔒";
    font-size: 10px;
}

.collection-card.is-locked-empty .collection-card-toggle {
    cursor: default;
    opacity: .62;
}

.collection-card.is-collapsed .collection-card-toggle::after {
    content: "⌄";
}

.collection-card.is-collapsed.is-locked-empty .collection-card-toggle::after {
    content: "🔒";
}

.collection-card-toggle:hover,
.collection-card-toggle:focus-visible {
    text-decoration: none;
    outline: 0;
}

.collection-card-actions {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-left: auto;
}

.collection-card-actions .collection-delete {
    color: #7a3b30;
    background: #fff8f4;
    border-color: #e3c9bd;
}

.collection-card-actions .collection-add-entity {
    display: inline-grid;
    position: relative;
    place-items: center;
    width: 34px;
    padding-right: 0;
    padding-left: 0;
    font-size: 18px;
    line-height: 1;
}

.ui-button-glyph {
    position: absolute;
    right: 0;
    bottom: 50%;
    left: 0;
    display: grid;
    place-items: center;
    line-height: 1;
    transform: translateY(50%);
    pointer-events: none;
}

/* All generated plus/check glyphs use the same optical centre. Positioning
   from the bottom avoids the slightly low baseline that native text glyphs
   otherwise get in the small circular controls. */
:is(.entity-card-save, .collection-add-entity, .collection-child-add-trigger) > .ui-button-glyph {
    /* Native plus glyphs sit optically a fraction low despite their line box
       being mathematically centred. Keep the shared bottom/translate method,
       with the same tiny correction everywhere. */
    bottom: calc(50% + .5px);
    color: currentColor;
    font-family: var(--font-copy);
    font-size: 1.18em;
    font-weight: 700;
    line-height: 1;
    transform: translateY(50%);
}

.collection-card-actions .collection-more {
    display: inline-grid;
    width: 28px;
    min-height: 28px;
    place-items: center;
    padding: 0;
    color: var(--accent-dark);
    background: transparent;
    border: 0;
    opacity: .68;
}

.collection-card-actions .collection-spell-group-toggle {
    position: relative;
    display: inline-grid;
    width: 28px;
    min-height: 28px;
    place-items: center;
    padding: 0;
    color: var(--accent-dark);
    background: transparent;
    border: 0;
    font-size: 0;
    line-height: 0;
    opacity: .52;
}

.collection-card-actions .collection-spell-group-toggle::before {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: inherit;
    content: '≡';
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-.5px);
}

.collection-card-actions .collection-spell-group-toggle[aria-pressed="true"] {
    color: #fff;
    background: var(--accent);
    border-radius: 50%;
    opacity: 1;
}

.collection-card.is-spell-group-drag-warning .collection-spell-group-toggle,
.collection-card.is-spell-group-drag-warning .collection-item-drag-handle,
.collection-item.is-group-drag-warning .collection-item-chip {
    color: #9f352e;
    background: #fff0ed;
    border-color: #d98a82;
}

.collection-card-actions .collection-more:hover,
.collection-card-actions .collection-more:focus-visible,
.collection-card-actions.is-open .collection-more {
    background: transparent;
    border-color: transparent;
    opacity: .9;
}

.collection-action-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    right: 0;
    min-width: 132px;
    display: none;
    padding: 6px 0;
    background: #fff;
    border: 1px solid rgba(184, 170, 127, .7);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(40, 47, 44, .16);
}

.collection-card-actions.is-open .collection-action-menu {
    display: grid;
    gap: 3px;
}

.collection-card-actions.opens-upward .collection-action-menu {
    top: auto;
    bottom: calc(100% + 4px);
}

.collection-action-menu button {
    width: 100%;
    justify-content: flex-start;
    min-height: 28px;
    padding: 5px 10px;
    color: var(--accent-dark);
    background: transparent;
    border: 0;
    border-radius: 0;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
}

.collection-action-menu button:hover,
.collection-action-menu button:focus-visible {
    background: var(--answer);
}

.collection-action-menu .collection-delete {
    color: #7a3b30;
    background: transparent;
    border: 0;
}

.collection-action-menu .collection-delete:hover,
.collection-action-menu .collection-delete:focus-visible {
    background: #fff4ef;
}

.collection-action-menu.is-renaming {
    width: min(240px, calc(100vw - 32px));
    padding: 10px;
}

.collection-action-menu.is-renaming > button {
    display: none;
}

.collection-card-actions .collection-add-entity.is-saved {
    color: #166c4a;
    background: #edf8f1;
    border-color: #b7dbc6;
}

.collection-rename-form {
    display: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 0;
}

.collection-card-content {
    display: block;
    min-width: 0;
    max-width: 100%;
    max-height: 4000px;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    transition: max-height .42s cubic-bezier(.16, 1, .3, 1), opacity .24s ease, transform .34s cubic-bezier(.16, 1, .3, 1);
}

.collection-card.is-collapsed .collection-card-content {
    display: block;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
}

.collection-card-preview {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    flex: 1 0 calc(100% - 32px);
    max-height: 0;
    margin: 0 28px 0 32px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height .36s cubic-bezier(.16, 1, .3, 1), margin .36s cubic-bezier(.16, 1, .3, 1), opacity .22s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}

.collection-card.is-collapsed .collection-card-preview {
    display: flex;
    justify-content: flex-start;
    max-height: 52px;
    margin-top: 7px;
    opacity: .82;
    transform: translateY(0);
}

.collection-card-preview-chip {
    max-width: 96px;
    min-width: 0;
    overflow: hidden;
    padding: 2px 6px;
    color: #456d78;
    background: rgba(232, 242, 245, .9);
    border: 1px solid rgba(130, 180, 193, .58);
    border-radius: 999px;
    font-size: calc(10px * var(--reader-scale));
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collection-card-preview-more {
    padding: 2px 4px;
    color: #587983;
    font-size: calc(10px * var(--reader-scale));
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

.collection-action-menu.is-renaming .collection-rename-form {
    display: grid;
}

.collection-rename-form input {
    width: 100%;
    min-width: 0;
    padding: 7px 8px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.collection-rename-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

/* Collection inputs sit on the drawer's dark stage. Keep entered text,
   placeholders and focus rings legible in every non-day theme. */
body:is(.is-dark-mode, .is-evening-mode, .is-tavern-mode) .collection-panel :is(
    .collection-create-form input,
    .collection-child-form input,
    .collection-rename-form input
) {
    color: #f8f1e5;
    background: rgba(28, 34, 38, .88);
    border-color: rgba(231, 218, 195, .58);
    caret-color: #fff;
}

body:is(.is-dark-mode, .is-evening-mode, .is-tavern-mode) .collection-panel :is(
    .collection-create-form input,
    .collection-child-form input,
    .collection-rename-form input
)::placeholder {
    color: rgba(248, 241, 229, .7);
    opacity: 1;
}

body:is(.is-dark-mode, .is-evening-mode, .is-tavern-mode) .collection-panel :is(
    .collection-create-form input,
    .collection-child-form input,
    .collection-rename-form input
):focus {
    border-color: #f4d9a4;
    box-shadow: 0 0 0 3px rgba(244, 217, 164, .24);
    outline: 0;
}

body.is-evening-mode .collection-action-menu .collection-rename-form input {
    color: #65344f;
    background: #fff9ed;
    border-color: #c98b86;
    caret-color: #65344f;
}

body.is-tavern-mode .collection-action-menu .collection-rename-form input {
    color: #633b2a;
    background: #fff0ce;
    border-color: #bd9566;
    caret-color: #633b2a;
}

/* The submit arrow sits inside the dark collection-name input. Give it a
   compact, unmistakable primary surface in the two dark themes instead of
   relying on a low-contrast transparent icon. */
body.is-dark-mode .collection-panel .collection-child-form .collection-create-submit {
    color: #1f302d;
    background: #bdd7d0;
    border: 1px solid #e4f1ed;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .28);
    font-size: 20px;
}

body.is-dark-mode .collection-panel .collection-child-form .collection-create-submit:is(:hover, :focus-visible) {
    color: #142522;
    background: #e4f1ed;
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(189, 215, 208, .28), 0 3px 8px rgba(0, 0, 0, .32);
}

body.is-tavern-mode .collection-panel .collection-child-form .collection-create-submit {
    color: #3a2118;
    background: #e8bd72;
    border: 1px solid #ffe1a3;
    box-shadow: 0 2px 7px rgba(31, 15, 12, .34);
    font-size: 20px;
}

body.is-tavern-mode .collection-panel .collection-child-form .collection-create-submit:is(:hover, :focus-visible) {
    color: #2b1812;
    background: #ffe1a3;
    border-color: #fff0c4;
    box-shadow: 0 0 0 3px rgba(232, 189, 114, .28), 0 3px 8px rgba(31, 15, 12, .38);
}

.collection-rename-form button {
    width: auto;
    flex: 1 1 0;
    justify-content: center;
    min-height: 32px;
    padding: 5px 9px;
    color: var(--accent-dark);
    background: var(--answer);
    border: 1px solid #bfd7d2;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.collection-rename-form .collection-rename-cancel {
    color: var(--muted);
    background: transparent;
    border-color: var(--line);
}

.collection-item-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.collection-card.is-spell-grouped .collection-item-list {
    display: grid;
    gap: 10px;
}

.collection-spell-level-group {
    min-width: 0;
    padding: 1px 0;
}

.collection-spell-level-group + .collection-spell-level-group {
    padding-top: 11px;
    border-top: 1px solid rgba(73, 123, 139, .24);
}

.collection-spell-level-heading {
    margin: 0 0 6px;
    color: #527681;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.collection-spell-level-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.collection-item-drag-handle.is-locked {
    cursor: not-allowed;
}

.collection-child-list {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 9px;
    margin-top: 12px;
    /*padding-left: 10px;
    /*border-left: 2px solid rgba(191, 215, 210, .76);*/
}

.collection-item {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    cursor: default;
}

.collection-item.collection-drop-before::before,
.collection-item.collection-drop-after::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: -6px;
    bottom: -6px;
    width: 5px;
    background: var(--collection-drop-accent);
    border-radius: 999px;
    box-shadow:
        0 0 0 2px var(--collection-drop-ring),
        0 0 0 5px color-mix(in srgb, var(--collection-drop-accent) 34%, transparent),
        0 0 12px color-mix(in srgb, var(--collection-drop-accent) 68%, transparent);
    pointer-events: none;
}

.collection-item.collection-drop-before::before {
    left: -7px;
}

.collection-item.collection-drop-after::after {
    right: -7px;
}

.collection-card.collection-drop-inside {
    position: relative;
    outline: 3px dashed var(--collection-drop-accent);
    outline-offset: -5px;
    box-shadow:
        inset 0 0 0 4px color-mix(in srgb, var(--collection-drop-accent) 16%, transparent),
        0 0 0 2px var(--collection-drop-ring),
        0 0 0 5px color-mix(in srgb, var(--collection-drop-accent) 28%, transparent);
}

.collection-card.collection-drop-inside::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 8px;
    right: 8px;
    width: 12px;
    height: 12px;
    background: var(--collection-drop-accent);
    border: 3px solid var(--collection-drop-ring);
    border-radius: 50%;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--collection-drop-accent) 36%, transparent);
    pointer-events: none;
}

.collection-item-drag-handle {
    display: inline-grid;
    min-height: 28px;
    width: 20px;
    place-items: center;
    color: var(--muted);
    background: #fff;
    border: 1px solid #c7dde2;
    border-right: 0;
    border-radius: 999px 0 0 999px;
    cursor: grab;
    font-size: 14px;
    opacity: .68;
    touch-action: none;
    user-select: none;
}

.collection-item-chip {
    max-width: 100%;
    min-height: 28px;
    padding: 4px 8px;
    color: var(--accent-dark);
    background: #fff;
    border: 1px solid #c7dde2;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    cursor: pointer;
    font-size: calc(13px * var(--reader-scale));
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collection-item-move {
    display: none;
}

.collection-item-move:first-child {
    border-radius: 999px 0 0 999px;
}

.collection-item-move:disabled,
.collection-item-project:disabled,
.collection-item-remove:disabled {
    cursor: default;
    opacity: .38;
}

.collection-item-remove {
    width: 28px;
    min-height: 28px;
    color: #587276;
    background: rgba(231, 240, 241, .9);
    border: 1px solid #b7d1d4;
    border-radius: 0 999px 999px 0;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
}

.collection-item-remove-menu {
    position: absolute;
    z-index: 18;
    right: 0;
    bottom: calc(100% + 6px);
    display: none;
    grid-template-columns: 1fr 28px;
    min-width: 126px;
    overflow: hidden;
    background: rgba(255, 253, 247, .96);
    border: 1px solid rgba(184, 170, 127, .78);
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(40, 47, 44, .16);
}

.collection-item.is-remove-confirming .collection-item-remove-menu {
    display: grid;
}

.collection-item-remove-menu button {
    min-height: 30px;
    padding: 5px 8px;
    border: 0;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
}

.collection-item-remove-confirm {
    color: #7a3b30;
    background: transparent;
    text-align: left;
}

.collection-item-remove-confirm:hover,
.collection-item-remove-confirm:focus-visible {
    background: #fff0ed;
    outline: 0;
}

.collection-item-remove-cancel {
    color: var(--muted);
    background: rgba(95, 144, 148, .08);
    border-left: 1px solid rgba(184, 170, 127, .42) !important;
    font-size: 16px !important;
}

.collection-item-project {
    display: inline-grid;
    width: 28px;
    min-height: 28px;
    place-items: center;
    padding: 0;
    color: #527681;
    background: #fff;
    border: 1px solid #c7dde2;
    border-right: 0;
    cursor: pointer;
    font-family: Georgia, serif;
    font-size: 16px;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
}

.collection-item-project:hover,
.collection-item-project:focus-visible {
    color: #fff;
    background: #527f88;
    outline: 0;
}

.entity-tooltip-title {
    display: block;
    margin: 0 32px 8px 0;
    color: var(--entity-title-ink, var(--accent-dark));
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
}

.entity-tooltip-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.entity-tooltip-close:hover {
    color: var(--accent-dark);
    background: var(--answer);
}

.message.assistant .bubble:has(> .entity-rule-card) {
    font-family: var(--font-copy);
}

.entity-rule-card {
    position: relative;
    display: grid;
    gap: 10px;
    min-width: 0;
    font-family: var(--font-copy);
}

.entity-rule-card :is(h2, h3, h4, h5, h6),
.entity-rule-card .entity-tooltip-list dt,
.entity-rule-card .entity-table th,
.entity-rule-card .entity-monster-ability-save,
.entity-rule-card .entity-monster-ability-modifier {
    font-family: var(--font-display);
}

.message.assistant .bubble:has(> .entity-rule-card) .answer-entity,
.message.assistant .bubble:has(> .entity-rule-card) .entity-rule-card :is(h2, h3, h4, h5, h6) {
    font-weight: 800;
}

.message.assistant .bubble:has(> .entity-rule-card) :is(
    button,
    .answer-category-chip,
    .entity-origin-badge,
    .ruleset-tab,
    .suggestion-button
) {
    font-family: var(--font-copy);
}

.entity-origin-badge {
    justify-self: start;
    padding: 3px 8px;
    color: #315e62;
    background: rgba(216, 231, 239, .82);
    border: 1px solid rgba(71, 121, 145, .32);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .025em;
    line-height: 1.2;
}

.entity-origin-badge.is-homebrew {
    color: #704d70;
    background: rgba(239, 220, 237, .88);
    border-color: rgba(146, 91, 139, .36);
}

.entity-origin-badge.is-community {
    color: #735e38;
    background: rgba(247, 241, 224, .9);
    border-color: rgba(172, 139, 78, .38);
}

.ruleset-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 2px;
}

.ruleset-tab {
    padding: 4px 8px;
    color: var(--muted);
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(130, 120, 105, .28);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.ruleset-tab.is-active {
    color: var(--accent-dark);
    background: #fff;
    border-color: #bfd7d2;
}

.ruleset-tab:disabled {
    cursor: default;
    opacity: 1;
}

.entity-tooltip-list {
    display: grid;
    grid-template-columns: minmax(92px, auto) 1fr;
    gap: 6px 10px;
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
}

.entity-tooltip-list dt {
    color: var(--muted);
    font-weight: 700;
}

.entity-tooltip-list dd {
    margin: 0;
}

.entity-tooltip-list :is(dt, dd).is-featured-duplicate {
    opacity: 1;
}

/* Optional featured-stat experiment for weapons, armor and spells. The
   rendering is isolated in its own component so it can be removed without
   changing the established metadata grid underneath. */
.entity-stat-orbits {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    margin: 1px 0 3px;
}

.entity-stat-orbit {
    position: relative;
    isolation: isolate;
    display: grid;
    width: 124px;
    min-width: 124px;
    height: 124px;
    min-height: 124px;
    aspect-ratio: 1;
    place-items: center;
    align-content: center;
    gap: 4px;
    padding: 18px 14px 15px;
    color: var(--ink);
    background:
        radial-gradient(circle at 38% 30%, color-mix(in srgb, white 29%, transparent), transparent 62%),
        var(--stat-orbit-surface);
    border: 2px solid color-mix(in srgb, var(--accent-dark) 52%, var(--line));
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
        0 6px 14px color-mix(in srgb, var(--ink) 9%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 38%, transparent);
    text-align: center;
}

.entity-stat-orbit::before {
    position: absolute;
    z-index: -1;
    inset: 6px;
    content: "";
    border: 1px solid color-mix(in srgb, var(--accent-dark) 34%, transparent);
    border-radius: inherit;
}

.entity-stat-orbit::after {
    position: absolute;
    top: 6px;
    width: 7px;
    height: 7px;
    content: "";
    background: var(--accent-dark);
    border: 2px solid color-mix(in srgb, var(--surface-strong) 88%, white 12%);
    border-radius: 50%;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-dark) 44%, transparent);
}

.entity-stat-orbit-label {
    color: var(--accent-dark);
    font-family: var(--font-copy);
    font-size: calc(10px * var(--reader-scale-small));
    font-weight: 700;
    letter-spacing: .055em;
    line-height: 1.08;
    text-transform: uppercase;
}

.entity-stat-orbit-value {
    max-width: 100%;
    color: var(--ink);
    font-family: var(--font-copy);
    font-size: calc(17px * var(--reader-scale-heading));
    font-weight: 700;
    line-height: 1.08;
    overflow-wrap: normal;
    word-break: normal;
}

.entity-stat-orbit.has-long-value .entity-stat-orbit-value {
    font-size: calc(14px * var(--reader-scale-heading));
    line-height: 1.12;
}

.entity-stat-orbit.has-extra-long-value .entity-stat-orbit-value {
    font-size: calc(11.5px * var(--reader-scale-heading));
    line-height: 1.14;
}

.entity-stat-orbit.is-saving-throw .entity-stat-orbit-value {
    font-size: calc(12.5px * var(--reader-scale-heading));
    line-height: 1.08;
}

.entity-stat-orbit-pictogram {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    margin-bottom: -1px;
    color: var(--accent-dark);
    opacity: .9;
}

/* Monster attributes use the same visual language as featured spell stats,
   while keeping the six-value stat block compact. The attached satellite is
   the ability modifier; saving throws remain legible inside the main orbit. */
.entity-monster-ability-block {
    overflow: visible;
}

.entity-rule-card.entity-type-monster {
    container-name: monster-ability-card;
    container-type: inline-size;
}

.entity-monster-ability-block > h3 {
    margin-bottom: 12px;
}

.entity-monster-ability-orbits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: 18px 12px;
    min-width: 0;
    padding: 8px 8px 12px;
}

.entity-monster-ability-orbit {
    position: relative;
    isolation: isolate;
    display: grid;
    width: 98px;
    height: 98px;
    place-items: center;
    align-content: center;
    gap: 1px;
    padding: 13px 11px 10px;
    color: var(--ink);
    background:
        radial-gradient(circle at 38% 28%, color-mix(in srgb, white 27%, transparent), transparent 62%),
        var(--stat-orbit-surface);
    border: 2px solid color-mix(in srgb, var(--accent-dark) 48%, var(--line));
    border-radius: 50%;
    box-shadow:
        0 5px 12px color-mix(in srgb, var(--ink) 9%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 38%, transparent);
    text-align: center;
}

.entity-monster-ability-orbit::before {
    position: absolute;
    z-index: -1;
    inset: 5px;
    content: "";
    border: 1px solid color-mix(in srgb, var(--accent-dark) 30%, transparent);
    border-radius: inherit;
}

.entity-monster-ability-label {
    color: var(--accent-dark);
    font-family: var(--font-copy);
    font-size: calc(10px * var(--reader-scale-small));
    font-weight: 700;
    letter-spacing: .075em;
    line-height: 1;
}

.entity-monster-ability-value {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: calc(25px * var(--reader-scale-heading));
    font-weight: 700;
    line-height: 1;
}

.entity-monster-ability-save {
    color: var(--muted);
    font-size: calc(8.5px * var(--reader-scale-small));
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.05;
    white-space: nowrap;
}

.entity-monster-ability-modifier {
    position: absolute;
    z-index: 3;
    right: -8px;
    bottom: 7px;
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--surface-strong);
    background: var(--accent-dark);
    border: 2px solid var(--stat-orbit-surface);
    border-radius: 50%;
    box-shadow:
        0 3px 8px color-mix(in srgb, var(--ink) 22%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 28%, transparent);
    font-size: calc(11px * var(--reader-scale-small));
    font-weight: 700;
    line-height: 1;
}

@container monster-ability-card (min-width: 560px) {
    .entity-monster-ability-orbits {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px 6px;
        padding-inline: 4px;
    }

    .entity-monster-ability-orbit {
        width: clamp(76px, 12cqi, 92px);
        height: clamp(76px, 12cqi, 92px);
        padding: 10px 8px 8px;
    }

    .entity-monster-ability-value {
        font-size: calc(22px * var(--reader-scale-heading));
    }

    .entity-monster-ability-label {
        font-size: calc(9px * var(--reader-scale-small));
    }

    .entity-monster-ability-save {
        font-size: calc(7.75px * var(--reader-scale-small));
    }

    .entity-monster-ability-modifier {
        right: -6px;
        bottom: 5px;
        width: 30px;
        height: 30px;
        font-size: calc(10px * var(--reader-scale-small));
    }
}

@container monster-ability-card (max-width: 379px) {
    .entity-monster-ability-orbits {
        gap: 16px 7px;
        padding-inline: 2px;
    }

    .entity-monster-ability-orbit {
        width: 82px;
        height: 82px;
        padding: 10px 8px 8px;
    }

    .entity-monster-ability-value {
        font-size: 21px;
    }

    .entity-monster-ability-label {
        font-size: 8.5px;
    }

    .entity-monster-ability-save {
        font-size: 7.5px;
    }

    .entity-monster-ability-modifier {
        right: -6px;
        bottom: 4px;
        width: 29px;
        height: 29px;
        font-size: 9.5px;
    }
}

/* Reversible orbit embellishments. The icon seal communicates the kind of
   stat, while an SVG ring can represent any number of damage types without
   implying numerical weighting between them. */
.entity-stat-orbit > :is(.entity-stat-orbit-label, .entity-stat-orbit-value) {
    position: relative;
    z-index: 2;
}

.entity-stat-orbit.has-damage-ring {
    border-color: transparent;
}

.entity-stat-orbit.has-orbit-icons {
    overflow: visible;
}

.entity-stat-orbit-damage-ring {
    position: absolute;
    z-index: 1;
    inset: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    overflow: visible;
    pointer-events: none;
}

.entity-stat-orbit-damage-ring.is-spell-damage-ring {
    transform-origin: 50% 50%;
    animation: orbit-spell-ring-tumble 5.7s ease-in-out infinite;
}

.entity-stat-orbit-damage-segment circle {
    fill: none;
    stroke: var(--damage-color, var(--accent-dark));
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.entity-stat-orbit-damage-segment .is-core {
    stroke-width: 3.2px;
    filter: drop-shadow(0 0 2.2px color-mix(in srgb, var(--damage-color, var(--accent-dark)) 82%, transparent));
}

.entity-stat-orbit-damage-segment .is-corona {
    stroke-width: 6.8px;
    opacity: .38;
    filter: blur(1.25px) drop-shadow(0 0 4.5px color-mix(in srgb, var(--damage-color, var(--accent-dark)) 88%, transparent));
    animation: orbit-damage-corona 4.6s ease-in-out infinite;
    animation-delay: var(--damage-segment-delay, 0s);
}

.entity-stat-orbit-damage-segment.is-damage-fire .is-corona {
    animation-name: orbit-damage-corona-fire;
    animation-duration: 2.9s;
}

.entity-stat-orbit-damage-segment.is-damage-cold .is-corona {
    animation-name: orbit-damage-corona-cold;
    animation-duration: 5.8s;
}

.entity-stat-orbit-damage-segment.is-damage-lightning .is-corona {
    animation-name: orbit-damage-corona-lightning;
    animation-duration: 1.9s;
}

.entity-stat-orbit-damage-segment.is-damage-metallic .is-corona {
    stroke-width: 6px;
    opacity: .7;
    filter: drop-shadow(0 1px 1px rgba(48, 58, 64, .48));
    animation: none;
}

.entity-stat-orbit-damage-segment.is-damage-metallic .is-core {
    stroke-width: 2.7px;
    filter:
        drop-shadow(0 -.7px .45px rgba(255, 255, 255, .92))
        drop-shadow(0 .9px .7px rgba(48, 58, 64, .62));
}

.entity-stat-orbit-damage-segment.is-damage-healing .is-corona {
    animation-name: orbit-damage-corona-healing;
    animation-duration: 4.9s;
}

.entity-stat-orbit-icons {
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
}

.entity-stat-orbit-icon {
    --damage-icon-ink: #fffdf7;
    position: absolute;
    top: var(--orbit-icon-y, 82%);
    left: var(--orbit-icon-x, 12%);
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    line-height: 1;
    transform: translate(-50%, -50%);
}

.entity-stat-orbit-icon.is-primary {
    width: 28px;
    height: 28px;
    color: var(--accent-dark);
    background: color-mix(in srgb, var(--surface-strong) 88%, white 12%);
    border: 1px solid color-mix(in srgb, var(--accent-dark) 58%, var(--line));
    box-shadow: 0 3px 8px color-mix(in srgb, var(--ink) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5);
    font-size: 16px;
}

.spell-area-pictogram.entity-stat-orbit-icon-pictogram {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    opacity: .96;
}

.entity-stat-orbit-icon.is-secondary {
    width: 18px;
    height: 18px;
    color: var(--damage-icon-ink);
    background: var(--damage-color, var(--accent-dark));
    border: 1.5px solid color-mix(in srgb, var(--surface-strong) 88%, white 12%);
    box-shadow: 0 2px 5px color-mix(in srgb, var(--ink) 18%, transparent);
    font-size: 10px;
}

:is(.entity-stat-orbit-damage-segment, .entity-stat-orbit-icon).is-damage-acid {
    --damage-color: #9fcf3f;
    --damage-icon-ink: #26330c;
}

:is(.entity-stat-orbit-damage-segment, .entity-stat-orbit-icon).is-damage-bludgeoning {
    --damage-color: #9c7256;
}

:is(.entity-stat-orbit-damage-segment, .entity-stat-orbit-icon).is-damage-cold {
    --damage-color: #4fa9d6;
}

:is(.entity-stat-orbit-damage-segment, .entity-stat-orbit-icon).is-damage-fire {
    --damage-color: #e25a32;
}

:is(.entity-stat-orbit-damage-segment, .entity-stat-orbit-icon).is-damage-force {
    --damage-color: #9568d1;
}

:is(.entity-stat-orbit-damage-segment, .entity-stat-orbit-icon).is-damage-lightning {
    --damage-color: #e7bd2e;
    --damage-icon-ink: #49370c;
}

:is(.entity-stat-orbit-damage-segment, .entity-stat-orbit-icon).is-damage-necrotic {
    --damage-color: #287b70;
}

:is(.entity-stat-orbit-damage-segment, .entity-stat-orbit-icon).is-damage-piercing {
    --damage-color: #b76959;
}

:is(.entity-stat-orbit-damage-segment, .entity-stat-orbit-icon).is-damage-poison {
    --damage-color: #5e9f38;
}

:is(.entity-stat-orbit-damage-segment, .entity-stat-orbit-icon).is-damage-psychic {
    --damage-color: #895bc9;
}

:is(.entity-stat-orbit-damage-segment, .entity-stat-orbit-icon).is-damage-radiant {
    --damage-color: #f0c85b;
    --damage-icon-ink: #49340c;
}

:is(.entity-stat-orbit-damage-segment, .entity-stat-orbit-icon).is-damage-metallic {
    --damage-color: #b8c1c5;
    --damage-icon-ink: #36434a;
}

:is(.entity-stat-orbit-damage-segment, .entity-stat-orbit-icon).is-damage-healing {
    --damage-color: #f4e4ad;
    --damage-icon-ink: #54451b;
}

/* Physical damage types retain their individual glyphs, but share one stable
   titanium material in weapons and spells alike. Elemental damage keeps its
   spell color. */
.entity-stat-orbit-icon.is-secondary:is(
    .is-damage-bludgeoning,
    .is-damage-piercing,
    .is-damage-slashing,
    .is-damage-metallic
) {
    --damage-color: #6f7e89;
    --damage-icon-ink: #f5f7f8;
}

:is(.entity-stat-orbit-damage-segment, .entity-stat-orbit-icon).is-damage-slashing {
    --damage-color: #bd554f;
}

:is(.entity-stat-orbit-damage-segment, .entity-stat-orbit-icon).is-damage-thunder {
    --damage-color: #6477c8;
}

@keyframes orbit-damage-corona {
    0%, 100% { opacity: .26; stroke-width: 5.4px; }
    48% { opacity: .64; stroke-width: 8.1px; }
}

@keyframes orbit-damage-corona-fire {
    0%, 100% { opacity: .26; stroke-width: 5.4px; }
    27% { opacity: .69; stroke-width: 8.6px; }
    58% { opacity: .38; stroke-width: 6.2px; }
    79% { opacity: .64; stroke-width: 8px; }
}

@keyframes orbit-damage-corona-cold {
    0%, 100% { opacity: .26; stroke-width: 5.2px; }
    50% { opacity: .6; stroke-width: 7.5px; }
}

@keyframes orbit-damage-corona-lightning {
    0%, 18%, 22%, 64%, 68%, 100% { opacity: .24; stroke-width: 5.2px; }
    20%, 66% { opacity: .82; stroke-width: 8.6px; }
    42% { opacity: .47; stroke-width: 6.4px; }
}

@keyframes orbit-spell-ring-tumble {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-.55deg); }
    23% { transform: translate3d(.55px, -.35px, 0) rotate(1.15deg); }
    49% { transform: translate3d(-.35px, .5px, 0) rotate(-1.35deg); }
    72% { transform: translate3d(.4px, .3px, 0) rotate(.8deg); }
}

@keyframes orbit-damage-corona-healing {
    0%, 100% { opacity: .28; stroke-width: 5.2px; }
    34% { opacity: .62; stroke-width: 7.7px; }
    68% { opacity: .4; stroke-width: 6.1px; }
}

body.is-effects-disabled .entity-stat-orbit-damage-segment .is-corona {
    opacity: .38;
    animation: none;
}

body.is-effects-disabled .entity-stat-orbit-damage-ring.is-spell-damage-ring {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .entity-stat-orbit-damage-segment .is-corona {
        opacity: .38;
        animation: none;
    }

    .entity-stat-orbit-damage-ring.is-spell-damage-ring {
        animation: none;
    }
}

@media (max-width: 520px) {
    .entity-stat-orbits {
        gap: 8px;
    }

    .entity-stat-orbit {
        width: 104px;
        min-width: 104px;
        height: 104px;
        min-height: 104px;
        gap: 2px;
        padding: 14px 9px 11px;
    }

    .entity-stat-orbit-value {
        font-size: 14px;
    }

    .entity-stat-orbit-label {
        font-size: 9px;
    }

    .entity-stat-orbit.has-long-value .entity-stat-orbit-value {
        font-size: 12px;
        line-height: 1.1;
    }

    .entity-stat-orbit.has-extra-long-value .entity-stat-orbit-value {
        font-size: 10px;
        line-height: 1.08;
        overflow-wrap: anywhere;
    }

    .entity-stat-orbit.is-saving-throw .entity-stat-orbit-value {
        font-size: 10.5px;
        line-height: 1.06;
    }

    .entity-stat-orbit-pictogram {
        width: 19px;
        height: 19px;
        flex-basis: 19px;
    }

    .entity-stat-orbit-icons {
        inset: 0;
    }

    .entity-stat-orbit-icon.is-primary {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }

    .spell-area-pictogram.entity-stat-orbit-icon-pictogram {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
    }

    .entity-stat-orbit-icon.is-secondary {
        width: 16px;
        height: 16px;
        font-size: 9px;
    }
}

.entity-tooltip-list dd.has-spell-area-pictogram {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.spell-area-pictogram {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    overflow: visible;
    color: currentColor;
    opacity: .78;
}

.spell-area-pictogram path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.spell-area-pictogram.is-cone path:first-child {
    fill: currentColor;
    fill-opacity: .1;
}

.spell-area-value {
    min-width: 0;
}

.alignment-map {
    container-name: alignment-map;
    container-type: inline-size;
    display: grid;
    grid-template-columns: minmax(52px, .7fr) repeat(3, minmax(82px, 1fr));
    gap: 3px;
    margin: 5px 0 12px;
    padding: 6px;
    color: inherit;
    background: color-mix(in srgb, currentColor 4%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 12px;
}

.alignment-map-corner,
.alignment-map-heading,
.alignment-map-cell {
    min-width: 0;
    border-radius: 7px;
}

.alignment-map-corner {
    display: grid;
    align-content: center;
    gap: 1px;
    padding: 5px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.alignment-map-corner span:last-child {
    text-align: right;
}

.alignment-map-heading {
    display: grid;
    place-items: center;
    padding: 6px 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
}

.alignment-map-cell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    overflow: hidden;
    padding: 8px;
    background: color-mix(in srgb, currentColor 7%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 17%, transparent);
    line-height: 1.15;
}

.alignment-map-cell strong {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 11%, transparent);
    font-size: 10px;
    letter-spacing: .02em;
}

.alignment-map-cell span {
    min-width: 0;
    font-size: 11px;
    font-weight: 700;
    hyphens: auto;
    overflow-wrap: anywhere;
}

.alignment-map-cell.is-morality-good {
    background: color-mix(in srgb, #79a986 14%, transparent);
}

.alignment-map-cell.is-morality-neutral {
    background: color-mix(in srgb, currentColor 6%, transparent);
}

.alignment-map-cell.is-morality-evil {
    background: color-mix(in srgb, #b27668 13%, transparent);
}

.alignment-map-cell.is-true-neutral strong {
    color: var(--surface-strong);
    background: var(--accent-dark);
}

@media (max-width: 520px) {
    .alignment-map {
        grid-template-columns: 40px repeat(3, minmax(62px, 1fr));
        gap: 2px;
        padding: 4px;
    }

    .alignment-map-cell {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 3px;
        padding: 6px 3px;
        text-align: center;
    }

    .alignment-map-cell span {
        font-size: 9px;
    }

    .alignment-map-heading {
        padding-inline: 1px;
        font-size: 8px;
    }

    .alignment-map-corner {
        padding-inline: 2px;
        font-size: 7px;
    }
}

/* In narrow drawers the row and column headings already carry the full
   meaning. Show the compact codes without squeezing long names across cells. */
@container alignment-map (max-width: 460px) {
    .alignment-map-corner {
        padding: 3px 1px;
        font-size: 7px;
    }

    .alignment-map-heading {
        padding: 5px 1px;
        font-size: 8px;
    }

    .alignment-map-cell {
        grid-template-columns: minmax(0, 1fr);
        min-height: 52px;
        place-items: center;
        padding: 6px 3px;
    }

    .alignment-map-cell strong {
        width: 34px;
        height: 34px;
        font-size: 11px;
    }

    .alignment-map-cell span {
        display: none;
    }
}

.entity-description-block {
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(130, 120, 105, .22);
}

.entity-main-column {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.entity-tooltip-description {
    display: grid;
    gap: 6px;
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.34;
    transition: max-height .24s ease;
}

.entity-tooltip-description h3,
.entity-tooltip-description h4,
.entity-tooltip-description p {
    margin: 0;
}

.entity-tooltip-description h3 {
    margin-top: 4px;
    color: var(--accent-dark);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.entity-tooltip-description h3:first-child {
    margin-top: 0;
}

.entity-tooltip-description h4 {
    margin-top: 5px;
    padding-top: 8px;
    color: var(--accent-dark);
    border-top: 1px solid rgba(130, 190, 181, .34);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}

.entity-tooltip-description p {
    max-width: 78ch;
}

.entity-tooltip-description .entity-description-list {
    display: grid;
    gap: 5px;
    max-width: 78ch;
    margin: 0;
    padding-left: 20px;
}

.entity-tooltip-description .entity-description-list li {
    padding-left: 2px;
}

.entity-tooltip-description .entity-subline {
    color: var(--muted);
    font-style: italic;
}

.entity-dice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 8px;
    width: 100%;
    margin: 4px 0;
    padding: 8px;
    background: color-mix(in srgb, currentColor 3%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    border-radius: 14px;
}

.entity-die-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 9px;
    color: var(--ink);
    background: var(--answer);
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent);
}

.entity-die-visual {
    position: relative;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    color: var(--accent-dark);
}

.entity-die-pictogram {
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: rgba(130, 190, 181, .13);
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
}

.entity-die-pictogram.is-font-die {
    display: block;
    background: currentColor;
    -webkit-mask-image: var(--die-mask);
    mask-image: var(--die-mask);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.entity-die-pictogram.is-percentile-dice {
    position: relative;
    display: block;
}

.entity-die-percentile-part {
    position: absolute;
    width: 70%;
    height: 70%;
    background: currentColor;
    -webkit-mask-image: var(--die-mask);
    mask-image: var(--die-mask);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.entity-die-percentile-part.is-tens {
    bottom: 1px;
    left: -1px;
}

.entity-die-percentile-part.is-ones {
    top: 1px;
    right: -1px;
}

.entity-die-svg-face {
    fill: currentColor;
    stroke: var(--answer);
    stroke-width: 2.5px;
    paint-order: stroke fill;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    text-anchor: middle;
}

.entity-die-outline {
    stroke-width: 2.25;
}

.entity-die-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.entity-die-notation {
    color: var(--accent-dark);
    font-family: var(--font-display);
    font-size: calc(14px * var(--reader-scale-heading));
    line-height: 1.15;
}

.entity-die-name {
    font-size: calc(12px * var(--reader-scale));
    font-weight: 700;
    line-height: 1.25;
}

.entity-die-use {
    margin-top: 2px;
    color: var(--muted);
    font-size: calc(10.5px * var(--reader-scale-small));
    line-height: 1.25;
}

.entity-dice-credit {
    grid-column: 1 / -1;
    padding: 2px 2px 0;
    color: var(--muted);
    font-size: calc(8.5px * var(--reader-scale-small));
    line-height: 1.25;
}

.entity-dice-credit a {
    color: inherit;
    text-decoration-color: color-mix(in srgb, currentColor 48%, transparent);
    text-underline-offset: 2px;
}

@media (min-width: 760px) {
    .entity-die-card {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 8px;
    }

    .entity-die-visual {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 520px) {
    .entity-dice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        padding: 7px;
    }

    .entity-die-card {
        grid-template-columns: 1fr;
        justify-items: center;
        align-content: start;
        gap: 5px;
        padding: 8px 7px;
        text-align: center;
    }

    .entity-die-visual {
        width: 44px;
        height: 44px;
    }
}

.entity-flow-section {
    min-width: 0;
    border: 1px solid rgba(130, 190, 181, .42);
    border-radius: 6px;
    background: rgba(255, 255, 255, .46);
    overflow: hidden;
}

.entity-flow-section + .entity-flow-section {
    margin-top: 2px;
}

.entity-flow-section-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 8px 10px;
    color: var(--accent-dark);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.22;
    cursor: pointer;
    list-style: none;
}

.entity-flow-section-summary::-webkit-details-marker {
    display: none;
}

.entity-flow-section-summary::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid currentColor;
    flex: 0 0 auto;
    transform: translateY(1px);
    transition: transform .16s ease;
}

.entity-flow-section[open] > .entity-flow-section-summary::before {
    transform: rotate(90deg) translateX(1px);
}

.entity-flow-section-summary.is-major {
    background: rgba(238, 248, 245, .78);
    font-size: 14px;
}

.entity-flow-section[open] > .entity-flow-section-summary {
    border-bottom: 1px solid rgba(130, 190, 181, .28);
}

.entity-flow-section-body {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 9px 10px 11px;
}

.entity-elements {
    display: grid;
    gap: 8px;
    min-width: 0;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.36;
}

.entity-elements h3,
.entity-elements p,
.entity-elements ul {
    margin: 0;
}

.entity-elements h3 {
    margin-top: 4px;
    color: var(--accent-dark);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.entity-elements h3:first-child {
    margin-top: 0;
}

.entity-elements p {
    max-width: 78ch;
}

.entity-elements ul {
    max-width: 78ch;
    padding-left: 1.1rem;
}

.entity-elements li {
    margin: 0 0 0.35rem;
}

.entity-element-aside {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 2px 0;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .58);
    border: 1px solid rgba(130, 190, 181, .44);
    border-radius: 6px;
}

.entity-element-aside h3 {
    margin: 0;
    color: var(--accent-dark);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}

.entity-description-point strong {
    color: var(--accent-dark);
    font-weight: 700;
}

.entity-tooltip-description.is-collapsed {
    overflow: hidden;
    max-height: var(--entity-description-collapsed-max, calc(1.34em * 7));
}

.entity-description-toggle {
    width: fit-content;
    margin-top: 7px;
    padding: 5px 9px;
    color: var(--accent-dark);
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(130, 190, 181, .52);
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.entity-description-toggle:hover {
    background: #fff;
    border-color: #82beb5;
}

.entity-info-box {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 9px 10px;
    color: var(--accent-dark);
    background: rgba(238, 248, 245, .72);
    border: 1px solid rgba(130, 190, 181, .48);
    border-radius: 6px;
}

.entity-info-box h3 {
    margin: 0;
    color: var(--accent-dark);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.entity-info-box-text {
    display: grid;
    gap: 5px;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.34;
}

.entity-info-box-text p,
.entity-info-box-text h3,
.entity-info-box-text h4 {
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .entity-tooltip-description {
        transition: none;
    }
}

.entity-traits,
.entity-field-sections {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(130, 120, 105, .22);
}

.entity-core-traits {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 10px;
    background: rgba(255, 255, 255, .38);
    border: 1px solid rgba(130, 190, 181, .42);
    border-radius: 6px;
}

.entity-core-traits h3 {
    margin: 0;
    color: var(--accent-dark);
    font-size: 13px;
    line-height: 1.25;
}

.entity-core-traits-grid {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 0;
    border: 0;
    background: transparent;
}

.entity-core-trait {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 8px 9px;
    background: rgba(255, 255, 255, .62);
    border: 1px solid rgba(130, 190, 181, .34);
    border-radius: 5px;
}

.entity-core-trait dt,
.entity-core-trait dd {
    margin: 0;
    min-width: 0;
    font-size: 12px;
    line-height: 1.28;
}

.entity-core-trait dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    overflow-wrap: normal;
}

.entity-core-trait dd {
    color: var(--ink);
    overflow-wrap: normal;
    word-break: normal;
}

.entity-traits h3 {
    margin: 0;
    color: var(--accent-dark);
    font-size: 13px;
    line-height: 1.25;
}

.entity-trait,
.entity-field-section {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 9px 10px;
    background: rgba(255, 255, 255, .56);
    border: 1px solid rgba(130, 190, 181, .42);
    border-radius: 6px;
}

.entity-trait h4,
.entity-trait p,
.entity-field-section h4,
.entity-field-section p {
    margin: 0;
}

.entity-trait h4,
.entity-field-section h4 {
    color: var(--accent-dark);
    font-size: 13px;
    line-height: 1.25;
}

.entity-trait p,
.entity-field-section p {
    color: var(--ink);
    font-size: 13px;
    line-height: 1.34;
    white-space: pre-line;
}

.entity-tables {
    display: grid;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 10px;
    min-width: 0;
}

.entity-table-block {
    position: relative;
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 9px;
    background: rgba(255, 255, 255, .38);
    border: 1px solid rgba(130, 190, 181, .34);
    border-radius: 6px;
}

.entity-table-block h3 {
    margin: 0;
    color: var(--accent-dark);
    font-family: var(--font-display);
    font-size: 13px;
    line-height: 1.25;
}

.entity-table-meta {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.entity-table-scroll {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(130, 190, 181, .52);
    border-radius: 6px;
    background: var(--table-surface);
}

.entity-table-block.is-spell-table .entity-table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    align-self: start;
}

/* Class spell lists contain several table blocks in one grid. Chromium may
   stretch the automatic grid tracks to the tallest available content height;
   the table layout then assigns that spare height to the header row. Keep
   only these spell-list tracks intrinsic so ordinary entity tables retain
   their existing layout. */
.entity-rule-card:is(.entity-type-class_spell_list, .entity-type-class_spell_list_atom) .entity-tooltip-description,
.entity-table-block.is-spell-table {
    grid-auto-rows: max-content;
    align-content: start;
}

.entity-table-block.is-spell-table {
    align-self: start;
}

.entity-table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    font-size: 11px;
    line-height: 1.22;
}

.entity-table-block.is-spell-table .entity-table {
    display: grid;
    width: 100%;
    min-width: 680px;
    height: auto !important;
    table-layout: fixed;
}

/* Multi-table spell lists can live inside a vertically stretched entity
   grid. Keep their table sections at intrinsic height so spare grid space
   never turns into an oversized header band above the spell rows. */
.entity-table-block.is-spell-table .entity-table :is(thead, tbody) {
    display: grid;
    height: auto !important;
    min-height: 0;
}

.entity-table-block.is-spell-table .entity-table tr {
    display: grid;
    grid-template-columns: minmax(0, 52fr) minmax(0, 32fr) minmax(0, 16fr);
    height: auto !important;
    min-height: 0;
}

.entity-table-block.is-spell-table.is-two-column-table .entity-table tr {
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
}

/* Spell lists use name, school and sometimes a compact detail column. Fixed
   tracks keep header and body aligned at every card width. */
.entity-table-block.is-spell-table .entity-table :is(th, td):first-child {
    width: auto;
    max-width: none;
}

.entity-table-block.is-spell-table .entity-table :is(th, td):nth-child(2) {
    width: auto;
    max-width: none;
}

/* Compact fact tables stay within a narrow tooltip instead of letting the
   label column paint over the value column. */
.entity-table-block.is-two-column-table:not(.is-spell-table) .entity-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.entity-table-block.is-two-column-table:not(.is-spell-table) .entity-table th:first-child,
.entity-table-block.is-two-column-table:not(.is-spell-table) .entity-table td:first-child {
    width: 42%;
    max-width: none;
    white-space: normal;
    overflow-wrap: anywhere;
}

.entity-table-block.is-two-column-table:not(.is-spell-table) .entity-table th,
.entity-table-block.is-two-column-table:not(.is-spell-table) .entity-table td {
    max-width: none;
    overflow-wrap: anywhere;
}

.entity-table-native {
    width: max-content;
    min-width: 100%;
    padding: 6px;
    color: var(--ink);
    background: var(--table-surface);
}

.entity-table-native table {
    border-collapse: collapse;
    margin: 0 !important;
}

.entity-table-native p {
    margin: 0;
}

.entity-table-native td,
.entity-table-native th {
    padding: 4px 6px !important;
    border-bottom: 1px solid rgba(130, 120, 105, .16);
    color: var(--ink);
    font-size: 11px;
    line-height: 1.16;
    vertical-align: top;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: anywhere;
    word-break: normal;
}

.entity-table-native td[bgcolor],
.entity-table-native th[bgcolor] {
    background: var(--table-head) !important;
}

.entity-table th,
.entity-table td {
    width: auto;
    max-width: 180px;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(130, 120, 105, .18);
    text-align: left;
    vertical-align: top;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal;
}

.entity-table th:first-child,
.entity-table td:first-child {
    white-space: normal;
}

.entity-table thead th {
    color: var(--accent-dark);
    background: var(--table-head);
    font-weight: 700;
}

.entity-table tbody tr > * {
    background: var(--table-surface);
}

.entity-table tbody tr:nth-child(even) > * {
    background: var(--table-surface-alt);
}

.entity-table tbody tr:hover > * {
    background: var(--table-hover);
}

.entity-table tbody th {
    color: var(--ink);
    font-weight: 700;
}

/* Some SRD tables are printed as two parallel two-column lists. Keep the
   duplicated header pair and a real center gutter so Dragonborn ancestry and
   Reincarnate remain scannable as two groups at every reader scale. */
.entity-table-block.is-paired-column-table .entity-table {
    border-collapse: separate;
    border-spacing: 0;
}

.entity-table-block.is-paired-column-table .entity-table :is(th, td):nth-child(3) {
    border-left: 10px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 1px 0 color-mix(in srgb, var(--accent-dark) 28%, transparent);
}

.entity-table-block.is-paired-column-table .entity-table thead th:nth-child(2),
.entity-table-block.is-paired-column-table .entity-table tbody :is(th, td):nth-child(2) {
    padding-right: 14px;
}

.entity-table-block.is-paired-column-table .entity-table thead th:nth-child(3),
.entity-table-block.is-paired-column-table .entity-table tbody :is(th, td):nth-child(3) {
    padding-left: 14px;
}

.entity-table-block.is-class-feature-table .entity-table th:first-child,
.entity-table-block.is-class-feature-table .entity-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--table-sticky);
    box-shadow: 1px 0 0 rgba(130, 120, 105, .2);
}

.entity-table-block.is-class-feature-table .entity-table thead th:first-child {
    z-index: 3;
    background: var(--table-head);
}

/* Class progression tables are scanned primarily by level, proficiency bonus
   and feature name. Keep short values compact everywhere, while the feature
   and resource columns receive enough breathing room to remain scannable. */
.entity-table-block.is-class-feature-table .entity-table th:nth-child(1),
.entity-table-block.is-class-feature-table .entity-table td:nth-child(1) {
    width: 58px;
    min-width: 58px;
    max-width: 58px;
    padding-right: 6px;
    padding-left: 8px;
}

.entity-table-block.is-class-feature-table .entity-table th:nth-child(2),
.entity-table-block.is-class-feature-table .entity-table td:nth-child(2) {
    width: 104px;
    min-width: 104px;
    max-width: 104px;
    padding-right: 12px;
    padding-left: 12px;
    text-align: center;
    overflow-wrap: anywhere;
}

.entity-table-block.is-class-feature-table .entity-table th:nth-child(3),
.entity-table-block.is-class-feature-table .entity-table td:nth-child(3) {
    width: 340px;
    min-width: 280px;
    max-width: 340px;
    padding-right: 14px;
    padding-left: 14px;
}

.entity-table-block.is-class-feature-table .entity-table th:nth-child(n + 4),
.entity-table-block.is-class-feature-table .entity-table td:nth-child(n + 4) {
    width: 136px;
    min-width: 112px;
    max-width: 156px;
    padding-right: 12px;
    padding-left: 12px;
}

@media (max-width: 520px) {
    .entity-table-block.is-class-feature-table .entity-table th:nth-child(1),
    .entity-table-block.is-class-feature-table .entity-table td:nth-child(1) {
        width: 48px;
        min-width: 48px;
        max-width: 48px;
        padding-right: 5px;
        padding-left: 6px;
    }

    .entity-table-block.is-class-feature-table .entity-table th:nth-child(2),
    .entity-table-block.is-class-feature-table .entity-table td:nth-child(2) {
        width: 68px;
        min-width: 68px;
        max-width: 68px;
        padding-right: 5px;
        padding-left: 5px;
    }

    .entity-table-block.is-class-feature-table .entity-table th:nth-child(3),
    .entity-table-block.is-class-feature-table .entity-table td:nth-child(3) {
        width: 230px;
        min-width: 220px;
        max-width: 230px;
    }
}

.entity-table tr:last-child th,
.entity-table tr:last-child td {
    border-bottom: 0;
}

.entity-table-block.is-collapsed-table .entity-table-scroll {
    max-height: 360px;
}

.entity-table-toggle {
    width: fit-content;
    margin-top: 2px;
    padding: 5px 9px;
    color: var(--accent-dark);
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(130, 190, 181, .52);
    border-radius: 999px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.entity-table-toggle:hover {
    background: #fff;
    border-color: #82beb5;
}

.entity-table-notice {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 9px 10px;
    color: var(--accent-dark);
    background: rgba(255, 255, 255, .62);
    border: 1px solid #bfd7d2;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.35;
}

.entity-table-notice strong {
    font-size: 12px;
}

.entity-table-notice a {
    width: fit-content;
    margin-top: 2px;
    color: var(--accent-dark);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.message.assistant .bubble > .entity-rule-card {
    margin-top: 4px;
}

.message.assistant .bubble > .entity-rule-card.is-compact {
    display: block;
}

.message.assistant .bubble > .entity-rule-card.is-compact .entity-description-block {
    max-width: 68ch;
    padding-top: 0;
    border-top: 0;
}

.message.assistant .bubble > .entity-rule-card .entity-tooltip-list {
    grid-template-columns: minmax(132px, auto) 1fr;
}

@media (min-width: 768px) {
    .message.assistant .bubble > .entity-rule-card {
        grid-template-columns: minmax(260px, 38%) minmax(0, 1fr);
        align-items: start;
        column-gap: 24px;
    }

    .message.assistant .bubble > .entity-rule-card .ruleset-tabs {
        grid-column: 1 / -1;
    }

    .message.assistant .bubble > .entity-rule-card .entity-main-column {
        grid-column: 2;
        margin: 0;
        padding: 0 0 0 20px;
        border-left: 1px solid rgba(130, 120, 105, .22);
    }

    .message.assistant .bubble > .entity-rule-card .entity-main-column .entity-description-block {
        padding: 0;
        border-top: 0;
    }

    /* Overview entries without structured detail data do not need the empty
       metadata column used by ordinary entities. */
    .message.assistant .bubble > .entity-rule-card:not(:has(> .entity-tooltip-list)) {
        grid-template-columns: minmax(0, 1fr);
    }

    .message.assistant .bubble > .entity-rule-card:not(:has(> .entity-tooltip-list)) > * {
        grid-column: 1 / -1;
    }

    .message.assistant .bubble > .entity-rule-card:not(:has(> .entity-tooltip-list)) .entity-main-column {
        grid-column: 1 / -1;
        width: 100%;
        max-width: 96ch;
        padding: 0;
        border-left: 0;
    }

    .message.assistant .bubble > .entity-rule-card.is-compact .entity-description-block {
        padding: 0;
        border-left: 0;
    }

    .message.assistant .bubble > .entity-rule-card.is-compact .entity-main-column {
        padding: 0;
        border-left: 0;
    }

    .message.assistant .bubble > .entity-rule-card .entity-table-notice {
        grid-column: 2;
        margin-left: 20px;
    }

    .message.assistant .bubble > .entity-rule-card .entity-tables {
        grid-column: 1 / -1;
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-character_creation {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-character_creation > * {
        grid-column: 1 / -1;
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-character_creation .entity-main-column {
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        border-left: 0;
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-character_creation .entity-description-block {
        max-width: none;
        padding: 0;
        border-top: 0;
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-character_creation .entity-table-block,
    .message.assistant .bubble > .entity-rule-card.entity-type-character_creation .entity-table-scroll {
        width: 100%;
        max-width: 100%;
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-class_spell_list_atom,
    .message.assistant .bubble > .entity-rule-card.entity-type-class_spell_list {
        grid-template-columns: 1fr;
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-class_spell_list_atom > *,
    .message.assistant .bubble > .entity-rule-card.entity-type-class_spell_list > * {
        grid-column: 1 / -1;
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-species,
    .message.assistant .bubble > .entity-rule-card.entity-type-background,
    .message.assistant .bubble > .entity-rule-card.entity-type-class,
    .message.assistant .bubble > .entity-rule-card.entity-type-class_subclass,
    .message.assistant .bubble > .entity-rule-card.entity-type-class_subclass_atom,
    .message.assistant .bubble > .entity-rule-card.entity-type-equipment_group,
    .message.assistant .bubble > .entity-rule-card.entity-type-feat,
    .message.assistant .bubble > .entity-rule-card.entity-type-spell {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-species .entity-tooltip-list,
    .message.assistant .bubble > .entity-rule-card.entity-type-background .entity-tooltip-list,
    .message.assistant .bubble > .entity-rule-card.entity-type-class .entity-tooltip-list,
    .message.assistant .bubble > .entity-rule-card.entity-type-class_subclass .entity-tooltip-list,
    .message.assistant .bubble > .entity-rule-card.entity-type-class_subclass_atom .entity-tooltip-list,
    .message.assistant .bubble > .entity-rule-card.entity-type-equipment_group .entity-tooltip-list,
    .message.assistant .bubble > .entity-rule-card.entity-type-feat .entity-tooltip-list,
    .message.assistant .bubble > .entity-rule-card.entity-type-spell .entity-tooltip-list {
        grid-template-columns: max-content minmax(110px, 1fr) max-content minmax(110px, 1fr);
        gap: 7px 14px;
        align-items: baseline;
        padding: 10px 12px;
        background: rgba(255, 255, 255, .42);
        border: 1px solid rgba(130, 190, 181, .35);
        border-radius: 6px;
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-species .entity-description-block,
    .message.assistant .bubble > .entity-rule-card.entity-type-background .entity-description-block,
    .message.assistant .bubble > .entity-rule-card.entity-type-class .entity-description-block,
    .message.assistant .bubble > .entity-rule-card.entity-type-class_subclass .entity-description-block,
    .message.assistant .bubble > .entity-rule-card.entity-type-class_subclass_atom .entity-description-block,
    .message.assistant .bubble > .entity-rule-card.entity-type-equipment_group .entity-description-block,
    .message.assistant .bubble > .entity-rule-card.entity-type-feat .entity-description-block,
    .message.assistant .bubble > .entity-rule-card.entity-type-spell .entity-description-block {
        max-width: 74ch;
        padding: 0;
        border-top: 0;
        border-left: 0;
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-species .entity-main-column,
    .message.assistant .bubble > .entity-rule-card.entity-type-background .entity-main-column,
    .message.assistant .bubble > .entity-rule-card.entity-type-class .entity-main-column,
    .message.assistant .bubble > .entity-rule-card.entity-type-class_subclass .entity-main-column,
    .message.assistant .bubble > .entity-rule-card.entity-type-class_subclass_atom .entity-main-column,
    .message.assistant .bubble > .entity-rule-card.entity-type-equipment_group .entity-main-column,
    .message.assistant .bubble > .entity-rule-card.entity-type-feat .entity-main-column,
    .message.assistant .bubble > .entity-rule-card.entity-type-spell .entity-main-column {
        grid-column: 1 / -1;
        max-width: 74ch;
        padding: 0;
        border-left: 0;
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-species .entity-traits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-background .entity-field-sections {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-background .entity-field-equipment {
        grid-column: 1 / -1;
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-class .entity-field-sections {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-class > * {
        grid-column: 1 / -1;
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-class .entity-core-traits-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-class .entity-core-trait-skill_proficiencies,
    .message.assistant .bubble > .entity-rule-card.entity-type-class .entity-core-trait-starting_equipment {
        grid-column: 1 / -1;
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-class .entity-field-starting_equipment,
    .message.assistant .bubble > .entity-rule-card.entity-type-class .entity-field-skill_proficiencies {
        grid-column: 1 / -1;
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-equipment_group .entity-field-sections {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-feat .entity-field-sections {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-feat .entity-field-benefit,
    .message.assistant .bubble > .entity-rule-card.entity-type-feat .entity-field-benefit_sections {
        grid-column: 1 / -1;
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-species .entity-traits h3 {
        grid-column: 1 / -1;
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-species .entity-tables {
        grid-column: 1;
    }
}

.answer-text {
    color: var(--ink);
}

.answer-text.is-atomic {
    font-size: 18px;
    font-weight: 700;
}

.answer-text.is-summary {
    max-width: 68ch;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    white-space: pre-line;
}

.meta {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.meta span {
    padding: 5px 8px;
    color: var(--muted);
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(130, 120, 105, .28);
    border-radius: 999px;
    font-size: 12px;
}

.answer-header > .meta {
    flex: 0 0 auto;
    max-width: 100%;
}

.answer-header > .meta span {
    white-space: nowrap;
}

.meta .confidence {
    padding: 0;
    color: #3f7664;
    background: transparent;
    border: 0;
    border-radius: 0;
    opacity: .7;
    font-size: 11px;
    font-weight: 700;
}

.meta .confidence.is-medium {
    color: #9a741f;
}

.meta .confidence.is-low {
    color: #a0443f;
}

.message.assistant .answer-header .meta .confidence {
    margin-left: auto;
}

.source-list {
    margin: 18px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid rgba(130, 120, 105, .22);
    list-style: none;
    color: var(--muted);
    opacity: .7;
    font-size: 12px;
}

.source-list li + li {
    margin-top: 6px;
}

.source-list a {
    color: var(--accent-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.suggestion-chip {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
}

#cursor-star-trail {
    position: fixed;
    z-index: 120;
    inset: 0;
    pointer-events: none;
}

#touch-scroll-star-trail {
    position: fixed;
    z-index: 120;
    inset: 0;
    pointer-events: none;
}

#touch-scroll-star-trail[data-renderer="canvas"] {
    width: 100%;
    height: 100%;
}

#touch-scroll-star-trail[data-renderer="canvas"][data-active-particles="0"] {
    visibility: hidden;
}

.cursor-star-trail-particle {
    position: fixed;
    width: 42px;
    height: 42px;
    background: var(--trail-color);
    clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
    box-shadow: 0 0 20px color-mix(in srgb, var(--trail-color), transparent 8%);
    pointer-events: none;
    animation: cursor-star-trail 1.35s cubic-bezier(.2, .72, .3, 1) both;
}

.guide-star-trail-cursor {
    position: fixed;
    z-index: 2;
    width: 34px;
    height: 34px;
    color: var(--cursor-star-2);
    filter: drop-shadow(0 0 5px var(--cursor-star-1)) drop-shadow(0 0 12px var(--cursor-star-3));
    pointer-events: none;
    font-size: 32px;
    line-height: 34px;
    text-align: center;
    transform: translate(-50%, -50%);
    animation: guide-star-trail-cursor-pulse .8s ease-in-out infinite alternate;
}

.touch-scroll-star-trail-particle {
    position: fixed;
    width: 77px;
    height: 77px;
    background: var(--touch-trail-color);
    clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
    box-shadow: 0 0 14px color-mix(in srgb, var(--touch-trail-color), transparent 6%);
    pointer-events: none;
    animation: touch-scroll-star-trail 1.4s cubic-bezier(.2, .72, .3, 1) both;
}

.collection-item,
.suggestion-chip,
.suggestion-button {
    position: relative;
}

#touch-chip-spark-layer {
    position: fixed;
    z-index: 130;
    inset: 0;
    pointer-events: none;
}

.touch-chip-spark {
    position: fixed;
    z-index: 10;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}

.touch-chip-spark-particle {
    position: absolute;
    top: var(--touch-spark-y);
    left: var(--touch-spark-x);
    width: var(--touch-spark-size, 50px);
    height: var(--touch-spark-size, 50px);
    background: var(--cursor-star-1);
    clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
    box-shadow: 0 0 12px color-mix(in srgb, var(--cursor-star-1), transparent 8%);
    animation: touch-chip-spark .68s cubic-bezier(.2, .75, .3, 1) both;
}

.touch-chip-spark::before {
    position: absolute;
    top: var(--touch-spark-y);
    left: var(--touch-spark-x);
    width: 18px;
    height: 18px;
    content: '';
    border: 3px solid var(--cursor-star-1);
    border-radius: 50%;
    box-shadow: 0 0 14px color-mix(in srgb, var(--cursor-star-1), transparent 10%);
    transform: translate(-50%, -50%);
    animation: touch-chip-ring .65s ease-out both;
}

.touch-chip-spark-particle:nth-child(2n) {
    background: var(--cursor-star-2);
}

.touch-chip-spark-particle:nth-child(3n) {
    background: var(--cursor-star-3);
}

.touch-chip-spark--fire .touch-chip-spark-particle {
    background: radial-gradient(circle at 42% 65%, #fff6a7 0 10%, #ffc04d 26%, #ed652d 54%, #ae3421 100%);
    clip-path: polygon(50% 0%, 68% 38%, 93% 53%, 62% 66%, 50% 100%, 35% 67%, 8% 52%, 33% 36%);
    box-shadow: 0 0 16px rgba(244, 104, 38, .86);
    animation-name: touch-fire-burst;
}

.touch-chip-spark--fire::before {
    border-color: #ffc04d;
    box-shadow: 0 0 20px rgba(237, 101, 45, .76);
}

.touch-chip-spark--ice .touch-chip-spark-particle {
    background: linear-gradient(135deg, #ffffff 0 18%, #baf1ff 40%, #60b9df 100%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);
    box-shadow: 0 0 16px rgba(123, 222, 255, .82);
    animation-name: touch-ice-burst;
}

.touch-chip-spark--ice::before {
    border-color: #baf1ff;
    box-shadow: 0 0 20px rgba(96, 185, 223, .74);
}

.is-touch-sparkling {
    animation: touch-chip-pop .3s ease-out both;
}

@keyframes touch-chip-spark {
    0% { transform: translate(-50%, -50%) scale(.25); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--touch-spark-drift-x)), calc(-50% + var(--touch-spark-drift-y))) scale(.2) rotate(90deg); opacity: 0; }
}

@keyframes touch-fire-burst {
    0% { transform: translate(-50%, -50%) scale(.15) rotate(0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--touch-spark-drift-x)), calc(-50% + var(--touch-spark-drift-y))) scale(.08) rotate(145deg); opacity: 0; }
}

@keyframes touch-ice-burst {
    0% { transform: translate(-50%, -50%) scale(.2) rotate(12deg); opacity: 0; }
    18% { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--touch-spark-drift-x)), calc(-50% + var(--touch-spark-drift-y))) scale(.14) rotate(90deg); opacity: 0; }
}

@keyframes touch-chip-pop {
    0% { transform: scale(1); }
    45% { transform: scale(.96); }
    100% { transform: scale(1); }
}

@keyframes touch-chip-ring {
    0% { width: 10px; height: 10px; opacity: 1; }
    100% { width: 108px; height: 108px; opacity: 0; }
}

@keyframes cursor-star-trail {
    0% { transform: translate(-50%, -50%) scale(.35) rotate(0); opacity: 0; }
    15% { opacity: 1; }
    72% { opacity: .78; }
    100% { transform: translate(calc(-50% + var(--trail-drift-x)), calc(-50% + var(--trail-drift-y))) scale(.24) rotate(160deg); opacity: 0; }
}

@keyframes guide-star-trail-cursor-pulse {
    from { opacity: .78; transform: translate(-50%, -50%) scale(.9) rotate(-8deg); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1.14) rotate(8deg); }
}

@keyframes touch-scroll-star-trail {
    0% { transform: translate(-50%, -50%) scale(.35) rotate(0); opacity: 0; }
    16% { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--touch-trail-drift-x)), calc(-50% + var(--touch-trail-drift-y))) scale(.18) rotate(130deg); opacity: 0; }
}

.alternative-label {
    margin: 0 0 5px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    opacity: .58;
    text-transform: uppercase;
}

.message-alternatives {
    width: 100%;
    margin: 18px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid rgba(130, 120, 105, .22);
}

.message-alternatives.is-class-spell-suggestion {
    margin-top: 14px;
}

.entity-rule-card :is(.entity-table-block, .entity-flow-section).is-anchor-target,
:is(.entity-rule-card, .entity-drawer) .entity-tooltip-description h4.is-anchor-target {
    scroll-margin-block: 96px;
    border-radius: 5px;
    animation: entity-deep-link-highlight 1.9s ease-out both;
}

@keyframes entity-deep-link-highlight {
    0%, 100% {
        filter: brightness(1);
        box-shadow: none;
    }
    24%, 58% {
        filter: brightness(1.1);
        box-shadow:
            0 0 0 3px var(--cursor-star-2),
            0 0 26px color-mix(in srgb, var(--cursor-star-2) 58%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .entity-rule-card :is(.entity-table-block, .entity-flow-section).is-anchor-target,
    :is(.entity-rule-card, .entity-drawer) .entity-tooltip-description h4.is-anchor-target {
        animation: none;
        box-shadow: 0 0 0 3px var(--cursor-star-2);
    }
}

.alternative-suggestions {
    gap: 6px;
    margin-top: 4px;
}

.alternative-suggestions .suggestion-button {
    padding: 4px 7px;
    color: rgba(19, 62, 61, .82);
    background: rgba(255, 255, 255, .54);
    border-color: rgba(130, 190, 181, .55);
    border-radius: 999px;
    font-size: calc(11px * var(--reader-scale));
    font-weight: 700;
}

.entity-list-suggestions {
    gap: 7px;
    margin-top: 10px;
}

.entity-list-suggestions .suggestion-button {
    max-width: min(100%, 42ch);
    overflow: hidden;
    padding: 6px 9px;
    font-size: calc(13px * var(--reader-scale));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suggestion-button {
    padding: 7px 10px;
    color: var(--accent-dark);
    background: #fff;
    border: 1px solid #bfd7d2;
    border-radius: 999px;
    cursor: pointer;
    font-size: calc(13px * var(--reader-scale));
    font-weight: 700;
}

.alphabet-scroll-marker {
    position: fixed;
    z-index: 29;
    top: calc(90px + env(safe-area-inset-top));
    right: max(64px, calc((100vw - var(--chat-frame-width)) / 2 + 64px));
    left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 42px;
    height: 128px;
    padding: 5px 3px;
    color: var(--accent-dark);
    background: transparent;
    border: 1px solid rgba(191, 183, 150, .16);
    border-radius: 999px;
    box-shadow: 0 5px 14px rgba(38, 56, 56, .045);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(12px, 0, 0) scale(.9);
    transition: opacity .28s ease, transform .34s cubic-bezier(.22, .8, .3, 1);
}

.alphabet-scroll-marker.is-visible {
    z-index: 90;
    opacity: .88;
    transform: translate3d(0, 0, 0) scale(1);
}

.alphabet-scroll-marker-letter {
    --alphabet-wheel-angle: -52deg;
    --alphabet-wheel-opacity: .12;
    --alphabet-wheel-scale: .72;
    display: block;
    width: auto;
    height: 20px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    opacity: var(--alphabet-wheel-opacity);
    backface-visibility: hidden;
    transform: perspective(150px) rotateX(var(--alphabet-wheel-angle)) scale(var(--alphabet-wheel-scale));
    transform-origin: center;
    transition: opacity .18s ease, transform .18s ease;
}

.alphabet-scroll-marker-letter[data-offset="-2"] {
    --alphabet-wheel-angle: -52deg;
}

.alphabet-scroll-marker-letter[data-offset="-1"] {
    --alphabet-wheel-angle: -27deg;
    --alphabet-wheel-opacity: .36;
    --alphabet-wheel-scale: .86;
}

.alphabet-scroll-marker-letter[data-offset="1"] {
    --alphabet-wheel-angle: 27deg;
    --alphabet-wheel-opacity: .36;
    --alphabet-wheel-scale: .86;
}

.alphabet-scroll-marker-letter[data-offset="0"] {
    --alphabet-wheel-angle: 0deg;
    --alphabet-wheel-opacity: 1;
    --alphabet-wheel-scale: 1;
    width: auto;
    height: 31px;
    font-size: 27px;
    line-height: 31px;
}

.alphabet-scroll-marker-letter[data-offset="2"] {
    --alphabet-wheel-angle: 52deg;
}

/* Newly reached letters only breathe in softly; the marker should remain a
   quiet orientation aid rather than competing with the list itself. */
.alphabet-scroll-marker.is-rolling .alphabet-scroll-marker-letter {
    animation: alphabet-scroll-marker-wheel .38s cubic-bezier(.2, .76, .28, 1) both;
    will-change: filter, opacity, transform;
}

.alphabet-scroll-marker.is-rolling .alphabet-scroll-marker-letter[data-offset="-2"] { animation-delay: .02s; }
.alphabet-scroll-marker.is-rolling .alphabet-scroll-marker-letter[data-offset="-1"] { animation-delay: .035s; }
.alphabet-scroll-marker.is-rolling .alphabet-scroll-marker-letter[data-offset="0"] { animation-delay: .055s; }
.alphabet-scroll-marker.is-rolling .alphabet-scroll-marker-letter[data-offset="1"] { animation-delay: .075s; }
.alphabet-scroll-marker.is-rolling .alphabet-scroll-marker-letter[data-offset="2"] { animation-delay: .09s; }

@keyframes alphabet-scroll-marker-wheel {
    0% {
        opacity: .08;
        filter: blur(.7px);
        transform: perspective(150px) translateY(9px) rotateX(calc(var(--alphabet-wheel-angle) - 30deg)) scale(var(--alphabet-wheel-scale));
    }
    72% {
        filter: blur(0);
        transform: perspective(150px) translateY(-1px) rotateX(calc(var(--alphabet-wheel-angle) + 4deg)) scale(var(--alphabet-wheel-scale));
    }
    100% {
        opacity: var(--alphabet-wheel-opacity);
        filter: blur(0);
        transform: perspective(150px) translateY(0) rotateX(var(--alphabet-wheel-angle)) scale(var(--alphabet-wheel-scale));
    }
}

body.is-effects-disabled .alphabet-scroll-marker.is-rolling .alphabet-scroll-marker-letter {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .alphabet-scroll-marker.is-rolling .alphabet-scroll-marker-letter {
        animation: none;
    }
}

.alphabet-scroll-marker-text {
    display: none;
}

.suggestion-chip:has(.suggestion-info-button) .suggestion-button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.suggestion-info-button {
    width: calc(25px * var(--reader-scale));
    padding: 0;
    color: var(--accent-dark);
    background: rgba(255, 255, 255, .72);
    border: 1px solid #bfd7d2;
    border-left: 0;
    border-radius: 0 999px 999px 0;
    cursor: pointer;
    font-size: calc(11.55px * var(--reader-scale));
    font-weight: 700;
    line-height: 1;
}

.category-icon {
    display: inline-block;
    width: 1em;
    min-width: 1em;
    color: currentColor;
    font-size: .96em;
    line-height: 1;
    text-align: center;
    vertical-align: -.08em;
}

.entity-title-category-icon {
    flex: 0 0 auto;
    margin-right: .34em;
}

.collection-card-preview-chip .category-icon {
    font-size: .92em;
}

.suggestion-button:hover {
    background: var(--answer);
}

.suggestion-info-button:hover,
.suggestion-chip.is-open .suggestion-info-button {
    background: var(--answer);
}

.suggestion-preview-panel {
    position: fixed;
    z-index: 35;
    left: 0;
    bottom: calc(100% + 8px);
    display: none;
    width: min(420px, calc(100vw - 24px));
    max-height: min(520px, calc(100vh - 190px));
    overflow: auto;
    padding: 14px;
    color: var(--ink);
    background: #fffdf7;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(50, 40, 25, .16);
    font-size: 13px;
    line-height: 1.34;
}

.suggestion-chip.is-open .suggestion-preview-panel {
    display: block;
}

.suggestion-preview-panel .entity-rule-card,
.entity-inline-preview-panel .entity-rule-card {
    gap: 8px;
}

.suggestion-preview-panel .entity-tooltip-list,
.entity-inline-preview-panel .entity-tooltip-list {
    grid-template-columns: minmax(86px, auto) 1fr;
}

.suggestion-preview-panel .entity-description-block,
.entity-inline-preview-panel .entity-description-block {
    padding-top: 8px;
}

.spell-table-name {
    margin-left: 6px;
}

.entity-inline-preview {
    position: relative;
    display: inline-flex;
    vertical-align: baseline;
}

.entity-inline-preview-button {
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    padding: 0;
    color: var(--accent-dark);
    background: rgba(255, 255, 255, .76);
    border: 1px solid #bfd7d2;
    border-radius: 999px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.entity-inline-preview-button:hover,
.entity-inline-preview.is-open .entity-inline-preview-button {
    background: var(--answer);
}

.entity-inline-preview-panel {
    position: fixed;
    z-index: 35;
    left: 0;
    bottom: calc(100% + 8px);
    display: none;
    width: min(420px, calc(100vw - 24px));
    max-height: min(520px, calc(100vh - 190px));
    overflow: auto;
    padding: 14px;
    color: var(--ink);
    background: #fffdf7;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(50, 40, 25, .16);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.34;
    text-align: left;
}

.entity-inline-preview.is-open .entity-inline-preview-panel {
    display: block;
}

.entity-inline-preview-loading {
    display: block;
    color: var(--muted);
}

.start-suggestions {
    justify-content: center;
    margin-top: 0;
}

.start-categories-message {
    align-items: center;
}

.start-suggestions .suggestion-button {
    padding: 5px 9px;
}

.start-suggestion-desktop-primary {
    display: none;
}

@media (min-width: 900px) {
    .start-suggestion-desktop-primary {
        display: inline-flex;
    }

    .start-suggestion-desktop-duplicate {
        display: none;
    }
}

.start-suggestions-toggle {
    align-self: center;
    gap: 5px;
    margin-top: 8px;
    padding: 5px 11px;
}

body .message.assistant.start-categories-message > .suggestion-button.start-suggestions-toggle {
    color: var(--surface-strong);
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    box-shadow: none;
    font-weight: 700;
}

body .message.assistant.start-categories-message > .suggestion-button.start-suggestions-toggle:hover,
body .message.assistant.start-categories-message > .suggestion-button.start-suggestions-toggle:focus-visible {
    color: var(--surface-strong);
    background: color-mix(in srgb, var(--accent-dark), var(--ink) 12%);
    border-color: color-mix(in srgb, var(--accent-dark), var(--ink) 12%);
}

body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode) .message.assistant.start-categories-message > .suggestion-button.start-suggestions-toggle,
body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode) .message.assistant.start-categories-message > .suggestion-button.start-suggestions-toggle:hover,
body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode) .message.assistant.start-categories-message > .suggestion-button.start-suggestions-toggle:focus-visible {
    color: #fff;
}

body.is-dark-mode .message.assistant.start-categories-message > .suggestion-button.start-suggestions-toggle {
    color: #f2f7f2;
    background: #3f6668;
    border-color: #3f6668;
}

body.is-dark-mode .message.assistant.start-categories-message > .suggestion-button.start-suggestions-toggle:hover,
body.is-dark-mode .message.assistant.start-categories-message > .suggestion-button.start-suggestions-toggle:focus-visible {
    color: #fff;
    background: #34585a;
    border-color: #34585a;
}

.start-suggestions-toggle-icon {
    display: inline-block;
    font-size: .8em;
    transition: transform .3s cubic-bezier(.22, .78, .28, 1);
}

.start-suggestions-more {
    display: grid;
    flex: 1 0 100%;
    grid-template-rows: 0fr;
    margin-top: -6px;
    opacity: 0;
    pointer-events: none;
    transition:
        grid-template-rows .36s cubic-bezier(.22, .78, .28, 1),
        margin-top .36s cubic-bezier(.22, .78, .28, 1),
        opacity .2s ease;
}

.start-suggestions-more-inner {
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    overflow: hidden;
}

.start-suggestions-more .suggestion-button {
    opacity: 0;
    transform: translateY(-7px);
    transition:
        opacity .2s ease,
        transform .3s cubic-bezier(.22, .78, .28, 1);
}

.start-suggestions.is-expanded .start-suggestions-toggle-icon {
    transform: rotate(180deg);
}

.start-suggestions.is-expanded .start-suggestions-more {
    grid-template-rows: 1fr;
    margin-top: 0;
    opacity: 1;
    pointer-events: auto;
}

.start-suggestions.is-expanded .start-suggestions-more .suggestion-button {
    opacity: 1;
    transform: translateY(0);
}

.start-suggestions.is-expanded .start-suggestions-more .suggestion-button:nth-child(n + 5) {
    transition-delay: .035s;
}

.start-suggestions.is-expanded .start-suggestions-more .suggestion-button:nth-child(n + 9) {
    transition-delay: .07s;
}

@media (prefers-reduced-motion: reduce) {
    .start-suggestions-more,
    .start-suggestions-more .suggestion-button,
    .start-suggestions-toggle-icon {
        transition: none;
    }
}

.suggestion-button--highlight {
    color: #fff;
    background: #5f9094;
    border-color: #477981;
    box-shadow: 0 5px 12px rgba(63, 102, 104, .16);
}

.suggestion-button--highlight:hover,
.suggestion-button--highlight:focus-visible {
    color: #fff;
    background: #477981;
    border-color: #3f6668;
}

.bubble.is-guide-step {
    background: rgba(240, 248, 246, .94);
    border-color: #a8cec9;
}

.guide-step-title {
    margin: 0 0 6px;
    color: var(--accent-dark);
    font-family: var(--font-display);
    font-size: calc(15px * var(--reader-scale));
    font-weight: 700;
}

.guide-step-suggestions {
    margin-top: 10px;
}

.bubble.is-guide-tip {
    position: relative;
    overflow: visible;
    padding: 7px 20px 10px 22px;
    background: transparent !important;
    border: 1px solid color-mix(in srgb, var(--accent), transparent 78%) !important;
    border-radius: 18px;
    box-shadow: none !important;
}

.bubble.is-guide-tip::before {
    display: none;
}

.bubble.is-guide-tip .guide-step-title {
    padding-left: 0;
    color: #315d68;
}

.bubble.is-guide-tip .answer-text {
    padding-left: 0;
}

.bubble.is-guide-tip .bubble-actions {
    display: none;
}

.guide-tip-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.guide-tip-title .ph-lightbulb {
    color: #5f9094;
    font-size: 1.5em;
    line-height: 1;
}

.guide-collection-link {
    color: var(--accent-dark);
    font-weight: 700;
    text-decoration-color: color-mix(in srgb, currentColor, transparent 35%);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.guide-collection-link:hover,
.guide-collection-link:focus-visible {
    color: var(--accent);
    text-decoration-color: currentColor;
}

.character-example-tutorial-guard {
    --tutorial-edge-color: rgba(48, 92, 99, .2);
    position: fixed;
    z-index: 115;
    inset: 0;
    cursor: progress;
    pointer-events: auto;
}

.character-example-tutorial-guard::before {
    position: absolute;
    inset: 0;
    content: '';
    background: radial-gradient(ellipse at center, transparent 58%, var(--tutorial-edge-color) 100%);
    box-shadow: inset 0 0 30px var(--tutorial-edge-color);
    pointer-events: none;
    animation: character-example-tutorial-edge 1.8s ease-in-out infinite alternate;
}

.character-example-tutorial-cancel {
    position: fixed;
    z-index: 165;
    left: 50%;
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
    min-height: 42px;
    padding: 9px 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ink);
    background: color-mix(in srgb, var(--surface-strong), transparent 4%);
    border: 1px solid color-mix(in srgb, var(--accent-dark), var(--line) 45%);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2), 0 0 0 2px color-mix(in srgb, var(--surface), transparent 28%);
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transform: translateX(-50%);
    -webkit-tap-highlight-color: transparent;
}

.character-example-tutorial-cancel::before {
    content: '×';
    font-size: 1.25em;
    line-height: .8;
}

.character-example-tutorial-cancel:hover {
    color: var(--surface-strong);
    background: var(--accent-dark);
}

.character-example-tutorial-cancel:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent), transparent 25%);
    outline-offset: 3px;
}

.character-example-tutorial-cancel:active {
    transform: translateX(-50%) scale(.97);
}

body.is-dark-mode .character-example-tutorial-guard {
    --tutorial-edge-color: rgba(131, 168, 158, .26);
}

body.is-tavern-mode .character-example-tutorial-guard {
    --tutorial-edge-color: rgba(213, 143, 75, .27);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .character-example-tutorial-guard::before {
        -webkit-backdrop-filter: blur(1px);
        backdrop-filter: blur(1px);
        -webkit-mask-image: radial-gradient(ellipse at center, transparent 54%, #000 88%);
        mask-image: radial-gradient(ellipse at center, transparent 54%, #000 88%);
    }
}

@keyframes character-example-tutorial-edge {
    from { opacity: .66; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .character-example-tutorial-guard::before {
        animation: none;
    }
}

.collection-card.is-guide-created {
    animation: guide-collection-arrival 1.25s ease-out both;
}

.collection-item.is-guide-created {
    z-index: 2;
    animation: guide-collection-item-arrival 1.4s ease-out both;
}

.guide-flying-entity-chip {
    position: fixed;
    z-index: 160;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: calc(100vw - 20px);
    padding: 8px 13px 8px 15px;
    overflow: hidden;
    color: var(--ink);
    background: var(--surface-strong);
    border: 1px solid color-mix(in srgb, var(--cursor-star-2), var(--line) 42%);
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .2),
        0 0 0 2px color-mix(in srgb, var(--cursor-star-2), transparent 42%),
        0 0 24px color-mix(in srgb, var(--cursor-star-1), transparent 34%);
    pointer-events: none;
    font-weight: 700;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform-origin: center;
    will-change: transform, opacity;
}

.guide-flying-entity-chip > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.guide-flying-entity-chip > i {
    flex: 0 0 auto;
    color: var(--accent-dark);
    font-size: 19px;
}

body.is-dark-mode .guide-flying-entity-chip {
    color: #f3eee1;
    background: #30413d;
}

body.is-tavern-mode .guide-flying-entity-chip {
    color: #3a271e;
    background: #ead2a2;
}

@keyframes guide-collection-arrival {
    0% { filter: brightness(1); }
    28% { filter: brightness(1.16); box-shadow: 0 0 0 2px var(--cursor-star-2), 0 0 24px var(--cursor-star-1); }
    100% { filter: brightness(1); }
}

@keyframes guide-collection-item-arrival {
    0% { filter: brightness(1); transform: translateY(2px) scale(.98); }
    30% { filter: brightness(1.22); transform: translateY(0) scale(1.035); box-shadow: 0 0 0 2px var(--cursor-star-2), 0 0 18px var(--cursor-star-1); }
    100% { filter: brightness(1); transform: translateY(0) scale(1); }
}

/* The guide entry is account-bound and must not flash before authentication
   status has been confirmed. */
.mod_companion_chat:not([data-authenticated="true"]) [data-prompt-action="character-creation-guide"] {
    display: none;
}

.answer-entity-reference {
    margin-top: 10px;
}

.answer-entity-reference .suggestion-button {
    background: rgba(255, 255, 255, .72);
}

.examples {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.examples button {
    padding: 7px 10px;
    color: var(--accent-dark);
    background: #fff;
    border: 1px solid #bfd7d2;
    border-radius: 6px;
    cursor: pointer;
}

.prompt-suggestions {
    position: fixed;
    z-index: 20;
    bottom: 134px;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 1120px;
    min-height: 34px;
    margin: 0 auto;
    transform: translateY(0);
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 0 24px;
    opacity: 1;
    pointer-events: auto;
    transition: opacity .16s ease, transform .16s ease;
}

.prompt-suggestions:not(.is-dynamic) {
    display: none;
}

.prompt-suggestion-list {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 34px;
    min-width: 0;
    align-content: flex-end;
    align-items: flex-end;
}

.prompt-suggestions.is-hidden {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

.mod_companion_chat.is-mobile-keyboard-active .prompt-suggestions,
.mod_companion_chat.is-mobile-keyboard-active .messages {
    transition: none;
}

.prompt-suggestions button {
    padding: 5px 8px;
    background: rgba(239, 246, 244, .74);
    border-color: #bfd7d2;
    border-radius: 999px;
    font-size: calc(12px * var(--reader-scale));
    pointer-events: auto;
    box-shadow: 0 6px 18px rgba(50, 40, 25, .06);
}

.prompt-suggestion-next {
    display: inline-grid;
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
    height: 34px;
    margin-left: auto;
    padding: 0 !important;
    position: relative;
    z-index: 1;
    place-items: center;
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}

.prompt-suggestions.is-dynamic {
    z-index: 35;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 58px);
    width: min(calc(100% - 32px), var(--chat-content-width));
    padding: 0;
    align-items: flex-end;
    justify-content: flex-start;
    pointer-events: auto;
}

.prompt-suggestions.is-dynamic .prompt-suggestion-list {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    pointer-events: auto;
}

.prompt-suggestions.is-scroll-resetting .prompt-suggestion-search-list {
    scroll-behavior: auto;
}

.prompt-suggestion-search-list {
    display: block;
    gap: 0;
    max-height: calc(50px * 3 + 2px);
    min-height: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-anchor: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(191, 183, 169, .72);
    border-radius: 24px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .86) inset, 0 8px 24px rgba(45, 37, 26, .06);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    backdrop-filter: blur(18px) saturate(1.08);
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(191, 182, 169, .88) transparent;
}

.prompt-suggestion-search-list::-webkit-scrollbar {
    width: 10px;
}

.prompt-suggestion-search-list::-webkit-scrollbar-track {
    background: transparent;
}

.prompt-suggestion-search-list::-webkit-scrollbar-thumb {
    background: #bfb6a9;
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

.prompt-suggestions.is-loading .prompt-suggestion-search-list {
    opacity: .72;
}

.prompt-suggestion-search-item {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 50px;
    width: 100%;
    padding: 10px 18px !important;
    text-align: left;
    pointer-events: auto;
    background: rgba(255, 255, 255, .5) !important;
    border: 0 !important;
    border-top: 1px solid #d8d0c4 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.prompt-suggestion-search-item:first-child {
    border-top: 0 !important;
}

.prompt-suggestion-search-item:hover,
.prompt-suggestion-search-item:focus-visible {
    background: rgba(255, 250, 240, .78) !important;
}

.prompt-suggestion-search-label {
    min-width: 0;
    overflow: hidden;
    color: var(--accent-dark);
    font-size: calc(13.5px * var(--reader-scale));
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prompt-suggestions.is-idle .prompt-suggestion-search-list {
    max-height: calc(50px * 3 + 2px);
}

.prompt-suggestions.is-idle .prompt-suggestion-search-item {
    min-height: 50px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.prompt-suggestions.is-idle .prompt-suggestion-search-label {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.28;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.prompt-suggestion-search-meta {
    color: var(--muted);
    font-size: calc(11.5px * var(--reader-scale));
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.prompt-suggestion-empty {
    display: block;
    min-height: 44px;
    padding: 12px 14px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.composer {
    position: fixed;
    z-index: 30;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 50%;
    width: min(calc(100% - 32px), var(--chat-content-width));
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    transform: translateX(-50%);
}

.composer-backdrop {
    position: fixed;
    z-index: 19;
    right: 0;
    bottom: 0;
    left: 0;
    height: 125px;
    pointer-events: none;
    background: linear-gradient(to top, #122326 0, rgba(18, 35, 38, .97) 18%, rgba(18, 35, 38, .82) 38%, rgba(18, 35, 38, .55) 58%, rgba(18, 35, 38, .26) 76%, rgba(18, 35, 38, .08) 90%, transparent 100%);
    transform: translateZ(0);
}

body.is-dark-mode .composer-backdrop {
    background: linear-gradient(to top, #071314 0, rgba(7, 19, 20, .97) 18%, rgba(7, 19, 20, .84) 38%, rgba(7, 19, 20, .58) 58%, rgba(7, 19, 20, .28) 76%, rgba(7, 19, 20, .09) 90%, transparent 100%);
}

body.is-tavern-mode .composer-backdrop {
    background: linear-gradient(to top, #27140e 0, rgba(39, 20, 14, .97) 18%, rgba(39, 20, 14, .83) 38%, rgba(39, 20, 14, .57) 58%, rgba(39, 20, 14, .27) 76%, rgba(39, 20, 14, .08) 90%, transparent 100%);
}

@media (min-width: 721px) {
    .composer-backdrop {
        display: none;
    }
}

.quick-settings {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
    max-height: 42px;
    overflow: hidden;
    padding-left: 8px;
    transform: translateY(0);
    transform-origin: bottom center;
    contain: layout;
    will-change: opacity, transform;
    transition: max-height .42s cubic-bezier(.16, 1, .3, 1), padding .42s cubic-bezier(.16, 1, .3, 1), opacity .26s ease .03s, transform .42s cubic-bezier(.16, 1, .3, 1);
}

.quick-settings > * {
    transform: scale(1);
    transform-origin: bottom center;
    transition: opacity .24s ease .02s, transform .38s cubic-bezier(.16, 1, .3, 1);
}

/* Experimental companion to the topbar autohide: preserve the prompt's fixed
   position while letting its secondary controls recede during an upward read. */
.quick-settings.is-scroll-hidden {
    max-height: 0;
    gap: 0;
    opacity: 0;
    overflow: hidden;
    padding-left: 0;
    pointer-events: none;
    transform: translateY(5px) scale(.9);
}

.quick-settings.is-scroll-hidden > * {
    opacity: 0;
    transform: scale(.82);
}

.setting-select,
.setting-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 8px;
    color: #fff;
    background: #3e6974;
    border: 1px solid #2d5964;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 5px rgba(33, 72, 78, .14);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.setting-select:hover,
.setting-control:hover {
    background: #315d68;
    border-color: #244d57;
}

.setting-icon {
    display: inline-flex;
    width: 15px;
    height: 15px;
    color: #fff;
}

.theme-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    font-size: 14px;
    line-height: 1;
}

.setting-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.setting-select select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.setting-control {
    cursor: default;
}

.effects-toggle {
    justify-content: center;
    width: 28px;
    padding: 4px;
    cursor: pointer;
}

.effects-toggle i {
    font-size: 14px;
    line-height: 1;
}

.effects-toggle[aria-pressed="true"] {
    color: rgba(255, 255, 255, .72);
    background: #426b74;
}

body.is-effects-disabled .assistant-greeting-letter.is-wave {
    background: none;
    color: var(--accent-dark);
    -webkit-text-fill-color: currentColor;
}

body.is-effects-disabled #cursor-star-trail,
body.is-effects-disabled #touch-scroll-star-trail,
body.is-effects-disabled #touch-chip-spark-layer {
    display: none;
}

body.is-effects-disabled::after {
    animation: none !important;
}


.font-size-setting {
    gap: 5px;
}

.font-size-mark {
    font-size: 10px;
    line-height: 1;
}

.font-size-mark.is-large {
    font-size: 12px;
}

.font-size-setting input[type="range"] {
    width: 64px;
    height: 14px;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    accent-color: #fff;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.font-size-setting input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: #fffdf7;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 999px;
}

.font-size-setting input[type="range"]::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -7px;
    -webkit-appearance: none;
    appearance: none;
    background: #fffdf7;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(32, 47, 44, .25);
    transition: transform .12s ease, box-shadow .12s ease;
}

.font-size-setting input[type="range"]:active::-webkit-slider-thumb {
    box-shadow: 0 2px 8px rgba(32, 47, 44, .34), 0 0 0 4px rgba(255, 255, 255, .2);
    transform: scale(1.08);
}

.font-size-setting input[type="range"]::-moz-range-track {
    height: 6px;
    background: #fffdf7;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 999px;
}

.font-size-setting input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #fffdf7;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(32, 47, 44, .25);
    transition: transform .12s ease, box-shadow .12s ease;
}

.font-size-setting input[type="range"]:active::-moz-range-thumb {
    box-shadow: 0 2px 8px rgba(32, 47, 44, .34), 0 0 0 4px rgba(255, 255, 255, .2);
    transform: scale(1.08);
}

@media (pointer: coarse) {
    .font-size-setting input[type="range"] {
        width: 76px;
        height: 32px;
        margin-right: 8px;
        margin-left: 8px;
    }

    .font-size-setting input[type="range"]::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
        margin-top: -10px;
    }

    .font-size-setting input[type="range"]::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }
}

.dark-mode-setting {
    gap: 6px;
    cursor: pointer;
}

.dark-mode-icon {
    font-size: 15px;
    line-height: 1;
}

.dark-mode-setting input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.toggle-track {
    position: relative;
    width: 28px;
    height: 16px;
    background: #555;
    border: 1px solid #777;
    border-radius: 999px;
    transition: background .16s ease;
}

.toggle-track span {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    transition: transform .16s ease;
}

.dark-mode-setting input:checked + .toggle-track {
    background: #3f7e82;
}

.dark-mode-setting input:checked + .toggle-track span {
    transform: translateX(12px);
}

.dark-mode-setting input:focus-visible + .toggle-track {
    outline: 3px solid rgba(255, 255, 255, .35);
    outline-offset: 2px;
}

.composer-input {
    position: relative;
    display: block;
    padding: 4px;
    background: rgba(255, 255, 255, .76);
    border: 1px solid rgba(191, 183, 169, .82);
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(45, 37, 26, .12), 0 1px 0 rgba(255, 255, 255, .9) inset;
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter: blur(18px) saturate(1.15);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.composer-input:focus-within {
    border-color: rgba(40, 97, 95, .58);
    box-shadow: 0 10px 30px rgba(45, 37, 26, .13), 0 0 0 3px rgba(40, 97, 95, .12);
}

.composer-input textarea {
    width: 100%;
    min-height: 42px;
    max-height: 160px;
    resize: none;
    padding: 10px 86px 10px 14px;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: 26px;
    line-height: 1.35;
}

.composer-input textarea:focus {
    outline: 0;
}

textarea:focus,
select:focus,
button:focus-visible {
    outline: 3px solid rgba(40, 97, 95, .22);
    outline-offset: 2px;
}

.composer-input button {
    position: absolute;
        bottom: 50%;
    transform: translateY(50%);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
}

.composer-input .chat-reset {
    right: 47px;
    width: 38px;
    height: 38px;
    color: var(--accent-dark);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    font-size: 22px;
}

.composer-input .chat-reset:hover,
.composer-input .chat-reset:focus-visible {
    background: rgba(95, 144, 148, .1);
    border-color: transparent;
}

.composer-input #send {
    right: 8px;
    background: #315d6b;
    border-color: #224a56;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 3px 7px rgba(33, 72, 78, .16);
}

.composer-input #send:hover,
.composer-input #send:focus-visible {
    background: #274f5b;
    border-color: #1d404a;
}

.composer-input button span {
    display: block;
    transform: translateY(-1px);
    font-size: 13px;
    line-height: 1;
}

.composer-input button:disabled {
    cursor: wait;
    opacity: .68;
}

@media (min-width: 721px) {
    .composer {
        bottom: max(34px, env(safe-area-inset-bottom));
    }

    .prompt-suggestions.is-dynamic {
        bottom: calc(max(34px, env(safe-area-inset-bottom)) + 58px);
    }
}

.mod_companion_chat {
    --reader-scale: 1;
    --reader-scale-heading: .95;
    --reader-scale-small: 1;
}

.messages .bubble {
    font-size: calc(16px * var(--reader-scale));
}

.message.user .bubble {
    font-size: calc(15.2px * var(--reader-scale));
}

.assistant-greeting {
    font-size: calc(18px * var(--reader-scale-heading));
    font-weight: 700;
}

.message.assistant .bubble.is-list-answer > .answer-text {
    font-size: calc(17px * var(--reader-scale-heading));
    font-weight: 700;
}

.answer-text.is-atomic {
    font-family: var(--font-display);
    font-size: calc(18px * var(--reader-scale-heading));
}

.answer-text.is-summary {
    font-size: calc(15px * var(--reader-scale));
}

.answer-entity {
    font-size: calc(20px * var(--reader-scale-heading));
}

.entity-tooltip-list,
.entity-flow-section-summary,
.entity-info-box-text,
.entity-trait p,
.entity-field-section p,
.entity-table th,
.entity-table td {
    font-size: calc(13px * var(--reader-scale));
}

.entity-tooltip-description {
    font-size: calc(14.3px * var(--reader-scale));
}

.entity-core-traits h3,
.entity-traits h3,
.entity-trait h4,
.entity-field-section h4,
.entity-table-block h3 {
    font-family: var(--font-display);
    font-size: calc(13px * var(--reader-scale-heading));
    font-weight: 700;
}

.entity-table-native,
.entity-table-native :where(table, thead, tbody, tr, th, td, p, span, div) {
    font-size: calc(13px * var(--reader-scale)) !important;
}

.entity-table-meta {
    font-size: calc(11px * var(--reader-scale-small));
}

.entity-table-toggle,
.entity-table-notice strong {
    font-size: calc(12px * var(--reader-scale-small));
}

.entity-table-notice {
    font-size: calc(13px * var(--reader-scale));
}

.entity-tooltip-description h3,
.entity-elements h3,
.entity-flow-section-summary.is-major {
    font-family: var(--font-display);
    font-size: calc(14px * var(--reader-scale-heading));
    font-weight: 700;
}

.source-list {
    font-size: calc(12px * var(--reader-scale-small));
}

.suggestion-button {
    font-size: calc(13.75px * var(--reader-scale-small));
}

.alternative-suggestions .suggestion-button {
    font-size: calc(11.75px * var(--reader-scale-small));
}

.entity-list-suggestions .suggestion-button {
    font-size: calc(13px * var(--reader-scale-small));
}

.prompt-suggestions button {
    font-size: calc(12px * var(--reader-scale-small));
}

.prompt-suggestion-rate-limit {
    display: block;
    padding: 7px 10px;
    color: var(--muted);
    background: rgba(255, 253, 247, .86);
    border: 1px solid rgba(184, 170, 127, .42);
    border-radius: 999px;
    box-shadow: 0 5px 14px rgba(40, 47, 44, .07);
    font-size: calc(12px * var(--reader-scale-small));
    font-weight: 700;
}

/* Structured values benefit from one size step more than explanatory prose:
   labels, key/value data and table cells are scanned rather than read as a
   paragraph. They still follow the same global reader slider. */
.entity-drawer .entity-tooltip-list,
.entity-drawer .entity-info-box-text,
.entity-drawer .entity-trait p,
.entity-drawer .entity-field-section p,
.entity-drawer .entity-table th,
.entity-drawer .entity-table td {
    font-size: calc(14px * var(--reader-scale));
}

.entity-drawer .entity-tooltip-description {
    font-size: calc(16px * var(--drawer-reader-scale));
}

.entity-drawer .entity-core-traits h3,
.entity-drawer .entity-traits h3,
.entity-drawer .entity-trait h4,
.entity-drawer .entity-field-section h4,
.entity-drawer .entity-table-block h3 {
    font-size: calc(15.5px * var(--drawer-reader-scale-heading));
}

.entity-drawer .entity-table-native,
.entity-drawer .entity-table-native :where(table, thead, tbody, tr, th, td, p, span, div) {
    font-size: calc(14px * var(--reader-scale)) !important;
}

.entity-drawer .entity-table-meta {
    font-size: calc(12px * var(--drawer-reader-scale-small));
}

.entity-drawer .entity-table-toggle,
.entity-drawer .entity-table-notice strong {
    font-size: calc(13px * var(--drawer-reader-scale-small));
}

.entity-drawer .entity-table-notice {
    font-size: calc(14px * var(--drawer-reader-scale));
}

.entity-drawer .entity-tooltip-description h3,
.entity-drawer .entity-elements h3,
.entity-drawer .entity-flow-section-summary.is-major {
    font-size: calc(16px * var(--drawer-reader-scale-heading));
}

/* The compact legacy tooltip uses the same reader hierarchy as the drawer. */
.entity-tooltip-panel .entity-tooltip-description {
    font-size: calc(16px * var(--reader-scale) * .9);
}

.entity-tooltip-panel :is(.entity-tooltip-list, .entity-info-box-text, .entity-trait p, .entity-field-section p, .entity-table th, .entity-table td) {
    font-size: calc(14px * var(--reader-scale));
}

.entity-tooltip-panel :is(.entity-core-traits h3, .entity-traits h3, .entity-trait h4, .entity-field-section h4, .entity-table-block h3, .entity-tooltip-description h3, .entity-elements h3, .entity-flow-section-summary.is-major) {
    font-size: calc(15.5px * var(--reader-scale) * .9);
}

/* The drawer owns a complete theme surface: nested entity cards and tables
   intentionally follow its palette instead of falling back to turquoise. */
.entity-drawer {
    --drawer-content-surface: rgba(255, 253, 247, .6);
    --drawer-content-subtle: rgba(239, 226, 196, .74);
    --drawer-content-border: rgba(167, 135, 91, .38);
    --drawer-content-divider: rgba(130, 120, 105, .24);
}

.entity-drawer :is(.entity-description-block, .entity-traits, .entity-field-sections, .entity-tooltip-description h4) {
    border-color: var(--drawer-content-divider);
}

.entity-drawer :is(.entity-flow-section, .entity-flow-section[open] > .entity-flow-section-summary, .entity-element-aside, .entity-description-toggle, .entity-info-box, .entity-core-traits, .entity-core-trait, .entity-trait, .entity-field-section, .entity-table-block, .entity-table-scroll, .entity-table-toggle, .entity-table-notice) {
    border-color: var(--drawer-content-border);
}

.entity-drawer :is(.entity-flow-section, .entity-element-aside, .entity-core-traits, .entity-core-trait, .entity-trait, .entity-field-section, .entity-table-block, .entity-table-scroll, .entity-table-native, .entity-table-notice, .entity-description-toggle, .entity-table-toggle) {
    background: var(--drawer-content-surface);
}

.entity-drawer :is(.entity-flow-section-summary.is-major, .entity-info-box, .entity-table thead th, .entity-table-native td[bgcolor], .entity-table-native th[bgcolor], .entity-table-block.is-class-feature-table .entity-table th:first-child, .entity-table-block.is-class-feature-table .entity-table td:first-child) {
    background: var(--drawer-content-subtle) !important;
}

.entity-drawer :is(.entity-table th, .entity-table td, .entity-table-native td, .entity-table-native th) {
    border-color: var(--drawer-content-divider);
}

.entity-drawer-stack-body {
    padding: 12px 14px 16px;
}

/* Daylight counterpart to the night moonbeams and tavern fire: soft, wide
   sunrays stay behind every interface surface and only breathe very gently. */
.day-clouds {
    position: fixed;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .7s ease;
    contain: paint;
}

body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode) .day-clouds {
    opacity: .85;
}

.day-clouds::before,
.day-clouds::after {
    position: absolute;
    inset: 0;
    content: "";
    background-repeat: no-repeat;
    filter:
        blur(3px)
        drop-shadow(0 8px 6px rgba(62, 103, 111, .12));
    transform: scale(1.15);
}

body:not(.is-dark-mode):not(.is-tavern-mode) .day-clouds::before {
    animation: day-cloud-drift 52s ease-in-out infinite alternate;
    will-change: transform;
}

.day-clouds::before {
    background:
        radial-gradient(ellipse 92px 29px at 7% 18%, rgba(255, 255, 255, .2) 0 46%, transparent 75%),
        radial-gradient(ellipse 54px 24px at 11% 16%, rgba(250, 254, 248, .15) 0 42%, transparent 76%),
        radial-gradient(ellipse 78px 25px at 22% 41%, rgba(255, 255, 255, .16) 0 46%, transparent 76%),
        radial-gradient(ellipse 46px 20px at 26% 39%, rgba(247, 254, 251, .12) 0 42%, transparent 76%),
        radial-gradient(ellipse 112px 34px at 39% 31%, rgba(255, 255, 255, .16) 0 48%, transparent 77%),
        radial-gradient(ellipse 66px 27px at 43% 28%, rgba(245, 253, 250, .13) 0 44%, transparent 78%),
        radial-gradient(ellipse 84px 26px at 75% 14%, rgba(255, 255, 255, .18) 0 47%, transparent 76%),
        radial-gradient(ellipse 48px 21px at 79% 12%, rgba(248, 254, 251, .14) 0 42%, transparent 76%),
        radial-gradient(ellipse 88px 28px at 91% 32%, rgba(255, 255, 255, .15) 0 47%, transparent 77%),
        radial-gradient(ellipse 51px 21px at 95% 29%, rgba(247, 254, 251, .11) 0 42%, transparent 76%);
}

.day-clouds::after {
    background:
        radial-gradient(ellipse 82px 26px at 7% 78%, rgba(255, 255, 255, .12) 0 46%, transparent 76%),
        radial-gradient(ellipse 46px 19px at 11% 75%, rgba(246, 253, 250, .09) 0 42%, transparent 76%),
        radial-gradient(ellipse 72px 23px at 22% 56%, rgba(255, 255, 255, .13) 0 46%, transparent 76%),
        radial-gradient(ellipse 43px 19px at 25% 54%, rgba(246, 253, 250, .11) 0 43%, transparent 76%),
        radial-gradient(ellipse 86px 27px at 45% 49%, rgba(255, 255, 255, .12) 0 47%, transparent 77%),
        radial-gradient(ellipse 49px 20px at 49% 46%, rgba(247, 254, 251, .09) 0 42%, transparent 76%),
        radial-gradient(ellipse 96px 29px at 61% 68%, rgba(255, 255, 255, .14) 0 47%, transparent 77%),
        radial-gradient(ellipse 56px 22px at 65% 65%, rgba(247, 254, 251, .1) 0 42%, transparent 76%),
        radial-gradient(ellipse 76px 24px at 80% 84%, rgba(255, 255, 255, .11) 0 46%, transparent 76%),
        radial-gradient(ellipse 44px 18px at 84% 81%, rgba(246, 253, 250, .08) 0 42%, transparent 76%),
        radial-gradient(ellipse 70px 22px at 91% 43%, rgba(255, 255, 255, .12) 0 46%, transparent 76%);
    opacity: .92;
}

@keyframes day-cloud-drift {
    from { transform: translate3d(-1.2vw, 0, 0) scale(1.15); }
    to { transform: translate3d(1.2vw, .4vh, 0) scale(1.15); }
}

body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode)::after {
    position: fixed;
    z-index: 0;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(ellipse 72% 46% at 50% -12%, rgba(255, 252, 221, .36) 0, rgba(255, 246, 191, .16) 36%, transparent 74%),
        linear-gradient(112deg, transparent 26%, rgba(255, 251, 222, .1) 42%, transparent 57%),
        linear-gradient(67deg, transparent 34%, rgba(255, 250, 211, .08) 50%, transparent 66%);
    filter: blur(10px);
    opacity: .54;
    transform-origin: 50% 0;
    animation: day-sunray-flicker 7.4s ease-in-out infinite alternate;
}

@keyframes day-sunray-flicker {
    0%, 100% { opacity: .4; transform: translateY(2px) scale(1); }
    42% { opacity: .66; transform: translateY(-5px) scale(1.025, 1.01); }
    72% { opacity: .5; transform: translateY(1px) scale(1.008, 1.022); }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.is-dark-mode):not(.is-tavern-mode) .day-clouds::before,
    body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode)::after {
        animation: none;
    }

    body:not(.is-dark-mode):not(.is-tavern-mode) .day-clouds::before {
        transform: scale(1.15);
        will-change: auto;
    }
}

body.is-effects-disabled .day-clouds::before {
    animation: none !important;
    transform: scale(1.15);
    will-change: auto !important;
}

#day-foreground-clouds {
    position: fixed;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

body:is(.is-dark-mode, .is-tavern-mode) #day-foreground-clouds,
body.is-effects-disabled #day-foreground-clouds {
    display: none;
}

.day-foreground-cloud,
.day-ambient-cloud {
    --foreground-cloud-highlight: rgba(255, 255, 255, .58);
    --foreground-cloud-light: rgba(250, 255, 254, .47);
    --foreground-cloud-mid: rgba(237, 247, 246, .38);
    --foreground-cloud-shade: rgba(93, 137, 143, .2);
    position: absolute;
    left: -430px;
    width: 370px;
    height: 128px;
    pointer-events: none;
    background:
        linear-gradient(100deg, transparent 1%, var(--foreground-cloud-mid) 24%, var(--foreground-cloud-light) 53%, var(--foreground-cloud-mid) 78%, transparent 99%) 50% 69% / 92% 31% no-repeat,
        radial-gradient(ellipse 82px 39px at 14% 68%, var(--foreground-cloud-mid) 0 43%, transparent 75%),
        radial-gradient(ellipse 106px 50px at 28% 57%, var(--foreground-cloud-light) 0 42%, transparent 74%),
        radial-gradient(ellipse 69px 60px at 41% 43%, var(--foreground-cloud-highlight) 0 40%, transparent 71%),
        radial-gradient(ellipse 91px 68px at 54% 39%, var(--foreground-cloud-light) 0 41%, transparent 72%),
        radial-gradient(ellipse 119px 48px at 68% 58%, var(--foreground-cloud-light) 0 43%, transparent 75%),
        radial-gradient(ellipse 86px 37px at 83% 65%, var(--foreground-cloud-mid) 0 43%, transparent 76%),
        radial-gradient(ellipse 58px 28px at 94% 72%, var(--foreground-cloud-mid) 0 40%, transparent 75%);
    filter:
        blur(4px)
        drop-shadow(0 12px 9px var(--foreground-cloud-shade));
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(var(--foreground-cloud-scale, 1));
    animation: day-foreground-cloud-cross var(--foreground-cloud-duration, 12s) linear both;
    will-change: transform, opacity;
}

.day-foreground-cloud::before,
.day-foreground-cloud::after,
.day-ambient-cloud::before,
.day-ambient-cloud::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.day-foreground-cloud::before,
.day-ambient-cloud::before {
    inset: 12% -4% 7%;
    background:
        radial-gradient(ellipse 78px 42px at 9% 57%, var(--foreground-cloud-mid) 0 35%, transparent 72%),
        radial-gradient(ellipse 93px 48px at 34% 50%, var(--foreground-cloud-light) 0 36%, transparent 73%),
        radial-gradient(ellipse 63px 49px at 47% 36%, var(--foreground-cloud-highlight) 0 34%, transparent 70%),
        radial-gradient(ellipse 108px 45px at 63% 54%, var(--foreground-cloud-light) 0 37%, transparent 74%),
        radial-gradient(ellipse 76px 34px at 87% 62%, var(--foreground-cloud-mid) 0 36%, transparent 73%);
    filter: blur(7px);
    opacity: .72;
    transform: rotate(-1.8deg) scale(1.03, .92);
}

.day-foreground-cloud::after,
.day-ambient-cloud::after {
    right: -8%;
    bottom: 4%;
    left: -10%;
    height: 38%;
    background:
        radial-gradient(ellipse 42% 55% at 27% 22%, var(--foreground-cloud-shade) 0 21%, transparent 72%),
        radial-gradient(ellipse 47% 58% at 68% 18%, var(--foreground-cloud-shade) 0 19%, transparent 74%),
        linear-gradient(96deg, transparent 0, var(--foreground-cloud-mid) 22%, var(--foreground-cloud-shade) 53%, var(--foreground-cloud-mid) 76%, transparent 100%);
    filter: blur(9px);
    opacity: .56;
    transform: skewX(-9deg) scaleY(.68);
}

@keyframes day-foreground-cloud-cross {
    0% {
        opacity: 0;
        transform: translate3d(0, 5px, 0) scale(var(--foreground-cloud-scale, 1));
    }
    14% {
        opacity: .72;
    }
    78% {
        opacity: .62;
    }
    100% {
        opacity: 0;
        transform: translate3d(calc(100vw + 790px), -8px, 0) scale(var(--foreground-cloud-scale, 1));
    }
}

@media (prefers-reduced-motion: reduce) {
    #day-foreground-clouds {
        display: none;
    }
}

body.is-dark-mode {
    background:
        radial-gradient(ellipse 48% 34% at 50% 2%, rgba(207, 229, 229, .2) 0, rgba(123, 177, 187, .09) 36%, transparent 73%),
        radial-gradient(ellipse 62% 52% at 50% -8%, rgba(120, 176, 190, .14) 0, transparent 68%),
        linear-gradient(180deg, rgba(54, 104, 122, .72) 0, rgba(47, 78, 69, .32) 48%, rgba(29, 43, 42, .9) 100%),
        var(--bg);
}

/* Decorative night layer: it belongs to the page background, never the chat. */
body.is-dark-mode::after {
    position: fixed;
    z-index: 0;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(ellipse 24% 68% at 50% -14%, rgba(245, 250, 243, .24) 0, rgba(218, 238, 232, .1) 40%, transparent 76%),
        radial-gradient(ellipse 46% 46% at 50% 4%, rgba(232, 245, 241, .12) 0, transparent 72%),
        radial-gradient(circle at 14% 21%, rgba(213, 237, 234, .68) 0 1px, transparent 2px),
        radial-gradient(circle at 27% 12%, rgba(160, 213, 221, .5) 0 1.5px, transparent 3px),
        radial-gradient(circle at 71% 18%, rgba(232, 239, 211, .58) 0 1px, transparent 2px),
        radial-gradient(circle at 83% 31%, rgba(160, 210, 224, .44) 0 1.5px, transparent 3px),
        radial-gradient(circle at 39% 39%, rgba(214, 236, 229, .35) 0 1px, transparent 2.5px),
        radial-gradient(circle at 62% 48%, rgba(181, 223, 220, .3) 0 1px, transparent 2px),
        radial-gradient(circle at 7% 9%, rgba(228, 244, 238, .42) 0 1px, transparent 2px),
        radial-gradient(circle at 18% 34%, rgba(155, 209, 221, .38) 0 1px, transparent 2px),
        radial-gradient(circle at 31% 6%, rgba(239, 242, 210, .48) 0 1.5px, transparent 3px),
        radial-gradient(circle at 45% 24%, rgba(186, 223, 229, .34) 0 1px, transparent 2px),
        radial-gradient(circle at 56% 11%, rgba(229, 244, 236, .44) 0 1px, transparent 2px),
        radial-gradient(circle at 67% 35%, rgba(157, 209, 221, .4) 0 1.5px, transparent 3px),
        radial-gradient(circle at 92% 13%, rgba(238, 240, 211, .48) 0 1px, transparent 2px),
        radial-gradient(circle at 10% 54%, rgba(179, 222, 219, .32) 0 1px, transparent 2px),
        radial-gradient(circle at 24% 61%, rgba(224, 241, 235, .38) 0 1.5px, transparent 3px),
        radial-gradient(circle at 35% 52%, rgba(154, 205, 217, .35) 0 1px, transparent 2px),
        radial-gradient(circle at 48% 66%, rgba(239, 242, 214, .42) 0 1px, transparent 2px),
        radial-gradient(circle at 74% 58%, rgba(178, 220, 224, .36) 0 1.5px, transparent 3px),
        radial-gradient(circle at 88% 64%, rgba(230, 243, 235, .38) 0 1px, transparent 2px),
        radial-gradient(circle at 4% 78%, rgba(157, 207, 218, .34) 0 1px, transparent 2px),
        radial-gradient(circle at 17% 88%, rgba(237, 242, 210, .43) 0 1.5px, transparent 3px),
        radial-gradient(circle at 29% 74%, rgba(179, 221, 220, .32) 0 1px, transparent 2px),
        radial-gradient(circle at 42% 91%, rgba(228, 243, 237, .4) 0 1px, transparent 2px),
        radial-gradient(circle at 54% 79%, rgba(159, 209, 220, .36) 0 1.5px, transparent 3px),
        radial-gradient(circle at 68% 87%, rgba(239, 242, 214, .44) 0 1px, transparent 2px),
        radial-gradient(circle at 81% 76%, rgba(179, 221, 224, .34) 0 1px, transparent 2px),
        radial-gradient(circle at 95% 90%, rgba(228, 243, 236, .4) 0 1.5px, transparent 3px),
        radial-gradient(circle at 59% 28%, rgba(238, 244, 214, .35) 0 1px, transparent 2px),
        radial-gradient(circle at 77% 5%, rgba(165, 213, 223, .38) 0 1px, transparent 2px),
        radial-gradient(circle at 3% 40%, rgba(229, 242, 235, .34) 0 1px, transparent 2px),
        radial-gradient(circle at 97% 45%, rgba(176, 219, 222, .36) 0 1px, transparent 2px);
    filter: blur(1px) drop-shadow(0 0 7px rgba(223, 241, 235, .18));
    opacity: .68;
    animation: night-moonbeam-flicker 5.6s ease-in-out infinite alternate;
}

.night-aurora {
    position: fixed;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: 46vh;
    pointer-events: none;
    background:
        linear-gradient(92deg, transparent 12%, rgba(87, 193, 164, .05) 22%, rgba(102, 207, 176, .23) 29%, rgba(91, 177, 194, .12) 35%, transparent 44%),
        linear-gradient(86deg, transparent 35%, rgba(132, 211, 188, .05) 45%, rgba(132, 211, 188, .2) 53%, rgba(101, 170, 205, .11) 59%, transparent 68%),
        linear-gradient(96deg, transparent 58%, rgba(105, 207, 176, .04) 66%, rgba(132, 201, 220, .16) 72%, rgba(106, 192, 186, .06) 77%, transparent 85%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 56%, rgba(0, 0, 0, .72) 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 56%, rgba(0, 0, 0, .72) 70%, transparent 100%);
    filter: none;
    opacity: 0;
    transition: opacity .5s ease;
}

body.is-dark-mode .night-aurora {
    opacity: 1;
    animation: night-aurora-drift 8.8s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

@keyframes night-aurora-drift {
    0% { opacity: .76; transform: translate3d(-1.3%, 1px, 0); }
    52% { opacity: 1; transform: translate3d(1.15%, -3px, 0); }
    100% { opacity: .84; transform: translate3d(-.45%, 2px, 0); }
}

@media (max-width: 767px) {
    .night-aurora {
        right: -18vw;
        left: -18vw;
        height: 58vh;
        min-height: 380px;
        max-height: 560px;
        background:
            linear-gradient(110deg, transparent 4%, rgba(78, 184, 159, .05) 13%, rgba(104, 218, 181, .36) 24%, rgba(87, 177, 197, .13) 36%, transparent 48%),
            linear-gradient(104deg, transparent 24%, rgba(99, 193, 171, .04) 34%, rgba(133, 220, 192, .29) 49%, rgba(89, 160, 201, .12) 63%, transparent 74%),
            linear-gradient(114deg, transparent 50%, rgba(96, 194, 168, .04) 59%, rgba(127, 207, 194, .24) 72%, rgba(90, 154, 195, .1) 84%, transparent 94%);
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, .7) 76%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, .7) 76%, transparent 100%);
        filter: none;
        backface-visibility: hidden;
        contain: paint;
        transform-origin: 50% 0;
    }

    body.is-dark-mode .night-aurora {
        opacity: .78;
        animation: night-aurora-drift-mobile 18s ease-in-out infinite alternate;
    }

    body.is-dark-mode::after {
        filter: none;
        opacity: .52;
        animation: none;
    }

    @keyframes night-aurora-drift-mobile {
        from { transform: translate3d(-2.2%, 0, 0); }
        to { transform: translate3d(2.2%, 0, 0); }
    }
}

body.is-effects-disabled .night-aurora {
    animation: none;
    will-change: auto;
}

@keyframes night-moonbeam-flicker {
    0%, 100% { opacity: .46; transform: translateY(4px) scale(.99); }
    38% { opacity: .8; transform: translateY(-6px) scale(1.022, 1.01); }
    70% { opacity: .59; transform: translateY(1px) scale(1.005, 1.018); }
}

#night-shooting-stars {
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
}

.night-shooting-star {
    position: fixed;
    width: 74px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(168, 222, 218, .08) 32%, rgba(225, 248, 236, .95) 100%);
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(210, 245, 236, .6);
    opacity: 0;
    pointer-events: none;
    transform: rotate(24deg);
    transform-origin: right center;
    animation: night-shooting-star 1.45s ease-out both;
}

@keyframes night-shooting-star {
    0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(24deg) scaleX(.25); }
    14% { opacity: .9; }
    72% { opacity: .58; }
    100% { opacity: 0; transform: translate3d(var(--shooting-star-x), var(--shooting-star-y), 0) rotate(24deg) scaleX(1); }
}

body.is-effects-disabled #night-shooting-stars {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    body.is-dark-mode::after {
        animation: none;
    }

    body.is-dark-mode .night-aurora {
        animation: none;
        will-change: auto;
    }
}

body.is-dark-mode .message.user .bubble {
    color: var(--ink);
    background: #203f4c;
    border-color: #3d6675;
}

body.is-dark-mode .message.assistant .bubble {
    background: #2f3834;
    border-color: #63705f;
}

body.is-dark-mode .composer-input,
body.is-dark-mode .auth-popover,
body.is-dark-mode .entity-tooltip-panel,
body.is-dark-mode .entity-drawer-panel,
body.is-dark-mode .prompt-suggestion-search-list,
body.is-dark-mode .prompt-suggestion-search-item,
body.is-dark-mode .bubble-actions-menu {
    color: var(--ink);
    background: rgba(28, 33, 31, .96) !important;
    border-color: var(--line) !important;
}

body.is-dark-mode .composer-input {
    background: rgba(255, 255, 255, .84) !important;
    border-color: #b8aa7f !important;
}

body.is-dark-mode .auth-popover.is-authenticated {
    background: rgba(27, 57, 56, .9) !important;
    border-color: rgba(178, 208, 202, .32) !important;
    box-shadow: 0 8px 20px rgba(8, 20, 22, .28);
}

body.is-dark-mode .auth-popover.is-authenticated .auth-logout,
body.is-dark-mode .auth-popover.is-authenticated .auth-editorial-link,
body.is-dark-mode .auth-popover.is-authenticated .auth-general-report-open {
    color: #e6f0eb;
    background: rgba(83, 130, 139, .78);
    border-color: rgba(194, 222, 216, .38);
    opacity: .94;
}

body.is-dark-mode .auth-popover.is-authenticated .auth-logout:hover,
body.is-dark-mode .auth-popover.is-authenticated .auth-logout:focus-visible,
body.is-dark-mode .auth-popover.is-authenticated .auth-editorial-link:hover,
body.is-dark-mode .auth-popover.is-authenticated .auth-editorial-link:focus-visible,
body.is-dark-mode .auth-popover.is-authenticated .auth-general-report-open:hover,
body.is-dark-mode .auth-popover.is-authenticated .auth-general-report-open:focus-visible {
    color: #fff;
    background: #5c919a;
    border-color: rgba(223, 238, 231, .58);
}

body.is-dark-mode .auth-popover.is-authenticated .auth-general-report-open {
    color: #b8cec7;
    background: transparent;
    border-color: transparent;
}

body.is-dark-mode .auth-popover.is-authenticated .auth-editorial-link {
    color: #b8cec7;
    background: transparent;
    border-color: rgba(194, 222, 216, .34);
}

body.is-dark-mode .auth-popover.is-authenticated .auth-general-report-open:hover,
body.is-dark-mode .auth-popover.is-authenticated .auth-general-report-open:focus-visible {
    color: #eef7f3;
    background: rgba(185, 216, 209, .09);
    border-color: transparent;
}

body.is-dark-mode .auth-popover.is-authenticated .auth-editorial-link:hover,
body.is-dark-mode .auth-popover.is-authenticated .auth-editorial-link:focus-visible {
    color: #eef7f3;
    background: rgba(185, 216, 209, .09);
    border-color: rgba(194, 222, 216, .52);
}

body.is-dark-mode .auth-general-report-title,
body.is-dark-mode .auth-general-report-form label,
body.is-dark-mode .auth-general-report-status {
    color: #dcebe5;
}

body.is-dark-mode .auth-general-report-form :is(select, textarea) {
    color: #eee7d7;
    background: #172522;
    border-color: #48615a;
}

body.is-dark-mode .auth-general-report-controls button:not([type="submit"]) {
    color: #dcebe5;
    background: #304943;
    border-color: #5d766f;
}

/* Night auth uses its own coherent petrol surface. The light defaults left
   pale text on pale inputs and active tabs with insufficient contrast. */
body.is-dark-mode .auth-popover:not(.is-authenticated) {
    color: #eee7d7;
    background: #20312f !important;
    border-color: #5d766f !important;
    box-shadow: 0 18px 44px rgba(4, 15, 15, .46), inset 0 1px 0 rgba(225, 242, 235, .08);
}

body.is-dark-mode .auth-popover-header strong,
body.is-dark-mode .auth-form .auth-remember {
    color: #dcebe5;
}

body.is-dark-mode .auth-close,
body.is-dark-mode .auth-form label,
body.is-dark-mode .auth-message {
    color: #bdcec7;
}

body.is-dark-mode .auth-tabs {
    background: #172522;
    border-color: #48615a;
}

body.is-dark-mode .auth-tab {
    color: #bfd5cc;
}

body.is-dark-mode .auth-tab.is-active {
    color: #f5f0e4;
    background: #3d5b55;
    box-shadow: none;
}

body.is-dark-mode .auth-tab + .auth-tab {
    border-left-color: #48615a;
}

body.is-dark-mode .auth-form input:not([type="checkbox"]) {
    color: #f4efe3;
    caret-color: #d8eee5;
    background: #14211f;
    border-color: #58726a;
}

body.is-dark-mode .auth-form input:not([type="checkbox"])::placeholder {
    color: #93aaa1;
}

body.is-dark-mode .auth-form input:not([type="checkbox"]):focus {
    border-color: #8db9ad;
    box-shadow: 0 0 0 3px rgba(141, 185, 173, .2);
}

body.is-dark-mode .auth-form button[type="submit"] {
    color: #152522;
    background: #a8d0c3;
    border-color: #bdddd3;
}

body.is-dark-mode .auth-message.is-error {
    color: #ffb4a6;
}

body.is-dark-mode .auth-message.is-success {
    color: #aee4c6;
}

body.is-dark-mode .composer-input textarea {
    color: #282f2c;
}

body.is-dark-mode .composer-input .chat-reset {
    color: #315d6b;
}

body.is-dark-mode .composer-input .chat-reset:hover,
body.is-dark-mode .composer-input .chat-reset:focus-visible {
    color: #274f5b;
    background: rgba(49, 93, 107, .12);
}

body.is-dark-mode .collection-panel,
body.is-dark-mode .collection-panel-header,
body.is-dark-mode .collection-panel-body {
    background: rgba(41, 74, 75, .54);
    border-color: rgba(255, 255, 255, .18);
}

body.is-dark-mode .collection-panel-title {
    color: #eee7d7;
}

/* Night collector: keep the hierarchy in one muted petrol/moon palette.
   The spell headings previously retained the daytime blue and looked detached
   from the otherwise warm, dark surface. */
body.is-dark-mode .collection-panel,
body.is-dark-mode .collection-panel-header,
body.is-dark-mode .collection-panel-body {
    border-color: rgba(200, 224, 218, .2);
}

body.is-dark-mode .collection-panel {
    --collection-drop-accent: #f0cf78;
    --collection-drop-ring: rgba(30, 49, 47, .96);
    --collection-side-grabber: #48645f;
    background: rgba(31, 67, 68, .96);
}

body.is-dark-mode .collection-panel-header {
    background: rgba(31, 67, 68, .92);
}

body.is-dark-mode .collection-panel-body {
    background: transparent;
}

body.is-dark-mode .entity-drawer-panel {
    background: rgba(28, 33, 31, .96) !important;
}

body.is-dark-mode .collection-card,
body.is-dark-mode .collection-card:not(.is-collapsed),
body.is-dark-mode .collection-card[data-depth="0"] > .collection-card-content > .collection-child-list > .collection-card[data-depth="1"] {
    background: #2d4c4d;
    border-color: #628182;
}

body.is-dark-mode .collection-card[data-depth="0"]:not(.is-collapsed) {
    background: rgba(141, 183, 176, .07);
    border-color: rgba(180, 212, 204, .18);
}

body.is-dark-mode .collection-spell-level-heading {
    color: #a5c0b6;
}

body.is-dark-mode .collection-card[data-depth="1"]:not(.is-collapsed) > .collection-card-header .collection-card-toggle {
    color: #fff;
}

body.is-dark-mode .collection-card.is-collapsed .collection-card-preview-chip {
    color: rgba(231, 232, 216, .68);
    background: rgba(42, 64, 61, .56);
    border-color: rgba(145, 178, 169, .28);
}

body.is-dark-mode .collection-card.is-collapsed .collection-card-preview-more {
    color: rgba(165, 192, 182, .58);
}

body.is-dark-mode .collection-spell-level-group + .collection-spell-level-group {
    border-top-color: rgba(164, 199, 189, .16);
}

body.is-dark-mode .collection-card-preview-chip,
body.is-dark-mode .collection-item-drag-handle,
body.is-dark-mode .collection-item-chip,
body.is-dark-mode .collection-item-project,
body.is-dark-mode .collection-item-remove,
body.is-dark-mode .collection-action-menu,
body.is-dark-mode .collection-root-create .collection-child-form {
    background: #2e423e;
    border-color: #627970;
}

body.is-dark-mode .entity-drawer.is-stack-mode .entity-drawer-panel {
    background: transparent !important;
    border: 0 !important;
}

body.is-dark-mode .entity-drawer-stack-item,
body.is-dark-mode .entity-drawer-stack-header {
    color: var(--ink);
    background: #30413d;
    border-color: #63705f;
}

body.is-dark-mode .entity-drawer-action,
body.is-dark-mode .entity-drawer-stack-close,
body.is-dark-mode .entity-drawer-stack-collapse,
body.is-dark-mode .entity-drawer-stack-pin {
    color: var(--ink);
    background: #394b3e;
    border-color: #63705f;
}

body.is-dark-mode .entity-drawer .entity-tooltip-list {
    background: rgba(255, 255, 255, .035);
    border-color: rgba(191, 194, 174, .22);
}

body.is-dark-mode .entity-drawer-stack-handle {
    --drawer-handle-surface: #48645f;
    color: var(--ink);
    background: #48645f;
    border-color: #58736e;
}

body.is-dark-mode .entity-drawer-stack-handle.is-active {
    --drawer-handle-surface: #5d7d7f;
    color: #fff;
    background: #5d7d7f;
    border-color: #5d7d7f;
}

body.is-dark-mode .collection-card,
body.is-dark-mode .collection-card:not(.is-collapsed),
body.is-dark-mode .collection-card[data-depth="0"] > .collection-card-content > .collection-child-list > .collection-card[data-depth="1"] {
    color: var(--ink);
    background: rgba(86, 122, 122, .71);
    border-color: #7a948b;
}

body.is-dark-mode .collection-list > .collection-card[data-depth="0"],
body.is-dark-mode .collection-list > .collection-card[data-depth="0"].is-collapsed {
    background: rgba(191, 215, 208, .075);
    border-color: rgba(191, 215, 208, .18);
}

body.is-dark-mode .collection-list > .collection-card[data-depth="0"]:not(.is-collapsed) {
    background: rgba(191, 215, 208, .075);
    border-color: rgba(191, 215, 208, .18);
}

body.is-dark-mode .collection-item-remove {
    color: rgba(238, 231, 215, .58);
    background: rgba(191, 215, 208, .12);
    border-color: rgba(191, 215, 208, .2);
}

body.is-dark-mode .collection-card-preview-chip,
body.is-dark-mode .collection-item-drag-handle,
body.is-dark-mode .collection-item-chip,
body.is-dark-mode .collection-item-project,
body.is-dark-mode .collection-item-remove,
body.is-dark-mode .collection-action-menu,
body.is-dark-mode .collection-root-create .collection-child-form {
    color: var(--ink);
    background: #30413d;
    border-color: #63705f;
}

body.is-dark-mode .entity-flow-section,
body.is-dark-mode .entity-element-aside,
body.is-dark-mode .entity-info-box,
body.is-dark-mode .entity-core-traits,
body.is-dark-mode .entity-core-trait,
body.is-dark-mode .entity-trait,
body.is-dark-mode .entity-field-section,
body.is-dark-mode .entity-table-block,
body.is-dark-mode .meta span,
body.is-dark-mode .ruleset-tab,
body.is-dark-mode .suggestion-button,
body.is-dark-mode .bubble-report-panel {
    color: var(--ink);
    background: #263936;
    border-color: #627970;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(217, 243, 234, .06);
}

body.is-dark-mode .bubble-report-panel label {
    color: #d9f3ea;
}

body.is-dark-mode .bubble-report-panel textarea {
    color: #f3eee1;
    caret-color: #d9f3ea;
    background: #1f2f2d;
    border-color: #66877f;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .22);
}

body.is-dark-mode .bubble-report-panel textarea::placeholder {
    color: #aebdb6;
    opacity: 1;
}

body.is-dark-mode .bubble-report-panel textarea:focus {
    border-color: #a8d7c6;
    box-shadow: 0 0 0 3px rgba(168, 215, 198, .18), inset 0 1px 3px rgba(0, 0, 0, .18);
}

body.is-dark-mode .bubble-report-controls button {
    color: #eee7d7;
    background: #30413d;
    border-color: #6f8b82;
}

body.is-dark-mode .bubble-report-controls button:hover:not(:disabled),
body.is-dark-mode .bubble-report-controls button:focus-visible:not(:disabled) {
    background: #405953;
    border-color: #9abbb0;
}

body.is-dark-mode .bubble-report-controls button[type="submit"] {
    color: #172725;
    background: #a8d7c6;
    border-color: #c4e9dc;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .2);
}

body.is-dark-mode .bubble-report-controls button[type="submit"]:hover:not(:disabled),
body.is-dark-mode .bubble-report-controls button[type="submit"]:focus-visible:not(:disabled) {
    color: #13211f;
    background: #d9f3ea;
    border-color: #eefbf5;
}

body.is-dark-mode .bubble-report-status {
    color: #bfcfc7;
}

/* Major accordion summaries have their own light default surface.  Keep that
   surface inside the night palette as well, otherwise the first sections of
   a rule entry turn into bright, low-contrast bars. */
body.is-dark-mode .entity-flow-section-summary.is-major {
    color: var(--ink);
    background: rgba(86, 122, 122, .58);
}

body.is-dark-mode .entity-flow-section[open] > .entity-flow-section-summary.is-major {
    border-bottom-color: rgba(122, 148, 139, .72);
}

/* Use the same compact data-surface in chat cards as in the drawer.  This
   keeps the key/value box from picking up the bright, translucent default
   treatment visible behind long night-mode answers. */
body.is-dark-mode .message.assistant .entity-info-box {
    color: var(--ink);
    background: rgba(86, 122, 122, .58);
    border-color: #7a948b;
    border-radius: 11px;
}

/* Separate the two small circular actions by role: information is petrol,
   adding to a collection is the lighter moon-petrol action. */
body.is-dark-mode .entity-tooltip-button {
    color: #eef7f2;
    background: rgba(58, 105, 107, .94);
    border-color: #91bbb2;
}

body.is-dark-mode .entity-card-save:not(.is-saved) {
    color: #123f3e;
    background: #e2f4ee;
    border-color: #8fc4b8;
    box-shadow: 0 0 0 1px rgba(11, 48, 46, .16);
}

body.is-dark-mode .entity-card-save:not(.is-saved) > .ui-button-glyph {
    color: #123f3e;
    font-weight: 700;
}

body.is-dark-mode .entity-table-block.is-spell-table .entity-inline-preview-button {
    color: #123f3e;
    background: #e2f4ee;
    border-color: #8fc4b8;
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(11, 48, 46, .14);
}

body.is-dark-mode .entity-table-block.is-spell-table .entity-inline-preview-button:is(:hover, :focus-visible),
body.is-dark-mode .entity-table-block.is-spell-table .entity-inline-preview.is-open .entity-inline-preview-button {
    color: #0c302f;
    background: #f2f7df;
    border-color: #c7dfd5;
}

body.is-dark-mode :is(.entity-core-traits, .entity-core-trait, .entity-trait, .entity-field-section, .entity-table-block) {
    background: rgba(86, 122, 122, .58);
    border-color: #7a948b;
}

body.is-dark-mode .entity-drawer .entity-tooltip-list {
    background: rgba(86, 122, 122, .5);
    border-color: #7a948b;
}

body.is-dark-mode .entity-table-toggle {
    color: #e4f1ec;
    background: rgba(62, 99, 99, .9);
    border-color: #89aaa2;
}

body.is-dark-mode .entity-table-toggle:hover,
body.is-dark-mode .entity-table-toggle:focus-visible {
    color: #fff;
    background: #527d7d;
    border-color: #b3d0c8;
}

body.is-dark-mode .bubble.is-guide-tip {
    background: linear-gradient(135deg, rgba(48, 78, 75, .3), rgba(45, 61, 53, .22));
    border-color: rgba(131, 177, 166, .24);
}

body.is-dark-mode .bubble.is-guide-tip::before {
    background: #8ebbb2;
}

body.is-dark-mode .bubble.is-guide-tip .guide-step-title {
    color: #c4e1d8;
}

body.is-dark-mode .entity-drawer {
    --scroll-hint-surface: #202522;
    --drawer-border: #63705f;
    --drawer-frame-border: rgba(99, 112, 95, .72);
    --drawer-surface: rgba(28, 33, 31, .93);
    --drawer-header-surface: rgba(54, 92, 93, .88);
    --drawer-header-control-ink: #365c5d;
    --drawer-handle-surface: #365c5d;
    --drawer-elevation-ring: rgba(191, 194, 174, .16);
    --drawer-grabber-color: rgba(176, 211, 202, .9);
    --drawer-content-surface: rgba(255, 255, 255, .055);
    --drawer-content-subtle: rgba(255, 255, 255, .085);
    --drawer-content-border: #63705f;
    --drawer-content-divider: rgba(191, 194, 174, .26);
}

body.is-dark-mode .entity-drawer-handle {
    --drawer-handle-surface: #48645f;
}

body.is-dark-mode .suggestion-info-button {
    color: #294a4b;
    background: rgba(224, 233, 229, .94);
    border-color: #70827a;
}

body.is-dark-mode .suggestion-info-button:hover,
body.is-dark-mode .suggestion-chip.is-open .suggestion-info-button {
    color: #203b3c;
    background: #f0f5f2;
}

body.is-dark-mode .entity-table th,
body.is-dark-mode .entity-table td,
body.is-dark-mode .entity-table-native th,
body.is-dark-mode .entity-table-native td {
    color: var(--ink);
    border-color: var(--line);
}

body.is-dark-mode .prompt-suggestion-search-item:hover,
body.is-dark-mode .prompt-suggestion-search-item:focus-visible,
body.is-dark-mode .bubble-actions-menu button:hover,
body.is-dark-mode .bubble-actions-menu button:focus-visible {
    background: #29302d !important;
}

body.is-dark-mode .prompt-suggestion-search-label,
body.is-dark-mode .prompt-suggestion-search-meta,
body.is-dark-mode .bubble-actions-menu button {
    color: var(--ink);
}

body.is-dark-mode .prompt-suggestion-search-list,
body.is-dark-mode .prompt-suggestion-search-item {
    background: rgba(28, 33, 31, .84) !important;
}

body.is-tavern-mode {
    background:
        radial-gradient(circle at 50% -8%, rgba(224, 142, 65, .48) 0, rgba(151, 75, 43, .2) 34%, transparent 62%),
        radial-gradient(circle at 12% 68%, rgba(133, 66, 40, .2) 0, transparent 38%),
        linear-gradient(180deg, #4b2b27 0, #342321 52%, #1f1a1b 100%);
    background-attachment: scroll;
}

/* A restrained fireplace glow lives in the page background, beneath the chat
   surfaces. It is intentionally diffuse, more warm atmosphere than effect. */
body.is-tavern-mode::after {
    position: fixed;
    z-index: 0;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(ellipse 28% 38% at 14% 12%, rgba(255, 223, 155, .28) 0, rgba(241, 127, 57, .13) 34%, transparent 76%),
        radial-gradient(ellipse 30% 42% at 49% 22%, rgba(255, 229, 165, .38) 0, rgba(224, 97, 43, .19) 38%, transparent 77%),
        radial-gradient(ellipse 27% 39% at 85% 14%, rgba(255, 205, 122, .26) 0, rgba(203, 73, 38, .13) 38%, transparent 77%),
        radial-gradient(ellipse 34% 38% at 24% 39%, rgba(255, 218, 145, .22) 0, rgba(241, 127, 57, .1) 34%, transparent 76%);
    filter: blur(14px);
    opacity: .7;
    animation: tavern-fire-flicker 3.4s ease-in-out infinite;
}

@keyframes tavern-fire-flicker {
    0%, 100% { opacity: .45; transform: translateY(7px) scale(.985); }
    22% { opacity: .67; transform: translateY(-4px) scale(1.025, .99); }
    47% { opacity: .5; transform: translateY(3px) scale(1.005, 1.02); }
    72% { opacity: .74; transform: translateY(-7px) scale(1.038, .987); }
}

@media (prefers-reduced-motion: reduce) {
    body.is-tavern-mode::after {
        animation: none;
    }
}

body.is-tavern-mode .chat-panel {
    background: rgba(73, 49, 38, .62);
    border-color: rgba(210, 157, 91, .24);
}

@media (min-width: 721px) {
    body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode) .chat-panel {
        background:
            linear-gradient(180deg, rgba(45, 101, 116, .018) 0%, rgba(38, 88, 98, .045) 52%, rgba(27, 68, 76, .22) 100%),
            rgba(174, 216, 228, .1);
    }

    body.is-dark-mode .chat-panel {
        background:
            linear-gradient(180deg, rgba(8, 18, 18, .025) 0%, rgba(6, 15, 15, .08) 52%, rgba(4, 11, 11, .34) 100%),
            rgba(38, 54, 51, .84);
    }

    body.is-tavern-mode .chat-panel {
        background:
            linear-gradient(180deg, rgba(55, 27, 19, .025) 0%, rgba(44, 21, 16, .08) 52%, rgba(31, 14, 12, .34) 100%),
            rgba(73, 49, 38, .62);
    }
}

body.is-tavern-mode .topbar {
    background: rgba(229, 206, 164, .78);
    border-bottom-color: rgba(169, 123, 76, .36);
    box-shadow: 0 8px 20px rgba(36, 20, 17, .1);
}

body.is-tavern-mode .auth-toggle,
body.is-tavern-mode .collection-toggle,
body.is-tavern-mode .setting-select,
body.is-tavern-mode .setting-control {
    color: #fff;
    background: #854f30;
    border-color: #663b27;
}

body.is-tavern-mode .auth-toggle:hover,
body.is-tavern-mode .collection-toggle:hover {
    background: #77452c;
    border-color: #77452c;
}

body.is-tavern-mode .auth-popover:not(.is-authenticated) {
    color: #3a271e;
    background: #ead2a2;
    border-color: #9c744d;
    box-shadow: 0 18px 44px rgba(31, 15, 12, .38), inset 0 1px 0 rgba(255, 241, 211, .62);
}

body.is-tavern-mode .auth-popover.is-authenticated {
    color: #3a271e;
    background: #ead2a2 !important;
    border-color: #9c744d !important;
}

body.is-tavern-mode .auth-popover.is-authenticated :is(.auth-logout, .auth-editorial-link, .auth-general-report-open) {
    color: #fff4dc;
    background: #854f30;
    border-color: #663b27;
}

body.is-tavern-mode .auth-popover.is-authenticated .auth-general-report-open {
    color: #76503a;
    background: transparent;
    border-color: transparent;
}

body.is-tavern-mode .auth-popover.is-authenticated .auth-editorial-link {
    color: #76503a;
    background: transparent;
    border-color: rgba(102, 59, 39, .5);
}

body.is-tavern-mode .auth-popover.is-authenticated .auth-general-report-open:hover,
body.is-tavern-mode .auth-popover.is-authenticated .auth-general-report-open:focus-visible {
    color: #542f20;
    background: rgba(133, 79, 48, .09);
    border-color: transparent;
}

body.is-tavern-mode .auth-popover.is-authenticated .auth-editorial-link:hover,
body.is-tavern-mode .auth-popover.is-authenticated .auth-editorial-link:focus-visible {
    color: #542f20;
    background: rgba(133, 79, 48, .09);
    border-color: rgba(102, 59, 39, .72);
}

body.is-tavern-mode .auth-general-report-title,
body.is-tavern-mode .auth-general-report-form label,
body.is-tavern-mode .auth-general-report-status {
    color: #663722;
}

body.is-tavern-mode .auth-general-report-form :is(select, textarea) {
    color: #36241c;
    background: #fff2d2;
    border-color: #b98450;
}

body.is-tavern-mode .auth-general-report-controls button:not([type="submit"]) {
    color: #663722;
    background: #f5e4bd;
    border-color: #b98450;
}

body.is-tavern-mode .auth-popover-header strong,
body.is-tavern-mode .auth-tab,
body.is-tavern-mode .auth-form .auth-remember {
    color: #663722;
}

body.is-tavern-mode .auth-close,
body.is-tavern-mode .auth-form label,
body.is-tavern-mode .auth-message {
    color: #705039;
}

body.is-tavern-mode .auth-tabs {
    background: rgba(121, 70, 39, .14);
    border-color: rgba(125, 75, 43, .36);
}

body.is-tavern-mode .auth-tab.is-active {
    color: #482b1d;
    background: #f5e4bd;
    box-shadow: none;
}

body.is-tavern-mode .auth-tab + .auth-tab {
    border-left-color: rgba(125, 75, 43, .36);
}

body.is-tavern-mode .auth-form input:not([type="checkbox"]) {
    color: #36241c;
    background: #fff2d2;
    border-color: #b98450;
}

body.is-tavern-mode .auth-form button[type="submit"] {
    color: #fff4dc;
    background: #854f30;
    border-color: #663b27;
}

body.is-tavern-mode .message.assistant .bubble {
    background: rgba(232, 207, 159, .9);
    border-color: #b88750;
    box-shadow: 0 8px 22px rgba(35, 20, 17, .16);
}

body.is-tavern-mode .message.assistant .bubble.is-greeting {
    background: rgba(224, 196, 143, .9);
}

body.is-tavern-mode .assistant-greeting {
    color: #f1d2a0;
    text-shadow: 0 1px 10px rgba(31, 15, 12, .18);
}

body.is-tavern-mode .assistant-greeting-name-shimmer {
    color: #ffd071;
}

body.is-tavern-mode .bubble.is-guide-tip {
    background: linear-gradient(135deg, rgba(231, 204, 153, .28), rgba(242, 224, 185, .18));
    border-color: rgba(174, 120, 72, .25);
}

body.is-tavern-mode .bubble.is-guide-tip::before {
    background: #8a542f;
}

body.is-tavern-mode .bubble.is-guide-tip .guide-step-title {
    color: #f2c979;
    text-shadow: 0 1px 8px rgba(31, 15, 12, .28);
}

body.is-tavern-mode .bubble.is-guide-tip .answer-text {
    color: #f1d8a9;
    text-shadow: 0 1px 7px rgba(31, 15, 12, .22);
}

body.is-tavern-mode .bubble.is-guide-tip .guide-tip-title .ph-lightbulb {
    color: #f3bc5c;
}

body.is-tavern-mode .bubble.is-guide-tip .guide-collection-link {
    color: #ffd071;
    text-decoration-color: rgba(255, 208, 113, .72);
    text-shadow: 0 1px 8px rgba(31, 15, 12, .32);
}

body.is-tavern-mode .bubble.is-guide-tip .guide-collection-link:hover,
body.is-tavern-mode .bubble.is-guide-tip .guide-collection-link:focus-visible {
    color: #ffe3a6;
    text-decoration-color: currentColor;
}

body.is-tavern-mode .message.user .bubble {
    color: #3a271e;
    background: #bf7446;
    border-color: #92502f;
    box-shadow: 0 7px 18px rgba(41, 22, 18, .22);
}

body.is-tavern-mode .composer-input {
    color: #3a271e;
    background: rgba(246, 224, 178, .86) !important;
    border-color: rgba(189, 149, 102, .82);
    box-shadow: 0 10px 28px rgba(42, 22, 16, .18), 0 1px 0 rgba(255, 239, 204, .56) inset;
}

body.is-tavern-mode .composer-input textarea {
    color: #4a2d21;
}

body.is-tavern-mode .composer-input textarea::placeholder {
    color: #84563c;
    opacity: 1;
}

body.is-tavern-mode .composer-input #send {
    background: #bf7446;
    border-color: #92502f;
    box-shadow: inset 0 1px 0 rgba(255, 239, 204, .28), 0 3px 8px rgba(92, 43, 24, .25);
}

body.is-tavern-mode .composer-input #send:hover,
body.is-tavern-mode .composer-input #send:focus-visible {
    background: #a95e37;
    border-color: #7f4028;
}

/* Avoid the cool default chip rim in the Tavern palette. */
body.is-tavern-mode .suggestion-button,
body.is-tavern-mode .suggestion-info-button {
    border-color: rgba(164, 111, 67, .58);
}

body.is-tavern-mode .message.assistant .bubble:not(.is-greeting) .suggestion-button,
body.is-tavern-mode .message.assistant .bubble:not(.is-greeting) .suggestion-info-button {
    color: #653b28;
    background: rgba(255, 241, 211, .92);
}

body.is-tavern-mode .entity-tooltip-button {
    color: #70442d;
    background: #fae9c6;
    border-color: #bd9566;
}

body.is-tavern-mode .entity-tooltip-button:hover,
body.is-tavern-mode .entity-tooltip-button:focus-visible {
    color: #56301f;
    background: #edcf96;
    border-color: #a77448;
}

body.is-tavern-mode .entity-card-save {
    color: #70442d;
    background: #f4dfb8;
    border-color: #bd9566;
}

body.is-tavern-mode .entity-card-save.is-saved {
    color: #fff;
    background: #8b5637;
    border-color: #70442d;
}

body.is-tavern-mode .entity-origin-badge {
    color: #70442d;
    background: rgba(246, 226, 187, .84);
    border-color: rgba(164, 111, 67, .46);
}

body.is-tavern-mode .prompt-suggestion-search-list,
body.is-tavern-mode .prompt-suggestion-search-item {
    background: rgba(226, 198, 145, .86) !important;
    border-color: rgba(157, 106, 61, .76) !important;
}

body.is-tavern-mode .collection-panel {
    --collection-drop-accent: #a94f2d;
    --collection-drop-ring: rgba(255, 239, 202, .94);
    --collection-side-grabber: #8d5a35;
    background: linear-gradient(180deg, rgba(86, 53, 39, .96) 0, rgba(122, 74, 48, .96) 100%);
    border-right-color: rgba(255, 226, 177, .24);
    box-shadow: 12px 0 30px rgba(67, 35, 22, .22);
}

body.is-tavern-mode .collection-panel-header {
    background: rgba(75, 43, 31, .54);
    border-bottom-color: rgba(255, 226, 177, .2);
}

body.is-tavern-mode .collection-panel-body {
    background: transparent;
}

body.is-tavern-mode .collection-list > .collection-card[data-depth="0"],
body.is-tavern-mode .collection-list > .collection-card[data-depth="0"].is-collapsed {
    background: rgba(255, 226, 177, .075);
    border-color: rgba(255, 226, 177, .18);
}

body.is-tavern-mode .collection-list > .collection-card[data-depth="0"]:not(.is-collapsed) {
    background: rgba(255, 226, 177, .075);
    border-color: rgba(255, 226, 177, .18);
}

body.is-tavern-mode .collection-card[data-depth="0"] > .collection-card-content > .collection-child-list > .collection-card[data-depth="1"] {
    color: #3a271e;
    background: #cfad73;
    border-color: #9f7045;
}

body.is-tavern-mode .collection-card[data-depth="1"] .collection-card-toggle,
body.is-tavern-mode .collection-spell-level-heading {
    color: #623d2c;
}

body.is-tavern-mode .collection-card.is-collapsed .collection-card-preview-chip {
    color: rgba(103, 60, 40, .78);
    background: rgba(246, 226, 187, .48);
    border-color: rgba(159, 112, 69, .4);
}

body.is-tavern-mode .collection-card.is-collapsed .collection-card-preview-more {
    color: rgba(115, 72, 48, .66);
}

body.is-tavern-mode .collection-item-project {
    color: #6f3f27;
    background: #f4dfb8;
    border-color: #bd9566;
}

body.is-tavern-mode .collection-item-project:hover,
body.is-tavern-mode .collection-item-project:focus-visible {
    color: #fff;
    background: #9a542f;
}

body.is-tavern-mode .collection-item-drag-handle,
body.is-tavern-mode .collection-item-chip {
    color: #633b2a;
    background: #f7e6c2;
    border-color: #bd9566;
}

body.is-tavern-mode .collection-item-project {
    color: #7c4e31;
    background: #ead0a0;
    border-color: #bd9566;
}

body.is-tavern-mode .collection-item-remove {
    color: rgba(92, 52, 34, .75);
    background: rgba(122, 78, 49, .16);
    border-color: rgba(104, 62, 41, .26);
}

body.is-tavern-mode .collection-item-remove:hover,
body.is-tavern-mode .collection-item-remove:focus-visible {
    color: #633b2a;
    background: rgba(122, 78, 49, .28);
    border-color: rgba(104, 62, 41, .4);
}

body.is-tavern-mode .collection-spell-level-group + .collection-spell-level-group {
    border-top-color: rgba(98, 61, 44, .24);
}

body.is-tavern-mode .entity-drawer-panel,
body.is-tavern-mode .entity-drawer-header,
body.is-tavern-mode .entity-drawer-stack-item,
body.is-tavern-mode .entity-drawer-stack-header {
    color: #3a271e;
    border-color: #ad7848;
}

body.is-tavern-mode .entity-drawer-panel {
    background: rgba(229, 200, 147, .96);
}

body.is-tavern-mode :is(.entity-drawer-header, .entity-drawer-stack-item, .entity-drawer-stack-header) {
    background: var(--drawer-surface);
}

body.is-tavern-mode .entity-drawer {
    --scroll-hint-surface: #e5c893;
    --drawer-border: #ad7848;
    --drawer-frame-border: rgba(173, 120, 72, .72);
    --drawer-surface: #e5c893;
    --drawer-header-surface: #8d684f;
    --drawer-header-control-ink: #6f3f27;
    --drawer-handle-surface: #8d5a35;
    --drawer-elevation-ring: rgba(255, 226, 177, .28);
    --drawer-grabber-color: rgba(238, 214, 170, .9);
    --drawer-content-surface: rgba(255, 245, 218, .36);
    --drawer-content-subtle: rgba(215, 183, 120, .72);
    --drawer-content-border: rgba(156, 104, 62, .46);
    --drawer-content-divider: rgba(111, 63, 39, .28);
}

body.is-tavern-mode .entity-drawer-handle {
    --drawer-handle-surface: #8d684f;
}

body.is-tavern-mode .entity-drawer-action,
body.is-tavern-mode .entity-drawer-stack-close,
body.is-tavern-mode .entity-drawer-stack-collapse,
body.is-tavern-mode .entity-drawer-stack-pin {
    color: #6f3f27;
    background: #edd6aa;
    border-color: #ad7848;
}

body.is-tavern-mode .entity-drawer .entity-tooltip-list {
    background: rgba(255, 245, 218, .3);
    border-color: rgba(156, 104, 62, .3);
}

body.is-tavern-mode .entity-drawer-stack-handle {
    --drawer-handle-surface: #8d684f;
    color: #fff;
    background: var(--drawer-handle-surface);
    border-color: var(--drawer-handle-surface);
}

body.is-tavern-mode .entity-drawer-stack-handle.is-active {
    --drawer-handle-surface: #9c765b;
    color: #fff;
    background: #9c765b;
    border-color: #9c765b;
}

body.is-tavern-mode .entity-table thead th {
    background: var(--table-head);
}

/* Keep major accordion headers on the warm parchment palette instead of
   inheriting the slightly mint-tinted daylight default. */
body.is-tavern-mode .entity-flow-section-summary.is-major {
    background: rgba(246, 229, 195, .78);
}

/* The character guide remains the visual call to action in every theme,
   even where later generic suggestion styles would otherwise override it. */
body.is-dark-mode .start-suggestions .suggestion-button--highlight {
    color: #173b3d;
    background: #b9d8d1;
    border-color: #7fa8a2;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .22);
}

body.is-dark-mode .start-suggestions .suggestion-button--highlight:hover,
body.is-dark-mode .start-suggestions .suggestion-button--highlight:focus-visible {
    color: #102f31;
    background: #d3e8e2;
    border-color: #9dc0ba;
}

body.is-tavern-mode .message.assistant .bubble.is-start-categories .start-suggestions .suggestion-button--highlight {
    color: #fff8e8;
    background: #9a542f;
    border-color: #713b27;
    box-shadow: 0 5px 14px rgba(74, 34, 21, .24);
}

body.is-tavern-mode .message.assistant .bubble.is-start-categories .start-suggestions .suggestion-button--highlight:hover,
body.is-tavern-mode .message.assistant .bubble.is-start-categories .start-suggestions .suggestion-button--highlight:focus-visible {
    color: #fff;
    background: #7f432a;
    border-color: #603020;
}

/* Warm every remaining entity/table rim in the tavern theme; the default
   teal data borders otherwise leak through inside regular chat cards. */
body.is-tavern-mode :is(.entity-core-traits, .entity-core-trait, .entity-trait, .entity-field-section, .entity-info-box, .entity-flow-section, .entity-table-block, .entity-table-scroll, .entity-table-native, .entity-table-toggle, .entity-table-notice) {
    border-color: rgba(156, 104, 62, .52);
}

body.is-tavern-mode :is(.entity-description-block, .entity-trait + .entity-trait, .entity-field-section + .entity-field-section) {
    border-color: rgba(126, 76, 46, .3);
}

body.is-tavern-mode :is(.entity-table th, .entity-table td, .entity-table-native th, .entity-table-native td) {
    border-color: rgba(126, 76, 46, .28);
}

body.is-tavern-mode :is(.entity-tooltip-description h4, .entity-flow-section[open] > .entity-flow-section-summary) {
    border-color: rgba(126, 76, 46, .28);
}

body.is-tavern-mode :is(.entity-description-block, .entity-traits, .entity-field-sections, .source-list) {
    border-top-color: rgba(126, 76, 46, .26);
}

body.is-tavern-mode :is(.entity-rule-card .entity-tooltip-list, .entity-drawer .entity-tooltip-list, .entity-info-box, .entity-core-trait, .entity-trait, .entity-field-section, .entity-table-block, .entity-table-scroll) {
    border-color: rgba(166, 112, 68, .5);
    border-radius: 11px;
}

/* Key labels use the current theme accent instead of muted grey.  Keep them
   calmer than headings so values remain the strongest reading layer. */
.entity-tooltip-list dt,
.entity-core-trait dt,
.entity-table-block.is-core-traits-table .entity-table tbody th {
    color: var(--accent-dark);
    font-weight: 600;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 720px) {
    html,
    body {
        height: 100%;
        min-height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }

    /* A little more travel makes the deliberately subtle name wave legible on
       smaller screens without turning the greeting into a bouncing headline. */
    .assistant-greeting.is-animated .assistant-greeting-letter.is-wave {
        animation-name: greeting-letter-wave-mobile;
        animation-duration: 1.15s;
    }

    .mod_companion_chat :where(
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="search"],
        textarea,
        select
    ) {
        font-size: 16px !important;
    }

    .mod_companion_chat :where(button, .setting-select, .setting-control, .suggestion-chip) {
        touch-action: manipulation;
    }

    .quick-settings {
        gap: 4px;
        padding-left: 2px;
    }

    .quick-settings .setting-select,
    .quick-settings .setting-control {
        min-height: 26px;
        gap: 5px;
        padding: 3px 6px;
        font-size: 11px;
    }

    .quick-settings .effects-toggle {
        width: 26px;
        padding-right: 4px;
        padding-left: 4px;
    }

    .quick-settings .font-size-setting input[type="range"] {
        width: 72px;
        height: 32px;
        margin: -3px 2px;
    }

    .quick-settings .font-size-setting input[type="range"]::-webkit-slider-runnable-track {
        height: 8px;
    }

    .quick-settings .font-size-setting input[type="range"]::-webkit-slider-thumb {
        width: 26px;
        height: 26px;
        margin-top: -10px;
    }

    .quick-settings .font-size-setting input[type="range"]::-moz-range-track {
        height: 8px;
    }

    .quick-settings .font-size-setting input[type="range"]::-moz-range-thumb {
        width: 26px;
        height: 26px;
    }

    .collection-panel {
        right: auto;
        width: 75vw;
        min-width: min(300px, calc(100vw - 36px));
        max-width: none;
    }

    .collection-panel.has-custom-width {
        width: var(--collection-panel-width);
        max-width: calc(100vw - 36px);
    }

    .collection-panel-resize-handle {
        display: none;
    }

    .collection-panel-body {
        padding-bottom: max(120px, calc(env(safe-area-inset-bottom) + 96px));
    }

    .app-shell {
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        padding: 0;
    }

    .chat-panel {
        width: calc(100% - 24px);
        min-height: 100vh;
        margin-right: 12px;
        margin-left: 12px;
        border: 0;
        border-radius: 0;

        width: 100%;
        position: relative;
        height: 100%;
        min-height: 0;
        margin-right: unset;
        margin-left: unset;
        overflow: hidden;
    }

    .topbar,
    .prompt-suggestions {
        /*right: 12px;
        left: 12px;*/
        width: auto;
    }

    .topbar,
    .controls,
    .messages,
    .composer {
      /*  padding-left: 16px;
        padding-right: 16px;*/
    }

    .topbar {
        align-items: center;
        flex-direction: row;
    }

    .messages {
        /* Keep iOS out of all parent/grid height calculations. A fixed inset
           is resolved directly against the visible viewport. */
        position: fixed;
        z-index: 1;
        inset: 0;
        width: 100%;
        height: 100dvh;
        min-height: 0;
        max-height: 100dvh;
        margin-top: 0;
        padding-top: 220px;
        padding-right: 17px;
        padding-left: 17px;
        overflow-x: hidden;
        overflow-y: scroll;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }

    .bubble {
        padding: 17px 53px 17px 20px;
    }

    .message.assistant .bubble {
        width: 100%;
        max-width: 100%;
        padding-right: 11px;
        padding-left: 11px;
    }

    .message.assistant .bubble.is-greeting,
    .message.assistant .bubble.is-list-answer,
    .message.assistant .bubble.is-entity-answer {
        width: 100%;
        max-width: 100%;
    }

    .auth-popover {
        top: 72px;
        right: 16px;
        width: min(400px, calc(100vw - 32px));
    }

    .entity-tooltip-panel {
        top: 96px;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100dvh - 208px);
    }

    .entity-drawer {
        top: 96px;
        right: 0;
        left: auto;
        width: var(--entity-drawer-inline-size);
        max-height: calc(100dvh - 208px);
        transform: translateX(100%);
    }

    .entity-drawer:not(.is-collapsed) {
        transform: translateX(0);
    }

    .entity-drawer-panel {
        min-height: min(400px, calc(100dvh - 208px));
        max-height: inherit;
        border-right: 0;
        border-bottom: 1px solid var(--drawer-frame-border);
        border-radius: var(--drawer-panel-radius) 0 0 var(--drawer-panel-radius);
    }

    .entity-drawer-handle {
        top: 136px;
        right: 0;
        left: auto;
        width: 30px;
        height: 64px;
        border-right: 0;
        border-bottom: 1px solid var(--drawer-handle-surface);
        border-radius: 10px 0 0 10px;
        transform: translate3d(0, 0, 0);
    }

    body:not(.is-chat-dock-mode) .entity-drawer:not(.is-collapsed) + .entity-drawer-handle {
        right: 0;
        transform: translate3d(calc(0px - var(--entity-drawer-inline-size)), 0, 0);
    }

    .entity-drawer-stack-handles {
        top: 104px;
        gap: 8px;
    }

    .entity-drawer-stack-handle {
        width: 34px;
        min-height: 82px;
        max-height: 116px;
        padding: 8px 6px;
        border: 1px solid var(--drawer-handle-surface);
        border-right: 0;
        border-radius: 10px 0 0 10px;
        box-shadow: -7px 7px 16px rgba(40, 47, 44, .12);
        font-size: 11px;
        line-height: 1.1;
        text-align: center;
        text-orientation: mixed;
        white-space: nowrap;
        writing-mode: vertical-rl;
    }

    .entity-drawer.is-stack-mode .entity-drawer-panel {
        border: 0;
        border-radius: var(--drawer-panel-radius) 0 0 var(--drawer-panel-radius);
    }

    .entity-drawer.is-stack-mode .entity-drawer-body {
        padding-left: 0;
    }

    .entity-drawer-stack-item {
        min-height: min(var(--drawer-stack-minimum), 400px, calc(100dvh - 208px));
        max-height: calc(100dvh - 208px);
        border: 1px solid var(--drawer-frame-border);
        border-right: 0;
        border-radius: var(--drawer-panel-radius) 0 0 var(--drawer-panel-radius);
        box-shadow: 0 24px 58px rgba(50, 40, 25, .28);
    }

    .entity-drawer-stack-header {
        padding: 5px 10px;
    }

    .entity-drawer-stack-body {
        padding: 12px 14px 16px;
    }

    body:not(.is-chat-dock-mode) .entity-drawer.is-stack-mode:not(.is-collapsed) ~ .entity-drawer-stack-handles {
        right: 0;
        transform: translate3d(calc(0px - var(--entity-drawer-inline-size)), 0, 0);
    }

    .entity-drawer-header {
        padding: 5px 10px 5px 12px;
    }

    .entity-drawer-body {
        padding: 12px;
    }

    .collection-card-header {
        flex-direction: row;
    }

    .alphabet-scroll-marker {
        top: calc(90px + env(safe-area-inset-top));
        right: max(20px, env(safe-area-inset-right));
        left: auto;
        width: 38px;
        height: 116px;
        padding: 4px 2px;
    }

    .alphabet-scroll-marker-letter {
        width: auto;
        height: 18px;
        font-size: 14px;
    }

    .alphabet-scroll-marker-letter[data-offset="0"] {
        width: auto;
        height: 28px;
        font-size: 24px;
        line-height: 28px;
    }

    .prompt-suggestions {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 92px);
    }

    .suggestion-button {
        padding: 5px 8px;
        font-size: calc(12px * var(--reader-scale));
    }

    .suggestion-info-button {
        width: calc(24px * var(--reader-scale));
        font-size: calc(11.55px * var(--reader-scale));
    }

    .suggestion-preview-panel {
        width: min(360px, calc(100vw - 24px));
        max-height: min(440px, calc(100vh - 220px));
    }

    .entity-inline-preview-panel {
        width: min(340px, calc(100vw - 24px));
        max-height: min(420px, calc(100vh - 210px));
    }

    .alternative-suggestions .suggestion-button {
        padding: 4px 6px;
        font-size: calc(10px * var(--reader-scale));
    }

    .entity-list-suggestions .suggestion-button {
        padding: 5px 8px;
        font-size: calc(11.5px * var(--reader-scale));
    }

    .prompt-suggestions button {
        padding: 4px 7px;
        font-size: calc(11px * var(--reader-scale));
    }

    .prompt-suggestion-next {
        flex-basis: 32px;
        width: 32px;
        min-width: 32px;
        height: 32px;
        font-size: 14px !important;
    }

    .prompt-suggestions {
        padding: 0 16px;
        gap: 6px;
        flex-wrap: nowrap;
        min-height: 32px;
    }

    .prompt-suggestion-list {
        gap: 4px;
        min-height: 32px;
        overflow: hidden;
    }

    .prompt-suggestions.is-dynamic .prompt-suggestion-list {
        flex-basis: 100%;
        overflow-y: auto;
    }

    .prompt-suggestions.is-dynamic {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 58px);
        width: calc(100% - 20px);
        padding: 0;
    }

    .prompt-suggestion-search-list {
        max-height: calc(48px * 3 + 2px);
        padding: 0;
    }

    .prompt-suggestion-search-item {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        min-height: 48px;
        padding: 9px 13px !important;
    }

    .prompt-suggestions.is-idle .prompt-suggestion-search-list {
        max-height: calc(48px * 3 + 2px);
    }

    .prompt-suggestions.is-idle .prompt-suggestion-search-item {
        min-height: 48px;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .prompt-suggestion-search-label {
        font-size: calc(12.5px * var(--reader-scale));
    }

    .prompt-suggestion-search-meta {
        font-size: calc(10.5px * var(--reader-scale));
    }

    .prompt-suggestion-list button {
        max-width: calc(50% - 4px);
    }

    .prompt-suggestion-search-list button {
        max-width: none;
    }

    .messages {
        padding-bottom: calc(200px + var(--prompt-suggestions-space, 0px));
    }

    .controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .controls label {
        min-width: 0;
    }

    .composer {
        grid-template-columns: 1fr;
        width: calc(100% - 20px);
    }
}

@keyframes greeting-letter-wave-mobile {
    0%, 100% { transform: translateY(0) rotate(0); background-position: 100% center; }
    38% { transform: translateY(-.08em) rotate(-.34deg); background-position: 0 center; }
    68% { transform: translateY(.016em) rotate(.12deg); background-position: 32% center; }
}

/* Tooltip drawer: a darker header anchors the light reading surface and makes
   the attached handles feel secondary rather than like another primary tab. */
.entity-drawer-header,
.entity-drawer-stack-header {
    color: #fff !important;
    background: var(--drawer-header-surface) !important;
    border-bottom-color: color-mix(in srgb, var(--drawer-header-surface), #fff 22%) !important;
}

.entity-drawer-title,
.entity-drawer-stack-title {
    color: #fff !important;
}

.entity-drawer-header .entity-drawer-action,
.entity-drawer-stack-header .entity-drawer-stack-close,
.entity-drawer-stack-header .entity-drawer-stack-collapse,
.entity-drawer-stack-header .entity-drawer-stack-pin {
    color: var(--drawer-header-control-ink) !important;
    background: rgba(255, 255, 255, .9) !important;
    border-color: rgba(255, 255, 255, .56) !important;
    box-shadow: 0 1px 2px rgba(27, 48, 48, .12);
}

/* Keep the softened drawer rim on mobile as well, where an earlier responsive
   rule otherwise restores the heavier two-pixel stack border. */
.entity-drawer-stack-item {
    border-width: 1px;
}

/* A single rounded language across the interface: compact actions, collector
   controls and tooltip controls now use the same soft pill silhouette. */
button:not(.collection-panel-backdrop) {
    border-radius: 999px !important;
}

/* The auth tabs are two flush segments inside one outer pill. They must not
   inherit the global per-button pill radius, which leaves curved seams. */
button.auth-tab {
    border-radius: 0 !important;
}

/* Chips with an adjacent info action intentionally remain one connected
   control. The small action keeps the original joined edge instead of
   becoming a detached pill. */
.suggestion-chip:has(.suggestion-info-button) .suggestion-button {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.suggestion-chip .suggestion-info-button {
    border-radius: 0 999px 999px 0 !important;
}

/* Collector entries are segmented chips, not independent button pills. */
.collection-item-drag-handle {
    border-radius: 999px 0 0 999px !important;
}

button.collection-item-chip,
button.collection-item-project,
button.collection-item-remove-confirm,
button.collection-item-remove-cancel {
    border-radius: 0 !important;
}

button.collection-item-remove {
    border-radius: 0 999px 999px 0 !important;
}

/* Tooltip handles are attached tabs and keep their original drawer edge. */
button.entity-drawer-handle,
button.entity-drawer-stack-handle {
    border-radius: 10px 0 0 10px !important;
}

.collection-panel .collection-item {
    gap: 0;
}

.collection-panel .collection-item > :is(.collection-item-drag-handle, .collection-item-chip, .collection-item-project, .collection-item-remove) {
    margin: 0;
}

/* Collector chip actions use a quiet cool/warm distinction instead of both
   reading as the same white segment. */
body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode) .collection-panel .collection-item-project {
    color: #3f6668;
    background: rgba(231, 240, 241, .9);
    border-color: #b7d1d4;
}

body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode) .collection-panel .collection-item-project:hover,
body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode) .collection-panel .collection-item-project:focus-visible {
    background: #bcdde1;
    border-color: #8fbcc3;
}

/* A hairline rim keeps collapsed books legible against the airy day collector
   surface without turning them back into heavy cards. */
body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode) .collection-list > .collection-card[data-depth="0"].is-collapsed > .collection-card-header {
    box-shadow: inset 0 0 0 1px rgba(232, 244, 243, .22);
}

body.is-dark-mode .collection-list > .collection-card[data-depth="0"].is-collapsed > .collection-card-header {
    box-shadow: inset 0 0 0 1px rgba(190, 220, 213, .42);
}

body.is-tavern-mode .collection-list > .collection-card[data-depth="0"].is-collapsed > .collection-card-header {
    box-shadow: inset 0 0 0 1px rgba(255, 226, 177, .44);
}

/* The root collection itself is the only stage in both collapsed and expanded
   states. Child books keep their own cards, but the root header must not draw
   a second inset panel in day, night or tavern themes. */
.collection-list > .collection-card[data-depth="0"] > .collection-card-header {
    background: transparent;
    box-shadow: none;
}

body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode) .collection-list > .collection-card[data-depth="0"].is-collapsed > .collection-card-header,
body.is-dark-mode .collection-list > .collection-card[data-depth="0"].is-collapsed > .collection-card-header,
body.is-tavern-mode .collection-list > .collection-card[data-depth="0"].is-collapsed > .collection-card-header,
body.is-evening-mode .collection-list > .collection-card[data-depth="0"].is-collapsed > .collection-card-header {
    background: transparent;
    box-shadow: none;
}

/* Collections already have their own outer contour; separators between them
   only repeated that hierarchy. */
.collection-list > .collection-card[data-depth="0"],
.collection-list > .collection-card[data-depth="0"].is-collapsed {
    /* Root collections are visually separated by their own card rims, never
       by a horizontal rule in the list (across every theme). */
    border-bottom: 0 !important;
}


body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode) .collection-panel .collection-item-remove {
    color: #587276;
    background: rgba(231, 240, 241, .9);
    border-color: #b7d1d4;
}

body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode) .collection-panel .collection-item-remove:hover,
body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode) .collection-panel .collection-item-remove:focus-visible {
    color: #3f6668;
    background: #dcebed;
    border-color: #a7c5c9;
}

/* Match the inverted action segment of standard night chips. Info remains
   prominent, while delete uses the same idea with quieter contrast. */
body.is-dark-mode .collection-panel .collection-item-project {
    color: #294a4b;
    background: rgba(224, 233, 229, .94);
    border-color: #70827a;
}

body.is-dark-mode .collection-panel .collection-item-project:hover,
body.is-dark-mode .collection-panel .collection-item-project:focus-visible {
    color: #203b3c;
    background: #f0f5f2;
    border-color: #8fa39b;
}

body.is-dark-mode .collection-panel .collection-item-remove {
    color: rgba(41, 74, 75, .72);
    background: rgba(224, 233, 229, .72);
    border-color: rgba(112, 130, 122, .78);
}

body.is-dark-mode .collection-panel .collection-item-remove:hover,
body.is-dark-mode .collection-panel .collection-item-remove:focus-visible {
    color: #294a4b;
    background: rgba(240, 245, 242, .9);
    border-color: #8fa39b;
}

/* The save chooser is a compact menu, not a set of chips. Its book rows keep
   straight joined edges so the collection hierarchy remains immediately clear. */
button.entity-collection-menu-option,
button.entity-collection-menu-back {
    border-radius: 0 !important;
}

/* The dynamic suggestion surface keeps one soft outer contour. Its individual
   rows are deliberately square and separated, rather than reading as nested
   pills inside that contour. */
button.prompt-suggestion-search-item {
    border-radius: 0 !important;
}

.entity-collection-menu-group {
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(130, 120, 105, .18);
}

.entity-collection-menu-group-title {
    display: block;
    padding: 8px 10px 5px;
    color: var(--accent-dark);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.entity-collection-menu-group-empty {
    display: block;
    padding: 0 10px 8px;
    color: var(--muted);
    font-size: 12px;
}

.entity-collection-menu-group + .entity-collection-menu-option {
    border-top-color: rgba(130, 120, 105, .12);
}

.entity-collection-menu-book-option {
    width: 100%;
    margin-left: 0;
    padding-left: 10px;
    border-left: 0;
    background: linear-gradient(90deg, rgba(216, 231, 239, .42), rgba(255, 255, 255, .12)) !important;
}

.entity-collection-menu-collection-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.entity-collection-menu-collection-option::after {
    content: "›";
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
    opacity: .68;
}

.entity-collection-menu-book-option:hover,
.entity-collection-menu-book-option:focus-visible {
    background: linear-gradient(90deg, rgba(207, 228, 232, .72), rgba(247, 253, 252, .58)) !important;
}

.entity-collection-menu-option.is-guide-selected,
.collection-panel-close.is-guide-selected {
    border-color: var(--cursor-star-2) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cursor-star-2), transparent 28%),
        0 0 24px color-mix(in srgb, var(--cursor-star-1), transparent 20%) !important;
    filter: brightness(1.16);
    transform: scale(1.025);
}

.entity-collection-menu-option.is-guide-selected {
    color: var(--ink) !important;
    background: color-mix(in srgb, var(--cursor-star-2), var(--surface-strong) 66%) !important;
}

body.is-dark-mode .entity-collection-menu-book-option {
    color: #eee7d7;
    background: #30413d !important;
    border-top-color: rgba(168, 215, 198, .18);
}

body.is-dark-mode .entity-collection-menu-book-option:hover,
body.is-dark-mode .entity-collection-menu-book-option:focus-visible {
    color: #fff;
    background: #405953 !important;
}

body.is-dark-mode .entity-collection-menu {
    color: #eee7d7;
    background: #263936;
    border-color: #627970;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
}

body.is-dark-mode .entity-collection-menu-title {
    color: #bfc2ae;
    background: #263936;
}

body.is-dark-mode .entity-collection-menu-back,
body.is-dark-mode .entity-collection-menu-option {
    color: #eee7d7;
    background: #30413d;
    border-color: rgba(168, 215, 198, .18);
}

body.is-dark-mode .entity-collection-menu-back:hover,
body.is-dark-mode .entity-collection-menu-back:focus-visible,
body.is-dark-mode .entity-collection-menu-option:hover,
body.is-dark-mode .entity-collection-menu-option:focus-visible {
    color: #fff;
    background: #405953;
    outline: 0;
}

body.is-dark-mode .entity-collection-menu-option.is-saved {
    color: #cce9dc;
    background: #365048;
}

body.is-dark-mode .entity-collection-menu-message {
    color: #bfc2ae;
    border-top-color: rgba(168, 215, 198, .18);
}

body.is-tavern-mode .entity-collection-menu-book-option {
    background: linear-gradient(90deg, rgba(234, 208, 160, .44), rgba(255, 240, 205, .1)) !important;
    border-left-color: rgba(159, 112, 69, .32);
}

body.is-tavern-mode .entity-collection-menu-book-option:hover,
body.is-tavern-mode .entity-collection-menu-book-option:focus-visible {
    background: linear-gradient(90deg, rgba(234, 208, 160, .7), rgba(255, 235, 190, .45)) !important;
}

body.is-dark-mode .entity-collection-menu-option.is-guide-selected {
    color: #fff !important;
    background: color-mix(in srgb, var(--cursor-star-2), #30413d 62%) !important;
}

body.is-tavern-mode .entity-collection-menu-option.is-guide-selected {
    color: #3a271e !important;
    background: color-mix(in srgb, var(--cursor-star-2), #ead2a2 58%) !important;
}

/* The page colour belongs to the viewport, not the document height. A static
   pseudo layer keeps the theme composition stable behind very long answers
   without using background-attachment: fixed. */
body::before {
    position: fixed;
    z-index: 0;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(180deg, #6da6c6 0, #a3cbdf 34%, #8fb9b6 68%, #5f9094 100%);
    box-shadow: none;
    transform: translateZ(0);
}

body.is-dark-mode::before {
    background:
        radial-gradient(ellipse 48% 34% at 50% 2%, rgba(207, 229, 229, .2) 0, rgba(123, 177, 187, .09) 36%, transparent 73%),
        radial-gradient(ellipse 62% 52% at 50% -8%, rgba(120, 176, 190, .14) 0, transparent 68%),
        linear-gradient(180deg, rgba(54, 104, 122, .72) 0, rgba(47, 78, 69, .32) 48%, rgba(29, 43, 42, .9) 100%);
}

body.is-tavern-mode::before {
    background:
        radial-gradient(circle at 50% -8%, rgba(224, 142, 65, .48) 0, rgba(151, 75, 43, .2) 34%, transparent 62%),
        radial-gradient(circle at 12% 68%, rgba(133, 66, 40, .2) 0, transparent 38%),
        linear-gradient(180deg, #4b2b27 0, #342321 52%, #1f1a1b 100%);
}

body,
body.is-dark-mode,
body.is-tavern-mode {
    background: transparent;
}

/* Theme changes should feel like one ambient shift instead of three abrupt
   repaints. The class is present only for the short transition, so ordinary
   interactions retain their own quick feedback. */
body.is-theme-transitioning {
    transition: background .62s cubic-bezier(.22, .75, .28, 1), color .44s ease;
}

/* Gradients themselves cannot interpolate. This temporary copy of the old
   viewport background fades away above the new one, including on mobile. */
.theme-transition-layer {
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background-position: center;
    background-size: cover;
    box-shadow: none;
    opacity: 1;
    transform: translateZ(0);
    transition: opacity 1.01s cubic-bezier(.22, .75, .28, 1);
    will-change: opacity;
}

.theme-transition-layer.is-leaving {
    opacity: 0;
}

/* The backdrop crossfade can remain visually hidden behind opaque mobile UI
   surfaces. Fade and settle the complete UI stage as one compositor layer;
   this adds a little depth without animating every card separately. */
body.is-theme-transitioning .app-shell {
    animation: theme-ui-crossfade 1.06s cubic-bezier(.22, .75, .28, 1) both;
}

@keyframes theme-ui-crossfade {
    0% {
        opacity: .72;
        transform: translate3d(0, 5px, 0);
    }
    42% {
        opacity: .86;
        transform: translate3d(0, 1.5px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes theme-ui-crossfade-reduced {
    from { opacity: .76; }
    to { opacity: 1; }
}

@media (max-width: 767px) {
    .theme-transition-layer {
        transition-duration: 1.19s;
    }

    body.is-theme-transitioning .app-shell {
        animation-name: theme-ui-crossfade-mobile;
        animation-duration: 1.23s;
    }

    @keyframes theme-ui-crossfade-mobile {
        0% {
            opacity: .54;
            transform: translate3d(0, 4px, 0);
        }
        36% {
            opacity: .76;
            transform: translate3d(0, 1px, 0);
        }
        100% {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
}

body.is-theme-transitioning :is(
    .topbar,
    .chat-panel,
    .composer-input,
    .prompt-suggestion-search-list,
    .entity-drawer-panel,
    .entity-drawer-header,
    .entity-drawer-stack-item,
    .entity-drawer-stack-header,
    .collection-panel,
    .collection-panel-header,
    .collection-panel-body
) {
    transition: background-color .51s ease, background .57s ease, color .4s ease, border-color .51s ease, box-shadow .57s ease !important;
}

@media (prefers-reduced-motion: reduce) {
    body.is-theme-transitioning,
    body.is-theme-transitioning * {
        transition-duration: 0s !important;
    }

    /* Theme changes retain a calm opacity-only crossfade. There is no spatial
       movement, scaling or parallax, so the reduced-motion preference remains
       respected without turning the colour change into a hard cut. */
    body.is-theme-transitioning .app-shell {
        animation: theme-ui-crossfade-reduced .68s ease both;
    }

    body.is-theme-transitioning.is-theme-transition-reduced .theme-transition-layer {
        display: block;
        transition-duration: .68s !important;
    }
}

/* Chat cards and the right drawer present the same entity stage. Keep the
   data surface visually identical while retaining the wider chat grid. */
body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode) .message.assistant .bubble > .entity-rule-card .entity-tooltip-list {
    padding: 7px 10px;
    background: rgba(255, 253, 247, .58);
    border: 1px solid rgba(167, 135, 91, .3);
    border-radius: 8px;
}

body.is-dark-mode .message.assistant .bubble > .entity-rule-card .entity-tooltip-list {
    padding: 7px 10px;
    background: rgba(86, 122, 122, .5);
    border: 1px solid #7a948b;
    border-radius: 8px;
}

body.is-tavern-mode .message.assistant .bubble > .entity-rule-card .entity-tooltip-list {
    padding: 7px 10px;
    background: rgba(255, 245, 218, .3);
    border: 1px solid rgba(156, 104, 62, .3);
    border-radius: 8px;
}

/* Tooltip handles are intentionally more pronounced than their drawer frame.
   Day and tavern use darker tabs; night uses a moonlit light tab against the
   dark panel. This applies equally to the single and stacked tooltip modes. */
body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode) .entity-drawer {
    --drawer-header-surface: #3f6872;
}

body.is-dark-mode .entity-drawer {
    --drawer-header-surface: #83a89e;
    --drawer-header-control-ink: #294a4b;
}

body.is-dark-mode :is(.entity-drawer-header, .entity-drawer-stack-header),
body.is-dark-mode :is(.entity-drawer-title, .entity-drawer-stack-title) {
    color: #17302d !important;
}

body.is-tavern-mode .entity-drawer {
    --drawer-header-surface: #70432e;
}

body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode) :is(.entity-drawer-handle, .entity-drawer-stack-handle) {
    --drawer-handle-surface: #3f6872;
    color: #fff;
    background: var(--drawer-handle-surface);
    border-color: #345963;
    box-shadow: -7px 7px 16px rgba(38, 72, 79, .2);
}

body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode) .entity-drawer-stack-handle.is-active {
    --drawer-handle-surface: #527f88;
    color: #fff;
    background: var(--drawer-handle-surface);
    border-color: #416d76;
}

body.is-dark-mode :is(.entity-drawer-handle, .entity-drawer-stack-handle) {
    --drawer-handle-surface: #83a89e;
    color: #17302d;
    background: var(--drawer-handle-surface);
    border-color: #a4c5bc;
    box-shadow: -7px 7px 18px rgba(4, 16, 16, .34), inset 1px 0 0 rgba(236, 248, 243, .32);
}

body.is-dark-mode .entity-drawer-stack-handle.is-active {
    --drawer-handle-surface: #a9c9c0;
    color: #142925;
    background: var(--drawer-handle-surface);
    border-color: #c6ded7;
}

body.is-tavern-mode :is(.entity-drawer-handle, .entity-drawer-stack-handle) {
    --drawer-handle-surface: #70432e;
    color: #fff1d7;
    background: var(--drawer-handle-surface);
    border-color: #593322;
    box-shadow: -7px 7px 18px rgba(39, 19, 14, .3), inset 1px 0 0 rgba(255, 225, 176, .16);
}

body.is-tavern-mode .entity-drawer-stack-handle.is-active {
    --drawer-handle-surface: #8b5638;
    color: #fff6e4;
    background: var(--drawer-handle-surface);
    border-color: #6e4029;
}

/* The alphabet wheel floats across changing list surfaces, so each theme
   gives it a stable, contrasting reading surface of its own. */
body:not(.is-dark-mode):not(.is-tavern-mode):not(.is-evening-mode) .alphabet-scroll-marker {
    color: #285861;
    background: rgba(238, 247, 244, .9);
    border-color: rgba(70, 116, 120, .42);
    box-shadow: 0 7px 18px rgba(38, 72, 79, .14);
}

body.is-dark-mode .alphabet-scroll-marker {
    color: #d8ebe5;
    background: rgba(24, 48, 47, .9);
    border-color: rgba(131, 168, 158, .58);
    box-shadow: 0 7px 18px rgba(4, 16, 16, .3);
}

body.is-dark-mode .answer-category-chip {
    color: #d8ebe5;
    background: rgba(24, 48, 47, .78);
    border-color: rgba(131, 168, 158, .52);
    box-shadow: 0 1px 2px rgba(4, 16, 16, .18);
}

body.is-tavern-mode .alphabet-scroll-marker {
    color: #fff0cf;
    background: rgba(75, 40, 30, .92);
    border-color: rgba(220, 158, 91, .58);
    box-shadow: 0 7px 18px rgba(38, 18, 13, .3);
}

body.is-tavern-mode .answer-category-chip,
body.is-tavern-mode .answer-header > .meta span:not(.confidence) {
    color: #70412b;
    background: rgba(255, 232, 188, .46);
    border-color: rgba(157, 96, 52, .46);
    box-shadow: 0 1px 2px rgba(79, 39, 24, .05);
    font-weight: 700;
}

.character-example-tutorial-guard.is-interaction-attempt::before {
    animation: character-example-tutorial-click-attempt .52s ease-out both;
}

@keyframes character-example-tutorial-click-attempt {
    0% { opacity: .62; }
    42% { opacity: 1; }
    100% { opacity: .76; }
}

.alphabet-scroll-marker.is-visible {
    opacity: .96;
}

.alphabet-scroll-marker-letter[data-offset="0"] {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

/* Weapon and armor entities consist primarily of structured values. On wide chat cards
   they use the full stage instead of reserving an empty description column. */
@media (min-width: 900px) {
    .message.assistant .bubble > .entity-rule-card.entity-type-weapon,
    .message.assistant .bubble > .entity-rule-card.entity-type-armor {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-weapon > *,
    .message.assistant .bubble > .entity-rule-card.entity-type-armor > * {
        grid-column: 1 / -1;
    }

    .message.assistant .bubble > .entity-rule-card.entity-type-weapon .entity-tooltip-list,
    .message.assistant .bubble > .entity-rule-card.entity-type-armor .entity-tooltip-list {
        width: 100%;
        grid-template-columns:
            max-content minmax(170px, 1.25fr)
            max-content minmax(150px, 1fr);
        column-gap: 24px;
        row-gap: 7px;
        align-items: baseline;
    }
}

/* Featured-stat cards keep a stacked mobile layout and become a two-part
   dashboard when their own width permits it: highlights left, facts right. */
.entity-rule-card:has(> .entity-stat-layout) {
    container-name: featured-entity-card;
    container-type: inline-size;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
}

.entity-rule-card:has(> .entity-stat-layout) > * {
    grid-column: 1 / -1 !important;
}

.entity-stat-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    min-width: 0;
}

.entity-stat-layout > .entity-tooltip-list {
    width: 100%;
    min-width: 0;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    align-items: baseline;
}

.entity-stat-layout > .entity-tooltip-list dd {
    min-width: 0;
    overflow-wrap: anywhere;
}

.entity-stat-note {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    min-width: 0;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--surface-strong) 62%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 58%, transparent);
    border-radius: 10px;
    line-height: 1.35;
}

.entity-stat-note-label {
    color: var(--accent-dark);
    font-weight: 700;
}

.entity-stat-note-value {
    min-width: 0;
    overflow-wrap: anywhere;
}

@container featured-entity-card (min-width: 560px) {
    .entity-stat-layout {
        grid-template-columns: minmax(260px, .9fr) minmax(240px, 1.1fr);
        column-gap: 20px;
    }

    .entity-stat-layout > .entity-stat-orbits {
        grid-column: 1;
        align-content: start;
    }

    .entity-stat-layout > .entity-tooltip-list {
        grid-column: 2;
        grid-template-columns: max-content minmax(0, 1fr) !important;
        column-gap: 14px;
        row-gap: 8px;
    }

    .entity-stat-layout:not(.has-detail-list) {
        grid-template-columns: minmax(0, 1fr);
    }

    .entity-stat-layout:not(.has-detail-list) > .entity-stat-orbits {
        grid-column: 1 / -1;
    }

}

@container featured-entity-card (max-width: 559px) {
    .entity-stat-note {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
}

.entity-avatar {
    position: relative;
    isolation: isolate;
    display: grid;
    width: min(100%, 218px);
    aspect-ratio: 1;
    place-items: center;
    justify-self: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 34% 28%, color-mix(in srgb, #fff 36%, transparent), transparent 44%),
        linear-gradient(145deg, color-mix(in srgb, var(--accent) 28%, var(--surface-strong)), color-mix(in srgb, var(--surface) 82%, var(--accent-dark)));
    border: 1px solid color-mix(in srgb, #fff 46%, var(--line));
    border-radius: 50%;
    box-shadow:
        0 12px 24px color-mix(in srgb, var(--ink) 16%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 48%, transparent),
        inset 0 -16px 28px color-mix(in srgb, var(--accent-dark) 12%, transparent);
}

.entity-avatar::after {
    position: absolute;
    z-index: 1;
    inset: 9px;
    content: "";
    border: 1px solid color-mix(in srgb, #fff 44%, transparent);
    border-radius: inherit;
    pointer-events: none;
}

.entity-avatar img {
    position: relative;
    z-index: 2;
    width: 86%;
    height: 86%;
    object-fit: contain;
    filter:
        drop-shadow(6px 9px 7px color-mix(in srgb, var(--ink) 44%, transparent))
        drop-shadow(0 0 15px color-mix(in srgb, #fff 46%, transparent));
}

body:not(.is-evening-mode):not(.is-dark-mode):not(.is-tavern-mode) .entity-avatar {
    background:
        radial-gradient(circle at 34% 28%, color-mix(in srgb, #fff 62%, transparent), transparent 46%),
        linear-gradient(145deg, color-mix(in srgb, #fff 76%, var(--surface-strong)), color-mix(in srgb, #fff 54%, var(--accent)));
    box-shadow:
        0 12px 24px color-mix(in srgb, var(--ink) 13%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 62%, transparent),
        inset 0 -16px 28px color-mix(in srgb, var(--accent) 8%, transparent);
}

body.is-evening-mode .entity-avatar {
    background:
        radial-gradient(circle at 34% 28%, color-mix(in srgb, #fff 52%, transparent), transparent 46%),
        linear-gradient(145deg, #f8ead7, #e5cca6);
    border-color: color-mix(in srgb, #fff 54%, #b27b56);
}

body.is-dark-mode .entity-avatar img {
    filter:
        drop-shadow(6px 9px 7px color-mix(in srgb, #071313 54%, transparent))
        drop-shadow(0 0 8px color-mix(in srgb, #fff 22%, transparent));
}

@container featured-entity-card (min-width: 560px) {
    .entity-stat-layout.has-entity-avatar {
        grid-template-columns: minmax(190px, .8fr) minmax(250px, 1.2fr);
    }

    .entity-stat-layout.has-entity-avatar > .entity-avatar {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .entity-stat-layout.has-entity-avatar > .entity-tooltip-list {
        grid-column: 2;
        grid-row: 2;
    }

    .entity-stat-layout.has-entity-avatar > .entity-stat-orbits {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-start;
    }

    .entity-stat-layout.has-entity-avatar > .entity-stat-note {
        grid-column: 1 / -1;
    }
}

/* Evening keeps the airy, readable day surfaces but shifts the whole stage
   into a saturated sunset. The warm cloud rims and violet undersides share
   the existing slow day motion, including its accessibility controls. */
body.is-evening-mode::before {
    background:
        radial-gradient(ellipse 74% 28% at 76% 101%, rgba(255, 215, 124, .62) 0, rgba(243, 130, 91, .24) 43%, transparent 76%),
        radial-gradient(ellipse 68% 46% at 70% 74%, rgba(255, 164, 102, .22) 0, rgba(222, 87, 93, .1) 48%, transparent 76%),
        radial-gradient(ellipse 70% 55% at 8% 8%, rgba(107, 76, 142, .62) 0, transparent 69%),
        linear-gradient(164deg, #554677 0%, #87517c 23%, #c3546d 46%, #ec795b 68%, #f5b867 84%, #d86f62 100%);
}

body.is-evening-mode::after {
    position: fixed;
    z-index: 0;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(ellipse 58% 24% at 76% 100%, rgba(255, 240, 173, .34) 0, rgba(255, 190, 116, .12) 45%, transparent 78%),
        linear-gradient(116deg, transparent 46%, rgba(255, 224, 152, .08) 58%, transparent 71%),
        linear-gradient(70deg, transparent 52%, rgba(255, 191, 141, .07) 64%, transparent 78%);
    filter: blur(9px);
    opacity: .64;
    transform-origin: 50% 0;
    animation: day-sunray-flicker 7.4s ease-in-out infinite alternate;
}

body.is-evening-mode .day-clouds {
    opacity: .7;
}

body.is-evening-mode .day-clouds::before,
body.is-evening-mode .day-clouds::after {
    filter: blur(12px);
}

body.is-evening-mode .day-clouds::before {
    background:
        radial-gradient(ellipse 15% 7% at 4% 22%, rgba(255, 207, 170, .23) 0 47%, transparent 78%),
        radial-gradient(ellipse 12% 10% at 10% 17%, rgba(255, 239, 194, .25) 0 44%, transparent 76%),
        radial-gradient(ellipse 17% 6% at 16% 23%, rgba(255, 188, 157, .18) 0 46%, transparent 79%),
        radial-gradient(ellipse 24% 3.5% at 32% 42%, rgba(255, 199, 164, .16) 0 42%, transparent 82%),
        radial-gradient(ellipse 18% 8% at 44% 29%, rgba(255, 205, 165, .2) 0 47%, transparent 79%),
        radial-gradient(ellipse 13% 11% at 51% 23%, rgba(255, 237, 188, .23) 0 43%, transparent 76%),
        radial-gradient(ellipse 16% 6% at 58% 30%, rgba(255, 183, 154, .16) 0 46%, transparent 79%),
        radial-gradient(ellipse 29% 3% at 76% 15%, rgba(255, 224, 179, .18) 0 42%, transparent 84%),
        radial-gradient(ellipse 18% 7% at 94% 36%, rgba(255, 181, 153, .17) 0 47%, transparent 80%),
        radial-gradient(ellipse 11% 9% at 99% 30%, rgba(255, 228, 181, .2) 0 43%, transparent 77%);
}

body.is-evening-mode .day-clouds::after {
    background:
        radial-gradient(ellipse 25% 5% at 8% 81%, rgba(72, 43, 87, .16) 0 45%, transparent 82%),
        radial-gradient(ellipse 20% 4% at 30% 58%, rgba(91, 48, 96, .13) 0 44%, transparent 83%),
        radial-gradient(ellipse 30% 6% at 51% 53%, rgba(70, 40, 84, .15) 0 46%, transparent 82%),
        radial-gradient(ellipse 23% 4% at 70% 72%, rgba(67, 38, 81, .16) 0 45%, transparent 83%),
        radial-gradient(ellipse 32% 4% at 91% 86%, rgba(62, 37, 77, .15) 0 44%, transparent 84%);
    opacity: .34;
}

body.is-evening-mode .day-foreground-cloud,
body.is-evening-mode .day-ambient-cloud {
    --foreground-cloud-highlight: rgba(255, 244, 202, .72);
    --foreground-cloud-light: rgba(255, 205, 171, .58);
    --foreground-cloud-mid: rgba(237, 142, 151, .43);
    --foreground-cloud-shade: rgba(91, 47, 88, .29);
    filter: blur(4px) drop-shadow(0 13px 10px rgba(75, 38, 78, .3));
}

/* Wide screens expose the individual gradient primitives much more clearly
   than phones. Build each desktop cloud from a low foundation and three
   uneven, overlapping lobes so it reads as one organic silhouette instead of
   two paired ellipses. The mobile composition remains deliberately unchanged. */
@media (min-width: 768px) {
    .day-clouds {
        --ambient-cloud-foundation: rgba(255, 255, 255, .14);
        --ambient-cloud-lobe: rgba(250, 254, 248, .18);
        --ambient-cloud-highlight: rgba(255, 255, 255, .2);
        --ambient-cloud-shadow: rgba(62, 103, 111, .1);
        --ambient-cloud-blur: 6px;
    }

    body.is-evening-mode .day-clouds {
        --ambient-cloud-foundation: rgba(255, 188, 157, .18);
        --ambient-cloud-lobe: rgba(255, 207, 170, .23);
        --ambient-cloud-highlight: rgba(255, 239, 194, .25);
        --ambient-cloud-shadow: rgba(91, 47, 88, .16);
        --ambient-cloud-blur: 9px;
    }

    body:not(.is-dark-mode):not(.is-tavern-mode) .day-clouds::before,
    body:not(.is-dark-mode):not(.is-tavern-mode) .day-clouds::after {
        filter:
            blur(var(--ambient-cloud-blur))
            drop-shadow(0 9px 8px var(--ambient-cloud-shadow));
    }

    body:not(.is-dark-mode):not(.is-tavern-mode) .day-clouds::before {
        background:
            radial-gradient(ellipse 152px 31px at 8% 19%, var(--ambient-cloud-foundation) 0 48%, transparent 77%),
            radial-gradient(ellipse 64px 45px at 4.8% 17.2%, var(--ambient-cloud-lobe) 0 43%, transparent 75%),
            radial-gradient(ellipse 82px 58px at 8.4% 14.8%, var(--ambient-cloud-highlight) 0 42%, transparent 74%),
            radial-gradient(ellipse 69px 43px at 12.1% 17.5%, var(--ambient-cloud-lobe) 0 44%, transparent 76%),
            radial-gradient(ellipse 137px 29px at 23.5% 42%, var(--ambient-cloud-foundation) 0 48%, transparent 78%),
            radial-gradient(ellipse 57px 42px at 20.5% 40.5%, var(--ambient-cloud-lobe) 0 42%, transparent 75%),
            radial-gradient(ellipse 73px 53px at 23.7% 37.7%, var(--ambient-cloud-highlight) 0 41%, transparent 74%),
            radial-gradient(ellipse 62px 39px at 26.8% 40.6%, var(--ambient-cloud-lobe) 0 43%, transparent 76%),
            radial-gradient(ellipse 181px 36px at 40.5% 32%, var(--ambient-cloud-foundation) 0 49%, transparent 78%),
            radial-gradient(ellipse 74px 51px at 36.7% 30.5%, var(--ambient-cloud-lobe) 0 43%, transparent 75%),
            radial-gradient(ellipse 91px 65px at 40.7% 26.8%, var(--ambient-cloud-highlight) 0 42%, transparent 74%),
            radial-gradient(ellipse 79px 49px at 45% 30.2%, var(--ambient-cloud-lobe) 0 44%, transparent 76%),
            radial-gradient(ellipse 148px 31px at 76.5% 15%, var(--ambient-cloud-foundation) 0 48%, transparent 77%),
            radial-gradient(ellipse 61px 44px at 73.4% 13.6%, var(--ambient-cloud-lobe) 0 42%, transparent 75%),
            radial-gradient(ellipse 79px 56px at 76.6% 10.8%, var(--ambient-cloud-highlight) 0 41%, transparent 74%),
            radial-gradient(ellipse 66px 41px at 80.1% 13.7%, var(--ambient-cloud-lobe) 0 43%, transparent 76%),
            radial-gradient(ellipse 158px 32px at 92% 33%, var(--ambient-cloud-foundation) 0 48%, transparent 78%),
            radial-gradient(ellipse 66px 46px at 88.6% 31.4%, var(--ambient-cloud-lobe) 0 42%, transparent 75%),
            radial-gradient(ellipse 84px 59px at 92% 28.2%, var(--ambient-cloud-highlight) 0 41%, transparent 74%),
            radial-gradient(ellipse 70px 43px at 95.7% 31.7%, var(--ambient-cloud-lobe) 0 43%, transparent 76%);
    }

    body:not(.is-dark-mode):not(.is-tavern-mode) .day-clouds::after {
        background:
            radial-gradient(ellipse 143px 29px at 8% 79%, var(--ambient-cloud-foundation) 0 48%, transparent 78%),
            radial-gradient(ellipse 59px 42px at 4.9% 77.6%, var(--ambient-cloud-lobe) 0 42%, transparent 75%),
            radial-gradient(ellipse 76px 54px at 8.1% 74.7%, var(--ambient-cloud-highlight) 0 41%, transparent 74%),
            radial-gradient(ellipse 63px 40px at 11.5% 77.4%, var(--ambient-cloud-lobe) 0 43%, transparent 76%),
            radial-gradient(ellipse 132px 28px at 23% 57%, var(--ambient-cloud-foundation) 0 48%, transparent 78%),
            radial-gradient(ellipse 55px 40px at 20.1% 55.7%, var(--ambient-cloud-lobe) 0 42%, transparent 75%),
            radial-gradient(ellipse 70px 51px at 23.1% 52.8%, var(--ambient-cloud-highlight) 0 41%, transparent 74%),
            radial-gradient(ellipse 60px 38px at 26.3% 55.6%, var(--ambient-cloud-lobe) 0 43%, transparent 76%),
            radial-gradient(ellipse 155px 31px at 46.5% 50%, var(--ambient-cloud-foundation) 0 49%, transparent 78%),
            radial-gradient(ellipse 64px 45px at 43.2% 48.4%, var(--ambient-cloud-lobe) 0 42%, transparent 75%),
            radial-gradient(ellipse 81px 57px at 46.6% 45.2%, var(--ambient-cloud-highlight) 0 41%, transparent 74%),
            radial-gradient(ellipse 68px 42px at 50.2% 48.4%, var(--ambient-cloud-lobe) 0 43%, transparent 76%),
            radial-gradient(ellipse 166px 33px at 63% 69%, var(--ambient-cloud-foundation) 0 48%, transparent 78%),
            radial-gradient(ellipse 68px 47px at 59.5% 67.4%, var(--ambient-cloud-lobe) 0 42%, transparent 75%),
            radial-gradient(ellipse 86px 60px at 63.1% 63.8%, var(--ambient-cloud-highlight) 0 41%, transparent 74%),
            radial-gradient(ellipse 72px 44px at 67% 67.5%, var(--ambient-cloud-lobe) 0 43%, transparent 76%),
            radial-gradient(ellipse 145px 29px at 82% 84%, var(--ambient-cloud-foundation) 0 48%, transparent 78%),
            radial-gradient(ellipse 60px 42px at 78.9% 82.6%, var(--ambient-cloud-lobe) 0 42%, transparent 75%),
            radial-gradient(ellipse 77px 54px at 82.1% 79.7%, var(--ambient-cloud-highlight) 0 41%, transparent 74%),
            radial-gradient(ellipse 64px 40px at 85.5% 82.6%, var(--ambient-cloud-lobe) 0 43%, transparent 76%),
            radial-gradient(ellipse 137px 28px at 92% 44%, var(--ambient-cloud-foundation) 0 48%, transparent 78%),
            radial-gradient(ellipse 57px 40px at 89.1% 42.7%, var(--ambient-cloud-lobe) 0 42%, transparent 75%),
            radial-gradient(ellipse 72px 51px at 92.1% 39.9%, var(--ambient-cloud-highlight) 0 41%, transparent 74%),
            radial-gradient(ellipse 60px 38px at 95.3% 42.8%, var(--ambient-cloud-lobe) 0 43%, transparent 76%);
        opacity: .78;
    }
}

/* Final desktop density: exactly three ambient clouds are visible at once
   (small and large on the drifting layer, medium on the quiet layer). */
@media (min-width: 768px) {
    body:not(.is-dark-mode):not(.is-tavern-mode) .day-clouds::before {
        background:
            radial-gradient(ellipse 126px 27px at 13% 21%, var(--ambient-cloud-foundation) 0 50%, transparent 78%),
            radial-gradient(ellipse 57px 42px at 10.9% 19.4%, var(--ambient-cloud-lobe) 0 46%, transparent 76%),
            radial-gradient(ellipse 72px 52px at 13.1% 16.9%, var(--ambient-cloud-highlight) 0 45%, transparent 75%),
            radial-gradient(ellipse 61px 39px at 15.6% 19.5%, var(--ambient-cloud-lobe) 0 47%, transparent 77%),
            radial-gradient(ellipse 208px 42px at 78% 34%, var(--ambient-cloud-foundation) 0 51%, transparent 79%),
            radial-gradient(ellipse 88px 63px at 74.8% 31.7%, var(--ambient-cloud-lobe) 0 46%, transparent 76%),
            radial-gradient(ellipse 112px 80px at 78.2% 27.6%, var(--ambient-cloud-highlight) 0 45%, transparent 75%),
            radial-gradient(ellipse 94px 58px at 82% 31.7%, var(--ambient-cloud-lobe) 0 47%, transparent 77%);
    }

    body:not(.is-dark-mode):not(.is-tavern-mode) .day-clouds::after {
        background:
            radial-gradient(ellipse 166px 34px at 42% 73%, var(--ambient-cloud-foundation) 0 50%, transparent 79%),
            radial-gradient(ellipse 70px 51px at 39.3% 71.2%, var(--ambient-cloud-lobe) 0 46%, transparent 76%),
            radial-gradient(ellipse 89px 64px at 42.1% 67.8%, var(--ambient-cloud-highlight) 0 45%, transparent 75%),
            radial-gradient(ellipse 75px 47px at 45.2% 71.2%, var(--ambient-cloud-lobe) 0 47%, transparent 77%);
        opacity: .78;
    }
}

/* The three ambient clouds use the same layered body, highlights and shaded
   underside as the passing cloud. Their size, silhouette and travel speed
   differ while the cloud family remains visually consistent. */
.day-ambient-cloud {
    display: none;
}

@media (min-width: 768px) {
    body:not(.is-dark-mode):not(.is-tavern-mode) .day-clouds::before,
    body:not(.is-dark-mode):not(.is-tavern-mode) .day-clouds::after {
        background: none;
    }

    .day-ambient-cloud {
        --ambient-shape-x: 1;
        --ambient-shape-y: 1;
        --ambient-cloud-opacity: .58;
        --foreground-cloud-highlight: rgba(255, 255, 255, .58);
        --foreground-cloud-light: rgba(250, 255, 254, .47);
        --foreground-cloud-mid: rgba(237, 247, 246, .38);
        --foreground-cloud-shade: rgba(93, 137, 143, .2);
        position: absolute;
        right: auto;
        left: -430px;
        display: block;
        width: 370px;
        height: 128px;
        pointer-events: none;
        background:
            linear-gradient(100deg, transparent 1%, var(--foreground-cloud-mid) 24%, var(--foreground-cloud-light) 53%, var(--foreground-cloud-mid) 78%, transparent 99%) 50% 69% / 92% 31% no-repeat,
            radial-gradient(ellipse 82px 39px at 14% 68%, var(--foreground-cloud-mid) 0 43%, transparent 75%),
            radial-gradient(ellipse 106px 50px at 28% 57%, var(--foreground-cloud-light) 0 42%, transparent 74%),
            radial-gradient(ellipse 69px 60px at 41% 43%, var(--foreground-cloud-highlight) 0 40%, transparent 71%),
            radial-gradient(ellipse 91px 68px at 54% 39%, var(--foreground-cloud-light) 0 41%, transparent 72%),
            radial-gradient(ellipse 119px 48px at 68% 58%, var(--foreground-cloud-light) 0 43%, transparent 75%),
            radial-gradient(ellipse 86px 37px at 83% 65%, var(--foreground-cloud-mid) 0 43%, transparent 76%),
            radial-gradient(ellipse 58px 28px at 94% 72%, var(--foreground-cloud-mid) 0 40%, transparent 75%);
        filter:
            blur(4px)
            drop-shadow(0 12px 9px var(--foreground-cloud-shade));
        opacity: 0;
        transform: scale(var(--ambient-shape-x), var(--ambient-shape-y));
        transform-origin: center;
        animation: day-ambient-cloud-cross var(--ambient-cloud-duration) linear infinite;
        animation-delay: var(--ambient-cloud-delay);
        will-change: transform, opacity;
    }

    .day-ambient-cloud::before,
    .day-ambient-cloud::after {
        position: absolute;
        content: "";
        pointer-events: none;
    }

    .day-ambient-cloud::before {
        inset: 12% -4% 7%;
        background:
            radial-gradient(ellipse 78px 42px at 9% 57%, var(--foreground-cloud-mid) 0 35%, transparent 72%),
            radial-gradient(ellipse 93px 48px at 34% 50%, var(--foreground-cloud-light) 0 36%, transparent 73%),
            radial-gradient(ellipse 63px 49px at 47% 36%, var(--foreground-cloud-highlight) 0 34%, transparent 70%),
            radial-gradient(ellipse 108px 45px at 63% 54%, var(--foreground-cloud-light) 0 37%, transparent 74%),
            radial-gradient(ellipse 76px 34px at 87% 62%, var(--foreground-cloud-mid) 0 36%, transparent 73%);
        filter: blur(7px);
        opacity: .72;
        transform: rotate(var(--ambient-lobe-rotate, -1.8deg)) scale(var(--ambient-lobe-x, 1.03), var(--ambient-lobe-y, .92));
    }

    .day-ambient-cloud::after {
        right: -8%;
        bottom: 4%;
        left: -10%;
        height: 38%;
        background:
            radial-gradient(ellipse 42% 55% at 27% 22%, var(--foreground-cloud-shade) 0 21%, transparent 72%),
            radial-gradient(ellipse 47% 58% at 68% 18%, var(--foreground-cloud-shade) 0 19%, transparent 74%),
            linear-gradient(96deg, transparent 0, var(--foreground-cloud-mid) 22%, var(--foreground-cloud-shade) 53%, var(--foreground-cloud-mid) 76%, transparent 100%);
        filter: blur(9px);
        opacity: .56;
        transform: skewX(var(--ambient-underside-skew, -9deg)) scaleY(var(--ambient-underside-y, .68));
    }

    .day-ambient-cloud--small {
        --ambient-shape-x: .64;
        --ambient-shape-y: .7;
        --ambient-cloud-duration: 48s;
        --ambient-cloud-delay: -4s;
        --ambient-cloud-rest-x: calc(14vw + 430px);
        --ambient-lobe-rotate: 2.4deg;
        --ambient-lobe-x: .94;
        --ambient-lobe-y: 1.02;
        --ambient-underside-skew: -4deg;
        top: 23%;
        z-index: 3;
    }

    .day-ambient-cloud--medium {
        --ambient-shape-x: .88;
        --ambient-shape-y: .9;
        --ambient-cloud-duration: 78s;
        --ambient-cloud-delay: -31s;
        --ambient-cloud-rest-x: calc(46vw + 430px);
        --ambient-lobe-rotate: -1deg;
        --ambient-lobe-x: 1.01;
        --ambient-lobe-y: .96;
        --ambient-underside-skew: -11deg;
        top: 64%;
        z-index: 1;
    }

    .day-ambient-cloud--large {
        --ambient-shape-x: 1.12;
        --ambient-shape-y: 1.05;
        --ambient-cloud-duration: 118s;
        --ambient-cloud-delay: -47s;
        --ambient-cloud-rest-x: calc(76vw + 430px);
        --ambient-lobe-rotate: -3.4deg;
        --ambient-lobe-x: 1.08;
        --ambient-lobe-y: .88;
        --ambient-underside-skew: -7deg;
        top: 27%;
        z-index: 2;
    }

    body.is-evening-mode .day-ambient-cloud {
        --ambient-cloud-opacity: .64;
        --foreground-cloud-highlight: rgba(255, 244, 202, .72);
        --foreground-cloud-light: rgba(255, 205, 171, .58);
        --foreground-cloud-mid: rgba(237, 142, 151, .43);
        --foreground-cloud-shade: rgba(91, 47, 88, .29);
        filter:
            blur(4px)
            drop-shadow(0 13px 10px rgba(75, 38, 78, .3));
    }
}

@media (max-width: 767px) {
    body:not(.is-dark-mode):not(.is-tavern-mode) .day-clouds::before,
    body:not(.is-dark-mode):not(.is-tavern-mode) .day-clouds::after {
        background: none;
        animation: none;
        will-change: auto;
    }

    .day-ambient-cloud {
        --ambient-cloud-opacity: .54;
        --ambient-lobe-rotate: -1.8deg;
        --ambient-lobe-x: 1.03;
        --ambient-lobe-y: .92;
        --ambient-underside-skew: -9deg;
        --ambient-underside-y: .68;
        right: auto;
        left: -430px;
        display: block;
        opacity: 0;
        animation: day-ambient-cloud-cross var(--ambient-cloud-duration) linear infinite;
        animation-delay: var(--ambient-cloud-delay);
        transform: scale(var(--ambient-shape-x), var(--ambient-shape-y));
        transform-origin: center;
        will-change: transform, opacity;
    }

    .day-ambient-cloud::before {
        transform: rotate(var(--ambient-lobe-rotate)) scale(var(--ambient-lobe-x), var(--ambient-lobe-y));
    }

    .day-ambient-cloud::after {
        transform: skewX(var(--ambient-underside-skew)) scaleY(var(--ambient-underside-y));
    }

    .day-ambient-cloud--small {
        --ambient-shape-x: .45;
        --ambient-shape-y: .52;
        --ambient-cloud-duration: 48s;
        --ambient-cloud-delay: -4s;
        --ambient-cloud-rest-x: calc(12vw + 430px);
        --ambient-lobe-rotate: 2.4deg;
        --ambient-lobe-x: .94;
        --ambient-lobe-y: 1.02;
        --ambient-underside-skew: -4deg;
        top: 20%;
        z-index: 3;
    }

    .day-ambient-cloud--medium {
        --ambient-shape-x: .58;
        --ambient-shape-y: .62;
        --ambient-cloud-duration: 78s;
        --ambient-cloud-delay: -31s;
        --ambient-cloud-rest-x: calc(43vw + 430px);
        --ambient-lobe-rotate: -1deg;
        --ambient-lobe-x: 1.01;
        --ambient-lobe-y: .96;
        --ambient-underside-skew: -11deg;
        top: 63%;
        z-index: 1;
    }

    .day-ambient-cloud--large {
        --ambient-shape-x: .72;
        --ambient-shape-y: .7;
        --ambient-cloud-duration: 118s;
        --ambient-cloud-delay: -47s;
        --ambient-cloud-rest-x: calc(72vw + 430px);
        --ambient-lobe-rotate: -3.4deg;
        --ambient-lobe-x: 1.08;
        --ambient-lobe-y: .88;
        --ambient-underside-skew: -7deg;
        top: 25%;
        z-index: 2;
    }

    body.is-evening-mode .day-ambient-cloud {
        --ambient-cloud-opacity: .6;
    }
}

/* The staggered phases place the fast small cloud behind the large one at
   load. Their 48s/118s speed difference makes the pass visible instead of
   keeping the three silhouettes locked together. */
@keyframes day-ambient-cloud-cross {
    0% {
        opacity: 0;
        transform: translate3d(0, 5px, 0) scale(var(--ambient-shape-x), var(--ambient-shape-y));
    }
    7% {
        opacity: var(--ambient-cloud-opacity);
    }
    48% {
        transform: translate3d(calc(50vw + 430px), -5px, 0) scale(var(--ambient-shape-x), var(--ambient-shape-y));
    }
    93% {
        opacity: var(--ambient-cloud-opacity);
    }
    100% {
        opacity: 0;
        transform: translate3d(calc(100vw + 860px), 4px, 0) scale(var(--ambient-shape-x), var(--ambient-shape-y));
    }
}

body:is(.is-dark-mode, .is-tavern-mode) .day-ambient-cloud {
    animation-play-state: paused;
}

body.is-effects-disabled .day-ambient-cloud {
    animation: none !important;
    opacity: var(--ambient-cloud-opacity);
    transform: translate3d(var(--ambient-cloud-rest-x), 0, 0) scale(var(--ambient-shape-x), var(--ambient-shape-y));
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .day-ambient-cloud {
        animation: none !important;
        opacity: var(--ambient-cloud-opacity);
        transform: translate3d(var(--ambient-cloud-rest-x), 0, 0) scale(var(--ambient-shape-x), var(--ambient-shape-y));
        will-change: auto;
    }
}

body.is-evening-mode .chat-panel {
    background: rgba(126, 66, 91, .18);
    border-color: rgba(255, 199, 146, .34);
}

body.is-evening-mode .message.assistant .bubble:not(.is-greeting) {
    background: #fff1dc;
    border-color: rgba(151, 91, 91, .48);
    box-shadow: 0 8px 24px rgba(84, 42, 72, .14);
}

body.is-evening-mode .message.user .bubble {
    color: #4d3040;
    background: #ffdab7;
    border-color: rgba(165, 82, 91, .48);
    box-shadow: 0 7px 20px rgba(84, 42, 72, .14);
}

body.is-evening-mode :is(.auth-toggle, .collection-toggle, .setting-select, .setting-control) {
    color: #fff8e9;
    background: #70405f;
    border-color: #553047;
    box-shadow: inset 0 1px 0 rgba(255, 244, 224, .2), 0 3px 8px rgba(75, 35, 65, .2);
}

body.is-evening-mode :is(.auth-toggle, .collection-toggle, .setting-select, .setting-control):hover {
    background: #5d344f;
    border-color: #45263b;
}

body.is-evening-mode .auth-toggle.is-authenticated,
body.is-evening-mode .collection-toggle:disabled,
body.is-evening-mode .collection-toggle:disabled:hover {
    color: #fff8e9;
    background: #70405f;
    border-color: #553047;
}

body.is-evening-mode .effects-toggle[aria-pressed="true"] {
    color: rgba(255, 248, 233, .78);
    background: #8b536f;
}

body.is-evening-mode .message.assistant .bubble.is-start-categories .start-suggestions .suggestion-button--highlight {
    color: #fff8e9;
    background: #a64f67;
    border-color: #7d3b58;
    box-shadow: 0 5px 14px rgba(88, 39, 69, .2);
}

body.is-evening-mode .message.assistant .bubble.is-start-categories .start-suggestions .suggestion-button--highlight:hover,
body.is-evening-mode .message.assistant .bubble.is-start-categories .start-suggestions .suggestion-button--highlight:focus-visible {
    color: #fff;
    background: #8c405d;
    border-color: #693047;
}

body.is-evening-mode :is(.suggestion-button, .suggestion-info-button, .entity-inline-preview-button) {
    border-color: #d4a18f;
}

body.is-evening-mode .suggestion-button {
    background: #fff9ed;
}

body.is-evening-mode .suggestion-info-button {
    color: #70405f;
    background: #fff4e4;
}

body.is-evening-mode .message.assistant .bubble:not(.is-greeting) .alternative-suggestions .suggestion-button {
    color: #70405f;
    background: #fff7e9;
    border-color: #d79a88;
}

body.is-evening-mode .message.assistant .bubble:not(.is-greeting) .alternative-suggestions .suggestion-button:hover,
body.is-evening-mode .message.assistant .bubble:not(.is-greeting) .alternative-suggestions .suggestion-button:focus-visible,
body.is-evening-mode .suggestion-info-button:hover,
body.is-evening-mode .suggestion-info-button:focus-visible,
body.is-evening-mode .suggestion-chip.is-open .suggestion-info-button {
    color: #5d2945;
    background: #f0c9ad;
    border-color: #c77d78;
}

body.is-evening-mode .composer-input {
    background: #fff5e9;
    border-color: rgba(153, 81, 96, .5);
    box-shadow: 0 10px 30px rgba(76, 35, 65, .14), inset 0 1px 0 rgba(255, 255, 255, .92);
}

body.is-evening-mode .composer-input:focus-within {
    border-color: rgba(139, 64, 92, .72);
    box-shadow: 0 10px 30px rgba(76, 35, 65, .14), 0 0 0 3px rgba(166, 79, 103, .16);
}

body.is-evening-mode .composer-input #send {
    background: #8c405d;
    border-color: #682f49;
    box-shadow: inset 0 1px 0 rgba(255, 244, 224, .22), 0 3px 8px rgba(80, 32, 59, .22);
}

body.is-evening-mode .composer-input #send:hover,
body.is-evening-mode .composer-input #send:focus-visible {
    background: #77344f;
    border-color: #59243c;
}

body.is-evening-mode .composer-input .chat-reset {
    color: #7d3b58;
}

body.is-evening-mode .composer-input .chat-reset:hover,
body.is-evening-mode .composer-input .chat-reset:focus-visible {
    color: #642e49;
    background: rgba(166, 79, 103, .1);
}

body.is-evening-mode :is(textarea:focus, select:focus, button:focus-visible) {
    outline-color: rgba(166, 79, 103, .28);
}

body.is-evening-mode .entity-drawer {
    --drawer-header-surface: #70405f;
}

body.is-evening-mode :is(.entity-drawer-handle, .entity-drawer-stack-handle) {
    --drawer-handle-surface: #70405f;
    color: #fff8e9;
    background: var(--drawer-handle-surface);
    border-color: #553047;
    box-shadow: -7px 7px 18px rgba(74, 34, 64, .25);
}

body.is-evening-mode .entity-drawer-stack-handle.is-active {
    --drawer-handle-surface: #92536f;
    border-color: #70405f;
}

body.is-evening-mode .alphabet-scroll-marker {
    color: #753a59;
    background: rgba(248, 220, 203, .96);
    border-color: rgba(160, 75, 96, .58);
    box-shadow: 0 8px 20px rgba(74, 34, 64, .2), inset 0 1px 0 rgba(255, 250, 239, .72);
}

body.is-evening-mode .alphabet-scroll-marker-letter[data-offset="0"] {
    color: #642e4d;
    text-shadow: 0 2px 5px rgba(87, 38, 68, .18);
}

body.is-evening-mode .message.assistant .bubble.is-guide-tip {
    padding: 12px 20px 14px 24px;
    color: #4d3040;
    background: linear-gradient(118deg, #f9d9c7 0%, #f5c8c0 58%, #efb9b6 100%) !important;
    border: 1px solid rgba(151, 70, 91, .5) !important;
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(80, 35, 64, .14) !important;
}

body.is-evening-mode .message.assistant .bubble.is-guide-tip::before {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    display: block;
    width: 5px;
    content: "";
    background: linear-gradient(180deg, #a64f67, #7c3d62);
    border-radius: 0 999px 999px 0;
}

body.is-evening-mode .bubble.is-guide-tip .guide-step-title {
    color: #713653;
    text-shadow: none;
}

body.is-evening-mode .bubble.is-guide-tip .answer-text {
    color: #4d3040;
    text-shadow: none;
}

body.is-evening-mode .bubble.is-guide-tip .guide-tip-title .ph-lightbulb {
    color: #d16d57;
    filter: drop-shadow(0 2px 4px rgba(122, 53, 67, .16));
}

body.is-evening-mode .bubble.is-guide-tip .guide-collection-link {
    color: #843e5c;
    text-decoration-color: rgba(132, 62, 92, .58);
}

body.is-evening-mode .message.assistant .bubble.is-guide-step {
    color: #4d3040;
    background: #fff1dc !important;
    border-color: rgba(151, 91, 91, .52);
    box-shadow: 0 8px 24px rgba(84, 42, 72, .13);
}

body.is-evening-mode .bubble.is-guide-step .guide-step-title {
    color: #743c5d;
}

/* Evening workspaces: the collector is the darker organisational layer,
   while entity drawers retain a calm, nearly opaque reading surface. */
body.is-evening-mode .collection-panel {
    --collection-drop-accent: #b4476c;
    --collection-drop-ring: rgba(255, 241, 220, .96);
    --collection-side-grabber: #70405f;
    color: #fff4e4;
    background: linear-gradient(165deg, rgba(74, 46, 70, .96) 0%, rgba(104, 57, 82, .96) 52%, rgba(124, 66, 88, .96) 100%);
    border-right-color: rgba(244, 176, 146, .34);
    box-shadow: 14px 0 34px rgba(61, 28, 52, .26);
}

body.is-evening-mode .collection-panel-header {
    background: rgba(68, 40, 64, .96);
    border-bottom-color: rgba(255, 218, 183, .24);
    box-shadow: 0 6px 18px rgba(48, 22, 43, .22);
}

body.is-evening-mode .collection-panel-body {
    background: transparent;
    scrollbar-color: rgba(255, 218, 190, .42) transparent;
}

body.is-evening-mode .collection-panel-close,
body.is-evening-mode .collection-accordion-toggle {
    color: #fff6e7;
    background: rgba(255, 231, 204, .1);
    border-color: rgba(255, 220, 187, .34);
}

body.is-evening-mode .collection-panel-close:hover,
body.is-evening-mode .collection-panel-close:focus-visible,
body.is-evening-mode .collection-accordion-toggle:hover,
body.is-evening-mode .collection-accordion-toggle:focus-visible {
    background: rgba(255, 220, 187, .2);
    border-color: rgba(255, 229, 202, .56);
}

body.is-evening-mode .collection-list > .collection-card[data-depth="0"],
body.is-evening-mode .collection-list > .collection-card[data-depth="0"].is-collapsed {
    color: #fff3df;
    background: rgba(255, 218, 190, .075);
    border-color: rgba(255, 218, 190, .19);
}

body.is-evening-mode .collection-list > .collection-card[data-depth="0"]:not(.is-collapsed) {
    background: rgba(255, 218, 190, .075);
    border-color: rgba(255, 218, 190, .19);
}

body.is-evening-mode .collection-card[data-depth="0"] > .collection-card-header {
    background: transparent;
}

body.is-evening-mode .collection-card[data-depth="0"] > .collection-card-content > .collection-child-list > .collection-card[data-depth="1"],
body.is-evening-mode .collection-card[data-depth="1"] {
    color: #573047;
    background: #dca4a7;
    border-color: #b96f82;
    box-shadow: 0 8px 20px rgba(54, 24, 47, .16);
}

body.is-evening-mode .collection-card[data-depth="2"] {
    color: #573047;
    background: #efc7bc;
    border-color: #c8888e;
}

body.is-evening-mode .collection-card[data-depth="1"] .collection-card-toggle,
body.is-evening-mode .collection-spell-level-heading {
    color: #6e3554;
}

body.is-evening-mode .collection-spell-level-group + .collection-spell-level-group {
    border-top-color: rgba(113, 54, 83, .22);
}

body.is-evening-mode .collection-card.is-collapsed .collection-card-preview-chip {
    color: rgba(91, 45, 70, .82);
    background: rgba(255, 239, 220, .58);
    border-color: rgba(151, 79, 98, .38);
}

body.is-evening-mode .collection-card.is-collapsed .collection-card-preview-more {
    color: rgba(255, 218, 190, .72);
}

body.is-evening-mode :is(
    .collection-item-drag-handle,
    .collection-item-chip,
    .collection-item-project,
    .collection-action-menu,
    .collection-root-create .collection-child-form
) {
    color: #65344f;
    background: #fff1dc;
    border-color: #c98b86;
}

body.is-evening-mode .collection-item-remove {
    color: rgba(101, 52, 79, .78);
    background: #f2cbc0;
    border-color: #c98b86;
}

body.is-evening-mode .collection-item-project:hover,
body.is-evening-mode .collection-item-project:focus-visible {
    color: #fff8e9;
    background: #8c405d;
    border-color: #682f49;
}

body.is-evening-mode .collection-card-actions .collection-spell-group-toggle[aria-pressed="true"] {
    color: #fff8e9;
    background: #a64f67;
}

body.is-evening-mode .entity-drawer {
    --scroll-hint-surface: #fff1dc;
    --drawer-border: #c88d7f;
    --drawer-frame-border: rgba(137, 66, 91, .66);
    --drawer-surface: #fff1dc;
    --drawer-header-surface: #70405f;
    --drawer-header-control-ink: #70405f;
    --drawer-elevation-ring: rgba(255, 226, 196, .56);
    --drawer-grabber-color: rgba(245, 190, 205, .92);
}

body.is-evening-mode :is(.entity-drawer-header, .entity-drawer-stack-header) {
    color: #fff8e9 !important;
    background: #70405f !important;
    border-bottom-color: #9c6680 !important;
}

body.is-evening-mode :is(.entity-drawer-title, .entity-drawer-stack-title) {
    color: #fff8e9 !important;
}

body.is-evening-mode .entity-drawer-panel,
body.is-evening-mode .entity-drawer-stack-item {
    border-color: rgba(137, 66, 91, .66);
    box-shadow: 0 24px 58px rgba(65, 29, 54, .25), 0 0 0 1px rgba(255, 226, 196, .46);
}

body.is-evening-mode .entity-drawer-panel {
    background: rgba(255, 241, 220, .96);
}

body.is-evening-mode .entity-drawer-stack-item {
    background: #fff1dc;
}

body.is-evening-mode .message.assistant .bubble > .entity-rule-card .entity-tooltip-list,
body.is-evening-mode .entity-drawer .entity-tooltip-list {
    padding: 10px 14px;
    background: #fae9d2;
    border: 1px solid rgba(177, 111, 102, .34);
    border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
    body.is-evening-mode::after {
        animation: none;
    }
}

body.is-evening-mode .topbar {
    background: rgba(255, 225, 190, .76);
    border-bottom-color: rgba(157, 78, 91, .3);
    box-shadow: 0 8px 24px rgba(87, 44, 77, .12);
}

body.is-evening-mode .composer-backdrop {
    background: linear-gradient(to top, #493044 0, rgba(73, 48, 68, .92) 18%, rgba(89, 53, 76, .7) 42%, rgba(105, 62, 84, .3) 72%, transparent 100%);
}

body.is-evening-mode .chat-logo-day-rule-color {
    background: linear-gradient(145deg, rgba(255, 222, 135, .88), rgba(246, 126, 111, .66) 52%, rgba(193, 106, 166, .58));
    opacity: .42;
}

body.is-evening-mode .assistant-greeting-name-shimmer,
body.is-evening-mode .assistant-greeting-letter.is-name-accent {
    --day-greeting-name: rgba(255, 252, 245, .98);
    color: var(--day-greeting-name);
    -webkit-text-fill-color: var(--day-greeting-name);
    text-shadow: 0 1px 7px rgba(95, 47, 76, .26);
}

body.is-evening-mode .assistant-greeting {
    color: rgba(255, 250, 242, .95);
    text-shadow: 0 1px 7px rgba(89, 43, 72, .2);
}

body.is-evening-mode .assistant-greeting.is-animated .assistant-greeting-name-shimmer.is-wave {
    background-color: #fff4d5;
    background-image: linear-gradient(122deg, #fff4d5 0%, #fff4d5 38%, #ffe69d 44%, #f7a98d 50%, #d8a4e2 56%, #fff4d5 63%, #fff4d5 100%);
    -webkit-text-fill-color: transparent;
}

@media (min-width: 721px) {
    body.is-evening-mode .chat-panel {
        background:
            linear-gradient(180deg, rgba(92, 49, 85, .03) 0%, rgba(89, 42, 72, .08) 52%, rgba(61, 31, 58, .28) 100%),
            rgba(183, 103, 106, .11);
    }
}

body.is-evening-mode .collection-panel .collection-item-project {
    color: #713653;
    background: #f4d0c2;
    border-color: #c98b86;
}

body.is-evening-mode .collection-panel .collection-item-project:hover,
body.is-evening-mode .collection-panel .collection-item-project:focus-visible {
    color: #fff8e9;
    background: #8c405d;
    border-color: #682f49;
}

body.is-evening-mode .collection-panel .collection-item-remove {
    color: #713653;
    background: #eebfba;
    border-color: #c98b86;
}

body.is-evening-mode .collection-panel .collection-item-remove:hover,
body.is-evening-mode .collection-panel .collection-item-remove:focus-visible {
    color: #5d2945;
    background: #e4aaa9;
    border-color: #b66f7a;
}

/* -------------------------------------------------------------------------
   Experimental chat dock. Every rule is scoped to the runtime layout class;
   disabling RULE_GUIDE_CHAT_DOCK removes the controls and leaves the classic
   drawer untouched. */

.chat-layout-toggle,
.chat-cloud-toggle,
.chat-dock-group-toggle {
    display: inline-grid;
    width: 31px;
    height: 31px;
    padding: 0;
    place-items: center;
    color: #42666d;
    background: rgba(255, 255, 255, .58);
    border: 1px solid rgba(66, 102, 109, .32);
    border-radius: 9px;
    cursor: pointer;
    font-size: 15px;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.chat-layout-toggle:hover,
.chat-layout-toggle:focus-visible,
.chat-cloud-toggle:hover,
.chat-cloud-toggle:focus-visible,
.chat-dock-group-toggle:hover,
.chat-dock-group-toggle:focus-visible,
.chat-layout-toggle[aria-pressed="true"],
.chat-cloud-toggle[aria-pressed="true"],
.chat-dock-group-toggle[aria-pressed="true"] {
    color: #fff;
    background: #527f88;
    border-color: #2d5964;
    transform: translateY(-1px);
}

.chat-layout-toggle.is-hidden,
.chat-cloud-toggle.is-hidden,
.chat-dock-group-toggle.is-hidden {
    display: none;
}

.quick-settings .chat-dock-group-toggle {
    color: #fff;
    background: #294d55;
    border-color: #183a40;
    border-radius: 999px;
}

.quick-settings.is-chat-dock-rail .chat-dock-group-toggle {
    order: 99;
}

body.is-dark-mode .quick-settings.is-chat-dock-rail .chat-dock-group-toggle {
    background: #1d363a;
    border-color: #10282b;
}

body.is-evening-mode .quick-settings.is-chat-dock-rail .chat-dock-group-toggle {
    background: #563046;
    border-color: #3e2032;
}

body.is-tavern-mode .quick-settings.is-chat-dock-rail .chat-dock-group-toggle {
    background: #60402f;
    border-color: #432b20;
}

.collection-action-menu .collection-dock-project.is-projected {
    color: #17684a;
    background: #e8f4ed;
}

body.is-chat-dock-mode .messages {
    padding-bottom: calc(280px + var(--prompt-suggestions-space, 0px));
}

body.is-chat-dock-mode #chat-form {
    transform-origin: bottom center;
    will-change: opacity, transform;
    transition: opacity .28s ease,
        transform .44s cubic-bezier(.16, 1, .3, 1);
}

body.is-chat-dock-mode #chat-form.is-scroll-compact {
    opacity: .84;
    transform: translateX(-50%) translateY(4px) scale(.72);
}

body.is-chat-dock-mode #chat-form.is-scroll-compact .composer-input {
    box-shadow: 0 5px 18px rgba(45, 37, 26, .1),
        0 1px 0 rgba(255, 255, 255, .82) inset;
}

.entity-stat-orbits {
    --reader-scale: 1;
    --reader-scale-heading: .95;
    --reader-scale-small: 1;
}

.mod_companion_chat.is-chat-dock-mode .prompt-suggestions {
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 62px);
}

.mod_companion_chat.is-chat-dock-mode.has-chat-dock-tabs .prompt-suggestions {
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 96px + var(--chat-dock-tab-height, 112px));
}

.mod_companion_chat.is-chat-dock-mode.is-chat-dock-expanded .prompt-suggestions {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}

body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout {
    --drawer-stack-minimum: 0px;
    z-index: 68;
    top: auto;
    right: auto;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 96px + var(--chat-dock-tab-height, 0px));
    left: 50%;
    width: min(calc(100% - 128px), var(--chat-content-width));
    max-width: min(calc(100% - 128px), var(--chat-content-width));
    max-height: min(52dvh, calc(100dvh - 250px));
    opacity: 1;
    pointer-events: none;
    transform: translate3d(-50%, calc(100% + 24px), 0);
    transition: transform .28s cubic-bezier(.2, .78, .2, 1), opacity .18s ease;
}

.entity-drawer-resize-grab {
    display: none;
}

body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout:not(.is-collapsed) {
    transform: translate3d(-50%, 0, 0);
}

body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout.is-closing {
    opacity: 0;
}

body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout .entity-drawer-panel,
body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout.is-stack-mode .entity-drawer-panel {
    min-height: min(310px, 42dvh);
    max-height: inherit;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
}

body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout .entity-drawer-body,
body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout.is-stack-mode .entity-drawer-body {
    max-height: inherit;
    padding: 0;
    overflow: hidden;
}

body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout .entity-drawer-stack-item {
    min-height: min(310px, 42dvh);
    max-height: min(52dvh, calc(100dvh - 250px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--ink);
    background: var(--drawer-surface);
    border: 1px solid var(--drawer-frame-border);
    border-radius: 14px;
}

body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout .entity-drawer-stack-header {
    border-radius: 13px 13px 0 0;
}

body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout :is(.entity-drawer-collapse, .entity-drawer-stack-collapse) {
    font-size: 0;
}

body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout :is(.entity-drawer-collapse, .entity-drawer-stack-collapse)::before {
    content: "\2212";
    font-size: 19px;
    line-height: 1;
    transform: translateY(3px);
}

body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout.has-scroll-more::after {
    border-radius: 0 0 14px 14px;
}

body.is-chat-dock-mode .entity-drawer-handle {
    display: none !important;
}

body.is-chat-dock-mode .entity-drawer-stack-handles {
    position: fixed;
    z-index: 72;
    top: auto !important;
    right: auto !important;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 88px);
    left: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 4px;
    width: min(var(--chat-dock-stage-width, var(--chat-content-width)), calc(100% - 128px));
    max-height: var(--chat-dock-stage-max-height, 124px);
    /* The first 24px belong to the resize grabber, so chip taps never
       compete with the grab gesture on narrow touch screens. */
    padding: 24px 4px 4px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(20, 42, 46, .306);
    border: 1px solid rgba(218, 237, 234, .14);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(13, 29, 32, .14), inset 0 1px 0 rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(16px) saturate(1.06);
    backdrop-filter: blur(16px) saturate(1.06);
    pointer-events: auto;
    transform: translateX(-50%);
    transform-origin: bottom center;
    will-change: bottom, max-height, opacity, padding, width;
    transition: bottom .4s cubic-bezier(.16, 1, .3, 1),
        max-height .4s cubic-bezier(.16, 1, .3, 1),
        opacity .24s ease,
        padding .4s cubic-bezier(.16, 1, .3, 1),
        width .4s cubic-bezier(.16, 1, .3, 1);
}

body.is-chat-dock-mode.is-chat-dock-scroll-compact .entity-drawer-stack-handles {
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 70px);
    width: min(var(--chat-dock-stage-width, var(--chat-content-width)), calc(100% - 220px));
    max-height: min(var(--chat-dock-stage-max-height, 124px), 66px);
    padding-top: 5px;
    opacity: .88;
}

body.is-chat-dock-mode.is-chat-dock-scroll-compact .entity-drawer.is-chat-dock-layout {
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 78px + var(--chat-dock-tab-height, 0px));
}

body.is-chat-dock-mode.is-chat-dock-scroll-compact .mod_companion_chat.has-chat-dock-tabs .prompt-suggestions {
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 78px + var(--chat-dock-tab-height, 66px));
}

body.is-chat-dock-mode.is-chat-dock-scroll-compact .chat-dock-stage-resize-grab,
body.is-chat-dock-mode.is-chat-dock-scroll-compact .chat-dock-clear {
    opacity: 0;
    pointer-events: none;
}

.chat-dock-stage-resize-grab {
    --chat-dock-stage-grabber-color: rgba(218, 237, 234, .78);
    position: fixed;
    z-index: 73;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 88px + var(--chat-dock-tab-height, 0px) - 24px);
    left: 50%;
    display: none;
    width: 96px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    cursor: ns-resize;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    transform: translateX(-50%);
    transition: opacity .2s ease;
}

body.is-chat-dock-mode .chat-dock-stage-resize-grab:not([hidden]) {
    display: block;
}

.chat-dock-stage-resize-grab::before,
.chat-dock-stage-resize-grab::after {
    display: block;
    height: 2px;
    content: "";
    background: var(--chat-dock-stage-grabber-color);
    border-radius: 999px;
    box-shadow: 0 1px 0 rgba(9, 27, 30, .24);
}

.chat-dock-stage-resize-grab::before {
    width: 28px;
    margin: 3px auto 0;
}

.chat-dock-stage-resize-grab::after {
    width: 18px;
    margin: 2px auto 0;
    opacity: .76;
}

.chat-dock-stage-resize-grab:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--chat-dock-stage-grabber-color) 14%, transparent);
}

body.is-dark-mode .chat-dock-stage-resize-grab {
    --chat-dock-stage-grabber-color: rgba(176, 211, 202, .9);
}

body.is-evening-mode .chat-dock-stage-resize-grab {
    --chat-dock-stage-grabber-color: rgba(245, 190, 205, .92);
}

body.is-tavern-mode .chat-dock-stage-resize-grab {
    --chat-dock-stage-grabber-color: rgba(238, 214, 170, .9);
}

body.is-resizing-chat-dock-stage {
    cursor: ns-resize;
    user-select: none;
}

.chat-dock-clear {
    position: fixed;
    z-index: 73;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 88px + var(--chat-dock-tab-height, 0px) - 25px);
    left: min(calc(50% + var(--chat-dock-stage-half-width, 0px) + 5px), calc(100% - 30px));
    display: none;
    width: 25px;
    min-width: 0;
    height: 25px;
    padding: 0;
    color: rgba(238, 248, 246, .76);
    background: rgba(34, 67, 72, .24);
    border: 1px solid rgba(218, 237, 234, .2);
    border-radius: 999px;
    box-shadow: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    opacity: .72;
    transition: opacity .16s ease, background-color .16s ease, border-color .16s ease;
}

.chat-dock-clear-icon {
    display: block;
    line-height: 1;
}

body.is-chat-dock-mode .chat-dock-clear:not([hidden]) {
    display: inline-grid;
    place-items: center;
}

.chat-dock-clear:is(:hover, :focus-visible) {
    color: #fff;
    background: rgba(34, 67, 72, .54);
    border-color: rgba(226, 244, 242, .48);
    opacity: 1;
}

body.is-dark-mode .chat-dock-clear {
    color: rgba(223, 244, 241, .78);
    background: rgba(18, 48, 51, .44);
    border-color: rgba(112, 169, 174, .26);
}

body.is-evening-mode .chat-dock-clear {
    color: rgba(255, 241, 243, .82);
    background: rgba(82, 43, 66, .42);
    border-color: rgba(226, 158, 179, .28);
}

body.is-tavern-mode .chat-dock-clear {
    color: rgba(247, 230, 189, .82);
    background: rgba(73, 43, 29, .42);
    border-color: rgba(201, 169, 106, .28);
}

body.is-chat-dock-mode .entity-drawer-stack-handle {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    width: auto;
    min-width: 88px;
    max-width: 154px;
    min-height: 32px;
    max-height: none;
    margin: 0;
    padding: 5px 9px;
    overflow: hidden;
    color: #eef8f7;
    background: rgba(68, 113, 122, .92);
    border: 1px solid rgba(218, 237, 234, .32);
    border-radius: 999px;
    box-shadow: 0 2px 7px rgba(32, 71, 77, .12);
    font-size: 10.5px;
    line-height: 1.15;
    justify-content: center;
    text-align: center;
    text-orientation: initial;
    white-space: nowrap;
    writing-mode: horizontal-tb;
}

body.is-chat-dock-mode .entity-drawer-stack-handles .entity-drawer-stack-handle {
    border-radius: 999px !important;
}

body.is-chat-dock-mode .entity-drawer-stack-handle:hover,
body.is-chat-dock-mode .entity-drawer-stack-handle:focus-visible {
    color: #fff;
    background: #416e78;
    border-color: rgba(226, 244, 242, .62);
}

body.is-chat-dock-mode .entity-drawer-stack-handle.is-active {
    color: #274f56;
    background: #f6edda;
    border-color: #ddc795;
    box-shadow: 0 2px 8px rgba(75, 61, 35, .14), 0 0 0 1px rgba(248, 238, 214, .24);
}

.chat-dock-tab-icon {
    display: inline-grid;
    width: 15px;
    height: 15px;
    place-items: center;
    font-size: 13px;
}

.chat-dock-tab-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.is-chat-dock-mode .chat-dock-group-label {
    flex: 0 0 100%;
    padding: 3px 4px 1px;
    color: rgba(244, 250, 249, .9);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
}

.chat-dock-book-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.chat-dock-book-item {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-dock-lazy-load {
    display: block;
    min-width: 130px;
    margin: 24px auto;
    padding: 9px 13px;
    color: var(--accent-dark);
    background: #fff;
    border: 1px solid #bfd7d2;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
}

@media (min-width: 0px) {
    .quick-settings.is-chat-dock-rail,
    .quick-settings.is-chat-dock-rail.is-scroll-hidden {
        position: fixed;
        z-index: 74;
        top: 50%;
        right: 8px;
        bottom: auto;
        left: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        width: 36px;
        max-height: none;
        padding: 0;
        overflow: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(-50%);
    }

    .quick-settings.is-chat-dock-rail > * {
        flex: 0 0 36px;
        width: 36px;
        min-width: 36px;
        min-height: 36px;
        padding: 0;
        justify-content: center;
        overflow: hidden;
        border-radius: 999px;
        opacity: 1;
        transform: none;
    }

    .quick-settings.is-chat-dock-rail .setting-select > span:not(.setting-icon):not(.theme-icon) {
        display: none;
    }

    .quick-settings.is-chat-dock-rail .setting-select select {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    .quick-settings.is-chat-dock-rail .font-size-setting {
        display: grid;
        grid-template: auto minmax(72px, 1fr) auto / 1fr;
        flex-basis: 136px;
        gap: 6px;
        width: 36px;
        height: 136px;
        padding: 9px 0;
        overflow: visible;
        border-radius: 999px;
    }

    .quick-settings.is-chat-dock-rail .font-size-mark {
        display: inline-flex;
        justify-content: center;
        color: #fff;
        font-size: 10px;
    }

    .quick-settings.is-chat-dock-rail .font-size-mark.is-large {
        grid-row: 1;
    }

    .quick-settings.is-chat-dock-rail .font-size-mark:not(.is-large) {
        grid-row: 3;
    }

    .quick-settings.is-chat-dock-rail .font-size-setting input[type="range"] {
        grid-row: 2;
        justify-self: center;
        position: static;
        width: 18px;
        height: 100%;
        margin: 0;
        padding: 0;
        opacity: 1;
        pointer-events: auto;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        transform: none;
        writing-mode: vertical-lr;
        direction: rtl;
    }

    .quick-settings.is-chat-dock-rail .font-size-setting input[type="range"]::-webkit-slider-runnable-track {
        width: 4px;
        border-radius: 999px;
    }

    .quick-settings.is-chat-dock-rail .font-size-setting input[type="range"]::-webkit-slider-thumb {
        margin-top: 0;
        transform: translateX(-7px);
    }

    .quick-settings.is-chat-dock-rail .font-size-setting input[type="range"]:active::-webkit-slider-thumb {
        transform: translateX(-7px) scale(1.08);
    }

    .quick-settings.is-chat-dock-rail .font-size-setting input[type="range"]::-moz-range-track {
        width: 4px;
        border-radius: 999px;
    }

    .quick-settings.is-chat-dock-rail.is-scroll-hidden {
        opacity: 0;
        pointer-events: none;
        transform: translate(48px, -50%) scale(.92);
    }
}

body.is-dark-mode.is-chat-dock-mode .entity-drawer-stack-handles {
    background: rgba(3, 15, 17, .408);
    border-color: rgba(112, 169, 174, .22);
}

body.is-dark-mode.is-chat-dock-mode .entity-drawer-stack-handle {
    background: rgba(36, 71, 77, .94);
    border-color: rgba(112, 169, 174, .34);
}

body.is-dark-mode.is-chat-dock-mode .entity-drawer-stack-handle.is-active {
    color: #dff4f1;
    background: #31545b;
    border-color: #5f8a91;
}

body.is-tavern-mode.is-chat-dock-mode .entity-drawer-stack-handles {
    background: rgba(49, 28, 18, .374);
    border-color: rgba(229, 195, 134, .22);
}

body.is-tavern-mode.is-chat-dock-mode .entity-drawer-stack-handle {
    background: #76513a;
    border-color: #9b7652;
}

body.is-tavern-mode.is-chat-dock-mode .entity-drawer-stack-handle.is-active {
    color: #57351f;
    background: #f1ddae;
    border-color: #c9a96a;
}

body.is-evening-mode.is-chat-dock-mode .entity-drawer-stack-handles {
    background: rgba(64, 36, 57, .357);
    border-color: rgba(235, 202, 177, .2);
}

body.is-evening-mode.is-chat-dock-mode .entity-drawer-stack-handle {
    color: #fff1f3;
    background: rgba(82, 43, 66, .97);
    border-color: rgba(226, 158, 179, .34);
    box-shadow: 0 2px 8px rgba(54, 24, 42, .2);
}

body.is-evening-mode.is-chat-dock-mode .entity-drawer-stack-handle:is(:hover, :focus-visible) {
    color: #fff8f6;
    background: #69364f;
    border-color: #d99aae;
}

body.is-evening-mode.is-chat-dock-mode .entity-drawer-stack-handle.is-active {
    color: #fff8f6;
    background: #75405b;
    border-color: #e5a8b9;
    box-shadow: 0 2px 9px rgba(54, 24, 42, .24), 0 0 0 1px rgba(245, 190, 205, .18);
}

body.is-evening-mode.is-chat-dock-mode .chat-dock-group-label {
    color: #f8dce4;
}

body.is-dark-mode .chat-layout-toggle {
    color: #dff4f1;
    background: rgba(49, 84, 91, .92);
    border-color: #5f8a91;
}

body.is-dark-mode .chat-cloud-toggle {
    color: #dff4f1;
    background: rgba(49, 84, 91, .92);
    border-color: #5f8a91;
}

body.is-dark-mode .chat-cloud-toggle:is(:hover, :focus-visible, [aria-pressed="true"]) {
    color: #17302d;
    background: #9bc0b8;
    border-color: #c0d8d2;
}

body.is-dark-mode .chat-layout-toggle:is(:hover, :focus-visible, [aria-pressed="true"]) {
    color: #17302d;
    background: #9bc0b8;
    border-color: #c0d8d2;
}

body.is-evening-mode .chat-layout-toggle {
    color: #fff3df;
    background: rgba(112, 64, 95, .94);
    border-color: #92536f;
}

body.is-evening-mode .chat-cloud-toggle {
    color: #fff3df;
    background: rgba(112, 64, 95, .94);
    border-color: #92536f;
}

body.is-evening-mode .chat-cloud-toggle:is(:hover, :focus-visible, [aria-pressed="true"]) {
    color: #513047;
    background: #e3b9a9;
    border-color: #f1d1bc;
}

body.is-evening-mode .chat-layout-toggle:is(:hover, :focus-visible, [aria-pressed="true"]) {
    color: #513047;
    background: #e3b9a9;
    border-color: #f1d1bc;
}

body.is-tavern-mode .chat-layout-toggle {
    color: #f7e6bd;
    background: rgba(112, 67, 46, .95);
    border-color: #9b7652;
}

body.is-tavern-mode .chat-cloud-toggle {
    color: #f7e6bd;
    background: rgba(112, 67, 46, .95);
    border-color: #9b7652;
}

body.is-tavern-mode .chat-cloud-toggle:is(:hover, :focus-visible, [aria-pressed="true"]) {
    color: #57351f;
    background: #e3c98f;
    border-color: #f1ddae;
}

body.is-tavern-mode .chat-layout-toggle:is(:hover, :focus-visible, [aria-pressed="true"]) {
    color: #57351f;
    background: #e3c98f;
    border-color: #f1ddae;
}

@media (max-width: 720px) {
    /* A transformed fixed drawer can leave its former resize strip behind as
       a dark compositor tile in Mobile Safari. translateX(0) is visually the
       same as no transform, so dissolve that layer only for the live drag. */
    body.is-resizing-entity-drawer .entity-drawer:not(.is-collapsed) {
        transform: none;
        transition: none;
        will-change: auto;
    }

    body.is-chat-dock-mode .messages {
        padding-bottom: calc(236px + var(--prompt-suggestions-space, 0px));
    }

    .mod_companion_chat.is-chat-dock-mode .prompt-suggestions {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 72px);
    }

    .mod_companion_chat.is-chat-dock-mode.has-chat-dock-tabs .prompt-suggestions {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 80px + var(--chat-dock-tab-height, 112px));
    }

    body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 80px + var(--chat-dock-tab-height, 0px));
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
        height: var(--chat-dock-sheet-height, min(58dvh, calc(100dvh - 205px)));
        max-height: calc(100dvh - 64px - max(10px, env(safe-area-inset-bottom)) - 80px - var(--chat-dock-tab-height, 0px));
    }

    body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout :is(.entity-drawer-header, .entity-drawer-stack-header) {
        position: sticky;
        padding-top: 11px;
        touch-action: none;
        overscroll-behavior: none;
    }

    body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout .entity-drawer-actions button {
        touch-action: manipulation;
    }

    body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout .entity-drawer-resize-grab {
        --chat-dock-grabber-color: var(--drawer-grabber-color);
        position: absolute;
        z-index: 4;
        top: 0;
        left: 50%;
        display: block;
        width: 96px;
        height: 24px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 999px;
        cursor: ns-resize;
        touch-action: none;
        transform: translateX(-50%);
    }

    body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout .entity-drawer-resize-grab::before,
    body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout .entity-drawer-resize-grab::after {
        display: block;
        height: 2px;
        content: "";
        background: var(--chat-dock-grabber-color);
        border-radius: 999px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .18);
    }

    body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout .entity-drawer-resize-grab::before {
        width: 28px;
        margin: 3px auto 0;
    }

    body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout .entity-drawer-resize-grab::after {
        width: 18px;
        margin: 2px auto 0;
        opacity: .76;
    }

    body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout .entity-drawer-resize-grab:is(:hover, :focus-visible) {
        background: color-mix(in srgb, var(--chat-dock-grabber-color) 14%, transparent);
    }

    body.is-resizing-chat-dock-sheet {
        cursor: ns-resize;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Mobile Safari can keep the previous compositor tile of a sticky header
       visible while its fixed parent changes height. During the gesture the
       header moves with the sheet as a normal child; sticky positioning is
       restored immediately when pointer capture ends. */
    body.is-resizing-chat-dock-sheet .entity-drawer.is-chat-dock-layout :is(
        .entity-drawer-header,
        .entity-drawer-stack-header
    ) {
        position: relative;
    }

    body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout .entity-drawer-panel,
    body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout.is-stack-mode .entity-drawer-panel,
    body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout .entity-drawer-body,
    body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout.is-stack-mode .entity-drawer-body {
        height: 100%;
        min-height: 0;
    }

    body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout .entity-drawer-stack-item {
        height: 100%;
        min-height: 0;
        max-height: none;
        border-right: 1px solid var(--drawer-frame-border);
        border-radius: 12px;
    }

    body.is-chat-dock-mode .entity-drawer-stack-handles {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 72px);
        width: min(var(--chat-dock-stage-width, calc(100% - 20px)), calc(100% - 20px));
        max-width: calc(100% - 20px);
        /* Roughly three compact chip rows; further rows scroll inside the
           stage instead of moving the prompt or growing across the screen. */
        max-height: min(var(--chat-dock-stage-max-height, 124px), calc(100dvh - 164px));
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        scrollbar-width: thin;
    }

    body.is-chat-dock-mode.is-chat-dock-scroll-compact .entity-drawer-stack-handles {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 56px);
        width: min(var(--chat-dock-stage-width, calc(100% - 20px)), calc(100% - 74px));
        max-height: min(var(--chat-dock-stage-max-height, 124px), 66px);
        padding-top: 5px;
    }

    body.is-chat-dock-mode.is-chat-dock-scroll-compact .entity-drawer.is-chat-dock-layout {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 64px + var(--chat-dock-tab-height, 0px));
        max-height: calc(100dvh - 64px - max(10px, env(safe-area-inset-bottom)) - 64px - var(--chat-dock-tab-height, 0px));
    }

    body.is-chat-dock-mode.is-chat-dock-scroll-compact .mod_companion_chat.has-chat-dock-tabs .prompt-suggestions {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 64px + var(--chat-dock-tab-height, 66px));
    }

    .chat-dock-stage-resize-grab {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 72px + var(--chat-dock-tab-height, 0px) - 24px);
    }

    .chat-dock-clear {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 72px + var(--chat-dock-tab-height, 0px) - 23px);
        left: min(calc(50% + var(--chat-dock-stage-half-width, 0px) + 4px), calc(100% - 28px));
        width: 23px;
        height: 23px;
        padding: 0;
        transform: none;
    }

    .quick-settings.is-chat-dock-rail,
    .quick-settings.is-chat-dock-rail.is-scroll-hidden {
        position: fixed !important;
        z-index: 74 !important;
        top: 50% !important;
        right: 4px;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        flex-direction: column !important;
        width: 32px;
        max-height: none !important;
        padding: 0 !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(-50%) !important;
    }

    .quick-settings.is-chat-dock-rail > * {
        flex-basis: 32px;
        width: 32px;
        min-width: 32px;
        min-height: 32px;
    }

    .quick-settings.is-chat-dock-rail .font-size-setting {
        grid-template-rows: auto minmax(64px, 1fr) auto;
        flex-basis: 116px;
        width: 32px;
        height: 116px;
        padding: 8px 0;
    }

    .quick-settings.is-chat-dock-rail .font-size-setting input[type="range"]::-webkit-slider-thumb {
        width: 22px;
        height: 22px;
        margin-top: 0;
        transform: translateX(-9px);
    }

    .quick-settings.is-chat-dock-rail .font-size-setting input[type="range"]:active::-webkit-slider-thumb {
        transform: translateX(-9px) scale(1.08);
    }

    .quick-settings.is-chat-dock-rail .font-size-setting input[type="range"]::-moz-range-thumb {
        width: 22px;
        height: 22px;
    }

    .quick-settings.is-chat-dock-rail.is-scroll-hidden {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translate(48px, -50%) scale(.92) !important;
    }

    body.is-chat-dock-mode .entity-drawer-stack-handle {
        min-width: 76px;
        max-width: calc(50% - 4px);
        min-height: 30px;
        padding: 4px 8px;
        font-size: 10px;
    }

    .chat-dock-book-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chat-layout-toggle,
    .chat-cloud-toggle,
    .chat-dock-group-toggle {
        width: 29px;
        height: 29px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.is-chat-dock-mode #chat-form,
    body.is-chat-dock-mode .entity-drawer.is-chat-dock-layout,
    body.is-chat-dock-mode .entity-drawer-stack-handles,
    body.is-chat-dock-mode .entity-drawer-stack-handle,
    .chat-dock-clear,
    .chat-layout-toggle,
    .chat-cloud-toggle,
    .chat-dock-group-toggle,
    .chat-dock-stage-resize-grab,
    .quick-options-drawer-toggle,
    .quick-settings.is-chat-cloud-drawer {
        transition: none;
    }
}

/* Layout-C precedence guard: the legacy Layout-B block above intentionally
   remains untouched. These strictly scoped values win only while C is active. */
body.is-chat-dock-mode.is-chat-cloud-mode .messages {
    padding-bottom: calc(126px + var(--chat-dock-tab-height, 21px) + var(--prompt-suggestions-space, 0px));
}

body.is-chat-dock-mode.is-chat-cloud-mode .entity-drawer-stack-handles,
body.is-chat-dock-mode.is-chat-cloud-mode.is-chat-dock-scroll-compact .entity-drawer-stack-handles {
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 70px);
    gap: 2px;
    width: min(var(--chat-dock-stage-width, 560px), calc(100% - 24px));
    max-width: calc(100% - 24px);
    max-height: none;
    padding: 0 2px;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
    transition: bottom .4s cubic-bezier(.16, 1, .3, 1), opacity .24s ease, transform .42s cubic-bezier(.16, 1, .3, 1), width .4s cubic-bezier(.16, 1, .3, 1);
}

body.is-chat-dock-mode.is-chat-cloud-mode .entity-drawer-stack-handle,
body.is-chat-dock-mode.is-chat-cloud-mode.is-chat-dock-scroll-compact .entity-drawer-stack-handle {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 5px;
    min-width: 88px;
    max-width: 158px;
    min-height: 31px;
    height: 31px;
    padding: 4px 9px;
    font-size: 12px;
    line-height: 1;
}

body.is-chat-dock-mode.is-chat-cloud-mode .chat-dock-tab-icon {
    position: relative;
    width: 16px;
    height: 16px;
    overflow: visible;
    font-size: 15px;
}

body.is-chat-dock-mode.is-chat-cloud-mode .chat-dock-tab-label {
    display: block;
    min-width: 0;
}

body.is-chat-dock-mode.is-chat-cloud-mode .entity-drawer-stack-handles.is-cloud-density-compact .entity-drawer-stack-handle {
    min-width: 70px;
    max-width: 126px;
    min-height: 25px;
    height: 25px;
    padding: 3px 7px;
    font-size: 9.5px;
}

body.is-chat-dock-mode.is-chat-cloud-mode .entity-drawer-stack-handles.is-cloud-density-dense .entity-drawer-stack-handle {
    gap: 3px;
    min-width: 54px;
    max-width: 102px;
    min-height: 19px;
    height: 19px;
    padding: 2px 5px;
    font-size: 7.5px;
}

body.is-chat-dock-mode.is-chat-cloud-mode .entity-drawer-stack-handles.is-cloud-density-ultra .entity-drawer-stack-handle {
    gap: 2px;
    min-width: 38px;
    max-width: 74px;
    min-height: 14px;
    height: 14px;
    padding: 1px 3px;
    font-size: 6px;
}

body.is-chat-dock-mode.is-chat-cloud-mode .entity-drawer-stack-handles.is-cloud-density-ultra .chat-dock-tab-icon {
    width: 9px;
    height: 9px;
    font-size: 8px;
}

body.is-chat-dock-mode.is-chat-cloud-mode .entity-drawer-stack-handles.is-cloud-density-ultra .chat-dock-tab-icon[data-spell-level]::after {
    right: -3px;
    bottom: -3px;
    width: 7px;
    height: 7px;
    font-size: 5px;
}

body.is-chat-dock-mode.is-chat-cloud-mode .entity-drawer-stack-body {
    padding-bottom: 26px;
    scroll-padding-bottom: 26px;
}

body.is-chat-dock-mode.is-chat-cloud-mode .chat-dock-group-label,
body.is-chat-dock-mode.is-chat-cloud-mode .chat-dock-stage-resize-grab,
body.is-chat-dock-mode.is-chat-cloud-mode .chat-dock-clear {
    display: none !important;
}

body.is-chat-dock-mode.is-chat-cloud-mode.is-chat-dock-scroll-compact .entity-drawer-stack-handles {
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 54px);
    gap: 1px;
    opacity: .82;
    transform: translateX(-50%) translateY(5px) scale(.72);
    transform-origin: bottom center;
}

body.is-chat-dock-mode.is-chat-cloud-mode .entity-drawer.is-chat-dock-layout,
body.is-chat-dock-mode.is-chat-cloud-mode.is-chat-dock-scroll-compact .entity-drawer.is-chat-dock-layout {
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 70px + var(--chat-dock-tab-height, 21px) + 10px);
    width: min(calc(100% - 24px), var(--chat-content-width));
    max-width: min(calc(100% - 24px), var(--chat-content-width));
    max-height: min(58dvh, calc(100dvh - 170px));
}

.mod_companion_chat.is-chat-dock-mode.is-chat-cloud-mode.has-chat-dock-tabs .prompt-suggestions,
.mod_companion_chat.is-chat-dock-mode.is-chat-cloud-mode.is-chat-dock-scroll-compact.has-chat-dock-tabs .prompt-suggestions {
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 78px + var(--chat-dock-tab-height, 64px));
}

body.is-dark-mode.is-chat-dock-mode.is-chat-cloud-mode .entity-drawer-stack-handle {
    background: rgba(31, 66, 71, .94);
}

body.is-evening-mode.is-chat-dock-mode.is-chat-cloud-mode .entity-drawer-stack-handle {
    color: #fff4f4;
    background: rgba(91, 46, 72, .94);
    border-color: rgba(229, 167, 184, .34);
}

body.is-tavern-mode.is-chat-dock-mode.is-chat-cloud-mode .entity-drawer-stack-handle {
    color: #f9ebc8;
    background: rgba(101, 66, 45, .94);
    border-color: rgba(217, 187, 126, .34);
}

@media (max-width: 720px) {
    body.is-chat-dock-mode.is-chat-cloud-mode .entity-drawer-stack-handles,
    body.is-chat-dock-mode.is-chat-cloud-mode.is-chat-dock-scroll-compact .entity-drawer-stack-handles {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 61px);
        width: min(var(--chat-dock-stage-width, calc(100% - 16px)), calc(100% - 16px));
        max-width: calc(100% - 16px);
        max-height: none;
    }

    body.is-chat-dock-mode.is-chat-cloud-mode .entity-drawer.is-chat-dock-layout,
    body.is-chat-dock-mode.is-chat-cloud-mode.is-chat-dock-scroll-compact .entity-drawer.is-chat-dock-layout {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 61px + var(--chat-dock-tab-height, 20px) + 9px);
        width: calc(100% - 16px);
        max-width: calc(100% - 16px);
        height: var(--chat-dock-sheet-height, min(62dvh, calc(100dvh - 132px)));
        max-height: calc(100dvh - 76px);
    }

    body.is-chat-dock-mode.is-chat-cloud-mode .entity-drawer-stack-handle {
        min-width: 78px;
        max-width: 142px;
        min-height: 29px;
        height: 29px;
        padding: 4px 8px;
        font-size: 11px;
    }

    body.is-chat-dock-mode.is-chat-cloud-mode .entity-drawer-stack-handles.is-cloud-density-compact .entity-drawer-stack-handle {
        min-width: 64px;
        max-width: 116px;
        min-height: 23px;
        height: 23px;
        padding: 2px 6px;
        font-size: 9px;
    }

    body.is-chat-dock-mode.is-chat-cloud-mode .entity-drawer-stack-handles.is-cloud-density-dense .entity-drawer-stack-handle {
        min-width: 48px;
        max-width: 92px;
        min-height: 18px;
        height: 18px;
        padding: 1px 4px;
        font-size: 7px;
    }

    body.is-chat-dock-mode.is-chat-cloud-mode .entity-drawer-stack-handles.is-cloud-density-ultra .entity-drawer-stack-handle {
        min-width: 36px;
        max-width: 68px;
        min-height: 13px;
        height: 13px;
        padding: 1px 3px;
        font-size: 5.75px;
    }

    body.is-chat-dock-mode.is-chat-cloud-mode.is-chat-dock-scroll-compact .entity-drawer-stack-handles {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 48px);
    }
}

/* Classic layout A: the resize strip carries the primary colour, while the
   header itself remains a calm continuation of the reading surface. */
body:not(.is-chat-dock-mode) :is(.entity-drawer-header, .entity-drawer-stack-header) {
    color: var(--ink) !important;
    background: var(--drawer-surface) !important;
    border-bottom-color: var(--drawer-border) !important;
}

body:not(.is-chat-dock-mode) :is(.entity-drawer-title, .entity-drawer-stack-title) {
    color: var(--entity-title-ink, var(--accent-dark)) !important;
}

body:not(.is-chat-dock-mode) .entity-drawer-resize-grab {
    display: block;
    background: var(--drawer-header-surface) !important;
    border-radius: 17px 0 0 0 !important;
}

/* Pinned tooltip ears receive a quiet, theme-adaptive hatch. The pattern is
   intentionally an overlay so every existing day/evening/night/tavern handle
   colour remains authoritative. */
body:not(.is-chat-dock-mode) .entity-drawer-stack-handle.is-pinned::after {
    position: absolute;
    display: block;
    inset: 0;
    content: '';
    pointer-events: none;
    background: repeating-linear-gradient(
        135deg,
        color-mix(in srgb, currentColor 16%, transparent) 0 1px,
        transparent 1px 6px
    );
    border-radius: inherit;
    opacity: .62;
}

.collection-panel button.collection-panel-side-grabber {
    border-radius: 0 999px 999px 0 !important;
}

@media (max-width: 720px) {
    body:not(.is-chat-dock-mode) .entity-drawer.has-custom-height {
        bottom: var(--entity-drawer-bottom, 112px);
    }
}

/* Collection creation stays visually constant across all themes: a paper-
   white entry surface with dark copy. Rename fields retain their existing
   contextual theme styling. */
.collection-panel :is(.collection-create-form input, .collection-child-form input) {
    color: #282f2c !important;
    background: #fff !important;
    border-color: #b9b7ae !important;
    caret-color: #282f2c !important;
}

.collection-panel :is(.collection-create-form input, .collection-child-form input)::placeholder {
    color: #6c706d !important;
    opacity: 1;
}

.collection-panel :is(.collection-create-form input, .collection-child-form input):focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent) !important;
    outline: 0;
}

/* The ordinary quick-options row is centred above the prompt. Dock rails and
   the optional cloud drawer keep their independent placement contracts. */
.quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) {
    justify-content: center;
    padding-left: 0;
}

.quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting {
    flex: 0 0 48px;
    justify-content: center;
    gap: 0;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    padding-right: 4px;
    padding-left: 4px;
    overflow: hidden;
    border-radius: 999px;
    background-clip: padding-box;
    isolation: isolate;
    transform-origin: center;
    transition:
        flex-basis .22s cubic-bezier(.2, .78, .2, 1),
        width .22s cubic-bezier(.2, .78, .2, 1),
        max-width .22s cubic-bezier(.2, .78, .2, 1),
        gap .18s ease,
        padding .22s cubic-bezier(.2, .78, .2, 1),
        transform .2s cubic-bezier(.2, .78, .2, 1),
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .2s ease;
}

.quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting .font-size-mark {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transform: scale(.72);
    transition: max-width .18s ease, opacity .14s ease, transform .2s ease;
}

.quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting input[type="range"] {
    width: 36px;
    height: 18px;
    margin: 0;
    transition: width .2s cubic-bezier(.2, .78, .2, 1), height .2s cubic-bezier(.2, .78, .2, 1);
}

.quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting input[type="range"]::-webkit-slider-runnable-track {
    height: 5px;
    background: color-mix(in srgb, var(--accent) 72%, var(--surface-strong));
    border-color: color-mix(in srgb, var(--accent-dark) 45%, transparent);
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--accent-dark) 24%, transparent);
}

.quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting input[type="range"]::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -4px;
    background: color-mix(in srgb, var(--surface-strong) 72%, #fff);
    border-color: color-mix(in srgb, var(--accent-dark) 52%, #fff);
}

.quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting input[type="range"]::-moz-range-track {
    height: 5px;
    background: color-mix(in srgb, var(--accent) 72%, var(--surface-strong));
    border-color: color-mix(in srgb, var(--accent-dark) 45%, transparent);
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--accent-dark) 24%, transparent);
}

.quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: color-mix(in srgb, var(--surface-strong) 72%, #fff);
    border-color: color-mix(in srgb, var(--accent-dark) 52%, #fff);
}

.quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting.is-adjusting {
    z-index: 2;
    flex-basis: 118px;
    gap: 5px;
    width: 118px;
    max-width: 118px;
    padding-right: 8px;
    padding-left: 8px;
    overflow: hidden;
    background: color-mix(in srgb, var(--accent) 76%, var(--bg));
    border-color: color-mix(in srgb, var(--accent-dark) 72%, var(--line));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 5px 14px color-mix(in srgb, var(--accent-dark) 25%, transparent);
    transform: none;
}

.quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting.is-adjusting .font-size-mark {
    max-width: 18px;
    opacity: 1;
    transform: scale(1);
}

.quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting.is-adjusting input[type="range"] {
    width: 72px;
    height: 24px;
}

.quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting.is-adjusting input[type="range"]::-webkit-slider-thumb {
    transform: scale(1.12);
}

.quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting.is-adjusting input[type="range"]::-moz-range-thumb {
    transform: scale(1.12);
}

@media (max-width: 720px) and (pointer: coarse) {
    /* Keep the collapsed control visually identical to the other quick
       buttons. The larger finger target lives in the invisible pseudo-element
       and therefore does not change the row height before interaction. */
    .quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting.has-expanded-touch-area {
        flex-basis: 48px;
        width: 48px;
        min-width: 48px;
        max-width: 48px;
        min-height: 26px;
        padding-right: 4px;
        padding-left: 4px;
        overflow: visible;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
    }

    .quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer):has(.font-size-setting.has-expanded-touch-area) {
        overflow: visible;
    }

    .quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting.has-expanded-touch-area::before {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        width: 48px;
        height: 44px;
        content: "";
        transform: translate(-50%, -50%);
    }

    .quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting.has-expanded-touch-area > * {
        position: relative;
        z-index: 2;
    }

    .quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting.has-expanded-touch-area input[type="range"] {
        width: 36px;
        height: 18px;
        touch-action: none;
    }

    .quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting.has-expanded-touch-area input[type="range"]::-webkit-slider-thumb {
        width: 12px;
        height: 12px;
        margin-top: -4px;
    }

    .quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting.has-expanded-touch-area input[type="range"]::-moz-range-thumb {
        width: 12px;
        height: 12px;
    }

    .quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer):has(.font-size-setting.has-expanded-touch-area.is-adjusting) {
        overflow: visible;
    }

    .quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting.has-expanded-touch-area.is-adjusting {
        flex-basis: 116px;
        width: 116px;
        max-width: 116px;
        min-height: 34px;
        gap: 3px;
        padding-right: 5px;
        padding-left: 5px;
        overflow: visible;
        touch-action: none;
    }

    .quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting.has-expanded-touch-area.is-adjusting input[type="range"] {
        width: 68px;
        height: 34px;
    }

    .quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting.has-expanded-touch-area.is-adjusting input[type="range"]::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
        margin-top: -8px;
    }

    .quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting.has-expanded-touch-area.is-adjusting input[type="range"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
    }

    .quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting.has-expanded-touch-area.is-adjusting::before {
        width: 64px;
        height: 56px;
    }

    .quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) .font-size-setting.has-expanded-touch-area.is-adjusting > * {
        position: relative;
        z-index: 2;
    }
}

/* The night surface is deliberately dark, so the draggable control must stay
   immediately visible in every quick-settings layout and interaction state. */
body.is-dark-mode .font-size-setting input[type="range"]::-webkit-slider-thumb {
    background: #f8fffc !important;
    border-color: #fff !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .42), 0 0 0 1px rgba(216, 239, 232, .38) !important;
}

body.is-dark-mode .font-size-setting input[type="range"]::-moz-range-thumb {
    background: #f8fffc !important;
    border-color: #fff !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .42), 0 0 0 1px rgba(216, 239, 232, .38) !important;
}

/* Category icons are useful in dock chips, but visually overload the narrow
   portrait ears of the classic right-side tooltip stack. */
body:not(.is-chat-dock-mode) .entity-drawer-stack-handle .chat-dock-tab-icon {
    display: none;
}

/* Classic vertical tooltip ears only: 31px is roughly ten percent slimmer
   than the previous 34px, while the touch height and label typography stay
   unchanged. Dock chips and every resize/collection grabber are excluded. */
body:not(.is-chat-dock-mode) .entity-drawer-stack-handles .entity-drawer-stack-handle {
    width: 31px;
    padding-right: 5px;
    padding-left: 5px;
}

/* Tooltip header actions use a compact colour pairing native to each theme.
   The selectors intentionally come after the shared white-control fallback. */
body:not(.is-dark-mode):not(.is-evening-mode):not(.is-tavern-mode) :is(
    .entity-drawer-header .entity-drawer-action,
    .entity-drawer-stack-header .entity-drawer-stack-pin,
    .entity-drawer-stack-header .entity-drawer-stack-collapse,
    .entity-drawer-stack-header .entity-drawer-stack-close
) {
    color: #315d68 !important;
    background: #dcebed !important;
    border-color: #a7c7cb !important;
}

body.is-dark-mode :is(
    .entity-drawer-header .entity-drawer-action,
    .entity-drawer-stack-header .entity-drawer-stack-pin,
    .entity-drawer-stack-header .entity-drawer-stack-collapse,
    .entity-drawer-stack-header .entity-drawer-stack-close
) {
    color: #183633 !important;
    background: #d5e6df !important;
    border-color: #92b6ac !important;
}

body.is-evening-mode :is(
    .entity-drawer-header .entity-drawer-action,
    .entity-drawer-stack-header .entity-drawer-stack-pin,
    .entity-drawer-stack-header .entity-drawer-stack-collapse,
    .entity-drawer-stack-header .entity-drawer-stack-close
) {
    color: #65354f !important;
    background: #f2cbd0 !important;
    border-color: #ce8da0 !important;
}

body.is-tavern-mode :is(
    .entity-drawer-header .entity-drawer-action,
    .entity-drawer-stack-header .entity-drawer-stack-pin,
    .entity-drawer-stack-header .entity-drawer-stack-collapse,
    .entity-drawer-stack-header .entity-drawer-stack-close
) {
    color: #52301e !important;
    background: #e7bd78 !important;
    border-color: #bd8150 !important;
}

body:not(.is-dark-mode):not(.is-evening-mode):not(.is-tavern-mode) :is(
    .entity-drawer-header .entity-drawer-action,
    .entity-drawer-stack-header .entity-drawer-stack-pin,
    .entity-drawer-stack-header .entity-drawer-stack-collapse,
    .entity-drawer-stack-header .entity-drawer-stack-close
):is(:hover, :focus-visible) {
    background: #eef7f5 !important;
    border-color: #7faab0 !important;
}

body.is-dark-mode :is(
    .entity-drawer-header .entity-drawer-action,
    .entity-drawer-stack-header .entity-drawer-stack-pin,
    .entity-drawer-stack-header .entity-drawer-stack-collapse,
    .entity-drawer-stack-header .entity-drawer-stack-close
):is(:hover, :focus-visible) {
    background: #f0f7f3 !important;
    border-color: #b7d4cc !important;
}

body.is-evening-mode :is(
    .entity-drawer-header .entity-drawer-action,
    .entity-drawer-stack-header .entity-drawer-stack-pin,
    .entity-drawer-stack-header .entity-drawer-stack-collapse,
    .entity-drawer-stack-header .entity-drawer-stack-close
):is(:hover, :focus-visible) {
    background: #ffe8e2 !important;
    border-color: #e0a4aa !important;
}

body.is-tavern-mode :is(
    .entity-drawer-header .entity-drawer-action,
    .entity-drawer-stack-header .entity-drawer-stack-pin,
    .entity-drawer-stack-header .entity-drawer-stack-collapse,
    .entity-drawer-stack-header .entity-drawer-stack-close
):is(:hover, :focus-visible) {
    background: #f7d99b !important;
    border-color: #d8a365 !important;
}

body:not(.is-dark-mode):not(.is-evening-mode):not(.is-tavern-mode) .entity-drawer-stack-header .entity-drawer-stack-pin.is-pinned {
    color: #fff !important;
    background: #4f7f89 !important;
    border-color: #3e6c75 !important;
}

body.is-dark-mode .entity-drawer-stack-header .entity-drawer-stack-pin.is-pinned {
    color: #f4fbf8 !important;
    background: #456f6c !important;
    border-color: #294d4b !important;
}

body.is-evening-mode .entity-drawer-stack-header .entity-drawer-stack-pin.is-pinned {
    color: #fff7f5 !important;
    background: #8f4665 !important;
    border-color: #6c334d !important;
}

body.is-tavern-mode .entity-drawer-stack-header .entity-drawer-stack-pin.is-pinned {
    color: #fff4d5 !important;
    background: #8b5232 !important;
    border-color: #62371f !important;
}

body:not(.is-dark-mode):not(.is-evening-mode):not(.is-tavern-mode) .entity-drawer button.entity-drawer-stack-back {
    color: #fff;
    background: #3f6872;
    border-color: #315d68;
}

body.is-dark-mode .entity-drawer button.entity-drawer-stack-back {
    color: #eef6f2;
    background: #294a4b;
    border-color: #5e817a;
}

body.is-evening-mode .entity-drawer button.entity-drawer-stack-back {
    color: #fff8e9;
    background: #70405f;
    border-color: #9c6680;
}

body.is-tavern-mode .entity-drawer button.entity-drawer-stack-back {
    color: #fff0cf;
    background: #70432e;
    border-color: #9f7045;
}

body:not(.is-dark-mode):not(.is-evening-mode):not(.is-tavern-mode) .entity-drawer button.entity-drawer-stack-back:is(:hover, :focus-visible) {
    background: #557f88;
    border-color: #3f6872;
}

body.is-dark-mode .entity-drawer button.entity-drawer-stack-back:is(:hover, :focus-visible) {
    background: #3c625f;
    border-color: #7b9d94;
}

body.is-evening-mode .entity-drawer button.entity-drawer-stack-back:is(:hover, :focus-visible) {
    background: #8a526f;
    border-color: #bb7896;
}

body.is-tavern-mode .entity-drawer button.entity-drawer-stack-back:is(:hover, :focus-visible) {
    background: #8a573b;
    border-color: #bd8150;
}

/* Entity cards share one quiet title/content boundary. Spells keep their
   separator below the identity subline so the heading is never split twice. */
.message.assistant .bubble:has(> .entity-rule-card):not(:has(> .entity-rule-card.entity-type-spell)) > .answer-header {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(130, 120, 105, .22);
}

/* A bordered table that opens an entity already supplies the visual title
   boundary. Do not draw a second line immediately above that table card. */
.message.assistant .bubble:has(> .entity-rule-card .entity-tooltip-description > .entity-table-block:first-child) > .answer-header {
    padding-bottom: 0;
    border-bottom: 0;
}

/* If an entity starts directly with prose, the headline separator already
   provides the boundary. Keep the description's own separator only when
   structured stats or a detail list precede it. */
.message.assistant .bubble > .answer-header + .entity-rule-card:not(:has(> .entity-stat-layout)):not(:has(> .entity-tooltip-list)) > .entity-main-column > .entity-description-block:first-child {
    padding-top: 0;
    border-top: 0;
}

/* The first prose subsection follows the entity's headline separator. Later
   h4 sections retain their rules so longer talents and rules stay scannable. */
.message.assistant .bubble > .entity-rule-card .entity-tooltip-description > h4:first-of-type {
    padding-top: 0;
    border-top: 0;
}

/* Spell identity belongs directly beneath the title. It is source text, not a
   table value, and therefore remains quiet, regular-weight and italic. */
.entity-rule-card.entity-type-spell > .entity-spell-subline {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 10px;
    color: var(--muted);
    border-bottom: 1px solid rgba(130, 120, 105, .22);
    font-size: .94em;
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
}

/* The class group is an atomic inline box. If the complete subline no longer
   fits, the browser therefore prefers the source-book boundary between spell
   grade and the parenthesised classes before wrapping individual class names. */
.entity-rule-card.entity-type-spell > .entity-spell-subline .entity-spell-classes {
    display: inline-block;
    max-width: 100%;
    vertical-align: baseline;
}

.message.assistant .bubble:has(> .entity-rule-card.entity-type-spell) > .answer-header {
    margin-bottom: 3px;
}

.message.assistant .bubble > .entity-rule-card.entity-type-spell {
    margin-top: 0;
}

.entity-rule-card.entity-type-spell > .entity-spell-subline + .entity-stat-layout {
    margin-top: 0;
}

/* Day mirrors the regular pages with berry status details and warm-brown
   metadata lines, without recolouring bubbles, entity surfaces or titles. */
body:not(.is-dark-mode):not(.is-evening-mode):not(.is-tavern-mode) {
    --rg-chat-day-berry: #75515e;
    --rg-chat-day-warm: #80583f;
    --rg-chat-day-warm-line: color-mix(in srgb, var(--rg-chat-day-warm) 42%, rgba(130, 120, 105, .22));
}

body:not(.is-dark-mode):not(.is-evening-mode):not(.is-tavern-mode)
    :is(.answer-category-chip, .answer-header > .meta span:not(.confidence)) {
    color: var(--rg-chat-day-warm);
    background: color-mix(in srgb, var(--rg-chat-day-warm) 6%, rgba(255, 255, 255, .72));
    border-color: color-mix(in srgb, var(--rg-chat-day-warm) 34%, transparent);
}

body:not(.is-dark-mode):not(.is-evening-mode):not(.is-tavern-mode)
    :is(.entity-table-meta, .entity-dice-credit, .entity-spell-subline, .source-list) {
    color: var(--rg-chat-day-warm);
}

body:not(.is-dark-mode):not(.is-evening-mode):not(.is-tavern-mode)
    .source-list
    a {
    color: var(--rg-chat-day-berry);
}

body:not(.is-dark-mode):not(.is-evening-mode):not(.is-tavern-mode)
    :is(
        .message.assistant .bubble:has(> .entity-rule-card):not(:has(> .entity-rule-card.entity-type-spell)) > .answer-header,
        .entity-description-block,
        .entity-tooltip-description h4,
        .entity-rule-card.entity-type-spell > .entity-spell-subline,
        .source-list
    ) {
    border-color: var(--rg-chat-day-warm-line);
}
/* Phase 2 account links keep the established chat popover compact. */
.auth-page-links{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:10px}.auth-page-links a{color:inherit;font-weight:700;text-underline-offset:3px}

/* Keep the quick prompt controls visually attached to the composer. */
.quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer) {
    position: relative;
    z-index: 3;
    margin-bottom: 0;
    transform: translateY(-3px);
}

.composer-input {
    z-index: 1;
}

.composer-input .chat-reset {
    z-index: 2;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Day uses a calm deep green for primary chat actions. */
body:not(.is-evening-mode):not(.is-dark-mode):not(.is-tavern-mode)
    .quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer)
    :is(.setting-select, .setting-control) {
    color: #fff8e9;
    background: #315f59;
    border-color: #244943;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 3px 8px rgba(36, 73, 67, .2);
}

body:not(.is-evening-mode):not(.is-dark-mode):not(.is-tavern-mode)
    .quick-settings:not(.is-chat-dock-rail):not(.is-chat-cloud-drawer)
    :is(.setting-select, .setting-control):hover {
    background: #294f4a;
    border-color: #1f3f3a;
}

body:not(.is-evening-mode):not(.is-dark-mode):not(.is-tavern-mode)
    .composer-input
    #send {
    background: #315f59;
    border-color: #244943;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 3px 8px rgba(36, 73, 67, .2);
}

body:not(.is-evening-mode):not(.is-dark-mode):not(.is-tavern-mode)
    .composer-input
    #send:is(:hover, :focus-visible) {
    background: #294f4a;
    border-color: #1f3f3a;
}

body:not(.is-evening-mode):not(.is-dark-mode):not(.is-tavern-mode)
    .composer-input
    .chat-reset {
    color: #315f59;
}

body:not(.is-evening-mode):not(.is-dark-mode):not(.is-tavern-mode)
    .message.assistant
    .bubble.is-start-categories
    .start-suggestions
    .suggestion-button--highlight {
    color: #fff8e9;
    background: #315f59;
    border-color: #244943;
    box-shadow: 0 5px 12px rgba(36, 73, 67, .2);
}

body:not(.is-evening-mode):not(.is-dark-mode):not(.is-tavern-mode)
    .message.assistant
    .bubble.is-start-categories
    .start-suggestions
    .suggestion-button--highlight:is(:hover, :focus-visible) {
    color: #fff8e9;
    background: #294f4a;
    border-color: #1f3f3a;
}