tailwind.css

@import "tailwindcss";
@import "tw-animate-css";
@import "./style/index.css";
@import "./style/Animate.css";
@import "./style/highlight_code.css";

@source "./src/**/*.rs";
@source "./app_crates/**/*.rs";
@source "./public/app_components/toast.js";

/* =========================================================================
   DO NOT REMOVE: bottom-nav / iOS safe-area utility pins.

   Without these, `dx serve --platform ios` can silently tree-shake the
   bottom-nav safe-area utilities out of the compiled CSS on a plain
   Ctrl+C + relaunch (no full rebuild), even though the `.rs` source using
   them hasn't changed. Symptom if this regresses: a brief flash of
   unstyled HTML, then CSS loads, but the bottom nav's labels are clipped
   by / overlap the iOS home indicator. Full root-cause writeup:
   PLAN_FIX_BOTTOM_NAV.md section 14 ("Tailwind content-scan tree-shaking").

   Each line below must be the EXACT literal class string as it appears in
   source, character-for-character (Tailwind matches these as plain text,
   not a pattern) - source of truth for each:
     - bottom__safe, safe__dvh__content
         -> @utility definitions in this file (search "@utility bottom__safe")
     - pb-[env(safe-area-inset-bottom,0px)]
         -> app_crates/registry/src/ui/bottom_nav.rs, `BottomNav` root class
     - supports-[-webkit-touch-callout:none]:justify-end / :pb-0 / :translate-y-1
         -> app_crates/registry/src/ui/bottom_nav.rs, `BottomNavButton` class
            (the iOS WKWebView touch-callout hack)

   If you rename/change one of those classes at its source, update the
   matching line here in the SAME commit, don't just delete it - deleting
   without checking re-introduces the tree-shaking bug this section fixes.
   ========================================================================= */
@source inline("bottom__safe");
@source inline("safe__dvh__content");
@source inline("pb-[env(safe-area-inset-bottom,0px)]");
@source inline("supports-[-webkit-touch-callout:none]:justify-end");
@source inline("supports-[-webkit-touch-callout:none]:pb-0");
@source inline("supports-[-webkit-touch-callout:none]:translate-y-1");


/* https://www.linkedin.com/posts/theosoti_page-loads-dont-have-to-be-harsh-css-lets-activity-7313869085379878913-ttyY/ */
/* @view-transition {
  navigation: auto;
 } */


@custom-variant dark (&:is(.dark *));
@custom-variant in-data-scrolled (&:is([data-scrolled="true"] *));

/* @custom-variant fixed (&:is(.layout-fixed *)); */

:root {
  --bottom__nav__height: 4rem;
  --radius: 0.625rem;
  --font-sans: 'Inter', sans-serif;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(0.985 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --primary-light: oklch(0.95 0 0);
  --primary-dark: oklch(0.145 0 0);
  --secondary: oklch(0.92 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.985 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-light: oklch(0.95 0.08 27.325);
  --destructive-dark: oklch(0.35 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.809 0.105 251.813);
  --chart-2: oklch(0.623 0.214 259.815);
  --chart-3: oklch(0.546 0.245 262.881);
  --chart-4: oklch(0.488 0.243 264.376);
  --chart-5: oklch(0.424 0.199 265.638);
  --chart-primary: oklch(0.809 0.105 251.813);
  --chart-muted: oklch(0.708 0 0);
  --chart-grid: oklch(0.9 0 0);
  --chart-1-rgb: 147, 197, 253;
  --chart-2-rgb: 59, 130, 246;
  --sidenav: oklch(0.985 0 0);
  --sidenav-foreground: oklch(0.145 0 0);
  --sidenav-primary: oklch(0.205 0 0);
  --sidenav-primary-foreground: oklch(0.985 0 0);
  --sidenav-accent: oklch(0.97 0 0);
  --sidenav-accent-foreground: oklch(0.205 0 0);
  --sidenav-border: oklch(0.922 0 0);
  --sidenav-ring: oklch(0.708 0 0);
  --selection: oklch(0.65 0.16 55);
  --selection-foreground: oklch(1 0 0);

  /* * Added myself. */
  --success: oklch(0.65 0.16 145);
  --success-foreground: oklch(0.985 0 0);
  --success-light: oklch(0.95 0.08 145);
  --success-dark: oklch(0.35 0.16 145);
  --warning: oklch(0.65 0.16 55);
  --warning-foreground: oklch(0.985 0 0);
  --warning-light: oklch(0.95 0.08 55);
  --warning-dark: oklch(0.35 0.16 55);
  --info: oklch(0.55 0.18 250);
  --info-foreground: oklch(0.985 0 0);
  --info-light: oklch(0.95 0.08 250);
  --info-dark: oklch(0.35 0.18 250);
  --slider-track: oklch(0.9 0 0);
  /* TODO: Shortfix */
  --scrollbar-thumb: #ccc;
  --scrollbar-track: #f0f0f0;
  --surface: oklch(0.98 0 0);
  --surface-foreground: oklch(0.145 0 0);
}

.dark {
  --background: oklch(0.18 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.269 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --primary-light: oklch(0.25 0 0);
  --primary-dark: oklch(0.985 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.371 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-light: oklch(0.25 0.08 22.216);
  --destructive-dark: oklch(0.85 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.809 0.105 251.813);
  --chart-2: oklch(0.623 0.214 259.815);
  --chart-3: oklch(0.546 0.245 262.881);
  --chart-4: oklch(0.488 0.243 264.376);
  --chart-5: oklch(0.424 0.199 265.638);
  --chart-primary: oklch(0.809 0.105 251.813);
  --chart-muted: oklch(0.556 0 0);
  --chart-grid: oklch(0.2 0 0);
  --chart-1-rgb: 147, 197, 253;
  --chart-2-rgb: 59, 130, 246;
  --sidenav: oklch(0.205 0 0);
  --sidenav-foreground: oklch(0.985 0 0);
  --sidenav-primary: oklch(0.488 0.243 264.376);
  --sidenav-primary-foreground: oklch(0.985 0 0);
  --sidenav-accent: oklch(0.269 0 0);
  --sidenav-accent-foreground: oklch(0.985 0 0);
  --sidenav-border: oklch(1 0 0 / 10%);
  --sidenav-ring: oklch(0.439 0 0);
  --selection: oklch(0.55 0.18 55);
  --selection-foreground: oklch(0.205 0 0);

  /* * Added myself. */
  --success: oklch(0.65 0.16 145);
  --success-foreground: oklch(0.205 0 0);
  --success-light: oklch(0.25 0.08 145);
  --success-dark: oklch(0.75 0.16 145);
  --warning: oklch(0.65 0.16 55);
  --warning-foreground: oklch(0.205 0 0);
  --warning-light: oklch(0.25 0.08 55);
  --warning-dark: oklch(0.75 0.16 55);
  --info: oklch(0.65 0.18 250);
  --info-foreground: oklch(0.985 0 0);
  --info-light: oklch(0.25 0.08 250);
  --info-dark: oklch(0.75 0.18 250);
  --slider-track: oklch(0.25 0 0);
  /* TODO: Shortfix */
  --scrollbar-thumb: #555;
  --scrollbar-track: #222;
  --surface: oklch(0.22 0 0);
  --surface-foreground: oklch(0.708 0 0);
}

@theme inline {
  --spacing-bottom__nav__height: var(--bottom__nav__height);
  --breakpoint-3xl: 1600px;
  --breakpoint-4xl: 2000px;
  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary-light: var(--primary-light);
  --color-primary-dark: var(--primary-dark);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-light: var(--destructive-light);
  --color-destructive-dark: var(--destructive-dark);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-chart-primary: var(--chart-primary);
  --color-chart-muted: var(--chart-muted);
  --color-chart-grid: var(--chart-grid);
  --color-sidenav: var(--sidenav);
  --color-sidenav-foreground: var(--sidenav-foreground);
  --color-sidenav-primary: var(--sidenav-primary);
  --color-sidenav-primary-foreground: var(--sidenav-primary-foreground);
  --color-sidenav-accent: var(--sidenav-accent);
  --color-sidenav-accent-foreground: var(--sidenav-accent-foreground);
  --color-sidenav-border: var(--sidenav-border);
  --color-sidenav-ring: var(--sidenav-ring);
  --color-selection: var(--selection);
  --color-selection-foreground: var(--selection-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-success-light: var(--success-light);
  --color-success-dark: var(--success-dark);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-warning-light: var(--warning-light);
  --color-warning-dark: var(--warning-dark);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-info-light: var(--info-light);
  --color-info-dark: var(--info-dark);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  ::selection {
    @apply bg-selection text-selection-foreground;
  }
  html {
    @apply bg-background;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  body {
    @apply h-full bg-background text-foreground;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
  }

  a:active,
  button:active {
    @apply opacity-60 md:opacity-100;
  }

  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }

  dialog {
    margin: auto;
  }

  ::-webkit-scrollbar {
    width: 5px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 5px;
  }
  * {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  * {
    scrollbar-color: var(--scrollbar-thumb) transparent;
  }

  .dark ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }
  .dark ::-webkit-scrollbar-track {
    background: transparent;
  }
  .dark * {
    scrollbar-color: var(--scrollbar-thumb) transparent;
  }
}

@utility container {
  @apply 3xl:max-w-screen-2xl mx-auto max-w-[1400px] px-4 lg:px-8;
}

@utility bottom__safe {
  padding-bottom: var(--bottom__nav__height);

  @media (min-width: 640px) {
    padding-bottom: 0;
  }
}

@utility safe__dvh__content {
  height: 100vh;
  height: 100dvh;
  padding-bottom: var(--bottom__nav__height);

  @media (min-width: 640px) {
    padding-bottom: 0;
  }
}

@utility border-grid {
  @apply border-border/50 dark:border-border;
}

@utility no__scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

@utility scrollbar__on_hover {
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    width: 0;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: transparent;
  }

  .group\/scrollbar-on-hover:hover & {
    scrollbar-width: thin;

    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: var(--scrollbar-thumb);
      border-radius: 5px;
    }
  }
}

/* ============================================================ */
/* Chat interface utilities (Marker, Message, Bubble, Attachment, MessageScroller) */
/* ============================================================ */

@utility wrap-break-word {
  overflow-wrap: break-word;
  word-break: break-word;
}

@utility scroll-fade-b {
  mask-image: linear-gradient(to bottom, black calc(100% - 2rem), transparent 100%);
}

@utility scroll-fade-x {
  mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent 100%);
}

@utility scrollbar-thin {
  scrollbar-width: thin;
}

@utility scrollbar-gutter-stable {
  scrollbar-gutter: stable;
}

@utility scrollbar-none {
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }
}

/* shimmer — pure CSS text sweep animation (NOT the <Shimmer> skeleton component)   */
/* Usage: class="shimmer text-muted-foreground" on any text element                  */
@property --shimmer-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 20deg;
}

@theme inline {
  @keyframes tw-shimmer {
    from { background-position: 100% 0; }
    to   { background-position: 0 0; }
  }
}

@utility shimmer {
  --_spread: var(--shimmer-spread, calc(3ch + 40px));
  --_base: currentColor;
  --_highlight: var(--shimmer-color, oklch(from currentColor l c h / calc(alpha * 0.2)));
  background-image: linear-gradient(
    calc(90deg + var(--shimmer-angle)),
    var(--_base) calc(50% - var(--_spread)),
    color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% - var(--_spread) * 0.5),
    var(--_highlight) 50%,
    color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% + var(--_spread) * 0.5),
    var(--_base) calc(50% + var(--_spread))
  );
  background-repeat: no-repeat;
  background-size: calc(200% + var(--_spread) * 2) 100%;
  background-position: 0 0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
  @variant dark {
    --_highlight: var(--shimmer-color, oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.4)));
  }
  &:where([dir="rtl"], [dir="rtl"] *) { animation-direction: reverse; }
}

@utility shimmer-once { animation-iteration-count: 1; }
@utility shimmer-reverse { animation-direction: reverse; }
@utility shimmer-none { -webkit-text-fill-color: currentColor; }