/* ===================== THEMES ===================== */
:root {
  --bg: #0b0b0c;
  --panel: #111214;
  --muted: #9aa0a6;
  --text: #f1f3f4;
  --accent: #8efc3d;
  --accent-contrast: #0a0a0a;
  --card: #141518;
  --border: #202225;
  --danger: #ff4d4d;
  --ring: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent);
}

/* Neon (default) */
body[data-theme="neon"] {
  --bg: #0b0b0c; --panel:#111214; --muted:#9aa0a6; --text:#f1f3f4;
  --accent:#8efc3d; --accent-contrast:#0a0a0a; --card:#141518; --border:#202225; --danger:#ff4d4d;
}
/* 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: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  transition: background .2s ease, color .2s ease;
}

.app-shell{display:flex;flex-direction:column;height:100%;max-width:980px;margin:0 auto;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--panel) 70%,transparent);backdrop-filter:blur(8px);}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.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:16px;background:linear-gradient(180deg,var(--panel),var(--panel));border:1px solid var(--border);border-radius:18px;padding:14px 16px;}
.greet h1{margin:0 0 6px;font-size:20px;}
.greet p{margin:0;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,.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{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 .22s ease;z-index:25;padding:16px;}
.drawer.open{transform:translateX(0);}
.drawer-header{display:flex;align-items:center;justify-content:space-between;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-backdrop{position:fixed;inset:0;background:rgba(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: .85; }

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

/* Конкретно для поля с токенами */
#apiKeyInput {
  background: #0b0d10;
  color: #fff;
  min-height: 110px;
  resize: vertical;
}

/* Если вдруг срабатывает автозаполнение и делает фон белым в 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; /* хак */
}