:root { --ui-scale: 1; }
html { font-size: 16px; }
@media (min-width: 1024px) {
  :root { --ui-scale: 0.9; }
  html { font-size: 14.4px; }
}
@media (max-width: 768px) {
  :root { --ui-scale: 1; }
  html { font-size: 16px; }
}

/* 💬 Мини-чат терминала — панель справа, кнопка в шапке рядом с LIVE WS */

#terminal-chat {
  position: fixed;
  top: 58px;
  right: 14px;
  z-index: 1200;
  font-family: inherit;
  /* draggable: left/top will be set via JS, right then becomes auto.
     touch-action:none сидит точечно на .tchat-head и .tchat-rz — на всём
     корне он бы отключил пальцем скролл ленты сообщений внутри панели */
  touch-action: auto;
}
#terminal-chat.tchat-dragging {
  opacity: 0.92;
  transition: none;
  cursor: grabbing;
}
#terminal-chat.tchat-dragging .tchat-panel {
  pointer-events: none;
}
#terminal-chat.tchat-moved {
  /* after first drag, right is auto, left/top control position */
}


/* Кнопка в шапке терминала — сразу после LIVE WS, той же формы (pill) */
.tchat-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #101a2e;
  border: 1px solid #223055;
  color: #c9d4f0;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
  line-height: 1.2;
}
.tchat-header-btn:hover { background:#162040; border-color:#2d4370; color:#e6eeff; }
.tchat-header-btn.active, #terminal-chat.open ~ header .tchat-header-btn,
body.tchat-open .tchat-header-btn {
  background:#162a52;
  border-color:#35508a;
  color:#fff;
  box-shadow: 0 0 12px rgba(61,112,255,0.25);
}

/* Старая плавающая кнопка — оставлена скрытой для совместимости тестов */
.tchat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #101a2e;
  border: 1px solid #223055;
  color: #c9d4f0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  transition: background .15s, border-color .15s;
}
.tchat-toggle.hidden { display:none !important; }
.tchat-toggle:hover { background:#162040; border-color:#2d4370; }

.tchat-unread {
  background:#ff3b5c;
  color:#fff;
  font-size:11px;
  font-weight:700;
  min-width:18px;
  height:18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 5px;
}

/* Панель — справа под шапкой */
.tchat-panel {
  width: 340px;
  max-width: calc(100vw - 24px);
  height: 420px;
  max-height: min(70vh, 560px);
  background: #0c1222;
  border: 1px solid #223055;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: 0;
}
.tchat-panel.hidden { display:none !important; }

.tchat-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  background:#111c34;
  border-bottom:1px solid #1e2e55;
  font-weight:600;
  font-size:13px;
  color:#d6e1ff;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.tchat-head:active {
  cursor: grabbing;
}

.tchat-close {
  background:transparent;
  border:0;
  color:#8aa0c8;
  cursor:pointer;
  font-size:16px;
  line-height:1;
  padding:2px 6px;
}
.tchat-close:hover { color:#fff; }

.tchat-list {
  flex:1 1 auto;
  overflow-y:auto;
  padding:10px 10px 6px;
  display:flex;
  flex-direction:column;
  gap:8px;
  scrollbar-width:thin;
}
.tchat-msg {
  background:#111c34;
  border:1px solid #1c2a4a;
  border-radius:10px;
  padding:7px 9px;
  font-size:13px;
  line-height:1.35;
  color:#c8d6f2;
  word-break:break-word;
}
.tchat-msg.admin {
  border-color:#3a2d1a;
  background:#1a160e;
}
.tchat-msg .tchat-meta {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:#7f93b8;
  margin-bottom:2px;
}
.tchat-msg .tchat-name {
  font-weight:600;
  color:#a9bee8;
}
.tchat-msg.admin .tchat-name { color:#ffcc66; }
.tchat-msg .tchat-time { opacity:.7; }
.tchat-msg .tchat-text { white-space:pre-wrap; }

.tchat-foot {
  padding:8px;
  border-top:1px solid #1e2e55;
  background:#0e182d;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.tchat-foot input {
  flex:1 1 auto;
  min-width:0;
  background:#0a1226;
  border:1px solid #223055;
  color:#dbe6ff;
  border-radius:8px;
  padding:8px 10px;
  font-size:13px;
  outline:none;
}
.tchat-foot input:focus { border-color:#35508a; }
.tchat-foot button#tchat-send {
  flex:0 0 auto;
  background:#1e3a6a;
  border:1px solid #2a4d8a;
  color:#fff;
  border-radius:8px;
  padding:8px 12px;
  cursor:pointer;
  font-size:14px;
}
.tchat-foot button#tchat-send:hover { background:#26487f; }
.tchat-foot button#tchat-send:disabled { opacity:.45; cursor:default; }

.tchat-hint {
  flex:1 1 100%;
  font-size:11px;
  color:#7f93b8;
  min-height:14px;
}
.tchat-hint.error { color:#ff6b7a; }

.tchat-empty {
  text-align:center;
  color:#6b7da0;
  font-size:12px;
  padding:18px 8px;
}

/* Открыт / закрыт — панель показывается, кнопка в шапке подсвечивается */
#terminal-chat.open .tchat-toggle { display:none !important; }
#terminal-chat:not(.open) .tchat-panel { display:none !important; }
#terminal-chat.open { display:block; }

/* На узких экранах — почти на всю ширину */
@media (max-width: 640px) {
  #terminal-chat { right:8px; top:52px; }
  .tchat-panel { width: calc(100vw - 16px); height: min(62vh, 460px); }
}

/* draggable reset hint: double-click header to reset position */
.tchat-head::before {
  content: "⠿";
  margin-right: 6px;
  opacity: 0.35;
  font-size: 10px;
}


/* ============================================================================
   🔒 v3: растягивание, вкладки «Общий/Личные», приватные диалоги,
   зелёный бейдж онлайна и подсветка неотвеченных уведомлений.
   ============================================================================ */
#tchat-list.hidden, .tchat-dm.hidden, .tchat-dm-chat.hidden,
.tchat-invite-form.hidden, .hidden-soft.hidden { display:none !important; }

/* — панель: базовый размер теперь «режимный», при ресайзе пишет inline — */
.tchat-panel.tchat-resized { max-height: none; max-width: none; }

/* ручки растягивания по краям и углам — дети #terminal-chat, не панели:
   у панели overflow:hidden, и торчащие за край лапки отрезались бы */
.tchat-rz {
  position:absolute; z-index:6;
  touch-action:none;              /* палец на ручке не должен скроллить страницу */
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;     /* никакого long-press меню на телефоне */
}
/* при закрытой панели ручек не видно (они прицеплены к корню виджета) */
#terminal-chat:not(.open) .tchat-rz { display:none !important; }
.tchat-rz-n { top:-4px; left:12px; right:12px; height:10px; cursor:ns-resize; }
.tchat-rz-s { bottom:-4px; left:12px; right:12px; height:10px; cursor:ns-resize; }
.tchat-rz-w { left:-4px; top:12px; bottom:12px; width:10px; cursor:ew-resize; }
.tchat-rz-e { right:-4px; top:12px; bottom:12px; width:10px; cursor:ew-resize; }
.tchat-rz-ne { top:-6px; right:-6px; width:20px; height:20px; cursor:nesw-resize; }
.tchat-rz-nw { top:-6px; left:-6px; width:20px; height:20px; cursor:nwse-resize; }
.tchat-rz-se { bottom:-6px; right:-6px; width:22px; height:22px; cursor:nwse-resize; }
.tchat-rz-sw { bottom:-6px; left:-6px; width:20px; height:20px; cursor:nesw-resize; }
/* зацепка в углу — видна при наведении на панель */
.tchat-rz-se::after {
  content:""; position:absolute; right:3px; bottom:3px; width:8px; height:8px;
  border-right:2px solid #35508a; border-bottom:2px solid #35508a;
  border-radius:0 0 3px 0; opacity:.6;
}
#terminal-chat .tchat-panel { position:relative; }

/* — вкладки — */
.tchat-tabs {
  display:flex; gap:4px; padding:6px 8px 0;
  background:#0e182d; border-bottom:1px solid #1e2e55;
}
.tchat-tab {
  flex:0 0 auto; position:relative;
  background:transparent; border:0; border-bottom:2px solid transparent;
  color:#7f93b8; font-size:12.5px; font-weight:600; cursor:pointer;
  padding:6px 10px; display:inline-flex; align-items:center; gap:6px;
}
.tchat-tab:hover { color:#c9d4f0; }
.tchat-tab.active { color:#eaf1ff; border-bottom-color:#35508a; }
.tchat-tab-badge {
  background:#ff3b5c; color:#fff; font-size:10px; font-weight:700;
  min-width:16px; height:16px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 4px;
}
.tchat-tab-badge.hidden { display:none !important; }
.tchat-mute {
  margin-left:auto;
  background:transparent;
  border:1px solid #223055;
  color:#7f93b8;
  border-radius:7px;
  padding:3px 8px;
  font-size:13px;
  cursor:pointer;
  flex:0 0 auto;
}
.tchat-mute:hover { background:#162040; color:#c9d4f0; border-color:#2d4370; }
.tchat-mute.muted { opacity:.55; text-decoration:line-through; }

.tchat-support { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.tchat-support.hidden { display:none !important; }
.tchat-support-name { padding:6px 8px; border-top:1px solid #1e2e55; background:#0e182d; }
.tchat-support-name.hidden { display:none !important; }
.tchat-support-name input {
  width:100%; background:#0a1226; border:1px solid #223055;
  color:#dbe6ff; border-radius:7px; padding:6px 9px; font-size:12.5px; outline:none;
}
.tchat-support-name input:focus { border-color:#35508a; }

.tchat-msg.svc { border-left:3px solid #2d5a9a; }
.tchat-msg.svc.book { border-left-color:#f59e0b; }
.tchat-msg.svc.pump { border-left-color:#22d3ee; }
.tchat-msg.svc.alert { border-left-color:#a78bfa; }
.tchat-msg.svc.corr { border-left-color:#fb7185; }
.tchat-msg .tchat-svc-kind {
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:700; letter-spacing:.04em;
  background:#101a2e; border:1px solid #223055; border-radius:999px;
  padding:1px 6px; margin-right:6px; color:#8aa0c8;
}
.tchat-msg.svc .tchat-text { font-size:12.5px; }

#tchat-services.hidden { display:none !important; }
.tchat-tabs { flex-wrap:wrap; }

/* — список личных диалогов — */
.tchat-dm { flex:1 1 auto; overflow-y:auto; padding:8px; scrollbar-width:thin; }
.tchat-dm-top { display:flex; gap:6px; margin-bottom:6px; flex-wrap:wrap; }
.tchat-mini {
  background:#162040; border:1px solid #2d4370; color:#c9d4f0;
  border-radius:7px; padding:4px 9px; font-size:12px; cursor:pointer;
}
.tchat-mini:hover { background:#1c2b55; color:#fff; }
.tchat-mini.ok { border-color:#1f7a4d; color:#7ee2b0; }
.tchat-mini.no { border-color:#7a2436; color:#ff9aab; }
.tchat-invite-form { display:flex; gap:6px; flex:1 1 100%; }
.tchat-invite-form input {
  flex:1 1 auto; min-width:0; background:#0a1226; border:1px solid #223055;
  color:#dbe6ff; border-radius:7px; padding:5px 8px; font-size:12.5px; outline:none;
}
.tchat-invite-results { margin-top:6px; }
.tchat-inv-item {
  display:flex; align-items:center; gap:7px; padding:6px 8px;
  border:1px solid #1c2a4a; border-radius:9px; background:#101a30;
  margin-bottom:5px; cursor:pointer;
}
.tchat-inv-item:hover { border-color:#2d4370; background:#14203c; }
.tchat-inv-name { flex:1 1 auto; font-size:12.5px; color:#c8d6f2; overflow:hidden; text-overflow:ellipsis; }

.tchat-dm-item {
  border:1px solid #1c2a4a; border-radius:10px; background:#101a30;
  padding:8px 9px; margin-bottom:7px; cursor:pointer; transition:border-color .15s;
}
.tchat-dm-item:hover { border-color:#2d4370; }
.tchat-dm-item.unread { border-color:#1f7a4d; background:#0f2118; }
.tchat-peer { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#a9bee8; }
.tchat-peer-head { font-size:13px; }
.tchat-last { font-size:12px; color:#7f93b8; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tchat-last.muted { opacity:.7; }
.tchat-dm-meta { display:flex; align-items:center; margin-top:4px; }
.tchat-dm-meta .tchat-time { font-size:11px; color:#63769c; }
.tchat-dm-unread {
  margin-left:auto; background:#22c55e; color:#04140b; font-size:10.5px; font-weight:800;
  min-width:17px; height:17px; border-radius:999px; display:inline-flex;
  align-items:center; justify-content:center; padding:0 5px;
}
.tchat-dm-flag { font-size:10.5px; color:#8ab4ff; border:1px solid #2a4d8a; border-radius:6px; padding:0 5px; font-weight:600; }
.tchat-dm-flag.inv { color:#7ee2b0; border-color:#1f7a4d; }
.tchat-dm-actions { display:flex; gap:6px; margin-top:6px; }

/* точка «онлайн в чате» у имени собеседника */
.tchat-peer-dot { width:8px; height:8px; border-radius:50%; background:#3a4a6b; flex:0 0 auto; }
.tchat-peer-dot.on { background:#22c55e; box-shadow:0 0 6px #22c55e; }

/* — приватные пузыри — */
.tchat-dm-chat { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.tchat-dm-head {
  display:flex; align-items:center; gap:7px; padding:7px 9px;
  border-bottom:1px solid #1e2e55; background:#0e182d; flex-wrap:wrap;
}
.tchat-list .tchat-msg.mine {
  background:#12321f; border-color:#1f7a4d; margin-left:auto; max-width:88%;
}
.tchat-list .tchat-msg.peer { margin-right:auto; max-width:92%; }

/* ник как ссылка: клик — меню «ответить / написать лично» */
.tchat-namelink {
  background:none; border:0; padding:0; font:inherit; cursor:pointer;
  color:inherit; text-decoration:none;
}
.tchat-namelink:hover { color:#8ab4ff; text-decoration:underline; }

/* всплывающее меню пользователя */
.tchat-usermenu {
  position:fixed; z-index:1600; min-width:170px;
  background:#101a30; border:1px solid #2d4370; border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.55); padding:5px;
  font-family:inherit;
}
.tchat-usermenu-name { font-size:12px; color:#7f93b8; padding:4px 8px 6px; border-bottom:1px solid #1c2a4a; margin-bottom:4px; }
.tchat-usermenu button {
  display:block; width:100%; text-align:left; background:transparent; border:0;
  color:#c9d4f0; font-size:12.5px; padding:6px 8px; border-radius:7px; cursor:pointer;
}
.tchat-usermenu button:hover { background:#1c2b55; color:#fff; }

/* — 🟢 бейдж «сколько онлайн» на кнопке чата — */
.tchat-online {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 5px; border-radius:999px;
  font-size:10.5px; font-weight:800;
  color:#41527a; background:#0a1226; border:1px solid #223055;
  transition:color .2s, background .2s, border-color .2s, box-shadow .2s;
}
.tchat-online::before {
  content:""; width:6px; height:6px; border-radius:50%;
  background:#41527a; margin-right:4px; flex:0 0 auto;
  transition:background .2s, box-shadow .2s;
}
/* есть люди — светим зелёным и слегка пульсируем */
.tchat-online.on {
  color:#b6ffcf; background:#08210f; border-color:#1f7a4d;
  box-shadow:0 0 10px rgba(34,197,94,.55);
}
.tchat-online.on::before {
  background:#22c55e;
  box-shadow:0 0 8px #22c55e, 0 0 14px rgba(34,197,94,.7);
  animation:tchat-online-pulse 1.6s ease-in-out infinite;
}
@keyframes tchat-online-pulse {
  0%,100% { box-shadow:0 0 6px #22c55e; }
  50% { box-shadow:0 0 12px #22c55e, 0 0 20px rgba(34,197,94,.75); }
}

/* — подсветка панели и кнопки, пока висят уведомления — */
.tchat-notify { }
body .tchat-header-btn.tchat-notify,
#terminal-chat .tchat-toggle.tchat-notify {
  border-color:#1f7a4d;
  box-shadow:0 0 0 1px rgba(34,197,94,.35), 0 0 16px rgba(34,197,94,.45);
  animation:tchat-notify-glow 1.8s ease-in-out infinite;
}
@keyframes tchat-notify-glow {
  0%,100% { box-shadow:0 0 0 1px rgba(34,197,94,.30), 0 0 10px rgba(34,197,94,.35); }
  50%     { box-shadow:0 0 0 1px rgba(34,197,94,.55), 0 0 22px rgba(34,197,94,.6); }
}
.tchat-panel.tchat-notify {
  border-color:#1f7a4d;
  box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 18px rgba(34,197,94,.35);
}
/* 📱 мобильные ручки — ПОСЛЕ базовых .tchat-rz-* (иначе их перебивали
   одноимённые правила v3 ниже по файлу: специфичность та же, а побеждает
   последний). На телефоне чат тянется так же, как на десктопе, но цели —
   под палец: нижняя ручка превращается в видимую «губу», висящую под
   панелью. Тонкая полоска снаружи края не ловилась: палец мажет, а скролл
   страницы съедал жест. Губа не перекрывает поле ввода — висит ниже края. */
@media (max-width: 640px) {
  #terminal-chat .tchat-rz-n { height: 16px; top:-6px; }
  #terminal-chat .tchat-rz-s { bottom:-26px; left:18%; right:18%; height:26px;
    background:#162040; border:1px solid #2d4370; border-top:0;
    border-radius:0 0 12px 12px; cursor:ns-resize; }
  #terminal-chat .tchat-rz-s::after {
    content:"⇕"; position:absolute; inset:0; display:flex;
    align-items:center; justify-content:center; color:#8aa0c8;
    font-size:13px; font-weight:700;
  }
  #terminal-chat .tchat-rz-w, #terminal-chat .tchat-rz-e { width: 22px; }
  #terminal-chat .tchat-rz-ne, #terminal-chat .tchat-rz-nw { width: 36px; height: 36px; top:-10px; }
  #terminal-chat .tchat-rz-sw { width: 40px; height: 40px; bottom:-14px; left:-10px; }
  #terminal-chat .tchat-rz-se { width: 44px; height: 44px; bottom:-14px; right:-10px; }
}

/* 🌐 Чат на всех страницах: плавающая кнопка внизу справа, когда нет шапки терминала */
#terminal-chat .tchat-toggle:not(.hidden) {
  position: fixed;
  bottom: 18px;
  right: 18px;
  top: auto;
  left: auto;
  z-index: 1201;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  background: #101a2e;
  border: 1px solid #2d4370;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
#terminal-chat.open .tchat-toggle:not(.hidden) { display:none !important; }
@media (max-width: 640px) {
  #terminal-chat .tchat-toggle:not(.hidden) { bottom: 12px; right: 12px; }
}

/* v8 per-user: support threads list */
#tchat-support-threads { max-height: 220px; overflow-y:auto; border-bottom:1px solid #1e2e55; background:#0a1226; display:flex; flex-direction:column; }
#tchat-support-threads.hidden { display:none !important; }
.tchat-dm-item.active { border-color:#35508a; background:#162040; }
.tchat-msg.guest { border-color:#2a3a5a; background:#0f1a2e; }
.tchat-tab.hidden { display:none !important; }
/* v9 collapsible threads header */
.tchat-threads-head { user-select:none; }
.tchat-threads-head:hover { background:#132040 !important; }
.tchat-threads-head code { color:#8aa0c8; }