/* ═══════════════════════════════════════════════════════════
   chat-layout-patch.css — CapiEBAU
   FIX COMPLETO: layout Claude-style + mapas + rich content
   v20260423 — reemplaza versión anterior completamente
═══════════════════════════════════════════════════════════ */

/* ── 1. MENSAJES ASISTENTE: FULL-WIDTH ──────────────────────
   Anula el max-width:700px de app.css en .msg.assistant .msg-bub
   El texto dentro usa max-width:72ch para legibilidad óptima
   pero el CONTENEDOR ocupa todo el ancho disponible.
─────────────────────────────────────────────────────────── */
.msg.assistant {
  max-width: 100% !important;
  width: 100% !important;
  align-self: stretch !important;
}
.msg.assistant .msg-bub {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important; /* crítico: no recortar mapas/gráficas */
}

/* Texto dentro del bubble: legible sin ser demasiado ancho */
.msg.assistant .msg-bub > p,
.msg.assistant .msg-bub > ul,
.msg.assistant .msg-bub > ol,
.msg.assistant .msg-bub > blockquote {
  max-width: 72ch;
}

/* Mensajes de usuario: razonablemente acotados */
.msg.user {
  max-width: 75%;
}


/* ── 2. FIX CRÍTICO DEL MAPA LEAFLET ───────────────────────
   El bug: .leaflet-container dentro de .msg-bub no tiene
   dimensiones → Leaflet se inicializa con width/height = 0
   → se renderiza solo en la mitad izquierda / zona gris vacía.

   Fix doble:
   A) CSS: dimensiones explícitas al contenedor del mapa
   B) JS (ver sección al final): invalidateSize() post-render
─────────────────────────────────────────────────────────── */

/* Contenedor wrapper que genera el código IA */
.msg-bub [id^="map-"],
.msg-bub [id^="vmap-"],
.msg-bub [id^="leaflet-"],
.msg-bub .map-container,
.msg-bub .leaflet-wrap {
  width: 100% !important;
  height: 420px !important;
  min-height: 360px !important;
  display: block !important;
  position: relative !important;
  border-radius: 10px;
  overflow: hidden;
  margin: .8rem 0;
}

/* El propio leaflet-container */
.msg-bub .leaflet-container {
  width: 100% !important;
  height: 100% !important;
  min-height: 360px !important;
  border-radius: 10px;
  background: #e8e8e8 !important; /* evita zona gris vacía */
}

/* Fix también para artPanel (ya existía, se mantiene) */
#artPanel .leaflet-container {
  width: 100% !important;
  height: 400px !important;
  min-height: 350px !important;
}
#artPanel [id^="vmap-"] {
  width: 100% !important;
  height: 400px !important;
}

/* Leaflet tiles: sin restricciones de max-width */
.leaflet-container img.leaflet-tile,
.leaflet-tile-pane img {
  max-width: none !important;
  width: 256px !important;
}


/* ── 3. RICH CONTENT: IMÁGENES, CANVAS, IFRAMES ─────────────
   Todo bloque rico ocupa el ancho completo del bubble.
─────────────────────────────────────────────────────────── */

/* Imágenes en el chat (no thumbs de adjunto ni iconos del header) */
.msg-bub img:not(.msg-img-thumb):not(.hdr-xp-img):not(.obra-card-img) {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 55vh;
  object-fit: contain;
  border-radius: 10px;
  margin: .6rem 0;
  display: block;
}

/* Canvas (gráficas, mindmaps, pizarra) */
.msg-bub canvas {
  width: 100% !important;
  max-width: 100% !important;
  display: block;
  margin: .6rem 0;
  border-radius: 10px;
}

/* Iframes (PDF embed, etc.) */
.msg-bub iframe {
  width: 100% !important;
  min-height: 480px;
  border: none;
  border-radius: 10px;
  display: block;
  margin: .6rem 0;
}

/* Tablas generadas por IA */
.msg-bub table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  margin: .6rem 0;
}
.msg-bub th,
.msg-bub td {
  padding: .45rem .65rem;
  border: 1px solid var(--border, #e5e7eb);
  text-align: left;
}
.msg-bub th {
  background: #f5f3ff;
  font-weight: 800;
  color: #4c1d95;
}
.msg-bub tr:nth-child(even) td {
  background: #faf9ff;
}


/* ── 4. COMPOSER FIJO ABAJO ─────────────────────────────────
   Sticky al fondo del chat-wrapper, siempre visible.
─────────────────────────────────────────────────────────── */
.input-area {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 100;
  background: rgba(255, 255, 255, .97) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, .06);
  flex-shrink: 0 !important;
}

[data-theme="dark"] .input-area {
  background: rgba(15, 14, 24, .96) !important;
}


/* ── 5. GRID PANEL VISUAL (artPanel) ────────────────────────
   Panel lateral via CSS grid, sin position:fixed
─────────────────────────────────────────────────────────── */
#appShell:has(#artPanel.art-panel-visible) {
  grid-template-columns: minmax(0, 1fr) 420px !important;
}
#artPanel.art-panel-visible {
  display: flex !important;
  flex-direction: column;
  overflow-y: auto;
}
#artPanel img:not(.av-img) {
  max-width: 100% !important;
  height: auto !important;
}


/* ── 6. SCROLL LIMPIO ───────────────────────────────────────
   chat-msgs: scroll propio, sin overflow en el wrapper
─────────────────────────────────────────────────────────── */
.chat-msgs {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Evitar que bloques ricos desborden horizontalmente */
.chat-msgs,
.msg-bub {
  overflow-x: hidden;
  word-break: break-word;
}

/* Excepciones: mapas y canvas NO deben ser overflow:hidden */
.msg-bub [id^="map-"],
.msg-bub [id^="vmap-"],
.msg-bub .map-container {
  overflow: hidden !important; /* el wrapper sí, para border-radius */
}


/* ── 7. RESPONSIVE ──────────────────────────────────────────
   ≥1201px: artPanel = 35vw
   901-1200px: artPanel = 40vw
   ≤900px: stack vertical
─────────────────────────────────────────────────────────── */
@media (min-width: 1201px) {
  #appShell:has(#artPanel.art-panel-visible) {
    grid-template-columns: minmax(0, 1fr) 35vw !important;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  #appShell:has(#artPanel.art-panel-visible) {
    grid-template-columns: minmax(0, 1fr) 40vw !important;
  }
}

@media (max-width: 900px) {
  #appShell:has(#artPanel.art-panel-visible) {
    grid-template-columns: 1fr !important;
  }
  #artPanel.art-panel-visible {
    height: 50vh;
    border-top: 2px solid rgba(124, 58, 237, .2);
    border-left: none !important;
  }
  /* Mapas en móvil: altura menor */
  .msg-bub .leaflet-container,
  .msg-bub [id^="map-"],
  .msg-bub [id^="vmap-"] {
    height: 280px !important;
    min-height: 240px !important;
  }
}

@media (max-width: 600px) {
  #artPanel.art-panel-visible {
    height: 60vh;
  }
}