/* CHAT256 PRIVATE CHAT V1 — final visual layer
   Product language: private chat. Internal room/session IDs are unchanged.
   This layer intentionally sits last and is presentation-only. */
:root{
  --c256-bg:#05070b;
  --c256-panel:rgba(13,18,27,.78);
  --c256-line:rgba(255,255,255,.085);
  --c256-text:#f4f8fb;
  --c256-muted:#93a4b4;
  --c256-cyan:#72e6f6;
  --c256-cyan-soft:rgba(114,230,246,.12);
  --c256-violet:#a58bff;
}
#modal .landing-shell{
  background:
    radial-gradient(900px 520px at 50% 8%,rgba(71,185,219,.095),transparent 60%),
    radial-gradient(650px 500px at 84% 35%,rgba(132,99,255,.065),transparent 65%),
    #05070b!important;
  color:var(--c256-text)!important;
}
#modal .landing-topline{
  max-width:1180px!important;
  padding:22px 26px 0!important;
}
#modal .landing-brand .brand-wordmark{
  letter-spacing:.17em!important;
  font-weight:760!important;
}
#modal .landing-security{
  border:1px solid var(--c256-line);
  background:rgba(255,255,255,.025);
  border-radius:999px;
  padding:7px 11px;
  backdrop-filter:blur(18px);
}
#modal .landing-main{
  max-width:1180px!important;
  padding:clamp(35px,6vw,80px) 22px 80px!important;
}
#modal .landing-hero{
  position:relative;
  min-height:690px;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
#modal .landing-hero-copy{
  position:relative;
  z-index:3;
  max-width:850px;
  text-align:center;
}
#modal .landing-eyebrow{
  color:#91a5b7!important;
  font-size:10px!important;
  letter-spacing:.22em!important;
  font-weight:700!important;
}
#modal .landing-hero-copy h1{
  font-size:clamp(56px,8.3vw,108px)!important;
  line-height:.91!important;
  letter-spacing:-.075em!important;
  font-weight:790!important;
  margin:22px 0 22px!important;
}
#modal .landing-hero-copy h1 em{
  background:linear-gradient(105deg,#f8fdff 10%,#72e6f6 50%,#a58bff 95%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}
#modal .landing-lead{
  max-width:610px!important;
  color:#9eafbe!important;
  font-size:16px!important;
  line-height:1.65!important;
}
#modal .landing-hero::before{
  content:"";
  position:absolute;
  width:min(72vw,720px);
  height:min(72vw,720px);
  border-radius:50%;
  border:1px solid rgba(114,230,246,.09);
  box-shadow:
    0 0 90px rgba(114,230,246,.07),
    inset 0 0 100px rgba(114,230,246,.035);
  transform:translateY(8px);
  pointer-events:none;
}
#modal .landing-hero::after{
  content:"";
  position:absolute;
  width:2px;height:2px;
  background:#c9fbff;
  border-radius:50%;
  box-shadow:
    12vw -9vw 0 rgba(114,230,246,.8),
    -19vw 12vw 0 rgba(165,139,255,.65),
    24vw 16vw 0 rgba(114,230,246,.55),
    -27vw -13vw 0 rgba(255,255,255,.45),
    31vw -2vw 0 rgba(165,139,255,.5),
    -33vw 4vw 0 rgba(114,230,246,.4);
  opacity:.7;
  pointer-events:none;
}
#modal .landing-hero-orbit{
  opacity:.42!important;
  border-color:rgba(114,230,246,.16)!important;
}
#modal .landing-hero-glow{
  opacity:.18!important;
  background:radial-gradient(circle,rgba(114,230,246,.35),transparent 68%)!important;
}
#modal .landing-primary-action{
  position:relative;
  z-index:4;
  margin-top:34px!important;
}
#modal .landing-start-button{
  min-width:300px!important;
  min-height:62px!important;
  padding:0 22px 0 26px!important;
  border-radius:17px!important;
  border:1px solid rgba(255,255,255,.34)!important;
  background:linear-gradient(180deg,#f9fdff,#dceef3)!important;
  color:#071016!important;
  box-shadow:0 18px 55px rgba(0,0,0,.34),0 0 0 1px rgba(114,230,246,.08)!important;
  font-size:14px!important;
  font-weight:760!important;
  letter-spacing:.01em!important;
  transition:transform .2s ease,box-shadow .2s ease!important;
}
#modal .landing-start-button b{
  display:grid;
  place-items:center;
  width:34px;height:34px;
  border-radius:11px;
  background:#07131a;
  color:#dffcff;
}
#modal .landing-start-button:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 25px 70px rgba(0,0,0,.42),0 0 30px rgba(114,230,246,.10)!important;
}
#modal .landing-mode-switch{
  position:relative;
  z-index:4;
  display:flex!important;
  gap:5px!important;
  margin-top:10px!important;
  padding:5px!important;
  border:1px solid var(--c256-line)!important;
  background:rgba(5,8,13,.68)!important;
  border-radius:15px!important;
  backdrop-filter:blur(18px);
}
#modal .landing-mode{
  min-width:90px!important;
  height:36px!important;
  border-radius:10px!important;
  color:#778b9d!important;
  background:transparent!important;
  border:0!important;
  font-size:11px!important;
}
#modal .landing-mode.is-active{
  color:#eafcff!important;
  background:var(--c256-cyan-soft)!important;
  box-shadow:inset 0 0 0 1px rgba(114,230,246,.10)!important;
}
#modal .landing-mode-icon{color:var(--c256-cyan)!important}
#modal .landing-join-row{
  position:relative;
  z-index:4;
  width:min(520px,100%)!important;
  margin-top:20px!important;
  padding:5px!important;
  border:1px solid var(--c256-line)!important;
  background:rgba(9,13,20,.72)!important;
  border-radius:14px!important;
  backdrop-filter:blur(18px);
}
#modal .landing-join-input{
  height:45px!important;
  background:transparent!important;
  border:0!important;
  color:#e9f7fb!important;
  font-size:12px!important;
}
#modal .landing-join-input:focus{outline:none!important}
#modal .landing-join-button{
  height:45px!important;
  border-radius:10px!important;
  background:#101a23!important;
  border:1px solid rgba(255,255,255,.08)!important;
  color:#dff7fb!important;
  font-size:11px!important;
  font-weight:700!important;
}
#modal .landing-random{
  position:relative;
  z-index:4;
  margin-top:18px!important;
  border-color:rgba(165,139,255,.13)!important;
  background:rgba(165,139,255,.035)!important;
}
#modal .landing-proof{
  position:relative;
  z-index:4;
  color:#718292!important;
  margin-top:25px!important;
}
#modal .landing-proof span{gap:7px!important}
#modal .landing-proof span:first-child{color:#8497a7}
#modal .landing-secondary-content{
  max-width:960px!important;
  margin:30px auto 0!important;
  padding:65px 0 0!important;
  border-top:1px solid var(--c256-line)!important;
}
#modal .landing-secondary-content h2{
  max-width:720px!important;
  margin:0!important;
  font-size:clamp(30px,4vw,50px)!important;
  line-height:1!important;
  letter-spacing:-.05em!important;
}
#modal .landing-secondary-content>p{
  max-width:650px!important;
  color:#899bab!important;
  margin-top:17px!important;
}
#modal .c256-seo-grid{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:10px!important;
  margin-top:28px!important;
}
#modal .c256-seo-card{
  padding:24px!important;
  border:1px solid var(--c256-line)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))!important;
}
#modal .c256-seo-card b{
  color:var(--c256-cyan)!important;
  font-size:9px!important;
  letter-spacing:.16em!important;
}
#modal .c256-seo-card strong{
  display:block!important;
  margin-top:10px!important;
  font-size:15px!important;
}
#modal .c256-seo-card p{
  font-size:11px!important;
  color:#7f90a0!important;
  line-height:1.6!important;
}
@media(max-width:720px){
  #modal .landing-topline{padding:16px 15px 0!important}
  #modal .landing-security{display:none}
  #modal .landing-main{padding:20px 15px 55px!important}
  #modal .landing-hero{min-height:650px!important}
  #modal .landing-hero-copy h1{font-size:clamp(48px,15vw,72px)!important}
  #modal .landing-lead{font-size:14px!important}
  #modal .landing-start-button{min-width:0!important;width:100%!important}
  #modal .landing-mode{min-width:0!important;flex:1}
  #modal .landing-join-row{display:flex!important}
  #modal .landing-join-input{min-width:0!important}
  #modal .landing-join-button{white-space:nowrap!important}
  #modal .c256-seo-grid{grid-template-columns:1fr!important}
  #modal .landing-secondary-content{padding-top:45px!important}
}