html[data-telegram="true"] {
  --app-safe-top: max(
    env(safe-area-inset-top, 0px),
    var(--tg-content-safe-area-inset-top, 0px),
    var(--tg-safe-area-inset-top, 0px)
  );
  --app-safe-bottom: max(
    env(safe-area-inset-bottom, 0px),
    var(--tg-content-safe-area-inset-bottom, 0px),
    var(--tg-safe-area-inset-bottom, 0px)
  );
  --app-safe-left: max(
    env(safe-area-inset-left, 0px),
    var(--tg-content-safe-area-inset-left, 0px),
    var(--tg-safe-area-inset-left, 0px)
  );
  --app-safe-right: max(
    env(safe-area-inset-right, 0px),
    var(--tg-content-safe-area-inset-right, 0px),
    var(--tg-safe-area-inset-right, 0px)
  );
}

/* Telegram mobile draws Close/Back, collapse and menu above the WebView.
   Reserve an additional adaptive top band so PromptCam never competes with them. */
html[data-telegram="true"][data-telegram-device="mobile"] {
  --app-safe-top: max(
    env(safe-area-inset-top, 0px),
    var(--tg-content-safe-area-inset-top, 0px),
    var(--tg-safe-area-inset-top, 0px),
    clamp(72px, 10.5dvh, 96px)
  );
}

.telegram-identity {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 46%;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #ffffff14;
  border-radius: 999px;
  background: #ffffff0a;
  color: #c9c7d1;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
}
.telegram-identity > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.telegram-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5aa8ff;
  box-shadow: 0 0 0 3px #5aa8ff1a;
}

html[data-telegram="true"] .editor-screen {
  padding-top: var(--app-safe-top);
  padding-left: max(16px, var(--app-safe-left));
  padding-right: max(16px, var(--app-safe-right));
  padding-bottom: max(28px, var(--app-safe-bottom));
}

/* The native Telegram Back Button is the only visible back control in Telegram. */
html[data-telegram="true"] #backButton {
  visibility: hidden;
  pointer-events: none;
}

html[data-telegram="true"] .top-controls,
html[data-telegram="true"] .prompter-panel {
  left: max(13px, var(--app-safe-left));
  right: max(13px, var(--app-safe-right));
}
html[data-telegram="true"] .toast {
  left: max(18px, var(--app-safe-left));
  right: max(18px, var(--app-safe-right));
}

/* Mobile Telegram already owns the top chrome. Keep the header visually clean. */
html[data-telegram-device="mobile"] .telegram-identity { display: none !important; }

@media (max-width: 390px) {
  html[data-telegram-device="desktop"] .telegram-identity { max-width: 42%; padding: 0 8px; font-size: 10px; }
}