/* Kontexto-inspired styling */ :root { --whatsapp-green: #25D366; --whatsapp-green-dark: #128C7E; --whatsapp-light-green: #DCF8C6; --whatsapp-blue: #34B7F1; --whatsapp-gray-bg: #E5DDD5; --whatsapp-chat-bg: #E5DDD5; --whatsapp-panel-header: #EDEDED; --whatsapp-sidebar-bg: #FFFFFF; --whatsapp-header-green: #00A884; --whatsapp-text-gray: #667781; --whatsapp-border: #D1D7DB; --whatsapp-message-out: #D9FDD3; --whatsapp-message-in: #FFFFFF; --whatsapp-hover: #F5F6F6; --whatsapp-teal: #008069; --whatsapp-teal-dark: #005C4B; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: #F0F2F5; transition: background-color 0.3s ease, color 0.3s ease; font-size: 14px; color: #111B21; } /* Dark Theme Variables */ :root { --whatsapp-dark-bg: #0B141A; --whatsapp-dark-sidebar: #111B21; --whatsapp-dark-header: #202C33; --whatsapp-dark-msg-bg: #202C33; --whatsapp-dark-msg-out: #005C4B; --whatsapp-dark-msg-in: #202C33; --whatsapp-dark-hover: #2A3942; --whatsapp-dark-border: #2A3942; --whatsapp-dark-text: #E9EDEF; --whatsapp-dark-text-secondary: #8696A0; --whatsapp-dark-input: #2A3942; --whatsapp-dark-dropdown: #233138; } /* Dark Theme - Support both .dark and .dark-theme */ body.dark-theme, body.dark { --whatsapp-gray-bg: var(--whatsapp-dark-bg); --whatsapp-panel-header: var(--whatsapp-dark-header); --whatsapp-sidebar-bg: var(--whatsapp-dark-sidebar); --whatsapp-message-out: var(--whatsapp-dark-msg-out); --whatsapp-message-in: var(--whatsapp-dark-msg-in); --whatsapp-hover: var(--whatsapp-dark-hover); --whatsapp-border: var(--whatsapp-dark-border); background-color: var(--whatsapp-dark-bg); color: var(--whatsapp-dark-text); } /* Sidebar Dark Theme */ body.dark-theme .sidebar, body.dark .sidebar { background-color: var(--whatsapp-dark-sidebar); border-right-color: var(--whatsapp-dark-border); } body.dark-theme .sidebar .input-group, body.dark .sidebar .input-group { background-color: var(--whatsapp-dark-header); } /* Additional Dark Theme Rules */ body.dark, body.dark-theme { /* Cards */ --bs-card-bg: var(--whatsapp-dark-msg-bg); --bs-card-border-color: var(--whatsapp-dark-border); /* Tables */ --bs-table-bg: transparent; --bs-table-color: var(--whatsapp-dark-text); --bs-table-border-color: var(--whatsapp-dark-border); --bs-table-striped-bg: rgba(255, 255, 255, 0.02); --bs-table-hover-bg: var(--whatsapp-dark-hover); /* Forms */ --bs-body-bg: var(--whatsapp-dark-bg); --bs-body-color: var(--whatsapp-dark-text); --bs-border-color: var(--whatsapp-dark-border); } /* Bootstrap overrides for dark theme */ body.dark .bg-light, body.dark-theme .bg-light { background-color: var(--whatsapp-dark-header) !important; } body.dark .text-dark, body.dark-theme .text-dark { color: var(--whatsapp-dark-text) !important; } body.dark .border, body.dark-theme .border { border-color: var(--whatsapp-dark-border) !important; } body.dark .btn-secondary, body.dark-theme .btn-secondary { background-color: var(--whatsapp-dark-hover); border-color: var(--whatsapp-dark-border); color: var(--whatsapp-dark-text); } body.dark .btn-secondary:hover, body.dark-theme .btn-secondary:hover { background-color: var(--whatsapp-dark-border); border-color: var(--whatsapp-dark-border); } body.dark .dropdown-menu, body.dark-theme .dropdown-menu { background-color: var(--whatsapp-dark-dropdown); border-color: var(--whatsapp-dark-border); } body.dark .dropdown-item, body.dark-theme .dropdown-item { color: var(--whatsapp-dark-text); } body.dark .dropdown-item:hover, body.dark-theme .dropdown-item:hover { background-color: var(--whatsapp-dark-hover); } body.dark .navbar, body.dark-theme .navbar { background-color: var(--whatsapp-dark-header) !important; } body.dark .navbar-light .navbar-brand, body.dark-theme .navbar-light .navbar-brand { color: var(--whatsapp-dark-text) !important; } body.dark-theme .sidebar .form-control, body.dark .sidebar .form-control { color: var(--whatsapp-dark-text); background-color: var(--whatsapp-dark-input); border-color: var(--whatsapp-dark-border); } /* More comprehensive dark theme rules */ body.dark .bg-white, body.dark-theme .bg-white { background-color: var(--whatsapp-dark-msg-bg) !important; } body.dark .bg-body, body.dark-theme .bg-body { background-color: var(--whatsapp-dark-bg) !important; } body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6, body.dark-theme h1, body.dark-theme h2, body.dark-theme h3, body.dark-theme h4, body.dark-theme h5, body.dark-theme h6 { color: var(--whatsapp-dark-text); } body.dark .list-group-item, body.dark-theme .list-group-item { background-color: var(--whatsapp-dark-msg-bg); border-color: var(--whatsapp-dark-border); color: var(--whatsapp-dark-text); } body.dark .list-group-item:hover, body.dark-theme .list-group-item:hover { background-color: var(--whatsapp-dark-hover); } body.dark .badge, body.dark-theme .badge { background-color: var(--whatsapp-dark-hover); color: var(--whatsapp-dark-text); } body.dark .alert, body.dark-theme .alert { background-color: var(--whatsapp-dark-msg-bg); border-color: var(--whatsapp-dark-border); color: var(--whatsapp-dark-text); } body.dark .page-link, body.dark-theme .page-link { background-color: var(--whatsapp-dark-msg-bg); border-color: var(--whatsapp-dark-border); color: var(--whatsapp-dark-text); } body.dark .page-link:hover, body.dark-theme .page-link:hover { background-color: var(--whatsapp-dark-hover); border-color: var(--whatsapp-dark-border); color: var(--whatsapp-dark-text); } /* Breadcrumb dark theme */ body.dark .breadcrumb, body.dark-theme .breadcrumb { background-color: transparent; } body.dark .breadcrumb-item a, body.dark-theme .breadcrumb-item a { color: var(--whatsapp-green); } body.dark .breadcrumb-item.active, body.dark-theme .breadcrumb-item.active { color: var(--whatsapp-dark-text-secondary); } /* Nav tabs dark theme */ body.dark .nav-tabs, body.dark-theme .nav-tabs { border-bottom-color: var(--whatsapp-dark-border); } body.dark .nav-tabs .nav-link, body.dark-theme .nav-tabs .nav-link { color: var(--whatsapp-dark-text-secondary); border-color: transparent; } body.dark .nav-tabs .nav-link:hover, body.dark-theme .nav-tabs .nav-link:hover { border-color: var(--whatsapp-dark-border); background-color: var(--whatsapp-dark-hover); } body.dark .nav-tabs .nav-link.active, body.dark-theme .nav-tabs .nav-link.active { color: var(--whatsapp-dark-text); background-color: var(--whatsapp-dark-bg); border-color: var(--whatsapp-dark-border); border-bottom-color: var(--whatsapp-dark-bg); } /* Progress bars */ body.dark .progress, body.dark-theme .progress { background-color: var(--whatsapp-dark-hover); } /* Tooltips */ body.dark .tooltip-inner, body.dark-theme .tooltip-inner { background-color: var(--whatsapp-dark-header); color: var(--whatsapp-dark-text); } /* Scrollbars */ body.dark ::-webkit-scrollbar, body.dark-theme ::-webkit-scrollbar { width: 8px; height: 8px; } body.dark ::-webkit-scrollbar-track, body.dark-theme ::-webkit-scrollbar-track { background: var(--whatsapp-dark-bg); } body.dark ::-webkit-scrollbar-thumb, body.dark-theme ::-webkit-scrollbar-thumb { background: var(--whatsapp-dark-hover); border-radius: 4px; } body.dark ::-webkit-scrollbar-thumb:hover, body.dark-theme ::-webkit-scrollbar-thumb:hover { background: var(--whatsapp-dark-border); } body.dark-theme .sidebar .input-group-text, body.dark .sidebar .input-group-text { color: var(--whatsapp-dark-text-secondary); background-color: var(--whatsapp-dark-input); border-color: var(--whatsapp-dark-border); } /* Bootstrap Badge Colors in Dark Theme */ body.dark .badge.bg-primary, body.dark-theme .badge.bg-primary { background-color: #0d6efd !important; } body.dark .badge.bg-success, body.dark-theme .badge.bg-success { background-color: #198754 !important; } body.dark .badge.bg-warning, body.dark-theme .badge.bg-warning { background-color: #ffc107 !important; color: #000 !important; } body.dark .badge.bg-danger, body.dark-theme .badge.bg-danger { background-color: #dc3545 !important; } body.dark .badge.bg-info, body.dark-theme .badge.bg-info { background-color: #0dcaf0 !important; color: #000 !important; } body.dark .badge.bg-secondary, body.dark-theme .badge.bg-secondary { background-color: #6c757d !important; } /* Text colors in dark theme */ body.dark .text-primary, body.dark-theme .text-primary { color: #6ea8fe !important; } body.dark .text-success, body.dark-theme .text-success { color: #75b798 !important; } body.dark .text-warning, body.dark-theme .text-warning { color: #ffda6a !important; } body.dark .text-danger, body.dark-theme .text-danger { color: #ea868f !important; } body.dark .text-info, body.dark-theme .text-info { color: #6edff6 !important; } /* Buttons in dark theme */ body.dark .btn-primary, body.dark-theme .btn-primary { background-color: var(--whatsapp-green); border-color: var(--whatsapp-green); } body.dark .btn-primary:hover, body.dark-theme .btn-primary:hover { background-color: var(--whatsapp-green-dark); border-color: var(--whatsapp-green-dark); } body.dark .btn-danger, body.dark-theme .btn-danger { background-color: #dc3545; border-color: #dc3545; } body.dark .btn-success, body.dark-theme .btn-success { background-color: #198754; border-color: #198754; } /* Input group in dark theme */ body.dark .input-group-text, body.dark-theme .input-group-text { background-color: var(--whatsapp-dark-input); border-color: var(--whatsapp-dark-border); color: var(--whatsapp-dark-text-secondary); } /* Form check in dark theme */ body.dark .form-check-input, body.dark-theme .form-check-input { background-color: var(--whatsapp-dark-input); border-color: var(--whatsapp-dark-border); } body.dark .form-check-input:checked, body.dark-theme .form-check-input:checked { background-color: var(--whatsapp-green); border-color: var(--whatsapp-green); } /* Icons specific colors */ body.dark .bi-broadcast.text-primary, body.dark-theme .bi-broadcast.text-primary, body.dark .bi-people-fill.text-success, body.dark-theme .bi-people-fill.text-success, body.dark .bi-clock-history.text-warning, body.dark-theme .bi-clock-history.text-warning, body.dark .bi-chat-dots-fill.text-info, body.dark-theme .bi-chat-dots-fill.text-info { opacity: 0.9; } body.dark-theme .user-profile-section { background: #202C33 !important; } body.dark-theme .chat-item { background-color: var(--whatsapp-sidebar-bg); color: #E9EDEF; border-bottom: 1px solid #2A3942; } body.dark-theme .chat-item:hover { background-color: var(--whatsapp-hover) !important; } body.dark-theme .chat-item.active { background-color: #2A3942 !important; border-left: 3px solid var(--whatsapp-green) !important; padding-left: 13px !important; } /* Chat Area Dark Theme */ body.dark-theme .chat-area { background-color: var(--whatsapp-gray-bg); } body.dark-theme .chat-header { background-color: var(--whatsapp-panel-header); border-bottom-color: var(--whatsapp-border); color: #E9EDEF; } body.dark-theme .chat-messages { background-color: var(--whatsapp-gray-bg); } body.dark-theme .message.other .message-bubble { background-color: var(--whatsapp-message-in); color: #E9EDEF; box-shadow: 0 1px 0.5px rgba(0,0,0,0.3); } body.dark-theme .message.own .message-bubble { background-color: var(--whatsapp-message-out); color: #E9EDEF; } body.dark-theme .chat-input { background-color: var(--whatsapp-panel-header); border-top: none; } /* Forms Dark Theme */ body.dark-theme .form-control { background-color: #2A3942; border-color: #2A3942; color: #E9EDEF; } body.dark-theme .form-control:focus { background-color: #2A3942; border-color: var(--whatsapp-green); color: #E9EDEF; box-shadow: 0 0 0 0.2rem rgba(37, 211, 102, 0.25); } body.dark-theme .form-control::placeholder { color: #b0b0b0; } body.dark-theme .input-group-text { background-color: #404040; border-color: #555; color: #ffffff; } /* Buttons Dark Theme */ body.dark-theme .btn-outline-secondary { color: #b0b0b0; border-color: #555; } body.dark-theme .btn-outline-secondary:hover { background-color: #404040; border-color: #777; color: #ffffff; } body.dark-theme .btn-light { background-color: #404040; border-color: #555; color: #ffffff; } body.dark-theme .btn-light:hover { background-color: #4a4a4a; border-color: #777; color: #ffffff; } body.dark-theme .btn-success { background-color: var(--whatsapp-green); border-color: var(--whatsapp-green); } body.dark-theme .btn-success:hover { background-color: var(--whatsapp-green-dark); border-color: var(--whatsapp-green-dark); } /* Override Bootstrap button colors */ .btn-success { background-color: var(--whatsapp-green); border-color: var(--whatsapp-green); } .btn-success:hover { background-color: var(--whatsapp-green-dark); border-color: var(--whatsapp-green-dark); } /* Modals Dark Theme */ body.dark-theme .modal-content { background-color: #2d2d30; color: #ffffff; border-color: #404040; } body.dark-theme .modal-header { border-bottom-color: #404040; } body.dark-theme .modal-footer { border-top-color: #404040; } body.dark-theme .modal-title { color: #ffffff; } body.dark-theme .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Dropdowns Dark Theme */ body.dark-theme .dropdown-menu { background-color: var(--whatsapp-panel-header); border-color: var(--whatsapp-border); box-shadow: 0 4px 20px rgba(0,0,0,0.5); } body.dark-theme .dropdown-item { color: #ffffff; } body.dark-theme .dropdown-item:hover, body.dark-theme .dropdown-item:focus { background-color: #404040; color: #ffffff; } body.dark-theme .dropdown-divider { border-top-color: #404040; } /* Lists Dark Theme */ body.dark-theme .list-group-item { background-color: #2d2d30; border-color: #404040; color: #ffffff; } body.dark-theme .list-group-item:hover { background-color: #404040; } /* Text Colors Dark Theme */ body.dark-theme .text-muted { color: #b0b0b0 !important; } body.dark-theme .text-white-50 { color: rgba(255,255,255,0.5) !important; } body.dark-theme .text-primary { color: #60a5fa !important; } body.dark-theme .text-success { color: #4ade80 !important; } body.dark-theme .text-warning { color: #fbbf24 !important; } body.dark-theme .text-danger { color: #f87171 !important; } body.dark-theme .text-info { color: #38bdf8 !important; } /* Background Colors Dark Theme */ body.dark-theme .bg-light { background-color: #2d2d30 !important; } body.dark-theme .bg-white { background-color: #2d2d30 !important; } /* Borders Dark Theme */ body.dark-theme .border-bottom { border-color: #404040 !important; } body.dark-theme .border-top { border-color: #404040 !important; } body.dark-theme .border { border-color: #404040 !important; } /* Alerts Dark Theme */ body.dark-theme .alert { background-color: #2d2d30; border-color: #404040; color: #ffffff; } body.dark-theme .alert-warning { background-color: #713f12; border-color: #92400e; color: #fbbf24; } body.dark-theme .alert-success { background-color: #14532d; border-color: #166534; color: #4ade80; } body.dark-theme .alert-danger { background-color: #7f1d1d; border-color: #991b1b; color: #f87171; } /* Badges Dark Theme */ body.dark-theme .badge { background-color: #404040; color: #ffffff; } body.dark-theme .badge.bg-warning { background-color: #92400e !important; color: #fbbf24 !important; } body.dark-theme .badge.bg-primary { background-color: #1e40af !important; } /* Progress Dark Theme */ body.dark-theme .progress { background-color: #404040; } body.dark-theme .progress-bar { background-color: #3b82f6; } /* File Upload Dark Theme */ body.dark-theme .file-preview-container, body.dark .file-preview-container { background-color: #2d2d30; border-color: #404040; } body.dark-theme .drag-over { border-color: #3b82f6 !important; background-color: #1e3a8a !important; } /* Avatar Dark Theme */ body.dark-theme .user-avatar { border-color: rgba(255,255,255,0.2); } body.dark-theme .user-avatar:hover { border-color: rgba(255,255,255,0.4); } /* Scrollbar Dark Theme */ body.dark-theme .chat-messages::-webkit-scrollbar-track { background: #2d2d30; } body.dark-theme .chat-messages::-webkit-scrollbar-thumb { background: #555; } body.dark-theme .chat-messages::-webkit-scrollbar-thumb:hover { background: #777; } body.dark-theme .emoji-container::-webkit-scrollbar-track { background: #2d2d30; } body.dark-theme .emoji-container::-webkit-scrollbar-thumb { background: #555; } /* No Chat Selected Styling */ #noChatSelected { background-color: #F8F9FA; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; } #noChatSelected .text-muted { color: #8696A0 !important; } #noChatSelected .fa-comments { color: #8696A0; opacity: 0.5; } /* Kontexto logo in no chat area */ #noChatSelected::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 360px; height: 360px; background: url('data:image/svg+xml;utf8,') center no-repeat; background-size: contain; opacity: 0.3; z-index: 0; pointer-events: none; } /* No Chat Selected Dark Theme */ body.dark-theme #noChatSelected { color: #b0b0b0; background-color: #111B21; background-image: none; } body.dark-theme #noChatSelected .fa-comments { color: #555; } /* Forms Labels Dark Theme */ body.dark-theme .form-label { color: #ffffff; } body.dark-theme .form-text { color: #b0b0b0; } /* Table Dark Theme (if any) */ body.dark-theme .table { color: #ffffff; } body.dark-theme .table-striped > tbody > tr:nth-of-type(odd) > td, body.dark-theme .table-striped > tbody > tr:nth-of-type(odd) > th { background-color: #2d2d30; } /* Loading Spinner Dark Theme */ body.dark-theme .spinner-border { color: #60a5fa; } /* Card Dark Theme */ body.dark-theme .card { background-color: #2d2d30; border-color: #404040; } body.dark-theme .card-header { background-color: #404040; border-bottom-color: #555; } /* Search Highlight Dark Theme */ body.dark-theme .search-highlight { background-color: #713f12; color: #fbbf24; } /* Additional Dark Theme Fixes */ body.dark-theme .navbar { background-color: #2d2d30 !important; } body.dark-theme .navbar-brand, body.dark-theme .navbar-nav .nav-link { color: #ffffff !important; } body.dark-theme .navbar-toggler { border-color: #555; } body.dark-theme .navbar-toggler-icon { filter: invert(1); } /* Tooltip Dark Theme */ body.dark-theme .tooltip { background-color: #2d2d30; color: #ffffff; } body.dark-theme .tooltip .tooltip-inner { background-color: #2d2d30; color: #ffffff; } body.dark-theme .tooltip.bs-tooltip-top .tooltip-arrow::before, body.dark-theme .tooltip.bs-tooltip-auto[x-placement^="top"] .tooltip-arrow::before { border-top-color: #2d2d30; } body.dark-theme .tooltip.bs-tooltip-right .tooltip-arrow::before, body.dark-theme .tooltip.bs-tooltip-auto[x-placement^="right"] .tooltip-arrow::before { border-right-color: #2d2d30; } body.dark-theme .tooltip.bs-tooltip-bottom .tooltip-arrow::before, body.dark-theme .tooltip.bs-tooltip-auto[x-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: #2d2d30; } body.dark-theme .tooltip.bs-tooltip-left .tooltip-arrow::before, body.dark-theme .tooltip.bs-tooltip-auto[x-placement^="left"] .tooltip-arrow::before { border-left-color: #2d2d30; } /* Service Chat Indicator */ .service-indicator { font-size: 0.75rem; vertical-align: middle; } .chat-header .service-indicator { animation: pulse 2s infinite; } @keyframes pulse { 0% { opacity: 0.8; } 50% { opacity: 1; } 100% { opacity: 0.8; } } /* Popover Dark Theme */ body.dark-theme .popover { background-color: #2d2d30; border-color: #404040; } body.dark-theme .popover-header { background-color: #404040; border-bottom-color: #555; color: #ffffff; } body.dark-theme .popover-body { color: #ffffff; } /* Accordion Dark Theme */ body.dark-theme .accordion-item { background-color: #2d2d30; border-color: #404040; } body.dark-theme .accordion-button { background-color: #2d2d30; color: #ffffff; border-color: #404040; } body.dark-theme .accordion-button:not(.collapsed) { background-color: #404040; color: #ffffff; } body.dark-theme .accordion-button::after { filter: invert(1); } /* Breadcrumb Dark Theme */ body.dark-theme .breadcrumb { background-color: #2d2d30; } body.dark-theme .breadcrumb-item > a { color: #60a5fa; } body.dark-theme .breadcrumb-item.active { color: #b0b0b0; } /* Pagination Dark Theme */ body.dark-theme .page-link { background-color: #2d2d30; border-color: #404040; color: #60a5fa; } body.dark-theme .page-link:hover { background-color: #404040; border-color: #555; color: #ffffff; } body.dark-theme .page-item.active .page-link { background-color: #1e40af; border-color: #1e40af; } body.dark-theme .page-item.disabled .page-link { background-color: #2d2d30; border-color: #404040; color: #555; } /* Nav Tabs Dark Theme */ body.dark-theme .nav-tabs { border-bottom-color: #404040; } body.dark-theme .nav-tabs .nav-link { color: #b0b0b0; border-color: transparent; } body.dark-theme .nav-tabs .nav-link:hover { border-color: #404040; color: #ffffff; } body.dark-theme .nav-tabs .nav-link.active { background-color: #2d2d30; border-color: #404040 #404040 #2d2d30; color: #ffffff; } /* Tab Content Dark Theme */ body.dark-theme .tab-content { background-color: #2d2d30; border: 1px solid #404040; border-top: none; } /* Offcanvas Dark Theme */ body.dark-theme .offcanvas { background-color: #2d2d30; color: #ffffff; } body.dark-theme .offcanvas-header { border-bottom-color: #404040; } /* Toast Dark Theme */ body.dark-theme .toast { background-color: #2d2d30; border-color: #404040; color: #ffffff; } body.dark-theme .toast-header { background-color: #404040; border-bottom-color: #555; color: #ffffff; } /* Close Button Dark Theme */ body.dark-theme .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Custom Checkbox/Radio Dark Theme */ body.dark-theme .form-check-input { background-color: #404040; border-color: #555; } body.dark-theme .form-check-input:checked { background-color: #1e40af; border-color: #1e40af; } body.dark-theme .form-check-input:focus { border-color: #60a5fa; box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.25); } body.dark-theme .form-check-label { color: #ffffff; } /* Range Input Dark Theme */ body.dark-theme .form-range { background-color: transparent; } body.dark-theme .form-range::-webkit-slider-track { background-color: #404040; } body.dark-theme .form-range::-webkit-slider-thumb { background-color: #1e40af; } body.dark-theme .form-range::-moz-range-track { background-color: #404040; } body.dark-theme .form-range::-moz-range-thumb { background-color: #1e40af; border-color: #1e40af; } /* Select Dark Theme */ body.dark-theme .form-select { background-color: #404040; border-color: #555; color: #ffffff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e"); } body.dark-theme .form-select:focus { background-color: #4a4a4a; border-color: #60a5fa; color: #ffffff; box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.25); } /* Floating Labels Dark Theme */ body.dark-theme .form-floating > label { color: #b0b0b0; } body.dark-theme .form-floating > .form-control:focus ~ label, body.dark-theme .form-floating > .form-control:not(:placeholder-shown) ~ label { color: #60a5fa; } /* Theme toggle button */ .theme-toggle { transition: all 0.3s ease; } .theme-toggle:hover { transform: scale(1.1); } /* Emoji Picker */ .emoji-picker { position: absolute; bottom: 60px; left: 50px; z-index: 1000; width: auto; max-width: 350px; } .emoji-container { max-height: 320px; overflow-y: auto; border: none !important; background-color: white !important; box-shadow: 0 2px 5px 0 rgba(11,20,26,0.26), 0 2px 10px 0 rgba(11,20,26,0.16); border-radius: 8px; } .emoji-categories { display: flex; gap: 5px; border-bottom: 1px solid #e9ecef; padding-bottom: 10px; margin-bottom: 10px; } .emoji-category { min-width: 40px; height: 35px; border-radius: 20px; transition: all 0.2s ease; } .emoji-category.active { background-color: var(--whatsapp-teal); color: white; border-color: var(--whatsapp-teal); } .emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; max-height: 200px; overflow-y: auto; } .emoji-item { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border: none; background: none; font-size: 20px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; } .emoji-item:hover { background-color: #f8f9fa; transform: scale(1.2); } /* Dark theme emoji picker */ body.dark-theme .emoji-container { background-color: #2d2d30 !important; border-color: #404040 !important; } body.dark-theme .emoji-categories { border-bottom-color: #404040; } body.dark-theme .emoji-category { background-color: #404040; border-color: #555; color: #b0b0b0; } body.dark-theme .emoji-category:hover { background-color: #4a4a4a; border-color: #777; color: #ffffff; } body.dark-theme .emoji-category.active { background-color: var(--whatsapp-green) !important; border-color: var(--whatsapp-green) !important; color: #ffffff !important; } body.dark-theme .emoji-item:hover { background-color: #404040; } body.dark-theme .emoji-grid { background-color: transparent; } /* Emoji in messages */ .message-bubble .emoji { font-size: 24px; line-height: 1; } .sidebar { background-color: var(--whatsapp-sidebar-bg); border-right: 1px solid var(--whatsapp-border); height: 100%; overflow-y: auto; overflow-x: hidden; position: relative; display: flex; flex-direction: column; } .sidebar-header { position: sticky; top: 0; background-color: var(--whatsapp-sidebar-bg); z-index: 100; box-shadow: 0 1px 2px rgba(0,0,0,0.08); } .user-profile-section { background: #F0F2F5; padding: 10px 16px; min-height: 59px; display: flex; align-items: center; } .user-profile-section .online-indicator { border: 2px solid var(--whatsapp-sidebar-bg); box-shadow: none; } /* User profile section styling */ .user-profile-section h6 { font-size: 16px; font-weight: 400; color: #111B21; margin: 0; } .user-profile-section small { font-size: 13px; color: var(--whatsapp-text-gray); } .user-profile-section .btn { background-color: transparent; border: none; color: #54656F; width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.2s; } .user-profile-section .btn:hover { background-color: rgba(0,0,0,0.05); border-radius: 50%; } .chat-area { background-color: #E5DDD5; height: 100%; display: flex; flex-direction: column; position: relative; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF0klEQVR4nO2dW2wUVRjHf2d2u7vdbrctpS20lEspUhQQEBEQEkDUKBijD/rgAyYm+mDig4kJJCbGFx9MjEaj8UETN8YbxBivIAoCIiAIiFyEQktpS2mhLW0p3e7uzJyZ2a0Uu+3s7szZndni+SWTzM7Od853/vOd73znO+eAIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIAiCIIgiRe1/++8ftnbsrK2pXF5dUT5ZVZQyRVFKARRZllWfz+cH8HgsHo8d7rlw7siZjnNbd+/a+a2e+gQt2J4lG5oNBrVKo1FvtFisXm1NTb1Go6k0mUxF+vr6CACE/AEE/AHE43EMDg7C7/cj4Pcj4A8gHA4DAFRVRTweRyQSQSQcgdfrRS6XAwCoqgqn04mZ8xdgwcJFsNsdUJTiVQsR5M1nHluvqMo2TaN3OhzOctGKzLIMu8MBu8MBVBTfPBcvdqLqf9jfhh8//wT/nj4NVRmbWI4ZKPH0o49jw6aN8Hq9BZflcLlRXV2N6upqVXO7jbm6Xl9XOy3bGicI4nI74XJfBb7Y+Ra6uy4Z9gyjBFm6dOn7mUzmZaPKqK5xo3nefPh8PsPKAIC2o0dx4OefSgKxVNdUVz31wnOJK+2dN5k5r1+mBRnvfEQjCJL9h/Z9f/jIwVZRxBgzBiYl6Z/fhJamWejt6TGsDKPqkN179ux5TBQ5xkSkqcnOLLBUOVUBZwAAVxdXQojKFy5evMiIIsUYQYYBJsUnHJaE9LeLJJZQKITe3t5Vhgg0ivQCiOSf8Gwa3IlJJ2O7Z+KWPydw9LfOvUbINGomJt46hBU3JmGdNg1zr+vI8kzN1ZQgCbMtS9NSkfbPQBkPr8F0w6YGIBMEwsNrMN3RJchkwGw1YfrkQNJnaxOvzSSqCsRT4CkXgtXsKHsQBABBEAShhClap57P50Y8xrwBz+fz/xnZQXo1JAhGFKqnfJ4FQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEcS0jNBHy/PMv/JSJx1aJykpRFJgtZpgtZlR53CivKIe9zAFFUZDNZjE4MAB/fz9CoTCuBINQdb5P0+n01t1f7X5DhCxFJYjT5XI6y8s2xOPxWaLkp8JoMsJut6OyshJmixmMRzJYJBKB1+fTdYxwTRBjxYoVjfF47GelBFOW7xRTNBKJYGBgAOFQGJZSB8wmE2Zm37t46Mjvr44HM1DZ1LT2/lOnT24vdUIAMDQ0hERcWw8phCBOl6t2+rQZO0zlnsddJkNjIHJJ2xENgiOaBE9uoOdK50ebXt74TjgczuqpRO/50J+/8n/91vSZN6YAj8ejRBENHosF7mqAlyGqJrBwJo4H4OzsTP/jdrt3qKpKeILhBJm1cOGyBivQYACWudKJD1CyzHJRMlPjdl9lsRJNkstyKzOKVnQ7DVMpprlz59ZDLx6XJ9aRu7u63lm/dtWNhkqmE6ebW6CqKsz3P5j+a5kJ8h1PA9n0v1jKG6o11pPPvNjQcPfQrKbGbiOkKhooK5GGptoCBBEBb9+bTxb6Vu+IU9c3LcUALOuuD8C8SFqQhtoC39ZFJpNRAAFhA6yqJBMW9PxLWhyFOGFBtAqRy2YBCBi0aEoAUOGLFJAMoTBZjRRCRAYKCl2a2mKfSiObzcqA5jqEK5JQKBABHAOWFJGKEGGJJqMFKViHFKNJoihBCkLhc0KQa0GIXC4nA8UmSHEKwZvl9gpS/KqhxQCz+iuUrMFDfzMvRJAEhqSE4Bn+mgihSqg0yFQlE7vY1ta2bsXKe1XxZRMEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEYQT/A3gQTZXbvY+GAAAAAElFTkSuQmCC'); background-size: 500px; background-attachment: fixed; } .chat-list { flex: 1; overflow-y: auto; overflow-x: hidden; } .chat-item { border: none !important; padding: 12px 16px !important; transition: all 0.15s ease; border-radius: 0; background-color: var(--whatsapp-sidebar-bg); border-bottom: 1px solid #F0F2F5; cursor: pointer; position: relative; min-height: 72px; display: flex !important; align-items: center !important; } .chat-item:hover { background-color: var(--whatsapp-hover) !important; } .chat-item.active { background-color: #F0F2F5 !important; border-left: 3px solid var(--whatsapp-teal) !important; padding-left: 13px !important; } .chat-item.active .text-muted { color: var(--whatsapp-text-gray) !important; } .chat-item.active .badge { background-color: var(--whatsapp-green) !important; color: white !important; } .chat-item.unread { background-color: var(--whatsapp-sidebar-bg) !important; } .chat-item.unread .text-muted { color: #111B21 !important; font-weight: 600; } .chat-item .chat-name { font-size: 16px; font-weight: 400; color: #111B21; margin-bottom: 2px; } .chat-item .last-message-preview { font-size: 13px; color: var(--whatsapp-text-gray); display: flex; align-items: center; gap: 4px; } .chat-item .chat-time { font-size: 12px; color: var(--whatsapp-text-gray); position: absolute; top: 12px; right: 16px; } .avatar { position: relative; flex-shrink: 0; } .avatar { width: 49px; height: 49px; flex-shrink: 0; } .avatar img, .avatar .user-avatar { width: 49px !important; height: 49px !important; border-radius: 50%; object-fit: cover; } .user-avatar-placeholder { width: 49px !important; height: 49px !important; background-color: #DFE5E7; flex-shrink: 0; } .group-avatar { width: 49px !important; height: 49px !important; background-color: #DFE5E7 !important; color: #8696A0 !important; font-size: 20px; } .chat-item:hover .group-avatar { transform: scale(1.05); } .chat-item.active .group-avatar { background-color: rgba(255,255,255,0.2) !important; transform: scale(1.05); } .online-indicator { position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background-color: #31A24C; border: 2px solid white; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } body.dark-theme .online-indicator, body.dark .online-indicator { border-color: var(--whatsapp-dark-sidebar); } .chat-header { background-color: #F0F2F5; border-bottom: none; min-height: 59px; box-shadow: 0 1px 3px rgba(11,20,26,0.08); flex-shrink: 0; } .chat-header #chatName { font-size: 16px; font-weight: 400; color: #111B21; } .chat-header #chatStatus { font-size: 13px; color: var(--whatsapp-text-gray); } #groupManagementButtons .btn, #groupLeaveButton .btn { transition: all 0.2s ease; } #groupManagementButtons .btn:hover, #groupLeaveButton .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .chat-messages { flex: 1; overflow-y: auto; padding: 20px; background-color: var(--whatsapp-gray-bg); background-image: url('data:image/svg+xml;utf8,'); background-size: 400px; min-height: 0; } /* .message spacing - canonical definition in Kontexto section below */ .message.own { justify-content: flex-end; } .message-bubble { max-width: 65%; padding: 6px 7px 8px 9px; border-radius: 7.5px; position: relative; word-wrap: break-word; font-size: 14.2px; line-height: 19px; box-shadow: 0 1px 0.5px rgba(0,0,0,0.13); } .message.own .message-bubble { background-color: var(--whatsapp-message-out); border-top-right-radius: 0; margin-left: auto; } /* Message bubble tails */ .message.own .message-bubble::before { content: ''; position: absolute; top: 0; right: -8px; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent transparent var(--whatsapp-message-out); } .message.other .message-bubble { background-color: var(--whatsapp-message-in); border-top-left-radius: 0; } .message.other .message-bubble::before { content: ''; position: absolute; top: 0; left: -8px; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 0; border-color: transparent var(--whatsapp-message-in) transparent transparent; } .message-info { font-size: 11px; color: rgba(0,0,0,0.45); display: inline-flex; align-items: center; gap: 3px; float: right; margin: 4px 0 -5px 12px; user-select: none; white-space: nowrap; position: relative; } .message.own .message-info { text-align: right; } .chat-input { background-color: #F0F2F5; border-top: none; padding: 5px 16px 10px; position: relative; flex-shrink: 0; } .chat-input .form-control { border: none; border-radius: 21px; padding: 9px 12px 9px 42px; background-color: #FFFFFF; font-size: 15px; height: 42px; box-shadow: none; } .chat-input .input-group { gap: 11px; align-items: center; } .chat-input .btn { border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; background-color: transparent; color: #54656F; font-size: 20px; padding: 0; transition: all 0.2s; } .chat-input .btn:hover { background-color: rgba(0,0,0,0.05); } .chat-input #sendButton { background-color: var(--whatsapp-teal); color: white; } .chat-input #sendButton:hover { background-color: var(--whatsapp-teal-dark); } #chatContainer { display: flex; flex-direction: column; height: 100%; } /* Scrollbar styling */ .chat-messages::-webkit-scrollbar, .sidebar::-webkit-scrollbar, .chat-list::-webkit-scrollbar { width: 6px; } .chat-messages::-webkit-scrollbar-track, .sidebar::-webkit-scrollbar-track, .chat-list::-webkit-scrollbar-track { background: transparent; } .chat-messages::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb, .chat-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; } .chat-messages::-webkit-scrollbar-thumb:hover, .sidebar::-webkit-scrollbar-thumb:hover, .chat-list::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); } /* Responsive sidebar - canonical in responsive.css (uses .mobile-open + translateX) */ /* Search box styling */ .sidebar .p-3.border-bottom { background-color: var(--whatsapp-sidebar-bg); padding: 7px 13px !important; border-bottom: 1px solid #F0F2F5; } .sidebar .input-group { background-color: #F0F2F5; border-radius: 9px; overflow: hidden; box-shadow: none !important; height: 35px; } .sidebar .input-group-text { background-color: transparent; border: none; color: #54656F; padding: 0 0 0 13px; width: 33px; } .sidebar .form-control { background-color: transparent; border: none; padding: 0 32px 0 65px; font-size: 14px; color: #3B4A54; margin-left: -32px; height: 35px; line-height: 35px; } .sidebar .form-control::placeholder { color: #8696A0; } .sidebar .form-control:focus { box-shadow: none; background-color: transparent; } /* Animation for new messages */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .message.new { animation: fadeInUp 0.3s ease-out; } /* Typing indicator - see canonical definition below */ /* Group management styles */ .chat-item-container { position: relative; } .chat-item-container .chat-item { display: block; text-decoration: none; color: inherit; padding: 15px; } .user-result, .member-item { border-radius: 8px; transition: background-color 0.2s; } .user-result:hover, .member-item:hover { background-color: #f8f9fa; } .modal-body .user-result:last-child, .modal-body .member-item:last-child { border-bottom: none; } .badge { font-size: 0.75rem; } /* Improved badge styling */ .chat-item .badge.bg-warning { background-color: rgba(255, 193, 7, 0.15) !important; color: #FFC107 !important; font-weight: 500; border: 1px solid rgba(255, 193, 7, 0.3); } /* Search results styling */ #searchResults, #groupSearchResults, #currentMembers { max-height: 300px; overflow-y: auto; } /* Enhanced search input */ .input-group:focus-within { box-shadow: 0 0 0 3px rgba(0,123,255,0.1); border-radius: 8px; } .input-group .form-control:focus { box-shadow: none; border-color: #80bdff; } #clearSearch:hover { color: #dc3545 !important; transform: scale(1.1); } /* Chat time styling */ .chat-time { font-size: 0.75rem; min-width: 50px; text-align: right; } .chat-item.active .chat-time { color: rgba(255,255,255,0.7) !important; } /* Dropdown positioning for group items */ .dropdown-menu { z-index: 1050; border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.15); border-radius: 8px; } .dropdown-item { transition: all 0.2s ease; border-radius: 6px; margin: 2px 4px; } .dropdown-item:hover { background-color: #f8f9fa; transform: translateX(2px); } /* Admin badge styling */ .badge.bg-warning { color: #000; font-size: 11px; padding: 2px 8px; border-radius: 3px; font-weight: 400; background-color: rgba(255, 193, 7, 0.15) !important; color: #D4A017 !important; border: 1px solid rgba(255, 193, 7, 0.3); vertical-align: middle; } /* Button hover effects */ .btn-sm:hover { transform: scale(1.05); transition: transform 0.2s; } /* File upload and media styles */ .file-preview-container { background-color: #f8f9fa; border: 2px dashed #dee2e6; } .drag-over { border-color: #E30613 !important; background-color: #fef2f2 !important; } .media-container { position: relative; } .media-info { margin-top: 5px; } .file-attachment { background-color: #f8f9fa; max-width: 300px; } .cursor-pointer { cursor: pointer; } .message-bubble img { border-radius: 8px; } .message-bubble video { border-radius: 8px; } .message-bubble audio { max-width: 250px; } /* Media/attachment bubble adjustments */ .message-bubble:has(.attach-media), .message-bubble:has(.attach-file), .message-bubble:has(.yt-embed) { padding: 4px 4px 8px; } .message-bubble:has(.attach-file) { padding: 8px; } /* Avatar styles */ .user-avatar { transition: all 0.2s ease; border: 2px solid rgba(255,255,255,0.1); } .user-avatar:hover { transform: scale(1.05); border-color: rgba(255,255,255,0.3); } .avatar { position: relative; } .avatar img { box-shadow: 0 2px 8px rgba(0,0,0,0.1); } /* Avatar modal styles */ #avatarModal .current-avatar-container img, #avatarModal #previewImage { transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(0,0,0,0.15); } #avatarModal .current-avatar-container:hover img, #avatarModal #newAvatarPreview:hover img { transform: scale(1.05); box-shadow: 0 8px 30px rgba(0,0,0,0.2); } /* Search highlight */ .search-highlight { background-color: #fff3cd; color: #856404; padding: 1px 3px; border-radius: 3px; font-weight: 600; } .chat-item.active .search-highlight { background-color: rgba(255,255,255,0.3); color: white; } /* Typing Indicator Animation */ .typing-indicator { opacity: 0.8; background-color: #E2E8EA; max-width: 80px; } .typing-animation { display: flex; align-items: center; gap: 4px; padding: 8px 0; } .typing-animation span { width: 8px; height: 8px; border-radius: 50%; background-color: #999; animation: typing 1.4s infinite ease-in-out; } .typing-animation span:nth-child(1) { animation-delay: -0.32s; } .typing-animation span:nth-child(2) { animation-delay: -0.16s; } .typing-animation span:nth-child(3) { animation-delay: 0; } @keyframes typing { 0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; } 40% { transform: scale(1.2); opacity: 1; } } /* Dark theme typing indicator */ body.dark-theme .typing-animation span { background-color: #ccc; } /* Message status - canonical definition below (uses FontAwesome icons from chat.js) */ .message.own .message-info { padding: 0; } .message.other .message-info { } /* Dark theme message status */ body.dark-theme .message-status.delivered { color: #ccc; } body.dark-theme .message-status.read { color: #81d4fa; } /* Notification dot */ .notification-dot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; background-color: #f44336; border: 2px solid white; border-radius: 50%; animation: pulse 1.5s infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } /* Toast notifications */ .alert.position-fixed { animation: slideInRight 0.3s ease-out; } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Dark theme toast adjustments */ body.dark-theme .alert-info { background-color: #1a4480; border-color: #1e3a8a; color: #ffffff; } body.dark-theme .alert-success { background-color: #065f46; border-color: #047857; color: #ffffff; } body.dark-theme .alert-danger { background-color: #7f1d1d; border-color: #991b1b; color: #ffffff; } body.dark-theme .alert-warning { background-color: #78350f; border-color: #92400e; color: #ffffff; } /* Enhanced scroll behavior */ .chat-messages::-webkit-scrollbar { width: 6px; } .chat-messages::-webkit-scrollbar-track { background: transparent; } .chat-messages::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.2); border-radius: 3px; } .chat-messages::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,0.3); } /* Dark theme scrollbar */ body.dark-theme .chat-messages::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.2); } body.dark-theme .chat-messages::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.3); } /* Loading indicator for pagination */ .loading-indicator { background-color: rgba(248, 249, 250, 0.95); border-radius: 10px; margin: 10px; backdrop-filter: blur(5px); animation: fadeIn 0.3s ease-in; } .loading-indicator .spinner-border-sm { width: 1rem; height: 1rem; } /* Dark theme loading indicator */ body.dark-theme .loading-indicator { background-color: rgba(45, 45, 48, 0.95); color: #ffffff; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Message search styles */ .search-results { max-height: 400px; overflow-y: auto; } .search-result-item { transition: all 0.2s ease; cursor: pointer; } .search-result-item:hover { background-color: #f8f9fa; border-color: #007bff !important; } .search-highlight-result { background-color: #fff3cd; color: #856404; padding: 1px 3px; border-radius: 3px; font-weight: 600; } /* .highlighted-message - canonical definition in search section below */ /* Dark theme search styles */ body.dark-theme .search-result-item:hover { background-color: #404040; border-color: #60a5fa !important; } body.dark-theme .search-highlight-result { background-color: #78350f; color: #fbbf24; } body.dark-theme .highlighted-message { background-color: #78350f !important; border-left-color: #fbbf24 !important; } body.dark-theme .search-results::-webkit-scrollbar { width: 6px; } body.dark-theme .search-results::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.2); border-radius: 3px; } /* Agent Dashboard Styles */ .agent-sidebar { background-color: var(--bs-light); border-color: var(--bs-border-color); } .agent-header { background-color: var(--bs-light); border-color: var(--bs-border-color); } .agent-status { background-color: var(--bs-body-bg); border-color: var(--bs-border-color); } .channel-selector { background-color: var(--bs-body-bg); } .channel-status { background-color: var(--bs-light); border-radius: 8px; padding: 10px; border: 1px solid var(--bs-border-color); } .agent-content { background-color: var(--bs-body-bg); } .requests-container { background-color: var(--bs-body-bg); } .request-card { background-color: var(--bs-light); border: 1px solid var(--bs-border-color); border-radius: 8px; transition: all 0.2s ease; } .request-card:hover { border-color: var(--bs-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .priority-high { border-left: 4px solid #dc3545; } .priority-normal { border-left: 4px solid #0d6efd; } .priority-low { border-left: 4px solid #6c757d; } /* Dark theme for agent dashboard */ body.dark-theme .agent-sidebar, body.dark .agent-sidebar { background-color: var(--bs-dark); border-color: var(--bs-border-color); } body.dark-theme .agent-header, body.dark .agent-header { background-color: var(--bs-dark); border-color: var(--bs-border-color); } body.dark-theme .agent-status, body.dark .agent-status { background-color: var(--bs-body-bg); border-color: var(--bs-border-color); } body.dark-theme .channel-selector, body.dark .channel-selector { background-color: var(--bs-body-bg); } body.dark-theme .channel-status, body.dark .channel-status { background-color: var(--bs-dark); border-color: var(--bs-border-color); } body.dark-theme .agent-content, body.dark .agent-content { background-color: var(--bs-body-bg); } body.dark-theme .requests-container, body.dark .requests-container { background-color: var(--bs-body-bg); } body.dark-theme .request-card, body.dark .request-card { background-color: var(--bs-dark); border-color: var(--bs-border-color); color: var(--bs-body-color); } body.dark-theme .request-card:hover, body.dark .request-card:hover { border-color: var(--bs-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.3); } /* Agent dashboard nav tabs dark theme */ body.dark-theme .nav-tabs, body.dark .nav-tabs { border-bottom-color: var(--bs-border-color); } body.dark-theme .nav-tabs .nav-link, body.dark .nav-tabs .nav-link { color: var(--bs-body-color); border-color: transparent; } body.dark-theme .nav-tabs .nav-link:hover, body.dark .nav-tabs .nav-link:hover { border-color: var(--bs-border-color); color: var(--bs-primary); } body.dark-theme .nav-tabs .nav-link.active, body.dark .nav-tabs .nav-link.active { color: var(--bs-primary); background-color: var(--bs-body-bg); border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg); } /* Agent dashboard badges dark theme */ body.dark-theme .badge, body.dark .badge { color: #fff; } /* Agent dashboard form controls dark theme */ body.dark-theme .form-select, body.dark .form-select { background-color: var(--bs-body-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); } body.dark-theme .form-select:focus, body.dark .form-select:focus { background-color: var(--bs-body-bg); border-color: var(--bs-primary); color: var(--bs-body-color); box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } body.dark-theme .form-check-input, body.dark .form-check-input { background-color: var(--bs-body-bg); border-color: var(--bs-border-color); } body.dark-theme .form-check-input:checked, body.dark .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); } /* Agent dashboard tab content dark theme */ body.dark-theme .tab-content, body.dark .tab-content { background-color: var(--bs-body-bg); color: var(--bs-body-color); } body.dark-theme .tab-pane, body.dark .tab-pane { background-color: var(--bs-body-bg); color: var(--bs-body-color); } /* Agent dashboard buttons dark theme */ body.dark-theme .btn-primary, body.dark .btn-primary { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } body.dark-theme .btn-success, body.dark .btn-success { background-color: var(--bs-success); border-color: var(--bs-success); color: #fff; } body.dark-theme .btn-secondary, body.dark .btn-secondary { background-color: var(--bs-secondary); border-color: var(--bs-secondary); color: #fff; } /* Priority indicators for dark theme */ body.dark-theme .priority-high, body.dark .priority-high { border-left: 4px solid #dc3545; background-color: rgba(220, 53, 69, 0.1); } body.dark-theme .priority-normal, body.dark .priority-normal { border-left: 4px solid #0d6efd; background-color: rgba(13, 110, 253, 0.1); } body.dark-theme .priority-low, body.dark .priority-low { border-left: 4px solid #6c757d; background-color: rgba(108, 117, 125, 0.1); } /* Empty state messages dark theme */ body.dark-theme .text-muted, body.dark .text-muted { color: var(--bs-secondary) !important; } /* Agent dashboard container and layout dark theme */ body.dark-theme .h-100, body.dark .h-100 { background-color: inherit; } body.dark-theme .border-end, body.dark .border-end { border-color: var(--bs-border-color) !important; } body.dark-theme .border-bottom, body.dark .border-bottom { border-color: var(--bs-border-color) !important; } /* Ensure overflow containers work with dark theme */ body.dark-theme .overflow-auto, body.dark .overflow-auto { background-color: var(--bs-body-bg); } /* Scrollbar styling for agent dashboard dark theme */ body.dark-theme .requests-container::-webkit-scrollbar, body.dark .requests-container::-webkit-scrollbar { width: 8px; } body.dark-theme .requests-container::-webkit-scrollbar-track, body.dark .requests-container::-webkit-scrollbar-track { background: var(--bs-dark); } body.dark-theme .requests-container::-webkit-scrollbar-thumb, body.dark .requests-container::-webkit-scrollbar-thumb { background: var(--bs-secondary); border-radius: 4px; } body.dark-theme .requests-container::-webkit-scrollbar-thumb:hover, body.dark .requests-container::-webkit-scrollbar-thumb:hover { background: var(--bs-light); } /* Service Center (Central de Atendimento) Styles */ .service-sidebar { background-color: var(--bs-light); border-color: var(--bs-border-color); } .service-header { background-color: var(--bs-light); border-color: var(--bs-border-color); } .active-requests { background-color: var(--bs-body-bg); border-color: var(--bs-border-color); } .channels-list { background-color: var(--bs-body-bg); } .channel-item { background-color: var(--bs-light); border: 1px solid var(--bs-border-color); transition: all 0.2s ease; } .channel-item:hover, .channel-item.hover-effect:hover { background-color: var(--bs-gray-100); border-color: var(--bs-primary); cursor: pointer; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .request-item { background-color: var(--bs-light); border: 1px solid var(--bs-border-color); transition: all 0.2s ease; } .request-item:hover { background-color: var(--bs-gray-100); border-color: var(--bs-primary); } .service-content { background-color: var(--bs-body-bg); color: var(--bs-body-color); } /* Service Center Dark Theme */ body.dark-theme .service-sidebar, body.dark .service-sidebar { background-color: var(--bs-dark); border-color: var(--bs-border-color); } body.dark-theme .service-header, body.dark .service-header { background-color: var(--bs-dark); border-color: var(--bs-border-color); } body.dark-theme .active-requests, body.dark .active-requests { background-color: var(--bs-body-bg); border-color: var(--bs-border-color); } body.dark-theme .channels-list, body.dark .channels-list { background-color: var(--bs-body-bg); } body.dark-theme .channel-item, body.dark .channel-item { background-color: var(--bs-dark); border-color: var(--bs-border-color); color: var(--bs-body-color); } body.dark-theme .channel-item:hover, body.dark .channel-item:hover, body.dark-theme .channel-item.hover-effect:hover, body.dark .channel-item.hover-effect:hover { background-color: rgba(255,255,255,0.1); border-color: var(--bs-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.3); } body.dark-theme .request-item, body.dark .request-item { background-color: var(--bs-dark); border-color: var(--bs-border-color); color: var(--bs-body-color); } body.dark-theme .request-item:hover, body.dark .request-item:hover { background-color: rgba(255,255,255,0.1); border-color: var(--bs-primary); } body.dark-theme .service-content, body.dark .service-content { background-color: var(--bs-body-bg); color: var(--bs-body-color); } /* Service Center Modal Dark Theme */ body.dark-theme .modal-content, body.dark .modal-content { background-color: var(--bs-dark); border-color: var(--bs-border-color); color: var(--bs-body-color); } body.dark-theme .modal-header, body.dark .modal-header { border-color: var(--bs-border-color); } body.dark-theme .modal-footer, body.dark .modal-footer { border-color: var(--bs-border-color); } body.dark-theme .modal-title, body.dark .modal-title { color: var(--bs-body-color); } /* Service Center Form Controls Dark Theme */ body.dark-theme .form-control, body.dark .form-control { background-color: var(--bs-body-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); } body.dark-theme .form-control:focus, body.dark .form-control:focus { background-color: var(--bs-body-bg); border-color: var(--bs-primary); color: var(--bs-body-color); box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } body.dark-theme .form-select, body.dark .form-select { background-color: var(--bs-body-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e"); } body.dark-theme .form-label, body.dark .form-label { color: var(--bs-body-color); } /* Service Center Badges Dark Theme */ body.dark-theme .badge, body.dark .badge { color: #fff; } /* Service Center Buttons Dark Theme */ body.dark-theme .btn-primary, body.dark .btn-primary { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } body.dark-theme .btn-danger, body.dark .btn-danger { background-color: var(--bs-danger); border-color: var(--bs-danger); color: #fff; } body.dark-theme .btn-warning, body.dark .btn-warning { background-color: var(--bs-warning); border-color: var(--bs-warning); color: #000; } body.dark-theme .btn-secondary, body.dark .btn-secondary { background-color: var(--bs-secondary); border-color: var(--bs-secondary); color: #fff; } /* Service Center Scrollbar Dark Theme */ body.dark-theme .channels-list::-webkit-scrollbar, body.dark .channels-list::-webkit-scrollbar { width: 8px; } body.dark-theme .channels-list::-webkit-scrollbar-track, body.dark .channels-list::-webkit-scrollbar-track { background: var(--bs-dark); } body.dark-theme .channels-list::-webkit-scrollbar-thumb, body.dark .channels-list::-webkit-scrollbar-thumb { background: var(--bs-secondary); border-radius: 4px; } body.dark-theme .channels-list::-webkit-scrollbar-thumb:hover, body.dark .channels-list::-webkit-scrollbar-thumb:hover { background: var(--bs-light); } /* Service Center Layout Improvements */ .service-content .text-center i { opacity: 0.3; transition: all 0.3s ease; } body.dark-theme .service-content .text-center i, body.dark .service-content .text-center i { opacity: 0.5; } /* Service Center Container Layout */ body.dark-theme .container-fluid, body.dark .container-fluid { background-color: var(--bs-body-bg); } /* Service Center Border Improvements */ body.dark-theme .border-end, body.dark .border-end { border-color: var(--bs-border-color) !important; } body.dark-theme .border-bottom, body.dark .border-bottom { border-color: var(--bs-border-color) !important; } /* Service Center Text Colors */ body.dark-theme .text-muted, body.dark .text-muted { color: var(--bs-secondary) !important; } /* Ensure proper heights for service center */ .service-sidebar, .service-content { height: 100vh; min-height: 100vh; } /* Service center responsive improvements */ @media (max-width: 768px) { .service-sidebar { height: auto; min-height: 300px; } .service-content { height: auto; min-height: 400px; } } /* Service Center Button in Chat Sidebar */ .service-center-section { background-color: var(--bs-body-bg); border-color: var(--bs-border-color); } .service-center-btn { border-color: var(--bs-primary); color: var(--bs-primary); font-weight: 500; padding: 12px 16px; border-radius: 8px; transition: all 0.2s ease; text-decoration: none; } .service-center-btn:hover { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(13, 110, 253, 0.25); } .service-center-btn i { font-size: 1.1rem; } /* Dark theme for service center button */ body.dark-theme .service-center-section, body.dark .service-center-section { background-color: var(--bs-body-bg); border-color: var(--bs-border-color); } body.dark-theme .service-center-btn, body.dark .service-center-btn { border-color: var(--bs-primary); color: var(--bs-primary); } body.dark-theme .service-center-btn:hover, body.dark .service-center-btn:hover { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff; box-shadow: 0 2px 8px rgba(13, 110, 253, 0.4); } /* Voice Recording Styles */ .voice-recording-container { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: 2px solid #dee2e6; animation: recording-pulse 2s infinite; } .recording-indicator { position: relative; } .recording-dot { width: 12px; height: 12px; background-color: #dc3545; border-radius: 50%; animation: recording-blink 1s infinite; } @keyframes recording-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.3; } } @keyframes recording-pulse { 0% { border-color: #dee2e6; } 50% { border-color: #dc3545; } 100% { border-color: #dee2e6; } } .waveform-container { background-color: #f8f9fa; border-radius: 5px; padding: 5px; } /* Voice Preview Styles */ .voice-preview-container { background-color: #e3f2fd; border: 1px solid #90caf9; } /* Voice Message Styles */ .voice-message-container { max-width: 280px; } .voice-waveform { height: 20px; display: flex; align-items: center; } .waveform-bars { display: flex; align-items: center; gap: 2px; height: 100%; width: 100%; } .waveform-bars .bar { background-color: #007bff; width: 3px; border-radius: 2px; animation: waveform-pulse 1.5s infinite ease-in-out; } .waveform-bars .bar:nth-child(1) { height: 8px; animation-delay: -0.9s; } .waveform-bars .bar:nth-child(2) { height: 12px; animation-delay: -0.8s; } .waveform-bars .bar:nth-child(3) { height: 6px; animation-delay: -0.7s; } .waveform-bars .bar:nth-child(4) { height: 14px; animation-delay: -0.6s; } .waveform-bars .bar:nth-child(5) { height: 10px; animation-delay: -0.5s; } .waveform-bars .bar:nth-child(6) { height: 8px; animation-delay: -0.4s; } .waveform-bars .bar:nth-child(7) { height: 12px; animation-delay: -0.3s; } .waveform-bars .bar:nth-child(8) { height: 6px; animation-delay: -0.2s; } @keyframes waveform-pulse { 0%, 40%, 100% { transform: scaleY(0.4); opacity: 0.6; } 20% { transform: scaleY(1); opacity: 1; } } .voice-progress-container { margin: 0 5px; } .voice-duration { font-weight: 500; min-width: 35px; text-align: right; } /* Voice button states */ #voiceButton:hover { background-color: #e3f2fd; border-color: #90caf9; } #voiceButton:disabled { background-color: #ffebee; border-color: #ffcdd2; } /* Dark theme voice styles */ body.dark-theme .voice-recording-container, body.dark .voice-recording-container { background: linear-gradient(135deg, #2d2d30 0%, #404040 100%); border-color: #666; color: #ffffff; } body.dark-theme .recording-dot, body.dark .recording-dot { background-color: #ff6b6b; } body.dark-theme .voice-preview-container, body.dark .voice-preview-container { background-color: #1a4480; border-color: #1e3a8a; color: #ffffff; } body.dark-theme .voice-message-container .bg-light, body.dark .voice-message-container .bg-light { background-color: #404040 !important; } body.dark-theme .waveform-bars .bar, body.dark .waveform-bars .bar { background-color: #60a5fa; } body.dark-theme .waveform-container { background-color: #2d2d30; } body.dark-theme #voiceButton:hover { background-color: #1a4480; border-color: #1e3a8a; } body.dark-theme #voiceButton:disabled { background-color: #7f1d1d; border-color: #991b1b; } /* Voice message in chat bubbles */ .message.own .voice-message-container .bg-light { background-color: rgba(220, 248, 198, 0.8) !important; } .message.other .voice-message-container .bg-light { background-color: rgba(255, 255, 255, 0.9) !important; } /* Mobile optimizations */ @media (max-width: 768px) { .voice-message-container { max-width: 250px; } .voice-recording-container { padding: 15px !important; } .waveform-bars .bar { width: 2px; } #audioWaveform { width: 100%; max-width: 300px; } } /* Responsive media */ @media (max-width: 768px) { .message-bubble img, .message-bubble video { max-width: 200px; max-height: 150px; } .attach-media, .attach-file, .yt-embed { max-width: 100% !important; } /* Better mobile keyboard shortcuts info */ .keyboard-shortcuts { font-size: 0.8rem; } } /* Animations */ @keyframes slideInFromTop { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes fadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } } /* Additional Kontexto-like styles */ .unread-count { min-width: 20px; height: 20px; padding: 0 5px; font-size: 12px; font-weight: 500; background-color: #25D366 !important; color: white; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 50%; right: 16px; transform: translateY(-50%); } /* Kontexto-style search icon in input */ .chat-input .input-group::before { content: '\f002'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #54656F; font-size: 16px; z-index: 10; display: none; } /* Show search icon when input is empty */ .chat-input .form-control:placeholder-shown ~ .input-group::before { display: block; } /* Status ticks styling like Kontexto */ .message-status { display: inline-flex; font-size: 14px; margin-left: 4px; vertical-align: text-bottom; } .message-status::after { font-family: sans-serif; font-weight: normal; } /* Chat input flexbox layout */ .chat-input-group { display: flex; align-items: center; gap: 0; background-color: #FFFFFF; border-radius: 8px; border: 1px solid var(--whatsapp-border); } .chat-input-group .chat-input-btn { flex-shrink: 0; padding: 6px 10px; color: #54656F; border: none; background: none; } .chat-input-group .chat-input-btn:hover { color: var(--whatsapp-teal); } .chat-input-group #messageInput { flex: 1; border: none; background: transparent; box-shadow: none; } .chat-input-group #messageInput:focus { box-shadow: none; border: none; } .chat-input-group #sendButton { flex-shrink: 0; color: var(--whatsapp-teal); } body.dark-theme .chat-input-group, body.dark .chat-input-group { background-color: var(--whatsapp-dark-input); border-color: var(--whatsapp-dark-border); } body.dark-theme .chat-input-group .chat-input-btn, body.dark .chat-input-group .chat-input-btn { color: #8696A0; } body.dark-theme .chat-input-group .chat-input-btn:hover, body.dark .chat-input-group .chat-input-btn:hover { color: var(--whatsapp-green); } /* Voice button style */ #voiceButton.recording { color: #E91E63; animation: pulse 1.5s infinite; } /* Scroll-to-bottom button */ .scroll-to-bottom { position: absolute; bottom: 80px; right: 20px; width: 42px; height: 42px; border-radius: 50%; background-color: #FFFFFF; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.3); color: #54656F; font-size: 18px; cursor: pointer; opacity: 0; transform: scale(0.5); transition: opacity 0.2s, transform 0.2s; pointer-events: none; z-index: 10; display: flex; align-items: center; justify-content: center; } .scroll-to-bottom.visible { opacity: 1; transform: scale(1); pointer-events: auto; } .scroll-to-bottom:hover { background-color: #F0F2F5; } body.dark-theme .scroll-to-bottom, body.dark .scroll-to-bottom { background-color: var(--whatsapp-dark-header); color: #8696A0; } body.dark-theme .scroll-to-bottom:hover, body.dark .scroll-to-bottom:hover { background-color: var(--whatsapp-dark-hover); } /* Better message bubble spacing */ .message { margin-bottom: 2px; display: flex; } .message.own + .message.other, .message.other + .message.own { margin-top: 12px; } /* Consecutive messages from same sender */ .message.own + .message.own .message-bubble, .message.other + .message.other .message-bubble { margin-top: 1px; } /* Date separator - WhatsApp style */ .date-separator { display: flex; justify-content: center; margin: 12px 0; user-select: none; } .date-separator-label { background-color: #E1F2FB; color: #54656F; font-size: 12.5px; padding: 5px 12px; border-radius: 7.5px; box-shadow: 0 1px 0.5px rgba(0,0,0,0.13); } body.dark-theme .date-separator-label, body.dark .date-separator-label { background-color: var(--whatsapp-dark-header); color: var(--whatsapp-dark-text-secondary); } /* Hover sutil em bolhas */ .message-bubble:hover { filter: brightness(0.97); } body.dark-theme .message-bubble:hover, body.dark .message-bubble:hover { filter: brightness(1.05); } /* First message in a group gets the tail */ .message.own:not(.consecutive) .message-bubble { border-top-right-radius: 0; } .message.other:not(.consecutive) .message-bubble { border-top-left-radius: 0; } /* Kontexto Web footer text */ #noChatSelected::after { content: 'Kontexto Web - Produzido pelo Klab'; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #8696A0; font-size: 14px; opacity: 0.5; } /* Fix chat display issues */ #chatContainer.d-none { display: none !important; } #chatContainer:not(.d-none) { display: flex !important; flex-direction: column; height: 100%; } /* Ensure proper Bootstrap grid */ .container-fluid > .row { display: flex; flex-wrap: nowrap; } .sidebar, .chat-area { display: flex; flex-direction: column; } /* Smooth transitions */ body, .sidebar, .chat-area, .btn, .form-control { transition: background-color 0.3s ease, color 0.3s ease; } /* Remove focus outlines for cleaner look */ .form-control:focus, .btn:focus { outline: none !important; } /* Kontexto-style tooltips */ .tooltip-inner { background-color: #667781; font-size: 12px; padding: 4px 8px; border-radius: 4px; } /* Typing indicator - merged into canonical definition above */ /* Message time format like Kontexto */ .message-time { font-size: 11px; color: rgba(0,0,0,0.45); white-space: nowrap; } /* Sender name in group messages */ .sender-name { font-weight: 500; color: #06CF9C; font-size: 12px; } body.dark-theme .sender-name { color: #25D366; } /* Group member count style */ .member-count { font-size: 13px; color: #8696A0; } /* Icon consistency fixes */ .fa-user-circle { font-size: 49px !important; width: 49px !important; height: 49px !important; line-height: 49px !important; display: inline-block; } .user-profile-section .avatar { width: 40px; height: 40px; } .user-profile-section .user-avatar, .user-profile-section .user-avatar-placeholder { width: 40px !important; height: 40px !important; } .user-profile-section .fa-user { font-size: 20px !important; } /* Ensure consistent chat list item height */ .chat-item > div { width: 100%; } .chat-item .d-flex { align-items: center; width: 100%; } .chat-item .avatar { margin-right: 15px !important; } .chat-item .flex-grow-1 { min-width: 0; /* Allow text truncation */ } /* Dark Theme Text Fixes - Specific selectors */ body.dark-theme .text-muted { color: #8696A0 !important; } body.dark-theme .chat-name { color: #E9EDEF; } body.dark-theme .chat-header #chatName, body.dark-theme .chat-header #chatStatus, body.dark-theme .chat-header .btn { color: #E9EDEF; } body.dark-theme .chat-item { color: #E9EDEF; } body.dark-theme .chat-item .last-message-preview { color: #8696A0; } body.dark-theme .chat-item.active .last-message-preview { color: #8696A0; } body.dark-theme .chat-time { color: #8696A0; } body.dark-theme .btn { color: #E9EDEF; } body.dark-theme .dropdown-item { color: #E9EDEF; } body.dark-theme .dropdown-item:hover { color: #E9EDEF; } body.dark-theme .modal-content, body.dark-theme .modal-content .modal-header, body.dark-theme .modal-content .modal-body, body.dark-theme .modal-content .modal-footer, body.dark-theme .modal-content .modal-title, body.dark-theme .modal-content p, body.dark-theme .modal-content span, body.dark-theme .modal-content label { color: #E9EDEF; } body.dark-theme .form-label, body.dark-theme label { color: #E9EDEF; } body.dark-theme #noChatSelected h2, body.dark-theme #noChatSelected p { color: #8696A0; } body.dark-theme .message-bubble { color: #E9EDEF; } body.dark-theme .message-info { color: rgba(255, 255, 255, 0.6); } body.dark-theme input::placeholder, body.dark-theme textarea::placeholder { color: #8696A0; opacity: 1; } body.dark-theme .fa-user-circle, body.dark-theme .fa-users { color: #8696A0; } body.dark-theme .btn-outline-secondary { color: #8696A0; } body.dark-theme .btn-outline-secondary:hover { color: #E9EDEF; } /* Empty state / Welcome screen */ .empty-state-icon { font-size: 80px; color: var(--whatsapp-teal); opacity: 0.15; margin-bottom: 20px; } .empty-state-title { font-weight: 300; color: #41525D; font-size: 28px; margin-bottom: 8px; } .empty-state-subtitle { color: #667781; font-size: 14px; line-height: 20px; max-width: 400px; margin: 0 auto 16px; } .empty-state-hint { color: #8696A0; font-size: 13px; line-height: 18px; } body.dark-theme .empty-state-title, body.dark .empty-state-title { color: #8696A0; } body.dark-theme .empty-state-subtitle, body.dark .empty-state-subtitle { color: #8696A0; } body.dark-theme .empty-state-hint, body.dark .empty-state-hint { color: var(--whatsapp-dark-text-secondary); } /* Ensure chat structure works properly */ .container-fluid { padding: 0 !important; height: 100vh; overflow: hidden; } .row.g-0 { margin: 0 !important; height: 100%; } /* Fix Bootstrap layout */ .row.h-100 { height: 100vh !important; } .col-md-4, .col-lg-3, .col-md-8, .col-lg-9 { height: 100%; } /* Dropdown header styling */ .dropdown-header { font-size: 0.75rem; font-weight: 600; color: #6c757d !important; padding: 0.5rem 1rem 0.25rem; letter-spacing: 0.05em; } /* Dark theme dropdown header */ body.dark-theme .dropdown-header { color: #8696A0 !important; } /* Admin menu items with special icons */ .dropdown-item i.fa-users-cog { font-size: 0.95rem; } .dropdown-item i.fa-headset { font-size: 0.95rem; } .dropdown-item i.fa-history { font-size: 0.95rem; } .dropdown-item i.fa-user-headset { font-size: 0.95rem; } /* Search Modal Styles */ .search-results { max-height: 400px; overflow-y: auto; } .search-result-item { cursor: pointer; transition: all 0.2s ease; } .search-result-item:hover { background-color: rgba(0, 123, 255, 0.05); border-color: #007bff !important; } .search-highlight-result { background-color: #ffeb3b; color: #000; padding: 0 2px; border-radius: 2px; } /* Highlighted message when jumping from search */ .highlighted-message { animation: highlightPulse 3s ease; position: relative; } @keyframes highlightPulse { 0% { background-color: rgba(255, 193, 7, 0.4); box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4); } 50% { background-color: rgba(255, 193, 7, 0.2); box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); } 100% { background-color: transparent; box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); } } /* Dark theme search styles */ body.dark-theme .search-result-item { background-color: var(--whatsapp-dark-msg-bg); border-color: var(--whatsapp-dark-border) !important; } body.dark-theme .search-result-item:hover { background-color: rgba(0, 123, 255, 0.1); border-color: #0056b3 !important; } body.dark-theme .search-highlight-result { background-color: #ffc107; color: #000; } body.dark-theme .highlighted-message { animation: highlightPulseDark 3s ease; } @keyframes highlightPulseDark { 0% { background-color: rgba(255, 193, 7, 0.6); box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.6); } 50% { background-color: rgba(255, 193, 7, 0.3); box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); } 100% { background-color: transparent; box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); } } /* Connection Status Banner */ .connection-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; padding: 8px 16px; text-align: center; font-size: 13px; font-weight: 500; animation: slideDown 0.3s ease-out; display: flex; align-items: center; justify-content: center; gap: 8px; } .connection-banner.d-none { display: none !important; } .connection-banner.reconnecting { background-color: #FFC107; color: #111B21; } .connection-banner.failed { background-color: #DC3545; color: #FFFFFF; } .connection-banner i { font-size: 14px; } .connection-banner .spinner-border { width: 14px; height: 14px; border-width: 2px; } @keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Dark theme support for connection banner */ body.dark-theme .connection-banner.reconnecting, body.dark .connection-banner.reconnecting { background-color: #B8860B; color: #E9EDEF; } body.dark-theme .connection-banner.failed, body.dark .connection-banner.failed { background-color: #8B0000; color: #E9EDEF; } /* ===== SERVICE CENTER PANEL (sidebar) ===== */ #serviceCenterPanel { display: flex; flex-direction: column; } .svc-center-header { background: var(--whatsapp-sidebar-bg, #FFFFFF); padding: 10px 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--whatsapp-border, #D1D7DB); flex-shrink: 0; z-index: 2; } .svc-center-content { flex: 1; overflow-y: auto; background: var(--whatsapp-sidebar-bg, #FFFFFF); padding-bottom: 16px; } .svc-center-section-title { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--whatsapp-text-gray, #667781); padding: 12px 16px 6px; } .svc-center-channel { display: flex; align-items: center; padding: 10px 16px; gap: 12px; cursor: default; transition: background 0.15s; } .svc-center-channel:hover { background: rgba(0,0,0,0.04); } .svc-center-channel.is-favorite { border-left: 3px solid var(--whatsapp-green, #25D366); } .svc-center-fav-btn { background: none; border: none; cursor: pointer; color: #ccc; font-size: 1rem; padding: 4px; transition: color 0.2s, transform 0.2s; } .svc-center-fav-btn:hover { color: #f5a623; transform: scale(1.15); } .svc-center-fav-btn.active { color: #f5a623; } .svc-center-fav-btn.active i { font-weight: 900; } .svc-center-request { background: var(--whatsapp-hover, #F5F6F6); border: 1px solid var(--whatsapp-border, #D1D7DB); border-radius: 8px; padding: 10px 12px; margin: 0 12px 8px; } .svc-center-request:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); } /* Dark theme for service center panel */ body.dark-theme .svc-center-header, body.dark .svc-center-header { background: var(--whatsapp-dark-sidebar, #111B21); border-bottom-color: var(--whatsapp-dark-border, #2A3942); } body.dark-theme .svc-center-header h6, body.dark .svc-center-header h6 { color: var(--whatsapp-dark-text, #E9EDEF); } body.dark-theme .svc-center-header .fa-arrow-left, body.dark .svc-center-header .fa-arrow-left { color: var(--whatsapp-dark-text-secondary, #8696A0) !important; } body.dark-theme .svc-center-content, body.dark .svc-center-content { background: var(--whatsapp-dark-sidebar, #111B21); } body.dark-theme .svc-center-section-title, body.dark .svc-center-section-title { color: var(--whatsapp-dark-text-secondary, #8696A0); } body.dark-theme .svc-center-channel:hover, body.dark .svc-center-channel:hover { background: rgba(255,255,255,0.05); } body.dark-theme .svc-center-request, body.dark .svc-center-request { background: var(--whatsapp-dark-msg-bg, #202C33); border-color: var(--whatsapp-dark-border, #2A3942); } body.dark-theme .svc-center-fav-btn, body.dark .svc-center-fav-btn { color: #555; } body.dark-theme .svc-center-fav-btn:hover, body.dark .svc-center-fav-btn:hover, body.dark-theme .svc-center-fav-btn.active, body.dark .svc-center-fav-btn.active { color: #f5a623; }