/* Arti tactile prototype (ARTI-409). Values follow reports/ARTI-402.md.
   Every "after" value lives in a custom property so the build thread can lift it. */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Core.f35c9902a5.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0020-007E, U+00A0-00A3, U+00A5, U+00A8-00AC, U+00AE, U+00B0-00B3, U+00B5-00B7, U+00B9-0148, U+014A-017F, U+02BC,
    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+2000-2001, U+2011-2014, U+2018-2023, U+2026, U+2030-2031, U+2034,
    U+2039-203A, U+203C-203D, U+2043-2044, U+2047-204D, U+204F, U+2070-2071, U+2074-207B, U+207D-208E, U+2090-2093,
    U+2095-209C, U+20AC, U+2122, U+2190, U+2192, U+2194, U+2196-2199, U+2212, U+2248, U+2260, U+2264-2265;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Extended.b5240fb412.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+00A4, U+00A6-00A7, U+00AF, U+00B4, U+00B8, U+0180-01C3, U+01C5-024F, U+0259, U+02BB, U+02C6, U+02DA, U+02DC,
    U+0374-0376, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03D7, U+03DC-03DD, U+03F0-03F6, U+03F9-03FA,
    U+03FC-045F, U+0490-0491, U+04B0-04B1, U+1E00-1E9B, U+1E9D-1EFF, U+2002-200B, U+2010, U+2015-2017, U+2024-2025,
    U+2027, U+202F, U+2032-2033, U+2035-2038, U+203B, U+203E-2042, U+2045-2046, U+204E, U+2050-2055, U+2057, U+205F,
    U+207C, U+2094, U+20A0-20AB, U+20AD-20AF, U+20B1-20B5, U+20B8-20BA, U+20BC-20C0, U+2100-2101, U+2103, U+2105-2106,
    U+2109, U+2113, U+2116-2117, U+211E-2121, U+2126, U+212A-212B, U+212E, U+2132, U+213B, U+214D, U+2150-217F,
    U+2183-2186, U+2189, U+2191, U+2193, U+2195, U+2202, U+2205-2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2236,
    U+2295-2298, U+2460-2468, U+24B6-24CF, U+24EA, U+25A0-25A2, U+25AA, U+25B2-25B3, U+25B6-25B7, U+25BA-25BD,
    U+25C0-25C1, U+25C4-25C7, U+25CA-25CB, U+25CF, U+25E6, U+25EF, U+2600, U+2605-2606, U+263C, U+2661, U+2665,
    U+266A-266B, U+26A0;
}

:root {
  /* packages/design/src/tokens.ts */
  --ink: #181c21;
  --ink-2: #43474f;
  --muted: #5f6b76;
  --faint: #8a929c;
  --navy: #00005b;
  --navy-wash: #ecedf8;
  --navy-stage: #f4f5fb;
  --navy-line: #dde1f2;
  --red: #ff3246;
  --line: #eef0f3;
  --hair: #e5e7eb;
  --quiet: #f7f8fa;
  --bubble: #f2f3f5;
  --wait-bg: #fff1f2;
  --wait-ink: #c0182e;
  --ok: #16845d;
  --ok-bg: #eaf6f1;
  --scrim: rgb(24 28 33 / 32%);

  --r-tile: 12px;
  --r-bubble: 18px;
  --r-choice: 20px;
  --r-card: 22px;
  --r-composer: 26px;
  --r-sheet: 30px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* ARTI-402 PR 1: the four shadows (ink = rgb 24 28 33) */
  --shadow-control: 0 1px 2px rgb(24 28 33 / 12%), 0 0 0 1px rgb(24 28 33 / 8%);
  --shadow-card: 0 1px 2px rgb(24 28 33 / 10%), 0 3px 4px -2px rgb(24 28 33 / 8%);
  --shadow-menu: 0 0 0 1px rgb(24 28 33 / 8%), 0 1px 2px rgb(24 28 33 / 12%), 0 4px 8px -4px rgb(24 28 33 / 16%);
  --shadow-floating: var(--shadow-menu);
  --shadow-handle: inset 0 -0.5px 0 rgb(0 0 0 / 8%), 0 0 0 0.5px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 28%);
  --glass-inset: inset 0 1px 1px rgb(255 255 255 / 95%), inset 0 -1px 1px rgb(255 255 255 / 50%), inset 0 0 0 0.5px rgb(255 255 255 / 70%);

  /* today's recipes, for Sebelum */
  --old-glass-drop: 0 0 0 0.5px rgb(24 28 33 / 12%), 0 8px 22px rgb(0 0 40 / 10%), 0 1px 3px rgb(0 0 40 / 6%);
  --old-popover: 0 14px 36px rgb(0 26 65 / 15%);
  --old-sheet: 0 -8px 32px rgb(0 0 91 / 8%);

  --sat: env(safe-area-inset-top, 0px);
  --header-h: calc(var(--sat) + 60px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; background: #dfe2e7; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 450;
  font-size: 15px;
  line-height: 18px;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}
button, a {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
svg { display: block; flex: none; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }

.shell { position: fixed; inset: 0; display: flex; flex-direction: column; max-width: 430px; margin: 0 auto; background: #fff; }
.app {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #fff;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
[data-mode='after'] .only-before,
[data-mode='before'] .only-after { display: none !important; }

/* ---------- press ladder ---------- */
.p { transition: transform 100ms var(--ease-out); transform-origin: center; }
.p.down { transform: scale(var(--ps, 1)); transition-duration: 150ms; }
[data-mode='after'] .p[data-p='btn'] { --ps: 0.97; }
[data-mode='after'] .p[data-p='card'] { --ps: 0.99; }
[data-mode='after'] .p[data-p='row'] { --ps: 0.99; }
[data-mode='after'] .p[data-p='round'] { --ps: 0.94; }
[data-mode='after'] .p[data-p='icon'] { --ps: 0.92; }
[data-mode='before'] .p[data-p='btn'],
[data-mode='before'] .p[data-p='card'],
[data-mode='before'] .p[data-p='row'],
[data-mode='before'] .p[data-p='round'],
[data-mode='before'] .p[data-p='action'] { --ps: 0.97; }
[data-mode='after'] .p[data-p='action'] { --ps: 0.92; }
[data-mode='before'] .p[data-p='icon'] { --ps: 0.9; transition: none; }
@media (prefers-reduced-motion: reduce) {
  [data-mode='before'] .p.down { transform: none; }
}

/* ---------- header ---------- */
.hdr {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  height: var(--header-h);
  padding: calc(var(--sat) + 8px) 20px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.hdr > * { pointer-events: auto; }
.hdr .grow { flex: 1; }
.hdr-left,
.hdr-center { background: #fff; }
.hdr-title { font-size: 17px; line-height: 22px; font-weight: 600; }
.hdr-center .hdr-title { flex: 1; text-align: center; }
.hdr-left .hdr-title { flex: 1; padding-left: 4px; }

.glass {
  background-color: rgb(255 255 255 / 42%);
  background-image: linear-gradient(160deg, rgb(255 255 255 / 62%) 0%, rgb(255 255 255 / 0%) 42%, rgb(255 255 255 / 0%) 72%, rgb(255 255 255 / 28%) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(1.9) brightness(1.06);
  backdrop-filter: blur(12px) saturate(1.9) brightness(1.06);
}
[data-mode='after'] .glass { box-shadow: var(--glass-inset), var(--shadow-floating); }
[data-mode='before'] .glass { box-shadow: var(--glass-inset), var(--old-glass-drop); }
.round {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--ink);
}
.round svg { width: 20px; height: 20px; }
.credit {
  height: 44px;
  padding: 0 16px 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--navy);
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
}
.star { width: 16px; height: 16px; color: var(--red); }

/* ---------- scroll areas ---------- */
.screen { position: absolute; inset: 0; }
.scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--header-h) + 8px) 20px 120px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  white-space: nowrap;
}
.btn svg { width: 20px; height: 20px; }
.btn.block { display: flex; width: 100%; }
.btn.sm { height: 36px; padding: 0 14px; font-size: 14px; font-weight: 500; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-secondary { color: var(--navy); }
.btn-quiet { color: var(--ink); }
.btn-danger { color: var(--wait-ink); }
.btn-link { height: 44px; color: var(--navy); font-weight: 600; }
.btn-link.danger { color: var(--wait-ink); font-weight: 500; }
[data-mode='after'] :is(.btn-secondary, .btn-quiet, .btn-danger) { background: #fff; box-shadow: var(--shadow-control); }
[data-mode='after'] .btn[aria-disabled='true'] { opacity: 0.5; }
[data-mode='before'] .btn-secondary { background: var(--quiet); }
[data-mode='before'] :is(.btn-quiet, .btn-danger) { background: var(--bubble); }
[data-mode='before'] .btn-primary[aria-disabled='true'] { background: var(--hair); color: var(--faint); }
.btn[aria-disabled='true'] { cursor: default; }
.btn-outline-old { background: #fff; box-shadow: inset 0 0 0 1px var(--hair); }

/* ---------- Tombol screen ---------- */
.spec { display: flex; flex-direction: column; gap: 24px; padding-top: 4px; }
.spec-group { display: flex; flex-direction: column; gap: 10px; }
.spec-label { display: flex; justify-content: space-between; font-size: 13px; line-height: 16px; color: var(--muted); }
.spec-label .v { color: var(--faint); font-variant-numeric: tabular-nums; }
.pair { display: flex; gap: 12px; }
.pair .btn { flex: 1; }
.icons-row { display: flex; align-items: center; gap: 12px; }
.plain-icon { position: relative; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; color: var(--muted); }
.plain-icon svg { width: 18px; height: 18px; }
.plain-icon.ink { color: var(--ink); }
.plain-icon.ink svg { width: 22px; height: 22px; }

/* ---------- cards ---------- */
.app-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r-card);
  background: #fff;
}
[data-mode='after'] .app-card { box-shadow: var(--shadow-card); }
[data-mode='before'] .app-card { box-shadow: inset 0 0 0 1px var(--hair); border-radius: var(--r-choice); }
.tile { width: 44px; height: 44px; border-radius: var(--r-tile); background: var(--navy-wash); color: var(--navy); display: grid; place-items: center; flex: none; }
.tile svg { width: 20px; height: 20px; }
.tile.sm { width: 40px; height: 40px; }
.card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.card-title { font-size: 15px; line-height: 20px; font-weight: 600; }
.card-sub { font-size: 13px; line-height: 16px; color: var(--muted); }
.chev { width: 16px; height: 16px; color: var(--muted); }

/* ---------- Aplikasi AI (sheet backdrop) ---------- */
.display { font-size: 28px; line-height: 34px; font-weight: 600; padding: 12px 0 16px; }
.search { height: 48px; border-radius: 999px; background: var(--bubble); display: flex; align-items: center; gap: 10px; padding: 0 18px; color: var(--faint); font-size: 16px; }
.search svg { width: 20px; height: 20px; color: var(--muted); }
.chips { display: flex; gap: 8px; padding: 16px 20px; margin: 0 -20px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { height: 36px; padding: 0 16px; border-radius: 999px; font-size: 15px; display: inline-flex; align-items: center; flex: none; color: var(--ink); }
.chip.on { background: var(--navy); color: #fff; font-weight: 600; }
[data-mode='after'] .chip:not(.on) { background: #fff; box-shadow: var(--shadow-control); }
[data-mode='before'] .chip:not(.on) { background: var(--bubble); }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* ---------- sheets ---------- */
.layer { position: absolute; inset: 0; z-index: 60; }
.scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; }
[data-mode='after'] .scrim { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: 0 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
  transform: translate3d(0, 0, 0);
}
.sheet::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 64px; background: #fff; }
[data-mode='after'] .sheet { touch-action: none; padding-top: 28px; }
[data-mode='before'] .sheet { box-shadow: var(--old-sheet); padding-top: 10px; }
.grab { display: flex; align-items: center; justify-content: center; }
.grab span { width: 36px; height: 5px; border-radius: 999px; }
[data-mode='after'] .grab { position: absolute; left: calc(50% - 44px); top: -36.5px; width: 88px; height: 44px; }
[data-mode='after'] .grab span { background: #fff; box-shadow: var(--shadow-handle); }
[data-mode='before'] .grab { width: 100%; height: 20px; margin: -8px 0 6px; touch-action: none; cursor: grab; }
[data-mode='before'] .grab span { background: var(--hair); }
[data-mode='before'] .grab.down { transform: none; }

.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sheet-title { font-size: 20px; line-height: 26px; font-weight: 600; padding-top: 4px; }
.round.quiet { background: var(--bubble); }
.round.quiet svg { width: 18px; height: 18px; }
.who { display: flex; align-items: center; gap: 14px; padding: 22px 0 14px; }
.avatar { width: 56px; height: 56px; border-radius: 999px; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 19px; font-weight: 600; flex: none; }
.who-label { font-size: 13px; line-height: 16px; color: var(--muted); }
.who-value { font-size: 17px; line-height: 22px; font-weight: 600; }
.prof-rows { display: flex; flex-direction: column; }
.prof-row { display: flex; align-items: center; gap: 14px; min-height: 52px; font-size: 16px; line-height: 22px; }
.prof-row > svg:first-child { width: 20px; height: 20px; }
.prof-row .lbl { flex: 1; text-align: left; }
[data-mode='before'] .prof-rows { border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--hair); padding: 0 16px; margin-top: 6px; }
[data-mode='before'] .prof-row + .prof-row { box-shadow: inset 0 1px 0 var(--line); }
.sheet-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 24px; }

.confirm { display: flex; gap: 14px; padding-bottom: 20px; }
.confirm .tile { background: var(--wait-bg); color: var(--wait-ink); border-radius: 999px; }
.confirm-title { font-size: 20px; line-height: 26px; font-weight: 510; }
.confirm-desc { font-size: 14px; line-height: 19px; color: var(--muted); padding-top: 4px; }

/* ---------- chat ---------- */
.chat-scroll { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 100px; }
.chat-inner { display: flex; flex-direction: column; gap: 12px; }
.stamp { text-align: center; font-size: 12px; line-height: 16px; color: var(--faint); padding-bottom: 6px; }
.bubble { font-size: 16px; line-height: 22px; padding: 11px 14px; border-radius: var(--r-bubble); }
.bubble.me { align-self: flex-end; max-width: 280px; background: var(--navy); color: #fff; }
.bubble.arti { align-self: flex-start; max-width: 336px; background: var(--bubble); }
.bubble ol { list-style: none; counter-reset: n; display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.bubble li { counter-increment: n; display: grid; grid-template-columns: 26px 1fr; }
.bubble li::before { content: counter(n) '.'; color: var(--navy); font-weight: 600; }
.actions { display: flex; align-items: center; margin-left: -6px; margin-top: -4px; }
[data-mode='before'] .actions { gap: 2px; }
[data-mode='after'] .actions { gap: 8px; }
.act { position: relative; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; color: var(--muted); }
.act svg { width: 18px; height: 18px; }
[data-mode='after'] .act::after { content: ''; position: absolute; inset: -4px; border-radius: 999px; }
.cost { padding-left: 6px; font-size: 13px; line-height: 16px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.swap { display: grid; }
.swap > * { grid-area: 1 / 1; }
.swap .alt { color: var(--ok); opacity: 0; transform: scale(0.5); }
.copied .swap .main { opacity: 0; transform: scale(0.5); }
.copied .swap .alt { opacity: 1; transform: none; }
[data-mode='after'] .swap > * { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }

.composer {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  z-index: 15;
  min-height: 56px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
}
.composer .ph { flex: 1; font-size: 16px; color: var(--faint); padding-left: 2px; }
.cbtn { position: relative; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: var(--ink); }
.cbtn svg { width: 20px; height: 20px; }
[data-mode='after'] .cbtn::after { content: ''; position: absolute; inset: -2px; border-radius: 999px; }
.send { width: 44px; height: 44px; background: var(--navy); color: #fff; }
.send::after { display: none; }

.hitviz { position: absolute; inset: 0; border-radius: 999px; border: 1px solid var(--navy); pointer-events: none; display: none; }
[data-mode='after'] .act .hitviz { inset: -4px; }
[data-mode='after'] .cbtn:not(.send) .hitviz { inset: -2px; }
[data-hits='on'] .hitviz { display: block; }

.menu {
  position: absolute;
  top: calc(var(--header-h) - 4px);
  right: 20px;
  z-index: 40;
  width: 220px;
  padding: 6px;
  border-radius: 18px;
  background: #fff;
  transform-origin: top right;
}
[data-mode='after'] .menu {
  box-shadow: var(--shadow-menu);
  opacity: 0;
  transform: scale(0.97);
  visibility: hidden;
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out), visibility 0s linear 120ms;
}
[data-mode='after'] .menu.open {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), visibility 0s;
}
[data-mode='before'] .menu { display: none; box-shadow: inset 0 0 0 1px var(--hair), var(--old-popover); }
[data-mode='before'] .menu.open { display: block; }
.mi { width: 100%; height: 46px; padding: 0 12px; border-radius: 12px; display: flex; align-items: center; gap: 12px; font-size: 15px; }
.mi svg { width: 20px; height: 20px; }
.mi.danger { color: var(--wait-ink); }
.catch { position: absolute; inset: 0; z-index: 35; }

/* ---------- Arti Pass ---------- */
.pass { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.pass-card { position: relative; border-radius: var(--r-card); padding: 20px; }
.mascot { position: absolute; top: 14px; right: 14px; width: 76px; height: 76px; }
.pass-name { display: flex; align-items: center; gap: 6px; font-size: 15px; line-height: 20px; font-weight: 600; }
.pass-name .star { width: 14px; height: 14px; }
.score { font-size: 44px; line-height: 48px; font-weight: 600; padding-top: 10px; font-variant-numeric: tabular-nums; }
.pass-foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 16px; margin-top: 14px; font-size: 13px; line-height: 16px; color: var(--ink-2); }
.token { display: flex; align-items: center; gap: 12px; border-radius: var(--r-card); padding: 14px 16px; }
.token .tile { background: #fff; }
.token-num { display: flex; align-items: baseline; gap: 4px; }
.token-num b { font-size: 20px; line-height: 26px; font-weight: 600; }
.benefit { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; }
.benefit .tile { width: 40px; height: 40px; }
[data-mode='after'] :is(.pass-card, .token, .benefit) { background: #fff; box-shadow: var(--shadow-card); border-radius: var(--r-card); }
[data-mode='after'] .pass-foot { margin-top: 2px; }
[data-mode='before'] :is(.pass-card, .token) { background: var(--navy-stage); }
[data-mode='before'] .pass-foot { box-shadow: inset 0 1px 0 var(--navy-line); }
[data-mode='before'] .benefit { border-radius: var(--r-choice); box-shadow: inset 0 0 0 1px var(--hair); }
[data-mode='after'] .beli { background: #fff; box-shadow: var(--shadow-control); color: var(--navy); }
[data-mode='before'] .beli { background: #fff; box-shadow: inset 0 0 0 1px var(--hair); color: var(--navy); }
.pass-rows { display: flex; flex-direction: column; padding-top: 6px; }
.pass-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 4px; font-size: 15px; font-weight: 500; text-align: left; }
.pass-row > svg:first-child { width: 20px; height: 20px; }
.pass-row .lbl { flex: 1; }
[data-mode='before'] .pass-row { box-shadow: inset 0 1px 0 var(--line); }

.dock {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  z-index: 15;
  height: 64px;
  border-radius: 32px;
  display: flex;
  padding: 6px;
}
.dock-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 26px; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--muted); }
.dock-item svg { width: 22px; height: 22px; }

/* ---------- toasts ---------- */
.toasts { position: absolute; left: 16px; right: 16px; z-index: 90; display: flex; justify-content: center; pointer-events: none; }
[data-mode='after'] .toasts { top: var(--header-h); }
[data-mode='before'] .toasts { top: calc(var(--sat) + 12px); }
.toast { pointer-events: auto; display: flex; align-items: center; color: #fff; background: var(--navy); }
[data-mode='after'] .toast {
  width: 100%;
  min-height: 48px;
  gap: 12px;
  padding: 12px 18px 12px 16px;
  border-radius: 24px;
  font-size: 15px;
  line-height: 20px;
  box-shadow: var(--shadow-floating);
}
[data-mode='after'] .toast svg { width: 20px; height: 20px; }
[data-mode='before'] .toast {
  width: 100%;
  min-height: 56px;
  gap: 14px;
  padding: 10px 16px 10px 10px;
  border-radius: 12px;
  border: 1px solid rgb(255 255 255 / 10%);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  box-shadow: var(--old-popover);
}
.toast .ttile { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok); flex: none; }
.toast .ttile svg { width: 20px; height: 20px; }
.toast.danger .ttile { background: var(--wait-bg); color: var(--wait-ink); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px) scale(0.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(12px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.toast.enter { animation: toast-in 280ms var(--ease-out); }
.toast.leave { animation: toast-out 200ms var(--ease-out) forwards; }
@media (prefers-reduced-motion: reduce) {
  [data-mode='before'] .toast.enter { animation: none; }
  [data-mode='after'] .toast.enter { animation: fade-in 200ms var(--ease-out); }
  .toast.leave { animation: fade-out 200ms var(--ease-out) forwards; }
  [data-mode='after'] .menu,
  [data-mode='after'] .menu.open { transform: none; }
  [data-mode='after'] .swap > * { transform: none !important; }
}

/* ---------- prototype tray (not Arti UI) ---------- */
.tray {
  flex: none;
  background: var(--ink);
  color: #fff;
  padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 6px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  user-select: none;
  -webkit-user-select: none;
}
.tray-row { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.ctx { flex: 1; display: flex; }
.tbtn { height: 36px; padding: 0 14px; border-radius: 999px; background: rgb(255 255 255 / 12%); font-size: 14px; font-weight: 500; }
.tbtn[aria-pressed='true'] { background: #fff; color: var(--ink); }
.seg { display: flex; padding: 3px; border-radius: 999px; background: rgb(255 255 255 / 12%); }
.seg button { height: 34px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: rgb(255 255 255 / 70%); }
.seg button[aria-checked='true'] { background: #fff; color: var(--ink); }
.tabs { display: flex; gap: 4px; }
.tabs button { flex: 1; height: 36px; border-radius: 10px; font-size: 13px; font-weight: 500; color: rgb(255 255 255 / 60%); }
.tabs button[aria-selected='true'] { background: rgb(255 255 255 / 14%); color: #fff; }
.note { font-size: 12px; line-height: 16px; color: rgb(255 255 255 / 60%); text-align: center; }