:root {
  --app-safe-top: var(--safe-top, env(safe-area-inset-top, 0px));
  --app-safe-bottom: var(--safe-bottom, env(safe-area-inset-bottom, 0px));
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
}

/* Center the product identity below the Telegram chrome instead of competing with it. */
.app-brand-centered {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  min-height: 96px;
  padding-top: 3px;
  text-align: center;
}
.app-brand-centered .app-logo {
  width: 54px;
  height: 45px;
  margin: 0 auto;
  border-radius: 12px;
  transform: rotate(1deg);
  box-shadow: 0 0 34px rgba(122, 74, 255, .32), inset 0 0 14px rgba(255,255,255,.05);
}
.app-brand-centered .app-logo::before { width: 8px; height: 8px; top: 7px; right: 7px; }
.app-brand-centered .app-logo::after { top: 15px; }
.app-brand-centered .app-logo .lens { width: 17px; height: 17px; left: 16px; top: 12px; }
.app-brand-centered .app-logo .tail { left: 6px; bottom: -7px; width: 21px; }
.app-brand-centered .app-brand-copy { justify-items: center; }
.app-brand-centered .app-brand-copy strong { font-size: 25px; }
.app-brand-centered .app-brand-copy small { margin-top: 6px; color: #8d87a5; font-size: 11px; }
.app-brand-centered .telegram-identity {
  position: absolute;
  top: 4px;
  right: 0;
}

.script-heading { margin-top: 20px; }

.camera-cta {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  justify-content: stretch;
  text-align: left;
}
.camera-cta::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / 3;
  width: 28px;
  height: 22px;
  border: 2px solid currentColor;
  border-radius: 7px;
  opacity: .96;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.camera-cta::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 6px;
  margin-left: 25px;
  background: currentColor;
  clip-path: polygon(0 0,100% 25%,100% 75%,0 100%);
}
.camera-cta > .cta-sub {
  grid-column: 2;
  grid-row: 2;
  display: block;
  margin-top: -7px;
  color: rgba(255,255,255,.68);
  font-size: 10px;
  font-weight: 560;
}

/* The camera HUD respects the app safe-area contract. */
.camera-screen .top-controls {
  top: max(11px, var(--app-safe-top));
  left: max(13px, var(--app-safe-left));
  right: max(13px, var(--app-safe-right));
  grid-template-columns: 48px 1fr 48px;
}
.top-control-spacer { width: 45px; height: 45px; justify-self: end; }
.camera-screen .prompter-panel {
  top: calc(max(83px, var(--app-safe-top) + 66px) + var(--prompter-shift));
  left: max(13px, var(--app-safe-left));
  right: max(13px, var(--app-safe-right));
}
.camera-screen .toast {
  left: max(18px, var(--app-safe-left));
  right: max(18px, var(--app-safe-right));
  bottom: calc(145px + var(--app-safe-bottom));
}
.camera-screen .bottom-panel { padding-bottom: max(11px, var(--app-safe-bottom)); }

/* Camera tools live in one vertical rail instead of competing with Telegram controls. */
.camera-tool-rail {
  position: absolute;
  z-index: 10;
  right: max(13px, var(--app-safe-right));
  bottom: calc(126px + var(--app-safe-bottom));
  display: grid;
  gap: 9px;
}
.camera-tool-rail .camera-tool-button {
  position: static;
  right: auto;
  bottom: auto;
}
.camera-settings {
  right: max(13px, var(--app-safe-right));
  bottom: calc(244px + var(--app-safe-bottom));
}

/* During REC, keep the controls that do not change the MediaRecorder track live. */
.camera-screen.is-recording .camera-tool-rail {
  visibility: visible;
  pointer-events: auto;
}
.camera-screen.is-recording #liveAiButton,
.camera-screen.is-recording #cameraSettingsToggle {
  visibility: visible;
  pointer-events: auto;
}
.camera-screen.is-recording .camera-settings {
  visibility: visible;
  pointer-events: auto;
}
.camera-screen.is-recording #switchCameraButton {
  visibility: visible;
  pointer-events: none;
  opacity: .38;
  filter: saturate(.65);
}

@media (max-height: 690px) {
  .camera-tool-rail { bottom: calc(108px + var(--app-safe-bottom)); }
  .camera-settings { bottom: calc(222px + var(--app-safe-bottom)); }
}

@media (min-width: 820px) {
  html[data-telegram-device="desktop"] .camera-screen {
    position: absolute;
    min-height: 100%;
    border-radius: 18px;
  }
  html[data-telegram-device="desktop"] .prompter-panel {
    left: 22px;
    right: 22px;
    max-width: 640px;
    margin-inline: auto;
  }
  html[data-telegram-device="desktop"] .bottom-panel {
    border-radius: 0 0 18px 18px;
  }
}