@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
/* ═══════════════════════════════════════════
   ПАЛИТРА — меняй только здесь
   ═══════════════════════════════════════════ */
:root {
  /* Фоны (от тёмного к светлому) */
  --bg:    #1e1c18;
  --s1:    #24221e;
  --s2:    #2c2a24;
  --s3:    #34322c;
  /* Бордеры */
  --bd:    #3a3830;
  --bd2:   #46423a;
  /* Акценты */
  --ac:    #c8a060;
  --ac-h:  #b89050;
  --ac2:   #b87868;
  /* Семантические */
  --grn:   #98c078;
  --red:   #d88070;
  /* Текст */
  --tx:    #ede6d8;
  --mu:    #9a8a70;
  --mu2:   #b8a890;
  /* Размеры */
  --r:     12px;
  --r-sm:  8px;
  --r-lg:  14px;
  --r-pill:20px;
  /* Шрифт */
  --font:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'JetBrains Mono', monospace;
  /* Прозрачности для overlay */
  --a-ac:   rgba(138, 122, 96, .15);
  --a-ac2:   rgba(219, 39, 119, .15);
  --a-gr:    rgba(5, 150, 105, .15);
  --a-red:   rgba(192, 96, 112, .15);
  --a-blue:  rgba(59, 130, 246, .15);
  --a-white: rgba(255, 255, 255, .04);
  --blue:  #8a9ab0;
  --blue-brand: #3b82f6;
  --gr:    #6eaa5a;
  --warn:  #faad14;
  --mu3:   #887860;
  --mu4:   #9a8a70;
  --bg-chat: #1e1c18;
  --draft:  #8ab870;
  --fs-xs: 9px;
  --fs-sm: 11px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 18px;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  --lh-tight: 1.2;
  --lh-base: 1.5;
}
/* ═══════════════════════════════════════════
   БАЗОВЫЕ СТИЛИ
   ═══════════════════════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font); letter-spacing: -0.01em; background: var(--bg); color: var(--tx); min-height: 100vh; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 4px; }
/* ═══════════════════════════════════════════
   TOPBAR (users.php, drivers.php)
   ═══════════════════════════════════════════ */
.topbar { background: var(--s1); border-bottom: 1px solid var(--bd); padding: 0 24px; height: 38px; display: flex; align-items: center; justify-content: space-between; }
.topbar-title { font-size: 12px; font-weight: 600; color: var(--mu2); letter-spacing: .3px; }
.topbar-links { display: flex; gap: 16px; }
.topbar-links a { font-size: 11px; color: var(--mu); text-decoration: none; transition: color .15s; }
.topbar-links a:hover { color: var(--tx); }
/* ═══════════════════════════════════════════
   КОНТЕЙНЕР, КАРТОЧКИ, ТАБЛИЦЫ
   ═══════════════════════════════════════════ */
.container { padding: 24px 32px; }
.notice { padding: 10px 16px; border-radius: var(--r); font-size: 13px; margin-bottom: 20px; }
.notice-ok  { background: var(--a-gr);  border: 1px solid rgba(5,150,105,.3);  color: var(--grn); }
.notice-err { background: var(--a-ac2); border: 1px solid rgba(184,120,104,.2); color: var(--ac2); }
.card { background: var(--s2); border: 1px solid var(--bd); border-radius: var(--r); margin-bottom: 20px; overflow: hidden; }
.card-head { padding: 13px 20px; border-bottom: 1px solid var(--bd); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-head h2 { font-size: 11px; font-weight: 600; color: var(--mu2); text-transform: uppercase; letter-spacing: .7px; }
.card-body { padding: 20px; }
table { width: 100%; border-collapse: collapse; }
th { padding: 10px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--mu); text-transform: uppercase; letter-spacing: .6px; border-bottom: 1px solid var(--bd); }
td { padding: 12px 16px; font-size: 13px; color: var(--mu2); border-bottom: 1px solid rgba(40,36,32,.5); vertical-align: middle; }
tr:last-child td { border: none; }
tr:hover td { background: rgba(20,18,16,.5); }
/* ═══════════════════════════════════════════
   КНОПКИ
   ═══════════════════════════════════════════ */
.btn { padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); text-decoration: none; white-space: nowrap; }
.btn-sm { padding: 5px 11px; font-size: 12px; border-radius: var(--r-sm); }
.btn-primary { background: var(--ac); color: #fff; border-color: var(--ac); }
.btn-primary:hover { background: var(--ac-h); }
.btn-ghost { background: var(--s1); color: var(--tx); border-color: var(--bd); }
.btn-ghost:hover { background: var(--bd); }
.btn-danger { background: var(--a-ac2); color: var(--ac2); border-color: rgba(184,120,104,.2); }
.btn-danger:hover { background: rgba(184,120,104,.2); }
.btn-warn { background: var(--a-ac); color: var(--ac); border-color: rgba(138,122,96,.25); }
.btn-warn:hover { background: rgba(138,122,96,.25); }
.btn-ok { background: var(--a-gr); color: var(--grn); border-color: rgba(5,150,105,.25); }
.btn-ok:hover { background: rgba(5,150,105,.25); }
/* ═══════════════════════════════════════════
   БЕЙДЖИ, ТЕГИ
   ═══════════════════════════════════════════ */
.badge { padding: 3px 10px; border-radius: var(--r-pill); font-size: 9px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; border: 1px solid transparent; }
.badge-green { background: rgba(5,150,105,.15); color: var(--grn); border-color: rgba(5,150,105,.3); }
.badge-blue  { background: var(--a-blue); color: var(--mu2); border-color: rgba(59,130,246,.3); }
.badge-gray  { background: rgba(100,116,139,.15); color: var(--tx); border-color: rgba(100,116,139,.3); }
.badge-red   { background: var(--a-ac2); color: var(--ac2); border-color: rgba(184,120,104,.2); }
.tag { padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; border: 1px solid transparent; }
.tag-me { background: var(--a-ac); color: var(--ac); border-color: rgba(138,122,96,.3); }
/* ═══════════════════════════════════════════
   ФИЛЬТРЫ (pages), ПОИСК, ФОРМЫ
   ═══════════════════════════════════════════ */
.page-filter-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.page-filter-tab { font-size: 12px; color: var(--mu); text-decoration: none; padding: 4px 12px; border-radius: var(--r-sm); border: 1px solid transparent; transition: all .15s; cursor: pointer; }
.page-filter-tab:hover, .page-filter-tab.active { color: var(--tx); background: var(--s3); border-color: var(--bd2); }
.search-wrap { display: flex; gap: 8px; align-items: center; flex: 1; max-width: 400px; }
.search-wrap input { background: var(--s1); border: 1px solid var(--bd); border-radius: 10px; padding: 7px 13px; color: var(--tx); font-size: 12px; font-family: var(--font); outline: none; transition: border .15s; width: 200px; }
.search-wrap input:focus { border-color: var(--ac); }
.search-wrap input::placeholder { color: var(--mu); }
.field label { display: block; font-size: 12px; color: var(--mu2); margin-bottom: 7px; font-weight: 500; }
.field input, .pw-input { background: var(--s1); border: 1px solid var(--bd); border-radius: 10px; padding: 10px 14px; color: var(--tx); font-size: 13px; font-family: var(--font); outline: none; transition: border .15s; width: 100%; }
.pw-input { width: 140px; padding: 6px 10px; font-size: 12px; border-radius: var(--r-sm); }
.field input:focus, .pw-input:focus { border-color: var(--ac); }
.field input::placeholder, .pw-input::placeholder { color: var(--mu); }
.form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.b24-links { display: flex; gap: 4px; flex-wrap: wrap; }
.b24-link { color: var(--mu2); text-decoration: none; font-size: 11px; padding: 3px 9px; background: var(--s3); border-radius: 6px; border: 1px solid var(--bd); transition: all .15s; white-space: nowrap; }
.b24-link:hover { color: var(--tx); border-color: var(--bd2); }
.inline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.select-status { background: var(--s1); border: 1px solid var(--bd); border-radius: 6px; padding: 4px 8px; color: var(--mu2); font-size: 11px; outline: none; cursor: pointer; transition: border .2s; }
.select-status:focus { border-color: var(--bd2); }
/* ═══════════════════════════════════════════
   DASHBOARD — LAYOUT
   ═══════════════════════════════════════════ */
body.dashboard { background: var(--bg); color: var(--tx); height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.main { display: flex; flex: 1; overflow: hidden; }
/* ═══════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════ */
.sidebar { width: 300px; background: var(--s1); border-right: 1px solid var(--bd); display: flex; flex-direction: column; flex-shrink: 0; height: 100vh; }
.sidebar-search { padding:10px 14px 8px; border-bottom:1px solid rgba(190,150,100,.06); }
.sidebar-search input { width:100%; background:transparent; border:none; padding:4px 2px; color:var(--mu2); font-size:12px; outline:none; transition:color .2s; font-family:inherit; }
.sidebar-search input:focus { color:var(--tx); }
.sidebar-search input::placeholder { color:var(--mu3); }
.user-list { overflow-y: auto; flex: 1; }
/* Фильтры в sidebar — подчёркивание */
.filter-tabs { padding:4px 14px 6px; border-bottom:1px solid rgba(190,150,100,.08); display:flex; gap:6px; flex-wrap:wrap; }
.filter-tab { font-size: 10px; color:var(--mu4); cursor: pointer; padding: 2px 0; border-bottom: 2px solid transparent; transition: color .15s; border-radius: 0; }
.filter-tab.active { color: var(--tx); border-bottom: 2px solid var(--ac); background: none; border-bottom-color: var(--ac); }
/* USER ITEMS */
.user-item { padding: 9px 14px; border-bottom: 1px solid rgba(190,150,100,.06); cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all .18s ease; border-left: 3px solid transparent; }
.user-item:hover { background: rgba(190,150,100,.06); }
.user-item.active { background:rgba(138,122,96,.08); }
.user-item.pinned { background:rgba(138,122,96,.06); border-left-color: var(--ac); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: white; flex-shrink: 0; transition: all .3s; }
.user-info { flex: 1; min-width: 0; pointer-events: none; }
.user-name { font-size: 13px; font-weight: 500; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.user-last { font-size: 11px; color: var(--mu); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.user-time { font-size: 10px; color:var(--mu4); }
.unread-dot { min-width:16px; height:16px; background:rgba(190,70,90,.65); border-radius:50%; cursor:pointer; }
.user-item .mark-unread-btn { display: none; background: none; border: none; cursor: pointer; color: var(--mu); padding: 2px; border-radius: 4px; line-height: 1; transition: color .2s; font-size: 14px; }
.user-item:hover .mark-unread-btn { display: flex; align-items: center; }
.user-item .mark-unread-btn:hover { color: var(--mu2); }
.draft-label { font-size:10px; overflow:hidden; max-width:160px; display:block; }
.draft-label span { font-size:10px; }
/* ═══════════════════════════════════════════
   ЧАТ — ШАПКА, СООБЩЕНИЯ
   ═══════════════════════════════════════════ */
.chat { flex: 1; display: flex; flex-direction: column; overflow: hidden; background:var(--bg-chat); position: relative; }
.driver-top-panel { display:flex; align-items:center; gap:8px; padding:6px 24px; background:var(--s1); border-bottom:1px solid var(--bd); flex-shrink:0; white-space:nowrap; }
.meta-link { color:var(--mu); text-decoration:none; font-size:10px; font-weight:500; padding:2px 10px; border-radius:8px; background:rgba(190,150,100,.06); border:1px solid rgba(255,255,255,.08); transition:all .2s; }
.meta-link:hover { color:var(--tx); background:rgba(190,150,100,.1); }
.bar-group a, .bar-group span { color: var(--mu); text-decoration: none; padding: 6px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; transition: all .2s; cursor: pointer; }
.bar-group a:hover { color: var(--tx); background: var(--bd); }
.bar-group span { cursor: default; }
.bar-group span:hover { background: none; }
.messages { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; background:var(--bg-chat); }
.load-more { text-align: center; padding: 10px; color: var(--mu); font-size: 12px; }
.load-more span { background: var(--bd); padding: 5px 16px; border-radius: var(--r-pill); border: 1px solid var(--bd); }
/* ═══════════════════════════════════════════
   ПУЗЫРИ СООБЩЕНИЙ
   ═══════════════════════════════════════════ */
.msg { display: flex; gap: 6px; align-items: flex-start; max-width: 78%; position: relative; }
@keyframes msgSlide { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.msg.anim { animation: msgSlide .2s ease; }
.msg-body-wrap { display: flex; flex-direction: column; min-width: 0; }
.msg-bubble { padding: 7px 12px; min-width: 32px; border-radius: var(--r-lg); font-size: 13px; line-height: 1.45; word-break: break-word; }
.msg-time { font-size:9px; color:var(--mu3); margin-top:1px; opacity:1; transition:color .15s; line-height:1.2; }

.msg:hover .msg-time { opacity:1; color:var(--mu2); }
.msg-sender { font-size: 11px; color:var(--mu4); opacity: .6; margin-bottom: 2px; text-align: right; padding-right: 2px; font-weight: 500; }

/* Водитель (слева) */
.msg-user .msg-bubble { background: #2c2a24; border: 1px solid rgba(190,150,100,.1); color: var(--tx); border-radius: 12px 12px 12px 3px; padding: 9px 14px; box-shadow: none; font-size: 13px; line-height: 1.5; }
/* Диспетчер (справа) */
.msg-admin { align-self: flex-end; flex-direction: row-reverse; }
.msg-admin .msg-body-wrap { align-items: flex-end; }
.msg-admin .msg-bubble { background:rgba(200,160,96,.08); border:1px solid rgba(190,160,110,.1); color:var(--tx); border-radius:12px 12px 3px 12px; padding:9px 14px; font-size:13px; line-height:1.5; }
/* Действие / ошибка / успех */
.msg-btn .msg-bubble { background: none; border: 1px dashed rgba(190,150,100,.1); color:var(--mu4); font-style: normal; font-size: 11px; padding: 3px 8px; font-weight: 400; border-radius: 6px; }
.msg-success .msg-bubble { background: rgba(52, 211, 153, .06); border: 1px solid rgba(52, 211, 153, .15); color: var(--grn); border-radius: 10px; }
/* ═══════════════════════════════════════════
   ЦИТИРОВАНИЕ
   ═══════════════════════════════════════════ */
.msg-quote { background: var(--a-blue); border-left: 2px solid var(--bd2); border-radius: 6px; padding: 5px 10px; margin-bottom: 6px; max-width: 280px; }
.msg-quote-name { display: block; font-size: 10px; font-weight: 600; color: var(--mu); margin-bottom: 2px; }
.msg-quote-text { display: block; font-size: 12px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.reply-bar { display: none; padding: 6px 20px 0; background: var(--s1); }
.reply-bar.visible { display: block; }
.reply-bar-inner { display: flex; align-items: center; gap: 8px; background: var(--a-blue); border-left: 2px solid var(--bd2); border-radius: 6px; padding: 5px 10px; }
.reply-bar-texts { flex: 1; min-width: 0; }
.reply-bar-name { font-size: 10px; font-weight: 600; color: var(--mu); margin-bottom: 1px; }
.reply-bar-text { font-size: 12px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-cancel { background: none; border: none; color: var(--mu); cursor: pointer; font-size: 14px; padding: 2px 4px; flex-shrink: 0; line-height: 1; transition: color .2s; }
.reply-cancel:hover { color: var(--red); }
.msg-with-reply { display: flex; align-items: flex-start; gap: 4px; }
.msg-admin .msg-with-reply { flex-direction: row-reverse; }
.msg-reply-btn { background: none; border: none; cursor: pointer; color: var(--mu); padding: 4px; border-radius: 6px; transition: all .2s; opacity: 0; flex-shrink: 0; margin-top: 6px; display: flex; }
.msg-with-reply:hover .msg-reply-btn { opacity: .5; }
.msg-reply-btn:hover { color: var(--mu2); background: rgba(190,150,100,.08); opacity: 1; }
/* ═══════════════════════════════════════════
   РАЗДЕЛИТЕЛИ, ПУСТОЙ ЧАТ
   ═══════════════════════════════════════════ */
.day-divider { display:flex; align-items:center; margin:16px 0 8px; padding:0; }
.day-divider::before, .day-divider::after { content:""; flex:1; border-top:1px solid rgba(190,150,100,.08); }
.day-divider span { font-size:9px; font-weight:500; letter-spacing:1px; text-transform:uppercase; color:var(--mu4); padding:3px 12px; white-space:nowrap; }
.empty-chat { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color:var(--mu3); gap: 16px; }
.empty-chat span { font-size: 36px; opacity: .4; }
.empty-chat p { font-size: 13px; background: rgba(30,28,24,.6); padding: 8px 20px; border-radius: var(--r-pill); border: 1px solid var(--bd); color:var(--mu4); }
/* ═══════════════════════════════════════════
   ВВОД СООБЩЕНИЯ
   ═══════════════════════════════════════════ */
.input-area { padding: 10px 24px; background: var(--s1); border-top: 1px solid var(--bd); display: flex; gap: 4px; align-items: flex-end; flex-shrink: 0; }
.input-area input[type=file] { display: none; }
.msg-input-wrap { flex: 1; }
#msgInput { width: 100%; background: var(--s1); border: none; border-radius: var(--r-lg); padding: 9px 16px; color: var(--mu2); font-size: 14px; outline: none; transition: border-color .2s; resize: none; min-height: 40px; max-height: 140px; overflow-y: auto; line-height: 1.5; font-family: inherit; display: block; }
#msgInput:focus { border-color: var(--bd2); }
#msgInput::placeholder { color: var(--mu); }
.attach-btn, .record-btn { background: none; border: none; cursor: pointer; color: var(--mu); padding: 8px; border-radius: var(--r); transition: all .15s; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.attach-btn:hover, .record-btn:hover { color: var(--mu2); background: var(--bd); }
.send-btn { background: var(--s2); color: var(--ac); border: 1px solid var(--bd2); border-radius: var(--r-lg); padding: 10px 14px; cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center; min-width: 44px; flex-shrink: 0; opacity: .4; }
.send-btn:hover { background: var(--bd2); color: var(--tx); opacity: .8; }
.send-btn:hover svg { stroke: var(--tx); }
.send-btn:active { transform: scale(0.9); }
.send-btn:disabled { background: var(--s2); border-color: var(--bd); cursor: not-allowed; opacity: 0.35; }
.file-preview { display: flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--bd); border-radius: 10px; border: 1px solid var(--bd); font-size: 12px; color: var(--mu); flex-shrink: 0; max-width: 180px; }
.file-preview .file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-preview .remove-file { cursor: pointer; color: var(--mu); font-size: 13px; flex-shrink: 0; }
.file-preview .remove-file:hover { color: var(--red); }
/* ═══════════════════════════════════════════
   КНОПКИ СКРОЛЛА, УВЕДОМЛЕНИЯ
   ═══════════════════════════════════════════ */
.scroll-down-btn, .scroll-up-btn { position: absolute; right: 24px; width: 34px; height: 34px; border-radius: 50%; background: var(--bd); border: 1px solid var(--bd2); color: var(--mu); cursor: pointer; display: none; align-items: center; justify-content: center; transition: all .2s; z-index: 10; }
.scroll-down-btn { bottom: 80px; }
.scroll-up-btn { bottom: 122px; }
.scroll-up-btn.visible, .scroll-down-btn.visible { display: flex; }

.scroll-badge { position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px; background: rgba(184,100,100,.9); color: #fff; font-size: 10px; font-weight: 600; border-radius: 9px; display: none; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 2px 8px rgba(184,100,100,.4); }
.scroll-badge.visible { display: flex; }

/* ═══════════════════════════════════════════
   ФАЙЛЫ, КАРТИНКИ В ЧАТЕ
   ═══════════════════════════════════════════ */
.msg-file { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--a-white); border-radius: 10px; font-size: 13px; }
.msg-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.msg-img-thumb { display: block; max-width: 220px; max-height: 220px; border-radius: 10px; cursor: pointer; margin-top: 6px; object-fit: cover; border: none; outline: none; box-shadow: none; transition: transform .2s, opacity .2s; }
.msg-img-thumb:hover { transform: scale(1.03); opacity: .9; }
.msg-file-link { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--a-white); border-radius: 10px; font-size: 13px; color: var(--mu2); text-decoration: none; margin-top: 6px; border: 1px solid var(--bd); transition: all .2s; max-width: 280px; }
.msg-file-link:hover { background: var(--a-blue); }
.msg-file-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ═══════════════════════════════════════════
   ГОЛОСОВЫЕ СООБЩЕНИЯ
   ═══════════════════════════════════════════ */
.msg-voice { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--a-white); border-radius: var(--r); margin-top: 6px; min-width: 180px; max-width: 260px; border: 1px solid rgba(255,255,255,.05); }
.voice-play-btn { width: 28px; height: 28px; border-radius: 50%; background: var(--bd); border: 1px solid var(--bd2); color: var(--mu); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.voice-record-bar { display: none; align-items: center; gap: 8px; padding: 6px 12px; background: var(--bg); border: 1px solid var(--bd); border-radius: var(--r-lg); flex: 1; }
.voice-record-bar.visible { display: flex; }
.voice-record-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: recPulse 1s infinite; flex-shrink: 0; }
.voice-record-time { font-size: 13px; color: var(--red); font-family: var(--mono); min-width: 40px; }
.voice-record-cancel { background: none; border: none; cursor: pointer; color: var(--mu); padding: 4px 8px; border-radius: var(--r-sm); font-size: 12px; transition: all .2s; }
.voice-record-cancel:hover { color: var(--red); background: var(--bd); }
.voice-record-send { background: rgba(64,168,112,.15); border: 1px solid rgba(64,168,112,.3); color: var(--grn); border-radius: 10px; padding: 6px 14px; cursor: pointer; font-size: 12px; transition: all .2s; }
.voice-record-send:hover { background: rgba(64,168,112,.3); }
@keyframes recPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
/* ═══════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════ */
.lightbox-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.92); z-index: 1000; display: none; align-items: center; justify-content: center; cursor: zoom-out; backdrop-filter: blur(8px); }
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img { max-width: 92vw; max-height: 92vh; border-radius: var(--r-sm); object-fit: contain; }
.lightbox-close { position: absolute; top: 16px; right: 24px; color: var(--mu); font-size: 24px; cursor: pointer; background: rgba(0,0,0,.6); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.lightbox-close:hover { color: var(--mu2); }
/* ═══════════════════════════════════════════
   ПОИСК ПО СООБЩЕНИЯМ
   ═══════════════════════════════════════════ */
/* Floating search — Ctrl+F стиль */
.msg-search-inline { display:none; align-items:center; gap:4px; }
.msg-search-inline.visible { display:flex; }
.msg-search-inline input { width:200px; background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,.08); border-radius:0; padding:4px 0; color:var(--tx); font-size:12px; outline:none; font-family:inherit; transition:border-color .2s; }
.msg-search-inline input:focus { border-bottom-color:rgba(190,160,110,.2); }
.msg-search-inline input::placeholder { color:var(--mu2); font-size:11px; }
.msg-search-count { font-size:9px; color:var(--mu); white-space:nowrap; font-family:var(--mono); }
.msg-search-nav { background:none; border:none; cursor:pointer; color:var(--mu2); padding:2px 4px; border-radius:4px; transition:all .15s; font-size:12px; line-height:1; }
.msg-search-nav:hover { color:var(--mu2); }
.msg-search-close { font-size:10px; }
.msg-highlight { background: rgba(59,130,246,.35); border-radius: 2px; padding: 0 1px; }
.msg-highlight.current { background: rgba(59,130,246,.65); }

/* === Audit 23.03.2026 — extracted inline styles === */
.user-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.user-status-label { font-size: 9px; color:var(--mu4); letter-spacing: .3px; text-align: right; }
.user-actions { display: flex; align-items: center; gap: 3px; }
.empty-filter { text-align: center; padding: 40px 20px; color: var(--mu); font-size: 12px; }
.msg-link { color: var(--mu2); text-decoration: underline; }
.voice-record-label { color: var(--mu); font-size: 12px; flex: 1; }
.driver-name-link { color: var(--tx); font-weight: 500; font-size: 13px; text-decoration: none; }
.driver-name-link:visited { color: var(--tx); }
.driver-name-link:hover { color: var(--mu2); }
.msg-icon { display: none; }
.pin-btn { display: none; }
.topnav-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

body.login { height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-glow { position: fixed; top: -150px; left: 50%; transform: translateX(-50%); width: 500px; height: 500px; background: radial-gradient(circle, rgba(138,122,96,.06) 0%, transparent 65%); pointer-events: none; }
.login-glow2 { position: fixed; bottom: -150px; right: 10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(184,120,104,.05) 0%, transparent 65%); pointer-events: none; }
.login-box { width: 340px; background: var(--s1); border: 1px solid var(--bd); border-radius: 20px; padding: 36px; position: relative; z-index: 1; }
.login-logo { text-align: center; margin-bottom: 32px; }
/* removed: login-logo h1 dupe */
.login-logo p { font-size: 12px; color: var(--mu); margin-top: 5px; }
.login-field { margin-bottom: 14px; }
.login-field label { display: block; font-size: 11px; color: var(--mu2); margin-bottom: 7px; font-weight: 500; }
.login-field input { width: 100%; background: var(--s2); border: 1px solid var(--bd); border-radius: 10px; padding: 11px 14px; color: var(--tx); font-size: 14px; font-family: var(--font); outline: none; transition: border .15s; letter-spacing: 1px; }
.login-field input:focus { border-color: var(--ac); }
.login-field input::placeholder { color: var(--mu); letter-spacing: .3px; }
.login-btn { width: 100%; background: var(--ac); color: #fff; border: none; border-radius: 10px; padding: 12px; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 4px; transition: all .15s; font-family: var(--font); letter-spacing: .2px; }
.login-btn:hover { background: var(--ac-h); }
.login-error { background: rgba(184,120,104,.08); border: 1px solid rgba(184,120,104,.2); color: var(--red); border-radius: 10px; padding: 10px 14px; font-size: 12px; margin-bottom: 16px; }
.login-info { background: rgba(5,150,105,.1); border: 1px solid rgba(5,150,105,.3); color: var(--grn); border-radius: 10px; padding: 10px 14px; font-size: 12px; margin-bottom: 16px; }
.login-hint { font-size: 11px; color: var(--mu); text-align: center; margin-top: 14px; line-height: 1.6; }
.login-back { font-size: 11px; color: var(--mu); text-align: center; margin-top: 14px; }
.login-back a { color: inherit; text-decoration: none; transition: color .15s; }
.login-back a:hover { color: var(--mu2); }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Статус-полоски — ещё мягче, не отвлекают */
/* Аватар — мягкое кольцо вместо резкого */
.user-item[data-status="аренда"] .avatar             { box-shadow: 0 0 0 1.5px rgba(16, 185, 129, .3); }
.user-item[data-status="частник"] .avatar            { box-shadow: 0 0 0 1.5px rgba(96, 165, 250, .3); }
.user-item[data-status="не зарегистрирован"] .avatar { box-shadow: 0 0 0 1.5px rgba(248, 113, 113, .2); }
.user-item:hover .avatar { transform: scale(1.04); }
/* Кнопки бота — ФОНОВЫЙ ШУМ. Минимально заметные */
/* .msg-btn spacing — handled by gap */
/* Действия — почти невидимые */
/* .msg-action spacing — handled by gap */
/* Ошибки — мягкий красный фон */
.msg-error .msg-bubble {
  background: rgba(248, 113, 113, .06);
  border: 1px solid rgba(248, 113, 113, .15);
  color: var(--red);
  border-radius: 10px;
}
/* Имя отправителя — мягкое */
.msg-admin + .msg-admin .msg-sender { display: none; }
/* Промежутки: обычные сообщения дышат, кнопки — плотно */
.msg-user + .msg-admin, .msg-admin + .msg-user { margin-top: 10px; }
.msg-btn + .msg-user, .msg-btn + .msg-admin,
.msg-action + .msg-user, .msg-action + .msg-admin { margin-top: 8px; }

.msg-input-wrap textarea::placeholder { color:var(--mu3); }
/* Кнопка скрепки и микрофона */
.attach-btn:hover svg, .record-btn:hover svg { stroke: var(--mu2); }

.messages::-webkit-scrollbar { width: 4px; }
.messages::-webkit-scrollbar-track { background: transparent; }
.messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 4px; }
.messages::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.14); }
.user-list::-webkit-scrollbar { width: 3px; }
.user-list::-webkit-scrollbar-track { background: transparent; }
.user-list::-webkit-scrollbar-thumb { background: rgba(190,150,100,.1); border-radius: 3px; }


/* Если есть счётчик — чуть больше */
.unread-dot:not(:empty) { min-width:14px; height:14px; font-size:9px; font-weight:600; color:rgba(255,255,255,.8); display:flex; align-items:center; justify-content:center; padding:0 3px; border-radius:7px; background:rgba(190,70,90,.65); }

/* Группировка кнопок: плотная стопка */
.msg-btn + .msg-btn { margin-top: -3px; }
.msg-btn .msg-time { font-size: 0; } /* скрыть время у кнопок */
.msg-btn:last-of-type .msg-time, 
.msg-btn + .msg-user ~ .msg-btn:first-of-type .msg-time { font-size: 9px; } /* показать время у последней кнопки */
/* ── Действия: максимально приглушены ── */
.msg-action .msg-bubble {
  background: none;
  border: none;
  color:var(--mu3);
  font-size: 10px;
  padding: 2px 6px;
}
.msg-action .msg-time { font-size: 0; }
/* ── Промежутки: дышащие ── */
.msg-user, .msg-admin { margin-top: 2px; }
/* ── Поле ввода: тоньше бордер ── */
.msg-input-wrap textarea {
  border: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.02);
  border-radius: 10px;
}
.msg-input-wrap textarea:focus {
  border-color: rgba(138,122,96,.3);
  box-shadow: none;
  background: rgba(190,150,100,.06);
}
/* Скрываем аватарки в сайдбаре */
.user-item .avatar { display: none; }

/* Навигация в верхней панели */
.topnav-btn { background:none; border:none; cursor:pointer; color:var(--mu2); padding:4px; border-radius:6px; transition:all .15s; display:inline-flex; align-items:center; text-decoration:none; flex-shrink:0; }
.topnav-btn:hover { color:var(--mu2); background:rgba(190,150,100,.08); }

/* Dot: видимый при hover для клика */
.user-item #dot-0 { cursor:pointer; }
.dot-empty { width:8px; height:8px; border-radius:50%; cursor:pointer; }
.user-item [id^="dot-"] { cursor:pointer; transition:all .15s; }
.user-item:hover .dot-empty { width:18px; height:18px; background:rgba(200,70,120,.15); border-radius:50%; }
.user-item:hover .dot-empty:hover { background:rgba(200,70,120,.4); transform:scale(1.2); }

/* Непрочитанные — превью сообщения заметнее */
.user-item:has(.unread-dot) .user-last { color:var(--tx); opacity:.8; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV
   ═══════════════════════════════════════════════════════════════ */
.mobile-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--s1); border-top: 1px solid var(--bd);
  padding: 6px 0 env(safe-area-inset-bottom, 6px);
  justify-content: space-around; align-items: center;
}
.mobile-bottom-nav a,
.mobile-bottom-nav button {
  background: none; border: none; color: var(--mu); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 9px; font-family: var(--font); padding: 4px 12px;
  text-decoration: none; transition: color .15s;
}
.mobile-bottom-nav a:hover, .mobile-bottom-nav button:hover,
.mobile-bottom-nav a.active, .mobile-bottom-nav button.active { color: var(--ac); }
.mobile-bottom-nav svg { width: 20px; height: 20px; }

.mobile-back-btn {
  display: none; background: none; border: none; color: var(--mu2);
  cursor: pointer; padding: 4px; border-radius: 6px; flex-shrink: 0;
  transition: all .15s;
}
.mobile-back-btn:hover { color: var(--tx); background: rgba(190,150,100,.08); }

.filter-tab, .btn, .topnav-btn, .meta-link { transition: all .18s ease; }
.voice-progress { flex: 1; height: 3px; background: rgba(190,150,100,.1); border-radius: 2px; overflow: hidden; }
.voice-bar { height: 100%; width: 0; background: var(--ac); border-radius: 2px; transition: width .1s linear; }
.voice-dur { font-size: 11px; color: var(--mu); font-family: var(--mono); min-width: 24px; text-align: right; }
.login-logo h1 { font-size: 22px; font-weight: 600; color: var(--tx); letter-spacing: .5px; }

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .input-area { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}
/* dot-empty handled by class */

@media (max-width: 900px) {
  .sidebar { width: 260px; }
  .driver-top-panel { padding: 6px 14px; gap: 6px; }
  .input-area { padding: 8px 14px; }
  .messages { padding: 10px 12px; }
  .topnav-actions { gap: 0; }
}

@media (max-width: 640px) {
  body.dashboard { height: 100vh; height: 100dvh; }
  .main { position: relative; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; right: 0;
    width: 100%; z-index: 100; transition: transform .25s ease;
  }
  body.dashboard.chat-open .sidebar { transform: translateX(-100%); pointer-events: none; }
  body.dashboard.chat-open .chat { display: flex; }
  .chat { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 101; }
  body.dashboard:not(.chat-open) .sidebar { transform: translateX(0); }
  .mobile-back-btn { display: flex; }
  .mobile-bottom-nav { display: flex; }
  .topnav-actions { display: none; }
  .admin-bar { display: none; }
  .sidebar { height: 100dvh; padding-bottom: 56px; }
  .sidebar-search { padding: 12px 16px 10px; }
  .sidebar-search input { font-size: 14px; padding: 8px 4px; }
  .filter-tabs { padding: 6px 16px 8px; gap: 8px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .filter-tab { font-size: 11px; white-space: nowrap; padding: 4px 2px; }
  .user-item { padding: 12px 16px; gap: 10px; }
  .user-item .avatar { display: flex; width: 40px; height: 40px; font-size: 14px; }
  .user-name { font-size: 14px; }
  .user-last { font-size: 12px; }
  .user-time { font-size: 11px; }
  .user-status-label { font-size: 10px; }
  .unread-dot { min-width: 18px; height: 18px; }
  .unread-dot:not(:empty) { min-width: 18px; height: 18px; font-size: 10px; padding: 0 4px; }
  .driver-top-panel { padding: 8px 12px; gap: 6px; flex-wrap: nowrap; overflow-x: auto; }
  .driver-name-link { font-size: 14px; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
  .meta-link { font-size: 10px; padding: 3px 8px; flex-shrink: 0; }
  .topnav-search { flex-shrink: 0; }
  .messages { padding: 10px 10px 10px; }
  .msg { max-width: 88%; }
  .msg-bubble { font-size: 14px; padding: 8px 12px; }
  .msg-time { font-size: 10px; }
  .msg-img-thumb { max-width: 200px; max-height: 200px; }
  .input-area { padding: 8px 10px; gap: 2px; }
  #msgInput { font-size: 16px; padding: 10px 14px; min-height: 44px; }
  .send-btn { min-width: 44px; padding: 10px; }
  .attach-btn, .record-btn { padding: 10px; }
  .reply-bar { padding: 6px 10px 0; }
  .scroll-down-btn { right: 14px; bottom: 70px; width: 38px; height: 38px; }
  .scroll-up-btn { bottom: 114px; right: 14px; }
  .file-preview { max-width: 140px; }
  .msg-search-inline input { width: 140px; font-size: 13px; }
  .lightbox-overlay img { max-width: 98vw; max-height: 85vh; }
  .lightbox-close { top: 10px; right: 10px; }
  .login-box { width: calc(100vw - 40px); max-width: 360px; padding: 28px 24px; }
  .login-logo { margin-bottom: 24px; }
  .login-field input { font-size: 16px; padding: 12px 14px; }
  .login-btn { padding: 14px; font-size: 14px; }
  .voice-record-bar { padding: 6px 10px; }
  .voice-record-send { padding: 8px 14px; }
  .day-divider { margin: 12px 0 6px; }
}

@media (max-width: 380px) {
  .driver-name-link { max-width: 100px; font-size: 13px; }
  .meta-link { font-size: 9px; padding: 2px 6px; }
  .msg { max-width: 92%; }
  .msg-bubble { font-size: 13px; }
  #msgInput { font-size: 15px; }
  .login-box { padding: 24px 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV
   ═══════════════════════════════════════════════════════════════ */
.mobile-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--s1); border-top: 1px solid var(--bd);
  padding: 6px 0 env(safe-area-inset-bottom, 6px);
  justify-content: space-around; align-items: center;
}
.mobile-bottom-nav a,
.mobile-bottom-nav button {
  background: none; border: none; color: var(--mu); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 9px; font-family: var(--font); padding: 4px 12px;
  text-decoration: none; transition: color .15s;
}
.mobile-bottom-nav a:hover, .mobile-bottom-nav button:hover,
.mobile-bottom-nav a.active, .mobile-bottom-nav button.active { color: var(--ac); }
.mobile-bottom-nav svg { width: 20px; height: 20px; }

.mobile-back-btn {
  display: none; background: none; border: none; color: var(--mu2);
  cursor: pointer; padding: 4px; border-radius: 6px; flex-shrink: 0;
  transition: all .15s;
}
.mobile-back-btn:hover { color: var(--tx); background: rgba(190,150,100,.08); }

.filter-tab, .btn, .topnav-btn, .meta-link { transition: all .18s ease; }
.voice-progress { flex: 1; height: 3px; background: rgba(190,150,100,.1); border-radius: 2px; overflow: hidden; }
.voice-bar { height: 100%; width: 0; background: var(--ac); border-radius: 2px; transition: width .1s linear; }
.voice-dur { font-size: 11px; color: var(--mu); font-family: var(--mono); min-width: 24px; text-align: right; }
.login-logo h1 { font-size: 22px; font-weight: 600; color: var(--tx); letter-spacing: .5px; }

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .input-area { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}
/* dot-empty handled by class */

@media (max-width: 900px) {
  .sidebar { width: 260px; }
  .driver-top-panel { padding: 6px 14px; gap: 6px; }
  .input-area { padding: 8px 14px; }
  .messages { padding: 10px 12px; }
  .topnav-actions { gap: 0; }
}

@media (max-width: 640px) {
  body.dashboard { height: 100vh; height: 100dvh; }
  .main { position: relative; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; right: 0;
    width: 100%; z-index: 100; transition: transform .25s ease;
  }
  body.dashboard.chat-open .sidebar { transform: translateX(-100%); pointer-events: none; }
  body.dashboard.chat-open .chat { display: flex; }
  .chat { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 101; }
  body.dashboard:not(.chat-open) .sidebar { transform: translateX(0); }
  .mobile-back-btn { display: flex; }
  .mobile-bottom-nav { display: flex; }
  .topnav-actions { display: none; }
  .admin-bar { display: none; }
  .sidebar { height: 100dvh; padding-bottom: 56px; }
  .sidebar-search { padding: 12px 16px 10px; }
  .sidebar-search input { font-size: 14px; padding: 8px 4px; }
  .filter-tabs { padding: 6px 16px 8px; gap: 8px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .filter-tab { font-size: 11px; white-space: nowrap; padding: 4px 2px; }
  .user-item { padding: 12px 16px; gap: 10px; }
  .user-item .avatar { display: flex; width: 40px; height: 40px; font-size: 14px; }
  .user-name { font-size: 14px; }
  .user-last { font-size: 12px; }
  .user-time { font-size: 11px; }
  .user-status-label { font-size: 10px; }
  .unread-dot { min-width: 18px; height: 18px; }
  .unread-dot:not(:empty) { min-width: 18px; height: 18px; font-size: 10px; padding: 0 4px; }
  .driver-top-panel { padding: 8px 12px; gap: 6px; flex-wrap: nowrap; overflow-x: auto; }
  .driver-name-link { font-size: 14px; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
  .meta-link { font-size: 10px; padding: 3px 8px; flex-shrink: 0; }
  .topnav-search { flex-shrink: 0; }
  .messages { padding: 10px 10px 10px; }
  .msg { max-width: 88%; }
  .msg-bubble { font-size: 14px; padding: 8px 12px; }
  .msg-time { font-size: 10px; }
  .msg-img-thumb { max-width: 200px; max-height: 200px; }
  .input-area { padding: 8px 10px; gap: 2px; }
  #msgInput { font-size: 16px; padding: 10px 14px; min-height: 44px; }
  .send-btn { min-width: 44px; padding: 10px; }
  .attach-btn, .record-btn { padding: 10px; }
  .reply-bar { padding: 6px 10px 0; }
  .scroll-down-btn { right: 14px; bottom: 70px; width: 38px; height: 38px; }
  .scroll-up-btn { bottom: 114px; right: 14px; }
  .file-preview { max-width: 140px; }
  .msg-search-inline input { width: 140px; font-size: 13px; }
  .lightbox-overlay img { max-width: 98vw; max-height: 85vh; }
  .lightbox-close { top: 10px; right: 10px; }
  .login-box { width: calc(100vw - 40px); max-width: 360px; padding: 28px 24px; }
  .login-logo { margin-bottom: 24px; }
  .login-field input { font-size: 16px; padding: 12px 14px; }
  .login-btn { padding: 14px; font-size: 14px; }
  .voice-record-bar { padding: 6px 10px; }
  .voice-record-send { padding: 8px 14px; }
  .day-divider { margin: 12px 0 6px; }
}

@media (max-width: 380px) {
  .driver-name-link { max-width: 100px; font-size: 13px; }
  .meta-link { font-size: 9px; padding: 2px 6px; }
  .msg { max-width: 92%; }
  .msg-bubble { font-size: 13px; }
  #msgInput { font-size: 15px; }
  .login-box { padding: 24px 20px; }
}

/* === Audit2 23.03.2026 — новые классы вместо inline === */
/* Пустое состояние dot (без непрочитанных) */
.dot-empty { width:8px; height:8px; border-radius:50%; cursor:pointer; }
/* Заглушка "нет сообщений" */
.empty-messages { text-align:center; padding:40px; color:var(--mu); font-size:13px; }
/* Ссылки в пузырях (JS-версия) */
.msg-link-js { color:var(--mu2); text-decoration:underline; }
/* Черновик: обёртка текста */
.draft-text { color:var(--draft); font-style:italic; font-size:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; }
.draft-who { color:var(--draft); opacity:.7; font-size:10px; }

/* Drag & drop подсветка */
.chat.drag-over { outline: 2px dashed var(--ac); outline-offset: -4px; }
.chat.drag-over::after { content:'Перетащите файл сюда'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(30,28,24,.85); color:var(--ac); font-size:16px; font-weight:500; z-index:20; pointer-events:none; border-radius:4px; }