@import url('https://cdn.jsdelivr.net/npm/tailwindcss@3.4.1/lib/css/preflight.min.css');

/* Primary teal gradient variables */
:root {
  --ai-gradient-light-start: #04c4b6;
  --ai-gradient-light-end: #039991;
  --ai-gradient-hover-start: #03a898;
  --ai-gradient-hover-end: #028074;
}

/* ===== Global Font Stack (match Tailwind v4 default) ===== */
html {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Soft Shadows / Badges (common utilities) ===== */
.shadow-soft { box-shadow: 0 6px 24px -8px rgba(15,23,42,.12); }
.shadow-glow {
  box-shadow:
    0 0 0 1px rgba(99,102,241,.12),
    0 10px 36px -12px rgba(59,130,246,.45);
}
.code-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  padding: 2px 6px; border-radius: 6px;
  border: 1px solid rgba(148,163,184,.6);
  background: #f8fafc; color: #475569;
}

/* ===== App Icon (rounded square, brand gradient, subtle gloss) ===== */
.app-icon {
  position: relative;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 22%;
  background-image: linear-gradient(135deg, var(--ai-gradient-light-start), var(--ai-gradient-light-end));
  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.14),
    0 2px 6px rgba(15, 23, 42, 0.08),
    inset 0 0 0 0.5px rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.18);
  overflow: hidden;
}
.app-icon::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 140% at 20% 10%, rgba(255,255,255,.22), rgba(255,255,255,0) 50%);
  pointer-events: none;
  mix-blend-mode: soft-light;
}
.app-icon__letter {
  line-height: 1;
  color: #fff;
  font-weight: 400;
  text-shadow: 0 1px 1px rgba(2,6,23,.18);
  transform: translateY(1px);
  letter-spacing: -0.01em;
}

/* Hover/focus affordance when used as a button/link */
a.app-icon, button.app-icon {
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
a.app-icon:hover, button.app-icon:hover { transform: translateY(-1px); }
a.app-icon:focus-visible, button.app-icon:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255,255,255,1),
    0 0 0 4px rgba(2, 132, 199, .34),
    0 10px 24px rgba(15, 23, 42, 0.18);
}

/* ===== Logo wordmark helpers ===== */
.logo-i { position: relative; display: inline-block; }
.logo-i::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 0.28em; height: 0.18em; border-radius: 9999px;
  top: -0.18em;
  background-image: linear-gradient(135deg, var(--ai-gradient-light-start), var(--ai-gradient-light-end));
}

/* ===== Glossy icon badge base (Apple-like, saturated, clean) ===== */
.icon-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  aspect-ratio: 1 / 1;
  border-radius: 0.75rem;
  color: #fff;
  --tone-from: #0A84FF;
  --tone-to:   #0077FF;
  background-image:
    radial-gradient(120% 140% at 20% 18%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, var(--tone-from), var(--tone-to));
  border: 0.5px solid rgba(255,255,255,.22);
  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.12),
    0 2px 6px rgba(15, 23, 42, 0.10),
    inset 0 0 0 0.5px rgba(255,255,255,.10);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.icon-badge::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,.06) 28%, rgba(255,255,255,0) 60%);
  pointer-events: none;
  mix-blend-mode: soft-light;
}
.icon-badge:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255,255,255,1),
    0 0 0 4px rgba(2, 132, 199, .34),
    0 10px 28px rgba(15, 23, 42, 0.18);
}
.group:hover .icon-badge {
  transform: translateY(-0.5px);
  box-shadow:
    0 10px 24px rgba(15,23,42,.14),
    0 3px 10px rgba(15,23,42,.12),
    inset 0 0 0 0.5px rgba(255,255,255,.12);
}

/* Five-color cyclic palette (order-based) */
.icon-badge--p1 { --tone-from: #2DD4BF; --tone-to: #14B8A6; }
.group:hover .icon-badge--p1 { --tone-from: #22C1B0; --tone-to: #0EA5A1; box-shadow: 0 10px 26px rgba(20,184,166,.22), 0 3px 10px rgba(20,184,166,.14); }

.icon-badge--p2 { --tone-from: #0A84FF; --tone-to: #0077FF; }
.group:hover .icon-badge--p2 { --tone-from: #007AFF; --tone-to: #0066FF; box-shadow: 0 10px 26px rgba(0,122,255,.20), 0 3px 10px rgba(0,102,255,.14); }

.icon-badge--p3 { --tone-from: #BF5AF2; --tone-to: #A64DFF; }
.group:hover .icon-badge--p3 { --tone-from: #B14EF0; --tone-to: #9340F5; box-shadow: 0 10px 26px rgba(147,64,245,.20), 0 3px 10px rgba(147,64,245,.14); }

.icon-badge--p4 { --tone-from: #FF9F0A; --tone-to: #FF7A00; }
.group:hover .icon-badge--p4 { --tone-from: #FF9500; --tone-to: #FF6A00; box-shadow: 0 10px 26px rgba(255,149,0,.20), 0 3px 10px rgba(255,149,0,.14); }

.icon-badge--p5 { --tone-from: #34C759; --tone-to: #2EB94E; }
.group:hover .icon-badge--p5 { --tone-from: #2CC14F; --tone-to: #28A844; box-shadow: 0 10px 26px rgba(40,168,68,.20), 0 3px 10px rgba(40,168,68,.14); }

/* Primary button with teal gradient */
.btn-primary {
  background-image: linear-gradient(135deg, var(--ai-gradient-light-start), var(--ai-gradient-light-end));
  color: #fff;
}
.btn-primary:hover {
  background-image: linear-gradient(135deg, var(--ai-gradient-hover-start), var(--ai-gradient-hover-end));
}

/* ===== HERO Animated Background ===== */
.hero-animated { position: relative; isolation: isolate; }
.hero-animated::after { content: none; }

.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(100,116,139,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(100,116,139,.10) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
  background-position: 0 0, 0 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 85%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 85%);
  animation: grid-pan 24s linear infinite;
  pointer-events: none; z-index: -2;
}
@keyframes grid-pan {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 44px 22px, 44px 22px; }
}

.hero-noise { 
  position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 .18'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect filter='url(%23n)' width='100%25' height='100%25' opacity='0.35'/%3E%3C/svg%3E");
  opacity: .4;
}

.hero-fade { 
  position: absolute; left: 0; right: 0; bottom: -56px; height: 144px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(248,250,252,0) 0%, rgba(248,250,252,.55) 40%, rgba(248,250,252,1) 85%);
}

/* Reduced motion (system preference) */
@media (prefers-reduced-motion: reduce) {
  .hero-grid { animation: none !important; }
}

/* ===== Drawer Animations ===== */
.slide-in-right {
  animation: slide-in-right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
}
@keyframes slide-in-right {
  0% { transform: translateX(100%); opacity: 0; }
  70% { transform: translateX(-1.5%); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

.slide-out-right {
  animation: slide-out-right 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}
@keyframes slide-out-right {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

.fade-in-overlay {
  animation: fade-in-overlay 0.3s ease-out forwards;
}
@keyframes fade-in-overlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-out-overlay {
  animation: fade-out-overlay 0.25s ease-in forwards;
}
@keyframes fade-out-overlay {
  from { opacity: 1; }
  to { opacity: 0; }
}

.drawer-scroll {
  overflow-y: scroll;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.drawer-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* ===== Utilities ===== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Chat specific styles */
.chat-message {
  white-space: pre-wrap;
  word-break: break-word;
}

/* FAQ accordion */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}
.faq-answer.open {
  max-height: 500px;
  padding-top: 0.5rem;
}

/* Typing animation for search placeholder */
.typing-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}