:root{
  --bg:#0f0f10; --text:#fff; --muted:#9aa0a6;
  --card:#1a1b1e; --border:#ffffff22;
  --accent:#2ea6ff; --accent-2:#2294e6;
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text);
}

.container{ max-width:560px; margin:0 auto; padding:12px 12px calc(12px + env(safe-area-inset-bottom)); }
.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px;
  box-shadow:0 10px 24px #00000033;
}

h1,h2,h3{ margin:0 0 8px }
.muted{ color:var(--muted) }

.grid{ display:grid; gap:12px }
.grid-2{ grid-template-columns:1fr 1fr }

.input, select{
  width:100%; padding:12px 12px; border-radius:12px; border:1px solid var(--border);
  background:#121317; color:var(--text); outline:none;
}
label{ font-size:12px; color:var(--muted) }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 14px; border-radius:12px; background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:#fff; font-weight:600; border:none; cursor:pointer;
  box-shadow:0 8px 20px rgba(46,166,255,.25);
}
.btn:disabled{ opacity:.6; cursor:not-allowed }

.row{ display:flex; gap:10px; align-items:center; }
.sep{ height:1px; background:var(--border); margin:12px 0; }

.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  background:#111a; color:#fff; border:1px solid #ffffff22;
  padding:10px 14px; border-radius:12px; font-size:14px; backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .2s; z-index:9999;
}
.toast.show{ opacity:1; }

/* добавь в конец styles.css */
button.card.action{ text-align:left; cursor:pointer }
button.card.action:hover{ transform:translateY(-1px); border-color:#ffffff33 }
button.card.action h3{ font-size:16px; margin:0 }
button.card.action p{ margin:0 }

/* ==== Ideas UI ==== */
.ideas-toolbar{ display:flex; gap:10px; align-items:center; margin-bottom:10px }
.btn.sm{ padding:8px 10px; border-radius:10px; font-weight:600; font-size:13px; box-shadow:none }
.input.sm{ padding:8px 10px; border-radius:10px; font-size:14px }

.idea-card{
  background:linear-gradient(180deg, #212329, #1a1b1e);
  border:1px solid var(--border);
  border-radius:16px; padding:14px 14px 12px;
  box-shadow:0 10px 24px #00000026;
}
.idea-title{ font-weight:700; font-size:16px; margin:0 0 6px }
.idea-desc{ margin:0; color:var(--muted); font-size:13px; line-height:1.45 }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px }
.chip{ padding:6px 10px; border-radius:999px; border:1px solid var(--border); color:var(--muted); background:#ffffff10; font-size:12px }
.idea-actions{ display:flex; gap:8px; margin-top:10px }
.badge{ padding:3px 8px; font-size:11px; border-radius:999px; border:1px solid var(--border); color:var(--muted) }

.btn.icon {
  background: transparent;
  border: none;
  padding: 4px;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

.btn.icon:hover {
  opacity: 0.7;
}

.btn.icon.danger {
  color: #e74c3c;
}

.card .instruction-block {
  margin-bottom: 16px; /* отступ между блоками инструкций */
}

.account-row {
  display: flex;
  align-items: center;
  gap: 8px; /* расстояние между act_*** и кнопками */
  margin-bottom: 10px; /* отступ между списком и input */
}

.account-input {
  margin-top: 12px; /* расстояние между списком act_*** и полем ввода */
}

.profile-block {
  position: relative;
}

.logo-wrapper {
  float: right;
  position: relative;
  margin: 0 0 8px 12px;
}

.logo-img, .logo-placeholder {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  object-fit: cover;
  cursor: pointer;
}

.logo-placeholder {
  background: #333;
  color: #aaa;
  font-size: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity .2s;
}

.logo-wrapper:hover .logo-actions {
  opacity: 1;
}

.logo-actions span {
  cursor: pointer;
  font-size: 20px;
}

.utp {
  clear: both;
}


/* === ИИ-Ассистент (фикс мобильной версии + читаемость текста) === */

/* плавающая кнопка */
.assistant-btn {
  position: fixed;
  bottom: 80px; /* поднял выше, чтобы не прижималась к краю экрана */
  right: 20px;
  background: #4a90e2;
  border: none;
  border-radius: 50%;
  width: 64px;   /* чуть больше на мобилке */
  height: 64px;
  font-size: 28px; /* иконка крупнее */
  line-height: 1;
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* модалка */
.assistant-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}

.assistant-modal.hidden {
  display: none;
}

.assistant-window {
  background: white;
  width: 95%;
  max-width: 500px;
  height: 75%;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: system-ui, -apple-system, sans-serif;
}

/* заголовок */
.assistant-header {
  background: #4a90e2;
  color: white;
  padding: 12px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.assistant-header button {
  background: transparent;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

/* чат */
.assistant-chat {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  background: #f9f9f9;
  font-size: 15px;  /* крупнее */
  line-height: 1.4;
  color: #222;      /* тёмный текст для читаемости */
}

.assistant-msg {
  margin: 8px 0;
  padding: 10px 14px;
  border-radius: 10px;
  max-width: 80%;
  word-wrap: break-word;
}

.assistant-msg.user {
  background: #d1eaff;
  color: #000; /* чёрный текст */
  align-self: flex-end;
  margin-left: auto;
}

.assistant-msg.bot {
  background: #eee;
  color: #000; /* чёрный текст */
  align-self: flex-start;
  margin-right: auto;
}

/* поле ввода */
.assistant-input {
  display: flex;
  border-top: 1px solid #ddd;
}

.assistant-input input {
  flex: 1;
  border: none;
  padding: 12px;
  font-size: 15px;
  color: #000;
}

.assistant-input input::placeholder {
  color: #888;
}

.assistant-input button {
  background: #4a90e2;
  color: white;
  border: none;
  padding: 12px 18px;
  font-size: 15px;
  cursor: pointer;
}


.assistant-msg ul {
  margin: 6px 0 6px 20px;
  padding: 0;
  list-style-type: disc;
}

.assistant-msg ol {
  margin: 6px 0 6px 20px;
  padding: 0;
  list-style-type: decimal;
}

.assistant-msg li {
  margin: 4px 0;
  line-height: 1.4;
}

.assistant-msg p {
  margin: 6px 0;
}

.assistant-msg ul,
.assistant-msg ol {
  margin: 6px 0 6px 20px;
  padding: 0;
}

.assistant-msg li {
  margin: 4px 0;
  line-height: 1.4;
}

.assistant-msg p {
  margin: 6px 0;
}

/* Тумблер (switch) */
.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.switch input:checked + .slider {
  background-color: #4caf50;
}

.switch input:checked + .slider:before {
  transform: translateX(22px);
}

.badge-counter {
  display: inline-block;
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px; /* круглая форма */
  background: #555;     /* серый фон */
  color: #fff;          /* белый текст */
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  margin-left: 6px;
}

/* === Assistant FAB: безопасное позиционирование + авто-скрытие === */

/* универсальный класс для плавающей кнопки ассистента */
.assistant-btn{
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483647; /* поверх всего */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  transition: opacity .18s ease, transform .18s ease, bottom .18s ease;
}

/* компактнее на очень узких экранах */
@media (max-width: 400px){
  .assistant-btn{ width: 52px; height: 52px; right: 12px; }
}

/* «умное» скрытие: класс вешаем из JS при скролле */
.assistant-btn.is-scrolling,
.assistant-btn.hidden{
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

/* при открытой клавиатуре/наборе текста: прячем (CSS-only с :has) */
body:has(input:focus) .assistant-btn,
body:has(textarea:focus) .assistant-btn,
body:has([contenteditable="true"]:focus) .assistant-btn{
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

/* вариант, когда нужно «прижать» кнопку левее (если справа что-то мешает) */
.assistant-btn.left{ right: auto; left: 16px; }

/* если у тебя появляется нижняя панель/футер, можно поднять FAB выше, 
   просто добавляя класс .with-bottom-bar на body */
body.with-bottom-bar .assistant-btn{
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

/* уважение системной настройки «уменьшить анимацию» */
@media (prefers-reduced-motion: reduce){
  .assistant-btn{ transition: none; }
}