/* ============================================================
   CimprassX — New Telegram (master) visual reskin
   Targets teamgram-tt's REAL class names (read from source):
   .chat-item-clickable, .ListItem / .ListItem-main-icon,
   .Settings, .Profile, .modal-dialog, .Composer
   ============================================================ */

:root,
html.theme-light,
html.theme-dark,
body {
  --color-background: #212121 !important;
  --color-background-rgb: 33, 33, 33 !important;
  --color-background-compact-menu: #0F0F0F !important;
  --color-background-compact-menu-rgb: 15, 15, 15 !important;
  --color-background-secondary: #0F0F0F !important;
  --color-background-secondary-rgb: 15, 15, 15 !important;
  --color-background-selected: #0F0F0F !important;
  --color-text: #ffffff !important;
  --color-text-rgb: 255, 255, 255 !important;
  --color-text-secondary: rgba(255, 255, 255, 0.5) !important;
  --color-text-secondary-rgb: 255, 255, 255 !important;
  --color-borders: rgba(255, 255, 255, 0.08) !important;
  --color-borders-input: rgba(255, 255, 255, 0.12) !important;
  --color-dividers: rgba(255, 255, 255, 0.08) !important;
  --color-primary: #8774E1 !important;
  --color-primary-shade: #6f5fcf !important;
  --color-primary-rgb: 135, 116, 225 !important;
  --color-chat-bg: #212121 !important;
  --color-chat-hover: rgba(135, 116, 225, 0.08) !important;
  --color-chat-active: rgba(135, 116, 225, 0.16) !important;
  --theme-background-color: #212121 !important;
  --theme-background-color-rgb: 33, 33, 33 !important;

  --border-radius-default: 1rem !important;
  --border-radius-modules: 1.5rem !important;
  --border-radius-island: 1.5rem !important;
}

html.theme-light { --color-text: #ffffff !important; }
body, #root, .app-wrapper { background-color: #212121 !important; }

/* ---------- Chat list: rounded island rows ---------- */
.chat-list { background: transparent !important; padding: 0.5rem !important; }

.chat-item-clickable,
.ListItem.chat-item-clickable {
  border-radius: 0.875rem !important;
  margin: 0 0 0.25rem 0 !important;
  transition: background-color 0.15s ease !important;
}
.chat-item-clickable:hover,
.ListItem.chat-item-clickable:hover { background-color: var(--color-chat-hover) !important; }
.chat-item-clickable.selected,
.chat-item-clickable.active { background-color: var(--color-chat-active) !important; }

/* ---------- Settings list rows as islands (new Telegram) ---------- */
.ListItem-button {
  border-radius: 0.875rem !important;
  transition: background-color 0.15s ease !important;
}
.ListItem-button:hover { background-color: var(--color-chat-hover) !important; }

/* Colored icon backdrops (IconBackdrop emulation) */
.ListItem-main-icon {
  border-radius: 0.625rem !important;
  background-color: rgba(135, 116, 225, 0.16) !important;
  color: #8774E1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.875rem !important;
  height: 1.875rem !important;
}
.ListItem:nth-of-type(6n+1) .ListItem-main-icon { background-color: rgba(251, 84, 84, 0.16) !important; color: #fb5454 !important; }
.ListItem:nth-of-type(6n+2) .ListItem-main-icon { background-color: rgba(25, 163, 88, 0.16) !important; color: #19a358 !important; }
.ListItem:nth-of-type(6n+3) .ListItem-main-icon { background-color: rgba(37, 203, 220, 0.16) !important; color: #25cbdc !important; }
.ListItem:nth-of-type(6n+4) .ListItem-main-icon { background-color: rgba(255, 168, 0, 0.16) !important; color: #ffa800 !important; }
.ListItem:nth-of-type(6n+5) .ListItem-main-icon { background-color: rgba(255, 91, 173, 0.16) !important; color: #ff5bad !important; }

/* ---------- Settings / Profile panels as Islands ---------- */
.Settings,
.settings-content,
.Profile,
.settings-main,
.left-menu,
.Menu.main-menu {
  background-color: #0F0F0F !important;
  border-radius: var(--border-radius-island) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

/* ---------- Modal / dialogs as islands ---------- */
.modal-dialog {
  background-color: #0F0F0F !important;
  border-radius: var(--border-radius-island) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden !important;
}
.modal-backdrop { background-color: rgba(0, 0, 0, 0.55) !important; backdrop-filter: blur(2px) !important; }

/* ---------- Composer rounded ---------- */
.Composer,
.middle-column-footer,
.composer {
  background-color: #0F0F0F !important;
  border-radius: 1.25rem !important;
}

/* ---------- Profile radial background (new Telegram) ---------- */
.Profile {
  background-image: radial-gradient(circle at 50% 0%,
      rgba(135, 116, 225, 0.35),
      rgba(135, 116, 225, 0) 60%) !important;
  background-color: #0F0F0F !important;
}

/* ---------- Buttons: primary purple ---------- */
.button-primary,
.Button.primary,
.confirm-dialog-button {
  background-color: #8774E1 !important;
  color: #ffffff !important;
  border-radius: 0.75rem !important;
}

/* ---------- Avatars ---------- */
.Avatar, .AvatarEditable, .ProfilePhoto {
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---------- Scrollbars ---------- */
.custom-scroll::-webkit-scrollbar-thumb,
.scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
}

/* ---------- Menu popovers ---------- */
.Menu, .modal-content {
  background-color: #0F0F0F !important;
  border-radius: 1rem !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;
}

/* ---------- Whole messenger frames ---------- */
.app-wrapper, .LeftColumn, .RightColumn, .middle-column, .chat {
  background-color: #212121 !important;
}