/* Support chat widget (templates/_support_chat.html), on base.html,
   demo/_base.html and coming_soon.html. Self-contained: no style.css needed. */
.support-chat {
  /* Own palette, falling back to the site's: the coming-soon splash and
     other pages without style.css load this file on its own. */
  --sc-ink: var(--ink, #0a0a0a);
  --sc-ink-invert: var(--ink-invert, #ffffff);
  --sc-accent-dark: var(--accent-dark, #000000);
  --sc-surface: var(--surface, #ffffff);
  --sc-bg-soft: var(--bg-soft, #fafafa);
  --sc-line: var(--line, #e2e2e2);
  --sc-red: var(--red, #c73b3b);
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 900;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem;
}
.support-chat-toggle {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--sc-ink); color: var(--sc-ink-invert); border: none; cursor: pointer;
  padding: 0.75rem 1.1rem; border-radius: 999px;
  font-size: 0.95rem; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.support-chat-toggle:hover { background: var(--sc-accent-dark); }
.support-chat.is-open .support-chat-toggle-label { display: none; }
.support-chat-panel {
  width: 360px; max-height: min(560px, calc(100vh - 7rem));
  display: flex; flex-direction: column;
  background: var(--sc-surface); border: 1px solid var(--sc-line); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); overflow: hidden;
  color: var(--sc-ink); text-align: left;
}
.support-chat-panel[hidden] { display: none; }
.support-chat-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem;
  padding: 0.9rem 1rem; background: var(--sc-ink); color: var(--sc-ink-invert);
}
.support-chat-sub { display: block; font-size: 0.8rem; opacity: 0.75; margin-top: 0.15rem; }
.support-chat-close {
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: 1.5rem; line-height: 1; padding: 0 0.2rem;
}
.support-chat-log {
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: 0.5rem; background: var(--sc-bg-soft);
  min-height: 140px;
}
.support-chat-bubble {
  max-width: 85%; padding: 0.55rem 0.8rem; border-radius: 12px;
  font-size: 0.9rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere;
}
.support-chat-bubble-us {
  align-self: flex-start; background: var(--sc-surface); border: 1px solid var(--sc-line);
  border-bottom-left-radius: 4px;
}
.support-chat-bubble-me {
  align-self: flex-end; background: var(--sc-ink); color: var(--sc-ink-invert);
  border-bottom-right-radius: 4px;
}
.support-chat-form {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.75rem; border-top: 1px solid var(--sc-line); background: var(--sc-surface);
}
.support-chat-identity { display: flex; gap: 0.5rem; }
.support-chat-identity[hidden] { display: none; }
.support-chat-identity input { flex: 1; min-width: 0; }
.support-chat-form input, .support-chat-form textarea {
  font: inherit; font-size: 0.9rem; padding: 0.5rem 0.6rem;
  border: 1px solid var(--sc-line); border-radius: 8px; background: var(--sc-surface); color: var(--sc-ink);
}
.support-chat-compose { display: flex; gap: 0.5rem; align-items: flex-end; }
.support-chat-compose textarea { flex: 1; resize: none; min-width: 0; }
.support-chat-send {
  border: none; cursor: pointer; padding: 0.6rem 1.15rem; border-radius: 8px;
  font-size: 0.95rem; font-weight: 600;
  background: var(--sc-ink); color: var(--sc-ink-invert) !important;
}
.support-chat-send:hover { background: var(--sc-accent-dark); }
.support-chat-send:disabled { opacity: 0.6; cursor: wait; }
.support-chat-error { margin: 0; color: var(--sc-red); font-size: 0.85rem; }
.support-chat-error[hidden] { display: none; }
.support-chat-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 480px) {
  .support-chat { right: 0.75rem; bottom: 0.75rem; left: 0.75rem; }
  .support-chat-panel { width: 100%; }
  .support-chat-identity { flex-direction: column; }
}