/* Knowstox chat box — bottom-right sticky panel. Consumes design tokens from style.css. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.chat-box {
  position: fixed;
  right: var(--space-lg);
  bottom: var(--space-lg);
  z-index: 60;
  width: min(360px, calc(100vw - 2 * var(--space-lg)));

  /* Chat-scoped palette: OPAQUE + a step lighter than the near-black page, so the
     widget reads as a distinct floating surface instead of blending into the site
     (page content no longer bleeds through). Progressive lightness = depth. */
  --chat-panel: #131d33;        /* panel + message scroll area */
  --chat-bar: #1b2747;          /* header + composer bars */
  --chat-bubble: #26314f;       /* incoming message bubble */
  --chat-bubble-own: #1f4a63;   /* own message bubble (teal-leaning) */
  --chat-edge: rgba(148, 163, 184, 0.14);
  --chat-ring: rgba(125, 211, 252, 0.22);
  --chat-text: #eaf0f8;
  --chat-text-dim: #9fb0c6;
}

.chat-toggle-open {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  margin-left: auto;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  border: 1px solid var(--chat-ring);
  background: var(--chat-bar);
  color: var(--chat-text);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 14px 36px rgba(2, 6, 23, 0.55);
}

.chat-toggle-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-positive);
}

.chat-box-collapsed {
  /* Shrink the container to the pill so it hugs the bottom-right corner
     instead of left-aligning inside the full 360px panel width. */
  width: auto;
}
.chat-box-collapsed .chat-toggle-open {
  display: inline-flex;
}
.chat-box-collapsed .chat-panel {
  display: none;
}

.chat-panel {
  display: flex;
  flex-direction: column;
  max-height: min(70vh, 560px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--chat-ring);
  background: var(--chat-panel);
  /* Strong, layered elevation + faint accent ring so it floats above the page. */
  box-shadow: 0 22px 60px rgba(2, 6, 23, 0.62), 0 0 0 1px rgba(125, 211, 252, 0.08);
  overflow: hidden;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--chat-edge);
  background: var(--chat-bar);
}

.chat-mode {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: rgba(2, 6, 23, 0.5);
}

.chat-mode-btn {
  padding: var(--space-2xs) var(--space-sm);
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-mode-btn.is-active {
  background: var(--gradient-accent);
  color: var(--text-on-accent);
}

.chat-mode-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chat-collapse {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.chat-loadmore {
  padding: var(--space-2xs) var(--space-sm);
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

.chat-busy {
  padding: var(--space-2xs) var(--space-sm);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-on-accent);
  background: var(--gradient-accent);
  text-align: center;
}

.chat-messages {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: var(--space-sm);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--chat-panel);
}

.chat-msg {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
}

/* Own messages mirror to the right with an accent bubble (classic chat read). */
.chat-msg-own {
  flex-direction: row-reverse;
}
.chat-msg-own .chat-msg-name {
  display: none;
}
.chat-msg-own .chat-msg-main {
  background: var(--chat-bubble-own);
  align-items: flex-end;
  border-radius: var(--radius-md) 4px var(--radius-md) var(--radius-md);
}

.chat-msg-avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chat-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-msg-avatar-fallback {
  background: var(--gradient-accent);
  color: var(--text-on-accent);
  font-weight: 800;
  font-size: 0.8rem;
}

.chat-msg-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-width: 82%;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: 4px var(--radius-md) var(--radius-md) var(--radius-md);
  background: var(--chat-bubble);
}

.chat-msg-name {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-accent);
  letter-spacing: 0.01em;
}

.chat-msg-body {
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--chat-text);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.chat-msg-sending {
  opacity: 0.55;
}

.chat-msg-failed .chat-msg-body {
  color: var(--accent-negative-soft);
}

.chat-empty {
  padding: var(--space-lg) var(--space-md);
  margin: 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--chat-text-dim);
  background: var(--chat-panel);
}

.chat-composer {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-end;
  padding: var(--space-sm);
  border-top: 1px solid var(--chat-edge);
  background: var(--chat-bar);
}

.chat-input {
  flex: 1 1 auto;
  resize: none;
  max-height: 120px;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--chat-ring);
  background: rgba(2, 6, 23, 0.55);
  color: var(--chat-text);
  font: inherit;
  font-size: 0.85rem;
}

.chat-input::placeholder {
  color: var(--chat-text-dim);
}

.chat-input:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.chat-send {
  flex: 0 0 auto;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  border: none;
  background: var(--gradient-accent);
  color: var(--text-on-accent);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

.chat-signin-cta {
  padding: var(--space-lg) var(--space-md);
  text-align: center;
}

.chat-signin-cta p {
  margin: 0 0 var(--space-sm);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.chat-signin-link {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: #1f2937;
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
}

/* Composer-row sign-in prompt shown to anonymous readers instead of the textarea. */
.chat-signin-prompt {
  display: block;
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--chat-edge);
  background: var(--chat-bar);
  color: var(--text-accent);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  text-decoration: none;
}

.chat-signin-prompt:hover,
.chat-signin-prompt:focus-visible {
  text-decoration: underline;
  outline: none;
}

.chat-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--text-accent);
  border-radius: 50%;
  animation: chat-spin 0.7s linear infinite;
  vertical-align: middle;
}

@keyframes chat-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 520px) {
  .chat-box {
    right: var(--space-sm);
    bottom: var(--space-sm);
    width: calc(100vw - 2 * var(--space-sm));
  }
}