/* ActuallySpeak Kids — Free Talk.
   Scoped to .asktalk-* so nothing here can reach the lesson UI. Sizes are set
   for a small child on a phone: big taps, big type, nothing under 44px. */

.asktalk-ov{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .22s ease}
.asktalk-ov.is-open{opacity:1}
.asktalk-ov__scrim{position:absolute;inset:0;background:rgba(15,23,42,.5)}
.asktalk-ov__in{position:relative;width:100%;max-width:560px;max-height:94vh;overflow:auto;
  background:var(--j-cream,var(--t-paper,#FDF4E1));border-radius:22px 22px 0 0;padding:16px 16px 20px;
  box-shadow:0 -10px 40px rgba(0,0,0,.28);transform:translateY(18px);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.asktalk-ov.is-open .asktalk-ov__in{transform:translateY(0)}
@media (min-width:560px){
  .asktalk-ov{align-items:center}
  .asktalk-ov__in{border-radius:22px;max-height:88vh}
}

.asktalk-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.asktalk-head h2{margin:0;font-size:1.35rem}
.asktalk-sub{margin:.4rem 0 .9rem;color:var(--j-ink-2,#6b7280);font-weight:600;line-height:1.35}
.asktalk-x{width:44px;height:44px;flex:0 0 44px;border:0;border-radius:50%;background:rgba(0,0,0,.06);
  font-size:1.1rem;cursor:pointer;line-height:1}
.asktalk-x:hover{background:rgba(0,0,0,.12)}
.asktalk-back{margin-top:12px;width:100%}

/* ---- the face, shared by the picker, the topic screen and the chat bar ---- */
.asktalk-face{position:relative;width:64px;height:64px;flex:0 0 64px;border-radius:50%;overflow:hidden;
  background:var(--bc,#43A94A);display:grid;place-items:center;box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.16)}
.asktalk-face img{width:100%;height:100%;object-fit:cover;display:block}
.asktalk-face__emoji{position:absolute;font-size:32px;line-height:1;z-index:-1}
/* The face avatar, when only a head will fit: the cutouts are full-body, so
   pin them to the top of the circle or the child gets a picture of feet. */
.asktalk-face img{object-position:top center}

/* ---- the painted scene card on a picker tile ---- */
.asktalk-cardart{position:relative;display:block;width:100%;aspect-ratio:1/1;border-radius:13px;
  overflow:hidden;background:var(--bc,#43A94A);display:grid;place-items:center}
.asktalk-cardart img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .25s ease}
.asktalk-cardart img.is-on{opacity:1}
/* The emoji is the floor, not the ceiling: it sits UNDER the painting and only
   shows through while the art is loading, or if it never arrives. */
.asktalk-cardart__emoji{position:absolute;z-index:0;font-size:38px;line-height:1}
.asktalk-cardart img.is-on ~ .asktalk-cardart__emoji{display:none}

/* ---- the full-body cutout, once a buddy is chosen ----
   No circle, no crop: the child sees the whole animal standing there. The
   accent colour becomes a soft glow on the floor rather than a disc, so the
   character reads as standing on the card instead of stuck in a badge. */
.asktalk-full{position:relative;flex:0 0 auto;display:flex;align-items:flex-end;justify-content:center;
  width:186px;height:196px;max-width:52vw}
.asktalk-full::after{content:'';position:absolute;left:14%;right:14%;bottom:2px;height:13px;border-radius:50%;
  background:var(--bc,#43A94A);opacity:.22;filter:blur(6px)}
.asktalk-full img{position:relative;z-index:1;height:100%;width:auto;max-width:100%;object-fit:contain;
  display:block;opacity:0;transition:opacity .3s ease;filter:drop-shadow(0 6px 10px rgba(60,40,10,.22))}
.asktalk-full img.is-on{opacity:1}
/* The emoji only stands in while the painting is loading or missing. It is a
   sibling AFTER the img, so a loaded image can switch it off directly. */
.asktalk-full__emoji{position:absolute;inset:0;display:grid;place-items:center;font-size:64px;line-height:1}
.asktalk-full img.is-on ~ .asktalk-full__emoji{display:none}

.asktalk-hero{display:flex;justify-content:center;margin:.5rem 0 .1rem}
.asktalk-hero .asktalk-face{width:88px;height:88px;flex-basis:88px}
.asktalk-hero .asktalk-face__emoji{font-size:44px}

/* ---- 1. choose a buddy ---- */
.asktalk-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.asktalk-pick{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:5px 5px 10px;
  border:2.5px solid rgba(0,0,0,.06);border-radius:18px;background:#fff;cursor:pointer;text-align:center;
  box-shadow:0 3px 0 rgba(0,0,0,.06);transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.asktalk-pick:hover{transform:translateY(-3px);border-color:var(--bc,#43A94A);box-shadow:0 6px 0 rgba(0,0,0,.07)}
.asktalk-pick:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.asktalk-pick__name{font-weight:900;font-size:1.05rem;margin-top:8px;color:var(--bc,#43A94A)}
.asktalk-pick__sub{font-size:.75rem;color:var(--j-ink-2,#7A6449);line-height:1.25;padding:0 6px;margin-top:2px}

/* ---- 2. choose a topic ---- */
.asktalk-topics{display:grid;gap:8px}
.asktalk-topic{display:flex;align-items:center;gap:12px;padding:14px;border:2px solid rgba(0,0,0,.06);
  border-radius:14px;background:#fff;cursor:pointer;text-align:left;font-weight:800;font-size:1.02rem;
  transition:transform .12s ease,border-color .12s ease}
.asktalk-topic:hover{transform:translateX(3px);border-color:var(--j-green,#43A94A)}
.asktalk-topic__ic{font-size:1.6rem;line-height:1}

/* ---- 3. the chat ---- */
.asktalk-chat .asktalk-ov__in{display:flex;flex-direction:column;height:94vh;padding:0;overflow:hidden}
@media (min-width:560px){ .asktalk-chat .asktalk-ov__in{height:86vh} }

.asktalk-bar{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;
  border-bottom:2px solid rgba(0,0,0,.06);flex:0 0 auto}
.asktalk-bar .asktalk-face{width:48px;height:48px;flex-basis:48px}
.asktalk-bar .asktalk-face__emoji{font-size:24px}
.asktalk-bar__who{flex:1 1 auto;min-width:0}
.asktalk-bar__who b{display:block;font-size:1.05rem}
.asktalk-bar__who small{display:block;color:var(--j-ink-2,#6b7280);font-weight:700}

.asktalk-log{flex:1 1 auto;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(180deg,#F4FAEC,var(--t-paper,#FDF4E1))}
.asktalk-msg{display:flex;align-items:flex-end;gap:8px;max-width:88%}
.asktalk-msg__ic{position:relative;flex:0 0 auto;width:34px;height:34px;border-radius:50%;overflow:hidden;
  background:var(--bc,#43A94A);display:grid;place-items:center;font-size:1.15rem;line-height:1;
  box-shadow:0 0 0 2px #fff,0 1px 4px rgba(0,0,0,.14)}
.asktalk-msg__ic img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top center;
  display:block;opacity:0;transition:opacity .2s ease}
.asktalk-msg__ic img.is-on{opacity:1}
.asktalk-msg__fb{position:absolute;z-index:0}
.asktalk-msg__ic img.is-on ~ .asktalk-msg__fb{display:none}
.asktalk-msg__tx{display:inline-block;padding:11px 14px;border-radius:16px;font-size:1.05rem;
  font-weight:700;line-height:1.4;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.asktalk-msg.is-them{align-self:flex-start}
.asktalk-msg.is-them .asktalk-msg__tx{border-bottom-left-radius:5px}
.asktalk-msg.is-me{align-self:flex-end}
.asktalk-msg.is-me .asktalk-msg__tx{background:var(--j-green-btn,#2A8137);color:#fff;border-bottom-right-radius:5px}

.asktalk-dots{display:inline-flex;gap:4px;padding:14px 16px;border-radius:16px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.asktalk-dots i{width:7px;height:7px;border-radius:50%;background:#9ca3af;animation:asktalkDot 1.1s infinite}
.asktalk-dots i:nth-child(2){animation-delay:.16s}
.asktalk-dots i:nth-child(3){animation-delay:.32s}
@keyframes asktalkDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.asktalk-foot{flex:0 0 auto;padding:12px 14px 16px;background:#fff;border-top:2px solid rgba(0,0,0,.06)}
.asktalk-sugg{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.asktalk-chip{padding:13px 15px;border:2px solid var(--j-green,#43A94A);border-radius:14px;background:#F4FAEC;
  font-weight:800;font-size:1.02rem;cursor:pointer;text-align:left;line-height:1.3;
  transition:transform .1s ease,background .1s ease}
.asktalk-chip:hover{background:#DFF0D8;transform:translateX(3px)}
.asktalk-chip:disabled{opacity:.45;cursor:default;transform:none}

.asktalk-mic{display:flex;align-items:center;gap:12px}
.asktalk-micbtn{width:60px;height:60px;flex:0 0 60px;border:0;border-radius:50%;background:var(--j-green,#43A94A);
  color:#fff;font-size:1.7rem;cursor:pointer;box-shadow:0 3px 10px rgba(34,197,94,.4);
  transform:scale(var(--lv,1));transition:transform .09s linear,background .15s ease}
.asktalk-micbtn.is-rec{background:#DC4B3E;box-shadow:0 3px 16px rgba(239,68,68,.55);animation:asktalkPulse 1.3s infinite}
.asktalk-micbtn.is-off,.asktalk-micbtn:disabled{opacity:.4;cursor:default;animation:none}
@keyframes asktalkPulse{0%,100%{box-shadow:0 3px 16px rgba(239,68,68,.55)}50%{box-shadow:0 3px 26px rgba(239,68,68,.85)}}
.asktalk-micnote{font-size:.9rem;font-weight:700;color:var(--j-ink-2,#6b7280);line-height:1.3}

/* ---- the ending ---- */
.asktalk-end{text-align:center}
.asktalk-end__stars{font-size:2rem;letter-spacing:2px}
.asktalk-end__praise{font-weight:800;font-size:1.05rem;margin:.3rem 0 .5rem;line-height:1.35}
.asktalk-end__words{font-size:.95rem;color:var(--j-ink-2,#6b7280);font-weight:700;margin-bottom:.6rem}
.asktalk-end__tips{text-align:left;margin:0 0 .8rem;font-size:.85rem;color:var(--j-ink-2,#6b7280)}
.asktalk-end__tips summary{cursor:pointer;font-weight:800}
.asktalk-end__tips ul{margin:.4rem 0 0 1rem;padding:0}
.asktalk-end__btns{display:grid;gap:8px}

@media (prefers-reduced-motion:reduce){
  .asktalk-ov,.asktalk-ov__in,.asktalk-micbtn,.asktalk-chip,.asktalk-pick,.asktalk-topic{transition:none}
  .asktalk-micbtn.is-rec,.asktalk-dots i{animation:none}
}

/* ---- the grown-up gate & consent screen ---------------------------------
   Deliberately plainer than the rest of the app: this is the one screen that
   is for the adult, and it should not look like it is trying to charm them
   past the reading. */
.asktalk-gate__q{font-weight:900;font-size:1.15rem;margin:.6rem 0 .4rem}
.asktalk-gate__in{width:100%;padding:12px;font-size:1.2rem;border:2px solid rgba(0,0,0,.15);border-radius:12px}
.asktalk-legal{max-height:46vh;overflow-y:auto;background:#fff;border:2px solid rgba(0,0,0,.06);
  border-radius:14px;padding:14px;font-size:.92rem;line-height:1.5;color:#374151}
.asktalk-legal p{margin:0 0 .7rem}
.asktalk-legal p:last-child{margin-bottom:0}
.asktalk-legal b{color:#111827}
.asktalk-legal__links{font-weight:700}
.asktalk-legal__links a{color:var(--j-green-d,#0f9f43)}
.asktalk-check{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:.92rem;
  font-weight:700;line-height:1.4;cursor:pointer}
.asktalk-check input{width:22px;height:22px;flex:0 0 22px;margin-top:1px}
.asktalk-hello{text-align:center;font-weight:800;font-style:italic;color:var(--j-ink-2,#6b7280);
  margin:.2rem 0 .6rem;line-height:1.35}
.asktalk-foot__note{text-align:center;font-size:.85rem;font-weight:700;color:var(--j-ink-2,#6b7280);margin:.8rem 0 0}

/* ============================================================= */
/*  PLANS — the buying screen and the child's gentle lock         */
/*  Scoped .askplan-*. It reuses the Free Talk overlay shell on    */
/*  purpose: a grown-up meets one consistent kind of card.         */
/* ============================================================= */
.askplan-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px}
.askplan-head h2{flex:1 1 auto;font-size:1.5rem;font-weight:900}

/* The child's lock. Big, warm, no price anywhere — the only money-adjacent
   screen a child ever sees, and it should not read as a closed door. */
.askplan-kidlock{text-align:center}
.askplan-kidlock__ic{font-size:64px;line-height:1;margin:4px 0 6px}
.askplan-kidlock h2{font-size:1.5rem;font-weight:900;margin-bottom:6px}
.askplan-kidlock p{font-weight:800;color:var(--j-ink-2,#7A6449);margin:0 0 16px;line-height:1.45}

/* The grown-up's screen. Deliberately plainer than the rest of the app: this
   is the one place a parent is being asked for money and it should look like
   information, not like a toy trying to charm them. */
.askplan-price{font-size:2rem;font-weight:900;color:var(--j-green-d,#256E31);line-height:1.1;margin:2px 0 2px}
.askplan-note{font-weight:800;color:var(--j-ink-2,#7A6449);margin:0 0 14px}
.askplan-list{margin:0 0 14px;padding-left:20px}
.askplan-list li{font-weight:800;line-height:1.5;margin-bottom:5px}
.askplan-fine{font-size:.86rem;font-weight:700;line-height:1.5;color:var(--j-ink-2,#7A6449);margin:0 0 12px}
.askplan-fine--warn{background:var(--t-paper,#FFF6DF);border:2.5px solid #EFCF8A;border-radius:12px;padding:10px 12px}
.askplan-err{color:#B04619;font-weight:800}
.askplan-links{font-size:.82rem;font-weight:800;text-align:center;margin:14px 0 0}
.askplan-links a{color:var(--j-blue-d,#12688C)}

/* A trail stone locked behind the plan: still colourful, still tappable, but
   clearly a different state from "you have not got here yet". */
.ask-tnode.is-plan{
  background:linear-gradient(180deg,#E8F3D9,#CFE6B4);border-color:#9DC978;
  box-shadow:0 6px 0 #8AB765, 0 11px 16px rgba(90,60,20,.16);cursor:pointer
}
.ask-tnode.is-plan .ask-tnode__f{color:#3E6B26}
.ask-tnode.is-plan:active{transform:translateY(6px);box-shadow:0 0 0 rgba(0,0,0,0)}

/* A couple of these buttons carry a whole sentence ("I already paid — enter my
   code"). The pill is a fixed height by default, so give the long ones room to
   breathe rather than letting the text spill out of the shape. */
.askplan-buy .ask-btn, .askplan-kidlock .ask-btn{
  height:auto;min-height:var(--tap);padding-top:12px;padding-bottom:12px;
  white-space:normal;line-height:1.25;text-align:center
}

/* ---- plan cards ----
   Two prices side by side with the per-week figure under each, because £39.99
   and 77p a week are the same number and only one of them sounds affordable.
   Same shape as the grown-up sales pages on the main site. */
.askplan-cards{display:grid;gap:12px;margin:4px 0 14px}
.askplan-card{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  width:100%;text-align:left;cursor:pointer;font:inherit;color:var(--j-ink);
  background:#fff;border:3px solid var(--j-line);border-radius:18px;padding:15px 16px 14px;
  box-shadow:0 5px 0 rgba(90,60,20,.13), 0 10px 18px rgba(90,60,20,.10);
  transition:transform .1s ease,box-shadow .1s ease,border-color .1s ease;
}
.askplan-card:hover{border-color:var(--j-green)}
.askplan-card:active{transform:translateY(5px);box-shadow:0 0 0 rgba(0,0,0,0)}
.askplan-card[disabled]{opacity:.6;pointer-events:none}
.askplan-card.is-lead{border-color:var(--j-green);background:linear-gradient(180deg,#F7FFF0,#EAF7DC)}
.askplan-card__flag{
  position:absolute;top:-11px;right:14px;background:var(--j-green-btn,#2A8137);color:#fff;
  font-size:.68rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;box-shadow:0 2px 0 rgba(0,0,0,.2)
}
.askplan-card__name{font-weight:900;font-size:.95rem;color:var(--j-ink-2,#7A6449)}
.askplan-card__row{display:flex;align-items:baseline;gap:5px}
.askplan-card__price{font-size:2.1rem;font-weight:900;line-height:1.05;color:var(--j-green-d,#256E31)}
.askplan-card__per{font-weight:800;color:var(--j-ink-2,#7A6449)}
.askplan-card__week{font-weight:900;font-size:.9rem;color:var(--j-orange-d,#B04619);margin-bottom:4px}
.askplan-card__line{font-size:.84rem;font-weight:700;line-height:1.45;color:var(--j-ink-2,#7A6449)}
.askplan-card__cta{
  margin-top:10px;align-self:stretch;text-align:center;
  background:linear-gradient(180deg,#4FBB57,var(--j-green-btn,#2A8137));color:#fff;
  font-weight:900;padding:11px 14px;border-radius:999px;box-shadow:0 4px 0 #1F5F28
}