/* ==========================================================================
   app.css — the Evolve app, reproduced in CSS.

   This file is deliberately separate from style.css. style.css is the voice of
   the *page*; this is the voice of the *product*. Nothing here should ever be
   reused for page chrome, and nothing from style.css (Playfair, the editorial
   scale, the page's spacing rhythm) should ever leak in here. Keeping the two
   apart is what makes the boundary between marketing and software legible.

   Every number is transcribed from the Flutter widgets — see tools/sim.js for
   the file-by-file map. Colour and type tokens come from app-tokens.css, which
   is generated from mobile/lib/core/theme.dart by tools/sync-app.js.

   Surfaces are authored at native logical pixels (a 390pt iPhone, a 1100pt Mac
   window) and the whole device is scaled with a transform. That way every
   padding, radius and font-size below is the literal value from the Dart, and
   responsiveness is one variable rather than a second set of numbers.
   ========================================================================== */

/* ------------------------------------------------------------ device frames */

.dev {
  --s: 1;
  width: calc(var(--w) * var(--s));
  height: calc(var(--h) * var(--s));
  flex: none;
}
.dev > * {
  width: var(--w);
  height: var(--h);
  transform: scale(var(--s));
  transform-origin: 0 0;
}
/* The frames are physical objects — a phone's buttons don't swap sides in an
   RTL locale — so the frames stay LTR. Their CONTENTS do mirror, via an
   explicit dir attribute that tools/sim.js emits from the page's locale. Made
   explicit here rather than relying on the UA stylesheet outranking the
   inherited value. */
.dev,
.phone,
.mac {
  direction: ltr;
}
.screen[dir='rtl'],
.mac-b[dir='rtl'] {
  direction: rtl;
}

/* iPhone ------------------------------------------------------------------ */

.phone {
  position: relative;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 56px;
  background: linear-gradient(160deg, #33343a, #17181c 40%, #0b0b0e 70%, #2a2b31);
  box-shadow:
    0 0 0 1px #000,
    0 40px 80px -20px rgb(0 0 0 / 0.8);
}
.phone-side {
  position: absolute;
  inset-inline-start: -2px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(#3a3b42, #1d1e22);
}
.phone-side.l {
  top: 180px;
  height: 62px;
}
.phone-side.r {
  inset-inline-start: auto;
  inset-inline-end: -2px;
  top: 210px;
  height: 96px;
}

.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 44px;
  background: var(--app-background);
  font-family: var(--app-font);
  color: var(--app-foreground);
  -webkit-font-smoothing: antialiased;
}
:root[lang='ar'] .screen,
.screen[dir='rtl'] {
  font-family: var(--app-font-ar);
}

/* status bar + dynamic island + home indicator */
.sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 14px 34px 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.sb b {
  width: 68px;
  height: 5px;
  border-radius: 3px;
  background: currentColor;
  opacity: 0.9;
}
.screen::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 124px;
  height: 35px;
  border-radius: 20px;
  background: #000;
  z-index: 5;
}
.hbar {
  flex: none;
  width: 140px;
  height: 5px;
  margin: 6px auto 8px;
  border-radius: 3px;
  background: var(--app-foreground);
  opacity: 0.35;
}

/* Mac --------------------------------------------------------------------- */

.mac {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: var(--app-background);
  font-family: var(--app-font);
  color: var(--app-foreground);
  border: 1px solid rgb(255 255 255 / 0.09);
  box-shadow: 0 40px 90px -24px rgb(0 0 0 / 0.85);
  -webkit-font-smoothing: antialiased;
}
.mac-tb {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: none;
  height: 28px;
  padding-inline: 14px;
  background: #1a1b20;
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
}
.tl {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.tl.r { background: #ff5f57; }
.tl.y { background: #febc2e; }
.tl.g { background: #28c840; }

.mac-b {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* sidebar — width 232, brand mark, 5 destinations, settings pinned bottom */
.mac-sb {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 232px;
  background: var(--app-background);
  border-inline-end: 1px solid rgb(39 39 48 / 0.5);
}
.mac-br {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-block: 20px 10px;
  padding-inline: 20px 12px;
}
.mac-br span {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  padding: 6px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.24);
}
.mac-br em {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.4px;
  font-style: normal;
}
.mac-br i {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.6px;
  font-style: normal;
}
.mac-sb nav {
  padding: 18px 14px 0;
}
.mac-sb nav.ft { padding-block: 0 14px; }
.mac-sb nav i {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-block: 3px;
  padding: 11px 12px;
  border-radius: 12px;
  font-style: normal;
  color: var(--app-muted-foreground);
}
.mac-sb nav i em {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.2px;
  font-style: normal;
}
.mac-sb nav i b {
  font-size: 10px;
  font-weight: 600;
  color: #71717a;
}
/* selected destination: solid accent pill. The shipped default accent is
   #FFFFFF, so it reads as a white chip with the background colour as its text. */
.mac-sb nav i.on {
  background: #fff;
  color: var(--app-background);
  box-shadow: 0 6px 18px -6px rgb(255 255 255 / 0.35);
}
.mac-sb nav i.on em { font-weight: 800; }
.mac-sb nav i.on b { color: rgb(5 6 8 / 0.55); }
.mac-sb hr {
  height: 0;
  margin: auto 14px 8px;
  border: 0;
  border-top: 1px solid var(--app-border);
}

.mac-c {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.mac-top {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  height: 68px;
  padding-inline: 24px;
  background: rgb(5 6 8 / 0.7);
  border-bottom: 0.5px solid rgb(39 39 48 / 0.3);
}
.mac-g { flex: 1; min-width: 0; }
.mac-g em {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mac-g i {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1px;
  font-style: normal;
  color: var(--app-muted-foreground);
}
.mac-g i b,
.ph-g i b {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--app-success);
}
.mac-s {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 240px;
  height: 38px;
  padding-inline: 12px;
  border-radius: 12px;
  background: rgb(9 10 15 / 0.4);
  border: 1px solid rgb(39 39 48 / 0.5);
  color: var(--app-muted-foreground);
}
.mac-s i {
  font-size: 12px;
  font-style: normal;
}
.mac-pg {
  flex: 1;
  min-height: 0;
  padding: 22px 24px 24px;
  overflow: hidden;
}
.mac-pg .mac-t {
  margin: 0;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -1.2px;
  line-height: 1.1;
}
.mac-pg .mac-sub {
  margin: 6px 0 20px;
  font-size: 13px;
  color: var(--app-muted-foreground);
}

/* ------------------------------------------------------- dashboard  shell */

.ph-b {
  display: flex;
  align-items: center;
  flex: none;
  height: 64px;
  padding-inline: 20px;
  background: rgb(5 6 8 / 0.7);
  border-bottom: 0.5px solid rgb(39 39 48 / 0.3);
}
.ph-g { flex: 1; min-width: 0; }
.ph-g em {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.4px;
  font-style: normal;
}
.ph-g i {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12px;
  font-style: normal;
  color: var(--app-muted-foreground);
}
.ph-av {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgb(255 255 255 / 0.25);
  background: radial-gradient(circle at 30% 25%, #3b3d47, var(--app-card));
}

.ph-c {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 16px 0;
  overflow: hidden;
}

/* PROTOCOLLO panel */
.proto-h {
  display: flex;
  align-items: center;
  gap: 8px;
}
.proto-h i {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  font-style: normal;
  color: var(--app-muted-foreground);
}
.proto-h b {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgb(39 39 48 / 0.5), transparent);
}
[dir='rtl'] .proto-h b {
  background: linear-gradient(to left, rgb(39 39 48 / 0.5), transparent);
}
.proto-t {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  height: 100px;
  padding: 12px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--app-card);
  border: 1px solid var(--app-border-subtle);
}
.tile::before {
  content: '';
  position: absolute;
  top: -20px;
  inset-inline-end: -20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 15%, transparent), transparent 70%);
}
.tile span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  color: var(--c);
}
.tile em {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.2px;
  font-style: normal;
  line-height: 1.25;
}
.tile i {
  display: block;
  font-size: 10px;
  font-style: normal;
  color: var(--app-muted-foreground);
}

/* segmented control — CupertinoSlidingSegmentedControl: track radius 9,
   thumb radius 7, 3px inset, labels 13/w600 selected, 13/w500 otherwise */
.seg {
  display: flex;
  box-sizing: border-box;
  padding: 3px;
  border-radius: 9px;
  background: rgb(39 39 48 / 0.6);
}
.seg b {
  flex: 1;
  padding-block: 7px;
  border-radius: 7px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--app-muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.2s, color 0.2s;
}
.seg b.on {
  background: var(--app-card-elevated);
  color: var(--app-foreground);
  font-weight: 600;
}
.vtab { margin: 20px 0 12px; }
.seg.sm b { padding-block: 4px; font-size: 11px; }

/* bottom tab bar — bottom_nav_bar.dart:58-115. A floating pill, not a strip:
   margin 16/0/16/28, height 58, radius 28, card@0.8 over a 30-sigma backdrop
   blur, with a 3px accent bar spanning 70% of the active item's width.
   Flutter's BoxShadow blurRadius 20 converts to a CSS blur of ~24px
   (sigma = 20*0.57735+0.5 = 12.05, CSS box-shadow blur = 2 sigma). */
.tabbar {
  position: relative;
  display: flex;
  flex: none;
  height: 58px;
  margin: 0 16px 28px;
  border-radius: 28px;
  background: rgb(9 10 15 / 0.8);
  border: 1px solid rgb(39 39 48 / 0.5);
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.3);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  overflow: hidden;
}
.tabbar i {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-style: normal;
  color: var(--app-muted-foreground);
}
.tabbar i.on { color: var(--app-foreground); }
.tabbar i.on::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 15%;
  width: 70%;
  height: 3px;
  border-radius: 100px 100px 0 0;
  background: #fff;
  box-shadow: 0 -1px 10px 1px rgb(255 255 255 / 0.8);
}
.tabbar em {
  font-size: 10px;
  font-weight: 500;
  font-style: normal;
}

/* ------------------------------------------------------------ glass panel */

/* AppTheme.glassPanelDecoration(radius: 14) — a flat translucent fill, not a
   backdrop blur, despite the name. */
.pnl {
  box-sizing: border-box;
  border-radius: 14px;
  background: rgb(9 10 15 / 0.9);
  border: 1px solid rgb(255 255 255 / 0.102);
}
.ph-c .pnl {
  flex: 1;
  min-height: 0;
  margin-bottom: 10px;
}

.nb {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--app-card);
  border: 1px solid var(--app-border);
  color: var(--app-foreground);
  cursor: default;
}
.nb2 {
  display: grid;
  place-items: center;
  padding: 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--app-foreground);
  cursor: default;
}
[dir='rtl'] .nb .ic,
[dir='rtl'] .nb2 .ic { transform: scaleX(-1); }

/* ------------------------------------------------------------- month view */

.mv { display: flex; flex-direction: column; }
.mv-h {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 16px 8px;
}
.mv-t em {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.8px;
  font-style: normal;
}
.mv-t i {
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  font-style: normal;
  color: var(--app-muted-foreground);
}
.mv-n { display: flex; gap: 4px; }

.mv-w {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding-inline: 8px;
  margin-top: 12px;
}
.mv-w i {
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-style: normal;
  color: var(--app-muted-foreground);
}

.mv-g {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 4px 6px 8px;
}
.mv-g b {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  aspect-ratio: 0.85;
  border-radius: 8px;
  border: 1px solid transparent; /* always present so the box never shifts */
}
.mv-g b.e { border: 0; }
.mv-g span {
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  color: var(--app-muted-foreground);
}
/* a day with anything logged: performanceColor fill + border */
.mv-g b.a {
  background: var(--bg);
  border-color: var(--bd);
}
.mv-g b.a span { color: var(--app-foreground); }
/* 100% complete — Flutter blurRadius 8 converts to ~10px of CSS blur */
.mv-g b.g { box-shadow: 0 0 10px rgb(20 184 80 / 0.15); }
/* yesterday with nothing logged — _isYesterdayOrToday() makes it editable, so
   it carries a faint white outline inviting a late log. Must sit before .t0:
   the Dart cascade lets the today branch overwrite it. */
.mv-g b.y {
  background: rgb(255 255 255 / 0.04);
  border-color: rgb(255 255 255 / 0.25);
}
/* today with nothing logged */
.mv-g b.t0 {
  background: rgb(250 250 250 / 0.04);
  border-color: rgb(255 255 255 / 0.4);
}
/* today always wins on the numeral, even over a tinted cell */
.mv-g b.t span { color: #fff; font-weight: 700; }
.mv-g b.f { opacity: 0.28; }

/* -------------------------------------------------------------- week view */

.wv {
  display: flex;
  flex-direction: column;
  padding: 16px 8px;
}
.wv-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 8px;
}
.wv-h em {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.5px;
  font-style: normal;
}
.wv-n { display: flex; gap: 8px; }
.wv-c {
  flex: 1;
  min-height: 0;
  margin-top: 20px;
  overflow: visible;
}
.wv-grid {
  fill: none;
  stroke: rgb(39 39 48 / 0.5);
  stroke-width: 1;
}
.wv-fill {
  fill: rgb(250 250 250 / 0.2);
  stroke: rgb(250 250 250 / 0.8);
  stroke-width: 2;
  stroke-linejoin: round;
}
.wv-dot { fill: rgb(250 250 250 / 0.8); }
.wv-lbl {
  fill: var(--app-muted-foreground);
  font-size: 12px;
  text-anchor: middle;
}
.wv-s {
  margin-top: 16px;
  padding-inline: 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--app-muted-foreground);
  white-space: nowrap;
}
.wv-s b { font-weight: 600; }
.wv-s .b { color: var(--app-success); }
.wv-s .a { color: #ffc107; } /* Colors.amber, hard-coded in the Dart too */
.wv-s .w { color: var(--app-destructive); }

/* -------------------------------------------------------------- year view */

.yv {
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
}
.yv-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.yv-h em {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.5px;
  font-style: normal;
}
.yv-g {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 16px;
  margin-top: 20px;
}
.yv-r {
  display: flex;
  align-items: center;
  min-width: 0;
}
.yv-l {
  flex: none;
  width: 34px;
  margin-inline-end: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-style: normal;
  color: var(--app-muted-foreground);
}
/* 31 slots always, so every month shares one rhythm and February simply ends
   three slots short — as in the app. Height never encodes anything; hue does. */
.yv-s {
  display: grid;
  grid-template-columns: repeat(31, 1fr);
  gap: 1.5px;
  flex: 1;
  min-width: 0;
  height: 32px;
}
.yv-s i { border-radius: 1px; }
.yv-s i.f { background: rgb(250 250 250 / 0.05); }
.yv-s i.z { background: rgb(39 39 48 / 0.2); }
.yv-s i.n { background: none; }

/* -------------------------------------------------------------- life view */

.lv {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
}
.lv .lv-t {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.lv-k {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}
.lv-k span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--app-muted-foreground);
}
.lv-k b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.lv-k .p { background: rgb(33 150 243 / 0.4); }
.lv-k .c { background: #10b981; }
.lv-st {
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  width: 100%;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 20px;
  background: rgb(9 10 15 / 0.3);
  border: 1px solid rgb(39 39 48 / 0.5);
}
.lv-st div { text-align: center; }
.lv-st em {
  display: block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  font-style: normal;
}
.lv-st i {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-style: normal;
  color: var(--app-muted-foreground);
}
/* 1032 months on an 8pt pitch, anchored top-left exactly as the painter does */
.lv-g {
  flex: 1;
  min-height: 0;
  align-content: start;
  justify-content: start;
  display: grid;
  grid-template-columns: repeat(auto-fill, 8px);
  width: 100%;
  margin-top: 16px;
  overflow: hidden;
}
.lv-g i {
  width: 4px;
  height: 4px;
  margin: 2px;
  border-radius: 50%;
  background: rgb(39 39 48 / 0.2); /* future */
}
.lv-g i.pre { background: rgb(33 150 243 / 0.2); }
.lv-g i.acc { background: rgb(255 255 255 / 0.8); }
.lv-g i.cur {
  background: #10b981;
  box-shadow: 0 0 0 1.5px var(--app-foreground);
  margin: 2px;
}
.lv-a {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 20px;
}
.lv-a i {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-style: normal;
  color: rgb(161 161 170 / 0.4);
}

/* --------------------------------------------------------------- AI coach */

.cv {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.cv-h {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 10px 16px 14px;
  border-bottom: 0.5px solid rgb(39 39 48 / 0.4);
}
.cv-av {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(140deg, #8b5cf6, #6366f1);
  color: #fff;
  box-shadow: 0 0 0 1.5px rgb(139 92 246 / 0.35);
}
.cv-av.sm {
  width: 22px;
  height: 22px;
  box-shadow: none;
}
.cv-id { flex: 1; min-width: 0; }
.cv-id em {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
  font-style: normal;
}
.cv-id i {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-style: normal;
  color: var(--app-muted-foreground);
}
.cv-id i b {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--app-success);
}
.cv-ax {
  display: flex;
  gap: 14px;
  color: var(--app-muted-foreground);
}
.cv-b {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  overflow: hidden;
}
.msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 82%;
}
.msg p {
  margin: 0;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.45;
}
.msg.a p {
  border-radius: 18px 18px 18px 4px;
  background: var(--app-card-elevated);
  border: 1px solid var(--app-border-subtle);
}
.msg.u {
  align-self: flex-end;
  justify-content: flex-end;
}
.msg.u p {
  border-radius: 18px 18px 4px 18px;
  background: linear-gradient(135deg, #8b5cf6, #6d5cf6);
  color: #fff;
  min-height: 1.45em;
}
[dir='rtl'] .msg.a p { border-radius: 18px 18px 4px 18px; }
[dir='rtl'] .msg.u p { border-radius: 18px 18px 18px 4px; }

.cv-sg { flex: none; padding: 0 16px 10px; }
.cv-sg > i {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  color: var(--app-muted-foreground);
}
.cv-ch {
  display: flex;
  gap: 8px;
  overflow: hidden;
  flex-wrap: wrap;
  max-height: 68px;
}
.chip {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--app-card);
  border: 1px solid var(--app-border);
  color: var(--app-foreground);
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: default;
}
/* composer: a padded bar with a top hairline, containing a glassCard-decorated
   field (radius 24, card@0.4) and a 44px circular send button */
.cv-in {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 16px;
  border-top: 1px solid var(--app-border-subtle);
}
.cv-in span {
  flex: 1;
  padding: 12px 20px;
  border-radius: 24px;
  background: rgb(9 10 15 / 0.4);
  border: 1px solid var(--app-border-hover);
  font-size: 14px;
  color: var(--app-muted-foreground);
}
.cv-in b {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #6d5cf6);
  color: #fff;
}

/* ------------------------------------------------------------- statistics */

.sv-k {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.sc {
  position: relative;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--app-card);
  border: 1px solid var(--app-border);
}
/* The app's stat cards carry no accent dot and no monospace — the value itself
   is coloured. JetBrains Mono here was the site's invention. */
.sc i {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-style: normal;
  color: var(--app-muted-foreground);
}
.sc em {
  display: block;
  margin-top: 6px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  font-style: normal;
  color: var(--d, var(--app-foreground));
}
.sv-t { margin-top: 16px; padding: 16px; }
.sv-th {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.sv-th em {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  font-style: normal;
}
.sv-th .seg { width: 240px; }
.sv-c {
  display: block;
  width: 100%;
  height: 140px;
}
.sv-x {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  margin-top: 8px;
}
.sv-x i {
  font-size: 10px;
  font-style: normal;
  text-align: center;
  color: var(--app-muted-foreground);
}

.ic { flex: none; }

/* typing indicator — the coach is thinking; the page never invents its answer */
.msg.typing p {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 14px;
}
.msg.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--app-muted-foreground);
  animation: blink 1.4s infinite both;
}
.msg.typing span:nth-child(2) { animation-delay: 0.2s; }
.msg.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink {
  0%, 60%, 100% { opacity: 0.25; }
  30% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .msg.typing span { animation: none; opacity: 0.5; }
}