/* ===========================================================================
   REEVES -- the Talk / Text home (preview page "home"): assets/js/home-text.js.
   Every rule is scoped to html.home-next / .home-wait / .home-live (set only for the preview) or to the text page's own
   classes (.hm-*, .tx, #fv.fv-text), so an account without the preview draws exactly what it drew before.
   =========================================================================== */

/* ---- no flash: an account this device has never seen is held invisible until the server answers ---------------- */
html.home-wait main > .row,
html.home-wait main > .chat,
html.home-wait main > .composer{visibility:hidden}
/* ...and the room is never empty: a soft gold shimmer stands where the buttons will be, the size of the pair, until
   the answer draws them (usually well under a second: the head asks at once). Still under reduced motion. */
html.home-wait main > .row{position:relative}
html.home-wait main > .row::before{content:'';visibility:visible;position:absolute;left:0;right:0;top:0;height:84px;border-radius:20px;
  background:linear-gradient(100deg,rgba(255,255,255,.025) 30%,rgba(214,175,60,.16) 50%,rgba(255,255,255,.025) 70%) 0 0/250% 100%;
  box-shadow:inset 0 0 0 1px rgba(214,175,60,.2);animation:hmWait 1.3s ease-in-out infinite}
@keyframes hmWait{from{background-position:100% 0}to{background-position:0 0}}

/* ---- the new home: the pair stands where Wake Reeves stood; the chat and the box leave the home, idle AND in a voice
   session (a session is the yellow button and the wave only; typing lives on the Text page) ------------------------ */
html.home-next main > .row > #go:not(.end){display:none}
html.home-next main > .chat,
html.home-next main > .composer,
html.home-next main > .row > .plusrow{display:none}   /* desktop keeps the + in the row: it goes with the box */
/* a voice session is the yellow button and the wave: the status, GPS, routing and nudge lines and the camera button
   step aside. Kept: the Witness Mode bar (#wit, outside main: REC + Stop), the meeting recorder's bar, the feature
   buttons, the media tray and the error line. The camera can only be started from #eyes, so it cannot run unseen.
   What is there idle steps aside in place (visibility), so the centred group below keeps its height and the orb does
   not move when a session starts; End session takes the pair's own slot. GPS and nudge show only in a session. */
html.home-next.home-live .hm-pair,
html.home-next.home-live main > .status,
html.home-next.home-live main > .routed,
html.home-next.home-live main > .row > #eyes{visibility:hidden}
html.home-next.home-live main > .geo,
html.home-next.home-live main > .nudge{display:none}
/* the new home is Talk and Text only, at every width and in every state (design-rules U18). The camera button leaves it:
   idle it is disabled, and a session already hides it. The Health bar keeps the phone's rule at every width: it shows
   only once health, workouts or nutrition are asked for (index.html hbarShow), with its x to put it away. */
html.home-next main > .row > #eyes,
html.home-next main > .row > .hrow:not(.on){display:none}
html.home-next main > .row > .hrow.on > .hx{display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;
  height:44px;padding:0;border-radius:50%;background:transparent;color:#8A8A8F;box-shadow:inset 0 0 0 1px #2A2A30;
  font-size:20px;font-weight:300;line-height:1}
html.home-next main > .row{display:grid;justify-items:center;row-gap:10px}
html.home-next main > .row > #go,
html.home-next main > .row > .hm-pair,
html.home-next main > .row > .hm-note{grid-row:1;grid-column:1;align-self:center}

/* when Talk cannot connect (home-text.js: fallback): a short line where the buttons are, then the text page opens */
html.home-next main > .row > .hm-note{display:none}
html.home-next.hm-falling main > .row > .hm-note{display:block;width:100%;max-width:340px;padding:0 8px;text-align:center;
  color:#E8E4D8;font:500 16px/1.4 'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;letter-spacing:-.005em;
  animation:hmNote .25s ease-out both}
html.home-next.hm-falling .hm-pair,
html.home-next.hm-falling main > .row > #go,
html.home-next.hm-falling main > .err{visibility:hidden}   /* one message: the line says it ("try again" would not fit) */
@keyframes hmNote{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* the group -- the name and tagline, the orb, the pair -- sits centred in the room above Settings and Sign out, at
   any width: equal auto margins above the header and below main take the slack the box used to fill, so there is no
   fixed offset. The header's own 8px pad has its twin under main, the least room either end keeps when the screen is
   short. The empty error line hangs just under the group instead of taking room in it; Settings and Sign out stay at
   the bottom. */
html.home-next body{justify-content:flex-start}
/* Carlos: the whole group (wave, name, orb, Talk and Text) sits 15px lower than it did before Oct 18 (40px, then 20px,
   were too low on his phone); Settings / Sign out do not move. A 46px spacer above the header, which the two auto
   margins split (23px down), less the 8px the group's 24px floor (main's padding, up from 8) takes back: 15px.
   The spacer is the first thing to give way (flex-shrink, min-height 0) when the screen is short; the group then rests on its 24px floor above Settings, never closer. The wave follows the
   orb as before (home-text.js reads the orb). */
html.home-next body::before{content:'';display:block;flex:0 1 46px;min-height:0}
html.home-next header{margin-top:auto}
html.home-next main{flex:0 0 auto;margin-bottom:auto;padding-bottom:24px;position:relative}
html.home-next main > .err{position:absolute;left:0;right:0;top:calc(100% - 24px);margin:0 auto}
@media (max-height:700px){   /* a short phone (375x667) has no room for the floor: the old 8px, Settings unmoved */
  html.home-next main{padding-bottom:8px}
  html.home-next main > .err{top:calc(100% - 8px)}
}
html.home-next .who{margin-top:0}
/* the group's own spacing is the phone's (index.html, v106.2: the orb centred between its two labels) at every width,
   so a laptop shows the same group as the phone instead of the gaps the old layout's leftover space used to make */
html.home-next .tag{margin-top:16px}
html.home-next .stage{margin-top:56px}
html.home-next main > .status{margin-top:42px;margin-bottom:0}
html.home-next #wave{transform:translateY(var(--hm-lift,0px)) scale(var(--hm-wave,1.15));transform-origin:50% 0}   /* home-text.js: lowered with the group */
/* Carlos, Oct 18: the wave 15% larger on a phone, into the room the old text box left. A uniform scale of the drawn
   band (its drawing code sizes the bitmap from the window and is not touched), from its top edge: home-text.js
   measures the band's on-screen height, scale included, so the orb still sits at 0.63 of it. The band is 42vh, so on
   a wide, short window (a laptop) the same scale would run it into the tagline and "Tap to wake": 8% there. */
@media (min-aspect-ratio:1/1){ html.home-next{--hm-wave:1.08} }
/* Carlos, Oct 18: no blue dotted line where the wave starts and ends on a laptop. It is the terrain's own edge rows,
   not an outline or a border: on a wide window (5px between dots, index.html drawWave) the farthest row lies almost
   flat at ~35% down the band and the nearest sits alone at its foot, so each reads as a ruled dotted line. A mask in
   the band's own box (so the scale above does not move it) lets both edges dissolve instead of stop; the drawing
   code is not touched. The phone's 4px grid shows no line and keeps the band as it was. */
@media (min-width:901px){
  html.home-next #wave{-webkit-mask-image:linear-gradient(180deg,transparent 34%,#000 47%,#000 74%,transparent 95%);
    mask-image:linear-gradient(180deg,transparent 34%,#000 47%,#000 74%,transparent 95%)}
  /* in a session his and Reeves's voices throw the crests far above 34%: the top opens so a swell is never cut
     against a flat ceiling (the far row only lies flat at rest); the foot keeps its fade */
  html.home-next.home-live #wave{-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 95%);
    mask-image:linear-gradient(180deg,#000 74%,transparent 95%)}
}

/* Talk and Text (Carlos, Oct 18: a matched pair). Text is an exact twin of Talk -- the same satin face in a recessed
   track, lit top edge, thin gold rim, shadow 8px down / 24px blur; hover runs a light around the rim in 200ms, a press
   sinks it 1px (design-rules P1-P6). Carlos's call overrides P7 here: the two are the screen's equal pair, not a primary
   and a secondary. Each keeps its own label and icon. Both 56px tall, both 8px narrower than the column so the outer
   edge of the 4px track lines up with it. */
.hm-pair{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;max-width:340px;
  --hm-face:linear-gradient(180deg,#2B3037 0%,#1C2026 55%,#15181D 100%)}   /* the one face, both buttons */
.hm-pair button{width:100%;max-width:none;min-width:0;padding:0 24px;
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;
  font:600 17px/1.2 'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;letter-spacing:-.012em;
  color:#F5F3EC;transition:transform .15s ease-out,opacity .15s ease-out}
.hm-pair svg{width:20px;height:20px;flex:0 0 auto;color:#D6AF3C}
.hm-pair span{white-space:nowrap}
.hm-pair .hm-talk,
.hm-pair .hm-text{position:relative;isolation:isolate;overflow:hidden;width:calc(100% - 8px);height:56px;border-radius:28px;border:0;
  background:linear-gradient(180deg,#F0D27A 0%,#B8952F 48%,#8E7426 100%);   /* the rim: 1px of this shows around the face */
  box-shadow:0 0 0 4px #050607,0 1px 0 4px rgba(255,255,255,.07),0 8px 24px rgba(0,0,0,.6)}   /* track, its lit lower lip, the drop */
.hm-pair .hm-talk::before,
.hm-pair .hm-text::before{content:'';position:absolute;inset:1px;z-index:-1;border-radius:27px;
  background:var(--hm-face);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.4)}   /* the satin face and its lit top edge */
.hm-pair .hm-talk::after,
.hm-pair .hm-text::after{content:'';position:absolute;left:50%;top:50%;width:420px;height:420px;margin:-210px 0 0 -210px;
  z-index:-2;opacity:0;transform:rotate(0deg);pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 78%,rgba(255,236,170,.95) 90%,transparent 100%)}   /* the running light */
.hm-pair .hm-talk:active,
.hm-pair .hm-text:active{transform:translateY(1px);box-shadow:0 0 0 4px #050607,0 1px 0 4px rgba(255,255,255,.07),0 4px 12px rgba(0,0,0,.6)}
@media (hover:hover){   /* a disabled button stays still: the light says "this will act", and it won't */
  .hm-pair .hm-talk:not([disabled]):hover::after,
  .hm-pair .hm-text:not([disabled]):hover::after{animation:hmRim .2s ease-out}
}
@keyframes hmRim{0%{opacity:0;transform:rotate(0deg)}25%{opacity:1}100%{opacity:0;transform:rotate(360deg)}}
.hm-pair button:focus-visible{outline:2px solid #D6AF3C;outline-offset:6px}   /* clear of the 4px track */
.hm-pair button[disabled]{opacity:.4}
/* Windows high contrast (forced colours) drops the rim -- a background -- and the track -- a shadow -- so both buttons
   would stand as bare words. A 1px system-colour edge brings the button back; it shows nowhere else */
@media (forced-colors:active){
  .hm-pair .hm-talk,
  .hm-pair .hm-text{border:1px solid ButtonText}
}

/* ---- the text page: the whole screen is the conversation ----------------------------------------------------- */
#fv.fv-text{overflow:hidden;display:flex;flex-direction:column;
  padding:max(14px,calc(env(safe-area-inset-top) + 6px)) 0 0;
  background:radial-gradient(900px 600px at -20% -10%,rgba(28,98,104,.30),transparent 62%),
    radial-gradient(700px 520px at 120% 0%,rgba(210,172,58,.10),transparent 60%),
    linear-gradient(180deg,#0B171B 0%,#0A1015 45%,#0A0B10 100%)}
#fv.fv-text .hp-top{width:100%;max-width:760px;margin:0 auto;padding:0 16px;flex:0 0 auto}
#fv.fv-text .hp-title{color:#9AA7A9}
#fv.fv-text .fv-body{flex:1 1 auto;min-height:0;width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column}

/* the type: about double the old box, and the phone's own text size where the web view offers it (Dynamic Type) */
.tx{font-size:17px}
@supports (font:-apple-system-body){ .tx{font:-apple-system-body} }
.tx{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-variant-numeric:normal;font-feature-settings:normal;
  color:var(--fin-body);letter-spacing:-.005em}

.tx-thread{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.tx .chat{display:flex;flex:1 1 auto;min-height:0;max-height:none;max-width:none;width:100%;gap:14px;
  padding:12px 16px 20px;overflow-y:auto;overscroll-behavior:contain;margin:0}
.tx .msg{max-width:88%;font-size:1.6em;line-height:1.38;padding:.5em .72em;border-radius:22px;letter-spacing:-.012em}
.tx .msg.me{background:linear-gradient(180deg,rgba(214,175,60,.22),rgba(214,175,60,.15));color:var(--fin-ink);
  box-shadow:0 0 0 1px rgba(214,175,60,.34) inset;border-bottom-right-radius:8px}
.tx .msg.him{background:var(--fin-card);color:var(--fin-ink);box-shadow:var(--fin-shadow);border-bottom-left-radius:8px}
.tx .msg.him.spoke{box-shadow:var(--fin-shadow),3px 0 0 0 rgba(214,175,60,.55) inset}   /* a spoken turn: a gold edge */
.tx .msg.wait{font-size:1.6em;color:transparent;min-width:3.2em;position:relative;user-select:none}
.tx .msg.wait::after{content:'';position:absolute;left:.72em;top:50%;width:.36em;height:.36em;margin-top:-.18em;border-radius:50%;
  background:var(--fin-muted);box-shadow:.6em 0 0 var(--fin-muted),1.2em 0 0 var(--fin-muted);animation:txDots 1.2s ease-in-out infinite}
@keyframes txDots{0%,100%{opacity:.35}50%{opacity:1}}

.tx-empty{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 24px 12%;pointer-events:none}
.tx.tx-has .tx-empty{display:none}
.tx-empty-h{margin:0;color:var(--fin-ink);font-size:2em;line-height:1.15;font-weight:600;letter-spacing:-.03em}
.tx-empty-s{margin:.5em 0 1.2em;color:var(--fin-muted);font-size:1.15em;line-height:1.4}
.tx-chips{display:flex;flex-direction:column;align-items:flex-start;gap:10px;pointer-events:auto}
.fv-body .tx-chip{width:auto;max-width:100%;padding:.62em 1em;border-radius:16px;text-align:left;
  background:var(--fin-raised);color:var(--fin-ink);box-shadow:0 1px 0 var(--fin-hi) inset,0 0 0 1px var(--fin-stroke) inset;
  font:500 1.1em/1.3 'Geist',-apple-system,sans-serif;letter-spacing:-.01em}
.fv-body .tx-chip:active{transform:scale(.98)}
.fv-body .tx-chip:focus-visible{outline:2px solid var(--fin-gold);outline-offset:2px}

.tx .media{max-width:none;width:auto;margin:0 16px 10px;max-height:40vh;overflow-y:auto}
.tx .media.on{display:flex}

.tx-dock{flex:0 0 auto;padding:8px 12px max(12px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(10,11,16,0),rgba(10,11,16,.92) 30%)}
.tx.tx-kb .tx-dock{padding-bottom:12px}
.tx .err{max-width:none;margin:0 6px 6px;font-size:1em;min-height:0}
.tx .err:empty{display:none}
/* the box: the text on top, its buttons in their own band below it (never under the words) */
.tx .composer{max-width:none;border-radius:24px;background:var(--fin-card);box-shadow:var(--fin-shadow);padding-bottom:64px}
.tx .composer textarea{min-height:0;height:2.1em;max-height:34vh;background:transparent;border:0;border-radius:24px 24px 0 0;color:var(--fin-ink);
  font:400 1.45em/1.35 'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;letter-spacing:-.01em;
  padding:.55em .7em 0;caret-color:var(--fin-gold)}
.tx .composer textarea::placeholder{color:var(--fin-faint)}
.tx .composer:focus-within{box-shadow:var(--fin-shadow),0 0 0 1.5px rgba(214,175,60,.6) inset}
.tx .composer textarea:focus{border:0}
.tx .keys{right:10px;bottom:10px;gap:10px}
.tx .keys button{width:48px;height:48px;background:var(--fin-raised);color:var(--fin-ink);box-shadow:0 1px 0 var(--fin-hi) inset}
.tx .keys button svg{width:22px;height:22px}
.tx .keys button.send{background:linear-gradient(180deg,#E3BF55,#C9A227);color:#0B0B0C;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 16px -6px rgba(214,175,60,.7)}
.tx .keys button.dict.on{background:#C4453F;color:#FDFCF7;box-shadow:0 0 0 6px rgba(196,69,63,.22)}
.tx.tx-nodict .keys .dict{display:none}
.tx .composer .plusrow{position:absolute;left:10px;bottom:10px;width:auto;max-width:calc(100% - 140px);gap:10px}
.tx .composer .plus{width:48px;min-width:48px;height:48px;font-size:28px;color:var(--fin-muted);box-shadow:0 0 0 1px var(--fin-stroke) inset}
.tx .composer .plus.has,.tx .composer .plus.on{color:var(--fin-gold);box-shadow:0 0 0 1px rgba(214,175,60,.6) inset}
.tx .composer .attach{display:none;font-size:.9em;color:var(--fin-muted)}
.tx .composer .plus.has + .attach,.tx .composer .plus.on + .attach{display:block}
.tx .keys button:focus-visible,.tx .composer .plus:focus-visible{outline:2px solid var(--fin-gold);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  html.home-wait main > .row::before{animation:none;background-position:50% 0}
  html.home-next.hm-falling main > .row > .hm-note{animation:none}
  .hm-pair button,.fv-body .tx-chip{transition:none}
  .hm-pair button::after{animation:none!important}
  .hm-pair button:active{transform:none}
  .tx .msg.wait::after{animation:none;opacity:.7}
}