/*
 * AAI Assistant styles.
 * Palette is declared locally so the widget looks right on any site,
 * including one whose theme does not define the AAI variables.
 */
.bubble,.chatwin{
  --paper:#F8F5EF; --ink:#17243B; --dusk:#06366F; --honey:#D6AA7B;
  --sea:#7FA69B; --rose:#94485E; --surface:#FFFFFF; --paper-deep:#E8EBED;
  --line:#DDDFE2; --ink-soft:#252A30; --ink-faint:#526780; --slate:#526780;
  --dusk-soft:#E3E9F1; --dusk-hover:#04264F;
  --sea-soft:#EAF0EE; --sea-deep:#4C6D63;
  --rose-soft:#F3E5E9; --on-rose:#EFD7DE;
  font-family:'Karla',system-ui,-apple-system,sans-serif;
}
/* ---------- LAUNCHER ---------- */
  .bubble{position:fixed;right:24px;bottom:24px;z-index:60;background:var(--dusk);color:#fff;border:0;
    border-radius:99px;padding:16px 27px;font-family:inherit;font-weight:700;font-size:1rem;cursor:pointer;
    box-shadow:0 10px 30px rgba(0,0,0,.24);display:flex;align-items:center;gap:11px}
  .bubble:hover{background:var(--dusk-hover)}

  /* ---------- ASSISTANT PANEL ---------- */
  .chatwin{position:fixed;right:16px;bottom:16px;top:auto;z-index:65;
    width:420px;max-width:calc(100vw - 32px);
    height:min(680px,calc(100dvh - 32px));
    background:var(--paper);border:1px solid var(--line);border-radius:20px;
    box-shadow:0 30px 90px rgba(0,0,0,.3),0 2px 10px rgba(0,0,0,.08);
    display:none;flex-direction:column;overflow:hidden;font-size:var(--cfs,16px)}
  .chatwin.open{display:flex}

  .chatHead{background:var(--slate);color:#fff;padding:clamp(8px,1.2vh,12px) 14px;display:flex;
    align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto}
  .chatWho{display:flex;align-items:center;gap:11px;min-width:0}
  .chatAvatar{width:clamp(34px,4.4vh,42px);height:clamp(34px,4.4vh,42px);border-radius:10px;
    background:var(--surface);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .chatName{display:block;font-family:Newsreader,serif;font-weight:400;font-size:clamp(1.02rem,1.5vh,1.18rem);line-height:1.18;color:#fff}
  .chatSub{display:flex;align-items:center;gap:6px;font-size:.74rem;opacity:.93;line-height:1.35}
  .dotlive{width:7px;height:7px;border-radius:50%;background:#8FE0B0;display:inline-block;flex:0 0 auto}
  .chatTools{display:flex;align-items:center;gap:5px;flex:0 0 auto}
  /* 1.8.2: a dark tint rather than a light one, so white text keeps 4.5:1 or better. */
  .hBtn{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.4);color:#fff;
    height:31px;min-width:31px;padding:0 7px;border-radius:8px;cursor:pointer;font-family:inherit;
    font-weight:700;font-size:.76rem;display:flex;align-items:center;justify-content:center}
  .hBtn:hover{background:rgba(0,0,0,.34)}
  /* The language selector was removed in 1.5.0. */

  .chatBody{flex:1 1 auto;min-height:0;overflow-y:auto;padding:clamp(11px,1.6vh,18px) 16px 8px;background:var(--paper)}
  .chatBody::-webkit-scrollbar{width:8px}
  .chatBody::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}

  /* home tiles */
  .welcome{background:var(--surface);border:1px solid var(--line);border-radius:14px;
    padding:13px 16px;font-size:.93rem;line-height:1.5;color:var(--ink);margin-bottom:11px}
  .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:7px}
  .tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;
    padding:10px 4px;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;
    align-items:center;gap:6px;transition:border-color .15s,background .15s;
    min-height:clamp(64px,9vh,96px);justify-content:center}
  .tile:hover{border-color:var(--dusk);background:var(--dusk-soft)}
  .tile svg{color:var(--dusk);flex:0 0 auto;width:clamp(18px,2.4vh,25px);height:clamp(18px,2.4vh,25px)}
  .tile span{font-size:clamp(.68rem,1vh,.79rem);font-weight:700;color:var(--ink);line-height:1.24;
    text-align:center;hyphens:auto}
  .tiles2{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:8px}
  .tile2{background:var(--surface);border:1px solid var(--line);border-radius:12px;
    padding:clamp(8px,1.2vh,13px) 10px;font-family:inherit;font-size:clamp(.78rem,1.05vh,.87rem);
    font-weight:700;color:var(--dusk);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
  .tile2:hover{border-color:var(--dusk);background:var(--dusk-soft)}

  .crisisBtn{width:100%;background:var(--rose-soft);border:1px solid #E3CDD4;color:var(--rose);
    border-radius:12px;padding:clamp(10px,1.5vh,15px) 12px;font-family:inherit;
    font-size:clamp(.84rem,1.15vh,.94rem);font-weight:700;
    cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:2px}
  .crisisBtn:hover{background:var(--rose);color:#fff;border-color:var(--rose)}

  /* messages */
  .msg{max-width:88%;margin-bottom:15px;font-size:.97rem;line-height:1.62}
  .msg.bot{margin-right:auto}
  .msg.me{margin-left:auto}
  .bubbleTxt{padding:14px 17px;border-radius:18px;display:inline-block}
  .msg.bot .bubbleTxt{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:6px;color:var(--ink)}
  .msg.me .bubbleTxt{background:var(--dusk);color:#fff;border-bottom-right-radius:6px}
  .msg p{margin:0 0 .7em}
  .msg p:last-child{margin-bottom:0}
  .srcRow{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
  .src{font-size:.73rem;color:var(--ink-faint);background:var(--dusk-soft);padding:4px 10px;border-radius:99px;font-weight:700}
  .speak{background:none;border:1px solid var(--line);border-radius:99px;color:var(--ink-faint);
    width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer}
  .speak:hover,.speak.on{border-color:var(--dusk);color:var(--dusk)}
  .typing{display:inline-flex;gap:4px;padding:15px 17px;background:var(--surface);border:1px solid var(--line);border-radius:18px;border-bottom-left-radius:6px}
  .typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);display:block;animation:bob 1.3s infinite ease-in-out}
  .typing i:nth-child(2){animation-delay:.18s}
  .typing i:nth-child(3){animation-delay:.36s}
  @keyframes bob{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

  .safety{background:var(--rose);color:#fff;border-radius:16px;padding:20px;margin-bottom:15px}
  .safety h4{margin:0 0 9px;font-size:1rem;color:#fff}
  .safety p{font-size:.91rem;color:var(--on-rose);margin:0 0 13px;line-height:1.55}
  .safety a.num{display:flex;justify-content:space-between;align-items:center;gap:10px;
    background:rgba(255,255,255,.16);border-radius:10px;padding:11px 13px;margin-bottom:7px;
    color:#fff;text-decoration:none;font-size:.9rem}
  .safety a.num:last-of-type{margin-bottom:0}
  .safety a.num:focus-visible{outline:3px solid #fff;outline-offset:2px}
  .safety .num{display:flex;justify-content:space-between;align-items:center;gap:10px;
    background:rgba(255,255,255,.16);border-radius:10px;padding:11px 13px;margin-bottom:7px;
    color:#fff;font-size:.9rem}
  .safety p.tail{margin:13px 0 0;font-size:.87rem;opacity:.94}

  /* Tier 2. Serious harm, a specialist service is needed. Outlined rather
     than solid, so tier 1 stays visually the loudest thing on the screen. */
  .safety.tier2{background:#fff;border:2px solid var(--rose);color:var(--ink)}
  .safety.tier2 h4{color:var(--rose)}
  .safety.tier2 p{color:var(--ink)}
  .safety.tier2 a.num,.safety.tier2 .num{background:var(--rose-soft);color:var(--rose)}
  .safety.tier2 a.num b,.safety.tier2 .num b{color:var(--rose)}
  .safety.tier2 a.num:focus-visible{outline:3px solid var(--rose);outline-offset:2px}

  /* Tier 3. A real need, not immediate danger. Calm, not alarming. */
  .safety.tier3{background:#fff;border:2px solid var(--sea);color:var(--ink)}
  .safety.tier3 h4{color:var(--sea-deep)}
  .safety.tier3 p{color:var(--ink)}
  .safety.tier3 a.num,.safety.tier3 .num{background:var(--sea-soft);color:var(--sea-deep)}
  .safety.tier3 a.num b,.safety.tier3 .num b{color:var(--sea-deep)}
  .safety.tier3 a.num:focus-visible{outline:3px solid var(--sea);outline-offset:2px}

  @media (prefers-reduced-motion:reduce){
    .safety,.safety *{transition:none!important;animation:none!important}
  }

  .offer{background:var(--sea-soft);border:1px solid #C9DCD5;border-radius:16px;
    padding:15px 17px;margin:2px 0 15px;max-width:88%}
  .offer p{margin:0 0 12px;font-size:.93rem;line-height:1.55;color:var(--ink)}
  .offerRow{display:flex;gap:8px;flex-wrap:wrap}
  .offerYes{background:var(--sea);border:0;color:#fff;border-radius:99px;padding:10px 20px;
    font-family:inherit;font-size:.87rem;font-weight:700;cursor:pointer}
  .offerYes:hover{background:var(--sea-deep)}
  .offerNo{background:transparent;border:1px solid var(--line);color:var(--ink-faint);
    border-radius:99px;padding:10px 18px;font-family:inherit;font-size:.87rem;font-weight:600;cursor:pointer}
  .offerNo:hover{border-color:var(--ink-faint);color:var(--ink-soft)}

  .enq{background:var(--surface);border:1.5px solid var(--dusk);border-radius:16px;padding:17px 18px;margin-bottom:15px;max-width:88%}
  .enq h4{margin:0 0 12px;font-size:.9rem;color:var(--dusk);letter-spacing:.08em;text-transform:uppercase}
  .enq dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 15px;font-size:.92rem}
  .enq dt{color:var(--ink-faint);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;padding-top:3px}
  .enq dd{margin:0;font-weight:600;word-break:break-word}
  .enq .foot{margin:13px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:.81rem;color:var(--ink-faint);line-height:1.5}
  .sent{background:var(--sea-soft);border:1.5px solid var(--sea);border-radius:16px;padding:17px 18px;margin-bottom:15px;max-width:88%}
  .sent h4{margin:0 0 8px;font-size:.98rem}
  .sent p{margin:0 0 .6em;font-size:.91rem;color:var(--ink-soft);line-height:1.55}
  .sent p:last-child{margin-bottom:0}
  .sent .ref{display:flex;justify-content:space-between;gap:10px;background:var(--surface);border-radius:10px;padding:8px 12px;color:var(--sea-deep)}
  .sent .ref b{letter-spacing:.04em}
  /* Not sent. Slate, not burgundy: a problem, but not an emergency. */
  .notsent{background:var(--surface);border:2px solid var(--slate);border-radius:16px;padding:17px 18px;margin-bottom:15px;max-width:88%}
  .notsent h4{margin:0 0 8px;font-size:.98rem;color:var(--ink)}
  .notsent p{margin:10px 0 0;font-size:.91rem;color:var(--ink-soft);line-height:1.55}
  .notsent p:first-of-type{margin-top:0}
  .notsent .offerRow{margin-top:12px}
  .notsent a.offerNo{text-decoration:none;display:inline-flex;align-items:center;color:var(--dusk);border-color:var(--dusk)}
  .sys{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.8rem;color:var(--ink-faint);margin:2px 0 14px}
  .sys .typing{margin:0;padding:0;background:none;border:0}

  /* chips, 1.8.1: they wrap onto more lines, so every choice is always in view.
     No sideways scrolling. The cap only applies at very high zoom, and then
     the row scrolls up and down with a visible scrollbar. */
  .chatChips{padding:4px 18px 12px;display:flex;gap:8px;flex-wrap:wrap;background:var(--paper);
    flex:0 0 auto;max-height:45vh;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}
  .chip{background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:10px 17px;
    font-family:inherit;font-size:.86rem;color:var(--dusk);cursor:pointer;font-weight:600;
    white-space:normal;overflow-wrap:anywhere;text-align:left;flex:0 1 auto;max-width:100%;
    min-height:44px;line-height:1.3}
  .chip:hover{border-color:var(--dusk);background:var(--dusk-soft)}

  /* foot */
  .chatFoot{flex:0 0 auto;border-top:1px solid var(--line);padding:clamp(8px,1.2vh,12px) 14px 0;background:var(--surface)}
  .chatInput{display:flex;align-items:center;gap:9px}
  .chatInput input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:99px;
    padding:clamp(10px,1.5vh,13px) 18px;font-family:inherit;font-size:.93rem;background:var(--paper);color:var(--ink)}
  .chatInput input:focus{border-color:var(--dusk);background:var(--surface)}
  .chatInput input:focus-visible{outline:3px solid #06366F;outline-offset:2px}
  .micBtn{flex:0 0 auto;width:clamp(38px,5.4vh,44px);height:clamp(38px,5.4vh,44px);border-radius:50%;
    border:1.5px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer;
    display:flex;align-items:center;justify-content:center}
  .micBtn:hover{border-color:var(--dusk);color:var(--dusk)}
  .micBtn.rec{background:var(--rose);border-color:var(--rose);color:#fff}
  .sendBtn{flex:0 0 auto;background:var(--slate);border:0;color:#fff;height:clamp(38px,5.4vh,44px);
    padding:0 clamp(18px,3vw,24px);border-radius:99px;font-family:inherit;font-weight:700;font-size:.92rem;cursor:pointer}
  .sendBtn:hover{background:#42536A}
  .chatBar{display:grid;grid-template-columns:1fr 1.15fr 1fr;margin:0 -14px;border-top:1px solid var(--line)}
  .barBtn{padding:clamp(7px,1.2vh,10px) 6px;font-family:inherit;font-size:clamp(.68rem,.95vh,.75rem);
    font-weight:700;cursor:pointer;border:0;text-align:center;line-height:1.28}
  .barBtn.human{background:var(--slate);color:#fff}
  .barBtn.human:hover{background:#42536A}
  .barBtn.by{background:var(--paper-deep);color:var(--ink-faint);cursor:default;font-size:.63rem;line-height:1.25}
  .barBtn.by b{display:block;color:var(--ink-soft);font-size:.7rem}
  .barBtn.exit{background:var(--rose);color:#fff}
  .barBtn.exit:hover{background:#7A3F4F}
  .chatNote{font-size:clamp(.63rem,.9vh,.71rem);color:var(--ink-faint);margin:clamp(7px,1.1vh,10px) 0 clamp(7px,1.1vh,10px);line-height:1.38;text-align:center}
  .chatNote a{color:var(--ink-faint)}
  .chips{display:flex;gap:3px;margin-top:6px}
  .chips span{width:15px;height:15px;border-radius:4px;display:block}

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .heroArt .r1,.heroArt .r2,.heroArt .r3{animation:none}
    .orb .fill{transition:none}
    .typing i{animation:none}
  }
  @media (max-width:980px){
    .heroInner,.contactGrid,.proGrid{grid-template-columns:1fr}
    .heroArt{min-height:230px;order:-1}
    .heroArt svg{max-width:260px}
    .care{grid-template-columns:repeat(2,1fr)}
    .storyWrap{grid-template-columns:1fr;gap:22px}
    .who{grid-template-columns:1fr}
    .fgrid{grid-template-columns:1fr;gap:32px}
    .kitTop,.tabs{padding-left:28px;padding-right:28px}
    .stage{padding:36px 24px}
    .stepRow{grid-template-columns:auto 1fr;gap:18px}
    .stepTag{grid-column:2;justify-self:start;margin-top:6px}
  }
  @media (max-width:640px){
    .bubble{padding:13px 19px;font-size:.9rem;right:16px;bottom:16px}
    .chatwin{right:0;left:0;top:0;bottom:0;width:100%;max-width:100%;
      height:100dvh;max-height:100dvh;border-radius:0;border:0}
    .tiles{grid-template-columns:repeat(2,1fr)}
    .chatBar{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
    .barBtn.by{grid-column:span 2;order:3}
  }

/* Keep clear of the WordPress admin bar when someone is logged in */
body.admin-bar .chatwin{height:min(680px,calc(100dvh - 64px))}
@media screen and (max-width:782px){
  body.admin-bar .chatwin{height:calc(100dvh - 46px);top:46px;bottom:0}
}
/* Stop the page behind scrolling when the assistant is open on a phone */
body.aaiOpen{overflow:hidden;position:relative}
/* Keep scrolling inside the window, and respect phone safe areas */
.chatBody{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.chatFoot{padding-bottom:max(0px,env(safe-area-inset-bottom))}
.chatInput input{font-size:16px}

/* Visually hidden label, kept here so the assistant works on any theme */
.chatwin .srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 1.8.6. While an urgent card is showing on a short screen, the small print
   under the box is hidden, because the card already carries the same
   numbers. It comes back with the next message. */
@media (max-height:760px){.chatwin.crisisNow .chatNote{display:none}}
/* 1.8.6. On a phone, when someone is logged in, the WordPress admin bar sat
   over the chat header and close button. The chat now takes the full
   screen and the admin bar steps aside while it is open. */
@media screen and (max-width:640px){
  body.admin-bar.aaiOpen #wpadminbar{display:none}
  body.admin-bar .chatwin{top:0;height:100dvh}
}
/* Link lines (text SHOUT, BSL) look the same as phone lines. */
.safety a.num[href^="sms:"],.safety a.num[href^="http"]{text-decoration:none}

/* 1.8.7. A bigger chat window on laptops and desktops, so answers and
   urgent cards are easier to read. Phones are unchanged (full screen). */
@media (min-width:641px){
  .chatwin{width:480px;height:min(800px,calc(100dvh - 32px))}
}
@media (min-width:783px){
  body.admin-bar .chatwin{height:min(800px,calc(100dvh - 64px))}
}
@media (min-width:1400px){
  .chatwin{width:520px;height:min(860px,calc(100dvh - 32px))}
  body.admin-bar .chatwin{height:min(860px,calc(100dvh - 64px))}
}