/* foh.css — SKS FOH runtime shell */

:root{
  --foh-ink:#0b0e14;
  --foh-muted:rgba(11,14,20,.68);
  --foh-line:rgba(0,0,0,.18);
  --foh-panel:rgba(255,255,255,.42);
  --foh-panel-strong:rgba(255,255,255,.58);
  --foh-focus:rgba(74,111,143,.18);
  --foh-radius:14px;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

body{
  margin:0;
  min-height:100vh;
  padding:28px 18px;

  font:16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#0b0e14;

  background-image:url("/images/sks_background.jpg");
  background-position:center 15%;
  background-size:108%;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

body::before{
  content:"";
  position:fixed;
  inset:0;

  background:
    radial-gradient(
      circle at center,
      rgba(0,0,0,0) 35%,
      rgba(0,0,0,0.58) 100%
    );

  pointer-events:none;
  z-index:-1;
}

body::after{
  content:"";
  position:fixed;
  inset:0;

  background:inherit;

  pointer-events:none;
  z-index:-2;

  filter:blur(0.8px);
  transform:scale(1.04);
}

body > h1,
body > p{
  text-align:center;
}

body > h1{
  margin:0 0 4px;
  font-size:34px;
  letter-spacing:.015em;
}

body > p{
  margin:0 0 24px;
  color:rgba(11,14,20,.68);
}

body.foh-page main > header{
background: linear-gradient(
  135deg,
  #e8b07a 0%,
  #d9925b 52%,
  #c9784a 100%
);

  border: 1px solid rgba(0,0,0,.35);
  color: #f4f4f4;
}

/* Runtime shell */
#chatBox{
  width:100%;
  max-width:1040px;
  margin:10px auto;
  padding:14px;
  min-height:620px;

  display:flex;
  flex-direction:column;
  gap:16px;

  color:var(--foh-ink);
  background:var(--foh-panel);
  border:1px solid var(--foh-line);
  border-radius:var(--foh-radius);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 12px 24px rgba(0,0,0,.06),
    0 10px 24px rgba(0,0,0,.14);
}

/* Entry state */
#fohEntry{
  display:grid;
  gap:10px;

  width:100%;
  max-width:840px;
  margin:0 auto;
}

#fohEntry p{
  margin:0 0 4px;
  text-align:center;
  color:var(--foh-ink);
}

/* Buttons */
#fohEntry button,
#submitContactButton,
#resetSessionButton,
#fohButtonRow button{
  padding:11px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.24);
  background:rgba(255,255,255,.55);
  color:var(--foh-ink);
  font-weight:700;
  cursor:pointer;
}

#fohEntry button:hover,
#submitContactButton:hover,
#resetSessionButton:hover,
#chatForm button:hover{
  background:rgba(255,255,255,.72);
}

/* Messages */
#messages{
  min-height:320px;
  max-height:520px;
  overflow-y:auto;

  padding:12px;
  border-radius:12px;
  background:rgba(255,255,255,.30);
  border:1px solid rgba(0,0,0,.12);
}

#messages .foh-message{
  font-weight:700;
  color:rgba(20,20,20,.92);
  background: rgba(255,255,255,.46);
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.08);
}

#messages .user-message{
  font-weight:400;
  color:rgba(20,20,20,.78);
  background: rgba(255,255,255,.10);
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.05);
}

/* Contact capture */
#contactCapture{
  margin:0 !important;
  padding:16px !important;
  border:1px solid rgba(0,0,0,.16) !important;
  border-radius:12px;
  background:rgba(255,255,255,.34);
}

#contactCapture h3{
  margin:0 0 8px;
}

#contactCapture input{
  width:100% !important;
  max-width:420px;
  padding:11px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.22);
  background:rgba(255,255,255,.68);
}

/* Controls */
#fohControls{
  margin-top:0 !important;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.12);
}

/* Input row */
#chatForm{
  width:100%;
  margin-top:14px;
}

#messageInput{
  width:100%;
  min-height:78px;

  padding:14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.24);
  background:rgba(255,255,255,.68);

  resize:none;
  box-sizing:border-box;

  font:inherit;
  line-height:1.5;
}

/* Focus */
#chatBox:focus-within{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.70),
    inset 0 14px 28px rgba(0,0,0,.08),
    0 16px 40px rgba(0,0,0,.20),
    0 0 0 4px var(--foh-focus);
}

/* Mobile */
@media (max-width:640px){
  #chatBox{
    margin:16px auto;
    padding:14px;
    min-height:320px;
  }

  #chatForm{
    flex-direction:column;
  }

#fohEntry button:hover,
#submitContactButton:hover,
#resetSessionButton:hover,
#fohButtonRow button:hover{
  background:rgba(255,255,255,.72);
}
}

@media (max-width: 720px){

  body{
    background-size: cover;
    background-position: center center;
  }

}