/* notrack.ai — cross-page UX layer (mobile-first).
 *
 * Kept separate from theme.css (dark mode) and i18n-type.css (script typography) so each
 * concern can be reverted on its own. Loaded on every page from lib/theme_head.php, which is
 * included before the pages' own <style> blocks — so every rule here either carries enough
 * specificity to win on its own merits, or deliberately carries none (see :focus-visible).
 *
 * Out of scope by ownership: promo / bonus / "Our pick" surfaces belong to the monetization
 * workstream and are not targeted here.
 */

/* ─────────────────────────────────────────────────────────────
   1. Visible keyboard focus
      Only four scoped :focus-visible rules existed site-wide, and six places delete the UA
      outline outright. :where() keeps specificity at zero so every existing focus style,
      including .entry-inner:focus-within, still wins.
   ───────────────────────────────────────────────────────────── */
:where(a, button, [role="button"], [role="menuitem"], summary, input, select, textarea):focus-visible {
  outline: 2px solid #059669;
  outline-offset: 2px;
  border-radius: 4px;
}
html[data-theme="dark"] :where(a, button, [role="button"], [role="menuitem"], summary, input, select, textarea):focus-visible {
  outline-color: #34d399;
}

/* One exception: the composer. Both pages already light up the whole box on focus
   (.entry-inner:focus-within on /chat, focus-within:* on the landing), so a second ring around
   the text inside read as a small field sitting in a big frame. Focus stays visible - it is the
   box that shows it, and the box is what people read as the field. */
form#entry textarea:focus-visible { outline: none; }

/* ─────────────────────────────────────────────────────────────
   2. Respect prefers-reduced-motion
      The chat header's brand dot ran a 1.6s ping forever on every pageview with no guard —
      a battery drain, a vestibular-trigger risk, and the reason the page never reaches a
      stable frame for screenshot tooling. Some components already guard themselves; this
      makes it site-wide and covers the typing dots, thinking caret, spinners and mic pulse.
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   3. Mobile vertical rhythm
      Roughly a quarter of the home page's ~8200px height on a 360px screen is inter-section
      padding sized for desktop. Halving it on phones gives back about a viewport and a
      quarter without hiding a single word — which matters most in the verbose locales, where
      the same fixed pixel budget has to absorb up to 1.6x more text.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  section.py-24, section.py-32 { padding-top: 3rem; padding-bottom: 3rem; }
  section.py-20 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  section.pt-28 { padding-top: 4.5rem; }   /* 112px -> 72px; still clears the 56px fixed nav */
  section.pb-20 { padding-bottom: 2.5rem; }
}

/* ─────────────────────────────────────────────────────────────
   4. Chat composer row
      "Press Enter to send · Shift+Enter for newline" is meaningless on a touch device and,
      because the row wraps, it costs a full line directly under the composer.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .entry-row .hint { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   5. Tap targets that can grow for free
      Each of these sits in a row whose height is already driven by a 44px sibling, so the
      box grows into space that exists — nothing shifts.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  .lg-links a { min-height: 44px; }
}

/* ─────────────────────────────────────────────────────────────
   6. Route to the product on mobile content pages
      /compare/*, /learn/*, /glossary/*, /trends/*, /support and the legal pages hid the chat
      pill entirely below 639px, leaving an unlabelled hamburger as the only visible path to
      the product — the next /chat link sits 8-10 screens down, past the article and the FAQ.
      These are the organic entry points, so a reader had to finish the article to find the app.

      The label can't stay: at 360px the header has ~73px left after brand, language, theme and
      burger, and "Open full chat" runs 4.75x longer in Burmese. So the pill becomes a 44px icon
      button and the localized label moves into a visually-hidden span — still the element's
      accessible name, with no duplicated aria-label string to drift out of sync.

      The home page is untouched: it renders its own composer, and it carries an inline copy of
      the nav rather than this shared one.
   ───────────────────────────────────────────────────────────── */
.nav-chat-pill .ncp-ico { display: none; }   /* desktop keeps text + arrow, unchanged */

@media (max-width: 639px) {
  /* Make room for it honestly: at 360px the bar spent 48px on side padding and 48px on three
     16px gaps, which is 96px of the 360 before a single control. */
  .nt-bar { padding-inline: 14px; }
  .nt-bar > div { gap: 8px; }

  html body a.nav-chat-pill {
    display: inline-flex !important;   /* beats the blanket display:none in lib/mobile_menu.php */
    width: 44px; height: 44px; padding: 0; gap: 0;
    justify-content: center; flex: 0 0 auto;
    background: #059669;               /* brand green = primary action, same as the send button */
  }
  html body a.nav-chat-pill:hover { background: #047857; }
  html body a.nav-chat-pill .ncp-ico { display: inline-flex; }
  /* visually hidden, still announced */
  html body a.nav-chat-pill .ncp-txt,
  html body a.nav-chat-pill .ncp-arw {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ─────────────────────────────────────────────────────────────
   7. Internal-link sections become swipe rails on phones
      Compare (12 cards), Learn (8) and Glossary (5) stack to 1776px on a 360px screen —
      roughly a fifth of the whole page, and the reader has to scroll past all of it to reach
      the footer. As single-row rails they cost about 235px instead.

      Deliberately a rail and not `display:none` on the extra cards: every one of the 25
      anchors stays rendered and in the viewport, so nothing is hidden from crawlers and no
      anchor text gets discounted. Cards are sized at 78% so the next one always peeks in —
      that overhang is the only affordance needed to say "this scrolls".
   ───────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  #compare > div > .grid,
  #learn > div > .grid,
  #glossary > div > .grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    overscroll-behavior-x: contain;      /* don't let a flick turn into browser back-navigation */
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 24px;
    /* bleed past the section's 24px padding so the rail runs edge to edge, while the first
       card still lines up with the heading above it */
    margin-inline: -24px;
    padding-inline: 24px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  #compare > div > .grid::-webkit-scrollbar,
  #learn > div > .grid::-webkit-scrollbar,
  #glossary > div > .grid::-webkit-scrollbar { display: none; }

  #compare > div > .grid > a,
  #learn > div > .grid > a,
  #glossary > div > .grid > a { scroll-snap-align: start; }
}

/* ─────────────────────────────────────────────────────────────
   8. Feature cards: icon beside the heading instead of stacked above it
      Six cards at 212px each ran ~1350px on a phone. Most of that is structure, not content:
      28px of padding all round, then a 40px icon with its own 16px margin sitting on a line of
      its own above the heading. Pairing the icon with the heading and tightening the padding
      recovers about 390px.

      Deliberately NOT line-clamping the descriptions. Clamping would save another ~190px, but
      it truncates unevenly across locales — English would show almost the whole sentence where
      Burmese, at 1.6x the length, would show a third of it — and a cut sentence with no "more"
      control reads as broken. Structure is the honest thing to compress here, not the copy.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  #features .grid { gap: 10px; }

  #features .feature-card {
    padding: 16px 18px;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 7px;
    align-items: center;
  }
  #features .feature-card > div:first-child {   /* the icon tile */
    width: 34px; height: 34px; margin-bottom: 0;
    grid-column: 1; grid-row: 1;
  }
  #features .feature-card > h3 {
    margin-bottom: 0;
    grid-column: 2; grid-row: 1;
  }
  #features .feature-card > p {                 /* full width beneath both */
    grid-column: 1 / -1; grid-row: 2;
  }
}

/* ─────────────────────────────────────────────────────────────
   9. A 12px floor for micro-text
      Measured on prod: the "Sponsored" disclosure rendered at 8.8px in the chat sidebar and
      9.9px on the home card — the smallest text on the site was the one label that most needs
      to be readable. Timestamps sat at 10.9px, the anonymous id at 10.4px, Trends tags at
      11.2px. Google's mobile check flags text under ~12px, and several of these are uppercase,
      which does nothing outside Latin — so in Arabic, Thai or Burmese they were simply tiny.

      12px is a floor, not a redesign: nothing here grows past it, and none of these elements
      has a fixed width. !important is deliberate — some of the values sit inside narrow-phone
      media queries that would otherwise re-shrink them at exactly the width that hurts most.
   ───────────────────────────────────────────────────────────── */
.pick-label,                       /* "Sponsored" — 8.8px sidebar / 9.9px home */
.promo-disc, .promo-card .promo-disc, .promo-inline .promo-disc,
.bonus-bar .bonus-sub,
.ht-tag,                           /* Trends strip tags */
.app-banner-text span,
#chatList .chat-item .ci-time, #chatList .chat-item .ci-del.confirming,
aside.sidebar .uid-line, aside.sidebar button.new-chat,
.continue-divider, .bubble .tag, .bubble details.think summary,
.meta, .markdown-body .copy-code, .attach-chip .ac-st,
.turn-control label, .hint, kbd,
.ns-label, .ns-chat-tm,
.tr-chip, .nt-tag, .nt-metric .k, .nt-card .kx, .nt-chapter-kicker,
.article-kicker, .article-toc-h, .related-h, .product-cta-label, .product-cta-disc,
.prose-nt .nt-kicker, .hub-card-meta,
.pick-txt, .pick-txt span, .pick-sub, .pick-x,   /* ad-card body copy sat at 10.9px */
.turn-control span {                             /* "Powered by" — set by an inline style, hence !important */
  font-size: 12px !important;
}

/* These two already sit above 12px at some widths, so they get their own value rather than the
   blanket one — a floor must never shrink anything. (.label was dropped from the list above:
   the bare class is too generic to force a size onto.) */
.bonus-bar .bonus-cta, .avatar { font-size: 12.5px !important; }

/* ─────────────────────────────────────────────────────────────
   11. Composer: give the text the full width
      Users reported the input feels tiny when they have something long to write. Measured at
      360px: attach + mic + send take 132px, gaps 24px and padding 28px, so the textarea was
      left with ~176px — text wrapped after three words while three buttons sat beside it.

      On phones the field now takes a row of its own and the controls drop underneath, which is
      what every mainstream chat app does. Same markup, same buttons, roughly double the writing
      width. The composer grows by one button row; that is space well spent on the one control
      the whole page exists for.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  /* The text keeps its own full-width row - one row cannot work here: at 390px the three 44px
     controls leave it 176px, and a placeholder like "Спросите что угодно..." needs about 200,
     so it wrapped and was cut in half.

     What made the field feel small was never the width. It was a 24px slot with its own focus
     ring sitting inside a much larger frame that had a second ring, so the eye read a small box
     inside a big box. Now the text owns the upper half of the composer and there is one ring
     around the whole thing. */
  .entry-inner {
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 10px 6px;
    row-gap: 2px;
  }
  .entry-inner > textarea {
    flex: 1 1 100%;
    order: -1;              /* first row, on its own */
    width: 100%;
    min-height: 52px;       /* the field owns the space instead of hovering as a thin slot */
    padding: 8px 6px 4px;
    max-height: none;       /* the height cap is computed in JS against the visible viewport */
  }
  .entry-inner > button.attach-btn { order: 1; }
  .entry-inner > button.mic-btn    { order: 2; }
  .entry-inner > button.go,
  .entry-inner > button.stop       { order: 3; margin-inline-start: auto; }
  /* Straight from the Android app: no mic once there is something to send. */
  .entry-inner.has-text > button.mic-btn { display: none; }
}

/* SE-class widths: four 44-54px controls plus the wordmark need every pixel back. */
@media (max-width: 360px) {
  .nt-bar { padding-inline: 10px; }
  .nt-bar > div { gap: 6px; }

  /* The chat header is a separate component from .nt-bar and overflowed by 3px at 320px:
     drawer toggle + wordmark + theme toggle + share + back arrow against 44px of side padding. */
  /* html body … because this file loads before app.php's own inline <style>, so an equal
     specificity rule would lose on source order. */
  html body header { padding-inline: 12px; }
  html body header .header-actions { gap: 6px; }
}

/* ─────────────────────────────────────────────────────────────
   10. Touch targets
      A fingertip needs ~44px. The footer links were 20px tall stacked 28px apart, so one tap
      covered two rows and opened the wrong one.

      Two treatments, because the constraint differs:
      (a) the footer gets REAL height — 12 links crammed into a 28px rhythm is the one place
          where the extra air is an improvement rather than a cost;
      (b) everything else keeps its painted size and gains an invisible overlay, because those
          controls sit beside headings where growing the box would push the layout around.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  /* (a) footer — real 44px rows */
  footer .gap-6 > a { min-height: 44px; display: inline-flex; align-items: center; }
  footer nav.nt-legal a { min-height: 44px; }

  /* Free wins: both sit in a row whose height is already driven by a 44px sibling, so the box
     grows into space that already exists and nothing shifts. */
  .nt-bar > a { min-height: 44px; display: inline-flex; align-items: center; }
  html body .lang-trigger { min-height: 44px; }   /* page styles load later, so out-specify them */

  /* (b) invisible hit area — the ::after sits inside the control, so a tap on it still
         activates the control itself. Nothing moves; only the catchable area grows. */
  .send-btn, #goBtn, #stopBtn { position: relative; }
  .send-btn::after, #goBtn::after, #stopBtn::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
  }

  #shuffleBtn, a.text-sm.font-medium.text-emerald-700 { position: relative; }
  /* Biased upward: below these controls sit the suggestion chips and the card grids, and a
     symmetric overlay would reach into them and steal the first row's taps. */
  #shuffleBtn::after, a.text-sm.font-medium.text-emerald-700::after {
    content: ""; position: absolute;
    top: -18px; bottom: -8px; left: -10px; right: -10px;
  }
}