:root {
  /* Global design boundary. Keep all future page content inside this inset. */
  --design-boundary-x: 18px;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --page-inset-top: calc(var(--design-boundary-x) + var(--safe-area-top));
  --page-inset-right: calc(var(--design-boundary-x) + var(--safe-area-right));
  --page-inset-left: calc(var(--design-boundary-x) + var(--safe-area-left));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  background: #000;
}

body {
  min-width: 0;
  max-width: 100%;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  padding: 0;
  background: #000;
}

/* PLAZA keeps the source top bar's geometry while fixing its outer design
   boundary at X = 18px on every viewport. Safe areas remain additive. */
html.s-route {
  --s-x: var(--design-boundary-x);
  --s-composer-bottom: calc((var(--s-x) * 2) + var(--safe-area-bottom) + var(--s-keyboard-offset, 0px));
  padding: 0;
}

body.s-page.s-page--plaza > .s-page__composer {
  top: var(--page-inset-top);
  left: var(--page-inset-left);
  width: calc(100% - var(--page-inset-left) - var(--page-inset-right));
}

body.s-page.s-page--plaza .s-page__add > span {
  display: none !important;
}

body.s-page.s-page--plaza .s-page__top-bar-logo {
  display: block;
  height: 22px;
  width: auto;
  max-width: none;
  object-fit: contain;
  filter: invert(1);
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
}

body.s-page.s-page--plaza .s-page__add,
body.s-page.s-page--plaza .s-page__add.is-active {
  background: transparent !important;
  border-radius: 0;
}

body.s-page.s-page--plaza .s-page__composer::before {
  border: 0;
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
}

html[lang="ar"] body.s-page :is(button, input, textarea, select),
html[lang="ar"] body.s-page .s-page__composer-input {
  font-family: var(--font-arabic);
}

html[lang="en"] body.s-page :is(button, input, textarea, select),
html[lang="en"] body.s-page .s-page__composer-input {
  font-family: var(--font-english);
}

@media (orientation: landscape) {
  html.s-route {
    --s-x: var(--design-boundary-x);
    --s-composer-bottom: calc(var(--design-boundary-x) + var(--safe-area-bottom) + var(--s-keyboard-offset, 0px));
  }
}
.plaza-bottom-box {
  position: fixed;
  z-index: 2;
  left: var(--page-inset-left);
  right: var(--page-inset-right);
  /* Fixed coordinates are measured from the visible viewport edge. The
     safe-area inset is not added here, preventing double-counting on iOS/PWA. */
  bottom: var(--design-boundary-x);
  height: clamp(112px, 28svh, 280px);
  min-width: 0;
  /* Responsive curvature with a continuous squircle where supported. */
  border-radius: min(12vw, 12svh);
  background: #e7d932;
  pointer-events: none;
}

@supports (corner-shape: superellipse(2)) {
  .plaza-bottom-box {
    corner-shape: superellipse(2);
  }
}