/* DL Chat Simulator v3.2 */
.dl-sim,.dl-chat-flow,.dl-chat-journey{
  --wa-bg:#ECE5DD;--wa-header:#075E54;--wa-bot:#fff;--wa-user:#DCF8C6;
  --wa-text:#111b21;--wa-time:#667781;
  --app-bg:#f0eff4;--app-header:#1e1c24;--app-bot:#fff;
  --app-user:#bdb8e0;--app-text:#1e1c24;
  --purple:#5F529E;--purple-2:#8b84c4;--purple-3:#bdb8e0;
  --green:#7aab94;--dark:#1e1c24;--c2:#F2F1EE;
  --border:#dddbe8;--muted:#5a5865;--mid:#9998a0;
  --sans:'DM Sans',system-ui,sans-serif;
}

/* ── Device ── */
.dl-sim { display:flex; justify-content:center; padding:2rem 1rem; --dl-w:280px; }
.dl-sim__device {
  width:var(--dl-w); max-width:100%;
  border-radius:38px; overflow:hidden;
  box-shadow:0 0 0 4px #1a1a1a,0 0 0 5px #2c2c2c,0 20px 40px rgba(0,0,0,.35);
  display:flex; flex-direction:column; min-height:560px;
  background:var(--wa-bg);
}
.dl-sim[data-channel="app"] .dl-sim__device { background:var(--app-bg); }

/* Status bar */
.dl-sim__statusbar {
  background:rgba(0,0,0,.16); padding:12px 18px 5px;
  display:flex; justify-content:space-between;
  font-size:10px; color:rgba(255,255,255,.9); flex-shrink:0;
}
.dl-sim[data-channel="app"] .dl-sim__statusbar { background:rgba(30,28,36,.9); }

/* Header */
.dl-sim__header { display:flex; align-items:center; gap:8px; padding:10px 12px; flex-shrink:0; }
.dl-sim__header--whatsapp { background:var(--wa-header); color:#fff; }
.dl-sim__header--app { background:var(--app-header); color:#E8E6E0; border-bottom:.5px solid rgba(255,255,255,.06); }
.dl-sim__header-back { opacity:.8; flex-shrink:0; }
.dl-sim__header-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dl-sim__header-avatar--whatsapp { background:#25D366; color:#fff; }
.dl-sim__header-avatar--app { background:var(--purple); color:#fff; }
.dl-sim__header-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.dl-sim__header-name { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-sim__header-status { font-size:9.5px; opacity:.75; display:flex; align-items:center; gap:4px; }
.dl-sim__dot { width:5px; height:5px; border-radius:50%; background:#25D366; display:inline-block; }
.dl-sim__header--app .dl-sim__dot { background:var(--green); }
.dl-sim__header-menu { display:flex; flex-direction:column; gap:3px; padding:4px; opacity:.7; flex-shrink:0; }
.dl-sim__header-menu span { display:block; width:3px; height:3px; border-radius:50%; background:currentColor; }

/* Body */
.dl-sim__body {
  flex:1; overflow-y:auto; padding:10px 8px;
  display:flex; flex-direction:column; gap:3px;
  scroll-behavior:smooth;
}
.dl-sim__body--whatsapp { background:var(--wa-bg); }
.dl-sim__body--app { background:var(--app-bg); }

/* Mensagens */
.dl-sim__msg { display:flex; align-items:flex-end; gap:5px; max-width:82%; animation:dl-in .2s ease forwards; }
@keyframes dl-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.dl-sim__msg--bot,.dl-sim__msg--human,.dl-sim__msg--specialist { align-self:flex-start; }
.dl-sim__msg--user { align-self:flex-end; flex-direction:row-reverse; }

/* Mensagens ocultas — invisíveis até ação do botão */
.dl-sim__msg--hidden,
[data-dl-hidden="1"] {
  display:none !important;
}

/* Avatares */
.dl-sim__msg-avatar { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:500; flex-shrink:0; color:#fff; }
.dl-sim__msg-avatar--human { background:var(--green); }
.dl-sim__msg-avatar--specialist { background:var(--purple-2); }

/* Balões */
.dl-sim__bubble { border-radius:0 10px 10px 10px; padding:7px 9px 4px; font-size:12px; line-height:1.45; max-width:100%; }
.dl-sim__msg--bot .dl-sim__bubble,
.dl-sim__msg--human .dl-sim__bubble,
.dl-sim__msg--specialist .dl-sim__bubble { background:var(--wa-bot); color:var(--wa-text); box-shadow:0 1px 1px rgba(0,0,0,.08); }
.dl-sim[data-channel="app"] .dl-sim__msg--bot .dl-sim__bubble,
.dl-sim[data-channel="app"] .dl-sim__msg--human .dl-sim__bubble,
.dl-sim[data-channel="app"] .dl-sim__msg--specialist .dl-sim__bubble { background:var(--app-bot); color:var(--app-text); border:.5px solid var(--border); }
.dl-sim__msg--user .dl-sim__bubble { background:var(--wa-user); color:var(--wa-text); border-radius:10px 0 10px 10px; }
.dl-sim[data-channel="app"] .dl-sim__msg--user .dl-sim__bubble { background:var(--app-user); color:var(--dark); }
.dl-sim__msg--human .dl-sim__bubble { border-left:2px solid var(--green); }
.dl-sim__msg--specialist .dl-sim__bubble { border-left:2px solid var(--purple-2); }
.dl-sim__bubble p { margin:0 0 2px; font-size:inherit; }
.dl-sim__bubble p:last-of-type { margin-bottom:0; }
.dl-sim__bubble li { margin-left:.875rem; font-size:inherit; line-height:1.4; }
.dl-sim__ts { display:block; text-align:right; font-size:9px; color:var(--wa-time); margin-top:2px; opacity:.8; }

/* Sistema */
.dl-sim__system { align-self:center; background:rgba(0,0,0,.06); border-radius:8px; padding:3px 9px; font-size:10.5px; color:var(--muted); text-align:center; margin:3px 0; max-width:80%; }

/* ── Opções / Botões de ação ── */
.dl-sim__options { display:flex; flex-direction:column; gap:5px; align-self:flex-end; max-width:90%; margin:3px 0; }

.dl-sim__option {
  background:transparent;
  border:1px solid var(--wa-header);
  color:var(--wa-header);
  border-radius:18px;
  padding:7px 14px;
  font-size:12px;
  cursor:pointer;
  transition:all .2s;
  text-align:center;
  width:100%;
  font-family:var(--sans);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.dl-sim[data-channel="app"] .dl-sim__option { border-color:var(--purple); color:var(--purple); }
.dl-sim__option:hover { background:var(--wa-header); color:#fff; }
.dl-sim[data-channel="app"] .dl-sim__option:hover { background:var(--purple); color:#fff; }
.dl-sim__option.dl-selected { opacity:.4; cursor:default; pointer-events:none; }

/* Ícone de ação dentro do botão */
.dl-opt-icon {
  font-size:11px;
  opacity:.7;
  flex-shrink:0;
}

/* Botão com ação de link — leve diferenciação visual */
.dl-sim__option[data-action="link"],
.dl-sim__option[data-action="link_new"] {
  border-style:dashed;
}

/* Botão com ação de tab — cor levemente diferente */
.dl-sim__option[data-action="tab"] {
  opacity:.9;
}

/* Typing */
.dl-sim__typing { align-self:flex-start; display:flex; align-items:center; gap:3px; background:var(--wa-bot); border-radius:0 10px 10px 10px; padding:9px 12px; box-shadow:0 1px 1px rgba(0,0,0,.08); }
.dl-sim__typing span { width:5px; height:5px; border-radius:50%; background:var(--muted); animation:dl-typing 1.2s ease-in-out infinite; }
.dl-sim__typing span:nth-child(2){animation-delay:.2s}
.dl-sim__typing span:nth-child(3){animation-delay:.4s}
@keyframes dl-typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* Empty */
.dl-sim__empty { text-align:center; color:var(--mid); font-size:11px; padding:2rem 1rem; }

/* Input bar decorativa */
.dl-sim__inputbar { display:flex; align-items:center; gap:7px; padding:7px 10px; flex-shrink:0; }
.dl-sim__body--whatsapp ~ .dl-sim__inputbar,
.dl-sim[data-channel="whatsapp"] .dl-sim__inputbar { background:var(--wa-bg); border-top:.5px solid rgba(0,0,0,.08); }
.dl-sim[data-channel="app"] .dl-sim__inputbar { background:var(--app-bg); border-top:.5px solid var(--border); }
.dl-sim__inputbar-field { flex:1; background:#fff; border-radius:18px; padding:7px 12px; font-size:11.5px; color:var(--mid); font-family:var(--sans); }
.dl-sim[data-channel="app"] .dl-sim__inputbar-field { border:.5px solid var(--border); }
.dl-sim__inputbar-send { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dl-sim[data-channel="whatsapp"] .dl-sim__inputbar-send { background:var(--wa-header); color:#fff; }
.dl-sim[data-channel="app"] .dl-sim__inputbar-send { background:var(--purple); color:#fff; }

/* ── Flow / Tabs ── */
.dl-chat-flow { margin:2rem 0; }
.dl-chat-block__label { font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase; color:var(--purple); margin-bottom:1rem; display:flex; align-items:center; gap:10px; font-family:var(--sans); }
.dl-chat-block__label::before { content:''; display:inline-block; width:16px; height:.5px; background:var(--purple); }
.dl-chat-flow__tabs { display:flex; flex-wrap:wrap; border-bottom:.5px solid var(--border); background:var(--c2); overflow-x:auto; }
.dl-chat-flow__tab { font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mid); padding:11px 14px; cursor:pointer; border:none; background:transparent; border-bottom:2px solid transparent; transition:all .2s; display:flex; align-items:center; gap:5px; white-space:nowrap; font-family:var(--sans); }
.dl-chat-flow__tab:hover { color:var(--purple); }
.dl-chat-flow__tab.active { color:var(--purple); border-bottom-color:var(--purple); }
.dl-chat-flow__panel { display:none; }
.dl-chat-flow__panel.active { display:block; }

/* Channel badges */
.dl-channel-badge { display:inline-flex; align-items:center; gap:3px; font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; padding:2px 7px; font-family:var(--sans); }
.dl-channel-badge--whatsapp { background:rgba(37,211,102,.1); color:#075E54; border:.5px solid rgba(37,211,102,.3); }
.dl-channel-badge--app { background:rgba(95,82,158,.08); color:var(--purple); border:.5px solid var(--purple-3); }

/* ── Journey ── */
.dl-chat-journey { margin:2rem 0; }
.dl-chat-journey__steps { display:flex; flex-direction:column; }
.dl-chat-journey__step { position:relative; padding-left:2.5rem; padding-bottom:1rem; }
.dl-chat-journey__step::before { content:''; position:absolute; left:11px; top:36px; bottom:-8px; width:.5px; background:var(--border); }
.dl-chat-journey__step:last-child::before { display:none; }
.dl-chat-journey__step-dot { position:absolute; left:0; top:24px; width:24px; height:24px; border-radius:50%; background:var(--c2); border:.5px solid var(--purple); display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--purple); z-index:1; font-family:var(--sans); }
.dl-chat-journey__step-title { font-size:1.05rem; font-weight:300; color:var(--dark); margin-bottom:.75rem; padding-top:1.5rem; font-family:var(--sans); }

/* Responsivo */
@media(max-width:480px){
  .dl-sim { --dl-w:270px; }
  .dl-sim__device { border-radius:32px; }
}