/* Scoped to the character dialogue; the chat and its audio settings are untouched. */
dialog#custom-characters.loult-character-menu {
    --cm-ink: #f8f4ff;
    --cm-muted: #b7a5d7;
    --cm-line: #9170bf69;
    --cm-violet: #a26aff;
    box-sizing: border-box;
    width: min(1080px, calc(100% - 48px));
    max-width: none;
    height: min(700px, calc(100dvh - 64px));
    max-height: none;
    margin: auto;
    padding: 18px;
    overflow: hidden;
    border: 1px solid #9870d394;
    border-radius: 22px;
    background: radial-gradient(ellipse at 94% 0, #4d32894a, transparent 40%),
        radial-gradient(ellipse at 0 0, #702fa12b, transparent 32%), #100d1c;
    box-shadow: 0 0 0 1px #b78ce31c, 0 32px 120px #000b, inset 0 1px 0 #d6baff26;
    color: var(--cm-ink);
    font: 13px/1.4 ui-rounded, "Trebuchet MS", system-ui, sans-serif;
    color-scheme: dark;
}
#custom-characters.loult-character-menu::backdrop { background: #080510b8; backdrop-filter: blur(9px); }
#custom-characters.loult-character-menu *,
#custom-characters.loult-character-menu *::before,
#custom-characters.loult-character-menu *::after { box-sizing: border-box; }
#custom-characters.loult-character-menu[open] { display: flex; flex-direction: column; gap: 14px; }
#custom-characters.loult-character-menu [hidden],
#custom-characters.loult-character-menu .cm-native { display: none !important; }
#custom-characters.loult-character-menu :is(h2, h3, p, form) { margin: 0; }
#custom-characters.loult-character-menu :is(button, input, summary) { font: inherit; }
#custom-characters.loult-character-menu button { cursor: pointer; }
#custom-characters.loult-character-menu button:disabled { cursor: default; }
#custom-characters.loult-character-menu :is(button, input, summary):focus-visible {
    outline: 2px solid #dcb5ff; outline-offset: 4px;
}
#custom-characters.loult-character-menu svg {
    display: inline-block; flex-shrink: 0; width: 22px; height: 22px;
    fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
#custom-characters.loult-character-menu .cm-heading { display: flex; align-items: center; gap: 12px; flex: none; padding-right: 0; }
#custom-characters.loult-character-menu .cm-heading-icon {
    position: relative; display: grid; place-items: center; flex: 0 0 48px; height: 48px;
    color: #d89bff; filter: drop-shadow(0 0 12px #bb63ff88);
}
#custom-characters.loult-character-menu .cm-heading-icon svg { width: 44px; height: 44px; stroke-width: 1.6; }
#custom-characters.loult-character-menu .cm-heading-icon::after { content: '✦'; position: absolute; top: 0; right: -2px; color: #ffdf70; font-size: 16px; }
#custom-characters.loult-character-menu .cm-heading-copy { flex: 1; min-width: 0; }
#custom-characters.loult-character-menu h2 { color: #fbf9ff; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.5px; }
#custom-characters.loult-character-menu .cm-heading-copy p { margin-top: 4px; color: #c7b1ed; font-size: 13px; }
#custom-characters.loult-character-menu .custom-heading { display: block; padding: 0; border: 0; background: none; }
#custom-characters.loult-character-menu .custom-heading button {
    display: grid; place-items: center; width: 36px; height: 36px; padding: 0; margin: 0;
    border: 1px solid #b388d978; border-radius: 11px;
    background: linear-gradient(145deg, #69448d, #342244); color: #fff; font: 27px/1 system-ui, sans-serif;
    box-shadow: inset 0 1px 9px #c98cff22;
}
#custom-characters.loult-character-menu .cm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; flex: 1; min-height: 0; }
#custom-characters.loult-character-menu .cm-browser { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
#custom-characters.loult-character-menu .cm-categories { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: none; }
#custom-characters.loult-character-menu .cm-category {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 33px;
    margin: 0; padding: 6px 9px; border: 1px solid #80609b66; border-radius: 10px;
    background: linear-gradient(135deg, #30243e80, #211b2e); color: #eee4ff; white-space: nowrap; font-size: 11px;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
#custom-characters.loult-character-menu .cm-category svg { width: 16px; height: 16px; color: #c9a9f7; }
#custom-characters.loult-character-menu .cm-category[data-category=music] svg { color: #f289c4; }
#custom-characters.loult-character-menu .cm-category[aria-pressed=true] {
    border-color: #e4b4ff; background: linear-gradient(145deg, #b05bff, #7417eb 85%);
    box-shadow: 0 0 14px #933dff50, inset 0 1px 4px #fff5; color: #fff;
}
#custom-characters.loult-character-menu .cm-category[aria-pressed=true] svg { color: #ffe3a8; }
#custom-characters.loult-character-menu .cm-catalog-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; min-height: 24px; }
#custom-characters.loult-character-menu .cm-count { color: var(--cm-muted); font-size: 11px; }
#custom-characters.loult-character-menu .cm-grid {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: max-content;
    align-content: start; gap: 9px; flex: 1; min-height: 0;
    padding: 5px 7px 8px 5px; margin: -5px -7px -8px -5px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #77529c #1b1429;
}
#custom-characters.loult-character-menu .cm-card {
    position: relative; display: block; width: 100%; aspect-ratio: .88; min-width: 0; margin: 0; padding: 0;
    overflow: hidden; isolation: isolate; border: 1px solid #a57cd297; border-radius: 11px;
    background: #21182e; color: #fff; text-align: left;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
#custom-characters.loult-character-menu .cm-card::after {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg, #100f1700 33%, #0e0a18a6 68%, #0e0b21fa 100%);
}
#custom-characters.loult-character-menu .cm-card-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
#custom-characters.loult-character-menu .cm-card-copy { position: absolute; z-index: 1; bottom: 8px; left: 8px; right: 6px; display: flex; flex-direction: column; gap: 3px; }
#custom-characters.loult-character-menu .cm-card-copy strong { font-size: 13px; line-height: 1.16; letter-spacing: -.3px; overflow-wrap: anywhere; text-shadow: 0 1px 5px #000; }
#custom-characters.loult-character-menu .cm-card-category { display: flex; align-items: center; gap: 4px; color: #e4d6ff; font-size: 9px; line-height: 1.2; }
#custom-characters.loult-character-menu .cm-card-category svg { width: 13px; height: 13px; color: #ba8ff0; }
#custom-characters.loult-character-menu .cm-card-crown { position: absolute; top: 6px; right: 6px; z-index: 1; color: #ffdc5f; filter: drop-shadow(0 2px 3px #3a1e25); }
#custom-characters.loult-character-menu .cm-card-crown svg { width: 20px; height: 20px; fill: #ffc94b; stroke: #ffe7a3; stroke-width: 1.2; }
#custom-characters.loult-character-menu .cm-card[aria-pressed=true] { border: 2px solid #e3a2ff; box-shadow: 0 0 0 1px #d68bff, 0 0 14px #b64dffcc, inset 0 0 12px #d292ff66; }
#custom-characters.loult-character-menu .cm-card:disabled { cursor: wait; }
#custom-characters.loult-character-menu .cm-add {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 10px;
    border-style: dashed; border-color: #b783ef; background: radial-gradient(ellipse at 50% 30%, #7742b53d, transparent 75%), #20132f;
    color: #e1c6ff; text-align: center;
}
#custom-characters.loult-character-menu .cm-add::after { display: none; }
#custom-characters.loult-character-menu .cm-add-symbol {
    display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid #bb8ae694;
    border-radius: 50%; background: #a062dd18; box-shadow: 0 0 20px #9c50e827;
}
#custom-characters.loult-character-menu .cm-add-symbol svg { width: 28px; height: 28px; }
#custom-characters.loult-character-menu .cm-add-copy { display: flex; flex-direction: column; gap: 3px; font-size: 11px; line-height: 1.25; }
#custom-characters.loult-character-menu .cm-add-copy strong { color: #f5eaff; font-size: 13px; }
#custom-characters.loult-character-menu .cm-empty { padding: 36px 16px; text-align: center; color: var(--cm-muted); }
#custom-characters.loult-character-menu .cm-panel {
    display: flex; flex-direction: column; gap: 9px; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 12px 12px; border: 1px solid #8154af51; border-radius: 16px;
    background: radial-gradient(ellipse at 90% 9%, #48248a29, transparent 47%), #151020;
    scrollbar-width: thin; scrollbar-color: #77529c #1b1429;
}
#custom-characters.loult-character-menu .cm-hero { position: relative; flex: none; height: 150px; margin: 0 -12px 0; overflow: hidden; border-radius: 15px 15px 0 0; isolation: isolate; background: radial-gradient(ellipse at 50% 70%, #8043c8, #2a1c54 55%, #1d1731); }
#custom-characters.loult-character-menu .cm-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #0e0a1c00 20%, #15102022 45%, #151020 100%); }
#custom-characters.loult-character-menu .cm-hero-image { width: 100%; height: 100%; object-fit: cover; object-position: center 23%; }
#custom-characters.loult-character-menu .cm-hero-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #ce8fff; filter: drop-shadow(0 0 16px #b15dfd70); }
#custom-characters.loult-character-menu .cm-hero-empty svg { width: 76px; height: 76px; stroke-width: 1.3; }
#custom-characters.loult-character-menu .cm-hero-crown { position: absolute; right: 12px; top: 11px; color: #ffd56e; transform: rotate(14deg); filter: drop-shadow(0 0 8px #ffb75560); }
#custom-characters.loult-character-menu .cm-hero-crown svg { width: 32px; height: 32px; stroke-width: 1.5; }
#custom-characters.loult-character-menu .cm-hero-copy { position: absolute; z-index: 2; left: 14px; bottom: 6px; right: 12px; }
#custom-characters.loult-character-menu .cm-hero-copy h3 { font-size: 23px; line-height: 1.1; font-weight: 800; letter-spacing: -.5px; overflow-wrap: anywhere; }
#custom-characters.loult-character-menu .cm-hero-category { display: flex; gap: 6px; align-items: center; color: #ccb7ec; margin-top: 5px; font-size: 12px; }
#custom-characters.loult-character-menu .cm-hero-category svg { width: 16px; height: 16px; color: #b787ef; }
#custom-characters.loult-character-menu .cm-protected { display: inline-flex; align-items: center; gap: 4px; color: #d9b7fd; font-size: 10px; margin-top: 5px; }
#custom-characters.loult-character-menu .cm-protected svg { width: 13px; height: 13px; }
#custom-characters.loult-character-menu .cm-form { display: flex; flex-direction: column; gap: 10px; }
#custom-characters.loult-character-menu .cm-field { min-width: 0; }
#custom-characters.loult-character-menu .cm-field-label { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; color: #f2e8ff; font-size: 12px; font-weight: 650; }
#custom-characters.loult-character-menu .cm-field-label svg { color: #bb7ff4; width: 19px; height: 19px; }
#custom-characters.loult-character-menu .cm-name-row { display: flex; align-items: center; gap: 7px; }
#custom-characters.loult-character-menu :is(#custom-character-name, #custom-cookie-value) {
    display: block; flex: 1; width: 100%; min-width: 0; height: 34px; margin: 0; padding: 7px 10px;
    border: 1px solid #a279cfbd; border-radius: 9px; background: #c3a4f210; color: #f3eaff; box-shadow: inset 0 1px 4px #0003;
}
#custom-characters.loult-character-menu #custom-character-name::placeholder { color: #a18abb; }
#custom-characters.loult-character-menu #custom-character-name:disabled { color: #cdbbe3; opacity: 1; -webkit-text-fill-color: #cdbbe3; }
#custom-characters.loult-character-menu .cm-dice { display: grid; place-items: center; width: 33px; height: 34px; padding: 0; margin: 0; border: 1px solid #9e79ca66; border-radius: 9px; background: #52347740; color: #d0a3ff; }
#custom-characters.loult-character-menu .cm-dice:disabled { opacity: .4; }
#custom-characters.loult-character-menu .cm-upload-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
#custom-characters.loult-character-menu .cm-upload { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; min-width: 0; min-height: 72px; padding: 9px 7px; gap: 3px; border: 1px dashed #a080c7b3; border-radius: 10px; background: #b08adb0b; text-align: center; cursor: pointer; }
#custom-characters.loult-character-menu .cm-upload > svg { width: 23px; height: 23px; color: #b374ed; margin-bottom: 1px; }
#custom-characters.loult-character-menu .cm-upload-main { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d8c1f2; font-size: 11px; }
#custom-characters.loult-character-menu .cm-upload small { color: #9b85b5; font-size: 10px; }
#custom-characters.loult-character-menu .cm-upload-locked { cursor: default; border-style: solid; border-color: #9d7cc347; }
#custom-characters.loult-character-menu .cm-upload:focus-within { outline: 2px solid #dab1ff; outline-offset: 3px; }
#custom-characters.loult-character-menu .cm-dragging { background: #9c55f82d; border-color: #daa9ff; }
#custom-characters.loult-character-menu .cm-file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#custom-characters.loult-character-menu .cm-avatar { display: grid; place-items: center; flex: 0 0 59px; height: 59px; border-radius: 50%; border: 2px solid #a365f3; background: #2b1b40; box-shadow: 0 0 16px #7f45ca22; overflow: hidden; }
#custom-characters.loult-character-menu #custom-character-preview { width: 100%; height: 100%; margin: 0; border: 0; object-fit: cover; }
#custom-characters.loult-character-menu .cm-player { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 41%; min-width: 90px; }
#custom-characters.loult-character-menu .cm-playback { display: flex; align-items: center; gap: 5px; min-width: 0; height: 39px; border: 1px solid #845eaa66; border-radius: 11px; padding: 4px; background: #b08adb08; }
#custom-characters.loult-character-menu .cm-play { display: grid; flex: 0 0 31px; place-items: center; width: 31px; height: 31px; border: 1px solid #a475cdab; border-radius: 50%; background: #372248; color: #d5b2ff; margin: 0; padding: 5px; }
#custom-characters.loult-character-menu .cm-play svg { width: 18px; height: 18px; fill: currentColor; }
#custom-characters.loult-character-menu .cm-play:disabled { opacity: .45; }
#custom-characters.loult-character-menu .cm-wave { display: flex; flex: 1; align-items: center; justify-content: space-between; height: 33px; min-width: 0; overflow: hidden; gap: 2px; color: #a779e7; }
#custom-characters.loult-character-menu .cm-wave i { display: block; flex: 1; min-width: 2px; max-width: 3px; height: var(--bar-height); border-radius: 4px; background: currentColor; opacity: .6; }
#custom-characters.loult-character-menu .cm-playing .cm-wave i { animation: cm-wave .7s var(--bar-delay) ease-in-out infinite alternate; opacity: 1; }
#custom-characters.loult-character-menu .cm-audio-time { text-align: right; color: var(--cm-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
#custom-characters.loult-character-menu .cm-primary {
    display: flex; flex: none; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 38px; margin: 0; padding: 8px 10px;
    border: 1px solid #cf9aff; border-radius: 10px; background: linear-gradient(180deg, #a24dff, #7729e6 70%, #6823d1);
    box-shadow: inset 0 1px 6px #ffffff45, 0 4px 18px #6a1ac51c; color: #fff; font-size: 12px; font-weight: 750;
}
#custom-characters.loult-character-menu .cm-primary svg { color: #ffdc68; fill: #ffd968; stroke-width: 1.3; }
#custom-characters.loult-character-menu .cm-primary:disabled { opacity: .5; cursor: wait; }
#custom-characters.loult-character-menu .cm-surprise { display: flex; flex: none; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 34px; margin: 0; padding: 6px; border: 1px solid #9f77c999; border-radius: 10px; background: #c3a4f207; color: #eadffb; font-size: 11px; }
#custom-characters.loult-character-menu .cm-surprise svg { width: 18px; height: 18px; color: #c5a1ec; }
#custom-characters.loult-character-menu .cm-protection-note { color: #ad96c7; font-size: 10px; line-height: 1.45; }
#custom-characters.loult-character-menu .cm-protection-note:empty { display: none; }
#custom-characters.loult-character-menu .cm-cookies { font-size: 11px; color: var(--cm-muted); }
#custom-characters.loult-character-menu .cm-cookies summary { cursor: pointer; padding: 4px 0; }
#custom-characters.loult-character-menu #custom-character-cookie { display: flex; flex-wrap: wrap; gap: 9px; padding: 12px 0 0; border: 0; background: transparent; }
#custom-characters.loult-character-menu #custom-character-cookie h3 { display: none; }
#custom-characters.loult-character-menu #custom-character-cookie label { display: block; width: 100%; }
#custom-characters.loult-character-menu #custom-character-cookie button { margin: 0; padding: 6px 9px; border: 1px solid #9f77c96b; border-radius: 8px; background: #9a76c020; color: #eee4ff; font-size: 11px; }
#custom-characters.loult-character-menu #custom-character-cookie button:disabled { opacity: .4; }
#custom-characters.loult-character-menu #custom-character-cookie p { line-height: 1.5; }
#custom-characters.loult-character-menu #custom-cookie-value { height: 34px; margin-top: 5px; font: 10px/1.5 monospace; }
#custom-characters.loult-character-menu .cm-status { color: #d3b9f3; font-size: 11px; line-height: 1.5; }
#custom-characters.loult-character-menu .cm-status:empty { display: none; }
@keyframes cm-wave { to { transform: scaleY(.4); } }
@media (hover: hover) {
    #custom-characters.loult-character-menu .cm-card:not(:disabled):hover { border-color: #dcb3ff; transform: translateY(-2px); box-shadow: 0 3px 14px #9e4dfd36; }
    #custom-characters.loult-character-menu .cm-category:hover { border-color: #c49ae3; }
    #custom-characters.loult-character-menu .cm-primary:not(:disabled):hover { filter: brightness(1.12); }
    #custom-characters.loult-character-menu :is(.cm-add, .cm-surprise):not(:disabled):hover { color: #fff; }
}
@media (max-width: 1100px) {
    dialog#custom-characters.loult-character-menu { width: calc(100% - 40px); padding: 16px; }
    #custom-characters.loult-character-menu .cm-layout { gap: 14px; grid-template-columns: minmax(0, 1fr) 280px; }
    #custom-characters.loult-character-menu .cm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    #custom-characters.loult-character-menu .cm-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; }
    #custom-characters.loult-character-menu .cm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    dialog#custom-characters.loult-character-menu { width: calc(100% - 24px); height: min(640px, calc(100dvh - 32px)); padding: 14px 12px; border-radius: 18px; }
    #custom-characters.loult-character-menu[open] { gap: 12px; }
    #custom-characters.loult-character-menu .cm-heading { gap: 10px; align-items: flex-start; }
    #custom-characters.loult-character-menu .cm-heading-copy p { font-size: 11px; max-width: 220px; }
    #custom-characters.loult-character-menu h2 { font-size: 21px; }
    #custom-characters.loult-character-menu .cm-heading-icon { flex-basis: 34px; height: 40px; }
    #custom-characters.loult-character-menu .cm-heading-icon svg { width: 32px; height: 36px; }
    #custom-characters.loult-character-menu .cm-heading-icon::after { font-size: 14px; right: -4px; }
    #custom-characters.loult-character-menu .custom-heading button { width: 33px; height: 33px; font-size: 26px; border-radius: 10px; }
    #custom-characters.loult-character-menu .cm-layout { display: block; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
    #custom-characters.loult-character-menu .cm-browser { display: flex; gap: 10px; }
    #custom-characters.loult-character-menu .cm-categories { flex-wrap: nowrap; overflow-x: auto; padding: 3px 3px 6px; scrollbar-width: thin; }
    #custom-characters.loult-character-menu .cm-category { flex: none; }
    #custom-characters.loult-character-menu .cm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: min(330px, 45dvh); overflow-y: auto; flex: none; margin: 0; padding: 4px; gap: 8px; }
    #custom-characters.loult-character-menu .cm-card-copy { left: 7px; bottom: 8px; right: 5px; }
    #custom-characters.loult-character-menu .cm-card-copy strong { font-size: 12px; }
    #custom-characters.loult-character-menu .cm-card-category { font-size: 9px; gap: 3px; }
    #custom-characters.loult-character-menu .cm-card-category svg { width: 12px; height: 12px; }
    #custom-characters.loult-character-menu .cm-card-crown { top: 5px; right: 5px; }
    #custom-characters.loult-character-menu .cm-card-crown svg { width: 19px; height: 19px; }
    #custom-characters.loult-character-menu .cm-panel { overflow-y: visible; margin-top: 12px; padding: 0 12px 12px; }
    #custom-characters.loult-character-menu .cm-hero { height: 140px; }
    #custom-characters.loult-character-menu .cm-hero-image { object-position: center 26%; }
    #custom-characters.loult-character-menu .cm-catalog-meta { padding: 0 3px; }
    #custom-characters.loult-character-menu .cm-count { font-size: 11px; }
    #custom-characters.loult-character-menu .cm-add { gap: 8px; padding: 8px; }
    #custom-characters.loult-character-menu .cm-add-symbol { width: 38px; height: 38px; }
    #custom-characters.loult-character-menu .cm-add-symbol svg { width: 24px; height: 24px; }
    #custom-characters.loult-character-menu #custom-character-name { font-size: 16px; }
}
@media (max-width: 480px) {
    #custom-characters.loult-character-menu .cm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
    #custom-characters.loult-character-menu .cm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #custom-characters.loult-character-menu .cm-heading-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    #custom-characters.loult-character-menu *, #custom-characters.loult-character-menu *::before,
    #custom-characters.loult-character-menu *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}