/* =====================================================================
   "TALK NOW" VOICE ASSISTANT STYLES
   Uses the site's design tokens (see css/styles.css :root).
===================================================================== */

/* floating pill (bottom-left so it never collides with the chat widget on the right) */
#cnvPill{
  position:fixed;left:22px;bottom:22px;z-index:900;
  display:flex;align-items:center;gap:9px;
  padding:13px 20px 13px 16px;border-radius:100px;
  background:var(--white);color:#050505;border:none;
  font-family:var(--body);font-size:14.5px;font-weight:600;
  box-shadow:0 8px 30px rgba(0,0,0,0.45);
  transition:transform .25s var(--ease),opacity .2s var(--ease);
}
#cnvPill:hover{transform:translateY(-2px) scale(1.03);}
#cnvPill.hidden{opacity:0;pointer-events:none;transform:translateY(10px);}
#cnvPill svg{width:18px;height:18px;}
#cnvPill .cnv-dot{
  width:8px;height:8px;border-radius:50%;background:#050505;
  box-shadow:0 0 0 0 rgba(5,5,5,.5);animation:cnvDot 2s ease-out infinite;
}
@keyframes cnvDot{0%{box-shadow:0 0 0 0 rgba(5,5,5,.5);}70%{box-shadow:0 0 0 9px rgba(5,5,5,0);}100%{box-shadow:0 0 0 0 rgba(5,5,5,0);}}

/* hero button */
.btn-hero-talk svg{width:16px;height:16px;flex-shrink:0;}
.btn-hero-talk .cnv-dot{width:7px;height:7px;border-radius:50%;background:#050505;}
.btn-hero-talk{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  padding:15px 28px;border-radius:100px;font-size:15px;font-weight:600;
  background:var(--white);color:#050505;border:1px solid var(--white);
  font-family:var(--body);cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.btn-hero-talk:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(255,255,255,.25);}

/* panel */
#cnvPanel{
  position:fixed;left:22px;bottom:22px;z-index:950;
  width:380px;max-width:calc(100vw - 32px);
  max-height:min(640px,calc(100vh - 44px));
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transform:translateY(18px) scale(.97);
  transition:opacity .22s var(--ease),transform .22s var(--ease);
  overflow:hidden;color:var(--white);font-family:var(--body);
}
#cnvPanel.open{opacity:1;pointer-events:auto;transform:none;}

.cnv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 16px 12px 18px;border-bottom:1px solid var(--line);}
.cnv-title{font-family:var(--display);font-weight:600;font-size:15px;}
.cnv-sub{font-size:11.5px;color:var(--gray-1);margin-top:3px;}
.cnv-head-btns{display:flex;gap:6px;}
.cnv-icon{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--white);display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.cnv-icon:hover{background:rgba(255,255,255,.08);border-color:var(--line-strong);}
.cnv-icon svg{width:17px;height:17px;}

.cnv-stage{display:flex;flex-direction:column;align-items:center;padding:20px 16px 8px;flex-shrink:0;}
.cnv-orb{
  position:relative;width:84px;height:84px;border-radius:50%;border:none;
  background:radial-gradient(circle at 35% 30%,#ffffff,#c9c9cc 70%);color:#050505;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 34px rgba(255,255,255,.12);
  transition:transform .25s var(--ease);
}
.cnv-orb:hover{transform:scale(1.04);}
.cnv-orb svg{width:30px;height:30px;}
.cnv-orb::before,.cnv-orb::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);
  opacity:0;pointer-events:none;
}
#cnvPanel[data-state="listening"] .cnv-orb::before{animation:cnvRipple 1.8s ease-out infinite;}
#cnvPanel[data-state="listening"] .cnv-orb::after{animation:cnvRipple 1.8s ease-out .9s infinite;}
#cnvPanel[data-state="speaking"] .cnv-orb{animation:cnvPulse 1s ease-in-out infinite;}
#cnvPanel[data-state="thinking"] .cnv-orb{opacity:.75;}
#cnvPanel[data-state="thinking"] .cnv-orb::before{
  inset:-7px;border:2px solid transparent;border-top-color:var(--white);opacity:1;animation:cnvSpin .9s linear infinite;
}
@keyframes cnvRipple{0%{transform:scale(1);opacity:.7;}100%{transform:scale(1.9);opacity:0;}}
@keyframes cnvPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.09);}}
@keyframes cnvSpin{to{transform:rotate(360deg);}}
.cnv-status{margin-top:14px;font-size:13px;color:var(--gray-1);text-align:center;min-height:19px;max-width:320px;}

.cnv-log{flex:1 1 auto;min-height:90px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:transparent transparent;padding:10px 16px;display:flex;flex-direction:column;gap:8px;}
.cnv-bubble{max-width:88%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.45;word-wrap:break-word;}
.cnv-bot{align-self:flex-start;background:rgba(255,255,255,.06);border:1px solid var(--line);}
.cnv-user{align-self:flex-end;background:var(--white);color:#050505;}

.cnv-chips{display:flex;flex-wrap:wrap;gap:7px;padding:2px 16px 8px;}
.cnv-chips button{
  font-size:12.5px;padding:7px 12px;border-radius:100px;border:1px solid var(--line-strong);
  background:transparent;color:var(--white);font-family:var(--body);
  transition:background .2s var(--ease);
}
.cnv-chips button:hover{background:rgba(255,255,255,.08);}

.cnv-form{display:flex;gap:8px;padding:8px 16px 10px;border-top:1px solid var(--line);}
.cnv-form input{
  flex:1;min-width:0;padding:10px 14px;border-radius:100px;border:1px solid var(--line-strong);
  background:rgba(255,255,255,.04);color:var(--white);font-family:var(--body);font-size:16px;
}
.cnv-form input:focus{outline:none;border-color:var(--white);}
.cnv-send{width:40px;height:40px;border-radius:50%;border:none;background:var(--white);color:#050505;font-size:18px;flex-shrink:0;}

.cnv-actions{display:flex;gap:8px;padding:0 16px 14px;}
.cnv-actions button{
  flex:1;padding:10px 8px;border-radius:12px;font-size:13px;font-weight:500;font-family:var(--body);
  border:1px solid var(--line-strong);background:rgba(255,255,255,.04);color:var(--white);
  transition:background .2s var(--ease);
}
.cnv-actions button:hover{background:rgba(255,255,255,.1);}

/* optional "contact me" box */
.cnv-contact{padding:0 16px 14px;}
.cnv-contact-toggle{
  width:100%;background:none;border:none;color:var(--gray-1);font-family:var(--body);font-size:12.5px;
  text-align:center;text-decoration:underline;text-underline-offset:3px;padding:2px 0;cursor:pointer;
}
.cnv-contact-toggle:hover{color:var(--white);}
.cnv-contact-form{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.cnv-contact-form[hidden]{display:none;}
.cnv-contact-form input{
  padding:10px 14px;border-radius:12px;border:1px solid var(--line-strong);
  background:rgba(255,255,255,.04);color:var(--white);font-family:var(--body);font-size:16px;min-width:0;
}
.cnv-contact-form input:focus{outline:none;border-color:var(--white);}
.cnv-contact-send{
  padding:11px;border-radius:12px;border:none;background:var(--white);color:#050505;
  font-family:var(--body);font-size:14px;font-weight:600;cursor:pointer;
}
.cnv-contact-msg{font-size:12.5px;color:var(--gray-1);min-height:16px;text-align:center;margin:0;}

/* small corner window while a form or checkout is open */
.cnv-mini-text{display:none;}
.cnv-expand{display:flex;font-size:17px;}
#cnvPanel.mini{width:270px;max-height:none;}
#cnvPanel.mini .cnv-expand{display:flex;font-size:17px;}
#cnvPanel.mini .cnv-sub,#cnvPanel.mini .cnv-log,#cnvPanel.mini .cnv-chips,#cnvPanel.mini .cnv-form,
#cnvPanel.mini .cnv-actions,#cnvPanel.mini .cnv-contact{display:none;}
#cnvPanel.mini .cnv-head{padding:10px 10px 8px 14px;align-items:center;}
#cnvPanel.mini .cnv-title{font-size:13px;}
#cnvPanel.mini .cnv-icon{width:28px;height:28px;font-size:18px;}
#cnvPanel.mini .cnv-stage{padding:8px 0 4px;}
#cnvPanel.mini .cnv-orb{width:48px;height:48px;}
#cnvPanel.mini .cnv-orb svg{width:20px;height:20px;}
#cnvPanel.mini .cnv-mini-text{
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  margin:0;padding:4px 14px 12px;font-size:12.5px;line-height:1.45;color:var(--gray-1);
}
@media (max-width:560px){
  #cnvPanel.mini{left:8px;right:auto;bottom:8px;width:230px;}
}
@media (max-width:560px){
  #cnvPill{left:14px;bottom:14px;padding:12px 17px 12px 14px;}
  #cnvPanel{left:8px;right:8px;bottom:8px;width:auto;max-width:none;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);}
  .cnv-stage{padding-top:14px;}
  .cnv-orb{width:72px;height:72px;}
}
@media (prefers-reduced-motion:reduce){
  #cnvPill .cnv-dot,.cnv-orb,.cnv-orb::before,.cnv-orb::after{animation:none !important;}
}

/* link buttons shown under a reply (social pages etc.): shown on screen, never read aloud */
.cnv-links{align-self:flex-start;display:flex;flex-wrap:wrap;gap:8px;max-width:88%;margin:-2px 0 2px;}
.cnv-links a{
  font-size:12.5px;padding:7px 13px;border-radius:100px;border:1px solid var(--line-strong);
  background:rgba(255,255,255,.04);color:var(--white);text-decoration:none;font-family:var(--body);
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.cnv-links a:hover{background:rgba(255,255,255,.1);border-color:var(--white);}

/* black-and-white wink icon in the status line (small window) */
.cnv-wink{width:1.2em;height:1.2em;display:inline-block;vertical-align:-0.22em;margin-left:1px;color:var(--white);}

/* custom quote breakdown card */
.cnv-quote{align-self:stretch;margin:6px 0 2px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:12px;background:rgba(255,255,255,.04);font-size:13px;}
.cnv-quote-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0;color:var(--gray-1);}
.cnv-quote-row span:last-child{color:var(--white);white-space:nowrap;}
.cnv-quote-total{border-top:1px solid var(--line);margin-top:4px;padding-top:7px;font-weight:600;color:var(--white);}

/* Scrollbar in the chat: invisible until the cursor is over the conversation, and then a thin, soft line */
.cnv-log:hover{scrollbar-color:rgba(255,255,255,.16) transparent;}
.cnv-log::-webkit-scrollbar{width:6px;}
.cnv-log::-webkit-scrollbar-track{background:transparent;}
.cnv-log::-webkit-scrollbar-button{display:none;width:0;height:0;}
.cnv-log::-webkit-scrollbar-thumb{background:transparent;border-radius:6px;}
.cnv-log:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);}
.cnv-log::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28);}

/* =====================================================================
   3D CENKI (replaces the round mic button once the 3D head has loaded)
   If WebGL is unavailable, the original mic circle above stays in use.
===================================================================== */
.cnv-ticker,.cnv-hshadow,.cnv-rings,.cnv-avatar{display:none;}
.cnv-orb.has-avatar{
  width:156px;height:156px;background:none;box-shadow:none;border-radius:50%;
  color:inherit;overflow:visible;padding:0;
}
.cnv-orb.has-avatar:hover{transform:none;}
.cnv-orb.has-avatar::before,.cnv-orb.has-avatar::after{display:none !important;animation:none !important;}
.cnv-orb.has-avatar > svg{display:none;}
#cnvPanel[data-state="speaking"] .cnv-orb.has-avatar,
#cnvPanel[data-state="thinking"] .cnv-orb.has-avatar{animation:none;opacity:1;}
.cnv-orb.has-avatar .cnv-avatar{display:block;position:absolute;inset:0;z-index:2;}
.cnv-orb.has-avatar .cnv-avatar canvas{width:100%;height:100%;display:block;}
.cnv-orb.has-avatar .cnv-hshadow{
  display:block;position:absolute;left:28%;right:28%;bottom:-6px;height:9px;z-index:0;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.2),rgba(255,255,255,0) 70%);
  transform:scale(calc(1 - var(--bob,0) * .12));opacity:calc(.8 - var(--bob,0) * .25);
}

/* sound waves behind her head while she speaks (the circles that used to ring the mic button) */
.cnv-orb.has-avatar .cnv-rings{
  display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  transform:scale(calc(1 + var(--amp,0) * .1));
}
.cnv-rings i{
  position:absolute;inset:8%;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);opacity:0;
}
#cnvPanel[data-state="speaking"] .cnv-rings i{animation:cnvWave 1.9s ease-out infinite;}
#cnvPanel[data-state="speaking"] .cnv-rings i:nth-child(2){animation-delay:.63s;}
#cnvPanel[data-state="speaking"] .cnv-rings i:nth-child(3){animation-delay:1.26s;}
#cnvPanel[data-state="listening"] .cnv-rings i:first-child{animation:cnvWaveSoft 2.8s ease-out infinite;}
@keyframes cnvWave{0%{transform:scale(.62);opacity:.7;}100%{transform:scale(var(--rmax,1.38));opacity:0;}}
@keyframes cnvWaveSoft{0%{transform:scale(.7);opacity:.28;}100%{transform:scale(var(--rmax,1.38));opacity:0;}}
.cnv-stage{position:relative;}
.cnv-status{position:relative;z-index:3;}

/* small window: the head shrinks and the reply scrolls past one line at a time */
#cnvPanel.mini .cnv-orb.has-avatar{width:92px;height:92px;--rmax:1.22;}
#cnvPanel.mini .cnv-stage{overflow:hidden;padding:8px 0 4px;}
#cnvPanel.mini .cnv-mini-text,.cnv-mini-text{display:none !important;}
#cnvPanel.mini .cnv-ticker{
  display:none;position:relative;z-index:3;width:100%;box-sizing:border-box;padding:0 12px;
  height:18px;margin-top:14px;overflow:hidden;
}
#cnvPanel.mini.ticking .cnv-ticker{display:block;}
#cnvPanel.mini.ticking .cnv-status{display:none;}
.cnv-ticker-track{transition:transform .38s cubic-bezier(.4,0,.2,1);will-change:transform;}
.cnv-tline{height:18px;line-height:18px;font-size:12.5px;color:rgba(255,255,255,.92);text-align:center;white-space:nowrap;}
@media (max-width:560px){
  .cnv-orb.has-avatar{width:124px;height:124px;}
  #cnvPanel.mini .cnv-orb.has-avatar{width:84px;height:84px;}
}
@media (prefers-reduced-motion:reduce){
  .cnv-rings i{animation:none !important;}
  .cnv-ticker-track{transition:none;}
}