/* ── RESPONSIVE BREAKPOINTS ── */

/* Discover Chat button — tablet: slightly reduced but comfortable */
@media (min-width: 481px) and (max-width: 900px) {
  .dsc-chat-btn { height: 44px; padding: 0 20px; }
}

@media (max-width: 480px) {
  /* Discover goes edge-to-edge reels-style on phones */
  .dsc-phone { width: 100%; }
  /* lift the overlay above the home-indicator / gesture zone */
  .dsc-slide-ui { padding: 16px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); gap: 10px; }
  .dsc-info { max-width: 58%; padding: 9px 11px; }
  .dsc-chat-btn { height: 50px; padding: 0 20px; }   /* thumb-friendly 48–56px target */
}
@media (max-width: 800px) {
  .pr-grid { grid-template-columns: 1fr; }
  .pr-wrap { padding: 20px 16px 48px; }
}
/* Subscription plan grid: Free/Premium/Elite/Ultra — 4 → 2 → 1 */
@media (max-width: 980px) { .pr-plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pr-plan-grid { grid-template-columns: 1fr; } }

/* ── LOGO RESPONSIVE ── */

/* Tablet (≤1024px) — logo stays 40 px (already the default) */
@media (max-width: 1024px) {
  .sb-logo-img    { width: 40px; height: 40px; }
  .topbar-logo-img { width: 36px; height: 36px; }
}

/* Mobile (≤768px) — narrow sidebar, topbar logo revealed */
@media (max-width: 768px) {
  .sb-logo-img    { width: 36px; height: 36px; }

  /* Reveal brand logo inside the topbar */
  .topbar-logo-mobile { display: flex; }

  /* Tighten topbar to avoid overflow */
  .topbar { padding: 0 16px; gap: 10px; }
}

/* Small mobile (≤480px) */
@media (max-width: 480px) {
  .sb-logo-img    { width: 32px; height: 32px; }
  .topbar-logo-img { width: 30px; height: 30px; }
  .main { overflow-x: hidden; }
}

/* ── PROMO WIDGET RESPONSIVE ── */

/* Tablet — scale down gracefully */
@media (max-width: 1280px) {
  .promo-text { font-size: 11.5px; }
  .promo-widget { padding: 4px 12px 4px 5px; }
  .promo-video { width: 24px; height: 24px; }
}

/* Small screens — collapse the promo so navigation is untouched */
@media (max-width: 1024px) {
  .promo-widget { display: none; }
}

/* ── TOPBAR AUTH BUTTONS RESPONSIVE ── */

/* Small screens — let the topbar action row wrap below the title without overlap */
@media (max-width: 640px) {
  .topbar {
    flex-wrap: wrap;
    height: auto; min-height: 60px;
    padding-top: 10px; padding-bottom: 10px;
    row-gap: 8px;
  }
}

/* ── CATALOG HEADER RESPONSIVE ── */

/* Tablet/mobile — dropdowns move to their own row below the wrapping chips */
@media (max-width: 768px) {
  .catalog-head { padding: 20px 16px 12px; }
  .catalog-drops { margin-left: 0; width: 100%; }
}

/* Small mobile — dropdowns wrap too, menus open left-aligned */
@media (max-width: 480px) {
  .catalog-drops { flex-wrap: wrap; }
  .dd-menu { right: auto; left: 0; }
}

/* ── PLANS PAGE RESPONSIVE ── */

@media (max-width: 1024px) {
  .pl-pricing-head { padding: 44px 24px 32px; }
  .pl-hero-title { font-size: 34px; }
  .pl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 24px 40px; gap: 16px; }
  .pl-summary { width: calc(100% - 48px); }
}
/* Tablet/narrow: stack the three plan cards cleanly (avoids an awkward 2+1) */
@media (max-width: 860px) {
  .pl-cards { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .pl-header { padding: 14px 20px; }
  .pl-pricing-head { padding: 38px 20px 28px; }
  .pl-hero-title { font-size: 28px; }
  .pl-hero-sub { font-size: 14px; }
  .pl-benefits { padding: 0 20px; margin-bottom: 40px; }
  .pl-benefits-grid { grid-template-columns: 1fr; }
  .pl-footer-note { flex-direction: column; gap: 12px; align-items: center; }
  .pl-summary { flex-direction: column; align-items: stretch; text-align: center; gap: 18px; width: calc(100% - 32px); padding: 22px; }
  .pl-sum-head { justify-content: center; }
  .pl-sum-highlight { max-width: none; }
  .pl-sum-buy { min-width: 0; }
}
@media (max-width: 480px) {
  .pl-billing { margin: 22px 0 6px; }
  .pl-cards { padding: 0 16px 32px; }
  .pl-plan { padding: 26px 22px; }
  .pl-hero-title { font-size: 25px; }
  /* keep the toggle options at a comfortable ≥44px tap target on phones */
  .pl-bill-opt { min-width: 108px; padding-top: 13px; padding-bottom: 13px; }
}

/* ── TOPBAR ACTIONS (Upgrade / Sign Up / Login) ── */

@media (max-width: 640px) {
  .update-plan-btn, .auth-btn { padding: 6px 13px; font-size: 12px; }
  /* keep card tag chips readable + capped at ~2 rows on narrow cards */
  .card-chip { font-size: 10px; padding: 2.5px 8px; }
  .card-tags { gap: 4px; max-height: 44px; }
}

/* ── SYSTEM NOTIFICATIONS ── */
@media (max-width: 640px) {
  .vnote-host { top: 70px; left: 12px; right: 12px; width: auto; max-width: none; }
}

/* ── FILTER BAR ── */

/* Below the single-row width the type/gender segments give up their centering
   margin and pack left with the normal row gap, wrapping like any other item
   (.filter-controls keeps its own right pin until it drops to a full row). */
@media (max-width: 1420px) {
  #segType { margin-left: 0; }
}

@media (max-width: 760px) {
  .catalog-head { padding: 16px 16px 12px; }
  .filter-row { gap: 10px; }
  /* primary segment may scroll horizontally; keep it elegant (no visible bar) */
  .seg { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  /* selectors drop to their own full-width row and split evenly */
  .filter-controls { margin-left: 0; width: 100%; }
  .filter-controls .fdd { flex: 1 1 0; min-width: 0; }
  .filter-controls .fdd-btn { width: 100%; justify-content: center; }
  .fdd-panel { width: min(326px, calc(100vw - 32px)); }
  /* Tags sits in the left half on mobile — open its panel leftward so it can't
     overflow the screen edge (Sort stays right-anchored). */
  #tagsDD .fdd-panel { left: 0; right: auto; transform-origin: top left; }
}

/* ── FOOTER ── */

/* Narrow phones: stack logo / links / copyright instead of clipping the row */
@media (max-width: 600px) {
  .page-footer { flex-direction: column; gap: 14px; text-align: center; padding: 22px 18px; margin: 16px 16px 24px; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 12px 20px; }
}

/* ── SIDEBAR ACCOUNT BLOCK ── */

/* Short screens: keep the nav scrollable instead of clipping the account panel */
@media (max-height: 700px) {
  .sb-nav { overflow-y: auto; min-height: 0; }
  .sidebar:hover .sb-acc-panel { max-height: 240px; }
}

/* ── AI WIDGET RESPONSIVE ── */

@media (max-width: 480px) {
  #ai-widget { right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }
  #ai-chat { width: calc(100vw - 32px); max-width: 320px; max-height: calc(100dvh - 130px); }
}

/* ── CHAT OVERLAY RESPONSIVE ── */

/* phones / portrait tablets: one full-width conversation + a header back button */
@media (max-width: 768px) {
  #chat-page .ch-sidebar { display: none; }
  #chat-page .ch-main { flex: 1 1 100%; width: 100%; }
  .ch-hdr-back { display: flex; }
}
/* phones: tighter chrome, bigger tap targets, no iOS focus-zoom */
@media (max-width: 560px) {
  .ch-topbar { height: 60px; padding: 0 8px; gap: 6px; }
  .ch-hdr-av { width: 38px; height: 38px; }
  /* compact the Update Plan CTA to an icon-only pill so the tight topbar fits */
  .ch-hdr-plan { padding: 7px 9px; margin-right: 2px; }
  .ch-hdr-plan-label { display: none; }
  .ch-intro { margin-bottom: 18px; gap: 9px; }
  .ch-messages { padding: 16px 14px 12px; }
  .ch-msg-col { max-width: 86%; }
  .ch-composer { padding: 9px 10px 12px; gap: 6px; }
  .ch-cbtn { width: 42px; height: 42px; }
  .ch-textarea { font-size: 16px; }            /* ≥16px stops iOS zoom-on-focus */
  .ch-field { padding: 5px 6px 5px 14px; }
}

/* ── DETAILS / SETTINGS PANEL — drawer below the 3-pane desktop width ──
   Under 1100px the right rail detaches from the flow and becomes a right-anchored
   slide-over toggled from the chat header. The docked column never co-exists with
   the conversation at these widths, so there's no horizontal overflow. */
@media (max-width: 1099px) {
  .ch-hdr-panel-toggle { display: flex; }      /* header toggle appears */
  .ch-pnl-close {
    display: flex; position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 36px; height: 36px; border-radius: 11px; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--bg3) 82%, transparent); border: 1px solid var(--border);
    color: var(--text); cursor: pointer; backdrop-filter: blur(8px);
    transition: background .18s var(--ease-premium), transform .18s var(--ease-premium);
  }
  .ch-pnl-close:hover { background: var(--bg3); }
  .ch-pnl-close:active { transform: scale(.92); }

  .ch-panel {
    position: fixed; top: 0; right: 0; z-index: 30;
    width: min(380px, 86vw); height: 100dvh;
    border-left: 1px solid var(--border); box-shadow: var(--shadow-2);
    visibility: hidden; transform: translateX(100%);
    transition: transform .34s var(--ease-soft-out), visibility 0s linear .34s;
  }
  .ch-panel-scroll { padding-top: 56px; }      /* clear the floating close button */
  body.ch-panel-open .ch-panel {
    visibility: visible; transform: none;
    transition: transform .34s var(--ease-soft-out), visibility 0s;
  }
  .ch-panel-backdrop {
    display: block; position: fixed; inset: 0; z-index: 29;
    background: rgba(6, 4, 9, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .34s var(--ease-soft-out);
  }
  body.ch-panel-open .ch-panel-backdrop { opacity: 1; pointer-events: auto; }
}
/* roomier drawer on small phones */
@media (max-width: 560px) {
  .ch-panel { width: min(88vw, 420px); }
}

/* respect reduced-motion across the chat */
@media (prefers-reduced-motion: reduce) {
  .ch-msg.ch-in { animation: none !important; }
  .ch-typing-dot { animation: none !important; }
  .ch-pop, .ch-send .ch-ic, .ch-plus svg, .ch-cbtn, .ch-emoji { transition: none !important; }
  .ch-status-dot.online { box-shadow: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   APPLE / WEBKIT / TOUCH HARDENING
   Device-agnostic: driven by env() safe-area insets and pointer/hover media
   queries — no per-model breakpoints. env() is 0 on non-notch hardware, so the
   safe-area rules are no-ops on standard desktops/laptops.
   ═══════════════════════════════════════════════════════════════════ */

/* Left rail clears the home indicator (bottom) and a landscape side-notch (left) */
.sidebar {
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

/* Touch devices (iPhone / iPad / touch laptops): bigger targets, native cursor */
@media (hover: none), (pointer: coarse) {
  /* the JS custom cursor needs a mouse — hide the dots, restore the native cursor */
  #cur, #cur-ring { display: none; }
  body { cursor: auto; }

  /* lift the smaller controls to a ≥44px tap target (min-height only grows ones under 44) */
  .pl-close, .auth-x { min-width: 44px; min-height: 44px; }
  .fdd-btn { height: 44px; }
  .seg-btn, .fdd-opt,
  .pr-back-btn, .pr-btn-secondary, .pr-btn-ghost, .pr-btn-primary,
  .sb-item, .sb-acc-link, .sb-guest-btn, .sb-upgrade,
  .lang-opt, .pl-plan-select, .pl-bill-opt {
    min-height: 44px;
  }

  /* iOS zooms the page when a focused field is < 16px — pin text controls to 16px */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea, select { font-size: 16px; }
}

/* ── CHARACTER PREVIEW MODAL RESPONSIVE ── */
@media (max-width: 560px) {
  .preview-overlay { padding: 12px; }
  .preview-stage { height: clamp(300px, 46vh, 460px); }
  /* hide the peeking neighbours so the active portrait never overflows */
  .preview-slide.is-prev, .preview-slide.is-next { opacity: 0; }
  .preview-slide.is-active { height: 82%; }
  .preview-body { padding: 16px 16px 18px; }
  .preview-title { font-size: 20px; }
  .preview-meta { gap: 3px 9px; }
  .preview-stats { grid-template-columns: repeat(2, 1fr); }
  .preview-cta { height: 50px; font-size: 14.5px; }
}
/* touch: restore a usable cursor + ≥44px targets on the preview controls */
@media (hover: none), (pointer: coarse) {
  .preview-x, .preview-nav, .preview-cta, .preview-meta-btn, .preview-slide { cursor: pointer; }
  .preview-x, .preview-nav { min-width: 44px; min-height: 44px; }
  .preview-cta { min-height: 50px; }
  .preview-meta-btn { min-height: 44px; padding: 4px 6px; }
}