/*
 * responsive.css — OptionSoft AI Avatar Platform
 * Global mobile compliance layer. Linked in index.html, applies to all pages.
 *
 * Breakpoints:
 *   Desktop:          1200px+   (no changes — existing layout)
 *   Tablet:           768px–1199px
 *   Mobile landscape: 481px–767px
 *   Mobile portrait:  ≤480px
 *
 * Sprint M1 — Foundation layer
 */

/* ─── Base touch + font improvements (all sizes) ─────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Ensure all buttons and interactive elements meet 44px touch target minimum */
button,
.btn,
.btn-primary,
.btn-secondary,
.btn-deal,
.nav-button,
.nav-button-tradeshow,
.tab-button,
.accordion-header,
[role="button"] {
  min-height: 44px;
  touch-action: manipulation;
  cursor: pointer;
}

/* Inputs also need 44px touch targets on mobile */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="search"],
select,
textarea {
  touch-action: manipulation;
}

/* ─── Tablet (768px–1199px) ──────────────────────────────────────────────── */

@media (max-width: 1199px) {

  /* Scale down large hero text */
  h1 { font-size: clamp(1.4rem, 3vw, 2rem) !important; }
  h2 { font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important; }

  /* Navigation — reduce padding, allow wrapping */
  .nav-bar, .top-nav, .sidebar-nav {
    padding: 8px 12px;
  }

  /* Two-column layouts stack on tablet */
  .two-col-layout,
  .split-layout,
  .avatar-content-split {
    flex-direction: column !important;
    gap: 16px;
  }

  /* Avatar panel takes full width */
  .avatar-panel,
  .avatar-column,
  .video-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
  }

  /* Content panel takes full width */
  .content-panel,
  .content-column,
  .right-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
  }

  /* Trade show production UI — primary layout */
  .trade-show-page {
    padding: 12px !important;
  }

  .trade-show-page .main-layout,
  .trade-show-page .page-layout {
    flex-direction: column !important;
    gap: 12px;
  }

  /* Phone emulator on tablet: center and scale slightly */
  .phone-emulator-wrapper,
  .phone-frame-wrapper,
  .mobile-emulator-container {
    transform: scale(0.9);
    transform-origin: top center;
  }

  /* Grid nav buttons — fewer columns on tablet */
  .nav-grid,
  .button-grid,
  [style*="grid-template-columns"] {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  }

  /* Control panels stack */
  .control-panel,
  .settings-panel,
  .config-panel {
    width: 100% !important;
    min-width: unset !important;
  }

}

/* ─── Mobile landscape (481px–767px) ─────────────────────────────────────── */

@media (max-width: 767px) {

  h1 { font-size: clamp(1.2rem, 4vw, 1.6rem) !important; }
  h2 { font-size: clamp(1rem, 3.5vw, 1.3rem) !important; }

  /* Full-width everything */
  .trade-show-page {
    padding: 8px !important;
  }

  /* Nav buttons go single column or 2-col */
  .nav-grid,
  .button-grid,
  [style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Tighten button padding for smaller screens */
  .nav-button,
  .nav-button-tradeshow,
  .btn-deal {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  /* Avatar video — full width, reasonable height */
  video,
  .avatar-video,
  #videoContainer video {
    width: 100% !important;
    max-height: 280px;
    object-fit: cover;
  }

  /* Conversation log compact */
  .conversation-log,
  .log-panel,
  .chat-log {
    max-height: 180px !important;
    font-size: 12px;
  }

  /* Accordion headers larger tap area */
  .accordion-header {
    padding: 14px 16px !important;
    font-size: 15px !important;
  }

  /* Phone/tablet emulators: strip frame chrome on mobile */
  .phone-emulator-wrapper,
  .phone-frame-wrapper,
  .mobile-emulator-container {
    transform: none;
  }

  /* Tab bars scroll horizontally */
  .tab-bar,
  .tab-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .tab-bar::-webkit-scrollbar { display: none; }

}

/* ─── Mobile portrait (≤480px) ────────────────────────────────────────────── */

@media (max-width: 480px) {

  h1 { font-size: 1.3rem !important; }
  h2 { font-size: 1.1rem !important; }
  h3 { font-size: 1rem !important; }

  body {
    font-size: 14px;
  }

  /* Trade show pages — full screen, no chrome */
  .trade-show-page {
    padding: 6px !important;
    min-height: 100dvh;
  }

  /* ── PhoneEmulator: hide the frame on a real phone ──
     The phone chrome is a demo prop for desktop viewing.
     On an actual phone, content fills the screen natively. */
  .phone-frame,
  .phone-outer-frame,
  .iphone-frame,
  .device-frame,
  .phone-bezel {
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Phone content fills viewport */
  .phone-content,
  .phone-screen,
  .phone-inner,
  .device-screen {
    width: 100% !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Single column — everything */
  .nav-grid,
  .button-grid,
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Full-width buttons */
  .nav-button,
  .nav-button-tradeshow,
  .btn-primary,
  .btn-secondary,
  .btn-deal,
  .btn-send-sms {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
  }

  /* Avatar video — full width portrait */
  video,
  .avatar-video,
  #videoContainer video {
    width: 100% !important;
    max-height: 220px;
    object-fit: cover;
  }

  /* Inputs full width */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  select,
  textarea {
    width: 100% !important;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    min-height: 44px;
    padding: 10px 12px;
  }

  /* Hide non-essential UI chrome on small screens */
  .desktop-only,
  .hide-mobile {
    display: none !important;
  }

  /* Show mobile-only content */
  .mobile-only {
    display: block !important;
  }

  /* Conversation log */
  .conversation-log,
  .log-panel,
  .chat-log {
    max-height: 140px !important;
    font-size: 12px;
  }

  /* Tighten section padding */
  .section,
  .card,
  .panel {
    padding: 12px !important;
    border-radius: 8px !important;
  }

  /* Tier cards for F&I — stack vertically */
  .tier-cards,
  .tier-grid,
  .product-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Tab bar — horizontal scroll */
  .tab-bar,
  .tab-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .tab-bar::-webkit-scrollbar { display: none; }

  /* Accordion full width */
  .accordion-header {
    padding: 14px 16px !important;
    font-size: 15px !important;
    width: 100% !important;
  }

  /* Sidebar/control panels go off-canvas or collapse */
  .sidebar,
  .left-panel,
  .right-sidebar {
    display: none;
  }

  /* Top-level page container */
  .page-container,
  .page-wrapper {
    padding: 8px !important;
    max-width: 100% !important;
  }

}

/* ─── Global table + form responsive (Batch 0) ─────────────────────────── */

@media (max-width: 1199px) {
  /* Tables become scrollable on tablet */
  .items-table,
  .data-table,
  table:not(.layout-table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Control sections wrap */
  .controls-section {
    flex-wrap: wrap;
  }
  .control-group {
    flex: 1 1 auto;
    min-width: 120px;
  }
}

@media (max-width: 767px) {
  /* Form controls stack */
  .control-group {
    width: 100%;
    min-width: unset;
  }
  .controls-section {
    flex-direction: column;
    gap: 10px;
  }

  /* Button groups stack */
  .button-group {
    flex-direction: column;
    width: 100%;
  }
  .button-group button,
  .button-group .btn-primary,
  .button-group .btn-secondary {
    width: 100%;
  }

  /* Form rows stack */
  .form-row,
  .field-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Avatar containers constrain */
  .video-wrap,
  .avatar-container {
    min-height: 180px !important;
    max-height: 300px;
  }
}

@media (max-width: 480px) {
  /* Setup/admin pages compact */
  .setup-page,
  .admin-page,
  [class$="-setup"],
  [class$="-setup-page"] {
    padding: 8px !important;
  }

  /* All form rows single column */
  .form-row,
  .field-row,
  .input-row,
  .row-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .form-row > *,
  .field-row > *,
  .input-row > *,
  .row-3 > * {
    width: 100% !important;
    min-width: unset !important;
    flex: 0 0 auto !important;
  }

  /* Avatar containers tighter */
  .video-wrap,
  .avatar-container {
    min-height: 160px !important;
    max-height: 220px;
  }
}

/* ─── Utility classes (all breakpoints) ──────────────────────────────────── */

.mobile-only  { display: none; }   /* shown at ≤480px above */
.desktop-only { display: block; }  /* hidden at ≤480px above */
.tablet-hide  { display: block; }

@media (max-width: 1199px) {
  .tablet-hide { display: none !important; }
}

/* Safe area insets for notched phones (iPhone X+) */
@supports (padding: max(0px)) {
  .trade-show-page,
  .page-container,
  body {
    padding-left: max(6px, env(safe-area-inset-left));
    padding-right: max(6px, env(safe-area-inset-right));
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INDEX / HOME PAGE — Sprint M1
   ═══════════════════════════════════════════════════════════════════════════ */

.index-page-wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px;
}

.index-hero-title {
  font-size: 36px;
  margin-bottom: 10px;
  color: #1e293b;
}

.index-hero-subtitle {
  font-size: 18px;
  line-height: 1.6;
  color: #64748b;
  margin-bottom: 40px;
}

.index-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 15px;
}

@media (max-width: 1199px) {
  .index-page-wrapper  { padding: 24px 16px; }
  .index-hero-title    { font-size: 28px; }
  .index-hero-subtitle { font-size: 16px; margin-bottom: 28px; }
  .index-nav-grid      { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
}

@media (max-width: 767px) {
  .index-page-wrapper  { padding: 16px 12px; }
  .index-hero-title    { font-size: 22px; }
  .index-hero-subtitle { font-size: 14px; margin-bottom: 20px; }
  .index-nav-grid      { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

@media (max-width: 480px) {
  .index-page-wrapper  { padding: 12px 10px; }
  .index-hero-title    { font-size: 20px; margin-bottom: 6px; }
  .index-hero-subtitle { font-size: 13px; margin-bottom: 16px; }
  .index-nav-grid      { grid-template-columns: 1fr; gap: 8px; }
}