/*
 * Tokia brand overlay para LibreChat.
 *
 * Alinhado a docs/design/DESIGN.md (Tokia main repo):
 * Supabase (dark emerald) + Linear (precisão tipográfica) + Superhuman (purple glow).
 *
 * Como aplicar (3 opções):
 * 1) Via librechat.yaml interface.customWelcome — limitado a markdown.
 * 2) Reverse-proxy inject — Traefik/Nginx insere <link> antes de </head>:
 *    sub_filter '</head>' '<link rel="stylesheet" href="/assets/tokia-theme.css"></head>';
 * 3) Build-time patch (manual) — adicionar <link> no client/index.html.
 *
 * Recomendado: opção 2 (Traefik sub_filter no chat.usetokia.com).
 */

/* === Fontes Tokia === */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Brand emerald (primary accent) */
  --tokia-accent:        #10b981;
  --tokia-accent-hover:  #059669;
  --tokia-accent-soft:   #064e3b;
  --tokia-accent-glow:   rgba(16, 185, 129, 0.20);

  /* AI / premium violet (Superhuman glow) */
  --tokia-ai:            #a78bfa;
  --tokia-ai-soft:       #4c1d95;
  --tokia-ai-glow:       rgba(167, 139, 250, 0.20);

  /* Neutrals (zinc scale) */
  --tokia-bg:            #09090b;
  --tokia-surface:       #18181b;
  --tokia-surface-2:     #27272a;
  --tokia-border:        #3f3f46;
  --tokia-border-subtle: #27272a;
  --tokia-text:          #fafafa;
  --tokia-text-muted:    #a1a1aa;
  --tokia-text-subtle:   #71717a;

  /* Semantic */
  --tokia-success: #10b981;
  --tokia-warning: #f59e0b;
  --tokia-danger:  #ef4444;
  --tokia-info:    #3b82f6;

  /* Type stack */
  --tokia-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --tokia-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

/* === Tipografia global === */
html,
body {
  font-family: var(--tokia-font-sans);
  font-feature-settings: "cv11", "ss01";
}

code,
pre,
kbd,
samp,
.font-mono,
[class*="font-mono"] {
  font-family: var(--tokia-font-mono) !important;
  font-feature-settings: "tnum";
}

/* Headings ficam em 600 — não pesado demais pra dark */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* === Botão primário — emerald gradient === */
button[type="submit"],
.bg-blue-500,
.bg-blue-600,
.bg-primary {
  background: linear-gradient(135deg, var(--tokia-accent) 0%, var(--tokia-accent-hover) 100%) !important;
  color: var(--tokia-bg) !important;
  border-color: var(--tokia-accent) !important;
  font-weight: 500 !important;
  transition: all 150ms ease-out !important;
}

button[type="submit"]:hover,
.bg-blue-500:hover,
.bg-blue-600:hover,
.bg-primary:hover {
  background: linear-gradient(135deg, #34d399 0%, var(--tokia-accent) 100%) !important;
  box-shadow: 0 0 24px var(--tokia-accent-glow) !important;
  transform: translateY(-1px);
}

/* === Links e ações secundárias === */
a:not(.btn),
.text-blue-500,
.text-primary {
  color: var(--tokia-accent) !important;
  transition: color 150ms ease-out;
}

a:not(.btn):hover {
  color: #34d399 !important;
}

/* === Focus ring com glow === */
input:focus,
textarea:focus,
select:focus,
button:focus-visible {
  outline: 2px solid var(--tokia-accent) !important;
  outline-offset: 1px !important;
  box-shadow: 0 0 0 4px var(--tokia-accent-glow) !important;
  border-color: var(--tokia-accent) !important;
}

/* === Cards / surfaces interativas — hover lift + glow === */
[class*="cursor-pointer"]:hover,
[role="button"]:not([type="submit"]):hover {
  transition: all 200ms ease-out !important;
}

/* === Selection emerald === */
::selection {
  background: var(--tokia-accent);
  color: var(--tokia-bg);
}

/* === Scrollbar dark refinado === */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--tokia-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--tokia-border);
  border-radius: 5px;
  transition: background 150ms ease-out;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--tokia-accent-hover);
}

/* === Loading / spinners emerald === */
.animate-pulse[class*="bg-blue"],
.spinner[class*="border-blue"] {
  background-color: var(--tokia-accent) !important;
  border-color: var(--tokia-accent) !important;
}

/* === AI / model badges — violet glow Superhuman style === */
[data-ai-feature="true"],
[class*="model-premium"],
[class*="ai-badge"] {
  background: var(--tokia-ai-soft) !important;
  color: var(--tokia-ai) !important;
  border: 1px solid var(--tokia-ai) !important;
  box-shadow: 0 0 16px var(--tokia-ai-glow) !important;
}

/* === Status badges (sucesso, warning, danger) === */
[class*="bg-green"]:not(button) {
  background-color: var(--tokia-accent-soft) !important;
  color: var(--tokia-accent) !important;
}

[class*="bg-yellow"]:not(button),
[class*="bg-amber"]:not(button) {
  background-color: #78350f !important;
  color: var(--tokia-warning) !important;
}

[class*="bg-red"]:not(button) {
  background-color: #7f1d1d !important;
  color: var(--tokia-danger) !important;
}

/* === Respeitar prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  button[type="submit"]:hover,
  .bg-primary:hover {
    transform: none !important;
  }
}

/* ============================================================
 * Sprint 634 HRISELINK pattern — sidebar active emerald left-bar,
 * status pills rounded-full color-coded, pagination styles.
 * Aplicado via CSS overlay (LibreChat é chat-only, sem KPI cards/
 * DataTable; escopo natural pequeno aqui).
 * ============================================================ */

/* Nav item active: barra emerald à esquerda (substitui só-bg) */
[role="navigation"] a[aria-current="page"],
nav a[aria-current="page"],
nav a.active,
[class*="conversation"][class*="selected"],
[class*="conversation"][aria-selected="true"] {
  position: relative;
}
[role="navigation"] a[aria-current="page"]::before,
nav a[aria-current="page"]::before,
nav a.active::before,
[class*="conversation"][class*="selected"]::before,
[class*="conversation"][aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--tokia-accent);
  border-radius: 0 2px 2px 0;
}

/* Status pills rounded-full color-coded — para qualquer elemento
 * com data-tone ou className contendo status-* */
[data-status="success"],
[data-status="paid"],
[data-status="active"],
[data-status="completed"] {
  background-color: var(--tokia-accent-soft) !important;
  color: var(--tokia-accent) !important;
  border: 1px solid color-mix(in srgb, var(--tokia-accent) 40%, transparent) !important;
  border-radius: 9999px !important;
  padding: 2px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
[data-status="warning"],
[data-status="pending"],
[data-status="processing"],
[data-status="onboarding"] {
  background-color: rgba(245, 158, 11, 0.1) !important;
  color: var(--tokia-warning) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  border-radius: 9999px !important;
  padding: 2px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
[data-status="danger"],
[data-status="failed"],
[data-status="inactive"],
[data-status="revoked"] {
  background-color: rgba(239, 68, 68, 0.1) !important;
  color: var(--tokia-danger) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  border-radius: 9999px !important;
  padding: 2px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Pagination buttons — match HRISELINK */
nav[aria-label*="agina"] a,
nav[aria-label*="agina"] button,
[class*="pagination"] a,
[class*="pagination"] button {
  border-radius: 8px !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--tokia-border) !important;
  color: var(--tokia-text-muted) !important;
  transition: border-color 150ms ease-out, color 150ms ease-out !important;
}
nav[aria-label*="agina"] a:hover,
[class*="pagination"] a:hover {
  border-color: var(--tokia-text-subtle) !important;
  color: var(--tokia-text) !important;
}
nav[aria-label*="agina"] [aria-current="page"],
[class*="pagination"] [aria-current="page"] {
  background: var(--tokia-accent-soft) !important;
  border-color: color-mix(in srgb, var(--tokia-accent) 40%, transparent) !important;
  color: var(--tokia-accent) !important;
  font-weight: 500 !important;
}

/* ============================================================
 * Mobile refinements (DESIGN.md §9 + a11y touch guidelines)
 * Aplicado em telas táteis (largura ≤ 768 ou primary input coarse)
 * ============================================================ */

/* iOS safe-area (notch/dynamic island) — usa env() padrão */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (max-width: 768px), (pointer: coarse) {
  /* Touch targets mínimos 44x44px (WCAG 2.5.5) — aplica em
   * botões/links pequenos do LibreChat sem quebrar layout dense */
  button,
  a[role="button"],
  [role="button"],
  input[type="checkbox"] + label,
  input[type="radio"] + label {
    min-height: 44px;
    min-width: 44px;
  }
  /* Exceções: avatars/badges/ícones inline não viram blocos enormes */
  button[class*="size-"],
  button[class*="w-6"],
  button[class*="w-8"],
  button[class*="rounded-full"][class*="h-"],
  .avatar button {
    min-height: unset;
    min-width: unset;
  }

  /* Inputs com font-size ≥ 16px previnem auto-zoom iOS Safari */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Tap highlight emerald (substitui cinza default do WebKit) */
  a, button, [role="button"], input, textarea {
    -webkit-tap-highlight-color: var(--tokia-accent-glow);
  }

  /* Scrollbar invisível em mobile (touch já dá feedback visual) */
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
  * {
    scrollbar-width: none;
  }

  /* Hover desabilitado em touch (evita "stuck hover" iOS) */
  .bg-blue-500:hover,
  .bg-blue-600:hover,
  .bg-primary:hover,
  button[type="submit"]:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Body um pouco maior pra leitura confortável */
  body {
    font-size: 15px;
    -webkit-text-size-adjust: 100%;
  }

  /* Spacing mais respirável em headers */
  h1 { font-size: 1.875rem; line-height: 1.15; }
  h2 { font-size: 1.5rem;   line-height: 1.2; }
  h3 { font-size: 1.25rem;  line-height: 1.25; }
}

/* Overscroll bounce sem bg azul iOS (mantém zinc) */
html, body {
  background-color: var(--tokia-bg);
  overscroll-behavior-y: contain;
}