/* extra utilities on top of Tailwind CDN */ /* ── Prevent ALL horizontal overflow on mobile ───────────────────────────── iOS Safari ignores overflow:hidden on alone — must also be on . max-width:100% prevents any child from stretching the page wider. */ html { overflow-x: hidden; max-width: 100%; } /* Message content: break long URLs and words at ANY character boundary. 'anywhere' is stronger than 'break-word' — it breaks mid-URL too. */ .msg-content { overflow-wrap: anywhere; word-break: break-word; } /* Audio player: Safari's native control has a hard minimum width that can blow past the bubble boundary. Constrain it. */ audio { width: 100%; max-width: 260px; display: block; } /* Images / videos: always stay within their container */ img, video { max-width: 100%; height: auto; } /* Conversation list rows: never wider than the pane */ .conv-row { max-width: 100%; overflow: hidden; } /* ── Scrollbar styling ─────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } .dark ::-webkit-scrollbar-thumb { background: #475569; } .dark ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* Body fills */ body { background: #f1f5f9; color: #0f172a; /* iOS Safari: use dynamic viewport height so the page doesn't overflow behind the address bar / home indicator. Falls back to 100vh on older browsers. */ height: 100vh; height: 100dvh; } .dark body { background: #0f172a; color: #e2e8f0; } /* Generic surface helpers used in pages */ .dark .bg-white { background: #1e293b !important; } .dark .bg-slate-50 { background: #0f172a !important; } .dark .bg-slate-100 { background: #0b1220 !important; } .dark .border, .dark .border-l, .dark .border-r, .dark .border-t, .dark .border-b { border-color: #334155 !important; } .dark .text-slate-500 { color: #94a3b8 !important; } .dark .text-slate-600 { color: #cbd5e1 !important; } .dark .text-slate-700, .dark .text-slate-800, .dark .text-slate-900 { color: #e2e8f0 !important; } .dark input, .dark textarea, .dark select { background: #0f172a; color: #e2e8f0; border-color: #334155; } .dark .hover\:bg-slate-50:hover { background: #1e293b !important; } .dark .bg-yellow-50 { background: #422006 !important; } .dark .bg-emerald-50 { background: #022c22 !important; } .dark .bg-red-50 { background: #450a0a !important; } .dark .bg-amber-50 { background: #451a03 !important; } /* Drag-and-drop overlay */ .drop-active::after { content: 'Drop to send'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(16,185,129,0.15); border: 3px dashed #10b981; border-radius: 8px; color: #047857; font-weight: 600; font-size: 1.5rem; pointer-events: none; z-index: 5; } /* Within-thread search highlight */ .search-hit { background: #fef08a; color: #713f12; } .dark .search-hit { background: #ca8a04; color: #fef9c3; } .search-current { outline: 2px solid #f59e0b; } /* Emoji picker */ .emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; } .emoji-grid button { font-size: 1.25rem; padding: 4px; border-radius: 4px; } .emoji-grid button:hover { background: #e2e8f0; } .dark .emoji-grid button:hover { background: #334155; } /* Toast for undo */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #1e293b; color: white; padding: 12px 16px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); display: flex; gap: 12px; align-items: center; z-index: 100; } /* Mobile: hide top nav bar when in active chat to maximise message space */ @media (max-width: 767px) { body.mobile-chat-open nav:first-of-type { display: none; } } /* Contact panel — full-screen overlay for mobile/tablet (below lg=1024px) */ @media (max-width: 1023px) { #contact-panel.mobile-open { display: block !important; position: fixed; inset: 0; width: 100%; z-index: 40; overflow-y: auto; border-left: none; } } /* Composer extras row: always shown on desktop. On mobile: hidden by default, revealed when .mobile-expanded is toggled by the + button. */ #composer-extras { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; } @media (max-width: 767px) { #composer-extras { display: none; } #composer-extras.mobile-expanded { display: flex; } }