@font-face {
  font-family: 'ALS Gorizont';
  src: url('./font/ALSGorizontGX.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ===================== THEMES ===================== */
:root {
  /*
   * Base colour definitions for the default look and feel.
   * These values have been refreshed to provide a brighter, more vibrant
   * appearance inspired by Spotify. A purple‑to‑midnight gradient forms the
   * background, panels use a rich indigo, and the primary accent is the
   * familiar Spotify green. Muted text is a softer lilac for better
   * contrast against the dark surfaces. The ring colour uses the updated
   * accent colour as a basis for focus outlines.
   */
  --bg: linear-gradient(135deg, #36a758 0%, #0d0821 100%);
  --panel: #1b1538;
  --muted: #b5b3c6;
  --text: #ffffff;
  --accent: #0548da;
  --accent-contrast: #0a0a0a;
  --card: #241a45;
  --border: #31265f;
  --danger: #ff4d4d;
  --ring: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent);
}

/* Neon (default) */
body[data-theme="neon"] {
  /*
   * IBM Black theme:
   * Глубокий почти-чёрный фон, холодные серые поверхности,
   * фирменный IBM Blue как основной акцент. Стиль строгий,
   * технологичный, с высокими контрастами.
   */
  --bg: linear-gradient(135deg, #0b0c0c 0%, #0e0f10 100%);
  --panel: #131516;
  --muted: #9aa0a6;
  --text: #ffffff;
  --accent: #0548da;             /* IBM Blue */
  --accent-contrast: #ffffff;
  --card: #1a1c1e;
  --border: #1f2224;
  --danger: #e53935;
}


/* Monkey Dark */
body[data-theme="monkeyDark"] {
  --bg: #323437;
  --panel: #2a2c2f;
  --muted: #7f8286;
  --text: #d1d0c5;
  --accent: #e2b714;
  --accent-contrast: #0b0c0f;
  --card: #2b2d30;
  --border: #3a3c40;
  --danger: #ca4754;
}

/* Monkey Light */
body[data-theme="monkeyLight"] {
  --bg: #fbfaf5;
  --panel: #f4f3ef;
  --muted: #7a7a7a;
  --text: #111;
  --accent: #e2b714;
  --accent-contrast: #111;
  --card: #fff;
  --border: #e6e6e6;
  --danger: #b91c1c;
}

/* Dracula */
body[data-theme="dracula"] {
  --bg: #282a36;
  --panel: #1e2029;
  --muted: #8be9fd;
  --text: #f8f8f2;
  --accent: #bd93f9;
  --accent-contrast: #0b0c0f;
  --card: #1e2029;
  --border: #313244;
  --danger: #ff5555;
}

/* Nord */
body[data-theme="nord"] {
  --bg: #2e3440;
  --panel: #3b4252;
  --muted: #81a1c1;
  --text: #d8dee9;
  --accent: #88c0d0;
  --accent-contrast: #0b0c0f;
  --card: #3b4252;
  --border: #434c5e;
  --danger: #bf616a;
}

/* ===================== BASE ===================== */
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: radial-gradient(
      1100px 420px at 50% 110%,
      color-mix(in oklab, var(--accent) 14%, transparent),
      transparent 60%
    ),
    var(--bg);
  color: var(--text);
  font-family: 'ALS Gorizont', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  transition: background 0.2s ease, color 0.2s ease;
}

.app-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.topbar {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw; /* растягивает шапку на всю ширину экрана */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px; /* чуть больше отступы по бокам */
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--panel) 70%, transparent);
  backdrop-filter: blur(8px);
  box-sizing: border-box;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
}

.pulse {
  width: 16px;
  height: 16px;
  border-radius: 6px;
  background: var(--accent);
  box-shadow: 0 0 18px var(--accent);
}

.right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-pill {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
}

.icon-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}

.content {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  /*
   * Use a subtle accent‑tinted gradient for the hero section. The top of
   * the card blends the accent colour into the panel, creating a soft
   * transition reminiscent of Spotify’s header. On small screens this
   * gradient helps differentiate the hero from the surrounding cards.
   */
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 30%, var(--panel)), var(--panel));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 20px;
}

.hero-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.hero-actions {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  min-width: 160px;
}

.hero-stats .stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background-color: color-mix(in oklab, var(--panel) 85%, transparent);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px 12px;
  min-width: 120px;
}

.hero-stats .stat-label {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 2px;
}

.hero-stats .stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}

.greet h1 {
  margin: 0 0 5px;
  font-size: 20px;
}

.greet p {
  margin: 10;
  color: var(--muted);
}

.cta {
  background: linear-gradient(180deg, var(--accent), var(--accent));
  color: var(--accent-contrast);
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 28px color-mix(in oklab, var(--accent) 40%, transparent);
}

/* ===================== CARDS ===================== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  position: relative;
}

/* заголовок карточки: ник слева, KPI справа */
.bot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.bot-name {
  font-weight: 700;
  font-size: 15px;
}

.kpis {
  display: flex;
  gap: 6px;
  align-items: center;
}

.kpi {
  background: #0e0f12a6;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
  color: var(--muted);
  font-size: 12px;
}

/* две кнопки в одну строку 50/50 */
.actions-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 12px !important;
  width: 100% !important;
}

.actions-grid .btn {
  width: 100%;
}

/* ===================== BUTTONS ===================== */
.btn {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 600;
  cursor: pointer;
}

.btn.line {
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}

.btn.primary {
  background: linear-gradient(180deg, var(--accent), var(--accent));
  color: var(--accent-contrast);
}

.btn.secondary {
  background: #0f1113;
}

.btn.ghost {
  background: #0f111355;
  color: var(--text);
}

.btn.danger {
  background: #1f1010;
  border-color: #3b1f1f;
  color: var(--danger);
}

.muted {
  color: var(--muted);
}

/* ===================== MODAL / DRAWER / SETTINGS ===================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.modal-backdrop.show {
  display: flex;
}

.modal {
  width: 92%;
  max-width: 480px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  color: var(--text);
}

.modal h3 {
  margin: 0 0 8px;
}

.modal .muted {
  margin: 0 0 12px;
}

.modal input {
  width: 100%;
  background: #0f1013;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 10px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

/* Drawer */
.drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 420px;
  max-width: 96%;
  background: var(--panel);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform 0.22s ease;
  z-index: 25;
  padding: 16px;
}

.drawer.open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: none;
  margin-bottom: 10px;
}

.drawer-section {
  background: #0f1013;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  margin-top: 12px;
}

.drawer .lbl {
  display: block;
  font-size: 12px;
  color: #c9ced3;
  margin-bottom: 6px;
}

.drawer textarea,
.drawer input {
  width: 100%;
  background: #0b0c0f;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 10px;
}

.row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.icon {
  background: #0f1113;
  border: 1px solid var(--border);
  color: #cdd1d4;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}

/* Sheet */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  z-index: 30;
}

.sheet-backdrop.show {
  display: block;
}

.sheet {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%) translateY(8px);
  width: 96%;
  max-width: 560px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 14px 10px;
  box-shadow: var(--ring);
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.sheet-block {
  background: #0f1013;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
}

.lbl {
  display: block;
  font-size: 12px;
  color: #c9ced3;
  margin-bottom: 8px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  background: #0f111355;
  color: var(--text);
  font-size: 13px;
}

.chip.active {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: color-mix(in oklab, var(--accent) 65%, var(--border));
}

/* Скажи браузеру, что у нас тёмная тема — чтоб и системные控 элементы были тёмными */
:root {
  color-scheme: dark;
}

/* Общие стили для форм в тёмной теме */
input,
textarea,
select {
  -webkit-appearance: none;
  appearance: none;
  background: #0b0d10;
  color: #fff;
  border: 1px solid #2a2f3a;
  border-radius: 10px;
  padding: 10px 12px;
  caret-color: #fff;
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: #9aa0a6;
  opacity: 0.85;
}

input:focus,
textarea:focus {
  border-color: #5eff7e;
  box-shadow: 0 0 0 2px rgba(94, 255, 126, 0.2);
}

/* Конкретно для поля с токенами */
#apiKeyInput {
  background: #0b0d10;
  color: #fff;
  width: 100%;
  min-height: 250px; /* увеличим высоту */
  resize: none;      /* можно тянуть и по ширине */
}

#schedAllInput {

  background: #0b0d10;
  color: #fff;
  width: 100%;
  min-height: 250px; /* увеличим высоту */
  resize: none;      /* можно тянуть и по ширине */

}

/* Если вдруг срабатывает автозаполнение и делает фон белым в Chromium */
input:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0px 1000px #0b0d10 inset;
  transition: background-color 9999s ease-in-out 0s; /* хак */
}

/* ===================== LOG PANEL ===================== */
/* The log section appears in the bot management drawer and displays
 * recent broadcast results. It uses a vertical layout with a scrollable
 * list and a summary row. */
.log-section {
  background: #0f1013;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  height: 220px;
}

.log-list {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  margin-bottom: 8px;
}

.log-item {
  font-size: 13px;
  margin: 2px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.log-item.ok {
  color: var(--accent);
}

.log-item.error {
  color: var(--danger);
}

.log-summary {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
}

.log-summary span span {
  color: var(--text);
}

/*
 * =============== RESPONSIVE DESIGN ===============
 * On narrow viewports we stack the header and hero elements vertically,
 * increase tap targets and ensure that cards flow in a single column. These
 * styles are triggered below 600px width, making the interface comfortable
 * on mobile devices. If you’re testing in the browser dev tools be sure to
 * shrink the window below this threshold to observe the changes.
 */
@media (max-width: 600px) {
  /* Top bar becomes a vertical stack with elements centred */
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 20px;
    gap: 8px;
  }
  .right {
    margin-top: 4px;
    width: 100%;
    justify-content: space-between;
  }
  .user-pill {
    margin-left: auto;
  }
  /* Hero stacks its content and centres alignment */
  .hero {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 20px;
  }
  .hero-left {
    align-items: center;
  }
  .hero-actions {
    justify-content: center;
  }
  /* Stats align horizontally and expand equally */
  .hero-stats {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    min-width: auto;
  }
  .hero-stats .stat {
    align-items: center;
    min-width: 0;
    flex: 1;
    margin: 0 4px;
  }
  .hero-stats .stat-value {
    font-size: 18px;
  }
  /* Cards flow in a single column */
  .cards {
    grid-template-columns: 1fr;
  }
  /* Drawer takes the full width on mobile */
  .drawer {
    width: 100%;
    max-width: 100%;
  }
  /* Increase modal and sheet tap target padding */
  .modal,
  .sheet {
    padding: 20px;
  }
}