
:root{
  --st-bg:#0d1117;
  --st-panel:#111827;
  --st-panel-2:#0f1724;
  --st-panel-3:#151f2d;
  --st-border:rgba(255,255,255,.08);
  --st-border-soft:rgba(255,255,255,.06);
  --st-text:#ebf4fb;
  --st-text-soft:#b7c5cf;
  --st-text-muted:#8fa2ae;
  --st-blue:#2f9dcc;
  --st-blue-strong:#3db3ea;
  --st-green:#68a947;
  --st-green-soft:rgba(104,169,71,.12);
  --st-blue-soft:rgba(47,157,204,.12);
  --st-shadow:0 24px 70px rgba(0,0,0,.35);
}

.sta-shell,.sta-shell *{
  box-sizing:border-box;
  font-family:"Poppins",sans-serif;
}

.sta-shell{
  width:100%;
  min-height:calc(100vh - 70px);
  padding:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 15% 15%,rgba(47,157,204,.08),transparent 22%),
    radial-gradient(circle at 85% 82%,rgba(104,169,71,.08),transparent 24%),
    linear-gradient(180deg,#0b0f15,#0d1117);
  color:var(--st-text);
}

.sta-chat{
  width:min(1020px,100%);
  height:min(860px,calc(100vh - 95px));
  min-height:680px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--st-border);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  box-shadow:var(--st-shadow);
  backdrop-filter:blur(10px);
}

/* header */
.sta-header{
  flex:0 0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:16px 18px;
  border-bottom:1px solid var(--st-border-soft);
}

.sta-brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.sta-logo{
  width:128px;
  height:auto;
  display:block;
  filter:brightness(1.02);
}

.sta-brand-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.sta-brand-copy strong{
  color:#f3f8fd;
  font-size:13px;
  line-height:1.25;
  font-weight:700;
}

.sta-brand-copy span{
  margin-top:2px;
  color:var(--st-text-muted);
  font-size:8.9px;
  line-height:1.35;
}

.sta-header-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.sta-live-pill{
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border:1px solid rgba(104,169,71,.22);
  border-radius:999px;
  background:rgba(104,169,71,.08);
  color:#cbe7bf;
  font-size:8.9px;
  font-weight:600;
}

.sta-live-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--st-green);
  box-shadow:0 0 0 4px rgba(104,169,71,.10);
}

.sta-top-btn{
  border:1px solid var(--st-border);
  border-radius:10px;
  padding:8px 11px;
  background:rgba(255,255,255,.03);
  color:var(--st-text-soft);
  font-size:8.8px;
  cursor:pointer;
}

/* conversation area */
.sta-conversation{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:20px 24px;
  background:
    radial-gradient(circle at 92% 10%,rgba(47,157,204,.05),transparent 20%),
    linear-gradient(180deg,rgba(255,255,255,.01),rgba(255,255,255,0));
  scroll-behavior:smooth;
}

.sta-conversation::-webkit-scrollbar{width:8px}
.sta-conversation::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.08);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}

.sta-home{
  max-width:760px;
  margin:34px auto 22px;
  text-align:center;
}

.sta-home-kicker{
  margin-bottom:8px;
  color:#aad291;
  font-size:8.7px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.sta-home h1{
  margin:0;
  color:#f7fbff;
  font-size:30px;
  line-height:1.18;
  letter-spacing:-.03em;
  font-weight:700;
}

.sta-home p{
  max-width:620px;
  margin:11px auto 0;
  color:var(--st-text-soft);
  font-size:11.2px;
  line-height:1.7;
}

.sta-home-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:26px;
  text-align:left;
}

.sta-feature-card{
  padding:14px 14px 13px;
  border:1px solid var(--st-border);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
  cursor:pointer;
  transition:.16s ease;
}

.sta-feature-card:hover{
  transform:translateY(-2px);
  border-color:rgba(47,157,204,.28);
  background:linear-gradient(180deg,rgba(47,157,204,.10),rgba(255,255,255,.02));
  box-shadow:0 14px 28px rgba(0,0,0,.18);
}

.sta-feature-icon{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--st-border);
  color:var(--st-green);
}

.sta-feature-icon svg{
  width:19px;height:19px;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

.sta-feature-card strong{
  display:block;
  margin-top:11px;
  color:#f2f7fd;
  font-size:11.4px;
  font-weight:650;
  line-height:1.35;
}

.sta-feature-card span{
  display:block;
  margin-top:5px;
  color:var(--st-text-muted);
  font-size:9.4px;
  line-height:1.55;
}

.sta-quick-questions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}

.sta-question-chip{
  padding:7px 10px;
  border:1px solid var(--st-border);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:#d7e7f2;
  font-size:9.2px;
  cursor:pointer;
  transition:.15s ease;
}

.sta-question-chip:hover{
  border-color:rgba(47,157,204,.28);
  background:rgba(47,157,204,.10);
}

.sta-home-note{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:17px;
  color:var(--st-text-muted);
  font-size:8.7px;
}

.sta-home-note .dot{
  width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,.18);
}

/* messages */
.sta-row{
  max-width:800px;
  margin:0 auto 16px;
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.sta-row.user{
  justify-content:flex-end;
}

.sta-avatar{
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  border-radius:11px;
  border:1px solid var(--st-border);
  background:rgba(104,169,71,.12);
  color:#c9e4bd;
  font-size:10.2px;
  font-weight:800;
}

.sta-bubble{
  max-width:min(80%,720px);
  padding:13px 14px 12px;
  border:1px solid var(--st-border);
  border-radius:18px 18px 18px 6px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.02));
  color:#e4edf5;
  font-size:12px;
  line-height:1.7;
}

.sta-row.user .sta-bubble{
  border-color:rgba(47,157,204,.28);
  border-radius:18px 18px 6px 18px;
  background:linear-gradient(180deg,rgba(47,157,204,.18),rgba(47,157,204,.11));
  color:#f2fbff;
}

.sta-answer-text{white-space:pre-line}

.sta-source-wrap{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.07);
}

.sta-source-label{
  margin-bottom:7px;
  color:#91a4b1;
  font-size:8px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.sta-source{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:5px;
  padding:8px 9px;
  border:1px solid var(--st-border);
  border-radius:11px;
  background:rgba(255,255,255,.03);
  color:#d9ecf9;
  text-decoration:none;
  font-size:9.3px;
  font-weight:600;
}

.sta-source::before{
  content:"↗";
  width:18px;height:18px;flex:0 0 18px;
  display:grid;place-items:center;
  border-radius:6px;
  background:rgba(104,169,71,.13);
  color:#b8dfaa;
}

.sta-live-note{
  margin-top:9px;
  padding:8px 9px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  color:#99adb9;
  font-size:8.8px;
  line-height:1.5;
}

.sta-cta-row{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:10px;
}

.sta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:10px;
  font-size:9px;
  font-weight:650;
  text-decoration:none!important;
}

.sta-btn.green{
  background:#5e9e3d;
  color:#fff!important;
}

.sta-btn.ghost{
  background:rgba(255,255,255,.04);
  border:1px solid var(--st-border);
  color:#d5e5ef!important;
}

/* forms/typing */
.sta-form-card{padding:1px}
.sta-step{
  margin-bottom:5px;
  color:#91a4b1;
  font-size:8.1px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.sta-q{
  color:#eef7ff;
  font-size:11.4px;
  font-weight:650;
}
.sta-options{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:9px;
}
.sta-option{
  padding:7px 8px;
  border:1px solid var(--st-border);
  border-radius:10px;
  background:rgba(255,255,255,.03);
  color:#d3e4ef;
  font-size:9.1px;
  cursor:pointer;
}
.sta-option:hover{
  border-color:rgba(47,157,204,.28);
  background:rgba(47,157,204,.08);
}

.sta-typing{
  display:flex;
  gap:4px;
  align-items:center;
  padding:2px 0;
}
.sta-dot{
  width:5px;height:5px;border-radius:50%;
  background:#98adba;
  animation:sta-bounce 1.1s infinite;
}
.sta-dot:nth-child(2){animation-delay:.14s}
.sta-dot:nth-child(3){animation-delay:.28s}
@keyframes sta-bounce{
  0%,60%,100%{transform:translateY(0)}
  30%{transform:translateY(-4px)}
}
.sta-meta{
  margin-top:5px;
  color:#8ea1ad;
  font-size:8px;
}

/* footer composer */
.sta-footer{
  flex:0 0 auto;
  padding:10px 18px 14px;
  border-top:1px solid var(--st-border-soft);
  background:rgba(0,0,0,.12);
}

.sta-footer-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}

.sta-inline-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border:1px solid var(--st-border);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:#cad8e2;
  text-decoration:none;
  font-size:8.9px;
  cursor:pointer;
}

.sta-inline-btn:hover{
  border-color:rgba(47,157,204,.28);
  background:rgba(47,157,204,.08);
}

.sta-composer{
  max-width:820px;
  margin:0 auto;
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:7px;
  border:1px solid var(--st-border);
  border-radius:22px;
  background:rgba(255,255,255,.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

#sta-input{
  flex:1;
  min-height:46px;
  max-height:140px;
  resize:none;
  border:0;
  outline:0;
  padding:12px 12px 11px;
  background:transparent;
  color:#f1f7fc;
  font-size:11.5px;
  line-height:1.45;
}

#sta-input::placeholder{
  color:#91a4b1;
}

#sta-send{
  width:45px;height:45px;flex:0 0 45px;
  display:grid;place-items:center;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,#33b0e2,#2f9dcc);
  color:#fff;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(47,157,204,.26);
}

#sta-send svg{
  width:18px;height:18px;
  fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}

.sta-footer-note{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:8px;
  color:#869aa6;
  font-size:7.7px;
}

@media(max-width:860px){
  .sta-home-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:720px){
  .sta-shell{
    min-height:100vh;
    padding:0;
  }

  .sta-chat{
    width:100%;
    height:100vh;
    min-height:0;
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  .sta-header{
    padding:12px 10px;
    gap:8px;
  }

  .sta-logo{
    width:98px;
  }

  .sta-brand-copy{
    display:none;
  }

  .sta-header-right{
    gap:6px;
  }

  .sta-live-pill{
    font-size:7.8px;
    padding:6px 8px;
  }

  .sta-top-btn{
    font-size:7.8px;
    padding:6px 8px;
  }

  .sta-conversation{
    padding:14px 9px;
  }

  .sta-home{
    margin:22px auto 18px;
  }

  .sta-home h1{
    font-size:24px;
  }

  .sta-home p{
    font-size:10.2px;
  }

  .sta-home-grid{
    grid-template-columns:1fr;
    gap:9px;
    margin-top:20px;
  }

  .sta-feature-card{
    padding:13px;
  }

  .sta-bubble{
    max-width:89%;
    font-size:11.2px;
    padding:11px 12px 10px;
  }

  .sta-avatar{
    width:29px;height:29px;flex-basis:29px;
  }

  .sta-footer{
    padding:8px 8px 10px;
  }

  .sta-footer-actions{
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:1px;
  }

  .sta-footer-actions::-webkit-scrollbar{display:none}

  .sta-inline-btn{
    flex:0 0 auto;
    font-size:8.4px;
  }

  #sta-input{
    font-size:10.8px;
  }

  .sta-footer-note{
    font-size:7px;
  }
}

/* Structured commercial / international enquiry form */
.sta-enquiry-bubble{width:min(100%,740px);max-width:min(92%,740px)!important}
.sta-enquiry-form{color:var(--st-text);font-size:11px}
.sta-enquiry-intro{margin:0 0 12px;color:var(--st-text-soft);font-size:10px;line-height:1.55}
.sta-enquiry-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 10px}
.sta-enquiry-grid label{display:grid;gap:4px;color:var(--st-text-soft);font-size:9px;font-weight:600}
.sta-enquiry-grid label span{display:inline;color:#e39b4d}
.sta-enquiry-grid input,.sta-enquiry-grid select,.sta-enquiry-grid textarea{
  width:100%;min-width:0;border:1px solid var(--st-border);border-radius:9px;
  padding:9px 10px;background:rgba(255,255,255,.055);color:var(--st-text);
  font:400 10px/1.45 "Poppins",sans-serif;outline:none
}
.sta-enquiry-grid select option{color:#17252b}
.sta-enquiry-grid input:focus,.sta-enquiry-grid select:focus,.sta-enquiry-grid textarea:focus{border-color:var(--st-blue);box-shadow:0 0 0 2px rgba(47,157,204,.12)}
.sta-enquiry-grid textarea{resize:vertical;min-height:68px}
.sta-enquiry-wide{grid-column:1/-1}
.sta-honeypot{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.sta-enquiry-consent{display:flex;align-items:flex-start;gap:8px;margin-top:12px;color:var(--st-text-soft);font-size:9px;line-height:1.5;cursor:pointer}
.sta-enquiry-consent input{flex:0 0 auto;width:15px;height:15px;margin:1px 0 0;accent-color:var(--st-green)}
.sta-enquiry-submit{display:inline-flex;align-items:center;gap:9px;margin-top:10px;padding:10px 14px;border:0;border-radius:10px;background:#5e9e3d;color:#fff;font:600 10px/1.2 "Poppins",sans-serif;cursor:pointer}
.sta-enquiry-submit:hover{background:#518c34}
.sta-enquiry-submit:disabled{opacity:.65;cursor:wait}
.sta-enquiry-status{margin-top:8px;color:#ffb6a9;font-size:9px;line-height:1.5}
.sta-enquiry-privacy{margin-top:8px;color:var(--st-text-muted);font-size:8px;line-height:1.5}
@media(max-width:560px){.sta-enquiry-grid{grid-template-columns:1fr}.sta-enquiry-wide{grid-column:auto}.sta-enquiry-bubble{max-width:94%!important}}
