.file-preview-container{background:linear-gradient(135deg,rgba(30,31,34,0.98) 0%,rgba(40,42,48,0.98) 100%);border:1px solid rgba(99,102,241,0.3);border-radius:12px;margin:8px 16px;padding:12px;animation:slideUp 0.3s ease;backdrop-filter:blur(10px);z-index:100;position:relative}.file-preview-container.hidden{display:none !important}.file-preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,0.1)}.file-preview-title{font-weight:600;color:#e5e7eb;display:flex;align-items:center;gap:8px}.file-preview-title i{color:#a3ea30}.file-preview-clear{background:rgba(239,68,68,0.2);border:none;color:#ef4444;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;transition:all 0.2s}.file-preview-clear:hover{background:rgba(239,68,68,0.3)}.file-preview-list{display:flex;flex-wrap:wrap;gap:8px;max-height:200px;overflow-y:auto}.file-preview-item{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.05);border-radius:8px;padding:8px;min-width:180px;max-width:250px;position:relative;transition:all 0.2s}.file-preview-item:hover{background:rgba(255,255,255,0.08)}.file-preview-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px;flex-shrink:0}.file-preview-icon{width:48px;height:48px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px}.file-preview-icon.video{background:linear-gradient(135deg,#8b5cf6 0%,#a3ea30 100%);color:white}.file-preview-icon.audio{background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:white}.file-preview-icon.file{background:linear-gradient(135deg,#6b7280 0%,#4b5563 100%);color:white}.file-preview-info{flex:1;min-width:0}.file-preview-name{font-size:13px;font-weight:500;color:#e5e7eb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-preview-size{font-size:11px;color:#9ca3af;margin-top:2px}.file-preview-remove{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:#ef4444;border:2px solid #1e1f22;color:white;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all 0.2s}.file-preview-item:hover .file-preview-remove{opacity:1}.file-preview-remove:hover{transform:scale(1.1)}.file-upload-progress{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.1)}.progress-bar-container{height:8px;background:rgba(255,255,255,0.1);border-radius:4px;overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,#a3ea30 0%,#8b5cf6 50%,#a3ea30 100%);background-size:200% 100%;border-radius:4px;width:0%;transition:width 0.3s ease;animation:progressShine 2s linear infinite}@keyframes progressShine{0%{background-position:200% 0}100%{background-position:-200% 0}}.progress-text{font-size:12px;color:#9ca3af;margin-top:8px;text-align:center}.error-text{color:#ef4444}.retry-btn{background:#a3ea30;border:none;color:#0b0e11;padding:4px 12px;border-radius:4px;margin-left:8px;cursor:pointer;font-size:12px}.retry-btn:hover{background:#8fd41a}.upload-success{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;color:#10b981;font-weight:500;animation:successPulse 0.5s ease}.upload-success i{font-size:24px}.compression-info{font-size:12px;color:#6b7280;margin-left:8px}@keyframes successPulse{0%{transform:scale(0.9);opacity:0}50%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}.message-attachments{margin-top:8px}.attachment-images{display:grid;gap:4px;border-radius:12px;overflow:hidden}.attachment-images.single{max-width:400px}.attachment-images.double{grid-template-columns:repeat(2,1fr);max-width:400px}.attachment-images.triple{grid-template-columns:repeat(3,1fr);max-width:450px}.attachment-images.grid{grid-template-columns:repeat(2,1fr);max-width:400px}.attachment-image{position:relative;cursor:pointer;overflow:hidden;border-radius:8px;background:rgba(0,0,0,0.2)}.attachment-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s ease;max-height:300px}.attachment-images.single .attachment-image img{max-height:400px;object-fit:contain;background:rgba(0,0,0,0.3)}.attachment-image:hover img{transform:scale(1.05)}.attachment-image-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.2s}.attachment-image:hover .attachment-image-overlay{opacity:1}.attachment-image-overlay i{color:white;font-size:24px}.attachment-video{max-width:450px;border-radius:12px;overflow:hidden;background:#000;margin-top:8px}.attachment-video video{width:100%;max-height:350px;display:block}.attachment-audio{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.05);border-radius:12px;padding:12px;max-width:350px;margin-top:8px}.audio-icon{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#10b981 0%,#059669 100%);display:flex;align-items:center;justify-content:center;color:white;font-size:18px;flex-shrink:0}.audio-info{flex:1;min-width:0}.audio-name{font-size:13px;font-weight:500;color:#e5e7eb;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attachment-audio audio{width:100%;height:32px}.attachment-file{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:12px;max-width:300px;margin-top:8px;text-decoration:none;transition:all 0.2s}.attachment-file:hover{background:rgba(255,255,255,0.08);border-color:rgba(99,102,241,0.3)}.file-icon{width:40px;height:40px;border-radius:8px;background:linear-gradient(135deg,#6b7280 0%,#4b5563 100%);display:flex;align-items:center;justify-content:center;color:white;font-size:16px;flex-shrink:0}.file-icon.pdf{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%)}.file-icon.doc,.file-icon.docx{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%)}.file-icon.xls,.file-icon.xlsx{background:linear-gradient(135deg,#10b981 0%,#059669 100%)}.file-icon.zip,.file-icon.rar{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%)}.file-info{flex:1;min-width:0}.file-name{font-size:13px;font-weight:500;color:#e5e7eb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:11px;color:#9ca3af;margin-top:2px}.file-download{width:32px;height:32px;border-radius:50%;background:rgba(163,234,48,0.2);display:flex;align-items:center;justify-content:center;color:#a3ea30;flex-shrink:0;transition:all 0.2s}.attachment-file:hover .file-download{background:#a3ea30;color:#0b0e11}.image-lightbox{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s ease}.image-lightbox.active{opacity:1}.lightbox-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.92);backdrop-filter:blur(10px)}.lightbox-sidebar{position:fixed;left:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;z-index:10;animation:sidebarSlideIn 0.3s ease 0.1s both}@keyframes sidebarSlideIn{from{opacity:0;transform:translateY(-50%) translateX(-20px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}.lightbox-action{display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.1);border-radius:12px;color:white;font-size:14px;cursor:pointer;transition:all 0.2s;text-decoration:none;min-width:120px}.lightbox-action:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.2);transform:translateX(4px)}.lightbox-action i{width:20px;text-align:center;font-size:16px}.lightbox-action.report{color:#f87171}.lightbox-action.report:hover{background:rgba(248,113,113,0.2);border-color:rgba(248,113,113,0.3)}.lightbox-content{position:relative;max-width:calc(90vw - 180px);max-height:90vh;display:flex;align-items:center;justify-content:center;margin-left:160px}.lightbox-image{max-width:100%;max-height:85vh;object-fit:contain;border-radius:8px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);animation:lightboxZoom 0.3s ease}@keyframes lightboxZoom{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}.lightbox-close{position:absolute;top:-50px;right:0;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.1);border:none;color:white;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s}.lightbox-close:hover{background:rgba(239,68,68,0.3);transform:scale(1.1)}.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,0.1);border:none;color:white;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;z-index:5}.lightbox-nav:hover{background:rgba(255,255,255,0.25);transform:translateY(-50%) scale(1.1)}.lightbox-nav.prev{left:-70px}.lightbox-nav.next{right:-60px}.lightbox-counter{position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.7);font-size:14px;background:rgba(0,0,0,0.5);padding:6px 16px;border-radius:20px}.file-preview-send{width:100%;margin-top:12px;padding:12px;background:linear-gradient(135deg,#a3ea30 0%,#8b5cf6 100%);border:none;border-radius:8px;color:white;font-weight:600;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all 0.2s}.file-preview-send:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(99,102,241,0.4)}.file-preview-send:active{transform:translateY(0)}@media (max-width:768px){.file-preview-container{margin:8px}.file-preview-item{min-width:150px;max-width:100%}.attachment-images.double,.attachment-images.triple,.attachment-images.grid{max-width:100%}.attachment-video,.attachment-audio,.attachment-file{max-width:100%}.lightbox-sidebar{position:fixed;left:50%;top:auto;bottom:20px;transform:translateX(-50%);flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px;max-width:calc(100vw - 40px)}.lightbox-action{padding:10px 14px;min-width:auto;font-size:12px}.lightbox-action span{display:none}.lightbox-content{margin-left:0;max-width:95vw;max-height:70vh}.lightbox-image{max-height:65vh}.lightbox-nav.prev{left:10px}.lightbox-nav.next{right:10px}.lightbox-close{top:10px;right:10px;position:fixed}.lightbox-counter{bottom:90px}}