:root{
  --dp-norah-reserve:0px;
}


/* ============================================
   DealerPilot logo = complete existing asset
   ============================================ */

.dpv5x-brand{
  width:172px !important;
  min-width:172px !important;

  display:flex !important;
  align-items:center !important;

  overflow:visible !important;
}

.dpv5x-brand img{
  display:block !important;

  width:164px !important;
  height:auto !important;

  max-width:none !important;

  object-fit:contain !important;
}

.dpv5x-header{
  grid-template-columns:
    190px
    minmax(0,1fr)
    auto !important;
}

.dpv5x-header nav{
  gap:22px !important;
}

.dpv5x-header nav a{
  white-space:nowrap !important;
}

.dpv5x-actions,
.dpv5x-actions a{
  white-space:nowrap !important;
}


/* ============================================
   Dynamic shell controlled by the REAL
   #norah-floating hidden state
   ============================================ */

.dpv5x-site{
  width:100% !important;

  transition:
    width .28s ease,
    padding .28s ease !important;
}


html.dp-norah-open .dpv5x-site{
  width:
    calc(
      100% - var(--dp-norah-reserve)
    ) !important;
}


html.dp-norah-minimized .dpv5x-site{
  width:100% !important;
}


/* When Norah is open, text stays readable
   instead of collapsing into 4-5 lines. */

html.dp-norah-open
.dpv5x-hero{
  height:390px !important;
}


html.dp-norah-open
.hero-copy{
  width:54% !important;
  max-width:520px !important;
}


html.dp-norah-open
.dpv5x-hero h1{
  font-size:
    clamp(
      2.72rem,
      3.25vw,
      3.15rem
    ) !important;

  line-height:.97 !important;
}


html.dp-norah-open
.hero-copy p{
  max-width:470px !important;
}


html.dp-norah-open
.benefits{
  width:58% !important;

  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;
}


html.dp-norah-open
.dpv5x-header nav{
  gap:15px !important;
}


html.dp-norah-open
.dpv5x-header nav a{
  font-size:.66rem !important;
}


/* ============================================
   REAL floating Norah safe area
   ============================================ */

#norah-floating{
  top:
    max(
      16px,
      env(safe-area-inset-top)
    ) !important;

  right:
    max(
      16px,
      env(safe-area-inset-right)
    ) !important;

  bottom:auto !important;

  width:
    min(
      400px,
      calc(
        100vw
        - 32px
        - env(safe-area-inset-left)
        - env(safe-area-inset-right)
      )
    ) !important;

  max-height:
    calc(
      100dvh
      - 32px
      - env(safe-area-inset-top)
      - env(safe-area-inset-bottom)
    ) !important;

  box-sizing:border-box !important;
}


/* Keep orb and minimize control completely
   inside the visual safe area. */

.norah-floating-head{
  min-height:84px !important;

  padding:
    16px 16px 14px !important;

  overflow:visible !important;
}


.norah-floating-head
.norah-face{
  margin:
    1px 0 !important;
}


.norah-floating-controls{
  margin-left:auto !important;

  align-self:flex-start !important;

  padding-top:1px !important;
}


#norah-minimize,
.norah-floating-control{
  width:38px !important;
  min-width:38px !important;

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

  display:grid !important;
  place-items:center !important;

  padding:0 !important;

  line-height:1 !important;

  border-radius:10px !important;
}


/* Launcher also respects safe area. */

#norah-launcher{
  right:
    max(
      20px,
      env(safe-area-inset-right)
    ) !important;

  bottom:
    max(
      20px,
      env(safe-area-inset-bottom)
    ) !important;
}


/* ============================================
   Smaller desktop: Norah overlays instead of
   crushing the public site.
   ============================================ */

@media(max-width:1100px){

  html.dp-norah-open
  .dpv5x-site{
    width:100% !important;
  }

}


/* ============================================
   Mobile stays full-width.
   ============================================ */

@media(max-width:760px){

  .dpv5x-brand{
    width:145px !important;
    min-width:145px !important;
  }

  .dpv5x-brand img{
    width:138px !important;
  }

  .dpv5x-header{
    grid-template-columns:
      1fr auto !important;
  }

  html.dp-norah-open
  .dpv5x-site,
  html.dp-norah-minimized
  .dpv5x-site{
    width:100% !important;
  }

  #norah-floating{
    top:
      max(
        10px,
        env(safe-area-inset-top)
      ) !important;

    right:
      max(
        10px,
        env(safe-area-inset-right)
      ) !important;

    width:
      calc(
        100vw
        - 20px
        - env(safe-area-inset-left)
        - env(safe-area-inset-right)
      ) !important;

    max-height:
      calc(
        100dvh
        - 20px
        - env(safe-area-inset-top)
        - env(safe-area-inset-bottom)
      ) !important;
  }

}