/* ============================================================
   FLUENTLY.IO  V3 — PRODUCT INTERFACE REFINEMENT
   Colour-as-information + richer app components.
   Built on existing tokens/components (styles.css + v2.css).
   ============================================================ */

/* ---------- COLOUR AS INFORMATION (subtle purpose tints) ---------- */
.t-convo  { background:#FAF4EA; }
.t-memory { background:#E9F3E6; }
.t-voice  { background:#FCEEE7; }
.t-games  { background:#FCEBDC; }
.t-journey{ background:#E6F2EC; }
.t-gold   { background:#F7EFD8; }
.t-ai     { background:#FCEAE4; }
.t-vocab  { background:#EDEAF6; }
.t-review { background:#F5F0D7; }
.t-speak  { background:#E7EDF6; }
.t-grammar{ background:#EFE9F5; }
.card.t-convo,.card.t-memory,.card.t-voice,.card.t-games,.card.t-journey,
.card.t-gold,.card.t-ai,.card.t-vocab,.card.t-review,.card.t-speak,.card.t-grammar{ border-color:rgba(35,39,31,.05); }

/* icon-bubble colour variants (use with .feature-ico) */
.ic-memory { background:#d7ebd1; color:#3f7a4f; }
.ic-voice  { background:#fbd8cb; color:#c8492a; }
.ic-vocab  { background:#ddd5f0; color:#6a59a8; }
.ic-grammar{ background:#e3d6ef; color:#6f4ba0; }
.ic-review { background:#ece1b0; color:#8a7322; }
.ic-speak  { background:#cdd9ef; color:#3f5e9e; }
.ic-gold   { background:#eedfa8; color:#8a6d1f; }
.ic-journey{ background:#cde6d8; color:#3f7a63; }
.ic-games  { background:#fbd6bb; color:#c25a1e; }

/* purpose tags (small, desaturated) */
.tg{ display:inline-flex; align-items:center; gap:.35em; padding:.28em .7em; border-radius:var(--pill); font-size:.74rem; font-weight:800; line-height:1.2; }
.tg-green { background:#d7ebd1; color:#3f7a4f; }
.tg-vocab { background:#ddd5f0; color:#5b4a99; }
.tg-grammar{ background:#e3d6ef; color:#6f4ba0; }
.tg-review{ background:#ece1b0; color:#7e6716; }
.tg-speak { background:#cdd9ef; color:#3f5e9e; }
.tg-gold  { background:#eedfa8; color:#806316; }
.tg-coral { background:var(--coral); color:#fff; }
.tg-ghost { background:#fff; color:var(--muted); box-shadow:inset 0 0 0 1.3px var(--line); }

/* ---------- mini product components ---------- */

/* correction / grammar fix chip (in a thread) */
.fixchip{ display:flex; align-items:center; gap:8px; align-self:flex-start; background:#fff; border-radius:13px;
  padding:7px 11px; box-shadow:var(--sh-xs); font-size:.8rem; font-weight:700; max-width:90%; border:1px solid var(--line-soft); }
.fixchip .pen{ width:20px; height:20px; border-radius:7px; background:#efe9f5; color:#6f4ba0; display:grid; place-items:center; font-size:11px; flex:none; }
.fixchip s{ color:var(--muted-soft); text-decoration-thickness:1.5px; }
.fixchip b{ color:var(--coral); }

/* in-thread memory notification */
.memnote{ display:flex; align-items:center; gap:8px; align-self:flex-start; background:#e9f3e6; color:#2f5d33; border-radius:13px;
  padding:7px 11px; font-size:.8rem; font-weight:800; box-shadow:var(--sh-xs); }
.memnote .chk{ width:18px; height:18px; border-radius:50%; background:#5b9e6b; color:#fff; display:grid; place-items:center; font-size:11px; flex:none; }

/* quick-reply chips */
.qreplies{ display:flex; gap:6px; flex-wrap:wrap; }
.qreplies button{ font-size:.8rem; font-weight:800; padding:.42em .85em; border-radius:var(--pill);
  background:#fff; color:var(--charcoal); box-shadow:inset 0 0 0 1.3px var(--line); transition:.18s var(--ease); }
.qreplies button:hover{ background:var(--coral); color:#fff; box-shadow:none; transform:translateY(-1px); }

/* in-app lesson preview strip */
.lessonstrip{ display:flex; align-items:center; gap:10px; background:#fff; border-radius:15px; padding:9px 11px; box-shadow:var(--sh-xs); }
.lessonstrip .lp{ width:30px; height:30px; border-radius:10px; background:#f5f0d7; color:#7e6716; display:grid; place-items:center; flex:none; }
.lessonstrip b{ font-size:.82rem; }
.lessonstrip .muted{ font-size:.7rem; font-weight:700; }

/* review timeline (memory card) */
.revtl{ display:flex; align-items:center; gap:0; }
.revtl .n{ display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; }
.revtl .dot{ width:14px; height:14px; border-radius:50%; background:var(--sage-deep); display:grid; place-items:center; font-size:8px; color:#fff; }
.revtl .dot.on{ background:#5b9e6b; } .revtl .dot.now{ background:var(--coral); box-shadow:0 0 0 3px var(--coral-tint); }
.revtl .lbl{ font-size:.66rem; font-weight:800; color:var(--muted); }
.revtl .bar{ flex:0 0 auto; width:18px; height:2px; background:var(--line); margin-bottom:14px; }

/* difficulty dots / strength */
.diff{ display:inline-flex; gap:3px; }
.diff i{ width:7px; height:7px; border-radius:50%; background:var(--sage-deep); }
.diff i.on{ background:var(--coral); }
.prog.green i{ background:#5b9e6b; }
.prog.thin{ height:6px; }

/* voice recording state */
.recbar{ display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:800; color:#c8492a; }
.recbar .rd{ width:9px; height:9px; border-radius:50%; background:#e0492a; animation:pulse 1.4s infinite; }
.rec-timer{ font-variant-numeric:tabular-nums; font-weight:900; letter-spacing:.02em; }

/* play button (pronunciation) */
.playb{ width:30px; height:30px; border-radius:50%; background:var(--coral); color:#fff; display:grid; place-items:center; flex:none; box-shadow:var(--sh-xs); cursor:pointer; transition:transform .2s var(--ease-back); }
.playb:hover{ transform:scale(1.1); } .playb svg{ width:13px; }

/* tooltip / explanation pop */
.tip{ background:#efe9f5; color:#5a3f86; border-radius:11px; padding:7px 10px; font-size:.78rem; font-weight:700; box-shadow:var(--sh-xs); }

/* ---------- GAMES chrome ---------- */
.game-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lives{ display:inline-flex; gap:3px; font-size:.9rem; }
.lives i{ filter:grayscale(0); transition:.2s; } .lives i.lost{ filter:grayscale(1); opacity:.3; }
.pillstat{ display:inline-flex; align-items:center; gap:5px; padding:.3em .7em; border-radius:var(--pill); background:#fff; font-size:.75rem; font-weight:800; box-shadow:var(--sh-xs); }
.pillstat.coral{ background:var(--coral); color:#fff; box-shadow:none; }
.hintb{ margin-left:auto; font-size:.78rem; font-weight:800; color:var(--coral); padding:.35em .8em; border-radius:var(--pill); background:#fff; box-shadow:var(--sh-xs); }
.hintb:hover{ background:var(--coral-tint); }
.daily{ display:inline-flex; align-items:center; gap:5px; }
.bannerwin{ position:absolute; inset:auto 0 0 0; background:#dcefd2; color:#2f5d33; text-align:center; font-weight:800; padding:9px; font-size:.85rem;
  transform:translateY(100%); transition:transform .4s var(--ease-back); }
.bannerwin.show{ transform:none; }

/* ---------- JOURNEY: contribution heatmap (GitHub-style) ---------- */
.heat{ display:grid; grid-template-columns:repeat(16,1fr); gap:5px; }
.heat i{ aspect-ratio:1; border-radius:3px; background:#e2e7da; }
.heat i.l1{ background:#cfe6c8 } .heat i.l2{ background:#a9d49d } .heat i.l3{ background:#7cbd6c } .heat i.l4{ background:#4f9e44 }
.mastered{ display:flex; gap:6px; flex-wrap:wrap; }
.recap-num{ font-weight:900; font-size:2.2rem; letter-spacing:-.03em; line-height:1; }

/* memory bubble (vocab) */
.membubble{ display:inline-flex; align-items:center; gap:7px; padding:.45em .85em; border-radius:var(--pill); background:#ddd5f0; color:#5b4a99; font-weight:800; font-size:.82rem; }

/* hero app header stat row (streak + goal, in-app) */
.appstats{ margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-weight:800; font-size:.8rem; color:var(--charcoal);
  background:#fff; padding:.3em .7em; border-radius:var(--pill); box-shadow:var(--sh-xs); }
.appdemo__bar .live{ margin-left:10px; }
/* reposition the two live widgets to outer corners (less overlap with dense thread) */
.fw-mem{ top:-22px !important; right:7% !important; left:auto !important; }
.fw-vocab{ top:42% !important; right:-22px !important; }

/* small section-density helpers */
.stack-tight>*+*{ margin-top:.5rem; }
.thread{ display:flex; flex-direction:column; gap:8px; }

/* journey richer grid (overrides v2 spans) */
.j-heat{ grid-column:span 4; }
.j-mastered,.j-review,.j-speak,.j-coach,.j-time{ grid-column:span 2; grid-row:auto; }
@media(max-width:860px){ .j-heat,.j-mastered,.j-review,.j-speak,.j-coach,.j-time{ grid-column:span 2; } }

/* ============================================================
   V3.1 — GLASSY BLACK BORDERS · CLEAN UI · MORE INTERACTIVITY
   ============================================================ */
:root{ --edge:rgba(28,32,24,.18); --edge-strong:rgba(28,32,24,.30); }

/* glassy black hairline around every box (visibility) */
.card, .appdemo, .fwidget, .mini-card, .lessonstrip, .fixchip, .memnote,
.drop, .tile, .pillstat, .hintb, .chip, .membubble, .tip, .qreplies button,
.bubble.them, .sb__ans, .topics .chip, .tag-cream, .game, .recbar, .ring__c,
.lives, .b-rev .tip, .phone__screen{
  border:1px solid var(--edge) !important;
}
/* glass highlight on larger surfaces */
.card, .game, .fwidget, .lessonstrip{
  box-shadow:var(--sh-sm), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.appdemo{ box-shadow:var(--sh-lg), inset 0 1px 0 rgba(255,255,255,.65) !important; border:1px solid var(--edge) !important; }
.bubble.me{ border:1px solid rgba(0,0,0,.25) !important; }

/* ---- more visual interactivity ---- */
.card, .fwidget, .lessonstrip, .pillstat, .membubble, .feature-ico, .playb, .tag, .tg{
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.bento .card, .journey .card{ cursor:default; }
.bento .card:hover, .journey .card:hover{
  border-color:var(--edge-strong) !important;
  box-shadow:0 22px 48px -24px rgba(35,39,31,.30), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.fwidget:hover{ transform:translateY(-3px) rotate(-.5deg); border-color:var(--edge-strong) !important; }
.lessonstrip{ cursor:pointer; } .lessonstrip:hover{ transform:translateY(-2px); border-color:var(--edge-strong) !important; }
.bento .card:hover .feature-ico{ transform:rotate(-6deg) scale(1.1); }
.membubble:hover{ transform:translateY(-2px) rotate(-1.5deg); }
.chip:active, .tile:active, .qreplies button:active, .drop:active, .hintb:active, .btn:active{ transform:scale(.94); }
.playb:hover{ transform:scale(1.12); } .playb:active{ transform:scale(.9); }
.topics .chip{ cursor:pointer; }
.holdmic{ cursor:pointer; }
.b-trans:hover, #btrans:hover{ border-color:var(--edge-strong) !important; }

/* nudge vocab widget clear of the reply bubble */
.fw-vocab{ right:-16px !important; top:46% !important; }
.appstats{ border:1px solid var(--edge); }