/**
 * AI Front Desk - the widget.
 *
 * Every selector is namespaced .fd- so it cannot bleed into a host site, and
 * every colour reads a host variable with its own fallback, so dropping this
 * into a site with a different palette needs no edits here.
 *
 * Every size is a multiple of 8, with 4 used only where 8 overshoots.
 */

.fd-mount {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 600;
  font-family: var(--font-body, system-ui, sans-serif);
}

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

.fd-launch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border: none;
  border-radius: 32px;
  background: var(--fd-accent, var(--gold, #D4AF37));
  color: var(--fd-on-accent, var(--navy, #0B1F3A));
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  box-shadow: var(--shadow, 0 4px 24px rgba(0, 0, 0, 0.18));
}

.fd-launch:hover  { filter: brightness(1.08); }
.fd-open .fd-launch { display: none; }
.fd-launch:focus-visible { outline: 3px solid var(--fd-on-accent, #0B1F3A); outline-offset: 2px; }
.fd-launch-icon   { font-size: 20px; line-height: 1; }

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

.fd-panel {
  display: flex;
  flex-direction: column;
  width: 384px;
  max-width: calc(100vw - 32px);
  height: 512px;
  /* dvh, not vh: on a phone 100vh is the viewport WITHOUT the address bar, so a
     vh-sized panel anchored to the bottom pushes its own header, and the close
     button in it, off the top of the screen. dvh tracks the visible area. The
     vh line stays first as the fallback for browsers without dvh. */
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  border-radius: 16px;
  overflow: hidden;
  background: var(--fd-surface, #FFFFFF);
  color: var(--fd-text, var(--text-dark, #1a1a2e));
  box-shadow: var(--shadow-lg, 0 8px 40px rgba(0, 0, 0, 0.28));
  animation: fd-rise 240ms ease;
}

/* display:flex above is an author rule, so it beats the browser's own
   [hidden] rule and the panel rendered open on every page load. */
.fd-panel[hidden] { display: none; }

.fd-panel.fd-calm { animation: none; }

@keyframes fd-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .fd-panel { animation: none; }
}

.fd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--fd-header, var(--navy, #0B1F3A));
  color: var(--fd-on-header, #FFFFFF);
  cursor: pointer;
}

.fd-head-title { font-weight: 600; font-size: 16px; }

.fd-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.fd-close:hover { background: rgba(255, 255, 255, 0.16); }
.fd-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

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

.fd-log {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--fd-log-bg, #F4F6FB);
}

.fd-msg { display: flex; }
.fd-msg-you { justify-content: flex-end; }

.fd-bubble {
  margin: 0;
  padding: 8px 16px;
  max-width: 272px;
  border-radius: 16px;
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fd-msg-bot .fd-bubble {
  background: var(--fd-surface, #FFFFFF);
  color: var(--fd-text, #1a1a2e);
  border-bottom-left-radius: 4px;
}

.fd-msg-you .fd-bubble {
  background: var(--fd-accent, var(--gold, #D4AF37));
  color: var(--fd-on-accent, var(--navy, #0B1F3A));
  border-bottom-right-radius: 4px;
}

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

.fd-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 16px;
  background: var(--fd-surface, #FFFFFF);
  border-top: 1px solid var(--fd-rule, #E0E4EC);
}

.fd-input {
  flex: 1;
  padding: 8px 16px;
  border: 1px solid var(--fd-rule, #E0E4EC);
  border-radius: 16px;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  resize: none;
  color: inherit;
  background: var(--fd-surface, #FFFFFF);
}

.fd-input:focus-visible { outline: 2px solid var(--fd-accent, #D4AF37); outline-offset: 0; }

.fd-send {
  padding: 8px 24px;
  border: none;
  border-radius: 16px;
  background: var(--fd-accent, var(--gold, #D4AF37));
  color: var(--fd-on-accent, var(--navy, #0B1F3A));
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}

.fd-send:disabled { opacity: 0.6; cursor: default; }
.fd-send:focus-visible { outline: 2px solid var(--fd-text, #1a1a2e); outline-offset: 2px; }

/* The honeypot. Off screen rather than display:none, so a bot that reads the
   computed style still finds a field worth filling. */
.fd-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

@media (max-width: 480px) {
  .fd-mount  { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .fd-panel  {
    width: calc(100vw - 32px);
    height: calc(100vh - 96px);
    height: calc(100dvh - 96px - env(safe-area-inset-bottom, 0px));
  }
  .fd-bubble { max-width: 240px; }
  .fd-launch-text { display: none; }
  .fd-launch { padding: 16px; border-radius: 50%; }
}