/* EDUBOTMX bot.css - Widget de chat flotante */
:root {
  --bot-accent: #f97316;
  --bot-accent2: #ef4444;
  --bot-bg: #0f1923;
  --bot-surface: #1a2535;
  --bot-border: #243044;
  --bot-text: #f1f5f9;
  --bot-muted: #64748b;
  --bot-user-bg: #1e3a2a;
  --bot-msg-bg: #141f2e;
  --bot-radius: 18px;
  --bot-shadow: 0 24px 64px rgba(0,0,0,.5), 0 0 0 1px rgba(249,115,22,.15);
}

#bot-fab {
  position: fixed; bottom: 28px; right: 28px;
  width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(135deg, var(--bot-accent), var(--bot-accent2));
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(249,115,22,.45);
  z-index: 9998;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  animation: fab-in .6s cubic-bezier(.34,1.56,.64,1) .8s both;
}
@keyframes fab-in { from { transform: scale(0) rotate(-180deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
#bot-fab:hover { transform: scale(1.1); box-shadow: 0 12px 40px rgba(249,115,22,.6); }
#bot-fab svg { width: 28px; height: 28px; fill: #fff; }
#bot-fab.open svg.ic-chat { display: none; }
#bot-fab:not(.open) svg.ic-close { display: none; }
#bot-fab .badge {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; background: #22c55e;
  border-radius: 50%; border: 2px solid var(--bot-bg);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } }

#bot-window {
  position: fixed; bottom: 104px; right: 28px;
  width: 380px; height: 560px; max-height: calc(100dvh - 120px);
  background: var(--bot-bg); border-radius: var(--bot-radius);
  border: 1px solid var(--bot-border); box-shadow: var(--bot-shadow);
  display: flex; flex-direction: column; overflow: hidden;
  z-index: 9999; transform-origin: bottom right;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s;
}
#bot-window.hidden { transform: scale(.85) translateY(20px); opacity: 0; pointer-events: none; }

#bot-header { background: var(--bot-surface); border-bottom: 1px solid var(--bot-border); padding: 14px 16px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
#bot-avatar { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--bot-accent), var(--bot-accent2)); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
#bot-header-info h3 { font-size: 14px; font-weight: 700; color: var(--bot-text); }
#bot-header-info p { font-size: 11px; color: #22c55e; display: flex; align-items: center; gap: 4px; margin-top: 1px; }
#bot-header-info p::before { content: ''; width: 6px; height: 6px; background: #22c55e; border-radius: 50%; display: inline-block; animation: pulse 2s infinite; }
#bot-close { margin-left: auto; background: transparent; border: 1px solid var(--bot-border); color: var(--bot-muted); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all .2s; flex-shrink: 0; }
#bot-close:hover { background: var(--bot-border); color: var(--bot-text); }

#bot-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
#bot-messages::-webkit-scrollbar { width: 3px; }
#bot-messages::-webkit-scrollbar-thumb { background: var(--bot-border); border-radius: 3px; }

.bot-msg { display: flex; gap: 8px; max-width: 88%; animation: msg-in .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
.bot-msg.user { margin-left: auto; flex-direction: row-reverse; }
.bot-msg-av { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; margin-top: 2px; }
.bot-msg.bot .bot-msg-av { background: linear-gradient(135deg, var(--bot-accent), var(--bot-accent2)); }
.bot-msg.user .bot-msg-av { background: var(--bot-user-bg); border: 1px solid var(--bot-border); }
.bot-bubble { padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.bot-msg.bot .bot-bubble { background: var(--bot-msg-bg); border: 1px solid var(--bot-border); border-top-left-radius: 4px; color: var(--bot-text); }
.bot-msg.user .bot-bubble { background: var(--bot-user-bg); border: 1px solid rgba(34,197,94,.2); border-top-right-radius: 4px; color: var(--bot-text); }
.bot-bubble strong { color: var(--bot-accent); }

.bot-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bot-chip { background: transparent; border: 1px solid var(--bot-border); color: var(--bot-accent); padding: 5px 12px; border-radius: 999px; font-size: 11px; cursor: pointer; transition: all .2s; font-family: inherit; }
.bot-chip:hover { background: var(--bot-accent); color: #000; border-color: var(--bot-accent); }

.bot-typing .bot-bubble { display: flex; gap: 4px; align-items: center; padding: 12px 16px; }
.bot-dot { width: 6px; height: 6px; background: var(--bot-accent); border-radius: 50%; animation: bounce 1.2s infinite; }
.bot-dot:nth-child(2) { animation-delay: .2s; }
.bot-dot:nth-child(3) { animation-delay: .4s; }
@keyframes bounce { 0%,80%,100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-5px); opacity: 1; } }

#bot-input-area { padding: 12px 14px; background: var(--bot-surface); border-top: 1px solid var(--bot-border); display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; }
#bot-input { flex: 1; background: var(--bot-bg); border: 1px solid var(--bot-border); border-radius: 12px; color: var(--bot-text); font-size: 13px; font-family: inherit; padding: 10px 14px; resize: none; outline: none; min-height: 40px; max-height: 100px; line-height: 1.5; transition: border-color .2s; }
#bot-input:focus { border-color: var(--bot-accent); }
#bot-input::placeholder { color: var(--bot-muted); }
#bot-send { width: 40px; height: 40px; background: linear-gradient(135deg, var(--bot-accent), var(--bot-accent2)); border: none; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .2s, transform .1s; flex-shrink: 0; }
#bot-send:hover { opacity: .85; }
#bot-send:active { transform: scale(.92); }
#bot-send:disabled { opacity: .35; cursor: not-allowed; }
#bot-send svg { width: 17px; height: 17px; fill: #fff; }

@media (max-width: 480px) {
  #bot-window { bottom: 0; right: 0; width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; border: none; }
  #bot-fab { bottom: 20px; right: 20px; }
}