/* TheatreAI overlay system v1 — shared rhythm for dialogs, sheets and drawers. */
:root {
  --ta-overlay-radius: 22px;
  --ta-overlay-radius-mobile: 22px;
  --ta-overlay-border: rgba(46,230,168,.24);
  --ta-overlay-surface: rgba(5,22,16,.97);
  --ta-overlay-shadow: 0 34px 110px -34px rgba(0,0,0,.92), inset 0 1px rgba(255,255,255,.04);
  --ta-overlay-focus: 0 0 0 3px rgba(46,230,168,.2);
  --ta-layer-dialog: 2147483000;
}

.wallet-back { z-index: var(--ta-layer-dialog) !important; }
body.wallet-open { overflow: hidden !important; }
body.wallet-open :is(#mobileNav,.mobile-nav,#omniAssistant,.omni-assistant,#mixerLaunch,.dock-launcher,.ta-search-launcher) {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Surfaces keep their product-specific colour but share geometry and depth. */
.ta-global-search,
.ta-feedback-dialog,
.modal .sheet,
.rm-card,
.gm-card,
.img-mixer,
.onboarding-sheet,
.side-drawer,
.wallet-card,
.seo-editor,
.tg-editor-panel {
  border-color: var(--ta-overlay-border);
  box-shadow: var(--ta-overlay-shadow);
}
.ta-global-search,
.ta-feedback-dialog,
.modal .sheet,
.rm-card,
.gm-card,
.img-mixer,
.onboarding-sheet,
.wallet-card,
.seo-editor { border-radius: var(--ta-overlay-radius); }

/* Consistent close/fullscreen controls: visible, quiet and always tappable. */
.ta-feedback-dialog__close,
.ta-search-close,
.side-x,
.side-fs,
.wallet-x,
.onb-x,
.seo-editor__close,
.gm-x,
.gm-fs,
.mix-x,
.rm-x,
.tg-x,
.ta-lb-x {
  min-width: 42px !important;
  width: 42px !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.055) !important;
  color: #eafff5 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
  line-height: 1 !important;
  touch-action: manipulation;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.ta-feedback-dialog__close:hover,
.ta-search-close:hover,
.side-x:hover,
.side-fs:hover,
.wallet-x:hover,
.onb-x:hover,
.seo-editor__close:hover,
.gm-x:hover,
.gm-fs:hover,
.mix-x:hover,
.rm-x:hover,
.tg-x:hover,
.ta-lb-x:hover { transform: translateY(-1px); border-color: rgba(46,230,168,.5) !important; background: rgba(46,230,168,.11) !important; }

:is(.ta-global-search,.ta-feedback-dialog,.modal,.rm-card,.gm-card,.img-mixer,.onboarding-sheet,.side-drawer,.wallet-card,.seo-editor,.tg-overlay)
  :is(button,a,input,textarea,select):focus-visible {
  outline: 2px solid #2ee6a8 !important;
  outline-offset: 2px !important;
  box-shadow: var(--ta-overlay-focus);
}

:is(.ta-global-search,.ta-feedback-dialog,.modal .sheet,.rm-card,.gm-card,.img-mixer,.onboarding-sheet,.side-drawer,.wallet-card,.seo-editor)
  :is(input,textarea,select) {
  box-sizing: border-box;
  border-radius: 13px;
}

/* Desktop: calmer widths, more air around the surface, no accidental full-screen cards. */
@media (min-width: 769px) {
  .ta-global-search {
    width: min(700px, calc(100vw - 40px));
    max-height: min(760px, calc(100dvh - 96px));
    margin-top: max(24px, 7vh);
  }
  .rm-card { width: min(560px, calc(100vw - 40px)); }
  .modal { padding: 24px; }
  .modal .sheet { max-height: calc(100dvh - 48px); overflow: auto; }
  .onboarding-sheet { width: min(440px, calc(100vw - 40px)); }
  .wallet-card { width: min(440px, calc(100vw - 40px)); max-height: calc(100dvh - 48px); }
  .img-mixer { width: min(420px, calc(100vw - 40px)); right: 20px; bottom: 20px; }
  .side-drawer { border-left: 1px solid var(--ta-overlay-border); }
}

/* Mobile: sheets respect the keyboard and safe areas; content owns vertical scroll. */
@media (max-width: 768px) {
  .modal,
  .radar-modal { padding: 10px 8px max(8px, env(safe-area-inset-bottom)); align-items: flex-end; }
  .modal .sheet,
  .rm-card {
    width: 100%; max-width: none; max-height: min(88dvh, 760px);
    margin: 0; border-radius: var(--ta-overlay-radius-mobile) var(--ta-overlay-radius-mobile) 0 0;
    overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  .img-mixer {
    left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: auto;
    max-height: min(82dvh, 680px); border-radius: var(--ta-overlay-radius-mobile);
  }
  .mix-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .side-drawer {
    height: 100dvh; max-height: 100dvh;
    border-left: 1px solid var(--ta-overlay-border);
  }
  .wallet-back { padding: 8px; }
  .wallet-card { width: 100%; max-width: none; max-height: min(90dvh, 760px); border-radius: var(--ta-overlay-radius-mobile); }
  .side-inner { padding-bottom: max(18px, env(safe-area-inset-bottom)) !important; }
  .tg-editor-panel { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .ta-feedback-dialog__close,
  .ta-search-close,
  .side-x,
  .side-fs,
  .wallet-x,
  .onb-x,
  .seo-editor__close,
  .gm-x,
  .gm-fs,
  .mix-x,
  .rm-x,
  .tg-x,
  .ta-lb-x { transition: none; }
}