/* Version 3, ask (D2). Loaded by templates/v3/base.html only when v3 is on. Every rule is scoped:
   under body.v3, or on a v3- class. followap.css is one global namespace; a bare class here can break today's pages.

   The orb grown into Ask, ported one to one from prototype v2.1 (Redesign_Prototype_v2.1.html, "Ask" and the shared
   card, pill, chip, kv, av, seg and skeleton rules), each class with v3- in front: .ask is .v3-ask, .card .v3-card.
   The surface carries its own copies of the shared parts (scoped to .v3-ask) so it looks the same over any page. */

/* ── the orb (also the tab bar's and the sidebar's, D1's markup: <span class="v3-orb"><span class="halo"></span>
   <span class="core"></span><span class="swirl"></span></span>) ─────────────────────────────────────────────────── */
body.v3 .v3-orb{position:relative;width:26px;height:26px;border-radius:50%;flex:none;display:inline-block}
body.v3 .v3-orb .core{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, var(--white) 0, color-mix(in srgb,var(--green) 45%,var(--white)) 26%, var(--green) 62%, color-mix(in srgb,var(--green) 72%,var(--ink)) 100%)}
body.v3 .v3-orb .halo{position:absolute;inset:-70%;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--green) 55%,transparent) 0, color-mix(in srgb,var(--green) 18%,transparent) 42%, transparent 68%);
  animation:v3-breathe var(--dur-breathe) ease-in-out infinite}
body.v3 .v3-orb .swirl{position:absolute;inset:0;border-radius:50%;opacity:0;
  background:conic-gradient(from 0deg, transparent 0 20%, color-mix(in srgb,var(--white) 70%,transparent) 32%, transparent 48% 70%, color-mix(in srgb,var(--white) 45%,transparent) 82%, transparent 92%);
  transition:opacity var(--dur-base) var(--ease-out)}
body.v3 .v3-thinking .v3-orb .swirl{opacity:1;animation:v3-spin 1.1s linear infinite}
@keyframes v3-breathe{0%,100%{transform:scale(.82);opacity:.55}50%{transform:scale(1.12);opacity:1}}
@keyframes v3-spin{to{transform:rotate(1turn)}}

/* ── the burst and the surface ───────────────────────────────────────────────────────────────────────────────── */
body.v3 .v3-burst{position:fixed;left:0;top:0;border-radius:50%;z-index:169;pointer-events:none;display:none;will-change:transform;
  background:radial-gradient(circle, var(--white) 0 58%, color-mix(in srgb,var(--green) 20%,var(--white)) 80%, color-mix(in srgb,var(--green) 30%,transparent) 94%, transparent 100%)}
body.v3 .v3-ask{position:fixed;inset:0;z-index:170;color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.45;letter-spacing:-.011em;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;text-align:left}
body.v3 .v3-ask[hidden]{display:none!important}
body.v3 .v3-ask *{box-sizing:border-box}
body.v3 .v3-ask button{background:none;border:0;cursor:pointer;text-align:inherit;font:inherit;color:inherit;letter-spacing:inherit;padding:0;margin:0}
body.v3 .v3-ask button:active{transform:none}
body.v3 .v3-ask .v3-tap{transition:transform var(--dur-press) var(--ease-out)}
body.v3 .v3-ask .v3-tap:active{transform:scale(var(--press-scale))}
body.v3 .v3-ask a{color:inherit;text-decoration:none}
body.v3 .v3-ask :focus-visible{outline:2px solid var(--green);outline-offset:2px}
body.v3 .v3-ask .v3-ain input:focus-visible,body.v3 .v3-ask .v3-ain input:focus{outline:0;border:0;box-shadow:none}
body.v3.v3-asking{overflow:hidden}
body.v3 .v3-ask-bg{position:absolute;inset:0;background:
  radial-gradient(90% 50% at 50% -6%, color-mix(in srgb,var(--green) 24%,transparent), transparent 70%),
  radial-gradient(70% 45% at 105% 100%, color-mix(in srgb,var(--green) 12%,transparent), transparent 70%),
  radial-gradient(60% 40% at -5% 85%, color-mix(in srgb,var(--amber) 9%,transparent), transparent 70%),
  linear-gradient(var(--white), var(--paper))}
body.v3 .v3-ask-in{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;max-width:780px;margin:0 auto}
body.v3 .v3-ask-top{display:flex;align-items:center;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top)) 16px 6px}
body.v3 .v3-ask .v3-cbtn{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--ink) 6%,transparent);display:grid;place-items:center;flex:none}
body.v3 .v3-thread{flex:1 1 auto;overflow-y:auto;padding:4px 16px 16px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(transparent,#000 22px);mask-image:linear-gradient(transparent,#000 22px)}
body.v3 .v3-thread::-webkit-scrollbar{display:none}

/* ── the greeting and the command range ──────────────────────────────────────────────────────────────────────── */
body.v3 .v3-hello{text-align:center;padding:3vh 4px 4px}
body.v3 .v3-ask .v3-borb{width:96px;height:96px;margin:0 auto 20px}
body.v3 .v3-ask .v3-borb .halo{inset:-48%}
body.v3 .v3-hello h2{font-size:28px;font-weight:800;letter-spacing:-.04em;line-height:1.1;margin:0}
body.v3 .v3-hello p{font-size:16px;color:var(--grey-d);margin-top:6px}
body.v3 .v3-cmds{text-align:left;margin-top:20px;display:grid;gap:14px}
body.v3 .v3-cmdg h5{font-size:12px;font-weight:700;color:var(--grey);letter-spacing:.04em;text-transform:uppercase;margin:0 0 7px 2px;line-height:1.45}
body.v3 .v3-cmds .v3-skchip{height:34px;border-radius:99px;display:inline-block}

/* ── the shared parts, inside the surface (the prototype's card, pill, chip, kv, av, ico, seg, fine) ─────────── */
body.v3 .v3-ask .v3-card{background:var(--white);border-radius:var(--r);padding:18px;box-shadow:0 1px 0 var(--line-soft),0 10px 28px -22px color-mix(in srgb,var(--ink) 40%,transparent)}
body.v3 .v3-ask .v3-card h4{font-size:15px;font-weight:700;letter-spacing:-.015em;margin-bottom:10px}
body.v3 .v3-ask .v3-pill{height:40px;padding:0 16px;border-radius:99px;background:var(--ink);color:var(--white);font-weight:650;font-size:14.5px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
body.v3 .v3-ask .v3-pill.light{background:var(--sunken);color:var(--ink)}
body.v3 .v3-ask .v3-pill.ghost{background:transparent;color:var(--grey-d);padding:0 10px}
body.v3 .v3-ask .v3-pill.sm{height:34px;font-size:13.5px;padding:0 12px}
body.v3 .v3-ask .v3-pill[disabled]{opacity:.5;pointer-events:none}
body.v3 .v3-ask .v3-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
body.v3 .v3-ask .v3-chips::-webkit-scrollbar{display:none}
body.v3 .v3-ask .v3-chips.wrapc{flex-wrap:wrap;overflow:visible}
body.v3 .v3-ask .v3-chip{height:34px;padding:0 13px;border-radius:99px;background:var(--white);border:1px solid var(--line);font-weight:600;font-size:13.5px;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex:none}
body.v3 .v3-ask .v3-chip .x{opacity:.6;margin-left:-2px}
body.v3 .v3-ask .v3-kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line-soft);font-size:14.5px}
body.v3 .v3-ask .v3-kv:first-of-type{border-top:0;padding-top:0}
body.v3 .v3-ask .v3-kv span:first-child{color:var(--grey)}
body.v3 .v3-ask .v3-kv span:last-child{min-width:0;overflow-wrap:anywhere}
body.v3 .v3-ask .v3-av{width:44px;height:44px;border-radius:50%;background:var(--sunken);display:grid;place-items:center;font-weight:700;font-size:14.5px;flex:none;letter-spacing:-.01em}
body.v3 .v3-ask .v3-ico{flex:none;width:40px;height:40px;border-radius:50%;background:var(--sunken);display:grid;place-items:center;color:var(--ink)}
body.v3 .v3-ask .v3-fine{font-size:12.5px;color:var(--grey);line-height:1.45}
body.v3 .v3-ask .v3-seg{position:relative;display:grid;grid-template-columns:repeat(var(--n,4),1fr);background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:14px;padding:4px;height:44px}
body.v3 .v3-ask .v3-seg button{position:relative;z-index:1;font-weight:650;font-size:14px;color:var(--grey-d);text-align:center;border-radius:10px;white-space:nowrap}
body.v3 .v3-ask .v3-seg button.on{color:var(--ink)}
body.v3 .v3-ask .v3-seg-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n,4));border-radius:10px;background:var(--white);
  box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 14%,transparent);will-change:transform}
body.v3 .v3-ask .v3-sk{position:relative;overflow:hidden;background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:12px}
body.v3 .v3-ask .v3-sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--white) 65%,transparent),transparent);animation:v3-shimmer var(--dur-shimmer) var(--ease-out) infinite}
body.v3 .v3-ask .v3-skl{height:12px;border-radius:6px;background:color-mix(in srgb,var(--ink) 7%,transparent)}

body.v3 .v3-ask .v3-cmdg .v3-chips{flex-wrap:wrap;overflow:visible}
body.v3 .v3-ask .v3-cmdg .v3-chip{flex:0 1 auto;max-width:100%;background:color-mix(in srgb,var(--white) 82%,transparent);height:auto;min-height:34px;padding:7px 12px;
  white-space:normal;text-align:left;line-height:1.3}
body.v3 .v3-ask .v3-cmdg .v3-chip em{font-style:normal;color:var(--grey);font-weight:600;margin-right:2px}

/* a 34px pill or chip (the prototype's size) is tapped over 44px: its hit area reaches 5px above and below */
body.v3 .v3-ask .v3-pill.sm,body.v3 .v3-ask button.v3-chip,body.v3 .v3-ask .v3-ans .v3-pill{position:relative}
body.v3 .v3-ask .v3-cbtn{position:relative}
body.v3 .v3-ask .v3-cbtn::after{content:"";position:absolute;left:-2px;right:-2px;top:-2px;bottom:-2px;border-radius:50%}
body.v3 .v3-ask .v3-pill.sm::after,body.v3 .v3-ask button.v3-chip::after,body.v3 .v3-ask .v3-ans .v3-pill::after{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px}

/* ── the thread ──────────────────────────────────────────────────────────────────────────────────────────────── */
body.v3 .v3-mu{align-self:flex-end;max-width:84%;background:var(--ink);color:var(--white);padding:11px 16px;border-radius:20px 20px 6px 20px;font-size:15.5px;line-height:1.35;overflow-wrap:anywhere}
body.v3 .v3-ask .v3-ans{padding:16px;border-radius:20px}
body.v3 .v3-ask .v3-ans h4{font-size:16.5px;font-weight:700;margin:0 0 4px;letter-spacing:-.018em;line-height:1.3}
body.v3 .v3-ans .sub{font-size:14px;color:var(--grey-d);white-space:pre-line}
body.v3 .v3-ans .kind{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
body.v3 .v3-arow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line-soft);cursor:pointer;width:100%}
body.v3 .v3-arow:first-of-type{margin-top:10px}
body.v3 .v3-ask .v3-arow .v3-av{width:36px;height:36px;font-size:12.5px}
body.v3 .v3-arow .v3-hart{width:52px;height:40px;border-radius:10px;overflow:hidden;flex:none;display:grid;place-items:center;
  background:linear-gradient(160deg,color-mix(in srgb,var(--green) 16%,var(--white)),color-mix(in srgb,var(--paper) 70%,var(--white)));color:var(--grey-d)}
body.v3 .v3-arow .tx{flex:1;min-width:0}
body.v3 .v3-arow .nm{font-weight:650;font-size:15px}
body.v3 .v3-arow .sb{font-size:13px;color:var(--grey);overflow:hidden;text-overflow:ellipsis}
body.v3 .v3-arow .mt2{font-size:13px;color:var(--grey);font-weight:600;white-space:nowrap}
body.v3 .v3-ans .pa{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
body.v3 .v3-ans .v3-cfm{margin-top:10px;background:var(--sunken);border-radius:14px;padding:12px 14px}
body.v3 .v3-ans .v3-cfm .v3-kv{font-size:14px}
body.v3 .v3-ans .v3-cfm .v3-chips{margin-bottom:8px}
body.v3 .v3-ans .v3-cfm .v3-chips:last-child{margin-bottom:0}
body.v3 .v3-ans .done-line{display:flex;align-items:center;gap:8px;margin-top:12px;font-weight:650;font-size:14.5px}
body.v3 .v3-ans .done-line .v3-ico{width:28px;height:28px;background:var(--green)}
body.v3 .v3-ans .v3-draft{margin-top:10px;background:var(--sunken);border-radius:14px;padding:12px 14px;font-size:14.5px;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere}
body.v3 .v3-ans .v3-seg{height:38px;margin-top:10px}
body.v3 .v3-ans .v3-seg button{font-size:13px}
body.v3 .v3-ans .v3-pick{margin-top:10px;display:grid;gap:6px}
body.v3 .v3-ans .v3-pick .lbl{font-size:13px;color:var(--grey);font-weight:600}
body.v3 .v3-ans .v3-opt{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:12px;background:var(--white);border:1px solid var(--line);cursor:pointer}
body.v3 .v3-ans .v3-opt input{accent-color:var(--ink);width:18px;height:18px;flex:none}
body.v3 .v3-ans .v3-opt b{display:block;font-size:14.5px;font-weight:650}
body.v3 .v3-ans .v3-opt small{display:block;font-size:12.5px;color:var(--grey)}
body.v3 .v3-ans .v3-field{margin-top:10px;display:grid;gap:4px}
body.v3 .v3-ans .v3-field label{font-size:13px;color:var(--grey);font-weight:600}
body.v3 .v3-ans .v3-field input{height:44px;border-radius:12px;border:1px solid var(--line);background:var(--white);padding:0 12px;font:inherit;font-size:16px;width:100%}
body.v3 .v3-ans .v3-err{margin-top:8px;font-size:13.5px;color:var(--amber-t);font-weight:600}
body.v3 .v3-fups{display:flex;gap:8px;flex-wrap:wrap}
body.v3 .v3-ask .v3-fups .v3-chip{background:color-mix(in srgb,var(--white) 80%,transparent)}
body.v3 .v3-fups .v3-chip::before{content:"↳";color:var(--grey)}
body.v3 .v3-ask .v3-ans.v3-sk{height:150px;border-radius:20px;padding:16px;background:color-mix(in srgb,var(--ink) 6%,transparent)}

/* ── the dock: mic, field, send; the waveform from the real mic level ────────────────────────────────────────── */
body.v3 .v3-dock{padding:8px 16px calc(12px + env(safe-area-inset-bottom))}
body.v3 .v3-wave{height:0;display:flex;align-items:center;justify-content:center;gap:4px;opacity:0;overflow:hidden;transition:opacity var(--dur-base) var(--ease-out)}
body.v3 .v3-listening .v3-wave{height:52px;opacity:1}
body.v3 .v3-wave i{width:4px;height:40px;border-radius:2px;background:var(--green);transform:scaleY(.12);will-change:transform;flex:none}
body.v3 .v3-wave i:nth-child(3n){background:color-mix(in srgb,var(--green) 70%,var(--ink))}
/* the line under the waveform: Listening (a breathing dot) the whole time it listens; One moment while the words are slow */
body.v3 .v3-hear{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;column-gap:8px;margin:0 0 10px;padding:0 8px;text-align:center;font-size:13px;color:var(--grey)}
body.v3 .v3-hear[hidden]{display:none}
body.v3 .v3-hear b{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--ink)}
body.v3 .v3-hear b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);animation:v3-hear 1.4s ease-in-out infinite}
@keyframes v3-hear{50%{opacity:.35;transform:scale(.7)}}
body.v3 .v3-listening .v3-wave{cursor:pointer}
body.v3 .v3-ain{display:flex;align-items:center;gap:8px;height:58px;border-radius:29px;background:var(--white);border:1px solid var(--line);padding:0 6px;
  box-shadow:0 12px 30px -18px color-mix(in srgb,var(--ink) 45%,transparent)}
body.v3 .v3-ain input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:16px;padding:0 4px;height:auto;min-height:0;border-radius:0;box-shadow:none;font-family:inherit;color:var(--ink);letter-spacing:inherit;line-height:1.45}
body.v3 .v3-ain input:focus{box-shadow:none;border:0}
body.v3 .v3-ain input::placeholder{color:var(--grey)}
body.v3 .v3-ask .v3-mic{width:46px;height:46px;border-radius:50%;background:var(--green);color:var(--ink);display:grid;place-items:center;flex:none}
body.v3 .v3-mic .stop{display:none;width:14px;height:14px;border-radius:3px;background:var(--ink)}
body.v3 .v3-listening .v3-mic .v3-i{display:none}
body.v3 .v3-listening .v3-mic .stop{display:block}
body.v3 .v3-ask .v3-send{width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--white);display:grid;place-items:center;flex:none;transition:opacity var(--dur-fast)}
body.v3 .v3-ask .v3-send[disabled]{opacity:.25}
body.v3 .v3-priv{text-align:center;font-size:12px;color:var(--grey);margin-top:9px}

/* ── a home list's text: the question back from Messages, in the one bottom sheet (the prototype's .qcard) ───── */
body.v3 .v3-sheet .v3-q{text-align:center;padding:6px 0 4px}
body.v3 .v3-sheet .v3-q h3{font-size:24px}
body.v3 .v3-sheet .v3-qi{margin:4px auto 12px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:var(--ink);
  background:color-mix(in srgb,var(--green) 18%,var(--white))}
body.v3 .v3-sheet .v3-q .v3-sa{text-align:left}
body.v3 .v3-sheet .v3-q .v3-pill{height:52px;padding:0 22px;border-radius:99px;background:var(--ink);color:var(--white);font-weight:650;font-size:16px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;border:0;font-family:inherit;cursor:pointer}
body.v3 .v3-sheet .v3-q .v3-pill.light{background:var(--sunken);color:var(--ink)}

/* ── the desk: 900 and wider (the prototype's breakpoint) ────────────────────────────────────────────────────── */
@media (min-width:900px){
  body.v3 .v3-hello{padding-top:6vh}
  body.v3 .v3-thread{padding:4px 24px 16px}
  body.v3 .v3-dock{padding:8px 24px 22px}
}

@media (prefers-reduced-motion: reduce){
  body.v3 .v3-orb .halo,body.v3 .v3-ask .v3-sk::after,body.v3 .v3-thinking .v3-orb .swirl,body.v3 .v3-hear b::before{animation:none}
  body.v3 .v3-ask .v3-tap{transition:none}
}