/* ============================================================================
   FEATURE: fy-marketing — agente de IA do Fy p/ NÃO assinantes.
   Widget flutuante + chat (visual; sem backend ainda). Self-contained: usa o DS
   via var(--token, fallback), então fica idêntico em qualquer página de marketing
   (com ou sem os tokens do DS — ex.: páginas de auth). Incluir junto de
   /fy-marketing.js (que injeta o HTML do widget).
   No frontend é sempre "o Fy"; no backend é um agente próprio. Futuro: fy-dashboard.
   ========================================================================== */
.fy-marketing{
  --fym-surface:var(--surface,#ffffff);
  --fym-accent:var(--accent,#8f4dcb);
  --fym-border:var(--border,oklch(92% 0.006 313 / 0.9));
  --fym-fg:var(--fg,oklch(20% 0.018 313));
  --fym-fg2:var(--fg-2,oklch(28% 0.018 313));
  --fym-bg-soft:var(--bg-soft,oklch(98% 0.005 313));
  --fym-bg-sunk:var(--bg-sunk,oklch(96% 0.004 313));
  --fym-shadow:var(--shadow-sm,0 1px 2px rgba(33,25,39,0.06));
  --fym-ease:var(--ease-out,cubic-bezier(0.22,1,0.36,1));
  position:fixed;right:clamp(16px,3vw,30px);bottom:calc(clamp(16px,3vw,30px) + env(safe-area-inset-bottom,0px) + var(--fym-vvb,0px));z-index:80;width:clamp(66px,8vw,88px);perspective:800px;pointer-events:none}
.fy-marketing-btn{pointer-events:auto;appearance:none;-webkit-appearance:none;border:none;background:transparent;cursor:pointer;padding:0;width:100%;display:block;transform-origin:bottom center;transition:filter .25s ease,transform .25s var(--fym-ease)}
.fy-marketing-btn img{display:block;width:100%;height:auto;pointer-events:none;filter:drop-shadow(0 16px 22px rgba(33,25,39,0.32))}
.fy-marketing-btn:hover{transform:translateY(-4px) scale(1.05)}
/* float idle (igual ao hero) quando já revelado e com o chat fechado */
.fy-marketing:not(.is-armed):not(.is-in):not(.is-chat-open) .fy-marketing-btn{animation:fyFloat 5s ease-in-out infinite}
.fy-marketing:not(.is-armed):not(.is-in):not(.is-chat-open) .fy-marketing-btn:hover{animation:none;transform:translateY(-4px) scale(1.05)}
.fy-marketing.is-armed .fy-marketing-btn{opacity:0}
.fy-marketing.is-in .fy-marketing-btn{animation:fyMarketingReveal 1150ms cubic-bezier(.17,.84,.32,1) both}
@keyframes fyMarketingReveal{0%{opacity:0;transform:translateY(170px) rotateY(0deg) scale(.3)}45%{opacity:1}100%{opacity:1;transform:translateY(0) rotateY(1080deg) scale(1)}}
@keyframes fyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* balão de boas-vindas (nudge) — ancorado acima do botão; clicável p/ abrir o chat */
.fy-marketing-bubble{pointer-events:auto;position:absolute;right:0;bottom:calc(100% + 14px);width:max-content;max-width:236px;background:var(--fym-surface);color:var(--fym-fg);border:1px solid var(--fym-border);border-radius:16px 16px 4px 16px;padding:13px 32px 13px 15px;box-shadow:0 16px 38px rgba(33,25,39,0.20);font-size:14px;line-height:1.45;font-weight:500;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px) scale(.95);transform-origin:bottom right;transition:opacity .3s var(--fym-ease),transform .3s var(--fym-ease),visibility .3s}
.fy-marketing.is-bubble-open .fy-marketing-bubble{opacity:1;visibility:visible;transform:none}
.fy-marketing-bubble p{margin:0}
.fy-marketing-bubble strong{color:var(--fym-accent)}
.fy-marketing-bubble::after{content:'';position:absolute;right:26px;bottom:-7px;width:13px;height:13px;background:var(--fym-surface);border-right:1px solid var(--fym-border);border-bottom:1px solid var(--fym-border);transform:rotate(45deg)}
.fy-marketing-close{position:absolute;top:7px;right:9px;border:none;background:transparent;font-size:17px;line-height:1;color:var(--fym-fg2);cursor:pointer;padding:2px 4px;border-radius:6px}
.fy-marketing-close:hover{color:var(--fym-fg);background:var(--fym-bg-sunk)}
/* painel de chat (liquid-glass) — ancorado acima do botão */
.fy-chat{pointer-events:auto;position:absolute;right:0;bottom:calc(100% + 14px);width:clamp(290px,86vw,380px);height:min(70vh,540px);display:flex;flex-direction:column;overflow:hidden;background:color-mix(in oklab,var(--fym-surface) 68%,transparent);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);border:1px solid color-mix(in oklab,var(--fym-border) 55%,transparent);border-radius:20px;box-shadow:0 30px 70px rgba(33,25,39,0.32),0 4px 14px rgba(33,25,39,0.14),inset 0 1px 0 rgba(255,255,255,0.4);transform-origin:bottom right;opacity:0;visibility:hidden;transform:translateY(14px) scale(.96);transition:opacity .26s var(--fym-ease),transform .26s var(--fym-ease),visibility .26s}
.fy-marketing.is-chat-open .fy-chat{opacity:1;visibility:visible;transform:none}
.fy-marketing.is-chat-open .fy-marketing-bubble{opacity:0;visibility:hidden}
.fy-chat-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border-bottom:1px solid color-mix(in oklab,var(--fym-border) 55%,transparent);background:linear-gradient(135deg,color-mix(in oklab,var(--fym-accent) 26%,transparent),transparent)}
.fy-chat-id{display:flex;align-items:center;gap:11px;min-width:0}
.fy-chat-ava{position:relative;flex:none;width:40px;height:40px;border-radius:50%;background:var(--fym-bg-soft);border:1px solid var(--fym-border)}
.fy-chat-ava img{width:100%;height:100%;object-fit:contain;border-radius:50%}
.fy-chat-ava::after{content:'';position:absolute;right:1px;bottom:1px;width:11px;height:11px;border-radius:50%;background:#22c55e;border:2px solid var(--fym-surface)}
.fy-chat-meta{display:flex;flex-direction:column;min-width:0}
.fy-chat-meta strong{font-size:14px;font-weight:700;letter-spacing:-0.01em;color:var(--fym-fg);line-height:1.2}
.fy-chat-meta small{font-size:11.5px;color:var(--fym-fg2)}
.fy-chat-close{flex:none;width:32px;height:32px;border:none;background:transparent;border-radius:50%;color:var(--fym-fg2);cursor:pointer;display:grid;place-items:center}
.fy-chat-close:hover{background:var(--fym-bg-sunk);color:var(--fym-fg)}
.fy-chat-close svg{width:18px;height:18px}
.fy-chat-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:13px;padding:16px 14px;background:transparent;scrollbar-width:thin;scrollbar-color:var(--fym-accent) transparent}
/* barra de rolagem fina + violeta (conversa e textarea) */
.fy-chat-body::-webkit-scrollbar,.fy-chat-form textarea::-webkit-scrollbar{width:6px;height:6px}
.fy-chat-body::-webkit-scrollbar-track,.fy-chat-form textarea::-webkit-scrollbar-track{background:transparent;margin:6px 0}
.fy-chat-body::-webkit-scrollbar-thumb,.fy-chat-form textarea::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--fym-accent) 55%,transparent);border-radius:999px}
.fy-chat-body::-webkit-scrollbar-thumb:hover,.fy-chat-form textarea::-webkit-scrollbar-thumb:hover{background:var(--fym-accent)}
.fy-msg{display:flex;gap:9px;max-width:88%}
.fy-msg-bot{align-self:flex-start}
.fy-msg-user{align-self:flex-end;flex-direction:row-reverse}
.fy-msg-ava{flex:none;width:30px;height:30px;border-radius:50%;overflow:hidden;background:var(--fym-bg-soft);border:1px solid var(--fym-border)}
.fy-msg-ava img{width:100%;height:100%;object-fit:contain}
.fy-bub{padding:9px 13px;font-size:13.5px;line-height:1.5;box-shadow:var(--fym-shadow);overflow-wrap:anywhere;white-space:pre-wrap}
.fy-msg-bot .fy-bub{background:var(--fym-surface);border:1px solid var(--fym-border);border-radius:14px 14px 14px 4px;color:var(--fym-fg)}
.fy-msg-bot .fy-bub strong{color:var(--fym-accent)}
.fy-msg-user .fy-bub{background:var(--fym-accent);color:#fff;border-radius:14px 14px 4px 14px}
.fy-typing{display:inline-flex;align-items:center;gap:4px}
.fy-typing span{width:6px;height:6px;border-radius:50%;background:var(--fym-fg2);animation:fyDot 1.2s infinite ease-in-out}
.fy-typing span:nth-child(2){animation-delay:.15s}
.fy-typing span:nth-child(3){animation-delay:.3s}
@keyframes fyDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:.9}}
.fy-chat-form{flex:none;display:flex;align-items:flex-end;gap:8px;padding:11px 12px;border-top:1px solid color-mix(in oklab,var(--fym-border) 55%,transparent);background:color-mix(in oklab,var(--fym-surface) 30%,transparent)}
.fy-chat-form textarea{flex:1;min-width:0;box-sizing:border-box;min-height:40px;max-height:120px;border:1px solid var(--fym-border);background:color-mix(in oklab,var(--fym-surface) 55%,transparent);border-radius:18px;padding:9px 15px;font:inherit;font-size:13.5px;line-height:1.45;color:var(--fym-fg);outline:none;resize:none;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--fym-accent) transparent;transition:border-color .2s,box-shadow .2s,background .2s}
.fy-chat-form textarea:focus{border-color:var(--fym-accent);background:var(--fym-surface);box-shadow:0 0 0 3px color-mix(in oklab,var(--fym-accent) 16%,transparent)}
.fy-chat-send{flex:none;width:40px;height:40px;border:none;border-radius:50%;background:var(--fym-accent);color:#fff;cursor:pointer;display:grid;place-items:center;transition:transform .18s var(--fym-ease),opacity .18s}
.fy-chat-send:hover{transform:scale(1.06)}
.fy-chat-send:disabled{opacity:.4;cursor:not-allowed;transform:none}
.fy-chat-send svg{width:18px;height:18px}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.fy-chat{background:var(--fym-surface)}.fy-chat-form{background:var(--fym-surface)}}
/* iOS dá zoom ao focar inputs com fonte <16px — evita o "pulo" da tela no mobile */
@media (max-width:600px){.fy-chat-form textarea{font-size:16px}}
@media (prefers-reduced-motion:reduce){.fy-marketing-btn,.fy-typing span{animation:none !important}.fy-chat,.fy-marketing-bubble{transition-duration:.01ms !important}}