/* Подписи на кнопках шапки, значок непрочитанного, настройки «под себя» (размер, цвет, фон, шрифт).
   Подключается последним — поверх основных стилей. */

/* ---------------- шапка: иконка + подпись ---------------- */
.header-actions > [data-hkey] { position: relative; }
.header-actions .hi { display: inline-flex; align-items: center; gap: 4px; }
.header-actions .hl { display: none; }

html:not(.no-hlabels) .header-actions > [data-hkey] {
  flex-direction: column; justify-content: center; gap: 2px;
  min-width: 56px; padding: 6px 8px 5px; border-radius: 14px; line-height: 1;
}
html:not(.no-hlabels) .header-actions .hi { font-size: 15px; }
html:not(.no-hlabels) .header-actions .hl {
  display: block; font-size: 10px; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap; letter-spacing: 0; text-transform: none;
}
/* Формы кнопок из buttons.css (капсулы и т.п.) — для кнопок с подписью делаем их чуть квадратнее */
html:not(.no-hlabels):not(#_) .header-actions > [data-hkey] { border-radius: 14px; }
html[data-btn="sharp"]:not(.no-hlabels):not(#_) .header-actions > [data-hkey] { border-radius: 4px; }

/* На узких экранах кнопки — одной прокручиваемой строкой под заголовком */
@media (max-width: 720px) {
  html:not(.no-hlabels) .header-row { flex-wrap: wrap; gap: 8px; }
  html:not(.no-hlabels) .header-actions {
    width: 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
    scrollbar-width: none; padding: 7px 6px 2px 0; margin-top: -7px; -webkit-overflow-scrolling: touch;
  }
  html:not(.no-hlabels) .header-actions::-webkit-scrollbar { display: none; }
  /* мягкое затухание справа — видно, что кнопки можно листать */
  html:not(.no-hlabels) .header-actions { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
  html:not(.no-hlabels) .header-actions > [data-hkey] { flex: 0 0 auto; }
}

/* значок «есть непрочитанное» */
.hbadge {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--coral); color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  box-shadow: 0 0 0 2px var(--paper);
}
.hbadge[hidden] { display: none; }
.hbadge.pulse { animation: hbadge-pulse 1.2s ease-in-out 3; }
@keyframes hbadge-pulse { 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .hbadge.pulse { animation: none; } }

/* всплывающее «Ответ поддержки» */
.notice-toast {
  position: fixed; left: 50%; top: -120px; transform: translateX(-50%); z-index: 1000;
  width: min(420px, calc(100vw - 24px)); display: flex; gap: 12px; align-items: flex-start;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 16px;
  padding: 12px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); cursor: pointer;
  transition: top .3s ease;
}
.notice-toast.shown { top: calc(12px + env(safe-area-inset-top)); }
.notice-toast .nt-icon { font-size: 26px; line-height: 1; }
.notice-toast .nt-title { font-size: 12px; font-weight: 800; color: var(--coral); margin-bottom: 2px; }
.notice-toast .nt-text { font-size: 14px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notice-toast .nt-close { margin-left: auto; background: none; border: 0; color: var(--ink-soft); font-size: 18px; cursor: pointer; padding: 0 2px; }

/* сообщения в чате поддержки: кто написал и когда */
.sup-msg { display: flex; flex-direction: column; max-width: 78%; }
.sup-msg.mine { align-self: flex-end; align-items: flex-end; }
.sup-msg.theirs { align-self: flex-start; align-items: flex-start; }
.sup-msg .chat-bubble { max-width: 100%; align-self: auto; white-space: pre-wrap; word-break: break-word; }
.sup-meta { font-size: 11px; color: var(--ink-soft); margin: 0 4px 3px; }
.sup-meta b { color: var(--coral); font-weight: 700; }
.sup-new-divider { align-self: center; font-size: 11px; font-weight: 700; color: var(--coral); margin: 4px 0; }

/* ---------------- свой цвет ---------------- */
html[data-accent]:not(#_) :is(.next-btn, .plan-buy-btn, .chat-send-btn) { color: var(--on-accent, #fff); }
html[data-accent]:not(#_) :is(.choice-btn.selected, .tab-btn.active, .lessons-tab.active, .chat-bubble.mine, .chat-send-btn) {
  background: var(--coral); border-color: var(--coral); color: var(--on-accent, #fff);
}
html[data-accent] a { color: var(--coral); }
html[data-accent] :is(input[type=checkbox], input[type=radio], input[type=range]) { accent-color: var(--coral); }

/* ---------------- шрифт ---------------- */
html[data-font]:not(#_) body { font-family: var(--look-font); }
html[data-font] :is(button, input, textarea, select) { font-family: inherit; }

/* ---------------- фон ---------------- */
html[data-bg] body { background-attachment: fixed; }
html[data-bg="dots"] body {
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1.2px, transparent 1.4px);
  background-size: 18px 18px;
}
html[data-bg="grid"] body {
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
}
html[data-bg="waves"] body {
  background-image:
    radial-gradient(circle at 0 100%, transparent 14px, color-mix(in srgb, var(--coral) 9%, transparent) 15px, color-mix(in srgb, var(--coral) 9%, transparent) 17px, transparent 18px),
    radial-gradient(circle at 100% 0, transparent 14px, color-mix(in srgb, var(--indigo) 9%, transparent) 15px, color-mix(in srgb, var(--indigo) 9%, transparent) 17px, transparent 18px);
  background-size: 32px 32px;
}
html[data-bg="gradient"] body {
  background-image: linear-gradient(160deg,
    color-mix(in srgb, var(--coral) 16%, var(--paper)) 0%,
    var(--paper) 45%,
    color-mix(in srgb, var(--indigo) 18%, var(--paper)) 100%);
}

/* ---------------- экран настроек «под себя» ---------------- */
.look-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; }
.look-row input[type=range] { flex: 1; accent-color: var(--coral); }
.look-value { min-width: 48px; text-align: right; font-weight: 700; font-size: 13px; }
.look-label { font-size: 13px; font-weight: 700; margin-top: 4px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; align-items: center; }
.swatch {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--card); cursor: pointer;
  box-shadow: 0 0 0 1px var(--line); padding: 0; position: relative;
}
.swatch.active { box-shadow: 0 0 0 2px var(--ink); }
.swatch.active::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 14px; text-shadow: 0 0 3px rgba(0,0,0,.5); }
.swatch.default { background: conic-gradient(#E4572E 0 25%, #33415C 0 50%, #8AA399 0 75%, #F6F1E7 0); }
.swatch-custom { position: relative; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--line); background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); }
.swatch-custom input { position: absolute; inset: -6px; width: 44px; height: 44px; opacity: 0; cursor: pointer; }
.look-preview {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 14px;
  background: var(--paper); display: flex; flex-direction: column; gap: 8px;
}
.look-preview .chat-bubble { font-size: 14px; }
.look-preview .next-btn { margin-top: 2px; }

/* Выпадающие списки: в тёмных оформлениях варианты были белым по белому */
html[data-skin-mode="dark"], html[data-theme="dark"] { color-scheme: dark; }
html[data-skin-mode="light"], html[data-theme="light"] { color-scheme: light; }
select option, select optgroup { background-color: var(--card); color: var(--ink); }
select option:checked { background-color: color-mix(in srgb, var(--coral) 35%, var(--card)); }