/* assets/css/dharmabot.css — responsive typography + no bb-legacy */

/* Theme + Typography */
:root{
  --db-bg:#f8f9fb;
  --db-card:#ffffff;
  --db-ink:#1d2433;
  --db-sub:#5b6473;
  --db-accent:#6c7cff;
  --db-ring:#e5e8f0;

  /* Fonts */
  --db-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Responsive sizes (tweak here) */
  --db-body: clamp(13px, 1.6vw, 15px);          /* main chat text */
  --db-chip-size: clamp(11px, 1.2vw, 12.5px);   /* chip text */
  --db-card-title: clamp(16px, 1.8vw, 20px);    /* suggestion card title */
  --db-icon-size: clamp(36px, 4.2vw, 52px);     /* icon circle */
  --db-cite-size: clamp(12px, 1.1vw, 13.5px);
}


/* Shell */
.db-wrap{
  font-family: var(--db-font);
  color:var(--db-ink);
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 16px 36px;
  background: transparent;
}

/* Hero */
.db-hero{
  background: linear-gradient(180deg, #f1f0ff, #fafafe);
  border:1px solid var(--db-ring);
  border-radius: 22px;
  padding: 32px 28px;
  box-shadow: 0 6px 24px rgba(22,28,45,.06);
  margin-bottom: 22px;
  text-align: center;
}
.db-hero-title{
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 800;
  letter-spacing:.2px;
}
.db-hero-sub{
  margin-top: 10px;
  color: var(--db-sub);
  font-size: clamp(14px, 2vw, 18px);
}

/* Suggestions */
.db-suggest{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin: 20px 0 22px;
}
@media (min-width: 900px){
  .db-suggest{ grid-template-columns: repeat(2, 1fr); }
}
.db-suggest-item{
  display:flex; align-items:center; gap:14px;
  background: var(--db-card);
  border: 1px solid var(--db-ring);
  border-radius: 16px;
  padding: 18px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(22,28,45,.05);
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease;
  text-align:left;
}
.db-suggest-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(22,28,45,.08);
  border-color:#d9dff2;
}

/* icon + title sizes now responsive */
.db-suggest-icon{
  width:var(--db-icon-size);
  height:var(--db-icon-size);
  flex:0 0 var(--db-icon-size);
  display:grid;place-items:center;
  background:#eef0ff;border-radius:50%;
  font-size: calc(var(--db-icon-size) * 0.45);
}
.db-suggest-text{
  font-size: var(--db-card-title);
  font-weight:700;
  line-height:1.25;
}

/* Chat Area */
.db-chat{
  background: var(--db-card);
  border:1px solid var(--db-ring);
  border-radius: 16px;
  min-height: 140px;
  max-height: 70vh;
  overflow-y:auto;
  padding: 14px;
  box-shadow: 0 6px 18px rgba(22,28,45,.05) inset;
}

/* Messages */
.db-msg{ display:flex; gap:12px; margin:10px 6px; align-items:flex-start; }
.db-msg-user{ justify-content:flex-end; }
.db-msg-bot{ justify-content:flex-start; }

.db-avatar{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--db-ring);
  background:#fff; object-fit:cover;
}

/* Bubbles */
.db-bubble{
  max-width: 74%;
  border-radius:16px;
  padding:12px 14px;
  border:1px solid var(--db-ring);
  background:#fff;
  font-size: var(--db-body);     /* main text size */
  line-height:1.45;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.db-msg-user .db-bubble{
  background:#edf1ff;border-color:#d9dff2;
}

/* “From the texts” chips */
.db-bubble-suggest{ margin-top:10px; }
.db-suggest-title{ font-size:12px; color:var(--db-sub); margin-bottom:6px; }
.db-suggest-row{ display:flex; gap:8px; flex-wrap:wrap; }
.db-chip{
  font-size: var(--db-chip-size);
  padding:6px 8px; border-radius:999px;
  border:1px solid var(--db-ring); background:#f6f7fb;
}

/* Input bar */
.db-inputbar{
  margin-top:14px; display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--db-ring); border-radius:28px;
  padding:8px 10px; box-shadow:0 4px 16px rgba(22,28,45,.06);
}
.db-plus{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--db-ring); background:#f6f7fb; cursor:pointer;
  font-size:18px; line-height:1;
}
.db-input{
  flex:1; border:none; outline:none; font-size:16px; padding:10px 8px; background:transparent;
}
.db-send {
  width: 42px; height: 42px; border-radius: 50%; border: none;
  background: var(--db-accent); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.db-send svg { width: 18px; height: 18px; display: block; }

.db-footnote{
  margin-top:10px; text-align:center; color:var(--db-sub); font-size:14px;
}

/* Course teaser + popup */
.db-course-teaser{
  position:fixed; right:16px; bottom:16px; z-index:9998;
  background:#111827; color:#fff; padding:12px 14px;
  border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.24);
  max-width:320px; cursor:pointer;
}
.db-course-teaser-title{ font-weight:700; margin:0 0 4px; font-size:14px; }
.db-course-teaser-link{ text-decoration:underline; font-size:13px; }

.db-course-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: 9999; }
.db-course-overlay.db-open { display: flex; }
.db-course-modal{
  background:#fff; max-width:560px; width:calc(100% - 32px);
  border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.2);
  overflow:hidden; transform:translateY(8px); opacity:0;
  transition: transform .18s ease, opacity .18s ease;
  font-family: var(--db-font);
}
.db-course-overlay.db-open .db-course-modal{ transform:translateY(0); opacity:1; }
.db-course-header{
  padding:14px 18px; background:#f6f7fb; border-bottom:1px solid #eceef5;
  display:flex; align-items:center; gap:10px;
}
.db-course-title{ font-size:16px; font-weight:700; margin:0; flex:1; }
.db-course-close{ border:0; background:transparent; font-size:20px; line-height:1; cursor:pointer; }
.db-course-body{ padding:18px; display:grid; gap:12px; }
.db-course-meta{ font-size:13px; color:#5a6075; display:flex; gap:10px; flex-wrap:wrap; }
.db-course-blurb{ font-size:15px; color:#2b2f3a; }
.db-course-actions{ padding:16px 18px; border-top:1px solid #eceef5; display:flex; gap:10px; justify-content:flex-end; }
.db-btn{ appearance:none; border:1px solid #d5d9e6; background:#fff; color:#1f2330; border-radius:10px; padding:8px 14px; cursor:pointer; font-weight:600; }
.db-btn-primary{ background:#3b82f6; border-color:#3b82f6; color:#fff; }
.db-btn:hover{ filter:brightness(.98); }

/* Typography inside bubbles */
.db-bubble > *:first-child { margin-top: 0 !important; }
.db-bubble > *:last-child  { margin-bottom: 0 !important; }
.db-bubble p { margin: 0.35rem 0 !important; }
.db-bubble p:empty { display:none; }
.db-bubble h3, .db-bubble h4, .db-bubble h5 { margin: 0.45rem 0 0.30rem !important; line-height: 1.25; }
.db-bubble ul, .db-bubble ol { margin: 0.25rem 0 0.45rem 1.2rem !important; padding-left: 1.2rem; }
.db-bubble li { margin: 0.15rem 0; }
.db-bubble li > p { margin: 0; }
.db-bubble ul + h5, .db-bubble ol + h5 { margin-top: 0.35rem !important; }

.db-bubble .db-cite{
  font-size: var(--db-cite-size);
  color: var(--db-sub);
  font-style: italic;
  margin-left: 2px; /* slight separation */
}

/* Thinking indicator */
.db-thinking {
  display: inline-flex; align-items: center; gap: 4px;
  background: #f6f7fb; border: 1px solid var(--db-ring);
  color: var(--db-sub); padding: 10px 14px; margin: 6px;
  border-radius: 14px; font-size: 14px;
}
.db-thinking-dot { width: 6px; height: 6px; background: var(--db-sub); border-radius: 50%; animation: bounce 1.4s infinite; }
.db-thinking-dot:nth-child(2) { animation-delay: 0.2s; }
.db-thinking-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }


/* paste at the END of your CSS to override sizes */

/* ---- tunable sizes ---- */
:root{
  /* hero */
  --db-hero-title-min: 20px;
  --db-hero-title-vw:  3vw;
  --db-hero-title-max: 30px;

  --db-hero-sub-min: 12px;
  --db-hero-sub-vw:  1.6vw;
  --db-hero-sub-max: 16px;

  /* card text (the 4 question cards) */
  --db-card-text-min: 10px;
  --db-card-text-vw:  1.0vw;
  --db-card-text-max: 13px;
}

/* ---- hero ---- */
.db-hero{
  padding: 24px 22px; /* was 32px 28px */
}
.db-hero-title{
  font-size: clamp(var(--db-hero-title-min), var(--db-hero-title-vw), var(--db-hero-title-max)); /* was 24–36 */
}
.db-hero-sub{
  font-size: clamp(var(--db-hero-sub-min), var(--db-hero-sub-vw), var(--db-hero-sub-max));       /* was 14–18 */
}

/* ---- cards row (the 4 prompts) ---- */
.db-suggest{
  gap: 14px;                 /* was 18px */
  margin: 16px 0 18px;       /* slightly tighter */
}
.db-suggest-item{
  padding: 14px;             /* was 18px */
}
.db-suggest-icon{
  width: 36px; height: 36px; /* was 44px */
  font-size: 20px;           /* was 20px */
}
.db-suggest-text{
  font-size: clamp(var(--db-card-text-min), var(--db-card-text-vw), var(--db-card-text-max)); /* was 18px fixed */
  line-height: 1.2;
}


.db-inputbar {
  display:flex; align-items:center; gap:.5rem;
}
.db-input { flex:1; }



/* optional: shrink at very large viewports a bit more */
@media (min-width: 1400px){
  :root{
    --db-hero-title-vw: 2.4vw;
    --db-card-text-vw:  1.2vw;
  }
}