/* ============================================================================ Capi Când-IA Pro — FORCE FINAL (Fase 2.7) Última camada CSS. !important em tudo. Selectors com html/body/dark-mode pra máxima specificity. Vence as ~1200 linhas de CSS legado inline do index.html. IMPORTANTE: carregar este arquivo POR ÚLTIMO no . ============================================================================ */ /* ═══════════════════ BODY · HTML ═══════════════════ */ html, html body, html body.capi-ambient, html body.capi-input-glass, html body.dark-mode, html body.capi-ambient.dark-mode { background: #0a0a0a !important; color: #fafafa !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* Kill todos pseudo-elements ambient do body */ html body::before, html body::after, html body.capi-ambient::before, html body.capi-ambient::after { display: none !important; content: none !important; background: transparent !important; animation: none !important; } /* ═══════════════════ TIPOGRAFIA GLOBAL ═══════════════════ */ html body h1, html body h2, html body h3, html body h4, html body h5, html body h6, html body .auth-logo h1, html body .onboarding-title, html body .sidebar-title, html body .ds-welcome-title, html body .ds-auth-title { font-family: 'Inter Tight', 'Inter', sans-serif !important; letter-spacing: -0.02em !important; } html body code, html body pre, html body kbd, html body .msg-timestamp, html body .conv-item-date, html body .ds-conv-row-date, html body .ds-section-label, html body .ds-label-mono, html body .ds-brand-mark-badge { font-family: 'JetBrains Mono', ui-monospace, monospace !important; } /* ═══════════════════ SIDEBAR · border-right 1px padrão (sem redundância de shadow) ═══════════════════ */ html body #chatScreen .sidebar, html body #chatScreen.ds-shell .ds-sidebar, html body aside.sidebar, html body #sidebar { background: #0a0a0a !important; /* 1px no mesmo tom dos outros divisores (topbar, sidebar-header, dividers internos) */ border-right: 1px solid rgba(255,255,255,0.08) !important; box-shadow: none !important; color: #aaa !important; } /* Posicionamento desktop (acima do glow pseudo do main). Em mobile a sidebar vira drawer com position:fixed — não sobrescrever, senão quebra o slide-in */ @media (min-width: 901px) { html body #chatScreen .sidebar, html body #chatScreen.ds-shell .ds-sidebar, html body aside.sidebar, html body #sidebar { position: relative !important; z-index: 20 !important; } } /* Main sem border-left tb */ html body #chatScreen .chat-main, html body #chatScreen.ds-shell .ds-shell-main { border-left: none !important; margin-left: 0 !important; } /* Divisores HORIZONTAIS internos da sidebar (subtle, só pra organizar seções) */ html body #chatScreen .ds-sidebar-divider { height: 1px !important; background: rgba(255,255,255,0.06) !important; margin: 10px 14px !important; border: none !important; display: block !important; } /* Sidebar header e topbar SEM border-bottom (sem linha horizontal entre header e conteúdo) — única linha visível é a do topbar/sidebar-header pra delinear o "topo" do app */ html body #chatScreen .ds-sidebar-header, html body #chatScreen .sidebar-header { border-bottom: 1px solid rgba(255,255,255,0.06) !important; } /* Footer da sidebar com border-top sutil */ html body #chatScreen .ds-sidebar-footer, html body #chatScreen .sidebar-footer { border-top: 1px solid rgba(255,255,255,0.06) !important; } /* Header da sidebar — ALINHA com topbar (mesma altura, agora com mais respiro) */ html body #chatScreen .sidebar .sidebar-header, html body #chatScreen.ds-shell .ds-sidebar-header { padding: 14px 14px !important; min-height: 60px !important; height: 60px !important; box-sizing: border-box !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; background: transparent !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } /* Brand mark da sidebar */ html body .ds-brand-mark-title { font-family: 'Inter Tight', 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 13px !important; color: #fafafa !important; letter-spacing: -0.01em !important; } html body .ds-brand-mark-badge { font-size: 9px !important; color: #666 !important; padding: 2px 6px !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 4px !important; } /* Nav items (Codex-style) */ html body #chatScreen .ds-nav-item, html body #chatScreen a.ds-nav-item, html body #chatScreen a.ds-nav-item:link, html body #chatScreen a.ds-nav-item:visited, html body #chatScreen button.ds-nav-item { display: flex !important; align-items: center !important; gap: 10px !important; width: calc(100% - 16px) !important; margin: 0 8px !important; padding: 8px 12px !important; border-radius: 6px !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; color: #888 !important; background: transparent !important; border: none !important; text-align: left !important; cursor: pointer !important; text-decoration: none !important; } html body #chatScreen .ds-nav-item-primary, html body #chatScreen a.ds-nav-item-primary, html body #chatScreen button.ds-nav-item-primary { color: #D4A017 !important; } html body #chatScreen .ds-nav-item:hover, html body #chatScreen a.ds-nav-item:hover { background: rgba(255,255,255,0.04) !important; color: #fafafa !important; } html body #chatScreen .ds-nav-item-shortcut { margin-left: auto !important; font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important; color: #666 !important; background: rgba(255,255,255,0.04) !important; padding: 1px 5px !important; border-radius: 3px !important; border: 1px solid rgba(255,255,255,0.06) !important; } /* Section labels (FERRAMENTAS, HOJE, etc.) */ html body #chatScreen .ds-section-label { padding: 4px 16px !important; font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important; font-weight: 500 !important; color: #666 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; } /* Dividers da sidebar */ html body #chatScreen .ds-sidebar-divider { height: 1px !important; background: rgba(255,255,255,0.06) !important; margin: 10px 14px !important; border: none !important; } /* Conversation rows (legacy .conv-item rendering) */ html body #chatScreen .conv-item { padding: 6px 12px !important; margin: 0 10px 1px !important; border-radius: 6px !important; background: transparent !important; border: none !important; border-left: 2px solid transparent !important; color: #aaa !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; min-height: 0 !important; } html body #chatScreen .conv-item:hover { background: rgba(255,255,255,0.04) !important; color: #fafafa !important; } html body #chatScreen .conv-item.active { background: rgba(212,160,23,0.08) !important; border-left-color: #D4A017 !important; color: #D4A017 !important; padding-left: 10px !important; } html body #chatScreen .conv-item-title { font-size: 13px !important; font-weight: 500 !important; white-space: nowrap !important; text-overflow: ellipsis !important; overflow: hidden !important; color: inherit !important; font-family: 'Inter', sans-serif !important; } html body #chatScreen .conv-item-date { font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important; color: #555 !important; } html body #chatScreen .conv-item.active .conv-item-date { color: #8a6810 !important; } /* Empty state */ html body #chatScreen .conv-empty { padding: 14px !important; font-size: 11.5px !important; color: #555 !important; text-align: center !important; background: transparent !important; border: none !important; font-family: 'Inter', sans-serif !important; line-height: 1.5 !important; } /* Footer da sidebar */ html body #chatScreen .ds-sidebar-footer, html body #chatScreen .sidebar-footer { border-top: 1px solid rgba(255,255,255,0.06) !important; padding: 12px 14px !important; display: flex !important; align-items: center !important; gap: 10px !important; background: #0a0a0a !important; flex-shrink: 0 !important; } html body #chatScreen .ds-sidebar-footer-name, html body #chatScreen .user-name-s { font-size: 12.5px !important; color: #fafafa !important; font-weight: 500 !important; font-family: 'Inter', sans-serif !important; white-space: nowrap !important; text-overflow: ellipsis !important; overflow: hidden !important; } html body #chatScreen .ds-sidebar-footer-email, html body #chatScreen .user-email-s { font-size: 10px !important; color: #666 !important; font-family: 'JetBrains Mono', monospace !important; white-space: nowrap !important; text-overflow: ellipsis !important; overflow: hidden !important; } /* Avatar (RC etc.) */ html body #chatScreen .ds-avatar, html body #chatScreen .user-avatar { background: rgba(212,160,23,0.10) !important; border: 1px solid rgba(212,160,23,0.30) !important; color: #D4A017 !important; font-family: 'Inter Tight', sans-serif !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; } html body #chatScreen .ds-avatar.ds-avatar-sm, html body #chatScreen .user-avatar { width: 28px !important; height: 28px !important; font-size: 11px !important; } /* ═══════════════════ TOPBAR · alinhado com sidebar-header (60px com respiro) ═══════════════════ */ html body #chatScreen .chat-header, html body #chatScreen .ds-topbar { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 18px !important; min-height: 60px !important; height: 60px !important; box-sizing: border-box !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; background: #0a0a0a !important; flex-shrink: 0 !important; position: sticky !important; top: 0 !important; z-index: 10 !important; } /* Main area opaco · glow dourado começa EXATAMENTE depois da linha do topbar (top: 52px) */ html body #chatScreen .chat-main, html body #chatScreen.ds-shell .ds-shell-main { position: relative !important; background: #0a0a0a !important; overflow: hidden !important; } html body #chatScreen .chat-main::before, html body #chatScreen.ds-shell .ds-shell-main::before { content: '' !important; position: absolute !important; top: 60px !important; left: 0 !important; right: 0 !important; height: 55% !important; /* Glow do chat — desce mais suavemente */ background: radial-gradient(ellipse at center top, rgba(212,160,23,0.022) 0%, rgba(212,160,23,0.012) 20%, rgba(212,160,23,0.005) 45%, transparent 70%) !important; pointer-events: none !important; z-index: 1 !important; } /* ═══════════════════ SIDEBAR · travada · scroll só interno na lista de conversas ═══════════════════ */ /* Sidebar inteira NÃO rola — tudo fixo */ html body #chatScreen .ds-sidebar, html body #chatScreen .sidebar, html body #chatScreen .ds-shell-sidebar { overflow: hidden !important; height: 100vh !important; height: 100dvh !important; display: flex !important; flex-direction: column !important; } /* Body do sidebar é flex column que distribui: tools fixos, convList flex, projects fixo */ html body #chatScreen .ds-sidebar-body, html body #chatScreen .sidebar-body { flex: 1 1 0 !important; min-height: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } /* Tools/section labels/nav items no topo do body → travados */ html body #chatScreen .ds-sidebar-body > .ds-nav-item, html body #chatScreen .ds-sidebar-body > .ds-section-label, html body #chatScreen .ds-sidebar-body > .ds-sidebar-divider, html body #chatScreen .ds-sidebar-body > #convSectionHeader, html body #chatScreen .ds-sidebar-body > input[type="email"], html body #chatScreen .ds-sidebar-body > input[type="password"], html body #chatScreen .ds-sidebar-body > #convSearchInput { flex-shrink: 0 !important; } /* Lista de conversas — ÚNICO elemento com scroll, invisível */ html body #chatScreen .conv-list, html body #chatScreen #convList { flex: 1 1 0 !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; /* Esconde scrollbar (Firefox) */ scrollbar-width: none !important; /* Esconde scrollbar (IE/Edge legacy) */ -ms-overflow-style: none !important; } /* Esconde scrollbar (WebKit) */ html body #chatScreen .conv-list::-webkit-scrollbar, html body #chatScreen #convList::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } /* Seção de projetos travada no fim do body (acima do footer) */ html body #chatScreen .ds-sidebar-body > .projects-section, html body #chatScreen .ds-sidebar-body > #projectsSection { flex-shrink: 0 !important; margin-top: 0 !important; } /* Spacer removido (não precisa mais — projects-section já fica no fim por flex flow) */ html body #chatScreen .ds-sidebar-spacer { display: none !important; } /* Footer (perfil) travado em baixo — já tem flex-shrink:0 mas reforça */ html body #chatScreen .ds-sidebar-footer, html body #chatScreen .sidebar-footer { flex-shrink: 0 !important; } /* Chat messages — scroll funcional mas SEM barra visível */ html body #chatScreen .chat-messages, html body #chatScreen #chatMessages, html body #chatScreen .chat-main { scrollbar-width: none !important; -ms-overflow-style: none !important; } html body #chatScreen .chat-messages::-webkit-scrollbar, html body #chatScreen #chatMessages::-webkit-scrollbar, html body #chatScreen .chat-main::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } /* Dropdowns / modals — scrollbar fininho discreto (caso o conteúdo extrapole) */ html body .ds-dropdown, html body .modal-box { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; } html body .ds-dropdown::-webkit-scrollbar, html body .modal-box::-webkit-scrollbar { width: 5px !important; height: 5px !important; } html body .ds-dropdown::-webkit-scrollbar-track, html body .modal-box::-webkit-scrollbar-track { background: transparent !important; } html body .ds-dropdown::-webkit-scrollbar-thumb, html body .modal-box::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06) !important; border-radius: 4px !important; } html body .ds-dropdown::-webkit-scrollbar-thumb:hover, html body .modal-box::-webkit-scrollbar-thumb:hover { background: rgba(212,160,23,0.25) !important; } /* Topbar tem z-index:10 → fica acima do glow (glow não vaza pra dentro) */ /* Conteúdo do main precisa ficar acima do glow */ html body #chatScreen .chat-main > *, html body #chatScreen.ds-shell .ds-shell-main > * { position: relative !important; z-index: 2 !important; } /* Galaxy canvases — overrides em alta especificidade pra vencer regra acima. Canvas é replaced element → width:auto usa o bitmap intrínseco (1×1), então setamos width/height explicitamente. */ html body #chatScreen .chat-main > .ds-galaxy-bg, html body #chatScreen .chat-main > .ds-galaxy-fg, html body #chatScreen.ds-shell .ds-shell-main > .ds-galaxy-bg, html body #chatScreen.ds-shell .ds-shell-main > .ds-galaxy-fg { position: absolute !important; top: 60px !important; left: 0 !important; width: 100% !important; height: calc(100% - 60px) !important; pointer-events: none !important; display: block !important; } html body #chatScreen .chat-main > .ds-galaxy-bg, html body #chatScreen.ds-shell .ds-shell-main > .ds-galaxy-bg { z-index: 2 !important; } html body #chatScreen .chat-main > .ds-galaxy-fg, html body #chatScreen.ds-shell .ds-shell-main > .ds-galaxy-fg { z-index: 3 !important; mix-blend-mode: screen; } /* Topbar mantém z-index 10 explícito pra ficar bem acima do glow */ html body #chatScreen .chat-header, html body #chatScreen .ds-topbar { z-index: 10 !important; } /* KILL glow próprio do welcome (agora vem do .chat-main) */ html body #chatScreen .chat-welcome::before, html body #chatScreen .chat-welcome.ds-welcome::before, html body #chatScreen .ds-welcome::before { display: none !important; background: none !important; content: none !important; } /* Welcome / chat-messages — padding-top dá respiro do topbar */ html body #chatScreen .chat-messages, html body #chatScreen #chatMessages { background: transparent !important; } html body #chatScreen .chat-welcome.ds-welcome, html body #chatScreen .ds-welcome { background: transparent !important; } html body #chatScreen .header-status, html body #chatScreen .ds-topbar-status { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 12.5px !important; color: #aaa !important; /* Pill sutil pra dar respiro ao status */ background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.06) !important; padding: 5px 12px !important; border-radius: 9999px !important; font-family: 'Inter', sans-serif !important; } html body #chatScreen .status-dot, html body #chatScreen .ds-topbar-status-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #4ade80 !important; box-shadow: 0 0 8px rgba(74,222,128,0.55) !important; } /* ═══════════════════ WELCOME STATE ═══════════════════ */ html body #chatScreen .chat-welcome.ds-welcome, html body #chatScreen .chat-welcome { background: transparent !important; padding: 20px 32px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } /* Mobile/altura pequena: trim ainda mais pra eliminar scroll desnecessario */ @media (max-width: 640px), (max-height: 720px) { html body #chatScreen .chat-welcome.ds-welcome, html body #chatScreen .chat-welcome { padding: 12px 20px !important; } } html body #chatScreen .ds-welcome-avatar, html body #chatScreen .welcome-avatar { width: 56px !important; height: 56px !important; border-radius: 50% !important; object-fit: cover !important; border: 1.5px solid rgba(212,160,23,0.55) !important; box-shadow: 0 0 24px rgba(212,160,23,0.20), 0 2px 8px rgba(0,0,0,0.5) !important; margin: 0 auto 12px !important; display: block !important; } /* Saudação dinâmica */ html body #chatScreen .ds-welcome-greeting { font-family: 'JetBrains Mono', 'SF Mono', monospace !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #666 !important; margin-bottom: 14px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; } html body #chatScreen .ds-welcome-greeting .dot { width: 4px !important; height: 4px !important; border-radius: 50% !important; background: #D4A017 !important; box-shadow: 0 0 8px rgba(212,160,23,0.6) !important; } html body #chatScreen .ds-welcome-title { font-family: 'Inter Tight', 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 26px !important; color: #fafafa !important; letter-spacing: -0.025em !important; margin: 0 0 6px !important; line-height: 1.15 !important; text-align: center !important; } html body #chatScreen .ds-welcome-title .hl, html body #chatScreen .ds-welcome-title-accent { color: #D4A017 !important; font-weight: 600 !important; } html body #chatScreen .ds-welcome-sub { font-family: 'Inter', sans-serif !important; font-size: 13px !important; color: #aaa !important; line-height: 1.5 !important; margin: 0 auto 18px !important; text-align: center !important; max-width: 480px !important; } /* ─── Starter Cards · METADE do tamanho anterior ─── */ /* Grid estático 2×2 (animação dominó removida — causava overlap durante transições) */ html body #chatScreen .ds-welcome-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 310px)) !important; column-gap: 10px !important; row-gap: 10px !important; width: 100% !important; max-width: 640px !important; margin: 0 auto 22px !important; padding: 0 24px !important; position: static !important; height: auto !important; background: transparent !important; border: none !important; box-shadow: none !important; justify-content: center !important; } html body #chatScreen .ds-welcome-grid > .ds-starter-card { position: relative !important; width: 100% !important; height: 112px !important; } /* ═══════════════════════════════════════════════════════════════════════════ DOMINÓ WAVE · opacity crossfade (sem movimento físico, sem overlap) Cada card faz um pulso suave (opacity 1 → 0.55 → 1) em sequência, criando a sensação de domínio sem trocar posição. ═══════════════════════════════════════════════════════════════════════════ */ @keyframes dsCardPulse { 0%, 100% { opacity: 1; transform: scale(1); } 35% { opacity: 0.45; transform: scale(0.985); } 65% { opacity: 1; transform: scale(1); } } html body #chatScreen .ds-welcome-grid > .ds-starter-card { animation: dsCardPulse 6s ease-in-out infinite !important; will-change: opacity, transform !important; } /* Stagger pro efeito de onda (dominó): cada card começa 0.6s depois do anterior. Ordem visual clockwise: top-left → top-right → bottom-right → bottom-left */ html body #chatScreen .ds-welcome-grid > .ds-starter-card:nth-child(1) { animation-delay: 0s !important; } html body #chatScreen .ds-welcome-grid > .ds-starter-card:nth-child(2) { animation-delay: 0.6s !important; } html body #chatScreen .ds-welcome-grid > .ds-starter-card:nth-child(4) { animation-delay: 1.2s !important; } html body #chatScreen .ds-welcome-grid > .ds-starter-card:nth-child(3) { animation-delay: 1.8s !important; } /* Hover pausa o pulse pra clicar com calma */ html body #chatScreen .ds-welcome-grid:hover > .ds-starter-card { animation-play-state: paused !important; } /* prefers-reduced-motion respeitado */ @media (prefers-reduced-motion: reduce) { html body #chatScreen .ds-welcome-grid > .ds-starter-card { animation: none !important; } } html body #chatScreen .ds-starter-card { position: relative !important; display: block !important; width: 100% !important; height: 112px !important; padding: 16px 0 16px 17px !important; background: rgba(255,255,255,0.025) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 10px !important; cursor: pointer !important; text-align: left !important; transition: transform 220ms ease, border-color 200ms ease, box-shadow 220ms ease, background 200ms ease !important; font-family: 'Inter', sans-serif !important; overflow: hidden !important; box-shadow: 0 4px 13px rgba(0,0,0,0.30) !important; } html body #chatScreen .ds-starter-card:hover { background: rgba(255,255,255,0.04) !important; border-color: rgba(197,139,24,0.40) !important; transform: translateY(-2px) !important; box-shadow: 0 14px 36px rgba(0,0,0,0.38), 0 0 0 1px rgba(197,139,24,0.15) !important; } /* Body (lado esquerdo): icon + cat alinhados horizontalmente em cima, título embaixo */ html body #chatScreen .ds-starter-card-body { position: relative !important; z-index: 2 !important; width: 100% !important; height: 100% !important; display: block !important; } /* Icon box (78×78, position absoluto pra fixar em 0,0 do padding) */ html body #chatScreen .ds-starter-card-head { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 9px !important; margin-bottom: 13px !important; width: auto !important; position: relative !important; z-index: 2 !important; } html body #chatScreen .ds-starter-card-title { position: relative !important; z-index: 2 !important; } html body #chatScreen .ds-starter-card-icon { width: 27px !important; height: 27px !important; border-radius: 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(197,139,24,0.06) !important; border: 1px solid rgba(197,139,24,0.65) !important; color: #B88722 !important; flex-shrink: 0 !important; } html body #chatScreen .ds-starter-card-icon svg { width: 11px !important; height: 11px !important; stroke: #B88722 !important; } html body #chatScreen .ds-starter-card-cat { font-family: 'JetBrains Mono', 'SF Mono', monospace !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: #B88722 !important; opacity: 1 !important; line-height: 1 !important; } html body #chatScreen .ds-starter-card-title { font-size: 11.5px !important; font-weight: 700 !important; color: #F5F5F5 !important; line-height: 1.28 !important; letter-spacing: -0.01em !important; max-width: 150px !important; } /* Mascote: ancorado ao canto direito (encostado/passando da borda) */ html body #chatScreen .ds-starter-card-mascot { position: absolute !important; right: 0 !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; width: auto !important; height: 150px !important; max-width: 48% !important; object-fit: contain !important; object-position: right center !important; pointer-events: none !important; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45)) !important; transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1) !important; z-index: 1 !important; } html body #chatScreen .ds-starter-card:hover .ds-starter-card-mascot { transform: translateY(calc(-50% - 3px)) scale(1.04) !important; } /* Responsivo — em telas < 1300px, 1 coluna */ @media (max-width: 1300px) { html body #chatScreen .ds-welcome-grid { grid-template-columns: minmax(0, 870px) !important; } } @media (max-width: 700px) { html body #chatScreen .ds-starter-card { height: auto !important; min-height: 220px !important; padding: 28px 24px !important; } html body #chatScreen .ds-starter-card-icon { width: 56px !important; height: 56px !important; border-radius: 14px !important; } html body #chatScreen .ds-starter-card-icon svg { width: 24px !important; height: 24px !important; } html body #chatScreen .ds-starter-card-cat { font-size: 14px !important; letter-spacing: 2px !important; } html body #chatScreen .ds-starter-card-title { font-size: 20px !important; max-width: 200px !important; } html body #chatScreen .ds-starter-card-mascot { width: 180px !important; height: 160px !important; right: 10px !important; } } /* ═══════════════════════════════════════════════════════════════════════════ Responsivo v2 · starter cards - Tablet/laptop pequeno (521-1300px): 2 colunas, não cai pra 1 - Phablet (521-760px): cards compactos - Mobile (≤520px): 1 coluna, altura/mascote reduzidos ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1300px) and (min-width: 521px) { html body #chatScreen .ds-welcome-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 720px !important; } } @media (min-width: 521px) and (max-width: 760px) { html body #chatScreen .ds-welcome-grid > .ds-starter-card, html body #chatScreen .ds-starter-card { height: 110px !important; min-height: 0 !important; padding: 12px 0 12px 14px !important; } html body #chatScreen .ds-starter-card-head { gap: 8px !important; margin-bottom: 8px !important; } html body #chatScreen .ds-starter-card-icon { width: 26px !important; height: 26px !important; border-radius: 6px !important; } html body #chatScreen .ds-starter-card-icon svg { width: 11px !important; height: 11px !important; } html body #chatScreen .ds-starter-card-cat { font-size: 9px !important; letter-spacing: 1.3px !important; } html body #chatScreen .ds-starter-card-title { font-size: 11.5px !important; line-height: 1.25 !important; max-width: 55% !important; } html body #chatScreen .ds-starter-card-mascot { height: 115px !important; width: auto !important; max-width: 48% !important; right: 4px !important; } } @media (max-width: 520px) { html body #chatScreen .ds-welcome-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 100% !important; gap: 6px !important; padding: 0 6px !important; } html body #chatScreen .ds-welcome-grid > .ds-starter-card, html body #chatScreen .ds-starter-card { height: 88px !important; min-height: 0 !important; padding: 8px 0 8px 10px !important; border-radius: 10px !important; } html body #chatScreen .ds-starter-card-head { gap: 6px !important; margin-bottom: 4px !important; } html body #chatScreen .ds-starter-card-icon { width: 20px !important; height: 20px !important; border-radius: 5px !important; } html body #chatScreen .ds-starter-card-icon svg { width: 9px !important; height: 9px !important; } html body #chatScreen .ds-starter-card-cat { font-size: 8px !important; letter-spacing: 1px !important; } html body #chatScreen .ds-starter-card-title { font-size: 10.5px !important; line-height: 1.2 !important; max-width: 58% !important; -webkit-line-clamp: 3 !important; } html body #chatScreen .ds-starter-card-mascot { height: 78px !important; width: auto !important; max-width: 42% !important; right: -2px !important; bottom: -4px !important; } } /* Ultra-narrow (iPhone SE / Galaxy A03 etc) — mantém 2x2, encolhe mais */ @media (max-width: 360px) { html body #chatScreen .ds-welcome-grid { gap: 5px !important; padding: 0 4px !important; } html body #chatScreen .ds-welcome-grid > .ds-starter-card, html body #chatScreen .ds-starter-card { height: 78px !important; padding: 6px 0 6px 8px !important; } html body #chatScreen .ds-starter-card-title { font-size: 9.5px !important; max-width: 60% !important; } html body #chatScreen .ds-starter-card-mascot { height: 68px !important; max-width: 40% !important; } } /* ─── Linha secundária (mini chips) ─── */ html body #chatScreen .ds-welcome-secondary { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; max-width: 580px !important; margin: 0 auto 20px !important; } html body #chatScreen .ds-starter-mini { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 12px !important; background: transparent !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 999px !important; color: #aaa !important; font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 400 !important; cursor: pointer !important; transition: all 160ms ease !important; } html body #chatScreen .ds-starter-mini:hover { background: rgba(255,255,255,0.03) !important; border-color: rgba(212,160,23,0.25) !important; color: #fafafa !important; } html body #chatScreen .ds-starter-mini svg { width: 12px !important; height: 12px !important; stroke: currentColor !important; opacity: 0.6 !important; } /* ─── Footer hint (atalhos) ─── */ html body #chatScreen .ds-welcome-hint { font-family: 'JetBrains Mono', 'SF Mono', monospace !important; font-size: 10.5px !important; color: #666 !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; opacity: 0.75 !important; } html body #chatScreen .ds-welcome-hint kbd { font-family: 'JetBrains Mono', 'SF Mono', monospace !important; font-size: 10px !important; padding: 2px 6px !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 4px !important; color: #aaa !important; } /* Legacy pills (oculta — usamos starter-cards agora) */ html body #chatScreen .ds-welcome-pills { display: none !important; } /* ═══════════════════ CHAT INPUT ═══════════════════ */ html body #chatScreen .chat-input-area, html body #chatScreen .ds-chat-input-area { background: transparent !important; border: none !important; padding: 14px 28px 22px !important; } html body #chatScreen .chat-input-container, html body #chatScreen .ds-chat-input-wrap { /* FLAT bg igual ao resto (#0a0a0a) — só o border delineia o container, sem "lift" de cor */ background: #0a0a0a !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 14px !important; padding: 0 !important; /* Alinhado com a coluna do chat-messages (820 - 64 padding = 756 conteúdo) */ max-width: 756px !important; margin: 0 auto !important; display: block !important; } html body #chatScreen #chatInput.chat-input { background: transparent !important; border: none !important; color: #fafafa !important; font-family: 'Inter', sans-serif !important; font-size: 14.5px !important; line-height: 1.6 !important; padding: 14px 16px 4px !important; resize: none !important; outline: none !important; min-height: 24px !important; max-height: 240px !important; box-sizing: border-box !important; width: 100% !important; } html body #chatScreen #sendBtn.btn-send { background: linear-gradient(180deg, #D4A017 0%, #B8860B 100%) !important; color: #0a0a0a !important; border: 1px solid rgba(255,225,150,0.20) !important; width: 32px !important; height: 32px !important; border-radius: 8px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.15) !important; } html body #chatScreen #sendBtn.btn-send:disabled { opacity: 0.3 !important; cursor: not-allowed !important; } /* ═══════════════════ THEME TOGGLE · iPhone-style ═══════════════════ */ html body #chatScreen .ds-theme-toggle { background: transparent !important; border: none !important; padding: 0 !important; cursor: pointer !important; width: 44px !important; height: 26px !important; display: inline-flex !important; align-items: center !important; position: relative !important; } html body #chatScreen .ds-theme-toggle-track { display: block !important; width: 44px !important; height: 24px !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.15) !important; border-radius: 9999px !important; position: relative !important; transition: background 0.25s ease, border-color 0.25s ease !important; } html body:not(.dark-mode) #chatScreen .ds-theme-toggle-track { background: rgba(184,134,11,0.12) !important; border-color: rgba(184,134,11,0.30) !important; } html body #chatScreen .ds-theme-toggle-thumb { position: absolute !important; top: 1px !important; left: 1px !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; background: linear-gradient(180deg, #D4A017 0%, #B8860B 100%) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15) !important; transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), background 0.25s ease !important; display: flex !important; align-items: center !important; justify-content: center !important; transform: translateX(20px) !important; /* dark = thumb à direita */ } html body:not(.dark-mode) #chatScreen .ds-theme-toggle-thumb { transform: translateX(0) !important; /* light = thumb à esquerda */ background: linear-gradient(180deg, #ffffff 0%, #f5edd7 100%) !important; box-shadow: 0 2px 6px rgba(184,134,11,0.30), 0 1px 2px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.6) !important; } /* Ícones dentro do thumb · só 1 visível por vez · centralizados */ html body #chatScreen .ds-theme-toggle-icon-sun, html body #chatScreen .ds-theme-toggle-icon-moon { width: 12px !important; height: 12px !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; transition: opacity 0.2s ease !important; } /* Dark mode: lua dourada visível, sol oculto */ html body.dark-mode #chatScreen .ds-theme-toggle-icon-moon { stroke: #0a0a0a !important; opacity: 1 !important; } html body.dark-mode #chatScreen .ds-theme-toggle-icon-sun { opacity: 0 !important; } /* Light mode: sol dourado visível, lua oculta */ html body:not(.dark-mode) #chatScreen .ds-theme-toggle-icon-sun { stroke: #B8860B !important; opacity: 1 !important; } html body:not(.dark-mode) #chatScreen .ds-theme-toggle-icon-moon { opacity: 0 !important; } html body #chatScreen .ds-theme-toggle:hover .ds-theme-toggle-track { border-color: rgba(255,255,255,0.25) !important; } html body:not(.dark-mode) #chatScreen .ds-theme-toggle:hover .ds-theme-toggle-track { border-color: rgba(0,0,0,0.18) !important; } /* ═══════════════════ KILL legados que conflitam ═══════════════════ */ /* Banners legados (display none forçado) */ html body #bannerFundadores, html body #bannerCapiTreino, html body #renewalBanner, html body #upgradeBanner, html body #particles-bg { display: none !important; } /* Header ambient (capi-auth-premium glow no chat) */ html body #chatScreen::before, html body #chatScreen::after, html body #chatScreen.capi-auth-premium::before, html body #chatScreen.capi-auth-premium::after { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ Touch-device safeguard · "modo web no mobile" Alguns devices (phones em landscape, tablets, PWAs com viewport esquisito, ou usuários servidos com CSS antigo via cache do SW) renderizam o layout desktop (sidebar fixa 256px) mesmo em tela pequena. Força drawer sempre que o input primário for touch e o viewport for ≤1024px — sem afetar PC. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) and (pointer: coarse) { html body #chatScreen.ds-shell { grid-template-columns: 1fr !important; } html body #chatScreen.ds-shell .ds-sidebar { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 280px !important; max-width: 85vw !important; height: 100vh !important; height: 100dvh !important; transform: translateX(-100%) !important; transition: transform 0.28s ease !important; /* Acima do backdrop (#sidebarBackdrop z-index:9998) — senão o backdrop cobre o drawer aberto e intercepta os toques ("menu não clica"). */ z-index: 10000 !important; } html body #chatScreen.ds-shell.is-sidebar-open .ds-sidebar { transform: translateX(0) !important; box-shadow: 0 0 32px rgba(0,0,0,0.5) !important; } html body #chatScreen.ds-shell.is-sidebar-open .ds-shell-backdrop { display: block !important; } html body #chatScreen.ds-shell .ds-shell-hamburger, html body #chatScreen .sidebar-toggle { display: inline-flex !important; } /* Layout legado #chatScreen (sem .ds-shell) */ html body #chatScreen .sidebar { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 85vw !important; max-width: 320px !important; z-index: 9999 !important; transform: translateX(-100%) !important; transition: transform 0.3s cubic-bezier(.4,0,.2,1) !important; } html body #chatScreen .sidebar.open { transform: translateX(0) !important; } html body #chatScreen .chat-main { margin-left: 0 !important; width: 100% !important; } } /* ═══════════════════════════════════════════════════════════════════════════ Mobile · viewport + teclado (fix "espaço preto" ao digitar) O shell trava na altura REAL visível (--app-height, derivado do visualViewport via setAppHeight no index.html). Sem isto o min-height:100dvh herdado não encolhe quando o teclado abre no iOS → sobra área preta e o input some atrás do teclado. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) and (pointer: coarse) { html body #chatScreen.ds-shell { height: var(--app-height, 100dvh) !important; min-height: 0 !important; max-height: var(--app-height, 100dvh) !important; overflow: hidden !important; } html body #chatScreen.ds-shell .ds-shell-main, html body #chatScreen .chat-main { height: var(--app-height, 100dvh) !important; min-height: 0 !important; max-height: var(--app-height, 100dvh) !important; overflow: hidden !important; } /* Mensagens scrollam; input fica colado embaixo no fluxo flex normal */ html body #chatScreen #chatMessages, html body #chatScreen .chat-messages { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* Drawer também acompanha a altura visível */ html body #chatScreen.ds-shell .ds-sidebar, html body #chatScreen .sidebar { height: var(--app-height, 100dvh) !important; } /* iOS: NÃO usar position:fixed no input (bug visualViewport faz o input sumir atrás do teclado e sobrar área preta). Mantém no fluxo flex — como o shell encolheu pro --app-height, o input já fica acima do teclado. */ html body.keyboard-open #chatScreen .chat-input-area, html body.keyboard-open #chatScreen .ds-chat-input-area { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; z-index: 2 !important; } html body.keyboard-open #chatScreen #chatMessages, html body.keyboard-open #chatScreen .chat-messages { padding-bottom: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════════════ Mobile · starter cards (impede título estourar o card e colidir co/ mascote) O -webkit-line-clamp só funciona com o container -webkit-box; sem isto títulos longos vazavam pra fora do card ("banner quebrado"). ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 760px) { html body #chatScreen .ds-starter-card-title { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; overflow: hidden !important; } }