/* ===========================================================================
   AskGRIET — UI enhancement overlay (loaded after the built stylesheet).
   Upgrades typography, depth, motion and polish without touching the bundle.
   Works by overriding the design tokens + common utility classes.
   =========================================================================== */

/* ---- Typography: premium variable fonts ---- */
:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Sora", "Inter", sans-serif;
}
html, body, button, input, textarea, select {
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
}
h1, h2, h3, .font-display {
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em;
}
h1 { letter-spacing: -0.035em; }

/* ---- Refined tokens: deeper, more premium shadows & radius ---- */
:root {
  --radius: 0.95rem;
  --shadow-card: 0 2px 4px -2px hsl(350 50% 30% / .08), 0 8px 24px -8px hsl(350 50% 30% / .14);
  --shadow-elegant: 0 24px 70px -18px hsl(350 75% 30% / .30);
  --shadow-glow: 0 0 44px hsl(22 95% 55% / .30);
  --ring: 22 95% 52%;
}

/* ---- Global smoothing: gentle transitions on interactive elements ---- */
a, button, [role="button"], input, textarea, select,
.rounded-xl, .rounded-2xl, .rounded-3xl, .rounded-full,
svg, .transition, .transition-all, .transition-colors {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease,
              box-shadow .22s ease, transform .22s cubic-bezier(.22,.61,.36,1),
              opacity .18s ease !important;
}

/* ---- Buttons: tactile lift + press ---- */
button, a[class*="bg-"], [role="button"] {
  will-change: transform;
}
button:hover:not(:disabled), [role="button"]:hover {
  transform: translateY(-1px);
}
button:active:not(:disabled), [role="button"]:active {
  transform: translateY(0) scale(.985);
}
/* primary / gradient buttons get a soft glow on hover */
button[style*="--primary"]:hover,
button[class*="primary"]:hover,
a[class*="primary"]:hover {
  box-shadow: var(--shadow-glow);
}

/* ---- Cards: refined depth + hover lift + hairline border ---- */
.rounded-xl, .rounded-2xl, .rounded-3xl {
  box-shadow: var(--shadow-card);
}
[class*="border"][class*="rounded-2xl"],
[class*="border"][class*="rounded-xl"] {
  border-color: hsl(25 30% 90% / .9);
}
[class*="rounded-2xl"]:hover, [class*="rounded-3xl"]:hover {
  box-shadow: var(--shadow-elegant);
  transform: translateY(-2px);
}
/* don't lift the whole chat panel / page shells */
main > .rounded-2xl:hover, main > .rounded-3xl:hover,
.h-full:hover, .min-h-screen:hover, .flex-1:hover { transform: none; }

/* ---- Inputs & textareas: softer, clearer focus ---- */
input, textarea, select {
  border-radius: 0.8rem !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px hsl(var(--ring) / .18) !important;
  border-color: hsl(var(--ring) / .6) !important;
}

/* ---- Sticky headers: frosted glass ---- */
.sticky, header.sticky, [class*="backdrop"] {
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}

/* ---- Entrance animations ---- */
@keyframes ag-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ag-fade {
  from { opacity: 0; } to { opacity: 1; }
}
#root > * { animation: ag-fade .4s ease both; }
/* chat message rows & cards gently rise in */
main .rounded-2xl, main .rounded-xl, [class*="space-y"] > * {
  animation: ag-fade-up .45s cubic-bezier(.22,.61,.36,1) both;
}

/* ---- Prettier scrollbars ---- */
* { scrollbar-width: thin; scrollbar-color: hsl(22 95% 55% / .5) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: hsl(22 90% 55% / .45); border-radius: 99px;
  border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: hsl(22 90% 50% / .7); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- Selection ---- */
::selection { background: hsl(22 95% 55% / .25); color: hsl(350 60% 18%); }

/* ---- Links ---- */
a:not([class]) { color: hsl(22 95% 45%); text-underline-offset: 3px; }

/* ---- Dark mode polish (if the app toggles .dark) ---- */
.dark {
  --background: 350 25% 9%;
  --foreground: 30 30% 94%;
  --card: 350 22% 12%;
  --card-foreground: 30 30% 94%;
  --muted: 350 18% 16%;
  --muted-foreground: 30 15% 65%;
  --border: 350 18% 20%;
  --input: 350 18% 20%;
  --shadow-card: 0 2px 4px -2px #0008, 0 10px 28px -10px #000a;
  --shadow-elegant: 0 26px 70px -18px #000b;
}
.dark ::selection { background: hsl(22 95% 55% / .35); color: #fff; }
.dark *::-webkit-scrollbar-thumb { background: hsl(22 90% 55% / .5); background-clip: content-box; }

/* ===========================================================================
   Chat page layout fix: make the app shell fill the viewport so the message
   list scrolls and the input bar stays docked at the bottom (was floating
   mid-page because the shell had no explicit height).
   =========================================================================== */
.flex.min-h-0.overflow-hidden.rounded-2xl:has(> main) {
  height: 100dvh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;      /* full-bleed app shell */
  border-left: 0 !important;
  border-right: 0 !important;
}
/* its unclassed wrapper should fill height too */
body #root .flex.min-h-0.overflow-hidden.rounded-2xl:has(> main) { margin: 0 !important; }

/* message list grows & scrolls; input footer pinned, with a soft top edge */
main > section.overflow-y-auto { scroll-behavior: smooth; }
main > footer {
  position: sticky;
  bottom: 0;
  background: hsl(var(--background) / .85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid hsl(var(--border) / .6);
}
/* the input pill itself a touch more prominent */
main > footer [class*="rounded-"]:has(> textbox),
main > footer textarea, main > footer input[type="text"] {
  box-shadow: var(--shadow-card);
}
/* don't let the entrance animation push the sticky footer */
main > footer { animation: none !important; }

/* ---- Accessibility: respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, #root > *, main .rounded-2xl, main .rounded-xl {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}