/* 968.ai Design System - CSS Variables */
/* Applied globally to all components */

:root {
  /* ===== COLOR PALETTE ===== */

  /* Primary Colors */
  --color-primary-dark: #0d0d0d;
  --color-primary-light: #ffffff;

  /* Secondary/Accent Colors */
  --color-accent-gold: #d4a574;
  --color-accent-blue: #2563eb;
  --color-accent-green: #10b981;

  /* Neutral Scale */
  --color-neutral-50: #f9fafb;
  --color-neutral-100: #f3f4f6;
  --color-neutral-200: #e5e7eb;
  --color-neutral-300: #d1d5db;
  --color-neutral-400: #9ca3af;
  --color-neutral-600: #4b5563;
  --color-neutral-900: #111827;

  /* Status Colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* Semantic Colors */
  --color-bg-page: #ffffff;
  --color-bg-card: #f9fafb;
  --color-bg-hover: #f3f4f6;
  --color-text-primary: #0d0d0d;
  --color-text-body: #4b5563;
  --color-text-secondary: #9ca3af;
  --color-text-disabled: #d1d5db;
  --color-border: #e5e7eb;
  --color-border-dark: #d1d5db;

  /* ===== TYPOGRAPHY ===== */

  /* Font Family */
  --font-primary: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Courier New", monospace;

  /* Font Sizes */
  --fs-display: 48px;    /* H1 */
  --fs-h1: 36px;         /* H2 */
  --fs-h2: 28px;         /* H3 */
  --fs-h3: 24px;         /* H4 */
  --fs-subheading: 20px;
  --fs-body-lg: 16px;
  --fs-body: 14px;
  --fs-body-sm: 12px;
  --fs-label: 12px;
  --fs-code: 14px;

  /* Font Weights */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line Heights */
  --lh-tight: 1.2;
  --lh-snug: 1.3;
  --lh-normal: 1.4;
  --lh-relaxed: 1.5;
  --lh-loose: 1.6;

  /* ===== SPACING SYSTEM ===== */

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* ===== BORDER RADIUS ===== */

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ===== SHADOWS ===== */

  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.1);

  /* ===== TRANSITIONS ===== */

  --transition-fast: all 0.15s ease-in-out;
  --transition-normal: all 0.2s ease-in-out;
  --transition-slow: all 0.3s ease-in-out;

  /* ===== BREAKPOINTS ===== */

  --bp-mobile: 320px;
  --bp-tablet: 640px;
  --bp-desktop: 1024px;
  --bp-wide: 1280px;
}

/* ===== GLOBAL STYLES ===== */

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
  line-height: var(--lh-loose);
  color: var(--color-text-body);
  background-color: var(--color-bg-page);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== HEADING STYLES ===== */

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-lg) 0;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-md) 0;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-md) 0;
}

h4, h5, h6 {
  font-size: var(--fs-subheading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-md) 0;
}

/* ===== PARAGRAPH & TEXT ===== */

p {
  margin: 0 0 var(--space-lg) 0;
  line-height: var(--lh-loose);
}

p:last-child {
  margin-bottom: 0;
}

small, .text-sm {
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
}

/* ===== LINKS ===== */

a {
  color: var(--color-accent-blue);
  text-decoration: none;
  transition: var(--transition-normal);
}

a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

/* ===== BUTTONS ===== */

button, .btn, input[type="submit"], input[type="button"] {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  cursor: pointer;
  border: none;
  transition: var(--transition-normal);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: var(--space-md) var(--space-lg);
  white-space: nowrap;
}

/* Primary Button */
.btn-primary, button:not([class]) {
  background-color: var(--color-primary-dark);
  color: var(--color-primary-light);
  box-shadow: var(--shadow-xs);
}

.btn-primary:hover, button:not([class]):hover {
  background-color: #1a1a1a;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-primary:active, button:not([class]):active {
  background-color: #000000;
  transform: translateY(0);
}

.btn-primary:focus-visible, button:not([class]):focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

.btn-primary:disabled, button:not([class]):disabled {
  background-color: var(--color-neutral-300);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  box-shadow: none;
}

/* Secondary Button */
.btn-secondary {
  background-color: var(--color-neutral-100);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
  background-color: var(--color-neutral-200);
  box-shadow: var(--shadow-md);
}

.btn-secondary:active {
  background-color: var(--color-neutral-300);
}

.btn-secondary:disabled {
  background-color: var(--color-neutral-100);
  color: var(--color-text-disabled);
  border-color: var(--color-neutral-200);
  cursor: not-allowed;
}

/* Tertiary/Text Button */
.btn-tertiary, .btn-text {
  background-color: transparent;
  color: var(--color-accent-blue);
  box-shadow: none;
}

.btn-tertiary:hover, .btn-text:hover {
  background-color: #eff6ff;
}

.btn-tertiary:active, .btn-text:active {
  color: #1d4ed8;
}

/* Danger Button */
.btn-danger {
  background-color: var(--color-error);
  color: var(--color-primary-light);
  box-shadow: var(--shadow-xs);
}

.btn-danger:hover {
  background-color: #dc2626;
  box-shadow: var(--shadow-md);
}

.btn-danger:active {
  background-color: #b91c1c;
}

.btn-danger:disabled {
  background-color: var(--color-neutral-300);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* ===== FORM ELEMENTS ===== */

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea,
select {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  padding: var(--space-md) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-primary-light);
  color: var(--color-text-primary);
  transition: var(--transition-normal);
  min-height: 40px;
  width: 100%;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"])::placeholder,
textarea::placeholder {
  color: var(--color-text-secondary);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-accent-blue);
  box-shadow: var(--shadow-focus);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):disabled,
textarea:disabled,
select:disabled {
  background-color: var(--color-neutral-100);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  border-color: var(--color-neutral-200);
}

/* Form Labels */
label {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

label .required {
  color: var(--color-error);
  margin-left: 2px;
}

/* ===== CARDS ===== */

.card, [class*="card"] {
  background-color: var(--color-bg-card);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-outlined {
  background-color: var(--color-primary-light);
  border: 2px solid var(--color-border);
  box-shadow: none;
}

.card-outlined:hover {
  border-color: var(--color-neutral-300);
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
}

/* ===== BADGES ===== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-success {
  background-color: #d1fae5;
  color: #047857;
}

.badge-warning {
  background-color: #fef3c7;
  color: #92400e;
}

.badge-error {
  background-color: #fee2e2;
  color: #991b1b;
}

.badge-info {
  background-color: #dbeafe;
  color: #1e40af;
}

/* ===== ALERTS ===== */

.alert {
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  border-left: 4px solid;
  margin-bottom: var(--space-lg);
}

.alert-success {
  background-color: #d1fae5;
  border-color: #10b981;
  color: #047857;
}

.alert-warning {
  background-color: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
}

.alert-error {
  background-color: #fee2e2;
  border-color: #ef4444;
  color: #991b1b;
}

.alert-info {
  background-color: #dbeafe;
  border-color: #3b82f6;
  color: #1e40af;
}

/* ===== MODALS ===== */

.modal {
  background-color: var(--color-primary-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 500px;
}

.modal-large {
  max-width: 700px;
}

.modal-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-header {
  padding: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.modal-body {
  padding: var(--space-xl);
}

.modal-footer {
  padding: var(--space-xl);
  border-top: 1px solid var(--color-border);
  text-align: right;
}

.modal-footer .btn + .btn {
  margin-left: var(--space-md);
}

/* ===== UTILITIES ===== */

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-muted {
  color: var(--color-text-secondary);
}

.text-error {
  color: var(--color-error);
}

.text-success {
  color: var(--color-success);
}

.text-warning {
  color: var(--color-warning);
}

.text-info {
  color: var(--color-info);
}

.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* ===== ACCESSIBILITY ===== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus visible for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 640px) {
  :root {
    --fs-body-lg: 15px;
    --fs-body: 13px;
    --fs-label: 11px;
  }

  button, .btn, input[type="submit"], input[type="button"] {
    width: 100%;
  }

  .card {
    padding: var(--space-lg);
  }

  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 24px;
  }
}

@media (max-width: 1023px) {
  body {
    font-size: 15px;
  }

  .card {
    padding: var(--space-lg);
  }
}

/* ===== AUTHENTICATION PAGES ===== */

/* Auth Container - Full height centered form.
   NOTE: was `[class*="auth"], [class*="login"], [class*="register"], [class*="password"]`
   — substring matching hit LibreChat's own wrappers and password-field containers
   (each got 100vh + flex-center), shattering /register once social login added
   more matching elements (2026-08-15). Keep explicit classes only. */
.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-neutral-50) 0%, var(--color-primary-light) 100%);
  padding: var(--space-lg);
}

/* Auth Form Wrapper */
.auth-form {
  width: 100%;
  max-width: 420px;
  background-color: var(--color-primary-light);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl) var(--space-2xl);
  box-shadow: var(--shadow-lg);
}

/* Auth Form Title */
.auth-form h1, .auth-form h2, form h1, form h2 {
  text-align: center;
  margin-bottom: var(--space-2xl);
  font-size: var(--fs-h2);
}

/* Auth Form Group - Field wrapper */
.form-group, .field-group, .input-group {
  margin-bottom: var(--space-xl);
  display: flex;
  flex-direction: column;
}

.form-group:last-child {
  margin-bottom: var(--space-2xl);
}

/* Form Group Label */
.form-group label, .field-group label {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
  letter-spacing: -0.3px;
}

/* Form Group Helper Text */
.form-group small, .field-group small, .helper-text, .form-hint {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: var(--space-sm);
}

/* Password Strength Indicator */
.password-strength, .strength-meter {
  margin-top: var(--space-md);
  height: 4px;
  background-color: var(--color-neutral-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.strength-bar {
  height: 100%;
  width: 0%;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.strength-weak { width: 33%; background-color: var(--color-error); }
.strength-fair { width: 66%; background-color: var(--color-warning); }
.strength-good { width: 100%; background-color: #d97706; }
.strength-strong { width: 100%; background-color: var(--color-success); }

/* Error Message */
.error-message, .form-error, [class*="error-text"], .invalid-feedback {
  color: var(--color-error);
  font-size: 12px;
  margin-top: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.error-message::before, .form-error::before {
  content: "⚠";
  font-weight: bold;
}

/* Error Input State */
input.error, input[aria-invalid="true"], .error input,
textarea.error, textarea[aria-invalid="true"],
select.error, select[aria-invalid="true"] {
  border-color: var(--color-error) !important;
  background-color: #fef2f2;
}

input.error:focus, input[aria-invalid="true"]:focus,
textarea.error:focus, textarea[aria-invalid="true"]:focus,
select.error:focus, select[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
  border-color: var(--color-error) !important;
}

/* Success Message */
.success-message, .form-success, [class*="success-text"], .valid-feedback {
  color: var(--color-success);
  font-size: 12px;
  margin-top: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.success-message::before, .form-success::before {
  content: "✓";
  font-weight: bold;
}

/* Checkbox and Radio Styling */
input[type="checkbox"], input[type="radio"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-accent-blue);
}

input[type="checkbox"]:focus, input[type="radio"]:focus {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

.checkbox-group, .radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.checkbox-item, .radio-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.checkbox-item label, .radio-item label {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  font-weight: var(--fw-normal);
}

/* Auth Form Actions (Button Group) */
.form-actions, .auth-actions, .button-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.form-actions button, .auth-actions button {
  width: 100%;
}

/* Auth Links - Signup/Login toggle and forgot password */
.auth-links, .form-footer, .auth-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-lg);
  font-size: var(--fs-body-sm);
}

.auth-link, .toggle-link, .forgot-link {
  color: var(--color-accent-blue);
  text-decoration: none;
  font-weight: var(--fw-medium);
  transition: var(--transition-normal);
}

.auth-link:hover, .toggle-link:hover, .forgot-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

/* Auth divider (or text) */
.auth-divider, .divider, .separator {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-2xl) 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-body-sm);
}

.auth-divider::before, .divider::before,
.auth-divider::after, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

/* Social Auth Buttons */
.social-auth, .social-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

.social-button, .social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-border);
  background-color: var(--color-primary-light);
  color: var(--color-text-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  transition: var(--transition-normal);
}

.social-button:hover, .social-btn:hover {
  background-color: var(--color-neutral-100);
  border-color: var(--color-neutral-300);
}

/* Terms and Privacy */
.auth-legal, .legal-text, .terms-text {
  font-size: 11px;
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: var(--space-xl);
  line-height: var(--lh-relaxed);
}

.auth-legal a, .legal-text a {
  color: var(--color-accent-blue);
  text-decoration: none;
}

.auth-legal a:hover, .legal-text a:hover {
  text-decoration: underline;
}

/* ===== AUTH PAGE RESPONSIVE ===== */

@media (max-width: 640px) {
  .auth-container {
    padding: var(--space-md);
  }

  .auth-form {
    max-width: 100%;
    padding: var(--space-2xl) var(--space-lg);
  }

  .auth-form h1, .auth-form h2, form h1, form h2 {
    font-size: var(--fs-h3);
    margin-bottom: var(--space-xl);
  }

  .form-group, .field-group {
    margin-bottom: var(--space-lg);
  }

  .auth-links, .form-footer {
    flex-direction: column;
    gap: var(--space-md);
    justify-content: center;
  }

  .auth-link, .toggle-link {
    text-align: center;
    width: 100%;
  }

  .social-auth, .social-buttons {
    margin-bottom: var(--space-lg);
  }
}

/* ===== DASHBOARD & SETTINGS ===== */

/* Dashboard Container */
.dashboard-container, .dashboard, .dashboard-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--color-bg-page);
}

.dashboard-header {
  background-color: var(--color-primary-light);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dashboard-header h1 {
  margin: 0;
  font-size: var(--fs-h2);
  color: var(--color-text-primary);
}

.dashboard-content {
  flex: 1;
  padding: var(--space-xl);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.dashboard-sidebar {
  width: 280px;
  background-color: var(--color-neutral-50);
  border-right: 1px solid var(--color-border);
  padding: var(--space-lg);
}

.dashboard-main {
  flex: 1;
  padding: var(--space-lg);
}

/* KPI Cards */
.kpi-grid, .metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.kpi-card, .metric-card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  transition: var(--transition-normal);
}

.kpi-card:hover {
  border-color: var(--color-text-primary);
  box-shadow: var(--shadow-md);
}

.kpi-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
  margin-bottom: var(--space-md);
}

.kpi-label {
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  font-weight: var(--fw-medium);
}

.kpi-trend {
  font-size: 12px;
  margin-top: var(--space-sm);
}

.kpi-trend.positive {
  color: var(--color-success);
}

.kpi-trend.negative {
  color: var(--color-error);
}

/* Dashboard Tables */
.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-xl);
}

.dashboard-table th {
  background-color: var(--color-neutral-100);
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-label);
  padding: var(--space-md);
  text-align: left;
  border-bottom: 2px solid var(--color-border);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dashboard-table td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-body);
  color: var(--color-text-body);
}

.dashboard-table tbody tr:hover {
  background-color: var(--color-neutral-50);
}

.dashboard-table tr:last-child td {
  border-bottom: none;
}

/* Table Alignments */
.table-numeric {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.table-center {
  text-align: center;
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
}

.status-active {
  background-color: #d1fae5;
  color: #047857;
}

.status-pending {
  background-color: #fef3c7;
  color: #92400e;
}

.status-error {
  background-color: #fee2e2;
  color: #991b1b;
}

.status-inactive {
  background-color: var(--color-neutral-200);
  color: var(--color-text-secondary);
}

/* Progress Bars */
.progress-bar {
  width: 100%;
  height: 6px;
  background-color: var(--color-neutral-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: var(--color-accent-blue);
  transition: width 0.3s ease;
}

.progress-fill.success {
  background-color: var(--color-success);
}

.progress-fill.warning {
  background-color: var(--color-warning);
}

.progress-fill.error {
  background-color: var(--color-error);
}

/* Message Bubbles (Chat) */
.message, .chat-message {
  display: flex;
  margin-bottom: var(--space-lg);
  align-items: flex-start;
  gap: var(--space-md);
}

.message.user, .chat-message.user {
  flex-direction: row-reverse;
}

.message-content {
  max-width: 70%;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  word-wrap: break-word;
  line-height: var(--lh-relaxed);
}

.message.ai .message-content,
.chat-message.ai .message-content {
  background-color: var(--color-neutral-100);
  color: var(--color-text-body);
}

.message.user .message-content,
.chat-message.user .message-content {
  background-color: var(--color-accent-blue);
  color: #ffffff;
}

.message-time {
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  align-self: flex-end;
}

/* Loading States */
.loading-spinner, .spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.loading-skeleton {
  background: linear-gradient(90deg, var(--color-neutral-200) 25%, var(--color-neutral-100) 50%, var(--color-neutral-200) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-line {
  height: 12px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}

.skeleton-card {
  height: 200px;
  border-radius: var(--radius-lg);
}

/* Settings Sidebar */
.settings-sidebar {
  width: 250px;
  background-color: var(--color-neutral-50);
  border-right: 1px solid var(--color-border);
  padding: var(--space-lg) 0;
}

.settings-nav {
  display: flex;
  flex-direction: column;
}

.settings-nav-item {
  padding: var(--space-md) var(--space-lg);
  color: var(--color-text-body);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: var(--transition-normal);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.settings-nav-item:hover {
  background-color: var(--color-neutral-100);
  border-left-color: var(--color-accent-blue);
}

.settings-nav-item.active {
  background-color: var(--color-neutral-100);
  border-left-color: var(--color-accent-blue);
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
}

/* Settings Section */
.settings-section {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.settings-section h2 {
  margin-top: 0;
  font-size: var(--fs-h2);
  color: var(--color-text-primary);
}

.settings-section p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

/* Settings Form Groups */
.settings-form-group {
  margin-bottom: var(--space-xl);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.settings-form-group label {
  margin-bottom: 0;
  font-weight: var(--fw-semibold);
}

.settings-form-group input,
.settings-form-group select,
.settings-form-group textarea {
  max-width: 400px;
}

/* Danger Zone */
.danger-zone {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-top: var(--space-xl);
}

.danger-zone h3 {
  color: var(--color-error);
  margin-top: 0;
}

.danger-zone p {
  color: var(--color-text-secondary);
}

.danger-zone .btn-danger {
  margin-top: var(--space-lg);
}

/* Dashboard Responsive */
@media (max-width: 1024px) {
  .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .message-content {
    max-width: 85%;
  }
}

@media (max-width: 640px) {
  .dashboard-header {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }

  .dashboard-content {
    padding: var(--space-lg);
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .kpi-value {
    font-size: 24px;
  }

  .dashboard-table {
    font-size: 12px;
  }

  .dashboard-table th,
  .dashboard-table td {
    padding: var(--space-sm);
  }

  .message-content {
    max-width: 95%;
  }

  .settings-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .settings-form-group {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .settings-form-group input,
  .settings-form-group select,
  .settings-form-group textarea {
    max-width: 100%;
  }
}

/* ===== ANIMATIONS & LOADING STATES ===== */

/* Page Transitions */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* Loading Spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner-sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.spinner-lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

/* Skeleton Loading */
@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--color-neutral-200) 25%, var(--color-neutral-100) 50%, var(--color-neutral-200) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

.skeleton-line {
  height: 12px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}

.skeleton-text {
  height: 14px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}

.skeleton-text:last-child {
  margin-bottom: 0;
}

.skeleton-card {
  height: 200px;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

/* Pulse Animation */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Button Loading State */
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn.loading {
  position: relative;
  color: transparent;
}

.btn.loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Toast Notifications */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--color-primary-dark);
  color: white;
  padding: 16px 24px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  z-index: 9999;
  animation: slideUp 0.3s ease-out;
}

.toast.show {
  animation: slideUp 0.3s ease-out;
}

.toast.hide {
  animation: slideDown 0.3s ease-in;
}

.toast-success {
  background: var(--color-success);
}

.toast-error {
  background: var(--color-error);
}

.toast-warning {
  background: var(--color-warning);
}

.toast-info {
  background: var(--color-accent-blue);
}

/* Button Hover Animations */
button:not(:disabled):hover {
  transform: translateY(-1px);
}

button:not(:disabled):active {
  transform: translateY(0);
}

/* Card Hover Lift */
.card:hover {
  transform: translateY(-2px);
}

/* Input Focus Animation */
input:focus,
textarea:focus,
select:focus {
  transform: none;
  transition: var(--transition-normal);
}

/* Link Hover Animation */
a:not([class*="btn"]):hover {
  color: #1d4ed8;
}

/* Transition for Theme Changes */
* {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Disable transitions on load */
.disable-transitions * {
  transition: none !important;
}

/* Message Appear Animation */
.message, .alert {
  animation: fadeIn 0.3s ease-out;
}

/* Form Input Animation */
.form-group {
  animation: fadeIn 0.2s ease-out;
}

/* Success Checkmark Animation */
@keyframes checkmark {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.checkmark {
  animation: checkmark 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Mobile-friendly animations */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== ERROR PAGES ===== */

/* Error Container */
.error-page, .error-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-lg);
}

.error-container {
  text-align: center;
  max-width: 500px;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
}

/* Error Icon */
.error-icon {
  font-size: 80px;
  line-height: 1;
  margin-bottom: var(--space-lg);
}

.error-icon.spin {
  animation: spin 2s linear infinite;
}

.error-icon.bounce {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Error Code */
.error-code {
  font-size: 64px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-md);
  font-family: 'Courier New', monospace;
  line-height: 1;
}

.error-code.error {
  color: var(--color-error);
}

.error-code.warning {
  color: var(--color-warning);
}

.error-code.info {
  color: var(--color-accent-blue);
}

/* Error Title */
.error-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-md);
  line-height: var(--lh-tight);
}

/* Error Message */
.error-message {
  font-size: var(--fs-body-lg);
  color: var(--color-text-body);
  margin: 0 0 var(--space-2xl);
  line-height: var(--lh-relaxed);
}

/* Error Details */
.error-details, .error-status, .error-reasons, .error-steps {
  background-color: var(--color-neutral-100);
  border-left: 4px solid var(--color-accent-blue);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: var(--fs-body-sm);
}

.error-details.error, .error-status.error {
  background-color: #fef2f2;
  border-left-color: var(--color-error);
}

.error-details.warning, .error-status.warning {
  background-color: #fef3c7;
  border-left-color: var(--color-warning);
}

.error-details.success {
  background-color: #d1fae5;
  border-left-color: var(--color-success);
}

.error-details strong {
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
}

/* Error ID */
.error-id {
  background-color: var(--color-primary-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  font-size: var(--fs-body-sm);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  word-break: break-all;
}

.error-id-label {
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.error-id-value {
  color: var(--color-text-body);
  letter-spacing: 0.5px;
}

/* Connection Status */
.connection-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background-color: var(--color-primary-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-lg);
  font-size: var(--fs-body-sm);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-error);
  animation: pulse 2s infinite;
}

.status-dot.connected {
  background-color: var(--color-success);
  animation: none;
}

/* Error Reasons List */
.error-reasons h3,
.error-steps h3 {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.error-reasons ul,
.error-steps ol {
  margin: 0;
  padding-left: 20px;
  list-style: none;
}

.error-reasons li,
.error-steps li {
  padding: var(--space-sm) 0;
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  position: relative;
}

.error-reasons li:before {
  content: "•";
  color: var(--color-accent-blue);
  font-weight: var(--fw-bold);
  margin-right: var(--space-sm);
}

.error-steps li:before {
  content: "";
  counter-increment: step-counter;
}

/* Error Actions */
.error-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

.error-actions .btn {
  width: 100%;
}

/* Error Footer */
.error-footer {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
}

.error-footer a {
  color: var(--color-accent-blue);
  text-decoration: none;
  font-weight: var(--fw-medium);
}

.error-footer a:hover {
  text-decoration: underline;
}

/* Error Page Backgrounds */
.error-page.error-500 {
  background: linear-gradient(135deg, #fee2e2 0%, var(--color-primary-light) 100%);
}

.error-page.error-403 {
  background: linear-gradient(135deg, #fef3c7 0%, var(--color-primary-light) 100%);
}

.error-page.error-404 {
  background: linear-gradient(135deg, var(--color-neutral-50) 0%, var(--color-primary-light) 100%);
}

/* Error Page Mobile */
@media (max-width: 640px) {
  .error-page {
    padding: var(--space-md);
  }

  .error-container {
    padding: var(--space-lg);
    max-width: 100%;
  }

  .error-icon {
    font-size: 64px;
  }

  .error-code {
    font-size: 48px;
  }

  .error-title {
    font-size: var(--fs-h3);
  }

  .error-message {
    font-size: var(--fs-body);
  }

  .error-actions {
    flex-direction: column;
  }

  .error-actions .btn {
    width: 100%;
  }
}

/* ===== PHASE 5: ADVANCED ANIMATIONS & MICRO-INTERACTIONS ===== */

/* ===== KEYFRAME ANIMATIONS ===== */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(37, 99, 235, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.8);
  }
}

/* ===== ENHANCED BUTTON ANIMATIONS ===== */

.btn {
  position: relative;
  overflow: hidden;
  transition: var(--transition-normal);
}

.btn:not(:disabled) {
  cursor: pointer;
}

.btn-primary {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.btn-secondary:hover:not(:disabled) {
  background-color: #f3f4f6;
  transform: translateY(-1px);
}

.btn-tertiary:hover:not(:disabled) {
  background-color: rgba(37, 99, 235, 0.1);
  transform: translateY(-1px);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Ripple effect on button click */
.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.btn:active::after {
  animation: ripple 0.6s ease-out;
}

/* ===== CARD & CONTAINER ANIMATIONS ===== */

.card {
  animation: slideUp 0.3s ease-out;
  transition: var(--transition-normal);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-outlined {
  border: 1px solid var(--color-border);
}

.card-outlined:hover {
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2), var(--shadow-md);
}

/* ===== FORM & INPUT ANIMATIONS ===== */

input, textarea, select {
  transition: var(--transition-normal);
}

input:focus, textarea:focus, select:focus {
  background-color: var(--color-primary-light);
  box-shadow: var(--shadow-focus);
}

input::placeholder {
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
}

input:focus::placeholder {
  color: var(--color-text-disabled);
}

/* Password strength indicator animation */
.password-strength-bar {
  animation: slideInLeft 0.3s ease-out;
  height: 4px;
  border-radius: var(--radius-full);
  transition: background-color 0.3s ease, width 0.3s ease;
}

/* Form error animation */
.form-error {
  animation: shake 0.3s ease-in-out;
  color: var(--color-error);
}

.form-success {
  animation: slideUp 0.2s ease-out;
  color: var(--color-success);
}

/* ===== LOADING STATES ===== */

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-neutral-200);
  border-top-color: var(--color-accent-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner-sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.spinner-lg {
  width: 24px;
  height: 24px;
  border-width: 3px;
}

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, var(--color-neutral-100) 25%, var(--color-neutral-50) 50%, var(--color-neutral-100) 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
  border-radius: var(--radius-md);
}

.skeleton-text {
  height: 16px;
  margin-bottom: var(--space-md);
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.skeleton-card {
  height: 200px;
  border-radius: var(--radius-lg);
}

/* Loading button state */
.btn[data-loading="true"] {
  pointer-events: none;
  opacity: 0.8;
}

.btn[data-loading="true"]::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: var(--space-sm);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ===== TOAST NOTIFICATIONS ===== */

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-md);
  background: var(--color-primary-dark);
  color: var(--color-primary-light);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 400px;
  word-wrap: break-word;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.toast-success {
  background: var(--color-success);
  color: white;
}

.toast-error {
  background: var(--color-error);
  color: white;
}

.toast-warning {
  background: var(--color-warning);
  color: var(--color-primary-dark);
}

.toast-info {
  background: var(--color-info);
  color: white;
}

.toast::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.toast-success::before {
  content: '✓';
  font-weight: bold;
}

.toast-error::before {
  content: '✕';
  font-weight: bold;
}

.toast-warning::before {
  content: '⚠';
}

.toast-info::before {
  content: 'ℹ';
}

/* Toast exit animation */
.toast[data-closing="true"] {
  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) reverse;
}

/* Mobile toast positioning */
@media (max-width: 640px) {
  .toast {
    bottom: 16px;
    right: 16px;
    left: 16px;
    max-width: none;
  }
}

/* ===== MODAL ANIMATIONS ===== */

.modal {
  animation: fadeIn 0.2s ease-out;
}

.modal-overlay {
  animation: fadeIn 0.2s ease-out;
}

.modal-content {
  animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal[data-closing="true"] {
  animation: fadeIn 0.2s ease-out reverse;
}

/* ===== PAGE TRANSITION ANIMATIONS ===== */

body {
  animation: fadeIn 0.3s ease-out;
}

main, .page-content {
  animation: slideUp 0.3s ease-out;
}

/* ===== HOVER LIFT EFFECTS ===== */

.hover-lift {
  transition: var(--transition-normal);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Subtle hover effect */
.hover-subtle {
  transition: var(--transition-fast);
}

.hover-subtle:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ===== FOCUS RING STYLES ===== */

:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

button:focus-visible, .btn:focus-visible {
  outline-offset: 2px;
}

input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

/* ===== ANCHOR SMOOTH SCROLL ===== */

html {
  scroll-behavior: smooth;
}

/* ===== SMOOTH TRANSITIONS FOR STATE CHANGES ===== */

.transition-all {
  transition: var(--transition-normal);
}

.transition-fast {
  transition: var(--transition-fast);
}

.transition-slow {
  transition: var(--transition-slow);
}

/* ===== REDUCED MOTION ACCESSIBILITY ===== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover {
    transform: none;
  }

  .card:hover {
    transform: none;
  }

  .spinner {
    animation: none;
    border-top-color: transparent;
  }
}

/* ===== ADVANCED HOVER STATES ===== */

.link-hover-glow {
  position: relative;
  transition: color var(--transition-normal);
}

.link-hover-glow:hover {
  color: var(--color-accent-blue);
}

.link-hover-glow::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent-blue);
  transition: width var(--transition-normal);
}

.link-hover-glow:hover::after {
  width: 100%;
}

/* ===== INTERACTIVE ELEMENTS ===== */

.interactive {
  cursor: pointer;
  user-select: none;
  transition: var(--transition-normal);
}

.interactive:active {
  transform: scale(0.98);
}

/* ===== FOCUS STATE VISIBLE ===== */

.focus-visible-ring {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* ===== BADGE ANIMATIONS ===== */

.badge {
  animation: slideInRight 0.3s ease-out;
}

.badge-success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-success);
}

.badge-warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
}

.badge-error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-error);
}

/* ===== LIST & TABLE ANIMATIONS ===== */

table tbody tr {
  animation: slideUp 0.3s ease-out;
}

table tbody tr:hover {
  background-color: var(--color-bg-hover);
  transition: background-color 0.15s ease;
}

/* ===== PROGRESS BAR ANIMATION ===== */

.progress-bar {
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== ALERT ANIMATIONS ===== */

.alert {
  animation: slideDown 0.3s ease-out;
}

.alert-dismissible {
  position: relative;
  padding-right: 40px;
}

.alert-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: inherit;
  opacity: 0.5;
  transition: opacity 0.2s ease;
  padding: 0;
  min-height: auto;
}

.alert-close:hover {
  opacity: 1;
}
/* =====================================================================
   968.ai — ChatGPT-style MONOCHROME theme (loaded AFTER LibreChat's CSS)
   Black / white / gray, no accent color, Geist font, light default.
   ===================================================================== */
:root {
  --font-968: 'Geist', 'IBM Plex Sans Arabic', 'Inter', system-ui, -apple-system,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --radius: 0.75rem;
  /* monochrome accent = near-black */
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --ring: 0 0% 9%;
  --ring-primary: #0d0d0d;
  --brand-purple: #0d0d0d;   /* neutralize any brand-purple usage */
}

html, body, button, input, textarea, select, .font-sans {
  font-family: var(--font-968) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Light monochrome surfaces (ChatGPT-like) */
html.light, html:not(.dark) {
  --surface-primary: #ffffff;
  --surface-primary-alt: #f9f9f9;
  --surface-primary-contrast: #ffffff;
  --surface-secondary: #f9f9f9;
  --surface-secondary-alt: #ececec;
  --surface-tertiary: #f4f4f4;
  --surface-chat: #ffffff;
  --surface-active-alt: #ececec;
  --surface-hover: #f0f0f0;
  --border-light: #ececec;
  --border-medium: #e5e5e5;
  --border-heavy: #d9d9d9;
  --text-primary: #0d0d0d;
  --text-secondary: #5d5d5d;
  --background: 0 0% 100%;
}

/* Moderate rounding — ChatGPT isn't super-round */
.rounded-md { border-radius: .6rem !important; }
.rounded-lg { border-radius: .75rem !important; }
.rounded-xl, .rounded-2xl { border-radius: 1rem !important; }

/* Composer: soft rounded box */
form textarea, [class*="chat"] textarea { border-radius: 1.5rem !important; }

/* Primary / send button -> solid black (white in dark) */
button[type="submit"]:not(:disabled),
button[data-testid="send-button"],
[aria-label="Send message"], [aria-label*="Send"] {
  background: #0d0d0d !important; background-image: none !important;
  color: #fff !important; border: none !important;
}
html.dark button[type="submit"]:not(:disabled),
html.dark button[data-testid="send-button"],
html.dark [aria-label*="Send"] { background: #ffffff !important; color: #0d0d0d !important; }

/* Neutral links + focus */
a { color: #0d0d0d; }
html.dark a { color: #ececec; }
*:focus-visible { outline-color: #0d0d0d !important; }
html.dark *:focus-visible { outline-color: #ececec !important; }

/* Welcome heading -> solid, no gradient. NO letter-spacing (breaks Arabic joining). */
.landing-title, h1.text-4xl, h1.text-3xl,
[class*="welcome"] h1, [class*="Welcome"] h1, [class*="landing"] h1 {
  background: none !important; -webkit-text-fill-color: currentColor !important;
  color: var(--text-primary) !important; font-weight: 600; letter-spacing: normal !important;
}

/* Arabic-safe: never letter-space Arabic (it disconnects the cursive letters). */
:lang(ar), [dir="rtl"], [lang="ar"] { letter-spacing: normal !important; }

/* Logo: black wordmark, invert to white in dark mode */
html.dark img[src*="logo.svg"] { filter: invert(1) brightness(1.7); }

/* Calmer scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 9999px; }
html.dark *::-webkit-scrollbar-thumb { background: #3a3a3a; }
*::-webkit-scrollbar-track { background: transparent; }
#loading-container { background: #ffffff; }
html.dark #loading-container { background: #0d0d0d; }

/* ===== Suggestion chips (monochrome) ===== */
.g968-chips {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  max-width: 760px; margin: 4px auto 14px; padding: 0 12px;
}
.g968-chip {
  font-family: var(--font-968); font-size: 14px; color: #0d0d0d;
  background: #fff; border: 1px solid #e5e5e5; border-radius: 9999px;
  padding: 9px 16px; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.g968-chip:hover { background: #f0f0f0; border-color: #d9d9d9; }
html.dark .g968-chip { background: #1a1a1a; color: #ececec; border-color: #333; }
html.dark .g968-chip:hover { background: #262626; border-color: #444; }

/* ===== Kill LibreChat's green accent (#10a37f) -> monochrome ===== */
.text-green-300, .text-green-400, .text-green-500, .text-green-600, .text-green-700, .text-green-800 {
  color: #0d0d0d !important;
}
html.dark .text-green-300, html.dark .text-green-400, html.dark .text-green-500,
html.dark .text-green-600, html.dark .text-green-700 { color: #ececec !important; }

.border-green-400, .border-green-500, .border-green-600, .border-green-700 { border-color: #0d0d0d !important; }
html.dark .border-green-400, html.dark .border-green-500, html.dark .border-green-600 { border-color: #ececec !important; }

.ring-green-400, .ring-green-500, .ring-green-600 { --tw-ring-color: #0d0d0d !important; }
html.dark .ring-green-400, html.dark .ring-green-500, html.dark .ring-green-600 { --tw-ring-color: #ececec !important; }

.bg-green-500, .bg-green-600, .bg-green-700 { background-color: #0d0d0d !important; color: #fff !important; }
html.dark .bg-green-500, html.dark .bg-green-600, html.dark .bg-green-700 { background-color: #fff !important; color: #0d0d0d !important; }

/* pale green badge backgrounds -> neutral gray */
.bg-green-50, .bg-green-100 { background-color: #f4f4f4 !important; }
html.dark .bg-green-900, html.dark .bg-green-950 { background-color: #1f1f1f !important; }

/* caret/selection + focus accents neutral */
input, textarea { caret-color: #0d0d0d; accent-color: #0d0d0d; }
html.dark input, html.dark textarea { caret-color: #ececec; accent-color: #ececec; }

/* ===== Green variant states (focus/hover/peer) -> monochrome ===== */
[class*="border-green-"]:focus, [class*="border-green-"]:focus-visible,
[class*="border-green-"]:focus-within, [class*="border-green-"]:hover {
  border-color: #0d0d0d !important;
}
html.dark [class*="border-green-"]:focus, html.dark [class*="border-green-"]:hover { border-color: #ececec !important; }

[class*="ring-green-"]:focus, [class*="ring-green-"]:focus-visible { --tw-ring-color: #0d0d0d !important; }
html.dark [class*="ring-green-"]:focus { --tw-ring-color: #ececec !important; }

[class*="text-green-"]:focus, [class*="text-green-"]:hover { color: #0d0d0d !important; }
html.dark [class*="text-green-"]:focus, html.dark [class*="text-green-"]:hover { color: #ececec !important; }

/* floating label turns green when its peer input is focused */
.peer:focus ~ [class*="peer-focus:text-green"] { color: #0d0d0d !important; }
html.dark .peer:focus ~ [class*="peer-focus:text-green"] { color: #ececec !important; }

[class*="bg-green-"]:focus, [class*="bg-green-"]:hover { background-color: #0d0d0d !important; color: #fff !important; }
html.dark [class*="bg-green-"]:hover { background-color: #ffffff !important; color: #0d0d0d !important; }

/* submit token used by some buttons */
:root, html.light, html:not(.dark) { --surface-submit: #0d0d0d; --surface-submit-hover: #000000; }
html.dark { --surface-submit: #ffffff; --surface-submit-hover: #f0f0f0; }

/* =====================================================================
   TIER-ONE POLISH v2 — structural ChatGPT layout (2026-08-10)
   Hooks verified against the live v0.8.7 bundle (index.BHS-ABOD.js):
   .final-completion row · .agent-turn assistant col · rounded-t-3xl composer
   ===================================================================== */

/* --- 1 · Reading typography: ChatGPT is 16px / 1.75 --- */
:root { --markdown-font-size: 1rem; }
.markdown-body, .prose, .message-render {
  font-size: 1rem !important;
  line-height: 1.75 !important;
}
.prose p { margin-top: 0; margin-bottom: 1rem; }
.prose li { margin-block: .25rem; }
.prose h1, .prose h2, .prose h3 { font-weight: 600; letter-spacing: normal; }
.prose :where(code):not(pre code) {
  background: #f4f4f4; border-radius: .375rem; padding: .125rem .375rem;
  font-size: .875em; font-weight: 500;
}
html.dark .prose :where(code):not(pre code) { background: #ffffff14; }

/* --- 2 · ChatGPT dark palette (deep neutral, no blue-gray) --- */
html.dark {
  --surface-primary: #212121;
  --surface-primary-alt: #171717;
  --surface-primary-contrast: #2f2f2f;
  --surface-secondary: #2f2f2f;
  --surface-secondary-alt: #424242;
  --surface-tertiary: #424242;
  --surface-tertiary-alt: #2f2f2f;
  --surface-chat: #2f2f2f;
  --surface-dialog: #2f2f2f;
  --surface-hover: #303030;
  --surface-hover-alt: #303030;
  --surface-active-alt: #303030;
  --presentation: #212121;
  --text-primary: #ececec;
  --text-secondary: #b4b4b4;
  --text-secondary-alt: #b4b4b4;
  --border-light: #ffffff0f;
  --border-medium: #ffffff1a;
  --border-heavy: #ffffff26;
}
html.dark .gpt-dark-gray, html.dark .dark\:gpt-dark-gray { background-color: #212121 !important; }
html.dark body, html.dark #root { background: #212121; }

/* --- 3 · Messages: no avatars, no sender labels, user turns as bubbles --- */
.final-completion > .flex-shrink-0 { display: none !important; }        /* avatar col */
.final-completion .select-none.font-semibold { display: none !important; } /* "You"/model + time */
.final-completion { gap: 0 !important; margin-bottom: .875rem; }
.final-completion > .w-11\/12 { width: 100% !important; }

/* user column (no .agent-turn) -> right-aligned; flips correctly in RTL */
.final-completion > .w-11\/12:not(.agent-turn) { align-items: flex-end; }
.final-completion > .w-11\/12:not(.agent-turn) > .flex-col {
  background: #f4f4f4;
  border-radius: 1.375rem;
  padding: .4375rem 1.125rem;
  max-width: min(85%, 42rem);
  width: fit-content;
}
html.dark .final-completion > .w-11\/12:not(.agent-turn) > .flex-col { background: #2f2f2f; }
/* inside the bubble, kill the trailing paragraph margin */
.final-completion > .w-11\/12:not(.agent-turn) .prose p:last-child { margin-bottom: 0; }

/* --- 4 · Composer: floating white card with soft depth --- */
[class*="rounded-t-3xl"] {
  border-radius: 1.75rem !important;
  border-color: var(--border-light) !important;
  box-shadow: 0 0 1px rgba(0,0,0,.14), 0 2px 16px rgba(0,0,0,.05);
  transition: box-shadow .15s ease;
}
[class*="rounded-t-3xl"]:focus-within {
  box-shadow: 0 0 1px rgba(0,0,0,.2), 0 6px 28px rgba(0,0,0,.08);
}
html.dark [class*="rounded-t-3xl"] {
  box-shadow: none;
  border-color: #ffffff14 !important;
}
button[data-testid="send-button"] { border-radius: 9999px !important; }

/* --- 5 · Sidebar: flat, borderless, rounded rows (ChatGPT) --- */
nav { border: none !important; }
nav a, nav [data-testid="nav-new-chat-button"], nav li > div, nav button {
  border-radius: .625rem;
}
nav a { transition: background-color .12s ease; }

/* --- 6 · Softer elevation everywhere --- */
.shadow-xl { box-shadow: 0 8px 30px rgba(0,0,0,.08) !important; }
.shadow-lg { box-shadow: 0 4px 20px rgba(0,0,0,.07) !important; }
.shadow-md { box-shadow: 0 2px 10px rgba(0,0,0,.06) !important; }
html.dark .shadow-xl, html.dark .shadow-lg, html.dark .shadow-md {
  box-shadow: 0 8px 30px rgba(0,0,0,.4) !important;
}

/* --- 7 · Auth screens: tall calm inputs, black focus ring --- */
input.webkit-dark-styles {
  height: 52px;
  border-radius: .75rem !important;
  border-color: #d9d9d9 !important;
  font-size: 1rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input.webkit-dark-styles:focus, input.webkit-dark-styles:focus-visible {
  border-color: #0d0d0d !important;
  box-shadow: 0 0 0 1px #0d0d0d;
  outline: none;
}
html.dark input.webkit-dark-styles { border-color: #ffffff26 !important; }
html.dark input.webkit-dark-styles:focus {
  border-color: #ececec !important;
  box-shadow: 0 0 0 1px #ececec;
}

/* --- 8 · Micro-interactions --- */
button, a { transition: background-color .12s ease, color .12s ease, border-color .12s ease; }
.hover-button { border-radius: .5rem !important; }

/* =====================================================================
   v3 — ChatGPT-style centered empty state + motion (2026-08-10)
   ===================================================================== */

/* Hide LibreChat's plain-text greeting (we render our own hero).
   The :not(:has()) guards are a blank-screen safety net: if this class ever
   lands on a container instead of a leaf label, anything wrapping real UI
   stays visible. */
.g968-hide:not(:has(form)):not(:has(textarea)):not(:has(button)):not(:has(nav)) {
  visibility: hidden !important; height: 0 !important;
  margin: 0 !important; padding: 0 !important; overflow: hidden !important;
}

/* vertically center hero + composer + chips on the empty screen */
html.g968-empty .g968-center {
  transform: translateY(-26vh);
  transition: transform .25s ease;
}
@media (max-height: 760px) {
  html.g968-empty .g968-center { transform: translateY(-18vh); }
}
@media (max-width: 640px) {
  html.g968-empty .g968-center { transform: translateY(-16vh); }
}

/* hero greeting */
.g968-hero { text-align: center; margin: 0 auto 22px; padding: 0 16px; }
.g968-hero-ar {
  font-family: 'IBM Plex Sans Arabic', var(--font-968);
  font-size: 30px; font-weight: 600; color: var(--text-primary);
  letter-spacing: normal; line-height: 1.5;
}
.g968-hero-en {
  font-size: 16px; font-weight: 400; color: var(--text-secondary);
  margin-top: 6px;
}
@media (max-width: 640px) {
  .g968-hero-ar { font-size: 24px; }
}

/* chips sit under the composer on the empty screen */
html.g968-empty .g968-chips { margin-top: 14px; }

/* messages ease in like ChatGPT */
@keyframes g968-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.message-render { animation: g968-in .3s ease both; }
@media (prefers-reduced-motion: reduce) {
  .message-render { animation: none; }
  html.g968-empty .g968-center { transition: none; }
}

/* =====================================================================
   v5 — empty-state fixes + calmer Upgrade affordance (2026-08-10)
   ===================================================================== */

/* Upgrade: quiet outline pill, not a competing black button.
   On narrow screens it collapses to the ✦ glyph so it stops crowding
   the model picker. */
.g968-upgrade {
  position: fixed; top: 10px; right: 12px; z-index: 9998;
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 13px var(--font-968);
  color: var(--text-primary); text-decoration: none;
  background: var(--surface-primary);
  border: 1px solid var(--border-medium);
  padding: 6px 13px; border-radius: 9999px;
  transition: background-color .12s ease, border-color .12s ease;
}
.g968-upgrade:hover { background: var(--surface-hover); border-color: var(--border-heavy); }
@media (max-width: 640px) {
  .g968-upgrade { padding: 6px 9px; }
  .g968-up-label { display: none; }
}

/* Empty state: optical centering. LibreChat's composer sits in a flex column;
   nudging it up reads as "centered" better than true center. */
html.g968-empty .g968-center {
  transform: translateY(-14vh);
}
@media (max-width: 640px) {
  html.g968-empty .g968-center { transform: translateY(-8vh); }
}

/* hero spacing now that it is the ONLY greeting */
.g968-hero { margin-bottom: 26px; }
.g968-hero-ar { font-size: 32px; line-height: 1.6; }
.g968-hero-en { font-size: 15px; margin-top: 8px; }
@media (max-width: 640px) {
  .g968-hero-ar { font-size: 25px; }
  .g968-hero-en { font-size: 14px; }
}

/* chips: tighter, scrollable on mobile instead of wrapping into a block */
html.g968-empty .g968-chips { margin-top: 16px; }
@media (max-width: 640px) {
  .g968-chips {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .g968-chips::-webkit-scrollbar { display: none; }
  .g968-chip { font-size: 13px; padding: 8px 14px; }
}

/* LibreChat renders a blank greeting node now — collapse its empty box */
.g968-hide { display: none !important; }

/* =====================================================================
   v6 — composer frame fix (2026-08-10)
   The global focus-visible outline was landing on the composer TEXTAREA,
   drawing a hard black rounded rect around just the text row (and running
   off-screen on mobile, since the textarea is full-bleed). ChatGPT puts the
   focus state on the CONTAINER, never the field.
   ===================================================================== */

/* 1 · No outline/ring on the composer field itself */
form textarea,
form textarea:focus,
form textarea:focus-visible,
[class*="rounded-t-3xl"] textarea:focus,
[class*="rounded-t-3xl"] textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;   /* radius belongs to the container */
  background: transparent !important;
}

/* 2 · The container is the frame — visible border, focus lifts the shadow */
[class*="rounded-t-3xl"] {
  border: 1px solid var(--border-medium) !important;
  background: var(--surface-primary);
}
[class*="rounded-t-3xl"]:focus-within {
  border-color: var(--border-heavy) !important;
}

/* 3 · Mobile: inset the composer so the pill's curves are actually on-screen */
@media (max-width: 640px) {
  [class*="rounded-t-3xl"] {
    border-radius: 1.75rem !important;
    margin-left: 10px;
    margin-right: 10px;
    width: auto !important;
  }
}

/* =====================================================================
   v7 — ChatGPT parity pass (verified against a local LibreChat instance)
   ===================================================================== */

/* 1 · Empty state: LibreChat pins the composer to the BOTTOM on phones
   (`justify-end`, with `sm:justify-center` only from 640px up). The old
   translateY() hack fought that and lost. Flip the real property on the
   direct parent of our centering target instead. */
html.g968-empty :has(> .g968-center) {
  justify-content: center !important;
}
html.g968-empty .g968-center {
  transform: none !important;   /* retire the v5 translateY hack */
}

/* 1b · justify-content alone does nothing: the sibling is LibreChat's own
   landing block (the robot glyph + default greeting) and it is `h-full`, so it
   occupies 633 of 932px and leaves zero free space to centre into. Hiding it
   removes the marooned robot AND frees the space in one move. Scoped to the
   empty state, so live conversations are untouched. */
html.g968-empty :has(> .g968-center) > :not(.g968-center) {
  display: none !important;
}

/* 3 · The v1 global focus outline was still landing on INPUTS (the model
   search box drew a heavy black rounded ring). v6 fixed textareas only. */
input:focus,
input:focus-visible,
[role="combobox"]:focus,
[role="combobox"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* 4 · Chips: wrap onto a second row instead of running off the screen edge. */
#g968-chips {
  flex-wrap: wrap !important;
  justify-content: center;
  overflow: visible !important;
  gap: 8px;
  padding-inline: 12px;
}

/* =====================================================================
   v8 — header legibility + real drawer/settings selectors
   ===================================================================== */

/* 5 · Scrolled conversation text was running UNDER the floating header.
   LibreChat's header bar is `absolute top-0 z-10` and paints itself with a
   gradient whose `from-` stop only exists at `md:` and up — on a phone the
   computed background is rgba(0,0,0,0), i.e. fully transparent. Give it the
   page colour plus a short fade so content dissolves under it like ChatGPT
   instead of colliding with the model pill. Keyed off #open-sidebar-button,
   which is unique to this bar. */
div.absolute.top-0.z-10:has(#open-sidebar-button) {
  background-color: var(--presentation, #ffffff);
}
div.absolute.top-0.z-10:has(#open-sidebar-button)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 20px;
  background: linear-gradient(to bottom, var(--presentation, #ffffff), transparent);
  pointer-events: none;
}

/* =====================================================================
   v9 — ChatGPT-style message turns
   Verified against the real DOM (probe8): each turn is
     .user-turn|.agent-turn > h2(name + <time>) + .flex.flex-col.gap-1
   ===================================================================== */

/* 6 · Drop the "QA Tester · 3 minutes ago" / "AI · 3 minutes ago" headers.
   ChatGPT labels neither turn. Collapsing with font-size/height instead of
   `display:none` because that h2 also carries a .sr-only "Prompt 1:" span that
   is the only thing telling a screen reader whose turn this is — hiding the
   h2 outright would strip the turn structure from assistive tech. */
.user-turn > h2,
.agent-turn > h2 {
  font-size: 0 !important;
  line-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}
.user-turn > h2 > time,
.agent-turn > h2 > time { display: none !important; }
/* restore a real font-size on the a11y-only label so AT still reads it */
.user-turn > h2 > .sr-only,
.agent-turn > h2 > .sr-only { font-size: 12px !important; line-height: 1 !important; }

/* 7 · User messages become a right-aligned rounded bubble. LibreChat renders
   them flat and full-width, identical to the assistant turn, so a thread reads
   as one undifferentiated column. Shrink-to-fit comes from align-items on the
   column, which is why each level of the chain needs it. */
.user-turn { align-items: flex-end !important; }
.user-turn > .flex.flex-col.gap-1 {
  align-items: flex-end !important;
  max-width: 85%;
  margin-inline-start: auto;
}
.user-turn .text-message {
  background: #f4f4f4;
  border-radius: 22px;
  padding: 10px 16px;
}
html.dark .user-turn .text-message { background: #303030; }

/* the hover actions under a user message follow the bubble to the right */
.user-turn .mt-1.flex { justify-content: flex-end !important; }

/* 8 · Drop the per-message avatar column. It left an orphaned "QT" circle
   stranded to the LEFT of the now right-aligned user bubble, and the assistant
   robot rendered white-on-white in light mode (visible only in dark). ChatGPT
   shows no avatar on either turn in the thread. probe9 confirmed this element
   is the turn's only preceding sibling, so :has(+ .turn) targets exactly it. */
div:has(+ .user-turn),
div:has(+ .agent-turn) { display: none !important; }
/* reclaim the 36px gutter the avatar column used to occupy */
.user-turn, .agent-turn { width: 100% !important; }

/* ===== 968.ai: credit balance pill (left of the Upgrade pill) ===== */
.g968-credits {
  position: fixed; top: 10px; right: 122px; z-index: 9998;
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 12.5px var(--font-968);
  color: var(--text-primary); text-decoration: none;
  background: var(--surface-primary);
  border: 1px solid var(--border-medium);
  padding: 6px 12px; border-radius: 9999px;
  transition: background-color .12s ease, border-color .12s ease;
}
.g968-credits:hover { background: var(--surface-hover); border-color: var(--border-heavy); }
.g968-cr-cost { color: var(--text-secondary); }
@media (max-width: 640px) {
  .g968-credits { right: 60px; padding: 6px 9px; }
  .g968-cr-cost { display: none; }  /* keep the pill tight on phones */
}

/* ===== 968.ai: add-to-home-screen toast ===== */
.g968-a2hs {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 9999; max-width: min(92vw, 460px);
  display: flex; align-items: center; gap: 10px;
  font: 500 13px var(--font-968); color: var(--text-primary);
  background: var(--surface-primary);
  border: 1px solid var(--border-medium); border-radius: 14px;
  padding: 10px 14px; box-shadow: 0 8px 28px rgba(0,0,0,.14);
}
.g968-a2hs-t { flex: 1; line-height: 1.4; }
.g968-a2hs-go {
  flex-shrink: 0; border: none; cursor: pointer;
  background: var(--text-primary); color: var(--surface-primary);
  font: 600 12.5px var(--font-968);
  padding: 7px 14px; border-radius: 9999px;
}
.g968-a2hs-x {
  flex-shrink: 0; border: none; cursor: pointer;
  background: transparent; color: var(--text-secondary);
  font-size: 14px; padding: 4px;
}