/* DL Chat Simulator v5.0 — Design System com Estética WhatsApp & Motion Sênior */
.dl-sim,.dl-chat-flow,.dl-chat-journey{
  --wa-bg:#ECE5DD;
  --wa-header:#075E54;
  --wa-header-active:#008069;
  --wa-bot:#ffffff;
  --wa-user:#d9fdd3;
  --wa-text:#111b21;
  --wa-time:#667781;
  --wa-accent:#008069;
  --wa-blue-ticks:#53bdeb;
  
  --app-bg:#f0eff4;
  --app-header:#1e1c24;
  --app-bot:#ffffff;
  --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 — proporção real de smartphone ── */
.dl-sim { display:flex; justify-content:center; padding:2rem 1rem; }

.dl-sim__device {
  width: 280px;
  max-width: 100%;
  box-shadow:
    0 0 0 4px #1a1a1a,
    0 0 0 5px #2c2c2c,
    0 20px 40px rgba(0,0,0,0.35);
  border-radius: 38px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--wa-bg);
  height: 620px;
  max-height: 85vh;
}

.dl-sim[data-channel="app"] .dl-sim__device { background: var(--app-bg); }

/* Status bar — altura real no smartphone */
.dl-sim__statusbar {
  background: rgba(0,0,0,0.15);
  padding: 12px 20px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: rgba(255,255,255,0.9);
  flex-shrink: 0;
  position: relative;
}

.dl-sim__statusbar::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 20px;
  background: #000;
  border-radius: 12px;
}

.dl-sim[data-channel="app"] .dl-sim__statusbar { background: #1e1c24; }

/* Header do Chat */
.dl-sim__header { display:flex; align-items:center; gap:8px; padding:10px 12px; flex-shrink:0; transition: background .3s ease; }
.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; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.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; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--sans); }
.dl-sim__header-status { font-size:9.5px; opacity:.85; display:flex; align-items:center; gap:4px; font-family:var(--sans); }
.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); }

/* Texto "digitando..." na barra no padrão WhatsApp */
.dl-typing-text--wa { color: #25D366; font-weight: 500; animation: dl-fade-pulse 1s infinite alternate; }
.dl-typing-text { color: var(--purple-2); font-weight: 500; animation: dl-fade-pulse 1s infinite alternate; }
@keyframes dl-fade-pulse { from { opacity: 0.7; } to { opacity: 1; } }

.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 do chat */
.dl-sim__body {
  flex:1;
  overflow-y:auto;
  padding:12px 8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  scroll-behavior:smooth;
  background-size: cover;
}

.dl-sim__body--whatsapp { background-color: var(--wa-bg); }
.dl-sim__body--app { background-color: var(--app-bg); }

/* Loading inicial */
.dl-sim__loading { display:flex; align-items:center; gap:5px; align-self:flex-start; background:var(--wa-bot); border-radius:0 10px 10px 10px; padding:9px 12px; box-shadow:0 1px 2px rgba(0,0,0,.08); margin:6px 0; }
.dl-sim[data-channel="app"] .dl-sim__loading { background:var(--app-bot); border:.5px solid var(--border); }
.dl-sim__loading span { width:5px; height:5px; border-radius:50%; background:var(--muted); animation:dl-typing 1.2s ease-in-out infinite; }
.dl-sim__loading span:nth-child(2){animation-delay:.2s}
.dl-sim__loading span:nth-child(3){animation-delay:.4s}

/* Animações de entrada de balão */
.dl-sim__msg { display:flex; align-items:flex-end; gap:5px; max-width:86%; opacity:1; }
.dl-bubble-in { animation: dl-fade-in .25s ease forwards; }
.dl-bubble-pop { animation: dl-bubble-spring .32s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

@keyframes dl-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dl-bubble-spring { 
  from { opacity: 0; transform: scale(0.85) translateY(10px); } 
  to   { opacity: 1; transform: scale(1) 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; }

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

/* Balões de fala com sombras e cantos imersivos */
.dl-sim__bubble { border-radius:0 10px 10px 10px; padding:8px 12px 6px !important; font-size:12.5px; line-height:1.4; max-width:100%; box-shadow:0 1px 1px rgba(0,0,0,.1); position: relative; }
.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); }

.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); }

/* Balão do Usuário no Padrão WhatsApp (Verde Claro) */
.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:2.5px solid var(--green); }
.dl-sim__msg--specialist .dl-sim__bubble { border-left:2.5px solid var(--purple-2); }

.dl-sim__bubble p { margin:0 0 3px !important; padding:0 !important; font-size:inherit; font-family:var(--sans); color: inherit !important; background: transparent !important; }
.dl-sim__bubble p:last-of-type { margin-bottom:0 !important; }
.dl-sim__ts { display:block; text-align:right; font-size:9px; color:var(--wa-time); margin-top:2px; opacity:.85; font-family:var(--sans); }

/* Dois Tiques Azuis Autênticos do WhatsApp */
.dl-wa-ticks { color: var(--wa-blue-ticks); font-weight: 700; letter-spacing: -1.5px; margin-right: 1px; }

.dl-sim__system { align-self:center; background:rgba(0,0,0,.08); border-radius:10px; padding:4px 10px; font-size:10.5px; color:var(--muted); text-align:center; margin:4px 0; max-width:82%; font-family:var(--sans); box-shadow: 0 1px 1px rgba(0,0,0,0.03); }

/* ─── Opções Interativas no Padrão WhatsApp (Quick Replies) ─── */
.dl-sim__options { display:flex; flex-direction:column; gap:6px; align-self:stretch; margin:6px 2px 2px; transition: all .25s ease; }

.dl-sim__option {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  color: var(--wa-accent);
  border-radius: 18px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: transform .15s, background .2s, color .2s, opacity .2s;
  text-align: center;
  width: 100%;
  font-family: var(--sans);
  line-height: 1.3;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Indicador sutil de clique no padrão WhatsApp Business */
.dl-sim__option--whatsapp::before {
  content: '↻';
  font-size: 11px;
  opacity: 0.7;
}

.dl-sim[data-channel="app"] .dl-sim__option { border-color:var(--purple-3); color:var(--purple); }
.dl-sim[data-channel="app"] .dl-sim__option::before { display: none; }

.dl-sim__option:hover:not(:disabled) { background: #f4fbf8; color: #006c58; transform: translateY(-1px); box-shadow: 0 3px 6px rgba(0,0,0,0.12); }
.dl-sim[data-channel="app"] .dl-sim__option:hover:not(:disabled) { background: var(--purple); color:#fff; }

/* Micro-Animações de Clique (Blink & Collapse) */
.dl-option-blinking {
  animation: dl-opt-blink 0.32s ease infinite;
  background: #e1f7ef !important;
  color: var(--wa-accent) !important;
  font-weight: 600;
  transform: scale(0.96);
  border-color: var(--wa-accent) !important;
}

@keyframes dl-opt-blink {
  0%   { opacity: 1; transform: scale(0.98); }
  50%  { opacity: 0.6; transform: scale(0.93); background: #c6f0de; }
  100% { opacity: 1; transform: scale(0.98); }
}

.dl-option-fadeout { opacity: 0.25; transform: scale(0.95); transition: all 0.2s ease; }
.dl-options-retiring { opacity: 0; transform: scale(0.9) translateY(-6px); max-height: 0; margin: 0; overflow: hidden; pointer-events: none; }

.dl-sim__option.dl-selected,
.dl-sim__option:disabled { cursor:default; pointer-events:none; }
.dl-sim__option:active:not(:disabled) { transform:scale(.96); }

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

/* Input bar inferior com SafeArea bottom padding & ergonomia visual sênior */
.dl-sim__inputbar { display:flex; align-items:center; gap:8px; padding:12px 18px 24px !important; flex-shrink:0; position:relative; z-index:5; width: 100%; box-sizing: border-box; }
.dl-sim__inputbar--whatsapp,.dl-sim[data-channel="whatsapp"] .dl-sim__inputbar { background:#e7e2db !important; border-top:1px solid rgba(0,0,0,.1) !important; }
.dl-sim[data-channel="app"] .dl-sim__inputbar { background:#e8e6ee !important; border-top:1px solid var(--border) !important; }

.dl-sim__inputbar-extras { display:flex; gap:6px; opacity:.7; color:var(--wa-time); align-items:center; }
.dl-sim__inputbar-extras span { font-size:17px; cursor:pointer; transition:opacity 0.2s; }
.dl-sim__inputbar-extras span:hover { opacity:1; }

.dl-sim__inputbar-field { flex:1 !important; min-height:40px !important; height:40px !important; padding:8px 16px !important; box-sizing:border-box !important; margin:0 !important; line-height:1.3 !important; background:#ffffff !important; border:1.5px solid rgba(0,0,0,0.18) !important; border-radius:999px !important; font-size:13px !important; font-weight:500 !important; color:#0f172a !important; font-family:var(--sans); box-shadow: 0 3px 8px rgba(0,0,0,0.06), inset 0 1px 3px rgba(0,0,0,0.03) !important; transition:border-color 0.2s, box-shadow 0.2s; outline:none !important; }
.dl-sim__inputbar-field::placeholder { color:#64748b !important; font-weight:400; opacity:0.9; }
.dl-sim__inputbar-field:focus { border-color:var(--wa-accent) !important; box-shadow: 0 0 0 3px rgba(0,128,105,0.18), inset 0 1px 2px rgba(0,0,0,0.03) !important; }
.dl-sim[data-channel="app"] .dl-sim__inputbar-field:focus { border-color:var(--purple) !important; box-shadow: 0 0 0 3px rgba(95,82,158,0.18) !important; }

.dl-sim__inputbar-send { width:40px !important; min-width:40px !important; height:40px !important; min-height:40px !important; padding:0 !important; margin:0 !important; border-radius:50% !important; border:none !important; cursor:pointer; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; box-sizing:border-box !important; transition:transform .2s cubic-bezier(0.17, 0.89, 0.32, 1.28), opacity .2s, box-shadow .2s; box-shadow: 0 3px 8px rgba(0,0,0,0.25) !important; }
.dl-sim[data-channel="whatsapp"] .dl-sim__inputbar-send, .dl-sim__inputbar--whatsapp .dl-sim__inputbar-send { background:#008069 !important; color:#fff !important; }
.dl-sim[data-channel="app"] .dl-sim__inputbar-send { background:var(--purple) !important; color:#fff !important; }
.dl-sim__inputbar-send:hover { opacity:1; transform: scale(1.08) !important; box-shadow: 0 5px 12px rgba(0,0,0,0.35) !important; }

/* Typing na área de rolagem */
.dl-sim__typing { align-self:flex-start; display:flex; align-items:center; gap:3.5px; background:var(--wa-bot); border-radius:0 10px 10px 10px; padding:10px 13px; box-shadow:0 1px 2px rgba(0,0,0,.1); margin:4px 0; }
.dl-sim__typing span { width:5.5px; height:5.5px; border-radius:50%; background:var(--wa-accent); animation:dl-typing-bounce 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-bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}

/* ── Flow / Tabs in Segmented Control Style ── */
.dl-chat-flow { margin:1rem 0 2.5rem; }
.dl-chat-block__label { font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--purple); margin-bottom:0.85rem; display:flex; align-items:center; gap:10px; font-family:var(--sans); }
.dl-chat-block__label::before { content:''; display:inline-block; width:16px; height:1.5px; background:var(--purple); }
.dl-chat-flow__tabs { display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center; border:1px solid var(--border); border-radius:18px; padding:6px; background:rgba(240, 239, 244, 0.6); margin-bottom:1.25rem; }
.dl-chat-flow__tab { font-size:.70rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:#475569; padding:8px 14px; cursor:pointer; border:1px solid #e2e8f0; border-radius:12px; background:#ffffff; box-shadow:0 1px 3px rgba(0,0,0,0.04); transition:all .2s; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-family:var(--sans); }
.dl-chat-flow__tab:hover { background:#f8fafc; color:#0f172a; border-color:#cbd5e1; transform:translateY(-1px); }
.dl-chat-flow__tab.active { background:#1e1c26 !important; border-color:#1e1c26 !important; color:#ffffff !important; font-weight:600; box-shadow:0 6px 16px -3px rgba(0,0,0,0.3) !important; }
.dl-chat-flow__tab.active .dl-channel-badge { background:rgba(255,255,255,0.2) !important; color:#fff !important; border-color:transparent !important; }
.dl-chat-flow__panel { display:none; }
.dl-chat-flow__panel.active { display:block; }

/* ── Journey ── */
.dl-chat-journey { margin:1rem 0 2.5rem; }
.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.1rem; font-weight:300; color:var(--dark); margin-bottom:.75rem; padding-top:1.5rem; }

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

@media(max-width:480px) {
  .dl-sim__device { width:260px; border-radius:32px; min-height:500px; }
  .dl-chat-flow__tabs { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; }
}

.dl-sim { --dl-device-width: 280px; }
.dl-sim__device { width: var(--dl-device-width) !important; }
.dl-journey-block-editor { padding: 1rem; }