/* Fluffy Cat Header Frame Styles */
.chat-wrap.fluffy-cat .chat-list {
  padding-top: 32px; /* space for ears */
  gap: calc(var(--gap) + 26px);
}

.chat-wrap.fluffy-cat .message {
  position: relative;
  overflow: visible;
  padding: 0 !important;
  border: var(--border, 2.5px) solid var(--outline);
  border-radius: var(--radius, 18px);
  background: var(--bubble);
  box-shadow: 0 6px calc(var(--shadow) * 1px) #0002;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Fluffy Cat Ears: anchored directly above top border */
.fluffy-cat-ears {
  position: absolute;
  left: 0;
  right: 0;
  top: -36px;
  height: 40px;
  pointer-events: none;
  z-index: 1;
}

.fluffy-cat-ears svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Fluffy Cat Header Band: houses the facial expressions */
.fluffy-cat-header-band {
  width: 100%;
  height: 32px;
  border-top-left-radius: calc(var(--radius, 18px) - var(--border, 2.5px));
  border-top-right-radius: calc(var(--radius, 18px) - var(--border, 2.5px));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.fluffy-cat-face {
  height: 24px;
  width: auto;
  max-width: 160px;
  display: block;
}

/* Fluffy Cat Tail: independent layer on right border */
.fluffy-cat-tail {
  position: absolute;
  right: -30px;
  top: 6px;
  width: 40px;
  height: 64px;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 3px 3px #0002);
}

.fluffy-cat-tail svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Content Area: expands cleanly below the header */
.chat-wrap.fluffy-cat .message-content {
  padding: var(--padding);
  box-sizing: border-box;
  width: 100%;
  display: block;
}

.chat-wrap.fluffy-cat .badge {
  position: absolute;
  right: 12px;
  top: 36px;
  z-index: 4;
}

/* Mini thumbnail in frame selector */
.frame-mini.fluffy-cat {
  position: relative;
  border: 2px solid #5a3848;
  border-radius: 7px;
  background: #fffdfd;
  overflow: visible;
}
.frame-mini.fluffy-cat::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 8px;
  background: #ffe3ec;
  border-bottom: 1.5px solid #5a3848;
  border-radius: 4px 4px 0 0;
}
.frame-mini.fluffy-cat::after {
  content: '';
  position: absolute;
  left: 4px;
  top: -7px;
  width: 7px;
  height: 8px;
  background: #ffe3ec;
  border: 1.5px solid #5a3848;
  border-radius: 4px 4px 0 0;
  box-shadow: 22px 0 0 -1.5px #ffe3ec, 22px 0 0 0 #5a3848;
}