/* HSH_AI.responsive.css
   Additive responsive rules for HS&H client UI.
   Works with existing HSH_AI.css (do not duplicate base rules).
*/

/* ========== Fluid tokens & base adjustments ========== */
:root {
  /* Fluid type & spacing helpers (tweak as you like) */
  --fluid-100: clamp(10px, 0.9vw + 8px, 14px);
  --fluid-200: clamp(12px, 1.1vw + 9px, 16px);
  --fluid-300: clamp(14px, 1.4vw + 10px, 18px);

  /* Cap widths on narrow screens */
  --sidebar-width-narrow: min(92vw, 420px);
  --panel-height-phone: 50vh;     /* larger scratch/log on phones */
}

/* Typography/spacing that scale a bit */
body, html {
  font-size: var(--fluid-200);
}

/* ========== Container Query Setup ==========
   Mark your main content column as a container so
   child components can respond to *their own* width.
   Add this class to your main content wrapper. */
.cq {
  container-type: inline-size;
  container-name: main;
}

/* Example: when the main content column is under 700px,
   tighten inputs to avoid overflow. */
@container main (max-width: 700px) {
  .input-text {
    width: 100%;
  }
  .input-group label {
    max-width: 40%;
  }
}

/* ========== Media Queries: layout shifts by viewport ========== */

/* Small screens (phones / narrow portrait tablets) */
@media (max-width: 720px) {
  /* Sidebar becomes an overlay drawer: narrower and opt-in */
  .sidebar {
    width: var(--sidebar-width-narrow);
    right: calc(-1 * var(--sidebar-width-narrow));
    /* Keep your existing transition; only size changes */
  }

  /* Main form no longer reserves space for a docked sidebar */
  .form-container {
    margin-right: 0 !important;
    padding: 0 8px;
  }

  /* Slide-up panels taller by default for readability */
  .log-panel,
  .scratch-panel {
    --panel-height: var(--panel-height-phone);
  }

  /* If you have a tabbed iframe area, let it become stacked */
  .iframe-container {
    max-height: none;     /* allow page scroll on phones */
    height: auto;
    min-height: 50vh;     /* give it some room */
  }

  /* Tighter input rows */
  .input-group {
    gap: 6px;
  }
  .input-number { width: 64px; }
}

/* Medium screens (portrait tablets / small laptops) */
@media (min-width: 721px) and (max-width: 1024px) {
  .form-container {
    margin-right: calc(var(--sidebar-width) * 0.5);
  }
  .sidebar {
    width: calc(var(--sidebar-width) * 0.75);
    right: calc(-1 * (var(--sidebar-width) * 0.75));
  }
}

/* Large screens: keep your current intent, but add a max width for readability */
@media (min-width: 1280px) {
  #container {
    max-width: 1400px;
    margin: 0 auto;
  }
}

/* ========== Orientation-aware tweaks ========== */
@media (orientation: portrait) and (max-width: 900px) {
  /* Make drag handle a tad thicker for touch */
  .slide-panel .drag-handle { height: 6px; }
  /* Reduce border noise in tight space */
  .iframe-container { border-color: #ddd; }
}

/* Respect reduced motion: use the same media flag you already respect in JS if needed */
@media (prefers-reduced-motion: reduce) {
  .sidebar, .slide-panel {
    transition: none !important;
  }
}