/* Lobbi — painel de atendimento. Layout de mensageiro; identidade Lobbi (índigo + pêssego, Sora + Inter). */
:root {
  --green: #2E2C7A; --green-dark: #23215F; --green-badge: #2E2C7A; --accent: #FFB48A; --tint: #ECEBF8;
  --bg-app: #ECE6DC; --panel: #ffffff; --panel-head: #f0f2f5; --hover: #f5f6f6; --selected: #f0f2f5;
  --line: #e9edef; --text: #111b21; --text-2: #667781; --icon: #54656f;
  --chat-bg: #F4EFE7; --out: #E4E2F6; --in: #ffffff; --tick-read: #53bdeb;
  --chip-sys: #fff5c4; --chip-date: #ffffff; --danger: #ea0038; --warn: #c27a00; --warn-bg: #fff3d6;
  --link: #027eb5; --shadow: 0 1px .5px rgba(11, 20, 26, .13);
  --font: Inter, "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg-app); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--text-2); }
.small { font-size: 13px; }
.error { color: var(--danger); min-height: 1.2em; font-size: 14px; margin: 0; }
kbd { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; font-size: 12px; }
svg { width: 24px; height: 24px; fill: currentColor; flex: none; }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(var(--green-dark) 0 222px, var(--bg-app) 222px); }
.login-card { background: var(--panel); padding: 36px 40px; border-radius: 6px; width: 380px; display: grid; gap: 14px; box-shadow: 0 17px 50px rgba(11,20,26,.19); }
.login-logo { width: 52px; height: 52px; border-radius: 15px; background: var(--green); color: #fff; display: grid; place-items: center; }
.login-logo svg { width: 34px; height: 34px; }
.brand-lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.brand-word { font-family: Sora, Inter, sans-serif; font-weight: 700; letter-spacing: -0.03em; color: var(--green); }
.brand-lockup .brand-word { font-size: 34px; line-height: 1; }
.login-card h1 { margin: 0; font-size: 22px; font-weight: 600; font-family: Sora, Inter, sans-serif; }
.login-card label { display: grid; gap: 6px; font-size: 14px; color: var(--text-2); }
.login-card input { padding: 10px 12px; border: 1px solid #d1d7db; border-radius: 6px; font: inherit; color: var(--text); }
.login-card input:focus { outline: 2px solid var(--green); border-color: transparent; }
.btn-green { background: var(--green); color: #fff; border: 0; border-radius: 24px; padding: 10px 24px; cursor: pointer; font-weight: 500; }
.btn-green:hover { background: var(--green-dark); }
.btn-green:disabled { opacity: .5; cursor: default; }
.btn-line { background: #fff; color: var(--green-dark); border: 1px solid #d1d7db; border-radius: 24px; padding: 6px 16px; cursor: pointer; font-size: 14px; }
.btn-line:hover { background: var(--hover); }
.btn-danger { color: var(--danger); }

/* ---------- Estrutura ---------- */
.wa { display: grid; grid-template-columns: minmax(340px, 30%) 1fr; height: 100vh; max-width: 1700px; margin: 0 auto; background: var(--panel); box-shadow: 0 6px 18px rgba(11,20,26,.05); }
.wa.with-drawer { grid-template-columns: minmax(340px, 30%) 1fr minmax(320px, 28%); }
@media (min-width: 1441px) { .wa { height: calc(100vh - 38px); margin-top: 19px; } body { background: linear-gradient(var(--green-dark) 0 127px, var(--bg-app) 127px); } }

.icon-btn { background: none; border: 0; padding: 8px; border-radius: 50%; color: var(--icon); cursor: pointer; display: grid; place-items: center; }
.icon-btn:hover { background: rgba(11,20,26,.06); }
.icon-btn.active { background: rgba(11,20,26,.1); }
.icon-btn:disabled { opacity: .35; cursor: default; background: none; }

.avatar { width: 49px; height: 49px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 500; font-size: 18px; flex: none; background: #dfe5e7; user-select: none; }
.avatar.sm { width: 40px; height: 40px; font-size: 15px; }
.avatar.lg { width: 200px; height: 200px; font-size: 64px; }

/* ---------- Coluna esquerda ---------- */
.side { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-width: 0; min-height: 0; }
.side-head { height: 59px; padding: 10px 16px; background: var(--panel-head); display: flex; align-items: center; gap: 12px; }
.side-title { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.side-title strong { font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mode { font-size: 11px; color: var(--warn); }
.icons { display: flex; gap: 2px; }
.menu-wrap { position: relative; }
.dropdown { position: absolute; right: 0; top: 44px; background: #fff; border-radius: 3px; box-shadow: 0 2px 5px rgba(11,20,26,.26), 0 2px 10px rgba(11,20,26,.16); padding: 9px 0; z-index: 30; min-width: 200px; }
.dropdown button { display: block; width: 100%; text-align: left; padding: 11px 24px; background: none; border: 0; cursor: pointer; font-size: 14.5px; }
.dropdown button:hover { background: var(--hover); }

.search-box { margin: 7px 12px; background: var(--panel-head); border-radius: 8px; display: flex; align-items: center; padding: 0 12px; gap: 14px; color: var(--icon); }
.search-box svg { width: 20px; height: 20px; }
.search-box input { flex: 1; border: 0; background: none; padding: 9px 0; font: inherit; font-size: 15px; outline: none; color: var(--text); }
.chips { display: flex; gap: 8px; padding: 4px 12px 10px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.chips button { border: 0; background: var(--panel-head); color: var(--text-2); border-radius: 18px; padding: 6px 12px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.chips button:hover { background: #e9edef; }
.chips button.active { background: var(--tint); color: var(--green-dark); }
/* Computador (mouse): os filtros quebram em linhas em vez de rolar de lado */
@media (hover: hover) and (pointer: fine) {
  .chips { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
}
.chips .count:not(:empty) { background: var(--green-badge); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 12px; margin-left: 4px; }

.conv-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.conv-list li { display: flex; align-items: center; gap: 13px; padding: 0 0 0 13px; cursor: pointer; height: 72px; }
.conv-list li:hover { background: var(--hover); }
.conv-list li.active { background: var(--selected); }
.conv-list .body { flex: 1; min-width: 0; height: 100%; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; padding-right: 15px; gap: 2px; }
.conv-list .row { display: flex; align-items: center; gap: 6px; }
.conv-list .name { flex: 1; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-list .time { font-size: 12px; color: var(--text-2); }
.conv-list li.unread .time { color: var(--green-badge); }
.conv-list .preview { flex: 1; font-size: 14px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 3px; }
.conv-list .preview .ticks svg { width: 18px; height: 18px; }
.conv-list .badge { background: var(--green-badge); color: #fff; border-radius: 12px; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.conv-list .empty { justify-content: center; color: var(--text-2); font-size: 14px; cursor: default; }
.conv-list .empty:hover { background: none; }
.label { font-size: 11px; border-radius: 4px; padding: 1px 6px; white-space: nowrap; font-weight: 500; }
.label.waiting_human { background: var(--warn-bg); color: var(--warn); }
.label.human { background: var(--tint); color: var(--green-dark); }
.label.bot { background: #eef1ff; color: #4a56c4; }
.label.stale { background: #fdecea; color: #b3261e; }
.label.closed { background: #eceff1; color: var(--text-2); }

/* ---------- Centro ---------- */
.main { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--panel-head); }
.intro { margin: auto; text-align: center; max-width: 520px; color: var(--text-2); padding: 24px; }
.intro-art { width: 120px; height: 120px; margin: 0 auto 24px; border-radius: 32px; background: var(--green); color: #fff; display: grid; place-items: center; }
.intro-art svg { width: 72px; height: 72px; }
.intro-art svg { width: 56px; height: 56px; }
.intro h2 { font-weight: 300; font-size: 32px; color: #41525d; margin: 0 0 12px; }
.intro p { line-height: 1.5; font-size: 14px; }
.main::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 6px; background: var(--accent); }
.main:has(.chat:not(.hidden))::after { display: none; }

.chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-head { height: 59px; padding: 10px 16px; background: var(--panel-head); display: flex; align-items: center; gap: 15px; border-left: 1px solid var(--line); flex: none; }
.chat-head .who { flex: 1; min-width: 0; cursor: pointer; display: grid; line-height: 1.25; }
.chat-head .who strong { font-weight: 400; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .who span { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .actions { display: flex; align-items: center; gap: 6px; }
.back { display: none; }

.banner { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--warn-bg); color: #6b4a00; font-size: 13.5px; border-bottom: 1px solid #f3e1b0; }
.banner b { font-weight: 600; }

.messages {
  flex: 1; overflow-y: auto; padding: 12px 7% 8px; position: relative;
  background-color: var(--chat-bg);
  /* textura própria, discreta */
  background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1.2px), radial-gradient(rgba(0,0,0,.025) 1px, transparent 1.2px);
  background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px;
}
.day { display: flex; justify-content: center; margin: 12px 0 10px; position: sticky; top: 4px; z-index: 2; }
.day span { background: var(--chip-date); color: #54656f; font-size: 12.5px; padding: 5px 12px; border-radius: 7.5px; box-shadow: var(--shadow); text-transform: uppercase; }
.sys { display: flex; justify-content: center; margin: 8px 0; }
.sys span { background: var(--chip-sys); color: #54656f; font-size: 12.5px; padding: 5px 12px; border-radius: 7.5px; box-shadow: var(--shadow); text-align: center; max-width: 80%; }
.unread-sep { text-align: center; margin: 10px -7%; background: rgba(255,255,255,.55); padding: 5px; font-size: 12.5px; color: #54656f; text-transform: uppercase; }

.m-row { display: flex; margin-bottom: 2px; position: relative; }
.m-row.first { margin-top: 10px; }
.m-row.out { justify-content: flex-end; }
.bubble { position: relative; max-width: min(65%, 560px); padding: 6px 7px 8px 9px; border-radius: 7.5px; background: var(--in); box-shadow: var(--shadow); font-size: 14.2px; line-height: 19px; word-wrap: break-word; overflow-wrap: anywhere; }
.out .bubble { background: var(--out); }
.m-row.first.in .bubble { border-top-left-radius: 0; }
.m-row.first.out .bubble { border-top-right-radius: 0; }
.m-row.first.in .bubble::before, .m-row.first.out .bubble::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; }
.m-row.first.in .bubble::before { left: -8px; background: var(--in); clip-path: polygon(100% 0, 0 0, 100% 100%); }
.m-row.first.out .bubble::before { right: -8px; background: var(--out); clip-path: polygon(0 0, 100% 0, 0 100%); }
.bubble.failed { box-shadow: 0 0 0 1px var(--danger); }
.sender { font-size: 12.8px; font-weight: 500; margin-bottom: 2px; }
.sender.bot { color: #6b5bd2; }
.sender.agent { color: #1f9c6b; }
.text { white-space: pre-wrap; }
.text a, .bubble a.link { color: var(--link); }
.text code { font-family: Consolas, monospace; font-size: 13px; }
.meta { float: right; margin: 6px 0 -5px 10px; font-size: 11px; color: var(--text-2); display: inline-flex; align-items: center; gap: 3px; position: relative; top: 4px; white-space: nowrap; }
.meta .ticks svg { width: 16px; height: 16px; }
.ticks.read { color: var(--tick-read); }
.ticks.failed { color: var(--danger); }
.ticks.mock { color: #8696a0; }
.meta.over { position: absolute; right: 7px; bottom: 5px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); float: none; margin: 0; top: auto; }

.quote { background: rgba(11,20,26,.05); border-radius: 6px; border-left: 4px solid var(--accent); padding: 5px 8px; margin-bottom: 5px; font-size: 13px; cursor: pointer; display: grid; gap: 1px; }
.quote.from-guest { border-left-color: #53bdeb; }
.quote b { font-weight: 500; color: #06a57d; font-size: 12.8px; }
.quote.from-guest b { color: #2b9bd1; }
.quote span { color: var(--text-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: pre-wrap; }

.media-img { display: block; max-width: 330px; width: 100%; max-height: 360px; object-fit: cover; border-radius: 6px; cursor: zoom-in; margin: -3px -4px 3px -6px; width: calc(100% + 10px); }
.has-media-only { padding: 3px 3px 3px 3px; }
.sticker { background: none !important; box-shadow: none !important; padding: 0; }
.sticker img { width: 150px; height: 150px; object-fit: contain; }
.sticker::before { display: none; }
audio { width: 280px; max-width: 100%; height: 40px; margin: 2px 0; }
video { max-width: 330px; width: 100%; border-radius: 6px; }
.doc { display: flex; align-items: center; gap: 10px; background: rgba(11,20,26,.05); border-radius: 6px; padding: 10px; text-decoration: none; color: var(--text); min-width: 240px; margin-bottom: 2px; }
.doc .ico { width: 34px; height: 40px; border-radius: 4px; background: #e2564d; color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.doc .info { flex: 1; min-width: 0; display: grid; }
.doc .info b { font-weight: 400; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc .info span { font-size: 12px; color: var(--text-2); }

.wa-buttons { display: grid; gap: 0; margin: 6px -7px -8px -9px; }
.wa-buttons > * { border-top: 1px solid rgba(11,20,26,.08); padding: 9px; text-align: center; color: var(--link); font-size: 14px; display: flex; justify-content: center; align-items: center; gap: 6px; text-decoration: none; background: none; border-left: 0; border-right: 0; border-bottom: 0; cursor: default; }
.wa-buttons > a, .wa-buttons > button.list-open { cursor: pointer; }
.wa-buttons svg { width: 18px; height: 18px; }

.reaction { position: absolute; bottom: -14px; background: #fff; border-radius: 12px; padding: 1px 5px; font-size: 14px; box-shadow: 0 1px 3px rgba(11,20,26,.2); z-index: 1; }
.in .reaction { left: 8px; }
.out .reaction { right: 8px; }
.m-row.reacted { margin-bottom: 18px; }

.m-tools { position: absolute; top: 50%; transform: translateY(-50%); display: none; gap: 4px; z-index: 3; padding: 0 8px; }
.in .m-tools { left: 100%; }
.out .m-tools { right: 100%; flex-direction: row-reverse; }
.m-row:hover .m-tools { display: flex; }
.m-tools button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); box-shadow: var(--shadow); cursor: pointer; color: var(--icon); display: grid; place-items: center; padding: 0; }
.m-tools svg { width: 18px; height: 18px; }
.m-row.flash .bubble { animation: flash 1.2s; }
@keyframes flash { 0%, 60% { box-shadow: 0 0 0 3px rgba(0,168,132,.5); } }

/* ---------- Rodapé ---------- */
.reply-bar { background: var(--panel-head); padding: 8px 16px 0; display: flex; align-items: center; gap: 10px; }
.reply-bar .quote { flex: 1; margin: 0; background: rgba(11,20,26,.06); cursor: default; }
.composer { background: var(--panel-head); padding: 5px 16px; display: flex; align-items: flex-end; gap: 8px; min-height: 62px; position: relative; flex: none; }
.composer .input { flex: 1; background: #fff; border-radius: 8px; padding: 9px 12px; margin: 5px 0; display: flex; }
.composer textarea { flex: 1; border: 0; outline: none; resize: none; font: inherit; font-size: 15px; line-height: 20px; max-height: 120px; height: 20px; padding: 0; color: var(--text); background: none; }
.composer .icon-btn { margin-bottom: 6px; }
.send { width: 42px; height: 42px; margin-bottom: 5px; border-radius: 50%; border: 0; background: var(--green); color: #fff; display: grid; place-items: center; cursor: pointer; }
.send:disabled { background: none; color: var(--icon); cursor: default; }
.locked { background: var(--panel-head); padding: 14px 20px; font-size: 14px; color: var(--text-2); display: flex; align-items: center; justify-content: center; gap: 14px; text-align: center; flex: none; min-height: 62px; }

.popup { position: absolute; bottom: 100%; left: 16px; right: 16px; background: #fff; border-radius: 8px; box-shadow: 0 -2px 12px rgba(11,20,26,.15); max-height: 300px; overflow-y: auto; z-index: 20; }
.popup .head { padding: 10px 16px; font-size: 13px; color: var(--text-2); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; }
.popup .qr { padding: 10px 16px; cursor: pointer; display: grid; gap: 2px; }
.popup .qr:hover, .popup .qr.sel { background: var(--hover); }
.popup .qr b { color: var(--green-dark); font-weight: 500; font-size: 14px; }
.popup .qr span { font-size: 13.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); padding: 8px; }
.emoji-grid button { border: 0; background: none; font-size: 24px; padding: 4px; cursor: pointer; border-radius: 6px; }
.emoji-grid button:hover { background: var(--hover); }
.attach-menu { position: absolute; bottom: 64px; left: 60px; background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(11,20,26,.2); padding: 8px; z-index: 20; }
.attach-menu button { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border: 0; background: none; cursor: pointer; width: 100%; border-radius: 8px; font-size: 14.5px; }
.attach-menu button:hover { background: var(--hover); }
.attach-menu .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.attach-menu .dot svg { width: 16px; height: 16px; }

.drop-hint { position: absolute; inset: 59px 0 0 0; background: rgba(240,242,245,.92); display: grid; place-items: center; font-size: 20px; color: var(--text-2); z-index: 40; border: 3px dashed var(--green); }

/* ---------- Dados do contato ---------- */
.drawer { border-left: 1px solid var(--line); background: var(--panel-head); display: flex; flex-direction: column; min-height: 0; }
.drawer-head { height: 59px; padding: 0 20px; display: flex; align-items: center; gap: 24px; background: var(--panel-head); flex: none; font-size: 16px; }
.drawer-body { overflow-y: auto; flex: 1; display: grid; gap: 10px; align-content: start; padding-bottom: 20px; }
.card { background: #fff; padding: 16px 28px; box-shadow: 0 1px 3px rgba(11,20,26,.08); }
.card.center { text-align: center; padding: 28px; display: grid; justify-items: center; gap: 4px; }
.card.center h3 { font-weight: 400; font-size: 22px; margin: 12px 0 0; }
.card h4 { margin: 0 0 12px; font-weight: 400; font-size: 14px; color: var(--text-2); }
.card dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: 14.5px; }
.card dt { color: var(--text-2); }
.card dd { margin: 0; }
.quote-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; display: grid; gap: 3px; font-size: 14px; }
.quote-card a { color: var(--link); font-size: 13px; text-decoration: none; }
.card .act { display: flex; align-items: center; gap: 18px; padding: 12px 0; border: 0; background: none; width: 100%; cursor: pointer; font-size: 15px; text-align: left; }
.card .act svg { color: var(--icon); }
.card .act.btn-danger svg { color: var(--danger); }

/* ---------- Modais ---------- */
.modal { position: fixed; inset: 0; background: rgba(255,255,255,.85); display: grid; place-items: center; z-index: 50; }
.modal-card { background: #fff; border-radius: 3px; box-shadow: 0 17px 50px rgba(11,20,26,.19), 0 12px 15px rgba(11,20,26,.24); width: min(560px, 92vw); max-height: 86vh; display: flex; flex-direction: column; }
.modal-card header { padding: 18px 24px; display: flex; align-items: center; gap: 18px; font-size: 18px; border-bottom: 1px solid var(--line); }
.modal-card .content { padding: 16px 24px; overflow-y: auto; display: grid; gap: 12px; }
.modal-card footer { padding: 14px 24px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--line); }
.modal-card input, .modal-card textarea, .modal-card select { width: 100%; padding: 9px 11px; border: 1px solid #d1d7db; border-radius: 6px; font: inherit; }
.modal-card textarea { min-height: 80px; resize: vertical; }
.qr-item { display: flex; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--line); padding: 10px 0; }
.qr-item div { flex: 1; display: grid; gap: 2px; font-size: 14px; }
.qr-item b { color: var(--green-dark); font-weight: 500; }
.list-rows .row { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.list-rows .row span { color: var(--text-2); font-size: 13.5px; }
.preview-media { display: grid; place-items: center; background: #e9edef; min-height: 240px; border-radius: 6px; }
.preview-media img { max-width: 100%; max-height: 50vh; }
.preview-media .doc { background: #fff; }

.lightbox { position: fixed; inset: 0; background: rgba(233,237,239,.97); display: grid; place-items: center; z-index: 60; }
.lightbox img { max-width: 92vw; max-height: 88vh; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.lightbox .close { position: absolute; top: 16px; right: 20px; }
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: #3b4a54; color: #fff; padding: 12px 20px; border-radius: 6px; font-size: 14px; z-index: 70; box-shadow: 0 4px 12px rgba(0,0,0,.2); max-width: 90vw; }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) { .wa.with-drawer { grid-template-columns: minmax(300px, 34%) 1fr; } .wa.with-drawer .drawer { position: fixed; right: 0; top: 0; bottom: 0; width: min(380px, 100vw); z-index: 45; box-shadow: -4px 0 18px rgba(0,0,0,.15); } }
@media (max-width: 760px) {
  .wa, .wa.with-drawer { grid-template-columns: 1fr; }
  .wa.chat-open .side { display: none; }
  .wa:not(.chat-open) .main { display: none; }
  .back { display: grid; }
  .messages { padding: 10px 12px; }
  .bubble { max-width: 85%; }
  .m-tools { display: none !important; }
}

/* Vários atendentes */
.list-tools { display: flex; align-items: center; gap: 8px; padding: 0 12px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.agent-filter { flex: 1; min-width: 160px; }
.sort-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; background: none; border: 1px solid #d1d7db; border-radius: 16px; padding: 5px 10px; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.sort-btn svg { fill: currentColor; }
.sort-btn:hover { background: var(--tint); color: var(--text); }
.agent-filter select { width: 100%; padding: 7px 10px; border: 1px solid #d1d7db; border-radius: 8px; font: inherit; font-size: 14px; background: #fff; color: var(--text); }
.team-row { display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); padding: 10px 0; }
.team-row .info { flex: 1; display: grid; gap: 2px; font-size: 14px; min-width: 0; }
.team-row .info b { color: var(--text); font-weight: 500; }
.team-row.off { opacity: .55; }
.team-row .btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.team-row .btns button { font-size: 12px; padding: 4px 8px; }
.pick-list { display: grid; gap: 4px; }
.pick-list button { display: flex; gap: 12px; align-items: center; border: 0; background: none; padding: 8px; border-radius: 8px; cursor: pointer; font: inherit; text-align: left; }
.pick-list button:hover { background: var(--hover); }
.modal-card h5 { margin: 14px 0 0; font-size: 14px; font-weight: 500; color: var(--text-2); }

/* Canal do contato (Messenger / Instagram) */
.av-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.ch-badge { position: absolute; right: -2px; bottom: -2px; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 9px;
  border: 2px solid #fff; color: #fff; font: 700 9px/14px system-ui, sans-serif; text-align: center; }
.ch-messenger { background: #0866ff; font-size: 11px; }
.ch-booking { background: #003580; font-size: 10px; }
.ch-webchat { background: #FFB48A; color: #23215F; font-size: 10px; }
.ch-instagram { background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); }

/* Multi-hotel */
#hotelName.switchable { cursor: pointer; }
#hotelName.switchable::after { content: ' ▾'; font-size: 11px; color: var(--text-2); }
.team-row .info span { display: block; }
.modal-card .content label { display: block; margin-top: 8px; }
.intro h2.brand-word { font-weight: 700; font-size: 40px; color: var(--green); }
.legal-links { margin: 0; text-align: center; }
.legal-links a { color: var(--text-2); }

/* Canais */
.channel-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.channel-row .info { flex: 1; min-width: 180px; display: grid; gap: 2px; }
.channel-row .info b { font-weight: 500; color: var(--text); }
.channel-row .btns { display: flex; gap: 6px; }
.ch-icons { display: flex; gap: 4px; }
.ch-tile { width: 32px; height: 32px; border-radius: 9px; color: #fff; display: grid; place-items: center; font: 700 13px/1 system-ui, sans-serif; }
.ch-state { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: #F1EFEA; color: var(--text-2); }
.ch-state.on { background: var(--tint); color: var(--green); font-weight: 600; }
#metaArea:not(:empty), #bookingArea { padding: 4px 0 8px; }

/* Indicadores */
.modal-card.wide { width: min(1080px, 96vw); max-height: 92vh; }
.rpt { gap: 16px; background: #FBFAF8; }
.rpt-filters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rpt-filters .chips { padding: 0; }
.rpt-filters select { padding: 6px 8px; border: 1px solid #d1d7db; border-radius: 8px; font: inherit; background: #fff; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 4px; }
.kpi-label { font-size: 13px; color: var(--text-2); }
.kpi-value { font-family: Sora, Inter, sans-serif; font-size: 28px; font-weight: 600; color: var(--text); line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 12px; color: var(--text-2); }
.rpt-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px; }
.rpt-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rpt-head h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.rpt-head .btn-line { margin-left: auto; padding: 4px 10px; font-size: 12px; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-2); }
.legend i, .heat-scale i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.rpt-svg { width: 100%; height: auto; display: block; }
.rpt-svg .grid { stroke: #ECE9E3; stroke-width: 1; }
.rpt-svg .axis { stroke: #CFCAC0; stroke-width: 1; }
.rpt-svg .tick { font-size: 11px; fill: var(--text-2); font-variant-numeric: tabular-nums; }
.rpt-svg .hit:hover { fill: rgba(46,44,122,.06); }
.rpt-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hbars { display: grid; gap: 10px; }
.hbar { display: grid; grid-template-columns: 90px 1fr 40px; align-items: center; gap: 10px; font-size: 13px; }
.hbar-label { color: var(--text); }
.hbar-track { height: 12px; background: #F4F2EE; border-radius: 0 4px 4px 0; overflow: hidden; }
.hbar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 0; }
.hbar-val { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.rpt-table { overflow-x: auto; }
.rpt-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rpt-table th, .rpt-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid #EFECE6; }
.rpt-table th { color: var(--text-2); font-weight: 500; }
.rpt-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.heat { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.heat-h { font-size: 10px; color: var(--text-2); text-align: left; }
.heat-d { font-size: 11px; color: var(--text-2); }
.heat-c { height: 18px; border-radius: 3px; }
.heat-c:hover { outline: 2px solid var(--text); outline-offset: -1px; }
.heat-scale { display: flex; align-items: center; gap: 2px; justify-content: flex-end; }
.heat-scale i { margin: 0 1px; }
.rpt-tip { position: fixed; z-index: 1000; background: #1D1D24; color: #fff; font-size: 12px; padding: 6px 9px; border-radius: 6px; pointer-events: none; max-width: 280px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
@media (max-width: 760px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rpt-two { grid-template-columns: 1fr; } }

/* Modelos do WhatsApp */
.tpl { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); text-align: left; }
.tpl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tpl-head b { font-weight: 500; color: var(--text); }
.tpl-bubble { background: var(--out); border-radius: 8px; padding: 10px 12px; font-size: 14px; line-height: 1.45; color: var(--text); max-width: 460px; display: grid; gap: 8px; }
.tpl-btn { display: block; text-align: center; background: #fff; border-radius: 6px; padding: 6px; color: var(--green); font-weight: 500; font-size: 13px; }
.tpl-pick { background: none; border: 1px solid var(--line); border-radius: 10px; padding: 12px; cursor: pointer; font: inherit; }
.tpl-pick:hover { border-color: var(--green); background: var(--tint); }
.ch-state.off { background: #FDECEA; color: #B3261E; }

.tpl-vars { display: flex; gap: 6px; flex-wrap: wrap; }
.small-btn { padding: 4px 10px; font-size: 12px; }
.small-btn.danger { border-color: #B3261E; color: #B3261E; }
.ch-state.warn { background: #FFF4D6; color: #8A5A00; }

/* Personalização */
.hotel-logo { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--line); flex-shrink: 0; }
.brand-row { display: flex; gap: 16px; align-items: center; }
.logo-box { width: 96px; height: 96px; border: 1px dashed #c9c9d6; border-radius: 12px; display: grid; place-items: center; background: #fff; overflow: hidden; }
.logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.chat-prev { width: 300px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #F6F6FA; position: relative; padding-bottom: 56px; }
.cp-head { display: flex; gap: 10px; align-items: center; color: #fff; padding: 12px; }
.cp-head b { display: block; font-weight: 600; } .cp-head span { font-size: 12px; opacity: .85; }
.cp-av { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #23215F; display: grid; place-items: center; font-weight: 700; overflow: hidden; flex-shrink: 0; }
.cp-av img { width: 100%; height: 100%; object-fit: contain; }
.cp-body { padding: 12px; } .cp-bubble { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; font-size: 13px; max-width: 85%; }
.cp-btn { position: absolute; right: 10px; bottom: 10px; color: #fff; border-radius: 20px; padding: 8px 14px; font-size: 13px; font-weight: 600; }

.adm-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.adm-chip { font-size: 12px; background: var(--panel-head); border-radius: 12px; padding: 3px 10px; display: inline-flex; gap: 6px; align-items: center; }
.link-btn { background: none; border: 0; padding: 0; color: #B3261E; font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }

/* ---------- Painel da plataforma (dona) ---------- */
.dash { min-height: 100vh; background: #FBFAF8; }
.dash-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 12px 24px; background: var(--green-dark); color: #fff; }
.dash-brand { display: flex; align-items: center; gap: 12px; }
.dash-brand .brand-word { color: #fff; font-size: 22px; display: block; line-height: 1.1; }
.dash-sub { display: block; font-size: 12px; opacity: .8; }
.login-logo.sm { width: 38px; height: 38px; border-radius: 11px; background: var(--green); }
.login-logo.sm svg { width: 26px; height: 26px; }
.dash-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.dash-actions .btn-green { background: var(--accent); color: var(--green-dark); }
.dash-actions .btn-green:hover { background: #ffc6a5; }
.dash-actions .icon-btn { color: #fff; }
.dash-actions .icon-btn:hover { background: rgba(255,255,255,.12); }
.dash-filters { max-width: 1280px; margin: 0 auto; padding: 16px 24px 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dash-filters .chips { padding: 0; border: 0; }
.dash-filters select, .dash-filters input[type=date] { padding: 6px 8px; border: 1px solid #d1d7db; border-radius: 8px; font: inherit; font-size: 14px; background: #fff; }
.dash-body { max-width: 1280px; margin: 0 auto; padding: 16px 24px 40px; display: grid; }
.dash-sec { display: grid; gap: 12px; }
.dash-sec > h3 { margin: 6px 0 0; font-family: Sora, Inter, sans-serif; font-size: 17px; font-weight: 600; color: var(--green-dark); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dash-sec > h3 .muted { font-family: var(--font); font-size: 12px; font-weight: 400; }
.kpi-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi.neg .kpi-value { color: #B3261E; }
.kpi.note { background: #FFFBF3; }
.hsel { position: relative; }
.hsel-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #d1d7db; border-radius: 8px; background: #fff; cursor: pointer; font-size: 14px; }
.hsel-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(11,20,26,.14); padding: 8px; min-width: 240px; max-height: 320px; overflow-y: auto; display: grid; gap: 2px; }
.hsel-pop label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.hsel-pop label:hover { background: var(--hover); }
.hsel-pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.ch-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.ch-pill { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--tint); color: var(--green-dark); white-space: nowrap; }
.ch-pill.off { background: #F1EFEA; color: #9A968E; }
.lim { display: inline-flex; align-items: center; gap: 6px; }
.lim-bar { width: 56px; height: 6px; border-radius: 3px; background: #EEEAE3; overflow: hidden; display: inline-block; }
.lim-bar i { display: block; height: 100%; background: var(--green); }
.lim.warn .lim-bar i { background: #C27A00; } .lim.over .lim-bar i { background: #B3261E; }
.lim.warn, .lim.over { font-weight: 600; } .lim.over { color: #B3261E; } .lim.warn { color: #8A5A00; }
.rpt-table td .link-btn.go { color: var(--link); }
.neg-txt { color: #B3261E; }
.dash-note { margin: 0; font-size: 12px; color: var(--text-2); }
@media (max-width: 1000px) { .kpi-grid.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .dash-top { padding: 10px 14px; flex-wrap: wrap; } .dash-sub { display: none; }
  .dash-filters, .dash-body { padding-left: 14px; padding-right: 14px; }
  .kpi-grid.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dashSettings { display: none; }
}
.rpt-table td.num .ch-pills { justify-content: flex-end; }