/* v1ktor.com — final light-mode override
   Loaded after style.css and mustard-gold.css on purpose. */

body:not(.dark) {
    background: #ddd7cd !important;
    color: #24211d !important;
}

body:not(.dark) .chat-wrapper {
    background: transparent !important;
    border-left: 1px solid rgba(35, 31, 26, .10) !important;
    border-right: 1px solid rgba(35, 31, 26, .10) !important;
    box-shadow: 0 14px 42px rgba(47, 39, 28, .14) !important;
}

body:not(.dark) .chat-container,
body:not(.dark) .intro-screen,
body:not(.dark) .chat-footer {
    background-color: #fbf8f2 !important;
}

body:not(.dark) .chat-footer::before {
    background: linear-gradient(
        to bottom,
        rgba(251, 248, 242, 0),
        rgba(251, 248, 242, 1) 100%
    ) !important;
}

body:not(.dark) .chat-footer .input-nav-wrapper {
    background: #eee8de !important;
    border-color: rgba(42, 36, 29, .13) !important;
    box-shadow:
        0 12px 28px rgba(49, 40, 29, .08),
        0 2px 6px rgba(49, 40, 29, .05) !important;
}

body:not(.dark) .chat-footer .primary-nav .btn-primary-nav,
body:not(.dark) .btn-menu-toggle {
    background: #fffdf9 !important;
    color: #4b463f !important;
    border-color: rgba(42, 36, 29, .12) !important;
}

body:not(.dark) .chat-footer .primary-nav .btn-primary-nav:hover {
    background: #ffffff !important;
}

body:not(.dark) .chat-footer .input-area-visual input,
body:not(.dark) .ai-message .message-bubble,
body:not(.dark) .intro-text,
body:not(.dark) .intro-bottom-content .quote {
    color: #24211d !important;
}

body:not(.dark) .chat-footer .input-area-visual input::placeholder {
    color: #8c857a !important;
}

body:not(.dark) .skin .checkbox-label,
body:not(.dark) .intro-screen .hello span {
    background: #eee8de !important;
    border-color: rgba(42, 36, 29, .13) !important;
}

/* Side typography: deliberately visible in light mode, but not dominant. */
body:not(.dark) .vertical-texts-container .vertical-text {
    color: #28241f !important;
    opacity: .30 !important;
    text-shadow: none !important;
}

body:not(.dark) .chat-avatar {
    background: #f3eee5 !important;
}

body:not(.dark) .contact-social-icon i {
    background: #eee8de !important;
    border-color: rgba(42, 36, 29, .10) !important;
}

body:not(.dark) .btn-primary.btn-secondary {
    background: transparent !important;
}

body:not(.dark) .chat-footer p {
    color: #8b8378 !important;
}

/* Keep the center panel distinct from the side strips on desktop. */
@media (min-width: 1025px) {
    body:not(.dark) .chat-wrapper {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        min-height: calc(100vh - 20px) !important;
    }

    body:not(.dark) .chat-container {
        min-height: calc(100vh - 20px) !important;
    }
}

@media (max-width: 1024px) {
    body:not(.dark) .chat-wrapper {
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}


/* ---------------------------------------------------------------
   TYPEWRITER / LIST COMPATIBILITY
   After the typewriter finishes, app.js restores the clean HTML.
   The template's original CSS expected an extra Typewriter <span>
   wrapper, so list items could collapse back to inline elements.
   Support both structures.
   --------------------------------------------------------------- */

.rich-paragraph .list-with-icons > span {
    display: block !important;
    padding: 6px 0 !important;
}

.rich-paragraph .list-with-icons > span i {
    margin-right: 10px !important;
    text-align: center;
    width: 18px;
}

/* Slightly stronger side labels in light mode. */
body:not(.dark) .vertical-texts-container .vertical-text {
    color: #211f1b !important;
    opacity: .36 !important;
}


/* ================================================================
   MOBILE LIGHT BACKGROUND STABILITY FIX
   On mobile the chat container grows while the typewriter is running.
   Use the same surface color for the page and the chat canvas so the
   background boundary does not visibly "move" downward during typing.
   ================================================================ */
@media (max-width: 767px) {
    body:not(.dark),
    body:not(.dark) .chat-wrapper,
    body:not(.dark) .chat-container {
        background: #fbf8f2 !important;
        background-color: #fbf8f2 !important;
    }

    body:not(.dark) .chat-footer {
        background-color: #fbf8f2 !important;
    }

    body:not(.dark) .chat-footer::before {
        background: linear-gradient(
            to bottom,
            rgba(251, 248, 242, 0),
            rgba(251, 248, 242, 1) 100%
        ) !important;
    }
}