/* ============================================================
   EIAAW Social Media Team — floating chatbot widget styles.
   Scoped under .smt-* so it never collides with the landing page
   or Filament panel styles. EIAAW brand tokens are inlined here
   (the widget loads on Filament pages too, which don't import
   eiaaw.css), so it must be self-contained.
   ============================================================ */
:root {
  --smt-ink: #0F1A1D;
  --smt-cream: #FAF7F2;
  --smt-beige: #F3EDE0;
  --smt-teal: #11766A;
  --smt-teal-bright: #1FA896;
  --smt-line: rgba(15, 26, 29, 0.12);
  --smt-mute: #6b7775;
  --smt-radius: 16px;
  --smt-shadow: 0 18px 50px -12px rgba(15, 26, 29, 0.35);
  --smt-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Launcher ---------- */
.smt-chat-launcher {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border: none;
  border-radius: 999px;
  background: var(--smt-teal);
  color: #fff;
  font-family: var(--smt-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: var(--smt-shadow);
  transition: transform 0.18s ease, background 0.18s ease;
}
.smt-chat-launcher:hover { background: var(--smt-teal-bright); transform: translateY(-2px); }
.smt-chat-launcher-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #8ff0df;
  box-shadow: 0 0 0 0 rgba(143, 240, 223, 0.7);
  animation: smt-pulse 2.4s infinite;
}
@keyframes smt-pulse {
  0% { box-shadow: 0 0 0 0 rgba(143, 240, 223, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(143, 240, 223, 0); }
  100% { box-shadow: 0 0 0 0 rgba(143, 240, 223, 0); }
}

/* ---------- Chat panel ---------- */
.smt-chat-panel {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(76px, 9vw, 96px);
  z-index: 2147483000;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 130px));
  display: flex;
  flex-direction: column;
  background: var(--smt-cream);
  border: 1px solid var(--smt-line);
  border-radius: var(--smt-radius);
  box-shadow: var(--smt-shadow);
  font-family: var(--smt-font);
  color: var(--smt-ink);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}
.smt-chat-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.smt-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  background: var(--smt-teal);
  color: #fff;
}
.smt-chat-head strong { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.smt-chat-head small { display: block; font-size: 11px; opacity: 0.8; margin-top: 2px; }
.smt-chat-close {
  background: none; border: none; color: #fff; font-size: 24px; line-height: 1;
  cursor: pointer; opacity: 0.85; padding: 0 4px;
}
.smt-chat-close:hover { opacity: 1; }

.smt-chat-modes {
  display: flex; gap: 4px; padding: 10px 12px 0;
}
.smt-chat-mode {
  flex: 1; padding: 8px 10px; border: 1px solid var(--smt-line);
  background: #fff; color: var(--smt-mute);
  font-family: var(--smt-font); font-size: 12px; font-weight: 600;
  border-radius: 9px; cursor: pointer; transition: all 0.15s ease;
}
.smt-chat-mode.active { background: var(--smt-ink); color: #fff; border-color: var(--smt-ink); }
.smt-chat-mode:not(.active):hover { border-color: var(--smt-teal); color: var(--smt-teal); }

.smt-chat-msgs {
  flex: 1; overflow-y: auto; padding: 16px 16px 6px;
  display: flex; flex-direction: column; gap: 10px;
}
.smt-chat-bubble {
  max-width: 84%; padding: 10px 14px; border-radius: 14px;
  font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word;
}
.smt-chat-bubble.bot { align-self: flex-start; background: #fff; border: 1px solid var(--smt-line); border-bottom-left-radius: 4px; }
.smt-chat-bubble.user { align-self: flex-end; background: var(--smt-teal); color: #fff; border-bottom-right-radius: 4px; }

/* Light markdown rendered inside bot bubbles. */
.smt-chat-bubble.bot p { margin: 0 0 8px; }
.smt-chat-bubble.bot p:last-child { margin-bottom: 0; }
.smt-chat-bubble.bot strong { font-weight: 700; color: var(--smt-ink); }
.smt-chat-bubble.bot em { font-style: italic; }
.smt-chat-bubble.bot code {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px;
  background: var(--smt-beige); padding: 1px 5px; border-radius: 4px;
}
.smt-chat-bubble.bot a { color: var(--smt-teal); font-weight: 600; text-decoration: underline; }
.smt-chat-bubble.bot ul { margin: 6px 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.smt-chat-bubble.bot li { position: relative; padding-left: 16px; line-height: 1.45; }
.smt-chat-bubble.bot li::before {
  content: ''; position: absolute; left: 2px; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--smt-teal);
}
.smt-chat-bubble.typing { display: inline-flex; gap: 4px; padding: 14px; }
.smt-chat-bubble.typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--smt-mute);
  animation: smt-bounce 1.2s infinite;
}
.smt-chat-bubble.typing span:nth-child(2) { animation-delay: 0.15s; }
.smt-chat-bubble.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes smt-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Contact gate — rendered inside the message log before the AI can answer.
   Reuses .smt-field / .smt-row / .smt-modal-err / .smt-btn-primary / .smt-eyebrow. */
.smt-gate {
  align-self: stretch; background: #fff; border: 1px solid var(--smt-line);
  border-radius: 14px; padding: 16px;
}
.smt-gate-lead { margin: 8px 0 14px; font-size: 13px; line-height: 1.5; color: var(--smt-mute); }
.smt-gate .smt-field { margin-bottom: 12px; }
.smt-gate .smt-btn-primary { width: 100%; margin-top: 2px; }

.smt-chat-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 8px; }
.smt-chat-chip {
  padding: 7px 12px; border: 1px solid var(--smt-teal); background: transparent;
  color: var(--smt-teal); font-family: var(--smt-font); font-size: 12px; font-weight: 600;
  border-radius: 999px; cursor: pointer; transition: all 0.15s ease;
}
.smt-chat-chip:hover { background: var(--smt-teal); color: #fff; }

.smt-chat-form { display: flex; gap: 8px; padding: 12px 14px 16px; border-top: 1px solid var(--smt-line); }
.smt-chat-form input {
  flex: 1; padding: 11px 14px; border: 1px solid var(--smt-line); border-radius: 999px;
  font-family: var(--smt-font); font-size: 14px; color: var(--smt-ink); background: #fff;
}
.smt-chat-form input:focus { outline: none; border-color: var(--smt-teal); }
.smt-chat-form button {
  width: 42px; flex-shrink: 0; border: none; border-radius: 999px;
  background: var(--smt-teal); color: #fff; font-size: 18px; cursor: pointer;
  transition: background 0.15s ease;
}
.smt-chat-form button:hover { background: var(--smt-teal-bright); }

/* ---------- Contact modal ---------- */
.smt-modal {
  position: fixed; inset: 0; z-index: 2147483001;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(15, 26, 29, 0.55);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  font-family: var(--smt-font);
}
.smt-modal.open { opacity: 1; pointer-events: auto; }
.smt-modal-panel {
  position: relative; width: min(520px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--smt-cream); border-radius: var(--smt-radius); padding: 36px;
  box-shadow: var(--smt-shadow); color: var(--smt-ink);
}
.smt-modal-close {
  position: absolute; top: 16px; right: 18px; background: none; border: none;
  font-size: 26px; line-height: 1; color: var(--smt-mute); cursor: pointer;
}
.smt-modal-close:hover { color: var(--smt-ink); }
.smt-eyebrow {
  display: inline-block; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--smt-teal);
}
.smt-modal-panel h3 { margin: 10px 0 8px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.smt-modal-lead { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--smt-mute); }
.smt-field { margin-bottom: 14px; }
.smt-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.smt-field label small { color: var(--smt-mute); font-weight: 400; }
.smt-field input, .smt-field textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--smt-line); border-radius: 10px;
  font-family: var(--smt-font); font-size: 14px; color: var(--smt-ink); background: #fff;
  box-sizing: border-box; resize: vertical;
}
.smt-field input:focus, .smt-field textarea:focus { outline: none; border-color: var(--smt-teal); }
.smt-row { display: flex; gap: 12px; }
.smt-row .smt-field { flex: 1; }
.smt-modal-err {
  margin: 4px 0 12px; padding: 10px 12px; border-radius: 8px;
  background: #fde8e8; color: #9b1c1c; font-size: 13px;
}
.smt-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.smt-btn {
  padding: 12px 22px; border: none; border-radius: 999px;
  font-family: var(--smt-font); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all 0.15s ease;
}
.smt-btn-primary { background: var(--smt-teal); color: #fff; }
.smt-btn-primary:hover { background: var(--smt-teal-bright); }
.smt-btn-primary:disabled { opacity: 0.6; cursor: default; }
.smt-btn-ghost { background: transparent; color: var(--smt-ink); border: 1px solid var(--smt-line); }
.smt-btn-ghost:hover { border-color: var(--smt-ink); }

@media (max-width: 480px) {
  .smt-row { flex-direction: column; gap: 0; }
  .smt-modal-panel { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .smt-chat-launcher, .smt-chat-panel, .smt-modal, .smt-chat-launcher-dot,
  .smt-chat-bubble.typing span { transition: none; animation: none; }
}