/* ---------- Tema / Variáveis (tema claro) ---------- */
:root {
    --bg: #ffffff;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #6b7280;
    --brand: #22c55e;              /* verde principal (botões/links) */

    /* bolhas das mensagens (leves no tema claro) */
    --bubble-user: #e6f2ff;        /* azul bem claro para o usuário */
    --bubble-assistant: #f3f4f6;   /* cinza claro para o assistente */

    --border: #e5e7eb;             /* borda leve */
    --border-strong: #d1d5db;
}

/* ---------- Reset / Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

/* ---------- Estrutura geral (página do chat) ---------- */
.chat-widget {
    max-width: 720px;
    margin: 0 auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 100%;
}

/* ---------- Header ---------- */
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 12px;
}

.chat-header .left { display: flex; align-items: center; gap: 10px; }
.chat-header .title h1 {
    margin: 0;
    font-size: 16px;
    line-height: 1.1;
    color: var(--text);
}
.chat-header .title small { display: block; color: var(--muted); }
.chat-header .right { display: flex; align-items: center; gap: 8px; }

.icon {
    appearance: none;
    border: 1px solid var(--border);
    background: #f8fafc;
    color: var(--text);
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, filter .15s ease;
}
.icon:hover {
    background: #eef2f7;
    border-color: var(--border-strong);
}

/* ---------- Lista de mensagens ---------- */
.messages {
    display: block;
    overflow: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    min-height: 200px;
    max-height: 70vh;
    padding-bottom: var(--msgs-pad, 8px);
}

.message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0;
}

.bubble {
    background: var(--bubble-assistant);
    border-radius: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.message.user .bubble {
    background: var(--bubble-user);
    border-color: #dbeafe; /* melhora contraste em fundo branco */
}
.message.assistant .bubble {
    background: var(--bubble-assistant);
    border-color: var(--border);
}

/* Conteúdo dentro da bolha */
.bubble .content {
    /* antes: white-space: pre-wrap;  */
    white-space: normal; /* preserva quebras simples, comprime múltiplos espaços */
}

/* Se tiver trechos de código futuramente, pode aplicar formatação controlada */
.bubble .content pre,
.bubble .content code {
    white-space: pre;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12.5px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 6px 8px;
    border-radius: 6px;
    display: block;
    overflow-x: auto;
}

/* Caso alguma mensagem específica precise não quebrar linhas automaticamente */
.bubble .content.nowrap {
    white-space: nowrap;
}

/* ---------- Meta (hora + copiar) ---------- */
.bubble .meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
}
.bubble .meta time { opacity: .85; font-variant-numeric: tabular-nums; }
.bubble .meta .copy {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
}
.bubble .meta .copy:hover { color: var(--text); text-decoration: underline; }
.bubble .meta .copy:focus { outline: none; }

/* ---------- Indicador “digitando...” (3 pontos) ---------- */
.typing { display: inline-flex; align-items: center; gap: 4px; }
.typing .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--muted); opacity: .5;
    animation: dotPulse 1.2s infinite ease-in-out;
}
.typing .dot:nth-child(2) { animation-delay: .2s; }
.typing .dot:nth-child(3) { animation-delay: .4s; }
@keyframes dotPulse {
    0%, 80%, 100% { transform: translateY(0); opacity: .45; }
    40% { transform: translateY(-3px); opacity: 1; }
}

/* ---------- Avatares ---------- */
.avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;          /* não permitir stretch no flex */
    aspect-ratio: 1 / 1;     /* garante círculo mesmo com layout estranho */
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .1px;
    position: relative;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.35), /* aro interno sutil */
        0 0 0 1px rgba(0,0,0,.06);             /* aro externo sutil */
}

.message .avatar { align-self: flex-start; } /* evita esticar no eixo cruzado */

/* Cores com leve gradiente para um acabamento mais “polido” */
.avatar.assistant {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #052e2b;
}
.avatar.user {
    background: linear-gradient(135deg, #93c5fd, #60a5fa);
    color: #0b1220;
}

/* Mantém o tamanho mais compacto no header */
.chat-header .avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
}
.avatar.user { background: #60a5fa; color: #0b1220; }

/* ---------- Barra de input ---------- */
.input-bar {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
}

.input-bar textarea,
.input-bar input,
.input-bar .send {
    font-size: 16px;
    line-height: 1.35;
}

.input-bar textarea {
    flex: 1 1 auto;
    min-height: 40px;
    max-height: 32vh;
    resize: none;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #ffffff;
    color: var(--text);
    padding: 10px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input-bar textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}

.input-bar .send {
    flex: 0 0 auto;
    background: var(--brand);
    border: 0;
    border-radius: 12px;
    padding: 10px 16px;
    color: #052e2b;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s ease, transform .02s ease;
}
.input-bar .send:hover { filter: brightness(1.05); }
.input-bar .send:active { transform: translateY(1px); }

/* ---------- Links dentro das respostas ---------- */
.bubble a {
    color: var(--brand);
    text-decoration: underline;
}
.bubble a:hover, .bubble a:focus { text-decoration: underline; filter: brightness(1.05); }
.bubble a:visited { color: var(--brand); }

/* ---------- Cartões/mini-form (identificação) ---------- */
.input-card{
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px; /* antes: 12px */
}
.input-card h4 {
  margin: 0 0 2px 0;  /* antes: 4px */
  line-height: 1.2;
}
.input-card p.muted {
  margin: 0 0 6px 0;  /* antes: 10px */
  line-height: 1.25;
}

.mini-form{ display: flex; flex-direction: column; gap: 6px; /* antes: 10px */ }
.mini-form input{
    appearance: none;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px; /* antes: 10px 12px */
    font-size: 14px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mini-form input::placeholder{ color: var(--muted); }
.mini-form input:focus{
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}
.mini-form .actions{ display: flex; gap: 6px; /* antes: 8px */ align-items: center; flex-wrap: wrap; }

.btn{
    appearance: none;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    border-radius: 10px;
    padding: 8px 12px; /* antes: 10px 14px */
    font-size: 14px;
    cursor: pointer;
    transition: filter .15s ease, border-color .15s ease, transform .02s ease, background .15s ease;
}
.btn:hover{ border-color: var(--border-strong); }
.btn:active{ transform: translateY(1px); }
.btn.primary{
    background: var(--brand);
    border-color: var(--brand);
    color: #052e2b;
    font-weight: 700;
}
.btn.ghost{
    background: transparent;
}

.chip{
    appearance: none;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .02s ease;
}
.chip:hover{ border-color: var(--brand); background: rgba(34,197,94,.08); }
.chip:active{ transform: translateY(1px); }

/* ---------- Indicadores (spinner/verificando) ---------- */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.45);
  border-radius: 50%;
  display: inline-block;
  vertical-align: -2px;
  animation: spin .8s linear infinite;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.mini-form.is-busy { opacity: .85; }
.mini-form.is-busy input, .mini-form.is-busy button { pointer-events: none; opacity: .75; }

/* =========================================================
   EMBED LOCK v3
   ========================================================= */
html.embed body { overflow: hidden; }
html.embed .chat-widget {
    position: fixed; inset: 0;
    display: grid; grid-template-rows: auto 1fr auto;
    max-width: none; margin: 0; padding: 8px; min-height: 0;
    padding-bottom: env(safe-area-inset-bottom);
}
html.embed .chat-header {
    position: -webkit-sticky; position: sticky;
    top: 0; z-index: 10; background: var(--card);
}
html.embed .messages {
    min-height: 0; max-height: none; overflow: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: var(--msgs-pad, 12px);
}
html.embed .input-bar {
    position: -webkit-sticky; position: sticky;
    bottom: 0; z-index: 10; background: var(--card);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
}
html.embed .input-bar textarea {
    max-height: 32vh; overflow: auto; -webkit-overflow-scrolling: touch;
}

/* ---------- Responsivo ---------- */
.support-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid #dce3e7;font-size:13px;color:#53646d;flex-wrap:wrap}.support-bar[hidden]{display:none}.support-bar button{font:600 13px system-ui;border:1px solid #28763a;border-radius:6px;background:#fff;color:#216832;padding:9px 14px;cursor:pointer}.support-bar button:disabled{opacity:.5}
.support-bar .support-whatsapp{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 16px;border-radius:6px;background:#237144;color:#fff;font:600 14px/1.4 system-ui;text-decoration:none;text-align:center}.support-bar .support-whatsapp:hover{background:#1b5935}.support-bar .support-whatsapp[hidden]{display:none}.support-bar .support-whatsapp:focus-visible{outline:3px solid #2572b5;outline-offset:3px}
.resolution-feedback{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 8px 10px;padding:8px 10px;border:1px solid #dce3e7;border-radius:8px;background:#f8faf9;color:#53646d;font-size:12px}.resolution-feedback>div{display:flex;gap:6px;flex-wrap:wrap}.resolution-feedback button{border:1px solid #c7d3cb;border-radius:6px;background:#fff;color:#275c37;padding:5px 8px;font:600 12px system-ui;cursor:pointer}.resolution-feedback button:hover{background:#edf7ef}.resolution-feedback-detail{width:100%;display:grid!important;grid-template-columns:1fr auto}.resolution-feedback textarea{min-width:0;resize:vertical;border:1px solid #c7d3cb;border-radius:6px;padding:6px;font:12px system-ui}@media(max-width:520px){.resolution-feedback{align-items:flex-start;flex-direction:column}.resolution-feedback-detail{grid-template-columns:1fr!important}}
.checkout-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 8px; }
.content .checkout-action {
    appearance: none; -webkit-appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 50px; max-width: 100%; padding: 13px 24px;
    border: 1px solid #216832; border-radius: 8px;
    background: #28763a; color: #fff;
    box-shadow: 0 3px 0 #195327, 0 5px 12px rgba(25,83,39,.12);
    font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: 0;
    text-decoration: none; white-space: normal; overflow-wrap: anywhere;
    text-align: center; cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}
.content .checkout-action:hover:not(:disabled) { background: #216832; color: #fff; box-shadow: 0 3px 0 #195327, 0 6px 16px rgba(25,83,39,.2); }
.content .checkout-action:active:not(:disabled) { box-shadow: 0 1px 0 #195327; }
.content .checkout-action:focus-visible { outline: 3px solid #2572b5; outline-offset: 3px; }
.content .checkout-action:disabled { background: #e4e8e5; border-color: #ccd4ce; color: #58625b; box-shadow: none; cursor: default; }
@media (prefers-reduced-motion: reduce) { .content .checkout-action { transition: none; } }
@media (max-width: 520px) {
    .checkout-actions .checkout-action { width: 100%; }
    .chat-widget { padding: 8px; }
    .chat-header, .messages, .input-bar { border-radius: 12px; }
}