/* Общие элементы панели и Mini App (/static/ui.js): иконки, свои выпадающие
   списки, подсказки. Цвета — токены страницы (--surface, --text, --accent-soft…). */

/* линейная иконка из спрайта: <svg class="i"><use href="#i-…"/> (спрайт встроен в страницу)</svg> */
.i {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -3px;
}
.i.sm { width: 14px; height: 14px; vertical-align: -2px; }
.i.lg { width: 22px; height: 22px; }

/* --- Свои выпадающие списки (вместо системных <select>) ---------------------- */

.cs-native {
  position: absolute !important; width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important; overflow: hidden;
}
.cs-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 40px; padding: 0 12px 0 16px; min-width: 0; max-width: 100%;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--hair-strong); border-radius: 999px;
  font-size: 13.5px; font-weight: 500; white-space: nowrap; text-align: left;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.cs-btn:hover { background: var(--surface-2); }
.cs-btn.open { border-color: var(--text); box-shadow: 0 0 0 3.5px var(--accent-soft); }
.cs-btn.set { background: var(--accent-soft); border-color: transparent; font-weight: 600; }
.cs-btn .cs-label { overflow: hidden; text-overflow: ellipsis; }
.cs-btn .cs-chev { width: 16px; height: 16px; color: var(--muted); transition: transform 0.2s; }
.cs-btn.open .cs-chev { transform: rotate(180deg); }
.cs-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.cs-menu {
  position: fixed; z-index: 90; min-width: 200px; max-width: min(380px, 92vw);
  background: var(--surface); border: 1px solid var(--hair); border-radius: 16px;
  box-shadow: var(--shadow-pop); padding: 6px;
  animation: pop 0.14s ease-out both;
}
.cs-search { display: flex; align-items: center; gap: 8px; padding: 2px 10px 6px; margin-bottom: 4px; color: var(--muted); border-bottom: 1px solid var(--hair); }
.cs-search input { flex: 1; min-width: 0; border: 0; background: none; padding: 8px 0; box-shadow: none !important; font-size: 13.5px; }
.cs-list { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.cs-opt {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 10px;
  font-size: 13.5px; color: var(--text); cursor: pointer; user-select: none;
}
.cs-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-opt .cs-ck { visibility: hidden; flex: none; }
.cs-opt.sel { font-weight: 600; }
.cs-opt.sel .cs-ck { visibility: visible; }
.cs-opt.act { background: var(--surface-2); }
.cs-opt.dis { opacity: 0.45; pointer-events: none; }
.cs-empty { padding: 12px; color: var(--muted); font-size: 13px; text-align: center; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }

/* --- Подсказки (вместо системных title) --------------------------------------- */

.ui-tip {
  position: fixed; z-index: 95; pointer-events: none;
  max-width: 300px; padding: 8px 12px; border-radius: 10px;
  background: var(--ink); color: var(--on-ink);
  font-size: 12.5px; line-height: 1.4; font-weight: 500; letter-spacing: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  white-space: pre-line; overflow-wrap: anywhere;
  animation: hint-in 0.12s ease-out both;
}
.ui-tip::after {
  content: ""; position: absolute; left: var(--ax, 50%);
  width: 10px; height: 10px; background: inherit; border-radius: 2px;
  transform: translateX(-50%) rotate(45deg);
}
.ui-tip b { display: block; font-weight: 600; }
.ui-tip-sub { display: block; margin-top: 2px; opacity: 0.72; font-weight: 400; }
.ui-tip.top::after { bottom: -4px; }
.ui-tip.bottom::after { top: -4px; }
@keyframes hint-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }