/* ─────────────────────────────────────────────────────────────
   Закладки «мастер-деталь»: слева эмодзи-группы, справа ссылки
   активной группы, плюс встроенный редактор (добавление групп
   и закладок). Разметку строит /assets/bookmarks.js, данные —
   localStorage (сид: /assets/bookmarks.json).

   Виджет объявлен в config/bookmarks.yml как custom-api без url —
   так он получает родную обёртку .widget: заголовок, подложку
   и штатный отступ --widget-gap.
   ───────────────────────────────────────────────────────────── */

.bmx { display: flex; gap: 12px; align-items: flex-start; }

/* ВЕРХ: горизонтальный ряд иконок-групп, монохромные глифы (SVG, currentColor) */
.bmx-tabs { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.bmx-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 30px;
  height: 30px;
  line-height: 1;
  padding: 0;
  border: none;
  background: none;
  border-radius: 8px;
  color: inherit;
  opacity: .5;
  transition: opacity .15s ease, background .15s ease;
}
.bmx-tab svg { display: block; width: 17px; height: 17px; }
.bmx-tab:hover { opacity: .85; background: var(--color-widget-background-highlight); }
.bmx-tab.is-active { opacity: 1; background: var(--color-separator); color: var(--color-primary); }
/* «＋» и «✎» — служебные, помельче и потусклее обычных групп */
.bmx-tab-add,
.bmx-tab-edit { font-size: 14px; opacity: .3; }
.bmx-tab-edit { margin-top: 6px; }


/* ПРАВО: панель активной группы */
.bmx-panels { flex: 1; min-width: 0; }
.bmx-panel { display: none; }
.bmx-panel.is-active { display: block; }

.bmx-panel a,
.bmx-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 5px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}
.bmx-panel a:hover { background: var(--color-widget-background-highlight); }
.bmx-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  background-color: var(--color-widget-background-highlight);
  border-radius: var(--border-radius);
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  user-select: none;
  flex-shrink: 0;
}
.bmx-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.bmx-arr { margin-left: 2px; opacity: 1; color: var(--color-primary); flex-shrink: 0; }

/* ── режим редактирования ── */

.bmx-edit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 5px;
}
.bmx-add { border-top: 1px dashed var(--color-separator); margin-top: 6px; padding-top: 8px; }

/* палитра глифов для выбора иконки группы */
.bmx-glyphs { display: flex; flex-wrap: wrap; gap: 2px; flex: 1 1 100%; }
.bmx-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--color-widget-background-highlight);
  border-radius: 6px;
  color: inherit;
  opacity: .5;
}
.bmx-glyph svg { width: 15px; height: 15px; display: block; }
.bmx-glyph:hover { opacity: .85; }
.bmx-glyph.is-active { opacity: 1; color: var(--color-primary); border-color: var(--color-primary); }

.bmx-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: var(--font-size-h5, 1.3rem);
  color: inherit;
  background: var(--color-widget-background-highlight);
  border: 1px solid var(--color-separator);
  border-radius: 5px;
  padding: 3px 6px;
}
.bmx-input:focus { outline: none; border-color: var(--color-text-subdue); }

.bmx-invalid { border-color: var(--color-negative, #f56565) !important; }

/* мелкие кнопки в строках: ↑ ↓ ✕ ＋ */
.bmx-mini {
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  opacity: .35;
  font-size: 13px;
  line-height: 1;
  padding: 3px 4px;
  border-radius: 4px;
}
.bmx-mini:hover { opacity: 1; background: var(--color-widget-background-highlight); }
.bmx-danger:hover { color: var(--color-negative, #f56565); }

/* строка инструментов: экспорт / импорт / сброс */
.bmx-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-separator);
}
.bmx-btn {
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-h6, 1.2rem);
  color: inherit;
  opacity: .55;
  background: var(--color-widget-background-highlight);
  border: 1px solid var(--color-separator);
  border-radius: 5px;
  padding: 3px 8px;
}
.bmx-btn:hover { opacity: 1; background: var(--color-separator); }
.bmx-del-group {
  flex: 1 1 100%;
  margin-top: 2px;
  text-align: center;
  color: var(--color-negative, #f56565);
  opacity: .8;
}
.bmx-del-group:hover { opacity: 1; background: var(--color-widget-background-highlight); }
.bmx-ta {
  width: 100%;
  min-height: 120px;
  font-family: monospace;
  font-size: 1.1rem;
  color: inherit;
  background: var(--color-widget-background-highlight);
  border: 1px solid var(--color-separator);
  border-radius: 5px;
  padding: 6px;
  resize: vertical;
}