body, html { height: 100%; margin: 0; font-family: -apple-system, sans-serif; overflow: hidden; background: #e5ddd5; }

/* MODAL & DROPZONE */
#file-modal, #drop-zone { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; }
.modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(5px); }
.modal-content-wrapper { position: relative; width: 90%; height: 80%; z-index: 10; }
.modal-close-btn { position: absolute; top: -45px; right: 0; background: none; border: none; font-size: 2rem; }
#modal-body { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
#modal-body img, #modal-body iframe { max-width: 100%; max-height: 100%; border-radius: 8px; background: white; }
#drop-zone { background: rgba(7, 94, 84, 0.85); border: 4px dashed white; margin: 15px; border-radius: 20px; z-index: 5000; }

/* CHAT AREA */
.main-header { height: 60px; background: #075e54; color: white; display: flex; justify-content: space-between; align-items: center; position: fixed; width: 100%; top: 0; z-index: 100; }
#chat-window { height: 100vh; padding: 70px 12px 140px 12px; overflow-y: auto; background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png'); display: flex; flex-direction: column; scroll-behavior: smooth; }

/* BUBBLE LOGIC */
.message-row { display: flex; margin-bottom: 12px; width: 100%; align-items: flex-end; }
.message-row.sent { justify-content: flex-end; }
.message-row.received { justify-content: flex-start; }
.user-tag { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; color: white; flex-shrink: 0; }
.sent .user-tag { background: #25d366; margin-left: 8px; order: 2; }
.received .user-tag { background: #007bff; margin-right: 8px; order: 1; }
.bubble { padding: 8px 12px; border-radius: 12px; max-width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,0.1); width: fit-content; order: 1; }
.sent .bubble { background: #dcf8c6; border-top-right-radius: 2px; }
.received .bubble { background: #ffffff; border-top-left-radius: 2px; }

/* FOOTER & PROGRESS */
.footer-area { position: fixed; bottom: 0; width: 100%; background: #f0f2f5; z-index: 200; border-top: 1px solid #ddd; }
#upload-progress-container { position: fixed; bottom: 75px; width: 100%; z-index: 150; }
.input-wrapper { background: white; border-radius: 25px; padding: 2px 10px; }
.send-btn { width: 48px; height: 48px; border-radius: 50%; border: none; }
.reply-quote { background: rgba(0,0,0,0.05); border-left: 4px solid #075e54; padding: 4px 8px; border-radius: 5px; margin-bottom: 5px; font-size: 0.8rem; cursor: pointer; }
.highlight-msg { background-color: rgba(37, 211, 102, 0.4) !important; border-radius: 10px; }
.time-stamp { font-size: 9px; color: #888; text-align: right; display: block; margin-top: 2px; }