/* ============================================================
   Ali — AI travel guru widget · alisworldtours.com · v3
   Served from /assets/ali/ali.css · no dependencies
   Namespaced .ali- · FaceTime-style 9:16 glass panel + PiP rig
   ============================================================ */

/* ---------- closed pill (unchanged) ---------- */
.ali-pill{
  position:fixed;
  right:calc(18px + env(safe-area-inset-right,0px));
  bottom:calc(84px + env(safe-area-inset-bottom,0px)); /* clears WhatsApp fab */
  z-index:118; /* under cookie bar (120), over wa-fab (90) */
  display:flex;align-items:center;gap:12px;
  padding:8px 18px 8px 8px;border:1px solid rgba(255,255,255,.22);
  border-radius:999px;cursor:pointer;
  background:rgba(36,19,51,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 14px 38px rgba(36,19,51,.35);
  font-family:"Inter",-apple-system,Segoe UI,Arial,sans-serif;
  color:#fff;text-align:left;
  transition:transform .18s ease,box-shadow .18s ease;
}
.ali-pill:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(36,19,51,.42)}
.ali-pill:focus-visible{outline:3px solid rgba(245,119,43,.55);outline-offset:2px}
.ali-pill__avatar{
  width:64px;height:64px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:#33194A; /* solid plum: transparent head PNG never shows through */
  border:2px solid rgba(198,161,91,.55);position:relative;
}
.ali-pill__avatar canvas{width:100%;height:100%;display:block}
.ali-pill__avatar img{
  position:absolute;left:-15%;top:-5%;width:130%;height:130%;
  object-fit:cover;display:block; /* tight crop: face fills the circle */
}
.ali-pill__label{display:flex;flex-direction:column;line-height:1.25}
.ali-pill__label b{font-family:"Poppins",Inter,sans-serif;font-weight:600;font-size:.95rem;letter-spacing:.01em}
.ali-pill__label span{font-size:.76rem;color:rgba(255,255,255,.72)}
.ali-hidden{display:none !important}

/* ---------- open panel: 9:16 iOS glass (desktop) ---------- */
.ali-panel{
  position:fixed;z-index:130; /* above cookie bar (120) */
  right:calc(24px + env(safe-area-inset-right,0px));
  bottom:calc(24px + env(safe-area-inset-bottom,0px));
  width:384px;max-width:calc(100vw - 32px);
  height:560px;height:min(78vh,700px);
  max-height:calc(100vh - 32px);
  display:flex;flex-direction:column;
  background:rgba(250,248,253,.86);
  -webkit-backdrop-filter:blur(28px) saturate(1.4);
  backdrop-filter:blur(28px) saturate(1.4);
  border:1px solid rgba(255,255,255,.6);
  border-radius:28px;
  box-shadow:0 32px 80px -20px rgba(20,8,30,.45);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',Inter,sans-serif;
  color:#241333;overflow:hidden;
  transform-origin:100% 100%;
  animation:ali-pop .22s cubic-bezier(.21,.9,.27,1);
}
.ali-panel.ali-closing{animation:ali-shut .22s ease forwards;pointer-events:none}
@keyframes ali-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes ali-shut{to{opacity:0;transform:scale(.96)}}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .ali-pill{background:#241333}
  .ali-panel{background:rgba(252,250,255,.98)}
}

/* ---------- slim transparent top bar ---------- */
.ali-head{display:flex;align-items:center;gap:10px;height:56px;
  padding:0 14px 0 16px;flex:0 0 auto;background:transparent}
.ali-head__avatar{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:#33194A;position:relative;box-shadow:0 1px 4px rgba(20,8,30,.18)}
.ali-head__avatar img{
  position:absolute;left:-15%;top:-5%;width:130%;height:130%;
  object-fit:cover;display:block;
}
.ali-head__title{flex:1 1 auto;min-width:0;line-height:1.15}
.ali-head__title b{display:block;font-weight:600;font-size:17px;letter-spacing:-.01em;
  color:#241333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ali-head__sub{display:flex;align-items:center;gap:5px;font-size:12px;
  color:rgba(36,19,51,.55);white-space:nowrap;overflow:hidden}
.ali-dot{width:7px;height:7px;border-radius:50%;background:#34C759;flex:0 0 auto;display:inline-block}

/* iOS-style circular glass control buttons (voice / close) */
.ali-iconbtn{appearance:none;-webkit-appearance:none;
  border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.65);color:#5B2E91;
  width:34px;height:34px;min-height:34px;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0;flex:0 0 auto;
  box-shadow:0 1px 3px rgba(20,8,30,.1);
  transition:background .15s,transform .12s}
.ali-iconbtn:hover{background:rgba(255,255,255,.95)}
.ali-iconbtn:active{transform:scale(.94)}
.ali-iconbtn:focus-visible{outline:3px solid rgba(245,119,43,.55);outline-offset:1px}
.ali-iconbtn[aria-pressed="true"]{background:#5B2E91;border-color:#5B2E91;color:#fff}
.ali-iconbtn svg{width:17px;height:17px;display:block}

/* ---------- Ali PiP: FaceTime self-view card, floats over the log ---------- */
.ali-pip{position:absolute;top:68px;right:12px;width:112px;height:148px;z-index:5;
  border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,#6A3AA5 0%,#41216B 55%,#2A1440 100%);
  box-shadow:0 14px 30px -8px rgba(20,8,30,.45)}
.ali-pip:after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;
  border:2px solid rgba(255,255,255,.85);border-radius:18px;pointer-events:none;z-index:2}
.ali-pip canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.ali-pipfall{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.ali-pipfall img{position:absolute;left:0;top:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 28%;display:block}

/* ---------- messages: the whole remaining height ---------- */
.ali-log{flex:1 1 auto;overflow-y:auto;padding:12px 16px 6px;min-height:120px;
  background:transparent;
  scrollbar-width:thin;scrollbar-color:rgba(36,19,51,.18) transparent;
  -webkit-overflow-scrolling:touch}
.ali-log::-webkit-scrollbar{width:5px}
.ali-log::-webkit-scrollbar-track{background:transparent}
.ali-log::-webkit-scrollbar-thumb{background:rgba(36,19,51,.16);border-radius:8px}

/* iMessage bubbles */
.ali-msg{max-width:72%;margin:0 0 14px;padding:10px 14px;border-radius:20px;
  font-size:15.5px;line-height:1.45;word-wrap:break-word}
.ali-msg--ali{background:#FFFFFF;color:#241333;border:1px solid rgba(36,19,51,.06);
  border-bottom-left-radius:4px;margin-right:auto;box-shadow:0 1px 2px rgba(20,8,30,.04)}
.ali-msg--user{background:linear-gradient(135deg,#6A3AA5,#5B2E91);color:#fff;border:0;
  border-bottom-right-radius:4px;margin-left:auto}
.ali-msg--link{display:block;color:#5B2E91;font-weight:600;text-decoration:none}
.ali-msg--link:hover{background:#f6f0fd}

/* inline replay ghost button on Ali's latest message */
.ali-replay{appearance:none;border:0;background:transparent;color:#b7a6cf;cursor:pointer;
  font:inherit;font-size:14px;line-height:1;padding:0 3px;margin-left:6px;
  border-radius:6px;vertical-align:baseline}
.ali-replay:hover{color:#5B2E91;background:#f4eefc}
.ali-replay:focus-visible{outline:2px solid rgba(245,119,43,.55);outline-offset:1px}

/* ---------- result cards rail ---------- */
.ali-rail{flex:0 0 auto;display:flex;gap:10px;overflow-x:auto;padding:8px 16px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.ali-rail::-webkit-scrollbar{display:none}
.ali-card{flex:0 0 168px;background:rgba(255,255,255,.92);border:1px solid rgba(36,19,51,.06);
  border-radius:16px;overflow:hidden;text-decoration:none;color:#241333;
  box-shadow:0 6px 16px rgba(20,8,30,.1);
  transition:transform .15s ease,box-shadow .15s ease;display:block}
.ali-card:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(20,8,30,.16)}
.ali-card__ph{height:64px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(120deg,#5B2E91 0%,#241333 90%);
  color:rgba(255,255,255,.9);font-weight:600;font-size:24px}
.ali-card__body{padding:9px 11px 11px}
.ali-card__tier{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8A6D3B}
.ali-card__name{font-weight:600;font-size:14px;margin:2px 0 5px}
.ali-card__tag{display:inline-block;font-size:10.5px;font-weight:600;color:#5B2E91;
  background:#f4eefc;border-radius:999px;padding:3px 8px}

/* ---------- iOS suggestion chips: one scroll row above the input ---------- */
.ali-chiprow{flex:0 0 auto;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;
  padding:8px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ali-chiprow::-webkit-scrollbar{display:none}
.ali-chip{appearance:none;-webkit-appearance:none;flex:0 0 auto;white-space:nowrap;
  border:1px solid rgba(36,19,51,.08);background:rgba(255,255,255,.8);color:#5B2E91;
  font:inherit;font-size:14px;font-weight:600;border-radius:999px;
  padding:0 15px;height:34px;min-height:34px;display:inline-flex;align-items:center;cursor:pointer;
  box-shadow:0 1px 2px rgba(20,8,30,.05);
  transition:background .15s,transform .12s}
.ali-chip:hover{background:#fff}
.ali-chip:active{transform:scale(.97)}
.ali-chip:focus-visible{outline:3px solid rgba(245,119,43,.55);outline-offset:1px}

/* ---------- roomy iMessage input bar ---------- */
.ali-inputrow{flex:0 0 auto;display:flex;gap:10px;align-items:center;
  padding:10px 12px;min-height:64px}
.ali-field{position:relative;flex:1 1 auto;min-width:0;display:block}
.ali-input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:#241333;
  border:1px solid rgba(36,19,51,.1);border-radius:22px;height:44px;
  padding:0 46px 0 16px;background:rgba(255,255,255,.9)}
.ali-input::placeholder{color:rgba(36,19,51,.4)}
.ali-input:focus{outline:none;border-color:rgba(91,46,145,.55);
  box-shadow:0 0 0 3px rgba(91,46,145,.15)}
/* mic: round glass button inside the right end of the field */
.ali-mic{position:absolute;right:3px;top:3px;width:38px;height:38px;min-height:38px;
  border-radius:50%;box-shadow:none;background:rgba(255,255,255,.65)}
.ali-mic[aria-pressed="true"]{background:#EF6A5A;border-color:#EF6A5A;color:#fff;
  animation:ali-miclive 1.6s ease infinite}
@keyframes ali-miclive{0%,100%{box-shadow:0 0 0 0 rgba(239,106,90,.45)}55%{box-shadow:0 0 0 9px rgba(239,106,90,0)}}
/* send: solid plum circle with white up arrow */
.ali-send{appearance:none;-webkit-appearance:none;border:0;border-radius:50%;
  background:#5B2E91;color:#fff;
  width:44px;min-width:44px;height:44px;min-height:44px;padding:0;cursor:pointer;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px -4px rgba(91,46,145,.5);
  transition:background .15s,transform .12s,opacity .15s}
.ali-send svg{width:20px;height:20px;display:block}
.ali-send:hover{background:#4a2478}
.ali-send:active{transform:scale(.94)}
.ali-send:focus-visible{outline:3px solid rgba(245,119,43,.55);outline-offset:1px}
.ali-send[disabled]{opacity:.35;cursor:default;box-shadow:none}

/* ---------- footer micro-row: nearly invisible until hover ---------- */
.ali-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 14px 8px;font-size:12.5px;color:#8a7f95;opacity:.55;transition:opacity .2s}
.ali-foot:hover,.ali-foot:focus-within{opacity:1}
.ali-foot button,.ali-foot a{appearance:none;-webkit-appearance:none;border:0;background:transparent;
  color:#7c6a91;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;text-decoration:none;
  padding:8px 6px;border-radius:8px}
.ali-foot button:hover,.ali-foot a:hover{color:#5B2E91;background:rgba(91,46,145,.07)}
.ali-foot button:focus-visible,.ali-foot a:focus-visible{outline:3px solid rgba(245,119,43,.55);outline-offset:1px}

/* ---------- highlight pulse applied to site search fields ---------- */
.ali-flash{animation:ali-flash 1.2s ease 1;border-radius:11px}
@keyframes ali-flash{
  0%{box-shadow:0 0 0 0 rgba(245,119,43,0);outline:3px solid rgba(245,119,43,0)}
  25%{box-shadow:0 0 0 6px rgba(245,119,43,.28);outline:3px solid rgba(245,119,43,.65)}
  100%{box-shadow:0 0 0 0 rgba(245,119,43,0);outline:3px solid rgba(245,119,43,0)}
}

/* ---------- mobile bottom sheet ---------- */
@media (max-width:959px){
  .ali-panel{
    left:0;right:0;bottom:0;width:100%;max-width:100%;
    height:88vh;max-height:88vh;border-radius:24px 24px 0 0;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .ali-pip{top:76px;width:96px;height:128px}
  .ali-drag{width:36px;height:4px;border-radius:2px;background:rgba(36,19,51,.22);
    margin:8px auto -4px;flex:0 0 auto}
  .ali-pill__label span{display:none}
  .ali-pill{padding:6px 14px 6px 6px;bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:960px){.ali-drag{display:none}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ali-panel,.ali-panel.ali-closing{animation:none}
  .ali-pill,.ali-card,.ali-send,.ali-iconbtn,.ali-chip{transition:none}
  .ali-pill:hover,.ali-card:hover{transform:none}
  .ali-chip:active,.ali-send:active,.ali-iconbtn:active{transform:none}
  .ali-flash{animation:none;outline:3px solid rgba(245,119,43,.6)}
  .ali-mic[aria-pressed="true"]{animation:none}
}

/* visually hidden (a11y) */
.ali-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* JS-injected avatar initial (pill/header only; the PiP never shows a letter) —
   removed by JS the moment the head image loads or the rig takes over */
.ali-init{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;
  align-items:center;justify-content:center;color:#fff;font-weight:600}

/* ===== dark plum glass skin — owner reference (FaceTime glass, dark) ===== */
.ali-panel{background:rgba(30,15,46,.82);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 32px 80px -18px rgba(8,3,14,.7)}
.ali-head__title b{color:#fff}
.ali-head__sub{color:rgba(230,220,245,.72)}
.ali-iconbtn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);color:#f2ecfa}
.ali-iconbtn:hover{background:rgba(255,255,255,.22)}
.ali-log{scrollbar-color:rgba(255,255,255,.25) transparent}
.ali-msg--ali{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);color:#f4effb}
.ali-msg--ali .ali-replay{color:rgba(235,225,250,.8)}
.ali-msg--user{background:linear-gradient(135deg,#7a45bd,#5B2E91);color:#fff}
.ali-msg--link{color:#e8ddf8}
.ali-chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#f2eafc}
.ali-chip:hover{background:rgba(255,255,255,.2)}
.ali-input{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.2);color:#fff}
.ali-input::placeholder{color:rgba(235,226,248,.55)}
.ali-mic{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);color:#efe7fa}
.ali-foot button{color:rgba(228,217,244,.75)}
.ali-pip{box-shadow:0 14px 34px -10px rgba(5,2,10,.75)}
.ali-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.ali-card__name{color:#fff}.ali-card__tier{color:#F5A623}.ali-card__tag{color:rgba(230,220,245,.7)}
