@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --radius: 0.625rem;
  --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(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.5 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.5 0 0);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-ring: oklch(0.708 0 0);

  /* product status tokens */
  --success: oklch(0.627 0.194 149.214);
  --success-foreground: oklch(0.145 0 0);
  --warning: oklch(0.62 0.16 80);  /* amber-600 depth: ≥3:1 as status dot, ≥4.5 with dark fg on badge */
  --warning-foreground: oklch(0.18 0.04 81.63);
  --info: oklch(0.47 0.148 241.966);
  --info-foreground: oklch(0.985 0 0);

  /* WhatsApp-inspired but legally clean chat tokens */
  --bubble-out: oklch(0.884 0.127 157.949);
  --bubble-out-foreground: oklch(0.205 0 0);
  --tick-read: oklch(0.56 0.19 238.65);

  /* Inter carries Latin, Cairo carries Arabic — the browser picks per glyph, so
     an Arabic sentence keeps Latin digits and Latin technical tokens in Inter. */
  --font-inter: "Inter Variable", "Cairo Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif;
  --font-jetbrains: "JetBrains Mono Variable", "JetBrains Mono", "Cairo Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 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.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.145 0 0);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.985 0 0);
  --sidebar-primary-foreground: oklch(0.205 0 0);
  --sidebar-ring: oklch(0.556 0 0);

  --success: oklch(0.723 0.219 149.579);
  --success-foreground: oklch(0.145 0 0);
  --warning: oklch(0.828 0.189 84.429);
  --warning-foreground: oklch(0.246 0.07 81.63);
  --info: oklch(0.746 0.16 232.661);
  --info-foreground: oklch(0.145 0 0);

  --bubble-out: oklch(0.322 0.09 157.949);
  --bubble-out-foreground: oklch(0.985 0 0);
  --tick-read: oklch(0.746 0.16 232.661);
}

@theme inline {
  --font-sans: var(--font-inter);
  --font-mono: var(--font-jetbrains);

  --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-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-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-ring: var(--sidebar-ring);

  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-bubble-out: var(--bubble-out);
  --color-bubble-out-foreground: var(--bubble-out-foreground);
  --color-tick-read: var(--tick-read);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

* {
  border-color: var(--color-border);
}

body {
  background-color: var(--color-background);
  color: var(--color-foreground);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  :focus-visible {
    outline: none;
  }
  button,
  a,
  [role="button"],
  input,
  select,
  textarea,
  [tabindex] {
    @apply focus-visible:ring-[3px] focus-visible:ring-ring/50;
  }
  body {
    @apply bg-background text-foreground antialiased;
  }
}

/* thin, theme-aware scrollbars for chat & scroll areas */
.wabas-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.wabas-scroll::-webkit-scrollbar-thumb {
  background-color: color-mix(in oklab, var(--color-muted-foreground) 40%, transparent);
  border-radius: 999px;
}

/* bidi safety for user-generated/archive content (Arabic names, filenames, message text) */
.bidi-safe {
  unicode-bidi: plaintext;
}

/*
 * Arabic typography: Cairo needs slightly more leading than Inter at the same
 * size (its diacritic space and rounder forms crowd otherwise), and digits /
 * latin runs inside Arabic copy keep their tabular, left-to-right shape.
 */
:lang(ar) body,
html[dir="rtl"] body {
  line-height: 1.6;
  letter-spacing: 0; /* tracking hurts Arabic word shapes */
}

html[dir="rtl"] .tracking-tight,
html[dir="rtl"] .tracking-wide {
  letter-spacing: 0;
}

/* numbers, phone numbers and hashes stay LTR inside RTL sentences */
.ltr-numeric {
  direction: ltr;
  unicode-bidi: isolate;
}

mark {
  background-color: color-mix(in oklab, var(--color-warning) 45%, transparent);
  color: inherit;
  border-radius: 2px;
  padding-inline: 1px;
}