/* ==========================================================================
   Login + signup — left brand panel: copy on the left, a live-looking product
   preview (WhatsApp chat on a phone + floating result chips) on the right.
   Loaded after each page's inline styles. Pure CSS; plays once, respects
   reduced motion. Hidden with the whole panel below 900px.
   ========================================================================== */
.aside__top{display:flex;flex-direction:column;}
.aside__body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,2.4vw,36px);align-items:start;}
.aside__copy{min-width:0;}
.aside__foot{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 18px;}
.aside__trust{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.8rem;font-weight:600;color:#9fc0b2;}
.aside__trust span{display:inline-flex;align-items:center;gap:6px;}
.aside__trust svg{width:14px;height:14px;color:#7bf0a6;}

/* ── product preview ─────────────────────────────────────────────────────── */
.ap{position:relative;width:250px;height:470px;flex-shrink:0;margin-top:-6px;}
.ap::before{content:"";position:absolute;inset:40px -20px 20px;border-radius:50%;background:radial-gradient(closest-side,rgba(46,224,111,.32),transparent);filter:blur(10px);}
.ap-phone{position:absolute;inset:0 0 0 0;padding:8px;border-radius:42px;background:linear-gradient(160deg,#25302c,#0b100e);
  box-shadow:0 30px 60px -18px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08) inset;}
.ap-island{position:absolute;top:17px;left:50%;width:76px;height:21px;margin-left:-38px;border-radius:99px;background:#000;z-index:3;}
.ap-scr{position:relative;height:100%;border-radius:35px;overflow:hidden;display:flex;flex-direction:column;
  background:#efeae2 radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px) 0 0/14px 14px;}
.ap-status{display:flex;justify-content:space-between;padding:12px 20px 3px 24px;background:#fff;font-size:11px;font-weight:700;color:#111;}
.ap-status i{display:inline-block;width:18px;height:8px;border-radius:2px;box-shadow:inset 0 0 0 1.5px #111;}
.ap-head{display:flex;align-items:center;gap:8px;padding:7px 10px 8px;background:#fff;border-bottom:1px solid #eee;}
.ap-hav{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#2ee06f,#0e9f8e);color:#fff;font-size:10.5px;font-weight:800;flex-shrink:0;}
.ap-head b{display:block;font-size:12.5px;color:#111b21;line-height:1.15;}
.ap-head small{font-size:10px;color:#667781;display:flex;align-items:center;gap:4px;}
.ap-head small svg{width:11px;height:11px;color:#16a34a;}
.ap-chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:9px 9px 6px;overflow:hidden;}
.ap-day{align-self:center;margin-bottom:auto;font-size:9.5px;font-weight:600;color:#54656f;background:#fff;border-radius:7px;padding:3px 8px;box-shadow:0 1px .5px rgba(0,0,0,.08);}
.ap-b{max-width:86%;font-size:11.5px;line-height:1.4;color:#111b21;padding:5px 7px 4px;border-radius:8px;box-shadow:0 1px .5px rgba(0,0,0,.12);}
.ap-b--in{align-self:flex-start;background:#fff;border-top-left-radius:2px;}
.ap-b--out{align-self:flex-end;background:#d9fdd3;border-top-right-radius:2px;}
.ap-t{float:right;margin:5px 0 -3px 8px;font-size:9px;color:#667781;}
.ap-t .tk{color:#53bdeb;}
.ap-card{padding:3px;max-width:88%;}
.ap-img{height:84px;border-radius:6px;display:flex;align-items:flex-end;padding:7px;color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.5)),url(/assets/img/goa-beach.webp) center/cover no-repeat,#7cc4e8;}
.ap-cb{padding:5px 5px 3px;font-size:11px;}
.ap-cb b{display:block;font-size:11.5px;margin-bottom:1px;}
.ap-btn{border-top:1px solid #e9edef;text-align:center;padding:5px 0 3px;font-size:11px;font-weight:600;color:#027eb5;}
.ap-typing{align-self:flex-start;display:flex;gap:3px;background:#fff;border-radius:8px;padding:8px 10px;box-shadow:0 1px .5px rgba(0,0,0,.12);}
.ap-typing i{width:5px;height:5px;border-radius:50%;background:#9aa6ad;animation:apDot 1.2s infinite;}
.ap-typing i:nth-child(2){animation-delay:.15s}.ap-typing i:nth-child(3){animation-delay:.3s}
.ap-input{display:flex;gap:6px;align-items:center;padding:5px 7px 14px;}
.ap-field{flex:1;background:#fff;border-radius:99px;padding:7px 11px;font-size:11px;color:#8696a0;}
.ap-mic{width:30px;height:30px;border-radius:50%;background:#00a884;flex-shrink:0;}

/* floating result chips */
.ap-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:14px;background:rgba(255,255,255,.97);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.55);color:#10231b;white-space:nowrap;}
.ap-chip i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;font-style:normal;}
.ap-chip i svg{width:16px;height:16px;}
.ap-chip b{display:block;font-size:12.5px;line-height:1.2;}
.ap-chip small{display:block;font-size:10.5px;color:#7c918a;font-weight:600;}
.ap-chip--a{top:150px;left:-46px;}
.ap-chip--a i{background:#e3f8ec;color:#0b7a3e;}
.ap-chip--b{bottom:118px;right:-40px;}
.ap-chip--b i{background:#fff4e0;color:#b45309;}
.ap-chip--c{top:-8px;right:-34px;padding:7px 11px;}
.ap-chip--c i{background:#ede9fe;color:#6d28d9;width:26px;height:26px;}

/* one-time staged reveal */
.ap [data-s]{opacity:0;transform:translateY(8px);animation:apIn .45s cubic-bezier(.2,.7,.2,1) forwards;}
.ap .ap-chip[data-s]{transform:translateY(6px) scale(.96);}
.ap [data-s="1"]{animation-delay:.5s}.ap [data-s="2"]{animation-delay:1.3s}
.ap [data-s="3"]{animation-delay:2.4s}.ap [data-s="4"]{animation-delay:3.1s}
.ap [data-s="5"]{animation-delay:4.2s}.ap [data-s="6"]{animation-delay:5s}
.ap .ap-typing[data-s]{animation:apIn .3s ease 1.3s forwards,apOut .2s ease 2.3s forwards;}
@keyframes apIn{to{opacity:1;transform:none}}
@keyframes apOut{to{opacity:0;height:0;padding:0;margin:0}}
@keyframes apDot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}}
@media(prefers-reduced-motion:reduce){
  .ap [data-s]{animation:none!important;opacity:1;transform:none}
  .ap .ap-typing{display:none}
}

/* fit: narrower panels drop the preview; short screens shrink it */
@media(max-width:1180px){
  .aside__body{grid-template-columns:1fr;}
  .ap{display:none;}
}
@media(min-width:1181px) and (max-height:820px){
  .auth__aside{padding-top:34px;padding-bottom:28px;}
  .aside__logo{margin-bottom:18px;}
  .ap{zoom:.84;}
  .aside__head{margin-bottom:10px;}
  .aside__desc{margin-bottom:18px;}
  .aside__feats{gap:10px;}
}