html, body { height:100%; }
:root {
--chat-density: 0.7; /* 70% do tamanho atual (~30% mais compacto) */
--chat-avatar-size: calc(64px * var(--chat-density));
--chat-row-gap: calc(10px * var(--chat-density));
--chat-item-padding-y: calc(10px * var(--chat-density));
--chat-item-padding-x: calc(10px * var(--chat-density));
}
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; overflow:hidden; }
@keyframes spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }
body.mobile-shell header { padding: 10px 16px; background:#0b845d; color:#fff; display:flex; align-items:center; gap:12px; transition: background-color .2s ease; }
body.mobile-shell.wa-disconnected header { background:#9a4f00; }
main { display:grid; grid-template-columns: 450px 1fr; height: calc(100vh - 24px); }
#left { border-right: 1px solid #eee; display:flex; flex-direction:column; overflow:hidden; }
#leftHeader { padding:10px 12px; background:#0b845d; color:#fff; border-bottom:1px solid #086748; position:relative; }
body.wa-disconnected #leftHeader { background:#9a4f00; border-bottom-color:#7d3f00; }
.leftHeaderRow { position:relative; display:flex; align-items:center; justify-content:flex-end; min-height:26px; }
.leftHeaderRow strong { position:absolute; left:50%; transform:translateX(-50%); font-size:13px; letter-spacing:.05em; text-align:center; white-space:nowrap; }
#leftMenuBtn { border:0; background:transparent; color:#fff; cursor:pointer; font-size:22px; line-height:1; padding:2px 6px; border-radius:8px; }
#leftMenuBtn:hover { background:rgba(255,255,255,.14); }
#leftHeader #uploadIndicator { margin-top:6px; }
#leftHeader #userActions { position:absolute; right:10px; top:44px; min-width:170px; background:#fff; color:#1f2937; border:1px solid #d6dce8; border-radius:10px; padding:8px; box-shadow:0 10px 24px rgba(0,0,0,.18); z-index:30; flex-direction:column; }
#leftHeader #userActions > div, #leftHeader #userActions > span, #leftHeader #userActions > button { width:100%; }
#leftHeader #userActions button { width:100%; text-align:left; border:1px solid #d7deea; background:#f7f9ff; color:#24385f; border-radius:8px; padding:7px 9px; cursor:pointer; }
#leftHeader #userActions button:hover { background:#edf2ff; }
#leftHeader #currentUser { display:block; padding:2px 2px 6px; border-bottom:1px solid #edf0f6; margin-bottom:2px; }
#left.archived-mode #chats { background:#f3f4f6; }
#left.archived-mode #search { background:#f3f4f6; }
#left.archived-mode .chat .row { flex-direction: row-reverse; }
#contactTabs { display:flex; border-bottom:1px solid #eee; background:#fafafa; }
#contactTabs .tab { flex:1; padding:6px 8px; border:0; border-right:1px solid #eee; background:transparent; cursor:pointer; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:#555; }
#contactTabs .tab:last-child { border-right:0; }
#contactTabs .tab.active { background:#e6f2ff; font-weight:600; color:#274684; }
#search { padding: 7px; border-bottom:1px solid #eee; display:flex; flex-direction:column; align-items:stretch; gap:8px; background:#f5f5f5; }
.searchTopRow { display:flex; align-items:center; gap:8px; }
.searchInputWrap { position:relative; flex:1; min-width:0; display:flex; align-items:center; }
#contactBrowserBtn { flex:0 0 auto; border:1px solid #cfd2d6; background:#fff; color:#57606a; border-radius:999px; padding:6px 10px; cursor:pointer; font-size:10pt; font-weight:500; }
#contactBrowserBtn:hover { background:#f0f2f5; }
#openFilterWrap { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.openFilterOpt { position:relative; display:inline-flex; align-items:center; }
.openFilterOpt input[type="radio"] { position:absolute; inset:0; opacity:0; pointer-events:none; }
.openFilterOpt span { display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:0 12px; border:1px solid #c2c7cc; border-radius:999px; background:#fff; color:#57606a; font-size:10pt; font-weight:500; white-space:nowrap; cursor:pointer; transition:all .15s ease; }
.openFilterOpt:hover span { background:#f5f7f8; }
.openFilterOpt input[type="radio"]:checked + span { background:#d9fdd3; border-color:#8ecf9e; color:#1f5e2c; }
#filter { flex:1; min-width:0; width:100%; box-sizing:border-box; border:1px solid transparent; background:#e9edef; border-radius:999px; padding:8px 34px 8px 12px; font-size:10.5pt; color:#111b21; }
#filter::placeholder { color:#667781; }
#filter:focus { outline:none; border-color:#a8c9ff; background:#fff; }
#clearFilterBtn { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:22px; height:22px; border:1px solid #cfd7df; border-radius:50%; background:#e9edf1; color:#4b5a67; cursor:pointer; display:none; font-size:14px; font-weight:700; line-height:1; padding:0; align-items:center; justify-content:center; -webkit-text-fill-color:currentColor; }
#clearFilterBtn:hover { background:#dde3e9; color:#2e3b46; }
#chats { flex:1; overflow:auto; background:#fff; }
.chat { padding: var(--chat-item-padding-y) var(--chat-item-padding-x); cursor:pointer; border-bottom:1px solid #f0f0f0; position:relative; transition: box-shadow .18s ease; }
.chat:hover {
box-shadow: inset 0 0 0 1px #9abbe8;
border-radius: 10px;
}
.chat.active {
box-shadow: inset 0 0 0 2px #6a9fe3;
border-radius: 10px;
z-index: 1;
}
.chat.mine { background:#eff9ef; }
.chat.unread { background:#ffffff; }
.chat .badge { float:right; background:#09800d; color:#fff; border-radius:10px; font-size:10pt; padding:1px 6px; }
.chat .row { display:flex; align-items:center; gap:var(--chat-row-gap); }
.chat .avatar-wrap { position:relative; width:var(--chat-avatar-size); height:var(--chat-avatar-size); flex:0 0 var(--chat-avatar-size); }
.chat .avatar { width:var(--chat-avatar-size); height:var(--chat-avatar-size); border-radius:50%; overflow:hidden; background:#e6e6e6; display:flex; align-items:center; justify-content:center; color:#555; font-weight:600; flex:0 0 var(--chat-avatar-size); font-size:13px; }
.chat .avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.chat .avatar .ph { display:none; }
.chat .avatar.noimg img { display:none; }
.chat .avatar.noimg .ph { display:block; }
.chat .triage-pill { position:absolute; right:-5px; bottom:-1px; display:inline-flex; align-items:center; justify-content:center; min-width:28px; max-width:58px; padding:1px 5px; border-radius:999px; border:1px solid #f0bf64; background:#fff4d4; color:#805800; font-size:9px; font-weight:700; line-height:1.15; box-shadow:0 1px 3px rgba(0,0,0,.15); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat .triage-pill.awaiting { border-color:#e47a7a; background:#ffe7e7; color:#9f2f2f; }
.chat.triage-highlight { border-left:4px solid #f0bf64; padding-left:5px; }
.chat .meta { flex:1; min-width:0; font-size:10pt; }
.chat .meta-head { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.chat .meta-head strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; font-size:11pt; line-height:1.2; }
.chat .meta-right { display:flex; align-items:center; gap:6px; margin-left:auto; flex-shrink:0; }
.chat .phone-right { font-size:10pt; white-space:nowrap; }
.chat .preview-line { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.25; margin-top:2px; font-size:10pt; }
.chat .operator-line { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.25; margin-top:2px; font-size:10pt; }
.chat .operator-row { margin-top:3px; display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.chat .operator-row .operator-line { flex:1; min-width:0; margin-top:0; }
.chat .operator-spacer { flex:1; min-width:0; }
.chat .lock-state { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1px solid #b8c2cf; background:#f3f5f8; line-height:1; }
.chat .lock-state svg { width:13px; height:13px; display:block; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.chat .lock-state.unlocked { color:#2f7a35; border-color:#a9cfad; background:#eaf8ec; }
.chat .lock-state.locked { color:#8a5a00; border-color:#d9be8b; background:#fff4e1; }
.chat .unlock-chat-btn { border:1px solid #9fb4d8; background:#f3f7ff; color:#214ea0; border-radius:999px; padding:1px 8px; font-size:9pt; font-weight:600; cursor:pointer; }
.chat .unlock-chat-btn:hover { background:#e7f0ff; }
#right { display:flex; flex-direction:column; position: relative; overflow:hidden; }
#chatHeader { padding:6px 12px; border-bottom:1px solid #eee; background:#fff; display:flex; flex-direction:column; gap:4px; }
#chatHeader .chatHeaderTop { display:flex; align-items:center; justify-content:space-between; gap:10px; }
#chatHeader .chatHeaderTitleLine { display:flex; align-items:center; gap:8px; min-width:0; }
#chatHeader #chatTitle { font-size:10pt; font-weight:700; min-width:0; }
#chatHeader #areaBadge { margin:0; background:transparent; color:#0d36d9; border:0; padding:0; border-radius:0; font-size:10pt; font-weight:700; }
#chatHeader #areaBadge::before { content:'| Setor '; color:#222; font-weight:600; }
#chatHeader .chatHeaderActions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
#chatHeader .chatHeaderBottom { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#chatHeader #areaTimer { font-size:10pt; font-weight:700; color:#0d36d9; }
#chatHeader #areaTimer::before { content:' | Tempo: '; color:#222; font-weight:600; }
/* Messages as a simple grid to avoid overlap across browsers */
#messages { flex:1; overflow:auto; padding: 12px; display:grid; grid-auto-flow: row; grid-auto-rows: max-content; row-gap: 8px; align-content: start;
background-color:#f5f5f5;
background-image: url('/assets/images/chat-background.png');
background-repeat: repeat;
background-size: 400px auto; /* ajuste conforme desejar */
background-attachment: fixed;
background-position: center;
}
.msg { display:inline-block; max-width:70%; padding:8px 10px; border-radius:8px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; box-sizing: border-box; font-size:10pt; }
.msg small { font-size:10pt; }
.msg .msg-meta { margin-top:4px; display:flex; align-items:center; justify-content:flex-end; gap:4px; font-size:8.5pt; line-height:1; opacity:.85; }
.msg .msg-time { color:#667781; }
.msg .msg-status { color:#667781; letter-spacing:.02em; }
.msg .msg-status.read { color:#53bdeb; }
.msg .msg-forwarded { font-size:8.5pt; color:#667781; font-style:italic; margin-bottom:3px; }
.msg .msg-download-link { display:inline-block; margin-top:6px; font-size:9pt; color:#0d36d9; text-decoration:none; }
.msg .msg-download-link:hover { text-decoration:underline; }
.msg.msg-contact-host { padding:0; overflow:hidden; min-width:240px; }
.shared-contact-card { display:flex; flex-direction:column; background:transparent; }
.shared-contact-top { display:flex; align-items:center; gap:8px; padding:8px 10px; }
.shared-contact-avatar { width:32px; height:32px; border-radius:50%; background:#d8dfe6; color:#425466; display:flex; align-items:center; justify-content:center; font-weight:700; position:relative; overflow:hidden; flex:0 0 32px; }
.shared-contact-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.shared-contact-ph { font-size:8.5pt; line-height:1; }
.shared-contact-meta { min-width:0; display:flex; flex-direction:column; gap:1px; }
.shared-contact-name { font-size:11pt; line-height:1.2; font-weight:600; color:#102126; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shared-contact-phone { font-size:9pt; line-height:1.2; color:#4f5f65; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shared-contact-actions { border-top:1px solid rgba(0,0,0,.08); display:flex; }
.shared-contact-action { appearance:none; border:0; background:transparent; color:#0b845d; font-weight:600; padding:5px 8px; line-height:1.15; text-align:center; cursor:pointer; flex:1; font-size:9.8pt; }
.shared-contact-action:hover { background:rgba(11,132,93,.08); }
.quote { border-left:3px solid #9e9e9e; background: rgba(255,255,255,0.8); padding:6px 8px; margin:0 0 6px 0; border-radius:4px; font-size:10pt; color:#555; }
.me { background:#d9fdd3; justify-self:end; }
.other { background:#ffffff; justify-self:start; }
.operator { font-weight:600; color:#0015ff !important; background:transparent !important; }
#composer { padding:10px; border-top:1px solid #eee; background:#fff; display:flex; flex-direction:column; align-items:stretch; }
.reply-preview { display:flex; align-items:center; gap:8px; background:#f4f8f6; border-left:3px solid #0b845d; border-radius:8px; padding:6px 8px; margin-bottom:8px; }
.reply-preview-main { min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; }
.reply-preview-author { font-size:9pt; color:#0b845d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reply-preview-text { font-size:9pt; color:#3a4b55; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reply-preview-close { border:0; background:#e9eff0; color:#33414a; width:24px; height:24px; border-radius:50%; cursor:pointer; line-height:1; font-size:12px; padding:0; flex:0 0 24px; }
.reply-preview-close:hover { background:#dce5e8; }
#composer .composer-shell { display:flex; align-items:center; gap:2px; border:1px solid #d9d9d9; border-radius:999px; background:#f0f0f0; padding:4px 8px; width:100%; box-sizing:border-box; }
#composer .composer-icon { width:34px; height:34px; border:0; border-radius:50%; background:transparent; color:#1e1e1e; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:28px; line-height:1; padding:0; flex-shrink:0; }
#composer .composer-icon:hover { background:rgba(0,0,0,.06); }
#composer .attach-btn { font-size:20px; }
#composer .emoji-btn { font-size:20px; }
#composer .text-wrap { position:relative; flex:1; display:flex; min-width:0; align-items:center; }
#composer textarea { flex:1; padding:6px 40px 6px 4px; border:0; background:transparent; resize:none; min-height:30px; max-height:160px; overflow:auto; line-height:1.25; margin:0; }
#composer textarea:focus { outline:0; }
#composer #send.send-inline { position:absolute; right:4px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; font-size:14px; display:none; border:0; background:transparent; }
.icon-btn { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #ccc; border-radius:50%; background:#fff; cursor:pointer; font-size:16px; }
.icon-btn:hover { background:#f7f7f7; }
.emoji-picker { position:absolute; right:12px; bottom:72px; width:min(430px, calc(100vw - 24px)); height:min(360px, 56vh); background:#fff; border:1px solid #d9e1e8; border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.18); display:none; flex-direction:column; z-index:50; overflow:hidden; }
.emoji-picker.open { display:flex; }
.emoji-picker-head { padding:10px; border-bottom:1px solid #edf1f5; background:#fff; }
.emoji-picker-head input { width:100%; box-sizing:border-box; border:1px solid #d8dee5; border-radius:999px; padding:8px 12px; font-size:10pt; }
.emoji-picker-head input:focus { outline:none; border-color:#9ec2ff; }
.emoji-grid { flex:1; overflow:auto; padding:10px; display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:6px; align-content:start; }
.emoji-cell { border:0; background:transparent; border-radius:8px; min-height:34px; font-size:22px; line-height:1; cursor:pointer; }
.emoji-cell:hover { background:#f2f5f8; }
.emoji-empty { color:#667781; font-size:10pt; grid-column:1 / -1; text-align:center; padding-top:20px; }
/* QR overlay only visible when not [hidden] */
#qr { align-items:center; justify-content:center; height:100%; position:absolute; inset:0; background:#fff; display:none; }
#qr[hidden] { display: none !important; }
#qr img { width: 280px; height: 280px; }
small.muted { color:#666 ;}
#connBanner { display:none; background:#b00020; color:#fff; padding:8px 12px; text-align:center; font-weight:600; }
#connBanner small { font-weight:400; opacity:.9; }
#statusbar { height:24px; line-height:24px; padding:0 10px; background:#f0f2f5; color:#5f6b7a; border-top:1px solid #d9dee6; font-size:12px; text-align:center; }
.fakeModal { position:fixed; inset:0; z-index:1100; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:20px; }
.fakeModalCard { width:min(560px, 96vw); max-height:min(78vh, 760px); background:#fff; border-radius:10px; border:1px solid #d9e0ea; box-shadow:0 14px 40px rgba(0,0,0,.24); display:flex; flex-direction:column; overflow:hidden; }
.fakeModalHeader { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid #edf0f6; background:#f8faff; }
.fakeModalHeader button { border:1px solid #d0d7e4; background:#fff; border-radius:8px; padding:6px 10px; cursor:pointer; }
.fakeModalSearch { padding:10px 12px; border-bottom:1px solid #edf0f6; }
.fakeModalSearch input { width:100%; box-sizing:border-box; }
.fakeModalList { overflow:auto; padding:6px 0; }
.browserItem { width:100%; text-align:left; border:0; background:transparent; padding:10px 12px; border-bottom:1px solid #f2f3f7; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.browserItem:hover { background:#f6f9ff; }
.browserItem .main { min-width:0; display:flex; flex-direction:column; }
.browserItem .main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.browserItem .main small { color:#6b7280; }
.browserItem .phone { color:#374151; font-size:12px; white-space:nowrap; }
.browserEmpty { color:#6b7280; font-size:13px; padding:14px 12px; }