/* 1. DER FAB */
#kessy-fab {
  opacity: 0;
  z-index: 100;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), bottom 0.3s ease-in-out;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform, opacity, bottom;
  bottom: calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom) - 30px);
}

#kessy-fab.kessy-with-toolbar {
  bottom: calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom) + 62px);
}

#kessy-fab.fab-morph-show {
  z-index: 14000;
  opacity: 1;
  pointer-events: auto;
}



/* 2. DER CONTAINER (MORPH TARGET) */
#kessy-morph-target {
  position: fixed;
  left: unset !important;
  margin: 0 10px 0px 10px !important;
  bottom: calc(var(--f7-safe-area-bottom) + 10px) !important;
  width: calc(100vw - 20px);
  top: unset;
  height: 170px;
  border-radius: 40px;
  z-index: 15000;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  pointer-events: none;
  transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
              height 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
              bottom 0.3s ease-in-out,
              border-radius 0.3s ease;
  will-change: width, height, transform;
}

#kessy-morph-target.fab-morph-target-visible {
  visibility: visible !important;
  pointer-events: auto !important;
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  backdrop-filter: blur(10px) saturate(180%);
  transform: translateZ(0);
}

#kessy-morph-target .popover-inner {

  height: 100%;
  width: 100%;
  border-radius: 40px !important;
    overflow:hidden;
  box-shadow: 
    inset -2px -2px 0.5px -2.5px rgba(255, 255, 255, 0.4), 
    inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.4), 
    inset 2px 2px 0.5px -2px rgba(139, 0, 0, 0.5), 
    inset -2px -2px 0.5px -2px rgba(139, 0, 0, 0.5), 
    inset 0 0 5px 1px #800000, 
    inset 0 0 0 1px rgba(255, 0, 0, 0.15), 
    inset 0 0 10px 0 rgba(255, 0, 0, 0.075), 
    inset 0 0 24px 0 rgba(255, 0, 0, 0.05), 
    0 0 25px 0 rgba(0, 0, 0, 0.15);
}

/* 3. HEADER */
#kessy-morph-target .kessy-header {
  padding: 12px 20px 5px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#kessy-morph-target .kessy-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #ff0000;
  letter-spacing: 1.2px;
  opacity: 0.5;
}

/* 4. CONTENT & ACTION BOX */
#kessy-morph-target .kessy-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px 15px 20px;
}

#kessy-morph-target .kessy-action-box {
  width: 100%;
  display: flex;
  flex-direction: row;      
  align-items: center;      
  justify-content: space-between;
  margin-bottom: 10px;
}

/* Status- und Calling-Box dürfen flexibel sein */
#kessy-morph-target .kessy-calling-box {
  flex: 1;                  
  display: flex;
  justify-content: right;
  align-items: center;
}

/* STATUS BOX (Links) */
#kessy-morph-target .kessy-status-box {
	  flex: 1;                  
  display: flex;
  font-size: 10px;
  text-transform: uppercase;
  color: rgb(100,100,100);
  opacity: 0.8;
  text-align: left;  
  justify-content: left;
  align-items: center;
}
.dark#kessy-morph-target .kessy-status-box {
  color: rgb(190,190,190);
}







/* AVATAR BOX & SPRITE - UPDATE P.6.8 */
#kessy-morph-target .kessy-avatar-box {
  flex: 0 0 70px;
  height: 70px;
  background: rgba(128, 128, 128, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#kessy-morph-target .kessy-sprite {
  width: 100%;
  height: 100%;
  background-image: url('../assets/img/kessyspreadsheet.png');
  background-size: 100% 400%; /* 4 Bilder = 400% */
  background-position: 0 0%;    /* Bild 1: Idle */
  background-repeat: no-repeat;
  transition: background-position 0.1s steps(1); 
}

/* Bild 3: Ohren hoch (Zuhören) */
.is-listening#kessy-morph-target .kessy-sprite {
  background-position: 0 66.66%; 
}

/* Bild 2: Ohren mittel (Sprechen) */
.is-speaking#kessy-morph-target .kessy-sprite {
  background-position: 0 33.33%;
}

/* Bild 4: Headset (Kommunikation mit Gemini) */
#kessy-morph-target.is-communicating .kessy-sprite {
  background-position: 0 100% !important;
}

/* Reset bei Beendigung */
#kessy-morph-target.is-terminating .kessy-sprite {
  background-position: 0 0% !important;
  animation: none !important;
}












/* CALLING BOX (Rechts) */
#kessy-morph-target .kessy-calling-box svg {
    max-width: 80px;
    max-height: 80px;
}

/* 5. STATUS WRAPPER & TEXT */
#kessy-morph-target .kessy-status-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 0 6px; 
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

#kessy-morph-target .kessy-status-text {
  font-size: 1.1rem;
  font-weight: 400;
  white-space: nowrap;
  display: block;
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

#kessy-morph-target .kessy-status-text.is-scrolling,
#kessy-morph-target .kessy-status-text.is-static {
  opacity: 1 !important;
}

#kessy-morph-target .kessy-status-text.is-scrolling {
  display: inline-block;
  width: max-content;
  text-align: left;
  padding-left: 100%;
  animation: kessy-marquee 10s linear infinite;
}

#kessy-morph-target .kessy-status-text.is-static {
  display: block;
  width: 100%;
  text-align: center;
}

/* 6. ANIMATIONEN */
@keyframes kessy-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@keyframes kessy-waber {
  0% { transform: scale(1); box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.15); }
  50% { transform: scale(1.015); box-shadow: 0 0 18px 5px rgba(255, 0, 0, 0.4), 0 0 10px 2px rgba(255, 0, 0, 0.2); }
  100% { transform: scale(1); box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.15); }
}

#kessy-morph-target.is-speaking {
  animation: kessy-waber 2s infinite ease-in-out;
  will-change: transform, box-shadow;
}

#kessy-morph-target.is-terminating .kessy-sprite {
    background-position: top center !important;
    animation: none !important;
}

/* 7. KOMMUNIKATIONS-STATUS (Nur SVG-Steuerung) */

/* Standardmäßig versteckt */
#kessy-morph-target .kessy-calling-box svg {
    opacity: 0;
}

/* Sichtbar, wenn Kessy mit Gemini spricht */
#kessy-morph-target.is-communicating .kessy-calling-box svg {
    opacity: 0.7; /* Passt sich dem Alpha-Look des restlichen Designs an */
    transition: opacity 0.5s ease-in-out;
}

/* Verhindert Mehrfachklicks während des Schließvorgangs */
#kessy-morph-target.is-terminating .kessy-close-btn {
  pointer-events: none;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}