/* =====================================================================
   Reset + primitives
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video, canvas, audio { display: block; max-width: 100%; }
img { height: auto; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

textarea { resize: none; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection {
  background: var(--brand-300);
  color: var(--brand-900);
}
[data-theme="dark"] ::selection {
  background: var(--brand-700);
  color: #fff;
}

/* ---------------------------------------------------------------------
   Scrollbars
   --------------------------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-full);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--text-faint); background-clip: content-box; }

/* ---------------------------------------------------------------------
   Utilities
   --------------------------------------------------------------------- */
[hidden] { display: none !important; }

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

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Latin fragments inside Persian text (usernames, emails, code). */
.ltr { direction: ltr; unicode-bidi: isolate; text-align: left; }
.rtl { direction: rtl; unicode-bidi: isolate; }
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------------
   Spinner
   --------------------------------------------------------------------- */
.spinner {
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .68s linear infinite;
  display: none;
  flex: none;
}
.spinner-sm { width: 14px; height: 14px; border-width: 1.8px; display: inline-block; }
.spinner-lg { width: 30px; height: 30px; border-width: 2.6px; display: inline-block; color: var(--brand-500); }

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

.is-busy .spinner { display: inline-block; }
.is-busy .btn-label { display: none; }

/* ---------------------------------------------------------------------
   Boot splash
   --------------------------------------------------------------------- */
.boot-splash {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg-app);
  z-index: var(--z-toast);
  transition: opacity var(--t-slow) var(--ease-out), visibility var(--t-slow);
}
.app:not(.is-loading) .boot-splash {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   Shared animations
   --------------------------------------------------------------------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes popIn {
  from { opacity: 0; transform: scale(.94) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

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

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(9px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); }
  70%  { box-shadow: 0 0 0 9px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

@keyframes highlightFlash {
  0%, 100% { background-color: transparent; }
  25%      { background-color: color-mix(in srgb, var(--brand-400) 24%, transparent); }
}

@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

/* =====================================================================
   Boot splash + connection banner
   ===================================================================== */

.app-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  background: var(--bg-app);
}
.app-loader[hidden] { display: none; }

/* The watchdog swaps the splash for an explanation when boot never finished. */
.app-loader.is-failed .loader-mark,
.app-loader.is-failed .loader-bar { display: none; }

.loader-error {
  max-width: 460px;
  padding: 0 24px;
  text-align: center;
  display: grid;
  gap: 12px;
  justify-items: center;
}
.loader-error p { margin: 0; font-size: var(--fs-md); }
.loader-error-hint {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.9;
}

.loader-mark {
  color: var(--brand-500);
  animation: loaderPulse 1.6s ease-in-out infinite;
}
@keyframes loaderPulse {
  0%, 100% { opacity: .45; transform: scale(.94); }
  50%      { opacity: 1;   transform: scale(1); }
}

.loader-bar {
  width: 148px;
  height: 3px;
  border-radius: 99px;
  background: var(--bg-active);
  overflow: hidden;
}
.loader-bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 99px;
  background: var(--brand-500);
  animation: loaderSlide 1.15s ease-in-out infinite;
}
@keyframes loaderSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

.offline-banner {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 900;
  padding: 7px 16px;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
  background: var(--warning);
  animation: slideDown var(--t-base) var(--ease-out);
}
.offline-banner[hidden] { display: none; }

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}