.demo-guide {
  position: fixed;
  z-index: 90;
  width: max-content;
  max-width: min(236px, calc(100vw - 32px));
  padding: 9px 14px;
  border: 1px solid #c5d0e0;
  border-radius: 10px;
  background: #fff;
  color: #172b4d;
  box-shadow: 0 3px 12px #17386918;
  text-align: center;
  pointer-events: none;
}
.demo-guide[hidden] { display: none; }
.demo-guide p { margin: 0; font-size: 1rem; line-height: 1.5; font-weight: 600; }
.demo-guide-arrow {
  position: absolute;
  left: calc(var(--arrow-left, 50%) - 10px);
  top: -28px;
  width: 20px;
  height: 24px;
  color: #245fd2;
  stroke-width: 2.2;
  animation: demo-guide-point 1.8s ease-in-out infinite;
}
.demo-guide[data-side="above"] .demo-guide-arrow { top: auto; bottom: -28px; rotate: 180deg; }
.demo-guide[data-side="right"] .demo-guide-arrow { top: calc(var(--arrow-top) - 12px); left: -28px; rotate: -90deg; }
.demo-guide[data-side="none"] .demo-guide-arrow { display: none; }
.demo-guide-target { outline: 2px solid #245fd2; outline-offset: 3px; }
.demo-guide-inline { position: relative; inset: auto !important; margin: 16px 0 30px; }
.demo-guide-inline .demo-guide-arrow { left: 18px; top: auto; bottom: -26px; rotate: 180deg; }
.demo-guide-toggle {
  position: fixed;
  z-index: 80;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: 60px;
  height: 60px;
  padding: 0;
  border-radius: 50%;
  background: none;
  -webkit-tap-highlight-color: transparent;
}
.demo-guide-toggle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px #17386924);
  transition: transform .18s ease;
}
.demo-guide-toggle:hover img { transform: translateY(-3px); }
.dave-tooltip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  box-shadow: 0 2px 10px #0000000d;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.demo-guide-toggle:hover .dave-tooltip, .demo-guide-toggle:focus-visible .dave-tooltip { opacity: 1; }
.dark-theme .demo-guide { background: #1b2c46; border-color: #526988; color: #f4f7ff; }
.dark-theme .demo-guide-arrow { color: #93b6ff; }
.dark-theme .demo-guide-target { outline-color: #93b6ff; }
@media (max-width: 1200px) {
  .chatting .demo-guide-toggle { bottom: max(96px, env(safe-area-inset-bottom)); }
}
@media (max-width: 700px) {
  .demo-guide-toggle { width: 48px; height: 48px; right: max(14px, env(safe-area-inset-right)); }
}
@keyframes demo-guide-point {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .demo-guide-arrow { animation: none; }
  .demo-guide-toggle img { transition: none; }
  .demo-guide-toggle:hover img { transform: none; }
}