/* Web-only visual layer. This file deliberately avoids changing Vue state or event bindings. */

:root {
    --ui-ink: #e3dbc9;
    --ui-ink-raised: #e3dbc9;
    --ui-paper: #ece5d6;
    --ui-panel: #f8faf5;
    --ui-line: #a79c84;
    --ui-muted: #55504a;
    --ui-mint: #26221b;
    --ui-mint-deep: #1c1812;
    --ui-signal: #ff6545;
    --ui-yellow: #f0c654;
}

/* Final dark theme pass for the three web surfaces. */
:root {
    --ui-ink: #1f1c17;
    --ui-ink-raised: #e8e1d1;
    --ui-paper: #ece5d6;
    --ui-panel: #e8e1d1;
    --ui-line: #c6bca6;
    --ui-muted: #8c8577;
    --ui-mint: #26221b;
    --ui-mint-deep: #1c1812;
    --ui-signal: #ff765d;
    --ui-yellow: #f0c654;
}

.web-rp-shell,
.web-rp-shell #app,
.web-rp-shell .chat-view-root,
.web-rp-shell .native-tools-view {
    background: var(--ui-paper) !important;
    color: #1f1c17 !important;
}

.web-rp-shell .chat-view-root {
    isolation: isolate;
}

/* Keep the character image layer visible behind transparent messages. */
.web-rp-shell .chat-view-root .char-bg-blur {
    opacity: 0.78 !important;
    filter: blur(2px) brightness(0.58) saturate(0.9) contrast(0.9) !important;
}

.web-rp-shell .chat-messages {
    background: rgba(40, 34, 24, 0.12) !important;
    background-color: transparent !important;
    color: #1f1c17 !important;
}

.web-rp-shell .chat-messages.bg-gray-50 {
    background: var(--ui-paper) !important;
}

.web-rp-shell .chat-messages > .flex::before {
    background: rgba(40, 34, 24, 0.18) !important;
}

.web-rp-shell .chat-messages .msg-name-tag {
    color: #55504a !important;
}

.web-rp-shell .chat-messages .msg-bubble-glass {
    border-color: #c6bca6 !important;
    background: var(--ui-surface) !important;
    color: #1f1c17 !important;
    box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.28) !important;
}

.web-rp-shell .chat-messages .msg-bubble-glass .markdown-body {
    color: #1f1c17 !important;
}

.web-rp-shell .chat-messages [data-role="user"] .msg-bubble-glass {
    background: #ddd4c0 !important;
    border-color: #a79c84 !important;
    color: #1f1c17 !important;
    box-shadow: 7px 7px 0 rgba(40, 34, 24, 0.12) !important;
}

.web-rp-shell .chat-messages [data-role="user"] .msg-bubble-glass .markdown-body {
    color: #1f1c17 !important;
}

.web-rp-shell .chat-messages [data-role="system"] .msg-bubble-glass {
    background: #3a2420 !important;
    border-color: #a34b39 !important;
    color: #ffe9e2 !important;
}

.web-rp-shell .chat-messages .markdown-body {
    color: #1f1c17 !important;
}

.web-rp-shell .chat-messages pre,
.web-rp-shell .chat-messages code {
    background: #e3dbc9 !important;
    color: #55504a !important;
    border-color: #c6bca6 !important;
}

.web-rp-shell .input-island {
    background: #e3dbc9 !important;
    border-color: #c6bca6 !important;
    border-bottom-color: var(--ui-mint) !important;
}

.web-rp-shell .input-island textarea,
.web-rp-shell .input-island input,
.web-rp-shell .input-island .chat-input-scrollbar {
    background: #f3eee3 !important;
    border: 1px solid #a79c84 !important;
    color: #1f1c17 !important;
    caret-color: #1c1812 !important;
}

.web-rp-shell .input-island textarea::placeholder,
.web-rp-shell .input-island input::placeholder {
    color: #8c8577 !important;
}

.web-rp-shell .native-tools-view {
    background: var(--ui-paper) !important;
}

.web-rp-shell .tools-page-heading {
    border-bottom-color: #c6bca6 !important;
}

.web-rp-shell .tools-page-heading h2,
.web-rp-shell .tool-config-card h3 {
    color: #1f1c17 !important;
}

.web-rp-shell .tool-global-settings {
    border-color: #c6bca6 !important;
    background: #e3dbc9 !important;
}

.web-rp-shell .tool-global-settings .bg-gray-50\/80,
.web-rp-shell .tool-global-settings .bg-white {
    background: #e8e1d1 !important;
    border-color: #c6bca6 !important;
}

.web-rp-shell .tool-global-settings label,
.web-rp-shell .tool-global-settings .text-gray-500,
.web-rp-shell .tool-config-card .tool-description-preview {
    color: #55504a !important;
}

.web-rp-shell .tool-config-card {
    border-color: #c6bca6 !important;
    background: #e8e1d1 !important;
    color: #1f1c17 !important;
}

.web-rp-shell .tool-config-card .text-gray-400,
.web-rp-shell .tool-config-card .text-gray-500,
.web-rp-shell .tool-config-card .text-gray-600 {
    color: #55504a !important;
}

/* Named chat popovers use the same dark surface as the composer. */
.web-rp-shell .web-popover {
    border-color: #c6bca6 !important;
    background: #e8e1d1 !important;
    color: #1f1c17 !important;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.34) !important;
}

.web-rp-shell .web-popover :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400) {
    color: #55504a !important;
}

.web-rp-shell .web-popover :is(.bg-gray-50, .bg-gray-50\/80, .bg-gray-100, .bg-white) {
    background: #e3dbc9 !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
}

.web-rp-shell .web-popover input,
.web-rp-shell .web-popover textarea,
.web-rp-shell .web-popover select {
    background: #f3eee3 !important;
    border-color: #a79c84 !important;
    color: #1f1c17 !important;
}

.web-rp-shell .web-popover button:hover {
    background: #e3dbc9 !important;
    color: #55504a !important;
}

/* All named full-screen editors and resource managers. */
.web-rp-shell .web-modal > [class*="bg-white"],
.web-rp-shell .web-modal > [class*="bg-gray-50"] {
    background: #e8e1d1 !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
    box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.4) !important;
}

.web-rp-shell .web-modal > :is([class*="bg-white"], [class*="bg-gray-50"]) :is(h1, h2, h3, h4, p, label, dt, dd, li, .text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400) {
    color: #1f1c17 !important;
}

.web-rp-shell .web-modal > :is([class*="bg-white"], [class*="bg-gray-50"]) :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-50\/80) {
    background: #e3dbc9 !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
}

.web-rp-shell .web-modal > :is([class*="bg-white"], [class*="bg-gray-50"]) :is(input, textarea, select) {
    background: #ece5d6 !important;
    border-color: #a79c84 !important;
    color: #1f1c17 !important;
}

.web-rp-shell .web-modal > :is([class*="bg-white"], [class*="bg-gray-50"]) :is(.bg-primary-50, .bg-primary-100, .bg-primary-600, .bg-primary-700) {
    background: #e3dbc9 !important;
    color: #55504a !important;
    border-color: #a79c84 !important;
}

.web-rp-shell .web-modal > :is([class*="bg-white"], [class*="bg-gray-50"]) .btn-primary,
.web-rp-shell .web-modal > :is([class*="bg-white"], [class*="bg-gray-50"]) .bg-primary-600 {
    background: var(--ui-mint) !important;
    color: #1f1c17 !important;
}

.web-rp-shell .web-modal > :is([class*="bg-white"], [class*="bg-gray-50"]) :is(input, textarea, select):focus {
    outline: 2px solid var(--ui-mint) !important;
    outline-offset: 1px;
}

/* Comment drawer and its nested report/lock forms. */
.web-rp-shell .chat-comments-drawer {
    background: #e8e1d1 !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
}

.web-rp-shell .chat-comments-drawer .chat-comments-scroll {
    background: #ece5d6 !important;
}

.web-rp-shell .chat-comments-drawer :is(article, .chat-comment-menu, .bg-white) {
    background: #e8e1d1 !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
}

.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: #55504a !important;
}

.web-rp-shell .chat-comments-drawer textarea,
.web-rp-shell .chat-comments-drawer input,
.web-rp-shell .chat-comments-drawer select {
    background: #ece5d6 !important;
    border-color: #a79c84 !important;
    color: #1f1c17 !important;
}

/* Workshop dark canvas, controls and model picker. */
.web-workshop-shell,
.web-workshop-shell #app,
.web-workshop-shell .drawer-content,
.web-workshop-shell .ios-scroll-fix,
.web-workshop-shell .workshop-shell {
    background: var(--ui-paper) !important;
    color: #1f1c17 !important;
}

.web-workshop-shell .navbar,
.web-workshop-shell .drawer-side > div {
    background: #e3dbc9 !important;
}

.web-workshop-shell .navbar > .flex-none .btn {
    color: #1f1c17 !important;
}

.web-workshop-shell .navbar .text-base-content {
    color: #1f1c17 !important;
}

.web-workshop-shell .navbar .workshop-model-dropdown-panel .text-base-content,
.web-workshop-shell .navbar .workshop-model-dropdown-panel [class*="text-base-content/"] {
    color: #1f1c17 !important;
}

.web-workshop-shell .navbar > .flex-1 details > summary [class*="text-base-content"] {
    color: #1f1c17 !important;
}

.web-workshop-shell .workshop-model-dropdown-panel,
.web-workshop-shell .web-model-picker {
    border-color: #c6bca6 !important;
    background: #e8e1d1 !important;
    color: #1f1c17 !important;
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.42) !important;
}

.web-workshop-shell .web-model-picker > div,
.web-workshop-shell .web-model-picker .border-base-200\/70 {
    border-color: #c6bca6 !important;
}

.web-workshop-shell .web-model-picker :is(.text-base-content, [class*="text-base-content/"]) {
    color: #1f1c17 !important;
}

.web-workshop-shell .web-model-picker .btn-ghost {
    border-color: #c6bca6 !important;
    background: transparent !important;
    color: #1f1c17 !important;
}

.web-workshop-shell .web-model-picker button {
    background: transparent !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
}

.web-workshop-shell .web-model-picker button:hover {
    background: var(--ui-surface-sunken) !important;
    color: var(--ui-text) !important;
}

.web-workshop-shell .web-model-picker button[class*="bg-primary"],
.web-workshop-shell .web-model-picker .bg-primary {
    background: var(--ui-brand-soft) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border-strong) !important;
}

.web-workshop-shell .web-model-picker :is(.bg-blue-100, .bg-teal-100, .bg-amber-100, .bg-rose-100) {
    border-color: #c6bca6 !important;
    background: var(--ui-surface-raised) !important;
    color: var(--ui-text-secondary) !important;
}

.web-workshop-shell .card,
.web-workshop-shell .collapse,
.web-workshop-shell .rounded-xl.bg-base-100,
.web-workshop-shell .rounded-2xl.bg-base-100 {
    background: #e8e1d1 !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
}

.web-workshop-shell .text-base-content,
.web-workshop-shell [class*="text-base-content/"] {
    color: #1f1c17 !important;
}

.web-workshop-shell input,
.web-workshop-shell textarea,
.web-workshop-shell select,
.web-workshop-shell .select,
.web-workshop-shell .textarea,
.web-workshop-shell .input {
    background: #e8e1d1 !important;
    border-color: #a79c84 !important;
    color: #1f1c17 !important;
}

.web-workshop-shell input::placeholder,
.web-workshop-shell textarea::placeholder {
    color: #8c8577 !important;
}

.web-workshop-shell .bg-base-200,
.web-workshop-shell .bg-base-200\/30,
.web-workshop-shell .bg-base-200\/40,
.web-workshop-shell .bg-base-200\/50 {
    background: #e3dbc9 !important;
    color: #1f1c17 !important;
}

.web-workshop-shell .modal,
.web-workshop-shell .modal::backdrop,
.web-workshop-shell .modal-backdrop {
    background: rgba(20, 17, 13, 0.55) !important;
}

.web-workshop-shell .modal-box {
    background: #e8e1d1 !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
}

.web-workshop-shell .modal-box :is(h1, h2, h3, h4, p, label, dt, dd, li, .label-text, .text-base-content, [class*="text-base-content/"]) {
    color: #1f1c17 !important;
}

.web-workshop-shell .modal-box :is(.bg-base-100, .bg-base-200, .bg-base-200\/30, .bg-base-200\/40, .bg-base-200\/50) {
    background: #e3dbc9 !important;
    color: #1f1c17 !important;
}

.web-workshop-shell .modal-box input,
.web-workshop-shell .modal-box textarea,
.web-workshop-shell .modal-box select {
    background: #ece5d6 !important;
    border-color: #a79c84 !important;
    color: #1f1c17 !important;
}

.web-workshop-shell .character-list-floating-action {
    display: none !important;
}

/* Main web app: chat command room */
.web-rp-shell {
    background: var(--ui-ink);
    color: #e3dbc9;
}

.web-rp-shell #app {
    background: var(--ui-paper);
}

.web-rp-shell .chat-view-root {
    background: var(--ui-paper);
    color: var(--ui-ink);
}

.web-rp-shell .chat-view-root .char-bg-blur {
    filter: grayscale(1) contrast(0.7) brightness(0.82) !important;
    opacity: 0.26 !important;
}

.web-rp-shell .chat-header-layer {
    height: 64px;
    background: var(--ui-ink);
    border-bottom: 3px solid var(--ui-mint);
}

.web-rp-shell .chat-header-scrim {
    display: none;
}

.web-rp-shell .chat-header-content {
    height: 61px !important;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px !important;
}

.web-rp-shell .chat-header-content img {
    border-radius: 3px !important;
    border: 1px solid rgba(40, 34, 24, 0.32) !important;
    box-shadow: none !important;
}

.web-rp-shell .chat-header-content .text-white,
.web-rp-shell .chat-header-content .text-white\/60,
.web-rp-shell .chat-header-content .text-white\/70,
.web-rp-shell .chat-header-content .text-white\/80 {
    color: #f3eee3 !important;
    text-shadow: none !important;
}

.web-rp-shell .chat-header-content button {
    border-radius: 2px !important;
}

.web-rp-shell .chat-header-content button:hover {
    background: var(--ui-ink-raised) !important;
    color: var(--ui-mint) !important;
}

.web-rp-shell .chat-messages {
    padding: 86px max(20px, calc((100vw - 1080px) / 2)) 158px !important;
    background-color: var(--ui-paper) !important;
}

.web-rp-shell .chat-messages > .flex {
    position: relative;
}

.web-rp-shell .chat-messages > .flex::before {
    position: absolute;
    top: 18px;
    bottom: -44px;
    width: 1px;
    content: "";
    background: #c6bca6;
}

.web-rp-shell .chat-messages > .justify-start::before {
    left: 17px;
}

.web-rp-shell .chat-messages > .justify-end::before {
    right: 17px;
}

.web-rp-shell .chat-messages img.rounded-full,
.web-rp-shell .chat-messages .rounded-full {
    border-radius: 3px !important;
}

.web-rp-shell .chat-messages .msg-name-tag {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ui-muted) !important;
    font-size: 10px !important;
    letter-spacing: 0.08em;
    padding: 0 2px !important;
}

.web-rp-shell .chat-messages .msg-bubble-glass {
    border: 1px solid var(--ui-line) !important;
    border-left: 4px solid var(--ui-mint) !important;
    border-radius: 2px 14px 14px 2px !important;
    background: var(--ui-panel) !important;
    box-shadow: 7px 7px 0 rgba(40, 34, 24, 0.1) !important;
    backdrop-filter: none !important;
}

.web-rp-shell .chat-messages [data-role="user"] .msg-bubble-glass {
    border-color: var(--ui-ink) !important;
    border-right: 4px solid var(--ui-signal) !important;
    border-left-width: 1px !important;
    border-radius: 14px 2px 2px 14px !important;
    background: var(--ui-ink) !important;
    box-shadow: 7px 7px 0 rgba(255, 101, 69, 0.25) !important;
    color: #f3eee3 !important;
}

.web-rp-shell .chat-messages [data-role="user"] .msg-bubble-glass .markdown-body,
.web-rp-shell .chat-messages [data-role="user"] .msg-bubble-glass p,
.web-rp-shell .chat-messages [data-role="user"] .msg-bubble-glass span {
    color: inherit !important;
}

.web-rp-shell .chat-messages [data-role="system"] .msg-bubble-glass {
    border-left-color: var(--ui-signal) !important;
    background: #fff4ef !important;
    color: #8a2e1d !important;
}

.web-rp-shell .chat-messages .markdown-body {
    color: #e3dbc9 !important;
}

.web-rp-shell .chat-messages pre,
.web-rp-shell .chat-messages code {
    border-radius: 2px !important;
    background: #e3dbc9 !important;
    color: #ddd4c0 !important;
}

.web-rp-shell .chat-messages .bg-gray-50 {
    background: transparent !important;
}

.web-rp-shell .input-area-mobile {
    padding: 0 20px max(16px, env(safe-area-inset-bottom)) !important;
}

.web-rp-shell .input-island {
    max-width: 980px !important;
    padding: 10px 12px !important;
    border: 2px solid var(--ui-ink) !important;
    border-bottom: 5px solid var(--ui-mint) !important;
    border-radius: 2px !important;
    background: var(--ui-ink) !important;
    box-shadow: 10px 10px 0 rgba(40, 34, 24, 0.24) !important;
    backdrop-filter: none !important;
}

.web-rp-shell .input-island textarea,
.web-rp-shell .input-island input {
    color: #f3eee3 !important;
    caret-color: var(--ui-mint);
}

.web-rp-shell .input-island textarea::placeholder,
.web-rp-shell .input-island input::placeholder {
    color: #a79c84 !important;
}

.web-rp-shell .input-island button {
    border-radius: 2px !important;
}

.web-rp-shell .input-island button.bg-white,
.web-rp-shell .input-island .bg-white\/95 {
    border-color: #55504a !important;
    background: var(--ui-ink-raised) !important;
    color: #c6bca6 !important;
    box-shadow: none !important;
}

.web-rp-shell .input-island button:hover {
    background: var(--ui-mint) !important;
    color: var(--ui-ink) !important;
}

.web-rp-shell .input-island .rounded-2xl,
.web-rp-shell .input-island .rounded-xl,
.web-rp-shell .input-island .rounded-full {
    border-radius: 2px !important;
}

.web-rp-shell .suggest-btn {
    border: 1px solid var(--ui-ink) !important;
    border-left: 4px solid var(--ui-yellow) !important;
    border-radius: 2px !important;
    background: #fbfcf8 !important;
    color: var(--ui-ink) !important;
    box-shadow: 5px 5px 0 rgba(40, 34, 24, 0.18) !important;
}

.web-rp-shell .desc-panel {
    border: 2px solid var(--ui-ink) !important;
    border-radius: 2px !important;
    background: var(--ui-panel) !important;
    box-shadow: 10px 10px 0 rgba(40, 34, 24, 0.22) !important;
}

.web-rp-shell .desc-panel .rounded-xl,
.web-rp-shell .desc-panel .rounded-full {
    border-radius: 2px !important;
}

/* Main web app: tool configuration console */
.web-rp-shell .native-tools-view {
    min-height: 100%;
    padding: 32px max(20px, calc((100vw - 1100px) / 2)) 52px !important;
    background-color: var(--ui-paper);
}

.web-rp-shell .tools-page-heading {
    margin: 0 0 24px !important;
    padding-bottom: 16px;
    border-bottom: 3px solid var(--ui-ink);
}

.web-rp-shell .tools-page-heading h2 {
    color: var(--ui-ink) !important;
    font-size: 28px !important;
    letter-spacing: 0.04em;
}

.web-rp-shell .tools-page-heading h2 svg {
    color: var(--ui-signal) !important;
}

.web-rp-shell .tool-global-settings {
    margin-bottom: 20px !important;
    border: 2px solid var(--ui-ink) !important;
    border-radius: 2px !important;
    background: var(--ui-ink) !important;
    box-shadow: 7px 7px 0 rgba(40, 34, 24, 0.2) !important;
    backdrop-filter: none !important;
}

.web-rp-shell .tool-global-settings > button {
    min-height: 56px;
    border-radius: 0 !important;
    color: #1f1c17 !important;
}

.web-rp-shell .tool-global-settings > button:hover,
.web-rp-shell .tool-global-settings > button.bg-primary-50 {
    background: var(--ui-ink-raised) !important;
    color: var(--ui-mint) !important;
}

.web-rp-shell .tool-global-settings .bg-gray-50\/80,
.web-rp-shell .tool-global-settings .bg-white {
    border-color: #55504a !important;
    border-radius: 0 !important;
    background: #e3dbc9 !important;
}

.web-rp-shell .tool-global-settings label,
.web-rp-shell .tool-global-settings .text-gray-500 {
    color: #c6bca6 !important;
}

.web-rp-shell .tool-global-settings .bg-primary-50 {
    border-radius: 0 !important;
    background: var(--ui-mint) !important;
    color: var(--ui-ink) !important;
}

.web-rp-shell #active-tools-list {
    display: grid;
    gap: 14px;
}

.web-rp-shell .tool-config-card {
    position: relative;
    min-height: 92px;
    padding: 18px 18px 18px 24px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 2px !important;
    background: var(--ui-panel) !important;
    box-shadow: 5px 5px 0 rgba(40, 34, 24, 0.12) !important;
}

.web-rp-shell .tool-config-card::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 7px;
    content: "";
    background: var(--ui-yellow);
}

.web-rp-shell .tool-config-card:hover {
    transform: translate(-2px, -2px);
    border-color: var(--ui-ink) !important;
    box-shadow: 8px 8px 0 rgba(40, 34, 24, 0.17) !important;
}

.web-rp-shell .tool-config-card h3 {
    color: var(--ui-ink) !important;
    letter-spacing: 0.03em;
}

.web-rp-shell .tool-config-card .text-primary-600,
.web-rp-shell .tool-config-card .bg-primary-50 {
    background: #e3dbc9 !important;
    color: var(--ui-mint-deep) !important;
    border-radius: 2px !important;
}

.web-rp-shell .tool-config-card .tool-description-preview {
    color: var(--ui-muted) !important;
}

.web-rp-shell .tool-config-card .border-l {
    border-color: var(--ui-line) !important;
}

.web-rp-shell .tool-config-card .rounded-lg,
.web-rp-shell .tool-config-card .rounded-full {
    border-radius: 2px !important;
}

.web-rp-shell .native-tools-close {
    border-radius: 2px !important;
    background: var(--ui-ink) !important;
    color: var(--ui-mint) !important;
}

/* Character workshop: editorial production desk */
.web-workshop-shell {
    background: var(--ui-ink) !important;
    color: #e3dbc9;
}

.web-workshop-shell #app {
    background: var(--ui-paper);
}

.web-workshop-shell .navbar {
    min-height: 72px !important;
    height: 72px !important;
    padding: 0 22px !important;
    background: var(--ui-ink) !important;
    border-bottom: 3px solid var(--ui-mint) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.web-workshop-shell .navbar .text-base-content,
.web-workshop-shell .navbar .btn {
    color: #1f1c17 !important;
}

.web-workshop-shell .navbar .w-9.h-9 {
    border-radius: 2px !important;
    background: var(--ui-signal) !important;
    box-shadow: 4px 4px 0 #7b2518 !important;
}

.web-workshop-shell .navbar .border-r {
    border-color: #55504a !important;
}

.web-workshop-shell .navbar .dropdown > summary {
    border: 1px solid #55504a !important;
    border-radius: 2px !important;
    background: var(--ui-ink-raised) !important;
    box-shadow: none !important;
}

.web-workshop-shell .navbar .dropdown > summary .text-base-content {
    color: #f3eee3 !important;
}

.web-workshop-shell .workshop-model-dropdown-panel {
    border: 2px solid var(--ui-ink) !important;
    border-radius: 2px !important;
    background: var(--ui-panel) !important;
    box-shadow: 9px 9px 0 rgba(40, 34, 24, 0.24) !important;
}

.web-workshop-shell .drawer-content {
    background-color: var(--ui-paper) !important;
}

.web-workshop-shell .workshop-shell {
    max-width: 1540px;
    width: 100%;
    margin: 0 auto;
}

.web-workshop-shell .drawer-side > div {
    border-right: 2px solid #e3dbc9;
    background: var(--ui-ink) !important;
}

.web-workshop-shell .drawer-side .menu {
    color: #c6bca6 !important;
}

.web-workshop-shell .drawer-side .menu li > * {
    border-radius: 2px !important;
}

.web-workshop-shell .drawer-side .menu li > *:hover {
    background: var(--ui-ink-raised) !important;
    color: var(--ui-mint) !important;
}

.web-workshop-shell .drawer-side .menu .active,
.web-workshop-shell .drawer-side .menu li > .bg-primary {
    background: var(--ui-mint) !important;
    color: var(--ui-ink) !important;
}

.web-workshop-shell .tabs {
    gap: 1px;
    padding: 14px 22px 0;
    border-bottom: 1px solid var(--ui-line);
}

.web-workshop-shell .tab {
    height: 42px !important;
    border-radius: 2px 2px 0 0 !important;
    color: var(--ui-muted) !important;
    font-weight: 700;
}

.web-workshop-shell .tab.tab-active,
.web-workshop-shell .tab-active {
    border-color: var(--ui-ink) !important;
    background: var(--ui-ink) !important;
    color: var(--ui-mint) !important;
}

.web-workshop-shell .btn {
    min-height: 36px;
    border-radius: 2px !important;
    border-width: 1px !important;
    box-shadow: none !important;
    font-weight: 700;
}

.web-workshop-shell .btn-primary,
.web-workshop-shell .bg-primary {
    border-color: var(--ui-mint-deep) !important;
    background: var(--ui-mint) !important;
    color: var(--ui-ink) !important;
}

.web-workshop-shell .btn-primary:hover,
.web-workshop-shell .bg-primary:hover {
    background: #26221b !important;
}

.web-workshop-shell .btn-secondary,
.web-workshop-shell .bg-secondary {
    background: var(--ui-signal) !important;
    color: #fff8f2 !important;
}

.web-workshop-shell .card,
.web-workshop-shell .collapse,
.web-workshop-shell .modal-box,
.web-workshop-shell .rounded-xl.bg-base-100,
.web-workshop-shell .rounded-2xl.bg-base-100 {
    border: 1px solid var(--ui-line) !important;
    border-radius: 2px !important;
    background: var(--ui-panel) !important;
    box-shadow: 5px 5px 0 rgba(40, 34, 24, 0.1) !important;
}

.web-workshop-shell input,
.web-workshop-shell textarea,
.web-workshop-shell select,
.web-workshop-shell .select,
.web-workshop-shell .textarea,
.web-workshop-shell .input {
    border: 1px solid #8c8577 !important;
    border-radius: 2px !important;
    background: #ffffff !important;
    color: var(--ui-ink) !important;
    box-shadow: inset 3px 3px 0 rgba(40, 34, 24, 0.045) !important;
}

.web-workshop-shell input:focus,
.web-workshop-shell textarea:focus,
.web-workshop-shell select:focus,
.web-workshop-shell .select:focus,
.web-workshop-shell .textarea:focus,
.web-workshop-shell .input:focus {
    outline: 2px solid var(--ui-mint) !important;
    outline-offset: 1px;
    border-color: var(--ui-ink) !important;
}

.web-workshop-shell .badge {
    border-radius: 2px !important;
    font-weight: 700;
}

.web-workshop-shell .bg-base-200,
.web-workshop-shell .bg-base-200\/40,
.web-workshop-shell .bg-base-200\/50 {
    background: #e3dbc9 !important;
}

.web-workshop-shell .border-base-200,
.web-workshop-shell .border-base-300 {
    border-color: var(--ui-line) !important;
}

.web-workshop-shell .text-primary {
    color: var(--ui-mint-deep) !important;
}

.web-workshop-shell .toast-container-custom > div {
    border: 2px solid var(--ui-ink) !important;
    border-radius: 2px !important;
    box-shadow: 6px 6px 0 rgba(40, 34, 24, 0.22) !important;
}

/* Main web app: all existing dialogs, editors and confirmation surfaces */
.web-rp-shell [class~="fixed"][class~="inset-0"] {
    background-color: rgba(40, 34, 24, 0.82) !important;
    backdrop-filter: none !important;
}

.web-rp-shell [class~="fixed"][class~="inset-0"] > [class*="bg-white"],
.web-rp-shell [class~="fixed"][class~="inset-0"] > [class*="bg-gray-50"],
.web-rp-shell .email-captcha-modal {
    border: 2px solid var(--ui-ink) !important;
    border-top: 6px solid var(--ui-mint) !important;
    border-radius: 2px !important;
    background: var(--ui-panel) !important;
    color: var(--ui-ink) !important;
    box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: none !important;
}

.web-rp-shell [class~="fixed"][class~="inset-0"] > [class*="bg-white"] :is(h1, h2, h3, h4, p, label, dt, dd, li),
.web-rp-shell [class~="fixed"][class~="inset-0"] > [class*="bg-gray-50"] :is(h1, h2, h3, h4, p, label, dt, dd, li),
.web-rp-shell .email-captcha-modal :is(h1, h2, h3, h4, p, label) {
    color: var(--ui-ink) !important;
}

.web-rp-shell [class~="fixed"][class~="inset-0"] > :is([class*="bg-white"], [class*="bg-gray-50"]) :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400, .text-slate-900, .text-slate-800, .text-slate-700),
.web-rp-shell .email-captcha-modal :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400) {
    color: #55504a !important;
}

.web-rp-shell [class~="fixed"][class~="inset-0"] > :is([class*="bg-white"], [class*="bg-gray-50"]) :is(input, textarea, select),
.web-rp-shell .email-captcha-modal :is(input, textarea, select) {
    border: 1px solid #8c8577 !important;
    border-radius: 2px !important;
    background: #ffffff !important;
    color: var(--ui-ink) !important;
    box-shadow: inset 2px 2px 0 rgba(40, 34, 24, 0.05) !important;
}

.web-rp-shell [class~="fixed"][class~="inset-0"] > :is([class*="bg-white"], [class*="bg-gray-50"]) :is(input, textarea, select):focus,
.web-rp-shell .email-captcha-modal :is(input, textarea, select):focus {
    outline: 2px solid var(--ui-mint) !important;
    outline-offset: 1px;
    border-color: var(--ui-ink) !important;
}

.web-rp-shell [class~="fixed"][class~="inset-0"] > :is([class*="bg-white"], [class*="bg-gray-50"]) :is(.bg-gray-50, .bg-gray-100, .bg-gray-50\/80),
.web-rp-shell .email-captcha-modal :is(.bg-gray-50, .bg-gray-100, .bg-gray-50\/80) {
    background: #e3dbc9 !important;
    color: var(--ui-ink) !important;
}

.web-rp-shell [class~="fixed"][class~="inset-0"] > :is([class*="bg-white"], [class*="bg-gray-50"]) :is(.rounded-xl, .rounded-2xl, .rounded-full, .rounded-lg),
.web-rp-shell .email-captcha-modal :is(.rounded-xl, .rounded-2xl, .rounded-full, .rounded-lg) {
    border-radius: 2px !important;
}

.web-rp-shell [class~="fixed"][class~="inset-0"] > :is([class*="bg-white"], [class*="bg-gray-50"]) :is(.bg-primary-600, .bg-primary-700, .bg-primary-500),
.web-rp-shell .email-captcha-modal :is(.bg-primary-600, .bg-primary-700, .bg-primary-500) {
    background: var(--ui-mint) !important;
    color: var(--ui-ink) !important;
}

.web-rp-shell .chat-header-layer [class*="bg-white/95"],
.web-rp-shell .tools-menu-container [class*="bg-white/95"],
.web-rp-shell .desc-panel {
    border: 2px solid var(--ui-ink) !important;
    border-radius: 2px !important;
    background: var(--ui-panel) !important;
    color: var(--ui-ink) !important;
    box-shadow: 7px 7px 0 rgba(40, 34, 24, 0.22) !important;
    backdrop-filter: none !important;
}

.web-rp-shell .chat-header-layer [class*="bg-white/95"] :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400),
.web-rp-shell .tools-menu-container [class*="bg-white/95"] :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400),
.web-rp-shell .desc-panel :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400) {
    color: #55504a !important;
}

.web-rp-shell .chat-header-layer [class*="bg-white/95"] button,
.web-rp-shell .tools-menu-container [class*="bg-white/95"] button {
    border-radius: 2px !important;
}

.web-rp-shell .chat-header-layer [class*="bg-white/95"] button:hover,
.web-rp-shell .tools-menu-container [class*="bg-white/95"] button:hover {
    background: #e3dbc9 !important;
    color: var(--ui-mint-deep) !important;
}

/* Chat comment drawer uses its own overlay markup. */
.web-rp-shell .chat-comments-overlay {
    background: transparent !important;
}

.web-rp-shell .chat-comments-backdrop {
    background: rgba(40, 34, 24, 0.84) !important;
    backdrop-filter: none !important;
}

.web-rp-shell .chat-comments-drawer {
    border: 2px solid var(--ui-ink) !important;
    border-bottom: 0 !important;
    border-top: 6px solid var(--ui-mint) !important;
    border-radius: 2px 2px 0 0 !important;
    background: var(--ui-panel) !important;
    color: var(--ui-ink) !important;
    box-shadow: 10px -10px 0 rgba(0, 0, 0, 0.22) !important;
}

.web-rp-shell .chat-comments-drawer .chat-comments-grab {
    border-radius: 0 !important;
    background: var(--ui-mint-deep) !important;
}

.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: #55504a !important;
}

.web-rp-shell .chat-comments-drawer .chat-comments-scroll {
    background: #e3dbc9 !important;
}

.web-rp-shell .chat-comments-drawer :is(article, .chat-comment-menu, .bg-white) {
    border-color: var(--ui-line) !important;
    border-radius: 2px !important;
    background: #ffffff !important;
    box-shadow: 3px 3px 0 rgba(40, 34, 24, 0.09) !important;
}

.web-rp-shell .chat-comments-drawer :is(.bg-gray-50, .bg-gray-100, .bg-\[\#f8fafc\]) {
    border-radius: 2px !important;
    background: #e3dbc9 !important;
    color: var(--ui-ink) !important;
}

.web-rp-shell .chat-comments-drawer :is(button, .chat-comment-menu-item) {
    border-radius: 2px !important;
}

.web-rp-shell .chat-comments-drawer :is(button, .chat-comment-menu-item):hover {
    background: #e3dbc9 !important;
    color: var(--ui-mint-deep) !important;
}

.web-rp-shell .chat-comments-drawer .bg-gray-900 {
    background: var(--ui-ink) !important;
    color: #1f1c17 !important;
}

/* Character workshop: Daisy dialogs and their nested form pages */
.web-workshop-shell .modal,
.web-workshop-shell .modal::backdrop,
.web-workshop-shell .modal-backdrop {
    background: rgba(40, 34, 24, 0.84) !important;
    backdrop-filter: none !important;
}

.web-workshop-shell .modal-box {
    border: 2px solid var(--ui-ink) !important;
    border-top: 6px solid var(--ui-mint) !important;
    border-radius: 2px !important;
    background: var(--ui-panel) !important;
    color: var(--ui-ink) !important;
    box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.35) !important;
}

/* The sticky workshop navbar uses z-index: 1000. Keep the long assembly
   dialog above it and leave the form itself scrollable inside the viewport. */
.web-workshop-shell .character-assembly-modal {
    z-index: 1200 !important;
    inset: 0 !important;
    padding: 1rem !important;
    overflow: hidden !important;
}

.web-workshop-shell .character-assembly-modal::backdrop {
    z-index: -1 !important;
}

.web-workshop-shell .character-assembly-modal > .modal-box {
    width: min(100%, 48rem) !important;
    max-height: calc(100dvh - 2rem) !important;
    margin: 0 auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

@media (max-width: 768px) {
    .web-workshop-shell .character-assembly-modal {
        padding: 0.5rem !important;
    }

    .web-workshop-shell .character-assembly-modal > .modal-box {
        max-height: calc(100dvh - 1rem) !important;
    }
}

.web-workshop-shell .modal-box :is(h1, h2, h3, h4, p, label, dt, dd, li, .label-text, .text-base-content) {
    color: var(--ui-ink) !important;
}

.web-workshop-shell .modal-box :is(.bg-base-100, .bg-base-200, .bg-base-200\/30, .bg-base-200\/40, .bg-base-200\/50) {
    background: #e3dbc9 !important;
    color: var(--ui-ink) !important;
}

.web-workshop-shell .modal-box :is(.btn-ghost, .btn-outline) {
    border-color: #8c8577 !important;
    background: #ffffff !important;
    color: var(--ui-ink) !important;
}

.web-workshop-shell .modal-box :is(.btn-ghost, .btn-outline):hover {
    border-color: var(--ui-ink) !important;
    background: #e3dbc9 !important;
    color: var(--ui-mint-deep) !important;
}

.web-workshop-shell .modal-box .modal-action {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--ui-line);
}

.web-workshop-shell .modal-box .rounded-xl,
.web-workshop-shell .modal-box .rounded-2xl,
.web-workshop-shell .modal-box .rounded-lg,
.web-workshop-shell .modal-box .rounded-full {
    border-radius: 2px !important;
}

@media (max-width: 768px) {
    .web-rp-shell .chat-header-layer {
        height: 56px;
    }

    .web-rp-shell .chat-header-content {
        height: 53px !important;
        padding: 0 12px !important;
    }

    .web-rp-shell .chat-messages {
        padding: 74px 12px 144px !important;
    }

    .web-rp-shell .chat-messages > .flex::before {
        display: none;
    }

    .web-rp-shell .input-area-mobile {
        padding: 0 8px max(8px, env(safe-area-inset-bottom)) !important;
    }

    .web-rp-shell .input-island {
        border-bottom-width: 4px !important;
        box-shadow: 5px 5px 0 rgba(40, 34, 24, 0.22) !important;
    }

    .web-rp-shell .native-tools-view {
        padding: 20px 14px 32px !important;
    }

    .web-rp-shell .tools-page-heading h2 {
        font-size: 23px !important;
    }

    .web-rp-shell .tool-config-card {
        padding: 14px 12px 14px 19px !important;
    }

    .web-workshop-shell .navbar {
        min-height: 58px !important;
        height: 58px !important;
        padding: 0 8px !important;
    }

    .web-workshop-shell .tabs {
        padding: 8px 8px 0;
        overflow-x: auto;
    }

    .web-workshop-shell .tab {
        min-width: max-content;
        height: 38px !important;
    }

    .web-workshop-shell .drawer-side > div {
        border-right-width: 0;
    }

    .web-rp-shell [class~="fixed"][class~="inset-0"] > [class*="bg-white"],
    .web-rp-shell [class~="fixed"][class~="inset-0"] > [class*="bg-gray-50"],
    .web-rp-shell .email-captcha-modal,
    .web-workshop-shell .modal-box,
    .web-rp-shell .chat-comments-drawer {
        border-top-width: 4px !important;
        box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3) !important;
    }
}

/* Effective dark theme overrides: kept last so legacy utility rules cannot win. */
:root {
    --ui-ink: #1f1c17;
    --ui-ink-raised: #e8e1d1;
    --ui-paper: #ece5d6;
    --ui-panel: #e8e1d1;
    --ui-line: #c6bca6;
    --ui-muted: #8c8577;
    --ui-mint: #26221b;
    --ui-mint-deep: #1c1812;
    --ui-signal: #ff765d;
    --ui-yellow: #f0c654;
}

.web-rp-shell,
.web-rp-shell #app,
.web-rp-shell .app-main,
.web-rp-shell .chat-view-root,
.web-rp-shell .native-tools-view,
.web-workshop-shell,
.web-workshop-shell #app,
.web-workshop-shell .drawer-content,
.web-workshop-shell .workshop-shell,
.web-workshop-shell .ios-scroll-fix {
    background: var(--ui-paper) !important;
    color: #1f1c17 !important;
}

.web-rp-shell [class*="bg-white"],
.web-rp-shell [class*="bg-gray-50"],
.web-rp-shell [class*="bg-gray-100"] {
    background: #e8e1d1 !important;
    border-color: #c6bca6 !important;
}

.web-rp-shell [class*="text-gray-900"],
.web-rp-shell [class*="text-gray-800"],
.web-rp-shell [class*="text-gray-700"],
.web-rp-shell [class*="text-gray-600"],
.web-rp-shell [class*="text-gray-500"],
.web-rp-shell [class*="text-gray-400"] {
    color: #55504a !important;
}

.web-rp-shell [class*="text-primary-"] {
    color: #1c1812 !important;
}

.web-rp-shell .chat-view-root {
    isolation: isolate;
}

.web-rp-shell .chat-view-root .char-bg-blur {
    opacity: 0.78 !important;
    filter: blur(2px) brightness(0.58) saturate(0.9) contrast(0.9) !important;
}

.web-rp-shell .chat-messages {
    background: rgba(40, 34, 24, 0.12) !important;
    background-color: transparent !important;
    color: #1f1c17 !important;
}

.web-rp-shell .chat-messages.bg-gray-50 {
    background: var(--ui-paper) !important;
}

.web-rp-shell .chat-messages > .flex::before {
    background: rgba(40, 34, 24, 0.18) !important;
}

.web-rp-shell .chat-messages .msg-name-tag {
    color: #55504a !important;
}

.web-rp-shell .chat-messages .msg-bubble-glass {
    border-color: #c6bca6 !important;
    background: rgba(232, 225, 209, 0.94) !important;
    color: #1f1c17 !important;
    box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.28) !important;
}

.web-rp-shell .chat-messages .msg-bubble-glass .markdown-body {
    color: #1f1c17 !important;
}

.web-rp-shell .chat-messages [data-role="user"] .msg-bubble-glass {
    background: #ddd4c0 !important;
    border-color: #a79c84 !important;
    color: #1f1c17 !important;
}

.web-rp-shell .chat-messages [data-role="user"] .msg-bubble-glass .markdown-body {
    color: #1f1c17 !important;
}

.web-rp-shell .chat-messages [data-role="system"] .msg-bubble-glass {
    background: #3a2420 !important;
    border-color: #a34b39 !important;
    color: #ffe9e2 !important;
}

.web-rp-shell .chat-messages pre,
.web-rp-shell .chat-messages code {
    background: #e3dbc9 !important;
    color: #55504a !important;
    border-color: #c6bca6 !important;
}

.web-rp-shell .input-island {
    background: #e3dbc9 !important;
    border-color: #c6bca6 !important;
    border-bottom-color: var(--ui-mint) !important;
}

.web-rp-shell .input-island textarea,
.web-rp-shell .input-island input,
.web-rp-shell .input-island .chat-input-scrollbar {
    background: #f3eee3 !important;
    border: 1px solid #a79c84 !important;
    color: #1f1c17 !important;
    caret-color: #1c1812 !important;
}

.web-rp-shell .input-island textarea::placeholder,
.web-rp-shell .input-island input::placeholder {
    color: #8c8577 !important;
}

.web-rp-shell .native-tools-view {
    background: var(--ui-paper) !important;
}

.web-rp-shell .tools-page-heading {
    border-bottom-color: #c6bca6 !important;
}

.web-rp-shell .tools-page-heading h2,
.web-rp-shell .tool-config-card h3 {
    color: #1f1c17 !important;
}

.web-rp-shell .tool-global-settings {
    border-color: #c6bca6 !important;
    background: #e3dbc9 !important;
}

.web-rp-shell .tool-global-settings .bg-gray-50\/80,
.web-rp-shell .tool-global-settings .bg-white {
    background: #e8e1d1 !important;
    border-color: #c6bca6 !important;
}

.web-rp-shell .tool-global-settings label,
.web-rp-shell .tool-global-settings .text-gray-500,
.web-rp-shell .tool-config-card .tool-description-preview {
    color: #55504a !important;
}

.web-rp-shell .tool-config-card {
    border-color: #c6bca6 !important;
    background: #e8e1d1 !important;
    color: #1f1c17 !important;
}

.web-rp-shell .web-popover {
    border-color: #c6bca6 !important;
    background: #e8e1d1 !important;
    color: #1f1c17 !important;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.34) !important;
}

.web-rp-shell .web-popover :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400) {
    color: #55504a !important;
}

.web-rp-shell .web-popover :is(.bg-gray-50, .bg-gray-50\/80, .bg-gray-100, .bg-white) {
    background: #e3dbc9 !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
}

.web-rp-shell .web-popover :is(input, textarea, select) {
    background: #f3eee3 !important;
    border-color: #a79c84 !important;
    color: #1f1c17 !important;
}

.web-rp-shell .web-modal > [class*="bg-white"],
.web-rp-shell .web-modal > [class*="bg-gray-50"] {
    background: #e8e1d1 !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
    box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.4) !important;
}

.web-rp-shell .web-modal > :is([class*="bg-white"], [class*="bg-gray-50"]) :is(h1, h2, h3, h4, p, label, dt, dd, li, .text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400) {
    color: #1f1c17 !important;
}

.web-rp-shell .web-modal > :is([class*="bg-white"], [class*="bg-gray-50"]) :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-50\/80) {
    background: #e3dbc9 !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
}

.web-rp-shell .web-modal > :is([class*="bg-white"], [class*="bg-gray-50"]) :is(input, textarea, select) {
    background: #ece5d6 !important;
    border-color: #a79c84 !important;
    color: #1f1c17 !important;
}

.web-rp-shell .web-modal > :is([class*="bg-white"], [class*="bg-gray-50"]) .btn-primary,
.web-rp-shell .web-modal > :is([class*="bg-white"], [class*="bg-gray-50"]) .bg-primary-600 {
    background: var(--ui-mint) !important;
    color: #1f1c17 !important;
}

.web-rp-shell .chat-comments-drawer {
    background: #e8e1d1 !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
}

.web-rp-shell .chat-comments-drawer .chat-comments-scroll {
    background: #ece5d6 !important;
}

.web-rp-shell .chat-comments-drawer :is(article, .chat-comment-menu, .bg-white) {
    background: #e8e1d1 !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
}

.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: #55504a !important;
}

.web-rp-shell .chat-comments-drawer :is(textarea, input, select) {
    background: #ece5d6 !important;
    border-color: #a79c84 !important;
    color: #1f1c17 !important;
}

.web-workshop-shell .navbar,
.web-workshop-shell .drawer-side > div {
    background: #e3dbc9 !important;
}

.web-workshop-shell .navbar > .flex-none .btn {
    color: #1f1c17 !important;
}

.web-workshop-shell .navbar .text-base-content {
    color: #1f1c17 !important;
}

.web-workshop-shell .navbar .workshop-model-dropdown-panel .text-base-content,
.web-workshop-shell .navbar .workshop-model-dropdown-panel [class*="text-base-content/"] {
    color: #1f1c17 !important;
}

.web-workshop-shell .navbar > .flex-1 details > summary [class*="text-base-content"] {
    color: #1f1c17 !important;
}

.web-workshop-shell .web-model-picker,
.web-workshop-shell .workshop-model-dropdown-panel {
    border-color: #c6bca6 !important;
    background: #e8e1d1 !important;
    color: #1f1c17 !important;
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.42) !important;
}

.web-workshop-shell .web-model-picker > div,
.web-workshop-shell .web-model-picker .border-base-200\/70 {
    border-color: #c6bca6 !important;
}

.web-workshop-shell .web-model-picker :is(.text-base-content, [class*="text-base-content/"]) {
    color: #1f1c17 !important;
}

.web-workshop-shell .web-model-picker .btn-ghost,
.web-workshop-shell .web-model-picker button {
    border-color: #c6bca6 !important;
    background: transparent !important;
    color: #1f1c17 !important;
}

.web-workshop-shell .web-model-picker button:hover {
    background: var(--ui-surface-sunken) !important;
    color: var(--ui-text) !important;
}

.web-workshop-shell .web-model-picker button[class*="bg-primary"],
.web-workshop-shell .web-model-picker .bg-primary {
    background: var(--ui-brand-soft) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border-strong) !important;
}

.web-workshop-shell .web-model-picker :is(.bg-blue-100, .bg-teal-100, .bg-amber-100, .bg-rose-100) {
    border-color: #c6bca6 !important;
    background: var(--ui-surface-raised) !important;
    color: var(--ui-text-secondary) !important;
}

.web-workshop-shell .card,
.web-workshop-shell .collapse,
.web-workshop-shell .rounded-xl.bg-base-100,
.web-workshop-shell .rounded-2xl.bg-base-100 {
    background: #e8e1d1 !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
}

.web-workshop-shell .text-base-content,
.web-workshop-shell [class*="text-base-content/"] {
    color: #1f1c17 !important;
}

.web-workshop-shell input,
.web-workshop-shell textarea,
.web-workshop-shell select,
.web-workshop-shell .select,
.web-workshop-shell .textarea,
.web-workshop-shell .input {
    background: #e8e1d1 !important;
    border-color: #a79c84 !important;
    color: #1f1c17 !important;
}

.web-workshop-shell input::placeholder,
.web-workshop-shell textarea::placeholder {
    color: #8c8577 !important;
}

.web-workshop-shell .bg-base-200,
.web-workshop-shell .bg-base-200\/30,
.web-workshop-shell .bg-base-200\/40,
.web-workshop-shell .bg-base-200\/50 {
    background: #e3dbc9 !important;
    color: #1f1c17 !important;
}

.web-workshop-shell .modal,
.web-workshop-shell .modal::backdrop,
.web-workshop-shell .modal-backdrop {
    background: rgba(20, 17, 13, 0.55) !important;
}

.web-workshop-shell .modal-box {
    background: #e8e1d1 !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
}

.web-workshop-shell .modal-box :is(h1, h2, h3, h4, p, label, dt, dd, li, .label-text, .text-base-content, [class*="text-base-content/"]) {
    color: #1f1c17 !important;
}

.web-workshop-shell .modal-box :is(.bg-base-100, .bg-base-200, .bg-base-200\/30, .bg-base-200\/40, .bg-base-200\/50) {
    background: #e3dbc9 !important;
    color: #1f1c17 !important;
}

.web-workshop-shell .modal-box :is(input, textarea, select) {
    background: #ece5d6 !important;
    border-color: #a79c84 !important;
    color: #1f1c17 !important;
}

.web-workshop-shell .character-list-floating-action {
    display: none !important;
}

.web-workshop-shell [class*="bg-base-100"],
.web-workshop-shell [class*="bg-base-100/"] {
    background: #e8e1d1 !important;
    border-color: #c6bca6 !important;
}

.web-workshop-shell [class*="border-base-"] {
    border-color: #c6bca6 !important;
}

.web-workshop-shell [class*="text-base-content/"] {
    color: #55504a !important;
}

/* Android WebView routes add native_* classes before this stylesheet loads. */
html.native-chat-mode,
html.native-chat-mode body,
html.native-tool-mode,
html.native-tool-mode body,
html.native-workshop-mode,
html.native-workshop-mode body {
    background: #ece5d6 !important;
    color: #1f1c17 !important;
}

html.native-chat-mode .native-chat-shell,
html.native-chat-mode .native-chat-shell .app-main,
html.native-chat-mode .native-chat-shell .chat-view-root {
    background: #ece5d6 !important;
    color: #1f1c17 !important;
}

html.native-chat-mode .native-chat-shell .chat-header-layer {
    background: #e3dbc9 !important;
    border-bottom-color: var(--ui-mint) !important;
    box-shadow: none !important;
}

html.native-chat-mode .native-chat-shell .chat-messages {
    background: rgba(40, 34, 24, 0.12) !important;
    color: #1f1c17 !important;
}

html.native-chat-mode .native-chat-shell .chat-messages.bg-gray-50 {
    background: transparent !important;
}

html.native-chat-mode .native-chat-shell .char-bg-blur {
    opacity: 0.78 !important;
    filter: blur(2px) brightness(0.58) saturate(0.9) contrast(0.9) !important;
}

html.native-chat-mode .native-chat-shell .input-island {
    background: #e3dbc9 !important;
    border-color: #c6bca6 !important;
    border-bottom-color: var(--ui-mint) !important;
}

html.native-chat-mode .native-chat-shell .input-island :is(textarea, input, .chat-input-scrollbar) {
    background: #f3eee3 !important;
    border-color: #a79c84 !important;
    color: #1f1c17 !important;
    caret-color: #1c1812 !important;
}

html.native-chat-mode .native-chat-shell .input-island :is(textarea, input)::placeholder {
    color: #8c8577 !important;
}

html.native-chat-mode .native-chat-shell .msg-bubble-glass {
    background: rgba(232, 225, 209, 0.94) !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
}

html.native-chat-mode .native-chat-shell [data-role="user"] .msg-bubble-glass {
    background: #ddd4c0 !important;
    border-color: #a79c84 !important;
    color: #1f1c17 !important;
}

html.native-chat-mode .native-chat-shell .msg-bubble-glass .markdown-body,
html.native-chat-mode .native-chat-shell .chat-messages .markdown-body {
    color: inherit !important;
}

html.native-tool-mode .app-main,
html.native-tool-mode .native-tools-view,
html.native-tool-tools .native-tools-view {
    background: #ece5d6 !important;
    color: #1f1c17 !important;
}

html.native-tool-tools .native-tools-view {
    padding: calc(12px + env(safe-area-inset-top)) 10px calc(24px + env(safe-area-inset-bottom)) !important;
}

html.native-tool-mode .tools-page-heading {
    border-bottom-color: #c6bca6 !important;
}

html.native-tool-mode .tools-page-heading h2,
html.native-tool-mode .tool-config-card h3 {
    color: #1f1c17 !important;
}

html.native-tool-mode .tool-global-settings {
    background: #e3dbc9 !important;
    border-color: #c6bca6 !important;
}

html.native-tool-mode .tool-global-settings :is(.bg-gray-50, .bg-gray-50\/80, .bg-white),
html.native-tool-mode .tool-config-card {
    background: #e8e1d1 !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
}

html.native-tool-mode .tool-config-card :is(.text-gray-400, .text-gray-500, .text-gray-600),
html.native-tool-mode .tool-global-settings :is(label, .text-gray-500) {
    color: #55504a !important;
}

html.native-tool-mode .native-tools-close {
    background: #e3dbc9 !important;
    border-color: #c6bca6 !important;
    color: #1c1812 !important;
    box-shadow: none !important;
}

html.native-tool-mode .z-\[55\] {
    background: #ece5d6 !important;
}

html.native-tool-mode .z-\[55\] > .bg-gray-50 {
    background: #e8e1d1 !important;
    border: 2px solid #c6bca6 !important;
    border-top: 4px solid var(--ui-mint) !important;
    color: #1f1c17 !important;
}

html.native-workshop-mode .web-workshop-shell,
html.native-workshop-mode .web-workshop-shell #app,
html.native-workshop-mode .web-workshop-shell .drawer-content,
html.native-workshop-mode .web-workshop-shell .workshop-shell,
html.native-workshop-mode .web-workshop-shell .ios-scroll-fix {
    background: #ece5d6 !important;
    color: #1f1c17 !important;
}

@media (max-width: 767px) {
    html.native-chat-mode .native-chat-shell .chat-header-layer {
        background: #e3dbc9 !important;
        border-bottom: 3px solid var(--ui-mint) !important;
    }

    html.native-chat-mode .native-chat-shell .chat-messages {
        padding: 14px 12px 142px !important;
    }

    html.native-chat-mode .native-chat-shell .input-area-mobile {
        padding: 0 10px max(10px, env(safe-area-inset-bottom)) !important;
    }

    html.native-workshop-mode .web-workshop-shell .navbar {
        background: #e3dbc9 !important;
        border-bottom-color: var(--ui-mint) !important;
    }
}

/* Comment bodies need full contrast on the dark drawer surface. */
.web-rp-shell .chat-comments-drawer .chat-comment-item :is(.text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500),
.web-rp-shell .chat-comments-drawer .chat-comment-content,
.web-rp-shell .chat-comments-drawer .chat-comment-content :is(p, span, div, strong, b, em, i, li, blockquote) {
    color: #f3eee3 !important;
}

.web-rp-shell .chat-comments-drawer .chat-comment-content a {
    color: #1c1812 !important;
}

.web-rp-shell .chat-comments-drawer .chat-comment-content :is(code, pre) {
    background: #e3dbc9 !important;
    color: #ddd4c0 !important;
}

.web-rp-shell .chat-comments-drawer .chat-comment-item :is(time, .text-gray-400),
.web-rp-shell .chat-comments-drawer .chat-comment-composer > div:last-child {
    color: #55504a !important;
}

/* Keep every visible label and comment in the comment drawer white. */
.web-rp-shell .chat-comments-drawer,
.web-rp-shell .chat-comments-drawer * {
    color: #f3eee3 !important;
}

.web-rp-shell .chat-comments-drawer :is(input, textarea, select) {
    background: #ece5d6 !important;
    border-color: #a79c84 !important;
    color: #f3eee3 !important;
    caret-color: #1c1812 !important;
}

.web-rp-shell .chat-comments-drawer :is(input, textarea)::placeholder {
    color: #8c8577 !important;
}

.web-rp-shell .chat-comments-drawer .chat-comment-content a {
    color: #1c1812 !important;
}

.web-rp-shell .chat-comments-drawer .chat-comment-content :is(code, pre) {
    background: #e3dbc9 !important;
    color: #ddd4c0 !important;
}

/* World-info and tool editors share the same dark form surface. */
.web-rp-shell .native-tools-view,
.web-rp-shell .native-tool-shell-view {
    background: #ece5d6 !important;
    color: #1f1c17 !important;
}

.web-rp-shell :is(.web-modal-world-info, .web-modal-active-tool) .web-modal-panel {
    background: #e8e1d1 !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
}

.web-rp-shell :is(.web-modal-world-info, .web-modal-active-tool) .web-modal-header,
.web-rp-shell :is(.web-modal-world-info, .web-modal-active-tool) .web-modal-footer {
    background: #e3dbc9 !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
}

.web-rp-shell :is(.web-modal-world-info, .web-modal-active-tool) .web-modal-body {
    background: #ece5d6 !important;
    color: #1f1c17 !important;
}

.web-rp-shell .web-modal-world-info .web-modal-body :is(.bg-white, .bg-gray-50, .bg-gray-50\/30, .bg-gray-50\/70, .bg-gray-100),
.web-rp-shell .web-modal-active-tool .web-modal-body :is(.bg-white, .bg-gray-50, .bg-gray-50\/30, .bg-gray-100) {
    background: #e8e1d1 !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
}

.web-rp-shell .web-modal-world-info :is(input, textarea, select),
.web-rp-shell .web-modal-active-tool :is(input, textarea, select) {
    background: #ece5d6 !important;
    border-color: #a79c84 !important;
    color: #1f1c17 !important;
    caret-color: #1c1812 !important;
}

.web-rp-shell .web-modal-world-info :is(input, textarea)::placeholder,
.web-rp-shell .web-modal-active-tool :is(input, textarea)::placeholder {
    color: #55504a !important;
}

.web-rp-shell :is(.web-modal-world-info, .web-modal-active-tool) :is(h1, h2, h3, h4, label, p, .text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400) {
    color: #1f1c17 !important;
}

/* Native WebView fallback selectors for older cached modal markup. */
html.native-chat-mode .chat-comments-drawer,
html.native-chat-mode .chat-comments-drawer * {
    color: #f3eee3 !important;
}

html.native-chat-mode .chat-comments-drawer :is(input, textarea, select) {
    background: #ece5d6 !important;
    border-color: #a79c84 !important;
    color: #f3eee3 !important;
}

html.native-chat-mode .chat-comments-drawer :is(input, textarea)::placeholder {
    color: #8c8577 !important;
}

html.native-chat-mode .chat-comments-drawer .chat-comment-content :is(a, code, pre) {
    color: #1c1812 !important;
}

html.native-tool-mode :is([class~="z-50"], [class*="z-[80]"]) > [class*="max-w-3xl"] {
    background: #e8e1d1 !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
}

html:is(.native-chat-mode, .native-tool-mode) :is([class~="z-50"], [class*="z-[80]"]) > [class*="max-w-3xl"] > :first-child,
html:is(.native-chat-mode, .native-tool-mode) :is([class~="z-50"], [class*="z-[80]"]) > [class*="max-w-3xl"] > :last-child {
    background: #e3dbc9 !important;
    border-color: #c6bca6 !important;
    color: #1f1c17 !important;
}

html:is(.native-chat-mode, .native-tool-mode) :is([class~="z-50"], [class*="z-[80]"]) > [class*="max-w-3xl"] > :nth-child(2) {
    background: #ece5d6 !important;
    color: #1f1c17 !important;
}

html:is(.native-chat-mode, .native-tool-mode) :is([class~="z-50"], [class*="z-[80]"]) > [class*="max-w-3xl"] :is(input, textarea, select) {
    background: #ece5d6 !important;
    border-color: #a79c84 !important;
    color: #1f1c17 !important;
}

html:is(.native-chat-mode, .native-tool-mode) :is([class~="z-50"], [class*="z-[80]"]) > [class*="max-w-3xl"] :is(h1, h2, h3, h4, label, p, .text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400) {
    color: #1f1c17 !important;
}