@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Global Reset ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  background: transparent;
  color: #e8e5ff;
  overflow: hidden;
  user-select: none;
}

/* ── Glassmorphism Variables ─────────────────────────── */
:root {
  --glass-bg:      rgba(14, 12, 28, 0.88);
  --glass-border:  rgba(124, 110, 247, 0.25);
  --glass-blur:    20px;
  --accent:        #7c6ef7;
  --accent-light:  #a599f9;
  --accent-glow:   rgba(124,110,247,0.3);
  --danger:        #ff5c7c;
  --success:       #4ade80;
  --text-primary:  #e8e5ff;
  --text-muted:    rgba(232,229,255,0.5);
  --radius:        16px;
}

/* ── Root Container ──────────────────────────────────── */
.sidebar-root {
  width: 350px;
  height: 700px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ── Drag Region ─────────────────────────────────────── */
.drag-region {
  --wails-draggable: drag;
  cursor: grab;
}
.drag-region:active { cursor: grabbing; }

/* ── Scrollbar ───────────────────────────────────────── */
.results-scroll::-webkit-scrollbar { width: 4px; }
.results-scroll::-webkit-scrollbar-track { background: transparent; }
.results-scroll::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

/* ── Card ────────────────────────────────────────────── */
.result-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px;
  transition: all 0.2s ease;
  cursor: pointer;
  animation: slideIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.result-card:hover {
  background: rgba(124,110,247,0.12);
  border-color: rgba(124,110,247,0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px var(--accent-glow);
}
.result-card:active { transform: translateY(0); }

/* ── Copy Toast ──────────────────────────────────────── */
.copy-toast {
  animation: fadeIn 0.15s ease, fadeOut 0.15s ease 0.85s forwards;
}
@keyframes fadeOut   { to { opacity: 0; transform: translateY(-4px); } }
@keyframes fadeIn    { from { opacity: 0; transform: translateY(4px); } }
@keyframes slideIn   { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastIn   { from { opacity:0; transform:translateY(12px) scale(0.95); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes dropIn    { from { opacity:0; transform:translateY(-6px) scale(0.98); } to { opacity:1; transform:translateY(0) scale(1); } }

.animate-toast-in { animation: toastIn 0.2s cubic-bezier(0.34,1.56,0.64,1); }
.animate-fade-in  { animation: dropIn 0.15s ease; }

/* ── Input ───────────────────────────────────────────── */
.search-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: var(--text-primary);
  outline: none;
  width: 100%;
  padding: 10px 14px 10px 38px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.search-input::placeholder { color: var(--text-muted); }

/* ── AI Panel ────────────────────────────────────────── */
.ai-panel {
  background: rgba(124,110,247,0.07);
  border: 1px solid rgba(124,110,247,0.2);
  border-radius: 12px;
  padding: 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-primary);
  min-height: 80px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Gradient Orbs ───────────────────────────────────── */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.18;
  z-index: 0;
}
.orb-purple { width:200px; height:200px; background:#7c6ef7; top:-60px; right:-60px; }
.orb-blue   { width:160px; height:160px; background:#38bdf8; bottom:-40px; left:-40px; }