/* Виджет «Поддержка» — свои цвета с запасными значениями: работает и на страницах документов. */
.sup {
  --sup-accent: var(--accent, #5b4bff);
  --sup-ink: var(--ink, #14182b);
  --sup-muted: var(--muted, #5d6478);
  --sup-panel: var(--panel-solid, #ffffff);
  --sup-line: var(--line, rgba(20, 24, 43, 0.12));
  --sup-soft: color-mix(in srgb, var(--sup-accent) 9%, var(--sup-panel));
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 900;
  font-family: var(--font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  color: var(--sup-ink);
}
.sup[hidden] { display: none; }
/* Пока открыта карточка cookie — кнопка поддержки над ней, а не поверх. */
body:has(.cookie-card:not([hidden])) .sup:not(.is-open) { bottom: max(16px, calc(env(safe-area-inset-bottom) + 150px)); }
.sup-fab {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; box-sizing: border-box;
  height: 52px; padding: 0 20px 0 16px;
  border: 0; border-radius: 999px; cursor: pointer;
  color: #fff; font: 800 15px/1 inherit;
  background: linear-gradient(135deg, var(--sup-accent), color-mix(in srgb, var(--sup-accent) 55%, #ff4f8b));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--sup-accent) 38%, transparent), 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
.sup-fab:hover { transform: translateY(-2px); }
.sup-fab:focus-visible, .sup :focus-visible { outline: 3px solid color-mix(in srgb, var(--sup-accent) 65%, #fff); outline-offset: 2px; }
.sup-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
  border-radius: 999px; background: #ff3d5a; color: #fff;
  font: 800 12px/22px inherit; text-align: center;
  border: 2px solid var(--sup-panel);
}
.sup.is-open .sup-fab { display: none; }
.sup-panel {
  width: min(380px, calc(100vw - 24px));
  height: min(600px, calc(100dvh - 32px));
  display: flex; flex-direction: column;
  background: var(--sup-panel);
  border: 1px solid var(--sup-line);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.24);
  overflow: hidden;
  animation: sup-in 0.22s ease-out;
}
.sup-panel[hidden] { display: none; }
@keyframes sup-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.sup-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 16px 16px 12px 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--sup-accent), color-mix(in srgb, var(--sup-accent) 55%, #ff4f8b));
}
.sup-title { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.2; color: #fff; }
.sup-sub { margin: 4px 0 0; font-size: 12.5px; opacity: 0.9; }
.sup-close {
  /* Кнопки вложены в кнопку-обёртку? Нет, но глобальное правило button в style.css даёт
     margin-top, padding и рамку — перекрываем всё явно. */
  flex: 0 0 34px; width: 34px; height: 34px; min-width: 34px;
  margin: 0; padding: 0; box-sizing: border-box;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.2); color: #fff;
  font: 400 22px/32px inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.sup-close:hover { background: rgba(255, 255, 255, 0.32); }
.sup-tabs { display: flex; gap: 4px; padding: 8px 10px 0; border-bottom: 1px solid var(--sup-line); }
.sup-tab {
  /* Сбрасываем глобальное button из style.css: иначе остаются margin-top, padding,
     border, border-radius и background — из-за этого у активной вкладки «частичная обводка». */
  margin: 0; padding: 8px 10px 9px; min-width: 0; box-sizing: border-box;
  border: 0; border-radius: 0; background: none; cursor: pointer;
  font: 700 13.5px/1 inherit; color: var(--sup-muted);
  border-bottom: 2px solid transparent;
}
.sup-tab:hover { color: var(--sup-ink); }
.sup-tab:focus-visible { outline-offset: -3px; }
.sup-tab.on { color: var(--sup-accent); border-bottom-color: var(--sup-accent); }
.sup-tab[hidden] { display: none; }
.sup-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.sup-body > .sup-log { min-height: 140px; }
.sup-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; background: var(--sup-soft); }
.sup-log[hidden], .sup-empty[hidden], .sup-form[hidden], .sup-tickets[hidden], .sup-name[hidden] { display: none; }
.sup-empty { padding: 18px; color: var(--sup-muted); font-size: 14px; line-height: 1.5; flex: 1 1 auto; background: var(--sup-soft); }
.sup-empty p { margin: 0 0 8px; }
.sup-empty-title { color: var(--sup-ink); font-weight: 800; font-size: 16px; }
.sup-msg { display: flex; flex-direction: column; max-width: 86%; }
.sup-me { align-self: flex-end; align-items: flex-end; }
.sup-them, .sup-sys { align-self: flex-start; }
.sup-sys { max-width: 100%; align-self: stretch; }
.sup-bubble {
  padding: 9px 12px; border-radius: 16px; font-size: 14px; line-height: 1.45;
  overflow-wrap: anywhere; white-space: normal;
}
.sup-bubble p { margin: 0; }
.sup-me .sup-bubble { background: var(--sup-accent); color: #fff; border-bottom-right-radius: 6px; }
.sup-them .sup-bubble { background: var(--sup-panel); border: 1px solid var(--sup-line); border-bottom-left-radius: 6px; }
.sup-sys .sup-bubble { background: color-mix(in srgb, #ffcc33 18%, var(--sup-panel)); border: 1px dashed color-mix(in srgb, #c98f00 40%, transparent); font-size: 13px; }
.sup-meta { margin-top: 3px; font-size: 11px; color: var(--sup-muted); }
.sup-reset-link {
  display: inline-block; margin-top: 8px; padding: 8px 14px; border-radius: 999px;
  background: var(--sup-accent); color: #fff !important; font-weight: 800; text-decoration: none;
}
.sup-form, .sup-tickets, .sup-extra > form { padding: 10px 14px 12px; display: grid; gap: 8px; border-top: 1px solid var(--sup-line); background: var(--sup-panel); }
.sup-extra:empty, .sup-cap:empty { display: none; }
.sup-cap { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-end; padding: 8px 10px; border-radius: 10px; background: var(--sup-soft); }
.sup-cap .cap-go { margin-top: 0; }
.sup-extra { overflow-y: auto; }
.sup-tickets { border-top: 0; font-size: 14px; color: var(--sup-muted); line-height: 1.5; align-content: start; flex: 1 1 auto; }
.sup-tickets p { margin: 0; }
.sup-name { display: grid; gap: 4px; font-size: 12px; color: var(--sup-muted); }
.sup input, .sup textarea, .sup select {
  width: 100%; box-sizing: border-box;
  padding: 9px 11px; border-radius: 12px;
  border: 1px solid var(--sup-line); background: var(--sup-panel); color: var(--sup-ink);
  font: 14px/1.4 inherit;
}
.sup textarea { resize: vertical; min-height: 64px; max-height: 180px; }
.sup-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sup-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sup-count { font-size: 11.5px; color: var(--sup-muted); font-variant-numeric: tabular-nums; }
.sup-send {
  margin: 0; box-sizing: border-box;
  border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer;
  background: var(--sup-accent); color: #fff; font: 800 14px/1 inherit;
}
.sup-send[disabled] { opacity: 0.55; cursor: default; }
.sup-wide { width: 100%; }
.sup-status { margin: 0; min-height: 1em; font-size: 12.5px; color: var(--sup-muted); }
.sup-fine { margin: 0; font-size: 11px; color: var(--sup-muted); }
.sup-fine a { color: inherit; }
.sup-field { display: grid; gap: 4px; font-size: 12.5px; color: var(--sup-muted); }
.sup-field b { color: var(--sup-ink); font-weight: 700; }
.sup-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 520px) {
  .sup { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); }
  .sup.is-open { left: 8px; right: 8px; bottom: 8px; }
  .sup-panel { width: 100%; height: calc(100dvh - 16px); border-radius: 18px; }
  .sup-fab { height: 48px; padding: 0 14px; }
  .sup-fab-text { display: none; }
  .sup-grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sup-panel { animation: none; } .sup-fab { transition: none; } }

/* ——— Обращения кабинета и панель поддержки ——— */
.tk-shell { width: min(calc(1040px * var(--ui-scale, 1)), 100%); }
.tk-head-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.tk-new { display: grid; gap: 10px; padding: 14px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-soft, transparent); }
.tk-new[hidden] { display: none; }
.tk-new label { display: grid; gap: 5px; font-weight: 700; font-size: 14px; }
.tk-new input, .tk-new select, .tk-new textarea, .tk-reply textarea, .tk-reply select {
  width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel-solid, #fff); color: var(--ink); font: 14.5px/1.4 var(--font);
}
.tk-new-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.tk-file input { padding: 6px; }
.tk-layout, .sa-layout { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 14px; align-items: start; }
.tk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 70vh; overflow-y: auto; }
.tk-item {
  width: 100%; text-align: left; display: grid; gap: 4px; cursor: pointer;
  padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--panel-solid, #fff); color: var(--ink); font: inherit;
}
.tk-item:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.tk-item.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.tk-item-top { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.tk-item-top .mail-badge { margin-left: auto; position: static; }
.tk-item-subj { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-item-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-none { padding: 8px; }
.tk-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.tk-open { background: #e7f0ff; color: #1b4fd1; }
.tk-progress { background: #fff3d6; color: #8a5a00; }
.tk-done { background: #dcf7ea; color: #106b43; }
.tk-view { min-height: 240px; border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--panel-solid, #fff); display: grid; gap: 12px; align-content: start; }
.tk-view-head h3 { margin: 0 0 4px; font-size: 19px; }
.tk-view-head p { margin: 0; }
.tk-thread { display: grid; gap: 10px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.tk-msg { padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); max-width: 88%; }
.tk-mine { justify-self: end; background: color-mix(in srgb, var(--accent) 10%, var(--panel-solid, #fff)); }
.tk-theirs { justify-self: start; }
.tk-sys { justify-self: stretch; max-width: none; border-style: dashed; background: color-mix(in srgb, #ffcc33 14%, transparent); }
.tk-msg-meta { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.tk-msg-body p { margin: 0; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.tk-shot { margin: 8px 0 0; }
.tk-shot img { max-width: 100%; max-height: 320px; border-radius: 10px; border: 1px solid var(--line); display: block; }
.tk-reply { display: grid; gap: 8px; }
.tk-reply select { width: auto; }
.profile-support { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.profile-support h3 { margin: 0 0 2px; }
.profile-support p { margin: 0; }
.profile-support .mail-badge { position: static; margin-left: 4px; }
.sa-wrap .srv-tabs button b { margin-left: 4px; color: #ff3d5a; }
.sa-match { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 8px 0; font-size: 13.5px; }
.sa-match th, .sa-match td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.sa-ok { color: #0d8a54; font-weight: 800; }
.sa-no { color: #c2283f; font-weight: 800; }
.sa-na { color: var(--muted); }
@media (max-width: 760px) {
  .tk-layout, .sa-layout, .tk-new-grid { grid-template-columns: 1fr; }
  .tk-list { max-height: 34vh; }
  .profile-support { flex-direction: column; align-items: flex-start; }
}