/* ChatManager Pro UI v3 — clean overrides, chat-first */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --blue: #4f46e5;
  --blue-h: #4338ca;
  --blue-l: #eef2ff;
  --dark: #111827;
  --gray: #6b7280;
  --gray-l: #f3f4f6;
  --border: #e5e7eb;
  --white: #ffffff;
  --red: #ef4444;
  --green: #10b981;
  --yellow: #f59e0b;
  --r: 10px;
  --sh: 0 1px 3px rgba(0,0,0,.06);
}

/* ===== GLOBAL ===== */
* { font-family: 'Inter', system-ui, -apple-system, sans-serif !important; -webkit-font-smoothing: antialiased; }
body { background: #f9fafb !important; }
::selection { background: rgba(79,70,229,.15); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ===== HEADER ===== */
.header-bar { background: var(--white) !important; border-bottom: 1px solid var(--border) !important; box-shadow: var(--sh) !important; }
.header-bar-container span { font-weight: 700 !important; color: var(--dark) !important; }

/* ===== NAVIGATION ===== */
.button-nav { border: none !important; background: transparent !important; color: var(--gray) !important; font-weight: 600 !important; font-size: 13px !important; transition: all .15s !important; cursor: pointer !important; }
.button-nav:hover { background: var(--blue-l) !important; color: var(--blue) !important; }
.active-button { color: var(--blue) !important; font-weight: 700 !important; border-bottom: 2.5px solid var(--blue) !important; background: var(--blue-l) !important; }

/* ===== BUTTONS ===== */
.primary-button, .panel-button, .button-auth, .btn-create-user {
  background: var(--blue) !important; border: none !important; border-radius: var(--r) !important;
  color: #fff !important; font-weight: 700 !important; font-size: 13px !important;
  cursor: pointer !important; transition: all .15s !important;
}
.primary-button:hover, .panel-button:hover, .button-auth:hover, .btn-create-user:hover {
  background: var(--blue-h) !important; transform: translateY(-1px) !important;
}

/* ===== LOGIN ===== */
.login-container { background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%) !important; }
.login-form { background: var(--white) !important; border-radius: 20px !important; box-shadow: 0 25px 60px rgba(0,0,0,.3) !important; padding: 40px 36px !important; width: 420px !important; }
.login-form input { border: 2px solid var(--border) !important; border-radius: var(--r) !important; font-size: 14px !important; background: var(--gray-l) !important; outline: none !important; color: var(--dark) !important; transition: all .15s !important; }
.login-form input:focus { border-color: var(--blue) !important; background: var(--white) !important; box-shadow: 0 0 0 4px rgba(79,70,229,.1) !important; }

/* ===== TABLES ===== */
table { border-collapse: separate !important; border-spacing: 0 !important; background: var(--white) !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: var(--sh) !important; width: 100% !important; }
th { background: var(--gray-l) !important; padding: 12px 16px !important; font-weight: 700 !important; color: #374151 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: .06em !important; border-bottom: 2px solid var(--border) !important; text-align: left !important; }
td { padding: 12px 16px !important; border-bottom: 1px solid #f3f4f6 !important; color: #374151 !important; font-weight: 500 !important; vertical-align: middle !important; }
tr:hover td { background: #fafbfc !important; }
tr:last-child td { border-bottom: none !important; }

/* ============================================
   CHAT — careful overrides, respecting originals
   ============================================ */

/* Main chat container */
.chat-container { padding-bottom: 20px !important; }

/* Chat block wrapper */
.chat-block {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
  overflow: hidden !important;
  background: var(--white) !important;
  /* keep original min/max heights from chat-DADSwsYZ.css */
}

/* Chat sidebar */
.chat-list {
  background: #fafbfc !important;
  border-right: 1px solid var(--border) !important;
  /* keep original width: 160px from base CSS */
}

/* Subgroup/folder items in sidebar */
.list-categories {
  border-bottom: 1px solid #f0f0f0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  transition: background .1s !important;
  background: transparent !important;
  padding: 8px 10px !important;
  gap: 6px !important;
  position: relative !important;
}
.list-categories:hover,
.active-list-categories {
  background: var(--blue-l) !important;
}
.active-list-categories {
  border-left: 3px solid var(--blue) !important;
}

/* Badge for unread on subgroups */
.subgroup-unread-badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-weight: 800;
  font-size: 10px;
  color: #fff;
  background: var(--red);
  border-radius: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

/* User TG block in chat list */
.user-tg-block {
  padding: 6px 8px !important;
  gap: 6px !important;
  cursor: pointer !important;
  align-items: center !important;
}

.photo-user-tg {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--border) !important;
  background: #e5e7eb !important;
}

.text-data-user-tg {
  min-width: 0 !important;
  flex: 1 !important;
}

.full-name-user-tg {
  font-weight: 700 !important;
  color: var(--dark) !important;
  font-size: 12px !important;
}

.user-meta-data-tg {
  color: #9ca3af !important;
  font-size: 9px !important;
}

.block-messages-info-and-user {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Unread badge on chat user */
.alert-messages {
  background: var(--red) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 9px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  padding: 0 4px !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(239,68,68,.3) !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* Chat header */
.header-chat {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
  height: auto !important;
  min-height: 46px !important;
  padding: 8px 16px !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

.user-info-photo {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #e5e7eb !important;
}

.text-name-user {
  font-weight: 700 !important;
  color: var(--dark) !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.text-username {
  color: #9ca3af !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.text-info-operator {
  color: #9ca3af !important;
  font-size: 8px !important;
  font-weight: 600 !important;
}

/* Chat messages area */
.chat-area {
  background: #f8f9fb !important;
  padding: 12px !important;
  gap: 10px !important;
}

/* Messages */
.chat-user {
  max-width: 70% !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
}

.chat-user-1 {
  background: var(--blue) !important;
  color: #fff !important;
  padding: 8px 12px !important;
  border-radius: 14px 14px 14px 4px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.chat-user-2 {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  padding: 8px 12px !important;
  border-radius: 14px 14px 4px 14px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  gap: 3px !important;
}

.content-info-message-chat {
  gap: 2px !important;
}

.time-in-message {
  font-size: 9px !important;
  color: #9ca3af !important;
  margin-top: 2px !important;
}

.chat-user-1 .time-in-message {
  color: rgba(255,255,255,.6) !important;
}

/* Photo in messages */
.photo-user {
  border-radius: 10px !important;
  max-width: 100% !important;
}

/* Chat input area */
.chat-manage {
  background: var(--white) !important;
  border-top: 1px solid var(--border) !important;
  padding: 12px 16px !important;
  gap: 8px !important;
}

.manage-media-text-for-input {
  gap: 8px !important;
  align-items: flex-end !important;
}

.area-for-message {
  border: 2px solid var(--border) !important;
  border-radius: var(--r) !important;
  background: var(--gray-l) !important;
  outline: none !important;
  color: var(--dark) !important;
  font-size: 13px !important;
  padding: 8px 10px !important;
  transition: border-color .15s !important;
  min-height: 36px !important;
  max-height: 80px !important;
}

.area-for-message:focus {
  border-color: var(--blue) !important;
  background: var(--white) !important;
}

.message-empty {
  border-color: var(--red) !important;
}

.btn-send-msg {
  background: var(--blue) !important;
  border: none !important;
  border-radius: var(--r) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  cursor: pointer !important;
  min-width: 80px !important;
  max-height: 40px !important;
  padding: 8px 12px !important;
}

.btn-send-msg:hover {
  background: var(--blue-h) !important;
}

.input-media-text {
  align-items: flex-end !important;
  gap: 6px !important;
}

.input-media-file {
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  font-size: 11px !important;
  padding: 6px 8px !important;
  max-width: 200px !important;
}

/* Templates */
.template-messages-block {
  gap: 4px !important;
}

.template-messages-block > span {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--gray) !important;
}

.template-messages-list {
  gap: 4px !important;
}

.custom-tmp-btn {
  background: var(--white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 16px !important;
  color: var(--gray) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  padding: 4px 10px !important;
  height: auto !important;
  min-height: 28px !important;
  transition: all .15s !important;
}

.custom-tmp-btn:hover {
  border-color: var(--blue) !important;
  color: var(--blue) !important;
  background: var(--blue-l) !important;
}

.delete-tmp-msg-block {
  height: auto !important;
  gap: 4px !important;
}

.enter-new-template-message {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r) !important;
  font-size: 12px !important;
  padding: 6px 8px !important;
  outline: none !important;
  color: var(--dark) !important;
  height: auto !important;
  min-height: 30px !important;
  transition: border-color .15s !important;
}

.enter-new-template-message:focus {
  border-color: var(--blue) !important;
}

.manage-template {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}

.manage-template .enter-new-template-message {
  flex: 1 !important;
  margin-bottom: 0 !important;
}

.manage-template .custom-tmp-btn {
  white-space: nowrap !important;
}

/* Lightbox */
.lightbox-overlay { background: rgba(0,0,0,.85) !important; backdrop-filter: blur(16px) !important; }
.lightbox-overlay img { border-radius: 14px !important; }

/* ===== FILTERS ===== */
.filter-block-chat input,
.filter-block-chat select {
  border: 2px solid var(--border) !important;
  border-radius: var(--r) !important;
  background: var(--white) !important;
  outline: none !important;
  color: var(--dark) !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  height: auto !important;
  min-height: 34px !important;
  transition: border-color .15s !important;
}

.filter-block-chat input:focus,
.filter-block-chat select:focus {
  border-color: var(--blue) !important;
}

.filter-block-chat {
  gap: 6px !important;
  margin-bottom: 8px !important;
}

/* ===== MODALS ===== */
.container-create-user { background: rgba(17,24,39,.5) !important; backdrop-filter: blur(8px) !important; }
.container-create-user-block, .modal-window-info { background: var(--white) !important; border-radius: 16px !important; box-shadow: 0 20px 50px rgba(0,0,0,.15) !important; }
.container-create-user-block input, .container-create-user-block select { border: 2px solid var(--border) !important; border-radius: var(--r) !important; background: var(--gray-l) !important; outline: none !important; color: var(--dark) !important; transition: all .15s !important; }
.container-create-user-block input:focus, .container-create-user-block select:focus { border-color: var(--blue) !important; background: var(--white) !important; }
.icon-close { opacity: .4 !important; transition: all .15s !important; cursor: pointer !important; }
.icon-close:hover { opacity: 1 !important; }
.modal-info-container { background: rgba(17,24,39,.5) !important; backdrop-filter: blur(8px) !important; }

/* ===== STATUS ===== */
.good-text-container { background: var(--green) !important; border-radius: var(--r) !important; font-weight: 600 !important; }
.error-auth-container { background: var(--red) !important; border-radius: var(--r) !important; font-weight: 600 !important; }

/* ===== BOT ACTIONS ===== */
.icon-action-btn-bot { border-radius: 8px !important; transition: all .15s !important; cursor: pointer !important; }
.icon-action-btn-bot:hover { transform: scale(1.12) !important; }
.refresh-btn { background: var(--yellow) !important; border-radius: 8px !important; }
.stop-btn { background: var(--green) !important; border-radius: 8px !important; }
.delete-btn { background: var(--red) !important; border-radius: 8px !important; }

/* ===== SUBGROUP MANAGE ===== */
.container-fields-manage { background: var(--blue) !important; border-radius: var(--r) !important; font-weight: 600 !important; }
.action-button { border-radius: 8px !important; font-weight: 700 !important; transition: all .15s !important; cursor: pointer !important; }
.action-button.delete { background: var(--red) !important; }
.action-button.delete:hover { background: #dc2626 !important; }

/* ===== LOADER ===== */
.loader { background: var(--blue) !important; }

/* ===== TEXT ===== */
.title-text { font-size: 20px !important; font-weight: 800 !important; color: var(--dark) !important; letter-spacing: -.02em; margin-bottom: 6px !important; }
.primary-text { font-weight: 600 !important; color: var(--dark) !important; }

/* ==============================
   MOBILE — CHAT ADAPTIVE
   ============================== */
@media (max-width: 768px) {
  .login-form { padding: 28px 24px !important; margin: 16px !important; width: calc(100% - 32px) !important; border-radius: 16px !important; }
  .container-create-user-block, .modal-window-info { width: calc(100% - 32px) !important; max-width: calc(100% - 32px) !important; }
}

@media (max-width: 540px) {
  /* Chat block — vertical layout */
  .chat-block {
    flex-direction: column !important;
    min-height: 600px !important;
    max-height: none !important;
  }

  /* Chat list — horizontal scroll at top */
  .chat-list {
    width: 100% !important;
    height: auto !important;
    max-height: 120px !important;
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Each user in horizontal scroll */
  .user-tg-block {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 80px !important;
    max-width: 90px !important;
    padding: 6px 4px !important;
    text-align: center !important;
  }

  .text-data-user-tg {
    max-width: 80px !important;
    align-items: center !important;
  }

  .full-name-user-tg {
    font-size: 10px !important;
    text-align: center !important;
  }

  .user-meta-data-tg {
    font-size: 8px !important;
    display: none !important;
  }

  .block-messages-info-and-user {
    justify-content: center !important;
    width: auto !important;
  }

  /* Subgroup items horizontal */
  .list-categories {
    min-width: 100px !important;
    flex-shrink: 0 !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    border-bottom: none !important;
    border-right: 1px solid #f0f0f0 !important;
  }

  .active-list-categories {
    border-left: none !important;
    border-bottom: 3px solid var(--blue) !important;
  }

  /* Header chat compact */
  .header-chat {
    min-height: 40px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
  }

  .text-name-user { font-size: 13px !important; }
  .text-username { font-size: 11px !important; }

  /* Chat area */
  .chat-area {
    padding: 10px !important;
    gap: 8px !important;
    min-height: 250px !important;
    font-size: 13px !important;
  }

  .chat-user {
    max-width: 85% !important;
  }

  .chat-user-1, .chat-user-2 {
    font-size: 13px !important;
    padding: 8px 10px !important;
  }

  /* Input area compact */
  .chat-manage {
    padding: 10px 12px !important;
    gap: 6px !important;
  }

  .manage-media-text-for-input {
    flex-direction: column !important;
    gap: 6px !important;
  }

  .area-for-message {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 14px !important;
    min-height: 40px !important;
  }

  .input-media-text {
    flex-direction: row !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .input-media-file {
    flex: 1 !important;
    max-width: none !important;
    font-size: 12px !important;
  }

  .btn-send-msg {
    min-width: 70px !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
  }

  /* Templates compact */
  .template-messages-list {
    max-height: 60px !important;
  }

  .custom-tmp-btn {
    font-size: 11px !important;
    padding: 4px 8px !important;
    min-height: 28px !important;
  }

  .delete-tmp-msg-block {
    height: auto !important;
    font-size: 12px !important;
  }

  .enter-new-template-message {
    font-size: 13px !important;
    min-height: 34px !important;
  }

  .manage-template {
    flex-direction: column !important;
    gap: 6px !important;
  }

  .manage-template .custom-tmp-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Filters */
  .filter-block-chat input,
  .filter-block-chat select {
    font-size: 14px !important;
    min-height: 38px !important;
    min-width: 0 !important;
  }

  .filter-block-chat {
    margin-bottom: 10px !important;
  }
}

/* Smaller phones */
@media (max-width: 380px) {
  .user-tg-block {
    min-width: 65px !important;
    max-width: 75px !important;
  }

  .photo-user-tg {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }

  .full-name-user-tg {
    font-size: 9px !important;
  }

  .chat-user {
    max-width: 90% !important;
  }
}

/* ===== PWA STANDALONE ===== */
@media (display-mode: standalone) {
  .header-bar { padding-top: env(safe-area-inset-top) !important; }
  body { padding-bottom: env(safe-area-inset-bottom); }
}