/*
 * theme.css — MemorieAI Design System
 *
 * Injected into host pages via manifest.json content_scripts.css.
 * Also linked from sidepanel.html and widget.html.
 *
 * All rules targeting #mai-* / .mai-* use !important because this
 * stylesheet competes with the host page's own CSS on every site the
 * extension runs on. !important is required, not incidental.
 *
 * Extension pages (sidepanel, widget) are not affected by host page CSS,
 * but the !important declarations are harmless in those contexts.
 *
 * Font note: --mai-font is set to a system font stack here. Extension
 * pages override it with 'Comfortaa' in their own :root after loading
 * the font from Google Fonts.
 */

/* ─── Design Tokens ─────────────────────────────────────────────────────── */

:root {
  /* Colors — tonal blue family */
  --mai-command-blue:   #004488;
  --mai-meridian-blue:  #0077cc;
  --mai-active-blue:    #3b82f6;
  --mai-signal-cyan:    #22d3ee;

  /* Colors — surfaces */
  --mai-surface-white:       #ffffff;
  --mai-surface-near-white:  #fafafa;
  --mai-surface-fog:         #f0f2f5;
  --mai-surface-light:       #f9fafb;
  --mai-surface-dark:        #0a0a0a;

  /* Colors — ink */
  --mai-ink:            #111827;
  --mai-ink-dim:        #6b7280;
  --mai-ink-faint:      #9ca3af;

  /* Colors — borders */
  --mai-border-subtle:  #e5e7eb;
  --mai-border-dark:    rgba(255, 255, 255, 0.08);

  /* Colors — status */
  --mai-success:        #10b981;
  --mai-warning:        #ff9500;
  --mai-error:          #b91c1c;
  --mai-error-surface:  #fee2e2;

  /* Gradients */
  --mai-gradient:           linear-gradient(135deg, #3b82f6 0%, #22d3ee 100%);
  --mai-gradient-soft:      linear-gradient(135deg, rgba(59,130,246,.08) 0%, rgba(34,211,238,.08) 100%);
  --mai-gradient-authority: linear-gradient(135deg, #004488 0%, #0077cc 100%);

  /* Shadows */
  --mai-shadow-nano:    0 1px 3px rgba(0,0,0,0.02);
  --mai-shadow-micro:   0 2px 8px rgba(0,0,0,0.03);
  --mai-shadow-soft:    0 4px 20px rgba(0,0,0,0.05);
  --mai-shadow-ambient: 0 4px 24px rgba(0,0,0,0.06);
  --mai-shadow-hover:   0 12px 40px rgba(0,0,0,0.08);
  --mai-shadow-strong:  0 20px 60px rgba(0,0,0,0.25);
  --mai-shadow-blue:    0 4px 12px rgba(59,130,246,0.25);
  --mai-shadow-blue-lg: 0 8px 32px rgba(59,130,246,0.2);

  /* Border radii */
  --mai-radius-sm:   10px;
  --mai-radius-md:   14px;
  --mai-radius-lg:   20px;
  --mai-radius-xl:   24px;
  --mai-radius-pill: 100px;

  /* Spacing */
  --mai-space-xs: 6px;
  --mai-space-sm: 12px;
  --mai-space-md: 20px;
  --mai-space-lg: 36px;
  --mai-space-xl: 60px;

  /* Typography — safe system font (host pages) */
  --mai-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;

  /* Z-index scale */
  --mai-z-bubble:  2147483647;
  --mai-z-toast:   2147483646;
  --mai-z-ticker:  2147483646;
  --mai-z-overlay: 9998;

  /* Easing */
  --mai-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ─── Animations ─────────────────────────────────────────────────────────── */

@keyframes mai-breathe {
  0%, 100% { box-shadow: 0 4px 24px rgba(0,0,0,.4); }
  50%       { box-shadow: 0 4px 24px rgba(0,0,0,.4), 0 0 0 3px rgba(0,122,255,.15); }
}

@keyframes mai-spin {
  to { transform: rotate(360deg); }
}

@keyframes mai-liquid-morph {
  0%   { border-radius: 4px; }
  20%  { border-radius: 40% 20% 50% 10% / 20% 55% 20% 55%; }
  40%  { border-radius: 20% 55% 15% 50% / 50% 15% 55% 20%; }
  60%  { border-radius: 55% 15% 40% 40% / 20% 55% 15% 60%; }
  80%  { border-radius: 15% 60% 20% 55% / 55% 20% 60% 15%; }
  100% { border-radius: 4px; }
}

@keyframes mai-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.85); }
}

@keyframes mai-tick-in {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ─── Bubble Container ───────────────────────────────────────────────────── */

#mai-wrap {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  z-index: var(--mai-z-bubble) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  pointer-events: none !important;
  font-family: var(--mai-font) !important;
}

#mai-wrap.mai-hidden { display: none !important; }

/* ─── Speech Bubble ──────────────────────────────────────────────────────── */

#mai-speech {
  background: rgba(0,0,0,.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  color: rgba(255,255,255,.9) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 7px 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  max-width: 220px !important;
  text-align: center !important;
  letter-spacing: -.1px !important;
  opacity: 0 !important;
  transform: translateY(6px) !important;
  transition: opacity .25s, transform .25s !important;
  pointer-events: none !important;
}

#mai-speech.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ─── Main Button ────────────────────────────────────────────────────────── */

#mai-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.88) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.05) inset !important;
  cursor: pointer !important;
  pointer-events: all !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -1px !important;
  position: relative !important;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s !important;
  animation: mai-breathe 4s ease-in-out infinite !important;
  user-select: none !important;
}

#mai-btn:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 6px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(0,122,255,.4), 0 1px 0 rgba(255,255,255,.05) inset !important;
}

#mai-btn::after {
  content: '' !important;
  position: absolute !important;
  inset: -3px !important;
  border-radius: 50% !important;
  border: 1.5px solid transparent !important;
  border-top-color: rgba(0,122,255,.8) !important;
  opacity: 0 !important;
  transition: opacity .15s !important;
}

/* ─── Button State Classes ───────────────────────────────────────────────── */

#mai-wrap.processing #mai-btn::after {
  opacity: 1 !important;
  animation: mai-spin .7s linear infinite !important;
}

#mai-wrap.processing #mai-btn { animation: none !important; }

#mai-wrap.listening #mai-btn {
  box-shadow: 0 0 0 2px rgba(0,122,255,.6), 0 4px 24px rgba(0,0,0,.4) !important;
  animation: none !important;
}

#mai-wrap.success #mai-btn {
  box-shadow: 0 0 0 2px rgba(52,199,89,.7), 0 0 20px rgba(52,199,89,.2) !important;
  transition: box-shadow .3s !important;
}

#mai-wrap.error #mai-btn {
  box-shadow: 0 0 0 2px rgba(255,59,48,.7), 0 0 20px rgba(255,59,48,.2) !important;
  transition: box-shadow .3s !important;
}

/* ─── Close Button ───────────────────────────────────────────────────────── */

#mai-close {
  position: absolute !important;
  top: -3px !important;
  right: -3px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: rgba(255,255,255,.7) !important;
  font-size: 8px !important;
  cursor: pointer !important;
  pointer-events: all !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
}

#mai-btn:hover + #mai-close,
#mai-close:hover { display: flex !important; }

/* ─── Tooltip ────────────────────────────────────────────────────────────── */

#mai-tip {
  position: absolute !important;
  right: 56px !important;
  bottom: 14px !important;
  background: rgba(0,0,0,.85) !important;
  backdrop-filter: blur(16px) !important;
  color: rgba(255,255,255,.7) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .2s !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  letter-spacing: -.1px !important;
}

#mai-btn:hover ~ #mai-tip { opacity: 1 !important; }

/* ─── Toast Notification ─────────────────────────────────────────────────── */

#mai-toast {
  position: fixed !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-4px) !important;
  z-index: var(--mai-z-toast) !important;
  background: rgba(0,0,0,.88) !important;
  backdrop-filter: blur(20px) !important;
  color: rgba(255,255,255,.9) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 8px 18px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  opacity: 0 !important;
  transition: opacity .25s, transform .25s !important;
  font-family: var(--mai-font) !important;
  pointer-events: none !important;
  letter-spacing: -.1px !important;
}

#mai-toast.show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

#mai-toast.ok   { border-color: rgba(52,199,89,.4) !important;  color: rgba(52,199,89,1) !important; }
#mai-toast.fail { border-color: rgba(255,59,48,.4) !important;  color: rgba(255,59,48,1) !important; }

/* ─── Teleprompter Ticker ─────────────────────────────────────────────────── */

#mai-ticker {
  position: fixed !important;
  bottom: 96px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: var(--mai-z-ticker) !important;
  background: rgba(0,0,0,.9) !important;
  backdrop-filter: blur(24px) !important;
  color: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  max-width: 560px !important;
  width: 88vw !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.6) !important;
  font-family: var(--mai-font) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  animation: mai-tick-in .3s cubic-bezier(.34,1.56,.64,1) !important;
}

#mai-ticker-text  { flex: 1 !important; }
#mai-ticker-btns  { display: flex !important; flex-direction: column !important; gap: 4px !important; flex-shrink: 0 !important; }

/* ─── Ticker Buttons ─────────────────────────────────────────────────────── */

.mai-tbtn {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.5) !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  width: 26px !important;
  height: 26px !important;
  font-size: 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s !important;
}

.mai-tbtn:hover { background: rgba(255,255,255,.15) !important; }

/* ─── Word Ticker Items ───────────────────────────────────────────────────── */

.mai-w     { display: inline !important; opacity: 0 !important; transition: opacity .1s !important; }
.mai-w.on  { opacity: 1 !important; }

/* ─── Liquid Highlight Overlay ───────────────────────────────────────────── */

.mai-liquid-overlay {
  position: fixed !important;
  pointer-events: none !important;
  z-index: var(--mai-z-overlay) !important;
  background: rgba(0,122,255,.06) !important;
  border: 1.5px solid rgba(0,122,255,.75) !important;
  border-radius: 4px !important;
  animation: mai-liquid-morph 1.8s ease-in-out 2 !important;
  box-shadow: 0 0 0 4px rgba(0,122,255,.06), 0 0 24px rgba(0,122,255,.12) !important;
  transition: opacity .4s !important;
}