/* Telegram WebApp visual adapter.
   Aligns WebApp chrome with the site design system while preserving TG layout,
   viewport and interaction behavior from tg/tg.css.
*/

body.aidc-tg {
  background: var(--aidc-bg-page);
  color: var(--aidc-text-primary);
}

body.aidc-tg .tg-topbar,
body.aidc-tg .tg-bottom-nav {
  background: color-mix(in srgb, var(--aidc-bg-panel) 94%, transparent);
  border-color: var(--aidc-border-subtle);
}

body.aidc-tg .panel {
  background: var(--aidc-bg-panel);
  border-color: var(--aidc-border-subtle);
}

body.aidc-tg .tg-brand {
  color: var(--aidc-text-primary);
}

body.aidc-tg .tg-brand-sub,
body.aidc-tg .tg-svg svg,
body.aidc-tg .tg-bottom-btn,
body.aidc-tg .tg-header-icon,
body.aidc-tg .tg-lang-switch,
body.aidc-tg .tg-lang-switch button {
  color: var(--aidc-text-secondary);
}

/* Header burger dropdown: neutral surface, no pink radial wash.
   !important is temporary compatibility against legacy gradients in tg/tg.css. */
body.aidc-tg .tg-dropdown__menu {
  background: var(--aidc-bg-popover) !important;
  border-color: var(--aidc-border-default) !important;
  box-shadow: var(--aidc-shadow-popover) !important;
}

body.aidc-tg .tg-dropdown__toggle {
  background: var(--aidc-btn-secondary-bg) !important;
  border-color: var(--aidc-border-default) !important;
  color: var(--aidc-text-primary) !important;
}

body.aidc-tg .tg-dropdown__toggle:hover,
body.aidc-tg .tg-dropdown__toggle:focus-visible {
  background: var(--aidc-btn-secondary-bg-hover) !important;
  border-color: var(--aidc-border-strong) !important;
  outline: none;
}

body.aidc-tg .tg-dropdown__menu .tg-top-btn {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--aidc-text-secondary) !important;
  box-shadow: none !important;
}

body.aidc-tg .tg-dropdown__menu .tg-top-btn:hover,
body.aidc-tg .tg-dropdown__menu .tg-top-btn:focus-visible,
body.aidc-tg .tg-dropdown__menu .tg-top-btn:active {
  background: var(--aidc-btn-secondary-bg-hover) !important;
  border-color: var(--aidc-border-subtle) !important;
  color: var(--aidc-text-primary) !important;
  box-shadow: none !important;
}

body.aidc-tg .tg-dropdown__menu .tg-top-btn.is-active {
  background: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--aidc-action-primary-from) 36%, transparent) !important;
  color: var(--aidc-text-primary) !important;
  box-shadow: none !important;
}

body.aidc-tg .tg-dropdown__menu .tg-top-btn:hover .tg-svg svg,
body.aidc-tg .tg-dropdown__menu .tg-top-btn:focus-visible .tg-svg svg,
body.aidc-tg .tg-dropdown__menu .tg-top-btn:active .tg-svg svg,
body.aidc-tg .tg-dropdown__menu .tg-top-btn:hover .tg-top-btn__inline-icon svg,
body.aidc-tg .tg-dropdown__menu .tg-top-btn:focus-visible .tg-top-btn__inline-icon svg,
body.aidc-tg .tg-dropdown__menu .tg-top-btn:active .tg-top-btn__inline-icon svg,
body.aidc-tg .tg-dropdown__menu .tg-top-btn.is-active .tg-svg svg,
body.aidc-tg .tg-dropdown__menu .tg-top-btn.is-active .tg-top-btn__inline-icon svg {
  color: var(--aidc-text-primary) !important;
}

body.aidc-tg .ms-dropdown__toggle {
  background: var(--aidc-bg-elevated) !important;
  border-color: var(--aidc-border-default) !important;
  color: var(--aidc-text-primary) !important;
}

body.aidc-tg .ms-dropdown__toggle:hover,
body.aidc-tg .ms-dropdown__toggle:focus-visible {
  background: color-mix(in srgb, var(--aidc-bg-elevated) 94%, white 6%) !important;
  border-color: var(--aidc-border-strong) !important;
  outline: none;
}

body.aidc-tg .ms-dropdown__menu {
  background: var(--aidc-bg-popover) !important;
  border-color: var(--aidc-border-default) !important;
  box-shadow: var(--aidc-shadow-popover) !important;
}

body.aidc-tg .ms-dropdown__item {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--aidc-text-secondary) !important;
}

body.aidc-tg .ms-dropdown__item:hover,
body.aidc-tg .ms-dropdown__item:focus-visible {
  background: var(--aidc-btn-secondary-bg-hover) !important;
  border-color: var(--aidc-border-subtle) !important;
  color: var(--aidc-text-primary) !important;
  outline: none;
}

body.aidc-tg .ms-dropdown__item.is-active,
body.aidc-tg .ms-dropdown__item[aria-selected="true"] {
  background: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--aidc-action-primary-from) 36%, transparent) !important;
  color: var(--aidc-text-primary) !important;
}

body.aidc-tg .tg-top-btn {
  background: var(--aidc-bg-card) !important;
  border-color: var(--aidc-border-subtle) !important;
  color: var(--aidc-text-secondary) !important;
  box-shadow: var(--aidc-shadow-popover) !important;
}

body.aidc-tg .tg-top-btn:hover,
body.aidc-tg .tg-top-btn:focus-visible {
  background: color-mix(in srgb, var(--aidc-bg-card) 94%, white 6%) !important;
  border-color: var(--aidc-border-strong) !important;
  color: var(--aidc-text-primary) !important;
}

body.aidc-tg .tg-top-btn.is-active {
  background: color-mix(in srgb, var(--aidc-action-primary-from) 10%, var(--aidc-bg-card) 90%) !important;
  border-color: color-mix(in srgb, var(--aidc-action-primary-from) 36%, transparent) !important;
  color: var(--aidc-text-primary) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aidc-action-primary-from) 18%, transparent) !important;
}

body.aidc-tg .tg-feed-filter__menu {
  background: var(--aidc-bg-popover);
  border-color: var(--aidc-border-default);
  box-shadow: var(--aidc-shadow-popover);
}

body.aidc-tg .tg-feed-filter__option {
  background: transparent;
  border-color: transparent;
  color: var(--aidc-text-secondary);
}

body.aidc-tg .tg-feed-filter__option:hover,
body.aidc-tg .tg-feed-filter__option:focus-visible,
body.aidc-tg .tg-feed-filter__option:active {
  background: var(--aidc-btn-secondary-bg-hover);
  border-color: var(--aidc-border-subtle);
  color: var(--aidc-text-primary);
  box-shadow: none;
}

body.aidc-tg .tg-feed-filter__option.is-active {
  background: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent);
  border-color: color-mix(in srgb, var(--aidc-action-primary-from) 36%, transparent);
  color: var(--aidc-text-primary);
  box-shadow: none;
}

body.aidc-tg .tg-chip {
  background: var(--aidc-btn-secondary-bg);
  border-color: var(--aidc-border-default);
  color: var(--aidc-text-secondary);
}

body.aidc-tg .tg-chip:hover,
body.aidc-tg .tg-chip:focus-visible {
  background: var(--aidc-btn-secondary-bg-hover);
  border-color: var(--aidc-border-strong);
  color: var(--aidc-text-primary);
}

body.aidc-tg .tg-chip.is-active {
  background: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent);
  border-color: color-mix(in srgb, var(--aidc-action-primary-from) 36%, transparent);
  color: var(--aidc-text-primary);
}

body.aidc-tg .tg-project-sheet,
body.aidc-tg .tg-modal {
  background: var(--aidc-backdrop);
}

body.aidc-tg .tg-project-sheet__card,
body.aidc-tg .tg-modal__card {
  background: var(--aidc-bg-modal);
  border-color: var(--aidc-border-default);
  box-shadow: var(--aidc-shadow-modal);
}

body.aidc-tg .tg-project-bar,
body.aidc-tg .tg-feed-pill,
body.aidc-tg .tg-project-sheet__search .input,
body.aidc-tg .tg-modal .input {
  background: var(--aidc-bg-elevated);
  border-color: var(--aidc-border-default);
  color: var(--aidc-text-primary);
}

body.aidc-tg .tg-feed-pill:hover,
body.aidc-tg .tg-project-bar:hover {
  background: color-mix(in srgb, var(--aidc-bg-elevated) 94%, white 6%);
  border-color: var(--aidc-border-strong);
}

body.aidc-tg .tg-bottom-btn:hover,
body.aidc-tg .tg-bottom-btn:focus-visible {
  background: var(--aidc-btn-secondary-bg-hover);
}

body.aidc-tg .tg-bottom-btn.is-active {
  background: color-mix(in srgb, var(--aidc-action-primary-from) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aidc-action-primary-from) 36%, transparent);
}

body.aidc-tg .tg-bottom-btn.is-active .tg-svg svg {
  color: var(--aidc-action-primary-from);
  filter: none;
}

/* Shared image/video generator hierarchy and semantic actions. */
body.aidc-tg .tg-project-label,
body.aidc-tg .tg-project-caret,
body.aidc-tg .tg-feed-count {
  color: var(--aidc-text-muted) !important;
}

body.aidc-tg .tg-project-bar__title [data-project-title] {
  color: var(--aidc-text-primary) !important;
}

body.aidc-tg .tg-project-bar__actions .icon-btn {
  background: var(--aidc-btn-secondary-bg) !important;
  border-color: var(--aidc-border-default) !important;
  color: var(--aidc-action-primary-from) !important;
}

body.aidc-tg .tg-project-bar__actions .icon-btn:hover,
body.aidc-tg .tg-project-bar__actions .icon-btn:focus-visible {
  background: color-mix(in srgb, var(--aidc-action-primary-from) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--aidc-action-primary-from) 34%, transparent) !important;
  outline: none;
}

body.aidc-tg .tg-feed-filter__toggle[aria-expanded="true"] {
  background: color-mix(in srgb, var(--aidc-action-primary-from) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--aidc-action-primary-from) 34%, transparent) !important;
  color: var(--aidc-text-primary) !important;
}

body.aidc-tg .tg-feed-trash-btn {
  background: color-mix(in srgb, var(--aidc-red-500) 8%, transparent) !important;
  border-color: var(--aidc-action-danger-border) !important;
  color: var(--aidc-red-500) !important;
}

body.aidc-tg .tg-feed-trash-btn:hover,
body.aidc-tg .tg-feed-trash-btn:focus-visible {
  background: color-mix(in srgb, var(--aidc-red-500) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--aidc-red-500) 44%, transparent) !important;
  color: var(--aidc-red-500) !important;
  outline: none;
}

/* PWA auth overlay is currently built in tg/tg.js with runtime inline styles.
   These scoped overrides keep its visual layer inside the design system until
   the DOM builder is physically migrated to classes. */
body.aidc-tg [data-aidc-pwa-auth] {
  background: var(--aidc-backdrop) !important;
}

body.aidc-tg [data-aidc-pwa-auth] > div {
  background: var(--aidc-bg-modal) !important;
  border-color: var(--aidc-border-default) !important;
  color: var(--aidc-text-primary) !important;
  box-shadow: var(--aidc-shadow-modal) !important;
}

body.aidc-tg [data-aidc-pwa-auth] > div > p {
  color: var(--aidc-text-secondary) !important;
}

body.aidc-tg [data-aidc-pwa-auth] button {
  background: var(--aidc-btn-secondary-bg) !important;
  border-color: var(--aidc-border-default) !important;
  color: var(--aidc-text-primary) !important;
}

body.aidc-tg [data-aidc-pwa-auth] button:hover,
body.aidc-tg [data-aidc-pwa-auth] button:focus-visible {
  background: var(--aidc-btn-secondary-bg-hover) !important;
  border-color: var(--aidc-border-strong) !important;
  outline: none;
}