/*
 * Sprint 9/12 — onda Nublado: Chats, Tickets e Conexões.
 * Somente equivalentes cromáticos; layout e comportamento permanecem intactos.
 */

/* --------------------------------------------------------------------------
   Chats e Tickets
   -------------------------------------------------------------------------- */
html[data-theme="cinza"] #page-chats {
    --chats-bg: var(--nuv-bg) !important;
    --chats-surface: var(--nuv-surface-parent) !important;
    --chats-surface-2: var(--nuv-surface-child) !important;
    --chats-field: var(--nuv-field) !important;
    --chats-line: var(--nuv-line-subtle) !important;
    --chats-ink: var(--nuv-text) !important;
    --chats-muted: var(--nuv-text-soft) !important;
    --chats-accent: var(--nuv-navy) !important;
}

html[data-theme="cinza"] #page-chats.page.active,
html[data-theme="cinza"] #page-chats .chats-layout {
    background-color: var(--nuv-bg) !important;
    color: var(--nuv-text) !important;
}

html[data-theme="cinza"] #page-chats :where(
    .chats-sidebar,
    .chats-queue,
    .chats-list,
    .chats-main,
    .chats-panel,
    #chatsPanelAside,
    .la-panel-scroll
) {
    background-color: var(--nuv-surface-parent) !important;
    border-color: var(--nuv-line) !important;
    color: var(--nuv-text) !important;
}

html[data-theme="cinza"] #page-chats :where(
    .chats-sidebar-header,
    .chats-main-header,
    .chats-panel-header,
    .la-panel-head,
    .chats-banner,
    .chats-queue-tabs
) {
    background: var(--nuv-header-band) !important;
    border-color: var(--nuv-line-on-header) !important;
    color: var(--nuv-text-on-header) !important;
}

html[data-theme="cinza"] #page-chats :where(
    .chats-sidebar-header,
    .chats-main-header,
    .chats-panel-header,
    .la-panel-head,
    .chats-banner,
    .chats-queue-tabs
) :where(h1, h2, h3, h4, p, span, strong, button, svg) {
    color: var(--nuv-text-on-header) !important;
}

html[data-theme="cinza"] #page-chats :where(
    .chats-list-item,
    .chats-ticket-row,
    .chats-queue-item,
    [data-chat-id],
    [data-ticket-id]
) {
    background-color: var(--nuv-surface-parent) !important;
    border-color: var(--nuv-line-subtle) !important;
    color: var(--nuv-text) !important;
}

html[data-theme="cinza"] #page-chats :where(
    .chats-list-item,
    .chats-ticket-row,
    .chats-queue-item,
    [data-chat-id],
    [data-ticket-id]
):hover {
    background-color: var(--nuv-surface-hover) !important;
}

html[data-theme="cinza"] #page-chats :where(
    .chats-list-item,
    .chats-ticket-row,
    .chats-queue-item,
    [data-chat-id],
    [data-ticket-id]
):is(.active, .is-active, .selected, [aria-selected="true"]) {
    background: var(--nuv-header-band-active) !important;
    border-color: var(--nuv-navy-strong) !important;
    color: var(--nuv-text-on-header) !important;
    box-shadow: inset 0.1875rem 0 0 rgba(240, 248, 251, .88) !important;
}

html[data-theme="cinza"] #page-chats .chats-timeline-wrap,
html[data-theme="cinza"] #page-chats .chats-timeline-scrollport {
    background-color: var(--nuv-surface-sunken) !important;
    color: var(--nuv-text) !important;
}

html[data-theme="cinza"] #page-chats .chats-timeline-wallpaper-scrim {
    background:
        linear-gradient(rgba(122, 135, 148, .42), rgba(122, 135, 148, .42)),
        radial-gradient(circle at 18% 16%, rgba(226, 238, 244, .28), transparent 34%) !important;
}

html[data-theme="cinza"] #page-chats :where(
    .chats-message-in,
    .chats-msg-in,
    .message-in,
    [data-message-direction="in"]
) {
    background-color: var(--nuv-surface-grandchild) !important;
    border-color: var(--nuv-line-subtle) !important;
    color: var(--nuv-text) !important;
}

html[data-theme="cinza"] #page-chats :where(
    .chats-message-out,
    .chats-msg-out,
    .message-out,
    [data-message-direction="out"]
) {
    background-color: color-mix(in srgb, var(--nuv-navy) 18%, var(--nuv-surface-grandchild)) !important;
    border-color: rgba(var(--nuv-navy-rgb), .28) !important;
    color: var(--nuv-text) !important;
}

html[data-theme="cinza"] #page-chats :where(
    .chats-composer,
    .la-composer,
    .la-composer-cm-box,
    .chats-reply-box
) {
    background-color: var(--nuv-surface-child) !important;
    border-color: var(--nuv-line) !important;
    color: var(--nuv-text) !important;
    box-shadow: var(--nuv-shadow-raised) !important;
}

html[data-theme="cinza"] #page-chats :where(
    .chats-search,
    .chats-search-input,
    .la-composer textarea,
    .la-composer-cm-box textarea
) {
    background-color: var(--nuv-field) !important;
    border-color: var(--nuv-line) !important;
    color: var(--nuv-text) !important;
}

/* --------------------------------------------------------------------------
   Conexões / Clientes CX2
   -------------------------------------------------------------------------- */
html[data-theme="cinza"] #page-clientes {
    background:
        radial-gradient(circle at 12% 8%, var(--nuv-nebula-1), transparent 30%),
        radial-gradient(circle at 88% 90%, rgba(var(--nuv-navy-rgb), .10), transparent 38%),
        var(--nuv-bg) !important;
    color: var(--nuv-text) !important;
}

html[data-theme="cinza"] #page-clientes[data-conexoes-layout="cx2"],
html[data-theme="cinza"] #page-clientes[data-conexoes-layout="cx2"] .clientes-view--listagem.cx2 {
    --field: var(--nuv-field) !important;
    --ink: var(--nuv-text) !important;
    --muted: var(--nuv-text-soft) !important;
    --line: var(--nuv-line-subtle) !important;
    --surface: var(--nuv-surface-parent) !important;
    --surface-2: var(--nuv-surface-child) !important;
    --surface-3: var(--nuv-surface-grandchild) !important;
    --bg-app: var(--nuv-bg) !important;
    --blue: var(--nuv-navy) !important;
    --ok: var(--nuv-success) !important;
    --ok-strong: #15683f !important;
    --ok-dot: #197449 !important;
    --warn: var(--nuv-warning) !important;
    --bad: var(--nuv-danger) !important;
}

html[data-theme="cinza"] #page-clientes :where(
    .content-section,
    .clientes-panel-full,
    .clientes-form-panel,
    .clientes-contatos-resumo,
    .fsec,
    .pend,
    .kcard,
    .cliente-v2-dialog,
    .cliente-v2-form-card
) {
    background-color: var(--nuv-surface-parent) !important;
    border-color: var(--nuv-line) !important;
    color: var(--nuv-text) !important;
    box-shadow: inset 0 0 0 0.0625rem var(--nuv-line-subtle), var(--nuv-shadow-card) !important;
}

html[data-theme="cinza"] #page-clientes :where(
    .clientes-list-header,
    .clientes-form-header,
    .cx2-head,
    .dwr-head,
    .cliente-v2-dialog > header,
    .cliente-v2-section-title
) {
    background: var(--nuv-header-band) !important;
    border-color: var(--nuv-line-on-header) !important;
    color: var(--nuv-text-on-header) !important;
}

html[data-theme="cinza"] #page-clientes :where(
    .clientes-list-header,
    .clientes-form-header,
    .cx2-head,
    .dwr-head,
    .cliente-v2-dialog > header,
    .cliente-v2-section-title
) :where(h1, h2, h3, h4, p, span, strong, button) {
    color: var(--nuv-text-on-header) !important;
}

html[data-theme="cinza"] #page-clientes :where(
    .clientes-data-table tbody tr,
    .cx2-row,
    .kcard,
    .clientes-whatsapp-matriz-item,
    .rec-action
) {
    background-color: var(--nuv-surface-child) !important;
    border-color: var(--nuv-line-subtle) !important;
    color: var(--nuv-text) !important;
}

html[data-theme="cinza"] #page-clientes :where(
    .cx2-row-menu.menu,
    .conexoes-banner-menu,
    .enc-select-listbox
) {
    background-color: var(--nuv-surface-raised) !important;
    border-color: var(--nuv-line) !important;
    color: var(--nuv-text) !important;
    box-shadow: var(--nuv-shadow-popover) !important;
}

/* Empresa e WhatsApp deixam de ser blocos noturnos; verde fica semântico. */
html[data-theme="cinza"] #page-clientes :where(
    .cliente-v2-section--empresa,
    .clientes-cadastro-loja-section,
    .clientes-form-block
) {
    background-color: var(--nuv-surface-child) !important;
    border-color: var(--nuv-line-subtle) !important;
    color: var(--nuv-text) !important;
}

html[data-theme="cinza"] #page-clientes :where(
    .cliente-v2-section--whatsapp,
    .clientes-whatsapp-matriz-section,
    .clientes-conexoes-wa-section
) {
    background:
        radial-gradient(circle at 14% 18%, rgba(190, 240, 210, .34), transparent 38%),
        linear-gradient(145deg, var(--nuv-surface-child), color-mix(in srgb, var(--nuv-success-bg) 48%, var(--nuv-surface-grandchild))) !important;
    border-color: rgba(21, 104, 63, .34) !important;
    color: var(--nuv-text) !important;
}

html[data-theme="cinza"] #page-clientes :where(
    .cliente-v2-section--empresa,
    .cliente-v2-section--whatsapp
) :where(input, select, textarea) {
    background-color: var(--nuv-field) !important;
    border-color: var(--nuv-line) !important;
    color: var(--nuv-text) !important;
}

html[data-theme="cinza"] #page-clientes :where(
    .cliente-v2-form--readonly,
    .cliente-v2-form--editing
) :where(input, select, textarea) {
    background-color: var(--nuv-field) !important;
    color: var(--nuv-text) !important;
}

html[data-theme="cinza"] #page-clientes :where(
    .cliente-v2-section--empresa,
    .cliente-v2-section--whatsapp
) :where(label, p, small, .cliente-v2-wa-checkbox, .cliente-v2-wa-provider-note) {
    color: var(--nuv-text-soft) !important;
}

html[data-theme="cinza"] #page-clientes .cliente-v2-wa-provider-btn {
    background-color: var(--nuv-surface-raised) !important;
    border-color: var(--nuv-line) !important;
    color: var(--nuv-text) !important;
}

html[data-theme="cinza"] #page-clientes .cliente-v2-wa-provider-btn.active {
    background: var(--nuv-header-band-active) !important;
    border-color: var(--nuv-navy-strong) !important;
    color: var(--nuv-text-on-header) !important;
}

html[data-theme="cinza"] #page-clientes .cliente-v2-section--whatsapp :where(
    .button.button-primary,
    #clienteV2Salvar,
    .cliente-v2-wa-chip-btn--primary
) {
    background: var(--nuv-action-primary-bg) !important;
    border-color: var(--nuv-navy-strong) !important;
    color: var(--nuv-action-primary-text) !important;
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme="cinza"] #page-chats *,
    html[data-theme="cinza"] #page-clientes * {
        transition: none !important;
    }
}