:root {
  /* Backgrounds: Cosmos (default) */
  --bg:  #0b0b0e; --bg2: #13131a; --bg3: #1c1c27; --bg4: #25253380;
  /* Accent: Purple (default) */
  --acc: #7c6af7; --acc2: #5c4fd6; --own: #1e1560; --ownb: #4a3fa0; --ownt: #ddd8ff;
  /* Neutral */
  --oth: #1c1c27; --othb: #2a2a3a;
  --bdr: #2a2a3a;
  --txt: #f0f0f8; --txt2: #9090b0; --txt3: #606080;
  --grn: #22c55e; --red: #f87171;
  --msz: 17px;
}
/* ── ACCENT THEMES ──────────────────────────────────── */
body.acc-blue   { --acc:#4dabf7; --acc2:#228be6; --own:#0d2b4e; --ownb:#1971c2; --ownt:#d0ecff; }
body.acc-green  { --acc:#51cf66; --acc2:#2f9e44; --own:#0d3320; --ownb:#2f9e44; --ownt:#d3f9d8; }
body.acc-rose   { --acc:#f783ac; --acc2:#e64980; --own:#4a0f2a; --ownb:#c2255c; --ownt:#ffd6e3; }
body.acc-orange { --acc:#ffa94d; --acc2:#e8590c; --own:#3d1500; --ownb:#d9480f; --ownt:#ffe8cc; }
/* ── BACKGROUND THEMES ──────────────────────────────── */
body.bg-ocean  { --bg:#050d1a; --bg2:#091426; --bg3:#0f1f3a; --bg4:#162a5080; --bdr:#1a2f4a; }
body.bg-forest { --bg:#060e07; --bg2:#0b160c; --bg3:#112014; --bg4:#16281880; --bdr:#1e3022; }
body.bg-dusk   { --bg:#0f0a1a; --bg2:#160f28; --bg3:#201540; --bg4:#28185880; --bdr:#2e1e50; }
body.bg-carbon { --bg:#110e09; --bg2:#1a170e; --bg3:#24221a; --bg4:#302e2080; --bdr:#3a3828; }
body.bg-slate  { --bg:#0a0e14; --bg2:#0f151e; --bg3:#16202e; --bg4:#1e2e4080; --bdr:#243040; }

/* ── RESET ──────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; }
body { height:100%; background:var(--bg); color:var(--txt); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; overflow:hidden; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }

/* ── JOIN ───────────────────────────────────────────── */
#join-screen { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 30%,#1a1040 0%,var(--bg) 70%); z-index:99; }
.jcard { background:var(--bg2); border:1px solid var(--bdr); border-radius:26px; padding:44px 34px; text-align:center; width:min(90vw,380px); box-shadow:0 20px 60px #00000077; }
.jlogo { font-size:52px; margin-bottom:14px; }
.jcard h1 { font-size:28px; font-weight:800; margin-bottom:20px; }
.name-row { display:flex; align-items:center; gap:8px; background:var(--bg3); border:1px solid var(--bdr); border-radius:14px; padding:12px 16px; margin-bottom:18px; }
#name-disp { flex:1; font-size:21px; font-weight:700; color:var(--acc); text-align:left; }
#regen-btn { background:none; border:none; font-size:24px; cursor:pointer; flex-shrink:0; padding:0 4px; transition:.15s; }
#regen-btn:hover { transform:rotate(40deg) scale(1.15); }
#join-btn { width:100%; background:var(--acc); color:#fff; border:none; border-radius:14px; padding:16px; font-size:18px; font-weight:700; cursor:pointer; transition:.15s; font-family:inherit; }
#join-btn:hover { background:var(--acc2); }
#join-btn:active { transform:scale(.97); }

/* ── CHAT SCREEN ──────────────────────────────────────
   JS ajusta height con visualViewport para manejar
   el teclado virtual en mobile Chrome/Safari           */
#chat-screen { position:fixed; top:0; left:0; right:0; height:100vh; height:100dvh; display:flex; flex-direction:column; background:var(--bg); }
#chat-screen.hidden { display:none !important; }

/* ── HEADER ─────────────────────────────────────────── */
#hdr { height:60px; min-height:60px; background:var(--bg2); border-bottom:1px solid var(--bdr); display:flex; align-items:center; justify-content:space-between; padding:0 14px; flex-shrink:0; }
.h-l { display:flex; align-items:center; gap:10px; }
.conn-dot { width:10px; height:10px; border-radius:50%; background:var(--grn); transition:background .4s; flex-shrink:0; }
.conn-dot.offline { background:var(--red); animation:pulse 1.2s infinite; }
.conn-dot.connecting { background:#fbbf24; animation:pulse 0.8s infinite; }
.h-title { font-size:17px; font-weight:800; }
.h-sub { font-size:12px; color:var(--grn); font-weight:600; }
.h-r { display:flex; align-items:center; gap:8px; }
#h-badge { font-size:13px; font-weight:700; background:rgba(124,106,247,.15); border:1px solid rgba(124,106,247,.3); border-radius:20px; padding:5px 12px; color:var(--acc); max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sp-btn { background:var(--bg3); border:1px solid var(--bdr); color:var(--txt); border-radius:10px; padding:7px 11px; font-size:18px; cursor:pointer; line-height:1; transition:.15s; }

/* ── BANNER ─────────────────────────────────────────── */
.banner { font-size:13px; font-weight:600; text-align:center; padding:6px; flex-shrink:0; transition:all .3s; }
.banner.err { background:rgba(248,113,113,.15); color:var(--red); border-bottom:1px solid rgba(248,113,113,.3); }
.banner.ok  { background:rgba(34,197,94,.12); color:var(--grn); border-bottom:1px solid rgba(34,197,94,.25); }
.banner.hidden { display:none; }

/* ── SETTINGS PANEL ─────────────────────────────────── */
#sp-ov { position:absolute; inset:0; background:rgba(0,0,0,.55); z-index:40; opacity:0; pointer-events:none; transition:opacity .25s; }
#sp-ov.open { opacity:1; pointer-events:all; }
#sp { position:absolute; top:0; right:0; bottom:0; width:min(300px,88vw); background:var(--bg2); border-left:1px solid var(--bdr); z-index:50; display:flex; flex-direction:column; transform:translateX(101%); transition:transform .26s ease; }
#sp.open { transform:none; }
.sp-top { display:flex; align-items:center; justify-content:space-between; padding:18px 18px 12px; border-bottom:1px solid var(--bdr); font-size:16px; font-weight:700; flex-shrink:0; }
#sp-x { background:none; border:none; color:var(--txt2); font-size:22px; cursor:pointer; padding:2px 8px; border-radius:6px; }
#sp-x:hover { background:var(--bg3); color:var(--txt); }
.sp-scroll { flex:1; overflow-y:auto; }
.sp-s { padding:14px 18px; border-bottom:1px solid var(--bdr); }
.sp-s:last-child { border:none; }
.sp-l { font-size:11px; color:var(--txt2); font-weight:700; text-transform:uppercase; letter-spacing:.7px; margin-bottom:10px; }
/* Name edit */
.name-edit-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#sp-myname { font-size:16px; font-weight:700; color:var(--acc); }
/* Size buttons */
.sz-row { display:flex; gap:6px; }
.sz { flex:1; background:var(--bg3); border:1px solid var(--bdr); color:var(--txt); border-radius:10px; padding:10px 4px; cursor:pointer; font-family:inherit; transition:.15s; }
.sz.active { background:var(--acc); border-color:var(--acc); color:#fff; }
/* Accent themes */
.th-row { display:flex; gap:10px; flex-wrap:wrap; }
.th { width:36px; height:36px; border-radius:50%; border:3px solid transparent; cursor:pointer; transition:.15s; }
.th.active { border-color:#fff; box-shadow:0 0 0 2px var(--acc); }
/* BG themes */
.bg-row { display:flex; gap:8px; flex-wrap:wrap; }
.bg-th { background:var(--bg3); border:2px solid var(--bdr); border-radius:10px; padding:8px 10px; font-size:20px; cursor:pointer; transition:.15s; }
.bg-th.active { border-color:var(--acc); background:var(--bg4); }
/* Action buttons */
.sp-actions { display:flex; flex-direction:column; gap:8px; }
.sp-btn { background:var(--bg3); border:1px solid var(--bdr); color:var(--txt); border-radius:12px; padding:13px 16px; text-align:left; font-size:15px; cursor:pointer; transition:.15s; font-family:inherit; width:100%; }
.sp-btn:hover { background:var(--bg4); }
.sp-btn.danger { color:var(--red); }
.sp-btn.danger:hover { background:rgba(248,113,113,.1); border-color:rgba(248,113,113,.3); }

/* ── MESSAGES ────────────────────────────────────────── */
#msg-box { flex:1; overflow-y:auto; overflow-x:hidden; padding:10px 10px 4px; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; }
#msg-box::-webkit-scrollbar { width:3px; }
#msg-box::-webkit-scrollbar-thumb { background:var(--bdr); border-radius:3px; }
#loading-ind { text-align:center; color:var(--txt3); font-size:14px; padding:20px; }
#msg-list { display:flex; flex-direction:column; gap:3px; }

.mw { display:flex; flex-direction:column; max-width:82%; animation:msgIn .2s cubic-bezier(.34,1.56,.64,1) both; }
.mw.own   { align-self:flex-end;   align-items:flex-end; }
.mw.other { align-self:flex-start; align-items:flex-start; }
.mw.chain .m-nm  { display:none; }
.mw.chain.own   .mb { border-top-right-radius:6px; }
.mw.chain.other .mb { border-top-left-radius:6px; }

.m-nm { font-size:12px; font-weight:700; margin-bottom:3px; padding:0 4px; }
.mb { padding:11px 15px; border-radius:18px; font-size:var(--msz); line-height:1.5; word-break:break-word; white-space:pre-wrap; }
.mw.own   .mb { background:var(--own); border:1px solid var(--ownb); border-bottom-right-radius:5px; color:var(--ownt); }
.mw.other .mb { background:var(--oth); border:1px solid var(--othb); border-bottom-left-radius:5px; }
.m-ts { font-size:10px; color:var(--txt3); margin-top:2px; padding:0 4px; }

.loc-card { display:flex; align-items:center; gap:10px; padding:12px 15px; border-radius:18px; text-decoration:none; }
.mw.own   .loc-card { background:var(--own); border:1px solid var(--ownb); color:var(--ownt); border-bottom-right-radius:5px; }
.mw.other .loc-card { background:var(--oth); border:1px solid var(--othb); color:var(--txt); border-bottom-left-radius:5px; }
.loc-card .li { font-size:28px; flex-shrink:0; }
.loc-card .lt { font-size:14px; line-height:1.5; }
.loc-card .ll { font-size:12px; color:var(--acc); font-weight:600; }
.loc-card .la { font-size:11px; opacity:.5; }

.m-sys { text-align:center; font-size:12px; color:var(--txt3); padding:5px 0; animation:fadeIn .3s; }

/* ── TYPING ──────────────────────────────────────────── */
#typing-bar { font-size:13px; color:var(--txt2); padding:3px 14px 1px; min-height:20px; }
#typing-bar.hidden { display:none; }
.td { display:inline-flex; gap:3px; vertical-align:middle; margin-left:4px; }
.td span { width:5px; height:5px; background:var(--txt2); border-radius:50%; animation:tdot 1.2s infinite; }
.td span:nth-child(2) { animation-delay:.2s; }
.td span:nth-child(3) { animation-delay:.4s; }

/* ── INPUT ───────────────────────────────────────────── */
#inp-area { background:var(--bg2); border-top:1px solid var(--bdr); padding:5px 10px; padding-bottom:max(8px,env(safe-area-inset-bottom)); flex-shrink:0; }
#ep { display:flex; flex-wrap:wrap; gap:2px; padding:6px 4px 4px; animation:fadeIn .15s; }
#ep.ep-off { display:none; }
#ep span { font-size:28px; cursor:pointer; padding:4px 5px; border-radius:8px; line-height:1; }
#ep span:hover, #ep span:active { background:var(--bg3); }
#inp-row { display:flex; align-items:flex-end; gap:7px; }
#ep-btn, #loc-btn { background:var(--bg3); border:1px solid var(--bdr); border-radius:50%; width:46px; height:46px; font-size:22px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:.15s; }
#ep-btn:hover, #loc-btn:hover { background:var(--bg4); }
#txt { flex:1; background:var(--bg3); border:1px solid var(--bdr); border-radius:22px; color:var(--txt); font-size:16px; line-height:1.45; padding:12px 16px; resize:none; outline:none; min-height:46px; max-height:130px; overflow-y:auto; font-family:inherit; transition:border-color .2s; }
#txt:focus { border-color:var(--acc); }
#txt::placeholder { color:var(--txt2); }
#send-btn { width:46px; height:46px; background:var(--acc); border:none; border-radius:50%; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:.15s; }
#send-btn:hover:not(:disabled) { background:var(--acc2); }
#send-btn:active:not(:disabled) { transform:scale(.91); }
#send-btn:disabled { opacity:.35; cursor:default; }
#send-btn svg { width:17px; height:17px; }

/* ── ANIMATIONS ──────────────────────────────────────── */
@keyframes fadeIn { from{opacity:0}    to{opacity:1} }
@keyframes msgIn  { from{opacity:0;transform:translateY(12px) scale(.95)} to{opacity:1;transform:none} }
@keyframes tdot   { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }
@keyframes pulse  { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── DESKTOP ─────────────────────────────────────────── */
@media (min-width:900px) {
  body { display:flex; align-items:center; justify-content:center; background:#040407; }
  #join-screen { background:radial-gradient(ellipse at 50% 40%,#18103a 0%,#040407 70%); }
  #chat-screen { position:relative; inset:unset; width:460px; height:min(92vh,900px); border-radius:24px; border:1px solid var(--bdr); overflow:hidden; box-shadow:0 24px 80px #000000aa; flex-shrink:0; }
}