/* ============================================================ Twiftyz Messenger — design system Single source of truth. Light + dark themes via CSS variables. Theme is resolved in JS and written to . ============================================================ */ :root { color-scheme: light; /* surfaces */ --bg: #f4f5f7; --bg-accent: #eef1f5; --panel: #ffffff; --panel-2: #f6f7f9; --panel-3: #eef0f4; --panel-glass: rgba(255, 255, 255, 0.72); /* text */ --ink: #111722; --ink-soft: #36404e; --muted: #6b7480; --faint: #9aa3af; /* lines */ --line: #e6e8ec; --line-soft: #eef0f3; /* brand + semantic */ --accent: #0d9488; --accent-strong: #0b7d72; --accent-ink: #ffffff; --accent-soft: rgba(13, 148, 136, 0.12); --accent-softer: rgba(13, 148, 136, 0.07); --good: #16a34a; --warn: #d97706; --danger: #dc2626; --danger-soft: #fdecec; /* message bubbles */ --bubble-in: #ffffff; --bubble-in-line: #e6e8ec; --bubble-out: #d8f3ee; --bubble-out-line: #b7e6dd; /* rail (always dark-ish nav) */ --rail-bg: #0e1726; --rail-ink: rgba(255, 255, 255, 0.62); --rail-ink-active: #ffffff; --rail-hover: rgba(255, 255, 255, 0.10); /* effects */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow: 0 8px 24px rgba(16, 24, 40, 0.08); --shadow-lg: 0 24px 60px rgba(16, 24, 40, 0.16); --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } :root[data-theme="dark"] { color-scheme: dark; --bg: #0a0e14; --bg-accent: #0e131b; --panel: #131922; --panel-2: #181f2a; --panel-3: #222b38; --panel-glass: rgba(19, 25, 34, 0.72); --ink: #e9edf3; --ink-soft: #c2cad6; --muted: #8b96a6; --faint: #5f6b7c; --line: #232c39; --line-soft: #1b2330; --accent: #2dd4bf; --accent-strong: #14b8a6; --accent-ink: #04221d; --accent-soft: rgba(45, 212, 191, 0.16); --accent-softer: rgba(45, 212, 191, 0.09); --good: #34d399; --warn: #fbbf24; --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.14); --bubble-in: #1b2330; --bubble-in-line: #283342; --bubble-out: #11463f; --bubble-out-line: #1b6258; --rail-bg: #0a0f17; --rail-ink: rgba(233, 237, 243, 0.58); --rail-ink-active: #ffffff; --rail-hover: rgba(255, 255, 255, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 10px 30px rgba(0, 0, 0, 0.45); --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.6); } * { box-sizing: border-box; } html, body, #app { height: 100%; min-height: 100%; } body { margin: 0; color: var(--ink); background: var(--bg); overflow: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background 200ms ease, color 200ms ease; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } img { display: block; max-width: 100%; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } * { scrollbar-width: thin; scrollbar-color: var(--panel-3) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: padding-box; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---------- icon sizing (inline SVG) ---------- */ .ic { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; } .rail-button .ic { width: 23px; height: 23px; } .type-badge .ic { width: 13px; height: 13px; } .search-box .ic { width: 18px; height: 18px; color: var(--faint); } .message-actions .ic, .chat-labels .ic, .attachment > span .ic { width: 15px; height: 15px; } .pinned-bar .ic, .reply-preview .ic { width: 16px; height: 16px; color: var(--accent); } .chat-row-actions .icon-button .ic { width: 16px; height: 16px; } .primary-icon .ic, .mobile-menu .ic { width: 21px; height: 21px; } /* ---------- boot + auth ---------- */ .boot-screen, .auth-shell { min-height: 100%; display: grid; place-items: center; } .boot-screen { gap: 18px; color: var(--muted); } .brand-mark { width: 52px; height: 52px; display: grid; place-items: center; color: var(--accent-ink); background: linear-gradient(140deg, var(--accent), var(--accent-strong)); border-radius: var(--radius); font-size: 1.6rem; font-weight: 800; box-shadow: var(--shadow); } .brand-logo { width: clamp(72px, 8vw, 110px); height: clamp(72px, 8vw, 110px); object-fit: contain; filter: drop-shadow(0 6px 18px rgba(90, 80, 220, 0.35)); } .boot-screen .brand-logo { width: 84px; height: 84px; } .auth-mock-avatar img { width: 30px; height: 30px; object-fit: contain; } .auth-shell { display: flex; flex-direction: column; align-items: center; padding: 32px 48px 20px; width: 100%; } /* Brand header centered above both columns. */ .auth-brand { justify-content: center; margin-bottom: 0; } /* Two columns stretched to equal height, centered in the leftover space. */ .auth-columns { display: flex; align-items: stretch; justify-content: center; gap: 64px; width: 100%; max-width: 1280px; margin: auto; padding: 24px 0; } .auth-visual { flex: 1 1 760px; max-width: 760px; min-width: 0; display: flex; flex-direction: column; } /* The mock adapts to the form's height instead of dictating the column height. */ .auth-visual .auth-mock { flex: 1 1 0; min-height: 320px; } .brand-lockup { display: flex; align-items: center; gap: 18px; margin-bottom: 36px; } .brand-lockup h1, .brand-lockup p, .auth-card h2, .auth-card p { margin: 0; } .brand-lockup h1 { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.02; letter-spacing: -0.02em; } .brand-lockup p { max-width: 560px; margin-top: 14px; color: var(--muted); font-size: 1.02rem; line-height: 1.6; } .device-preview { height: min(52vh, 500px); min-height: 340px; display: grid; grid-template-columns: 0.4fr 0.6fr; gap: 14px; padding: 16px; background: var(--panel-glass); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); backdrop-filter: blur(14px); } .preview-sidebar, .preview-chat { border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); } .preview-sidebar { background: linear-gradient(180deg, var(--accent-softer), transparent 38%), repeating-linear-gradient(180deg, var(--panel) 0 44px, var(--panel-2) 44px 45px); } .preview-chat { position: relative; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; } .preview-chat span { display: block; width: 70%; height: 48px; border-radius: 14px; background: var(--panel-3); } .preview-chat span:nth-child(even) { align-self: flex-end; background: var(--accent-soft); } /* ---------- auth hero mockup ---------- */ .auth-mock { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .auth-mock-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--panel-2); } .auth-mock-avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); } .auth-mock-head strong { display: block; font-size: 0.95rem; } .auth-mock-status { display: flex; align-items: center; gap: 6px; color: var(--good); font-size: 0.8rem; } .auth-mock-status i { width: 7px; height: 7px; border-radius: 999px; background: var(--good); } .auth-mock-icons { margin-left: auto; display: flex; gap: 10px; color: var(--muted); } .auth-mock-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; gap: 10px; padding: 18px 16px; background: radial-gradient(circle at 80% 0%, var(--accent-softer), transparent 50%), var(--bg-accent); } /* Like a real chat: when there is spare room, messages hug the composer. */ .auth-mock-body > :first-child { margin-top: auto; } .mock-bubble { max-width: 78%; padding: 9px 13px; border-radius: 16px 16px 16px 5px; background: var(--bubble-in); border: 1px solid var(--bubble-in-line); font-size: 0.9rem; line-height: 1.4; box-shadow: var(--shadow-sm); animation: mock-in 360ms ease both; } .mock-bubble:nth-child(2) { animation-delay: 90ms; } .mock-bubble:nth-child(3) { animation-delay: 180ms; } .mock-bubble:nth-child(4) { animation-delay: 270ms; } .mock-bubble.out { align-self: flex-end; background: var(--bubble-out); border-color: var(--bubble-out-line); border-radius: 16px 16px 5px 16px; } .auth-mock-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--panel); } .auth-mock-foot > span:first-child { flex: 1; padding: 10px 14px; border-radius: 999px; background: var(--panel-2); color: var(--faint); font-size: 0.88rem; } .auth-mock-send { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--accent-ink); background: var(--accent); } .auth-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; } .auth-feature { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); color: var(--ink-soft); font-size: 0.84rem; font-weight: 600; } .auth-feature .ic { color: var(--accent); } /* Small brand footnote at the very bottom, centered on the page. */ .auth-est { margin: 0; padding-top: 12px; color: var(--muted); font-size: 0.76rem; letter-spacing: 0.02em; line-height: 1.5; max-width: 640px; text-align: center; } @keyframes mock-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .auth-card { align-self: stretch; flex: 0 1 440px; min-width: 320px; display: flex; flex-direction: column; justify-content: center; padding: 30px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .auth-card h2 { font-size: 1.55rem; letter-spacing: -0.01em; } .auth-forgot { display: block; width: 100%; margin-top: 10px; text-align: center; } .auth-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 20px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; } .auth-mode-tabs button { min-height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 600; transition: all 140ms ease; } .auth-mode-tabs button.active { background: var(--panel); color: var(--accent); box-shadow: var(--shadow-sm); } .auth-card p { margin-top: 8px; color: var(--muted); line-height: 1.5; } .auth-card form, .settings-form, .profile-form { display: grid; gap: 14px; margin-top: 20px; } label { display: grid; gap: 7px; color: var(--muted); font-size: 0.9rem; font-weight: 500; } input, textarea, select { width: 100%; min-width: 0; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 12px; padding: 11px 13px; outline: none; transition: border-color 140ms ease, box-shadow 140ms ease; } textarea { resize: vertical; } input::placeholder, textarea::placeholder { color: var(--faint); } input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* ---------- buttons ---------- */ .primary-button, .secondary-button, .text-button { border: 0; border-radius: 12px; font-weight: 600; transition: filter 140ms ease, transform 140ms ease, background 140ms ease, box-shadow 140ms ease; } .primary-button { background: var(--accent); color: var(--accent-ink); padding: 12px 16px; box-shadow: var(--shadow-sm); } .primary-button:hover { background: var(--accent-strong); transform: translateY(-1px); } .secondary-button { background: var(--panel); color: var(--ink); border: 1px solid var(--line); padding: 10px 13px; } .secondary-button:hover { background: var(--panel-2); transform: translateY(-1px); } .secondary-button.danger, .icon-button.danger { color: var(--danger); border-color: var(--danger); } .text-button { background: transparent; color: var(--accent); padding: 8px; } .text-button:hover { background: var(--accent-soft); } .icon-button, .primary-icon, .rail-button, .mobile-menu, .mobile-close { border: 0; border-radius: 12px; } .icon-button, .primary-icon, .mobile-menu, .mobile-close { width: 40px; height: 40px; display: inline-grid; place-items: center; flex: 0 0 40px; font-size: 1.05rem; transition: background 140ms ease, transform 140ms ease, color 140ms ease; } .icon-button, .mobile-menu, .mobile-close { background: var(--panel-2); color: var(--ink-soft); border: 1px solid var(--line); } .icon-button:hover, .mobile-menu:hover, .mobile-close:hover { background: var(--panel-3); transform: translateY(-1px); } .icon-button.selected { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .primary-icon { background: var(--accent); color: var(--accent-ink); } .primary-icon:hover { background: var(--accent-strong); transform: translateY(-1px); } .form-error, .dev-code, .toast { border-radius: 12px; padding: 11px 14px; } .form-error { margin-top: 14px; background: var(--danger-soft); color: var(--danger); font-size: 0.9rem; } .dev-code { margin-top: 14px; background: rgba(217, 119, 6, 0.12); color: var(--warn); border: 1px solid rgba(217, 119, 6, 0.3); font-size: 0.9rem; } /* ---------- app shell ---------- */ .app-shell { height: 100vh; /* Mobile browsers: use the dynamic viewport so the composer isn't hidden behind the URL bar. */ height: 100dvh; display: grid; grid-template-columns: 76px minmax(320px, 400px) minmax(0, 1fr); gap: 0; padding: 12px; background: var(--bg); } .rail, .sidebar, .conversation, .inspector { min-height: 0; } /* ---------- rail (icon nav) ---------- */ .rail { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px 10px; background: var(--rail-bg); color: var(--rail-ink); border-radius: var(--radius-lg); } .rail-avatar { width: 46px; height: 46px; padding: 0; border: 0; background: transparent; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12); } .rail-avatar img { width: 100%; height: 100%; object-fit: cover; } .rail-items { display: grid; gap: 8px; width: 100%; } .rail-button { position: relative; width: 48px; height: 48px; display: grid; place-items: center; background: transparent; color: var(--rail-ink); font-size: 1.2rem; transition: background 140ms ease, color 140ms ease; } .rail-button.active, .rail-button:hover { background: var(--rail-hover); color: var(--rail-ink-active); } .rail-button.active::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 999px; background: var(--accent); } .notification-dot { margin-top: auto; } .notification-dot em, .unread { min-width: 20px; height: 20px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--danger); color: #fff; font-size: 0.7rem; font-style: normal; font-weight: 700; } .notification-dot em { position: absolute; top: 4px; right: 4px; border: 2px solid var(--rail-bg); } .unread { background: var(--accent); color: var(--accent-ink); } /* ---------- sidebar ---------- */ .sidebar { display: flex; flex-direction: column; overflow: hidden; margin-left: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg) 0 0 var(--radius-lg); border-right: 0; } .sidebar-header { display: flex; align-items: center; gap: 12px; padding: 18px 18px 12px; } .sidebar-header h2, .sidebar-header p { margin: 0; } .sidebar-header h2 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; } .sidebar-header p { color: var(--muted); font-size: 0.8rem; } .sidebar-header > .icon-button, .sidebar-header > .secondary-button { margin-left: auto; } .mobile-close, .mobile-menu { display: none; } .search-box { display: flex; align-items: center; gap: 8px; margin: 0 16px 12px; padding: 0 13px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; } .search-box input { border: 0; background: transparent; padding-left: 0; box-shadow: none; } .chat-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0 16px 12px; } .chat-tabs-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } .chat-tabs button { min-width: 0; padding: 8px 6px; border: 0; background: var(--panel-2); color: var(--muted); border-radius: 999px; font-size: 0.78rem; font-weight: 600; transition: background 140ms ease, color 140ms ease; } .chat-tabs button.active, .chat-tabs button:hover { background: var(--accent-soft); color: var(--accent); } .chat-list, .contact-grid, .call-list, .notification-list, .settings-sidebar, .profile-sidebar { overflow: auto; } .chat-list { padding: 0 10px 16px; } .chat-item-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border-radius: var(--radius); } .chat-item { width: 100%; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 0; background: transparent; text-align: left; padding: 11px; border-radius: var(--radius); transition: background 140ms ease; } .chat-item:hover { background: var(--panel-2); } .chat-item.active { background: var(--accent-soft); } .chat-row-actions { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 4px; opacity: 0; pointer-events: none; transition: opacity 140ms ease; } .chat-item-row:hover .chat-row-actions, .chat-item-row.active .chat-row-actions { opacity: 1; pointer-events: auto; } .chat-row-actions .icon-button { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; background: var(--panel); box-shadow: var(--shadow-sm); } .avatar-wrap { position: relative; } .avatar-wrap img, .conversation-header img, .member-row img, .contact-card img { width: 48px; height: 48px; object-fit: cover; border-radius: 14px; } .type-badge { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; display: grid; place-items: center; color: #fff; background: var(--accent); border: 2px solid var(--panel); border-radius: 999px; font-size: 0.68rem; } .chat-meta, .chat-title-row, .chat-preview { min-width: 0; } .chat-title-row { display: flex; gap: 8px; align-items: center; } .chat-title-row strong, .chat-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-title-row strong { flex: 1; font-size: 0.95rem; font-weight: 600; } .chat-title-row small { color: var(--faint); font-size: 0.74rem; } .chat-preview { display: block; margin-top: 3px; color: var(--muted); font-size: 0.84rem; } .chat-labels { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } .chat-labels em { border-radius: 999px; background: var(--accent-soft); color: var(--accent); padding: 2px 8px; font-size: 0.68rem; font-style: normal; font-weight: 700; } /* ---------- conversation ---------- */ .conversation { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--bg-accent); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .conversation-header { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 14px 20px; background: var(--panel-glass); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); } .conversation-header h1, .conversation-header p { margin: 0; } /* The title block shrinks with ellipsis so the action buttons never overflow. */ .conversation-header > div { flex: 1 1 auto; min-width: 0; } .conversation-header h1 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conversation-header p { color: var(--muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .conversation-header .header-actions { flex: 0 0 auto; } .header-actions { margin-left: auto; display: flex; gap: 8px; } .pinned-bar, .reply-preview { display: flex; align-items: center; gap: 10px; margin: 12px 20px 0; padding: 10px 13px; background: var(--accent-softer); border: 1px solid var(--accent-soft); border-radius: 12px; text-align: left; min-width: 0; } .pinned-bar em, .reply-preview strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-style: normal; } .reply-preview { margin-bottom: 0; } .reply-preview button { margin-left: auto; border: 0; background: transparent; color: var(--muted); font-size: 1.2rem; } .message-list { overflow: auto; flex: 1 1 auto; min-height: 0; padding: 24px; display: flex; flex-direction: column; gap: 12px; } .message { display: flex; align-items: flex-end; gap: 10px; max-width: min(720px, 86%); } .message.own { align-self: flex-end; flex-direction: row-reverse; } .message > img, .msg-avatar, .msg-avatar-spacer { flex: 0 0 34px; width: 34px; height: 34px; object-fit: cover; border-radius: 10px; align-self: flex-end; } .avatar-button.msg-avatar { padding: 0; border: 0; background: transparent; cursor: pointer; line-height: 0; } .avatar-button.msg-avatar img { width: 34px; height: 34px; object-fit: cover; border-radius: 10px; } /* Grouped run: tighter spacing, spacer keeps alignment where the avatar would be. */ .msg-avatar-spacer { background: transparent; } .message.grouped { margin-top: -6px; } /* Direct chats have no avatar column at all. */ .message.no-avatar { gap: 0; } .msg-time { display: block; margin-top: 3px; font-size: 0.68rem; color: var(--muted); text-align: right; user-select: none; } .message.own .msg-time { color: var(--accent-ink-soft, rgba(255,255,255,0.65)); } .message-bubble { min-width: 0; background: var(--bubble-in); border: 1px solid var(--bubble-in-line); border-radius: 18px 18px 18px 6px; padding: 10px 13px; box-shadow: var(--shadow-sm); } .message.own .message-bubble { background: var(--bubble-out); border-color: var(--bubble-out-line); border-radius: 18px 18px 6px 18px; } /* Multi-line messages keep their line breaks (Shift+Enter). */ .message-bubble p { white-space: pre-wrap; overflow-wrap: anywhere; } .message-top, .message-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .message-top { margin-bottom: 4px; } .message-top strong { font-size: 0.82rem; font-weight: 600; } .message-top small { color: var(--faint); font-size: 0.74rem; } .message-bubble p { margin: 0; font-size: 0.95rem; line-height: 1.5; overflow-wrap: anywhere; } .reply-chip { padding: 7px 10px; margin-bottom: 8px; background: var(--accent-softer); border-left: 3px solid var(--accent); color: var(--muted); border-radius: 8px; font-size: 0.85rem; } .message-actions { margin-top: 8px; } .message-actions button { border: 0; background: var(--panel-3); color: var(--muted); border-radius: 999px; padding: 4px 10px; font-size: 0.74rem; transition: background 140ms ease, color 140ms ease; } .message-actions button:hover { background: var(--accent-soft); color: var(--accent); } .attachment { margin-top: 10px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; } .attachment span { grid-row: span 2; } .attachment button { grid-row: span 2; border: 1px solid var(--accent); background: transparent; color: var(--accent); border-radius: 999px; padding: 6px 12px; font-size: 0.78rem; font-weight: 600; } .attachment button:hover { background: var(--accent-soft); } .attachment strong, .attachment em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attachment em { color: var(--muted); font-style: normal; font-size: 0.8rem; } .invite-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .invite-input { font-size: 0.82rem; padding: 9px 11px; } .invite-hint { margin: 8px 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.4; } .attachment-image { display: block; margin-top: 10px; padding: 0; border: 1px solid var(--line); background: var(--panel-2); border-radius: 12px; overflow: hidden; /* Keeps photos readable even in a narrow bubble (never a few px wide). */ width: min(280px, 74vw); min-width: 180px; cursor: pointer; } .attachment-image img { display: block; width: 100%; min-height: 60px; max-height: 320px; object-fit: cover; } .attachment-image:hover { filter: brightness(0.97); } .link-preview { display: flex; margin-top: 10px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; overflow: hidden; background: var(--panel-2); text-decoration: none; color: inherit; transition: background 140ms ease; } .link-preview:hover { background: var(--panel-3); text-decoration: none; } .link-preview-image { width: 84px; min-height: 84px; object-fit: cover; flex: none; } .link-preview-meta { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; min-width: 0; } .link-preview-meta em { color: var(--accent); font-style: normal; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .link-preview-meta strong { font-size: 0.9rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .link-preview-meta span { color: var(--muted); font-size: 0.82rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .typing-line { color: var(--muted); padding-left: 44px; font-size: 0.85rem; } .composer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 46px; gap: 10px; align-items: end; padding: 14px 20px 18px; background: var(--panel-glass); border-top: 1px solid var(--line); backdrop-filter: blur(16px); } .composer-lead { display: flex; align-items: flex-end; gap: 6px; } .post-as-select { max-width: 140px; padding: 9px 10px; border-radius: 12px; background: var(--panel-2); font-size: 0.82rem; } .profile-avatar-edit { display: flex; align-items: center; gap: 14px; } .profile-avatar-edit img { width: 72px; height: 72px; border-radius: 20px; object-fit: cover; flex: none; background: var(--panel-3); } .is-hidden { display: none; } .composer textarea { min-height: 46px; /* Auto-grows with the text (autosizeComposer) up to ~12 lines. */ max-height: 300px; overflow-y: auto; background: var(--panel-2); border-radius: 14px; } .composer.channel-readonly { display: flex; justify-content: center; color: var(--muted); font-size: 0.88rem; } /* ---------- inspector ---------- */ .inspector { position: fixed; top: 12px; right: 12px; bottom: 12px; width: min(380px, 92vw); z-index: 30; display: flex; flex-direction: column; gap: 14px; padding: 16px 14px; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transform: translateX(calc(100% + 24px)); transition: transform 220ms ease; } .inspector.visible { transform: translateX(0); } .inspector-backdrop { position: fixed; inset: 0; z-index: 29; background: rgba(6, 10, 18, 0.35); animation: modal-fade 140ms ease; } .inspector-top { display: flex; align-items: center; justify-content: space-between; } .inspector-top strong { font-size: 1.05rem; font-weight: 800; } .inspector-settings { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; } .inspector-card, .contact-card, .call-card, .notification-card, .admin-block, .session-card, .metric-grid div { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; } .profile-cover { text-align: center; } .profile-cover img { width: 84px; height: 84px; object-fit: cover; border-radius: 20px; margin: 0 auto 12px; } .profile-cover h2, .profile-cover p, .profile-cover span, .inspector-card h3, .admin-block h3 { margin: 0; } .profile-cover p, .profile-cover span { display: block; margin-top: 6px; color: var(--muted); line-height: 1.4; } .inspector-card h3, .admin-block h3 { margin-bottom: 12px; font-size: 0.96rem; font-weight: 700; } .member-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 10px; align-items: center; gap: 10px; margin-top: 10px; } .member-row img { width: 40px; height: 40px; border-radius: 12px; } .member-row strong, .member-row span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .member-row span { color: var(--muted); font-size: 0.84rem; } .presence { width: 10px; height: 10px; border-radius: 999px; background: var(--faint); } .presence.online, .status-chip.online { background: var(--good); } .presence.away, .status-chip.away { background: var(--warn); } .feature-tags { display: flex; flex-wrap: wrap; gap: 8px; } .feature-tags span, .status-chip { border-radius: 999px; padding: 6px 10px; background: var(--panel-3); color: var(--muted); font-size: 0.8rem; } .status-chip { color: #fff; justify-self: start; } .status-chip.offline, .status-chip.ended { background: var(--faint); } .status-chip.active { background: var(--good); } .contact-grid, .call-list, .notification-list { display: grid; gap: 10px; padding: 0 14px 16px; } .user-search-form, .search-results, .session-panel { padding: 0 14px 16px; } .inline-search { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; } .search-results h3, .security-form h3, .session-panel h3 { margin: 0 0 10px; font-size: 0.96rem; font-weight: 700; } .search-results { display: grid; gap: 10px; } .result-card .primary-button, .result-card .secondary-button { grid-column: auto; padding: 10px 13px; } .contact-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; } .contact-info { min-width: 0; } .contact-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .contact-card p { margin: 3px 0 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; } .card-actions .primary-button, .card-actions .secondary-button { flex: 1 1 auto; min-width: 0; text-align: center; } .card-actions .icon-button { flex: 0 0 40px; } .section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .session-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; margin-bottom: 10px; } .session-card strong, .session-card p { display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .session-card p { color: var(--muted); margin-top: 4px; font-size: 0.84rem; } .call-card { display: flex; gap: 12px; align-items: center; justify-content: space-between; } .call-card strong, .call-card p { margin: 0; } .call-card p { color: var(--muted); margin-top: 5px; line-height: 1.35; } .metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 14px 16px; } .metric-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; } .metric-grid strong, .metric-grid span { display: block; } .metric-grid strong { font-size: 1.24rem; font-weight: 700; } .metric-grid span { color: var(--muted); font-size: 0.8rem; } .admin-block { margin: 0 14px 14px; } .admin-block p { margin: 7px 0; color: var(--muted); } .queue-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); } .queue-row:first-of-type { border-top: 0; } .queue-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .queue-row em { color: var(--good); font-style: normal; font-size: 0.8rem; } .notification-card strong, .notification-card p, .notification-card small { display: block; margin: 0; } .notification-card p { color: var(--muted); margin-top: 6px; line-height: 1.4; } .notification-card small { color: var(--faint); margin-top: 8px; } .unread-card { border-color: var(--accent); background: var(--accent-softer); } .settings-form, .profile-form { padding: 0 14px 20px; } .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); } /* Custom range slider (font size etc.). */ input[type="range"] { appearance: none; -webkit-appearance: none; width: 100%; height: 6px; margin: 10px 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); cursor: pointer; border: 0; padding: 0; } input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 6px rgba(6, 10, 18, 0.35); cursor: grab; transition: transform 120ms ease; } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); } input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 6px rgba(6, 10, 18, 0.35); cursor: grab; } input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); } input[type="range"]:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 4px; } /* Custom switch instead of the native checkbox. */ .toggle-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 44px; height: 24px; margin: 0; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); position: relative; cursor: pointer; transition: background 160ms ease, border-color 160ms ease; } .toggle-row input[type="checkbox"]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); box-shadow: 0 1px 3px rgba(6, 10, 18, 0.35); transition: transform 160ms ease, background 160ms ease; } .toggle-row input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } .toggle-row input[type="checkbox"]:checked::after { background: #fff; transform: translateX(20px); } .toggle-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; } .profile-photo { width: 92px; height: 92px; border-radius: 20px; object-fit: cover; margin: 0 auto; } .empty-state, .empty-conversation { color: var(--muted); } .empty-state { padding: 28px; text-align: center; } .empty-conversation { display: grid; place-items: center; } .empty-hero { max-width: 360px; text-align: center; padding: 24px; } .empty-hero-icon { width: 72px; height: 72px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 22px; color: var(--accent); background: var(--accent-soft); } .empty-hero-icon .ic { width: 32px; height: 32px; } .empty-hero h2 { margin: 0 0 8px; color: var(--ink); font-size: 1.25rem; letter-spacing: -0.01em; } .empty-hero p { margin: 0; line-height: 1.55; } .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--bg); box-shadow: var(--shadow-lg); z-index: 20; font-size: 0.9rem; } /* ---------- responsive ---------- */ @media (max-width: 1180px) { .app-shell { grid-template-columns: 76px minmax(300px, 360px) minmax(0, 1fr); } } /* Bottom tab bar: hidden on desktop, shown on phones. */ .mobile-tabbar { display: none; } .chat-item-row .pin-dot .ic { width: 12px; height: 12px; color: var(--muted); vertical-align: -1px; } .msg-menu-item.active { color: var(--accent); font-weight: 600; } @media (max-width: 820px) { .auth-shell { padding: 20px 16px 14px; overflow: auto; } .auth-columns { flex-direction: column; align-items: center; gap: 18px; padding: 14px 0; } .auth-visual, .auth-card { width: 100%; max-width: 560px; flex: 0 0 auto; min-width: 0; } /* The login form goes first on small screens; the demo mock follows. */ .auth-card { order: -1; justify-content: flex-start; } .brand-lockup { margin-bottom: 0; justify-content: center; } .brand-logo { width: 64px; height: 64px; } .brand-lockup h1 { font-size: 1.7rem; } .auth-features { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .device-preview { min-height: 240px; height: 32vh; } /* Single column + bottom tab bar instead of the left rail. */ .app-shell { grid-template-columns: minmax(0, 1fr); padding: 0; padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); } .rail { display: none; } .mobile-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--panel-glass); backdrop-filter: blur(16px); border-top: 1px solid var(--line); } .tabbar-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 7px; border: 0; background: transparent; color: var(--muted); font-size: 0.68rem; cursor: pointer; } .tabbar-btn .ic { width: 23px; height: 23px; } .tabbar-btn.active { color: var(--accent); } .tabbar-avatar { width: 23px; height: 23px; border-radius: 50%; object-fit: cover; } /* One screen at a time: either the list (sidebar) or the open conversation. */ .sidebar, .conversation { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); width: 100vw; margin: 0; border: 0; border-radius: 0; overflow: hidden; } .sidebar { display: none; z-index: 12; } .conversation { display: flex; z-index: 8; } .sidebar-visible .sidebar { display: flex; } .sidebar-visible .conversation { display: none; } .mobile-close, .mobile-menu { display: inline-grid; } .conversation-header { padding: 12px; } .conversation-header p { max-width: 48vw; } .header-actions { gap: 4px; } .header-actions .icon-button { width: 36px; height: 36px; flex-basis: 36px; } .message { max-width: 96%; } .message-list { padding: 16px 12px; } .message-actions { flex-wrap: wrap; } .composer { padding: 12px; } .post-as-select { max-width: 110px; } .chat-search-bar { padding: 8px 12px; } .pinned-bar, .reply-preview, .upload-progress { margin: 10px 12px 0; } .scroll-down { right: 14px; bottom: 86px; } .inspector { top: 8px; right: 8px; bottom: 8px; } } @media (max-width: 480px) { /* Calls are stubs; free header space for what works on tiny screens. */ .header-actions [data-action="start-voice"], .header-actions [data-action="start-video"] { display: none; } .conversation-header img { width: 38px; height: 38px; } .conversation-header p { display: none; } .composer { grid-template-columns: auto minmax(0, 1fr) auto 40px; gap: 6px; padding: 10px 8px; } .composer .icon-button, .composer .primary-icon { width: 36px; height: 36px; flex: 0 0 36px; } .composer textarea { min-height: 40px; } .post-as-select { max-width: 84px; font-size: 0.74rem; } } @media (max-width: 600px) { /* Keep the phone screen focused on the login form. */ .auth-mock { display: none; } .auth-card { padding: 22px 18px; } .chat-tabs button { padding: 8px 10px; font-size: 0.8rem; } .conversation-header h1 { font-size: 0.95rem; } .attachment-image img { max-width: min(240px, 70vw); } } /* ---------- modal layer ---------- */ #modalRoot:empty { display: none; } .modal-overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(6, 10, 18, 0.55); backdrop-filter: blur(4px); animation: modal-fade 140ms ease; } .modal { width: min(480px, 100%); max-height: min(86vh, 720px); display: flex; flex-direction: column; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: modal-pop 160ms ease; } .modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); } .modal-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .modal-head .icon-button { margin-left: auto; } .modal-body { padding: 20px; overflow: auto; display: grid; gap: 16px; } .modal-text { margin: 0; color: var(--ink-soft); line-height: 1.55; } .modal-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line); } .modal-foot .primary-button, .modal-foot .secondary-button { min-width: 0; flex: 1 1 auto; max-width: max-content; padding-left: 18px; padding-right: 18px; text-align: center; white-space: nowrap; } @media (max-width: 600px) { .modal-foot .primary-button, .modal-foot .secondary-button { flex: 1 1 40%; max-width: none; } } .modal-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .modal-field { display: grid; gap: 7px; color: var(--muted); font-size: 0.9rem; font-weight: 500; } .modal-field-label { color: var(--muted); font-size: 0.9rem; font-weight: 500; } .modal-list { display: grid; gap: 8px; max-height: 320px; overflow: auto; } .modal-checklist { padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); } .modal-row, .modal-check { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-2); } .modal-check { grid-template-columns: 20px 42px minmax(0, 1fr); border: 0; background: transparent; cursor: pointer; } .modal-check:hover { background: var(--panel-3); } /* Custom square checkbox with a drawn checkmark. */ .modal-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 6px; border: 2px solid var(--line); background: var(--panel); display: grid; place-items: center; cursor: pointer; transition: background 140ms ease, border-color 140ms ease; } .modal-check input[type="checkbox"]::after { content: ''; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) scale(0); transform-origin: center; margin-top: -2px; transition: transform 140ms ease; } .modal-check input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } .modal-check input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); } .modal-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; } .modal-row img, .modal-check img { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; } .modal-row-meta { min-width: 0; display: grid; } .modal-row-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .modal-row-meta span { color: var(--muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .modal-row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } @keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 520px) { .modal-search { grid-template-columns: 1fr; } .modal-row, .modal-row-actions { grid-template-columns: 42px minmax(0, 1fr); } .modal-row-actions { grid-column: 1 / -1; justify-content: stretch; } .modal-row-actions .primary-button, .modal-row-actions .secondary-button { flex: 1 1 auto; } } /* ---------- defensive overflow guards ---------- */ button { max-width: 100%; } .primary-button, .secondary-button, .text-button, .chat-tabs button, .message-actions button { overflow: hidden; text-overflow: ellipsis; } .chat-tabs button { white-space: nowrap; } .app-shell > *, .sidebar, .conversation, .inspector, .chat-item, .message, .contact-card, .session-card, .queue-row, .call-card { min-width: 0; } /* ---------- in-chat search ---------- */ .chat-search-bar { display: flex; align-items: center; gap: 8px; padding: 8px 20px; background: var(--panel-glass); border-bottom: 1px solid var(--line); } .chat-search-bar input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); } .chat-search-bar em { color: var(--muted); font-size: 0.8rem; font-style: normal; white-space: nowrap; } .chat-search-bar .ic { width: 16px; height: 16px; } mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 1px; } .message.search-current .message-bubble { outline: 2px solid var(--accent); outline-offset: 1px; } .message.flash .message-bubble { animation: bubble-flash 1.4s ease; } .message.removing { animation: msg-remove 260ms cubic-bezier(0.4, 0, 0.2, 1) forwards; overflow: hidden; pointer-events: none; transform-origin: center left; } .message.own.removing { transform-origin: center right; } @keyframes msg-remove { 0% { opacity: 1; transform: translateX(0) scale(1); max-height: 400px; } 35% { opacity: 0; transform: translateX(-16px) scale(0.92); } 100% { opacity: 0; transform: scale(0.85); max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; } } .message.own.removing { animation-name: msg-remove-own; } @keyframes msg-remove-own { 0% { opacity: 1; transform: translateX(0) scale(1); max-height: 400px; } 35% { opacity: 0; transform: translateX(16px) scale(0.92); } 100% { opacity: 0; transform: scale(0.85); max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; } } @keyframes bubble-flash { 0%, 60% { background: var(--accent-softer); border-color: var(--accent); } 100% { } } /* ---------- scroll to bottom ---------- */ .scroll-down { position: absolute; right: 22px; bottom: 96px; z-index: 5; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--muted); box-shadow: var(--shadow); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 140ms ease, transform 140ms ease; } .scroll-down.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } /* ---------- upload progress ---------- */ .upload-progress { display: flex; align-items: center; gap: 10px; margin: 12px 20px 0; padding: 10px 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; font-size: 0.85rem; } .upload-progress-name { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upload-progress-name .ic { width: 15px; height: 15px; color: var(--accent); } .upload-progress-track { flex: 1; height: 6px; border-radius: 4px; background: var(--panel-2); overflow: hidden; } .upload-progress-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); border-radius: 4px; transition: width 160ms ease; } .upload-progress em { color: var(--muted); font-style: normal; min-width: 38px; text-align: right; } /* ---------- voice recording ---------- */ .composer.recording-bar { display: flex; align-items: center; gap: 12px; } .rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); animation: rec-pulse 1.1s ease infinite; } @keyframes rec-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } } .rec-hint { color: var(--muted); font-size: 0.88rem; flex: 1; } .attachment-audio { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; } .attachment-audio audio { width: min(320px, 100%); height: 38px; } .attachment-audio em { color: var(--muted); font-size: 0.78rem; font-style: normal; } /* ---------- reply quote in bubble ---------- */ .reply-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; border: 0; border-left: 3px solid var(--accent); cursor: pointer; text-align: left; font: inherit; font-size: 0.85rem; } .reply-chip strong { color: var(--accent); font-size: 0.8rem; } .reply-chip span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .reply-preview-meta { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .reply-preview-meta strong { font-size: 0.82rem; } .reply-preview-meta em { color: var(--muted); font-style: normal; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- image lightbox ---------- */ .modal-lightbox { width: min(860px, 94vw); max-height: 92vh; } .lightbox-body { display: grid; place-items: center; padding: 8px 16px; min-height: 200px; overflow: auto; } .lightbox-body img { max-width: 100%; max-height: 68vh; border-radius: 12px; object-fit: contain; } /* ---------- message context menu ---------- */ #menuRoot:empty { display: none; } .msg-menu-backdrop { position: fixed; inset: 0; z-index: 60; } .msg-menu { position: fixed; z-index: 61; min-width: 200px; padding: 8px; display: flex; flex-direction: column; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); animation: modal-fade 120ms ease; } .msg-menu-reactions { display: flex; gap: 4px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); } .msg-menu-reactions button { flex: 1; border: 0; background: transparent; font-size: 1.25rem; padding: 6px 4px; border-radius: 10px; cursor: pointer; transition: background 120ms ease, transform 120ms ease; } .msg-menu-reactions button:hover { background: var(--panel-2); transform: scale(1.15); } .msg-menu-item { border: 0; background: transparent; color: var(--ink); text-align: left; padding: 9px 12px; border-radius: 10px; font-size: 0.92rem; cursor: pointer; } .msg-menu-item:hover { background: var(--panel-2); } .msg-menu-item.danger { color: var(--danger); } .msg-menu-item.with-icon { display: flex; align-items: center; gap: 10px; } .msg-menu-item.with-icon .ic { width: 17px; height: 17px; color: var(--accent); } .message-menu-btn { font-weight: 700; letter-spacing: 1px; } /* ---------- clickable avatars & member rows ---------- */ .avatar-button { border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 10px; line-height: 0; } .avatar-button img { width: 34px; height: 34px; object-fit: cover; border-radius: 10px; } button.member-row { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; border-radius: 10px; } button.member-row:hover { background: var(--panel-2); } /* ---------- settings section links ---------- */ .settings-links { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .settings-link { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); color: var(--ink); font-size: 0.95rem; font-weight: 600; cursor: pointer; text-align: left; } .settings-link:hover { background: var(--panel-3); } .settings-link .ic { color: var(--accent); } .settings-link span { flex: 1; } .settings-link .ic:last-child { color: var(--muted); transform: rotate(-90deg); } /* ---------- profile info rows ---------- */ .profile-info-rows { width: 100%; display: flex; flex-direction: column; gap: 2px; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); padding: 6px 0; } .profile-info-rows:empty { display: none; } .profile-info-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 14px; font-size: 0.9rem; } .profile-info-row span { color: var(--muted); flex: 0 0 auto; } .profile-info-row strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- user profile modal ---------- */ .user-profile-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 8px 0 4px; } .user-profile-avatar { width: 96px; height: 96px; border-radius: 24px; object-fit: cover; margin-bottom: 6px; } .user-profile-card h3 { margin: 0; font-size: 1.2rem; } .user-profile-nick { margin: 0; color: var(--muted); font-size: 0.9rem; display: flex; align-items: center; gap: 8px; } .user-profile-bio { margin: 6px 0 0; font-size: 0.92rem; line-height: 1.5; } .user-profile-meta { margin: 4px 0 0; color: var(--muted); font-size: 0.8rem; } /* ---------- iPhone safe areas (Dynamic Island / home indicator) ---------- Desktop/tablet only: on phones the mobile layout manages its own offsets. */ @media (min-width: 821px) { .app-shell { padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding-left: calc(12px + env(safe-area-inset-left, 0px)); padding-right: calc(12px + env(safe-area-inset-right, 0px)); } } .auth-shell { padding-top: calc(32px + env(safe-area-inset-top, 0px)); padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } @media (max-width: 820px) { .auth-shell { padding-top: calc(20px + env(safe-area-inset-top, 0px)); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }