/* ==========================================================================
   Dial the Fox — Firstdial Connect chatbot
   ========================================================================== */
.fdc-root {
  --fdc-navy: #0b1220;
  --fdc-ink: #0f172a;
  --fdc-indigo: #4f46e5;
  --fdc-indigo-deep: #3730a3;
  --fdc-orange: #ff6b35;
  --fdc-orange-deep: #e85a24;
  --fdc-line: #e2e8f0;
  --fdc-bg: #f6f8fc;
  --fdc-muted: #64748b;
  --fdc-edge: clamp(14px, 3vw, 28px);
  --fdc-bar: 62px;            /* clears the WhatsApp / call buttons */
  --fdc-fox-w: 152px;
  --fdc-fox-h: 184px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--fdc-ink);
  -webkit-font-smoothing: antialiased;
}
.fdc-root *, .fdc-root *::before, .fdc-root *::after { box-sizing: border-box; }
.fdc-root button { font-family: inherit; }

/* ---------- Launcher (the fox itself) ---------- */
.fdc-launcher {
  position: fixed;
  z-index: 9998;
  right: calc(var(--fdc-edge) + var(--fdc-bar));
  bottom: clamp(6px, 1.6vw, 14px);
  width: var(--fdc-fox-w);
  height: var(--fdc-fox-h);
}
.fdc-fab {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 28px;
}
.fdc-fab:focus-visible { outline: 3px solid var(--fdc-indigo); outline-offset: 2px; }
.fdc-fox {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.fdc-canvas { display: block; position: relative; z-index: 2; opacity: 0; transition: opacity .4s ease; }
.fdc-fox.is-live .fdc-canvas { opacity: 1; }
.fdc-poster {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: flex-end; justify-content: center;
  transition: opacity .4s ease;
}
.fdc-poster svg { width: 88%; height: auto; display: block; }
.fdc-fox.is-live .fdc-poster { opacity: 0; pointer-events: none; }
.fdc-launcher:hover .fdc-poster svg { animation: fdc-hop .5s ease; }
@keyframes fdc-hop { 40% { transform: translateY(-8px) rotate(-2deg); } }

.fdc-badge {
  position: absolute; z-index: 3; top: 18%; right: 6%;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--fdc-orange); border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(11, 18, 32, .3);
  opacity: 0; transform: scale(.4); transition: opacity .25s, transform .25s;
}
.fdc-badge.is-on { opacity: 1; transform: scale(1); }
.fdc-badge::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--fdc-orange); animation: fdc-ping 1.8s ease-out infinite;
}
@keyframes fdc-ping { from { transform: scale(.8); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }

/* Teaser bubble */
.fdc-bubble {
  position: absolute; z-index: 4;
  right: 70%; bottom: 76%;
  width: max-content; max-width: min(250px, calc(100vw - 120px));
  padding: 12px 34px 12px 14px;
  border-radius: 18px 18px 4px 18px;
  background: #fff; color: var(--fdc-ink);
  font-size: .8125rem; line-height: 1.45; font-weight: 500;
  box-shadow: 0 14px 34px rgba(11, 18, 32, .2), 0 0 0 1px rgba(15, 23, 42, .06);
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.94); transform-origin: bottom right;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2, .9, .3, 1.2), visibility .28s;
  cursor: pointer;
}
.fdc-bubble::after { content: ''; position: absolute; right: 16px; bottom: -7px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); border-radius: 0 0 4px 0; box-shadow: 3px 3px 6px rgba(15,23,42,.06); }
.fdc-bubble.is-on { opacity: 1; visibility: visible; transform: none; }
.fdc-bubble-x {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--fdc-muted); cursor: pointer;
  display: grid; place-items: center;
}
.fdc-bubble-x:hover { background: #f1f5f9; color: var(--fdc-ink); }
.fdc-bubble-x:focus-visible { outline: 2px solid var(--fdc-indigo); }
.fdc-bubble-x svg { width: 12px; height: 12px; }

/* ---------- Panel ---------- */
.fdc-panel {
  position: fixed; z-index: 10000;
  right: var(--fdc-edge); bottom: var(--fdc-edge);
  width: min(404px, calc(100vw - 2 * var(--fdc-edge)));
  height: min(690px, calc(100vh - 40px));
  height: min(690px, calc(100dvh - 40px));
  display: flex; flex-direction: column;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 34px 80px rgba(11, 18, 32, .34), 0 0 0 1px rgba(15, 23, 42, .08);
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0; transform: translateY(18px) scale(.95);
  transition: opacity .25s ease, transform .35s cubic-bezier(.2, .9, .3, 1.1);
}
.fdc-panel[hidden] { display: none; }
.fdc-panel.is-open { opacity: 1; transform: none; }

.fdc-head {
  position: relative; flex: 0 0 auto;
  display: flex; align-items: flex-end; gap: 4px;
  min-height: 152px; padding: 0 16px 0 6px;
  color: #fff; overflow: hidden;
  background:
    radial-gradient(120% 140% at 12% 100%, rgba(255, 107, 53, .34), transparent 55%),
    radial-gradient(90% 120% at 100% 0%, rgba(99, 102, 241, .55), transparent 60%),
    linear-gradient(160deg, #101a33 0%, #0b1220 100%);
}
/* concentric "dial" rings echo the Firstdial brand */
.fdc-head::before, .fdc-head::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .13);
}
.fdc-head::before { width: 220px; height: 220px; right: -70px; top: -96px; box-shadow: 0 0 0 26px rgba(255, 255, 255, .035), 0 0 0 52px rgba(255, 255, 255, .025); }
.fdc-head::after { width: 120px; height: 120px; left: -34px; bottom: -58px; }
.fdc-head-stage { position: relative; z-index: 1; flex: 0 0 148px; width: 148px; height: 148px; align-self: flex-end; }
.fdc-head-stage .fdc-fox { width: 148px; height: 148px; }
.fdc-head-stage .fdc-poster svg { width: 80%; }
.fdc-head-info { position: relative; z-index: 1; flex: 1; min-width: 0; padding: 0 0 22px 4px; }
.fdc-root .fdc-name { margin: 0; padding: 0; color: #fff; font: 800 1.35rem/1.1 'Plus Jakarta Sans', 'Inter', sans-serif; letter-spacing: -.02em; text-transform: none; }
.fdc-root .fdc-role { margin: 4px 0 10px; color: #b6c2d9; font-size: .8125rem; line-height: 1.35; }
.fdc-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); color: #d6e6dc; font-size: .6875rem; font-weight: 600; }
.fdc-status i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); }
.fdc-close {
  position: absolute; z-index: 2; top: 10px; right: 10px;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: background .2s;
}
.fdc-close:hover { background: rgba(255, 255, 255, .22); }
.fdc-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fdc-close svg { width: 16px; height: 16px; }

/* ---------- Conversation ---------- */
.fdc-log {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 16px 8px; background: var(--fdc-bg);
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
}
.fdc-log:focus-visible { outline: 2px solid var(--fdc-indigo); outline-offset: -2px; }
.fdc-msg { display: flex; flex-direction: column; max-width: 86%; animation: fdc-pop .3s cubic-bezier(.2, .9, .3, 1.15) both; }
.fdc-msg.is-bot { align-self: flex-start; align-items: flex-start; }
.fdc-msg.is-user { align-self: flex-end; align-items: flex-end; }
.fdc-msg.is-restored { animation: none; }
@keyframes fdc-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.fdc-root .fdc-text {
  margin: 0; padding: 11px 14px; font-size: .9rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.fdc-text strong { font-weight: 700; }
.fdc-root .is-bot .fdc-text { background: #fff; color: var(--fdc-ink); border: 1px solid var(--fdc-line); border-radius: 18px 18px 18px 5px; box-shadow: 0 2px 8px rgba(15, 23, 42, .04); }
.fdc-root .is-user .fdc-text { background: linear-gradient(135deg, var(--fdc-indigo), #5b54f0); color: #fff; border-radius: 18px 18px 5px 18px; }
.fdc-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.fdc-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px;
  border-radius: 99px; background: var(--fdc-orange); color: #fff !important; text-decoration: none !important;
  font-size: .8125rem; font-weight: 700; line-height: 1;
  box-shadow: 0 6px 14px rgba(255, 107, 53, .28); transition: transform .15s, background .15s;
}
.fdc-link:hover { background: var(--fdc-orange-deep); transform: translateY(-1px); }
.fdc-link:focus-visible { outline: 3px solid var(--fdc-indigo); outline-offset: 2px; }
.fdc-link.is-alt { background: #fff; color: var(--fdc-indigo-deep) !important; border: 1px solid #c7d2fe; box-shadow: none; }
.fdc-link.is-alt:hover { background: #eef2ff; }
.fdc-link svg { width: 14px; height: 14px; fill: currentColor; }

.fdc-typing { align-self: flex-start; display: flex; gap: 5px; padding: 14px 16px; background: #fff; border: 1px solid var(--fdc-line); border-radius: 18px 18px 18px 5px; animation: fdc-pop .25s ease both; }
.fdc-typing i { width: 7px; height: 7px; border-radius: 50%; background: #a5b0c5; animation: fdc-dot 1.1s ease-in-out infinite; }
.fdc-typing i:nth-child(2) { animation-delay: .15s; }
.fdc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes fdc-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ---------- Quick replies, input, footer ---------- */
.fdc-chips { flex: 0 0 auto; display: flex; gap: 7px; padding: 8px 16px 10px; background: var(--fdc-bg); flex-wrap: wrap; max-height: 116px; overflow-y: auto; }
.fdc-chips:empty { display: none; }
.fdc-chip {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 99px; border: 1px solid #c7d2fe; background: #fff; color: var(--fdc-indigo-deep);
  font-size: .8125rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, transform .15s;
  animation: fdc-pop .3s ease both;
}
.fdc-chip:hover { background: var(--fdc-indigo); color: #fff; border-color: var(--fdc-indigo); transform: translateY(-1px); }
.fdc-chip:focus-visible { outline: 3px solid var(--fdc-indigo); outline-offset: 2px; }

.fdc-form { position: relative; z-index: 1; flex: 0 0 auto; display: flex; gap: 8px; padding: 10px 12px; background: #fff; border-top: 1px solid var(--fdc-line); }
.fdc-input {
  flex: 1; min-width: 0; height: 46px; padding: 0 16px; border: 1px solid #d5dce8; border-radius: 99px; background: #f8fafc;
  font: inherit; font-size: 16px; color: var(--fdc-ink); outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.fdc-input::placeholder { color: #8d99ae; }
.fdc-input:focus { border-color: var(--fdc-indigo); background: #fff; box-shadow: 0 0 0 3px rgba(79, 70, 229, .14); }
.fdc-send {
  flex: 0 0 46px; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(135deg, var(--fdc-orange), #f97316); color: #fff; display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(255, 107, 53, .3); transition: transform .15s, filter .15s;
}
.fdc-send:hover { transform: scale(1.06); filter: brightness(1.05); }
.fdc-send:focus-visible { outline: 3px solid var(--fdc-indigo); outline-offset: 2px; }
.fdc-send svg { width: 20px; height: 20px; fill: currentColor; }
.fdc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.fdc-foot { flex: 0 0 auto; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 0 12px 11px; background: #fff; color: var(--fdc-muted); font-size: .75rem; }
.fdc-foot a { color: var(--fdc-indigo-deep); font-weight: 600; text-decoration: none; }
.fdc-foot a:hover { text-decoration: underline; }

.fdc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Mobile: bottom sheet ---------- */
@media (max-width: 600px) {
  .fdc-root { --fdc-bar: 54px; --fdc-fox-w: 104px; --fdc-fox-h: 128px; }
  .fdc-launcher { bottom: 4px; }
  .fdc-panel {
    right: 0; left: 0; bottom: 0; width: 100%;
    height: calc(100vh - 12px); height: calc(100dvh - 12px);
    border-radius: 22px 22px 0 0;
  }
  .fdc-head { min-height: 132px; }
  .fdc-head-stage, .fdc-head-stage .fdc-fox { width: 128px; height: 128px; flex-basis: 128px; }
  .fdc-name { font-size: 1.2rem; }
  .fdc-msg { max-width: 90%; }
}
@media (max-height: 560px) {
  .fdc-head { min-height: 104px; }
  .fdc-head-stage, .fdc-head-stage .fdc-fox { width: 104px; height: 104px; flex-basis: 104px; }
  .fdc-role { display: none; }
}
html.fdc-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .fdc-panel, .fdc-bubble, .fdc-msg, .fdc-chip, .fdc-typing { transition: none !important; animation: none !important; }
  .fdc-badge::after, .fdc-typing i { animation: none !important; }
  .fdc-log { scroll-behavior: auto; }
}