/* Group "future": Goals, the debt-free plan, Financial health, Ask Pia. Every rule is scoped to
   .g-future. Values are theme/tokens.ts and the screens' own StyleSheets (see future.js). */
.g-future {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
}
.g-future p {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
}
.g-future b,
.g-future em,
.g-future u {
  font-style: normal;
  text-decoration: none;
}

/* ---------- the detail bar (detail-screen.tsx) ---------- */
.g-future .gf-nav {
  position: absolute;
  z-index: 3;
  top: 50px;
  left: 0;
  right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background: #000;
}
.g-future .gf-slot {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}
.g-future .gf-title {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
}
.g-future .gf-act {
  flex: none;
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-weight: 600;
  font-size: 13px;
}
.g-future .gf-view {
  position: absolute;
  top: 98px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.g-future .gf-scroll {
  padding: 0 20px 72px;
}

/* SectionHead (flow-parts.tsx) */
.g-future .gf-sh {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 26px 0 8px;
}
.g-future .gf-sh span {
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink3);
}
.g-future .gf-sh em {
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink3);
}
.g-future .gf-eyebrow {
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 1.56px;
  text-transform: uppercase;
  color: var(--ink3);
}

/* AuroraBackdrop: the gold wash hung above a hero (natural), or fitted to the dial (gf-fit). */
.g-future .gf-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.g-future .gf-aurora i {
  position: absolute;
  top: -140px;
  left: 50%;
  width: 480px;
  height: 400px;
  margin-left: -240px;
  opacity: 0.75;
  background: radial-gradient(
    240px 200px at 50% 40%,
    rgba(244, 241, 234, 0.16) 0%,
    rgba(201, 163, 92, 0.14) 44%,
    rgba(201, 163, 92, 0) 70%
  );
}
.g-future .gf-aurora.gf-fit i {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0.525;
  background: radial-gradient(
    50% 50% at 50% 46%,
    rgba(244, 241, 234, 0.112) 0%,
    rgba(201, 163, 92, 0.098) 44%,
    rgba(201, 163, 92, 0) 70%
  );
}

/* ================================ GOALS ================================ */
.g-future .gf-ghero {
  position: relative;
  overflow: hidden;
  padding: 14px 0 4px;
}
.g-future .gf-ghb,
.g-future .gf-dhb {
  position: relative;
  z-index: 1;
}
.g-future .gf-gtotal {
  margin-top: 10px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 46px;
  line-height: 48px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.g-future .gf-gsub {
  margin-top: 8px;
  font-size: 15px;
  line-height: 20px;
  color: var(--ink2);
}
.g-future .gf-newgoal {
  margin-top: 20px;
  height: 54px;
  border-radius: 999px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 17px;
  color: #000;
}
.g-future .gf-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* the goal card (goal-card.tsx): its colour's glow from the top right, a dark fall, a faint grain */
.g-future .gf-gcard {
  position: relative;
  overflow: hidden;
  padding: 16px 16px 15px;
  border-radius: 22px;
  border: 1px solid var(--gt30);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--gt20) 0%, rgba(20, 20, 20, 0) 58%),
    linear-gradient(#171717, #0e0e0e);
  box-shadow: 0 18px 40px -22px var(--gt45);
}
.g-future .gf-gcard::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(244, 241, 234, 0.018) 0 2px, rgba(0, 0, 0, 0) 2px 7px);
}
.g-future .gf-gcard > div {
  position: relative;
  z-index: 1;
}
.g-future .gf-gtop {
  display: flex;
  align-items: center;
  gap: 12px;
}
.g-future .gf-tile {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  border: 1px solid var(--gt32);
  background: var(--gt14);
  display: grid;
  place-items: center;
}
.g-future .gf-gname {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  font-size: 17px;
  line-height: 20px;
  letter-spacing: -0.17px;
}
.g-future .gf-kind {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-weight: 700;
  font-size: 11px;
  line-height: 20px;
  letter-spacing: 0.77px;
  text-transform: uppercase;
  color: var(--ink3);
}
.g-future .gf-gread {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 14px;
}
.g-future .gf-gfig {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 34px;
  line-height: 38px;
  letter-spacing: -0.68px;
  font-variant-numeric: tabular-nums;
}
.g-future .gf-gof {
  font-size: 15px;
  line-height: 20px;
  color: var(--ink3);
}
.g-future .gf-gbar {
  position: relative;
  height: 8px;
  margin-top: 13px;
  border-radius: 999px;
  background: rgba(244, 241, 234, 0.08);
}
.g-future .gf-gbar i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gt55), var(--gt));
  box-shadow: 0 0 14px var(--gt55);
  transform-origin: 0 50%;
}
.g-future .gf-gpace {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.g-future .gf-gpace span {
  flex-shrink: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink3);
}
.g-future .gf-gpace b {
  white-space: nowrap;
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink2);
}
.g-future .gf-gpace b.good {
  color: var(--gt);
}

/* ============================== DEBT-FREE ============================== */
.g-future .gf-dhero {
  position: relative;
  overflow: hidden;
  padding: 20px 0 8px;
}
.g-future .gf-ddate {
  margin-top: 10px;
  white-space: nowrap;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 44px;
  line-height: 48px;
  letter-spacing: -0.8px;
}
.g-future .gf-dstat {
  width: max-content;
  min-height: 30px;
  margin-top: 14px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
}
.g-future .gf-dstat i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
}
.g-future .gf-count {
  display: flex;
  gap: 20px;
  margin-top: 18px;
}
.g-future .gf-count b {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 30px;
  line-height: 32px;
  font-variant-numeric: tabular-nums;
}
.g-future .gf-count span {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}
.g-future .gf-stack {
  display: flex;
  gap: 3px;
  height: 12px;
  margin-top: 20px;
}
.g-future .gf-stack i {
  flex: 1;
  height: 100%;
  overflow: hidden;
  border-radius: 3px;
  background: var(--track);
}
.g-future .gf-stack u {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--ink);
}
.g-future .gf-cap {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}
.g-future .gf-cap b,
.g-future .gf-nows b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink2);
}

/* UnderlineTabs: full bleed, the lit word on a 2 px ink underline sitting on the hairline */
.g-future .gf-utabs {
  display: flex;
  margin: 20px -20px 0;
  border-bottom: 1px solid var(--line);
}
.g-future .gf-utabs span {
  flex: 1 0 auto;
  margin-bottom: -1px;
  padding: 9px 8px 8px;
  border-bottom: 2px solid rgba(0, 0, 0, 0);
  text-align: center;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.52px;
  color: var(--ink4);
}
.g-future .gf-utabs span.on {
  border-bottom-color: var(--ink);
  font-weight: 600;
  color: var(--ink);
}
.g-future .gf-box {
  padding-top: 20px;
}
.g-future .gf-read {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-height: 22px;
}
.g-future .gf-read span {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}
.g-future .gf-read b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
}
.g-future .gf-plot {
  height: 198px;
  margin-top: 6px;
}
.g-future .gf-plot svg {
  display: block;
  overflow: visible;
}
.g-future .gf-pchart text.ax {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  fill: var(--ink3);
}
.g-future .gf-legend {
  display: flex;
  flex-wrap: wrap;
  column-gap: 14px;
  row-gap: 6px;
  margin-top: 10px;
}
.g-future .gf-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink2);
}
.g-future .gf-legend .sw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--wheat);
}
.g-future .gf-legend .dash {
  width: 14px;
  height: 0;
  border-top: 2px dashed var(--ai);
}

/* NowPayingCard */
.g-future .gf-now {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--raised);
}
.g-future .gf-now svg {
  flex: none;
  display: block;
}
.g-future .gf-now text.rp {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 12px;
  fill: var(--ink);
}
.g-future .gf-nowm {
  flex: 1;
  min-width: 0;
}
.g-future .gf-nowl {
  font-weight: 600;
  font-size: 11px;
  line-height: 20px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--wheat);
}
.g-future .gf-nown {
  margin-top: 3px;
  font-weight: 600;
  font-size: 17px;
  line-height: 20px;
}
.g-future .gf-nows {
  margin-top: 2px;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}

/* Your debts */
.g-future .gf-dlist {
  border-bottom: 1px solid var(--line);
}
.g-future .gf-drow {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 70px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.g-future .gf-drm {
  flex: 1;
  min-width: 0;
}
.g-future .gf-drn {
  font-size: 16px;
  line-height: 20px;
}
.g-future .gf-drp {
  height: 5px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--track);
}
.g-future .gf-drp i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--wheat);
}
.g-future .gf-drt {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  color: var(--ink2);
}
.g-future .gf-dre {
  text-align: right;
}
.g-future .gf-dre b {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
}
.g-future .gf-dre span {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}

/* ================================ HEALTH =============================== */
.g-future .gf-hzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 24px;
}
.g-future .gf-dial {
  position: relative;
  width: 260px;
  height: 150px;
}
.g-future .gf-dial svg {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
}
.g-future .gf-num {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.g-future .gf-num b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 38px;
  line-height: 40px;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.g-future .gf-num span {
  margin-top: 4px;
  font-weight: 700;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--wheat);
}
.g-future .gf-hsup {
  margin-top: 16px;
  text-align: center;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}
.g-future .gf-hsup b,
.g-future .gf-factor p b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink2);
}
.g-future .gf-hdelta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.g-future .gf-hdelta b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink2);
}
.g-future .gf-hdelta span {
  font-size: 15px;
  line-height: 20px;
  color: var(--ink3);
}
.g-future .gf-htrend {
  margin-top: 32px;
}
.g-future .gf-head {
  min-height: 24px;
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
}
.g-future .gf-trend {
  position: relative;
  height: 160px;
  margin-top: 12px;
}
.g-future .gf-trend svg {
  display: block;
}
.g-future .gf-yt {
  position: absolute;
  left: 0;
  width: 26px;
  text-align: right;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 10px;
  line-height: 14px;
  color: var(--ink3);
}
.g-future .gf-xt {
  position: absolute;
  bottom: 0;
  white-space: nowrap;
  font-size: 10px;
  line-height: 20px;
  letter-spacing: 0.4px;
  color: var(--ink4);
}
.g-future .gf-factors {
  margin-top: 40px;
}
.g-future .gf-fh {
  margin-bottom: 12px;
}
.g-future .gf-factor {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.g-future .gf-fhd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.g-future .gf-fhd span {
  flex-shrink: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
}
.g-future .gf-fhd em {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid;
  font-weight: 600;
  font-size: 11px;
  line-height: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.g-future .gf-fhd em.good {
  background: rgba(88, 176, 131, 0.14);
  border-color: rgba(88, 176, 131, 0.3);
  color: var(--pos);
}
.g-future .gf-fhd em.watch {
  background: rgba(201, 163, 92, 0.14);
  border-color: rgba(201, 163, 92, 0.3);
  color: var(--wheat);
}
.g-future .gf-factor p {
  margin-top: 8px;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}

/* ================================= PIA ================================= */
.g-future .gf-pnav {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 58px 20px 12px;
  border-bottom: 1px solid var(--line);
  background: #000;
}
.g-future .gf-pback,
.g-future .gf-pmem {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
}
.g-future .gf-pback {
  margin-left: -8px;
}
.g-future .gf-pmem {
  margin-right: -8px;
}
.g-future .gf-pdisc,
.g-future .gf-av,
.g-future .gf-sic {
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(127, 158, 196, 0.3);
  background: rgba(127, 158, 196, 0.14);
}
.g-future .gf-pdisc {
  width: 33px;
  height: 33px;
  border-radius: 50%;
}
.g-future .gf-ptext {
  flex: 1;
  min-width: 0;
}
.g-future .gf-ptitle {
  font-weight: 600;
  font-size: 17px;
  line-height: 20px;
}
.g-future .gf-pidle,
.g-future .gf-pbusy {
  margin-top: 1px;
  font-weight: 400;
  font-size: 11.5px;
  line-height: 14px;
  color: var(--ink3);
}
.g-future .gf-pbusy {
  align-items: center;
  gap: 8px;
}
.g-future .gf-pbusy i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ai);
}

/* the thread: its end stays in view (scrollToEnd) */
.g-future .gf-thread {
  position: absolute;
  top: 109px;
  left: 0;
  right: 0;
  bottom: 140px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.g-future .gf-tin {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 20px 24px;
}
.g-future .gf-starters,
.g-future .gf-scards {
  display: flex;
  flex-direction: column;
}
.g-future .gf-starters {
  gap: 16px;
}
.g-future .gf-scards {
  gap: 12px;
}
.g-future .gf-presence {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 4px;
}
.g-future .gf-orb {
  position: relative;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
}
.g-future .gf-orb .ring {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 1px solid rgba(127, 158, 196, 0.3);
  opacity: 0.6;
}
.g-future .gf-orb .core {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(127, 158, 196, 0.3);
  background: linear-gradient(rgba(127, 158, 196, 0.3), rgba(127, 158, 196, 0.14)), rgba(127, 158, 196, 0.14);
  box-shadow: 0 0 17px rgba(127, 158, 196, 0.24);
}
.g-future .gf-hi {
  margin-top: 16px;
  text-align: center;
  font-weight: 600;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -0.4px;
}
.g-future .gf-hi span {
  color: var(--ai);
}
.g-future .gf-hisub {
  max-width: 300px;
  margin-top: 8px;
  text-align: center;
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
  color: var(--ink3);
}
.g-future .gf-how {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(127, 158, 196, 0.3);
  background: rgba(127, 158, 196, 0.14);
}
.g-future .gf-how svg {
  flex: none;
}
.g-future .gf-how p {
  flex: 1;
  font-weight: 400;
  font-size: 13px;
  line-height: 19px;
  color: var(--ink2);
}
.g-future .gf-slead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.g-future .gf-slead i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ai);
}
.g-future .gf-slead span {
  font-weight: 600;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 1.54px;
  text-transform: uppercase;
  color: var(--ink3);
}
.g-future .gf-scard {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(127, 158, 196, 0.3);
  background: rgba(127, 158, 196, 0.14);
}
.g-future .gf-sic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.g-future .gf-sb {
  flex: 1;
  min-width: 0;
}
.g-future .gf-st {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 19px;
}
.g-future .gf-sh2 {
  margin-top: 2px;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}
.g-future .gf-uturn {
  display: flex;
  justify-content: flex-end;
}
.g-future .gf-ububble {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 18px 18px 6px 18px;
  border: 1px solid var(--line-strong);
  background: var(--raise2);
  font-size: 15px;
  line-height: 20px;
}
.g-future .gf-pturn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.g-future .gf-av {
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border-radius: 50%;
}
.g-future .gf-pbub,
.g-future .gf-tybub {
  border: 1px solid rgba(127, 158, 196, 0.3);
  border-radius: 18px 18px 18px 6px;
  background: rgba(127, 158, 196, 0.14);
}
.g-future .gf-pbub {
  flex: 1;
  max-width: 92%;
  padding: 12px 16px;
}
.g-future .gf-pbub p {
  color: var(--ink);
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
}
.g-future .gf-pbub p b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
}
.g-future .gf-tybub {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 15px;
}
.g-future .gf-tybub i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ai);
  opacity: 0.4;
}
.g-future .gf-cite {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
}
.g-future .gf-cite i {
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 5px;
  border-radius: 50%;
  background: rgba(127, 158, 196, 0.3);
}
.g-future .gf-cite span {
  flex: 1;
  font-weight: 400;
  font-size: 13px;
  line-height: 17px;
  color: var(--ink3);
}
.g-future .gf-door {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 12px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(127, 158, 196, 0.3);
  background: rgba(127, 158, 196, 0.14);
}
.g-future .gf-door span {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
  color: var(--ai);
}

/* the composer */
.g-future .gf-comp {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  background: #000;
}
.g-future .gf-chips {
  display: flex;
  gap: 8px;
  padding: 0 20px 12px;
  overflow: hidden;
  white-space: nowrap;
}
.g-future .gf-chips span {
  flex: none;
  height: 35px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(127, 158, 196, 0.3);
  background: rgba(127, 158, 196, 0.14);
  font-weight: 600;
  font-size: 13px;
  color: var(--ai);
}
.g-future .gf-inbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px 34px;
}
.g-future .gf-field {
  flex: 1;
  min-width: 0;
  height: 46px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--raised);
  font-weight: 400;
  font-size: 14.5px;
}
.g-future .gf-fclip {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}
.g-future .gf-ph {
  color: var(--ink3);
}
.g-future .gf-typed {
  flex: none;
  color: var(--ink);
}
.g-future .gf-typed.caret::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 17px;
  margin-left: 1px;
  vertical-align: -3px;
  background: var(--ai);
}
.g-future .gf-send {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ai);
}