/* imoschat — palette and components follow vision.olee.cc (OleeVision globals.css). */

:root {
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  --r-sm:10px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Iskoola Pota", "Noto Sans Sinhala", sans-serif;
  --font-code: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --bg:#f4f5f8; --panel:#ffffff; --panel-2:#f3f4f7; --panel-3:#f7f8fa;
  --line:#e9eaef; --line-2:#eef0f4; --ink:#1c2030; --ink-2:#333a4d; --muted:#8b91a3; --muted-2:#a7adbc;
  --accent:#2656cc; --accent-dim:#133180; --accent-soft:#e7ebf5;
  --btn-bg:#2656cc; --btn-bg-hover:#1d449e; --btn-ink:#ffffff;
  --ok:#12a150; --warn:#c9781a; --red:#e5484d;
  --add-bg:rgba(18,161,80,.13); --del-bg:rgba(229,72,77,.12);
  --shadow-sm:0 1px 2px rgba(20,28,50,.05);
  --shadow-lg:0 16px 44px rgba(20,28,50,.14), 0 4px 10px rgba(20,28,50,.06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0d0e12; --panel:#16181d; --panel-2:#1b1e25; --panel-3:#1a1d23;
    --line:#262a33; --line-2:#22262e; --ink:#e9ebef; --ink-2:#c7ccd6; --muted:#7c828d; --muted-2:#5f6470;
    --accent:#5b9dff; --accent-dim:#7db0ff; --accent-soft:#18263f;
    --btn-bg:#2f5fd0; --btn-bg-hover:#3f6ee0;
    --ok:#3dd68c; --warn:#f2b544; --red:#f2696d;
    --add-bg:rgba(61,214,140,.16); --del-bg:rgba(242,105,109,.16);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 16px 44px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}

* { box-sizing:border-box; }
html, body { margin:0; max-width:100%; overflow-x:hidden; }
body { background:var(--bg); color:var(--ink); font-family:var(--font); font-size:14px; -webkit-font-smoothing:antialiased; }
[hidden] { display:none !important; }
button { font-family:inherit; }

* { scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background:var(--line); border-radius:20px; border:3px solid transparent; background-clip:content-box; }

/* ---------- top bar ---------- */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 28px; border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:20; }
.brand { font-size:17px; font-weight:600; letter-spacing:-.02em; white-space:nowrap; }
.brand .glyph { color:var(--accent); margin-right:6px; }
.brand .dim { color:var(--muted); font-weight:500; }
.topbar-right { display:flex; align-items:center; gap:10px; min-width:0; }
.who { color:var(--muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- page ---------- */
.pg { padding:26px 28px 60px; max-width:820px; margin:0 auto; }
.page-title { font-size:25px; font-weight:700; letter-spacing:-.02em; margin:0; }
.page-sub { color:var(--muted); font-size:14px; margin:6px 0 24px; line-height:1.5; }

.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-6); margin-bottom:var(--sp-4); box-shadow:var(--shadow-sm); }
.card.dim { opacity:.55; pointer-events:none; }
.step-head { display:flex; align-items:center; gap:12px; margin-bottom:var(--sp-4); }
.step-num { width:28px; height:28px; border-radius:9px; background:var(--accent-soft); color:var(--accent); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.step-num.done { background:rgba(18,161,80,.12); color:var(--ok); }
.step-title { font-size:16px; font-weight:600; margin:0; }
.step-hint { color:var(--muted); font-size:13px; margin:2px 0 0; line-height:1.45; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; background:var(--btn-bg); color:var(--btn-ink); border:none; padding:11px 20px; border-radius:var(--r-md); font-size:14px; font-weight:600; cursor:pointer; transition:background .15s, border-color .15s, color .15s; line-height:1; white-space:nowrap; }
.btn:hover:not(:disabled) { background:var(--btn-bg-hover); }
.btn:disabled { opacity:.5; cursor:default; }
.btn.ghost { background:transparent; border:1px solid var(--line); color:var(--ink-2); }
.btn.ghost:hover:not(:disabled) { color:var(--ink); border-color:var(--accent-dim); background:transparent; }
.btn.sm { min-height:40px; padding:8px 14px; font-size:13px; }
.btn.block { width:100%; }

/* ---------- file pickers ---------- */
.pickers { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-3); }
.drop { display:flex; align-items:center; gap:12px; width:100%; min-height:72px; padding:14px 16px; text-align:left; background:var(--panel-3); border:1.5px dashed var(--line); border-radius:var(--r-md); color:var(--ink); cursor:pointer; transition:border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color:var(--accent); background:var(--accent-soft); }
.drop.filled { border-style:solid; background:var(--panel); }
.drop-ic { width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.drop.filled .drop-ic { background:rgba(18,161,80,.12); color:var(--ok); }
.drop-txt { flex:1; min-width:0; overflow:hidden; }
.drop-main { display:block; font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drop-sub { display:block; color:var(--muted); font-size:12.5px; margin-top:3px; line-height:1.4; }

/* ---------- backup of the original bot file ---------- */
.backup-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:var(--sp-3); padding:12px 14px; background:var(--panel-3); border:1px solid var(--line-2); border-radius:var(--r-md); }
.backup-txt { min-width:0; flex:1 1 200px; }
.backup-main { font-weight:600; font-size:13.5px; }
.backup-main::before { content:"✓"; color:var(--ok); margin-right:8px; font-weight:700; }
.backup-sub { color:var(--muted); font-size:12.5px; margin-top:3px; overflow-wrap:anywhere; }
a.btn { text-decoration:none; }

/* ---------- day pills ---------- */
.field-label { display:block; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin:var(--sp-5) 0 var(--sp-2); }
.pill-row { display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.pill { min-height:40px; background:var(--panel); border:1px solid var(--line); color:var(--muted); padding:8px 15px; border-radius:9px; font-size:13px; font-weight:500; cursor:pointer; transition:all .15s; }
.pill:hover { color:var(--ink); border-color:var(--accent-dim); }
.pill.active { color:var(--accent); border-color:transparent; background:var(--accent-soft); }
.pill small { color:var(--muted-2); margin-left:4px; }
.count-line { color:var(--muted); font-size:13px; margin:var(--sp-3) 0 var(--sp-4); }

/* ---------- banners ---------- */
.banner { padding:12px 16px; border-radius:var(--r-md); font-size:13.5px; margin:var(--sp-3) 0 0; line-height:1.5; }
.banner.info { background:var(--accent-soft); color:var(--accent); }
.banner.warn { background:rgba(201,120,26,.1); border:1px solid rgba(201,120,26,.3); color:var(--warn); }
.banner.error { background:rgba(229,72,77,.1); border:1px solid rgba(229,72,77,.3); color:var(--red); }

.loading { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14px; padding:var(--sp-4) 0; }
.loading::before { content:""; width:16px; height:16px; flex-shrink:0; border-radius:50%; border:2px solid var(--line); border-top-color:var(--accent); animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- checks ---------- */
.checks { display:grid; gap:2px; margin:0 0 var(--sp-4); padding:0; list-style:none; }
.check { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-2); font-size:13.5px; line-height:1.45; }
.check:last-child { border-bottom:none; }
.check-mark { width:20px; height:20px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; margin-top:1px; }
.check.ok .check-mark { background:rgba(18,161,80,.13); color:var(--ok); }
.check.bad .check-mark { background:rgba(229,72,77,.13); color:var(--red); }
.check.warn .check-mark { background:rgba(201,120,26,.13); color:var(--warn); }
.check-detail { color:var(--muted); font-size:12.5px; margin-top:2px; word-break:break-word; }

/* ---------- edit cards ---------- */
.sum { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--sp-4); }
.tag { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:4px 11px; border-radius:999px; color:var(--muted); background:var(--panel-2); white-space:nowrap; }
.tag.si { color:#8a4b00; background:rgba(201,120,26,.13); }
.tag.en { color:var(--accent); background:var(--accent-soft); }
.tag.low { color:var(--red); background:rgba(229,72,77,.12); }
.tag.medium { color:var(--warn); background:rgba(201,120,26,.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag.si { color:var(--warn); } }

.edit { border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:var(--sp-3); overflow:hidden; background:var(--panel); }
.edit.off { opacity:.55; }
.edit-head { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--panel-3); border-bottom:1px solid var(--line); }
.edit-title { flex:1; min-width:0; }
.edit-name { font-weight:600; font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.edit-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.edit-why { color:var(--muted); font-size:12.5px; padding:10px 14px 0; line-height:1.45; }
.edit-body { padding:12px 14px 14px; display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.col-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; }
.txt { background:var(--panel-3); border:1px solid var(--line-2); border-radius:10px; padding:10px 12px; font-size:13px; line-height:1.6; white-space:pre-wrap; word-break:break-word; max-height:300px; overflow-y:auto; }
.txt del { background:var(--del-bg); color:var(--red); text-decoration:line-through; border-radius:3px; }
.txt ins { background:var(--add-bg); color:var(--ok); text-decoration:none; border-radius:3px; }
.thumb { width:100%; aspect-ratio:4/3; object-fit:contain; background:var(--panel-3); border:1px solid var(--line-2); border-radius:10px; display:block; }
.file-chip { display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--panel-3); border:1px solid var(--line-2); border-radius:10px; font-size:13px; word-break:break-all; }

/* our own switch, never the OS checkbox */
.switch { position:relative; width:46px; height:28px; border-radius:999px; border:none; background:var(--line); cursor:pointer; flex-shrink:0; transition:background .15s; padding:0; }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .18s ease; }
.switch[aria-checked="true"] { background:var(--ok); }
.switch[aria-checked="true"]::after { transform:translateX(18px); }
.switch-wrap { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:52px; }
.switch-label { font-size:11px; color:var(--muted); }

.sub-head { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin:var(--sp-6) 0 var(--sp-2); }
.note-row { padding:10px 12px; background:var(--panel-3); border:1px solid var(--line-2); border-radius:10px; margin-bottom:8px; font-size:13px; line-height:1.5; }
.note-row .why { color:var(--warn); font-size:12.5px; margin-top:4px; }
.note-row .msg { white-space:pre-wrap; word-break:break-word; max-height:120px; overflow:hidden; }

.actions { display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-5); }
.actions .btn { flex:1 1 220px; }
.foot-note { color:var(--muted); font-size:12.5px; margin-top:var(--sp-3); line-height:1.5; }

/* ---------- login ---------- */
.auth-wrap { min-height:100vh; background:radial-gradient(1200px 600px at 50% -10%, rgba(38,86,204,.07), transparent), var(--bg); display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.auth-card { width:100%; max-width:400px; padding:36px 32px; margin-bottom:0; }
.auth-card .brand { margin-bottom:28px; font-size:19px; }
.auth-h1 { font-size:22px; font-weight:600; letter-spacing:-.02em; margin:0 0 6px; }
.auth-sub { color:var(--muted); font-size:14px; margin:0 0 10px; }
.input { width:100%; min-height:44px; background:var(--bg); border:1px solid var(--line); color:var(--ink); padding:11px 13px; border-radius:var(--r-md); font-size:15px; outline:none; font-family:inherit; transition:border-color .15s; }
.input:focus { border-color:var(--accent-dim); }
.auth-card .btn { margin-top:20px; }

/* ---------- toast ---------- */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); width:min(420px, calc(100vw - 32px)); background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-md); padding:13px 16px; font-size:13.5px; box-shadow:var(--shadow-lg); z-index:50; animation:toast-in .2s ease; }
.toast.error { border-color:rgba(229,72,77,.4); color:var(--red); }
.toast.ok { border-color:rgba(18,161,80,.4); }
@keyframes toast-in { from { opacity:0; transform:translate(-50%, 8px); } to { opacity:1; transform:translate(-50%, 0); } }

/* ---------- phone ---------- */
@media (max-width:680px) {
  .topbar { padding:12px 16px; }
  .who { display:none; }
  .pg { padding:20px 16px 48px; }
  .page-title { font-size:22px; }
  .card { padding:var(--sp-4); }
  .pickers { grid-template-columns:minmax(0,1fr); }
  .edit-body { grid-template-columns:minmax(0,1fr); }
  .auth-card { padding:28px 20px; }
}

/* ---------- WhatsApp-style test window ---------- */
.wa-embed, .wa-overlay {
  --wa-head:#008069; --wa-head-ink:#fff; --wa-bg:#efeae2; --wa-in:#ffffff; --wa-out:#d9fdd3; --wa-ink:#111b21;
  --wa-meta:#667781; --wa-link:#027eb5; --wa-green:#00a884; --wa-bar:#f0f2f5; --wa-field:#ffffff; --wa-chip:#ffffffe6;
  --wa-dot:rgba(0,0,0,.035); --wa-sheet:#ffffff; --wa-line:#e9edef;
}
.wa-overlay {
  position:fixed; inset:0; z-index:100; background:rgba(10,14,22,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px; animation:fade-in .15s ease;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wa-overlay, :root:not([data-theme="light"]) .wa-embed {
    --wa-head:#202c33; --wa-head-ink:#e9edef; --wa-bg:#0b141a; --wa-in:#202c33; --wa-out:#005c4b; --wa-ink:#e9edef;
    --wa-meta:#8696a0; --wa-link:#53bdeb; --wa-bar:#202c33; --wa-field:#2a3942; --wa-chip:#182229; --wa-dot:rgba(255,255,255,.025);
    --wa-sheet:#111b21; --wa-line:#222d34;
  }
}
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
.wa-phone {
  position:relative; width:min(420px, 100%); height:min(780px, calc(100dvh - 40px)); display:flex; flex-direction:column;
  background:var(--wa-bg); border-radius:24px; overflow:hidden; box-shadow:var(--shadow-lg); color:var(--wa-ink);
  font-family:"Segoe UI", Helvetica, Arial, "Noto Sans Sinhala", "Iskoola Pota", sans-serif;
}
.wa-head { display:flex; align-items:center; gap:6px; padding:8px 6px; background:var(--wa-head); color:var(--wa-head-ink); flex-shrink:0; }
.wa-ic { width:40px; height:40px; border:none; background:transparent; color:inherit; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.wa-ic:hover { background:rgba(255,255,255,.12); }
.wa-avatar { width:38px; height:38px; border-radius:50%; background:#dfe5e7; color:#54656f; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.wa-who { flex:1; min-width:0; margin-left:4px; }
.wa-name { font-weight:600; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-status { font-size:12.5px; opacity:.85; }
.wa-chat {
  flex:1; overflow-y:auto; padding:12px 12px 8px; display:flex; flex-direction:column; gap:4px;
  background-color:var(--wa-bg); background-image:radial-gradient(var(--wa-dot) 1.2px, transparent 1.2px); background-size:18px 18px;
}
.wa-row { display:flex; }
.wa-row.out { justify-content:flex-end; }
.wa-b { max-width:82%; padding:6px 8px 4px; border-radius:8px; font-size:14.2px; line-height:1.42; box-shadow:0 1px .5px rgba(11,20,26,.13); margin:2px 0; }
.wa-b.in { background:var(--wa-in); border-top-left-radius:0; }
.wa-b.out { background:var(--wa-out); border-top-right-radius:0; }
.wa-b.image, .wa-b.document { padding:4px 4px 4px; width:min(300px, 82%); }
.wa-b.image .wa-txt, .wa-b.document .wa-txt { padding:6px 4px 0; }
.wa-txt { white-space:pre-wrap; overflow-wrap:anywhere; }
.wa-txt a { color:var(--wa-link); text-decoration:none; }
.wa-txt code { font-family:var(--font-code); font-size:13px; }
.wa-time { text-align:right; font-size:11px; color:var(--wa-meta); margin-top:2px; padding:0 2px; white-space:nowrap; }
.wa-ticks { color:#53bdeb; letter-spacing:-3px; margin-left:2px; }
.wa-img { display:block; position:relative; border-radius:6px; overflow:hidden; background:rgba(0,0,0,.06); min-height:120px; }
.wa-img img { display:block; width:100%; height:auto; }
.wa-broken { display:none; padding:40px 12px; text-align:center; color:#e5484d; font-size:13px; }
.wa-img.broken img { display:none; }
.wa-img.broken .wa-broken { display:block; }
.wa-doc { display:flex; align-items:center; gap:10px; padding:12px; background:rgba(0,0,0,.05); border-radius:6px; color:inherit; text-decoration:none; }
.wa-doc-ic { width:34px; height:40px; border-radius:4px; background:#e5484d; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wa-doc-name { font-size:14px; overflow-wrap:anywhere; }
.wa-audio { display:flex; align-items:center; gap:10px; width:min(240px, 60vw); padding:4px 2px; }
.wa-play { width:40px; height:40px; border-radius:50%; border:none; background:transparent; color:var(--wa-meta); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.wa-play .ic-pause { display:none; }
.wa-audio.on .ic-play { display:none; }
.wa-audio.on .ic-pause { display:inline; }
.wa-track { flex:1; height:4px; border-radius:4px; background:rgba(134,150,160,.35); overflow:hidden; }
.wa-fill { height:100%; width:0; background:var(--wa-green); }
.wa-dur { font-size:11.5px; color:var(--wa-meta); min-width:34px; text-align:right; }
.wa-audio.broken .wa-dur { color:#e5484d; min-width:0; }
.wa-listbtn { display:flex; align-items:center; justify-content:center; gap:8px; width:calc(100% + 16px); margin:6px -8px -4px; min-height:44px; border:none; border-top:1px solid var(--wa-line); background:transparent; color:var(--wa-link); font-size:14.5px; font-weight:500; cursor:pointer; font-family:inherit; }
.wa-sys { align-self:center; text-align:center; margin:6px 0; max-width:90%; }
.wa-sys span { display:inline-block; background:var(--wa-chip); color:var(--wa-meta); font-size:12.5px; padding:5px 12px; border-radius:8px; box-shadow:0 1px .5px rgba(11,20,26,.13); line-height:1.4; }
.wa-sys.bad span { color:#e5484d; }
.wa-bar { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--wa-bar); flex-shrink:0; }
.wa-input { flex:1; min-width:0; min-height:44px; border:none; border-radius:22px; background:var(--wa-field); color:var(--wa-ink); padding:10px 16px; font-size:15px; outline:none; font-family:inherit; }
.wa-input::placeholder { color:var(--wa-meta); }
.wa-send { width:46px; height:46px; border-radius:50%; border:none; background:var(--wa-green); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.wa-sheet { position:absolute; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:flex-end; animation:fade-in .12s ease; }
.wa-sheet-card { width:100%; max-height:78%; overflow-y:auto; background:var(--wa-sheet); border-radius:16px 16px 0 0; padding:6px 0 12px; }
.wa-sheet-head { display:flex; align-items:center; gap:8px; padding:4px 8px; }
.wa-sheet-title { font-weight:600; font-size:16px; }
.wa-sheet-sec { color:var(--wa-green); font-size:13.5px; font-weight:500; padding:8px 20px 4px; }
.wa-opt { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:52px; padding:10px 20px; border:none; border-bottom:1px solid var(--wa-line); background:transparent; color:var(--wa-ink); text-align:left; font-size:15px; cursor:pointer; font-family:inherit; }
.wa-opt:hover { background:rgba(134,150,160,.1); }
.wa-radio { width:20px; height:20px; border-radius:50%; border:2px solid var(--wa-meta); flex-shrink:0; }
@media (max-width:520px) {
  .wa-overlay { padding:0; }
  .wa-phone { width:100%; height:100dvh; border-radius:0; }
}

.try-row { display:flex; gap:var(--sp-2); flex-wrap:wrap; }

/* ---------- step 2: message picker ---------- */
.msg-list { display:flex; flex-direction:column; gap:8px; margin-top:var(--sp-4); max-height:560px; overflow-y:auto; padding:2px; }
.pick { display:flex; align-items:flex-start; gap:12px; width:100%; padding:12px 14px; text-align:left; background:var(--panel-3); border:1.5px solid var(--line); border-radius:var(--r-md); color:var(--ink); cursor:pointer; transition:border-color .15s, background .15s; }
.pick:hover { border-color:var(--accent-dim); }
.pick.on { border-color:var(--accent); background:var(--accent-soft); }
.pick-box { width:22px; height:22px; border-radius:7px; border:2px solid var(--muted-2); flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; background:var(--panel); transition:all .15s; }
.pick.on .pick-box { background:var(--accent); border-color:var(--accent); }
.pick.on .pick-box::after { content:""; width:6px; height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg) translate(-1px,-1px); }
.pick-body { display:flex; flex-direction:column; gap:8px; min-width:0; flex:1; }
.pick-meta { font-size:12px; color:var(--muted); }
.pick-img { width:min(220px, 100%); max-height:220px; object-fit:cover; border-radius:8px; border:1px solid var(--line-2); display:block; }
.pick-text { font-size:13.5px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical; overflow:hidden; }
.pick.on .pick-text { -webkit-line-clamp:unset; display:block; }
.count-line { margin-top:var(--sp-3) !important; }

/* ---------- step 3: old vs new table ---------- */
.rv-table { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; margin-bottom:var(--sp-3); }
.rv-row { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr); border-top:1px solid var(--line); background:var(--panel); }
.rv-row:first-child { border-top:none; }
.rv-row.off .rv-cell:not(.rv-what) { opacity:.45; }
.rv-headrow { background:var(--panel-3); }
.rv-headrow .rv-cell { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; padding:10px 14px; }
.rv-cell { padding:14px; min-width:0; border-left:1px solid var(--line-2); }
.rv-cell:first-child { border-left:none; }
.rv-label { display:none; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; }
.rv-stack { display:flex; flex-direction:column; gap:8px; }
.rv-why { color:var(--muted); font-size:12.5px; line-height:1.45; margin-top:8px; }
.rv-use { display:flex; align-items:center; gap:10px; margin-top:12px; }
.rv-use .switch-label { font-size:12.5px; }
@media (max-width:760px) {
  .rv-headrow { display:none; }
  .rv-row { grid-template-columns:minmax(0,1fr); }
  .rv-cell { border-left:none; border-top:1px solid var(--line-2); }
  .rv-cell:first-child { border-top:none; background:var(--panel-3); }
  .rv-label { display:block; }
}
.tag.new { color:var(--ok); background:rgba(18,161,80,.12); }
.rv-none { color:var(--muted); font-size:13px; padding:12px; border:1px dashed var(--line); border-radius:10px; text-align:center; }

/* ---------- mode switch ---------- */
.mode-seg { display:flex; gap:4px; padding:4px; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; }
.mode-btn { min-height:36px; padding:6px 16px; border:none; border-radius:9px; background:transparent; color:var(--muted); font-size:13.5px; font-weight:600; cursor:pointer; }
.mode-btn:hover { color:var(--ink); }
.mode-btn[aria-selected="true"] { background:var(--panel); color:var(--accent); box-shadow:var(--shadow-sm); }

/* ---------- editor ---------- */
.pg.wide { max-width:1120px; }
.ed-grid { display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:var(--sp-5); align-items:start; }
.ed-phone { position:sticky; top:84px; height:calc(100dvh - 110px); min-height:560px; max-height:900px; }
.ed-empty { height:100%; border:1.5px dashed var(--line); border-radius:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--muted); background:var(--panel-3); text-align:center; padding:24px; }
.ed-empty-ic { width:52px; height:52px; border-radius:16px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.ed-empty-t { color:var(--ink); font-weight:600; font-size:15px; }
.ed-empty-s { font-size:13px; }
.ed-panel .card .step-title { margin-bottom:var(--sp-3); }
.ed-saved { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:var(--sp-3); padding:12px 14px; background:var(--panel-3); border:1px solid var(--line-2); border-radius:var(--r-md); }
.ed-status { color:var(--muted); font-size:13.5px; margin:0 0 var(--sp-4); line-height:1.5; }
.ed-status.dirty { color:var(--warn); }
.ed-status.ok { color:var(--ok); }
.ed-actions { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-2); margin-bottom:var(--sp-4); }
.ed-actions:has(+ .checks:empty) { margin-bottom:0; }
.ed-actions .btn { width:100%; white-space:normal; line-height:1.25; }
.ed-actions #ed-publish { grid-column:1 / -1; }
.wa-embed { height:100%; }
.wa-embed .wa-overlay-free, .wa-phone.mounted { width:100%; height:100%; border:1px solid var(--line); box-shadow:var(--shadow-sm); }

/* editable bubbles */
.wa-group { display:flex; flex-direction:column; gap:4px; }
.wa-row.in { flex-direction:column; align-items:flex-start; }
.wa-tools { display:flex; gap:4px; margin:2px 0 6px; flex-wrap:wrap; }
.wa-tb { min-width:32px; height:32px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center; border:none; border-radius:16px; background:var(--wa-chip); color:var(--wa-meta); font-size:12px; font-weight:600; cursor:pointer; box-shadow:0 1px .5px rgba(11,20,26,.13); font-family:inherit; }
.wa-tb:hover { color:var(--wa-ink); }
.wa-tb.danger:hover { color:#e5484d; }
.wa-drag { cursor:grab; }
.wa-row.dragging { opacity:.4; }
.wa-row.drop-above { box-shadow:0 -3px 0 var(--wa-green); }
.wa-row.drop-below { box-shadow:0 3px 0 var(--wa-green); }
.wa-edit { outline:none; border-radius:4px; cursor:text; transition:background .12s; min-height:1.4em; }
.wa-edit:hover { background:rgba(0,168,132,.08); }
.wa-edit:focus { background:rgba(0,168,132,.12); box-shadow:0 0 0 2px rgba(0,168,132,.35); }
.wa-edit.empty::before { content:attr(data-ph); color:var(--wa-meta); }
.wa-addrow { position:relative; align-self:flex-start; margin:0 0 8px; }
.wa-add { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px; border:1.5px dashed var(--wa-meta); border-radius:18px; background:transparent; color:var(--wa-meta); font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; }
.wa-add:hover { color:var(--wa-green); border-color:var(--wa-green); }
.wa-addmenu { position:absolute; left:0; top:calc(100% + 4px); z-index:5; display:flex; flex-direction:column; min-width:160px; background:var(--wa-sheet); border-radius:12px; box-shadow:0 6px 24px rgba(11,20,26,.2); padding:6px; }
.wa-addmenu[hidden] { display:none; }
.wa-addmenu button { min-height:40px; padding:0 12px; border:none; background:transparent; color:var(--wa-ink); text-align:left; border-radius:8px; font-size:14px; cursor:pointer; font-family:inherit; }
.wa-addmenu button:hover { background:rgba(134,150,160,.14); }

@media (max-width:900px) {
  .ed-grid { grid-template-columns:minmax(0,1fr); }
  .ed-phone { position:relative; top:0; height:78dvh; min-height:520px; }
}
@media (max-width:680px) {
  .topbar { flex-wrap:wrap; }
  .mode-seg { order:3; width:100%; }
  .mode-btn { flex:1; }
  .ed-actions { grid-template-columns:1fr; }
}
@media (max-width:520px) { .wa-phone.mounted { width:100%; height:100%; border-radius:18px; } }

/* editor: tools on the picture, file or voice note */
.wa-media-wrap { position:relative; }
.wa-media-tools { position:absolute; top:8px; right:8px; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.wa-b.document .wa-media-tools, .wa-b.audio .wa-media-tools { position:static; justify-content:flex-start; margin-top:6px; }
.wa-mt { min-height:32px; padding:0 12px; border:none; border-radius:16px; background:rgba(11,20,26,.72); color:#fff; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; backdrop-filter:blur(4px); }
.wa-mt:hover { background:rgba(11,20,26,.88); }
.wa-b.document .wa-mt, .wa-b.audio .wa-mt { background:var(--wa-chip); color:var(--wa-ink); box-shadow:0 1px .5px rgba(11,20,26,.13); }
.wa-row.drop-swap > .wa-b { box-shadow:0 0 0 2px var(--wa-green); }
.wa-group.removed { opacity:.8; }