/* ─── Notification Toast Animations ──────────────────────────────────────── */

.notification-toast {
  pointer-events: auto;
  min-width: 300px;
  max-width: 400px;
  padding: 1rem 1.25rem;
  border-radius: 0.875rem;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
  opacity: 0;
  transform: translateX(100px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-toast--visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.notification-toast--enter {
  animation: notificationSlideIn 0.3s ease forwards;
}

.notification-toast--exit {
  animation: notificationSlideOut 0.3s ease forwards;
}

@keyframes notificationSlideIn {
  from {
    opacity: 0;
    transform: translateX(100px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes notificationSlideOut {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(100px) scale(0.95);
  }
}

.notification-close {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.35rem;
  transition: color 0.2s ease, background-color 0.2s ease;
  flex-shrink: 0;
}

.notification-close:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.notification-toast-link {
  display: inline-flex;
  align-items: center;
  margin-top: 0.5rem;
  padding: 0.35rem 0.75rem;
  background: rgba(255, 106, 26, 0.15);
  border: 1px solid rgba(255, 106, 26, 0.3);
  border-radius: 0.5rem;
  color: #ff6a1a;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.notification-toast-link:hover {
  background: rgba(255, 106, 26, 0.25);
  border-color: #ff6a1a;
  color: #ff8c4a;
}

/* ─── Custom Scrollbar ────────────────────────────────────────────────────── */

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  transition: background 0.2s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.03);
}

/* ─── Message Thread ──────────────────────────────────────────────────────── */

.message-thread {
  padding-right: 0.5rem;
}

.message-item {
  animation: messageSlideIn 0.3s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Message Avatar */
.message-item .avatar-initial {
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-size: 1rem;
  flex-shrink: 0;
}

.message-item .avatar-initial.admin-avatar {
  background: linear-gradient(135deg, #a855f7, #c084fc);
  border-color: rgba(168, 85, 247, 0.3);
}

.message-item .avatar-initial.applicant-avatar {
  background: linear-gradient(135deg, #ff6a1a, #ff8c4a);
  border-color: rgba(255, 106, 26, 0.3);
}

/* Message Bubble */
.message-bubble {
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

.message-bubble:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.message-bubble.admin-message {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(168, 85, 247, 0.08));
  border: 1px solid rgba(168, 85, 247, 0.25);
}

.message-bubble.applicant-message {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.12), rgba(255, 106, 26, 0.08));
  border: 1px solid rgba(255, 106, 26, 0.25);
}

/* Message Header */
.message-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.message-sender-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
}

.message-timestamp {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

/* Message Content */
.message-content {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* ─── Attachments ─────────────────────────────────────────────────────────── */

.message-attachments {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.attachment-item:hover {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateX(2px);
}

.attachment-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

.attachment-item:hover .attachment-icon {
  color: rgba(255, 255, 255, 0.9);
}

.attachment-name {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  flex: 1;
  min-width: 0;
}

.attachment-item:hover .attachment-name {
  color: rgba(255, 255, 255, 0.95);
}

.attachment-size {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  white-space: nowrap;
}

/* ── Knowledge base article body ─────────────────────────────────────────
   Styles the rendered HTML inside <div class="kb-article-body">. Intentionally
   distinct from .blog-prose (in app/assets/tailwind/application.css) which
   ships a more generous long-form scale for the marketing blog — help center
   articles are denser by design. If a future redesign unifies them, extract
   the shared rules (links, strong, em, code, pre, blockquote, table) into a
   .wavbee-prose-base class and have both extend it.

   Three weight tiers create scan-ability:
     - <strong>  pure white, weight 700  (key terms, definitions)
     - body      85% white,  weight 400  (default reading copy)
     - asides    55–65%       weight 400  (timestamps, captions, em)
   Headings stay one notch quieter than <strong> so bold terms inside a
   paragraph remain the visual peak when you skim.                          */
.kb-article-body {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  word-wrap: break-word;
}

.kb-article-body > * + * { margin-top: 1.1rem; }

.kb-article-body h2,
.kb-article-body h3,
.kb-article-body h4 {
  font-family: var(--portal-font-display, inherit);
  letter-spacing: -0.01em;
  color: #ffffff;
  margin-top: 1.85rem;
  margin-bottom: -0.15rem;
}

.kb-article-body h2 { font-size: 1.2rem;  font-weight: 600; }
.kb-article-body h3 { font-size: 1.02rem; font-weight: 600; }
.kb-article-body h4 { font-size: 0.92rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255,255,255,0.7); }

.kb-article-body p { margin: 0; }

.kb-article-body strong,
.kb-article-body b {
  color: #ffffff;
  font-weight: 700;
}

.kb-article-body em,
.kb-article-body i {
  color: rgba(255, 255, 255, 0.78);
  font-style: italic;
}

.kb-article-body a {
  color: #ff8a4a;
  text-decoration: underline;
  text-decoration-color: rgba(255, 138, 74, 0.35);
  text-underline-offset: 3px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
.kb-article-body a:hover {
  color: #ff6a1a;
  text-decoration-color: #ff6a1a;
}

.kb-article-body ul,
.kb-article-body ol {
  padding-left: 1.25rem;
  margin: 0;
}
.kb-article-body ul { list-style: disc; }
.kb-article-body ol { list-style: decimal; }
.kb-article-body li { margin-top: 0.35rem; }
.kb-article-body li::marker { color: rgba(255, 138, 74, 0.7); }

.kb-article-body blockquote {
  margin: 0;
  padding: 0.5rem 1rem;
  border-left: 3px solid rgba(255, 138, 74, 0.5);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 0.25rem;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
}

.kb-article-body code {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.25rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.85em;
  color: #ffd5b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.kb-article-body pre {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.55;
}
.kb-article-body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.92);
}

.kb-article-body hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 1.5rem 0;
}

.kb-article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  overflow: hidden;
}
.kb-article-body thead { background: rgba(255, 255, 255, 0.04); }
.kb-article-body th,
.kb-article-body td {
  padding: 0.55rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
}
.kb-article-body th {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}
.kb-article-body tbody tr:last-child td { border-bottom: 0; }

.kb-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Knowledge base search highlight ─────────────────────────────────────
   ts_headline wraps matched terms in <mark>. Style them as a soft orange
   chip rather than the browser default yellow — keeps the dark-mode
   palette intact while still drawing the eye. */
.kb-search-snippet mark {
  background: rgba(255, 106, 26, 0.18);
  color: #ffd5b8;
  padding: 0 0.1em;
  border-radius: 0.15em;
  font-weight: 600;
}

/* ── KB layout primitives ────────────────────────────────────────────────
   These classes replace ~30 inline-style sites across the four help pages
   (Index, Category, Article, Search) and the two admin pages (Articles,
   Categories). Colours are tuned to clear WCAG 2.1 AA 4.5:1 against the
   #0e0c0a glass-card background:
     - --kb-text-primary      : #ffffff (always pure on the brand title)
     - --kb-text-body         : #e2e8f0 (~13.7:1)  body / summary text
     - --kb-text-secondary    : rgba(226,232,240,0.80) (~10.9:1)  meta
     - --kb-text-muted        : rgba(226,232,240,0.65) (~8.5:1)   labels
     - --kb-text-faint        : rgba(226,232,240,0.55) (~7.0:1)   numbers
   The previous /0.4 and /0.35 values measured ~3.0-3.5:1 — failing AA.
*/
.kb-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.80);
}

.kb-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.80);
}
.kb-breadcrumb a:hover { color: #ffffff; }
.kb-breadcrumb .kb-breadcrumb-sep { color: rgba(226, 232, 240, 0.55); }
.kb-breadcrumb .kb-breadcrumb-current { color: #e2e8f0; }

.kb-list-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
}

.kb-list-summary {
  margin-top: 0.25rem;
  font-size: 13px;
  line-height: 1.5;
  color: #e2e8f0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kb-meta-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.65);
}

.kb-meta-value {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(226, 232, 240, 0.80);
}

.kb-row-number {
  width: 1.75rem;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(226, 232, 240, 0.55);
  flex-shrink: 0;
}

/* ── Portal billing: marketing-toggle WCAG override ───────────────────────
   The marketing-toggle's .is-active state uses white text on #ff6a1a, which
   axe-core flags as a WCAG 2.1 AA color-contrast violation (3.3:1). Inside
   the portal we swap to dark text on orange so the active pill clears AA. */
.marketing-toggle-button.is-active {
  color: #1a0800;
}