/* Explicit Mist Day component layer. This file is loaded after legacy theme overrides. */
html[data-ui-theme="mist-day"] body.web-rp-shell,
html[data-ui-theme="mist-day"] body.web-rp-shell #app,
html[data-ui-theme="mist-day"] body.web-rp-shell .app-main,
html[data-ui-theme="mist-day"] body.web-rp-shell .chat-view-root,
html[data-ui-theme="mist-day"] body.web-rp-shell .generator-view,
html[data-ui-theme="mist-day"] body.web-rp-shell .native-tools-view {
    background: var(--ui-canvas) !important;
    color: var(--ui-text) !important;
}

/* The entry and auth gates are part of the first viewport, so they need the
   same day surface as the application before Vue finishes mounting. */
html[data-ui-theme="mist-day"] body.web-rp-shell .entry-transition,
html[data-ui-theme="mist-day"] body.web-rp-shell .app-loading-gate {
    background: var(--ui-canvas) !important;
    background-image:
        var(--ui-paper-texture),
        radial-gradient(1100px 520px at 82% -12%, rgba(20, 17, 13, 0.1), transparent 60%),
        radial-gradient(820px 460px at -6% 112%, rgba(20, 17, 13, 0.08), transparent 58%),
        linear-gradient(145deg, #f3eee3 0%, var(--ui-canvas) 58%, var(--ui-surface-sunken) 100%) !important;
    background-size: auto, auto, auto, auto !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .entry-transition::before {
    background: linear-gradient(112deg, transparent 34%, rgba(140, 58, 43, 0.12) 48%, transparent 63%) !important;
    opacity: 0.7 !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .entry-transition::after {
    background: linear-gradient(112deg, transparent 34%, rgba(140, 58, 43, 0.08) 48%, transparent 63%) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .entry-transition-brand,
html[data-ui-theme="mist-day"] body.web-rp-shell .app-loading-panel,
html[data-ui-theme="mist-day"] body.web-rp-shell .auth-panel {
    color: var(--ui-text) !important;
    background: linear-gradient(180deg, var(--ui-surface), var(--ui-surface-sunken)) !important;
    border-color: var(--ui-border) !important;
    box-shadow: var(--ui-shadow-lg) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .entry-transition-brand::before,
html[data-ui-theme="mist-day"] body.web-rp-shell .auth-panel::before {
    background: linear-gradient(90deg, transparent, rgba(140, 58, 43, 0.18), transparent) !important;
    box-shadow: 0 0 30px rgba(140, 58, 43, 0.12) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell :is(.entry-logo-title, .entry-logo-subtitle, .entry-loading-title, .app-loading-title) {
    color: var(--ui-text) !important;
    text-shadow: none !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell :is(.entry-loading-status, .app-loading-subtitle, .auth-panel .text-gray-400, .auth-panel .text-gray-500) {
    color: var(--ui-text-muted) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell :is(.entry-loading-kicker, .app-loading-kicker) {
    color: var(--ui-brand) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell :is(.entry-loading-track, .app-loading-progress) {
    background: var(--ui-surface-sunken) !important;
    border-color: var(--ui-border) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell :is(.entry-loading-track, .app-loading-progress) span {
    background: linear-gradient(90deg, var(--ui-brand), var(--ui-text-secondary)) !important;
    box-shadow: none !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell :is(.entry-loading-status, .app-loading-meta) {
    color: var(--ui-text-muted) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .entry-loading-status span::before {
    background: var(--ui-danger) !important;
    box-shadow: none !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell :is(.entry-orbital-mark, .app-loading-orbit) {
    background: radial-gradient(circle, rgba(140, 58, 43, 0.14), rgba(140, 58, 43, 0.03) 58%, transparent 62%) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .entry-orbital-mark::before,
html[data-ui-theme="mist-day"] body.web-rp-shell .entry-orbital-mark::after,
html[data-ui-theme="mist-day"] body.web-rp-shell .app-loading-orbit::before,
html[data-ui-theme="mist-day"] body.web-rp-shell .app-loading-orbit::after {
    border-color: var(--ui-border-strong) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .entry-orbital-mark::after,
html[data-ui-theme="mist-day"] body.web-rp-shell .app-loading-orbit::after {
    border-top-color: var(--ui-brand) !important;
    border-right-color: var(--ui-brand-soft) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell :is(.app-loading-orbit span, .entry-orbital-mark span) {
    background: linear-gradient(135deg, var(--ui-brand), var(--ui-border-strong)) !important;
    box-shadow: 0 0 28px rgba(40, 34, 24, 0.18) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .auth-panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.sr-only):not(.hidden), textarea, select) {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .auth-brand-mark {
    background: linear-gradient(135deg, var(--ui-brand), var(--ui-border-strong)) !important;
    box-shadow: 0 12px 28px rgba(40, 34, 24, 0.16) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .auth-kicker {
    color: var(--ui-brand) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .auth-title {
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .auth-mode-switch {
    background: var(--ui-surface-sunken) !important;
    border-color: var(--ui-border) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .auth-mode-switch button {
    color: var(--ui-text-secondary) !important;
    background: transparent !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .auth-mode-switch button.is-active {
    color: #ffffff !important;
    background: var(--ui-brand) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .auth-field label,
html[data-ui-theme="mist-day"] body.web-rp-shell .auth-remember {
    color: var(--ui-text-secondary) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .auth-input-wrap svg {
    color: var(--ui-text-muted) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .auth-input-wrap input::placeholder {
    color: var(--ui-text-muted) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .auth-input-wrap:focus-within svg {
    color: var(--ui-brand) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .auth-input-wrap input:focus {
    border-color: var(--ui-brand) !important;
    box-shadow: 0 0 0 4px var(--ui-focus-ring) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .auth-code-button {
    background: var(--ui-brand-soft) !important;
    border-color: rgba(40, 34, 24, 0.2) !important;
    color: var(--ui-brand-strong) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .auth-code-button:hover:not(:disabled) {
    background: var(--ui-surface-subtle) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .auth-remember input {
    accent-color: var(--ui-brand) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .auth-error {
    background: var(--ui-danger-soft) !important;
    border-color: rgba(186, 52, 52, 0.26) !important;
    color: var(--ui-danger) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .auth-submit,
html[data-ui-theme="mist-day"] body.web-rp-shell .email-captcha-action {
    background: var(--ui-brand) !important;
    border-color: var(--ui-brand) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 26px rgba(40, 34, 24, 0.16) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .auth-alt-action {
    color: var(--ui-brand-strong) !important;
    background: transparent !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .auth-alt-action:hover {
    color: var(--ui-brand-hover) !important;
    background: var(--ui-brand-soft) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .app-sidebar {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    box-shadow: 1px 0 0 rgba(40, 34, 24, 0.06), 12px 0 32px rgba(40, 34, 24, 0.08) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .app-sidebar > div,
html[data-ui-theme="mist-day"] body.web-rp-shell .app-sidebar .bg-white\/70,
html[data-ui-theme="mist-day"] body.web-rp-shell .app-sidebar .bg-white\/80,
html[data-ui-theme="mist-day"] body.web-rp-shell .app-sidebar .bg-white\/95 {
    background: var(--ui-surface-subtle) !important;
    border-color: var(--ui-border) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .sidebar-brand-title,
html[data-ui-theme="mist-day"] body.web-rp-shell .app-sidebar .text-gray-900,
html[data-ui-theme="mist-day"] body.web-rp-shell .app-sidebar .text-gray-800 {
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .sidebar-brand-subtitle,
html[data-ui-theme="mist-day"] body.web-rp-shell .app-sidebar .text-gray-500,
html[data-ui-theme="mist-day"] body.web-rp-shell .app-sidebar .text-gray-400 {
    color: var(--ui-text-muted) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .sidebar-nav-button {
    border: 1px solid transparent !important;
    border-radius: var(--ui-radius-md) !important;
    color: var(--ui-text-secondary) !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .sidebar-nav-button:hover {
    color: var(--ui-brand-hover) !important;
    background: var(--ui-brand-soft) !important;
    border-color: rgba(40, 34, 24, 0.16) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .sidebar-nav-button.bg-primary-50,
html[data-ui-theme="mist-day"] body.web-rp-shell .sidebar-nav-button[aria-current="page"] {
    color: var(--ui-brand-strong) !important;
    background: var(--ui-brand-soft) !important;
    border-color: rgba(40, 34, 24, 0.22) !important;
    box-shadow: inset 3px 0 0 var(--ui-brand) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .sidebar-nav-button:disabled,
html[data-ui-theme="mist-day"] body.web-rp-shell .feature-disabled-button {
    color: var(--ui-text-muted) !important;
    background: var(--ui-surface-sunken) !important;
    border-color: var(--ui-border) !important;
    opacity: 0.72 !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-header-layer {
    background: var(--ui-surface) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    box-shadow: 0 4px 16px rgba(40, 34, 24, 0.08) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-header-scrim {
    display: none !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-header-content {
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-header-content .text-white,
html[data-ui-theme="mist-day"] body.web-rp-shell .chat-header-content .text-white\/60,
html[data-ui-theme="mist-day"] body.web-rp-shell .chat-header-content .text-white\/70,
html[data-ui-theme="mist-day"] body.web-rp-shell .chat-header-content .text-white\/80 {
    color: var(--ui-text) !important;
    text-shadow: none !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-header-content button {
    color: var(--ui-text-secondary) !important;
    border-radius: var(--ui-radius-md) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-header-content button:hover {
    color: var(--ui-brand-hover) !important;
    background: var(--ui-brand-soft) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-messages {
    background: var(--ui-canvas) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-messages > .flex::before {
    background: var(--ui-border-strong) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-messages .char-bg-blur {
    opacity: 0.12 !important;
    filter: blur(3px) saturate(0.55) brightness(1.08) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-messages .msg-name-tag {
    color: var(--ui-text-muted) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-messages .msg-bubble-glass {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-left: 3px solid var(--ui-brand) !important;
    border-radius: 8px !important;
    box-shadow: var(--ui-shadow-sm) !important;
    color: var(--ui-text) !important;
    backdrop-filter: none !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-messages [data-role="user"] .msg-bubble-glass {
    background: var(--ui-brand-soft) !important;
    border: 1px solid rgba(40, 34, 24, 0.24) !important;
    border-right: 3px solid var(--ui-brand) !important;
    border-left-width: 1px !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-messages [data-role="system"] .msg-bubble-glass {
    background: var(--ui-warning-soft) !important;
    border-color: rgba(154, 103, 0, 0.28) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-messages .markdown-body,
html[data-ui-theme="mist-day"] body.web-rp-shell .chat-messages .markdown-body p,
html[data-ui-theme="mist-day"] body.web-rp-shell .chat-messages .markdown-body li {
    color: inherit !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-messages pre,
html[data-ui-theme="mist-day"] body.web-rp-shell .chat-messages code {
    background: var(--ui-surface-sunken) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .input-island {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--ui-shadow-md) !important;
    backdrop-filter: none !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .input-island textarea,
html[data-ui-theme="mist-day"] body.web-rp-shell .input-island input,
html[data-ui-theme="mist-day"] body.web-rp-shell .input-island .chat-input-scrollbar {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--ui-text) !important;
    caret-color: var(--ui-brand) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .input-island textarea::placeholder,
html[data-ui-theme="mist-day"] body.web-rp-shell .input-island input::placeholder {
    color: var(--ui-text-muted) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .input-island button,
html[data-ui-theme="mist-day"] body.web-rp-shell .suggest-btn {
    color: var(--ui-text-secondary) !important;
    border-color: var(--ui-border) !important;
    background: var(--ui-surface) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .input-island button:hover,
html[data-ui-theme="mist-day"] body.web-rp-shell .suggest-btn:hover {
    color: var(--ui-brand-hover) !important;
    border-color: var(--ui-border-strong) !important;
    background: var(--ui-brand-soft) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .desc-panel,
html[data-ui-theme="mist-day"] body.web-rp-shell .web-popover,
html[data-ui-theme="mist-day"] body.web-rp-shell .tools-menu-container .bg-white\/95 {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-lg) !important;
    color: var(--ui-text) !important;
    backdrop-filter: none !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .desc-panel :is(.text-gray-900, .text-gray-800, .text-gray-700),
html[data-ui-theme="mist-day"] body.web-rp-shell .web-popover :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500) {
    color: var(--ui-text-secondary) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .web-popover button:hover {
    background: var(--ui-brand-soft) !important;
    color: var(--ui-brand-hover) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .native-tools-view,
html[data-ui-theme="mist-day"] body.web-rp-shell .generator-view {
    background: var(--ui-canvas) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .tools-page-heading {
    border-bottom-color: var(--ui-border) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .tools-page-heading h2,
html[data-ui-theme="mist-day"] body.web-rp-shell .tool-config-card h3 {
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .tool-global-settings,
html[data-ui-theme="mist-day"] body.web-rp-shell .tool-config-card {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .tool-global-settings label,
html[data-ui-theme="mist-day"] body.web-rp-shell .tool-config-card .tool-description-preview,
html[data-ui-theme="mist-day"] body.web-rp-shell .tool-config-card .text-gray-400,
html[data-ui-theme="mist-day"] body.web-rp-shell .tool-config-card .text-gray-500,
html[data-ui-theme="mist-day"] body.web-rp-shell .tool-config-card .text-gray-600 {
    color: var(--ui-text-secondary) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal > [class*="bg-white"],
html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal > [class*="bg-gray-50"],
html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal-panel,
html[data-ui-theme="mist-day"] body.web-rp-shell .email-captcha-modal {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-lg) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal-header,
html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal-footer {
    background: var(--ui-surface-subtle) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal-body {
    background: var(--ui-canvas) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal :is(h1, h2, h3, h4, label, dt, dd, li, .text-gray-900, .text-gray-800, .text-gray-700) {
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal :is(.text-gray-600, .text-gray-500, .text-gray-400) {
    color: var(--ui-text-secondary) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.sr-only):not(.hidden), textarea, select) {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text) !important;
    caret-color: var(--ui-brand) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.sr-only):not(.hidden), textarea, select):focus {
    border-color: var(--ui-brand) !important;
    box-shadow: 0 0 0 4px var(--ui-focus-ring) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal .bg-primary-600,
html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal .bg-primary-700,
html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal .btn-primary {
    background: var(--ui-brand) !important;
    border-color: var(--ui-brand) !important;
    color: #ffffff !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal .bg-primary-600:hover,
html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal .bg-primary-700:hover,
html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal .btn-primary:hover {
    background: var(--ui-brand-hover) !important;
    border-color: var(--ui-brand-hover) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .web-modal-comments .chat-comments-backdrop,
html[data-ui-theme="mist-day"] body.web-rp-shell .chat-comments-backdrop {
    background: var(--ui-overlay) !important;
    backdrop-filter: blur(4px) !important;
}

/* The image-resolution switch is intentionally independent from utility color classes.
   Modal theme rules otherwise repaint the track and can displace an unanchored knob. */
html[data-ui-theme="mist-day"] body.web-rp-shell .image-resolution-control {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-md) !important;
    background: var(--ui-surface-sunken) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .image-resolution-toggle {
    position: relative !important;
    display: block !important;
    flex: 0 0 48px !important;
    box-sizing: border-box !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 26px !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: 999px !important;
    background: var(--ui-surface-raised) !important;
    box-shadow: inset 0 1px 2px rgba(40, 34, 24, 0.14) !important;
    transition: background-color var(--ui-duration-fast) ease, border-color var(--ui-duration-fast) ease !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .image-resolution-toggle.is-enabled {
    border-color: var(--ui-brand-strong) !important;
    background: var(--ui-brand) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .image-resolution-toggle__knob {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: 50% !important;
    background: var(--ui-surface-subtle) !important;
    box-shadow: 0 1px 2px rgba(40, 34, 24, 0.22) !important;
    pointer-events: none !important;
    transform: translateX(0) !important;
    transition: transform var(--ui-duration-fast) ease, background-color var(--ui-duration-fast) ease !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .image-resolution-toggle.is-enabled .image-resolution-toggle__knob {
    border-color: var(--ui-surface-subtle) !important;
    background: #ffffff !important;
    transform: translateX(22px) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .image-resolution-toggle:focus-visible {
    outline: 2px solid var(--ui-danger) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px var(--ui-focus-ring) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-comments-drawer {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-bottom: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-lg) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-comments-overlay,
html[data-ui-theme="mist-day"] body.web-rp-shell .chat-comments-drawer,
html[data-ui-theme="mist-day"] body.web-rp-shell .chat-comments-drawer * {
    color-scheme: only light !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-comments-drawer * {
    color: inherit !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-comments-drawer > header,
html[data-ui-theme="mist-day"] body.web-rp-shell .chat-comments-drawer > footer,
html[data-ui-theme="mist-day"] body.web-rp-shell .chat-comments-sortbar {
    background: var(--ui-surface-subtle) !important;
    border-color: var(--ui-border) !important;
}

/* Shared by the web drawer and the native shell: the active sort is deliberately pale, never a dark action button. */
html[data-ui-theme="mist-day"] body.web-rp-shell .chat-comments-sortbar .chat-comments-sort-option {
    background: var(--ui-surface-sunken) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--ui-text-secondary) !important;
    box-shadow: none !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-comments-sortbar .chat-comments-sort-option--active {
    background: var(--ui-brand-soft) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-comments-sortbar .chat-comments-sort-option:hover {
    background: var(--ui-surface-raised) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-comments-sortbar .chat-comments-sort-option:focus-visible {
    outline: 2px solid var(--ui-danger) !important;
    outline-offset: 2px !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-comments-scroll {
    background: var(--ui-canvas) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-comments-drawer :is(article, .chat-comment-menu, .bg-white) {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-comments-drawer :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.sr-only):not(.hidden), textarea, select) {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .chat-comments-drawer :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400) {
    color: var(--ui-text-secondary) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell :is(.bg-primary-600, .bg-primary-700, .btn-primary) {
    background: var(--ui-brand) !important;
    border-color: var(--ui-brand) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell :is(.bg-primary-600, .bg-primary-700, .btn-primary) :is(svg, span) {
    color: #ffffff !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .mobile-overlay {
    background: rgba(20, 17, 13, 0.26) !important;
    backdrop-filter: blur(3px) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell,
html[data-ui-theme="mist-day"] body.web-workshop-shell #app,
html[data-ui-theme="mist-day"] body.web-workshop-shell .drawer-content,
html[data-ui-theme="mist-day"] body.web-workshop-shell .workshop-shell,
html[data-ui-theme="mist-day"] body.web-workshop-shell .ios-scroll-fix {
    background: var(--ui-canvas) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell .navbar,
html[data-ui-theme="mist-day"] body.web-workshop-shell .drawer-side > div {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell .navbar .text-base-content,
html[data-ui-theme="mist-day"] body.web-workshop-shell .drawer-side .text-base-content,
html[data-ui-theme="mist-day"] body.web-workshop-shell .drawer-side [class*="text-base-content/"] {
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell .card,
html[data-ui-theme="mist-day"] body.web-workshop-shell .collapse,
html[data-ui-theme="mist-day"] body.web-workshop-shell .modal-box,
html[data-ui-theme="mist-day"] body.web-workshop-shell .rounded-xl.bg-base-100,
html[data-ui-theme="mist-day"] body.web-workshop-shell .rounded-2xl.bg-base-100 {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell .bg-base-200,
html[data-ui-theme="mist-day"] body.web-workshop-shell .bg-base-200\/30,
html[data-ui-theme="mist-day"] body.web-workshop-shell .bg-base-200\/40,
html[data-ui-theme="mist-day"] body.web-workshop-shell .bg-base-200\/50 {
    background: var(--ui-surface-sunken) !important;
    color: var(--ui-text-secondary) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell .text-base-content,
html[data-ui-theme="mist-day"] body.web-workshop-shell [class*="text-base-content/"] {
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.sr-only):not(.hidden), textarea, select, .input, .textarea, .select) {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.sr-only):not(.hidden), textarea, select, .input, .textarea, .select):focus {
    border-color: var(--ui-brand) !important;
    box-shadow: 0 0 0 4px var(--ui-focus-ring) !important;
    outline: none !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell .btn-primary,
html[data-ui-theme="mist-day"] body.web-workshop-shell .bg-primary,
html[data-ui-theme="mist-day"] body.web-workshop-shell .btn-primary:hover,
html[data-ui-theme="mist-day"] body.web-workshop-shell .bg-primary:hover {
    background: var(--ui-brand) !important;
    border-color: var(--ui-brand) !important;
    color: #ffffff !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell .btn-ghost,
html[data-ui-theme="mist-day"] body.web-workshop-shell .btn-outline {
    border-color: var(--ui-border) !important;
    color: var(--ui-text-secondary) !important;
    background: var(--ui-surface) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell .btn-ghost:hover,
html[data-ui-theme="mist-day"] body.web-workshop-shell .btn-outline:hover {
    background: var(--ui-brand-soft) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-brand-hover) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell .modal::backdrop,
html[data-ui-theme="mist-day"] body.web-workshop-shell .modal-backdrop {
    background: var(--ui-overlay) !important;
    backdrop-filter: blur(4px) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell .modal-box {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell .badge {
    border-color: var(--ui-border) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell .toast-container-custom > div {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-md) !important;
}

html[data-ui-theme="mist-day"] :is(.native-chat-shell, .native-tools-view, .native-tool-shell-view) {
    background: var(--ui-canvas) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] .native-chat-shell .chat-header-layer {
    background: var(--ui-surface) !important;
    border-bottom-color: var(--ui-border) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

html[data-ui-theme="mist-day"] .native-chat-shell .input-island {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

html[data-ui-theme="mist-day"] .native-chat-shell .msg-bubble-glass {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] .native-chat-shell [data-role="user"] .msg-bubble-glass {
    background: var(--ui-brand-soft) !important;
    border-color: rgba(40, 34, 24, 0.24) !important;
}

html[data-ui-theme="mist-day"] :is(.native-tool-mode, .native-chat-mode) .web-modal-panel,
html[data-ui-theme="mist-day"] :is(.native-tool-mode, .native-chat-mode) .web-modal-active-tool > div {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] :is(.native-tool-mode, .native-chat-mode) .web-modal-header,
html[data-ui-theme="mist-day"] :is(.native-tool-mode, .native-chat-mode) .web-modal-footer {
    background: var(--ui-surface-subtle) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] :is(.native-tool-mode, .native-chat-mode) .web-modal-body {
    background: var(--ui-canvas) !important;
}

html[data-ui-theme="mist-day"] :is(.native-tool-mode, .native-chat-mode) .web-modal :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.sr-only):not(.hidden), textarea, select) {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text) !important;
}

/* Native entry points reuse the main templates but are opened without the
   normal sidebar. Keep their full-page shells and cards on the same tokens. */
html[data-ui-theme="mist-day"] body.web-rp-shell :is(
    .native-api-settings-view,
    .native-tools-view,
    .native-profile-view,
    .native-web-memory-page,
    .native-tool-shell-view
) {
    background: var(--ui-canvas) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell :is(
    .native-api-card,
    .native-profile-card,
    .native-billing-card,
    .native-features-card,
    .native-memory-toolbar,
    .native-web-memory-page .memory-category-event,
    .native-web-memory-page .memory-category-state,
    .native-web-memory-page .memory-category-relationship
) {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell :is(
    .native-api-close,
    .native-tools-close,
    .native-profile-close
) {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-brand-strong) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .native-web-memory-page :is(
    .bg-white,
    .bg-white\/70,
    .bg-white\/80,
    .bg-gray-50,
    .bg-gray-50\/80,
    .bg-gray-100,
    .bg-gray-200,
    .bg-\[\#f8fafc\]
) {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .native-web-memory-page :is(
    .text-gray-900,
    .text-gray-800,
    .text-gray-700
) {
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .native-web-memory-page :is(
    .text-gray-600,
    .text-gray-500,
    .text-gray-400
) {
    color: var(--ui-text-secondary) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .native-web-memory-page :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.sr-only):not(.hidden),
    textarea,
    select
) {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .native-web-memory-page :is(
    .bg-primary-50,
    .bg-primary-100,
    .bg-blue-50
) {
    background: var(--ui-brand-soft) !important;
    color: var(--ui-brand-strong) !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .native-web-memory-page .bg-primary-600 {
    background: var(--ui-brand) !important;
    border-color: var(--ui-brand) !important;
    color: #ffffff !important;
}

html[data-ui-theme="mist-day"] body.web-rp-shell .z-\[55\] {
    background: var(--ui-overlay) !important;
}

/* Controls keep their own visual state instead of inheriting the paper surface. */
html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) input[type="checkbox"],
html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) input[type="radio"] {
    accent-color: var(--ui-brand) !important;
}

html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) input[type="checkbox"]:focus-visible,
html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) input[type="radio"]:focus-visible {
    outline: 2px solid var(--ui-danger) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px var(--ui-focus-ring) !important;
}

html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) input[type="checkbox"].peer + *,
html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) input[type="radio"].peer + * {
    border-color: var(--ui-border) !important;
    background-color: var(--ui-surface-sunken) !important;
    color: var(--ui-text-secondary) !important;
}

html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) input[type="checkbox"].peer:checked + *,
html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) input[type="radio"].peer:checked + * {
    background-color: var(--ui-brand) !important;
    background-image: none !important;
    border-color: var(--ui-brand-strong) !important;
    color: #ffffff !important;
}

html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) input[type="checkbox"].peer:focus-visible + *,
html[data-ui-theme="mist-day"] :is(.web-rp-shell, .web-workshop-shell) input[type="radio"].peer:focus-visible + * {
    outline: 2px solid var(--ui-danger) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px var(--ui-focus-ring) !important;
}

/* DaisyUI controls without a peer sibling need their own paper-native skin. */
html[data-ui-theme="mist-day"] body.web-workshop-shell input.toggle,
html[data-ui-theme="mist-day"] body.web-workshop-shell input.checkbox,
html[data-ui-theme="mist-day"] body.web-workshop-shell input.radio {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    cursor: pointer !important;
    background-color: var(--ui-surface-sunken) !important;
    background-image: none !important;
    border: 1px solid var(--ui-border-strong) !important;
    box-shadow: inset 1px 1px 0 rgba(40, 34, 24, 0.08) !important;
    color: var(--ui-brand) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell input.toggle {
    width: 2.75rem !important;
    height: 1.5rem !important;
    border-radius: 999px !important;
    transition: background-color var(--ui-duration-fast) ease, border-color var(--ui-duration-fast) ease, box-shadow var(--ui-duration-fast) ease !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell input.toggle::before {
    content: "" !important;
    position: absolute !important;
    width: 1.1rem !important;
    height: 1.1rem !important;
    left: 0.15rem !important;
    top: 0.15rem !important;
    border-radius: 50% !important;
    background: var(--ui-surface-raised) !important;
    border: 1px solid var(--ui-border-strong) !important;
    box-shadow: 0 1px 2px rgba(40, 34, 24, 0.18) !important;
    transition: transform var(--ui-duration-fast) ease, background-color var(--ui-duration-fast) ease !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell input.toggle:checked {
    background-color: var(--ui-brand) !important;
    border-color: var(--ui-brand-strong) !important;
    box-shadow: none !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell input.toggle:checked::before {
    transform: translateX(1.25rem) !important;
    background: #ffffff !important;
    border-color: #ffffff !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell input.checkbox,
html[data-ui-theme="mist-day"] body.web-workshop-shell input.radio {
    width: 1rem !important;
    height: 1rem !important;
    padding: 0 !important;
    border-radius: 4px !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell input.radio {
    border-radius: 50% !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell input.checkbox:checked,
html[data-ui-theme="mist-day"] body.web-workshop-shell input.radio:checked {
    background-color: var(--ui-brand) !important;
    border-color: var(--ui-brand-strong) !important;
    box-shadow: inset 0 0 0 3px var(--ui-surface-raised) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell input.checkbox:focus-visible,
html[data-ui-theme="mist-day"] body.web-workshop-shell input.radio:focus-visible,
html[data-ui-theme="mist-day"] body.web-workshop-shell input.toggle:focus-visible {
    outline: 2px solid var(--ui-danger) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px var(--ui-focus-ring) !important;
}

html[data-ui-theme="mist-day"] body.web-workshop-shell input.toggle:disabled,
html[data-ui-theme="mist-day"] body.web-workshop-shell input.checkbox:disabled,
html[data-ui-theme="mist-day"] body.web-workshop-shell input.radio:disabled {
    cursor: not-allowed !important;
    opacity: 0.55 !important;
}

@media print {
    html[data-ui-theme="mist-day"] body.web-rp-shell,
    html[data-ui-theme="mist-day"] body.web-workshop-shell {
        background: var(--ui-canvas) !important;
        color: var(--ui-text) !important;
    }
}