/* ==============================================
   Eligard - Custom Stylesheet
   Customização visual do Chainlit
   ============================================== */

/* ── Alerta info "Suas conversas aparecerão aqui" – cinza ──────── */
[role="alert"],
[class*="bg-blue"] {
  background-color: hsl(0 0% 15%) !important;
  opacity: 0.50 !important;
}
[role="alert"] svg,
[class*="text-blue"] {
  color: hsl(0 0% 60%) !important;
}
[class*="border-blue"] {
  border-color: hsl(0 0% 25%) !important;
}

/* ── Sidebar: estilos gerenciados pelo custom.js (inline)
   O JS esconde os botões originais e injeta a nav vertical.
   Nenhum CSS adicional necessário para a sidebar.
   ─────────────────────────────────────────────── */

/* ── Chat Profile no header: escondido completamente ─────────── */
/* JS marca o wrapper com data-eligard-hidden; CSS garante que fique
   oculto mesmo após re-renders do React (inline !important > inline normal). */

/* ── Anti-flash: esconde main até o chat estar pronto ────────── */
/* CSS carrega ANTES do React renderizar, então main fica invisível
   desde o primeiro frame. O JS adiciona .eligard-ready quando mensagens
   aparecem no DOM, revelando o conteúdo com fade-in suave. */
body:not(.eligard-ready) main,
body:not(.eligard-ready) [class*="chat-body"] {
  opacity: 0 !important;
}

/* ── Overlay de transição ao trocar de flow ─────────────────── */
/* Gerenciado pelo custom.js – sobrepõe o eligard-ready com !important */
body.eligard-transitioning main,
body.eligard-transitioning [class*="chat-body"] {
  opacity: 0 !important;
  transition: none !important;
}
body.eligard-transition-fadein main,
body.eligard-transition-fadein [class*="chat-body"] {
  opacity: 1 !important;
  transition: opacity 0.15s ease !important;
}

[data-eligard-hidden] {
  visibility: hidden !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ── Breakpoints ──────────────────────────────
   Mobile:  até 600px
   Tablet:  601px – 900px
   Desktop: 901px+
   ───────────────────────────────────────────── */

/* ── Mobile (até 600px) ────────────────────── */
@media (max-width: 600px) {

  /* Sidebar: esconde por padrão no mobile,
     o botão de toggle do Chainlit continua funcional */
  .MuiDrawer-root .MuiDrawer-paper {
    width: 85vw !important;
    max-width: 300px;
  }

  /* Chat container: usa largura total */
  main,
  [class*="chat-body"],
  [class*="message-container"] {
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Mensagens: padding reduzido para aproveitar espaço */
  [class*="message"] .MuiBox-root {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Header / AppBar: mais compacto */
  .MuiAppBar-root .MuiToolbar-root {
    min-height: 48px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Título no header: fonte menor */
  .MuiAppBar-root .MuiTypography-root {
    font-size: 0.95rem !important;
  }

  /* Input de mensagem: ocupa toda largura */
  [class*="composer"] {
    max-width: 100% !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
  }

  /* Textarea do input: tamanho adequado */
  textarea,
  [class*="composer"] textarea {
    font-size: 16px !important; /* evita zoom automático no iOS */
  }

  /* Botões de ação: tamanho touch-friendly */
  [class*="composer"] button,
  [class*="composer"] .MuiIconButton-root {
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* Watermark / footer: compacto */
  [class*="watermark"],
  a[href*="chainlit"] {
    font-size: 0.7rem !important;
  }

  /* Login page: responsivo */
  [class*="auth"],
  [class*="login"] {
    width: 90vw !important;
    max-width: 400px !important;
    padding: 16px !important;
  }

  /* Card de login: formulário */
  .MuiPaper-root form {
    width: 100% !important;
  }

  /* Inputs do login */
  .MuiPaper-root .MuiTextField-root {
    width: 100% !important;
  }

  /* Elementos/Attachments: scroll horizontal se necessário */
  [class*="element"],
  [class*="attachment"] {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  /* Imagens dentro de mensagens */
  [class*="message"] img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Tabelas dentro de mensagens */
  [class*="message"] table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
  }

  /* Code blocks: scroll horizontal */
  [class*="message"] pre {
    max-width: 100% !important;
    overflow-x: auto !important;
    font-size: 0.8rem !important;
  }

  /* Dialog / Modal: responsivo */
  .MuiDialog-paper {
    margin: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: 100% !important;
    max-height: calc(100vh - 16px) !important;
  }

  /* Thread list no sidebar: itens mais compactos */
  .MuiDrawer-paper .MuiList-root .MuiListItem-root {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* Tooltips: não mostrar no mobile (usar touch em vez disso) */
  .MuiTooltip-popper {
    display: none !important;
  }
}

/* ── Tablet (601px – 900px) ─────────────────── */
@media (min-width: 601px) and (max-width: 900px) {

  /* Sidebar: largura moderada */
  .MuiDrawer-root .MuiDrawer-paper {
    width: 280px !important;
  }

  /* Chat container */
  main,
  [class*="chat-body"] {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Input */
  [class*="composer"] {
    max-width: 95% !important;
  }

  /* Mensagens: margem intermediária */
  [class*="message"] .MuiBox-root {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Login page */
  [class*="auth"],
  [class*="login"] {
    width: 70vw !important;
    max-width: 500px !important;
  }

  /* Dialog */
  .MuiDialog-paper {
    margin: 16px !important;
    max-width: calc(100vw - 32px) !important;
  }
}

/* ── Melhorias gerais para touch ────────────── */
@media (hover: none) and (pointer: coarse) {

  /* Área de toque mínima de 44px (recomendação Apple/Google) */
  button,
  .MuiIconButton-root,
  .MuiListItemButton-root {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Scrollbar mais fina em dispositivos touch */
  ::-webkit-scrollbar {
    width: 4px !important;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
  }

  /* Links e botões: sem efeito hover preso */
  a:hover,
  button:hover {
    transition: none !important;
  }
}

/* ── Safe area (notch de iPhones, etc.) ─────── */
@supports (padding: env(safe-area-inset-bottom)) {
  [class*="composer"] {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  .MuiAppBar-root {
    padding-top: env(safe-area-inset-top) !important;
  }
}