/* OpenAI-like neutral palette layer.
   Keep this stylesheet last: it only normalizes colors, not spacing or layout. */

:root {
  --oa-neutral-primary: #202123;
  --oa-neutral-primary-hover: #2f3035;
  --oa-neutral-primary-active: #111216;
  --oa-neutral-soft: rgba(32, 33, 35, 0.065);
  --oa-neutral-soft-hover: rgba(32, 33, 35, 0.095);
  --oa-neutral-border: rgba(32, 33, 35, 0.14);
  --oa-neutral-border-soft: rgba(32, 33, 35, 0.10);
  --oa-neutral-ring: rgba(32, 33, 35, 0.16);
  --oa-neutral-shadow: 0 8px 18px rgba(0, 0, 0, 0.13);

  --app-primary: var(--oa-neutral-primary) !important;
  --app-primary-hover: var(--oa-neutral-primary-hover) !important;
  --app-ring: var(--oa-neutral-ring) !important;
  --ui-focus: var(--oa-neutral-ring) !important;
  --tw-ring-color: var(--oa-neutral-ring) !important;

  --docs-blue: var(--oa-neutral-primary) !important;
  --docs-blue-light: var(--oa-neutral-soft) !important;
  --docs-blue-border: var(--oa-neutral-border-soft) !important;

  --acc-primary: var(--oa-neutral-primary) !important;
  --acc-primary-700: var(--oa-neutral-primary-hover) !important;
  --acc-success: #3f3f46 !important;
  --acc-primary-soft: var(--oa-neutral-soft) !important;
  --acc-primary-soft-2: var(--oa-neutral-soft-hover) !important;
  --acc-success-soft: var(--oa-neutral-soft) !important;

  --primary-50: var(--oa-neutral-soft) !important;
  --primary-100: var(--oa-neutral-border-soft) !important;
  --primary-500: var(--oa-neutral-primary) !important;
  --primary-600: var(--oa-neutral-primary-hover) !important;
  --primary-700: var(--oa-neutral-primary-active) !important;
  --ring: 0 0 0 2px var(--oa-neutral-ring) !important;
}

.btn-primary,
.bg-btn-primary,
#topup-button,
#topup-button.bg-btn-primary,
#save-ai-settings,
#settings-section #save-ai-settings,
#prompt-send-new-btn,
#save-edit-btn,
#docs-preview-ai,
#docs-action-apply,
.docs-action-btn--primary,
.docs-preview-download-btn,
.docs-action-footer-btn--primary,
.docs-folder-modal__btn--primary,
.docs-connect-btn,
.docs-ai-send-btn,
.docs-media-transcribe-btn,
.acc-btn--primary,
#account-overlay .acc-btn--primary,
.acc-btn--success,
#account-overlay .acc-btn--success,
.login-submit,
.glass-btn-primary,
.ai-chip-primary,
.send-circle-btn,
.chat-mode-btn--active,
.tutorial-skip,
button[class*="bg-blue-"],
a[class*="bg-blue-"],
[role="button"][class*="bg-blue-"] {
  background: var(--oa-neutral-primary) !important;
  background-color: var(--oa-neutral-primary) !important;
  background-image: none !important;
  border-color: var(--oa-neutral-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.bg-btn-primary:hover,
#topup-button:hover,
#topup-button.bg-btn-primary:hover,
#save-ai-settings:hover,
#settings-section #save-ai-settings:hover,
#prompt-send-new-btn:hover,
#save-edit-btn:hover,
#docs-preview-ai:hover,
#docs-action-apply:hover,
.docs-action-btn--primary:hover,
.docs-preview-download-btn:hover,
.docs-action-footer-btn--primary:hover,
.docs-folder-modal__btn--primary:hover,
.docs-connect-btn:hover,
.docs-ai-send-btn:hover:not(:disabled),
.docs-media-transcribe-btn:hover:not(:disabled),
.acc-btn--primary:hover,
#account-overlay .acc-btn--primary:hover,
.acc-btn--success:hover,
#account-overlay .acc-btn--success:hover,
.login-submit:hover,
.glass-btn-primary:hover,
.ai-chip-primary:hover,
.send-circle-btn:hover:not(:disabled),
.tutorial-skip:hover,
button[class*="bg-blue-"]:hover,
a[class*="bg-blue-"]:hover,
[role="button"][class*="bg-blue-"]:hover,
button[class*="hover:bg-blue-"]:hover,
a[class*="hover:bg-blue-"]:hover,
[role="button"][class*="hover:bg-blue-"]:hover {
  background: var(--oa-neutral-primary-hover) !important;
  background-color: var(--oa-neutral-primary-hover) !important;
  background-image: none !important;
  border-color: var(--oa-neutral-primary-hover) !important;
  color: #ffffff !important;
  box-shadow: var(--oa-neutral-shadow) !important;
}

.btn-primary:active,
.bg-btn-primary:active,
#topup-button:active,
#topup-button.bg-btn-primary:active,
#save-ai-settings:active,
#settings-section #save-ai-settings:active,
#prompt-send-new-btn:active,
#save-edit-btn:active,
#docs-preview-ai:active,
#docs-action-apply:active,
.docs-action-btn--primary:active,
.docs-preview-download-btn:active,
.docs-action-footer-btn--primary:active,
.docs-folder-modal__btn--primary:active,
.docs-connect-btn:active,
.acc-btn--primary:active,
#account-overlay .acc-btn--primary:active,
.acc-btn--success:active,
#account-overlay .acc-btn--success:active,
.login-submit:active,
.glass-btn-primary:active,
.ai-chip-primary:active,
.send-circle-btn:active,
.tutorial-skip:active,
button[class*="bg-blue-"]:active,
a[class*="bg-blue-"]:active,
[role="button"][class*="bg-blue-"]:active {
  background: var(--oa-neutral-primary-active) !important;
  background-color: var(--oa-neutral-primary-active) !important;
  background-image: none !important;
  border-color: var(--oa-neutral-primary-active) !important;
  box-shadow: none !important;
}

#referral-settings [style*="background:#f0fdf4"],
#referral-settings [style*="background: #f0fdf4"],
#referral-settings [style*="background:#eff6ff"],
#referral-settings [style*="background: #eff6ff"] {
  background: var(--oa-neutral-soft) !important;
  border-color: var(--oa-neutral-border-soft) !important;
}

#referral-settings [style*="color:#16a34a"],
#referral-settings [style*="color: #16a34a"],
#referral-settings [style*="color:#4ade80"],
#referral-settings [style*="color: #4ade80"],
#referral-settings [style*="color:#2563eb"],
#referral-settings [style*="color: #2563eb"],
#referral-settings [style*="color:#60a5fa"],
#referral-settings [style*="color: #60a5fa"],
#account-overlay [style*="rgba(29,78,216"],
#account-overlay [style*="rgba(37,99,235"],
#account-overlay [style*="rgba(5,150,105"],
#account-overlay [style*="rgba(16,185,129"],
#account-overlay [style*="rgba(107,33,168"],
#account-overlay [style*="rgba(147,51,234"] {
  color: var(--oa-neutral-primary) !important;
  border-color: var(--oa-neutral-border-soft) !important;
}

#account-overlay .acc-role-badge,
#account-overlay .acc-tab.is-active,
#account-overlay .acc-result,
#account-overlay .acc-result-badge,
#account-overlay .acc-action-btn--copy,
#account-overlay .acc-action-btn--copy.is-copied,
#account-overlay [style*="background: rgba(37,99,235"],
#account-overlay [style*="background:rgba(37,99,235"],
#account-overlay [style*="background: rgba(16,185,129"],
#account-overlay [style*="background:rgba(16,185,129"],
#account-overlay [style*="background: rgba(147,51,234"],
#account-overlay [style*="background:rgba(147,51,234"] {
  background: var(--oa-neutral-soft) !important;
  border-color: var(--oa-neutral-border-soft) !important;
  color: var(--oa-neutral-primary) !important;
  box-shadow: none !important;
}

#save-status.success {
  color: #4b5563 !important;
}

#save-status.loading {
  color: #6b7280 !important;
}

button[class*="text-blue-"],
a[class*="text-blue-"],
[role="button"][class*="text-blue-"],
.breadcrumb-item[class*="text-blue-"],
.setting-label-text[class*="text-blue-"],
.text-blue-300,
.text-blue-500,
.text-blue-600,
.text-blue-700,
.text-blue-900,
.dark\:text-blue-300 {
  color: var(--oa-neutral-primary) !important;
}

button[class*="border-blue-"],
a[class*="border-blue-"],
[role="button"][class*="border-blue-"],
.setting-pill[class*="border-blue-"],
.instruction-card[class*="border-blue-"],
.border-blue-100,
.border-blue-200,
.border-blue-500,
.ring-blue-100 {
  border-color: var(--oa-neutral-border-soft) !important;
  --tw-ring-color: var(--oa-neutral-ring) !important;
}

.bg-blue-50,
.bg-blue-50\/50,
.bg-blue-50\/80,
.bg-blue-100,
.dark\:bg-blue-900\/50,
.mode-menu-item[aria-current="true"],
.token-value,
.docs-action-btn--active,
.docs-template-tab.is-active,
.docs-workflow-action-card.is-selected,
.docs-action-card.is-selected,
.docs-ai-library-btn,
.docs-quick-btn:not(.docs-quick-btn--danger):hover {
  background: var(--oa-neutral-soft) !important;
  background-color: var(--oa-neutral-soft) !important;
  border-color: var(--oa-neutral-border-soft) !important;
  color: var(--oa-neutral-primary) !important;
  box-shadow: none !important;
}

.hover\:bg-blue-50:hover,
.hover\:bg-blue-100:hover,
.dark\:hover\:bg-blue-900\/30:hover,
.instruction-card:hover {
  background: var(--oa-neutral-soft-hover) !important;
  background-color: var(--oa-neutral-soft-hover) !important;
}

.setting-item input[type="checkbox"]:checked + .switch,
.setting-item input[type="checkbox"]:checked + .switch:hover,
.token-range::-webkit-slider-thumb,
.token-range::-moz-range-thumb,
.mode-btn.active,
#chat-modes-bar .mode-btn.active,
#settings-section #save-ai-settings::before,
#sidebar #topup-button::before,
#model-selector-container .model-select-pro__dot {
  background: var(--oa-neutral-primary) !important;
  background-color: var(--oa-neutral-primary) !important;
  background-image: none !important;
  border-color: var(--oa-neutral-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.mode-btn.active .mode-text,
.settings-legal-link:hover,
.docs-template-manage-btn:hover,
.docs-back-btn:hover,
.docs-action-btn:hover,
.docs-ctx-btn:hover,
.docs-deselect-btn:hover,
.provider-btn,
.telegram-btn {
  color: var(--oa-neutral-primary) !important;
  border-color: var(--oa-neutral-border-soft) !important;
  box-shadow: none !important;
}

.provider-btn:hover,
.telegram-btn:hover {
  background: var(--oa-neutral-soft) !important;
  border-color: var(--oa-neutral-border) !important;
  color: var(--oa-neutral-primary) !important;
  box-shadow: none !important;
}

#chat-modes-bar .mode-switcher {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, rgba(247, 247, 248, 0.94) 100%) !important;
  border-color: var(--oa-neutral-border-soft) !important;
}

input[class*="focus:ring-blue-"]:focus,
textarea[class*="focus:ring-blue-"]:focus,
select[class*="focus:ring-blue-"]:focus,
input[class*="focus:border-blue-"]:focus,
textarea[class*="focus:border-blue-"]:focus,
select[class*="focus:border-blue-"]:focus,
.docs-select-checkbox:checked,
.docs-action-card:focus-visible,
.docs-workflow-action-card:focus-visible,
#image-settings-panel-new .selected,
#image-settings-panel-new [aria-selected="true"] {
  border-color: var(--oa-neutral-border) !important;
  box-shadow: 0 0 0 4px var(--oa-neutral-ring) !important;
  --tw-ring-color: var(--oa-neutral-ring) !important;
  accent-color: var(--oa-neutral-primary) !important;
}

.decoration-blue-400 {
  text-decoration-color: rgba(32, 33, 35, 0.42) !important;
}

.shadow-blue-500\/25,
.hover\:shadow-blue-500\/35:hover {
  box-shadow: var(--oa-neutral-shadow) !important;
}

.loading-spinner,
.mini-spinner,
.animate-spin[class*="border-blue-"],
.docs-loading-spinner {
  border-top-color: var(--oa-neutral-primary) !important;
  border-bottom-color: var(--oa-neutral-primary) !important;
}

.boot-loader__brand,
.boot-loader__bar span,
.boot-loader__core::before {
  background: linear-gradient(90deg, #202123 0%, #52525b 100%) !important;
}

.boot-loader__orb::before {
  background: radial-gradient(45% 45% at 50% 50%, rgba(32, 33, 35, 0.16) 0%, rgba(32, 33, 35, 0) 100%) !important;
}

.icon-list svg {
  color: var(--oa-neutral-primary) !important;
}

.tip-box {
  background: var(--oa-neutral-soft) !important;
  border-color: var(--oa-neutral-border-soft) !important;
}

.tip-box p,
.tip-box strong {
  color: var(--oa-neutral-primary) !important;
}

.example-box {
  border-left-color: var(--oa-neutral-primary) !important;
}