/* ============================================================
   DIA — website chatbot widget
   Built entirely on the existing tokens in css/tokens.css, so
   the panel inherits the site's colours, radii and shadows.
   ============================================================ */

.dia-chat {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s3);
  font-family: var(--font);
  pointer-events: none;
}

.dia-chat > * { pointer-events: auto; }

/* ---------------------------------------------------- launcher */

.dia-chat__launcher {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  max-width: min(20rem, calc(100vw - 2rem));
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--sh-lg);
  cursor: pointer;
  text-align: left;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.dia-chat__launcher:hover { transform: translateY(-1px); box-shadow: var(--sh-xl); }
.dia-chat__launcher:focus-visible { outline: none; box-shadow: var(--sh-focus); }

.dia-chat__launcher-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: #fff;
}

.dia-chat__launcher-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dia-chat__launcher-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-btn);
  line-height: 1.25;
}

.dia-chat__launcher-sub {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.35;
  /* Two lines at most: the launcher is a hint, not a paragraph. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The subtext is the "what can I ask" hint; on a narrow screen the
   pill collapses to the title so it never covers the page. */
@media (max-width: 30rem) {
  .dia-chat__launcher-sub { display: none; }
}

.dia-chat.is-open .dia-chat__launcher-sub { display: none; }

/* ------------------------------------------------------- panel */

.dia-chat__panel {
  display: flex;
  flex-direction: column;
  width: min(23.5rem, calc(100vw - 1.5rem));
  height: min(32rem, calc(100vh - 8rem));
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-xl);
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity var(--t-base), transform var(--t-base);
}

.dia-chat.is-open .dia-chat__panel {
  opacity: 1;
  transform: none;
}

.dia-chat__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4) var(--s4) var(--s3);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-blue);
}

.dia-chat__head-text { min-width: 0; }

.dia-chat__title {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: var(--fw-title);
  letter-spacing: var(--ls-title);
  color: var(--text-primary);
}

.dia-chat__subtitle {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.dia-chat__close {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.dia-chat__close:hover { background: rgba(16, 24, 32, 0.06); color: var(--text-primary); }
.dia-chat__close:focus-visible { outline: none; box-shadow: var(--sh-focus); }

/* --------------------------------------------------------- log */

.dia-chat__log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  background: var(--page-bg);
}

.dia-chat__msg { display: flex; flex-direction: column; gap: 2px; max-width: 92%; }
.dia-chat__msg--user { align-self: flex-end; align-items: flex-end; }
.dia-chat__msg--assistant { align-self: flex-start; }

.dia-chat__who {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.dia-chat__bubble {
  margin: 0;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dia-chat__msg--assistant .dia-chat__bubble {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
  border-bottom-left-radius: var(--r-xs);
}

.dia-chat__msg--user .dia-chat__bubble {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: var(--r-xs);
}

/* typing indicator */
.dia-chat__bubble--pending {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 2.4rem;
}

.dia-chat__bubble--pending span {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--text-muted);
  animation: dia-chat-dot 1.1s infinite ease-in-out;
}

.dia-chat__bubble--pending span:nth-child(2) { animation-delay: 0.15s; }
.dia-chat__bubble--pending span:nth-child(3) { animation-delay: 0.3s; }

@keyframes dia-chat-dot {
  0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.dia-chat__notice {
  margin: 0;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text-secondary);
  background: var(--surface-soft);
}

.dia-chat__notice--error { color: var(--error); background: rgba(217, 45, 32, 0.08); }
.dia-chat__notice--ok { color: var(--success); background: var(--success-soft); }

/* -------------------------------------------------------- form */

.dia-chat__form {
  display: flex;
  align-items: flex-end;
  gap: var(--s2);
  padding: var(--s3) var(--s4) var(--s2);
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
}

.dia-chat__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.5rem;
  max-height: 7.5rem;
  padding: var(--s3);
  border: 1px solid var(--border-medium);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.4;
  resize: none;
}

.dia-chat__input:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--sh-focus); }
.dia-chat__input:disabled { background: var(--surface-sunken); color: var(--text-muted); }

.dia-chat__send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: var(--r-md);
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  transition: background var(--t-fast);
}

.dia-chat__send:hover:not(:disabled) { background: var(--primary-hover); }
.dia-chat__send:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.dia-chat__send:disabled { opacity: 0.5; cursor: default; }

/* honeypot — off-screen, never display:none (bots skip those) */
.dia-chat__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.dia-chat__foot {
  margin: 0;
  padding: 0 var(--s4) var(--s3);
  font-size: var(--fs-eyebrow);
  line-height: 1.5;
  color: var(--text-muted);
  background: var(--surface);
}

.dia-chat__foot-link { color: var(--text-secondary); text-decoration: underline; }
.dia-chat__foot-link:hover { color: var(--primary); }

/* ------------------------------------------------ small screens */

@media (max-width: 30rem) {
  .dia-chat { left: clamp(0.5rem, 2vw, 1rem); }
  .dia-chat__panel {
    width: 100%;
    height: min(30rem, calc(100vh - 7rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .dia-chat__launcher,
  .dia-chat__panel { transition: none; }
  .dia-chat__bubble--pending span { animation: none; opacity: 0.6; }
}


/* ===== Mobile launcher: icon only, never cover pricing/CTA ===== */
@media (max-width: 40rem) {
  .dia-chat {
    left:auto;
    right:.8rem;
    bottom:calc(4.65rem + env(safe-area-inset-bottom, 0px));
  }
  .dia-chat__launcher {
    width:56px;
    height:56px;
    max-width:none;
    padding:0;
    justify-content:center;
    border-radius:50%;
    box-shadow:0 12px 30px rgba(15,23,42,.18);
  }
  .dia-chat__launcher-icon { width:38px; height:38px; }
  .dia-chat__launcher-text { display:none; }
  .dia-chat__panel {
    width:min(23.5rem, calc(100vw - 1rem));
    height:min(31rem, calc(100dvh - 7.2rem - env(safe-area-inset-bottom,0px)));
  }
  .dia-chat.is-open { left:.5rem; right:.5rem; align-items:stretch; }
  .dia-chat.is-open .dia-chat__launcher { align-self:flex-end; }
}