/* 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: #24211e; font-family: var(--body); }
.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 #24191120); }
.fox-launcher:hover img { transform: rotate(-6deg) translateY(-.3rem); }
.fox-launcher > span { background: #fffaf1; padding: .35rem .6rem; border: 1px solid #c6b99f; border-radius: 2rem; font-size: .75rem; box-shadow: 0 .2rem .8rem #24211e10; line-height: 1.3; }
.fox-launcher[aria-expanded=true] > span { background: #24211e; color: #fffaf1; border-color: #24211e; }
.fox-hint { position: absolute; right: 1rem; bottom: calc(100% + .75rem); width: 16rem; padding: 1.1rem 2.1rem 1.1rem 1.1rem; border: 1px solid #b9a88d; border-radius: 1rem 1rem .15rem 1rem; background: #fffaf1; box-shadow: 0 .5rem 1.5rem #24191112; }
.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: #6c6258; 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 #b7a389; border-radius: 1.25rem; background: #fffaf1; box-shadow: 0 1.5rem 5rem #24191128; }
.fox-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: #efe2c5; border-bottom: 1px solid #d9c9ae; }
.fox-panel__header > span { font-weight: 750; font-size: 1.25rem; }
.fox-panel__header small { font-size: .75rem; font-weight: 400; color: #71604e; margin-left: .5rem; }
.fox-panel__header button { background: transparent; border: 1px solid #c8b595; color: #24211e; width: 2.2rem; height: 2.2rem; 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: #8d3434; margin: 0 0 .75rem; }
.fox-panel h2 { font-family: var(--display); 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: #66594b; 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: 3rem; width: 100%; border: 1px solid #d5c8b4; border-radius: .65rem; background: #f7efe0; padding: .85rem 1rem; color: #24211e; font-size: .9rem; line-height: 1.3; text-align: left; cursor: pointer; }
.fox-option > .ui-arrow { color: #a02b31; font-size: 1rem; }
.fox-option:hover { background: #ead8b4; border-color: #b9a17c; }
.fox-option--primary { background: #b92b32; border-color: #b92b32; color: #fffaf1; }
.fox-option--primary > .ui-arrow { color: inherit; }
.fox-option--primary:hover { background: #962029; color: #fffaf1; }
.fox-panel__footer { border-top: 1px solid #e4d8c5; 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: #75634f; 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: 1rem; }
  .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(--cream,#f3efe4); border-top:1px solid #2b241e26; }
  .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; } }