/* =====================================================
   TENGOCHAT DESIGN SYSTEM

   TengoFeed after dark. Same brand, same type, same warmth, two steps
   deeper so it is comfortable at night and on a phone in bed. The
   palette below is the platform's own Warm Ember preset with the
   surfaces darkened; nothing here invents a colour the site does not
   already use.

   THE RULES THIS FILE FOLLOWS, SO IT STAYS COHERENT

   1. One accent, used sparingly. Violet carries the brand. Live is the
      only other saturated colour and it means exactly one thing: a
      person is broadcasting right now. Nothing decorative is ever live
      red, or the signal stops meaning anything.

   2. Depth by light, not by borders. Surfaces lift by getting lighter,
      the way a physical thing catches light. Borders are for
      separating, never for containing.

   3. Motion is physical or it is absent. Everything that moves uses a
      spring curve and moves on transform or opacity only, so it runs on
      the GPU and never causes a reflow. Anything that cannot be done
      that way is not animated.

   4. Nothing shifts after paint. Every image, avatar and card has its
      size before its content arrives. Layout shift is the single most
      website-feeling thing an app can do.

   5. Touch targets are 44px, always, even when the thing drawn inside
      them is 20px.
   ===================================================== */

:root {
  /* ---- canvas ----
     TengoFeed's own Warm Ember palette, taken two steps darker. Same
     four brand colours, same warm charcoal family, just deeper: this is
     the night version of the site, not a different product wearing a
     different set of colours. */
  --bg:         #14100D;
  --bg-2:       #1A1512;
  --surface:    #221C17;
  --surface-2:  #2D251E;
  --surface-3:  #382E25;
  --hairline:   rgba(255, 240, 225, .08);
  --hairline-2: rgba(255, 240, 225, .15);

  /* ---- ink ----
     Warm white, not blue white. A neutral grey on a warm brown reads as
     dirty; carrying a little of the background's warmth into the text
     is what makes the two look like one surface. */
  --text:       #FBF6EF;
  --text-2:     #BCAE9F;
  --text-3:     #857868;

  /* ---- brand, exactly the platform's three ---- */
  --yellow:     #FFC53D;
  --orange:     #FF8A3D;
  --coral:      #FF5A4A;

  --accent:     #FF8A3D;
  --accent-2:   #FFA867;
  --accent-dim: rgba(255, 138, 61, .16);

  /* The names the rest of this file was written against, kept as plain
     values so nothing has to be rewritten and nothing can form a loop
     with the aliases in chat.css. */
  --violet:     #FF8A3D;
  --violet-2:   #FFA867;
  --violet-dim: rgba(255, 138, 61, .16);
  --pink:       #FF5A4A;

  --cyan:       #4CD4C0;
  --lime:       #4ADE80;
  --amber:      #FFC53D;

  /* The one gradient, the platform's own, unchanged. */
  --grad:       linear-gradient(135deg, #FFC53D 0%, #FF8A3D 55%, #FF5A4A 100%);
  --grad-soft:  linear-gradient(135deg, rgba(255,197,61,.20), rgba(255,90,74,.12));

  /* ---- live, and only live ----
     Pure red, with no yellow in it. Against a gold and orange brand a
     warm red would disappear, and the whole point of this colour is
     that it appears exactly once on a screen and means one thing. */
  --live:       #FF3B30;
  --live-glow:  rgba(255, 59, 48, .45);

  /* ---- status ---- */
  --ok:         #4FBF80;
  --warn:       #FFC53D;
  --bad:        #E8564B;

  /* ---- type, the platform's own pair ---- */
  --font-display: 'Fredoka', system-ui, -apple-system, sans-serif;
  --font:         'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- motion ----
     spring  overshoots slightly, for things arriving
     out     decelerates, for things leaving
     snap    fast and flat, for state that should feel instant */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --out:    cubic-bezier(.22, 1, .36, 1);
  --snap:   cubic-bezier(.4, 0, .2, 1);

  /* ---- shape ---- */
  --r-xs: 8px;  --r-sm: 12px; --r: 18px; --r-lg: 24px; --r-xl: 32px; --r-full: 999px;

  /* ---- elevation. Warm shadows, because a neutral black shadow on a
     brown surface looks like a hole rather than a lift. ---- */
  --e1: 0 1px 2px rgba(20, 12, 6, .45);
  --e2: 0 4px 16px rgba(20, 12, 6, .45), 0 1px 3px rgba(20, 12, 6, .35);
  --e3: 0 12px 40px rgba(20, 12, 6, .55), 0 2px 8px rgba(20, 12, 6, .4);
  --glow: 0 8px 28px rgba(255, 138, 61, .32);

  /* ---- chrome ---- */
  --bar: 56px;
  --nav: 62px;
  --kb: 0px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}


/* =====================================================
   RESET
   ===================================================== */

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--font);
  font-size: 15px; line-height: 1.45;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  overflow: hidden;
  touch-action: manipulation;
}
/* iOS will scroll the document itself behind a fixed layout unless the
   body is taken out of flow entirely. */
body { position: fixed; inset: 0; }

button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; }
button { cursor: pointer; user-select: none; }
button:disabled { opacity: .45; cursor: default; }
a { color: var(--violet-2); text-decoration: none; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: var(--violet-dim); }

h1,h2,h3,h4,h5 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; margin: 0; line-height: 1.15; }

svg {
  fill: none; stroke: currentColor; stroke-width: 1.85;
  stroke-linecap: round; stroke-linejoin: round;
  width: 22px; height: 22px; flex-shrink: 0;
}
svg.fill { fill: currentColor; stroke: none; }

/* scrollbars are chrome; an app has none */
.tscroll { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tscroll::-webkit-scrollbar { width: 0; height: 0; }

/* Respect the system setting, and the account setting, without having
   to special-case either at every animation. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body.calm *, body.calm *::before, body.calm *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }

/* =====================================================
   PRIMITIVES
   ===================================================== */

/* Every tappable icon. 44px of target around whatever is drawn. */
.ib {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--text-2);
  transition: background .15s var(--snap), color .15s var(--snap), transform .12s var(--spring);
}
.ib:hover { color: var(--text); background: var(--surface); }
.ib:active { transform: scale(.88); background: var(--surface-2); }
.ib.sm { width: 34px; height: 34px; border-radius: var(--r-xs); }
.ib.sm svg { width: 18px; height: 18px; }
.ib.on { color: var(--violet-2); }

.tbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 22px; border-radius: var(--r-sm);
  background: var(--grad); color: #2B1A08;
  font-weight: 650; font-size: 15px; letter-spacing: -.01em;
  box-shadow: var(--glow);
  transition: transform .14s var(--spring), filter .2s, box-shadow .2s;
}
.tbtn:active { transform: scale(.97); }
.tbtn:disabled { box-shadow: none; filter: saturate(.4); }
.tbtn.wide { width: 100%; }
.tbtn.ghost { background: var(--surface-2); color: var(--text); box-shadow: none; }
.tbtn.ghost:hover { background: var(--surface-3); }
.tbtn.line { background: none; border: 1.5px solid var(--hairline-2); color: var(--text); box-shadow: none; }
.tbtn.bad { background: var(--bad); box-shadow: none; }
.tbtn.sm { height: 38px; padding: 0 16px; font-size: 13.5px; border-radius: var(--r-xs); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 34px; padding: 0 14px; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text-2);
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: all .16s var(--snap);
}
.chip:active { transform: scale(.94); }
.chip.on { background: var(--violet); color: #fff; }
.chip svg { width: 15px; height: 15px; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text-2);
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
}
.pill.violet { background: var(--violet-dim); color: var(--violet-2); }
.pill.lime   { background: rgba(61,220,151,.14); color: var(--lime); }
.pill.amber  { background: rgba(255,179,71,.14); color: var(--amber); }

/* The live badge. A dot that breathes, so the eye catches it in a grid
   without anything having to move. */
.pill.live { background: var(--live); color: #fff; }
.pill.live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: breathe 1.6s var(--snap) infinite;
}
@keyframes breathe { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.72); } }

/* =====================================================
   AVATARS
   Sized by a variable so one rule covers every size, and the ring is
   drawn with a pseudo element so it never affects layout.
   ===================================================== */

.av {
  --size: 46px;
  position: relative; flex-shrink: 0;
  width: var(--size); height: var(--size); border-radius: 50%;
  background: var(--surface-2) center/cover no-repeat;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: calc(var(--size) * .4); color: var(--text-2);
  overflow: hidden;
}
.av[data-letter]::after { content: attr(data-letter); }
.av[data-letter] { background-image: linear-gradient(140deg, var(--surface-3), var(--surface)); }
.av.xs { --size: 26px; } .av.sm { --size: 34px; } .av.md { --size: 46px; }
.av.lg { --size: 64px; } .av.xl { --size: 96px; } .av.xxl { --size: 124px; }

.av-wrap { position: relative; flex-shrink: 0; display: grid; place-items: center; }
/* online dot, scaled from the avatar it sits on */
.av-wrap[data-online]::after {
  content: ''; position: absolute; right: 0; bottom: 0;
  width: 30%; height: 30%; max-width: 14px; max-height: 14px; min-width: 9px; min-height: 9px;
  border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 0 2.5px var(--bg);
}
/* a ring for someone who is live, drawn outside the avatar */
.av-wrap.live-ring::before {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--live), var(--pink), var(--violet), var(--live));
  animation: spin 3s linear infinite;
  z-index: -1;
}
.av-wrap.live-ring { padding: 3px; background: var(--bg); border-radius: 50%; isolation: isolate; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =====================================================
   THE SHELL
   ===================================================== */

.tapp { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* A screen is a full-bleed layer. Only one is on at a time, and they
   swap with a short fade and lift rather than a slide, because sliding
   between unrelated tabs reads as going "back" and confuses the
   direction of travel. */
.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding-bottom: calc(var(--nav) + var(--sab));
  opacity: 0; pointer-events: none;
  transform: translate3d(0, 8px, 0);
  transition: opacity .22s var(--out), transform .28s var(--out);
}
.screen.on { opacity: 1; pointer-events: auto; transform: none; }
.screen.full { padding-bottom: 0; }

.tbar {
  height: calc(var(--bar) + var(--sat)); padding: var(--sat) 6px 0;
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid var(--hairline);
  position: relative; z-index: 5;
}
.tbar h1 { flex: 1; font-size: 23px; padding-left: 10px; }
.tbar .sub { font-size: 12px; color: var(--text-3); font-weight: 500; display: block; margin-top: -1px; }

/* =====================================================
   BOTTOM NAVIGATION
   Five destinations. The middle one is the action, raised and on the
   gradient, because a tab bar where every item looks the same makes the
   most important thing invisible.
   ===================================================== */

.nav {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
  height: calc(var(--nav) + var(--sab)); padding-bottom: var(--sab);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(24px) saturate(1.7); -webkit-backdrop-filter: blur(24px) saturate(1.7);
  border-top: 1px solid var(--hairline);
}
.nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--text-3); font-size: 10px; font-weight: 650; letter-spacing: .01em;
  position: relative; transition: color .18s var(--snap);
}
.nav-item svg { width: 23px; height: 23px; transition: transform .28s var(--spring); }
.nav-item.on { color: var(--text); }
.nav-item.on svg { transform: translateY(-2px) scale(1.06); }
.nav-item:active svg { transform: scale(.86); }

/* the raised centre action */
.nav-go {
  display: grid; place-items: center;
}
.nav-go i {
  display: grid; place-items: center;
  width: 46px; height: 38px; border-radius: 13px;
  background: var(--grad); color: #2B1A08; box-shadow: var(--glow);
  transition: transform .2s var(--spring);
}
.nav-go:active i { transform: scale(.9); }
.nav-go i svg { width: 22px; height: 22px; stroke-width: 2.2; }

/* unread and live dots on a tab */
.nav-dot {
  position: absolute; top: 7px; left: 50%; margin-left: 4px;
  min-width: 8px; height: 8px; border-radius: var(--r-full);
  background: var(--violet); box-shadow: 0 0 0 2px var(--bg);
}
.nav-dot.count {
  min-width: 17px; height: 17px; margin-left: 2px; top: 4px;
  padding: 0 4px; font-size: 10px; font-weight: 800; color: #fff;
  display: grid; place-items: center;
}
.nav-dot.live { background: var(--live); }

/* =====================================================
   LISTS
   ===================================================== */

.rows { padding: 4px 8px 20px; }

.trow {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 10px; border-radius: var(--r);
  text-align: left; color: inherit;
  transition: background .14s var(--snap), transform .12s var(--spring);
}
.trow:active { background: var(--surface); transform: scale(.985); }
.trow.on { background: var(--violet-dim); }
.trow-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.trow-t { display: flex; align-items: baseline; gap: 8px; }
.trow-n {
  flex: 1; min-width: 0; font-size: 15.5px; font-weight: 650; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 6px;
}
.trow-time { font-size: 11.5px; color: var(--text-3); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.trow-s { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); min-width: 0; }
.trow-s > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow.unread .trow-s > span { color: var(--text); font-weight: 550; }
.trow.unread .trow-time { color: var(--violet-2); font-weight: 700; }
.trow-s .lock { width: 13px; height: 13px; color: var(--text-3); }

.tbadge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full);
  background: var(--violet); color: #fff;
  font-size: 11px; font-weight: 800; display: grid; place-items: center;
  flex-shrink: 0; font-style: normal;
}
.tbadge.mute { background: var(--surface-3); color: var(--text-3); }

.sec {
  padding: 16px 16px 7px; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}

/* =====================================================
   EMPTY AND LOADING
   A skeleton, not a spinner. A spinner says "wait"; a skeleton says
   "here is the shape of what is coming", and the difference is most of
   how fast an app feels.
   ===================================================== */

.tempty { padding: 56px 32px; text-align: center; }
.tempty-ic {
  width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 24px;
  display: grid; place-items: center; color: var(--violet-2);
  background: var(--grad-soft); border: 1px solid var(--hairline);
}
.tempty-ic svg { width: 32px; height: 32px; }
.tempty h3 { font-size: 19px; margin-bottom: 7px; }
.tempty p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.55; max-width: 300px; margin-inline: auto; }
.tempty .tbtn { margin-top: 20px; }

.skel {
  background: linear-gradient(100deg, var(--surface) 20%, var(--surface-2) 40%, var(--surface) 60%);
  background-size: 300% 100%;
  animation: sweep 1.3s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes sweep { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.tskel-row { height: 66px; margin: 5px 10px; border-radius: var(--r); }
.skel-card { aspect-ratio: 9/16; border-radius: var(--r-lg); }

/* =====================================================
   SHEETS
   Drag to dismiss, spring in. The grip is not decoration: it is the
   affordance that tells a thumb this thing can be pulled.
   ===================================================== */

.tsheet-host { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.tsheet-bg {
  position: absolute; inset: 0; background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: fade .2s var(--snap);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.tsheet {
  position: relative; width: 100%; max-width: 560px;
  max-height: 88dvh; overflow-y: auto; scrollbar-width: none;
  padding: 6px 20px calc(24px + var(--sab));
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  border-top: 1px solid var(--hairline-2);
  box-shadow: 0 -16px 50px rgba(0,0,0,.6);
  animation: sheetUp .36s var(--out);
  will-change: transform;
}
.tsheet::-webkit-scrollbar { width: 0; }
@keyframes sheetUp { from { transform: translate3d(0, 60px, 0); opacity: .4; } to { transform: none; opacity: 1; } }
.tgrip { width: 40px; height: 4px; border-radius: 2px; background: var(--surface-3); margin: 8px auto 16px; }
.tsheet h3 { font-size: 21px; margin-bottom: 6px; }
.tsheet .hint { font-size: 13.5px; color: var(--text-3); line-height: 1.5; margin: 0 0 16px; }
@media (min-width: 720px) {
  .tsheet-host { align-items: center; }
  .tsheet { border-radius: var(--r-xl); max-height: 84dvh; padding-bottom: 24px; animation: sheetIn .26s var(--out); }
  .tgrip { display: none; }
}
@keyframes sheetIn { from { transform: scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }

.topt {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 6px; text-align: left; font-size: 15.5px; color: inherit;
  border-bottom: 1px solid var(--hairline); border-radius: var(--r-xs);
  transition: background .14s var(--snap), padding-left .16s var(--out);
}
.topt:hover { background: var(--surface-2); padding-left: 12px; }
.topt:last-child { border-bottom: 0; }
.topt > svg { color: var(--text-3); }
.topt small { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 1px; font-weight: 400; }
.topt b { font-weight: 600; }
.topt.bad { color: var(--bad); } .topt.bad > svg { color: var(--bad); }
.topt .tail { margin-left: auto; color: var(--text-3); font-size: 13px; }

.tfield { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.tfield > label { font-size: 12px; font-weight: 700; color: var(--text-3); letter-spacing: .01em; }
.tfield input, .tfield textarea, .tfield select {
  width: 100%; padding: 13px 15px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1.5px solid transparent;
  font-size: 16px; transition: border-color .16s var(--snap), background .16s;
}
.tfield input:focus, .tfield textarea:focus, .tfield select:focus { border-color: var(--violet); background: var(--surface); outline: none; }
.tfield textarea { resize: none; line-height: 1.45; }
.tfield .note { font-size: 12px; color: var(--text-3); line-height: 1.45; }

.tseg { display: flex; gap: 3px; padding: 3px; background: var(--surface-2); border-radius: var(--r-sm); }
.tseg button {
  flex: 1; padding: 9px 6px; border-radius: 9px; font-size: 13.5px; font-weight: 650;
  color: var(--text-3); transition: all .18s var(--snap);
}
.tseg button.on { background: var(--violet); color: #fff; }

.tog {
  width: 46px; height: 28px; border-radius: var(--r-full); background: var(--surface-3);
  position: relative; flex-shrink: 0; transition: background .2s var(--snap);
}
.tog::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--text-3);
  transition: transform .26s var(--spring), background .2s;
}
.tog.on { background: var(--violet); }
.tog.on::after { transform: translateX(18px); background: #fff; }

/* =====================================================
   TOAST
   ===================================================== */

.ttoast {
  position: fixed; left: 50%; bottom: calc(var(--nav) + var(--sab) + 18px); z-index: 300;
  transform: translate3d(-50%, 16px, 0) scale(.96); opacity: 0; pointer-events: none;
  max-width: min(440px, 90vw); padding: 12px 20px; border-radius: var(--r-full);
  background: var(--surface-3); color: var(--text);
  border: 1px solid var(--hairline-2); box-shadow: var(--e3);
  font-size: 13.5px; font-weight: 600; text-align: center;
  transition: all .3s var(--spring);
}
.ttoast.on { transform: translate3d(-50%, 0, 0) scale(1); opacity: 1; }
.ttoast.bad { background: var(--bad); border-color: transparent; color: #fff; }
.ttoast.good { background: var(--ok); border-color: transparent; color: #05150E; }

/* =====================================================
   COIN, EARNINGS AND OTHER NUMBERS
   Tabular figures everywhere a number can change, so a counter ticking
   up never makes the text around it jump.
   ===================================================== */

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.stat {
  padding: 14px; border-radius: var(--r); background: var(--surface-2);
  border: 1px solid var(--hairline);
}
.stat b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat span { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.stat.accent { background: var(--grad-soft); border-color: rgba(123,92,250,.3); }
.stat.accent b { color: var(--violet-2); }

/* =====================================================
   A ROW OF SCROLLING CHIPS
   ===================================================== */

.chips {
  display: flex; gap: 8px; padding: 10px 14px;
  overflow-x: auto; scrollbar-width: none; flex-shrink: 0;
  scroll-snap-type: x proximity;
}
.chips::-webkit-scrollbar { display: none; }
.chips > * { scroll-snap-align: start; }
/* Fades at both ends so a cut-off chip reads as "more this way" rather
   than as a rendering mistake. */
.chips-wrap { position: relative; }
.chips-wrap::before, .chips-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 24px; pointer-events: none; z-index: 1;
}
.chips-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.chips-wrap::after { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }

/* =====================================================
   PRESS FEEDBACK
   One class, applied to anything that should feel pressable.
   ===================================================== */

.press { transition: transform .12s var(--spring); }
.press:active { transform: scale(.96); }

/* =====================================================
   SEARCH
   ===================================================== */

.tsearch {
  display: flex; align-items: center; gap: 10px; height: 44px;
  margin: 8px 14px; padding: 0 14px;
  background: var(--surface); border-radius: var(--r-sm);
  border: 1.5px solid transparent; transition: border-color .16s var(--snap), background .16s;
}
.tsearch:focus-within { border-color: var(--violet); background: var(--surface-2); }
.tsearch svg { width: 18px; height: 18px; color: var(--text-3); }
.tsearch input { flex: 1; min-width: 0; height: 100%; font-size: 15px; }
.tsearch input::placeholder { color: var(--text-3); }
.tsearch input::-webkit-search-cancel-button { -webkit-appearance: none; }