/* Approved side-panel motion. Existing controllers retain opening, dismissal,
   focus, drafts and scroll locks; centered dialogs keep their own treatment. */
:root {
  --panel-enter: 360ms;
  --panel-exit: 220ms;
  --panel-scrim-enter: 260ms;
  --panel-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Discrete display/overlay transitions retain the native top layer for the
   visual exit without delaying dialog.close(), its return value or events. */
dialog:is(.ow-drawer, #mt-request-preview, [data-rentari-panel]) {
  transform: translateX(100%);
  pointer-events: none;
  transition: transform var(--panel-exit) var(--panel-ease),
    display var(--panel-exit) allow-discrete, overlay var(--panel-exit) allow-discrete;
}
dialog:is(.ow-drawer, #mt-request-preview, [data-rentari-panel])[open] {
  transform: translateX(0);
  pointer-events: auto;
  transition-duration: var(--panel-enter);
}
dialog:is(.ow-drawer, #mt-request-preview, [data-rentari-panel])::backdrop {
  opacity: 0;
  transition: opacity var(--panel-exit) ease,
    display var(--panel-exit) allow-discrete, overlay var(--panel-exit) allow-discrete;
}
dialog:is(.ow-drawer, #mt-request-preview, [data-rentari-panel])[open]::backdrop {
  opacity: 1;
  transition-duration: var(--panel-scrim-enter);
}
@starting-style {
  dialog:is(.ow-drawer, #mt-request-preview, [data-rentari-panel])[open] { transform: translateX(100%); }
  dialog:is(.ow-drawer, #mt-request-preview, [data-rentari-panel])[open]::backdrop { opacity: 0; }
}

/* Help is shared by landlord, renter and vendor surfaces. The embedded Help
   tab has no overlay or panel, so its surrounding workspace remains stable. */
.rh-root .rh-overlay { transition: visibility 0s linear var(--panel-exit); }
.rh-root.rh-open .rh-overlay { transition-delay: 0s; }
.rh-root .rh-panel { transition: transform var(--panel-exit) var(--panel-ease); }
.rh-root.rh-open .rh-panel { transition-duration: var(--panel-enter); }
.rh-root .rh-scrim { transition: opacity var(--panel-exit) ease; }
.rh-root.rh-open .rh-scrim { transition-duration: var(--panel-scrim-enter); }

/* Chat history is already an overlay along the left edge of its workspace. */
body.ow #mz-history {
  transform: translateX(-100%);
  pointer-events: none;
  transition: transform var(--panel-exit) var(--panel-ease), display var(--panel-exit) allow-discrete;
}
body.ow #mz-history:not([hidden]) { transform: translateX(0); pointer-events: auto; transition-duration: var(--panel-enter); }
@starting-style { body.ow #mz-history:not([hidden]) { transform: translateX(-100%); } }

/* Existing mobile navigation keeps its edge, widths and breakpoints. */
@media (max-width: 820px) {
  body.ow .ow-rail {
    /* Keep the exit above inner workspaces until visibility turns off. */
    z-index: 1360;
    transition: transform var(--panel-exit) var(--panel-ease), visibility 0s linear var(--panel-exit);
  }
  body.ow .ow-rail.is-open { transition: transform var(--panel-enter) var(--panel-ease), visibility 0s; }
  body.ow .ow-scrim {
    z-index: 1350;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--panel-exit) ease, display var(--panel-exit) allow-discrete;
  }
  body.ow .ow-scrim.is-open { opacity: 1; pointer-events: auto; transition-duration: var(--panel-scrim-enter); }
  @starting-style { body.ow .ow-scrim.is-open { opacity: 0; } }
}
@media (max-width: 960px) {
  body .ad-rail { transition: transform var(--panel-exit) var(--panel-ease); }
  body .ad-rail.is-open { transition-duration: var(--panel-enter); }
  body .ad-scrim {
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--panel-exit) ease, display var(--panel-exit) allow-discrete;
  }
  body .ad-scrim.is-open { opacity: 1; pointer-events: auto; transition-duration: var(--panel-scrim-enter); }
  @starting-style { body .ad-scrim.is-open { opacity: 0; } }
}
@media (max-width: 900px) {
  :is(#aw-workspace-sidebar, #rw-workspace-sidebar, #mt-workspace-sidebar,
      #iw-workspace-sidebar, #pw-workspace-sidebar, #lh-sidebar) {
    transition: transform var(--panel-exit) var(--panel-ease), visibility 0s linear var(--panel-exit);
  }
  .is-menu-open :is(#aw-workspace-sidebar, #rw-workspace-sidebar, #mt-workspace-sidebar,
      #iw-workspace-sidebar, #pw-workspace-sidebar, #lh-sidebar) {
    transition: transform var(--panel-enter) var(--panel-ease), visibility 0s;
  }
  :is(#aw-workspace, #rw-workspace, #mt-workspace, #iw-workspace, #pw-workspace, #lh-workspace)
  :is(.aw-menu-scrim, .rw-menu-scrim, .mt-menu-scrim, .iw-menu-scrim, .pw-menu-scrim, .lh-menu-scrim) {
    /* The display transition also needs the open scrim's geometry on exit. */
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 0;
    background: var(--surface-scrim);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--panel-exit) ease, display var(--panel-exit) allow-discrete;
  }
  :is(#aw-workspace, #rw-workspace, #mt-workspace, #iw-workspace, #pw-workspace, #lh-workspace)
  .is-menu-open :is(.aw-menu-scrim, .rw-menu-scrim, .mt-menu-scrim, .iw-menu-scrim, .pw-menu-scrim, .lh-menu-scrim) {
    opacity: 1;
    pointer-events: auto;
    transition-duration: var(--panel-scrim-enter);
  }
  @starting-style {
    :is(#aw-workspace, #rw-workspace, #mt-workspace, #iw-workspace, #pw-workspace, #lh-workspace)
    .is-menu-open :is(.aw-menu-scrim, .rw-menu-scrim, .mt-menu-scrim, .iw-menu-scrim, .pw-menu-scrim, .lh-menu-scrim) { opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --panel-enter: 0s; --panel-exit: 0s; --panel-scrim-enter: 0s; }
}