/* ROF_XAT_HOME_20261010
   Dedicated, isolated responsive radio hero layout. The original hidden
   home-split contains the primary radio audio engine and is NOT touched.
*/
body.rof-concept-page .rof-concept-home .rof-hero {
  display: grid !important;
  grid-template-columns: minmax(0,1.22fr) minmax(0,.94fr) minmax(0,1.95fr) !important;
  align-items: center !important;
  column-gap: clamp(14px,1.55vw,28px) !important;
  row-gap: 28px !important;
  padding: 135px clamp(20px,3.5vw,76px) 85px !important;
  min-height: 835px !important;
  overflow: hidden !important;
}
body.rof-concept-page .rof-hero-copy {
  width:100% !important; max-width:none !important; min-width:0 !important;
  align-self:center !important; z-index:5 !important;
}
body.rof-concept-page .rof-hero h1 {
  font-size:clamp(54px,4.35vw,86px) !important;
  letter-spacing:-4px !important;
  line-height:.90 !important;
  transform:none !important;
  overflow-wrap:normal !important;
}
body.rof-concept-page .rof-hero-lead {font-size:14px !important; margin:24px 0 24px !important;}
body.rof-concept-page .rof-hero-actions {
  display:flex !important;
  width:100% !important; max-width:100% !important;
  gap:10px !important; flex-wrap:wrap !important;
  margin-bottom:16px !important;
}
body.rof-concept-page .rof-hero-actions > * {min-width:0; flex:1 1 125px; max-width:100%; padding-left:12px !important; padding-right:12px !important;}
body.rof-concept-page .rof-hero-actions .rof-primary-action {flex:1.5 1 175px;}
body.rof-concept-page .rof-quick-actions {width:100% !important;max-width:100% !important;flex-wrap:wrap !important;gap:8px !important;}
body.rof-concept-page .rof-quick-actions > button {min-width:0 !important;padding:9px !important;grid-template-columns:22px minmax(0,1fr) !important;}
body.rof-concept-page .rof-onair-card {width:100% !important;max-width:100% !important;}
body.rof-concept-page .rof-live-visual {
  position:relative !important; width:100% !important; height:540px !important;
  top:auto !important;right:auto !important;left:auto !important;
  opacity:1 !important; transform:none !important; min-width:0 !important;
  z-index:3 !important; align-self:center !important;
}
body.rof-concept-page .rof-live-visual .rof-dj-card {
  width:min(100%,300px) !important;height:385px !important;
}
body.rof-concept-page .rof-live-visual .rof-orbit-a {width:335px !important;height:335px !important;}
body.rof-concept-page .rof-live-visual .rof-orbit-b {width:385px !important;height:235px !important;}
body.rof-concept-page .rof-live-visual .rof-orbit-c {width:270px !important;height:380px !important;}
body.rof-concept-page .rof-live-visual .rof-listener-badge {
  top:4% !important;right:0 !important;left:auto !important;
  width:85px !important;height:85px !important;
  border:1px solid rgba(141,255,60,.55) !important;
  background:rgba(9,13,18,.96) !important; z-index:9 !important;
}
body.rof-concept-page .rof-live-visual .rof-listener-badge b {font-size:27px !important;}
body.rof-concept-page .rof-xat-home {
  position:relative;z-index:7;min-width:0;width:100%;height:722px;
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid #29c7f7;border-radius:19px;
  background:linear-gradient(160deg,rgba(4,17,36,.99),rgba(5,10,23,.98));
  box-shadow:0 0 0 4px rgba(12,153,231,.09),0 0 24px rgba(8,186,255,.29),0 20px 42px rgba(0,0,0,.5);
  color:#fff;
}
.rof-xat-home .rof-xat-heading {
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  min-height:91px;padding:15px 15px 14px 19px;
  border-bottom:1px solid rgba(60,199,255,.28);
  background:linear-gradient(95deg,rgba(1,23,45,.9),rgba(4,20,34,.9));
}
.rof-xat-home .rof-xat-heading h2 {
  font-size:clamp(17px,1.35vw,24px) !important;
  margin:0 0 7px !important;letter-spacing:.2px !important;line-height:1.2 !important;color:#fff !important;
}
.rof-xat-home .rof-xat-heading p {margin:0;color:#a6c5d6;font-size:11px;line-height:1.45;}
.rof-xat-home .rof-xat-expand {
  flex:0 0 43px;display:grid;place-items:center;width:43px;height:43px;
  font-size:23px;color:white;background:#102b40;cursor:pointer;
  border:1px solid rgba(60,203,251,.7);border-radius:10px;
}
.rof-xat-home .rof-xat-expand:hover,.rof-xat-home .rof-xat-expand:focus-visible {outline:2px solid #67e8ff;outline-offset:2px;}
.rof-xat-home .rof-xat-frame-area {flex:1 1 0;min-height:0;padding:9px 10px 2px;overflow:auto;}
.rof-xat-home .embed-chat {position:relative !important;display:flex !important;flex-direction:column !important;width:100% !important;height:100% !important;min-height:0 !important;margin:0 !important;padding:0 !important;visibility:visible !important;clip:auto !important;overflow:visible !important;}
.rof-xat-home .embed-chat iframe {display:block;width:100% !important;height:100% !important;min-height:430px;border:0 !important;border-radius:9px;background:#151c26;}
.rof-xat-home .rof-xat-load {
  width:100%;height:100%;min-height:420px;display:grid;place-items:center;
  border-radius:10px;border:1px solid rgba(46,204,255,.45);background:linear-gradient(140deg,#0c2036,#171126);
  color:#f2fbff;font:800 16px Arial,sans-serif;cursor:pointer;
}
.rof-xat-home .rof-xat-footer {flex:0 0 35px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 16px 10px;color:#94b7c7;font-size:10px;}
.rof-xat-home .rof-xat-footer span {font-weight:800;letter-spacing:.6px;}
.rof-xat-home .rof-xat-footer i {display:inline-block;width:6px;height:6px;background:#52ef71;box-shadow:0 0 8px #52ef71;border-radius:50%;margin-right:6px;}
.rof-xat-home .rof-xat-footer a {color:#8beeff !important;text-decoration:underline !important;}
body.rof-xat-expanded {overflow:hidden !important;}
body.rof-xat-expanded .rof-xat-home.is-fullscreen {
  position:fixed !important;top:max(10px,env(safe-area-inset-top)) !important;
  right:10px !important;bottom:max(10px,env(safe-area-inset-bottom)) !important;
  left:10px !important;width:auto !important;height:auto !important;max-height:none !important;
  z-index:100095 !important;box-shadow:0 0 0 100vmax rgba(0,0,0,.83),0 0 35px rgba(25,206,255,.6) !important;
}
body.rof-xat-expanded .rof-xat-home.is-fullscreen .rof-xat-frame-area{min-height:0;}
/* LAPTOP_XAT_RIGHT_V1
   Keep Xat beside the radio on normal laptop widths. Only very narrow
   tablet/small-laptop widths stack it underneath. */
@media (max-width:1549px) and (min-width:1241px) {
 body.rof-concept-page .rof-concept-home .rof-hero {
   grid-template-columns:minmax(0,1.05fr) minmax(210px,.72fr) minmax(560px,1.70fr) !important;
   grid-template-areas:'copy dj chat' !important;
   column-gap:clamp(10px,1.1vw,17px) !important;
   padding:125px clamp(16px,2vw,32px) 72px !important;
   min-height:820px !important;
 }
 body.rof-concept-page .rof-hero-copy {grid-area:copy !important;}
 body.rof-concept-page .rof-live-visual {grid-area:dj !important;height:490px !important;}
 body.rof-concept-page .rof-live-visual .rof-dj-card {width:min(100%,250px) !important;height:350px !important;}
 body.rof-concept-page .rof-xat-home {grid-area:chat !important;margin:0 !important;height:700px !important;max-width:none !important;}
 body.rof-concept-page .rof-hero h1 {font-size:clamp(50px,4.4vw,70px) !important;letter-spacing:-3px !important;}
 body.rof-concept-page .rof-hero-lead {font-size:13px !important;}
}

/* Below 1240px there is not enough horizontal room for the original Xat UI,
   so stack it to avoid clipping its controls. */
@media (max-width:1240px) and (min-width:781px) {
 body.rof-concept-page .rof-concept-home .rof-hero {
   grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) !important;
   grid-template-areas:'copy dj' 'chat chat' !important;
   padding-top:130px !important;min-height:auto !important;
 }
 body.rof-concept-page .rof-hero-copy {grid-area:copy !important;}
 body.rof-concept-page .rof-live-visual {grid-area:dj !important;}
 body.rof-concept-page .rof-xat-home {grid-area:chat !important;max-width:980px;margin:0 auto 12px;height:735px;}
 body.rof-concept-page .rof-hero h1 {font-size:clamp(60px,6vw,88px) !important;}
}
/* Phone: keep SEO heading and music controls first, then the DJ, then chat. */
@media (max-width:780px) {
 body.rof-concept-page .rof-concept-home .rof-hero {
   display:flex !important;flex-direction:column !important;align-items:stretch !important;
   gap:20px !important;padding:105px 16px 35px !important;min-height:0 !important;
 }
 body.rof-concept-page .rof-hero-copy {order:0 !important;}
 body.rof-concept-page .rof-hero h1 {font-size:clamp(48px,11vw,68px) !important;letter-spacing:-3px !important;}
 body.rof-concept-page .rof-hero-lead {margin:20px 0 !important;}
 body.rof-concept-page .rof-hero-actions {display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:9px !important;}
 body.rof-concept-page .rof-hero-actions .rof-primary-action {grid-column:span 2;}
 body.rof-concept-page .rof-hero-actions > * {width:100% !important;max-width:none !important;min-height:50px !important;}
 body.rof-concept-page .rof-live-visual {
   order:1 !important;height:415px !important;right:auto !important;top:auto !important;
   transform:none !important;opacity:1 !important;margin:0 auto !important;
 }
 body.rof-concept-page .rof-live-visual .rof-dj-card {width:min(79vw,290px) !important;height:360px !important;}
 body.rof-concept-page .rof-live-visual .rof-listener-badge {right:3% !important;top:3% !important;}
 body.rof-concept-page .rof-xat-home {order:2 !important;width:100% !important;height:550px !important;margin-top:4px !important;}
 .rof-xat-home .rof-xat-heading {padding:12px;min-height:78px;}
 .rof-xat-home .rof-xat-heading p {font-size:10px;}
 .rof-xat-home .rof-xat-heading h2 {font-size:18px !important;}
 .rof-xat-home .rof-xat-frame-area {overflow:auto;}
 .rof-xat-home .embed-chat {width:max(100%,620px) !important;}
 .rof-xat-home .embed-chat iframe {width:100% !important;}
 body.rof-xat-expanded .rof-xat-home.is-fullscreen {margin:0 !important;height:auto !important;}
}
@media (prefers-reduced-motion: reduce) {
 body.rof-concept-page .rof-xat-home {scroll-behavior:auto;}
}


/* ROF_XAT_DESKTOP_TALLER_NO_SCROLL_20261010
   Desktop: more room for original Xat window; no outer frame scrollbar.
   Phone: keep vertical and horizontal scrolling for Xat controls. */
@media (min-width:781px) {
  body.rof-concept-page .rof-xat-home .rof-xat-frame-area {
    overflow:hidden !important;
  }
  body.rof-concept-page .rof-xat-home .embed-chat {
    overflow:hidden !important;
  }
  body.rof-concept-page .rof-xat-home .embed-chat iframe {
    overflow:hidden !important;
    min-height:0 !important;
  }
}
@media (max-width:780px) {
  body.rof-concept-page .rof-xat-home .rof-xat-frame-area {
    overflow:auto !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
}


/* ROF_XAT_COMPACT_DESKTOP_MODAL_20261010
   The expand control should create a centered, moderate dialog on desktop,
   not consume the entire screen. Phone keeps the full-height chat. */
@media (min-width:781px) {
  body.rof-xat-expanded .rof-concept-home .rof-xat-home.is-fullscreen {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(980px, calc(100vw - 64px)) !important;
    max-width: 980px !important;
    height: min(680px, calc(100dvh - 70px)) !important;
    max-height: calc(100dvh - 70px) !important;
    min-height: 410px !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 100095 !important;
  }
  body.rof-xat-expanded .rof-concept-home .rof-xat-home.is-fullscreen .rof-xat-frame-area {
    min-height: 0 !important;
    overflow: hidden !important;
  }
}