/* File: muse-bot-sdk.css */

.bot-sdk-wrapper {
  position: fixed;
  z-index: 999999999;
}
.bot-sdk-wrapper.bottom-right { bottom:20px; right:20px; }
.bot-sdk-wrapper.bottom-left  { bottom:20px; left:20px; }
.bot-sdk-wrapper.top-right    { top:20px; right:20px; }
.bot-sdk-wrapper.top-left     { top:20px; left:20px; }

.bot-sdk-button {
  width:60px;
  height:60px;
  cursor:pointer;
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}

.bot-sdk-welcome {
  background:maroon;
  font-size:14px;
  color:#fff;
  margin-top:8px;
  padding:6px 12px;
  border-radius:4px;
  box-shadow:0 1px 4px rgba(0,0,0,0.2);
  max-width: 80vw;
  box-sizing: border-box;
}

.bot-sdk-welcome--clickable {
  cursor: pointer;
  user-select: none;
}

.bot-sdk-toggle-icon {
  display:inline-block;
  width:12px;
  height:12px;
  margin-right: 6px;
  vertical-align: middle;
  line-height: 0; /* remove extra space */
}
.bot-sdk-toggle-icon svg { vertical-align: middle; }

.bot-sdk-iframe {
  z-index: 999999999;
  border:none;
  box-shadow:0 2px 10px rgba(0,0,0,0.3);
  border-radius:8px;
  background:#fff;
  transition: height 0.4s ease, width 0.2s ease;
}

.bot-sdk-iframe--growable {
  transition: height 0.3s ease;
}


/*tempalte 3 start*/
/* === [ADD] Template3 modal styles === */
.bot-sdk-modal-open {
  overflow: hidden;            /* prevent page scroll when modal is open */
}
.bot-sdk-iframe--modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 60vw !important;
  height: 80vh !important;
  transition: opacity 0.25s ease, transform 0.25s ease, width 0.2s ease, height 0.2s ease;
  opacity: 0;
  pointer-events: none;         /* block until opened */
}
.bot-sdk-iframe--modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.bot-sdk-welcome--floating {
  position: fixed;
  z-index: 999999999;
  cursor: pointer;
  user-select: none;
}

.bot-sdk-welcome--anim{
  position: fixed;
  transition: all 0.35s ease;
  z-index: 1000000000; /* above iframe */
  pointer-events: auto;
}

/*tempalte 3 end*/












/* ===== Attention text effect: highlight sweep + underline (no bold) ===== */
@keyframes botHighlightSweep {
  0%   { background-position: -150% 0; }
  100% { background-position: 150% 0; }
}
@keyframes botUnderlineGrow {
  0%,100% { transform: scaleX(0); }
  50%     { transform: scaleX(1); }
}
@keyframes botFadeIn { to { opacity: 1; } }

/* Default state */
.bot-sdk-welcome-text {
  position: relative;
  opacity: 1;
  color: #1d1d1d;
  -webkit-text-fill-color: #1d1d1d;
  background: none;
  text-shadow: 0 0 1px rgba(0,0,0,.28);
  font-weight: inherit;
  font-size: inherit;
}

/* Attention state */
.bot-sdk-welcome--attention .bot-sdk-welcome-text {
  /* Keep the text color; add a moving translucent highlight behind it */
  background-image: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 40%,
    rgba(255,255,255,0) 80%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: botHighlightSweep 2.8s ease-in-out infinite, botFadeIn .7s ease forwards;
}

/* Glow around the whole line (optional, subtle) */
.bot-sdk-welcome--attention .bot-sdk-welcome-text {
  text-shadow: 0 0 3px rgba(255,255,255,.4), 0 0 6px rgba(0,0,0,.15);
}

/* Animated underline using ::after */
.bot-sdk-welcome--attention .bot-sdk-welcome-text::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg,#0d47a1,#d81b60,#ff6f00,#0d47a1);
  transform-origin: left center;
  transform: scaleX(0);
  animation: botUnderlineGrow 2.2s ease-in-out infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bot-sdk-welcome--attention .bot-sdk-welcome-text {
    animation: botFadeIn .6s ease forwards;
    background: none;
  }
  .bot-sdk-welcome--attention .bot-sdk-welcome-text::after {
    animation: none;
    transform: scaleX(1);
  }
}
/* ===== /Attention text effect ===== */


@media (max-width: 600px) {
  .bot-sdk-welcome { max-width: 95vw; }
}




/*start:: autofill*/
/* [ADD] Autofill pointer highlight */
.muse-af-pointer {
  position: absolute;
  border: 2px solid #3b82f6;
  border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(59,130,246,.15), 0 8px 20px rgba(0,0,0,.25);
  pointer-events: none;
  z-index: 2147483647;
  animation: museAfPulse 1.2s ease-in-out infinite;
}
.muse-af-pointer--done { animation: museAfFade .9s ease forwards; }

/* [ADD] Stronger emphasis when navigating to change a value */
.muse-af-pointer--emph {
  border-width: 3px;
  box-shadow: 0 0 0 6px rgba(59,130,246,.20), 0 10px 26px rgba(0,0,0,.32);
}
/* [ADD] Brief outline on the actual field being changed */
.muse-af-target-hilite {
  outline: 2px solid rgba(59,130,246,.9);
  outline-offset: 2px;
  transition: outline-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}


@keyframes museAfPulse {
  0% { box-shadow: 0 0 0 4px rgba(59,130,246,.18), 0 8px 20px rgba(0,0,0,.25); }
  50%{ box-shadow: 0 0 0 7px rgba(59,130,246,.10), 0 10px 24px rgba(0,0,0,.28); }
  100%{ box-shadow: 0 0 0 4px rgba(59,130,246,.18), 0 8px 20px rgba(0,0,0,.25); }
}
@keyframes museAfFade { to { opacity: 0; transform: scale(0.98); } }

/*end ::autofill*/




/* === Type 3: two-tab dock === */
.bot-sdk-dock{
  position:fixed;
  right:1%;
  bottom:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index: 1000000000;
}

.bot-sdk-tab{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:9999px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 22px rgba(0,0,0,.12);
  cursor:pointer;
  font-size:14px;
  color:#111;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.bot-sdk-tab:hover{ transform: translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.16); }
.bot-sdk-tab:active{ transform: translateY(0); }

.bot-sdk-tab__icon{
  width:26px; height:26px; border-radius:50%; overflow:hidden; display:inline-flex; align-items:center; justify-content:center;
  color:#0d47a1;
}
.bot-sdk-tab__icon img{ width:100%; height:100%; object-fit:cover; display:block; }

.bot-sdk-tab__label{ line-height:1; white-space:nowrap; }

/* Collapsible panel for template2 tabs (sits above the dock) */
.bot-sdk-panel{
  position:fixed;
  right:1%;
  /* panel bottom is just above two pills (~70px height), add a little gap */
  bottom: calc(70px + 20px);
  width: min(92vw, 420px);
  height: 0;
  overflow:hidden;
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition: height .35s ease;
  z-index: 999999999;
}
.bot-sdk-panel__inner{ width:100%; height:100%; }
.bot-sdk-panel iframe{ width:100%; height:100%; display:block; border:0; border-radius:12px; background:#fff; }

/* Responsive tweaks */
@media (max-width: 640px){
  .bot-sdk-dock{ right: 10px; bottom: 14px; gap:8px; }
  .bot-sdk-panel{ right:10px; bottom: calc(70px + 14px); width: min(96vw, 440px); }
}




/* === [ADD] Profile Rotator above tabs === */
.bot-sdk-rotator{
  width:100%;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 22px rgba(0,0,0,.12);
  border-radius:12px;
  padding:10px;
  margin-bottom:10px;
}
.bot-sdk-rotator__stage{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:4px;           /* image corners as requested */
  perspective: 800px;          /* subtle 3D for flip */
}
.bot-sdk-rotator__img{
  display:block;
  width:100%;
  height:150px;                /* keeps card tidy; portraits get cropped */
  object-fit:cover;
  border-radius:4px;           /* image corners as requested */
  backface-visibility:hidden;
}
.bot-sdk-rotator__meta{
  padding-top:8px;
  line-height:1.2;
}
.bot-sdk-rotator__name{
  font-weight:600;
  font-size:15px;
}
.bot-sdk-rotator__desig{
  font-size:12px;
  color:#555;
}

/* Page-turn feel (flip) */
@keyframes rotFlipOut{
  0%   { transform: rotateY(0deg);   opacity:1; }
  100% { transform: rotateY(-18deg); opacity:0; }
}
@keyframes rotFlipIn{
  0%   { transform: rotateY(18deg); opacity:0; }
  100% { transform: rotateY(0deg);  opacity:1; }
}
.bot-sdk-rotator__img.rot-out{ animation: rotFlipOut .46s ease both; transform-origin:left center; }
.bot-sdk-rotator__img.rot-in { animation: rotFlipIn  .46s ease both; transform-origin:right center; }

/* Ensure pills stretch to match dock width so rotator = one tab width */
.bot-sdk-dock .bot-sdk-tab{ width:100%; }

@media (max-width:640px){
  .bot-sdk-rotator{ display:none; } /* show only on wide screens per spec */
}


/* [ADD] utility used to hide the rotator when a tab is open */
.bot-sdk-rotator.is-hidden { display: none !important; }