/* ================================================================
   Aska Jewels AI Assistant — Custom Styles
   Supplements Tailwind CDN. Port of globals.css.
   ================================================================ */

:root {
  color-scheme: light;
  --bg-0: #f8f9fc;
  --bg-1: #f0f4f9;
  --panel: #ffffff;
  --panel-soft: #f8fafd;
  --border: #dce4ef;
  --border-light: #e8eef6;
  --ink: #0d1b2a;
  --muted: #4e6181;
  --navy: #0f2740;
  --blue: #1a4f8c;
  --blue-light: #2563a8;
  --blue-strong: #143b6a;
  --accent-warm: #f59e42;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html { height: 100%; height: 100dvh; }
body.assistant-body {
  min-height: 100%; min-height: 100dvh;
  background:
    radial-gradient(900px 400px at 18% -10%, rgba(26, 79, 140, 0.10) 0%, transparent 60%),
    radial-gradient(700px 320px at 90% 0%, rgba(15, 39, 64, 0.07) 0%, transparent 62%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
  color: var(--ink);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0; padding: 0;
}

input, textarea, select { font-size: 16px; }
button, input, textarea, select {
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
  button:hover:not(:disabled) { transform: translateY(-1px); }
}
button:active:not(:disabled) { transform: translateY(0); }
@media (pointer: coarse) {
  button:not(.input-action-btn):not(.msg-speaker-btn):not(.btn-icon-sm):not(.btn-compact),
  [role="button"]:not(.input-action-btn):not(.msg-speaker-btn):not(.btn-icon-sm):not(.btn-compact) {
    min-height: 44px; min-width: 44px;
  }
}

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 5px; height: 5px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(15, 39, 64, 0.12); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(15, 39, 64, 0.22); }

/* Keyframes */
@keyframes fade-slide {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bubble-in {
  0% { opacity: 0; transform: translateY(8px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pulse-soft {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@keyframes slide-in-right {
  0% { transform: translateX(100%); opacity: 0; }
  70% { transform: translateX(-2%); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes card-enter {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes results-expand {
  0% { opacity: 0; transform: scale(0.92) translateY(20px); }
  60% { opacity: 1; transform: scale(1.01) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes results-collapse {
  0% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0.95) translateY(10px); }
}
@keyframes signin-slide-up {
  0% { opacity: 0; transform: translateY(40px) scale(0.92); }
  60% { opacity: 1; transform: translateY(-4px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes signin-backdrop-in {
  from { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
  to { opacity: 1; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}
@keyframes slide-up-sheet {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes dropdown-spring {
  0% { opacity: 0; transform: translateY(-8px) scale(0.95); }
  70% { opacity: 1; transform: translateY(2px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes diamond-drift {
  0% { transform: translateY(0px) rotate(var(--base-rotate, 0deg)); }
  25% { transform: translateY(-14px) rotate(calc(var(--base-rotate, 0deg) + 3deg)); }
  50% { transform: translateY(-6px) rotate(calc(var(--base-rotate, 0deg) - 2deg)); }
  75% { transform: translateY(-18px) rotate(calc(var(--base-rotate, 0deg) + 1.5deg)); }
  100% { transform: translateY(0px) rotate(var(--base-rotate, 0deg)); }
}
@keyframes glow-breathe {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes shimmer-sweep {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes teaser-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}
@keyframes speaker-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26, 79, 140, 0.3); }
  50% { box-shadow: 0 0 0 4px rgba(26, 79, 140, 0); }
}
@keyframes badge-bounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); }
  50% { transform: scale(0.9); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes checkmark-draw { 0% { stroke-dashoffset: 24; } 100% { stroke-dashoffset: 0; } }
@keyframes checkmark-circle { 0% { stroke-dashoffset: 100; opacity: 0; } 30% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes modal-spring-in {
  0% { opacity: 0; transform: scale(0.92) translateY(20px); }
  60% { opacity: 1; transform: scale(1.02) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes modal-spring-out {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.95) translateY(10px); }
}
@keyframes hero-text-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes backdrop-fade-in {
  from { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
  to { opacity: 1; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}

/* Utility classes */
.ui-card {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(15, 39, 64, 0.05);
}
.ui-card-soft {
  border: 1px solid var(--border-light);
  background: var(--panel-soft);
  border-radius: 10px;
}
.ui-enter { animation: bubble-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.ui-pulse { animation: pulse-soft 1.2s ease infinite; }
.card-stagger { animation: card-enter 450ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.results-modal-in { animation: results-expand 350ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.results-modal-out { animation: results-collapse 200ms ease both; }
.signin-modal { animation: signin-slide-up 400ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.signin-backdrop { animation: signin-backdrop-in 300ms ease both; }
.modal-premium-in { animation: modal-spring-in 350ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.modal-premium-out { animation: modal-spring-out 200ms ease forwards; }
.backdrop-premium { animation: backdrop-fade-in 300ms ease forwards; background: rgba(13, 27, 42, 0.4); }
.cart-badge-bounce { animation: badge-bounce 500ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
.mic-recording { background: #dc2626 !important; color: #fff !important; border-color: #dc2626 !important; animation: mic-pulse 1.2s ease infinite; }
.speaker-active { color: #1a4f8c !important; background: #edf4ff !important; border-color: #1a4f8c !important; animation: speaker-glow 1.5s ease infinite; }

.hero-stagger > * { opacity: 0; animation: hero-text-in 500ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-stagger > *:nth-child(1) { animation-delay: 100ms; }
.hero-stagger > *:nth-child(2) { animation-delay: 200ms; }
.hero-stagger > *:nth-child(3) { animation-delay: 300ms; }
.hero-stagger > *:nth-child(4) { animation-delay: 400ms; }
.hero-stagger > *:nth-child(5) { animation-delay: 500ms; }
.hero-stagger > *:nth-child(6) { animation-delay: 600ms; }

.skeleton {
  background: linear-gradient(90deg, #f0f4f9 25%, #e4ecf5 50%, #f0f4f9 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}

/* Buttons */
.btn-primary {
  border: 1px solid var(--blue-strong);
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-strong) 100%);
  color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px rgba(20, 59, 106, 0.18), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 180ms ease, background-color 150ms ease, opacity 180ms ease;
  cursor: pointer;
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 4px 16px rgba(20, 59, 106, 0.28), inset 0 1px 0 rgba(255,255,255,0.1); }
.btn-primary:active:not(:disabled) { transform: scale(0.95); box-shadow: 0 1px 4px rgba(20, 59, 106, 0.12); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  border: 1px solid var(--border); background: #fff; color: var(--navy); font-weight: 600; cursor: pointer;
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 180ms ease, background-color 150ms ease, border-color 180ms ease, opacity 180ms ease;
}
.btn-secondary:hover:not(:disabled) { border-color: #b7c9e2; background: #f8fafd; }
.btn-secondary:active:not(:disabled) { transform: scale(0.95); background: #edf4ff; }

/* iOS scroll */
.ios-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* Safe area */
.safe-bottom { padding-bottom: var(--safe-bottom); }
.safe-top { padding-top: var(--safe-top); }
.safe-x { padding-left: var(--safe-left); padding-right: var(--safe-right); }

/* Diamond background */
.diamond-bg-container { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), filter 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.diamond-bg-visible { opacity: 1; transform: scale(1); filter: blur(0px); }
.diamond-bg-hidden { opacity: 0; transform: scale(1.06); filter: blur(6px); }
.diamond-bg-dimmed { opacity: 0.3; }
.diamond-bg-glow {
  position: absolute; top: 30%; left: 50%; width: 700px; height: 500px; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(26, 79, 140, 0.06) 0%, rgba(26, 79, 140, 0.02) 40%, transparent 70%);
  border-radius: 50%; animation: glow-breathe 8s ease-in-out infinite;
}
.diamond-float { position: absolute; animation: diamond-drift ease-in-out infinite both; will-change: transform; }
@media (max-width: 768px) {
  .diamond-float:nth-child(n+8) { display: none; }
  .diamond-bg-glow { width: 400px; height: 300px; }
}

/* Price blur */
.price-blur-wrapper { position: relative; cursor: pointer; user-select: none; }
.price-blur-text { filter: blur(8px); transition: filter 0.5s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; }
.price-blur-text.price-revealed { filter: blur(0px); }
.price-blur-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: rgba(248, 249, 252, 0.6); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); transition: opacity 0.3s ease;
}
.price-blur-overlay span { font-size: 10px; font-weight: 600; color: #1a4f8c; letter-spacing: 0.02em; }

/* Results teaser */
.results-teaser {
  background: linear-gradient(90deg, #edf4ff 25%, #dce8f8 50%, #edf4ff 75%);
  background-size: 200% 100%; animation: teaser-shimmer 3s ease infinite;
}

/* Input action buttons */
.input-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; min-height: 32px; min-width: 32px;
  border-radius: 8px; border: 1px solid var(--border); background: #fff;
  color: var(--muted); cursor: pointer; transition: all 0.18s ease; flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
  .input-action-btn:hover:not(:disabled) { border-color: #b7c9e2; background: #f8fafd; color: var(--blue); }
}
.input-action-btn:active:not(:disabled) { background: #edf4ff; color: var(--blue); }
.input-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Message speaker button */
.msg-speaker-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid transparent; background: transparent; color: #94a3bb;
  cursor: pointer; transition: all 0.18s ease; flex-shrink: 0;
}

/* Chat image preview */
.chat-image-preview {
  max-width: 200px; max-height: 160px; border-radius: 8px;
  border: 1px solid var(--border-light); object-fit: cover;
  box-shadow: 0 2px 8px rgba(15, 39, 64, 0.08);
}

/* Card hover premium */
.card-premium-hover {
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 250ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .card-premium-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(15, 39, 64, 0.12), 0 4px 12px rgba(15, 39, 64, 0.06);
  }
}
.card-premium-hover:active { transform: scale(0.98); }

/* Checkmark SVG animation */
.checkmark-svg circle { stroke-dasharray: 100; stroke-dashoffset: 100; animation: checkmark-circle 500ms cubic-bezier(0.65, 0, 0.45, 1) forwards; }
.checkmark-svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: checkmark-draw 300ms cubic-bezier(0.65, 0, 0.45, 1) 250ms forwards; }

/* Chat results containment */
.results-scroll-container { contain: layout; overflow: visible; }
.chat-results-region { contain: layout style; overflow: visible; }

/* Tab content animation */
.tab-content-enter { animation: fade-slide 200ms ease forwards; }

/* Print */
@media print {
  .diamond-bg-container, header, .fixed, aside { display: none !important; }
  body.assistant-body { background: white !important; }
}