/* Shared by both shell themes. Native modal dialog makes the background inert. */
#ar-experience-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  box-sizing: border-box;
  padding: 0;
  width: min(960px, calc(100vw - 48px));
  height: min(800px, calc(100dvh - 48px));
  max-width: none;
  max-height: none;
  overflow: hidden;
  border: 3px solid var(--ui-panel-deep, #1d4a2f);
  border-radius: 18px;
  background: var(--ui-paper, #f2f3ec);
  color: var(--ui-ink, #3a2a1f);
  box-shadow: 0 16px 64px #0006;
  font-family: Nunito, sans-serif;
}
#ar-experience-dialog[open] { display: flex; flex-direction: column; }
#ar-experience-dialog::backdrop { background: #10251bd9; }
#ar-experience-dialog.ar-experience--expanded {
  width: calc(100vw - 24px);
  height: calc(100dvh - 24px);
}
.ar-experience-toolbar {
  flex: 0 0 auto;
  padding: 10px 12px;
  border-bottom: 2px solid var(--ui-panel-deep, #1d4a2f);
}
.ar-experience-toolbar h2 { margin: 0 0 8px; font-size: 18px; line-height: 1.2; }
.ar-experience-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ar-experience-actions button {
  min-height: 44px;
  padding: 6px 12px;
  border: 2px solid var(--ui-panel-deep, #1d4a2f);
  border-radius: 10px;
  background: var(--ui-paper, #f2f3ec);
  color: var(--ui-panel-deep, #1d4a2f);
  font: 800 14px/1.2 Nunito, sans-serif;
  cursor: pointer;
}
.ar-experience-actions [data-ar-action="close"] { margin-left: auto; background: #1d4a2f; color: #fff; }
.ar-experience-actions button:focus-visible { outline: 3px solid #e2744a; outline-offset: 2px; }
#ar-experience-frame-host { flex: 1 1 auto; min-height: 0; background: #000; }
#ar-experience-frame-host iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 767px), (max-height: 500px) {
  #ar-experience-dialog,
  #ar-experience-dialog.ar-experience--expanded {
    width: calc(100vw - max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right)));
    height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)));
    margin: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border-radius: 12px;
  }
  .ar-experience-toolbar { padding: 6px 8px; }
  .ar-experience-toolbar h2 { font-size: 16px; margin-bottom: 5px; }
  .ar-experience-actions { gap: 5px; }
  .ar-experience-actions button { padding: 5px 8px; font-size: 13px; }
  .ar-experience-actions [data-ar-action="expand"] { display: none; }
}