/* wa-android.css - Android layer for the chat skin (wa-ui.css). Material 3 (Expressive) feel, still WhatsApp-like.
   Everything is scoped to html[data-platform="android"][data-skin="wa"]; any other platform / the Classic skin never sees a rule.
   Phone-only layout rules live inside @media (max-width:640px). New CSS features sit behind @supports with a static fallback.
   Pairs with wa-android.js (ripple, extended FAB, scroll state, sheet-first back, haptics, keyboard, theme-color). */

/* ---------- (3) M3 tonal colour system ---------- */
/* tier 1: static fallbacks (light) + the numbers the derived tiers use */
html[data-platform="android"][data-skin="wa"] {
  --m3-mix-base: #ffffff; --m3-pc-pct: 20%;
  --m3-l-pc: .92; --m3-c-pc: .4; --m3-l-onpc: .28; --m3-c-onpc: .7;
  --m3-l-sc: .925; --m3-ch-sc: .025; --m3-l-onsc: .25; --m3-ch-onsc: .04;
  --m3-l-s: .985; --m3-ch-s: .005; --m3-l-c: .957; --m3-ch-c: .01; --m3-l-ch: .93; --m3-ch-ch: .012;
  --m3-l-ov: .87; --m3-l-osv: .42; --m3-ch-o: .012;
  --m3-primary-container: #cfeee5; --m3-on-primary-container: #00382e;
  --m3-secondary-container: #d3e8e0; --m3-on-secondary-container: #0e2d25;
  --m3-surface: #fafdfb; --m3-surface-c: #eef3f0; --m3-surface-ch: #e7eeea;
  --m3-on-surface-var: #404945; --m3-outline-var: #c0c9c4;
  --m3-inverse-surface: #2e3230; --m3-inverse-on: #eff1ef; --m3-inverse-primary: #7fd9c4;
  --m3-bar: #fafdfb; --m3-bar-scrolled: #eef3f0;
  --m3-scrim: rgba(0, 0, 0, .32);
  --m3-ease: cubic-bezier(.2, 0, 0, 1); --m3-ease-dec: cubic-bezier(.05, .7, .1, 1);
  --wa-and-bar-now: var(--m3-bar);
  --wa-head: var(--wa-and-bar-now);
  --accent-soft: var(--m3-secondary-container);
  --surface-2: var(--m3-surface-c);
}
html[data-platform="android"][data-skin="wa"].wa-and-scrolled { --wa-and-bar-now: var(--m3-bar-scrolled); }
/* tier 1, dark: M3 dark tones (the three ways the app can be dark, see wa-ui.css) */
@media (prefers-color-scheme: dark) {
  html[data-platform="android"][data-skin="wa"]:not([data-theme]) {
    --m3-mix-base: #000000; --m3-mix-base-inv: #ffffff; --m3-pc-pct: 38%;
    --m3-l-pc: .34; --m3-c-pc: .7; --m3-l-onpc: .9; --m3-c-onpc: .35;
    --m3-l-sc: .33; --m3-ch-sc: .035; --m3-l-onsc: .9; --m3-ch-onsc: .03;
    --m3-l-s: .175; --m3-ch-s: .012; --m3-l-c: .215; --m3-ch-c: .014; --m3-l-ch: .255; --m3-ch-ch: .016;
    --m3-l-ov: .38; --m3-l-osv: .8; --m3-ch-o: .01;
    --m3-primary-container: #005143; --m3-on-primary-container: #a0f2dd;
    --m3-secondary-container: #2e4a42; --m3-on-secondary-container: #cde8e0;
    --m3-surface: #0f1513; --m3-surface-c: #1a211f; --m3-surface-ch: #252c2a;
    --m3-on-surface-var: #bfc9c4; --m3-outline-var: #3f4945;
    --m3-inverse-surface: #dde4e0; --m3-inverse-on: #2b322f; --m3-inverse-primary: #006b5a;
    --m3-bar: #0f1513; --m3-bar-scrolled: #1a211f; --m3-scrim: rgba(0, 0, 0, .5);
    --bg: var(--m3-surface); --surface: var(--m3-surface); --surface-2: var(--m3-surface-ch); --border: var(--m3-outline-var); --muted: var(--m3-on-surface-var);
  }
}
html[data-platform="android"][data-skin="wa"][data-theme="dark"], html[data-platform="android"][data-skin="wa"][data-theme="midnight"], html[data-platform="android"][data-skin="wa"][data-theme="hc-dark"] {
  --m3-mix-base: #000000; --m3-mix-base-inv: #ffffff; --m3-pc-pct: 38%;
  --m3-l-pc: .34; --m3-c-pc: .7; --m3-l-onpc: .9; --m3-c-onpc: .35;
  --m3-l-sc: .33; --m3-ch-sc: .035; --m3-l-onsc: .9; --m3-ch-onsc: .03;
  --m3-l-s: .175; --m3-ch-s: .012; --m3-l-c: .215; --m3-ch-c: .014; --m3-l-ch: .255; --m3-ch-ch: .016;
  --m3-l-ov: .38; --m3-l-osv: .8; --m3-ch-o: .01;
  --m3-primary-container: #005143; --m3-on-primary-container: #a0f2dd;
  --m3-secondary-container: #2e4a42; --m3-on-secondary-container: #cde8e0;
  --m3-surface: #0f1513; --m3-surface-c: #1a211f; --m3-surface-ch: #252c2a;
  --m3-on-surface-var: #bfc9c4; --m3-outline-var: #3f4945;
  --m3-inverse-surface: #dde4e0; --m3-inverse-on: #2b322f; --m3-inverse-primary: #006b5a;
  --m3-bar: #0f1513; --m3-bar-scrolled: #1a211f; --m3-scrim: rgba(0, 0, 0, .5);
}
html[data-platform="android"][data-skin="wa"][data-theme="dark"] { --bg: var(--m3-surface); --surface: var(--m3-surface); --surface-2: var(--m3-surface-ch); --border: var(--m3-outline-var); --muted: var(--m3-on-surface-var); }
/* tier 2: colour-mix() from the accent. :not(#_) lifts specificity over the dark selectors above */
@supports (color: color-mix(in oklch, red 50%, blue)) {
  html[data-platform="android"][data-skin="wa"]:not(#_) {
    --m3-primary-container: color-mix(in oklch, var(--accent) var(--m3-pc-pct), var(--m3-mix-base));
    --m3-on-primary-container: color-mix(in oklch, var(--accent) 35%, var(--m3-mix-base-inv, #000));
    --m3-secondary-container: color-mix(in oklch, color-mix(in oklch, var(--accent) 22%, var(--m3-mix-base)) 60%, var(--m3-surface));
    --m3-surface-c: color-mix(in oklch, var(--accent) 5%, var(--m3-surface));
    --m3-surface-ch: color-mix(in oklch, var(--accent) 9%, var(--m3-surface));
  }
}
/* tier 3: relative colour syntax in OKLCH - hue follows the accent, lightness/chroma follow the M3 tone numbers above */
@supports (color: oklch(from red l c h)) {
  html[data-platform="android"][data-skin="wa"]:not(#_) {
    --m3-primary-container: oklch(from var(--accent) var(--m3-l-pc) calc(c * var(--m3-c-pc)) h);
    --m3-on-primary-container: oklch(from var(--accent) var(--m3-l-onpc) calc(c * var(--m3-c-onpc)) h);
    --m3-secondary-container: oklch(from var(--accent) var(--m3-l-sc) var(--m3-ch-sc) h);
    --m3-on-secondary-container: oklch(from var(--accent) var(--m3-l-onsc) var(--m3-ch-onsc) h);
    --m3-surface: oklch(from var(--accent) var(--m3-l-s) var(--m3-ch-s) h);
    --m3-surface-c: oklch(from var(--accent) var(--m3-l-c) var(--m3-ch-c) h);
    --m3-surface-ch: oklch(from var(--accent) var(--m3-l-ch) var(--m3-ch-ch) h);
    --m3-outline-var: oklch(from var(--accent) var(--m3-l-ov) var(--m3-ch-o) h);
    --m3-on-surface-var: oklch(from var(--accent) var(--m3-l-osv) var(--m3-ch-o) h);
    --m3-bar: var(--m3-surface); --m3-bar-scrolled: var(--m3-surface-c);
  }
}
/* the bar colour animates between rest and scrolled where @property exists (it is only a nicety) */
@property --wa-and-bar-now { syntax: "<color>"; inherits: true; initial-value: transparent; }
@media (prefers-reduced-motion: no-preference) {
  html[data-platform="android"][data-skin="wa"] { transition: --wa-and-bar-now .2s var(--m3-ease); }
}

/* ---------- (12) pull-to-refresh: never switch Chrome's own gesture off on the list pages ---------- */
html[data-platform="android"][data-skin="wa"], html[data-platform="android"][data-skin="wa"] body { overscroll-behavior-y: auto; }

/* ---------- (13) a11y: visible focus, 48dp targets ---------- */
html[data-platform="android"][data-skin="wa"] :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
html[data-platform="android"][data-skin="wa"] .wa-pill input:focus-visible { outline: none; }
html[data-platform="android"][data-skin="wa"] .wa-ib { width: 48px; min-width: 48px; height: 48px; min-height: 48px; }
html[data-platform="android"][data-skin="wa"] .wa-qb, html[data-platform="android"][data-skin="wa"] .wa-plus { min-height: 48px; }
html[data-platform="android"][data-skin="wa"] .wa-plus { width: 48px; min-width: 48px; height: 48px; }
html[data-platform="android"][data-skin="wa"] .wa-mi { min-height: 56px; }

/* ---------- (4) ripple: hosts + the span the script adds ---------- */
html[data-platform="android"][data-skin="wa"] :is(.wa-row, .wa-qb, .wa-mi, .wa-chip, .wa-ib, .wa-tab-i, .wa-plus) { position: relative; -webkit-tap-highlight-color: transparent; }
.wa-and-rc { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 1; contain: paint; }
.wa-and-chip .wa-and-rc, html[data-platform="android"] .wa-chip > .wa-and-rc { top: 8px; bottom: 8px; border-radius: 16px; }
.wa-and-rip { position: absolute; border-radius: 50%; background: currentColor; opacity: .16; pointer-events: none; transform: scale(0); will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .wa-and-rip { transform: none !important; opacity: .1; } }

.wa-and-fl { display: none; } /* label only exists on the phone layout (verifier fix: tablets/desktop width showed it unstyled) */
@media (max-width: 640px) {
  /* ---------- (1) top app bar: 64dp, 22sp title, tonal change + elevation when content scrolls under it ---------- */
  html[data-platform="android"][data-skin="wa"] .topbar { background: var(--wa-and-bar-now); box-shadow: none; transition: box-shadow .2s var(--m3-ease); }
  html[data-platform="android"][data-skin="wa"].wa-and-scrolled .topbar, html[data-platform="android"][data-skin="wa"].wa-and-scrolled .wa-th-head { box-shadow: 0 2px 6px rgba(0, 0, 0, .14), 0 1px 0 var(--m3-outline-var); }
  html[data-platform="android"][data-skin="wa"] .topbar-inner { height: 64px; }
  html[data-platform="android"][data-skin="wa"] .brand > span:last-child { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: 0; }
  html[data-platform="android"][data-skin="wa"] .wa-th-head { min-height: 64px; background: var(--wa-and-bar-now); box-shadow: none; padding-left: 4px; }
  html[data-platform="android"][data-skin="wa"] .wa-th-t b { font-size: 18px; line-height: 24px; font-weight: 600; }
  html[data-platform="android"][data-skin="wa"] .wa-th-title { font-size: 22px; line-height: 28px; font-weight: 500; }
  html[data-platform="android"][data-skin="wa"] .wa-pin { top: calc(64px + env(safe-area-inset-top, 0px)); background: var(--m3-surface-c); }
  html[data-platform="android"][data-skin="wa"] .wa-co { min-height: 36px; border-radius: 12px; background: var(--m3-secondary-container); color: var(--m3-on-secondary-container); }
  html[data-platform="android"][data-skin="wa"] .wa-pill { min-height: 48px; border-radius: 28px; background: var(--m3-surface-ch); }
  html[data-platform="android"][data-skin="wa"] .wa-searchbar { padding-top: 10px; }

  /* ---------- (2) navigation bar: 80dp, 64x32 tonal indicator pill, 12sp labels, small badge ---------- */
  html[data-platform="android"].has-tabbar { --w6-tabbar-h: 80px; }
  html[data-platform="android"][data-skin="wa"] .wa-tabbar { background: var(--m3-surface-c); border-top: 0; box-shadow: none; }
  html[data-platform="android"][data-skin="wa"] .wa-tabbar .wa-tab { height: 80px; justify-content: flex-start; gap: 4px; padding: 12px 4px 16px; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .02em; color: var(--m3-on-surface-var); }
  html[data-platform="android"][data-skin="wa"] .wa-tabbar .wa-tab-i { width: 64px; height: 32px; border-radius: 16px; transition: background-color .25s var(--m3-ease); }
  html[data-platform="android"][data-skin="wa"] .wa-tabbar .wa-tab.active { color: var(--text); font-weight: 700; }
  html[data-platform="android"][data-skin="wa"] .wa-tabbar .wa-tab.active .wa-tab-i { background: var(--m3-secondary-container); color: var(--m3-on-secondary-container); }
  html[data-platform="android"][data-skin="wa"] .wa-tabbar .wa-tab-i .badge { top: -2px; left: calc(50% + 2px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 11px; line-height: 16px; background: var(--bad); color: #fff; }
  html[data-platform="android"][data-skin="wa"] .wa-tabbar .wa-tab-i .badge.hidden { display: none; }

  /* ---------- (5) FAB: 16dp radius, extends into "New document" at the top, icon-only after scrolling down ---------- */
  html[data-platform="android"][data-skin="wa"] .wa-fab { position: fixed; right: 16px; bottom: calc(var(--dms-bottom-offset, 0px) + 16px); width: auto; height: 56px; min-width: 56px; padding: 0; gap: 0; border-radius: 16px;
    background: var(--m3-primary-container); color: var(--m3-on-primary-container); box-shadow: 0 3px 8px rgba(0, 0, 0, .22), 0 1px 3px rgba(0, 0, 0, .16);
    transition: padding .28s var(--m3-ease), transform .3s var(--m3-ease), box-shadow .2s; }
  html[data-platform="android"][data-skin="wa"] .wa-fab:hover { background: var(--m3-primary-container); filter: brightness(.97); }
  html[data-platform="android"][data-skin="wa"] .wa-fab:active { transform: none; }
  html[data-platform="android"][data-skin="wa"] .wa-fab.wa-and-x { padding: 0 20px 0 16px; }
  .wa-and-fl { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .01em; transition: max-width .28s var(--m3-ease), opacity .18s, margin .28s var(--m3-ease); }
  .wa-fab.wa-and-x .wa-and-fl { max-width: 180px; opacity: 1; margin-left: 12px; }
  html[data-platform="android"][data-skin="wa"]:has(#toasts .toast) .wa-fab { transform: translateY(-64px); }

  /* ---------- (7) snackbar ---------- */
  html[data-platform="android"][data-skin="wa"] #toasts { bottom: calc(var(--dms-bottom-offset, 0px) + 8px); padding: 0 8px; gap: 8px; }
  html[data-platform="android"][data-skin="wa"].wa-thread-page #toasts, html[data-platform="android"][data-skin="wa"].wa-info-page #toasts { bottom: calc(var(--wa-and-compose-h, 0px) + var(--wa-and-kb, 0px) + 8px); }
  html[data-platform="android"][data-skin="wa"] .toast { display: flex; align-items: center; gap: 8px; max-width: none; min-height: 48px; padding: 8px 8px 8px 16px; border-radius: 6px;
    background: var(--m3-inverse-surface); color: var(--m3-inverse-on); font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: .02em; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
  html[data-platform="android"][data-skin="wa"] .toast.error { background: var(--bad); color: #fff; }
  html[data-platform="android"][data-skin="wa"] .toast.ok { background: var(--m3-inverse-surface); color: var(--m3-inverse-on); }
  .wa-and-sm { flex: 1; min-width: 0; padding: 4px 0; }
  .toast .wa-and-act { flex: none; min-height: 40px; padding: 0 12px; border: 0; border-radius: 20px; background: transparent; color: var(--m3-inverse-primary); font-size: 14px; font-weight: 600; letter-spacing: .02em; position: relative; }
  .toast.error .wa-and-act { color: #fff; }
  @media (prefers-reduced-motion: no-preference) { html[data-platform="android"][data-skin="wa"] .toast { animation: wa-and-snack .28s var(--m3-ease-dec); } }
  @keyframes wa-and-snack { from { transform: translateY(24px); opacity: 0; } }

  /* ---------- (8) bottom sheets: 28dp radius, 32x4 handle, scrim ---------- */
  html[data-platform="android"][data-skin="wa"] .wa-back { background: var(--m3-scrim); }
  html[data-platform="android"][data-skin="wa"] .wa-sheet { border-radius: 28px 28px 0 0; background: var(--m3-surface-c); max-height: 90vh; bottom: var(--wa-and-kb, 0px); box-shadow: 0 -2px 12px rgba(0, 0, 0, .18); }
  html[data-platform="android"][data-skin="wa"] .wa-sheet-h { background: var(--m3-surface-c); padding: 26px 8px 6px 24px; }
  html[data-platform="android"][data-skin="wa"] .wa-sheet-h b { font-size: 18px; font-weight: 600; }
  html[data-platform="android"][data-skin="wa"] .wa-grab { top: 12px; width: 32px; height: 4px; margin-left: -16px; border-radius: 2px; background: var(--m3-on-surface-var); opacity: .4; }
  html[data-platform="android"][data-skin="wa"] .wa-mi { border-radius: 16px; }
  @media (prefers-reduced-motion: no-preference) { html[data-platform="android"][data-skin="wa"] .wa-sheet { animation: wa-and-sheet .4s var(--m3-ease-dec); } }
  @keyframes wa-and-sheet { from { transform: translateY(100%); } }

  /* ---------- chips, list rows (M3 sizes inside the WhatsApp layout) ---------- */
  html[data-platform="android"][data-skin="wa"] .wa-chip { min-height: 48px; padding: 0 16px; border: 0; background: transparent; position: relative; font-size: 14px; font-weight: 500; letter-spacing: .01em; isolation: isolate; }
  html[data-platform="android"][data-skin="wa"] .wa-chip::before { content: ""; position: absolute; inset: 8px 0; border-radius: 16px; border: 1px solid var(--m3-outline-var); pointer-events: none; z-index: -1; }
  html[data-platform="android"][data-skin="wa"] .wa-chip.on { background: transparent; color: var(--m3-on-secondary-container); }
  html[data-platform="android"][data-skin="wa"] .wa-chip.on::before { background: var(--m3-secondary-container); border-color: transparent; }
  html[data-platform="android"][data-skin="wa"] .wa-chip > * { position: relative; }
  html[data-platform="android"][data-skin="wa"] .wa-chips { padding: 0 12px 4px; }
  html[data-platform="android"][data-skin="wa"] .wa-qb { box-shadow: none; }
  html[data-platform="android"][data-skin="wa"] .wa-qb.ok { background: var(--accent); }

  /* ---------- (11) keyboard: the reply bar rides above the on-screen keyboard (--wa-and-kb is set from visualViewport) ---------- */
  html[data-platform="android"][data-skin="wa"] .wa-compose { transform: translateY(calc(-1 * var(--wa-and-kb, 0px))); }
  @media (prefers-reduced-motion: no-preference) { html[data-platform="android"][data-skin="wa"] .wa-compose { transition: transform .15s var(--m3-ease); } }

  /* ---------- (6) predictive back: the screen you leave shrinks and slides off, the one underneath peeks in.
     wa-motion.js decides html[data-wa-nav] (fwd | back | same); only the "back" pictures are restyled here. :not(#_) beats its injected sheet. ---------- */
  @supports (view-transition-name: x) {
    html[data-platform="android"][data-skin="wa"] .wa-tabbar { view-transition-name: wa-and-tabs; }
    html[data-platform="android"][data-skin="wa"] .wa-fab { view-transition-name: wa-and-fab; }
    html[data-wa-nav=back][data-platform="android"]:not(#_)::view-transition-old(root) { animation: 280ms var(--m3-ease) both wa-and-pb-out; z-index: 2; border-radius: 28px; overflow: hidden; box-shadow: 0 6px 28px rgba(0, 0, 0, .22); transform-origin: 100% 50%; }
    html[data-wa-nav=back][data-platform="android"]:not(#_)::view-transition-new(root) { animation: 320ms var(--m3-ease-dec) both wa-and-pb-in; }
    @keyframes wa-and-pb-out { to { transform: translateX(14%) scale(.86); opacity: 0; } }
    @keyframes wa-and-pb-in { from { transform: translateX(-8%) scale(.96); opacity: .6; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-wa-nav=back][data-platform="android"]:not(#_)::view-transition-old(root), html[data-wa-nav=back][data-platform="android"]:not(#_)::view-transition-new(root) { animation: none !important; }
}
/* info page: cards read as tonal containers on the dark surface (light mode keeps white cards on grey) */
@media (prefers-color-scheme: dark) { html[data-platform="android"][data-skin="wa"]:not([data-theme]) .wa-info .card { background: var(--m3-surface-c); border-color: transparent; } }
html[data-platform="android"][data-skin="wa"][data-theme="dark"] .wa-info .card { background: var(--m3-surface-c); border-color: transparent; }
.wa-and-probe { position: fixed; left: -9px; top: -9px; width: 1px; height: 1px; visibility: hidden; pointer-events: none; }
@media print { .wa-and-rc, .wa-and-probe { display: none !important; } }