/* ─────────────────────────────────────────────────────────────
   chat-widget.css — Celtic Lasers site assistant
   Frontend only. Answers come from a Make.com webhook (chat-widget.js).
   Uses this site's own design tokens (styles.css :root) — load after it.
   ───────────────────────────────────────────────────────────── */

.faqbot{
  position:fixed;z-index:999;
  right:clamp(14px,4vw,28px);
  bottom:clamp(14px,4vw,28px);
  font-family:"Inter",system-ui,sans-serif;
}

/* Launcher bubble */
.faqbot-bubble{
  position:relative;width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;
  background:var(--forest);
  box-shadow:var(--shadow-2);
  display:grid;place-items:center;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .3s var(--ease);
}
.faqbot-bubble:hover{transform:translateY(-3px) scale(1.04);background:var(--forest-deep)}
.faqbot-bubble:active{transform:translateY(0) scale(.96)}
.faqbot-bubble svg{width:26px;height:26px;color:#f7f4ee}
.faqbot-bubble .faqbot-icon-close{display:none}
.faqbot.is-open .faqbot-bubble .faqbot-icon-chat{display:none}
.faqbot.is-open .faqbot-bubble .faqbot-icon-close{display:block}

/* Proactive teaser — a small "need help?" callout above the launcher */
.faqbot-teaser{
  position:absolute;right:0;bottom:calc(100% + 14px);
  display:flex;align-items:center;gap:9px;
  width:max-content;max-width:min(240px,calc(100vw - 96px));
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  box-shadow:var(--shadow-2);padding:9px 12px 9px 9px;cursor:pointer;
  font:inherit;text-align:left;
  opacity:0;transform:translateY(8px) scale(.96);pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.faqbot.show-teaser .faqbot-teaser{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.faqbot.is-open .faqbot-teaser,.faqbot.has-interacted .faqbot-teaser{display:none}
.faqbot-teaser-logo{width:26px;height:26px;object-fit:contain;flex:none;border-radius:50%;background:var(--bg);border:1px solid var(--line);padding:3px}
.faqbot-teaser-text{font-size:.82rem;font-weight:600;color:var(--ink);line-height:1.25}
.faqbot-teaser-close{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:var(--ink-soft);margin-left:2px}
.faqbot-teaser-close:hover{background:var(--line);color:var(--ink)}
.faqbot-teaser-close svg{width:11px;height:11px}

.faqbot-ping{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(169,130,61,.55);animation:faqbot-ping 2.6s cubic-bezier(0,.5,.5,1) infinite;pointer-events:none}
.faqbot.has-interacted .faqbot-ping,.faqbot.is-open .faqbot-ping{display:none}
@keyframes faqbot-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}

.faqbot-badge{position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;background:var(--gold);border:2px solid var(--bg)}
.faqbot.has-interacted .faqbot-badge{display:none}

/* Panel */
.faqbot-panel{
  position:absolute;right:0;bottom:calc(100% + 14px);
  width:min(372px,calc(100vw - 28px));
  max-height:min(560px,72vh);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-3);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.faqbot.is-open .faqbot-panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

.faqbot-header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.4);flex:none}
.faqbot-avatar{width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;flex:none;overflow:hidden}
.faqbot-avatar img{width:66%;height:66%;object-fit:contain}
.faqbot-header-text{line-height:1.25;min-width:0}
.faqbot-header-title{font-weight:600;font-size:.92rem;color:var(--ink)}
.faqbot-header-sub{font-size:.74rem;color:var(--ink-soft);display:flex;align-items:center;gap:5px}
.faqbot-header-sub .dot-live{width:6px;height:6px;border-radius:50%;background:#2ecc71;box-shadow:0 0 0 2px rgba(46,204,113,.18);flex:none}
.faqbot-close{margin-left:auto;flex:none;width:28px;height:28px;border-radius:8px;border:0;background:transparent;color:var(--ink-soft);display:grid;place-items:center;cursor:pointer}
.faqbot-close:hover{background:var(--line);color:var(--ink)}
.faqbot-close svg{width:16px;height:16px}

.faqbot-messages{flex:1;overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.faqbot-msg{max-width:86%;padding:9px 13px;border-radius:14px;font-size:.86rem;line-height:1.5;animation:faqbot-rise .26s var(--ease) both}
@keyframes faqbot-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.faqbot-msg--bot{align-self:flex-start;background:var(--bg-2);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px}
.faqbot-msg--user{align-self:flex-end;background:var(--forest);color:#f7f4ee;font-weight:500;border-bottom-right-radius:4px}
.faqbot-msg--error{border-color:var(--clay);background:#faf1ec}

.faqbot-typing{align-self:flex-start;display:flex;gap:4px;padding:11px 14px;border-radius:14px;border-bottom-left-radius:4px;background:var(--bg-2);border:1px solid var(--line)}
.faqbot-typing span{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);animation:faqbot-bounce 1.1s ease-in-out infinite}
.faqbot-typing span:nth-child(2){animation-delay:.15s}
.faqbot-typing span:nth-child(3){animation-delay:.3s}
@keyframes faqbot-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

.faqbot-chips{display:flex;flex-wrap:nowrap;gap:7px;padding:4px 14px 12px;flex:none;max-height:60px;opacity:1;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;transition:max-height .2s var(--ease),opacity .16s var(--ease),padding .2s var(--ease)}
.faqbot-chips.is-hidden{max-height:0;opacity:0;padding-top:0;padding-bottom:0}
.faqbot-chips::-webkit-scrollbar{display:none}
.faqbot-chip{flex:none;white-space:nowrap;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:.78rem;line-height:1.3;padding:7px 12px;border-radius:999px;cursor:pointer;transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);text-align:left}
.faqbot-chip:hover{border-color:var(--gold-soft);background:rgba(169,130,61,.08);transform:translateY(-1px)}
.faqbot-chip--contact{border-color:var(--gold)}

.faqbot-composer{display:flex;align-items:center;gap:8px;padding:10px;border-top:1px solid var(--line);flex:none}
.faqbot-input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;font-size:.85rem;color:var(--ink)}
.faqbot-input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.faqbot-input::placeholder{color:var(--ink-soft)}
.faqbot-input[disabled]{opacity:.6}
.faqbot-send{flex:none;width:36px;height:36px;border-radius:10px;border:none;background:var(--forest);display:grid;place-items:center;cursor:pointer;transition:transform .16s var(--ease),background .3s var(--ease)}
.faqbot-send:hover{transform:scale(1.06);background:var(--forest-deep)}
.faqbot-send[disabled]{opacity:.5;cursor:default;transform:none}
.faqbot-send svg{width:16px;height:16px;color:#f7f4ee}

.faqbot-foot{padding:7px 14px 10px;font-size:.68rem;line-height:1.5;color:var(--ink-soft);text-align:center;flex:none}
.faqbot-foot a{color:inherit;text-decoration:underline;text-underline-offset:2px}

@media (max-width:480px){
  .faqbot{right:14px;bottom:14px}
  .faqbot-panel{position:fixed;right:10px;left:10px;bottom:88px;width:auto;max-height:76vh}
}

/* Lift the launcher above the sticky mobile action bar so it never covers the Call button */
@media (max-width:860px){
  body:has(.action-bar) .faqbot{bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (max-width:480px){
  body:has(.action-bar) .faqbot-panel{bottom:calc(158px + env(safe-area-inset-bottom));max-height:calc(100vh - 190px)}
}

.faqbot-bubble:focus-visible,.faqbot-chip:focus-visible,.faqbot-send:focus-visible,.faqbot-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .faqbot-ping{animation:none;display:none}
  .faqbot-panel,.faqbot-msg,.faqbot-bubble{animation:none !important;transition:opacity .12s linear !important;transform:none !important}
}