/* Scoped companion: no changes to the housing layout or mobile geometry. */
.scrappy-companion {
  --scrappy-size: 160px;
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  width: min(360px, calc(100vw - 32px));
  z-index: 25;
  pointer-events: none;
  color: #344839;
  font: 400 14px/1.3 ui-sans-serif, system-ui, sans-serif;
}
.scrappy-companion [hidden],
.scrappy-companion[hidden],
body:is(.access-pending, .access-locked, .dialog-open, .sidebar-open, .drawer-open, .mobile-keyboard-open) .scrappy-companion {
  display: none !important;
}
.scrappy-stage { height: 220px; position: relative; pointer-events: none; }
.scrappy-position { position: absolute; bottom: -18px; width: var(--scrappy-size); height: var(--scrappy-size); }
.scrappy-bounce { position: relative; width: 100%; height: 100%; transform-origin: 50% 85%; }
.scrappy-sprite {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  pointer-events: none;
}
.scrappy-position[data-direction="left"] .scrappy-sprite { transform: scaleX(-1); }
.scrappy-companion .scrappy-fox {
  position: absolute;
  inset: 25% 10% 15%;
  border: 0;
  border-radius: 35%;
  padding: 0;
  background: transparent;
  box-shadow: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  cursor: grab;
}
.scrappy-companion .scrappy-fox:active { cursor: grabbing; }
.scrappy-shadow { position: absolute; width: 46%; height: 6px; border-radius: 50%; background: #07191640; left: 27%; bottom: 15%; filter: blur(2px); }
.scrappy-reaction { position: absolute; top: 0; left: 35%; color: #765131; font: bold 20px/1.2 ui-monospace, monospace; white-space: nowrap; pointer-events: none; }
.scrappy-thought { position: absolute; bottom: 76%; left: 55%; transform: translateX(-50%); padding: 8px 12px; border: 2px solid #66765b; border-radius: 16px; background: #fffdf1; color: #344839; font: 600 14px/1.2 ui-monospace, monospace; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 0 #07191640; }
.scrappy-thought::before, .scrappy-thought::after { content: ""; position: absolute; border: 2px solid #66765b; border-radius: 50%; background: #fffdf1; }
.scrappy-thought::before { width: 9px; height: 9px; right: 23px; bottom: -11px; }
.scrappy-thought::after { width: 5px; height: 5px; right: 17px; bottom: -18px; }
.scrappy-toolbar { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.scrappy-name { padding: 8px 10px; font-weight: 600; background: #fffdf1; border: 1px solid #a2ad91; border-radius: 8px; }
.scrappy-companion button:not(.scrappy-fox),
.scrappy-companion summary {
  font: inherit;
  font-weight: 600;
  color: #344839;
  background: #fffdf1;
  border: 1px solid #a2ad91;
  border-radius: 8px;
  padding: 8px 10px;
  min-height: 40px;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 5px #07191615;
}
.scrappy-companion button:not(.scrappy-fox):hover,
.scrappy-companion summary:hover,
.scrappy-companion button[aria-pressed="true"] { background: #e8ecdd; }
.scrappy-companion :is(button, summary):focus-visible { outline: 3px solid #95653d; outline-offset: 3px; }
.scrappy-menu { pointer-events: auto; }
.scrappy-menu summary { list-style: none; }
.scrappy-menu summary::-webkit-details-marker { display: none; }
.scrappy-menu summary::after { content: " ▴"; }
.scrappy-menu[open] summary::after { content: " ▾"; }
.scrappy-actions { position: absolute; right: 0; bottom: calc(100% + 8px); display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; width: 220px; max-height: min(320px, 60dvh); overflow-y: auto; overscroll-behavior: contain; background: #fffdf1; border: 1px solid #a2ad91; border-radius: 12px; box-shadow: 0 8px 24px #07191628; }
.scrappy-actions button:last-child { grid-column: 1 / -1; }
.scrappy-show { float: right; }
@media (max-width: 800px), (max-width: 950px) and (max-height: 520px) {
  .scrappy-companion { --scrappy-size: 140px; width: min(300px, calc(100vw - 24px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }
  .scrappy-stage { height: 190px; }
  .scrappy-companion button:not(.scrappy-fox), .scrappy-companion summary { min-height: 44px; }
}
@media print { .scrappy-companion { display: none !important; } }