/* ============================================================
   Jacob Home Premium v1
   Identidade, respiro, simetria, sidebar, chat e painel direito
   ============================================================ */

:root {
  --jp-sidebar: 188px;
  --jp-right: 300px;
  --jp-gap: 18px;
  --jp-radius-xl: 24px;
  --jp-radius-lg: 18px;
  --jp-cyan: #22d3ee;
  --jp-blue: #1d4ed8;
  --jp-bg-1: rgba(2, 6, 23, 0.96);
  --jp-bg-2: rgba(15, 23, 42, 0.78);
  --jp-border: rgba(56, 189, 248, 0.18);
  --jp-border-strong: rgba(56, 189, 248, 0.36);
  --jp-text: #e5f6ff;
  --jp-muted: #94a3b8;
}

/* Shell principal */
.os-window {
  width: calc(100vw - 18px) !important;
  height: calc(100vh - 18px) !important;
  max-width: 1600px !important;
  margin: 9px auto !important;
  display: grid !important;
  grid-template-columns: var(--jp-sidebar) minmax(620px, 1fr) var(--jp-right) !important;
  gap: var(--jp-gap) !important;
  padding: 14px !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  box-sizing: border-box !important;
}

/* Sidebar premium */
.sidebar {
  grid-column: 1 !important;
  width: var(--jp-sidebar) !important;
  min-width: var(--jp-sidebar) !important;
  max-width: var(--jp-sidebar) !important;
  height: 100% !important;
  padding: 14px 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

.sidebar::before {
  content: none !important;
  display: none !important;
}

.jacob-old-brand-hidden {
  display: none !important;
}

.jacob-premium-brand {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px !important;
  margin: 0 0 12px !important;
  border: 1px solid var(--jp-border) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 20% 15%, rgba(34, 211, 238, 0.20), transparent 38%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.96)) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22) !important;
}

.jacob-premium-brand img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.22)) !important;
}

.jacob-premium-brand strong {
  display: block !important;
  color: var(--jp-text) !important;
  font-size: 0.96rem !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
}

.jacob-premium-brand span {
  display: block !important;
  margin-top: 3px !important;
  color: var(--jp-muted) !important;
  font-size: 0.68rem !important;
  line-height: 1.15 !important;
}

/* Navegação esquerda */
.sidebar nav,
.nav-list,
.menu-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-item,
.sidebar button,
.sidebar a {
  width: 100% !important;
  min-height: 42px !important;
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 9px 10px !important;
  border-radius: 14px !important;
  line-height: 1.15 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.nav-item span,
.sidebar button span,
.sidebar a span {
  min-width: 0 !important;
  overflow-wrap: normal !important;
}

.sidebar strong,
.sidebar span {
  white-space: normal !important;
}

/* Centro */
.main,
.main-content,
.workspace,
.workspace-column,
.center-column,
.content {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Área da Home */
.home-grid,
.dashboard-grid,
.main-grid {
  gap: 18px !important;
}

/* Cards premium */
.card,
.dashboard-card,
.panel-card,
.conversation-panel,
.human-presence,
.right-panel > *,
.real-panel {
  border-radius: var(--jp-radius-xl) !important;
  border-color: var(--jp-border) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.20) !important;
}

.card,
.dashboard-card,
.panel-card {
  padding: 20px !important;
}

/* Chat premium */
.presence-and-chat {
  min-width: 0 !important;
  gap: 14px !important;
}

.conversation-panel,
.priority-chat {
  min-width: 0 !important;
  min-height: 0 !important;
  height: clamp(430px, 52vh, 560px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.conversation-panel .card-label {
  flex: 0 0 auto !important;
}

#messages,
.messages,
.chat-history {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 16px !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  scroll-padding-bottom: 24px !important;
}

.message {
  max-width: 86% !important;
  box-sizing: border-box !important;
}

.message.user {
  align-self: flex-end !important;
}

.message.jacob {
  align-self: flex-start !important;
  position: relative !important;
  padding-bottom: 46px !important;
}

/* Composer premium */
#chat-form,
.chat-form,
.chat-composer {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 54px !important;
  grid-template-rows: auto auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 14px 16px 16px !important;
  margin: 0 !important;
  border-top: 1px solid var(--jp-border) !important;
  background: linear-gradient(180deg, rgba(3, 10, 24, 0.72), rgba(3, 10, 24, 0.98)) !important;
  backdrop-filter: blur(14px) !important;
  box-sizing: border-box !important;
}

.jacob-attach-button {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 0 !important;
  background: rgba(15, 23, 42, 0.92) !important;
  border: 1px solid var(--jp-border-strong) !important;
  box-shadow: none !important;
}

.jacob-attach-button::before {
  content: "📎";
  font-size: 1.15rem !important;
}

#chat-input,
.chat-form textarea,
.chat-form input[type="text"] {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 54px !important;
  max-height: 132px !important;
  margin: 0 !important;
  resize: vertical !important;
  box-sizing: border-box !important;
}

#chat-form .send-message,
.chat-form .send-message,
.send-message {
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  border-radius: 17px !important;
}

.quick-actions,
.chat-suggestions,
.chat-shortcuts,
.jacob-premium-quick-actions {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.quick-actions button,
.chat-suggestions button,
.chat-shortcuts button,
.jacob-premium-quick-actions button {
  min-height: 34px !important;
  padding: 6px 13px !important;
  border-radius: 999px !important;
}

/* Copiar */
.jacob-copy-button {
  position: absolute !important;
  right: 12px !important;
  bottom: 10px !important;
  z-index: 4 !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
}

/* Painel direito */
.right-panel {
  grid-column: 3 !important;
  width: var(--jp-right) !important;
  min-width: var(--jp-right) !important;
  max-width: var(--jp-right) !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 6px 0 0 !important;
  box-sizing: border-box !important;
}

/* Scrollbars discretas */
.sidebar::-webkit-scrollbar,
.right-panel::-webkit-scrollbar,
.messages::-webkit-scrollbar {
  width: 7px;
}

.sidebar::-webkit-scrollbar-thumb,
.right-panel::-webkit-scrollbar-thumb,
.messages::-webkit-scrollbar-thumb {
  background: rgba(34, 211, 238, 0.55);
  border-radius: 999px;
}

/* Responsividade */
@media (max-width: 1320px) {
  :root {
    --jp-sidebar: 174px;
    --jp-right: 280px;
    --jp-gap: 14px;
  }

  .os-window {
    grid-template-columns: var(--jp-sidebar) minmax(560px, 1fr) var(--jp-right) !important;
  }
}

@media (max-width: 1080px) {
  .os-window {
    grid-template-columns: 170px minmax(0, 1fr) !important;
  }

  .right-panel {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .os-window {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 100vh !important;
  }

  .sidebar {
    display: none !important;
  }

  .conversation-panel,
  .priority-chat {
    height: 70vh !important;
  }
}



/* ============================================================
   Jacob Home Premium Layout Final v2
   Correção final de sidebar, chat, composer e respiro visual
   ============================================================ */

:root {
  --jp-sidebar: 210px;
  --jp-right: 310px;
  --jp-gap: 18px;
}

/* Shell premium com colunas mais estáveis */
.os-window {
  display: grid !important;
  grid-template-columns: var(--jp-sidebar) minmax(720px, 1fr) var(--jp-right) !important;
  gap: var(--jp-gap) !important;
  padding: 18px !important;
  overflow: hidden !important;
}

/* Sidebar: sem espaço morto e sem sobreposição */
.sidebar {
  grid-column: 1 !important;
  width: var(--jp-sidebar) !important;
  min-width: var(--jp-sidebar) !important;
  max-width: var(--jp-sidebar) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 14px 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

/* Logo oficial no topo */
.jacob-premium-brand {
  flex: 0 0 auto !important;
  margin: 0 0 22px 0 !important;
  padding: 12px !important;
  min-height: 78px !important;
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  border-radius: 20px !important;
}

.jacob-premium-brand img {
  width: 50px !important;
  height: 50px !important;
  object-fit: contain !important;
}

.jacob-premium-brand strong {
  font-size: 0.96rem !important;
  line-height: 1.05 !important;
}

.jacob-premium-brand span {
  font-size: 0.68rem !important;
  line-height: 1.1 !important;
}

/* Esconde resíduos de marca antiga */
.jacob-old-brand-hidden {
  display: none !important;
}

/* Navegação começa logo abaixo da marca */
.sidebar nav,
.sidebar .nav-list,
.sidebar .menu-list {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Botões do menu alinhados e respirando */
.nav-item,
.sidebar nav button,
.sidebar nav a {
  width: 100% !important;
  min-height: 44px !important;
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 10px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  border-radius: 15px !important;
  line-height: 1.15 !important;
  text-align: left !important;
  white-space: normal !important;
  box-sizing: border-box !important;
}

.nav-item span,
.sidebar nav button span,
.sidebar nav a span {
  min-width: 0 !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Rodapé da sidebar vai para baixo sem sobrepor o menu */
.jacob-sidebar-footer {
  flex: 0 0 auto !important;
  margin-top: auto !important;
  padding: 14px 8px 4px !important;
  text-align: center !important;
  color: rgba(203, 213, 225, 0.72) !important;
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
}

.jacob-sidebar-footer strong {
  display: block !important;
  margin-bottom: 4px !important;
  color: rgba(229, 246, 255, 0.88) !important;
  font-size: 0.78rem !important;
}

/* Coluna central */
.main,
.content,
.workspace,
.main-content,
.center-column,
.workspace-column {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Chat: altura e estrutura estáveis */
.conversation-panel,
.priority-chat,
.chat-panel {
  height: clamp(460px, 55vh, 610px) !important;
  min-height: 460px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Cabeçalho do chat não deve competir com mensagens */
.conversation-panel > .card-label,
.priority-chat > .card-label {
  flex: 0 0 auto !important;
  margin-bottom: 10px !important;
}

/* Lista de mensagens sem corte inicial */
#messages,
.messages,
.chat-history {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  scroll-padding-bottom: 24px !important;
}

/* Mensagens */
.message {
  max-width: 86% !important;
  box-sizing: border-box !important;
}

.message.user {
  align-self: flex-end !important;
}

.message.jacob {
  align-self: flex-start !important;
  position: relative !important;
  padding-bottom: 46px !important;
}

/* Composer limpo: anexar + input + enviar */
#chat-form,
.chat-form,
.chat-composer {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 56px !important;
  grid-template-rows: auto auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 14px 16px 16px !important;
  margin: 0 !important;
  border-top: 1px solid rgba(56, 189, 248, 0.18) !important;
  background: linear-gradient(180deg, rgba(3, 10, 24, 0.82), rgba(3, 10, 24, 0.99)) !important;
  box-sizing: border-box !important;
}

.jacob-attach-button {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 0 !important;
}

.jacob-attach-button::before {
  content: "📎";
  font-size: 1.14rem !important;
}

#chat-input,
.chat-form textarea,
.chat-form input[type="text"] {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 54px !important;
  max-height: 128px !important;
  margin: 0 !important;
  resize: vertical !important;
  box-sizing: border-box !important;
}

#chat-form .send-message,
.chat-form .send-message,
.send-message {
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 18px !important;
}

/* Botões rápidos como pills, não blocos quadrados */
.quick-actions,
.chat-suggestions,
.chat-shortcuts,
.jacob-premium-quick-actions {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.quick-actions button,
.chat-suggestions button,
.chat-shortcuts button,
.jacob-premium-quick-actions button,
#chat-form > button:not(.jacob-attach-button):not(.send-message) {
  width: auto !important;
  min-width: 84px !important;
  max-width: none !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  font-size: 0.78rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Botão “Como pensei” ou equivalente não fica solto */
#chat-form > button:not(.jacob-attach-button):not(.send-message) {
  grid-row: 2 !important;
}

/* Botão copiar discreto */
.jacob-copy-button {
  position: absolute !important;
  right: 12px !important;
  bottom: 10px !important;
  z-index: 4 !important;
  min-width: 78px !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
}

/* Painel direito com respiro */
.right-panel {
  grid-column: 3 !important;
  width: var(--jp-right) !important;
  min-width: var(--jp-right) !important;
  max-width: var(--jp-right) !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 6px 0 0 !important;
  box-sizing: border-box !important;
}

/* Cards e respiros */
.card,
.dashboard-card,
.panel-card {
  padding: 22px !important;
  border-radius: 24px !important;
  box-sizing: border-box !important;
}

/* Responsividade */
@media (max-width: 1320px) {
  :root {
    --jp-sidebar: 190px;
    --jp-right: 290px;
    --jp-gap: 14px;
  }

  .os-window {
    grid-template-columns: var(--jp-sidebar) minmax(620px, 1fr) var(--jp-right) !important;
  }
}

@media (max-width: 1120px) {
  .os-window {
    grid-template-columns: 180px minmax(0, 1fr) !important;
  }

  .right-panel {
    display: none !important;
  }
}



/* Jacob File Reader Real v1 */
.jacob-upload-status {
  grid-column: 1 / -1 !important;
  min-height: 18px !important;
  font-size: 0.78rem !important;
  line-height: 1.25 !important;
  color: #bfdbfe;
}

.jacob-attachment-tray {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.45rem !important;
}

.jacob-attachment-chip {
  border: 1px solid rgba(56, 189, 248, 0.28) !important;
  border-radius: 999px !important;
  padding: 0.3rem 0.65rem !important;
  color: #dbeafe !important;
  background: rgba(15, 23, 42, 0.82) !important;
  font-size: 0.76rem !important;
}



/* Jacob File Reader — fila acumulativa de anexos */
.jacob-attachment-tray {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.45rem !important;
  align-items: center !important;
}

.jacob-attachment-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  border: 1px solid rgba(56, 189, 248, 0.30) !important;
  border-radius: 999px !important;
  padding: 0.32rem 0.45rem 0.32rem 0.68rem !important;
  color: #dbeafe !important;
  background: rgba(15, 23, 42, 0.84) !important;
  font-size: 0.76rem !important;
  max-width: 100% !important;
}

.jacob-attachment-remove {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(248, 113, 113, 0.45) !important;
  background: rgba(127, 29, 29, 0.35) !important;
  color: #fecaca !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.jacob-attachments-clear {
  min-height: 30px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.30) !important;
  background: rgba(15, 23, 42, 0.72) !important;
  color: #cbd5e1 !important;
  padding: 0.25rem 0.7rem !important;
  cursor: pointer !important;
  font-size: 0.74rem !important;
}

.jacob-upload-status {
  grid-column: 1 / -1 !important;
  min-height: 18px !important;
  font-size: 0.78rem !important;
  line-height: 1.25 !important;
  color: #bfdbfe;
}



/* Jacob File Reader v2.1 — resposta formatada */
.message p,
.message .message-body,
.message.jacob p,
.message.user p {
  white-space: pre-line !important;
}

.message.jacob {
  line-height: 1.45 !important;
}

/* Jacob product mode: campos técnicos internos não aparecem para usuário final */
[hidden],
.jacob-internal-only,
.real-access-panel.jacob-internal-only {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}