/* A quiet companion; the illustration never intercepts the page beneath it. */
.monk-companion {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}
.monk-companion [hidden] { display: none !important; }
.monk-companion__figure {
  position: absolute;
  right: 12px;
  bottom: 86px;
  width: 52px;
  margin: 0;
  animation: monk-drift 38s ease-in-out infinite;
}
.monk-companion__figure img { display: block; width: 100%; height: auto; }
@keyframes monk-drift {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  32% { transform: translate(-6px, -18vh) rotate(1deg); }
  65% { transform: translate(0, -30vh) rotate(-1deg); }
  82% { transform: translate(-4px, -12vh) rotate(2deg); }
}
.monk-companion[data-paused="true"] .monk-companion__figure,
.monk-companion[data-suspended="true"] .monk-companion__figure {
  animation-play-state: paused;
}
.monk-companion[data-zoomed="true"] .monk-companion__figure { visibility: hidden; }
.monk-companion__controls {
  position: absolute;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  pointer-events: auto;
  font: 12px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  color: #302c25;
}
.monk-companion button {
  appearance: none;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #bcb1a0;
  border-radius: 5px;
  background: #f7f3e9;
  color: #302c25;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.monk-companion button:hover { background: #e9dfce; color: #703e30; }
.monk-companion button:focus-visible { outline: 2px solid #854d3c; outline-offset: 3px; }
.monk-companion__toggle { float: right; }
.monk-companion__menu {
  display: grid;
  gap: 4px;
  min-width: 155px;
  margin-bottom: 8px;
  padding: 6px;
  border: 1px solid #bcb1a0;
  border-radius: 7px;
  background: #f7f3e9;
}
.monk-companion__menu button { width: 100%; border-color: transparent; text-align: left; }
@media (max-width: 1000px) {
  .monk-companion__figure { width: 32px; right: 3px; }
}
@media (max-width: 700px) {
  .monk-companion__figure { width: 30px; right: 2px; bottom: 76px; }
  .monk-companion__controls { right: env(safe-area-inset-right); bottom: max(12px, env(safe-area-inset-bottom)); }
  .monk-companion .monk-companion__toggle {
    writing-mode: vertical-rl;
    width: 24px;
    min-height: 64px;
    padding: 9px 3px;
    border-radius: 4px 0 0 4px;
  }
  .monk-companion__menu { margin-right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .monk-companion__figure { animation: none; }
}
@media print { .monk-companion { display: none; } }