@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --bg:#0f172a;--bg2:#0c1525;--surface:#1e293b;--surface2:#334155;
    --border:#1e293b;--text:#f1f5f9;--text2:#94a3b8;--text3:#64748b;
    --blue:#0ea5e9;--blue2:#3b82f6;--purple:#7c3aed;
    --green:#22c55e;--yellow:#f59e0b;--red:#ef4444;
    --shadow:0 8px 32px rgba(0,0,0,.4);
}
html{ height:100%; }
body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--bg);color:var(--text);
    font-size:14px;line-height:1.5;
    -webkit-font-smoothing:antialiased;
    height:100%;overflow:hidden;
}

/* inputs — width não é 100% aqui, é controlado pelo flex pai */
input,textarea{
    font-family:inherit;
    font-size:16px;
    color:var(--text);
    background:var(--bg);
    border:2px solid var(--surface2);
    border-radius:10px;
    padding:11px 14px;
    width:100%;
    outline:none;
    transition:border-color .2s;
    -webkit-appearance:none;
    display:block;
}
input:focus,textarea:focus{border-color:var(--blue)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:12px 20px;border:none;border-radius:10px;font-family:inherit;
    font-size:14px;font-weight:600;cursor:pointer;
    transition:opacity .15s,transform .1s;text-decoration:none;
    -webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff}
.btn-purple{background:linear-gradient(135deg,var(--purple),#6d28d9);color:#fff}
.btn-danger{background:rgba(239,68,68,.15);color:var(--red);border:1px solid rgba(239,68,68,.3)}
.btn-ghost{background:transparent;color:var(--text3);border:1px solid var(--surface2)}
.btn-full{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-weight:700;flex-shrink:0;color:#fff;user-select:none}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600}
.badge-waiting{background:rgba(245,158,11,.15);color:var(--yellow)}
.badge-open{background:rgba(59,130,246,.15);color:var(--blue2)}
.badge-attended{background:rgba(34,197,94,.15);color:var(--green)}
.badge-closed{background:rgba(100,116,139,.15);color:var(--text3)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-online{background:var(--green)}

.bubble-wrap{display:flex;margin-bottom:6px}
.bubble-wrap.own{justify-content:flex-end}
.bubble-wrap.other{justify-content:flex-start}
.bubble{max-width:78%;padding:9px 14px;font-size:14px;line-height:1.55;
    box-shadow:0 1px 4px rgba(0,0,0,.25);word-break:break-word}
.bubble.own{background:var(--blue);color:#fff;border-radius:18px 18px 4px 18px}
.bubble.other{background:var(--surface);color:var(--text);border-radius:18px 18px 18px 4px}
.bubble.system{background:rgba(14,165,233,.1);color:var(--text2);border-radius:10px;
    font-size:12px;text-align:center;max-width:88%;margin:4px auto}
.bubble-time{font-size:10px;opacity:.65;margin-top:4px;text-align:right}

/* ═══════════════════════════════════════════
   BARRA DE INPUT — NUNCA QUEBRA
═══════════════════════════════════════════ */
.chat-input-bar{
    /* layout */
    display:flex;
    flex-direction:row;       /* input e botão lado a lado */
    align-items:center;
    gap:8px;
    /* tamanho */
    width:100%;
    flex-shrink:0;
    /* espaçamento */
    padding:10px 12px;
    padding-bottom:max(10px, env(safe-area-inset-bottom));
    /* visual */
    border-top:1px solid var(--border);
    background:var(--bg);
    /* posição — fica sempre visível */
    position:relative;
    z-index:10;
    /* NUNCA permite overflow horizontal */
    overflow:hidden;
}

/* O input ocupa o espaço restante, mas não empurra o botão */
.chat-input-bar input{
    flex:1 1 0;        /* cresce, mas não força o botão pra fora */
    min-width:0;       /* permite encolher abaixo do conteúdo */
    width:0;           /* ignora o width:100% do seletor global */
    border-radius:24px;
    padding:10px 14px;
    font-size:16px;
}

/* Botão enviar — tamanho fixo, NUNCA some */
.send-btn{
    flex:0 0 44px;     /* não cresce, não encolhe, sempre 44px */
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--blue);
    border:none;
    color:#fff;
    font-size:20px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    -webkit-tap-highlight-color:transparent;
    transition:background .15s;
}
.send-btn:hover,.send-btn:active{background:var(--blue2)}

.error-msg{color:var(--red);font-size:12px;margin-top:5px}
.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.2);
    border-top-color:#fff;border-radius:50%;
    animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface2);border-radius:10px}