/* ============================================================
   GUEST PRE-ARRIVAL CHECK-IN — voice-led assistant
   A step-by-step conversational widget: the bot speaks a question,
   listens for the spoken answer, lets the guest correct the text it
   heard, then moves on. Ends on a review card before submitting to
   a Google Sheet via a Google Apps Script Web App.
   ============================================================ */

#guest-checkin{
  padding:130px 0 140px;
  background:var(--forest-deepest);
  color:var(--cream);
  position:relative;
  overflow:hidden;
}
#guest-checkin::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 15% 15%, rgba(201,162,78,.09), transparent 55%),
             radial-gradient(ellipse at 88% 85%, rgba(201,162,78,.08), transparent 50%);
  pointer-events:none;
}
#guest-checkin .container{ position:relative; z-index:2; }

.checkin-intro{ max-width:720px; margin:0 auto 48px; text-align:center; }
.checkin-intro .eyebrow{ justify-content:center; color:var(--gold-light); }
.checkin-intro .section-title{ color:var(--cream); }
.checkin-intro .section-sub{ color:rgba(248,243,230,.68); margin-top:16px; }

.bot-widget{
  max-width:640px; margin:0 auto;
  background:rgba(248,243,230,.04);
  border:1px solid rgba(230,205,143,.18);
  border-radius:10px;
  padding:36px 32px;
  backdrop-filter:blur(6px);
}

/* ---- chat log ---- */
.bot-chat{
  display:flex; flex-direction:column; gap:16px;
  margin-bottom:24px;
  max-height:420px; overflow-y:auto;
  padding-right:4px;
}
.bot-chat:empty{ display:none; margin:0; }
.bot-chat::-webkit-scrollbar{ width:5px; }
.bot-chat::-webkit-scrollbar-thumb{ background:rgba(230,205,143,.3); border-radius:3px; }

.bot-turn{ display:flex; gap:10px; max-width:88%; animation:turnIn .4s var(--ease-silk); }
@keyframes turnIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.bot-turn.user{ align-self:flex-end; flex-direction:row-reverse; }

.bot-avatar{
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(230,205,143,.15); border:1px solid rgba(230,205,143,.35);
  color:var(--gold-light);
}
.bot-avatar svg{ width:15px; height:15px; }

.bot-bubble{
  padding:12px 16px; border-radius:14px 14px 14px 3px;
  background:rgba(255,255,255,.05); border:1px solid rgba(230,205,143,.16);
  font-size:14.5px; line-height:1.55; color:rgba(248,243,230,.92);
}
.bot-turn.user .bot-bubble{
  border-radius:14px 14px 3px 14px;
  background:linear-gradient(135deg, rgba(201,172,106,.22), rgba(201,172,106,.1));
  border-color:rgba(230,205,143,.3);
  color:var(--cream);
}
.bot-turn.user .bot-bubble img{ display:block; max-width:140px; border-radius:8px; }

/* ---- dynamic controls area ---- */
.bot-controls{ display:flex; flex-direction:column; gap:16px; }

.bot-start-btn{ align-self:center; }

.choice-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.choice-chip{
  padding:12px 22px; border-radius:30px;
  background:rgba(255,255,255,.04); border:1px solid rgba(230,205,143,.35);
  color:var(--cream); font-size:13.5px; font-weight:600; letter-spacing:.02em;
  cursor:url('../img/cursor-peak.png?v=2') 16 4, pointer;
  transition:background .3s, border-color .3s, transform .3s;
}
.choice-chip:hover{ background:rgba(230,205,143,.14); border-color:var(--gold-light); transform:translateY(-2px); }

/* ---- voice capture control ---- */
.voice-capture{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.mic-orb{
  width:72px; height:72px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(230,205,143,.12); border:1.5px solid rgba(230,205,143,.4);
  color:var(--gold-light); cursor:url('../img/cursor-peak.png?v=2') 16 4, pointer;
  transition:background .3s, border-color .3s;
}
.mic-orb svg{ width:28px; height:28px; }
.mic-orb.listening{
  background:rgba(226,102,102,.16); border-color:#e26666; color:#f0a3a3;
  animation:orbPulse 1.3s ease-in-out infinite;
}
@keyframes orbPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(226,102,102,.4); }
  50%{ box-shadow:0 0 0 12px rgba(226,102,102,0); }
}
/* a few gentle pulses inviting the tap, since the mic no longer opens
   itself — stops automatically once the animation finishes */
.mic-orb.invite{ animation:orbInvite 1.6s ease-in-out 3; }
@keyframes orbInvite{
  0%,100%{ box-shadow:0 0 0 0 rgba(230,205,143,.5); }
  50%{ box-shadow:0 0 0 10px rgba(230,205,143,0); }
}
.voice-capture-hint{ font-size:12.5px; color:rgba(248,243,230,.55); text-align:center; min-height:16px; }
.voice-capture-transcript{
  width:100%; min-height:22px; padding:10px 4px;
  border-bottom:1px solid rgba(230,205,143,.3);
  color:var(--cream); font-size:15px; text-align:center;
}

.voice-edit-row{ display:flex; gap:10px; align-items:center; }
.voice-edit-row input, .voice-edit-row textarea{
  flex:1; background:rgba(255,255,255,.04); border:1px solid rgba(230,205,143,.3);
  color:var(--cream); padding:12px 14px; font-size:15px; border-radius:6px;
}
.voice-edit-row input:focus, .voice-edit-row textarea:focus{ outline:none; border-color:var(--gold-light); }

.bot-btn-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.bot-btn-row .btn{ border:none; cursor:url('../img/cursor-peak.png?v=2') 16 4, pointer; }
.bot-link-btn{
  background:none; border:none; color:rgba(248,243,230,.55); font-size:13px;
  text-decoration:underline; text-underline-offset:3px; cursor:url('../img/cursor-peak.png?v=2') 16 4, pointer;
}
.bot-link-btn:hover{ color:var(--gold-light); }

/* ---- ID upload cards (photo step) ---- */
.id-upload-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; width:100%; }
.id-upload-card{
  position:relative; aspect-ratio:16/10; border-radius:8px; overflow:hidden;
  border:1.5px dashed rgba(230,205,143,.4);
  background:rgba(255,255,255,.03);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s, background .3s;
}
.id-upload-card:hover{ border-color:var(--gold-light); background:rgba(255,255,255,.05); }
.id-upload-card.has-image{ border-style:solid; }
.id-upload-input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:2; }
.id-upload-empty{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(248,243,230,.55); text-align:center; font-size:12px; line-height:1.5;
  padding:0 12px;
}
.id-upload-empty svg{ width:26px; height:26px; color:var(--gold-light); opacity:.85; }
.id-upload-preview[hidden]{ display:none; }
.id-upload-preview{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.id-upload-clear[hidden]{ display:none; }
.id-upload-clear{
  position:absolute; top:8px; right:8px; z-index:3;
  width:26px; height:26px; border-radius:50%; border:none;
  background:rgba(10,10,10,.65); color:#fff; font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .3s;
}
.id-upload-clear:hover{ background:rgba(226,102,102,.85); }

/* ---- review card ---- */
.review-card{ width:100%; display:flex; flex-direction:column; gap:2px; }
.review-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:12px 0; border-bottom:1px solid rgba(230,205,143,.14);
}
.review-row:last-child{ border-bottom:none; }
.review-row .rr-label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(248,243,230,.5); flex-shrink:0; width:120px; }
.review-row .rr-value{ font-size:14.5px; color:var(--cream); text-align:right; flex:1; word-break:break-word; }
.review-row .rr-value img{ display:inline-block; max-width:90px; border-radius:6px; margin-left:6px; vertical-align:middle; }
.review-row .rr-edit{
  background:none; border:none; color:var(--gold-light); font-size:12px;
  text-decoration:underline; text-underline-offset:2px; cursor:url('../img/cursor-peak.png?v=2') 16 4, pointer;
  flex-shrink:0;
}

.review-guest-card{
  margin-top:18px; padding:16px 18px 4px;
  background:rgba(255,255,255,.03); border:1px solid rgba(230,205,143,.16); border-radius:8px;
}
.review-guest-heading{
  font-family:var(--font-royal); font-size:15px; letter-spacing:.04em;
  color:var(--gold-light); margin-bottom:6px;
}
.review-guest-card .review-row:last-child{ border-bottom:none; }

.consent-row{
  display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  margin-top:8px; font-size:12.5px; line-height:1.6; color:rgba(248,243,230,.7);
}
.consent-row input{ margin-top:3px; width:16px; height:16px; flex-shrink:0; accent-color:var(--gold-light); cursor:pointer; }

.btn-spinner{
  width:15px; height:15px; border-radius:50%; display:inline-block; margin-left:8px;
  border:2px solid rgba(74,52,24,.35); border-top-color:#4a3418;
  animation:checkinSpin .7s linear infinite; vertical-align:middle;
}
@keyframes checkinSpin{ to{ transform:rotate(360deg); } }

#checkin-status{ max-width:640px; margin:20px auto 0; text-align:center; }

@media (max-width:640px){
  .bot-widget{ padding:26px 20px; }
  .bot-turn{ max-width:96%; }
  .id-upload-grid{ grid-template-columns:1fr; }
  .review-row{ flex-direction:column; gap:4px; }
  .review-row .rr-value{ text-align:left; }
}