| :root { |
| --primary-bg: |
| radial-gradient(circle at 16% 12%, rgba(96, 165, 250, 0.2), transparent 28%), |
| radial-gradient(circle at 84% 18%, rgba(59, 130, 246, 0.16), transparent 30%), |
| radial-gradient(circle at 45% 92%, rgba(16, 185, 129, 0.1), transparent 28%), |
| linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); |
| --secondary-bg: rgba(255, 255, 255, 0.66); |
| --card-bg: rgba(255, 255, 255, 0.74); |
| --glass-strong: rgba(255, 255, 255, 0.82); |
| --glass-soft: rgba(255, 255, 255, 0.48); |
| --text-primary: #1a202c; |
| --text-secondary: #4a5568; |
| --text-muted: #718096; |
| --border-color: rgba(148, 163, 184, 0.22); |
| --glass-border: rgba(255, 255, 255, 0.76); |
| --accent-primary: #3b82f6; |
| --accent-secondary: #60a5fa; |
| --accent-success: #10b981; |
| --accent-danger: #ef4444; |
| --shadow-light: 0 10px 24px rgba(15, 23, 42, 0.08); |
| --shadow-medium: 0 18px 38px rgba(59, 130, 246, 0.2), 0 6px 16px rgba(15, 23, 42, 0.08); |
| --shadow-heavy: 0 34px 90px rgba(15, 23, 42, 0.16), 0 12px 28px rgba(59, 130, 246, 0.1); |
| --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.92); |
| --inner-depth: inset 0 -18px 42px rgba(96, 165, 250, 0.05); |
| --blur-light: blur(14px); |
| --blur-medium: blur(26px); |
| --safe-bottom: env(safe-area-inset-bottom, 0px); |
| } |
|
|
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| html, |
| body { |
| min-height: 100%; |
| overflow: hidden; |
| } |
|
|
| body { |
| position: relative; |
| min-height: 100dvh; |
| background: var(--primary-bg); |
| color: var(--text-primary); |
| font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; |
| font-size: 14px; |
| line-height: 1.5; |
| } |
|
|
| body::before, |
| body::after { |
| content: ""; |
| position: fixed; |
| z-index: -1; |
| pointer-events: none; |
| filter: blur(4px); |
| } |
|
|
| body::before { |
| inset: 4% auto auto 7%; |
| width: 18rem; |
| height: 18rem; |
| border-radius: 50%; |
| background: radial-gradient(circle, rgba(96, 165, 250, 0.22), transparent 68%); |
| } |
|
|
| body::after { |
| right: 5%; |
| bottom: 5%; |
| width: 22rem; |
| height: 22rem; |
| border-radius: 50%; |
| background: radial-gradient(circle, rgba(59, 130, 246, 0.16), transparent 68%); |
| } |
|
|
| button, |
| input, |
| textarea { |
| font: inherit; |
| } |
|
|
| button { |
| border: 0; |
| } |
|
|
| .is-hidden { |
| display: none !important; |
| } |
|
|
| .app-shell { |
| display: grid; |
| grid-template-columns: minmax(320px, 450px) minmax(0, 760px); |
| gap: 1rem; |
| width: min(1240px, calc(100vw - 2rem)); |
| height: calc(100dvh - 2rem); |
| max-height: 900px; |
| margin: 1rem auto; |
| perspective: 1400px; |
| } |
|
|
| .connect-screen, |
| .chat-screen { |
| position: relative; |
| min-height: 0; |
| background: var(--card-bg); |
| border: 1px solid var(--glass-border); |
| border-radius: 28px; |
| box-shadow: var(--shadow-heavy), var(--inner-highlight), var(--inner-depth); |
| backdrop-filter: var(--blur-medium); |
| -webkit-backdrop-filter: var(--blur-medium); |
| transform-style: preserve-3d; |
| } |
|
|
| .connect-screen::before, |
| .chat-screen::before { |
| content: ""; |
| position: absolute; |
| inset: 1px; |
| z-index: -1; |
| border-radius: inherit; |
| background: |
| linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.18) 42%, rgba(96, 165, 250, 0.08)), |
| radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.95), transparent 28%); |
| pointer-events: none; |
| } |
|
|
| .connect-screen { |
| display: flex; |
| flex-direction: column; |
| gap: clamp(1rem, 2dvh, 1.6rem); |
| min-height: 0; |
| overflow-y: auto; |
| overscroll-behavior: contain; |
| padding: clamp(1.25rem, 3vw, 2.4rem); |
| scrollbar-gutter: stable; |
| transform: rotateY(0.5deg) translateZ(0); |
| } |
|
|
| .chat-screen { |
| overflow: hidden; |
| transform: rotateY(-0.35deg) translateZ(0); |
| } |
|
|
| .connect-screen::-webkit-scrollbar { |
| width: 6px; |
| } |
|
|
| .connect-screen::-webkit-scrollbar-track { |
| background: transparent; |
| } |
|
|
| .connect-screen::-webkit-scrollbar-thumb { |
| border-radius: 999px; |
| background: rgba(100, 116, 139, 0.24); |
| } |
|
|
| .brand-bar { |
| display: flex; |
| align-items: center; |
| gap: 0.9rem; |
| } |
|
|
| .brand-mark { |
| display: grid; |
| place-items: center; |
| width: 52px; |
| height: 52px; |
| border-radius: 18px; |
| color: white; |
| background: |
| radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.55), transparent 18%), |
| linear-gradient(145deg, var(--accent-secondary), var(--accent-primary) 58%, #2563eb); |
| box-shadow: |
| 0 18px 34px rgba(59, 130, 246, 0.24), |
| inset 0 1px 0 rgba(255, 255, 255, 0.45), |
| inset 0 -10px 22px rgba(37, 99, 235, 0.28); |
| font-size: 1.55rem; |
| } |
|
|
| .brand-bar h1 { |
| font-size: clamp(1.65rem, 3vw, 2rem); |
| line-height: 1.1; |
| } |
|
|
| .brand-bar p, |
| .welcome-copy p, |
| .connect-tip, |
| .room-meta p { |
| color: var(--text-secondary); |
| } |
|
|
| .welcome-art { |
| position: relative; |
| display: grid; |
| place-items: center; |
| width: min(58vw, 250px); |
| aspect-ratio: 1; |
| margin: 0.5rem auto 0; |
| border-radius: 50%; |
| background: |
| radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.86), transparent 24%), |
| radial-gradient(circle at 38% 42%, rgba(16, 185, 129, 0.12), transparent 18%), |
| radial-gradient(circle at 70% 20%, rgba(96, 165, 250, 0.16), transparent 9%), |
| linear-gradient(145deg, rgba(59, 130, 246, 0.08), rgba(96, 165, 250, 0.06)); |
| border: 1px solid rgba(255, 255, 255, 0.7); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.86), |
| inset 18px 24px 42px rgba(255, 255, 255, 0.48), |
| 0 22px 48px rgba(59, 130, 246, 0.1); |
| } |
|
|
| .welcome-art::before, |
| .welcome-art::after { |
| content: ""; |
| position: absolute; |
| border-radius: 50%; |
| background: var(--accent-secondary); |
| opacity: 0.65; |
| } |
|
|
| .welcome-art::before { |
| width: 8px; |
| height: 8px; |
| right: 17%; |
| top: 28%; |
| } |
|
|
| .welcome-art::after { |
| width: 10px; |
| height: 10px; |
| left: 16%; |
| bottom: 26%; |
| background: var(--accent-primary); |
| } |
|
|
| .bubble { |
| position: absolute; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 0.8rem; |
| border-radius: 28px; |
| } |
|
|
| .bubble span { |
| width: 12px; |
| height: 12px; |
| border-radius: 50%; |
| } |
|
|
| .bubble-primary { |
| left: 16%; |
| top: 30%; |
| width: 128px; |
| height: 78px; |
| color: white; |
| background: |
| radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.55), transparent 20%), |
| linear-gradient(145deg, var(--accent-secondary), var(--accent-primary) 62%, #2563eb); |
| box-shadow: |
| 0 18px 30px rgba(59, 130, 246, 0.26), |
| inset 0 1px 0 rgba(255, 255, 255, 0.4), |
| inset 0 -12px 24px rgba(37, 99, 235, 0.22); |
| animation: floatPrimary 5.5s ease-in-out infinite; |
| } |
|
|
| .bubble-primary::after { |
| content: ""; |
| position: absolute; |
| left: 28px; |
| bottom: -18px; |
| border-top: 24px solid var(--accent-primary); |
| border-right: 24px solid transparent; |
| } |
|
|
| .bubble-primary span { |
| background: white; |
| } |
|
|
| .bubble-secondary { |
| right: 12%; |
| bottom: 23%; |
| width: 126px; |
| height: 72px; |
| background: rgba(255, 255, 255, 0.86); |
| backdrop-filter: var(--blur-light); |
| -webkit-backdrop-filter: var(--blur-light); |
| box-shadow: |
| 0 20px 42px rgba(15, 23, 42, 0.11), |
| inset 0 1px 0 rgba(255, 255, 255, 0.95); |
| animation: floatSecondary 6.2s ease-in-out infinite; |
| } |
|
|
| .bubble-secondary::after { |
| content: ""; |
| position: absolute; |
| right: 24px; |
| bottom: -16px; |
| border-top: 22px solid white; |
| border-left: 22px solid transparent; |
| } |
|
|
| .bubble-secondary span { |
| background: #60a5fa; |
| } |
|
|
| @keyframes floatPrimary { |
| 0%, |
| 100% { |
| transform: translate3d(0, 0, 22px); |
| } |
|
|
| 50% { |
| transform: translate3d(0, -8px, 28px); |
| } |
| } |
|
|
| @keyframes floatSecondary { |
| 0%, |
| 100% { |
| transform: translate3d(0, 0, 34px); |
| } |
|
|
| 50% { |
| transform: translate3d(5px, 7px, 40px); |
| } |
| } |
|
|
| .welcome-copy { |
| text-align: center; |
| } |
|
|
| .welcome-copy h2 { |
| margin-bottom: 0.35rem; |
| font-size: clamp(1.45rem, 3vw, 1.8rem); |
| } |
|
|
| .welcome-copy p { |
| max-width: 25rem; |
| margin: 0 auto; |
| font-size: 1rem; |
| } |
|
|
| .connection-form { |
| display: grid; |
| gap: 1rem; |
| } |
|
|
| .input-group { |
| display: grid; |
| gap: 0.5rem; |
| } |
|
|
| .input-group label { |
| color: #64748b; |
| font-size: 0.78rem; |
| font-weight: 700; |
| letter-spacing: 0.05em; |
| text-transform: uppercase; |
| } |
|
|
| .field-shell { |
| display: grid; |
| grid-template-columns: 48px minmax(0, 1fr) 30px; |
| align-items: center; |
| min-height: 64px; |
| padding: 0 0.8rem; |
| border: 1px solid rgba(255, 255, 255, 0.72); |
| border-radius: 18px; |
| background: rgba(255, 255, 255, 0.62); |
| box-shadow: |
| 0 12px 28px rgba(15, 23, 42, 0.06), |
| inset 0 1px 0 rgba(255, 255, 255, 0.88); |
| backdrop-filter: var(--blur-light); |
| -webkit-backdrop-filter: var(--blur-light); |
| transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; |
| } |
|
|
| .field-shell:focus-within { |
| border-color: rgba(96, 165, 250, 0.76); |
| box-shadow: |
| 0 18px 38px rgba(59, 130, 246, 0.14), |
| 0 0 0 4px rgba(59, 130, 246, 0.08), |
| inset 0 1px 0 rgba(255, 255, 255, 0.92); |
| transform: translateY(-1px); |
| } |
|
|
| .field-shell > i:first-child { |
| display: grid; |
| place-items: center; |
| width: 38px; |
| height: 38px; |
| border-radius: 14px; |
| color: var(--accent-secondary); |
| background: rgba(96, 165, 250, 0.12); |
| } |
|
|
| .field-shell input { |
| min-width: 0; |
| border: 0; |
| outline: 0; |
| background: transparent; |
| color: var(--text-primary); |
| font-size: 1rem; |
| } |
|
|
| .field-check { |
| display: grid; |
| place-items: center; |
| width: 22px; |
| height: 22px; |
| border-radius: 50%; |
| color: white; |
| background: var(--accent-success); |
| font-size: 0.72rem; |
| opacity: 0; |
| transform: scale(0.8); |
| transition: opacity 0.2s ease, transform 0.2s ease; |
| } |
|
|
| .field-shell.has-value .field-check { |
| opacity: 1; |
| transform: scale(1); |
| } |
|
|
| .btn, |
| .icon-btn, |
| .send-btn { |
| cursor: pointer; |
| } |
|
|
| .btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 0.75rem; |
| min-height: 60px; |
| padding: 0 1.2rem; |
| border-radius: 18px; |
| color: white; |
| font-size: 1.05rem; |
| font-weight: 800; |
| background: |
| radial-gradient(circle at 35% 10%, rgba(255, 255, 255, 0.45), transparent 18%), |
| linear-gradient(145deg, var(--accent-secondary), var(--accent-primary) 58%, #2563eb); |
| box-shadow: |
| 0 22px 44px rgba(59, 130, 246, 0.28), |
| inset 0 1px 0 rgba(255, 255, 255, 0.45), |
| inset 0 -12px 24px rgba(37, 99, 235, 0.26); |
| transition: transform 0.2s ease, box-shadow 0.2s ease; |
| } |
|
|
| .btn:hover, |
| .send-btn:hover, |
| .icon-btn:hover { |
| transform: translateY(-2px); |
| } |
|
|
| .field-shell, |
| .btn, |
| .icon-btn, |
| .send-btn, |
| .message, |
| .user-list li { |
| will-change: transform; |
| } |
|
|
| .btn:active, |
| .send-btn:active, |
| .icon-btn:active { |
| transform: translateY(0); |
| } |
|
|
| .status { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 0.6rem; |
| min-height: 56px; |
| padding: 0.8rem 1rem; |
| border-radius: 18px; |
| font-weight: 700; |
| backdrop-filter: var(--blur-light); |
| -webkit-backdrop-filter: var(--blur-light); |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78); |
| } |
|
|
| .status.neutral { |
| color: var(--text-muted); |
| background: rgba(255, 255, 255, 0.68); |
| border: 1px solid var(--border-color); |
| } |
|
|
| .status.connected { |
| color: #059669; |
| background: rgba(16, 185, 129, 0.1); |
| border: 1px solid rgba(16, 185, 129, 0.18); |
| } |
|
|
| .status.disconnected { |
| color: var(--accent-danger); |
| background: rgba(239, 68, 68, 0.08); |
| border: 1px solid rgba(239, 68, 68, 0.16); |
| } |
|
|
| .connect-tip { |
| display: flex; |
| align-items: center; |
| gap: 0.8rem; |
| margin-top: auto; |
| padding: 1rem; |
| border-radius: 18px; |
| background: linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(255, 255, 255, 0.54)); |
| border: 1px solid rgba(255, 255, 255, 0.66); |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 12px 26px rgba(15, 23, 42, 0.05); |
| } |
|
|
| .connect-tip i { |
| color: var(--accent-secondary); |
| font-size: 1.35rem; |
| } |
|
|
| .chat-screen { |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .chat-header { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| padding: 1.15rem 1.25rem; |
| color: white; |
| background: |
| radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.28), transparent 28%), |
| linear-gradient(145deg, var(--accent-primary), var(--accent-secondary)); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.24), |
| 0 16px 34px rgba(59, 130, 246, 0.18); |
| } |
|
|
| .room-meta { |
| min-width: 0; |
| flex: 1; |
| } |
|
|
| .room-meta h2 { |
| overflow: hidden; |
| font-size: 1.3rem; |
| line-height: 1.2; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .room-meta p { |
| display: flex; |
| align-items: center; |
| gap: 0.45rem; |
| color: rgba(255, 255, 255, 0.86); |
| } |
|
|
| .online-dot { |
| width: 9px; |
| height: 9px; |
| border-radius: 50%; |
| background: var(--accent-success); |
| box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); |
| } |
|
|
| .chat-actions { |
| display: flex; |
| align-items: center; |
| gap: 0.65rem; |
| } |
|
|
| .icon-btn { |
| display: inline-grid; |
| place-items: center; |
| width: 46px; |
| height: 46px; |
| border-radius: 50%; |
| color: inherit; |
| background: rgba(255, 255, 255, 0.18); |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 22px rgba(37, 99, 235, 0.12); |
| backdrop-filter: var(--blur-light); |
| -webkit-backdrop-filter: var(--blur-light); |
| transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; |
| } |
|
|
| .icon-btn:hover { |
| background: rgba(255, 255, 255, 0.24); |
| } |
|
|
| .mobile-back-btn, |
| .users-close { |
| display: none; |
| } |
|
|
| .chat-body { |
| display: grid; |
| grid-template-columns: 240px minmax(0, 1fr); |
| min-height: 0; |
| flex: 1; |
| } |
|
|
| .users-panel { |
| display: flex; |
| flex-direction: column; |
| min-height: 0; |
| border-right: 1px solid var(--border-color); |
| background: rgba(255, 255, 255, 0.46); |
| backdrop-filter: var(--blur-light); |
| -webkit-backdrop-filter: var(--blur-light); |
| } |
|
|
| .users-panel-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 1rem; |
| border-bottom: 1px solid var(--border-color); |
| } |
|
|
| .users-panel-header h3 { |
| font-size: 1rem; |
| } |
|
|
| .user-list { |
| display: grid; |
| gap: 0.55rem; |
| padding: 1rem; |
| overflow-y: auto; |
| list-style: none; |
| } |
|
|
| .user-list li { |
| display: flex; |
| align-items: center; |
| gap: 0.7rem; |
| min-width: 0; |
| padding: 0.75rem; |
| border-radius: 14px; |
| color: var(--text-secondary); |
| border: 1px solid rgba(255, 255, 255, 0.68); |
| background: rgba(255, 255, 255, 0.62); |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 18px rgba(15, 23, 42, 0.04); |
| } |
|
|
| .user-list li::before { |
| content: ""; |
| flex: 0 0 auto; |
| width: 9px; |
| height: 9px; |
| border-radius: 50%; |
| background: var(--accent-success); |
| } |
|
|
| .empty-users { |
| padding: 0 1rem 1rem; |
| color: var(--text-muted); |
| font-size: 0.9rem; |
| } |
|
|
| .messages-wrap { |
| display: flex; |
| flex-direction: column; |
| min-width: 0; |
| min-height: 0; |
| background: |
| radial-gradient(circle at 78% 24%, rgba(96, 165, 250, 0.08), transparent 28%), |
| radial-gradient(circle at 28% 76%, rgba(16, 185, 129, 0.06), transparent 24%), |
| rgba(255, 255, 255, 0.18); |
| } |
|
|
| .messages { |
| display: flex; |
| flex: 1; |
| flex-direction: column; |
| gap: 1rem; |
| min-height: 0; |
| padding: 1.25rem; |
| overflow-y: auto; |
| scroll-behavior: smooth; |
| } |
|
|
| .messages::-webkit-scrollbar, |
| .user-list::-webkit-scrollbar { |
| width: 6px; |
| } |
|
|
| .messages::-webkit-scrollbar-track, |
| .user-list::-webkit-scrollbar-track { |
| background: transparent; |
| } |
|
|
| .messages::-webkit-scrollbar-thumb, |
| .user-list::-webkit-scrollbar-thumb { |
| border-radius: 999px; |
| background: rgba(100, 116, 139, 0.28); |
| } |
|
|
| .message { |
| max-width: min(72%, 33rem); |
| padding: 0.95rem 1.1rem; |
| border: 1px solid rgba(255, 255, 255, 0.68); |
| border-radius: 18px 18px 18px 6px; |
| background: rgba(255, 255, 255, 0.72); |
| box-shadow: |
| 0 14px 28px rgba(15, 23, 42, 0.08), |
| inset 0 1px 0 rgba(255, 255, 255, 0.82); |
| backdrop-filter: var(--blur-light); |
| -webkit-backdrop-filter: var(--blur-light); |
| animation: messageSlide 0.24s ease-out; |
| } |
|
|
| @keyframes messageSlide { |
| from { |
| opacity: 0; |
| transform: translateY(8px); |
| } |
|
|
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| .message.own { |
| align-self: flex-end; |
| border: 0; |
| border-radius: 18px 18px 6px 18px; |
| color: white; |
| background: |
| radial-gradient(circle at 24% 12%, rgba(255, 255, 255, 0.32), transparent 18%), |
| linear-gradient(145deg, var(--accent-primary), var(--accent-secondary)); |
| box-shadow: |
| 0 18px 36px rgba(59, 130, 246, 0.24), |
| inset 0 1px 0 rgba(255, 255, 255, 0.28); |
| } |
|
|
| .message.system { |
| align-self: center; |
| max-width: 92%; |
| padding: 0.7rem 1rem; |
| border-radius: 999px; |
| color: var(--text-secondary); |
| font-size: 0.9rem; |
| font-style: italic; |
| border: 1px solid rgba(255, 255, 255, 0.72); |
| background: rgba(255, 255, 255, 0.68); |
| box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.86); |
| } |
|
|
| .message-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 1rem; |
| margin-bottom: 0.45rem; |
| font-size: 0.78rem; |
| } |
|
|
| .username { |
| min-width: 0; |
| overflow: hidden; |
| color: var(--accent-secondary); |
| font-weight: 800; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .timestamp { |
| flex: 0 0 auto; |
| color: var(--text-muted); |
| } |
|
|
| .message.own .username, |
| .message.own .timestamp { |
| color: rgba(255, 255, 255, 0.88); |
| } |
|
|
| .message-content { |
| overflow-wrap: anywhere; |
| font-size: 1rem; |
| } |
|
|
| .file-summary { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| margin-bottom: 0.45rem; |
| } |
|
|
| .file-size { |
| margin-bottom: 0.55rem; |
| color: var(--text-muted); |
| font-size: 0.82rem; |
| } |
|
|
| .message.own .file-size { |
| color: rgba(255, 255, 255, 0.75); |
| } |
|
|
| .file-preview img { |
| max-width: 100%; |
| max-height: 220px; |
| margin-top: 0.65rem; |
| border-radius: 12px; |
| box-shadow: var(--shadow-light); |
| } |
|
|
| .file-download { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 0.5rem; |
| margin-top: 0.75rem; |
| padding: 0.5rem 0.8rem; |
| border: 1px solid rgba(255, 255, 255, 0.7); |
| border-radius: 999px; |
| color: var(--accent-secondary); |
| background: rgba(255, 255, 255, 0.62); |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78); |
| font-size: 0.86rem; |
| font-weight: 700; |
| text-decoration: none; |
| } |
|
|
| .input-area { |
| display: grid; |
| grid-template-columns: 48px minmax(0, 1fr) 56px; |
| gap: 0.8rem; |
| align-items: end; |
| padding: 1rem; |
| padding-bottom: calc(1rem + var(--safe-bottom)); |
| border-top: 1px solid var(--border-color); |
| background: rgba(255, 255, 255, 0.58); |
| backdrop-filter: var(--blur-medium); |
| -webkit-backdrop-filter: var(--blur-medium); |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84); |
| } |
|
|
| .file-input-wrapper { |
| position: relative; |
| } |
|
|
| .file-input-wrapper input[type="file"] { |
| position: absolute; |
| inset: 0; |
| width: 100%; |
| height: 100%; |
| opacity: 0; |
| cursor: pointer; |
| } |
|
|
| .file-input-label, |
| .send-btn { |
| display: grid; |
| place-items: center; |
| border-radius: 50%; |
| } |
|
|
| .file-input-label { |
| width: 48px; |
| height: 48px; |
| border: 1px solid rgba(255, 255, 255, 0.78); |
| color: var(--text-secondary); |
| background: rgba(255, 255, 255, 0.68); |
| box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.86); |
| backdrop-filter: var(--blur-light); |
| -webkit-backdrop-filter: var(--blur-light); |
| cursor: pointer; |
| } |
|
|
| #messageInput { |
| min-width: 0; |
| min-height: 48px; |
| max-height: 136px; |
| padding: 0.85rem 1rem; |
| resize: none; |
| border: 1px solid rgba(255, 255, 255, 0.78); |
| border-radius: 999px; |
| outline: 0; |
| color: var(--text-primary); |
| background: rgba(255, 255, 255, 0.72); |
| font-size: 1rem; |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 24px rgba(15, 23, 42, 0.05); |
| backdrop-filter: var(--blur-light); |
| -webkit-backdrop-filter: var(--blur-light); |
| } |
|
|
| #messageInput:focus { |
| border-color: rgba(59, 130, 246, 0.5); |
| box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); |
| } |
|
|
| .send-btn { |
| width: 56px; |
| height: 56px; |
| color: white; |
| background: |
| radial-gradient(circle at 32% 16%, rgba(255, 255, 255, 0.45), transparent 18%), |
| linear-gradient(145deg, var(--accent-secondary), var(--accent-primary) 60%, #2563eb); |
| box-shadow: |
| 0 18px 36px rgba(59, 130, 246, 0.28), |
| inset 0 1px 0 rgba(255, 255, 255, 0.42), |
| inset 0 -10px 20px rgba(37, 99, 235, 0.24); |
| font-size: 1.15rem; |
| } |
|
|
| @media (min-width: 769px) { |
| .connect-screen:hover { |
| transform: rotateY(0) translateY(-2px); |
| } |
|
|
| .chat-screen:hover { |
| transform: rotateY(0) translateY(-2px); |
| } |
|
|
| .app-shell.is-chatting { |
| grid-template-columns: minmax(0, 1fr); |
| } |
|
|
| .app-shell.is-chatting .chat-screen { |
| grid-column: 1 / -1; |
| transform: none; |
| } |
|
|
| .chat-screen.is-hidden { |
| display: flex !important; |
| } |
|
|
| .chat-screen:not(.is-connected-preview) { |
| opacity: 0.96; |
| } |
|
|
| .chat-screen:not(.is-connected-preview) .messages::before { |
| content: "Connect to a room to begin chatting."; |
| margin: auto; |
| color: var(--text-muted); |
| font-weight: 700; |
| } |
|
|
| .chat-screen:not(.is-connected-preview) .input-area { |
| opacity: 0.45; |
| pointer-events: none; |
| } |
| } |
|
|
| @media (max-width: 900px) and (min-width: 769px) { |
| .app-shell { |
| grid-template-columns: minmax(300px, 390px) minmax(0, 1fr); |
| } |
|
|
| .chat-body { |
| grid-template-columns: 200px minmax(0, 1fr); |
| } |
| } |
|
|
| @media (min-width: 769px) and (max-height: 860px) { |
| .app-shell { |
| height: calc(100dvh - 1.5rem); |
| margin: 0.75rem auto; |
| } |
|
|
| .connect-screen { |
| gap: 0.85rem; |
| padding: 1.6rem; |
| } |
|
|
| .brand-mark { |
| width: 46px; |
| height: 46px; |
| border-radius: 16px; |
| font-size: 1.35rem; |
| } |
|
|
| .brand-bar h1 { |
| font-size: 1.75rem; |
| } |
|
|
| .brand-bar p { |
| font-size: 0.95rem; |
| } |
|
|
| .welcome-art { |
| width: min(42vh, 210px); |
| margin-top: 0; |
| } |
|
|
| .bubble-primary { |
| width: 110px; |
| height: 68px; |
| } |
|
|
| .bubble-secondary { |
| width: 108px; |
| height: 62px; |
| } |
|
|
| .welcome-copy h2 { |
| font-size: 1.45rem; |
| } |
|
|
| .welcome-copy p { |
| font-size: 0.95rem; |
| } |
|
|
| .connection-form { |
| gap: 0.75rem; |
| } |
|
|
| .field-shell { |
| min-height: 54px; |
| border-radius: 16px; |
| } |
|
|
| .btn { |
| min-height: 54px; |
| } |
|
|
| .status { |
| min-height: 48px; |
| padding: 0.65rem 0.9rem; |
| } |
|
|
| .connect-tip { |
| margin-top: 0; |
| padding: 0.85rem; |
| } |
| } |
|
|
| @media (min-width: 769px) and (max-height: 760px) { |
| .app-shell { |
| height: calc(100dvh - 1rem); |
| margin: 0.5rem auto; |
| } |
|
|
| .connect-screen { |
| gap: 0.65rem; |
| padding: 1.1rem 1.35rem; |
| } |
|
|
| .brand-mark { |
| width: 42px; |
| height: 42px; |
| border-radius: 14px; |
| font-size: 1.2rem; |
| } |
|
|
| .brand-bar h1 { |
| font-size: 1.55rem; |
| } |
|
|
| .brand-bar p, |
| .welcome-copy p, |
| .connect-tip { |
| font-size: 0.9rem; |
| } |
|
|
| .welcome-art { |
| width: min(31vh, 170px); |
| } |
|
|
| .bubble { |
| gap: 0.55rem; |
| } |
|
|
| .bubble span { |
| width: 9px; |
| height: 9px; |
| } |
|
|
| .bubble-primary { |
| width: 88px; |
| height: 54px; |
| border-radius: 20px; |
| } |
|
|
| .bubble-primary::after { |
| left: 20px; |
| bottom: -13px; |
| border-top-width: 18px; |
| border-right-width: 18px; |
| } |
|
|
| .bubble-secondary { |
| width: 88px; |
| height: 50px; |
| border-radius: 20px; |
| } |
|
|
| .bubble-secondary::after { |
| right: 18px; |
| bottom: -12px; |
| border-top-width: 17px; |
| border-left-width: 17px; |
| } |
|
|
| .welcome-copy h2 { |
| font-size: 1.28rem; |
| margin-bottom: 0.15rem; |
| } |
|
|
| .input-group { |
| gap: 0.35rem; |
| } |
|
|
| .input-group label { |
| font-size: 0.72rem; |
| } |
|
|
| .field-shell { |
| grid-template-columns: 42px minmax(0, 1fr) 28px; |
| min-height: 48px; |
| border-radius: 14px; |
| } |
|
|
| .field-shell > i:first-child { |
| width: 32px; |
| height: 32px; |
| border-radius: 12px; |
| } |
|
|
| .btn { |
| min-height: 48px; |
| border-radius: 14px; |
| } |
|
|
| .status { |
| min-height: 44px; |
| border-radius: 14px; |
| font-size: 0.9rem; |
| } |
|
|
| .connect-tip { |
| padding: 0.7rem 0.85rem; |
| border-radius: 14px; |
| } |
| } |
|
|
| @media (max-width: 768px) { |
| body { |
| background: |
| radial-gradient(circle at 50% 0%, rgba(96, 165, 250, 0.22), transparent 34%), |
| radial-gradient(circle at 15% 90%, rgba(59, 130, 246, 0.1), transparent 30%), |
| linear-gradient(155deg, #f8fafc 0%, #e8eef7 100%); |
| } |
|
|
| .app-shell { |
| display: block; |
| width: 100vw; |
| height: 100dvh; |
| margin: 0; |
| overflow: hidden; |
| } |
|
|
| .connect-screen, |
| .chat-screen { |
| width: 100%; |
| height: 100%; |
| border: 0; |
| border-radius: 0; |
| box-shadow: none; |
| transform: none; |
| } |
|
|
| .connect-screen { |
| gap: clamp(0.8rem, 1.65dvh, 1.05rem); |
| justify-content: center; |
| padding: clamp(1rem, 2.5dvh, 1.35rem) 1.05rem; |
| overflow-y: auto; |
| scrollbar-gutter: auto; |
| background: |
| radial-gradient(circle at 50% 23%, rgba(96, 165, 250, 0.14), transparent 28%), |
| linear-gradient(150deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.78)); |
| } |
|
|
| .brand-bar { |
| gap: 0.7rem; |
| padding-top: 0; |
| } |
|
|
| .brand-mark { |
| width: 42px; |
| height: 42px; |
| border-radius: 14px; |
| font-size: 1.16rem; |
| } |
|
|
| .brand-bar h1 { |
| font-size: 1.45rem; |
| letter-spacing: -0.02em; |
| } |
|
|
| .brand-bar p { |
| font-size: 0.82rem; |
| } |
|
|
| .welcome-art { |
| width: min(52vw, 190px); |
| margin: 0.15rem auto 0; |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.9), |
| inset 18px 24px 42px rgba(255, 255, 255, 0.5), |
| 0 26px 58px rgba(59, 130, 246, 0.14); |
| } |
|
|
| .bubble { |
| gap: 0.5rem; |
| } |
|
|
| .bubble span { |
| width: 9px; |
| height: 9px; |
| } |
|
|
| .bubble-primary { |
| width: 92px; |
| height: 56px; |
| border-radius: 21px; |
| } |
|
|
| .bubble-primary::after { |
| left: 18px; |
| bottom: -11px; |
| border-top-width: 16px; |
| border-right-width: 16px; |
| } |
|
|
| .bubble-secondary { |
| width: 92px; |
| height: 54px; |
| border-radius: 21px; |
| } |
|
|
| .bubble-secondary::after { |
| right: 17px; |
| bottom: -10px; |
| border-top-width: 15px; |
| border-left-width: 15px; |
| } |
|
|
| .welcome-copy h2 { |
| margin-bottom: 0.25rem; |
| font-size: 1.42rem; |
| letter-spacing: -0.02em; |
| } |
|
|
| .welcome-copy p { |
| width: min(100%, 21rem); |
| font-size: 0.9rem; |
| line-height: 1.4; |
| } |
|
|
| .connection-form { |
| gap: 0.72rem; |
| } |
|
|
| .input-group { |
| gap: 0.36rem; |
| } |
|
|
| .input-group label { |
| font-size: 0.7rem; |
| } |
|
|
| .field-shell { |
| grid-template-columns: 42px minmax(0, 1fr) 28px; |
| min-height: 54px; |
| border-radius: 18px; |
| background: rgba(255, 255, 255, 0.82); |
| box-shadow: |
| 0 14px 30px rgba(15, 23, 42, 0.07), |
| inset 0 1px 0 rgba(255, 255, 255, 0.94); |
| } |
|
|
| .field-shell > i:first-child { |
| width: 32px; |
| height: 32px; |
| border-radius: 12px; |
| } |
|
|
| .field-shell input { |
| font-size: 0.95rem; |
| } |
|
|
| .btn { |
| min-height: 54px; |
| border-radius: 18px; |
| font-size: 0.98rem; |
| box-shadow: |
| 0 18px 34px rgba(59, 130, 246, 0.26), |
| inset 0 1px 0 rgba(255, 255, 255, 0.46), |
| inset 0 -12px 24px rgba(37, 99, 235, 0.24); |
| } |
|
|
| .status { |
| justify-content: center; |
| min-height: 42px; |
| padding: 0.58rem 0.75rem; |
| border-radius: 999px; |
| font-size: 0.78rem; |
| text-align: center; |
| line-height: 1.25; |
| white-space: normal; |
| } |
|
|
| .connect-tip { |
| gap: 0.65rem; |
| margin-top: 0; |
| padding: 0.72rem 0.85rem; |
| border-radius: 18px; |
| font-size: 0.8rem; |
| line-height: 1.3; |
| background: linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(255, 255, 255, 0.74)); |
| } |
|
|
| .connect-tip i { |
| font-size: 1.1rem; |
| } |
|
|
| .chat-header { |
| min-height: 92px; |
| padding: 1rem; |
| border-radius: 0 0 22px 22px; |
| box-shadow: var(--shadow-medium); |
| } |
|
|
| .mobile-back-btn, |
| .users-close { |
| display: inline-grid; |
| } |
|
|
| .desktop-disconnect-btn { |
| display: none; |
| } |
|
|
| .chat-body { |
| display: block; |
| position: relative; |
| flex: 1; |
| min-height: 0; |
| } |
|
|
| .messages-wrap { |
| height: calc(100dvh - 92px); |
| } |
|
|
| .messages { |
| padding: 1rem; |
| } |
|
|
| .message { |
| max-width: 84%; |
| } |
|
|
| .message.system { |
| max-width: 90%; |
| } |
|
|
| .users-panel { |
| position: fixed; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| z-index: 40; |
| width: min(84vw, 320px); |
| border-left: 1px solid var(--border-color); |
| border-right: 0; |
| background: rgba(255, 255, 255, 0.94); |
| box-shadow: var(--shadow-heavy); |
| transform: translateX(105%); |
| transition: transform 0.24s ease; |
| } |
|
|
| body.users-open .users-panel { |
| transform: translateX(0); |
| } |
|
|
| .users-close { |
| color: var(--text-secondary); |
| background: rgba(15, 23, 42, 0.06); |
| } |
|
|
| .mobile-drawer-backdrop { |
| position: fixed; |
| inset: 0; |
| z-index: 35; |
| pointer-events: none; |
| background: rgba(15, 23, 42, 0); |
| transition: background-color 0.24s ease; |
| } |
|
|
| body.users-open .mobile-drawer-backdrop { |
| pointer-events: auto; |
| background: rgba(15, 23, 42, 0.34); |
| } |
|
|
| .input-area { |
| grid-template-columns: 46px minmax(0, 1fr) 52px; |
| gap: 0.6rem; |
| padding: 0.75rem; |
| padding-bottom: calc(0.75rem + var(--safe-bottom)); |
| } |
|
|
| .file-input-label { |
| width: 46px; |
| height: 46px; |
| } |
|
|
| .send-btn { |
| width: 52px; |
| height: 52px; |
| } |
| } |
|
|
| @media (max-width: 420px) { |
| .connect-screen { |
| gap: 0.74rem; |
| padding: 0.85rem 0.9rem; |
| } |
|
|
| .brand-bar h1 { |
| font-size: 1.42rem; |
| } |
|
|
| .welcome-copy h2 { |
| font-size: 1.32rem; |
| } |
|
|
| .welcome-copy p { |
| font-size: 0.85rem; |
| } |
|
|
| .welcome-art { |
| width: min(48vw, 170px); |
| } |
|
|
| .message { |
| max-width: 90%; |
| padding: 0.82rem 0.92rem; |
| } |
|
|
| .room-meta h2 { |
| font-size: 1.15rem; |
| } |
| } |
|
|
| @media (max-width: 420px) and (max-height: 700px) { |
| .connect-screen { |
| gap: 0.56rem; |
| padding: 0.6rem 0.75rem; |
| } |
|
|
| .brand-mark { |
| width: 38px; |
| height: 38px; |
| border-radius: 13px; |
| font-size: 1.05rem; |
| } |
|
|
| .brand-bar h1 { |
| font-size: 1.35rem; |
| } |
|
|
| .brand-bar p { |
| font-size: 0.8rem; |
| } |
|
|
| .welcome-art { |
| width: min(38vw, 132px); |
| } |
|
|
| .welcome-copy h2 { |
| font-size: 1.18rem; |
| } |
|
|
| .welcome-copy p { |
| font-size: 0.8rem; |
| } |
|
|
| .connection-form { |
| gap: 0.5rem; |
| } |
|
|
| .field-shell { |
| min-height: 46px; |
| border-radius: 15px; |
| } |
|
|
| .btn { |
| min-height: 46px; |
| font-size: 0.92rem; |
| } |
|
|
| .status { |
| min-height: 40px; |
| padding: 0.5rem 0.65rem; |
| font-size: 0.78rem; |
| } |
|
|
| .connect-tip { |
| padding: 0.55rem 0.65rem; |
| font-size: 0.76rem; |
| } |
| } |
|
|
| @media (max-width: 360px) and (max-height: 640px) { |
| .welcome-art { |
| width: 110px; |
| } |
|
|
| .connect-tip { |
| display: none; |
| } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| *, |
| *::before, |
| *::after { |
| animation-duration: 0.01ms !important; |
| animation-iteration-count: 1 !important; |
| scroll-behavior: auto !important; |
| transition-duration: 0.01ms !important; |
| } |
| } |
|
|
