@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");*{font-family:Inter,sans-serif}.user-management .templates-table table{border:2px solid #28a745!important;border-collapse:collapse!important;display:table!important;width:100%!important}.user-management .templates-table{margin-top:2rem!important}.user-management .templates-table table td,.user-management .templates-table table th{border:1px solid #ddd!important;padding:12px!important;text-align:left!important}.user-management .templates-table table thead{background-color:#f8f9fa!important}.user-management .templates-table table tbody tr:hover{background-color:#f5f5f5!important}.user-management .templates-table table tbody tr.inactive{opacity:.6!important}.templates-dropdown.whatsapp-style{background:#fff;border:1px solid #ddd;border-radius:8px;bottom:100%;box-shadow:0 -4px 12px rgba(0,0,0,.15);left:0;margin-bottom:8px;max-height:300px;overflow-y:auto;position:absolute;right:0;z-index:1000}.templates-dropdown.whatsapp-style .templates-header{background:#f8f9fa;border-bottom:1px solid #e9ecef;color:#495057;font-size:.9rem;font-weight:600;padding:12px 16px}.templates-dropdown.whatsapp-style .templates-list{max-height:200px;overflow-y:auto}.templates-dropdown.whatsapp-style .template-item{border-bottom:1px solid #f1f3f4;cursor:pointer;padding:12px 16px;transition:background-color .2s ease}.templates-dropdown.whatsapp-style .template-item.highlighted,.templates-dropdown.whatsapp-style .template-item:hover{background-color:#e3f2fd}.templates-dropdown.whatsapp-style .template-item:last-child{border-bottom:none}.templates-dropdown.whatsapp-style .template-shortcut{color:#1976d2;font-size:.9rem;font-weight:600;margin-bottom:4px}.templates-dropdown.whatsapp-style .template-description{color:#666;font-size:.85rem;margin-bottom:4px}.templates-dropdown.whatsapp-style .template-preview{color:#888;font-size:.8rem;font-style:italic;line-height:1.3}.templates-dropdown.whatsapp-style .templates-footer{background:#f8f9fa;border-top:1px solid #e9ecef;padding:8px 16px;text-align:center}.templates-dropdown.whatsapp-style .templates-footer small{color:#6c757d;font-size:.75rem}.template-form{background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);margin-bottom:2rem;max-width:800px;padding:2rem}.template-form h3{color:#333;margin-bottom:2rem;margin-top:0}.template-form .form-row{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-bottom:1rem}.template-form .form-group{margin-bottom:1rem}.template-form label{color:#333;display:block;font-weight:600;margin-bottom:.5rem}.template-form input{border:2px solid #e1e5e9;border-radius:8px;font-size:1rem;padding:12px;transition:border-color .2s;width:100%}.template-form input:focus{border-color:#28a745;outline:none}.template-form textarea{border:2px solid #e1e5e9;border-radius:8px;font-family:inherit;font-size:1rem;min-height:100px;padding:12px;resize:vertical;transition:border-color .2s;width:100%}.template-form textarea:focus{border-color:#28a745;outline:none}.template-management .templates-table{margin-top:2rem}.template-management .templates-table h3{color:#333;font-size:1.2rem;margin-bottom:1rem}.template-management .templates-table table{background:#fff;border-collapse:collapse;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);margin-bottom:2rem;overflow:hidden;table-layout:fixed;width:100%}.template-management .templates-table table thead{background:#f8f9fa}.template-management .templates-table table td,.template-management .templates-table table th{border-bottom:1px solid #dee2e6;padding:1rem;text-align:left;vertical-align:top}.template-management .templates-table table th{border-bottom:2px solid #dee2e6;color:#495057;font-weight:600}.template-management .templates-table table td:first-child,.template-management .templates-table table th:first-child{width:100px}.template-management .templates-table table td:nth-child(2),.template-management .templates-table table th:nth-child(2){width:180px}.template-management .templates-table table td:nth-child(3),.template-management .templates-table table th:nth-child(3){width:auto}.template-management .templates-table table td:nth-child(4),.template-management .templates-table table th:nth-child(4){width:80px}.template-management .templates-table table td:nth-child(5),.template-management .templates-table table th:nth-child(5){width:150px}.template-management .templates-table table td:nth-child(6),.template-management .templates-table table th:nth-child(6){width:120px}.template-management .templates-table table tbody tr:hover{background:#f8f9fa}.template-management .templates-table table tbody tr.inactive{opacity:.6}.template-management .template-shortcut{background:#e9ecef;border-radius:4px;color:#495057;font-family:Courier New,monospace;font-size:.85rem;font-weight:600;padding:4px 8px}.template-management .template-message-preview{word-wrap:break-word;color:#666;font-size:.9rem;line-height:1.4;max-width:300px}.template-management .templates-table .actions{align-items:center;display:flex;gap:.5rem}.template-management .templates-table .delete-button,.template-management .templates-table .edit-button,.template-management .templates-table .toggle-button{background:none;border:none;border-radius:4px;cursor:pointer;font-size:1.1rem;padding:.25rem;transition:background-color .2s}.template-management .templates-table .edit-button:hover{background:rgba(0,123,255,.1)}.template-management .templates-table .delete-button:hover{background:rgba(220,53,69,.1)}.template-management .templates-table .toggle-button:hover{background:hsla(208,7%,46%,.1)}.template-management .template-help{background:#e7f3ff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);margin-top:2rem;padding:2rem}.template-management .template-help h4{color:#06c;margin-bottom:1rem;margin-top:0}.template-management .template-help code{background:#f8f9fa;border-radius:4px;color:#e83e8c;font-family:Courier New,monospace;font-weight:600;padding:4px 8px}.templates-dropdown{background:#fff;border:1px solid #ddd;border-radius:8px 8px 0 0;bottom:100%;box-shadow:0 -4px 12px rgba(0,0,0,.15);left:0;max-height:300px;overflow-y:auto;position:absolute;right:0;z-index:1000}.templates-header{align-items:center;background:#f8f9fa;border-bottom:1px solid #dee2e6;color:#495057;display:flex;font-weight:500;justify-content:space-between;padding:.75rem 1rem}.close-templates{align-items:center;background:none;border:none;color:#666;cursor:pointer;display:flex;font-size:1.2rem;height:24px;justify-content:center;padding:0;width:24px}.close-templates:hover{color:#dc3545}.templates-dropdown .templates-list{max-height:200px;overflow-y:auto}.templates-dropdown .template-item{border-bottom:1px solid #f0f0f0;cursor:pointer;padding:.75rem 1rem;transition:background-color .15s}.templates-dropdown .template-item.highlighted,.templates-dropdown .template-item:hover{background:#e9ecef}.templates-dropdown .template-item:last-child{border-bottom:none}.templates-dropdown .template-item .template-shortcut{background:#28a745;border-radius:3px;color:#fff;display:inline-block;font-family:monospace;font-size:.8rem;margin-bottom:4px;padding:2px 6px}.templates-dropdown .template-item .template-description{color:#333;font-size:.9rem;font-weight:500;margin-bottom:4px}.templates-dropdown .template-item .template-preview{color:#666;font-size:.8rem;line-height:1.3}.templates-dropdown .templates-footer{background:#f8f9fa;border-top:1px solid #dee2e6;padding:.5rem 1rem;text-align:center}.templates-dropdown .templates-footer small{color:#6c757d;font-size:.75rem}.templates-dropdown .templates-help{background:#f8f9fa;border-radius:4px;margin-top:.5rem;padding:.5rem;text-align:center}.templates-dropdown .templates-help small{color:#6c757d;font-size:.75rem}.reply-input-container{position:relative}*{box-sizing:border-box}body{background-color:#f5f7fa;color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;margin:0;padding:0}.login-container{background:linear-gradient(135deg,#28a745,#218838)}.login-box{background:#fff;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.15);max-width:400px;padding:2rem;text-align:center;width:100%}.login-header h2{color:#333;font-size:1.8rem;margin:.5rem 0 1rem}.login-header p{color:#666;margin-bottom:2rem}.login-form{text-align:left}.form-group{margin-bottom:1rem}.form-group label{color:#333;display:block;font-weight:500;margin-bottom:.5rem}.form-group input{border:2px solid #e1e5e9;border-radius:8px;font-size:1rem;padding:12px;transition:border-color .2s;width:100%}.form-group input:focus{border-color:#28a745;outline:none}.error-message{background:#fee;border:1px solid #fcc;border-radius:8px;color:#c33;margin:1rem 0;padding:12px}.login-button{background:linear-gradient(135deg,#28a745,#218838);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;margin-top:1rem;padding:14px;transition:transform .2s;width:100%}.login-button:hover{transform:translateY(-2px)}.login-button:disabled{cursor:not-allowed;opacity:.6;transform:none}.login-info{border-top:1px solid #eee;color:#666;font-size:.9rem;margin-top:2rem;padding-top:1rem}.user-management{margin:0 auto;max-width:1200px;padding:2rem}.management-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:2rem}.management-header h2{color:#333;margin:0}.back-button{border-radius:6px;color:#fff;font-size:1rem;padding:10px 20px}.management-tabs{border-bottom:2px solid #eee;display:flex;margin-bottom:2rem}.tab-button{background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:1rem;padding:1rem 2rem;transition:all .2s}.tab-button.active{border-bottom-color:#28a745;color:#28a745;font-weight:600}.tab-button:hover{background:#f8f9fa}.section-actions{margin-bottom:2rem}.add-button{background:#28a745;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:1rem;font-weight:500;padding:12px 24px}.add-button:hover{background:#218838}.add-button.secondary{background:#6c757d;margin-left:1rem}.add-button.secondary:hover{background:#5a6268}.groups-table table,.users-table table{background:#fff;border-collapse:collapse;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);overflow:hidden;width:100%}.groups-table th,.users-table th{background:#f8f9fa;border-bottom:2px solid #dee2e6;color:#555;font-weight:600;padding:1rem;text-align:left}.groups-table td,.users-table td{border-bottom:1px solid #dee2e6;padding:1rem}.groups-table tr:hover,.users-table tr:hover{background:#f8f9fa}.users-table tr.inactive{background:#f9f9f9;opacity:.6}.status{border-radius:20px;font-size:.85rem;padding:4px 12px}.status.active{background:#d4edda;color:#155724}.status.inactive{background:#f8d7da;color:#721c24}.actions{display:flex;gap:8px}.delete-button,.edit-button{background:none;border:none;border-radius:4px;cursor:pointer;font-size:1.2rem;padding:8px}.edit-button:hover{background:#e3f2fd}.delete-button:hover{background:#ffebee}.group-form,.user-form{background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);max-width:800px;padding:2rem}.group-form h3,.user-form h3{color:#333;margin-bottom:2rem;margin-top:0}.form-row{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-bottom:1rem}.form-group textarea{border:2px solid #e1e5e9;border-radius:8px;font-family:inherit;font-size:1rem;padding:12px;resize:vertical;transition:border-color .2s;width:100%}.form-group textarea:focus{border-color:#28a745;outline:none}.checkbox-label{align-items:center;cursor:pointer;display:flex;gap:8px;margin-bottom:8px}.checkbox-label input[type=checkbox]{margin:0;width:auto}.groups-checkboxes,.permissions-checkboxes{background:#f8f9fa;border-radius:6px;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));padding:1rem}.form-actions{border-top:1px solid #eee;display:flex;gap:1rem;justify-content:flex-end;margin-top:2rem;padding-top:2rem}.form-actions button{border:none;border-radius:6px;cursor:pointer;font-size:1rem;padding:12px 24px}.form-actions button[type=submit]{background:#28a745;color:#fff}.form-actions button[type=submit]:hover{background:#0056b3}.form-actions button[type=button]{background:#6c757d;color:#fff}.form-actions button[type=button]:hover{background:#5a6268}.form-actions button:disabled{cursor:not-allowed;opacity:.6}.admin-button{background:#17a2b8;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.9rem;margin-right:1rem;padding:8px 16px}.admin-button:hover{background:#138496}.dashboard{min-height:100vh}.dashboard-header{align-items:center;background:linear-gradient(135deg,#28a745,#218838);box-shadow:0 2px 10px rgba(0,0,0,.1);color:#fff;display:flex;justify-content:space-between;padding:1rem 2rem}.dashboard-header h1{font-size:1.8rem;margin:0}.header-actions{align-items:center;display:flex;font-size:.9rem;gap:.75rem}.unread-count{animation:pulse 2s infinite;background:rgba(53,220,81,.9);border:2px solid hsla(0,0%,100%,.3);border-radius:12px;color:#fff;font-size:.75rem;font-weight:600;padding:.3rem .6rem}.header-actions button{background:hsla(0,0%,100%,.2);border:1px solid hsla(0,0%,100%,.3);border-radius:4px;color:#fff;cursor:pointer;font-size:.85rem;padding:.4rem .8rem;transition:all .2s}.header-actions button:hover{background:hsla(0,0%,100%,.3)}.header-button{align-items:center!important;background:hsla(0,0%,100%,.2)!important;border:1px solid hsla(0,0%,100%,.3)!important;border-radius:6px!important;color:#fff!important;cursor:pointer!important;display:flex!important;font-size:14px!important;font-weight:500!important;gap:6px!important;padding:8px 16px!important;transition:all .2s ease!important;white-space:nowrap!important}.header-button:hover{background:hsla(0,0%,100%,.3)!important;box-shadow:0 2px 8px rgba(0,0,0,.15)!important;transform:translateY(-1px)!important}.header-button:active{transform:translateY(0)!important}.header-actions{flex-wrap:wrap!important;font-size:.9rem!important}.header-actions,.header-user-info{align-items:center!important;display:flex!important;gap:12px!important}.header-user-info{border-left:1px solid hsla(0,0%,100%,.3)!important;margin-left:16px!important;padding-left:16px!important}.header-user-info span{color:#fff!important;font-weight:500!important;white-space:nowrap!important}.logout-button{background:rgba(220,53,69,.8)!important;border-color:rgba(220,53,69,.9)!important}.logout-button:hover{background:#dc3545!important}.dashboard-content{margin:0 auto;max-width:1200px;padding:2rem}.stats{flex-wrap:wrap;margin-bottom:2rem}.stat-card{background:#fff;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);flex:1;min-width:150px;padding:1.5rem;text-align:center}.stat-card h3{color:#28a745;font-size:2rem;margin:0}.stat-card.closed h3{color:#6c757d}.stat-card p{color:#666;margin:.5rem 0 0}.toggle-closed-btn{background:#28a745;border:none;border-radius:6px;box-shadow:0 2px 4px rgba(0,123,255,.2);color:#fff;cursor:pointer;font-size:.9rem;padding:.5rem 1rem;transition:all .2s ease}.toggle-closed-btn:hover{background:#0056b3;box-shadow:0 4px 8px rgba(0,123,255,.3);transform:translateY(-1px)}.toggle-closed-btn:active{transform:translateY(0)}.tickets-section-header{margin-bottom:1.5rem}.tickets-section h2{color:#333;margin-bottom:1rem}.tickets-list{display:grid;gap:1rem}.ticket-item{background:#fff;border-left:4px solid #28a745;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.05);color:inherit;padding:1rem;text-decoration:none;transition:all .2s}.ticket-item.unread{background:#fff8f8;border-left-color:#1ca733;box-shadow:0 2px 8px rgba(53,220,156,.15)}.ticket-item:hover{box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-2px)}.ticket-item.unread:hover{box-shadow:0 4px 12px rgba(53,220,117,.2)}.ticket-header{align-items:center}.unread-indicator{animation:pulse 2s infinite;background:#1ca733;color:#fff;font-size:.75rem;font-weight:600;padding:.25rem .5rem}.contact-name{color:#333;font-size:1.1rem}.ticket-time{font-size:.9rem}.ticket-preview{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;color:#555;display:-webkit-box;margin-bottom:.5rem}.ticket-meta{align-items:flex-start;font-size:.9rem;justify-content:space-between;margin-top:.5rem}.contact-info{display:flex;flex-direction:column;gap:.25rem}.contact-id,.router-id{color:#666;font-size:.8rem}.contact-id strong,.router-id strong{color:#333}.ticket-status-info{align-items:flex-end;display:flex;flex-direction:column;gap:.25rem}.time-window{border-radius:8px;font-size:.75rem;padding:.2rem .4rem}.time-window.active{background:#e7f5e7;color:#2d5a2d}.status{font-size:.8rem;font-weight:500;padding:.25rem .5rem}.status.open{background:#e7f5e7;color:#2d5a2d}.status.closed{background:#f5e7e7;color:#5a2d2d}.conversation-view{display:flex;flex-direction:column;height:100vh}.conversation-header{align-items:center;background:#fff;border-bottom:1px solid #eee;display:flex;flex-shrink:0;gap:1rem;margin-right:320px;padding:1rem 2rem}.back-button{background:#28a745;border:none;border-radius:4px;cursor:pointer;padding:.5rem 1rem;transition:background .2s}.back-button:hover{background:#218838}.conversation-info{flex:1}.conversation-info h1{margin:0 0 .5rem}.contact-details{gap:.5rem;margin-bottom:.5rem}.contact-ids{display:flex;flex-direction:column;gap:.25rem}.contact-identity,.router-contact-id{color:#666;font-size:.85rem}.contact-identity strong,.router-contact-id strong{color:#333}.time-remaining{align-items:center;display:flex;font-size:.85rem;gap:.5rem}.time-remaining.active .time-value{color:#2d5a2d;font-weight:500}.time-remaining.expired .time-value{color:#d32f2f;font-weight:500}.time-label{color:#666}.conversation-info h1{font-size:1.5rem;margin:0}.contact-identity{color:#666;font-family:monospace;font-size:.9rem}.conversation-actions button{border:none;border-radius:4px;cursor:pointer;font-weight:500;margin-left:.5rem;padding:.5rem 1rem}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.back-ticket-button{background:#28a745;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:1rem;font-weight:500;padding:.5rem 1rem;transition:background-color .2s}.back-ticket-button:hover{background:#218838}.close-button{background:#ff6b6b;color:#fff}.reopen-button{background:#51cf66;color:#fff}.messages-container{background:#f8f9fa;flex:1;overflow-y:auto;padding:1rem}.messages-list{gap:1rem;margin:0 auto;max-width:800px}.message,.messages-list{display:flex;flex-direction:column}.message{word-wrap:break-word;margin-bottom:0;max-width:70%}.message.user{align-self:flex-start}.message.agent{align-self:flex-end}.message-content{word-wrap:break-word;background:#fff;border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.1);padding:.75rem 1rem;position:relative}.message.agent .message-content{background:#28a745;border-bottom-right-radius:4px;color:#fff}.message.user .message-content{background:#f1f3f4;border-bottom-left-radius:4px;color:#333}.message-header{color:#666;font-size:.75rem;margin-bottom:.5rem;padding:0 .5rem}.message.agent .message-header{flex-direction:row-reverse;justify-content:flex-start}.message.user .message-header{justify-content:flex-start}.message-text{line-height:1.4}.message-text strong{color:inherit;font-weight:700}.message-text em{color:inherit;font-style:italic}.message-text del{color:#888;text-decoration:line-through}.message-text code{background:rgba(0,0,0,.1);border-radius:3px;font-family:Courier New,monospace;font-size:.9em;padding:.2em .4em}.message.agent .message-text code{background:hsla(0,0%,100%,.2)}.message-text .emoji{font-size:1.2em;vertical-align:middle}.message-text .ticket-number{background:rgba(102,126,234,.1);border-radius:3px;color:#28a745;font-weight:700;padding:.1em .3em}.message.agent .message-text .ticket-number{background:hsla(0,0%,100%,.2);color:#fff}.message-text br{line-height:1.6}.reply-box{background:#fff;border-top:1px solid #eee;flex-shrink:0;padding:1rem 2rem}.reply-form{margin:0 auto;max-width:800px}.reply-input-container{align-items:flex-end;display:flex;gap:1rem}.reply-input{border:1px solid #ddd;border-radius:8px;font-family:inherit;font-size:.9rem;min-height:80px;padding:.75rem;resize:vertical}.reply-input:focus{border-color:#28a745;box-shadow:0 0 0 2px rgba(102,126,234,.1);outline:none}.send-button{background:#28a745;border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:500;padding:.75rem 1.5rem;transition:all .2s}.send-button:hover:not(:disabled){background:#5a6fd8;transform:translateY(-1px)}.send-button:disabled{background:#ccc;cursor:not-allowed}.empty-messages,.empty-state,.error,.error-messages,.loading,.loading-messages{color:#666;padding:2rem;text-align:center}.loading-messages{padding:4rem 2rem}.empty-state{background:#fff;border-radius:8px;margin:2rem 0}.login-container{align-items:center;display:flex;flex-direction:column;gap:1rem;justify-content:center;min-height:100vh}.login-container button{background:#28a745;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;padding:1rem 2rem}@media (max-width:768px){.dashboard-header{flex-direction:column;gap:1rem;padding:1rem}.dashboard-content{padding:1rem}.conversation-header{align-items:flex-start;gap:.5rem;padding:1rem}.conversation-header,.reply-input-container{flex-direction:column}.send-button{align-self:flex-end}.message-content{max-width:85%}}.ticket-badge{background:#e74c3c;border-radius:10px;color:#fff;font-size:.7rem;font-weight:700;padding:.2rem .5rem}.message-status{color:#666;font-size:.7rem;font-style:italic;margin-top:.2rem}.message-header{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.messages-container,.messages-list{scroll-behavior:smooth}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message{animation:fadeInUp .3s ease-out}.media-message{margin:.5rem 0}.media-text{background-color:#f8f9fa;border-left:3px solid #007bff;border-radius:8px;margin-bottom:.75rem;padding:.5rem}.media-audio,.media-file,.media-image,.media-video{border-radius:8px;overflow:hidden}.media-image img,.media-video video{border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);display:block;height:auto;width:100%}.media-audio audio{margin:.5rem 0;width:100%}.media-file{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:1rem;text-align:center}.media-message p{color:#666;font-size:.9rem;margin:.5rem 0 0;text-align:center}.media-controls{margin-top:.5rem;text-align:center}.media-controls p{margin:.25rem 0}.message-text a{color:#007bff;text-decoration:none;word-break:break-all}.message-text a:hover{color:#0056b3;text-decoration:underline}.media-text a{color:#007bff;text-decoration:none;word-break:break-all}.media-text a:hover{color:#0056b3;text-decoration:underline}.download-button{background:#28a745;border-radius:6px;color:#fff!important;display:inline-block;font-size:.9rem;font-weight:500;margin-top:.5rem;padding:.5rem 1rem;text-decoration:none;transition:background-color .2s}.download-button:hover{background:#0056b3;text-decoration:none}.view-button{background:#17a2b8;border-radius:6px;color:#fff!important;display:inline-block;font-size:.9rem;font-weight:500;margin-left:.5rem;margin-top:.5rem;padding:.5rem 1rem;text-decoration:none;transition:background-color .2s}.view-button:hover{background:#138496;text-decoration:none}.file-info{align-items:center;display:flex;gap:1rem;margin-bottom:1rem}.file-icon-large{flex-shrink:0;font-size:3rem}.file-details{flex:1;min-width:0}.file-name{color:#333;font-size:1rem;font-weight:600;margin-bottom:.25rem;word-break:break-word}.file-type{color:#666;font-size:.875rem;margin-bottom:.25rem}.file-size{color:#888;font-family:monospace;font-size:.8rem}.message.sending .message-content{border:1px dashed #ccc;opacity:.7}.message.temporary .message-status{color:#28a745;font-weight:500}.message.temporary .message-status:before{content:"📤 "}.message-sending-indicator{animation:pulse 1.5s ease-in-out infinite;color:#28a745;display:inline-block;font-size:.8rem;margin-left:.5rem}.loading-more-messages{background:rgba(0,123,255,.05);border-bottom:1px solid #e9ecef;color:#666;margin-bottom:.5rem;padding:1rem;text-align:center}.loading-more-messages p{align-items:center;display:flex;font-size:.9rem;gap:.5rem;justify-content:center;margin:0}.messages-container::-webkit-scrollbar{width:6px}.messages-container::-webkit-scrollbar-track{background:#f1f1f1}.messages-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.messages-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.conversation-body{display:flex;flex:1;min-height:0;position:relative}.messages-section{display:flex;flex:1;flex-direction:column;min-width:0}.conversation-view:not(.embedded) .messages-section{margin-right:320px}.conversation-view:not(.embedded) .contact-sidebar{background:#fff;border-left:1px solid #eee;bottom:0;box-shadow:-2px 0 10px rgba(0,0,0,.1);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;position:fixed;right:0;top:0;width:320px;z-index:1000}.conversation-view.embedded .contact-sidebar{background:#fff;border-left:1px solid #e9ecef;box-shadow:none;display:flex;flex-direction:column;flex-shrink:0;height:100%;max-width:350px;min-width:250px;overflow-y:auto;position:relative;transition:width .3s ease;width:300px}.conversation-view.embedded .contact-sidebar.hidden{border-left:none;min-width:0;overflow:hidden;width:0}.sidebar-header{border-bottom:1px solid #eee;cursor:pointer;transition:background-color .2s}.sidebar-header:hover{background:#e9ecef}.sidebar-header h3{color:#333;font-size:1.1rem;margin:0}.sidebar-section{border-bottom:1px solid #eee;display:flex;flex-direction:column}.sidebar-section:last-child{border-bottom:none}.sidebar-content{padding:1rem}.contact-sidebar::-webkit-scrollbar{width:8px}.contact-sidebar::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.contact-sidebar::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.contact-sidebar::-webkit-scrollbar-thumb:hover{background:#a1a1a1}.sidebar-content.loading{align-items:center;color:#666;display:flex;justify-content:center}.sidebar-content.error{color:#dc3545}.sidebar-content.error p{margin:0 0 .5rem}.sidebar-content.error small{font-size:.85rem;opacity:.8}.contact-details{gap:1rem}.contact-details,.contact-field{display:flex;flex-direction:column}.contact-field{gap:.25rem}.contact-field label{color:#555;font-size:.85rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.contact-field span{color:#333;font-size:.95rem;word-break:break-all}.identity-value,.router-id-value{background:#f8f9fa;border:1px solid #eee;border-radius:4px;font-family:Courier New,monospace;font-size:.85rem;padding:.5rem}.contact-photo{border:2px solid #eee;box-shadow:0 2px 4px rgba(0,0,0,.1)}.extras-container{display:flex;flex-direction:column;gap:.5rem}.extra-item{background:#f8f9fa;border:1px solid #eee;border-radius:4px;font-size:.85rem;padding:.5rem}.extra-item strong{color:#555}.beeno-url-item{background:#f0f8ff;border:1px solid #28a745}.beeno-url-container{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}.beeno-url-text{background:#fff;border:1px solid #ddd;border-radius:3px;color:#666;font-family:Courier New,monospace;font-size:.75rem;padding:.25rem;word-break:break-all}.beeno-open-button{background:#28a745;border-radius:6px;box-shadow:0 2px 4px rgba(40,167,69,.2);color:#fff!important;display:inline-block;font-size:.85rem;font-weight:600;padding:.5rem 1rem;text-align:center;text-decoration:none;transition:all .2s ease}.beeno-open-button:hover{background:#218838;box-shadow:0 4px 8px rgba(40,167,69,.3);text-decoration:none;transform:translateY(-1px)}.beeno-open-button:active{transform:translateY(0)}.no-contact-info{color:#666;padding:2rem 1rem;text-align:center}.no-contact-info p{margin:0 0 .5rem}.no-contact-info small{background:#f8f9fa;border:1px solid #eee;border-radius:4px;display:inline-block;font-family:Courier New,monospace;font-size:.85rem;padding:.25rem .5rem}.loading-indicator{color:#666;font-size:.8rem;font-style:italic}.whatsapp-layout{background-color:#f0f2f5;display:flex;flex-direction:column;height:100vh}.whatsapp-header{align-items:center;background:linear-gradient(135deg,#47e28d,#074e22);box-shadow:0 2px 8px rgba(0,0,0,.15);color:#fff;display:flex;justify-content:space-between;min-height:30px;padding:.5rem 1rem;z-index:1000}.whatsapp-header h1{font-size:1.2rem;font-weight:600;margin:0}.whatsapp-main{display:flex;flex:1;min-height:0}.whatsapp-sidebar{background:#fff;border-right:1px solid #e9ecef;display:flex;flex-direction:column;min-width:350px;width:400px}.whatsapp-sidebar .tickets-list{display:block;gap:0}.sidebar-header{background:#f8f9fa;border-bottom:1px solid #e9ecef;padding:1rem}.search-section{margin-bottom:1rem}.search-input{border:1px solid #e9ecef;border-radius:20px;font-size:.9rem;outline:none;padding:.75rem;transition:border-color .2s;width:100%}.search-input:focus{border-color:#28a745;box-shadow:0 0 0 2px rgba(102,126,234,.1)}.search-input::placeholder{color:#999}.tag-filter-select{background:#fff;border:1px solid #e9ecef;border-radius:20px;cursor:pointer;font-size:.9rem;margin-top:.5rem;outline:none;padding:.75rem;transition:border-color .2s;width:100%}.tag-filter-select:focus{border-color:#28a745;box-shadow:0 0 0 2px rgba(102,126,234,.1)}.stats{display:flex;gap:1rem;margin-bottom:0;margin-top:1rem}.stat-item{background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.1);flex:1;padding:.5rem;text-align:center}.stat-number{color:#28a745;display:block;font-size:1.5rem;font-weight:700}.stat-label{color:#666;font-size:.8rem;letter-spacing:.5px;text-transform:uppercase}.sidebar-controls{display:flex;justify-content:center}.toggle-btn{background:#28a745;border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:.9rem;padding:.5rem 1rem;transition:all .2s}.toggle-btn:hover{background:#218838}.toggle-btn.active{background:#28a745}.tickets-list{flex:1;overflow-y:auto}.ticket-item{align-items:center;border-bottom:1px solid #f0f0f0;cursor:pointer;display:flex;min-height:85px;padding:.6rem .65rem;position:relative;transition:background-color .2s}.ticket-item:hover{background-color:#f5f7fa}.ticket-item.selected{background-color:#e3f2fd;border-right:3px solid #28a745}.ticket-item.unread{background-color:#fff3e0}.unread-dot{align-items:center;animation:unread-pulse 2s infinite;background:linear-gradient(135deg,#25d366,#1ebe57);border:2px solid #fff;border-radius:50%;box-shadow:0 2px 8px rgba(37,211,102,.4);display:inline-flex;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1));font-size:12px;height:24px;justify-content:center;min-width:24px;position:relative}.unread-dot.inline{margin-right:8px;vertical-align:middle}@keyframes unread-pulse{0%,to{box-shadow:0 2px 8px rgba(37,211,102,.4);transform:scale(1)}50%{box-shadow:0 4px 16px rgba(37,211,102,.6);transform:scale(1.1)}}.ticket-preview{align-items:center;display:flex;gap:6px}.ticket-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px;margin-top:8px}.ticket-tag{border-radius:14px;display:inline-block;font-size:.75rem;font-weight:600;line-height:1.2;max-width:120px;overflow:hidden;padding:3px 10px;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.3);white-space:nowrap}.ticket-tags-manager{margin-top:1rem}.tag-option{margin-bottom:.5rem}.tag-radio{align-items:center;background:#fff;border:1px solid #ddd;border-radius:8px;cursor:pointer;display:flex;font-size:.85rem;padding:.5rem .75rem;text-align:left;transition:all .2s ease;width:100%}.tag-radio:hover{background:#f8f9fa;border-color:#007bff}.tag-radio:disabled{cursor:not-allowed;opacity:.6}.tag-radio.selected{background:#e3f2fd;border-color:#007bff}.radio-indicator{font-size:1rem;margin-right:.75rem}.tag-label{flex:1;font-weight:500}.tag-radio.selected .tag-label{font-weight:700}.current-tag-summary{background:#f8f9fa;border-radius:8px;margin-top:1rem;padding:.5rem}.updating-tags{color:#666;margin-top:.5rem;text-align:center}.no-tags-available{color:#666;padding:1rem;text-align:center}.ticket-preview-text{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ticket-content{flex:1;min-width:0}.ticket-header{margin-bottom:.15rem}.contact-info{flex:1;min-width:0}.contact-name{color:#2c3e50;font-size:.88rem;font-weight:600;line-height:1.2}.contact-name,.contact-phone{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-phone{color:#666;font-size:.75rem;margin-top:.05rem}.ticket-time{color:#666;flex-shrink:0;font-size:.7rem;margin-left:.4rem}.ticket-preview{color:#666;font-size:.78rem;line-height:1.2;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ticket-meta{align-items:center;display:flex;flex-wrap:wrap;font-size:.68rem;gap:.4rem}.ticket-number{background:#e3f2fd;color:#1976d2}.status,.ticket-number{border-radius:12px;font-weight:600;line-height:1;padding:.125rem .5rem}.status{font-size:.66rem;text-transform:uppercase}.status.open{background:#e8f5e8;color:#2e7d32}.status.closed{background:#fafafa;color:#666}.time-window{border-radius:12px;font-weight:500;line-height:1;padding:.125rem .5rem;white-space:nowrap}.time-window.active{background:#fff3e0;color:#f57c00}.time-window.expired{background:#ffebee;color:#d32f2f}.whatsapp-sidebar .ticket-item{background:transparent;border-left:none;border-radius:0;box-shadow:none;max-height:140px;overflow:hidden}.whatsapp-sidebar .ticket-content{overflow:hidden}.whatsapp-sidebar .ticket-meta{gap:.3rem;overflow:hidden;white-space:nowrap}.whatsapp-sidebar .ticket-preview{margin-bottom:.2rem}.whatsapp-conversation{background:#fff;display:flex;flex:1;flex-direction:column;min-width:0}.no-conversation-selected{align-items:center;background:#f8f9fa;display:flex;height:100%;justify-content:center}.welcome-message{color:#666;text-align:center}.welcome-message h2{color:#444;margin:1rem 0}.welcome-message p{font-size:.9rem;margin:0}.embedded-header{align-items:flex-start;background:#fff;border-bottom:1px solid #e9ecef;box-shadow:0 1px 3px rgba(0,0,0,.1);display:flex;flex-shrink:0;height:auto;justify-content:space-between;min-height:auto;overflow:hidden;padding:.75rem 1rem}.embedded-header .conversation-info-compact{flex:1;max-width:calc(100% - 100px);min-width:0;overflow:hidden}.embedded-header .contact-name-compact{color:#2c3e50;display:block;font-size:.95rem;font-weight:600;line-height:1.1;margin-bottom:.3rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.embedded-header .contact-details-compact{align-items:center;color:#666;display:flex;flex-wrap:wrap;font-size:.75rem;gap:.4rem;line-height:1.2}.embedded-header .contact-details-compact>*{flex-shrink:0;white-space:nowrap}.conversation-actions-compact{align-items:flex-start;flex-shrink:0;margin-left:.5rem}.ticket-number-compact{background:#e3f2fd;color:#1976d2;font-size:.7rem}.status-compact,.ticket-number-compact{border-radius:10px;font-weight:600;padding:.15rem .5rem}.status-compact{font-size:.6rem;text-transform:uppercase}.status-compact.open{background:#e8f5e8;color:#2e7d32}.status-compact.closed{background:#fafafa;color:#666}.contact-identity-compact,.router-id-compact{background:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;font-size:.65rem;padding:.15rem .4rem}.time-remaining-compact{align-items:center;display:flex;font-size:.75rem;gap:.25rem}.time-remaining-compact.active{color:#f57c00}.time-remaining-compact.expired{color:#d32f2f}.time-compact{font-size:.75rem;font-weight:500}.time-compact.active{color:#f57c00}.time-compact.expired{color:#d32f2f}.conversation-actions-compact{display:flex;gap:.5rem}.back-ticket-button-compact,.close-button-compact,.reopen-button-compact,.sidebar-toggle-button{background:#28a745;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:1rem;height:fit-content;padding:.4rem .6rem;transition:background-color .2s;white-space:nowrap}.back-ticket-button-compact:hover{background:#218838!important}.create-ticket-button-compact{background:#28a745;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:1rem;height:fit-content;padding:.4rem .6rem;transition:background-color .2s;white-space:nowrap}.create-ticket-button-compact:hover,.sidebar-toggle-button:hover{background:#218838}.close-button-compact,.reopen-button-compact{font-size:1rem;padding:.4rem .6rem}.close-button-compact:hover,.reopen-button-compact:hover{background:#218838}.reopen-button-compact{background:#28a745}.reopen-button-compact:hover{background:#218838}.mark-unread-button-compact{background:#28a745;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:1rem;height:fit-content;padding:.4rem .6rem;transition:background-color .2s;white-space:nowrap}.mark-unread-button-compact:hover{background:#218838!important}.refresh-messages-button-compact{background:#28a745;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:1rem;height:fit-content;padding:.4rem .6rem;transition:background-color .2s;white-space:nowrap}.refresh-messages-button-compact:hover{background:#218838!important}.conversation-view.embedded{display:flex;flex-direction:column;height:100%}.conversation-view.embedded .conversation-body{flex:1;margin-right:0}.conversation-view.embedded .messages-section{margin-right:0}.empty-state{color:#666;padding:2rem;text-align:center}.empty-state p{font-size:1rem;margin:0 0 .5rem}.empty-state small{font-size:.85rem;opacity:.8}@media (max-width:768px){.whatsapp-sidebar{min-width:auto;width:100%}.whatsapp-conversation,.whatsapp-main.show-conversation .whatsapp-sidebar{display:none}.whatsapp-main.show-conversation .whatsapp-conversation{display:flex}.conversation-body{flex-direction:column}.conversation-header,.messages-section{margin-right:0}.conversation-view.embedded .contact-sidebar{display:none}.conversation-view:not(.embedded) .contact-sidebar{border-left:none;border-top:1px solid #eee;bottom:auto;box-shadow:none;max-height:300px;position:relative;right:auto;top:auto;width:100%}.sidebar-content,.sidebar-header{padding:.75rem 1rem}}@media (max-width:480px){.conversation-header{flex-wrap:wrap;gap:.5rem;padding:.75rem 1rem}.conversation-info{order:1;width:100%}.conversation-actions{order:3}.contact-details{gap:.25rem}.contact-ids{flex-direction:column;gap:.25rem}.embedded-header{align-items:stretch;flex-direction:column;gap:.5rem;min-height:auto;padding:.5rem .75rem}.embedded-header .conversation-info-compact{gap:.25rem;max-width:100%}.embedded-header .contact-name-compact{font-size:.9rem;margin-bottom:.25rem}.embedded-header .contact-details-compact{font-size:.7rem;gap:.3rem}.conversation-actions-compact{align-self:flex-end;margin-left:0;margin-top:0}.ticket-item{min-height:75px;padding:.5rem}.avatar-circle{font-size:.85rem;height:32px;width:32px}.contact-name{font-size:.82rem}.contact-phone{font-size:.68rem}.search-input{font-size:.85rem;padding:.6rem}}.contact-sidebar .sidebar-header{background:#f8f9fa;border-bottom:1px solid #eee;display:flex;flex-direction:column;gap:.75rem;padding:1rem;transition:background-color .2s}.contact-sidebar .sidebar-header-title{align-items:center;display:flex;justify-content:space-between;width:100%}.contact-sidebar .sidebar-header-title h3{color:#333;font-size:1.1rem;margin:0}.collapse-toggle{background:none;border:none;border-radius:4px;color:#666;cursor:pointer;font-size:14px;opacity:.7;padding:4px 8px;transition:all .2s}.collapse-toggle:hover{background-color:rgba(0,0,0,.05);color:#333;opacity:1}.collapse-toggle:active{background-color:rgba(0,0,0,.1);transform:scale(.95)}.contact-sidebar .sidebar-actions{display:flex;gap:.5rem;justify-content:flex-start}.contact-sidebar .cancel-contact-button,.contact-sidebar .edit-contact-button,.contact-sidebar .save-contact-button{align-items:center;background:#28a745;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:.85rem;font-weight:500;gap:.25rem;padding:.5rem 1rem;transition:all .2s ease;white-space:nowrap}.contact-sidebar .edit-contact-button:hover{background:#0056b3;transform:translateY(-1px)}.contact-sidebar .save-contact-button{background:#28a745}.contact-sidebar .save-contact-button:hover:not(:disabled){background:#218838;transform:translateY(-1px)}.contact-sidebar .save-contact-button:disabled{background:#6c757d;cursor:not-allowed;opacity:.7;transform:none}.contact-sidebar .cancel-contact-button{background:#6c757d}.contact-sidebar .cancel-contact-button:hover:not(:disabled){background:#5a6268;transform:translateY(-1px)}.contact-sidebar .cancel-contact-button:disabled{cursor:not-allowed;opacity:.7;transform:none}.contact-sidebar .contact-edit-form{display:flex;flex-direction:column;gap:1rem;padding:.5rem 0}.contact-sidebar .contact-edit-form .contact-field{display:flex;flex-direction:column;gap:.5rem}.contact-sidebar .contact-edit-form .contact-field label{color:#495057;font-size:.85rem;font-weight:600;letter-spacing:.5px;margin:0;text-transform:uppercase}.contact-sidebar .contact-edit-form .contact-field input{background:#fff;border:2px solid #e1e5e9;border-radius:8px;font-family:inherit;font-size:.9rem;padding:.75rem;transition:border-color .2s ease}.contact-sidebar .contact-edit-form .contact-field input:focus{border-color:#28a745;box-shadow:0 0 0 3px rgba(0,123,255,.1);outline:none}.contact-sidebar .contact-edit-form .contact-field input:disabled,.contact-sidebar .contact-edit-form .contact-field span{background:#f8f9fa;border-color:#dee2e6;color:#6c757d}.overflow-control{display:flex;flex-direction:column;gap:.75rem}.overflow-options{display:flex;flex-wrap:wrap;gap:.5rem}.overflow-option{cursor:pointer;flex:1;min-width:120px;position:relative}.overflow-option input[type=radio]{opacity:0;pointer-events:none;position:absolute}.overflow-option .option-content{align-items:center;background:#fff;border:2px solid #e1e5e9;border-radius:12px;display:flex;flex-direction:column;gap:.5rem;padding:1rem .75rem;text-align:center;transition:all .3s ease}.overflow-option:hover .option-content{border-color:#28a745;box-shadow:0 2px 8px rgba(40,167,69,.15)}.overflow-option.selected .option-content{background:#e8f5e8;border-color:#28a745;border-width:3px;box-shadow:0 6px 16px rgba(40,167,70,.9)}.overflow-option .option-icon{font-size:1.5rem;margin-bottom:.25rem;transition:transform .2s ease}.overflow-option.selected .option-icon{transform:scale(1.1)}.overflow-option .option-text{color:#495057;font-size:.85rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.overflow-option.selected .option-text{color:#1e7e34;font-weight:700}.overflow-help{color:#6c757d;font-size:.8rem;font-style:italic;line-height:1.4;margin:0;text-align:center}.contact-sidebar .extras-edit-container{display:flex;flex-direction:column;gap:.75rem;margin-top:.5rem}.contact-sidebar .extra-edit-item{align-items:center;background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;display:flex;gap:.75rem;padding:.75rem;transition:background-color .2s ease}.contact-sidebar .extra-edit-item:hover{background:#e9ecef}.contact-sidebar .extra-edit-item strong{color:#495057;flex-shrink:0;font-size:.85rem;font-weight:600;min-width:100px}.contact-sidebar .extra-edit-item input{background:#fff;border:1px solid #ced4da;border-radius:6px;flex:1;font-size:.85rem;padding:.5rem .75rem;transition:border-color .2s ease}.contact-sidebar .extra-edit-item input:focus{border-color:#28a745;box-shadow:0 0 0 2px rgba(0,123,255,.1);outline:none}.contact-sidebar .extra-edit-item span{background:#fff;border:1px solid #dee2e6;border-radius:6px;color:#6c757d;flex:1;font-size:.85rem;font-style:italic;padding:.5rem .75rem}.contact-sidebar .extra-edit-item button{align-items:center;background:#dc3545;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-size:.75rem;height:28px;justify-content:center;transition:all .2s ease;width:28px}.contact-sidebar .extra-edit-item button:hover{background:#c82333;transform:scale(1.05)}.contact-sidebar .extra-edit-item button:active{transform:scale(.95)}.contact-sidebar .add-extra-field{background:#fefefe;border:2px dashed #ced4da;border-radius:8px;padding:1rem;transition:all .2s ease}.contact-sidebar .add-extra-field:hover{background:#f8f9ff;border-color:#28a745}.contact-sidebar .add-extra-field .form-row{align-items:stretch;display:flex;gap:.5rem;margin-bottom:.5rem}.contact-sidebar .add-extra-field input{background:#fff;border:1px solid #ced4da;border-radius:6px;flex:1;font-size:.85rem;padding:.6rem .75rem;transition:border-color .2s ease}.contact-sidebar .add-extra-field input:focus{border-color:#28a745;box-shadow:0 0 0 2px rgba(0,123,255,.1);outline:none}.contact-sidebar .add-extra-field input::placeholder{color:#6c757d;font-style:italic}.contact-sidebar .add-extra-field button{align-items:center;background:#28a745;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-size:.85rem;font-weight:500;justify-content:center;min-width:40px;padding:.6rem .75rem;transition:all .2s ease}.contact-sidebar .add-extra-field button:hover:not(:disabled){background:#218838;transform:translateY(-1px)}.contact-sidebar .add-extra-field button:disabled{background:#6c757d;cursor:not-allowed;opacity:.6;transform:none}.contact-sidebar .add-extra-field small{color:#6c757d;display:block;font-size:.75rem;font-style:italic;line-height:1.3;margin:0;text-align:center}@media (max-width:768px){.contact-sidebar .contact-edit-form{gap:.75rem}.contact-sidebar .extra-edit-item{align-items:stretch;flex-direction:column;gap:.5rem}.contact-sidebar .extra-edit-item strong{min-width:auto;padding-bottom:.25rem;text-align:center}.contact-sidebar .add-extra-field .form-row{flex-direction:column;gap:.5rem}.contact-sidebar .add-extra-field button{align-self:center;min-width:120px}.contact-sidebar .cancel-contact-button,.contact-sidebar .edit-contact-button,.contact-sidebar .save-contact-button{font-size:.8rem;padding:.4rem .8rem}}@media (max-width:480px){.contact-sidebar .sidebar-header{gap:.5rem}.contact-sidebar .sidebar-header-title h3{font-size:1rem}.contact-sidebar .sidebar-actions{justify-content:flex-start}.contact-sidebar .add-extra-field input,.contact-sidebar .contact-edit-form .contact-field input,.contact-sidebar .extra-edit-item input{font-size:16px}.collapse-toggle{font-size:12px;padding:2px 6px}.comments-header-controls{align-items:flex-end;flex-direction:column;gap:4px}.current-user-name{font-size:10px}.edit-username-input{font-size:12px;width:100px}}.comments-header-controls{align-items:center;display:flex;gap:8px}.current-user-name{border-radius:3px;color:#666;cursor:pointer;font-size:11px;padding:2px 6px;transition:background-color .2s;white-space:nowrap}.current-user-name:hover{background-color:rgba(0,0,0,.05);color:#333}.edit-username-container{align-items:center;display:flex;gap:4px}.edit-username-input{border:1px solid #ddd;border-radius:3px;font-size:11px;outline:none;padding:2px 6px;width:120px}.edit-username-input:focus{border-color:#25d366}.cancel-username-btn,.save-username-btn{background:none;border:none;border-radius:3px;cursor:pointer;font-size:12px;padding:2px 4px;transition:background-color .2s}.save-username-btn{color:#25d366}.save-username-btn:hover{background-color:rgba(37,211,102,.1)}.cancel-username-btn{color:#dc3545}.cancel-username-btn:hover{background-color:rgba(220,53,69,.1)}.add-comment-form{margin-bottom:1rem}.comment-textarea{background-color:#fff;border:1px solid #e1e5e9;border-radius:8px;font-family:inherit;font-size:14px;line-height:1.4;min-height:80px;padding:10px 12px;resize:vertical;transition:border-color .2s;width:100%}.comment-textarea:focus{border-color:#25d366;box-shadow:0 0 0 2px rgba(37,211,102,.1);outline:none}.comment-textarea:disabled{background-color:#f8f9fa;cursor:not-allowed}.comment-textarea::placeholder{color:#868e96}.comment-actions{align-items:center;display:flex;justify-content:space-between;margin-top:8px}.comment-counter{color:#6c757d;font-size:12px}.add-comment-btn{background-color:#25d366;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:13px;font-weight:500;padding:6px 12px;transition:background-color .2s}.add-comment-btn:hover:not(:disabled){background-color:#1e8a4a}.add-comment-btn:disabled{background-color:#6c757d;cursor:not-allowed;opacity:.6}.comments-list{max-height:400px;overflow-y:auto}.comments-loading,.no-comments{color:#6c757d;padding:20px 10px;text-align:center}.no-comments p{font-size:14px;margin:0 0 5px}.no-comments small{color:#868e96;font-size:12px}.comment-item{background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;margin-bottom:10px;padding:12px;transition:background-color .2s}.comment-item:hover{background-color:#f1f3f4}.comment-header{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:8px}.comment-author{color:#1976d2;font-size:13px;font-weight:600}.comment-author strong{color:#1976d2;font-size:13px;font-weight:700}.comment-meta{align-items:center;display:flex;gap:8px}.comment-date{color:#6c757d;font-size:11px}.remove-comment-btn{background:none;border:none;border-radius:4px;color:#dc3545;cursor:pointer;font-size:14px;padding:2px 4px;transition:background-color .2s}.remove-comment-btn:hover:not(:disabled){background-color:rgba(220,53,69,.1)}.remove-comment-btn:disabled{cursor:not-allowed;opacity:.6}.comment-text{color:#495057;font-size:13px;line-height:1.4;margin:0;white-space:pre-wrap;word-break:break-word}.comments-list::-webkit-scrollbar{width:6px}.comments-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.comments-list::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.comments-list::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width:768px){.comment-textarea{font-size:16px}.comment-item{padding:10px}.comment-header{align-items:flex-start;flex-direction:column;gap:6px}.comment-meta{flex-direction:row-reverse;justify-content:flex-end;width:100%}}.ticket-active-users{align-items:center;display:inline-flex;margin-left:8px}.active-users-indicator{align-items:center;background:rgba(40,167,69,.1);border-radius:12px;color:#28a745;display:inline-flex;font-size:.75rem;font-weight:500;gap:4px;padding:2px 6px}.active-user-name{font-weight:600}.ticket-typing-indicator{align-items:center;color:#6c757d;display:inline-flex;font-size:.85rem;font-style:italic;gap:6px}.ticket-typing-indicator .typing-dots{align-items:center;display:inline-flex;gap:2px}.ticket-typing-indicator .typing-dots span{animation:typing-pulse 1.4s ease-in-out infinite;background:#6c757d;border-radius:50%;display:inline-block;height:6px;width:6px}.ticket-typing-indicator .typing-dots span:first-child{animation-delay:-.32s}.ticket-typing-indicator .typing-dots span:nth-child(2){animation-delay:-.16s}@keyframes typing-pulse{0%,80%,to{opacity:.5;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.ticket-typing-indicator .typing-text{color:#28a745;font-weight:500}.ticket-item .contact-info{display:flex;flex:1;flex-direction:column;gap:2px}.ticket-item .ticket-header{align-items:flex-start;display:flex;justify-content:space-between;width:100%}.conversation-view .active-users{margin-top:4px}.conversation-view .users-list{display:inline-flex;flex-wrap:wrap;gap:8px}.conversation-view .active-user{background:rgba(40,167,69,.1);border-radius:12px;color:#28a745;font-size:.85rem;font-weight:500;padding:2px 8px}.conversation-view .current-user-indicator{background:rgba(0,123,255,.1);border-radius:12px;color:#007bff;font-size:.85rem;font-weight:500;padding:2px 8px}.typing-indicator{background:linear-gradient(90deg,rgba(40,167,69,.05),transparent);border-left:3px solid #28a745;margin:8px 0;padding:12px 16px}.typing-indicator .typing-content{align-items:center;display:flex;gap:12px}.typing-indicator .typing-avatar{font-size:1.5rem}.typing-indicator .typing-info{display:flex;flex-direction:column;gap:4px}.typing-indicator .typing-text{color:#495057;font-size:.9rem}.typing-indicator .typing-text strong{color:#28a745;font-weight:600}.typing-indicator .typing-dots{display:inline-flex;gap:3px}.typing-indicator .typing-dots span{animation:typing-wave 1.4s ease-in-out infinite;background:#28a745;border-radius:50%;height:8px;width:8px}.typing-indicator .typing-dots span:first-child{animation-delay:-.32s}.typing-indicator .typing-dots span:nth-child(2){animation-delay:-.16s}@keyframes typing-wave{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-10px)}}.self-typing-indicator{background:rgba(0,123,255,.05);border-left:3px solid #007bff;margin:4px 0;padding:8px 12px}.self-typing-indicator .self-typing-text{color:#007bff;font-size:.85rem;font-style:italic}.read-by-users{border-top:1px solid rgba(0,0,0,.1);margin-top:8px;padding-top:8px}.read-by-label{color:#6c757d;font-size:.85rem;margin-right:8px}.readers-list{display:inline-flex;flex-wrap:wrap;gap:12px}.read-by-user{color:#28a745;font-size:.85rem}.read-by-user small{color:#6c757d;margin-left:4px}.unread-status{margin-top:8px}.unread-indicator{align-items:center;background:rgba(220,53,69,.1);border-radius:12px;color:#dc3545;display:inline-flex;font-size:.85rem;font-weight:500;gap:4px;padding:4px 8px}@media (max-width:768px){.ticket-active-users{margin-left:0}.ticket-active-users,.ticket-typing-indicator{display:block;margin-top:4px}}.audio-recorder{align-items:center;display:inline-flex;gap:8px;margin-right:8px}.audio-btn{align-items:center;background:#28a745;border:none;border-radius:50%;cursor:pointer;display:flex;font-size:18px;height:40px;justify-content:center;transition:all .2s ease;user-select:none;-webkit-user-select:none;width:40px}.audio-btn:hover:not(:disabled){background:#128c7e;transform:scale(1.1)}.audio-btn:active:not(:disabled){transform:scale(.95)}.audio-btn.disabled,.audio-btn:disabled{background:#ccc;cursor:not-allowed;transform:none}.audio-btn.recording{animation:pulse 1s infinite;background:#28a745}.audio-btn.uploading{background:orange;cursor:wait}.recording-interface{align-items:center;background:rgba(37,211,102,.1);border:1px solid #25d366;border-radius:20px;display:flex;gap:12px;padding:8px 16px}.cancel-btn{align-items:center;background:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;font-size:14px;height:32px;justify-content:center;transition:all .2s ease;width:32px}.cancel-btn:hover{background:#ffc9c9;transform:scale(1.1)}.recording-info{align-items:center;display:flex;gap:8px}.recording-time{color:#25d366;font-family:monospace;font-size:14px;font-weight:700}.recording-waves{align-items:center;display:flex;gap:2px}.wave{animation:wave 1.2s ease-in-out infinite;background:#25d366;border-radius:2px;height:12px;width:3px}.wave:nth-child(2){animation-delay:.1s}.wave:nth-child(3){animation-delay:.2s}.uploading-interface{align-items:center;background:rgba(255,165,0,.1);border:1px solid orange;border-radius:20px;display:flex;gap:8px;padding:8px 16px}.uploading-text{color:orange;font-size:12px;font-style:italic}.audio-recorder.permission-denied{align-items:center;flex-direction:column;gap:4px}.audio-recorder.permission-denied small{color:#f44;font-size:10px;text-align:center}.input-controls{display:flex;flex-direction:column;gap:8px;width:100%}.input-buttons{align-items:center;display:flex;gap:8px;justify-content:flex-end}.reply-input{flex:1;width:100%!important}@keyframes pulse{0%,to{box-shadow:0 0 0 0 rgba(255,68,68,.7);transform:scale(1)}50%{box-shadow:0 0 0 10px rgba(255,68,68,0);transform:scale(1.05)}}@keyframes wave{0%,40%,to{transform:scaleY(.4)}20%{transform:scaleY(1)}}@media (max-width:768px){.audio-btn{font-size:16px;height:36px;width:36px}.recording-interface{gap:8px;padding:6px 12px}.cancel-btn{font-size:12px;height:28px;width:28px}.input-buttons{gap:4px}}.close-ticket-modal-overlay{align-items:center;animation:fadeIn .2s ease-in;background-color:rgba(0,0,0,.5);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:2000}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.close-ticket-modal-content{animation:slideUp .3s ease-out;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.15);display:flex;flex-direction:column;max-height:80vh;max-width:500px;overflow:hidden;width:90%}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.close-ticket-modal-content .modal-header{align-items:center;background:#f8f9fa;border-bottom:1px solid #e9ecef;display:flex;justify-content:space-between;padding:20px 24px}.close-ticket-modal-content .modal-header h2{color:#333;font-size:1.4rem;font-weight:600;margin:0}.close-ticket-modal-content .modal-close-button{background:none;border:none;color:#999;cursor:pointer;font-size:1.5rem;padding:4px 8px;transition:all .2s}.close-ticket-modal-content .modal-close-button:hover{color:#dc3545;transform:scale(1.1)}.close-ticket-modal-content .modal-body{flex:1;overflow-y:auto;padding:24px}.close-ticket-modal-content .modal-instruction{color:#495057;font-size:1rem;font-weight:500;margin:0 0 20px}.close-ticket-modal-content .loading-tags,.close-ticket-modal-content .no-tags-message{color:#666;padding:40px 20px;text-align:center}.close-ticket-modal-content .no-tags-message p{margin:8px 0}.close-ticket-modal-content .tags-list{display:flex;flex-direction:column;gap:12px;max-height:400px;overflow-y:auto;padding:4px}.close-ticket-modal-content .tag-option{align-items:center;background:#fff;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;display:flex;font-size:1rem;padding:12px 16px;transition:all .2s}.close-ticket-modal-content .tag-option:hover{background:#f0f8ff;border-color:#1976d2}.close-ticket-modal-content .tag-option input[type=radio]{cursor:pointer;height:18px;margin-right:12px;width:18px}.close-ticket-modal-content .tag-option input[type=radio]:checked+.tag-label{color:#1976d2;font-weight:600}.close-ticket-modal-content .tag-option:has(input:checked){background:#e3f2fd;border-color:#1976d2}.close-ticket-modal-content .tag-label{color:#333;flex:1;transition:all .2s}.close-ticket-modal-content .modal-footer{background:#f8f9fa;border-top:1px solid #e9ecef;display:flex;gap:12px;justify-content:flex-end;padding:16px 24px}.close-ticket-modal-content .modal-cancel-button,.close-ticket-modal-content .modal-confirm-button{border:none;border-radius:6px;cursor:pointer;font-size:1rem;font-weight:500;min-width:120px;padding:10px 24px;transition:all .2s}.close-ticket-modal-content .modal-cancel-button{background:#fff;border:1px solid #ddd;color:#666}.close-ticket-modal-content .modal-cancel-button:hover:not(:disabled){background:#f5f5f5;border-color:#999}.close-ticket-modal-content .modal-confirm-button{background:#28a745;color:#fff}.close-ticket-modal-content .modal-confirm-button:hover:not(:disabled){background:#218838;box-shadow:0 4px 12px rgba(40,167,69,.3);transform:translateY(-1px)}.close-ticket-modal-content .modal-cancel-button:disabled,.close-ticket-modal-content .modal-confirm-button:disabled{cursor:not-allowed;opacity:.5}@media (max-width:600px){.close-ticket-modal-content{margin:10px;max-height:90vh;width:95%}.close-ticket-modal-content .modal-header{padding:16px 20px}.close-ticket-modal-content .modal-body{padding:20px}.close-ticket-modal-content .modal-footer{flex-direction:column;padding:12px 20px}.close-ticket-modal-content .modal-cancel-button,.close-ticket-modal-content .modal-confirm-button{width:100%}}.message-reply{margin-bottom:8px}.quoted-message{background:rgba(0,0,0,.06);border-left:4px solid #4fc3f7;border-radius:8px;font-size:.9em;line-height:1.3;margin-bottom:6px;padding:8px 12px;position:relative}.message.user .quoted-message{background:hsla(0,0%,100%,.25);border-left-color:#fff}.message.agent .quoted-message{background:rgba(0,0,0,.08);border-left-color:#25d366}.quoted-header{margin-bottom:4px}.quoted-sender{color:#4fc3f7;display:inline-block;font-size:.85em;font-weight:600}.message.user .quoted-sender{color:#28a745}.message.agent .quoted-sender{color:#25d366}.quoted-content{word-wrap:break-word;font-size:.85em;line-height:1.2;max-height:60px;opacity:.8;overflow:hidden;position:relative}.quoted-content:after{background:linear-gradient(90deg,transparent,rgba(0,0,0,.06));bottom:0;content:"";height:20px;position:absolute;right:0;width:20px}.message.user .quoted-content:after{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.25))}.message.agent .quoted-content:after{background:linear-gradient(90deg,transparent,rgba(0,0,0,.08))}.message-text-content{margin-top:0}.message-content .message-reply+.message-text-content{margin-top:4px}@media (max-width:600px){.quoted-message{margin-bottom:4px;padding:6px 10px}.quoted-content{font-size:.8em;max-height:50px}.quoted-sender{font-size:.8em}}.pinned-tickets-section,.regular-tickets-section{margin-bottom:1.5rem}.pinned-tickets-section .section-header,.regular-tickets-section .section-header{border-bottom:1px solid #e9ecef;margin-bottom:.75rem;padding:.5rem 0}.pinned-tickets-section .section-header h3,.regular-tickets-section .section-header h3{color:#6c757d;font-size:.9rem;font-weight:600;letter-spacing:.5px;margin:0;text-transform:uppercase}.ticket-header{align-items:flex-start;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-between;margin-bottom:.5rem}.ticket-actions{align-items:center;display:flex;flex-shrink:0;gap:.5rem}.pin-button{background:none;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;line-height:1;opacity:.6;padding:.25rem;transition:all .2s ease}.pin-button:hover{background-color:rgba(0,0,0,.05);opacity:1;transform:scale(1.1)}.pin-button.pinned{color:#dc3545;opacity:1}.pin-button.pinned:hover{background-color:rgba(220,53,69,.1)}.ticket-item.pinned{background:linear-gradient(135deg,#f8f9ff,#fff);border-left:3px solid #007bff;box-shadow:0 2px 4px rgba(0,123,255,.1)}.ticket-item.pinned:hover{box-shadow:0 4px 8px rgba(0,123,255,.15)}@media (max-width:600px){.ticket-header{align-items:stretch;flex-direction:column}.ticket-actions{justify-content:space-between;width:100%}.pin-button{font-size:1rem;padding:.5rem}.pinned-tickets-section .section-header h3,.regular-tickets-section .section-header h3{font-size:.8rem}}.message-comment-input{background-color:#f8f9fa;border:1px solid #ddd;border-radius:6px;color:#495057;font-family:inherit;font-size:.9rem;line-height:1.4;margin-top:10px;min-height:50px;padding:10px 12px;resize:vertical;transition:all .2s ease;width:100%}.message-comment-input:focus{background-color:#fff;border-color:#007bff;box-shadow:0 0 0 2px rgba(0,123,255,.25);outline:none}.message-comment-input:disabled{background-color:#e9ecef;color:#6c757d;cursor:not-allowed}.message-comment-input::placeholder{color:#6c757d;font-style:italic}.comment-character-counter{display:flex;justify-content:flex-end;margin-bottom:.5rem;margin-top:.5rem}.comment-character-counter .character-count{background:#f8f9fa;border:1px solid #e0e0e0;border-radius:12px;color:#666;font-size:.8rem;padding:.25rem .5rem;transition:all .2s ease}.comment-character-counter .character-count.warning{background:#f8d7da;border-color:#f5c6cb;color:#dc3545;font-weight:500}@media (max-width:600px){.message-comment-input{font-size:.85rem;min-height:45px;padding:10px 12px}.comment-character-counter .character-count{font-size:.75rem;padding:.2rem .4rem}}.contact-message{background:#f8f9ff;border:1px solid #d1d9ff;border-radius:8px;margin:8px 0;padding:12px}.contact-header{align-items:center;display:flex;margin-bottom:8px}.contact-indicator{background:#4a67ff;border-radius:12px;color:#fff;font-size:.8rem;font-weight:500;padding:4px 8px}.contact-content{font-size:.9rem}.contact-name{align-items:center;display:flex;font-size:1rem;gap:8px;margin-bottom:8px}.contact-icon{font-size:1.2rem}.contact-phones{margin-bottom:8px}.contact-phone{align-items:center;display:flex;gap:8px;margin-bottom:4px}.phone-link{color:#06c;font-family:monospace;text-decoration:none}.phone-link:hover{text-decoration:underline}.whatsapp-link{background:#25d366;border:none;border-radius:4px;color:#fff;cursor:pointer;display:inline-block;font-size:.8rem;padding:2px 6px;text-decoration:none;transition:background-color .2s}.whatsapp-link:hover{background:#1fb856;color:#fff;text-decoration:none}.contact-organization{align-items:center;color:#666;display:flex;font-style:italic;gap:8px;margin-bottom:8px}.media-modal-overlay{align-items:center;animation:fadeIn .3s ease-out;background-color:rgba(0,0,0,.8);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:3000}.media-modal-content{animation:slideUp .3s ease-out;background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.3);display:flex;flex-direction:column;max-height:90vh;max-width:90vw;overflow:hidden;width:1000px}.media-modal-content .modal-header{align-items:center;background:#f8f9ff;border-bottom:1px solid #e9ecef;display:flex;justify-content:space-between;padding:20px 24px}.media-modal-content .modal-header h2{color:#333;font-size:1.4rem;margin:0}.media-modal-content .modal-body{flex:1;overflow-y:auto;padding:20px}.media-grid{display:grid;gap:15px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-bottom:20px}.media-item{background:#f8f9fa;border-radius:8px;cursor:pointer;overflow:hidden;position:relative;transition:transform .2s ease,box-shadow .2s ease}.media-item:hover{box-shadow:0 4px 12px rgba(0,0,0,.15);transform:translateY(-2px)}.media-image-item{position:relative}.media-image-item img{cursor:pointer;display:block;height:150px;object-fit:cover;width:100%}.media-video-item{position:relative}.media-video-item video{cursor:pointer;display:block;height:150px;object-fit:cover;width:100%}.media-audio-item,.media-document-item{align-items:center;display:flex;min-height:80px;padding:15px}.audio-icon,.document-icon{font-size:2rem;margin-right:15px;min-width:40px;text-align:center}.media-info{display:flex;flex:1;flex-direction:column;gap:5px}.media-type{color:#333;font-size:.9rem;font-weight:500}.media-date{color:#666;font-size:.8rem}.media-overlay{align-items:center;background:linear-gradient(transparent,rgba(0,0,0,.7));bottom:0;color:#fff;display:flex;justify-content:space-between;left:0;padding:10px 15px;position:absolute;right:0}.media-overlay .media-date,.media-overlay .media-type{color:#fff;font-size:.8rem}.download-button,.play-button{background:#007bff;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.9rem;padding:8px 12px;transition:background-color .2s}.download-button:hover,.play-button:hover{background:#0056b3}.load-more-section{border-top:1px solid #e9ecef;padding:20px 0;text-align:center}.load-more-button{background:#28a745;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:1rem;padding:12px 24px;transition:background-color .2s}.load-more-button:hover{background:#218838}.load-more-button:disabled{background:#6c757d;cursor:not-allowed}.loading-media,.no-media-message{color:#666;padding:40px 20px;text-align:center}.loading-media p,.no-media-message p{font-size:1.1rem;margin:0}.view-media-button{background:#6f42c1;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.85rem;margin-left:8px;padding:8px 16px;transition:background-color .2s ease}.view-media-button:hover{background:#5a32a3}.view-media-button-compact{background:#28a745;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:1rem;height:fit-content;padding:.4rem .6rem;transition:background-color .2s;white-space:nowrap}.view-media-button-compact:hover{background:#218838!important}@media (max-width:768px){.media-modal-content{max-height:95vh;width:95vw}.media-grid{gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.media-image-item img,.media-video-item video{height:120px}.media-audio-item,.media-document-item{min-height:60px;padding:10px}.audio-icon,.document-icon{font-size:1.5rem;margin-right:10px}}@media (max-width:480px){.media-grid{grid-template-columns:repeat(2,1fr)}}.reaction-message{background:#f8f9fa;border:1px solid #e9ecef;border-radius:12px;margin:8px 0;max-width:400px;padding:12px}.reaction-header{align-items:center;display:flex;margin-bottom:8px}.reaction-indicator{color:#6c757d;font-size:.85rem;font-weight:500}.reaction-content{display:flex;flex-direction:column;gap:12px}.reaction-emoji{align-items:center;background:#fff;border:1px solid #dee2e6;border-radius:8px;display:flex;justify-content:center;padding:8px}.emoji-text{font-size:2rem;line-height:1}.reaction-reference{background:#fff;border:1px solid #dee2e6;border-radius:8px;padding:12px}.reference-label{color:#6c757d;font-size:.8rem;font-weight:500;margin-bottom:8px}.reference-content{align-items:center;display:flex;gap:12px}.reference-media{align-items:center;display:flex;flex-direction:column;gap:8px}.reference-image img{border:1px solid #dee2e6;border-radius:8px}.reference-audio,.reference-file,.reference-video{align-items:center;background:#f8f9fa;border-radius:8px;display:flex;flex-direction:column;min-width:120px;padding:16px}.audio-placeholder,.file-placeholder,.video-placeholder{font-size:3rem;margin-bottom:8px}.media-type-label{color:#6c757d;font-size:.85rem;font-weight:500;text-align:center}.reference-text{flex:1}.quoted-text{background:#f8f9fa;border-left:3px solid #007bff;border-radius:4px;color:#495057;font-size:.9rem;font-style:italic;padding:8px 12px}@media (max-width:768px){.reaction-message{max-width:100%}.reference-image img{max-height:120px!important;max-width:120px!important}.emoji-text{font-size:1.5rem}}