/* =========================================================================
 * FrontDesk AI — Conversational Widget  ·  styles
 * All classes are namespaced under `.fdw-` so nothing collides with the host
 * site. Colors are driven by CSS variables set from the widget config.
 * ========================================================================= */

.fdw-root {
  --fdw-accent: #2f5586;
  --fdw-accent-soft: rgba(47, 85, 134, .12);
  --fdw-accent-ring: rgba(47, 85, 134, .30);
  --fdw-online: #16a34a;
  --fdw-online-dot: #22c55e;
  --fdw-bg: #ffffff;
  --fdw-ink: #0f172a;
  --fdw-ink-soft: #64748b;
  --fdw-line: #e9edf3;
  --fdw-surface: #f6f8fb;
  --fdw-radius: 22px;
  --fdw-shadow: 0 24px 60px -12px rgba(15, 23, 42, .28), 0 6px 18px -8px rgba(15, 23, 42, .18);

  position: fixed;
  z-index: 2147483000;
  bottom: 24px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.fdw-bottom-right { right: 24px; }
.fdw-bottom-left  { left: 24px; }

/* ---- Launcher card: picture on the left, help text above two icon buttons ---- */
.fdw-launcher {
  display: flex; align-items: center; gap: 9px;
  /* Hug the content — the card is only as wide/tall as the picture and text need. */
  width: fit-content;
  /* Thin frame: 5px inset + the buttons' own 7px radius keeps the corners
     concentric with the card's 12px radius. */
  padding: 5px;
  border: 1px solid var(--fdw-line); border-radius: 12px;
  background: var(--fdw-bg); margin-left: auto;
  box-shadow: 0 12px 30px -10px rgba(15, 23, 42, .30), 0 3px 8px rgba(15, 23, 42, .12);
  transition: opacity .18s ease, transform .18s ease;
  /* Draggable: no text selection, and touch drags the card instead of scrolling. */
  user-select: none; touch-action: none; cursor: grab;
}
.fdw-bottom-left .fdw-launcher { margin-left: 0; margin-right: auto; }
.fdw-root[data-dragging="true"] .fdw-launcher {
  cursor: grabbing;
  box-shadow: 0 20px 40px -12px rgba(15, 23, 42, .42), 0 4px 10px rgba(15, 23, 42, .16);
}
.fdw-launcher-avatar { position: relative; display: inline-flex; flex: 0 0 auto; }
.fdw-launcher-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* [NOTE]: padding-right matters here — the card is width:fit-content, so the
   text sets the card's width. Shrinking the font alone would shrink the card
   too and leave the same tight 5px gap; this adds real breathing room before
   the right border. */
.fdw-launcher-text {
  font-size: 12.5px; font-weight: 640; line-height: 1.15;
  color: var(--fdw-ink); white-space: nowrap; padding-right: 5px;
}
.fdw-launcher-actions { display: flex; gap: 6px; }
.fdw-launcher-btn {
  /* Sized strictly to the icon — deliberately not stretched to the card width. */
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--fdw-line); border-radius: 7px;
  background: var(--fdw-accent-soft); color: var(--fdw-accent);
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.fdw-launcher-btn svg { width: 15px; height: 15px; }
.fdw-launcher-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--fdw-accent) 45%, var(--fdw-line));
}
.fdw-launcher-btn-primary { background: var(--fdw-accent); border-color: var(--fdw-accent); color: #fff; }
.fdw-launcher-btn-primary:hover { background: color-mix(in srgb, var(--fdw-accent) 88%, #000 8%); }
/* Hide the card while the panel is open. Opacity (not display) keeps the card's
   height in the layout so the panel above it does not jump. */
.fdw-root[data-open="true"] .fdw-launcher { opacity: 0; pointer-events: none; transform: translateY(6px); }

/* Hover label over the picture ("AI Assistant") — shows on hover, hides on leave. */
.fdw-tip {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  background: #0f172a; color: #fff; font-size: 12.5px; font-weight: 560; line-height: 1;
  padding: 7px 11px; border-radius: 9px; white-space: nowrap;
  box-shadow: 0 8px 20px -6px rgba(15, 23, 42, .35);
  opacity: 0; transform: translateX(-50%) translateY(4px); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.fdw-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px;
  border: 5px solid transparent; border-top-color: #0f172a;
}
.fdw-launcher-avatar:hover .fdw-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Panel shell ---- */
.fdw-panel {
  position: absolute;
  /* Open in the corner the card occupies (the card is hidden while open), so the
     window stays low and aligned with the icon. Anchoring it *above* the card
     instead reserved ~136px of dead space underneath and pushed the window up. */
  bottom: 0;
  width: 318px;
  max-width: calc(100vw - 32px);
  height: auto;
  /* Keep clear of the top edge: 24px bottom offset + 24px breathing room. */
  max-height: calc(100vh - 48px);
  background: var(--fdw-bg);
  border-radius: var(--fdw-radius);
  box-shadow: var(--fdw-shadow);
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(12px) scale(.96);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
  display: flex;
}
.fdw-bottom-right .fdw-panel { right: 0; }
.fdw-bottom-left  .fdw-panel { left: 0; transform-origin: bottom left; }
/* [NOTE]: Once the card is dragged, it can sit anywhere. These flips let the
   panel open downward and/or leftward so it always stays inside the viewport;
   updatePanelPlacement() in the JS sets the attributes. */
.fdw-root[data-vflip="down"] .fdw-panel { bottom: auto; top: 0; transform-origin: top right; }
.fdw-root[data-hflip="left"] .fdw-panel { right: auto; left: 0; }
.fdw-root[data-hflip="right"] .fdw-panel { left: auto; right: 0; }
.fdw-root[data-vflip="up"][data-hflip="left"] .fdw-panel { transform-origin: bottom left; }
.fdw-root[data-vflip="down"][data-hflip="left"] .fdw-panel { transform-origin: top left; }
.fdw-root[data-open="true"] .fdw-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.fdw-view { display: none; flex-direction: column; width: 100%; }
.fdw-view[data-active="true"] { display: flex; }
/* Chat/voice get a tall stage, capped by the same space the panel has. */
.fdw-view[data-view="text"], .fdw-view[data-view="voice"] {
  height: 520px;
  max-height: calc(100vh - 48px);
}

/* ---- Online status (used in the chat header) ---- */
.fdw-online { color: var(--fdw-online); display: inline-flex; align-items: center; gap: 6px; }
.fdw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fdw-online-dot); box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }

/* ---- Session header ---- */
.fdw-header { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--fdw-line); background: var(--fdw-bg); }
.fdw-header-id { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; }
.fdw-header-text { display: flex; flex-direction: column; line-height: 1.25; }
.fdw-header-name { font-size: 14.5px; font-weight: 640; color: var(--fdw-ink); }
.fdw-header-sub { font-size: 12px; color: var(--fdw-ink-soft); }
.fdw-header-dark { background: transparent; border-bottom-color: transparent; }
.fdw-header-dark .fdw-header-name, .fdw-header-dark .fdw-header-sub { color: #fff; }
.fdw-header-dark .fdw-header-sub { opacity: .8; }
.fdw-header-dark .fdw-icon-btn { color: rgba(255, 255, 255, .9); }
.fdw-header-dark .fdw-icon-btn:hover { background: rgba(255, 255, 255, .14); }

.fdw-icon-btn { flex: 0 0 auto; width: 34px; height: 34px; border: none; border-radius: 10px; background: transparent; color: var(--fdw-ink-soft); cursor: pointer; display: grid; place-items: center; transition: background .14s ease, color .14s ease; }
.fdw-icon-btn:hover { background: var(--fdw-surface); color: var(--fdw-ink); }

/* ---- Messages ---- */
.fdw-messages {
  flex: 1 1 auto; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px;
  background: radial-gradient(60% 40% at 100% 0, var(--fdw-accent-soft), transparent 70%), var(--fdw-surface);
  scrollbar-width: thin;
}
.fdw-empty { margin: auto; text-align: center; color: var(--fdw-ink-soft); display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 13.5px; max-width: 240px; }
.fdw-bubble-row { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.fdw-bubble-row.fdw-user { justify-content: flex-end; }
.fdw-bubble { padding: 10px 13px; border-radius: 16px; font-size: 14px; line-height: 1.45; max-width: 78%; word-wrap: break-word; white-space: pre-wrap; }
.fdw-agent .fdw-bubble { background: var(--fdw-bg); color: var(--fdw-ink); border: 1px solid var(--fdw-line); border-bottom-left-radius: 6px; }
.fdw-user .fdw-bubble { background: var(--fdw-accent); color: #fff; border-bottom-right-radius: 6px; box-shadow: 0 6px 14px -8px var(--fdw-accent-ring); }
.fdw-typing { display: inline-flex; gap: 4px; align-items: center; }
.fdw-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--fdw-ink-soft); opacity: .5; animation: fdw-blink 1.2s infinite ease-in-out; }
.fdw-typing span:nth-child(2) { animation-delay: .2s; }
.fdw-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes fdw-blink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: .9; transform: translateY(-2px); } }

/* ---- Composer ---- */
.fdw-composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--fdw-line); background: var(--fdw-bg); }
.fdw-input {
  flex: 1 1 auto; width: 0; min-width: 0; resize: none; overflow-y: hidden;
  border: 1px solid var(--fdw-line); border-radius: 14px; padding: 10px 12px;
  font: inherit; font-size: 14px; line-height: 1.4; color: var(--fdw-ink); background: var(--fdw-surface);
  max-height: 96px; outline: none; transition: border-color .14s ease, background .14s ease;
}
.fdw-input:focus { border-color: color-mix(in srgb, var(--fdw-accent) 55%, var(--fdw-line)); background: var(--fdw-bg); }
.fdw-input::placeholder { color: var(--fdw-ink-soft); }
.fdw-attach { flex: 0 0 auto; width: 42px; height: 42px; border: none; border-radius: 12px; background: var(--fdw-surface); color: var(--fdw-ink-soft); cursor: pointer; display: grid; place-items: center; transition: background .14s ease, color .14s ease; }
.fdw-attach:hover { background: var(--fdw-accent-soft); color: var(--fdw-accent); }
.fdw-file { display: inline-flex; align-items: center; gap: 8px; }
.fdw-file-ic { flex: 0 0 auto; display: grid; place-items: center; }
.fdw-file-ic svg { width: 16px; height: 16px; }
.fdw-send { flex: 0 0 auto; width: 42px; height: 42px; border: none; border-radius: 12px; background: var(--fdw-accent); color: #fff; cursor: pointer; display: grid; place-items: center; transition: transform .14s ease, opacity .14s ease; }
.fdw-send:hover:not(:disabled) { transform: translateY(-1px); }
.fdw-send:disabled { opacity: .4; cursor: default; }

/* ---- Voice stage ---- */
.fdw-voice { background: radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--fdw-accent) 62%, #0b1020), #0b1020 70%); color: #fff; }
.fdw-voice-stage { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 20px; text-align: center; }
.fdw-voice-avatar { position: relative; display: grid; place-items: center; }
.fdw-voice-avatar .fdw-avatar { position: relative; z-index: 2; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.fdw-pulse { position: absolute; inset: 0; margin: auto; width: 128px; height: 128px; border-radius: 50%; background: color-mix(in srgb, var(--fdw-accent) 55%, transparent); opacity: 0; z-index: 1; }
.fdw-voice-avatar[data-active="true"] .fdw-pulse-1 { animation: fdw-ring 2.4s infinite ease-out; }
.fdw-voice-avatar[data-active="true"] .fdw-pulse-2 { animation: fdw-ring 2.4s infinite ease-out 1.2s; }
.fdw-voice-avatar[data-speaking="true"] .fdw-pulse-1 { animation-duration: 1.4s; }
.fdw-voice-avatar[data-speaking="true"] .fdw-pulse-2 { animation-duration: 1.4s; animation-delay: .7s; }
@keyframes fdw-ring { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.9); opacity: 0; } }
.fdw-voice-status { font-size: 15px; font-weight: 560; letter-spacing: .2px; }
/* Room for ~6 lines, then scrolls. A fixed pixel clip used to slice the last
   line in half, which read as broken text. */
.fdw-voice-caption {
  font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .82);
  max-width: 300px; max-height: 118px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent;
}
.fdw-voice-caption::-webkit-scrollbar { width: 4px; }
.fdw-voice-caption::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: 4px; }
.fdw-caption-role { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; opacity: .6; margin-bottom: 3px; }

/* ---- Voice controls ---- */
.fdw-voice-controls { display: flex; justify-content: center; gap: 40px; padding: 22px 20px 30px; }
.fdw-round-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; background: transparent; border: none; color: #fff; cursor: pointer; font: inherit; }
.fdw-round-btn > svg { padding: 16px; border-radius: 50%; background: rgba(255, 255, 255, .14); transition: background .15s ease, transform .15s ease; box-sizing: content-box; }
.fdw-round-btn:hover > svg { background: rgba(255, 255, 255, .24); transform: translateY(-1px); }
.fdw-round-btn[aria-pressed="true"] > svg { background: #fff; color: var(--fdw-accent); }
.fdw-round-danger > svg { background: #ef4444; }
.fdw-round-danger:hover > svg { background: #dc2626; }
.fdw-round-label { font-size: 12px; opacity: .85; }

/* ---- Calm notice (mic off / insecure) ---- */
/* The notice always shows inside the dark voice screen, so use light text. */
.fdw-notice { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 28px 26px; }
.fdw-notice-icon { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .12); }
.fdw-notice h4 { margin: 4px 0 0; font-size: 16px; color: #fff; }
.fdw-notice p { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .72); max-width: 280px; }
.fdw-primary-btn { margin-top: 8px; padding: 11px 20px; border: none; border-radius: 12px; background: var(--fdw-accent); color: #fff; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: transform .14s ease, filter .14s ease; }
.fdw-primary-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* ---- Avatar ---- */
.fdw-avatar { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, var(--fdw-accent), color-mix(in srgb, var(--fdw-accent) 60%, #000 12%)); color: #fff; }
.fdw-avatar-ring { box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
.fdw-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fdw-avatar-fallback { display: grid; place-items: center; width: 100%; height: 100%; color: rgba(255, 255, 255, .95); }
.fdw-avatar-fallback svg { width: 56%; height: 56%; }

/* ---- Spinner ---- */
.fdw-spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--fdw-accent-soft); border-top-color: var(--fdw-accent); animation: fdw-spin .8s linear infinite; }
@keyframes fdw-spin { to { transform: rotate(360deg); } }

/* ---- Small screens ---- */
@media (max-width: 480px) {
  .fdw-root { bottom: 16px; }
  .fdw-bottom-right { right: 16px; }
  .fdw-bottom-left { left: 16px; }
  .fdw-panel { width: calc(100vw - 24px); max-height: calc(100dvh - 32px); }
  .fdw-view[data-view="text"], .fdw-view[data-view="voice"] { height: calc(100dvh - 32px); }
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .fdw-panel, .fdw-fab, .fdw-choice, .fdw-send, .fdw-primary-btn { transition: none; }
  .fdw-pulse, .fdw-typing span, .fdw-spinner { animation: none; }
}