/* © SNDR FX 2026 — All rights reserved · проприетарный код, копирование запрещено */
/* ───────────── Модальное окно фокуса ───────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  /* без fade-ramp: нарастание opacity пересчитывало бы полноэкранный
     блюр каждый кадр (в паре с гаснущим поиском — два слоя сразу),
     кадры дропались и фон/логотип мигали. Оверлей встаёт мгновенно
     на полном блюре; живость даёт modalUp самого окна (transform). */
  background: rgba(0, 0, 0, 0.35);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
    color-mix(in srgb, var(--overlay-bg) 55%, transparent);
  backdrop-filter: blur(9px) saturate(1.25);
  -webkit-backdrop-filter: blur(9px) saturate(1.25);
}
.modal-overlay.hidden { display: none; }
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  position: relative;
  /* пропорции ≈7:4 под развёрнутый график; окно 82vw/82vh — на ноутбуках
     боковые поля для клика-выхода заметно больше, на мониторе — просторно */
  width: min(1500px, 82vw);
  height: min(82vh, calc(min(1500px, 82vw) / 1.75));
  min-height: 460px;
  background: var(--ch-bg);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 12px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow:
    0 0 0 1px var(--accent-soft),
    var(--shadow-hover);
  animation: modalUp 0.14s var(--ease);
}
@keyframes modalUp {
  from { transform: translateY(18px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.modal > .marker-box {
  position: absolute;
  top: 7px;
  right: 12px;
  z-index: 5;
}

.modal-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-right: 52px;
  flex-shrink: 0;
}
/* в фокусе строка значений поднята выше, чем в мини-окнах: сдвигаем
   НЕ текст внутри строки (у .card-header overflow:hidden — глифы
   обрезались по верхнему краю), а всю шапку вверх отрицательным
   отступом — она заходит в padding модалки, ничего не режется;
   ТФ-переключатель центрирован от шапки и подъезжает вместе с ней */
.modal-head .card-header { flex: 1; min-width: 0; margin-top: -8px; }

/* ─── логотип биржи-источника слева от символа (js/focusmodal) ─── */
/* Одна иконка — биржа, по котировкам которой открыт график. Никаких
   раскрытий/списков: пользователь назвал их мусором. */
.fmv {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  transform: translateY(-1px);
}
.fmv-btn {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 0;
  background: none;
  border: 0;
  cursor: default;
}
.fmv-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 4px;
  display: block;
  opacity: 0.9;
  /* та же подложка, что в диалоге «Биржи»: светлые/прозрачные логотипы
     читаются в светлых темах */
  background: #14161a;
  border: 1px solid var(--border);
  box-sizing: content-box;
}
/* нет PNG биржи — цветная аббревиатура (тот же язык, что в диалоге «Биржи») */
.fmv-pill {
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 3px 2px;
}

.modal-chart {
  flex: 1;
  min-height: 0;
  position: relative;
  background: transparent;
  overflow: hidden;
}
.modal-chart canvas {
  position: absolute;
  inset: 0;
  display: block;
  cursor: crosshair;
}

/* ─── Быстрый поиск монеты (любая буква) ─── */
/* Прозрачное матовое стекло: затемнение + блюр подложки,
   само окно — полупрозрачное с сильным блюром и верхней кромкой-бликом */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.35);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
    color-mix(in srgb, var(--overlay-bg) 55%, transparent);
  backdrop-filter: blur(9px) saturate(1.25);
  -webkit-backdrop-filter: blur(9px) saturate(1.25);
  animation: fadeIn 0.08s ease;
}
.search-overlay.hidden { display: none; }
.search-box {
  width: min(420px, 90vw);
  background: var(--popup-bg);
  background: color-mix(in srgb, var(--popup-bg) 58%, transparent);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--border-light);
  border-color: color-mix(in srgb, var(--border-light) 65%, transparent);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    var(--shadow-hover);
  overflow: hidden;
  animation: modalUp 0.12s var(--ease);
}
.search-input {
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.2px;
  outline: none;
}
.search-input::placeholder { color: var(--text-muted); font-weight: 400; }
.search-list {
  height: 320px;   /* фикс: число найденного не меняет размер окна — центр стоит мёртво */
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.search-item.active { background: var(--menu-hover); }
.search-sym {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}
.search-sym b { color: var(--accent); }
.search-price {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-secondary);
}
.search-chg { font-size: 12px; font-weight: 600; min-width: 62px; text-align: right; }
.search-chg.positive { color: var(--positive); }
.search-chg.negative { color: var(--negative); }
.search-empty {
  margin: auto;
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

/* ─── Контекстное меню графика (ПКМ) ─── */
.ctx-menu {
  position: fixed;
  z-index: 500;
  min-width: 180px;
  padding: 5px;
  background: var(--menu-bg);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--border-light);
  border-radius: 11px;
  box-shadow: var(--shadow-hover);
  animation: fadeIn 0.07s ease;
}
.ctx-menu.hidden { display: none; }
.ctx-item {
  padding: 7px 12px;
  font-size: 12px;
  color: var(--text-primary);
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.07s ease;
}
.ctx-item:hover { background: var(--menu-hover); }

/* ── низкие экраны (≤900px по высоте): модалке меньше минимума ── */
@media (max-height: 900px) {
  .modal { min-height: 400px; padding: 10px 14px 12px; gap: 8px; }
}

/* крестик фокуса: дефолт скрыт, показывает телефонная тема
   (css/mobile.css). На десктопе закрывают фон/Esc. */
.modal-x { display: none; }