/* ==========================================================================
   AI Project Universe — Safe Mobile Guard V2.4
   Constrains actual overflow without rewriting each application's typography,
   grid system, sidebar breakpoints, or responsive utility classes.
   ========================================================================== */

html,
body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

#root,
#app,
#__next,
[data-reactroot] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

img,
picture,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

svg,
iframe,
embed,
object {
  max-width: 100%;
}

pre,
code,
kbd,
samp {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

pre,
.table-responsive,
[role="tablist"] {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

@supports not (overflow-x: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

/* Compact outer Project Universe viewer on phones. */
@media (max-width: 760px) {
  .viewer[open] {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    grid-template-rows: 54px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .viewer__bar {
    width: 100% !important;
    max-width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 6px 8px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  .viewer__bar > div:first-child {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 48px) !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .viewer__badge {
    flex: 0 0 auto !important;
    padding: 5px 7px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    border-radius: 7px !important;
  }

  #viewerTitle {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  .viewer__actions {
    display: flex !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
  }

  .viewer__actions a {
    display: none !important;
  }

  #viewerClose {
    position: relative !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border: 2px solid #0a0a0a !important;
    border-radius: 12px !important;
    background: #5f5f5f !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
    box-shadow: 2px 2px 0 #0a0a0a !important;
  }

  #viewerClose::before,
  #viewerClose::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 17px;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
  }

  #viewerClose::before {
    transform: rotate(45deg);
  }

  #viewerClose::after {
    transform: rotate(-45deg);
  }

  .viewer iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    border: 0 !important;
  }

  .viewer__loading {
    inset: 54px 0 0 !important;
  }
}