/**
 * 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;
}

/* ---- thinking ---- */

.fd-thinking .fd-bubble {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 16px;
}

.fd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.24;
  animation: fd-blink 1200ms infinite ease-in-out;
}

.fd-dot:nth-child(2) { animation-delay: 160ms; }
.fd-dot:nth-child(3) { animation-delay: 320ms; }

@keyframes fd-blink {
  0%, 80%, 100% { opacity: 0.24; }
  40%           { opacity: 1; }
}

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

/* ---- 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;
}

/* ---- greeting cloud ---- */

/* Phones only, drawn by the script. A quarter of the screen at most, because
   its whole job is to be seen without covering the page. */
.fd-hello {
  position: absolute;
  right: 0;
  bottom: 72px;
  width: 272px;   /* explicit: .fd-mount is only as wide as the launcher, so a
                     max-width alone shrank this to a column of single words */
  max-width: 72vw;
  max-height: 25vh;
  overflow: hidden;
  margin: 0;
  padding: 16px;
  border: none;
  border-radius: 16px;
  border-bottom-right-radius: 4px;
  background: var(--fd-surface, #FFFFFF);
  color: var(--fd-text, #1a1a2e);
  box-shadow: var(--shadow, 0 4px 24px rgba(0, 0, 0, 0.18));
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  animation: fd-rise 240ms ease;
}

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

/* ---- 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%; }
}