/*
 * lk.css - личный кабинет клиента (lk.html, app/web/lk.js) в оформлении сайта nppsd.ru.
 *
 * Снято с самого сайта (тема automobile-hub, 25.09.2026): шрифты Roboto (текст) и Oswald
 * (заголовки, меню - прописными, разрядка 1px); синяя шапка #005EEB с белым логотипом;
 * чёрная полоса меню #151515, которая при прокрутке открепляется и едет сверху с тенью;
 * акцент #e43315 (красный: активный пункт, тревога); контейнер 1140 px с отступами 15 px;
 * подвал #151515 / #090909 с серой подписью. Светлая тема одна, переключателя нет.
 *
 * Переменные --line/--field/--ink/--accent/--panel/--muted/--radius нужны виджету номера
 * телефона (phone-input.js): он рисует себя через них, здесь они заданы под сайт.
 */
:root {
  --site-blue: #005EEB;
  --site-blue-dark: #0049b8;
  --site-red: #e43315;
  --site-black: #151515;
  --site-foot: #090909;
  --site-gray: #a2a2a2;
  --site-text: #333333;
  --site-muted: #676767;
  --site-line: #e2e2e2;
  --site-well: #f4f4f4;
  --font-text: "Roboto", Arial, sans-serif;
  --font-head: "Oswald", "Arial Narrow", sans-serif;
  /* для phone-input.js */
  --line: #d5d5d5; --field: #ffffff; --ink: #333333; --accent: #005EEB; --panel: #ffffff;
  --panel-2: #f4f4f4; --muted: #676767; --radius: 2px; --red: #e43315;
}

* { box-sizing: border-box; }
/* Высота тела - не меньше экрана, но НЕ ровно экран: при height:100% колонка флекса
   сжимала «гнездо» полосы меню до 52px, и чёрная черта полосы (2px) уходила под
   карточку переписки (ошибка 25.09.2026 - «пропала чёрная полоса в хедере»). */
body.lk-page { margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: #fff; color: var(--site-text); font: 15px/1.5 var(--font-text); }
a { color: var(--site-blue); }
button, input, textarea { font-family: inherit; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 500; color: var(--site-black); margin: 0; }

.site-container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 15px; }

/* --- шапка сайта: синяя, логотип по центру ---------------------------------------- */
.site-head { background: var(--site-blue); padding: 15px 0; flex-shrink: 0; }
.site-head .site-container { display: flex; justify-content: center; align-items: center; }
.site-logo { display: inline-block; line-height: 0; }
.site-logo img { display: block; height: 46px; width: auto; max-width: 90vw; }
/* Логотип не загрузился (стенд без сети) - на его месте белая надпись alt тем же шрифтом. */
.site-logo img { color: #fff; font: 700 30px/46px var(--font-head); letter-spacing: 2px; }

/* --- чёрная полоса меню; при прокрутке открепляется (класс .scrolled ставит lk.js) ---- */
.site-bar-slot { min-height: 54px; flex-shrink: 0; }   /* 52 + чёрная черта 2px */
/* Как на сайте: в обычном состоянии полоса СВЕТЛАЯ (белый фон, серые пункты, светлые
   разделители #f4f4f4, активный пункт красный, снизу чёрная кромка 2px); при прокрутке
   открепляется и становится чёрной с тенью (правило техлида 25.09.2026). */
.site-bar { background: #fff; border-bottom: 2px solid var(--site-black);
  font-family: var(--font-head); transition: background .3s ease, box-shadow .3s ease; }
.site-bar.scrolled { position: fixed; top: 0; left: 0; width: 100%; z-index: 99;
  background: var(--site-black); box-shadow: 0 0 20px 10px rgba(0, 0, 0, .25); }
.site-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.site-menu { display: flex; align-items: stretch; }
.site-menu-item { display: inline-block; padding: 17px 14px; border: 0; background: none;
  color: var(--site-gray); font: 500 12px/18px var(--font-head); letter-spacing: 1px;
  text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap;
  border-left: 2px solid #f4f4f4; }
.site-menu-item:last-child { border-right: 2px solid #f4f4f4; }
.site-menu-item[hidden] { display: none !important; }
.site-menu-item:hover { color: var(--site-red); }
.site-menu-item.is-on { color: var(--site-red); }
.site-bar-right { display: flex; align-items: center; gap: 0; }
.site-bar-right .site-menu-item { border-left: 2px solid #f4f4f4; border-right: 0; }
/* В закреплённом (чёрном) состоянии разделители тёмные, пункты те же серые. */
.site-bar.scrolled .site-menu-item, .site-bar.scrolled .site-bar-right .site-menu-item {
  border-left-color: #2a2a2a; }
.site-bar.scrolled .site-menu-item:last-child { border-right-color: #2a2a2a; }

/* Язык: одна кнопка с выпадающим списком, в полосе меню. */
.lk-lang { position: relative; display: flex; }
.lk-lang[hidden] { display: none !important; }
.lk-lang-btn { display: inline-flex; align-items: center; gap: 6px; padding: 17px 14px; border: 0;
  background: none; color: var(--site-gray); font: 500 12px/18px var(--font-head);
  letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.lk-lang-btn:hover { color: var(--site-red); }
.lk-lang-caret { font-size: 9px; }
.lk-lang-menu { position: absolute; top: 100%; right: 0; z-index: 120; min-width: 150px;
  display: flex; flex-direction: column; padding: 4px 0; background: #1c1c1c; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.lk-lang-menu[hidden] { display: none !important; }
.lk-lang-menu button { text-align: left; padding: 9px 16px; border: 0; background: transparent;
  color: #d0d0d0; font: 400 13px/18px var(--font-text); cursor: pointer; }
.lk-lang-menu button:hover { background: #2a2a2a; color: #fff; }
.lk-lang-menu button.is-on { color: var(--site-red); }

/* --- кнопки и поля в стиле сайта ------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px; border: 1px solid #cfcfcf; border-radius: var(--radius); background: #fff;
  color: var(--site-text); font: 500 13px/20px var(--font-head); letter-spacing: 1px;
  text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn:hover { border-color: var(--site-blue); color: var(--site-blue); }
.btn.primary { background: var(--site-blue); border-color: var(--site-blue); color: #fff; }
.btn.primary:hover { background: var(--site-blue-dark); border-color: var(--site-blue-dark); color: #fff; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn[aria-busy="true"] { opacity: .85; cursor: progress; }
/* Крутящийся значок ожидания в кнопке (пока ждём ответ шлюза) */
.lk-spin { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%;
  animation: lk-spin .8s linear infinite; }
.lk-link .lk-spin { border-color: rgba(0, 94, 235, .3); border-top-color: var(--site-blue); }
@keyframes lk-spin { to { transform: rotate(360deg); } }
input, textarea { padding: 10px 12px; border: 1px solid #d5d5d5; border-radius: var(--radius);
  background: #fff; color: var(--site-text); font: 15px/1.4 var(--font-text); }
input:focus, textarea:focus { outline: none; border-color: var(--site-blue);
  box-shadow: 0 0 0 2px rgba(0, 94, 235, .15); }
.error { color: var(--site-red); font-size: 13px; min-height: 0; }
.error:not(:empty) { padding: 10px 0 0; }

/* --- вход ---------------------------------------------------------------------------- */
.login-view { flex: 1; padding: 48px 0 64px; }
.login-view[hidden] { display: none; }
.login-card { max-width: 440px; margin: 0 auto; padding: 32px 30px 28px; border: 1px solid var(--site-line);
  background: #fff; }
/* Вкладки входа: как пункты меню сайта - Oswald прописными, серые, активная красная с
   красной чертой снизу; полоса идёт во всю ширину карточки поверх её отступов. */
.login-tabs { display: flex; margin: -32px -30px 24px; border-bottom: 1px solid var(--site-line); }
.login-tabs .lg-tab { flex: 1; padding: 14px 10px; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px; background: transparent; color: var(--site-gray);
  font: 500 12px/18px var(--font-head); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.login-tabs .lg-tab:hover { color: var(--site-red); }
.login-tabs .lg-tab.is-on { color: var(--site-red); border-bottom-color: var(--site-red); }
.login-title { font-size: 28px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.login-sub { margin: 0 0 22px; color: var(--site-muted); font-size: 14px; }
.login-title[hidden], .login-sub[hidden] { display: none; }
.login-pane { display: flex; flex-direction: column; gap: 0; }
.login-pane[hidden] { display: none !important; }
.login-fields { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1;
  margin-bottom: 16px; }
.login-fields input { width: 100%; }
.login-go { width: 100%; padding: 11px 18px; }
.lk-note { color: var(--site-muted); font-size: 13px; margin: 0; }
.lk-link { background: none; border: 0; color: var(--site-blue); font: 14px var(--font-text);
  cursor: pointer; padding: 0; text-align: left; }
.lk-link:hover { text-decoration: underline; }
.lk-link:disabled { color: var(--site-muted); cursor: default; text-decoration: none; }
/* виджет номера телефона: поле во всю ширину карточки */
#lkPhoneSlot .pi-wrap { display: flex; width: 100%; font-size: 15px; }
#lkPhoneSlot .pi-input { flex: 1; min-width: 0; padding: 10px 12px; font-size: 15px; }
#lkPhoneSlot .pi-country-btn { padding: 10px 12px; font-size: 14px; }

/* --- кабинет ------------------------------------------------------------------------- */
.lk-view { flex: 1; background: #fff; }
.lk-view[hidden] { display: none; }
.lk-wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 28px 15px 48px; display: flex;
  flex-direction: column; gap: 18px; }
.lk-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lk-title { font: 500 30px/1.15 var(--font-head); color: var(--site-black); text-transform: uppercase;
  letter-spacing: 1px; }
.lk-sub { color: var(--site-muted); font-size: 14px; }

.lk-card { background: #fff; border: 1px solid var(--site-line); padding: 18px 20px; }
.lk-card h3 { font-size: 18px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 12px; }
.lk-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; flex-wrap: wrap; }
.lk-card-head h3 { margin: 0; }
.lk-num { color: var(--site-muted); font-weight: 500; }

/* Список обращений / приборов: строки с синей кнопкой справа. */
.lk-devs { display: flex; flex-direction: column; gap: 8px; }
.lk-dev { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--site-line); background: var(--site-well); }
.lk-dev-name { font-weight: 500; color: var(--site-black); }
.lk-dev-sn { color: var(--site-muted); font-size: 13px; }
.lk-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; background: var(--site-blue); color: #fff; }
/* Ждёт ответа поддержки: красная кромка слева и красная строка под названием. */
.lk-dev.has-new { border-left: 3px solid var(--site-red); }
.lk-dev-alert { margin-top: 3px; font-size: 13px; color: var(--site-red); display: flex;
  align-items: center; gap: 6px; }
.lk-dev-alert::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--site-red); flex-shrink: 0; }

/* Приборов нет / обращений нет */
.lk-empty-card { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 26px 18px; text-align: center; }
.lk-empty-title { font: 500 18px var(--font-head); color: var(--site-black); text-transform: uppercase; letter-spacing: 1px; }
.lk-empty-text { color: var(--site-muted); font-size: 14px; max-width: 460px; line-height: 1.5; }
.lk-empty-line { color: var(--site-muted); font-size: 14px; line-height: 1.5; }
.lk-mail { color: var(--site-blue); text-decoration: none; }
.lk-mail:hover { text-decoration: underline; }

/* Форма нового обращения */
.lk-new { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.lk-lbl { font: 500 12px var(--font-head); letter-spacing: 1px; text-transform: uppercase; color: var(--site-muted); }
.lk-new input, .lk-new textarea { width: 100%; }
.lk-new .lk-bad { border-color: var(--site-red); }
.lk-new textarea { min-height: 120px; resize: vertical; }
.lk-new-go { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.lk-new-go .btn { white-space: nowrap; }
.lk-new-dev { margin-top: 2px; }
.lk-clip-btn { width: 40px; height: 40px; padding: 0; flex: none; color: var(--site-muted); }
.lk-clip-btn:hover { color: var(--site-blue); }

/* --- переписка ----------------------------------------------------------------------- */
.lk-view.lk-chatting { display: flex; flex-direction: column; }
.lk-view.lk-chatting .lk-wrap { flex: 1; min-height: 0; }
.lk-chatting .lk-chat { flex: 1; min-height: 0; }
/* Лента переписки не длиннее экрана: поле ответа всегда под рукой, лента листается внутри. */
.lk-chatting .lk-msgs { flex: 1; max-height: 62vh; min-height: 320px; }
.lk-chat { display: flex; flex-direction: column; gap: 12px; }
/* Карточка переписки лежит в разметке всегда и до открытия чата скрыта атрибутом hidden;
   display: flex выше его перебивал, и внизу висела пустая рамка. */
.lk-chat[hidden] { display: none !important; }
.lk-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lk-msgs { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow: auto;
  padding: 12px; background: var(--site-well); border: 1px solid var(--site-line); }
.lk-msg { max-width: 78%; padding: 8px 12px; border-radius: 6px; background: #fff;
  border: 1px solid var(--site-line); white-space: pre-wrap; word-break: break-word; }
.lk-msg.mine { align-self: flex-end; background: var(--site-blue); color: #fff; border-color: var(--site-blue); }
.lk-msg .who { display: block; font: 500 11px var(--font-head); letter-spacing: 1px; text-transform: uppercase;
  opacity: .75; margin-bottom: 2px; }
.lk-msg .at { display: block; font-size: 10px; opacity: .6; margin-top: 3px; text-align: right; }
.lk-empty { color: var(--site-muted); font-size: 14px; padding: 12px; text-align: center; }

/* Вложения: чипы выбранных файлов, файлы и фото внутри сообщений. */
.lk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 13px;
  background: var(--site-well); border: 1px solid var(--site-line); border-radius: 999px; }
.lk-chip-x { border: 0; background: none; color: var(--site-muted); cursor: pointer; font-size: 16px;
  line-height: 1; padding: 0; }
.lk-chip-x:hover { color: var(--site-red); }
.lk-file-size { color: inherit; opacity: .7; font-size: 11px; }
.lk-files { display: flex; flex-direction: column; gap: 4px; }
.lk-files + .lk-text { display: block; margin-top: 6px; }   /* текст под картинкой */
.lk-file { text-align: left; border: 1px dashed currentColor; background: none; color: inherit;
  border-radius: 4px; padding: 4px 8px; font: inherit; font-size: 13px; cursor: pointer; opacity: .9; }
.lk-file:hover { opacity: 1; }
.lk-photo { display: block; max-width: 100%; }
.lk-photo img { display: block; max-width: 100%; max-height: 260px; border-radius: 4px; cursor: zoom-in; }
.lk-photo img:not([src]) { width: 200px; min-height: 140px; background: rgba(127, 127, 127, .18); }
.lk-photo-lost { display: inline-block; font-size: 12px; opacity: .8; border: 1px dashed currentColor;
  border-radius: 4px; padding: 4px 8px; }
.lk-photo-overlay { position: fixed; inset: 0; z-index: 1400; background: rgba(0, 0, 0, .85);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 16px; cursor: zoom-out; }
.lk-photo-overlay .lk-po-stage { display: flex; align-items: center; justify-content: center;
  max-width: 100%; max-height: 82vh; }
.lk-photo-overlay img { max-width: 96vw; max-height: 80vh; border-radius: 4px; cursor: default; }
.lk-po-tools { display: flex; gap: 8px; }
.lk-po-btn { background: rgba(0, 0, 0, .55); color: #fff; border: 1px solid rgba(255, 255, 255, .35); cursor: pointer; }
.lk-po-btn:hover { background: rgba(0, 0, 0, .75); color: #fff; border-color: #fff; }

/* Поле ответа: скрепка внутри поля, справа сверху; кнопка «Отправить» справа. */
.lk-box { position: relative; flex: 1; display: flex; }
.lk-clip { position: absolute; top: 6px; right: 6px; display: flex; align-items: center;
  justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 4px;
  background: none; color: var(--site-muted); cursor: pointer; }
.lk-clip:hover { background: var(--site-well); color: var(--site-blue); }
.lk-send { display: flex; gap: 8px; align-items: flex-end; }
.lk-send textarea { flex: 1; height: 76px; min-height: 76px; max-height: 200px; resize: vertical;
  padding: 10px 42px 10px 12px; }

/* Плашка ошибки вместо alert(): внизу экрана, сама исчезает. */
.lk-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1500;
  max-width: min(92vw, 560px); padding: 12px 18px; font-size: 14px;
  background: var(--site-red); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }

/* --- подвал ---------------------------------------------------------------------------- */
.site-foot { background: var(--site-black); margin-top: auto; flex-shrink: 0; }
.site-info { background: var(--site-foot); padding: 15px 0; }
.site-info p { margin: 0; text-align: center; color: var(--site-gray); font-size: 14px; }

@media (max-width: 720px) {
  .login-tabs { margin: -24px -18px 20px; }
  .site-logo img { height: 36px; }
  .site-menu-item, .lk-lang-btn { padding: 15px 10px; }
  .lk-wrap { padding: 18px 12px 32px; }
  .lk-title { font-size: 24px; }
  .lk-card { padding: 14px 14px; }
  .lk-dev { flex-direction: column; align-items: flex-start; }
  .lk-dev .btn { width: 100%; }
  .lk-msg { max-width: 92%; }
  .login-card { padding: 24px 18px; border: 0; }
  .login-view { padding: 24px 0 40px; }
}