.assistant-widget {
  --assistant-ink: #262626;
  --assistant-paper: #f5f1eb;
  --assistant-surface: #fffdf9;
  --assistant-accent: #c86238;
  position: fixed;
  z-index: 50;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  width: 100px;
  pointer-events: none;
}

.assistant-widget [hidden] { display: none !important; }

.assistant-launcher {
  position: relative;
  display: block;
  width: 100px;
  height: 100px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  image-rendering: pixelated;
  pointer-events: auto;
}

.assistant-launcher:focus-visible {
  outline: 3px solid var(--assistant-accent);
  outline-offset: 3px;
}

.assistant-launcher__card,
.assistant-face-overlay {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.assistant-launcher__card { object-fit: contain; }
.assistant-face-overlay { pointer-events: none; }

.assistant-panel {
  position: absolute;
  right: calc(100% + 10px);
  bottom: 0;
  width: 226px;
  padding: 12px;
  border: 2px solid var(--assistant-ink);
  background: var(--assistant-surface);
  color: var(--assistant-ink);
  pointer-events: auto;
  animation: assistant-panel-enter 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.assistant-panel h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
}

.assistant-panel__hint,
.assistant-status {
  margin: 7px 0 0;
  color: #756b62;
  font-size: 12px;
  line-height: 1.55;
}

.assistant-mode-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 10px;
}

.assistant-mode-button {
  min-width: 0;
  min-height: 44px;
  padding: 7px 3px;
  border: 1px solid var(--assistant-ink);
  border-radius: 0;
  background: var(--assistant-surface);
  color: var(--assistant-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.assistant-mode-button[aria-pressed="true"] {
  background: var(--assistant-accent);
  color: var(--assistant-surface);
}

.assistant-mode-button:focus-visible {
  outline: 3px solid var(--assistant-accent);
  outline-offset: 2px;
}

.assistant-song-bubble {
  position: absolute;
  right: -6px;
  bottom: calc(100% + 8px);
  width: 78px;
  aspect-ratio: 80 / 44;
  pointer-events: none;
}

.assistant-song-bubble svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  image-rendering: pixelated;
}

.assistant-song-note {
  transform-box: fill-box;
  transform-origin: center;
  animation: assistant-note-bob 720ms steps(2, end) infinite;
}

.assistant-song-note--two { animation-delay: 220ms; }

@keyframes assistant-note-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes assistant-panel-enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 580px) {
  .assistant-widget {
    right: 10px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 88px;
  }

  .assistant-launcher {
    width: 88px;
    height: 88px;
  }

  .assistant-panel {
    width: min(210px, calc(100vw - 128px));
    padding: 10px;
  }

  .assistant-song-bubble {
    right: -6px;
    width: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .assistant-panel,
  .assistant-song-note { animation: none; }
}