/* MestreChat — estilos. Telemóvel primeiro; no computador, lista + conversa lado a lado. */

:root {
  --violet: #7C3AED; --violet-dark: #6D28D9; --violet-light: #8B5CF6; --violet-soft: #A78BFA; --lilac: #EEE9FF;
  --bubble-out: #D9CCFF; --bubble-in: #FFFFFF;   /* balão enviado: opção B (mais forte) escolhida pelo Cruz */
  --shadow-out: 0 1px 1.5px rgba(109, 40, 217, .22);
  --bg: #F8F7FA; --panel: #FFFFFF; --bar: #F8F7FA; --search: #FFFFFF; --page: #F8F7FA;   /* fundo muito claro das páginas gerais (sistema v2) */
  --text: #17151C; --text-2: #667078; --line: #ECE9F0; --icon: #5F676D; --field-line: #E6E3EB;
  --ok: #20C997; --err: #E53935; --read: #7C3AED; --delivered: #8696A0;
  --chat-bg: #EFEBFD url(../assets/fundo.chat.claro.webp) repeat; --chat-size: 480px;
  --shadow-bubble: 0 1px .5px rgba(11, 20, 26, .13);
  --sheet: #FFFFFF; --scrim: rgba(11, 20, 26, .45); --hover: #F5F3F8;
  --fs: 16px; --radius: 9px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bubble-out: #3A2F7A; --bubble-in: #202C33;
  --bg: #0E1114; --panel: #181C20; --bar: #181C20; --search: #20252A; --page: #0E1114;   /* escuro neutro: página · cartões · campos */
  --text: #E9EDEF; --text-2: #8E969E; --line: #262B31; --icon: #AAB2BA; --field-line: #30363D; --field: #1F2429;
  --read: #A994FF; --delivered: #8696A0; --lilac: #2A2450;
  --chat-bg: #0A141B url(../assets/fundo.chat.escuro.webp) repeat;
  --shadow-bubble: 0 1px .5px rgba(0, 0, 0, .3);
  --shadow-out: 0 1px .5px rgba(0, 0, 0, .3);
  --sheet: #1C2025; --scrim: rgba(0, 0, 0, .6); --hover: #22272C;
  color-scheme: dark;
}
:root[data-size="small"] { --fs: 14.5px; }
:root[data-size="large"] { --fs: 17.5px; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* App fixa: o ecrã não desliza para os lados nem para cima/baixo (só as listas fazem scroll) */
html, body { margin: 0; height: 100%; position: fixed; inset: 0; width: 100%; overflow: hidden; overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  /* Letra do próprio telemóvel (Roboto no Android, SF no iPhone): nítida e sólida, sem descarregar nada */
  font: 400 var(--fs)/1.4 Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--text); background: var(--bg);
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
svg.i { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) * { animation: none !important; transition: none !important; } }   /* 1.0.120: "Reduzir animações" desligado na app manda mais */

#app { height: 100%; height: 100dvh; height: var(--vvh, 100dvh); width: 100%; max-width: 100vw; overflow: hidden; overscroll-behavior: none; }
#app.vv-shift { transform: translateY(var(--vvt, 0px)); }   /* só quando o teclado desloca a página (iPhone); a 0 não há transform */
/* Zonas com scroll vertical: não arrastam o ecrã nem deslizam para os lados */
.auth, .list, .msgs, .sheet, .pk-grid, .pk-media { overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
/* Faixas com scroll horizontal: só deslizam por dentro */
.tabs, .pk-cats, .pv-strip { overscroll-behavior-x: contain; touch-action: pan-x; }

/* ---------- Botões e campos ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 26px; border-radius: 23px;
  background: var(--violet); color: #fff; font-weight: 600; letter-spacing: .1px;
}
@media (any-hover: hover) { :where(:root:not([data-input="touch"])) .btn:hover { background: var(--violet-dark); } }
.btn:disabled { opacity: .45; cursor: default; }
.btn.ghost { background: none; color: var(--violet); }
@media (any-hover: hover) { :where(:root:not([data-input="touch"])) .btn.ghost:hover { background: var(--lilac); } }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); }
@media (any-hover: hover) { :where(:root:not([data-input="touch"])) .icon-btn:hover { background: var(--hover); } }
.icon-btn:active { background: var(--hover); }   /* 1.0.171: no toque, o cinzento só enquanto o dedo carrega (antes vinha do :hover, que ficava preso) */
.field { display: block; margin: 0 0 18px; }
.field > span { display: block; font-size: .82em; color: var(--violet); font-weight: 600; margin-bottom: 4px; }
.input {
  width: 100%; padding: 10px 2px; border: 0; border-bottom: 2px solid var(--line);
  background: none; outline: none; font-size: 1.05em;
}
.input:focus { border-color: var(--violet); }
.err { color: var(--err); font-size: .88em; min-height: 1.3em; margin: 6px 0 0; }

/* ---------- Registo ---------- */
.auth { height: 100%; overflow-y: auto; background: var(--panel); display: flex; justify-content: center; }
.auth-inner { width: 100%; max-width: 420px; padding: 56px 28px 32px; display: flex; flex-direction: column; min-height: 100%; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 36px; }
.brand-mark { width: 44px; height: 44px; border-radius: 14px; background: var(--violet); display: grid; place-items: center; color: #fff; }
.brand-name { font-size: 1.45em; font-weight: 700; letter-spacing: -.3px; }
.auth h1 { font-size: 1.6em; line-height: 1.2; font-weight: 700; letter-spacing: -.4px; margin: 0 0 8px; }
.auth p.lead { color: var(--text-2); margin: 0 0 30px; }
.phone-row { display: flex; gap: 12px; align-items: flex-end; }
.country-btn {
  display: flex; align-items: center; gap: 6px; padding: 10px 2px; min-width: 96px;
  border-bottom: 2px solid var(--line); font-size: 1.05em;
}
.country-btn .flag { font-size: 1.25em; }
.auth .actions { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 8px; }
.otp {
  width: 100%; font-size: 2em; letter-spacing: .5em; text-align: center; padding: 10px 0 10px .5em;
  border: 0; border-bottom: 2px solid var(--line); background: none; outline: none; font-variant-numeric: tabular-nums;
}
.otp:focus { border-color: var(--violet); }
.link { color: var(--violet); font-weight: 600; }
.avatar-pick { width: 112px; height: 112px; border-radius: 50%; margin: 0 auto 26px; display: grid; place-items: center; background: var(--lilac); color: var(--violet); overflow: hidden; position: relative; }
.avatar-pick img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Estrutura principal ---------- */
.shell { display: flex; height: 100%; }
.side { width: 100%; display: flex; flex-direction: column; background: var(--page); min-width: 0; }
.chat { display: none; flex: 1; flex-direction: column; min-width: 0; background: var(--chat-bg); background-size: var(--chat-size); }
.shell.in-chat .side { display: none; }
.shell.in-chat .chat { display: flex; }
@media (min-width: 900px) {
  .side { width: 400px; flex: none; border-right: 1px solid var(--line); }
  .shell .chat, .shell.in-chat .chat { display: flex; }
  .shell.in-chat .side { display: flex; }
  .chat .back { display: none; }
}

/* ---------- Lista de conversas ---------- */
.top { display: flex; align-items: center; gap: 4px; padding: 10px 10px 6px 18px; min-height: 60px; }
.top .title { flex: 1; font-size: 1.75em; font-weight: 700; letter-spacing: -.5px; color: var(--violet-dark); }
:root[data-theme="dark"] .top .title { color: var(--text); }
.search { margin: 4px 14px 8px; display: flex; align-items: center; gap: 10px; background: var(--search); border-radius: 21px; padding: 0 14px; height: 40px; color: var(--text-2); }
.search input { flex: 1; border: 0; background: none; outline: none; min-width: 0; }
.tabs { display: flex; gap: 8px; padding: 2px 14px 8px; overflow-x: auto; scrollbar-width: none; }
.tab { padding: 6px 14px; border-radius: 16px; background: var(--search); color: var(--text-2); font-size: .9em; font-weight: 500; white-space: nowrap; }
.tab[aria-selected="true"] { background: var(--lilac); color: var(--violet-dark); font-weight: 600; }
:root[data-theme="dark"] .tab[aria-selected="true"] { color: #CFC4FF; }
.list { flex: 1; overflow-y: auto; }
.row { display: flex; align-items: center; gap: 14px; padding: 0 16px; height: 72px; width: 100%; text-align: left; }
.row[aria-current="true"] { background: var(--hover); }
@media (any-hover: hover) { :where(:root:not([data-input="touch"])) .row:hover { background: var(--hover); } }   /* 1.0.171: só com rato (no telemóvel o toque deixava o cinzento preso) */
.row-body { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--line); gap: 2px; }
.row:last-child .row-body { border-bottom-color: transparent; }
.row-line { display: flex; align-items: center; gap: 6px; }
.row-name { flex: 1; font-size: 1.0625em; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-time { font-size: .8125em; color: var(--text-2); }
.row.unread .row-time { color: var(--violet); font-weight: 600; }
.row-msg { flex: 1; color: var(--text-2); font-size: .9375em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 3px; min-width: 0; }
.row-msg .txt { overflow: hidden; text-overflow: ellipsis; }
.row-msg.typing { color: var(--ok); }
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--violet); color: #fff; font-size: .74em; font-weight: 700; display: grid; place-items: center; }
.row .meta-ic { width: 17px; height: 17px; color: var(--text-2); }
.empty { padding: 48px 32px; text-align: center; color: var(--text-2); }
.empty strong { display: block; color: var(--text); font-size: 1.05em; margin-bottom: 6px; }
.fab { position: absolute; right: 18px; bottom: 18px; width: 56px; height: 56px; border-radius: 16px; background: var(--violet); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(124, 58, 237, .35); }
@media (any-hover: hover) { :where(:root:not([data-input="touch"])) .fab:hover { background: var(--violet-dark); } }
.side { position: relative; }

/* ---------- Avatares ---------- */
.av { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; color: #fff; overflow: hidden; font-size: 1.05em; }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av.sm { width: 40px; height: 40px; font-size: .95em; }
.av.saved { background: var(--violet); }

/* ---------- Conversa ---------- */
.chat-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 60px; background: var(--bar); border-bottom: 1px solid var(--line); }
.chat-head .who { flex: 1; min-width: 0; text-align: left; }
.chat-head .name { font-size: 1.0625em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .status { font-size: .8125em; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .status.live { color: var(--ok); }
.msgs { flex: 1; overflow-y: auto; padding: 10px 6% 8px; display: flex; flex-direction: column; }
.day { align-self: center; margin: 10px 0 8px; padding: 5px 12px; border-radius: 8px; background: var(--panel); color: var(--text-2); font-size: .78em; font-weight: 500; box-shadow: var(--shadow-bubble); }
.m { display: flex; margin-top: 2px; }
.m.out { justify-content: flex-end; }
.m.first { margin-top: 8px; }
.b {
  position: relative; max-width: min(78%, 560px); padding: 6px 8px 7px 9px; border-radius: var(--radius);
  background: var(--bubble-in); box-shadow: var(--shadow-bubble); word-wrap: break-word; overflow-wrap: anywhere;
}
.m.out .b { background: var(--bubble-out); box-shadow: var(--shadow-out); }
.m.first.in .b { border-top-left-radius: 2px; }
.m.first.out .b { border-top-right-radius: 2px; }
.b .txt { white-space: pre-wrap; }
.b .txt a { color: var(--violet-dark); }
:root[data-theme="dark"] .b .txt a { color: #B9A8FF; }
.b .meta { float: right; margin: 6px -2px -4px 10px; font-size: .7em; color: var(--text-2); display: inline-flex; align-items: center; gap: 3px; position: relative; top: 4px; }
.b .meta .tick { width: 16px; height: 11px; }
.tick.read { color: var(--read); }
.tick.delivered, .tick.sent { color: var(--delivered); }
.b .deleted { color: var(--text-2); font-style: italic; display: inline-flex; gap: 5px; align-items: center; }
.b .fwd { font-size: .8em; color: var(--text-2); font-style: italic; margin-bottom: 2px; }
.quote { display: block; width: 100%; text-align: left; margin: -2px -4px 5px; padding: 6px 8px; border-left: 4px solid var(--violet); border-radius: 6px; background: rgba(124, 58, 237, .08); font-size: .88em; }
.quote b { display: block; color: var(--violet-dark); font-size: .92em; }
:root[data-theme="dark"] .quote b { color: #B9A8FF; }
.quote span { color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reacts { position: absolute; bottom: -14px; right: 8px; display: flex; gap: 2px; background: var(--panel); border-radius: 12px; padding: 1px 6px; font-size: .82em; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.m.has-react { margin-bottom: 14px; }
.media { display: block; margin: -3px -5px 4px; border-radius: 7px; overflow: hidden; background: var(--line); }
.media img { display: block; max-width: 100%; max-height: 360px; min-width: 160px; object-fit: cover; }
.doc { display: flex; align-items: center; gap: 10px; padding: 8px; margin: -2px -4px 4px; border-radius: 7px; background: rgba(0,0,0,.04); min-width: 220px; color: inherit; text-decoration: none; }
:root[data-theme="dark"] .doc { background: rgba(255,255,255,.05); }
.doc .ext { width: 34px; height: 40px; border-radius: 4px; background: var(--violet); color: #fff; font-size: .66em; font-weight: 700; display: grid; place-items: center; }
.doc .info { flex: 1; min-width: 0; }
.doc .info b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc .info small { color: var(--text-2); }
.voice { display: flex; align-items: center; gap: 8px; min-width: 230px; padding: 2px 0; }
.voice .play { width: 36px; height: 36px; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; flex: none; }
.voice .wave { flex: 1; height: 30px; display: flex; align-items: center; gap: 2px; cursor: pointer; }
.voice .wave i { flex: 1; min-height: 3px; border-radius: 2px; background: var(--text-2); opacity: .45; }
.voice .wave i.on { background: var(--violet); opacity: 1; }
.voice .speed { font-size: .72em; font-weight: 700; padding: 3px 6px; border-radius: 10px; background: rgba(0,0,0,.07); color: var(--text-2); min-width: 34px; }
.voice .dur { font-size: .72em; color: var(--text-2); min-width: 32px; }
.loc { display: block; margin: -3px -5px 4px; padding: 12px; border-radius: 7px; background: var(--lilac); color: var(--violet-dark); text-decoration: none; min-width: 220px; }
.loc b { display: block; color: var(--text); }
.contact-card { display: flex; align-items: center; gap: 10px; min-width: 210px; padding: 4px 0 6px; }

/* ---------- Escrever ---------- */
.composer { display: flex; align-items: flex-end; gap: 6px; padding: 6px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); }
.composer .box { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 2px; background: var(--panel); border-radius: 24px; padding: 3px 4px; min-height: 48px; box-shadow: var(--shadow-bubble); }
.composer textarea { flex: 1; min-width: 0; width: 100%; border: 0; outline: none; background: none; resize: none; padding: 11px 4px; max-height: 140px; line-height: 1.35; }
.composer .send { width: 48px; height: 48px; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; flex: none; }
@media (any-hover: hover) { :where(:root:not([data-input="touch"])) .composer .send:hover { background: var(--violet-dark); } }
.pre { display: flex; align-items: center; gap: 8px; margin: 0 8px; padding: 8px 10px; border-radius: 12px 12px 0 0; background: var(--panel); border-bottom: 1px solid var(--line); }
.pre .quote { margin: 0; flex: 1; }
.rec { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--panel); border-radius: 24px; padding: 0 8px 0 16px; min-height: 48px; }
.rec .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--err); animation: blink 1s infinite; }
.rec .time { font-variant-numeric: tabular-nums; flex: 1; }
@keyframes blink { 50% { opacity: .2; } }
.blocked-bar { padding: 16px; text-align: center; color: var(--text-2); background: var(--bar); }

/* ---------- Ecrã vazio (computador) ---------- */
.chat-empty { flex: 1; display: grid; place-items: center; text-align: center; color: var(--text-2); padding: 32px; background: var(--bg); }
.chat-empty .brand-mark { width: 72px; height: 72px; border-radius: 22px; margin: 0 auto 18px; }

/* ---------- Menus, folhas e avisos ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 50; display: flex; align-items: flex-end; justify-content: center; animation: fade .15s; }
@media (min-width: 700px) { .scrim { align-items: center; } }
.sheet { width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; background: var(--sheet); border-radius: 18px 18px 0 0; padding: 8px 0 14px; animation: up .2s ease-out; }
@media (min-width: 700px) { .sheet { border-radius: 14px; } }
.sheet h2 { font-size: 1.12em; margin: 10px 20px 12px; }
.sheet .hint { color: var(--text-2); font-size: .9em; margin: -6px 20px 12px; }
.sheet .pad { padding: 4px 20px 8px; }
.item { display: flex; align-items: center; gap: 16px; width: 100%; padding: 13px 20px; text-align: left; }
@media (any-hover: hover) { :where(:root:not([data-input="touch"])) .item:hover { background: var(--hover); } }
.item svg { color: var(--text-2); }
.item .grow { flex: 1; min-width: 0; }
.item small { display: block; color: var(--text-2); font-size: .82em; }
.item.danger, .item.danger svg { color: var(--err); }
.item .soon { font-size: .72em; color: var(--text-2); background: var(--search); padding: 2px 8px; border-radius: 10px; }
.quick-reacts { display: flex; justify-content: space-around; padding: 6px 12px 10px; border-bottom: 1px solid var(--line); }
.quick-reacts button { font-size: 1.7em; width: 46px; height: 46px; border-radius: 50%; }
.quick-reacts button.on { background: var(--lilac); } @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .quick-reacts button:hover { background: var(--lilac); } }
.attach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 8px; padding: 10px 14px 6px; }
.attach-grid button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .82em; color: var(--text-2); }
.attach-grid .ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.attach-grid button:disabled { opacity: .45; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { padding: 7px 14px; border-radius: 16px; background: var(--search); font-size: .9em; }
.seg button[aria-pressed="true"] { background: var(--violet); color: #fff; }
.setting { padding: 12px 20px; border-bottom: 1px solid var(--line); }
.setting > b { display: block; font-weight: 600; margin-bottom: 8px; }
.setting small { display: block; color: var(--text-2); margin-top: 6px; font-size: .82em; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.switch input { width: 44px; height: 24px; appearance: none; border-radius: 12px; background: var(--line); position: relative; cursor: pointer; flex: none; transition: background .15s; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked { background: var(--violet); }
.switch input:checked::after { transform: translateX(20px); }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: #202C33; color: #fff; padding: 10px 18px; border-radius: 20px; z-index: 80; font-size: .92em; max-width: 90vw; animation: fade .15s; }
.offline { background: #FFF4D6; color: #6B5300; font-size: .85em; padding: 8px 16px; text-align: center; }
:root[data-theme="dark"] .offline { background: #3A3218; color: #F1DE9C; }
.viewer { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.92); display: grid; place-items: center; }
.viewer img, .viewer video { max-width: 100%; max-height: 100%; }
.viewer .icon-btn { position: absolute; top: 12px; right: 12px; color: #fff; }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(24px); opacity: .6; } }

/* ---------- Emojis Fluent 3D ---------- */
.em {
  display: inline-block; width: 1.32em; height: 1.32em; vertical-align: -.3em; margin: 0 .03em;
  background-repeat: no-repeat; color: transparent; overflow: hidden; white-space: nowrap; font-style: normal;
  user-select: text;
}
.em.big { width: 48px; height: 48px; vertical-align: middle; }
.txt.jumbo { display: block; padding: 2px 2px 0; line-height: 1; }
.quick-reacts .em.big { width: 34px; height: 34px; }
.reacts .em { width: 1.15em; height: 1.15em; }

/* ---------- GIF e sticker ---------- */
.media.gif { position: relative; display: block; width: 260px; max-width: 100%; margin: -3px -5px 4px; border-radius: 7px; overflow: hidden; background: var(--line); }
.media.gif img, .media.gif video { display: block; width: 100%; height: 100%; object-fit: cover; }
.gif-tag { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: .68em; font-weight: 700; padding: 2px 6px; border-radius: 5px; }
.m.stk .b { background: none; box-shadow: none; padding: 0; }
.m.stk .b img { display: block; width: 160px; height: 160px; object-fit: contain; }
.m.stk .b .meta { float: none; display: flex; justify-content: flex-end; margin: 2px 0 0; top: 0; background: var(--panel); border-radius: 8px; padding: 1px 6px; width: max-content; margin-left: auto; }

/* ---------- Painel de emojis / GIF / stickers ---------- */
.picker { height: min(340px, 45dvh); display: flex; flex-direction: column; background: var(--panel); border-top: 1px solid var(--line); }
.pk-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pk-top { display: flex; align-items: center; gap: 6px; padding: 8px 10px 4px; }
.pk-search { flex: 1; margin: 0; height: 36px; }
.pk-tone { width: 36px; height: 36px; border-radius: 50%; font-size: 1.2em; }
@media (any-hover: hover) { :where(:root:not([data-input="touch"])) .pk-tone:hover { background: var(--hover); } }
.pk-cats { display: flex; gap: 2px; padding: 2px 8px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.pk-cats button { flex: none; width: 36px; height: 34px; border-radius: 8px; display: grid; place-items: center; font-size: 1.05em; }
@media (any-hover: hover) { :where(:root:not([data-input="touch"])) .pk-cats button:hover { background: var(--hover); } }
.pk-cats .em { width: 22px; height: 22px; vertical-align: 0; filter: grayscale(.35); }
.pk-grid { flex: 1; overflow-y: auto; padding: 0 6px 8px; overscroll-behavior: contain; }
.pk-grid h3 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 8px 6px 4px; font-size: .78em; font-weight: 600; color: var(--text-2); background: var(--panel); }
.pk-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
.pk-e { height: 44px; border-radius: 10px; display: grid; place-items: center; }
.pk-e:focus-visible { background: var(--hover); } @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .pk-e:hover { background: var(--hover); } }
.pk-e .em { width: 32px; height: 32px; vertical-align: 0; margin: 0; }
.pk-load { padding: 28px 16px; text-align: center; color: var(--text-2); font-size: .9em; }
.pk-media .pk-load { grid-column: 1 / -1; }   /* aviso a toda a largura (não numa coluna estreita) */
.pk-media { flex: 1; overflow-y: auto; padding: 4px 8px 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; align-content: start; overscroll-behavior: contain; }
.pk-media button { border-radius: 8px; overflow: hidden; background: var(--search); height: 96px; }
.pk-media button.sticker { background: none; }
.pk-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-media button.sticker img { object-fit: contain; }
.pk-attr { font-size: .68em; color: var(--text-2); text-align: right; padding: 2px 12px 4px; }
.pk-tabs { display: flex; justify-content: center; gap: 6px; padding: 6px; border-top: 1px solid var(--line); }
.pk-tabs button { padding: 5px 16px; border-radius: 14px; font-size: .88em; color: var(--text-2); }
.pk-tabs button[aria-pressed="true"] { background: var(--lilac); color: var(--violet-dark); font-weight: 600; }
:root[data-theme="dark"] .pk-tabs button[aria-pressed="true"] { color: #CFC4FF; }

/* ---------- Movimento (respeita "reduzir movimento" do telemóvel) ---------- */
.m { position: relative; }
.m.enter .b { animation: pop .22s cubic-bezier(.2, .9, .3, 1.2); }
.m.out.enter .b { transform-origin: bottom right; }
.m.in.enter .b { transform-origin: bottom left; }
@keyframes pop { from { transform: scale(.85) translateY(6px); opacity: 0; } }
.swipe-ic { position: absolute; left: 0; top: 50%; width: 30px; height: 30px; border-radius: 50%; background: var(--panel); color: var(--violet); display: grid; place-items: center; box-shadow: var(--shadow-bubble); opacity: 0; pointer-events: none; will-change: transform, opacity; transition: background .12s, color .12s; }
.swipe-ic svg { width: 18px; height: 18px; }
.swipe-ic.on { background: var(--violet); color: #fff; }   /* chegou ao ponto de responder */
@media (max-width: 899px) {
  .shell.in-chat .chat { animation: slidein .2s ease-out; }
  @keyframes slidein { from { transform: translateX(24px); opacity: .4; } }
}
.composer .send:active, .fab:active, .btn:active { transform: scale(.94); }
.composer .send, .fab, .btn { transition: transform .1s, background .15s; }
.row { transition: background .12s; }

/* ---------- Pré-visualização de fotos antes de enviar ---------- */
.preview { position: fixed; inset: 0; z-index: 85; background: #0B141A; color: #fff; display: flex; flex-direction: column; animation: fade .15s; }
.pv-top { display: flex; align-items: center; justify-content: space-between; padding: 8px; }
.pv-top .icon-btn { color: #fff; }
.pv-main { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px; }
.pv-main img, .pv-main video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.pv-strip { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; justify-content: center; }
.pv-strip button { width: 54px; height: 54px; border-radius: 8px; overflow: hidden; flex: none; opacity: .6; border: 2px solid transparent; }
.pv-strip button.on { opacity: 1; border-color: var(--violet-light); }
.pv-strip img, .pv-strip video { width: 100%; height: 100%; object-fit: cover; }
.pv-bar { display: flex; gap: 8px; padding: 8px 10px max(10px, env(safe-area-inset-bottom)); }
.pv-cap { flex: 1; border: 0; outline: none; border-radius: 24px; padding: 0 18px; min-height: 48px; background: #202C33; color: #fff; }
.pv-bar .send { width: 48px; height: 48px; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; }

/* ---------- Logótipo JaPassa (com nome) ---------- */
.brand-logo { display: block; width: 96px; height: 96px; border-radius: 22px; }
.brand-logo.big { width: 140px; height: 140px; border-radius: 30px; margin: 0 auto 16px; }

/* ---------- Aviso de encriptação ---------- */
.day.e2ee-note { max-width: 86%; text-align: center; line-height: 1.35; background: #FFF4D6; color: #6B5300; margin-bottom: 10px; }
:root[data-theme="dark"] .day.e2ee-note { background: #3A3218; color: #F1DE9C; }

/* ---------- Aviso legal no registo ---------- */
.legal-note { font-size: .82em; color: var(--text-2); text-align: center; margin: 14px 4px 0; line-height: 1.45; }
.legal-note a { color: var(--violet); }
a.item { color: inherit; text-decoration: none; }

/* ---------- Sondagens ---------- */
.poll { min-width: 230px; max-width: 300px; display: flex; flex-direction: column; gap: 6px; padding: 2px 0 4px; }
.poll-q { font-size: 1em; line-height: 1.35; }
.poll-k { color: var(--text-2); font-size: .78em; margin-top: -2px; }
.poll-o { position: relative; display: flex; align-items: center; gap: 8px; text-align: left; min-height: 38px; padding: 6px 10px; border-radius: 10px; background: rgba(124, 58, 237, .08); overflow: hidden; }
.poll-o.on { box-shadow: inset 0 0 0 1.5px var(--violet); }
.poll-bar { position: absolute; inset: 0 auto 0 0; background: rgba(124, 58, 237, .18); border-radius: 10px; transition: width .3s; }
.poll-t { position: relative; flex: 1; }
.poll-n { position: relative; font-size: .85em; color: var(--text-2); font-variant-numeric: tabular-nums; }
.poll-total { color: var(--text-2); font-size: .78em; text-align: right; }
/* ---------- Contacto partilhado ---------- */
.contact-go { display: block; width: 100%; text-align: center; padding: 8px 0 2px; border-top: 1px solid var(--line); margin-top: 8px; color: var(--violet); font-weight: 600; }
/* ---------- Mensagens fixadas ---------- */
.pinbar { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.pinbar .grow { display: flex; flex-direction: column; min-width: 0; }
.pinbar b { font-size: .78em; color: var(--violet); }
.pinbar .grow > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9em; }
.m .b.flash { animation: flash 1.2s; }
@keyframes flash { 30% { box-shadow: 0 0 0 3px rgba(124, 58, 237, .55); } }
/* ---------- Ajuda / apagar conta ---------- */
details.faq { border-bottom: 1px solid var(--line); padding: 10px 16px; }
details.faq summary { cursor: pointer; font-weight: 600; }
details.faq p { margin: 8px 0 2px; color: var(--text-2); line-height: 1.5; }
.btn.danger-btn { background: #E53935; }

a.btn { text-decoration: none; color: #fff; }

/* ---------- Grupos ---------- */
.av.lg { width: 84px; height: 84px; font-size: 1.6em; margin: 0 auto; }
.av svg { width: 55%; height: 55%; stroke: #fff; fill: none; stroke-width: 1.8; }
.day.sys { max-width: 86%; text-align: center; line-height: 1.35; }
.m .b .sender { display: block; font-size: .82em; margin-bottom: 2px; }
.item .role { color: var(--violet); font-weight: 600; font-size: .78em; margin-left: 8px; }

/* ---------- Estados (Atualizações) ---------- */
.st-ring { display: inline-flex; padding: 2px; border-radius: 50%; border: 2.5px solid var(--line); flex: none; }
.st-ring.on { border-color: var(--violet); }
.st-ring .av { margin: 0; }
.st-plus { width: 26px; height: 26px; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; font-weight: 700; margin-left: auto; flex: none; }
.st-h { margin: 12px 16px 4px; font-size: .82em; color: var(--text-2); font-weight: 600; }
.st-viewer { position: fixed; inset: 0; z-index: 90; color: #fff; display: flex; flex-direction: column; animation: fade .15s; user-select: none; }
.st-bars { display: flex; gap: 4px; padding: max(10px, env(safe-area-inset-top)) 10px 0; }
.st-bar { flex: 1; height: 3px; background: rgba(255,255,255,.35); border-radius: 2px; overflow: hidden; }
.st-bar span { display: block; height: 100%; background: #fff; }
.st-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; position: relative; z-index: 3; }
.st-top .grow { flex: 1; display: flex; flex-direction: column; min-width: 0; } .st-top small { opacity: .8; font-size: .8em; }
.st-top .icon-btn { color: #fff; }
.st-body { flex: 1; min-height: 0; display: grid; place-items: center; padding: 10px 20px 40px; position: relative; }
.st-text { font-size: clamp(1.4em, 6vw, 2.2em); font-weight: 600; text-align: center; line-height: 1.3; white-space: pre-wrap; word-break: break-word; max-width: 700px; }
.st-img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 6px; }
.st-cap { position: absolute; bottom: 30px; left: 0; right: 0; text-align: center; padding: 10px 20px; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.st-nav { position: absolute; top: 90px; bottom: 60px; width: 35%; background: none; border: 0; z-index: 2; }
.st-nav.prev { left: 0; } .st-nav.next { right: 0; width: 65%; }
.st-views { position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 3; background: rgba(0,0,0,.35); color: #fff; border-radius: 16px; padding: 6px 16px; }
.st-compose { justify-content: space-between; }
.st-input { flex: 1; background: none; border: 0; outline: none; resize: none; color: #fff; font-family: inherit; font-weight: 600; font-size: 1.8em; line-height: 1.3; text-align: center; padding: 20vh 20px 20px; }
.st-input::placeholder { color: rgba(255,255,255,.7); }
.st-bottom { display: flex; align-items: center; gap: 10px; padding: 10px 14px max(14px, env(safe-area-inset-bottom)); }
.st-bottom small { flex: 1; opacity: .85; }
.st-bottom .send { width: 50px; height: 50px; border-radius: 50%; background: #fff; color: var(--violet); display: grid; place-items: center; }

.ch-bar { display: flex; justify-content: center; }
.ch-bar .link { font-weight: 600; }

/* ---------- Chamadas ---------- */
.call { position: fixed; inset: 0; z-index: 95; background: radial-gradient(circle at 50% 30%, #3A2F7A, #120F2A 70%); color: #fff; display: flex; flex-direction: column; align-items: center; animation: fade .15s; }
.call-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.call-local { position: absolute; right: 14px; top: calc(110px + env(safe-area-inset-top)); width: 104px; height: 150px; object-fit: cover; border-radius: 14px; border: 2px solid rgba(255,255,255,.6); background: #222; z-index: 3; transform: scaleX(-1); }
.call-ui { display: contents; }

.call-who { margin-top: 22vh; z-index: 2; }
.av.xl { width: 130px; height: 130px; font-size: 2.6em; box-shadow: 0 0 0 10px rgba(255,255,255,.07), 0 0 0 22px rgba(255,255,255,.04); }
.call-top { position: absolute; top: max(24px, env(safe-area-inset-top)); left: 0; right: 0; text-align: center; z-index: 3; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.call-top b { font-size: 1.4em; } .call-st { opacity: .9; } .call-top small { opacity: .75; font-size: .78em; }
.call-bar { position: absolute; bottom: max(30px, env(safe-area-inset-bottom)); left: 0; right: 0; display: flex; justify-content: center; gap: 22px; z-index: 3; }
.call-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font-size: .78em; }
.call-btn .i, .call-btn svg { width: 62px; height: 62px; padding: 17px; border-radius: 50%; background: rgba(255,255,255,.18); box-sizing: border-box; }
.call-btn.on svg { background: #fff; stroke: #120F2A; }
.call-btn.red svg { background: #E53935; } .call-btn.green svg { background: #1FAE7A; }
.call-btn.end svg { transform: rotate(135deg); }

/* ---------- Chamada de voz v2 (esboço aprovado 06/10/2026): foto grande, anéis a tocar, painel de controlos ---------- */

.call.cv2 { background: radial-gradient(120% 70% at 50% 28%, #FFFFFF 0%, #F1EBFF 45%, #E2D7FF 100%); color: #1D1531; padding: max(14px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom)); }

:root[data-theme="dark"] .call.cv2 { background: radial-gradient(120% 70% at 50% 28%, #4C2E9B 0%, #24164F 45%, #110B26 100%); color: #fff; }

.call.min { display: none; }

.cv-top { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.cv-min { width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(124,58,237,.10); color: #5B3FB3; flex: none; }

.cv-e2 { display: flex; align-items: center; gap: 6px; font-size: .78em; padding: 6px 11px; border-radius: 99px; background: rgba(124,58,237,.09); color: #5B3FB3; min-width: 0; }

.cv-e2 svg.i { width: 14px; height: 14px; stroke-width: 2; }

.cv-e2 span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cv-sp { width: 38px; flex: none; }

:root[data-theme="dark"] .cv-min { background: rgba(255,255,255,.12); color: #fff; }

:root[data-theme="dark"] .cv-e2 { background: rgba(255,255,255,.10); color: rgba(255,255,255,.9); }

.cv-who { position: relative; margin-top: clamp(28px, 11vh, 96px); width: 172px; height: 172px; display: grid; place-items: center; flex: none; }

.cv-who .av.cv-av { position: relative; z-index: 2; width: 172px; height: 172px; font-size: 56px; font-weight: 600; box-shadow: 0 0 0 4px #fff, 0 18px 40px rgba(91,63,179,.22); }

:root[data-theme="dark"] .cv-who .av.cv-av { box-shadow: 0 0 0 4px rgba(255,255,255,.16), 0 18px 40px rgba(10,0,40,.35); }

.cv-h { display: none; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(124,58,237,.45); pointer-events: none; }

:root[data-theme="dark"] .cv-h { border-color: rgba(167,139,250,.6); }

.call.ring .cv-h { display: block; animation: cvring 2.4s cubic-bezier(.2,.6,.3,1) infinite; }

.call.ring .cv-h.h2 { animation-delay: .8s; } .call.ring .cv-h.h3 { animation-delay: 1.6s; }

@keyframes cvring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.65); opacity: 0; } }

.cv-name { margin: 28px 0 0; font-size: 1.7em; font-weight: 600; letter-spacing: -.2px; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cv-st { margin-top: 6px; font-size: .95em; opacity: .82; display: flex; align-items: center; gap: 6px; min-height: 1.4em; }

.cv-st.live { opacity: 1; }

.cv-dots { display: inline-flex; gap: 3px; margin-left: 1px; }

.cv-dots b { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .3; animation: cvdot 1.2s infinite; }

.cv-dots b:nth-child(2) { animation-delay: .2s; } .cv-dots b:nth-child(3) { animation-delay: .4s; }

@keyframes cvdot { 40% { opacity: .9; } }

.cv-dot { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 3px rgba(52,211,153,.25); flex: none; }

.cv-dur { font-variant-numeric: tabular-nums; font-weight: 600; }

.cv-ctl { margin-top: auto; width: 100%; }

.cv-dock { width: 100%; border-radius: 28px; padding: 18px 14px 14px; background: rgba(255,255,255,.75); border: 1px solid rgba(124,58,237,.12); box-shadow: 0 8px 24px rgba(91,63,179,.10); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

:root[data-theme="dark"] .cv-dock { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.10); box-shadow: none; }

.cv-row { display: flex; justify-content: space-around; }

.cv-b { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 76px; border: 0; background: none; color: inherit; font-size: .8em; padding: 0; }

.cv-b .cv-sq { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; background: #EEE9FF; color: #4B2FA0; transition: background .15s, color .15s; }

:root[data-theme="dark"] .cv-b .cv-sq { background: rgba(255,255,255,.14); color: #fff; }

.cv-b.on .cv-sq { background: #7C3AED; color: #fff; }

:root[data-theme="dark"] .cv-b.on .cv-sq { background: #fff; color: #2A1A5E; }

.cv-b[aria-disabled="true"] { opacity: .45; }

.cv-b svg.i { width: 26px; height: 26px; }

.cv-hang { margin-top: 16px; width: 100%; height: 54px; border: 0; border-radius: 18px; background: #E5484D; color: #fff; font-weight: 600; font-size: 1em; display: flex; align-items: center; justify-content: center; gap: 10px; }

.cv-hang svg.i, .cv-big.red svg.i { transform: rotate(135deg); }

.cv-inc { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 10px 6px; }

.cv-ib { display: flex; flex-direction: column; align-items: center; gap: 9px; border: 0; background: none; color: inherit; font-size: .82em; padding: 0; }

.cv-big { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; color: #fff; }

.cv-big svg.i { width: 30px; height: 30px; }

.cv-big.red { background: #E5484D; } .cv-big.green { background: #22B07D; animation: cvpulse 1.8s ease-out infinite; }

@keyframes cvpulse { 0% { box-shadow: 0 0 0 0 rgba(34,176,125,.38); } 100% { box-shadow: 0 0 0 18px rgba(34,176,125,0); } }

.cv-quick { border: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 14px; border-radius: 16px; font-size: .76em; margin-bottom: 22px; background: rgba(124,58,237,.09); color: #5B3FB3; }

:root[data-theme="dark"] .cv-quick { background: rgba(255,255,255,.12); color: #fff; }

.cv-quick svg.i { width: 20px; height: 20px; }

/* Chamada minimizada: barra "Em chamada" no topo da app (toca para voltar) */

#callbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: calc(36px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 14px 0; border: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: #7C3AED; color: #fff; font-size: .85em; font-weight: 500; }

#callbar .cv-dot { background: #6EE7B7; box-shadow: none; }

#callbar .cb-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#callbar small { opacity: .8; font-weight: 400; white-space: nowrap; }

body.callbar-on .shell { height: calc(100% - 36px - env(safe-area-inset-top)); margin-top: calc(36px + env(safe-area-inset-top)); }

/* Logótipo grande nos ecrãs de registo (número e código), centrado */
.brand.brand-reg { justify-content: center; margin: -24px 0 22px; }
.brand-logo-reg { display: block; width: min(78vw, 300px); height: auto; margin: 0 auto; filter: drop-shadow(0 6px 18px rgba(124, 58, 237, .25)); }
@media (max-height: 640px) { .brand-logo-reg { width: min(60vw, 220px); } .brand.brand-reg { margin: -36px 0 20px; } }

/* Contactos (Nova conversa) */
.ct-row { padding: 4px 12px 4px 20px; gap: 8px; }
.ct-row .ct-main { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; padding: 8px 0; text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.ct-row .ct-main .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.ghost.danger { color: var(--err); }

/* ---------- Perfil da pessoa (cartão que sobe; arrastado para cima = ecrã inteiro) ---------- */
.pf-scrim { align-items: flex-end; }
.pf { position: relative; width: 100%; max-width: 520px; height: 78%; height: 78dvh; background: var(--bg); border-radius: 22px 22px 0 0; display: flex; flex-direction: column; overflow: hidden; animation: up .22s ease-out; transition: height .25s ease, border-radius .25s ease, transform .2s ease; box-shadow: 0 -8px 30px rgba(0,0,0,.18); }
.pf.full { height: 100%; height: 100dvh; border-radius: 0; }
.pf-grab { flex: none; display: grid; place-items: center; height: 22px; touch-action: none; background: var(--panel); }
.pf-grab span { width: 42px; height: 5px; border-radius: 3px; background: var(--text-2); opacity: .35; }
.pf.full .pf-grab { height: 8px; }
.pf.full .pf-grab span { opacity: 0; }
.pf-bar { display: none; flex: none; align-items: center; gap: 6px; padding: calc(4px + env(safe-area-inset-top)) 8px 4px; background: var(--bar); border-bottom: 1px solid transparent; transition: border-color .2s; }
.pf.full .pf-bar { display: flex; }
.pf.full.scrolled .pf-bar { border-bottom-color: var(--line); }
.pf-bar-name { font-weight: 600; opacity: 0; transition: opacity .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf.scrolled .pf-bar-name { opacity: 1; }
.pf-body { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; padding: 0 0 calc(18px + env(safe-area-inset-bottom)); }
.pf-top { text-align: center; padding: 6px 20px 14px; background: var(--panel); }
.pf.full .pf-top { padding-top: 4px; }
.pf-photo { display: block; margin: 0 auto; border-radius: 50%; }
.pf-top .av.xl { box-shadow: 0 0 0 5px var(--lilac); margin: 0 auto; }
.pf-name { font-size: 1.45em; font-weight: 700; margin: 14px 0 2px; overflow-wrap: anywhere; }
.pf-sub { margin: 0; color: var(--text-2); font-size: .95em; }
.pf-pres { margin: 4px 0 0; color: var(--text-2); font-size: .86em; }
.pf-pres.on { color: var(--ok); font-weight: 600; }
.pf-bio { margin: 10px auto 0; max-width: 360px; font-size: .95em; white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-acts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 4px 10px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.pf-acts button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 2px 8px; border-radius: 14px; background: var(--lilac); color: var(--violet); font-size: .7em; font-weight: 600; min-width: 0; letter-spacing: -.1px; }
.pf-acts button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-acts button:disabled { opacity: .4; }
.pf-acts svg { width: 22px; height: 22px; }
:root[data-theme="dark"] .pf-acts button { color: #CFC3FF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pf-acts button { color: #CFC3FF; } }
.pf-card { background: var(--panel); margin: 10px 0 0; padding: 4px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pf-h { margin: 10px 20px 8px; font-size: .86em; color: var(--text-2); font-weight: 600; }
.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 12px 6px; }
.pf-stats div { text-align: center; padding: 0 4px; min-width: 0; }
.pf-stats div + div { border-left: 1px solid var(--line); }
.pf-stats b { display: block; font-size: 1.08em; color: var(--violet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-stats small { display: block; color: var(--text-2); font-size: .76em; margin-top: 2px; }
.pf-note small { white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pf-mini { width: 16px; height: 16px; opacity: .6; }
.pf-tabs { padding: 0 14px 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tabs button { flex: none; white-space: nowrap; }
.pf-tabs small { opacity: .75; font-size: .82em; }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 0 3px 4px; }
.pf-grid button { aspect-ratio: 1; background: var(--search); overflow: hidden; border-radius: 4px; }
.pf-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-grid .pf-vid { display: grid; place-items: center; background: #1d1d22; color: #fff; }
.pf-empty { margin: 4px 20px 14px; color: var(--text-2); font-size: .9em; }
.pf-link { color: inherit; text-decoration: none; }
.pf-link small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-ext { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--lilac); color: var(--violet); font-weight: 700; font-size: .72em; }
.pf-d { flex: none; }
.pf-emo { font-size: 1.05em !important; letter-spacing: .12em; color: var(--text) !important; }
.pf-emo em { font-style: normal; font-size: .78em; letter-spacing: 0; color: var(--ok); margin-left: 4px; }
.pf-snip { display: block; overflow-wrap: anywhere; }
.pf-snip mark { background: var(--lilac); color: inherit; border-radius: 3px; padding: 0 1px; }
.pf-qr { text-align: center; padding: 8px 20px 0; }
.pf-qr h2 { margin: 10px 0 2px; }
.pf-qr .hint { margin: 0 0 10px; }
.pf-qr-box { width: 220px; max-width: 70vw; margin: 6px auto 12px; padding: 10px; background: #fff; border-radius: 16px; }
.pf-qr-box svg { width: 100%; height: auto; display: block; }
/* Código de segurança em emojis */
.safety-emo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 300px; margin: 6px auto 14px; }
.safety-emo span { font-size: 2.1em; text-align: center; background: var(--search); border-radius: 14px; padding: 8px 0; line-height: 1.2; }
.safety-more { margin: 0 0 8px; }
.safety-more summary { cursor: pointer; color: var(--violet); font-weight: 600; text-align: center; padding: 6px 20px 10px; font-size: .92em; }
/* Mensagem encontrada (pesquisa / partilhado) */
.m.flash .b { animation: pfflash 1.6s ease; }
@keyframes pfflash { 0%, 40% { box-shadow: 0 0 0 3px var(--violet); } 100% { box-shadow: var(--shadow-bubble); } }

/* ---------- Conversas trancadas ---------- */
.row .lk-av { background: var(--violet) !important; color: #fff !important; }
.row .lk-av svg { width: 22px; height: 22px; color: #fff; stroke: #fff; opacity: 1; }
.lk-row .row-time { background: var(--lilac); color: var(--violet); font-weight: 700; border-radius: 10px; padding: 1px 8px; }
.lk-bar { display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 4px; background: var(--lilac); color: var(--violet); position: sticky; top: 0; z-index: 1; }
.lk-bar b { flex: 1; font-weight: 700; }
.lk-bar .icon-btn { color: var(--violet); }
.lk-head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 12px; color: var(--violet); }
.lk-head svg { width: 34px; height: 34px; }
.lk-head h2 { margin: 0 !important; color: var(--text); }
.lk-pin { width: 100%; text-align: center; font-size: 1.6em; letter-spacing: .5em; padding-left: .5em; }
.lk-forgot { display: block; margin: 6px auto 0; color: var(--violet); font-weight: 600; font-size: .9em; padding: 8px; }
.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pf-lock { cursor: pointer; }
:root[data-theme="dark"] .lk-bar, :root[data-theme="dark"] .lk-bar .icon-btn, :root[data-theme="dark"] .lk-row .row-time, :root[data-theme="dark"] .lk-head { color: #CFC3FF; }

/* ---------- Etiquetas de cor ---------- */
.lbl-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 7px; vertical-align: middle; flex: none; }
.lbl-chips .lbl-dot { margin: 0 6px 0 0; }
.lbl-big { display: inline-block; width: 22px; height: 22px; border-radius: 50%; flex: none; margin: 0 1px; }
.lbl-chips { display: flex; gap: 6px; padding: 0 14px 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x; }
.lbl-chips::-webkit-scrollbar { display: none; }
.lbl-chips button { flex: none; display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); font-size: .8125em; font-weight: 500; color: #4A4458; white-space: nowrap; }
.lbl-chips button[aria-pressed="true"] { background: var(--lilac); color: var(--violet); border-color: transparent; font-weight: 600; }
:root[data-theme="dark"] .lbl-chips button[aria-pressed="true"] { color: #CFC3FF; }
.lbl-colors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 14px 0 16px; }
.lbl-colors button { aspect-ratio: 1; border-radius: 50%; border: 3px solid transparent; }
.lbl-colors button[aria-pressed="true"] { border-color: var(--sheet); box-shadow: 0 0 0 2px var(--text); }
/* ---------- Lembretes ---------- */
.rm-custom { align-items: flex-start; }
.rm-custom .btn { margin-top: 26px; min-height: 40px; }
.rm-row { gap: 6px; }
.rm-open { text-align: left; min-width: 0; }
.rm-open b { display: block; font-weight: 600; }
.rm-due { text-align: center; padding: 14px 20px 4px; }
.rm-due .rm-bell { font-size: 2.6em; display: block; animation: ring 1s ease 2; }
.rm-due h2 { margin: 6px 0 4px !important; }
.rm-due p { margin: 0 0 10px; color: var(--text-2); }
.rm-due p b { color: var(--text); font-weight: 600; }
@keyframes ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(18deg); } 40% { transform: rotate(-16deg); } 60% { transform: rotate(10deg); } 80% { transform: rotate(-6deg); } }

/* ---------- @nome com o "@" fixo ---------- */
.at-field { position: relative; display: flex; align-items: center; }
.at-field .at { position: absolute; left: 0; color: var(--violet); font-weight: 700; pointer-events: none; font-size: 1.05em; }
.at-field .input { padding-left: 18px; width: 100%; }
.field > .at-field { display: flex; font-size: inherit; color: inherit; font-weight: 400; margin: 0; }
.un-st { display: block; font-size: .8em; color: var(--text-2); margin-top: 6px; line-height: 1.35; }
.un-st.ok { color: var(--ok); font-weight: 600; }
.un-st.bad { color: var(--err); }
.un-st.wait { color: var(--text-2); font-style: italic; }

/* ---------- Barra de baixo (uma mão): Conversas · Estados · + · Chamadas · Eu ---------- */
.list { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.bnav { position: absolute; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 6; display: grid; grid-template-columns: 1fr 1fr 60px 1fr 1fr; align-items: center; height: 66px; padding: 0 2px; border-radius: 24px; background: var(--panel); box-shadow: 0 6px 24px rgba(30, 20, 80, .16), 0 0 0 1px var(--line); transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
.bnav-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; color: var(--text-2); font-size: .7em; font-weight: 500; letter-spacing: -.35px; min-width: 0; -webkit-user-select: none; user-select: none; }
.bnav-tab svg { width: 46px; height: 28px; padding: 3px 11px; border-radius: 14px; transition: background .2s, color .2s; }
.bnav-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bnav-tab[aria-selected="true"] { color: var(--violet); font-weight: 700; }
.bnav-tab[aria-selected="true"] svg { background: var(--lilac); stroke-width: 2.1; }
.bnav-tab .bdg { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--violet); color: #fff; font-size: .95em; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--panel); }
.bnav-tab .bdg.dot { min-width: 10px; width: 10px; height: 10px; padding: 0; top: 4px; left: calc(50% + 10px); }
.bnav-plus { justify-self: center; width: 54px; height: 54px; margin-top: -26px; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(124, 58, 237, .45), 0 0 0 5px var(--panel); transition: transform .12s, background .15s; }
.bnav-plus svg { width: 26px; height: 26px; stroke-width: 2.2; }
.bnav-plus:active { transform: scale(.92); }
/* Pesquisa no topo, por cima das etiquetas (Todas · Família · …); lupa na cor da app */
.bsearch { margin: 2px 14px 8px; height: 42px; border-radius: 21px; flex: none; }
.bsearch svg { color: var(--violet); }
:root[data-theme="dark"] .bsearch svg { color: #B9A8FF; }
:root[data-theme="dark"] .bnav { box-shadow: 0 6px 24px rgba(0, 0, 0, .45), 0 0 0 1px var(--line); }
:root[data-theme="dark"] .bnav-tab[aria-selected="true"] { color: #CFC3FF; }
.list.enter-r { animation: tabin-r .24s ease-out; }
.list.enter-l { animation: tabin-l .24s ease-out; }
@keyframes tabin-r { from { transform: translateX(28px); opacity: .3; } }
@keyframes tabin-l { from { transform: translateX(-28px); opacity: .3; } }
/* Separador "Eu" */
.me-card { text-align: center; padding: 18px 20px 16px; }
.me-card .av.xl { margin: 0 auto; box-shadow: 0 0 0 5px var(--lilac); }
.me-card h2 { margin: 14px 0 2px; font-size: 1.35em; }
.me-user { margin: 0; color: var(--violet); font-weight: 600; }
.me-bio { margin: 8px auto 0; max-width: 340px; color: var(--text-2); font-size: .92em; white-space: pre-wrap; }
.me-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px auto 0; max-width: 380px; }
.me-acts button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 14px; background: var(--lilac); color: var(--violet); font-size: .78em; font-weight: 600; }
:root[data-theme="dark"] .me-acts button { color: #CFC3FF; }
/* Computador: a barra passa a coluna à esquerda e a pesquisa volta para cima */
@media (min-width: 900px) {
  .side { width: 480px; padding-left: 80px; }
  .bnav { left: 0; top: 0; bottom: 0; right: auto; width: 80px; height: auto; border-radius: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 14px 0; box-shadow: none; border-right: 1px solid var(--line); background: var(--bar); }
  .bnav-plus { order: -1; margin: 4px 0 14px; box-shadow: 0 4px 12px rgba(124, 58, 237, .35); }
  .bnav-tab { width: 100%; }
  .bsearch { margin: 4px 14px 8px; height: 40px; }
  .side > .top, .side > #net, .side > #nb, .side > .bsearch { order: 0; }
  .side > #lchips { order: 1; }
  .side > .list { order: 2; padding-bottom: 16px; }
  .side.bar-off .bnav { transform: none; opacity: 1; pointer-events: auto; }
}

/* ---------- Parte B: Pôr em dia, favoritos, roda do +, barra à medida ---------- */
.catchup { display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); margin: 6px 12px 4px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, var(--violet), #8F6BFF); color: #fff; font-weight: 600; text-align: left; box-shadow: 0 4px 14px rgba(124, 58, 237, .3); }
.catchup .cu-arrow { transform: rotate(180deg); width: 20px; height: 20px; }
.cu-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px 0 14px; font-weight: 600; font-size: .9em; color: var(--violet); }
:root[data-theme="dark"] .cu-bar { color: #CFC3FF; }
.cu-bar .cu-next { min-height: 38px; padding: 0 16px; font-size: .92em; }
.cu-bar .cu-x { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); }
.favs-scrim, .wheel-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(11, 20, 26, .35); animation: fade .15s; }
.favs { position: absolute; left: 10px; right: 10px; bottom: calc(84px + env(safe-area-inset-bottom)); max-width: 460px; padding: 12px 12px 14px; border-radius: 22px; background: var(--sheet); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); animation: up .2s ease-out; }
.favs-h { display: block; font-size: .82em; color: var(--text-2); margin: 0 4px 10px; }
.favs-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.favs-grid button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.favs-grid .av { width: 50px; height: 50px; }
.favs-grid span { font-size: .72em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.favs-u { position: absolute; top: -2px; right: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--violet); color: #fff; font-style: normal; font-size: .68em; line-height: 18px; box-shadow: 0 0 0 2px var(--sheet); }
.wheel { position: absolute; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); max-width: 460px; margin: 0 auto; padding: 14px 10px 78px; border-radius: 24px; background: var(--sheet); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 6px; animation: up .18s ease-out; }
.wheel button[data-w] { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; color: var(--text); font-size: .76em; font-weight: 600; animation: wheelin .24s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(var(--i) * 30ms); }
.wheel button[data-w] svg { width: 54px; height: 54px; padding: 14px; border-radius: 18px; background: var(--lilac); color: var(--violet); }
:root[data-theme="dark"] .wheel button[data-w] svg { color: #CFC3FF; }
.wheel button[data-w] span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wheel .wheel-x { position: absolute; left: 50%; bottom: 6px; margin-left: -27px; width: 54px; height: 54px; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(124, 58, 237, .45); }
@keyframes wheelin { from { transform: translateY(14px) scale(.7); opacity: 0; } }
.bar-seg { margin-top: 2px; }
@media (min-width: 900px) {
  .favs { left: 90px; bottom: auto; top: 60px; }
  .wheel { left: 90px; right: auto; width: 380px; bottom: auto; top: 20px; padding-bottom: 14px; }
  .wheel .wheel-x { display: none; }
}

/* Rodapé da lista: "mensagens encriptadas de ponta a ponta" na cor da app */
.e2ee-foot { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 22px 24px 10px; color: var(--text-2); font-size: .8em; line-height: 1.4; text-align: center; }
/* Lista de conversas: a frase fica centrada no espaço livre entre a última conversa e a barra de baixo */
.list:has(> .e2ee-foot:not(.st-foot)) { display: flex; flex-direction: column; }
.list:has(> .e2ee-foot:not(.st-foot)) > * { flex-shrink: 0; }
.list > .e2ee-foot:not(.st-foot) { margin: auto 0; padding: 16px 24px; }
.e2ee-foot svg { width: 14px; height: 14px; flex: none; color: var(--violet); }
.e2ee-foot b { color: var(--violet); font-weight: 600; }
:root[data-theme="dark"] .e2ee-foot b, :root[data-theme="dark"] .e2ee-foot svg { color: #B9A8FF; }
/* Conversa encriptada à espera das chaves neste aparelho: faixa por cima da caixa de escrever */
.e2w { display: flex; gap: 10px; align-items: flex-start; margin: 0 10px 6px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--violet) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--violet) 28%, transparent); color: var(--text); font-size: .86em; line-height: 1.35; }
.e2w svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--violet); }
.e2w b { display: block; color: var(--violet); font-weight: 600; margin-bottom: 2px; }
.e2w span { color: var(--text-2); }
:root[data-theme="dark"] .e2w b, :root[data-theme="dark"] .e2w svg { color: #B9A8FF; }
.e2ee-info { text-align: center; padding: 14px 24px 10px; }
.e2ee-info svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--lilac); color: var(--violet); }
.e2ee-info h2 { margin: 12px 0 8px !important; }
.e2ee-info p { margin: 0 0 8px; color: var(--text-2); line-height: 1.5; }

/* ---------- Envio de ficheiros (como no WhatsApp): foto logo no balão, círculo de progresso, ✕, ❗ ---------- */
.up-media { position: relative; width: 260px; max-width: 100%; border-radius: 8px; overflow: hidden; background: #111; margin-bottom: 2px; }
.up-media img, .up-media video { display: block; width: 100%; max-height: 340px; min-height: 120px; object-fit: cover; filter: brightness(.68); }
.up-media.is-fail img, .up-media.is-fail video { filter: brightness(.5) grayscale(.3); }
.up-ov { position: absolute; inset: 0; display: grid; place-items: center; }
.up-btn { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; display: grid; place-items: center; }
.up-btn svg.i { width: 20px; height: 20px; stroke-width: 2.4; }
.up-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.up-ring circle { fill: none; stroke-width: 3.2; }
.up-ring .bg { stroke: rgba(255, 255, 255, .28); }
.up-ring .p { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset .25s ease-out; }
.up-btn.fail { background: rgba(0, 0, 0, .6); }
.up-btn.fail svg.i { width: 24px; height: 24px; }
.up-pct { position: absolute; right: 8px; bottom: 8px; padding: 1px 7px; border-radius: 10px; background: rgba(0, 0, 0, .5); color: #fff; font-size: .74em; font-weight: 600; }
.up-doc { display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 280px; padding: 4px 2px 6px; }
.up-doc .up-btn { width: 44px; height: 44px; background: var(--violet); }
.up-doc .up-btn.fail { background: var(--err); }
.up-doc .up-ring .bg { stroke: rgba(255, 255, 255, .35); }
.up-doc .info { display: flex; flex-direction: column; min-width: 0; }
.up-doc .info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.up-doc .info small { color: var(--text-2); }
.m.up-failed { align-items: center; gap: 6px; }
.up-mark { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--err); box-shadow: 0 2px 6px rgba(229, 57, 53, .35); }
.up-mark svg.i { width: 20px; height: 20px; stroke-width: 2.2; }
.up-sheet { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 8px 8px 4px; }
.up-sheet > svg.i { width: 44px; height: 44px; color: var(--err); }
.up-sheet h2 { margin: 0; }
.up-sheet p { margin: 0 0 6px; color: var(--text-2); line-height: 1.4; }
.up-sheet .btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
.up-sheet .btn.danger { color: var(--err); }

/* ---------- Redesign passo 1: fundo violeta suave nas páginas, lista em cartão branco, texto mais sólido ---------- */
.list > .row, .list > .lk-row { background: var(--panel); }
.list > .row[aria-current="true"] { background: var(--hover); }
@media (any-hover: hover) { :where(:root:not([data-input="touch"])) .list > .row:hover { background: var(--hover); } }   /* 1.0.171 */
.row-msg, .row-msg .txt { font-weight: 400; }
.row.unread .row-msg { color: var(--text); font-weight: 500; }
.st-h { color: #4A4458; font-weight: 600; }
:root[data-theme="dark"] .lbl-chips button { color: var(--text-2); }
:root[data-theme="dark"] .st-h { color: var(--text-2); }
:root[data-theme="dark"] .top .title { color: var(--text); }

/* ---------- Redesign passo 2: cabeçalho — marca à esquerda, 🔍 e ⋮ à direita; a lupa abre a pesquisa no próprio cabeçalho ---------- */
.top { gap: 2px; padding: 8px 6px 4px 18px; }
.top .top-btn { color: var(--text); }
.top .top-btn svg.i { width: 24px; height: 24px; stroke-width: 2; }
.top .brand-word { display: block; height: 42px; width: auto; margin-left: -4px; filter: drop-shadow(0 2px 3px rgba(109, 40, 217, .18)); }
.top-search { flex: 1; display: flex; align-items: center; gap: 4px; margin-left: -12px; height: 48px; padding: 0 4px; border-radius: 24px; background: var(--panel); box-shadow: 0 1px 4px rgba(23, 21, 28, .08); }
.top-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 1em; color: var(--text); }
.top-search input::-webkit-search-cancel-button { display: none; }
.top-search .icon-btn { color: var(--violet); }
.pop-scrim { position: fixed; inset: 0; z-index: 60; }
.pop { position: fixed; min-width: 220px; padding: 6px 0; border-radius: 14px; background: var(--sheet); box-shadow: 0 10px 30px rgba(23, 21, 28, .18), 0 0 0 1px var(--line); animation: pop-in .14s ease-out; transform-origin: top right; }
.pop button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 18px; text-align: left; font-weight: 500; color: var(--text); }
.pop button:active { background: var(--hover); } @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .pop button:hover { background: var(--hover); } }
.pop svg.i { width: 21px; height: 21px; color: var(--violet); }
@keyframes pop-in { from { opacity: 0; transform: scale(.92); } }
:root[data-theme="dark"] .pop svg.i, :root[data-theme="dark"] .top-search .icon-btn { color: #B9A8FF; }
:root[data-theme="dark"] .pop { box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 1px var(--line); }

/* ---------- Redesign passo 3: menu de baixo com 4 opções, botões ✦ e +, Estados em bolinhas, página Contactos ---------- */
.bnav.four { grid-template-columns: repeat(4, 1fr); padding: 0 6px; }
.bnav.four .bnav-tab { font-size: .8125em; letter-spacing: 0; }
.fabs { position: absolute; right: 16px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 14px; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.fabs:empty { display: none; }
.fabs button { display: grid; place-items: center; color: #fff; transition: transform .12s, background .15s; }
.fabs button:active { transform: scale(.92); }
.fab-ai { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #7C3AED, #A855F7); box-shadow: 0 6px 16px rgba(124, 58, 237, .35); }
.fab-ai svg.i { width: 24px; height: 24px; }
.fab-new { width: 58px; height: 58px; border-radius: 18px; background: var(--violet-dark); box-shadow: 0 6px 18px rgba(109, 40, 217, .4); }
.fab-new:active { background: #5B21B6; }
.fab-new svg.i { width: 28px; height: 28px; stroke-width: 2.4; }

.st-strip { display: flex; gap: 6px; padding: 2px 14px 12px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x; background: var(--page); }
.st-strip::-webkit-scrollbar { display: none; }
.st-b { position: relative; flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.st-ring2 { width: 60px; height: 60px; border-radius: 50%; padding: 2.5px; background: conic-gradient(from 210deg, #7C3AED, #A855F7, #7C3AED); }
.st-ring2.seen { background: #CFC8DC; }
.st-me .st-ring2:not(.mine) { background: none; padding: 0; }
.st-ring2 .av { width: 100% !important; height: 100% !important; font-size: 1.05em; box-shadow: 0 0 0 2.5px var(--page); }
.st-ring2.seen .av, .st-ring2.mine .av { box-shadow: 0 0 0 2.5px var(--page); }
.st-add { position: absolute; top: 40px; right: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); color: #fff; font-size: 16px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2.5px var(--page); }
.st-n { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75em; font-weight: 500; color: var(--text); }
:root[data-theme="dark"] .st-ring2.seen { background: #3A4650; }
.ct-act .ct-ic { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--violet); }
.ct-act .row-body, .ct-person .row-body { border-bottom: 0; }
.ct-person { padding-right: 6px; }
.ct-person .ct-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; height: 100%; text-align: left; }
:root[data-theme="dark"] .ct-act .ct-ic { color: #CFC3FF; }

/* ---------- Redesign passo 4: página Conversas — filtros fortes e lista sem linhas a separar ---------- */
.lbl-chips { padding: 2px 14px 10px; gap: 8px; }
.lbl-chips button { padding: 7px 14px; font-size: .875em; font-weight: 500; }
.lbl-chips button[aria-pressed="true"] { background: var(--violet); color: #fff; border-color: transparent; font-weight: 600; }
:root[data-theme="dark"] .lbl-chips button[aria-pressed="true"] { background: var(--violet); color: #fff; }
.list > .row:not(.ct-act):not(.ct-person) { height: 74px; }
.list > .row .row-body { border-bottom: 0; }
.f-empty { padding: 28px 24px; text-align: center; color: var(--text-2); }

/* Frase "encriptadas de ponta a ponta": centrada no ecrã, cadeado grande num círculo violeta (não toca nos botões ✦ e +) */
.e2ee-foot { flex-direction: column; gap: 12px; font-size: .84em; }
.e2ee-foot > span { max-width: 215px; margin: 0 auto; }
.e2ee-foot > svg.i { width: 34px; height: 34px; color: var(--violet); stroke-width: 1.8; }   /* só o cadeado, sem círculo */
:root[data-theme="dark"] .e2ee-foot > svg.i { color: #B9A8FF; }
/* Menu de baixo sempre fixo: a última linha da lista fica sempre visível (acima do menu e dos botões ✦/+) */
.side:has(.fabs:not(:empty)) .list { padding-bottom: calc(170px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .side:has(.fabs:not(:empty)) .list { padding-bottom: 170px; } }

/* ---------- Ecrã de abertura com o logótipo + painel vazio do computador ---------- */
#splash { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #F5F2FA; transition: opacity .3s ease; }
#splash img { width: 230px; height: auto; animation: sp-in .6s ease-out; }
#splash .sp-foot { position: absolute; bottom: calc(40px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 7px; color: #667078; font-size: 13px; font-weight: 500; }
#splash .sp-foot svg { color: #7C3AED; }
#splash.out { opacity: 0; pointer-events: none; }
@keyframes sp-in { from { opacity: 0; transform: scale(.9); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #splash { background: #111B21; } :root:not([data-theme="light"]) #splash .sp-foot { color: #8696A0; } }
:root[data-theme="dark"] #splash { background: #111B21; }
:root[data-theme="dark"] #splash .sp-foot { color: #8696A0; }
.chat-empty .brand-word-lg { display: block; width: 300px; height: auto; margin: 0 auto 22px; }
.chat-empty .ce-tag { margin: 0; font-size: 1.06em; font-weight: 500; color: var(--text); }
.chat-empty .ce-e2ee { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 26px 0 0; font-size: .82em; }
.chat-empty .ce-e2ee svg.i { width: 16px; height: 16px; color: var(--violet); }
.chat-empty .ce-e2ee b { color: var(--violet); font-weight: 600; }
:root[data-theme="dark"] .chat-empty .ce-e2ee b, :root[data-theme="dark"] .chat-empty .ce-e2ee svg.i { color: #B9A8FF; }
@media (min-width: 900px) { .bnav.four .bnav-tab { font-size: .72em; } }

/* ---------- Redesign passo 5: Nova conversa — título forte, pesquisa, opções com ícone em círculo violeta claro ---------- */
.sheet:has(.nc) { background: var(--page); }
.nc-title { font-size: 1.5em !important; font-weight: 700; color: var(--text); margin: 14px 20px 14px !important; letter-spacing: -.3px; }
.nc-search { margin: 0 16px 10px !important; height: 46px; border-radius: 23px; background: var(--panel); box-shadow: 0 1px 3px rgba(23, 21, 28, .06), 0 0 0 1px var(--line); }
.nc-search svg.i { color: var(--violet); }
.nc-search input { font-size: 1em; }
#nacts { margin: 0 12px; border-radius: 16px; background: var(--panel); overflow: hidden; }
.nc-opt { gap: 14px; padding: 11px 14px; }
.nc-opt .grow { font-size: 1.0625em; font-weight: 600; color: var(--text); }
.nc-opt small { margin-top: 2px; font-size: .82em; font-weight: 400; color: var(--text-2); }
.nc-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); }
.nc-ic svg.i { width: 22px; height: 22px; color: var(--violet-dark) !important; stroke-width: 2; }
.nc-h { margin: 18px 20px 6px; font-size: .8125em; font-weight: 600; color: #4A4458; text-transform: none; }
#ncl { margin: 0 12px; border-radius: 16px; background: var(--panel); overflow: hidden; }
#ncl:empty { display: none; }
#ncl .ct-row { padding: 4px 8px 4px 14px; }
#ncl .ct-main .grow { font-size: 1.0625em; font-weight: 600; color: var(--text); }
#ncl .ct-main small { font-size: .82em; font-weight: 400; color: var(--text-2); }
#ncl .hint, .nc .hint { margin: 10px 8px; }
:root[data-theme="dark"] .nc-ic svg.i { color: #CFC3FF !important; }
:root[data-theme="dark"] .nc-h { color: var(--text-2); }
:root[data-theme="dark"] .sheet:has(.nc) { background: var(--bg); }
:root[data-theme="dark"] .nc-search { box-shadow: 0 0 0 1px var(--line); }

/* Ícones do topo (conversa e páginas principais): mais escuros, mais grossos e nítidos */
.chat-head .icon-btn, .top .top-btn { width: 42px; height: 42px; color: var(--text); }
.chat-head .icon-btn svg.i, .top .top-btn svg.i { width: 24px; height: 24px; stroke-width: 2.1; shape-rendering: geometricPrecision; }
.chat-head .icon-btn:active, .top .top-btn:active { background: var(--hover); }
:root[data-theme="dark"] .chat-head .icon-btn, :root[data-theme="dark"] .top .top-btn { color: #E9EDEF; }

/* ---------- Menu lateral (abre da direita) ---------- */
.drw { position: fixed; inset: 0; z-index: 90; }
.drw-scrim { position: absolute; inset: 0; background: rgba(23, 21, 28, .42); opacity: 0; transition: opacity .25s; }
.drw-panel { position: absolute; top: 0; bottom: 0; right: 0; width: 82%; max-width: 330px; display: flex; flex-direction: column; background: var(--panel); border-radius: 22px 0 0 22px; overflow: hidden;
  box-shadow: -8px 0 30px rgba(0, 0, 0, .18); transform: translateX(105%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
.drw.on .drw-scrim { opacity: 1; }
.drw.on .drw-panel { transform: none; }
.drw-head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: calc(28px + env(safe-area-inset-top)) 22px 18px; text-align: left; color: #fff; background: linear-gradient(150deg, #7C3AED, #A855F7); }
.drw-head .av { width: 64px; height: 64px; font-size: 1.35em; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); margin-bottom: 10px; }
.drw-head b { font-size: 1.15em; font-weight: 700; }
.drw-head small { opacity: .88; font-size: .9em; }
.drw-list { flex: 1; overflow-y: auto; padding: 8px 0; overscroll-behavior: contain; }
.drw-list button { display: flex; align-items: center; gap: 18px; width: 100%; padding: 13px 22px; text-align: left; font-size: 1em; font-weight: 500; color: var(--text); }
.drw-list button:active { background: var(--hover); }
.drw-list svg.i { width: 22px; height: 22px; color: var(--violet); stroke-width: 2; }
.drw-sep { height: 1px; background: var(--line); margin: 6px 22px; }
.drw-foot { display: flex; align-items: center; gap: 8px; padding: 14px 22px calc(16px + env(safe-area-inset-bottom)); color: var(--text-2); font-size: .8em; }
.drw-foot svg.i { width: 16px; height: 16px; color: var(--violet); }
:root[data-theme="dark"] .drw-list svg.i, :root[data-theme="dark"] .drw-foot svg.i { color: #B9A8FF; }

/* ---------- Redesign passo 6: página Chamadas ---------- */
.cl-row { padding-right: 8px; }
.cl-row .row-name.miss { color: var(--err); }
.cl-row .row-msg { gap: 6px; }
.cl-dir { flex: none; width: 16px; height: 16px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cl-dir.in { stroke: #1FAE7A; } .cl-dir.out { stroke: var(--violet); } .cl-dir.miss { stroke: var(--err); }
.cl-again { width: 44px; height: 44px; color: var(--violet); }
.cl-again svg.i { width: 24px; height: 24px; stroke-width: 2; }
:root[data-theme="dark"] .cl-again { color: #B9A8FF; }

/* ---------- Redesign passo 7: Definições — perfil no topo e secções em cartões brancos ---------- */
.sx-me { display: flex; align-items: center; gap: 14px; width: calc(100% - 24px); margin: 4px 12px 6px; padding: 14px; border-radius: 18px; background: var(--panel); text-align: left; box-shadow: 0 1px 3px rgba(23, 21, 28, .05); }
.sx-me .av.lg, .sx-me .av { width: 62px; height: 62px; font-size: 1.3em; margin: 0; }
.sx-me b { display: block; font-size: 1.125em; font-weight: 700; color: var(--text); }
.sx-me small { display: block; color: var(--violet); font-weight: 500; font-size: .9em; }
.sx-me small.sx-bio { color: var(--text-2); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.sx-me .grow { min-width: 0; }
.sx-me-acts { display: flex; align-items: center; gap: 4px; }
.sx-qr { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--violet); }
.sx-qr svg.i { width: 20px; height: 20px; }
.sx-h { margin: 16px 24px 6px; font-size: .78em; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: #6B6478; }
.sx-card { margin: 0 12px; border-radius: 18px; background: var(--panel); overflow: hidden; box-shadow: 0 1px 3px rgba(23, 21, 28, .05); }
.sx-card.sx-gap { margin-top: 16px; }
.sx-row { gap: 14px; padding: 12px 12px 12px 14px; }
.sx-row .grow { font-size: 1em; font-weight: 600; color: var(--text); min-width: 0; }
.sx-row small { font-weight: 400; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-row + .sx-row { border-top: 1px solid var(--line); }
.sx-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--lilac); }
.sx-ic svg.i { width: 20px; height: 20px; color: var(--violet-dark) !important; stroke-width: 2; }
.sx-chev { width: 18px !important; height: 18px !important; color: #B5AEC2 !important; flex: none; }
.sx-row.danger .grow, .sx-row.danger .sx-ic svg.i { color: var(--err) !important; }
.sx-row.danger .sx-ic { background: #FDECEC; }
.sx-ok { color: var(--violet); }
.sx-title { font-size: 1.35em !important; font-weight: 700; }
:root[data-theme="dark"] .sx-h { color: var(--text-2); }
:root[data-theme="dark"] .sx-ic svg.i, :root[data-theme="dark"] .sx-qr { color: #CFC3FF !important; }
:root[data-theme="dark"] .sx-row.danger .sx-ic { background: #3A1F24; }
:root[data-theme="dark"] .sx-chev { color: #55606A !important; }

/* Painel lateral: opções com linha de ajuda e opções a vermelho */
.drw-list .drw-t { display: flex; flex-direction: column; min-width: 0; }
.drw-list .drw-t small { font-size: .8em; font-weight: 400; color: var(--text-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drw-list button.danger, .drw-list button.danger svg.i { color: var(--err) !important; }
.drw-emoji { display: grid; place-items: center; font-size: 18px; }

/* ---------- Redesign passo 8: Editar perfil (página própria, sem barra de baixo) ---------- */
.pe { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; background: var(--page); animation: pe-in .22s ease-out; }
@keyframes pe-in { from { transform: translateX(30px); opacity: 0; } }
.pe-top { display: flex; align-items: center; gap: 6px; padding: calc(8px + env(safe-area-inset-top)) 8px 6px; min-height: 60px; }
.pe-top h1 { margin: 0; font-size: 1.375em; font-weight: 700; color: var(--text); }
.pe-top .icon-btn { color: var(--text); }
.pe-body { flex: 1; overflow-y: auto; padding: 8px 20px calc(30px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; max-width: 520px; width: 100%; margin: 0 auto; }
.pe-av-wrap { position: relative; width: 116px; height: 116px; margin: 6px auto 10px; }
.pe-av { width: 116px; height: 116px; border-radius: 50%; padding: 0; }
.pe-av .av, .pe-av .av.xl { width: 116px !important; height: 116px !important; font-size: 2.4em; margin: 0; box-shadow: 0 0 0 4px var(--lilac); }
.pe-av .av img { width: 100%; height: 100%; object-fit: cover; }
.pe-cam { position: absolute; right: -2px; bottom: 2px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--violet); box-shadow: 0 0 0 3px var(--page), 0 4px 10px rgba(124, 58, 237, .35); }
.pe-cam svg.i { width: 20px; height: 20px; stroke-width: 2.1; }
.pe-field { display: flex; flex-direction: column; gap: 6px; }
.pe-field > span:first-child { font-size: .875em; font-weight: 600; color: var(--text); }
.pe-field .input { width: 100%; height: 50px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); font-size: 1em; font-weight: 500; color: var(--text); }
.pe-field .input:focus { border-color: var(--violet); outline: none; box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }
.pe-field .at-field .input { padding-left: 32px; }
.pe-save { width: 100%; min-height: 52px; border-radius: 14px; margin-top: 6px; font-size: 1.03em; }
.pe-field .at-field .at { left: 14px; }

/* ---------- JaPassa Plus (pagamento) ---------- */
.px { padding: 6px 20px 8px; text-align: center; }
.px h2 { margin: 6px 0 4px; font-size: 1.3em; font-weight: 800; }
.px-hero { width: 64px; height: 64px; margin: 10px auto 4px; border-radius: 20px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--violet-light), var(--violet-dark)); box-shadow: 0 8px 22px rgba(124, 58, 237, .32); }
.px-hero .i { width: 34px; height: 34px; }
.px-hero.ok { background: linear-gradient(135deg, #34D399, #059669); box-shadow: 0 8px 22px rgba(16, 185, 129, .3); border-radius: 50%; }
.px-hero.ok .i { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.px-why { color: var(--text-2); margin: 0 0 14px; line-height: 1.45; }
.px-why.ok { color: #059669; font-weight: 600; }
.px-feats { list-style: none; margin: 0 0 6px; padding: 0; text-align: left; display: grid; gap: 8px; }
.px-feats li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.px-feats .i { width: 20px; height: 20px; flex: none; padding: 4px; border-radius: 50%; background: var(--lilac); color: var(--violet); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.px-h { text-align: left; font-size: .78em; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin: 18px 0 8px; font-weight: 700; }
.px-plans { display: grid; gap: 10px; }
.px-plan { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 14px; border: 2px solid var(--line); border-radius: 16px; background: var(--sheet); text-align: left; color: var(--text); }
.px-plan.on { border-color: var(--violet); background: var(--lilac); }
.px-plan small { display: block; color: var(--text-2); font-size: .82em; }
.px-plan b { font-weight: 700; }
.px-radio { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--text-2); }
.px-plan.on .px-radio { border: 6px solid var(--violet); }
.px-price { text-align: right; }
.px-price b { font-size: 1.12em; }
.px-badge { position: absolute; top: -10px; right: 14px; font-style: normal; font-size: .72em; font-weight: 800; color: #fff; background: #10B981; padding: 2px 9px; border-radius: 10px; }
.px-safe { background: var(--sheet); border: 1px solid var(--line); border-radius: 16px; padding: 12px 8px; box-shadow: 0 2px 10px rgba(23, 21, 28, .05); }
.px-safe p { margin: 0 0 10px; font-weight: 700; font-size: .92em; color: var(--text-2); }
.px-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.pc { display: inline-flex; align-items: center; justify-content: center; gap: 3px; height: 30px; min-width: 52px; padding: 0 9px; border-radius: 7px; background: #fff; border: 1px solid #E3E1E8; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); font: 800 13px/1 Arial, Helvetica, sans-serif; color: #111; }
.pc-visa { color: #1A1F71; font-style: italic; font-size: 15px; letter-spacing: .02em; }
.pc-mc i { width: 16px; height: 16px; border-radius: 50%; background: #EB001B; }
.pc-mc i + i { background: #F79E1B; margin-left: -8px; mix-blend-mode: multiply; opacity: .95; }
.pc-amex { background: #2E77D0; border-color: #2E77D0; color: #fff; letter-spacing: .04em; }
.pc-pp { font-style: italic; font-size: 14px; gap: 0; }
.pc-pp b:first-child { color: #003087; } .pc-pp b:last-child { color: #009CDE; }
.pc-ap { color: #000; font-size: 14px; font-weight: 600; }
.pc-gp { color: #5F6368; font-size: 14px; font-weight: 600; }
.pc-gp b { background: conic-gradient(from -40deg, #EA4335 0 25%, #FBBC05 0 45%, #34A853 0 70%, #4285F4 0); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 15px; }
.px-pay { width: 100%; margin-top: 16px; min-height: 52px; border-radius: 26px; font-size: 1.05em; }
.px-later { width: 100%; margin-top: 6px; }
.px-note { color: var(--text-2); font-size: .8em; line-height: 1.45; margin: 10px 4px 4px; }
.px-busy { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(11, 20, 26, .55); backdrop-filter: blur(2px); }
.px-busy > div { background: var(--sheet); color: var(--text); padding: 22px 26px; border-radius: 18px; text-align: center; min-width: 220px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.px-busy p { margin: 12px 0 0; font-weight: 600; }
.px-spin { display: inline-block; width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--lilac); border-top-color: var(--violet); animation: pxspin .8s linear infinite; }
@keyframes pxspin { to { transform: rotate(360deg); } }

/* =====================================================================
   SISTEMA DE DESIGN v2 (06/10/2026) — violeta só como destaque
   80% neutros/brancos · 15% lilás suave · 5% violeta forte.
   Fundo #F8F7FA · cards #FFF · texto #17151C/#667078 · ícones #5F676D ·
   violeta #7C3AED / #6D28D9 · lilás de seleção #EEE9FF.
   Componentes: AppHeader · SecondaryPage (.spage) · BottomNavigation (.bnav) ·
   SideDrawer (.drw) · EditableAvatar (.eav) · FormField (.ff / .input) ·
   ContactRow (.row) · SelectionCircle (.selc) · PrimaryButton (.btn) ·
   FloatingActionButton (.fab-new) · AIFloatingButton (.fab-ai) · FilterPill (.lbl-chips button)
   ===================================================================== */
body { text-rendering: optimizeLegibility; }

/* ---------- Tipografia (700 títulos · 600 nomes/itens · 400–500 texto) ---------- */
.top .title, .pe-top h1, .spage-top h1, .sheet h2 { color: var(--text); font-weight: 700; }
.row-name { font-weight: 600; letter-spacing: -.1px; }
.row.unread .row-name { font-weight: 700; }
.item .grow { font-weight: 500; }
.sx-row .grow { font-weight: 600; }

/* ---------- Avatares: iniciais sobre 8 pastéis suaves ---------- */
.av { color: #5B3FB3; background: #EDE7FB; font-weight: 600; letter-spacing: .2px; }
.av svg { stroke: currentColor; }
.avc0 { background: #EDE7FB; color: #5B3FB3; }   /* lilás */
.avc1 { background: #DCEBFB; color: #2C5D8F; }   /* azul */
.avc2 { background: #FBE3EC; color: #A23D63; }   /* rosa */
.avc3 { background: #E3E8EE; color: #4A5A6B; }   /* cinza-azulado */
.avc4 { background: #DDF2E6; color: #2F7451; }   /* verde */
.avc5 { background: #FDE8D8; color: #A35A26; }   /* pêssego */
.avc6 { background: #F3ECD9; color: #7A6330; }   /* areia */
.avc7 { background: #D9F1F1; color: #2D7272; }   /* água */
:root[data-theme="dark"] .av, :root[data-theme="dark"] .avc0 { background: #3A3160; color: #D8CCFF; }
:root[data-theme="dark"] .avc1 { background: #23384F; color: #A9CDF2; }
:root[data-theme="dark"] .avc2 { background: #4A2737; color: #F4B6CC; }
:root[data-theme="dark"] .avc3 { background: #2E3842; color: #C3CED9; }
:root[data-theme="dark"] .avc4 { background: #213F31; color: #A6E0C0; }
:root[data-theme="dark"] .avc5 { background: #4A3123; color: #F5C29C; }
:root[data-theme="dark"] .avc6 { background: #403923; color: #E3D29E; }
:root[data-theme="dark"] .avc7 { background: #1F3E3F; color: #9EDCDC; }
.av.saved { background: var(--lilac); color: var(--violet); }
.av.saved svg { stroke: currentColor; }
.row .lk-av { background: #ECEAF0 !important; color: var(--icon) !important; }
.row .lk-av svg { color: var(--icon); stroke: currentColor; }
:root[data-theme="dark"] .row .lk-av { background: #2A3942 !important; }
.av:has(img) { background: #E9E7ED; }

/* ---------- AppHeader e páginas principais ---------- */
.side, .top { background: var(--page); }
.top .top-btn, .top .icon-btn { color: var(--text); }
.top-search .icon-btn { color: var(--icon); }

/* ---------- FilterPill: ativo lilás, os outros brancos ---------- */
.lbl-chips button { background: var(--panel); border: 1px solid #E8E4EC; color: #3F3A47; font-weight: 500; }
.lbl-chips button[aria-pressed="true"] { background: var(--lilac); color: var(--violet-dark); border-color: transparent; font-weight: 600; }
:root[data-theme="dark"] .lbl-chips button { border-color: var(--line); color: var(--text); }
:root[data-theme="dark"] .lbl-chips button[aria-pressed="true"] { background: #2A2450; color: #CFC4FF; }

/* ---------- FAB: + branco; ✦ IA é o único botão violeta forte ---------- */
.fab-new { width: 56px; height: 56px; border-radius: 50%; background: #FFFFFF; color: var(--violet-dark) !important; border: 1px solid #E8E4EC; box-shadow: 0 4px 14px rgba(23, 21, 28, .12); }
.fab-new:active { background: #F5F3F8; }
.fab-new svg.i { width: 26px; height: 26px; stroke-width: 2.3; }
.fab-ai { width: 52px; height: 52px; background: linear-gradient(135deg, #7C3AED, #A855F7); box-shadow: 0 6px 16px rgba(124, 58, 237, .32); }
:root[data-theme="dark"] .fab-new { background: #233138; border-color: #2F3E47; color: #CFC4FF !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }

/* ---------- BottomNavigation: branca, ativo só pela cor ---------- */
.bnav { background: #FFFFFF; box-shadow: 0 4px 20px rgba(23, 21, 28, .08), 0 0 0 1px #ECE9F0; }
.bnav-tab { color: var(--icon); font-weight: 500; }
.bnav-tab svg { background: none !important; }
.bnav-tab[aria-selected="true"] { color: var(--violet); font-weight: 700; }
.bnav-tab[aria-selected="true"] svg { stroke-width: 2.2; }
:root[data-theme="dark"] .bnav { background: #111B21; box-shadow: 0 4px 20px rgba(0, 0, 0, .35), 0 0 0 1px var(--line); }
:root[data-theme="dark"] .bnav-tab[aria-selected="true"] { color: #B9A8FF; }

/* ---------- SideDrawer: painel branco flutuante ---------- */
.drw-scrim { background: rgba(23, 21, 28, .32); }
.drw-panel { top: calc(14px + env(safe-area-inset-top)); bottom: calc(14px + env(safe-area-inset-bottom)); right: 16px; width: calc(82% - 16px); max-width: 320px;
  border-radius: 26px; background: var(--panel); box-shadow: 0 12px 40px rgba(23, 21, 28, .16), 0 0 0 1px rgba(23, 21, 28, .04); transform: translateX(calc(100% + 24px)); }
.drw-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 14px; padding: 18px 14px 18px 18px; color: var(--text); background: none; border-bottom: 1px solid var(--line); }
.drw-head .av { width: 58px; height: 58px; font-size: 1.25em; box-shadow: none; margin: 0; }
.drw-who { display: flex; flex-direction: column; min-width: 0; }
.drw-who b { font-size: 17.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drw-who small { font-size: 14.5px; font-weight: 400; color: var(--text-2); opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drw-chev { width: 20px !important; height: 20px !important; color: #A9A4B2; }
.drw-head:active { background: var(--hover); }
.drw-list button { color: var(--text); font-weight: 500; }
.drw-list svg.i, :root[data-theme="dark"] .drw-list svg.i { color: var(--icon); }
.drw-list button[aria-current="true"], .drw-list button[aria-current="true"] svg.i { color: var(--violet); }
.drw-list button.danger, .drw-list button.danger svg.i { color: var(--err); }
.drw-foot svg.i, :root[data-theme="dark"] .drw-foot svg.i { color: var(--icon); }

/* ---------- Definições: ícones neutros, violeta só no ✓ ---------- */
.sx-ic { background: #F1EFF4; }
.sx-ic svg.i { color: var(--icon) !important; }
:root[data-theme="dark"] .sx-ic { background: #202C33; }
.sx-me small { color: var(--text-2); }
.sx-qr { background: #F1EFF4; color: var(--icon); }
:root[data-theme="dark"] .sx-qr { background: #202C33; }
.sx-h { color: var(--text-2); font-weight: 700; }

/* ---------- FormField: campos brancos arredondados ---------- */
.input { display: block; width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--field-line); border-radius: 14px; background: var(--panel); font-size: 1em; font-weight: 500; color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s; }
textarea.input { line-height: 1.4; }
.input::placeholder { color: #8A929A; font-weight: 400; }
.input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124, 58, 237, .14); }
.at-field .input { padding-left: 32px; }
.at-field .at { left: 14px; }
.field > span, .ff > span:first-child { color: var(--text); font-weight: 600; font-size: .875em; margin-bottom: 6px; }
.ff { display: flex; flex-direction: column; gap: 6px; }
.ff small { color: var(--text-2); font-size: .82em; }
.lk-pin { text-align: center; font-size: 1.6em; letter-spacing: .5em; padding-left: .5em; }
.rm-custom .input { min-height: 40px; padding: 6px 10px; width: auto; display: inline-block; }
/* O ecrã de entrada fica como está (o Cruz gosta): campos sublinhados e etiquetas violeta */
.auth .input { min-height: 0; padding: 10px 2px; border: 0; border-bottom: 2px solid var(--line); border-radius: 0; background: none; box-shadow: none; font-size: 1.05em; }
.auth .input:focus { border-color: var(--violet); box-shadow: none; }
.auth .at-field .input { padding-left: 18px; }
.auth .at-field .at { left: 0; }
.auth .field > span { color: var(--violet); }

/* ---------- PrimaryButton ---------- */
.btn { border-radius: 14px; font-weight: 600; }
.btn.block { width: 100%; min-height: 52px; font-size: 1.03em; }

/* ---------- SecondaryPage: ← Título · conteúdo · ação (sem menu de baixo) ---------- */
.spage { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; background: var(--page); animation: pe-in .22s ease-out; }
.spage-top { display: flex; align-items: center; gap: 6px; padding: calc(8px + env(safe-area-inset-top)) 8px 6px; min-height: 60px; background: var(--page); }
.spage-top h1 { flex: 1; margin: 0; font-size: 1.375em; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spage-top .icon-btn { color: var(--text); }
.spage-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 24px; width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.spage-foot { padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--page); width: 100%; max-width: 560px; margin: 0 auto; }
.spage-h { margin: 6px 4px -6px; font-size: .78em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); display: flex; justify-content: space-between; }
.spage-h small { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text-2); font-size: 1.1em; }
.card { background: var(--panel); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 3px rgba(23, 21, 28, .05); }
.card > .item + .item, .card > .row + .row { border-top: 1px solid var(--line); }

/* ---------- EditableAvatar: foto + câmara sobreposta ---------- */
.eav { position: relative; width: 108px; height: 108px; margin: 8px auto 6px; }
.eav-btn { width: 108px; height: 108px; border-radius: 50%; padding: 0; display: block; }
.eav .av { width: 108px !important; height: 108px !important; font-size: 2.3em; margin: 0; }
.eav .av img { width: 100%; height: 100%; object-fit: cover; }
.eav-cam { position: absolute; right: 0; bottom: 2px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--violet); border: 3px solid #fff; box-shadow: 0 3px 8px rgba(23, 21, 28, .18); }
.eav-cam svg.i { width: 17px; height: 17px; stroke-width: 2.2; }
:root[data-theme="dark"] .eav-cam { border-color: var(--page); }
/* o editor de perfil atual passa a usar as mesmas medidas */
.pe-av-wrap { width: 108px; height: 108px; }
.pe-av, .pe-av .av, .pe-av .av.xl { width: 108px !important; height: 108px !important; }
.pe-av .av, .pe-av .av.xl { box-shadow: none; font-size: 2.3em; }
.pe-cam { width: 36px; height: 36px; right: 0; bottom: 2px; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(23, 21, 28, .18); }
.pe-cam svg.i { width: 17px; height: 17px; }
:root[data-theme="dark"] .pe-cam { border-color: var(--page); }

/* ---------- SelectionCircle ○ / ✓ ---------- */
.selc { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #B9B4C2; display: grid; place-items: center; transition: background .12s, border-color .12s; }
.selc svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.selc.on, [aria-checked="true"] > .selc { background: var(--violet); border-color: var(--violet); }
.selc.on svg, [aria-checked="true"] > .selc svg { opacity: 1; }

/* ---------- ContactRow (linhas de pessoas em páginas) ---------- */
.prow { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 14px; text-align: left; background: var(--panel); }
.prow .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.prow b { font-weight: 600; font-size: 1.03em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow small { color: var(--text-2); font-size: .875em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow:active { background: var(--hover); }
.auth .btn { border-radius: 23px; }

/* ---------- Fase 1 · acabamentos (06/10/2026) ---------- */
/* Logótipo: duas variantes do mesmo logótipo, trocadas com o tema (sem filtros de cor) */
.top .brand-word { filter: none; height: 40px; }
.brand-word.dk, .brand-word-lg.dk { display: none !important; }
:root[data-theme="dark"] .brand-word.lt, :root[data-theme="dark"] .brand-word-lg.lt { display: none !important; }
:root[data-theme="dark"] .brand-word.dk, :root[data-theme="dark"] .brand-word-lg.dk { display: block !important; }

/* Modo escuro: superfícies neutras bem separadas (sem mais violeta) */
:root[data-theme="dark"] .input { background: var(--field); border-color: var(--field-line); }
:root[data-theme="dark"] .sx-ic, :root[data-theme="dark"] .sx-qr { background: #252A30; }
:root[data-theme="dark"] .row .lk-av { background: #252A30 !important; }
:root[data-theme="dark"] .fab-new { background: #252A30; border-color: #353B42; color: #E9EDEF !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
:root[data-theme="dark"] .bnav { background: #181C20; box-shadow: 0 4px 20px rgba(0, 0, 0, .45), 0 0 0 1px #262B31; }
:root[data-theme="dark"] .lbl-chips button { background: #181C20; border-color: #2C3137; }
:root[data-theme="dark"] .drw-panel { background: #181C20; box-shadow: 0 12px 40px rgba(0, 0, 0, .5), 0 0 0 1px #262B31; }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .sx-card, :root[data-theme="dark"] .sx-me { box-shadow: 0 0 0 1px #22272C; }

/* Encriptação nas Conversas: pequeno rodapé, logo a seguir à lista */
.list > .e2ee-foot.e2ee-mini { margin: 0; flex-direction: row; gap: 6px; padding: 14px 20px 6px; font-size: .78em; color: var(--text-2); }
.e2ee-mini > svg.i { width: 14px; height: 14px; color: var(--text-2); stroke-width: 2; }
.e2ee-mini > span { max-width: none; margin: 0; }

/* Menu lateral um pouco mais estreito */
.drw-panel { width: calc(76% - 16px); max-width: 292px; }

/* Definições: textos secundários até 2 linhas, sem cortes feios */
.sx-row small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.sx-row { padding-top: 11px; padding-bottom: 11px; }

/* Editar perfil: menos espaço vazio */
.pe-body { gap: 14px; padding-top: 4px; }
.pe-av-wrap { margin: 2px auto 4px; }
.pe-body .err:empty { display: none; }
.pe-save { margin-top: 4px; }
.list > .e2ee-foot.e2ee-mini { justify-content: center; text-align: center; }
.e2ee-mini > span { flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list > .e2ee-foot.e2ee-mini { font-size: .76em; padding: 12px 16px 6px; }

/* =====================================================================
   FASE 2 — páginas secundárias completas (page() em js/app.js)
   ===================================================================== */
.spage { overflow: hidden; }
.spage-body { gap: 0; padding: 6px 16px calc(28px + env(safe-area-inset-bottom)); touch-action: pan-y; overflow-x: hidden; }
.spage-body > * + * { margin-top: 12px; }
.spage-body > h2 { font-size: .78em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); margin: 18px 4px 8px; }
.spage-body > h2:first-child { margin-top: 6px; }
.spage-body .hint { color: var(--text-2); font-size: .9em; margin: 0 4px 4px; line-height: 1.45; }
.spage-body .pad { padding: 0; }
.spage-body p.pad { padding: 0 4px; }
/* listas de opções: itens seguidos formam um cartão branco */
.spage-body .item { background: var(--panel); padding: 12px 14px; gap: 14px; }
.spage-body .item + .item { margin-top: 0; border-top: 1px solid var(--line); }
.spage-body .item:not(.item + .item) { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.spage-body .item:not(:has(+ .item)) { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
.spage-body .item .grow { font-weight: 500; }
.spage-body .item svg.i { color: var(--icon); }
.spage-body .item.danger, .spage-body .item.danger svg.i { color: var(--err); }
.spage-body .item small { display: block; color: var(--text-2); font-weight: 400; font-size: .85em; }
.spage-body .search { margin: 0 !important; background: var(--panel); border: 1px solid var(--field-line); height: 46px; border-radius: 14px; }
:root[data-theme="dark"] .spage-body .search { background: var(--field); }
.spage-body .btn { border-radius: 14px; min-height: 50px; }
/* definições (Settings.open) */
.spage-body .setting { border-bottom: 0; background: var(--panel); border-radius: 16px; padding: 14px; margin-left: 0; margin-right: 0; }
.spage-body .setting + .setting { margin-top: 10px; }
/* cabeçalho centrado de grupos/canais/QR */
.pg-hero { text-align: center; padding: 6px 16px 4px; }
.pg-hero h2 { text-transform: none; letter-spacing: 0; font-size: 1.3em; color: var(--text); margin: 10px 0 2px !important; }
.pg-hero .hint { margin: 0 !important; }
.spage .px > h2 { display: none; }
.spage .px { padding: 0; }
.spage .nc { background: none; }
.spage .faq { background: var(--panel); border-radius: 14px; padding: 4px 14px; }
.spage .faq + .faq { margin-top: 8px; }
.spage #ncl, .spage #nacts { margin: 0; }
.spage .nc-h { margin: 18px 4px 8px; color: var(--text-2); }
.spage .nc-search { margin: 0 0 12px !important; border-radius: 14px; box-shadow: none; border: 1px solid var(--field-line); }
.spage .nc-search svg.i { color: var(--icon); }
.spage-body .seg button { background: var(--panel); border: 1px solid #E8E4EC; font-weight: 500; color: var(--text); }
.spage-body .setting .seg button { background: #F3F1F6; border-color: transparent; }
.spage-body .seg button[aria-pressed="true"] { background: var(--lilac); color: var(--violet-dark); font-weight: 600; border-color: transparent; }
:root[data-theme="dark"] .spage-body .seg button { background: #252A30; border-color: transparent; }
:root[data-theme="dark"] .spage-body .seg button[aria-pressed="true"] { background: #2A2450; color: #CFC4FF; }
.spage a.btn { display: flex !important; align-items: center; justify-content: center; }
.spage .faq summary { font-weight: 600; padding: 10px 0; }
.pf-qr h2 { text-transform: none; }
.spage-body input[type="radio"] { accent-color: var(--violet); width: 20px; height: 20px; flex: none; }
.spage-body .seg button { padding: 7px 11px; font-size: .86em; }
.spage-body h3 { font-size: .78em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); margin: 18px 4px 8px; }
.spage-body .setting .seg { flex-wrap: nowrap; gap: 5px; } .spage-body .setting .seg button { white-space: nowrap; flex: 0 1 auto; min-width: 0; padding: 7px 10px; }
/* Fase 3: Novo grupo / Info do grupo */
.spage-body .spage-h { margin-bottom: 0; }
.spage-body .spage-h + .search { margin-top: 8px !important; }
.eav .av { box-shadow: none !important; }
.spage .eav-btn .av:not(:has(img)) svg { width: 46%; height: 46%; }
/* Fase 4: menus */
.drw-back { grid-template-columns: auto 1fr; }
.drw-back > svg.i { width: 24px; height: 24px; color: var(--text); margin: 0 4px 0 -2px; }
.md-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.md-tabs::-webkit-scrollbar { display: none; }
.md-body .pf-grid { border-radius: 16px; overflow: hidden; }
.st-star { color: #F5B400 !important; width: 18px !important; height: 18px !important; }
.spage-body .md-tabs { padding: 0; }
/* Seleção de conversas (pressão longa) */
.sel-bar { flex: 1; display: flex; align-items: center; gap: 2px; min-height: 48px; margin-left: -12px; }
.sel-bar .sel-n { flex: 1; font-size: 1.12em; font-weight: 700; color: var(--text); margin-left: 4px; white-space: nowrap; }
.sel-bar .icon-btn { color: var(--text); }
.sel-bar .icon-btn svg.i { width: 23px; height: 23px; stroke-width: 1.9; }
.list > .row.sel { background: var(--lilac); } @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .list > .row.sel:hover { background: var(--lilac); } }
:root[data-theme="dark"] .list > .row.sel { background: #2A2450; }
.row { position: relative; }
.sel-tick { position: absolute; left: 46px; top: 46px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); border: 2px solid var(--panel); z-index: 1; }
.sel-tick svg.i { width: 12px; height: 12px; color: #fff; stroke-width: 2.6; }
.sel-btns { display: flex; gap: 10px; padding-top: 6px !important; }
.sel-btns .btn { flex: 1; }
/* Seleção de mensagens (pressão longa numa mensagem) */
.chat-head { position: relative; }
.msel-bar { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; gap: 0; padding: 0 4px; background: var(--bar); }
.msel-bar .sel-n { flex: 1; font-size: 1.08em; font-weight: 700; color: var(--text); margin-left: 2px; white-space: nowrap; }
.msel-bar .icon-btn { color: var(--text); width: 40px; height: 40px; }
.msel-bar .icon-btn svg.i { width: 22px; height: 22px; stroke-width: 1.9; }
#msgs .m.msel { background: rgba(124, 58, 237, .14); }
:root[data-theme="dark"] #msgs .m.msel { background: rgba(169, 148, 255, .18); }
.msel-reacts { position: fixed; z-index: 44; display: flex; gap: 2px; padding: 5px 6px; border-radius: 26px; background: var(--panel); box-shadow: 0 6px 22px rgba(23, 21, 28, .18), 0 0 0 1px var(--line); animation: fade .15s; }
.msel-reacts button { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; }
.msel-reacts button.on { background: var(--lilac); }
.msel-reacts button:active { transform: scale(1.15); }
.msel-reacts img, .msel-reacts .emoji { width: 26px; height: 26px; }
.msel-reacts .em.big { width: 28px; height: 28px; }
/* ---------- Balões no telemóvel (aprovado 06/10/2026): mais compactos e com cauda. No computador fica tudo como estava. ---------- */
@media (max-width: 899px) {
  .msgs { padding-left: 4.5%; padding-right: 4.5%; }
  .msgs .b .txt { font-weight: 500; }   /* só o texto da mensagem (hora, vistos, citações, documentos e voz ficam a 400) */
  .b { line-height: 1.3; max-width: min(85%, 560px); border-radius: 8px; }
  .m.first.in .b { border-top-left-radius: 0; }
  .m.first.out .b { border-top-right-radius: 0; }
  /* cauda: a própria cor do balão, só no primeiro balão de cada grupo */
  .m.first.in .b::before, .m.first.out .b::before { content: ''; position: absolute; top: 0; width: 8px; height: 13px; background: inherit; pointer-events: none; }
  .m.first.in .b::before { left: -7px; clip-path: polygon(100% 0, 0 0, 100% 100%); }
  .m.first.out .b::before { right: -7px; clip-path: polygon(0 0, 100% 0, 0 100%); }
  .m.stk .b::before { display: none; }
}
/* ---------- Barra de escrita: ícones com o mesmo traço e nitidez dos do cabeçalho ---------- */
.composer .box .icon-btn { color: #4F5862; }
.composer .box .icon-btn svg.i { width: 24px; height: 24px; stroke-width: 2; shape-rendering: geometricPrecision; }
:root[data-theme="dark"] .composer .box .icon-btn { color: #B4BCC4; }
/* ---------- Câmara dentro da conversa ---------- */
.camv { position: fixed; inset: 0; z-index: 86; background: #000; color: #fff; display: flex; flex-direction: column; animation: fade .15s; }
.cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.cam-video.mirror { transform: scaleX(-1); }
.camv.flash::after { content: ''; position: absolute; inset: 0; background: #fff; animation: camflash .25s ease-out forwards; }
@keyframes camflash { from { opacity: .85; } to { opacity: 0; } }
.cam-top { position: relative; z-index: 2; display: flex; padding: max(8px, env(safe-area-inset-top)) 8px 8px; background: linear-gradient(rgba(0,0,0,.45), transparent); }
.cam-top .icon-btn { color: #fff; }
.cam-msg { position: relative; z-index: 2; margin: auto 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cam-msg p { margin: 0; line-height: 1.45; opacity: .92; }
.cam-msg .btn { display: inline-flex; align-items: center; gap: 8px; }
.cam-msg[hidden] { display: none; }
.cam-foot { position: relative; z-index: 2; margin-top: auto; padding: 14px 18px max(22px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.cam-modes { display: flex; justify-content: center; gap: 22px; margin-bottom: 14px; font-size: .85em; letter-spacing: .02em; }
.cam-modes b { color: #FFD666; font-weight: 600; }
.cam-modes button { border: 0; background: none; color: #fff; opacity: .85; font: inherit; padding: 0; }
.cam-bar { display: flex; align-items: center; justify-content: space-between; }
.cam-side { width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.16); color: #fff; }
.cam-side[hidden] { visibility: hidden; display: grid; }
.cam-side svg.i { width: 24px; height: 24px; stroke-width: 2; }
.cam-shot { width: 76px; height: 76px; border-radius: 50%; border: 4px solid #fff; background: transparent; padding: 5px; display: grid; }
.cam-shot span { border-radius: 50%; background: #fff; transition: transform .1s; }
.cam-shot:active span { transform: scale(.88); }
.cam-shot:disabled { opacity: .45; }
.pv-retake { border: 0; background: rgba(255,255,255,.14); color: #fff; border-radius: 99px; padding: 7px 14px 7px 10px; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .9em; }
.pv-retake svg.i { width: 20px; height: 20px; stroke-width: 2; }
/* ---------- Videochamada (Passo 3, aprovado 06/10/2026): vídeo em ecrã inteiro, janela própria arrastável, controlos só com ícones ---------- */
.call.cvv { background: #000; color: #fff; }
.call.cvv .call-remote { z-index: 0; }
.call.cvv .call-local { right: auto; left: 0; top: 0; width: 96px; height: 136px; border-radius: 16px; border: 1.5px solid rgba(255,255,255,.55); box-shadow: 0 6px 20px rgba(0,0,0,.45); object-fit: cover; background: #1b1b22; transform: none; z-index: 7; touch-action: none; cursor: grab; }
.call.cvv .call-local.mirror { transform: scaleX(-1); }
.call.cvv .call-local.drag { border-color: #FFD666; box-shadow: 0 12px 30px rgba(0,0,0,.6); }
.vo { position: absolute; inset: 0; z-index: 1; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 80px 24px 140px; background: radial-gradient(120% 70% at 50% 38%, #2A2440 0%, #15121F 55%, #0B0A10 100%); }
.call.cvv.remote-off .vo { display: flex; }
.vo-glow { position: absolute; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(rgba(124,58,237,.32), transparent 70%); top: calc(50% - 200px); pointer-events: none; }
.vo .av.vo-av { position: relative; width: 132px; height: 132px; font-size: 44px; font-weight: 600; box-shadow: 0 0 0 4px rgba(255,255,255,.14); }
.vo-name { position: relative; font-size: 1.4em; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vo-chip { position: relative; display: inline-flex; align-items: center; gap: 7px; font-size: .82em; padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.10); color: rgba(255,255,255,.92); }
.vo-chip svg.i { width: 16px; height: 16px; stroke-width: 2; }
.vt { position: absolute; left: 0; right: 0; top: 0; z-index: 6; display: flex; align-items: center; gap: 8px; padding: max(12px, env(safe-area-inset-top)) 12px 26px; background: linear-gradient(rgba(0,0,0,.55), transparent); transition: opacity .25s, transform .25s; }
.vbtn { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(0,0,0,.28); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.vbtn svg.i { width: 24px; height: 24px; stroke-width: 2; }
.vwho { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.vwho b { font-size: 1.06em; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vst { display: flex; align-items: center; gap: 6px; font-size: .82em; opacity: .92; font-variant-numeric: tabular-nums; }
.vst .cv-dot { width: 7px; height: 7px; box-shadow: none; }
.vst svg.vlock { width: 13px; height: 13px; stroke-width: 2.2; }
.vsp { width: 40px; flex: none; }
.vctl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: center; padding: 30px 12px max(22px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0,0,0,.45)); transition: opacity .25s, transform .25s; }
.vdock { display: flex; gap: 10px; padding: 10px; border-radius: 30px; background: rgba(18,14,32,.55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.10); }
.vb { width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; transition: background .15s, color .15s; }
.vb svg.i { width: 24px; height: 24px; stroke-width: 2; }
.vb.on { background: #fff; color: #2A1A5E; }
.vb.red { background: #E5484D; }
.vb.red svg.i { transform: rotate(135deg); }
.vb[aria-disabled="true"] { opacity: .4; }
.call.cvv .cv-inc { width: 100%; max-width: 360px; color: #fff; }
.cv-big.gray { background: rgba(255,255,255,.18); }
/* controlos escondidos (toque no vídeo ou 4 s sem mexer) */
.call.cvv.ui-off .vt { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.call.cvv.ui-off .vctl { opacity: 0; transform: translateY(10px); pointer-events: none; }
/* horizontal: controlos numa coluna à direita, o vídeo usa toda a largura */
.call.cvv.land .vctl { left: auto; top: 0; bottom: 0; right: 0; width: auto; flex-direction: column; justify-content: center; padding: 12px max(14px, env(safe-area-inset-right)) 12px 40px; background: linear-gradient(90deg, transparent, rgba(0,0,0,.45)); }
.call.cvv.land .vdock { flex-direction: column; gap: 8px; padding: 8px; }
.call.cvv.land .vb { width: 46px; height: 46px; }
.call.cvv.land .vt { right: 96px; padding-bottom: 16px; }
.call.cvv.land .vwho { align-items: flex-start; }
.call.cvv.land .vsp { display: none; }
.call.cvv.land .vo { padding: 60px 110px 20px 24px; gap: 8px; }
.call.cvv.land .vo .av.vo-av { width: 92px; height: 92px; font-size: 32px; }
.call.cvv.land.ui-off .vctl { transform: translateX(10px); }
.call.cvv.land .cv-inc { flex-direction: column; gap: 10px; padding: 0; }
/* ---------- "a escrever •••": verde mais forte (só neste estado) e 3 pontos animados ---------- */
.chat-head .status.live, .row-msg.typing { color: #0D874D; }
:root[data-theme="dark"] .chat-head .status.live, :root[data-theme="dark"] .row-msg.typing { color: #34D399; }
.chat-head .status.live, .row-msg.typing { display: flex; align-items: center; min-width: 0; }
.status.live .tt, .row-msg.typing .tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdots { flex: none; display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; vertical-align: middle; position: relative; top: -1px; }
.tdots i { width: 3.5px; height: 3.5px; border-radius: 50%; background: currentColor; opacity: .3; animation: tdot 1.3s ease-in-out infinite; }
.tdots i:nth-child(2) { animation-delay: .18s; } .tdots i:nth-child(3) { animation-delay: .36s; }
@keyframes tdot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
/* ---------- Caixa de escrever: o texto escrito com o mesmo peso das mensagens; o "Mensagem" fica secundário ---------- */
@media (max-width: 899px) {
  .composer textarea { font-weight: 500; }
  .composer textarea::placeholder { font-weight: 400; }
}
/* ---------- Fotos no balão: o tamanho vem de imgBox() (não esticar imagens pequenas) ---------- */
.media img { min-width: 0; max-height: none; max-width: none; }
.b:has(> button.media) { width: min-content; }   /* o balão fica com a largura da foto (a legenda acompanha) */
/* ---------- Reações (06/10/2026): barra rápida 44 px + ＋, reação minha realçada, "quem reagiu" ---------- */
.msel-reacts { gap: 1px; padding: 4px 6px; border-radius: 28px; }
.msel-reacts button { width: 44px; height: 44px; font-size: 26px; transition: transform .12s, background-color .12s; }
.msel-reacts .em.big, .msel-reacts img, .msel-reacts .emoji { width: 28px; height: 28px; }
.msel-reacts .rx-plus { color: var(--text-2); background: rgba(120, 120, 140, .14); width: 36px; height: 36px; margin: 4px 0 4px 3px; }
.msel-reacts .rx-plus svg { width: 22px; height: 22px; }
.quick-reacts button svg { width: 24px; height: 24px; color: var(--text-2); }
.reacts { color: inherit; font: inherit; font-size: .82em; line-height: 1.35; align-items: center; cursor: pointer; }
.reacts .rx { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px; border-radius: 9px; }
.reacts .rx.on { background: var(--lilac); padding: 0 4px; }
.reacts .rx b { font-weight: 500; font-size: .92em; color: var(--text-2); }
.reacts .rx.on b { color: var(--violet-dark); }
:root[data-theme="dark"] .reacts .rx.on b { color: #CFC4FF; }
.reacts.rx-pop { animation: rxpop .32s ease-out; }
@keyframes rxpop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
.rx-tabs { display: flex; gap: 6px; padding: 2px 14px 10px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.rx-tabs button { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border-radius: 17px; background: rgba(120, 120, 140, .12); color: var(--text); font-size: .9em; }
.rx-tabs button b { font-weight: 500; color: var(--text-2); }
.rx-tabs button.on { background: var(--lilac); color: var(--violet-dark); }
.rx-tabs button.on b { color: inherit; }
:root[data-theme="dark"] .rx-tabs button.on { color: #CFC4FF; }
.rx-tabs .em.big { width: 20px; height: 20px; }
.rx-list { max-height: min(52vh, 420px); overflow-y: auto; padding: 4px 0; }
.rx-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 16px; text-align: left; color: inherit; font: inherit; }
.rx-row .grow { flex: 1; min-width: 0; }
.rx-row .grow b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-row small { display: block; color: var(--text-2); font-size: .82em; }
.rx-row .rx-e .em.big { width: 26px; height: 26px; }
button.rx-row:active { background: rgba(120, 120, 140, .12); }
.rx-more { display: block; margin: 6px auto 0; padding: 8px 16px; border-radius: 18px; color: var(--violet); font-weight: 500; }
.rx-more[hidden] { display: none; }
.rx-note { margin: 6px 16px 0; color: var(--text-2); font-size: .84em; }
/* Online (presença) com o mesmo verde do "a escrever"; última atividade e @nome continuam neutros */
.chat-head .status.on { color: #0D874D; }
:root[data-theme="dark"] .chat-head .status.on { color: #34D399; }
/* ---------- Atualizações (06/10/2026): aviso discreto na lista + painel ---------- */
.upd-bar { display: flex; align-items: center; gap: 12px; width: calc(100% - 28px); margin: 4px 14px 8px; padding: 10px 14px; border-radius: 14px; background: var(--lilac); color: var(--text); text-align: left; font-size: .9em; }
.upd-bar svg { flex: none; width: 22px; height: 22px; color: var(--violet); }
.upd-bar .grow { flex: 1; min-width: 0; }
.upd-bar small { display: block; color: var(--text-2); font-size: .86em; }
.upd-bar b { flex: none; color: var(--violet); font-weight: 600; }
:root[data-theme="dark"] .upd-bar svg, :root[data-theme="dark"] .upd-bar b { color: #B9A8FF; }
.upd-sheet { padding: 6px 20px 4px; text-align: center; }
.upd-sheet .upd-ic { width: 52px; height: 52px; margin: 6px auto 8px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--violet); }
:root[data-theme="dark"] .upd-sheet .upd-ic { color: #B9A8FF; }
.upd-sheet .upd-ic svg { width: 26px; height: 26px; }
.upd-sheet h2 { margin: 0 0 6px; font-size: 1.15em; }
.upd-sheet p { margin: 0 0 6px; color: var(--text-2); font-size: .92em; }
.upd-sheet .upd-must { color: var(--err); }
.upd-btns { display: flex; gap: 10px; margin-top: 14px; }
.upd-btns .btn { flex: 1; }
/* Reações v2 (06/10/2026): indicador maior e fácil de tocar (área de toque ~44 px), barra só temporária */
.reacts { bottom: -19px; right: 8px; gap: 4px; padding: 2px 8px; min-height: 26px; border-radius: 13px; font-size: 14px; line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 0 0 1px var(--line); }
.reacts::before { content: ''; position: absolute; inset: -10px -8px; }
.reacts .rx { gap: 3px; padding: 2px 3px; border-radius: 10px; }
.reacts .rx.on { padding: 2px 6px; }
.reacts .em, .reacts .rx img { width: 18px; height: 18px; }
.reacts .rx b { font-size: 13px; }
.m.has-react { margin-bottom: 22px; }
/* Aviso "Mensagens encriptadas de ponta a ponta": ao centro do espaço livre por baixo das conversas (nunca por cima delas) */
.list > .e2ee-foot.e2ee-mini { margin: auto 0; padding: 18px 16px 52px; }   /* 52 px: fica sempre acima dos botoes IA/+ */
.list.e2-tight > .e2ee-foot.e2ee-mini { padding-right: 80px; }
.upd-sheet p b { color: var(--text); font-weight: 600; }
/* Visualizador: Partilhar + Fechar (07/10/2026) */
.viewer .viewer-bar { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px; display: flex; gap: 6px; z-index: 1; }
.viewer .viewer-bar .icon-btn { position: static; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: rgba(0,0,0,.35); }
.viewer .viewer-bar .icon-btn svg { width: 22px; height: 22px; }
.viewer .viewer-bar .icon-btn.busy { opacity: .5; pointer-events: none; }
.share-note { margin: 0 20px 4px; color: var(--text-2); font-size: .92em; }
.share-acts .btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.share-acts .btn svg { width: 20px; height: 20px; }
/* =====================================================================
   COMPUTADOR — Etapa 1 (07/10/2026): estrutura base em grelha.
   < 900 px: telemóvel, NADA muda.  900–1279: computador compacto.  ≥ 1280: completo (painel de informação opcional).
   [ navegação --dk-nav ] [ lista --dk-list ] [ área principal 1fr ] ( [ informação --dk-info ] )
   ===================================================================== */
:root {
  --dk-nav: 72px;                                   /* coluna de navegação */
  --dk-list-min: 320px; --dk-list-ideal: 28vw; --dk-list-max: 440px;
  --dk-list: clamp(var(--dk-list-min), var(--dk-list-ideal), var(--dk-list-max));
  --dk-info: 360px;                                 /* painel de informação (Etapa 3+) */
  --dk-read-max: 1040px;                            /* zona de leitura da conversa (Etapa 3) */
}
@media (min-width: 900px) {
  .shell { display: grid; grid-template-columns: var(--dk-nav) var(--dk-list) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100%; min-height: 0; overflow: hidden; }
  /* navegação: coluna própria (mesmo elemento da barra do telemóvel, movido por Desk.place) */
  .shell > .bnav { grid-column: 1; grid-row: 1; position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; width: auto; height: auto; min-height: 0;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; padding: 12px 0; margin: 0;
    border-radius: 0; box-shadow: none; border-right: 1px solid var(--line); transform: none; opacity: 1; pointer-events: auto; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; z-index: 2; }
  .shell > .bnav .bnav-tab { width: 100%; }
  /* lista / contexto */
  .shell > .side { grid-column: 2; grid-row: 1; width: auto; padding-left: 0; min-width: 0; min-height: 0; overflow: hidden; border-right: 1px solid var(--line); }
  .shell.in-chat > .side { display: flex; }
  .shell > .side > .list { min-height: 0; overscroll-behavior: contain; }
  /* área principal: ocupa todo o resto */
  .shell > .chat, .shell.in-chat > .chat { grid-column: 3; grid-row: 1; display: flex; min-width: 0; min-height: 0; overflow: hidden; }
  .shell > .chat .msgs { min-height: 0; overscroll-behavior: contain; }
}
@media (min-width: 1280px) {
  .shell.has-info { grid-template-columns: var(--dk-nav) var(--dk-list) minmax(0, 1fr) var(--dk-info); }
  .shell.has-info > .dk-info { grid-column: 4; grid-row: 1; min-width: 0; min-height: 0; overflow-y: auto; border-left: 1px solid var(--line); background: var(--panel); }
}
/* =====================================================================
   COMPUTADOR — Etapa 2 (07/10/2026): barra lateral, cabeçalho + pesquisa, filtros, Estados, lista, ⌄ e menu, estado vazio.
   Tudo dentro de min-width: 900px — o telemóvel não muda.
   ===================================================================== */
@media (min-width: 900px) {
  /* --- barra lateral --- */
  .shell > .bnav { align-items: center; gap: 2px; padding: 14px 0 12px; background: var(--panel); }
  .shell > .bnav .dk-logo { width: 40px; height: 40px; border-radius: 12px; margin: 0 0 16px; flex: none; }
  .shell > .bnav .bnav-tab { position: relative; width: 60px; flex: none; padding: 9px 0 7px; gap: 4px; border-radius: 12px; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--icon); cursor: pointer; }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .shell > .bnav .bnav-tab:hover { background: var(--hover); } }
  .shell > .bnav .bnav-tab svg { width: 24px; height: 24px; padding: 0; border-radius: 0; background: none !important; stroke-width: 1.8; }
  .shell > .bnav .bnav-tab[aria-selected="true"] { color: var(--violet); font-weight: 600; }
  .shell > .bnav .bnav-tab[aria-selected="true"] svg { stroke-width: 2.1; }
  .shell > .bnav .bnav-tab[aria-selected="true"]::before { content: ''; position: absolute; left: -6px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--violet); }
  .shell > .bnav .bnav-tab .bdg { top: 3px; left: calc(50% + 4px); }
  .shell > .bnav .bnav-tab:focus-visible, .shell > .bnav .dk-ai:focus-visible, .shell > .bnav .dk-me:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
  .shell > .bnav .dk-sp { flex: 1 1 auto; min-height: 8px; }
  .shell > .bnav .dk-ai { flex: none; width: 60px; padding: 9px 0 7px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--violet); font-size: 11px; font-weight: 600; line-height: 1.15; text-align: center; }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .shell > .bnav .dk-ai:hover { background: var(--lilac); } }
  .shell > .bnav .dk-ai svg { width: 24px; height: 24px; }
  .shell > .bnav .dk-sep { flex: none; width: 36px; height: 1px; background: var(--line); margin: 8px 0; }
  .shell > .bnav .dk-me { flex: none; width: 40px; height: 40px; border-radius: 50%; padding: 0; }
  .shell > .bnav .dk-me .av { width: 40px; height: 40px; font-size: .85em; box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--line); }
  :root[data-theme="dark"] .shell > .bnav .bnav-tab[aria-selected="true"], :root[data-theme="dark"] .shell > .bnav .dk-ai { color: #B9A8FF; }
  :root[data-theme="dark"] .shell > .bnav .bnav-tab[aria-selected="true"]::before { background: #B9A8FF; }
  @media (max-height: 600px) { .shell > .bnav .dk-logo { margin-bottom: 8px; } .shell > .bnav .bnav-tab, .shell > .bnav .dk-ai { padding: 6px 0 5px; } .shell > .bnav .dk-sep { margin: 4px 0; } }
  /* --- coluna: fundo e botões do telemóvel escondidos --- */
  .shell > .side { background: var(--panel); }
  .shell > .side .fabs { display: none !important; }
  .shell > .side:has(.fabs:not(:empty)) .list { padding-bottom: 12px; }
  /* --- cabeçalho "Conversas" + pesquisa --- */
  .side > .top.dk-top { display: block; min-height: 0; padding: 16px 14px 4px 18px; background: var(--panel); }
  .dk-head { display: flex; align-items: center; gap: 6px; }
  .dk-head .dk-title { flex: 1; margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.3px; color: var(--text); }
  .dk-head .icon-btn { width: 38px; height: 38px; color: var(--icon); }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .dk-head .icon-btn:hover { background: var(--hover); } }
  .dk-head .dk-new { background: var(--lilac); color: var(--violet-dark); }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .dk-head .dk-new:hover { background: #E3DBFF; } }
  .dk-head .icon-btn svg.i { width: 22px; height: 22px; }
  .dk-search { display: flex; align-items: center; gap: 12px; height: 42px; margin: 12px 0 8px; padding: 0 6px 0 16px; border-radius: 21px; background: #F1EFF4; border: 1px solid transparent; color: var(--text-2); cursor: text; transition: border-color .15s, box-shadow .15s, background .15s; }
  .dk-search svg.i { width: 19px; height: 19px; flex: none; }
  .dk-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; font-size: 14.5px; color: var(--text); }
  .dk-search input::placeholder { color: var(--text-2); opacity: 1; }
  .dk-search input::-webkit-search-cancel-button { display: none; }
  .dk-search .icon-btn { width: 32px; height: 32px; color: var(--text-2); }
  .dk-search:focus-within { background: var(--panel); border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124, 58, 237, .12); }
  :root[data-theme="dark"] .dk-search { background: #20252A; }
  :root[data-theme="dark"] .dk-search:focus-within { background: #181C20; border-color: #8B5CF6; box-shadow: 0 0 0 3px rgba(139, 92, 246, .2); }
  :root[data-theme="dark"] .dk-head .dk-new { background: #2A2450; color: #CFC4FF; }
  /* --- filtros --- */
  .shell > .side .lbl-chips { padding: 2px 16px 10px; gap: 6px; background: var(--panel); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .shell > .side .lbl-chips button { padding: 0 12px; height: 32px; border: 0; background: #F1EFF4; color: var(--text-2); font-size: 13.5px; font-weight: 500; cursor: pointer; }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .shell > .side .lbl-chips button:hover { background: #E9E5F0; } }
  .shell > .side .lbl-chips button[aria-pressed="true"] { background: var(--lilac); color: var(--violet-dark); font-weight: 600; }
  :root[data-theme="dark"] .shell > .side .lbl-chips button { background: #20252A; }
  :root[data-theme="dark"] .shell > .side .lbl-chips button[aria-pressed="true"] { background: #2A2450; color: #CFC4FF; }
  /* --- Estados (o mesmo sistema; só mais compacto) --- */
  .shell > .side .st-strip { gap: 4px; padding: 4px 12px 12px; margin: 0 -8px 4px; background: var(--panel); border-bottom: 1px solid var(--line); }
  .shell > .side .st-b { width: 60px; gap: 4px; cursor: pointer; }
  .shell > .side .st-ring2 { width: 50px; height: 50px; padding: 2px; }
  .shell > .side .st-add { top: 32px; right: 4px; width: 20px; height: 20px; font-size: 15px; }
  .shell > .side .st-n { max-width: 60px; font-size: 11.5px; color: var(--text-2); }
  /* --- lista --- */
  .shell > .side .list { padding: 4px 8px 8px; background: var(--panel); }
  .shell > .side .list > .row { height: 68px; padding: 0 10px; gap: 12px; border-radius: 10px; background: none; }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .shell > .side .list > .row:hover { background: var(--hover); } }
  .shell > .side .list > .row[aria-current="true"] { background: var(--lilac); }
  .shell > .side .list > .row.dk-ctx { background: var(--hover); }
  .shell > .side .list > .row .av { width: 46px; height: 46px; }
  .shell > .side .list > .row .row-name { font-size: 15px; }
  .shell > .side .list > .row .row-msg { font-size: 13.5px; }
  .shell > .side .list > .row .row-time { font-size: 12px; }
  .shell > .side .list > .row:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }
  :root[data-theme="dark"] .shell > .side .list > .row[aria-current="true"] { background: #2A2450; }
  /* ⌄ da conversa: aparece ao passar o rato, com o teclado e enquanto o menu está aberto */
  .dk-rx { display: block; position: relative; height: 0; }
  .dk-rchev { position: absolute; right: 10px; top: -30px; width: 26px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--icon); background: var(--hover); opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 1; }
  .dk-rchev svg.i { width: 18px; height: 18px; }
  .list > .row:focus-visible + .dk-rx .dk-rchev, .dk-rchev:focus-visible, .dk-rchev.open { opacity: 1; pointer-events: auto; } @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .list > .row:hover + .dk-rx .dk-rchev, :where(:root:not([data-input="touch"])) .dk-rx:hover .dk-rchev { opacity: 1; pointer-events: auto; } }
  .list > .row[aria-current="true"] + .dk-rx .dk-rchev { background: #E3DBFF; }
  .dk-rchev.open { color: var(--text); } @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .dk-rchev:hover { color: var(--text); } }
  .dk-rchev:focus-visible { outline: 2px solid var(--violet); }
  .list > .row:has(+ .dk-rx) .badge, .list > .row:has(+ .dk-rx) .row-line > .meta-ic { transition: opacity .12s; }
  .list > .row:has(+ .dk-rx .dk-rchev.open) .row-line:last-child > .badge, .list > .row:has(+ .dk-rx .dk-rchev.open) .row-line:last-child > .meta-ic { opacity: 0; } @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .list > .row:hover:has(+ .dk-rx) .row-line:last-child > .badge, :where(:root:not([data-input="touch"])) .list > .row:hover:has(+ .dk-rx) .row-line:last-child > .meta-ic { opacity: 0; } }
  :root[data-theme="dark"] .list > .row[aria-current="true"] + .dk-rx .dk-rchev { background: #3A3270; }
  /* resultados da pesquisa */
  .dk-res { padding: 12px 10px 4px; font-size: 12.5px; font-weight: 600; color: var(--violet); letter-spacing: .2px; }
  :root[data-theme="dark"] .dk-res { color: #B9A8FF; }
  .dk-pill { flex: none; margin-left: auto; padding: 3px 10px; border-radius: 12px; background: var(--lilac); color: var(--violet-dark); font-size: 12px; font-weight: 600; }
  :root[data-theme="dark"] .dk-pill { background: #2A2450; color: #CFC4FF; }
  .dk-look { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 14px; border-radius: 10px; color: var(--violet-dark); font-size: 14px; text-align: left; }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .dk-look:hover { background: var(--hover); } }
  .dk-look svg.i { width: 20px; height: 20px; }
  /* --- menu contextual (genérico) --- */
  .dk-menu { position: fixed; z-index: 120; min-width: 230px; max-width: 300px; padding: 6px; border-radius: 12px; background: var(--sheet); box-shadow: 0 12px 32px rgba(23, 21, 28, .18), 0 0 0 1px var(--line); animation: fade .12s; }
  .dk-mi { display: flex; align-items: center; gap: 12px; width: 100%; height: 36px; padding: 0 10px; border-radius: 8px; font-size: 14px; color: var(--text); text-align: left; white-space: nowrap; cursor: pointer; }
  .dk-mi svg.i { width: 19px; height: 19px; color: var(--icon); }
  .dk-mi:focus-visible { background: var(--hover); outline: none; } @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .dk-mi:hover { background: var(--hover); outline: none; } }
  .dk-mi.d, .dk-mi.d svg.i { color: var(--err); }
  .dk-msep { height: 1px; margin: 4px 6px; background: var(--line); }
  :root[data-theme="dark"] .dk-menu { box-shadow: 0 12px 32px rgba(0, 0, 0, .5), 0 0 0 1px var(--line); }
  /* --- estado vazio da área principal --- */
  .chat-empty.dk-empty { position: relative; background: var(--bg); }
  .dk-empty .dke-c { max-width: 440px; margin-top: -40px; }
  .dk-empty .dke-logo { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 6px 20px rgba(124, 58, 237, .18); }
  .dk-empty h2 { margin: 18px 0 8px; font-size: 21px; font-weight: 600; color: var(--text); }
  .dk-empty p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
  .dk-empty .dke-e2ee { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; }
  .dk-empty .dke-e2ee svg.i { width: 14px; height: 14px; }
}
/* =====================================================================
   COMPUTADOR — Etapa 3 (07/10/2026): conversa aberta. Zona de leitura centrada, balões à medida da zona,
   cabeçalho com pesquisa, ⌄ das mensagens e menu, composer alinhado. Tudo dentro de min-width: 900px.
   ===================================================================== */
.dk-only { display: none; }
@media (min-width: 900px) {
  .shell > .chat { --dk-pad: max(24px, calc((100% - var(--dk-read-max)) / 2)); }
  .chat-head .dk-only { display: grid; }
  .shell > .chat .chat-head { padding-inline: 16px 12px; gap: 8px; min-height: 62px; }
  .shell > .chat .chat-head .who { padding-left: 4px; cursor: pointer; }
  .shell > .chat .chat-head .icon-btn { border-radius: 50%; }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .shell > .chat .chat-head .icon-btn:hover { background: var(--hover); } }
  /* zona de leitura: recebidas à esquerda da zona, enviadas à direita */
  .shell > .chat .msgs { padding: 14px var(--dk-pad) 10px; }
  .shell > .chat .b { max-width: min(75%, 640px); line-height: 1.38; user-select: text; -webkit-user-select: text; cursor: auto; }
  .shell > .chat .m.has-react { margin-bottom: 20px; }
  .shell > .chat .media img { max-height: 400px; }
  /* barras por cima da caixa e a própria caixa: mesma largura da zona */
  .shell > .chat #pre .pre, .shell > .chat .e2w { margin-inline: var(--dk-pad); }
  .shell > .chat .cu-bar { padding-inline: var(--dk-pad); }
  .shell > .chat .composer { padding: 6px var(--dk-pad) 12px; }
  .shell > .chat .composer .box { border-radius: 26px; }
  /* ⌄ da mensagem (rato/teclado): ao lado do balão, no espaço livre (nunca tapa texto nem hora; não empurra nada) */
  .dk-mchev { position: absolute; top: 2px; right: -34px; z-index: 2; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border-radius: 50%;
    color: var(--text-2); background: var(--panel); box-shadow: 0 1px 3px rgba(23, 21, 28, .16), 0 0 0 1px var(--line); opacity: 0; pointer-events: none; transition: opacity .12s; cursor: pointer; }
  .m.out .dk-mchev { right: auto; left: -34px; }
  .dk-mchev svg.i { width: 18px; height: 18px; }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .dk-mchev:hover { color: var(--text); } }
  .dk-mchev.on, .dk-mchev.open, .dk-mchev:focus-visible { opacity: 1; pointer-events: auto; }
  .dk-mchev:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
  .msgs .b.dk-ctx, .msgs .m:has(.dk-mchev.open) .b { filter: brightness(.97); }
  :root[data-theme="dark"] .msgs .b.dk-ctx, :root[data-theme="dark"] .msgs .m:has(.dk-mchev.open) .b { filter: brightness(1.12); }
  /* reações no topo do menu */
  .dk-mrx { display: flex; justify-content: space-between; gap: 2px; padding: 2px 2px 6px; }
  .dk-mrx button { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; transition: transform .1s, background .12s; }
  .dk-mrx button:focus-visible { background: var(--hover); outline: none; transform: scale(1.12); } @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .dk-mrx button:hover { background: var(--hover); outline: none; transform: scale(1.12); } }
  .dk-mrx button.on { background: var(--lilac); }
  :root[data-theme="dark"] .dk-mrx button.on { background: #2A2450; }
  .dk-mrx .em, .dk-mrx img { width: 24px; height: 24px; }
  .dk-mrx .rx-plus svg.i { width: 18px; height: 18px; color: var(--icon); }
  .dk-menu:has(.dk-mrx) { min-width: 264px; }
}
/* ---------- Atualizar: estado visível (07/10/2026). Barra indeterminada (o navegador não dá progresso real da ativação). ---------- */
.upd-sheet.upd-st h2 { margin-top: 2px; }
.upd-prog { position: relative; height: 4px; max-width: 280px; margin: 14px auto 12px; border-radius: 4px; background: var(--lilac); overflow: hidden; }
.upd-prog i { position: absolute; top: 0; bottom: 0; left: 0; width: 38%; border-radius: 4px; background: var(--violet); animation: updbar 1.4s cubic-bezier(.45, 0, .25, 1) infinite; }
.upd-prog.full i { width: 100%; animation: none; transition: width .3s; }
@keyframes updbar { 0% { transform: translateX(-105%); } 100% { transform: translateX(270%); } }
@media (prefers-reduced-motion: reduce) { .upd-prog i { animation-duration: 2.6s; } }
:root[data-theme="dark"] .upd-prog { background: #2A2450; }
:root[data-theme="dark"] .upd-prog i { background: #A78BFA; }
.upd-sheet .upd-ic.ok { background: #E3F5EC; color: #0D874D; }
.upd-sheet .upd-ic.err { background: #FDE2E1; color: var(--err); }
:root[data-theme="dark"] .upd-sheet .upd-ic.ok { background: rgba(52, 211, 153, .14); color: #34D399; }
:root[data-theme="dark"] .upd-sheet .upd-ic.err { background: rgba(240, 82, 82, .14); }
.upd-sheet.upd-st .upd-ic:not(.ok):not(.err) svg { animation: pxspin 1.6s linear infinite; }
.upd-sheet .btn:disabled { opacity: .6; }
.upd-spin { display: inline-block; width: 15px; height: 15px; margin-right: 8px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pxspin .8s linear infinite; }
/* =====================================================================
   COMPUTADOR — revisão da coluna esquerda (1.0.92): sem faixa de Estados, filtros fixos + ＋ (etiquetas),
   mais nitidez (contraste, pesos, traço dos ícones) e hierarquia nome / prévia / hora. Tudo ≥900 px.
   ===================================================================== */
@media (min-width: 900px) {
  .shell > .side { --dk-t2: #4E575F; --dk-t3: #687179; --dk-ic: #434B52; }
  :root[data-theme="dark"] .shell > .side, :root[data-theme="dark"] .shell > .bnav { --dk-t2: #B4BCC3; --dk-t3: #98A1A9; --dk-ic: #C9D0D6; }
  .shell > .bnav { --dk-t2: #4E575F; --dk-ic: #434B52; }
  /* barra lateral */
  .shell > .bnav .bnav-tab { color: var(--dk-t2); font-size: 11.5px; font-weight: 500; }
  .shell > .bnav .bnav-tab svg { stroke-width: 2; color: var(--dk-ic); }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .shell > .bnav .bnav-tab:hover { background: #F1EEF6; color: var(--text); } }
  .shell > .bnav .bnav-tab[aria-selected="true"], .shell > .bnav .bnav-tab[aria-selected="true"] svg { color: var(--violet); }
  .shell > .bnav .bnav-tab[aria-selected="true"] svg { stroke-width: 2.25; }
  .shell > .bnav .dk-ai svg { stroke-width: 2; }
  @media (any-hover: hover) { :root[data-theme="dark"]:where(:not([data-input="touch"])) .shell > .bnav .bnav-tab:hover { background: #22272C; color: var(--text); } }
  :root[data-theme="dark"] .shell > .bnav .bnav-tab[aria-selected="true"], :root[data-theme="dark"] .shell > .bnav .bnav-tab[aria-selected="true"] svg { color: #C4B5FD; }
  /* cabeçalho e pesquisa */
  .dk-head .dk-title { font-size: 22px; font-weight: 700; color: var(--text); }
  .dk-head .icon-btn { color: var(--dk-ic); }
  .dk-head .icon-btn svg.i { stroke-width: 2.1; }
  .dk-head .dk-new { color: var(--violet-dark); }
  .dk-search { background: #EFEDF3; color: var(--dk-t2); }
  .dk-search svg.i { stroke-width: 2.2; color: var(--dk-t2); }
  .dk-search input { color: var(--text); }
  .dk-search input::placeholder { color: var(--dk-t3); }
  :root[data-theme="dark"] .dk-search { background: #23282D; }
  /* filtros: 4 fixos + etiqueta escolhida + ＋ — sem corte nem deslizar (se a coluna for estreita, a etiqueta passa à linha seguinte) */
  .shell > .side .lbl-chips.dk-chips { flex-wrap: wrap; overflow: visible; touch-action: auto; -webkit-mask-image: none; mask-image: none; padding: 2px 14px 10px 16px; gap: 6px; }
  .shell > .side .dk-chips button { height: 32px; padding: 0 12px; border-radius: 16px; color: var(--dk-t2); font-weight: 500; }
  .shell > .side .dk-chips button[aria-pressed="true"] { color: var(--violet-dark); font-weight: 600; }
  .shell > .side .dk-chips .dk-lmore { width: 32px; padding: 0; justify-content: center; color: var(--dk-ic); }
  .shell > .side .dk-chips .dk-lmore svg.i { width: 18px; height: 18px; stroke-width: 2.2; }
  .shell > .side .dk-chips .dk-lmore.open { background: var(--lilac); color: var(--violet-dark); }
  .dk-lsel { display: inline-flex; align-items: center; border-radius: 16px; background: var(--lilac); }
  .shell > .side .dk-chips .dk-lsel button { background: none; }
  .shell > .side .dk-chips .dk-lsel button[data-lf] { padding: 0 2px 0 12px; max-width: 150px; }
  .dk-lsel .dk-ln { overflow: hidden; text-overflow: ellipsis; }
  .shell > .side .dk-chips .dk-lx { width: 28px; padding: 0; justify-content: center; color: var(--violet-dark); }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .shell > .side .dk-chips .dk-lx:hover { background: #E3DBFF; } }
  .dk-lx svg.i { width: 15px; height: 15px; stroke-width: 2.4; }
  :root[data-theme="dark"] .dk-lsel { background: #2A2450; }
  :root[data-theme="dark"] .shell > .side .dk-chips button[aria-pressed="true"], :root[data-theme="dark"] .shell > .side .dk-chips .dk-lx, :root[data-theme="dark"] .shell > .side .dk-chips .dk-lmore.open { color: #D6CCFF; }
  :root[data-theme="dark"] .shell > .side .dk-chips .dk-lmore.open { background: #2A2450; }
  @media (any-hover: hover) { :root[data-theme="dark"]:where(:not([data-input="touch"])) .shell > .side .dk-chips .dk-lx:hover { background: #352D63; } }
  @media (max-width: 1150px) { .shell > .side .lbl-chips.dk-chips { gap: 4px; padding-inline: 10px; } .shell > .side .dk-chips button { padding: 0 9px; font-size: 12.5px; } .shell > .side .dk-chips .dk-lmore { width: 30px; } }
  .dk-lmenu { max-height: min(420px, calc(100vh - 16px)); overflow-y: auto; }
  .dk-mdot { width: 12px; height: 12px; margin: 0 4px 0 3px; border-radius: 50%; flex: none; }
  .dk-mdot.on { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px currentColor; }
  /* lista: nome forte · prévia secundária legível · hora discreta mas nítida */
  .shell > .side .list > .row .row-name { font-size: 15.5px; font-weight: 600; color: var(--text); letter-spacing: -.1px; }
  .shell > .side .list > .row.unread .row-name { font-weight: 700; }
  .shell > .side .list > .row .row-msg, .shell > .side .list > .row .row-msg .txt { font-size: 14px; color: var(--dk-t2); }
  .shell > .side .list > .row.unread .row-msg, .shell > .side .list > .row.unread .row-msg .txt { color: var(--text); font-weight: 500; }
  .shell > .side .list > .row .row-msg.typing { color: #0D874D; }
  :root[data-theme="dark"] .shell > .side .list > .row .row-msg.typing { color: #34D399; }
  .shell > .side .list > .row .row-time { font-size: 12px; font-weight: 500; color: var(--dk-t3); font-variant-numeric: tabular-nums; }
  .shell > .side .list > .row.unread .row-time { color: var(--violet); font-weight: 600; }
  :root[data-theme="dark"] .shell > .side .list > .row.unread .row-time { color: #C4B5FD; }
  .shell > .side .list > .row .row-line { gap: 8px; }
  .shell > .side .list > .row .row-body { gap: 3px; }
  .shell > .side .list > .row .meta-ic, .shell > .side .list > .row .row-msg svg.i { color: var(--dk-t3); stroke-width: 2; }
  .shell > .side .list > .row .badge { min-width: 20px; height: 20px; font-size: 11.5px; font-weight: 700; }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .shell > .side .list > .row:hover { background: #F4F2F8; } }
  @media (any-hover: hover) { :root[data-theme="dark"]:where(:not([data-input="touch"])) .shell > .side .list > .row:hover { background: #1F2428; } }
  .shell > .side .e2ee-foot { color: var(--dk-t3); font-size: 12.5px; }
  .shell > .side .e2ee-foot svg { stroke-width: 2.2; }
}
/* =====================================================================
   COMPUTADOR — Etapa 4 (07/10/2026): popovers junto aos elementos, seletor de emojis flutuante, "Quem reagiu",
   menus do ⋮ e do clip, confirmações centradas. Tudo ≥900 px; no telemóvel ficam as janelas de baixo de sempre.
   ===================================================================== */
@media (min-width: 900px) {
  /* popover (janela junto ao elemento): sem escurecer o fundo; clicar fora fecha sem carregar no que está por baixo */
  .scrim.dk-pop-scrim { background: transparent; animation: none; display: block; }
  .sheet.dk-pop { position: fixed; width: 340px; max-width: calc(100vw - 16px); max-height: min(460px, calc(100vh - 16px)); padding: 6px 0 8px; border-radius: 14px;
    box-shadow: 0 14px 36px rgba(23, 21, 28, .2), 0 0 0 1px var(--line); animation: pop-in .14s ease-out; }
  :root[data-theme="dark"] .sheet.dk-pop { box-shadow: 0 14px 36px rgba(0, 0, 0, .55), 0 0 0 1px var(--line); }
  .sheet.dk-pop h2 { font-size: 15px; margin: 8px 16px 6px; }
  .sheet.dk-pop .rx-tabs { padding: 0 10px; }
  .sheet.dk-pop .rx-row { padding: 7px 16px; min-height: 48px; }
  .sheet.dk-pop .rx-row small { font-size: 12px; }
  .sheet.dk-pop button.rx-row:focus-visible { background: var(--hover); outline: none; } @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .sheet.dk-pop button.rx-row:hover { background: var(--hover); outline: none; } }
  /* janelas centradas: foco visível */
  .sheet :focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .sheet .item:hover { background: var(--hover); } }
  /* confirmação */
  .dk-ask { padding: 10px 22px 6px; min-width: 340px; }
  .dk-ask h2 { margin: 6px 0 8px; font-size: 18px; }
  .dk-ask p { margin: 0 0 18px; color: var(--text-2); font-size: 14.5px; line-height: 1.45; }
  .dk-ask-btns { display: flex; justify-content: flex-end; gap: 10px; }
  .dk-ask-btns .btn { min-width: 110px; }
  /* menus com texto secundário, submenu e anexos */
  .dk-mi.s { height: auto; min-height: 40px; padding-block: 5px; }
  .dk-mi span small { display: block; font-size: 12px; color: var(--text-2); margin-top: 1px; }
  .dk-mi .dk-mchv { margin-left: auto; width: 16px; height: 16px; }
  .dk-cmenu { min-width: 250px; }
  .dk-amenu .dk-mi { height: 42px; }
  .dk-aic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; }
  .dk-amenu .dk-mi .dk-aic svg.i { width: 17px; height: 17px; color: #fff; }
  /* seletor de emojis flutuante (reagir pelo ＋) */
  .picker.pk-float { position: fixed; z-index: 121; width: 352px; height: 380px; border: 0; border-radius: 14px; overflow: hidden;
    box-shadow: 0 14px 36px rgba(23, 21, 28, .22), 0 0 0 1px var(--line); animation: pop-in .14s ease-out; }
  :root[data-theme="dark"] .picker.pk-float { box-shadow: 0 14px 36px rgba(0, 0, 0, .55), 0 0 0 1px var(--line); }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .pk-float .pk-e:hover { background: var(--hover); } }
  .pk-float .pk-e:focus-visible { outline: 2px solid var(--violet); }
  /* chip das reações: hover discreto */
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .shell > .chat .reacts:hover { box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb, var(--violet) 40%, var(--line)); } }
  .shell > .chat .reacts:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
}

/* =====================================================================
   1.0.94 (07/10/2026): recorte real da conversa, balão "a escrever", barra lateral (avatar em cima, Sair em baixo).
   ===================================================================== */
/* A zona das mensagens recorta-se a si própria no limite de cima da caixa de escrever (nada desenha fora dela, nem no Android durante o scroll) */
.chat { min-height: 0; overflow: hidden; }
.msgs { min-height: 0; contain: paint; }
/* "a escrever ●●●": balão recebido só visual */
.m.typing-b { margin-top: 8px; pointer-events: none; }
.m.typing-b .b { display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 58px; padding: 9px 13px 10px; animation: fade .18s ease-out; }
.m.typing-b .b .sender { font-size: .8em; margin-bottom: 3px; }
.tb-dots { display: inline-flex; align-items: center; gap: 5px; height: 12px; }
.tb-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); opacity: .35; animation: tbdot 1.25s ease-in-out infinite; }
.tb-dots i:nth-child(2) { animation-delay: .16s; } .tb-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes tbdot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: .9; transform: translateY(-3px); } }
/* canal: botão de notificações com ícone (sem emoji) */
.ch-bar [data-chmute] { display: inline-flex; align-items: center; gap: 8px; }
.ch-bar [data-chmute] svg.i { width: 20px; height: 20px; }
@media (min-width: 900px) {
  /* avatar em cima (Editar perfil) */
  .shell > .bnav .dk-top-me { flex: none; width: 44px; height: 44px; margin: 0 0 14px; padding: 0; border-radius: 50%; }
  .shell > .bnav .dk-top-me .av { width: 44px; height: 44px; font-size: .9em; box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--line); }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .shell > .bnav .dk-top-me:hover .av { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px color-mix(in srgb, var(--violet) 55%, var(--line)); } }
  /* Sair em baixo: ação secundária destrutiva, discreta */
  .shell > .bnav .dk-out { flex: none; width: 60px; padding: 8px 0 6px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #C0392B; font-size: 11px; font-weight: 600; }
  .shell > .bnav .dk-out svg.i { width: 22px; height: 22px; stroke-width: 2; color: #C0392B; }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .shell > .bnav .dk-out:hover { background: #FDECEA; } }
  .shell > .bnav .dk-out:focus-visible { outline: 2px solid var(--err); outline-offset: 1px; }
  :root[data-theme="dark"] .shell > .bnav .dk-out, :root[data-theme="dark"] .shell > .bnav .dk-out svg.i { color: #F28B82; }
  @media (any-hover: hover) { :root[data-theme="dark"]:where(:not([data-input="touch"])) .shell > .bnav .dk-out:hover { background: rgba(242, 139, 130, .12); } }
  @media (max-height: 600px) { .shell > .bnav .dk-top-me { margin-bottom: 8px; } .shell > .bnav .dk-out { padding: 5px 0 4px; } }
  /* Definições: "Terminar sessão" só no telemóvel (no computador está na barra lateral) */
  .sx-logout { display: none; }
}
/* =====================================================================
   COMPUTADOR — Etapa 5 (1.0.95): Chamadas, Contactos e Definições na zona principal.
   A conversa fica montada por baixo (mesma célula da grelha); o painel cobre-a só fora de Conversas.
   ===================================================================== */
.dk-pane { display: none; }
@media (min-width: 900px) {
  .shell > .dk-pane { grid-column: 3; grid-row: 1; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); z-index: 1; }
  .shell:not([data-pane="chats"]) > .dk-pane { display: block; }
  .shell:not([data-pane="chats"]) > .chat { visibility: hidden; }
  /* estado vazio */
  .dkp-empty { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; color: var(--text-2); }
  .dkp-eic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--violet); margin-bottom: 18px; }
  .dkp-eic svg.i { width: 32px; height: 32px; stroke-width: 1.9; }
  :root[data-theme="dark"] .dkp-eic { background: #2A2450; color: #C4B5FD; }
  .dkp-empty h2 { margin: 0 0 8px; font-size: 21px; font-weight: 600; color: var(--text); }
  .dkp-empty p { margin: 0; max-width: 380px; font-size: 14.5px; line-height: 1.5; }
  /* perfil da pessoa (Chamadas / Contactos) */
  .dkp { padding: 40px 32px 48px; }
  .dkp-in { max-width: 720px; margin: 0 auto; }
  .dkp-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .dkp-hero .av { width: 112px; height: 112px; font-size: 2.2em; }
  .dkp-hero h2 { margin: 16px 0 4px; font-size: 24px; font-weight: 700; color: var(--text); }
  .dkp-sub { margin: 0; font-size: 14.5px; color: var(--text-2); }
  .dkp-st { margin: 6px 0 0; font-size: 13.5px; color: var(--text-2); }
  .dkp-on { color: #0D874D; font-weight: 500; }
  :root[data-theme="dark"] .dkp-on { color: #34D399; }
  .dkp-acts { display: flex; justify-content: center; gap: 12px; margin: 24px 0 28px; }
  .dkp-btn { width: 132px; height: 76px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--panel); color: var(--violet-dark); font-size: 13.5px; font-weight: 600; box-shadow: 0 0 0 1px var(--line); transition: background .12s, box-shadow .12s; }
  .dkp-btn svg.i { width: 24px; height: 24px; stroke-width: 2; }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .dkp-btn:hover { background: var(--lilac); box-shadow: 0 0 0 1px transparent; } }
  .dkp-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
  :root[data-theme="dark"] .dkp-btn { color: #D6CCFF; }
  @media (any-hover: hover) { :root[data-theme="dark"]:where(:not([data-input="touch"])) .dkp-btn:hover { background: #2A2450; } }
  .dkp-card { background: var(--panel); border-radius: 14px; box-shadow: 0 0 0 1px var(--line); padding: 6px 0; margin-top: 14px; }
  .dkp-card h3 { margin: 10px 18px 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .2px; color: var(--violet); }
  :root[data-theme="dark"] .dkp-card h3 { color: #C4B5FD; }
  .dkp-bio { margin: 0 18px 12px; font-size: 14.5px; line-height: 1.5; color: var(--text); white-space: pre-wrap; }
  .dkp-call { display: flex; align-items: center; gap: 14px; padding: 9px 18px; }
  .dkp-call svg.i { width: 20px; height: 20px; color: var(--dk-ic, var(--icon)); }
  .dkp-call .grow { display: flex; flex-direction: column; font-size: 14px; color: var(--text); }
  .dkp-call small { font-size: 12.5px; color: var(--text-2); }
  .dkp-call.miss .grow, .dkp-call.miss svg.i { color: var(--err); }
  /* Definições: a mesma página, na zona principal (largura de leitura) */
  .dk-pp { padding: 28px 32px 48px; }
  .dk-pp-in { max-width: 720px; margin: 0 auto; }
  .dk-pp-h { margin: 0 0 18px; font-size: 22px; font-weight: 700; color: var(--text); }
  .dk-pp-body { background: var(--panel); border-radius: 14px; box-shadow: 0 0 0 1px var(--line); padding: 8px 0; }
  .dk-pp-body > .pad:last-child:has(> [data-close]) { display: none; }   /* "Concluído" não faz sentido num painel */
  .dk-pp-body .setting { padding-inline: 20px; }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .dk-pp-body .item:hover { background: var(--hover); } }
  .dk-pp-foot { margin-top: 14px; }
  /* coluna do meio: linha escolhida (Chamadas / Contactos / Definições) */
  .shell > .side .list > .row[aria-current="true"], .shell > .side .sx-row[aria-current="true"] { background: var(--lilac); }
  :root[data-theme="dark"] .shell > .side .list > .row[aria-current="true"], :root[data-theme="dark"] .shell > .side .sx-row[aria-current="true"] { background: #2A2450; }
  .shell > .side .ct-person[aria-current="true"] { border-radius: 10px; }
  .shell > .side .list > .cl-row { cursor: pointer; }
}
/* 1.0.96 — Definições no computador: Perfil, Notificações e Som, Contas */
@media (min-width: 900px) {
  .dk-pane > .pe.pe-pane { position: static; inset: auto; z-index: auto; display: block; min-height: 100%; background: var(--bg); animation: none; padding: 28px 32px 48px; }
  .pe-pane .pe-top { max-width: 720px; margin: 0 auto; padding: 0; min-height: 0; }
  .pe-pane .pe-top .icon-btn { display: none; }
  .pe-pane .pe-top h1 { font-size: 22px; margin-bottom: 18px; }
  .pe-pane .pe-body { max-width: 720px; margin: 0 auto; padding: 24px 28px 28px; overflow: visible; background: var(--panel); border-radius: 14px; box-shadow: 0 0 0 1px var(--line); }
  .pe-pane .pe-save { align-self: flex-start; min-width: 180px; }
  .dk-sub .dk-pp { padding: 0; margin-top: 22px; }
  .dk-sub .dk-pp-in { max-width: none; }
  .dk-sub .dk-pp-h { font-size: 15px; font-weight: 600; color: var(--text-2); margin: 0 0 10px 4px; }
  .dk-acc-go { font-size: 12.5px; font-weight: 600; color: var(--violet-dark); }
  :root[data-theme="dark"] .dk-acc-go { color: #C4B5FD; }
  .shell > .side .sx-me[aria-current="true"] { background: var(--lilac); }
  :root[data-theme="dark"] .shell > .side .sx-me[aria-current="true"] { background: #2A2450; }
}
/* =====================================================================
   TELEMÓVEL — Página Conversas (1.0.97): mais nitidez e hierarquia (nome / prévia / hora), ícones mais firmes,
   filtros com contorno visível, barra de baixo legível. Só abaixo de 900 px; computador e outras páginas iguais.
   ===================================================================== */
@media (max-width: 899px) {
  .side { --m-t2: #4E575F; --m-t3: #5D666D; --m-ic: #3F474E; }
  :root[data-theme="dark"] .side { --m-t2: #B4BCC3; --m-t3: #9AA3AB; --m-ic: #C2C9CF; }
  /* lista */
  .side .list > .row .row-msg, .side .list > .row .row-msg .txt { color: var(--m-t2); }
  .side .list > .row.unread .row-msg, .side .list > .row.unread .row-msg .txt { color: var(--text); }
  .side .list > .row .row-msg.typing { color: #0D874D; }
  :root[data-theme="dark"] .side .list > .row .row-msg.typing { color: #34D399; }
  .side .list > .row .row-time { color: var(--m-t3); font-weight: 500; font-variant-numeric: tabular-nums; }
  .side .list > .row.unread .row-time { color: var(--violet); font-weight: 600; }
  :root[data-theme="dark"] .side .list > .row.unread .row-time { color: #C4B5FD; }
  .side .list > .row .meta-ic, .side .list > .row .row-msg svg.i { color: var(--m-t3); stroke-width: 2; }
  .side .list > .row .tick { stroke-width: 2; }
  .side .list > .row .tick.sent, .side .list > .row .tick.delivered { color: var(--m-t3); }
  /* filtros */
  .side .lbl-chips button { border-color: #D9D5E0; color: #3F3A47; }
  .side .lbl-chips button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--violet) 35%, transparent); color: var(--violet-dark); }
  :root[data-theme="dark"] .side .lbl-chips button { border-color: #3A4047; color: #D3D9DE; }
  :root[data-theme="dark"] .side .lbl-chips button[aria-pressed="true"] { border-color: color-mix(in srgb, #A78BFA 45%, transparent); color: #D6CCFF; }
  /* barra de baixo */
  .side .bnav .bnav-tab:not([aria-selected="true"]) { color: var(--m-ic); }
  .side .bnav .bnav-tab svg { stroke-width: 2; }
  .side .bnav .bnav-tab[aria-selected="true"] svg { stroke-width: 2.2; }
  /* aviso de encriptação */
  .side .list > .e2ee-foot { color: var(--m-t3); font-size: 12.5px; }
  .side .list > .e2ee-foot svg { stroke-width: 2.1; }
}
/* =====================================================================
   TELEMÓVEL — Página Chamadas (1.0.98): estado em palavra + seta mais firme, perdidas sem nome a vermelho,
   botão de voltar a ligar mais nítido, "Nova chamada", estado vazio. Só abaixo de 900 px.
   ===================================================================== */
@media (max-width: 899px) {
  .side .cl-row .row-name { color: var(--text); }
  .side .cl-row .cl-dir { width: 18px; height: 18px; stroke-width: 2.6; }
  .side .cl-row .cl-dir.in { stroke: #0D874D; }
  :root[data-theme="dark"] .side .cl-row .cl-dir.in { stroke: #34D399; }
  :root[data-theme="dark"] .side .cl-row .cl-dir.out { stroke: #B9A8FF; }
  .side .cl-row .cl-dir.miss, .side .cl-st.miss { stroke: var(--err); color: var(--err); }
  :root[data-theme="dark"] .side .cl-row .cl-dir.miss { stroke: #F28B82; }
  :root[data-theme="dark"] .side .cl-st.miss { color: #F28B82; }
  .side .cl-st { font-weight: 500; color: var(--m-t2); }
  .side .cl-again { width: 44px; height: 44px; flex: none; align-self: center; }
  .side .cl-again svg.i { stroke-width: 2.2; }
  .side .cl-again:active { background: var(--hover); }
  .side .cl-new .row-name { color: var(--violet-dark); }
  :root[data-theme="dark"] .side .cl-new .row-name { color: #D6CCFF; }
  .side .cl-new .ct-ic svg.i { stroke-width: 2.1; }
  /* estado vazio */
  .side .cl-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 32px 24px; }
  .side .cl-eic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--violet); margin-bottom: 18px; }
  .side .cl-eic svg.i { width: 32px; height: 32px; stroke-width: 1.9; }
  :root[data-theme="dark"] .side .cl-eic { background: #2A2450; color: #C4B5FD; }
  .side .cl-empty h3 { margin: 0 0 8px; font-size: 1.15em; font-weight: 600; color: var(--text); }
  .side .cl-empty p { margin: 0; max-width: 300px; font-size: .95em; line-height: 1.5; color: var(--m-t2); }
  .side .cl-sign { margin: auto 0 0; padding: 28px 0 120px; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .3px; color: color-mix(in srgb, var(--violet) 45%, transparent); }
  .side .list:has(> .cl-empty) { display: flex; flex-direction: column; }
  /* escolher Voz / Vídeo */
  .cl-pick { display: flex; flex-direction: column; align-items: center; padding: 14px 20px 6px; text-align: center; }
  .cl-pick h2 { margin: 12px 0 18px; font-size: 1.15em; }
  .cl-pick-btns { display: flex; gap: 12px; width: 100%; }
  .cl-pick-btns .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  .cl-pick-btns .btn svg.i { width: 20px; height: 20px; stroke-width: 2.1; }
}
/* =====================================================================
   1.0.100 — Contactos (pesquisa sem resultados, estado vazio, ⋮ mais firme) e Definições (contraste,
   setas mais nítidas, JaPassa IA "Em breve" sem seta, páginas Notificações / Conversas trancadas).
   Regras base para os elementos novos + afinações só abaixo de 900 px.
   ===================================================================== */
.ct-none { padding: 28px 24px; text-align: center; }
.ct-none b { display: block; font-size: 1.02em; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.ct-none p { margin: 0; font-size: .92em; color: var(--text-2); }
.ct-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 28px 20px; }
.ct-empty .cl-eic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--violet); margin-bottom: 18px; }
.ct-empty .cl-eic svg.i { width: 32px; height: 32px; }
.ct-empty h3 { margin: 0 0 8px; font-size: 1.15em; font-weight: 600; color: var(--text); }
.ct-empty p { margin: 0 0 20px; max-width: 300px; font-size: .95em; line-height: 1.5; color: var(--text-2); }
.ct-empty-btns { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 280px; }
.ct-empty-btns .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ct-empty-btns .btn svg.i { width: 20px; height: 20px; }
:root[data-theme="dark"] .ct-empty .cl-eic { background: #2A2450; color: #C4B5FD; }
.sx-soon { cursor: default; }
.sx-soon .grow { color: var(--text-2) !important; }
.sx-soon:hover, .sx-soon:active { background: none !important; }
.sx-badge { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--lilac); color: var(--violet-dark); font-size: 12px; font-weight: 600; white-space: nowrap; }
:root[data-theme="dark"] .sx-badge { background: #2A2450; color: #D6CCFF; }
.lk-pg { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 28px 14px; }
.lk-pg .cl-eic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--violet); margin-bottom: 14px; }
.lk-pg .cl-eic svg.i { width: 28px; height: 28px; }
:root[data-theme="dark"] .lk-pg .cl-eic { background: #2A2450; color: #C4B5FD; }
.lk-pg p { margin: 0; max-width: 320px; line-height: 1.5; color: var(--text-2); }
.lk-how { text-align: center; margin: 6px 24px; }
.sx-note { margin: 14px 20px; line-height: 1.5; }
.sx-pg .setting small + small { margin-top: 6px; }
@media (max-width: 899px) {
  /* Contactos */
  .side .ct-person .ct-more { width: 44px; height: 44px; flex: none; color: var(--m-ic); }
  .side .ct-person .ct-more svg.i { stroke-width: 2; }
  .side .ct-act .ct-ic svg.i { stroke-width: 2; }
  .side .ct-none p, .side .ct-empty p { color: var(--m-t2); }
  .side .list:has(> .ct-empty) { display: flex; flex-direction: column; }
  /* Definições */
  .side .sx-h { color: var(--m-t2); font-weight: 700; font-size: 12.5px; white-space: normal; overflow-wrap: anywhere; }
  .side .sx-row small, .side .sx-me small.sx-bio { color: var(--m-t2); }
  .side .sx-ic svg.i, .sx-pg .sx-ic svg.i { color: var(--m-ic) !important; stroke-width: 2; }
  .side .sx-card .sx-chev, .side .sx-me .sx-chev, .sx-pg .sx-chev { color: var(--m-t3) !important; stroke-width: 2.2; }
  :root[data-theme="dark"] .side .sx-card .sx-chev, :root[data-theme="dark"] .side .sx-me .sx-chev, :root[data-theme="dark"] .sx-pg .sx-chev { color: #9AA3AB !important; }
  .side .sx-row.danger .sx-ic svg.i { color: var(--err) !important; }
  .sx-pg { --m-t2: #4E575F; --m-t3: #5D666D; --m-ic: #3F474E; }
  :root[data-theme="dark"] .sx-pg { --m-t2: #B4BCC3; --m-t3: #9AA3AB; --m-ic: #C2C9CF; }
  .sx-pg .sx-row small { color: var(--m-t2); }
  .sx-pg .sx-note, .sx-pg .lk-how, .sx-pg .lk-pg p { color: var(--m-t2); }
}
/* =====================================================================
   1.0.101 — Editar perfil: secções, Sobre mim, data de nascimento, localização, website, link JaPassa,
   privacidade do perfil, botão Guardar só com alterações. Cartão "Informações" no perfil de outra pessoa.
   ===================================================================== */
.pe { --pe-t2: #4E575F; --pe-line: #CFCAD6; }
:root[data-theme="dark"] .pe { --pe-t2: #B4BCC3; --pe-line: #3E464E; }
.pe-sec { margin: 10px 2px -6px; font-size: 12.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--pe-t2); }
.pe-av-wrap + .pe-sec { margin-top: 0; }
.pe-field .input { border-color: var(--pe-line); }
.pe-field .input::placeholder { color: var(--pe-t2); opacity: .75; font-weight: 400; }
.pe .un-st { color: var(--pe-t2); font-size: 13px; }
.pe .un-st.ok { color: #0D874D; }
:root[data-theme="dark"] .pe .un-st.ok { color: #34D399; }
.pe .un-st.bad, .pe-err { color: var(--err); font-size: 13px; }
.pe-hint { display: block; font-size: 13px; line-height: 1.4; color: var(--pe-t2); }
.pe-vis { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 2px; font-size: 13px; font-weight: 500; color: var(--violet-dark); }
.pe-vis svg.i { width: 15px; height: 15px; stroke-width: 2.1; }
:root[data-theme="dark"] .pe-vis { color: #C4B5FD; }
.pe-date { position: relative; display: block; }
.pe-date .input { padding-right: 52px; color-scheme: light; }
:root[data-theme="dark"] .pe-date .input { color-scheme: dark; }
.pe-clr { position: absolute; right: 4px; top: 3px; width: 44px; height: 44px; color: var(--pe-t2); }
.pe-link { display: flex; align-items: center; gap: 2px; min-height: 52px; padding: 0 4px 0 14px; border-radius: 14px; border: 1px solid var(--pe-line); background: var(--lilac); }
:root[data-theme="dark"] .pe-link { background: #221D38; }
.pe-link-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--violet-dark); }
:root[data-theme="dark"] .pe-link-url { color: #D6CCFF; }
.pe-link .icon-btn { width: 44px; height: 44px; flex: none; color: var(--violet-dark); }
.pe-link .icon-btn svg.i { stroke-width: 2; }
:root[data-theme="dark"] .pe-link .icon-btn { color: #D6CCFF; }
.pe-priv { border-radius: 14px; background: var(--panel); border: 1px solid var(--pe-line); padding: 10px 12px; }
.pe-priv .grow { font-weight: 600; color: var(--text); }
.pe-priv .sx-ic svg.i { color: var(--icon) !important; stroke-width: 2; }
.pe-priv .sx-chev { color: var(--pe-t2) !important; stroke-width: 2.2; }
.pe-save:disabled { opacity: .4; }
.pe-save.busy:disabled { opacity: .75; }
.pe .err:empty { display: none; }
/* Perfil de outra pessoa: Informações (só o que a privacidade dela deixa ver) */
.pfi-row { display: flex; align-items: center; gap: 14px; padding: 9px 20px; }
.pfi-ic { flex: none; width: 24px; display: grid; place-items: center; color: var(--icon); }
.pfi-ic svg.i { width: 20px; height: 20px; stroke-width: 2; }
.pfi-row small { display: block; font-size: 12.5px; color: var(--text-2); }
.pfi-v { display: block; color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.pfi-v a { color: var(--violet-dark); text-decoration: none; font-weight: 600; }
:root[data-theme="dark"] .pfi-v a { color: #C4B5FD; }
.dkp-card.pf-info .pfi-row { padding: 8px 18px; }
.pe-hint[hidden], .pe-err[hidden], .pe-clr[hidden] { display: none; }
/* =====================================================================
   1.0.102 — Privacidade agrupada; barra de atualização com percentagem; faixa por trás da barra de baixo;
   frase "encriptadas" centrada com cadeado maior; ícone de Definições.
   ===================================================================== */
/* Privacidade */
.pv { --pv-t2: #4E575F; --pv-line: #D3CFDA; }
:root[data-theme="dark"] .pv { --pv-t2: #B4BCC3; --pv-line: #3A4148; }
.pv-h { margin: 18px 22px 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--pv-t2); }
.pv-h:first-child { margin-top: 6px; }
.pv-card { margin: 0 12px; border-radius: 16px; background: var(--panel); overflow: hidden; box-shadow: 0 1px 3px rgba(23, 21, 28, .05); }
.spage-body .pv .pv-row { margin: 0; border-radius: 0; box-shadow: none; background: none; border: 0; padding: 14px 16px; }
.spage-body .pv .pv-row + .pv-row { border-top: 1px solid var(--line); }
.pv .pv-row > b, .pv .pv-row .switch b { font-size: 1em; font-weight: 600; color: var(--text); }
.pv .pv-row > b { margin-bottom: 4px; }
.pv .pv-hint { display: block; margin: 0 0 10px; font-size: 13px; line-height: 1.4; color: var(--pv-t2); }
.pv .switch + .pv-hint { margin: 6px 0 0; }
.spage-body .pv .seg { gap: 8px; margin-top: 8px; }
.pv .pv-hint + .seg { margin-top: 0; }
.spage-body .pv .setting .seg button { min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--pv-line); background: var(--panel); color: var(--text); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.spage-body .pv .setting .seg button[aria-pressed="true"] { border-color: var(--violet); background: var(--lilac); color: var(--violet-dark); font-weight: 600; }
.spage-body .pv .setting .seg button[aria-pressed="true"]::before { content: ""; width: 12px; height: 7px; margin-top: -3px; border-left: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor; transform: rotate(-45deg); }
:root[data-theme="dark"] .spage-body .pv .setting .seg button { background: transparent; color: #E2E6EA; }
:root[data-theme="dark"] .spage-body .pv .setting .seg button[aria-pressed="true"] { border-color: #A78BFA; background: #2A2450; color: #E4DDFF; }
.pv-pg .spage-top .icon-btn svg { stroke-width: 2.3; }
.pv-pg .spage-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
@media (max-width: 380px) { .spage-body .pv .setting .seg button { padding: 0 11px; font-size: 13.5px; } }
/* Atualização: barra com percentagem por fases reais */
.upd-prog.pct { height: 8px; max-width: 300px; margin: 16px auto 6px; }
.upd-prog.pct i { width: 0; animation: none; transition: width .25s linear; }
.upd-pct { text-align: center; font-size: 13px; font-weight: 600; color: var(--violet-dark); font-variant-numeric: tabular-nums; min-height: 18px; }
:root[data-theme="dark"] .upd-pct { color: #C4B5FD; }
@media (max-width: 899px) {
  /* faixa por trás e por baixo da barra flutuante: a lista deixa de se ver por baixo dela */
  .side::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(44px + env(safe-area-inset-bottom)); z-index: 5; pointer-events: none;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--page) 0%, transparent), var(--page) 55%); }
  /* "Mensagens encriptadas": centrada e com o cadeado maior */
  .side .list > .e2ee-foot.e2ee-mini, .side .list.e2-tight > .e2ee-foot.e2ee-mini { justify-content: center; text-align: center; padding-left: 24px; padding-right: 24px; gap: 8px; }
  .side .list > .e2ee-foot.e2ee-mini > svg.i { width: 18px; height: 18px; stroke-width: 2.1; }
}
.spage-body .pv .pv-row + .pv-row { margin-top: 0; }
.spage-body .pv .setting .seg { flex-wrap: wrap; }
.spage-body .pv .setting .seg button { flex: 0 0 auto; }
.spage-body .pv .seg { gap: 6px; }
.spage-body .pv .setting .seg button { padding: 0 12px; }
.pv-card { margin: 0 10px; }
.spage-body .pv .pv-row { padding: 14px 13px; }
/* 1.0.103 — Reações: uma só bolha (branca); a minha = contorno e número violeta; emoji maior */
.reacts { bottom: -22px; min-height: 30px; padding: 2px 8px; gap: 4px; }
.reacts .rx, .reacts .rx.on { background: none; padding: 1px 2px; }
.reacts .em, .reacts .rx img { width: 22px; height: 22px; }
.reacts.mine { box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 0 0 1.5px var(--violet); }
:root[data-theme="dark"] .reacts.mine { box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 0 1.5px #A78BFA; }
.reacts .rx.on b { color: var(--violet-dark); font-weight: 600; }
.m.has-react { margin-bottom: 26px; }
@media (min-width: 900px) { .shell > .chat .m.has-react { margin-bottom: 24px; } @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .shell > .chat .reacts.mine:hover { box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 0 0 1.5px var(--violet); } } }
/* 1.0.103 — Seleção de chamadas */
.cl-selbar { position: absolute; left: 0; right: 0; top: 0; z-index: 8; display: flex; align-items: center; gap: 4px; min-height: 64px; padding: calc(6px + env(safe-area-inset-top)) 8px 6px; background: var(--page); box-shadow: 0 1px 0 var(--line); }
.cl-selbar .grow { font-size: 1.1em; font-weight: 600; color: var(--text); padding-left: 4px; }
.cl-selbar .icon-btn { width: 44px; height: 44px; color: var(--text); }
.cl-selbar .icon-btn svg { stroke-width: 2.1; }
.cl-selbar [data-cs="del"] { color: var(--err); }
.list .cl-row.cl-sel { background: var(--lilac) !important; }
:root[data-theme="dark"] .list .cl-row.cl-sel { background: #2A2450 !important; }
.list .cl-row.cl-sel .av { box-shadow: 0 0 0 2px var(--violet); }
.list.cl-selecting .cl-again { visibility: hidden; }
@media (min-width: 900px) { .shell > .side .cl-selbar { min-height: 56px; padding: 6px 12px; } }
.cl-selbar .grow { flex: 1; min-width: 0; }
/* 1.0.104 — Segurança */
.sec .sx-row { padding: 13px 13px; gap: 14px; }
.sec .sx-row + .sx-row { border-top: 1px solid var(--line); }
.sec .sx-row .grow { font-weight: 600; color: var(--text); }
.sec .sx-row small { display: block; margin-top: 2px; font-weight: 400; font-size: 13px; line-height: 1.35; color: var(--pv-t2); white-space: normal; }
.sec .sx-ic { width: 38px; height: 38px; border-radius: 12px; background: #F1EFF4; }
:root[data-theme="dark"] .sec .sx-ic { background: #252A30; }
.sec .sx-ic svg.i { width: 20px; height: 20px; color: var(--icon) !important; stroke-width: 2; }
.sec .sx-chev { width: 18px !important; height: 18px !important; color: var(--pv-t2) !important; stroke-width: 2.2; flex: none; }
.sec .sec-info { cursor: default; }
.sec .sec-info:hover, .sec .sec-info:active { background: none; }
.sec-st { flex: none; font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: #F1EFF4; color: var(--pv-t2); }
.sec-st.on { background: #E3F5EC; color: #0D874D; }
:root[data-theme="dark"] .sec-st { background: #252A30; }
:root[data-theme="dark"] .sec-st.on { background: #12352A; color: #34D399; }
.sec-enc { padding: 6px 0; }
.sec-enc-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 16px; font-size: 14px; line-height: 1.45; color: var(--text); }
.sec-enc-row svg.i { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--violet); stroke-width: 2; }
:root[data-theme="dark"] .sec-enc-row svg.i { color: #C4B5FD; }
.sec-enc-row.no { color: var(--pv-t2); }
.sec-enc-row.no svg.i { color: var(--pv-t2); }
.e2ee-info .e2ee-ch { font-size: .92em; opacity: .85; margin-top: 8px; }
@media (max-width: 899px) { .side .list > .e2ee-foot.e2ee-mini > span { white-space: normal; overflow: visible; text-overflow: clip; max-width: 300px; line-height: 1.35; } }
.sec .sec-st { display: inline-block; margin-top: 7px; font-size: 12.5px; }
/* 1.0.105 — Dispositivos ligados */
.dv-intro { margin: 2px 22px 4px; font-size: 14px; line-height: 1.45; color: #4E575F; }
:root[data-theme="dark"] .dv-intro { color: #B4BCC3; }
.dv .dv-row { display: flex; align-items: center; gap: 14px; padding: 13px 13px; }
.dv .dv-row + .dv-row { border-top: 1px solid var(--line); }
.dv .sx-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #F1EFF4; }
:root[data-theme="dark"] .dv .sx-ic { background: #252A30; }
.dv .sx-ic svg.i { width: 21px; height: 21px; color: var(--icon); stroke-width: 2; }
.dv .grow { min-width: 0; }
.dv .grow b { display: block; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.dv .grow small { display: block; margin-top: 2px; font-size: 13px; color: var(--pv-t2); }
.dv-now { color: #0D874D; font-weight: 600; }
:root[data-theme="dark"] .dv-now { color: #34D399; }
.dv-end { flex: none; min-height: 40px; padding: 0 12px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--err) 45%, transparent); color: var(--err); font-size: 13.5px; font-weight: 600; background: none; }
:root[data-theme="dark"] .dv-end { color: #F28B82; border-color: color-mix(in srgb, #F28B82 45%, transparent); }
.dv-end:disabled { opacity: .5; }
.dv-all { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 20px); margin: 12px 10px 0; min-height: 48px; border-radius: 14px; background: var(--panel); color: var(--err); font-weight: 600; box-shadow: 0 1px 3px rgba(23, 21, 28, .05); }
.dv-all svg.i { width: 20px; height: 20px; stroke-width: 2.1; }
:root[data-theme="dark"] .dv-all { color: #F28B82; }
.dv-note { margin: 14px 22px; font-size: 13px; line-height: 1.45; color: var(--pv-t2); }
.dv-note b { color: var(--text); font-weight: 600; }
.dv-none { padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.dv-none b { font-weight: 600; color: var(--text); }
.dv-none span { font-size: 13.5px; color: var(--pv-t2); }
.dv-err { padding: 24px; text-align: center; color: var(--pv-t2); }
.dv-ask { padding: 6px 4px 4px; }
.dv-ask h2 { margin: 4px 16px 8px; font-size: 1.15em; }
.dv-ask p { margin: 0 16px 16px; line-height: 1.45; color: var(--text-2); }
.dv-ask-btns { display: flex; gap: 10px; padding: 0 16px 8px; }
.dv-ask-btns .btn { flex: 1; min-height: 46px; }
.dv-ask-btns .btn.danger { background: var(--err); color: #fff; }
@media (max-width: 380px) { .dv .dv-row { flex-wrap: wrap; } .dv .dv-end { margin-left: 54px; } }
.dv .dv-row > .grow { flex: 1; }
/* 1.0.106 — Conversas trancadas: estado vazio (página e pasta) e ponto de mensagens novas */
.lk-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 28px 16px; }
.lk-empty .cl-eic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--violet); margin-bottom: 18px; }
.lk-empty .cl-eic svg.i { width: 32px; height: 32px; stroke-width: 1.9; }
:root[data-theme="dark"] .lk-empty .cl-eic { background: #2A2450; color: #C4B5FD; }
.lk-empty h3 { margin: 0 0 8px; font-size: 1.15em; font-weight: 600; color: var(--text); }
.lk-empty > p { margin: 0; max-width: 320px; font-size: .95em; line-height: 1.5; color: #4E575F; }
:root[data-theme="dark"] .lk-empty > p { color: #B4BCC3; }
.lk-empty .lk-how { margin-top: 22px; padding: 12px 16px; border-radius: 14px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 4px; max-width: 320px; }
.lk-empty .lk-how b { font-weight: 600; color: var(--text); font-size: .95em; }
.lk-empty .lk-how span { font-size: .92em; color: #4E575F; }
:root[data-theme="dark"] .lk-empty .lk-how span { color: #B4BCC3; }
.lk-sign { text-align: center; padding: 28px 0 40px; font-size: 13px; font-weight: 700; letter-spacing: .3px; color: color-mix(in srgb, var(--violet) 45%, transparent); }
.lk-pg-empty .spage-body { display: flex; flex-direction: column; min-height: 100%; }
.lk-pg-empty .lk-sign { margin-top: auto; }
.lk-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--violet); margin-right: 8px; vertical-align: middle; }
:root[data-theme="dark"] .lk-dot { background: #A78BFA; }
.spage-body .lk-empty h3, .lk-empty h3 { text-transform: none; letter-spacing: 0; font-size: 1.15em; font-weight: 600; color: var(--text); margin: 0 0 8px; }
@media (max-width: 899px) { .side .list.e2-tight > .e2ee-foot.e2ee-mini { padding-left: 80px; padding-right: 80px; } }   /* lista comprida: a frase fica centrada e longe dos botões ✦/+ */
/* 1.0.107 — Cópia de segurança */
.bk-intro { margin: 2px 22px 6px; display: flex; flex-direction: column; gap: 4px; }
.bk-intro b { font-size: 1.05em; font-weight: 600; color: var(--text); }
.bk-intro span { font-size: 14px; line-height: 1.45; color: var(--pv-t2); }
.bk .sx-row, .bk-last-in { display: flex; align-items: center; gap: 14px; padding: 13px 13px; }
.bk .sx-row + .sx-row { border-top: 1px solid var(--line); }
.bk .sx-row .grow, .bk-last-in .grow { font-weight: 600; color: var(--text); min-width: 0; flex: 1; }
.bk .sx-row small, .bk-last-in small { display: block; margin-top: 2px; font-weight: 400; font-size: 13px; line-height: 1.35; color: var(--pv-t2); white-space: normal; }
.bk .sx-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #F1EFF4; }
:root[data-theme="dark"] .bk .sx-ic { background: #252A30; }
.bk .sx-ic svg.i { width: 20px; height: 20px; color: var(--icon) !important; stroke-width: 2; }
.bk .sx-chev { width: 18px !important; height: 18px !important; color: var(--pv-t2) !important; stroke-width: 2.2; flex: none; }
.bk-ok { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #0D874D; }
.bk-ok svg.i { width: 13px; height: 10px; stroke-width: 2.4; }
:root[data-theme="dark"] .bk-ok { color: #34D399; }
.bk-none { margin: 0; padding: 14px 16px; font-size: 14px; color: var(--pv-t2); }
.bk-warn, .bk-info { display: flex; gap: 10px; align-items: flex-start; margin: 4px 16px 10px; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; }
.bk-warn { background: #FFF6E5; color: #6B4A00; }
:root[data-theme="dark"] .bk-warn { background: #3A2E12; color: #F5D58A; }
.bk-info { background: var(--lilac); color: var(--violet-dark); }
:root[data-theme="dark"] .bk-info { background: #2A2450; color: #D6CCFF; }
.bk-warn svg.i, .bk-info svg.i { flex: none; width: 18px; height: 18px; margin-top: 1px; stroke-width: 2.1; }
.bk-info svg.i { width: 15px; height: 12px; margin-top: 4px; }
.bk-file { display: flex; gap: 12px; align-items: center; margin: 4px 16px 10px; padding: 12px 14px; border-radius: 14px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
.bk-file svg.i { flex: none; width: 22px; height: 22px; color: var(--violet); }
.bk-file b { display: block; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.bk-file small { color: var(--pv-t2); }
.bk-opt small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-2); font-weight: 400; }
.bk-opt.off { opacity: .5; }
.bk-step { margin: 8px 20px 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--violet-dark); font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .bk-step { color: #C4B5FD; }
.bk-step[hidden] { display: none; }
/* 1.0.108 — Notificações */
.nt .nt-st { margin-bottom: 4px; padding: 14px 14px 14px; }
.nt-st-in { display: flex; gap: 14px; align-items: flex-start; }
.nt-st-in .grow { min-width: 0; }
.nt-st-in b { display: block; font-size: 1.02em; font-weight: 700; color: var(--text); }
.nt-st-in small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--pv-t2); }
.nt-st-ic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #F1EFF4; color: var(--pv-t2); }
.nt-st-ic svg.i { width: 22px; height: 22px; stroke-width: 2; }
.nt-on .nt-st-ic { background: #E3F5EC; color: #0D874D; }
.nt-ask .nt-st-ic, .nt-ios .nt-st-ic { background: var(--lilac); color: var(--violet-dark); }
.nt-blocked .nt-st-ic { background: #FDECEC; color: var(--err); }
:root[data-theme="dark"] .nt-st-ic { background: #252A30; }
:root[data-theme="dark"] .nt-on .nt-st-ic { background: #12352A; color: #34D399; }
:root[data-theme="dark"] .nt-ask .nt-st-ic, :root[data-theme="dark"] .nt-ios .nt-st-ic { background: #2A2450; color: #C4B5FD; }
:root[data-theme="dark"] .nt-blocked .nt-st-ic { background: #3A1F24; color: #F87171; }
.nt-go { display: block; width: calc(100% - 56px); margin: 12px 0 0 56px; min-height: 44px; }
.nt .nt-tg { cursor: pointer; }
.nt .nt-tg input { margin-left: 4px; }
.nt .nt-tg input:disabled { opacity: .6; }
.nt-warn { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 0 14px 13px 65px; font-size: 13px; line-height: 1.4; color: #A15C00; }
.nt-warn[hidden] { display: none; }
.nt-warn svg.i { flex: none; width: 17px; height: 17px; margin-top: 1px; stroke-width: 2; }
:root[data-theme="dark"] .nt-warn { color: #F5B455; }
.nt-reset { margin-top: 18px; }
.nt-reset .grow { color: var(--violet-dark) !important; }
:root[data-theme="dark"] .nt-reset .grow { color: #C4B5FD !important; }
.nt-foot { margin: 14px 24px 8px; font-size: 13px; line-height: 1.45; color: var(--pv-t2); text-align: center; }
.nt .dk-sub { margin-top: 18px; }
@media (min-width: 900px) {
  .dk-pp-body:has(> .nt) { background: none; box-shadow: none; padding: 0; }
  .dk-pp-body > .nt .pv-card { margin: 0; }
  .dk-pp-body > .nt .pv-h { margin-left: 14px; }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .dk-pp-body > .nt .nt-tg:hover { background: var(--hover); } }
}
.pv .sx-ic svg.i.nt-clk { stroke-width: 1.1 !important; }
/* 1.0.109 — Sons e vibração */
.sn .sn-val { flex: none; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 500; color: var(--pv-t2); }
.sn .sn-pk .grow { min-width: 0; }
.snd-pk h2 { margin: 4px 20px 8px; font-size: 1.15em; }
.snd-pk [role="radiogroup"] { padding: 0 8px; }
.snd-op { min-height: 52px; gap: 14px; padding: 10px 14px; border-radius: 12px; }
.snd-op .grow { font-size: 1em; font-weight: 500; color: var(--text); }
.snd-op[aria-checked="true"] { background: var(--lilac); }
.snd-op[aria-checked="true"] .grow { font-weight: 600; color: var(--violet-dark); }
.snd-rd { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--pv-line, #C9C4D2); box-sizing: border-box; display: grid; place-items: center; }
.snd-op[aria-checked="true"] .snd-rd { border-color: var(--violet); }
.snd-op[aria-checked="true"] .snd-rd::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--violet); }
.snd-tip { margin: 10px 22px calc(14px + env(safe-area-inset-bottom)); font-size: 13px; color: #4E575F; }
:root[data-theme="dark"] .snd-op[aria-checked="true"] { background: #2A2450; }
:root[data-theme="dark"] .snd-op[aria-checked="true"] .grow { color: #E4DDFF; }
:root[data-theme="dark"] .snd-op[aria-checked="true"] .snd-rd { border-color: #A78BFA; }
:root[data-theme="dark"] .snd-op[aria-checked="true"] .snd-rd::after { background: #A78BFA; }
:root[data-theme="dark"] .snd-rd { border-color: #5A626A; }
:root[data-theme="dark"] .snd-tip { color: #B4BCC3; }
@media (min-width: 900px) { .dk-pp-body:has(> .sn) { background: none; box-shadow: none; padding: 0; } .dk-pp-body > .sn .pv-card { margin: 0; } .dk-pp-body > .sn .pv-h { margin-left: 14px; } .dk-sub .dk-pp-h { font-size: 1.05em; margin-top: 8px; } }
/* 1.0.110 — Dados e armazenamento */
.sg { --sg-photo: #7C3AED; --sg-video: #C4B5FD; --sg-audio: #0E9F6E; --sg-doc: #E28C0E; --sg-other: #8A9299; }
:root[data-theme="dark"] .sg { --sg-photo: #A78BFA; --sg-video: #5B4B8A; --sg-audio: #34D399; --sg-doc: #F5B455; --sg-other: #6B737A; }
.sg-sum { padding: 16px 16px 14px; margin-bottom: 14px; }
.sg-calc { margin: 6px 0; font-size: 14px; color: var(--pv-t2); }
.sg-lbl { display: block; font-size: 13px; font-weight: 600; letter-spacing: .2px; color: var(--pv-t2); }
.sg-big { display: block; margin: 2px 0 12px; font-size: 30px; line-height: 1.15; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.sg-bar { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line); }
.sg-bar i { display: block; height: 100%; min-width: 4px; }
.sg-photo { background: var(--sg-photo); } .sg-video { background: var(--sg-video); } .sg-audio { background: var(--sg-audio); } .sg-doc { background: var(--sg-doc); } .sg-other { background: var(--sg-other); }
.sg-leg { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.sg-leg li { display: flex; align-items: center; gap: 10px; min-height: 32px; font-size: 15px; color: var(--text); }
.sg-dot { flex: none; width: 12px; height: 12px; border-radius: 4px; }
.sg-n { flex: none; font-size: 14px; font-weight: 500; color: var(--pv-t2); font-variant-numeric: tabular-nums; }
.sg-none { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--pv-t2); }
.sg-none.sg-pad { margin: 8px 22px; }
.sg-meta { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--pv-t2); }
.sg .sn-val { flex: none; font-size: 14.5px; font-weight: 500; color: var(--pv-t2); font-variant-numeric: tabular-nums; }
.sg .sx-row .grow { min-width: 0; }
.sg-cv .av { flex: none; }
.sg-all { display: block; margin: 0 14px 8px auto; min-height: 40px; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--violet-dark); cursor: pointer; }
:root[data-theme="dark"] .sg-all { color: #C4B5FD; }
.sg-ck { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--pv-line); box-sizing: border-box; display: grid; place-items: center; }
.sg-f[aria-checked="true"] { background: var(--lilac); }
.sg-f[aria-checked="true"] .sg-ck { background: var(--violet); border-color: var(--violet); }
.sg-f[aria-checked="true"] .sg-ck::after { content: ""; width: 10px; height: 5px; margin-top: -3px; border-left: 2.2px solid #fff; border-bottom: 2.2px solid #fff; transform: rotate(-45deg); }
:root[data-theme="dark"] .sg-f[aria-checked="true"] { background: #2A2450; }
:root[data-theme="dark"] .sg-f[aria-checked="true"] .sg-ck { background: #A78BFA; border-color: #A78BFA; }
.sg-gone { color: #A15C00; font-weight: 500; }
:root[data-theme="dark"] .sg-gone { color: #F5B455; }
.sg-cb { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--violet); cursor: pointer; }
.sg-cat { cursor: pointer; }
.sg-keep { margin-top: 14px; }
.sg-step { margin: 12px 22px 0; font-size: 14px; font-weight: 600; color: var(--violet-dark); }
.sg-step[hidden] { display: none; }
:root[data-theme="dark"] .sg-step { color: #C4B5FD; }
.sg-go { width: 100%; }
.sg-go:disabled { opacity: .5; }
.media.dl-off { position: relative; }
.media.dl-off::after { content: ""; position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  background: rgba(23, 21, 28, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10.5 12 15.5l5-5M5 19.5h14'/%3E%3C/svg%3E") center / 24px no-repeat; pointer-events: none; }
@media (min-width: 900px) { .dk-pp-body:has(> .sg) { background: none; box-shadow: none; padding: 0; } .dk-pp-body > .sg .pv-card { margin: 0 0 14px; } .dk-pp-body > .sg .pv-h { margin-left: 14px; } }
.sg-leg .grow { flex: 1; min-width: 0; }
/* 1.0.111 — Língua */
.ln-intro { margin: -2px 22px 10px; font-size: 14px; line-height: 1.45; color: var(--pv-t2); }
.ln [role="radiogroup"] { padding: 6px; }
.ln .snd-op:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }
@media (min-width: 900px) { .dk-pp-body:has(> .ln) { background: none; box-shadow: none; padding: 0; } .dk-pp-body > .ln .pv-card { margin: 0; } .dk-pp-body > .ln .pv-h, .dk-pp-body > .ln .ln-intro { margin-left: 14px; } }
.ln .snd-op { border: 0 !important; } .ln .snd-op + .snd-op { margin-top: 2px; }
/* 1.0.112 — Tradução automática: linha discreta no balão, aviso na conversa, consentimento */
.tr-tag { display: inline-block; margin: 3px 0 0; padding: 1px 0; min-height: 0; border: 0; background: none; font: inherit; font-size: 12px; line-height: 1.3; font-weight: 500; color: var(--text-2); cursor: pointer; text-align: left; }
.tr-tag:hover { text-decoration: underline; }
.out .tr-tag { color: inherit; opacity: .72; }
:root[data-theme="dark"] .tr-tag { color: #AEB6BD; }
:root[data-theme="dark"] .out .tr-tag { color: inherit; }
.trn { display: flex; align-items: center; gap: 6px; margin: 0 10px 6px; padding: 4px 4px 4px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.35; color: var(--text-2); }
.trn .icon-btn { width: 32px; height: 32px; flex: none; }
.trn .icon-btn svg { width: 16px; height: 16px; }
:root[data-theme="dark"] .trn { color: #B4BCC3; }
@media (min-width: 900px) { .shell > .chat .trn { margin-inline: var(--dk-pad); } }
.tr-consent p { font-size: 14.5px; line-height: 1.5; }
.tr-consent .tr-c-link { margin-top: -2px; }
.tr-consent .tr-c-link a { color: var(--violet-dark); font-weight: 600; }
:root[data-theme="dark"] .tr-consent .tr-c-link a { color: #C4B5FD; }
.ln #trto .grow { min-width: 0; }
.ln #trto .sn-val { flex: 0 1 auto; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 500; color: var(--pv-t2); }

/* 1.0.113 — Conversa: texto um pouco maior, mais ar entre balões, @nome/horas mais legíveis, vistos maiores (lido = verde) */
/* (vistos: ver bloco 1.0.116 — lida #16A34A) */
.m { margin-top: 3px; }
.m.first { margin-top: 10px; }
.chat-head .status { color: #4A5259; font-weight: 500; }
:root[data-theme="dark"] .chat-head .status { color: #B4BCC4; }
.b .meta { font-size: 12px; color: #59616A; }
:root[data-theme="dark"] .b .meta { color: #A3ABB3; }
.b .meta .tick { width: 18px; height: 13px; stroke-width: 2.2; shape-rendering: geometricPrecision; }
@media (max-width: 899px) { .msgs .b .txt { font-size: 17px; } }
/* 1.0.113 — Reações: pílula pequena no canto de baixo do balão, fundo translúcido, sem contorno violeta */
.reacts, .reacts.mine { bottom: -20px; right: auto; left: 10px; min-height: 22px; padding: 1px 7px; gap: 2px; border-radius: 11px; font-size: 12px; line-height: 1;
  background: rgba(255, 255, 255, .94); border: 0; box-shadow: 0 1px 2px rgba(23, 21, 28, .14), 0 0 0 .5px rgba(23, 21, 28, .08);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 1; }
/* enviadas e recebidas: canto esquerdo (longe da hora e dos vistos, que ficam à direita) */
:root[data-theme="dark"] .reacts, :root[data-theme="dark"] .reacts.mine { background: rgba(38, 41, 47, .94); box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 .5px rgba(255, 255, 255, .08); }
.reacts::before { inset: -11px -8px; }   /* zona de toque confortável sem aumentar a pílula */
.reacts .rx, .reacts .rx.on { background: none; padding: 0; }
.reacts .em, .reacts .rx img { width: 16px; height: 16px; }
.reacts .rx-n { font-weight: 500; font-size: 12px; color: var(--text-2); margin-left: 3px; }
:root[data-theme="dark"] .reacts .rx-n { color: #B4BCC4; }
.m.has-react { margin-bottom: 20px; }
@media (min-width: 900px) { .shell > .chat .m.has-react { margin-bottom: 20px; }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .shell > .chat .reacts:hover, :where(:root:not([data-input="touch"])) .shell > .chat .reacts.mine:hover { box-shadow: 0 1px 3px rgba(23, 21, 28, .2), 0 0 0 .5px rgba(23, 21, 28, .12); } } }
/* 1.0.113 — Chamadas e Contactos: toda a linha responde ao toque */
.cl-row, .ct-person { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.list > .cl-row:active:not(:has(.cl-again:active)), .ct-person:active:not(:has(.ct-more:active)), .ct-person.tapped { background: var(--sel, #EEE9FF); }
:root[data-theme="dark"] .list > .cl-row:active, :root[data-theme="dark"] .ct-person:active, :root[data-theme="dark"] .ct-person.tapped { background: rgba(167, 139, 250, .14); }
.ct-person .ct-more:active { background: rgba(120, 120, 140, .14); }
/* 1.0.113 — Atualizações: página própria, ponto discreto na linha das Definições, aviso com adiar */
.upd-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); margin: 0 6px 0 4px; }
:root[data-theme="dark"] .upd-dot { background: #A78BFA; }
.upd-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px 18px; text-align: center; }
.upd-hero .upd-logo { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--violet); margin-bottom: 6px; }
.upd-hero .upd-logo svg { width: 28px; height: 28px; }
:root[data-theme="dark"] .upd-hero .upd-logo { color: #B9A8FF; }
.upd-hero b { font-size: 1.15em; font-weight: 600; color: var(--text); }
.upd-hero small { color: var(--text-2); font-size: .92em; }
.upd-stat { cursor: default; align-items: center; }
.upd-stat .grow small { display: block; margin-top: 2px; }
.upd-acts { display: flex; flex-direction: column; gap: 10px; padding: 18px 10px 8px; }
.upd-acts .btn { width: 100%; }
.upd-ver { cursor: default; }
.upd-bar { padding: 6px 6px 6px 12px; gap: 6px; }
.upd-bar-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-align: left; color: inherit; font: inherit; background: none; border: 0; padding: 4px 0; }
.upd-bar-go { flex: none; min-height: 36px; padding: 0 10px; border-radius: 18px; color: var(--violet); font-weight: 600; font-size: .95em; background: none; border: 0; }
.upd-bar-go:active { background: rgba(124, 58, 237, .1); }
.upd-bar-x { flex: none; width: 36px; height: 36px; color: var(--text-2); }
.upd-bar-x svg { width: 18px; height: 18px; color: var(--text-2); }
:root[data-theme="dark"] .upd-bar-go { color: #B9A8FF; }
:root[data-theme="dark"] .upd-bar .upd-bar-x svg { color: #A3ABB3; }
/* 1.0.115 — JaPassa IA: assistente de escrita (página + ✦ no composer). 80 % neutro, violeta só no ✦ e na ação principal */
.as { display: flex; flex-direction: column; gap: 14px; padding: 4px 16px 18px; max-width: 680px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.as-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0 2px; text-align: center; }
.as-hero h3 { margin: 0; font-size: 1.3em; font-weight: 600; color: var(--text); letter-spacing: -.01em; text-transform: none; }
.as-mark { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--violet); background: var(--lilac); }
.as-mark svg { width: 28px; height: 28px; }
.as-mark.sm { width: 34px; height: 34px; border-radius: 11px; }
.as-mark.sm svg { width: 20px; height: 20px; }
:root[data-theme="dark"] .as-mark { color: #C4B5FD; background: rgba(167, 139, 250, .14); }
.as-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 1px; }
.as-chips::-webkit-scrollbar { display: none; }
.as-chips.as-wrap { flex-wrap: wrap; overflow: visible; }
.as-pg .as-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.as-pg .as .as-chip, .as-pg.as .as-chip { padding: 0 2px; min-width: 0; font-size: 14px; white-space: nowrap; }
.as .as-tones { display: flex; flex-wrap: nowrap; gap: 6px; }
.as .as-tones[hidden] { display: none; }
.as .as-tone { flex: 1 1 auto; padding: 0 6px; font-size: 13px; white-space: nowrap; min-height: 36px; }
.as-chip, .as-tone { flex: none; min-height: 40px; padding: 0 15px; border-radius: 20px; border: 1px solid var(--field-line); background: var(--panel); color: var(--text); font: inherit; font-size: .94em; font-weight: 500; cursor: pointer; transition: background-color .12s, border-color .12s, color .12s; }
.as-tone { min-height: 36px; padding: 0 13px; font-size: .9em; color: var(--text-2); }
.as-chip[aria-checked="true"], .as-chip[aria-pressed="true"], .as-tone[aria-pressed="true"] { background: var(--lilac); border-color: transparent; color: var(--violet-dark); font-weight: 600; }
:root[data-theme="dark"] .as-chip[aria-checked="true"], :root[data-theme="dark"] .as-chip[aria-pressed="true"], :root[data-theme="dark"] .as-tone[aria-pressed="true"] { background: rgba(167, 139, 250, .18); color: #DDD6FE; }
.as-chip:focus-visible, .as-tone:focus-visible, .as-res:focus-visible, .as-field textarea:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
.as-tones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.as-tones[hidden] { display: none; }
.as-field { position: relative; }
.as-field textarea, .as-res { display: block; width: 100%; box-sizing: border-box; resize: none; border: 1px solid var(--field-line); border-radius: 14px; background: var(--panel); color: var(--text); font: inherit; font-size: 16px; line-height: 1.4; padding: 12px 14px; }
.as-field textarea { min-height: 104px; max-height: 38vh; }
.as-field textarea::placeholder { color: var(--text-2); font-weight: 400; }
.as-n { position: absolute; right: 12px; bottom: 6px; font-size: 11px; color: var(--text-2); }
.as-gen { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; width: 100%; }
.as-gen svg { width: 18px; height: 18px; }
.as-gen[disabled] { opacity: .45; }
.as-busy .as-gen[disabled] { opacity: 1; }
.as-out { display: flex; flex-direction: column; gap: 8px; }
.as-out[hidden] { display: none; }
.as-lbl { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.as-st { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: 14px; background: var(--panel); border: 1px dashed var(--field-line); color: var(--text-2); font-size: .95em; }
.as-st.err { border-style: solid; border-color: color-mix(in srgb, var(--err) 35%, var(--field-line)); color: var(--text); }
.as-st[hidden] { display: none; }
.as-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--lilac); border-top-color: var(--violet); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .as-spin { animation-duration: 2.4s; } }
.as-res { min-height: 60px; border-color: color-mix(in srgb, var(--violet) 35%, var(--field-line)); }
.as-warn { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: #8A5A00; }
.as-warn svg { width: 16px; height: 16px; flex: none; }
:root[data-theme="dark"] .as-warn { color: #F5C26B; }
.as-warn[hidden] { display: none; }
.as-btns { display: flex; flex-direction: column; gap: 4px; position: sticky; bottom: 0; z-index: 1; padding: 6px 0 2px; background: var(--page); }   /* sempre à vista, mesmo com o teclado aberto */
.sheet .as-btns { background: var(--sheet); }
.as-btns .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.as-use { width: 100%; }
.as-sec { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; }
.as-sec { gap: 0; flex-wrap: nowrap; }
.as-sec .btn.ghost { min-height: 40px; padding: 0 8px; color: var(--text-2); font-weight: 500; font-size: 14px; }
.as-sec .btn.ghost svg { width: 17px; height: 17px; }
@media (any-hover: hover) { :root[data-theme="dark"]:where(:not([data-input="touch"])) .as-sec .btn.ghost:hover { background: rgba(255, 255, 255, .06); } }
.as-btns [hidden] { display: none !important; }
.as-sec:not(:has(> :not([hidden]))) { display: none; }
.as-note { margin: 2px 2px 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); text-align: center; }
.as-orig { padding: 10px 14px; border-radius: 14px; background: var(--page); }
.as-orig p { margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; color: var(--text); max-height: 22vh; overflow-y: auto; }
/* folha do composer */
.sheet:has(.as-sh) { max-height: 92dvh; }
.as-sh { padding: 4px 16px 6px; gap: 12px; }
.as-sh-h { display: flex; align-items: center; gap: 10px; }
.as-sh-h h2 { margin: 0; font-size: 1.08em; }
.as-sh .as-chip { min-height: 38px; padding: 0 13px; font-size: .9em; }
.as-sh .as-field textarea { min-height: 84px; }
.dk-pop:has(.as-sh) { width: 440px; max-width: calc(100vw - 16px); }
/* ✦ no composer: violeta discreto. Telemóvel: com texto ocupa o lugar da câmara (o campo não fica mais estreito) */
.composer .box .as-btn { color: var(--violet); }
.composer .box .as-btn svg.i { width: 22px; height: 22px; }
:root[data-theme="dark"] .composer .box .as-btn { color: #C4B5FD; }
@media (max-width: 899px) { .composer .box.as-typing #cambtn { display: none; } }
/* anexos: mosaico "Escrever com IA" */
.attach-grid { row-gap: 14px; }
.as-sec .btn.ghost { white-space: nowrap; }
@media (max-width: 379px) { .as-sec .btn.ghost svg { display: none; } }
@media (min-width: 900px) { .as-btns, .sheet .as-btns { position: static; background: none; } }

/* 1.0.116 — Conversas: toda a linha abre a conversa; toque com resposta discreta */
.list > .row[data-conv] { -webkit-tap-highlight-color: transparent; }
.list > .row[data-conv]:active { background: var(--hover); }
.list > .row[data-conv]:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }
/* 1.0.116 — Vistos: lida = verde #16A34A (escuro: um pouco mais claro só pelo contraste); enviada/entregue = cinzento escuro */
:root { --read: #16A34A; --delivered: #5F676D; }
:root[data-theme="dark"] { --read: #22B85A; --delivered: #A3ABB3; }

/* 1.0.117 — Privacidade e termos: secções e "Apagar a minha conta" a vermelho */
.lg .item.sx-row { text-decoration: none; color: var(--text); }
.lg .lg-del, .lg .lg-del .grow, .lg .lg-del .sx-ic, .lg .lg-del .sx-ic svg { color: var(--err) !important; }
.lg .lg-del .sx-ic { background: color-mix(in srgb, var(--err) 10%, transparent); }
/* 1.0.117 — Menu lateral: Mudar de conta / Adicionar conta junto ao perfil */
.drw-sw { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 18px; text-align: left; font: inherit; font-weight: 500; color: var(--text); border-bottom: 1px solid var(--line); }
.drw-sw:active, .drw-acc:active { background: var(--hover); }
.drw-sw svg.i { width: 22px; height: 22px; color: var(--violet); flex: none; }
.drw-sw .drw-t, .drw-acc .drw-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.drw-sw .drw-t small, .drw-acc .drw-t small { font-size: .8em; font-weight: 400; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drw-sw .drw-swc { width: 18px; height: 18px; color: var(--text-2); transition: transform .15s; }
.drw-sw[aria-expanded="true"] .drw-swc { transform: rotate(180deg); }
.drw-accs { padding: 4px 0 6px; border-bottom: 1px solid var(--line); background: var(--page); }
.drw-accs[hidden] { display: none; }
.drw-acc { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 18px; text-align: left; font: inherit; font-weight: 500; color: var(--text); min-height: 52px; }
.drw-acc .av { width: 36px; height: 36px; font-size: .9em; flex: none; }
.drw-acc[aria-current="true"] { cursor: default; }
.drw-on svg.i { width: 18px; height: 18px; color: var(--violet); }
.drw-plus { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); flex: none; }
.drw-plus svg.i { width: 20px; height: 20px; color: var(--violet); }
:root[data-theme="dark"] .drw-sw svg.i, :root[data-theme="dark"] .drw-on svg.i, :root[data-theme="dark"] .drw-plus svg.i { color: #B9A8FF; }
:root[data-theme="dark"] .drw-plus { background: rgba(167, 139, 250, .14); }
.drw-sw:focus-visible, .drw-acc:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }
/* 1.0.117 — ✦ secundário: círculo menor do que o +, estrela do mesmo tamanho, área de toque ≥ 46px */
.fab-new { width: 58px; height: 58px; }
.fab-ai { width: 46px; height: 46px; box-shadow: 0 3px 10px rgba(124, 58, 237, .28); position: relative; }
.fab-ai::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; }   /* toque confortável (54px) sem aumentar o círculo */
.fab-ai svg.i { width: 24px; height: 24px; color: #fff; }
.chat-head .status { font-size: 14px; }   /* 1.0.117: @nome/estado um pouco maior, ainda secundário ao nome */
@media (max-width: 899px) { .composer textarea { font-size: 17px; } }   /* 1.0.118: o que se escreve com o mesmo tamanho do que se lê nos balões */
/* 1.0.118 — Links nas mensagens: discretos (cor do JaPassa, sublinhado fino) e nunca empurram o balão para fora */
.b .txt { overflow-wrap: anywhere; }
.b .txt a[data-lk] { color: #5B21B6; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: rgba(91, 33, 182, .45); }
.m.in .b .txt a[data-lk] { color: #6D28D9; }
:root[data-theme="dark"] .b .txt a[data-lk] { color: #C4B5FD; text-decoration-color: rgba(196, 181, 253, .5); }
.b .txt a[data-lk]:focus-visible, .lp:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) { .b .txt a[data-lk]:hover { text-decoration-thickness: 2px; } }
/* cartão da pré-visualização: dentro do balão, por cima do texto; largura controlada */
.b:has(> .lp) { width: 320px; max-width: 85%; }
@media (min-width: 900px) { .b:has(> .lp) { width: 360px; } }
.lp { display: block; margin: 2px -3px 6px; border-radius: 6px; overflow: hidden; text-decoration: none; color: inherit; background: rgba(23, 21, 28, .05); border-left: 3px solid var(--violet-soft); }
.m.out .lp { background: rgba(255, 255, 255, .55); }
:root[data-theme="dark"] .lp { background: rgba(255, 255, 255, .06); border-left-color: #8B5CF6; }
:root[data-theme="dark"] .m.out .lp { background: rgba(0, 0, 0, .18); }
@media (hover: hover) { .lp:hover { filter: brightness(.98); } :root[data-theme="dark"] .lp:hover { filter: brightness(1.08); } }
.lp-img { display: block; width: 100%; max-height: 200px; overflow: hidden; background: rgba(23, 21, 28, .06); }
.lp-img img { display: block; width: 100%; height: 100%; max-height: 200px; object-fit: cover; }
.lp-tx { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px 8px; min-width: 0; }
.lp-t { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.lp-d { font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.lp-h { font-size: 12px; font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme="dark"] .lp-d, :root[data-theme="dark"] .lp-h { color: #A3ABB3; }
/* pré-visualização por cima do composer (✕ = enviar sem pré-visualização) */
.lpv { margin: 0 10px 6px; }
.lpv[hidden] { display: none; }
.lpv-in { display: flex; align-items: center; gap: 10px; padding: 6px 4px 6px 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--violet-soft); }
.lpv-in img, .lpv-ic { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.lpv-ic { display: grid; place-items: center; background: var(--lilac); color: var(--violet); }
.lpv-ic svg { width: 22px; height: 22px; }
.lpv-load .as-spin { margin-left: 6px; }
.lpv-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lpv-tx b { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpv-x { width: 40px; height: 40px; flex: none; color: var(--text-2); }
.lpv-x svg { width: 18px; height: 18px; }
@media (min-width: 900px) { .shell > .chat .lpv { margin-inline: var(--dk-pad); } }
.composer .box .as-btn[hidden] { display: none; }   /* 1.0.118: o atributo hidden não chegava (o .icon-btn tem display próprio) */
/* 1.0.119 — Conversa aberta: acabamentos (comparação com WhatsApp/Telegram) */
/* citação: nome com a cor de quem escreveu (grupos); no balão enviado com mais contraste */
.m.out .quote { background: rgba(255, 255, 255, .5); }
:root[data-theme="dark"] .m.out .quote { background: rgba(0, 0, 0, .2); }
/* reencaminhada: ícone */
.b .fwd { display: flex; align-items: center; gap: 4px; }
.b .fwd svg.i { width: 14px; height: 14px; stroke-width: 2; }
/* à espera desta mensagem: ícone SVG */
.wait-msg { display: inline-flex; align-items: center; gap: 6px; }
.wait-msg svg.i { width: 15px; height: 15px; flex: none; }
/* documento: ícone de transferir dentro do cartão; hora na linha do tamanho */
.doc .doc-dl { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); align-self: flex-start; }
.doc .doc-dl svg.i { width: 20px; height: 20px; }
.m.t-doc .doc { margin-bottom: -2px; }
.m.t-doc .b .meta { position: absolute; right: 12px; bottom: 9px; float: none; margin: 0; top: auto; }
/* voz: hora na mesma linha do leitor (por baixo da onda, à direita) */
.m.t-voice .voice { display: grid; grid-template-columns: 36px 1fr auto; grid-template-rows: 30px 15px; column-gap: 8px; align-items: center; padding-bottom: 2px; }
.m.t-voice .voice .play { grid-row: 1 / 3; }
.m.t-voice .voice .wave { grid-column: 2; grid-row: 1; }
.m.t-voice .voice .speed { grid-column: 3; grid-row: 1; }
.m.t-voice .voice .dur { grid-column: 2; grid-row: 2; align-self: start; line-height: 1; }
.m.t-voice .b .meta { position: absolute; right: 10px; bottom: 6px; float: none; margin: 0; top: auto; }
/* foto/vídeo sem legenda: hora e vistos por cima do canto da imagem */
.m.t-media .b .meta { position: absolute; right: 10px; bottom: 10px; float: none; margin: 0; top: auto; padding: 1px 7px; border-radius: 10px; background: rgba(0, 0, 0, .45); color: #fff; z-index: 1; }
.m.t-media .b .meta .tick.sent, .m.t-media .b .meta .tick.delivered { color: #fff; }
.m.t-media .b .meta .tick.read { color: #4ADE80; }
.m.t-media .b .media { margin-bottom: 0; }
/* só emoji: sem balão (como os autocolantes) */
.m.t-jumbo .b .meta { margin-top: 2px; }
/* localização: cartão compacto (sem imagem de mapa: quem recebe não contacta servidores externos) */
.loc { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 10px; background: rgba(23, 21, 28, .05); color: inherit; }
.m.out .loc { background: rgba(255, 255, 255, .5); }
:root[data-theme="dark"] .loc { background: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .m.out .loc { background: rgba(0, 0, 0, .2); }
.loc-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--violet); flex: none; }
.loc-ic svg.i { width: 22px; height: 22px; }
:root[data-theme="dark"] .loc-ic { background: rgba(167, 139, 250, .16); color: #C4B5FD; }
.loc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.loc-tx b { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-tx small { color: var(--text-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc .loc-go { width: 18px; height: 18px; color: var(--text-2); flex: none; }
.b:has(> .doc) { width: 300px; max-width: 85%; }
.doc { width: calc(100% + 8px); box-sizing: border-box; text-align: left; }
.doc .info { text-align: left; }
.m.t-doc .doc .info small { display: block; padding-right: 64px; }   /* espaço para a hora na mesma linha */
/* 1.0.120 — Aparência: pré-visualização, fundo da conversa simples, reduzir animações */
.lk-prev { margin: 4px 0 6px; border-radius: 16px; overflow: hidden; background: var(--chat-bg); background-size: var(--chat-size); border: 1px solid var(--line); }
.lk-prev .lk-msgs { padding: 14px 14px 10px; overflow: hidden; pointer-events: none; }
.lk-prev .lk-msgs .m { margin-top: 6px; }
:root[data-wall="plain"] { --chat-bg: #EFEBFD; }
:root[data-wall="plain"][data-theme="dark"] { --chat-bg: #0A141B; }
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
:root[data-motion="reduce"] .as-spin, :root[data-motion="reduce"] .upd-spin { animation-duration: 2.4s !important; animation-iteration-count: infinite !important; }
.look .setting { padding: 12px 14px; }
.look .setting .seg { margin: 0; }
/* 1.0.120: o "Tamanho do texto" volta a mandar nos balões e no composer do telemóvel (Normal = 17px, Pequeno 15,5px, Grande 18,5px) */
@media (max-width: 899px) { .msgs .b .txt, .composer textarea { font-size: calc(var(--fs) + 1px); } }
/* 1.0.121 — Menu lateral e as suas páginas */
.drw-list .drw-n { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--lilac); color: var(--violet-dark); font-size: 12.5px; font-weight: 600; display: inline-grid; place-items: center; }
.drw-list .drw-n[hidden] { display: none; }
:root[data-theme="dark"] .drw-list .drw-n { background: rgba(167, 139, 250, .16); color: #DDD6FE; }
.sr-q { margin: 0 16px 10px; }
.sr-ic { width: 16px !important; height: 16px !important; margin-right: 6px; vertical-align: -3px; color: var(--text-2); }
.ar-row { display: flex; align-items: center; }
.ar-row .ar-open { flex: 1; min-width: 0; }
.ar-row .ar-un { width: 44px; height: 44px; flex: none; color: var(--text-2); margin-right: 6px; }
.ar-row[hidden], .sr-list [hidden] { display: none; }
.ar-empty, .sv-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 36px 28px 20px; color: var(--text-2); }
.ar-empty h3, .sv-empty h3 { margin: 6px 0 0; font-size: 1.05em; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; }
.ar-empty p, .sv-empty p { margin: 0; font-size: .92em; line-height: 1.45; max-width: 320px; }
.ar-eic { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--violet); }
.ar-eic svg.i { width: 28px; height: 28px; }
:root[data-theme="dark"] .ar-eic { background: rgba(167, 139, 250, .14); color: #C4B5FD; }
.sv-empty { margin: auto; background: var(--panel); border-radius: 18px; max-width: 320px; box-shadow: var(--shadow-bubble); }
.rm-row { gap: 2px; }
.rm-row .rm-open { text-align: left; min-width: 0; }
.rm-row .icon-btn { width: 44px; height: 44px; flex: none; color: var(--text-2); }
.rm-row .rm-done { color: var(--violet); }
:root[data-theme="dark"] .rm-row .rm-done { color: #C4B5FD; }
.lb-row { gap: 4px; padding-right: 6px; }
.lb-row .lb-open { display: flex; align-items: center; gap: 14px; text-align: left; min-width: 0; color: inherit; font: inherit; }
.lb-row .lb-ed { width: 44px; height: 44px; flex: none; color: var(--text-2); }
.qr-priv { display: flex; gap: 8px; align-items: flex-start; text-align: left; margin: 10px 4px 0; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.qr-priv svg.i { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--violet); }
.qr-scan { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* Ajuda e Suporte (1.0.122) */
.hp-srch { display: flex; align-items: center; gap: 10px; margin: 6px 12px 4px; padding: 0 14px; height: 46px; border-radius: 23px; background: var(--panel); box-shadow: 0 1px 3px rgba(23, 21, 28, .05); color: var(--pv-t2); }
.hp-srch .i { width: 20px; height: 20px; flex: none; }
.hp-srch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; color: var(--text); }
.hp-srch:focus-within { box-shadow: 0 0 0 2px var(--violet); }
.hp-q > summary { list-style: none; cursor: pointer; }
.hp-q > summary::-webkit-details-marker { display: none; }
.hp-q + .hp-q { border-top: 1px solid var(--line); }
.hp-q > summary.sx-row .grow { line-height: 1.35; }
.hp-cat .hp-q > summary.sx-row .grow { font-weight: 500; }
.hp-chev { width: 20px; height: 20px; flex: none; color: var(--pv-t2); transition: transform .2s; }
.hp-q[open] .hp-chev { transform: rotate(180deg); }
.hp-a { padding: 0 18px 14px; }
.hp-a p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.hp-fix-w .hp-a { padding-left: 62px; }
.hp-go { margin: 10px 0 0 -14px; padding: 8px 14px; font-weight: 600; }
.hp-ch { display: flex; align-items: center; gap: 8px; margin: 16px 22px 8px; font-size: 14px; font-weight: 600; color: var(--text); }
.hp-ch .i { width: 18px; height: 18px; color: var(--violet); }
.hp-faq-h { margin-bottom: 0; }
.hp-none { margin: 24px; text-align: center; color: var(--pv-t2); }
.hp-q[hidden], .hp-cat[hidden], .hp-fix-w[hidden], .hp-none[hidden], .hp-faq-h[hidden] { display: none; }

/* Cópia de segurança (1.0.123) */
.pv-pg p.bq-est, .bq-est { margin: 4px 26px 0; font-size: 14px; color: var(--text-2); min-height: 1.2em; }
.bq-due { color: var(--violet); font-weight: 500; }
.bq-rem-p { display: block; margin-top: 10px; color: var(--pv-t2); font-size: 13px; line-height: 1.4; }
.bq-new-foot { margin-top: 2px; color: var(--text-2); }

/* Pesquisa global e na conversa (1.0.124) */
.gs-chips { padding-top: 4px; }
.gs-h { display: flex; align-items: baseline; gap: 8px; padding: 14px 18px 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--violet-dark); }
:root[data-theme="dark"] .gs-h { color: #B9A8FF; }
.gs-h small { font-weight: 500; color: var(--text-2); letter-spacing: 0; text-transform: none; }
.gs-clear { margin-left: auto; background: none; border: 0; padding: 4px 6px; font: inherit; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--violet); cursor: pointer; }
.gs-rec { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 20px; background: none; border: 0; font: inherit; font-size: 15.5px; color: var(--text); text-align: left; cursor: pointer; }
.gs-rec .i { width: 18px; height: 18px; color: var(--icon); flex: none; }
.gs-rec:active { background: var(--hover, rgba(23, 21, 28, .04)); } @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .gs-rec:hover { background: var(--hover, rgba(23, 21, 28, .04)); } }
.gs-hint { display: flex; gap: 10px; margin: 18px 22px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.gs-hint .i { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.gs-wait { margin: 10px 20px; color: var(--text-2); font-size: 14px; }
.gs-more { display: block; margin: 8px auto 16px; padding: 9px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); font: inherit; font-size: 14px; font-weight: 600; color: var(--violet); cursor: pointer; }
.gs-msg .row-msg { min-width: 0; }
.gs-snip b { font-weight: 600; flex: none; }
.gs-snip .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-snip .meta-ic { width: 15px; height: 15px; margin-right: 3px; vertical-align: -2px; }
.gs-msg mark, .gs-link mark { background: var(--lilac); color: inherit; border-radius: 3px; padding: 0 1px; font-weight: 600; }
:root[data-theme="dark"] .gs-msg mark, :root[data-theme="dark"] .gs-link mark { background: #3B2F73; }
.gs-ext { width: 48px; height: 48px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--lilac); color: var(--violet-dark); font-weight: 700; font-size: 18px; }
.gs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 6px 10px 10px; }
.gs-cell { aspect-ratio: 1; border: 0; padding: 0; border-radius: 6px; overflow: hidden; background: var(--line); cursor: pointer; }
.gs-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-vid { display: grid; place-items: center; background: #1B1A20; color: #fff; }
.gs-vid .i { width: 30px; height: 30px; }
@media (min-width: 900px) { .gs-grid { grid-template-columns: repeat(4, 1fr); } }
/* barra de pesquisa da conversa */
.cfind { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; gap: 4px; padding: 0 6px; background: var(--bar); }
.cfind input { flex: 1; min-width: 0; height: 42px; border: 0; outline: 0; background: none; font: inherit; font-size: 17px; color: var(--text); }
.cfind .cf-n { flex: none; font-size: 13.5px; color: var(--text-2); font-variant-numeric: tabular-nums; padding: 0 4px; white-space: nowrap; }
.cfind .cf-up .i { transform: rotate(180deg); }
.cfind .icon-btn[disabled] { opacity: .35; }
mark.fh { background: #FFE58A; color: inherit; border-radius: 3px; padding: 0 1px; }
.m.fh-cur mark.fh { background: #FFC233; box-shadow: 0 0 0 1px #E0A100; }
:root[data-theme="dark"] mark.fh { background: #6B5A12; color: #fff; }
:root[data-theme="dark"] .m.fh-cur mark.fh { background: #A77F00; box-shadow: none; }
.win-pill { position: absolute; left: 50%; transform: translateX(-50%); bottom: 84px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); color: var(--violet); font: inherit; font-size: 14px; font-weight: 600; box-shadow: 0 2px 10px rgba(23, 21, 28, .14); cursor: pointer; }
.win-pill .i { width: 18px; height: 18px; }
.chat:has(> .win-pill) { position: relative; }
#fabs.gs-hide { display: none; }
.cfind input::-webkit-search-cancel-button { display: none; }

/* Lista de conversas (1.0.125): horas alinhadas e divisória leve a partir do nome (não de lado a lado) */
.row-time { font-variant-numeric: tabular-nums; }
.list > .row[data-conv] + .row[data-conv]::before, .list > .row[data-conv] + .dk-rx + .row[data-conv]::before {
  content: ''; position: absolute; top: 0; right: 0; left: var(--row-div, 78px); height: 1px; background: #E7E4EA; pointer-events: none;
}
:root[data-theme="dark"] .list > .row[data-conv] + .row[data-conv]::before, :root[data-theme="dark"] .list > .row[data-conv] + .dk-rx + .row[data-conv]::before { background: #262B31; }
/* sem linha junto de uma conversa destacada (selecionada, aberta ou com o rato por cima) */
.list > .row[data-conv]:is([aria-current="true"], .sel)::before, .list > .row[data-conv]:is([aria-current="true"], .sel) + .row[data-conv]::before,
.list > .row[data-conv]:is([aria-current="true"], .sel) + .dk-rx + .row[data-conv]::before { opacity: 0; }
@media (any-hover: hover) { :where(:root:not([data-input="touch"])) .list > .row[data-conv]:hover::before, :where(:root:not([data-input="touch"])) .list > .row[data-conv]:hover + .row[data-conv]::before, :where(:root:not([data-input="touch"])) .list > .row[data-conv]:hover + .dk-rx + .row[data-conv]::before { opacity: 0; } }   /* 1.0.171 */
@media (min-width: 900px) { .shell > .side .list > .row { --row-div: 68px; } }

/* 1.0.127 — Online: bolinha verde no canto da foto (listas) */
.av.pres { position: relative; overflow: visible; }
.av.pres > img { border-radius: 50%; }
.av.pres.is-on::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; background: #0D874D; box-shadow: 0 0 0 2.5px var(--panel); }
:root[data-theme="dark"] .av.pres.is-on::after { background: #34D399; }
.shell > .side .list .av.pres.is-on::after { box-shadow: 0 0 0 2.5px var(--bg-side, var(--panel)); }

/* 1.0.127 — Chamadas e Contactos: a mesma divisória leve das Conversas e horas alinhadas */
.list > .cl-row + .cl-row::before, .list > .ct-person + .ct-person::before {
  content: ''; position: absolute; top: 0; right: 0; left: var(--row-div, 78px); height: 1px; background: #E7E4EA; pointer-events: none;
}
:root[data-theme="dark"] .list > .cl-row + .cl-row::before, :root[data-theme="dark"] .list > .ct-person + .ct-person::before { background: #262B31; }
.list > .cl-row:is([aria-current="true"], .cl-sel)::before, .list > .cl-row:is([aria-current="true"], .cl-sel) + .cl-row::before,
.list > .ct-person:is([aria-current="true"], .tapped)::before, .list > .ct-person:is([aria-current="true"], .tapped) + .ct-person::before { opacity: 0; }
@media (any-hover: hover) { :where(:root:not([data-input="touch"])) .list > .cl-row:hover::before, :where(:root:not([data-input="touch"])) .list > .cl-row:hover + .cl-row::before, :where(:root:not([data-input="touch"])) .list > .ct-person:hover::before, :where(:root:not([data-input="touch"])) .list > .ct-person:hover + .ct-person::before { opacity: 0; } }   /* 1.0.171 */
.cl-row .row-msg, .cl-row .row-time { font-variant-numeric: tabular-nums; }
.list > .cl-row { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.list > .cl-row:active { background: var(--hover); }

/* 1.0.128 — Contactos, convites e link pessoal */
.ct-form .ct-lbl { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin: 2px 0 6px; }
.ct-ph { display: flex; gap: 8px; align-items: stretch; }
.ct-ph .input { flex: 1; min-width: 0; }
.ct-cc { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 12px; border-radius: 12px; border: 1px solid var(--field-line, var(--line)); background: var(--panel); color: var(--text); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; font-variant-numeric: tabular-nums; }
.ct-cc .ct-flag { font-size: 1.25em; line-height: 1; }
.ct-cc .i { width: 16px; height: 16px; color: var(--text-2); }
.ct-sw { display: inline-block; margin: 10px 0 14px; background: none; border: 0; padding: 4px 0; font: inherit; font-size: 14px; cursor: pointer; }
.ct-form #cbyun .field { margin-bottom: 0; }
.ct-xph { margin: 0 0 14px; font-variant-numeric: tabular-nums; }
.av.cx-av { background: #ECEAF0 !important; color: #5F676D !important; }
:root[data-theme="dark"] .av.cx-av { background: #252A30 !important; color: #AAB2BA !important; }
.ct-ext .row-msg .txt { font-variant-numeric: tabular-nums; }
.ct-inv { flex: none; margin: 0 6px 0 4px; padding: 7px 14px; border-radius: 16px; border: 1px solid var(--violet); background: none; color: var(--violet); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ct-inv:active { background: var(--lilac); }
:root[data-theme="dark"] .ct-inv { border-color: #A78BFA; color: #C4B5FD; }
.cx-saved { text-align: center; padding: 6px 20px 4px; }
.cx-saved .cx-ic { width: 60px; height: 60px; margin: 4px auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--violet); }
.cx-saved .cx-ic .i { width: 28px; height: 28px; }
.cx-saved h2 { font-size: 19px; margin: 0 0 8px; }
.cx-saved p { margin: 0 0 6px; color: var(--text-2); line-height: 1.45; }
.cx-saved + .pad, .cx-saved + .pad + .pad { padding-top: 6px; }
.pf-join-note { display: flex; gap: 8px; align-items: flex-start; text-align: left; font-size: 13px; line-height: 1.4; }
.pf-join-note .i { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--violet); }
.qr-link { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--violet-dark); word-break: break-all; }
:root[data-theme="dark"] .qr-link { color: #C4B5FD; }
.qr-more { margin: 4px 0 16px; }
.wb-p { margin: 4px 22px 14px; color: var(--pv-t2); font-size: 14.5px; line-height: 1.45; }
.wb-prev { margin: 0 12px; padding: 28px 16px; border-radius: 16px; display: flex; justify-content: center; align-items: center; background: repeating-conic-gradient(#F1EFF4 0% 25%, #FFFFFF 0% 50%) 50% / 18px 18px; border: 1px solid var(--line); }
:root[data-theme="dark"] .wb-prev { background: repeating-conic-gradient(#1C2125 0% 25%, #15191C 0% 50%) 50% / 18px 18px; }
.wb-code textarea { display: block; width: 100%; min-height: 112px; resize: vertical; border: 0; outline: 0; padding: 12px 14px; background: none; color: var(--text); font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.wb-btns { display: flex; gap: 8px; }
.wb-btns .btn { flex: 1; }
.qr-link { text-align: center; }
.wb-btns { margin-top: 6px; }

/* ===== Estados 1.0.130: criar (texto/foto/vídeo), ver (pausa, gestos), responder, reagir, silenciar ===== */
.st-add svg.i { width: 14px; height: 14px; stroke-width: 2.8; }
.st-plus svg.i { width: 16px; height: 16px; stroke-width: 2.6; }
.st-b.muted { opacity: .45; }
.st-muted .row { opacity: .6; }
svg.i.st-eye { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; }
.st-viewer .f-s, .srq-tile.f-s { font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.st-viewer .f-e, .srq-tile.f-e { font-family: Georgia, 'Noto Serif', 'Times New Roman', serif; }
.st-viewer .f-c, .srq-tile.f-c { font-family: 'Dancing Script', 'Segoe Script', 'Bradley Hand', 'Brush Script MT', cursive; }
.st-text.sz-l { font-size: clamp(1.9em, 8vw, 2.8em); }
.st-text.sz-m { font-size: clamp(1.45em, 6vw, 2.1em); }
.st-text.sz-s { font-size: clamp(1.1em, 4.6vw, 1.5em); }
.st-input.sz-l { font-size: 2em; } .st-input.sz-m { font-size: 1.55em; } .st-input.sz-s { font-size: 1.2em; }
.st-fbtn span { font-size: 21px; font-weight: 600; line-height: 1; }
.st-top .icon-btn svg.i, .st-rbtn svg.i { filter: drop-shadow(0 0 2px rgba(0,0,0,.35)); }
.st-aud { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; max-width: max-content; background: rgba(0,0,0,.28); color: #fff; border-radius: 20px; padding: 8px 14px; text-align: left; font-size: .88em; }
.st-aud span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-aud svg.i { width: 18px; height: 18px; }
.st-bottom { justify-content: space-between; }
.st-bottom .send { flex: none; }
.st-bottom .send[disabled] { opacity: .5; }
.st-media { background: #000; }
.st-media .st-body { padding: 0 0 8px; }
.st-media .st-img, .st-media .st-vid { max-height: calc(100vh - 220px); }
.st-capbar { padding: 6px 12px 0; }
.st-capin { width: 100%; height: 46px; border-radius: 23px; border: 0; outline: none; padding: 0 16px; background: rgba(255,255,255,.14); color: #fff; font: inherit; font-size: 16px; }
.st-capin::placeholder { color: rgba(255,255,255,.7); }
/* visualizador */
.st-play { background: #000; }
.st-touch { position: absolute; left: 0; right: 0; top: 72px; bottom: 78px; z-index: 2; touch-action: none; cursor: pointer; }
.st-play .st-body { padding: 10px 16px 24px; }
.st-vid { max-width: 100%; max-height: 78vh; border-radius: 6px; background: #000; }
.st-load { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-color: rgba(255,255,255,.3); border-top-color: #fff; }
.st-play .st-cap { bottom: 8px; }
.st-pz { display: none; }
.st-viewer.paused .st-pz { display: grid; place-items: center; opacity: .85; }
.st-pz svg.i { width: 18px; height: 18px; }
.st-pfoot { position: relative; z-index: 3; padding: 8px 10px max(10px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: stretch; }
.st-pfoot .st-views { position: static; transform: none; align-self: center; display: flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 500; }
.st-views svg.i { width: 20px; height: 20px; }
.st-reply { display: flex; align-items: center; gap: 2px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.35); border-radius: 26px; padding: 0 4px 0 16px; }
.st-rin { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fff; font: inherit; font-size: 16px; height: 46px; }
.st-rin::placeholder { color: rgba(255,255,255,.78); }
.st-rbtn { color: #fff; }
.st-rbtn[hidden] { display: none; }
.st-rxrow { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
.st-rxrow[hidden] { display: none; }
.st-rxrow button { width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,.45); font-size: 26px; display: grid; place-items: center; transition: transform .12s; }
.st-rxrow button:active { transform: scale(1.2); }
.st-fly { position: absolute; left: 50%; bottom: 120px; font-size: 64px; z-index: 5; pointer-events: none; animation: stFly 1s ease-out forwards; }
@keyframes stFly { from { opacity: 0; transform: translate(-50%, 20px) scale(.6); } 30% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } to { opacity: 0; transform: translate(-50%, -170px) scale(1); } }
.st-viewer.sw-l .st-body { animation: stInL .22s ease-out; }
.st-viewer.sw-r .st-body { animation: stInR .22s ease-out; }
@keyframes stInL { from { opacity: .3; transform: translateX(40px); } }
@keyframes stInR { from { opacity: .3; transform: translateX(-40px); } }
@media (prefers-reduced-motion: reduce) { .st-viewer.sw-l .st-body, .st-viewer.sw-r .st-body, .st-fly { animation-duration: .01s; } }
.st-ask { padding: 2px 4px; }
.st-ask h2 { margin-bottom: 6px; }
.st-ask-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.st-vlist .item small { display: flex; align-items: center; gap: 4px; }
/* quem vê */
.st-chk { width: 24px; height: 24px; border-radius: 6px; border: 2px solid #B9B3C3; display: grid; place-items: center; flex: none; color: #fff; }
.st-chk svg.i { width: 14px; height: 14px; stroke-width: 2.4; opacity: 0; }
.st-pick.on .st-chk { background: var(--violet); border-color: var(--violet); }
.st-pick.on .st-chk.x { background: #D93A4A; border-color: #D93A4A; }
.st-pick.on .st-chk svg.i { opacity: 1; }
:root[data-theme="dark"] .st-chk { border-color: #4A525A; }
/* citação "Estado" na conversa */
.quote.srq { display: flex; align-items: stretch; gap: 8px; padding-right: 0; overflow: hidden; min-height: 54px; }
.srq-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.srq-tx > span { display: -webkit-box; }
svg.i.srq-ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; display: inline; }
.srq-media { position: relative; flex: none; width: 46px; margin: -6px 0; }
.srq-tile { width: 46px; height: 100%; min-height: 54px; object-fit: cover; display: grid; place-items: center; color: #fff; font-size: 8px; font-weight: 600; line-height: 1.15; overflow: hidden; padding: 4px; text-align: center; word-break: break-word; background: #5F676D; }
img.srq-tile { padding: 0; display: block; }
.srq-tile svg.i { width: 18px; height: 18px; }
.srq-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.srq-play svg.i { width: 16px; height: 16px; fill: #fff; filter: drop-shadow(0 0 2px rgba(0,0,0,.6)); }
.quote.srq > .srq-tx { display: flex; -webkit-line-clamp: none; color: inherit; overflow: visible; }
.quote.srq .srq-tx > span { display: -webkit-box; }
.quote.srq > .srq-media { display: block; -webkit-line-clamp: none; overflow: hidden; border-radius: 0 6px 6px 0; }
.quote.srq span.srq-tile { display: grid; -webkit-line-clamp: none; color: #fff; }
.quote.srq .srq-play { display: grid; -webkit-line-clamp: none; color: #fff; overflow: visible; }
.st-chk.x svg.i { stroke-width: 3.2; width: 15px; height: 15px; }
.st-viewer .icon-btn, .st-viewer .icon-btn:hover, .st-viewer .icon-btn:focus { background: transparent; color: #fff; }
.st-viewer .icon-btn:active { background: rgba(0,0,0,.2); }
.st-pick .st-chk svg.i { stroke: #fff; color: #fff; }
/* 1.0.131: numa página completa nada encolhe para caber — a página faz scroll (Novo grupo cortava a lista) */
.spage-body > * { flex-shrink: 0; }

/* ===== Canais 1.0.132: página Canais, publicações em cartão, pré-visualização, foto ===== */
.ch-newrow .ch-plus { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--violet-dark); flex: none; }
.ch-newrow .ch-plus svg.i { width: 22px; height: 22px; stroke-width: 2.2; }
:root[data-theme="dark"] .ch-newrow .ch-plus { background: #2A2340; color: #C4B5FD; }
.ch-row { cursor: pointer; }
.ch-row .grow b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-row .grow small { display: block; }
.ch-tag { flex: none; font-size: .8em; font-weight: 600; color: var(--text-2); padding: 4px 10px; border-radius: 12px; background: var(--hover, #F5F3F8); }
:root[data-theme="dark"] .ch-tag { background: #23292F; }
.btn.ghost.ch-fbtn { flex: none; min-height: 34px; padding: 0 16px; border-radius: 17px; font-size: .9em; }
.ch-pv { text-align: center; padding: 6px 8px 0; }
.ch-pv .av { margin: 0 auto; }
.ch-pv h2 { margin: 10px 0 2px; font-size: 1.25em; text-transform: none; letter-spacing: 0; color: var(--text); }
.ch-pv .hint { margin: 0; }
.ch-pv-d { margin: 12px 0 0; white-space: pre-wrap; line-height: 1.45; text-align: center; }
.ch-pv-btns { padding: 16px 4px 6px; }
.ch-pv-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .82em; margin: 4px 0 2px; text-align: center; }
.ch-pv-note svg.i { width: 15px; height: 15px; flex: none; }
.ch-desc { padding: 14px 16px; white-space: pre-wrap; line-height: 1.45; }
.ff-h { display: block; color: var(--text-2); font-size: .82em; margin: 6px 4px 0; }
/* publicação: cartão a quase toda a largura, igual para quem publica e para quem segue */
.msgs .m.post { justify-content: center; }
.msgs .m.post .b { width: 100%; max-width: 600px; background: var(--panel); border-radius: 12px; box-shadow: 0 1px 2px rgba(23, 21, 28, .08); }
.msgs .m.post .b::before { display: none; }
.msgs .m.post + .m.post { margin-top: 8px; }
.m.post .meta { display: inline-flex; align-items: center; gap: 4px; }
.pv-v { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; }
.pv-v[hidden] { display: none; }
.pv-v svg.i { width: 15px; height: 15px; }
.pv-v b { font-weight: 500; }
:root[data-theme="dark"] .msgs .m.post .b { background: #1E2428; }
.list > .cl-row.tapped { background: var(--sel, #EEE9FF); } :root[data-theme="dark"] .list > .cl-row.tapped { background: rgba(167, 139, 250, .14); }

/* 1.0.135 — notificações bloqueadas: como desbloquear · código de falha da atualização */
.nbh-sheet { padding: 6px 20px 4px; text-align: center; }
.nbh-ic { width: 52px; height: 52px; margin: 6px auto 8px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--violet); }
:root[data-theme="dark"] .nbh-ic { color: #B9A8FF; }
.nbh-ic svg { width: 26px; height: 26px; }
.nbh-sheet h2 { margin: 0 0 6px; font-size: 1.15em; }
.nbh-sheet p { margin: 0 0 8px; color: var(--text-2); font-size: .92em; }
.nbh-sheet .nbh-step { text-align: left; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; line-height: 1.45; }
.nbh-btns { display: flex; gap: 10px; margin-top: 14px; }
.nbh-btns .btn { flex: 1; }
.upd-sheet .upd-code { font-size: .78em; opacity: .75; }

/* 1.0.136 — ecrã vazio único (.es) · janela de edição (nome/descrição do grupo) */
.es { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 48px 28px 24px; color: var(--text-2); }
.es-ic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--violet); margin-bottom: 10px; }
.es-ic svg.i { width: 32px; height: 32px; stroke-width: 1.9; }
:root[data-theme="dark"] .es-ic { background: #2A2450; color: #C4B5FD; }
.es h3 { margin: 0; font-size: 1.1em; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; max-width: 320px; }
.es p { margin: 0; font-size: .93em; line-height: 1.45; max-width: 320px; }
.es.es-sm { padding: 28px 24px 18px; gap: 4px; }
.es.es-sm .es-ic { width: 52px; height: 52px; margin-bottom: 8px; }
.es.es-sm .es-ic svg.i { width: 24px; height: 24px; }
.es.es-sm h3 { font-size: 1em; font-weight: 500; }
.ask-form { display: flex; flex-direction: column; gap: 14px; }
.ask-form h2 { margin-bottom: 0; }
.dv-ask.ask-form .ff { margin: 0 16px; }
.dv-ask.ask-form .dv-ask-btns { padding-top: 4px; }
.ask-form textarea.input { resize: vertical; min-height: 84px; font-family: inherit; line-height: 1.4; }
.dk-ask.ask-form .dk-ask-btns { margin-top: 4px; }

/* 1.0.137 — lista de conversas: ✓✓ "visto" verde, como dentro da conversa (a regra dos ícones cinzentos da lista tapava-o) */
.side .list > .row .row-msg svg.i.tick.read, .list > .row .tick.read { color: var(--read); }
/* 1.0.137 — ✦ IA: círculo violeta mais pequeno (46 → 40px), estrela igual (24px), área de toque 48px */
.fab-ai { width: 40px; height: 40px; box-shadow: 0 2px 8px rgba(124, 58, 237, .26); }
.fab-ai::before { inset: -4px; }

/* 1.0.140 — página «Contas» (menu lateral → Mudar de conta ›; no computador, painel Contas) */
.drw-sw .drw-swc { transform: none; }
.acp-intro { margin: 4px 22px 4px; color: var(--text-2); font-size: .93em; line-height: 1.45; }
.acp-row { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 16px; }
.acp-row .av { width: 46px; height: 46px; flex: none; }
.acp-row .grow { display: flex; flex-direction: column; min-width: 0; }
.acp-row .grow b { font-weight: 600; font-size: 1em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acp-row .grow small { color: var(--text-2); font-size: .85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acp-row[aria-current="true"] { cursor: default; }
.acp-on { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: .8em; font-weight: 600; color: var(--violet); background: var(--lilac); padding: 4px 10px 4px 8px; border-radius: 12px; }
.acp-on svg.i { width: 13px; height: 13px; stroke-width: 2.4; }
:root[data-theme="dark"] .acp-on { color: #C4B5FD; }
.acp-chev { width: 18px; height: 18px; color: var(--text-2); flex: none; }
.acp-side:empty { display: none; }
.acp-n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--violet); color: #fff; font-size: .78em; font-weight: 700; display: grid; place-items: center; }
.acp-lock { display: inline-flex; align-items: center; gap: 4px; font-size: .78em; font-weight: 600; color: var(--text-2); border: 1px solid var(--line); padding: 3px 9px 3px 7px; border-radius: 12px; }
.acp-lock svg.i { width: 13px; height: 13px; }
.acp-plus { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--lilac); color: var(--violet); }
.acp-plus svg.i { width: 22px; height: 22px; }
.acp-plus.on { background: linear-gradient(135deg, #7C3AED, #A855F7); color: #fff; }
:root[data-theme="dark"] .acp-plus:not(.on) { background: rgba(167, 139, 250, .14); color: #C4B5FD; }
#acpplus:not(:empty) { margin-top: 14px; }
.acp-pc { margin: 0 10px; background: var(--panel); border-radius: 18px; padding: 18px 18px 16px; border: 1px solid color-mix(in srgb, var(--violet) 22%, var(--line)); }
.acp-pc-h { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.acp-pc-h b { display: block; font-weight: 600; font-size: 1.02em; } .acp-pc-h small { display: block; color: var(--text-2); font-size: .86em; line-height: 1.4; margin-top: 2px; }
.acp-pc ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.acp-pc li { display: flex; align-items: center; gap: 12px; font-size: .93em; }
.acp-pc li svg.i { width: 18px; height: 18px; color: var(--violet); flex: none; }
:root[data-theme="dark"] .acp-pc li svg.i { color: #C4B5FD; }
.acp-pc .btn { width: 100%; }
.acp-note { display: flex; gap: 10px; align-items: flex-start; margin: 18px 22px 8px; color: var(--text-2); font-size: .85em; line-height: 1.45; }
.acp-note svg.i { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.acp-from { display: block; text-align: center; margin-top: 8px; color: var(--text-2); font-size: .82em; }

/* 1.0.143 — COMPUTADOR · Parte 7 · Etapa 6: páginas secundárias no sítio certo (telemóvel não muda) */
@media (min-width: 900px) {
  /* 6a — listas na coluna do meio (Arquivadas, Com estrela, Canais, Lembretes, Etiquetas, Trancadas): por cima da lista, a conversa fica à direita */
  #shell > .side { position: relative; }
  .side > .spage.dk-side { position: absolute; inset: 0; z-index: 6; background: var(--panel); animation: dk-side-in .16s ease-out; }
  .side > .spage.dk-side .spage-top { background: var(--panel); min-height: 64px; padding: 10px 10px 6px 8px; border-bottom: 1px solid var(--line); }
  .side > .spage.dk-side .spage-top h1 { font-size: 1.2em; }
  .side > .spage.dk-side .spage-body { max-width: none; padding: 12px 12px 24px; background: var(--panel); }
  .side > .spage.dk-side .spage-foot { max-width: none; background: var(--panel); }
  .side > .spage.dk-side .card, .side > .spage.dk-side .pv-card { margin-left: 0; margin-right: 0; }
  .side > .spage.dk-side [aria-current="true"] { background: var(--lilac); }
  :root[data-theme="dark"] .side > .spage.dk-side [aria-current="true"] { background: #2A2450; }
  @keyframes dk-side-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
  /* 6c — janela centrada */
  .dk-dlg-scrim { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(15, 12, 22, .42); animation: dk-fade .14s ease-out; }
  .dk-dlg-scrim > .spage.dk-dialog { position: relative; inset: auto; width: min(560px, 100%); max-height: min(86vh, 820px); border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); background: var(--page); animation: dk-pop .16s ease-out; }
  .dk-dlg-scrim > .spage.dk-dialog .spage-top { border-radius: 20px 20px 0 0; padding: 12px 12px 6px; }
  @keyframes dk-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes dk-pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) { .side > .spage.dk-side, .dk-dlg-scrim, .dk-dlg-scrim > .spage.dk-dialog { animation: none; } }
@media (min-width: 900px) { .spage.dk-side:focus, .spage.dk-dialog:focus { outline: none; } }
/* 6b — painel de informação à direita da conversa (Info do grupo/canal, perfil): ≥1280 coluna própria; 900–1279 por cima da conversa */
@media (min-width: 900px) {
  .shell > .dk-info { grid-column: 3; grid-row: 1; justify-self: end; width: var(--dk-info); height: 100%; min-height: 0; z-index: 4; display: flex; flex-direction: column; overflow: hidden;
    background: var(--panel); border-left: 1px solid var(--line); box-shadow: -10px 0 30px rgba(23, 21, 28, .10); animation: dk-info-in .16s ease-out; }
  .dk-info > .spage { position: static; inset: auto; flex: 1; min-height: 0; animation: none; background: var(--panel); }
  .dk-info > .spage .spage-top { background: var(--panel); min-height: 64px; border-bottom: 1px solid var(--line); padding: 10px 10px 6px 8px; }
  .dk-info > .spage .spage-top h1 { font-size: 1.15em; }
  .dk-info > .spage .spage-top [data-close] svg { transform: rotate(180deg); }   /* fecha para a direita */
  .dk-info > .spage .spage-body { max-width: none; padding: 12px 14px 24px; background: var(--panel); }
  .dk-info > .pf-scrim { position: static; inset: auto; flex: 1; min-height: 0; display: flex; background: none; animation: none; z-index: auto; }
  .dk-info > .pf-scrim .pf { max-width: none; width: 100%; height: 100%; border-radius: 0; box-shadow: none; animation: none; transform: none; background: var(--panel); }
  .dk-info > .pf-scrim .pf-grab { display: none; }
  @keyframes dk-info-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
}
@media (min-width: 1280px) {
  .shell.has-info > .dk-info { grid-column: 4; justify-self: stretch; width: auto; box-shadow: none; }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) { .shell > .dk-info { animation: none; } }
@media (min-width: 900px) {
  .dk-info > .pf-scrim .pf-bar { display: flex; min-height: 64px; padding: 10px 10px 6px 8px; background: var(--panel); border-bottom: 1px solid var(--line); }
  .dk-info > .pf-scrim .pf-bar [data-p="close"] svg { transform: rotate(180deg); }
  .dk-info > .pf-scrim .pf-bar-name { font-size: 1.05em; opacity: 1; }
}

/* 1.0.145 — menu lateral: sem barra de scroll visível (continua a deslizar se o ecrã for baixo) · seta do perfil em violeta, igual à de «Mudar de conta» */
.drw-list, .drw-panel { scrollbar-width: none; -ms-overflow-style: none; }
.drw-list::-webkit-scrollbar, .drw-panel::-webkit-scrollbar { display: none; width: 0; height: 0; }
.drw-head .drw-chev { color: var(--violet); }
:root[data-theme="dark"] .drw-head .drw-chev { color: #B9A8FF; }

/* =====================================================================
   1.0.147 — TEMA CLARO NOVO («vidro»): só com <html data-skin="glass"> (tema claro).
   O claro anterior continua intacto = «Claro off» (localStorage mc.look = 'off'). O escuro não muda.
   Letra Inter (alojada no JaPassa, licença SIL OFL) só neste tema.
   ===================================================================== */
@font-face { font-family: 'Inter JP'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../assets/fonts/inter.latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter JP'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../assets/fonts/inter.latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root[data-skin="glass"] {
  --g-text: #171329; --g-text-2: #667085; --g-accent: #A855F7;
  --g-in: #FFFFFF; --g-out: #F1D9FA;
  --g-glass: rgba(255, 255, 255, .82);
  --g-shadow: 0 1px 2px rgba(48, 24, 110, .10), 0 2px 8px rgba(48, 24, 110, .06);
}
:root[data-skin="glass"] body, :root[data-skin="glass"] button, :root[data-skin="glass"] input, :root[data-skin="glass"] textarea, :root[data-skin="glass"] select {
  font-family: 'Inter JP', Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ---- fundo: a imagem original, sem padrões; no telemóvel presa ao topo e com tamanho fixo (não salta com o teclado) ---- */
:root[data-skin="glass"] #chat { background: #B9A6FB url(../assets/fundo.chat.claro.2.webp) no-repeat center top;
  background-size: max(100%, calc(var(--wh, 100vh) * .5632)) auto; }
:root[data-skin="glass"][data-wall="plain"] #chat { background: #EFE7FB; }
@media (min-width: 900px) { :root[data-skin="glass"] #chat { background-size: cover; background-position: center; } }

/* ---- cabeçalho: uma só barra arredondada, em vidro ---- */
:root[data-skin="glass"] #chat .chat-head { margin: calc(8px + env(safe-area-inset-top)) 12px 4px; padding: 6px 6px 6px 4px; min-height: 68px; gap: 6px;
  border: 0; border-radius: 36px; background: var(--g-glass); box-shadow: var(--g-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root[data-skin="glass"] #chat .chat-head { background: rgba(255, 255, 255, .95); } }
:root[data-skin="glass"] #chat .chat-head > .av { width: 48px; height: 48px; font-size: 1.05em; }
:root[data-skin="glass"] #chat .chat-head .who { padding-left: 4px; }
:root[data-skin="glass"] #chat .chat-head .name { font-size: 18px; font-weight: 600; color: var(--g-text); display: flex; align-items: center; gap: 5px; min-width: 0; }
:root[data-skin="glass"] #chat .chat-head .name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
:root[data-skin="glass"] #chat .chat-head .status { font-size: 14px; font-weight: 400; color: var(--g-text-2); }
:root[data-skin="glass"] #chat .chat-head .status.on, :root[data-skin="glass"] #chat .chat-head .status.live { color: #0D874D; }
:root[data-skin="glass"] #chat .chat-head .icon-btn { width: 44px; height: 44px; border-radius: 50%; color: var(--g-text); }
:root[data-skin="glass"] #chat .chat-head .icon-btn svg.i { width: 24px; height: 24px; stroke-width: 2.2; }
:root[data-skin="glass"] #chat .chat-head #cvoice svg.i, :root[data-skin="glass"] #chat .chat-head #cvideo svg.i { fill: currentColor; }
:root[data-skin="glass"] #chat .chat-head #cvoice { order: 1; } :root[data-skin="glass"] #chat .chat-head #cvideo { order: 2; }
:root[data-skin="glass"] #chat .chat-head #csearch { order: 3; } :root[data-skin="glass"] #chat .chat-head #cmenu { order: 4; }
.hd-fav { display: none; }
:root[data-skin="glass"] .hd-fav { display: inline-block; flex: none; width: 19px; height: 19px; color: var(--g-accent); fill: currentColor; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }

/* ---- separadores de data: cápsula violeta-azulada translúcida ---- */
:root[data-skin="glass"] #msgs .day:not(.e2ee-note):not(.sys) { background: rgba(86, 98, 214, .58); color: #fff; font-size: 14px; font-weight: 600; padding: 6px 14px; border-radius: 999px; box-shadow: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---- balões ---- */
:root[data-skin="glass"] #msgs { padding-top: 6px; }
:root[data-skin="glass"] #msgs .m { margin-top: 3px; }
:root[data-skin="glass"] #msgs .m.first { margin-top: 10px; }
:root[data-skin="glass"] #msgs .b { background: var(--g-in); color: var(--g-text); border-radius: 18px; padding: 9px 13px 10px; box-shadow: var(--g-shadow); max-width: min(85%, 560px); line-height: 1.3; }
:root[data-skin="glass"] #msgs .m.out .b { background: var(--g-out); }
:root[data-skin="glass"] #msgs .b .txt { font-size: calc(var(--fs) * 1.0625); font-weight: 400; }
:root[data-skin="glass"] #msgs .b .txt.jumbo { font-size: inherit; }
:root[data-skin="glass"] #msgs .b .meta { font-size: 13px; color: var(--g-text-2); margin-left: 12px; }
:root[data-skin="glass"] #msgs .b .meta .tick.read { color: var(--g-accent); }
:root[data-skin="glass"] #msgs .m.first .b { border-radius: 18px; }
:root[data-skin="glass"] #msgs .m .b::before { display: none; }
/* cauda só no último balão de cada grupo, em baixo (o grupo continua quando a mensagem seguinte não é «first») */
:root[data-skin="glass"] #msgs .m.in:not(.stk):not(:has(+ .m:not(.first))) .b { border-bottom-left-radius: 5px; }
:root[data-skin="glass"] #msgs .m.out:not(.stk):not(:has(+ .m:not(.first))) .b { border-bottom-right-radius: 5px; }
:root[data-skin="glass"] #msgs .m:not(.stk):not(:has(+ .m:not(.first))) .b::after { content: ''; position: absolute; bottom: 0; width: 11px; height: 15px; background: inherit; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 15'%3E%3Cpath d='M11 0C11 7 8 12 0 15h11z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 15'%3E%3Cpath d='M11 0C11 7 8 12 0 15h11z'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
:root[data-skin="glass"] #msgs .m.in:not(.stk):not(:has(+ .m:not(.first))) .b::after { left: -6px; }
:root[data-skin="glass"] #msgs .m.out:not(.stk):not(:has(+ .m:not(.first))) .b::after { right: -6px; transform: scaleX(-1); }
:root[data-skin="glass"] #msgs .m.typing-b .b::after { display: none; }
:root[data-skin="glass"] #msgs .m.stk .b { background: none; box-shadow: none; padding: 0; }
:root[data-skin="glass"] #msgs .m.stk .b .meta { background: rgba(255, 255, 255, .85); }
:root[data-skin="glass"] #msgs .doc { background: rgba(23, 19, 41, .04); }
:root[data-skin="glass"] #msgs .doc .info b { font-size: 15.5px; font-weight: 600; }
:root[data-skin="glass"] #msgs .quote { background: rgba(168, 85, 247, .09); border-left-color: var(--g-accent); }

/* ---- barra de escrever: uma só cápsula em vidro com o microfone violeta lá dentro ---- */
:root[data-skin="glass"] #chat .composer { margin: 4px 12px calc(10px + env(safe-area-inset-bottom)); padding: 6px; gap: 2px; align-items: flex-end;
  border-radius: 32px; background: var(--g-glass); box-shadow: var(--g-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root[data-skin="glass"] #chat .composer { background: rgba(255, 255, 255, .95); } }
:root[data-skin="glass"] #chat .composer .box { background: none; box-shadow: none; border-radius: 0; padding: 0; min-height: 48px; align-items: flex-end; }
:root[data-skin="glass"] #chat .composer .box .icon-btn { width: 44px; height: 48px; color: var(--g-text); }
:root[data-skin="glass"] #chat .composer .box .icon-btn svg.i { width: 26px; height: 26px; stroke-width: 1.9; }
:root[data-skin="glass"] #chat .composer #emo { position: relative; margin-right: 6px; }
:root[data-skin="glass"] #chat .composer #emo::after { content: ''; position: absolute; right: -4px; top: 13px; bottom: 13px; width: 1.5px; border-radius: 1px; background: rgba(23, 19, 41, .28); }
:root[data-skin="glass"] #chat .composer #tx { font-size: calc(var(--fs) * 1.0625); font-weight: 400; color: var(--g-text); }
:root[data-skin="glass"] #chat .composer #tx::placeholder { color: #8A90A0; font-weight: 400; }
:root[data-skin="glass"] #chat .composer .send { width: 48px; height: 48px; background: var(--g-accent); color: #fff; box-shadow: 0 2px 8px rgba(168, 85, 247, .35); transition: transform .15s ease; }
:root[data-skin="glass"] #chat .composer .send:active { transform: scale(.94); }
:root[data-skin="glass"] #chat .composer .send svg.i { width: 24px; height: 24px; }
/* ecrãs estreitos: os botões mantêm 44px de toque, só os espaços encolhem (o nome é a única parte que cede) */
@media (max-width: 380px) {
  :root[data-skin="glass"] #chat .chat-head { margin-left: 8px; margin-right: 8px; gap: 2px; padding-right: 2px; }
  :root[data-skin="glass"] #chat .chat-head > .av { width: 42px; height: 42px; }
  :root[data-skin="glass"] #chat .chat-head .icon-btn.back { width: 36px; }
  :root[data-skin="glass"] #chat .composer { margin-left: 8px; margin-right: 8px; }
}
/* seleção de mensagens: a barra ocupa a mesma cápsula do cabeçalho */
:root[data-skin="glass"] #chat .chat-head .msel-bar { border-radius: inherit; background: #FFFFFF; padding: 0 6px; }
:root[data-skin="glass"] #chat .chat-head .msel-bar .icon-btn { width: 40px; height: 44px; }

/* =====================================================================
   1.0.149 — TEMA ESCURO NOVO («vidro»): o mesmo desenho do claro, em escuro. <html data-skin="glass" data-theme="dark">.
   O escuro anterior = «Escuro off» (mc.look = 'off'). Nada fora da conversa muda de cor (só a letra Inter).
   ===================================================================== */
:root[data-skin="glass"][data-theme="dark"] {
  --g-text: #FFFFFF; --g-text-2: #B8C0D5; --g-text-3: #A6AEC4; --g-accent: #A855F7;
  --g-in: #1D253D; --g-out: #7135B5;
  --g-glass: rgba(25, 32, 58, .78); --g-glass-2: rgba(20, 27, 49, .86);   /* 1.0.150: valores do documento oficial do escuro */
  --g-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 10px rgba(0, 0, 0, .25);
}
:root[data-skin="glass"][data-theme="dark"] #chat { background: #0B0A24 url(../assets/fundo.chat.escuro.2.webp) no-repeat center top;
  background-size: max(100%, calc(var(--wh, 100vh) * .5625)) auto; }
:root[data-skin="glass"][data-theme="dark"][data-wall="plain"] #chat { background: #0E0C22; }
@media (min-width: 900px) { :root[data-skin="glass"][data-theme="dark"] #chat { background-size: cover; background-position: center; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-skin="glass"][data-theme="dark"] #chat .chat-head { background: rgba(25, 32, 58, .96); }
  :root[data-skin="glass"][data-theme="dark"] #chat .composer { background: rgba(20, 27, 49, .97); } }
:root[data-skin="glass"][data-theme="dark"] #chat .composer { background: var(--g-glass-2); }
:root[data-skin="glass"][data-theme="dark"] #chat .chat-head, :root[data-skin="glass"][data-theme="dark"] #chat .composer { box-shadow: var(--g-shadow), inset 0 0 0 1px rgba(255, 255, 255, .07); }
:root[data-skin="glass"][data-theme="dark"] #chat .chat-head .status.on, :root[data-skin="glass"][data-theme="dark"] #chat .chat-head .status.live { color: #34D399; }
:root[data-skin="glass"][data-theme="dark"] .hd-fav { color: #A855F7; }
:root[data-skin="glass"][data-theme="dark"] #chat .chat-head .msel-bar { background: #19203A; }
:root[data-skin="glass"][data-theme="dark"] #msgs .day:not(.e2ee-note):not(.sys) { background: rgba(58, 52, 140, .62); color: #fff; }
:root[data-skin="glass"][data-theme="dark"] #msgs .m.in .b { box-shadow: var(--g-shadow), inset 0 0 0 1px rgba(255, 255, 255, .06); }
:root[data-skin="glass"][data-theme="dark"] #msgs .m.out .b { color: #FFFFFF; }
:root[data-skin="glass"][data-theme="dark"] #msgs .m.out .b .meta { color: #E2D3FF; }
:root[data-skin="glass"][data-theme="dark"] #msgs .b .meta .tick.read { color: #F0E4FF; }
:root[data-skin="glass"][data-theme="dark"] #msgs .m.in .b .meta .tick.read { color: #C084FC; }
:root[data-skin="glass"][data-theme="dark"] #msgs .b .meta .tick.delivered, :root[data-skin="glass"][data-theme="dark"] #msgs .b .meta .tick.sent { color: rgba(255, 255, 255, .45); }
:root[data-skin="glass"][data-theme="dark"] #msgs .m.stk .b .meta { background: rgba(20, 17, 38, .8); color: #E9E6F5; }
:root[data-skin="glass"][data-theme="dark"] #msgs .doc { background: rgba(255, 255, 255, .06); }
:root[data-skin="glass"][data-theme="dark"] #msgs .doc .info small { color: var(--g-text-2); font-size: 14px; }
:root[data-skin="glass"][data-theme="dark"] #msgs .doc .info b { font-size: 16px; font-weight: 600; }
:root[data-skin="glass"][data-theme="dark"] #msgs .m.out .doc .info small { color: #E2D3FF; }
:root[data-skin="glass"][data-theme="dark"] #msgs .quote { background: rgba(192, 132, 252, .14); border-left-color: #C084FC; }
:root[data-skin="glass"][data-theme="dark"] #msgs .quote b { color: #D8B4FE; }
:root[data-skin="glass"][data-theme="dark"] #msgs .quote span { color: rgba(255, 255, 255, .72); }
:root[data-skin="glass"][data-theme="dark"] #chat .composer #emo::after { background: rgba(255, 255, 255, .28); }
:root[data-skin="glass"][data-theme="dark"] #chat .composer #tx::placeholder { color: #B8C0D5; }
:root[data-skin="glass"][data-theme="dark"] #chat .composer #tx { caret-color: #A855F7; }

/* 1.0.152 — registo/entrada (número, código, perfil): fundo com padrão suave, só no tema claro. Preso ao topo e com tamanho fixo (não salta com o teclado). */
:root[data-theme="light"] .auth { background: #FBFAFE url(../assets/fundo.registo.webp) no-repeat center top; background-size: max(100%, calc(var(--wh, 100vh) * .5625)) auto; }
@media (min-width: 900px) { :root[data-theme="light"] .auth { background-repeat: repeat; background-size: auto 100vh; } }
@media (min-width: 900px) { :root[data-theme="light"] .auth-inner { align-self: center; min-height: 0; margin: 32px 0; padding: 36px 36px 28px; border-radius: 24px; background: rgba(255, 255, 255, .9); box-shadow: 0 10px 40px rgba(76, 29, 149, .10); } }

/* =====================================================================
   1.0.153 — Fundos da conversa à escolha (Definições → Aparência → Fundo da conversa).
   jp (o do tema) · sunset · ocean · aurora · plain. Os 3 novos só no tema claro novo; no escuro fica o fundo escuro.
   Cada fundo afina só a cápsula das datas para a sua cor (o resto do tema não muda).
   ===================================================================== */
:root[data-skin="glass"][data-theme="light"][data-wall="sunset"] #chat { background-color: #FF8A3D; background-image: url(../assets/fundo.chat.sol.webp); }
:root[data-skin="glass"][data-theme="light"][data-wall="ocean"] #chat { background-color: #1FB5C9; background-image: url(../assets/fundo.chat.oceano.webp); }
:root[data-skin="glass"][data-theme="light"][data-wall="aurora"] #chat { background-color: #A23CE8; background-image: url(../assets/fundo.chat.aurora.webp); }
:root[data-skin="glass"][data-theme="light"][data-wall="sunset"] #msgs .day:not(.e2ee-note):not(.sys) { background: rgba(196, 66, 20, .62); }
:root[data-skin="glass"][data-theme="light"][data-wall="ocean"] #msgs .day:not(.e2ee-note):not(.sys) { background: rgba(8, 92, 140, .60); }
:root[data-skin="glass"][data-theme="light"][data-wall="aurora"] #msgs .day:not(.e2ee-note):not(.sys) { background: rgba(92, 40, 190, .58); }

/* escolha visual: miniaturas com o nome por baixo */
.wall-pick { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px !important; margin-top: 4px; }
.wall-pick button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 !important; background: none !important; color: var(--text) !important; border-radius: 0; min-width: 0; }
.wall-pick .wp-sw { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 12px; background: center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(23, 19, 41, .10); transition: box-shadow .15s, transform .15s; }
.wall-pick button:active .wp-sw { transform: scale(.96); }
.wall-pick .wp-jp { background-image: url(../assets/fundo.chat.claro.2.webp); }
.wall-pick .wp-sunset { background-image: url(../assets/fundo.chat.sol.webp); }
.wall-pick .wp-ocean { background-image: url(../assets/fundo.chat.oceano.webp); }
.wall-pick .wp-aurora { background-image: url(../assets/fundo.chat.aurora.webp); }
.wall-pick .wp-plain { background: #EFE7FB; }
:root[data-theme="dark"] .wall-pick .wp-jp { background-image: url(../assets/fundo.chat.escuro.2.webp); }
:root[data-theme="dark"] .wall-pick .wp-plain { background: #0E0C22; }
:root[data-skin="off"] .wall-pick .wp-jp { background: var(--chat-bg); background-size: 160px; }
.wall-pick button[aria-pressed="true"] .wp-sw { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--violet); }
.wall-pick .wp-ok { position: absolute; right: 5px; bottom: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--violet); color: #fff; display: none; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.wall-pick .wp-ok svg.i { width: 11px; height: 11px; stroke-width: 2.2; }
.wall-pick button[aria-pressed="true"] .wp-ok { display: grid; }
.wall-pick .wp-l { font-size: 12.5px; line-height: 1.2; text-align: center; color: var(--text-2); max-width: 100%; overflow-wrap: anywhere; }
.wall-pick button[aria-pressed="true"] .wp-l { color: var(--text); font-weight: 600; }
.wp-hint { display: none; margin-top: 10px; color: var(--text-2); font-size: 12.5px; }
:root[data-theme="dark"] .wp-hint { display: block; }

/* pré-visualização (Aparência) igual à conversa no tema novo */
:root[data-skin="glass"] .lk-prev { background: #B9A6FB url(../assets/fundo.chat.claro.2.webp) center / cover no-repeat; border: 0; }
:root[data-skin="glass"][data-theme="dark"] .lk-prev { background: #0B0A24 url(../assets/fundo.chat.escuro.2.webp) center / cover no-repeat; }
:root[data-skin="glass"][data-theme="light"][data-wall="sunset"] .lk-prev { background-image: url(../assets/fundo.chat.sol.webp); }
:root[data-skin="glass"][data-theme="light"][data-wall="ocean"] .lk-prev { background-image: url(../assets/fundo.chat.oceano.webp); }
:root[data-skin="glass"][data-theme="light"][data-wall="aurora"] .lk-prev { background-image: url(../assets/fundo.chat.aurora.webp); }
:root[data-skin="glass"][data-wall="plain"] .lk-prev { background: #EFE7FB; }
:root[data-skin="glass"][data-theme="dark"][data-wall="plain"] .lk-prev { background: #0E0C22; }
:root[data-skin="glass"] .lk-prev .b { background: var(--g-in); color: var(--g-text); border-radius: 18px; padding: 9px 13px 10px; box-shadow: var(--g-shadow); }
:root[data-skin="glass"] .lk-prev .m.out .b { background: var(--g-out); }
:root[data-skin="glass"][data-theme="dark"] .lk-prev .m.out .b { color: #fff; }
:root[data-skin="glass"] .lk-prev .b::before { display: none; }
:root[data-skin="glass"] .lk-prev .b .meta { color: var(--g-text-2); }
:root[data-skin="glass"][data-theme="dark"] .lk-prev .m.out .b .meta { color: #E2D3FF; }
:root[data-skin="glass"] .lk-prev .tick.read { color: var(--g-accent); }
/* a escolha de fundo não herda o estilo de «pílula» dos outros botões das Definições */
.spage-body .pv .setting .seg.wall-pick { display: grid; flex-wrap: initial; }
.spage-body .pv .setting .seg.wall-pick button, :root[data-theme="dark"] .spage-body .pv .setting .seg.wall-pick button { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text); font-size: inherit; font-weight: 400; display: flex; flex: initial; gap: 6px; white-space: normal; }
.spage-body .pv .setting .seg.wall-pick button[aria-pressed="true"], :root[data-theme="dark"] .spage-body .pv .setting .seg.wall-pick button[aria-pressed="true"] { background: none; border: 0; }
.spage-body .pv .setting .seg.wall-pick button::before { content: none; display: none; }
.spage-body .pv .setting small.wp-hint { display: none; }
:root[data-theme="dark"] .spage-body .pv .setting small.wp-hint { display: block; }

/* 1.0.154 — registo/entrada no telemóvel: o bloco (logótipo + formulário) fica centrado no ecrã, ligeiramente acima do meio,
   em vez de colado ao topo. Com o teclado aberto o espaço encolhe sozinho (o formulário continua visível). */
@media (max-width: 899px) {
  .auth-inner { justify-content: center; padding-top: max(32px, env(safe-area-inset-top)); padding-bottom: max(56px, 9vh); }
  .brand.brand-reg { margin: 0 0 26px; }
}
@media (max-width: 899px) and (max-height: 640px) { .auth-inner { justify-content: flex-start; padding-top: 28px; padding-bottom: 24px; } .brand.brand-reg { margin: 0 0 16px; } }

/* 1.0.155 — menu principal: separador ativo no violeta dos temas novos (#A855F7), telemóvel e barra lateral do PC. Temas «off» sem mudança. */
:root[data-skin="glass"][data-theme] .bnav .bnav-tab[aria-selected="true"],
:root[data-skin="glass"][data-theme] .bnav .bnav-tab[aria-selected="true"] svg,
:root[data-skin="glass"][data-theme] .shell > .bnav .bnav-tab[aria-selected="true"],
:root[data-skin="glass"][data-theme] .shell > .bnav .bnav-tab[aria-selected="true"] svg { color: #A855F7; }
:root[data-skin="glass"][data-theme] .shell > .bnav .bnav-tab[aria-selected="true"]::before { background: #A855F7; }

/* =====================================================================
   1.0.156 — Menu ⋮ das Conversas (menu suspenso junto ao botão). Só este menu; o .pop antigo não muda.
   ===================================================================== */
.cm-pop { width: max-content; min-width: 216px; max-width: min(300px, calc(100vw - 24px));   /* 1.0.174: largura pelo conteúdo (antes 264/292/320 fixos) */ max-height: calc(100dvh - 24px); overflow-y: auto; padding: 4px; border-radius: 14px; background: #FFFFFF;
  box-shadow: 0 12px 32px rgba(23, 19, 41, .16), 0 0 0 1px rgba(23, 19, 41, .06); transform-origin: top right; }
.cm-pop button { min-height: 44px; gap: 12px; padding: 0 12px; border-radius: 10px; font-size: 15px; line-height: 1.25; font-weight: 500; color: #171329; }
.cm-pop button svg.i { width: 20px; height: 20px; color: #171329; stroke-width: 1.9; flex: none; }
.cm-pop button:focus-visible { background: #F4ECFE; outline: none; } @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .cm-pop button:hover { background: #F4ECFE; outline: none; } }
.cm-pop button:active { background: #EEE2FD; }
.cm-pop button:focus-visible { box-shadow: inset 0 0 0 2px #A855F7; }
.cm-pop .cm-sep { border: 0; height: 1px; margin: 4px 10px; background: #ECE9F0; }
:root[data-theme="dark"] .cm-pop { background: #19203A; box-shadow: 0 12px 32px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .cm-pop button, :root[data-theme="dark"] .cm-pop button svg.i { color: #FFFFFF; }
:root[data-theme="dark"] .cm-pop button:focus-visible { background: rgba(168, 85, 247, .16); } @media (any-hover: hover) { :root[data-theme="dark"]:where(:not([data-input="touch"])) .cm-pop button:hover { background: rgba(168, 85, 247, .16); } }
:root[data-theme="dark"] .cm-pop button:active { background: rgba(168, 85, 247, .24); }
:root[data-theme="dark"] .cm-pop .cm-sep { background: rgba(255, 255, 255, .10); }

/* 1.0.157 — lista de Conversas (telemóvel): acabamentos */
@media (max-width: 899px) {
  .side > .top h1.title { margin: 0; }                 /* a margem por defeito do <h1> criava ~30px a mais por baixo do logótipo */
  .side > .top { min-height: 72px; }
  .lbl-chips.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
  .lbl-chips.fade-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px); mask-image: linear-gradient(to right, transparent, #000 28px); }
  .lbl-chips.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 36px), transparent); }
}
.row-msg.row-empty .txt { color: var(--text-2); font-style: normal; opacity: .9; }

/* =====================================================================
   1.0.158 — Página «Novo grupo» (revista). No PC abre como janela ao centro (dk:'dialog').
   ===================================================================== */
.gn { display: flex; flex-direction: column; gap: 14px; }
.gn .gn-desc { resize: none; min-height: 64px; line-height: 1.4; font-family: inherit; }
.gn .gn-h { justify-content: flex-start; gap: 6px; margin: 8px 4px -4px; }
.gn .gn-n { color: var(--violet); }
.gn-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; margin: 0 -2px; overscroll-behavior-x: contain; touch-action: pan-x; }
.gn-chips::-webkit-scrollbar { display: none; }
.gn-chips[hidden] { display: none; }
.gn-chip { flex: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; }
.gn-chip .av { width: 48px; height: 48px; }
.gn-chip-n { font-size: 12.5px; font-weight: 500; color: var(--text); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gn-x { position: absolute; top: -2px; right: 4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #5F676D; color: #fff; box-shadow: 0 0 0 2px var(--page); }
.gn-x::after { content: ''; position: absolute; inset: -11px; }   /* área de toque ≥ 44px sem aumentar o círculo */
.gn-x svg.i { width: 12px; height: 12px; stroke-width: 3; }
.gn .gn-l { margin: 4px 6px -8px; font-size: 13px; font-weight: 700; color: var(--violet); }
#gpl { display: flex; flex-direction: column; gap: 14px; }
.gn-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 20px 12px; color: var(--text-2); }
.gn-empty .emoji, .gn-empty img { width: 64px; height: 64px; }
.gn-empty b { color: var(--text); font-size: 1.05em; }
.gn-empty p { margin: 0; max-width: 300px; line-height: 1.45; }
.gn-empty .btn { margin-top: 6px; gap: 8px; }
.gn-empty.sm { padding: 22px 16px 8px; }
.gn-empty.sm svg.i { width: 28px; height: 28px; opacity: .6; }
/* botão: esbatido até estar pronto (continua tocável para explicar o que falta) · a criar · criado */
.gn-go[aria-disabled="true"] { opacity: .45; }
.gn-go.busy { opacity: .8; pointer-events: none; }
.gn-go.ok { background: var(--violet); pointer-events: none; }
.gn-go.ok svg.i { width: 18px; height: 18px; stroke-width: 2.4; animation: gn-pop .35s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes gn-pop { from { transform: scale(.3); opacity: 0; } }
:root[data-skin="glass"] .gn-go.ok, :root[data-skin="glass"] .gn .gn-n, :root[data-skin="glass"] .gn .gn-l { color: #A855F7; }
:root[data-skin="glass"] .gn-go.ok { background: #A855F7; color: #fff; }
:root[data-theme="dark"] .gn-x { background: #8E969E; color: #0E1114; }
@media (min-width: 900px) { .dk-dlg-scrim > .spage.gn-page { height: min(86vh, 820px); } }
.gn-info, .gn-ppl { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* PC: janela larga com duas colunas — o grupo à esquerda, as pessoas à direita (a lista desliza sozinha) */
@media (min-width: 900px) {
  .dk-dlg-scrim > .spage.gn-page { width: min(880px, 100%); height: min(86vh, 720px); }
  .dk-dlg-scrim > .spage.gn-page .spage-body { overflow: hidden; display: flex; flex-direction: column; max-width: none; padding-bottom: 0; }
  .gn-page .gn { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px 1fr; gap: 28px; }
  .gn-page .gn-info { padding-top: 4px; }
  .gn-page .gn-ppl { min-height: 0; }
  .gn-page .gn-ppl #gpl { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 4px 16px 0; scrollbar-width: thin; }
  .gn-page .spage-foot { max-width: none; padding: 12px 24px 18px; }
  .gn-page .spage-foot .gn-go { max-width: 320px; margin-left: auto; display: flex; }
}

/* =====================================================================
   1.0.159 — Página «Novo canal» (revista). Reutiliza .gn-go (botão) e o modelo do Novo grupo. No PC: janela ao centro, 2 colunas.
   ===================================================================== */
.cn, .cn-a, .cn-b { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cn .cn-desc { resize: none; min-height: 64px; line-height: 1.4; font-family: inherit; }
.cn .cn-lab { display: flex; justify-content: space-between; align-items: baseline; }
.cn .cn-cnt { font-weight: 500; color: var(--text-2); font-size: 12px; }
.cn .spage-h { margin: 6px 4px -6px; }
.cn-type { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cn-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 14px 13px; border-radius: 16px; background: var(--panel); border: 1.5px solid var(--field-line); text-align: left; min-height: 112px; }
.cn-opt svg.i { width: 22px; height: 22px; color: var(--text-2); margin-bottom: 2px; }
.cn-opt b { font-size: 15px; color: var(--text); }
.cn-opt small { font-size: 12.5px; line-height: 1.35; color: var(--text-2); }
.cn-opt[aria-checked="true"] { border-color: var(--violet); background: var(--lilac); box-shadow: 0 0 0 1px var(--violet) inset; }
.cn-opt[aria-checked="true"] svg.i, .cn-opt[aria-checked="true"] b { color: var(--violet); }
:root[data-skin="glass"] .cn-opt[aria-checked="true"] { border-color: #A855F7; box-shadow: 0 0 0 1px #A855F7 inset; }
:root[data-skin="glass"] .cn-opt[aria-checked="true"] svg.i, :root[data-skin="glass"] .cn-opt[aria-checked="true"] b { color: #A855F7; }
:root[data-theme="dark"] .cn-opt[aria-checked="true"] { background: rgba(168, 85, 247, .14); }
.cn-opt:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.cn .cn-url { color: var(--text); font-weight: 500; font-size: 13px; word-break: break-all; margin-top: 2px; }
.cn .cn-url:empty { display: none; }
.cn .cn-st { font-size: 12.5px; line-height: 1.35; color: var(--text-2); }
.cn .cn-st:empty { display: none; }
.cn .cn-st.ok { color: #0D874D; font-weight: 600; }
.cn .cn-st.bad { color: var(--err); font-weight: 500; }
:root[data-theme="dark"] .cn .cn-st.ok { color: #34D399; }
.cn-info { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--lilac); color: var(--text); font-size: 13.5px; line-height: 1.45; }
.cn-info svg.i { flex: none; width: 20px; height: 20px; color: var(--violet); margin-top: 1px; }
:root[data-theme="dark"] .cn-info { background: rgba(168, 85, 247, .12); }
.cn-prev { display: flex; gap: 12px; align-items: flex-start; padding: 14px; }
.cn-prev .av { width: 48px; height: 48px; }
.cn-pv-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cn-pv-t b { font-size: 16px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-pv-t small { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); font-size: 13px; }
.cn-pv-t .cn-pv-ic { width: 14px; height: 14px; }
.cn-pv-d { margin-top: 4px; color: var(--text); font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 900px) {
  .dk-dlg-scrim > .spage.cn-page { width: min(880px, 100%); height: min(86vh, 720px); }
  .cn-page .cn { display: grid; grid-template-columns: 280px 1fr; gap: 28px; }
  .cn-page .spage-foot { max-width: none; padding: 12px 24px 18px; }
  .cn-page .spage-foot .gn-go { max-width: 320px; margin-left: auto; display: flex; }
}
@media (min-width: 900px) { .dk-dlg-scrim > .spage.cn-page .spage-body { max-width: none; padding-left: 24px; padding-right: 24px; } }

/* 1.0.160 — Novo grupo: «Tens um link de convite?» */
.gn-join { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; border: 0; }
.gn-join > svg.i:first-child { width: 22px; height: 22px; color: var(--violet); flex: none; }
.gn-join .grow { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gn-join b { font-size: 15px; font-weight: 600; color: var(--text); }
.gn-join small { font-size: 13px; color: var(--text-2); }
.gn-join .gn-join-c { width: 18px; height: 18px; color: var(--text-2); flex: none; }
:root[data-skin="glass"] .gn-join > svg.i:first-child { color: #A855F7; }
.gn-join-err:empty { display: none; }
.gn-join-err { margin: 6px 16px 0; color: var(--err); font-size: 13.5px; }
.ask-form .gn-join-err { color: var(--err); font-weight: 500; }

/* =====================================================================
   1.0.161 — Conversas arquivadas (revista): linhas da lista principal + desarquivar · seleção · «Manter conversas arquivadas»
   ===================================================================== */
.ar-page { display: flex; flex-direction: column; gap: 12px; }
.ar-keep .item { padding: 12px 14px; gap: 12px; }
.ar-keep .grow { display: flex; flex-direction: column; gap: 3px; }
.ar-keep b { font-weight: 600; color: var(--text); }
.ar-keep small { color: var(--text-2); font-size: 13px; line-height: 1.4; }
.ar-q[hidden] { display: none; }
.ar-list { padding: 4px 0; }
.ar-row { position: relative; display: flex; align-items: center; }
.ar-row > .row { flex: 1; min-width: 0; height: 72px; padding: 0 4px 0 14px; background: none; }
.ar-row:last-child > .row .row-body { border-bottom-color: transparent; }
.ar-row .ar-un, .ar-row .ar-mn { width: 44px; height: 44px; flex: none; color: var(--text-2); }
.ar-row .ar-un { margin-right: 6px; }
.ar-row .ar-un svg.i { width: 22px; height: 22px; }
.ar-row .ar-mn { opacity: 0; }
.ar-row:hover .ar-mn, .ar-row .ar-mn:focus-visible, .ar-row .ar-mn.open { opacity: 1; }
.ar-row .ar-ck { flex: none; width: 22px; height: 22px; margin-left: 14px; border-radius: 50%; border: 2px solid #B9B4C2; display: grid; place-items: center; }
.ar-row .ar-ck svg.i { width: 12px; height: 12px; color: #fff; opacity: 0; stroke-width: 2.6; }
.ar-row.on { background: var(--lilac); }
.ar-row.on .ar-ck { background: var(--violet); border-color: var(--violet); }
.ar-row.on .ar-ck svg.i { opacity: 1; }
:root[data-skin="glass"] .ar-row.on .ar-ck { background: #A855F7; border-color: #A855F7; }
:root[data-theme="dark"] .ar-row.on { background: rgba(168, 85, 247, .14); }
.ar-sel { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 2px; padding: 6px 6px 6px 8px; border-radius: 18px; background: var(--panel); box-shadow: 0 8px 24px rgba(23, 21, 28, .16), 0 0 0 1px var(--line); }
.ar-sel b { font-weight: 600; color: var(--text); padding-left: 4px; }
.ar-sel .icon-btn { width: 44px; height: 44px; color: var(--text); }
.ar-selw:empty { display: none; }
/* o menu de cada conversa (o mesmo do PC) também no telemóvel, com toques de 46px */
@media (max-width: 899px) {
  .dk-menu { position: fixed; z-index: 120; min-width: 240px; max-width: calc(100vw - 16px); padding: 6px; border-radius: 16px; background: var(--sheet); box-shadow: 0 12px 32px rgba(23, 21, 28, .18), 0 0 0 1px var(--line); animation: fade .12s; }
  .dk-mi { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 46px; padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--text); text-align: left; white-space: nowrap; }
  .dk-mi svg.i { width: 21px; height: 21px; color: var(--text); }
  .dk-mi:active { background: var(--hover); }
  .dk-mi.d, .dk-mi.d svg.i { color: var(--err); }
  .dk-msep { height: 1px; margin: 4px 8px; background: var(--line); }
  :root[data-theme="dark"] .dk-menu { box-shadow: 0 12px 32px rgba(0, 0, 0, .5), 0 0 0 1px var(--line); }
}

/* 1.0.161 — texto completo na linha «Manter conversas arquivadas» do Perfil */
.sx-row.sx-full small { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* =====================================================================
   1.0.162 — Mensagens com estrela (revista): linhas compactas por data · filtros · tirar estrela com «Anular» · seleção
   ===================================================================== */
.sr-page { display: flex; flex-direction: column; }
.sr-page .sr-q { margin: 0 16px 8px; }
.sr-chips { padding: 2px 16px 6px; }
.sr-day { margin: 14px 20px 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.sr-list { padding: 2px 0; margin: 0 12px; }
.sr-row { position: relative; display: flex; align-items: center; }
.sr-row + .sr-row .sr-body { border-top: 1px solid var(--line); }
.sr-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0 2px 0 12px; text-align: left; background: none; color: inherit; }
.sr-main .av { flex: none; width: 44px; height: 44px; font-size: 15px; }
.sr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 10px 0; }
.sr-l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sr-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--text); }
.sr-sep { margin: 0 5px; font-weight: 500; color: var(--text-2); }
.sr-l1 time { flex: none; font-size: 12px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sr-l2 { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sr-txt { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.35; color: #3E4650; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-l2 .sr-na { display: none; }
.sr-l2:has(.sr-na) { flex-direction: column; align-items: flex-start; gap: 1px; }
.sr-l2:has(.sr-na) .sr-na { display: block; font-size: 12.5px; color: var(--text-2); }
.sr-txt .sr-ic { width: 16px !important; height: 16px !important; margin-right: 5px; vertical-align: -3px; color: var(--text-2); }
.sr-th { position: relative; flex: none; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--hover); }
.sr-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-th.v svg.i { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); fill: #fff; }
.sr-star, .sr-mn { flex: none; width: 44px; height: 44px; }
.sr-star { margin-right: 4px; color: #7C3AED; }
.sr-star svg.i, .ar-sel .sx-star svg.i { width: 21px; height: 21px; fill: currentColor; }
.sr-star:active { background: var(--hover); }
.sr-mn { color: var(--text-2); opacity: 0; }
.sr-row:hover .sr-mn, .sr-mn:focus-visible, .sr-mn.open { opacity: 1; }
.sr-row .ar-ck { flex: none; width: 22px; height: 22px; margin-left: 14px; border-radius: 50%; border: 2px solid #B9B4C2; display: grid; place-items: center; }
.sr-row .ar-ck svg.i { width: 12px; height: 12px; color: #fff; opacity: 0; stroke-width: 2.6; }
.sr-row.on { background: var(--lilac); }
.sr-row.on .ar-ck { background: var(--violet); border-color: var(--violet); }
.sr-row.on .ar-ck svg.i { opacity: 1; }
.sr-list .sr-row:first-child { border-radius: 16px 16px 0 0; } .sr-list .sr-row:last-child { border-radius: 0 0 16px 16px; } .sr-list .sr-row:only-child { border-radius: 16px; }
.sr-page .ar-sel { margin: 10px 12px 0; }
.sr-page .ar-sel .sx-star { color: #7C3AED; }
.sr-more { display: flex; justify-content: center; padding: 14px 0 6px; }
.sr-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 24px 4px; font-size: 12.5px; line-height: 1.4; color: var(--text-2); text-align: center; }
.sr-note svg.i { width: 14px; height: 14px; flex: none; }
.sr-page .es { padding-top: 36px; }
.sr-skel > div { display: flex; align-items: center; gap: 12px; margin: 0 12px; padding: 12px; background: var(--panel); }
.sr-skel > div:first-child { margin-top: 14px; border-radius: 16px 16px 0 0; } .sr-skel > div:last-child { border-radius: 0 0 16px 16px; }
.sr-skel i { width: 44px; height: 44px; border-radius: 50%; background: var(--hover); flex: none; }
.sr-skel span { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sr-skel b { height: 11px; width: 45%; border-radius: 6px; background: var(--hover); animation: srPulse 1.2s ease-in-out infinite; }
.sr-skel b + b { width: 80%; }
@keyframes srPulse { 50% { opacity: .5; } }
.toast.toast-act { display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 18px; pointer-events: auto; z-index: 130; }
.toast.toast-act button { padding: 8px 12px; border-radius: 14px; font-weight: 600; color: #C4B5FD; background: none; }
.toast.toast-act button:active { background: rgba(255, 255, 255, .1); }
:root[data-skin="glass"] .sr-star, :root[data-skin="glass"] .sr-page .ar-sel .sx-star { color: #A855F7; }
:root[data-skin="glass"] .sr-row.on .ar-ck { background: #A855F7; border-color: #A855F7; }
:root[data-theme="dark"] .sr-txt { color: #C9CFD6; }
:root[data-theme="dark"] .sr-star, :root[data-theme="dark"] .sr-page .ar-sel .sx-star { color: #B9A8FF; }
:root[data-theme="dark"] .sr-row.on { background: rgba(168, 85, 247, .14); }
:root[data-theme="dark"] .sr-skel b, :root[data-theme="dark"] .sr-skel i { background: #262B31; }
@media (min-width: 900px) {
  .sr-main { cursor: pointer; }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .sr-row:hover { background: var(--hover); } }
  .sr-row[aria-current="true"], .sr-main[aria-current="true"] { background: var(--lilac); }
}
.sr-page .ar-selw { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 3; }
.sr-page .ar-sel { position: static; }
.toast.toast-act { width: max-content; max-width: calc(100vw - 32px); white-space: nowrap; }
.toast.toast-act span { overflow: hidden; text-overflow: ellipsis; }
.sr-row .sr-main:last-child { padding-right: 14px; }

/* =====================================================================
   1.0.163 — Cabeçalho da conversa (telemóvel): mais espaço para o nome, ações à direita, ícones outline, cadeado SVG
   ===================================================================== */
.chat-head .hd-lock { display: inline-grid; place-items: center; flex: none; margin-left: 4px; color: var(--text-2); }
.chat-head .hd-lock svg.i { width: 14px; height: 14px; stroke-width: 2.2; }
:root[data-skin="glass"] #chat .chat-head .hd-lock { color: var(--g-text-2); }
:root[data-skin="glass"] #chat .chat-head .hd-fav { flex: none; }
@media (max-width: 899px) {
  :root[data-skin="glass"] #chat .chat-head { margin-left: 8px; margin-right: 8px; padding: 6px 2px; gap: 0; }
  :root[data-skin="glass"] #chat .chat-head .icon-btn { position: relative; flex: none; }
  /* seta: 36px à vista, 44px de toque (a área estende-se para a margem da esquerda) */
  :root[data-skin="glass"] #chat .chat-head .icon-btn.back { width: 36px; margin-left: 2px; }
  :root[data-skin="glass"] #chat .chat-head .icon-btn.back::before { content: ''; position: absolute; inset: 0 0 0 -8px; }
  :root[data-skin="glass"] #chat .chat-head > .av { width: 44px; height: 44px; margin-left: 2px; flex: none; }
  :root[data-skin="glass"] #chat .chat-head .who { padding-left: 10px; padding-right: 4px; }
  /* telefone e vídeo juntos à direita (44 × 44 de toque), ⋮ encostado à ponta (36px à vista, 44px de toque para a margem) */
  :root[data-skin="glass"] #chat .chat-head #cvoice, :root[data-skin="glass"] #chat .chat-head #cvideo { width: 44px; height: 44px; }
  :root[data-skin="glass"] #chat .chat-head #cmenu { width: 36px; height: 44px; margin-right: 2px; }
  :root[data-skin="glass"] #chat .chat-head #cmenu::before { content: ''; position: absolute; inset: 0 -8px 0 0; }
  /* ícones de chamada em outline, traço 2 */
  :root[data-skin="glass"] #chat .chat-head #cvoice svg.i, :root[data-skin="glass"] #chat .chat-head #cvideo svg.i { fill: none; stroke-width: 2; width: 23px; height: 23px; }
  :root[data-skin="glass"] #chat .chat-head .name { gap: 4px; }
}
@media (max-width: 380px) {
  :root[data-skin="glass"] #chat .chat-head { margin-left: 6px; margin-right: 6px; }
  :root[data-skin="glass"] #chat .chat-head > .av { width: 42px; height: 42px; }
  :root[data-skin="glass"] #chat .chat-head .who { padding-left: 8px; }
}
@media (max-width: 899px) {
  :root[data-skin="glass"] #chat .chat-head .who { padding-left: 8px; padding-right: 0; }
  :root[data-skin="glass"] #chat .chat-head .hd-lock { margin-left: 0; }
  :root[data-skin="glass"] #chat .chat-head .hd-fav { width: 17px; height: 17px; }
}

/* =====================================================================
   1.0.164 — Conversas trancadas: ecrã do PIN · pasta (pesquisa, trancar conversa) · definições · privacidade da linha
   ===================================================================== */
/* ecrã do PIN */
.lk-pin-ui { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 20px 10px; }
.lk-pin-ui .lk-pin-ic { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--violet); margin-bottom: 12px; }
.lk-pin-ui .lk-pin-ic svg.i { width: 28px; height: 28px; stroke-width: 1.9; }
.lk-pin-ui h2 { margin: 0 !important; padding: 0 !important; font-size: 1.2em; font-weight: 700; color: var(--text); line-height: 1.3; }
.lk-pin-ui .lk-pin-hint { margin: 6px 0 0; max-width: 320px; font-size: .92em; line-height: 1.45; color: var(--text-2); }
.lk-pin-ui form { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; padding: 0 !important; }
.lk-dots-w { position: relative; margin: 22px 0 6px; padding: 8px 12px; cursor: text; }
.lk-dots { display: flex; gap: 14px; justify-content: center; min-height: 16px; }
.lk-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #A7A1B2; transition: background .12s, border-color .12s, transform .12s; }
.lk-dots i.on { background: var(--violet); border-color: var(--violet); transform: scale(1.05); }
.lk-dots.shake { animation: shake .35s; }
.lk-pin-in { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; font-size: 16px; color: transparent; background: transparent; caret-color: transparent; }
.lk-pin-in:disabled { cursor: not-allowed; }
.lk-err { min-height: 20px; margin: 6px 0 8px; font-size: .9em; font-weight: 500; color: var(--err); text-align: center; }
.lk-go { width: 100%; margin-top: 4px; }
.lk-go:disabled { opacity: .45; }
.lk-bio { width: 100%; margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.lk-bio svg.i { width: 22px; height: 22px; stroke-width: 1.8; }
.lk-bio:disabled { opacity: .45; }
.lk-pin-ui .lk-forgot { margin-top: 12px; padding: 8px 12px; font-size: .86em; font-weight: 500; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
:root[data-skin="glass"] .lk-dots i.on { background: #A855F7; border-color: #A855F7; }
:root[data-theme="dark"] .lk-pin-ui .lk-pin-ic { background: #2A2450; color: #C4B5FD; }
:root[data-theme="dark"] .lk-dots i { border-color: #6B7280; }
:root[data-theme="dark"] .lk-dots i.on { background: #A78BFA; border-color: #A78BFA; }
/* com o ecrã do PIN aberto, os avisos vão para cima (nunca tapam o PIN nem o teclado) */
body:has(.lk-pin-ui) .toast { top: calc(16px + env(safe-area-inset-top)); bottom: auto; z-index: 140; }
/* linha da lista: sem número nem ponto (não revela nada) */
.lk-row .row-line { align-items: center; }
.lk-row .lk-chev { width: 18px; height: 18px; color: var(--text-2); flex: none; }
/* pasta aberta */
.lk-tools { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 6px; }
.lk-tools .lk-q { margin: 0; }
.lk-add { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 12px; font-weight: 600; color: var(--violet-dark); }
.lk-add-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--violet); flex: none; }
.lk-add-ic svg.i { width: 20px; height: 20px; stroke-width: 2.2; }
.lk-add:active { background: var(--hover); }
:root[data-theme="dark"] .lk-add { color: #CFC3FF; }
:root[data-theme="dark"] .lk-add-ic { background: #2A2450; color: #C4B5FD; }
.list .row[hidden], .list .dk-rx[hidden] { display: none !important; }
.lk-start { margin-top: 18px; min-width: 220px; }
@media (min-width: 900px) { .lk-tools .lk-q { display: none; } }
/* definições */
.lk-set { display: flex; flex-direction: column; gap: 6px; padding-bottom: 20px; }
.lk-set .lk-h { margin: 12px 20px 4px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.lk-set .card { margin: 0 12px; }
.lk-set .lk-auto .grow { display: flex; flex-direction: column; gap: 8px; }
.lk-set .lk-auto .seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.lk-set .lk-auto .seg button { min-height: 36px; padding: 0 12px; font-size: 13.5px; font-weight: 500; }
.lk-set .lk-note { display: flex; gap: 10px; align-items: flex-start; margin: 12px 20px 8px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.lk-set .lk-note svg.i { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.lk-set .lk-off .grow, .lk-set .lk-off .sx-ic svg.i { color: var(--err) !important; }
.lk-set .lk-off .sx-ic { background: color-mix(in srgb, var(--err) 12%, transparent); }
.lk-set .switch input { margin-left: 8px; }

/* =====================================================================
   1.0.165 — Etiquetas: página com contagens · página de cada etiqueta · adicionar conversas · editar com pré-visualização
   ===================================================================== */
.lb-pg { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; }
.lb-intro { margin: 0 20px 2px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.lb-list, .lb-cl, .lb-al { margin: 0 12px; padding: 2px 0; }
.lb-new { display: flex; align-items: center; gap: 14px; font-weight: 600; color: var(--violet-dark); }
.lb-new-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--violet); flex: none; }
.lb-new-ic svg.i { width: 20px; height: 20px; stroke-width: 2.2; }
.lb-row2 { display: flex; align-items: center; gap: 14px; min-height: 60px; }
.lb-row2 .lbl-big, .lb-pk .lbl-big { width: 22px; height: 22px; margin: 0 9px; }
.lb-row2 .grow { display: flex; flex-direction: column; gap: 2px; font-weight: 600; color: var(--text); min-width: 0; }
.lb-row2 small { font-weight: 400; font-size: 13px; color: var(--text-2); }
.lb-list > * + *, .lb-cl > * + *, .lb-al > * + * { border-top: 1px solid var(--line); }
.lb-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 20px 0; font-size: 12.5px; color: var(--text-2); }
.lb-foot svg.i { width: 14px; height: 14px; }
/* página de uma etiqueta */
.lb-head { display: flex; align-items: center; gap: 14px; margin: 0 12px; padding: 14px 12px 14px 16px; border-radius: 16px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
.lb-head .lb-hdot { width: 30px; height: 30px; margin: 0; }
.lb-head .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-head b { font-size: 17px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-head small { font-size: 13px; color: var(--text-2); }
.lb-edit { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; flex: none; }
.lb-edit svg.i { width: 18px; height: 18px; }
.lb-q { margin: 0 12px !important; }
.lb-crow { position: relative; display: flex; align-items: center; }
.lb-crow > .row { flex: 1; min-width: 0; height: 72px; padding: 0 4px 0 12px; background: none; }
.lb-crow > .row .row-body { border-bottom: 0 !important; }
.lb-rm { width: 44px; height: 44px; flex: none; margin-right: 4px; color: var(--text-2); }
.lb-rm svg.i { width: 18px; height: 18px; }
.lb-rm:active { background: var(--hover); }
.lb-see { align-self: center; margin-top: 6px; }
/* adicionar conversas */
.lb-for { display: flex; align-items: center; gap: 8px; margin: 0 20px; font-weight: 600; color: var(--text); }
.lb-ar { display: flex; align-items: center; gap: 12px; min-height: 60px; text-align: left; }
.lb-ar .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-weight: 600; color: var(--text); }
.lb-ar small { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 13px; color: var(--text-2); }
.lb-ar .lb-ck { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #B9B4C2; display: grid; place-items: center; }
.lb-ar .lb-ck svg.i { width: 12px; height: 12px; color: #fff; opacity: 0; stroke-width: 2.6; }
.lb-ar.on .lb-ck { background: var(--violet); border-color: var(--violet); }
.lb-ar.on .lb-ck svg.i { opacity: 1; }
.lb-ar[disabled] { opacity: .62; cursor: default; }
.lb-go { width: 100%; }
.lb-go:disabled { opacity: .45; }
/* escolher etiqueta (folha) */
.lb-pk .lb-tick { width: 16px; height: 14px; color: var(--violet); stroke-width: 2.6; }
/* editar / criar */
.lb-form .lb-prev { display: flex; justify-content: center; margin: 0 0 14px; }
.lb-prev-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 14px; border-radius: 16px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); font-weight: 600; font-size: 14px; color: var(--text); }
.lb-prev-chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-prev-chip .ph { color: var(--text-2); font-weight: 500; }
.lb-prev-chip .lbl-dot { width: 10px; height: 10px; margin: 0; }
.lb-form .input { width: 100%; }
.lb-err { min-height: 18px; margin: 6px 2px 0; font-size: 13px; font-weight: 500; color: var(--err); }
.lb-err:empty { min-height: 0; }
.lb-form #lbs:disabled { opacity: .45; }
.lb-of { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--text-2); }
:root[data-skin="glass"] .lb-ar.on .lb-ck { background: #A855F7; border-color: #A855F7; }
:root[data-theme="dark"] .lb-new { color: #CFC3FF; }
:root[data-theme="dark"] .lb-new-ic { background: #2A2450; color: #C4B5FD; }
:root[data-theme="dark"] .lb-pk .lb-tick { color: #B9A8FF; }
@media (min-width: 900px) { @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .lb-crow:hover, :where(:root:not([data-input="touch"])) .lb-ar:hover:not([disabled]), :where(:root:not([data-input="touch"])) .lb-row2:hover { background: var(--hover); } } }
.lb-pg .lb-q { width: auto; }
.lb-head .grow { flex: 1; }
.spage .spage-body .lb-pg label.lb-q { margin: 0 12px !important; }
.spage .spage-body .sr-page label.sr-q { margin: 0 12px 8px !important; }

/* =====================================================================
   1.0.166 — Etiquetas múltiplas: pontos (até 3 + «+N») · caixas de seleção · OU / E nos filtros
   ===================================================================== */
.lbl-dots { display: inline-flex; align-items: center; margin-left: 7px; vertical-align: middle; flex: none; }
.lbl-dots .lbl-dot { margin: 0; box-shadow: 0 0 0 1.5px var(--panel); }
.lbl-dots .lbl-dot + .lbl-dot { margin-left: -3px; }
.lbl-more { margin-left: 3px; font-size: 11px; font-weight: 600; color: var(--text-2); line-height: 1; }
:root[data-skin="glass"] .lbl-dots .lbl-dot { box-shadow: 0 0 0 1.5px #fff; }
:root[data-theme="dark"] .lbl-dots .lbl-dot { box-shadow: 0 0 0 1.5px var(--panel); }
/* caixas de seleção na folha «Etiquetas» */
.lb-pk-h { margin: -4px 20px 6px; font-size: 13px; color: var(--text-2); }
.lb-cb { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 2px solid #B9B4C2; display: grid; place-items: center; }
.lb-cb svg.i { width: 12px; height: 12px; color: #fff; stroke-width: 2.6; }
.lb-cb.all { background: var(--violet); border-color: var(--violet); }
.lb-cb.some { border-color: var(--violet); }
.lb-cb.some i { width: 10px; height: 2.5px; border-radius: 2px; background: var(--violet); }
[role="radio"] > .lb-cb { border-radius: 50%; }
:root[data-skin="glass"] .lb-cb.all { background: #A855F7; border-color: #A855F7; }
:root[data-theme="dark"] .lb-cb { border-color: #6B7280; }
/* OU / E */
.lb-mode { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 8px; }
.lb-mode-t { font-size: 13px; color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-mode-sw { display: inline-flex; flex: none; padding: 2px; border-radius: 12px; background: var(--hover); box-shadow: inset 0 0 0 1px var(--line); }
.lb-mode-sw button { min-width: 48px; height: 32px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.lb-mode-sw button[aria-pressed="true"] { background: var(--panel); color: var(--violet-dark); box-shadow: 0 1px 3px rgba(23, 21, 28, .12); }
:root[data-theme="dark"] .lb-mode-sw button[aria-pressed="true"] { background: #2A2450; color: #CFC3FF; }
@media (min-width: 900px) { .shell > .side .lb-mode { padding: 0 16px 10px; background: var(--panel); } .dk-chips { flex-wrap: wrap; } }
/* 1.0.166 — pílulas das etiquetas (perfil, info do grupo) */
.lb-pills { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 12px auto 0; padding: 6px 8px; border-radius: 14px; max-width: 100%; }
.lb-pills:active { background: var(--hover); }
.lb-pills-ic { width: 16px; height: 16px; color: var(--text-2); }
.lb-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 12px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; }
.lb-pill .lbl-dot { margin: 0; }
.lb-pill.none { color: var(--text-2); }
.lb-pl-s { display: flex !important; flex-wrap: wrap; gap: 6px; margin-top: 6px !important; white-space: normal !important; }
.lb-pl-s .lb-pill { padding: 2px 9px; font-size: 12.5px; }

/* 1.0.167 — «Marcar todas como lidas (0)» desativada */
.cm-pop button[disabled] { opacity: .42; cursor: default; }
@media (any-hover: hover) { :where(:root:not([data-input="touch"])) .cm-pop button[disabled]:hover { background: none; } }
.cm-pop button .cm-n { margin-left: auto; padding-left: 12px; font-size: 13px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cm-pop button span { white-space: nowrap; }
.toast.toast-act { white-space: normal; width: auto; max-width: min(92vw, 420px); }
.toast.toast-act span { overflow: visible; text-overflow: clip; }

.cm-pop button .cm-n { min-width: 24px; height: 22px; padding: 0 7px; margin-left: auto; border-radius: 11px; display: inline-grid; place-items: center; background: var(--lilac); color: var(--violet-dark); }
:root[data-theme="dark"] .cm-pop button .cm-n { background: #2A2450; color: #CFC3FF; }
.toast.toast-act { width: max-content; }

/* =====================================================================
   1.0.168 — Nova chamada: Favoritos · Recentes · Contactos · pesquisa local + servidor a pedido · botões 44px
   ===================================================================== */
.nc2 { display: flex; flex-direction: column; padding-bottom: 20px; }
.spage .spage-body .nc2 label.nc2-q { margin: 0 12px 6px !important; }
.nc2-h { margin: 14px 20px 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.nc2-h.nc2-l { margin-top: 10px; }
.nc2-list { margin: 0 12px; padding: 2px 0; }
.nc2-list > * + * { border-top: 1px solid var(--line); }
.nc2-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 6px 4px 6px 12px; }
.nc2-row .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-weight: 600; color: var(--text); }
.nc2-row .grow small { font-weight: 400; font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc2-row.bl .grow { color: var(--text-2); }
.nc2-row.bl .av { opacity: .55; }
.nc2-b { width: 44px; height: 44px; flex: none; color: var(--violet); }
.nc2-b svg.i { width: 22px; height: 22px; stroke-width: 2; }
.nc2-b:active { background: var(--hover); }
.nc2-b:disabled { opacity: .45; }
.nc2-look { display: flex; align-items: center; gap: 12px; min-height: 60px; text-align: left; }
.nc2-look > svg.i { width: 20px; height: 20px; color: var(--violet); margin: 0 10px; flex: none; }
.nc2-look .grow { display: flex; flex-direction: column; gap: 2px; font-weight: 600; color: var(--violet-dark); min-width: 0; overflow-wrap: anywhere; }
.nc2-look small { font-weight: 400; font-size: 12.5px; color: var(--text-2); }
.nc2-msg { margin: 12px 20px 6px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); text-align: center; }
:root[data-skin="glass"] .nc2-b { color: #A855F7; }
:root[data-theme="dark"] .nc2-b { color: #B9A8FF; }
:root[data-theme="dark"] .nc2-look .grow { color: #CFC3FF; }
@media (min-width: 900px) { @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .nc2-row:hover { background: var(--hover); } } }
.nc2 #ncl { background: transparent; box-shadow: none; padding: 0; }
.nc2-row .nc2-b, :root[data-skin="glass"] .nc2-row .nc2-b { color: var(--m-ic, #3F474E); }
:root[data-theme="dark"] .nc2-row .nc2-b { color: #C2C9CF; }

/* =====================================================================
   1.0.169 — Chamadas: menu ⋮ próprio · Limpar histórico (confirmação com escolha do filtro)
   ===================================================================== */
.clh { padding: 6px 4px 4px; }
.clh h2 { margin: 0 0 10px !important; font-size: 1.15em; }
.clh-n { margin: 0 0 8px; font-weight: 600; color: var(--text); }
.clh-opts { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.clh-opt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border-radius: 14px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.clh-opt input { width: 20px; height: 20px; accent-color: var(--violet); flex: none; }
.clh-opt .grow { font-weight: 600; color: var(--text); }
.clh-opt b { font-size: 13.5px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.clh-opt:has(input:checked) { box-shadow: 0 0 0 2px var(--violet); background: var(--lilac); }
.clh-opt:has(input:disabled) { opacity: .5; cursor: default; }
:root[data-theme="dark"] .clh-opt:has(input:checked) { background: rgba(168, 85, 247, .14); }
.clh-p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.clh-btns { display: flex; gap: 10px; }
.clh-btns .btn { flex: 1; min-height: 46px; }
.clh { padding: 6px 16px 4px; }
.clh .btn.danger { background: #E53935; color: #fff; border-color: transparent; }
:root[data-theme="dark"] .clh .btn.danger { background: #EF5350; }
.clh-opt .grow { flex: 1; }
/* 1.0.169 — menu ⋮ Chamadas: opções 3–5 indisponíveis («Em breve») */
.cm-pop button.cm-soon[disabled] { opacity: 1; }
.cm-pop button.cm-soon[disabled] > span, .cm-pop button.cm-soon[disabled] > svg.i { opacity: .45; }
.cm-pop button .cm-tag { margin-left: auto; padding: 2px 8px; border-radius: 10px; font-style: normal; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: #F1EFF4; color: #667078; }
:root[data-theme="dark"] .cm-pop button .cm-tag { background: rgba(255, 255, 255, .08); color: #B7BCC8; }
.cm-pop button.cm-soon > span { flex: 1; min-width: 0; white-space: normal; line-height: 1.25; padding: 4px 0; text-align: start; }

.cm-pop button.cm-soon > span { hyphens: auto; overflow-wrap: anywhere; }
/* 1.0.170 — Contactos bloqueados (⋮ Chamadas e Definições → Privacidade: a mesma página) */
.bk-p { display: flex; align-items: flex-start; gap: 12px; margin: 4px 16px 12px; padding: 12px 14px; border-radius: 14px; background: #F3F1F6; color: var(--text-2); font-size: 13.5px; line-height: 1.45; }
.bk-p svg.i { width: 20px; height: 20px; flex: none; margin-top: 1px; color: #5F676D; }
:root[data-theme="dark"] .bk-p { background: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .bk-p svg.i { color: #B7BCC8; }
.bk .bk-add { width: 100%; }
.bk .bk-add > svg.i { color: var(--err); }
.bk .bk-add .grow { color: var(--err); }
:root[data-theme="dark"] .bk .bk-add .grow { color: #FF8A8A; }
:root[data-theme="dark"] .bk .bk-add > svg.i { color: #FF8A8A; }
.spage .spage-body .bk label.bk-q { margin: 12px 12px 0 !important; }
.bk-row { cursor: pointer; padding-right: 10px; }
.bk-row:focus-visible { outline: 2px solid #A855F7; outline-offset: -2px; border-radius: 10px; }
.bk-un.btn { flex: none; min-height: 36px; padding: 0 14px; font-size: 13.5px; font-weight: 600; border-radius: 18px; color: var(--violet-dark); background: var(--lilac); border: 0; }
:root[data-theme="dark"] .bk-un.btn { color: #CFC3FF; background: #2A2450; }
.bk .es .btn { margin-top: 14px; }
.bk-pick .nc2-row[role="button"] { cursor: pointer; }
@media (min-width: 900px) { @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .bk-pick .nc2-row.bl:hover { background: none; } } }
.pv-blk { width: 100%; text-align: start; border-top: 1px solid var(--line); }
.bk-row .grow small.bk-d { font-size: 12.5px; }
.bk-row .grow small.bk-d { white-space: normal; overflow: visible; }
.bk-un.btn { padding: 0 12px; }
/* 1.0.172 — Silenciar chamadas */
.sil .sil-p { margin: 4px 0 12px; }
.sil .sil-dnd .setting { padding: 12px 14px 10px; }
.sil-st { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--violet-dark); }
.sil-st svg.i { width: 15px; height: 15px; }
:root[data-theme="dark"] .sil-st { color: #CFC3FF; }
.cm-pop button .cm-st { background: var(--lilac); color: var(--violet-dark); }
:root[data-theme="dark"] .cm-pop button .cm-st { background: #2A2450; color: #CFC3FF; }
.cl-st.sil { color: var(--text-2); }
.cl-st.miss.sil { color: var(--text-2); }
/* 1.0.177 — Perfil curto + página Definições (o mesmo aspeto dos cartões) */
.sx-defs { padding-bottom: 24px; }
.spage .spage-body .sx-defs label.sx-q { margin: 8px 12px 4px !important; }
.dk-pp-body .sx-defs label.sx-q { margin: 0 0 6px !important; }
.dk-pp-body .sx-defs .sx-h { margin-left: 12px; }
.dk-pp-body .sx-defs .sx-card { margin: 0; }
.sx-defs .sx-row[hidden], .sx-defs .sx-card[hidden], .sx-defs .sx-h[hidden] { display: none !important; }
.sx-defs-none { margin: 28px 16px; text-align: center; color: var(--text-2); font-size: 14px; }
.sx-row small .upd-dot { display: inline-block; margin-right: 6px; vertical-align: middle; }
.lg-upd { margin-bottom: 4px; }
.dk-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px -6px; padding: 6px 12px 6px 4px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--violet-dark); }
.dk-back svg.i { width: 20px; height: 20px; }
.dk-back:active { background: var(--hover); }
@media (any-hover: hover) { :where(:root:not([data-input="touch"])) .dk-back:hover { background: var(--hover); } }
:root[data-theme="dark"] .dk-back { color: #CFC3FF; }
/* 1.0.179 — fundo «Natal» (como os outros fundos: só no tema Claro novo; no escuro fica o fundo escuro) */
:root[data-skin="glass"][data-theme="light"][data-wall="natal"] #chat { background-color: #F7EADB; background-image: url(../assets/fundo.chat.natal.webp); }
:root[data-skin="glass"][data-theme="light"][data-wall="natal"] #msgs .day:not(.e2ee-note):not(.sys) { background: rgba(160, 62, 52, .62); }
.wall-pick .wp-natal { background-image: url(../assets/fundo.chat.natal.webp); }
:root[data-skin="glass"][data-theme="light"][data-wall="natal"] .lk-prev { background-image: url(../assets/fundo.chat.natal.webp); }
.wall-pick { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px !important; }
@media (max-width: 400px) { .wall-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px !important; } }
/* 1.0.180 — fundo «Lilás» (como os outros fundos: só no tema Claro novo; no escuro fica o fundo escuro) */
:root[data-skin="glass"][data-theme="light"][data-wall="lilas"] #chat { background-color: #D6BBFB; background-image: url(../assets/fundo.chat.lilas.webp); }
:root[data-skin="glass"][data-theme="light"][data-wall="lilas"] #msgs .day:not(.e2ee-note):not(.sys) { background: rgba(91, 33, 182, .58); }
.wall-pick .wp-lilas { background-image: url(../assets/fundo.chat.lilas.webp); }
:root[data-skin="glass"][data-theme="light"][data-wall="lilas"] .lk-prev { background-image: url(../assets/fundo.chat.lilas.webp); }
.wall-pick { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 560px) { .wall-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px !important; } }
/* 1.0.181 — Editar perfil: barra Guardar fixa, data no formato da língua, ícone do nível de visibilidade, contador, 2 colunas no PC */
.pe-col { display: contents; }
.pe-body { scroll-padding-bottom: 104px; }
.pe-bar { position: sticky; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: 8px; margin: 2px -20px calc(-30px - env(safe-area-inset-bottom)); padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--page); border-top: 1px solid var(--pe-line); box-shadow: 0 -6px 16px rgba(23, 21, 28, .06); animation: pe-bar-in .18s ease-out; }
.pe-bar[hidden] { display: none !important; }
.pe-bar .pe-save { margin: 0; }
.pe-bar .err { margin: 0; }
@keyframes pe-bar-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pe-bar { animation: none; } }
:root[data-theme="dark"] .pe-bar { box-shadow: 0 -6px 16px rgba(0, 0, 0, .35); }
.pe-date { position: relative; }
.pe-date .pe-date-nat { position: absolute; right: 52px; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.pe-cal { color: var(--icon); }
.pe-field > span:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pe-cnt { font-size: 12px; font-weight: 400; color: var(--pe-t2); font-variant-numeric: tabular-nums; }
.pe-cnt.near { color: var(--violet-dark); font-weight: 600; }
:root[data-theme="dark"] .pe-cnt.near { color: #C4B5FD; }
/* E: Guardar desativado no escuro — legível, mas claramente indisponível (cinzento neutro, sem violeta) */
:root[data-theme="dark"] .pe-save:disabled { opacity: 1; background: #2B2833; color: #9A94A6; box-shadow: none; }
:root[data-theme="dark"] .pe-save.busy:disabled { background: #4C2F8F; color: #E6DDFB; }
@media (min-width: 900px) {
  .pe-pane .pe-bar { margin: 4px -28px -28px; padding: 14px 28px; border-radius: 0 0 14px 14px; background: var(--panel); }
  .pe-pane .pe-bar .pe-save { align-self: flex-start; min-width: 180px; }
}
/* F: PC largo — foto e identificação à esquerda, restantes campos à direita */
@media (min-width: 1100px) {
  .pe-pane .pe-top { max-width: 980px; }
  .pe-pane .pe-body { max-width: 980px; display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .pe-pane .pe-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .pe-pane .pe-ca { position: sticky; top: 16px; }
  .pe-pane .pe-cb > .pe-sec:first-child { margin-top: 0; }
  .pe-pane .pe-bar { grid-column: 1 / -1; }
}
.pe-date .input { padding-right: 96px; }
.pe-date .pe-cal { position: absolute; top: 3px; right: 4px; width: 44px; height: 44px; }
.pe-date .pe-cal:has(+ .pe-clr:not([hidden])) { right: 48px; }
.pe-bar { bottom: calc(-30px - env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .pe-pane .pe-bar { bottom: 0; } .pe-pane .pe-bar .pe-save { width: auto; min-width: 220px; padding: 0 28px; } }
/* 1.0.181 — Editar perfil: fotografia maior só no telemóvel (108 → 128 px) */
@media (max-width: 899px) {
  .pe-av-wrap { width: 128px; height: 128px; }
  .pe-av, .pe-av .av, .pe-av .av.xl { width: 128px !important; height: 128px !important; }
  .pe-av .av, .pe-av .av.xl { font-size: 2.6em; }
  .pe-cam { right: 2px; bottom: 4px; }
}
/* 1.0.183 — legibilidade sobre os fundos (A, B) e ícone SVG nas chamadas (C) */
/* A: data no Claro novo — o mesmo violeta, mais opaco (≥ 4,5:1 mesmo na zona mais clara do fundo) */
:root[data-skin="glass"][data-theme="light"] #msgs .day:not(.e2ee-note):not(.sys) { background: rgba(72, 82, 196, .88); }
/* B: hora das mensagens enviadas no Claro e no Claro off (≥ 4,5:1 sobre o balão lilás) */
:root[data-theme="light"] #msgs .m.out:not(.t-media):not(.stk) .b .meta, :root[data-theme="light"] .lk-prev .m.out .b .meta { color: #4F5566; }
/* C: chamadas — ícone SVG em vez de emoji */
#msgs .day.sys-call { display: inline-flex; align-items: center; gap: 6px; }
#msgs .day.sys-call .sys-ic { width: 15px; height: 15px; flex: none; stroke-width: 2.1; }
.row-msg .sys-ic { width: 16px; height: 16px; flex: none; margin-right: 4px; }
/* 1.0.184 — fundo «Pôr do sol» em todos os modos (o ficheiro original não muda; no escuro leva um véu escuro por cima) */
:root { --veil-sol: linear-gradient(rgba(18, 9, 22, .56), rgba(18, 9, 22, .56)); }
/* 1: data no Claro — o mesmo laranja, mais opaco (≥ 4,5:1) */
:root[data-skin="glass"][data-theme="light"][data-wall="sunset"] #msgs .day:not(.e2ee-note):not(.sys) { background: rgba(184, 58, 16, .9); }
/* 2: Escuro (novo) — Pôr do sol com véu */
:root[data-skin="glass"][data-theme="dark"][data-wall="sunset"] #chat { background-color: #24120C; background-image: var(--veil-sol), url(../assets/fundo.chat.sol.webp); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%, max(100%, calc(var(--wh, 100vh) * .5631)) auto; }
:root[data-skin="glass"][data-theme="dark"][data-wall="sunset"] #msgs .day:not(.e2ee-note):not(.sys) { background: rgba(92, 34, 18, .82); }
/* 3: Claro off (original) e Escuro off (com véu) */
:root[data-skin="off"][data-wall="sunset"] #chat { background-color: #FF8A3D; background-image: url(../assets/fundo.chat.sol.webp); background-repeat: no-repeat; background-position: center top; background-size: max(100%, calc(var(--wh, 100vh) * .5631)) auto; }
:root[data-skin="off"][data-theme="dark"][data-wall="sunset"] #chat { background-color: #24120C; background-image: var(--veil-sol), url(../assets/fundo.chat.sol.webp); background-size: 100% 100%, max(100%, calc(var(--wh, 100vh) * .5631)) auto; }
@media (min-width: 900px) {
  :root[data-skin="glass"][data-theme="dark"][data-wall="sunset"] #chat, :root[data-skin="off"][data-theme="dark"][data-wall="sunset"] #chat { background-size: 100% 100%, cover; background-position: center; }
  :root[data-skin="off"][data-theme="light"][data-wall="sunset"] #chat { background-size: cover; background-position: center; }
}
/* pré-visualização (Aparência) e miniatura do seletor seguem o modo */
:root[data-skin][data-theme][data-wall="sunset"] .lk-prev { background: #FF8A3D url(../assets/fundo.chat.sol.webp) center / cover no-repeat; }
:root[data-skin][data-theme="dark"][data-wall="sunset"] .lk-prev { background: var(--veil-sol), url(../assets/fundo.chat.sol.webp) center / cover no-repeat, #24120C; }
:root[data-theme="dark"] .wall-pick .wp-sunset { background-image: var(--veil-sol), url(../assets/fundo.chat.sol.webp); background-size: cover; }
/* 1.0.185 — fundo «Oceano» em todos os modos (o ficheiro original não muda; no escuro leva um véu azul-petróleo) */
:root { --veil-oc: linear-gradient(rgba(4, 14, 24, .56), rgba(4, 14, 24, .56)); }
:root[data-skin="glass"][data-theme="light"][data-wall="ocean"] #msgs .day:not(.e2ee-note):not(.sys) { background: rgba(6, 82, 128, .9); }
:root[data-skin="glass"][data-theme="dark"][data-wall="ocean"] #chat { background-color: #06222A; background-image: var(--veil-oc), url(../assets/fundo.chat.oceano.webp); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%, max(100%, calc(var(--wh, 100vh) * .5631)) auto; }
:root[data-skin="glass"][data-theme="dark"][data-wall="ocean"] #msgs .day:not(.e2ee-note):not(.sys) { background: rgba(8, 56, 78, .82); }
:root[data-skin="off"][data-wall="ocean"] #chat { background-color: #1FB5C9; background-image: url(../assets/fundo.chat.oceano.webp); background-repeat: no-repeat; background-position: center top; background-size: max(100%, calc(var(--wh, 100vh) * .5631)) auto; }
:root[data-skin="off"][data-theme="dark"][data-wall="ocean"] #chat { background-color: #06222A; background-image: var(--veil-oc), url(../assets/fundo.chat.oceano.webp); background-size: 100% 100%, max(100%, calc(var(--wh, 100vh) * .5631)) auto; }
@media (min-width: 900px) { :root[data-skin][data-theme="dark"][data-wall="ocean"] #chat { background-size: 100% 100%, cover; background-position: center; } :root[data-skin="off"][data-theme="light"][data-wall="ocean"] #chat { background-size: cover; background-position: center; } }
:root[data-skin][data-theme][data-wall="ocean"] .lk-prev { background: #1FB5C9 url(../assets/fundo.chat.oceano.webp) center / cover no-repeat; }
:root[data-skin][data-theme="dark"][data-wall="ocean"] .lk-prev { background: var(--veil-oc), url(../assets/fundo.chat.oceano.webp) center / cover no-repeat, #06222A; }
:root[data-theme="dark"] .wall-pick .wp-ocean { background-image: var(--veil-oc), url(../assets/fundo.chat.oceano.webp); background-size: cover; }
/* 1.0.186 — fundo «Aurora» em todos os modos (o ficheiro original não muda; no escuro leva um véu violeta-noite) */
:root { --veil-au: linear-gradient(rgba(14, 6, 28, .56), rgba(14, 6, 28, .56)); }
:root[data-skin="glass"][data-theme="light"][data-wall="aurora"] #msgs .day:not(.e2ee-note):not(.sys) { background: rgba(84, 34, 178, .9); }
:root[data-skin="glass"][data-theme="dark"][data-wall="aurora"] #chat { background-color: #1A0B2E; background-image: var(--veil-au), url(../assets/fundo.chat.aurora.webp); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%, max(100%, calc(var(--wh, 100vh) * .5631)) auto; }
:root[data-skin="glass"][data-theme="dark"][data-wall="aurora"] #msgs .day:not(.e2ee-note):not(.sys) { background: rgba(52, 24, 98, .82); }
:root[data-skin="off"][data-wall="aurora"] #chat { background-color: #A23CE8; background-image: url(../assets/fundo.chat.aurora.webp); background-repeat: no-repeat; background-position: center top; background-size: max(100%, calc(var(--wh, 100vh) * .5631)) auto; }
:root[data-skin="off"][data-theme="dark"][data-wall="aurora"] #chat { background-color: #1A0B2E; background-image: var(--veil-au), url(../assets/fundo.chat.aurora.webp); background-size: 100% 100%, max(100%, calc(var(--wh, 100vh) * .5631)) auto; }
@media (min-width: 900px) { :root[data-skin][data-theme="dark"][data-wall="aurora"] #chat { background-size: 100% 100%, cover; background-position: center; } :root[data-skin="off"][data-theme="light"][data-wall="aurora"] #chat { background-size: cover; background-position: center; } }
:root[data-skin][data-theme][data-wall="aurora"] .lk-prev { background: #A23CE8 url(../assets/fundo.chat.aurora.webp) center / cover no-repeat; }
:root[data-skin][data-theme="dark"][data-wall="aurora"] .lk-prev { background: var(--veil-au), url(../assets/fundo.chat.aurora.webp) center / cover no-repeat, #1A0B2E; }
:root[data-theme="dark"] .wall-pick .wp-aurora { background-image: var(--veil-au), url(../assets/fundo.chat.aurora.webp); background-size: cover; }
/* 1.0.187 — fundo «Natal» em todos os modos: Claro/Claro off com véu creme muito suave; Escuro/Escuro off com «Natal noite» (ficheiro próprio, feito a partir do original, que não muda); no PC o padrão repete-se no tamanho do telemóvel */
:root { --veil-na: linear-gradient(rgba(247, 234, 219, .25), rgba(247, 234, 219, .25)); }
:root[data-skin="glass"][data-theme="light"][data-wall="natal"] #msgs .day:not(.e2ee-note):not(.sys) { background: rgba(150, 52, 42, .9); }
:root[data-skin="glass"][data-theme="light"][data-wall="natal"] #chat, :root[data-skin="off"][data-theme="light"][data-wall="natal"] #chat { background-color: #F7EADB; background-image: var(--veil-na), url(../assets/fundo.chat.natal.webp); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%, max(100%, calc(var(--wh, 100vh) * .5622)) auto; }
:root[data-skin][data-theme="dark"][data-wall="natal"] #chat { background-color: #161D1A; background-image: url(../assets/fundo.chat.natal.noite.webp); background-repeat: no-repeat; background-position: center top; background-size: max(100%, calc(var(--wh, 100vh) * .5622)) auto; }
:root[data-skin="glass"][data-theme="dark"][data-wall="natal"] #msgs .day:not(.e2ee-note):not(.sys) { background: rgba(120, 36, 30, .88); }
@media (min-width: 900px) {
  :root[data-skin="glass"][data-theme="light"][data-wall="natal"] #chat, :root[data-skin="off"][data-theme="light"][data-wall="natal"] #chat { background-size: 100% 100%, 520px auto; background-repeat: no-repeat, repeat; background-position: 0 0, left top; }
  :root[data-skin][data-theme="dark"][data-wall="natal"] #chat { background-size: 520px auto; background-repeat: repeat; background-position: left top; }
}
:root[data-skin][data-theme][data-wall="natal"] .lk-prev { background: var(--veil-na), url(../assets/fundo.chat.natal.webp) center / cover no-repeat, #F7EADB; }
:root[data-skin][data-theme="dark"][data-wall="natal"] .lk-prev { background: #161D1A url(../assets/fundo.chat.natal.noite.webp) center / cover no-repeat; }
:root[data-theme="dark"] .wall-pick .wp-natal { background-image: url(../assets/fundo.chat.natal.noite.webp); }
/* 1.0.188 — fundo «Lilás» em todos os modos: Claro/Claro off original (sem véu); Escuro/Escuro off com «Lilás noite» (ficheiro próprio, feito a partir do original, que não muda); no PC o padrão repete-se no tamanho do telemóvel */
:root[data-skin="glass"][data-theme="light"][data-wall="lilas"] #msgs .day:not(.e2ee-note):not(.sys) { background: rgba(91, 33, 182, .9); }
:root[data-skin="off"][data-theme="light"][data-wall="lilas"] #chat { background-color: #D6BBFB; background-image: url(../assets/fundo.chat.lilas.webp); background-repeat: no-repeat; background-position: center top; background-size: max(100%, calc(var(--wh, 100vh) * .5628)) auto; }
:root[data-skin][data-theme="dark"][data-wall="lilas"] #chat { background-color: #1B1430; background-image: url(../assets/fundo.chat.lilas.noite.webp); background-repeat: no-repeat; background-position: center top; background-size: max(100%, calc(var(--wh, 100vh) * .5628)) auto; }
:root[data-skin="glass"][data-theme="dark"][data-wall="lilas"] #msgs .day:not(.e2ee-note):not(.sys) { background: rgba(60, 30, 120, .86); }
@media (min-width: 900px) {
  :root[data-skin][data-theme][data-wall="lilas"] #chat { background-size: 520px auto; background-repeat: repeat; background-position: left top; }
}
:root[data-skin][data-theme][data-wall="lilas"] .lk-prev { background: #D6BBFB url(../assets/fundo.chat.lilas.webp) center / cover no-repeat; }
:root[data-skin][data-theme="dark"][data-wall="lilas"] .lk-prev { background: #1B1430 url(../assets/fundo.chat.lilas.noite.webp) center / cover no-repeat; }
:root[data-theme="dark"] .wall-pick .wp-lilas { background-image: url(../assets/fundo.chat.lilas.noite.webp); }

/* =====================================================================
   1.0.190 — FOTOGRAFIAS DE VISUALIZAÇÃO ÚNICA (mockup aprovado 10/10)
   Só classes novas (vo-*, pv-capw, vw-*): as mensagens e fotos normais não mudam.
   ===================================================================== */
/* Pré-visualização: ① dentro do campo da legenda (1A/1C) */
.pv-capw { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 48px; border-radius: 24px; background: #202C33; padding: 0 4px 0 7px; }
.pv-capw .pv-cap { min-width: 0; background: transparent; padding: 0 12px 0 6px; }
.vo-tg { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #C9D1D6; }
.vo-tg .ring { width: 24px; height: 24px; border-radius: 50%; border: 2px dashed currentColor; display: grid; place-items: center; font: 700 12px/1 Roboto, system-ui, sans-serif; }
.vo-tg.on { color: #fff; }
.vo-tg.on .ring { border: 0; width: 28px; height: 28px; background: var(--violet); font-size: 14px; }
.pv-vo-t { flex: 1; min-width: 0; padding: 0 10px 0 6px; color: #E9EDEF; font-size: 15px; line-height: 1.25; }
/* Aviso da 1.ª utilização (1B) */
.vo-intro { padding: 2px 14px 6px; }
.vo-intro-ic { width: 56px; height: 56px; border-radius: 50%; margin: 4px auto 12px; background: var(--lilac); color: var(--violet); display: grid; place-items: center; font: 700 24px/1 Roboto, system-ui, sans-serif; }
.vo-intro h2 { margin: 0 0 10px; text-align: center; }
.vo-intro ul { list-style: none; margin: 0 0 16px; padding: 0; }
.vo-intro li { display: flex; gap: 12px; padding: 7px 0; font-size: 15px; line-height: 1.35; color: var(--text); }
.vo-intro li svg.i { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--icon); }
.vo-intro .btn { width: 100%; justify-content: center; }
/* Balão (2A/2B): ícone + «Foto» / «Aberta» / «Expirou», sem miniatura; hora na mesma linha */
.vo-row { display: flex; align-items: flex-end; gap: 8px; }
.vo-row .meta { float: none; flex: none; margin: 0 -2px -2px 0; top: 0; }
.vo-b { display: flex; align-items: center; gap: 10px; min-width: 132px; padding: 2px 2px 0 0; text-align: left; color: inherit; }
.vo-ic { position: relative; width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.vo-ic svg.i { width: 20px; height: 20px; }
.vo-ic .vo-one { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; text-align: center; font: 700 10px/17px Roboto, system-ui, sans-serif; }
.vo-b .vo-lb { display: flex; flex-direction: column; min-width: 0; }
.vo-b .vo-lb b { font-weight: 500; }
.vo-b .vo-lb small { margin-top: 1px; font-size: 12.5px; font-weight: 400; color: var(--text-2); }
.vo-b.new .vo-ic { background: var(--violet); color: #fff; }
.vo-b.new .vo-ic .vo-one { background: #fff; color: var(--violet); box-shadow: 0 0 0 1.5px var(--violet); }
.vo-b.sent .vo-ic { background: rgba(124, 58, 237, .14); color: var(--violet-dark); }
.vo-b.sent .vo-ic .vo-one { background: var(--violet-dark); color: #fff; }
:root[data-theme="dark"] .vo-b.sent .vo-ic { background: rgba(169, 148, 255, .18); color: #C9BCFF; }
:root[data-theme="dark"] .vo-b.sent .vo-ic .vo-one { background: #A994FF; color: #1B1440; }
.vo-b.done .vo-ic { border: 2px dashed #9AA3AA; color: #8A949B; }
.vo-b.done .vo-lb b { color: var(--text-2); }
:root[data-theme="dark"] .vo-b.done .vo-ic { border-color: #5F6A72; color: #8E969E; }
.q-ic { width: 15px; height: 15px; margin-right: 4px; vertical-align: -2px; }
/* Visualizador (3/3B/3C): fundo preto, fechar grande, sem guardar/partilhar; desfoca em segundo plano */
.viewer.vo-viewer { display: block; background: #000; z-index: 95; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.vo-viewer .vw-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 12px 20px; background: linear-gradient(rgba(0, 0, 0, .55), transparent); color: #fff; }
.vo-viewer .vw-x { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; }
.vo-viewer .vw-x svg.i { width: 24px; height: 24px; }
.vo-viewer .vw-t { display: flex; flex-direction: column; min-width: 0; }
.vo-viewer .vw-t b { font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vo-viewer .vw-t small { font-size: 12.5px; color: #C9D1D6; }
.vo-viewer .vw-main { position: absolute; inset: 0; display: grid; place-items: center; }
.vo-viewer .vw-main img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; pointer-events: none; -webkit-user-drag: none; transition: filter .15s; }
.vo-viewer .vw-spin { width: 34px; height: 34px; border-width: 3px; }
.vo-viewer .vw-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 24px 16px calc(18px + env(safe-area-inset-bottom)); font-size: 13.5px; color: #C9D1D6; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); }
.vo-viewer .vw-badge { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--violet); color: #fff; font: 700 11px/1 Roboto, system-ui, sans-serif; }
.vo-viewer.blur .vw-main img { filter: blur(28px) brightness(.7); }
@media print { .vo-viewer { display: none !important; } }

/* =====================================================================
   1.0.192 — PRÉ-VISUALIZAÇÃO DA FOTO DO CONTACTO (toque na foto, lista de conversas)
   ===================================================================== */
.avp-scrim { position: fixed; inset: 0; z-index: 80; background: var(--scrim); animation: fade .12s; }
.avp { position: absolute; border-radius: 20px; overflow: hidden; background: var(--sheet); box-shadow: 0 20px 60px rgba(11, 20, 26, .32), 0 0 0 1px rgba(23, 21, 28, .04); animation: avp-in .16s cubic-bezier(.2, .8, .2, 1); }
@keyframes avp-in { from { opacity: 0; transform: scale(.25); } }
@media (prefers-reduced-motion: reduce) { .avp, .avp-scrim { animation: none; } }
.avp-ph { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; background: var(--lilac); }
.avp-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avp-ph.no-ph { cursor: default; }
.avp-ini { width: 100%; height: 100%; display: grid; place-items: center; font: 500 96px/1 Roboto, system-ui, sans-serif; }
.avp-ini svg.i { width: 96px; height: 96px; stroke-width: 1.4; }
/* 1.0.194: nome numa faixa por baixo da foto; ações cinzento-escuro, só Mensagem em violeta */
.avp-head { padding: 14px 18px 12px; text-align: left; }
.avp-head b { display: block; font: 600 17px/1.25 Roboto, system-ui, sans-serif; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avp-head small { display: block; margin-top: 2px; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avp-head small.on { color: #0D874D; }
.avp-acts { display: grid; border-top: 1px solid var(--line); padding: 2px 0 4px; }
.avp-acts button { height: 66px; min-width: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; color: #5F676D; font-size: 11.5px; letter-spacing: -.1px; }
.avp-acts button svg.i { width: 23px; height: 23px; stroke-width: 1.8; }
.avp-acts button span { max-width: 100%; color: var(--text); white-space: nowrap; overflow: hidden; }
.avp-acts button:first-child { color: #7C3AED; }
.avp-acts button:first-child span { color: #6D28D9; font-weight: 500; }
:root[data-theme="dark"] .avp-head small.on { color: #34D399; }
:root[data-theme="dark"] .avp-acts button { color: #AEB6BC; }
:root[data-theme="dark"] .avp-acts button:first-child { color: #B9A8FF; }
:root[data-theme="dark"] .avp-acts button:first-child span { color: #C9BCFF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .avp-head small.on { color: #34D399; }
  :root:not([data-theme="light"]) .avp-acts button { color: #AEB6BC; }
  :root:not([data-theme="light"]) .avp-acts button:first-child { color: #B9A8FF; }
  :root:not([data-theme="light"]) .avp-acts button:first-child span { color: #C9BCFF; }
}
@media (hover: hover) { .avp-acts button:hover { background: var(--hover); } }

/* =====================================================================
   1.0.193 — PERFIL DO CONTACTO: 4 botões (Mensagem · Voz · Vídeo · Pesquisar), menos violeta, menu ⋮ (mockup aprovado)
   ===================================================================== */
.pf-acts { grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 8px 16px 20px; }
/* 1.0.194: botões brancos, ícones cinzento-escuro, só Mensagem em violeta */
.pf-acts button { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; min-height: 74px; padding: 13px 4px 11px; gap: 8px; color: #5F676D; font-size: 13px; font-weight: 500; letter-spacing: 0; box-shadow: 0 1px 2px rgba(23, 21, 28, .04); }
.pf-acts button span { color: var(--text); }
.pf-acts button[data-p="chat"] { color: #7C3AED; }
.pf-acts svg { width: 24px; height: 24px; stroke-width: 1.8; }
@media (hover: hover) { .pf-acts button:not(:disabled):hover { background: var(--hover); } }
:root[data-theme="dark"] .pf-acts button { background: #1C2025; border-color: #2C3238; color: #AEB6BC; box-shadow: none; }
:root[data-theme="dark"] .pf-acts button[data-p="chat"] { color: #B9A8FF; }
:root[data-theme="dark"] .pf-acts button span { color: #E9EDEF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pf-acts button { background: #1C2025; border-color: #2C3238; color: #AEB6BC; box-shadow: none; } :root:not([data-theme="light"]) .pf-acts button[data-p="chat"] { color: #B9A8FF; } :root:not([data-theme="light"]) .pf-acts button span { color: #E9EDEF; } }
.pf-top { padding-bottom: 14px; }
.pf-name { font-size: 24px; font-weight: 600; margin-bottom: 2px; }
.pf-sub { color: var(--text-2); }
.pf-stats b { color: var(--text); font-weight: 600; }
.pf-more { position: absolute; top: 6px; right: 6px; z-index: 4; color: var(--icon); }
.pf.full .pf-more { top: calc(4px + env(safe-area-inset-top)); }
.pfm { position: absolute; right: 10px; top: 50px; z-index: 6; min-width: 230px; max-width: calc(100% - 20px); padding: 6px 0; border-radius: 12px; background: var(--sheet); box-shadow: 0 8px 28px rgba(11, 20, 26, .22); animation: pop-in .12s; }
.pf.full .pfm { top: calc(48px + env(safe-area-inset-top)); }
.pfm button { display: flex; width: 100%; align-items: center; gap: 14px; padding: 12px 16px; font-size: 15.5px; color: var(--text); text-align: left; }
.pfm button svg.i { width: 22px; height: 22px; color: var(--icon); flex: none; }
.pfm button.danger, .pfm button.danger svg.i { color: var(--err); }
@media (hover: hover) { .pfm button:hover { background: var(--hover); } }
/* «+» Nova conversa: guardados por convidar */
.nc-ext .grow small { color: var(--text-2); }
.nc-inv { min-height: 34px; padding: 0 12px; flex: none; }
/* painel estreito (PC, ~320 px): os 4 textos cabem inteiros */
@media (min-width: 900px) { .pf-acts { gap: 8px; padding: 6px 12px 16px; } .pf-acts button { padding: 11px 2px 9px; font-size: 11.5px; } }

/* =====================================================================
   1.0.196 — Revisão visual (medidas do Telegram/WhatsApp). Só telemóvel (< 900 px); computador igual.
   Lista: nome 16px (médio; negrito só nas não lidas), avatar 52px, linha 76px, hora 12px.
   Estados: faixa compacta quando só existe o «Tu». Balões: texto = Tamanho do texto (Normal 16px),
   hora 11,5px, menos enchimento → balões mais baixos. Avisos de chamada mais pequenos e com hora.
   ===================================================================== */
@media (max-width: 899px) {
  .side .list > .row[data-conv] { height: 76px; gap: 14px; }
  .side .list > .row[data-conv] > .av { width: 52px; height: 52px; font-size: 1.08em; }
  .side .list > .row[data-conv] .row-name { font-size: var(--fs); font-weight: 500; letter-spacing: 0; }
  .side .list > .row[data-conv].unread .row-name { font-weight: 700; }
  .side .list > .row[data-conv] .row-msg { font-size: calc(var(--fs) * .9375); }
  .side .list > .row[data-conv] .row-time { font-size: 12px; }
  .side .list > .row[data-conv] .row-body { gap: 3px; }
  /* Estados: só o «Tu» → faixa mais baixa */
  .side .list > .st-strip:has(> .st-b:only-child) { padding-top: 0; padding-bottom: 6px; }
  .side .list > .st-strip:has(> .st-b:only-child) .st-b { width: 64px; gap: 3px; }
  .side .list > .st-strip:has(> .st-b:only-child) .st-ring2 { width: 50px; height: 50px; }
  .side .list > .st-strip:has(> .st-b:only-child) .st-add { top: 32px; right: 5px; width: 20px; height: 20px; }
  .side .list > .st-strip:has(> .st-b:only-child) .st-b > :last-child { font-size: 12px; }
  /* balões (tema claro novo e escuro novo) */
  :root[data-skin="glass"] #msgs .b { padding: 6px 10px 7px 11px; }
  :root[data-skin="glass"] #msgs .b .txt { font-size: var(--fs); }
  :root[data-skin="glass"] #msgs .b .meta { font-size: 11.5px; margin-left: 8px; }
  #msgs .b .meta .tick { width: 16px; height: 11.5px; }
  :root[data-skin="glass"] #msgs .b .deleted { font-size: calc(var(--fs) * .9375); }
  /* «Claro off»: o mesmo tamanho de texto (Normal 16px) */
  .msgs .b .txt, .composer textarea { font-size: var(--fs); }
  :root[data-skin="glass"] #chat .composer #tx { font-size: var(--fs); }
  /* avisos de chamada: mais pequenos, com a hora */
  #msgs .day.sys-call { font-size: 13px; padding: 4px 11px; margin: 4px 0; gap: 6px; }
  #msgs .day.sys-call .sys-ic { width: 14px; height: 14px; }
}
#msgs .day.sys-call .sys-tm { margin-left: 2px; font-size: 11.5px; opacity: .75; font-variant-numeric: tabular-nums; }
/* 1.0.200 — visualização única: vídeo dentro do visualizador (controlos do próprio vídeo; sem descarregar nem imagem-na-imagem) */
.vo-viewer .vw-main video.vo-vid { position: absolute; inset: 0; margin: auto; width: 100%; max-height: calc(100% - 140px); height: auto; object-fit: contain; background: #000; touch-action: manipulation; transition: filter .15s; }
.vo-viewer.blur .vw-main video.vo-vid { filter: blur(28px); }
/* 1.0.201 — visualização única: marca de água com o @nome de quem vê (por cima da foto/vídeo; não bloqueia toques) */
.vo-viewer .vw-wm { position: absolute; inset: -20%; z-index: 1; pointer-events: none; display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around; gap: 64px 48px; transform: rotate(-24deg); overflow: hidden; }
.vo-viewer .vw-wm span { color: rgba(255, 255, 255, .14); font-size: 15px; font-weight: 600; letter-spacing: .3px; white-space: nowrap; text-shadow: 0 0 2px rgba(0, 0, 0, .25); user-select: none; }
.vo-viewer.shot .vw-main { filter: blur(32px) brightness(.5); }
.viewer.vo-viewer { overflow: hidden; }
/* 1.0.202 — pré-visualização do contacto: sem foto = círculo com as iniciais (em vez do quadrado enorme); 4 ações com o mesmo peso */
.avp:has(.avp-ph.no-ph) .avp-ph.no-ph { aspect-ratio: auto; height: 176px; display: grid; place-items: center; background: linear-gradient(180deg, #EEE9FF 0%, #F7F4FF 100%); }
.avp-ph.no-ph .avp-ini { width: 112px; height: 112px; border-radius: 50%; font-size: 46px; font-weight: 500; box-shadow: 0 0 0 4px #FFFFFF, 0 6px 18px rgba(76, 29, 149, .14); }
.avp-ph.no-ph .avp-ini svg.i { width: 52px; height: 52px; }
.avp:has(.avp-ph.no-ph) .avp-head { text-align: center; padding: 12px 18px 10px; }
.avp-head small { font-size: 13.5px; }
.avp-acts button, .avp-acts button:first-child { color: #7C3AED; }
.avp-acts button span, .avp-acts button:first-child span { color: #3F3A47; font-weight: 500; font-size: 12px; }
:root[data-theme="dark"] .avp:has(.avp-ph.no-ph) .avp-ph.no-ph { background: linear-gradient(180deg, #2A2450 0%, #201C3A 100%); }
:root[data-theme="dark"] .avp-ph.no-ph .avp-ini { box-shadow: 0 0 0 4px var(--sheet), 0 6px 18px rgba(0, 0, 0, .35); }
:root[data-theme="dark"] .avp-acts button, :root[data-theme="dark"] .avp-acts button:first-child { color: #B9A8FF; }
:root[data-theme="dark"] .avp-acts button span, :root[data-theme="dark"] .avp-acts button:first-child span { color: #D9DCE0; }
/* =====================================================================
   1.0.203 — Listas mais compactas (medidas Android/Telegram) e avatares mais nítidos. Só telemóvel (< 900 px).
   Conversas 72 px (avatar 50) · Chamadas 68 px (avatar 46) · Contactos 64 px (avatar 44) · Perfil 56 px.
   Altura MÍNIMA (não fixa): com letra grande no Android o texto nunca fica cortado. Traços finos mantidos (1.0.205).
   ===================================================================== */
@media (max-width: 899px) {
  .side .list > .row[data-conv] { height: auto; min-height: 72px; gap: 13px; }
  .side .list > .row[data-conv] > .av { width: 50px; height: 50px; }
  .side .list > .row[data-conv] .row-body { gap: 2px; padding: 8px 0; }
  .side .list > .row.cl-row { height: auto; min-height: 68px; gap: 13px; }
  .side .list > .row.cl-row > .av { width: 46px; height: 46px; }
  .side .list > .row.ct-act { height: auto; min-height: 64px; gap: 13px; }
  .side .list > .row.ct-act .ct-ic { width: 44px; height: 44px; }
  .side .list > .row.ct-person { height: auto; min-height: 64px; }
  .side .list > .row.ct-person .ct-open { gap: 13px; min-height: 64px; }
  .side .list > .row.ct-person .av { width: 44px; height: 44px; }
  .side .list > .row:is(.cl-row, .ct-act, .ct-person) .row-name { font-size: var(--fs); font-weight: 500; }
  .side .list > .row:is(.cl-row, .ct-act, .ct-person) .row-body { gap: 2px; padding: 7px 0; }
  /* traços finos entre linhas: mantidos (1.0.205), a começar a seguir ao avatar */
  .side .list > .row[data-conv] { --row-div: 79px; }
  .side .list > .cl-row { --row-div: 75px; }
  .side .list > .ct-person { --row-div: 73px; }
  /* Perfil: opções a 56 px */
  .side .sx-card > .sx-row { min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
  .side .sx-card > .sx-row .sx-ic { width: 36px; height: 36px; border-radius: 11px; }
  /* avatares sem foto: cor mais firme, letra mais escura e contorno fino → borda nítida */
  .av { box-shadow: inset 0 0 0 1px rgba(23, 21, 28, .07); }
  .avc0 { background: #E2D9FA; color: #4C2FA8; }
  .avc1 { background: #CFE2F8; color: #1F4F80; }
  .avc2 { background: #F8D3E1; color: #8E2E54; }
  .avc3 { background: #D7DEE6; color: #3B4A5A; }
  .avc4 { background: #CDEBD9; color: #236444; }
  .avc5 { background: #FAD9C2; color: #8E4A1A; }
  .avc6 { background: #EEE2C3; color: #66511F; }
  .avc7 { background: #C9EAEA; color: #1F6262; }
  :root[data-theme="dark"] .av { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
  :root[data-theme="dark"] .avc0 { background: #40356E; color: #E2D8FF; }
  :root[data-theme="dark"] .avc1 { background: #27405C; color: #BCDAF7; }
  :root[data-theme="dark"] .avc2 { background: #552B3E; color: #F8C6D8; }
  :root[data-theme="dark"] .avc3 { background: #34404B; color: #D2DBE4; }
  :root[data-theme="dark"] .avc4 { background: #244837; color: #B6E8CC; }
  :root[data-theme="dark"] .avc5 { background: #553826; color: #F8CFAE; }
  :root[data-theme="dark"] .avc6 { background: #4A4228; color: #EADBAE; }
  :root[data-theme="dark"] .avc7 { background: #22484A; color: #B0E4E4; }
}
/* 1.0.204 — Campo de escrita: sem o traço fixo a seguir ao emoji (parecia um cursor parado); cursor verdadeiro violeta também no modo claro */
:root[data-skin="glass"] #chat .composer #emo::after { content: none; display: none; }
#chat .composer #tx, .composer textarea { caret-color: #7C3AED; }
:root[data-theme="dark"] #chat .composer #tx, :root[data-theme="dark"] .composer textarea { caret-color: #A855F7; }
/* =====================================================================
   1.0.206 — Ecrã das chamadas: fundo próprio do JaPassa (assets/fundo.chamada.webp, escurecido para ler bem)
   e botões em vidro fosco, todos com o mesmo desenho. Voz (a tocar, recebida, ligada) e vídeo sem imagem
   (a tocar, recebida, câmara desligada). Com vídeo, o vídeo continua em ecrã inteiro. Igual no claro e no escuro.
   ===================================================================== */
:root { --call-bg: linear-gradient(180deg, rgba(8,5,22,.18) 0%, rgba(8,5,22,.30) 40%, rgba(8,5,22,.62) 100%), #0B0820 url(../assets/fundo.chamada.webp) center / cover no-repeat; }
.call.cv2, :root[data-theme="dark"] .call.cv2 { background: var(--call-bg); color: #fff; }
.call.cvv, :root[data-theme="dark"] .call.cvv { background: var(--call-bg); }
.call.cvv .call-remote { background: transparent; }
.vo, :root[data-theme="dark"] .vo { background: var(--call-bg); }
.vo-glow { background: radial-gradient(rgba(139,92,246,.30), transparent 70%); }
/* topo: minimizar e «Encriptada» em vidro */
.call.cv2 .cv-min, .call .vbtn { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.call.cv2 .cv-e2, .vo-chip { background: rgba(255,255,255,.12); color: rgba(255,255,255,.95); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* avatar: anel branco suave + brilho violeta */
.call.cv2 .cv-who .av.cv-av, :root[data-theme="dark"] .call.cv2 .cv-who .av.cv-av, .vo .av.vo-av { box-shadow: 0 0 0 4px rgba(255,255,255,.22), 0 0 46px rgba(139,92,246,.55), 0 18px 40px rgba(10,0,40,.40); }
.call.cv2 .cv-h, :root[data-theme="dark"] .call.cv2 .cv-h { border-color: rgba(255,255,255,.40); }
/* painel dos botões (voz) */
.call.cv2 .cv-dock, :root[data-theme="dark"] .call.cv2 .cv-dock { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 30px rgba(0,0,0,.25); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.call.cv2 .cv-b { color: rgba(255,255,255,.90); font-weight: 500; }
.call.cv2 .cv-b .cv-sq, :root[data-theme="dark"] .call.cv2 .cv-b .cv-sq { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); transition: background .15s, color .15s, transform .12s; }
.call.cv2 .cv-b.on .cv-sq, :root[data-theme="dark"] .call.cv2 .cv-b.on .cv-sq { background: #fff; color: #6D28D9; border-color: #fff; }
.call.cv2 .cv-b:active .cv-sq { transform: scale(.93); }
.call.cv2 .cv-b svg.i { stroke-width: 2; }
.call.cv2 .cv-b[aria-disabled="true"] { opacity: .4; }
.call .cv-hang { background: linear-gradient(180deg, #F2565C 0%, #DC3A42 100%); box-shadow: 0 8px 22px rgba(220,58,66,.38), inset 0 1px 0 rgba(255,255,255,.18); transition: transform .12s; }
.call .cv-hang:active { transform: scale(.97); }
/* chamada a chegar: atender / recusar / mensagem */
.call .cv-ib { color: rgba(255,255,255,.92); font-weight: 500; }
.call .cv-big { box-shadow: inset 0 1px 0 rgba(255,255,255,.22); transition: transform .12s; }
.call .cv-ib:active .cv-big { transform: scale(.93); }
.call .cv-big.red { background: linear-gradient(180deg, #F2565C 0%, #DC3A42 100%); box-shadow: 0 10px 26px rgba(220,58,66,.40), inset 0 1px 0 rgba(255,255,255,.2); }
.call .cv-big.green { background: linear-gradient(180deg, #2CC58E 0%, #17A06F 100%); }
.call .cv-quick, :root[data-theme="dark"] .call .cv-quick { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.call .cv-big.gray { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.18); }
/* videochamada: barra de botões */
.vdock { background: rgba(14,9,32,.42); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 30px rgba(0,0,0,.30); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.vb { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.10); transition: background .15s, color .15s, transform .12s; }
.vb:active { transform: scale(.93); }
.vb svg.i { stroke-width: 2; }
.vb.on { background: #fff; color: #6D28D9; border-color: #fff; }
.vb.red { background: linear-gradient(180deg, #F2565C 0%, #DC3A42 100%); border-color: transparent; box-shadow: 0 6px 18px rgba(220,58,66,.40); }
/* 1.0.207 — Computador: telefone e câmara do topo da conversa em linha (como no telemóvel e como a lupa), não cheios */
@media (min-width: 900px) {
  :root[data-skin="glass"] #chat .chat-head #cvoice svg.i, :root[data-skin="glass"] #chat .chat-head #cvideo svg.i { fill: none; stroke-width: 1.9; width: 23px; height: 23px; }
}
/* 1.0.209 — Atualizações mais visíveis: botão «Atualizar» cheio, ícone num círculo violeta; linha destacada no Perfil; ponto no separador Perfil */
.upd-bar .upd-bar-main > svg { box-sizing: content-box; width: 20px; height: 20px; padding: 8px; border-radius: 50%; background: var(--violet); color: #fff; }
.upd-bar .upd-bar-go { background: var(--violet); color: #fff; padding: 0 16px; border-radius: 18px; box-shadow: 0 3px 10px rgba(124, 58, 237, .28); }
.upd-bar .upd-bar-go:active { background: #6D28D9; transform: scale(.97); }
:root[data-theme="dark"] .upd-bar .upd-bar-go { background: #7C3AED; color: #fff; }
.sx-row[data-hl] { background: var(--lilac); }
.sx-row[data-hl] .sx-ic { background: var(--violet); }
.sx-row[data-hl] .sx-ic svg.i { color: #fff; }
.sx-row[data-hl] .grow { color: #6D28D9; }
:root[data-theme="dark"] .sx-row[data-hl] { background: #2A2450; }
:root[data-theme="dark"] .sx-row[data-hl] .grow { color: #C4B5FD; }
/* =====================================================================
   1.0.210 — Computador, Etapa A: acabamento profissional. Só ≥ 900 px; o telemóvel não muda.
   ===================================================================== */
@media (min-width: 900px) {
  /* caixa de escrever alinhada com a coluna das mensagens (antes ocupava a largura toda) */
  :root[data-skin="glass"] .shell > #chat .composer { margin-left: max(12px, calc(var(--dk-pad) - 10px)); margin-right: max(12px, calc(var(--dk-pad) - 10px)); }
  /* «Pôr em dia»: uma linha fina e discreta (no telemóvel continua o botão violeta) */
  .shell > .side .catchup { width: calc(100% - 32px); margin: 2px 16px 8px; padding: 7px 12px; border-radius: 10px; background: var(--lilac); color: var(--violet-dark); font-size: 13.5px; font-weight: 600; box-shadow: none; }
  .shell > .side .catchup .cu-arrow { width: 16px; height: 16px; color: var(--violet-dark); }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .shell > .side .catchup:hover { background: #E4DCFF; } }
  :root[data-theme="dark"] .shell > .side .catchup { background: #2A2450; color: #D6CCFF; }
  :root[data-theme="dark"] .shell > .side .catchup .cu-arrow { color: #D6CCFF; }
  /* «Terminar sessão» no Perfil (saiu da barra lateral) */
  .sx-logout { display: block; }
}
/* filtros numa só linha até ~1500 px (antes o + saltava para a 2.ª linha a 1366) */
@media (min-width: 900px) and (max-width: 1500px) {
  .shell > .side .lbl-chips.dk-chips { gap: 4px; padding-inline: 12px 10px; }
  .shell > .side .dk-chips button { padding: 0 10px; font-size: 13px; }
  .shell > .side .dk-chips .dk-lmore { width: 30px; }
}
/* 1.0.211 — «Pôr em dia» dentro da conversa: cápsula branca em vidro (como a caixa de escrever), legível em qualquer fundo */
:root[data-skin="glass"] #chat .cu-bar { margin: 0 12px 6px; padding: 5px 5px 5px 14px; gap: 6px; border-radius: 26px; background: rgba(255, 255, 255, .9); color: #3B2A6B; box-shadow: var(--g-shadow, 0 4px 16px rgba(0, 0, 0, .12)); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
:root[data-skin="glass"] #chat .cu-bar .cu-x { color: #5F676D; }
:root[data-skin="glass"] #chat .cu-bar .cu-next { border-radius: 20px; }
:root[data-skin="glass"][data-theme="dark"] #chat .cu-bar { background: rgba(20, 27, 49, .92); color: #E2DAFF; box-shadow: var(--g-shadow, 0 4px 16px rgba(0, 0, 0, .3)), inset 0 0 0 1px rgba(255, 255, 255, .07); }
:root[data-skin="glass"][data-theme="dark"] #chat .cu-bar .cu-x { color: #A3ABB3; }
@media (max-width: 380px) { :root[data-skin="glass"] #chat .cu-bar { margin-inline: 8px; } }
@media (min-width: 900px) { :root[data-skin="glass"] .shell > #chat .cu-bar { margin-left: max(12px, calc(var(--dk-pad) - 10px)); margin-right: max(12px, calc(var(--dk-pad) - 10px)); padding: 5px 5px 5px 16px; } }
:root[data-skin="glass"] #chat .cu-bar > .grow { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 1.0.211 — Número de telemóvel no perfil (só aparece se a pessoa deixar): parece um link, toca-se para copiar/ligar/SMS */
.pfi-ph { border: 0; background: none; padding: 0; font: inherit; color: var(--violet); font-weight: 500; cursor: pointer; text-align: left; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .pfi-ph { color: #C4B5FD; }
.sheet a.item { color: inherit; text-decoration: none; }
/* 1.0.212 — Computador, Etapa B: atalhos nas áreas vazias (Nova conversa, Novo grupo, Convidar, O meu QR · Novo contacto) */
.dkq { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.dkq-b { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 112px; padding: 16px 8px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .12s, border-color .12s, transform .12s; }
.dkq-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--violet); }
.dkq-ic svg.i { width: 22px; height: 22px; }
@media (any-hover: hover) { :where(:root:not([data-input="touch"])) .dkq-b:hover { border-color: color-mix(in srgb, var(--violet) 35%, transparent); background: #FBFAFF; } }
.dkq-b:active { transform: scale(.97); }
.dkq-b:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
:root[data-theme="dark"] .dkq-b { background: #181C20; border-color: #2C3137; }
:root[data-theme="dark"] .dkq-ic { background: #2A2450; color: #CFC3FF; }
@media (any-hover: hover) { :root[data-theme="dark"]:where(:not([data-input="touch"])) .dkq-b:hover { background: #1F2328; } }
@media (min-width: 900px) { .dk-empty .dke-c:has(.dkq) { max-width: 540px; } .dkq { flex-wrap: nowrap; } .dkq-b { width: 120px; flex: none; white-space: nowrap; } }
/* 1.0.213 — Computador, Etapa C: divisória para mudar a largura da lista (arrastar; duplo clique repõe; ← → no teclado) */
.dk-rsz { display: none; }
@media (min-width: 900px) {
  .shell > .side { position: relative; }
  .shell > .side > .dk-rsz { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 7px; z-index: 6; cursor: col-resize; touch-action: none; }
  .shell > .side > .dk-rsz::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: transparent; transition: background .15s; }
  @media (any-hover: hover) { :where(:root:not([data-input="touch"])) .shell > .side > .dk-rsz:hover::after { background: color-mix(in srgb, var(--violet) 55%, transparent); } }
  .shell > .side > .dk-rsz:focus-visible { outline: none; }
  .shell > .side > .dk-rsz:focus-visible::after, body.dk-resizing .shell > .side > .dk-rsz::after { background: var(--violet); }
  body.dk-resizing, body.dk-resizing * { cursor: col-resize !important; user-select: none !important; }
}

/* 1.0.218 — Mensagens à espera (quem ainda não está no JaPassa): a página usa o fundo e os balões da conversa */
.spage.pd-pg { background: var(--chat-bg); background-size: var(--chat-size); }
.spage.pd-pg .spage-body { max-width: none; padding: 8px 0 12px; gap: 0; }
.pd-chat { display: flex; flex-direction: column; min-height: 100%; }
.pd-chat .pd-info { margin: 4px 10px 10px; }
.pd-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.pd-acts .pd-sms { min-height: 38px; padding: 0 14px; gap: 6px; }
.pd-acts .pd-sms svg { width: 18px; height: 18px; margin: 0; color: currentColor; }
.pd-acts .pd-edit { font-size: .95em; color: var(--violet); }
.pd-msgs { display: flex; flex-direction: column; padding: 0 4.5%; }
.pd-msgs .m { cursor: pointer; }
.pd-empty { margin: 18px auto; padding: 6px 14px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 85%, transparent); color: var(--muted, #667078); font-size: .92em; }
.spage.pd-pg .spage-foot { background: transparent; max-width: none; padding: 0 0 env(safe-area-inset-bottom); }
.pd-comp { padding-top: 6px; }
.pd-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--violet); font-weight: 500; }
.pd-tag svg.i { width: 14px; height: 11px; flex: none; }
.pd-row .row-msg .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 1.0.218: «Atualizar agora» no Perfil mais visível quando há versão nova (só nesse caso) */
.sx-row[data-hl] .grow { color: var(--violet); font-weight: 600; }
.sx-row[data-hl] .grow small { color: color-mix(in srgb, var(--violet) 75%, var(--text)); font-weight: 500; }
.sx-row[data-hl] .sx-chev { color: var(--violet); }
/* 1.0.220 — conversa à espera: 😊 · 📎 · 📷 · 🎤, fotos, vídeos, voz e ficheiros */
.pd-comp .box { padding-left: 4px; }
.pd-comp .box textarea { padding-left: 2px; }
.pd-msgs .b.pd-mb { padding: 3px 3px 4px; max-width: min(85%, 330px); }
.pd-msgs .b.pd-mb > .txt { display: block; padding: 4px 6px 0; }
.pd-img { display: block; width: 100%; max-width: 324px; max-height: 360px; object-fit: cover; border-radius: 6px; background: rgba(0, 0, 0, .06); }
.pd-gif { display: block; max-width: 220px; max-height: 220px; border-radius: 6px; }
.pd-aud { display: block; width: 250px; max-width: 100%; height: 40px; margin: 2px 0; }
.pd-file { display: flex; align-items: center; gap: 10px; min-width: 200px; padding: 6px 4px; }
.pd-file > svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--lilac); color: var(--violet); }
.pd-file .grow { min-width: 0; display: flex; flex-direction: column; }
.pd-file b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-file small { color: var(--text-2); font-size: .82em; }
.pd-file + .txt { display: block; margin-top: 2px; }
.pd-rec { background: none; padding-right: 0; }
:root[data-theme="dark"] .pd-file > svg { color: #B9A8FF; }
.pd-msgs .b.pd-mb .meta { float: none; display: flex; justify-content: flex-end; top: 0; margin: 3px 4px 0 auto; width: max-content; }
/* 1.0.221 — localização em tempo real */
.lv-sheet { padding: 4px 16px 10px; }
.lv-sheet h2 { margin: 4px 4px 10px; font-size: 1.1em; }
.lv-sheet .hint { margin: 0 4px 14px; color: var(--text-2); font-size: .92em; line-height: 1.4; }
.lv-opt { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 6px; border-radius: 12px; text-align: left; }
.lv-opt b { display: block; font-weight: 600; }
.lv-opt small { display: block; color: var(--text-2); font-size: .86em; }
.lv-oi { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--violet); }
.lv-oi.on { background: #E3F5EC; color: #0D874D; }
.lv-oi svg.i, .lv-big svg.i { width: 22px; height: 22px; }
.lv-big { width: 52px; height: 52px; margin: 6px auto 6px; border-radius: 50%; display: grid; place-items: center; background: #E3F5EC; color: #0D874D; }
.lv-sheet .lv-big + h2 { text-align: center; }
.lv-durs { display: flex; gap: 8px; }
.lv-durs .btn { flex: 1; min-height: 46px; padding: 0 6px; }
.lv-note { display: flex; align-items: center; gap: 8px; margin: 14px 4px 2px; color: var(--text-2); font-size: .82em; }
.lv-note svg.i { flex: none; width: 15px; height: 15px; }
.lv .loc-tx small { white-space: normal; }
.lv.on .lv-ic { position: relative; background: #E3F5EC; color: #0D874D; }
.lv.on .lv-ic::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #0D874D; opacity: 0; animation: lvping 2s ease-out infinite; }
@keyframes lvping { 0% { transform: scale(.85); opacity: .6; } 100% { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lv.on .lv-ic::after { animation: none; } }
:root[data-motion="reduce"] .lv.on .lv-ic::after { animation: none; }
.lv-stop { display: block; width: calc(100% + 10px); margin: -2px -5px 4px; min-height: 40px; border-radius: 7px; background: rgba(23, 21, 28, .05); color: #C62828; font-weight: 600; }
.m.out .lv-stop { background: rgba(255, 255, 255, .5); }
:root[data-theme="dark"] .lv-oi.on, :root[data-theme="dark"] .lv-big, :root[data-theme="dark"] .lv.on .lv-ic { background: rgba(52, 211, 153, .14); color: #34D399; }
:root[data-theme="dark"] .lv.on .lv-ic::after { border-color: #34D399; }
:root[data-theme="dark"] .lv-stop { background: rgba(0, 0, 0, .2); color: #F28B82; }
.lv-durs .btn { border: 1px solid var(--line, #E7E4EA); border-radius: 14px; background: var(--panel, #fff); color: var(--violet-dark, #6D28D9); font-weight: 600; }
:root[data-theme="dark"] .lv-durs .btn { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: #C4B5FD; }
.lv-opt .lv-oi svg.i { color: inherit; stroke: currentColor; }
.ct-imp { display: block; margin: 14px auto 0; color: var(--violet); font-weight: 500; }
/* 1.0.222 — número de telemóvel no Editar perfil (só leitura) + escolha de quem o vê */
.pe-ro { display: flex; align-items: center; color: var(--text-2); background: var(--hover, #F5F3F8); cursor: default; user-select: text; }
:root[data-theme="dark"] .pe-ro { background: rgba(255, 255, 255, .05); }
.pv-sheet { padding: 4px 16px 10px; }
.pv-sheet h2 { margin: 4px 4px 6px; font-size: 1.1em; }
.pv-sheet .hint { margin: 0 4px 10px; color: var(--text-2); font-size: .9em; line-height: 1.4; }
.pv-opt { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px; border-radius: 12px; text-align: left; }
.pv-opt > svg.i:first-child { width: 22px; height: 22px; color: var(--icon, #5F676D); }
.pv-opt[aria-checked="true"] { background: var(--lilac); }
.pv-opt[aria-checked="true"] > svg.i:first-child, .pv-ok { color: var(--violet); }
.pv-ok { width: 16px; height: 16px; }
:root[data-theme="dark"] .pv-opt[aria-checked="true"] { background: rgba(167, 139, 250, .14); }
.pe .pe-field .pe-ro.input { background: transparent; border-style: dashed; color: var(--text-2); box-shadow: none; }
.pv-opt svg.pv-ok { color: var(--violet); stroke: currentColor; }
:root[data-theme="dark"] .pv-opt svg.pv-ok { color: #C4B5FD; }
/* 1.0.222 — grupos +18 */
.ad-badge { display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 6px; border-radius: 6px; background: #FDE8E8; color: #B42318; font-size: 12px; font-weight: 700; letter-spacing: .02em; vertical-align: middle; line-height: 1; }
.ad-badge.lg { height: 40px; min-width: 52px; padding: 0 10px; margin: 6px auto 8px; border-radius: 12px; font-size: 17px; display: flex; width: max-content; }
:root[data-theme="dark"] .ad-badge { background: rgba(240, 82, 82, .16); color: #F9A8A8; }
.ad-sheet { padding: 6px 18px 12px; text-align: center; }
.ad-sheet h2 { margin: 2px 0 6px; font-size: 1.12em; }
.ad-sheet .hint { margin: 0 0 14px; color: var(--text-2); font-size: .92em; line-height: 1.4; }
.ad-sheet .ff { text-align: left; }
.ad-err { margin: 8px 0 0; color: var(--err); font-size: .88em; text-align: left; }
.ad-btns { display: flex; gap: 10px; margin-top: 16px; }
.ad-btns .btn { flex: 1; }
.ad-note { margin: 10px 0 0; color: var(--text-2); font-size: .88em; line-height: 1.4; }
.gn-adult { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 10px; }
.gn-adult b { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.gn-adult small { display: block; color: var(--text-2); font-size: .86em; margin-top: 2px; }
/* 1.0.222 — fluidez: as linhas fora do ecrã não são desenhadas nem medidas até lá chegar o scroll */
.side .list > .row { content-visibility: auto; contain-intrinsic-size: auto 72px; }
.msgs > .msgs-more { height: 1px; margin: 0; padding: 0; background: none; box-shadow: none; }

/* ===== 1.0.223: lista de conversas (telemóvel) — acabamentos aprovados no mockup ===== */
/* linha separadora também nas conversas à espera (quem ainda não está no JaPassa) */
.list > .row.pd-row { position: relative; }
.list > .row:is([data-conv], .pd-row) + .row.pd-row::before, .list > .row.pd-row + .row[data-conv]::before, .list > .row.pd-row + .dk-rx + .row[data-conv]::before {
  content: ''; position: absolute; top: 0; right: 0; left: var(--row-div, 78px); height: 1px; background: #E7E4EA; pointer-events: none; }
:root[data-theme="dark"] .list > .row:is([data-conv], .pd-row) + .row.pd-row::before, :root[data-theme="dark"] .list > .row.pd-row + .row[data-conv]::before, :root[data-theme="dark"] .list > .row.pd-row + .dk-rx + .row[data-conv]::before { background: #262B31; }
/* conversas à espera alinhadas com as outras (foto 50 px, mesmo espaço até ao nome) */
.side .list > .row.pd-row { --row-div: 79px; gap: 13px; }
.side .list > .row.pd-row > .av { width: 50px; height: 50px; }
/* Estados vazios: faixa fina «Adicionar estado» */
.st-strip.st-one { display: block; padding: 4px 0 8px; overflow: visible; touch-action: auto; }
.st-one-b { display: flex; align-items: center; gap: 12px; width: 100%; padding: 4px 18px; background: none; border: 0; color: var(--text-2); font: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.st-one-av { position: relative; flex: none; width: 38px; height: 38px; }
.st-one-av > .av { width: 38px !important; height: 38px !important; font-size: 13px; }
.st-one-av > .st-add { position: absolute; top: auto; right: -4px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: var(--violet, #7C3AED); color: #fff; box-shadow: 0 0 0 2px var(--page, #F8F7FA); }
.st-one-av > .st-add svg { width: 11px; height: 11px; }
.st-one-b:active { background: var(--hover, #EEE9FF); }
/* logótipo do topo 12% mais pequeno (telemóvel) */
@media (max-width: 899px) { .top .brand-word.topo { height: 35px; } }
/* menu de baixo (telemóvel): nomes dos separadores não ativos mais legíveis (ao sol) */
@media (max-width: 899px) {
  .bnav-tab:not([aria-selected="true"]) span { color: #3A4148; }
  :root[data-theme="dark"] .bnav-tab:not([aria-selected="true"]) span { color: #D5DBE0; }
}

/* ===== 1.0.225: Dedicar música ===== */
.mu-card { display: block; width: min(320px, calc(85vw - 22px)); max-width: 100%; margin-bottom: 6px; }
.mu-h { display: flex; align-items: center; gap: 6px; margin: 1px 0 8px; color: var(--violet); font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.mu-h svg, .mu-li svg { width: 16px; height: 16px; flex: none; }
.mu-frame { position: relative; height: 200px; border-radius: 6px; overflow: hidden; background: #1E1430; }   /* leitor do YouTube: mínimo 200×200 */
.mu-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mu-go { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px; border: 0; border-radius: 24px; background: var(--violet); color: #fff; font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, .3); cursor: pointer; }
.mu-go svg { width: 18px; height: 18px; }
.mu-card.on .mu-go { visibility: hidden; }
.mu-row { display: flex; align-items: center; gap: 10px; margin: 9px 0 0; }
.mu-t { flex: 1; min-width: 0; }
.mu-t b { display: block; overflow: hidden; color: var(--text); font-size: 16px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.mu-t span { display: block; overflow: hidden; color: var(--text-2); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.mu-d { flex: none; color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.mu-pp { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--lilac); color: var(--violet); cursor: pointer; }
.mu-pp svg { width: 18px; height: 18px; }
.mu-card + .txt { display: block; padding-top: 8px; border-top: 1px solid var(--line); }
.mu-card.mu-in { animation: mu-in .45s ease-out both; }
@keyframes mu-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
/* o leitor (YouTube) fica numa camada por cima do cartão: as mensagens podem ser redesenhadas sem a música recomeçar */
.mu-ifr { position: fixed; left: 0; top: 0; z-index: 2; border-radius: 6px; overflow: hidden; background: #000; will-change: transform; }
.mu-ifr iframe { display: block; width: 100%; height: 100%; border: 0; }
/* barra da música (por baixo do cabeçalho da conversa) */
.mu-bar { position: relative; display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 4px 6px 4px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.mu-bt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
.mu-q { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--lilac); color: var(--violet); }
.mu-q svg { width: 16px; height: 16px; }
.mu-bn { min-width: 0; overflow: hidden; color: var(--text-2); text-overflow: ellipsis; white-space: nowrap; }
.mu-bn b { color: var(--text); font-weight: 500; }
.mu-bar .icon-btn svg { width: 20px; height: 20px; }
.mu-eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; margin: 0 4px; }
.mu-eq i { width: 3px; height: 4px; border-radius: 2px; background: var(--violet); }
.mu-eq.on i { animation: mu-eq 1s ease-in-out infinite; }
.mu-eq.on i:nth-child(2) { animation-delay: -.3s; } .mu-eq.on i:nth-child(3) { animation-delay: -.6s; } .mu-eq.on i:nth-child(4) { animation-delay: -.15s; }
@keyframes mu-eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.mu-pl { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--violet); transition: width .4s linear; }
@media (prefers-reduced-motion: reduce) { .mu-eq.on i, .mu-card.mu-in { animation: none; } .mu-eq.on i { height: 10px; } .mu-pl { transition: none; } }
/* lista de conversas: dedicatória por abrir */
.mu-li { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.mu-li.new, .mu-li.new .txt, .mu-li.new svg, .side .list > .row.unread .row-msg .mu-li.new .txt { color: var(--violet); font-weight: 500; }
/* ecrã Dedicar música */
.mu-pick { display: flex; flex-direction: column; min-height: 100%; padding-bottom: 16px; }
.mu-srch { display: flex; align-items: center; gap: 10px; height: 48px; margin: 4px 16px 10px; padding: 0 16px; border-radius: 24px; background: var(--search); color: var(--text-2); }
.mu-srch svg { width: 20px; height: 20px; flex: none; }
.mu-srch input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--text); font: inherit; font-size: 16px; outline: none; }
.mu-lab { margin: 4px 18px 4px; color: var(--text-2); font-size: 13.5px; font-weight: 600; }
.mu-empty { margin: 24px 18px; color: var(--text-2); text-align: center; }
.mu-tip { display: flex; gap: 10px; margin: 8px 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text-2); font-size: 14px; line-height: 1.4; }
.mu-tip svg { width: 18px; height: 18px; flex: none; color: var(--violet); }
.mu-it { position: relative; display: flex; align-items: center; gap: 13px; min-height: 68px; padding: 9px 16px; cursor: pointer; }
.mu-it + .mu-it::before { content: ''; position: absolute; top: 0; right: 0; left: 79px; height: 1px; background: var(--line); }
.mu-it:active { background: var(--hover); }
.mu-cv { width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 6px; object-fit: cover; background: var(--lilac); color: var(--violet); }
.mu-cv svg { width: 20px; height: 20px; }
.mu-pv { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--lilac); color: var(--violet); cursor: pointer; }
.mu-pv svg { width: 17px; height: 17px; }
.mu-sel { display: flex; align-items: center; gap: 12px; margin: 4px 16px 4px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.mu-sel .mu-cv { width: 64px; height: 64px; }
.mu-chg { align-self: flex-end; margin: 2px 18px 8px; font-size: 14px; }
.mu-f { display: block; margin: 6px 16px 0; }
.mu-f > span { display: block; margin: 4px 2px 8px; color: var(--text-2); font-size: 13.5px; font-weight: 600; }
.mu-f textarea { display: block; width: 100%; min-height: 112px; padding: 12px 14px; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 500; line-height: 1.35; resize: vertical; }
.mu-cnt { display: block; margin-top: 6px; color: var(--text-2); font-size: 12px; text-align: right; }
.mu-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 16px; }
.mu-chips button { min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); color: var(--text); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.mu-chips button[aria-checked="true"] { border-color: transparent; background: var(--lilac); color: var(--violet); }
.mu-foot { margin: auto 16px 0; padding-top: 20px; }
.mu-send { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border-radius: 26px; font-size: 16.5px; }
.mu-send svg { width: 20px; height: 20px; }
.mu-pg .spage-body { padding-left: 0; padding-right: 0; }
.list .row .row-msg .mu-li.new svg.meta-ic { color: var(--violet); }

/* ===== 1.0.229: Dedicar música — botão em destaque, temas 3×3, emojis/GIF e IA ===== */
.mu-attbar { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); min-height: 56px; margin: 6px 16px 14px; padding: 8px 14px 8px 12px; border: 0; border-radius: 16px; background: var(--lilac); color: var(--violet); font: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; }
.mu-attbar > svg:first-child { width: 28px; height: 28px; flex: none; }
.mu-attbar > span { flex: 1; }
.mu-attbar > svg:last-child { width: 20px; height: 20px; flex: none; }
.mu-attbar:active { filter: brightness(.97); }
.mu-chg { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.mu-chg svg { width: 18px; height: 18px; }
.mu-ta { position: relative; margin: 0 16px; }
.mu-ta textarea { display: block; width: 100%; min-height: 112px; padding: 12px 48px 12px 14px; border-radius: 14px; font: inherit; font-size: 16px; font-weight: 500; line-height: 1.35; resize: vertical; }
.mu-emo { position: absolute; right: 4px; bottom: 4px; width: 44px; height: 44px; color: var(--icon); }
.mu-emo svg { width: 24px; height: 24px; }
.mu-row2 { display: flex; align-items: center; gap: 10px; margin: 6px 16px 0; }
.mu-row2 > span { flex: 1; min-width: 0; }
.mu-row2 .mu-cnt { margin: 0; }
.mu-gif { display: flex; align-items: center; gap: 10px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.mu-gif img { width: 52px; height: 52px; flex: none; border-radius: 8px; object-fit: cover; }
.mu-gif span { flex: 1; min-width: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.3; }
.mu-ai { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 32px); min-height: 46px; margin: 12px 16px 0; border: 0; border-radius: 14px; background: var(--lilac); color: var(--violet); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.mu-ai svg { width: 20px; height: 20px; }
.mu-aiout { margin: 10px 16px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.mu-ais { color: var(--text); font-size: 15.5px; line-height: 1.4; white-space: pre-wrap; }
.mu-ais.err { color: var(--err, #B3261E); }
.mu-ais .as-spin { margin-right: 8px; vertical-align: -2px; }
.mu-aib { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.mu-aib .btn { min-height: 40px; padding: 0 16px; border-radius: 20px; font-size: 14.5px; }
.mu-aib .icon-btn { margin-left: auto; }
/* temas: grelha 3×3, ícones SVG, fundo neutro; o escolhido em lilás com borda violeta */
.mu-comp .mu-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 16px; }
.mu-comp .mu-chips button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 68px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text); font-size: 13.5px; font-weight: 500; line-height: 1.2; text-align: center; transition: background .15s, border-color .15s; }
.mu-comp .mu-chips button svg { width: 24px; height: 24px; color: var(--violet); }
.mu-comp .mu-chips button[aria-checked="true"] { border: 1.5px solid var(--violet); background: var(--lilac); color: var(--text); }
@media (max-width: 340px) { .mu-comp .mu-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mu-comp .mu-foot { position: sticky; bottom: 0; padding: 16px 0 calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--page) 30%); }
/* 1.0.231: tema «Outro» (título escrito por quem envia) */
.mu-comp .mu-chips button.mu-oth { grid-column: 1 / -1; flex-direction: row; gap: 10px; min-height: 52px; font-size: 14.5px; }
.mu-comp .mu-chips button.mu-oth svg { width: 22px; height: 22px; }
.mu-ttl { display: block; margin: 10px 16px 0; }
.mu-ttl > span { display: block; margin: 4px 2px 8px; color: var(--text-2); font-size: 13.5px; font-weight: 600; }
.mu-ttl input { display: block; width: 100%; min-height: 48px; padding: 0 14px; border-radius: 14px; font: inherit; font-size: 16px; font-weight: 500; }