/* Beta 0.3.28 — stable Telegram Desktop/Main Mini App layout.
   Important: never translate or resize the document root from visualViewport
   offsets. Telegram Desktop's Main Mini App can expose geometry that differs
   from button-launched Web Apps; moving the root by that offset causes the
   editor to be shifted and clipped. Keep the document in normal flow and only
   constrain the inner editor column. */

html.tg-desktop{
  --desktop-editor-max:720px;
  --desktop-gutter:12px;
}

html.tg-desktop,
html.tg-desktop body{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:100%;
  margin:0!important;
  overflow-x:hidden!important;
}

html.tg-desktop body{
  position:static!important;
  transform:none!important;
  translate:none!important;
}

html.tg-desktop .editor-screen{
  box-sizing:border-box!important;
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  translate:none!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:100vh!important;
  margin:0!important;
  padding:10px var(--desktop-gutter) 96px!important;
  overflow-x:hidden!important;
}

html.tg-desktop .editor-head,
html.tg-desktop .editor-main{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:var(--desktop-editor-max)!important;
  min-width:0!important;
  margin-inline:auto!important;
  transform:none!important;
  translate:none!important;
}

html.tg-desktop .editor-head{
  position:sticky!important;
  top:0!important;
  z-index:30!important;
  padding:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

html.tg-desktop .editor-topbar{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0 0 10px!important;
  padding:10px 13px!important;
  border-radius:20px!important;
  overflow:hidden!important;
}

html.tg-desktop .page-identity{
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:100%!important;
}
html.tg-desktop .top-actions{
  flex:0 0 auto!important;
}
html.tg-desktop .page-identity input{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

html.tg-desktop .composer-toolbar.floating-toolbar{
  box-sizing:border-box!important;
  width:fit-content!important;
  max-width:100%!important;
  margin:0 auto 8px!important;
  padding:0!important;
  gap:5px!important;
  overflow:visible!important;
  transform:none!important;
}

html.tg-desktop .composer-toolbar.floating-toolbar .history-bubble,
html.tg-desktop .composer-toolbar.floating-toolbar .emoji-bubble{
  flex:0 0 auto!important;
}
html.tg-desktop .composer-toolbar.floating-toolbar .tools-bubble{
  flex:0 1 auto!important;
  min-width:0!important;
  max-width:min(390px,calc(100vw - 190px))!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}

html.tg-desktop .editor-main{
  padding:6px 0 44px!important;
  overflow-x:hidden!important;
}

html.tg-desktop .canvas,
html.tg-desktop .content-flow,
html.tg-desktop .slash-wrap,
html.tg-desktop .starter-card,
html.tg-desktop .block,
html.tg-desktop .block-row,
html.tg-desktop .block-main{
  box-sizing:border-box!important;
  min-width:0!important;
  max-width:100%!important;
  transform:none;
}

html.tg-desktop .starter-card{
  width:100%!important;
}

/* A wide table scrolls inside its own surface and never grows the document. */
html.tg-desktop .telegram-table,
html.tg-desktop .table-preview{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  overscroll-behavior-x:contain;
}
html.tg-desktop .telegram-table table,
html.tg-desktop .table-preview table{
  width:100%!important;
  min-width:360px!important;
  max-width:none!important;
}

/* Fixed footer spans the host WebView. Do not center it using a visualViewport
   coordinate; Telegram already clips fixed content to the actual WebView. */
html.tg-desktop .bottom-actions{
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:auto!important;
  max-width:none!important;
  transform:none!important;
  padding:12px max(14px,calc((100% - var(--desktop-editor-max)) / 2 + 4px)) 16px!important;
}

/* Desktop sheets use left+right constraints instead of translateX. This keeps
   them inside both Main Mini App panes and ordinary Web App windows. */
html.tg-desktop .sheet{
  left:12px!important;
  right:12px!important;
  width:auto!important;
  max-width:620px!important;
  margin-inline:auto!important;
  transform:none!important;
  border-radius:24px 24px 0 0!important;
}

html.tg-desktop .popup-menu,
html.tg-desktop .text-toolbar-menu,
html.tg-desktop .text-heading-submenu,
html.tg-desktop .text-button-submenu,
html.tg-desktop .table-cell-menu{
  max-width:calc(100% - 20px)!important;
}

/* Desktop remains desktop even when Telegram opens the Main Mini App in a
   narrow side pane. */
html.tg-desktop.mobile-performance .editor-topbar,
html.tg-desktop.mobile-performance .toolbar-bubble,
html.tg-desktop.mobile-performance .popup-menu,
html.tg-desktop.mobile-performance .sheet,
html.tg-desktop.mobile-performance .starter-card,
html.tg-desktop.mobile-performance .sheet-item,
html.tg-desktop.mobile-performance .soft-btn,
html.tg-desktop.mobile-performance .primary-soft,
html.tg-desktop.mobile-performance .fab,
html.tg-desktop.mobile-performance .media-picker-card{
  backdrop-filter:blur(18px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(150%)!important;
}

html.tg-desktop input,
html.tg-desktop textarea,
html.tg-desktop [contenteditable="true"]{
  caret-color:var(--text);
}

@media(max-width:760px){
  html.tg-desktop{--desktop-gutter:8px}
  html.tg-desktop .editor-screen{padding-top:8px!important}
  html.tg-desktop .editor-topbar{border-radius:17px!important}
  html.tg-desktop .composer-toolbar.floating-toolbar{gap:4px!important}
  html.tg-desktop .composer-toolbar.floating-toolbar .tools-bubble{
    max-width:calc(100vw - 176px)!important;
  }
}