/* Approved lavender whale identity. Scoped to brand elements only. */
:root { --xj-brand-wordmark: #8870ad; }
:root[data-theme='dark'] { --xj-brand-wordmark: #c4afe6; }
body img.xj-brand-mark {
  display: inline-block;
  width: 48px;
  height: 30px;
  flex: 0 0 auto;
  object-fit: contain;
  vertical-align: middle;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body .nav-logo, body .brand-logo, body .footer-logo, body .brand:has(> .xj-brand-mark) {
  gap: 9px;
}
body .nav-logo .logo-text,
body .brand-logo > span,
body .footer-logo > span,
body .brand > .xj-brand-mark + span,
body .welcome-logo > span:last-child {
  color: var(--xj-brand-wordmark);
  font-weight: 600;
  letter-spacing: .01em;
}
body .brand-logo > .xj-brand-mark { width: 64px; height: 40px; }
body .footer-logo > .xj-brand-mark { width: 42px; height: 28px; }
body .welcome-logo .brand-mark,
body .message-row.ai .message-avatar {
  color: transparent;
  font-size: 0;
  background: transparent url('/app/assets/whale-mark-20260912.png') center / contain no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  flex-shrink: 0;
}
body .welcome-logo .brand-mark { width: 72px; height: 44px; }
body .message-row.ai .message-avatar { width: 34px; height: 34px; }
.xj-login-mobile-brand { display: none; }
@media (max-width: 768px) {
  body img.xj-brand-mark { width: 42px; height: 28px; }
  body .xj-login-mobile-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 24px;
    color: var(--xj-brand-wordmark);
    font-size: 22px;
    font-weight: 600;
  }
}