/* Shared migrated component rules. Legacy theme selectors removed. Black Blue is defined in live-black-blue.css. */
:root{color-scheme: dark; --seb-bg: var(--tone-080c14,#080c14); --seb-panel: var(--tone-101a2b,#101a2b); --seb-border: var(--tone-2c4262,#2c4262); --seb-text: var(--tone-dce5f2,#dce5f2); --seb-muted: var(--tone-a0b2cc,#a0b2cc); --seb-accent: var(--tone-94baff,#94baff); --seb-prose-font: "Segoe UI",Roboto,Helvetica,Arial,sans-serif; --bg: var(--seb-bg); --surface: var(--seb-panel); --panel: var(--tone-122039,#122039); --line: var(--seb-border); --text: var(--seb-text); --muted: var(--seb-muted); --accent: var(--seb-accent); --ink: var(--tone-080f1c,#080f1c); --danger: #f1a7a0; --radius: 3px; font-family: Inter, "Segoe UI", system-ui, sans-serif; font-size: 16px; font-synthesis: none;}
*{box-sizing: border-box;}
body{margin: 0px; background: var(--bg); color: var(--text);}
button, input, textarea, select{font: inherit;}
button{cursor: pointer;}
button, a, input, textarea, select{outline-offset: 4px;}
button:focus-visible, a:focus-visible{outline: 2px solid var(--accent);}
button{border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: var(--radius); min-height: 42px; padding: 9px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;}
button:hover{background: var(--tone-142a48,#142a48); border-color: var(--tone-678bbb,#678bbb);}
button:where(:not(.sidebar button)){position: relative;}
button:not(.sidebar button):not(:disabled):not(.character-name-link):not(.portrait-profile-link):hover{box-shadow: inset 0 0 18px color-mix(in srgb, var(--accent) 4%, transparent);}
button:not(.sidebar button):not(:disabled):not(.character-name-link):not(.portrait-profile-link):hover::after{content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-top: 1px solid var(--accent); border-right: 1px solid var(--accent); pointer-events: none;}
@media (prefers-reduced-motion: reduce) {button:not(.sidebar button){transition: none;}}
button:disabled{opacity: 0.45; cursor: not-allowed;}
button.primary{background: linear-gradient(100deg, var(--panel), var(--surface)); color: var(--text); border-color: color-mix(in srgb, var(--accent) 65%, var(--line)); box-shadow: inset 2px 0 var(--accent); font-weight: 650;}
button.primary:hover{background: color-mix(in srgb, var(--accent) 15%, var(--surface)); border-color: var(--accent);}
button.ghost{background: transparent; border-color: transparent;}
button.danger{color: var(--danger);}
button.icon{width: 42px; padding: 10px; flex-shrink: 0;}
svg.icon-svg{width: 20px; height: 20px; fill: none; stroke: currentcolor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;}
a{color: var(--accent);}
h1, h2, h3, p{margin-top: 0px;}
h1, h2, .serif{font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 650;}
h1{font-size: 2.5rem; letter-spacing: -1.3px; margin-bottom: 10px;}
h2{font-size: 1.7rem; letter-spacing: -0.5px;}
h3{font-size: 1rem; font-weight: 600;}
p{line-height: 1.65;}
small, .small{font-size: 0.875rem;}
.muted{color: var(--muted);}
.eyebrow{text-transform: uppercase; letter-spacing: 2px; font-size: 0.75rem; color: var(--muted); font-weight: 650;}
.badge{border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.75rem; padding: 5px 9px; display: inline-flex; gap: 5px; align-items: center; color: var(--muted); line-height: 1.2;}
.row{display: flex; gap: 12px; align-items: center;}
.between{justify-content: space-between;}
.wrap{flex-wrap: wrap;}
.stack{display: flex; flex-direction: column; gap: 16px;}
.grow{flex: 1 1 0%; min-width: 0px;}
.hidden{display: none !important;}
.search{max-width: 300px; position: relative;}
label{display: flex; flex-direction: column; gap: 8px; font-size: 0.875rem; color: var(--tone-dce5f2,#dce5f2);}
input, textarea, select{background: var(--tone-080f1c,#080f1c); border: 1px solid var(--tone-344967,#344967); border-radius: var(--radius); padding: 11px 12px; color: var(--text); min-width: 0px; width: 100%; min-height: 44px;}
textarea{resize: vertical; line-height: 1.6; min-height: 104px;}
input:focus, textarea:focus, select:focus{outline: 2px solid var(--tone-94baff,#94baff); outline-offset: 1px;}
label small{color: var(--muted); line-height: 1.5;}
input::placeholder, textarea::placeholder{color: var(--tone-96a9c5,#96a9c5);}
.drawer .form-actions button{flex: 1 1 0%;}
.drawer details summary{cursor: pointer; font-size: 0.875rem; padding: 5px 0px 10px;}
@media (max-width: 760px) {h1{font-size: 2.15rem;}}
@media (prefers-reduced-motion: reduce) {*{scroll-behavior: auto !important; transition: none !important;}}
input, textarea{caret-color: var(--tone-bed7ff,#bed7ff);}
form[data-form="appearance"] input[type="color"]{height: 44px; width: 100%;}
:root{--chat-backdrop: rgba(7,12,21,.88); --chat-bot-surface: rgba(14,29,51,.94); --chat-user-surface: rgba(16,23,37,.94);}
.shell{height: 100dvh; display: grid; grid-template-columns: 240px minmax(0px, 1fr); overflow: hidden;}
.sidebar{position: relative; background: linear-gradient(155deg, var(--surface), var(--tone-080e19,#080e19) 55%); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 30px 18px 20px; min-height: 0px;}
.brand{display: flex; align-items: center; gap: 12px; padding: 0px 12px 35px;}
.brand img{width: 42px; height: 42px; object-fit: contain; flex-shrink: 0;}
.brand strong{font-family: Georgia, serif; font-size: 1.5rem; font-weight: 400; letter-spacing: 0.3px;}
.brand small{display: block; letter-spacing: 2px; font-size: 0.65rem; text-transform: uppercase; color: var(--muted); margin-top: 4px;}
.nav{display: flex; flex-direction: column; gap: 5px;}
.sidebar::before{content: ""; position: absolute; top: 0px; left: 18px; width: 72px; height: 2px; background: var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 40%, transparent); pointer-events: none;}
.sidebar .nav button, .sidebar .recent button{position: relative; width: 100%; min-height: 44px; justify-content: flex-start; background: transparent; border: 1px solid transparent; border-radius: 3px; color: var(--muted); padding: 10px 13px; gap: 12px; text-align: left; transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;}
.sidebar .nav button svg{flex-shrink: 0; transition: color 0.2s, filter 0.2s;}
.sidebar .nav button::after, .sidebar .recent button::after{content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-top: 1px solid var(--accent); border-right: 1px solid var(--accent); opacity: 0; transition: opacity 0.2s; pointer-events: none;}
.sidebar .nav button:hover, .sidebar .recent button:hover{background: linear-gradient(90deg, var(--panel), var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); color: var(--text); box-shadow: inset 0 0 18px color-mix(in srgb, var(--accent) 3%, transparent);}
.sidebar .nav button:hover::after, .sidebar .recent button:hover::after{opacity: 0.65;}
.sidebar .nav button:hover svg{color: var(--accent); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 40%, transparent));}
.sidebar .nav button.active, .sidebar .recent button.active{color: var(--text); background: linear-gradient(90deg, var(--tone-172c4b,#172c4b), var(--surface)); border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); box-shadow: inset 2px 0 var(--accent);}
.sidebar .nav button.active::after, .sidebar .recent button.active::after{opacity: 1;}
.sidebar .nav button.active svg{color: var(--accent);}
.sidebar .divider{margin: 24px 12px 16px; height: 1px; border: 0px; background: linear-gradient(90deg, var(--line), transparent);}
.recent{display: flex; flex-direction: column; gap: 5px; overflow: auto; flex: 1 1 0%; min-height: 70px;}
.recent-heading{padding: 0px 14px 12px;}
.sidebar .recent button{padding: 8px 13px; gap: 10px; font-size: 0.8rem;}
.recent button span{overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.sidebar .conversation-avatar, .sidebar .avatar-mini{border-radius: 4px;}
.sidebar .review-count{border-radius: 2px;}
.sidebar .profile button{border-radius: 3px;}
@media (prefers-reduced-motion: reduce) {.sidebar .nav button, .sidebar .recent button, .sidebar .nav button svg, .sidebar .nav button::after, .sidebar .recent button::after{transition: none;}}
.recent .empty-mini{padding: 0px 14px; font-size: 0.875rem; color: var(--tone-a0b2cc,#a0b2cc); line-height: 1.6;}
.profile{border-top: 1px solid var(--line); padding-top: 18px; margin-top: 12px;}
.crumb b{color: var(--text); font-weight: 500;}
@media (max-width: 760px) {.nav-open .sidebar{transform: translateX(0px);}}
.character .start{width: 100%; justify-content: space-between;}
.portrait .portrait-profile-link:hover{background: var(--tone-94baff12,#94baff12);}
.character-row button:not(.portrait-profile-link):not(.character-name-link){min-height: 32px; font-size: 12px; padding: 6px 9px;}
.character-row .card-actions .start{width: 100%; margin: 0px;}
.favorite-toggle.active svg{fill: var(--tone-94baff44,#94baff44);}
@media (max-width: 760px) {.character-row button:not(.portrait-profile-link):not(.character-name-link){min-height: 40px;}}
.character-row .card-actions .card-control{height: 100%; justify-content: center;}
.character-row .card-actions button:focus-visible{outline: 2px solid var(--tone-b5d1ff,#b5d1ff); outline-offset: 2px;}
.character-row .card-art .portrait img{object-fit: cover; object-position: center 25%;}
.character-row .card-art .favorite-toggle{top: 54px; bottom: auto;}
@media (max-width: 760px) {.character-row .card-art .favorite-toggle{top: 60px;}}
.character-row .card-art .favorite-toggle{top: 10px; right: 10px; bottom: auto;}
.character-row .card-art .edit{top: 10px; right: 48px; bottom: auto;}
@media (max-width: 760px) {.character-row .card-art .edit{right: 56px;}}
.character-row .character{transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {.character-row .character:hover{border-color: var(--accent); box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 8%, transparent);}}
@media (prefers-reduced-motion: reduce) {.character-row .character{transition: none; animation: auto ease 0s 1 normal none running none !important; transform: none !important;}}
.prose .markdown-prose{white-space: normal;}
.prose .markdown-prose p{white-space: pre-wrap; margin: 0px 0px 1em;}
.composer-wrap{position: relative;}
.chat-latest{position: absolute; right: 12px; bottom: calc(100% + 8px); z-index: 5; padding: 7px 12px; min-height: 34px; font-size: 12px; box-shadow: rgba(0, 0, 0, 0.333) 0px 3px 12px;}
.chat-latest[hidden]{display: none;}
#chat-scroll{overflow-anchor: none;}
.prose .markdown-prose blockquote{margin: 1em 0px; padding: 0.6em 1em; border-left: 3px solid var(--prose-quote, var(--accent)); background: color-mix(in srgb, var(--prose-quote, var(--accent)) 10%, transparent); border-radius: 0px 2px 2px 0px;}
.prose .markdown-prose > :last-child, .prose .markdown-prose blockquote > :last-child{margin-bottom: 0px;}
.prose .markdown-prose :is(h1, h2, h3, h4, h5, h6){margin: 1em 0px 0.5em; line-height: 1.3; font-weight: 700; color: inherit;}
.prose .markdown-prose h1{font-size: 1.8em;}
.prose .markdown-prose h2{font-size: 1.5em;}
.prose .markdown-prose h3{font-size: 1.25em;}
.prose .markdown-prose :is(h4, h5, h6){font-size: 1.1em;}
.prose .markdown-prose pre{white-space: pre-wrap;}
.chat-layout.no-drawer{grid-template-columns: minmax(0px, 1fr);}
.conversation.has-bg::before{content: ""; position: absolute; inset: 0px; background: var(--tone-080c14d6,#080c14d6); pointer-events: none;}
.message .message .prose .prose-inherit, .prose .prose-inherit{color: inherit;}
.prose em, .message .prose i{color: var(--prose-italic,var(--tone-a9bad4,#a9bad4));}
.message.user .prose{color: var(--prose-text,var(--tone-dce5f2,#dce5f2));}
.message-actions button:hover{background: var(--panel);}
.reasoning summary{cursor: pointer;}
.composer textarea:focus{outline: none;}
.message.user > div:last-child{background: linear-gradient(125deg,var(--tone-b3c9ec06,#b3c9ec06),transparent 70%),var(--chat-user-surface); border-color: var(--tone-344357,#344357); box-shadow: inset 3px 0 0 var(--tone-a0b0c8,#a0b0c8),0 7px 20px #0003;}
.message:not(.user) .name{font-family: Arial, Helvetica, sans-serif; font-size: clamp(1.5rem, 2.2vw, 2.15rem); font-weight: 800; letter-spacing: -0.8px; line-height: 1.15; overflow-wrap: anywhere; color: var(--tone-f1f5ff,#f1f5ff); text-shadow: 0 0 28px var(--tone-699bff30,#699bff30);}
.composer textarea:focus-visible{outline: 2px solid var(--accent); outline-offset: 2px;}
.message .prose:has(> .message-html){white-space: normal;}
.composer #composer-text{height: 144px; min-height: 112px; max-height: min(420px, 45dvh); font-size: var(--composer-size,14px); line-height: 1.7; padding: 10px 8px; resize: vertical; overflow-y: auto;}
@media (max-width: 600px) {.composer #composer-text{height: 120px; min-height: 88px; max-height: 40dvh;}}
@media (max-height: 500px) {.composer #composer-text{height: 88px; min-height: 60px; max-height: 35dvh;}}
.chat-layout.has-status, .chat-layout.has-status.no-drawer{grid-template-columns: minmax(0px, 1fr) 340px;}
.composer #composer-text{padding: 6px;}
.composer #composer-text{height: 64px; min-height: 44px; max-height: 25dvh; padding: 4px 6px; line-height: 1.5;}
@media (max-width: 760px) {.composer #composer-text{height: 48px; min-height: 40px; max-height: 22dvh;}}
@media (max-height: 500px) {.composer #composer-text{height: 40px; min-height: 32px; max-height: 20dvh;}}
@media (max-width: 760px) {.composer #composer-text{height: 80px; min-height: 72px; max-height: 28dvh;}}
@media (max-width: 760px) {#chat-scroll{scroll-behavior: auto;}}
@media (max-width: 760px) and (max-height: 480px) {.composer #composer-text{height: 64px; min-height: 56px; max-height: 24dvh;}}
#chat-scroll{scroll-behavior: auto;}
.recent button > span:not(.conversation-avatar){min-width: 0px; overflow: hidden; text-overflow: ellipsis;}
.book-entry-row.is-disabled{border-style: dashed;}
.book-entry-row.is-disabled > .book-entry-controls{opacity: 0.65; filter: grayscale(1);}
.book-entry-row.is-disabled:focus-within > .book-entry-controls{opacity: 1;}
.prose img{max-width: 100%; height: auto;}
.lore-counting-settings{padding: 14px; margin: 12px 0px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);}
.lore-counting-settings select{width: 100%;}
.lore-counting-settings p{margin: 8px 0px 0px;}
.lore-entry-tokens{display: inline-block; padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); background: var(--surface); font-size: 12px; font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums;}
.book-entry-row > details > summary > .lore-entry-tokens{margin-left: 8px;}
.lore-entry-token-label{display: flex; justify-content: flex-end;}
.lore-character-picker{margin: 12px 0px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);}
.lore-character-options{display: grid; gap: 8px; max-height: 220px; overflow-y: auto; margin-top: 12px;}
.lore-character-options > label{display: flex; align-items: center; gap: 10px; margin: 0px; text-align: left;}
.lore-character-options input[type="checkbox"]{width: 16px; height: 16px; flex: 0 0 16px; margin: 0px;}
.wide-limit.lorebooks-wide{width: 100%; max-width: none; min-width: 0px;}
.lorebook-layout{display: grid; grid-template-columns: minmax(0px, 1fr) minmax(260px, 320px); gap: 24px; align-items: start;}
.lorebook-layout > .item-list{min-width: 0px;}
.lorebook-layout .list-item{flex-wrap: wrap; overflow-wrap: anywhere;}
.lorebook-tips{padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); font-size: 13px; line-height: 1.65;}
.lorebook-tips h2{margin: 0px 0px 16px; font-size: 18px;}
.lorebook-tips h3{margin: 16px 0px 8px; font-size: 14px;}
.lorebook-tips p, .lorebook-tips dd{margin: 0px 0px 12px; color: var(--muted);}
.lorebook-tips dt{font-weight: 700; color: var(--text);}
.lorebook-tips dl{margin: 0px;}
.lorebook-tips .lorebook-order{padding-top: 14px; border-top: 1px solid var(--line);}
@media (max-width: 1100px) {.lorebook-layout{grid-template-columns: minmax(0px, 1fr);}}
.book-entry-row{position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; margin: 7px 0px; background: var(--tone-0c1422,#0c1422);}
.book-entry-controls{display: grid; grid-template-columns: minmax(130px, 1fr) 105px 68px 24px auto 32px; align-items: center; gap: 8px; padding-left: 32px;}
.book-entry-controls label{min-width: 0px; margin: 0px;}
.book-control-label{position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
.book-entry-controls input:not([type="checkbox"]), .book-entry-controls select{height: 32px; min-height: 32px; margin: 0px; padding: 4px 8px; font-size: 13px;}
.book-entry-controls .check{justify-content: center; padding: 0px;}
.book-entry-controls input[type="checkbox"]{width: 16px; height: 16px; margin: 0px;}
.book-entry-controls .icon{width: 32px; height: 32px; min-height: 32px; padding: 6px;}
.book-entry-controls .lore-entry-tokens{font-size: 11px; padding: 2px 6px;}
.book-entry-row > details{margin: 0px;}
.book-entry-row > details > summary{position: absolute; top: 8px; left: 8px; display: flex; align-items: center; justify-content: center; width: 28px; height: 32px; padding: 0px; border-radius: var(--radius); cursor: pointer; color: var(--muted); list-style: none;}
.book-entry-row > details > summary::-webkit-details-marker{display: none;}
.book-entry-row > details > summary::before{content: "▸"; font-size: 18px;}
.book-entry-row > details[open] > summary::before{content: "▾";}
.book-entry-row > details > summary:hover, .book-entry-row > details > summary:focus-visible{background: var(--surface); color: var(--text);}
.book-entry-row > details > summary:focus-visible{outline: 2px solid var(--accent); outline-offset: 1px;}
.book-entry-row > details[open]{display: grid; gap: 14px; margin-top: 10px; padding: 12px 4px 4px; border-top: 1px solid var(--line);}
.book-entry-row textarea{min-height: 200px; resize: vertical;}
@media (max-width: 760px) {.book-entry-controls{grid-template-columns: minmax(0px, 1fr) 68px 28px 36px; gap: 6px;}
.book-entry-controls > label:first-child{grid-column: 1 / 4;}
.book-entry-controls > .icon{grid-area: 1 / 4;}
.book-entry-controls > .lore-entry-tokens{grid-column: 1 / -1; justify-self: start;}
.book-entry-controls input:not([type="checkbox"]), .book-entry-controls select, .book-entry-controls .icon{height: 36px; min-height: 36px;}
.book-entry-row > details > summary{height: 36px;}}
.lore-event{margin: 14px 0px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius);}
.lore-event > summary{cursor: pointer; color: var(--accent); margin-bottom: 10px;}
.lore-event .event-fields{margin-top: 12px;}
.lore-event .event-fields[hidden]{display: none;}
.lore-event .form-grid{margin: 12px 0px;}
.lore-event textarea{width: 100%;}
.chat-scroll > .tracker-summary small, .chat-scroll > .tracker-summary .error{flex-basis: 100%;}
.birthday-settings{min-width: 0px; margin: 16px 0px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius);}
.birthday-settings .form-grid > label{min-width: 0px;}
.tracker-summary.story-status{display: block; isolation: isolate; position: relative; overflow: hidden; padding: 20px 22px; border: 1px solid var(--tone-365680,#365680); border-radius: var(--radius); background: radial-gradient(ellipse at 100% 0%,color-mix(in srgb, var(--accent) 23%, transparent),transparent 65%),linear-gradient(145deg,var(--panel),var(--bg) 80%); box-shadow: 0 10px 28px #0003,inset 0 1px 0 var(--tone-c0d9ff10,#c0d9ff10);}
.story-status::after{content: ""; position: absolute; inset: 0px; z-index: -1; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--accent) 3%, transparent) 1px, transparent 1px),linear-gradient(90deg,color-mix(in srgb, var(--accent) 3%, transparent) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(135deg, transparent 30%, rgb(0, 0, 0));}
.status-cell dt .icon-svg{width: 13px; height: 13px;}
.status-affinity-heading strong small{font-size: 12px; margin-left: 2px;}
@media (max-width: 600px) {.chat-scroll > .tracker-summary.story-status{padding: 17px; border-radius: var(--radius);}}
.story-rail .status-cell dd{font-size: 13px;}
.story-rail .status-cell .status-time{font-size: 21px;}
@media (max-width: 1200px) {.story-rail .status-cell dt{font-size: 8px; margin-bottom: 3px;}}
@media (max-width: 1200px) {.story-rail .status-cell dd{font-size: 11px;}}
@media (max-width: 1200px) {.story-rail .status-cell > small:not(.status-weekday){display: none;}
.story-rail .status-cell > .status-weekday{display: block; margin-top: 2px; font-size: 10px; line-height: 1.3;}}
@media (max-width: 1200px) {.story-rail .status-cell .status-time{font-size: 16px;}}
@media (max-width: 1200px) {.story-rail .status-location dt{display: none;}}
@media (max-width: 1200px) {.story-rail .status-location dd{max-height: 3.1em; overflow: auto;}}
@media (max-width: 1200px) {.story-rail .status-affinity-heading strong{font-size: 20px;}}
@media (max-width: 760px) {.story-rail .status-cell dt .icon-svg{width: 10px; height: 10px;}}
@media (max-width: 760px) {.story-rail .status-location dd{max-height: 1.35em; overflow: auto;}}
[data-glitch-form] > button[type="submit"]{margin-top: 16px; padding: 10px 18px;}
@media (min-width: 1001px) and (hover: hover) and (pointer: fine) {#glitch-panel header{display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line);}}
@keyframes glitch-pulse { 
  0%, 100% { text-shadow: rgb(255, 50, 50) 0px 0px 3px; opacity: 0.7; }
  50% { text-shadow: rgb(255, 50, 50) 0px 0px 10px, rgba(255, 50, 50, 0.533) 0px 0px 16px; opacity: 1; }
}
@media (min-width: 1001px) and (hover: hover) and (pointer: fine) {.chat-layout.has-glitch > .story-rail > .drawer{min-height: 220px; flex-shrink: 0;}}
#glitch-panel form[data-glitch-reply]{padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); flex-shrink: 0;}
#glitch-panel form[data-glitch-reply] button{align-self: flex-end; min-height: 30px; font-size: 12px; padding: 5px 10px;}
.lv-settings form{display: grid; gap: 16px; margin-top: 18px;}
.lv-settings details{border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-width: 0px;}
.lv-settings summary{cursor: pointer;}
.lv-actions{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-top: 14px;}
.lv-actions fieldset, .lv-pattern{min-width: 0px; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin: 12px 0px;}
.lv-functions{display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0px;}
.lv-functions .check{margin: 0px;}
.lv-steps{display: flex; overflow-x: auto; gap: 9px; padding: 12px 2px; margin: 10px 0px;}
.lv-step{flex: 0 0 36px; display: grid; justify-items: center; gap: 5px; font-size: 12px;}
.lv-step input[type="range"]{writing-mode: vertical-lr; direction: rtl; height: 108px; width: 30px; padding: 0px; accent-color: var(--accent); touch-action: pan-x;}
.lv-launch{display: inline-flex; align-items: center; gap: 6px;}
.lv-launch.is-armed{color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);}
.lv-panel{position: fixed; z-index: 90; top: 76px; bottom: 16px; width: min(390px, -24px + 100vw); display: flex; flex-direction: column; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: rgba(0, 0, 0, 0.4) 0px 12px 50px; overflow: hidden;}
.lv-panel.lv-right{right: 12px;}
.lv-panel.lv-left{left: 12px;}
.lv-panel > header{flex-shrink: 0; display: flex; gap: 8px; align-items: center; padding: 12px; border-bottom: 1px solid var(--line); background: var(--surface);}
.lv-panel > header > div{flex: 1 1 0%; min-width: 0px;}
.lv-panel > header small{display: block; color: var(--muted); margin-top: 4px;}
.lv-panel-body{padding: 14px; overflow-y: auto; overscroll-behavior: contain; min-height: 0px; scrollbar-gutter: stable;}
.lv-panel button, .lv-panel select{min-height: 44px;}
.lv-panel button{white-space: normal;}
.lv-panel label{display: grid; gap: 7px; margin: 12px 0px;}
.lv-panel input, .lv-panel select{width: 100%; min-width: 0px; font-size: 16px;}
.lv-panel details{margin: 14px 0px; padding-top: 12px; border-top: 1px solid var(--line);}
.lv-panel summary{cursor: pointer; min-height: 32px;}
.lv-panel [data-lv-error]:empty{display: none;}
.lv-controls{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 8px; margin: 12px 0px;}
.lv-device{border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin: 8px 0px; overflow-wrap: anywhere;}
.lv-device span, .lv-device small{display: block; color: var(--muted); font-size: 12px; margin-top: 6px;}
[data-lv-qr]{display: grid; justify-items: center; gap: 10px; margin: 16px 0px;}
[data-lv-qr] img{max-width: 100%; height: auto; border-radius: var(--radius); background: white;}
[data-lv-qr] input{text-align: center;}
@media (max-width: 600px) {.lv-launch-label{display: none;}
.lv-launch, .lv-quick-stop{min-width: 38px; padding: 6px;}
.lv-panel{top: max(8px, env(safe-area-inset-top)); bottom: auto; max-height: calc(100dvh - 16px - env(safe-area-inset-bottom)); width: calc(-16px + 100vw);}
.lv-panel.lv-left, .lv-panel.lv-right{left: 8px; right: 8px;}
.lv-panel > header{padding: 10px;}
.lv-panel > header strong{font-size: 14px;}
.lv-panel-body{padding-bottom: max(16px, env(safe-area-inset-bottom));}}
@media (max-width: 760px) {.topbar:has(.lv-launch) > .row{min-width: 0px; flex: 1 1 0%;}
.topbar:has(.lv-launch) .chat-name{min-width: 0px; max-width: clamp(0px, -310px + 100vw, 145px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.topbar:has(.lv-launch) .topbar-right{flex-shrink: 0;}}
.lv-shop{margin: 20px 0px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius);}
.lv-shop-links{display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px;}
.lv-shop-links a{display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px; padding: 12px 16px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--text);}
.lv-shop-links a span{color: var(--muted); font-size: 12px;}
.lv-shop-links a:hover{border-color: var(--accent); background: var(--panel);}
.lv-shop > p{margin: 12px 0px 0px;}
.lv-device-select{display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer;}
.lv-device-select input{flex: 0 0 auto; width: 18px; height: 18px;}
.lv-device-select span{min-width: 0px; overflow-wrap: anywhere;}
.lv-device-select small{display: block;}
.lv-quick-stop[hidden]{display: none;}
dialog{background: var(--bg); color: var(--text); border: 1px solid var(--tone-2c4262,#2c4262); border-radius: var(--radius); width: min(760px, 94vw); max-height: 90dvh; padding: 0px; box-shadow: rgba(0, 0, 0, 0.533) 0px 30px 100px;}
dialog::backdrop{background: var(--tone-03070cb8,#03070cb8); backdrop-filter: blur(5px);}
#toasts, .dialog-toasts{position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 8px; width: min(520px, 90vw); pointer-events: none;}
@media (max-width: 760px) {dialog{width: 96vw; max-height: 94dvh; border-radius: var(--radius);}}
dialog{background: linear-gradient(145deg,var(--tone-122039,#122039),var(--tone-0b1320,#0b1320) 70%); box-shadow: 0 20px 60px #0009,inset 0 1px 0 var(--tone-b9d4ff12,#b9d4ff12);}
:where(.content, .chat-scroll, .drawer, dialog, .recent, textarea){scrollbar-color: var(--tone-47648d,#47648d) var(--tone-0a111d,#0a111d);}
:where(.content, .chat-scroll, .drawer, dialog, .recent, textarea)::-webkit-scrollbar-track{background: var(--tone-0a111d,#0a111d);}
:where(.content, .chat-scroll, .drawer, dialog, .recent, textarea)::-webkit-scrollbar-thumb{background: var(--tone-47648d,#47648d); border: 2px solid var(--tone-0a111d,#0a111d); border-radius: var(--radius);}
.avatar-mini{height: 36px; width: 36px; border: 1px solid var(--tone-365680,#365680); background: var(--tone-172b48,#172b48); color: var(--accent); border-radius: var(--radius); display: grid; place-items: center; font-family: Georgia, serif; font-size: 1.05rem; flex-shrink: 0;}
.main{display: flex; flex-direction: column; min-width: 0px; min-height: 0px;}
.topbar{height: 78px; min-height: 78px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0px 40px; gap: 12px; background: var(--bg);}
.crumb{font-size: 0.875rem; color: var(--muted);}
.topbar-right{display: flex; align-items: center; gap: 14px;}
.content{overflow: auto; padding: 44px 40px 40px; flex: 1 1 0%;}
.page-head{position: relative; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(110deg,var(--surface),var(--bg)); display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; gap: 20px;}
.page-head::before{content: ""; position: absolute; top: -1px; left: 16px; width: 45px; height: 2px; background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent); pointer-events: none;}
.page-head p{margin: 0px; color: var(--muted); max-width: 620px;}
.toolbar{display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; gap: 14px;}
.search input{padding-left: 40px;}
.search svg{position: absolute; left: 12px; top: 12px; color: var(--muted);}
.grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px;}
.character{border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); position: relative;}
.portrait{position: relative; aspect-ratio: 5 / 4; background: linear-gradient(140deg,var(--tone-234474,#234474),var(--tone-0c1422,#0c1422)); overflow: hidden; display: flex; align-items: center; justify-content: center;}
.portrait img{width: 100%; height: 100%; object-fit: cover; object-position: center 25%;}
.portrait .initials{font: 6rem Georgia, serif; color: var(--tone-94baff,#94baff); opacity: 0.55; letter-spacing: -5px;}
.portrait .number{position: absolute; left: 18px; top: 16px; font-size: 0.75rem; color: var(--tone-dce5f2,#dce5f2); letter-spacing: 2px; background: var(--tone-080c1480,#080c1480); padding: 4px 7px; border-radius: var(--radius);}
.portrait .edit{position: absolute; right: 12px; top: 12px; background: var(--tone-080c14cc,#080c14cc); border-color: var(--tone-94baff44,#94baff44);}
.character .details{padding: 20px;}
.character h2{font-size: 1.6rem; margin-bottom: 6px;}
.character .description{color: var(--muted); font-size: 0.875rem; line-height: 1.55; height: 43px; overflow: hidden; margin-bottom: 18px;}
.character .tags{display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0px 20px; min-height: 24px;}
.add-card{border: 1px dashed var(--tone-3b5a84,#3b5a84); border-radius: var(--radius); background: linear-gradient(140deg,var(--tone-122039,#122039),var(--tone-0c1422,#0c1422)); min-height: 365px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; padding: 30px; color: var(--muted); text-align: center;}
.add-card .plus{width: 58px; height: 58px; border: 1px solid var(--tone-47648d,#47648d); border-radius: var(--radius); font-size: 2rem; font-weight: 200; color: var(--accent); display: grid; place-items: center;}
.add-card strong{font-size: 1.05rem; color: var(--text); font-weight: 500;}
.add-card small{max-width: 210px; line-height: 1.6;}
.empty{padding: 55px 28px; border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; color: var(--muted);}
.empty h2{color: var(--text);}
.empty p{max-width: 470px; margin: 0px auto 20px;}
.panel{padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);}
.panel h2{margin-bottom: 10px;}
.section-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px;}
.item-list{display: flex; flex-direction: column; gap: 12px;}
.list-item{padding: 19px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 16px;}
.list-item h3{margin: 0px 0px 6px;}
.list-item p{margin: 0px; font-size: 0.875rem; color: var(--muted);}
input[type="checkbox"]{width: 18px; height: 18px; min-height: 0px; accent-color: var(--accent); flex-shrink: 0;}
input[type="file"]{padding: 9px; font-size: 0.875rem;}
label.check{flex-direction: row; align-items: center; gap: 10px; min-height: 40px; line-height: 1.5;}
.form-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 18px;}
.full{grid-column: 1 / -1;}
.form-actions{display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px;}
.error, .notice{padding: 12px 14px; border-radius: var(--radius); font-size: 0.875rem; line-height: 1.5;}
.error{color: rgb(255, 198, 188); background: rgb(72, 39, 30); border: 1px solid rgb(124, 69, 57);}
.notice{background: var(--tone-122039,#122039); color: var(--tone-c9d9f4,#c9d9f4); border: 1px solid var(--tone-365680,#365680);}
.error:empty{display: none;}
.modal-head{padding: 24px 28px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px;}
.modal-head h2{margin: 0px;}
.modal-body{padding: 24px 28px 28px;}
.modal-body form{display: flex; flex-direction: column; gap: 18px;}
.auth{min-height: 100dvh; display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); background: radial-gradient(ellipse at 25% 15%,var(--tone-132746,#132746),transparent 65%);}
.auth-card{width: 100%; max-width: 900px; display: grid; grid-template-columns: 1.1fr 1fr; border: 1px solid var(--tone-365680,#365680); background: var(--tone-0c1320f7,#0c1320f7); border-radius: var(--radius); overflow: hidden; box-shadow: rgba(0, 0, 0, 0.2) 0px 24px 80px;}
.auth-intro{position: relative; isolation: isolate; overflow: hidden; padding: 36px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; background: linear-gradient(145deg,var(--tone-132746,#132746),transparent);}
.auth .brand{padding: 0px; position: relative;}
.auth .brand img{width: 76px; height: 76px; filter: drop-shadow(rgba(169, 202, 255, 0.2) 0px 0px 18px);}
.auth .brand strong{font-size: 2rem;}
.auth .brand small{line-height: 1.7;}
.auth-welcome{position: relative;}
.auth h1{font-size: clamp(1.8rem, 3vw, 2.45rem); line-height: 1.12; margin: 14px 0px; letter-spacing: -0.04em;}
.auth-welcome p{font-size: 14px; line-height: 1.85; margin: 0px;}
.auth-signature{position: relative; font-size: 11px; color: var(--muted); letter-spacing: 0.04em;}
.auth-entry{padding: 36px; min-width: 0px; border-left: 1px solid var(--line);}
.auth-entry h2{font-size: 1.2rem; margin: 0px 0px 8px;}
.auth-entry > p{margin: 0px 0px 22px;}
.auth form{display: flex; flex-direction: column; gap: 14px;}
.auth form input{font-size: 16px; min-height: 44px;}
.auth form .error:empty{display: none;}
.auth form button{min-height: 44px; justify-content: center;}
.auth .foot{margin: 18px 0px 0px; font-size: 12px; line-height: 1.7; color: var(--muted);}
.auth-orbit{position: absolute; z-index: -1; width: 580px; height: 580px; max-width: none; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--muted); opacity: 0.25; pointer-events: none;}
.auth-orbit-dots{transform-origin: 50% 50%; transform-box: view-box; animation: 65s linear 0s infinite normal none running auth-orbit-turn;}
.auth-orbit-dots-inner{animation-duration: 46s; animation-direction: reverse;}
@keyframes auth-orbit-turn { 
  100% { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {.auth-orbit-dots{animation: auto ease 0s 1 normal none running none;}}
@media (max-width: 640px) {.auth-card{grid-template-columns: minmax(0px, 1fr);}
.auth-intro{padding: 24px; gap: 20px;}
.auth .brand img{width: 52px; height: 52px;}
.auth .brand strong{font-size: 1.7rem;}
.auth-intro .auth-signature, .auth-welcome p{display: none;}
.auth h1{margin-bottom: 0px;}
.auth-entry{padding: 24px; border-left: 0px; border-top: 1px solid var(--line);}}
.boot{position: relative; isolation: isolate; display: grid; place-items: center; min-height: 100svh; padding: 32px 20px; overflow: hidden; background: var(--bg); color: var(--accent);}
.boot-overlay{position: fixed; inset: 0px; z-index: 10000; overflow-y: auto;}
.boot-atmosphere{position: absolute; inset: 0px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 44%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 56%),
    linear-gradient(transparent 49.7%,color-mix(in srgb,var(--accent) 3%,transparent) 50%,transparent 50.3%);}
.boot-atmosphere::after{content: ""; position: absolute; inset: 24px; border: 1px solid color-mix(in srgb,var(--accent) 9%,transparent);}
.boot-content{width: min(100%, 540px); text-align: center;}
.boot-brand{font-family: Georgia, "Times New Roman", serif; font-size: 32px; letter-spacing: -0.8px; color: var(--text);}
.boot-brand span{display: block; margin-top: 12px; font: 9px / 1.5 "Segoe UI", sans-serif; letter-spacing: 3px; color: var(--muted);}
.boot-orbit{display: block; width: min(100%, 440px, 49svh); height: auto; margin: 8px auto -8px; overflow: visible;}
.boot-map{opacity: 0.23; stroke-width: 0.8;}
.boot-revolve{transform-origin: 240px 240px; animation: 22s linear 0s infinite normal none running boot-turn;}
.boot-revolve-inner{animation-duration: 14s; animation-direction: reverse;}
.boot-revolve-distant{animation-duration: 70s; opacity: 0.65;}
.boot-star{filter: drop-shadow(currentcolor 0px 0px 6px);}
.boot-heart{transform-origin: 240px 240px; animation: 4s ease-in-out 0s infinite normal none running boot-breathe;}
.boot-copy h1{margin: 0px; font-size: 17px; line-height: 1.5; font-weight: 400; letter-spacing: 5px; color: var(--text);}
.boot-copy p{margin: 12px 0px 0px; color: var(--muted); font-size: 12px; letter-spacing: 0.6px;}
.boot-rule{width: 148px; height: 1px; margin: 28px auto; overflow: hidden; background: color-mix(in srgb,var(--accent) 16%,transparent);}
.boot-rule span{display: block; width: 65%; height: 100%; background: linear-gradient(90deg,transparent,var(--accent),transparent); animation: 2.8s ease-in-out 0s infinite normal none running boot-drift;}
.boot-signature{color: var(--muted); opacity: 0.65; font: italic 12px / 1.8 Georgia, serif; margin: 0px;}
@keyframes boot-turn { 
  100% { transform: rotate(360deg); }
}
@keyframes boot-breathe { 
  0%, 100% { opacity: 0.65; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.04); }
}
@keyframes boot-drift { 
  0% { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}
@media (max-width: 480px) {.boot-atmosphere::after{inset: 12px;}
.boot-brand{font-size: 28px;}
.boot-orbit{width: min(100%, 42svh); margin: 22px auto 10px;}}
@media (max-height: 520px) {.boot{padding: 20px;}
.boot-brand span, .boot-signature{display: none;}
.boot-orbit{width: 42svh; margin: 0px auto;}
.boot-rule{margin: 16px auto 0px;}}
@media (prefers-reduced-motion: reduce) {.boot-revolve, .boot-heart, .boot-rule span{animation: auto ease 0s 1 normal none running none;}
.boot-heart{opacity: 1;}
.boot-rule span{width: 100%;}}
.toast{background: var(--tone-94baff,#94baff); color: var(--tone-080f1c,#080f1c); border: 1px solid var(--tone-678bbb,#678bbb); border-radius: var(--radius); padding: 14px 18px; box-shadow: rgba(0, 0, 0, 0.4) 0px 8px 35px; font-size: 0.875rem; line-height: 1.5;}
.toast.error{background: rgb(98, 53, 44); color: rgb(255, 222, 210);}
.character-gallery-editor, .character-voice-editor{min-width: 0px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius);}
.character-image-options{display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 12px; margin: 12px 0px;}
.character-image-option{min-width: 0px;}
.character-image-option img, .character-image-choice img{display: block; width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius); margin-bottom: 8px;}
.character-image-choice{display: block; min-width: 0px; padding: 8px; white-space: normal;}
.character-image-choice[aria-pressed="true"]{outline: 2px solid var(--accent); outline-offset: 2px;}
.character-image-option label{margin-top: 8px;}
.character-gallery-editor > label, .character-voice-editor > label{display: block; margin-top: 14px;}
.speech-connections{margin-top: 24px;}
.speech-preview{max-height: 160px; overflow-y: auto; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius);}
#speech-player{width: 100%;}
@media (max-width: 480px) {.character-image-options{grid-template-columns: repeat(2, minmax(0px, 1fr));}}
.chat-library-shortcuts{display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;}
.chat-library-dialog{width: min(900px, -24px + 100vw); max-height: 88dvh; padding: 0px;}
.chat-library-dialog .modal-body{max-height: calc(88dvh - 80px); overflow-y: auto; overscroll-behavior: contain;}
.chat-library-dialog .list-item{gap: 12px; padding: 12px;}
.chat-library-dialog .list-item .grow{min-width: 0px; overflow-wrap: anywhere;}
@media (max-width: 600px) {.chat-library-dialog .list-item{align-items: flex-start; flex-direction: column;}
.chat-library-dialog button{min-height: 44px;}}
.writing-prompt-panel{margin-bottom: 18px;}
.writing-prompt-panel textarea:disabled{opacity: 0.6; cursor: not-allowed;}
.chat-layout{display: grid; grid-template-columns: minmax(0px, 1fr) 326px; flex: 1 1 0%; min-height: 0px;}
.conversation{display: flex; flex-direction: column; min-height: 0px; min-width: 0px; position: relative; background-position: center center; background-size: cover;}
.conversation > *{position: relative;}
.chat-scroll{overflow: auto; flex: 1 1 0%; padding: 30px max(26px, 50% - 395px) 28px; scroll-behavior: smooth;}
.chat-date{display: flex; align-items: center; gap: 16px; justify-content: center; margin: 4px 0px 30px; color: var(--muted); font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase;}
.chat-date::before, .chat-date::after{content: ""; width: 42px; height: 1px; background: var(--line);}
.message{display: grid; grid-template-columns: 40px minmax(0px, 1fr); gap: 16px; margin-bottom: 32px;}
.message .message-avatar{width: 40px; height: 48px; border-radius: var(--radius); background: var(--tone-142a48,#142a48); object-fit: cover; display: grid; place-items: center; font-family: Georgia, serif; color: var(--accent); border: 1px solid var(--tone-365680,#365680);}
.message .meta{display: flex; align-items: center; gap: 12px; margin: 0px 0px 11px;}
.message .name{font-size: 1.25rem; font-family: Georgia, serif;}
.message .role{font-size: 0.7rem; color: var(--muted); border: 1px solid var(--line); padding: 3px 6px; border-radius: var(--radius); letter-spacing: 0.5px;}
.message .prose{font-family: var(--seb-prose-font); font-size: 1.075rem; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--tone-dce5f2,#dce5f2);}
.message-actions{display: flex; gap: 3px; margin-top: 11px; align-items: center; flex-wrap: wrap;}
.message-actions button{font-size: 0.75rem; min-height: 32px; padding: 5px 8px; color: var(--tone-a0b2cc,#a0b2cc); background: transparent; border-color: transparent;}
@media (max-width: 760px) {.message-actions .message-action-label{display: none;}
.message-actions button{min-height: 44px;}
.message-actions .message-action-compact, .message-actions button.icon{width: 44px; min-width: 44px; padding: 8px;}}
.message-actions svg{height: 15px; width: 15px;}
.reasoning{margin: 14px 0px; padding: 10px 13px; background: var(--tone-080f1c,#080f1c); border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); font-size: 0.875rem;}
.reasoning pre{white-space: pre-wrap; overflow-wrap: anywhere; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; line-height: 1.6;}
.composer-wrap{padding: 12px 26px 19px;}
.composer{max-width: 790px; margin: auto; background: var(--tone-122039,#122039); border: 1px solid var(--tone-3b5a84,#3b5a84); border-radius: var(--radius); padding: 12px;}
.composer textarea{min-height: 60px; max-height: 210px; background: transparent; border: 0px; resize: vertical; padding: 5px 6px; font-size: 1rem;}
.composer-bottom{display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 3px 0px;}
.composer-hint{font-size: 0.75rem; color: var(--muted);}
.connection-hint{max-width: 790px; margin: 8px auto 0px; font-size: 0.75rem; color: var(--muted); display: flex; justify-content: space-between; gap: 10px;}
.drawer{border-left: 1px solid var(--line); background: var(--tone-0c1422,#0c1422); overflow: auto; padding: 22px 18px;}
.tabs{display: flex; gap: 3px; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 22px;}
.tabs button{font-size: 0.875rem; flex: 1 1 0%; padding: 8px 6px; min-height: 36px; background: transparent; border-color: transparent; color: var(--muted);}
.tabs button.active{background: linear-gradient(90deg,var(--tone-172c4b,#172c4b),var(--surface)); color: var(--accent); border-color: var(--line); box-shadow: inset 2px 0 var(--accent);}
.drawer h3{font-size: 0.875rem; margin: 0px 0px 14px;}
.drawer form{display: flex; flex-direction: column; gap: 18px;}
.drawer .form-grid{gap: 14px;}
.drawer label{font-size: 0.875rem;}
.drawer textarea{font-size: 0.875rem; min-height: 90px;}
.drawer .panel{padding: 15px; margin-bottom: 20px; border-radius: var(--radius);}
.drawer .muted{font-size: 0.875rem; line-height: 1.6;}
.drawer .form-actions{justify-content: stretch;}
.drawer details{border-bottom: 1px solid var(--line); padding-bottom: 15px;}
.writing-badge{color: var(--accent); font-size: 0.75rem;}
.status-line{padding: 9px 12px; color: var(--muted); font-size: 0.875rem; max-width: 790px; margin: auto;}
.mobile-only{display: none;}
.permission-table{width: 100%; border-collapse: collapse;}
.permission-table th, .permission-table td{text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line); font-size: 0.875rem;}
.permission-table th{color: var(--muted); font-weight: 400;}
.permission-table input{width: 18px;}
.entry{padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tone-0c1422,#0c1422);}
.entry.disabled{opacity: 0.7;}
.entry p{font-size: 0.875rem; white-space: pre-wrap; max-height: 150px; overflow: auto; margin: 12px 0px;}
.entry .keys{font-size: 0.75rem; color: var(--muted);}
.avatar-preview{width: 100px; height: 125px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line);}
.image-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 14px;}
.image-grid img{height: 125px; width: 100%; object-fit: cover; border-radius: var(--radius);}
.image-grid .panel{padding: 12px;}
.image-grid p{font-size: 0.75rem; margin: 6px 0px;}
.code-block{white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, monospace; font-size: 0.875rem; line-height: 1.6; max-height: 65vh; overflow: auto;}
.account-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 24px;}
.account-grid form{display: flex; flex-direction: column; gap: 18px;}
.wide-limit{max-width: 1100px; margin: 0px auto;}
.nav-backdrop{display: none;}
.loading-dot::after{content: " …"; color: var(--accent);}
@media (min-width: 1600px) {.content{padding: 48px 64px;}}
@media (min-width: 1600px) {.grid{grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));}}
@media (min-width: 1600px) {.chat-layout{grid-template-columns: minmax(0px, 1fr) 350px;}}
@media (max-width: 1200px) {.shell{grid-template-columns: 205px minmax(0px, 1fr);}}
@media (max-width: 1200px) {.sidebar{padding: 25px 12px 16px;}}
@media (max-width: 1200px) {.brand{padding-left: 10px;}}
@media (max-width: 1200px) {.content{padding: 32px 26px;}}
@media (max-width: 1200px) {.topbar{padding: 0px 26px;}}
@media (max-width: 1200px) {.chat-layout{grid-template-columns: minmax(0px, 1fr);}}
@media (max-width: 1200px) {.drawer{position: fixed; right: 0px; top: 78px; bottom: 0px; width: 340px; z-index: 8; box-shadow: rgba(0, 0, 0, 0.333) -20px 0px 60px;}}
@media (max-width: 1200px) {.chat-scroll{padding: 28px 25px;}}
@media (max-width: 1200px) {.drawer-close{display: flex !important;}}
@media (max-width: 1200px) {.page-head{align-items: flex-start;}}
@media (max-width: 760px) {.shell{grid-template-columns: 1fr;}}
@media (max-width: 760px) {.sidebar{position: fixed; left: 0px; top: 0px; bottom: 0px; width: 270px; z-index: 30; transform: translateX(-100%); transition: transform 0.2s;}}
@media (max-width: 760px) {.nav-open .nav-backdrop{display: block; position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.6); z-index: 29;}}
@media (max-width: 760px) {.mobile-only{display: flex;}}
@media (max-width: 760px) {.topbar{height: 66px; min-height: 66px; padding: 0px 16px; gap: 8px;}}
@media (max-width: 760px) {.topbar-right{gap: 5px;}}
@media (max-width: 760px) {.topbar .badge{display: none;}}
@media (max-width: 760px) {.crumb{font-size: 0.8rem;}}
@media (max-width: 760px) {.content{padding: 28px 18px;}}
@media (max-width: 760px) {.page-head{flex-direction: column; align-items: stretch; gap: 20px; margin-bottom: 25px;}}
@media (max-width: 760px) {.page-head .row{flex-wrap: wrap;}}
@media (max-width: 760px) {.grid{grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 17px;}}
@media (max-width: 760px) {.portrait{aspect-ratio: 6 / 4;}}
@media (max-width: 760px) {.add-card{min-height: 265px;}}
@media (max-width: 760px) {.toolbar{flex-wrap: wrap;}}
@media (max-width: 760px) {.search{max-width: none; flex: 1 1 0%; min-width: 180px;}}
@media (max-width: 760px) {.drawer{top: 66px; width: min(100vw, 380px);}}
@media (max-width: 760px) {.chat-scroll{padding: 22px 17px;}}
@media (max-width: 760px) {.message{grid-template-columns: 30px minmax(0px, 1fr); gap: 11px;}}
@media (max-width: 760px) {.message .message-avatar{width: 30px; height: 39px; border-radius: var(--radius);}}
@media (max-width: 760px) {.message .name{font-size: 1.1rem;}}
@media (max-width: 760px) {.message .prose{font-size: 1.025rem; line-height: 1.8;}}
@media (max-width: 760px) {.composer-wrap{padding-top: 8px; padding-right: 12px; padding-left: 12px; padding-bottom: max(12px,env(safe-area-inset-bottom));}}
@media (max-width: 760px) {.composer-hint{display: none;}}
@media (max-width: 760px) {.composer textarea{min-height: 56px;}}
@media (max-width: 760px) {.connection-hint{font-size: 0.7rem;}}
@media (max-width: 760px) {.form-grid, .account-grid{grid-template-columns: 1fr;}}
@media (max-width: 760px) {.full{grid-column: auto;}}
@media (max-width: 760px) {.modal-head{padding: 19px;}}
@media (max-width: 760px) {.modal-body{padding: 20px;}}
@media (max-width: 760px) {.list-item{padding: 16px; align-items: flex-start; flex-wrap: wrap;}}
@media (max-width: 760px) {.topbar .chat-name{max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}}
.topbar{background: linear-gradient(100deg,var(--tone-0a111f,#0a111f),var(--tone-132746,#132746) 65%,var(--tone-0a111f,#0a111f)); box-shadow: 0 5px 22px #0005,inset 0 1px 0 var(--tone-bdd6ff12,#bdd6ff12);}
.drawer{background: linear-gradient(145deg,var(--tone-122039,#122039),var(--tone-0c1422,#0c1422) 65%); box-shadow: inset 0 1px 0 var(--tone-b9d4ff12,#b9d4ff12);}
.character, .panel, .list-item{background: linear-gradient(145deg,var(--tone-12203955,#12203955),transparent 70%),var(--surface); box-shadow: inset 0 1px 0 var(--tone-b9d4ff0a,#b9d4ff0a);}
.character h2{font-family: Arial, Helvetica, sans-serif; font-weight: 800; color: var(--tone-f1f5ff,#f1f5ff); letter-spacing: -0.7px;}
.portrait{background: radial-gradient(ellipse at 95% 0%,var(--tone-23447488,#23447488),transparent 65%),var(--tone-0c1422,#0c1422);}
.portrait .initials{font-family: Arial, Helvetica, sans-serif; font-weight: 700;}
.conversation:not(.has-bg){background: radial-gradient(ellipse at 95% 0%,var(--tone-23447422,#23447422),transparent 50%),var(--chat-backdrop);}
.conversation.has-bg::before{background: var(--chat-backdrop);}
.message > div:last-child{min-width: 0px; padding: 18px 20px; border: 1px solid var(--tone-365680,#365680); border-radius: var(--radius); background: linear-gradient(125deg,var(--tone-142a486b,#142a486b),transparent 72%),var(--chat-bot-surface); box-shadow: inset 3px 0 0 var(--tone-598bd0,#598bd0),0 7px 20px #0003;}
.message .meta{flex-wrap: wrap;}
.message .name{color: var(--tone-e4edff,#e4edff); font-family: var(--seb-prose-font);}
.message-actions button:hover{color: var(--accent); text-shadow: 0 0 10px var(--tone-80b0ff45,#80b0ff45);}
.composer{background: linear-gradient(120deg,var(--tone-122039,#122039),var(--tone-0c1422,#0c1422)); box-shadow: 0-5px 24px #0003,inset 0 1px 0 var(--tone-a9ccff1a,#a9ccff1a);}
:where(.content, .chat-scroll, .drawer, dialog, .recent, textarea)::-webkit-scrollbar-thumb:hover{background: var(--tone-678bbb,#678bbb);}
::selection{background: var(--tone-345b91,#345b91); color: rgb(255, 255, 255);}
@media (max-width: 760px) {.message > div:last-child{padding: 14px; border-radius: var(--radius);}}
@media (max-width: 760px) {.composer{border-radius: var(--radius);}}
.message-html{display: block; width: 100%; height: 160px; min-height: 100px; border: 0px; background: transparent; color-scheme: dark;}
.greetings-button{width: 100%; margin-bottom: 10px;}
.greetings-editor[hidden]{display: none;}
dialog.book-editor-dialog[open], dialog.chat-library-dialog[open]{display: flex; flex-direction: column; overflow: hidden;}
.book-editor-dialog > .modal-head, .chat-library-dialog > .modal-head{flex: 0 0 auto;}
.book-editor-dialog > .modal-head h2, .chat-library-dialog > .modal-head h2{min-width: 0px; overflow-wrap: anywhere;}
.book-editor-dialog > .modal-head button, .chat-library-dialog > .modal-head button{flex-shrink: 0;}
.book-editor-dialog > .modal-body, .chat-library-dialog > .modal-body{min-height: 0px; max-height: none; overflow-y: auto; overscroll-behavior: contain;}
.lore-activation-settings{margin: 16px 0px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); min-width: 0px;}
.lore-activation-settings > label{margin-top: 10px;}
.entry-delete-dialog{width: min(520px, 94vw);}
.entry-delete-dialog .modal-body{overflow-wrap: anywhere;}
.greeting-row{border: 1px solid var(--border,var(--tone-2c4262,#2c4262)); border-radius: var(--radius); padding: 14px; margin: 14px 0px; min-width: 0px;}
.greeting-row summary{cursor: pointer; font-weight: 600; margin-bottom: 12px;}
.greeting-controls{justify-content: flex-end; margin-bottom: 12px;}
.greeting-row textarea{min-height: 220px; width: 100%; resize: vertical;}
@media (max-width: 600px) {.greeting-row{padding: 10px;}}
@media (max-width: 600px) {.greeting-controls button{min-height: 44px;}}
.message .prose, .appearance-preview{font-size: var(--prose-size,14px); color: var(--prose-text,var(--tone-dce5f2,#dce5f2));}
.prose .prose-quote, .appearance-preview .prose-quote{color: var(--prose-quote,var(--tone-b2d0ff,#b2d0ff));}
.prose em, .prose i, .appearance-preview em{color: var(--prose-italic,var(--tone-a9bad4,#a9bad4));}
.portrait .portrait-profile-link{position: absolute; inset: 0px; z-index: 1; width: 100%; height: 100%; border: 0px; border-radius: 0px; background: transparent; cursor: pointer;}
.portrait .edit{z-index: 2;}
.character-name-link{padding: 0px; border: 0px; background: transparent; color: inherit; font: inherit; text-align: left; min-height: 44px;}
.character-name-link:hover{color: var(--accent);}
dialog.character-profile-dialog{width: min(1040px, 94vw);}
.character-profile-head{display: flex; align-items: center; gap: 20px; margin-bottom: 24px;}
.character-profile-head img{width: 90px; height: 120px; object-fit: cover; border-radius: var(--radius);}
.character-profile-head .tags{margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px;}
.character-profile-content{white-space: pre-wrap; font-size: var(--prose-size,14px); color: var(--prose-text,var(--tone-dce5f2,#dce5f2)); line-height: 1.8; min-width: 0px; overflow-wrap: anywhere;}
.character-profile-content:has(iframe){white-space: normal;}
.profile-actions{display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line);}
@media (max-width: 600px) {dialog.character-profile-dialog{width: 96vw;}}
@media (max-width: 600px) {.character-profile-head{gap: 12px;}}
@media (max-width: 600px) {.character-profile-head img{width: 64px; height: 86px;}}
@media (max-width: 600px) {.profile-actions button{flex: 1 1 0%;}}
dialog.book-editor-dialog{width: min(1160px, 96vw);}
dialog.book-editor-dialog[open], dialog.chat-library-dialog[open]{display: flex; flex-direction: column; overflow: hidden;}
.book-editor-dialog > .modal-head, .chat-library-dialog > .modal-head{flex: 0 0 auto;}
.book-editor-dialog > .modal-head h2, .chat-library-dialog > .modal-head h2{min-width: 0px; overflow-wrap: anywhere;}
.book-editor-dialog > .modal-head button, .chat-library-dialog > .modal-head button{flex-shrink: 0;}
.book-editor-dialog > .modal-body, .chat-library-dialog > .modal-body{min-height: 0px; max-height: none; overflow-y: auto; overscroll-behavior: contain;}
.lore-activation-settings{margin: 16px 0px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); min-width: 0px;}
.lore-activation-settings > label{margin-top: 10px;}
.entry-delete-dialog{width: min(520px, 94vw);}
.entry-delete-dialog .modal-body{overflow-wrap: anywhere;}
.book-savebar{position: sticky; top: 0px; z-index: 3; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--tone-101a2b,#101a2b); padding: 12px; border: 1px solid var(--line); border-radius: var(--radius);}
.book-savebar [data-book-status]{flex: 1 1 0%; min-width: 130px;}
.book-editor-fields{border: 0px; padding: 0px; margin: 0px; min-width: 0px;}
@media (max-width: 760px) {.book-savebar{gap: 8px;}}
@media (max-width: 760px) {.book-savebar button{min-height: 44px;}}
.tracker-summary{padding: 14px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tone-101a2b,#101a2b); line-height: 1.7;}
.tracker-summary small{color: var(--muted);}
.tabs{flex-wrap: wrap;}
.custom-calendar[hidden]{display: none;}
.custom-calendar{display: grid; gap: 14px;}
dialog.book-editor-dialog[open], dialog.chat-library-dialog[open]{display: flex; flex-direction: column; overflow: hidden;}
.book-editor-dialog > .modal-head, .chat-library-dialog > .modal-head{flex: 0 0 auto;}
.book-editor-dialog > .modal-head h2, .chat-library-dialog > .modal-head h2{min-width: 0px; overflow-wrap: anywhere;}
.book-editor-dialog > .modal-head button, .chat-library-dialog > .modal-head button{flex-shrink: 0;}
.book-editor-dialog > .modal-body, .chat-library-dialog > .modal-body{min-height: 0px; max-height: none; overflow-y: auto; overscroll-behavior: contain;}
.lore-activation-settings{margin: 16px 0px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); min-width: 0px;}
.lore-activation-settings > label{margin-top: 10px;}
.entry-delete-dialog{width: min(520px, 94vw);}
.entry-delete-dialog .modal-body{overflow-wrap: anywhere;}
.creator-tracking[open], .greeting-seed[open]{display: grid; gap: 16px;}
.creator-tracking, .greeting-seed{border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 14px 0px;}
.creator-tracking summary, .greeting-seed summary{cursor: pointer; font-weight: 600;}
.gate-row, .title-row{border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 12px 0px; display: grid; gap: 12px;}
.chat-scroll > .tracker-summary{max-width: 790px; margin: 0px auto 24px; display: flex; flex-wrap: wrap; gap: 8px 20px;}
.tracker-summary{font-size: 0.875rem;}
.story-status::before{content: ""; position: absolute; inset: 0px auto 0px 0px; width: 3px; background: linear-gradient(var(--accent),color-mix(in srgb, var(--accent) 20%, transparent)); pointer-events: none;}
.story-status-header{display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px;}
.story-status-header .eyebrow{display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 2px; color: var(--tone-a8caff,#a8caff);}
.story-status-header .icon-svg{width: 14px; height: 14px;}
.story-status-badge{font-size: 10px; letter-spacing: 0.6px; color: var(--tone-b5c9e8,#b5c9e8); border: 1px solid var(--tone-3b5373,#3b5373); border-radius: var(--radius); padding: 4px 9px; white-space: nowrap;}
.story-status-grid{display: grid; grid-template-columns: minmax(0px, 1.15fr) minmax(0px, 0.65fr) minmax(0px, 1.6fr); margin: 0px 0px 18px; gap: 18px;}
.status-cell{min-width: 0px;}
.status-cell + .status-cell{border-left: 1px solid var(--tone-304562,#304562); padding-left: 18px;}
.status-cell dt{display: flex; gap: 7px; align-items: center; text-transform: uppercase; letter-spacing: 1.6px; font-size: 9px; color: var(--tone-9db2cf,#9db2cf); margin-bottom: 8px;}
.status-cell dd{margin: 0px; color: var(--tone-e4edff,#e4edff); font-size: 14px; font-weight: 600; line-height: 1.55; overflow-wrap: anywhere;}
.status-cell > small{display: block; color: var(--tone-a0b2cc,#a0b2cc); font-size: 11px; margin-top: 4px;}
.status-cell .status-time{font-size: 22px; line-height: 1.25; font-variant-numeric: tabular-nums; letter-spacing: 1px;}
.status-time span{color: var(--tone-7194c3,#7194c3);}
.status-location dd{font-size: 12px; font-weight: 400;}
.status-affinity{padding-top: 14px; border-top: 1px solid var(--tone-304562,#304562);}
.status-affinity-heading{display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 9px; color: var(--tone-c0d4ef,#c0d4ef); font-size: 12px;}
.status-affinity-title{color: var(--tone-a0b2cc,#a0b2cc); font-size: 11px;}
.status-affinity-heading strong{font-size: 22px; color: var(--tone-d6e5ff,#d6e5ff); font-variant-numeric: tabular-nums;}
.affinity-meter{height: 6px; border-radius: 1px; overflow: hidden; background: var(--tone-050d19,#050d19); box-shadow: rgba(0, 0, 0, 0.333) 0px 1px 2px inset;}
.affinity-meter > span{display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,color-mix(in srgb, var(--accent) 65%, var(--bg)),var(--accent) 60%,color-mix(in srgb, var(--accent) 45%, var(--text))); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 20%, transparent);}
.story-status-feedback{margin-top: 14px; min-width: 0px;}
.story-status-feedback .notice{margin: 0px 0px 8px; padding: 8px 10px; font-size: 12px; line-height: 1.4;}
.story-status-actions{display: flex; flex-wrap: wrap; align-items: center; gap: 8px;}
.story-status-actions button{flex: 0 1 auto; min-width: 0px; white-space: normal;}
@media (max-width: 1200px) {.story-rail .story-status-feedback{grid-column: 1 / -1; margin-top: 6px;}
.story-rail .story-status-actions{gap: 6px;}
.story-rail .story-status-actions button{min-height: 32px; padding: 5px 9px; font-size: 11px; line-height: 1.25;}
.story-rail .story-status-feedback .notice{padding: 6px 8px; font-size: 11px; margin-bottom: 6px;}}
.story-status .status-note{margin-top: 14px; color: var(--tone-a0b2cc,#a0b2cc); font-size: 11px;}
.status-note summary{cursor: pointer;}
.status-note p{margin: 9px 0px 0px; line-height: 1.7;}
.composer-preview{min-height: 100px; line-height: 1.7;}
@media (max-width: 600px) {.story-status-grid{grid-template-columns: minmax(0px, 1fr) minmax(0px, 0.75fr); gap: 14px;}}
@media (max-width: 600px) {.status-location{grid-column: 1 / -1;}}
@media (max-width: 600px) {.status-cell.status-location{border-left: 0px; border-top: 1px solid var(--tone-304562,#304562); padding: 12px 0px 0px;}}
@media (max-width: 600px) {.status-cell dd{font-size: 13px;}}
@media (max-width: 600px) {.status-cell .status-time{font-size: 22px;}}
@media (max-width: 600px) {.story-status-header{gap: 8px;}}
@media (max-width: 600px) {.story-status-badge{font-size: 9px;}}
.story-rail{min-height: 0px; min-width: 0px; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--tone-0c1422,#0c1422); overflow: hidden;}
.story-rail[hidden]{display: none;}
.story-rail > .drawer{position: static; inset: auto; width: auto; flex: 1 1 0%; min-height: 0px; border: 0px; box-shadow: none; overflow-y: auto; padding: 18px;}
.story-rail > .story-status{flex: 0 0 auto; margin: 14px; padding: 16px; border: 1px solid var(--tone-365680,#365680); border-radius: var(--radius); position: relative; overflow: hidden;}
.story-rail .story-status-grid{grid-template-columns: minmax(0px, 1fr) minmax(0px, 0.7fr); gap: 12px; margin-bottom: 12px;}
.story-rail .status-location{grid-column: 1 / -1; border-left: 0px; border-top: 1px solid var(--tone-304562,#304562); padding: 10px 0px 0px;}
.story-rail .story-status-header{margin-bottom: 14px;}
@media (max-width: 1200px) {.chat-layout, .chat-layout.no-drawer, .chat-layout.has-status, .chat-layout.has-status.no-drawer{grid-template-columns: minmax(0px, 1fr);}}
@media (max-width: 1200px) {.story-rail{border-left: 0px; grid-row: 1; overflow: visible;}}
@media (max-width: 1200px) {.conversation{min-height: 0px;}}
@media (max-width: 1200px) {.chat-layout{grid-template-rows: auto minmax(0px, 1fr);}}
@media (max-width: 1200px) {.story-rail > .drawer{position: fixed; right: 0px; top: 78px; bottom: 0px; width: 340px; z-index: 8; border-left: 1px solid var(--line); box-shadow: rgba(0, 0, 0, 0.333) -20px 0px 60px;}}
@media (max-width: 1200px) {.story-rail > .story-status{margin: 8px 16px; padding: 10px 14px; display: grid; grid-template-columns: minmax(0px, 2fr) minmax(90px, 1fr); gap: 8px 16px;}}
@media (max-width: 1200px) {.story-rail .story-status-header{display: none;}}
@media (max-width: 1200px) {.story-rail .story-status-grid{grid-template-columns: minmax(0px, 1fr) minmax(0px, 0.6fr); gap: 5px 10px; margin: 0px;}}
@media (max-width: 1200px) {.story-rail .status-location{padding: 5px 0px 0px;}}
@media (max-width: 1200px) {.story-rail .status-affinity{border: 0px; padding-top: 0px; align-self: center;}}
@media (max-width: 1200px) {.story-rail .status-affinity-heading{flex-wrap: wrap; gap: 3px;}}
@media (max-width: 1200px) {.story-rail .error{grid-column: 1 / -1;}}
@media (max-width: 760px) {.story-rail > .drawer{top: 66px; width: min(100vw, 380px);}}
@media (max-width: 760px) {.story-rail > .story-status{margin: 6px 12px;}}
@media (max-width: 1200px) {.chat-layout > .conversation{grid-row: 2;}}
.character-collection .page-head{align-items: center; margin-bottom: 22px;}
.character-collection .page-head h1{font-size: clamp(26px, 3vw, 36px);}
.character-collection .page-head button{font-size: 13px; padding: 9px 12px; min-height: 36px;}
.collection-layout{display: grid; grid-template-columns: 130px minmax(0px, 1fr); gap: 24px; align-items: start;}
.favorite-rail{position: sticky; top: 0px; padding: 14px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tone-0d1727,#0d1727); max-height: 70dvh; overflow-y: auto;}
.favorite-rail h2{font-size: 13px; margin: 0px 0px 12px;}
.favorite-shortcut{display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 10px 4px; background: transparent; border: 0px; font-size: 11px; overflow-wrap: anywhere;}
.favorite-shortcut img{width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--tone-47648d,#47648d);}
.character-shelf{min-width: 0px; margin-bottom: 26px;}
.character-shelf header h2{font-size: 18px; margin: 0px;}
.character-shelf header p{margin: 6px 0px 12px;}
.character-row{display: flex; align-items: stretch; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; padding: 2px 2px 14px; scrollbar-color: var(--tone-47648d,#47648d) var(--tone-0a111d,#0a111d); scroll-snap-type: x;}
.character-row .character{flex: 0 0 218px; min-width: 0px; border-radius: var(--radius); scroll-snap-align: start; display: flex; flex-direction: column;}
.character-row .portrait{height: 164px; min-height: 164px; aspect-ratio: auto;}
.character-row .portrait img{height: 100%; width: 100%; object-fit: cover;}
.character-row .details{padding: 13px; display: flex; flex-direction: column; gap: 7px; flex: 1 1 0%;}
.character-row .details h2{font-size: 21px; margin: 0px;}
.character-row .character-name-link{font-size: inherit;}
.character-row .description{font-size: 12px; line-height: 1.55; min-height: 0px; height: 38px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 0px;}
.character-row .card-actions{display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto;}
.character-row .number{font-size: 9px; letter-spacing: 0.8px; padding: 4px 6px; top: 10px; left: 10px; background: var(--tone-0b1425e8,#0b1425e8);}
.character-row .visibility-public{color: var(--tone-bed7ff,#bed7ff); border: 1px solid var(--tone-50719c,#50719c);}
.character-row .favorite-toggle{position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 32px; height: 32px; background: var(--tone-081221dd,#081221dd); border: 1px solid var(--tone-486182,#486182);}
.favorite-toggle.active{color: var(--tone-a9caff,#a9caff);}
.character-row .edit{width: 32px; height: 32px; top: 10px; right: 10px;}
.publishing-actions{border-top: 1px solid var(--line); padding-top: 9px; display: flex; flex-wrap: wrap; gap: 6px;}
.publishing-actions p{flex-basis: 100%; margin: 0px; overflow-wrap: anywhere;}
.empty-shelf{width: 100%; padding: 28px 18px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); font-size: 13px;}
.review-count{margin-left: auto; background: var(--tone-243e64,#243e64); border-radius: var(--radius); padding: 1px 7px; font-size: 11px;}
@media (max-width: 760px) {.collection-layout{grid-template-columns: minmax(0px, 1fr); gap: 16px;}}
@media (max-width: 760px) {.favorite-rail{position: static; max-height: none; padding: 10px;}}
@media (max-width: 760px) {.favorite-rail h2{margin-bottom: 6px;}}
@media (max-width: 760px) {#favorite-list{display: flex; gap: 6px; overflow-x: auto;}}
@media (max-width: 760px) {.favorite-shortcut{flex: 0 0 70px; width: 70px;}}
@media (max-width: 760px) {.character-row .character{flex-basis: 205px;}}
@media (max-width: 760px) {.character-collection .page-head{gap: 12px;}}
@media (max-width: 760px) {.character-collection .page-head button{min-height: 40px;}}
@media (max-width: 760px) {.character-row .favorite-toggle, .character-row .edit{width: 40px; height: 40px;}}
.character-row .card-actions{display: flex; flex-direction: column; gap: 8px; padding-top: 8px; width: 100%;}
.character-row .card-control-grid{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 8px; width: 100%;}
.character-row .card-control-grid.single-control{grid-template-columns: minmax(0px, 1fr);}
.character-row .card-actions .card-control, .character-row .card-actions .start{min-height: 38px; border: 1px solid var(--tone-3b5477,#3b5477); border-radius: var(--radius); background: var(--tone-14253d,#14253d); padding: 8px; font-size: 12px; line-height: 1.35; width: 100%; white-space: normal; overflow-wrap: anywhere;}
.character-row .card-actions .start{background: var(--tone-1c3354,#1c3354); border-color: var(--tone-5279ad,#5279ad);}
.character-row .card-actions button:hover{background: var(--tone-274567,#274567); border-color: var(--tone-94baff,#94baff);}
@media (max-width: 760px) {.character-row .card-actions .card-control, .character-row .card-actions .start{min-height: 44px;}}
.composer-wrap{padding: 6px 14px 10px;}
.composer{padding: 6px; border-width: 1px; box-shadow: 0-2px 10px #0002,inset 0 1px 0 var(--tone-a9ccff10,#a9ccff10);}
.composer-bottom{padding: 4px 2px 0px; gap: 8px;}
.avatar-settings{border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 20px 0px; min-width: 0px;}
.avatar-settings legend{padding: 0px 7px; font-weight: 600;}
.avatar-style-preview{margin-top: 20px; max-width: 790px;}
.avatar-style-preview .message{margin: 0px;}
.avatar-style-preview .prose{font-size: 14px;}
[data-avatar-layout="whisper"] .message, [data-avatar-layout="ripple"] .message{position: relative; isolation: isolate; border: 1px solid var(--tone-365680,#365680); border-radius: var(--radius); background: var(--tone-0e1d33,#0e1d33); gap: 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 7px 20px;}
[data-avatar-layout="whisper"] .message.user, [data-avatar-layout="ripple"] .message.user{background: var(--tone-101725,#101725); border-color: var(--tone-344357,#344357);}
[data-avatar-layout="whisper"] .message > div:last-child, [data-avatar-layout="ripple"] .message > div:last-child{position: relative; min-width: 0px; background: transparent; border: 0px; box-shadow: none; padding: 18px 20px; border-radius: inherit;}
[data-avatar-layout="whisper"] .message .name, [data-avatar-layout="ripple"] .message .name{font-family: Arial, Helvetica, sans-serif; font-size: clamp(24px, 3vw, 40px); font-weight: 800; line-height: 1.15; letter-spacing: -0.8px; overflow-wrap: anywhere; color: var(--tone-f1f5ff,#f1f5ff);}
[data-avatar-layout="whisper"] .message{display: block;}
[data-avatar-layout="whisper"] .message > .message-avatar{position: absolute; inset: 0px 0px auto auto; width: 100%; height: var(--banner-height,160px); border: 0px; border-radius: 2px 2px 0px 0px; object-fit: cover; object-position: right var(--avatar-position,30%); opacity: 0.85; mask-image: linear-gradient(90deg, transparent 12%, rgba(0, 0, 0, 0.6) 50%, rgb(0, 0, 0) 85%); pointer-events: none; font-size: 60px; text-align: right; padding: 0px; justify-content: end;}
[data-avatar-layout="whisper"] .message .meta{min-height: calc(var(--banner-height,160px) - 18px); align-content: end; align-items: center; padding: 0px 0px 14px; margin: 0px 0px 12px; text-shadow: rgb(0, 0, 0) 0px 2px 8px; position: relative;}
[data-avatar-layout="ripple"] .message{display: grid; grid-template-columns: min(var(--portrait-width,160px),35%) minmax(0,1fr); align-items: start;}
[data-avatar-layout="ripple"] .message > .message-avatar{width: 100%; height: auto; aspect-ratio: 2 / 3; min-height: 100px; max-height: 440px; border: 0px; border-radius: 2px 0px 0px; object-fit: cover; object-position: 50% var(--avatar-position,30%); mask-image: linear-gradient(rgb(0, 0, 0) 72%, transparent); font-size: 36px;}
[data-avatar-layout="ripple"] .message .meta{border-bottom: 1px solid var(--tone-405470,#405470); padding-bottom: 12px; margin-bottom: 14px;}
@media (max-width: 760px) {.composer-wrap{padding: 5px 8px max(8px,env(safe-area-inset-bottom));}}
@media (max-width: 760px) {.composer{padding: 5px;}}
@media (max-width: 760px) {[data-avatar-layout="whisper"] .message, [data-avatar-layout="ripple"] .message{border-radius: var(--radius);}}
@media (max-width: 760px) {[data-avatar-layout="whisper"] .message > .message-avatar{height: min(var(--banner-height,160px),240px); border-radius: 2px 2px 0px 0px;}}
@media (max-width: 760px) {[data-avatar-layout="whisper"] .message .meta{min-height: calc(min(var(--banner-height,160px),240px) - 14px);}}
@media (max-width: 760px) {[data-avatar-layout="ripple"] .message{grid-template-columns: min(var(--portrait-width,160px),28%) minmax(0,1fr);}}
@media (max-width: 760px) {[data-avatar-layout="ripple"] .message > .message-avatar{border-radius: 2px 0px 0px;}}
@media (max-width: 760px) {[data-avatar-layout="whisper"] .message > div:last-child, [data-avatar-layout="ripple"] .message > div:last-child{padding: 14px 12px;}}
@media (max-width: 760px) {[data-avatar-layout="whisper"] .message .name, [data-avatar-layout="ripple"] .message .name{font-size: clamp(22px, 5vw, 30px);}}
.message-stat{font-size: 0.72rem; color: var(--muted); font-weight: 400; letter-spacing: 0px; text-shadow: none;}
.message .meta{flex-wrap: wrap;}
.message-paging{display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0px 0px 20px; color: var(--muted); font-size: 0.8rem;}
.message-paging button{font-size: 0.8rem; min-height: 32px; padding: 5px 10px;}
dialog.book-editor-dialog[open], dialog.chat-library-dialog[open]{display: flex; flex-direction: column; overflow: hidden;}
.book-editor-dialog > .modal-head, .chat-library-dialog > .modal-head{flex: 0 0 auto;}
.book-editor-dialog > .modal-head h2, .chat-library-dialog > .modal-head h2{min-width: 0px; overflow-wrap: anywhere;}
.book-editor-dialog > .modal-head button, .chat-library-dialog > .modal-head button{flex-shrink: 0;}
.book-editor-dialog > .modal-body, .chat-library-dialog > .modal-body{min-height: 0px; max-height: none; overflow-y: auto; overscroll-behavior: contain;}
.lore-activation-settings{margin: 16px 0px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); min-width: 0px;}
.lore-activation-settings > label{margin-top: 10px;}
.entry-delete-dialog{width: min(520px, 94vw);}
.entry-delete-dialog .modal-body{overflow-wrap: anywhere;}
.lore-picker-label{display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 8px; color: var(--text);}
.lore-dropdown{border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: 0px !important;}
.lore-dropdown > summary{cursor: pointer; color: var(--text); font-size: 0.875rem; padding: 12px !important;}
.lore-dropdown > summary:focus-visible{outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius);}
.lore-dropdown-options{max-height: 250px; overflow-y: auto; overscroll-behavior: contain; padding: 0px 12px 10px; border-top: 1px solid var(--line);}
.lore-dropdown-options label{overflow-wrap: anywhere; padding: 5px 0px;}
.conversation{min-width: 0px; min-height: 0px; overflow: hidden;}
.chat-scroll{min-height: 0px; min-width: 0px; padding: 12px max(10px, 50% - 480px) 10px; scroll-padding-bottom: 12px;}
.composer-wrap{flex: 0 0 auto; padding: 4px 10px 6px;}
.composer{max-width: 960px; padding: 4px; border-radius: var(--radius); box-shadow: none;}
.composer-bottom{padding: 2px 2px 0px; gap: 6px;}
.composer-bottom button{min-height: 34px; padding: 5px 12px; font-size: 14px;}
.composer-hint{font-size: 11px;}
.status-line{max-width: 960px; padding: 3px 6px; font-size: 12px;}
.status-line:empty{display: none;}
.connection-hint{max-width: 960px; margin: 4px auto 0px; font-size: 10px;}
.chat-date{margin: 2px 0px 10px; font-size: 10px; gap: 10px;}
.message-paging{font-size: 10px; margin-bottom: 10px; gap: 6px;}
.message{margin-bottom: 16px;}
@media (max-width: 760px) {.topbar{height: 48px; min-height: 48px; padding: 0px 10px;}}
@media (max-width: 760px) {.topbar .icon{width: 34px; min-height: 34px; padding: 7px;}}
@media (max-width: 760px) {.crumb{font-size: 12px;}}
@media (max-width: 760px) {.topbar .chat-name{max-width: 145px;}}
@media (max-width: 760px) {.story-rail > .drawer{top: 48px;}}
@media (max-width: 760px) {.chat-scroll{padding: 6px 8px 8px;}}
@media (max-width: 760px) {.story-rail > .story-status{margin: 4px 8px; padding: 6px 8px; gap: 4px 10px; border-radius: var(--radius);}}
@media (max-width: 760px) {.story-rail .story-status-grid{gap: 2px 7px;}}
@media (max-width: 760px) {.story-rail .status-cell dt{font-size: 7px; margin-bottom: 1px; letter-spacing: 0.6px;}}
@media (max-width: 760px) {.story-rail .status-cell dd{font-size: 10px; line-height: 1.35;}}
@media (max-width: 760px) {.story-rail .status-cell .status-time{font-size: 13px;}}
@media (max-width: 760px) {.story-rail .status-cell + .status-cell{padding-left: 7px;}}
@media (max-width: 760px) {.story-rail .status-cell.status-location{padding: 3px 0px 0px;}}
@media (max-width: 760px) {.story-rail .status-affinity-heading{font-size: 10px; margin-bottom: 4px; gap: 2px;}}
@media (max-width: 760px) {.story-rail .status-affinity-heading strong{font-size: 15px;}}
@media (max-width: 760px) {.story-rail .status-affinity-title{font-size: 9px;}}
@media (max-width: 760px) {.composer-wrap{padding: 3px 6px max(4px,env(safe-area-inset-bottom));}}
@media (max-width: 760px) {.composer{padding: 3px; border-radius: var(--radius);}}
@media (max-width: 760px) {.composer-bottom{justify-content: flex-end;}}
@media (max-width: 760px) {.connection-hint{display: none;}}
@media (max-width: 760px) {.chat-date{margin: 2px 0px 5px; font-size: 9px; letter-spacing: 0.8px;}}
@media (max-width: 760px) {.message-paging{margin-bottom: 6px;}}
@media (max-width: 760px) {[data-avatar-layout="whisper"] .message > .message-avatar{height: min(var(--banner-height,160px),104px,18dvh);}}
@media (max-width: 760px) {[data-avatar-layout="whisper"] .message .meta{min-height: calc(min(var(--banner-height,160px),104px,18dvh) - 8px); padding-bottom: 6px; margin-bottom: 6px;}}
@media (max-width: 760px) {[data-avatar-layout="whisper"] .message > div:last-child, [data-avatar-layout="ripple"] .message > div:last-child{padding: 8px;}}
@media (max-width: 760px) {[data-avatar-layout="whisper"] .message .name, [data-avatar-layout="ripple"] .message .name{font-size: 22px;}}
@media (max-width: 760px) {.message .meta{gap: 6px;}}
@media (max-width: 760px) {.message .role{font-size: 9px; padding: 2px 4px;}}
@media (max-height: 500px) {.connection-hint, .chat-date{display: none;}}
.character-row .card-art{position: relative; isolation: isolate; height: 300px; min-height: 300px; display: flex; flex-direction: column; overflow: hidden; background: var(--surface);}
.character-row .card-art .portrait{position: absolute; inset: 0px; height: 100%; min-height: 0px; width: 100%;}
.character-row .card-art::after{content: ""; position: absolute; inset: 0px; z-index: 1; pointer-events: none; background: linear-gradient(180deg,transparent 25%,color-mix(in srgb,var(--surface) 76%,transparent) 68%,var(--surface) 100%);}
.character-row .card-art .details{position: relative; z-index: 2; flex: 0 0 auto; margin-top: auto; padding: 50px 13px 10px; gap: 5px; pointer-events: none; text-shadow: rgb(0, 0, 0) 0px 1px 4px;}
.character-row .card-art .character-name-link{pointer-events: auto;}
.character-row .card-art .description{margin-bottom: 0px;}
.character-row .card-footer{padding: 6px 13px 13px; background: var(--surface); display: flex; flex-direction: column; flex: 1 1 0%;}
.character-row .card-footer .card-actions{width: 100%; margin-top: auto;}
@media (max-width: 760px) {.character-row .card-art{height: 290px; min-height: 290px;}}
.character-row .card-art{height: 322px; min-height: 322px;}
.character-row .card-art .details{gap: 3px; padding: 34px 13px 6px;}
.character-row .card-art .character-name-link{min-height: 30px;}
.character-row .card-art::after{background: linear-gradient(180deg,transparent 35%,color-mix(in srgb,var(--surface) 76%,transparent) 76%,var(--surface) 100%);}
.character-row .card-footer{padding: 2px 13px 10px;}
.character-row .card-footer .card-actions{gap: 5px; padding-top: 4px;}
.character-row .card-control-grid{gap: 5px;}
.character-row .card-footer .card-actions button{min-height: 30px; padding: 5px 7px; font-size: 11px; line-height: 1.2;}
@media (max-width: 760px) {.character-row .card-art{height: 312px; min-height: 312px;}}
@media (max-width: 760px) {.character-row .card-footer .card-actions button{min-height: 36px; padding: 6px; font-size: 11px;}}
.character-row{padding: 8px 8px 14px;}
.character-row .card-art .details h2{font-size: 19px;}
.character-row .character-name-link, .character-row .character-name-link:hover, .character-row .character-name-link:active{background: transparent; border-color: transparent; color: inherit; box-shadow: none; text-shadow: inherit;}
.character-row .portrait-profile-link:hover{background: transparent;}
@media (hover: hover) {.character-row .character:hover{border-color: var(--accent); box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 8%, transparent);}}
.token-breakdown{margin: 12px 0px;}
.token-breakdown > div{display: flex; justify-content: space-between; gap: 12px; margin: 5px 0px;}
.token-breakdown dd{margin: 0px; white-space: nowrap;}
.context-summary{margin-bottom: 16px;}
.prompt-excluded{border-style: dashed !important;}
.message-actions .small{font-size: 11px;}
.character-collection .page-head{padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(115deg,var(--surface),transparent); margin-bottom: 22px;}
.character-row.character-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); overflow: visible; align-items: start;}
.character-row.character-grid .character{width: 100%; min-width: 0px; max-width: none;}
.collection-tabs{margin: 12px 0px; flex-wrap: wrap;}
@media (max-width: 760px) {.character-collection .character-row.character-grid{grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 10px; padding: 4px 0px;}
.character-collection .character-row.character-grid .card-art{height: 155px; min-height: 155px;}
.character-collection .character-row.character-grid .card-heading{padding: 6px;}
.character-collection .character-row.character-grid .card-heading h2{font-size: 14px;}
.character-collection .character-row.character-grid .card-footer{padding: 7px;}
.character-collection .character-row.character-grid .card-tags{gap: 4px;}
.character-collection .character-row.character-grid .character-tag{font-size: 10px; white-space: normal; overflow-wrap: anywhere;}
.character-collection .character-row.character-grid .card-control-grid{grid-template-columns: 1fr;}
.character-collection .character-row.character-grid .card-actions button{font-size: 11px; padding: 6px;}}
@media (max-width: 340px) {.character-collection .character-row.character-grid{grid-template-columns: minmax(0px, 1fr);}}
.character-collection .toolbar{justify-content: flex-start; gap: 12px; flex-wrap: wrap;}
.character-collection .toolbar > .muted{margin-left: auto;}
.character-shelf > header{padding: 12px 4px; border-bottom: 1px solid var(--line); margin-bottom: 10px;}
.character-row{padding-top: 14px; padding-bottom: 22px;}
.character-row .character:focus-within{border-color: rgba(255, 255, 255, 0.533); box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 9px;}
.card-tags{display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line);}
.character-tag{display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--line); border-radius: var(--radius); padding: 3px 6px; font-size: 11px; line-height: 1.25; color: var(--text); max-width: 100%; overflow-wrap: anywhere;}
.character-tag-icon{display: inline-flex; align-items: center; justify-content: center; flex: 0 0 1em; width: 1em; height: 1em; line-height: 1;}
.character-tag-icon svg{display: block; width: 1em; height: 1em; flex: 0 0 auto;}
.character-tag-label{min-width: 0px;}
.tag-dropdown{position: relative; min-width: 155px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);}
.tag-dropdown summary{cursor: pointer; padding: 11px 14px; font-size: 13px;}
.tag-options{padding: 10px; max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 7px;}
.tag-options label{display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; margin: 0px; padding: 4px 0px; cursor: pointer; min-height: 32px; text-align: left; width: 100%;}
.tag-options input[type="checkbox"]{width: 16px; height: 16px; min-height: 0px; margin: 0px; padding: 0px; flex: 0 0 16px; align-self: center;}
.tag-options .character-tag{flex: 0 1 auto; min-width: 0px;}
.toolbar .tag-options{position: absolute; top: 100%; left: 0px; z-index: 20; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); width: 250px; box-shadow: rgba(0, 0, 0, 0.4) 0px 12px 26px;}
@media (max-width: 760px) {.character-collection .page-head{padding: 16px;}}
@media (max-width: 760px) {.character-collection .toolbar > .muted{margin-left: 0px;}}
@media (max-width: 760px) {.toolbar .tag-options{max-width: calc(-64px + 100vw);}}
dialog.guide-dialog{width: min(1180px, 94vw); max-width: 1180px; height: 90dvh; max-height: 90dvh; padding: 0px; overflow: hidden;}
dialog.guide-dialog[open]{display: flex; flex-direction: column;}
.guide-dialog .modal-head{flex: 0 0 auto; padding: 15px 22px; gap: 16px;}
.guide-dialog .modal-head h2{font-size: 20px; margin: 0px;}
.guide-dialog .modal-body{flex: 1 1 0%; min-height: 0px; padding: 0px; overflow: hidden; display: flex;}
.guide-frame{border: 0px; width: 100%; height: 100%; display: block; background: rgb(11, 17, 27);}
.guide-launch{white-space: nowrap;}
@media (max-width: 760px) {dialog.guide-dialog{width: 96vw; height: 94dvh; max-height: 94dvh;}}
@media (max-width: 760px) {.guide-dialog .modal-head{padding: 12px 14px;}}
@media (max-width: 760px) {.guide-dialog .modal-head h2{font-size: 16px;}}
@media (max-width: 760px) {.guide-launch{padding: 6px 8px; min-height: 36px; font-size: 12px;}}
@media (max-width: 760px) {.guide-launch .icon-svg{width: 16px; height: 16px;}}
.character-row .card-heading{padding: 10px 13px; background: linear-gradient(120deg,color-mix(in srgb,var(--accent) 16%,var(--surface)),var(--surface));}
.character-row .card-heading h2{margin: 0px; font-size: 19px; line-height: 1.3;}
.character-row .card-heading .character-name-link{min-height: 30px; max-width: 100%; overflow-wrap: anywhere; justify-content: flex-start;}
.character-row .card-art::after{display: block; inset: auto 0px 0px; height: 24%; background: linear-gradient(to bottom,transparent,var(--surface));}
.character-row .card-footer{padding: 10px 13px;}
.card-creator{overflow-wrap: anywhere;}
.card-divider{height: 1px; flex-shrink: 0; margin: 10px 0px; background: linear-gradient(90deg,transparent,var(--line) 20%,var(--accent) 50%,var(--line) 80%,transparent);}
.character-row .card-footer .card-actions{margin-top: 0px; padding-top: 0px;}
.character-row .card-tags{position: relative; border: 0px; margin-top: 12px; padding-top: 12px;}
.character-row .card-tags::before{content: ""; position: absolute; top: 0px; left: 0px; right: 0px; height: 1px; background: linear-gradient(90deg,transparent,var(--line) 20%,var(--accent) 50%,var(--line) 80%,transparent);}
.character-row .publishing-actions{border: 0px; padding: 0px; margin: 0px 0px 10px; min-width: 0px; flex-shrink: 0;}
.character-row .unpublished-notice{display: flex; align-items: flex-start; gap: 5px; width: 100%; padding: 9px 8px; border-top: 0px; border-right: 0px; border-bottom: 0px; border-image: none; border-left: 2px solid var(--accent); border-radius: 0px; background: linear-gradient(100deg,color-mix(in srgb,var(--accent) 20%,var(--surface)),var(--surface)); color: var(--text); font-size: 11px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere;}
.character-row .unpublished-notice > span:last-child{min-width: 0px;}
.content:has(.collection-wide){padding: 18px 24px 28px;}
.wide-limit.collection-wide{max-width: none; width: 100%; min-width: 0px;}
.character-collection .page-head{padding: 12px 18px; margin-bottom: 14px; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius); align-items: center;}
.character-collection .page-head h1{font-size: 26px; line-height: 1.15; letter-spacing: -0.6px; margin: 5px 0px;}
.character-collection .page-head p{font-size: 13px; margin: 0px; line-height: 1.4;}
.character-collection .page-head .eyebrow{font-size: 10px; letter-spacing: 1.5px;}
.character-collection .toolbar{margin-bottom: 12px; gap: 10px;}
.creator-filter{display: flex; align-items: center; gap: 7px; margin: 0px; font-size: 12px; color: var(--muted);}
.creator-filter select{width: 180px; max-width: 100%; min-height: 40px; margin: 0px; padding: 8px 10px; color: var(--text);}
.collection-layout{grid-template-columns: 100px minmax(0px, 1fr); gap: 16px;}
.character-shelf{margin-bottom: 12px;}
.character-shelf > header{padding: 4px 4px 0px; margin-bottom: 0px; border: 0px;}
.character-shelf > header h2{font-size: 16px;}
.character-shelf > header p{margin: 3px 0px 4px; font-size: 12px;}
.character-row{gap: 12px; padding: 7px 5px 10px;}
.character-row .character{flex-basis: 190px; border-radius: var(--radius);}
.character-row .card-art{height: 190px; min-height: 190px; flex-shrink: 0;}
.character-row .card-heading{padding: 6px 10px;}
.character-row .card-heading h2{font-size: 17px;}
.character-row .card-heading .character-name-link{min-height: 26px;}
.character-row .card-footer{padding: 7px 10px;}
.character-row .card-creator{font-size: 12px;}
.character-row .card-divider{margin: 7px 0px;}
.character-row .card-tags{margin-top: 8px; padding-top: 8px; gap: 4px;}
.character-row .card-footer .card-actions button{min-height: 28px; padding: 5px; font-size: 11px;}
@media (max-width: 760px) {.content:has(.collection-wide){padding: 12px;}}
@media (max-width: 760px) {.character-collection .page-head{padding: 12px; align-items: stretch;}}
@media (max-width: 760px) {.character-collection .page-head h1{font-size: 23px;}}
@media (max-width: 760px) {.collection-layout{grid-template-columns: minmax(0px, 1fr); gap: 12px;}}
@media (max-width: 760px) {.creator-filter{max-width: 100%;}}
@media (max-width: 760px) {.character-row .character{flex-basis: 190px;}}
@media (max-width: 760px) {.character-row .card-footer .card-actions button{min-height: 36px;}}
.character-collection .toolbar{align-items: center;}
.character-collection .toolbar .search input, .character-collection .toolbar .creator-filter select{height: 44px; min-height: 44px; margin: 0px;}
.character-collection .toolbar .creator-filter{display: flex; align-items: center; margin: 0px; padding: 0px;}
.character-collection .toolbar .tag-dropdown{margin: 0px;}
.character-collection .toolbar .tag-dropdown summary{box-sizing: border-box; min-height: 44px; padding: 12px 14px; line-height: 20px;}
.glitch-toggle{align-items: center; gap: 8px; margin-bottom: 16px; display: flex !important; flex-direction: row !important;}
.glitch-toggle input{width: auto;}
#glitch-panel{display: none;}
@media (min-width: 1001px) and (hover: hover) and (pointer: fine) {.chat-layout.has-glitch, .chat-layout.has-glitch.no-drawer{grid-template-columns: minmax(0px, 1fr) 300px;}}
@media (min-width: 1001px) and (hover: hover) and (pointer: fine) {#glitch-panel{display: flex; flex-direction: column; min-height: 240px; height: clamp(260px, 45dvh, 460px); flex-shrink: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin: 10px; overflow: hidden;}}
@media (min-width: 1001px) and (hover: hover) and (pointer: fine) {.glitch-live{min-height: 28px; padding: 4px 7px; font-size: 10px; letter-spacing: 1px; border: 0px; background: rgb(50, 23, 25); color: rgb(255, 105, 105); border-radius: var(--radius);}}
@media (min-width: 1001px) and (hover: hover) and (pointer: fine) {.glitch-live span{animation: 1.8s ease-in-out 0s infinite normal none running glitch-pulse; color: rgb(255, 73, 73);}}
@media (min-width: 1001px) and (hover: hover) and (pointer: fine) {#glitch-posts{overflow: auto; min-height: 0px; flex: 1 1 0%; padding: 8px 12px; overflow-wrap: anywhere;}}
@media (min-width: 1001px) and (hover: hover) and (pointer: fine) {.glitch-post{font-size: 12px; line-height: 1.55; margin: 0px 0px 12px;}}
@media (min-width: 1001px) and (hover: hover) and (pointer: fine) {.glitch-post strong{font-weight: 600;}}
@media (min-width: 1001px) and (hover: hover) and (pointer: fine) {#glitch-status{font-size: 11px; padding: 0px 12px; margin: 6px 0px;}}
@media (prefers-reduced-motion: reduce) {.glitch-live span{animation: auto ease 0s 1 normal none running none; text-shadow: rgb(255, 50, 50) 0px 0px 5px;}}
@media (min-width: 1001px) and (hover: hover) and (pointer: fine) {.chat-layout.has-glitch > .story-rail{overflow-y: auto;}}
#glitch-reply{resize: vertical; min-height: 48px; max-height: 100px; margin: 0px; font-size: 12px; padding: 8px;}
.conversation-avatar{width: 38px; height: 38px; flex: 0 0 38px; object-fit: cover; object-position: center 25%; border-radius: var(--radius); border: 1px solid var(--line);}
.avatar-fallback{display: inline-flex; align-items: center; justify-content: center; background: var(--panel); font-size: 12px; color: var(--accent);}
.recent .conversation-avatar{width: 26px; height: 26px; flex-basis: 26px;}
.recent button{flex-shrink: 0; display: flex; align-items: center; gap: 9px;}
.conversation-item > .grow{min-width: 0px;}
.conversation-item h3{overflow-wrap: anywhere;}
.character-profile-dialog .modal-head h2{margin-right: auto;}
.character-profile-dialog .modal-head{gap: 8px;}
.favorite-rail > h2{text-align: center;}
.extension-card{margin-bottom: 16px;}
.extension-card > summary{cursor: pointer; font-size: 20px; font-weight: 600; line-height: 1.6;}
.extension-card > summary .badge{vertical-align: middle; font-weight: 400;}
.extension-body{padding-top: 16px;}
.admin-writing-presets, .admin-tags{margin-bottom: 24px;}
.admin-tag-row{display: flex; align-items: center; gap: 2px; max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 2px;}
.admin-tag-row > button:first-of-type{min-width: 0px;}
.admin-tag-row .icon{flex-shrink: 0;}
.tag-drag-handle{cursor: grab; color: var(--muted); padding: 4px;}
.admin-tag-row[draggable]:hover{border-color: var(--accent);}
.admin-preset-list, .admin-tag-list{overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; padding: 4px; border-radius: var(--radius);}
.admin-preset-list{max-height: min(48dvh, 360px); gap: 6px;}
.admin-preset-list .list-item{flex: 0 0 auto; padding: 7px 10px; gap: 12px; border-radius: var(--radius);}
.admin-preset-list h3{min-width: 0px; margin: 0px; font-size: 0.875rem; line-height: 1.4; overflow-wrap: anywhere;}
.admin-preset-actions{display: flex; flex: 0 0 auto; gap: 6px;}
.admin-preset-actions button, .admin-list-actions button{min-height: 32px; padding: 5px 10px; border-radius: var(--radius); font-size: 0.8125rem;}
.admin-list-actions{padding-top: 16px;}
.admin-tag-list{display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; max-height: min(32dvh, 220px); margin-top: 12px;}
.admin-tag-list > button{min-height: 32px; max-width: 100%; padding: 5px 8px;}
.admin-tag-list .character-tag{white-space: normal; overflow-wrap: anywhere;}
@media (pointer: coarse) {.admin-preset-actions button, .admin-list-actions button, .admin-tag-list > button{min-height: 44px;}}
@media (max-width: 420px) {.admin-preset-list .list-item{flex-wrap: wrap; gap: 6px;}
.admin-preset-actions{margin-left: auto;}}
.admin-user-list{max-height: min(50dvh, 420px); overflow: auto; overscroll-behavior: contain; padding: 4px;}
.admin-connections{display: block;}
@supports (-webkit-touch-callout: none) {.chat-layout textarea, #glitch-reply, form[data-form="edit-message"] textarea{font-size: 16px;}
.composer #composer-text{font-size: max(16px, var(--composer-size, 14px));}}
.character-prompt{margin: 16px 0px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); min-width: 0px;}
.character-prompt textarea:disabled{opacity: 0.55; cursor: not-allowed;}
.character-prompt small{color: var(--muted);}
.profile-builder{margin: 16px 0px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius);}
.profile-builder > summary{cursor: pointer; font-weight: 600;}
.profile-builder-fields{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px; margin: 16px 0px;}
.profile-builder-wide{grid-column: 1 / -1;}
.profile-template-preview, .profile-source-preview{margin: 16px 0px; min-width: 0px;}
.profile-builder input[type="color"]{height: 40px; padding: 4px;}
@media (max-width: 520px) {.profile-builder-fields{grid-template-columns: minmax(0px, 1fr);}}
.account-images{grid-auto-rows: 225px; max-height: 464px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;}
.account-images .panel{min-width: 0px; margin: 0px;}
.background-library{max-height: 420px; overflow-y: auto; overscroll-behavior: contain; padding: 4px;}
.background-library button{display: block; padding: 6px;}
.background-library button[aria-pressed="true"]{outline: 2px solid var(--accent);}
.background-choice-preview{width: 100%; max-height: 140px; object-fit: cover; border-radius: var(--radius);}
@supports (background-clip: text) or (-webkit-background-clip: text) {.prose .prose-quote:not(.prose-inherit), .appearance-preview .prose-quote:not(.prose-inherit){background-image: var(--quote-image, none); background-clip: text; color: var(--quote-fill, var(--prose-quote));}}
.message .prose, .appearance-preview{font-family: var(--chat-font,var(--seb-prose-font));}
.chat-import-sample{max-height: 260px; overflow: auto; border: 1px solid var(--line); padding: 12px;}
.chat-import-sample p{white-space: pre-wrap; overflow-wrap: anywhere;}
.story-tools-panel{display: grid; gap: 20px;}
.story-tools-panel > p{margin: 0px;}
.story-tools-panel button{width: 100%; min-height: 44px;}
.story-tools-panel div > p{margin: 8px 0px 0px;}
.bookmark-dot{display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 1px solid; vertical-align: middle; margin-right: 7px; flex-shrink: 0;}
.story-result, .story-memory{padding: 16px; margin: 14px 0px; border: 1px solid var(--border,#34465c); border-radius: 6px; overflow-wrap: anywhere;}
.story-result{border-left: 5px solid var(--border,#34465c);}
.story-memory-text{white-space: pre-wrap; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; line-height: 1.6; max-height: 450px; overflow: auto;}
.story-source{padding: 10px 0px; border-bottom: 1px solid var(--border,#34465c);}
.story-jump{outline: rgb(141, 182, 255) solid 2px; outline-offset: 3px;}
[data-story-results]{max-height: 60vh; overflow: auto;}
[data-story-form] input[type="color"]{min-height: 40px; width: 100%; padding: 3px;}
.summary-chat-choices{max-height: 240px; overflow: auto; padding: 4px 8px;}
.summary-chat-choices label{overflow-wrap: anywhere;}
.summary-chat-choices input{flex-shrink: 0;}
.extension-tool-card h3{margin-top: 0px;}
.extension-tool-card{margin: 12px 0px;}
#story-extensions-panel details > summary{cursor: pointer; font-weight: 600;}
#story-extensions-panel details > form{margin-top: 16px;}
.story-extension-dialog{width: min(640px, -32px + 100vw); max-height: 90dvh;}
.story-extension-dialog .modal-body{overflow-y: auto; min-height: 0px;}
.story-extension-dialog .modal-head{flex-shrink: 0;}
.story-extension-dialog[open]{display: flex; flex-direction: column;}
.extension-dialog-actions{position: sticky; bottom: -1px; background: var(--panel,#101b2d); padding: 12px 0px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; z-index: 2;}
#extension-record-list{overflow-wrap: anywhere; margin-top: 16px;}
#extension-record-list .panel{margin-bottom: 12px;}
@media (max-width: 600px) {.story-extension-dialog{margin: 0px; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0px; padding-bottom: env(safe-area-inset-bottom);}
.story-extension-dialog .modal-body{flex: 1 1 0%;}
.story-extension-dialog input, .story-extension-dialog textarea, .story-extension-dialog select{font-size: 16px;}
.story-extension-dialog button{min-height: 44px;}}
.story-extension-dialog .modal-body{display: flex; flex-direction: column;}
.story-extension-dialog .modal-body > form{flex: 1 1 0%;}
.story-extension-dialog .extension-dialog-actions{margin-top: auto; flex-shrink: 0;}
[data-story-extension-card] [data-extension-control]{padding-top: 16px;}
.story-record-actions{display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0px;}
#story-extensions-panel form > details{margin: 16px 0px;}
#story-extensions-panel form > details > label{margin-top: 16px;}
#story-extensions-panel > details{margin-top: 20px;}
.story-record-actions button{min-height: 44px;}
.story-extension-dialog .modal-body > label{margin-bottom: 12px;}
.review-feedback{padding: 12px; border: 1px solid; margin-block: 12px; overflow-wrap: anywhere;}
.toast.review-nothing, .review-feedback.review-nothing{background: rgb(214, 238, 219); color: rgb(23, 59, 37); border-color: rgb(160, 200, 171);}
.toast.review-logged, .review-feedback.review-logged{background: rgb(36, 91, 59); color: rgb(236, 255, 242); border-color: rgb(80, 136, 100);}
.toast.review-warning, .review-feedback.review-warning{background: rgb(243, 223, 155); color: rgb(73, 55, 9); border-color: rgb(201, 168, 65);}
#story-extensions-panel > form[data-story-ext-form="settings"] + .panel{margin-top: 24px;}
.review-feedback, .toast.review-nothing, .toast.review-logged, .toast.review-warning{font-size: 0.875rem; line-height: 1.5; text-align: center;}
#story-extensions-panel .story-review-controls{margin-top: 24px; padding: 16px;}
.story-review-controls h4{margin: 0px 0px 12px;}
.story-review-buttons{display: grid; grid-template-columns: minmax(0px, 1fr); gap: 12px; margin: 16px 0px;}
.story-review-buttons button{width: 100%; min-height: 44px; padding: 12px 14px; margin: 0px; justify-content: center; text-align: center; white-space: normal;}
button.review-latest{background: rgb(99, 49, 71); border-color: rgb(206, 129, 159); color: rgb(255, 241, 246);}
button.review-latest:hover:not(:disabled){background: rgb(125, 61, 90);}
button.review-all{background: rgb(73, 48, 100); border-color: rgb(173, 139, 213); color: rgb(247, 240, 255);}
button.review-all:hover:not(:disabled){background: rgb(96, 63, 130);}
.story-review-buttons button:focus-visible{outline: currentcolor solid 2px; outline-offset: 3px;}
:root{--action-purple-bg: #463454; --action-purple-line: #a08abb; --action-purple-text: #f2e7ff; --action-gold-bg: #453e2d; --action-gold-line: #b8a475; --action-gold-text: #fff0c6; --action-teal-bg: #233f44; --action-teal-line: #6caaa9; --action-teal-text: #d9f5ee;}
button{font-size: 12px; min-height: 34px; padding: 7px 12px; line-height: 1.4; text-align: center; justify-content: center;}
:where(.drawer, .panel, dialog, .composer, .topbar, .card-actions, .form-actions, .story-tools-panel, .extension-dialog-actions) button{font-size: 12px; min-height: 34px; padding: 7px 12px; line-height: 1.4; text-align: center; justify-content: center;}
.form-actions, .row.wrap, .extension-dialog-actions{gap: 10px;}
.form-actions > button{flex: 1 1 120px;}
.drawer .tabs{gap: 5px; padding-bottom: 14px; margin-bottom: 18px;}
.drawer .tabs button{min-height: 30px; padding: 6px 8px; font-size: 11px;}
.drawer h3{font-size: 15px; line-height: 1.5;}
.drawer p{font-size: 12px; line-height: 1.8;}
.drawer label, .drawer summary{font-size: 12px;}
.drawer .panel{padding: 15px;}
.drawer button[type="submit"]{margin-top: 12px;}
.drawer .stack{display: grid; gap: 10px;}
.story-record-actions{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 10px; margin: 16px 0px;}
.story-record-actions button{min-width: 0px; width: 100%; min-height: 34px; padding: 8px 7px; font-size: 11px; text-align: center; white-space: normal;}
.story-review-buttons{gap: 10px;}
.story-review-buttons button{min-height: 34px; padding: 9px 10px; font-size: 12px;}
#story-extensions-panel .story-review-controls{margin-top: 22px;}
.summary-actions{margin-top: 18px;}
.summary-actions button{width: 100%;}
button[data-story-ext="add"], button[data-action="summary-create"]{background: var(--action-purple-bg); border: 1px solid var(--action-purple-line); color: var(--action-purple-text); box-shadow: none; font-weight: 500;}
button[data-story-ext="records"], button[data-action="summary-review"], button[data-action="review-memories"]{background: var(--action-gold-bg); border: 1px solid var(--action-gold-line); color: var(--action-gold-text); box-shadow: none;}
button[data-story-ext="director"], button[data-action="summary-run"], button[data-action="retrieval-index"]{background: var(--action-teal-bg); border: 1px solid var(--action-teal-line); color: var(--action-teal-text); box-shadow: none;}
button:is([data-story-ext="add"], [data-story-ext="records"], [data-story-ext="director"], [data-action="summary-create"], [data-action="summary-run"]):hover:not(:disabled){filter: brightness(1.13);}
.message-actions{gap: 9px;}
.message-actions button{min-height: 28px; padding: 4px 7px; font-size: 10px;}
@media (max-width: 760px) {.story-record-actions{gap: 9px;}
.drawer .tabs{gap: 4px;}
.drawer .tabs button{padding: 6px 7px;}}
@media (pointer: coarse) {button, .story-record-actions button, .story-review-buttons button, .drawer button, .form-actions button{min-height: 40px;}
.message-actions button{min-height: 36px;}}
@media (prefers-reduced-transparency: reduce) {:is(.sidebar, .topbar, .drawer, .story-rail, .composer){backdrop-filter: none !important;}}
.summary-actions + p{margin-top: 12px;}
.character-row .card-footer .card-actions{gap: 8px;}
.character-row .card-footer .card-actions button{min-height: 32px; padding: 6px 8px; font-size: 11px; line-height: 1.4; text-align: center; justify-content: center;}
.character-row .card-control-grid{gap: 8px;}
.character-row .card-footer .card-actions .start{display: flex; justify-content: center; gap: 10px;}
.character-row .card-tags{gap: 5px; margin-top: 10px; padding-top: 10px;}
@media (pointer: coarse) {.character-row .card-footer .card-actions button{min-height: 40px;}}
.character-row.character-grid{grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));}
@media (max-width: 600px) {.character-row.character-grid{grid-template-columns: repeat(2, minmax(0px, 1fr));}}
@media (max-width: 340px) {.character-row.character-grid{grid-template-columns: minmax(0px, 1fr);}}
.account-appearance{margin-bottom: 24px;}
.account-appearance h2{font-size: 21px; margin-bottom: 20px;}
.account-appearance .appearance-grid{display: grid; gap: 16px; margin-bottom: 18px; align-items: start;}
.account-appearance .appearance-grid.three{grid-template-columns: repeat(3, minmax(0px, 1fr));}
.account-appearance .appearance-grid.two{grid-template-columns: repeat(2, minmax(0px, 1fr));}
.account-appearance label{font-size: 12px; min-width: 0px;}
.account-appearance :is(input:not([type="checkbox"]), select){min-height: 36px; height: 36px; padding: 7px 10px; font-size: 12px; min-width: 0px; width: 100%;}
.account-appearance input[type="color"]{padding: 5px;}
.account-appearance label small{font-size: 11px; line-height: 1.6; margin-top: 6px;}
.account-appearance .appearance-note{font-size: 11px; line-height: 1.7; color: var(--muted); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 2px solid var(--accent); padding: 10px 12px; margin: 6px 0px 22px; background: color-mix(in srgb,var(--accent) 5%,transparent);}
.account-appearance .avatar-settings{margin: 22px 0px; padding: 16px; min-width: 0px;}
.account-appearance legend{font-size: 13px; font-weight: 600; padding: 0px 7px;}
.account-appearance .font-settings .appearance-grid:last-child{margin-bottom: 0px;}
.account-appearance .composer-preview{margin-top: 8px;}
.account-appearance .form-actions{gap: 12px;}
.recovery-actions{display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px;}
.recovery-actions button{padding: 9px 14px;}
@media (max-width: 650px) {.account-appearance .appearance-grid.three, .account-appearance .appearance-grid.two{grid-template-columns: minmax(0px, 1fr); gap: 14px;}
.account-appearance .avatar-settings{padding: 12px;}
.recovery-actions button{flex: 1 1 180px;}}
.account-appearance .avatar-style-preview + .appearance-preview{margin-top: 24px;}
.account-grid > .panel{display: flex; flex-direction: column;}
.account-grid > .panel > form{display: flex; flex-direction: column; flex: 1 1 0%;}
.account-grid > .panel > form > button{margin-top: auto; min-height: 36px; width: 100%; font-size: 12px; padding: 8px 12px;}
.account-grid > .panel > form > .error{margin-bottom: 14px;}
.account-grid form[data-form="delete-account"] > button.danger{background: none rgb(180, 35, 50); color: rgb(255, 255, 255); border: 1px solid rgb(220, 86, 98);}
.account-grid form[data-form="delete-account"] > button.danger:hover:not(:disabled){background: rgb(150, 28, 41); color: rgb(255, 255, 255);}
@media (pointer: coarse) {.account-grid > .panel > form > button{min-height: 40px;}}
.admin-page > .panel, .admin-page .admin-connections > .panel{padding: 20px;}
.admin-page h2{font-size: 20px; line-height: 1.4; margin-bottom: 12px;}
.admin-page h3{font-size: 14px; line-height: 1.5;}
.admin-page :is(p, label){font-size: 12px; line-height: 1.7;}
.admin-page :is(small, .small){font-size: 11px; line-height: 1.65;}
.admin-page button{font-size: 11px; min-height: 34px; padding: 7px 11px;}
.admin-page :is(input, select, textarea){font-size: 12px;}
.admin-page .admin-list-actions{gap: 10px;}
@media (pointer: coarse) {.admin-page button{min-height: 40px;}}
.reviews-page h2{font-size: 20px; line-height: 1.4;}
.reviews-page h3{font-size: 14px; line-height: 1.5;}
.reviews-page :is(p, label, summary){font-size: 12px; line-height: 1.7;}
.reviews-page :is(.small, small){font-size: 11px; line-height: 1.65;}
.reviews-page button{font-size: 11px; min-height: 34px; padding: 7px 11px;}
.reviews-page [data-safety-action="scan"] + p{margin-top: 16px;}
.reviews-page .safety-review-heading{display: flex; align-items: center; flex-wrap: wrap; gap: 10px;}
.reviews-page .safety-review-heading > .badge{display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 28px; margin: 0px; padding: 0px 9px; font-size: 11px; line-height: 1; vertical-align: middle;}
@media (pointer: coarse) {.reviews-page button{min-height: 40px;}}
.extensions-page .page-head h1{font-size: 24px; line-height: 1.4;}
.extensions-page .extension-card{padding: 20px;}
.extensions-page .extension-card > summary{font-size: 16px; line-height: 1.5;}
.extensions-page :is(p, label, summary, legend){font-size: 12px; line-height: 1.7;}
.extensions-page :is(.small, small, .badge){font-size: 11px;}
.extensions-page button{font-size: 11px; min-height: 34px; padding: 7px 11px;}
.extensions-page :is(input:not([type="checkbox"]), select, textarea){font-size: 12px;}
.extensions-page .extension-body{padding-top: 14px;}
.extensions-page :is(.form-actions, .lv-controls){gap: 10px;}
.extensions-page [data-glitch-form] > button[type="submit"], .extensions-page [data-lovense-settings]{margin-top: 16px;}
@media (pointer: coarse) {.extensions-page button{min-height: 40px;}}
:root [data-avatar-layout="whisper"] .message > div:last-child{background: transparent; border: 0px; box-shadow: none;}
:root [data-avatar-layout="whisper"] .message > .message-avatar{opacity: 1; mask-image: linear-gradient(90deg, transparent 12%, rgba(0, 0, 0, 0.6) 50%, rgb(0, 0, 0) 85%);}
:root [data-avatar-layout="whisper"] .message > div:last-child::before{display: none;}
:root [data-avatar-layout="whisper"] .message.user > div:last-child{background: transparent; border: 0px; box-shadow: none;}
@font-face { font-family: "Marilush Elegant"; src: url("/fonts/GreatVibes-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Marilush Gothic"; src: url("/fonts/UnifrakturMaguntia-Book.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
.chat-identity{display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-width: 0px;}
:root .message .chat-identity > .name.chat-display-name, :root .name-live-preview .chat-identity > .name.chat-display-name{position: relative; isolation: isolate; font-family: var(--name-font); font-size: var(--name-size); font-weight: var(--name-weight); color: var(--name-color); text-transform: var(--name-case,none); text-shadow: var(--name-shadow,none); line-height: 1.25; letter-spacing: normal; min-width: 0px; overflow-wrap: anywhere;}
.chat-display-name::after{content: attr(data-glow-text); position: absolute; inset: 0px; z-index: -1; pointer-events: none; color: transparent; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; text-shadow: none; filter: blur(4px); opacity: var(--name-gradient-opacity,0);}
:root .chat-identity > .role{display: inline-flex; align-items: center; justify-content: center; align-self: center; flex-shrink: 0; box-sizing: border-box; height: 24px; min-height: 24px; padding: 0px 7px; margin: 0px; font: 10px / 1 Arial, sans-serif; letter-spacing: 0.5px;}
.name-option-checks{display: flex; gap: 20px; flex-wrap: wrap; margin: 16px 0px;}
.name-option-checks .check{display: flex; align-items: center; gap: 7px;}
.name-settings h3{font-size: 14px; margin: 22px 0px 12px;}
.name-preview-message{border: 1px solid var(--line); padding: 16px; margin-top: 12px; background: var(--glass-surface,var(--surface));}
.name-preview-message .meta{display: flex; align-items: center; margin: 0px;}
.name-preview-message .name{font: 500 19px / 1.25 Arial, sans-serif; color: var(--text);}
.name-preview-message p{margin: 16px 0px 0px;}
.name-settings [hidden]{display: none !important;}
@media (max-width: 650px) {.chat-identity{gap: 8px;}
.name-option-checks{gap: 14px;}}
.ui-color-grid{display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 14px;}
.look-actions{display: flex; gap: 10px; flex-wrap: wrap;}
.look-actions button{flex: 1 1 0%; min-height: 34px; font-size: 11px;}
.ui-color-settings .check{margin-bottom: 18px;}
.ui-color-settings [hidden]{display: none !important;}
.saved-looks [data-look-status]:empty{display: none;}
:root.custom-ui{--bg: var(--custom-bg); --surface: var(--custom-surface); --panel: var(--custom-surface); --text: var(--custom-text); --muted: var(--custom-muted); --line: var(--custom-border); --accent: var(--custom-accent); --glass-edge: var(--custom-border);}
:root.custom-ui body{color: var(--custom-text); background: var(--custom-bg) !important;}
:root.custom-ui :is(.sidebar, .topbar, .drawer, .composer, .panel, .page-head:not(.library-banner), .list-item, .tracker-summary, .character-row .character){color: var(--custom-text); background: var(--custom-reflection),var(--custom-surface-fill) !important; border-color: var(--custom-border) !important;}
:root.custom-ui[data-ui-finish="standard"] :is(.sidebar, .topbar, .drawer, .composer, .panel, .page-head:not(.library-banner), .list-item, .tracker-summary, .character-row .character){box-shadow: none; backdrop-filter: none !important;}
:root.custom-ui .conversation:not(.has-bg){background: var(--custom-bg) !important;}
:root.custom-ui :is(fieldset, .name-preview-message, .appearance-note){border-color: var(--custom-border) !important;}
:root.custom-ui :is(input:not([type="checkbox"]), select, textarea){background: var(--custom-input) !important; color: var(--custom-text) !important; border-color: var(--custom-border) !important;}
:root.custom-ui input[type="checkbox"]{accent-color: var(--custom-accent);}
:root.custom-ui button:not(.danger):where(:not(.portrait-profile-link):not([data-profile-palette]):not(.profile-featured-grid button)){background: var(--custom-button) !important; color: var(--custom-text) !important; border-color: var(--custom-border) !important;}
:root.custom-ui button.primary:not(.profile-featured-grid button){background: color-mix(in srgb,var(--custom-accent) 23%,var(--custom-input)) !important; border-color: var(--custom-accent) !important;}
:root.custom-ui .appearance-note{background: color-mix(in srgb,var(--custom-accent) 6%,transparent) !important; color: var(--custom-muted) !important; border-left-color: var(--custom-accent) !important;}
:root.custom-ui .message > div:last-child, :root.custom-ui .name-preview-message{background: var(--custom-reflection),var(--custom-surface-fill) !important; border-color: var(--custom-border) !important;}
:root.custom-ui :is([data-avatar-layout="whisper"], [data-avatar-layout="ripple"]) .message{background: var(--custom-surface) !important; border-color: var(--custom-border) !important;}
:root.custom-ui :is([data-avatar-layout="whisper"], [data-avatar-layout="ripple"]) .message > div:last-child{background: transparent !important;}
:root.custom-ui .message > div:last-child::before{display: none;}
:root.custom-ui .message .role{border-color: var(--custom-border); color: var(--custom-muted);}
@media (max-width: 650px) {.ui-color-grid{grid-template-columns: repeat(2, minmax(0px, 1fr));}}
@media (prefers-reduced-transparency: reduce) {:root.custom-ui :is(.sidebar, .topbar, .drawer, .composer, .panel, .page-head:not(.library-banner), .list-item, .tracker-summary, .message > div:last-child){background: var(--custom-surface) !important; backdrop-filter: none !important;}
:root.custom-ui :is([data-avatar-layout="whisper"], [data-avatar-layout="ripple"]) .message > div:last-child{background: transparent !important;}}
.ui-color-settings .ui-color-grid + .appearance-note{margin-top: 18px;}
:root.custom-ui .message > div.message-avatar{color: var(--custom-text); border-color: var(--custom-border); background: var(--custom-button) !important;}
.book-entry-disabled-label{display: none; font-size: 11px; line-height: 1.5; margin: 9px 0px 2px 32px; color: var(--muted);}
.book-entry-row.is-disabled > .book-entry-disabled-label{display: block;}
:root.custom-ui .book-entry-row{background: var(--custom-reflection),var(--custom-surface-fill); border-color: var(--custom-border);}
:root.custom-ui .book-savebar{background: var(--custom-surface); border-color: var(--custom-border);}
:root.custom-ui .book-entry-row.is-disabled{border-left-width: ; border-left-color: ; border-style: dashed dashed dashed solid;}
:root.custom-ui .book-entry-row.is-disabled > .book-entry-controls{opacity: 1; filter: none;}
:root.custom-ui .book-entry-row.is-disabled > .book-entry-disabled-label, :root.custom-ui form[data-form="book-editor"][data-dirty="true"] [data-book-status]{color: var(--custom-text); font-weight: 600;}
:root.custom-ui form[data-form="book-editor"][data-dirty="true"] .book-savebar{border-left: 3px solid var(--custom-accent);}
:root.custom-ui .book-editor-dialog :is(.lore-counting-settings, .lore-entry-tokens){background: var(--custom-surface); border-color: var(--custom-border); color: var(--custom-muted);}
.creator-tracking > :is([data-action="load-calendar"], [data-action="save-calendar"]){display: block; margin: 12px 0px 20px; min-height: 34px; padding: 8px 12px; font-size: 12px;}
.creator-tracking > :is([data-action="add-gate"], [data-action="add-title"]){margin: 12px 0px 20px;}
.creator-tracking .gate-row > [data-action="remove-tracking-row"]{margin-top: 14px;}
.creator-tracking button{background: color-mix(in srgb,var(--accent) 12%,var(--surface)); border-color: color-mix(in srgb,var(--accent) 40%,var(--line)); color: var(--text);}
:root .creator-tracking [data-action="remove-tracking-row"]{background: rgb(66, 36, 43) !important; border-color: rgb(148, 83, 97) !important; color: rgb(255, 229, 233) !important;}
.creator-tracking button:hover:not(:disabled){filter: brightness(1.15);}
.creator-tracking button:focus-visible{outline: 2px solid var(--accent); outline-offset: 3px;}
@media (pointer: coarse) {.creator-tracking button{min-height: 40px;}}
.reviews-page .safety-findings{margin-top: 16px; border: 1px solid var(--border); border-radius: 4px; overflow: hidden;}
.reviews-page .safety-findings > summary{padding: 12px 14px; cursor: pointer; font-weight: 600;}
.reviews-page .safety-findings > summary .badge{margin-left: 8px; font-weight: 400;}
.reviews-page .safety-findings-scroll{max-height: min(440px, 60vh); overflow-y: auto; overscroll-behavior-y: contain; padding: 0px 12px; scrollbar-gutter: stable;}
.reviews-page .safety-findings .safety-finding{margin: 0px; padding: 12px 0px; border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 1px solid var(--border); border-radius: 0px; background: transparent; box-shadow: none;}
.reviews-page .safety-finding > summary{cursor: pointer; overflow-wrap: anywhere;}
.reviews-page .safety-finding > summary .badge{display: inline-block; margin-left: 6px;}
.reviews-page .safety-findings > .form-actions{margin: 0px; padding: 0px 12px;}
.reviews-page .safety-findings > .form-actions:has(button){padding: 12px; border-top: 1px solid var(--border);}
.item-list .list-item > img.avatar-mini{display: block; box-sizing: border-box; object-fit: cover; object-position: center center; overflow: hidden;}
.item-list .list-item > img.persona-list-avatar{width: 104px; height: 140px; flex: 0 0 104px; border-radius: 4px;}
.persona-list.item-list{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 16px;}
.persona-list > .list-item{min-width: 0px; display: grid; grid-template-columns: 104px minmax(0px, 1fr); gap: 12px 16px; padding: 18px; align-items: start;}
.persona-list > .list-item > .persona-list-avatar{grid-area: 1 / 1 / span 2;}
.persona-list > .list-item > .grow{grid-column: 2; min-width: 0px; overflow-wrap: anywhere;}
.persona-list > .list-item > .row{grid-column: 2; justify-content: flex-end;}
.persona-list > .list-item:not(:has(.persona-list-avatar)) > :is(.grow, .row){grid-column: 1 / -1;}
.persona-list > .empty{grid-column: 1 / -1;}
@media (max-width: 760px) {.persona-list.item-list{grid-template-columns: minmax(0px, 1fr);}}
.persona-list > .list-item > .grow{align-self: center;}
.persona-list > .list-item h3{margin: 0px; color: var(--text); font-size: clamp(20px, 2vw, 26px); font-weight: 700; line-height: 1.25; letter-spacing: 0.02em; text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent);}
.persona-list > .list-item h3::after{content: ""; display: block; width: 44px; max-width: 100%; height: 2px; margin-top: 12px; background: var(--accent); border-radius: 2px; box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent);}
.persona-list > .list-item{border-radius: 12px; grid-template-rows: 1fr 1fr; gap: 10px 20px; background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 72%), var(--surface);}
.persona-list > .list-item > .persona-list-avatar{border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.133) 0px 4px 14px;}
.persona-list > .list-item > .grow{align-self: end;}
.persona-list > .list-item h3{font-size: clamp(21px, 2vw, 27px); letter-spacing: 0px; text-shadow: none;}
.persona-list > .list-item h3::after{display: none;}
.persona-list > .list-item > .row{justify-content: flex-start; align-self: start; gap: 8px;}
.persona-list > .list-item > .row button{width: auto; min-height: 36px; height: auto; padding: 7px 10px; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; border-radius: 6px;}
.persona-list .persona-action > span{display: inline; white-space: nowrap;}
.persona-list > .list-item > .row button svg{width: 15px; height: 15px;}
@media (max-width: 400px) {.persona-list > .list-item{padding: 14px; column-gap: 14px;}}
.authenticator-preview{margin-top: 24px;}
.authenticator-heading{display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap;}
.authenticator-heading h2{margin-bottom: 8px;}
.authenticator-heading p{margin-top: 0px;}
.authenticator-status{padding: 7px 12px; border: 1px solid var(--line); border-radius: 20px; font-size: 12px; white-space: nowrap;}
.authenticator-setup{margin: 20px 0px; border: 1px solid var(--line); border-radius: 8px; padding: 16px;}
.authenticator-setup > summary{cursor: pointer; font-weight: 600; padding: 4px;}
.authenticator-setup > summary:focus-visible{outline: currentcolor solid 2px; outline-offset: 4px;}
.authenticator-steps{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 20px; margin-top: 24px;}
.authenticator-steps h3{font-size: 15px; margin: 12px 0px 8px;}
.authenticator-step{display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; font-size: 13px;}
.authenticator-preview-note{border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 0px;}
@media (max-width: 760px) {.authenticator-steps{grid-template-columns: 1fr; gap: 12px;}
.authenticator-heading{gap: 6px;}}
[data-avatar-layout] .message.user{--avatar-position: var(--avatar-user-position,30%);}
.avatar-preview-pair{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 18px; margin-top: 20px;}
.avatar-preview-column{min-width: 0px;}
.avatar-preview-column > h3{font-size: 13px; margin: 0px 0px 10px;}
.avatar-preview-pair .avatar-style-preview{margin-top: 0px; max-width: 100%; min-width: 0px;}
.avatar-preview-pair .meta{flex-wrap: wrap; overflow-wrap: anywhere;}
.avatar-preview-pair + .appearance-preview{margin-top: 24px;}
@media (max-width: 760px) {.avatar-preview-pair{grid-template-columns: minmax(0px, 1fr);}}
.avatar-preview-stage{min-width: 0px; overflow: hidden;}
.avatar-preview-stage .avatar-style-preview{transform-origin: left top;}
.story-layout-settings{font-size: 12px; gap: 12px !important;}
.story-settings-tag{display: block; font: 9px / 1.5 Arial; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 14px;}
.story-layout-settings > label:first-of-type{margin-bottom: 16px;}
.story-layout-settings label{font-size: 11px; line-height: 1.5; min-width: 0px;}
.story-pair{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px; align-items: start;}
.story-pair > div{min-width: 0px;}
.story-layout-settings :is(select, input:not([type="checkbox"])){min-width: 0px; width: 100%; font-size: 11px; min-height: 34px; height: 34px; padding: 6px 8px; margin-top: 6px;}
.story-layout-settings select{text-overflow: ellipsis;}
.story-layout-settings button, .story-footer button{font-size: 11px; min-height: 34px; padding: 7px 9px; line-height: 1.45;}
.story-help{margin-top: 5px;}
.story-help-toggle{background: transparent !important; border: 0px !important; color: var(--text) !important; padding: 2px 0px !important; min-height: 25px !important; font-size: 10px !important;}
.story-help-toggle:focus-visible{outline: 1px solid var(--accent); outline-offset: 2px;}
.story-note{color: var(--muted); padding: 9px 10px; border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 2px solid var(--line); margin: 10px 0px 12px; font-size: 10px !important; line-height: 1.65 !important;}
.story-help .story-note{margin-top: 4px;}
.story-help [hidden]{display: none !important;}
.story-divider{border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 1px solid var(--line); margin: 6px 0px;}
.story-auto-books{margin: 3px 0px;}
.story-auto-books h3{font-size: 12px; margin: 0px 0px 7px;}
.story-auto-books p{margin: 0px; font-size: 10px !important; line-height: 1.7 !important;}
.story-layout-settings .lorebook-dropdown{font-size: 11px;}
.story-uploads > label{display: flex; flex-direction: column; justify-content: space-between; align-self: stretch;}
.story-uploads input[type="file"]{font-size: 9px; padding: 4px; min-height: 34px; height: auto;}
.story-uploads input::file-selector-button{font: 10px Arial; color: var(--text); border: 1px solid var(--line); padding: 5px; margin-right: 4px;}
.story-image-button, .story-save{width: 100%;}
.story-upload-thumbnails{display: flex; gap: 10px;}
.story-upload-thumbnails:empty{display: none;}
.story-layout-settings .story-avatar-note, .story-layout-settings .story-background-note{margin-top: 10px; margin-bottom: 12px;}
.story-upload-thumbnails img{width: 64px; height: 64px; object-fit: cover; margin-top: 10px; border: 1px solid var(--line);}
.story-footer{margin-top: 10px;}
.story-footer button{height: 100%; margin: 0px;}
.story-settings-feedback:empty{display: none;}
.story-settings-feedback{font-size: 10px; color: var(--muted); margin-top: 8px;}
.story-layout-settings [data-custom-scenario][hidden]{display: none !important;}
.writing-layout-settings{font-size: 11px;}
.writing-layout-settings .writing-box{border: 1px solid var(--line); margin: 0px 0px 14px; padding: 14px; min-width: 0px;}
.writing-layout-settings h3, .writing-layout-settings .writing-system > summary{line-height: 1.5; font-weight: 600; color: var(--text); font-size: 14px !important; margin: 0px 0px 12px !important;}
.writing-token-panel h3 span{font-size: 11px; color: var(--text); font-weight: 400;}
.writing-layout-settings .writing-system > summary{cursor: pointer; margin: 0px !important;}
.writing-system[open] > .writing-inner{margin-top: 14px;}
.writing-layout-settings form, .writing-inner{gap: 12px !important;}
.writing-layout-settings label{line-height: 1.5; min-width: 0px; font-size: 11px !important;}
.writing-layout-settings :is(input:not([type="checkbox"]), select, textarea){width: 100%; min-width: 0px; padding: 6px 7px; min-height: 34px; margin-top: 6px; font-size: 11px !important;}
.writing-layout-settings textarea{min-height: 95px;}
.writing-pair, .writing-layout-settings .form-grid{grid-template-columns: repeat(2, minmax(0px, 1fr)); align-items: start; display: grid !important; gap: 12px !important;}
.writing-three{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 6px; margin-top: 10px;}
.writing-layout-settings button{line-height: 1.45; min-height: 34px; padding: 7px 6px; display: flex; align-items: center; justify-content: center; text-align: center; border-color: var(--line); color: var(--text); font-size: 10px !important;}
.writing-layout-settings .danger{border-color: var(--line) !important; color: var(--text) !important;}
.writing-layout-settings .primary{border-color: var(--line);}
.writing-layout-settings .writing-refresh{width: 100%; margin-top: 12px;}
.writing-note{padding: 9px 10px; border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 2px solid var(--line); margin: 8px 0px 10px; color: var(--text) !important; font-size: 10px !important; line-height: 1.65 !important;}
.writing-layout-settings small.writing-note{display: block;}
.writing-layout-settings .writing-help > button{border: 0px; color: var(--text); min-height: 25px; padding: 2px 0px; justify-content: flex-start; background: transparent !important;}
.writing-help [hidden]{display: none !important;}
.writing-layout-settings .writing-subsection{margin-top: 16px; border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 1px solid var(--line); padding-top: 12px;}
.writing-subsection > summary{font-weight: 600; cursor: pointer; font-size: 12px !important;}
.writing-subbody{display: flex; flex-direction: column; gap: 10px; margin-top: 14px;}
.writing-subbody .check{display: flex; align-items: center; gap: 8px; font-size: 10px !important;}
.writing-subbody .check input{flex-shrink: 0;}
.writing-layout-settings .token-readout{padding: 12px 0px 14px; display: flex; flex-direction: column; gap: 4px;}
.token-readout strong{font: 600 34px / 1.15 Consolas, monospace; letter-spacing: -1px; color: var(--text);}
.token-readout > span{font: 9px Consolas, monospace; letter-spacing: 2px; color: var(--text);}
.token-meter{height: 3px; overflow: hidden; margin-bottom: 14px;}
.token-meter i{display: block; height: 100%; min-width: 2px; transition: width 0.4s;}
.writing-breakdown{display: grid; gap: 7px; margin: 0px 0px 14px;}
.writing-breakdown > div{display: flex; align-items: center; justify-content: space-between; gap: 8px;}
.writing-breakdown dt{font-size: 10px; color: var(--text);}
.writing-breakdown dd{margin: 0px;}
.writing-layout-settings code{font-style: normal; font-variant: tabular-nums; font-size-adjust: none; font-language-override: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: 1.5; font-family: Consolas, monospace; display: inline-block; padding: 0px 4px; border: 1px solid var(--line); color: var(--text);}
.token-facts{padding-left: 23px;}
.token-facts li + li{margin-top: 7px;}
.writing-bottom{margin-bottom: 12px;}
.writing-bottom button{height: 100%; align-self: stretch; margin: 0px !important;}
.writing-settings-status{font-size: 10px; color: var(--text);}
.writing-layout-settings .writing-box > label:has([name="preset_id"]){font-size: 0px !important;}
.writing-layout-settings button:focus-visible{outline: 2px solid var(--line); outline-offset: 2px;}
@media (prefers-reduced-motion: reduce) {.token-meter i{transition: none;}}
.writing-layout-settings .token-readout{padding-top: 0px;}
.writing-layout-settings .writing-system > summary{padding: 0px;}
.writing-layout-settings .writing-system[open] > .writing-inner{margin-top: 12px;}
.writing-layout-settings .writing-lore-scanning .check{min-height: 26px; margin: 0px;}
.memory-layout-settings{font-size: 11px;}
.memory-intro{padding: 14px; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top-color: var(--line); margin-bottom: 20px; position: relative;}
.memory-intro-title{display: flex; gap: 9px; align-items: flex-start;}
.memory-intro-title svg{width: 17px; height: 17px; flex-shrink: 0; color: var(--text); margin-top: 2px;}
.memory-layout-settings .memory-intro h3{line-height: 1.5; color: var(--text); font-size: 13px !important; margin: 0px !important;}
.memory-layout-settings .memory-intro p{line-height: 1.7; color: var(--text); font-size: 10px !important; margin: 10px 0px 0px !important;}
.memory-layout-settings form{gap: 16px !important;}
.memory-layout-settings label{line-height: 1.5; min-width: 0px; font-size: 11px !important;}
.memory-layout-settings label.check{display: flex; gap: 8px; align-items: flex-start; min-height: 26px; margin: 0px;}
.memory-layout-settings .check input{margin-top: 2px; flex-shrink: 0;}
.memory-auto{margin-bottom: 8px;}
.memory-layout-settings :is(input:not([type="checkbox"]), select, textarea){min-height: 34px; padding: 6px 8px; min-width: 0px; width: 100%; margin-top: 6px; font-size: 11px !important;}
.memory-layout-settings textarea{min-height: 150px; line-height: 1.6;}
.memory-pair{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px; align-items: start;}
.memory-connections > label{display: flex; flex-direction: column; align-self: stretch; justify-content: space-between;}
.memory-connections select{height: 34px; text-overflow: ellipsis;}
.memory-note{padding: 10px 11px; margin: 7px 0px 0px; border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 2px solid var(--line); font-size: 10px !important; line-height: 1.7 !important; color: var(--text) !important;}
.memory-policy{margin-top: 12px;}
.memory-layout-settings code{font: 10px Consolas, monospace; border: 1px solid var(--line); padding: 1px 4px; color: var(--text);}
.memory-help > button{text-align: left; margin-top: 5px; background: transparent !important; border: 0px !important; min-height: 25px !important; padding: 3px 0px !important; font-size: 10px !important; color: var(--text) !important;}
.memory-help [hidden]{display: none !important;}
.memory-divider{border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 1px solid var(--line); margin: 4px 0px;}
.memory-layout-settings button:not(.memory-help button){line-height: 1.45; min-height: 36px; padding: 8px 9px; text-align: center; display: flex; align-items: center; justify-content: center; border-color: var(--line); color: var(--text); font-size: 11px !important;}
.memory-layout-settings button.primary{border-color: var(--line);}
.memory-save{width: 100%;}
.memory-actions{margin-top: 12px; align-items: stretch;}
.memory-actions button{width: 100%; height: 100%; margin: 0px !important;}
.memory-layout-settings .memory-reset{border-color: var(--line) !important; color: var(--text) !important;}
.memory-reset-help > .memory-help > button{display: block; margin-left: auto;}
.memory-book-status, .memory-settings-status{margin: 14px 0px 0px; font-size: 10px !important; line-height: 1.7 !important; color: var(--text) !important;}
.memory-settings-status:empty, .memory-layout-settings .error:empty{display: none;}
.memory-layout-settings button:focus-visible{outline: 2px solid var(--line); outline-offset: 2px;}
.tracker-layout-settings{font-size: 11px;}
.tracker-settings-intro{padding: 14px; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top-color: var(--line); margin-bottom: 20px;}
.tracker-settings-title{display: flex; gap: 9px; align-items: center;}
.tracker-settings-title svg{width: 17px; height: 17px; color: var(--text); flex-shrink: 0;}
.tracker-layout-settings h3{line-height: 1.5; color: var(--text); font-size: 13px !important; margin: 0px !important;}
.tracker-layout-settings .tracker-settings-intro p{line-height: 1.7; color: var(--text); font-size: 10px !important; margin: 10px 0px 0px !important;}
.tracker-layout-settings form{gap: 12px !important;}
.tracker-layout-settings label{line-height: 1.5; font-size: 11px !important;}
.tracker-layout-settings select{min-height: 34px; padding: 6px 8px; width: 100%; margin-top: 6px; font-size: 11px !important;}
.tracker-layout-settings button.primary{display: flex; align-items: center; justify-content: center; width: 100%; min-height: 36px; padding: 8px 10px; border-color: var(--line); color: var(--text); margin-top: 4px; font-size: 11px !important;}
.tracker-settings-help > button{background: transparent !important; border: 0px !important; min-height: 25px !important; padding: 2px 0px !important; font-size: 10px !important; color: var(--text) !important;}
.tracker-settings-note{padding: 10px 11px; margin: 7px 0px 0px; border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 2px solid var(--line); font-size: 10px !important; line-height: 1.7 !important; color: var(--text) !important;}
.tracker-settings-help [hidden]{display: none !important;}
.tracker-settings-status{font-size: 10px; color: var(--text); margin-top: 12px;}
.tracker-settings-status:empty, .tracker-layout-settings .error:empty{display: none;}
.tracker-layout-settings button:focus-visible{outline: 2px solid var(--line); outline-offset: 2px;}
.retrieval-layout-settings{font-size: 11px;}
.retrieval-intro{padding: 14px; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top-color: var(--line); margin-bottom: 20px;}
.retrieval-layout-settings h3{line-height: 1.5; color: var(--text); font-size: 13px !important; margin: 0px 0px 10px !important;}
.retrieval-layout-settings .retrieval-intro p{color: var(--text); font-size: 10px !important; line-height: 1.7 !important; margin: 0px !important;}
.retrieval-layout-settings form{gap: 12px !important;}
.retrieval-layout-settings label{line-height: 1.5; min-width: 0px; font-size: 11px !important;}
.retrieval-layout-settings label.check{display: flex; align-items: flex-start; gap: 8px; min-height: 26px; margin: 0px 0px 6px;}
.retrieval-layout-settings label.check input{margin-top: 2px; flex-shrink: 0;}
.retrieval-layout-settings input:not([type="checkbox"]){width: 100%; min-height: 34px; padding: 6px 8px; margin-top: 6px; font-size: 11px !important;}
.retrieval-layout-settings button{line-height: 1.45; min-height: 36px; padding: 8px 10px; border-color: var(--line); color: var(--text); display: flex; justify-content: center; align-items: center; font-size: 11px !important;}
.retrieval-layout-settings button.primary{width: 100%; border-color: var(--line);}
.retrieval-layout-settings .retrieval-help > button{justify-content: flex-start; background: transparent !important; border: 0px !important; color: var(--text) !important; padding: 2px 0px !important; min-height: 25px !important; font-size: 10px !important;}
.retrieval-help [hidden]{display: none !important;}
.retrieval-note{padding: 9px 10px; border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 2px solid var(--line); font-size: 10px !important; line-height: 1.7 !important; color: var(--text) !important; margin: 8px 0px 12px !important;}
.retrieval-layout-settings .retrieval-index-panel{border: 1px solid var(--line); padding: 14px !important; margin-top: 20px !important;}
.retrieval-index-status{color: var(--text); font-size: 11px !important; line-height: 1.7 !important; margin: 0px 0px 14px !important;}
.retrieval-index-status code{font: 12px Consolas, monospace; display: inline-block; border: 1px solid var(--line); padding: 2px 5px; color: var(--text);}
.retrieval-layout-settings [data-action="retrieval-index"]{max-width: 100%; flex: 0 0 auto; align-self: stretch; display: flex !important; width: 100% !important; margin: 12px 0px 4px !important;}
.retrieval-layout-settings button:disabled{opacity: 0.5; cursor: not-allowed;}
.retrieval-settings-status{font-size: 10px; color: var(--text);}
.retrieval-settings-status:empty, .retrieval-layout-settings .error:empty{display: none;}
.retrieval-layout-settings button:focus-visible{outline: 2px solid var(--line); outline-offset: 2px;}
.summary-layout-settings .memory-note, .summary-editor-settings .memory-note{border-top-color:  !important; border-top-style:  !important; border-top-width:  !important; border-right-color:  !important; border-right-style:  !important; border-right-width:  !important; border-bottom-color:  !important; border-bottom-style:  !important; border-bottom-width:  !important; border-image-source:  !important; border-image-slice:  !important; border-image-width:  !important; border-image-outset:  !important; border-image-repeat:  !important; border-left: 2px solid var(--line) !important; color: var(--text) !important;}
.summary-layout-settings > label{display: block; margin-bottom: 16px;}
.summary-layout-settings .summary-actions{padding-top: 16px; border-top: 1px solid var(--line); gap: 12px !important; margin: 0px 0px 16px !important;}
.summary-layout-settings .summary-actions button{width: 100%; margin: 0px !important;}
.summary-update-row{align-items: stretch;}
.summary-layout-settings .summary-reset{border-color: var(--line) !important; color: var(--text) !important;}
.summary-layout-settings .summary-actions details{border: 1px solid var(--line); padding: 12px; font-size: 11px;}
.summary-layout-settings .summary-actions summary{cursor: pointer; font-weight: 600;}
.summary-layout-settings .summary-actions details p{font-size: 10px; line-height: 1.7; margin: 12px 0px 0px;}
.summary-settings-status{font-size: 10px; color: var(--text);}
.summary-settings-status:empty{display: none;}
.summary-editor-settings{gap: 16px !important;}
.summary-editor-settings .memory-note{display: block;}
.summary-editor-settings fieldset{padding: 14px; border-color: var(--line);}
.summary-editor-settings legend{font-size: 12px;}
.summary-editor-settings .summary-chat-choices{margin-top: 12px; display: grid; gap: 8px;}
.summary-editor-settings .form-actions button{flex: 1 1 0%;}
.tools-layout-settings{display: flex; flex-direction: column; gap: 16px;}
.tools-layout-settings .memory-intro{margin-bottom: 4px;}
.tools-layout-settings > div:not(.tools-search-row){padding-top: 16px; border-top: 1px solid var(--line);}
.tools-layout-settings button{width: 100%; margin: 0px !important;}
.tools-search-row{align-items: start;}
.tools-layout-settings .memory-note{margin-top: 10px !important;}
.tools-layout-settings .tools-search-row > div{min-width: 0px;}
.summary-layout-settings [data-action="summary-remove"]{border-color: var(--line) !important; color: var(--text) !important;}
.extension-layout-settings{font-size: 11px;}
.extension-layout-settings > .memory-note{margin: 12px 0px !important;}
.extension-layout-settings > .memory-intro{margin-bottom: 16px;}
.extension-layout-settings .story-record-actions, .extension-layout-settings .story-review-buttons{grid-template-columns: repeat(2, minmax(0px, 1fr)); display: grid !important; gap: 12px !important; margin: 16px 0px !important;}
.extension-layout-settings button{width: 100%; margin: 0px !important;}
.extension-layout-settings .story-record-actions button, .extension-layout-settings .story-review-buttons button{height: 100%; min-width: 0px;}
.extension-layout-settings form{padding-top: 16px; border-top: 1px solid var(--line); margin-top: 16px;}
.extension-layout-settings details.panel, .extension-layout-settings .story-review-controls{margin: 0px; padding: 14px !important; border: 1px solid var(--line) !important;}
.extension-layout-settings details > summary{font-size: 12px; font-weight: 600; cursor: pointer; margin: 0px;}
.extension-layout-settings details[open] > summary{margin-bottom: 14px;}
.extension-layout-settings details > label{display: block; margin-top: 14px;}
.extension-layout-settings details > .check{display: flex; margin-top: 14px;}
.extension-layout-settings .story-review-controls{margin-top: 20px !important;}
.extension-layout-settings h4{font-size: 12px; line-height: 1.5; margin: 0px 0px 12px;}
.extension-layout-settings [data-story-ext="add"]{border-color: var(--line) !important; color: var(--text) !important;}
.extension-layout-settings [data-story-ext="records"]{border-color: var(--line) !important; color: var(--text) !important;}
.extension-layout-settings button:disabled{opacity: 0.5; cursor: not-allowed;}
.extension-layout-settings .memory-note{font-size: 10px !important; line-height: 1.7 !important;}
.extension-layout-settings .extension-dialog-actions{display: flex; gap: 12px;}
.extension-layout-settings .extension-dialog-actions button{flex: 1 1 0%;}
.extension-layout-settings .row.wrap{gap: 8px;}
.extension-layout-settings [data-story-preset]{width: auto; flex: 1 1 40%; font-size: 10px !important;}
.extension-settings-status{line-height: 1.7; color: var(--text); font-size: 10px !important;}
.extension-settings-status:empty{display: none;}
:root{--cs-panel: color-mix(in srgb,var(--surface) 94%,transparent); --cs-note: color-mix(in srgb,var(--accent) 6%,var(--surface)); --cs-edge: color-mix(in srgb,var(--accent) 65%,var(--line)); --cs-text: var(--text); --cs-muted: var(--muted); --cs-button: color-mix(in srgb,var(--accent) 12%,var(--surface)); --cs-primary: color-mix(in srgb,var(--accent) 20%,var(--surface)); --cs-add: color-mix(in srgb,#448a6e 24%,var(--surface)); --cs-view: color-mix(in srgb,#886bb1 24%,var(--surface)); --cs-warn: color-mix(in srgb,#be8f45 20%,var(--surface)); --cs-danger: color-mix(in srgb,#be405b 26%,var(--surface)); --cs-glow: color-mix(in srgb,var(--accent) 30%,transparent);}
:root.custom-ui{--cs-panel: var(--custom-surface-fill); --cs-note: color-mix(in srgb,var(--custom-accent) 6%,var(--custom-surface-fill)); --cs-button: var(--custom-button); --cs-primary: color-mix(in srgb,var(--custom-accent) 23%,var(--custom-input));}
:is(.story-layout-settings, .writing-layout-settings, .memory-layout-settings, .tracker-layout-settings, .retrieval-layout-settings){color: var(--cs-text);}
:is(.memory-intro, .tracker-settings-intro, .retrieval-intro, .writing-layout-settings .writing-box){color: var(--cs-text); background: var(--cs-panel) !important; border-color: var(--line) !important;}
:is(.memory-intro, .tracker-settings-intro, .retrieval-intro){border-top-color: var(--cs-edge) !important;}
:is(.writing-layout-settings, .memory-layout-settings, .tracker-layout-settings, .retrieval-layout-settings) :is(h3, h4, summary){color: var(--cs-text) !important;}
:is(.story-note, .writing-note, .memory-note, .tracker-settings-note, .retrieval-note), .summary-layout-settings .memory-note, .summary-editor-settings .memory-note{background: var(--cs-note) !important; border-top-color:  !important; border-right-color:  !important; border-bottom-color:  !important; border-left-color: var(--cs-edge) !important; color: var(--cs-muted) !important;}
:is(.memory-intro, .tracker-settings-intro, .retrieval-intro) p{color: var(--cs-muted) !important;}
:is(.memory-intro-title, .tracker-settings-title) svg{color: var(--cs-edge);}
:is(.story-layout-settings, .story-footer, .writing-layout-settings, .memory-layout-settings, .tracker-layout-settings, .retrieval-layout-settings) button:not(.danger){background: var(--cs-button); border-color: var(--line); color: var(--cs-text);}
:is(.story-layout-settings, .writing-layout-settings, .memory-layout-settings, .tracker-layout-settings, .retrieval-layout-settings) button.primary{background: var(--cs-primary); border-color: var(--cs-edge); color: var(--cs-text);}
.story-uploads input::file-selector-button{background: var(--cs-button); border-color: var(--line); color: var(--cs-text);}
:is(.story-help, .writing-help, .memory-help, .tracker-settings-help, .retrieval-help) > button{background: transparent !important; border: 0px !important; color: var(--cs-edge) !important;}
:root.custom-ui :is(.story-help, .writing-help, .memory-help, .tracker-settings-help, .retrieval-help) > button{background: transparent !important; color: var(--accent) !important;}
:is(.memory-reset, .summary-reset){background: var(--cs-warn) !important; border-color: color-mix(in srgb,#be8f45 60%,var(--line)) !important; color: var(--cs-text) !important;}
.writing-layout-settings .danger, .summary-layout-settings [data-action="summary-remove"]{background: var(--cs-danger) !important; border-color: color-mix(in srgb,#be405b 65%,var(--line)) !important; color: var(--cs-text) !important;}
.extension-layout-settings [data-story-ext="add"], :root.custom-ui .extension-layout-settings [data-story-ext="add"]{background: var(--cs-add) !important; border-color: color-mix(in srgb,#537f70 65%,var(--line)) !important; color: var(--cs-text) !important;}
.extension-layout-settings [data-story-ext="records"], :root.custom-ui .extension-layout-settings [data-story-ext="records"]{background: var(--cs-view) !important; border-color: color-mix(in srgb,#79698e 65%,var(--line)) !important; color: var(--cs-text) !important;}
:is(.retrieval-layout-settings .retrieval-index-panel, .extension-layout-settings details.panel, .extension-layout-settings .story-review-controls, .summary-layout-settings .summary-actions details){background: var(--cs-panel) !important; border-color: var(--line) !important;}
:is(.writing-layout-settings, .memory-layout-settings, .retrieval-layout-settings) code{background: var(--cs-note); border-color: var(--line); color: var(--cs-text);}
.token-readout strong{color: var(--cs-text); text-shadow: 0 0 16px var(--cs-glow);}
.token-readout > span, .writing-breakdown dt, .writing-token-panel h3 span, .memory-book-status{color: var(--cs-muted) !important;}
.token-meter{background: var(--line);}
.token-meter i{background: linear-gradient(90deg,var(--cs-edge),var(--accent)); box-shadow: 0 0 9px var(--cs-glow);}
:is(.story-layout-settings, .writing-layout-settings, .memory-layout-settings, .tracker-layout-settings, .retrieval-layout-settings) button:disabled{opacity: 0.5; cursor: not-allowed;}
:is(.story-layout-settings, .writing-layout-settings, .memory-layout-settings, .tracker-layout-settings, .retrieval-layout-settings) button:focus-visible{outline: 2px solid var(--accent); outline-offset: 2px;}
.drawer .tabs.conversation-tabs{display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: 6px;}
.drawer .tabs.conversation-tabs [data-tab]{grid-column: span 4; min-width: 0px; width: 100%; margin: 0px; padding-left: 4px; padding-right: 4px; justify-content: center;}
.drawer .tabs.conversation-tabs :is([data-tab="story"], [data-tab="writing"], [data-tab="tracker"]){grid-row: 1;}
.drawer .tabs.conversation-tabs :is([data-tab="retrieval"], [data-tab="memory"], [data-tab="summary"], [data-tab="tools"]){grid-area: 2 / span 3;}
.drawer .tabs.conversation-tabs :is([data-tab="scene"], [data-tab="knowledge"], [data-tab="inventory"]){grid-row: 3;}
:root .extension-layout-settings button.review-latest{background: rgb(99, 49, 71) !important; border-color: rgb(206, 129, 159) !important; color: rgb(255, 241, 246) !important;}
:root .extension-layout-settings button.review-latest:hover:not(:disabled){background: rgb(125, 61, 90) !important;}
:root .extension-layout-settings button.review-all{background: rgb(73, 48, 100) !important; border-color: rgb(173, 139, 213) !important; color: rgb(247, 240, 255) !important;}
:root .extension-layout-settings button.review-all:hover:not(:disabled){background: rgb(96, 63, 130) !important;}
:is(.story-help, .writing-help, .memory-help, .tracker-settings-help, .retrieval-help) > button, :root.custom-ui :is(.story-help, .writing-help, .memory-help, .tracker-settings-help, .retrieval-help) > button{color: var(--cs-muted) !important;}
.writing-layout-settings .writing-bottom{align-items: stretch;}
.writing-layout-settings .writing-bottom button{height: auto; min-height: 34px; align-self: stretch;}
.memory-reasoning-controls{border: 1px solid var(--cs-edge,var(--line)); border-radius: 6px; padding: 12px; margin: 12px 0px 18px; background: var(--cs-panel);}
.memory-reasoning-controls > summary{cursor: pointer; font-weight: 600; margin-bottom: 12px;}
.memory-reasoning-controls input, .memory-reasoning-controls select{min-width: 0px; width: 100%;}
.memory-reasoning-controls [hidden]{display: none !important;}
#chat-library .chat-persona-banner{position: relative; isolation: isolate; display: block; overflow: hidden; min-height: 112px; padding: 0px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;}
#chat-library .chat-persona-banner.is-selected{border-color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent);}
#chat-library .chat-persona-art{position: absolute; inset: 0px 0px 0px auto; width: 78%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0.7; pointer-events: none; mask-image: linear-gradient(to right, transparent, rgb(0, 0, 0) 45%);}
#chat-library .chat-persona-content{position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 112px; padding: 20px; background: linear-gradient(90deg,var(--surface) 0%,color-mix(in srgb,var(--surface) 85%,transparent) 30%,color-mix(in srgb,var(--surface) 15%,transparent) 65%,color-mix(in srgb,var(--surface) 75%,transparent) 100%);}
#chat-library .chat-persona-content h3{margin: 0px; min-width: 0px; font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.2; overflow-wrap: anywhere; color: var(--text);}
#chat-library .chat-persona-actions{display: flex; align-items: center; gap: 8px; flex-shrink: 0;}
#chat-library .chat-persona-actions button{min-height: 40px; background: var(--surface);}
#chat-library .chat-persona-actions button:disabled{opacity: 1; color: var(--muted);}
@media (max-width: 560px) {#chat-library .chat-persona-content{align-items: flex-start; flex-direction: column; gap: 16px; padding: 16px;}
#chat-library .chat-persona-art{width: 100%;}
#chat-library .chat-persona-actions{width: 100%;}
#chat-library .chat-persona-actions button:first-child{flex: 1 1 0%;}
#chat-library .chat-persona-actions button{min-height: 44px;}
#chat-library .chat-persona-content{background: linear-gradient(90deg,var(--surface),color-mix(in srgb,var(--surface) 30%,transparent));}}
.shell .sidebar .recent button{position: relative; isolation: isolate; overflow: hidden; min-height: 44px;}
.shell .sidebar .recent button > img.conversation-avatar{position: absolute; inset: 0px 0px 0px auto; width: 90%; height: 100%; max-width: none; object-fit: cover; object-position: center 30%; border: 0px; border-radius: 0px; opacity: 0.45; pointer-events: none; mask-image: linear-gradient(to right, transparent, rgb(0, 0, 0) 55%);}
.shell .sidebar .recent button > span.avatar-fallback{display: none;}
.shell .sidebar .recent button > span:not(.conversation-avatar){position: relative; z-index: 1; min-width: 0px; max-width: 100%;}
#page .conversation-item{position: relative; isolation: isolate; overflow: hidden;}
#page .conversation-item > img.conversation-avatar{position: absolute; inset: 0px 12% 0px auto; width: clamp(180px, 32%, 340px); height: 100%; max-width: 100%; object-fit: cover; object-position: center 40%; border: 0px; border-radius: 0px; opacity: 0.35; pointer-events: none; mask-image: linear-gradient(to right, transparent, rgb(0, 0, 0) 45%, rgb(0, 0, 0) 75%, transparent);}
#page .conversation-item > span.avatar-fallback{display: none;}
#page .conversation-item > .grow, #page .conversation-item > .row{position: relative; z-index: 1;}
#page .conversation-item > .row button{background: var(--surface);}
@media (max-width: 560px) {#page .conversation-item{flex-wrap: wrap; gap: 14px;}
#page .conversation-item > .grow{flex-basis: 100%;}
#page .conversation-item > .row{width: 100%;}
#page .conversation-item > .row button:first-child{flex: 1 1 0%;}
#page .conversation-item > .row button{min-height: 44px;}
#page .conversation-item > img.conversation-avatar{width: 60%; right: 0px;}}
#modal .condition-date-pair{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px;}
#modal .condition-date-pair .condition-date-group{padding: 10px;}
#modal .condition-date-pair .condition-date-group h4{margin-bottom: 8px;}
#modal .condition-date-pair .condition-date-row{grid-template-columns: minmax(65px, 0.85fr) minmax(0px, 1.6fr) minmax(54px, 0.65fr); gap: 8px;}
#modal .condition-date-pair input{min-height: 36px; padding: 7px 9px;}
#modal .condition-date-pair input:disabled{opacity: 0.45; cursor: not-allowed;}
@media (max-width: 760px) {#modal .condition-date-pair{grid-template-columns: 1fr;}}
@media (pointer: coarse) {#modal .condition-date-pair input{min-height: 44px;}}
#modal .condition-fields input[type="checkbox"]{width: 18px; height: 18px; min-height: 18px; flex: 0 0 18px; padding: 0px;}
.discard-warning{box-sizing: border-box; width: min(460px, -32px + 100vw); padding: 24px; border: 1px solid var(--line); border-radius: var(--radius,12px); background: var(--panel,var(--bg)); color: var(--text); box-shadow: rgba(0, 0, 0, 0.6) 0px 24px 80px;}
.discard-warning::backdrop{background: rgba(0, 0, 0, 0.533);}
.discard-warning h2{font-size: 20px; margin: 0px 0px 12px;}
.discard-warning p{font-size: 14px; line-height: 1.6; margin: 0px 0px 22px; color: var(--muted,var(--text));}
.discard-warning-actions{display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px;}
.discard-warning-actions button{min-height: 38px; padding: 8px 14px;}
.discard-warning-actions button:focus-visible{outline: 2px solid var(--accent); outline-offset: 3px;}
.memory-layout-settings > button[data-story-action="memories"]{margin-top: 14px;}
.story-rail > .story-status.holographic-tracker{--tracker-accent: var(--cs-edge); display: block; position: relative; isolation: isolate; overflow: hidden; margin: 14px; padding: 20px; border: 1px solid var(--cs-edge); border-radius: 0px; background: radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--tracker-accent) 10%,transparent),transparent 65%),var(--cs-panel); color: var(--cs-text); box-shadow: 0 0 20px color-mix(in srgb,var(--tracker-accent) 7%,transparent),inset 0 0 24px color-mix(in srgb,var(--tracker-accent) 4%,transparent); font-size: 12px;}
.holographic-tracker > *{position: relative; z-index: 2; min-width: 0px;}
.story-rail > .holographic-tracker::before{content: ""; position: absolute; inset: 0px; width: auto; height: auto; border: 0px; pointer-events: none; z-index: 0; opacity: 0.7; background: repeating-linear-gradient(0deg,transparent 0,transparent 3px,color-mix(in srgb,var(--tracker-accent) 5%,transparent) 4px);}
.story-rail > .holographic-tracker::after{content: ""; position: absolute; inset: 0px; pointer-events: none; z-index: 1; background: linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--tracker-accent) 7%,transparent) 50%,transparent 60%); transform: translateY(-110%); animation: 12s ease-in-out 0s infinite normal none running tracker-sweep;}
.holographic-tracker > .holographic-corners{position: absolute; inset: 0px; z-index: 3; pointer-events: none; background: linear-gradient(var(--cs-edge),var(--cs-edge)) top left/18px 1px no-repeat,linear-gradient(var(--cs-edge),var(--cs-edge)) top left/1px 18px no-repeat,linear-gradient(var(--cs-edge),var(--cs-edge)) bottom right/18px 1px no-repeat,linear-gradient(var(--cs-edge),var(--cs-edge)) bottom right/1px 18px no-repeat;}
.story-rail .holographic-tracker .story-status-header{display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0px 0px 18px; padding: 0px; flex-wrap: wrap;}
.holographic-tracker .eyebrow{font-size: 10px; color: var(--cs-text); text-shadow: 0 0 12px var(--cs-glow);}
.holographic-tracker .story-status-badge{font-size: 9px; color: var(--cs-muted); border: 1px solid var(--line); padding: 5px 7px; background: var(--cs-note); white-space: normal;}
.story-rail .holographic-tracker .story-status-grid{display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 0.75fr); gap: 14px; margin: 0px 0px 16px;}
.story-rail .holographic-tracker .status-cell{min-width: 0px; padding: 0px; border: 0px;}
.story-rail .holographic-tracker .status-cell dt{font-size: 9px; letter-spacing: 0.1em; color: var(--cs-muted); margin: 0px 0px 7px;}
.story-rail .holographic-tracker .status-cell dd{margin: 0px; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--cs-text); overflow-wrap: anywhere;}
.story-rail .holographic-tracker .status-cell small{font-size: 10px; color: var(--cs-muted);}
.story-rail .holographic-tracker .status-cell .status-time{font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1.2; color: var(--cs-text);}
.holographic-tracker[data-time="off"] .status-cell:first-child{grid-column: 1 / -1;}
.story-rail .holographic-tracker .status-location{grid-column: 1 / -1; order: 2; border-top: 1px solid var(--line); padding-top: 12px;}
.story-rail .holographic-tracker .status-age{grid-column: 1 / -1; order: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.story-rail .holographic-tracker .status-age dt{margin: 0px;}
.story-rail .holographic-tracker .status-affinity{margin: 0px; padding: 14px 0px 0px; border-top: 1px solid var(--line);}
.holographic-tracker .status-affinity-heading{gap: 10px; color: var(--cs-text);}
.holographic-tracker .status-affinity-title{color: var(--cs-muted);}
.story-rail .holographic-tracker .status-affinity-heading strong{font-size: 28px; color: var(--cs-text); text-shadow: 0 0 14px var(--cs-glow); font-variant-numeric: tabular-nums;}
.holographic-tracker .affinity-meter{height: 4px; background: var(--line); margin-top: 10px; overflow: visible;}
.holographic-tracker .affinity-meter span{display: block; height: 100%; background: linear-gradient(90deg,var(--cs-edge),var(--accent)); box-shadow: 0 0 10px var(--cs-glow);}
.story-rail .holographic-tracker .story-status-feedback{margin-top: 16px;}
.story-rail .holographic-tracker .story-status-actions{display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0px;}
.story-rail .holographic-tracker .story-status-actions button{width: 100%; min-height: 36px; margin: 0px; padding: 8px 12px; white-space: normal; font-size: 11px; text-align: center; color: var(--cs-text); border: 1px solid var(--cs-edge); background: var(--cs-button);}
.holographic-tracker .story-status-actions button:hover:not(:disabled){filter: brightness(1.12);}
.holographic-tracker .story-status-actions button:focus-visible{outline: 2px solid var(--cs-edge); outline-offset: 2px;}
.holographic-tracker .story-status-actions button:disabled{opacity: 0.5; cursor: wait;}
.story-rail .holographic-tracker .notice{margin: 0px 0px 10px; padding: 10px; font-size: 11px; line-height: 1.6; color: var(--cs-text); background: var(--cs-note); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 2px solid var(--cs-edge); overflow-wrap: anywhere;}
@keyframes tracker-sweep { 
  0%, 55% { transform: translateY(-110%); }
  95%, 100% { transform: translateY(110%); }
}
@media (max-width: 1200px) {.story-rail > .story-status.holographic-tracker{margin: 8px 12px; padding: 12px; display: grid; grid-template-columns: minmax(0px, 2fr) minmax(0px, 1fr); gap: 10px 16px;}
.story-rail .holographic-tracker .story-status-header{grid-column: 1 / -1; margin: 0px;}
.story-rail .holographic-tracker .story-status-grid{gap: 6px 10px; margin: 0px;}
.story-rail .holographic-tracker .status-cell dt{font-size: 8px; margin-bottom: 3px;}
.story-rail .holographic-tracker .status-cell dd{font-size: 11px;}
.story-rail .holographic-tracker .status-cell .status-time{font-size: 18px;}
.story-rail .holographic-tracker .status-location{padding-top: 6px;}
.story-rail .holographic-tracker .status-affinity{padding: 0px; border: 0px; align-self: center;}
.story-rail .holographic-tracker .status-affinity-heading{flex-wrap: wrap;}
.story-rail .holographic-tracker .status-affinity-heading strong{font-size: 22px;}
.story-rail .holographic-tracker .story-status-feedback{grid-column: 1 / -1; margin: 0px;}
.story-rail .holographic-tracker .story-status-actions{grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));}}
@media (max-width: 400px) {.story-rail > .story-status.holographic-tracker{margin: 4px 8px; padding: 10px; gap: 8px;}
.holographic-tracker .eyebrow{font-size: 9px;}
.holographic-tracker .story-status-badge{font-size: 8px;}}
@media (prefers-reduced-motion: reduce) {.story-rail > .holographic-tracker::after{animation: auto ease 0s 1 normal none running none; display: none;}
.holographic-tracker *{transition: none !important;}}
@media (prefers-reduced-transparency: reduce) {.story-rail > .holographic-tracker::before, .story-rail > .holographic-tracker::after{display: none;}}
@media (max-width: 760px) {.story-rail > .story-status.holographic-tracker{padding: 8px 10px; margin: 4px 8px; grid-template-columns: minmax(0px, 1fr) minmax(110px, 0.8fr); gap: 6px 12px;}
.story-rail .holographic-tracker .story-status-header{gap: 6px;}
.story-rail .holographic-tracker .story-status-badge{padding: 3px 6px;}
.story-rail .holographic-tracker .story-status-grid{grid-column: 1 / -1; grid-template-columns: minmax(0px, 1.4fr) minmax(0px, 0.75fr) minmax(0px, 1fr); gap: 5px 10px;}
.story-rail .holographic-tracker[data-time="off"] .story-status-grid{grid-template-columns: minmax(0px, 1.4fr) minmax(0px, 1fr);}
.story-rail .holographic-tracker[data-time="off"] .status-cell:first-child{grid-column: auto;}
.story-rail .holographic-tracker .status-age{grid-column: auto; order: 0; display: block;}
.story-rail .holographic-tracker .status-age dt{margin-bottom: 3px;}
.story-rail .holographic-tracker .status-location{order: 2; padding-top: 5px;}
.story-rail .holographic-tracker .status-location dd{max-height: none; overflow: visible; white-space: normal; overflow-wrap: anywhere;}
.story-rail .holographic-tracker .status-cell .status-time{font-size: 14px; line-height: 1.5;}
.story-rail .holographic-tracker .status-affinity-heading{flex-wrap: nowrap; font-size: 10px; line-height: 1.2;}
.story-rail .holographic-tracker .status-affinity-heading strong{font-size: 18px; line-height: 1.2;}
.story-rail .holographic-tracker .affinity-meter{margin-top: 5px;}
.story-rail .holographic-tracker .story-status-feedback{grid-column: 2; align-self: center;}
.story-rail .holographic-tracker .story-status-actions button{min-height: 36px; padding: 6px 8px;}
.story-rail .holographic-tracker .story-status-feedback:has(.notice){grid-column: 1 / -1;}
.story-rail .holographic-tracker .notice{padding: 7px 9px; margin-bottom: 6px;}}
@media (max-width: 760px) {.story-rail > .story-status.holographic-tracker{padding: 6px 9px; gap: 4px 10px; grid-template-columns: minmax(0px, 1fr) 110px;}
.story-rail .holographic-tracker .story-status-header{grid-area: 1 / 1; justify-content: flex-start; gap: 4px 8px; align-self: center;}
.story-rail .holographic-tracker .story-status-header .eyebrow{font-size: 9px; letter-spacing: 0.1em;}
.story-rail .holographic-tracker .story-status-badge{padding: 2px 4px; font-size: 8px;}
.story-rail .holographic-tracker .story-status-feedback:not(:has(.notice)){grid-area: 1 / 2;}
.story-rail .holographic-tracker .story-status-actions{grid-template-columns: 1fr;}
.story-rail .holographic-tracker .story-status-actions button{min-height: 32px; padding: 5px 8px; font-size: 10px;}
.story-rail .holographic-tracker .story-status-grid{grid-row: 2; gap: 3px 10px;}
.story-rail .holographic-tracker .status-cell dt{margin-bottom: 1px;}
.story-rail .holographic-tracker .status-cell > .status-weekday{display: inline; margin: 0px 0px 0px 6px; line-height: 1.3;}
.story-rail .holographic-tracker .status-cell:first-child dd{display: inline;}
.story-rail .holographic-tracker .status-location{padding-top: 3px;}
.story-rail .holographic-tracker .status-affinity{grid-area: 3 / 1 / auto / -1; display: flex; align-items: center; gap: 10px;}
.story-rail .holographic-tracker .status-affinity-heading{gap: 8px; flex-shrink: 0; max-width: 70%;}
.story-rail .holographic-tracker .status-affinity-heading strong{font-size: 15px;}
.story-rail .holographic-tracker .affinity-meter{flex: 1 1 0%; min-width: 0px; margin: 0px; height: 3px;}
.story-rail .holographic-tracker .story-status-feedback:has(.notice){grid-area: 4 / 1 / auto / -1;}
.story-rail .holographic-tracker .story-status-feedback:has(.notice) .story-status-actions{grid-template-columns: repeat(2, minmax(0px, 1fr));}}
@media (min-width: 1201px) {.story-rail > .story-status.holographic-tracker{margin: 10px; padding: 12px;}
.story-rail .holographic-tracker .story-status-header{margin-bottom: 10px; gap: 6px;}
.story-rail .holographic-tracker .story-status-grid{gap: 8px; margin-bottom: 10px;}
.story-rail .holographic-tracker .status-cell dt{margin-bottom: 3px;}
.story-rail .holographic-tracker .status-cell dd{font-size: 12px; line-height: 1.4;}
.story-rail .holographic-tracker .status-cell .status-time{font-size: 20px;}
.story-rail .holographic-tracker .status-location{padding-top: 8px;}
.story-rail .holographic-tracker .status-affinity{padding-top: 8px;}
.story-rail .holographic-tracker .status-affinity-heading strong{font-size: 20px;}
.story-rail .holographic-tracker .affinity-meter{margin-top: 6px;}
.story-rail .holographic-tracker .story-status-feedback{margin-top: 10px;}
.story-rail .holographic-tracker .story-status-actions{gap: 5px;}
.story-rail .holographic-tracker .story-status-actions button{min-height: 30px; padding: 5px 8px;}}
@media (max-width: 760px) {[data-avatar-layout] .message .meta{align-items: center; gap: 6px; min-width: 0px; flex-wrap: wrap;}
[data-avatar-layout] .message .chat-identity{min-width: 0px; max-width: 100%; gap: 6px; align-items: center;}
[data-avatar-layout] .message .chat-identity > .name{min-width: 0px; overflow-wrap: anywhere;}
[data-avatar-layout] .message .message-stat{max-width: 100%; overflow-wrap: anywhere;}
[data-avatar-layout="classic"] .message{align-items: start;}
[data-avatar-layout="ripple"] .message > .message-avatar{align-self: start;}
[data-avatar-layout="whisper"] .message .meta{min-height: 0px; padding-top: max(0px,calc(min(var(--banner-height,160px),104px,18dvh) - 32px)); padding-bottom: 6px; margin-bottom: 6px; align-content: start;}}
:root [data-avatar-layout="whisper"] .message > .message-avatar{position: relative; inset: auto; display: block; width: 100%; height: var(--banner-height,160px); mask-image: linear-gradient(rgb(0, 0, 0) 70%, transparent 100%); opacity: 1; mask-composite: add;}
:root [data-avatar-layout="whisper"] .message .meta{min-height: 0px; padding: 0px; margin: 0px 0px 14px; display: flex; align-items: center; align-content: start; gap: 10px; flex-wrap: wrap;}
@media (max-width: 760px) {:root [data-avatar-layout="whisper"] .message > .message-avatar{height: min(var(--banner-height,160px),104px,18dvh);}
:root [data-avatar-layout="whisper"] .message .meta{gap: 6px; margin-bottom: 10px; flex-wrap: nowrap;}
:root [data-avatar-layout="whisper"] .message .chat-identity{gap: 5px; flex: 0 1 auto;}
:root [data-avatar-layout="whisper"] .message .chat-identity > .name.chat-display-name{font-size: min(var(--name-size,22px),22px);}
:root [data-avatar-layout="whisper"] .message .chat-identity > .role{height: 21px; min-height: 21px; padding: 0px 4px; font-size: 8px;}
:root [data-avatar-layout="whisper"] .message .message-stat{flex-shrink: 0; white-space: nowrap; font-size: 9px;}}
:root .content:has(.library-page){background-color: var(--bg); background-image: linear-gradient(color-mix(in srgb,var(--text) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--text) 6%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--text) 2%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--text) 2%,transparent) 1px,transparent 1px); background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; overflow: hidden; min-height: 0px;}
:root .wide-limit.collection-wide:has(.library-page){height: 100%; min-height: 0px; display: flex; flex-direction: column;}
.library-page{--lib-glass: color-mix(in srgb,var(--surface) 86%,transparent); display: flex; flex-direction: column; height: 100%; min-height: 0px;}
:root .library-page.character-collection > .library-banner{position: relative; isolation: isolate; flex-shrink: 0; min-height: 176px; margin: 0px 0px 12px; padding: 18px 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(90deg, rgba(6, 12, 17, 0.15), transparent 60%), url("/library-banner.webp") center 65% / cover no-repeat; display: flex; align-items: center;}
:root .library-title-panel{display: flex; flex-direction: column; gap: 13px; padding: 18px 22px; border: 1px solid color-mix(in srgb,var(--text) 35%,var(--line)); border-radius: 8px; background: var(--lib-glass); backdrop-filter: blur(12px); box-shadow: rgba(255, 255, 255, 0.125) 0px 1px 0px inset; color: var(--text);}
:root .library-banner h1{font-family: "Segoe UI", Arial, sans-serif; font-size: 28px; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; line-height: 1.3; margin: 0px; color: var(--text);}
.library-title-panel > .row{gap: 8px;}
.library-title-panel button{font-size: 12px;}
:root .library-page.character-collection > .library-controls{display: grid; grid-template-columns: minmax(170px, 1fr) 145px 155px minmax(380px, 1.6fr); gap: 10px; align-items: center; position: relative; margin: 0px 0px 14px; padding: 0px 0px 15px; border: 0px; min-width: 0px; z-index: 5; flex-shrink: 0;}
.library-controls::after{content: ""; position: absolute; bottom: 0px; left: 0px; right: 0px; height: 1px; background: linear-gradient(90deg,transparent,color-mix(in srgb,var(--text) 65%,transparent),transparent); pointer-events: none;}
:root .library-controls > :is(.search, .tag-dropdown, .creator-filter){min-width: 0px; width: 100%; max-width: none; margin: 0px;}
:root .library-controls :is(input, select){height: 40px; width: 100%; min-width: 0px; margin: 0px; font-size: 12px;}
:root .library-controls .tag-dropdown summary{min-height: 40px; padding: 10px; font-size: 12px; white-space: nowrap;}
:root .library-controls .collection-tabs{display: flex; gap: 6px; padding: 0px; margin: 0px; border: 0px; min-width: 0px;}
:root .library-controls .collection-tabs button{flex: 1 1 0%; min-width: 0px; margin: 0px; min-height: 40px; padding: 8px 7px; font-size: 11px; border-radius: 0px; white-space: normal;}
.library-page :is(.collection-tabs button, .card-actions button, .library-title-panel button){background: linear-gradient(145deg,#ffffff12,transparent),var(--lib-glass); color: var(--text); border: 1px solid var(--line); box-shadow: rgba(255, 255, 255, 0.145) 0px 1px 0px inset; backdrop-filter: blur(8px);}
:root .library-page.character-collection .collection-tabs button.active{border-color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); background: color-mix(in srgb,var(--accent) 16%,var(--surface)); color: var(--text);}
.library-page .collection-layout{flex: 1 1 0%; min-height: 0px; grid-template-rows: minmax(0px, 1fr); align-items: start;}
.library-page #character-grid{height: 100%; min-width: 0px; min-height: 0px;}
.library-page .character-shelf{height: 100%; min-height: 0px; display: flex; flex-direction: column; margin: 0px;}
:root .library-page.character-collection .character-shelf > header{flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;}
.library-page .character-shelf > header h2{margin: 0px;}
:root .library-page.character-collection .character-row.character-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 200px)); grid-auto-rows: max-content; gap: 18px; place-content: start; align-items: start; overflow: auto; min-height: 0px; max-height: var(--library-two-rows,100%); flex: 0 1 auto; padding: 8px 6px 24px; scrollbar-gutter: stable; overscroll-behavior: contain; scrollbar-width: thin; background: none;}
:root .library-page.character-collection .character{min-width: 0px; position: relative; isolation: isolate; overflow: hidden; border-radius: 16px; border: 1px solid color-mix(in srgb,var(--text) 28%,var(--line)); background: linear-gradient(140deg,#ffffff0d,transparent 40%),var(--lib-glass); backdrop-filter: blur(14px); box-shadow: rgba(255, 255, 255, 0.145) 0px 1px 0px inset; transition: transform 180ms, border-color 180ms, box-shadow 180ms;}
:root .library-page.character-collection .character::before{display: none;}
:root .library-page.character-collection .card-heading{background: transparent; border: 0px; padding: 11px;}
:root .library-page.character-collection .card-heading h2{font-size: 17px; line-height: 1.25;}
:root .library-page.character-collection .character-name-link{white-space: normal; overflow-wrap: anywhere; color: var(--text);}
:root .library-page.character-collection .card-art{aspect-ratio: 3 / 4; background: transparent; height: auto !important; min-height: 0px !important;}
:root .library-page.character-collection .card-art::after{display: none;}
:root .library-page.character-collection .portrait{background: transparent; border: 0px; height: 100%;}
:root .library-page.character-collection .portrait > img{width: 100%; height: 100%; object-fit: cover; mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0.867) 72%, rgba(0, 0, 0, 0.4) 86%, transparent 100%);}
:root .library-page.character-collection .portrait :is(.number, .favorite-toggle){background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 5px;}
:root .library-page.character-collection .favorite-toggle.active{color: var(--accent); border-color: var(--accent);}
:root .library-page.character-collection .card-footer{background: transparent; padding: 12px 10px 10px; margin: 0px;}
.library-page .card-creator{font-size: 11px; overflow-wrap: anywhere;}
.library-page .card-divider{height: 1px; border: 0px; background: linear-gradient(90deg,transparent,var(--line),transparent);}
:root .library-page.character-collection .card-tags{gap: 4px; padding-top: 8px; margin-top: 8px;}
:root .library-page.character-collection .character-tag{font-size: 10px; border-radius: 4px; max-width: 100%; white-space: normal; overflow-wrap: anywhere;}
.library-page .card-actions, .library-page .card-control-grid{gap: 6px;}
:root .library-page.character-collection .card-actions button{padding: 7px 5px; font-size: 11px; border-radius: 7px; white-space: normal; min-height: 34px; box-shadow: rgba(255, 255, 255, 0.19) 0px 1px 0px inset, rgba(0, 0, 0, 0.133) 0px -1px 0px inset;}
:root .library-page.character-collection .character-row .card-footer .card-actions .start{min-height: 42px; padding: 10px 6px; font-size: 12px; font-weight: 700; background: var(--accent); color: var(--ink); border: 1px solid var(--accent); box-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px inset;}
:root .library-page.character-collection .character-row .card-footer .card-actions .start:hover{filter: brightness(1.08);}
.library-page .favorite-rail{position: static; max-height: 100%; min-height: 0px; overflow: auto;}
.library-sort{display: flex; flex-direction: row; align-items: center; gap: 9px; margin: 0px; font-size: 12px; color: var(--muted);}
.library-sort select{width: 160px; min-height: 36px; padding: 7px 9px; margin: 0px; font-size: 12px; color: var(--text); background: var(--surface); border: 1px solid var(--line);}
.library-active-filters{display: flex; flex-wrap: wrap; gap: 6px; margin: 0px 0px 12px; flex-shrink: 0; max-height: 100px; overflow: auto;}
.library-active-filters button, .library-empty button{border: 1px solid var(--line); background: var(--surface); color: var(--text); padding: 7px 10px; font-size: 12px; border-radius: 4px; max-width: 100%; overflow-wrap: anywhere;}
.library-active-filters button span{margin-left: 8px;}
.library-empty{grid-column: 1 / -1; padding: 24px; text-align: center; border: 1px solid var(--line); background: var(--surface); border-radius: 12px;}
.library-empty h3{font-size: 18px; margin: 0px 0px 8px;}
.library-empty p{font-size: 13px; color: var(--muted);}
.library-page .card-token-summary{border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.5;}
.card-token-summary strong, .card-token-summary .token-total{color: var(--text); font-weight: 600;}
.card-token-summary dl{display: grid; grid-template-columns: 1fr auto; gap: 4px 6px; margin: 8px 0px;}
.card-token-summary dt, .card-token-summary dd{margin: 0px;}
.card-token-summary dd{font-variant-numeric: tabular-nums; text-align: right; color: var(--text);}
.card-token-summary details{font-size: 11px;}
.card-token-summary summary{cursor: pointer; min-height: 28px; width: fit-content; color: var(--text);}
.card-token-summary p{font-size: 11px; line-height: 1.5; margin: 6px 0px;}
.library-page :is(button, input, select, summary):focus-visible{outline: 2px solid var(--accent); outline-offset: 2px;}
@media (hover: hover) and (pointer: fine) {:root .library-page.character-collection .character:hover{transform: translateY(-4px); border-color: color-mix(in srgb,white 75%,var(--accent)); box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px inset, rgba(255, 255, 255, 0.15) 0px 0px 8px, rgba(255, 255, 255, 0.08) 0px 0px 18px; z-index: 2;}}
@media (max-width: 1150px) {:root .library-page.character-collection > .library-controls{grid-template-columns: minmax(170px, 1fr) minmax(140px, 0.65fr) minmax(150px, 0.65fr);}
.library-controls .collection-tabs{grid-column: 1 / -1;}}
@media (max-width: 760px) {.library-page .collection-layout{grid-template-rows: auto minmax(0px, 1fr); gap: 8px;}
.library-page .favorite-rail{max-height: 76px; padding: 7px 10px;}
.library-page .favorite-rail h2{margin: 0px 0px 4px;}
.library-page .favorite-rail p{margin: 0px; font-size: 11px;}}
@media (max-width: 600px) {:root .library-page.character-collection > .library-banner{min-height: 144px; padding: 12px; background-size: auto 230px; background-position: 70% 66%;}
:root .library-title-panel{padding: 12px 14px; gap: 10px;}
:root .library-banner h1{font-size: 21px; letter-spacing: 2.4px;}
.library-title-panel button{font-size: 12px; padding: 7px 10px;}
:root .library-page.character-collection > .library-controls{grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 7px; margin-bottom: 10px; padding-bottom: 12px;}
.library-controls > .search{grid-column: 1 / -1;}
:root .library-controls .collection-tabs button{font-size: 10px; padding: 7px 4px;}
:root .library-page.character-collection .character-row.character-grid{grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 10px; padding: 6px 2px 18px;}
:root .library-page.character-collection .card-heading h2{font-size: 14px;}
:root .library-page.character-collection .card-footer{padding: 12px 7px 8px;}
.library-sort{width: 100%; justify-content: space-between;}
.library-sort select{width: 170px;}
.library-active-filters{max-height: 72px;}}
@media (max-width: 340px) {:root .library-page.character-collection .character-row.character-grid{grid-template-columns: minmax(0px, 1fr);}}
@media (max-height: 650px) {:root .content:has(.library-page){overflow: auto;}
:root .wide-limit.collection-wide:has(.library-page), .library-page{height: auto; min-height: 100%;}
.library-page .character-shelf, .library-page #character-grid{height: auto;}
:root .library-page.character-collection .character-row.character-grid{min-height: 240px; max-height: 75vh;}}
@media (prefers-reduced-motion: reduce) {:root .library-page.character-collection .character{transition: none; transform: none !important;}}
@media (prefers-reduced-transparency: reduce) {.library-page{--lib-glass: var(--surface);}
:root .library-page.character-collection .character, :root .library-title-panel{backdrop-filter: none;}}
:root .library-page.character-collection > .library-banner{justify-content: flex-start; align-items: center;}
:root dialog.character-profile-dialog[open]{display: flex; flex-direction: column; max-height: 90dvh; overflow: hidden;}
:root .character-profile-dialog > .modal-head{flex: 0 0 auto; min-width: 0px;}
:root .character-profile-dialog > .modal-head h2{min-width: 0px; overflow-wrap: anywhere; font-size: clamp(16px, 2vw, 24px);}
:root .character-profile-dialog > .modal-head button{flex-shrink: 0;}
:root .character-profile-dialog > .modal-body{flex: 1 1 auto; min-height: 0px; overflow: auto; overscroll-behavior: contain;}
:root .character-profile-content iframe.message-html{display: block; max-height: none; min-width: 0px; width: 100%;}
@media (max-width: 760px) {:root .content:has(.library-page){overflow: hidden auto;}
:root .wide-limit.collection-wide:has(.library-page){display: block; height: auto; min-height: 100%;}
:root .library-page.character-collection{display: block; height: auto; min-height: 0px;}
:root .library-page .collection-layout{display: block; height: auto; min-height: 0px;}
:root .library-page .favorite-rail{height: auto; max-height: none; overflow: visible; margin-bottom: 14px; padding: 10px;}
:root .library-page #favorite-list{display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; justify-content: flex-start;}
:root .library-page .favorite-shortcut{flex: 0 0 74px; width: 74px; min-height: 44px; white-space: normal; overflow-wrap: anywhere;}
:root .library-page #character-grid, :root .library-page .character-shelf{display: block; height: auto; min-height: 0px;}
:root .library-page.character-collection .character-row.character-grid{overflow: visible; max-height: none; min-height: 0px; height: auto; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 10px; padding: 6px 2px 20px; scrollbar-gutter: auto;}
:root .library-page.character-collection .card-art{aspect-ratio: 1 / 1.08;}
:root .library-page.character-collection .card-heading{padding: 9px 8px;}
:root .library-page.character-collection .card-heading h2{font-size: 14px; line-height: 1.25;}
:root .library-page.character-collection .card-footer{padding: 8px 7px;}
:root .library-page.character-collection .card-control-grid{grid-template-columns: minmax(0px, 1fr);}
:root .library-page.character-collection .card-actions button{min-height: 38px; font-size: 11px;}
:root .library-page .card-token-summary{font-size: 10px; margin-top: 9px; padding-top: 8px;}
:root .library-page .library-active-filters{max-height: none; overflow: visible;}}
@media (min-width: 520px) and (max-width: 679px) {:root .library-page.character-collection .character-row.character-grid{grid-template-columns: repeat(3, minmax(0px, 1fr));}}
@media (min-width: 680px) and (max-width: 760px) {:root .library-page.character-collection .character-row.character-grid{grid-template-columns: repeat(4, minmax(0px, 1fr));}}
@media (max-width: 760px) {:root .main:has(.library-page){min-height: 0px; overflow: hidden;}
:root .main:has(.library-page) > .topbar{flex-shrink: 0;}
:root .content:has(.library-page){min-height: 0px; text-size-adjust: 100%;}
:root .library-title-panel{max-width: 100%;}
:root .library-title-panel > .row{flex-wrap: wrap;}}
:root.custom-ui .library-page :is(.character-name-link, .creator-byline, .creator-directory-link){box-shadow: none; background: transparent !important;}
:root .library-page .creator-directory-link{min-width: 0px; vertical-align: top; align-self: stretch; overflow-wrap: anywhere;}
@media (max-width: 760px) {:root .library-page .creator-directory .creator-directory-list{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 8px 12px; align-items: stretch;}
:root .library-page .creator-directory summary{margin-bottom: 8px;}
:root .library-page .creator-directory-link{display: flex; width: 100%; margin: 0px; justify-content: flex-start;}}
:root .library-page .favorite-rail{background: var(--surface); border-color: var(--line); color: var(--text);}
#directory-navigation{display: flex; align-items: stretch; gap: 4px; flex: 0 0 auto; margin: 0px; padding: 0px 24px; background: var(--bg); border-bottom: 1px solid var(--line);}
#directory-navigation button{min-height: 34px; height: auto; padding: 7px 16px; font-size: 12px; line-height: 1.3; color: var(--muted); border-width: 0px 0px 2px !important; border-style: none none solid !important; border-color: currentcolor currentcolor transparent !important; border-image: none !important; border-radius: 0px !important; background: transparent !important; box-shadow: none !important;}
#directory-navigation button[aria-current="page"]{color: var(--text); border-bottom-color: var(--accent) !important; background: color-mix(in srgb,var(--accent) 8%,transparent) !important;}
#directory-navigation button:hover{color: var(--text); background: color-mix(in srgb,var(--accent) 12%,transparent) !important;}
#directory-navigation button:focus-visible{outline: 2px solid var(--accent); outline-offset: -3px;}
#directory-navigation button::before, #directory-navigation button::after{display: none !important;}
@media (max-width: 560px) {#directory-navigation{padding: 0px 12px;}
#directory-navigation button{flex: 1 1 0%;}}
@media (pointer: coarse) {#directory-navigation button{min-height: 44px;}}
#modal form[data-kind="character"] :is(label > small, fieldset > small, p.small.muted):not(.profile-source-preview *):not(.profile-template-preview *){display: block; font-size: 10px; line-height: 1.6; letter-spacing: 0.045em; font-weight: 400; text-transform: uppercase; white-space: pre-line; color: var(--muted);}
#modal form[data-kind="character"] label > small{margin: 0px;}
#modal form[data-kind="character"] :is(fieldset > small, p.small.muted):not(.profile-source-preview *):not(.profile-template-preview *){margin: 8px 0px 12px;}
#modal form[data-kind="character"] .character-prompt > .check{margin-bottom: 0px;}
#modal form[data-kind="character"] .character-prompt > .character-editor-help{margin: 8px 0px 16px;}
#modal form[data-kind="character"] .character-profile-warning{margin: 8px 0px 12px; padding: 7px 10px; border-width: 1px 1px 1px 3px; border-style: solid; border-color: rgba(236, 82, 100, 0.3) rgba(236, 82, 100, 0.3) rgba(236, 82, 100, 0.3) rgb(237, 82, 100); border-image: none; border-radius: 4px; background: rgba(229, 57, 53, 0.063); color: rgb(255, 141, 152); font-size: 10px; line-height: 1.6; letter-spacing: 0.045em; text-transform: uppercase;}
#modal form[data-kind="character"] .creator-tracking > :not(summary){margin-top: 16px; margin-bottom: 0px;}
#modal form[data-kind="character"] .creator-tracking label:not(.check){display: flex; flex-direction: column; gap: 8px; min-width: 0px;}
#modal form[data-kind="character"] .creator-tracking .form-grid{gap: 14px;}
#modal form[data-kind="character"] .tracker-editor-section{min-width: 0px; padding: 0px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);}
#modal form[data-kind="character"] .tracker-editor-section > summary{margin: 0px; padding: 12px 14px; font-size: 13px; line-height: 1.4; cursor: pointer;}
#modal form[data-kind="character"] .tracker-editor-section[open] > summary{border-bottom: 1px solid var(--line);}
#modal form[data-kind="character"] .tracker-section-body{display: grid; gap: 14px; padding: 14px; min-width: 0px;}
#modal form[data-kind="character"] .tracker-section-body > *{margin: 0px; min-width: 0px;}
#modal form[data-kind="character"] .tracker-section-body > button{justify-self: start;}
#modal form[data-kind="character"] .tracker-section-body > p.small.muted{margin: 0px;}
#modal form[data-kind="character"] .custom-calendar:not([hidden]){display: grid; gap: 14px;}
#modal form[data-kind="character"] .tracker-calendar-pair{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 14px;}
@media (max-width: 600px) {#modal form[data-kind="character"] .tracker-calendar-pair{grid-template-columns: minmax(0px, 1fr);}}
#modal form[data-kind="character"] .creator-tracking :is(.gate-row, .title-row){display: block; margin: 0px 0px 12px; padding: 0px; min-width: 0px;}
#modal form[data-kind="character"] .creator-tracking :is(.gate-row, .title-row) > summary{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#modal form[data-kind="character"] .creator-tracking :is(.gate-row, .title-row) > summary::before{content: "▸"; display: inline-block; margin-right: 8px;}
#modal form[data-kind="character"] .creator-tracking :is(.gate-row, .title-row)[open] > summary::before{content: "▾";}
#modal form[data-kind="character"] .creator-tracking :is(.gate-row, .title-row) > summary{list-style: none;}
#modal form[data-kind="character"] .creator-tracking :is(.gate-row, .title-row) > summary::-webkit-details-marker{display: none;}
#modal form[data-kind="character"] .creator-tracking > :is(.gate-list, .title-list){display: grid; gap: 12px; margin: 12px 0px 0px;}
#modal form[data-kind="character"] .creator-tracking > :is(.gate-list, .title-list):empty{display: none;}
#modal form[data-kind="character"] .creator-tracking :is(.gate-list, .title-list) > :is(.gate-row, .title-row){margin: 0px;}
#modal form[data-kind="character"] .creator-tracking > :is([data-action="add-gate"], [data-action="add-title"]){display: block; margin: 12px 0px 0px;}
#modal form[data-kind="character"] .creator-tracking > h3{margin-top: 20px; margin-bottom: 0px;}
#modal form[data-kind="character"] label:has(> :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select)):not(.profile-source-preview *):not(.profile-template-preview *){display: flex; flex-direction: column; gap: 8px; min-width: 0px;}
#modal form[data-kind="character"] label:has(> :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select)) > small{margin: 0px;}
#modal form[data-kind="character"] .character-voice-editor .tracker-section-body > label{margin: 0px;}
#modal .greeting-seed > summary{font-size: 12px; line-height: 1.4;}
#modal .greeting-start-fields{display: grid; gap: 12px; margin-top: 12px;}
#modal .greeting-start-fields :is(.greeting-date-row, .greeting-meta-row, .greeting-clock){display: grid; gap: 12px; align-items: start; min-width: 0px;}
#modal .greeting-start-fields .greeting-date-row{grid-template-columns: repeat(3, minmax(0px, 1fr));}
#modal .greeting-start-fields :is(.greeting-meta-row, .greeting-clock){grid-template-columns: repeat(2, minmax(0px, 1fr));}
#modal .greeting-start-fields label{min-width: 0px; margin: 0px; font-size: 12px;}
#modal .greeting-start-fields input:not([type="checkbox"]){min-width: 0px; min-height: 38px; padding: 8px 10px;}
#modal .greeting-start-fields .clock-field{grid-area: 1 / 1;}
#modal .greeting-start-fields .greeting-clock-option{grid-area: 1 / 2; min-width: 0px; padding-top: 4px;}
#modal .greeting-start-fields .greeting-clock-help{display: block; margin-top: 4px; font-size: 10px; line-height: 1.6; letter-spacing: 0.045em; text-transform: uppercase; color: var(--muted);}
#modal .gate-help-field{min-width: 0px; display: flex; flex-direction: column; gap: 8px;}
#modal .gate-help-heading{display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px;}
#modal .gate-help-heading label{flex: 1 1 0%; margin: 0px;}
#modal :is(.creator-tracking, .character-prompt, .lore-activation-settings, .lore-toolbar-pair, form[data-form="entry"]) .gate-help-toggle{padding: 2px 4px; min-height: 24px; font-size: 10px; white-space: nowrap; background: transparent; border: 0px; color: var(--accent);}
#modal .gate-help-toggle:focus-visible{outline: 1px solid var(--accent); outline-offset: 2px;}
#modal .gate-help-note{margin: 0px; padding: 10px; border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 2px solid var(--accent); background: var(--surface); color: var(--text); font-size: 11px; line-height: 1.6;}
#modal .gate-help-note[hidden]{display: none;}
#modal .tracking-enable-options{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 16px; align-items: start;}
#modal .tracking-check-help .gate-help-heading{align-items: center; justify-content: flex-start; column-gap: 12px;}
#modal .tracking-check-help label.check{flex: 0 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0px; margin: 0px;}
#modal .tracking-check-help label.check input{flex-shrink: 0;}
#modal .calendar-preset-row{display: grid; grid-template-columns: minmax(0px, 1fr) auto; align-items: end; gap: 12px;}
#modal .calendar-preset-row > label{min-width: 0px; margin: 0px;}
#modal .calendar-preset-row select, #modal .calendar-preset-row > button{box-sizing: border-box; height: 44px; min-height: 44px; margin: 0px; align-self: end;}
@media (max-width: 480px) {#modal .calendar-preset-row > button{max-width: 120px; white-space: normal;}}
#modal .calendar-preset-row select{width: 100%; min-width: 0px;}
#modal .character-lorebooks .lore-picker-label{display: none;}
#modal .character-lorebooks{margin: 16px 0px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); min-width: 0px;}
#modal form[data-kind="character"] details:not(.profile-source-preview *):not(.profile-template-preview *){background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text);}
#modal form[data-kind="character"] details:not(.profile-source-preview *):not(.profile-template-preview *) > summary{background: var(--surface); color: var(--text); border-color: var(--line);}
#modal form[data-kind="character"] details > summary:focus-visible{outline: 2px solid var(--accent); outline-offset: 2px;}
#modal .lore-activation-settings{display: grid; gap: 14px;}
#modal .lore-activation-pair{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 16px; align-items: start;}
#modal .lore-command-fields > label{display: flex; flex-direction: column; gap: 8px; min-width: 0px; margin: 0px;}
#modal .lore-command-fields :is(input, select){width: 100%; min-width: 0px; height: 44px; margin: 0px;}
#modal .lore-command-note{margin: 0px; padding: 10px 12px; background: var(--surface); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 3px solid var(--accent); border-radius: var(--radius); color: var(--muted); font-size: 11px; line-height: 1.65;}
#modal .lore-command-note strong{display: block; color: var(--text); font-size: 11px; margin-bottom: 4px;}
#modal .lore-story-conditions .condition-fields{border: 0px; padding: 0px; margin: 0px; min-width: 0px; display: grid; gap: 14px;}
#modal .lore-story-conditions .condition-fields[hidden]{display: none;}
#modal .condition-fields label:not(.check){display: flex; flex-direction: column; gap: 8px; margin: 0px; min-width: 0px;}
#modal .condition-fields :is(input, select, textarea){min-width: 0px; width: 100%; margin: 0px;}
#modal .condition-fields :is(input, select){height: 44px;}
#modal .condition-date-group{padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 0px;}
#modal .condition-date-group h4{margin: 0px 0px 10px; font-size: 12px; color: var(--text);}
#modal .condition-date-row{display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.4fr) minmax(0px, 1fr); gap: 12px;}
#modal .condition-fields :is(p.small, small){margin: 0px; font-size: 10px; line-height: 1.6; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);}
#modal .lore-event .event-fields{display: grid; gap: 14px; margin: 0px; min-width: 0px;}
#modal .lore-event .event-fields[hidden]{display: none;}
#modal .event-fields label:not(.check){display: flex; flex-direction: column; gap: 8px; margin: 0px; min-width: 0px;}
#modal .event-fields :is(input:not([type="checkbox"]), select, textarea){width: 100%; min-width: 0px; margin: 0px;}
#modal .event-fields :is(input:not([type="checkbox"]), select){height: 44px;}
#modal .event-outcome-row{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);}
#modal .event-fields :is(p.small, small){margin: 0px; font-size: 10px; line-height: 1.6; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);}
#modal .event-outcome-row{align-items: end;}
#modal .lore-character-picker{padding: 0px; overflow: hidden;}
#modal .lore-character-picker > summary{padding: 12px 14px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text);}
#modal .lore-character-picker[open] > summary{border-bottom: 1px solid var(--line);}
#modal .lore-character-options{grid-template-columns: repeat(6, minmax(0px, 1fr)); grid-auto-rows: 48px; gap: 8px; max-height: 216px; margin: 12px 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;}
#modal .lore-character-options > label{display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0px; height: 48px; padding: 8px; margin: 0px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); text-align: left; cursor: pointer; font-size: 12px;}
#modal .lore-character-options > label:has(input:checked){border-color: var(--accent); background: color-mix(in srgb,var(--accent) 12%,var(--surface));}
#modal .lore-character-options > label:focus-within{outline: 2px solid var(--accent); outline-offset: -2px;}
#modal .lore-character-options > label > span{min-width: 0px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; line-height: 1.25;}
#modal .lore-character-options > p{grid-column: 1 / -1; margin: 0px; align-self: center;}
#modal .lore-character-picker + p.small{font-size: 10px; line-height: 1.6; text-transform: uppercase; letter-spacing: 0.04em; margin: 8px 0px 14px;}
@media (max-width: 1000px) {#modal .lore-character-options{grid-template-columns: repeat(4, minmax(0px, 1fr));}}
@media (max-width: 600px) {#modal .lore-character-options{grid-template-columns: repeat(2, minmax(0px, 1fr));}}
#modal .book-entry-row > details > label:not(.check){display: flex; flex-direction: column; gap: 8px; margin: 16px 0px 0px; min-width: 0px;}
#modal .book-entry-row > details > label:not(.check) > :is(input, textarea, select, small){margin: 0px;}
#modal .book-entry-row > details > label > small{font-size: 10px; line-height: 1.6; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);}
#modal .book-entry-row > details > label.check{margin: 14px 0px;}
#modal .lore-toolbar-pair{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 16px; margin: 16px 0px; align-items: start;}
#modal .lore-toolbar-pair select{width: 100%; min-width: 0px; height: 44px; margin: 0px; font-size: 12px;}
#modal .lore-toolbar-pair .gate-help-heading{min-height: 28px;}
@media (max-width: 600px) {#modal .lore-toolbar-pair{grid-template-columns: 1fr;}}
#modal .character-content-warnings{margin: 16px 0px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); min-width: 0px;}
#modal .content-warning-options{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 14px; margin: 14px 0px;}
#modal .character-content-warnings .gate-help-toggle{padding: 2px 4px; min-height: 24px; font-size: 10px; background: transparent; border: 0px; color: var(--accent);}
#modal .story-content-warnings{padding: 16px; border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--surface); margin: 16px 0px;}
#modal .story-content-warnings li{margin: 8px 0px;}
#modal .warning-custom{white-space: pre-wrap; overflow-wrap: anywhere;}
@media (max-width: 600px) {#modal .content-warning-options{grid-template-columns: 1fr;}}
#modal .content-warning-options .gate-help-heading{display: grid; grid-template-columns: minmax(0px, 1fr) auto; align-items: start; gap: 8px 12px;}
#modal .content-warning-options .gate-help-heading label.check{display: flex; align-items: flex-start; line-height: 1.5; gap: 10px; margin: 0px; min-width: 0px;}
#modal .content-warning-options label.check input{margin-top: 2px;}
#modal .content-warning-options .gate-help-toggle{white-space: nowrap; line-height: 1.5; margin: 0px;}
#modal .story-content-warnings{padding: 0px; overflow: hidden; border-left-width: 3px;}
#modal .warning-panel-heading{display: flex; align-items: flex-start; gap: 12px; padding: 18px; background: color-mix(in srgb,var(--accent) 7%,var(--surface)); border-bottom: 1px solid var(--line);}
#modal .warning-panel-icon{font-size: 22px; line-height: 1.2; color: var(--accent);}
#modal .warning-panel-heading h3{margin: 0px; font-size: 15px; line-height: 1.4; color: var(--text);}
#modal .warning-panel-heading p{margin: 5px 0px 0px; font-size: 12px; line-height: 1.6; color: var(--muted);}
#modal .warning-theme-list{list-style: none; margin: 0px; padding: 4px 18px;}
#modal .warning-theme-list li{margin: 0px; padding: 12px 0px; display: grid; gap: 4px; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.6;}
#modal .warning-theme-list li:last-child{border-bottom: 0px;}
#modal .warning-theme-list strong{font-size: 12px; color: var(--text);}
#modal .warning-theme-list span{color: var(--muted);}
#modal .warning-additional{margin: 0px 18px 14px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 12px;}
#modal .warning-additional p{margin: 6px 0px 0px; line-height: 1.6; color: var(--muted);}
#modal .warning-acknowledgment{padding: 16px 18px; border-top: 1px solid var(--line); background: var(--bg);}
#modal .warning-acknowledgment .check{margin: 0px; display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.6;}
#modal .warning-acknowledgment input{flex-shrink: 0; margin-top: 2px;}
#modal .warning-acknowledgment p{margin: 10px 0px 0px; font-size: 11px; line-height: 1.6; color: var(--muted);}
#modal .warning-panel-heading{background: rgb(53, 21, 25); border-bottom-color: rgb(145, 65, 74); box-shadow: none;}
#modal .warning-panel-icon{color: rgb(255, 131, 139);}
#modal .warning-panel-heading h3{color: rgb(255, 241, 242);}
#modal .warning-panel-heading p{color: rgb(240, 197, 202);}
#modal .warning-acknowledgment .check{margin: 0px; padding-bottom: 0px; min-height: 0px;}
#modal .warning-acknowledgment p{margin-top: 4px;}
#modal .story-content-warnings{border-color: rgb(145, 65, 74) rgb(145, 65, 74) rgb(145, 65, 74) rgb(239, 98, 108);}
#modal .new-story-character-row{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 16px; margin: 16px 0px; align-items: end;}
#modal .new-story-character-row > label{display: flex; flex-direction: column; gap: 8px; min-width: 0px; margin: 0px;}
#modal .new-story-character-row > label:only-child{grid-column: 1 / -1;}
#modal .new-story-character-row select{width: 100%; min-width: 0px; margin: 0px;}
@media (max-width: 480px) {#modal .new-story-character-row{grid-template-columns: 1fr;}}
#modal form[data-kind="persona"]{display: grid; gap: 20px; min-width: 0px;}
#modal form[data-kind="persona"] .persona-editor-section{min-width: 0px; margin: 0px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);}
#modal form[data-kind="persona"] legend{padding: 0px 7px; font-size: 13px; font-weight: 600;}
#modal form[data-kind="persona"] label:not(.check){display: flex; flex-direction: column; gap: 8px; min-width: 0px; margin-bottom: 16px; font-size: 12px;}
#modal form[data-kind="persona"] label:last-child{margin-bottom: 0px;}
#modal form[data-kind="persona"] label > small{margin: 0px; font-size: 11px; line-height: 1.6; color: var(--muted);}
#modal form[data-kind="persona"] :is(input:not([type="checkbox"]), textarea){min-width: 0px; width: 100%;}
#modal form[data-kind="persona"] .persona-portrait-layout{display: grid; grid-template-columns: 160px minmax(0px, 1fr); gap: 20px; align-items: center;}
#modal form[data-kind="persona"] .persona-editor-portrait{width: 160px; height: 216px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--bg); color: var(--muted); font-size: 12px;}
#modal form[data-kind="persona"] .persona-editor-portrait img{display: block; width: 100%; height: 100%; object-fit: cover;}
#modal form[data-kind="persona"] .form-actions{margin: 0px; gap: 10px;}
#modal form[data-kind="persona"] .error:empty{display: none;}
@media (max-width: 520px) {#modal form[data-kind="persona"] .persona-portrait-layout{grid-template-columns: minmax(0px, 1fr);}
#modal form[data-kind="persona"] .persona-editor-portrait{justify-self: center;}
#modal form[data-kind="persona"] .persona-editor-section{padding: 14px;}}
.announcement-launch{position: relative; flex-shrink: 0; overflow: visible !important;}
.announcement-envelope{width: 30px; height: 26px; display: block; overflow: visible;}
.envelope-flap{transform-origin: 50% 10px; transition: transform 0.4s;}
.envelope-letter{transition: transform 0.4s;}
.announcement-launch:hover .envelope-flap, .announcement-launch:focus-visible .envelope-flap{transform: scaleY(-1);}
.announcement-launch:hover .envelope-letter, .announcement-launch:focus-visible .envelope-letter{transform: translateY(-3px);}
.announcement-count{position: absolute; right: -5px; top: -5px; min-width: 18px; padding: 2px 4px; background: var(--accent); color: var(--bg); border: 1px solid var(--bg); border-radius: 10px; font-size: 10px; font-weight: 700; line-height: 1.3;}
.announcement-count[hidden]{display: none;}
.announcement-inbox{padding: 0px; width: min(560px, -24px + 100vw); max-height: 80dvh; border: 1px solid var(--line); border-radius: var(--radius,12px); background: var(--panel,var(--bg)); color: var(--text); box-shadow: rgba(0, 0, 0, 0.6) 0px 28px 100px; overflow: auto;}
.announcement-inbox::backdrop{background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px);}
.announcement-inbox-head{display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px; border-bottom: 1px solid var(--line); background: var(--panel,var(--bg));}
.announcement-inbox-head > div{display: flex; align-items: center; gap: 14px;}
.announcement-inbox-head h2{margin: 4px 0px 0px; font-size: 21px;}
.announcement-inbox-head .eyebrow{font-size: 9px; letter-spacing: 0.15em;}
.announcement-inbox-head .envelope-flap{transform: scaleY(-1);}
.announcement-inbox-head .envelope-letter{transform: translateY(-4px);}
.announcement-inbox-body{padding: 20px; animation: 0.4s ease 0s 1 normal both running letter-arrive;}
.announcement-item{margin-bottom: 12px; border: 1px solid var(--line); background: var(--surface,var(--panel));}
.announcement-item summary{display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; cursor: pointer;}
.announcement-item summary strong{font-size: 14px; overflow-wrap: anywhere;}
.announcement-item summary small{display: block; margin-top: 6px; color: var(--muted); font-size: 11px;}
.announcement-unread{color: var(--accent); font-size: 10px; flex-shrink: 0;}
.announcement-letter{padding: 20px; border-top: 1px solid var(--line);}
.announcement-letter .eyebrow{font-size: 9px; letter-spacing: 0.15em; color: var(--accent);}
.announcement-letter h3{font-size: 21px; margin: 12px 0px; overflow-wrap: anywhere;}
.announcement-copy{white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.75; font-size: 14px; margin-top: 22px;}
.announcement-empty{text-align: center; padding: 30px 12px; color: var(--muted);}
.announcement-empty svg{margin: 0px auto 20px; width: 54px; height: 44px; color: var(--accent);}
.announcement-admin{margin-bottom: 24px;}
.announcement-admin > details{margin-top: 18px;}
.announcement-admin form{display: grid; gap: 14px; margin-top: 18px;}
.announcement-admin textarea{width: 100%; resize: vertical;}
.announcement-preview{border: 1px solid var(--line); background: var(--surface,var(--panel));}
.announcement-history-row{display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere;}
@keyframes letter-arrive { 
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@media (prefers-reduced-motion: reduce) {.announcement-inbox-body{animation: auto ease 0s 1 normal none running none;}
.envelope-flap, .envelope-letter{transition: none;}}
@media (max-width: 560px) {.announcement-inbox-head, .announcement-inbox-body{padding: 14px;}
.announcement-launch{min-width: 40px;}
.announcement-history-row{flex-wrap: wrap;}}
.announcement-inbox[open] .envelope-flap{animation: 0.45s ease 0s 1 normal both running envelope-open;}
.announcement-inbox[open] .envelope-letter{animation: 0.6s ease 0s 1 normal both running envelope-rise;}
@keyframes envelope-open { 
  0% { transform: scaleY(1); }
  100% { transform: scaleY(-1); }
}
@keyframes envelope-rise { 
  0% { transform: translateY(0px); }
  100% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {.announcement-inbox[open] .envelope-flap, .announcement-inbox[open] .envelope-letter{animation: auto ease 0s 1 normal none running none;}}
.topbar .topbar-right > button{box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 36px !important; min-height: 36px !important; padding-top: 0px !important; padding-bottom: 0px !important;}
.topbar .announcement-launch{width: 40px; padding-left: 8px !important; padding-right: 8px !important;}
.announcement-launch .announcement-envelope{width: 26px; height: 24px;}
.announcement-launch .envelope-letter{opacity: 0; transform: translateY(4px); transition: opacity 0.2s, transform 0.4s;}
.announcement-launch:hover .envelope-letter, .announcement-launch:focus-visible .envelope-letter{opacity: 1; transform: translateY(-3px);}
@media (pointer: coarse) {.topbar .topbar-right > button{height: 44px !important; min-height: 44px !important;}
.topbar .announcement-launch{width: 44px;}}
@media (prefers-reduced-motion: reduce) {.announcement-launch .envelope-letter{transition: none;}}
.announcement-copy{white-space: normal;}
.announcement-copy p{white-space: pre-wrap; margin: 0px 0px 1em;}
.announcement-copy a{color: var(--accent); text-decoration: underline; text-underline-offset: 3px;}
.announcement-copy blockquote{margin: 12px 0px; padding: 10px 16px; border-left: 3px solid var(--accent); background: var(--surface,var(--panel));}
.announcement-copy pre{overflow: auto; padding: 12px; background: var(--surface,var(--panel));}
.announcement-copy ul, .announcement-copy ol{padding-left: 24px;}
.announcement-copy h1{font-size: 25px;}
.announcement-copy h2{font-size: 22px;}
.announcement-photos{display: grid; gap: 12px; margin-top: 16px;}
.announcement-photos:empty{display: none;}
.announcement-photos img{width: 100%; max-height: 480px; object-fit: contain; border: 1px solid var(--line); background: var(--surface,var(--panel));}
.announcement-link-tools{display: flex; flex-wrap: wrap; gap: 10px; align-items: end;}
.announcement-link-tools label{flex: 1 1 180px;}
.announcement-format-help p{line-height: 1.7; font-size: 12px;}
.announcement-admin input[type="file"]{max-width: 100%;}
.announcement-admin > details > summary{font-size: 11px; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase;}
.announcement-admin > details > [data-announcement-action="history"]{margin-top: 14px;}
.announcement-format-tip{position: relative; justify-self: start; max-width: 100%;}
.announcement-format-trigger{display: inline-flex; align-items: center; gap: 7px; font-size: 11px; line-height: 1.5; padding: 6px 10px; min-height: 30px; border: 1px solid var(--line); color: var(--accent); background: var(--surface,var(--panel));}
.announcement-format-trigger > span{font-size: 15px;}
.announcement-format-guide{position: absolute; z-index: 20; top: 100%; left: 0px; box-sizing: border-box; width: min(390px, -72px + 100vw); padding: 16px; background: var(--panel,var(--bg)); color: var(--text); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 3px solid var(--accent); border-radius: var(--radius,8px); box-shadow: rgba(0, 0, 0, 0.533) 0px 12px 32px; font-size: 12px; line-height: 1.6;}
.announcement-format-guide[hidden]{display: none;}
.announcement-format-guide dl{display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; margin: 12px 0px;}
.announcement-format-guide dt{font-family: monospace; color: var(--accent);}
.announcement-format-guide dd{margin: 0px;}
.announcement-format-guide p{font-size: 12px; margin: 10px 0px 0px;}
.announcement-format-guide > code{display: block; overflow-wrap: anywhere; margin-top: 7px;}
.announcement-format-guide{overflow-y: auto;}
.announcement-format-guide.opens-above{top: auto; bottom: 100%;}
.announcement-history-preview{margin: 0px 0px 16px;}
.announcement-history-preview > summary{cursor: pointer; padding: 8px 0px;}
.announcement-admin .announcement-preview .announcement-photos{grid-template-columns: repeat(2, minmax(0px, 1fr)); margin-top: 8px;}
.announcement-admin .announcement-preview img{height: 130px;}
.announcement-item, .announcement-preview{background: color-mix(in srgb,var(--panel) 75%,var(--surface));}
.announcement-item > summary{background: color-mix(in srgb,var(--panel) 90%,var(--surface));}
.announcement-photos img, .announcement-copy pre, .announcement-copy blockquote{background: color-mix(in srgb,var(--panel) 50%,var(--surface));}
.announcement-item > .announcement-letter{border-top: 0px;}
.announcement-item > .announcement-unread{display: block; padding: 12px 20px 0px;}
.announcement-item > .announcement-unread:empty{display: none;}
.announcement-photos img{display: block; width: auto; height: auto; max-width: 100%; max-height: 480px; margin: 0px auto; box-shadow: none; border: 0px !important; background: transparent !important;}
.announcement-photos{border: 0px; background: transparent; padding: 0px;}
:root .conversation.has-bg{isolation: isolate; overflow: hidden; background-image: none !important;}
:root .conversation.has-bg::before{content: ""; position: absolute; inset: calc(-1 * var(--story-blur,0px)); z-index: 0; pointer-events: none; filter: blur(var(--story-blur,0px)); background: var(--story-background) center/cover no-repeat !important; opacity: var(--story-opacity,1) !important; backdrop-filter: none !important;}
:root .conversation.has-bg > .chat-scroll, :root .conversation.has-bg > .composer-wrap{position: relative; z-index: 1;}
.story-layout-settings .story-background-blur{align-items: center; flex-wrap: nowrap; gap: 8px; padding: 5px 8px; border: 1px solid var(--line); font-size: 11px; line-height: 20px; min-height: 32px; box-sizing: border-box; width: 100%; display: flex !important; flex-direction: row !important; margin: 4px 0px 0px !important;}
.story-layout-settings .story-background-blur input[type="range"]{flex: 1 1 0px; min-width: 0px; accent-color: var(--accent); width: 0px !important; height: 20px !important; min-height: 20px !important; padding: 0px !important; margin: 0px !important;}
.story-background-blur output{flex: 0 0 30px; min-width: 30px; text-align: right; white-space: nowrap;}
[data-background-preview]{overflow: hidden;}
[data-background-preview] img{opacity: var(--preview-opacity,1); filter: blur(var(--preview-blur,0px));}
:root.custom-ui #chat-scroll[data-message-translucent] .message{--message-surface: var(--custom-surface);}