/* public/styles/aiPharmacist.css
   Final upgraded stylesheet matching avatar behaviour, larger logo, "Touch me" CTA,
   breathing/tilt/blink animations, prompt bubble, and refined dark theme.
*/

:root{
  --bg:#030308;
  --card-bg:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.006));
  --glass: rgba(255,255,255,0.03);
  --muted:#9fb2c3;
  --text:#eaf6ff;
  --accent-1:#6a11cb; /* primary gradient start */
  --accent-2:#b05df3; /* primary gradient end */
  --accent-alt:#00d1b2;
  --success:#22c55e;
  --danger:#ff4d4f; /* disclaimer red */
  --card-radius:16px;
  --max-width:1200px;
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.6);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --accent-1-rgb: 106,17,203;
  --accent-2-rgb: 176,93,243;
}

/* base */
*{box-sizing:border-box}
html,body{height:100%; margin:0; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(var(--max-width),94%);margin:0 auto}

/* Header & branding */
.site-header{padding:20px 0}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand-link{display:flex;align-items:center;gap:12px}
.brand-logo img{
  height:64px;                /* increased to match requested bigger logo */
  width:auto;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.03);
  background:rgba(255,255,255,0.02);
  padding:6px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.brand-text .title{font-weight:700;font-size:1.25rem}
.brand-text .subtitle{display:block;font-size:12px;color:var(--muted);margin-top:4px}

/* Navigation */
.site-nav .nav-list{display:flex;align-items:center;gap:10px;list-style:none;margin:0;padding:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;font-weight:700;border:none;cursor:pointer;transition:transform .12s ease, box-shadow .16s ease, opacity .12s ease}
.btn:active{transform:translateY(1px)}
.btn:focus{outline:3px solid rgba(106,11,180,0.16); outline-offset:3px; border-radius:10px}
.btn i{opacity:0.95}
.btn-primary{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:white;box-shadow:0 10px 30px rgba(106,17,203,0.12)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:10px 14px}
.btn-outline{background:transparent;border:1px dashed rgba(255,255,255,0.04);color:var(--text)}
.btn-small{padding:6px 10px; font-size:0.85rem}
.btn-sm{padding:8px 10px}
.btn-link{background:transparent;border:none;color:var(--muted);text-decoration:underline}

/* AI Host card */
.ai-host.card{margin-top:18px;padding:20px;border-radius:var(--card-radius);background:var(--card-bg);border:1px solid var(--glass);box-shadow:var(--shadow-lg);overflow:hidden}
.card-grid{display:grid;grid-template-columns:520px 1fr;gap:28px;align-items:start}

/* Avatar area */
.avatar-area{display:flex;flex-direction:column;align-items:center;gap:16px}
.avatar-wrap{
  width:520px;height:520px;border-radius:14px;overflow:hidden;position:relative;
  background:linear-gradient(135deg, rgba(106,17,203,0.04), rgba(176,93,243,0.02));
  border:1px solid rgba(255,255,255,0.02);display:flex;align-items:center;justify-content:center;
  transition:transform .18s ease, box-shadow .28s ease;
  transform-style:preserve-3d;
  transform-origin:50% 60%;
  will-change: transform;
  cursor:pointer;
}

/* Avatar image */
#pw3-avatar-img{
  width:100%;height:100%;object-fit:cover;border-radius:12px;
  transition: transform .28s ease, filter .28s ease;
  transform-origin:50% 60%;
  backface-visibility:hidden;
}

/* small visual overlay "eyelid" for blink */
.avatar-eyelid{
  position:absolute; left:0; right:0; top:0; height:100%;
  border-radius:12px; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.12) 100%);
  transform-origin:50% 0%;
  transform: scaleY(0);
  transition: transform 120ms ease;
  z-index:5;
}
.avatar-wrap.blink .avatar-eyelid{ transform: scaleY(1); transition: transform 120ms ease; }

/* breathing (subtle scale) applied when .breathe present */
@keyframes pw3-breathe { 0%{ transform:scale(1) translateY(0)} 50%{ transform:scale(1.02) translateY(-3px)} 100%{ transform:scale(1) translateY(0)} }
.avatar-wrap.breathe #pw3-avatar-img { animation: pw3-breathe 6s ease-in-out infinite; }

/* gentle 3D tilt forward/back loop - not jittery */
@keyframes pw3-tilt {
  0%   { transform: rotateX(0deg) rotateY(-3deg) translateY(0); }
  25%  { transform: rotateX(3deg) rotateY(0deg) translateY(-2px); }
  50%  { transform: rotateX(0deg) rotateY(3deg) translateY(0); }
  75%  { transform: rotateX(-3deg) rotateY(0deg) translateY(2px); }
  100% { transform: rotateX(0deg) rotateY(-3deg) translateY(0); }
}
.avatar-wrap.tilt { animation: pw3-tilt 8s ease-in-out infinite; }

/* lean-in when assistant speaks */
.avatar-wrap.lean-in { transform: translateZ(0) scale(1.04) rotateX(6deg); box-shadow: 0 26px 60px rgba(0,0,0,0.28); }

/* listening state */
.avatar-wrap.listening { transform: translateY(-4px) scale(1.02); }

/* nudge text (under avatar) - made more prominent and centered */
.nudge{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translate(-50%,8px);
  background: rgba(255,255,255,0.96);
  color:#0b1220;
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:0.92rem;
  box-shadow:0 10px 26px rgba(0,0,0,0.12);
  white-space:nowrap;
  transition: transform 200ms cubic-bezier(.2,.9,.3,1), opacity 200ms ease;
  opacity:0; z-index:6;
  pointer-events:none;
}
.avatar-wrap:hover .nudge,
.avatar-wrap:focus .nudge,
.avatar-wrap.active .nudge,
.avatar-wrap.clicked .nudge {
  transform:translate(-50%,0);
  opacity:1;
}

/* prompt bubble on hover (right side of avatar) */
.prompt-bubble {
  position:absolute;
  left: calc(100% + 10px);
  top: 10%;
  transform: translate(6px, 0);
  background:#fff;
  color:#0b1220;
  padding:8px 12px;
  border-radius:10px;
  box-shadow:0 18px 40px rgba(0,0,0,0.12);
  font-size:0.9rem;
  white-space:nowrap;
  display:none;
  z-index:1200;
}
.avatar-wrap:hover .prompt-bubble,
.avatar-wrap:focus .prompt-bubble { display:block; }

/* floating decorative icons */
.float-elem{position:absolute;color:#fff; font-size:18px; display:flex;align-items:center;justify-content:center; width:36px;height:36px;border-radius:8px; background:linear-gradient(135deg,var(--accent-1),var(--accent-2)); box-shadow:0 8px 20px rgba(0,0,0,0.18); pointer-events:none; transform-origin:center; transition: transform 320ms ease, opacity 220ms ease;}
.float-elem.f1{ left:6%; top:6%; transform: translateZ(0); }
.float-elem.f2{ right:6%; top:10%; transform: translateZ(0); }
.float-elem.f3{ right: 6%; bottom: 10%; transform: translateZ(0); }

/* Controls */
.controls-row{display:flex;gap:12px;align-items:center;width:100%}
#pw3-start-btn { min-width:140px; padding:12px 16px; font-weight:800; border-radius:10px; } /* emphasize CTA "Touch me" */

/* listen indicator */
.listen-indicator{width:14px;height:14px;border-radius:50%;background:var(--danger);opacity:0.12;transition:all .12s ease}
.listen-indicator.on{opacity:1;box-shadow:0 0 12px var(--danger)}

/* typed input */
#pw3-typed-container,
#pw3-typed-fallback{width:100%;display:flex;gap:8px;align-items:center}
#pw3-typed-input{
  flex:1 1 auto;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
  background:transparent;
  color:var(--text);
  font-size:1rem;
  min-height:44px;
  transition:box-shadow .12s ease, border-color .12s ease;
}
#pw3-typed-input::placeholder{color:rgba(234,246,255,0.44)}
#pw3-typed-input:focus{box-shadow:0 8px 24px rgba(106,17,203,0.08); outline: none; border-color: rgba(106,17,203,0.28)}
#pw3-typed-pause{white-space:nowrap}

/* Right area */
.right-area{display:flex;flex-direction:column;gap:14px}
.hero-header .ai-title{font-size:1.5rem;font-weight:800}
.ai-sub{color:var(--muted);font-size:0.95rem}
.caption-box{
  background:rgba(255,255,255,0.02);
  padding:18px;border-radius:12px;border:1px solid var(--glass);
  min-height:120px;font-size:1.05rem;color:var(--text);
  line-height:1.45;
  position:relative;
  overflow-wrap:break-word;
}

/* typing caret + token styles */
.caption-box.typing::after{
  content: '';
  display:inline-block;
  width:2px;
  height:1.06em;
  background:var(--text);
  margin-left:6px;
  vertical-align:middle;
  border-radius:2px;
  animation: pw3-blink 1s steps(2,end) infinite;
  opacity:0.95;
}
@keyframes pw3-blink { 0% { opacity:1 } 50% { opacity:0 } 100% { opacity:1 } }

.caption-box .reply-line { display:block; opacity:0; transform:translateY(6px); animation:pw3-replyIn 260ms ease forwards; }
@keyframes pw3-replyIn { to { opacity:1; transform:none } }

/* action row and wallet */
.action-row{display:flex;gap:12px;flex-wrap:wrap}
.wallet-donate{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.008));padding:12px;border-radius:10px;border:1px solid var(--glass)}
.donate-info{color:var(--muted)}
.donate-actions{display:flex;gap:10px;align-items:center}
.consent-row{color:var(--muted);font-size:0.95rem}
.checkbox-label input{margin-right:8px}

/* DISCLAIMER styled red (not neon) */
.disclaimer{color:var(--danger);font-size:0.95rem}
.small{font-size:0.9rem}

/* Features & partners */
.features-section{margin-top:34px;padding-bottom:10px}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:12px}
.feature-card{background:linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.006));padding:20px;border-radius:12px;border:1px solid var(--glass);min-height:140px}
.feature-icon{font-size:22px;color:var(--accent-1);margin-bottom:8px}
.feature-card h3{margin:0 0 8px 0}
.feature-card p{color:var(--muted);margin:0}

/* Partners */
.partners-section{margin-top:40px;padding:28px 0}
.partner-card{
  background:#fff;padding:18px;border-radius:12px;min-width:220px;
  box-shadow:0 6px 22px rgba(0,0,0,0.25);text-align:center;color:#0b1220;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.partner-card img{ max-width:320px; width:100%; height:auto; object-fit:contain; border-radius:8px; box-shadow:0 8px 30px rgba(0,0,0,0.12); }
.partner-desc{font-size:0.95rem;margin-top:8px}

/* Book call */
.bookcall-section{margin-top:32px;padding:28px;border-radius:12px;background:linear-gradient(135deg,#2a1b6f 0%, #3f21a8 100%);color:white}
.bookcall-section .book-btn{display:inline-flex;align-items:center;gap:8px}
.book-note{margin-top:8px;color:rgba(255,255,255,0.85)}

/* Footer */
.site-footer{margin-top:36px;padding:22px 0;border-top:1px solid rgba(255,255,255,0.02)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.footer-copy{color:var(--muted)}
.social-links a{color:var(--muted);margin-left:8px}

/* Responsive */
@media (max-width:1100px){
  .card-grid{grid-template-columns:1fr;}
  .avatar-wrap{width:380px;height:380px;margin:0 auto}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  #pw3-typed-container{flex-direction:column;align-items:stretch}
  #pw3-typed-input{width:100%}
  #pw3-typed-send, #pw3-typed-pause{width:100%}
}
@media (max-width:720px){
  .container{width:94%}
  .avatar-wrap{width:320px;height:320px}
  .brand-text .title{font-size:1.05rem}
  .features-grid{grid-template-columns:1fr}
  .partner-card{min-width:160px}
  .controls-row{flex-direction:column;gap:8px}
  #pw3-typed-container{flex-direction:row;gap:8px}
  #pw3-typed-input{min-height:40px}
  .caption-box{padding:12px}
}

/* subtle entrance */
.ai-host.card{transform:translateY(8px);opacity:0;animation:cardIn .56s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes cardIn{to{transform:none;opacity:1}}

/* AVATAR TALKING / GLOW EFFECTS */
/* glow outline on avatar wrapper */
.avatar-wrap.avatar-glow{
  box-shadow: 0 8px 40px rgba(var(--accent-1-rgb),0.18), 0 20px 80px rgba(var(--accent-2-rgb),0.10), inset 0 -6px 24px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}

/* speaking: subtle movement on the image */
@keyframes pw3-speakMove {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  20% { transform: translateY(-2px) rotate(-0.3deg) scale(1.002); }
  40% { transform: translateY(1px) rotate(0.2deg) scale(1.001); }
  60% { transform: translateY(-1px) rotate(-0.2deg) scale(1.002); }
  80% { transform: translateY(0.5px) rotate(0.15deg) scale(1.001); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}
.avatar-wrap.avatar-speaking-effect #pw3-avatar-img{
  animation: pw3-speakMove 880ms ease-in-out infinite;
  transform-origin:50% 55%;
  filter: drop-shadow(0 18px 42px rgba(var(--accent-1-rgb),0.06));
}

/* radial rim glow */
.avatar-wrap.avatar-glow::after{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130%;
  height: 130%;
  transform: translate(-50%, -50%);
  border-radius: 18px;
  background: radial-gradient(closest-side, rgba(var(--accent-1-rgb),0.07) 0%, rgba(0,0,0,0) 60%);
  pointer-events: none;
  mix-blend-mode: screen;
  animation: pw3-glowPulse 1.6s ease-in-out infinite;
}

/* glow pulse */
@keyframes pw3-glowPulse {
  0% { opacity: 0.85; transform: translate(-50%, -50%) scale(0.98); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0.85; transform: translate(-50%, -50%) scale(0.98); }
}

/* brief micro-shake (low amplitude) */
@keyframes pw3-shake { 0% { transform: translateX(0) } 25% { transform: translateX(-1px) } 50% { transform: translateX(1px) } 75% { transform: translateX(-0.5px) } 100% { transform: translateX(0) } }
.avatar-wrap.avatar-speaking-effect.shake { animation: pw3-shake 180ms linear both; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .avatar-wrap.avatar-speaking-effect #pw3-avatar-img,
  .avatar-wrap.avatar-glow::after,
  .avatar-wrap.tilt,
  .avatar-wrap.breathe,
  .avatar-wrap.avatar-speaking-effect.shake {
    animation: none !important; transition: none !important;
  }
  .avatar-wrap.avatar-glow { box-shadow: none; transform: none; }
}



/* small utilities */
.muted{color:var(--muted)}
.center{text-align:center}
.hidden{display:none}