.ssc{
  /* --- kleuren --- */
  --ssc-app:#FAF9F5;
  --ssc-side:#F0EEE6;
  --ssc-line:#E6E2D8;
  --ssc-line-soft:#EDEAE1;
  --ssc-ink:#1F1E1D;
  --ssc-ink-2:#43413C;
  --ssc-muted:#8A8577;
  --ssc-clay:#D97757;
  --ssc-clay-soft:#F5E5DD;

  /* --- typografie --- */
  --ssc-sans:"Public Sans","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ssc-serif:"Newsreader",ui-serif,Georgia,serif;

  box-sizing:border-box;
  padding:clamp(48px,7vw,104px) 20px;
  font-family:var(--ssc-sans);
  -webkit-font-smoothing:antialiased;
}

.ssc__inner{max-width:1000px; margin:0 auto;}

/* ---------- kop ---------- */
.ssc__head{text-align:center; margin:0 auto clamp(32px,4vw,52px); max-width:640px;}
.ssc__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  margin:0 0 18px;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ssc-clay);
}
.ssc__eyebrow::before,.ssc__eyebrow::after{
  content:""; width:22px; height:1px; background:currentColor; opacity:.45;
}
.ssc__title{
  margin:0 0 14px;
  font-family:var(--ssc-serif);
  font-weight:400;
  font-size:clamp(30px,4.4vw,46px);
  line-height:1.12;
  letter-spacing:-.015em;
  color:#FAF9F5;
}
.ssc__title em{font-style:italic; color:var(--ssc-clay);}
.ssc__sub{margin:0; font-size:16px; line-height:1.6; color:#B8B4A8;}

/* ---------- macOS venster ---------- */
.ssc__window{
  border-radius:14px;
  background:var(--ssc-app);
  color:var(--ssc-ink);
  border:1px solid rgba(31,30,29,.10);
  box-shadow:
    0 1px 1px rgba(31,30,29,.04),
    0 8px 18px -6px rgba(31,30,29,.10),
    0 40px 70px -30px rgba(31,30,29,.34);
  overflow:hidden;
  transform:translateY(14px) scale(.99);
  opacity:0;
  animation:ssc-rise .9s cubic-bezier(.2,.7,.3,1) .1s forwards;
}
@keyframes ssc-rise{to{transform:none; opacity:1;}}

.ssc__bar{
  display:flex; align-items:center; gap:8px;
  height:40px; padding:0 14px;
  background:linear-gradient(#F3F1EA,#EDEBE3);
  border-bottom:1px solid var(--ssc-line);
}
.ssc__dots{display:flex; gap:8px;}
.ssc__dot{width:11px; height:11px; border-radius:50%; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12);}
.ssc__dot--r{background:#FF5F57;}
.ssc__dot--y{background:#FEBC2E;}
.ssc__dot--g{background:#28C840;}
.ssc__barTitle{
  flex:1; text-align:center;
  font-size:12.5px; font-weight:600; color:#6E6A5F; letter-spacing:.01em;
  margin-right:56px;
}

.ssc__body{display:flex; min-height:420px;}

/* ---------- zijbalk ---------- */
.ssc__side{
  width:214px; flex:none;
  background:var(--ssc-side);
  border-right:1px solid var(--ssc-line);
  padding:14px 10px;
  display:flex; flex-direction:column; gap:16px;
}
.ssc__brand{display:flex; align-items:center; gap:8px; padding:2px 6px 0;}
.ssc__brandName{font-size:14px; font-weight:600; letter-spacing:-.01em;}
.ssc__new{
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:8px;
  background:#FFFDF8;
  border:1px solid var(--ssc-line);
  font-size:13px; font-weight:500; color:var(--ssc-ink-2);
  box-shadow:0 1px 0 rgba(31,30,29,.03);
}
.ssc__new svg{color:var(--ssc-clay);}
.ssc__label{
  padding:0 8px; font-size:11px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ssc-muted);
}
.ssc__recents{display:flex; flex-direction:column; gap:1px; margin-top:-8px;}
.ssc__recent{
  padding:7px 8px; border-radius:7px;
  font-size:12.5px; color:#6C6759;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ssc__recent--on{background:rgba(217,119,87,.10); color:var(--ssc-ink); font-weight:500;}
.ssc__conn{
  margin-top:auto; display:flex; align-items:center; gap:8px;
  padding:8px 9px; border-radius:8px;
  background:#FFFDF8; border:1px solid var(--ssc-line);
  font-size:12px; color:var(--ssc-ink-2);
}
.ssc__connDot{
  width:6px; height:6px; border-radius:50%; background:#2F9E5E; flex:none;
  box-shadow:0 0 0 3px rgba(47,158,94,.16);
  animation:ssc-pulse 2.4s ease-in-out infinite;
}
@keyframes ssc-pulse{50%{box-shadow:0 0 0 5px rgba(47,158,94,.05);}}

/* ---------- hoofdgebied ---------- */
.ssc__main{
  flex:1; min-width:0;
  display:flex; flex-direction:column;
  padding:26px clamp(18px,3.2vw,40px) 20px;
}
.ssc__thread{flex:1; display:flex; flex-direction:column; gap:18px; min-height:0;}

.ssc__greet{
  display:flex; align-items:center; justify-content:center; gap:12px;
  flex:1; min-height:150px;
  font-family:var(--ssc-serif); font-size:clamp(20px,2.6vw,27px);
  color:var(--ssc-ink-2); letter-spacing:-.01em;
  transition:opacity .35s ease, transform .35s ease;
}
.ssc__greet[data-hidden="true"]{opacity:0; transform:translateY(-8px); flex:0; min-height:0; height:0; overflow:hidden;}

/* gebruikersbericht */
.ssc__user{
  align-self:flex-end; max-width:82%;
  padding:11px 15px; border-radius:14px 14px 4px 14px;
  background:var(--ssc-clay-soft);
  border:1px solid rgba(217,119,87,.22);
  font-size:14.5px; line-height:1.5; color:var(--ssc-ink);
  animation:ssc-pop .32s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes ssc-pop{from{opacity:0; transform:translateY(8px) scale(.98);}}

/* antwoord */
.ssc__reply{display:flex; gap:12px; align-items:flex-start; animation:ssc-pop .32s cubic-bezier(.2,.8,.3,1) both;}
.ssc__replyBody{min-width:0; font-size:14.5px; line-height:1.62; color:var(--ssc-ink-2);}
.ssc__tool{
  display:inline-flex; align-items:center; gap:7px;
  margin-bottom:10px; padding:5px 10px 5px 8px;
  border-radius:7px; background:#F2F0E8; border:1px solid var(--ssc-line);
  font-size:12px; color:#6C6759; font-variant-numeric:tabular-nums;
}
.ssc__tool b{font-weight:600; color:var(--ssc-ink-2);}
.ssc__spin{
  width:11px; height:11px; border-radius:50%;
  border:1.5px solid rgba(217,119,87,.28); border-top-color:var(--ssc-clay);
  animation:ssc-spin .7s linear infinite;
}
@keyframes ssc-spin{to{transform:rotate(360deg);}}
.ssc__check{width:12px; height:12px; color:#2F9E5E;}

.ssc__rows{
  margin:12px 0 0; padding:0; list-style:none;
  border-top:1px solid var(--ssc-line-soft);
}
.ssc__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:7px 0; border-bottom:1px solid var(--ssc-line-soft);
  font-size:13.5px;
  opacity:0; transform:translateY(6px);
}
.ssc__row.is-in{animation:ssc-row .38s cubic-bezier(.2,.8,.3,1) forwards;}
@keyframes ssc-row{to{opacity:1; transform:none;}}
.ssc__row span:last-child{font-weight:600; color:var(--ssc-ink); font-variant-numeric:tabular-nums; white-space:nowrap;}
.ssc__row--tot span:last-child{color:var(--ssc-clay);}

/* ---------- invoerveld ---------- */
.ssc__composer{
  margin-top:18px; padding:12px 12px 9px;
  border-radius:13px; background:#FFFDF8;
  border:1px solid var(--ssc-line);
  box-shadow:0 2px 10px -4px rgba(31,30,29,.10);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.ssc__composer[data-active="true"]{
  border-color:rgba(217,119,87,.5);
  box-shadow:0 0 0 3px rgba(217,119,87,.10), 0 2px 10px -4px rgba(31,30,29,.10);
}
.ssc__input{
  min-height:24px;
  font-size:15px; line-height:1.5; color:var(--ssc-ink);
  word-break:break-word;
}
.ssc__ph{color:#A9A395;}
.ssc__caret{
  display:inline-block; width:1.5px; height:1.05em;
  margin-left:1px; vertical-align:-.16em;
  background:var(--ssc-clay);
  animation:ssc-blink 1.05s steps(1) infinite;
}
@keyframes ssc-blink{50%{opacity:0;}}
.ssc__caret[data-blink="false"]{animation:none;}

.ssc__tools{display:flex; align-items:center; gap:8px; margin-top:11px;}
.ssc__chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:20px;
  border:1px solid var(--ssc-line); background:#FAF8F2;
  font-size:11.5px; color:#6C6759;
}
.ssc__icon{
  width:26px; height:26px; border-radius:7px;
  display:grid; place-items:center; color:#9A9486;
}
.ssc__send{
  margin-left:auto; width:28px; height:28px; border-radius:8px;
  display:grid; place-items:center;
  background:var(--ssc-line); color:#FFFDF8;
  transition:background .25s ease, transform .25s ease;
}
.ssc__send[data-ready="true"]{background:var(--ssc-clay); transform:scale(1.04);}

/* ---------- onderschrift ---------- */
.ssc__foot{
  margin:22px auto 0; max-width:560px; text-align:center;
  font-size:13.5px; line-height:1.6; color:#B8B4A8;
}
.ssc__foot b{color:#E8E4D8; font-weight:600;}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .ssc__side{display:none;}
  .ssc__body{min-height:0;}
  .ssc__barTitle{margin-right:0;}
  .ssc__main{padding:20px 16px 14px;}
  .ssc__greet{min-height:90px;}
  .ssc__user{max-width:92%;}
}
@media (prefers-reduced-motion:reduce){
  .ssc *,.ssc *::before{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
  .ssc__window{opacity:1; transform:none;}
}