:root{--ink:#232038;--muted:#7d7a99;--line:#eae8f4;--purple:#6a4df0;--purple2:#a259f5;--grad:linear-gradient(135deg,#6a4df0,#a259f5);--bg:#f6f5fc;--white:#fff;--green:#35c68f}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}button,input,textarea{font:inherit}.hidden{display:none!important}.auth-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 10%,#ebe7ff 0,transparent 34%),radial-gradient(circle at 90% 90%,#dff9f0 0,transparent 32%),var(--bg)}.auth-card{width:min(420px,100%);background:#fff;border-radius:26px;padding:36px;box-shadow:0 24px 80px #4d448322;text-align:center}.brand-mark{width:64px;height:64px;margin:auto;border-radius:20px;display:grid;place-items:center;color:#fff;background:var(--grad);box-shadow:0 12px 24px #6a4df055}.brand-mark .logo-icon{width:36px;height:36px;display:block}.brand-mark.small .logo-icon{width:23px;height:23px}.brand-mark.small{width:38px;height:38px;margin:0;border-radius:12px;font-size:18px}.auth-card h1{margin:18px 0 4px}.auth-card>p{color:var(--muted);margin:0 0 24px}.tabs{display:flex;background:var(--bg);padding:5px;border-radius:13px;margin-bottom:20px}.tab{width:50%;border:0;padding:10px;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer}.tab.active{background:#fff;color:var(--ink);box-shadow:0 3px 14px #20233a10;font-weight:700}label{text-align:left;display:block;font-size:13px;font-weight:700;margin:14px 0}input,textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;outline:none;background:#fff;color:var(--ink)}input:focus,textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px #6a4df01f}.primary{width:100%;border:0;color:#fff;background:var(--grad);padding:13px;border-radius:12px;font-weight:800;cursor:pointer;margin-top:6px}.error{min-height:20px;color:#d3445b;font-size:13px}.app{height:100vh;display:grid;grid-template-columns:320px 1fr;overflow:hidden}.sidebar{background:#fff;border-right:1px solid var(--line);padding:18px 14px;overflow-y:auto}.brand-row{display:flex;align-items:center;gap:11px;padding:0 6px 17px;border-bottom:1px solid var(--line)}.brand-row b{font-size:19px}.brand-row .icon-btn{margin-left:auto}.icon-btn{border:0;background:transparent;cursor:pointer;font-size:20px;color:var(--muted);border-radius:9px;padding:5px 8px}.icon-btn:hover{background:var(--bg)}.me{display:flex;align-items:center;gap:12px;padding:18px 6px}.me small{display:block;color:var(--green);margin-top:3px}.avatar-button{width:48px;height:48px;flex:0 0 auto;border:0;border-radius:50%;padding:0;position:relative;cursor:pointer;background:#ece9ff}.avatar-button .camera{position:absolute;right:-3px;bottom:-3px;font-size:12px;background:#fff;border-radius:50%;padding:3px;box-shadow:0 2px 8px #0002}.avatar{width:100%;height:100%;display:grid;place-items:center;border-radius:50%;object-fit:cover;background:#ece9ff;color:var(--purple);font-weight:900}.section-title{display:flex;align-items:center;justify-content:space-between;padding:11px 8px 6px;font-size:11px;font-weight:900;letter-spacing:.08em;color:var(--muted)}.list-item{width:100%;border:0;background:transparent;display:flex;align-items:center;gap:11px;text-align:left;padding:10px;border-radius:13px;cursor:pointer;color:var(--ink);margin:2px 0}.list-item:hover,.list-item.active{background:#f0ebff}.list-item .avatar-wrap{width:38px;height:38px;flex:0 0 auto;position:relative}.presence{position:absolute;width:10px;height:10px;background:#b9bcc8;border:2px solid #fff;border-radius:50%;right:0;bottom:0}.presence.online{background:var(--green)}.list-item .main{min-width:0;flex:1}.list-item b,.list-item small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-item small{color:var(--muted);font-size:12px;margin-top:2px}.room-icon{width:38px;height:38px;border-radius:12px;background:#ece9ff;display:grid;place-items:center;color:var(--purple);font-weight:900}.chat{min-width:0;display:flex;flex-direction:column;background:#fbfbfd}.chat-head{height:76px;flex:0 0 auto;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px;gap:8px}.chat-head h2{font-size:17px;margin:0}.chat-head small{color:var(--muted)}.lobby{flex:1;overflow-y:auto;padding:34px 20px 30px;text-align:center;color:var(--muted)}.lobby h2{color:var(--ink);margin:0 0 6px;font-size:24px}.lobby-sub{margin:0 0 26px}.lobby-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;max-width:720px;margin:0 auto;text-align:left}.lobby-block{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 14px 8px;box-shadow:0 6px 22px #20233a08}.messages{flex:1;overflow-y:auto;padding:24px 7%;display:flex;flex-direction:column;gap:10px}.message{display:flex;align-items:flex-end;gap:8px;max-width:min(74%,680px)}.message.own{align-self:flex-end;flex-direction:row-reverse}.message .mini{width:30px;height:30px;flex:0 0 auto}.bubble{background:#fff;border:1px solid var(--line);border-radius:17px 17px 17px 5px;padding:9px 12px;box-shadow:0 3px 12px #20233a08;white-space:pre-wrap;overflow-wrap:anywhere}.own .bubble{background:var(--grad);color:#fff;border-color:transparent;border-radius:17px 17px 5px 17px}.bubble .sender{font-size:11px;color:var(--purple);font-weight:800;margin-bottom:3px}.own .bubble .sender{color:#ddd8ff}.bubble time{font-size:10px;opacity:.6;margin-left:8px;white-space:nowrap}.composer{position:relative;display:flex;align-items:flex-end;gap:8px;padding:13px 5%;background:#fff;border-top:1px solid var(--line)}.composer textarea{resize:none;max-height:120px;min-height:44px}.send{width:44px;height:44px;flex:0 0 auto;border:0;border-radius:13px;background:var(--grad);color:#fff;font-size:20px;cursor:pointer}.emoji-panel{position:absolute;left:5%;bottom:70px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:10px;width:260px;box-shadow:0 18px 45px #20233a25;display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.emoji-panel button{border:0;background:transparent;font-size:22px;cursor:pointer;padding:4px;border-radius:7px}.emoji-panel button:hover{background:var(--bg)}.toast{position:fixed;z-index:20;left:50%;bottom:24px;transform:translateX(-50%);background:#20233a;color:#fff;padding:11px 16px;border-radius:11px;box-shadow:0 8px 30px #0003}.mobile{display:none}@media(max-width:760px){.app{grid-template-columns:1fr}.sidebar{position:fixed;z-index:10;inset:0 auto 0 0;width:min(88vw,320px);transform:translateX(-105%);transition:.2s;box-shadow:14px 0 35px #0002}.sidebar.open{transform:none}.mobile{display:block}.chat-head{padding:0 13px}.messages{padding:18px 12px}.message{max-width:88%}.composer{padding:10px}.emoji-panel{left:10px}.auth-card{padding:28px 22px}}

/* === Secret Room v2 === */
.search{margin:0 0 8px;padding:9px 12px;border-radius:10px;font-size:13px;background:var(--bg)}
.empty-note{padding:10px;color:var(--muted);font-size:13px}
.typing{flex:0 0 auto;padding:5px 7%;font-size:12px;font-style:italic;color:var(--purple);background:#fbfbfd;min-height:20px}
.bubble-wrap{display:flex;flex-direction:column;min-width:0}
.message.own .bubble-wrap{align-items:flex-end}
.bubble .meta{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:4px;font-size:10px;opacity:.7}
.bubble time{margin-left:0}
.bubble .edited{font-style:italic}
.bubble .seen{font-weight:800}
.deleted-note{font-style:italic;opacity:.75}
.msg-photo{max-width:min(280px,62vw);width:100%;border-radius:12px;display:block;cursor:pointer}
.bubble audio{width:230px;max-width:62vw;height:36px;display:block}
.reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:1px 8px;font-size:12px;line-height:1.7;cursor:pointer;color:var(--ink)}
.chip.mine{background:#efe9ff;border-color:var(--purple);color:var(--purple);font-weight:800}
.msg-actions{display:flex;gap:3px;margin-top:3px;opacity:0;transition:opacity .15s}
.message:hover .msg-actions,.message:focus-within .msg-actions{opacity:1}
.msg-actions button{border:1px solid var(--line);background:#fff;border-radius:8px;font-size:12px;padding:2px 7px;cursor:pointer;color:var(--muted)}
.msg-actions button:hover{color:var(--purple);border-color:var(--purple)}
@media(hover:none){.msg-actions{opacity:.6}}
.reaction-picker{position:fixed;z-index:40;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 9px;box-shadow:0 14px 38px #23203830;display:flex;gap:3px}
.reaction-picker button{border:0;background:transparent;font-size:21px;cursor:pointer;padding:3px;border-radius:8px;line-height:1}
.reaction-picker button:hover{background:var(--bg);transform:scale(1.15)}
.notice-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 5%;background:#efe9ff;color:var(--purple);font-size:13px;font-weight:600;border-top:1px solid var(--line)}
.notice-bar button{border:1px solid var(--purple);background:#fff;color:var(--purple);border-radius:8px;padding:4px 10px;cursor:pointer;font-weight:700}
.rec-dot{color:#e5484d;animation:recpulse 1s infinite}
@keyframes recpulse{50%{opacity:.2}}
#micButton.recording{background:#ffe9ea;border-radius:10px}
#soundToggle{margin-left:auto}
.brand-row #logout{margin-left:0}
.lobby .brand-mark{margin:0 auto 14px}
.brand-row .brand-mark,.brand-row b{cursor:pointer}

.remove-contact{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:6px 8px;border-radius:9px;flex:0 0 auto}
.remove-contact:hover{background:#fdeef1;color:#d3445b}

/* === Secret Room 2.1: colores presentes, iconos e identidad propia === */
.ic{width:22px;height:22px;display:block}
.ic-xs{width:13px;height:13px}
.icon-btn{display:inline-grid;place-items:center}
.sidebar{background:linear-gradient(168deg,#6a4df0 0%,#8457f2 55%,#a259f5 100%);border-right:0;color:#fff;display:flex;flex-direction:column;box-shadow:8px 0 30px #4d2fb31f}
.sidebar .brand-row{border-bottom-color:rgba(255,255,255,.22)}
.sidebar .brand-row b{color:#fff}
.sidebar .icon-btn{color:rgba(255,255,255,.88)}
.sidebar .icon-btn:hover{background:rgba(255,255,255,.16)}
.sidebar .me small{color:#93f2c6}
.sidebar .section-title{color:rgba(255,255,255,.78)}
.sidebar .search{background:rgba(255,255,255,.16);border-color:transparent;color:#fff}
.sidebar .search::placeholder{color:rgba(255,255,255,.62)}
.sidebar .search:focus{border-color:rgba(255,255,255,.65);box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.sidebar .list-item{color:#fff}
.sidebar .list-item:hover,.sidebar .list-item.active{background:rgba(255,255,255,.18)}
.sidebar .list-item small{color:rgba(255,255,255,.72)}
.sidebar .room-icon{background:rgba(255,255,255,.2);color:#fff}
.sidebar .empty-note{color:rgba(255,255,255,.75)}
.sidebar .presence{border-color:#8b63f3}
.sidebar .remove-contact{color:rgba(255,255,255,.65)}
.sidebar .remove-contact:hover{background:rgba(255,255,255,.18);color:#fff}
.sidebar .avatar-button{background:rgba(255,255,255,.25)}
.sidebar .avatar{background:#efe9ff}
.spacer{flex:1 1 auto;min-height:16px}
.avatar-button .camera{background:var(--grad);color:#fff;width:19px;height:19px;display:grid;place-items:center;padding:0}
.side-action{width:100%;display:flex;align-items:center;gap:10px;border:0;background:rgba(255,255,255,.13);color:#fff;font-weight:700;padding:11px 12px;border-radius:13px;cursor:pointer;margin:0 0 10px}
.side-action:hover{background:rgba(255,255,255,.22)}
.logout-bar{width:100%;display:flex;align-items:center;gap:10px;border:0;background:rgba(255,255,255,.13);color:#fff;font-weight:800;font-size:15px;padding:12px;border-radius:13px;cursor:pointer}
.logout-bar:hover{background:rgba(255,80,110,.35)}
.chat{background:linear-gradient(168deg,#f7f3ff 0%,#efeafd 55%,#eaf1ff 100%)}
.chat-head .icon-btn{color:var(--purple)}
.messages{background:transparent}
.typing{background:transparent}
.lobby{background:transparent}
.inline-form{display:flex;flex-direction:column;gap:8px;margin:0 0 10px;padding:10px;border-radius:14px;background:rgba(255,255,255,.15)}
.inline-form input{background:#fff}
.inline-actions{display:flex;gap:8px}
.mini-primary{border:0;border-radius:10px;padding:9px 14px;background:#fff;color:var(--purple);font-weight:800;cursor:pointer;flex:1}
.mini-ghost{border:1px solid rgba(255,255,255,.55);background:transparent;color:#fff;border-radius:10px;padding:9px 12px;font-weight:700;cursor:pointer}
.notice-bar .mini-primary{background:var(--grad);color:#fff;flex:0 0 auto}
#memberBar input{flex:1;width:auto}
.mic-btn{width:46px;height:46px;flex:0 0 auto;border:0;border-radius:50%;background:var(--grad);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 16px #6a4df055;padding:0}
.mic-btn .mic-icon{width:27px;height:27px;display:block}
.mic-btn.recording{animation:micpulse 1.1s ease-out infinite}
@keyframes micpulse{0%{box-shadow:0 0 0 0 rgba(106,77,240,.45)}70%{box-shadow:0 0 0 13px rgba(106,77,240,0)}100%{box-shadow:0 0 0 0 rgba(106,77,240,0)}}
.send{display:grid;place-items:center}
.send .ic{width:21px;height:21px;margin-left:-2px}
.voice-bar{gap:12px;background:#efe9ff}
.voice-play{width:38px;height:38px;flex:0 0 auto;border:0;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 5px 14px #6a4df04d}
.voice-play .ic{width:18px;height:18px}
.voice-info{font-weight:800;white-space:nowrap}
.voice-hint{margin-left:auto;opacity:.7;font-weight:500}
.forgot-note{margin:16px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.modal-overlay{position:fixed;inset:0;z-index:60;background:rgba(24,18,52,.52);display:grid;place-items:center;padding:18px}
.modal-card{background:#fff;border-radius:22px;padding:22px;width:min(470px,100%);max-height:86vh;overflow-y:auto;box-shadow:0 30px 80px rgba(10,5,40,.4)}
.modal-head{display:flex;align-items:center;justify-content:space-between}
.modal-head h3{margin:0;font-size:19px}
.modal-head .icon-btn{color:var(--muted)}
.modal-sub{color:var(--muted);font-size:13px;margin:6px 0 8px;line-height:1.5}
.admin-user{display:flex;align-items:center;gap:11px;padding:11px 2px;border-top:1px solid var(--line)}
.admin-user .au-avatar{width:38px;height:38px;flex:0 0 auto}
.admin-user .main{flex:1;min-width:0}
.admin-user .main b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-user .main small{color:var(--muted)}
.admin-badge{font-size:10px;font-weight:900;letter-spacing:.05em;color:var(--purple);background:#efe9ff;border-radius:999px;padding:2px 8px;vertical-align:2px;margin-left:6px}
.reset-btn{border:1px solid var(--purple);color:var(--purple);background:#fff;border-radius:9px;padding:7px 11px;font-weight:700;cursor:pointer;flex:0 0 auto}
.reset-btn:hover{background:#efe9ff}
.reset-form{display:flex;gap:8px;padding:2px 2px 13px 49px}
.reset-form input{flex:1;min-width:0}
.reset-form .go{border:0;border-radius:10px;padding:9px 13px;background:var(--grad);color:#fff;font-weight:800;cursor:pointer}
.reset-form .back{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:10px;padding:9px 12px;font-weight:700;cursor:pointer}
@media(max-width:760px){.voice-hint{display:none}.voice-info{font-size:12px}}
.msg-actions button{display:grid;place-items:center;padding:4px 6px}
.msg-actions .ic{width:15px;height:15px}
.back-pill{display:inline-flex;align-items:center;gap:5px;border:0;background:#efe9ff;color:var(--purple);font-weight:800;font-size:14px;padding:8px 14px 8px 10px;border-radius:999px;cursor:pointer;flex:0 0 auto}
.back-pill:hover{background:#e2d9ff}
.back-pill .ic{width:18px;height:18px}
.member-pick{display:flex;flex-direction:column;gap:4px;max-height:170px;overflow-y:auto}
.member-pick-label{font-size:12px;font-weight:700;color:rgba(255,255,255,.85)}
.member-pick-row{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.13);border-radius:9px;padding:7px 10px;cursor:pointer;font-size:14px;margin:0}
.member-pick-row input{width:17px;height:17px;accent-color:#fff;flex:0 0 auto;margin:0}
.support-avatar{background:var(--grad)!important;color:#fff}
.support-avatar .logo-icon{width:58%;height:58%;display:block}

/* === 2.1.3: la barra de escribir no se pelea con el navegador del teléfono === */
html,body{height:100%;overscroll-behavior:none;overflow:hidden}
.app{height:100vh;height:100dvh}
/* 2.1.4: la app va FIJA a la pantalla: el documento nunca se desplaza y el
   encabezado (con el botón Inicio) no se puede perder por arriba en el iPhone. */
.app{position:fixed;inset:0;height:auto}
/* 2.1.5: fondo oscuro tras el menú móvil: tocar fuera del menú lo cierra. */
.backdrop{position:fixed;inset:0;z-index:9;background:rgba(24,16,54,.45)}
@media(min-width:761px){.backdrop{display:none!important}}
/* 2.1.7: la lista de mensajes se desplaza POR DENTRO. Sin min-height:0, en los
   chats largos la lista crece más que la pantalla, empuja el encabezado fuera
   y no deja arrastrar hasta el principio de la conversación. */
.chat{min-height:0}
.sidebar{min-height:0}
.messages{min-height:0;-webkit-overflow-scrolling:touch}
.lobby{min-height:0}
/* 2.1.8: confirmaciones integradas (nada de ventanas del navegador). */
.confirm-overlay{z-index:70}
.confirm-card{width:min(380px,100%);padding:24px}
.confirm-text{font-size:15.5px;line-height:1.55;margin:0 0 20px;color:var(--ink)}
.confirm-actions{display:flex;gap:10px;justify-content:flex-end}
.ghost-btn{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:11px;padding:10px 16px;font-weight:700;cursor:pointer}
.danger-btn{border:0;background:#e5484d;color:#fff;border-radius:11px;padding:10px 18px;font-weight:800;cursor:pointer}
.danger-btn:hover{background:#d13438}
/* 2.1.9: el formulario de agregar contacto vive dentro de la antesala. */
.lobby-block .inline-form{background:#f6f5fc;margin-top:2px}
/* 2.2: panel de configuración del usuario. */
.settings-card{max-height:88vh;overflow-y:auto}
.settings-block{border-top:1px solid var(--line);padding:16px 0 4px;margin-top:14px}
.settings-block h4{margin:0 0 10px;font-size:14px}
.settings-note{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 12px}
.settings-form{display:flex;flex-direction:column;gap:9px;margin-bottom:10px}
.settings-form .mini-primary,.settings-form .danger-btn{align-self:flex-start}
.danger-block{background:#fdf1f1;border:1px solid #f3d2d2;border-radius:14px;padding:16px 14px 8px}
.danger-block h4{color:#b3261e}
.auth-shell{min-height:100vh;min-height:100dvh}
input,textarea{font-size:16px}
.composer{padding-bottom:calc(13px + env(safe-area-inset-bottom))}
.toast{bottom:calc(24px + env(safe-area-inset-bottom))}
@media(max-width:760px){.composer{padding-bottom:calc(10px + env(safe-area-inset-bottom))}}