/* ===========================================================
   Noby Widget — styles
   Self-contained. Reuses noBUSYness's own design tokens where
   possible (falls back to sane defaults if the host page hasn't
   defined them), so it drops into the existing light-theme site
   without looking bolted on.
   =========================================================== */

.noby-widget-root {
  --noby-brand:        var(--brand, #0d1117);
  --noby-brand-hover:  var(--brand-hover, #1e293b);
  --noby-ink:          var(--ink, #0f172a);
  --noby-ink-muted:    var(--ink-muted, #475569);
  --noby-surface:      var(--surface, #ffffff);
  --noby-surface-2:    var(--surface-2, #f8fafc);
  --noby-border:       var(--border, #e2e8f0);
  --noby-shadow-md:    var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06));
  --noby-shadow-xl:    var(--shadow-xl, 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04));
  --noby-font: 'Plus Jakarta Sans', system-ui, sans-serif;

  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999999;
  font-family: var(--noby-font);
  font-weight: 500;
  line-height: 1.5;
}

.noby-widget-root, .noby-widget-root * , .noby-widget-root *::before, .noby-widget-root *::after {
  box-sizing: border-box;
}

/* ---------- Bubble ---------- */
.noby-bubble {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--noby-brand);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--noby-shadow-md);
  transition: background 0.15s ease, transform 0.15s ease;
}
.noby-bubble:hover { background: var(--noby-brand-hover); transform: translateY(-2px); }
.noby-bubble svg { width: 26px; height: 26px; }

/* ---------- Attention-getting hop ---------- */
@keyframes noby-attention {
  0%   { transform: translateY(0) scale(1) rotate(0deg); }
  10%  { transform: translateY(-5px) scale(1.03) rotate(-1deg); }
  20%  { transform: translateY(-2px) scale(1.01) rotate(1deg); }
  30%  { transform: translateY(-4px) scale(1.02) rotate(-1deg); }
  40%  { transform: translateY(0) scale(1) rotate(0deg); }
  50%  { transform: translateY(-3px) scale(1.02) rotate(1deg); }
  60%  { transform: translateY(-1px) scale(1.01) rotate(0deg); }
  70%  { transform: translateY(-3px) scale(1.01) rotate(-1deg); }
  85%  { transform: translateY(0) scale(1) rotate(0deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}
.noby-bubble.noby-attention {
  animation: noby-attention 1.1s ease-in-out;
}

.noby-bubble .noby-unread-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid #fff;
  display: none;
}
.noby-bubble.has-unread .noby-unread-dot { display: block; }

/* ---------- Proactive popup bubble ---------- */
.noby-teaser {
  position: absolute;
  bottom: 74px;
  right: 0;
  max-width: 240px;
  background: var(--noby-surface);
  border: 1px solid var(--noby-border);
  border-radius: 14px 14px 4px 14px;
  padding: 12px 14px;
  font-size: 0.85rem;
  color: var(--noby-ink);
  box-shadow: var(--noby-shadow-md);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.noby-teaser.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.noby-teaser button.noby-teaser-close {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--noby-surface);
  border: 1px solid var(--noby-border);
  color: var(--noby-ink-muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Chat window ---------- */
.noby-window {
  position: absolute;
  bottom: 74px;
  right: 0;
  width: 360px;
  max-width: calc(100vw - 40px);
  height: 520px;
  max-height: calc(100vh - 120px);
  background: var(--noby-surface);
  border: 1px solid var(--noby-border);
  border-radius: 16px;
  box-shadow: var(--noby-shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.noby-window.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.noby-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--noby-brand);
  color: #fff;
  flex-shrink: 0;
}
.noby-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.noby-header-text { flex: 1; min-width: 0; }
.noby-header-name { font-weight: 700; font-size: 0.95rem; }
.noby-header-status { font-size: 0.75rem; opacity: 0.8; display: flex; align-items: center; gap: 5px; }
.noby-header-status .dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; display: inline-block; }
.noby-close {
  background: none; border: none; color: #fff; opacity: 0.8; cursor: pointer;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; flex-shrink: 0;
}
.noby-close:hover { opacity: 1; background: rgba(255,255,255,0.1); }

.noby-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--noby-surface-2);
}

.noby-msg { max-width: 82%; font-size: 0.88rem; }
.noby-msg-bubble {
  padding: 10px 13px;
  border-radius: 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.noby-msg.bot { align-self: flex-start; }
.noby-msg.bot .noby-msg-bubble {
  background: var(--noby-surface);
  border: 1px solid var(--noby-border);
  color: var(--noby-ink);
  border-bottom-left-radius: 4px;
}
.noby-msg.user { align-self: flex-end; }
.noby-msg.user .noby-msg-bubble {
  background: var(--noby-brand);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.noby-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-self: flex-start;
  max-width: 100%;
}
.noby-quick-reply {
  background: var(--noby-surface);
  border: 1px solid var(--noby-border);
  color: var(--noby-ink);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.noby-quick-reply:hover { border-color: var(--noby-ink-muted); }

.noby-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 12px 14px;
  background: var(--noby-surface);
  border: 1px solid var(--noby-border);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.noby-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--noby-ink-muted);
  opacity: 0.5;
  animation: noby-bounce 1.2s infinite ease-in-out;
}
.noby-typing span:nth-child(2) { animation-delay: 0.15s; }
.noby-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes noby-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.noby-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--noby-border);
  background: var(--noby-surface);
  flex-shrink: 0;
}
.noby-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--noby-border);
  border-radius: 10px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--noby-ink);
  max-height: 90px;
  outline: none;
}
.noby-input:focus { border-color: var(--noby-ink-muted); }
.noby-send {
  background: var(--noby-brand);
  color: #fff;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.noby-send:hover { background: var(--noby-brand-hover); }
.noby-send:disabled { opacity: 0.5; cursor: default; }
.noby-send svg { width: 16px; height: 16px; }

.noby-footnote {
  text-align: center;
  font-size: 0.7rem;
  color: var(--noby-ink-muted);
  padding: 6px 10px 10px;
  background: var(--noby-surface);
}

@media (max-width: 480px) {
  .noby-widget-root { right: 12px; bottom: 12px; }
  .noby-window { width: calc(100vw - 24px); right: -8px; height: calc(100vh - 100px); }
}