/* ================= AutoMessager — WhatsApp bulk sender ================= */

:root{
  --wa-green:#25d366;
  --wa-green-dark:#1da851;
  --wa-teal:#075e54;
  --bg:#f0f2f5;
  --surface:#ffffff;
  --surface-2:#f7f9fa;
  --border:#e4e8eb;
  --text:#111b21;
  --text-muted:#667781;
  --bubble:#d9fdd3;
  --bubble-text:#111b21;
  --wall:#efe7de;
  --danger:#e5484d;
  --warn:#f0a500;
  --info:#3b82f6;
  --shadow:0 1px 3px rgba(11,20,26,.08), 0 6px 20px rgba(11,20,26,.05);
  --radius:14px;
}

[data-theme="dark"]{
  --bg:#0b141a;
  --surface:#111b21;
  --surface-2:#1a252d;
  --border:#2a3942;
  --text:#e9edef;
  --text-muted:#8696a0;
  --bubble:#005c4b;
  --bubble-text:#e9edef;
  --wall:#0b141a;
  --shadow:0 1px 3px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text);
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; line-height:1.25}
h1{font-size:19px; font-weight:700}
h2{font-size:16px; font-weight:650}
h3{font-size:14px; font-weight:650}
p{margin:0 0 8px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; background:var(--surface-2); padding:1px 5px; border-radius:5px; border:1px solid var(--border)}
kbd{font-family:inherit; font-size:11px; background:var(--surface-2); border:1px solid var(--border); border-bottom-width:2px; border-radius:5px; padding:1px 6px}
.muted{color:var(--text-muted)}
.small{font-size:12.5px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.mt{margin-top:14px}
.danger{color:var(--danger)!important}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 22px;
  background:linear-gradient(135deg,var(--wa-teal),#128c7e);
  color:#fff;
}
.brand{display:flex; align-items:center; gap:12px}
.brand-logo{font-size:30px; line-height:1}
.brand h1{color:#fff}
.brand-sub{margin:2px 0 0; font-size:12.5px; opacity:.82}
.topbar-actions{display:flex; gap:8px}
.icon-btn{
  background:rgba(255,255,255,.14); border:0; color:#fff; cursor:pointer;
  width:36px; height:36px; border-radius:10px; font-size:16px;
  display:grid; place-items:center; transition:background .15s;
}
.icon-btn:hover{background:rgba(255,255,255,.26)}
.modal .icon-btn{background:var(--surface-2); color:var(--text)}

/* ---------- stepper ---------- */
.stepper{
  display:flex; gap:6px; padding:10px 22px 0;
  background:var(--surface); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20; overflow-x:auto;
}
.step{
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  background:none; border:0; border-bottom:3px solid transparent;
  padding:10px 16px 12px; font-size:14px; font-weight:600;
  color:var(--text-muted); cursor:pointer; font-family:inherit;
}
.step:hover{color:var(--text)}
.step.active{color:var(--wa-green-dark); border-bottom-color:var(--wa-green)}
[data-theme="dark"] .step.active{color:var(--wa-green)}
.step-n{
  width:21px; height:21px; border-radius:50%; background:var(--surface-2);
  border:1px solid var(--border); display:grid; place-items:center; font-size:11.5px;
}
.step.active .step-n{background:var(--wa-green); color:#fff; border-color:var(--wa-green)}
.step-badge{font-size:11px; background:var(--surface-2); border:1px solid var(--border); padding:1px 7px; border-radius:20px; color:var(--text-muted)}

/* ---------- layout ---------- */
main{max-width:1280px; margin:0 auto; padding:20px 22px 60px}
.panel{display:none; animation:fade .18s ease}
.panel.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow); margin-bottom:18px;
}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.grid-editor{display:grid; grid-template-columns:230px minmax(0,1.25fr) minmax(0,1fr); gap:18px; align-items:start}
.grid-send{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:18px; align-items:start}
.row{display:flex; align-items:center; flex-wrap:wrap}
.row.gap{gap:8px}
.pill{font-size:12px; background:var(--surface-2); border:1px solid var(--border); border-radius:20px; padding:1px 9px; color:var(--text-muted); font-weight:600}

/* ---------- forms ---------- */
.input{
  font-family:inherit; font-size:14px; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:9px;
  padding:9px 11px; width:100%; outline:none; transition:border-color .15s, box-shadow .15s;
}
.input:focus{border-color:var(--wa-green); box-shadow:0 0 0 3px rgba(37,211,102,.16)}
select.input{cursor:pointer; appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%); background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:30px}
.input.sm{padding:6px 9px; font-size:13px; width:auto; min-width:130px}
.input.tiny{width:52px; padding:3px 6px; font-size:13px; text-align:center; display:inline-block}
.input.search{width:210px}
.title-input{font-size:16px; font-weight:650; border-color:transparent; background:var(--surface-2)}
.editor{font-family:inherit; resize:vertical; line-height:1.6; min-height:220px}
.field{display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--text-muted); font-weight:600; margin-bottom:12px}
.checkbox-field{display:flex; flex-direction:row; align-items:center; gap:9px; font-weight:500; color:var(--text)}
.checkbox-field input{width:16px; height:16px; accent-color:var(--wa-green); flex:none}
.small-check{font-size:12.5px; margin-bottom:8px; color:var(--text-muted)}
.prefix{font-weight:700; color:var(--text-muted); margin-right:4px}

.btn{
  font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
  border-radius:9px; padding:9px 15px; border:1px solid transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:transform .06s, filter .15s, background .15s;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-primary{background:var(--wa-green-dark); color:#fff}
.btn-primary:hover:not(:disabled){filter:brightness(1.08)}
.btn-whatsapp{background:var(--wa-green); color:#0b2417}
.btn-whatsapp:hover:not(:disabled){filter:brightness(1.06)}
.btn-secondary{background:var(--surface-2); color:var(--text); border-color:var(--border)}
.btn-secondary:hover{border-color:var(--wa-green)}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border)}
.btn-ghost:hover:not(:disabled){background:var(--surface-2)}
.btn.sm{padding:6px 11px; font-size:13px}
.btn.big{padding:14px 20px; font-size:15px; flex:1}
.btn.full{width:100%; margin-top:8px}
.wa-icon{font-size:17px}

/* ---------- dropzone ---------- */
.dropzone{
  border:2px dashed var(--border); border-radius:var(--radius);
  padding:26px 18px; text-align:center; cursor:pointer;
  background:var(--surface-2); transition:border-color .15s, background .15s;
}
.dropzone:hover,.dropzone.over{border-color:var(--wa-green); background:rgba(37,211,102,.07)}
.dropzone p{margin:3px 0}
.dz-icon{font-size:30px; margin-bottom:4px}
.or-divider{display:flex; align-items:center; gap:12px; margin:16px 0 12px; color:var(--text-muted); font-size:12.5px}
.or-divider::before,.or-divider::after{content:""; flex:1; height:1px; background:var(--border)}
.code-sample{
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  padding:12px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
  overflow-x:auto; margin:0 0 10px; line-height:1.6;
}
.hint-box{background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:12px; margin-top:14px; font-size:13px}
.hint-box .row{gap:8px; margin-top:6px}
.hint-box .input{width:70px}
.hint-box .muted{flex:1; min-width:180px}
.checklist{margin:8px 0 0; padding-left:0; list-style:none; font-size:13px}
.checklist li{padding-left:22px; position:relative; margin-bottom:5px}
.checklist li::before{content:"✓"; position:absolute; left:0; color:var(--wa-green-dark); font-weight:700}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:10px; max-height:460px; overflow-y:auto}
.table{width:100%; border-collapse:collapse; font-size:13.5px}
.table th{
  text-align:left; padding:9px 11px; background:var(--surface-2); color:var(--text-muted);
  font-weight:650; font-size:12px; text-transform:uppercase; letter-spacing:.3px;
  position:sticky; top:0; z-index:1; border-bottom:1px solid var(--border);
}
.table td{padding:8px 11px; border-bottom:1px solid var(--border); vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--surface-2)}
.table input[type=checkbox]{accent-color:var(--wa-green)}
.cell-edit{border:1px solid transparent; background:transparent; color:inherit; font:inherit; padding:3px 5px; border-radius:6px; width:100%; min-width:90px}
.cell-edit:hover{border-color:var(--border)}
.cell-edit:focus{border-color:var(--wa-green); background:var(--surface); outline:none}
.row-del{background:none; border:0; cursor:pointer; color:var(--text-muted); font-size:15px; padding:2px 6px; border-radius:6px}
.row-del:hover{color:var(--danger); background:var(--surface-2)}
.tag{display:inline-block; font-size:11px; background:var(--surface-2); border:1px solid var(--border); border-radius:5px; padding:1px 6px; margin:1px 3px 1px 0; color:var(--text-muted)}
.badge{font-size:11px; font-weight:700; padding:2px 9px; border-radius:20px; white-space:nowrap; display:inline-block}
.badge.pending{background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border)}
.badge.sent{background:rgba(37,211,102,.16); color:var(--wa-green-dark)}
.badge.skipped{background:rgba(240,165,0,.16); color:#a97400}
.badge.failed{background:rgba(229,72,77,.14); color:var(--danger)}
.badge.invalid{background:rgba(229,72,77,.14); color:var(--danger)}
[data-theme="dark"] .badge.sent{color:#7ee2a8}
[data-theme="dark"] .badge.skipped{color:#f0c26b}

.stats{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:11px}
.stat{background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:6px 12px; font-size:12.5px}
.stat b{font-size:15px; display:block; line-height:1.3}
.empty{text-align:center; padding:32px 18px; color:var(--text-muted)}
.empty-icon{font-size:34px; margin-bottom:8px}
.map-row{display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end}
.map-row .field{min-width:190px}

/* ---------- template editor ---------- */
.tpl-list{list-style:none; margin:0; padding:0; max-height:520px; overflow-y:auto}
.tpl-list li{
  padding:9px 11px; border-radius:9px; cursor:pointer; font-size:13.5px;
  border:1px solid transparent; margin-bottom:4px;
}
.tpl-list li:hover{background:var(--surface-2)}
.tpl-list li.active{background:rgba(37,211,102,.13); border-color:var(--wa-green); font-weight:600}
.tpl-list .tpl-preview{display:block; font-size:11.5px; color:var(--text-muted); font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px}

.toolbar{display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:8px; background:var(--surface-2); border:1px solid var(--border); border-bottom:0; border-radius:9px 9px 0 0}
.editor{border-radius:0 0 9px 9px}
.tool{
  background:var(--surface); border:1px solid var(--border); border-radius:7px; cursor:pointer;
  min-width:30px; height:30px; padding:0 8px; font-size:13px; color:var(--text); font-family:inherit;
}
.tool:hover{border-color:var(--wa-green)}
.tool-sep{width:1px; height:20px; background:var(--border); margin:0 3px}
.chips{display:flex; gap:5px; flex-wrap:wrap}
.chip{
  background:var(--surface); border:1px solid var(--border); border-radius:20px; cursor:pointer;
  padding:3px 10px; font-size:11.5px; font-family:ui-monospace,Menlo,monospace; color:var(--text);
}
.chip:hover{border-color:var(--wa-green); background:rgba(37,211,102,.1)}
.dropdown{position:relative}
.dropdown-menu{
  position:absolute; top:34px; left:0; z-index:30; background:var(--surface);
  border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); padding:8px;
}
.emoji-menu{display:grid; grid-template-columns:repeat(8,1fr); gap:2px; width:250px}
.emoji-menu button{background:none; border:0; font-size:18px; cursor:pointer; padding:3px; border-radius:6px}
.emoji-menu button:hover{background:var(--surface-2)}
.editor-meta{display:flex; justify-content:space-between; gap:10px; margin-top:7px; flex-wrap:wrap}

/* ---------- chat preview ---------- */
.chat-wall{
  background:var(--wall); border-radius:12px; padding:16px; min-height:130px;
  background-image:radial-gradient(rgba(0,0,0,.045) 1px, transparent 1px); background-size:14px 14px;
}
.chat-wall.small{padding:12px; min-height:80px; margin:12px 0}
.chat-bubble{
  background:var(--bubble); color:var(--bubble-text); border-radius:9px 0 9px 9px;
  padding:8px 11px 6px; max-width:min(420px,92%); margin-left:auto; position:relative;
  font-size:14.2px; line-height:1.45; white-space:pre-wrap; word-break:break-word;
  box-shadow:0 1px 1px rgba(11,20,26,.13);
}
.chat-bubble::after{
  content:""; position:absolute; top:0; right:-8px; width:0; height:0;
  border:8px solid transparent; border-top-color:var(--bubble); border-right:0; border-bottom:0;
}
.chat-bubble .ticks{float:right; font-size:11px; color:#54a37a; margin:4px 0 0 8px; user-select:none}
.chat-bubble em{font-style:italic}
.chat-bubble strong{font-weight:700}
.chat-bubble .mono-run{font-family:ui-monospace,Menlo,monospace; font-size:13px; background:rgba(0,0,0,.06); border-radius:4px; padding:0 3px}
.chat-bubble .ph-missing{background:rgba(229,72,77,.2); border-radius:4px; padding:0 3px; color:var(--danger)}
.chat-meta{text-align:right; font-size:11.5px; color:var(--text-muted); margin-top:8px}

/* ---------- send panel ---------- */
.notice{
  display:flex; gap:12px; align-items:flex-start; background:rgba(59,130,246,.09);
  border:1px solid rgba(59,130,246,.3); border-radius:var(--radius);
  padding:13px 16px; margin-bottom:18px; font-size:13.5px;
}
.notice-icon{font-size:17px; line-height:1.2}
.progress-head{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:flex-start}
.counters{display:flex; gap:7px; flex-wrap:wrap}
.counter{font-size:12px; border-radius:20px; padding:3px 11px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted)}
.counter b{color:var(--text); font-size:13px}
.counter.ok{background:rgba(37,211,102,.13); border-color:rgba(37,211,102,.35)}
.counter.skip{background:rgba(240,165,0,.13); border-color:rgba(240,165,0,.35)}
.counter.fail{background:rgba(229,72,77,.11); border-color:rgba(229,72,77,.32)}
.progress{height:7px; background:var(--surface-2); border-radius:20px; overflow:hidden; margin:13px 0 4px; border:1px solid var(--border)}
.progress-bar{height:100%; width:0; background:linear-gradient(90deg,var(--wa-green),var(--wa-green-dark)); transition:width .3s}

.current-who{display:flex; align-items:center; gap:12px; margin-top:16px}
.avatar{
  width:46px; height:46px; border-radius:50%; background:var(--wa-teal); color:#fff;
  display:grid; place-items:center; font-size:18px; font-weight:700; flex:none;
}
.current-name{font-size:16px; font-weight:650}
.current-pos{margin-left:auto}
.send-actions{display:flex; gap:10px; margin-top:6px; flex-wrap:wrap}
.send-actions.secondary{margin-top:9px}
.send-actions.secondary .btn{flex:1; min-width:110px; font-size:13px; padding:8px 10px}
.kbd-hint{margin-top:12px; text-align:center}

.queue-card{position:sticky; top:70px}
.send-config{gap:12px}
.send-config .field{flex:1; min-width:130px}
.send-config .input{width:100%}
.queue-list{list-style:none; margin:10px 0 0; padding:0; max-height:340px; overflow-y:auto; border:1px solid var(--border); border-radius:10px}
.queue-list li{
  display:flex; align-items:center; gap:9px; padding:8px 11px; font-size:13px;
  border-bottom:1px solid var(--border); cursor:pointer;
}
.queue-list li:last-child{border-bottom:0}
.queue-list li:hover{background:var(--surface-2)}
.queue-list li.current{background:rgba(37,211,102,.12); box-shadow:inset 3px 0 0 var(--wa-green)}
.q-name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.q-num{color:var(--text-muted); font-size:11.5px; font-family:ui-monospace,Menlo,monospace}
.q-dot{width:8px; height:8px; border-radius:50%; flex:none; background:var(--text-muted); opacity:.4}
.q-dot.sent{background:var(--wa-green); opacity:1}
.q-dot.skipped{background:var(--warn); opacity:1}
.q-dot.failed{background:var(--danger); opacity:1}

/* ---------- modal & toast ---------- */
.modal{position:fixed; inset:0; background:rgba(11,20,26,.55); display:grid; place-items:center; z-index:100; padding:20px}
/* a class rule sets display, so [hidden] needs to be re-asserted explicitly */
.modal[hidden],.dropdown-menu[hidden],#mapCard[hidden],#sendDone[hidden],#currentCard[hidden],.toast[hidden]{display:none}
.modal-card{background:var(--surface); border-radius:var(--radius); padding:20px; width:100%; max-width:430px; box-shadow:0 20px 60px rgba(0,0,0,.3)}
.danger-zone{border-top:1px solid var(--border); margin-top:14px; padding-top:12px}
.danger-zone h3{margin-bottom:8px; color:var(--danger)}
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:#111b21; color:#fff; padding:11px 20px; border-radius:10px; font-size:13.5px;
  box-shadow:0 8px 30px rgba(0,0,0,.3); z-index:200; animation:toastIn .2s ease;
}
.toast.err{background:var(--danger)}
@keyframes toastIn{from{opacity:0; transform:translate(-50%,10px)} to{opacity:1; transform:translate(-50%,0)}}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .grid-editor{grid-template-columns:1fr 1fr}
  .templates-list{grid-column:1 / -1}
}
@media (max-width:860px){
  .grid-2,.grid-editor,.grid-send{grid-template-columns:1fr}
  .queue-card{position:static}
  main{padding:16px 14px 50px}
  .topbar{padding:12px 14px}
  .stepper{padding:8px 14px 0}
  .brand-sub{display:none}
  .input.search{width:100%}
}