/* ============================================================
   Chat Studio — editor chrome (dark desk) + WhatsApp preview
   ============================================================ */
:root{
  --ink:#0d1418;
  --panel:#141e24;
  --panel-2:#18242c;
  --line:#24343d;
  --text:#e7edf0;
  --muted:#8ba3af;
  --accent:#ffb703;
  --accent-ink:#22190a;
  --green:#00a884;
  --danger:#ff6b5e;
  --radius:10px;
  --font:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); background:var(--ink); color:var(--text);
  display:flex; flex-direction:column; overflow:hidden;
}
button,input,select,textarea{font:inherit; color:inherit}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px}
.brand-mark{
  width:30px;height:30px;border-radius:9px;background:var(--green);
  display:grid;place-items:center;font-weight:700;font-size:13px;color:#06231c;letter-spacing:.5px;
}
.brand-name{font-weight:600; letter-spacing:.2px}
.topbar-actions{display:flex; gap:8px; flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{
  border:1px solid var(--line); background:var(--panel-2); color:var(--text);
  padding:8px 14px; border-radius:var(--radius); cursor:pointer;
}
.btn:hover{background:#1f2f38}
.btn:focus-visible,.chip:focus-visible,.tab:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn-accent{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600}
.btn-accent:hover{filter:brightness(1.07)}
.btn-ghost{background:transparent}
.btn-danger{background:transparent; border-color:#5a2b28; color:var(--danger)}
.btn.wide{width:100%}
.btn.is-rec{background:var(--danger); border-color:var(--danger); color:#1a0a08}
.chip{
  border:1px solid var(--line); background:transparent; color:var(--muted);
  padding:5px 10px; border-radius:999px; cursor:pointer; font-size:13px;
}
.chip:hover{color:var(--text); border-color:var(--green)}
.file-chip{display:inline-block}

/* ---------- workspace ---------- */
.workspace{flex:1; display:grid; grid-template-columns:240px 1fr 340px; min-height:0}
.pane{min-height:0; overflow:auto; border-right:1px solid var(--line); background:var(--panel)}
.pane-edit{border-right:0; border-left:1px solid var(--line); padding:0 0 24px}
.pane-stage{background:radial-gradient(circle at 50% 0%, #16242c 0%, var(--ink) 70%); display:flex; flex-direction:column; overflow:hidden}
.pane-head{padding:14px 14px 8px; display:flex; flex-direction:column; gap:8px}
.pane-head h2{margin:0; font-size:13px; text-transform:none; color:var(--muted); font-weight:600}
.pane-foot{padding:12px 14px}
.row-gap{display:flex; gap:6px}

/* ---------- chat list ---------- */
.chat-list{list-style:none; margin:0; padding:0 8px}
.chat-list li{
  padding:9px 10px; border-radius:8px; cursor:pointer; display:flex; gap:10px; align-items:center;
}
.chat-list li:hover{background:var(--panel-2)}
.chat-list li.is-on{background:#1d2f38; box-shadow:inset 2px 0 0 var(--green)}
.cl-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#2b3a43;flex:none}
.cl-meta{min-width:0}
.cl-name{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cl-sub{font-size:12px; color:var(--muted)}

/* ---------- stage ---------- */
.stage-scroll{flex:1; overflow:auto; display:grid; place-items:center; padding:20px}
.stage-bar{
  display:flex; align-items:center; gap:16px; padding:10px 16px;
  border-top:1px solid var(--line); background:var(--panel);
}
.slider{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted)}
.stage-status{font-size:12px; color:var(--accent); margin-left:auto}

/* ---------- phone ---------- */
.phone{
  width:360px; height:720px; border-radius:26px; overflow:hidden;
  display:flex; flex-direction:column; background:#efeae2;
  box-shadow:0 20px 50px rgba(0,0,0,.55); border:8px solid #05090b;
  font-size:14px; color:#111b21;
}
.phone-status{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 14px; font-size:12px; background:#008069; color:#fff;
}
.st-right{display:flex; align-items:center; gap:6px}
.st-bars{letter-spacing:-1px}
.st-batt-icon{width:16px;height:9px;border:1px solid #fff;border-radius:2px;background:linear-gradient(90deg,#fff 80%,transparent 80%)}

.wa-header{display:flex; align-items:center; gap:10px; padding:8px 12px; background:#008069; color:#fff}
.wa-back{font-size:22px; line-height:1}
.wa-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#4a7a72;flex:none}
.wa-title{min-width:0; flex:1}
.wa-name{font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wa-sub{font-size:12px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wa-icons{font-size:13px; opacity:.9; white-space:nowrap}

.wa-body{
  flex:1; overflow:auto; padding:12px 8px; display:flex; flex-direction:column; gap:3px;
  background-color:#efeae2;
}
.wa-body.wall-doodle{
  background-image:radial-gradient(#d8d0c4 1px, transparent 1px);
  background-size:18px 18px;
}
.wa-body.wall-plain{background-image:none}

.bubble{
  max-width:78%; padding:6px 9px 8px; border-radius:8px; position:relative;
  box-shadow:0 1px .5px rgba(11,20,26,.13); white-space:pre-wrap; word-wrap:break-word;
  line-height:1.35; font-size:14.2px; animation:pop .18s ease-out;
}
@keyframes pop{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.bubble{animation:none}}
.bubble.in{align-self:flex-start; background:#fff; border-top-left-radius:2px}
.bubble.out{align-self:flex-end; background:#d9fdd3; border-top-right-radius:2px}
.bubble .sender{font-size:12.5px; font-weight:600; margin-bottom:2px}
.bubble .meta{float:right; margin:6px 0 -4px 8px; font-size:11px; color:#667781; display:flex; gap:3px; align-items:center}
.tick-read{color:#53bdeb}
.bubble img{max-width:100%; border-radius:6px; display:block; margin-bottom:4px}
.voice{display:flex; align-items:center; gap:8px; min-width:170px}
.voice .wave{flex:1; height:16px; background:repeating-linear-gradient(90deg,#8696a0 0 2px,transparent 2px 5px); opacity:.6}
.sys{
  align-self:center; background:#ffeecd; color:#5b5344; font-size:11.5px;
  padding:5px 10px; border-radius:6px; text-align:center; max-width:85%;
}
.datepill{
  align-self:center; background:#fff; color:#54656f; font-size:11.5px;
  padding:4px 11px; border-radius:7px; margin:6px 0; box-shadow:0 1px .5px rgba(11,20,26,.13);
}
.typing{align-self:flex-start; background:#fff; padding:9px 13px; border-radius:8px; border-top-left-radius:2px}
.typing i{display:inline-block;width:6px;height:6px;margin:0 1px;border-radius:50%;background:#8696a0;animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.35} 30%{opacity:1}}

.wa-input{display:flex; gap:7px; padding:7px 8px; background:#f0f2f5; align-items:center}
.wa-input-box{flex:1; background:#fff; border-radius:20px; padding:8px 12px; display:flex; justify-content:space-between; color:#8696a0; font-size:13px}
.wa-mic{width:38px;height:38px;border-radius:50%;background:#00a884;color:#fff;display:grid;place-items:center}

/* ---------- dark theme phone ---------- */
.phone.dark{background:#0b141a; color:#e9edef}
.phone.dark .phone-status,.phone.dark .wa-header{background:#1f2c34}
.phone.dark .wa-body{background-color:#0b141a}
.phone.dark .wa-body.wall-doodle{background-image:radial-gradient(#16242c 1px, transparent 1px)}
.phone.dark .bubble.in{background:#202c33; color:#e9edef}
.phone.dark .bubble.out{background:#005c4b; color:#e9edef}
.phone.dark .bubble .meta{color:#8696a0}
.phone.dark .datepill{background:#182229; color:#8696a0}
.phone.dark .sys{background:#182229; color:#8696a0}
.phone.dark .typing{background:#202c33}
.phone.dark .wa-input{background:#1f2c34}
.phone.dark .wa-input-box{background:#2a3942}

/* ---------- inspector ---------- */
.tabs{display:flex; position:sticky; top:0; background:var(--panel); border-bottom:1px solid var(--line); z-index:2}
.tab{flex:1; padding:11px 6px; background:none; border:0; color:var(--muted); cursor:pointer; font-size:13px}
.tab.is-on{color:var(--text); box-shadow:inset 0 -2px 0 var(--green)}
.tab-panel{display:none; padding:14px}
.tab-panel.is-on{display:block}
.field{margin-bottom:12px; display:flex; flex-direction:column; gap:5px; flex:1}
.field label{font-size:12px; color:var(--muted)}
.field-row{display:flex; gap:10px; align-items:flex-end}
input[type=text],input[type=number],select,textarea{
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:8px 10px; width:100%;
}
input[type=file]{font-size:12px; color:var(--muted)}
textarea{resize:vertical}
.check{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); margin:4px 0 12px}
.hint{font-size:12px; color:var(--muted); line-height:1.5}
.composer{border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--panel-2); margin-bottom:14px}

.member-list,.msg-list{list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:8px}
.member-list li,.msg-list li{border:1px solid var(--line); border-radius:10px; padding:9px; background:var(--panel-2)}
.member-row{display:flex; gap:8px; align-items:center}
.member-row img{width:32px;height:32px;border-radius:50%;object-fit:cover;background:#2b3a43;flex:none}
.member-row input[type=text]{flex:1}
.mini{background:transparent;border:1px solid var(--line);border-radius:7px;padding:5px 8px;cursor:pointer;font-size:12px;color:var(--muted)}
.mini:hover{color:var(--text)}
.mini.on{border-color:var(--green); color:var(--green)}
.msg-top{display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted)}
.msg-text{font-size:13px; margin:5px 0; white-space:pre-wrap; word-break:break-word}
.msg-actions{display:flex; gap:6px}
input[type=color]{width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:7px;background:none}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--green); color:#06231c; padding:10px 18px; border-radius:999px;
  font-size:13px; font-weight:600; z-index:50;
}

@media (max-width:1100px){
  .workspace{grid-template-columns:1fr; overflow:auto}
  .pane{overflow:visible; border-right:0; border-bottom:1px solid var(--line)}
  .pane-stage{height:auto}
  body{overflow:auto}
}