/* ============================================================ WexPore — chat-widget.css Widget flutuante do chat com IA (exclusivo do institucional). Usa as variáveis --nc-* já definidas em site.css, então segue o tema claro/escuro automaticamente via [data-theme] no . ============================================================ */ #nc-chat-widget { position: fixed; right: 20px; bottom: 20px; z-index: 1050; font-family: 'Inter', system-ui, sans-serif; } #nc-chat-toggle { width: 60px; height: 60px; border-radius: 50%; border: none; background: var(--nc-red); color: #fff; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); cursor: pointer; transition: var(--nc-trans); } #nc-chat-toggle:hover { transform: scale(1.06); } #nc-chat-toggle .bi-x-lg { display: none; } #nc-chat-widget.aberto #nc-chat-toggle .bi-chat-dots-fill { display: none; } #nc-chat-widget.aberto #nc-chat-toggle .bi-x-lg { display: block; } #nc-chat-panel { position: absolute; right: 0; bottom: 76px; width: 360px; max-width: calc(100vw - 32px); height: 520px; max-height: calc(100vh - 120px); background: var(--nc-dark-2); border: 1px solid var(--nc-border); border-radius: var(--nc-radius); box-shadow: 0 16px 48px rgba(0, 0, 0, .35); display: flex; flex-direction: column; overflow: hidden; transition: width .2s ease, height .2s ease, right .2s ease, bottom .2s ease, max-width .2s ease, max-height .2s ease; } #nc-chat-widget.expandido #nc-chat-panel { position: fixed; right: 20px; bottom: 20px; width: min(720px, calc(100vw - 40px)); height: calc(100vh - 40px); max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); } .nc-chat-header { background: var(--nc-blue); color: #fff; padding: 14px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .nc-chat-header strong { display: block; font-size: .95rem; } .nc-chat-subtitulo { display: block; font-size: .75rem; opacity: .85; margin-top: 2px; } .nc-chat-header-acoes { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .nc-chat-header button { background: none; border: none; color: #fff; opacity: .85; cursor: pointer; padding: 2px; flex-shrink: 0; } .nc-chat-header button:hover { opacity: 1; } #nc-chat-expandir .bi-fullscreen-exit { display: none; } #nc-chat-widget.expandido #nc-chat-expandir .bi-arrows-fullscreen { display: none; } #nc-chat-widget.expandido #nc-chat-expandir .bi-fullscreen-exit { display: block; } .nc-chat-mensagens { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .nc-chat-msg { max-width: 85%; padding: 9px 12px; border-radius: var(--nc-radius-sm); font-size: .875rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .nc-chat-msg-ia { align-self: flex-start; background: var(--nc-dark-3); color: var(--nc-text); border-bottom-left-radius: 2px; } .nc-chat-msg-usuario { align-self: flex-end; background: var(--nc-blue); color: #fff; border-bottom-right-radius: 2px; } .nc-chat-msg-erro { align-self: center; background: transparent; color: var(--nc-red-soft); font-size: .8rem; text-align: center; } .nc-chat-digitando { padding: 0 16px 8px; display: flex; gap: 4px; } .nc-chat-digitando span { width: 6px; height: 6px; border-radius: 50%; background: var(--nc-muted); animation: nc-chat-piscar 1.2s infinite ease-in-out; } .nc-chat-digitando span:nth-child(2) { animation-delay: .2s; } .nc-chat-digitando span:nth-child(3) { animation-delay: .4s; } @keyframes nc-chat-piscar { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } } .nc-chat-escalar-form { padding: 12px 14px; border-top: 1px solid var(--nc-border); background: var(--nc-dark-3); } .nc-chat-escalar-form p { font-size: .8rem; color: var(--nc-muted); margin: 0 0 8px; } .nc-chat-escalar-form input { width: 100%; margin-bottom: 8px; padding: 8px 10px; border-radius: var(--nc-radius-sm); border: 1px solid var(--nc-border); background: var(--nc-dark-2); color: var(--nc-text); font-size: .85rem; } .nc-chat-escalar-acoes { display: flex; justify-content: flex-end; gap: 8px; } .nc-chat-btn-primario, .nc-chat-btn-secundario { border: none; border-radius: var(--nc-radius-sm); padding: 6px 14px; font-size: .8rem; cursor: pointer; } .nc-chat-btn-primario { background: var(--nc-red); color: #fff; } .nc-chat-btn-secundario { background: transparent; color: var(--nc-muted); } .nc-chat-footer { border-top: 1px solid var(--nc-border); background: var(--nc-dark-2); } .nc-chat-link-humano { width: 100%; background: none; border: none; border-bottom: 1px solid var(--nc-border); color: var(--nc-muted); font-size: .75rem; padding: 7px 14px; text-align: left; cursor: pointer; } .nc-chat-link-humano:hover { color: var(--nc-text); } .nc-chat-input-form { display: flex; align-items: center; padding: 8px; gap: 8px; } .nc-chat-input-form input { flex: 1; border: 1px solid var(--nc-border); background: var(--nc-dark-3); color: var(--nc-text); border-radius: 20px; padding: 8px 14px; font-size: .875rem; } .nc-chat-input-form input:focus { outline: 2px solid var(--nc-blue-soft); outline-offset: 1px; } .nc-chat-input-form button { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--nc-red); color: #fff; flex-shrink: 0; cursor: pointer; } .nc-chat-input-form button:disabled { opacity: .6; cursor: default; } @media (max-width: 420px) { #nc-chat-widget { right: 12px; bottom: 12px; } #nc-chat-panel { width: calc(100vw - 24px); bottom: 72px; } #nc-chat-widget.expandido #nc-chat-panel { right: 12px; bottom: 12px; width: calc(100vw - 24px); height: calc(100vh - 24px); max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); } }