*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
    background:radial-gradient(circle at 50% -10%,#2a2216 0%,#0d0d0e 55%);
    color:#f5f2eb;font-family:Arial,Helvetica,sans-serif;
}
.pagina{
    max-width:560px;margin:0 auto;height:100dvh;
    display:flex;flex-direction:column;
    border-left:1px solid #241f17;border-right:1px solid #241f17;background:rgba(13,13,14,.55);
}

/* Cabeçalho */
.cabecalho{
    display:flex;align-items:center;gap:12px;padding:14px 16px;
    background:#111112;border-bottom:1px solid #34312b;position:sticky;top:0;z-index:2;
}
.logo{
    width:44px;height:44px;flex:0 0 44px;border:2px solid #c8a45d;border-radius:50%;
    display:flex;align-items:center;justify-content:center;color:#c8a45d;font-weight:bold;
}
.cabecalho h1{margin:0;font-size:15px;letter-spacing:2px}
.cabecalho p{margin:4px 0 0;font-size:12px;color:#a5a19a;display:flex;align-items:center;gap:6px}
.ponto-online{width:8px;height:8px;border-radius:50%;background:#58ad78;display:inline-block}

/* Conversa */
.conversa{flex:1;overflow-y:auto;padding:18px 14px 8px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.bolha{
    max-width:86%;padding:11px 14px;border-radius:16px;font-size:14.5px;line-height:1.45;
    white-space:pre-line;overflow-wrap:anywhere;animation:surgir .2s ease;
}
.bolha.bot{align-self:flex-start;background:#1d1d20;border:1px solid #34312b;border-bottom-left-radius:5px}
.bolha.cliente{align-self:flex-end;background:#c8a45d;color:#17130b;border-bottom-right-radius:5px;font-weight:600}
.bolha.erro{border-color:#8a3d3d;color:#ffd4d4}
.bolha strong{color:#e6c982}
.bolha.cliente strong{color:#17130b}
.digitando{align-self:flex-start;background:#1d1d20;border:1px solid #34312b;border-radius:16px;padding:12px 16px;display:flex;gap:4px}
.digitando i{width:7px;height:7px;border-radius:50%;background:#a5a19a;animation:pulo 1s infinite}
.digitando i:nth-child(2){animation-delay:.15s}.digitando i:nth-child(3){animation-delay:.3s}
@keyframes pulo{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@keyframes surgir{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Listas e resumo dentro da conversa */
.lista-precos{display:flex;flex-direction:column;gap:4px;margin-top:6px;white-space:normal}
.lista-precos h4{margin:10px 0 2px;color:#c8a45d;font-size:11px;letter-spacing:1.5px;text-transform:uppercase}
.lista-precos h4:first-child{margin-top:0}
.lista-precos div{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;border-bottom:1px dashed #34312b;padding:4px 0}
.lista-precos small{color:#a5a19a}
.resumo{white-space:normal;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin-top:8px;font-size:14px}
.resumo span{color:#a5a19a}
.codigo{display:inline-block;margin-top:6px;padding:6px 10px;border:1px dashed #c8a45d;border-radius:8px;letter-spacing:2px;color:#e6c982;font-weight:bold}

/* Opções (botões) */
.opcoes{padding:8px 12px 4px;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-height:42vh;overflow-y:auto}
.opcoes:empty{display:none}
.opcoes button{
    border:1px solid #57462b;background:#1d1a14;color:#f0d18a;border-radius:20px;
    padding:10px 15px;font-size:14px;cursor:pointer;min-height:42px;font-weight:600;
    transition:.15s;text-align:left;
}
.opcoes button:hover{background:#2c2417;border-color:#c8a45d}
.opcoes button.principal{background:#c8a45d;color:#17130b;border-color:#c8a45d}
.opcoes button.principal:hover{background:#e1c27e}
.opcoes button.secundario{background:transparent;color:#a5a19a;border-color:#3a3a3d}
.opcoes.grade{display:grid;grid-template-columns:repeat(4,1fr)}
.opcoes.grade button{text-align:center;padding:10px 4px}
.opcoes.grade button.secundario{grid-column:1/-1}
.opcoes button:disabled{opacity:.5;cursor:wait}

/* Entrada de texto */
.entrada{display:flex;gap:8px;padding:10px 12px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #241f17;background:#111112}
.entrada input{
    flex:1;min-width:0;height:46px;border-radius:23px;border:1px solid #414044;background:#0d0d0e;
    color:#fff;padding:0 16px;font-size:16px;
}
.entrada input:focus{outline:none;border-color:#c8a45d}
.entrada.destaque input{border-color:#c8a45d;box-shadow:0 0 0 3px rgba(200,164,93,.15)}
.entrada button{
    width:46px;height:46px;flex:0 0 46px;border-radius:50%;border:0;background:#c8a45d;color:#17130b;
    font-size:17px;cursor:pointer;
}

@media(max-width:420px){
    .opcoes.grade{grid-template-columns:repeat(3,1fr)}
    .bolha{max-width:92%}
}