/* Chat real embebido en el recuadro "Agente Cerodos" (probar-cerodos).
   El SDK de Conversa (bloque al final del body) crea su panel como ventana
   flotante y lo agrega al final de <body> (#cw-widget-holder). El script de
   la página lo reubica dentro de #probar-chat-mount en vez de crear un
   segundo <iframe> aparte — evita las dos instancias compitiendo por la
   misma conversación.

   Solo desde 668px (arriba del punto en el que la propia hoja del SDK,
   id="cw-widget-styles", pasa el panel a pantalla completa): acá anulamos
   su position:fixed/ancho fijo para que ocupe el recuadro como contenido
   normal de la página en vez de una superposición. Todo con !important
   porque esa hoja también usa !important en position/width/height/bottom, y
   hay que igualar especificidad para ganarle.

   Por debajo de 668px NO tocamos el panel de Chatwoot a propósito: la
   primera versión de este arreglo forzaba el mismo recuadro chico también
   en mobile, y el panel terminaba con el alto y el ancho apretados contra
   la hoja nativa de Chatwoot para ese tamaño (pantalla completa,
   position:fixed) — el auto-scroll a los mensajes nuevos y el resize del
   propio widget están pensados para esa pantalla completa, no para un
   recuadro angosto, y peleaban entre sí: el contenido se corría y había
   que tocar "Ver nuevos mensajes" en cada respuesta. Dejando la hoja del
   SDK intacta en mobile, el chat abre a pantalla completa (comportamiento
   nativo de Chatwoot en ese ancho) en vez de adentro del mockup, y el
   scroll vuelve a ser el que Chatwoot ya probó para ese caso.

   En mobile el chat NO se abre solo (ver llevarAlRecuadro en el HTML):
   ocupa toda la pantalla, y abrirlo sin que la persona lo pida le impediría
   recorrer el resto de la página. Por eso #probar-chat-cta (el bloque
   "Tocá para escribirle al agente" + botón "Abrir el chat") se ve solo acá,
   y desaparece desde 668px, donde el chat embebido sigue abriéndose solo
   como siempre. Como se abre a pantalla completa y
   hideMessageBubble le saca a Chatwoot su único botón propio para cerrar,
   #probar-chat-cerrar (✕ fijo arriba a la derecha) es la única forma de
   volver a la página sin recargarla. Vive al final del body (junto al
   flotante de WhatsApp), no dentro de #probar-chat-mount: <main> tiene
   isolation:isolate, así que un z-index puesto adentro nunca le gana al
   header (position:sticky, z-index:100) sin importar qué tan alto sea — se
   probó primero adentro y el botón quedaba tapado por el header, sin poder
   tocarlo. Se muestra con este :has() mientras el panel esté abierto (sin
   la clase woot--hide que Chatwoot le saca y le pone solo) y se esconde el
   resto del tiempo — no hace falta escuchar ningún evento del widget para
   sincronizarlo. Oculto por completo arriba de 667px, igual que
   #probar-chat-cta: ahí el chat nunca pasa a pantalla completa (ver @media
   min-width:668px más abajo), así que ninguno de los dos tiene nada que
   hacer. Sin este display:none de base, ambos son <div>/<button> comunes
   (display por defecto) y quedaban visibles y superpuestos arriba del chat
   embebido en escritorio, tapándolo y comiéndose sus clicks. */
#probar-chat-cerrar,
#probar-chat-cta {
  display: none;
}

@media (max-width: 667px) {
  #probar-chat-mount {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
  }

  #probar-chat-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  #probar-chat-cta p {
    color: var(--muted);
    margin: 0;
  }

  body:has(#cw-widget-holder:not(.woot--hide)) #probar-chat-cta {
    display: none;
  }

  #probar-chat-cerrar {
    position: fixed;
    /* top lo termina de ajustar el script de esta página (bloque "CHAT
       WEB" en probar-cerodos/index.html) con la altura real del header:
       tiene que quedar debajo de la barra, no a la misma altura, porque
       ahí ya conviven el toggle de tema y el de menú. Este valor es solo
       un resguardo por si ese ajuste no llega a correr. */
    top: 84px;
    right: 12px;
    z-index: 2147483001;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    cursor: pointer;
  }

  body:has(#cw-widget-holder:not(.woot--hide)) #probar-chat-cerrar {
    display: flex;
  }
}

@media (min-width: 668px) {
  #probar-chat-mount {
    position: relative;
  }

  #probar-chat-mount #cw-widget-holder {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: clamp(420px, 64vh, 560px) !important;
    max-height: none !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    z-index: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #probar-chat-mount #cw-widget-holder iframe {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
  }
}

/* ---------- Marco del panel del agente (diseño v67/v68) ----------
   Superficie verde carbón, borde verde tenue, esquinas de 22px y cabecera
   integrada; el cuadro se mantiene oscuro en ambos temas (el resto de la
   página conserva el suyo). Es SOLO el marco que vive en nuestro documento:
   el interior del chat (burbujas, cabecera, campo de escritura) está dentro
   de un iframe de otro origen (conversa.cerodos.com.ar) y no se puede
   estilizar desde acá. Lo que sí se aplica al interior es el esquema oscuro
   que soporta el propio widget (darkMode:"dark" en chatwootSettings, en el
   script de esta página). Los selectores de la muestra del prototipo
   (.chat-sample-v67, .prototype-demo, #prototype-chat) no existen en el sitio. */
html[data-theme] body #agent-panel-v50 {
  background: transparent !important;
}

html[data-theme] body #agent-panel-v50 :is(.device-frame, .agente-vivo) {
  background: rgba(5, 25, 25, 0.97) !important;
  color: #edf5f2 !important;
  border-color: rgba(52, 211, 153, 0.35) !important;
  box-shadow: none !important;
}

html[data-theme] body #agent-panel-v50 .device-frame {
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme] body #agent-panel-v50 .device-frame__bar {
  background: rgba(0, 20, 19, 0.65) !important;
  color: #edf5f2 !important;
  border-color: #28433e !important;
  padding: 16px 22px;
}

html[data-theme] body #agent-panel-v50 .device-frame__title {
  color: #edf5f2 !important;
}

/* Texto del bloque «Tocá para escribirle al agente» (celular) sobre el fondo oscuro. */
html[data-theme] body #agent-panel-v50 #probar-chat-cta p {
  color: #e8f1ed !important;
}

/* Mientras el widget está en su vista de aviso "sin leer" (clase que pone el
   SDK) el panel se esconde sin sacarlo del flujo; el script de la página lo
   saca de ese modo en cuanto el SDK avisa (ver salirDeNoLeidos). */
#probar-chat-mount #cw-widget-holder.has-unread-view {
  visibility: hidden !important;
}