/* =========================================================
   Sacred palette for Ask Agape and Verse of the Day:
   lapis, gold leaf, parchment, vermilion
   ========================================================= */

/* ---------- ASK AGAPE: night lapis, lit with gold ---------- */
.ai.ai--v4{background:#0c1733}
.ai--v4::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1.2px 1.2px at 12% 18%,#FFE7B0 50%,transparent 51%),radial-gradient(1px 1px at 78% 12%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 64% 72%,#FFE7B0 50%,transparent 51%),radial-gradient(1px 1px at 30% 82%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 90% 54%,#FFE7B0 50%,transparent 51%),radial-gradient(1px 1px at 46% 30%,#fff 50%,transparent 51%);
  background-size:520px 520px}
.ai--v4 .ai__halo i{opacity:.42}
.ai--v4 .ai__halo i:nth-child(1){background:radial-gradient(circle at 35% 30%,#E9B44C,transparent 60%)}
.ai--v4 .ai__halo i:nth-child(2){background:radial-gradient(circle at 70% 45%,#2F5BB5,transparent 58%)}
.ai--v4 .ai__halo i:nth-child(3){background:radial-gradient(circle at 50% 78%,#C8462B,transparent 55%);opacity:.25}
.ai .h2 em,.ai--v4 .h2 em{background:none!important;-webkit-text-fill-color:#E9B44C;color:#E9B44C}
.ai--v4 .eyebrow__dot--violet{background:#E9B44C;box-shadow:0 0 10px rgba(233,180,76,.7)}
.ai--v4 .ai-orb{background:conic-gradient(from 0deg,#E9B44C,#FFF0C8,#C8462B,#2F5BB5,#E9B44C)}
.ai--v4 .amsg--bot{background:rgba(244,238,228,.07);border:1px solid rgba(233,180,76,.22);color:#F4EEE4}
.ai--v4 .amsg--bot b{color:#F7D58C}
.ai--v4 .amsg--me{background:#E9B44C;color:#0B0710}
.ai--v4 .amsg .ref{background:rgba(233,180,76,.14);color:#F7D58C;border:1px solid rgba(233,180,76,.3)}
.ai--v4 .ai__sugg button{background:rgba(244,238,228,.04);border-color:rgba(244,238,228,.2);color:#F4EEE4}
.ai--v4 .ai__sugg button:hover{background:#E9B44C;border-color:#E9B44C;color:#0B0710}
.ai--v4 .ticks .ic{color:#E9B44C}

/* the week's progress bar shows only while that section is pinned */
.week__bar{opacity:0;transition:opacity .3s}
.week__bar.is-on{opacity:1}
.ai--v4 .ticks .ic{background:#E9B44C!important;color:#0B0710!important}

/* ---------- ASK AGAPE: a 3D device ---------- */
.ai3{position:relative;height:clamp(560px,64vh,660px);perspective:1500px;display:grid;place-items:center}
.ai3__floor{position:absolute;left:-30%;right:-30%;bottom:-6%;height:70%;transform:rotateX(76deg);transform-origin:50% 100%;pointer-events:none;
  background:linear-gradient(rgba(233,180,76,.35) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(233,180,76,.35) 1px,transparent 1px) 0 0/44px 44px;
  -webkit-mask:radial-gradient(60% 70% at 50% 40%,#000 20%,transparent 75%);mask:radial-gradient(60% 70% at 50% 40%,#000 20%,transparent 75%);animation:ai3Grid 6s linear infinite}
@keyframes ai3Grid{to{background-position:0 44px,0 0}}
.ai3__rig{position:relative;width:min(470px,90%);height:min(540px,88%);transform-style:preserve-3d;transform:rotateX(var(--rx,7deg)) rotateY(var(--ry,14deg));transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.ai3__device{position:absolute;inset:0;transform-style:preserve-3d;animation:ai3Float 8s ease-in-out infinite}
@keyframes ai3Float{50%{transform:translate3d(0,-14px,8px)}}
.ai3__side{position:absolute;display:block;pointer-events:none}
.ai3__side--back{inset:0;border-radius:30px;transform:translateZ(-13px);background:#060c1f;box-shadow:0 70px 120px -30px rgba(0,0,0,.85),0 0 90px -20px rgba(233,180,76,.35)}
.ai3__side--r{top:30px;bottom:30px;left:-13px;width:26px;transform:rotateY(90deg);background:linear-gradient(180deg,#8a6a2a,#E9B44C 40%,#7a5a20)}
.ai3__side--b{left:30px;right:30px;top:calc(100% - 13px);height:26px;transform:rotateX(90deg);background:linear-gradient(90deg,#5c4418,#C9A24A,#5c4418)}
.ai3__screen{position:absolute;inset:0;transform:translateZ(13px);border-radius:30px;overflow:hidden;display:flex;flex-direction:column;padding:20px 20px 18px;color:#F4EEE4;
  background:radial-gradient(120% 70% at 20% 0%,rgba(233,180,76,.16),transparent 55%),linear-gradient(165deg,#1b3268,#0b1636 60%,#081029);
  border:1px solid rgba(233,180,76,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 40px rgba(233,180,76,.08)}
.ai3__screen::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,transparent 28%)}
.ai3__scan{position:absolute;left:0;right:0;height:140px;top:-30%;pointer-events:none;background:linear-gradient(transparent,rgba(233,180,76,.10) 60%,rgba(255,231,176,.28) 98%,transparent);animation:ai3Scan 5.5s cubic-bezier(.5,0,.5,1) infinite}
@keyframes ai3Scan{0%{top:-30%}70%,100%{top:110%}}
.ai3__head{position:relative;z-index:1;display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(233,180,76,.2)}
.ai3__head b{display:block;font-size:16px;font-weight:600}
.ai3__head small{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(244,238,228,.6)}
.ai3__online{width:7px;height:7px;border-radius:50%;background:#2ED3A0;box-shadow:0 0 8px #2ED3A0}
.ai3__wave{margin-left:auto;display:flex;align-items:center;gap:3px;height:24px}
.ai3__wave i{width:3px;height:100%;border-radius:2px;background:#E9B44C;transform-origin:50% 50%;animation:ai3Wave 1.1s ease-in-out infinite}
.ai3__wave i:nth-child(2){animation-delay:-.9s}.ai3__wave i:nth-child(3){animation-delay:-.6s}.ai3__wave i:nth-child(4){animation-delay:-.3s}.ai3__wave i:nth-child(5){animation-delay:-.75s}.ai3__wave i:nth-child(6){animation-delay:-.45s}.ai3__wave i:nth-child(7){animation-delay:-.15s}
@keyframes ai3Wave{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
.ai3 .ai__msgs{position:relative;z-index:1;flex:1;min-height:0!important;height:auto;overflow-y:auto;padding:14px 0 6px;scrollbar-width:none}
.ai3 .amsg{font-size:14px;line-height:1.5;border-radius:20px;max-width:88%}
.ai3 .ai__sugg{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px;padding:8px 0 10px;border:0}
.ai3 .ai__sugg button{font-size:12px;padding:7px 11px;border-radius:999px;background:rgba(244,238,228,.05);border:1px solid rgba(244,238,228,.18);color:#F4EEE4}
.ai3 .ai__sugg button:hover{background:#E9B44C;color:#0B0710;border-color:#E9B44C}
.ai3__input{position:relative;z-index:1;display:flex;align-items:center;gap:8px;height:48px;padding:0 6px 0 16px;border-radius:999px;background:rgba(244,238,228,.05);border:1px solid rgba(244,238,228,.16);font-size:13.5px;color:rgba(244,238,228,.45)}
.ai3__input span{flex:1}
.ai3__input i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none}
.ai3__input .ic{width:16px;height:16px}
.ai3__mic{border:1px solid rgba(244,238,228,.2);color:#F4EEE4}
.ai3__send{background:#E9B44C;color:#0B0710}

/* the AI core: a lit nucleus with rings orbiting in 3D */
.ai3__core{position:absolute;right:-46px;top:-70px;width:150px;height:150px;transform-style:preserve-3d;transform:translateZ(110px);pointer-events:none;animation:ai3CoreFloat 6s ease-in-out infinite}
@keyframes ai3CoreFloat{50%{transform:translateZ(110px) translateY(-12px)}}
.ai3__ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(233,180,76,.8);box-shadow:0 0 14px rgba(233,180,76,.35)}
.ai3__ring:nth-child(1){animation:ai3R1 7s linear infinite}
.ai3__ring:nth-child(2){inset:10px;border-color:rgba(244,238,228,.6);animation:ai3R2 9s linear infinite}
.ai3__ring:nth-child(3){inset:22px;border-color:rgba(200,70,43,.7);animation:ai3R3 5s linear infinite}
@keyframes ai3R1{from{transform:rotateX(72deg) rotateZ(0)}to{transform:rotateX(72deg) rotateZ(360deg)}}
@keyframes ai3R2{from{transform:rotateY(70deg) rotateZ(0)}to{transform:rotateY(70deg) rotateZ(360deg)}}
@keyframes ai3R3{from{transform:rotateX(40deg) rotateY(-50deg) rotateZ(0)}to{transform:rotateX(40deg) rotateY(-50deg) rotateZ(-360deg)}}
.ai3__nucleus{position:absolute;inset:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#FFE3A0 30%,#E9B44C 60%,#C8462B);box-shadow:0 0 40px 8px rgba(233,180,76,.55),0 0 90px 20px rgba(233,180,76,.25);animation:ai3Pulse 2.4s ease-in-out infinite}
@keyframes ai3Pulse{50%{transform:scale(1.12);box-shadow:0 0 56px 14px rgba(233,180,76,.7),0 0 120px 30px rgba(233,180,76,.3)}}

/* floating context cards at different depths */
.ai3__card{position:absolute;display:flex;flex-direction:column;gap:3px;padding:12px 16px;border-radius:16px;color:#F4EEE4;background:rgba(12,22,52,.82);border:1px solid rgba(233,180,76,.45);box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 30px -10px rgba(233,180,76,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:none;white-space:nowrap}
.ai3__card small{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#E9B44C}
.ai3__card b{font-size:14px;font-weight:600}
.ai3__card span{font-size:11.5px;color:rgba(244,238,228,.6)}
.ai3__card--a{left:-84px;top:170px;--z:120px;animation:ai3Card 7s ease-in-out infinite}
.ai3__card--b{right:-80px;bottom:150px;--z:80px;animation:ai3Card 8s ease-in-out -2s infinite}
.ai3__card--c{left:-30px;bottom:-26px;--z:150px;flex-direction:row;align-items:center;gap:10px;animation:ai3Card 6s ease-in-out -4s infinite}
@keyframes ai3Card{0%,100%{transform:translateZ(var(--z)) translateY(0)}50%{transform:translateZ(var(--z)) translateY(-12px)}}
.ai3__lines{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.ai3__lines i{display:block;height:4px;border-radius:2px;background:rgba(244,238,228,.25);width:140px}
.ai3__lines i:nth-child(2){width:110px}.ai3__lines i:nth-child(3){width:80px;background:rgba(233,180,76,.6)}
.ai3__tick{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#2ED3A0;color:#0B0710;font-style:normal;font-size:13px;font-weight:700}
@media (max-width:980px){.ai3{order:2}}
@media (max-width:760px){
  .ai3{height:560px;perspective:1100px}
  .ai3__rig{width:88%;height:500px}
  .ai3__core{width:96px;height:96px;right:-18px;top:-46px}
  .ai3__nucleus{inset:30px}
  .ai3__card--a{left:-14px;top:200px}
  .ai3__card--b{right:-14px;bottom:120px}
  .ai3__card--c{display:none}
}
@media (prefers-reduced-motion:reduce){.ai3 *{animation:none!important}}