:root{
  --pine:#0E3B33;
  --pine-deep:#092822;
  --mint:#E9F3EE;
  --mint-soft:#F4F9F6;
  --marigold:#F2B33D;
  --ink:#122019;
  --muted:#5D7268;
  --white:#FFFFFF;
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',sans-serif;
  background:var(--mint-soft);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  height:100dvh;
}
header{
  background:var(--pine);
  color:var(--mint);
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-shrink:0;
}
.brand{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;
  font-size:1.25rem;
  letter-spacing:-0.02em;
}
.brand span{color:var(--marigold)}
.voice-wrap{display:flex;align-items:center;gap:8px;min-width:0}
.voice-wrap label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;opacity:.75;white-space:nowrap}
select{
  background:var(--pine-deep);
  color:var(--mint);
  border:1px solid rgba(233,243,238,.25);
  border-radius:10px;
  padding:6px 8px;
  font-family:inherit;
  font-size:.78rem;
  max-width:200px;
}
main{
  flex:1;
  overflow-y:auto;
  padding:20px 16px 12px;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:720px;
  width:100%;
  margin:0 auto;
}
.bubble{
  max-width:85%;
  padding:12px 16px;
  border-radius:var(--radius);
  line-height:1.55;
  font-size:.95rem;
  white-space:pre-wrap;
  animation:pop .18s ease-out;
}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bubble.user{
  align-self:flex-end;
  background:var(--pine);
  color:var(--mint);
  border-bottom-right-radius:6px;
}
.bubble.ai{
  align-self:flex-start;
  background:var(--white);
  border:1px solid #DCE9E2;
  border-bottom-left-radius:6px;
}
.bubble.ai .replay{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:8px;border:none;background:var(--mint);
  color:var(--pine);border-radius:20px;padding:4px 12px;
  font-size:.75rem;font-weight:600;cursor:pointer;font-family:inherit;
}
.bubble.ai .replay:hover{background:#DCEDE4}
.hint{
  align-self:center;
  text-align:center;
  color:var(--muted);
  font-size:.82rem;
  max-width:440px;
  line-height:1.6;
  padding:24px 0;
}
.hint b{color:var(--pine)}
.hint .small{font-size:.75rem}
.thinking{align-self:flex-start;color:var(--muted);font-size:.85rem;padding:4px 6px}
.thinking::after{content:'…';animation:dots 1.2s infinite}
@keyframes dots{0%{content:'.'}33%{content:'..'}66%{content:'...'}}

footer{
  flex-shrink:0;
  background:var(--white);
  border-top:1px solid #DCE9E2;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
}
.controls{
  max-width:720px;margin:0 auto;
  display:flex;align-items:center;gap:12px;
}
.textbox{
  flex:1;display:flex;gap:8px;
  background:var(--mint-soft);
  border:1px solid #DCE9E2;
  border-radius:14px;padding:6px 6px 6px 14px;
}
.textbox input{
  flex:1;border:none;background:none;outline:none;
  font-family:inherit;font-size:.92rem;color:var(--ink);
}
.textbox button{
  border:none;background:var(--pine);color:var(--mint);
  border-radius:10px;padding:8px 14px;font-weight:600;
  font-size:.85rem;cursor:pointer;font-family:inherit;
}
/* ---- tombol bicara: elemen tanda tangan ---- */
.mic-wrap{position:relative;flex-shrink:0}
#micBtn{
  width:64px;height:64px;border-radius:50%;
  border:none;cursor:pointer;
  background:var(--marigold);
  color:var(--pine-deep);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(242,179,61,.45);
  transition:transform .12s ease;
  position:relative;z-index:2;
}
#micBtn:active{transform:scale(.94)}
#micBtn:focus-visible{outline:3px solid var(--pine);outline-offset:2px}
#micBtn svg{width:26px;height:26px}
#micBtn.listening{background:#E5533C;color:#fff;box-shadow:0 4px 14px rgba(229,83,60,.45)}
.ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid #E5533C;opacity:0;z-index:1;
}
.listening ~ .ring{animation:ripple 1.4s ease-out infinite}
.listening ~ .ring.r2{animation-delay:.45s}
@keyframes ripple{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(1.9);opacity:0}
}
.status{
  text-align:center;font-size:.72rem;color:var(--muted);
  max-width:720px;margin:8px auto 0;letter-spacing:.02em;
}
.interim{color:var(--muted);font-style:italic}
@media (prefers-reduced-motion:reduce){
  .bubble{animation:none}
  .listening ~ .ring{animation:none;opacity:.4;transform:scale(1.3)}
}
@media (max-width:520px){
  header{flex-wrap:wrap;row-gap:8px}
  .voice-wrap{flex:0 0 100%;min-width:0;order:3}
  select{max-width:100%;width:100%}
}

/* ============ Voice Studio ============ */
.topnav{display:flex;gap:4px}
.topnav a{
  color:var(--mint);text-decoration:none;font-size:.8rem;font-weight:500;
  padding:6px 12px;border-radius:20px;opacity:.7;white-space:nowrap;
}
.topnav a:hover{opacity:1;background:rgba(233,243,238,.1)}
.topnav a.active{background:var(--marigold);color:var(--pine-deep);font-weight:600;opacity:1}

.studio-page{height:auto;min-height:100dvh;display:block}
.studio-page header{position:sticky;top:0;z-index:10}
main.studio{
  max-width:780px;margin:0 auto;padding:24px 16px 48px;
  display:flex;flex-direction:column;gap:16px;overflow:visible;
}
.studio-intro{
  color:var(--muted);font-size:.87rem;line-height:1.6;text-align:center;
  max-width:520px;margin:0 auto;
}
.card{
  background:var(--white);border:1px solid #DCE9E2;
  border-radius:var(--radius);padding:18px;
}

/* --- profil suara (bisa dilipat) --- */
.profiles summary{
  cursor:pointer;font-size:.85rem;font-weight:600;color:var(--pine);
  list-style:none;display:flex;align-items:center;gap:6px;
}
.profiles summary::-webkit-details-marker{display:none}
.profiles summary::before{content:'\25B8';transition:transform .15s ease;display:inline-block}
.profiles[open] summary::before{transform:rotate(90deg)}
.hint-inline{font-weight:400;color:var(--muted);font-size:.78rem}
.track-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.track{padding:14px;display:flex;flex-direction:column;gap:11px;background:var(--mint-soft)}
.track-head{display:flex;align-items:center;gap:8px}
.track-badge{
  width:24px;height:24px;flex-shrink:0;border-radius:50%;
  background:var(--pine);color:var(--mint);
  display:flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:700;font-family:'Bricolage Grotesque',sans-serif;
}
.track[data-track="voice2"] .track-badge{background:#2E7D6B}
.track[data-track="narrator"] .track-badge{background:var(--marigold);color:var(--pine-deep)}
.track-name{font-family:'Bricolage Grotesque',sans-serif;font-size:.92rem;font-weight:600}
.field-label{
  display:block;font-size:.68rem;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;
}
select.wide{max-width:none;width:100%;padding:8px 10px;font-size:.8rem}

/* --- naskah percakapan --- */
.script-card{display:flex;flex-direction:column;gap:14px}
.script-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.script-title{font-family:'Bricolage Grotesque',sans-serif;font-size:1.05rem;font-weight:600}
.gap-wrap{display:flex;align-items:center;gap:8px;flex:1;min-width:210px;justify-content:flex-end}
.gap-wrap label{font-size:.72rem;color:var(--muted);white-space:nowrap}
.gap-wrap input[type=range]{max-width:120px}
.gap-wrap output{
  font-size:.7rem;color:var(--pine);background:var(--mint);
  padding:2px 9px;border-radius:20px;font-weight:600;white-space:nowrap;
  min-width:74px;text-align:center;
}

.line-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.empty-note{color:var(--muted);font-size:.83rem;text-align:center;padding:22px 0;line-height:1.6}
.line{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--mint-soft);border:1px solid #E4EFE9;
  border-radius:12px;padding:10px;
  border-left:3px solid var(--pine);
}
.line[data-speaker="voice2"]{border-left-color:#2E7D6B}
.line[data-speaker="narrator"]{border-left-color:var(--marigold)}
.line-side{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;width:78px}
.line-badge{
  width:24px;height:24px;border-radius:50%;
  background:var(--pine);color:var(--mint);
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;font-family:'Bricolage Grotesque',sans-serif;
}
.line[data-speaker="voice2"] .line-badge{background:#2E7D6B}
.line[data-speaker="narrator"] .line-badge{background:var(--marigold);color:var(--pine-deep)}
.line-speaker{
  width:100%;max-width:none;padding:4px 5px;font-size:.68rem;
  background:var(--white);color:var(--ink);border:1px solid #DCE9E2;
}
.line-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.line-text{
  width:100%;border:1px solid #DCE9E2;border-radius:9px;background:var(--white);
  padding:9px 11px;resize:vertical;font-family:inherit;font-size:.88rem;
  line-height:1.5;color:var(--ink);outline:none;min-height:44px;
}
.line-text:focus{border-color:var(--pine)}
.line-tools{display:flex;gap:5px;align-items:center}
.mini-btn{
  flex-shrink:0;width:27px;height:27px;border-radius:7px;
  border:1px solid #CBDDD3;background:var(--white);color:var(--pine);
  font-size:.7rem;cursor:pointer;font-family:inherit;line-height:1;
}
.mini-btn:hover:not(:disabled){background:var(--mint);border-color:var(--pine)}
.mini-btn:disabled{opacity:.3;cursor:default}
.mini-btn:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.del-line{color:#C0492F}
.del-line:hover:not(:disabled){background:#FDEDEA;border-color:#C0492F}

.add-row{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding-top:2px}
.add-label{font-size:.74rem;color:var(--muted);margin-right:2px}
.add-btn{
  border:1px dashed #B9CFC4;background:var(--white);color:var(--pine);
  border-radius:20px;padding:6px 13px;font-size:.76rem;font-weight:600;
  cursor:pointer;font-family:inherit;
}
.add-btn:hover{background:var(--mint);border-style:solid}
.add-btn:focus-visible{outline:2px solid var(--pine);outline-offset:2px}

/* --- slider umum --- */
.slider-row{display:flex;flex-direction:column;gap:5px}
.slider-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.slider-head label{font-size:.78rem;font-weight:600;color:var(--ink)}
.slider-head output{
  font-size:.68rem;color:var(--pine);background:var(--mint);
  padding:2px 8px;border-radius:20px;font-weight:600;white-space:nowrap;
}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:5px;
  background:var(--mint);border-radius:6px;outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:17px;height:17px;
  border-radius:50%;background:var(--marigold);cursor:pointer;
  border:3px solid var(--white);box-shadow:0 1px 4px rgba(14,59,51,.3);
}
input[type=range]::-moz-range-thumb{
  width:17px;height:17px;border-radius:50%;background:var(--marigold);
  cursor:pointer;border:3px solid var(--white);box-shadow:0 1px 4px rgba(14,59,51,.3);
}
input[type=range]:focus-visible{outline:2px solid var(--pine);outline-offset:4px}

.link-btn{
  align-self:flex-start;background:none;border:none;padding:0;
  color:var(--muted);font-family:inherit;font-size:.74rem;
  cursor:pointer;text-decoration:underline;
}
.link-btn:hover{color:var(--pine)}

.actions{display:flex;gap:9px}
.btn{
  flex:1;border:none;border-radius:12px;padding:13px 12px;
  font-family:inherit;font-size:.88rem;font-weight:600;cursor:pointer;
  transition:transform .12s ease,opacity .12s ease;
}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.55;cursor:progress}
.btn.primary{background:var(--marigold);color:var(--pine-deep);box-shadow:0 3px 10px rgba(242,179,61,.4)}
.btn.ghost{background:var(--white);color:var(--pine);border:1.5px solid var(--pine)}
.btn.ghost:hover:not(:disabled){background:var(--mint)}
.btn:focus-visible{outline:3px solid var(--pine);outline-offset:2px}

.player{width:100%}
.studio .status{margin-top:0}

@media (max-width:640px){
  .track-grid{grid-template-columns:1fr}
  .line{flex-direction:column;gap:8px}
  .line-side{flex-direction:row;width:auto;align-self:stretch}
  .line-speaker{max-width:130px}
  .gap-wrap{justify-content:flex-start}
}
@media (max-width:520px){
  .topnav a{padding:6px 9px;font-size:.74rem}
  .actions{flex-direction:column}
}