/* Gilroy из папки fonts: у системного Gilroy браузер видит только одно начертание */
@font-face { font-family: "RGilroy"; font-weight: 400; src: url("fonts/Gilroy-Regular.ttf") format("truetype"); }
@font-face { font-family: "RGilroy"; font-weight: 500; src: url("fonts/Gilroy-Medium.ttf") format("truetype"); }
@font-face { font-family: "RGilroy"; font-weight: 600; src: url("fonts/Gilroy-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "RGilroy"; font-weight: 700; src: url("fonts/Gilroy-Bold.ttf") format("truetype"); }

:root {
  --win: rgba(30, 30, 30, 0.97);
  --pane: #232323;
  --card: #282828;
  --card-hover: #2e2e2e;
  --field: #2b2b2b;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #f1f1f1;
  --muted: #9a9a9a;
  --dim: #6c6c6c;

  --accent: #10a83c;          /* заливка активной карточки и кнопок */
  --accent-hover: #14bb44;
  --accent-text: #1ec24f;     /* зелёный текст и обводки */
  --accent-dark: #135f24;     /* круг иконки */
  --accent-icon: #6ff08b;
  --olive: #3a4e32;
  --olive-hover: #44603a;

  --question: #6cb4ff;
  --complaint: #ff5b5b;
  --problem: #ffb547;
  --warn: #ffb547;

  --font: "RGilroy", "Gilroy", "Montserrat", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  background: transparent;
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}
/* фон только для предпросмотра в браузере — в CEF класс preview снимается */
body.preview { background: #1a1d22 url("back.jpg") center / cover no-repeat; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; background: none; border: 0; outline: none; }
svg { display: block; flex-shrink: 0; }
b, strong { font-weight: 500; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ---------- окно ---------- */
.reports {
  /* центрируем через margin: auto, а не transform — с transform Chromium
     рендерит окно отдельным слоем и текст теряет сглаживание */
  position: absolute;
  inset: 0;
  margin: auto;
  /* на больших разрешениях — 960×640, на маленьких окно ужимается под экран;
     минимальное поддерживаемое разрешение — 960×800, ниже окно уже не сжимается */
  width: min(960px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 32px));
  min-width: 928px;
  min-height: 640px;
  display: flex; flex-direction: column;
  background: var(--win);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
  overflow: hidden;
}
.reports[hidden] { display: none; }
.reports.moved { right: auto; bottom: auto; margin: 0; }

.win-head {
  height: 56px; flex-shrink: 0;
  cursor: default;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px 0 24px;
}
.win-title { display: flex; align-items: center; gap: 16px; }
.status-tabs { display: flex; gap: 6px; }
.win-logo { display: none; }
.win-title h1 { font-size: 16px; font-weight: 600; }
.win-stats { display: flex; align-items: center; color: var(--muted); font-size: 12px; }
.stat { display: flex; align-items: center; gap: 5px; padding: 0 9px; }
.stat + .stat { border-left: 1px solid var(--line-strong); }
.stat b { color: var(--text); font-weight: 600; }
.stat.hot b { color: var(--warn); }
/* иконки видны только в компактном режиме, вместо подписей */
.stat svg { display: none; color: var(--muted); }

.win-right { display: flex; align-items: center; gap: 14px; }
.me { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.me .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-text); }
.me b { color: var(--accent-text); font-weight: 600; }

.icon-btn {
  width: 30px; height: 30px; border-radius: 7px;
  display: grid; place-items: center; color: #d8d8d8;
}
.icon-btn:hover { background: rgba(255,255,255,0.07); color: #fff; }

.win-body { flex: 1; display: flex; gap: 14px; min-height: 0; padding: 0 16px 16px 24px; }

/* ---------- список ---------- */
.list-pane { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; }

.search {
  height: 34px; display: flex; align-items: center; gap: 8px;
  padding: 0 11px;
  background: var(--field); border: 1px solid var(--line-strong); border-radius: 6px;
  color: var(--dim);
}
.search:focus-within { border-color: rgba(30,194,79,0.6); }
.search input { flex: 1; min-width: 0; color: var(--text); }
.search input::placeholder { color: var(--muted); }
kbd {
  font-family: var(--font); font-size: 10px; color: var(--dim);
  padding: 1px 5px; border: 1px solid var(--line-strong); border-radius: 4px;
}

.filters { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.filters .vsep { width: 1px; height: 30px; background: var(--line-strong); margin: 0 4px; }

/* пилюли — главный элемент стиля Радмира */
.pill {
  height: 25px; padding: 0 10px; border-radius: 7px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--accent-text); color: var(--accent-text);
  font-size: 12.5px; font-weight: 400; white-space: nowrap;
}
.pill:hover { background: rgba(30,194,79,0.1); }
.pill.on { border-color: #e6e6e6; color: #fff; background: rgba(255,255,255,0.06); }
.pill b { font-weight: 600; font-size: 11px; }
.pill b:empty { display: none; }
.pill.on b { color: var(--accent-text); }

.tickets { flex: 1; overflow-y: auto; margin-right: -6px; padding-right: 6px; display: flex; flex-direction: column; gap: 8px; }
.tickets-empty { padding: 40px 10px; text-align: center; color: var(--dim); }

.ticket {
  display: flex; align-items: center; gap: 10px;
  min-height: 58px; padding: 8px 12px 8px 10px;
  background: var(--card);
  border-radius: 6px;
  cursor: pointer;
}
.ticket:hover { background: var(--card-hover); }
.ticket.active { background: var(--accent); }

.t-ava {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--accent-dark); color: var(--accent-icon);
}
.t-ava.new { background: #3a3a3a; color: #e6e6e6; }
.t-ava.closed { background: #333; color: var(--muted); }
.ticket.active .t-ava { background: #0b5c21; color: var(--accent-icon); }

.t-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.t-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* ник в одну строку целиком: время вынесено в нижнюю строку, чтобы ник не делил место;
   многоточие — только запасной вариант для совсем длинных ников */
.t-name { flex: 1; min-width: 0; font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-time { flex-shrink: 0; align-self: flex-start; font-size: 13.5px; font-weight: 500; }
.t-preview { flex: 1; min-width: 0; color: #e2e2e2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket.active .t-preview { color: #eafff0; }

.t-meta { display: flex; align-items: center; flex-shrink: 0; font-size: 12.5px; font-weight: 500; }
.t-meta > span + span { border-left: 1px solid var(--line-strong); margin-left: 6px; padding-left: 6px; }
.ticket.active .t-meta > span + span { border-color: rgba(255,255,255,0.35); }
.t-type.question { color: var(--question); }
.t-type.complaint { color: var(--complaint); }
.t-type.problem { color: var(--problem); }
.ticket.active .t-type { color: #fff; }

.t-admin { margin-left: auto; min-width: 0; color: var(--accent-text); font-weight: 400; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket.active .t-admin { color: #fff; }
.t-wait { margin-left: auto; flex-shrink: 0; font-size: 12.5px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.t-wait.late { color: var(--warn); }
.t-wait.very-late { color: var(--complaint); }
.ticket.active .t-wait { color: #fff; }
.unread { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-text); flex-shrink: 0; }
.ticket.active .unread { background: #fff; }

/* ---------- обращение ---------- */
.chat-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.chat-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: var(--pane); border-radius: 10px;
  color: var(--muted); text-align: center;
}
.chat-empty .big { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-dark); color: var(--accent-icon); margin-bottom: 6px; }
.chat-empty h3 { color: var(--text); font-size: 16px; font-weight: 600; }
.chat-empty .hints { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--dim); }
.chat-empty .hints span { display: flex; align-items: center; gap: 6px; }

.ch-head { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.ch-who { flex: 1; min-width: 0; overflow: hidden; }
.ch-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.ch-sub > span + span::before { content: "|"; color: var(--dim); margin-right: 6px; }
.online { color: var(--accent-text); }
.offline { color: var(--dim); }
.ch-actions { display: flex; gap: 2px; flex-shrink: 0; }

.ch-bar { display: flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }

.select {
  height: 34px; min-width: 170px; padding: 0 10px 0 12px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--field); border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 400;
}
.select svg { color: var(--accent-text); }
.select:hover { border-color: var(--line-strong); }
.select:disabled { cursor: default; color: var(--muted); }

.btn {
  height: 31px; padding: 0 16px; border-radius: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 400; white-space: nowrap;
}
.btn-outline { border: 1px solid var(--accent-text); color: var(--accent-text); }
.btn-outline:hover { background: rgba(30,194,79,0.1); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }

.round-ok {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--accent); color: #0b2b14;
}
.round-ok:hover { background: var(--accent-hover); }

/* панель чата */
.chat-box { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--pane); border-radius: 10px; overflow: hidden; }

.targets { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 4px; }
.targets-label { font-size: 13px; color: #e6e6e6; }
.targets-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.target {
  min-height: 34px; padding: 3px 9px; border-radius: 6px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  background: #164d22; border: 1px solid var(--accent-text);
  color: #b9ffcb; font-size: 11.5px; font-weight: 500; line-height: 1.15;
}
.target:hover { background: #1b5c29; }

.messages {
  flex: 1; overflow-y: auto;
  padding: 10px 16px 8px;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 12px;
}
.messages::before { content: ""; flex: 1; }
.msg .meta { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.msg .meta time { margin-left: 6px; font-size: 11px; }
.msg .text { font-size: 14px; font-weight: 400; line-height: 1.4; user-select: text; word-wrap: break-word; }
.msg.admin .meta b { color: var(--accent-text); font-weight: 500; }
.msg.admin.other-admin .meta b { color: var(--question); }
.msg .meta b { font-weight: 400; }

.sys {
  align-self: center; display: flex; align-items: baseline; gap: 10px;
  max-width: 92%; padding: 0 10px;
  font-style: italic; color: var(--muted); font-size: 12px; text-align: center;
}
.sys time { flex-shrink: 0; font-size: 11px; }

.quick { display: flex; background: #1d1d1d; border-top: 1px solid var(--line); }
.quick button {
  flex: 1; min-width: 0; height: 36px; padding: 0 8px;
  font-size: 14px; color: #f0f0f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative;
}
.quick button + button::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: var(--line-strong);
}
.quick button:hover { background: rgba(30,194,79,0.12); color: #fff; }

.composer {
  display: flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 8px 0 16px;
  background: #262626; border-top: 1px solid var(--line);
}
.composer input { flex: 1; height: 100%; font-size: 14px; user-select: text; }
.composer input::placeholder { color: var(--muted); }
.send { width: 36px; height: 36px; display: grid; place-items: center; color: var(--accent-text); }
.send:disabled { opacity: .4; cursor: default; }

.take-bar {
  display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 10px 0 16px;
  background: #262626; border-top: 1px solid var(--line);
  color: #e6e6e6;
}
.take-bar b { color: var(--warn); }
.closed-bar { height: 46px; display: grid; place-items: center; background: #262626; border-top: 1px solid var(--line); color: var(--muted); }
.closed-bar b { color: var(--accent-text); }

/* ---------- поповеры ---------- */
.popover {
  position: fixed; z-index: 50;
  background: #262626; border: 1px solid var(--line-strong);
  border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,0.55);
}

/* выпадающий список типа */
.dropdown { padding: 0; min-width: 170px; overflow: hidden; border-radius: 6px; }
.dropdown-item { width: 100%; height: 32px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
.dropdown-item:hover { background: rgba(255,255,255,0.06); }
.dropdown-item.on { background: var(--accent); color: #fff; }
.dropdown-item small { color: var(--dim); font-size: 11px; }

/* меню игрока */
.pmenu { width: 290px; padding: 16px 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.pmenu-title { text-align: center; font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
.pmenu .btn { height: 34px; justify-content: center; border-radius: 9px; font-size: 13.5px; }
.pmenu .btn-olive { background: var(--olive); color: #e6e6e6; }
.pmenu .btn-olive:hover { background: var(--olive-hover); }

/* поиск игрока */
.player-search { width: 370px; padding: 14px 16px 10px; }
.ps-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ps-top .search { flex: 1; }
.ps-list { max-height: 290px; overflow-y: auto; display: flex; flex-direction: column; }
.ps-row { display: grid; grid-template-columns: 100px 1fr auto; align-items: center; gap: 10px; height: 27px; padding: 0 4px; border-radius: 4px; }
.ps-row:hover { background: rgba(255,255,255,0.04); }
.ps-row .nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #dcdcdc; }
.ps-row .off { color: var(--muted); }
.ps-row .add { color: var(--accent-text); font-size: 13.5px; font-weight: 400; }
.ps-row .add:hover { text-decoration: underline; }
.ps-empty { padding: 18px; text-align: center; color: var(--dim); }
mark { background: none; color: var(--accent-text); font-weight: 600; }

/* ---------- тосты ---------- */
.toasts { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 60; }
.toast {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 8px;
  background: #262626; border: 1px solid var(--accent-text);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.toast svg { color: var(--accent-text); }

/* компактный режим для низких разрешений */
@media (max-width: 1000px) {
  .win-body { padding: 0 14px 14px; gap: 12px; }
  .win-head { padding: 0 14px 0 18px; }
  .list-pane { width: 330px; }
  .win-stats { font-size: 12.5px; }
  .stat { padding: 0 7px; }
  .stat .full { display: none; }
  .stat svg { display: block; }
  .select { min-width: 150px; }
  .pill { padding: 0 8px; font-size: 12px; }
  .quick button { font-size: 13px; }
}

.reopen {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 12px 22px; border-radius: 20px; background: var(--accent); color: #fff; font-weight: 500;
}

/* =========================================================
 * Окно игрока (player.html)
 * ========================================================= */
.p-head { position: relative; justify-content: center; height: 68px; }
.p-head > .icon-btn { position: absolute; right: 16px; top: 50%; margin-top: -15px; }

.seg { display: flex; border-radius: 9px; overflow: hidden; background: #333; }
.seg button {
  width: 136px; height: 42px;
  font-size: 13.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .3px;
  color: #f0f0f0;
}
.seg button:hover { background: #3b3b3b; }
.seg button.on { background: #e2e2e2; color: #1e1e1e; }

.player .list-pane { width: 290px; gap: 12px; }
.create-btn {
  height: 42px; flex-shrink: 0; border-radius: 10px;
  background: var(--accent); color: #0b2b14; font-size: 15px; font-weight: 500;
}
.create-btn:hover { background: var(--accent-hover); }
.create-btn.locked { opacity: .55; }

.p-ticket { min-height: 62px; }
.p-ticket .t-name { font-size: 13px; color: var(--muted); font-weight: 500; }
.p-ticket.active .t-name { color: #eafff0; }
.p-ticket .t-time { color: #d8d8d8; }
.p-ticket.active .t-time { color: #fff; }
.p-ticket .t-preview { font-size: 13px; }
.player .ticket.active .t-ava.closed { background: #3a3a3a; color: var(--accent-icon); }
.player .t-ava.closed { color: var(--accent-text); }

.p-status {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
}
.p-status > span + span::before { content: "|"; color: var(--dim); margin-right: 10px; }
.p-status b { font-weight: 500; color: var(--warn); font-variant-numeric: tabular-nums; }
.p-status b.green { color: var(--accent-text); }

.chat-hint {
  flex: 1; display: grid; place-items: center; text-align: center;
  font-size: 16px; font-weight: 500; color: #bdbdbd; line-height: 1.35;
}

/* свои сообщения — справа, как в текущем окне Радмира */
.msg.own { align-self: flex-end; text-align: right; max-width: 80%; }
.msg.own .meta time { margin: 0 6px 0 0; }
.msg.admin { max-width: 85%; }
.link { color: #8fc9ff; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.link:hover { color: #b5dcff; }

.target { position: relative; }
.target-x {
  position: absolute; top: -7px; right: -7px;
  width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center;
  background: #3a3a3a; color: #fff;
}
.target-x:hover { background: var(--complaint); }

/* FAQ */
.faq { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; }
.faq-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.faq-item { background: var(--card); border-radius: 8px; }
.faq-q {
  width: 100%; min-height: 46px; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-align: left; font-size: 14px; font-weight: 500;
}
.faq-q svg { color: var(--accent-text); }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-q:hover { background: var(--card-hover); border-radius: 8px; }
.faq-a { padding: 0 16px 14px; color: #cfcfcf; line-height: 1.5; }
.faq-foot { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); padding-top: 4px; }

@media (max-width: 1000px) {
  .player .list-pane { width: 250px; }
  .seg button { width: 110px; }
}

/* быстрый спек за игроком из жалобы (админ-окно) */
.target-group { display: inline-flex; align-items: stretch; }
.target-group .target { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.target-spec {
  width: 32px; display: grid; place-items: center;
  background: #164d22; color: #b9ffcb;
  border: 1px solid var(--accent-text); border-left-color: rgba(30,194,79,0.35);
  border-radius: 0 6px 6px 0;
}
.target-spec:hover { background: var(--accent); color: #fff; }


/* кнопка «Назад» — скрывает открытое обращение, как в старом окне */
.back-btn {
  height: 32px; padding: 0 12px 0 9px; border-radius: 6px; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  background: #2e2e2e; color: #e6e6e6; font-size: 13.5px;
}
.back-btn:hover { background: #383838; color: #fff; }

.chat-empty .sub { color: var(--muted); font-size: 13.5px; }
.chat-empty .sub b { color: var(--accent-text); font-weight: 500; }

/* подсказки к иконкам (data-tip) */
.tip {
  position: fixed; z-index: 80; max-width: 260px;
  padding: 6px 10px; border-radius: 6px;
  background: #141414; border: 1px solid var(--line-strong);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  color: #ececec; font-size: 12px; line-height: 1.35;
  white-space: pre-line; pointer-events: none;
}
.tip[hidden] { display: none; }

/* при перетаскивании окна — обычная стрелка, без системного крестика перемещения */
html.dragging, html.dragging * { cursor: default !important; }