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

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-card: #ffffff;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.dark {
  --bg-primary: #0f0f1a;
  --bg-secondary: #111827;
  --bg-card: #1f2937;
  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --border: #374151;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: background 0.3s, color 0.3s;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* ── Safe Areas (iPhone notch / Dynamic Island) ─────────────────────────────── */
@supports (padding: max(0px)) {
  .safe-bottom { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
  .safe-top    { padding-top: max(0px, env(safe-area-inset-top)); }
  .pb-safe     { padding-bottom: max(5rem, calc(env(safe-area-inset-bottom) + 5rem)); }
}

/* ── Scrollbar ───────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #6366f1; border-radius: 9999px; }

/* ── Glass morphism ──────────────────────────────────────────────────────────── */
.glass {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12);
}
.dark .glass {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ── Gradient text ───────────────────────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn-primary {
  @apply px-5 py-2.5 rounded-xl font-semibold text-white text-sm transition-all duration-200;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  box-shadow: 0 4px 15px rgba(99,102,241,0.35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,0.45); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-secondary {
  @apply px-5 py-2.5 rounded-xl font-semibold text-sm transition-all duration-200 border;
  border-color: var(--border);
  color: var(--text-primary);
  background: var(--bg-card);
}
.btn-secondary:hover { border-color: #6366f1; color: #6366f1; }
.btn-secondary:active { transform: scale(0.97); }

.btn-ghost {
  @apply px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200;
  color: var(--text-secondary);
}
.btn-ghost:hover { background: rgba(99,102,241,0.1); color: #6366f1; }
.btn-ghost:active { transform: scale(0.97); }

.btn-danger {
  @apply px-4 py-2 rounded-lg font-medium text-sm text-red-500 transition-all duration-200;
}
.btn-danger:hover { background: rgba(239,68,68,0.1); }

/* ── Cards ───────────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s;
}
@media (hover: hover) {
  .card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
}

/* ── Progress bar ────────────────────────────────────────────────────────────── */
.progress-bar { height: 6px; border-radius: 9999px; background: var(--border); overflow: hidden; }
.progress-fill {
  height: 100%; border-radius: 9999px;
  background: linear-gradient(90deg, #6366f1, #a855f7, #6366f1);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
  transition: width 0.5s ease;
}

/* ── Message bubbles ─────────────────────────────────────────────────────────── */
.msg-user {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: white;
  border-radius: 18px 18px 4px 18px;
  padding: 12px 16px;
  max-width: 78%;
  margin-left: auto;
  box-shadow: 0 4px 12px rgba(99,102,241,0.3);
}
.msg-ai {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 18px 18px 18px 4px;
  padding: 12px 16px;
  max-width: 78%;
  box-shadow: var(--shadow);
}

/* ── Input ───────────────────────────────────────────────────────────────────── */
.input-field {
  @apply w-full px-4 py-3 rounded-xl text-sm outline-none transition-all duration-200;
  background: var(--bg-secondary);
  border: 1.5px solid var(--border);
  color: var(--text-primary);
}
.input-field:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }

/* ── Status badges ───────────────────────────────────────────────────────────── */
.badge-active    { @apply px-2.5 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400; }
.badge-pending   { @apply px-2.5 py-1 rounded-full text-xs font-semibold bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400; }
.badge-completed { @apply px-2.5 py-1 rounded-full text-xs font-semibold bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400; }

/* ── Typing indicator ────────────────────────────────────────────────────────── */
.typing-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6366f1; display: inline-block;
  animation: bounceDot 1.4s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* ── Skeleton loading ────────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, var(--bg-secondary) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* ── Voice wave bars ─────────────────────────────────────────────────────────── */
.wave-bar {
  width: 3px;
  border-radius: 9999px;
  transform-origin: bottom;
  animation: wave 0.5s ease-in-out infinite;
}
@keyframes wave {
  0%, 100% { transform: scaleY(0.25); }
  50%       { transform: scaleY(1); }
}

/* ── Voice button glow ───────────────────────────────────────────────────────── */
.voice-glow {
  animation: voiceGlow 2s ease-in-out infinite;
}
@keyframes voiceGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.5), 0 8px 32px rgba(99,102,241,0.4); }
  50%       { box-shadow: 0 0 0 16px rgba(99,102,241,0), 0 8px 32px rgba(99,102,241,0.4); }
}

/* ── Bottom sheet ────────────────────────────────────────────────────────────── */
.bottom-sheet {
  border-radius: 24px 24px 0 0;
  background: var(--bg-card);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.2);
}

/* ── Touch target ────────────────────────────────────────────────────────────── */
.touch-target { min-width: 44px; min-height: 44px; }

/* ── No hover on touch devices ───────────────────────────────────────────────── */
@media (hover: none) {
  .btn-primary:hover, .btn-secondary:hover, .card:hover { transform: none; box-shadow: var(--shadow); }
}

/* ── Active states for mobile ────────────────────────────────────────────────── */
.active\:scale-95:active { transform: scale(0.95); }

/* ── Keyframes ───────────────────────────────────────────────────────────────── */
@keyframes fadeUp    { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp   { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes scaleIn   { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes shimmer   { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes bounceDot { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
@keyframes spin      { to { transform: rotate(360deg); } }
@keyframes pulse     { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes voicePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50%       { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(239,68,68,0); }
}
@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  25%       { transform: scale(1.2) rotate(90deg); opacity: 0.8; }
  50%       { transform: scale(0.9) rotate(180deg); opacity: 1; }
  75%       { transform: scale(1.1) rotate(270deg); opacity: 0.9; }
}

.animate-fade-up    { animation: fadeUp 0.5s ease forwards; }
.animate-scale-in   { animation: scaleIn 0.3s ease forwards; }
.animate-voice-pulse{ animation: voicePulse 1.5s ease-in-out infinite; }
.animate-sparkle    { animation: sparkle 1.5s ease-in-out infinite; }
.animate-spin-slow  { animation: spin 1s linear infinite; }
.animate-pulse-slow { animation: pulse 2s ease-in-out infinite; }

/* ── Mobile bottom nav spacing ───────────────────────────────────────────────── */
.has-bottom-nav { padding-bottom: 72px; }

/* ── Swipeable card ──────────────────────────────────────────────────────────── */
.swipe-actions {
  position: absolute; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center;
  transform: translateX(100%);
  transition: transform 0.2s ease;
}

/* ── Offline banner ──────────────────────────────────────────────────────────── */
.offline-banner {
  background: #ef4444;
  color: white;
  text-align: center;
  padding: 6px;
  font-size: 12px;
  font-weight: 600;
}

/* ── Mobile message padding ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .msg-user, .msg-ai { max-width: 88%; }
  .mobile-voice-space { padding-bottom: 120px; }
}

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-card: #ffffff;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.dark {
  --bg-primary: #0f0f1a;
  --bg-secondary: #111827;
  --bg-card: #1f2937;
  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --border: #374151;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: background 0.3s, color 0.3s;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #6366f1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #4f46e5; }

/* Glass morphism */
.glass {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12);
}

.dark .glass {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Buttons */
.btn-primary {
  @apply px-5 py-2.5 rounded-xl font-semibold text-white text-sm transition-all duration-200;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  box-shadow: 0 4px 15px rgba(99,102,241,0.35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,0.45); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-secondary {
  @apply px-5 py-2.5 rounded-xl font-semibold text-sm transition-all duration-200 border;
  border-color: var(--border);
  color: var(--text-primary);
  background: var(--bg-card);
}
.btn-secondary:hover { border-color: #6366f1; color: #6366f1; }

.btn-ghost {
  @apply px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200;
  color: var(--text-secondary);
}
.btn-ghost:hover { background: rgba(99,102,241,0.1); color: #6366f1; }

.btn-danger {
  @apply px-4 py-2 rounded-lg font-medium text-sm text-red-500 transition-all duration-200;
}
.btn-danger:hover { background: rgba(239,68,68,0.1); }

/* Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.12); }

/* Progress bar */
.progress-bar {
  height: 6px;
  border-radius: 9999px;
  background: var(--border);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #6366f1, #a855f7, #6366f1);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
  transition: width 0.5s ease;
}

/* Message bubbles */
.msg-user {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: white;
  border-radius: 18px 18px 4px 18px;
  padding: 12px 16px;
  max-width: 75%;
  margin-left: auto;
  box-shadow: 0 4px 12px rgba(99,102,241,0.3);
}
.msg-ai {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 18px 18px 18px 4px;
  padding: 12px 16px;
  max-width: 75%;
  box-shadow: var(--shadow);
}

/* Input */
.input-field {
  @apply w-full px-4 py-3 rounded-xl text-sm outline-none transition-all duration-200;
  background: var(--bg-secondary);
  border: 1.5px solid var(--border);
  color: var(--text-primary);
}
.input-field:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }

/* Status badges */
.badge-active { @apply px-2.5 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400; }
.badge-pending { @apply px-2.5 py-1 rounded-full text-xs font-semibold bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400; }
.badge-completed { @apply px-2.5 py-1 rounded-full text-xs font-semibold bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400; }

/* Typing indicator */
.typing-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #6366f1;
  display: inline-block;
  animation: bounceDot 1.4s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }