.companion { position: fixed; z-index: 5; bottom: 18px; right: 24px; width: clamp(110px, 15vw, 180px); aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.companion:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 24px; }
.companion-figure { display: block; width: 100%; height: 100%; transform-origin: 50% 80%; pointer-events: none; }
.companion img { width: 100%; height: 100%; display: block; pointer-events: none; }
.companion-blink { position: absolute; inset: 0; opacity: 0; mask-image: radial-gradient(ellipse 7% 7% at 39% 46%, black 78%, transparent 100%), radial-gradient(ellipse 7% 7% at 62% 41%, black 78%, transparent 100%); }
@keyframes companion-blink { 0%, 65%, 72%, 100% { opacity: 0; } 67%, 70% { opacity: 1; } }
@keyframes companion-dance { 0%,100% { transform: rotate(-7deg) translateY(0); } 25% { transform: rotate(0) translateY(-10px) scale(1.02,.98); } 50% { transform: rotate(7deg) translateY(0); } 75% { transform: rotate(0) translateY(-10px) scale(.98,1.02); } }
.companion.is-dragging { cursor: grabbing; }
@media (prefers-reduced-motion: no-preference) {
 .companion-blink { animation: companion-blink 4.6s linear infinite; }
 .companion.is-dragging .companion-figure { animation: companion-dance .65s ease-in-out infinite; }
}
.companion.is-dragging .companion-blink { animation: none; opacity: 0; }

/* Companion conversations stay separate from the draggable button. */
.companion-panel { position: fixed; z-index: 6; width: min(320px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 20px; color: var(--ink); background: var(--paper); border: 1px solid #9995; border-radius: 20px; box-shadow: 0 10px 40px #0000000d; }
.companion-panel[hidden] { display: none; }
.companion-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .12em; }
.companion-panel-heading > span { display: flex; align-items: center; gap: 8px; }
.companion-status { width: 6px; height: 6px; background: #809782; border-radius: 50%; }
.companion-close { font: 23px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: inherit; background: transparent; border: 0; width: 44px; height: 44px; margin: -12px -12px -8px 0; cursor: pointer; border-radius: 50%; }
.companion-message { font-size: 15px; line-height: 1.6; margin: 16px 0 18px; }
.companion-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.companion-actions button { font: 12px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif; color: inherit; background: transparent; border: 1px solid #9996; border-radius: 24px; min-height: 44px; padding: 10px 13px; cursor: pointer; }
.companion-actions button span { margin-left: 5px; }
.companion-actions button:hover, .companion-close:hover { background: #9992; }
.companion-panel button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.companion-hint { font-size: 11px; margin: 16px 0 0; opacity: .8; }
/* A little speech bubble by the mascot's head, rather than a caption. */
.companion { bottom: auto; right: auto; left: calc(50% - clamp(110px, 15vw, 180px) / 2); top: calc(50% - 240px); }
.companion-invite { position: absolute; z-index: 1; right: 0; top: -10px; padding: 9px 14px; border: 1px solid #9996; border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 3px 12px #00000008; font: 12px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif; white-space: nowrap; pointer-events: none; }
.companion-invite::after { content: ''; position: absolute; bottom: -5px; left: 17px; width: 8px; height: 8px; background: var(--paper); border-right: 1px solid #9996; border-bottom: 1px solid #9996; transform: rotate(45deg); }
.companion[aria-expanded="true"] .companion-invite { visibility: hidden; }
@media (max-height: 600px) { body[data-companion-section="home"] main { min-height: 400px; } }
.companion.is-resting .companion-blink { opacity: 1; animation: none; }
.companion.is-resting .companion-figure { animation: none !important; transform: rotate(-8deg); }
@keyframes companion-highfive { 0%,100% { transform: translateY(0) rotate(0); } 30%,65% { transform: translateY(-22px) rotate(-12deg) scale(1.07); } 45% { transform: translateY(-14px) rotate(10deg) scale(1.07); } }
@media (prefers-reduced-motion: no-preference) {
  .companion.is-dancing .companion-figure { animation: companion-dance .6s ease-in-out 4; }
  .companion.is-highfive .companion-figure { animation: companion-highfive .8s ease-in-out 2; }
}

/* Keep cursor lean separate from the figure's dance and pet reactions. */
.companion-look { display: block; width: 100%; height: 100%; pointer-events: none; transform-origin: 50% 80%; }
.companion-figure { position: relative; }
@keyframes companion-pet {
  0%, 100% { transform: translateY(0) scale(1); }
  20%, 60% { transform: translateY(3px) scale(1.04, .94) rotate(-3deg); }
  40%, 80% { transform: translateY(-9px) scale(.98, 1.03) rotate(3deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .companion-look { transform: translate(var(--look-x, 0px), var(--look-y, 0px)) rotate(var(--look-tilt, 0deg)); transition: transform 180ms ease-out; }
  .companion.is-curious .companion-look { transform: translate(var(--look-x, 0px), -5px) rotate(var(--look-tilt, 0deg)) scale(1.035); }
  .companion.is-petted .companion-figure { animation: companion-pet 950ms ease-in-out 2; }
}

/* A quiet nod into an idle nap, without continuous sleep animation. */
@keyframes companion-doze {
  from { transform: rotate(0); }
  to { transform: rotate(-8deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .companion.is-auto-sleeping .companion-figure { animation: companion-doze 1.2s ease-out both !important; }
}

@keyframes companion-wave { 0%,100% { transform: rotate(0); } 20%,60% { transform: rotate(-9deg) translateY(-5px); } 40%,80% { transform: rotate(9deg) translateY(-5px); } }

/* Brief replies and an unobtrusive way to tuck the companion away. */
.companion[hidden], .companion-restore[hidden], .companion-toast[hidden] { display: none; }
.companion.has-toast .companion-invite { visibility: hidden; }
.companion-toast { position: fixed; z-index: 7; width: max-content; max-width: min(260px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 13px 16px; border: 1px solid #9995; border-radius: 18px 18px 18px 5px; background: var(--paper); color: var(--ink); box-shadow: 0 6px 24px #0000000c; font-size: 13px; line-height: 1.6; pointer-events: none; }
.companion-restore { position: fixed; bottom: 20px; right: 20px; width: 48px; height: 48px; padding: 3px; border: 1px solid #9995; border-radius: 50%; background: var(--paper); cursor: pointer; }
.companion-restore img { width: 100%; height: 100%; object-fit: contain; }
.companion-restore:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* Reserve footer space for the companion. */
body:not([data-companion-section="home"]) .journal-footer { padding-bottom:160px; }
.companion-restore { z-index:8; display:flex; align-items:center; gap:7px; width:auto; padding:5px 12px 5px 5px; border-radius:30px; color:var(--ink); }
.companion-restore img { width:36px; height:36px; }
.companion-restore span { font:11px/1.3 'Helvetica Neue',Helvetica,Arial,sans-serif; }