/* ==========================================================================
   BARBEROS VIP LUXURY DESIGN SYSTEM
   Palette: Obsidian Black (#08080A), Champagne Gold (#C0C0C0), Bone (#F8F9FA)
   ========================================================================== */

:root {
  --color-obsidian-darker: #060608;
  --color-obsidian: #0c0c10;
  --color-obsidian-card: rgba(18, 18, 24, 0.75);
  --color-silver-400: #D1D5DB;
  --color-silver-500: #C0C0C0;
  --color-silver-600: #9CA3AF;
  --color-silver-900: #374151;
  --color-bone: #f8f9fa;
  --color-bone-muted: #9ba1a6;
}

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

body {
  background-color: var(--color-obsidian);
  color: var(--color-bone);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow-x: hidden;
  background-image: 
    radial-gradient(at 0% 0%, rgba(192, 192, 192, 0.04) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(156, 163, 175, 0.04) 0px, transparent 50%);
  background-attachment: fixed;
}

h1, h2, h3, h4, .font-serif {
  font-family: 'Cormorant Garamond', serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-obsidian-darker);
}
::-webkit-scrollbar-thumb {
  background: rgba(192, 192, 192, 0.3);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(192, 192, 192, 0.6);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Colors & Gradients */
.text-gradient-silver {
  background: linear-gradient(135deg, #E5E7EB 0%, #C0C0C0 50%, #9CA3AF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-obsidian {
  background-color: var(--color-obsidian);
}
.bg-obsidian-darker {
  background-color: var(--color-obsidian-darker);
}

/* Glassmorphism Cards */
.glass-card {
  background: var(--color-obsidian-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(192, 192, 192, 0.2);
}

.glass-card:hover {
  border-color: rgba(192, 192, 192, 0.45);
  box-shadow: 0 10px 30px -10px rgba(192, 192, 192, 0.15);
}

/* Premium Buttons */
.btn-silver {
  background: linear-gradient(135deg, #E5E7EB 0%, #C0C0C0 60%, #9e6d19 100%);
  color: #060608;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-silver:hover {
  background: linear-gradient(135deg, #ffffff 0%, #D1D5DB 60%, #9CA3AF 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(192, 192, 192, 0.35);
}

.btn-silver-outline {
  background: rgba(192, 192, 192, 0.05);
  color: var(--color-silver-400);
  border: 1px solid rgba(192, 192, 192, 0.4);
  transition: all 0.3s ease;
}

.btn-silver-outline:hover {
  background: rgba(192, 192, 192, 0.15);
  border-color: var(--color-silver-400);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(192, 192, 192, 0.2);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(192, 192, 192, 0.5);
  color: var(--color-silver-400);
}

/* Navigation Links */
.nav-link {
  position: relative;
  color: #e5e7eb;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--color-silver-400);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* Animations */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-slide-up {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Chat Message Bubbles */
.chat-bubble-user {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.2) 0%, rgba(156, 163, 175, 0.25) 100%);
  border: 1px solid rgba(192, 192, 192, 0.4);
  color: #F3F4F6;
  border-radius: 18px 18px 2px 18px;
}

.chat-bubble-ai {
  background: rgba(14, 14, 18, 0.9);
  border: 1px solid rgba(192, 192, 192, 0.2);
  color: #f3f4f6;
  border-radius: 18px 18px 18px 2px;
}

.appointment-badge {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}

/* Mobile Safe Areas (iPhone notch / home bar) */
.safe-top {
  padding-top: max(1rem, env(safe-area-inset-top));
}
.safe-bottom {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

/* Prevent iOS rubber-band bouncing inside chat */
#chatMessages {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Mobile: prevent zoom on input focus (iOS zoom on <16px inputs) */
@media (max-width: 639px) {
  #chatInput {
    font-size: 16px !important; /* Prevents iOS auto-zoom */
  }
  #chatWindow {
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
  }
}