:root {
  --bg: #f4f5f8; --panel: #fff; --panel2: #f8f9fb; --line: #e3e6ec; --text: #1c2130; --muted: #6b7386;
  --accent: #4f46e5; --accent-soft: #eef0ff; --in: #fff; --out: #d9fdd3; --note: #fff6d6;
  --chat: #efeae2; --hdr: #f0f2f5; --wa: #25d366; --wa-ink: #00a884; --meta: #667781; --tick: #53bdeb; --bar: #f0f2f5; --field: #fff;
  --green: #16a34a; --amber: #d97706; --red: #dc2626;
}
[data-theme=dark] {
  --bg: #12141b; --panel: #1a1d27; --panel2: #20242f; --line: #2c313f; --text: #e8eaf1; --muted: #949cb0;
  --accent: #8b87ff; --accent-soft: #272a45; --in: #202c33; --out: #005c4b; --note: #45391a;
  --chat: #0b141a; --hdr: #202c33; --wa: #00a884; --wa-ink: #00a884; --meta: #8696a0; --tick: #53bdeb; --bar: #202c33; --field: #2a3942;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 6px 11px; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.ghost { background: none; border-color: transparent; color: var(--muted); }
button.ghost:hover { color: var(--text); background: var(--panel2); }
button.danger { color: var(--red); }
button.on { background: var(--note); border-color: var(--amber); color: var(--text); }
input, select, textarea { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; width: 100%; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
kbd { font: 11px ui-monospace, monospace; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; background: var(--panel2); color: var(--muted); white-space: nowrap; }
h2 { margin: 0 0 4px; font-size: 20px; } h3 { margin: 0 0 10px; font-size: 14px; }
.muted { color: var(--muted); } .small { font-size: 12px; }

#app { display: flex; height: 100vh; }
#nav { width: 196px; flex: none; background: var(--panel); border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; }
.brand { font-weight: 800; font-size: 17px; padding: 2px 8px 14px; } .brand span { display: block; font-weight: 500; font-size: 12px; color: var(--muted); }
#nav > button { text-align: left; border-color: transparent; background: none; padding: 8px 10px; display: flex; justify-content: space-between; align-items: center; }
#nav > button.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
#nav i { font-style: normal; font-size: 11px; font-weight: 700; background: var(--red); color: #fff; border-radius: 10px; padding: 0 6px; } #nav i:empty { display: none; }
.navfoot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.navfoot button { text-align: left; font-size: 12px; display: flex; justify-content: space-between; gap: 6px; }
.navfoot label { font-size: 11px; color: var(--muted); padding: 8px 4px 0; display: grid; gap: 4px; }

main { flex: 1; min-width: 0; display: flex; }
.view { flex: 1; min-width: 0; display: flex; } .view[hidden] { display: none; }
#v-other { display: block; overflow: auto; padding: 22px 26px; } #v-other[hidden] { display: none; }

/* lista */
.list { width: 320px; flex: none; border-right: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; }
.listhead { padding: 12px; display: grid; gap: 9px; border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; } .tabs button { flex: 1 1 auto; padding: 5px 6px; font-size: 12px; } .tabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.chips { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.chip { font-size: 11px; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel2); cursor: pointer; white-space: nowrap; }
.chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.chip.tag { color: #fff; border: 0; } .chip.off { opacity: .35; }
#convList { flex: 1; overflow: auto; }
.ci { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ci:hover { background: var(--panel2); } .ci.active { background: var(--accent-soft); }
.ci.prio { box-shadow: inset 3px 0 var(--red); }
.av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; position: relative; }
.chb { position: absolute; right: -5px; bottom: -4px; font-size: 8px; font-weight: 800; padding: 1px 3px; border-radius: 6px; color: #fff; border: 2px solid var(--panel); }
.cb { flex: 1; min-width: 0; }
.r1, .r2 { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.r1 b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tm { font-size: 11px; color: var(--muted); flex: none; }
.pv { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.un { background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 0 6px; flex: none; }
.r3 { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; align-items: center; }
.wait, .pill { white-space: nowrap; }
.wait { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 20px; color: #fff; }
.wait.green { background: var(--green); } .wait.amber { background: var(--amber); } .wait.red { background: var(--red); }
.pill { font-size: 11px; padding: 1px 7px; border-radius: 20px; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); }
.queue { margin: 10px 12px; display: flex; justify-content: space-between; align-items: center; } .queue kbd { background: #ffffff30; color: #fff; border-color: #ffffff50; }
.none { padding: 30px 16px; text-align: center; color: var(--muted); }

/* conversa */
.thread { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#thBox { flex: 1; min-height: 0; display: flex; flex-direction: column; } #thBox[hidden] { display: none; }
.empty { margin: auto; max-width: 340px; text-align: center; color: var(--muted); line-height: 1.8; } .empty[hidden] { display: none; }
#thHead { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
#thHead .who { flex: 1; min-width: 0; } #thHead .who b { font-size: 15px; } #thHead select { width: auto; }
#msgs { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.m { max-width: 72%; padding: 8px 11px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px #0000000f; }
.m.cliente { align-self: flex-start; background: var(--in); border-bottom-left-radius: 3px; }
.m.atendente { align-self: flex-end; background: var(--out); border-bottom-right-radius: 3px; }
.m.nota { align-self: flex-end; background: var(--note); border: 1px dashed var(--amber); }
.m.sistema { align-self: center; background: none; box-shadow: none; color: var(--muted); font-size: 12px; padding: 2px; }
.m small { display: block; text-align: right; color: var(--muted); font-size: 10.5px; margin-top: 2px; } .m .err { color: var(--red); }
#suggest { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 0 16px; } #suggest:not(:empty) { padding: 8px 16px; background: var(--accent-soft); border-top: 1px solid var(--line); font-size: 12.5px; }
#suggest button { padding: 2px 9px; font-size: 12px; }
.composer { position: relative; background: var(--panel); border-top: 1px solid var(--line); padding: 10px 14px; }
.composer.note { background: var(--note); }
.composer textarea { resize: none; border: 0; background: none; padding: 4px; min-height: 48px; } .composer textarea:focus { outline: none; }
.ctools { display: flex; align-items: center; gap: 10px; } .hint { flex: 1; font-size: 11.5px; color: var(--muted); text-align: right; }
#qrMenu { position: absolute; left: 14px; right: 14px; bottom: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 -8px 24px #00000026; max-height: 260px; overflow: auto; margin-bottom: 4px; }
#qrMenu[hidden] { display: none; }
.qr { padding: 8px 12px; cursor: pointer; display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: baseline; }
.qr.sel { background: var(--accent-soft); } .qr code { color: var(--accent); font-weight: 700; } .qr span { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* painel do cliente */
.side { width: 290px; flex: none; border-left: 1px solid var(--line); background: var(--panel); overflow: auto; padding: 14px; display: grid; gap: 14px; align-content: start; }
.side:empty { display: none; }
.side label { display: grid; gap: 3px; font-size: 11.5px; color: var(--muted); } .side textarea { min-height: 70px; resize: vertical; }
.side .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.badge-rec { background: var(--accent-soft); color: var(--accent); padding: 6px 9px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.trow { display: flex; gap: 6px; align-items: center; font-size: 12.5px; padding: 3px 0; } .trow input { width: auto; } .trow.late span { color: var(--red); }

/* outras telas */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.cols { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 16px; }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: 16px; }
.kpi b { display: block; font-size: 26px; } .kpi span { color: var(--muted); font-size: 12.5px; }
.bar { display: grid; grid-template-columns: 120px 1fr 34px; gap: 8px; align-items: center; font-size: 12.5px; margin: 5px 0; }
.bar div { height: 10px; border-radius: 6px; background: var(--panel2); overflow: hidden; } .bar div i { display: block; height: 100%; border-radius: 6px; background: var(--accent); }
.hours { display: flex; align-items: flex-end; gap: 3px; height: 90px; } .hours div { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; }
.hlabels { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.kanban { display: flex; gap: 12px; margin-top: 16px; align-items: flex-start; overflow-x: auto; padding-bottom: 12px; }
.kcol { width: 240px; flex: none; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-height: 240px; }
.kcol.over { border-color: var(--accent); background: var(--accent-soft); }
.kcol h3 { display: flex; justify-content: space-between; } .kcol h3 span { color: var(--muted); font-weight: 500; }
.kcard { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; margin-bottom: 8px; cursor: grab; }
.kcard b { display: block; } .kcard .r3 { margin-top: 5px; }
table { width: 100%; border-collapse: collapse; } td, th { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; } th { font-size: 12px; color: var(--muted); font-weight: 600; }
td code { color: var(--accent); font-weight: 700; }
.form { display: grid; gap: 10px; } .form label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); } .form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; align-items: end; }
.status-on { color: var(--green); font-weight: 600; } .status-off { color: var(--muted); }
ol.steps { margin: 6px 0 12px; padding-left: 18px; color: var(--muted); font-size: 12.5px; } .url { font: 12px ui-monospace, monospace; background: var(--panel2); padding: 3px 6px; border-radius: 5px; user-select: all; overflow-wrap: anywhere; }

#app[hidden] { display: none; }
#meBox { display: grid; gap: 4px; padding: 8px 4px 0; } #meBox button { font-size: 12px; }
#login { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; } #login[hidden] { display: none; }
#login form { width: min(380px, 100%); } #login a { color: var(--accent); }

/* modal e aviso */
#modal { position: fixed; inset: 0; background: #0000006b; display: grid; place-items: start center; padding-top: 12vh; z-index: 10; } #modal[hidden] { display: none; }
#modalBox { background: var(--panel); border-radius: 14px; width: min(560px, 92vw); max-height: 74vh; overflow: auto; padding: 18px; box-shadow: 0 20px 60px #00000055; }
.pitem { padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; } .pitem.sel { background: var(--accent-soft); }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 9px 16px; border-radius: 10px; z-index: 20; } #toast[hidden] { display: none; }
@media (max-width: 1100px) { .side { display: none; } #nav { width: 150px; } .list { width: 270px; } }

/* mídias, fotos de perfil, calendário */
.av img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.m a { color: var(--accent); overflow-wrap: anywhere; }
.m .quote { border-left: 3px solid var(--accent); background: #00000012; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mimg { display: block; height: 220px; max-width: 100%; min-width: 120px; object-fit: cover; border-radius: 8px; cursor: zoom-in; background: var(--panel2); }
.mstk { display: block; width: 120px; height: 120px; object-fit: contain; }
.mvid { display: block; height: 240px; max-width: 100%; border-radius: 8px; background: #000; }
.m audio { display: block; width: 260px; max-width: 100%; height: 40px; }
.mdoc { display: inline-block; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); text-decoration: none; }
.m.bare { background: none; box-shadow: none; padding: 2px; }
.m .gone { display: block; font-size: 12.5px; color: var(--muted); padding: 6px 0; }
.m.day { font-weight: 600; background: var(--panel2); border-radius: 20px; padding: 2px 12px; margin: 6px 0; }
.rrow { cursor: pointer; } .rrow:hover, .rrow.sel { background: var(--accent-soft); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.chead { font-size: 11.5px; color: var(--muted); text-align: center; padding: 2px; }
.cday { min-height: 84px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 6px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cday:hover { border-color: var(--accent); } .cday.off { border: 0; cursor: default; } .cday.today { background: var(--accent-soft); border-color: var(--accent); }
.cday b { font-size: 12px; } .cday span { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cday span.late { color: var(--red); font-weight: 600; } .cday span.done { color: var(--muted); text-decoration: line-through; }
.card[hidden] { display: none; }
.cday.pick { outline: 2px solid var(--accent); outline-offset: -2px; }
#agBadge { background: var(--accent) !important; }
.msgbox { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--panel2); }
.ck { display: flex !important; gap: 6px; align-items: center; font-size: 13px !important; color: var(--text) !important; } .ck input { width: auto; }
.cday span.cmsg { font-style: italic; color: var(--accent); } .cday span.cmsg.done { text-decoration: none; color: var(--muted); }

/* emojis, gravação e transcrição */
#emojiPop { position: absolute; left: 14px; bottom: 100%; width: min(380px, calc(100% - 28px)); max-height: 300px; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 -8px 24px #00000026; padding: 8px; margin-bottom: 4px; z-index: 3; }
#emojiPop[hidden] { display: none; }
.eg { font-size: 11px; color: var(--muted); margin: 6px 4px 2px; } .eset { display: flex; flex-wrap: wrap; }
.emo { border: 0; background: none; font-size: 22px; padding: 3px; width: 38px; height: 38px; border-radius: 8px; } .emo:hover { background: var(--panel2); }
#recBar { display: flex; align-items: center; gap: 10px; padding: 8px 4px; } #recBar[hidden] { display: none; }
#recBar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: pisca 1s infinite; }
@keyframes pisca { 50% { opacity: .2; } }
.composer.recording textarea, .composer.recording .ctools { display: none; }
.m .tr { font-size: 12.5px; margin-top: 4px; padding: 5px 8px; border-radius: 6px; background: #00000010; max-width: 340px; white-space: pre-wrap; }
.pill.seen { color: var(--amber); border-color: var(--amber); }

/* ===== conversa no padrão do WhatsApp ===== */
#thHead { background: var(--hdr); border-bottom: 0; }
#msgs { background: var(--chat); padding: 14px 6% 10px; gap: 0; }
#msgs .row { display: flex; flex-direction: column; }
.daysep, .sysmsg { display: flex; justify-content: center; margin: 10px 0 6px; }
.daysep span, .sysmsg span { background: var(--panel); color: var(--meta); font-size: 12px; padding: 5px 12px; border-radius: 8px; box-shadow: 0 1px .5px #0b141a21; }
.daysep span { font-weight: 500; letter-spacing: .02em; }
.m { position: relative; max-width: min(65%, 560px); padding: 6px 7px 8px 9px; border-radius: 8px; box-shadow: 0 1px .5px #0b141a21; margin-top: 10px; font-size: 14.2px; line-height: 19px; color: var(--text); white-space: normal; }
.m.cont { margin-top: 2px; }
.m.in { align-self: flex-start; background: var(--in); border-radius: 0 8px 8px 8px; }
.m.out { align-self: flex-end; background: var(--out); border-radius: 8px 0 8px 8px; }
.m.cont.in { border-radius: 8px; } .m.cont.out { border-radius: 8px; }
.m.in:not(.cont)::before, .m.out:not(.cont)::before { content: ''; position: absolute; top: 0; width: 0; height: 0; border-top: 0 solid transparent; border-bottom: 10px solid transparent; }
.m.in:not(.cont)::before { left: -8px; border-right: 8px solid var(--in); }
.m.out:not(.cont)::before { right: -8px; border-left: 8px solid var(--out); }
.m.nota { background: var(--note); border: 1px dashed var(--amber); } .m.nota::before { display: none; }
.m.bare { background: none !important; box-shadow: none; } .m.bare::before { display: none; }
.m .who { font-size: 12.8px; font-weight: 600; line-height: 20px; }
.m .tx { white-space: pre-wrap; overflow-wrap: anywhere; }
.m .meta { float: right; margin: 4px 0 -6px 10px; font-size: 11px; color: var(--meta); display: inline-flex; align-items: center; gap: 3px; position: relative; top: 4px; white-space: nowrap; }
.m .tk { display: inline-flex; color: var(--meta); } .m .tk.read { color: var(--tick); }
.m .err { clear: both; font-size: 12px; color: var(--red); padding-top: 4px; }
.m .quote { border-left: 4px solid var(--wa-ink); background: #0b141a0d; border-radius: 6px; color: var(--meta); }
.mimg, .mvid { border-radius: 6px; margin-bottom: 2px; }
/* player de áudio */
.aud { display: flex; align-items: center; gap: 8px; min-width: 250px; padding: 2px 0; }
.aplay { border: 0; background: none; color: var(--meta); padding: 0; width: 30px; height: 30px; display: grid; place-items: center; }
.aseek { flex: 1; accent-color: var(--wa-ink); height: 4px; padding: 0; border: 0; background: none; }
.atime { font-size: 11px; color: var(--meta); min-width: 30px; }
.aspeed { border: 0; background: #0b141a1a; color: var(--meta); font-size: 11px; font-weight: 700; border-radius: 12px; padding: 2px 7px; }
.m .tr { background: #0b141a0d; }
/* barra de digitação */
.composer { background: var(--bar); border-top: 0; padding: 6px 12px 8px; }
.composer.note { background: var(--note); }
.wa-bar, .wa-rec { display: flex; align-items: flex-end; gap: 6px; } .wa-bar[hidden], .wa-rec[hidden] { display: none; }
.icb { border: 0; background: none; color: var(--meta); width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; padding: 0; flex: none; }
.icb:hover { background: #0b141a12; color: var(--text); }
#composer { flex: 1; background: var(--field); border: 0; border-radius: 8px; padding: 10px 12px; min-height: 42px; max-height: 140px; resize: none; line-height: 20px; font-size: 15px; }
.composer.note #composer { background: #fffbe8; }
.sendb .i-send { display: none; } .sendb.has .i-send { display: grid; } .sendb.has .i-mic { display: none; }
.sendb.has { background: var(--wa-ink); color: #fff; } .sendb.has:hover { background: #008f72; color: #fff; }
.sendb span { display: grid; place-items: center; }
.wa-rec { align-items: center; justify-content: flex-end; padding: 2px 0; }
.wa-rec .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: pisca 1s infinite; }
.wa-rec.paused .dot { animation: none; background: var(--meta); }
#recTime { font-variant-numeric: tabular-nums; min-width: 40px; color: var(--text); font-weight: 500; }
.wave { display: flex; align-items: center; gap: 2px; height: 28px; width: min(240px, 40vw); }
.wave i { display: block; width: 3px; min-height: 3px; border-radius: 2px; background: var(--meta); }
#recPauseBtn .i-mic { display: none; } .wa-rec.paused #recPauseBtn .i-mic { display: grid; color: var(--red); } .wa-rec.paused #recPauseBtn .i-pause { display: none; }
#recPauseBtn span { display: grid; place-items: center; }
/* menu do + */
#plusMenu { position: absolute; left: 50px; bottom: 100%; margin-bottom: 6px; background: var(--panel); border-radius: 14px; box-shadow: 0 6px 24px #0b141a33; padding: 8px; display: grid; min-width: 250px; z-index: 4; }
#plusMenu[hidden] { display: none; }
#plusMenu button { display: flex; align-items: center; gap: 12px; border: 0; background: none; padding: 8px 10px; border-radius: 10px; text-align: left; font-size: 14.5px; }
#plusMenu button:hover, #plusMenu button.on { background: var(--panel2); }
#plusMenu .mi { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; }
/* emojis com abas */
#emojiPop { padding: 0; width: min(400px, calc(100% - 28px)); max-height: 340px; display: flex; flex-direction: column; overflow: hidden; }
#emojiPop[hidden] { display: none; }
.etabs { display: flex; justify-content: space-around; border-bottom: 1px solid var(--line); padding: 2px 4px; flex: none; }
.ebody { overflow: auto; padding: 4px 8px 8px; }
/* atalho "/" com profissionais */
.qrh { padding: 7px 12px 3px; font-size: 12px; font-weight: 700; color: var(--wa-ink); border-top: 1px solid var(--line); } .qrh span { color: var(--muted); font-weight: 500; }
.qr.sub { padding-left: 22px; } .qr.sub code { color: var(--wa-ink); }
/* lista de conversas */
.un { background: var(--wa); color: #fff; }
.ci.active { background: var(--panel2); }

/* marcar como não lida */
.un.dot { width: 12px; height: 12px; padding: 0; border-radius: 50%; }
#ctxMenu { position: fixed; z-index: 30; background: var(--panel); border-radius: 10px; box-shadow: 0 6px 24px #0b141a40; padding: 6px; display: grid; min-width: 260px; }
#ctxMenu[hidden] { display: none; }
#ctxMenu button { border: 0; background: none; text-align: left; padding: 9px 12px; border-radius: 8px; font-size: 14px; }
#ctxMenu button:hover { background: var(--panel2); }