/* ===================== DM ENGINE TAB =====================
   ManyChat-clone comment/DM automation manager. Palette matches the existing
   Watchtower dark theme exactly (see competitors.css/shell.css); phone-mock
   colors are fixed (not theme-swapped) since they recreate Instagram's own
   dark messaging UI - same reasoning as the dm-engine-flow.html prototype. */

/* ---------- layout / segment toggle / KPI strip ---------- */

.dm-seg { display:inline-flex; gap:4px; background:#1C1917; border-radius:20px; padding:4px; margin-bottom:16px; }
.dm-seg-btn { font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; padding:6px 20px; border-radius:20px; background:none; border:none; color:#8A8478; }
.dm-seg-btn:hover:not(.active) { color:#B7B0A4; }
.dm-seg-btn.active { background:#F5EFE6; color:#141210; }

.dm-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }

.dm-kpi-strip { display:flex; align-items:center; gap:24px; flex-wrap:wrap; background:#15130f; border:1px solid #2f2d29; border-radius:12px; padding:14px 20px; margin-bottom:18px; }
.dm-kpi { display:flex; flex-direction:column; gap:2px; }
.dm-kpi-label { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:#8A8478; }
.dm-kpi-value { font-size:20px; font-weight:700; color:#F5EFE6; font-variant-numeric:tabular-nums; }
.dm-kpi-value.err { color:#C2694F; }
.dm-kpi-spacer { flex:1; }

.dm-pause-toggle { display:flex; align-items:center; gap:10px; }
.dm-pause-label { font-size:12px; font-weight:700; color:#8A8478; }
.dm-pause-switch { position:relative; width:44px; height:24px; border-radius:14px; background:#79B08F; border:none; cursor:pointer; transition:background 0.15s; flex-shrink:0; }
.dm-pause-switch::after { content:''; position:absolute; top:3px; left:23px; width:18px; height:18px; border-radius:50%; background:#0f0e0c; transition:left 0.15s; }
.dm-pause-switch.paused { background:#C2694F; }
.dm-pause-switch.paused::after { left:3px; }
.dm-pause-state { font-size:12px; font-weight:700; color:#79B08F; }
.dm-pause-state.paused { color:#C2694F; }

.dm-paused-banner { display:flex; align-items:center; gap:10px; background:rgba(194,105,79,0.12); border:1px solid rgba(194,105,79,0.4); border-radius:10px; padding:10px 16px; margin-bottom:16px; font-size:13px; color:#E8907A; font-weight:600; }
.dm-paused-banner .dot { width:8px; height:8px; border-radius:50%; background:#C2694F; flex-shrink:0; }

/* ---------- automations list ---------- */

.dm-group-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#8A8478; margin:20px 0 10px; }
.dm-group-label:first-child { margin-top:0; }

.dm-card { background:#15130f; border:1px solid #2f2d29; border-radius:12px; padding:16px 18px; margin-bottom:10px; display:flex; align-items:flex-start; gap:16px; }
.dm-card-main { flex:1; min-width:0; }
.dm-card-title-row { display:flex; align-items:center; gap:10px; margin-bottom:4px; flex-wrap:wrap; }
.dm-status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dm-status-dot.active { background:#79B08F; box-shadow:0 0 0 3px rgba(121,176,143,0.18); }
.dm-status-dot.paused { background:#6e695f; }
.dm-status-dot.draft { background:#C99A4B; }
.dm-card-name { font-size:14px; font-weight:700; color:#F5EFE6; }
.dm-type-pill { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; padding:2px 8px; border-radius:6px; background:#1C1917; color:#8A8478; border:1px solid #2f2d29; }
.dm-card-summary { font-size:12.5px; color:#8A8478; margin-bottom:8px; }
.dm-card-summary code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:#1C1917; padding:1px 5px; border-radius:4px; color:#B7B0A4; }
.dm-card-stats { display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:#B7B0A4; font-variant-numeric:tabular-nums; }
.dm-card-stats b { color:#F5EFE6; }
.dm-card-stats .dm-stat-err { color:#C2694F; }
.dm-err-warn { display:inline-flex; align-items:center; gap:4px; color:#C99A4B; font-size:11px; font-weight:700; cursor:help; }

.dm-card-actions { display:flex; flex-direction:column; gap:6px; align-items:flex-end; flex-shrink:0; }
.dm-toggle { font-size:11px; font-weight:600; padding:4px 10px; border-radius:20px; background:#181714; border:1px solid #2f2d29; color:#8A8478; cursor:pointer; font-family:inherit; white-space:nowrap; transition:background 0.15s,color 0.15s,border-color 0.15s; }
.dm-toggle:hover { border-color:#403d39; }
.dm-toggle.on { background:#79B08F; border-color:#79B08F; color:#0f0e0c; }
.dm-action-row { display:flex; gap:4px; }
.dm-icon-btn { font-size:11px; font-weight:600; padding:4px 9px; border-radius:6px; background:none; border:1px solid transparent; color:#8A8478; cursor:pointer; font-family:inherit; }
.dm-icon-btn:hover { background:#1C1917; color:#F5EFE6; }
.dm-icon-btn.danger:hover { color:#C2694F; }

.dm-list-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.dm-btn-primary { background:#E04E24; color:#fff6e8; border:none; border-radius:8px; padding:9px 18px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; }
.dm-btn-primary:hover { background:#c8461f; }
.dm-preset-row { display:flex; gap:8px; flex-wrap:wrap; }
.dm-btn-preset { background:#181714; border:1px solid #2f2d29; color:#B7B0A4; border-radius:8px; padding:8px 14px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; }
.dm-btn-preset:hover { border-color:#E04E24; color:#F5EFE6; }

.dm-empty { text-align:center; padding:48px 20px; color:#8A8478; }
.dm-empty p { font-size:13.5px; margin:0 0 18px; }

/* ---------- editor modal ---------- */

.dm-modal-overlay { display:none; position:fixed; inset:0; z-index:140; background:rgba(10,9,7,0.8); backdrop-filter:blur(2px); align-items:center; justify-content:center; padding:20px; }
.dm-modal-overlay.show { display:flex; }
.dm-editor-modal { position:relative; width:100%; max-width:1080px; height:88vh; background:#15130f; border:1px solid #2f2d29; border-radius:16px; display:flex; flex-direction:column; overflow:hidden; }
.dm-editor-head { display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid #2f2d29; flex-shrink:0; }
.dm-editor-head h3 { margin:0; font-size:15px; color:#F5EFE6; }
.dm-editor-close { background:none; border:none; color:#8A8478; font-size:24px; line-height:1; cursor:pointer; padding:2px 6px; }
.dm-editor-close:hover { color:#F5EFE6; }
.dm-editor-body { flex:1; display:flex; overflow:hidden; min-height:0; }
.dm-editor-form { flex:1 1 60%; overflow-y:auto; padding:20px 24px; display:flex; flex-direction:column; gap:20px; min-width:0; }
.dm-editor-preview { flex:0 0 40%; max-width:420px; background:#0f0d0b; border-left:1px solid #2f2d29; display:flex; flex-direction:column; align-items:center; padding:20px; overflow-y:auto; }
@media (max-width:900px) {
  .dm-editor-body { flex-direction:column; }
  .dm-editor-preview { display:none; flex:none; max-width:none; border-left:none; border-top:1px solid #2f2d29; }
  .dm-editor-preview.dm-preview-open { display:flex; }
  .dm-preview-toggle { display:inline-flex !important; }
}
.dm-preview-toggle { display:none; background:#181714; border:1px solid #2f2d29; color:#B7B0A4; border-radius:8px; padding:6px 14px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; }

.dm-field-group { display:flex; flex-direction:column; gap:8px; }
.dm-field-label { font-size:13px; font-weight:700; color:#F5EFE6; }
.dm-field-hint { font-size:11.5px; color:#8A8478; margin-top:-4px; }
.dm-input, .dm-select, .dm-textarea { font-family:inherit; font-size:13px; padding:8px 12px; border-radius:8px; background:#181714; border:1px solid #2f2d29; color:#F5EFE6; color-scheme:dark; width:100%; box-sizing:border-box; }
.dm-input:focus, .dm-select:focus, .dm-textarea:focus { outline:none; border-color:#E04E24; }
.dm-textarea { resize:vertical; min-height:60px; font-family:inherit; }
.dm-radio-row { display:flex; flex-direction:column; gap:8px; }
.dm-radio-opt { display:flex; align-items:center; gap:8px; font-size:13px; color:#B7B0A4; cursor:pointer; }
.dm-radio-opt input { accent-color:#E04E24; }
.dm-chip-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.dm-chip { display:inline-flex; align-items:center; gap:6px; background:#1C1917; border:1px solid #2f2d29; color:#B7B0A4; font-size:11.5px; padding:3px 10px; border-radius:20px; }
.dm-chip button { background:none; border:none; color:#8A8478; cursor:pointer; font-size:13px; padding:0; line-height:1; }
.dm-toggle-row { display:flex; align-items:center; gap:10px; }
.dm-checkbox-row { display:flex; align-items:center; gap:8px; font-size:12.5px; color:#B7B0A4; }
.dm-variants-list { display:flex; flex-direction:column; gap:6px; }
.dm-variant-row { display:flex; gap:6px; align-items:center; }
.dm-variant-row .dm-input { flex:1; }
.dm-add-row-btn { background:none; border:1px dashed #403d39; color:#8A8478; border-radius:8px; padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; text-align:left; }
.dm-add-row-btn:hover { border-color:#E04E24; color:#F5EFE6; }
.dm-remove-btn { background:none; border:none; color:#8A8478; cursor:pointer; font-size:16px; padding:0 6px; }
.dm-remove-btn:hover { color:#C2694F; }
.dm-media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:6px; max-height:160px; overflow-y:auto; }
.dm-media-thumb { position:relative; aspect-ratio:1; border-radius:6px; overflow:hidden; cursor:pointer; border:2px solid transparent; background:#1C1917; }
.dm-media-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.dm-media-thumb.selected { border-color:#E04E24; }
.dm-media-thumb.selected::after { content:'✓'; position:absolute; top:2px; right:2px; background:#E04E24; color:#fff; width:16px; height:16px; border-radius:50%; font-size:10px; display:flex; align-items:center; justify-content:center; }
.dm-link-inline { font-size:11.5px; color:#8A8478; }
.dm-link-inline a { color:#E8907A; }

.dm-editor-foot { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:14px 22px; border-top:1px solid #2f2d29; flex-shrink:0; }
.dm-editor-status { flex:1; font-size:11.5px; color:#8A8478; }
.dm-editor-status.ok { color:#79B08F; }
.dm-editor-status.err { color:#C2694F; }
.dm-btn-secondary { background:#181714; border:1px solid #2f2d29; color:#B7B0A4; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
.dm-btn-secondary:hover { border-color:#403d39; color:#F5EFE6; }

/* ---------- phone mock (shared: editor preview + View flow) ----------
   Fixed dark colors regardless of page theme - recreates Instagram's own
   dark messaging UI, same reasoning as dm-engine-flow.html prototype. */

.dm-phone { width:270px; border-radius:32px; background:#120d10; padding:9px; box-shadow:0 8px 24px rgba(0,0,0,0.4); flex-shrink:0; }
.dm-phone-screen { background:#1c1418; border-radius:24px; overflow:hidden; min-height:480px; display:flex; flex-direction:column; }
.dm-phone-seg { display:flex; gap:4px; padding:10px 10px 0; }
.dm-phone-seg button { flex:1; font-size:11px; font-weight:700; padding:6px 0; border-radius:14px; background:none; border:none; color:#756c79; cursor:pointer; font-family:inherit; }
.dm-phone-seg button.active { background:rgba(255,255,255,0.08); color:#f1ece6; }
.dm-phone-topbar { display:flex; align-items:center; gap:9px; padding:12px 14px 10px; }
.dm-phone-avatar { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#dd4f26,#8a3216); flex-shrink:0; }
.dm-phone-peer { color:#f1ece6; font-size:13px; font-weight:600; }
.dm-phone-thread { flex:1; padding:12px 12px; display:flex; flex-direction:column; gap:7px; overflow-y:auto; min-height:280px; }
.dm-bubble-row { display:flex; }
.dm-bubble-row.in { justify-content:flex-start; }
.dm-bubble-row.out { justify-content:flex-end; }
.dm-bubble { max-width:82%; padding:8px 12px; border-radius:15px; font-size:12.5px; line-height:1.4; }
.dm-bubble.in { background:#2a232c; color:#f1ece6; border-bottom-left-radius:4px; }
.dm-bubble.out { background:#b8401d; color:#fff6ee; border-bottom-right-radius:4px; }
.dm-bubble.system { align-self:center; background:transparent; color:#9d93a3; font-size:10px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; text-transform:uppercase; letter-spacing:0.05em; padding:8px 0 2px; text-align:center; }
.dm-bubble-btn { display:block; margin-top:6px; background:rgba(255,255,255,0.15); border-radius:8px; padding:6px 10px; font-size:11.5px; font-weight:600; text-align:center; }
.dm-klaviyo-tag { align-self:flex-start; background:rgba(127,217,164,0.14); color:#7fd9a4; border:1px solid #7fd9a4; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10px; padding:4px 9px; border-radius:8px; margin:2px 0 2px 2px; }
.dm-sim-ribbon { position:absolute; top:8px; right:-28px; background:#E04E24; color:#fff; font-size:9px; font-weight:800; letter-spacing:0.06em; padding:3px 32px; transform:rotate(40deg); box-shadow:0 2px 6px rgba(0,0,0,0.3); }
.dm-phone-wrap { position:relative; overflow:visible; }
.dm-phone-empty { color:#756c79; font-size:11.5px; text-align:center; padding:30px 12px; }

/* ---------- View flow (read-only, live-rendered) ---------- */

.dm-flow-modal { position:relative; width:100%; max-width:980px; max-height:88vh; background:#15130f; border:1px solid #2f2d29; border-radius:16px; display:flex; flex-direction:column; overflow:hidden; }
.dm-flow-body { flex:1; overflow-y:auto; padding:22px 24px; display:grid; grid-template-columns:270px 1fr; gap:28px; align-items:start; }
@media (max-width:760px) { .dm-flow-body { grid-template-columns:1fr; } }
.dm-flow-cards { display:flex; flex-direction:column; gap:16px; }
.dm-flow-card { background:#181714; border:1px solid #2f2d29; border-radius:12px; padding:16px 18px; }
.dm-flow-card h4 { margin:0 0 10px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:#8A8478; display:flex; align-items:center; gap:8px; }
.dm-flow-card-tag { font-size:9.5px; font-weight:700; letter-spacing:0.04em; padding:2px 7px; border-radius:5px; }
.dm-flow-card-tag.trigger { background:rgba(228,218,235,0.12); color:#c9b8dc; }
.dm-flow-card-tag.action { background:rgba(201,154,75,0.15); color:#C99A4B; }
.dm-flow-card-tag.external { background:rgba(121,176,143,0.15); color:#79B08F; }
.dm-flow-kv { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; font-size:12.5px; }
.dm-flow-kv dt { color:#8A8478; }
.dm-flow-kv dd { margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; color:#F5EFE6; }
.dm-step-list { display:flex; flex-direction:column; gap:10px; }
.dm-step-row { display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start; font-size:12.5px; }
.dm-step-glyph { width:20px; height:20px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; margin-top:1px; flex-shrink:0; }
.dm-step-glyph.ok { background:rgba(121,176,143,0.15); color:#79B08F; }
.dm-step-glyph.retry { background:rgba(201,154,75,0.15); color:#C99A4B; }
.dm-step-glyph.drop { background:#2f2d29; color:#8A8478; }
.dm-step-row p { margin:0; color:#B7B0A4; }
.dm-step-row strong { color:#F5EFE6; font-weight:600; }

/* ---------- contacts view ---------- */

.dm-contacts-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.dm-table-wrap { overflow-x:auto; background:#15130f; border:1px solid #2f2d29; border-radius:12px; }
.dm-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.dm-table th { text-align:left; padding:10px 14px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:#8A8478; border-bottom:1px solid #2f2d29; white-space:nowrap; }
.dm-table td { padding:10px 14px; border-bottom:1px solid #211f1b; color:#B7B0A4; vertical-align:middle; }
.dm-table tr:last-child td { border-bottom:none; }
.dm-table a { color:#E8907A; text-decoration:none; }
.dm-table a:hover { text-decoration:underline; }
.dm-window-pill { font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:20px; white-space:nowrap; }
.dm-window-pill.open { background:rgba(121,176,143,0.15); color:#79B08F; }
.dm-window-pill.closed { background:#1C1917; color:#6e695f; }
.dm-tag-chip { display:inline-block; background:#1C1917; border:1px solid #2f2d29; color:#B7B0A4; font-size:10.5px; padding:1px 8px; border-radius:20px; margin:1px 3px 1px 0; }

/* ---------- inbox view ---------- */

.dm-inbox { display:grid; grid-template-columns:280px 1fr; gap:0; background:#15130f; border:1px solid #2f2d29; border-radius:12px; overflow:hidden; height:600px; }
@media (max-width:760px) { .dm-inbox { grid-template-columns:1fr; height:auto; } }
.dm-inbox-list { border-right:1px solid #2f2d29; overflow-y:auto; }
.dm-inbox-row { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid #211f1b; cursor:pointer; }
.dm-inbox-row:hover { background:#181714; }
.dm-inbox-row.active { background:#1C1917; }
.dm-inbox-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#dd4f26,#8a3216); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff6ee; font-size:13px; font-weight:700; }
.dm-inbox-row-main { flex:1; min-width:0; }
.dm-inbox-row-name { font-size:12.5px; font-weight:700; color:#F5EFE6; display:flex; align-items:center; gap:6px; }
.dm-unread-dot { width:7px; height:7px; border-radius:50%; background:#E04E24; flex-shrink:0; }
.dm-inbox-row-snippet { font-size:11.5px; color:#8A8478; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-inbox-row-time { font-size:10px; color:#6e695f; flex-shrink:0; }
.dm-inbox-thread-wrap { display:flex; flex-direction:column; min-width:0; }
.dm-inbox-banner { background:rgba(201,154,75,0.1); border-bottom:1px solid rgba(201,154,75,0.3); color:#C99A4B; font-size:11.5px; padding:8px 16px; }
.dm-inbox-thread { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px; }
.dm-thread-bubble-row { display:flex; flex-direction:column; }
.dm-thread-bubble-row.in { align-items:flex-start; }
.dm-thread-bubble-row.out { align-items:flex-end; }
.dm-thread-bubble { max-width:70%; padding:8px 13px; border-radius:14px; font-size:13px; line-height:1.4; }
.dm-thread-bubble-row.in .dm-thread-bubble { background:#1C1917; color:#F5EFE6; border-bottom-left-radius:4px; }
.dm-thread-bubble-row.out .dm-thread-bubble { background:#E04E24; color:#fff6e8; border-bottom-right-radius:4px; }
.dm-thread-meta { font-size:10px; color:#6e695f; margin-top:3px; display:flex; gap:6px; align-items:center; }
.dm-thread-badge { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; padding:1px 6px; border-radius:4px; background:#1C1917; color:#8A8478; }
.dm-inbox-empty { display:flex; align-items:center; justify-content:center; height:100%; color:#8A8478; font-size:13px; }

/* ---------- misc ---------- */

.dm-toast { position:fixed; bottom:24px; right:24px; background:#79B08F; color:#fff; padding:10px 18px; border-radius:8px; font-size:13px; font-weight:600; box-shadow:0 4px 12px rgba(0,0,0,0.4); z-index:1000; opacity:0; transform:translateY(10px); transition:opacity 0.2s,transform 0.2s; }
.dm-toast.show { opacity:1; transform:translateY(0); }
.dm-toast.error { background:#C2694F; }