/* * Proveniência: semeado a partir de erp-millgest-ia-360/frontend/chat_ia.css. * Esta é a versão canônica do frontend do chat, servida pelo mill-ia-server. * Pode divergir livremente do original (que permanece congelado no ERP). */ /* ============================== Mill IA - Chat Styles Ported from MillComunicacaoClientesIA ============================== */ /* ============================== Theme tokens (public interface) Tokens públicos setados pelo site pai via postMessage ({ type: 'millia:set_theme', theme: {...} }). Ver THEME.md. Valores abaixo são os defaults do esquema claro; o esquema escuro é ativado via html[data-millia-scheme="dark"]. Tokens enviados pelo pai são aplicados inline em e têm precedência sobre ambos os blocos. ============================== */ :root { --millia-surface-color: #f9f9f9; --millia-surface-raised-color: #ffffff; --millia-surface-input-color: #ffffff; --millia-text-color: #1e293b; --millia-text-muted-color: #64748b; --millia-highlight-color: #3b82f6; --millia-highlight-text-color: #ffffff; --millia-border-color: #e2e8f0; } html[data-millia-scheme="dark"] { --millia-surface-color: #1a2236; --millia-surface-raised-color: #1e293b; --millia-surface-input-color: #1e293b; --millia-text-color: #f8fafc; --millia-text-muted-color: #94a3b8; --millia-highlight-color: #3b82f6; --millia-highlight-text-color: #ffffff; --millia-border-color: #334155; } /* ============================== Tabler CSS variable bridge Maps --millia-* tokens to --tblr-* so Tabler components (charts, tooltips, legends) auto-theme. ============================== */ :root { --tblr-primary: var(--millia-highlight-color); --tblr-primary-rgb: 59, 130, 246; --tblr-secondary: color-mix(in srgb, var(--millia-highlight-color) 60%, var(--millia-text-color)); --tblr-success: #22c55e; --tblr-info: #0ea5e9; --tblr-warning: #f59e0b; --tblr-danger: #ef4444; --tblr-light: var(--millia-surface-color); --tblr-dark: var(--millia-text-color); --tblr-muted: var(--millia-text-muted-color); --tblr-body-color: var(--millia-text-color); --tblr-body-bg: var(--millia-surface-color); --tblr-card-bg: var(--millia-surface-raised-color); --tblr-border-color: var(--millia-border-color); --tblr-surface: var(--millia-surface-raised-color); --tblr-surface-secondary: var(--millia-surface-color); --tblr-gray-300: color-mix(in srgb, var(--millia-border-color) 60%, var(--millia-surface-color)); --tblr-gray-400: color-mix(in srgb, var(--millia-text-muted-color) 60%, var(--millia-surface-color)); --tblr-gray-600: var(--millia-text-muted-color); } html[data-millia-scheme="dark"] { --tblr-primary: var(--millia-highlight-color); --tblr-secondary: color-mix(in srgb, var(--millia-highlight-color) 60%, var(--millia-text-color)); --tblr-light: #1e293b; --tblr-dark: #f8fafc; --tblr-gray-300: #374151; --tblr-gray-400: #4b5563; --tblr-gray-600: #6b7280; } /* ============================== Derived variables (internal) Tudo abaixo é derivado dos tokens públicos. ============================== */ :root { --chat-bg: var(--millia-surface-color); --chat-border: var(--millia-border-color); --chat-accent: var(--millia-highlight-color); --chat-user-bg: var(--millia-highlight-color); --chat-bot-bg: var(--millia-surface-raised-color); --chat-form-bg: var(--millia-surface-raised-color); --chat-input-bg: var(--millia-surface-input-color); --chat-user-text-color: var(--millia-highlight-text-color); --chat-bot-text-color: var(--millia-text-color); --min-message-width: 50px; --chat-text-primary: var(--millia-text-color); --chat-text-muted: var(--millia-text-muted-color); --chat-placeholder: color-mix(in srgb, var(--millia-text-muted-color) 70%, var(--millia-surface-input-color)); --chat-surface-hover: color-mix(in srgb, var(--millia-surface-raised-color) 90%, var(--millia-text-color)); --chat-surface-active: color-mix(in srgb, var(--millia-highlight-color) 14%, var(--millia-surface-color)); --chat-surface-deep: color-mix(in srgb, var(--millia-surface-raised-color) 94%, var(--millia-text-color)); --chat-tint-soft: color-mix(in srgb, var(--millia-text-color) 4%, transparent); --chat-tint-1: color-mix(in srgb, var(--millia-text-color) 8%, transparent); --chat-tint-2: color-mix(in srgb, var(--millia-text-color) 13%, transparent); --chat-tint-3: color-mix(in srgb, var(--millia-text-color) 22%, transparent); --chat-accent-soft: color-mix(in srgb, var(--millia-highlight-color) 30%, transparent); } /* ---- Embed / loading behavior ---- */ html, body { background: transparent; } body { color: var(--chat-text-primary); font-size: 16px; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } body.millia-theme-pending #chatRoot { visibility: hidden; } /* ---- Chat Container ---- */ #chat_container { position: relative; display: flex; flex-direction: column; height: 100%; border: none; border-radius: 0; background: var(--chat-bg); box-shadow: none; font-family: system-ui, sans-serif; overflow: hidden; } /* ---- Header ---- */ #chat_header { position: absolute; top: 0; z-index: 1; left: 0; right: 0; height: 46px; background: var(--chat-form-bg); border-bottom: 1px solid var(--chat-border); display: flex; align-items: center; justify-content: space-between; padding: 0 8px; } .chatActionsLeft { display: flex; align-items: center; gap: 0px; } .chatActionsLeft button { height: 34px; display: flex; align-items: center; justify-content: center; padding: 0 10px; } .chatToggle { position: relative; float: left; border: none; border-radius: 6px; background: var(--chat-accent); color: var(--millia-highlight-text-color); font-size: 16px; cursor: pointer; transition: background 0.2s; margin: 5px 0px 5px 5px; display: none !important; } .chatToggle.off { background-color: var(--chat-tint-2); color: var(--chat-bot-text-color); } .chatToggle.on { background-color: #28a745 !important; } #chatManagerToggleBtn { display: inline-flex !important; align-items: center; justify-content: center; width: 38px; height: 34px; padding: 0; margin: 6px 0px 6px 6px; background: var(--chat-tint-1); border: none; border-radius: 8px; color: var(--chat-bot-text-color); font-size: 14px; cursor: pointer; transition: background 0.2s; flex-shrink: 0; } #chatManagerToggleBtn:hover { background: var(--chat-tint-2); } #chatManagerToggleBtn i { transition: opacity 0.15s ease; } #resetBtn { display: inline-block; } #resetBtn i { transition: transform 0.4s ease; display: inline-block; } #resetBtn:hover i { transform: rotate(180deg); } #resetBtn:hover { background-color: #ef4444 !important; color: white !important; } /* ---- Status Dot ---- */ #statusDot.status-online { background-color: #28a745; box-shadow: 0 0 6px rgba(40, 167, 69, 0.5); } #statusDot.status-offline { background-color: #dc3545; box-shadow: 0 0 6px rgba(220, 53, 69, 0.5); } /* ---- Messages Area ---- */ #messages { flex: 1; left: 0; right: 0; overflow-y: auto; padding: 10px 36px 10px 10px; margin-bottom: 58px; margin-top: 46px; } /* ---- Chat Form ---- */ #chatForm { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px; border-top: 1px solid var(--chat-border); background: var(--chat-form-bg); white-space: nowrap; } #message { display: inline-block; width: calc(100% - 170px); border: 1px solid var(--chat-border); border-radius: 8px; font-size: 0.95em; vertical-align: middle; resize: none; overflow-y: hidden; line-height: 1.4; max-height: calc(1.4em * 5 + 16px); font-family: inherit; } #sendBtn { width: 80px; height: 38px; } #chatForm #emojiBtn { width: 40px; height: 38px; } #chatForm #micBtn { width: 40px; height: 38px; } #micBtn.recording { background: #dc2626; color: #fff; animation: mic-pulse 1.2s ease-in-out infinite; } @keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); } 50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); } } .emoji-picker { position: absolute; bottom: 65px; right: 9px; background: var(--chat-form-bg); border-radius: 8px; padding: 10px; box-shadow: 0 0px 15px rgba(0, 0, 0, 0.2); z-index: 1000; width: 300px; max-height: 400px; overflow-y: auto; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .emoji-search { grid-column: span 7; margin-bottom: 10px; padding: 8px; border-radius: 4px; border: 1px solid var(--chat-border); background: var(--chat-bot-bg); color: var(--chat-bot-text-color); width: 100%; box-sizing: border-box; position: sticky; top: 0px; box-shadow: var(--chat-form-bg) 0px -15px 0px; z-index: 11; } .emoji-search:focus { outline: none; border-color: var(--chat-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--chat-accent) 15%, transparent), var(--chat-form-bg) 0px -15px 0px; } .emoji-category-title { font-size: 0.8em; font-weight: bold; color: var(--chat-text-muted); margin: 15px 0 0 5px; text-transform: uppercase; grid-column: span 7; } .emoji-grid { display: contents; } .emoji-item { cursor: pointer; font-size: 1.4em; width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 4px; transition: background 0.2s; user-select: none; } .emoji-item:hover { background: var(--chat-surface-hover); } .btnAction { display: inline-block; position: relative; padding: 8px 0; border: none; border-radius: 8px; color: var(--millia-highlight-text-color); font-weight: bold; cursor: pointer; vertical-align: middle; transition: background 0.2s; text-align: center; } /* ---- Message Bubbles ---- */ .msg { position: relative; clear: both; max-width: 80%; min-width: var(--min-message-width); margin: 6px 0; padding: 8px 12px; border-radius: 10px; font-size: 0.95em; line-height: 1.4; word-wrap: break-word; } .msg .author { font-weight: 600; margin-right: 5px; } .msg .time { font-size: 0.78em; } .msg.local { float: right; background: var(--chat-user-bg); border-bottom-right-radius: 2px; color: var(--chat-user-text-color); } .msg.local .text { white-space: pre-wrap; } .msg.remote { float: left; background: var(--chat-bot-bg); border-bottom-left-radius: 2px; color: var(--chat-bot-text-color); border: 1px solid var(--chat-border); } .msg .text table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 14px; } .msg .text th, .msg .text td { border: 1px solid var(--chat-border); padding: 6px 10px; text-align: left; } .msg .text th { background: var(--chat-surface-deep); font-weight: bold; } .msg .text tr:nth-child(even) { background: var(--chat-tint-soft); } /* ---- Code Blocks ---- */ /* Inline code */ .msg.remote .text code:not(pre code) { background: var(--chat-tint-1); color: var(--chat-text-primary); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; font-family: ui-monospace, SFMono-Regular, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace; word-break: break-word; } /* Fenced code block container */ .msg.remote .text pre { background: var(--chat-surface-deep); color: var(--chat-text-primary); border: 1px solid var(--chat-border); border-radius: 8px; padding: 12px 16px; overflow-x: auto; font-size: 0.88em; line-height: 1.5; margin: 8px 0; } .msg.remote .text pre code { background: transparent; padding: 0; font-size: inherit; line-height: inherit; color: inherit; white-space: pre; font-family: ui-monospace, SFMono-Regular, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace; } /* ---- Media in Messages ---- */ .msg .media { display: none; background-color: transparent; } .msg .media *:not(.voice-player):not(.voice-player *) { margin: auto; border-radius: 5px; } .msg .media .sticker { width: 100px; } .msg .media .image, .msg .media .video { width: 400px; } .msg .media .audio { border-radius: 8px; } /* ---- Mensagens de voz (áudio + transcrição) ---- */ .msg.voice .text { display: none; } .msg.voice .media { display: block; } .msg.voice .media > .voice-audio { display: none; } /* Player de voz customizado — segue o padrão visual e o tema do chat */ .voice-player { display: flex; align-items: center; gap: 10px; width: min(300px, 100%); max-width: 100%; padding: 2px; box-sizing: border-box; user-select: none; } .voice-player-play { flex-shrink: 0; width: 38px; height: 38px; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; padding: 0; margin: 0; transition: background 0.15s ease, transform 0.1s ease; } .voice-player-play i { margin: 0; pointer-events: none; } .voice-player-play:hover { transform: scale(1.06); } .voice-player-play:active { transform: scale(0.95); } .voice-player-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .voice-player-wave { display: flex; align-items: center; gap: 2px; height: 30px; cursor: pointer; } .voice-player-wave .bar { flex: 1; min-width: 2px; max-width: 6px; height: 6px; border-radius: 2px; transition: background 0.12s ease; } .voice-player-time { font-size: 0.72rem; line-height: 1; font-variant-numeric: tabular-nums; margin: 0; } .voice-expired-note { font-size: 0.72rem; color: #e35d5d; padding: 6px 0 2px; line-height: 1.3; } .voice-expired .voice-player-wave, .voice-expired .voice-player-time { opacity: 0.5; } /* ---- Variações por lado da mensagem ---- */ /* Usuário: balão em destaque (fundo accent) */ .msg.local .voice-player-play { background: var(--chat-user-text-color); color: var(--chat-user-bg); } .msg.local .voice-player-play:hover { background: color-mix(in srgb, var(--chat-user-text-color) 88%, transparent); } .msg.local .voice-player-wave .bar { background: color-mix(in srgb, var(--chat-user-text-color) 35%, transparent); } .msg.local .voice-player-wave .bar.played { background: var(--chat-user-text-color); } .msg.local .voice-player-time { color: color-mix(in srgb, var(--chat-user-text-color) 72%, transparent); } /* Bot: balão padrão */ .msg.remote .voice-player-play { background: var(--chat-accent); color: var(--millia-highlight-text-color); } .msg.remote .voice-player-play:hover { background: color-mix(in srgb, var(--chat-accent) 85%, var(--chat-bot-bg)); } .msg.remote .voice-player-wave .bar { background: var(--chat-tint-3); } .msg.remote .voice-player-wave .bar.played { background: var(--chat-accent); } .msg.remote .voice-player-time { color: var(--chat-text-muted); } .msg-action-voice { color: var(--chat-text-muted); } .voice-transcription { display: none; margin-top: 6px; padding: 8px 10px; background: var(--chat-surface-deep); border: 1px solid var(--chat-border); border-radius: 8px; font-size: 0.85rem; color: var(--chat-text-primary); max-width: 280px; } .msg.voice-transcription-open .voice-transcription { display: block; } .voice-transcription-title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.78rem; color: var(--chat-text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em; } .voice-transcription-text { white-space: pre-wrap; word-break: break-word; line-height: 1.45; } .msg:has(.media > .sticker) { min-width: 125px; } .msg .media .image, .msg .media .sticker, .msg .media .video { cursor: zoom-in; transition: opacity 0.2s; } .msg .media .image:hover, .msg .media .sticker:hover, .msg .media .video:hover { opacity: 0.9; } .msg .placeholder { display: none; align-items: center; justify-content: center; background-color: var(--chat-surface-deep); border-radius: 8px; } .msg .placeholder .loading-spinner { width: 40px; height: 40px; animation: rotate 2s linear infinite; } .msg .placeholder .loading-spinner .path { stroke: var(--chat-accent); stroke-linecap: round; animation: dash 1.5s ease-in-out infinite; } .msg .media .media-card { display: flex; align-items: center; padding: 10px; border-radius: 8px; transition: background 0.2s; background: var(--chat-surface-deep); color: var(--chat-bot-text-color); } .msg .media .media-card:hover { background: var(--chat-surface-hover); } .msg .media .media-card i { cursor: pointer; } .msg .media .card-info { flex: 1; overflow: hidden; margin: 0 10px; } .msg .media .card-title { font-weight: 600; font-size: 0.9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg .media .card-subtitle { font-size: 0.8em; color: var(--chat-text-muted); } .msg .media .document-item i.fa-file-alt { color: var(--chat-text-muted); } .msg .media .document-item i.fa-download { color: var(--chat-accent); } /* ---- Media Viewer (Fullscreen) ---- */ .media-viewer { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); align-items: center; justify-content: center; cursor: zoom-out; } .media-viewer.visible { display: flex; } .viewer-content { max-width: 90%; max-height: 90%; object-fit: contain; box-shadow: 0 0 20px rgba(0,0,0,0.5); border-radius: 4px; } .close-viewer { position: absolute; top: 20px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10001; } .close-viewer:hover { color: #bbb; } .media-unavailable-container { display: flex; align-items: center; padding: 16px; background: var(--chat-surface-deep); border: 1px dashed var(--chat-border); border-radius: 12px; color: var(--chat-text-muted); margin: 10px 0; max-width: 100%; } .unavailable-text { display: flex; flex-direction: column; line-height: 1.4; font-size: 0.85rem; } .unavailable-text strong { color: var(--chat-text-primary); margin-bottom: 2px; } /* ---- Overlay (Thinking...) ---- */ #formOverlay { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--chat-accent); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 300ms ease, visibility 0s linear 300ms; overflow: hidden; } #formOverlay.visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 300ms ease; } #overlayStatus { position: absolute; z-index: 2; left: 20px; top: 10px; height: 35px; line-height: 35px; background-color: var(--chat-form-bg); color: var(--chat-text-primary); padding-left: 10px; padding-right: 10px; border-radius: 5px; } /* ---- Session Expired Overlay ---- */ #sessionExpiredOverlay { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; background: var(--chat-bg); display: none; align-items: center; justify-content: center; text-align: center; padding: 32px; } #sessionExpiredOverlay.visible { display: flex; } #sessionExpiredMessage { max-width: 420px; color: var(--chat-text-primary); font-size: 1.05rem; line-height: 1.6; } .particle { position: absolute; bottom: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--millia-highlight-text-color); opacity: 0.8; animation: rise 5s linear forwards; } @keyframes rise { 0% { transform: translateY(0); opacity: 0.8; } 100% { transform: translateY(-100vh); opacity: 0; } } @keyframes rotate { 100% { transform: rotate(360deg); } } @keyframes dash { 0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } } @keyframes pulse-border { 0%, 100% { border-left-color: var(--chat-accent-soft); } 50% { border-left-color: var(--chat-accent); } } /* ---- User Speaking Glow ---- */ #chatForm.user-speaking { animation: glow-user-speaking 2.2s ease-in-out infinite; border-top: unset; } @keyframes glow-user-speaking { 0% { box-shadow: 0 0 6px var(--chat-accent), 0 0 12px rgba(255, 255, 255, 0.5); } 25% { box-shadow: 0 0 12px var(--chat-accent), 0 0 25px var(--chat-accent), 0 0 35px rgba(255, 255, 255, 0.8); } 50% { box-shadow: 0 0 18px var(--chat-accent), 0 0 35px rgba(255, 255, 255, 0.9); } 75% { box-shadow: 0 0 12px var(--chat-accent), 0 0 25px var(--chat-accent), 0 0 35px rgba(255, 255, 255, 0.8); } 100% { box-shadow: 0 0 6px var(--chat-accent), 0 0 12px rgba(255, 255, 255, 0.5); } } .ignore-overlay { z-index: 3; } /* ---- Danger Button ---- */ .danger-btn { background-color: var(--chat-form-bg) !important; color: #ef4444 !important; } /* ---- Button Styling ---- */ #chat_header .btn { border: none; border-radius: 6px; cursor: pointer; font-size: 14px; transition: background 0.2s; margin: 5px; } #chat_header .btn-primary { background: var(--chat-accent); color: var(--millia-highlight-text-color); } #chat_header .btn-secondary { background: var(--chat-tint-1); color: var(--chat-bot-text-color); } #chat_header .btn-atendimento-iniciar { background: #28a745; color: white; } /* Hide certain buttons by default (shown only in "clientes" screen) */ #noteBtn, #exportBtn, #IABtn, #transferBtn, #atendimentoAberto, #oportunidadeAberta, #atendimentoBtn { display: none; } /* ---- Base Button (theme override) ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 12px; border: 1px solid transparent; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; white-space: nowrap; text-decoration: none; line-height: 1.4; } .btn-primary { background: var(--chat-accent); color: var(--millia-highlight-text-color); border-color: var(--chat-accent); } .btn-primary:hover { filter: brightness(1.1); } .btn-secondary { background: var(--chat-tint-1); color: var(--chat-bot-text-color); border-color: transparent; } .btn-secondary:hover { background: var(--chat-tint-2); } /* ---- Form Control (theme override) ---- */ .form-control { display: inline-block; width: 100%; padding: 8px 12px; border: 1px solid var(--chat-border); border-radius: 8px; font-size: 0.95em; line-height: 1.4; color: var(--chat-bot-text-color); background: var(--chat-input-bg); outline: none; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; } .form-control::placeholder { color: var(--chat-placeholder); } .form-control:focus { border-color: var(--chat-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--chat-accent) 15%, transparent); background: var(--chat-input-bg); } .tfield { /* Adianti framework field - styled by .form-control */ display: inline-block; } /* ---- Message Content Area ---- */ .msg .content { margin-top: 8px; } /* ---- Message Action Buttons ---- */ .msg-actions { position: absolute; top: 4px; right: 32px; display: flex; gap: 3px; z-index: 5; } .msg-actions-end { position: absolute; top: 4px; right: 4px; z-index: 6; width: 0; height: 0; overflow: hidden; } .msg:hover .msg-actions-end, .msg.msg-delete-open .msg-actions-end { width: auto; height: auto; overflow: visible; } .msg-actions-bottom { position: absolute; bottom: 4px; right: 4px; display: flex; gap: 3px; z-index: 5; } .msg-action-btn { width: 24px; height: 24px; border: none; border-radius: 4px; background: var(--chat-tint-2); color: var(--chat-bot-text-color); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; padding: 0; opacity: 0; transition: opacity 0.15s ease, background 0.15s ease; } .msg:hover .msg-action-btn, .msg.msg-delete-open .msg-action-btn { opacity: 1; } .msg-action-btn:hover { background: var(--chat-tint-3); } .msg-action-btn.active { background: var(--chat-accent); color: var(--millia-highlight-text-color); } .msg-action-btn.hidden { display: none; } .msg-action-delete { width: 22px; height: 22px; } .msg::after { content: ''; display: table; clear: both; } .msg.has-chart { max-width: 90%; } .chart-skeleton { background: var(--chat-tint-1); border: 2px dashed var(--chat-border); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--chat-text-muted); font-size: 3rem; box-sizing: border-box; } .msg.has-chart-error { border-style: dashed; } .msg-delete-menu { position: absolute; top: 28px; right: 4px; background: var(--chat-bot-bg); border: 1px solid var(--chat-border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 10; display: none; min-width: 90px; overflow: hidden; } .msg-delete-menu.visible { display: block; } .msg-delete-menu-item { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 0.85rem; color: var(--chat-text-primary); cursor: pointer; background: transparent; border: none; width: 100%; text-align: left; transition: background 0.15s ease; font-family: inherit; white-space: nowrap; } .msg-delete-menu-item:hover { background: var(--chat-surface-hover); } .msg-delete-menu-item.danger { color: #dc3545; } .msg-delete-menu-item.danger:hover { background: rgba(220, 53, 69, 0.1); } .msg-delete-menu-item i { font-size: 0.8rem; width: 14px; text-align: center; } /* ---- Main Content Wrapper ---- */ .main-content { padding: 0; margin: 0; box-sizing: border-box; overflow: hidden; } /* Override style.css .main-card !important for the chat page */ .main-content .main-card { height: 100vh !important; overflow: hidden !important; background-color: transparent !important; border: unset; border-radius: 0; margin: 0; padding: 0; } /* ---- Responsive ---- */ @media (max-width: 768px) { .msg .media .image, .msg .media .video { width: 100%; } } /* ---- Overlay Mode (iframe embed) ---- */ body.mill-ia-overlay-mode .navbar, body.mill-ia-overlay-mode .menu-bar, body.mill-ia-overlay-mode .main-footer { display: none !important; } body.mill-ia-overlay-mode .main-content { margin: 0 !important; padding: 0 !important; } body.mill-ia-overlay-mode .main-content .main-card { height: 100vh !important; } /* ============================== MillChatManager - Chat List Panel ============================== */ #chat_manager_container { display: flex; position: relative; width: 0; max-width: 100%; height: 100%; background: var(--chat-bg, #ffffff); font-family: system-ui, sans-serif; overflow: hidden; flex-shrink: 0; transition: width 0.3s ease; } #chat_manager_container.visible { width: var(--chat-manager-width, 320px); } .chat-manager-panel { display: flex; flex-direction: column; box-sizing: border-box; width: var(--chat-manager-width, 320px); min-width: var(--chat-manager-width, 320px); height: 100%; margin-left: auto; flex-shrink: 0; border-right: 1px solid var(--chat-border, #e0e0e0); } /* ── Resize handle ── */ #chat_manager_container > .chat-manager-resize-handle { position: absolute; top: 0; right: 0; width: 6px; height: 100%; cursor: col-resize; z-index: 10; opacity: 0; transition: background 0.15s ease; user-select: none; } #chat_manager_container.visible > .chat-manager-resize-handle { opacity: 1; } #chat_manager_container > .chat-manager-resize-handle:hover, #chat_manager_container.resizing > .chat-manager-resize-handle { background: var(--chat-tint-1, rgba(0, 0, 0, 0.06)); } #chat_manager_container.resizing { transition: none !important; } .chat-manager-header { --cm-pad-x: 12px; --cm-new-w: 38px; --cm-gap: 6px; --cm-icon-w: 34px; display: flex; align-items: center; justify-content: space-between; padding: 6px var(--cm-pad-x); background: var(--chat-form-bg); border-bottom: 1px solid var(--chat-border, #e0e0e0); flex-shrink: 0; position: relative; } .chat-manager-title { font-size: 16px; font-weight: 600; color: var(--chat-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; } .chat-manager-header-actions { display: flex; align-items: center; flex-shrink: 0; } .chat-manager-new-btn { width: var(--cm-new-w); height: 34px; background: var(--chat-accent, #007bff); border: none; border-radius: 8px; color: #fff; cursor: pointer; padding: 0; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; flex-shrink: 0; position: relative; z-index: 3; } .chat-manager-new-btn:hover { opacity: 0.9; } .chat-manager-search { display: flex; align-items: center; height: 34px; width: var(--cm-icon-w); border: 1px solid transparent; border-radius: 8px; background: transparent; overflow: hidden; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); right: calc(var(--cm-pad-x) + var(--cm-new-w) + var(--cm-gap)); z-index: 2; transition: width 0.25s ease, background 0.2s ease, border-color 0.2s ease; } .chat-manager-search-icon { display: grid !important; place-items: center; width: var(--cm-icon-w); height: 34px; flex-shrink: 0; color: var(--chat-text-muted); font-size: 14px; } .chat-manager-search input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent; color: var(--chat-text-primary); font-size: 0.9rem; padding: 6px 4px 6px 0; box-sizing: border-box; } .chat-manager-search input::placeholder { color: var(--chat-placeholder); } .chat-manager-search-clear { display: none; width: 26px; height: 26px; margin-right: 4px; border: none; background: transparent; color: var(--chat-text-muted); cursor: pointer; border-radius: 6px; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; } .chat-manager-search.has-text .chat-manager-search-clear { display: flex; } .chat-manager-search.has-text .chat-manager-search-clear:hover { color: var(--chat-accent, #007bff); } .chat-manager-search:hover, .chat-manager-search:focus-within { width: calc(100% - (var(--cm-pad-x) * 2) - var(--cm-new-w) - var(--cm-gap)); background: var(--chat-bg); border-color: var(--chat-border, #e0e0e0); } .chat-manager-search:hover .chat-manager-search-icon, .chat-manager-search:focus-within .chat-manager-search-icon { color: var(--chat-accent, #007bff); } .chat-manager-list { flex: 1; overflow-y: auto; } .chat-manager-search-results { flex: 1; overflow-y: auto; display: none; background: var(--chat-bg); } #chat_manager_container.searching .chat-manager-search-results { display: block; } #chat_manager_container.searching #chatManagerList { display: none; } .chat-search-result { padding: 10px 12px; border-bottom: 1px solid var(--chat-border); cursor: pointer; } .chat-search-result:hover { background: var(--chat-tint-1, rgba(0, 0, 0, 0.06)); } .chat-search-result-title { font-size: 0.85rem; font-weight: 600; color: var(--chat-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-search-result-snippet { font-size: 0.8rem; color: var(--chat-text-muted); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .chat-search-result-snippet mark { background: var(--chat-accent, #007bff); color: #fff; border-radius: 3px; padding: 0 2px; } .chat-search-result-meta { font-size: 0.72rem; color: var(--chat-placeholder); margin-top: 2px; } .chat-search-status { padding: 16px 12px; text-align: center; color: var(--chat-text-muted); font-size: 0.85rem; } @keyframes msg-highlight-pulse { 0% { opacity: 0.25; } 100% { opacity: 0; } } .msg.msg-highlight { border-radius: 8px; } .msg.msg-highlight::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(0, 123, 255, 0.25); pointer-events: none; animation: msg-highlight-pulse 2.5s ease-out; } .chat-manager-empty { padding: 20px; text-align: center; color: var(--chat-text-muted); font-size: 0.9rem; } .chat-manager-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--chat-border); cursor: pointer; transition: background 0.2s ease; position: relative; background: var(--chat-form-bg); } .chat-manager-item:hover { background: var(--chat-surface-hover); } .chat-manager-item.active { background: var(--chat-surface-active); border-left: 3px solid var(--chat-accent, #007bff); } .chat-manager-item.generating, .chat-manager-item.active.generating { border-left: 3px solid var(--chat-accent-soft); animation: pulse-border 1.5s ease-in-out infinite; } .chat-manager-item.unread, .chat-manager-item.active.unread { border-left: 3px solid #22c55e; animation: none; } .chat-item-info { flex: 1; min-width: 0; } .chat-item-title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.9rem; color: var(--chat-text-primary); } .chat-item-title .chat-title-text { /*flex: 1;*/ min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-item-date { font-size: 0.75rem; color: var(--chat-text-muted); } .chat-item-edit-btn, .chat-item-accept-btn, .chat-item-cancel-btn { background: transparent; border: none; cursor: pointer; color: var(--chat-text-muted); padding: 2px 4px; font-size: 0.75rem; flex-shrink: 0; display: none; align-items: center; justify-content: center; } .chat-item-edit-btn { display: none; } .chat-manager-item:hover .chat-item-edit-btn { display: inline-flex; } .chat-manager-item.editing .chat-item-edit-btn { display: none !important; } .chat-item-accept-btn { color: #28a745; display: inline-flex; } .chat-item-cancel-btn { color: #dc3545; display: inline-flex; } .chat-title-input { flex: 1; min-width: 0; border: 1px solid var(--chat-accent, #007bff); border-radius: 4px; padding: 2px 4px; font-size: inherit; font-family: inherit; background: var(--chat-bg); color: var(--chat-text-primary); outline: none; } .chat-item-delete-btn { background: none; border: none; color: #dc3545; cursor: pointer; padding: 4px; opacity: 0; transition: opacity 0.2s ease; flex-shrink: 0; } .chat-manager-item:hover .chat-item-delete-btn { opacity: 1; } .chat-manager-sentinel { min-height: 32px; display: flex; align-items: center; justify-content: center; color: var(--chat-text-muted); font-size: 1rem; } .chat-manager-sentinel.loading { padding: 8px 0; } .chat-manager-section-header { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 0.8rem; font-weight: 600; color: var(--chat-text-muted); text-transform: uppercase; cursor: pointer; user-select: none; border-bottom: 1px solid var(--chat-border, #e0e0e0); background: var(--chat-surface-deep); } .chat-manager-section-header:hover { color: var(--chat-accent, #007bff); } .chat-manager-section-chevron { font-size: 0.7rem; transition: transform 0.2s ease; } .chat-manager-section-chevron.collapsed { transform: rotate(-90deg); } .chat-manager-section-content.collapsed { display: none; } .chat-item-favorite-btn { background: none; border: none; color: var(--chat-accent, #007bff); cursor: pointer; padding: 4px; opacity: 0; transition: opacity 0.2s ease; flex-shrink: 0; } .chat-manager-item:hover .chat-item-favorite-btn { opacity: 1; } .chat-item-favorite-btn:hover { opacity: 1 !important; } /* ============================== Message Navigation Menu ============================== */ .message-nav-menu { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 10; width: 24px; max-height: 344px; background: var(--chat-form-bg); border: 1px solid var(--chat-border); border-radius: 16px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; overflow: hidden; transition: width 0.25s ease, border-radius 0.25s ease; } .message-nav-menu:hover { width: var(--nav-content-width, 400px); border-radius: 8px; } .message-nav-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 0; display: flex; flex-direction: column; align-items: stretch; width: 100%; scrollbar-width: none; -ms-overflow-style: none; } .message-nav-scroll::-webkit-scrollbar { display: none; } .message-nav-menu:hover .message-nav-scroll { scrollbar-width: auto; } .message-nav-menu:hover .message-nav-scroll::-webkit-scrollbar { display: block; width: 6px; } .message-nav-item { display: flex; align-items: center; justify-content: flex-end; padding: 4px 7px; cursor: pointer; transition: background 0.15s ease, padding 0.2s ease; min-height: 24px; width: 100%; } .message-nav-menu:hover .message-nav-item { padding: 4px 7px 4px 12px; } .message-nav-item:hover { background: var(--chat-surface-hover); } .message-nav-dot { width: 8px; height: 8px; min-width: 8px; border-radius: 50%; background: var(--chat-text-muted); flex-shrink: 0; transition: background 0.15s ease; } .message-nav-item:hover .message-nav-dot, .message-nav-item.active .message-nav-dot { background: var(--chat-accent); } .message-nav-summary { visibility: hidden; opacity: 0; font-size: 0.78rem; color: var(--chat-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 8px; flex: 1; min-width: 0; text-align: right; transition: opacity 0.2s ease; } .message-nav-menu:hover .message-nav-summary { visibility: visible; opacity: 1; } @media (max-width: 768px) { .message-nav-menu { display: none; } #messages { padding: 10px; } }