/* =========================================================
   Live chat — light theme (soft paper palette from theme-light-mono.css).
   live_chat.css and home-bw-theme.css draw the widget with black / white alpha tints made for
   the dark panel; on a light panel they turn into grey slabs and invisible controls. Every
   surface is set from the light tokens here. Loaded after live_chat.css (and after the head
   sheets), so it wins ties with theme-light.css.
   ========================================================= */

html[data-theme="light"] body.home-bw-theme #lc-widget {
    --lc-ok: oklch(60% 0.15 150);
    --lc-ok-ink: oklch(38% 0.1 150);
    --lc-ok-soft: oklch(93% 0.045 150);
    --lc-hover: color-mix(in oklch, var(--theme-ink) 7%, var(--theme-surface-2));
    --lc-shadow: 0 28px 64px -18px rgba(46, 36, 22, 0.28), 0 2px 8px rgba(46, 36, 22, 0.06);
}

html[data-theme="light"] body.home-bw-theme #lc-panel {
    background: var(--theme-surface) !important;
    border-color: var(--theme-line) !important;
    box-shadow: var(--lc-shadow) !important;
}

/* ── Header: panel tone + hairline, no tinted band ── */
html[data-theme="light"] body.home-bw-theme .lc-header {
    background: var(--theme-surface) !important;
    border-bottom: 1px solid var(--theme-line) !important;
}

html[data-theme="light"] body.home-bw-theme :is(.lc-header-icon-btn, .lc-close) {
    color: var(--theme-muted) !important;
    background: transparent !important;
    border: 1px solid var(--theme-line) !important;
}

html[data-theme="light"] body.home-bw-theme :is(.lc-header-icon-btn:hover:not(:disabled), .lc-close:hover) {
    color: var(--theme-ink) !important;
    background: var(--theme-surface-2) !important;
    border-color: var(--theme-line-strong) !important;
}

/* Online: a real green dot and a quiet green chip (was a white dot beside a black pill). */
html[data-theme="light"] body.home-bw-theme .lc-hours.online .lc-hours-dot {
    background: var(--lc-ok) !important;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--lc-ok) 20%, transparent) !important;
}

html[data-theme="light"] body.home-bw-theme .lc-hours.online .lc-hours-label {
    color: var(--lc-ok-ink) !important;
    background: var(--lc-ok-soft) !important;
    box-shadow: none !important;
}

html[data-theme="light"] body.home-bw-theme .lc-hours.offline .lc-hours-dot {
    background: var(--theme-line-strong) !important;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--theme-ink) 6%, transparent) !important;
}

/* ── Start form: New chat / Past chats ── */
html[data-theme="light"] body.home-bw-theme .lc-intro-tab {
    color: var(--theme-muted) !important;
    background: transparent !important;
    border-color: var(--theme-line) !important;
}

html[data-theme="light"] body.home-bw-theme .lc-intro-tab:hover:not(.active) {
    color: var(--theme-ink) !important;
    background: var(--theme-surface-2) !important;
}

html[data-theme="light"] body.home-bw-theme .lc-intro-tab.active {
    color: var(--theme-surface) !important;
    background: var(--theme-ink) !important;
    border-color: var(--theme-ink) !important;
}

html[data-theme="light"] body.home-bw-theme .lc-contact {
    border-color: var(--theme-line) !important;
    background: transparent !important;
}

html[data-theme="light"] body.home-bw-theme .lc-contact__in {
    color: var(--theme-muted) !important;
}

html[data-theme="light"] body.home-bw-theme .lc-contact__opt:hover .lc-contact__in {
    color: var(--theme-ink) !important;
    background: var(--theme-surface-2) !important;
}

html[data-theme="light"] body.home-bw-theme .lc-contact__opt input:checked + .lc-contact__in {
    color: var(--theme-surface) !important;
    background: var(--theme-ink) !important;
}

html[data-theme="light"] body.home-bw-theme .lc-contact__opt input:focus-visible + .lc-contact__in {
    box-shadow: 0 0 0 2px var(--theme-ink) !important;
}

html[data-theme="light"] body.home-bw-theme .lc-start-error {
    color: #b42318 !important;
    background: #fef3f2 !important;
    border-color: #fecdca !important;
}

html[data-theme="light"] body.home-bw-theme #lc-widget :is(input, .lc-select-trigger):focus,
html[data-theme="light"] body.home-bw-theme #lc-widget .lc-select.is-open .lc-select-trigger {
    border-color: var(--theme-line-strong) !important;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--theme-ink) 8%, transparent) !important;
}

/* ── Conversation ── */
html[data-theme="light"] body.home-bw-theme .lc-body {
    scrollbar-color: color-mix(in oklch, var(--theme-ink) 22%, transparent) transparent;
}

html[data-theme="light"] body.home-bw-theme .lc-msg.admin .lc-bubble {
    border: 0 !important;
}

html[data-theme="light"] body.home-bw-theme .lc-msg-status {
    padding: 0 !important;
    background: transparent !important;
    color: var(--theme-muted) !important;
}

html[data-theme="light"] body.home-bw-theme .lc-msg-status-read {
    color: var(--theme-ink) !important;
}

html[data-theme="light"] body.home-bw-theme .lc-reply-btn {
    color: var(--theme-muted) !important;
}

html[data-theme="light"] body.home-bw-theme .lc-reply-btn:hover {
    color: var(--theme-ink) !important;
    background: var(--theme-surface-2) !important;
}

html[data-theme="light"] body.home-bw-theme .lc-msg.admin .lc-quote {
    border-left-color: var(--theme-ink);
}

html[data-theme="light"] body.home-bw-theme .lc-msg.admin .lc-quote-author {
    color: var(--theme-ink);
}

html[data-theme="light"] body.home-bw-theme .lc-msg.reply-target .lc-bubble {
    outline-color: color-mix(in oklch, var(--theme-ink) 35%, transparent);
}

html[data-theme="light"] body.home-bw-theme .lc-msg-image {
    border-color: var(--theme-line);
}

html[data-theme="light"] body.home-bw-theme .lc-ended {
    color: var(--theme-muted);
    background: var(--theme-surface-2);
    border-color: var(--theme-line);
}

html[data-theme="light"] body.home-bw-theme .lc-ended strong {
    color: var(--theme-ink);
}

html[data-theme="light"] body.home-bw-theme .lc-readonly-bar {
    color: var(--theme-muted);
    background: var(--theme-surface-2);
    border-top-color: var(--theme-line);
}

/* ── Compose: panel tone; the reply / image previews sit on the page tone above it ── */
html[data-theme="light"] body.home-bw-theme .lc-compose {
    background: var(--theme-surface) !important;
    border-top: 1px solid var(--theme-line) !important;
}

html[data-theme="light"] body.home-bw-theme .lc-reply-preview {
    background: var(--theme-paper) !important;
    border-bottom: 1px solid var(--theme-line) !important;
    border-inline-start: 3px solid var(--theme-ink) !important;
}

html[data-theme="light"] body.home-bw-theme :is(.lc-reply-preview-icon, .lc-reply-preview-label) {
    color: var(--theme-ink) !important;
}

html[data-theme="light"] body.home-bw-theme .lc-reply-preview-text {
    color: var(--theme-muted) !important;
}

html[data-theme="light"] body.home-bw-theme .lc-image-preview {
    background: var(--theme-paper);
    border-top-color: var(--theme-line);
}

html[data-theme="light"] body.home-bw-theme :is(.lc-reply-cancel, .lc-image-preview-clear) {
    color: var(--theme-muted) !important;
    background: transparent !important;
}

html[data-theme="light"] body.home-bw-theme :is(.lc-reply-cancel, .lc-image-preview-clear):hover {
    color: var(--theme-ink) !important;
    background: var(--theme-surface-2) !important;
}

html[data-theme="light"] body.home-bw-theme #lc-widget .lc-footer input {
    color: var(--theme-ink) !important;
    background: var(--theme-paper) !important;
    border-color: var(--theme-line) !important;
}

html[data-theme="light"] body.home-bw-theme :is(.lc-attach-btn, .lc-emoji-btn) {
    color: var(--theme-muted) !important;
    background: var(--theme-surface-2) !important;
    border: 1px solid transparent !important;
}

html[data-theme="light"] body.home-bw-theme :is(.lc-attach-btn, .lc-emoji-btn):is(:hover, .active) {
    color: var(--theme-ink) !important;
    background: var(--lc-hover) !important;
    border-color: transparent !important;
}

/* ── Emoji / GIF popup ── */
html[data-theme="light"] body.home-bw-theme .lc-emoji-popup {
    background: var(--theme-surface) !important;
    border-color: var(--theme-line) !important;
    box-shadow: 0 18px 44px -12px rgba(46, 36, 22, 0.25), 0 2px 6px rgba(46, 36, 22, 0.06) !important;
}

html[data-theme="light"] body.home-bw-theme .lc-media-mode-tabs {
    background: var(--theme-surface-2);
    border-color: transparent;
}

html[data-theme="light"] body.home-bw-theme .lc-media-mode {
    color: var(--theme-muted);
}

html[data-theme="light"] body.home-bw-theme .lc-media-mode:not(.active):hover {
    color: var(--theme-ink);
    background: transparent;
}

html[data-theme="light"] body.home-bw-theme .lc-media-mode.active {
    color: var(--theme-ink);
    background: var(--theme-surface);
    box-shadow: 0 1px 3px rgba(46, 36, 22, 0.14);
}

html[data-theme="light"] body.home-bw-theme :is(.lc-emoji-cat:hover, .lc-emoji-cat.active, .lc-emoji-item:hover) {
    background: var(--theme-surface-2);
}

html[data-theme="light"] body.home-bw-theme :is(.lc-emoji-grid, .lc-gif-grid) {
    scrollbar-color: color-mix(in oklch, var(--theme-ink) 22%, transparent) transparent;
}

html[data-theme="light"] body.home-bw-theme :is(.lc-sticker-item, .lc-gif-item) {
    background: var(--theme-surface-2);
}

html[data-theme="light"] body.home-bw-theme #lc-widget .lc-gif-search-wrap input {
    color: var(--theme-ink) !important;
    background: var(--theme-paper) !important;
    border-color: var(--theme-line) !important;
}