/* ============================================================
   CHATBOT — Moon Kids Store  |  assets/css/chatbot.css
   ============================================================ */

:root {
  --mk-bg        : #ffffff;
  --mk-surface   : #f3f9fb;
  --mk-surface2  : #e8f4f5;
  --mk-border    : rgba(106,197,202,.25);
  --mk-teal      : #6ac5ca;
  --mk-teal2     : #4ba3a8;
  --mk-teal-g    : linear-gradient(135deg,#6ac5ca,#4ba3a8);
  --mk-pink      : #f5c8d0;
  --mk-pink2     : #e8a0b0;
  --mk-text      : #2b3d4f;
  --mk-gray      : #607489;
  --mk-gray2     : #9db3c2;
  --mk-white     : #ffffff;
  --mk-width     : 420px;
  --mk-z         : 9000;
  --mk-shadow    : 0 8px 32px rgba(106,197,202,.18);
  --mk-transition: .35s cubic-bezier(.4,0,.2,1);
}

.mk-sidebar *,
.mk-sidebar *::before,
.mk-sidebar *::after { box-sizing:border-box; margin:0; padding:0; }

/* ============================================================
   TRIGGER
   ============================================================ */
.mk-trigger {
  position      : fixed;
  bottom        : 30px;
  right         : 30px;
  width         : 60px;
  height        : 60px;
  border-radius : 50%;
  background    : var(--mk-teal-g);
  border        : none;
  color         : #fff;
  font-size     : 24px;
  display       : flex;
  align-items   : center;
  justify-content: center;
  cursor        : pointer;
  z-index       : var(--mk-z);
  box-shadow    : var(--mk-shadow);
  transition    : transform .3s, box-shadow .3s;
}
.mk-trigger:hover { transform:scale(1.1); box-shadow:0 12px 40px rgba(106,197,202,.35); }
.mk-trigger.hidden { opacity:0; pointer-events:none; }

.mk-badge {
  position      : absolute;
  top:-4px; right:-4px;
  min-width     : 20px; height:20px;
  padding       : 0 4px;
  background    : #e74c3c;
  color         : #fff;
  font-size     : 11px; font-weight:700;
  border-radius : 10px;
  border        : 2px solid #fff;
  display       : flex; align-items:center; justify-content:center;
  opacity       : 0; transform:scale(.6);
  transition    : opacity .25s, transform .25s;
}
.mk-badge.show { opacity:1; transform:scale(1); }

/* ============================================================
   OVERLAY
   ============================================================ */
.mk-overlay {
  position:fixed; inset:0;
  background:rgba(43,61,79,.45);
  backdrop-filter:blur(3px);
  z-index:calc(var(--mk-z) + 1);
  opacity:0; pointer-events:none;
  transition:opacity var(--mk-transition);
}
.mk-overlay.show { opacity:1; pointer-events:all; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.mk-sidebar {
  position      : fixed;
  top:0; right:0;
  width         : var(--mk-width);
  height        : 100dvh;
  background    : var(--mk-bg);
  border-left   : 1px solid var(--mk-border);
  z-index       : calc(var(--mk-z) + 2);
  display       : flex;
  flex-direction: column;
  transform     : translateX(100%);
  transition    : transform var(--mk-transition);
  overflow      : hidden;
  box-shadow    : -8px 0 40px rgba(43,61,79,.1);
}
.mk-sidebar.open { transform:translateX(0); }

/* ============================================================
   HEADER
   ============================================================ */
.mk-header {
  display       : flex;
  align-items   : center;
  gap           : 10px;
  padding       : 0 14px;
  height        : 64px;
  flex-shrink   : 0;
  background    : var(--mk-teal-g);
  color         : #fff;
}

.mk-header-brand {
  display    : flex;
  align-items: center;
  gap        : 9px;
  flex-shrink: 0;
}
.mk-header-logo {
  width:36px; height:36px;
  border-radius:6px;
  border:none;
  object-fit:cover;
}
.mk-header-info { display:flex; flex-direction:column; line-height:1.2; }
.mk-header-name { font-size:14px; font-weight:700; color:#fff; }
.mk-header-status { font-size:11px; color:rgba(255,255,255,.8); display:flex; align-items:center; gap:4px; }
.mk-header-status i { font-size:7px; color:#a8f5b0; }

.mk-tabs {
  display:flex; align-items:center; gap:2px;
  flex:1; justify-content:center;
}
.mk-tab {
  background:transparent;
  border:none;
  border-bottom:2px solid transparent;
  color:rgba(255,255,255,.65);
  font-size:13px; font-weight:600;
  padding:6px 14px 5px;
  cursor:pointer;
  transition:color .2s, border-color .2s;
  white-space:nowrap;
}
.mk-tab:hover  { color:#fff; }
.mk-tab.active { color:#fff; border-bottom-color:#fff; }

.mk-header-actions {
  display:flex; gap:5px; align-items:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s;
}
.mk-header-actions.show { opacity:1; pointer-events:all; }

.mk-hbtn {
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  font-size:13px;
  padding:5px 9px;
  border-radius:7px;
  cursor:pointer;
  transition:background .2s;
}
.mk-hbtn:hover { background:rgba(255,255,255,.28); }

.mk-fechar {
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  font-size:14px;
  width:32px; height:32px;
  border-radius:8px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
  flex-shrink:0;
}
.mk-fechar:hover { background:rgba(255,255,255,.3); }

/* ============================================================
   PANELS
   ============================================================ */
.mk-panel {
  flex:1; display:flex; flex-direction:column;
  overflow:hidden; min-height:0; height:0;
}
.mk-panel[hidden] { display:none !important; }

/* ============================================================
   WELCOME
   ============================================================ */
.mk-welcome {
  flex:1; display:flex; flex-direction:column;
  overflow-y:auto; min-height:0;
}
.mk-welcome.hidden { display:none; }

.mk-welcome-hero {
  display:flex; flex-direction:column; align-items:center;
  padding:32px 24px 20px;
  background:linear-gradient(180deg,#f3f9fb 0%,#fff 100%);
  border-bottom:1px solid var(--mk-border);
}
.mk-welcome-logo {
  width:64px; height:64px; border-radius:10px;
  border:none;
  object-fit:cover; margin-bottom:12px;
  animation:mk-float 4s ease-in-out infinite;
}
@keyframes mk-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

.mk-welcome-title {
  font-size:19px; color:var(--mk-text); text-align:center; line-height:1.4;
  font-family:'Poppins',sans-serif;
}
.mk-welcome-title strong { color:var(--mk-teal2); }
.mk-welcome-sub { font-size:13px; color:var(--mk-gray); margin-top:4px; text-align:center; }

/* Opções */
.mk-welcome-opts { list-style:none; padding:8px 0; }
.mk-wopt {
  display:flex; align-items:center; gap:12px;
  padding:13px 20px;
  cursor:pointer;
  border-bottom:1px solid var(--mk-border);
  transition:background .2s, padding-left .15s;
  color:var(--mk-text);
  font-size:14px; font-weight:500;
  user-select:none;
}
.mk-wopt:last-child { border-bottom:none; }
.mk-wopt:hover { background:var(--mk-surface); padding-left:26px; }
.mk-wopt:hover .fa-chevron-right { color:var(--mk-teal); }
.mk-wopt-ic { font-size:18px; flex-shrink:0; width:24px; text-align:center; }
.mk-wopt span:nth-child(2) { flex:1; }
.mk-wopt .fa-chevron-right { font-size:11px; color:var(--mk-gray2); transition:color .2s; }

/* ============================================================
   MESSAGES
   ============================================================ */
.mk-messages {
  flex:1; overflow-y:auto;
  padding:16px 16px 8px;
  display:none; flex-direction:column; gap:4px;
  min-height:0;
  background:var(--mk-surface);
}
.mk-messages.show { display:flex; }
.mk-messages::-webkit-scrollbar { width:4px; }
.mk-messages::-webkit-scrollbar-thumb { background:var(--mk-border); border-radius:4px; }

/* Bot message */
.mk-msg-bot {
  display:flex; flex-direction:column; gap:5px;
  margin-bottom:16px;
  opacity:0; transform:translateY(10px);
  animation:mk-msg-in .5s cubic-bezier(.16,1,.3,1) forwards;
}
.mk-msg-bot-header { display:flex; align-items:center; gap:8px; }
.mk-msg-bot-logo {
  width:28px; height:28px; border-radius:6px;
  border:none; object-fit:cover; flex-shrink:0;
}
.mk-msg-bot-name { font-size:13px; font-weight:700; color:var(--mk-teal2); }
.mk-msg-bot-text {
  background:#fff;
  border:1px solid var(--mk-border);
  border-radius:4px 16px 16px 16px;
  padding:12px 15px;
  margin-left:36px;
  color:var(--mk-text);
  font-size:14px; line-height:1.7;
  box-shadow:0 2px 8px rgba(106,197,202,.08);
}
.mk-msg-bot-text strong { color:var(--mk-teal2); }
.mk-msg-bot-text a {
  color:var(--mk-teal2); text-decoration:none;
  border-bottom:1px solid rgba(75,163,168,.3);
  transition:border-color .2s;
}
.mk-msg-bot-text a:hover { border-color:var(--mk-teal2); }

/* Bot sections */
.mk-bot-title {
  display:block; font-size:14px; font-weight:700;
  color:var(--mk-teal2); margin-bottom:8px;
  padding-bottom:6px; border-bottom:2px solid var(--mk-border);
}
.mk-bot-section {
  display:block; font-size:11px; font-weight:700;
  color:var(--mk-teal); text-transform:uppercase; letter-spacing:.7px;
  margin-top:12px; margin-bottom:4px;
}
.mk-bot-item {
  display:block; font-size:14px; color:var(--mk-gray);
  line-height:1.7; padding:3px 0;
  border-bottom:1px solid rgba(106,197,202,.1);
}
.mk-bot-item:last-child { border-bottom:none; }
.mk-bot-item::before { content:'• '; color:var(--mk-teal); }

/* Suggestions */
.mk-msg-sugs {
  margin-left:36px; margin-top:8px;
}
.mk-sug-rating {
  display:flex; align-items:center; gap:8px;
  padding:0 4px 8px;
  border-bottom:1px solid var(--mk-border);
  margin-bottom:4px;
  opacity:0; animation:mk-sug-in .5s cubic-bezier(.16,1,.3,1) forwards;
}
.mk-sug-rating-lbl { font-size:12px; color:var(--mk-gray2); flex:1; }
.mk-rate-btn {
  background:transparent;
  border:1px solid var(--mk-border);
  border-radius:6px; padding:3px 10px;
  color:var(--mk-text); font-size:12px;
  cursor:pointer; transition:all .2s;
  display:flex; align-items:center; gap:4px;
}
.mk-rate-btn:hover { border-color:var(--mk-teal); }
.mk-rate-btn.positive { border-color:#27ae60; background:rgba(39,174,96,.08); color:#27ae60; }
.mk-rate-btn.negative { border-color:#e74c3c; background:rgba(231,76,60,.08); color:#e74c3c; }

.mk-sug-item {
  display:flex; align-items:center; gap:10px;
  padding:11px 4px;
  color:var(--mk-gray); font-size:13px; font-weight:500;
  cursor:pointer;
  border-bottom:1px solid var(--mk-border);
  transition:color .2s, padding-left .15s;
  user-select:none;
  opacity:0; transform:translateY(6px);
  animation:mk-sug-in .45s cubic-bezier(.16,1,.3,1) forwards;
}
.mk-sug-item:last-child { border-bottom:none; }
.mk-sug-item:hover { color:var(--mk-teal2); padding-left:8px; }
.mk-sug-item:hover .mk-sug-arrow { color:var(--mk-teal); transform:translate(2px,-2px); }
.mk-sug-arrow {
  font-size:15px; color:var(--mk-gray2);
  flex-shrink:0; transition:transform .2s, color .2s;
}

@keyframes mk-sug-in {
  0%   { opacity:0; transform:translateY(8px); }
  100% { opacity:1; transform:translateY(0); }
}

/* User message */
.mk-msg-user {
  display:flex; justify-content:flex-end;
  margin-bottom:12px;
  opacity:0; animation:mk-user-in .3s cubic-bezier(.16,1,.3,1) forwards;
}
.mk-msg-user-bubble {
  max-width:75%;
  background:var(--mk-teal-g);
  color:#fff;
  padding:10px 14px;
  border-radius:16px 16px 4px 16px;
  font-size:14px; line-height:1.6;
  word-break:break-word;
  box-shadow:0 3px 10px rgba(106,197,202,.25);
}

/* Attach bubble */
.mk-msg-user-attach { display:flex; justify-content:flex-end; margin-bottom:6px; }
.mk-attach-bubble {
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--mk-border);
  border-radius:10px; padding:8px 12px;
  color:var(--mk-gray); font-size:13px; max-width:75%;
}
.mk-attach-bubble i { color:var(--mk-teal); }

/* Thinking */
.mk-thinking { margin-bottom:14px; animation:mk-fade-in .3s ease; }
.mk-thinking-inner { display:flex; flex-direction:column; gap:6px; }
.mk-thinking-header { margin-bottom:4px; }
.mk-thinking-steps {
  display:flex; flex-direction:column; gap:5px;
  margin-left:36px;
  background:#fff; border:1px solid var(--mk-border);
  border-radius:4px 14px 14px 14px; padding:10px 14px;
}
.mk-thinking-step {
  display:flex; align-items:center; gap:8px;
  opacity:0; transform:translateY(6px);
  transition:opacity .5s, transform .5s;
}
.mk-thinking-step.visible { opacity:1; transform:translateY(0); }
.mk-thinking-icon i { font-size:12px; color:var(--mk-teal); transition:all .3s; }
.mk-thinking-step.done .mk-thinking-icon i { color:#27ae60; }
.mk-thinking-text { font-size:13px; color:var(--mk-gray); transition:color .3s; }
.mk-thinking-step.done .mk-thinking-text { color:var(--mk-gray2); text-decoration:line-through; text-decoration-color:rgba(43,61,79,.2); }

/* Contact rows */
.mk-contact-row-wrap { border-bottom:1px solid var(--mk-border); }
.mk-contact-row-wrap:last-child { border-bottom:none; }
.mk-contact-row {
  display:flex; align-items:center; gap:12px;
  padding:11px 4px;
  color:var(--mk-text); text-decoration:none;
  font-size:14px; font-weight:500;
  transition:color .2s, padding-left .15s;
}
.mk-contact-row:hover { color:var(--mk-teal2); padding-left:8px; }
.mk-contact-row i { font-size:17px; width:22px; text-align:center; flex-shrink:0; }
.mk-contact-row .fa-whatsapp  { color:#25D366; }
.mk-contact-row .fa-instagram { color:#E1306C; }

@keyframes mk-msg-in  { 0%{opacity:0;transform:translateY(12px)} 60%{opacity:1} 100%{opacity:1;transform:translateY(0)} }
@keyframes mk-user-in { 0%{opacity:0;transform:translateX(10px)} 100%{opacity:1;transform:translateX(0)} }
@keyframes mk-fade-in { from{opacity:0} to{opacity:1} }

/* ============================================================
   INPUT
   ============================================================ */
.mk-input-wrap {
  flex-shrink:0; padding:10px 14px 14px;
  border-top:1px solid var(--mk-border);
  background:#fff;
}
.mk-input-inner { display:flex; flex-direction:column; gap:7px; }

.mk-input-row {
  display:flex; align-items:center; gap:8px;
  background:var(--mk-surface);
  border:1.5px solid var(--mk-border);
  border-radius:14px; padding:8px 10px;
  transition:border-color .2s;
}
.mk-input-row:focus-within { border-color:var(--mk-teal); }

.mk-textarea {
  flex:1; background:transparent; border:none; outline:none;
  color:var(--mk-text); font-size:14px;
  font-family:'Poppins',sans-serif; line-height:1.5;
  resize:none; max-height:110px; overflow-y:auto;
  scrollbar-width:none; align-self:center; padding:0;
}
.mk-textarea::placeholder { color:var(--mk-gray2); }
.mk-textarea::-webkit-scrollbar { display:none; }

.mk-send-btn {
  width:34px; height:34px; flex-shrink:0;
  background:var(--mk-teal-g); border:none;
  border-radius:9px; color:#fff; font-size:13px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .2s, opacity .2s; align-self:center;
}
.mk-send-btn:hover { transform:scale(1.08); }
.mk-send-btn:active { transform:scale(.94); }
.mk-send-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; }

/* ============================================================
   HISTÓRICO
   ============================================================ */
.mk-hist-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--mk-border);
  flex-shrink:0; background:#fff;
}
.mk-hist-label { font-size:12px; font-weight:600; color:var(--mk-gray2); text-transform:uppercase; letter-spacing:.5px; }
.mk-hist-clear {
  display:flex; align-items:center; gap:5px;
  background:transparent; border:1px solid rgba(231,76,60,.3);
  border-radius:7px; padding:4px 10px;
  color:#e74c3c; font-size:12px; font-weight:600;
  cursor:pointer; transition:all .2s;
}
.mk-hist-clear:hover { background:rgba(231,76,60,.08); border-color:#e74c3c; }

.mk-hist-wrap { flex:1; display:flex; flex-direction:column; overflow:hidden; min-height:0; }
.mk-hist-list {
  flex:1; overflow-y:auto; padding:10px 12px;
}
.mk-hist-list::-webkit-scrollbar { width:4px; }
.mk-hist-list::-webkit-scrollbar-thumb { background:var(--mk-border); border-radius:4px; }

.mk-hist-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; height:200px; color:var(--mk-gray2);
}
.mk-hist-empty i { font-size:30px; opacity:.3; }
.mk-hist-empty p { font-size:14px; }

.mk-hist-item {
  display:flex; flex-direction:column; gap:4px;
  background:#fff; border:1px solid var(--mk-border);
  border-radius:12px; padding:12px 14px; margin-bottom:8px;
  cursor:pointer; transition:all .2s;
}
.mk-hist-item:hover { border-color:var(--mk-teal); box-shadow:0 3px 12px rgba(106,197,202,.12); }

.mk-hist-item-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mk-hist-item-title { font-size:14px; font-weight:600; color:var(--mk-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.mk-hist-item-date { font-size:11px; color:var(--mk-gray2); flex-shrink:0; }
.mk-hist-item-prev { font-size:13px; color:var(--mk-gray); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-hist-item-foot { display:flex; align-items:center; gap:6px; margin-top:2px; }
.mk-hist-badge-ativa { font-size:11px; font-weight:600; color:#27ae60; background:rgba(39,174,96,.1); border-radius:6px; padding:2px 8px; }
.mk-hist-badge-enc   { font-size:11px; color:var(--mk-gray2); background:var(--mk-surface); border-radius:6px; padding:2px 8px; }
.mk-hist-item-acts { display:flex; gap:5px; margin-left:auto; }
.mk-hist-del-btn {
  background:transparent; border:1px solid var(--mk-border);
  border-radius:6px; padding:2px 8px; font-size:12px;
  cursor:pointer; color:var(--mk-gray2); transition:all .2s;
}
.mk-hist-del-btn:hover { color:#e74c3c; border-color:#e74c3c; background:rgba(231,76,60,.06); }

.mk-hist-av-btn {
  background:transparent; border:1px solid var(--mk-border);
  border-radius:6px; padding:2px 8px; font-size:12px;
  cursor:pointer; color:var(--mk-text); transition:all .2s;
}
.mk-hist-av-btn:hover { border-color:var(--mk-teal); }
.mk-hist-av-btn.pos { border-color:#27ae60; background:rgba(39,174,96,.08); }
.mk-hist-av-btn.neg { border-color:#e74c3c; background:rgba(231,76,60,.08); }

/* Chat toolbar (conversa carregada) */
.mk-chat-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; margin-bottom:10px;
  background:#fff; border:1px solid var(--mk-border); border-radius:10px; flex-shrink:0;
}
.mk-chat-toolbar-title { font-size:13px; color:var(--mk-gray); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.mk-chat-toolbar-btn {
  background:transparent; border:1px solid rgba(231,76,60,.3);
  border-radius:7px; padding:4px 10px; color:#e74c3c;
  font-size:12px; cursor:pointer; transition:all .2s;
  display:flex; align-items:center; gap:5px; flex-shrink:0;
}
.mk-chat-toolbar-btn:hover { background:rgba(231,76,60,.08); border-color:#e74c3c; }

/* ============================================================
   MODAL
   ============================================================ */
.mk-modal-ov {
  position:fixed; inset:0;
  background:rgba(43,61,79,.55); backdrop-filter:blur(5px);
  z-index:calc(var(--mk-z) + 10);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.mk-modal-ov.show { opacity:1; pointer-events:all; }
.mk-modal {
  background:#fff; border:1px solid var(--mk-border);
  border-radius:16px; padding:26px 26px 20px;
  width:300px; max-width:90vw; text-align:center;
  transform:scale(.92); transition:transform .25s;
}
.mk-modal-ov.show .mk-modal { transform:scale(1); }
.mk-modal-icon { font-size:30px; margin-bottom:10px; display:block; }
.mk-modal h3 { font-size:16px; color:var(--mk-text); margin-bottom:7px; }
.mk-modal p  { font-size:13px; color:var(--mk-gray); margin-bottom:20px; line-height:1.5; }
.mk-modal-btns { display:flex; gap:10px; }
.mk-modal-cancel {
  flex:1; padding:9px; background:var(--mk-surface);
  border:1px solid var(--mk-border); border-radius:9px;
  color:var(--mk-gray); font-size:14px; font-weight:600;
  cursor:pointer; transition:all .2s;
}
.mk-modal-cancel:hover { color:var(--mk-text); border-color:var(--mk-teal); }
.mk-modal-confirm {
  flex:1; padding:9px;
  background:rgba(231,76,60,.1); border:1px solid #e74c3c;
  border-radius:9px; color:#e74c3c;
  font-size:14px; font-weight:600; cursor:pointer; transition:all .2s;
}
.mk-modal-confirm:hover { background:rgba(231,76,60,.2); }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:768px) {
  :root { --mk-width:100vw; }
  .mk-sidebar { border-left:none; }
  .mk-trigger { bottom:20px; right:20px; width:54px; height:54px; font-size:20px; }
  .mk-msg-bot-text { margin-left:0; }
  .mk-msg-sugs    { margin-left:0; }
  .mk-welcome-hero { padding:24px 16px 16px; }
  .mk-hbtn span { display:none; }
}