/* Убираем паддинги только у шапки на странице тарифов TG WebApp */
body.aidc-tg.pricing-page .tg-topbar {
  padding: 0 !important;
}
/* Убираем внешние отступы вокруг TG header на странице тарифов */
body.aidc-tg.pricing-page #tg-header-root {
  margin: 0 !important;
  padding: 0 !important;
}
body.aidc-tg.pricing-page .tg-topbar {
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* tg.css — ONLY mobile/layout overrides. DO NOT ломать базовый дизайн сайта. */

/* ── Footer: скрыт в WebApp/PWA — юридические ссылки перенесены в аккаунт ── */
body.aidc-tg .footer {
  display: none !important;
}

/* ── Подавляем soft-preload анимацию в WebApp: без мигания/дёргания ── */
html.aidc-soft-preload body.aidc-tg,
html.tg body.aidc-tg {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
body.aidc-tg.aidc-soft-loaded {
  transition: none !important;
}

:root{
  --tg-safe-top: env(safe-area-inset-top, 0px);
  --tg-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tg-header-h: 90px;
  --tg-nav-h: 56px;
}

body.aidc-tg{
  margin: 0;
  padding: 0;
  min-height: 100vh;
  position: relative;
  transform: none !important;
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  height: auto;
}
html.aidc-soft-preload body,
body.aidc-soft-loaded{
  transform: none !important;
}
body.aidc-tg::-webkit-scrollbar{
  width:0;
  height:0;
}

/* WebApp: show #app IMMEDIATELY — no hidden-then-reveal pattern.
   Progressive rendering is better UX than 1-4s black void then a jump. */
body.aidc-tg #app{
  opacity: 1 !important;             /* always visible — no FOUC hide */
  transform: none !important;
  transition: none !important;
  padding: 0 !important;
}

/* ── LAYOUT SHIFT PREVENTION: reserve space for header/nav BEFORE JS renders them ── */
/* Without this, each JS render (header ~90px, nav ~56px) causes layout shifts.
   Reserve space so content position is stable from first paint. */
body.aidc-tg #tg-header-root:empty {
  min-height: 90px;  /* approx: 2 rows of buttons + padding + border */
}
body.aidc-tg #tg-bottom-nav-root:empty {
  min-height: var(--tg-nav-h, 56px);     /* reserve nav space at bottom */
}
/* :empty pseudo-class ensures reservation only applies before JS fills in content */

.tg-page{
  padding: 10px 8px calc(var(--tg-nav-h) + var(--tg-safe-bottom) + 18px);
  position: relative;
}

.tg-content--full{
  padding: 10px 6px calc(var(--tg-nav-h) + var(--tg-safe-bottom) + 10px);
}

.tg-actions{ display:flex; gap:10px; margin-top: 12px; flex-wrap: wrap; }

.page-account .tg-actions{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap:8px;
}
.page-account .tg-actions > button{
  width:100%;
  justify-content:center;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:10px 6px;
}

.page-account .tg-page{
  padding-bottom: calc(var(--tg-nav-h) + var(--tg-safe-bottom) + 36px);
}
.page-account .tg-block{
  margin-bottom: 12px;
}

.tg-account-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.tg-lang-switch--panel{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  padding:2px 8px;
  font-size:11px;
}

.tg-canvas-shell{ display:flex; flex-direction:column; gap:10px; }
.tg-canvas-placeholder{
  height: 55vh;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.7;
}

/* ===== TG HEADER: 2 ROWS ===== */
.tg-topbar{
  position: sticky;
  top: 0;
  z-index: 200000;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px 12px 12px;
  background: rgba(10, 12, 18, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: visible;
}

body.aidc-tg .panel-header{
  position: relative;
  margin-bottom: 8px;
}

/* В TG WebApp панели не должны обрезать контент — прокрутка идёт через body */
body.aidc-tg .panel{
  overflow: visible;
  padding: 10px 10px 8px;
  border-radius: 16px;
}

/* В TG WebApp main — одна колонка, без grid-колонок десктопа */
body.aidc-tg .main{
  display: block;
}

body.aidc-tg .panel-title{
  margin-bottom: 6px;
}

.tg-topbar-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width: 0;
}

.tg-topbar-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.tg-brand-logo{
  width:34px;
  height:34px;
  border-radius: 50%;
  cursor:pointer;
}

.tg-brand{
  font-weight:700;
  letter-spacing:0.12em;
  font-size:12px;
  color:#f3f4ff;
  white-space:nowrap;
  display:block;
}

.tg-brand-wrap{
  display:flex;
  flex-direction:column;
  line-height:1.2;
  cursor:pointer;
}

.tg-brand-sub{
  font-size:10px;
  letter-spacing:0.08em;
  color:rgba(220,223,255,0.72);
}

.tg-topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}

.tg-lang-switch{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:#cfd2ff;
}

.tg-lang-switch button{
  background:none;
  border:none;
  color:#cfd2ff;
  cursor:pointer;
  opacity:.6;
  padding:0;
}

.tg-lang-switch button.active{
  opacity:1;
  font-weight:600;
}
.tg-lang-switch button.lang-btn--active{
  opacity:1;
  font-weight:600;
}

.tg-lang-switch span{
  opacity:.4;
}

.tg-header-tools{
  display:flex;
  align-items:center;
  gap:10px;
  margin-right: 2px;
}
.tg-header-icon{
  position:relative;
  width:26px;
  height:26px;
  display:inline-grid;
  place-items:center;
  border:none;
  background:transparent;
  color: rgba(232,235,255,0.72);
  cursor:pointer;
  padding:0;
}
.tg-header-icon:hover{
  color: rgba(232,235,255,0.95);
}
.tg-header-icon__svg{
  width:18px;
  height:18px;
  display:block;
}
  .tg-header-icon__badge{
    position:absolute;
    top:-6px;
    right:-6px;
    min-width:18px;
    height:18px;
  padding:0 5px;
  border-radius:999px;
  background:linear-gradient(120deg,#ff62c5,#ff008c);
  border:1px solid rgba(255,0,140,0.35);
  color:#120914;
  font-weight:800;
  font-size:11px;
    line-height:18px;
    text-align:center;
    box-shadow:0 10px 20px rgba(255,0,140,0.22);
  }
.tg-header-auth{
  display:inline-flex;
  align-items:center;
  padding:6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
}
  .tg-header-auth__dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ff5a6b;
    box-shadow:0 0 8px rgba(255,90,107,0.7);
  }
.tg-header-auth[data-status="authorized"] .tg-header-auth__dot{ background:#28d36a; box-shadow:0 0 8px rgba(40,211,106,0.7); }
.tg-header-client{
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:#dfe2ff;
}

/* NAV ROW */
.tg-topbar-nav{
  display:flex;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:2px;
  background: transparent;
}
.tg-topbar-nav.tg-topbar-nav--list{
  flex-wrap:wrap;
}

/* CHIP BUTTON */
.tg-top-btn{
  min-width:72px;
  padding:12px 12px 10px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.1);
  background:
    radial-gradient(circle at 0 0, rgba(255,0,140,0.18), transparent 55%),
    rgba(9,9,16,0.96);
  box-shadow:
    0 24px 64px rgba(0,0,0,0.9),
  0 0 0 1px rgba(255,255,255,0.02);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:pointer;
  color: rgba(240,242,255,0.82);
  opacity:1;
  text-align:center;
}

.tg-top-btn .tg-svg svg{
  width:36px;
  height:36px;
  stroke-width: 0.8;
}

.tg-top-btn span{
  font-size:16px;
  letter-spacing:0.06em;
  color: rgba(220,223,255,0.9);
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Чуть меньше шрифт в русской локали, чтобы подписи не наезжали на иконки */
html[lang="ru"] .tg-top-btn span{
  font-size:14px;
}

.tg-top-btn.is-active{
  border-color: rgba(255,255,255,0.22);
  background:
    radial-gradient(circle at 0 0, rgba(255,0,140,0.22), transparent 55%),
    rgba(12,12,20,0.98);
  box-shadow:
    0 0 0 1px rgba(255,0,140,0.45),
    0 0 22px rgba(255,0,140,0.28),
    0 18px 36px rgba(0,0,0,0.55);
}

.tg-icon-only{
  width:44px; height:44px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.tg-icon-only .tg-svg svg{
  width:26px;
  height:26px;
}

/* Sessions block */
.sessions-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.sessions-title { font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; }
.sessions-sub { font-size: 12px; color: #9ea3bb; margin-top: 6px; }
.sessions-actions { display:flex; gap:10px; flex-wrap:wrap; }
.sessions-group { margin-top: 12px; }
.sessions-group__title { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #9ea3bb; margin-bottom: 6px; }
.session-card { border-radius: 14px; padding: 12px; background: rgba(12,14,24,0.72); border:1px solid rgba(255,255,255,0.08); display:grid; gap:6px; }
.session-meta { display:flex; flex-wrap:wrap; gap:10px; font-size:11px; color:#b6b8cc; }
.session-actions { display:flex; gap:8px; }
.session-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,0.08); font-size:10px; text-transform:uppercase; letter-spacing:0.08em; }
.session-current { color:#b8ffcf; font-size:10px; }
.sessions-empty { margin-top: 12px; color: #9ea3bb; font-size: 12px; }

/* ===== Bottom Nav ===== */
.tg-bottom-nav{
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  height: var(--tg-nav-h);
  z-index: 200;
  display:flex;
  justify-content:space-around;
  align-items:center;
  background: rgba(10, 12, 18, 0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-bottom: env(safe-area-inset-bottom);
}

.tg-bottom-btn{
  border:0;
  background:transparent;
  color:#cfd2ff;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:10px 12px;
  cursor:pointer;
  opacity:.85;
}
.tg-bottom-btn .tg-svg svg{
  width:34px;
  height:34px;
  stroke-width: 0.4;
}
.tg-bottom-btn span{ font-size:11px; letter-spacing:0.02em; }

.tg-bottom-btn.is-active{
  opacity:1;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,0,140,0.55);
}
.tg-bottom-btn.is-active .tg-svg svg{
  filter: drop-shadow(0 0 10px rgba(255,0,140,.45));
  color: #f97ad5;
}
.tg-bottom-btn:hover,
.tg-bottom-btn:focus-visible{
  opacity: 1;
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
}
.tg-bottom-btn:active{
  background: rgba(255,255,255,0.10);
}

.tg-svg svg{
  display:block;
  color: rgba(220,223,255,0.85);
}

/* stroke тоньше */
.tg-svg svg [stroke]{
  stroke-width: 0.6;
}

/* dropdown */
.tg-dropdown{
  position: relative;
}
.tg-dropdown--header{
  position: relative;
}
.tg-dropdown__toggle{
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  color:#e8ebff;
  padding:8px 10px;
  cursor:pointer;
}
.tg-dropdown__menu{
  position:absolute;
  top: calc(100% + 6px);
  right:0;
  width: clamp(180px, 68vw, 220px);
  background:
    radial-gradient(circle at 0 0, rgba(255,0,140,0.18), transparent 55%),
    rgba(9,9,16,0.96);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  padding:6px;
  display:none;
  max-height: 65vh;
  overflow-y:auto;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.9),
    0 0 0 1px rgba(255,255,255,0.02);
  z-index: 200001;
  max-width: calc(100vw - 24px);
}
.tg-dropdown.is-open .tg-dropdown__menu{
  display:block;
}

/* dropdown in header: align under burger */
.tg-dropdown--header .tg-dropdown__menu{
  top: calc(100% + 10px);
  right: 0;
  left: auto;
}
.tg-dropdown__menu .tg-top-btn{
  width:100%;
  flex-direction: row;
  align-items:center;
  justify-content:flex-start;
  padding:8px 10px;
  gap:10px;
  border-radius:14px;
  min-height: 40px;
  margin:4px 0;
}
.tg-dropdown__menu .tg-top-btn span:last-child{
  text-align:left;
  font-size:14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tg-dropdown__menu .tg-top-btn .tg-svg svg{
  width:24px;
  height:24px;
  stroke-width: 0.4;
}
.tg-dropdown__menu .tg-top-btn.is-active,
.tg-dropdown__menu .tg-top-btn:hover,
.tg-dropdown__menu .tg-top-btn:active,
.tg-dropdown__menu .tg-top-btn:focus-visible{
  background: linear-gradient(120deg, #ff62c5, #ff008c);
  border-color: rgba(255,255,255,0.25);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 0 18px rgba(255,0,140,0.35);
  color: #0b0c12;
}
.tg-dropdown__menu .tg-top-btn.is-active .tg-svg svg,
.tg-dropdown__menu .tg-top-btn:hover .tg-svg svg,
.tg-dropdown__menu .tg-top-btn:active .tg-svg svg,
.tg-dropdown__menu .tg-top-btn:focus-visible .tg-svg svg{
  color: #0b0c12;
}

/* ── Settings section in dropdown ── */
.tg-top-btn__inline-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  flex-shrink:0;
}
.tg-top-btn__inline-icon svg{
  width:18px;
  height:18px;
  color:currentColor;
}
.tg-dropdown__menu .tg-top-btn.is-active .tg-top-btn__inline-icon svg,
.tg-dropdown__menu .tg-top-btn:hover .tg-top-btn__inline-icon svg,
.tg-dropdown__menu .tg-top-btn:active .tg-top-btn__inline-icon svg,
.tg-dropdown__menu .tg-top-btn:focus-visible .tg-top-btn__inline-icon svg{
  color: #0b0c12;
}

.ms-dropdown{
  position: relative;
}
.ms-dropdown__toggle{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(circle at 0 0, rgba(255,0,140,0.12), transparent 55%),
    rgba(12,12,18,0.96);
  color:#e8ebff;
  padding:10px 12px;
  text-align:left;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.ms-dropdown__menu{
  position:absolute;
  top: calc(100% + 6px);
  left:0;
  right:0;
  max-height: 260px;
  overflow-y:auto;
  background:
    radial-gradient(circle at 0 0, rgba(255,0,140,0.18), transparent 55%),
    rgba(9,9,16,0.98);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  padding:6px;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.9),
    0 0 0 1px rgba(255,255,255,0.02);
  display:none;
  z-index: 1200;
}
.ms-dropdown__menu.is-open{ display:block; }
.ms-dropdown__item{
  width:100%;
  border:1px solid transparent;
  border-radius:10px;
  background: transparent;
  color:#e8ebff;
  padding:10px;
  text-align:left;
  cursor:pointer;
}
.ms-dropdown__item:hover,
.ms-dropdown__item:focus-visible{
  background: linear-gradient(120deg, #ff62c5, #ff008c);
  color:#0b0c12;
}

/* TG: свободный скролл страницы без фиксированного холста */
html.aidc-tg,
body.aidc-tg{
  height: auto;
  overflow: auto;
}
body.aidc-tg #app{
  height: auto;
  min-height: 100vh;
}
body.aidc-tg #app > .shell{
  display: block;
  min-height: auto;
  flex: 0 0 auto;
  padding: 0;
}
body.aidc-tg #app > .shell > main{
  overflow: visible;
}
body.aidc-tg #app > main{
  overflow: visible;
}
body.aidc-tg .panel,
body.aidc-tg .aidc-col{
  height: auto;
  overflow: visible;
}
body.aidc-tg .aidc-scroll{
  overflow: visible;
}

/* Главная: меню списком (кнопки во всю ширину) */
.tg-home .tg-topbar-nav--list{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  gap:10px;
  background: transparent;
  overflow: hidden;
}
@media (max-width: 359px){
  .tg-home .tg-topbar-nav--list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 319px){
  .tg-home .tg-topbar-nav--list{
    grid-template-columns: 1fr;
  }
}
.tg-home .tg-top-btn{
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:12px 10px;
  border-radius:22px;
  background:
    radial-gradient(circle at 0 0, rgba(255,0,140,0.18), transparent 55%),
    rgba(9,9,16,0.96);
  box-shadow:
    0 24px 64px rgba(0,0,0,0.9),
    0 0 0 1px rgba(255,255,255,0.02);
  height: 100%;
}
.tg-home .tg-top-btn .tg-svg svg{
  width:32px;
  height:32px;
  stroke-width: 0.8;
}
.tg-home .tg-top-btn span:last-child{
  margin-left:0;
  font-size:16px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  display:block;
  text-align:center;
}

html[lang="ru"] .tg-home .tg-top-btn span:last-child{
  font-size:14px;
}
.tg-home .tg-top-btn span:last-child{
  letter-spacing: 0.04em;
}
.tg-home .tg-top-btn[data-key="academy"]{
  grid-column: auto;
}

/* индикатор авторизации WebApp */
.tg-auth-indicator{
  position: fixed;
  top: calc(10px + var(--tg-safe-top));
  right: 12px;
  z-index: 300;
  padding: 10px 12px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 0 0, rgba(255,0,140,0.18), transparent 55%),
    rgba(10,12,18,0.94);
  border:1px solid rgba(255,255,255,0.14);
  color:#e8ebff;
  font-size:12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
}
.tg-auth-indicator.is-error{
  border-color: rgba(255,80,80,0.4);
  color:#ffc8c8;
}

/* Чтобы контент не прятался под нижним меню */
.tg-page{
  padding-bottom: calc(var(--tg-nav-h) + var(--tg-safe-bottom) + 22px);
}

/* Workspace / Feed / Picker / Sheet */
.tg-section{
  margin-bottom:4px;
}
@media (max-width: 420px){
  .tg-section{
    margin-bottom:4px;
  }
}
.tg-block{
  margin-bottom:4px;
}
@media (max-width: 420px){
  .tg-block{
    margin-bottom:4px;
  }
}

.tg-project-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top: 6px;
}

.tg-project-bar__title{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:#f3f4ff;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  border-radius:12px;
  padding:10px 12px;
  min-height:44px;
}
.tg-project-bar__title .pill{
  font-size:12px;
  padding:4px 8px;
}
.tg-project-caret{ opacity:.7; }
.tg-project-bar__actions .icon-btn{
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  color:#d9deef;
}
.tg-project-sheet__actions .icon-btn{
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  color:#d9deef;
}
.tg-modal .icon-btn{
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  color:#d9deef;
}

.tg-feed-filters{
  display:flex;
  gap:8px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  padding:6px 0;
}

.tg-feed-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.tg-feed-header__right{
  display:flex;
  align-items:center;
  gap:8px;
}
.tg-feed-pill{
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color:#e8ebff;
  height:28px;
  padding:0 10px;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.tg-feed-trash-btn{
  cursor:pointer;
  padding:0 6px;
  color:rgba(255,255,255,0.5);
  transition:color .15s;
}
.tg-feed-trash-btn:hover,
.tg-feed-trash-btn:active{
  color:#ff4d6a;
}
.tg-feed-filter{
  position:relative;
}
.tg-feed-filter__toggle{
  cursor:pointer;
}
.tg-feed-filter__chevron{
  display:inline-flex;
  align-items:center;
}
.tg-feed-filter__menu{
  position:absolute;
  top: calc(100% + 6px);
  right:0;
  min-width: 180px;
  background:
    radial-gradient(circle at 0 0, rgba(255,0,140,0.18), transparent 55%),
    rgba(9,9,16,0.96);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  padding:6px;
  display:none;
  max-height: 65vh;
  overflow-y:auto;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.9),
    0 0 0 1px rgba(255,255,255,0.02);
  z-index: 200001;
}
.tg-feed-filter.is-open .tg-feed-filter__menu{
  display:block;
}
.tg-feed-filter__option{
  width:100%;
  justify-content:flex-start;
  border-radius:10px;
  height:28px;
  margin:4px 0;
  cursor:pointer;
}
.tg-feed-filter__option.is-active,
.tg-feed-filter__option:hover,
.tg-feed-filter__option:active,
.tg-feed-filter__option:focus-visible{
  background: linear-gradient(120deg, #ff62c5, #ff008c);
  border-color: rgba(255,255,255,0.25);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 0 18px rgba(255,0,140,0.35);
  color: #0b0c12;
}

.tg-chip{
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color:#e8ebff;
  padding:6px 12px;
  font-size:12px;
  cursor:pointer;
}
.tg-chip.is-active{
  background: linear-gradient(120deg, #ff62c5, #ff008c);
  color:#0b0c12;
  border-color: rgba(255,255,255,0.26);
}

.tg-feed-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top: 8px;
}
.tg-feed-empty{
  opacity:0.7;
  padding:12px;
  text-align:center;
  color:#cfd2ff;
}
.tg-feed-card{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.tg-feed-card__top{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#cfd2ff;
}
.tg-feed-card__body img{
  width:100%;
  border-radius:14px;
  object-fit:cover;
  max-height: 260px;
  background: #0a0a10;
}
/* While image is loading (no src yet), prevent invisible white box */
.tg-feed-card__body img:not([src]),
.tg-feed-card__body img[src=""],
.tg-feed-card__body img[src="about:blank"]{
  min-height:80px;
  background:#0a0a10;
}
/* Subtle shimmer while image is still loading */
.tg-feed-card__body img[data-auth-src]:not([src]),
.tg-feed-card__body img[data-auth-src][src=""]{
  background:linear-gradient(110deg,#0a0a10 30%,#15152a 50%,#0a0a10 70%);
  background-size:200% 100%;
  animation:tgImgShimmer 1.4s ease-in-out infinite;
}
@keyframes tgImgShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.tg-feed-card__body video{
  width:100%;
  border-radius:14px;
  object-fit:contain;
  max-height: 260px;
  background: #0a0a10;
}
.tg-feed-card__body{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background:#0a0a10;
}
/* Multi-asset grid inside feed card */
.tg-feed-card__grid{
  display:grid;
  gap:3px;
  border-radius:14px;
  overflow:hidden;
}
.tg-feed-card__grid--2{grid-template-columns:1fr 1fr}
.tg-feed-card__grid--3{grid-template-columns:1fr 1fr 1fr}
.tg-feed-card__grid--4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.tg-feed-card__grid-cell{position:relative;overflow:hidden;background:#0a0a10}
.tg-feed-card__grid-cell img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  max-height:200px;
}
/* Override reference-prompt thumb rendering for WebView compat (cache-safe) */
.refp-item{position:relative;height:0!important;padding-top:100%!important;overflow:hidden;border-radius:8px;aspect-ratio:unset!important;background:#0d0d0d!important;border:1px solid rgba(255,255,255,0.12)!important;box-sizing:content-box!important}
.refp-item img,.refp-thumb{position:absolute!important;top:0;left:0;width:100%;height:100%;object-fit:contain!important;object-position:center;display:block}
/* Override reference-picker-modal for TG WebApp */
/* CSS: aspect-ratio:1/1 makes thumbnails square */
/* ★ All rules scoped to body.aidc-tg so they don't leak to canvas/desktop pages */
body.aidc-tg .aidc-rp-grid{
  grid-template-columns:repeat(3,1fr)!important;
  gap:4px!important;
  align-items:start!important;
  align-content:start!important;
  flex:1!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  min-height:0!important;
}
body.aidc-tg .aidc-rp-card{position:relative!important;overflow:hidden!important;display:block!important;border-radius:6px!important;height:0!important;padding-bottom:100%!important;box-sizing:content-box!important;border:1px solid rgba(255,255,255,0.12)!important}
body.aidc-tg .aidc-rp-card .rp-thumb{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;overflow:hidden!important;background:#0d0d0d!important;display:block!important}
body.aidc-tg .aidc-rp-card .rp-thumb img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important}
body.aidc-tg .aidc-rp-card .rp-name{position:absolute!important;bottom:0!important;left:0!important;right:0!important;padding:4px 6px!important;font-size:11px!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;background:linear-gradient(transparent,rgba(0,0,0,.7))!important;z-index:2!important}
body.aidc-tg .aidc-rp-card.is-selected{outline:3px solid #ff3ba6!important}
/* TG WebApp: full-screen modal and proper scroll */
body.aidc-tg .aidc-rp-panel{width:100vw!important;max-width:100vw!important;height:100vh!important;max-height:100vh!important;border-radius:0!important}
body.aidc-tg .aidc-rp-body{overflow:hidden!important;min-height:0!important;display:flex!important;flex-direction:column!important}

/* Overlay action buttons on each grid cell — always visible (no hover needed on mobile) */
.tg-grid-actions{
  position:absolute;
  bottom:6px;
  right:6px;
  display:flex;
  gap:4px;
  opacity:1;
  z-index:2;
  pointer-events:auto;
}
.tg-grid-btn{
  width:28px;
  height:28px;
  border-radius:8px;
  border:none;
  background:rgba(0,0,0,.6);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.tg-grid-btn:active{transform:scale(.92)}
.tg-grid-btn--danger{background:rgba(200,30,30,.7)}
.tg-grid-btn--danger:active{background:rgba(220,40,40,.9)}
.tg-grid-btn--fav.is-active{color:#facc15;background:rgba(0,0,0,.7)}
.tg-grid-btn--fav.is-active svg path{fill:currentColor}
.tg-feed-card__error{
  border:1px solid rgba(255, 107, 107, 0.5);
  background: rgba(255, 107, 107, 0.12);
  color:#ffd0dc;
  border-radius:12px;
  padding:10px 12px;
  font-size:12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.tg-feed-card__error-title{
  font-weight:700;
  letter-spacing:0.02em;
}
.tg-feed-card__error-text{
  color:#ffd6e0;
  word-break:break-word;
}
.tg-feed-card__placeholder{
  border:1px dashed rgba(255,255,255,0.12);
  border-radius:12px;
  padding:12px;
  text-align:center;
  color:#cfd2ff;
}
/* --- Processing / queued generation animation --- */
.tg-feed-card--pending .tg-feed-card__body{
  position:relative;
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(10,12,18,0.7);
}
.tg-feed-card__spinner{
  width:36px;
  height:36px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,0.12);
  border-top-color:#ff62c5;
  animation:tgSpin 0.85s linear infinite;
}
@keyframes tgSpin{
  to{ transform:rotate(360deg); }
}
.tg-feed-card__status-badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  background:rgba(255,98,197,0.18);
  color:#ff8fd4;
  border:1px solid rgba(255,98,197,0.25);
}
.tg-feed-card__status-badge--queued{
  background:rgba(255,182,72,0.15);
  color:#ffcf7a;
  border-color:rgba(255,182,72,0.25);
}
.tg-feed-card__status-badge--failed{
  background:rgba(255,107,107,0.15);
  color:#ffb0b0;
  border-color:rgba(255,107,107,0.35);
}
.tg-feed-card--pending .tg-feed-card__placeholder{
  border:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:24px 12px;
}
.tg-feed-card__actions{
  display:flex;
  gap:8px;
  margin-top: 4px;
}
.tg-feed-card__tags{
  position:absolute;
  bottom:8px;
  left:8px;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  max-width:calc(100% - 16px);
}
.tg-feed-tag{
  padding:3px 8px;
  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(4px);
  border-radius:999px;
  font-size:10px;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.tg-download-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  min-width:36px;
}
.tg-download-btn svg{
  width:16px;
  height:16px;
}
.tg-delete-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  min-width:36px;
  color:#ff6b6b;
}
.tg-delete-btn:hover{
  background:rgba(255,107,107,0.15);
  border-color:rgba(255,107,107,0.4);
}
.tg-delete-btn svg{
  width:16px;
  height:16px;
}
.tg-feed-card.tg-highlight{
  animation: tgHighlightPulse 0.6s ease-in-out 3;
  box-shadow: 0 0 0 2px rgba(255,98,197,0.5);
}
@keyframes tgHighlightPulse{
  0%,100%{ box-shadow:0 0 0 2px rgba(255,98,197,0.2); }
  50%{ box-shadow:0 0 0 6px rgba(255,98,197,0.5); }
}

.tg-fab{
  position: fixed;
  right: 16px;
  bottom: calc(var(--tg-nav-h) + var(--tg-safe-bottom) + 16px);
  z-index: 180;
}

.tg-modal{
  position: fixed;
  inset:0;
  background: rgba(0,0,0,0.65);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 300;
  padding:16px;
}
.tg-modal.is-open{ display:flex; }
.tg-modal__card{
  width:min(440px, 100%);
  max-height: 80vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* Inputs inside TG UI (avoid white system look) */
.tg-modal input.input,
.tg-modal .input,
.tg-create-panel input,
.tg-create-panel textarea,
.tg-project-sheet input,
.tg-project-sheet textarea{
  appearance:none;
  -webkit-appearance:none;
  background: rgba(18,19,28,0.96);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:12px;
  color:#e8ebff;
  padding:10px 12px;
  width:100%;
  outline:none;
}
.tg-modal input.input::placeholder,
.tg-create-panel input::placeholder,
.tg-create-panel textarea::placeholder{
  color: rgba(232,235,255,0.55);
}
.tg-modal__body{
  overflow:auto;
  padding:10px 0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.tg-picker-item{
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  padding:10px 12px;
  background: rgba(255,255,255,0.04);
  color:#e8ebff;
  text-align:left;
}
.tg-picker-actions{
  display:flex;
  gap:8px;
  margin-top:6px;
}

/* Project sheet */
.tg-project-sheet{
  position: fixed;
  left:0; right:0; top: calc(var(--tg-safe-top, 0px) + 56px);
  z-index: 260;
  padding: 0 10px;
  display:none;
}
.tg-project-sheet.is-open{
  display:block;
}
.tg-project-sheet__card{
  border-radius: 18px 18px 0 0;
  padding: 12px 12px calc(var(--tg-safe-bottom) + 12px);
  max-height: 86vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 0 0, rgba(255,0,140,0.18), transparent 55%),
    rgba(9,9,16,0.96);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 24px 64px rgba(0,0,0,0.9),
    0 0 0 1px rgba(255,255,255,0.02);
}
.tg-project-sheet__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:8px;
}
.tg-project-sheet__title{
  font-weight:700;
  letter-spacing:0.08em;
}
.tg-project-sheet__actions{ display:flex; gap:8px; }
.tg-project-sheet__search{
  padding-bottom:8px;
}
.tg-project-sheet__search input{
  width:100%;
  border-radius:18px;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  padding:10px 12px;
  color:#e8ebff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
.tg-project-sheet__recent{
  margin-bottom:10px;
}
.tg-project-sheet__crumbs{
  padding:6px 0;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.tg-crumb{
  padding:4px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  cursor:pointer;
  color:#e8ebff;
}
.tg-project-sheet__lists{
  max-height: 60vh;
  overflow:auto;
  padding-right:4px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.tg-project-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.tg-project-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color:#e8ebff;
  cursor:pointer;
}
.tg-project-item__title{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.tg-project-item__meta{
  font-size:12px;
  opacity:.7;
}

/* ═══════════════════════════════════════════════════════
   Model-settings layout overrides for TG WebApp (mobile)
   Keeps visual parity with the main site while fitting
   a narrow phone viewport.
   ═══════════════════════════════════════════════════════ */

/* Selects — custom styling */
.ms-shell select,
.ms-select{
  appearance:none;
  -webkit-appearance:none;
  background: rgba(18,19,28,0.96);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:12px;
  color:#e8ebff;
  padding:7px 10px;
  width:100%;
}
.ms-shell option{
  background: #10121a;
  color:#e8ebff;
}

/* Main fields grid — single column on mobile WebApp */
.ms-shell .ms-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
}

/* Select rows and field cells — full width */
.ms-shell .ms-select-row,
.ms-shell .ms-field{
  width:100%;
}

/* Slider row (label + slider + value) */
.ms-shell .ms-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height: var(--ms-control-h, 34px);
}

/* Slider thumb area — smaller min-width for mobile */
.ms-shell .ms-slider{
  min-width: 0;
  flex: 1 1 auto;
}

/* ── Triple-row (aspect_ratio, seed, quality …) ──
   On mobile: 2 columns (so seed --span2 fills the row).
   Matches site behavior at narrow breakpoints.           */
.ms-shell .ms-row--triple{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px;
  grid-column: 1 / -1;
  align-items:stretch;
}
.ms-shell .ms-row--triple > .ms-field--span2{
  grid-column: span 2;
}
.ms-shell .ms-row--triple > .ms-field--span3{
  grid-column: span 2; /* on 2-col mobile → full width */
}

/* ── Double-row (prompt_optimizer, ref_type …) ── */
.ms-shell .ms-row--double{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px;
  grid-column: 1 / -1;
  align-items:stretch;
}

/* ── Dividers — full width across grid ── */
.ms-shell .ms-divider{
  grid-column: 1 / -1;
}

/* ── Presets grid — 2 columns on mobile ── */
.ms-shell .ms-presets{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:6px;
}

/* ── Seed control — compact on mobile ── */
.ms-shell .ms-seed-control{
  width:100%;
}

/* ── Toggle — full width ── */
.ms-shell .ms-toggle{
  width:100%;
}

/* ── Text inputs — full width ── */
.ms-shell .ms-text-input{
  width:100%;
}

/* ── Tip bubble — avoid overflow on narrow screens ── */
.ms-shell .ms-tip-bubble{
  min-width:180px;
  max-width:calc(100vw - 60px);
  left:auto;
  right:0;
  transform:none;
}

/* ── ms-shell overflow: visible in TG so dropdown menus aren't clipped ── */
body.aidc-tg .ms-shell{
  overflow: visible;
}

.tg-create-panel{
  margin-top: 2px;
}
.tg-create-tabs{
  display:flex;
  gap:4px;
  margin-bottom:4px;
  flex-wrap:wrap;
  margin-top: 6px;
}
.tg-create-tabs button{
  flex:1;
}
.tg-create-panels{
  display:block;
  margin-top: 6px;
}
.tg-create-panel__pane{
  display:none;
}
.tg-create-panel__pane.is-active{
  display:block;
}

/* Вкладка "Референсы": скрываем встроенный промпт модуля, чтобы рефы и промпт были отдельными табами */
[data-ref-module] .refp-prompt{
  display: none;
}
[data-ref-module] .refp-footer .refp-hint{
  margin-top: 6px;
}
[data-ref-module] .refp-footer .refp-btn{
  display: none;
}

/* Prompt textarea — увеличенная высота для TG WebApp */
[data-sheet-panel="prompt"] .refp-textarea {
  min-height: 180px;
  max-height: 50vh;
  resize: vertical;
}

.tg-create-actions{
  margin-top:4px;
}
.tg-create-actions .btn-primary{
  width:100%;
}

.tg-ref-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.tg-ref-item{
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;
  padding:8px 10px;
  color:#e8ebff;
}

/* ---------- Tree / Project picker ---------- */
.tg-tree {
  max-height: 60vh;
  overflow: auto;
  padding: 6px 0 6px 4px;
  margin-right: -8px;
  scrollbar-width: thin;
  scrollbar-color: #7b7d9a transparent;
}
.tg-tree::-webkit-scrollbar { width: 6px; }
.tg-tree::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #ffc9ff, #83b4ff); border-radius: 999px; }

.tg-tree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 8px;
  margin: 2px 0;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  color: #e2e5f2;
}
.tg-tree-row.is-project {
  background: rgba(255,255,255,0.02);
}
.tg-tree-row.is-match {
  border-color: rgba(255,170,255,0.5);
  box-shadow: 0 0 0 1px rgba(255,170,255,0.15);
}
.tg-tree-row:hover {
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
}
.tg-tree-title {
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  flex: 1;
}
.tg-tree-title.is-active {
  color: #ffb4ff;
}
.tg-tree-toggle {
  border: none;
  background: transparent;
  color: #cfd3e6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  cursor: pointer;
}
.tg-tree-icon {
  color: #d6d7e2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tg-tree-icon img, .tg-tree-icon svg {
  width: 18px;
  height: 18px;
}
.tg-tree-icon-wrap {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.tg-tree-badge {
  position: absolute;
  right: -6px;
  top: -6px;
  color: #f7c948;
  width: 14px;
  height: 14px;
}
.tg-icon-img{
  /* <img src="*.svg"> doesn't inherit currentColor; tint black svg to bright off-white for dark TG theme */
  filter: invert(95%) sepia(5%) saturate(300%) hue-rotate(195deg) brightness(110%) contrast(95%);
}
.tg-tree-badge .tg-icon-img{
  /* "active" star badge — gold */
  filter: invert(88%) sepia(26%) saturate(695%) hue-rotate(347deg) brightness(104%) contrast(103%);
}
.tg-tree-toggle svg {
  transition: transform 0.2s ease;
}
.tg-tree-toggle[data-dir="down"] svg {
  transform: rotate(90deg);
}
.tg-tree-toggle[data-dir="up"] svg {
  transform: rotate(-90deg);
}
.tg-icon--chevron.down svg {
  transform: rotate(90deg);
}
.tg-icon--chevron.up svg {
  transform: rotate(-90deg);
}
.tg-tree-actions {
  width: 100%;
  display: inline-flex;
  gap: 6px;
  justify-content: flex-end;
}
.tg-tree-action-btn {
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #e4e6f5;
  border-radius: 10px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tg-tree-action-btn:hover {
  background: rgba(255,255,255,0.08);
}
.tg-tree-edit-btn,
.tg-tree-fav-btn{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(18,19,28,.35);
  color: #e8ebff;
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tg-tree-edit-btn:hover,
.tg-tree-fav-btn:hover{
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.07);
}
.tg-tree-fav-btn.is-on{
  border-color: rgba(255,210,110,0.35);
  box-shadow: 0 0 0 1px rgba(255,210,110,0.18);
}
.tg-tree-fav-btn.is-on .tg-icon-img{
  filter: invert(88%) sepia(26%) saturate(695%) hue-rotate(347deg) brightness(104%) contrast(103%);
}
.tg-project-sheet__actions .icon-btn.is-active {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.08);
}

.tg-recent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.tg-recent-toggle {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  color: #dfe2f5;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.tg-recent-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tg-recent-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
}
.tg-recent-actions{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tg-recent-item:hover {
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}
.tg-recent-icon {
  color: #d6d7e2;
  display: inline-flex;
}
.tg-recent-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tg-recent-title {
  color: #f1f2ff;
  font-weight: 600;
}
.tg-recent-meta {
  color: #9ca0b8;
  font-size: 12px;
}

.tg-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: rgba(12,12,20,0.9);
  color: #f5f5ff;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 14px 30px rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 200020;
}
.tg-toast.is-visible {
  opacity: 1;
}

.tg-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200015;
  padding: 20px;
  pointer-events: none;
}
.tg-modal.is-open{
  display: flex;
  pointer-events: auto;
}
.tg-modal__card {
  background: rgba(16,16,26,0.96);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  min-width: 280px;
  max-width: 420px;
  color: #e9ebf5;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7);
  max-height: 80vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.tg-modal__title {
  font-size: 15px;
  margin-bottom: 12px;
}
.tg-modal__field {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 10px 12px;
  color: #f5f6ff;
  margin-bottom: 12px;
}
.tg-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.tg-btn {
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(135deg, #ff62c5, #6c7bff);
  color: #fff;
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
}
.tg-btn--ghost {
  background: rgba(255,255,255,0.06);
}

/* ===== Safety: never allow huge icons inside Project Picker / Sheet ===== */
.tg-project-sheet svg,
.tg-project-sheet img{
  max-width: 22px !important;
  max-height: 22px !important;
}

.tg-project-sheet .tg-svg svg{
  width: 20px !important;
  height: 20px !important;
  display: block;
}

.tg-project-sheet .tg-tree-icon svg,
.tg-project-sheet .tg-tree-icon img,
.tg-project-sheet .tg-recent-icon svg,
.tg-project-sheet .tg-recent-icon img{
  width: 18px !important;
  height: 18px !important;
}

/* Toggle chevron in tree/recent */
.tg-project-sheet .tg-tree-toggle svg,
.tg-project-sheet .tg-recent-toggle svg{
  width: 18px !important;
  height: 18px !important;
}

/* If some injected svg has no viewBox and behaves weird */
.tg-project-sheet svg:not([viewBox]){
  overflow: hidden;
}

/* New project modal: style native select like AIDC (avoid white system look) */
.tg-modal select,
.tg-modal select.input,
.tg-modal .input select{
  appearance:none;
  -webkit-appearance:none;
  background: rgba(18,19,28,0.96);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:12px;
  color:#e8ebff;
  padding:10px 12px;
  width:100%;
}

.tg-modal option{
  background: #10121a;
  color:#e8ebff;
}

/* Folder picker: custom dropdown (avoid native <select> white sheet on mobile) */
.tg-folder-picker{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(18,19,28,0.96);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  color: #e8ebff;
  padding: 10px 12px;
  margin-bottom: 12px;
  cursor: pointer;
}
.tg-folder-picker__label{
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tg-folder-dd{
  width: min(520px, 100%);
}
.tg-folder-dd-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 56vh;
  overflow: auto;
  padding-right: 2px;
  margin-bottom: 12px;
}
.tg-folder-dd-item{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(18,19,28,.22);
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.tg-folder-dd-item.is-active{
  border-color: rgba(255,255,255,0.22);
  background: rgba(18,19,28,.35);
}
.tg-folder-dd-item.is-create{
  border-color: rgba(255,0,140,0.22);
  background: rgba(255,0,140,0.10);
}
/* ===== Tree / Recent: compact rows, correct icon sizes, chevron rotate ===== */
.tg-tree-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.tg-tree-toggle{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background: rgba(18,19,28,.35);
}

.tg-tree-toggle .tg-icon-img,
.tg-recent-toggle .tg-icon-img{
  width:18px !important;
  height:18px !important;
  display:block;
}

.tg-chevron.right img{ transform: rotate(0deg); }
.tg-chevron.down img{ transform: rotate(90deg); }
.tg-chevron.up img{ transform: rotate(-90deg); }

.tg-tree-icon .tg-icon-img{
  width:18px !important;
  height:18px !important;
  display:block;
}

.tg-tree-title{
  flex:1;
  text-align:left;
  background:transparent;
  border:0;
  color:inherit;
  padding:8px 0;
}

.tg-tree-actions{
  display:flex;
  gap:6px;
}

.tg-tree-action-btn{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background: rgba(18,19,28,.35);
}

.tg-tree-action-btn .tg-icon-img{
  width:16px !important;
  height:16px !important;
}

/* Recent */
.tg-recent-header{
  margin: 6px 0 8px;
}
.tg-recent-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(18,19,28,.35);
  color:inherit;
}
.tg-recent-item{
  display:flex;
  gap:10px;
  padding:6px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(18,19,28,.22);
}
.tg-recent-icon .tg-icon-img{ width:18px !important; height:18px !important; }

/* Collapse "Подготовка генерации" */
.panel.is-collapsed .tg-create-panel{
  display: none;
}
.tg-collapse-btn{
  position:absolute;
  right:10px;
  top:50%;
  transform: translateY(-50%);
  margin-left: 0;
}

/* Create project modal: more space between label and field */
[data-create-project-modal] .panel-sub{
  margin-top: 10px;
  margin-bottom: 8px;
}
[data-create-project-modal] .panel-sub:first-child{
  margin-top: 0;
}

/* Trash modal (restore from корзина) */
.tg-trash{ width: min(560px, 100%); }
.tg-trash-list{ display:flex; flex-direction:column; gap:10px; margin:10px 0 6px; max-height: 56vh; overflow:auto; padding-right: 2px; }
.tg-trash-row{ display:flex; gap:10px; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:14px; border:1px solid rgba(255,255,255,0.10); background: rgba(18,19,28,.22); }
.tg-trash-meta{ display:flex; flex-direction:column; gap:2px; }
.tg-trash-name{ font-weight:700; color:#f1f2ff; }
.tg-trash-sub{ font-size:12px; color:#9ca0b8; }
.tg-trash-actions{ display:flex; gap:8px; align-items:center; }

/* ===== TG WEBAPP: disable site scroll mechanics ===== */
html.tg, body.tg {
  height: auto !important;
  overflow: visible !important;
}

/* if #app / main inherited fixed heights and hidden overflow, disable */
html.tg #app,
body.tg #app,
html.tg main,
body.tg main,
html.tg main.aidc-layout,
body.tg main.aidc-layout {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* neutralize universal "aidc-scroll" containers in TG */
html.tg .aidc-scroll-host,
body.tg .aidc-scroll-host,
html.tg .aidc-scroll,
body.tg .aidc-scroll {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Exception: notification panel must scroll in TG WebApp */
html.tg #aidc-notify-panel,
body.tg #aidc-notify-panel {
  height: auto !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* prevent content from hiding under TG bottom bar */
html.tg .shell,
body.tg .shell {
  padding-bottom: 96px !important;
}

/* lock background scroll while menu is open */
html.tg-menu-open,
body.tg-menu-open{
  overflow: hidden !important;
  height: 100%;
}
html.tg-menu-open .tg-dropdown__menu{
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
body.tg-menu-open #app,
body.tg-menu-open #app > .shell,
body.tg-menu-open #app > main,
body.tg-menu-open main,
body.tg-menu-open .tg-page,
body.tg-menu-open .aidc-scroll,
body.tg-menu-open .aidc-scroll-host{
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* ---- Error text in failed generation cards ---- */
.tg-feed-card__placeholder--failed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.tg-feed-card__error-text {
  font-size: 12px;
  line-height: 1.35;
  color: #ff6b6b;
  text-align: center;
  padding: 0 12px;
  max-width: 260px;
  word-break: break-word;
  opacity: 0.9;
}

/* ══════════════════════════════════════════════
   TG SERVICES HUB — страница AI-сервисов
   ══════════════════════════════════════════════ */

.tg-services-intro {
  padding: 4px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tg-services-intro__title {
  font-size: 22px;
  font-weight: 800;
  color: #f3f4ff;
  letter-spacing: -0.4px;
  line-height: 1.2;
}
.tg-services-intro__title .accent {
  background: linear-gradient(90deg, #a78bfa, #f472b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tg-services-intro__sub {
  font-size: 13px;
  color: rgba(195,200,230,0.7);
  line-height: 1.45;
  margin-top: 2px;
}

/* Сетка карточек — 1 колонка на узких, 2 на широких */
.tg-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-bottom: 4px;
}
@media (min-width: 480px) {
  .tg-services-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Карточка домена */
.tg-svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .14s;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.tg-svc-card:active {
  transform: scale(0.97);
  background: rgba(255,255,255,0.07);
}
.tg-svc-card--active {
  border-color: rgba(167,139,250,0.35);
  background: linear-gradient(135deg, rgba(167,139,250,0.08) 0%, rgba(244,114,182,0.05) 100%);
}
.tg-svc-card--active:active {
  border-color: rgba(167,139,250,0.55);
}
.tg-svc-card--disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
/* Декоративное свечение активной карточки */
.tg-svc-card--active::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%);
  pointer-events: none;
}

.tg-svc-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tg-svc-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
/* SVG inside icon — sized and coloured */
.tg-svc-card__icon .tg-svg {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tg-svc-card__icon .tg-svg svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.6;
  color: rgba(220,223,255,0.85);
}
/* Per-domain accent colours */
.tg-svc-card__icon--fashion {
  background: rgba(255, 0, 140, 0.10);
  border-color: rgba(255, 0, 140, 0.22);
}
.tg-svc-card__icon--fashion .tg-svg svg {
  color: #ff62c5;
}
.tg-svc-card__icon--interior {
  background: rgba(93, 213, 255, 0.10);
  border-color: rgba(93, 213, 255, 0.22);
}
.tg-svc-card__icon--interior .tg-svg svg {
  color: #5dd5ff;
}
.tg-svc-card__icon--architect {
  background: rgba(167, 139, 250, 0.10);
  border-color: rgba(167, 139, 250, 0.22);
}
.tg-svc-card__icon--architect .tg-svg svg {
  color: #a78bfa;
}
.tg-svc-card__icon--landscape {
  background: rgba(78, 203, 113, 0.10);
  border-color: rgba(78, 203, 113, 0.22);
}
.tg-svc-card__icon--landscape .tg-svg svg {
  color: #4ecb71;
}
.tg-svc-card__badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  line-height: 1.4;
}
.tg-svc-card__badge--active {
  background: rgba(74,222,128,0.15);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,0.3);
}
.tg-svc-card__badge--soon {
  background: rgba(250,204,21,0.12);
  color: #facc15;
  border: 1px solid rgba(250,204,21,0.25);
}

.tg-svc-card__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(167,139,250,0.7);
  margin-top: 2px;
}
.tg-svc-card__title {
  font-size: 17px;
  font-weight: 750;
  color: #f3f4ff;
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.tg-svc-card__desc {
  font-size: 12px;
  color: rgba(195,200,230,0.65);
  line-height: 1.5;
  flex: 1;
}
.tg-svc-card__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}
.tg-svc-card__tool {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(220,225,255,0.8);
  white-space: nowrap;
}
.tg-svc-card__arrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(167,139,250,0.9);
}
.tg-svc-card__arrow svg {
  width: 14px; height: 14px;
  stroke: currentColor;
  flex-shrink: 0;
}