/* Claude + theme (tweakcn) injected into new-api via Caddy */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&family=Inter:wght@300..700&family=Plus+Jakarta+Sans:wght@300..700&family=JetBrains+Mono:wght@400;500;600&display=swap&subset=vietnamese');

html:root {
  --font-sans: "Be Vietnam Pro", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --radius: 1rem;
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  --background: oklch(0.9818 0.0054 95.0986);
  --foreground: oklch(0.3438 0.0269 95.7226);
  --card: oklch(0.9665 0.0067 97.3521);
  --card-foreground: oklch(0.1908 0.0020 106.5859);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2671 0.0196 98.9390);
  --primary: oklch(0.6171 0.1375 39.0427);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9245 0.0138 92.9892);
  --secondary-foreground: oklch(0.4334 0.0177 98.6048);
  --muted: oklch(0.9341 0.0153 90.2390);
  --muted-foreground: oklch(0.5341 0.0078 97.4503);
  --accent: oklch(0.9245 0.0138 92.9892);
  --accent-foreground: oklch(0.2671 0.0196 98.9390);
  --destructive: oklch(0.1908 0.0020 106.5859);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.8847 0.0069 97.3627);
  --input: oklch(0.7621 0.0156 98.3528);
  --ring: oklch(0.6171 0.1375 39.0427);
  --chart-1: oklch(0.5583 0.1276 42.9956);
  --chart-2: oklch(0.6898 0.1581 290.4107);
  --chart-3: oklch(0.8816 0.0276 93.1280);
  --chart-4: oklch(0.8822 0.0403 298.1792);
  --chart-5: oklch(0.5608 0.1348 42.0584);
  --sidebar: oklch(0.9663 0.0080 98.8792);
  --sidebar-foreground: oklch(0.3590 0.0051 106.6524);
  --sidebar-primary: oklch(0.6171 0.1375 39.0427);
  --sidebar-primary-foreground: oklch(0.9881 0 0);
  --sidebar-accent: oklch(0.9245 0.0138 92.9892);
  --sidebar-accent-foreground: oklch(0.3250 0 0);
  --sidebar-border: oklch(0.9401 0 0);
  --sidebar-ring: oklch(0.7731 0 0);

  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
}

html.dark:root, html.dark {
  --background: oklch(0.2679 0.0036 106.6427);
  --foreground: oklch(0.9576 0.0027 106.4494);
  --card: oklch(0.2928 0.0018 106.5092);
  --card-foreground: oklch(0.9818 0.0054 95.0986);
  --popover: oklch(0.3085 0.0035 106.6039);
  --popover-foreground: oklch(0.9211 0.0040 106.4781);
  --primary: oklch(0.6724 0.1308 38.7559);
  --primary-foreground: oklch(0.1908 0.0020 106.5859);
  --secondary: oklch(0.9818 0.0054 95.0986);
  --secondary-foreground: oklch(0.3085 0.0035 106.6039);
  --muted: oklch(0.2213 0.0038 106.7070);
  --muted-foreground: oklch(0.7713 0.0169 99.0657);
  --accent: oklch(0.2130 0.0078 95.4245);
  --accent-foreground: oklch(0.9663 0.0080 98.8792);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.3618 0.0101 106.8928);
  --input: oklch(0.4336 0.0113 100.2195);
  --ring: oklch(0.6724 0.1308 38.7559);
  --chart-1: oklch(0.5583 0.1276 42.9956);
  --chart-2: oklch(0.6898 0.1581 290.4107);
  --chart-3: oklch(0.2130 0.0078 95.4245);
  --chart-4: oklch(0.3074 0.0516 289.3230);
  --chart-5: oklch(0.5608 0.1348 42.0584);
  --sidebar: oklch(0.2357 0.0024 67.7077);
  --sidebar-foreground: oklch(0.8074 0.0142 93.0137);
  --sidebar-primary: oklch(0.3250 0 0);
  --sidebar-primary-foreground: oklch(0.9881 0 0);
  --sidebar-accent: oklch(0.1680 0.0020 106.6177);
  --sidebar-accent-foreground: oklch(0.8074 0.0142 93.0137);
  --sidebar-border: oklch(0.9401 0 0);
  --sidebar-ring: oklch(0.7731 0 0);
}

/* Font picker (Phong chu):
   Auto  -> Be Vietnam Pro
   Sans  -> Inter
   Serif -> Plus Jakarta Sans  (o "Serif" duoc dung lam lua chon font thu 3) */
:root:root {
  --font-ui-sans: "Be Vietnam Pro", system-ui, sans-serif;
  --font-public-sans: "Inter", system-ui, sans-serif;
  --font-serif: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
:root:root[data-theme-font=sans], html [data-theme-font=sans] {
  --font-ui-sans: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}
:root:root[data-theme-font=serif], html [data-theme-font=serif] {
  --font-ui-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
}

body {
  -webkit-font-smoothing: antialiased;
  letter-spacing: var(--tracking-normal);
}
code, pre, kbd, .font-mono { font-family: var(--font-mono); }

/* =====================================================================
   CHAT PLAYGROUND — ChatGPT / DeepSeek style
   Scoped: only pages containing the chat composer (textarea.min-h-20)
   ===================================================================== */

/* -- Message rows: centered reading column -- */
.group.is-user,
.group.is-assistant {
  max-width: 768px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 8px;
  padding-right: 8px;
  animation: chat-in .28s cubic-bezier(.16,1,.3,1) both;
}
@keyframes chat-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* -- User bubble: soft pill, right aligned -- */
.group.is-user > div {
  max-width: 75% !important;
  border-radius: 22px !important;
  padding: 10px 18px !important;
  background: var(--secondary) !important;
  color: var(--foreground) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  box-shadow: none !important;
}
html.dark .group.is-user > div {
  background: color-mix(in oklch, var(--foreground) 9%, transparent) !important;
}

/* -- Assistant: no bubble, roomy typography -- */
.group.is-assistant > div {
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  font-size: 15.5px !important;
  line-height: 1.75 !important;
}
.group.is-assistant p { margin: 0 0 .85em; }
.group.is-assistant h1,
.group.is-assistant h2,
.group.is-assistant h3 { font-weight: 650; letter-spacing: -.01em; margin: 1.2em 0 .5em; }
.group.is-assistant ul,
.group.is-assistant ol { padding-left: 1.4em; margin: .4em 0 .9em; }
.group.is-assistant li { margin: .25em 0; }
.group.is-assistant a { color: var(--primary); text-underline-offset: 3px; }
.group.is-assistant :not(pre) > code {
  font-size: .86em;
  padding: .15em .4em;
  border-radius: 6px;
  background: color-mix(in oklch, var(--foreground) 8%, transparent);
}
.group.is-assistant pre {
  border-radius: 14px !important;
  border: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.6;
}
.group.is-assistant blockquote {
  border-left: 3px solid var(--primary);
  padding-left: 1em;
  color: var(--muted-foreground);
}

/* -- "Thought for N seconds" trigger: subtle pill -- */
button[class*="grid-cols-[0.875rem_minmax(0,auto)_0.875rem]"] {
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: color-mix(in oklch, var(--foreground) 5%, transparent);
  font-size: 13px !important;
  transition: background .2s;
}
button[class*="grid-cols-[0.875rem_minmax(0,auto)_0.875rem]"]:hover {
  background: color-mix(in oklch, var(--foreground) 9%, transparent);
}

/* -- Meta line (time · response time): quieter -- */
main:has(textarea.min-h-20) .text-\[11px\] { opacity: .55; }

/* -- Composer: floating rounded box like ChatGPT -- */
form:has(textarea.min-h-20) {
  max-width: 768px;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 28px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 40px -12px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.02) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
form:has(textarea.min-h-20):focus-within {
  border-color: color-mix(in oklch, var(--primary) 55%, var(--border)) !important;
  box-shadow: 0 10px 40px -12px rgba(0,0,0,.4), 0 0 0 4px color-mix(in oklch, var(--primary) 14%, transparent) !important;
}
form textarea.min-h-20 {
  min-height: 56px !important;
  padding: 18px 22px 6px !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  background: transparent !important;
}
form:has(textarea.min-h-20) .border-t {
  border-top: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  padding: 6px 12px 12px !important;
}
/* tool buttons group + model picker: flatter */
form:has(textarea.min-h-20) .border-t button {
  border-radius: 999px !important;
}
form:has(textarea.min-h-20) .border-t [class*="rounded-lg"],
form:has(textarea.min-h-20) .border-t [class*="rounded-md"] {
  border-radius: 999px !important;
}
/* send button: round, accent */
form:has(textarea.min-h-20) button[type="submit"] {
  border-radius: 999px !important;
  min-width: 40px;
  height: 36px;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border: 0 !important;
  transition: transform .15s, opacity .2s;
}
form:has(textarea.min-h-20) button[type="submit"]:hover:not(:disabled) { transform: scale(1.05); }
form:has(textarea.min-h-20) button[type="submit"]:disabled { opacity: .35; }