/* ============================================================
   LIVE CHAT WIDGET — Harbor Grit (human layer)
   Roundtable: Website Is the Demo (2026-08-26)
   Owner: creative-director (Delacroix) · requires live-tokens.css
   Load AFTER /assets/marcus-harbor.css (the .dc-* base skin).
   Adds: presence square, typing indicator, handoff notice,
   offline honesty. No AI badge, no robot, no glow.
   ============================================================ */

/* --- Presence: the chat's single live indicator --- */
.hg-chat-presence {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  background: var(--hg-ok);
}

.hg-chat[data-conn="offline"] .hg-chat-presence {
  background: var(--hg-offline);
}

/* --- Header status line: one short human sentence --- */
.hg-chat-status {
  font-family: var(--hg-font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--hg-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* --- Typing indicator: three flat squares, a quiet step --- */
.hg-chat-typing .hg-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  background: var(--hg-surface);
  border: 2px solid var(--hg-border);
}

.hg-typing-dots span {
  width: 6px;
  height: 6px;
  background: var(--hg-ink);
  animation: hg-typing-step 0.9s ease-in-out infinite;
}

.hg-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.hg-typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes hg-typing-step {
  0%, 60%, 100% { opacity: 0.35; }
  30%           { opacity: 1; }
}

/* --- Handoff: reads as a notice, not a message --- */
.hg-chat-handoff .dc-bubble {
  background: var(--hg-surface-alt);
  color: var(--hg-muted);
  box-shadow: none;
  border-top: var(--hg-rule);
  border-bottom: var(--hg-rule);
  border-left: 2px solid var(--hg-border);
  border-right: 2px solid var(--hg-border);
  font-size: 13px;
}

/* --- Offline honesty: never fake a reply --- */
.hg-chat[data-conn="offline"] .dc-input::placeholder {
  color: var(--hg-offline);
}

/* --- A11y: focus ring for the live surface (never removed) --- */
.hg-chat .dc-send:focus-visible,
.hg-chat .dc-input:focus-visible,
.hg-chat .dc-chip:focus-visible {
  outline: 2px solid var(--hg-signal);
  outline-offset: 2px;
}

/* --- Reduce motion: typing dots become a static line --- */
@media (prefers-reduced-motion: reduce) {
  .hg-typing-dots span {
    animation: none;
    opacity: 0.35;
  }
  .hg-typing-dots span:nth-child(1) { opacity: 1; }
}