/* Whispren AI — v3 (link-style nav + input lock) */
:root{
  --bg:#0b1a13;
  --bg-accent:#0f1e17;
  --panel:#14261e;
  --panel-2:#173024;
  --ink:#e8efe9;
  --muted:#a6b7ac;
  --accent:#d9c9a6; /* warm parchment-gold */
  --accent-2:#92b39b; /* mossy highlight */
  --shadow: rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: radial-gradient(1200px 800px at 50% -10%, #123426 0%, var(--bg) 60%) fixed;
  background-color: var(--bg);
  overflow-x: hidden;
}

/* Subtle organic grain */
.bg-overlay::before{
  content:"";
  position: fixed; inset:0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.04"/></svg>');
  pointer-events:none;
}

/* Tiny animated fireflies */
.fireflies { position: fixed; inset:0; pointer-events:none; }
.fireflies span{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background: radial-gradient(circle, #e9fbd2 0%, #b9ffbf 30%, transparent 70%);
  box-shadow: 0 0 12px #d6ffb9, 0 0 28px rgba(193,255,171,.5);
  top: 50%; left: 50%;
  animation: drift 14s linear infinite;
  opacity:.5;
}
.fireflies span:nth-child(odd){ animation-duration:18s; }
.fireflies span:nth-child(3){ transform: translate(-40vw,-20vh); animation-delay: -2s; }
.fireflies span:nth-child(4){ transform: translate(20vw,-10vh);  animation-delay: -5s; }
.fireflies span:nth-child(5){ transform: translate(-10vw,25vh);  animation-delay: -9s; }
.fireflies span:nth-child(6){ transform: translate(30vw,10vh);   animation-delay: -4s; }
.fireflies span:nth-child(7){ transform: translate(-25vw,0);     animation-delay: -12s; }
.fireflies span:nth-child(8){ transform: translate(0,20vh);      animation-delay: -7s; }
.fireflies span:nth-child(9){ transform: translate(10vw,-25vh);  animation-delay: -10s; }
.fireflies span:nth-child(10){transform: translate(-30vw,15vh);  animation-delay: -14s; }
@keyframes drift {
  0%{ transform: translate(-50vw, -40vh) scale(1); }
  50%{ transform: translate(40vw, 35vh) scale(0.85); }
  100%{ transform: translate(-50vw, -40vh) scale(1); }
}

.site-header{
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  padding: 28px 16px 8px;
}
.logo-wrap { display:inline-flex; align-items:center; justify-content:center; }
.logo{
  width: 84px; height: 84px; object-fit: contain;
  border: none; border-radius: 0; box-shadow: none;
  animation: floaty 6s ease-in-out infinite;
  background: transparent;
}
@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

/* Link-style navigation */
.main-nav{
  margin-top: 12px;
  display:flex; gap: 18px; align-items:center; justify-content:center;
  font-weight: 600; letter-spacing: 0.2px;
}
.nav-link{
  position:relative; text-decoration:none; color: var(--ink); opacity:.9;
  padding: 4px 2px; line-height: 1.2;
}
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform .2s ease;
}
.nav-link:hover::after{ transform: scaleX(1); }
.nav-link.active{
  color: #eaf7ee;
}
.nav-link.active::after{
  transform: scaleX(1);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  height: 3px; bottom: -4px;
}

/* Layout */
.container{ max-width: 920px; margin: 0 auto; padding: 10px 16px 40px; }
.chat-card{
  background: linear-gradient(180deg, rgba(20,38,30,.85), rgba(17,31,25,.9));
  border:1px solid #1a3529; border-radius: 18px; backdrop-filter: blur(6px);
  box-shadow: 0 20px 60px var(--shadow); padding: 14px; 
}
.chatlog{
  height: min(58vh, 520px);
  overflow:auto; padding: 10px; display:flex; flex-direction:column; gap: 12px;
  scroll-behavior: smooth;
}

.msg{ display:grid; grid-template-columns: 36px 1fr; gap:10px; align-items:flex-start; }
.msg .avatar{
  width:36px; height:36px; display:grid; place-items:center; border-radius: 12px;
  background: radial-gradient(120% 120% at 50% 0, #2a4638 0%, #1a3025 100%);
  border:1px solid #274a39; overflow:hidden;
}
.msg .avatar img{ width:100%; height:100%; object-fit: cover; display:block; }
.msg .bubble{
  background: linear-gradient(180deg, #183528, #172d24);
  border: 1px solid #244738;
  border-radius: 14px; padding: 12px 14px; line-height: 1.5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  font-size: 15px;
}
.msg.user .avatar{ background: radial-gradient(140% 140% at 50% 0, #30463a 0%, #223b2e 100%); }
.msg.user .bubble{ background: linear-gradient(180deg, #1b382b, #183126); border-color:#2a5642; }
.msg.ai .bubble p{ font-family: "EB Garamond", serif; font-size: 17px; }

/* Thinking row (transient) */
.thinking-row .bubble{ display:flex; align-items:center; gap:6px; }
.dots{ display:flex; align-items:center; gap:6px; }
.dots span{
  width:8px; height:8px; border-radius:50%; background: var(--accent-2); opacity:.7;
  animation: dot 1.4s infinite ease-in-out;
}
.dots span:nth-child(2){ animation-delay: .15s; }
.dots span:nth-child(3){ animation-delay: .3s; }
@keyframes dot{ 0%,80%,100%{ transform: translateY(0); opacity:.4; } 40%{ transform: translateY(-4px); opacity:1; } }

/* Form */
.chatform{
  display:flex; gap: 10px; align-items:flex-end; padding: 10px; border-top:1px solid #1f3a2e; margin-top: 6px;
}
.chatform textarea{
  resize: vertical; min-height: 52px; max-height: 200px;
  width:100%; padding: 12px 14px; font: inherit; color: var(--ink);
  background: linear-gradient(180deg, #11251c, #0f221a);
  border:1px solid #1e3a2e; border-radius: 12px; outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.chatform textarea::placeholder{ color: #7fa28d; }

.form-actions{ display:flex; gap:10px; width: 160px; }
.send-btn{
  appearance:none; border:1px solid #2a4e3e; background: linear-gradient(180deg, #1a3529, #153026);
  color: var(--ink); padding: 12px 14px; border-radius: 12px; cursor: pointer; font-weight: 600;
  box-shadow: 0 8px 20px var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  width: 100%;
}
.send-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px var(--shadow); border-color:#3a6b55; }
.send-btn:active{ transform: translateY(0); }
.send-btn:disabled{ opacity:.6; cursor: not-allowed; }

/* Disabled UI while thinking */
.chatform.disabled { opacity:.7; }
.chatform.disabled textarea{ cursor: not-allowed; }
.chatform.disabled .send-btn{ cursor: not-allowed; }

.site-footer{ max-width: 920px; margin: 18px auto 40px; color: var(--muted); text-align:center; padding: 0 16px; }

.visually-hidden{
  position:absolute !important; clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%); height:1px; width:1px; overflow:hidden; white-space:nowrap;
}

@media (max-width: 640px){
  .chatlog{ height: 56vh; }
  .logo{ width:72px; height:72px; }
  .form-actions{ width: 120px; }
}