/* ========= Centered Hampton-y chat card ========= */
#chatContainer{
  max-width: 860px;
  margin: 32px auto 64px;
  background:#FFFDF7;
  border:1px solid var(--moss-gray);
  border-radius:18px;
  box-shadow:0 18px 44px rgba(0,0,0,.06);
  display:flex; flex-direction:column;
  overflow:hidden;
}

/* header + finish link */
.chatHead{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px 8px; gap:12px;
}
.chatHead__title{ font:600 0.95rem/1 'Instrument Sans',sans-serif; color:var(--deep-ink); }
.linkBtn{
  background:none; border:none; padding:6px 10px; border-radius:8px;
  color:var(--moss-gray); cursor:pointer; font-weight:600;
}
.linkBtn:hover{ color:var(--deep-ink); background:#fbf6ea; }

/* progress */
.hg-progress{ height:4px; background:#eee8db; margin:0 18px 8px; border-radius:999px; overflow:hidden; }
.hg-progress > #progressBar{ display:block; height:100%; width:0%; background:var(--primary-gold); transition:width .35s ease; }

/* stream */
#chatLog{
  padding: 12px 18px 8px;
  display:flex; flex-direction:column; gap:12px;
  min-height:52vh; max-height:66vh; overflow:auto;
  scroll-behavior:smooth;
}

/* bubbles */
.chatRow{ display:flex; }
.chatRow.left  { justify-content:flex-start; }   /* bot on left */
.chatRow.right { justify-content:flex-end; }     /* you on right */

.botBubble,.userBubble{
  max-width: 48ch;
  padding: 12px 16px;
  border-radius:16px;
  line-height:1.5;
  font-size:1rem;
  word-wrap:break-word; white-space:pre-wrap;
}
.botBubble { background:var(--base); color:var(--deep-ink); border:1px solid color-mix(in srgb, var(--moss-gray) 35%, #fff 65%); }
.userBubble{ background:var(--forest-green); color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.12); }

/* typing dots inside a bot bubble */
.dots{ display:inline-flex; gap:6px; vertical-align:middle; }
.dots i{ width:6px; height:6px; border-radius:50%; background:var(--moss-gray); opacity:.8; animation: dotBlink 1s infinite ease-in-out; }
.dots i:nth-child(2){ animation-delay:.2s; }
.dots i:nth-child(3){ animation-delay:.4s; }
@keyframes dotBlink{
  0%,100%{ transform:translateY(0); opacity:.6; }
  50%{ transform:translateY(-4px); opacity:1; }
}

/* chips under question bubble */
.optionsRow{
  display:flex; flex-wrap:wrap; gap:10px 12px;
  margin: 6px 0 2px 6px;
}
.chip{
  appearance:none;
  border:1px solid var(--moss-gray);
  background: color-mix(in srgb, var(--base) 75%, #fff 25%);
  color: var(--deep-ink);
  border-radius:999px;
  padding:8px 12px; font-size:.92rem; cursor:pointer;
  transition:transform .06s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover{ transform:translateY(-1px); background:#fbf6ea; }
.chip--selected{ background:var(--forest-green) !important; border-color:var(--forest-green) !important; color:#fff !important; }
.chip--selected::after{ content:"✓"; font-weight:700; margin-left:6px; }
.chip--disabled{ opacity:.55; pointer-events:none; }

/* composer */
.chatComposer{
  position:sticky; bottom:0; z-index:5;
  display:flex; align-items:center; gap:10px;
  padding:12px 14px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,0), #fff 45%);
  border-top:1px solid var(--moss-gray);
}
.chatField{
  flex:1; border:1px solid var(--moss-gray); background:#fff;
  border-radius:999px; padding:10px 14px; font-size:1rem; outline:none; color:var(--deep-ink);
}
.chatField:focus{ box-shadow:0 0 0 3px color-mix(in srgb, var(--forest-green) 22%, #fff 78%); }
.enterBtn{
  min-width:92px; height:40px; border-radius:999px; border:none; cursor:pointer;
  background:var(--forest-green); color:#fff; font-weight:700; opacity:.92;
}
.enterBtn:hover{ opacity:1; }
.enterBtn:disabled{ opacity:.38; cursor:not-allowed; }

/* end actions (after finish) */
.end-actions{ display:flex; gap:10px; padding:6px 18px 16px; }
.end-actions .cta{
  border-radius:12px; padding:.7rem 1rem; font-weight:700; cursor:pointer; border:1px solid transparent;
}
.end-actions .cta.primary{ background:var(--forest-green); color:#fff; }
.end-actions .cta.ghost  { background:#fff; color:var(--deep-ink); border-color:var(--moss-gray); }

/* mobile */
@media (max-width:640px){
  #chatContainer{ margin:16px 12px 40px; }
  .botBubble,.userBubble{ max-width: 90%; }
  .optionsRow{ overflow-x:auto; flex-wrap:nowrap; gap:8px; padding-bottom:4px; }
  .optionsRow .chip{ white-space:nowrap; }
}

/* ==== Chat hard overrides (order matters) ==== */
#chatContainer, #chatContainer *{
  font-family:'Instrument Sans', system-ui, sans-serif !important;
}
.botBubble{
  font-weight:500;
  background: var(--base);           /* your soft paper tone */
  color: var(--deep-ink);
  border:1px solid color-mix(in srgb, var(--moss-gray) 35%, #fff 65%);
}
.userBubble{
  background: var(--forest-green) !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
/* in case older styles flipped left/right */
.chatRow.left  { justify-content:flex-start !important; }
.chatRow.right { justify-content:flex-end !important; }

/* typing dots look consistent with your palette */
.dots i{ background: var(--moss-gray) !important; }

/* progress bar always visible inside chat card */
#progressContainer{ display:block !important; height:4px; }

/* Chips under the bot message */
.optionsRow{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:6px 0 2px 6px;      /* small indent from bot bubble */
}
.chip{
  border:1px solid var(--moss-gray);
  background:#fff;
  color:var(--deep-ink);
  border-radius:999px;
  padding:.5rem .9rem;
  font:600 .95rem/1 'Instrument Sans',system-ui,sans-serif;
  cursor:pointer;
  transition:transform .05s ease, box-shadow .05s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.chip:hover{ transform:translateY(-1px); }
.chip--selected{ background:var(--forest-green); color:#fff; border-color:var(--forest-green); }
.chip--disabled{ opacity:.55; pointer-events:none; }

/* Typing dots */
.dots{ display:inline-flex; gap:6px; vertical-align:middle; }
.dots i{ width:8px; height:8px; border-radius:50%; background:var(--moss-gray); animation: pulse 1s infinite ease-in-out; }
.dots i:nth-child(2){ animation-delay:.15s }
.dots i:nth-child(3){ animation-delay:.3s }
@keyframes pulse{ 0%,100%{opacity:.25; transform:translateY(0)} 50%{opacity:1; transform:translateY(-3px)} }

/* Ensure user bubble isn’t white anywhere */
.userBubble{ background:var(--forest-green) !important; color:#fff !important; }

/* ===== CHAT THEME — Ilya palette & fonts ===== */
:root{
  --base:#FAF7ED;
  --primary-gold:#D6BA73;
  --forest-green:#4A6E57;
  --moss-gray:#A9B7A0;
  --deep-ink:#1A1A1A;
  --radius:18px;
  --pill:999px;
}

/* Center the whole card */
#chatContainer{
  position:relative;
  width:min(920px, 94%);
  margin:28px auto;
  background:#fff;
  border:1px solid var(--moss-gray);
  border-radius:20px;
  box-shadow:0 18px 40px rgba(0,0,0,.06);
  display:flex; flex-direction:column;
  font-family:'Instrument Sans', system-ui, sans-serif;
}

/* Stream area */
#chatLog{
  min-height:52vh; max-height:66vh; overflow:auto;
  padding:22px 26px 10px;
}

/* Make sure "left = bot", "right = user" */
.chatRow{ display:flex; margin:10px 0; }
.chatRow.left  { justify-content:flex-start !important; }
.chatRow.right { justify-content:flex-end  !important; }

/* Bubbles */
.botBubble,.userBubble{
  max-width: 48ch;
  padding:12px 16px;
  border-radius: var(--radius);
  line-height:1.45;
  font-size:16px;
  word-wrap:break-word; white-space:pre-wrap;
  font-family:'Instrument Sans',sans-serif;
}
.botBubble{
  background:#FFF8EE;                 /* warm off-white */
  color:var(--deep-ink);
  border:1px solid #E8DDD0;
}
#chatLog .userBubble{
  background:var(--forest-green) !important;
  color:#fff !important;
  border:1px solid var(--forest-green) !important;
  box-shadow:0 6px 14px rgba(74,110,87,.18);
}

/* Chips (button answers) live under bot message */
.optionsRow{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:6px 0 4px 6px;
}
.chip{
  border:1px solid #E7E1D4;
  background:var(--primary-gold);
  color:#1f1a11;
  border-radius: var(--pill);
  padding:.5rem .9rem;
  font:600 .95rem/1 'Instrument Sans',sans-serif;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  transition:transform .06s ease, filter .12s ease;
}
.chip:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.chip--selected{
  background:var(--forest-green); color:#fff; border-color:var(--forest-green);
}
.chip--disabled{ opacity:.55; pointer-events:none; }

/* Composer */
.chatComposer{
  position:sticky; bottom:-1px; z-index:5;
  border-top:1px solid #EFE9DE;
  background:linear-gradient(180deg, rgba(255,255,255,0), #fff 40%);
  padding:12px 16px 16px;
  border-bottom-left-radius:20px; border-bottom-right-radius:20px;
  display:flex; gap:10px; align-items:center;
}
#chatField{
  flex:1; height:44px; padding:0 .9rem;
  border:1px solid #E0D8CA; border-radius: var(--pill);
  font:400 1rem/1 'Instrument Sans',sans-serif; color:#222;
  background:#fff;
}
#chatSend, #enterBtn{
  min-width:92px; height:44px; border-radius: var(--pill);
  border:none; cursor:pointer; font-weight:700;
  background:var(--forest-green); color:#fff;
}
#chatSend:hover, #enterBtn:hover{ filter:brightness(1.05); }
#chatSend:disabled, #enterBtn:disabled{ opacity:.5; cursor:not-allowed; }

/* "Finish early" lives in the card header top-right */
#finishEarly, .finish-early{
  position:absolute; top:8px; right:12px;
  background:transparent; border:none;
  color:#6b6b6b; font-weight:600; cursor:pointer;
  padding:.5rem .75rem; border-radius: var(--pill);
}
#finishEarly:hover{ background:#F7F2E9; color:#1a1a1a; }

/* Progress bar (gold, and ON) */
#progressContainer{
  display:block !important;
  height:4px; background:#EFE9DE;
  margin:8px auto 0;
  width:min(920px, 94%);
  border-radius:2px; overflow:hidden;
}
#progressBar{
  width:0%; height:100%;
  background:var(--primary-gold);
  transition:width .35s ease;
}

/* Typing dots inside a bot bubble */
.dots{ display:inline-flex; gap:6px; vertical-align:middle; }
.dots i{ width:8px; height:8px; border-radius:50%; background:#C9B89B;
         animation:pulse 1s infinite ease-in-out; }
.dots i:nth-child(2){ animation-delay:.15s }
.dots i:nth-child(3){ animation-delay:.3s }
@keyframes pulse{ 0%,100%{opacity:.3; transform:translateY(0)} 50%{opacity:1; transform:translateY(-3px)} }

/* Mobile */
@media (max-width:640px){
  #chatLog{ max-height:60vh; }
  .botBubble,.userBubble{ font-size:15px; }
}



.botBubble .cta { 
  margin-top: .5rem; 
  display: flex; 
  justify-content: center; 
}

.botBubble .cta-btn{
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.1rem;
  border-radius: 9999px;
  font: 700 .95rem/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.04);

  /* brand colors */
  background: #C6A759;              /* gold */
  color: #122b28;                    /* deep green text */

  /* lift + soft shadow */
  box-shadow: 0 3px 0 rgba(0,0,0,.08), 0 8px 20px rgba(0,0,0,.08);

  transition: transform .06s ease, box-shadow .18s ease, background .18s ease;
}
.botBubble .cta-btn:hover{ 
  transform: translateY(-1px);
  box-shadow: 0 4px 0 rgba(0,0,0,.08), 0 14px 26px rgba(0,0,0,.12);
}
.botBubble .cta-btn:active{ 
  transform: translateY(0);
  box-shadow: 0 2px 0 rgba(0,0,0,.06), 0 8px 16px rgba(0,0,0,.10);
}
.botBubble .cta-btn:focus-visible{
  outline: 3px solid rgba(198,167,89,.35);
  outline-offset: 3px;
}

/* optional green variant if you prefer */
.botBubble .cta-btn--green{
  background: #4A6E57; 
  color: #fff;
}
.botBubble .cta-btn .ico{ width: 1rem; height: 1rem; }

/* Height of your top navbar; tweak if needed */
:root { --nav-h: 68px; }

/* Center the chat vertically within the viewport (minus header) */
.vf-center{
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;           /* vertical centering */
  justify-content: center;       /* horizontal centering */
  padding-block: 2rem;           /* breathing room */
}

/* Use 100dvh on browsers that support it for better mobile behavior */
@supports (height: 100dvh) {
  .vf-center{ min-height: calc(100dvh - var(--nav-h)); }
}

/* Ensure any existing margins don’t fight the centering */
#chatContainer{ margin: 0 auto !important; }


  .uf-head, .chatHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;           /* centers title + link vertically */
  gap: 12px;
}

/* kill default heading margins so it doesn't sit lower */
.uf-head h2, .chatHeader h2, .uf-title {
  margin: 0;
  line-height: 1.2;
}

/* keep the link vertically centered too */
.uf-head .finish-early, .chatHeader .finish-early {
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
}

/* ---- Chat header alignment fix ---- */
#chatContainer .chatHead{
  display:flex;
  justify-content:space-between;
  align-items:baseline;              /* align text baselines, not centers */
  padding:14px 18px 8px;
  gap:12px;
}

/* kill default heading margins and unify line-height */
#chatContainer .chatHead h1,
#chatContainer .chatHead h2,
#chatContainer .chatHead h3,
#chatContainer .chatHead .title,
#chatContainer .chatHead a{
  margin:0;
  line-height:1.15;                  /* same on both sides */
}

/* optional: if your left label isn’t in a heading, give it a class */
#chatContainer .chatHead .title{
  font-weight:700;
  font-size:16px;
}

/* “Finish early” link */
#chatContainer .chatHead a{
  font-weight:600;
  font-size:14px;
  text-decoration:underline;
  align-self:baseline;               /* belt + suspenders */
  text-underline-offset: 2px;
}

#chatContainer .chatHead{
  display:flex;
  justify-content:space-between;
  align-items:center;            /* <-- was baseline */
  padding:12px 18px 8px;
  gap:12px;
}

/* title block */
#chatContainer .chatHead__title{
  margin:0;
  line-height:1.2;
  display:inline-flex;
  align-items:center;
}

/* “Finish early” link (yours has class Nicebutton) */
#chatContainer .chatHead a.Nicebutton{
  display:inline-flex;           /* centers text inside its padding */
  align-items:center;
  line-height:1.2;               /* match title */
  padding-top:0;                 /* avoid pulling baseline up */
  padding-bottom:0;
}