/* One viewport-anchored light source behind the header, navigation and glass. */
html[data-skin="horizon"]:not([data-hz-tone="day"]) {
  --horizon-sun-x: 70vw;
  --horizon-shared-light:
    radial-gradient(ellipse 170px 155px at var(--horizon-sun-x) 66px, rgba(255,199,124,.64), transparent 72%),
    radial-gradient(ellipse 225px 355px at var(--horizon-sun-x) 110px, rgba(222,145,82,.43), transparent 78%),
    radial-gradient(ellipse 370px 210px at var(--horizon-sun-x) 210px, rgba(235,177,124,.14), transparent 80%),
    radial-gradient(ellipse 60% 52% at 45% 60%, rgba(140,109,91,.14), transparent 85%),
    linear-gradient(155deg,#211b19,#2d2521 55%,#201a18);
}
html[data-skin="horizon"]:not([data-hz-tone="day"]) body {
  background-image: var(--horizon-shared-light);
  background-attachment: fixed;
}
html[data-skin="horizon"]:not([data-hz-tone="day"]) .topbar {
  background: rgba(29,23,21,.12);
}
html[data-skin="horizon"]:not([data-hz-tone="day"]) .topbar::before {
  transform: translateX(-12vw);
  mask-image: linear-gradient(90deg,#000 0%,#000 82%,transparent 100%);
  -webkit-mask-image: linear-gradient(90deg,#000 0%,#000 82%,transparent 100%);
  filter: brightness(1.38) contrast(1.08) saturate(1.12);
}
html[data-skin="horizon"]:not([data-hz-tone="day"]) .subnav {
  background: rgba(28,23,21,.24);
  backdrop-filter: blur(12px) saturate(110%);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
}
html[data-skin="horizon"]:not([data-hz-tone="day"]) .chat.card {
  background: linear-gradient(160deg,rgba(161,138,120,.10),rgba(60,48,42,.18));
}
/* Artwork is below the content across the WHOLE panel; it no longer starts at the chat-body boundary. */
html[data-skin="horizon"]:not([data-hz-tone="day"]) .chat.card::before {
  inset: 0 0 82px;
  background: url("chat-atmosphere-v3.png") center bottom / 100% 100% no-repeat;
  opacity: .9;
  filter: contrast(1.12) brightness(1.04) saturate(.9);
  mask-image: linear-gradient(180deg,transparent 0%,rgba(0,0,0,.25) 24%,#000 58%,#000 87%,transparent 100%);
  -webkit-mask-image: linear-gradient(180deg,transparent 0%,rgba(0,0,0,.25) 24%,#000 58%,#000 87%,transparent 100%);
}
html[data-skin="horizon"]:not([data-hz-tone="day"]) .chat-body { background: transparent; }
html[data-skin="horizon"]:not([data-hz-tone="day"]) .chat-head {
  --horizon-chat-left: 396px;
  background:
    radial-gradient(ellipse 90px 16px at calc(var(--horizon-sun-x) - var(--horizon-chat-left)) 100%,rgba(255,203,145,.26),transparent),
    linear-gradient(90deg,transparent,rgba(241,193,142,.18) 60%,rgba(255,218,175,.48) 85%,transparent) bottom / 100% 1px no-repeat;
}
@media(min-width:1700px) {
  html[data-skin="horizon"]:not([data-hz-tone="day"]) .chat-head { --horizon-chat-left:454px; }
}
html[data-skin="horizon"]:not([data-hz-tone="day"]) .composer {
  background: rgba(35,28,25,.08);
}