/* demo-chat-sim.css — widget de chat simulado (mock visual, sem backend) */
.chat-sim-fab{
  position:fixed; bottom:22px; right:92px; width:58px; height:58px; border-radius:50%;
  background:#5B3DF5; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(91,61,245,.35); z-index:60; border:none; cursor:pointer;
}
.chat-sim-fab svg{ width:28px; height:28px; color:#fff; }
.chat-sim-fab__badge{
  position:absolute; top:-4px; right:-4px; width:16px; height:16px; border-radius:50%;
  background:#ff5a5a; border:2px solid #fff; font-size:0;
}

.chat-sim-window{
  position:fixed; bottom:92px; right:22px; width:340px; max-width:calc(100vw - 32px);
  height:460px; max-height:calc(100vh - 130px); background:#fff; border-radius:16px;
  box-shadow:0 20px 50px rgba(15,20,30,.25); z-index:61; display:none; flex-direction:column;
  overflow:hidden; font-family:'Segoe UI',Arial,sans-serif;
}
.chat-sim-window.open{ display:flex; }

.chat-sim-header{
  background:#5B3DF5; color:#fff; padding:14px 16px; display:flex; align-items:center; gap:10px;
}
.chat-sim-header__avatar{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.chat-sim-header__avatar svg{ width:18px; height:18px; }
.chat-sim-header__info{ flex:1; min-width:0; }
.chat-sim-header__name{ font-weight:700; font-size:.88rem; }
.chat-sim-header__status{ font-size:.72rem; opacity:.85; display:flex; align-items:center; gap:5px; }
.chat-sim-header__status::before{ content:""; width:7px; height:7px; border-radius:50%; background:#4ade80; }
.chat-sim-close{ background:none; border:none; color:#fff; cursor:pointer; min-width:44px; min-height:44px; display:grid; place-items:center; padding:4px; opacity:.85; }
.chat-sim-close:hover{ opacity:1; }

.chat-sim-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:#f4f5f8; }
.chat-sim-msg{ max-width:82%; padding:9px 13px; border-radius:14px; font-size:.85rem; line-height:1.45; animation:chatSimIn .25s ease; }
.chat-sim-msg--bot{ background:#fff; color:#1c2733; align-self:flex-start; border-bottom-left-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.chat-sim-msg--user{ background:#5B3DF5; color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.chat-sim-typing{ align-self:flex-start; background:#fff; border-radius:14px; border-bottom-left-radius:4px; padding:11px 14px; box-shadow:0 1px 2px rgba(0,0,0,.06); display:flex; gap:4px; }
.chat-sim-typing span{ width:6px; height:6px; border-radius:50%; background:#b7bdc9; animation:chatSimDot 1.1s infinite ease-in-out; }
.chat-sim-typing span:nth-child(2){ animation-delay:.15s; }
.chat-sim-typing span:nth-child(3){ animation-delay:.3s; }

.chat-sim-options{ display:flex; flex-direction:column; gap:6px; padding:0 14px 14px; background:#f4f5f8; }
.chat-sim-option{
  background:#fff; border:1px solid #e2e6ec; color:#5B3DF5; font-weight:600; font-size:.8rem;
  min-height:44px; padding:9px 12px; border-radius:10px; text-align:left; cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.chat-sim-option:hover{ border-color:#5B3DF5; background:#f6f4ff; }

.chat-sim-footer{ padding:10px 14px; border-top:1px solid #eef0f4; font-size:.72rem; color:#9aa2b1; text-align:center; }

@keyframes chatSimIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
@keyframes chatSimDot{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }

@media (max-width:480px){
  .chat-sim-window{ right:16px; bottom:86px; width:calc(100vw - 32px); height:min(70vh,520px); }
  .chat-sim-fab{ right:84px; }
}