/* ===========================
   NEXLYNK — main.css (Bot-first with info→chat fade + bottom nav)
   v5 — includes iOS scroll fix + sticky CTA
   =========================== */

/* Base */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
html{color-scheme:dark}
body{
  background:#070b11; color:#eaf2ff;
  font:400 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
:root{
  --top-h: clamp(100px, 22vw, 240px);
  --bot-h: clamp(100px, 22vw, 260px);
  --border: rgba(255,255,255,.14);
  --blue:#5be7ff; --teal:#00ffc6; --lilac:#8a7bff;
}

/* Background */
.bg{
  position:fixed; inset:0; z-index:0;
  background: radial-gradient(ellipse at center, #0d1220 0%, #0b101a 40%, #070b11 100%);
}
.bg::before,.bg::after{content:"";position:absolute;inset:0;pointer-events:none}
.bg::before{
  background:
    radial-gradient(900px 600px at 70% -10%, rgba(91,231,255,.12), transparent 60%),
    radial-gradient(800px 600px at 10% 0%, rgba(138,123,255,.10), transparent 65%);
  mix-blend-mode:screen;
}
.bg::after{
  background: radial-gradient(120% 120% at 50% 60%, rgba(0,0,0,0) 55%, rgba(0,0,0,.6) 100%);
  opacity:.6;
}

/* Header/foot overlays */
.bg-overlay{
  position:fixed; left:0; right:0; z-index:2; pointer-events:none;
  background-repeat:no-repeat; background-position:center; background-size:contain;
}
.bg-overlay--top{
  top:0; height:var(--top-h);
  padding-top: env(safe-area-inset-top);
  background-image:url("../assets/bgheader.png");
  box-shadow:0 40px 60px -40px rgba(0,0,0,.6) inset;
}
.bg-overlay--bottom{
  bottom:0; height:var(--bot-h);
  padding-bottom: env(safe-area-inset-bottom);
  background-image:url("../assets/bgfooter.png");
  box-shadow:0 -50px 60px -40px rgba(0,0,0,.65) inset;
}
@media (max-width:520px){
  :root{ --top-h: clamp(120px, 28vw, 260px); --bot-h: clamp(120px, 28vw, 280px) }
}

/* Logo */
.brand-fixed{
  position:fixed; left:0; right:0; z-index:3;
  top: calc(var(--top-h) - 6px);
  transform: translateY(-100%);
  display:grid; place-items:center; text-decoration:none;
}
.brand-fixed img {
  height: clamp(62px, 13vw, 124px);
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.5));
  user-select: none;
  transform: translateX(-2px); /* nudge left */
}

/* Stage + Card */
.stage{
  position:relative; min-height:100svh; display:flex; justify-content:center;
  padding-top:var(--top-h); padding-bottom:var(--bot-h); z-index:5;
}
.card{
  width:93vw; max-width:1200px;
  height: calc(100svh - (var(--top-h) + var(--bot-h)));
  min-height:0; /* iOS fix */
  display:flex; flex-direction:column; position:relative; z-index:10; overflow:hidden;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--border);
  backdrop-filter: blur(16px) saturate(125%);
  box-shadow: 0 24px 60px rgba(0,0,0,.55),
              0 2px 0 rgba(255,255,255,.06) inset,
              0 -1px 0 rgba(255,255,255,.04) inset;
}
.card::after{
  content:""; position:absolute; left:8%; right:8%; bottom:-18px; height:28px;
  background: radial-gradient(50% 100% at 50% 50%, rgba(0,0,0,.45), rgba(0,0,0,0) 70%);
  filter: blur(6px); z-index:-1;
}

/* Views */
.viewer{isolation:isolate}
.view{
  position:absolute; inset:0; display:flex; flex-direction:column; min-height:0;
  background:transparent; opacity:0; pointer-events:none;
  transform:translateX(30px); transition:.28s ease;
}
.view.view--active{opacity:1; pointer-events:auto; transform:none; z-index:2}
.view.view--exit-left{transform:translateX(-30px); opacity:0}
.view.view--exit-right{transform:translateX(30px); opacity:0}

/* Card content */
.card__header,.card__footer{padding:12px 14px; border-block:1px solid rgba(255,255,255,.08)}
.card__body{
  flex:1; min-height:0; padding:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  touch-action:pan-y;
}
.pad{padding:14px 14px 24px}
.h{margin:0; font-size:1.25rem}
.h2{margin:.3rem 0; font-size:1.05rem}
.lead{color:#a9b5c6}
.bullets{margin:.4rem 0 0 1.1rem; color:#cbd7ea}

/* Responsive copy */
.copy{display:block}
.copy--short{display:none}
@media (max-width:480px){
  body{font-size:15px}
  .h{font-size:1.1rem}
  .h2{font-size:1rem}
  .copy--long{display:none}
  .copy--short{display:block}
}
.micro{opacity:.8; font-size:.9rem; margin-top:.25rem}

/* Fade helper */
.fade{opacity:0; transition:opacity .45s ease}
.fade.show{opacity:1}

/* CTA button */
.btn{
  margin-top:1rem; padding:.75rem 1.25rem;
  font-size:1rem; font-weight:600; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.2);
  background: linear-gradient(135deg, var(--blue), var(--teal));
  color:#051016;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.45)}
.btn:active{transform:translateY(0)}
.btn-cta{position:sticky; bottom:14px; z-index:1}

/* Aurora view extra breathing room */
.view[data-route="aurora"] .pad{
  padding-bottom: calc(160px + env(safe-area-inset-bottom));
}

/* Chat UI */
.chat__header{display:flex; align-items:center; gap:.75rem}
.logo-img{
  width:40px; height:40px; object-fit:contain;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.45));
  animation: agFloat 6.5s ease-in-out infinite;
}
@keyframes agFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.title{display:flex; flex-direction:column; line-height:1.1}
.title .sub{color:#a9b5c6; font-size:.9rem}
.chat__body{display:flex; flex-direction:column; gap:.5rem; padding:12px; overflow:auto; scroll-behavior:smooth}

/* Footer nav */
.footer-buttons{
  position:fixed; left:0; right:0; z-index:6;
  bottom: var(--bot-h);
  transform: translateY(50%);
  display:flex; gap:1rem; justify-content:center; align-items:center;
  pointer-events:auto; padding:0 .6rem;
}
.footer-buttons__btn{
  position:relative; border:0; padding:.35rem .6rem; cursor:pointer;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px) saturate(130%);
  box-shadow:0 18px 30px rgba(0,0,0,.45),
             0 2px 0 rgba(255,255,255,.10) inset,
             0 -1px 0 rgba(255,255,255,.06) inset;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.footer-buttons__btn img{
  display:block; height: clamp(28px, 6.5vw, 56px); width:auto; user-select:none;
}
.footer-buttons__btn:hover{transform:translateY(-3px)}
.footer-buttons__btn.is-active{
  box-shadow:0 26px 42px rgba(0,255,198,.28),
             0 0 0 2px rgba(91,231,255,.25),
             0 2px 0 rgba(255,255,255,.14) inset,
             0 -1px 0 rgba(255,255,255,.08) inset;
}
.footer-buttons__btn.is-active::after{
  content:""; position:absolute; inset:-6px; border-radius:inherit; pointer-events:none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(91,231,255,.35), rgba(0,0,0,0));
  filter: blur(8px); opacity:.6; animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:.9}}

/* Contact form */
.form{display:grid; gap:.75rem; margin-top:.25rem}
.form__field{display:flex; flex-direction:column; gap:.35rem}
.form__input{border-radius:12px; border:1px solid rgba(255,255,255,.16); background:#0b1220; color:#eaf2ff; padding:.7rem .85rem}
.what-next{margin-top:1rem; color:#cbd7ea}

/* Accessibility */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* Dynamic viewport height */
@supports (height:100dvh){
  .card{height: calc(100dvh - (var(--top-h) + var(--bot-h)))}
}
/* === Chat layout: grid (no jump on fade), messages scroll, footer fixed === */

/* Make each view occupy the card without affecting outside layout */
.view{ position:absolute; inset:0; }

/* CHAT view: 3 rows — header / scroll / footer */
.aurora-chat{
  position:absolute; inset:0;
  display:grid;
  grid-template-rows: auto 1fr auto;  /* header, body (scroll), footer */
  min-height:0;                        /* allow 1fr to shrink in iOS */
}

/* INFO view gets the same structure so swapping views doesn't change height */
.aurora-info{
  position:absolute; inset:0;
  display:grid;
  grid-template-rows: auto 1fr auto;
  min-height:0;
}

/* Put the chat header/footer into the grid rows */
.aurora-chat > .card__header{ grid-row:1; }
.aurora-chat > .chat__body   { grid-row:2; }
.aurora-chat > .chat__footer { grid-row:3; }

/* Only the messages area scrolls */
.chat__body{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  min-height:0;
  padding:12px 14px;
}

/* Footer stays in normal flow (no absolute), with a light frost */
.chat__footer{
  position:static;
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg,
              rgba(7,11,17,.92) 0%,
              rgba(7,11,17,.82) 50%,
              rgba(7,11,17,.65) 100%);
  backdrop-filter: blur(10px) saturate(130%);
}

/* Ensure the card itself doesn't scroll/shift when swapping views */
.card{ overflow:hidden; }
/* === Aurora chat bar — premium glass look === */

/* Footer plate */
.chat__footer{
  background:
    linear-gradient(180deg, rgba(8,12,20,.92), rgba(8,12,20,.82) 55%, rgba(8,12,20,.65)),
    radial-gradient(120% 100% at 50% -20%, rgba(91,231,255,.10), rgba(0,0,0,0));
  backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 -10px 30px rgba(0,0,0,.45);
}

/* Chip row */
.chips{
  gap:.5rem; margin-bottom:.6rem;
}
.chip{
  padding:.45rem .8rem;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:0 6px 16px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.06) inset;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.chip:hover{ transform:translateY(-1px); box-shadow:0 10px 18px rgba(0,0,0,.32) }
.chip:active{ transform:translateY(0) }

/* Composer shell */
.composer{
  align-items:center;
  gap:.6rem;
  padding:.35rem;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 16px 32px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.10) inset,
    0 -1px 0 rgba(255,255,255,.06) inset;
}

/* Input */
.composer__input{
  border:0;
  background:rgba(7,11,17,.65);
  padding:.85rem 1rem;
  border-radius:12px;
  color:#eaf2ff;
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset;
  caret-color: var(--blue);
}
.composer__input::placeholder{ color:#a9b5c6 }
.composer__input:focus{
  outline:none;
  box-shadow:
    0 0 0 1px rgba(91,231,255,.45) inset,
    0 0 0 3px rgba(91,231,255,.18);
}

/* Send button */
.composer__send{
  display:grid; place-items:center;
  min-width:48px; height:48px;
  padding:0;
  border:0;
  border-radius:14px;
  font-weight:800;
  color:#071019;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 40%),
    linear-gradient(135deg, var(--blue), var(--teal));
  box-shadow:
    0 12px 24px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.18) inset;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.composer__send:hover{
  transform: translateY(-1px);
  box-shadow:
    0 16px 28px rgba(0,0,0,.4),
    0 0 0 1px rgba(255,255,255,.22) inset;
  filter: brightness(1.05);
}
.composer__send:active{ transform: translateY(0) }

/* Little glow when typing */
.composer:focus-within{
  box-shadow:
    0 20px 36px rgba(0,0,0,.40),
    0 0 0 1px rgba(91,231,255,.25) inset,
    0 0 24px rgba(91,231,255,.18);
  border-color: rgba(91,231,255,.28);
}

/* Fineprint alignment + breathing room */
.chat__footer .fineprint{
  margin-top:.6rem; text-align:center; opacity:.85;
}
/* === Fix chat composer layout on mobile === */

.composer{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.4rem .5rem;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 22px rgba(0,0,0,.35);
  flex-shrink:0;                 /* don't collapse when keyboard shows */
}

.composer__input{
  flex:1;
  min-width:0;                   /* prevent overflow */
  border:0;
  background:rgba(7,11,17,.7);
  padding:.7rem 1rem;
  border-radius:10px;
  font-size:.95rem;
  line-height:1.2;               /* keep tight row */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.composer__send{
  flex:0 0 auto;
  min-width:44px; height:44px;
  border-radius:12px;
  font-size:1.2rem;
  padding:0;
  display:grid; place-items:center;
}