/ ============================================================================
SILLYTAVERN CUSTOM CSS THEME
PROJECT: 「朱殷 / SHUAN」 — East Asian Cinematic Horror & Lacquer Gel UI
============================================================================
/

/* ============================================================================

  1. ROOT CSS VARIABLES (Global Theme Tokens)
    ============================================================================ /
    :root {
    /     --- Core Palette (Pure Contrast) --- /
    --shuan-void: #000000; /     Absolute black /
    --shuan-lacquer: #080808; /     Dark environment backing /
    --shuan-lacquer-light: #141414; /     Elevated surface /
    --shuan-miko-red: #d90000; /     Vibrant Torii / Blood red /
    --shuan-miko-dark: #8a0000; /     Coagulated red /
    --shuan-bone: #e8e4dc; /     Stark white with slight age /
    --shuan-ash: #8c8c8c; /     Muted interface text /
    --shuan-gold: #9e814d; /     Tarnished shrine gold */

    / --- 2000s Lacquer / Gel Materials (Volumetric UI) --- /
    --gel-lacquer: linear-gradient(180deg, #1c1c1c 0%, #111111 49%, #000000 50%, #050505 100%);
    --gel-red: linear-gradient(180deg, #ed0000 0%, #b80000 49%, #8a0000 50%, #9e0000 100%);

    / Physical edge bevels (no emissive glows) /
    --bevel-top: inset 0 1px 0 rgba(255, 255, 255, 0.15);
    --bevel-bot: inset 0 -1px 0 rgba(0, 0, 0, 1), 0 2px 4px rgba(0,0,0,0.8);
    --bevel-press: inset 0 2px 5px rgba(0,0,0,1);

    / --- Typography --- /
    --font-mincho: "MS Mincho", "SimSun", "Noto Serif CJK JP", serif;
    --font-gothic: "MS Gothic", "Noto Sans CJK JP", sans-serif;

    / --- Smart Theme Core Variables --- /
    --SmartThemeBodyColor: var(--shuan-bone);
    --SmartThemeQuoteColor: var(--shuan-miko-red);
    --SmartThemeEmColor: var(--shuan-ash);
    --SmartThemeChatTintColor: rgba(0, 0, 0, 0.95);
    --SmartThemeBlurTintColor: rgba(8, 8, 8, 0.98);
    --SmartThemeBorderColor: var(--shuan-miko-dark);
    --SmartThemeAccentColor: var(--shuan-miko-red);
    }

/* ============================================================================

  1. GLOBAL / BODY
    ============================================================================ */
    body {
    background-color: var(--shuan-void) !important;
    color: var(--SmartThemeBodyColor) !important;
    font-family: var(--font-gothic), sans-serif !important;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 1) !important;
    }

/* ============================================================================

  1. TOP BAR
    ============================================================================ */

top-bar {

⎗
✓
1
2
3
4
background: var(--gel-lacquer) !important;
border-bottom: 2px solid var(--shuan-miko-red) !important;
backdrop-filter: blur(0px) !important; /* Sharp cinematic execution */
box-shadow: var(--bevel-top), var(--bevel-bot) !important;

}

top-bar .fa-solid,

top-bar .fa-fw {

⎗
✓
1
2
color: var(--shuan-bone) !important;
text-shadow: 1px 1px 1px #000 !important;

}

top-bar .drawer-toggle:hover {

⎗
✓
1
2
3
4
background: var(--gel-red) !important;
color: #ffffff !important;
/* Physical press simulation, no blur/neon */
box-shadow: inset 0 0 0 1px var(--shuan-void), var(--bevel-top) !important;

}

/* ============================================================================

  1. DRAWERS / SIDE PANELS (Left, Right, Extension)
    ============================================================================ /
    .drawer-content {
    background-color: #080808 !important; /     Fixed: Absolute solid background */
    border: 1px solid var(--shuan-miko-dark) !important;
    box-shadow: 10px 0 20px rgba(0,0,0,1), inset 1px 0 0 rgba(255,255,255,0.05) !important;
    }

.openDrawer .drawer-content {
background-color: #080808 !important;
}

.drawer-header {
background: var(--gel-lacquer) !important;
border-bottom: 1px solid var(--shuan-miko-red) !important;
box-shadow: var(--bevel-top) !important;
}

left-nav-panel .drawer-content { border-right: 2px solid var(--shuan-miko-red) !important; }

right-nav-panel .drawer-content { border-left: 2px solid var(--shuan-miko-red) !important; }

extensions-panel .drawer-content { border-left: 2px solid var(--shuan-miko-red) !important; }

/* ============================================================================

  1. CHARACTER LIST / CARD GRID
    ============================================================================ /
    .character_select {
    background: var(--gel-lacquer) !important;
    border: 1px solid var(--shuan-lacquer-light) !important;
    border-radius: 0px !important; /     Rigid, physical frames /
    box-shadow: var(--bevel-top), 0 3px 6px rgba(0,0,0,0.8) !important;
    transition: none !important; /     2000s instant snapping */
    }

.character_select:hover {
background: #111111 !important;
border-color: var(--shuan-miko-red) !important;
outline: 1px solid var(--shuan-miko-red) !important;
outline-offset: -2px !important;
}

.character_select .ch_name {
color: var(--shuan-bone) !important;
font-weight: normal !important;
font-family: var(--font-mincho) !important;
font-size: 1.1em !important;
}

.character_select .ch_description,
.character_select .tags {
color: var(--shuan-ash) !important;
opacity: 1 !important;
}

.character_select.grid {
background: var(--gel-lacquer) !important;
border-radius: 0px !important;
border: 1px solid var(--shuan-lacquer-light) !important;
}

.group_select {
background: var(--gel-lacquer) !important;
border: 1px solid var(--shuan-lacquer-light) !important;
border-radius: 0px !important;
}

.group_select:hover {
background: #111111 !important;
border-color: var(--shuan-miko-red) !important;
}

.page_buttons button {
background: var(--gel-lacquer) !important;
color: var(--shuan-bone) !important;
border: 1px solid var(--shuan-lacquer-light) !important;
border-radius: 0px !important;
box-shadow: var(--bevel-top), var(--bevel-bot) !important;
}

/* ============================================================================

  1. CHAT AREA (#sheld)
    ============================================================================ */

sheld {

⎗
✓
1
background-color: transparent !important;

}

chat {

⎗
✓
1
background-color: transparent !important;

}

/* ============================================================================

  1. CHAT MESSAGES
    ============================================================================ /
    .mes {
    background-color: rgba(5, 5, 5, 0.95) !important; /     Deep cinematic shadow */
    border: 1px solid #1a1a1a !important;
    border-radius: 0px !important;
    box-shadow: 0 8px 15px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,0.02) !important;
    margin-bottom: 20px !important;
    }

.mes:hover {
background-color: rgba(12, 12, 12, 0.98) !important;
}

.mes:last-child {
border-bottom: 2px solid var(--shuan-miko-red) !important;
}

.mes[is_user="true"] {
background-color: rgba(15, 15, 15, 0.9) !important;
border-right: 3px solid var(--shuan-miko-dark) !important;
}

.mes[is_user="false"] {
background-color: rgba(5, 5, 5, 0.95) !important;
border-left: 3px solid var(--shuan-miko-red) !important;
}

.mes[is_system="true"] {
background-color: var(--shuan-void) !important;
border: 1px solid var(--shuan-ash) !important;
font-family: var(--font-mincho) !important;
}

.mes_text {
color: var(--shuan-bone) !important;
font-size: 15px !important;
line-height: 1.6 !important;
}

.mes_text em,
.mes_text p em {
color: var(--shuan-ash) !important;
font-style: normal !important; / Asian typesetting rarely uses slant italics /
/ Use a distinct marker or subtle color shift instead of slant /
}

.mes_text q,
.mes_text p q {
color: var(--shuan-miko-red) !important; / Vibrant red for speech /
font-family: var(--font-mincho) !important;
font-weight: normal !important;
text-shadow: 1px 1px 0px rgba(0,0,0,1) !important; / High contrast legibility /
}

.mes_text strong,
.mes_text p strong {
color: var(--shuan-bone) !important;
font-weight: bold !important;
border-bottom: 1px solid var(--shuan-miko-red) !important;
}

.mes_text pre {
background-color: var(--shuan-void) !important;
border: 1px solid var(--shuan-lacquer-light) !important;
border-radius: 0px !important;
box-shadow: inset 0 2px 5px rgba(0,0,0,1) !important; / Physical indentation /
}

.mes_text code {
background-color: #111111 !important;
color: var(--shuan-bone) !important;
font-family: "Courier New", monospace !important;
border: 1px solid #1a1a1a !important;
border-radius: 0px !important;
}

.mes_text a {
color: var(--shuan-miko-red) !important;
text-decoration: underline !important;
}

.mes_text blockquote {
border-left: 3px solid var(--shuan-miko-dark) !important;
background-color: #080808 !important;
color: var(--shuan-ash) !important;
margin: 5px 0 !important;
padding: 10px !important;
}

.mes_text hr {
border-color: #1a1a1a !important;
}

.mes_block .ch_name {
color: var(--shuan-bone) !important;
font-weight: normal !important;
font-family: var(--font-mincho) !important;
font-size: 1.25em !important;
letter-spacing: 1px !important;
}

.mes_block .timestamp,
.mes_block .tokenCounterDisplay {
color: #555555 !important; / Highly subdued /
font-size: 0.85em !important;
}

/* ============================================================================

  1. AVATARS
    ============================================================================ /
    .avatar img,
    .mes .avatar img {
    border: 1px solid var(--shuan-miko-dark) !important;
    border-radius: 0px !important; /     Harsh square frames /
    box-shadow: 0 4px 8px rgba(0,0,0,1) !important;
    filter: sepia(0.2) contrast(1.1) brightness(0.9) grayscale(10%) !important; /     Cinematic film-grading */
    }

.mes[is_user="true"] .avatar img {
border-color: var(--shuan-ash) !important;
}

.mes[is_user="false"] .avatar img {
border-color: var(--shuan-miko-red) !important;
}

/* ============================================================================

  1. MESSAGE ACTION BUTTONS
    ============================================================================ */
    .mes_buttons .mes_button,
    .mes_buttons .extraMesButtonsHint {
    color: #444444 !important;
    opacity: 1 !important;
    }

.mes_buttons .mes_button:hover {
color: var(--shuan-bone) !important;
background: var(--gel-red) !important; / Visceral red response /
border: 1px solid var(--shuan-void) !important;
box-shadow: var(--bevel-top), 0 2px 4px rgba(0,0,0,1) !important;
}

.swipe_left,
.swipe_right {
color: #444444 !important;
}

.swipe_left:hover,
.swipe_right:hover {
color: var(--shuan-miko-red) !important;
}

/* ============================================================================

  1. SEND FORM / INPUT AREA
    ============================================================================ */

send_textarea {

⎗
✓
1
2
3
4
5
6
7
8
background-color: var(--shuan-void) !important;
color: var(--shuan-bone) !important;
border: 1px solid var(--shuan-lacquer-light) !important;
border-radius: 0px !important;
font-family: var(--font-gothic) !important;
font-size: 15px !important;
/* Physical deep recession */
box-shadow: inset 0 4px 10px rgba(0,0,0,1), inset 0 1px 2px rgba(0,0,0,1) !important;

}

send_textarea:focus {

⎗
✓
1
2
3
border-color: var(--shuan-miko-red) !important;
outline: none !important;
box-shadow: inset 0 4px 10px rgba(0,0,0,1), 0 0 0 1px var(--shuan-miko-red) !important; /* Stark outline */

}

send_textarea::placeholder {

⎗
✓
1
color: var(--shuan-ash) !important;

}

send_form {

⎗
✓
1
2
3
background: var(--gel-lacquer) !important;
border-top: 2px solid var(--shuan-miko-red) !important;
box-shadow: 0 -4px 15px rgba(0,0,0,1), var(--bevel-top) !important;

}

send_but {

⎗
✓
1
2
3
4
5
color: #ffffff !important;
background: var(--gel-red) !important;
border: 1px solid var(--shuan-void) !important;
border-radius: 0px !important;
box-shadow: var(--bevel-top), var(--bevel-bot) !important;

}

send_but:hover {

⎗
✓
1
background: var(--shuan-miko-red) !important; /* Flashes pure solid red */

}

send_but:active {

⎗
✓
1
box-shadow: var(--bevel-press) !important;

}

mes_stop {

⎗
✓
1
2
3
4
color: var(--shuan-bone) !important;
background: var(--gel-lacquer) !important;
border: 1px solid #1a1a1a !important;
border-radius: 0px !important;

}

/* ============================================================================

  1. POPUPS / MODALS / DIALOGS
    ============================================================================ /
    .popup {
    background-color: rgba(0, 0, 0, 0.9) !important; /     Total blackout */
    }

.popup-content,
.dialogue_popup {
background: #080808 !important; / Fixed: completely solid box /
border: 2px solid var(--shuan-miko-red) !important;
border-radius: 0px !important;
box-shadow: 0 15px 40px rgba(0,0,0,1), inset 0 0 0 1px rgba(255,255,255,0.05) !important;
}

.popup-content h3,
.dialogue_popup_title {
color: var(--shuan-miko-red) !important;
font-family: var(--font-mincho) !important;
border-bottom: 1px solid #1a1a1a !important;
}

.popup-content p,
.dialogue_popup_text {
color: var(--shuan-bone) !important;
}

.popup-button-ok,
.popup-button-cancel {
background: var(--gel-lacquer) !important;
color: var(--shuan-bone) !important;
border: 1px solid #1a1a1a !important;
border-radius: 0px !important;
box-shadow: var(--bevel-top), var(--bevel-bot) !important;
}

.popup-button-ok:hover,
.popup-button-cancel:hover {
background: var(--gel-red) !important;
color: #ffffff !important;
border-color: var(--shuan-void) !important;
}

/* ============================================================================

  1. TOAST NOTIFICATIONS
    ============================================================================ */
    .toast-message {
    background: var(--gel-lacquer) !important;
    color: var(--shuan-bone) !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 0px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,1), var(--bevel-top) !important;
    }

.toast-success { border-left: 4px solid var(--shuan-ash) !important; }
.toast-error { border-left: 4px solid var(--shuan-miko-red) !important; }
.toast-warning { border-left: 4px solid var(--shuan-gold) !important; }
.toast-info { border-left: 4px solid var(--shuan-bone) !important; }

/* ============================================================================

  1. FORM CONTROLS
    ============================================================================ */
    input[type="text"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    .text_pole,
    textarea {
    background-color: var(--shuan-void) !important;
    color: var(--shuan-bone) !important;
    border: 1px solid var(--shuan-lacquer-light) !important;
    border-radius: 0px !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,1) !important;
    }

input[type="text"]:focus,
.text_pole:focus,
textarea:focus {
border-color: var(--shuan-miko-red) !important;
outline: none !important;
}

select {
background: var(--gel-lacquer) !important;
color: var(--shuan-bone) !important;
border: 1px solid var(--shuan-lacquer-light) !important;
border-radius: 0px !important;
box-shadow: var(--bevel-top), var(--bevel-bot) !important;
}

select option {
background-color: #080808 !important; / Solid background for options /
color: var(--shuan-bone) !important;
}

input[type="range"] {
accent-color: var(--shuan-miko-red) !important;
}

input[type="range"]::-webkit-slider-runnable-track {
background-color: var(--shuan-void) !important;
border: 1px solid #1a1a1a !important;
border-radius: 0px !important;
}

input[type="range"]::-webkit-slider-thumb {
background: var(--gel-red) !important;
border: 1px solid var(--shuan-void) !important;
border-radius: 0px !important; / Blocky mechanics /
box-shadow: var(--bevel-top), 0 2px 4px rgba(0,0,0,1) !important;
}

input[type="checkbox"],
input[type="radio"] {
accent-color: var(--shuan-miko-red) !important;
}

.checkbox-label {
color: var(--shuan-bone) !important;
}

/* ============================================================================

  1. BUTTONS
    ============================================================================
    Fixed Priority: Do NOT apply font-family here globally, to preserve FontAwesome. /
    .menu_button,
    .api_button {
    background: var(--gel-lacquer) !important;
    color: var(--shuan-bone) !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 0px !important;
    box-shadow: var(--bevel-top), var(--bevel-bot) !important;
    transition: none !important; /     2000s instant snapping */
    }

.menu_button:hover,
.api_button:hover {
background: var(--gel-red) !important;
color: #ffffff !important;
border-color: var(--shuan-void) !important;
}

.menu_button:active,
.api_button:active {
box-shadow: var(--bevel-press) !important;
transform: translateY(1px) !important;
}

.interactable {
border: 1px solid #1a1a1a !important;
border-radius: 0px !important;
}

.interactable:hover {
background: #111111 !important;
color: var(--shuan-bone) !important;
border-color: var(--shuan-miko-red) !important;
}

/* ============================================================================

  1. TAGS
    ============================================================================ /
    .tag {
    background: var(--gel-lacquer) !important;
    color: var(--shuan-ash) !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 0px !important; /     Pilly shape removed, made blocky */
    box-shadow: var(--bevel-top) !important;
    }

.tag:hover {
background: var(--gel-red) !important;
color: #ffffff !important;
border-color: var(--shuan-void) !important;
}

.tag .tag_remove {
color: var(--shuan-bone) !important;
}

.tag.folder_tag {
border-left: 3px solid var(--shuan-miko-dark) !important;
}

/* ============================================================================

  1. SCROLLBARS
    ============================================================================ /
    ::-webkit-scrollbar {
    width: 14px !important; /     Heavy thick 2000s scrollbars */
    height: 14px !important;
    }

::-webkit-scrollbar-track {
background-color: var(--shuan-void) !important;
border-left: 1px solid var(--shuan-lacquer-light) !important;
}

::-webkit-scrollbar-thumb {
background: var(--gel-lacquer) !important;
border: 1px solid #222222 !important;
border-radius: 0px !important;
box-shadow: var(--bevel-top), var(--bevel-bot) !important;
}

::-webkit-scrollbar-thumb:hover {
background: var(--gel-red) !important;
border-color: var(--shuan-void) !important;
}

::-webkit-scrollbar-corner {
background-color: var(--shuan-void) !important;
}

/* ============================================================================

  1. SETTINGS PANELS / MENUS
    ============================================================================ */

user-settings-block,

ui-settings-block {

⎗
✓
1
2
3
background-color: #080808 !important; /* Fixed: Solid backing */
border: 1px solid #1a1a1a !important;
padding: 10px !important; /* Ensure padding for physical borders */

}

.range-block-title,
.marginBot5,
h4 {
color: var(--shuan-miko-red) !important;
font-family: var(--font-mincho) !important;
border-bottom: 1px solid #1a1a1a !important;
margin-bottom: 5px !important;
}

.range-block .subtitle,
small {
color: var(--shuan-ash) !important;
}

api_button_connect {

⎗
✓
1
2
3
background: var(--gel-lacquer) !important;
border: 1px solid var(--shuan-miko-dark) !important;
border-radius: 0px !important;

}

.inline-drawer-toggle,
.inline-drawer-header {
background: var(--gel-lacquer) !important;
color: var(--shuan-bone) !important;
border: 1px solid #1a1a1a !important;
border-radius: 0px !important;
box-shadow: var(--bevel-top), var(--bevel-bot) !important;
}

.inline-drawer-header:hover {
background: var(--gel-red) !important;
}

.inline-drawer-content {
background-color: #080808 !important; / Fixed: Solid /
border: 1px solid #1a1a1a !important;
border-top: none !important;
box-shadow: inset 0 5px 15px rgba(0,0,0,1) !important;
}

/* ============================================================================

  1. CHARACTER EDITOR / RIGHT PANEL FORMS
    ============================================================================ */

character-info-block {

⎗
✓
1
2
background-color: #080808 !important; /* Fixed: Solid */
border: 1px solid #1a1a1a !important;

}

description_textarea,

firstmessage_textarea,

personality_textarea,

scenario_textarea,

mes_example_textarea {

⎗
✓
1
2
3
4
background-color: var(--shuan-void) !important;
color: var(--shuan-bone) !important;
border: 1px solid #1a1a1a !important;
box-shadow: inset 0 3px 6px rgba(0,0,0,1) !important;

}

/* ============================================================================

  1. PERSONA PANEL
    ============================================================================ */
    .persona_description,

persona_description {

⎗
✓
1
2
3
4
background-color: var(--shuan-void) !important;
color: var(--shuan-bone) !important;
border: 1px solid #1a1a1a !important;
box-shadow: inset 0 3px 6px rgba(0,0,0,1) !important;

}

/* ============================================================================

  1. WORLD INFO / LOREBOOK
    ============================================================================ */
    .world_entry {
    background: var(--gel-lacquer) !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 0px !important;
    box-shadow: var(--bevel-top), 0 3px 6px rgba(0,0,0,1) !important;
    }

.world_entry:hover {
background: #111111 !important;
border-color: var(--shuan-miko-dark) !important;
}

.world_entry textarea,
.world_entry input {
background-color: var(--shuan-void) !important;
color: var(--shuan-bone) !important;
border: 1px solid #1a1a1a !important;
}

/* ============================================================================

  1. PROMPT MANAGER
    ============================================================================ */
    .completion_prompt_manager .prompt-manager-prompt {
    background: var(--gel-lacquer) !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 0px !important;
    }

.completion_prompt_manager .prompt-manager-prompt:hover {
background: #111111 !important;
border-color: var(--shuan-miko-red) !important;
}

/* ============================================================================

  1. EXTENSIONS PANEL UI
    ============================================================================ */

extensions_settings {

⎗
✓
1
background-color: #080808 !important; /* Fixed backing */

}

.extension_container {
background: var(--gel-lacquer) !important;
border: 1px solid #1a1a1a !important;
border-radius: 0px !important;
box-shadow: var(--bevel-top) !important;
}

/* ============================================================================

  1. DATA BANK / FILE ATTACHMENTS
    ============================================================================ */
    .mes_img_container img {
    border: 2px solid #1a1a1a !important;
    border-radius: 0px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,1) !important;
    }

/* ============================================================================

  1. GROUP CHAT SPECIFICS
    ============================================================================ */
    .group_member {
    background: var(--gel-lacquer) !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 0px !important;
    }

.group_member:hover {
background: #111111 !important;
border-color: var(--shuan-miko-red) !important;
}

rm_group_chats_block {

⎗
✓
1
background-color: #080808 !important; /* Solid backing */

}

/* ============================================================================

  1. HOTSWAP BAR (Quick Character Switching)
    ============================================================================ */

HotSwapWrapper {

⎗
✓
1
2
3
background: var(--gel-lacquer) !important;
border-bottom: 2px solid var(--shuan-miko-red) !important;
box-shadow: 0 5px 15px rgba(0,0,0,1), var(--bevel-top) !important;

}

HotSwapWrapper .avatar img {

⎗
✓
1
2
border: 1px solid #1a1a1a !important;
border-radius: 0px !important;

}

/* ============================================================================

  1. LOADER / SPINNER
    ============================================================================ */

loader {

⎗
✓
1
background-color: rgba(0, 0, 0, 0.98) !important;

}

loader .loading-image {

⎗
✓
1
2
/* Pure intense red conversion */
filter: grayscale(100%) sepia(100%) hue-rotate(345deg) saturate(500%) contrast(1.5) brightness(0.8) !important;

}

.typing_indicator,

send_form .mes_generation_icon {

⎗
✓
1
2
color: var(--shuan-miko-red) !important;
text-shadow: none !important; /* No glows */

}

/* ============================================================================

  1. BACKGROUND IMAGE OVERLAY
    ============================================================================ */

bg1 {

⎗
✓
1
2
3
/* Desaturate completely but crush blacks heavily - film technique */
filter: brightness(0.5) contrast(1.3) grayscale(0.5) !important;
opacity: 1 !important;

}

body::before {
/ Deep cinematic vignette drowning edges in black, no emission /
content: "";
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 20%, rgba(0,0,0,1) 95%);
pointer-events: none;
z-index: -1;
}

/* ============================================================================

  1. WAIFUMODE / VISUAL NOVEL MODE
    ============================================================================ */
    body.waifuMode #sheld {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,1) 100%) !important;
    }

body.waifuMode .mes {
background-color: rgba(5, 5, 5, 0.9) !important;
border: 1px solid #1a1a1a !important;
border-left: 3px solid var(--shuan-miko-red) !important;
}

body.waifuMode #expression-image {
filter: drop-shadow(0 20px 30px rgba(0,0,0,1)) contrast(1.1) brightness(0.85) grayscale(10%) !important;
}

/* ============================================================================

  1. BULK EDIT / SELECTION OVERLAY
    ============================================================================ /
    .character_select.bulk_select_active {
    outline: 2px solid var(--shuan-miko-red) !important;
    background: #110000 !important; /     Subtle blood tinge to active box */
    }

/* ============================================================================

  1. LOGPROBS / TOKEN PROBABILITY DISPLAY
    ============================================================================ */
    .logprobs_candidate {
    background: var(--gel-lacquer) !important;
    color: var(--shuan-bone) !important;
    border: 1px solid #1a1a1a !important;
    }

.logprobs_candidate:hover {
background: var(--gel-red) !important;
color: #ffffff !important;
}

/* ============================================================================

  1. TOOLTIPS
    ============================================================================ */
    .tooltip,
    [title]::after {
    background-color: var(--shuan-void) !important;
    color: var(--shuan-bone) !important;
    border-radius: 0px !important;
    font-size: 13px !important;
    border: 1px solid var(--shuan-miko-red) !important;
    }

.tippy-box {
background-color: #080808 !important; / Solid backing /
color: var(--shuan-bone) !important;
border-radius: 0px !important;
border: 1px solid var(--shuan-miko-red) !important;
box-shadow: 0 5px 15px rgba(0,0,0,1) !important;
}

.tippy-arrow {
color: var(--shuan-miko-red) !important;
}

/* ============================================================================

  1. CODE SYNTAX HIGHLIGHTING (highlight.js)
    ============================================================================ */
    .hljs {
    background-color: var(--shuan-void) !important;
    color: var(--shuan-bone) !important;
    }

.hljs-keyword { color: var(--shuan-miko-red) !important; font-weight: bold; }
.hljs-string { color: var(--shuan-gold) !important; }
.hljs-comment { color: var(--shuan-ash) !important; }
.hljs-function { color: var(--shuan-bone) !important; font-weight: bold; }
.hljs-number { color: var(--shuan-ash) !important; }
.hljs-title { color: #ffffff !important; font-weight: bold; }

/* ============================================================================

  1. MARKDOWN TABLES IN MESSAGES
    ============================================================================ */
    .mes_text table {
    border: 1px solid #1a1a1a !important;
    background-color: #050505 !important;
    }

.mes_text th {
background: var(--gel-lacquer) !important;
color: var(--shuan-bone) !important;
border: 1px solid #1a1a1a !important;
font-family: var(--font-mincho) !important;
box-shadow: var(--bevel-top) !important;
}

.mes_text td {
border: 1px solid #1a1a1a !important;
color: var(--shuan-bone) !important;
}

.mes_text tr:nth-child(even) {
background-color: #080808 !important;
}

/* ============================================================================

  1. STREAMING CURSOR / TYPING INDICATOR
    ============================================================================ */
    @keyframes shuan-stutter {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
    }

.mes_text .cursor {
background-color: var(--shuan-miko-red) !important;
animation: shuan-stutter 0.8s step-end infinite !important;
width: 10px !important;
height: 16px !important;
display: inline-block !important;
vertical-align: middle !important;
box-shadow: none !important; / Dead block /
}

/* ============================================================================

  1. MISC ICONS & FONT AWESOME
    ============================================================================
    NOTE: Explicitly preserving icon default styles to prevent rect-glitches. /
    .fa-solid, .fa-regular, .fas, .far, .fa-fw {
    /     No generic overriding to preserve mapping */
    }

/* ============================================================================

  1. SELECTION / HIGHLIGHT
    ============================================================================ /
    ::selection {
    background-color: var(--shuan-miko-red) !important; /     Pure blood */
    color: #ffffff !important;
    }

/* ============================================================================

  1. FOCUS STATES (Accessibility)
    ============================================================================ */
    :focus-visible {
    outline-color: var(--shuan-miko-red) !important;
    outline-style: solid !important;
    outline-width: 1px !important;
    outline-offset: 2px !important;
    }

/* ============================================================================

  1. TRANSITIONS & ANIMATIONS
    ============================================================================ /
    .mes,
    .menu_button,
    .interactable,
    input,
    textarea,
    select {
    transition: none !important; /     Deliberate 2000s instant state snapping */
    }

/* ============================================================================

  1. MEDIA QUERIES — MOBILE OVERRIDES
    ============================================================================ */
    @media screen and (max-width: 768px) {
    .mes {
    background-color: rgba(5, 5, 5, 1) !important;
    border-radius: 0px !important;
    border-left: 2px solid var(--shuan-miko-red) !important;
    border-right: none !important;
    }

    send_textarea {

    ⎗
    ✓
    1
    font-size: 16px !important;

    }

    .drawer-content {
    background-color: var(--shuan-void) !important;
    }
    }

/* ============================================================================

  1. PRINT STYLES
    ============================================================================ */
    @media print {
    body {
    background: #ffffff !important;
    color: #000000 !important;
    }
    .mes {
    box-shadow: none !important;
    border: 1px solid #000000 !important;
    }
    }

Warning

LINK

You are about to visit a link which has been flagged with the above content warnings. Do you wish to continue?

Cancel
Edit
Raw PDF PNG WebP JPG

Pub: 28 Mar 2026 23:04 UTC

Views: 23

new· what· how· langs· contacts· login