.integrated-rabbits .rabbit-companion {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: grid;
  align-items: center;
  min-height: 364px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #ddd8c5;
  border-radius: 22px;
  background: #fbf1dd;
  color: #354b3d;
}

.rabbit-companion[hidden], .rabbit-companion [hidden] { display: none !important; }

.companion-copy {
  position: relative;
  z-index: 1;
  width: min(48%, 380px);
  padding: 32px 0 36px clamp(22px, 5%, 46px);
  pointer-events: none;
}

.companion-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: #536749;
  font-size: 13px;
  letter-spacing: .11em;
}

.companion-kicker svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.integrated-rabbits .rabbit-companion h2 {
  margin: 0 0 12px;
  font: 400 clamp(30px, 4vw, 44px)/1.25 var(--serif);
  letter-spacing: .07em;
}

.companion-status {
  min-height: 3.55em;
  max-width: 19em;
  margin: 0 0 18px;
  color: #405843;
  font-size: 15px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.companion-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.integrated-rabbits .companion-actions button {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 13px;
  white-space: nowrap;
}

.integrated-rabbits .companion-write {
  border-color: #435b4d;
  background: #435b4d;
  color: #fffdf4;
}

.integrated-rabbits .companion-write:hover:not(:disabled) { background: #334b3e; }
.integrated-rabbits .companion-quiet { border-color: #a3aa8f; background: #fffdf060; color: #405843; }
.integrated-rabbits .companion-quiet[aria-pressed='true'] { background: #e8edda; }

.companion-scene {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(70%, 620px);
  overflow: hidden;
}

.companion-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/art/rabbit-nook-v01.png') right bottom / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 35%);
  pointer-events: none;
}

.companion-actor {
  --approach-distance: clamp(28px, 6vw, 57px);
  position: absolute;
  top: 82%;
  left: 75%;
  width: min(61%, 292px);
  aspect-ratio: 1;
  transform: translate(-50%, -87.9%);
  transition: transform .56s cubic-bezier(.22,.69,.29,1);
}

.rabbit-companion[data-familiar='true'] .companion-actor { --approach-distance: clamp(36px, 8vw, 74px); }

.companion-actor[data-near='true'] {
  transform: translate(calc(-50% - var(--approach-distance)), calc(-87.9% + 11px));
}

.companion-pose { position: absolute; inset: 0; transform-origin: 54% 87.9%; animation: companion-breathe 4.6s ease-in-out infinite; }
.companion-pose canvas { display: block; width: 100%; height: 100%; }
.companion-fallback { position: absolute; left: 3%; bottom: 12.1%; width: 94%; }
.companion-fallback .personal-rabbit-art { width: 100%; height: auto; aspect-ratio: 3 / 2; }
.companion-fallback .rabbit-dream { display: none; }
.companion-fallback .rabbit-breath { animation: none; }
.companion-shadow {
  position: absolute;
  inset: 81% 8% 7% 6%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #62593b42, #62593b00 68%);
  transform: scaleY(.65);
}

.integrated-rabbits .companion-head, .integrated-rabbits .companion-body {
  position: absolute;
  z-index: 2;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 48%;
  background: transparent;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.integrated-rabbits .companion-head { left: 7%; top: 35%; width: 43%; height: 46%; cursor: grab; }
.integrated-rabbits .companion-head:active { cursor: grabbing; }
.integrated-rabbits .companion-body { left: 51%; top: 47%; width: 43%; height: 40%; cursor: pointer; }
.integrated-rabbits .companion-head:hover:not(:disabled), .integrated-rabbits .companion-body:hover:not(:disabled) { background: transparent; }
.integrated-rabbits .companion-head:focus-visible, .integrated-rabbits .companion-body:focus-visible { outline: 2px dashed #647e55; outline-offset: 5px; }

.companion-hint {
  position: absolute;
  right: 20px;
  bottom: 12px;
  margin: 0;
  color: #4d6247;
  font-size: 12px;
  letter-spacing: .06em;
}

.companion-hint span { margin-inline: 4px; }

.companion-gift {
  position: absolute;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 4px;
  left: calc(var(--bite-x, 25%) - 27%);
  top: calc(var(--bite-y, 49%) + 14%);
  width: clamp(32px, 22%, 57px);
  height: 13%;
  padding: 4%;
  border: 1px solid #f6fff1;
  border-radius: 7px 4px 9px 4px;
  background: linear-gradient(142deg, #fffcdd, #fff9e8 37%, #f1e4f7 75%, #e3edca);
  box-shadow: 0 0 24px 3px #fff9d8dc, 0 5px 13px #9f896945;
  transform: translate(-50%, -50%) rotate(-12deg);
  transition: left .59s cubic-bezier(.22,.7,.24,1), top .55s ease, transform .55s ease, opacity .55s ease;
  pointer-events: none;
}

.companion-gift i { height: 1px; border-radius: 1px; background: #78896c9e; }
.companion-gift i:last-child { width: 62%; }
.rabbit-companion[data-phase='catching'] .companion-gift { left: var(--bite-x, 25%); transform: translate(-50%, -50%) rotate(8deg); }
.rabbit-companion[data-phase='eating'] .companion-gift { left: var(--bite-x, 25%); top: var(--bite-y, 49%); transform: translate(-50%, -50%) rotate(16deg) scale(.16); opacity: 0; }

.companion-mark {
  position: absolute;
  inset: 45% 8% 14% 51%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #ffebafa0 0%, #ecdbfd70 33%, #fff4d800 70%);
  opacity: 0;
  pointer-events: none;
}

.rabbit-companion[data-phase='kept'] .companion-mark { animation: companion-kept 1.6s ease both; }
.rabbit-companion[data-quiet='true'] .companion-pose { animation-duration: 6.5s; }
.rabbit-companion[data-suspended='true'] .companion-pose, body:has(dialog[open]) .companion-pose { animation-play-state: paused; }

#rabbit-home-pet-controls:not(:empty) { margin: 0 0 24px; }
#rabbit-home-pet-controls #personal-pet {
  position: relative;
  inset: auto;
  width: min(100%, 360px);
  max-width: 100%;
  box-shadow: none;
  backdrop-filter: none;
}
#rabbit-home-pet-controls #personal-pet.is-collapsed { width: fit-content; }
#rabbit-home-pet-controls #personal-pet .pet-choice, #rabbit-home-pet-controls .pet-breed-choice { display: flex; }
#rabbit-home-pet-controls #personal-pet.is-collapsed .pet-choice { display: none; }
#rabbit-home-pet-controls #personal-pet[data-scope='personal'] .pet-open .personal-rabbit-art { display: none; }
#rabbit-home-pet-controls #personal-pet .pet-open { padding: 6px 12px; border: 0; background: transparent; }

@keyframes companion-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.007, 1.019); }
}

@keyframes companion-kept {
  0%, 100% { opacity: 0; transform: scale(.83); }
  30% { opacity: .85; transform: scale(1.04); }
}

@container (max-width: 550px) {
  .companion-scene { position: relative; width: 100%; height: clamp(182px, 47cqw, 236px); }
  .companion-scene::before { mask-image: none; }
  .companion-actor { top: 82%; left: 72%; width: min(57%, 196px); }
  .companion-copy { width: 100%; padding: 16px 20px 18px; background: #fff9eb; }
  .companion-kicker { margin-bottom: 7px; }
  .integrated-rabbits .rabbit-companion h2 { margin-bottom: 7px; font-size: 30px; }
  .companion-status { max-width: none; min-height: 2.9em; margin-bottom: 12px; font-size: 14px; }
  .companion-hint { right: 14px; bottom: 1px; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .companion-actor, .companion-gift { transition: none; }
  .companion-pose, .rabbit-companion[data-phase='kept'] .companion-mark { animation: none; }
}