/* ============================================================================
   CHAT DE ATENDIMENTO — widget do cliente (isolado, prefixo cw-).
   Fica no canto inferior direito, acima do widget flutuante do WhatsApp.

   CORES ADAPTATIVAS: toda a paleta deriva de --gold, o acento definido pela
   aparencia escolhida pelo usuario. Tons semanticos e superficies tem
   variantes proprias para tema claro e escuro.
   ========================================================================== */

#chat-widget {
    /* acento do tema atual */
    --cw-accent: var(--gold, #9b4dff);
    /* Escurece o acento para texto branco atingir contraste AA em todas as
       aparencias (mesmo fator validado no comunicado: 58%). */
    --cw-accent-deep: color-mix(in srgb, var(--cw-accent) 58%, #000);
    --cw-accent-deeper: color-mix(in srgb, var(--cw-accent) 42%, #000);
    --cw-on-accent: #fff;
    --cw-accent-tint: color-mix(in srgb, var(--cw-accent) 14%, transparent);
    --cw-accent-tint-strong: color-mix(in srgb, var(--cw-accent) 24%, transparent);
    --cw-accent-line: color-mix(in srgb, var(--cw-accent) 45%, transparent);
    --cw-accent-glow: color-mix(in srgb, var(--cw-accent) 30%, transparent);

    /* texto e bordas herdados do tema */
    --cw-text: var(--text-primary, #f3f3f6);
    --cw-text-soft: var(--text-secondary, #c9c4d2);
    --cw-text-muted: var(--text-muted, #8f879d);
    --cw-border: var(--border, rgba(255, 255, 255, 0.13));

    /* superficies (tema escuro por padrao) */
    --cw-surface: rgba(255, 255, 255, 0.05);
    --cw-surface-hover: rgba(255, 255, 255, 0.1);
    --cw-bubble-in: rgba(255, 255, 255, 0.07);
    --cw-composer-bg: rgba(0, 0, 0, 0.2);
    --cw-scroll-thumb: rgba(255, 255, 255, 0.16);

    --cw-ok: #4ade80;
    --cw-danger: #f87171;

    position: fixed;
    right: 24px;
    bottom: 96px; /* acima do FAB do WhatsApp */
    z-index: 9400;
    font-family: var(--font, 'Inter', -apple-system, sans-serif);
}

body[data-theme="light"] #chat-widget {
    --cw-surface: color-mix(in srgb, var(--cw-accent) 7%, transparent);
    --cw-surface-hover: color-mix(in srgb, var(--cw-accent) 15%, transparent);
    --cw-bubble-in: color-mix(in srgb, var(--cw-accent) 10%, transparent);
    --cw-composer-bg: color-mix(in srgb, var(--cw-accent) 7%, transparent);
    --cw-scroll-thumb: color-mix(in srgb, var(--cw-accent) 38%, transparent);
    --cw-ok: #15803d;
    --cw-danger: #b42318;
}

/* --------------------------------------------------------- botao flutuante */
.cw-fab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px 13px 16px;
    background: linear-gradient(135deg, var(--cw-accent-deeper), var(--cw-accent-deep));
    color: var(--cw-on-accent);
    border: 1px solid var(--cw-accent-line);
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px var(--cw-accent-glow);
    transition: transform 0.15s ease, filter 0.15s ease;
}

.cw-fab:hover { transform: translateY(-2px); filter: brightness(1.1); }
.cw-fab:focus-visible { outline: 2px solid var(--cw-accent); outline-offset: 3px; }
.cw-fab .material-icons-round { font-size: 21px; }

/* selo de mensagens nao lidas */
.cw-fab-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: none;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    border-radius: 999px;
    border: 2px solid var(--bg-primary, #0a0a14);
}

.cw-fab-badge.cw-on { display: flex; }

/* ------------------------------------------------------------------ painel */
.cw-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 180px);
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary, #09090d);
    border: 1px solid var(--cw-border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--cw-accent-tint);
    overflow: hidden;
    animation: cw-rise 0.22s ease;
}

.cw-panel[hidden] { display: none; }

@keyframes cw-rise {
    from { transform: translateY(12px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* --------------------------------------------------------------- cabecalho */
.cw-head {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cw-border);
    background: var(--cw-surface);
}

.cw-head-avatar {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cw-accent-deeper), var(--cw-accent-deep));
    color: var(--cw-on-accent);
}

.cw-head-avatar .material-icons-round { font-size: 21px; }

.cw-head-info { min-width: 0; flex: 1; }

.cw-head-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cw-text);
}

.cw-head-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 0.76rem;
    color: var(--cw-text-muted);
}

.cw-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cw-ok);
    flex: 0 0 auto;
}

.cw-dot.cw-dot-wait { background: #fbbf24; }
.cw-dot.cw-dot-off { background: var(--cw-text-muted); }

.cw-head-close {
    display: flex;
    padding: 5px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--cw-text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.cw-head-close:hover { background: var(--cw-surface-hover); color: var(--cw-text); }

/* ------------------------------------------------------------ faixa da fila */
.cw-queue {
    flex: 0 0 auto;
    display: none;
    gap: 9px;
    padding: 11px 14px;
    background: var(--cw-accent-tint);
    border-bottom: 1px solid var(--cw-accent-line);
    font-size: 0.8rem;
    color: var(--cw-text-soft);
    line-height: 1.45;
}

.cw-queue.cw-on { display: flex; }
.cw-queue .material-icons-round { font-size: 18px; color: var(--cw-accent); flex: 0 0 auto; margin-top: 1px; }
.cw-queue strong { color: var(--cw-text); }
.cw-queue-note { display: block; margin-top: 4px; font-size: 0.74rem; color: var(--cw-text-muted); }

/* ------------------------------------------------------------------ corpo */
.cw-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

.cw-body::-webkit-scrollbar { width: 7px; }
.cw-body::-webkit-scrollbar-track { background: transparent; }
.cw-body::-webkit-scrollbar-thumb { background: var(--cw-scroll-thumb); border-radius: 4px; }

/* ----------------------------------------------------------------- baloes */
.cw-msg {
    max-width: 82%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 0.86rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* cliente (direita, no acento) */
.cw-msg.cw-me {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--cw-accent-deeper), var(--cw-accent-deep));
    color: var(--cw-on-accent);
    border-bottom-right-radius: 5px;
}

/* IA e atendente (esquerda) */
.cw-msg.cw-them {
    align-self: flex-start;
    background: var(--cw-bubble-in);
    color: var(--cw-text);
    border: 1px solid var(--cw-border);
    border-bottom-left-radius: 5px;
}

/* sistema (centralizado, discreto) */
.cw-msg.cw-sys {
    align-self: center;
    max-width: 94%;
    background: var(--cw-accent-tint);
    border: 1px solid var(--cw-accent-line);
    color: var(--cw-text-soft);
    font-size: 0.8rem;
    text-align: left;
    border-radius: 12px;
}

.cw-msg-who {
    display: block;
    margin-bottom: 3px;
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    opacity: 0.75;
}

.cw-msg-time {
    display: block;
    margin-top: 4px;
    font-size: 0.68rem;
    opacity: 0.6;
    text-align: right;
}

/* Markdown renderizado dentro do balao (ver js/chat-format.js) */
.cw-msg strong { font-weight: 700; }
.cw-msg em { font-style: italic; }

.cw-msg code {
    padding: 1px 5px;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 5px;
    font-family: var(--font-mono, monospace);
    font-size: 0.92em;
}

body[data-theme="light"] .cw-msg code { background: rgba(0, 0, 0, 0.08); }
.cw-msg.cw-me code { background: rgba(0, 0, 0, 0.28); }

.cw-msg a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}

.cw-msg a:hover { opacity: 0.85; }
.cw-msg.cw-them a, .cw-msg.cw-sys a { color: var(--cw-accent); }
body[data-theme="light"] .cw-msg.cw-them a,
body[data-theme="light"] .cw-msg.cw-sys a { color: var(--cw-accent-deep); }

/* "digitando..." */
.cw-typing {
    align-self: flex-start;
    display: none;
    align-items: center;
    gap: 5px;
    padding: 11px 14px;
    background: var(--cw-bubble-in);
    border: 1px solid var(--cw-border);
    border-radius: 14px;
    border-bottom-left-radius: 5px;
}

.cw-typing.cw-on { display: flex; }

.cw-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cw-text-muted);
    animation: cw-blink 1.3s infinite ease-in-out;
}

.cw-typing span:nth-child(2) { animation-delay: 0.18s; }
.cw-typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes cw-blink {
    0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* ------------------------------------------------------------ avaliacao */
.cw-rate {
    flex: 0 0 auto;
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px;
    border-top: 1px solid var(--cw-border);
    background: var(--cw-surface);
    text-align: center;
}

.cw-rate.cw-on { display: flex; }

.cw-rate-title {
    margin: 0;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--cw-text);
}

.cw-rate-sub {
    margin: 0;
    font-size: 0.76rem;
    color: var(--cw-text-muted);
}

.cw-rate-actions { display: flex; gap: 10px; justify-content: center; }

.cw-rate-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    background: transparent;
    border: 1px solid var(--cw-border);
    border-radius: 12px;
    color: var(--cw-text-soft);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cw-rate-btn .material-icons-round { font-size: 19px; }

.cw-rate-btn.cw-up:hover {
    border-color: var(--cw-ok);
    color: var(--cw-ok);
    background: color-mix(in srgb, var(--cw-ok) 12%, transparent);
}

.cw-rate-btn.cw-down:hover {
    border-color: var(--cw-danger);
    color: var(--cw-danger);
    background: color-mix(in srgb, var(--cw-danger) 12%, transparent);
}

.cw-rate-thanks {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 0.86rem;
    color: var(--cw-ok);
    font-weight: 600;
}

.cw-rate-thanks.cw-on { display: flex; }

/* ---------------------------------------------------------------- composer */
.cw-composer {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 11px 12px;
    border-top: 1px solid var(--cw-border);
    background: var(--cw-composer-bg);
}

.cw-composer[hidden] { display: none; }

.cw-input {
    flex: 1;
    min-height: 42px;
    max-height: 110px;
    padding: 11px 13px;
    background: var(--cw-surface);
    border: 1px solid var(--cw-border);
    border-radius: 12px;
    color: var(--cw-text);
    font-family: inherit;
    font-size: 0.86rem;
    line-height: 1.45;
    resize: none;
    outline: none;
    transition: border-color 0.15s ease;
}

.cw-input::placeholder { color: var(--cw-text-muted); }
.cw-input:focus { border-color: var(--cw-accent); }

.cw-send {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cw-accent-deeper), var(--cw-accent-deep));
    color: var(--cw-on-accent);
    border: 1px solid var(--cw-accent-line);
    border-radius: 12px;
    cursor: pointer;
    transition: filter 0.15s ease, opacity 0.15s ease;
}

.cw-send:hover:not(:disabled) { filter: brightness(1.12); }
.cw-send:disabled { opacity: 0.45; cursor: not-allowed; }
.cw-send .material-icons-round { font-size: 20px; }

/* --------------------------------------------------------------- rodape */
.cw-foot {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    padding: 0 12px 11px;
}

.cw-human-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    background: transparent;
    border: 1px dashed var(--cw-border);
    border-radius: 999px;
    color: var(--cw-text-muted);
    font-size: 0.76rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cw-human-btn:hover { color: var(--cw-accent); border-color: var(--cw-accent-line); }
.cw-human-btn .material-icons-round { font-size: 15px; }
.cw-human-btn[hidden] { display: none; }

/* -------------------------------------------------------------- responsivo */
@media (max-width: 480px) {
    #chat-widget { right: 16px; bottom: 88px; }
    .cw-panel {
        width: calc(100vw - 32px);
        height: calc(100vh - 170px);
    }
    .cw-fab { padding: 12px; }
    .cw-fab-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cw-panel { animation: none; }
    .cw-fab:hover { transform: none; }
    .cw-typing span { animation: none; opacity: 0.6; }
    .cw-body { scroll-behavior: auto; }
}

/* Fallback para navegadores sem color-mix() */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    #chat-widget {
        --cw-accent-deep: var(--cw-accent);
        --cw-accent-deeper: var(--cw-accent);
        --cw-accent-tint: rgba(127, 127, 127, 0.14);
        --cw-accent-tint-strong: rgba(127, 127, 127, 0.24);
        --cw-accent-line: rgba(127, 127, 127, 0.4);
        --cw-accent-glow: rgba(127, 127, 127, 0.25);
    }
}