/* ==========================================================================
   SWM Chat — scoped, self-contained styles. Every rule lives under .swm-chat
   so the widget never leans on theme classes and never leaks into the page.
   ========================================================================== */

.swm-chat {
  --swm-chat-bg: #0d0b14;
  --swm-chat-surface: #16112a;
  --swm-chat-border: #2a2145;
  --swm-chat-border-strong: #4a3d6b;
  --swm-chat-accent: #7c4dff;
  --swm-chat-accent-hover: #b466ff;
  --swm-chat-text: #ece9f5;
  --swm-chat-muted: #9c93b8;
  --swm-chat-error: #ff6b6b;
  --swm-chat-chip-bg: rgba(124, 77, 255, 0.16);
  --swm-chat-chip-text: #cbbcff;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: var(--swm-chat-text);
  box-sizing: border-box;
}

.swm-chat *,
.swm-chat *::before,
.swm-chat *::after {
  box-sizing: inherit;
}

.swm-chat[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------
   Launcher
   -------------------------------------------------------------------- */

.swm-chat-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 26px;
  border: none;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--swm-chat-accent) 0%, var(--swm-chat-accent-hover) 100%);
  color: #ffffff !important;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(124, 77, 255, 0.5), 0 3px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, padding 0.15s ease, border-radius 0.15s ease;
}

.swm-chat-launcher-main {
  color: inherit !important;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}

.swm-chat-launcher-sub {
  color: inherit !important;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.95;
  white-space: nowrap;
}

/* Once the panel is open, collapse back to the compact pill. */
.swm-chat.swm-chat-open .swm-chat-launcher {
  flex-direction: row;
  gap: 6px;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(124, 77, 255, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3);
}
.swm-chat.swm-chat-open .swm-chat-launcher-main { font-size: 15px; font-weight: 600; }
.swm-chat.swm-chat-open .swm-chat-launcher-sub { display: none; }

.swm-chat-launcher:hover,
.swm-chat-launcher:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(124, 77, 255, 0.45), 0 4px 10px rgba(0, 0, 0, 0.35);
}

.swm-chat-launcher:active {
  transform: translateY(0);
}

.swm-chat-launcher[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------
   Panel shell
   -------------------------------------------------------------------- */

.swm-chat-panel {
  position: fixed;
  right: 20px;
  bottom: 92px;
  z-index: 99998;
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 32px));
  height: min(70vh, 640px);
  max-height: calc(100vh - 112px);
  background: var(--swm-chat-bg);
  border: 1px solid var(--swm-chat-border);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.swm-chat-panel[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------
   Header + breadcrumb
   -------------------------------------------------------------------- */

.swm-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
  padding: 12px 14px;
  background: var(--swm-chat-surface);
  border-bottom: 1px solid var(--swm-chat-border);
}

.swm-chat-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
}

.swm-chat-breadcrumb button {
  padding: 2px 3px;
  border: none;
  background: transparent;
  color: var(--swm-chat-muted);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.swm-chat-breadcrumb button:hover,
.swm-chat-breadcrumb button:focus-visible {
  color: var(--swm-chat-text);
}

.swm-chat-breadcrumb button:not(:last-child)::after {
  content: "\203A";
  margin-left: 6px;
  color: var(--swm-chat-border-strong);
}

.swm-chat-breadcrumb .is-current {
  color: var(--swm-chat-accent-hover);
  font-weight: 600;
  cursor: default;
}

.swm-chat-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--swm-chat-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.swm-chat-close:hover,
.swm-chat-close:focus-visible {
  background: var(--swm-chat-border);
  color: var(--swm-chat-text);
}

/* --------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------- */

.swm-chat-tabs {
  display: flex;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--swm-chat-border);
  background: var(--swm-chat-bg);
}

.swm-chat-tab {
  flex: 1 1 50%;
  padding: 10px 8px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--swm-chat-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.swm-chat-tab:hover,
.swm-chat-tab:focus-visible {
  color: var(--swm-chat-text);
}

.swm-chat-tab.is-active {
  color: var(--swm-chat-accent-hover);
  border-bottom-color: var(--swm-chat-accent);
}

/* --------------------------------------------------------------------
   Views
   -------------------------------------------------------------------- */

.swm-chat-view {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.swm-chat-view[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------
   Message list
   -------------------------------------------------------------------- */

.swm-chat-dm-intro {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--swm-chat-muted);
  background: var(--swm-chat-surface-2, rgba(124, 77, 255, 0.08));
  border-bottom: 1px solid var(--swm-chat-border);
}

/* Dismissable "this is a public live chat" notice (top of the chat view). */
.swm-chat-notice {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--swm-chat-muted);
  background: var(--swm-chat-surface-2, rgba(124, 77, 255, 0.08));
  border-bottom: 1px solid var(--swm-chat-border);
}

.swm-chat-notice[hidden] { display: none; }

/* Host themes that set a global span color leak into the widget's bare
   label spans; force them to follow the widget's own colors. */
.swm-chat-notice span,
.swm-chat-asname,
.swm-chat-reply-bar-text { color: inherit !important; }

.swm-chat-notice strong { color: var(--swm-chat-text); }

.swm-chat-notice-dismiss {
  display: inline-block;
  margin-top: 6px;
  padding: 0;
  background: none;
  border: none;
  color: var(--swm-chat-accent, #b466ff);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.swm-chat-notice-dismiss:hover,
.swm-chat-notice-dismiss:focus-visible {
  text-decoration: underline;
}

.swm-chat-messages,
.swm-chat-dm-messages {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 12px 14px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.swm-chat-messages li,
.swm-chat-dm-messages li {
  padding: 8px 0;
  border-bottom: 1px solid var(--swm-chat-border);
}

.swm-chat-messages li:last-child,
.swm-chat-dm-messages li:last-child {
  border-bottom: none;
}

.swm-chat-msg-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}

.swm-chat-msg-author {
  font-size: 13px;
  font-weight: 700;
  color: var(--swm-chat-accent-hover);
}

.swm-chat-msg-time {
  font-size: 11px;
  color: var(--swm-chat-muted);
}

.swm-chat-msg-body {
  color: var(--swm-chat-text);
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

/* Auto-linked http(s) URLs inside a message body. ID-scoped so host-theme
   leaks (e.g. a global anchor color) can't override it — same pattern as
   the composer input color-lock fixes above. */
#swm-chat-root .swm-chat-link {
  color: var(--swm-chat-accent-hover) !important;
  text-decoration: underline;
  word-break: break-all;
}

.swm-chat-msg-badge {
  display: inline-block;
  padding: 1px 7px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--swm-chat-accent);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

li.is-team .swm-chat-msg-author {
  color: var(--swm-chat-accent-hover);
}

/* Source-attribution chip (clickable, e.g. jump to episode/appearance) */
.swm-chat-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 9px;
  margin-top: 4px;
  margin-left: 7px;
  border-radius: 999px;
  background: var(--swm-chat-chip-bg);
  color: var(--swm-chat-chip-text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Truncate long source titles (e.g. appearances) to a single ellipsized
   line; the full title stays available via the chip's tooltip + click. */
.swm-chat-chip-label {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  /* Inherit the chip's own color — some host themes set a global span
     color that would otherwise hijack this label (it has no color of
     its own). !important beats the host rule regardless of specificity. */
  color: inherit !important;
}

.swm-chat-chip:hover,
.swm-chat-chip:focus-visible {
  background: rgba(124, 77, 255, 0.28);
  color: var(--swm-chat-text);
}

/* ----- Reply threading ----- */

/* Reply button in each message's meta row — only usable by members. */
.swm-chat-reply-btn {
  display: none;
  margin-left: auto;
  padding: 0;
  background: none;
  border: none;
  color: var(--swm-chat-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.swm-chat.swm-chat-can-post .swm-chat-reply-btn { display: inline-block; }
.swm-chat-reply-btn:hover,
.swm-chat-reply-btn:focus-visible {
  color: var(--swm-chat-accent-hover);
  text-decoration: underline;
}

/* "In reply to …" quote line above a reply's body. */
.swm-chat-reply-ref {
  margin: 0 0 3px;
  padding-left: 8px;
  border-left: 2px solid var(--swm-chat-border-strong);
  color: var(--swm-chat-muted);
  font-size: 11.5px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A reply is slightly indented to read as a thread. */
li.is-reply {
  margin-left: 14px;
}

/* Reply-context bar shown above the composer while replying. */
.swm-chat-reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--swm-chat-chip-bg);
  border-top: 1px solid var(--swm-chat-border);
  font-size: 12px;
  color: var(--swm-chat-muted);
}
.swm-chat-reply-bar[hidden] { display: none; }
.swm-chat-reply-bar-text {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.swm-chat-reply-cancel {
  flex: 0 0 auto;
  padding: 0 4px;
  background: none;
  border: none;
  color: var(--swm-chat-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.swm-chat-reply-cancel:hover { color: var(--swm-chat-text); }

/* --------------------------------------------------------------------
   Composer
   -------------------------------------------------------------------- */

.swm-chat-composer,
.swm-chat-dm-composer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--swm-chat-border);
  background: var(--swm-chat-surface);
}

.swm-chat-composer[hidden] {
  display: none !important;
}

.swm-chat-posting-in {
  font-size: 11px;
  color: var(--swm-chat-muted);
}

.swm-chat-posting-in:empty {
  display: none;
}

.swm-chat-input,
.swm-chat-dm-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--swm-chat-border-strong) !important;
  border-radius: 10px;
  background: var(--swm-chat-bg) !important;
  color: var(--swm-chat-text) !important;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  resize: none;
  transition: border-color 0.15s ease;
}

.swm-chat-input::placeholder,
.swm-chat-dm-input::placeholder {
  color: var(--swm-chat-muted);
  opacity: 1;
}

.swm-chat-input:focus,
.swm-chat-dm-input:focus {
  outline: none;
  border-color: var(--swm-chat-accent) !important;
}

/* Host themes style bare <textarea>/<input> (e.g. a dark Tailwind form base)
   and beat our class rules. Anchor on the widget's ID so nothing but an
   ID-scoped host rule could override the composer's own colors. */
#swm-chat-root .swm-chat-input,
#swm-chat-root .swm-chat-dm-input,
#swm-chat-root .swm-chat-handle-input {
  background: var(--swm-chat-bg) !important;
  color: var(--swm-chat-text) !important;
}
#swm-chat-root .swm-chat-input:focus,
#swm-chat-root .swm-chat-dm-input:focus,
#swm-chat-root .swm-chat-handle-input:focus {
  border-color: var(--swm-chat-accent) !important;
  outline: none !important;
  box-shadow: none !important;
}

.swm-chat-send,
.swm-chat-dm-composer button[type="submit"] {
  align-self: flex-end;
  padding: 8px 18px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--swm-chat-accent) 0%, var(--swm-chat-accent-hover) 100%) !important;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.swm-chat-send:hover,
.swm-chat-dm-composer button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(124, 77, 255, 0.4);
}

.swm-chat-send:disabled,
.swm-chat-dm-composer button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.swm-chat-locked-note {
  padding: 14px;
  border-top: 1px solid var(--swm-chat-border);
  background: var(--swm-chat-surface);
  color: var(--swm-chat-muted);
  font-size: 13px;
  text-align: center;
}

.swm-chat-locked-note[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------
   Identity row ("Posting as ...") + inline handle editor
   -------------------------------------------------------------------- */

.swm-chat-identity {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px 14px;
  border-top: 1px solid var(--swm-chat-border);
  background: var(--swm-chat-surface);
  color: var(--swm-chat-muted);
  font-size: 12px;
}

.swm-chat-identity[hidden] {
  display: none !important;
}

.swm-chat-asname {
  color: var(--swm-chat-text);
  font-weight: 600;
}

.swm-chat-edit-handle {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--swm-chat-accent-hover);
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.swm-chat-edit-handle:hover,
.swm-chat-edit-handle:focus-visible {
  color: var(--swm-chat-text);
}

.swm-chat-handle-form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px 14px;
  border-top: 1px solid var(--swm-chat-border);
  background: var(--swm-chat-surface);
}

.swm-chat-handle-form[hidden] {
  display: none !important;
}

.swm-chat-handle-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid var(--swm-chat-border-strong) !important;
  border-radius: 8px;
  background: var(--swm-chat-bg) !important;
  color: var(--swm-chat-text) !important;
  font-family: inherit;
  font-size: 13px;
  transition: border-color 0.15s ease;
}

.swm-chat-handle-input::placeholder {
  color: var(--swm-chat-muted);
  opacity: 1;
}

.swm-chat-handle-input:focus {
  outline: none;
  border-color: var(--swm-chat-accent) !important;
}

.swm-chat-handle-form button {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: none;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.swm-chat-handle-form button[type="submit"] {
  background: linear-gradient(135deg, var(--swm-chat-accent) 0%, var(--swm-chat-accent-hover) 100%) !important;
  color: #ffffff !important;
}

.swm-chat-handle-form button[type="submit"]:hover,
.swm-chat-handle-form button[type="submit"]:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 77, 255, 0.4);
}

.swm-chat-handle-cancel {
  background: transparent !important;
  color: var(--swm-chat-muted) !important;
}

.swm-chat-handle-cancel:hover,
.swm-chat-handle-cancel:focus-visible {
  color: var(--swm-chat-text) !important;
}

/* --------------------------------------------------------------------
   Gate — "want to join" CTA / muted state
   -------------------------------------------------------------------- */

.swm-chat-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 18px 14px;
  border-top: 1px solid var(--swm-chat-border);
  background: var(--swm-chat-surface);
  text-align: center;
}

.swm-chat-gate[hidden] {
  display: none !important;
}

.swm-chat-join-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--swm-chat-accent) 0%, var(--swm-chat-accent-hover) 100%) !important;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.swm-chat-join-btn[hidden] {
  display: none !important;
}

.swm-chat-join-btn:hover,
.swm-chat-join-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(124, 77, 255, 0.4);
}

.swm-chat-muted-note {
  margin: 0;
  color: var(--swm-chat-muted);
  font-size: 13px;
}

.swm-chat-muted-note[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------
   Error state
   -------------------------------------------------------------------- */

.swm-chat-error {
  flex: 0 0 auto;
  padding: 8px 14px;
  background: var(--swm-chat-surface);
  border-top: 1px solid var(--swm-chat-border);
  color: var(--swm-chat-error);
  font-size: 12px;
}

.swm-chat-error[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------- */

@media (max-width: 480px) {
  .swm-chat-panel {
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 80vh;
    max-height: 80vh;
    border-radius: 12px 12px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }

  .swm-chat-launcher {
    right: 16px;
    bottom: 16px;
  }
}

/* --------------------------------------------------------------------
   Light mode
   -------------------------------------------------------------------- */

@media (prefers-color-scheme: light) {
  .swm-chat {
    --swm-chat-bg: #ffffff;
    --swm-chat-surface: #f4f2fa;
    --swm-chat-border: #e2ddf0;
    --swm-chat-border-strong: #c9c0e0;
    --swm-chat-text: #1a1626;
    --swm-chat-muted: #4f475f;
    --swm-chat-chip-bg: rgba(124, 77, 255, 0.16);
    --swm-chat-chip-text: #4a2fb0;
  }

  /* Notice reads at full strength in light mode (was too faint at muted). */
  .swm-chat-notice {
    color: #3a3450;
  }

  .swm-chat-panel {
    box-shadow: 0 20px 50px rgba(26, 22, 38, 0.18), 0 4px 16px rgba(26, 22, 38, 0.1);
  }

  .swm-chat-launcher {
    box-shadow: 0 8px 24px rgba(124, 77, 255, 0.25), 0 2px 8px rgba(26, 22, 38, 0.12);
  }
}