/* DJIVA AI integrated cinematic landing, 2026-10-31
   Unframed hero floats into the same deep-black page background.
   Existing official wizard art and functional premium cards unchanged.
   CSS applied ONLY on AI landing (not AI dialogues/review or other tabs).
*/
html:has(.screen-body.section-ai .gu-ai-hub),
body:has(.screen-body.section-ai .gu-ai-hub){
  background:#03070e!important;
}
body:has(.screen-body.section-ai .gu-ai-hub) .v2-top.v2-top-ai{
  background:linear-gradient(180deg,#03070e 0%,rgba(3,7,14,.98) 74%,rgba(3,7,14,0) 100%)!important;
}
.screen-body.section-ai:has(.gu-ai-hub){
  background:
    radial-gradient(ellipse 78% 250px at 93% 120px,rgba(255,133,23,.052),transparent 74%),
    #03070e!important;
}
/* The page, not a separate greeting card, carries the cinematic visual. */
.screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub){
  position:relative!important;
  isolation:isolate;
  max-width:760px;
  padding-bottom:30px;
  background:
    radial-gradient(circle at 70% 100px,rgba(255,175,47,.16) 0 1px,transparent 2px),
    radial-gradient(circle at 87% 56px,rgba(255,175,47,.16) 0 1px,transparent 2px),
    radial-gradient(circle at 53% 252px,rgba(255,144,36,.12) 0 1px,transparent 2px);
}
.screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-welcome.gs-hero{
  display:block!important;
  position:relative!important;
  height:clamp(245px,71vw,305px)!important;
  width:calc(100% + 24px)!important;
  max-width:none!important;
  margin:0 -12px 10px!important;
  padding:0!important;
  min-height:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
/* Render art at its native aspect ratio; preserve its head, staff and map.
   The right-side artwork is blended at left/top/bottom so no image rectangle is visible. */
.screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-ai-cinematic-art{
  position:absolute!important;
  inset:0!important;
  width:100%!important;height:100%!important;
  z-index:1!important;
  pointer-events:none!important;
  opacity:1!important;
  filter:none!important;
  background-color:transparent!important;
  background-image:url("/djiva-ai-hero-mobile-approved-v7.webp?v=20261101-approved7")!important;
  background-position:right 6px center!important;
  background-size:auto 74%!important;
  background-repeat:no-repeat!important;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.62) 18%,#000 39%)!important;
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.62) 18%,#000 39%)!important;
}
.screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-welcome.gs-hero::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,#03070e 0%,rgba(3,7,14,.90) 22%,rgba(3,7,14,.35) 45%,rgba(3,7,14,0) 72%),
    linear-gradient(0deg,#03070e 0%,rgba(3,7,14,0) 13%,rgba(3,7,14,0) 85%,#03070e 100%)!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
/* Greeting is live text, not embedded in the background image. */
.screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-hero-copy{
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  width:100%!important;
  max-width:none!important;
  background:transparent!important;
  pointer-events:none!important;
}
.screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-hero .gs-date{
  top:23px!important;
  left:26px!important;
  color:#d5e0f0!important;
  font-size:clamp(11px,3vw,12px)!important;
  font-weight:580!important;
  text-shadow:0 2px 8px rgba(0,0,0,.5)!important;
}
.screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-hero h1{
  top:32%!important;
  left:26px!important;
  width:64%!important;
  max-width:64%!important;
  font-size:clamp(25px,6.6vw,32px)!important;
  line-height:1.08!important;
  font-weight:850!important;
  color:#fff!important;
  text-shadow:0 2px 14px rgba(0,0,0,.65)!important;
}
.screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-hero h1 .gs-ai-name{
  color:#ffd77b!important;
  text-shadow:0 0 13px rgba(251,161,47,.21)!important;
}
.screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-hero .gs-hero-subtitle{
  bottom:28px!important;
  left:26px!important;
  width:67%!important;
  max-width:67%!important;
  font-size:clamp(11px,3vw,13px)!important;
  line-height:1.48!important;
  color:#c4d1e4!important;
  text-shadow:0 2px 10px rgba(0,0,0,.7)!important;
}
/* Two cards remain genuine independent actions, with unchanged icon assets. */
.screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gu-ai-hub{
  position:relative;
  z-index:3;
  margin-top:0!important;
}
/* Mobile composition at shorter/narrower device widths. */
@media(max-width:370px){
  .screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-welcome.gs-hero{
    height:245px!important;
  }
  .screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-ai-cinematic-art{
    background-position:right 5px center!important;
    background-size:auto 72%!important;
  }
  .screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-hero .gs-date,
  .screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-hero h1,
  .screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-hero .gs-hero-subtitle{
    left:21px!important;
  }
}
@media(min-width:600px){
  .screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-welcome.gs-hero{
    height:clamp(305px,34vw,338px)!important;
    width:100%!important;
    margin:0 0 16px!important;
  }
  .screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-ai-cinematic-art{
    background-image:url("/djiva-ai-hero-desktop-approved-v7.webp?v=20261101-approved7")!important;
    background-size:auto 96%!important;
    background-position:right center!important;
  }
  .screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-hero .gs-date{
    left:28px!important;top:31px!important;font-size:14px!important;
  }
  .screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-hero h1{
    left:28px!important;top:31%!important;font-size:clamp(31px,4vw,39px)!important;
  }
  .screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-hero .gs-hero-subtitle{
    left:28px!important;bottom:33px!important;font-size:14px!important;
  }
}
/* The hero remains dark in light theme, preserving bright-text contrast. */
html[data-theme="light"]:has(.screen-body.section-ai .gu-ai-hub),
html[data-theme="light"] body:has(.screen-body.section-ai .gu-ai-hub){
  background:#03070e!important;
}
html[data-theme="light"] .screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-welcome.gs-hero{
  background:transparent!important;border:0!important;box-shadow:none!important;
}
html[data-theme="light"] .screen-body.section-ai .gh-ai-page.gs-home:has(.gu-ai-hub) .gs-ai-cinematic-art{
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.62) 18%,#000 39%)!important;
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.62) 18%,#000 39%)!important;
}