/* ===== TELEGRAM-LIKE THEME (точные цвета из github.com/Ajaxy/telegram-tt) =====
   Подключается ПОСЛЕ основного <style>. Перебивает старые фиолетовые
   переменные на синюю Telegram-палитру. ====================================== */

:root {
  /* Base */
  --bg: #ffffff;
  --surface: #ffffff;
  --border: #dadce0;
  --muted: #707579;
  --text: #000000;
  --text-soft: #2e3939;
  --hover: #f4f4f5;
  --active: #ededed;
  --divider: #c8c6cc;

  /* Primary (Telegram blue) */
  --primary: #3390ec;
  --primary-dark: #2c7fd2;
  --primary-shade: #2b78c4;
  --primary-tint: rgba(51, 144, 236, 0.1);
  --primary-opacity: rgba(51, 144, 236, 0.2);

  /* Status */
  --success: #00c73e;
  --success-light: #4fae4e;
  --danger: #e53935;
  --warn: #fb8c00;
  --yellow: #fdd764;

  /* Bubbles */
  --bubble-theirs: #ffffff;
  --bubble-theirs-text: #000000;
  --bubble-mine: #eeffde;       /* Telegram light green */
  --bubble-mine-text: #000000;
  --bubble-mine-apple: #dcf8c5; /* iOS variant */

  /* Chat list */
  --chat-active: #3390ec;
  --chat-hover: #f4f4f5;
  --chat-bg-secondary: #f4f4f5;
  --sidebar-active: #f4f4f5;

  /* Reactions */
  --reaction-bg: #ebf3fd;
  --reaction-bg-hover: #c5def9;
  --reaction-own: #cef0ba;
  --reaction-own-hover: #b5e0a4;

  /* Gradient */
  --gradient-bg: #ffffff;
  --chat-bg: #ffffff;

  /* Layout */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-bubble: 18px;
  --radius-bubble-tail: 4px;
}

[data-theme="dark"] {
  --bg: #212121;
  --surface: #212121;
  --border: #2f2f2f;
  --muted: #aaaaaa;
  --text: #ffffff;
  --text-soft: #c4c4c4;
  --hover: #2c2c2c;
  --active: #383838;
  --divider: #383838;

  --primary: #8774e1;
  --primary-dark: #7159d9;
  --primary-tint: rgba(135, 116, 225, 0.16);

  --bubble-theirs: #212121;
  --bubble-theirs-text: #ffffff;
  --bubble-mine: #766ac8;
  --bubble-mine-text: #ffffff;

  --chat-bg: #1a1a1a;
  --chat-bg-secondary: #2c2c2c;
  --gradient-bg: #1a1a1a;
}

/* ====== Telegram density tweaks ====== */
html, body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Roboto", "Helvetica Neue", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg) !important;
  color: var(--text) !important;
}

body { font-size: 15px; line-height: 1.4; letter-spacing: -.005em; }

/* ====== Sidebar (chat list) ====== */
.sidebar { background: var(--bg) !important; border-right: 1px solid var(--border) !important; }
.sidebar-header {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
}
.logo-icon {
  background: var(--primary) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}

/* Pills/tabs (Чаты/Тендеры/Контакты) — Telegram-style top tabs */
.tab-bar, [class*="tab-bar"] {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

/* Search */
.search input {
  background: var(--chat-bg-secondary) !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 9px 14px 9px 36px !important;
  font-size: 14px !important;
  color: var(--text) !important;
}
.search input::placeholder { color: var(--muted) !important; }
.search input:focus {
  background: var(--surface) !important;
  box-shadow: 0 0 0 2px var(--primary-tint) !important;
}

/* Chat list items */
.chat-item {
  padding: 9px 14px !important;
  border-bottom: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  transition: background .1s ease !important;
}
.chat-item:hover { background: var(--hover) !important; }
.chat-item.active {
  background: var(--primary) !important;
  border-left: none !important;
  padding-left: 14px !important;
}
.chat-item.active .chat-title,
.chat-item.active .chat-preview,
.chat-item.active .chat-time { color: #fff !important; }
.chat-item.active .avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.4) !important; }

.avatar {
  width: 54px !important;
  height: 54px !important;
  border-radius: 50%;
  font-size: 18px !important;
  font-weight: 500 !important;
  /* Telegram использует яркие градиенты по hash */
}

.chat-title {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
}
.chat-preview {
  font-size: 14px !important;
  color: var(--muted) !important;
  line-height: 1.35 !important;
}
.chat-time {
  font-size: 12px !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
}
.unread-badge {
  background: var(--primary) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  min-width: 22px !important;
  text-align: center;
}

/* ====== Chat view (header + messages + composer) ====== */
.chat-view { background: var(--chat-bg) !important; }
.chat-view::before { display: none !important; } /* убрать gradient overlay */

.chat-header {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 10px 14px !important;
}
.chat-header-title {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
}
.chat-header-sub {
  font-size: 13px !important;
  color: var(--muted) !important;
}

/* Messages background (Telegram использует pattern или solid) */
.messages {
  background: var(--chat-bg) !important;
  padding: 12px 10px !important;
}

/* Bubbles */
.msg { margin-bottom: 4px !important; }
.msg + .msg.mine,
.msg + .msg.theirs { margin-top: 2px !important; }

.msg-bubble {
  border-radius: var(--radius-bubble) !important;
  padding: 7px 12px 8px !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  font-feature-settings: "tnum" 0, "kern" 1;
}
.msg.mine .msg-bubble {
  background: var(--bubble-mine) !important;
  color: var(--bubble-mine-text) !important;
  border-bottom-right-radius: var(--radius-bubble-tail) !important;
  border-bottom-left-radius: var(--radius-bubble) !important;
}
.msg.theirs .msg-bubble {
  background: var(--bubble-theirs) !important;
  color: var(--bubble-theirs-text) !important;
  border: none !important;
  border-bottom-left-radius: var(--radius-bubble-tail) !important;
  border-bottom-right-radius: var(--radius-bubble) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
}

.msg-time {
  font-size: 11px !important;
  color: var(--muted) !important;
  padding: 0 4px !important;
}
.msg.mine .msg-time { color: #4fae4e !important; }

/* ====== Composer ====== */
.composer {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
}
.composer textarea {
  background: var(--chat-bg-secondary) !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  min-height: 40px !important;
  color: var(--text) !important;
}
.composer textarea:focus {
  background: var(--surface) !important;
  box-shadow: 0 0 0 2px var(--primary-tint) !important;
}
.send-btn {
  background: var(--primary) !important;
  width: 40px !important;
  height: 40px !important;
  box-shadow: none !important;
}
.send-btn:hover { background: var(--primary-dark) !important; }

/* ====== Buttons ====== */
.invite-btn {
  background: var(--primary) !important;
  color: #fff !important;
  border-radius: 18px !important;
  font-size: 14px !important;
  padding: 9px 14px !important;
  box-shadow: none !important;
}
.invite-btn:hover { background: var(--primary-dark) !important; }

/* ====== Cabinet (supplier) ====== */
.cabinet-nav { background: var(--bg) !important; border-right: 1px solid var(--border) !important; }
.cabinet-logo-icon {
  background: var(--success) !important;
  box-shadow: none !important;
}
.cabinet-nav-item {
  border-radius: 10px !important;
  font-size: 15px !important;
  padding: 11px 14px !important;
  margin-bottom: 1px !important;
  color: var(--text) !important;
  transition: background .1s ease !important;
}
.cabinet-nav-item:hover { background: var(--hover) !important; }
.cabinet-nav-item.active {
  background: var(--primary) !important;
  color: #fff !important;
  font-weight: 500 !important;
}
.cabinet-nav-item.active svg { color: #fff !important; }
.cabinet-nav-item.active::before { display: none !important; }
.cabinet-nav-badge {
  background: rgba(255,255,255,.3) !important;
  color: inherit !important;
  font-size: 12px !important;
  padding: 1px 7px !important;
  border-radius: 10px !important;
}
.cabinet-nav-item:not(.active) .cabinet-nav-badge {
  background: var(--primary) !important;
  color: #fff !important;
}

/* ====== Removing extra gradients/shadows from old theme ====== */
.profile-prompt { box-shadow: none !important; border-radius: 10px !important; }

/* ====== Reactions ====== */
.reaction, [class*="reaction"] {
  background: var(--reaction-bg) !important;
  border-radius: 12px !important;
  padding: 2px 8px !important;
  font-size: 13px !important;
}
.msg.mine .reaction { background: var(--reaction-own) !important; }

/* ====== Hover/active scale OFF on mobile (нет mouse, scale выглядит лажово при tap) ====== */
@media (hover: none) {
  .chat-item:hover { background: transparent !important; }
  .chat-item:active { background: var(--hover) !important; }
  .btn:hover, .invite-btn:hover { transform: none !important; }
}

/* ====== iOS / Android specifics ====== */
@supports (-webkit-touch-callout: none) {
  /* iOS — используем чуть другой green для own bubble */
  .msg.mine .msg-bubble { background: var(--bubble-mine-apple) !important; }
}

/* ====== Mobile-only — DESKTOP styles fully disabled ====== */
@media (min-width: 769px) {
  /* На большом экране не растягиваем — это mobile-app, симулируем телефон */
  /* (внутри dev-iframe всё равно ширина <= 440px) */
}

/* ====== Telegram-style 7-color avatar palette (вместо старых 5 фиолетовых) ====== */
.chat-item:nth-child(7n+1) .avatar { background: linear-gradient(180deg, #ff885e, #ff516a) !important; } /* red */
.chat-item:nth-child(7n+2) .avatar { background: linear-gradient(180deg, #ffcd6a, #ffa85c) !important; } /* orange */
.chat-item:nth-child(7n+3) .avatar { background: linear-gradient(180deg, #82b1ff, #665fff) !important; } /* violet */
.chat-item:nth-child(7n+4) .avatar { background: linear-gradient(180deg, #a0de7e, #54cb68) !important; } /* green */
.chat-item:nth-child(7n+5) .avatar { background: linear-gradient(180deg, #53edd6, #28c9b7) !important; } /* sea */
.chat-item:nth-child(7n+6) .avatar { background: linear-gradient(180deg, #72d5fd, #2a9ef1) !important; } /* blue */
.chat-item:nth-child(7n+7) .avatar { background: linear-gradient(180deg, #e0a2f3, #d669ed) !important; } /* pink */

/* fallback avatar (вне списка) */
.avatar:not([style*="linear-gradient"]) { 
  background: linear-gradient(180deg, #72d5fd, #2a9ef1) !important;
}
.row-avatar { background: linear-gradient(180deg, #72d5fd, #2a9ef1) !important; }