/* =====================================================
   DORY CHAT WIDGET - chat.css
   Não edite manualmente — gerado pelo Painel Admin
   ===================================================== */
:root {
  --dc-cor: #e63329;
  --dc-cor2: #c0281f;
  --dc-bg: #f5f6fa;
  --dc-raio: 16px;
  --dc-w: 340px;
  --dc-h: 520px;
}
#dc-bubble {
  position: fixed; bottom: 28px; right: 28px;
  width: 64px; height: 64px;
  background: var(--dc-cor);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,.28);
  z-index: 2147483646;
  transition: transform .2s, box-shadow .2s;
  border: none; outline: none;
}
#dc-bubble:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0,0,0,.32); }
#dc-bubble img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
#dc-bubble-emoji { font-size: 28px; line-height: 1; }
#dc-badge {
  position: absolute; top: -4px; right: -4px;
  background: #22c55e; color: #fff;
  border-radius: 50%; width: 18px; height: 18px;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
#dc-window {
  position: fixed; bottom: 102px; right: 28px;
  width: var(--dc-w); max-height: var(--dc-h);
  background: #fff;
  border-radius: var(--dc-raio);
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  display: none; flex-direction: column;
  z-index: 2147483645;
  overflow: hidden;
  font-family: 'Segoe UI', Arial, sans-serif;
  animation: dcUp .25s ease;
}
#dc-window.dc-open { display: flex; }
@keyframes dcUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
#dc-header {
  background: var(--dc-cor);
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  color: #fff; flex-shrink: 0;
}
#dc-av-wrap { display:flex; align-items:center; gap:10px; }
#dc-avatar {
  width: 44px; height: 44px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; overflow: hidden; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.4);
}
#dc-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
#dc-name { font-weight:700; font-size:15px; line-height:1.2; }
#dc-status { font-size:11px; opacity:.85; margin-top:2px; }
#dc-status::before { content:'● '; color:#86efac; }
#dc-close {
  background:none; border:none; color:#fff;
  font-size:20px; cursor:pointer; padding:0; line-height:1;
  opacity:.8; transition:opacity .15s;
}
#dc-close:hover { opacity:1; }
#dc-msgs {
  flex:1; overflow-y:auto; padding:14px;
  display:flex; flex-direction:column; gap:10px;
  background:var(--dc-bg); min-height:0;
}
#dc-msgs::-webkit-scrollbar { width:4px; }
#dc-msgs::-webkit-scrollbar-thumb { background:#ddd; border-radius:4px; }
.dc-msg {
  max-width:84%; padding:10px 14px;
  border-radius:14px; font-size:14px;
  line-height:1.5; word-wrap:break-word;
  text-align:left;
  animation: dcMsg .2s ease;
}
@keyframes dcMsg { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.dc-msg.dc-bot {
  background:#fff; align-self:flex-start;
  border-bottom-left-radius:4px;
  box-shadow:0 1px 4px rgba(0,0,0,.08); color:#333;
}
.dc-msg.dc-user {
  background:var(--dc-cor); color:#fff;
  align-self:flex-end; border-bottom-right-radius:4px;
}
.dc-typing { display:flex; gap:5px; align-items:center; padding:12px 14px !important; }
.dc-dot { width:8px; height:8px; background:#bbb; border-radius:50%; animation:dcBounce 1s infinite; }
.dc-dot:nth-child(2){animation-delay:.15s} .dc-dot:nth-child(3){animation-delay:.3s}
@keyframes dcBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }
#dc-opts {
  display:flex; flex-wrap:wrap; gap:6px;
  padding:8px 14px 4px; background:var(--dc-bg); flex-shrink:0;
}
.dc-opt {
  background:#fff; border:1.5px solid var(--dc-cor);
  color:var(--dc-cor); border-radius:14px;
  padding:6px 13px; font-size:12px; cursor:pointer;
  transition:all .15s; font-family:inherit;
  max-width:100%; white-space:normal; word-break:break-word;
  text-align:left; line-height:1.35;
}
.dc-opt:hover { background:var(--dc-cor); color:#fff; }
#dc-input-area {
  display:flex; padding:10px 12px;
  border-top:1px solid #eee; gap:8px;
  background:#fff; flex-shrink:0; align-items:center;
}
#dc-input {
  flex:1; border:1.5px solid #ddd;
  border-radius:20px; padding:8px 14px;
  font-size:14px; outline:none;
  transition:border .15s; font-family:inherit;
}
#dc-input:focus { border-color:var(--dc-cor); }
#dc-send {
  background:var(--dc-cor); color:#fff;
  border:none; border-radius:50%;
  width:38px; height:38px; font-size:16px;
  cursor:pointer; transition:background .15s;
  flex-shrink:0; display:flex;
  align-items:center; justify-content:center;
}
#dc-send:hover { background:var(--dc-cor2); }
#dc-powered {
  text-align:center; padding:4px 0 6px;
  font-size:10px; color:#bbb;
  background:#fff; flex-shrink:0;
}
#dc-powered a { color:#bbb; text-decoration:none; }
@media(max-width:420px){
  #dc-window{width:calc(100vw - 16px);right:8px;bottom:88px;}
  #dc-bubble{bottom:16px;right:16px;}
}
/* ========== WhatsApp handoff ========== */
#dc-wa-bar {
  padding: 8px 12px 0;
  background: var(--dc-bg);
  flex-shrink: 0;
}
#dc-wa-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
  box-shadow: 0 2px 6px rgba(37,211,102,.25);
}
#dc-wa-btn:hover { background: #1ebe57; }
.dc-opt-wa {
  background: #25D366 !important;
  color: #fff !important;
  border-color: #25D366 !important;
  font-weight: 600;
}
.dc-opt-wa:hover {
  background: #1ebe57 !important;
  border-color: #1ebe57 !important;
}

/* ========== Rich content em mensagens do bot ========== */
.dc-link {
  color: var(--dc-cor);
  text-decoration: underline;
  word-break: break-all;
}
.dc-link:hover { opacity: .8; }
.dc-msg-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin: 4px 0;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.dc-msg-wa-btn:hover { background: #1ebe57; }

/* ========== Botão tipo "link externo" ========== */
.dc-opt-link {
  background: #fff !important;
  border: 1.5px solid #475569 !important;
  color: #475569 !important;
  font-weight: 600;
}
.dc-opt-link:hover {
  background: #475569 !important;
  color: #fff !important;
}
.dc-opt-link::before {
  content: '🌐 ';
  margin-right: 2px;
}

/* ========== Botões inline (dentro do balão) ========== */
.dc-bot-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;
  gap: 6px;
  max-width: 100%;
  width: 100%;
  margin: 0;
}
.dc-bot-group .dc-msg.dc-bot {
  margin: 0;
}
.dc-opts-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 84%;
  padding: 0 4px;
  margin: 0;
}
.dc-opts-inline:empty { display: none; }

/* Estado inativo: botões de turnos antigos */
.dc-opts-disabled .dc-opt {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
  filter: grayscale(0.6);
}

/* ========== Prompt input form (input livre dentro do balão) ========== */
.dc-prompt-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
  max-width: 84%;
}
.dc-prompt-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.dc-prompt-row label {
  color: #475569;
  min-width: 70px;
  font-weight: 500;
}
.dc-prompt-form input[type=text] {
  flex: 1;
  padding: 5px 10px;
  border: 1.5px solid #cbd5e1;
  border-radius: 14px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.dc-prompt-form input[type=text]:focus {
  border-color: var(--dc-cor);
}
.dc-prompt-form input[type=text]:disabled {
  background: #f1f5f9;
  color: #94a3b8;
}
