/* Critical boot screen styles - loaded immediately */
html {
  height: fill-available;
  min-height: 100%;
  touch-action: manipulation;
}

::-webkit-scrollbar {
  display: none;
}


.MuiModal-root .MuiBox-root {
  z-index: 1;
}

/*
 * До старту застосунку змінних палітри ще немає — тут ті самі значення, що в
 * src/theme/palette.ts (surfaceMuted / text). Тему на <html> ставить скрипт у <head>.
 */
body {
  background: #f5f5f5;
  color: #212121;
  height: fill-available;
  min-height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  touch-action: manipulation;
}

html[data-theme="dark"] body {
  background: #0b0d10;
  color: #e6e8eb;
}

.cl-modalBackdrop {
  padding-top: 16px;
}


#root {
  height: fill-available;
  min-height: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/*
 * Екран завантаження (30.09.2026): тло — полотно теми, по центру плитка зі знаком
 * «Р24» кольором тексту теми, навколо — кільце з того самого ШІ-градієнта, що в
 * адмінці (AI_FROM → AI_TO), і мʼяке світіння. Кільце крутиться кутом градієнта
 * (@property), а не поворотом рамки, — інакше оберталася б сама скруглена плитка.
 */
@property --boot-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes boot-spin {
  to { --boot-angle: 360deg; }
}

@keyframes boot-breathe {
  0%, 100% { opacity: 0.35; transform: scale(0.96); }
  50% { opacity: 0.7; transform: scale(1.02); }
}

@keyframes boot-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

#boot-loading-screen {
  --boot-surface: #ffffff;
  --boot-text: #212121;
  --boot-muted: #8a8a8a;
  --boot-ring: conic-gradient(from var(--boot-angle), #5b8cff, #9b6bff, #5bd6ff, #5b8cff);
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: inherit;
  color: var(--boot-text);
}

html[data-theme="dark"] #boot-loading-screen {
  --boot-surface: #13161b;
  --boot-text: #e6e8eb;
  --boot-muted: #8a939e;
}

.boot-mark {
  position: relative;
  width: 112px;
  height: 112px;
  animation: boot-in 0.35s ease-out both;
}

/* Кільце: градієнт, вирізаний маскою в рамку 3 px. */
.boot-mark::before {
  content: '';
  position: absolute;
  inset: -7px;
  padding: 3px;
  border-radius: 35px;
  background: var(--boot-ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: boot-spin 2.4s linear infinite;
}

/* Світіння — той самий градієнт, розмитий, дихає. */
.boot-mark::after {
  content: '';
  position: absolute;
  inset: -22px;
  z-index: -1;
  border-radius: 48px;
  background: var(--boot-ring);
  filter: blur(26px);
  animation: boot-spin 2.4s linear infinite, boot-breathe 2.4s ease-in-out infinite;
}

.boot-tile {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  background: var(--boot-surface);
  color: var(--boot-text);
  display: grid;
  place-items: center;
}

.boot-tile svg {
  width: 64%;
  height: 64%;
}

.boot-caption {
  text-align: center;
  animation: boot-in 0.35s 0.1s ease-out both;
}

.boot-loading-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--boot-text);
}

.boot-loading-text {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--boot-muted);
}

@media (prefers-reduced-motion: reduce) {
  .boot-mark::before, .boot-mark::after { animation: none; }
}