@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Cairo:wght@400;500;600;700;800&display=swap');

/* ===========================================================
   Nimer — calm, warm visual identity (layer over LibreChat)
   Palette softened (easier on the eyes). CSS only, no layout breaks.
   Mix of: Claude's warmth, Gemini's rounded calm, ChatGPT's cleanliness.
   =========================================================== */

:root {
  --nimer-gold: #d9a441;          /* muted, soft gold */
  --nimer-gold-light: #e6b95f;
  --nimer-gold-soft: #f0d9a6;
  --nimer-ink: #14181f;           /* soft warm-dark (not pure black) */
  --nimer-charcoal: #1a1f27;
  --nimer-warm-bg: #f8f5ef;       /* warm cream (Claude-like) */
  --brand-purple: #d9a441 !important;
}

/* Latin-first font with Arabic fallback (Cairo) */
html, body, button, input, textarea, select {
  font-family: 'Inter', 'Cairo', 'Segoe UI', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Arabic landing greeting — RTL without breaking React layout */
.nimer-arabic-text {
  font-family: 'Cairo', 'Inter', 'Segoe UI', system-ui, sans-serif !important;
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: center;
  line-height: 1.5;
}

/* ===== Light theme — warm & calm ===== */
html {
  --surface-submit: #c4912f !important;
  --surface-submit-hover: #a87a26 !important;
  --text-warning: #c4912f !important;
  --ring-primary: #d9a441 !important;
  --primary: 38 60% 50% !important;          /* softer saturation */
  --primary-foreground: 0 0% 100% !important;
  --accent: 38 45% 94% !important;
  --accent-foreground: 24 12% 16% !important;
  --header-primary: var(--nimer-warm-bg) !important;
  --surface-primary: #ffffff !important;
  --surface-secondary: #f6f2ea !important;
  --surface-tertiary: #fbf8f2 !important;
  --surface-chat: #fcfaf6 !important;
}

/* ===== Dark theme — warm, soft, low-glare ===== */
.dark {
  --brand-purple: #e6b95f !important;
  --surface-submit: #d9a441 !important;
  --surface-submit-hover: #c4912f !important;
  --primary: 40 65% 56% !important;
  --primary-foreground: 24 12% 12% !important;
  --accent: 30 12% 18% !important;
  --accent-foreground: 40 70% 62% !important;
  --header-primary: #1a1f27 !important;
  --surface-primary: var(--nimer-ink) !important;
  --surface-primary-alt: var(--nimer-charcoal) !important;
  --surface-secondary: #1a1f27 !important;
  --surface-tertiary: #20262f !important;
  --surface-chat: #14181f !important;
  --surface-dialog: #1a1f27 !important;
  --border-light: #2a323d !important;
  --border-medium: #333d4a !important;
  --text-primary: #dde3ea !important;        /* soft, not harsh white */
  --text-secondary: #aab3bd !important;
}

/* Calm background — very subtle warmth, no strong glare */
#root {
  background:
    radial-gradient(1200px circle at 85% -5%, rgba(217, 164, 65, 0.05), transparent 40%);
}
.dark #root {
  background:
    radial-gradient(1200px circle at 85% -5%, rgba(217, 164, 65, 0.07), transparent 42%),
    linear-gradient(180deg, #14181f 0%, #161b22 100%);
}

/* Thin, subtle brand accent at the very top (calm, low opacity) */
body::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(217,164,65,.55), transparent);
  z-index: 9999; pointer-events: none;
}

/* ===== Logo — circular Nimer mark (teal → gold), blends with UI ===== */
.shadow-stroke.rounded-full,
div.rounded-full.bg-white:has(img),
div.rounded-full.dark\:bg-presentation:has(img) {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

img.nimer-logo,
img[src*='logo.png'],
img[src*='nimer-icon'],
img[src*='logo.svg'],
img[src*='logo-brand'] {
  object-fit: cover !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: 0 4px 16px rgba(217, 164, 65, 0.22);
}

img.nimer-logo,
img[src*='logo.png'] {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  margin-inline: auto;
  display: block;
}

header img[src*='logo'],
button img[src*='logo'],
nav img[src*='logo'] {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
}

/* Pulse while the model is responding */
@keyframes nimer-responding {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 4px 16px rgba(217, 164, 65, 0.22);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.08);
    box-shadow: 0 6px 22px rgba(245, 158, 11, 0.38);
  }
}

body:has(.submitting) img[src*='logo'],
body:has(.submitting) img[src*='nimer-icon'],
body:has(.result-streaming) img[src*='logo'],
body:has(.result-streaming) img[src*='nimer-icon'] {
  animation: nimer-responding 1.1s ease-in-out infinite;
}

/* Model selector — make it obvious you can switch models */
header button[aria-label*='model' i],
header button[aria-label*='نموذج'],
nav + div button.rounded-xl {
  border-color: rgba(217, 164, 65, 0.35) !important;
  box-shadow: 0 2px 12px rgba(217, 164, 65, 0.12);
}
header button[aria-label*='model' i]::after,
header button[aria-label*='نموذج']::after {
  content: ' ▾';
  color: var(--nimer-gold);
  font-size: 0.85em;
  opacity: 0.9;
}

/* Footer — pricing & help links */
[role='contentinfo'] a {
  color: var(--nimer-gold) !important;
  text-decoration-color: rgba(217, 164, 65, 0.45) !important;
  font-weight: 500;
}
[role='contentinfo'] a:hover {
  color: var(--nimer-gold-light) !important;
}

/* ===== Header / nav — calm glass ===== */
nav, [role='navigation'], header { backdrop-filter: blur(10px); }

/* Active sidebar item — soft gold accent (Gemini-like) */
nav a[class*='active'], [data-active='true'], a[aria-current='page'] {
  box-shadow: inset 2px 0 0 var(--nimer-gold) !important;
  border-radius: 10px !important;
}

/* ===== Buttons — gentle motion ===== */
button[type='submit'], .btn-primary, [class*='surface-submit'] {
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
button[type='submit']:hover, .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(217, 164, 65, 0.18);
}

/* ===== Composer — rounded & soft (Gemini-like) ===== */
form textarea, textarea, input[type='text'], input[type='email'], input[type='password'] {
  border-radius: 1.15rem !important;
}
form:focus-within {
  box-shadow: 0 0 0 2px rgba(217, 164, 65, 0.18), 0 6px 24px rgba(0,0,0,0.10) !important;
  border-radius: 1.4rem !important;
}
textarea:focus, input:focus {
  box-shadow: 0 0 0 2px rgba(217, 164, 65, 0.20) !important;
}

/* ===== Scrollbar — thin & soft ===== */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
  background: rgba(217,164,65,.45);
  border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(217,164,65,.7); }
::-webkit-scrollbar-track { background: transparent; }

/* ===== Reading comfort (Claude-like) ===== */
.markdown, .prose, .message-render { line-height: 1.85; }
.markdown strong, .prose strong { color: var(--nimer-gold); }
.dark .markdown strong, .dark .prose strong { color: var(--nimer-gold-light); }
.prose a, .markdown a { color: var(--nimer-gold) !important; text-decoration-color: rgba(217,164,65,.4); }

/* Rounded code blocks & cards */
pre, .rounded-md, .rounded-lg { border-radius: 14px !important; }

/* ===== Loading screen ===== */
#loading-container {
  background: radial-gradient(circle at center, rgba(217, 164, 65, 0.10), transparent 55%), #14181f !important;
}
#loading-container::after {
  content: '';
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: url('./assets/nimer-icon.png') center / cover no-repeat;
  box-shadow: 0 6px 20px rgba(217, 164, 65, 0.28);
  animation: nimer-pulse 1.8s ease-in-out infinite;
}
@keyframes nimer-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.06); opacity: 1; }
}

/* Hide advanced model parameters for non-Business users */
html.nimer-no-advanced-params button[aria-label*="arameter" i],
html.nimer-no-advanced-params button[aria-label*="معامل" i],
html.nimer-no-advanced-params [data-testid="parameters-button"] {
  display: none !important;
}

/* In-chat monthly limit warning (paid plans) */
#nimer-usage-banner {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(560px, 92vw);
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(217, 164, 65, 0.35);
  background: rgba(26, 31, 39, 0.94);
  color: #dde3ea;
  font-size: 13px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
}
#nimer-usage-banner a {
  color: #e6b95f;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* QuantMind / slow research path */
#nimer-analyzing-banner {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 121;
  display: none;
  align-items: center;
  gap: 10px;
  max-width: min(480px, 92vw);
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(100, 160, 220, 0.4);
  background: rgba(20, 28, 38, 0.94);
  color: #c8d8ea;
  font-size: 13px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
}
#nimer-analyzing-banner.nimer-visible {
  display: flex;
}
#nimer-analyzing-banner .nimer-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(200, 216, 234, 0.25);
  border-top-color: #7eb8e8;
  border-radius: 50%;
  animation: nimer-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes nimer-spin {
  to { transform: rotate(360deg); }
}

/* Hide raw Qwen model IDs — users see Nimer / Nimer Sharia only */
.nimer-raw-model-hidden {
  display: none !important;
}

/* ===== Login / auth pages ===== */
html.nimer-auth-page,
html.nimer-auth-page body {
  background: #0f1218 !important;
}

html.nimer-auth-page .relative.flex.min-h-screen.flex-col {
  background:
    radial-gradient(900px circle at 50% -10%, rgba(217, 164, 65, 0.14), transparent 55%),
    radial-gradient(600px circle at 10% 90%, rgba(217, 164, 65, 0.06), transparent 50%),
    linear-gradient(180deg, #0f1218 0%, #14181f 45%, #161b22 100%) !important;
}

html.nimer-auth-page .mt-6.h-10 {
  height: auto !important;
  margin-top: 2.5rem !important;
  margin-bottom: 0.5rem !important;
}

html.nimer-auth-page .mt-6.h-10 img {
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 24px rgba(217, 164, 65, 0.35));
}

html.nimer-auth-page main .w-authPageWidth {
  width: min(420px, 92vw) !important;
  max-width: 420px !important;
  padding: 2rem 1.75rem 1.75rem !important;
  border-radius: 1.35rem !important;
  border: 1px solid rgba(217, 164, 65, 0.22) !important;
  background: rgba(26, 31, 39, 0.92) !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
  backdrop-filter: blur(14px);
}

html.nimer-auth-page.dark main .w-authPageWidth,
html.nimer-auth-page main .w-authPageWidth {
  background: rgba(26, 31, 39, 0.92) !important;
}

html.nimer-auth-page main h1 {
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: #eef2f7 !important;
  margin-bottom: 1.5rem !important;
}

html.nimer-auth-page input[type='email'],
html.nimer-auth-page input[type='password'],
html.nimer-auth-page input[type='text'] {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(20, 24, 31, 0.85) !important;
  color: #eef2f7 !important;
}

html.nimer-auth-page input:focus,
html.nimer-auth-page input:focus-visible {
  border-color: var(--nimer-gold) !important;
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.18) !important;
}

html.nimer-auth-page label,
html.nimer-auth-page .text-text-secondary-alt {
  color: #9aa5b1 !important;
}

html.nimer-auth-page .peer:focus ~ label,
html.nimer-auth-page .peer:focus-visible ~ label {
  color: var(--nimer-gold-light) !important;
}

html.nimer-auth-page button[data-testid='login-button'],
html.nimer-auth-page button[type='submit'] {
  background: linear-gradient(135deg, #d9a441 0%, #c4912f 100%) !important;
  border: none !important;
  color: #14181f !important;
  font-weight: 700 !important;
  min-height: 48px;
  border-radius: 1rem !important;
  box-shadow: 0 10px 28px rgba(217, 164, 65, 0.28) !important;
}

html.nimer-auth-page button[data-testid='login-button']:hover {
  background: linear-gradient(135deg, #e6b95f 0%, #d9a441 100%) !important;
  transform: translateY(-1px);
}

html.nimer-auth-page [role='contentinfo'] {
  opacity: 0.75;
}

html.nimer-auth-page .absolute.bottom-0.left-0 {
  opacity: 0.9;
}