/* =====================================================
   CHAT.CSS · CHAT GRUPO PREMIUM
===================================================== */

#view-chat{
  padding-top:4px;
  padding-bottom:120px;
}

/* CABECERA */
#view-chat .section-title{
  display:grid !important;
  grid-template-columns:62px 1fr !important;
  align-items:center !important;
  gap:16px !important;
  margin:4px 0 18px !important;
}

#view-chat .section-title > span{
  width:58px !important;
  height:58px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(22,55,69,.16) !important;
  box-shadow:0 12px 28px rgba(22,55,69,.12) !important;
}

#view-chat .section-title h2{
  font-family:"Caveat",cursive !important;
  font-size:clamp(3rem,5vw,4.4rem) !important;
  line-height:.9 !important;
  font-weight:700 !important;
  color:#123949 !important;
}

#view-chat .section-title p{
  font-family:"Inter",system-ui,sans-serif !important;
  color:#4f6670 !important;
}

/* WHATSAPP */
#view-chat .chat-whatsapp-card{
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 16px 36px rgba(22,55,69,.10) !important;
  border-radius:26px !important;
  padding:18px 20px !important;
}

#view-chat .chat-whatsapp-card h3,
#view-chat .chat-whatsapp-card strong{
  font-family:"Caveat",cursive !important;
  font-size:2rem !important;
  color:#123949 !important;
  line-height:1 !important;
}

#view-chat .chat-whatsapp-card p{
  font-family:"Inter",system-ui,sans-serif !important;
  color:#4f6670 !important;
}

#view-chat .chat-whatsapp-card a{
  background:linear-gradient(135deg,#18b86b,#12d276) !important;
  color:#fff !important;
  border-radius:999px !important;
  padding:12px 20px !important;
  font-family:"Inter",system-ui,sans-serif !important;
  font-weight:900 !important;
  box-shadow:0 12px 24px rgba(18,210,118,.22) !important;
}

/* BOTONES PARTICIPANTES */
#view-chat .chat-participants-control{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin:14px 0 !important;
}

#view-chat .small-btn{
  min-height:42px !important;
  padding:0 16px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.90) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  color:#123949 !important;
  font-family:"Inter",system-ui,sans-serif !important;
  font-weight:900 !important;
  box-shadow:0 10px 22px rgba(22,55,69,.08) !important;
}

#view-chat .small-btn.danger{
  color:#b94747 !important;
}

/* AVATARES */
#view-chat .chat-avatar-picker{
  border-radius:28px !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 16px 36px rgba(22,55,69,.10) !important;
  overflow:hidden !important;
  margin-bottom:18px !important;
}

#view-chat .chat-avatar-picker summary{
  padding:18px 20px !important;
  font-family:"Caveat",cursive !important;
  font-size:2rem !important;
  font-weight:700 !important;
  color:#123949 !important;
}

#view-chat .avatar-picker-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:14px !important;
  padding:0 20px 20px !important;
}

#view-chat .avatar-picker-grid label,
#view-chat .avatar-picker-grid .avatar-option{
  display:grid !important;
  grid-template-columns:1fr auto !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px !important;
  border-radius:22px !important;
  background:rgba(255,255,255,.84) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 10px 22px rgba(22,55,69,.07) !important;
  font-family:"Inter",system-ui,sans-serif !important;
  color:#123949 !important;
  font-weight:800 !important;
}

#view-chat .avatar-picker-grid select{
  width:74px !important;
  height:54px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#fffefb,#fff7e9) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  font-size:1.35rem !important;
}

/* CAJA CHAT */
#view-chat .chat-box{
  position:relative !important;
  min-height:360px !important;
  max-height:52vh !important;
  overflow-y:auto !important;
  padding:22px 18px !important;
  margin-bottom:14px !important;
  border-radius:30px !important;
  background:
    radial-gradient(circle at 12% 15%,rgba(15,91,115,.035),transparent 30%),
    radial-gradient(circle at 85% 75%,rgba(217,196,122,.07),transparent 34%),
    rgba(255,255,255,.84) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 18px 42px rgba(22,55,69,.12) !important;
  backdrop-filter:blur(10px) !important;
}

#view-chat .chat-box::before{
  content:"🏄  🐚  📷  🌊  🧭  🚐  ☀️  🐬";
  position:absolute;
  inset:auto 24px 24px auto;
  font-size:2.2rem;
  opacity:.055;
  pointer-events:none;
}

/* FILAS */
#view-chat .chat-row{
  display:flex !important;
  align-items:flex-end !important;
  gap:10px !important;
  margin-bottom:14px !important;
  animation:chatIn .22s ease both;
}

#view-chat .chat-row.me{
  flex-direction:row-reverse !important;
}

/* AVATAR MENSAJE */
#view-chat .chat-avatar{
  width:44px !important;
  height:44px !important;
  flex:0 0 44px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 8px 18px rgba(22,55,69,.10) !important;
  display:grid !important;
  place-items:center !important;
  font-size:1.35rem !important;
}

/* BURBUJAS */
#view-chat .chat-message{
  position:relative !important;
  max-width:76% !important;
  padding:12px 14px !important;
  border-radius:22px 22px 22px 8px !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(22,55,69,.12) !important;
  box-shadow:0 12px 24px rgba(22,55,69,.10) !important;
  font-family:"Inter",system-ui,sans-serif !important;
  color:#123949 !important;
}

#view-chat .chat-row.me .chat-message{
  border-radius:22px 22px 8px 22px !important;
  background:linear-gradient(145deg,#dff4f7,#c4e9ef) !important;
  border:1px solid rgba(15,91,115,.16) !important;
}

#view-chat .chat-author{
  font-family:"Inter",system-ui,sans-serif !important;
  color:#0f5b73 !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  letter-spacing:.04em !important;
  margin-bottom:4px !important;
}

#view-chat .chat-message p,
#view-chat .chat-message div{
  font-family:"Inter",system-ui,sans-serif !important;
}

#view-chat .chat-footer{
  display:flex !important;
  justify-content:flex-end !important;
  gap:8px !important;
  margin-top:6px !important;
}

#view-chat .chat-time{
  color:#6b7b82 !important;
  font-size:.68rem !important;
  font-weight:700 !important;
}

/* FORMULARIO */
#view-chat .chat-form{
  position:sticky !important;
  bottom:92px !important;
  z-index:30 !important;
  display:grid !important;
  grid-template-columns:190px 1fr 112px !important;
  gap:10px !important;
  padding:12px !important;
  border-radius:28px !important;
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 18px 42px rgba(22,55,69,.14) !important;
  backdrop-filter:blur(10px) !important;
}

#view-chat .chat-form select{
  height:50px !important;
  border-radius:20px !important;
  background:linear-gradient(180deg,#fffefb,#fff7e9) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  font-family:"Inter",system-ui,sans-serif !important;
  color:#123949 !important;
  font-weight:900 !important;
}

#view-chat .chat-input-wrap{
  height:50px !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:0 8px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#fffefb,#fff8ee) !important;
  border:1px solid rgba(22,55,69,.14) !important;
}

#view-chat .chat-input-wrap input{
  height:44px !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  font-family:"Inter",system-ui,sans-serif !important;
  font-size:.96rem !important;
  color:#123949 !important;
}

#view-chat .chat-tool-btn{
  width:40px !important;
  height:40px !important;
  border-radius:50% !important;
  border:none !important;
  background:rgba(15,91,115,.08) !important;
  display:grid !important;
  place-items:center !important;
  font-size:1.1rem !important;
}

#view-chat .chat-form > button{
  height:50px !important;
  border-radius:20px !important;
  background:linear-gradient(135deg,#123949,#0f5b73) !important;
  color:#fff8e8 !important;
  border:none !important;
  font-family:"Inter",system-ui,sans-serif !important;
  font-weight:900 !important;
}

/* TOAST */
#view-chat .chat-toast,
.chat-toast{
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 18px 42px rgba(22,55,69,.16) !important;
}

/* ANIMACIÓN */
@keyframes chatIn{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* MOBILE */
@media(max-width:900px){
  #view-chat .avatar-picker-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }

  #view-chat .chat-form{
    grid-template-columns:1fr !important;
  }

  #view-chat .chat-form select,
  #view-chat .chat-form > button{
    width:100% !important;
  }
}

@media(max-width:760px){
  #view-chat .section-title{
    grid-template-columns:52px 1fr !important;
  }

  #view-chat .section-title h2{
    font-size:2.6rem !important;
  }

  #view-chat .chat-whatsapp-card{
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  #view-chat .chat-whatsapp-card a{
    width:100% !important;
    text-align:center !important;
  }

  #view-chat .avatar-picker-grid{
    grid-template-columns:1fr !important;
  }

  #view-chat .chat-message{
    max-width:84% !important;
  }
}
/* AVATAR PICKER VISUAL FINAL */

#view-chat .avatar-picker-grid{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:16px !important;
}

#view-chat .avatar-person-card{
  padding:16px !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 12px 26px rgba(22,55,69,.08) !important;
}

#view-chat .avatar-person-head{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-bottom:12px !important;
}

#view-chat .avatar-current{
  width:46px !important;
  height:46px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 8px 18px rgba(22,55,69,.08) !important;
  font-size:1.45rem !important;
}

#view-chat .avatar-person-head strong{
  font-family:"Caveat",cursive !important;
  color:#123949 !important;
  font-size:1.8rem !important;
}

#view-chat .avatar-options-grid{
  display:grid !important;
  grid-template-columns:repeat(8,1fr) !important;
  gap:8px !important;
}

#view-chat .avatar-choice{
  height:42px !important;
  border-radius:14px !important;
  border:1px solid rgba(22,55,69,.13) !important;
  background:rgba(255,255,255,.84) !important;
  box-shadow:0 6px 14px rgba(22,55,69,.06) !important;
  font-size:1.25rem !important;
}

#view-chat .avatar-choice.active{
  background:linear-gradient(135deg,#123949,#0f5b73) !important;
  border-color:transparent !important;
  box-shadow:0 10px 22px rgba(22,55,69,.18) !important;
  transform:scale(1.04) !important;
}

@media(max-width:900px){
  #view-chat .avatar-picker-grid{
    grid-template-columns:1fr !important;
  }

  #view-chat .avatar-options-grid{
    grid-template-columns:repeat(6,1fr) !important;
  }
}

@media(max-width:760px){
  #view-chat .avatar-options-grid{
    grid-template-columns:repeat(5,1fr) !important;
  }
}