/* ==========================================================
   NOYTRIX MOBILE CLEAN
   PHONE/TABLET ONLY
   NO DOM MOVING
   ========================================================== */

@media (max-width: 820px) {

  /* ========================================================
     GLOBAL
     ======================================================== */

  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow-x: hidden !important;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    min-height: 100dvh !important;

    background:
      radial-gradient(
        circle at 65% 0%,
        rgba(25, 62, 124, .15),
        transparent 380px
      ),
      #020a17 !important;
  }

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

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

  img,
  svg,
  video,
  canvas {
    max-width: 100%;
  }


  /* ========================================================
     APP SHELL
     ======================================================== */

  .app-shell {
    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 100dvh !important;

    display: block !important;
  }


  /* ========================================================
     SIDEBAR
     Remove desktop container itself,
     but KEEP its children available.
     ======================================================== */

  .app-shell > .sidebar {
    display: contents !important;
  }


  /* ========================================================
     MOBILE TOP BAR BACKGROUND
     ======================================================== */

  .workspace-header {
    position: fixed !important;

    z-index: 1200 !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    height: 58px !important;
    min-height: 58px !important;

    margin: 0 !important;

    padding:
      0
      10px
      0
      145px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-end !important;

    gap: 6px !important;

    overflow: visible !important;

    border-bottom:
      1px solid
      rgba(54, 93, 144, .36) !important;

    background:
      rgba(2, 10, 23, .97) !important;

    backdrop-filter:
      blur(18px);

    -webkit-backdrop-filter:
      blur(18px);

    box-shadow:
      0 8px 26px
      rgba(0, 0, 0, .20);
  }


  /* ========================================================
     LOGO
     ======================================================== */

  .sidebar .brand {
    position: fixed !important;

    z-index: 1210 !important;

    top: 0 !important;
    left: 11px !important;

    width: auto !important;

    height: 58px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;

    gap: 7px !important;

    color: #fff !important;

    background: transparent !important;

    font-size: 13px !important;

    font-weight: 950 !important;

    letter-spacing: .12em !important;

    text-decoration: none !important;

    white-space: nowrap !important;
  }

  .sidebar .brand img {
    width: 27px !important;
    height: 27px !important;

    flex: 0 0 27px !important;
  }

  .sidebar .brand span {
    display: block !important;
  }

  .sidebar .brand em {
    display: none !important;
  }


  /* ========================================================
     LANGUAGE
     ======================================================== */

  .workspace-header .header-left {
    width: auto !important;

    min-width: 0 !important;

    margin: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    gap: 5px !important;
  }

  .workspace-header .live-pill {
    display: none !important;
  }

  .workspace-header .language-switcher {
    width: auto !important;

    margin: 0 !important;
    padding: 2px !important;

    display: flex !important;

    align-items: center !important;

    flex: 0 0 auto !important;

    border-radius: 10px !important;
  }

  .workspace-header
  .language-switcher button {
    width: auto !important;

    min-width: 29px !important;

    height: 34px !important;

    margin: 0 !important;

    padding: 0 6px !important;

    display: grid !important;

    place-items: center !important;

    border-radius: 8px !important;

    font-size: 9px !important;

    line-height: 1 !important;
  }


  /* ========================================================
     TOP ACCOUNT / PROFILE
     ======================================================== */

  .workspace-header
  #headerAccountButton {
    width: auto !important;

    min-width: 68px !important;

    height: 38px !important;

    margin: 0 !important;

    padding: 0 10px !important;

    flex: 0 0 auto !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 0 !important;

    border-radius: 10px !important;

    font-size: 9px !important;
  }

  .workspace-header
  #headerAccountButton.top-account-user {
    width: 38px !important;

    min-width: 38px !important;
    max-width: 38px !important;

    height: 38px !important;

    padding: 2px !important;

    display: grid !important;

    place-items: center !important;

    overflow: hidden !important;

    border-radius: 11px !important;
  }

  .workspace-header
  .top-account-avatar {
    width: 32px !important;
    height: 32px !important;

    min-width: 32px !important;

    margin: 0 !important;

    display: grid !important;

    place-items: center !important;

    font-size: 8px !important;
  }

  .workspace-header
  .top-account-label {
    display: none !important;
  }


  /* ========================================================
     HIDE DESKTOP SIDEBAR EXTRA CONTENT
     ======================================================== */

  .sidebar .session-list,
  .sidebar .sidebar-chats-v9,
  .sidebar .sidebar-bottom {
    display: none !important;
  }


  /* ========================================================
     NEW CHECK FLOATING BUTTON
     ======================================================== */

  .sidebar .new-check {
    position: fixed !important;

    z-index: 1310 !important;

    right: 13px !important;

    bottom:
      calc(
        73px +
        env(safe-area-inset-bottom)
      ) !important;

    width: 48px !important;
    min-width: 48px !important;

    height: 48px !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;

    place-items: center !important;

    border-radius: 15px !important;

    overflow: hidden !important;

    font-size: 0 !important;

    box-shadow:
      0 10px 28px
      rgba(255, 181, 30, .27) !important;
  }

  .sidebar .new-check span {
    display: block !important;

    margin: 0 !important;

    font-size: 26px !important;

    line-height: 1 !important;
  }

  .sidebar .new-check b {
    display: none !important;
  }


  /* ========================================================
     BOTTOM NAVIGATION
     Existing nav stays in original DOM.
     Only CSS positions it.
     ======================================================== */

  .sidebar .workspace-nav {
    position: fixed !important;

    z-index: 1300 !important;

    top: auto !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;

    height:
      calc(
        64px +
        env(safe-area-inset-bottom)
      ) !important;

    margin: 0 !important;

    padding:
      5px
      6px
      calc(
        5px +
        env(safe-area-inset-bottom)
      ) !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: stretch !important;

    justify-content: flex-start !important;

    gap: 3px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scrollbar-width: none !important;

    border-top:
      1px solid
      rgba(55, 99, 154, .42) !important;

    background:
      rgba(2, 9, 21, .98) !important;

    backdrop-filter:
      blur(18px);

    -webkit-backdrop-filter:
      blur(18px);

    box-shadow:
      0 -11px 30px
      rgba(0, 0, 0, .22) !important;
  }

  .sidebar
  .workspace-nav::-webkit-scrollbar {
    display: none !important;
  }

  .sidebar
  .workspace-nav
  .nav-item {
    width: 67px !important;

    min-width: 67px !important;
    max-width: 67px !important;

    height: 54px !important;
    min-height: 54px !important;

    flex:
      0 0 67px !important;

    margin: 0 !important;

    padding: 5px 3px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 3px !important;

    border: 0 !important;

    border-radius: 9px !important;

    color:
      #758dab !important;

    background:
      transparent !important;

    font-size: 8px !important;

    font-weight: 850 !important;

    line-height: 1 !important;

    text-align: center !important;

    white-space: nowrap !important;
  }

  .sidebar
  .workspace-nav
  .nav-item
  .nav-icon {
    width: 19px !important;
    height: 19px !important;

    min-width: 19px !important;

    margin: 0 !important;

    display: grid !important;

    place-items: center !important;

    color:
      #7e98b6 !important;
  }

  .sidebar
  .workspace-nav
  .nav-item
  .nav-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .sidebar
  .workspace-nav
  .nav-item b {
    width: 61px !important;

    margin: 0 !important;

    display: block !important;

    overflow: hidden !important;

    color: inherit !important;

    font-size: 8px !important;

    font-weight: 850 !important;

    line-height: 1.1 !important;

    text-align: center !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;
  }

  .sidebar
  .workspace-nav
  .nav-item.active {
    color: #fff !important;

    background:
      linear-gradient(
        180deg,
        rgba(17, 56, 98, .97),
        rgba(7, 29, 56, .98)
      ) !important;

    box-shadow:
      inset 0 0 0 1px
      rgba(65, 149, 234, .43) !important;
  }

  .sidebar
  .workspace-nav
  .nav-item.active
  .nav-icon {
    color:
      #ffc02a !important;
  }


  /* ========================================================
     MAIN WORKSPACE
     ======================================================== */

  .workspace {
    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    padding:
      72px
      12px
      calc(
        87px +
        env(safe-area-inset-bottom)
      ) !important;

    overflow-x: hidden !important;
  }


  /* ========================================================
     SCREENS
     ======================================================== */

  .screen,
  .screen.active {
    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
  }


  /* ========================================================
     CHECK SCREEN
     ======================================================== */

  #screen-check
  .check-v2-layout,
  #screen-check
  .check-grid {
    width: 100% !important;

    min-width: 0 !important;

    display: block !important;
  }

  #screen-check
  .security-session {
    width: 100% !important;

    min-width: 0 !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding:
      24px
      3px
      18px !important;

    border: 0 !important;

    background:
      transparent !important;
  }

  #screen-check
  .shield-logo {
    display: none !important;
  }


  /* ========================================================
     HERO
     ======================================================== */

  #screen-check
  .scan-hero {
    width: 100% !important;

    max-width: 520px !important;

    margin:
      0 auto 24px !important;

    padding: 0 !important;

    text-align: center !important;
  }

  #screen-check
  .scan-hero
  .eyebrow,
  #screen-check
  .scan-hero
  .kicker {
    width: fit-content !important;

    max-width:
      calc(100vw - 40px) !important;

    margin:
      0 auto 15px !important;

    padding:
      7px 11px !important;

    border:
      1px solid
      rgba(255, 184, 34, .37) !important;

    border-radius:
      999px !important;

    color:
      #ffc02a !important;

    font-size:
      8px !important;

    font-weight:
      950 !important;

    line-height:
      1 !important;

    letter-spacing:
      .12em !important;

    white-space:
      nowrap !important;
  }

  #screen-check
  .scan-hero h2 {
    width: 100% !important;

    max-width: 500px !important;

    margin:
      0 auto 16px !important;

    font-size:
      clamp(
        28px,
        8.4vw,
        38px
      ) !important;

    line-height:
      1.01 !important;

    letter-spacing:
      -.035em !important;

    word-break:
      normal !important;

    overflow-wrap:
      normal !important;
  }

  #screen-check
  .scan-hero p {
    width: 100% !important;

    max-width: 500px !important;

    margin: 0 auto !important;

    color:
      #8192ad !important;

    font-size:
      12px !important;

    line-height:
      1.5 !important;
  }


  /* ========================================================
     CHECK INPUT
     ======================================================== */

  #screen-check
  .scan-composer,
  #screen-check:not(.conversation-mode)
  .scan-composer {
    position: static !important;

    width: 100% !important;

    max-width: 560px !important;

    min-width: 0 !important;

    min-height: 58px !important;

    margin:
      0 auto !important;

    padding: 5px !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      48px !important;

    gap: 5px !important;

    overflow: hidden !important;

    transform: none !important;

    border:
      1px solid
      rgba(66, 101, 148, .66) !important;

    border-radius:
      17px !important;

    background:
      linear-gradient(
        145deg,
        #071429,
        #0a162a
      ) !important;
  }

  #screen-check
  .scan-composer input {
    width: 100% !important;

    min-width: 0 !important;

    height: 48px !important;

    margin: 0 !important;

    padding:
      0 9px !important;

    border: 0 !important;

    outline: 0 !important;

    background:
      transparent !important;

    color: #eef3fb !important;

    font-size: 14px !important;

    text-overflow:
      ellipsis !important;

    white-space:
      nowrap !important;

    overflow: hidden !important;
  }

  #screen-check
  .scan-composer input::placeholder {
    color:
      #7788a4 !important;

    font-size:
      13px !important;
  }

  #screen-check
  .submit-scan {
    width: 48px !important;

    min-width: 48px !important;

    height: 48px !important;

    margin: 0 !important;

    padding: 0 !important;

    display: grid !important;

    place-items: center !important;

    border-radius:
      13px !important;

    font-size:
      23px !important;
  }


  /* ========================================================
     EXAMPLES
     ======================================================== */

  #screen-check
  .examples,
  #screen-check:not(.conversation-mode)
  .examples {
    position: static !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: 100% !important;

    max-width: 560px !important;

    height: auto !important;

    margin:
      10px auto 0 !important;

    padding:
      0 1px 4px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    flex-wrap: nowrap !important;

    gap: 6px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    transform: none !important;

    scrollbar-width:
      none !important;
  }

  #screen-check
  .examples::-webkit-scrollbar {
    display: none !important;
  }

  #screen-check
  .examples-label {
    display: none !important;
  }

  #screen-check
  .examples button {
    position: static !important;

    width: auto !important;

    min-width:
      max-content !important;

    height: 34px !important;

    flex: 0 0 auto !important;

    margin: 0 !important;

    padding:
      0 10px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    transform: none !important;

    border-radius:
      999px !important;

    color:
      #97a8c0 !important;

    background:
      #081327 !important;

    font-size:
      9px !important;

    line-height:
      1 !important;

    white-space:
      nowrap !important;
  }


  /* ========================================================
     CONTEXT
     ======================================================== */

  #screen-check
  .context-column {
    width: 100% !important;

    margin-top: 14px !important;

    display: grid !important;

    grid-template-columns:
      1fr !important;

    gap: 9px !important;
  }


  /* ========================================================
     ANALYSIS
     ======================================================== */

  #screen-check
  .analysis-status {
    width: 100% !important;

    margin-top:
      20px !important;

    padding-top:
      16px !important;
  }

  #screen-check
  .analysis-status ol {
    grid-template-columns:
      1fr !important;

    gap: 7px !important;
  }


  /* ========================================================
     RESULT
     ======================================================== */

  #screen-check
  .verdict-message {
    width: 100% !important;

    margin-top:
      17px !important;
  }

  #screen-check
  .verdict-content {
    padding:
      14px !important;
  }

  #screen-check
  .verdict-actions {
    display: grid !important;

    grid-template-columns:
      1fr !important;

    gap: 7px !important;
  }

  #screen-check
  .verdict-actions button,
  #screen-check
  .verdict-actions a {
    width: 100% !important;

    justify-content:
      center !important;
  }


  /* ========================================================
     GENERIC PAGE HEADERS
     ======================================================== */

  .page-intro {
    width: 100% !important;

    margin-bottom:
      15px !important;
  }

  .page-intro h2 {
    max-width: 100% !important;

    margin:
      0 0 9px !important;

    font-size:
      28px !important;

    line-height:
      1.05 !important;

    overflow-wrap:
      anywhere !important;
  }

  .page-intro > p {
    max-width: 100% !important;

    font-size:
      12px !important;

    line-height:
      1.5 !important;
  }


  /* ========================================================
     TRACKING / SIGNALS / ACTIVITY
     ======================================================== */

  .watch-toolbar {
    width: 100% !important;

    display: flex !important;

    flex-direction:
      column !important;

    align-items:
      stretch !important;

    gap: 8px !important;
  }

  .watch-row {
    width: 100% !important;

    grid-template-columns:
      1fr !important;

    gap: 8px !important;

    padding:
      13px !important;
  }

  .watch-actions {
    width: 100% !important;
  }

  .analytics-grid,
  .intelligence-grid {
    grid-template-columns:
      1fr !important;

    gap: 9px !important;
  }


  /* ========================================================
     PRODUCTS
     ======================================================== */

  .product-showcase,
  .product-access {
    width: 100% !important;

    grid-template-columns:
      1fr !important;

    gap: 11px !important;

    padding:
      14px !important;
  }

  .product-links {
    grid-template-columns:
      1fr !important;
  }


  /* ========================================================
     API
     ======================================================== */

  .api-grid {
    grid-template-columns:
      1fr !important;

    gap: 10px !important;
  }

  .api-card {
    min-height: 0 !important;

    padding:
      15px !important;
  }


  /* ========================================================
     BILLING
     ======================================================== */

  #screen-billing,
  #screen-billing
  .billing-app,
  #screen-billing
  .billing-v52 {
    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;
  }

  #screen-billing
  .billing-app {
    margin: 0 !important;

    padding:
      0 0 18px !important;
  }

  #screen-billing
  .billing-page-header {
    display: block !important;

    margin-bottom:
      12px !important;
  }

  #screen-billing
  .billing-page-header h2 {
    font-size:
      29px !important;
  }

  #screen-billing
  .billing-account {
    width: 100% !important;

    margin-top:
      9px !important;
  }

  #screen-billing
  .billing-tabs {
    width: 100% !important;

    display: flex !important;

    gap: 12px !important;

    overflow-x:
      auto !important;

    scrollbar-width:
      none !important;
  }

  #screen-billing
  .billing-layout,
  #screen-billing
  .billing-plan-grid {
    grid-template-columns:
      1fr !important;

    gap: 9px !important;
  }

  #screen-billing
  .billing-surface {
    padding:
      13px !important;
  }


  /* ========================================================
     PROFILE
     ======================================================== */

  body.p56-profile-open
  .workspace {
    padding-bottom:
      calc(
        87px +
        env(safe-area-inset-bottom)
      ) !important;
  }

  #screen-profile-v56,
  #screen-profile-v56
  .p56-root,
  #screen-profile-v56
  .p56-content,
  #screen-profile-v56
  .p56-panel {
    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;

    min-height: 0 !important;
    max-height: none !important;
  }

  #screen-profile-v56
  .p56-root {
    padding: 0 !important;

    overflow: visible !important;
  }

  #screen-profile-v56
  .p56-header {
    width: 100% !important;

    margin-bottom:
      10px !important;

    display: block !important;
  }

  #screen-profile-v56
  .p56-header h1 {
    font-size:
      29px !important;
  }

  #screen-profile-v56
  .p56-header-user {
    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    height: 62px !important;

    margin-top:
      10px !important;

    padding:
      7px 9px !important;

    grid-template-columns:
      44px
      minmax(0, 1fr)
      40px !important;
  }

  #screen-profile-v56
  .p56-tabs {
    position: sticky !important;

    z-index: 800 !important;

    top: 58px !important;

    width: 100% !important;

    margin:
      0 0 10px !important;

    padding: 3px !important;

    display: flex !important;

    gap: 3px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scrollbar-width:
      none !important;

    background:
      rgba(3, 16, 31, .97) !important;

    backdrop-filter:
      blur(14px);
  }

  #screen-profile-v56
  .p56-tabs::-webkit-scrollbar {
    display: none !important;
  }

  #screen-profile-v56
  .p56-tabs button {
    width: auto !important;

    min-width: 98px !important;

    height: 37px !important;

    flex: 0 0 auto !important;

    padding:
      0 8px !important;

    font-size:
      8px !important;
  }

  #screen-profile-v56
  .p56-overview-top,
  #screen-profile-v56
  .p56-overview-main,
  #screen-profile-v56
  .p56-three,
  #screen-profile-v56
  .p56-security-grid,
  #screen-profile-v56
  .p56-connections,
  #screen-profile-v56
  .p56-info-grid {
    grid-template-columns:
      1fr !important;

    gap: 9px !important;
  }

  #screen-profile-v56
  .p56-product-strip {
    grid-template-columns:
      1fr !important;
  }

  #screen-profile-v56
  [data-p56-panel="settings"],
  #screen-profile-v56
  .p56-embed-slot,
  #screen-profile-v56
  .p56-embedded-screen {
    height: auto !important;

    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
  }


  /* ========================================================
     OLD SETTINGS SCREEN
     ======================================================== */

  .settings-v2 {
    width: 100% !important;

    padding-bottom:
      75px !important;
  }

  .settings-page-header,
  .settings-footer {
    flex-direction:
      column !important;

    align-items:
      stretch !important;

    gap: 9px !important;
  }

  .settings-workspace,
  .settings-fields-three,
  .appearance-controls,
  .settings-scan-grid,
  .settings-data-panel {
    grid-template-columns:
      1fr !important;
  }

  .settings-section-nav {
    position: static !important;

    grid-template-columns:
      1fr 1fr !important;
  }


  /* ========================================================
     AUTH
     ======================================================== */

  .modal-backdrop {
    padding:
      10px !important;
  }

  .auth-modal {
    width: 100% !important;

    max-width: 100% !important;

    max-height:
      calc(
        100dvh - 20px
      ) !important;

    padding:
      22px 16px !important;

    border-radius:
      15px !important;
  }


  /* ========================================================
     TOASTS
     ======================================================== */

  .toast-region,
  .p59-toast-root {
    position: fixed !important;

    z-index: 1400 !important;

    left: 11px !important;
    right: 11px !important;

    bottom:
      calc(
        72px +
        env(safe-area-inset-bottom)
      ) !important;

    width: auto !important;
  }

  .toast,
  .p59-toast {
    width: 100% !important;

    max-width: none !important;

    font-size:
      10px !important;
  }

}


/* ==========================================================
   SMALL PHONE
   ========================================================== */

@media (max-width: 390px) {

  .workspace {
    padding-left:
      9px !important;

    padding-right:
      9px !important;
  }

  .workspace-header {
    padding-left:
      123px !important;
  }

  .sidebar .brand {
    font-size:
      11px !important;

    letter-spacing:
      .09em !important;
  }

  .sidebar .brand img {
    width:
      25px !important;

    height:
      25px !important;
  }

  #screen-check
  .scan-hero h2 {
    font-size:
      28px !important;
  }

  .sidebar
  .workspace-nav
  .nav-item {
    width:
      62px !important;

    min-width:
      62px !important;

    max-width:
      62px !important;

    flex-basis:
      62px !important;
  }

}