/* === Подключаем стандартные слои Tailwind ================= */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ===    С О Б С Т В Е Н Н Ы Е   Т Е М Ы   ================= */

/* фирменные цвета как CSS-переменные (можно использовать в JS) */
:root{
  --color-primary: #FF6A00;
  --color-secondary: #2563EB;
  --color-accent: #9333EA;
  --color-dark   : #0F172A;
  --color-light  : #F8FAFC;
}

/* --- кастомные keyframes и утилиты ------------------------ */
@layer utilities{

  @keyframes float{
    0%,100% {transform:translateY(0)}
    50%     {transform:translateY(-10px)}
  }
  .animate-float{animation:float 3s ease-in-out infinite;}

  @keyframes glow{
    0%,100% {box-shadow:0 0 20px var(--color-primary)}
    50%     {box-shadow:0 0 40px var(--color-primary)}
  }
  .animate-glow{animation:glow 2s ease-in-out infinite;}

  @keyframes fadeIn{
    0%   {opacity:0; transform:translateY(20px)}
    100% {opacity:1; transform:translateY(0)}
  }
  .animate-fadeIn{animation:fadeIn .8s ease-out forwards;}

  @keyframes scroll {
    0% { transform: translateX(0);}
    100% { transform: translateX(-50%);}
  }
  .animate-scroll { animation: scroll 60s linear infinite;}

  /* фоновый градиент hero-секций */
  .bg-hero-gradient{
    background-image:linear-gradient(90deg,#2E0A47 0%,#FF6A00 100%);
  }
}

/* --- базовые правки\шрифты, которые раньше писали в каждой странице --- */
@layer base{
  html{
    scroll-behavior:smooth;
    background:var(--color-dark);
  }
  body{
    font-family:system-ui,sans-serif;
    background:var(--color-dark);
    transition: opacity 0.5s ease;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  nav a{
    @apply transition-colors duration-300;
  }
  nav a:hover{
    color:var(--color-primary);
  }
  .fade-in { opacity: 0; }
  /* Кнопки — например .button-animate, чтобы не потерять эффекты */
  .button-animate {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .button-animate:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 20px rgba(255, 106, 0, 0.4);
  }
}

/* Пример: любые твои доп. CSS для Telegram-бота, чат-кнопки и т.д.
   Можешь вставить как отдельные классы или, если они нужны на всех страницах, тоже вынести в @layer base/utility */
/* === chat & telegram button ====================================== */
#telegram-button{
  position:fixed; bottom:90px; right:20px;
  background:#0088cc; color:#fff; border-radius:50%;
  width:60px; height:60px; display:flex; align-items:center; justify-content:center;
  font-size:28px; z-index:1000; box-shadow:0 4px 15px rgba(0,0,0,.3);
  transition:background-color .3s, transform .3s;
}
#telegram-button:hover{ background:#007ab8; transform:scale(1.1); }

#chat-button{
  position:fixed; bottom:20px; right:20px;
  background:var(--color-primary); color:#fff; border:none; border-radius:50%;
  width:60px; height:60px; font-size:24px; cursor:pointer; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 15px rgba(0,0,0,.3); transition:background-color .3s, transform .3s;
}
#chat-button:hover{ background:#e65c00; transform:scale(1.1); }

#chat-window{
  position:fixed; bottom:90px; right:20px; width:450px;
  max-width:calc(100vw - 2cm); max-height:calc(100vh - 2cm);
  background:#fff; border-radius:10px;
  box-shadow:0 4px 15px rgba(0,0,0,.3); display:none; flex-direction:column;
  overflow:hidden; z-index:1000; opacity:0; transform:translateY(20px);
  transition:opacity .3s ease, transform .3s ease;
}
#chat-window.open{ display:flex; opacity:1; transform:translateY(0); }
#chat-window header{ background:var(--color-primary); color:#fff; padding:10px; font-weight:bold; text-align:center; }

#chat-window .messages{ flex:1; padding:30px; overflow-y:auto; font-size:14px; color:#333;
  min-height:310px; max-height:310px; }
#chat-window form{ display:flex; border-top:1px solid #ddd; padding:8px; }
#chat-window form input{ flex:1; border:1px solid #ccc; border-radius:5px; padding:5px 10px; font-size:14px; }
#chat-window form button{ background:var(--color-primary); color:#fff; border:none; border-radius:5px;
  margin-left:5px; padding:5px 10px; cursor:pointer; transition:background .3s; }
#chat-window form button:hover{ background:#e65c00; }

.user-message { text-align:right; margin-bottom:8px; color:#333; }
.agent-message{ text-align:left;  margin-bottom:8px; color:var(--color-primary); }