:root {
  --bg: #12121c;
  --bg2: #1a1b2a;
  --card: #232538;
  --line: #2e3048;
  --text: #f1f2f8;
  --muted: #9a9db8;
  --me1: #7c5cff;
  --me2: #d946ef;
  --them: #262a40;
  --accent: #a78bfa;
  --ok: #34d399;
  --bad: #fb7185;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.center { text-align: center; }

.screen { height: 100dvh; display: flex; flex-direction: column; }

/* ---------- acceso ---------- */
#login { align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(120% 80% at 50% 0%, #2a1f5c 0%, var(--bg) 60%); }
.login-card { width: 100%; max-width: 360px; text-align: center; }
.logo { font-size: 64px; filter: drop-shadow(0 8px 24px #7c5cff88); animation: float 3s ease-in-out infinite; }
.login-card h1 { margin: 8px 0 4px; font-size: 28px;
  background: linear-gradient(90deg, #a78bfa, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-card textarea { width: 100%; margin: 16px 0 8px; padding: 14px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--bg2); resize: none; outline: none; font-family: ui-monospace, monospace; font-size: 14px;
  -webkit-user-select: text; user-select: text; }
.err { color: var(--bad); margin: 4px 0; }
.btn { width: 100%; padding: 14px; border-radius: 16px; font-weight: 700; }
.btn.primary { background: linear-gradient(135deg, var(--me1), var(--me2)); box-shadow: 0 8px 24px #7c5cff55; }
@keyframes float { 50% { transform: translateY(-8px) rotate(-4deg); } }

/* ---------- cabecera ---------- */
.top { display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 12px; min-height: 60px;
  background: var(--bg2); border-bottom: 1px solid var(--line); z-index: 2; flex: none; }
#chatTop, #page .top { padding-left: 2px; gap: 4px; }
.top-title { flex: 1; min-width: 0; font-weight: 800; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#home .top-title { background: linear-gradient(90deg, #c4b5fd, #f9a8d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.avatar-btn { flex: none; border-radius: 50%; }
.peer-hit { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 2px 0; border-radius: 12px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff;
  font-weight: 800; font-size: 18px; background: linear-gradient(135deg, #f59e0b, #ef4444); text-shadow: 0 1px 2px #0004; }
.avatar.has-pic { color: transparent; text-shadow: none; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
.avatar.sm { width: 38px; height: 38px; font-size: 16px; }
.avatar.xl { width: 116px; height: 116px; font-size: 46px; box-shadow: 0 10px 30px #0007; cursor: pointer; }
.peer { flex: 1; min-width: 0; }
.peer-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peer-status { font-size: 13px; color: var(--muted); min-height: 18px; }
.peer-status.on { color: var(--ok); }
.icon { width: 44px; height: 44px; border-radius: 50%; font-size: 22px; flex: none; display: grid; place-items: center; }
.icon:active { background: #ffffff14; }
.icon.small { width: 32px; height: 32px; font-size: 14px; }
.banner { background: #f59e0b; color: #1a1300; text-align: center; font-size: 13px; padding: 4px; font-weight: 600; }

/* ---------- lista ---------- */
#list { flex: 1; overflow-y: auto; padding: 8px 10px 4px; display: flex; flex-direction: column;
  background:
    radial-gradient(60% 40% at 100% 0%, #7c5cff14, transparent 70%),
    radial-gradient(50% 40% at 0% 100%, #d946ef10, transparent 70%), var(--bg); }
#msgs { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
.chip, .day { align-self: center; font-size: 12px; color: var(--muted); background: var(--bg2);
  padding: 4px 12px; border-radius: 12px; margin: 10px 0 6px; border: 1px solid var(--line); }
.msg { display: flex; flex-direction: column; max-width: 82%; position: relative; }
.msg.me { align-self: flex-end; align-items: flex-end; }
.msg.them { align-self: flex-start; align-items: flex-start; }
.bubble { padding: 8px 12px 6px; border-radius: 20px; min-width: 64px; overflow: hidden;
  word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap; }
.me .bubble { background: linear-gradient(135deg, var(--me1), var(--me2)); border-bottom-right-radius: 6px; }
.them .bubble { background: var(--them); border-bottom-left-radius: 6px; }
.msg.pop { animation: pop .22s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: scale(.85) translateY(8px); opacity: 0; } }
.text a { color: #fff; text-decoration: underline; }
.text.pending { opacity: .6; }
.alt { margin-top: 6px; padding-top: 6px; border-top: 1px solid #ffffff2e; font-size: 14px; opacity: .92; }
.alt-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.meta { display: flex; justify-content: flex-end; align-items: center; gap: 5px; font-size: 11px; opacity: .72; margin-top: 2px; white-space: nowrap; }
.trs { font-style: italic; margin-right: auto; padding-right: 8px; animation: blink 1.2s infinite; }
.trs.bad { animation: none; color: #ffd0d6; }
@keyframes blink { 50% { opacity: .35; } }
.ticks.read { color: #7dd3fc; opacity: 1; font-weight: 700; }
.me .ticks.read { color: #bff3ff; }
.quote { border-left: 3px solid #ffffff99; padding: 2px 8px; margin-bottom: 4px; font-size: 13px; background: #00000022; border-radius: 6px;
  display: flex; flex-direction: column; max-height: 54px; overflow: hidden; white-space: normal; }
.reacts { margin-top: -8px; margin-bottom: 2px; background: var(--card); border: 2px solid var(--bg); border-radius: 14px;
  padding: 1px 7px; font-size: 15px; z-index: 1; animation: pop .25s cubic-bezier(.2, 1.6, .4, 1); }
.me .reacts { margin-right: 10px; } .them .reacts { margin-left: 10px; }

/* emojis gigantes y stickers: sin burbuja */
.msg.jumbo .bubble, .msg.sticker .bubble { background: none; padding: 2px 4px; overflow: visible; }
.msg.jumbo .text { font-size: 56px; line-height: 1.1; animation: wobble .6s ease; }
@keyframes wobble { 0% { transform: scale(.3) rotate(-20deg); } 60% { transform: scale(1.2) rotate(8deg); } 100% { transform: none; } }
.msg.jumbo .meta, .msg.sticker .meta { background: #00000055; border-radius: 10px; padding: 1px 7px; display: inline-flex; float: right; }

.stk { width: 150px; height: 150px; border-radius: 34px; border: 5px solid #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; transform: rotate(-3deg); margin: 6px 4px;
  box-shadow: 0 8px 20px #0008; text-align: center; white-space: normal; }
.me .stk { transform: rotate(3deg); }
.stk-e { font-size: 62px; line-height: 1; filter: drop-shadow(0 3px 0 #0003); }
.stk-t { font-weight: 900; font-size: 17px; color: #fff; text-shadow: 0 2px 0 #0005; padding: 0 6px; line-height: 1.1; }
.stk.small { width: 100%; height: auto; aspect-ratio: 1; border-width: 3px; border-radius: 22px; margin: 0; transform: none; box-shadow: none; }
.stk.small .stk-e { font-size: 34px; } .stk.small .stk-t { font-size: 10px; }
.stk-img { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 0 0 #fff) drop-shadow(0 6px 10px #0008); border-radius: 18px; }
.stk-img.small { width: 100%; height: auto; aspect-ratio: 1; }
.stk-img-box.loading, .photo-box.loading { background: var(--card); border-radius: 14px; min-height: 120px; min-width: 120px; animation: blink 1.2s infinite; }

.photo-box { margin: -4px -8px 4px; border-radius: 15px; overflow: hidden; max-width: 280px; width: 68vw; background: #0004; }
.photo-box.expired { width: auto; padding: 18px; color: var(--muted); margin: 0; font-size: 14px; }
.photo { display: block; width: 100%; height: 100%; object-fit: cover; }
/* videos y archivos */
.video-box { position: relative; margin: -4px -8px 4px; border-radius: 15px; overflow: hidden; max-width: 280px; width: 68vw;
  aspect-ratio: 16 / 9; background: #000; display: grid; place-items: center; }
.video-box.expired { aspect-ratio: auto; width: auto; padding: 18px; margin: 0; background: #0004; color: var(--muted); font-size: 14px; }
.video-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-box .play { position: relative; width: 54px; height: 54px; border-radius: 50%; background: #000a; display: grid; place-items: center;
  font-size: 22px; padding-left: 4px; border: 2px solid #fffc; }
.video-info { position: absolute; left: 8px; bottom: 8px; background: #000a; border-radius: 10px; padding: 2px 8px; font-size: 12px; }
.upl { position: absolute; right: 8px; top: 8px; background: #000c; border-radius: 10px; padding: 3px 9px; font-size: 12px; }
.upl.bad, .file-tx small.bad { color: #ffd0d6; }
.file-card { display: flex; align-items: center; gap: 12px; padding: 4px 2px 2px; min-width: 200px; max-width: 260px; white-space: normal; }
.file-card.expired { opacity: .55; }
.file-ic { width: 44px; height: 44px; border-radius: 12px; background: #ffffff22; display: grid; place-items: center; font-size: 24px; flex: none; }
.file-tx { display: flex; flex-direction: column; min-width: 0; }
.file-tx b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-tx small { opacity: .8; font-size: 12px; }
.pv-info { display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: #fff; }
.pv-info.solo { flex: 1; flex-direction: column; justify-content: center; text-align: center; padding-top: 70px; }
.pv-info.solo .pv-ic { font-size: 72px; }
.pv-ic { font-size: 30px; flex: none; }
.pv-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; word-break: break-word; }
.pv-tx small { font-size: 13px; opacity: .85; }
.once-card { display: flex; align-items: center; gap: 10px; padding: 4px 2px; white-space: normal; }
.once-card.opened { opacity: .6; }
.one { width: 30px; height: 30px; border-radius: 50%; border: 2px dashed #fff; display: inline-grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; }
.once-txt { display: flex; flex-direction: column; } .once-txt small { opacity: .75; }

.typing { align-self: flex-start; background: var(--them); border-radius: 18px; padding: 12px 14px; margin-top: 4px; display: flex; gap: 4px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: bounce 1s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 30% { transform: translateY(-5px); } }
.to-bottom { position: absolute; right: 14px; bottom: 84px; width: 42px; height: 42px; border-radius: 50%; background: var(--card);
  border: 1px solid var(--line); box-shadow: 0 6px 16px #0008; font-size: 18px; z-index: 3; }

/* ---------- redacción ---------- */
#composer { background: var(--bg2); border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
.row { display: flex; align-items: flex-end; gap: 4px; }
#input, #pvCaption { flex: 1; min-width: 0; resize: none; border: 1px solid var(--line); outline: none; background: var(--bg);
  border-radius: 22px; padding: 10px 14px; max-height: 130px; -webkit-user-select: text; user-select: text; scrollbar-width: none; }
.send { width: 44px; height: 44px; border-radius: 50%; flex: none; font-size: 18px;
  background: linear-gradient(135deg, var(--me1), var(--me2)); box-shadow: 0 4px 14px #7c5cff66; transition: transform .1s; }
.send:active { transform: scale(.88); }
.reply-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; margin-bottom: 6px;
  border-left: 3px solid var(--accent); background: var(--bg); border-radius: 8px; }
.reply-text { flex: 1; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.panel { height: 290px; display: flex; flex-direction: column; margin-top: 6px; }
.tabs { display: flex; gap: 4px; padding: 0 4px 6px; }
.tab { flex: 1; padding: 6px; border-radius: 12px; font-size: 20px; opacity: .5; }
.tab.on { background: var(--card); opacity: 1; }
.panel-body { flex: 1; overflow-y: auto; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
.emo { font-size: 27px; height: 44px; border-radius: 10px; }
.emo:active { background: #ffffff18; transform: scale(1.25); }
.emoji-sep { grid-column: 1 / -1; height: 1px; background: var(--line); margin: 6px 4px; }
.stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; padding: 4px; }
.stk-btn { transition: transform .1s; } .stk-btn:active { transform: scale(.9); }
.stk-btn.add { aspect-ratio: 1; border: 2px dashed var(--line); border-radius: 22px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: var(--muted); font-size: 11px; }
.plus { font-size: 30px; line-height: 1; }

/* ---------- capas ---------- */
.overlay { position: fixed; inset: 0; background: #000; z-index: 20; display: flex; flex-direction: column; }
.ov-top { display: flex; align-items: center; gap: 8px; padding: 8px; position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  background: linear-gradient(#000a, transparent); }
.overlay img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.pv-bottom { padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); background: #000c; display: flex; flex-direction: column; gap: 10px; }
.pv-bottom .row { justify-content: flex-end; }
.once-toggle { align-self: flex-start; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 22px;
  border: 1px solid #fff5; font-size: 14px; }
.once-toggle.on { background: linear-gradient(135deg, var(--me1), var(--me2)); border-color: transparent; }
.vw-note { font-size: 13px; opacity: .85; }
.vw-loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; animation: blink 1s infinite; }

.sheet-wrap { position: fixed; inset: 0; background: #0009; z-index: 30; display: flex; align-items: flex-end; animation: fade .15s; }
.sheet { width: 100%; background: var(--bg2); border-radius: 24px 24px 0 0; padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
  max-height: 88dvh; overflow-y: auto;
  animation: up .2s cubic-bezier(.2, 1.1, .4, 1); }
@keyframes up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
.react-row { display: flex; justify-content: space-around; padding: 4px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.react { font-size: 30px; width: 46px; height: 46px; border-radius: 50%; transition: transform .1s; }
.react:active { transform: scale(1.35); } .react.on { background: var(--card); }
.act { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 10px; border-radius: 12px; text-align: left; }
.act:active { background: #ffffff10; } .act.danger { color: var(--bad); }
.act-i { width: 26px; text-align: center; flex: none; }
.act > span:last-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ver { text-align: center; font-size: 12px; color: var(--muted); padding: 12px 0 2px; }
.sheet-h { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px 2px; }
.sheet-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.via { font-size: 10px; opacity: .85; margin-right: auto; padding-right: 8px; }

/* ---------- lista de chats ---------- */
.chat-list { flex: 1; overflow-y: auto; padding: 4px 0 20px; }
.chat-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; text-align: left; }
.chat-row:active { background: #ffffff0d; }
.chat-row .avatar { width: 52px; height: 52px; font-size: 21px; }
.cr-mid { flex: 1; min-width: 0; border-bottom: 1px solid #ffffff0a; padding-bottom: 10px; margin-bottom: -10px; }
.cr-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-sub { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.cr-sub.typing-txt, .peer-status.typing-txt { color: var(--ok); font-style: italic; }
.cr-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; align-self: flex-start; padding-top: 4px; }
.cr-time { font-size: 12px; color: var(--muted); }
.cr-time.on { color: var(--accent); font-weight: 700; }
.badge { min-width: 22px; height: 22px; border-radius: 11px; padding: 0 6px; display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: linear-gradient(135deg, var(--me1), var(--me2)); animation: pop .25s cubic-bezier(.2, 1.6, .4, 1); }
.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 80px 30px; text-align: center; }
.empty-ic { font-size: 64px; animation: float 3s ease-in-out infinite; }
.empty .btn { width: auto; padding: 12px 26px; }
.sender { font-size: 13px; font-weight: 700; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.no-send { padding: 16px; text-align: center; color: var(--muted); background: var(--bg2); border-top: 1px solid var(--line); font-size: 14px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom)); }

/* ---------- páginas (perfil, administración, grupos) ---------- */
.page-body { flex: 1; overflow-y: auto; padding: 14px 16px 30px; }
.page-body h2 { margin: 6px 0 4px; font-size: 22px; }
.prof-top { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0 8px; }
.small { font-size: 13px; }
.hint { margin: 8px 2px; line-height: 1.35; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.field-l { font-size: 13px; color: var(--accent); font-weight: 600; }
.inp { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg2); color: var(--text);
  font: inherit; outline: none; -webkit-user-select: text; user-select: text; }
.inp:focus { border-color: var(--accent); }
.seg { display: flex; gap: 4px; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
.seg-b { flex: 1; padding: 9px 6px; border-radius: 10px; font-size: 14px; color: var(--muted); }
.seg-b.on { background: linear-gradient(135deg, var(--me1), var(--me2)); color: #fff; font-weight: 700; }
.btn:not(.primary) { background: var(--card); }
.page-body .btn { margin-top: 12px; }
.btn:disabled { opacity: .45; box-shadow: none; }
.btn.small { width: auto; align-self: flex-end; padding: 8px 18px; border-radius: 12px; margin-top: 0; font-size: 14px; }
.btn.danger { background: #fb71851f; color: var(--bad); }
.btn.danger-outline { background: none; border: 1px solid #fb718555; color: var(--bad); }
.btn.sticky { position: sticky; bottom: 0; margin-top: 18px; }
.card { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.card-h { font-weight: 800; }
.card .btn { margin-top: 0; }
.list-h { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin: 22px 2px 6px; font-weight: 700; }
.urow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 4px; text-align: left; border-radius: 12px; }
.urow.click:active { background: #ffffff0d; }
.urow-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.urow-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.urow-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.lang-badge { font-size: 11px; padding: 2px 7px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); white-space: nowrap; flex: none; cursor: pointer; }
.owner-badge { font-size: 11px; padding: 2px 7px; border-radius: 8px; background: #a78bfa26; color: var(--accent); font-weight: 700; }
.code { font-family: ui-monospace, monospace; font-size: 11px; color: var(--muted); text-align: left; word-break: break-all;
  background: var(--bg); border: 1px dashed var(--line); border-radius: 8px; padding: 5px 7px; line-height: 1.3; }
.code:active { border-color: var(--accent); color: var(--text); }
.check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; flex: none; font-weight: 900; font-size: 14px; }
.check.on { background: linear-gradient(135deg, var(--me1), var(--me2)); border-color: transparent; }
.switch { width: 50px; height: 30px; border-radius: 15px; background: var(--line); position: relative; flex: none; transition: background .2s; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s;
  box-shadow: 0 2px 6px #0006; }
.switch.on { background: linear-gradient(135deg, var(--me1), var(--me2)); }
.switch.on .knob { transform: translateX(20px); }
.switch.off { opacity: .4; }
.tr-row { display: flex; align-items: center; gap: 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; margin: 16px 0 4px; }
.tr-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tr-tx small { line-height: 1.3; }

/* ---------- llamadas ---------- */
#chat { position: relative; }
#chatTop .icon { width: 40px; font-size: 20px; }
.call-bar { width: 100%; background: #22c55e; color: #052e16; font-weight: 800; padding: 9px; text-align: center; flex: none; font-size: 14px; }
.call-card { display: flex; align-items: center; gap: 12px; padding: 4px 2px; min-width: 190px; cursor: pointer; white-space: normal; }
.call-ic { width: 40px; height: 40px; border-radius: 50%; background: #ffffff22; display: grid; place-items: center; font-size: 20px; flex: none; }
.them .call-card.missed b { color: #fda4af; }
.call { position: fixed; inset: 0; z-index: 25; color: #fff; display: flex; flex-direction: column;
  background: radial-gradient(120% 80% at 50% 0%, #2a1f5c 0%, #0b0b14 70%); }
.call-top { position: relative; z-index: 3; text-align: center; padding: calc(18px + env(safe-area-inset-top)) 56px 8px;
  text-shadow: 0 1px 4px #0008; }
#callMin { position: absolute; left: 6px; top: calc(8px + env(safe-area-inset-top)); font-size: 26px; }
.call-name { font-size: 24px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-status { font-size: 15px; opacity: .85; margin-top: 4px; font-variant-numeric: tabular-nums; }
.call-avatar { position: relative; z-index: 2; display: grid; place-items: center; margin-top: 8vh; pointer-events: none; }
.call-avatar .avatar.xl { width: 150px; height: 150px; font-size: 60px; animation: callpulse 2.2s infinite; cursor: default; }
@keyframes callpulse { 50% { box-shadow: 0 0 0 22px #7c5cff26; } }
.call-grid { position: absolute; inset: 0; z-index: 1; display: grid; gap: 3px; }
.call-grid[data-n="0"] { display: none; }
.call-grid[data-n="2"] { grid-template-rows: 1fr 1fr; }
.call-grid[data-n="3"], .call-grid[data-n="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ctile { position: relative; overflow: hidden; background: #000; min-height: 0; }
.ctile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ctile.novideo video { opacity: 0; }
.ctile-av { position: absolute; inset: 0; display: none; place-items: center; background: #15152a; }
.ctile.novideo .ctile-av { display: grid; }
.call-grid[data-n="1"] .ctile.novideo { opacity: 0; }   /* llamada de voz 1 a 1: se ve la foto grande */
.ctile-name { position: absolute; left: 10px; bottom: 10px; background: #0009; padding: 2px 10px; border-radius: 10px; font-size: 13px; }
.call-grid[data-n="1"] .ctile-name { display: none; }
.call-self { position: absolute; right: 12px; top: calc(76px + env(safe-area-inset-top)); width: 104px; height: 146px; object-fit: cover;
  border-radius: 14px; z-index: 4; border: 2px solid #ffffff40; background: #000; box-shadow: 0 6px 20px #0009; }
.call-self.mirror { transform: scaleX(-1); }
.call-ctrls, .call-incoming { position: absolute; left: 0; right: 0; bottom: calc(30px + env(safe-area-inset-bottom)); z-index: 4;
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 0 12px; }
.call-incoming { gap: 48px; }
.cbtn { width: 58px; height: 58px; border-radius: 50%; background: #ffffff2b; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 24px; display: grid; place-items: center; transition: transform .1s; }
.cbtn:active { transform: scale(.9); }
.cbtn.off { background: #ffffffe6; }
.cbtn.red { background: #ef4444; }
.cbtn.green { background: #22c55e; }
#callHang { transform: rotate(135deg); }
.call-incoming .cbtn { width: 72px; height: 72px; font-size: 30px; }
.call-incoming .cbtn.green { animation: ringbtn 1.1s infinite; }
@keyframes ringbtn { 50% { transform: scale(1.12); } }
.call-pill { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 24; background: #22c55e; color: #052e16;
  border-radius: 0 0 16px 16px; padding: calc(6px + env(safe-area-inset-top)) 20px 7px; font-weight: 800; font-size: 14px; box-shadow: 0 4px 14px #0008; }

/* ---------- version web ---------- */
.tip { background: #3b2f7a; color: #fff; padding: 10px 14px; font-size: 14px; display: flex; gap: 10px; align-items: center;
  justify-content: space-between; flex: none; line-height: 1.3; }
.tip .btn.small { flex: none; background: #fff; color: #3b2f7a; margin: 0; }
#emptyPane { align-items: center; justify-content: center; text-align: center; }
.empty-pane { margin: auto; padding: 30px; }
#mediaView video { flex: 1; min-height: 0; width: 100%; background: #000; }

@media (min-width: 900px) {
  body.wide { display: flex; }
  body.wide .screen { max-width: none; margin: 0; border: 0; }
  body.wide #login { flex: 1; }
  body.wide #home { width: 380px; flex: none; border-right: 1px solid var(--line); }
  body.wide #chat, body.wide #page, body.wide #emptyPane { flex: 1; min-width: 0; }
  body.wide #backBtn { display: none; }
  body.wide #chatTop { padding-left: 12px; }
  body.wide .chat-row.on { background: #ffffff10; }
  body.wide .msg { max-width: 68%; }
  body.wide .call-self { width: 180px; height: 135px; }
}

.toast { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%); background: #000d; padding: 8px 16px;
  border-radius: 18px; font-size: 14px; z-index: 40; }

@media (min-width: 720px) {
  .screen { max-width: 560px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); position: relative; }
}