/* Bay Shore Relics — chat widget styles. Uses the site design tokens so the
 * widget follows light/dark mode automatically. Respects prefers-reduced-motion. */
.bsr-chat { position: fixed; right: 18px; bottom: 18px; z-index: 9999; }

.bsr-chat-bubble {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  border: none; cursor: pointer; box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.18s ease, background 0.18s ease;
}
.bsr-chat-bubble:hover, .bsr-chat-bubble:focus-visible { transform: scale(1.06); background: var(--accent-deep); }
.bsr-chat-bubble:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.bsr-chat-panel {
  position: absolute; right: 0; bottom: 68px;
  width: 360px; max-width: calc(100vw - 40px);
  height: 460px; max-height: calc(100dvh - 110px);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; overflow: hidden;
}

.bsr-chat-head {
  background: var(--accent); color: var(--on-accent);
  padding: 10px 12px; display: flex; align-items: baseline; gap: 8px;
}
.bsr-chat-head strong { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.02em; }
.bsr-chat-head span { font-size: 0.8rem; opacity: 0.85; flex: 1; }
.bsr-chat-close {
  background: none; border: none; color: inherit; font-size: 1.6rem; line-height: 1;
  cursor: pointer; padding: 0 4px;
}

.bsr-chat-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.bsr-chat-msg { max-width: 85%; }
.bsr-chat-msg p {
  margin: 0; padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 0.92rem; line-height: 1.45;
  overflow-wrap: anywhere;
}
.bsr-chat-msg--mine { align-self: flex-end; }
.bsr-chat-msg--mine p { background: var(--accent); color: var(--on-accent); }

.bsr-chat-typing p { display: flex; gap: 6px; align-items: center; min-height: 34px; }
.bsr-chat-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  animation: bsr-chat-blink 1.2s infinite ease-in-out;
}
.bsr-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.bsr-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bsr-chat-blink {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.bsr-chat-form {
  display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line);
  background: var(--surface);
}
.bsr-chat-input {
  flex: 1; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); padding: 9px 10px; font-size: 0.95rem;
  font-family: var(--font-body);
}
.bsr-chat-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.bsr-chat-send {
  background: var(--accent); color: var(--on-accent); border: none;
  border-radius: var(--radius-sm); padding: 0 16px; cursor: pointer;
  font-family: var(--font-display); letter-spacing: 0.03em;
}
.bsr-chat-send:hover, .bsr-chat-send:focus-visible { background: var(--accent-deep); }
.bsr-chat-send:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* Screen-reader-only label helper (falls back if style.css lacks one) */
.bsr-chat .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .bsr-chat-bubble { transition: none; }
  .bsr-chat-typing span { animation: none; opacity: 0.7; }
}