/* Estilos del chat interno de Agendaxic (panel y mini-web) */

.chat-toggle {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(0,0,0,0.25); border: 1px solid rgba(212,175,55,0.18);
  border-radius: 10px; padding: 11px 12px; font-size: 13px; margin-bottom: 8px;
}
/* Es un <button> de verdad (se puede usar con el teclado y un lector de
   pantalla lo anuncia), asi que hay que quitarle el aspecto de boton. */
.chat-sw { width: 40px; height: 22px; border-radius: 999px; position: relative; flex: 0 0 auto; cursor: pointer; border: none; padding: 0; appearance: none; -webkit-appearance: none; }
.chat-sw:focus-visible { outline: 2px solid #d9b845; outline-offset: 2px; }
.chat-sw.on { background: #67c08a; }
.chat-sw.off { background: #3a352d; }
.chat-sw::after { content: ""; position: absolute; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s; }
.chat-sw.on::after { left: 20px; }
.chat-sw.off::after { left: 2px; }

/* Buzon de conversaciones */
.chat-conv {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.25); border: 1px solid rgba(212,175,55,0.18);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 7px; cursor: pointer;
}
.chat-conv:hover { border-color: rgba(212,175,55,0.4); }
.chat-conv .cv-nombre { font-size: 13px; font-weight: 600; color: #f5efe6; }
.chat-conv .cv-ultimo { font-size: 11.5px; color: #b9ab97; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.chat-conv .cv-tipo { font-size: 9.5px; color: #b9ab97; text-transform: uppercase; letter-spacing: .5px; }
.chat-conv .cv-badge { background: #d4af37; color: #1a1509; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 8px; flex: 0 0 auto; }

/* Vista de la conversacion */
.chat-mensajes {
  height: 300px; overflow-y: auto; padding: 6px 2px; display: flex; flex-direction: column;
  background: rgba(0,0,0,0.2); border-radius: 10px; margin-bottom: 8px;
}
.chat-msg {
  max-width: 80%; padding: 8px 11px; border-radius: 13px; font-size: 13px;
  margin: 4px 6px; line-height: 1.4; word-wrap: break-word;
}
.chat-msg.suyo { background: #221e19; border: 1px solid rgba(212,175,55,0.18); align-self: flex-start; border-top-left-radius: 4px; color: #f5efe6; }
.chat-msg.mio { background: rgba(212,175,55,0.18); border: 1px solid rgba(212,175,55,0.25); align-self: flex-end; border-top-right-radius: 4px; color: #f5efe6; }
.chat-hora { display: block; font-size: 9px; color: #b9ab97; margin-top: 3px; text-align: right; }

/* La barra de escribir. Ojo con dos cosas, que aqui se rompio una vez:
   - min-width: 0 en el campo. Sin eso, un <input> se niega a encogerse por
     debajo de su ancho "natural" (unos 170 px) y empuja al boton fuera de la
     pantalla. En un movil estrecho el boton Enviar se salia por la derecha.
   - box-sizing en los dos, porque este archivo se usa tambien en la mini-web,
     que no tiene la regla general del panel. */
.chat-barra {
  display: flex; gap: 7px; align-items: stretch; width: 100%;
}
.chat-input {
  flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(212,175,55,0.25);
  border-radius: 999px; padding: 10px 14px; font-size: 16px; color: #f5efe6; font-family: inherit;
}
.chat-input:focus { outline: none; border-color: rgba(212,175,55,0.55); }
.chat-enviar {
  flex: 0 0 auto; white-space: nowrap; box-sizing: border-box;
  background: linear-gradient(135deg,#d4af37,#b7902c); color: #1a1509; font-weight: 700;
  border: none; border-radius: 999px; padding: 10px 18px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.chat-enviar:disabled { opacity: .6; cursor: default; }

/* En pantallas muy estrechas (los Samsung pequenos y los moviles plegados) el
   boton se aprieta un poco mas, pero nunca se sale. */
@media (max-width: 380px) {
  .chat-barra { gap: 5px; }
  .chat-input { padding: 9px 12px; }
  .chat-enviar { padding: 9px 13px; font-size: 12.5px; }
}

.chat-volver {
  background: transparent; border: none; color: #d4af37; font-size: 13px; font-weight: 600;
  cursor: pointer; padding: 4px 0; margin-bottom: 8px; font-family: inherit;
}
.chat-vacio { font-size: 12.5px; color: #b9ab97; text-align: center; padding: 18px 0; }

/* Boton "Escribeme una duda" en la mini-web */
.btn-consulta {
  width: 100%; background: transparent; border: 1px solid #d4af37; color: #e8c56a;
  font-weight: 600; font-size: 14px; border-radius: 12px; padding: 12px; cursor: pointer;
  font-family: inherit;
}
.btn-consulta:hover { background: rgba(212,175,55,0.12); }

.acx-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.72); align-items: center; justify-content: center; padding: 16px;
}
.acx-modal {
  width: 100%; max-width: 380px; box-sizing: border-box; overflow: hidden;
  background: #1b1815; border: 1px solid rgba(212,175,55,0.25);
  border-radius: 16px; padding: 20px; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
/* Nada de lo que va dentro de la ventana del chat puede salirse de ella. */
.acx-modal * { max-width: 100%; box-sizing: border-box; }
.acx-x { position: absolute; top: 10px; right: 12px; background: transparent; border: none; color: #b9ab97; font-size: 18px; cursor: pointer; }
.acx-tit { color: #f5efe6; font-size: 17px; margin: 0 0 12px; }
.acx-input {
  width: 100%; background: rgba(0,0,0,0.3); border: 1px solid rgba(212,175,55,0.25);
  border-radius: 9px; padding: 11px 12px; font-size: 14px; color: #f5efe6; margin-bottom: 9px; font-family: inherit;
}
.acx-input:focus { outline: none; border-color: rgba(212,175,55,0.55); }
.acx-btn {
  width: 100%; background: linear-gradient(135deg,#d4af37,#b7902c); color: #1a1509; font-weight: 700;
  border: none; border-radius: 9px; padding: 11px; font-size: 14px; cursor: pointer; margin-bottom: 9px; font-family: inherit;
}
.acx-btn.sec { background: transparent; border: 1px solid rgba(212,175,55,0.5); color: #e8c56a; font-weight: 600; }
.acx-cambio { font-size: 12.5px; color: #b9ab97; text-align: center; margin: 4px 0 0; }
.acx-cambio a { color: #e8c56a; cursor: pointer; text-decoration: underline; }
.acx-msg { font-size: 12.5px; margin-bottom: 8px; min-height: 16px; }
.acx-msg.ok { color: #67c08a; }
.acx-msg.err { color: #e08585; }
.chat-acciones { display: flex; gap: 8px; margin-top: 10px; }
.chat-accion {
  flex: 1; background: transparent; border: 1px solid rgba(212,175,55,0.4); color: #e8c56a;
  border-radius: 9px; padding: 9px; font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.chat-accion:hover { background: rgba(212,175,55,0.12); }
.chat-accion.borrar { border-color: rgba(224,133,133,0.5); color: #e08585; }
.chat-accion.borrar:hover { background: rgba(224,133,133,0.12); }

/* ── LAS FOTOS DEL CHAT ── */
/* Las miniaturas dentro de un mensaje. Nunca mas de 220 px, para que una foto
   apaisada no ensanche la ventana del chat en un movil. */
.chat-fotos { display: block; margin-bottom: 5px; }
.chat-foto {
  display: block; max-width: 220px; max-height: 220px; width: auto; height: auto;
  border-radius: 9px; margin-bottom: 4px; cursor: zoom-in;
}
/* Una foto que ya caduco (a los 90 dias se borran solas). */
.chat-foto-ida {
  display: inline-block; background: rgba(255,255,255,0.06); color: #b9ab97;
  border: 1px dashed rgba(212,175,55,0.25); border-radius: 9px;
  padding: 14px 16px; font-size: 11.5px; margin-bottom: 4px;
}

/* Las fotos elegidas pero todavia sin mandar. */
.chat-elegidas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
/* Sin esto, el display:flex de arriba gana al atributo hidden y la caja de las
   fotos elegidas se veria vacia todo el rato. */
.chat-elegidas[hidden] { display: none; }
.chat-elegida { position: relative; display: inline-block; }
.chat-elegida img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; display: block; }
.chat-quitar {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; line-height: 1;
  background: #1b1815; color: #e8c56a; border: 1px solid rgba(212,175,55,0.5);
  border-radius: 50%; font-size: 11px; cursor: pointer; padding: 0; font-family: inherit;
}

/* El boton de la camara, al lado del campo de escribir. */
.chat-foto-btn {
  flex: 0 0 auto; white-space: nowrap; box-sizing: border-box;
  background: transparent; border: 1px solid rgba(212,175,55,0.4); color: #e8c56a;
  border-radius: 999px; padding: 10px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.chat-foto-btn:hover { background: rgba(212,175,55,0.12); }
.chat-foto-btn:disabled { opacity: .6; cursor: default; }

/* La foto a tamano grande al pulsarla. Sin librerias de fuera. */
.chat-lupa {
  position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.9);
  display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out;
}
.chat-lupa img { max-width: 100%; max-height: 100%; border-radius: 10px; }

@media (max-width: 380px) {
  .chat-foto-btn { padding: 9px 11px; font-size: 12.5px; }
}

/* ── EL ASISTENTE DEL CHAT ── */
/* Sus mensajes van en otro color y con etiqueta, siempre: la clienta tiene
   derecho a saber que no le esta escribiendo una persona, y ella distingue de
   un vistazo lo suyo de lo del asistente. */
.chat-msg.asistente {
  background: rgba(90, 140, 190, 0.14);
  border: 1px solid rgba(120, 170, 220, 0.3);
}
.chat-marca {
  display: block; font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase;
  color: #9fc4e8; margin-bottom: 4px;
}
.acx-persona {
  width: 100%; background: transparent; border: 1px solid rgba(212,175,55,0.35);
  color: #e8c56a; border-radius: 9px; padding: 9px; font-size: 12.5px; cursor: pointer;
  font-family: inherit; margin-top: 10px;
}
.acx-persona:hover { background: rgba(212,175,55,0.1); }
.acx-persona:disabled { opacity: 0.5; cursor: default; }

/* El borrador que le deja el asistente, en el panel de ella. */
.asis-caja {
  border: 1px solid rgba(120, 170, 220, 0.32);
  background: rgba(90, 140, 190, 0.09);
  border-radius: 12px; padding: 13px; margin-bottom: 12px;
}
.asis-caja .asis-cab {
  font-size: 10.5px; letter-spacing: 0.6px; text-transform: uppercase;
  color: #9fc4e8; margin-bottom: 7px;
}
.asis-caja textarea {
  width: 100%; background: rgba(0,0,0,0.3); border: 1px solid rgba(212,175,55,0.2);
  border-radius: 9px; padding: 10px 12px; font-size: 13.5px; color: #f5efe6;
  font-family: inherit; resize: vertical;
}
.asis-caja .asis-botonera { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.asis-caja .asis-botonera button {
  flex: 1 1 auto; background: transparent; border: 1px solid rgba(212,175,55,0.4);
  color: #e8c56a; border-radius: 9px; padding: 9px; font-size: 12.5px; cursor: pointer;
  font-family: inherit;
}
.asis-caja .asis-botonera button.principal {
  background: linear-gradient(135deg,#d4af37,#b7902c); color: #1a1509; font-weight: 700; border: none;
}
.asis-caja .asis-botonera button:disabled { opacity: 0.5; cursor: default; }
.asis-pendientes {
  border: 1px solid rgba(232,164,74,0.35); background: rgba(232,164,74,0.08);
  border-radius: 12px; padding: 11px 14px; margin-bottom: 12px; font-size: 13px; color: #e8c56a;
}