#zainVeil{
  position:fixed;inset:0;z-index:35;opacity:0;pointer-events:none;
  transition:opacity .55s ease;
  backdrop-filter:blur(15px) saturate(.92);
  -webkit-backdrop-filter:blur(15px) saturate(.92);
  background:radial-gradient(58% 52% at 50% 340px,
    rgba(16,6,6,.74) 0%, rgba(16,6,6,.52) 42%, rgba(16,6,6,.22) 72%, transparent 100%);
  -webkit-mask-image:radial-gradient(58% 52% at 50% 340px,
    #000 0%, rgba(0,0,0,.72) 46%, rgba(0,0,0,.3) 74%, transparent 100%);
  mask-image:radial-gradient(58% 52% at 50% 340px,
    #000 0%, rgba(0,0,0,.72) 46%, rgba(0,0,0,.3) 74%, transparent 100%);
}
body.zain-veiled #zainVeil{opacity:1}

#zain{
  /* sits clear of the site's navigation bar */
  position:fixed;top:calc(var(--nav-h, 62px) + 32px);left:50%;z-index:40;
  width:136px;height:60px;
  transform:translateX(-50%);opacity:.3;will-change:transform,opacity;
  transition:width .72s cubic-bezier(.2,1.16,.32,1),
             height .72s cubic-bezier(.2,1.22,.3,1);
}
#zain.is-open{opacity:1;width:400px;height:min(604px,calc(100vh - var(--nav-h, 62px) - 64px))}

.zain__glass{
  position:absolute;inset:0;border-radius:999px;
  background:linear-gradient(180deg, rgba(54,25,23,.44) 0%, rgba(28,11,10,.56) 100%);
  backdrop-filter:blur(22px) saturate(1.45);
  -webkit-backdrop-filter:blur(22px) saturate(1.45);
  border:1px solid rgba(255,252,246,.15);
  transition:border-radius .72s cubic-bezier(.2,1.16,.32,1), background .5s ease;
}
.zain__glass::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 -16px 26px -16px rgba(255,252,246,.32),
             inset 0 12px 20px -14px rgba(255,252,246,.14);
}
#zain.is-open .zain__glass{
  border-radius:138px/118px;
  background:linear-gradient(180deg, rgba(54,25,23,.40) 0%, rgba(28,11,10,.52) 100%);
}
#zain.is-open .zain__glass::after{
  box-shadow:inset 0 -40px 60px -46px rgba(255,252,246,.30),
             inset 0 30px 46px -40px rgba(255,252,246,.14);
}
.zain__glass.is-squash{animation:zainSquash .72s cubic-bezier(.3,1.08,.35,1)}
@keyframes zainSquash{
  0%{transform:scale(1.07,.88)} 44%{transform:scale(.985,1.035)} 100%{transform:scale(1,1)}
}

.zain__panel{
  position:absolute;inset:0;display:flex;flex-direction:column;padding:56px 36px 48px;
  opacity:0;pointer-events:none;transition:opacity .32s ease;
}
#zain.is-open .zain__panel{opacity:1;pointer-events:auto;transition-delay:.4s}

.zain__grab{display:none;width:40px;height:4px;border-radius:4px;margin:0 auto 14px;
  background:rgba(255,252,246,.32)}
.zain__head{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 6px 15px;
  border-bottom:1px solid rgba(255,252,246,.11)}
.zain__lg{width:23px;height:23px}
.zain__head b{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:18px;letter-spacing:.06em}

.zain__log{flex:1;overflow-y:auto;padding:18px 2px;display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin;scrollbar-color:rgba(255,252,246,.2) transparent}
.zain__log::-webkit-scrollbar{width:3px}
.zain__log::-webkit-scrollbar-thumb{background:rgba(255,252,246,.2);border-radius:3px}

.zain__msg{max-width:85%;padding:11px 15px;font-size:13.5px;line-height:1.8;
  border:1px solid transparent;animation:zainRise .36s ease both}
@keyframes zainRise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.zain__msg.is-bot{align-self:flex-start;background:rgba(227,210,174,.16);
  border-color:rgba(227,210,174,.22);border-radius:20px 20px 20px 6px}
.zain__msg.is-me{align-self:flex-end;background:rgba(42,18,16,.4);
  border-color:rgba(255,252,246,.13);border-radius:20px 20px 6px 20px}
.zain__msg[dir="rtl"].is-bot{border-radius:20px 20px 6px 20px}
.zain__msg[dir="rtl"].is-me{border-radius:20px 20px 20px 6px}

.zain__chips{display:flex;flex-wrap:wrap;gap:7px}
.zain__chip{border:1px solid rgba(176,141,79,.45);color:#E3D2AE;font-size:11.5px;
  padding:6px 14px;border-radius:999px;background:none;font-family:inherit;
  transition:background .25s ease}
.zain__chip:hover{background:rgba(176,141,79,.15)}

.zain__form{border:1px solid rgba(255,252,246,.12);border-radius:22px;padding:14px;
  display:flex;flex-direction:column;gap:8px;align-self:stretch}
.zain__form input{width:100%;background:none;border:1px solid rgba(255,252,246,.16);
  border-radius:999px;padding:9px 15px;color:#FFFCF6;font-family:inherit;font-size:12.5px}
.zain__form input::placeholder{color:rgba(255,252,246,.4)}
.zain__form input:focus{outline:none;border-color:rgba(176,141,79,.65)}
.zain__form button{background:rgba(92,27,27,.6);border:1px solid rgba(176,141,79,.45);
  color:#FFFCF6;border-radius:999px;padding:10px;font-family:inherit;font-size:12.5px}
.zain__err{font-size:11.5px;color:#E9A8A8;padding-left:8px}

.zain__foot{padding:13px 6px 0;border-top:1px solid rgba(255,252,246,.11)}
.zain__mark{padding:0 5px 9px}
.zain__mark .zain__lg{width:20px;height:20px;opacity:.45;transition:opacity .3s ease}
#zain.is-thinking .zain__mark .zain__lg{opacity:1}
#zain.is-thinking .zain__mark .zain__lg path{animation:zainTrace 2.6s cubic-bezier(.5,0,.5,1) infinite}
#zain.is-thinking .zain__mark .zain__lg path:nth-child(2){animation-delay:.12s}
#zain.is-thinking .zain__mark .zain__lg path:nth-child(3){animation-delay:.3s}
#zain.is-thinking .zain__mark .zain__lg path:nth-child(4){animation-delay:.36s}
@keyframes zainTrace{
  0%{stroke-dashoffset:var(--len)}
  42%{stroke-dashoffset:0}
  58%{stroke-dashoffset:0}
  100%{stroke-dashoffset:calc(var(--len) * -1)}
}

.zain__row{display:flex;align-items:center;gap:9px}
.zain__row input{flex:1;background:none;border:1px solid rgba(255,252,246,.18);
  border-radius:999px;padding:11px 16px;color:#FFFCF6;font-family:inherit;font-size:12.5px}
.zain__row input::placeholder{color:rgba(255,252,246,.38)}
.zain__row input:focus{outline:none;border-color:rgba(176,141,79,.65)}
.zain__send{width:35px;height:35px;flex:none;border-radius:50%;background:none;
  border:1px solid rgba(176,141,79,.55);display:grid;place-items:center;
  color:#E3D2AE;transition:background .25s ease}
.zain__send:hover{background:rgba(176,141,79,.18)}
.zain__send svg{width:15px;height:15px}

#zainOrb{
  position:fixed;left:0;top:0;z-index:95;width:13px;height:13px;border-radius:50%;
  background:#FFFCF6;pointer-events:none;transform:translate(-50%,-50%);
  box-shadow:0 0 11px 3px rgba(176,141,79,.9), 0 0 30px 11px rgba(176,141,79,.4);
}

@media (max-width:640px){
  #zain{width:130px;height:56px}
  #zain.is-open{width:calc(100vw - 18px);height:min(82vh,calc(100vh - var(--nav-h, 56px) - 52px))}
  #zain.is-open .zain__glass{border-radius:130px/104px}
  .zain__panel{padding:46px 26px 40px}
  .zain__grab{display:block}
  #zainOrb{display:none}
  #zainVeil{
    background:radial-gradient(80% 46% at 50% 42%,
      rgba(16,6,6,.76) 0%, rgba(16,6,6,.4) 55%, transparent 100%);
    -webkit-mask-image:radial-gradient(80% 46% at 50% 42%,
      #000 0%, rgba(0,0,0,.6) 60%, transparent 100%);
    mask-image:radial-gradient(80% 46% at 50% 42%,
      #000 0%, rgba(0,0,0,.6) 60%, transparent 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  #zain,#zainOrb,.zain__glass,.zain__panel,.zain__msg{animation:none!important;transition-duration:.12s!important}
}

/* the site cursor keeps its ring; only its dot yields to the orb */
#cursor.is-hollow .cursor__dot{opacity:0}