/* DD AI Edit Panel v3.1 — DD AI brand theme: black #050505 + green #10b981.
   Loaded in get-started page, deployed dashboard Customise Bot tab, partner on-behalf form.
   Wave 1C mobile + a11y: 768/480/360 breakpoints, 44px touch targets, iOS no-zoom, safe-area,
   focus-visible rings, reduced-motion, hover-on-hover-only. */

.dd-edit-panel{
  --ddep-bg:#050505; --ddep-bg-2:#0a0a0a;
  --ddep-card:rgba(16,185,129,0.04); --ddep-border:rgba(16,185,129,0.18);
  --ddep-text:#f8fafc; --ddep-muted:#94a3b8;
  --ddep-accent:#10b981; --ddep-accent-2:#34d399;
  --ddep-danger:#ef4444;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ddep-text);
  display:flex; flex-direction:column; gap:18px;
  padding:20px; border-radius:18px;
  background:linear-gradient(180deg,var(--ddep-bg) 0%,var(--ddep-bg-2) 100%);
  border:1px solid rgba(16,185,129,0.15);
  max-width:720px;
  box-shadow:0 16px 48px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.04);
}
.dd-edit-panel.dd-light{ --ddep-bg:#ffffff; --ddep-bg-2:#fafafa; --ddep-card:rgba(15,23,42,.04); --ddep-border:rgba(16,185,129,0.25); --ddep-text:#0f172a; --ddep-muted:#64748b; }
.dd-edit-panel *,.dd-edit-panel *::before,.dd-edit-panel *::after{ box-sizing:border-box; }

.dd-edit-panel .ddep-section{ background:var(--ddep-card); border:1px solid var(--ddep-border); border-radius:14px; padding:16px 16px 14px; transition:border-color .2s; }
@media (hover: hover){
  .dd-edit-panel .ddep-section:hover{ border-color:rgba(16,185,129,0.3); }
  .dd-edit-panel .ddep-section.ddep-locked:hover{ border-color:var(--ddep-border); }
}
.dd-edit-panel h3{ margin:0 0 6px; font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px; color:var(--ddep-text); }
.dd-edit-panel .ddep-help{ font-size:11px; color:var(--ddep-muted); margin:0 0 10px; line-height:1.5; }
.dd-edit-panel .ddep-tier-badge{ font-size:10px; font-weight:700; padding:3px 8px; border-radius:999px; background:linear-gradient(135deg,var(--ddep-accent),var(--ddep-accent-2)); color:#04150f; letter-spacing:.3px; }

.dd-edit-panel .ddep-row{ display:flex; flex-direction:column; gap:6px; padding:10px 0; border-bottom:1px solid rgba(16,185,129,0.08); }
.dd-edit-panel .ddep-row:last-child{ border-bottom:none; padding-bottom:2px; }
.dd-edit-panel .ddep-row-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.dd-edit-panel .ddep-label{ font-size:12px; font-weight:600; color:rgba(16,185,129,0.95); letter-spacing:.2px; }
.dd-edit-panel .ddep-hint{ font-size:11px; color:var(--ddep-muted); }
.dd-edit-panel .ddep-row-body{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.dd-edit-panel input[type="color"].ddep-color{
  width:44px; height:44px; padding:0; border:2px solid var(--ddep-border); border-radius:10px; background:transparent; cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
@media (hover: hover){
  .dd-edit-panel input[type="color"].ddep-color:hover{ border-color:var(--ddep-accent); box-shadow:0 0 0 3px rgba(16,185,129,0.15); }
}
.dd-edit-panel input[type="color"].ddep-color:focus-visible{ outline:2px solid var(--ddep-accent); outline-offset:2px; }
.dd-edit-panel input[type="color"].ddep-color::-webkit-color-swatch-wrapper{ padding:0; }
.dd-edit-panel input[type="color"].ddep-color::-webkit-color-swatch{ border:none; border-radius:8px; }

.dd-edit-panel input.ddep-color-text{
  width:96px; min-height:44px; padding:9px 10px; border:1px solid var(--ddep-border); border-radius:8px;
  background:rgba(0,0,0,0.4); color:var(--ddep-text); font-family:monospace; font-size:max(16px,12px); text-transform:uppercase; letter-spacing:.5px;
  transition:border-color .15s, box-shadow .15s;
}
.dd-edit-panel input.ddep-color-text:focus{ outline:none; border-color:var(--ddep-accent); box-shadow:0 0 0 3px rgba(16,185,129,0.15); }
.dd-edit-panel input.ddep-color-text:focus-visible{ outline:2px solid var(--ddep-accent); outline-offset:2px; }
@media (hover: hover){
  .dd-edit-panel input.ddep-color-text:hover{ border-color:var(--ddep-accent); box-shadow:0 0 0 3px rgba(16,185,129,0.15); }
}

.dd-edit-panel .ddep-suggest{ display:inline-flex; gap:4px; }
.dd-edit-panel .ddep-swatch{
  width:26px; height:26px; border-radius:6px; border:1px solid var(--ddep-border); cursor:pointer;
  transition:transform .15s, box-shadow .15s;
}
@media (hover: hover){
  .dd-edit-panel .ddep-swatch:hover{ transform:scale(1.18); box-shadow:0 4px 12px rgba(16,185,129,0.3); border-color:var(--ddep-accent); }
}
.dd-edit-panel .ddep-swatch:focus-visible{ outline:2px solid var(--ddep-accent); outline-offset:2px; }

.dd-edit-panel .ddep-typing-text{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.dd-edit-panel .ddep-radio{
  display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border:1px solid var(--ddep-border);
  border-radius:8px; font-size:12px; cursor:pointer; background:rgba(0,0,0,0.3); transition:all .15s;
}
@media (hover: hover){
  .dd-edit-panel .ddep-radio:hover{ border-color:var(--ddep-accent); }
}
.dd-edit-panel .ddep-radio:focus-within{ outline:2px solid var(--ddep-accent); outline-offset:2px; }
.dd-edit-panel .ddep-radio input[type="radio"]{ margin:0; accent-color:var(--ddep-accent); }
.dd-edit-panel .ddep-radio:has(input:checked){ border-color:var(--ddep-accent); background:rgba(16,185,129,0.12); }
.dd-edit-panel .ddep-typing-custom{
  padding:5px 8px; border:1px solid var(--ddep-border); border-radius:6px;
  background:rgba(0,0,0,0.3); color:var(--ddep-text); font-size:max(16px,12px); min-width:120px;
}
.dd-edit-panel .ddep-typing-custom:focus{ outline:none; border-color:var(--ddep-accent); }
.dd-edit-panel .ddep-typing-custom:focus-visible{ outline:2px solid var(--ddep-accent); outline-offset:2px; }
.dd-edit-panel .ddep-typing-custom:disabled{ opacity:.4; }

.dd-edit-panel .ddep-pillbar{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.dd-edit-panel .ddep-pill{
  padding:7px 15px; border-radius:999px; border:1px solid var(--ddep-border);
  background:rgba(0,0,0,0.3); color:var(--ddep-text); font-size:12px; font-weight:600;
  cursor:pointer; text-transform:capitalize; transition:all .15s;
}
@media (hover: hover){
  .dd-edit-panel .ddep-pill:hover{ border-color:var(--ddep-accent); color:var(--ddep-accent); background:rgba(16,185,129,0.08); }
}
.dd-edit-panel .ddep-pill.ddep-active{ background:linear-gradient(135deg,var(--ddep-accent),var(--ddep-accent-2)); color:#04150f; border-color:transparent; box-shadow:0 4px 12px rgba(16,185,129,0.25); }

/* R4.1: shape-picker pills with visual swatch */
.dd-edit-panel .ddep-pill-visual{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; min-height:40px; }
.dd-edit-panel .ddep-pill-visual > span:first-child{ display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dd-edit-panel .ddep-pill:focus-visible{ outline:2px solid var(--ddep-accent); outline-offset:2px; }

.dd-edit-panel .ddep-check{
  display:flex; align-items:flex-start; gap:8px; padding:8px 0; font-size:12px; cursor:pointer; line-height:1.5; min-height:44px;
}
.dd-edit-panel .ddep-check input[type="checkbox"]{ margin-top:2px; accent-color:var(--ddep-accent); width:18px; height:18px; cursor:pointer; }
.dd-edit-panel .ddep-check input[type="checkbox"]:focus-visible{ outline:2px solid var(--ddep-accent); outline-offset:2px; }

.dd-edit-panel input.ddep-text, .dd-edit-panel select.ddep-text, .dd-edit-panel textarea.ddep-text{
  width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--ddep-border); border-radius:8px;
  background:rgba(0,0,0,0.4); color:var(--ddep-text); font-size:max(16px,13px); transition:border-color .15s, box-shadow .15s;
}
.dd-edit-panel input.ddep-text:focus, .dd-edit-panel select.ddep-text:focus, .dd-edit-panel textarea.ddep-text:focus{ outline:none; border-color:var(--ddep-accent); box-shadow:0 0 0 3px rgba(16,185,129,0.15); }
.dd-edit-panel input.ddep-text:focus-visible, .dd-edit-panel select.ddep-text:focus-visible, .dd-edit-panel textarea.ddep-text:focus-visible{ outline:2px solid var(--ddep-accent); outline-offset:2px; }
.dd-edit-panel select.ddep-text{ appearance:none; cursor:pointer; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat:no-repeat; background-position:right 10px center; padding-right:32px; }

.dd-edit-panel .ddep-effects{ list-style:none; padding:0; margin:0; }
.dd-edit-panel .ddep-effects li{ padding:7px 0; font-size:12px; color:var(--ddep-text); border-bottom:1px dashed rgba(16,185,129,0.12); display:flex; align-items:center; gap:6px; }
.dd-edit-panel .ddep-effects li:last-child{ border-bottom:none; }
.dd-edit-panel .ddep-upgrade{ margin-top:10px; padding:10px 14px; border-radius:10px; background:linear-gradient(135deg,rgba(16,185,129,0.1),rgba(52,211,153,0.05)); border:1px solid rgba(16,185,129,0.2); font-size:11px; color:var(--ddep-muted); line-height:1.5; }
.dd-edit-panel .ddep-upgrade strong{ color:var(--ddep-accent); }

/* ----- shortcuts editor ----- */
.dd-edit-panel .ddep-chip-row{ display:flex; gap:6px; margin-bottom:6px; align-items:stretch; }
.dd-edit-panel .ddep-chip-input{ flex:1; min-height:44px; padding:10px 11px; border:1px solid var(--ddep-border); border-radius:8px; background:rgba(0,0,0,0.4); color:var(--ddep-text); font-size:max(16px,12px); }
.dd-edit-panel .ddep-chip-input:focus{ outline:none; border-color:var(--ddep-accent); box-shadow:0 0 0 3px rgba(16,185,129,0.15); }
.dd-edit-panel .ddep-chip-input:focus-visible{ outline:2px solid var(--ddep-accent); outline-offset:2px; }
.dd-edit-panel .ddep-chip-del{ background:transparent; border:1px solid var(--ddep-border); border-radius:8px; color:var(--ddep-muted); min-width:44px; min-height:44px; cursor:pointer; font-size:16px; transition:all .15s; }
@media (hover: hover){
  .dd-edit-panel .ddep-chip-del:hover{ background:rgba(239,68,68,.12); color:var(--ddep-danger); border-color:var(--ddep-danger); }
}
.dd-edit-panel .ddep-chip-del:focus-visible{ outline:2px solid var(--ddep-danger); outline-offset:2px; }

.dd-edit-panel .ddep-add-btn{ margin-top:6px; background:transparent; border:1.5px dashed var(--ddep-border); color:var(--ddep-accent); padding:12px 16px; min-height:44px; border-radius:10px; cursor:pointer; font-size:13px; font-weight:700; width:100%; transition:all .15s; }
@media (hover: hover){
  .dd-edit-panel .ddep-add-btn:hover{ border-color:var(--ddep-accent); background:rgba(16,185,129,0.08); }
}
.dd-edit-panel .ddep-add-btn:focus-visible{ outline:2px solid var(--ddep-accent); outline-offset:2px; }

/* ----- icon grid ----- */
.dd-edit-panel .ddep-icon-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:6px; }
.dd-edit-panel .ddep-icon{ background:rgba(0,0,0,0.35); border:1px solid var(--ddep-border); border-radius:8px; padding:8px; min-width:44px; min-height:44px; cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center; color:var(--ddep-text); aspect-ratio:1; }
@media (hover: hover){
  .dd-edit-panel .ddep-icon:hover{ border-color:var(--ddep-accent); color:var(--ddep-accent); background:rgba(16,185,129,0.08); }
}
.dd-edit-panel .ddep-icon:focus-visible{ outline:2px solid var(--ddep-accent); outline-offset:2px; }
.dd-edit-panel .ddep-icon.ddep-active{ border-color:var(--ddep-accent); background:rgba(16,185,129,0.15); color:var(--ddep-accent); box-shadow:inset 0 0 0 1px var(--ddep-accent); }

/* ----- photo drop zone (new drag-drop UX) ----- */
.dd-edit-panel .ddep-photo-drop{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:130px; padding:18px;
  border:2px dashed rgba(16,185,129,0.3); border-radius:14px;
  background:rgba(16,185,129,0.03); color:var(--ddep-muted); font-size:13px; text-align:center;
  cursor:pointer; transition:all .2s;
}
@media (hover: hover){
  .dd-edit-panel .ddep-photo-drop:hover{ border-color:var(--ddep-accent); background:rgba(16,185,129,0.08); color:var(--ddep-accent); }
}
.dd-edit-panel .ddep-photo-drop.ddep-drag-active{ border-color:var(--ddep-accent); background:rgba(16,185,129,0.08); color:var(--ddep-accent); }
.dd-edit-panel .ddep-photo-drop:focus-within{ outline:2px solid var(--ddep-accent); outline-offset:2px; }
.dd-edit-panel .ddep-photo-drop input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.dd-edit-panel .ddep-photo-drop-icon{ font-size:32px; line-height:1; }
.dd-edit-panel .ddep-photo-drop-text{ font-weight:600; color:var(--ddep-text); }
.dd-edit-panel .ddep-photo-drop-sub{ font-size:11px; color:var(--ddep-muted); }
.dd-edit-panel .ddep-photo-preview{ display:flex; align-items:center; gap:12px; margin-top:10px; padding:10px; background:rgba(0,0,0,0.3); border-radius:10px; border:1px solid var(--ddep-border); }
.dd-edit-panel .ddep-photo-preview img{ width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid var(--ddep-accent); }
.dd-edit-panel .ddep-photo-preview-info{ flex:1; min-width:0; font-size:11px; color:var(--ddep-muted); }
.dd-edit-panel .ddep-photo-preview-info strong{ color:var(--ddep-text); display:block; font-size:12px; }
.dd-edit-panel .ddep-photo-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.dd-edit-panel .ddep-photo-actions button{ padding:10px 14px; min-height:44px; min-width:44px; border-radius:6px; border:1px solid var(--ddep-border); background:transparent; color:var(--ddep-text); font-size:12px; cursor:pointer; transition:all .15s; }
@media (hover: hover){
  .dd-edit-panel .ddep-photo-actions button:hover{ border-color:var(--ddep-accent); color:var(--ddep-accent); }
  .dd-edit-panel .ddep-photo-actions button.ddep-danger-btn:hover{ border-color:var(--ddep-danger); color:var(--ddep-danger); }
}
.dd-edit-panel .ddep-photo-actions button:focus-visible{ outline:2px solid var(--ddep-accent); outline-offset:2px; }

/* crop overlay */
.dd-edit-panel .ddep-crop-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.85); backdrop-filter:blur(12px); z-index:2147483646; display:flex; align-items:center; justify-content:center; padding:20px; padding-bottom:max(20px, env(safe-area-inset-bottom)); }
.dd-edit-panel .ddep-crop-modal{ background:#0a0a0a; border:1px solid var(--ddep-border); border-radius:18px; padding:20px; max-width:480px; width:100%; max-height:calc(100vh - 40px); overflow-y:auto; }
.dd-edit-panel .ddep-crop-modal h4{ margin:0 0 12px; font-size:14px; color:var(--ddep-text); }
.dd-edit-panel .ddep-crop-canvas-wrap{ position:relative; width:100%; aspect-ratio:1; background:rgba(0,0,0,0.6); border-radius:12px; overflow:hidden; margin-bottom:12px; }
.dd-edit-panel .ddep-crop-canvas{ width:100%; height:100%; cursor:move; touch-action:none; }
.dd-edit-panel .ddep-crop-zoom{ width:100%; min-height:44px; margin-bottom:14px; accent-color:var(--ddep-accent); }
.dd-edit-panel .ddep-crop-zoom:focus-visible{ outline:2px solid var(--ddep-accent); outline-offset:2px; }
.dd-edit-panel .ddep-crop-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.dd-edit-panel .ddep-crop-actions button{ padding:12px 18px; min-height:44px; min-width:88px; border-radius:8px; border:1px solid var(--ddep-border); background:transparent; color:var(--ddep-text); font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; }
.dd-edit-panel .ddep-crop-actions button.ddep-primary-btn{ background:linear-gradient(135deg,var(--ddep-accent),var(--ddep-accent-2)); color:#04150f; border-color:transparent; }
.dd-edit-panel .ddep-crop-actions button:focus-visible{ outline:2px solid var(--ddep-accent); outline-offset:2px; }

/* ----- numeric inputs ----- */
.dd-edit-panel .ddep-num{ padding:9px 11px; min-height:44px; border:1px solid var(--ddep-border); border-radius:6px; background:rgba(0,0,0,0.4); color:var(--ddep-text); font-size:max(16px,12px); }
.dd-edit-panel .ddep-num:focus{ outline:none; border-color:var(--ddep-accent); box-shadow:0 0 0 3px rgba(16,185,129,0.15); }
.dd-edit-panel .ddep-num:focus-visible{ outline:2px solid var(--ddep-accent); outline-offset:2px; }

/* ----- action button editor rows ----- */
.dd-edit-panel .ddep-act-row{ display:grid; grid-template-columns:1.2fr .8fr 1.5fr auto; gap:6px; margin-bottom:6px; align-items:center; }
.dd-edit-panel .ddep-act-row input, .dd-edit-panel .ddep-act-row select{ padding:10px 10px; min-height:44px; border:1px solid var(--ddep-border); border-radius:6px; background:rgba(0,0,0,0.4); color:var(--ddep-text); font-size:max(16px,12px); }
.dd-edit-panel .ddep-act-row input:focus, .dd-edit-panel .ddep-act-row select:focus{ outline:none; border-color:var(--ddep-accent); }
.dd-edit-panel .ddep-act-row input:focus-visible, .dd-edit-panel .ddep-act-row select:focus-visible{ outline:2px solid var(--ddep-accent); outline-offset:2px; }
.dd-edit-panel .ddep-act-del{ background:transparent; border:1px solid var(--ddep-border); border-radius:6px; color:var(--ddep-muted); padding:0 10px; min-width:44px; min-height:44px; cursor:pointer; font-size:16px; transition:all .15s; }
@media (hover: hover){
  .dd-edit-panel .ddep-act-del:hover{ background:rgba(239,68,68,.12); color:var(--ddep-danger); border-color:var(--ddep-danger); }
}
.dd-edit-panel .ddep-act-del:focus-visible{ outline:2px solid var(--ddep-danger); outline-offset:2px; }

/* ----- locked sections ----- */
.dd-edit-panel .ddep-section.ddep-locked{ opacity:.72; background:rgba(0,0,0,0.2); }
.dd-edit-panel .ddep-tier-badge.ddep-locked-badge{ background:linear-gradient(135deg,#475569,#64748b); color:#cbd5e1; }

/* ----- sound effects (Pro+ curated library + Enterprise upload) ----- */
.dd-edit-panel .ddep-snd-block{ margin-top:12px; padding-top:12px; border-top:1px dashed rgba(16,185,129,0.12); transition:opacity .2s; }
.dd-edit-panel .ddep-snd-block[data-snd-dim]{ opacity:.45; pointer-events:none; }
.dd-edit-panel .ddep-snd-block.ddep-locked{ opacity:.72; }
.dd-edit-panel .ddep-snd-h4{ margin:0 0 6px; font-size:12px; font-weight:700; display:flex; align-items:center; gap:8px; color:var(--ddep-text); }

.dd-edit-panel .ddep-snd-packs{ display:flex; flex-direction:column; gap:8px; }
.dd-edit-panel .ddep-snd-pack{
  display:flex; align-items:center; gap:10px; padding:10px 12px; min-height:44px;
  border:1px solid var(--ddep-border); border-radius:10px; background:rgba(0,0,0,0.3);
  cursor:pointer; transition:all .15s;
}
@media (hover: hover){
  .dd-edit-panel .ddep-snd-pack:hover{ border-color:var(--ddep-accent); background:rgba(16,185,129,0.08); }
}
.dd-edit-panel .ddep-snd-pack.ddep-active{ border-color:var(--ddep-accent); background:rgba(16,185,129,0.12); box-shadow:inset 0 0 0 1px var(--ddep-accent); }
.dd-edit-panel .ddep-snd-pack-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dd-edit-panel .ddep-snd-pack-info strong{ font-size:13px; color:var(--ddep-text); }
.dd-edit-panel .ddep-snd-pack-info span{ font-size:11px; color:var(--ddep-muted); }

.dd-edit-panel .ddep-snd-play{
  flex-shrink:0; width:36px; height:36px; min-width:44px; min-height:44px;
  border-radius:50%; border:1px solid var(--ddep-border); background:rgba(16,185,129,0.08);
  color:var(--ddep-accent); font-size:13px; cursor:pointer; transition:all .15s;
  display:inline-flex; align-items:center; justify-content:center;
}
@media (hover: hover){
  .dd-edit-panel .ddep-snd-play:hover{ border-color:var(--ddep-accent); background:rgba(16,185,129,0.18); }
}
.dd-edit-panel .ddep-snd-play:focus-visible{ outline:2px solid var(--ddep-accent); outline-offset:2px; }

.dd-edit-panel .ddep-snd-slot{ margin-top:10px; }
.dd-edit-panel .ddep-snd-slot-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.dd-edit-panel .ddep-snd-drop{
  position:relative; display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:48px; padding:10px 14px;
  border:2px dashed rgba(16,185,129,0.3); border-radius:10px;
  background:rgba(16,185,129,0.03); color:var(--ddep-muted); font-size:12px; text-align:center;
  cursor:pointer; transition:all .15s;
}
@media (hover: hover){
  .dd-edit-panel .ddep-snd-drop:hover{ border-color:var(--ddep-accent); background:rgba(16,185,129,0.08); color:var(--ddep-accent); }
}
.dd-edit-panel .ddep-snd-drop.ddep-drag-active{ border-color:var(--ddep-accent); background:rgba(16,185,129,0.08); color:var(--ddep-accent); }
.dd-edit-panel .ddep-snd-drop:focus-within{ outline:2px solid var(--ddep-accent); outline-offset:2px; }
.dd-edit-panel .ddep-snd-drop input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.dd-edit-panel .ddep-snd-drop-icon{ font-size:18px; line-height:1; }
.dd-edit-panel .ddep-snd-drop-text{ font-weight:600; }

.dd-edit-panel .ddep-snd-slot-filled{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 10px; background:rgba(0,0,0,0.3); border:1px solid var(--ddep-border); border-radius:10px; }
.dd-edit-panel .ddep-snd-chip{ flex:1; min-width:0; font-size:12px; font-weight:600; color:var(--ddep-accent-2); }
.dd-edit-panel .ddep-snd-remove{ padding:9px 12px; min-height:44px; border-radius:6px; border:1px solid var(--ddep-border); background:transparent; color:var(--ddep-text); font-size:12px; cursor:pointer; transition:all .15s; }
@media (hover: hover){
  .dd-edit-panel .ddep-snd-remove.ddep-danger-btn:hover{ border-color:var(--ddep-danger); color:var(--ddep-danger); }
}
.dd-edit-panel .ddep-snd-remove:focus-visible{ outline:2px solid var(--ddep-danger); outline-offset:2px; }

@media (max-width: 480px){
  .dd-edit-panel .ddep-snd-slot-filled{ flex-direction:column; align-items:stretch; }
  .dd-edit-panel .ddep-snd-remove{ width:100%; }
}

/* ----- font preview chip in font picker ----- */
.dd-edit-panel .ddep-font-chip{ display:inline-block; padding:6px 12px; border-radius:6px; background:rgba(0,0,0,0.3); border:1px solid var(--ddep-border); font-size:14px; }

/* ----- color picker grid (Pro+ premium tier 3-col) — collapses on narrow viewports ----- */
.dd-edit-panel .ddep-color-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

/* ----- drag-handle (cosmetic bar at top of bottom-sheet host; JS wiring lives in Wave 1D) ----- */
.dd-edit-panel .ddep-drag-handle{
  display:none; width:44px; height:4px; border-radius:999px; background:rgba(148,163,184,.4);
  margin:4px auto 12px; cursor:grab; touch-action:none;
}
.dd-edit-panel .ddep-drag-handle:active{ cursor:grabbing; background:rgba(148,163,184,.7); }

/* ----- deployed dashboard "Customise Bot" host modal — mobile collapse ----- */
/* The wrapper (Inject_Dashboard_Edit_Handlers) sets a 2-col grid at desktop; collapse below 768. */
@media (max-width: 768px){
  .dd-customise-modal > div{
    grid-template-columns: 1fr !important;
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }
  .dd-customise-launcher{
    bottom: max(20px, env(safe-area-inset-bottom)) !important;
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 16px !important;
  }
  .dd-customise-close{
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* ----- mobile responsive: 768 / 480 / 360 (project standard) ----- */
@media (max-width: 768px){
  .dd-edit-panel{ padding:16px; gap:14px; max-width:100%; }
  .dd-edit-panel .ddep-color-grid{ grid-template-columns:repeat(2,1fr); }
  .dd-edit-panel .ddep-drag-handle{ display:block; }
}

@media (max-width: 480px){
  .dd-edit-panel{ padding:14px; gap:12px; border-radius:14px; }
  .dd-edit-panel .ddep-section{ padding:12px; border-radius:12px; }
  .dd-edit-panel .ddep-icon-grid{ grid-template-columns:repeat(6,1fr); }
  .dd-edit-panel .ddep-act-row{ grid-template-columns:1fr 1fr auto; }
  .dd-edit-panel .ddep-act-val{ grid-column: 1 / -1; }
  .dd-edit-panel input.ddep-color-text{ width:96px; }
  .dd-edit-panel .ddep-photo-drop{ min-height:110px; padding:14px; }
  .dd-edit-panel .ddep-color-grid{ grid-template-columns:repeat(2,1fr); }
  .dd-edit-panel .ddep-crop-actions{ justify-content:stretch; }
  .dd-edit-panel .ddep-crop-actions button{ flex:1; }
}

@media (max-width: 360px){
  .dd-edit-panel{ padding:12px; gap:10px; }
  .dd-edit-panel .ddep-section{ padding:10px; }
  .dd-edit-panel .ddep-icon-grid{ grid-template-columns:repeat(5,1fr); gap:4px; }
  .dd-edit-panel .ddep-act-row{ grid-template-columns:1fr auto; }
  .dd-edit-panel .ddep-act-row select{ grid-column: 1 / -1; }
  .dd-edit-panel .ddep-color-grid{ grid-template-columns:1fr; }
  .dd-edit-panel .ddep-row-body{ gap:6px; }
  .dd-edit-panel input.ddep-color-text{ width:88px; }
  .dd-edit-panel .ddep-pill{ padding:8px 12px; font-size:12px; }
  .dd-edit-panel .ddep-pill-visual{ padding:8px 10px; }
}

/* ----- touch device floors (always apply on coarse-pointer regardless of viewport) ----- */
@media (pointer: coarse){
  .dd-edit-panel .ddep-pill{ min-height:44px; padding:10px 16px; }
  .dd-edit-panel .ddep-pill-visual{ min-height:44px; }
  .dd-edit-panel .ddep-radio{ min-height:44px; padding:10px 14px; }
  .dd-edit-panel .ddep-swatch{ width:32px; height:32px; }
  .dd-edit-panel .ddep-suggest{ gap:8px; }
  .dd-edit-panel .ddep-chip-del{ font-size:18px; }
  .dd-edit-panel .ddep-act-del{ font-size:18px; }
  .dd-edit-panel input[type="color"].ddep-color{ width:48px; height:48px; }
  .dd-edit-panel input.ddep-color-text{ min-height:44px; padding:10px 12px; }
  .dd-edit-panel .ddep-check{ padding:10px 0; }
  .dd-edit-panel .ddep-check input[type="checkbox"]{ width:22px; height:22px; }
  .dd-edit-panel .ddep-icon{ min-width:48px; min-height:48px; }
}

/* ----- accessibility: reduced motion ----- */
@media (prefers-reduced-motion: reduce){
  .dd-edit-panel,
  .dd-edit-panel *,
  .dd-edit-panel *::before,
  .dd-edit-panel *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* DD-CB-V3.1 2026-06-12: native dropdown LIST was white-on-white on Windows — force dark. */
.dd-edit-panel select.ddep-text, .dd-edit-panel .ddep-act-row select{ color-scheme:dark; }
.dd-edit-panel select option, .dd-edit-panel select optgroup{ background:#0d0d10; color:#f0f0f0; }