/* @shard speech-bubble-anchored-to-companion */
/* @provides ClarksCompanionHousing.reaction_bubble_anchored */
/* @requires none */
/* public/shared/companion/housing.css
   @shard S5 -- variant-agnostic companion housing classes.

   Base wrapper + inner avatar slot + reaction bubble + idle / cheer / wiggle
   keyframes. Variant-specific visual difference (hollow-tree-window oval for
   Ngaia, comic-cell rotated panel for Oaks, sprite background-image urls, the
   no-bob override for Oaks) is contributed by S10's / S11's variant style
   sheets via the .ngaia / .oaks class modifier on .clarks-companion-housing.

   Reduced-motion verbatim block (Lock 25) is the LAST thing in this file. */

.clarks-companion-housing {
  position: relative;
  display: inline-block;
  min-width: 88px;
  padding: 8px;
  box-sizing: border-box;
  vertical-align: middle;
}

/* HUD-floor minimums per SOLUTION sec.1.1 / sec.1.2.
   Ngaia hollow-tree-window oval eats ~20% radius (Studio R2);
   Oaks comic-cell border eats 14px. The variant CSS in S10/S11 paints the
   actual housing visuals; these floors guarantee the housing is never
   clipped below its tap-target threshold. */
.clarks-companion-housing.ngaia {
  min-height: 52px;
}

.clarks-companion-housing.oaks {
  min-height: 46px;
}

.clarks-companion-avatar {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-origin: 50% 60%;
}

.clarks-companion-housing.ngaia .clarks-companion-avatar {
  width: 72px;
  height: 72px;
}

.clarks-companion-housing.oaks .clarks-companion-avatar {
  width: 60px;
  height: 60px;
}

/* Reaction bubble -- FLOW-POSITIONED (fix-v2 shard:
   speech-bubble-anchored-to-companion). Previously absolute-positioned above
   the housing with z-index, which on Oaks overlapped the leftmost scaffold
   rect on reaction lines >40 chars. The bubble now lives in the document
   flow as a block-level sibling of the avatar inside the housing wrapper;
   the scaffold below the housing is pushed down by the bubble height while
   a reaction is showing, and reclaims the space when empty. */
.clarks-companion-reaction {
  position: relative;
  display: block;
  margin-top: 6px;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a1a;
  font: 500 14px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  white-space: normal;
  word-break: normal;
}

.clarks-companion-reaction:not(:empty) {
  opacity: 1;
}

/* Empty bubble collapses to zero so it doesn't reserve layout space between
   reactions. */
.clarks-companion-reaction:empty {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  overflow: hidden;
}

/* Optional engine-set anchor direction.
   Default = below (no attribute set, the bubble flows DOWNWARD beneath the
   avatar). When the engine sets data-anchor-direction="above" on the
   housing wrapper, flip with order:-1 inside a flex-column housing so the
   bubble flows ABOVE the avatar. */
.clarks-companion-housing[data-anchor-direction="above"] {
  display: flex;
  flex-direction: column;
}

.clarks-companion-housing[data-anchor-direction="above"] .clarks-companion-reaction {
  order: -1;
  margin-top: 0;
  margin-bottom: 6px;
}

.clarks-companion-housing[data-anchor-direction="above"] .clarks-companion-reaction:empty {
  margin-bottom: 0;
}

/* Idle bob -- Ngaia 2.8s slow drowsy dormouse (SOLUTION sec.1.1).
   Oaks variant override (no bob) is contributed by S11's style.css:
       .oaks .clarks-companion-bob { animation: none; }
   so we keep the keyframe declared once here and let cascade decide. */
.clarks-companion-bob {
  animation: clarks-bob 2.8s ease-in-out infinite;
  animation-fill-mode: both;
  will-change: transform;
}

@keyframes clarks-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-4px) rotate(2deg); }
}

/* One-shot cheer keyframe -- applied on the housing wrapper when
   ClarksCompanion.cheer() fires. Subtle scale pulse; the variant CSS may
   layer extra visual flourish (knit-densify feTurbulence on Ngaia,
   halftone-POW on Oaks) via the same class.                              */
.clarks-companion-cheer {
  animation: clarks-cheer 600ms ease-out;
  will-change: transform;
}

@keyframes clarks-cheer {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08); }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* One-shot wiggle on the avatar -- ClarksCompanion.wiggle().
   A small head-tilt nudge; the engine adds this class on demand and removes
   it after the animation completes via standard CSS animation lifecycle.   */
.clarks-companion-wiggle {
  animation: clarks-wiggle 400ms ease-out;
  will-change: transform;
}

@keyframes clarks-wiggle {
  0%   { transform: rotate(0); }
  30%  { transform: rotate(-6deg); }
  60%  { transform: rotate(5deg); }
  100% { transform: rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  path[stroke-dasharray] { stroke-dashoffset: 0 !important; }
  .achieve::before, .companion-housing::before { animation-play-state: paused !important; }
}