/* One surface and spacing contract for the shell and embedded engine HUD. */
:root {
  --ar-hud-surface: #1d1914ed;
  --ar-hud-border: #eed9bc33;
  --ar-hud-ink: #f7f1e8;
  --ar-hud-muted: #dfd2c4;
}
body[data-ar-shell],body[data-ar-core] {
  --ar-safe-start: env(safe-area-inset-left);
  --ar-safe-end: env(safe-area-inset-right);
}
[dir="rtl"] body[data-ar-shell],[dir="rtl"] body[data-ar-core] {
  --ar-safe-start: env(safe-area-inset-right);
  --ar-safe-end: env(safe-area-inset-left);
}
.room-bar {
  position: fixed;
  inset-block-start: calc(12px + env(safe-area-inset-top));
  inset-inline-start: max(12px,var(--ar-safe-start));
  inset-inline-end: max(12px,var(--ar-safe-end));
  z-index: 20;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  gap: 10px;
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid var(--ar-hud-border);
  border-radius: 16px;
  background: var(--ar-hud-surface);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 45px #0006;
  color: var(--ar-hud-ink);
  font-family: var(--space-native,Manrope),sans-serif;
  pointer-events: none;
}
.room-bar[data-native-hud="true"] {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.room-back {
  pointer-events: auto;
  color: var(--ar-hud-ink);
  text-decoration: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  border-radius: 12px;
  background: none;
}
.room-back:hover { background: #ffffff08; }
.room-back svg { width: 22px;height: 22px; }
[dir="rtl"] .room-back svg { transform: rotate(180deg); }
.room-state { position: relative;min-width: 0;margin: 0;padding-inline-start: 16px;text-align: start; }
.room-state::before { content: '';position: absolute;inset-inline-start: 0;top: 19px;width: 6px;height: 6px;border-radius: 50%;background: #edd5b8; }
.room-state h1 { display:flex;align-items:center;min-height:44px;font-size: 14px;line-height: 1.5;font-weight: 500;margin: 0; }
.room-state p:empty { display: none; }
.room-state p { font-size: 12px;line-height: 1.5;color: var(--ar-hud-muted);margin: 0; }
.room-retry { pointer-events: auto;margin-top: 12px;min-height: 44px;border: 1px solid #eed9bc55;background: #f4e5d1;color: #281d14;font: inherit;font-size: 14px;padding: 11px 17px;border-radius: 30px;cursor: pointer; }
.room-state[data-kind="loading"]::before { animation: ar-hud-pulse 1.2s ease-in-out infinite; }
@keyframes ar-hud-pulse { 50% { opacity: .3; } }
body[data-ar-core] #toast {
  top: calc(12px + env(safe-area-inset-top));
  left: auto;right: auto;
  inset-inline-start: max(12px,var(--ar-safe-start));
  inset-inline-end: max(12px,var(--ar-safe-end));
  width: auto;max-width: none;min-height: 68px;
  transform: translateY(-8px);
  padding: 12px 14px;
  gap: 10px;
  border-color: var(--ar-hud-border);
  border-radius: 16px;
  background: var(--ar-hud-surface);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 45px #0006;
  color: var(--ar-hud-ink);
  font-family: var(--space-native,Manrope),sans-serif;
  letter-spacing: 0;
}
body[data-ar-core][data-ar-embedded] #toast { padding-inline-start: 68px; }
body[data-ar-core] #toast .mark { width: 6px;height: 6px;flex: 0 0 6px;margin-top: 19px;border-radius: 50%;background: #edd5b8;box-shadow: none; }
body[data-ar-core] #toast > div { display:flex;flex-direction:column;justify-content:center;min-height:44px;min-width:0; }
body[data-ar-core] #toast.show { transform: translateY(0); }
body[data-ar-core] #toast-title { font-size: 14px;line-height: 1.5;letter-spacing: 0; }
body[data-ar-core] #toast-text { font-size: 12px;line-height: 1.5;color: var(--ar-hud-muted); }
@media(prefers-reduced-motion:reduce) { .room-state[data-kind="loading"]::before { animation: none; } }