/* AIDC Tablet + Theme Fixes — injected by middleware into all HTML pages */

/* Fix 1: Tablet viewport — 100vh doesn't account for browser chrome on iPad/tablets */
body {
  height: 100dvh !important;
  height: -webkit-fill-available !important;
}
/* Safe area for iPad notch/home indicator */
.input-area {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Ensure input area always visible on tablet */
@media (min-width: 769px) and (max-width: 1199px) {
  .input-area {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
  }
}

/* Fix 2: Light theme support for both Engine and Admin */
html.light-theme {
  --bg: #f8f9fa !important;
  --bg2: #ffffff !important;
  --bg3: #e9ecef !important;
  --bg4: #dee2e6 !important;
  --border: rgba(0,0,0,.08) !important;
  --border2: rgba(0,0,0,.12) !important;
  --text: #1a1a2e !important;
  --text2: #495057 !important;
  --dim: #6c757d !important;
}
html.light-theme .topbar,
html.light-theme .sidebar,
html.light-theme .input-area {
  background: #fff !important;
  border-color: rgba(0,0,0,.08) !important;
}
html.light-theme .msg-bot {
  background: #f8f9fa !important;
  border-color: rgba(0,0,0,.08) !important;
}
html.light-theme .msg-sys {
  background: #e9ecef !important;
  border-color: rgba(0,0,0,.06) !important;
  color: #495057 !important;
}
html.light-theme .sb-btn {
  background: #f1f3f5 !important;
  border-color: rgba(0,0,0,.06) !important;
  color: #1a1a2e !important;
}
html.light-theme .sb-btn:hover {
  background: #e9ecef !important;
}
html.light-theme .input-wrap textarea {
  background: #f8f9fa !important;
  border-color: rgba(0,0,0,.1) !important;
  color: #1a1a2e !important;
}
html.light-theme .pill {
  background: #e9ecef !important;
  color: #495057 !important;
}
html.light-theme .msg-bot pre,
html.light-theme .msg-bot .md-code {
  background: #f1f3f5 !important;
  border-color: rgba(0,0,0,.06) !important;
  color: #212529 !important;
}
html.light-theme .finding.critical { background: rgba(239,68,68,.06) !important; color: #b91c1c !important; }
html.light-theme .finding.high { background: rgba(249,115,22,.06) !important; color: #c2410c !important; }
html.light-theme .finding.medium { background: rgba(234,179,8,.06) !important; color: #a16207 !important; }
html.light-theme .finding.low { background: rgba(59,130,246,.06) !important; color: #1d4ed8 !important; }
/* Admin portal light theme */
html.light-theme .admin-card,
html.light-theme .card {
  background: #fff !important;
  border-color: rgba(0,0,0,.08) !important;
}
html.light-theme table th {
  color: #495057 !important;
}
html.light-theme table td {
  border-color: rgba(0,0,0,.04) !important;
}

/* ═══ RESPONSIVE FIXES — Landing Page + Chat UI ═══ */

/* Fix 3: Small phone (≤480px) — tighter spacing, smaller text */
@media (max-width: 480px) {
  /* Landing: Hero fits small screens */
  .hero-title { font-size: 22px !important; line-height: 1.2 !important; }
  .hero-sub { font-size: 12px !important; max-width: 100% !important; padding: 0 8px !important; }
  .hero-content { max-width: 100% !important; padding: 0 12px !important; }
  .hero-stats { gap: 12px !important; }
  .hero-stat-num { font-size: 18px !important; }
  .hero-stat-label { font-size: 8px !important; }
  .hero-actions { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary { width: 100% !important; text-align: center !important; }

  /* Landing: Sections */
  .section-title { font-size: 22px !important; }
  .section-sub { font-size: 12px !important; max-width: 100% !important; }
  .section-inner { max-width: 100% !important; padding: 0 12px !important; }
  section { padding: 40px 12px !important; }

  /* Landing: Feature cards stack single column */
  .tools-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .tool-card { padding: 16px !important; }

  /* Landing: Pricing cards stack */
  .pricing-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Landing: Nav */
  .nav { padding: 0 10px !important; }
  .nav-logo img { height: 28px !important; }
  .nav-wordmark { font-size: 14px !important; }

  /* Chat UI: Compact input */
  .input-area { padding: 6px 8px 4px !important; }
  .upload-btn { padding: 6px 8px !important; font-size: 12px !important; }
  .msgs { padding: 10px 6px !important; }
  .msg { max-width: 92% !important; padding: 10px 12px !important; font-size: 12px !important; }
}

/* Fix 4: Landscape phones — use available height, don't overflow */
@media (orientation: landscape) and (max-height: 500px) {
  /* Landing: Hero doesn't fill entire viewport in landscape */
  .hero { min-height: auto !important; padding: 40px 20px 30px !important; }
  .hero-title { font-size: 24px !important; }
  .hero-sub { font-size: 13px !important; margin-bottom: 16px !important; }
  .hero-stats { margin-top: 16px !important; }
  .hero-glow { max-width: 100% !important; }

  /* Chat UI: Compact for landscape */
  .topbar { height: 40px !important; }
  .msgs { padding-bottom: 80px !important; }
  .input-area { padding: 6px 12px 4px !important; }
  .sidebar { width: 180px !important; }
  .input-area { left: 180px !important; }
}

/* Fix 5: Landscape phones — sidebar overlay width */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
  .sidebar {
    width: 240px !important;
    left: -260px !important;
  }
  .sidebar.sb-open { left: 0 !important; }
  .input-area { left: 0 !important; }
}

/* Fix 6: Prevent horizontal overflow on all viewports */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
.hero-content,
.hero-sub,
.hero-glow,
.section-sub,
.section-inner {
  max-width: min(var(--max-w, 900px), calc(100vw - 32px)) !important;
}

/* Fix 7: Ensure all fixed-width containers respect viewport */
@media (max-width: 768px) {
  .hero-content { --max-w: 100% !important; max-width: 100% !important; }
  .hero-sub { --max-w: 100% !important; max-width: 100% !important; }
  .hero-glow { max-width: 100% !important; }
  .section-sub { max-width: 100% !important; }
}