:root {
  --bg:  #0b0b0e; --bg2: #13131a; --bg3: #1c1c27; --bg4: #252533cc; 
  --acc: #7c6af7; --acc2: #5c4fd6; --own: #1e1560; --ownb: #4a3fa0; --ownt: #ddd8ff;
  --oth: #1c1c27; --othb: #2a2a3a;
  --bdr: #2a2a3a;
  --txt: #f0f0f8; --txt2: #9090b0; --txt3: #606080;
  --grn: #22c55e; --red: #f87171;
  --msz: 17px;
  --shadow: 0 4px 20px rgba(0,0,0,0.4);
  --glass: blur(12px) saturate(180%);
  --radius-lg: 22px;
  --radius-sm: 12px;
  --radius-msg: 18px;
}

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; }

body.bg-ocean  { --bg:#050d1a; --bg2:#091426; --bg3:#0f1f3a; --bg4:#162a50cc; --bdr:#1a2f4a; }
body.bg-forest { --bg:#060e07; --bg2:#0b160c; --bg3:#112014; --bg4:#162818cc; --bdr:#1e3022; }
body.bg-dusk   { --bg:#0f0a1a; --bg2:#160f28; --bg3:#201540; --bg4:#281858cc; --bdr:#2e1e50; }
body.bg-carbon { --bg:#110e09; --bg2:#1a170e; --bg3:#24221a; --bg4:#302e20cc; --bdr:#3a3828; }
body.bg-slate  { --bg:#0a0e14; --bg2:#0f151e; --bg3:#16202e; --bg4:#1e2e40cc; --bdr:#243040; }
body.bg-oled   { --bg:#000000; --bg2:#0a0a0a; --bg3:#141414; --bg4:#202020cc; --bdr:#222; }

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

/* JOIN SCREEN */
#join-screen { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at center, #1a1040 0%, var(--bg) 75%); z-index:99; transition: opacity 0.3s; }
.jcard { background:var(--bg2); border:1px solid var(--bdr); border-radius:var(--radius-lg); padding:44px 34px; text-align:center; width:min(90vw,380px); box-shadow:0 20px 60px #00000080; backdrop-filter: var(--glass); }
.jlogo { font-size:64px; margin-bottom:14px; filter: drop-shadow(0 4px 10px rgba(124,106,247,0.4)); animation: float 3s ease-in-out infinite; }
.jcard h1 { font-size:28px; font-weight:800; margin-bottom:24px; letter-spacing:-0.5px; }
.name-row { display:flex; align-items:center; gap:8px; background:var(--bg3); border:1px solid var(--bdr); border-radius:var(--radius-sm); padding:12px 16px; margin-bottom:24px; transition: 0.2s; }
.name-row:focus-within { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc2); }
.j-name { flex:1; font-size:21px; font-weight:700; color:var(--acc); text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#regen-btn { background:none; border:none; font-size:24px; cursor:pointer; padding:4px; border-radius:8px; transition:0.2s; }
#regen-btn:hover { background: var(--bg4); transform:rotate(15deg) scale(1.1); }
#join-btn { width:100%; background:linear-gradient(135deg, var(--acc) 0%, var(--acc2) 100%); color:#fff; border:none; border-radius:var(--radius-sm); padding:16px; font-size:16px; font-weight:700; cursor:pointer; transition:0.2s; font-family:inherit; box-shadow: 0 4px 15px var(--acc); }
#join-btn:hover { transform:translateY(-2px); box-shadow: 0 6px 20px var(--acc2); }
#join-btn:active { transform:scale(0.98); }

/* CHAT SCREEN */
#chat-screen { position:fixed; top:0; left:0; right:0; height:100vh; height:100dvh; display:flex; flex-direction:column; background:var(--bg); transition: opacity 0.3s; }
#chat-screen.hidden { display:none !important; opacity:0; }

/* HEADER */
#hdr { height:64px; min-height:64px; background: var(--bg2); border-bottom:1px solid var(--bdr); display:flex; align-items:center; justify-content:space-between; padding:0 16px; flex-shrink:0; z-index:10; backdrop-filter: var(--glass); position:relative; }
.h-l { display:flex; align-items:center; gap:12px; }
.conn-dot { width:10px; height:10px; border-radius:50%; background:var(--grn); transition:0.3s; box-shadow:0 0 8px var(--grn); }
.conn-dot.offline { background:var(--red); animation:pulse 1.5s infinite; box-shadow:0 0 8px var(--red); }
.conn-dot.connecting { background:#fbbf24; animation:pulse 0.8s infinite; }
.h-title { font-size:18px; font-weight:800; letter-spacing:-0.3px; }
.h-sub { font-size:12px; color:var(--txt2); font-weight:500; margin-top:1px; }
.h-r { display:flex; align-items:center; gap:10px; }
.badge { font-size:12px; font-weight:700; background:var(--bg3); border:1px solid var(--bdr); border-radius:20px; padding:4px 12px; color:var(--acc); max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.icon-btn { background:transparent; border:none; font-size:20px; cursor:pointer; padding:8px; border-radius:50%; transition:0.2s; }
.icon-btn:hover { background:var(--bg3); }

/* BANNER */
.banner { font-size:12px; font-weight:700; text-align:center; padding:8px; flex-shrink:0; transition:0.3s; opacity:0.9; }
.banner.err { background:rgba(248,113,113,0.1); color:var(--red); border-bottom:1px solid rgba(248,113,113,0.2); }
.banner.ok  { background:rgba(34,197,94,0.1); color:var(--grn); border-bottom:1px solid rgba(34,197,94,0.2); }
.banner.hidden { display:none; opacity:0; }

/* SETTINGS PANEL */
#sp-ov { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:40; opacity:0; pointer-events:none; transition:0.3s; backdrop-filter: blur(4px); }
#sp-ov.open { opacity:1; pointer-events:auto; }
#sp { position:fixed; top:0; right:0; bottom:0; width:min(320px,85vw); background:var(--bg2); border-left:1px solid var(--bdr); z-index:50; display:flex; flex-direction:column; transform:translateX(100%); transition:transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow:-10px 0 30px #00000050; }
#sp.open { transform:translateX(0); }
.sp-top { display:flex; align-items:center; justify-content:space-between; padding:20px; border-bottom:1px solid var(--bdr); font-size:18px; font-weight:700; flex-shrink:0; background:var(--bg2); }
#sp-x { background:none; border:none; color:var(--txt2); font-size:22px; cursor:pointer; padding:8px; border-radius:8px; transition:0.2s; }
#sp-x:hover { background:var(--bg3); color:var(--txt); }
.sp-scroll { flex:1; overflow-y:auto; padding-bottom: 20px; }
.sp-s { padding:18px 20px; 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:1px; margin-bottom:12px; }

.name-edit-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sp-name-display { font-size:18px; font-weight:700; color:var(--acc); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.small-btn { background:var(--bg3); border:1px solid var(--bdr); color:var(--txt); border-radius:8px; padding:6px 12px; font-size:13px; font-weight:600; cursor:pointer; transition:0.2s; }
.small-btn:hover { background:var(--acc); border-color:var(--acc); color:#fff; }

.sz-row { display:flex; gap:8px; }
.sz { flex:1; background:var(--bg3); border:1px solid var(--bdr); color:var(--txt); border-radius:10px; padding:10px 0; cursor:pointer; font-family:inherit; transition:0.2s; font-size:14px; font-weight:700; }
.sz.active { background:var(--acc); border-color:var(--acc); color:#fff; transform:scale(1.05); }

.th-row { display:flex; gap:12px; flex-wrap:wrap; }
.th { width:36px; height:36px; border-radius:50%; border:3px solid var(--bg2); cursor:pointer; transition:0.2s; box-shadow: 0 2px 8px #00000040; }
.th:hover { transform:scale(1.15); }
.th.active { border-color:#fff; transform:scale(1.15); box-shadow:0 0 12px var(--acc); }

.bg-row { display:flex; gap:10px; flex-wrap:wrap; }
.bg-th { background:var(--bg3); border:2px solid var(--bdr); border-radius:12px; padding:8px 12px; font-size:22px; cursor:pointer; transition:0.2s; }
.bg-th.active { border-color:var(--acc); background:var(--bg4); transform:scale(1.1); }

.sp-btn { background:var(--bg3); border:1px solid var(--bdr); color:var(--txt); border-radius:12px; padding:14px 18px; text-align:left; font-size:15px; font-weight:600; cursor:pointer; transition:0.2s; font-family:inherit; width:100%; display:flex; align-items:center; gap:10px; margin-bottom: 8px; }
.sp-btn:hover { background:var(--bg4); border-color:var(--acc); }
.sp-btn.danger { color:var(--red); border-color:rgba(248,113,113,0.2); }
.sp-btn.danger:hover { background:rgba(248,113,113,0.1); border-color:rgba(248,113,113,0.5); }

/* MESSAGES */
#msg-box { flex:1; overflow-y:auto; overflow-x:hidden; padding:12px 8px 8px; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; scroll-behavior: smooth; }
#msg-box::-webkit-scrollbar { width:6px; }
#msg-box::-webkit-scrollbar-thumb { background:var(--bdr); border-radius:3px; }
#loading-ind { text-align:center; color:var(--txt3); font-size:14px; padding:30px; font-weight:500; }
#msg-list { display:flex; flex-direction:column; gap:6px; }
.mw { display:flex; flex-direction:column; max-width:85%; animation:msgIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 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; margin-top:0; }
.mw.chain.own .mb { border-top-right-radius:4px; }
.mw.chain.other .mb { border-top-left-radius:4px; }

.m-nm { font-size:12px; font-weight:700; margin-bottom:4px; padding:0 12px; opacity:0.9; }
.mb { padding:10px 14px; border-radius:var(--radius-msg); font-size:var(--msz); line-height:1.55; word-break:break-word; white-space:pre-wrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.mw.own .mb { background:linear-gradient(135deg, var(--own) 0%, var(--ownb) 100%); color:var(--ownt); border-bottom-right-radius:4px; }
.mw.other .mb { background:linear-gradient(135deg, var(--oth) 0%, var(--othb) 100%); color:var(--txt); border-bottom-left-radius:4px; }

.m-ts { font-size:10px; color:var(--txt3); margin-top:4px; padding:0 12px; opacity:0.8; }
.loc-card { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:var(--radius-msg); text-decoration:none; transition:0.2s; }
.loc-card:hover { filter: brightness(1.1); transform: scale(0.98); }
.mw.own .loc-card { background:linear-gradient(135deg, var(--own) 0%, var(--ownb) 100%); color:var(--ownt); }
.mw.other .loc-card { background:linear-gradient(135deg, var(--oth) 0%, var(--othb) 100%); color:var(--txt); }
.loc-card .li { font-size:30px; }
.loc-card .lt { font-size:14px; line-height:1.4; }
.loc-card .ll { font-size:12px; color:var(--acc); font-weight:700; margin-top:2px; }

.m-sys { text-align:center; font-size:12px; color:var(--txt3); padding:10px; margin:4px 0; font-weight:600; background: var(--bg3); border-radius:20px; width: fit-content; align-self: center; border: 1px solid var(--bdr); }

/* TYPING */
#typing-bar { font-size:13px; color:var(--txt2); padding:4px 16px; min-height:22px; font-weight:500; }
#typing-bar.hidden { display:none; opacity:0; }
.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:8px; padding-bottom:max(8px,env(safe-area-inset-bottom)); flex-shrink:0; z-index:10; }
#ep { display:flex; flex-wrap:wrap; gap:2px; padding:6px 2px 8px; animation:fadeIn 0.2s ease; justify-content: center; }
#ep.ep-off { display:none; }
#ep span { font-size:26px; cursor:pointer; padding:4px 6px; border-radius:8px; transition:0.1s; }
#ep span:hover { background:var(--bg3); transform:scale(1.2); }

#inp-row { display:flex; align-items:flex-end; gap:6px; padding:0 4px; }
#loc-btn, #ep-btn { width:42px; height:42px; border-radius:50%; background:var(--bg3); border:1px solid var(--bdr); font-size:20px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:0.2s; color:var(--txt); }
#loc-btn:hover, #ep-btn:hover { background:var(--bg4); border-color: var(--acc); color:var(--acc); }
#loc-btn:disabled { opacity:0.5; cursor:not-allowed; }

#txt { flex:1; background:var(--bg3); border:1px solid var(--bdr); border-radius:22px; color:var(--txt); font-size:16px; line-height:1.4; padding:10px 16px; resize:none; min-height:42px; max-height:140px; overflow-y:auto; font-family:inherit; transition:0.2s; margin-bottom:0; }
#txt:focus { border-color:var(--acc); box-shadow:0 0 0 2px rgba(124,106,247,0.3); background: var(--bg4); }
#txt::placeholder { color:var(--txt3); }

#send-btn { width:42px; height:42px; background:var(--acc); border:none; border-radius:50%; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:0.2s; box-shadow: 0 2px 10px var(--acc); }
#send-btn:hover:not(:disabled) { background:var(--acc2); transform:scale(1.05); }
#send-btn:active:not(:disabled) { transform:scale(0.95); }
#send-btn:disabled { opacity:0.3; cursor:default; box-shadow:none; background: var(--txt3); }

/* ANIMATIONS */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes msgIn { from{opacity:0;transform:translateY(15px) scale(0.95)} to{opacity:1;transform:none} }
@keyframes tdot { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(0.8)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

@media (min-width:900px) {
  body { display:flex; align-items:center; justify-content:center; background:#000; padding: 20px; }
  #join-screen { background:radial-gradient(ellipse at 50% 40%,#18103a 0%,#000 70%); }
  #chat-screen { position:relative; inset:unset; width:100%; max-width:1000px; height:90vh; border-radius:24px; border:1px solid var(--bdr); box-shadow:0 0 60px rgba(0,0,0,0.8); overflow:hidden; flex-shrink:0; }
}
/* Estilos para el Visto (Palomas) */
.m-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.75em;
    opacity: 0.7;
}
.status-icon {
    margin-left: 4px;
    font-size: 0.9em;
}