/* ===========================================================================
   DiscoBot — interfaz
   Los selectores usan #dc-chat-panel / #dc-btn-chat + clase para ganarle por
   especificidad a los estilos antiguos incrustados en cada HTML, sin depender
   del orden en que se carguen.
   =========================================================================== */

/* ---------- Botón flotante ---------- */
#dc-btn-chat.dc-float-btn {
  width: 64px;
  height: 64px;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  padding: 0;
}
#dc-btn-chat.dc-float-btn::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(31, 144, 207, .45), transparent 68%);
  animation: dc-halo 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes dc-halo {
  0%, 100% { transform: scale(.9);  opacity: .55; }
  50%      { transform: scale(1.12); opacity: .95; }
}
#dc-btn-chat.dc-float-btn .dc-chat-badge {
  position: absolute;
  top: -2px;
  right: -6px;
  background: linear-gradient(135deg, #4CD674, #1fa85a);
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .06em;
  font-family: 'Inter', sans-serif;
  padding: 2px 7px;
  border-radius: 999px;
  border: 2px solid #0f1830;
  box-shadow: 0 2px 10px rgba(76, 214, 116, .5);
}

/* ---------- Panel ---------- */
#dc-chat-panel.dc-chat-panel {
  width: min(392px, 94vw);
  max-height: min(640px, 86vh);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(165deg, #101a33 0%, #16223f 55%, #101a33 100%);
  border: 1px solid rgba(120, 180, 235, .22);
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, .65),
    0 0 0 1px rgba(31, 144, 207, .10),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}
/* retícula tenue de fondo: da la textura "consola" */
#dc-chat-panel.dc-chat-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(120, 180, 235, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 180, 235, .05) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
  z-index: 0;
}
#dc-chat-panel.dc-chat-panel > * { position: relative; z-index: 1; }

/* ---------- Cabecera ---------- */
#dc-chat-panel .dc-chat-head {
  background: linear-gradient(120deg, rgba(31, 144, 207, .20), rgba(16, 26, 51, 0));
  border-bottom: 1px solid rgba(120, 180, 235, .16);
  padding: .95rem 1.15rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#dc-chat-panel .dc-chat-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(120, 180, 235, .35);
  background: rgba(31, 144, 207, .14);
  box-shadow: 0 0 0 3px rgba(31, 144, 207, .10), 0 0 18px rgba(31, 144, 207, .30);
  overflow: hidden;
}
#dc-chat-panel .dc-chat-head-name {
  color: #fff;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .01em;
}
#dc-chat-panel .dc-chat-head-sub {
  color: #9FC4E6;
  font-size: .72rem;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: .1rem;
}
#dc-chat-panel .dc-chat-head-sub::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #4CD674;
  box-shadow: 0 0 8px #4CD674;
  animation: dc-latido 1.8s ease-in-out infinite;
}
@keyframes dc-latido {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .45; transform: scale(1.35); }
}
#dc-chat-panel .dc-chat-close { color: rgba(255, 255, 255, .55); }
#dc-chat-panel .dc-chat-close:hover { color: #fff; }

/* etiqueta "IA" junto al nombre */
#dc-chat-panel .dc-tag-ia {
  display: inline-block;
  margin-left: .45rem;
  padding: .08rem .42rem;
  border-radius: 5px;
  font-family: 'Inter', sans-serif;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: #a9d6f2;
  background: rgba(31, 144, 207, .18);
  border: 1px solid rgba(120, 180, 235, .32);
  vertical-align: middle;
}

/* ---------- Mensajes ---------- */
#dc-chat-panel .dc-chat-msgs {
  background: transparent;
  padding: 1.1rem .95rem;
  gap: .7rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 180, 235, .35) transparent;
}
#dc-chat-panel .dc-chat-msgs::-webkit-scrollbar { width: 6px; }
#dc-chat-panel .dc-chat-msgs::-webkit-scrollbar-track { background: transparent; }
#dc-chat-panel .dc-chat-msgs::-webkit-scrollbar-thumb {
  background: rgba(120, 180, 235, .28);
  border-radius: 999px;
}
#dc-chat-panel .dc-chat-msgs::-webkit-scrollbar-thumb:hover { background: rgba(120, 180, 235, .5); }

#dc-chat-panel .dc-msg {
  max-width: 88%;
  padding: .72rem 1rem;
  font-size: .87rem;
  line-height: 1.62;
  border-radius: 16px;
  animation: dc-entra .32s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes dc-entra {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
#dc-chat-panel .dc-msg-bot {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(120, 180, 235, .18);
  color: #DCE8F5;
  border-bottom-left-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
#dc-chat-panel .dc-msg-bot strong { color: #fff; }
#dc-chat-panel .dc-msg-bot a { color: #7FC4EE; }
#dc-chat-panel .dc-msg-bot a:hover { color: #fff; }
#dc-chat-panel .dc-msg-user {
  background: linear-gradient(135deg, #1f90cf, #1565a0);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  border-bottom-right-radius: 5px;
  box-shadow: 0 4px 16px -4px rgba(31, 144, 207, .55);
}

/* hora bajo cada mensaje */
#dc-chat-panel .dc-hora {
  display: block;
  margin-top: .35rem;
  font-size: .62rem;
  letter-spacing: .04em;
  opacity: .45;
}

/* cursor del efecto de escritura */
#dc-chat-panel .dc-caret {
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 1px;
  background: #7FC4EE;
  vertical-align: -2px;
  animation: dc-parpadeo .9s steps(2, start) infinite;
}
@keyframes dc-parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ---------- Indicador de escritura ---------- */
#dc-chat-panel .dc-typing {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(120, 180, 235, .18);
  border-radius: 16px;
  border-bottom-left-radius: 5px;
  padding: .62rem .9rem;
}
#dc-chat-panel .dc-typing span {
  width: 6px;
  height: 6px;
  background: #7FC4EE;
  box-shadow: 0 0 7px rgba(127, 196, 238, .8);
}

/* ---------- Sugerencias ---------- */
#dc-chat-panel .dc-chips {
  background: transparent;
  border-top: 1px solid rgba(120, 180, 235, .12);
  padding: .6rem .95rem;
  min-height: 0;
  gap: .4rem;
}
#dc-chat-panel .dc-chip {
  background: rgba(31, 144, 207, .10);
  border: 1px solid rgba(120, 180, 235, .30);
  color: #BFDCF2;
  font-size: .76rem;
  font-weight: 600;
  border-radius: 999px;
  padding: .34rem .8rem;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
#dc-chat-panel .dc-chip:hover {
  background: #1f90cf;
  border-color: #1f90cf;
  color: #fff;
  transform: translateY(-1px);
}

/* ---------- Entrada ---------- */
#dc-chat-panel .dc-input-row {
  display: flex;
  gap: .55rem;
  padding: .7rem .8rem;
  background: rgba(8, 14, 30, .55);
  border-top: 1px solid rgba(120, 180, 235, .16);
  align-items: flex-end;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#dc-chat-panel .dc-input {
  flex: 1;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(120, 180, 235, .22);
  border-radius: 13px;
  padding: .62rem .9rem;
  color: #EAF2FA;
  font-family: 'Inter', sans-serif;
  font-size: .86rem;
  line-height: 1.45;
  resize: none;
  outline: none;
  max-height: 96px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
#dc-chat-panel .dc-input::placeholder { color: #7C93AF; }
#dc-chat-panel .dc-input:focus {
  border-color: #1f90cf;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 3px rgba(31, 144, 207, .18);
}
#dc-chat-panel .dc-send {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #1f90cf, #1565a0);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 14px -3px rgba(31, 144, 207, .65);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
#dc-chat-panel .dc-send:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
  box-shadow: 0 7px 20px -4px rgba(31, 144, 207, .8);
}
#dc-chat-panel .dc-send:active { transform: translateY(0); }
#dc-chat-panel .dc-send:disabled { opacity: .45; cursor: default; transform: none; }

/* ---------- Pie ---------- */
#dc-chat-panel .dc-chat-footer {
  background: transparent;
  border-top: 1px solid rgba(120, 180, 235, .10);
  color: #64809C;
  font-size: .64rem;
  letter-spacing: .05em;
  padding: .4rem 0 .55rem;
}

/* ---------- Accesibilidad / movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  #dc-chat-panel .dc-msg,
  #dc-btn-chat.dc-float-btn::before,
  #dc-chat-panel .dc-chat-head-sub::before,
  #dc-chat-panel .dc-caret { animation: none !important; }
}

@media (max-width: 480px) {
  #dc-chat-panel.dc-chat-panel { width: 94vw; right: 3vw; }
  #dc-chat-panel .dc-msg { max-width: 92%; }
}