/* --- One-element morph for #cs-chatkit-widget --- */
:root{
  --csck-w: 420px;
  --csck-h: 640px;
  --csck-r: 24px;        /* constant radius across states */
  --csck-dot: 48px;
  --csck-pill: 220px;
  --csck-shadow: 0 16px 40px rgba(0,0,0,.22);
  --csck-z: 2147483647;
}

/* base: fixed bottom-right, hidden until ready */
#cs-chatkit-widget{
  cursor:pointer;
  position: fixed;
  right: 50px; bottom: 16px;
  z-index: var(--csck-z);
  width: var(--csck-dot);
  height: var(--csck-dot);
  border-radius: var(--csck-r);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  overflow: hidden;
  display: none;                     /* shown when ready */
  pointer-events: auto;
  transition:
    width .22s cubic-bezier(.22,1,.36,1),
    height .30s cubic-bezier(.22,1,.36,1),
    box-shadow .22s ease,
    opacity .18s ease,
    transform .30s cubic-bezier(.22,1,.36,1);
}

/* ready → show the dot button */
#cs-chatkit-widget.csck--ready{ display: block; }

/* icon + label inside the button */
#cs-chatkit-widget .csck-ui{
  position:absolute; 
  inset:0;
  display:flex; 
  align-items:center; 
  justify-content:flex-start;
  gap:.6rem; 
  padding:0 12px;
  font:600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
#cs-chatkit-widget .csck-icon{
    font-size: 2em;
}
#cs-chatkit-widget .csck-label{ opacity:0; white-space:nowrap; transition:opacity .16s ease; }

/* hover → expand LEFT to pill (right edge pinned) */
#cs-chatkit-widget:hover:not([data-state="open"]),
#cs-chatkit-widget:focus-visible:not([data-state="open"]){
  width: var(--csck-pill);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  outline:none;
}
#cs-chatkit-widget:hover .csck-label,
#cs-chatkit-widget:focus-visible .csck-label{ opacity:1; }

/* open → expand UP into panel (anchored bottom-right), chat visible */
#cs-chatkit-widget[data-state="open"]{
  width: var(--csck-w);
  height: var(--csck-h);
  box-shadow: var(--csck-shadow);
}

/* the ChatKit element fills the widget, fades in once open */
#cs-chatkit-widget openai-chatkit{
  position:absolute; 
  inset:0; 
  width:100%; 
  height:100%;
  opacity:0; 
  transition:opacity .18s ease;
}
#cs-chatkit-widget[data-state="open"] openai-chatkit{ opacity:1; }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  #cs-chatkit-widget{ transition:none !important; }
  #cs-chatkit-widget openai-chatkit{ transition:none !important; }
}
 




 /* close button (shows only when panel is open) */
#cs-chatkit-widget .csck-close{
  position:absolute; top:8px; left:8px;
  width:32px; height:32px;
  display:none;           /* hidden until [data-state="open"] */
  align-items:center; justify-content:center;
  border:none; border-radius:16px;
  background:rgba(0,0,0,.06);
  color:#111; cursor:pointer;
  z-index:1;              /* above iframe */
  transition:background .15s ease, transform .1s ease;
}
#cs-chatkit-widget .csck-close:hover{ background:rgba(0,0,0,.12); }
#cs-chatkit-widget .csck-close:active{ transform:scale(.96); }
#cs-chatkit-widget .csck-close:focus-visible{ outline:2px solid #111; outline-offset:2px; }

/* simple “×” icon */
#cs-chatkit-widget .csck-close svg{
  width:16px; height:16px; display:block;
}

#cs-chatkit-widget[data-state="open"] .csck-close{ display:flex; }

/* ensure iframe sits below the close button */
#cs-chatkit-widget openai-chatkit{ position:absolute; inset:0; z-index:0; }