/*
 * Quasar / Portals design override for chat-ultra (Telegram-T fork).
 * Injected after main CSS — overrides theme variables and specific components.
 * Targets html.theme-dark (dark mode — applied when Telegram passes a dark bg_color).
 */

/* ── Core CSS Variable Overrides ── */
html.theme-dark {
  /* Backgrounds — incoming message bubbles use --color-background so keep it dark.
     Containers (body, #root, .MiddleColumn etc.) are made transparent via direct selectors below. */
  --color-background: #17212b !important;
  --color-background-compact-menu: #1e1e1eCC !important;
  --color-background-compact-menu-reactions: #1e1e1eEB !important;
  --color-background-secondary: #1e1e1e !important;
  --color-background-secondary-accent: #2a2a2e !important;
  --color-background-sidebar: #1a1a1a !important;
  --color-background-selected: rgba(22,137,255,0.1) !important;

  /* Own messages — Portals primary blue */
  --color-background-own: #1689ff !important;
  --color-background-own-selected: #1277e0 !important;

  /* Text */
  --color-text: #ffffff !important;
  --color-text-rgb: 255, 255, 255 !important;
  --color-text-lighter: #f0f0f0 !important;
  --color-text-secondary: #6d6d71 !important;
  --color-text-secondary-rgb: 109, 109, 113 !important;
  --color-text-meta: #6d6d71 !important;
  --color-text-meta-rgb: 109, 109, 113 !important;
  --color-text-meta-colored: #49df64 !important;
  --color-text-green: #49df64 !important;
  --color-icon-secondary: #6d6d71 !important;
  --color-placeholders: #6d6d71 !important;

  /* Primary — Portals blue */
  --color-primary: #1689ff !important;
  --color-primary-shade: #1277e0 !important;
  --color-primary-shade-darker: #1065c0 !important;
  --color-primary-shade-rgb: 18, 119, 224 !important;
  --color-links: #1689ff !important;
  --color-interactive-active: #1689ff !important;
  --color-voice-transcribe-button: #1a2a3d !important;

  /* Borders & dividers */
  --color-borders: #454545 !important;
  --color-borders-input: #454545 !important;
  --color-borders-alternate: rgba(255,255,255,0.08) !important;
  --color-dividers: #333333 !important;
  --color-dividers-android: #333333 !important;

  /* Own message accent (meta text, ticks) — white instead of green */
  --color-accent-own: #c8e4ff !important;
  --color-accent-own-rgb: 200, 228, 255 !important;
  --color-message-meta-own: rgba(255,255,255,0.68) !important;

  /* Message reactions */
  --color-message-reaction: rgba(22,137,255,0.12) !important;
  --color-message-reaction-hover: rgba(22,137,255,0.2) !important;
  --color-message-reaction-own: rgba(73,223,100,0.12) !important;
  --color-message-reaction-chosen-hover: #1277e0 !important;

  /* Code blocks */
  --color-code: #5ac8fa !important;
  --color-code-bg: rgba(255,255,255,0.06) !important;
  --color-code-own: #49df64 !important;
  --color-code-own-bg: rgba(255,255,255,0.06) !important;

  /* Toast */
  --color-toast-background: rgba(26,26,26,0.97) !important;
  --color-toast-action: #1689ff !important;

  /* Interactive */
  --color-interactive-element-hover: rgba(255,255,255,0.08) !important;
  --color-interactive-inactive: rgba(109,109,113,0.25) !important;

  /* Scrollbar */
  --color-scrollbar: rgba(255,255,255,0.12) !important;
}

/* ── Own message bubbles — Portals blue gradient ── */
/* --color-background-own is used as background-color so must be solid.
   We then override with background shorthand to get the gradient. */
html.theme-dark .Message .bubble.own .bubble-content,
html.theme-dark .bubble.own .bubble-content,
html.theme-dark .message-content.own,
html.theme-dark [class*='bubble'][class*='own'] .bubble-content {
  background: linear-gradient(135deg, #1254b3 0%, #1689ff 100%) !important;
  color: #ffffff !important;
}

/* ── Reply/quote blocks (EmbeddedMessage) ── */
/* TG-T assigns purple peer-color bg to the bot's EmbeddedMessage. Override to Portals blue tint. */
html.theme-dark .Message:not(.own) .EmbeddedMessage {
  background-color: rgba(22, 137, 255, 0.18) !important;
}
/* Inside own (blue gradient) bubbles: white tint so it's visible on blue */
html.theme-dark .Message.own .EmbeddedMessage {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-left-color: rgba(255, 255, 255, 0.75) !important;
}
html.theme-dark .Message.own .EmbeddedMessage .message-title {
  color: rgba(255, 255, 255, 0.95) !important;
}
html.theme-dark .Message.own .EmbeddedMessage .embedded-text-wrapper,
html.theme-dark .Message.own .EmbeddedMessage .embedded-thumb ~ .message-text {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ── Chat background: make iframe fully transparent so outer wallpaper shows through ── */
/* NOTE: `html` background is set by JS injection (_injectCSS) with the wallpaper.
   Only body and inner containers need to be transparent here. */
html.theme-dark body,
html.theme-dark #root,
html.theme-dark #Main,
html.theme-dark .MiddleColumn,
html.theme-dark .MessageList,
html.theme-dark .messages-container,
html.theme-dark .messages-layout,
html.theme-dark .custom-bg {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* ── Middle header (chat header bar) ── */
html.theme-dark .MiddleHeader {
  background-color: #141420 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  /* Fix avatar vertical centering: remove asymmetric bottom-padding that shifts flex-center */
  padding-bottom: 0 !important;
}

html.theme-dark .MiddleHeader .info .title {
  color: #ffffff !important;
}

/* ── Message input area ── */
html.theme-dark .MessageInput,
html.theme-dark .SymbolMenu,
html.theme-dark .composer-wrapper {
  background-color: #0d0d15 !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

html.theme-dark .message-input-wrapper,
html.theme-dark .form-control.allow-selection {
  background-color: #161622 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
  border-radius: 24px !important;
}

/* ── Left column / sidebar ── */
html.theme-dark .LeftColumn,
html.theme-dark #LeftColumn {
  background-color: #0d0d15 !important;
}

/* ── Chat header avatar: remove white inner glow, add thin gradient ring ── */
html.theme-dark .MiddleHeader .Avatar .inner {
  background: transparent !important;
}
html.theme-dark .MiddleHeader .Avatar {
  overflow: visible !important;
  isolation: isolate;
  box-shadow: 0 0 0 1px #141420 !important; /* dark gap ring */
}
html.theme-dark .MiddleHeader .Avatar::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #1689ff 0%, #a855f7 28%, #ec4899 52%, #f97316 76%, #1689ff 100%);
  animation: chatAvatarRing 3s linear infinite;
  z-index: 0;
}
html.theme-dark .MiddleHeader .Avatar .inner {
  position: relative;
  z-index: 1;
}
@keyframes chatAvatarRing {
  to { transform: rotate(360deg); }
}

html.theme-dark .ChatList .ListItem-button {
  background-color: transparent !important;
}

html.theme-dark .ChatList .ListItem-button:hover,
html.theme-dark .ChatList .ListItem.selected .ListItem-button {
  background-color: rgba(22,137,255,0.1) !important;
}

/* ── Chat list items ── */
html.theme-dark .chat-item-title,
html.theme-dark .last-message-text {
  color: #ffffff !important;
}

/* ── Buttons ── */
html.theme-dark .Button.primary {
  background-color: #1689ff !important;
  color: #ffffff !important;
  border-radius: 24px !important;
}

html.theme-dark .Button.primary:hover {
  background-color: #1277e0 !important;
}

/* ── Context menus / popups ── */
html.theme-dark .Menu .bubble,
html.theme-dark .ContextMenu {
  background-color: #18182a !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
}

html.theme-dark .MenuItem {
  color: #ffffff !important;
}

html.theme-dark .MenuItem:hover {
  background-color: rgba(22,137,255,0.1) !important;
}

/* ── Scrollbars ── */
html.theme-dark ::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

html.theme-dark ::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.15);
  border-radius: 2px;
}

html.theme-dark ::-webkit-scrollbar-track {
  background: transparent;
}

/* ── Search input ── */
html.theme-dark .SearchInput .input-group,
html.theme-dark .search-input {
  background-color: #252525 !important;
  border-color: #454545 !important;
  border-radius: 24px !important;
}

/* ── Sticker / emoji panel ── */
html.theme-dark .SymbolMenu,
html.theme-dark .EmojiPicker {
  background-color: #1a1a1a !important;
  border-top-color: #333333 !important;
}

/* ── Profile/group info ── */
html.theme-dark .RightColumn,
html.theme-dark #RightColumn {
  background-color: #0d0d15 !important;
}

/* ── Spinner / loading ── */
html.theme-dark .Spinner::before {
  border-color: rgba(22,137,255,0.25) !important;
  border-top-color: #1689ff !important;
}

/* ── Message meta (time, status) ── */
html.theme-dark .message-content .meta {
  color: #6d6d71 !important;
}

/* ── Audio player ── */
html.theme-dark .Audio .toggle,
html.theme-dark .voice-message-button {
  background-color: #1689ff !important;
}

/* ── Reaction badge ── */
html.theme-dark .Reaction .chosen {
  background-color: rgba(22,137,255,0.2) !important;
  color: #1689ff !important;
}

/* ── Connection status overlay ── */
html.theme-dark #ConnectionStatusOverlay {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
}

/* ── Modal dialogs ── */
html.theme-dark .modal-dialog {
  background-color: #1e1e1e !important;
  border: 1px solid #454545 !important;
  border-radius: 16px !important;
}

/* ── Avatar initials placeholder ── */
html.theme-dark .Avatar:not(.with-media) {
  background: linear-gradient(135deg, #1254b3 0%, #1689ff 100%) !important;
}

/* ── Selected messages ── */
html.theme-dark .Message.is-selected .bubble-content {
  background-color: rgba(22,137,255,0.2) !important;
}

/* ── Link preview ── */
html.theme-dark .WebPage {
  border-left-color: #1689ff !important;
}

/* ── Reply strip in message ── */
html.theme-dark .EmbeddedMessage {
  border-left-color: #1689ff !important;
}

html.theme-dark .EmbeddedMessage .message-title {
  color: #1689ff !important;
}

/* ── General input styling ── */
html.theme-dark input,
html.theme-dark textarea {
  color: #ffffff !important;
  background-color: #252525 !important;
}

/* ── Pinned message bar ── */
html.theme-dark .PinnedMessage {
  background-color: #0d0d15 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

html.theme-dark .PinnedMessage .pinned-message-title {
  color: #1689ff !important;
}

/* ── Hide transcribe button on round videos ── */
.RoundVideo .transcribe-button {
  display: none !important;
}

/* ── Hide empty-chat placeholder bubble ("Conversation.EmptyPlaceholder" / "Conversation.GreetingText") ──
   These are leaked untranslated i18n keys rendered as a centered bubble in
   MessageList when the chat is empty. Minified classnames `osdROIcA` (centered
   wrapper) and `c3NtU3JZ` (the bubble itself) are stable because the chat-ultra
   bundle is committed as static assets. */
.MessageList .osdROIcA,
.MessageList .c3NtU3JZ,
div.osdROIcA,
div.c3NtU3JZ {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}