@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/Vazirmatn.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.camera-guide,
.camera-guide button,
.camera-guide a,
.camera-guide input,
.camera-guide output {
  font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 600px) {
  .camera-guide {
    width: 100vw;
    height: 100dvh;
    min-height: 100svh;
  }

  .camera-guide__video,
  .camera-guide__fallback {
    object-fit: cover;
    object-position: 50% 50%;
  }

  .camera-guide__header {
    top: calc(7px + var(--safe-top));
    right: 8px;
    left: 8px;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    min-height: 54px;
    padding: 5px;
    gap: 7px;
    border-radius: 24px;
  }

  .camera-guide__icon-button { width: 42px; height: 42px; }
  .camera-guide__icon-button svg { width: 21px; height: 21px; }
  .camera-guide__destination small { margin-bottom: 1px; font-size: 9px; }
  .camera-guide__destination strong { font-size: 14px; line-height: 1.45; }

  .camera-guide__modes {
    top: calc(72px + var(--safe-top));
    max-width: calc(100vw - 20px);
    padding: 4px;
  }

  .camera-guide__modes a {
    min-width: 50px;
    padding: 6px 10px 5px;
    font-size: 10px;
  }

  .camera-guide:has(.camera-guide__modes) > .camera-guide__status,
  .awareness-camera__status {
    top: calc(116px + var(--safe-top));
    max-width: calc(100vw - 24px);
    padding: 7px 10px;
    font-size: 10px;
  }

  .camera-guide__status > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .camera-guide__permission {
    position: absolute !important;
    top: auto !important;
    right: calc(10px + var(--safe-right)) !important;
    bottom: calc(10px + var(--safe-bottom)) !important;
    left: calc(10px + var(--safe-left)) !important;
    width: auto !important;
    max-height: min(68dvh, 560px) !important;
    padding: 16px !important;
    gap: 10px !important;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 28px 28px 12px 28px !important;
    transform: none !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .camera-guide__permission-icon { width: 46px; height: 46px; }
  .camera-guide__permission-icon svg { width: 24px; height: 24px; }
  .camera-guide__eyebrow { margin-bottom: 3px; font-size: 9px; }
  .camera-guide__permission h1 { margin-bottom: 6px; font-size: clamp(21px, 6.2vw, 27px) !important; line-height: 1.35 !important; }
  .camera-guide__permission p { font-size: 11px !important; line-height: 1.75 !important; }
  .camera-guide__primary-button { min-height: 48px; padding: 0 15px; font-size: 13px; }
  .camera-guide__privacy { font-size: 9px !important; }

  .camera-guide:has(.camera-guide__permission:not([hidden])) .spatial-action-rail,
  .camera-guide:has(.camera-guide__permission:not([hidden])) .spatial-context-chip,
  .camera-guide:has(.camera-guide__permission:not([hidden])) .spatial-sensor-hud,
  .camera-guide:has(.camera-guide__permission:not([hidden])) .spatial-dynamic-compass,
  .camera-guide:has(.camera-guide__permission:not([hidden])) .spatial-orb,
  .camera-guide:has(.camera-guide__permission:not([hidden])) .spatial-radial-menu,
  .camera-guide:has(.camera-guide__permission:not([hidden])) .explore-selector,
  .camera-guide:has(.camera-guide__permission:not([hidden])) .explore-live-tools,
  .camera-guide:has(.camera-guide__permission:not([hidden])) .awareness-camera__toolbar,
  .camera-guide:has(.camera-guide__permission:not([hidden])) .sky-light-card {
    display: none !important;
  }

  .spatial-sensor-hud,
  .spatial-dynamic-compass,
  .spatial-orb,
  .spatial-radial-menu { display: none !important; }

  .spatial-action-rail {
    top: 48%;
    right: calc(6px + var(--safe-right));
    padding: 5px;
    gap: 5px;
  }

  .spatial-action-rail button { width: 39px; height: 39px; }
  .spatial-action-rail button svg { width: 19px; height: 19px; }

  .spatial-context-chip {
    top: calc(151px + var(--safe-top));
    left: calc(8px + var(--safe-left));
    max-width: min(52vw, 185px);
    padding: 7px 9px;
  }

  .spatial-context-chip__icon,
  .spatial-context-chip__pulse { width: 27px; height: 27px; }
  .spatial-context-chip strong { font-size: 10px; }

  .explore-selector {
    inset: calc(151px + var(--safe-top)) 6px calc(150px + var(--safe-bottom));
  }

  .explore-selector__box {
    --box-size: min(55vw, 220px);
    top: 48%;
    border-radius: 25px;
  }

  .awareness-camera[data-explore-mode="codes"] .explore-selector__box { --box-size: min(62vw, 238px); }

  .explore-selector p {
    right: 12px;
    bottom: 1px;
    left: 12px;
    font-size: 10px;
    line-height: 1.6;
  }

  .explore-live-tools {
    right: calc(8px + var(--safe-right));
    bottom: calc(70px + var(--safe-bottom));
    left: calc(8px + var(--safe-left));
    gap: 5px;
  }

  .explore-quality { max-width: 72vw; padding: 6px 9px; font-size: 9px; }
  .explore-device-controls,
  .explore-nature-parts {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .explore-device-controls::-webkit-scrollbar,
  .explore-nature-parts::-webkit-scrollbar,
  .sky-toolbar::-webkit-scrollbar { display: none; }

  .explore-device-controls button,
  .explore-device-controls label,
  .explore-nature-parts button { min-height: 32px; flex: 0 0 auto; padding: 6px 9px; }

  .awareness-camera__toolbar {
    right: calc(8px + var(--safe-right));
    bottom: calc(8px + var(--safe-bottom));
    left: calc(8px + var(--safe-left));
  }

  .awareness-camera__toolbar button { min-height: 46px; padding: 9px 13px; }
  .explore-toolbar__scan { min-width: min(180px, 70vw); }

  .camera-guide__scene { inset: calc(148px + var(--safe-top)) 0 calc(166px + var(--safe-bottom)); }

  .camera-guide__route-card {
    right: calc(8px + var(--safe-right));
    bottom: calc(8px + var(--safe-bottom));
    left: calc(8px + var(--safe-left));
    grid-template-columns: 76px minmax(0, 1fr);
    min-height: 108px;
    max-height: min(34dvh, 260px);
    padding: 10px;
    gap: 9px;
    overflow-y: auto;
    border-radius: 24px;
  }

  .camera-guide__radar { width: 76px; }
  .camera-guide__route-copy { gap: 4px; }
  .camera-guide__route-copy small { font-size: 9px; }
  .camera-guide__route-copy strong { font-size: 15px; line-height: 1.35; }
  .camera-guide__route-copy span { font-size: 10px; line-height: 1.5; }
  .camera-guide__verify-button { min-height: 32px; font-size: 9px; }

  .sky-light-card {
    top: calc(151px + var(--safe-top));
    right: calc(8px + var(--safe-right));
    max-width: min(72vw, 275px);
    padding: 9px 11px;
  }

  .sky-toolbar {
    max-width: calc(100vw - 16px);
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .sky-toolbar button { min-height: 43px; flex: 0 0 auto; padding: 8px 11px; font-size: 10px; }
  .awareness-sheet { right: 8px; bottom: calc(8px + var(--safe-bottom)); left: 8px; max-height: 74dvh; padding: 17px 14px 13px; border-radius: 26px; }
  .awareness-sheet h2 { font-size: 23px; }
}

@media (max-width: 360px) {
  .camera-guide__header { grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .camera-guide__icon-button { width: 40px; height: 40px; }
  .camera-guide__modes a { min-width: 46px; padding-inline: 8px; }
  .camera-guide__permission { padding: 14px !important; }
  .camera-guide__permission h1 { font-size: 21px !important; }
  .camera-guide__privacy { display: none; }
  .spatial-context-chip { display: none; }
  .explore-selector__box { --box-size: min(58vw, 200px); }
}

@media (max-height: 700px) and (orientation: portrait) {
  .camera-guide__permission { max-height: calc(100dvh - 104px) !important; padding: 13px !important; gap: 7px !important; }
  .camera-guide__permission-icon { width: 40px; height: 40px; }
  .camera-guide__permission h1 { font-size: 20px !important; }
  .camera-guide__privacy { display: none; }
  .spatial-context-chip { display: none; }
  .explore-selector { inset: calc(142px + var(--safe-top)) 5px calc(132px + var(--safe-bottom)); }
  .explore-selector__box { --box-size: min(46vh, 205px); }
  .camera-guide__route-card { max-height: 38dvh; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .camera-guide__permission {
    top: 50% !important;
    right: calc(10px + var(--safe-right)) !important;
    bottom: auto !important;
    left: auto !important;
    width: min(430px, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - 20px) !important;
    transform: translateY(-50%) !important;
  }

  .camera-guide__header { width: min(54vw, 500px); }
  .camera-guide__modes { top: calc(8px + var(--safe-top)); right: calc(12px + var(--safe-right)); left: auto; transform: none; }
  .camera-guide:has(.camera-guide__modes) > .camera-guide__status,
  .awareness-camera__status { top: calc(8px + var(--safe-top)); left: calc(12px + var(--safe-left)); transform: none; }
  .awareness-camera__toolbar { right: 44%; left: 8px; }
}