/* style.css — stacked bubbles (no side-by-side), quick replies underneath,
   typing dots under the active bubble, sticky composer, mobile safe-area. */

/* ============ Base ============ */
:root{
  --bg:#f5f7f8;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --teal:#0f766e;
  --teal-600:#0d6b63;
  --chip-bg:#0f766e;
  --chip-text:#ffffff;
  --bubble-user:#0f766e;
  --bubble-user-text:#ffffff;
  --bubble-bot:#ffffff;
  --bubble-bot-text:#111827;
  --ring: rgba(15,118,110,.15);
  --shadow: 0 6px 24px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
}

*{box-sizing:border-box}
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
}

/* App shell (optional) */
.container{
  max-width: 820px;
  margin: 0 auto;
  padding: 16px;
}

/* ============ Chat ============ */
.chat{
  background: transparent;
}

#chat-box{
  background: transparent;
  min-height: calc(100dvh - 220px); /* ensure tall enough behind sticky composer */
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  padding: 8px 8px 24px;
  scroll-padding-bottom: 120px;
}

/* Bubbles — block so each bubble stacks on its own line */
.msg{
  display: block;         /* <-- forces stacking, not side-by-side */
  max-width: 90%;
  padding: 12px 14px;
  margin: 8px 10px;
  border-radius: 16px;
  box-shadow: var(--shadow);
  background: var(--bubble-bot);
  color: var(--bubble-bot-text);
  line-height: 1.35;
}
.msg.bot{ align-self: flex-start; }
.msg.user{
  background: var(--bubble-user);
  color: var(--bubble-user-text);
  margin-left: auto;      /* right-align user bubble */
}

/* Quick replies must occupy their own row under the last bubble */
.quick-replies{
  display:block;
  width:100%;
  clear:both;
  margin: 4px 10px 0 10px;
}
.chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 0 0;
}
.chip{
  appearance:none;
  border:none;
  outline:none;
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
.chip:hover{ filter: brightness(0.96); }
.chip:active{ transform: translateY(1px); }

/* Typing dots — render as a minimal line under the previous bubble */
.msg.typing{
  background: transparent;
  box-shadow: none;
  padding: 8px 14px;
}
.typing-dots{
  display:inline-flex;
  gap:6px;
  align-items:center;
}
.typing-dots i{
  width:8px; height:8px; border-radius:50%;
  background:#94a3b8;
  display:inline-block;
  animation: bounce 1.2s infinite ease-in-out;
}
.typing-dots i:nth-child(2){ animation-delay: .15s; }
.typing-dots i:nth-child(3){ animation-delay: .30s; }

@keyframes bounce{
  0%,80%,100%{ transform: translateY(0); opacity:.6; }
  40%{ transform: translateY(-6px); opacity:1; }
}

/* ============ Composer ============ */
#chat-form{
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(245,247,248,0) 0%, rgba(245,247,248,1) 40%);
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
  display:flex;
  gap:10px;
  align-items:center;
  border-top: 1px solid rgba(0,0,0,.05);
  z-index: 5;
}

#user-input{
  flex:1;
  height: 48px;
  padding: 0 14px;
  border-radius: 28px;
  border: 1px solid #e5e7eb;
  background:#fff;
  outline: none;
  font-size: 16px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
}
#user-input:focus{
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--ring);
}

#send-btn, #chat-form button[type="submit"]{
  height: 48px;
  padding: 0 18px;
  border-radius: 28px;
  border: none;
  cursor: pointer;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(15,118,110,.25);
}
#send-btn:hover, #chat-form button[type="submit"]:hover{ background: var(--teal-600); }
#send-btn[disabled]{ opacity:.6; cursor:not-allowed; box-shadow:none; }

/* ============ Mobile tweaks ============ */
@media (max-width: 640px){
  .container{ padding: 8px; }
  #chat-box{ max-height: calc(100dvh - 110px); }
  .msg{ max-width: 95%; }
}