:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}/* Removed conflicting Vite default body styles */h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--bg: #f6f7fb;--card: #ffffff;--text: #0f172a;--muted: #6b7280;--border: #e5e7eb;--accent: #0ea5e9;--success: #10b981;--danger: #ef4444;--warning: #f59e0b;--radius: 16px;--shadow: 0 10px 30px rgba(15, 23, 42, .08);--shadow-lg: 0 20px 40px rgba(15, 23, 42, .12)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}.app{min-height:100vh}.container{max-width:1040px;margin:28px auto;padding:0 16px}.room-interface .container{max-width:none;margin:0;padding:16px;height:100vh;display:flex;flex-direction:column}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}.row{display:flex;gap:16px}.center{display:flex;align-items:center;justify-content:center}.muted{color:var(--muted)}.header{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);margin-bottom:16px;border-radius:var(--radius)}.header-content{display:flex;justify-content:space-between;align-items:center;padding:16px 20px}.logo{display:flex;align-items:center}.logo-container{display:flex;align-items:center;gap:12px}.logo-text h1{font-size:1.5rem;font-weight:800;color:var(--text);margin:0;letter-spacing:.2px}.logo-icon{color:var(--accent)}.tagline{font-size:12px;color:var(--muted);font-weight:400;margin:0;letter-spacing:.05em}.tag{display:inline-block;background:#f1f5f9;border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--muted);font-weight:500}.back-btn{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);padding:8px 12px;border-radius:12px;cursor:pointer;font-size:.9rem;color:var(--text);transition:all .2s;text-decoration:none}.back-btn:hover{background:#f9fafb;color:var(--accent)}.btn{appearance:none;border:none;background:var(--accent);color:#fff;border-radius:12px;padding:12px 18px;font-weight:600;cursor:pointer;box-shadow:0 6px 18px #0ea5e940;transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px}.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 24px #0ea5e959}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn.secondary{background:#fff;color:var(--text);border:1px solid var(--border);box-shadow:none}.btn.secondary:hover:not(:disabled){background:#f9fafb;border-color:#cbd5e1;box-shadow:0 4px 12px #0f172a14}.btn.ghost{background:#fff;color:var(--text);border:1px solid var(--border);box-shadow:none}.btn.ghost:hover:not(:disabled){background:#f9fafb}.btn.danger{background:var(--danger);box-shadow:0 6px 18px #ef444440}.btn.danger:hover:not(:disabled){box-shadow:0 8px 24px #ef444459}.btn.success{background:var(--success);box-shadow:0 6px 18px #10b98140}.btn.success:hover:not(:disabled){box-shadow:0 8px 24px #10b98159}.input,.form-input,select{width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff;outline:none;font-size:14px;color:var(--text);transition:all .2s}.input:focus,.form-input:focus,select:focus{border-color:#cbd5e1;box-shadow:0 0 0 4px #94a3b840}.input::placeholder,.form-input::placeholder{color:var(--muted)}.form-group{margin-bottom:16px}.form-group label{display:block;font-weight:600;margin-bottom:6px;color:var(--text);font-size:14px}.landing-page{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem 0}.hero{text-align:center;max-width:720px;width:100%}.hero-content h2{font-size:2.5rem;margin-bottom:8px;color:var(--text);font-weight:700;letter-spacing:-.025em}.hero-description{font-size:1.1rem;color:var(--muted);margin-bottom:32px;line-height:1.6}.create-room-btn{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border:none;padding:16px 32px;font-size:18px;border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 20px #2563eb59;margin-bottom:32px;font-weight:600;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.2)}.create-room-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#1d4ed8,#1e40af);opacity:0;transition:opacity .3s ease}.create-room-btn:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .6s}.create-room-btn:hover:not(:disabled){transform:scale(1.05) translateY(-3px);box-shadow:0 16px 40px #2563eb80}.create-room-btn:hover:not(:disabled):before{opacity:1}.create-room-btn:hover:not(:disabled):after{left:100%}.create-room-btn:active{transform:scale(1.02) translateY(-1px)}.create-room-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.features-grid{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:22px}.feature{display:flex;align-items:center;gap:8px;background:#f1f5f9;border:1px solid var(--border);border-radius:999px;padding:8px 16px;font-size:14px;color:var(--muted);font-weight:500}.feature-icon{width:16px;height:16px;color:var(--accent)}.join-section{padding-top:32px;border-top:1px solid var(--border);margin-top:32px}.join-divider{position:relative;margin:24px 0;text-align:center}.join-divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:.5px;background:#e0e0e0}.join-divider span{background:var(--bg);padding:0 16px;color:#a0a0a0;position:relative;font-weight:400;font-size:12px;text-transform:lowercase}.join-section p{color:var(--text);font-size:1rem;margin-bottom:16px;font-weight:500}.join-form{display:flex;gap:12px;justify-content:center;align-items:center}.join-input{padding:12px 16px;border:1px solid var(--border);border-radius:12px;font-size:1rem;text-align:center;text-transform:uppercase;letter-spacing:3px;width:180px;font-family:Courier New,monospace;font-weight:600;background:#fff;color:var(--text)}.join-input:focus{outline:none;border-color:#cbd5e1;box-shadow:0 0 0 4px #94a3b840}.join-btn{background:var(--accent);color:#fff;border:none;padding:12px 18px;border-radius:12px;cursor:pointer;transition:all .2s;font-weight:600;font-size:14px}.join-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px #0ea5e940}.join-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.footer{text-align:center;padding:32px 0;color:var(--muted);font-size:14px;font-weight:500}.room-creation{min-height:100vh;background:var(--bg)}.room-creation-content{display:flex;flex-direction:column;gap:20px}.success-header{text-align:center;margin-bottom:24px}.success-icon{font-size:3rem;margin-bottom:16px}.success-header h2{font-size:2rem;margin-bottom:8px;color:var(--text);font-weight:700}.success-header p{color:var(--muted);font-size:1.1rem}.room-info-section{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}.qr-section{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start}.qr-container{display:flex;justify-content:center;flex-direction:column;align-items:center;gap:12px}.qr-container canvas{border:2px solid var(--border);border-radius:12px}.room-details{display:flex;flex-direction:column;gap:20px}.room-code-display label,.link-container label{display:block;font-weight:600;margin-bottom:6px;color:var(--text);font-size:14px}.code-container{display:flex;align-items:center;gap:12px}.room-code{font-family:Courier New,monospace;font-size:1.8rem;font-weight:700;color:var(--accent);letter-spacing:3px}.link-input-container{display:flex;gap:8px}.link-input{flex:1;padding:12px;border:1px solid var(--border);border-radius:12px;background:#f9fafb;color:var(--muted);font-size:14px}.copy-btn{background:var(--accent);color:#fff;border:none;padding:12px 16px;border-radius:12px;cursor:pointer;transition:all .2s;font-weight:500;display:flex;align-items:center;gap:6px;font-size:14px}.copy-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px #0ea5e940}.room-status{display:flex;gap:16px;align-items:center}.status-item{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:14px;font-weight:500}.enter-room-section{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;text-align:center}.nickname-input{margin-bottom:20px}.nickname-input label{display:block;font-weight:600;margin-bottom:8px;color:var(--text);font-size:14px}.nickname-field{width:100%;max-width:300px;padding:12px;border:1px solid var(--border);border-radius:12px;font-size:14px;text-align:center;background:#fff}.nickname-field:focus{outline:none;border-color:#cbd5e1;box-shadow:0 0 0 4px #94a3b840}.enter-room-btn{background:var(--success);color:#fff;border:none;padding:12px 24px;font-size:16px;border-radius:12px;cursor:pointer;transition:all .2s;font-weight:600}.enter-room-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px #10b98140}.enter-room-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.room-settings{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}.settings-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;color:var(--text)}.settings-header h3{font-size:1.1rem;font-weight:600;margin:0}.settings-grid{display:flex;flex-direction:column;gap:20px}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background:#f9fafb;border:1px solid var(--border);border-radius:12px}.setting-header{display:flex;align-items:center;gap:12px;color:var(--text);font-weight:500;font-size:14px}.toggle{position:relative;display:inline-block;width:44px;height:24px}.toggle input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background-color:#cbd5e1;transition:.3s;border-radius:24px}.toggle-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.3s;border-radius:50%;box-shadow:0 2px 4px #0003}.toggle input:checked+.toggle-slider{background-color:var(--accent)}.toggle input:checked+.toggle-slider:before{transform:translate(20px)}.password-input-section{margin-top:16px}.password-input{width:100%;max-width:300px;padding:12px;border:1px solid var(--border);border-radius:12px;margin-bottom:8px;background:#fff}.password-input-section small{color:var(--muted);font-size:12px}.expiry-select{padding:8px 12px;border:1px solid var(--border);border-radius:12px;background:#fff;cursor:pointer;font-size:14px}.settings-info{margin-top:20px;padding:16px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px}.settings-info p{color:#1e40af;font-size:14px;margin:0}.room-interface{height:100vh;display:flex;flex-direction:column;background:var(--bg);padding:0;margin:0}.room-header{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);margin-bottom:16px;border-radius:var(--radius);padding:16px 20px;display:flex;justify-content:space-between;align-items:center}.header-info{display:flex;flex-direction:column;gap:8px}.room-title{display:flex;align-items:center;gap:12px;font-size:1.25rem;font-weight:600;color:var(--text)}.room-status{display:flex;gap:16px;font-size:14px;color:var(--muted)}.leave-btn{background:#f87171;color:#fff;border:none;padding:8px 16px;border-radius:12px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:6px;font-weight:500;font-size:14px}.leave-btn:hover{background:#ef4444;transform:translateY(-1px);box-shadow:0 8px 20px #ef44444d}.room-main{flex:1;display:flex;gap:16px;height:calc(100vh - 100px);min-height:0}.chat-section{flex:2;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);position:relative}.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.chat-messages.dragging{background:#0ea5e90d;border:2px dashed var(--accent);border-radius:12px}.drop-overlay{position:absolute;inset:0;background:linear-gradient(135deg,#2563eb26,#1d4ed826);border:3px dashed #2563eb;display:flex;align-items:center;justify-content:center;z-index:10;pointer-events:none;border-radius:var(--radius);animation:pulse-border 2s infinite}@keyframes pulse-border{0%,to{border-color:#2563eb;background:linear-gradient(135deg,#2563eb26,#1d4ed826)}50%{border-color:#1d4ed8;background:linear-gradient(135deg,#2563eb40,#1d4ed840)}}.drop-content{text-align:center;color:var(--accent)}.drop-content p{font-size:1.1rem;font-weight:600;margin-top:12px}.message.system .system-message{text-align:center;color:var(--muted);font-style:italic;font-size:12px;padding:8px;background:#f9fafb;border-radius:12px;display:flex;justify-content:center;gap:8px}.chat-message{max-width:70%;align-self:flex-start}.chat-message.own{align-self:flex-end}.message-header{display:flex;justify-content:space-between;margin-bottom:4px;font-size:12px;color:var(--muted)}.message-content{background:#f9fafb;border:1px solid var(--border);padding:12px 16px;border-radius:14px;word-wrap:break-word;font-size:14px}.chat-message.own .message-content{background:#e6f6ff;border-color:#cfefff}.file-message{background:#f9fafb;border:1px solid var(--border);padding:16px;border-radius:14px;display:flex;justify-content:space-between;align-items:center}.chat-message.own .file-message{background:#e6f6ff;border-color:#cfefff}.file-info{display:flex;align-items:center;gap:12px}.file-icon{width:32px;height:32px;border-radius:8px;background:#e2e8f0;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted)}.file-details{display:flex;flex-direction:column}.file-name{font-weight:600;margin-bottom:4px;color:var(--text);font-size:14px}.file-size{font-size:12px;color:var(--muted)}.download-btn{background:var(--success);color:#fff;border:none;padding:8px 12px;border-radius:8px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500}.download-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #10b98140}.chat-input{padding:16px;background:var(--card);border-top:1px solid var(--border);border-radius:0 0 var(--radius) var(--radius)}.input-container{display:flex;gap:8px;align-items:flex-end}.message-input{flex:1;padding:12px;border:1px solid var(--border);border-radius:12px;font-family:inherit;font-size:14px;resize:none;min-height:44px;max-height:120px;background:#fff;color:var(--text)}.message-input:focus{outline:none;border-color:#cbd5e1;box-shadow:0 0 0 4px #94a3b840}.attach-btn,.send-btn{background:var(--accent);color:#fff;border:none;padding:12px;border-radius:12px;cursor:pointer;transition:all .2s;min-width:44px;height:44px;display:flex;align-items:center;justify-content:center}.attach-btn:hover,.send-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px #0ea5e940}.send-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.sidebar{flex:1;display:flex;flex-direction:column;gap:16px}.sidebar-section{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.sidebar-section h3{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:1rem;color:var(--text);font-weight:600}.qr-mini{display:flex;justify-content:center;margin-bottom:16px}.qr-mini canvas{border:1px solid var(--border);border-radius:12px}.copy-link-btn{width:100%;background:var(--accent);color:#fff;border:none;padding:10px;border-radius:12px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:500;font-size:14px}.copy-link-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px #0ea5e940}.members-list{display:flex;flex-direction:column;gap:8px}.member{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f9fafb;border:1px solid var(--border);border-radius:12px;font-size:14px;color:var(--text)}.member.you{background:#e6f6ff;border-color:#cfefff;color:var(--accent);font-weight:500}.member-status{color:var(--success);font-size:12px}.control-buttons{display:flex;flex-direction:column;gap:8px}.control-btn{width:100%;padding:12px;border:none;border-radius:12px;cursor:pointer;font-size:14px;transition:all .2s;background:#f3f4f6;color:var(--text);border:1px solid var(--border);display:flex;align-items:center;gap:8px;justify-content:center;font-weight:500}.control-btn:hover{background:#e5e7eb;transform:translateY(-1px)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);max-width:400px;width:90%;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--border)}.modal-header h3{font-size:1.25rem;font-weight:600;color:var(--text);margin:0}.modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--muted);padding:4px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .2s}.modal-close:hover{background:#f3f4f6;color:var(--text)}@media (max-width: 860px){.modal-close{width:40px;height:40px;font-size:1.8rem;background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px}.modal-close:hover{background:#e5e7eb;color:#374151}}.modal-body{padding:20px}.modal-footer{display:flex;gap:12px;padding:20px;border-top:1px solid var(--border)}.btn-secondary{flex:1;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--text);cursor:pointer;transition:all .2s;font-weight:500;font-size:14px}.btn-secondary:hover:not(:disabled){background:#f9fafb;transform:translateY(-1px)}.btn-primary{flex:1;padding:12px;border:none;border-radius:12px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;cursor:pointer;transition:all .2s;font-weight:500;font-size:14px;box-shadow:0 4px 12px #2563eb4d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px #2563eb66;background:linear-gradient(135deg,#1d4ed8,#1e40af)}.btn-secondary:disabled,.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.toast{position:fixed;right:16px;bottom:16px;background:#111827;color:#fff;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(8px);transition:all .3s ease;z-index:1001;max-width:400px;width:90%;font-size:14px;font-weight:500}.toast.show{opacity:1;transform:translateY(0)}.toast-content{display:flex;align-items:center;gap:12px}.toast-icon{flex-shrink:0}.toast-message{flex:1;font-weight:500}.toast-close{background:none;border:none;font-size:1.25rem;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#ffffffb3;border-radius:4px;transition:all .2s}.toast-close:hover{background:#ffffff1a;color:#fff}.toast-success{background:var(--success)}.toast-error{background:var(--danger)}.toast-warning{background:var(--warning)}.toast-info{background:var(--accent)}.features-responsive-grid{grid-template-columns:repeat(4,1fr)!important;gap:24px!important;max-width:800px!important;margin:0 auto!important}.features-responsive-grid>div{max-width:220px;margin:0 auto}@media (max-width: 768px){.features-responsive-grid{grid-template-columns:repeat(2,1fr)!important;gap:24px!important;max-width:500px!important}}@media (max-width: 480px){.features-responsive-grid{grid-template-columns:1fr!important;gap:20px!important;max-width:280px!important}}@media (max-width: 860px){.room-interface .room-header{margin-bottom:12px}.sidebar{order:-1;display:block!important}.sidebar-section{padding:12px}.sidebar-section h3{background:#f8fafc!important;border:1px solid #e5e7eb!important;padding:8px 12px!important;border-radius:8px!important;margin-bottom:8px!important;cursor:pointer!important}.sidebar-section h3:after{content:" ▼"!important;float:right!important}.qr-mini{display:block!important;background:#fff!important;padding:12px!important;border:2px solid #007bff!important;border-radius:12px!important;margin-bottom:12px!important}.qr-mini canvas{width:120px!important;height:120px!important;margin:0 auto!important;display:block!important}.copy-link-btn{margin-top:8px!important;padding:6px 12px!important;font-size:12px!important}}@media (max-width: 860px){.row.stack{flex-direction:column}.container{margin:16px auto;padding:0 12px}.room-interface .container{padding:12px;height:100vh}.room-main{flex-direction:column;height:calc(100vh - 120px);gap:12px}.sidebar{flex:none}.chat-section{height:65vh;min-height:400px}.qr-section{grid-template-columns:1fr;gap:16px;text-align:center}.header-content,.room-header{flex-direction:column;gap:12px;align-items:flex-start}.room-status{flex-direction:column;gap:8px;align-items:flex-start}.input-container{flex-wrap:wrap}.message-input{min-width:100%;margin-bottom:8px}.attach-btn,.send-btn{flex:1}.join-form{flex-direction:column;align-items:center}.join-input{width:200px}.features-grid{flex-direction:column;align-items:center}}@media (max-width: 480px){.modal{width:95%}.modal-footer{flex-direction:column}.hero-content h2{font-size:2rem}.create-room-btn{width:100%;max-width:300px}.container{margin:12px auto;padding:0 8px}}.hr{height:1px;background:var(--border);margin:16px 0;border:none}

/* EMERGENCY UNIVERSAL OVERRIDE - NO MEDIA QUERIES NEEDED */
html .chat-message .message-content,
body .chat-message .message-content,
div .chat-message .message-content,
* .chat-message * .message-content {
  padding: 8px 12px !important;
  font-size: 14px !important;
  background: #f1f1f1 !important;
  border-radius: 16px !important;
  max-width: 85% !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
  border: 1px solid #e0e0e0 !important;
  color: #333 !important;
}

/* MOBILE FIXES - iPhone 11 = 414px, so use 450px to be safe */
@media screen and (max-width: 450px) {
  .chat-message .message-content,
  .message-bubble {
    max-width: 85% !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
  }

  /* Fix username and timestamp layout */
  .message-header {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
  }

  .message-header span {
    margin-right: 8px !important;
  }

  /* Fix input button sizes */
  .chat-input-button,
  .attach-btn,
  .send-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    font-size: 18px !important;
  }

  .chat-input-text,
  .message-input {
    font-size: 14px !important;
  }

  /* Add mobile header with Leave button */
  .mobile-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: var(--card) !important;
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--border) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
  }

  .mobile-leave-btn {
    background: #f87171 !important;
    color: #fff !important;
    border: none !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    cursor: pointer !important;
  }

  .mobile-room-id {
    font-weight: 600 !important;
    color: var(--text) !important;
    font-size: 16px !important;
  }

  /* QR Code accordion for mobile */
  .qr-accordion {
    display: block !important;
  }

  .qr-accordion summary {
    background: #007bff !important;
    color: white !important;
    padding: 12px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    list-style: none !important;
  }

  .qr-accordion summary::-webkit-details-marker {
    display: none !important;
  }

  .qr-accordion[open] summary {
    border-radius: 8px 8px 0 0 !important;
  }

  .qr-accordion-content {
    background: white !important;
    padding: 16px !important;
    border: 2px solid #007bff !important;
    border-radius: 0 0 8px 8px !important;
    text-align: center !important;
  }

  .qr-accordion canvas {
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto 12px auto !important;
    display: block !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
  }

  .qr-copy-btn {
    background: #007bff !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    cursor: pointer !important;
  }

  /* Mobile control buttons layout */
  .mobile-controls {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-top: 8px !important;
  }

  .mobile-control-btn {
    flex: 1 !important;
    min-width: calc(50% - 4px) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    background: #f3f4f6 !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    text-align: center !important;
  }

  .mobile-control-btn.clear-messages {
    background: #ef4444 !important;
    color: white !important;
    border-color: #ef4444 !important;
  }

  /* System messages styling */
  .system-message,
  .message.system .system-message {
    text-align: center !important;
    font-size: 12px !important;
    color: #666 !important;
    margin: 10px 0 !important;
    padding: 8px !important;
    background: #f0f0f0 !important;
    border-radius: 12px !important;
    font-style: italic !important;
    display: block !important;
    width: 100% !important;
  }

  /* Members section layout fixes */
  .members-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .member {
    padding: 6px 8px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }

  .member.you {
    background: #e0f7fa !important;
    border-color: #b2ebf2 !important;
    color: #006064 !important;
    font-weight: 600 !important;
  }

  .member.you::before {
    content: "🧍‍♂️ ";
  }
}

/* Fix message bubble colors - separate "You" vs "Others" */
html .chat-message.own .message-content,
body .chat-message.own .message-content,
div .chat-message.own .message-content,
* .chat-message.own * .message-content {
  background: #e0f7fa !important;
  color: #006064 !important;
  border: 1px solid #b2ebf2 !important;
}

/* Others' messages - different color */
html .chat-message:not(.own) .message-content,
body .chat-message:not(.own) .message-content,
div .chat-message:not(.own) .message-content,
* .chat-message:not(.own) * .message-content {
  background: #f1f1f1 !important;
  color: #333 !important;
  border: 1px solid #e0e0e0 !important;
}

/* Additional mobile improvements - match iPhone sizes */
@media screen and (max-width: 450px) {
  /* Smooth scrolling for chat */
  .chat-messages {
    scroll-behavior: smooth !important;
  }

  /* Loading spinner */
  .loading-spinner {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #f3f3f3 !important;
    border-top: 2px solid #007bff !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* Toast notifications */
  .toast-mobile {
    position: fixed !important;
    bottom: 80px !important;
    left: 16px !important;
    right: 16px !important;
    background: #333 !important;
    color: white !important;
    padding: 12px !important;
    border-radius: 8px !important;
    z-index: 1000 !important;
    font-size: 14px !important;
    text-align: center !important;
  }
}

/* UNIVERSAL MOBILE FIXES - Apply to ALL mobile devices */
@media screen and (max-width: 767px) {
  /* Force mobile layout for tablets too */
  .room-main {
    flex-direction: column !important;
    height: auto !important;
  }

  .sidebar {
    order: -1 !important;
    display: block !important;
    flex: none !important;
  }

  .chat-section {
    height: 60vh !important;
    min-height: 300px !important;
  }
}

/* FORCE QR CODE SMALLER */
html canvas,
body canvas,
div canvas,
.qr-mini canvas,
.qr-container canvas {
  max-width: 120px !important;
  max-height: 120px !important;
  width: 120px !important;
  height: 120px !important;
}

/* MOBILE QR CODE VISIBILITY FIX - Force display on mobile */
@media screen and (max-width: 767px) {
  .qr-mini,
  .qr-container,
  .sidebar-section:has(.qr-mini),
  [class*="qr"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #ffffff !important;
    border: 2px solid #007bff !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 12px 0 !important;
    text-align: center !important;
  }

  .qr-mini canvas,
  .qr-container canvas {
    display: block !important;
    visibility: visible !important;
    width: 140px !important;
    height: 140px !important;
    max-width: 140px !important;
    max-height: 140px !important;
    margin: 0 auto !important;
    border: 1px solid #ddd !important;
  }

  /* Force copy link button to show */
  .copy-link-btn,
  [class*="copy"] button {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    background: #007bff !important;
    color: white !important;
    padding: 10px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    margin-top: 12px !important;
  }
}

/* OVERRIDE EXISTING MOBILE CSS CONFLICTS - SUPER AGGRESSIVE */
@media screen and (max-width: 767px), screen and (max-device-width: 767px) {
  /* Override the original @media (max-width: 860px) rules */
  .qr-mini {
    display: block !important;
    background: #ffffff !important;
    padding: 20px !important;
    border: 3px solid #ff0000 !important;
    border-radius: 16px !important;
    margin: 16px auto !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  }

  .qr-mini canvas {
    display: block !important;
    visibility: visible !important;
    width: 160px !important;
    height: 160px !important;
    max-width: 160px !important;
    max-height: 160px !important;
    margin: 0 auto 16px auto !important;
    border: 2px solid #333 !important;
    border-radius: 12px !important;
  }

  /* Force sidebar sections to be visible */
  .sidebar-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #f9f9f9 !important;
    border: 2px solid #007bff !important;
    margin-bottom: 16px !important;
  }

  /* Make sure room controls are visible */
  .control-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .control-btn {
    flex: 1 !important;
    min-width: calc(50% - 4px) !important;
    display: flex !important;
    background: #007bff !important;
    color: white !important;
    padding: 12px 8px !important;
    text-align: center !important;
    font-size: 13px !important;
  }

  /* Force copy button visible */
  .copy-link-btn {
    display: block !important;
    visibility: visible !important;
    background: #28a745 !important;
    color: white !important;
    width: 100% !important;
    padding: 12px !important;
    margin-top: 12px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: bold !important;
  }
}

/* iOS SAFARI SPECIFIC FIXES - iPhone 11 and similar */
@media screen and (max-width: 430px) and (-webkit-min-device-pixel-ratio: 2) {
  /* iPhone specific QR Code styling */
  .qr-mini {
    display: block !important;
    background: #ffffff !important;
    padding: 24px !important;
    border: 4px solid #007bff !important;
    border-radius: 20px !important;
    margin: 20px 0 !important;
    text-align: center !important;
    box-shadow: 0 8px 24px rgba(0,123,255,0.3) !important;
  }

  .qr-mini::before {
    content: "📱 QR Code for Mobile" !important;
    display: block !important;
    color: #007bff !important;
    font-weight: bold !important;
    margin-bottom: 12px !important;
    font-size: 16px !important;
  }

  .qr-mini canvas {
    display: block !important;
    width: 180px !important;
    height: 180px !important;
    margin: 0 auto !important;
    border: 3px solid #333 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
  }
}

/* ANDROID CHROME SPECIFIC */
@media screen and (max-width: 450px) and (min-resolution: 2dppx) {
  .qr-mini {
    background: #e8f4fd !important;
    border: 3px dashed #007bff !important;
  }
}

/* COMPREHENSIVE MOBILE DEVICE BREAKPOINTS */

/* iPhone SE (375x667) */
@media screen and (max-width: 375px) {
  .qr-mini canvas { width: 140px !important; height: 140px !important; }
}

/* iPhone 12 Mini (375x812), iPhone 13 Mini */
@media screen and (max-width: 375px) and (min-height: 750px) {
  .chat-section { height: 55vh !important; }
}

/* iPhone 12/13/14 (390x844) */
@media screen and (max-width: 390px) and (min-height: 800px) {
  .qr-mini canvas { width: 150px !important; height: 150px !important; }
}

/* iPhone 11 (414x896), iPhone XR */
@media screen and (max-width: 414px) and (min-height: 850px) {
  .qr-mini canvas { width: 160px !important; height: 160px !important; }
}

/* iPhone 12 Pro Max (428x926), iPhone 13/14 Pro Max */
@media screen and (max-width: 428px) and (min-height: 900px) {
  .qr-mini canvas { width: 170px !important; height: 170px !important; }
}

/* Samsung Galaxy S8/S9 (360x740) */
@media screen and (max-width: 360px) and (min-height: 640px) {
  .qr-mini { padding: 16px !important; }
  .qr-mini canvas { width: 130px !important; height: 130px !important; }
}

/* Samsung Galaxy S10/S20/S21 (412x869) */
@media screen and (max-width: 412px) and (min-height: 820px) {
  .qr-mini canvas { width: 155px !important; height: 155px !important; }
}

/* Google Pixel (411x731) */
@media screen and (max-width: 411px) and (min-height: 700px) and (max-height: 750px) {
  .qr-mini canvas { width: 150px !important; height: 150px !important; }
}

/* iOS SAFARI SPECIFIC FIXES */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari detected */
  .qr-mini {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
  }

  .qr-mini canvas {
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
  }

  /* Fix iOS safe area */
  .room-interface {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
  }

  /* Fix iOS viewport height bug */
  .chat-section {
    height: -webkit-fill-available !important;
    min-height: 300px !important;
  }
}

/* ANDROID CHROME SPECIFIC FIXES */
@media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 450px) {
  /* Android Chrome detected */
  .qr-mini {
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  .qr-mini canvas {
    image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;
  }

  /* Fix Android keyboard overlay */
  @media (max-height: 500px) {
    .chat-section { height: 40vh !important; }
    .sidebar { max-height: 200px !important; overflow-y: auto !important; }
  }
}

/* FIREFOX MOBILE SPECIFIC FIXES */
@-moz-document url-prefix() {
  @media (max-width: 450px) {
    .qr-mini canvas {
      image-rendering: -moz-crisp-edges !important;
    }

    .chat-messages {
      scrollbar-width: thin !important;
      scrollbar-color: #007bff transparent !important;
    }
  }
}

/* SAMSUNG INTERNET BROWSER */
@media screen and (max-width: 450px) {
  .qr-mini {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }
}

/* MOBILE TOUCH OPTIMIZATION */
@media (max-width: 767px) {
  /* Ensure minimum 44x44px touch targets (Apple HIG standard) */
  .btn, .control-btn, .copy-link-btn, .attach-btn, .send-btn,
  .join-btn, .enter-room-btn, .leave-btn, .mobile-leave-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0,123,255,0.3) !important;
    cursor: pointer !important;
  }

  /* Improve button spacing for fat fingers */
  .control-buttons > * {
    margin: 4px 0 !important;
  }

  .input-container {
    gap: 12px !important;
  }

  /* Make QR Code tappable area larger */
  .qr-mini {
    min-height: 44px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0,123,255,0.2) !important;
  }

  /* Improve text input experience */
  .message-input, .join-input, .nickname-field {
    min-height: 44px !important;
    font-size: 16px !important; /* Prevent zoom on iOS */
    -webkit-appearance: none !important;
    border-radius: 12px !important;
    touch-action: manipulation !important;
  }

  /* Prevent accidental selections */
  .chat-messages {
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  /* Improve scrolling performance */
  .sidebar {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
}

/* LANDSCAPE ORIENTATION SUPPORT */
@media screen and (max-width: 767px) and (orientation: landscape) {
  .room-interface {
    height: 100vh !important;
  }

  .room-main {
    flex-direction: row !important;
    height: calc(100vh - 60px) !important;
  }

  .sidebar {
    order: 0 !important;
    flex: 0 0 250px !important;
    max-height: 100% !important;
    overflow-y: auto !important;
  }

  .chat-section {
    flex: 1 !important;
    height: 100% !important;
  }

  .qr-mini canvas {
    width: 100px !important;
    height: 100px !important;
  }

  /* Adjust for landscape keyboards */
  @media (max-height: 450px) {
    .sidebar { flex: 0 0 200px !important; }
    .qr-mini { padding: 8px !important; }
    .qr-mini canvas { width: 80px !important; height: 80px !important; }
  }
}

/* PORTRAIT ORIENTATION (default) */
@media screen and (max-width: 767px) and (orientation: portrait) {
  .room-main {
    flex-direction: column !important;
  }

  .sidebar {
    order: -1 !important;
    flex: none !important;
  }

  .chat-section {
    flex: 1 !important;
    height: 60vh !important;
  }
}

/* ACCESSIBILITY IMPROVEMENTS */
@media (max-width: 767px) {
  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .qr-mini {
      border: 4px solid #000 !important;
      background: #fff !important;
    }

    .copy-link-btn {
      background: #000 !important;
      color: #fff !important;
      border: 2px solid #fff !important;
    }
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .btn, .control-btn, .copy-link-btn {
      transition: none !important;
      animation: none !important;
    }

    .chat-messages {
      scroll-behavior: auto !important;
    }
  }

  /* Dark mode support */
  @media (prefers-color-scheme: dark) {
    .qr-mini {
      background: #1a1a1a !important;
      border-color: #007bff !important;
      color: #fff !important;
    }

    .qr-mini canvas {
      filter: invert(1) !important;
      border-color: #666 !important;
    }
  }

  /* Focus indicators for keyboard navigation */
  .btn:focus, .control-btn:focus, .copy-link-btn:focus,
  .message-input:focus, .join-input:focus {
    outline: 3px solid #007bff !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0,123,255,0.3) !important;
  }

  /* Large text support */
  @media (min-resolution: 2dppx) and (max-width: 450px) {
    .qr-mini canvas {
      image-rendering: pixelated !important;
      image-rendering: crisp-edges !important;
    }
  }
}

/* PERFORMANCE OPTIMIZATIONS FOR MOBILE */
@media (max-width: 767px) {
  /* Enable hardware acceleration */
  .qr-mini, .chat-messages, .sidebar {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform !important;
  }

  /* Optimize repaints */
  .chat-message, .member, .control-btn {
    contain: layout style paint !important;
  }

  /* Reduce composite layers */
  .modal, .toast {
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }
}

/* FINAL MOBILE DEBUG INDICATOR */
@media (max-width: 767px) {
  body::after {
    content: "✅ Mobile Optimized" !important;
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    background: rgba(0,123,255,0.9) !important;
    color: white !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
    border-radius: 4px 0 0 0 !important;
    z-index: 10000 !important;
    pointer-events: none !important;
  }
}

/* Device detection indicators */
@media (max-width: 375px) {
  body::after { content: "✅ iPhone SE/Mini" !important; }
}

@media (max-width: 390px) and (min-height: 800px) {
  body::after { content: "✅ iPhone 12/13/14" !important; }
}

@media (max-width: 414px) and (min-height: 850px) {
  body::after { content: "✅ iPhone 11/XR" !important; }
}

@media (max-width: 428px) and (min-height: 900px) {
  body::after { content: "✅ iPhone Pro Max" !important; }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 450px) {
    body::after {
      content: "✅ iOS Safari" !important;
      background: rgba(0,199,190,0.9) !important;
    }
  }
}

/* SUPER AGGRESSIVE MOBILE FIX - Override ALL existing rules */
@media screen and (max-width: 450px) {
  /* Override ALL existing 860px rules */
  html body .room-interface,
  html body .room-interface .container,
  html body .room-main,
  html body .sidebar,
  html body .sidebar-section,
  html body .qr-mini,
  html body .copy-link-btn,
  html body .control-buttons,
  html body .control-btn {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    max-height: none !important;
    height: auto !important;
  }

  /* Force override container height rules */
  html body .room-interface .container {
    height: auto !important;
    max-height: none !important;
    min-height: 100vh !important;
  }

  /* Force override room-main height rules */
  html body .room-main {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
  }
  /* Override the main height constraints that prevent scrolling */
  .room-interface {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .room-interface .container {
    height: auto !important;
    max-height: none !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 16px !important;
  }

  .room-main {
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    display: flex !important;
  }

  /* Force sidebar to top and ensure visibility */
  .sidebar {
    order: -1 !important;
    flex: none !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 16px !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 16px !important;
    position: relative !important;
  }

  /* Ensure sidebar sections are visible */
  .sidebar-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 16px !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 16px !important;
  }

  /* QR Code styling */
  .qr-mini {
    display: flex !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #fff !important;
    border: 2px solid var(--accent) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 12px 0 !important;
  }

  .qr-mini canvas {
    display: block !important;
    visibility: visible !important;
    width: 140px !important;
    height: 140px !important;
    margin: 0 auto !important;
  }

  /* Buttons styling */
  .copy-link-btn {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    background: var(--accent) !important;
    color: #fff !important;
    padding: 12px !important;
    border: none !important;
    border-radius: 8px !important;
    margin-top: 12px !important;
  }

  .control-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  .control-btn {
    display: block !important;
    visibility: visible !important;
    padding: 12px !important;
    background: #f3f4f6 !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    text-align: center !important;
  }

  /* Chat section - allow it to take remaining space */
  .chat-section {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 400px !important;
    max-height: none !important;
  }

  /* Ensure scrolling works */
  html, body {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Room header */
  .room-header {
    position: relative !important;
    margin-bottom: 16px !important;
  }

  /* Override any CSS that might hide content */
  @media (max-width: 860px) {
    .sidebar-section h3:after {
      content: none !important;
    }

    .sidebar-section.collapsed .qr-mini,
    .sidebar-section.collapsed .copy-link-btn {
      display: block !important;
    }
  }

  /* Add visible test element to confirm CSS is loading */
  body::before {
    content: "✅ CSS UPDATED - Look for QR above chat" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #007bff !important;
    color: white !important;
    text-align: center !important;
    padding: 8px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    z-index: 9999 !important;
  }

  /* Force sidebar above chat */
  .room-main {
    flex-direction: column-reverse !important;
  }

  .sidebar {
    order: 2 !important;
  }

  .chat-section {
    order: 1 !important;
  }
}

/* FORCE BUTTONS SMALLER ON ALL DEVICES */
html .attach-btn,
html .send-btn,
body .attach-btn,
body .send-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  font-size: 16px !important;
}

/* FORCE INPUT COLUMN LAYOUT */
html .input-container,
body .input-container {
  flex-direction: column !important;
  gap: 12px !important;
}

html .message-input,
body .message-input {
  font-size: 14px !important;
  width: 100% !important;
}

/* FORCE MOBILE FIXES - MAXIMUM PRIORITY - v3.0 */
@media screen and (max-width: 860px), screen and (max-width: 768px), screen and (max-device-width: 768px) {
  /* 1.1 Fix bubble size and padding */
  .chat-message {
    max-width: 85% !important;
    margin-bottom: 12px !important;
  }

  .chat-message .message-content,
  .message-content {
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    border-radius: 16px !important;
    min-height: auto !important;
    word-break: break-word !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* 1.2 Fix name and time layout */
  .message-header {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
    display: flex !important;
    justify-content: space-between !important;
    color: var(--muted) !important;
  }

  /* 1.3 Fix input buttons size */
  .attach-btn, .send-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    min-width: 40px !important;
    padding: 0 !important;
  }

  .message-input {
    font-size: 14px !important;
    padding: 12px !important;
    min-height: 40px !important;
  }

  /* 2.1 Show Leave Room button on mobile */
  .leave-btn {
    display: flex !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 1000 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  }

  /* 2.2 QR Code Section - Make it collapsible on mobile */
  .sidebar-section {
    position: relative !important;
  }

  .sidebar-section h3 {
    cursor: pointer !important;
    user-select: none !important;
  }

  .sidebar-section h3:after {
    content: " ▼" !important;
    font-size: 12px !important;
    transition: transform 0.3s !important;
    float: right !important;
  }

  .sidebar-section.collapsed h3:after {
    transform: rotate(-90deg) !important;
  }

  .sidebar-section.collapsed .qr-mini,
  .sidebar-section.collapsed .copy-link-btn {
    display: none !important;
  }

  /* Make QR code more mobile-friendly */
  .qr-mini canvas {
    width: 100px !important;
    height: 100px !important;
    max-width: 100px !important;
  }

  /* 2.3 Add Clear Messages button for mobile */
  .control-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .control-btn {
    flex: 1 !important;
    min-width: calc(50% - 4px) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  /* 3.1 Fix members section */
  .members-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .member {
    padding: 6px 8px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }

  /* 3.2 Highlight "You" clearly */
  .member.you {
    background: #e0f7fa !important;
    border: 2px solid var(--accent) !important;
    font-weight: 600 !important;
  }

  .member.you:before {
    content: "🟢 " !important;
  }

  /* 4.1 & 4.2 Fix message display and colors with bubble tails */
  .chat-message:not(.own) .message-content {
    background: #f1f1f1 !important;
    border: 1px solid #e0e0e0 !important;
    color: #333 !important;
    position: relative !important;
    margin-left: 12px !important;
  }

  /* Left bubble tail for others */
  .chat-message:not(.own) .message-content:before {
    content: "" !important;
    position: absolute !important;
    left: -8px !important;
    top: 10px !important;
    width: 0 !important;
    height: 0 !important;
    border: 8px solid transparent !important;
    border-right-color: #f1f1f1 !important;
    display: block !important;
    animation: none !important;
  }

  .chat-message.own .message-content {
    background: #e0f7fa !important;
    border: 1px solid #b2ebf2 !important;
    color: #006064 !important;
    margin-left: auto !important;
    margin-right: 12px !important;
    position: relative !important;
  }

  /* Right bubble tail for your messages */
  .chat-message.own .message-content:after {
    content: "" !important;
    position: absolute !important;
    right: -8px !important;
    top: 10px !important;
    width: 0 !important;
    height: 0 !important;
    border: 8px solid transparent !important;
    border-left-color: #e0f7fa !important;
    display: block !important;
    animation: none !important;
  }

  /* System messages */
  .message.system .system-message,
  .system-message {
    text-align: center !important;
    font-size: 12px !important;
    color: #666 !important;
    margin: 10px 0 !important;
    padding: 6px 12px !important;
    background: #f5f5f5 !important;
    border-radius: 12px !important;
    font-style: italic !important;
  }

  /* Force remove any spinners or loading states */
  .chat-message:before,
  .chat-message:after,
  .message-content:before,
  .message-content:after,
  [class*="loading"],
  [class*="pending"],
  [class*="spin"] {
    display: none !important;
    animation: none !important;
    content: none !important;
  }

  /* 5. UX/Accessibility Improvements */

  /* Typing indicator */
  .typing-indicator {
    font-size: 12px !important;
    color: #666 !important;
    font-style: italic !important;
    padding: 8px 16px !important;
    text-align: left !important;
    background: #f9f9f9 !important;
    border-radius: 12px !important;
    margin: 8px 0 !important;
    animation: pulse 1.5s infinite !important;
  }

  .typing-dots {
    display: inline-block !important;
  }

  .typing-dots:after {
    content: "..." !important;
    animation: dots 1.5s infinite !important;
  }

  @keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
  }

  @keyframes dots {
    0%, 20% { content: "."; }
    40% { content: ".."; }
    60%, 100% { content: "..."; }
  }

  /* Auto-scroll to bottom - smooth behavior */
  .chat-messages {
    scroll-behavior: smooth !important;
  }

  /* Toast notifications for mobile */
  .mobile-toast {
    position: fixed !important;
    bottom: 80px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #333 !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    z-index: 1000 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
  }

  .mobile-toast.show {
    opacity: 1 !important;
  }

  /* Dark mode support */
  @media (prefers-color-scheme: dark) {
    .chat-message:not(.own) .message-content {
      background: #374151 !important;
      border: 1px solid #4b5563 !important;
      color: #f9fafb !important;
    }

    .typing-indicator {
      background: #374151 !important;
      color: #d1d5db !important;
    }

    .system-message {
      background: #374151 !important;
      color: #d1d5db !important;
    }
  
  /* 6. Additional Features */

  /* Responsive Side Drawer for mobile */
  .sidebar {
    position: fixed !important;
    right: -100% !important;
    top: 0 !important;
    height: 100vh !important;
    width: 280px !important;
    background: var(--card) !important;
    box-shadow: -4px 0 12px rgba(0,0,0,0.1) !important;
    z-index: 1001 !important;
    transition: right 0.3s ease !important;
    overflow-y: auto !important;
    padding: 16px !important;
  }

  .sidebar.open {
    right: 0 !important;
  }

  /* Side drawer toggle button */
  .drawer-toggle {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    width: 44px !important;
    height: 44px !important;
    background: var(--accent) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    cursor: pointer !important;
    z-index: 1002 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Overlay when drawer is open */
  .drawer-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 1000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
  }

  .drawer-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Hide main chat area margin when drawer is closed */
  .chat-section {
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* Sound notification styles */
  .sound-controls {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    background: var(--card) !important;
    padding: 8px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    z-index: 999 !important;
  }

  .sound-toggle {
    background: none !important;
    border: none !important;
    font-size: 20px !important;
    cursor: pointer !important;
    padding: 4px !important;
    border-radius: 4px !important;
    transition: background 0.2s !important;
  }

  .sound-toggle:hover {
    background: var(--bg) !important;
  }

  .sound-toggle.muted {
    opacity: 0.5 !important;
  }

}

/* EXTRA MOBILE FIXES FOR SMALLEST SCREENS */
@media (max-width: 480px) {
  /* Further compress bubble size */
  .chat-message .message-content {
    padding: 8px 12px !important;
    font-size: 14px !important;
  }

  /* Input button refinements */
  .attach-btn, .send-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }

  /* Input text refinements */
  .message-input {
    font-size: 14px !important;
  }
}

  /* 1. CHAT INPUT - ทำให้ใหญ่และแยกบรรทัด */
  .chat-input .input-container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
  }

  .chat-input .message-input {
    width: 100% !important;
    font-size: 18px !important;
    padding: 16px !important;
    min-height: 56px !important;
    margin-bottom: 0 !important;
    border: 2px solid var(--border) !important;
    border-radius: 16px !important;
  }

  /* ปุ่มแนบไฟล์และส่ง - แยกเป็น 2 บรรทัด */
  .chat-input .attach-btn,
  .chat-input .send-btn {
    flex: 1 !important;
    min-height: 52px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    border-radius: 16px !important;
  }

  /* 2. MESSAGE TIMESTAMPS - เพิ่มให้ชัดเจน */
  .message-header {
    font-size: 12px !important;
    color: var(--muted) !important;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
  }

  .chat-message .message-content {
    font-size: 16px !important;
    padding: 16px !important;
    line-height: 1.5 !important;
    border-radius: 18px !important;
  }

  /* เพิ่ม timestamp ด้านล่าง message */
  .chat-message::after {
    content: attr(data-time) !important;
    display: block !important;
    font-size: 11px !important;
    color: var(--muted) !important;
    margin-top: 6px !important;
    opacity: 0.8 !important;
  }

  /* 3. MEMBER PANEL - ลดพื้นที่และซ่อนเป็นค่าเริ่มต้น */
  .room-main .sidebar {
    max-height: 120px !important;
    min-height: auto !important;
    order: -1 !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease !important;
  }

  .sidebar.collapsed {
    max-height: 50px !important;
  }

  .sidebar .members-list {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-height: 60px !important;
    overflow-y: auto !important;
  }

  .sidebar .member {
    border-radius: 25px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    min-width: auto !important;
    background: var(--accent) !important;
    color: white !important;
    border: none !important;
  }

  .sidebar .member.you {
    background: var(--success) !important;
    color: white !important;
  }

  /* 4. CHAT AREA - เพิ่มพื้นที่ */
  .room-main .chat-section {
    flex: 1 !important;
    height: auto !important;
    max-height: calc(100vh - 200px) !important;
    min-height: 400px !important;
  }

  .chat-section .chat-messages {
    padding: 16px !important;
    gap: 16px !important;
    max-height: calc(100vh - 300px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 480px) {
  /* Create Room Button */
  .create-room-btn {
    width: 100% !important;
    max-width: 280px !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
  }

  /* QR Code sizing */
  .qr-container canvas {
    max-width: 75% !important;
    height: auto !important;
  }

  /* Join input mobile */
  .join-input {
    width: 100% !important;
    max-width: 240px !important;
    font-size: 16px !important;
    padding: 14px 16px !important;
  }

  .join-btn {
    width: 100% !important;
    max-width: 240px !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }

  /* Larger touch targets */
  .btn, .copy-btn, .control-btn {
    min-height: 44px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
  }
}