/**
 * Wine Cellar — mobile polish.
 * Sweep of persona-test findings at 390px (Pieter):
 *  - horizontal-scroll affordance on the main cellar grid
 *  - fix button / input truncation
 *  - compact user card + cellar dropdown
 *  - keep FAB / chat bubble away from grid tiles
 */

/* ── Horizontal-scroll affordance on the main cellar grid ─────────────────
 * At mobile widths the grid has 9 columns but only 3–4 fit on screen.
 * Add a right-edge gradient fade so users see there's more to scroll to.
 * The gradient is a pseudo-element on the grid container and is hidden
 * when the grid is scrolled past its rightmost reachable point.
 */
@media (max-width: 640px) {
  .cellar-grid {
    position: relative;
  }
  .cellar-grid::after {
    content: '';
    position: sticky;
    top: 0;
    right: 0;
    float: right;
    width: 28px;
    height: 100%;
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.08) 70%,
      rgba(0, 0, 0, 0.14) 100%
    );
    pointer-events: none;
    margin-left: -28px;
  }
  /* Small chevron hint on first render — fades after 4s so it doesn't nag. */
  .cellar-grid::before {
    content: '›';
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    font-size: 1.6rem;
    color: var(--text-muted, #888);
    opacity: 0.6;
    pointer-events: none;
    animation: mp-scroll-hint 4s ease-out forwards;
  }
  @keyframes mp-scroll-hint {
    0%, 60% { opacity: 0.6; transform: translate(0, -50%); }
    30%, 50% { opacity: 0.9; transform: translate(3px, -50%); }
    100% { opacity: 0; transform: translate(0, -50%); }
  }
}

/* ── Multi-select action bar — don't truncate primary labels ─────────────
 * On mobile, "Add to Drink Soon" was clipping to "Add to Drink So".
 * Let button labels wrap instead of truncate so the word stays intact.
 * Also match the real class (`.grid-selection-batch` / `.grid-selection-bar`)
 * used in index.html rather than the hypothetical classes from the plan doc.
 */
@media (max-width: 640px) {
  .grid-selection-bar button,
  .grid-selection-batch button,
  .multi-select-actions button,
  [id*="multi-select"] button,
  .selection-actions button {
    white-space: normal;
    line-height: 1.15;
    min-height: 44px; /* WCAG touch-target minimum */
  }

  /* Keep the rightmost action-bar button clear of the FAB zone. The agent
   * chat toggle and the "+" FAB stack at the bottom-right corner at
   * ~48px wide and ~120px tall; 64px of right padding on the wrap-capable
   * batch container pushes any wrapping-button group to the left so it
   * doesn't sit behind the FAB when scrolled. */
  .grid-selection-batch,
  .grid-selection-bar {
    padding-right: 64px;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
}

/* ── Wines-to-Try inline form inputs ───────────────────────────────────
 * "Where you found it (optional)" was being cut off at 390px. Stack form
 * fields vertically on mobile instead of trying to fit side-by-side.
 */
@media (max-width: 640px) {
  .wines-to-try-add-form,
  .wines-to-try-inline-form {
    flex-direction: column;
    gap: var(--space-xs, 0.375rem);
  }
  .wines-to-try-add-form input,
  .wines-to-try-add-form select,
  .wines-to-try-inline-form input,
  .wines-to-try-inline-form select {
    width: 100%;
    min-width: 0;
  }
}

/* ── User card compaction ─────────────────────────────────────────────
 * Full "Louis Strydom / strydom.louis@gmail.com / Sign out" card eats
 * ~20% of above-the-fold on 390px. Hide the email line on mobile; name
 * + sign-out is enough. Also compact the Cellar dropdown.
 */
@media (max-width: 640px) {
  .user-menu-email,
  [class*="user-card"] [class*="email"],
  header [class*="user"] span:nth-child(2) {
    display: none;
  }
  header .cellar-switcher,
  header [class*="cellar-switch"] {
    flex-direction: row;
    align-items: center;
    gap: var(--space-xs, 0.375rem);
    margin: 0;
  }
  header .cellar-switcher label,
  header [class*="cellar-switch"] label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
    color: var(--text-muted);
  }
}

/* ── Floating buttons vs. grid tiles ──────────────────────────────────
 * The FAB (+) and chat bubble (💬) overlapped cells in column 3 of each
 * row. Nudge them inward and add a little shadow offset so tiles peek
 * through when they sit behind.
 */
@media (max-width: 640px) {
  .fab,
  #agent-chat-launcher,
  [class*="chat-launcher"] {
    /* Let the grid breathe a bit by keeping the tap target away
     * from the rightmost column. */
    right: max(12px, env(safe-area-inset-right));
  }
}

/* ── My Wines filter strip — promote view toggles on mobile ───────────
 *
 * Persona-test 2026-04-18 (Sarah, mobile): the filter strip stacked
 * Drink-Soon chip + All Colours dropdown + Sort dropdown + Search box
 * before the new Flat/Grouped toggle, pushing the toggle below the
 * fold. Reorder via flexbox `order` so the view-mode toggles render
 * first at ≤640px, where they're high-frequency controls.
 *
 * Container is .wine-list-filters; the view-mode groups carry
 * .view-toggle-group (Table/Card) and .wine-view-toggle (Flat/Grouped).
 */
@media (max-width: 640px) {
  .wine-list-filters {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 0.375rem);
  }
  .wine-list-filters .wine-view-toggle { order: -2; }
  .wine-list-filters .view-toggle-group { order: -1; }
  /* Other filter-groups keep their natural document order at order: 0. */
}