/* ==========================================================================
   SWRAJYA (SENA) AI Business Discovery Experience
   Responsive Layout & Safe-Area Stylesheet
   ========================================================================== */

/* Mobile Portrait Optimization */
@media (max-width: 480px) {
  .app-viewport {
    width: 100%;
    height: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }

  /* Safe Area Support for iOS & Modern Android Devices */
  .wa-header {
    padding-top: constant(safe-area-inset-top);
    padding-top: max(8px, env(safe-area-inset-top));
    height: calc(var(--header-height) + constant(safe-area-inset-top));
    height: calc(var(--header-height) + env(safe-area-inset-top));
  }

  .wa-footer {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    height: calc(60px + constant(safe-area-inset-bottom));
    height: calc(60px + env(safe-area-inset-bottom));
  }

  .chat-container {
    padding-left: max(10px, constant(safe-area-inset-left));
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, constant(safe-area-inset-right));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  .bubble {
    max-width: 92%;
    font-size: 14px;
  }

  .option-btn {
    padding: 10px 12px;
    font-size: 13.5px;
  }
}

/* Tablet & Landscape Layout */
@media (min-width: 481px) and (max-width: 1024px) {
  body {
    background: linear-gradient(135deg, var(--color-primary-navy), var(--color-secondary-navy));
  }

  .app-viewport {
    height: 96vh;
    height: 96dvh;
    max-height: 900px;
    border-radius: 16px;
  }
}

/* Accessibility & High Contrast Adjustments */
@media (prefers-contrast: high) {
  .bubble {
    border: 1px solid #94A3B8;
  }

  .option-btn {
    border-width: 2px;
  }
}