/* Coordination only; visual tokens and Phosphor icons remain in style.css. */
:root {
  --widget-right: max(clamp(16px, 3vw, 28px), env(safe-area-inset-right, 0px));
  --widget-left: max(12px, env(safe-area-inset-left, 0px));
  --widget-bottom: max(clamp(16px, 3vw, 28px), env(safe-area-inset-bottom, 0px));
  --widget-top: max(12px, env(safe-area-inset-top, 0px));
}

/* Stay below payment/admin dialogs and their scrims. Music remains beside chat. */
body > .chat-fab {
  right: var(--widget-right);
  bottom: var(--widget-bottom);
  z-index: 55;
}
body > .chat-fab.music-fab {
  right: calc(var(--widget-right) + 68px);
  bottom: var(--widget-bottom);
}
body > .music-status {
  right: var(--widget-right);
  bottom: calc(var(--widget-bottom) + 68px);
  z-index: 57;
  margin: 0;
  max-height: 92px;
  overflow: auto;
  overflow-wrap: anywhere;
  width: min(280px, calc(100vw - var(--widget-left) - var(--widget-right)));
}
body > .chat-panel {
  --chat-bottom: calc(var(--widget-bottom) + 68px);
  right: var(--widget-right);
  left: auto;
  bottom: var(--chat-bottom);
  z-index: 56;
  width: min(380px, calc(100vw - var(--widget-left) - var(--widget-right)));
  max-height: min(560px, max(0px, calc(100vh - var(--chat-bottom) - var(--widget-top))));
  max-height: min(560px, max(0px, calc(100dvh - var(--chat-bottom) - var(--widget-top))));
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}
/* Reserve room for a loading/error notice instead of covering chat or either FAB. */
body > .music-status:not([hidden]) ~ .chat-panel {
  --chat-bottom: calc(var(--widget-bottom) + 172px);
}
.chat-panel .chat-log {
  min-height: 0;
  overscroll-behavior: contain;
}
.chat-panel .chat-panel__head,
.chat-panel .chat-form,
.chat-panel .chat-foot {
  flex-shrink: 0;
}
.chat-panel .chat-input {
  min-width: 0;
  width: 0;
  font-size: 16px;
}
.chat-panel .chat-hint { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  body > .chat-panel,
  body > .chat-fab { transition: none; }
  .chat-panel .chat-msg--typing .dot { animation: none; }
}