/**
 * Responsive Design - Estilos responsive para Agent V2
 */

/* Ocultar headers en producción (todos los tamaños de pantalla) */
/* Solo visible en desarrollo */
body[data-env="production"] .unified-header,
body[data-env="production"] .agent-topbar {
  display: none !important;
}

/* Asegurar que headers se muestren en desarrollo (desktop y móvil) */
body[data-env="development"] .unified-header,
body[data-env="development"] .agent-topbar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ajustar el contenedor principal en desarrollo para dar espacio al header */
/* El header tiene 56px de altura, agregamos padding-top al contenedor */
body[data-env="development"] .agent-v2-container {
  padding-top: 56px !important; /* Altura exacta del header */
  height: calc(100vh - 56px) !important; /* Restar altura del header */
  min-height: calc(100vh - 56px) !important;
  margin-top: 0 !important;
}

/* Asegurar que agent-root no tenga restricciones en desarrollo */
body[data-env="development"] #agent-root {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

/* Asegurar que el header esté visible y posicionado correctamente */
body[data-env="development"] #agent-root > .unified-header {
  display: flex !important;
  position: relative !important;
  width: 100% !important;
  z-index: 100 !important;
  flex-shrink: 0 !important;
}

@media (min-width: 769px) {
  /* En desktop, asegurar que el header se muestre */
  body[data-env="development"] .unified-header {
    display: flex !important;
    position: relative !important;
    z-index: 100 !important;
    width: 100% !important;
  }
  
  /* Ajustar contenedor en desktop */
  body[data-env="development"] .agent-v2-container {
    padding-top: 56px !important;
    height: calc(100vh - 56px) !important;
    min-height: calc(100vh - 56px) !important;
    margin-top: 0 !important;
  }
  
  /* Asegurar que el dialog-container tenga el espacio correcto */
  body[data-env="development"] .agent-v2-dialog-container {
    padding-top: 0 !important; /* Ya no necesita padding adicional */
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .agent-v2-dialog-container {
    gap: 24px;
    padding: 24px;
  }

  .agent-v2-visual-wrapper {
    width: auto;
    min-width: 260px;
    min-height: 260px;
    max-height: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .agent-visual-container {
    width: 260px !important;
    height: 260px !important;
    max-width: none !important;
    max-height: none !important;
  }
  
  .agent-visual-image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
    display: block;
  }

  .static-chat-box {
    max-width: 100%;
    padding: 20px;
  }

  .action-area {
    max-width: 100%;
  }
}

/* Mobile */
@media (max-width: 768px) {
  /* Ocultar headers en móvil en producción, pero mostrar en desarrollo */
  body[data-env="production"] .unified-header,
  body[data-env="production"] .agent-topbar {
    display: none !important;
  }
  
  /* Mostrar headers en desarrollo incluso en móvil */
  body[data-env="development"] .unified-header,
  body[data-env="development"] .agent-topbar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ajustar padding-top del contenedor principal */
  /* En producción: sin padding, en desarrollo: espacio para header */
  body[data-env="production"] .agent-v2-container {
    padding-top: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
  
  body[data-env="development"] .agent-v2-container {
    padding-top: 56px !important; /* Espacio para header en desarrollo */
    height: calc(100dvh - 56px) !important;
    min-height: calc(100dvh - 56px) !important;
  }
  
  /* Asegurar que el agente interno esté oculto en móvil */
  .agent-v2-visual-internal {
    display: none !important;
  }
  
  /* Asegurar que el agente externo esté visible en móvil */
  .agent-v2-visual-external {
    display: flex !important;
  }
  
  .agent-v2-dialog-container {
    flex-direction: column;
    gap: 8px; /* Reducir gap de 20px a 8px */
    /* Sin padding horizontal para que ocupe 100% */
    padding: 12px 0;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  .agent-v2-visual-wrapper {
    width: 100%;
    min-width: var(--agentSizeMobile);
    height: auto;
    min-height: var(--agentSizeMobile);
    max-height: none !important; /* Eliminar limitación */
    /* Agregar padding-top para evitar corte con isla del iPhone (iPhone 15/16) */
    padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px 8px;
    order: 1;
    flex: 0 0 auto;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .agent-visual-container {
    width: var(--agentSizeMobile) !important;
    height: var(--agentSizeMobile) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 auto;
    aspect-ratio: 1;
  }
  
  .agent-visual-image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
    display: block;
  }
  
  /* Restaurar layout de panel en móvil (no grid) */
  .agent-v2-panel {
    order: 2;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    /* Sin padding horizontal en móvil para que ocupe 100% */
    padding: 16px 0 !important;
    margin-top: 0;
  }
  
  /* Dialog panel sin padding horizontal en móvil */
  .agent-v2-dialog-panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    gap: 8px;
    padding: 0 0 200px 0 !important; /* Solo padding-bottom */
  }
  
  /* Asegurar que chat-wrapper e input-wrapper ocupen 100% sin espacios */
  .agent-v2-chat-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin-top: 0;
    padding-top: 0;
  }
  
  .agent-v2-input-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .static-chat-box {
    margin-top: 0;
    padding-top: 20px; /* Reducir padding superior */
  }
  
  /* Ocultar wrapper del historial en móvil (ya no ocupa espacio) */
  .agent-v2-history-wrapper {
    display: none;
    height: 0;
    margin: 0;
    padding: 0;
  }
  
  /* Botón de historial dentro del card en móvil */
  .static-chat-box .history-toggle-button {
    width: 36px;
    height: 36px;
    top: 10px;
    right: 10px;
    font-size: 18px;
  }
  
  .static-chat-box {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
  
  .static-chat-content {
    word-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;
    box-sizing: border-box;
  }
  
  .agent-v2-input-wrapper {
    flex: 0 0 auto;
    margin-top: auto;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .static-chat-box {
    padding: 16px;
    border-width: 1px;
  }

  .static-chat-title {
    font-size: 16px;
    margin-bottom: 16px;
  }

  .static-chat-content {
    font-size: 14px;
  }

  .action-area {
    padding: 16px;
    margin: 0;
  }

  .input-buttons-container {
    gap: 12px;
  }

  .input-button {
    width: 48px;
    height: 48px;
  }

  .history-toggle-button {
    top: -35px;
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .history-content {
    max-height: 300px;
    padding: 12px;
  }
}

/* Desktop - Reorganizar layout: agente dentro del panel */
@media (min-width: 769px) {
  /* Ocultar agente externo en desktop */
  .agent-v2-visual-external {
    display: none !important;
  }
  
  /* Mostrar agente interno en desktop */
  .agent-v2-visual-internal {
    display: flex !important;
  }
  
  /* Cambiar dialog-container para que solo contenga el panel */
  .agent-v2-dialog-container {
    /* El agente ya no está fuera, solo el panel */
  }
  
  /* Panel principal con grid: B1 (agente) + B2+B3 (mensaje) */
  .agent-v2-panel {
    display: grid;
    grid-template-columns: minmax(200px, 20%) 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 20px;
    align-items: start;
    /* Pequeño padding horizontal en desktop para margen con el borde */
    padding: 32px 16px;
  }
  
  /* Dialog panel con pequeño padding horizontal en desktop */
  .agent-v2-dialog-panel {
    padding: 0 16px 200px 16px; /* Pequeño padding horizontal + padding-bottom */
  }
  
  /* Chat wrapper con pequeño padding horizontal en desktop */
  .agent-v2-chat-wrapper {
    padding: 0 16px !important;
    margin: 0 !important;
  }
  
  /* Input wrapper con pequeño padding horizontal en desktop */
  .agent-v2-input-wrapper {
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  /* Agente en B1 (primera columna) */
  .agent-v2-visual-internal {
    grid-column: 1;
    grid-row: 1 / -1; /* Ocupa todas las filas */
    align-self: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  
  /* Historial en B2+B3 (segunda columna, primera fila) */
  .agent-v2-history-wrapper {
    grid-column: 2;
    grid-row: 1;
  }
  
  /* Dialog panel en B2+B3 (segunda columna, segunda fila) */
  .agent-v2-dialog-panel {
    grid-column: 2;
    grid-row: 2;
    flex: 1;
    min-height: 0;
  }
  
  /* Input wrapper en B2+B3 (segunda columna, tercera fila) */
  .agent-v2-input-wrapper {
    grid-column: 2;
    grid-row: 3;
    margin-top: 0; /* Ya no necesita margin-top: auto */
  }
  
  /* Ajustar tamaño del agente en desktop dentro del panel */
  .agent-v2-visual-internal .agent-visual-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
  }
}

/* Mobile pequeño */
@media (max-width: 480px) {
  .agent-v2-dialog-container {
    padding: 12px;
    gap: 16px;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    box-sizing: border-box;
  }

  .agent-v2-visual-wrapper {
    min-height: 150px;
    flex: 0 0 auto;
  }

  .agent-visual-container {
    max-width: 160px; /* Aumentar de 140px a 160px */
    width: 160px;
    height: 160px; /* Agregar height fija */
  }
  
  .agent-v2-visual-wrapper {
    min-height: 160px; /* Aumentar de 140px a 160px */
    max-height: 180px;
    padding: 6px 4px;
    margin-bottom: 0;
  }
  
  .agent-visual-image {
    max-height: 100%;
    width: auto;
    height: auto;
  }
  
  /* Reducir espacios muertos arriba del panel */
  .agent-v2-panel {
    margin-top: 0;
    padding-top: 6px; /* Reducir de 12px a 6px */
  }
  
  .agent-v2-dialog-panel {
    gap: 8px; /* Reducir de 10px a 8px */
    padding-top: 0;
  }
  
  .agent-v2-chat-wrapper {
    margin-top: 0;
    padding-top: 0;
  }
  
  .static-chat-box {
    margin-top: 0;
    padding-top: 16px; /* Reducir padding superior */
  }
  
  /* Ocultar wrapper del historial en móvil pequeño */
  .agent-v2-history-wrapper {
    display: none;
    height: 0;
    margin: 0;
    padding: 0;
  }
  
  /* Botón de historial dentro del card en móvil pequeño */
  .static-chat-box .history-toggle-button {
    width: 32px;
    height: 32px;
    top: 8px;
    right: 8px;
    font-size: 16px;
  }
  
  .agent-v2-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Sin padding horizontal en móvil pequeño */
    padding: 12px 0 !important;
  }

  .agent-v2-dialog-panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Sin padding horizontal */
    padding: 0 0 200px 0 !important;
  }
  
  /* Asegurar ancho completo en móvil pequeño */
  .agent-v2-chat-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  .agent-v2-input-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }
  
  .agent-v2-input-wrapper {
    flex: 0 0 auto;
    margin-top: auto;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    position: relative;
    z-index: 10;
  }

  .static-chat-box {
    padding: 12px;
  }

  .static-chat-title {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .static-chat-content {
    font-size: 13px;
    min-height: 40px;
  }

  .action-area {
    padding: 12px;
  }

  .action-area-table {
    font-size: 12px;
  }

  .action-area-table th,
  .action-area-table td {
    padding: 8px;
  }

  .input-button {
    width: 44px;
    height: 44px;
  }

  .input-textarea {
    font-size: 13px;
    padding: 10px 12px;
  }
}