:root{
  --ie-brand:#8f2f55;
  --ie-brand-dark:#671d3a;
  --ie-trust:#315c64;
  --ie-bg:#fff8f6;
  --ie-bg2:#f8eef2;
  --ie-card:#ffffff;
  --ie-soft:#fbedf2;
  --ie-line:#ead1dc;
  --ie-text:#24151b;
  --ie-muted:#765f6a;
  --ie-ok:#2e9f6f;
  --ie-danger:#c0395a;
  --ie-shadow:0 16px 42px rgba(49,92,100,.12);
  --ie-radius:22px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  overflow:hidden;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 10% 0%,rgba(143,47,85,.10),transparent 30%),
    linear-gradient(145deg,var(--ie-bg2),var(--ie-bg));
  color:var(--ie-text);
}
button,input,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit}

.ie-app{height:100dvh;min-height:100%;display:flex;flex-direction:column;overflow:hidden}
.ie-topbar{
  flex:0 0 auto;z-index:25;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--ie-line);
}
.ie-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ie-text);min-width:0}
.ie-logo{
  width:42px;height:42px;border-radius:15px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--ie-brand),var(--ie-trust));
  color:white;font-weight:950;letter-spacing:.4px;
  box-shadow:0 8px 22px rgba(49,92,100,.18);
}
.ie-brand strong{display:block;line-height:1.05;white-space:nowrap}
.ie-brand small{display:block;color:var(--ie-muted);font-size:12px;margin-top:2px}
.ie-top-right{display:flex;align-items:center;gap:8px}
.ie-users-btn,.ie-rules-pill,.ie-button,.ie-rules-link{
  border:0;background:var(--ie-brand);color:white;border-radius:999px;
  padding:10px 14px;text-decoration:none;font-weight:850;
  box-shadow:0 8px 18px rgba(143,47,85,.15);
}
.ie-rules-pill{background:white;color:var(--ie-brand);border:1px solid var(--ie-line);box-shadow:none}
.ie-users-btn span{
  display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:5px;
  background:var(--ie-danger);color:white;border-radius:999px;font-size:12px;font-weight:950;
}
.ie-users-btn span[hidden]{display:none}

.ie-layout{
  flex:1;min-height:0;width:min(1280px,100%);margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:10px;padding:10px;
  overflow:hidden;
}
.ie-chat-card,.ie-conversations,.ie-content{
  background:rgba(255,255,255,.96);
  border:1px solid var(--ie-line);
  border-radius:var(--ie-radius);
  box-shadow:var(--ie-shadow);
}
.ie-chat-card{height:100%;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.ie-room-head{
  flex:0 0 auto;padding:12px 14px 8px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  border-bottom:1px solid #f2e4ea;background:linear-gradient(180deg,#fff,#fff9fb);
}
.ie-room-head h1{font-size:22px;line-height:1.1;margin:0 0 5px;color:var(--ie-brand-dark)}
.ie-room-head p{margin:0;color:var(--ie-muted);font-size:13px;line-height:1.35}
.ie-status{flex:0 0 auto;font-size:12px;color:var(--ie-muted);padding:7px 14px;background:#fff;border-bottom:1px solid #f3e6eb}

.ie-messages{
  flex:1;min-height:0;overflow:auto;padding:4px 8px 10px;
  scroll-behavior:smooth;
  background:linear-gradient(180deg,#fff,#fff8fa);
}
.ie-messages-compact{display:block}
.ie-line-msg{border-bottom:1px solid #f3e7ec}
.ie-line-inner{
  display:flex;align-items:flex-start;gap:7px;
  padding:7px 6px;
  line-height:1.34;
  min-height:34px;
  font-size:15px;
}
.ie-line-msg:nth-child(even){background:rgba(248,234,240,.32)}
.ie-line-msg.is-mine{background:rgba(49,92,100,.055)}
.ie-line-msg.is-deleted{opacity:.68;font-style:italic}
.ie-line-user,.ie-line-user-static{
  flex:0 0 auto;
  max-width:230px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:900;color:var(--ie-brand);line-height:1.34;
}
.ie-line-user{
  appearance:none;border:0;background:transparent;padding:0;margin:0;
  text-align:left;text-decoration:none;
}
.ie-line-user:hover,.ie-line-user:focus{text-decoration:underline;text-underline-offset:3px;outline:none}
.ie-line-msg.is-mine .ie-line-user-static{color:var(--ie-trust)}
.ie-sep{flex:0 0 auto;color:#b28a9b;font-weight:800}
.ie-line-body{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ie-text)}

/* Anula estilos viejos si el navegador conservó clases anteriores. */
.ie-msg,.ie-message,.ie-bubble,.chat-bubble,.chat-message{max-width:none!important;border-radius:0!important;box-shadow:none!important}
.ie-msg-actions,.ie-message-actions,.chat-actions{display:none!important}

.ie-compose{
  flex:0 0 auto;
  display:flex;gap:8px;align-items:flex-end;
  padding:9px 10px max(9px,env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--ie-line);
}
.ie-compose textarea{
  flex:1;resize:none;max-height:110px;min-height:48px;
  border:1px solid var(--ie-line);border-radius:18px;
  padding:13px 14px;outline:none;background:#fff;color:var(--ie-text);
}
.ie-compose textarea:focus{border-color:#b86483;box-shadow:0 0 0 3px rgba(184,100,131,.18)}
.ie-compose button{background:var(--ie-brand);color:#fff;border:0;border-radius:17px;padding:13px 16px;font-weight:950;min-height:48px}

.ie-conversations{
  display:none;min-height:0;overflow:hidden;
  background:rgba(255,255,255,.92);
}
.ie-conversations.is-open{
  display:block;position:fixed;z-index:35;right:10px;left:10px;top:70px;bottom:84px;overflow:auto;
}
.ie-conversations-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 12px 8px;color:var(--ie-brand-dark);font-weight:950;
  border-bottom:1px solid #f0dce4;
}
.ie-side-close{width:34px;height:34px;border:1px solid var(--ie-line);border-radius:999px;background:#fff;color:var(--ie-brand);font-size:22px;line-height:1}
.ie-private-list{display:flex;flex-direction:column;gap:2px;padding:8px;overflow:auto;max-height:100%}
.ie-private-row{
  display:block;text-decoration:none;padding:11px 10px;border-radius:13px;
  color:var(--ie-text);font-weight:900;border:1px solid transparent;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ie-private-row:hover,.ie-private-row:focus{background:var(--ie-soft);border-color:var(--ie-line);outline:none}
.ie-private-row.is-active{background:linear-gradient(135deg,var(--ie-brand),var(--ie-trust));color:white}
.ie-unread{color:var(--ie-danger);font-weight:950}
.ie-private-row.is-active .ie-unread{color:white}
.ie-empty{margin:6px 4px;color:var(--ie-muted);font-size:13px;line-height:1.4;font-weight:600}

.ie-banner{
  flex:0 0 auto;
  margin:10px 10px 0;padding:11px 13px;border-radius:18px;
  background:linear-gradient(135deg,#fff2f6,#f8e7ee);
  border:1px solid #edccda;display:flex;gap:12px;align-items:center;
}
.ie-banner strong{display:block;color:var(--ie-brand-dark)}
.ie-banner p{margin:3px 0 0;color:#765b68;font-size:13px;line-height:1.35}
.ie-banner img{width:58px;height:58px;object-fit:cover;border-radius:14px}
.ie-banner a{margin-left:auto;background:white;color:var(--ie-brand);border:1px solid #e4c6d2;border-radius:999px;padding:8px 10px;text-decoration:none;font-weight:850}

.ie-modal{position:fixed;inset:0;z-index:50;background:rgba(36,21,27,.55);display:none;align-items:center;justify-content:center;padding:18px}
.ie-modal.is-open{display:flex}
.ie-modal-box{width:min(460px,100%);background:white;border-radius:24px;padding:22px;box-shadow:0 24px 70px #0004;border:1px solid var(--ie-line)}
.ie-modal-box h2{margin:0 0 8px;color:var(--ie-brand-dark)}
.ie-modal-box p{color:var(--ie-muted)}
.ie-modal-box input[type=text]{width:100%;border:1px solid var(--ie-line);border-radius:14px;padding:13px;margin:10px 0;outline:none}
.ie-modal-box input[type=text]:focus{border-color:#b86483;box-shadow:0 0 0 3px rgba(184,100,131,.18)}
.ie-modal-box button{width:100%;border:0;background:var(--ie-brand);color:white;border-radius:14px;padding:13px;font-weight:950}
.ie-check{display:flex;gap:10px;align-items:flex-start;margin:10px 0;color:#432331}.ie-check input{margin-top:3px}.ie-small{font-size:12px}

.ie-user-menu[hidden]{display:none}
.ie-user-menu{position:fixed;inset:0;z-index:70}
.ie-user-menu-backdrop{position:absolute;inset:0;background:rgba(36,21,27,.30)}
.ie-user-menu-sheet{position:absolute;left:12px;right:12px;bottom:12px;background:white;border:1px solid var(--ie-line);border-radius:24px;padding:16px;box-shadow:0 24px 70px #0004;display:grid;gap:10px}
.ie-user-menu-sheet strong{font-size:18px;color:var(--ie-brand);padding:4px 2px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ie-user-menu-sheet button{border:1px solid #e4c6d2;background:#fff7fa;color:var(--ie-brand);border-radius:16px;padding:13px 14px;text-align:left;font-weight:900}
.ie-user-menu-sheet button:first-of-type{background:var(--ie-brand);color:#fff;border-color:var(--ie-brand)}
.ie-user-menu-sheet button.is-soft{background:white;color:var(--ie-muted)}

.ie-toast{position:fixed;z-index:80;left:12px;right:12px;bottom:82px;background:#24151b;color:white;border-radius:16px;padding:13px 14px;box-shadow:var(--ie-shadow);text-align:center}
.ie-page{min-height:100%;padding:18px;overflow:auto}.ie-content{max-width:820px;margin:0 auto;padding:22px}.ie-content h1{margin-top:0;color:var(--ie-brand-dark)}.ie-content li{margin:8px 0;line-height:1.5}
.ie-leave-private{background:white;color:var(--ie-brand);border:1px solid var(--ie-line);box-shadow:none;white-space:nowrap}

@media(min-width:920px){
  .ie-layout{grid-template-columns:minmax(0,1fr) 280px;padding:12px 14px 14px}
  .ie-chat-card{height:100%}
  .ie-conversations{display:flex;flex-direction:column;height:100%;box-shadow:var(--ie-shadow)}
  .ie-conversations-head{padding:12px 12px 8px}
  .ie-private-list{flex:1;min-height:0}
  .ie-users-btn{display:none}
  .ie-side-close{display:none}
  .ie-toast{left:auto;right:24px;bottom:24px;max-width:420px}
  .ie-user-menu{pointer-events:none}
  .ie-user-menu-backdrop{display:none}
  .ie-user-menu-sheet{pointer-events:auto;left:auto;right:310px;bottom:86px;width:320px}
}
@media(max-width:919px){
  .ie-rules-pill{display:none}
  .ie-layout{padding-bottom:10px}
  .ie-chat-card{border-radius:18px}
  .ie-line-user,.ie-line-user-static{max-width:42vw}
}
@media(max-width:430px){
  .ie-brand small{display:none}
  .ie-logo{width:38px;height:38px;border-radius:14px}
  .ie-room-head{padding:10px 11px 7px}
  .ie-room-head h1{font-size:19px}
  .ie-room-head p{font-size:12px}
  .ie-status{padding:6px 11px}
  .ie-line-inner{gap:5px;padding:7px 3px;font-size:14px}
  .ie-line-user,.ie-line-user-static{max-width:38vw}
  .ie-compose{padding-left:8px;padding-right:8px}
  .ie-compose button{padding-left:13px;padding-right:13px}
}

/* v1.5: navegación fluida Chat General / privados */
.ie-general-chat-link{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:42px;padding:10px 12px;
  border-radius:15px;text-decoration:none;font-weight:950;
  color:var(--ie-brand);background:#fff;border:1px solid var(--ie-line);
}
.ie-general-chat-link:hover,.ie-general-chat-link:focus{background:var(--ie-soft);outline:none}
.ie-general-chat-link.is-active{background:linear-gradient(135deg,var(--ie-brand),var(--ie-trust));color:#fff;border-color:transparent}
.ie-conversations-head{align-items:center;gap:8px;padding:10px 10px 8px}
.ie-conversations-head .ie-side-close{flex:0 0 auto}
.ie-private-list{padding-top:6px}
.ie-private-row{font-size:15px;min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.ie-private-row .ie-unread{margin-left:auto}
.ie-leave-private.is-danger-soft{background:#fff;color:var(--ie-danger);border-color:#f0c8d3}
@media(min-width:920px){
  .ie-conversations-head{padding:10px 10px 8px}
}

/* v1.6: módulo autogestionable de banners/publicidad futura */
.ie-sidebar-promo{flex:0 0 auto;padding:8px 8px 10px;border-top:1px solid #f0dce4}
.ie-sidebar-promo .ie-banner{margin:0;padding:10px;border-radius:16px;box-shadow:none}
.ie-banner-html{display:block;overflow:hidden;text-align:center;background:#fff;border-style:dashed}
.ie-banner-html iframe,.ie-banner-html ins{max-width:100%}
@media(max-width:919px){.ie-sidebar-promo{display:none}}

/* v1.8: panel derecho combinado: Chat General + usuarios conectados + privados con no leídos */
.ie-side-list{display:flex;flex-direction:column;gap:3px;padding:8px;overflow:auto;min-height:0;flex:1}
.ie-side-row{
  width:100%;min-height:40px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 11px;border-radius:13px;
  border:1px solid transparent;background:transparent;
  color:var(--ie-text);font-weight:900;text-decoration:none;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ie-side-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ie-side-row:hover,.ie-side-row:focus{background:var(--ie-soft);border-color:var(--ie-line);outline:none}
.ie-side-row.has-unread{background:#fff3f7;border-color:#edccda;color:var(--ie-brand-dark)}
.ie-side-row.has-unread:first-child{order:-20;background:linear-gradient(135deg,var(--ie-brand),var(--ie-trust));color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(49,92,100,.12)}
.ie-side-row.has-unread:first-child .ie-unread{color:#fff;background:rgba(255,255,255,.18)}
.ie-online-row::before{content:'●';font-size:10px;color:var(--ie-ok);margin-right:2px;flex:0 0 auto}
.ie-online-row.is-mine-user{color:var(--ie-muted);font-weight:800}
.ie-online-row.is-mine-user::before{color:#b8a4ad}
.ie-unread{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--ie-danger);color:#fff;font-size:12px;font-weight:950;margin-left:auto}
@media(min-width:920px){.ie-private-list.ie-side-list{max-height:none}}

/* v1.9: panel derecho como lista de usuarios conectados */
.ie-users-btn{
  white-space:nowrap;
}
.ie-side-list{
  align-items:stretch;
}
.ie-side-row{
  justify-content:flex-start;
  text-align:left;
}
.ie-side-row span{
  text-align:left;
}
.ie-online-row{
  justify-content:flex-start !important;
}
.ie-online-row::before{
  margin-right:9px;
}
.ie-private-row{
  justify-content:space-between;
}
.ie-private-row span:first-child{
  text-align:left;
}
.ie-private-row .ie-unread{
  margin-left:8px;
}
.ie-online-row.is-mine-user{
  justify-content:flex-start !important;
}
@media(max-width:919px){
  .ie-conversations.is-open{
    top:64px;
  }
  .ie-side-row{
    min-height:46px;
    padding:12px 13px;
    font-size:16px;
  }
  .ie-private-row.has-unread{
    border-left:4px solid var(--ie-brand);
  }
}

/* v2.0: notificaciones privadas + iconos minimalistas */
.ie-notify-toggle{
  width:42px;height:42px;border:1px solid var(--ie-line);border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:var(--ie-muted);box-shadow:none;padding:0;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.ie-notify-toggle:hover,.ie-notify-toggle:focus{background:var(--ie-soft);color:var(--ie-brand);outline:none;transform:translateY(-1px)}
.ie-notify-toggle.is-on{color:var(--ie-brand);border-color:#e4c6d2;background:#fff7fa}
.ie-mini-icon{position:relative;display:inline-block;flex:0 0 auto;color:currentColor}
.ie-mini-bell{width:17px;height:17px;border:1.8px solid currentColor;border-radius:9px 9px 7px 7px;border-bottom-color:transparent}
.ie-mini-bell::before{content:'';position:absolute;left:50%;bottom:-3px;width:6px;height:3px;border-radius:0 0 6px 6px;background:currentColor;transform:translateX(-50%)}
.ie-mini-bell::after{content:'';position:absolute;left:50%;top:-4px;width:5px;height:5px;border-radius:999px;border:1.8px solid currentColor;border-bottom:0;transform:translateX(-50%)}
.ie-mini-users{width:18px;height:18px}
.ie-mini-users::before{content:'';position:absolute;left:6px;top:2px;width:6px;height:6px;border:1.8px solid currentColor;border-radius:999px;background:transparent}
.ie-mini-users::after{content:'';position:absolute;left:3px;bottom:2px;width:12px;height:7px;border:1.8px solid currentColor;border-radius:9px 9px 4px 4px;border-top-width:1.8px;background:transparent}
.ie-users-btn{display:inline-flex;align-items:center;gap:7px}
.ie-users-btn.has-unread{box-shadow:0 10px 24px rgba(143,47,85,.22)}
.ie-users-label{line-height:1}

.ie-side-main{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%}
.ie-row-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.ie-row-status{width:8px;height:8px;border-radius:999px;background:var(--ie-ok);box-shadow:0 0 0 4px rgba(46,159,111,.10);flex:0 0 auto}
.ie-row-icon{position:relative;display:inline-block;flex:0 0 auto;color:currentColor}
.ie-row-message{width:17px;height:14px;border:1.7px solid currentColor;border-radius:5px;opacity:.85}
.ie-row-message::after{content:'';position:absolute;left:3px;bottom:-4px;width:6px;height:6px;border-left:1.7px solid currentColor;border-bottom:1.7px solid currentColor;background:transparent;transform:skew(-18deg) rotate(-8deg)}
.ie-online-row::before{content:none!important}
.ie-online-row.is-mine-user .ie-row-status{background:#b8a4ad;box-shadow:0 0 0 4px rgba(184,164,173,.12)}
.ie-side-row.has-unread .ie-row-message{opacity:1}
.ie-side-row.has-unread:first-child .ie-row-message{color:#fff}
.ie-private-row .ie-side-main{flex:1 1 auto}
.ie-private-row .ie-unread{flex:0 0 auto}
.ie-toast{display:flex;align-items:center;justify-content:center;gap:10px;line-height:1.25}
.ie-toast.is-private{background:linear-gradient(135deg,var(--ie-brand),var(--ie-trust));cursor:pointer;text-align:left}
.ie-toast-mini-icon{color:#fff;opacity:.95}
.ie-toast-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ie-toast-open{margin-left:auto;border:1px solid rgba(255,255,255,.40);border-radius:999px;padding:5px 9px;font-size:12px;font-weight:900;color:#fff;white-space:nowrap}
@media(max-width:430px){
  .ie-notify-toggle{width:40px;height:40px}
  .ie-users-btn{padding-left:12px;padding-right:12px}
  .ie-users-label{display:inline}
}
.ie-row-icon,.ie-row-status{overflow:visible!important;min-width:auto!important}

/* v2.1 - Avisos suaves y corrección de toast oculto en móvil */
.ie-toast[hidden]{
  display:none !important;
}
.ie-toast{
  left:16px;
  right:16px;
  bottom:calc(88px + env(safe-area-inset-bottom, 0px));
  background:#fff8fb;
  color:#5f1836;
  border:1px solid #eed1dc;
  border-radius:16px;
  padding:11px 14px;
  min-height:auto;
  box-shadow:0 12px 28px rgba(95,24,54,.16);
  text-align:left;
  font-size:14px;
  font-weight:700;
  line-height:1.3;
  max-width:none;
}
.ie-toast::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--ie-brand);
  flex:0 0 auto;
  opacity:.75;
}
.ie-toast.is-private{
  background:linear-gradient(135deg,var(--ie-brand),var(--ie-trust));
  color:#fff;
  border-color:transparent;
  cursor:pointer;
}
.ie-toast.is-private::before{display:none}
.ie-toast.is-private .ie-toast-text{color:#fff}
.ie-toast.is-private .ie-toast-open{color:#fff}
.ie-toast-text{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(min-width:920px){
  .ie-toast{
    left:auto;
    right:24px;
    bottom:24px;
    width:auto;
    max-width:380px;
  }
}
@media(max-width:520px){
  .ie-toast{
    left:18px;
    right:18px;
    bottom:calc(86px + env(safe-area-inset-bottom, 0px));
    border-radius:14px;
    padding:10px 12px;
    font-size:13px;
  }
}

/* v2.7 - Branding final Intimo Encanto */
.ie-chat-brand{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0;
  text-decoration:none;
}
.ie-brand-mark{
  display:block;
  width:48px;
  height:36px;
  object-fit:contain;
  flex:0 0 auto;
  filter:drop-shadow(0 5px 12px rgba(80,35,55,.10));
}
.ie-chat-brand span{
  display:flex;
  flex-direction:column;
  line-height:1.08;
  min-width:0;
}
.ie-chat-brand strong{
  color:var(--ie-ink, #24151b);
  font-weight:950;
  white-space:nowrap;
}
.ie-chat-brand small{
  color:var(--ie-muted, #725d65);
  font-weight:800;
  white-space:nowrap;
}
@media(max-width:520px){
  .ie-brand-mark{width:46px;height:34px}
  .ie-chat-brand{gap:8px!important}
  .ie-chat-brand strong{font-size:16px}
  .ie-chat-brand small{font-size:11px}
}
@media(max-width:370px){
  .ie-chat-brand small{display:none}
  .ie-brand-mark{width:42px;height:32px}
}