/* ── Chat floating button ─────────────────────────────── */
.mn-chat-fab{
  position:fixed;bottom:20px;right:88px;z-index:900;
  width:48px !important;height:48px !important;
  min-width:48px !important;min-height:48px !important;
  max-width:48px !important;max-height:48px !important;
  border-radius:9999px;border:none;
  background:#6366f1;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(99,102,241,.4);
  transition:transform .15s,background .15s;
  font-size:16px !important;
}
.mn-chat-fab:active{transform:scale(.92)}
.mn-chat-fab svg{width:22px;height:22px}

.mn-chat-badge{
  position:absolute;top:-2px;right:-2px;
  min-width:18px;height:18px;padding:0 5px;
  background:#ef4444;color:#fff;border-radius:9999px;
  font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  line-height:1;pointer-events:none;
}
.mn-chat-badge:empty{display:none}

/* ── Chat panel ──────────────────────────────────────── */
.mn-chat-panel{
  position:fixed;bottom:0;right:0;z-index:910;
  width:100%;max-width:24rem;height:70dvh;max-height:36rem;
  background:#0f172a;border:1px solid rgba(148,163,184,.12);
  border-radius:1rem 1rem 0 0;
  display:flex;flex-direction:column;
  transform:translateY(100%);opacity:0;pointer-events:none;
  transition:transform .25s ease,opacity .2s ease;
  box-shadow:0 -4px 24px rgba(0,0,0,.4);
}
.mn-chat-panel.open{transform:translateY(0);opacity:1;pointer-events:auto}

.mn-chat-header{
  display:flex;align-items:center;padding:.65rem .85rem;
  border-bottom:1px solid rgba(148,163,184,.1);flex-shrink:0;
}
.mn-chat-header h3{flex:1;font-size:.88rem;font-weight:600;color:#f1f5f9;margin:0}
.mn-chat-close{background:none;border:none;color:#94a3b8;cursor:pointer;padding:.3rem;border-radius:.3rem;display:flex;align-items:center;justify-content:center}
.mn-chat-close:hover{color:#f1f5f9;background:rgba(255,255,255,.06)}

.mn-chat-messages{
  flex:1;overflow-y:auto;padding:.6rem .75rem;
  display:flex;flex-direction:column;gap:.35rem;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.mn-chat-msg{
  max-width:85%;padding:.45rem .65rem;border-radius:.7rem;
  font-size:.82rem;line-height:1.4;word-break:break-word;
}
.mn-chat-msg.me{
  align-self:flex-end;background:#6366f1;color:#fff;
  border-bottom-right-radius:.15rem;
}
.mn-chat-msg.other{
  align-self:flex-start;background:#1e293b;color:#e2e8f0;
  border-bottom-left-radius:.15rem;
}
.mn-chat-msg .mn-chat-sender{
  font-size:.65rem;font-weight:600;color:rgba(255,255,255,.55);
  margin-bottom:.15rem;display:block;
}
.mn-chat-msg.other .mn-chat-sender{color:#818cf8}
.mn-chat-msg .mn-chat-time{
  font-size:.58rem;color:rgba(255,255,255,.35);
  margin-top:.15rem;display:block;text-align:right;
}

.mn-chat-empty{
  flex:1;display:flex;align-items:center;justify-content:center;
  color:#64748b;font-size:.82rem;text-align:center;padding:2rem;
}

/* ── Chat input ──────────────────────────────────────── */
.mn-chat-input-bar{
  display:flex;gap:.4rem;padding:.55rem .65rem;
  border-top:1px solid rgba(148,163,184,.1);flex-shrink:0;
  background:#0b1120;border-radius:0 0 0 0;
}
.mn-chat-input{
  flex:1;padding:.5rem .65rem;background:#020617;
  border:1px solid rgba(148,163,184,.12);border-radius:.5rem;
  color:#f1f5f9;font-size:.84rem;outline:none;resize:none;
  max-height:4rem;min-height:2.2rem;line-height:1.35;
  font-family:inherit;
}
.mn-chat-input:focus{border-color:#6366f1}
.mn-chat-input::placeholder{color:#64748b}
.mn-chat-send{
  width:2.4rem;height:2.4rem;border-radius:.5rem;border:none;
  background:#6366f1;color:#fff;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s;
}
.mn-chat-send:hover{background:#818cf8}
.mn-chat-send:disabled{opacity:.4;cursor:not-allowed}
.mn-chat-send svg{width:1.1rem;height:1.1rem}

/* ── Global toast notification ───────────────────────── */
.mn-chat-toast{
  position:fixed;top:12px;left:50%;transform:translateX(-50%) translateY(-120%);
  z-index:9999;max-width:92vw;width:max-content;
  background:linear-gradient(135deg,rgba(99,102,241,.97),rgba(79,70,229,.97));
  backdrop-filter:blur(12px);
  color:#fff;padding:12px 18px;border-radius:12px;
  font-size:15px;font-weight:500;line-height:1.4;
  box-shadow:0 8px 32px rgba(99,102,241,.5),0 2px 8px rgba(0,0,0,.3);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .25s ease;opacity:0;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.15);
}
.mn-chat-toast.show{
  transform:translateX(-50%) translateY(0);opacity:1;
  pointer-events:auto;cursor:pointer;
}
.mn-chat-toast .toast-sender{font-weight:700;margin-right:6px}

/* Hide React's built-in chat notification toast */
#root > div > .fixed.inset-x-0.top-2 {
  display: none !important;
}

/* ── Collapse / Expand toggle ────────────────────────── */
.mn-fab-collapse{
  position:fixed;bottom:2px;right:21px;z-index:950;
  width:24px !important;height:24px !important;
  min-width:24px !important;min-height:24px !important;
  max-width:24px !important;max-height:24px !important;
  border-radius:9999px;border:none;
  background:rgba(30,41,59,.85);color:#94a3b8;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);
  border:1px solid rgba(148,163,184,.15);
  transition:transform .15s,background .15s,color .15s;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  font-size:16px !important;
}
.mn-fab-collapse:active{transform:scale(.88)}
.mn-fab-collapse:hover{background:rgba(30,41,59,.95);color:#e2e8f0}
.mn-fab-collapse svg{width:12px;height:12px}

/* Collapsed state: hide floating buttons */
body.mn-fabs-collapsed [data-testid="readability-toggle"],
body.mn-fabs-collapsed [data-testid="bandwidth-toggle"],
body.mn-fabs-collapsed .mn-chat-fab{
  transform:scale(0) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:transform .2s ease,opacity .15s ease !important;
}

/* Expanded state: arrow rotates */
body:not(.mn-fabs-collapsed) .mn-fab-collapse svg{
  transform:rotate(180deg);
}

/* Hide collapse button when chat panel is open */
.mn-chat-panel.open ~ .mn-fab-collapse{display:none !important}
body.mn-chat-open .mn-fab-collapse{display:none !important}

@media(min-width:640px){
  .mn-chat-panel{right:.75rem;bottom:.75rem;border-radius:1rem;height:32rem}
  .mn-chat-fab{bottom:24px;right:88px}
  .mn-fab-collapse{bottom:4px;right:24px}
}