: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 8px 32px rgba(0,0,0,0.5);
  --glass: blur(16px) saturate(180%);
  --radius-lg: 24px;
  --radius-sm: 14px;
  --radius-msg: 20px;
}

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:#101010cc; --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:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; overflow:hidden; touch-action:manipulation; transition: background 0.3s ease; }

/* JOIN SCREEN */
#join-screen { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at center, rgba(26,16,64,0.8) 0%, var(--bg) 80%); z-index:99; transition: opacity 0.4s ease; }
.jcard { background:var(--bg4); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-lg); padding:48px 40px; text-align:center; width:min(90vw,400px); box-shadow:var(--shadow); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); }
.jlogo { font-size:68px; margin-bottom:16px; filter: drop-shadow(0 4px 12px rgba(124,106,247,0.5)); animation: float 3s ease-in-out infinite; }
.jcard h1 { font-size:32px; font-weight:800; margin-bottom:28px; letter-spacing:-0.5px; }
.name-row { display:flex; align-items:center; gap:8px; background:rgba(0,0,0,0.3); border:1px solid var(--bdr); border-radius:var(--radius-sm); padding:14px 18px; margin-bottom:28px; transition: 0.2s; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); }
.name-row:focus-within { border-color: var(--acc); box-shadow: 0 0 0 2px rgba(124,106,247,0.2); }
.j-name { flex:1; font-size:22px; 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:6px; border-radius:10px; transition:0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
#regen-btn:hover { background: var(--bg3); transform:rotate(20deg) scale(1.15); }
#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:17px; font-weight:700; cursor:pointer; transition:0.3s; box-shadow: 0 6px 20px rgba(124,106,247,0.4); text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
#join-btn:hover { transform:translateY(-3px); box-shadow: 0 8px 25px rgba(124,106,247,0.6); filter: brightness(1.1); }
#join-btn:active { transform:scale(0.97); }

/* 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 (Glassmorphism) */
#hdr { height:68px; min-height:68px; background:var(--bg4); border-bottom:1px solid rgba(255,255,255,0.05); display:flex; align-items:center; justify-content:space-between; padding:0 18px; flex-shrink:0; z-index:10; backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: 0 4px 16px rgba(0,0,0,0.1); position:relative; }
.h-l { display:flex; align-items:center; gap:14px; }
.conn-dot { width:12px; height:12px; border-radius:50%; background:var(--grn); transition:0.3s; box-shadow:0 0 10px var(--grn); }
.conn-dot.offline { background:var(--red); animation:pulse 1.5s infinite; box-shadow:0 0 10px var(--red); }
.conn-dot.connecting { background:#fbbf24; animation:pulse 0.8s infinite; }
.h-title { font-size:20px; font-weight:800; letter-spacing:-0.4px; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.h-sub { font-size:13px; color:var(--txt2); font-weight:600; margin-top:2px; }
.h-r { display:flex; align-items:center; gap:12px; }
.badge { font-size:13px; font-weight:700; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.08); border-radius:20px; padding:6px 14px; color:var(--acc); max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.icon-btn { background:transparent; border:none; font-size:22px; cursor:pointer; padding:8px; border-radius:50%; transition:0.2s; }
.icon-btn:hover { background:var(--bg3); transform: rotate(45deg); }

/* BANNER */
.banner { font-size:13px; font-weight:700; text-align:center; padding:10px; flex-shrink:0; transition:0.3s; opacity:0.95; backdrop-filter: blur(4px); }
.banner.err { background:rgba(248,113,113,0.15); color:var(--red); border-bottom:1px solid rgba(248,113,113,0.3); }
.banner.ok  { background:rgba(34,197,94,0.15); color:var(--grn); border-bottom:1px solid rgba(34,197,94,0.3); }
.banner.hidden { display:none; opacity:0; }

/* SETTINGS PANEL */
#sp-ov { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:40; opacity:0; pointer-events:none; transition:0.3s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#sp-ov.open { opacity:1; pointer-events:auto; }
#sp { position:fixed; top:0; right:0; bottom:0; width:min(340px,85vw); background:var(--bg2); border-left:1px solid rgba(255,255,255,0.05); z-index:50; display:flex; flex-direction:column; transform:translateX(100%); transition:transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow:-10px 0 40px rgba(0,0,0,0.6); }
#sp.open { transform:translateX(0); }
.sp-top { display:flex; align-items:center; justify-content:space-between; padding:22px; border-bottom:1px solid rgba(255,255,255,0.05); font-size:19px; font-weight:800; flex-shrink:0; background:var(--bg3); }
#sp-x { background:none; border:none; color:var(--txt2); font-size:24px; cursor:pointer; padding:6px; border-radius:8px; transition:0.2s; }
#sp-x:hover { background:rgba(255,255,255,0.1); color:#fff; transform:scale(1.1); }
.sp-scroll { flex:1; overflow-y:auto; padding-bottom: 20px; }
.sp-s { padding:20px 22px; border-bottom:1px solid rgba(255,255,255,0.03); }
.sp-s:last-child { border:none; }
.sp-l { font-size:12px; color:var(--txt2); font-weight:800; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:14px; }

.name-edit-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sp-name-display { font-size:20px; font-weight:800; color:var(--acc); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.small-btn { background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.1); color:var(--txt); border-radius:10px; padding:8px 14px; font-size:14px; font-weight:700; cursor:pointer; transition:0.2s; }
.small-btn:hover { background:var(--acc); border-color:var(--acc); color:#fff; box-shadow: 0 4px 12px rgba(124,106,247,0.4); }

.sz-row { display:flex; gap:10px; }
.sz { flex:1; background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.05); color:var(--txt); border-radius:12px; padding:12px 0; cursor:pointer; font-family:inherit; transition:0.2s; font-size:15px; font-weight:800; }
.sz.active { background:linear-gradient(135deg, var(--acc), var(--acc2)); border-color:transparent; color:#fff; transform:scale(1.05); box-shadow: 0 4px 12px rgba(124,106,247,0.3); }

.th-row { display:flex; gap:14px; flex-wrap:wrap; }
.th { width:40px; height:40px; border-radius:50%; border:3px solid var(--bg3); cursor:pointer; transition:0.2s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.th:hover { transform:scale(1.2); }
.th.active { border-color:#fff; transform:scale(1.2); box-shadow:0 0 16px var(--acc); }

.bg-row { display:flex; gap:12px; flex-wrap:wrap; }
.bg-th { background:rgba(0,0,0,0.2); border:2px solid rgba(255,255,255,0.05); border-radius:14px; padding:10px 14px; font-size:24px; cursor:pointer; transition:0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.bg-th.active { border-color:var(--acc); background:var(--bg4); transform:scale(1.15); box-shadow: 0 4px 15px rgba(0,0,0,0.3); }

.sp-btn { background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.05); color:var(--txt); border-radius:14px; padding:16px 20px; text-align:left; font-size:16px; font-weight:700; cursor:pointer; transition:0.2s; width:100%; display:flex; align-items:center; gap:12px; margin-bottom: 10px; }
.sp-btn:hover { background:var(--bg4); border-color:var(--acc); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.sp-btn.danger { color:var(--red); border-color:rgba(248,113,113,0.15); }
.sp-btn.danger:hover { background:rgba(248,113,113,0.15); border-color:var(--red); box-shadow: 0 4px 12px rgba(248,113,113,0.2); }

/* MESSAGES (Glass y Rediseño) */
#msg-box { flex:1; overflow-y:auto; overflow-x:hidden; padding:16px 12px 10px; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; scroll-behavior: smooth; }
#msg-box::-webkit-scrollbar { width:6px; }
#msg-box::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:3px; }
#loading-ind { text-align:center; color:var(--txt3); font-size:15px; padding:30px; font-weight:600; animation: pulse 1.5s infinite; }
#msg-list { display:flex; flex-direction:column; gap:8px; }
.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:6px; }
.mw.chain.other .mb { border-top-left-radius:6px; }

.m-nm { font-size:13px; font-weight:800; margin-bottom:5px; padding:0 14px; opacity:0.95; letter-spacing: -0.2px; }
.mb { padding:12px 16px; border-radius:var(--radius-msg); font-size:var(--msz); line-height:1.5; word-break:break-word; white-space:pre-wrap; box-shadow: 0 4px 12px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.04); }
.mw.own .mb { background:linear-gradient(135deg, var(--own) 0%, var(--ownb) 100%); color:var(--ownt); border-bottom-right-radius:6px; }
.mw.other .mb { background:linear-gradient(135deg, var(--oth) 0%, var(--othb) 100%); color:var(--txt); border-bottom-left-radius:6px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

.m-ts { font-size:11px; color:var(--txt3); margin-top:5px; padding:0 14px; opacity:0.8; font-weight: 600; }
.loc-card { display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:var(--radius-msg); text-decoration:none; transition:0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.04); }
.loc-card:hover { filter: brightness(1.15); transform: scale(0.98) translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.3); }
.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); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.loc-card .li { font-size:32px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.loc-card .lt { font-size:15px; line-height:1.4; }
.loc-card .ll { font-size:13px; color:var(--acc); font-weight:800; margin-top:3px; text-transform: uppercase; letter-spacing: 0.5px; }

.m-sys { text-align:center; font-size:13px; color:var(--txt3); padding:10px 16px; margin:8px 0; font-weight:700; background: rgba(0,0,0,0.2); border-radius:24px; width: fit-content; align-self: center; border: 1px solid rgba(255,255,255,0.03); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

/* TYPING */
#typing-bar { font-size:14px; color:var(--txt2); padding:6px 18px; min-height:26px; font-weight:600; letter-spacing: -0.2px; }
#typing-bar.hidden { display:none; opacity:0; }
.td { display:inline-flex; gap:4px; vertical-align:middle; margin-left:6px; }
.td span { width:6px; height:6px; 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 AREA (Glassmorphism) */
#inp-area { background:var(--bg4); border-top:1px solid rgba(255,255,255,0.05); padding:10px; padding-bottom:max(10px,env(safe-area-inset-bottom)); flex-shrink:0; z-index:10; backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: 0 -4px 16px rgba(0,0,0,0.1); }
#ep { display:flex; flex-wrap:wrap; gap:4px; padding:8px 4px 12px; animation:fadeIn 0.2s ease; justify-content: center; }
#ep.ep-off { display:none; }
#ep span { font-size:28px; cursor:pointer; padding:6px 8px; border-radius:12px; transition:0.15s cubic-bezier(0.34, 1.56, 0.64, 1); }
#ep span:hover { background:rgba(255,255,255,0.1); transform:scale(1.25); filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }

#inp-row { display:flex; align-items:flex-end; gap:8px; padding:0 4px; }
#loc-btn, #ep-btn { width:46px; height:46px; border-radius:50%; background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.05); font-size:22px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:0.2s; color:var(--txt); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
#loc-btn:hover, #ep-btn:hover { background:var(--bg3); border-color: var(--acc); color:var(--acc); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124,106,247,0.2); }
#loc-btn:disabled { opacity:0.5; cursor:not-allowed; transform: none; box-shadow: none; }

#txt { flex:1; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.08); border-radius:24px; color:var(--txt); font-size:16px; line-height:1.45; padding:12px 18px; resize:none; min-height:46px; max-height:140px; overflow-y:auto; font-family:inherit; transition:0.2s; margin-bottom:0; box-shadow: inset 0 2px 6px rgba(0,0,0,0.2); }
#txt:focus { border-color:var(--acc); box-shadow: 0 0 0 3px rgba(124,106,247,0.25), inset 0 2px 6px rgba(0,0,0,0.2); background: rgba(0,0,0,0.5); }
#txt::placeholder { color:var(--txt3); font-weight: 500; }

#send-btn { width:46px; height:46px; background:linear-gradient(135deg, var(--acc), var(--acc2)); border:none; border-radius:50%; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:0.2s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 4px 12px rgba(124,106,247,0.4); }
#send-btn:hover:not(:disabled) { transform:scale(1.1) translateY(-2px); box-shadow: 0 6px 16px rgba(124,106,247,0.6); filter: brightness(1.1); }
#send-btn:active:not(:disabled) { transform:scale(0.95); }
#send-btn:disabled { opacity:0.4; cursor:default; box-shadow:none; background: var(--txt3); transform: none; filter: none; }

/* 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)} }

/* ── LA MAGIA PARA EL MONITOR CORADIR Y PC ── */
@media (min-width:900px) {
  body { display:flex; align-items:center; justify-content:center; background:#000; padding: 30px; }
  #join-screen { background:radial-gradient(ellipse at 50% 40%, #1a1040 0%, #000 80%); }
  
  #chat-screen { 
    position:relative; inset:unset; 
    width: 95%; /* Ensanchado dinámico */
    max-width: 1400px; /* Soporta ultrawide sin estallar */
    height: calc(100vh - 60px); 
    border-radius: 28px; 
    border: 1px solid rgba(255,255,255,0.08); 
    box-shadow: 0 20px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,0,0,0.5); 
    overflow: hidden; flex-shrink: 0; 
  }

  /* Limitamos el ancho de la burbuja para que la lectura no canse el cuello */
  .mw { max-width: 65%; }
}

/* Estilos para el Visto (Palomas) */
.m-meta { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.8em; opacity: 0.75; font-weight: 600; }
.status-icon { margin-left: 6px; font-size: 1.1em; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)); }