/* Chat with Ardie — page styles (loaded via {use_url}css/chat.css) */
  /* ===================================================================
     CHAT WITH ARDIE — conversational landing for My Ardie (Arden)
     One goal: Join → /signup. Vanilla JS, CSS micro-interactions,
     accessible (role=log, buttons), reduced-motion safe.
     =================================================================== */
  :root{
    --bg:#e7f4ff; --tile:#fff; --navy:#2a456d; --ink:#22334c; --ink-soft:#5f7186;
    --hair:#d3e6f5; --green:#5e9636; --leaf:#8fc95d; --sun:#f1b650; --on-navy:#eaf2fc;
    --ease:cubic-bezier(0, 0.28, 0.25, 1);
  }
  *{ box-sizing:border-box; }
  body{ margin:0; background:var(--bg); color:var(--ink);
    font-family:"National Park",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    font-weight:400; -webkit-font-smoothing:antialiased; }
  b{ font-weight:700; }
  :focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
  .vh{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

  .stage{ 
    /*min-height:100dvh;*/
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    justify-content:center;
    /*padding:24px 16px 30px; gap:14px;
    background:radial-gradient(1100px 620px at 82% -10%, color-mix(in oklab,var(--sun) 14%,transparent), transparent 60%),radial-gradient(820px 520px at -6% 108%, color-mix(in oklab,var(--leaf) 13%,transparent), transparent 60%), var(--bg); */
  }

  /* ---- the app ---- */
  .app{ 
    width:100%; 
    height:100dvh; 
    display:flex; 
    flex-direction:column;
    border-radius:26px; 
    overflow:hidden;
    /*background:var(--tile); 
    border:1px solid var(--hair); 
    box-shadow:0 34px 70px -34px rgba(20,45,80,.55);*/
  }

  .app__bar{ display:flex; align-items:center; gap:11px; padding:13px 15px; border-bottom:1px solid var(--hair); }
  .ava{ border-radius:50%; flex:none; display:block; object-fit:cover; background:#fff; }
  .ava--lg{ width:40px; height:40px; } .ava--lg svg{ width:23px; height:23px; }
  .msg .ava{ width:40px; height:40px; align-self:flex-end; } .msg .ava svg{ width:18px; height:18px; }
  .app__id{ display:flex; flex-direction:column; gap:1px; line-height:1.15; }
  .app__id b{ font-size:16px; color:var(--navy); }
  .status{ font-size:11.5px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; }
  .status .dot{ width:7px; height:7px; border-radius:50%; background:var(--leaf);
    box-shadow:0 0 0 3px color-mix(in oklab,var(--leaf) 30%,transparent); animation:pulse 2.4s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px color-mix(in oklab,var(--leaf) 30%,transparent);} 50%{ box-shadow:0 0 0 6px color-mix(in oklab,var(--leaf) 0%,transparent);} }
  /* same #btn_get_started style, scaled down for the header (3px border / smaller bevel) */
  .btn-join{ margin-left:auto; background:#fff; color:#2a456d; font-weight:700; font-size:13px; letter-spacing:-.025em;
    text-decoration:none; padding:8px 15px; border:3px solid #2a456d; border-radius:50px; box-shadow:#2a456d -5px 3px 0; }
  /* press handled by the JS button object (aniClick) — same as signup.js */

  /* ---- message log ---- background:linear-gradient(var(--bg), #fff 46%);*/
  .log{ 
    flex:1; 
    overflow-y:auto; 
    padding:20px 10px; 
    display:flex; 
    flex-direction:column; gap:10px;
    scroll-behavior:smooth;
    width:min(550px,100%); 
    margin:0 auto;
  }
  .msg{ display:flex; gap:5px; max-width:90%; animation:pop .32s var(--ease) both; }
  .msg--ardie{ align-self:flex-start; }
  .msg--user{ align-self:flex-end; }
  @keyframes pop{ from{ opacity:0; transform:translateY(9px) scale(.98);} to{ opacity:1; transform:none;} }
  .bub{ padding:11px 14px; border-radius:17px; font-size:20px; line-height:1.46; }
  .msg--ardie .bub{ background:var(--tile); color:var(--ink); border-bottom-left-radius:5px; }
  .msg--user .bub{ background:var(--navy); color:var(--on-navy); border-bottom-right-radius:5px; }
  .msg--ardie .bub b{ color:var(--navy); letter-spacing:-.4px; }
  .msg--user .bub b{ color:#fff; }

  /* typing indicator */
  .typing .bub{ padding:13px 15px; }
  .dots{ display:inline-flex; gap:4px; }
  .dots i{ width:7px; height:7px; border-radius:50%; background:var(--ink-soft); opacity:.45; animation:blink 1.1s infinite; }
  .dots i:nth-child(2){ animation-delay:.18s; } .dots i:nth-child(3){ animation-delay:.36s; }
  @keyframes blink{ 0%,60%,100%{ transform:translateY(0); opacity:.35; } 30%{ transform:translateY(-4px); opacity:1; } }

  /* photo bubble */
  .has-photo .bub{ padding:6px; background:#fff; border:1px solid var(--hair); }
  .has-photo .photo{ width:100%; height:150px; object-fit:cover; border-radius:12px; display:block; }
  .has-photo .ph-cap{ display:block; font-size:12px; font-weight:700; color:var(--ink-soft); padding:7px 8px 3px; }

  /* image-on-top-of-text bubble (e.g. the location GIF above the "heads-up" line) */
  .has-gif .bub-gif{ display:block; width:80px; max-width:100%; height:auto; margin:0 auto 8px; border-radius:12px; }
  .has-gif .bub-photo{ display:block; width:100%; max-width:100%; height:auto; margin:0 auto 8px; border-radius:12px; }

  /* CTA bubble */
  .has-cta .bub{ background:transparent; padding:0; }
  /* matches #btn_get_started (.th1.whiteblue.bl) from /signup/signup.html */
  .cta{ 
    display:inline-flex; 
    align-items:center; 
    gap:6px; 
    background:#fff; 
    color:#2a456d; 
    font-weight:700;
    font-size:18px; 
    line-height:20px; 
    letter-spacing:-.025em; 
    text-decoration:none;
    padding:14px 18px; 
    border:5px solid #2a456d; 
    border-radius:50px; 
    box-shadow:#2a456d -10px 5px 0;
    margin-left:10px;
  }
  /* press handled by the JS button object (aniClick) — same as signup.js */
  .cta .arw{ transition:transform .16s var(--ease); }
  .cta:hover .arw{ transform:translateX(4px); }

  /* ---- composer (quick replies) ---- */
  .composer_wrapper{
    width:100%;
    border-top:1px solid var(--hair); 
    /* slide IN: long, soft decelerate */
    transition:transform .55s cubic-bezier(0, 0.28, 0.25, 1), opacity .5s cubic-bezier(0, 0.28, 0.25, 1);
    will-change:transform, opacity; 
  }
  .composer_wrapper.is-hidden{
    transform:translateY(115%);
    opacity:0;
    pointer-events:none;
    /* slide OUT: accelerate away */
    transition:transform .42s cubic-bezier(0.42, 0.42, 0.58, 0.58), opacity .3s ease;
  }
  .composer{
    width:min(550px,100%);
    margin:0 auto;
    padding:15px; 
    display:flex; 
    flex-wrap:wrap; 
    gap:5px;
    align-items:center; 
    min-height:58px;
  }
  .composer.is-hidden{
    transform:translateY(115%);
    opacity:0;
    pointer-events:none;
    /* slide OUT: accelerate away */
    transition:transform .42s cubic-bezier(0.42, 0.42, 0.58, 0.58), opacity .3s ease;
  }
  .chip{ font-family:inherit; font-size:13.5px; font-weight:700; color:var(--navy); background:var(--bg);
    border:1.5px solid var(--hair); padding:9px 14px; border-radius:100px; cursor:pointer;
    animation:chipIn .3s var(--ease) both; animation-delay:calc(var(--i,0) * .05s);
    transition:transform .14s var(--ease), border-color .16s ease, background .16s ease; }
  .chip:hover{ transform:translateY(-2px); border-color:var(--green); background:color-mix(in oklab,var(--leaf) 12%,var(--bg)); }
  .chip:active{ transform:translateY(0) scale(.97); }
  /* "I’m in" — same #btn_get_started style (.th1.whiteblue.bl) as the CTA */
  .chip--primary{
    background: #fff;
    color: #2a456d;
    border: 5px solid #2a456d;
    border-radius: 50px;
    padding: 15px 13px;
    box-shadow: #2a456d -10px 5px 0;
    animation: none;
    transition: none;
    font-size: 18px;
    letter-spacing: -0.025em;
    margin: 0px auto;
  }
  /* neutralize base .chip hover lift; press handled by the JS button object (aniClick) */
  .chip--primary:hover{ transform:none; background:#fff; border-color:#2a456d; }
  /* full-width flex break: forces the "I’m in" button onto its own line */
  .chip-break{ flex-basis:100%; width:100%; height:0; }
  @keyframes chipIn{ from{ opacity:0; transform:translateY(7px);} to{ opacity:1; transform:none;} }
  .composer__done{ margin:0; font-size:13px; font-weight:700; color:var(--green); display:flex; align-items:center; gap:8px; }
  .composer__done .dot{ width:7px; height:7px; border-radius:50%; background:var(--leaf); }

  /* ---- brand line under the app ---- */
  .brandline{ display:flex; align-items:center; gap:9px; color:var(--ink-soft); font-size:12px; }
  .brandline .logo{ height:20px; width:auto; }

  /* ---- intro splash: round icon animates in, then fades to the chat ---- */
  .intro{ position:absolute; inset:0; z-index:20; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:16px; background:var(--bg);
    transition:opacity .5s ease, visibility .2s; }
  .intro.is-out{ opacity:0; visibility:hidden; }
  .intro__badge{ position:relative; display:inline-grid; place-items:center; }
  .intro__badge::after{ content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
    box-shadow:0 0 0 0 color-mix(in oklab,var(--navy) 55%,transparent);
    animation:introRing 1s ease-out .6s infinite; }
  .intro__icon{ width:280px; height:280px; border-radius:50%; display:block; border:0; pointer-events:none;
    animation:introPop .5s cubic-bezier(0, 0.95, 0.64, 1) both; }
  /* fills for the injected inline SVG (its own <style> is stripped — blocked by CSP) */
  .intro__icon .cls-1{ fill:#fff; }
  .intro__icon .cls-2{ fill:#2a456d; }
  .intro__icon .cls-3{ fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:6.02px; }
  .intro__icon .eye{ transform-box:fill-box; transform-origin:center; animation:eyeBlink 3s ease-in-out infinite; }
  @keyframes eyeBlink{ 0%,20%,100%{ transform:scaleY(1);} 24%{ transform:scaleY(.08);} 28%{ transform:scaleY(1);} 33%{ transform:scaleY(.08);} 37%{ transform:scaleY(1);} }
  .intro__name{ font-weight:700; font-size:22px; letter-spacing:-.01em; color:var(--navy);
    animation:introName .5s var(--ease) .34s both; }
  @keyframes introPop{ 0%{ opacity:0; transform:scale(.3);} 60%{ opacity:1;} 100%{ opacity:1; transform:scale(1);} }
  @keyframes introName{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
  @keyframes introRing{ 0%{ box-shadow:0 0 0 0 color-mix(in oklab,var(--leaf) 55%,transparent);} 70%,100%{ box-shadow:0 0 0 24px color-mix(in oklab,var(--leaf) 0%,transparent);} }

  @media (prefers-reduced-motion: reduce){
    .log{ scroll-behavior:auto; }
    .intro__icon,.intro__name{ animation:none; opacity:1; }
    .intro__icon .eye{ animation:none; }
    .intro__badge::after{ animation:none; }
    .msg,.chip{ animation:none; }
    .dots i,.status .dot{ animation:none; }
    .cta,.btn-join,.chip{ transition:none; }
  }