/* Cellie AE chat widget — themed for brynx. Tokens scoped to .cellie so the
   widget is self-contained and never inherits/leaks landing-global vars. */
.cellie{
  --acc:#3B82F6; --acc-bright:#60A5FA;
  --acc-soft:rgba(59,130,246,0.10); --acc-line:rgba(59,130,246,0.35);
  --ink-6:rgba(228,228,232,0.20);
  --ease:cubic-bezier(0.2,0.7,0.2,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}

.cellie{position:fixed;right:24px;bottom:24px;z-index:60;}
.cellie-launch{position:relative;width:60px;height:60px;border-radius:50%;border:0;
  background:var(--acc);color:#06060A;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 44px -12px var(--acc),0 0 0 7px var(--acc-soft);
  transition:transform 220ms var(--ease);}
.cellie-launch:hover{transform:translateY(-2px);}
.cellie-launch:active{transform:translateY(0);}
.cellie-launch svg{width:25px;height:25px;}
.cellie-launch .pog{position:absolute;top:-2px;right:-2px;width:15px;height:15px;border-radius:50%;
  background:#34D399;border:2.5px solid var(--paper);}
.cellie-nudge{position:absolute;right:72px;bottom:9px;white-space:nowrap;
  background:var(--paper-3);border:1px solid var(--hair-2);border-radius:12px;
  padding:11px 14px;font-size:13px;color:var(--ink-2);
  box-shadow:0 18px 44px -18px #000;display:flex;align-items:center;gap:12px;
  animation:nudge 320ms var(--ease-out) both;}
.cellie-nudge b{color:var(--acc-bright);font-weight:500;}
.cellie-nudge .x{color:var(--ink-5);cursor:pointer;display:flex;}
.cellie-nudge .x:hover{color:var(--ink-2);}
@keyframes nudge{from{transform:translateX(10px);}to{transform:none;}}

.cellie-panel{position:absolute;right:0;bottom:74px;width:386px;max-width:calc(100vw - 32px);
  height:602px;max-height:calc(100vh - 120px);
  background:var(--paper-2);border:1px solid var(--hair-2);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 44px 110px -34px #000,0 0 0 1px rgba(228,228,232,0.02);
  animation:panelin 300ms var(--ease-out) both;}
@keyframes panelin{from{transform:translateY(16px) scale(0.985);}to{transform:none;}}
.cellie-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);}

/* header */
.sh{display:flex;align-items:center;gap:12px;padding:15px 14px 15px 16px;
  border-bottom:1px solid var(--hair);background:rgba(6,6,10,0.45);}
.sh .ava{width:40px;height:40px;border-radius:50%;position:relative;flex-shrink:0;
  background:linear-gradient(140deg,var(--acc),var(--acc-bright));color:#06060A;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;letter-spacing:-0.01em;}
.sh .ava .pog{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;
  background:#34D399;border:2px solid var(--paper-2);}
.sh .id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.sh .id .nm{font-size:15px;font-weight:500;color:var(--ink);letter-spacing:-0.01em;}
.sh .id .ro{font-size:11px;color:var(--ink-4);display:flex;align-items:center;gap:8px;white-space:nowrap;}
.sh .id .ro .on{display:inline-flex;align-items:center;gap:5px;color:#34D399;}
.sh .id .ro .on i{width:5px;height:5px;border-radius:50%;background:#34D399;box-shadow:0 0 6px #34D399;}
.sh .cl{width:30px;height:30px;border-radius:7px;border:1px solid transparent;background:transparent;
  color:var(--ink-4);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 160ms;}
.sh .cl:hover{color:var(--ink);border-color:var(--hair-2);}

/* brief / fit card */
.brief{border-bottom:1px solid var(--hair);background:var(--paper);flex-shrink:0;}
.brief-h{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;user-select:none;}
.brief-h .lbl{font-family:ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink-5);}
.brief-h .fit{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:11px;color:var(--ink-3);}
.brief-h .meter{display:flex;gap:3px;}
.brief-h .meter i{width:15px;height:4px;border-radius:2px;background:var(--hair-2);transition:background 240ms;}
.brief-h .meter i.on{background:var(--acc);}
.brief-h .chev{color:var(--ink-5);display:flex;transition:transform 220ms var(--ease);}
.brief.open .chev{transform:rotate(180deg);}
.brief-body{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);
  max-height:0;overflow:hidden;transition:max-height 300ms var(--ease);}
.brief.open .brief-body{max-height:220px;}
.brief-cell{background:var(--paper);padding:9px 14px;display:flex;flex-direction:column;gap:2px;min-width:0;}
.brief-cell .k{font-family:ui-monospace,Menlo,monospace;font-size:8.5px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-5);}
.brief-cell .v{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brief-cell .v.empty{color:var(--ink-6);}

/* body / messages */
.sb{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:11px;
  scrollbar-width:thin;scrollbar-color:var(--hair-2) transparent;}
.sb::-webkit-scrollbar{width:8px;}
.sb::-webkit-scrollbar-thumb{background:var(--hair-2);border-radius:4px;border:2px solid var(--paper-2);}
.msg{display:flex;gap:9px;max-width:90%;align-items:flex-end;animation:msgin 320ms var(--ease-out) both;}
@keyframes msgin{from{transform:translateY(7px);}to{transform:none;}}
.msg.user{align-self:flex-end;flex-direction:row-reverse;}
.msg .mava{width:24px;height:24px;border-radius:50%;flex-shrink:0;margin-bottom:2px;
  background:linear-gradient(140deg,var(--acc),var(--acc-bright));color:#06060A;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;}
.msg.user .mava{display:none;}
.bubble{padding:10px 13px;border-radius:13px;font-size:13.5px;line-height:1.46;}
.msg.bot .bubble{background:var(--paper-3);border:1px solid var(--hair);color:var(--ink-2);border-bottom-left-radius:4px;}
.msg.user .bubble{background:var(--acc-soft);border:1px solid var(--acc-line);color:var(--ink);border-bottom-right-radius:4px;}
.typing{display:flex;gap:9px;align-items:flex-end;animation:msgin 200ms var(--ease-out) both;}
.typing .mava{width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(140deg,var(--acc),var(--acc-bright));color:#06060A;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;}
.typing .dots{background:var(--paper-3);border:1px solid var(--hair);border-radius:13px;border-bottom-left-radius:4px;
  padding:13px 14px;display:flex;gap:4px;}
.typing .dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-5);animation:td 1.3s infinite;}
.typing .dots i:nth-child(2){animation-delay:0.18s;}
.typing .dots i:nth-child(3){animation-delay:0.36s;}
@keyframes td{0%,60%,100%{opacity:0.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

/* quick replies */
.chips{display:flex;flex-wrap:wrap;gap:8px;padding-left:33px;
  animation:msgin 300ms var(--ease-out) both;}
.chip{padding:9px 13px;border:1px solid var(--hair-2);border-radius:9px;background:var(--paper);
  color:var(--ink-2);font-size:13px;cursor:pointer;font-family:inherit;
  transition:border-color 160ms var(--ease),color 160ms,background 160ms,transform 100ms;}
.chip:hover{border-color:var(--acc);color:var(--acc-bright);background:var(--acc-soft);}
.chip:active{transform:translateY(1px);}

/* slot card */
.slotcard{margin-left:33px;border:1px solid var(--hair-2);border-radius:13px;overflow:hidden;background:var(--paper);
  animation:msgin 320ms var(--ease-out) both;}
.slotcard .sc-h{padding:11px 14px;border-bottom:1px solid var(--hair);font-size:11px;color:var(--ink-4);
  display:flex;align-items:center;gap:8px;}
.slotcard .sc-h svg{width:14px;height:14px;color:var(--acc);}
.slot-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);}
.slot{background:var(--paper);padding:11px 13px;cursor:pointer;display:flex;flex-direction:column;gap:3px;
  border:0;text-align:left;font-family:inherit;transition:background 150ms;}
.slot:hover{background:var(--acc-soft);}
.slot .d{font-size:12px;color:var(--ink-2);font-weight:500;}
.slot .t{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--acc-bright);}
.slotcard .tz{padding:8px 14px;border-top:1px solid var(--hair);font-family:ui-monospace,Menlo,monospace;
  font-size:9.5px;letter-spacing:0.06em;color:var(--ink-5);}

/* confirm card */
.confirm{margin-left:33px;border:1px solid var(--acc-line);border-radius:13px;background:var(--acc-soft);
  padding:16px;display:flex;flex-direction:column;gap:13px;animation:msgin 340ms var(--ease-out) both;}
.confirm .ttl{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;color:var(--ink);}
.confirm .ck{width:26px;height:26px;border-radius:50%;background:var(--acc);color:#06060A;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;}
.confirm .ck svg{width:15px;height:15px;}
.confirm .det{font-size:12.5px;color:var(--ink-3);line-height:1.55;}
.confirm .det b{color:var(--ink-2);font-weight:500;}
.confirm .cal{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px;
  border-radius:9px;background:var(--acc);color:#06060A;font-weight:500;font-size:13px;cursor:pointer;
  border:0;font-family:inherit;transition:transform 120ms,filter 160ms;}
.confirm .cal:hover{filter:brightness(1.08);transform:translateY(-1px);}
.confirm .cal svg{width:15px;height:15px;}

/* footer input */
.sf{padding:12px;border-top:1px solid var(--hair);display:flex;gap:9px;align-items:center;background:rgba(6,6,10,0.35);}
.sf input{flex:1;min-width:0;background:var(--paper);border:1px solid var(--hair-2);border-radius:10px;
  padding:11px 13px;color:var(--ink);font-family:inherit;font-size:13.5px;outline:none;transition:border-color 160ms;}
.sf input:focus{border-color:var(--acc-line);}
.sf input::placeholder{color:var(--ink-5);}
.sf .send{width:40px;height:40px;flex-shrink:0;border-radius:10px;border:0;background:var(--acc);color:#06060A;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 120ms,opacity 160ms;}
.sf .send svg{width:18px;height:18px;}
.sf .send:hover{transform:translateY(-1px);}
.sf .send:disabled{opacity:0.35;cursor:default;transform:none;}

@media (max-width:480px){
  .cellie{right:14px;bottom:14px;}
  .cellie-panel{width:calc(100vw - 28px);height:calc(100vh - 92px);bottom:72px;}
}
@media (prefers-reduced-motion:reduce){
  .cellie-panel,.msg,.typing,.chips,.slotcard,.confirm,.cellie-nudge{animation:none;}
  .cellie-eye{animation:none;}
}
/* Cellie blinks every few seconds */
.cellie-eye{transform-box:fill-box;transform-origin:center;animation:cellieblink 5.4s infinite;}
@keyframes cellieblink{0%,93%,100%{transform:scaleY(1);}96.5%{transform:scaleY(0.1);}}

/* Inline HubSpot Meetings calendar inside the Cellie panel */
.cellie .cellie-cal{ margin-top:10px; background:#fff; border-radius:10px; overflow:hidden; }
.cellie .cellie-cal .meetings-iframe-container{ min-height:560px; }
.cellie .cellie-cal iframe{ width:100%!important; min-height:560px; border:0; display:block; }

/* Mode A — free-trial CTA card */
.cellie .cta-card{ display:flex; flex-direction:column; gap:8px; margin-top:6px; padding:12px; border:1px solid var(--acc-line,rgba(255,255,255,0.14)); border-radius:12px; background:rgba(255,255,255,0.02); }
.cellie .cta-card .chips{ margin:0 0 2px; }
.cellie .cta-primary{ display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:11px 14px; border:0; border-radius:10px; background:var(--acc,#34D399); color:#0a0a0f; font:600 13.5px/1 inherit; cursor:pointer; }
.cellie .cta-primary svg{ width:15px; height:15px; }
.cellie .cta-primary:hover{ filter:brightness(1.06); }
.cellie .cta-ghost{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 14px; border:1px solid var(--acc-line,rgba(255,255,255,0.16)); border-radius:10px; background:transparent; color:var(--acc-bright,#9ff5d0); font:500 12.5px/1 inherit; cursor:pointer; }
.cellie .cta-ghost svg{ width:13px; height:13px; }
.cellie .cta-ghost:hover{ border-color:var(--acc,#34D399); }
.cellie .cta-foot{ text-align:center; font-size:11px; opacity:0.55; margin-top:1px; }

/* trap scroll inside the panel (no scroll-chaining to the page) */
.cellie-panel .sb{overscroll-behavior:contain;}
.cellie-panel .cellie-cal{overscroll-behavior:contain;}