/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary:    #2563eb;
    --primary-dk: #1d4ed8;
    --danger:     #dc2626;
    --success:    #16a34a;
    --warning:    #d97706;
    --gray-50:    #f9fafb;
    --gray-100:   #f3f4f6;
    --gray-200:   #e5e7eb;
    --gray-400:   #9ca3af;
    --gray-600:   #4b5563;
    --gray-800:   #1f2937;
    --white:      #ffffff;
    --radius:     10px;
    --shadow:     0 1px 4px rgba(0,0,0,.10);
    --font:       'Segoe UI', system-ui, sans-serif;
    --bubble-agente-bg:   #2563eb;
    --bubble-agente-text: #ffffff;
    --bubble-cliente-bg:  #f3f4f6;
    --bubble-cliente-text:#1f2937;
}

html, body { height: 100%; font-family: var(--font); color: var(--gray-800); background: var(--gray-50); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; height: 56px;
    background: var(--white); border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow); position: sticky; top: 0; z-index: 100;
    gap: 12px; flex-wrap: wrap;
}
.topbar-left  { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topbar-cliente { background: var(--primary); border-color: var(--primary-dk); }
.topbar-cliente, .topbar-cliente * { color: var(--white) !important; }
.topbar-cliente .badge { border: 1px solid rgba(255,255,255,.4); }
.logo-icon-sm   { font-size: 22px; flex-shrink: 0; }
.santo-grau-logo-chat { display:block; width:clamp(190px,22vw,285px); height:auto; flex:0 0 auto; }
.santo-grau-contexto-chat { padding-left:16px; border-left:1px solid rgba(255,255,255,.34); }
.agente-nome    { font-size: 14px; color: var(--gray-600); }
.subtitulo-atendente { font-size: 12px; opacity: .85; }
.chat-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius);
    font-size: 14px; font-weight: 500; cursor: pointer;
    border: none; transition: opacity .15s, background .15s; white-space: nowrap;
}
.btn:hover  { opacity: .88; }
.btn:active { opacity: .75; }
.btn-primary { background: var(--primary); color: var(--white); }
.btn-primary:hover { background: var(--primary-dk); opacity: 1; }
.btn-ghost   { background: transparent; color: var(--gray-600); border: 1px solid var(--gray-200); }
.btn-ghost:hover { background: var(--gray-100); opacity: 1; }
.btn-danger  { background: var(--danger); color: var(--white); }
.btn-success { background: var(--success); color: var(--white); }
.btn-sm      { padding: 5px 12px; font-size: 13px; }
.btn-full    { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Badges de status de atendimento ─────────────────────────────────────── */
.badge {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    font-size: 12px; font-weight: 600;
}
.badge-aguardando { background: #fef3c7; color: #92400e; }
.badge-aberto     { background: #dcfce7; color: #15803d; }
.badge-encerrado  { background: #fee2e2; color: #dc2626; }
.badge-retorno    { background: #ede9fe; color: #6d28d9; margin-left:6px; white-space:nowrap; }
.badge-sm         { padding: 2px 8px; font-size: 11px; }

/* ── Badges de perfil de agente ──────────────────────────────────────────── */
.badge-perfil {
    display: inline-block; padding: 2px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}
.badge-agente         { background: #dbeafe; color: #1e40af; }
.badge-gerente        { background: #fef9c3; color: #854d0e; }
.badge-administrador  { background: #f3e8ff; color: #6b21a8; }
.badge-video { background:#ede9fe;color:#5b21b6;border:1px solid #c4b5fd;white-space:nowrap; }

.agente-video-opcao { display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px;border:1px solid #ddd6fe;border-radius:10px;background:#faf5ff;cursor:pointer; }
.agente-video-opcao input { margin-top:3px; }
.agente-video-opcao span { display:grid;gap:2px; }
.agente-video-opcao small { color:#6b7280;line-height:1.35; }
.agente-video-opcao.desabilitado { opacity:.55;cursor:not-allowed; }

.transferencia-video-filtro { display:flex;align-items:center;gap:8px;margin:10px 0;padding:9px 10px;border-radius:8px;background:#f5f3ff;color:#5b21b6;font-size:13px;cursor:pointer; }
.badge-vendedor       { background: #dbeafe; color: #1e40af; }
.badge-pre_atendimento{ background: #cffafe; color: #155e75; }
.badge-supervisor     { background: #fef9c3; color: #854d0e; }

/* ── Badge de origem ─────────────────────────────────────────────────────── */
.badge-origem {
    display: inline-block; padding: 2px 8px; border-radius: 20px;
    font-size: 11px; font-weight: 600;
}
.badge-origem-link        { background: #e0f2fe; color: #0369a1; }
.badge-origem-anonimo     { background: #f3f4f6; color: #4b5563; }
.badge-origem-identificado{ background: #dcfce7; color: #15803d; }

/* ── Online dot ──────────────────────────────────────────────────────────── */
.online-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px;
}
.online-dot-on  { background: #16a34a; box-shadow: 0 0 0 2px #bbf7d0; }
.online-dot-off { background: #9ca3af; }

/* ── Toggle online/offline ───────────────────────────────────────────────── */
.toggle-online { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--gray-600); user-select: none; }
.toggle-online input { display: none; }
.toggle-track { width: 36px; height: 20px; background: var(--gray-200); border-radius: 20px; position: relative; transition: background .2s; flex-shrink: 0; }
.toggle-online input:checked + .toggle-track { background: var(--success); }
.toggle-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: white; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.toggle-online input:checked + .toggle-track .toggle-thumb { transform: translateX(16px); }

/* ── Barra de notificação ────────────────────────────────────────────────── */
.notif-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 20px; background: #fef3c7; border-bottom: 1px solid #fde68a;
    font-size: 14px; color: #92400e;
}
.notif-bar .btn { margin-left: auto; }
.notif-close { background: none; border: none; cursor: pointer; font-size: 16px; color: #92400e; padding: 0 4px; }
.notif-bar.notif-mensagem { background:#dbeafe; border-bottom-color:#93c5fd; color:#1e3a8a; }
.notif-bar.notif-mensagem .notif-close { color:#1e3a8a; }
.fila-alerta-persistente {
    display:flex; align-items:center; gap:14px; margin:0 0 18px; padding:14px 16px;
    border:1px solid #fdba74; border-left:5px solid #f97316; border-radius:12px;
    background:#fff7ed; color:#9a3412; box-shadow:0 8px 20px rgba(234,88,12,.12);
}
.fila-alerta-persistente[hidden] { display:none; }
.fila-alerta-persistente > div { flex:1; min-width:0; }
.fila-alerta-persistente strong,.fila-alerta-persistente small { display:block; }
.fila-alerta-persistente small { margin-top:3px; color:#9a3412; }
.fila-alerta-icone { font-size:26px; animation:pulsoFilaIcone 1.3s ease-in-out infinite; }
@keyframes pulsoFilaIcone { 50% { transform:scale(1.16); filter:drop-shadow(0 0 5px rgba(234,88,12,.45)); } }

/* ── Filtros de status ───────────────────────────────────────────────────── */
.filtros-status { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.filtro-ativo { background: var(--primary) !important; color: white !important; border-color: var(--primary) !important; }
.atendimento-intro { margin-top:4px; font-size:13px; }
.atendimento-tabs { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.atendimento-tab {
    min-width:210px; display:flex; align-items:center; gap:10px; padding:12px 14px;
    border:1px solid var(--gray-200); border-radius:12px; background:var(--white);
    color:var(--gray-800); cursor:pointer; text-align:left; transition:.18s ease;
}
.atendimento-tab:hover { border-color:#93c5fd; background:#f8fbff; transform:translateY(-1px); }
.atendimento-tab.ativo { border-color:var(--primary); background:#eff6ff; color:#1e3a8a; box-shadow:0 0 0 2px rgba(37,99,235,.10); }
.atendimento-tab-icone { font-size:22px; }
.atendimento-tab strong,.atendimento-tab small { display:block; }
.atendimento-tab small { margin-top:2px; color:var(--gray-600); font-size:11px; }
.atendimento-tab-contador { margin-left:auto; min-width:26px; padding:3px 7px; border-radius:999px; background:var(--gray-100); color:var(--gray-800); font-size:12px; font-weight:700; text-align:center; }
.atendimento-tab.ativo .atendimento-tab-contador { background:var(--primary); color:#fff; }
.atendimento-tab.tem-pendencias { border-color:#fb923c; background:#fff7ed; box-shadow:0 0 0 3px rgba(249,115,22,.12); }
.atendimento-tab.tem-pendencias .atendimento-tab-contador { background:#ea580c; color:#fff; animation:pulsoContadorFila 1.25s ease-in-out infinite; }
@keyframes pulsoContadorFila { 50% { transform:scale(1.12); box-shadow:0 0 0 5px rgba(234,88,12,.15); } }
.mostrar-encerrados { display:flex; align-items:center; gap:6px; width:max-content; margin-top:10px; font-size:12px; color:var(--gray-600); cursor:pointer; }
.mostrar-encerrados[hidden] { display:none; }
.atendimento-vazio { padding:40px !important; text-align:center; color:var(--gray-600); }
.painel-filtros { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-top:12px; }
.filtro-tags { display:flex; align-items:center; gap:8px; }
.filtro-tags label { margin:0; }
.filtro-tags select, .tag-select, .historico-filtros select {
    padding:7px 10px; border:1px solid var(--gray-200); border-radius:8px; background:white;
}
.tempo-espera-atendimento { display:block; margin-top:5px; color:var(--gray-600); font-size:11px; font-weight:700; white-space:nowrap; }
.tempo-espera-atendimento.aguardando { color:#b45309; }
.tempo-espera-atendimento.atrasado { color:#dc2626; }
.tempo-espera-atendimento.respondido { color:#15803d; }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert { padding: 10px 14px; border-radius: var(--radius); font-size: 14px; }
.alert-erro { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.alert-error { background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; }
.alert-success { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.card { padding:20px; border:1px solid var(--gray-200); border-radius:var(--radius); background:var(--white); box-shadow:var(--shadow); }

/* ── Login / Center page ─────────────────────────────────────────────────── */
.center-page {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; background: var(--gray-100);
}
.login-box {
    background: var(--white); border-radius: 16px; padding: 40px 36px;
    width: 100%; max-width: 420px; box-shadow: 0 4px 24px rgba(0,0,0,.09);
}
.logo { text-align: center; margin-bottom: 28px; }
.logo-icon { font-size: 48px; display: block; margin-bottom: 8px; }
.logo h1 { font-size: 24px; color: var(--primary); }
.logo p  { color: var(--gray-400); font-size: 14px; margin-top: 4px; }
.cliente-login-page { padding:24px; background:#050505; background-image:radial-gradient(circle at 50% 0,rgba(255,255,255,.10),transparent 38%); }
.cliente-login-page .cliente-login-box { max-width:460px; overflow:hidden; padding:0; border:1px solid #2c2c2c; border-radius:20px; box-shadow:0 24px 70px rgba(0,0,0,.45); }
.cliente-login-marca { display:flex; min-height:142px; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:30px 28px 25px; background:#050505; }
.cliente-login-marca img { display:block; width:min(310px,88%); height:auto; }
.cliente-login-marca span { color:#a3a3a3; font-size:10px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; }
.cliente-login-conteudo { padding:30px 34px 32px; background:#fff; }
.cliente-login-titulo { margin-bottom:22px; text-align:left; }
.cliente-login-titulo h1 { color:#111; font-size:25px; letter-spacing:-.02em; }
.cliente-login-titulo p { margin-top:7px; color:#686868; font-size:14px; line-height:1.5; }
.cliente-login-page .form label { color:#242424; }
.cliente-login-page .form input { min-height:46px; border-color:#d4d4d4; background:#fafafa; color:#111; }
.cliente-login-page .form input:focus { border-color:#111; background:#fff; box-shadow:0 0 0 3px rgba(0,0,0,.11); }
.cliente-login-page .form .btn-primary { min-height:46px; border:1px solid #050505; border-radius:10px; background:#050505; color:#fff; font-weight:700; }
.cliente-login-page .form .btn-primary:hover { background:#292929; }
.cliente-login-page .login-privacidade { color:#777; }

.divisor-ou {
    display: flex; align-items: center; gap: 12px;
    margin: 20px 0; color: var(--gray-400); font-size: 13px;
}
.divisor-ou::before, .divisor-ou::after { content:''; flex:1; border-top: 1px solid var(--gray-200); }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form label, label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; margin-top: 16px; color: var(--gray-600); }
.form label:first-child, label:first-child { margin-top: 0; }
.form input, input[type="text"], input[type="email"], input[type="password"] {
    width: 100%; padding: 10px 14px; border: 1px solid var(--gray-200);
    border-radius: var(--radius); font-size: 15px; outline: none; transition: border .2s;
}
input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.form .btn  { margin-top: 24px; }

/* ── Container ───────────────────────────────────────────────────────────── */
.container { max-width: 1000px; margin: 0 auto; padding: 28px 20px; }

.page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.page-header h2 { font-size: 20px; }
@media (max-width:600px) {
    .atendimento-tabs { width:100%; gap:8px; }
    .atendimento-tab { min-width:0; flex:1 1 calc(50% - 4px); padding:10px; }
    .atendimento-tab small { display:none; }
    .fila-alerta-persistente { align-items:flex-start; flex-wrap:wrap; }
    .fila-alerta-persistente .btn { width:100%; }
    .painel-filtros,.filtro-tags { align-items:stretch; flex-direction:column; width:100%; }
    .filtro-tags select { width:100%; }
}

.section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin: 28px 0 12px;
}
.section-header h3 { font-size: 17px; }

/* ── Table ───────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.table {
    width: 100%; border-collapse: collapse; background: var(--white); font-size: 14px;
}
.table th {
    text-align: left; padding: 11px 14px;
    background: var(--gray-50); border-bottom: 1px solid var(--gray-200);
    font-size: 11px; text-transform: uppercase; color: var(--gray-400); letter-spacing: .5px;
}
.table td { padding: 11px 14px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--gray-50); }
.row-status-aguardando td { background: #fffbeb; }
.row-status-aguardando:hover td { background: #fef3c7; }
@keyframes rowNovo { 0%,100%{ background:transparent } 30%{ background:#fef9c3 } }
.row-novo td { animation: rowNovo 1.8s ease; }
.row-mensagem-nova td { background:#eff6ff !important; animation:rowMensagemNova 1.2s ease; }
.row-mensagem-nova td:first-child { box-shadow:inset 4px 0 #2563eb; }
.row-mensagem-nova:hover td { background:#dbeafe !important; }
.badge-mensagem-nova { margin-left:6px; background:#2563eb; color:#fff; white-space:nowrap; animation:pulsoMensagem 1.4s ease-in-out 3; }
.ultima-mensagem-cliente { display:inline-block; max-width:420px; margin-top:4px; overflow:hidden; color:#1d4ed8; font-weight:600; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
@keyframes rowMensagemNova { 0%{ background:#bfdbfe } 100%{ background:#eff6ff } }
@keyframes pulsoMensagem { 50%{ box-shadow:0 0 0 4px rgba(37,99,235,.15); } }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.txt-muted { color: var(--gray-400); font-size: 12px; }
.tags-cell { display:flex; min-width:84px; flex-direction:column; align-items:flex-start; gap:4px; }
.chat-tags, .tag-lista { display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
.tag-chip {
    --tag-color:#2563eb; display:inline-flex; max-width:100%; align-items:center;
    border:1px solid #e2e8f0; border-left:3px solid var(--tag-color);
    color:#334155; background:#f8fafc; border-radius:5px; padding:3px 7px; font-size:11px; font-weight:700;
    line-height:1.2; white-space:nowrap; box-shadow:0 1px 1px rgba(15,23,42,.04);
}
button.tag-chip { cursor:pointer; }
.tags-pagina-topo { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:22px; }
.tags-pagina-topo h2 { margin-bottom:5px; font-size:22px; }
.tags-pagina-acoes { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; }
.tags-pesquisa { display:flex; align-items:center; width:min(320px,75vw); margin:0; padding:0 12px; border:1px solid var(--gray-200); border-radius:999px; background:#fff; }
.tags-pesquisa input[type=search] { width:100%; padding:9px 8px; border:0; outline:0; background:transparent; font:14px var(--font); }
.tags-pesquisa input[type=search]:focus { box-shadow:none; }
.tag-cor-amostra { display:block; width:20px; height:20px; border:2px solid #fff; border-radius:6px; background:var(--tag-color); box-shadow:0 0 0 1px var(--gray-200); }
.tag-contagem { display:inline-flex; min-width:34px; justify-content:center; padding:3px 10px; border-radius:999px; background:var(--gray-100); font-weight:700; }
.tag-cor-input { display:block; width:70px; height:44px; padding:3px; border:1px solid var(--gray-200); border-radius:8px; background:#fff; }
.tags-acoes-coluna { width:220px; }
@media(max-width:560px) {
    .tags-pagina-topo,.tags-pagina-acoes { align-items:stretch; flex-direction:column; }
    .tags-pesquisa { width:100%; }
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state {
    text-align: center; padding: 60px 20px; color: var(--gray-400);
    background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); line-height: 1.8;
}

/* ── Stats grid (admin) ──────────────────────────────────────────────────── */
.stats-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px; margin-bottom: 32px;
}
.stat-card {
    background: var(--white); border-radius: var(--radius);
    padding: 20px; box-shadow: var(--shadow); text-align: center;
}
.stat-num   { font-size: 36px; font-weight: 700; line-height: 1; }
.stat-label { font-size: 13px; color: var(--gray-400); margin-top: 6px; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 200;
}
.modal-overlay.active { display: block; }
.modal {
    display: none; position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--white); border-radius: 16px;
    width: 100%; max-width: 500px; box-shadow: 0 8px 40px rgba(0,0,0,.18); z-index: 201;
}
.modal.active { display: block; }
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 0;
}
.modal-header h3 { font-size: 17px; }
.modal-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--gray-400); }
.modal-body  { padding: 16px 24px; }
.modal-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 24px; border-top: 1px solid var(--gray-100);
}

/* ── Link visível ────────────────────────────────────────────────────────── */
.link-box { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.link-input {
    flex: 1; padding: 10px 12px; border: 2px solid var(--primary);
    border-radius: var(--radius); font-size: 12px; font-family: 'Courier New', monospace;
    background: var(--gray-50); cursor: text; min-width: 0;
}
.link-input:focus { outline: none; background: var(--white); }
.link-dica { font-size: 12px; color: var(--gray-400); margin-bottom: 14px; }
.link-seguranca {
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius);
    padding: 10px 14px; font-size: 13px; color: #166534; line-height: 1.5;
}

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--gray-800); color: var(--white); padding: 12px 22px;
    border-radius: 30px; font-size: 14px; opacity: 0;
    transition: opacity .3s, transform .3s; pointer-events: none; z-index: 999; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Chat Layout ─────────────────────────────────────────────────────────── */
.chat-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height:0; overflow: hidden; }
.chat-page-cliente {
    --primary:#111111;
    --primary-dk:#000000;
    --bubble-agente-bg:#111111;
    --bubble-agente-text:#ffffff;
    --bubble-cliente-bg:#f1f1ef;
    --bubble-cliente-text:#171717;
    background:#f6f6f4;
}
.chat-page-cliente .topbar-cliente {
    height:auto; min-height:72px; padding-top:10px; padding-bottom:10px;
    background:#050505; border-color:#242424; box-shadow:0 3px 14px rgba(0,0,0,.22);
}
.chat-page-cliente .topbar-cliente .btn-ghost { border-color:#505050; background:#171717; }
.chat-page-cliente .topbar-cliente .btn-ghost:hover { background:#292929; }
.chat-page-cliente .topbar-cliente .topbar-right { filter:grayscale(1); }
.chat-page-cliente .topbar-cliente .badge { background:#fff; border-color:#fff; color:#050505 !important; }
.chat-page-cliente .chat-wrap { background:#f6f6f4; }
.chat-page-cliente .assunto-bar { background:#fff; border-color:#dededb; color:#363636; }
.chat-page-cliente .chat-messages { background:linear-gradient(180deg,#f8f8f6 0%,#f3f3f0 100%); }
.chat-page-cliente .msg-agente .msg-bubble { border:1px solid #dededb; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.chat-page-cliente .msg-cliente .msg-bubble { box-shadow:0 2px 8px rgba(0,0,0,.12); }
.chat-page-cliente .chat-input-bar { border-color:#d8d8d5; box-shadow:0 -4px 18px rgba(0,0,0,.05); }
.chat-page-cliente .chat-input-bar textarea:focus { border-color:#111; box-shadow:0 0 0 3px rgba(0,0,0,.10); }
.chat-page-cliente .chat-input-bar .btn-primary { background:#050505; color:#fff; }
.chat-page-cliente .chat-input-bar .btn-primary:hover { background:#242424; }
.chat-page-cliente .aguardando-banner { background:#eee; border-color:#d5d5d5; color:#171717; }
.chat-page-cliente .aguardando-spinner { border-color:#d4d4d4; border-top-color:#111; }
.chat-page-cliente .chat-history-loader .btn-ghost { border-color:#bdbdbd; background:#fff; color:#171717; }
.chat-page-cliente .anexo-card { color:#111; }
.chat-page-cliente .btn-velocidade-audio:hover,.chat-page-cliente .btn-velocidade-audio:focus-visible { border-color:#111; background:#eee; color:#111; box-shadow:0 0 0 3px rgba(0,0,0,.10); }
.pwa-install-topo { display:flex; align-items:center; gap:5px; margin-left:auto; }
.pwa-install-topo[hidden] { display:none; }
.pwa-install-topo .btn { margin:0; border:1px solid #fff; border-radius:999px; background:#fff; color:#050505; font-weight:700; }
.pwa-install-topo .btn:hover { background:#e8e8e8; }
.pwa-install-dismiss { flex:0 0 auto; width:26px; height:26px; border:1px solid rgba(255,255,255,.45); border-radius:50%; background:transparent; color:#fff; font-size:18px; line-height:1; cursor:pointer; }
.cliente-login-marca .pwa-install-topo { margin:3px 0 0; }
.topbar-cliente .pwa-install-topo .btn { color:#050505 !important; }
.chat-wrap { position:relative; display: flex; flex-direction: column; flex: 1; min-height:0; overflow: hidden; }
.assunto-bar {
    background: var(--gray-100); border-bottom: 1px solid var(--gray-200);
    padding: 8px 20px; font-size: 13px; color: var(--gray-600); font-weight: 500;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.origem-tag { font-size: 11px; background: var(--white); padding: 2px 8px; border-radius: 12px; border: 1px solid var(--gray-200); }

/* ── Barra de info do cliente (agente) ───────────────────────────────────── */
.cliente-info-bar {
    background: #eff6ff; border-bottom: 1px solid #bfdbfe;
    padding: 8px 20px; font-size: 13px; color: #1e40af;
}

/* ── Chat messages ───────────────────────────────────────────────────────── */
.chat-messages { flex: 1; min-height:0; overflow-y: auto; overscroll-behavior:contain; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.chat-empty { text-align: center; color: var(--gray-400); margin: auto; line-height: 1.8; font-size: 15px; }
.chat-history-loader { display:flex; justify-content:center; padding:2px 0 8px; }
.chat-drop-overlay {
    position:absolute; inset:12px; z-index:40; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:7px; border:3px dashed #2563eb;
    border-radius:18px; background:rgba(239,246,255,.96); color:#1e3a8a;
    opacity:0; visibility:hidden; transform:scale(.985); pointer-events:none;
    transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
    box-shadow:0 16px 38px rgba(30,64,175,.18); text-align:center; padding:24px;
}
.chat-drop-overlay.ativo { opacity:1; visibility:visible; transform:scale(1); }
.chat-drop-overlay strong { font-size:18px; }
.chat-drop-overlay small { color:#475569; }
.chat-drop-icon { font-size:40px; line-height:1; }
.revisao-fotos-fundo { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(15,23,42,.62); }
.revisao-fotos-fundo[hidden] { display:none; }
.revisao-fotos-modal { display:flex; flex-direction:column; width:min(920px,100%); max-height:min(88vh,820px); overflow:hidden; border-radius:18px; background:#fff; box-shadow:0 24px 70px rgba(15,23,42,.32); }
.revisao-fotos-modal > header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px 20px; border-bottom:1px solid var(--gray-200); }
.revisao-fotos-modal h2 { font-size:20px; }
.revisao-fotos-modal header p { margin-top:4px; color:var(--gray-600); font-size:13px; }
.revisao-fotos-fechar { border:0; background:transparent; color:var(--gray-600); cursor:pointer; font-size:28px; line-height:1; }
.revisao-fotos-alerta { margin:12px 20px 0; padding:9px 12px; border:1px solid #f59e0b; border-radius:9px; background:#fffbeb; color:#92400e; font-size:12px; font-weight:700; }
.revisao-fotos-grade { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; padding:18px 20px; overflow-y:auto; }
.revisao-foto-card { min-width:0; padding:10px; border:1px solid var(--gray-200); border-radius:12px; background:var(--gray-50); }
.revisao-foto-card img { display:block; width:100%; height:150px; object-fit:contain; border-radius:8px; background:var(--gray-100); }
.revisao-foto-card strong { display:block; margin:8px 2px 6px; overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.revisao-foto-legenda { width:100%; min-height:66px; padding:9px 10px; resize:vertical; border:1px solid var(--gray-200); border-radius:9px; font:13px/1.35 var(--font); }
.revisao-foto-legenda:focus { outline:0; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.revisao-arquivo-card { padding:14px; border:1px solid var(--gray-200); border-radius:10px; background:var(--gray-50); color:var(--gray-600); font-size:13px; overflow-wrap:anywhere; }
.revisao-fotos-modal > footer { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--gray-200); background:#fff; }

/* ── Mensagem de sistema ─────────────────────────────────────────────────── */
.msg-sistema .msg-sistema {
    text-align: center; font-size: 12px; color: var(--gray-400);
    background: var(--gray-100); padding: 4px 14px; border-radius: 20px;
    display: inline-block; margin: 0 auto;
}
.msg.msg-sistema { align-items: center; align-self: center; }
.msg-sistema { text-align: center; }
.msg-sistema .msg-sistema-inner,
.msg-sistema > div {
    font-size: 12px; color: var(--gray-400); background: var(--gray-100);
    padding: 4px 16px; border-radius: 20px; display: inline-block;
}
.msg-bubble p { margin:.35em 0; }
.msg-bubble ul,.msg-bubble ol { margin:.4em 0 .4em 1.35em; }
.msg-bubble blockquote { margin:.4em 0; padding-left:10px; border-left:3px solid currentColor; opacity:.85; }
.msg-bubble code { padding:1px 4px; border-radius:4px; background:rgba(0,0,0,.08); font-family:Consolas,monospace; }

/* ── Bolhas ──────────────────────────────────────────────────────────────── */
.msg { position:relative; display: flex; flex-direction: column; max-width: 72%; gap: 3px; }
.msg-agente  { align-self: flex-end;   align-items: flex-end; }
.msg-cliente { align-self: flex-start; align-items: flex-start; }
.msg-sistema { align-self: center; max-width: 90%; }
.msg-interno { align-self:stretch; align-items:flex-start; max-width:92%; margin:2px auto; padding:10px 12px; border:1px dashed #f59e0b; border-radius:12px; background:#fffbeb; }
.msg-interno .msg-bubble { background:transparent; color:#78350f; padding:2px 0; }
.msg-interno-label { font-size:11px; font-weight:800; color:#92400e; text-transform:uppercase; }

.chat-page-cliente .msg-agente  { align-self: flex-start; align-items: flex-start; }
.chat-page-cliente .msg-cliente { align-self: flex-end;   align-items: flex-end; }

.msg-bubble {
    padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.5;
    word-break: break-word; white-space: pre-wrap;
}
.msg-agente .msg-bubble  { background: var(--bubble-agente-bg); color: var(--bubble-agente-text); border-bottom-right-radius: 4px; }
.msg-cliente .msg-bubble { background: var(--bubble-cliente-bg); color: var(--bubble-cliente-text); border-bottom-left-radius: 4px; }

.chat-page-cliente .msg-agente  .msg-bubble { background: var(--bubble-cliente-bg); color: var(--bubble-cliente-text); border-bottom-right-radius: 18px; border-bottom-left-radius: 4px; }
.chat-page-cliente .msg-cliente .msg-bubble { background: var(--bubble-agente-bg);  color: var(--bubble-agente-text);  border-bottom-left-radius: 18px;  border-bottom-right-radius: 4px; }

.msg-meta { font-size: 11px; color: var(--gray-400); padding: 0 4px; }
.msg-link { color:inherit; font-weight:650; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; overflow-wrap:anywhere; }
.msg-link:hover,.msg-link:focus-visible { text-decoration-thickness:2px; outline:none; }
.msg-resposta-citacao { display:flex; flex-direction:column; align-items:flex-start; width:min(320px,68vw); padding:8px 10px; overflow:hidden; border:0; border-left:3px solid var(--primary); border-radius:9px; background:rgba(226,232,240,.78); color:var(--gray-700); text-align:left; cursor:pointer; }
.msg-resposta-citacao strong,.msg-resposta-citacao span { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-resposta-citacao strong { color:var(--primary); font-size:11px; }
.msg-resposta-citacao span { margin-top:2px; font-size:12px; }
.msg-agente .msg-resposta-citacao { border-left-color:#1d4ed8; background:#dbeafe; }
.msg-interno .msg-resposta-citacao { border-left-color:#d97706; background:#fef3c7; }
.chat-page-cliente .msg-cliente .msg-resposta-citacao { border-left-color:#111; background:#e5e7eb; }
.btn-responder-msg { display:flex; align-items:center; gap:4px; padding:3px 7px; border:0; border-radius:999px; background:transparent; color:var(--gray-400); cursor:pointer; font:600 11px/1 var(--font); opacity:.24; transition:opacity .15s,background .15s,color .15s; }
.btn-responder-msg svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.msg:hover .btn-responder-msg,.btn-responder-msg:focus-visible { opacity:1; background:var(--gray-100); color:var(--gray-700); outline:none; }
.msg-agente .btn-responder-msg,.chat-page-cliente .msg-cliente .btn-responder-msg { align-self:flex-end; }
.msg-destaque-resposta { animation:destaque-resposta 1.8s ease; }
@keyframes destaque-resposta { 0%,35% { filter:drop-shadow(0 0 7px rgba(37,99,235,.65)); transform:scale(1.015); } 100% { filter:none; transform:none; } }

/* ── Input bar ───────────────────────────────────────────────────────────── */
.chat-input-bar {
    display: flex; gap: 10px; padding: 14px 16px;
    padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--gray-200); background: var(--white); align-items: flex-end;
    position:relative; z-index:5;
}
.chat-input-bar textarea {
    flex: 1; min-width:0; padding: 10px 14px; border: 1px solid var(--gray-200);
    border-radius: 22px; font-size: 15px; resize: none; outline: none;
    font-family: var(--font); line-height: 1.4; max-height: 120px; overflow-y: auto; transition: border .2s;
}
.chat-input-bar textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.chat-input-bar .btn { border-radius: 22px; padding: 10px 20px; flex-shrink: 0; }
.chat-input-bar .btn-icon { width:42px; height:42px; padding:0; justify-content:center; font-size:18px; }
.chat-input-bar .btn-icon.ativo { background:#fef3c7; border-color:#f59e0b; color:#92400e; }
.composer-mode { padding:5px 18px; border-top:1px solid var(--gray-200); background:#eff6ff; color:#1e40af; font-size:12px; font-weight:700; }
.resposta-composer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 14px; border-top:1px solid var(--gray-200); border-left:4px solid var(--primary); background:#f8fafc; }
.resposta-composer[hidden] { display:none; }
.resposta-composer > div { min-width:0; }
.resposta-composer strong,.resposta-composer span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.resposta-composer strong { color:var(--primary); font-size:12px; }
.resposta-composer span { margin-top:2px; color:var(--gray-600); font-size:12px; }
.resposta-composer button { flex:0 0 32px; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--gray-500); cursor:pointer; font-size:23px; line-height:1; }
.resposta-composer button:hover,.resposta-composer button:focus-visible { background:var(--gray-200); color:var(--gray-800); outline:none; }
.chat-page-cliente .resposta-composer { border-left-color:#111; }
.chat-page-cliente .resposta-composer strong { color:#111; }
.chat-input-bar.modo-interno { background:#fffbeb; border-color:#f59e0b; }
.chat-input-bar.modo-interno textarea { border-color:#f59e0b; }
.anexo-card { display:flex; align-items:center; gap:8px; max-width:360px; margin-top:5px; padding:9px 12px; border:1px solid var(--gray-200); border-radius:10px; background:white; color:var(--primary); text-decoration:none; font-size:13px; }
.anexo-card small { color:var(--gray-400); margin-left:auto; }
.anexo-preview { display:block; width:min(220px,62vw); margin-top:5px; overflow:hidden; border:1px solid var(--gray-200); border-radius:12px; background:#fff; color:var(--gray-800); text-decoration:none; box-shadow:0 1px 3px rgba(15,23,42,.08); }
.anexo-preview img { display:block; width:100%; height:auto; max-height:180px; object-fit:contain; background:var(--gray-100); }
.visualizando-imagem { overflow:hidden; }
.visualizador-imagem { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:52px 18px 24px; background:rgba(0,0,0,.86); backdrop-filter:blur(3px); }
.visualizador-imagem[hidden] { display:none; }
.visualizador-imagem-conteudo { display:grid; place-items:center; max-width:100%; max-height:100%; overflow:auto; border-radius:12px; }
.visualizador-imagem-conteudo img { display:block; max-width:min(94vw,1200px); max-height:calc(100vh - 90px); width:auto; height:auto; object-fit:contain; border-radius:10px; box-shadow:0 18px 60px rgba(0,0,0,.5); }
.visualizador-imagem-fechar { position:absolute; top:max(12px,env(safe-area-inset-top,0px)); right:16px; display:grid; place-items:center; width:42px; height:42px; padding:0; border:1px solid rgba(255,255,255,.4); border-radius:50%; background:rgba(0,0,0,.55); color:#fff; cursor:pointer; font-size:30px; line-height:1; }
.visualizador-imagem-fechar:hover,.visualizador-imagem-fechar:focus-visible { background:#fff; color:#111; outline:none; }
.confirmando-saida-chat { overflow:hidden; }
.confirmacao-saida-fundo { position:fixed; inset:0; z-index:1300; display:grid; place-items:center; padding:18px; background:rgba(0,0,0,.64); backdrop-filter:blur(3px); }
.confirmacao-saida-fundo[hidden] { display:none; }
.confirmacao-saida-card { width:min(390px,100%); padding:25px 22px 20px; border-radius:20px; background:#fff; color:#111; text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.38); }
.confirmacao-saida-icone { display:grid; place-items:center; width:54px; height:54px; margin:0 auto 12px; border-radius:50%; background:#f1f5f9; font-size:25px; }
.confirmacao-saida-card h2 { margin:0; font-size:20px; }
.confirmacao-saida-card p { margin:9px 0 20px; color:var(--gray-600); font-size:14px; line-height:1.5; }
.confirmacao-saida-acoes { display:flex; flex-direction:column; gap:8px; }
.confirmacao-saida-acoes .btn { width:100%; justify-content:center; }
.anexo-conteudo { display:flex; flex-direction:column; max-width:min(360px,76vw); }
.anexo-conteudo .anexo-preview { width:100%; }
.anexo-info { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px; font-size:12px; }
.anexo-info-sem-legenda { justify-content:flex-end; padding-top:6px; padding-bottom:6px; }
.anexo-info strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.anexo-info strong.anexo-titulo-legenda { overflow:visible; text-overflow:clip; white-space:normal; line-height:1.35; overflow-wrap:anywhere; }
.anexo-info small { flex-shrink:0; color:var(--gray-400); }
.anexo-pdf-frame { position:relative; display:block; height:160px; overflow:hidden; background:#f8fafc; }
.anexo-pdf-frame iframe { width:100%; height:100%; border:0; pointer-events:none; background:#fff; }
.anexo-pdf-selo { position:absolute; top:8px; right:8px; padding:4px 7px; border-radius:6px; background:#dc2626; color:#fff; font-size:10px; font-weight:800; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.anexo-audio { width:min(310px,72vw); margin-top:5px; overflow:hidden; border:1px solid var(--gray-200); border-radius:14px; background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.08); }
.anexo-audio-player { display:flex; align-items:center; gap:5px; padding-right:6px; }
.anexo-audio audio { display:block; flex:1 1 auto; width:calc(100% - 52px); min-width:0; height:44px; border-radius:12px; }
.anexo-video { width:min(420px,76vw); margin-top:5px; overflow:hidden; border:1px solid var(--gray-200); border-radius:14px; background:#050505; box-shadow:0 1px 4px rgba(15,23,42,.16); }
.anexo-video video { display:block; width:100%; max-height:360px; background:#050505; object-fit:contain; }
.btn-velocidade-audio { flex:0 0 43px; min-width:43px; height:32px; padding:0 5px; border:1px solid #cbd5e1; border-radius:999px; background:#f8fafc; color:#334155; font-size:12px; font-weight:800; cursor:pointer; transition:.15s ease; }
.btn-velocidade-audio:hover,.btn-velocidade-audio:focus-visible { border-color:var(--primary); background:#eff6ff; color:var(--primary); outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.13); }
.chat-input-bar .btn-audio.gravando { background:#fee2e2; border-color:#ef4444; color:#b91c1c; animation:pulso-gravacao 1.1s ease-in-out infinite; }
.chat-input-bar.gravando-audio { border-top-color:#fca5a5; background:#fff7f7; }
.gravacao-status { display:none; position:absolute; left:16px; bottom:calc(100% + 7px); padding:7px 11px; border-radius:18px; background:#991b1b; color:#fff; font-size:12px; font-weight:700; box-shadow:0 3px 12px rgba(127,29,29,.25); white-space:nowrap; }
.gravacao-status.ativa { display:block; }
@keyframes pulso-gravacao { 50% { box-shadow:0 0 0 5px rgba(239,68,68,.16); filter:saturate(1.25); } }
.chat-input-bar.tem-rascunho-audio { min-height:72px; }
.audio-rascunho { position:absolute; inset:7px 10px; z-index:12; display:flex; align-items:center; gap:8px; padding:5px 7px 5px 10px; border:1px solid var(--gray-200); border-radius:16px; background:#fff; box-shadow:0 4px 18px rgba(15,23,42,.12); }
.audio-rascunho[hidden] { display:none; }
.audio-rascunho audio { flex:1 1 auto; width:100%; min-width:120px; height:42px; }
.audio-rascunho-acao { flex:0 0 42px; display:grid; place-items:center; width:42px; height:42px; padding:0; border:1px solid var(--gray-200); border-radius:50%; background:#fff; cursor:pointer; transition:background .15s,border-color .15s,transform .15s; }
.audio-rascunho-acao:hover { transform:translateY(-1px); }
.audio-rascunho-acao svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.audio-rascunho-excluir { color:#b91c1c; }
.audio-rascunho-excluir:hover,.audio-rascunho-excluir:focus-visible { border-color:#fca5a5; background:#fef2f2; outline:none; }
.audio-rascunho-enviar { border-color:var(--primary); background:var(--primary); color:#fff; }
.audio-rascunho-enviar:hover,.audio-rascunho-enviar:focus-visible { background:var(--primary-dk); outline:none; }
.video-rascunho { position:absolute; left:10px; right:10px; bottom:calc(100% + 8px); z-index:24; overflow:hidden; border:1px solid var(--gray-300); border-radius:16px; background:#050505; box-shadow:0 16px 42px rgba(15,23,42,.3); }
.video-rascunho[hidden] { display:none; }
.video-rascunho > video { display:block; width:100%; max-height:min(46vh,360px); background:#050505; object-fit:contain; }
.video-rascunho-acoes { display:flex; align-items:center; gap:9px; padding:9px 10px; background:#fff; }
.video-rascunho-acoes span { flex:1; color:var(--gray-700); font-size:12px; font-weight:700; }
.seletor-emoji { position:absolute; left:96px; bottom:calc(100% + 8px); z-index:20; width:min(344px,calc(100vw - 32px)); padding:12px; border:1px solid var(--gray-200); border-radius:16px; background:#fff; box-shadow:0 12px 32px rgba(15,23,42,.18); }
.seletor-emoji[hidden] { display:none; }
.seletor-emoji > strong { display:block; margin:0 0 9px; color:var(--gray-700); font-size:12px; }
.seletor-emoji-grade { display:grid; grid-template-columns:repeat(8,1fr); gap:4px; max-height:210px; overflow-y:auto; }
.seletor-emoji-grade button { display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:9px; background:transparent; cursor:pointer; font-size:21px; line-height:1; }
.seletor-emoji-grade button:hover,.seletor-emoji-grade button:focus-visible { outline:none; background:#eff6ff; box-shadow:0 0 0 2px #bfdbfe; }
.login-privacidade { margin-top:16px; color:var(--gray-500); font-size:12px; line-height:1.5; text-align:center; }
.cliente-detalhe-page { display:grid; gap:20px; }
.cliente-alerta-ok { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.cliente-cabecalho-card { display:grid; grid-template-columns:auto minmax(220px,1fr) auto; gap:18px; align-items:center; padding:22px; border:1px solid var(--gray-200); border-radius:16px; background:#fff; box-shadow:var(--shadow); }
.cliente-avatar-grande { width:62px; height:62px; display:grid; place-items:center; border-radius:50%; background:#dbeafe; color:#1d4ed8; font-size:26px; font-weight:800; }
.cliente-cabecalho-dados h1 { margin:0 0 4px; font-size:25px; }
.cliente-cabecalho-dados p { margin:0; color:var(--gray-500); }
.cliente-contatos { display:flex; gap:8px 18px; flex-wrap:wrap; margin-top:12px; color:var(--gray-700); font-size:13px; }
.cliente-metricas { display:grid; grid-template-columns:repeat(3,minmax(92px,1fr)); gap:8px; }
.cliente-metricas div { min-width:92px; padding:12px; border-radius:12px; background:var(--gray-50); text-align:center; }
.cliente-metricas strong,.cliente-metricas span { display:block; }
.cliente-metricas strong { color:var(--primary); font-size:22px; }
.cliente-metricas span { margin-top:2px; color:var(--gray-500); font-size:11px; }
.cliente-detalhe-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:20px; align-items:start; }
.cliente-detalhe-page .clientes-card { padding:20px; border:1px solid var(--gray-200); border-radius:16px; background:#fff; box-shadow:var(--shadow); }
.cliente-detalhe-page h2 { margin:0 0 5px; font-size:18px; }
.cliente-nota-form { margin-top:16px; padding-bottom:18px; border-bottom:1px solid var(--gray-200); }
.cliente-nota-form textarea { width:100%; resize:vertical; }
.cliente-notas-lista { display:grid; gap:10px; margin-top:16px; }
.cliente-nota { padding:13px 14px; border:1px solid #fde68a; border-radius:12px; background:#fffbeb; color:#78350f; line-height:1.5; }
.cliente-nota-meta { display:flex; justify-content:space-between; gap:12px; margin-bottom:6px; font-size:12px; color:#92400e; }
.cliente-chamados-card { display:grid; gap:9px; }
.cliente-chamado-item { display:flex; flex-direction:column; gap:3px; padding:10px 11px; border:1px solid var(--gray-200); border-radius:10px; color:var(--gray-800); text-decoration:none; }
.cliente-chamado-item:hover { border-color:#93c5fd; background:#eff6ff; text-decoration:none; }
.cliente-chamado-item small { color:var(--gray-500); }
.cliente-secao-titulo { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:16px; }
.cliente-secao-titulo p { margin:0; }
.cliente-anexos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.cliente-anexo-item { min-width:0; overflow:hidden; border:1px solid var(--gray-200); border-radius:12px; background:#fff; color:var(--gray-800); text-decoration:none; transition:transform .15s,border-color .15s; }
.cliente-anexo-item:hover { transform:translateY(-2px); border-color:#93c5fd; text-decoration:none; }
.cliente-anexo-preview { height:145px; display:grid; place-items:center; overflow:hidden; background:var(--gray-100); }
.cliente-anexo-preview img { width:100%; height:100%; object-fit:cover; }
.cliente-anexo-icone { display:grid; place-items:center; width:58px; height:58px; border-radius:12px; background:#fee2e2; color:#b91c1c; font-size:14px; font-weight:900; }
.cliente-anexo-info { display:flex; flex-direction:column; gap:3px; padding:10px 11px; }
.cliente-anexo-info strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cliente-anexo-info small { color:var(--gray-500); font-size:11px; }
.cliente-vazio { padding:24px; border:1px dashed var(--gray-300); border-radius:12px; color:var(--gray-500); text-align:center; }
.cliente-paginacao { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:18px; }
.cliente-nome-link { color:inherit; font-weight:700; text-decoration:underline; text-decoration-color:#93c5fd; text-underline-offset:2px; }
.cliente-nome-link:hover { color:var(--primary); }
.historico-filtros { display:grid; grid-template-columns:minmax(220px,2fr) 1fr 1fr auto auto; gap:10px; margin-bottom:12px; }
.historico-filtros input { margin:0; }
.historico-total { margin-bottom:12px; }
.container-wide { max-width:1400px; }
.empty-cell { text-align:center; padding:40px !important; color:var(--gray-400); }
.chat-encerrado {
    text-align: center; padding: 18px; background: var(--gray-100);
    border-top: 1px solid var(--gray-200); color: var(--gray-600); font-size: 14px; line-height: 1.7;
}

/* ── Tela de aguardando (cliente) ────────────────────────────────────────── */
.aguardando-screen {
    flex: 1; display: flex; align-items: center; justify-content: center;
    background: var(--gray-50);
}
.aguardando-inner { text-align: center; padding: 40px 20px; }
.aguardando-inner h3 { font-size: 20px; margin: 16px 0 8px; }
.aguardando-inner p  { color: var(--gray-600); line-height: 1.6; }
.aguardando-dica { font-size: 12px; color: var(--gray-400); margin-top: 8px; }
.aguardando-spinner {
    width: 48px; height: 48px; border: 4px solid var(--gray-200);
    border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite;
    margin: 0 auto;
}
.aguardando-banner { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid #fde68a; background:#fffbeb; color:#92400e; line-height:1.35; }
.aguardando-banner .aguardando-spinner { width:24px; height:24px; margin:0; border-width:3px; flex:0 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsivo ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .btn-responder-msg { opacity:.82; padding:5px 8px; }
    .msg-resposta-citacao { width:min(290px,72vw); }
    .resposta-composer { padding:7px 10px; }
    .topbar { height: auto; padding: 10px 12px; flex-wrap: wrap; }
    .container { padding: 16px 12px; }
    .table th, .table td { padding: 9px 10px; font-size: 13px; }
    .chat-title span.badge { display: none; }
    .msg { max-width: 88%; }
    .modal { max-width: calc(100vw - 24px); }
    .actions { flex-direction: column; }
    .link-box { flex-direction: column; }
    .link-input { font-size: 11px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .login-box { padding: 28px 20px; }
    .cliente-login-page { align-items:flex-start; padding:18px 14px calc(18px + env(safe-area-inset-bottom,0px)); }
    .cliente-login-page .cliente-login-box { padding:0; border-radius:17px; }
    .cliente-login-marca { min-height:116px; padding:24px 18px 20px; }
    .cliente-login-marca img { width:min(270px,88%); }
    .cliente-login-conteudo { padding:25px 22px 27px; }
    .historico-filtros { grid-template-columns:1fr; }
    .chat-input-bar { gap:5px; padding:10px 8px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .chat-input-bar .btn-icon { width:36px; height:36px; font-size:16px; }
    .chat-input-bar .btn-primary { padding:9px 12px; }
    .chat-page-cliente .chat-input-bar { gap:3px; padding:8px 6px calc(10px + env(safe-area-inset-bottom, 0px)); }
    .chat-page-cliente .chat-input-bar .btn-icon { flex:0 0 30px; width:30px; height:30px; font-size:14px; }
    .chat-page-cliente .chat-input-bar textarea { min-height:34px; padding:7px 9px; border-radius:18px; font-size:14px; }
    .chat-page-cliente .chat-input-bar .btn-primary { flex:0 0 34px; width:34px; height:34px; padding:0; font-size:0; }
    .chat-page-cliente .chat-input-bar .btn-primary::after { content:'➤'; font-size:16px; line-height:1; }
    .chat-page-cliente .topbar-cliente { gap:8px; padding:9px 10px; }
    .chat-page-cliente .topbar-cliente .topbar-left { width:100%; flex-wrap:nowrap; gap:10px; }
    .chat-page-cliente .topbar-cliente .topbar-right { width:100%; gap:6px; }
    .chat-page-cliente .topbar-cliente .pwa-install-topo { width:100%; justify-content:flex-end; margin-top:-3px; }
    .santo-grau-logo-chat { width:min(180px,49vw); }
    .santo-grau-contexto-chat { min-width:0; padding-left:10px; }
    .santo-grau-contexto-chat strong { font-size:12px; }
    .santo-grau-contexto-chat .subtitulo-atendente { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:38vw; }
    .anexo-preview { width:min(200px,64vw); }
    .anexo-preview img { max-height:160px; }
    .anexo-pdf-frame { height:150px; }
    .anexo-audio { width:min(270px,76vw); }
    .revisao-fotos-fundo { padding:0; align-items:flex-end; }
    .revisao-fotos-modal { width:100%; max-height:94dvh; border-radius:18px 18px 0 0; }
    .revisao-fotos-grade { grid-template-columns:1fr 1fr; padding:12px; gap:10px; }
    .revisao-foto-card { padding:8px; }
    .revisao-foto-card img { height:120px; }
    .revisao-fotos-modal > footer { padding-bottom:calc(14px + env(safe-area-inset-bottom,0px)); }
    .gravacao-status { left:8px; max-width:calc(100vw - 16px); overflow:hidden; text-overflow:ellipsis; }
    .audio-rascunho { inset:6px; gap:5px; padding-left:6px; }
    .audio-rascunho audio { min-width:0; height:40px; }
    .audio-rascunho-acao { flex-basis:38px; width:38px; height:38px; }
    .seletor-emoji { left:8px; width:calc(100vw - 16px); padding:10px; }
    .seletor-emoji-grade { grid-template-columns:repeat(8,1fr); gap:2px; }
    .seletor-emoji-grade button { width:100%; height:34px; font-size:20px; }
    .cliente-cabecalho-card { grid-template-columns:auto minmax(0,1fr); padding:16px; }
    .cliente-metricas { grid-column:1/-1; width:100%; }
    .cliente-detalhe-grid { grid-template-columns:1fr; }
    .cliente-anexos-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
    .cliente-anexo-preview { height:120px; }
    .cliente-secao-titulo { flex-direction:column; }
}

/* ── Navegação interna da equipe ─────────────────────────────────────────── */
:root { --menu-lateral-largura: 248px; }
body.com-menu-lateral { padding-left: var(--menu-lateral-largura); }
.menu-lateral {
    position: fixed; inset: 0 auto 0 0; z-index: 250;
    width: var(--menu-lateral-largura); padding: 18px 14px;
    display: flex; flex-direction: column;
    background: #111827; color: #e5e7eb;
    box-shadow: 3px 0 18px rgba(15,23,42,.14);
}
.menu-lateral-marca {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px 22px;
    color: white; font-size: 18px; text-decoration: none;
}
.menu-lateral-marca:hover,.menu-lateral-item:hover,.menu-lateral-sair:hover { text-decoration: none; }
.menu-lateral-marca span { font-size: 25px; }
.menu-lateral-secao { padding: 0 11px 8px; color: #94a3b8; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.menu-lateral-nav { display: flex; flex-direction: column; gap: 4px; }
.menu-lateral-item {
    display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 9px 11px;
    border-radius: 9px; color: #cbd5e1; font-size: 14px; font-weight: 600;
    transition: background .15s,color .15s;
}
.menu-lateral-item:hover { color: white; background: rgba(255,255,255,.08); }
.menu-lateral-item.ativo { color: white; background: #2563eb; }
.menu-lateral-icone { width: 22px; text-align: center; font-size: 17px; }
.menu-lateral-rodape { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.menu-lateral-usuario { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 0 10px 14px; }
.menu-lateral-usuario strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: white; }
.menu-lateral-sair { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 9px; color: #cbd5e1; font-size: 14px; }
.menu-lateral-sair:hover { background: rgba(255,255,255,.08); color: white; }
.menu-lateral-toggle { display: none; }
.menu-lateral-overlay { display: none; }
body.com-menu-lateral .topbar { padding-left: 20px; }
body.com-menu-lateral.chat-page { width: auto; }

@media (max-width: 860px) {
    body.com-menu-lateral { padding-left: 0; }
    .menu-lateral { transform: translateX(-105%); transition: transform .2s ease; }
    .menu-lateral-toggle {
        display: block; position: fixed; top: 10px; left: 10px; z-index: 320;
        width: 38px; height: 36px; border: 0; border-radius: 8px;
        background: #111827; color: white; font-size: 21px; cursor: pointer;
        box-shadow: var(--shadow);
    }
    body.com-menu-lateral .topbar { padding-left: 58px; }
    .menu-lateral-overlay { position: fixed; inset: 0; z-index: 240; background: rgba(15,23,42,.48); }
    body.menu-lateral-aberto .menu-lateral { transform: translateX(0); }
    body.menu-lateral-aberto .menu-lateral-overlay { display: block; }
    body.menu-lateral-aberto .menu-lateral-toggle { left: 198px; }
}