/* ═══════════════════════════════════════════════════
   play. brand theme — Claude Play
   ═══════════════════════════════════════════════════ */

/* ── Variáveis de marca ──────────────────────────── */
:root {
  --play-navy:    #07093C;
  --play-magenta: #EC0A64;
  --play-white:   #FFFFFF;
  --play-ink:     #1A1A2E;
  --play-neutral: #8A8A99;
  --play-line:    #E5E5EA;
  --play-soft:    #FAFAFB;
}

/* ════════════════════════════════════════════════════
   LOGIN / AUTH PAGE — redesign completo play.
   ════════════════════════════════════════════════════ */

/* Fundo navy com glow magenta sutil */
.relative.flex.min-h-screen.flex-col {
  background-color: #07093C !important;
  background-image:
    radial-gradient(ellipse 70% 50% at 75% 0%, rgba(236,10,100,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 100%, rgba(236,10,100,0.06) 0%, transparent 50%),
    repeating-linear-gradient(0deg, transparent, transparent 48px, rgba(255,255,255,0.02) 48px, rgba(255,255,255,0.02) 49px),
    repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(255,255,255,0.02) 48px, rgba(255,255,255,0.02) 49px) !important;
  min-height: 100vh !important;
}

/* Área da logo no topo — aumentar e centralizar */
.relative.flex.min-h-screen.flex-col > div:first-child,
.relative.flex.min-h-screen.flex-col .mt-6 {
  margin-top: 48px !important;
  padding: 0 20% !important;
  height: 52px !important;
}

/* Logo — já é branca (logo-inverse), sem filtro necessário */
.relative.flex.min-h-screen.flex-col img[src*="logo"],
.relative.flex.min-h-screen.flex-col img[alt*="logo"],
.relative.flex.min-h-screen.flex-col img[alt*="Claude"] {
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Card de autenticação — glass sobre navy */
.w-authPageWidth {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 20px !important;
  box-shadow:
    0 0 0 1px rgba(236,10,100,0.08),
    0 24px 64px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.1) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  padding: 40px 36px 36px !important;
}

/* Título dentro do card */
.w-authPageWidth h1 {
  color: #FFFFFF !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 6px !important;
}

/* Subtexto / mensagem de boas-vindas customizada */
.w-authPageWidth h1::after {
  content: "Acesso corporativo para colaboradores play.";
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0;
  margin-top: 6px;
}

/* Botão SSO Microsoft — principal CTA */
[data-testid="openid"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 12px !important;
  padding: 14px 24px !important;
  color: #07093C !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
  margin-top: 8px !important;
}

[data-testid="openid"]:hover {
  background: #FFFFFF !important;
  border-color: rgba(236,10,100,0.4) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 0 2px rgba(236,10,100,0.15) !important;
  transform: translateY(-1px) !important;
}

[data-testid="openid"]:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

/* Ícone Microsoft dentro do botão */
[data-testid="openid"] img,
[data-testid="openid"] svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

/* Logo Microsoft via CSS caso o ícone não carregue */
[data-testid="openid"] svg {
  display: block !important;
}

/* Texto do botão SSO */
[data-testid="openid"] p {
  color: #07093C !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Divisor "Or" — ocultar (sem email login) */
.relative.mt-6.flex.w-full.items-center.justify-center.border {
  display: none !important;
}

/* ThemeSelector canto inferior esquerdo — deixar sutil */
.absolute.bottom-0.left-0 {
  opacity: 0.4 !important;
}
.absolute.bottom-0.left-0:hover {
  opacity: 1 !important;
}

/* Footer LibreChat — ocultar branding da versão */
[role="contentinfo"] { display: none !important; }

/* Logo play. no sidebar pós-login */
#play-app-logo {
  display: flex;
  align-items: center;
  padding: 0 8px;
  flex-shrink: 0;
}
#play-app-logo img {
  height: 22px;
  width: auto;
  display: block;
}

/* Mensagem de erro (toast) — garantir visível no fundo escuro */
.relative.flex.min-h-screen.flex-col [class*="ErrorMessage"],
.relative.flex.min-h-screen.flex-col [class*="error-message"] {
  background: rgba(236,10,100,0.15) !important;
  border: 1px solid rgba(236,10,100,0.4) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
}

/* ════════════════════════════════════════════════════
   CHAT INTERFACE — dark mode play. brand
   ════════════════════════════════════════════════════ */

/* Dark mode: sidebar e nav navy */
[data-theme="dark"] nav,
[data-theme="dark"] [class*="sidebar"],
[data-theme="dark"] [class*="Sidebar"] {
  background-color: #07093C !important;
}

[data-theme="dark"] header {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* Dark mode: input */
[data-theme="dark"] [class*="chat-input"],
[data-theme="dark"] [class*="ChatInput"],
[data-theme="dark"] [class*="message-input"],
[data-theme="dark"] textarea[class*="input"] {
  border-color: rgba(255,255,255,0.12) !important;
  background-color: #0d1049 !important;
}

/* Dark mode: logo branca no fundo escuro — perfeito sem ajuste */
[data-theme="dark"] img[src*="logo.svg"],
[data-theme="dark"] img[alt*="logo"],
[data-theme="dark"] img[alt*="LibreChat"],
[data-theme="dark"] img[alt*="Claude"] {
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Light mode chat: logo branca precisa de pill navy para ser visível */
[data-theme="light"] img[src*="logo.svg"],
[data-theme="light"] img[alt*="logo"],
[data-theme="light"] img[alt*="LibreChat"],
[data-theme="light"] img[alt*="Claude"] {
  background: #07093C !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
}

/* Light mode: sidebar e header limpos */
[data-theme="light"] nav,
[data-theme="light"] [class*="sidebar"],
[data-theme="light"] [class*="Sidebar"] {
  background-color: #FAFAFB !important;
  border-right: 1px solid #E5E5EA !important;
}

[data-theme="light"] header {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #E5E5EA !important;
}

/* Acento magenta — botão de envio */
button[type="submit"],
[class*="send-button"],
[class*="SendButton"] {
  background-color: var(--play-magenta) !important;
  border-color: var(--play-magenta) !important;
  color: #fff !important;
}
button[type="submit"]:hover {
  background-color: #c4085a !important;
}

[class*="active"][class*="nav"],
[class*="selected"] {
  color: var(--play-magenta) !important;
}

/* Scrollbar dark */
[data-theme="dark"] ::-webkit-scrollbar { width: 4px; height: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(236,10,100,0.4); }

/* Scrollbar light */
[data-theme="light"] ::-webkit-scrollbar { width: 4px; height: 4px; }
[data-theme="light"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(7,9,60,0.15); border-radius: 2px; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(236,10,100,0.4); }

/* Tipografia Inter */
body, * {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
code, pre, [class*="code"], [class*="Code"] {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
}

/* ════════════════════════════════════════════════════
   iOS SAFE AREAS — Dynamic Island, notch, home indicator
   iPhone 17 Pro / 16 Pro / 15 Pro etc. com viewport-fit=cover
   ════════════════════════════════════════════════════ */
@supports(padding-top: env(safe-area-inset-top)) {
  @media(max-width: 768px) {

    /* ── Header / top bar ─────────────────────────────── */
    /* Empurra conteúdo abaixo do Dynamic Island / notch.
       NUNCA usar [class*="fixed"][class*="top-0"] aqui — matcha o sidebar
       drawer (fixed left-0 top-0) e destrói seu height. */
    header,
    [class*="sticky"][class*="top-0"],
    [data-theme] header {
      padding-top: max(12px, env(safe-area-inset-top)) !important;
      height: auto !important;
      min-height: calc(56px + env(safe-area-inset-top)) !important;
    }

    /* ── Sidebar mobile drawer (UnifiedSidebar) ──────── */
    /* Tailwind classes: fixed left-0 top-0 (drawer abre da esquerda).
       .fixed.left-0.top-0 é altamente específico — só o drawer tem os três.
       Adiciona padding-top para conteúdo não ficar sob o Dynamic Island.
       NÃO sobrescreve height nem min-height. */
    .fixed.left-0.top-0 {
      padding-top: env(safe-area-inset-top) !important;
    }

    /* ── Bottom input area ────────────────────────────── */
    [class*="sticky"][class*="bottom-0"],
    [class*="fixed"][class*="bottom-0"],
    [data-testid="chat-form"],
    form[class*="stretch"],
    .sticky.bottom-0 {
      padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    }

    /* ── Floating PWA banners ──────────────────────────── */
    #pwa-android-banner,
    #pwa-ios-banner {
      bottom: max(80px, calc(80px + env(safe-area-inset-bottom))) !important;
    }

    /* ── Modal / overlay do agendador ────────────────── */
    #pc-sched-modal .modal-content,
    #pc-sched-modal > div {
      padding-bottom: max(24px, calc(16px + env(safe-area-inset-bottom))) !important;
    }
  }
}