/* Optional desktop companion; mobile activities open on explicit request. */
.fox-companion { position: fixed; z-index: 60; right: max(1.5rem,env(safe-area-inset-right)); bottom: max(1rem,env(safe-area-inset-bottom)); color: var(--brand-ink); font-family: var(--brand-font-body),sans-serif; }
.fox-launcher { position: relative; display: grid; justify-items: center; border: 0; background: transparent; padding: 0; cursor: pointer; width: 7rem; color: inherit; }
.fox-launcher img { width: 6.6rem; height: 6.6rem; object-fit: contain; transform-origin: bottom center; transition: transform .25s ease; filter: drop-shadow(0 .25rem .2rem color-mix(in srgb,var(--brand-ink) 13%,transparent)); }
.fox-launcher:hover img { transform: rotate(-6deg) translateY(-.3rem); }
.fox-launcher > span { background: var(--brand-paper); padding: .35rem .6rem; border: 1px solid var(--brand-line); border-radius: var(--brand-radius-pill); font-size: .75rem; box-shadow: var(--brand-shadow-small); line-height: 1.3; }
.fox-launcher[aria-expanded=true] > span { background: var(--brand-ink); color: var(--brand-paper); border-color: var(--brand-ink); }
.fox-hint { position: absolute; right: 1rem; bottom: calc(100% + .75rem); width: 16rem; padding: 1.1rem 2.1rem 1.1rem 1.1rem; border: 1px solid var(--brand-line); border-radius: var(--brand-control-radius) var(--brand-control-radius) calc(var(--brand-control-radius)/4) var(--brand-control-radius); background: var(--brand-paper); box-shadow: var(--brand-shadow-medium); }
.fox-hint p { margin: 0; font-size: .9rem; line-height: 1.5; }
.fox-hint button { position: absolute; right: .2rem; top: .2rem; width: 2rem; height: 2rem; border: 0; color: var(--brand-muted); background: transparent; cursor: pointer; font-size: 1.2rem; }
.fox-panel { position: absolute; right: 0; bottom: calc(100% + .7rem); width: 23rem; max-width: calc(100vw - 2rem); max-height: calc(100dvh - 16rem); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--brand-line); border-radius: var(--brand-card-radius); background: var(--brand-paper); box-shadow: var(--brand-shadow-large); }
.fox-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: var(--brand-cream); border-bottom: 1px solid var(--brand-line); }
.fox-panel__header > span { font-weight: 750; font-size: 1.25rem; }
.fox-panel__header small { font-size: .75rem; font-weight: 400; color: var(--brand-muted); margin-left: .5rem; }
.fox-panel__header button { background: transparent; border: 1px solid var(--brand-line); color: var(--brand-ink); width: var(--brand-minimum-target); height: var(--brand-minimum-target); border-radius: 50%; font-size: 1.35rem; cursor: pointer; }
.fox-panel__body { padding: 1.4rem; }
.fox-panel .fox-kicker { font-size: .75rem; line-height: 1.5; color: var(--brand-red-dark); margin: 0 0 .75rem; }
.fox-panel h2 { font-family: var(--brand-font-display),sans-serif; font-size: 1.85rem; font-weight: 700; line-height: 1.1; letter-spacing: -.035em; margin: 0 0 1rem; text-align: left; text-wrap: initial; }
.fox-panel h2:focus { outline: 0; }
.fox-panel p:not(.fox-kicker) { font-size: .95rem; line-height: 1.6; color: var(--brand-muted); margin: 0 0 1.2rem; }
.fox-options { display: grid; gap: .6rem; }
.fox-option { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: var(--brand-minimum-target); width: 100%; border: 1px solid var(--brand-line); border-radius: var(--brand-control-radius); background: var(--brand-cream); padding: .85rem 1rem; color: var(--brand-ink); font-size: .9rem; line-height: 1.3; text-align: left; cursor: pointer; }
.fox-option > .ui-arrow { color: var(--brand-red-dark); font-size: 1rem; }
.fox-option:hover { background: var(--brand-peach); border-color: var(--brand-line); }
.fox-option--primary { background: var(--brand-red); border-color: var(--brand-red); color: var(--brand-paper); }
.fox-option--primary > .ui-arrow { color: inherit; }
.fox-option--primary:hover { background: var(--brand-red-dark); color: var(--brand-paper); }
.fox-panel__footer { border-top: 1px solid var(--brand-line); display: flex; align-items: center; justify-content: space-between; padding: .8rem 1.25rem; gap: 1rem; }
.fox-panel__footer button { padding: .4rem 0; border: 0; background: transparent; cursor: pointer; color: var(--brand-muted); font-size: .75rem; }
.fox-panel__footer [data-fox-quiet] { margin-left: auto; }
.fox-companion.is-happy .fox-launcher img { animation: fox-thanks .65s ease both; }
.fox-companion.is-peeking .fox-launcher img { animation: fox-hello 1.1s ease both; }
body.menu-open .fox-companion, .fox-companion.is-editing:not(.is-open) { visibility: hidden; pointer-events: none; }
@keyframes fox-thanks { 25% { transform: translateY(-.7rem) rotate(-8deg); } 60% { transform: translateY(-.35rem) rotate(8deg); } }
@keyframes fox-hello { 20% { transform: rotate(-8deg); } 50% { transform: rotate(5deg); } 80% { transform: rotate(-3deg); } }
@media(max-width:55rem) {
  .fox-companion { right: max(.65rem,env(safe-area-inset-right)); bottom: max(.65rem,env(safe-area-inset-bottom)); }
  .fox-launcher { width: 4.5rem; }
  .fox-launcher img { width: 4.5rem; height: 4.5rem; }
  .fox-launcher > span { font-size: .7rem; padding: .2rem .45rem; }
  .fox-hint { width: 14rem; right: .25rem; }
  .fox-panel { width: min(23rem,calc(100vw - 1.3rem)); max-width: calc(100vw - 1.3rem); max-height: calc(100dvh - 12.5rem); border-radius: var(--brand-card-radius); }
  .fox-panel__body { padding: 1.2rem; }
}
@media(prefers-reduced-motion:reduce) {
  .fox-launcher img, .fox-stage__art img { animation: none !important; transition: none !important; transform: none !important; }
}

/* Compact mobile companion: reserve the dock instead of covering content. */
@media (max-width:47rem) {
  body:has(.fox-companion:not([hidden])) { padding-bottom:calc(4rem + env(safe-area-inset-bottom)); }
  .fox-companion { bottom:0; right:0; left:0; width:100%; padding:.4rem 1rem calc(.4rem + env(safe-area-inset-bottom)); background:var(--brand-cream); border-top:1px solid color-mix(in srgb,var(--brand-ink) 15%,transparent); }
  .fox-companion .fox-launcher { width:auto; height:2.7rem; display:flex; flex-direction:row; gap:.6rem; align-items:center; margin-left:auto; }
  .fox-companion .fox-launcher img { width:2.5rem; height:2.5rem; object-fit:contain; transform:none; }
  .fox-companion .fox-launcher span { position:static; width:auto; transform:none; margin:0; }
  .fox-companion .fox-panel { bottom:4rem; max-height:calc(100dvh - 5rem); }
  .fox-hint { display:none !important; }
  body:has([data-brew-calculator]) .fox-companion:not(.is-open) { position:static; border:0; padding:1rem; }
}

@media (max-width:47rem) { .fox-companion.is-on-stage { visibility: hidden; pointer-events: none; } }