/* =========================================================
speak โ clean redesign
single accent, flat surfaces, sharp typography
========================================================= */
* { box-sizing: border-box; }
:root {
/* premium near-black โ deep, cool, elegant (Linear/Vercel-inspired) */
--bg: #08090a;
--surface: #101113;
--surface-2: #17181b;
--elevated: #1d1f23;
--border: rgba(255,255,255,.08);
--border-2: rgba(255,255,255,.14);
--text: #f7f8f8;
--muted: #8a8f98;
--soft: #c9cdd3;
/* refined muted indigo โ sophisticated, not the harsh AI default */
--accent: #5e6ad2;
--accent-hover: #6b77e0;
--accent-soft: rgba(94, 106, 210, 0.16);
--danger: #e5484d;
--good: #45b26b;
--ink: #000;
/* generous, soft geometry */
--radius: 10px;
--radius-sm: 8px;
--radius-lg: 14px;
/* soft, diffuse elevation */
--shadow-sm: 0 1px 2px rgba(0,0,0,.3);
--shadow-md: 0 8px 24px -10px rgba(0,0,0,.55);
--shadow-lg: 0 28px 64px -24px rgba(0,0,0,.7);
/* type: Apple San Francisco (SF Pro Display / SF Pro Text / SF Mono) + Inter fallback */
--font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Pro", "Inter", system-ui, sans-serif;
--font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter", system-ui, sans-serif;
--font-mono: ui-monospace, "SF Mono", "SFProMono-Regular", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--hdr-h: 56px;
--dock-h: 72px;
}
/* signature default theme โ premium onyx glass */
body[data-theme="onyx"] {
--bg: #090a10;
--surface: #121420;
--surface-2: #191c2e;
--border: #242942;
--border-2: #333a5c;
--text: #f0f2fe;
--muted: #7c83a0;
--soft: #c3c8e2;
--accent: #6366f1;
--accent-hover: #7376f5;
--accent-soft: rgba(99, 102, 241, 0.16);
}
/* 2. Amethyst Violet ๐ */
body[data-theme="violet"] {
--bg: #0d0714;
--surface: #170d24;
--surface-2: #231438;
--border: #381e59;
--border-2: #522c82;
--text: #f3e8ff;
--muted: #a88bc4;
--soft: #d8b4fe;
--accent: #a855f7;
--accent-hover: #c084fc;
--accent-soft: rgba(168, 85, 247, 0.22);
}
/* 3. Cyberpunk Neon โก */
body[data-theme="cyberpunk"] {
--bg: #06040d;
--surface: #120c24;
--surface-2: #1b1336;
--border: #2b1c4e;
--border-2: #43297a;
--text: #f5f0ff;
--muted: #8f7ea6;
--soft: #d6c9ed;
--accent: #00f0ff;
--accent-hover: #33f3ff;
--accent-soft: rgba(0, 240, 255, 0.18);
}
/* 3. Aurora Borealis ๐ */
body[data-theme="aurora"] {
--bg: #040f12;
--surface: #0b1e22;
--surface-2: #122b31;
--border: #1d4047;
--border-2: #2a5c66;
--text: #e8faf7;
--muted: #7aa6a0;
--soft: #c2e5e0;
--accent: #14b8a6;
--accent-hover: #2dd4bf;
--accent-soft: rgba(20, 184, 166, 0.18);
}
/* 4. Sunset Rose ๐
*/
body[data-theme="sunset"] {
--bg: #12080c;
--surface: #201017;
--surface-2: #2d1822;
--border: #422232;
--border-2: #5e3047;
--text: #fff0f3;
--muted: #ad7f8e;
--soft: #e2becb;
--accent: #fb7185;
--accent-hover: #fc8a98;
--accent-soft: rgba(251, 113, 133, 0.18);
}
/* 5. Midnight OLED ๐ */
body[data-theme="midnight"] {
--bg: #000000;
--surface: #0d0d12;
--surface-2: #16161f;
--border: #222230;
--border-2: #323246;
--text: #f1f5f9;
--muted: #64748b;
--soft: #cbd5e1;
--accent: #38bdf8;
--accent-hover: #59c8fa;
--accent-soft: rgba(56, 189, 248, 0.16);
}
/* 6. Nordic Light โ๏ธ */
body[data-theme="white"] {
--bg: #f4f5f8;
--surface: #ffffff;
--surface-2: #eef0f5;
--border: #e0e3eb;
--border-2: #d0d5e3;
--text: #0f172a;
--muted: #64748b;
--soft: #334155;
--accent: #4f46e5;
--accent-hover: #6366f1;
--accent-soft: rgba(79, 70, 229, 0.12);
}
/* 7. Custom Background ๐ผ๏ธ */
body[data-theme="custom"] {
--bg: #090b14;
--surface: rgba(15, 18, 32, 0.78);
--surface-2: rgba(22, 27, 46, 0.84);
--border: rgba(255, 255, 255, 0.15);
--border-2: rgba(255, 255, 255, 0.25);
--text: #ffffff;
--muted: #cbd5e1;
--soft: #f1f5f9;
--accent: #6366f1;
--accent-hover: #818cf8;
--accent-soft: rgba(99, 102, 241, 0.25);
background-image: linear-gradient(rgba(10, 12, 20, 0.52), rgba(10, 12, 20, 0.52)), var(--custom-bg-url) !important;
background-size: cover !important;
background-position: center center !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
}
body[data-theme="custom"] .app-bg {
opacity: 0.35;
}
/* ---- base ---- */
html, body { margin: 0; min-height: 100vh; }
body {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.5;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
position: relative;
overflow-x: hidden;
}
/* subtle grid pattern background */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
radial-gradient(circle at 0% 0%, var(--accent-soft), transparent 40%),
radial-gradient(circle at 100% 100%, var(--accent-soft), transparent 40%);
opacity: .6;
}
body:is([data-theme="white"],[data-theme="nord"])::before { opacity: .9; }
/* Animated aurora background. A child of at z-index:-1, so it paints
above the body's base background but below all in-flow content (.hdr/.page/
etc. are z-index:1) โ visible in the gaps and margins around panels. Two
large blurred blobs in the theme accent (var(--accent)) drift slowly for a
calm, living atmosphere and re-color automatically when the theme changes.
Toggle off via Settings (.no-bg-anim); frozen by global .no-anim (its
*::before/::after rule) and by prefers-reduced-motion. */
.app-bg {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.app-bg::before,
.app-bg::after {
content: "";
position: absolute;
width: 65vmax;
height: 65vmax;
border-radius: 50%;
filter: blur(80px);
will-change: transform;
}
.app-bg::before {
background: radial-gradient(circle at center, var(--accent), transparent 62%);
top: -22vmax;
left: -16vmax;
opacity: 0.40;
animation: auroraDrift1 26s ease-in-out infinite alternate;
}
.app-bg::after {
background: radial-gradient(circle at center, var(--accent-hover), transparent 62%);
bottom: -26vmax;
right: -20vmax;
opacity: 0.32;
animation: auroraDrift2 33s ease-in-out infinite alternate;
}
@keyframes auroraDrift1 {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(24vmax, 18vmax) scale(1.25); }
}
@keyframes auroraDrift2 {
from { transform: translate(0, 0) scale(1.1); }
to { transform: translate(-22vmax, -15vmax) scale(0.9); }
}
.no-bg-anim .app-bg { display: none; }
@media (prefers-reduced-motion: reduce) {
.app-bg::before,
.app-bg::after { animation: none; }
}
.hdr, .page, .dock, .log-pop, .toasts, .kbd-hint, .modal { position: relative; z-index: 1; }
.dock, .log-pop, .toasts, .kbd-hint, .modal { z-index: 40; }
button, input { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
input { border: 0; background: none; outline: none; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
/* =========================================================
HEADER
========================================================= */
.hdr {
position: sticky;
top: 0;
z-index: 30;
height: var(--hdr-h);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.hdr-left,
.hdr-right { display: flex; align-items: center; gap: 16px; }
.logo { display: flex; align-items: center; gap: 9px; }
.logo-dot {
width: 9px; height: 9px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.logo-name { font-weight: 600; letter-spacing: -0.01em; }
.hdr-room {
color: var(--muted);
font-size: 13px;
display: flex; align-items: center; gap: 8px;
padding-left: 16px;
border-left: 1px solid var(--border);
}
.hdr-room .hdr-room-name { color: var(--text); font-weight: 500; }
.hdr-room b { color: var(--text); font-weight: 500; }
.hdr-sep { opacity: .5; }
.badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
color: var(--muted);
background: var(--surface);
border: 1px solid var(--border);
}
.badge::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--muted);
}
.badge.online { color: var(--good); border-color: rgba(52, 211, 153, .35); }
.badge.online::before { background: var(--good); box-shadow: 0 0 8px var(--good); }
.icon-btn {
width: 32px; height: 32px;
display: grid; place-items: center;
border-radius: var(--radius-sm);
color: var(--soft);
transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--surface); color: var(--text); }
.icon-btn.active { color: #f59e0b; background: rgba(245, 158, 11, 0.14); }
.hdr-lock {
color: #f59e0b;
font-weight: 500;
white-space: nowrap;
}
/* dropdown menu */
.hdr-menu { position: relative; }
.hdr-menu [data-menu-toggle] { color: var(--text); opacity: .85; }
.hdr-menu [data-menu-toggle]:hover { opacity: 1; }
.menu-pop {
position: absolute;
top: calc(100% + 6px); right: 0;
min-width: 260px;
padding: 8px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: 0 12px 32px rgba(0,0,0,.32);
opacity: 0; visibility: hidden;
transform: translateY(-4px);
transition: opacity .15s, transform .15s, visibility .15s;
}
.hdr-menu.open .menu-pop { opacity: 1; visibility: visible; transform: none; }
.menu-section { padding: 6px; }
.menu-section + .menu-section { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; }
.menu-label {
font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
color: var(--muted); margin-bottom: 8px;
}
.menu-item {
width: 100%; text-align: left;
padding: 8px 10px;
border-radius: var(--radius-sm);
color: var(--soft); font-size: 13px;
transition: background .15s, color .15s;
}
.menu-item:hover { background: var(--surface-2); color: var(--text); }
/* theme picker */
.theme-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
width: 232px; /* fits 7 buttons (28px) per row */
max-width: 100%;
}
.theme-option {
width: 28px; height: 28px;
border-radius: var(--radius-sm);
display: grid; place-items: center;
border: 1px solid var(--border);
transition: border-color .15s, transform .12s;
padding: 0;
flex: 0 0 auto;
}
.theme-option:hover { border-color: var(--border-2); }
.theme-option.active { border-color: var(--accent); }
.theme-option:active { transform: scale(.94); }
.theme-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
margin-top: 8px;
width: 100%;
}
.theme-card {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.09);
backdrop-filter: blur(12px);
color: var(--text);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
user-select: none;
overflow: hidden;
}
.theme-card:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.theme-card:active {
transform: scale(0.97);
}
.theme-card.active {
background: var(--accent-soft);
border-color: var(--accent);
color: #ffffff;
font-weight: 600;
box-shadow: 0 0 0 1px var(--accent), 0 8px 20px var(--accent-soft);
}
.theme-swatch {
width: 22px;
height: 22px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4);
position: relative;
transition: transform 0.2s ease;
}
.theme-card:hover .theme-swatch {
transform: scale(1.1);
}
.s-onyx { background: linear-gradient(135deg, #6366f1 30%, #1e1b4b 100%); }
.s-violet { background: linear-gradient(135deg, #a855f7 0%, #3b0764 100%); }
.s-cyberpunk { background: linear-gradient(135deg, #00f0ff 0%, #ff007f 100%); }
.s-aurora { background: linear-gradient(135deg, #14b8a6 0%, #064e3b 100%); }
.s-sunset { background: linear-gradient(135deg, #fb7185 0%, #881337 100%); }
.s-midnight { background: linear-gradient(135deg, #38bdf8 0%, #0f172a 100%); }
.s-white { background: linear-gradient(135deg, #4f46e5 0%, #e0e7ff 100%); }
.s-custom { background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 50%, #3b82f6 100%); }
.custom-bg-wrap {
margin-top: 12px;
padding: 12px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px dashed rgba(255, 255, 255, 0.15);
display: flex;
flex-direction: column;
gap: 10px;
}
.custom-bg-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* =========================================================
PAGE
========================================================= */
.page {
max-width: 1200px;
margin: 0 auto;
padding: 32px 20px 120px;
}
/* ---- welcome ---- */
[hidden] { display: none !important; }
/* Official Apple 3D iOS emoji rendering */
img.apple-emoji, img.tw-emoji {
height: 1.25em;
width: 1.25em;
vertical-align: -0.2em;
display: inline-block;
margin: 0 0.05em;
user-select: none;
pointer-events: none;
object-fit: contain;
}
/* Larger emojis inside the emoji picker */
.emoji-pop img.apple-emoji, .emoji-pop img.tw-emoji,
.emoji-trigger img.apple-emoji, .emoji-trigger img.tw-emoji {
height: 1.4em;
width: 1.4em;
vertical-align: middle;
}
.emoji-btn img.apple-emoji, .emoji-btn img.tw-emoji {
height: 24px;
width: 24px;
vertical-align: middle;
}
.ios-emoji-tab img.apple-emoji, .ios-emoji-tab img.tw-emoji {
height: 18px;
width: 18px;
vertical-align: middle;
}
/* Reactions */
.reaction-btn img.apple-emoji, .reaction-btn img.tw-emoji,
.reaction img.apple-emoji, .reaction img.tw-emoji {
height: 1em;
width: 1em;
vertical-align: -0.12em;
}
.welcome {
display: grid;
place-items: center;
min-height: calc(100vh - var(--hdr-h) - 64px);
}
.welcome-card {
width: 100%; max-width: 460px;
padding: 36px 28px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.welcome h1 {
font-size: 28px;
margin-bottom: 6px;
letter-spacing: -0.025em;
}
.welcome-sub { color: var(--muted); margin: 0 0 28px; font-size: 14px; }
.form { display: flex; flex-direction: column; }
.form label {
font-size: 12px;
color: var(--muted);
margin-bottom: 6px;
margin-top: 14px;
font-weight: 500;
}
.form label:first-child { margin-top: 0; }
.form input,
.chat-input-row input {
width: 100%;
height: 40px;
padding: 0 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text);
font-size: 14px;
transition: border-color .15s, background .15s;
}
.form input::placeholder,
.chat-input-row input::placeholder { color: var(--muted); }
.form input:focus,
.chat-input-row input:focus {
border-color: var(--accent);
background: var(--surface);
}
.btn {
height: 38px;
padding: 0 16px;
border-radius: var(--radius);
background: var(--surface-2);
color: var(--text);
font-size: 13px; font-weight: 500;
border: 1px solid var(--border);
transition: background .15s, border-color .15s, transform .1s;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn:hover:not(:disabled) { background: var(--surface); border-color: var(--border-2); }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary {
background: var(--accent);
color: #fff;
border-color: transparent;
}
.btn-primary:hover:not(:disabled) {
background: var(--accent-hover);
border-color: transparent;
}
.btn-block { width: 100%; margin-top: 22px; height: 42px; font-size: 14px; }
.link-btn {
color: var(--muted); font-size: 13px;
padding: 4px 8px; border-radius: var(--radius-sm);
transition: color .15s, background .15s;
}
.link-btn:hover { color: var(--text); background: var(--surface-2); }
/* ---- rooms list ---- */
.rooms-block { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.rooms-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 10px;
}
.rooms-title {
font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
color: var(--muted); font-weight: 600;
}
.rooms-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.room-item {
padding: 10px 12px;
border-radius: var(--radius);
background: transparent;
border: 1px solid transparent;
cursor: pointer;
transition: background .12s, border-color .12s;
display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.room-item:hover { background: var(--surface-2); border-color: var(--border); }
.room-name { font-weight: 500; font-size: 14px; }
.room-count { color: var(--muted); font-size: 12px; }
.empty {
padding: 20px 8px;
text-align: center;
color: var(--muted);
font-size: 13px;
}
/* =========================================================
ROOM VIEW
========================================================= */
.room-view {
display: grid;
grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) clamp(300px, 26vw, 560px);
grid-template-rows: auto 1fr;
gap: 20px;
height: calc(100vh - var(--hdr-h) - var(--dock-h) - 64px);
min-height: 540px;
}
.room-hero { grid-column: 1 / -1; }
.room-tabs { display: none; } /* mobile-only segmented switch (see โค640) */
/* ===== Room hero banner ===== */
.room-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding: 16px 20px;
background: linear-gradient(135deg,
color-mix(in srgb, var(--accent) 16%, var(--surface)),
var(--surface));
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.rh-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rh-icon {
flex-shrink: 0;
width: 46px; height: 46px;
display: grid; place-items: center;
font-size: 22px; font-weight: 700;
color: #fff;
background: var(--accent);
border-radius: 14px;
}
.rh-info { min-width: 0; }
.rh-name {
font-size: 22px; font-weight: 700; line-height: 1.1;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rh-stats { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.rh-stats b { color: var(--text); }
.rh-dot { opacity: .5; }
.rh-lock { color: var(--accent); }
.rh-side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.invite-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; }
/* ===== Connection status pill ===== */
.status-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 12px;
background: var(--surface-2, var(--surface));
border: 1px solid var(--border);
border-radius: 999px;
font-size: 12px; font-weight: 600; color: var(--muted);
white-space: nowrap;
}
.status-pill .sp-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--muted);
box-shadow: 0 0 0 0 transparent;
}
.status-pill[data-q="good"] .sp-dot { background: #22c55e; box-shadow: 0 0 8px #22c55e88; }
.status-pill[data-q="medium"] .sp-dot { background: #eab308; box-shadow: 0 0 8px #eab30888; }
.status-pill[data-q="bad"] .sp-dot { background: #ef4444; box-shadow: 0 0 8px #ef444488; }
/* ===== Member stage (central tiles) ===== */
.col-stage {
background: transparent;
border: none;
overflow-y: auto;
padding: 4px;
}
.stage-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 14px;
align-content: start;
}
.stage-tile {
position: relative;
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 20px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
cursor: pointer;
transition: transform .14s, border-color .14s, box-shadow .14s;
}
.stage-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.stage-tile.speaking {
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent),
0 0 18px color-mix(in srgb, var(--accent) 35%, transparent);
}
.stage-avatar {
width: 64px; height: 64px; border-radius: 50%;
display: grid; place-items: center;
font-size: 26px; font-weight: 700; color: #fff;
background: var(--accent);
background-size: cover; background-position: center;
position: relative;
}
.stage-tile.speaking .stage-avatar::after {
content: ""; position: absolute; inset: -5px;
border-radius: 50%;
border: 2px solid var(--accent);
animation: stagePulse 1.4s ease-out infinite;
}
@keyframes stagePulse {
0% { transform: scale(1); opacity: .8; }
100% { transform: scale(1.25); opacity: 0; }
}
.stage-name {
max-width: 100%;
font-size: 14px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
text-align: center;
}
.stage-tags { display: flex; align-items: center; gap: 6px; }
.stage-host {
font-size: 10px; font-weight: 700; text-transform: uppercase;
padding: 2px 7px; border-radius: 6px;
background: color-mix(in srgb, var(--accent) 22%, transparent);
color: var(--accent);
}
.stage-mic { font-size: 13px; opacity: .7; }
.stage-empty {
grid-column: 1 / -1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; padding: 48px 16px;
color: var(--muted); text-align: center;
}
.stage-empty .se-icon { font-size: 38px; opacity: .5; }
/* ===== Chat onboarding (empty state) ===== */
.chat-onboard {
margin: auto;
max-width: 360px;
padding: 28px 24px;
text-align: center;
color: var(--muted);
}
.chat-onboard .cob-icon { font-size: 40px; opacity: .6; }
.chat-onboard .cob-title { font-size: 17px; font-weight: 700; color: var(--text); margin-top: 10px; }
.chat-onboard .cob-sub { font-size: 13px; margin-top: 6px; }
.chat-onboard .cob-list {
list-style: none; margin: 16px 0 0; padding: 0;
display: flex; flex-direction: column; gap: 10px;
font-size: 13px; text-align: left;
}
.chat-onboard .cob-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat-onboard kbd {
font-family: inherit; font-size: 12px; font-weight: 600;
padding: 2px 7px; border-radius: 6px;
background: var(--surface-2, var(--surface));
border: 1px solid var(--border);
color: var(--text);
}
.col {
display: flex; flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.col-head {
padding: 16px 18px;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
}
.col-title { font-size: 15px; font-weight: 600; }
.col-sub { font-size: 12px; color: var(--muted); display: block; margin-top: 2px; }
/* ---- users ---- */
.users-list {
flex: 1;
overflow-y: auto;
padding: 8px;
display: flex; flex-direction: column; gap: 2px;
}
.user-card {
padding: 10px 12px;
border-radius: var(--radius);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
cursor: pointer;
transition: background .12s;
border: 1px solid transparent;
position: relative;
}
.user-card:hover { background: var(--surface-2); }
.user-card.speaking {
background: var(--accent-soft);
border-color: var(--accent);
}
.user-top {
display: contents; /* let avatar+meta participate in card flex */
}
.avatar {
flex-shrink: 0;
width: 34px; height: 34px;
border-radius: 50%;
display: grid; place-items: center;
background: var(--accent);
color: #fff;
font-weight: 600;
font-size: 13px;
}
.user-card.speaking .avatar {
box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--accent-soft);
}
/* Live voice-bars equalizer โ painted by voicebars.js from real audio.
Sits between the name block and the mute badge; collapses to nothing
when the visualizer is disabled (canvas left unpainted = transparent). */
.voice-bars {
flex-shrink: 0;
width: 30px;
height: 18px;
align-self: center;
opacity: 0.55;
transition: opacity 0.2s ease;
}
.user-card.speaking .voice-bars {
opacity: 1;
}
.user-meta { flex: 1; min-width: 0; }
.user-name-row { display: flex; align-items: center; gap: 6px; }
.user-name {
font-size: 14px; font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.role-badge {
font-size: 10px;
padding: 1px 6px;
border-radius: 4px;
background: var(--surface-2);
color: var(--muted);
text-transform: uppercase; letter-spacing: .05em;
border: 1px solid var(--border);
}
.role-badge.host { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.user-state {
font-size: 12px;
color: var(--muted);
display: flex; align-items: center; gap: 6px;
margin-top: 1px;
}
.mute-badge {
font-size: 11px;
padding: 1px 6px;
border-radius: 4px;
background: rgba(52, 211, 153, .12);
color: var(--good);
}
.mute-badge.is-muted {
background: rgba(248, 113, 113, .12);
color: var(--danger);
}
/* expanded controls inside card โ show on hover/focus to keep list compact */
.user-controls {
flex-basis: 100%;
width: 100%;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 8px;
max-height: 0;
margin-top: 0;
padding-top: 0;
border-top-color: transparent;
overflow: hidden;
opacity: 0;
transition: max-height .2s ease, opacity .2s ease, margin-top .2s ease, padding-top .2s ease, border-top-color .2s ease;
}
.user-card:hover .user-controls,
.user-card:focus-within .user-controls,
.user-card.show-controls .user-controls {
max-height: 200px;
margin-top: 10px;
padding-top: 10px;
border-top-color: var(--border);
opacity: 1;
}
.volume-row { display: flex; align-items: center; gap: 10px; }
.volume-icon { color: var(--muted); font-size: 14px; flex-shrink: 0; }
.volume-value {
font-size: 11px; color: var(--muted); width: 36px; text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 500;
flex-shrink: 0;
}
/* ---- Custom volume slider ---- */
.volume-slider {
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 6px;
border-radius: 999px;
background: linear-gradient(
to right,
var(--accent, #6366f1) 0%,
var(--accent, #6366f1) var(--range-percent, var(--value, 100%)),
rgba(255, 255, 255, 0.12) var(--range-percent, var(--value, 100%)),
rgba(255, 255, 255, 0.12) 100%
);
outline: none;
cursor: pointer;
transition: filter .15s;
}
.volume-slider:hover { filter: brightness(1.15); }
.volume-slider:focus-visible {
box-shadow: 0 0 0 3px var(--accent-soft);
}
/* WebKit thumb (Chrome / Edge / Safari) */
.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #ffffff;
border: 2px solid var(--accent, #6366f1);
box-shadow: 0 0 10px var(--accent-soft, rgba(99, 102, 241, 0.5)), 0 2px 6px rgba(0, 0, 0, 0.4);
cursor: grab;
transition: transform .15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .15s ease;
}
.volume-slider:hover::-webkit-slider-thumb {
transform: scale(1.2);
box-shadow: 0 0 14px var(--accent-soft, rgba(99, 102, 241, 0.7)), 0 3px 8px rgba(0, 0, 0, 0.5);
}
.volume-slider:active::-webkit-slider-thumb {
transform: scale(1.35);
cursor: grabbing;
background: #ffffff;
box-shadow: 0 0 18px var(--accent, #6366f1), 0 4px 12px rgba(0, 0, 0, 0.6);
}
/* Firefox */
.volume-slider::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: #ffffff;
border: 2px solid var(--accent, #6366f1);
box-shadow: 0 0 10px var(--accent-soft, rgba(99, 102, 241, 0.5)), 0 2px 6px rgba(0, 0, 0, 0.4);
cursor: grab;
transition: transform .15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .15s ease;
}
.volume-slider:hover::-moz-range-thumb {
transform: scale(1.2);
box-shadow: 0 0 14px var(--accent-soft, rgba(99, 102, 241, 0.7)), 0 3px 8px rgba(0, 0, 0, 0.5);
}
.volume-slider:active::-moz-range-thumb {
transform: scale(1.35);
cursor: grabbing;
box-shadow: 0 0 18px var(--accent, #6366f1), 0 4px 12px rgba(0, 0, 0, 0.6);
}
.volume-slider::-moz-range-track {
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
}
.inline-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.tiny-btn {
height: 28px;
padding: 0 10px;
font-size: 12px;
border-radius: var(--radius-sm);
background: var(--surface-2);
color: var(--soft);
border: 1px solid var(--border);
transition: background .12s, border-color .12s, color .12s;
}
.tiny-btn:hover { background: var(--bg); color: var(--text); border-color: var(--border-2); }
.tiny-btn.danger { color: var(--danger); border-color: rgba(248,113,113,.3); }
.tiny-btn.danger:hover { background: rgba(248,113,113,.1); }
.tiny-btn.host-action { color: var(--accent); border-color: rgba(99,102,241,.3); }
/* ---- chat ---- */
.col-chat .col-head { flex-shrink: 0; }
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
display: flex; flex-direction: column; gap: 14px;
}
.chat-row {
display: flex; gap: 10px;
align-items: flex-start;
}
.chat-row.me { flex-direction: row-reverse; }
.chat-avatar {
width: 30px; height: 30px;
border-radius: 50%;
background: var(--accent);
color: #fff;
display: grid; place-items: center;
font-weight: 600; font-size: 12px;
flex-shrink: 0;
}
.chat-stack { display: flex; flex-direction: column; gap: 4px; max-width: 70%; }
.chat-row.me .chat-stack { align-items: flex-end; }
.chat-meta { display: flex; gap: 8px; font-size: 11px; }
.chat-author { color: var(--soft); font-weight: 500; }
.chat-time { color: var(--muted); }
.chat-bubble {
padding: 9px 13px;
border-radius: var(--radius);
background: var(--surface-2);
border: 1px solid var(--border);
font-size: 14px;
line-height: 1.45;
word-wrap: break-word;
white-space: pre-wrap;
}
.chat-row.me .chat-bubble {
background: var(--accent);
color: #fff;
border-color: transparent;
}
.typing-indicator {
flex-shrink: 0;
padding: 4px 18px 0;
font-size: 12px;
color: var(--muted);
font-style: italic;
min-height: 18px;
line-height: 14px;
opacity: 0.85;
}
.typing-indicator[hidden] { display: none; }
.typing-indicator::after {
content: "";
display: inline-block;
width: 1ch;
animation: typing-dots 1.2s steps(4, end) infinite;
}
@keyframes typing-dots {
0%, 20% { content: ""; }
40% { content: "."; }
60% { content: ".."; }
80%, 100% { content: "..."; }
}
.chat-input-row {
flex-shrink: 0;
padding: 12px 16px;
display: flex; gap: 8px;
flex-wrap: wrap;
border-top: 1px solid var(--border);
background: var(--surface);
}
.chat-input-row input { flex: 1; }
.chat-input-row .btn { height: 40px; padding: 0 18px; }
/* =========================================================
FLOATING DOCK
========================================================= */
.dock {
position: fixed;
bottom: 24px;
left: 50%;
transform: translate(-50%, 20px);
display: flex;
align-items: center;
gap: 14px;
padding: 10px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 14px 40px rgba(0, 0, 0, .4);
z-index: 40;
opacity: 0; visibility: hidden;
transition: opacity .2s, transform .2s, visibility .2s;
}
.dock.visible {
opacity: 1; visibility: visible;
transform: translate(-50%, 0);
}
.dock-self { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 200px; }
.dock-avatar {
width: 34px; height: 34px;
border-radius: 50%;
display: grid; place-items: center;
background: var(--accent);
color: #fff;
font-weight: 600; font-size: 13px;
flex-shrink: 0;
}
.dock-meta { display: flex; flex-direction: column; min-width: 0; }
.dock-name {
font-size: 13px; font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dock-presence {
font-size: 11px; color: var(--muted);
}
.dock-divider { width: 1px; height: 28px; background: var(--border); }
.dock-actions { display: flex; gap: 2px; }
.dock-btn {
width: 38px; height: 38px;
border-radius: 10px;
display: grid; place-items: center;
color: var(--soft);
background: var(--surface-2);
border: 1px solid var(--border);
transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.dock-btn:hover:not(:disabled) { background: var(--bg); color: var(--text); border-color: var(--border-2); }
.dock-btn:active:not(:disabled) { transform: scale(.94); }
.dock-btn:disabled { opacity: .4; cursor: not-allowed; }
.dock-btn[hidden] { display: none; }
.dock-btn.active {
background: var(--accent-soft);
color: var(--accent);
border-color: var(--accent);
}
.dock-btn.dock-leave { color: var(--danger); }
.dock-btn.dock-leave:hover:not(:disabled) {
background: rgba(248, 113, 113, .12);
border-color: rgba(248, 113, 113, .35);
color: var(--danger);
}
/* =========================================================
MINI LOG POPOVER
========================================================= */
.log-pop {
position: fixed;
right: 20px; bottom: calc(var(--dock-h) + 36px);
width: 320px;
max-height: 0;
overflow: hidden;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: 0 12px 32px rgba(0,0,0,.4);
opacity: 0;
transition: opacity .18s, max-height .18s, padding .18s;
z-index: 35;
padding: 0 12px;
}
.log-pop.open {
max-height: 240px;
opacity: 1;
padding: 12px;
overflow-y: auto;
}
.mini-log-entry {
font-size: 12px;
color: var(--muted);
padding: 5px 0;
border-bottom: 1px solid var(--border);
font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
word-break: break-word;
}
.mini-log-entry:last-child { border-bottom: 0; }
/* =========================================================
PROFILE MODAL
========================================================= */
.modal {
position: fixed; inset: 0;
display: none;
background: rgba(0, 0, 0, .55);
backdrop-filter: blur(4px);
z-index: 50;
align-items: center; justify-content: center;
padding: 20px;
}
.modal.open { display: flex; }
.modal-card {
width: 100%; max-width: 380px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px;
}
.modal-card h2 { font-size: 20px; margin-bottom: 8px; }
.modal-card p { color: var(--muted); margin: 0 0 20px; }
/* =========================================================
AUDIO + UTILS
========================================================= */
.audio-container { display: none; }
/* scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-2); }
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 860px) {
.page { padding: 20px 12px 140px; }
.room-view {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
height: auto;
}
.col-stage { display: none; } /* stage is desktop-only */
.room-hero { padding: 14px 16px; }
.rh-name { font-size: 19px; }
.col { height: auto; min-height: 0; flex: 1 1 auto; }
.col + .col { height: auto; }
.hdr-room { display: none; }
.dock { left: 12px; right: 12px; transform: translate(0, 20px); width: auto; }
.dock.visible { transform: translate(0, 0); }
.dock-self { max-width: 140px; }
.log-pop { right: 12px; left: 12px; width: auto; }
.kbd-hint { display: none !important; }
}
/* Stage needs room โ below ~1100px fall back to users + chat (2 columns). */
@media (min-width: 861px) and (max-width: 1100px) {
.room-view {
grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
}
.col-stage { display: none; }
}
/* =========================================================
ANIMATIONS
========================================================= */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@keyframes pulseRing {
0% { box-shadow: 0 0 0 0 var(--accent), 0 0 0 0 var(--accent-soft); }
70% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 8px transparent; }
100% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 0 transparent; }
}
@keyframes badgePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); }
50% { box-shadow: 0 0 0 4px rgba(52,211,153,0); }
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.welcome-card { animation: fadeUp .35s ease both; }
.user-card { animation: fadeUp .25s ease both; }
.chat-row { animation: fadeUp .22s ease both; }
/* online badge gentle pulse */
.badge.online::before { animation: badgePulse 2s ease infinite; }
/* speaking ring โ replace the static glow with a smooth pulse */
.user-card.speaking .avatar {
animation: pulseRing 1.4s ease-out infinite;
will-change: box-shadow;
}
/* dock avatar shows online dot */
.dock.visible .dock-avatar {
position: relative;
}
.dock.visible .dock-avatar::after {
content: "";
position: absolute;
right: -1px; bottom: -1px;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--good);
border: 2px solid var(--surface);
}
/* =========================================================
EMPTY STATES (decorated)
========================================================= */
.empty.decorated {
display: flex; flex-direction: column; align-items: center;
gap: 10px;
padding: 36px 12px;
color: var(--muted);
}
.empty-icon {
width: 44px; height: 44px;
border-radius: 50%;
display: grid; place-items: center;
background: var(--surface-2);
border: 1px solid var(--border);
font-size: 20px;
opacity: .8;
}
/* =========================================================
TOASTS
========================================================= */
.toasts {
position: fixed;
top: 72px;
right: 20px;
display: flex; flex-direction: column; gap: 8px;
pointer-events: none;
z-index: 60;
}
.toast {
pointer-events: auto;
padding: 10px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--radius);
color: var(--text);
font-size: 13px;
box-shadow: 0 10px 24px rgba(0,0,0,.32);
opacity: 0;
transform: translateX(20px);
transition: opacity .22s, transform .22s;
max-width: 320px;
}
.toast.show { opacity: 1; transform: none; }
.toast-error { border-left-color: var(--danger); }
.toast-success { border-left-color: var(--good); }
.kbd-hint { display: none !important; }
kbd {
display: inline-block;
padding: 1px 6px;
background: var(--bg);
border: 1px solid var(--border-2);
border-radius: 4px;
font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
font-size: 10px;
color: var(--text);
line-height: 1.4;
}
/* =========================================================
CHAT MESSAGE GROUPING
========================================================= */
.chat-row.grouped { margin-top: -10px; }
.chat-row.grouped .chat-avatar { visibility: hidden; }
.chat-row.grouped .chat-meta { display: none; }
.chat-row.grouped .chat-bubble {
border-top-left-radius: 4px;
}
.chat-row.grouped.me .chat-bubble {
border-top-left-radius: var(--radius);
border-top-right-radius: 4px;
}
/* =========================================================
FOCUS STATES (a11y)
========================================================= */
button:focus-visible, input:focus-visible, .theme-option:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* =========================================================
DOCK BUTTON TOOLTIPS
========================================================= */
.dock-btn { position: relative; }
.dock-btn::after {
content: attr(title);
position: absolute;
bottom: calc(100% + 8px); left: 50%;
transform: translateX(-50%) translateY(4px);
padding: 4px 8px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 11px;
color: var(--soft);
white-space: nowrap;
opacity: 0; visibility: hidden;
transition: opacity .15s, transform .15s, visibility .15s;
pointer-events: none;
}
.dock-btn:hover:not(:disabled)::after {
opacity: 1; visibility: visible; transform: translateX(-50%);
}
/* =========================================================
ACTIVE MIC INDICATOR โ animated wave on dock
========================================================= */
.dock-btn#micToggleBtn:not(.active):not(:disabled) {
color: var(--good);
border-color: rgba(52,211,153,.3);
}
/* =========================================================
FONT SCALE + SETTINGS-DRIVEN MODES
========================================================= */
:root { --font-scale: 1; }
body { font-size: calc(14px * var(--font-scale)); }
body.no-anim *, body.no-anim *::before, body.no-anim *::after {
animation: none !important;
transition: none !important;
}
body.compact { --hdr-h: 48px; }
body.compact .col-head { padding: 10px 14px; }
body.compact .user-card { padding: 6px 10px; }
body.compact .avatar, body.compact .chat-avatar { width: 28px; height: 28px; font-size: 11px; }
body.compact .chat-bubble { padding: 6px 10px; font-size: 13px; }
body.compact .welcome-card { padding: 24px 20px; }
body.compact .dock { padding: 6px 10px; gap: 10px; }
body.compact .dock-btn { width: 32px; height: 32px; }
body.hide-times .chat-time { display: none; }
/* away tag */
body.away .dock.visible .dock-avatar::after {
background: #facc15;
}
[data-away="1"]::after { content: " ยท away"; color: var(--muted); font-size: 10px; }
/* =========================================================
SEARCH (mini-input) โ pill with magnifier icon
========================================================= */
.search-wrap {
position: relative;
display: flex;
align-items: center;
}
.search-wrap::before {
content: "";
position: absolute;
left: 10px;
width: 14px; height: 14px;
background: currentColor;
color: var(--muted);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
pointer-events: none;
transition: color .15s;
}
.search-wrap:focus-within::before { color: var(--accent); }
.mini-input {
height: 32px;
padding: 0 12px 0 32px;
width: 180px;
background: color-mix(in srgb, var(--surface) 70%, transparent);
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text);
font-size: 13px;
transition: border-color .15s, background .15s, box-shadow .15s, width .2s;
}
.mini-input::placeholder { color: var(--muted); }
.mini-input:hover { border-color: var(--border-2); }
.mini-input:focus {
border-color: var(--accent);
background: var(--surface);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
width: 220px;
}
/* hide non-matching chat rows / users (search) */
.chat-row.dim,
.user-card.dim { display: none; }
/* highlighted match in chat bubble */
.chat-bubble mark.search-hit {
background: color-mix(in srgb, var(--accent) 35%, transparent);
color: inherit;
border-radius: 3px;
padding: 0 2px;
}
/* =========================================================
EMOJI PICKER
========================================================= */
.chat-input-wrap { position: relative; flex: 1; display: flex; align-items: center; }
.chat-input-wrap input { padding-right: 86px !important; }
.emoji-trigger, .attach-trigger {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 32px; height: 32px;
border-radius: 50% !important;
display: grid; place-items: center;
font-size: 16px;
background: rgba(255, 255, 255, 0.09) !important;
border: 1px solid rgba(255, 255, 255, 0.16) !important;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
color: var(--text) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
transition: transform 0.28s var(--lg-spring), background 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease, color 0.2s ease !important;
cursor: pointer;
z-index: 2;
}
.emoji-trigger { right: 8px; }
.attach-trigger { right: 44px; }
.emoji-trigger:hover, .attach-trigger:hover {
background: rgba(255, 255, 255, 0.2) !important;
border-color: rgba(255, 255, 255, 0.4) !important;
transform: translateY(-50%) scale(1.15) !important;
box-shadow: 0 6px 18px rgba(94, 106, 210, 0.45), inset 0 1px 0 rgba(255,255,255,0.4) !important;
color: var(--accent) !important;
}
.emoji-trigger:active, .attach-trigger:active {
transform: translateY(-50%) scale(0.88) !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
}
.attach-trigger.busy { opacity: .5; pointer-events: none; }
.attach-trigger:disabled { opacity: .4; cursor: not-allowed; }
/* Send button styling */
#sendChatBtn, .chat-input-row .btn-primary {
border-radius: 999px !important;
padding: 0 20px !important;
height: 40px !important;
font-weight: 600 !important;
background: linear-gradient(135deg, var(--accent) 0%, #4f46e5 100%) !important;
border: 1px solid rgba(255,255,255,0.25) !important;
box-shadow: 0 4px 16px -2px rgba(99, 102, 241, 0.45), inset 0 1px 0 rgba(255,255,255,0.35) !important;
transition: transform 0.3s var(--lg-spring), box-shadow 0.25s ease, background 0.2s ease !important;
}
#sendChatBtn:hover, .chat-input-row .btn-primary:hover {
transform: translateY(-1px) scale(1.05) !important;
box-shadow: 0 8px 24px -2px rgba(99, 102, 241, 0.65), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
#sendChatBtn:active, .chat-input-row .btn-primary:active {
transform: scale(0.94) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
/* Pending-attachment chip (above the input, before send). */
.attach-chip-wrap { width: 100%; margin-bottom: 8px; }
.attach-chip {
display: inline-flex; align-items: center; gap: 8px;
max-width: 100%;
padding: 6px 8px 6px 10px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 13px;
}
.attach-chip-name {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
max-width: 240px; color: var(--soft);
}
.attach-chip-x {
flex-shrink: 0;
width: 20px; height: 20px;
border-radius: 5px;
display: grid; place-items: center;
color: var(--muted); font-size: 12px;
transition: background .15s, color .15s;
}
.attach-chip-x:hover { background: var(--danger); color: #fff; }
/* Rendered attachments inside chat bubbles/rows. */
.chat-bubble.empty-bubble { display: none; }
.chat-attach-img {
max-width: 260px; max-height: 300px;
border-radius: var(--radius);
border: 1px solid var(--border);
cursor: zoom-in;
display: block;
object-fit: cover;
}
.chat-attach-file {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius);
text-decoration: none;
color: var(--text);
max-width: 280px;
transition: border-color .15s, background .15s;
}
.chat-attach-file:hover { border-color: var(--accent); background: var(--accent-soft); }
.attach-file-icon { font-size: 22px; flex-shrink: 0; }
.attach-file-meta { display: flex; flex-direction: column; min-width: 0; }
.attach-file-name {
font-size: 13px; font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attach-file-size { font-size: 11px; color: var(--muted); }
/* Drag-over highlight for the chat column. */
.col-chat.drop-hover { outline: 2px dashed var(--accent); outline-offset: -4px; }
/* Image lightbox. */
.modal.lightbox { background: rgba(0,0,0,.82); }
.lightbox-img {
max-width: 92vw; max-height: 88vh;
border-radius: var(--radius);
box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.lightbox-close {
position: fixed; top: 18px; right: 22px;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(255,255,255,.12);
color: #fff; font-size: 18px;
display: grid; place-items: center;
}
.lightbox-close:hover { background: rgba(255,255,255,.24); }
/* iOS Glass Emoji Picker Modal */
.emoji-pop {
position: absolute;
bottom: calc(100% + 10px);
right: 0;
width: 310px;
max-width: 100%;
padding: 12px;
background: rgba(22, 22, 28, 0.92) !important;
-webkit-backdrop-filter: blur(40px) saturate(200%) !important;
backdrop-filter: blur(40px) saturate(200%) !important;
border: 1px solid rgba(255, 255, 255, 0.16) !important;
border-radius: 24px !important;
box-shadow: 0 24px 60px -8px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
display: flex;
flex-direction: column;
gap: 8px;
opacity: 0; visibility: hidden;
transform: translateY(12px) scale(0.95);
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s !important;
z-index: 1000;
max-height: 380px;
}
.emoji-pop.open {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) scale(1) !important;
}
.ios-sheet-handle {
width: 36px;
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.28);
margin: 0 auto 2px auto;
display: block;
}
.ios-emoji-header {
display: flex;
flex-direction: column;
gap: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding-bottom: 8px;
}
.ios-emoji-search-wrap {
position: relative;
display: flex;
align-items: center;
}
.ios-emoji-search-icon {
position: absolute;
left: 12px;
color: rgba(255, 255, 255, 0.45);
pointer-events: none;
}
.ios-emoji-search {
width: 100%;
height: 36px;
padding: 0 30px 0 34px;
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 14px !important;
color: #fff !important;
font-size: 13px !important;
outline: none !important;
transition: background 0.18s, border-color 0.18s, box-shadow 0.18s !important;
}
.ios-emoji-search:focus {
background: rgba(255, 255, 255, 0.15) !important;
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}
.ios-emoji-clear {
position: absolute;
right: 10px;
background: rgba(255, 255, 255, 0.2);
border: none;
color: #fff;
font-size: 10px;
width: 18px;
height: 18px;
border-radius: 50%;
display: grid;
place-items: center;
cursor: pointer;
padding: 0;
transition: background 0.15s;
}
.ios-emoji-clear:hover {
background: rgba(255, 255, 255, 0.35);
}
.ios-emoji-tabs {
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(0, 0, 0, 0.35);
padding: 3px;
border-radius: 14px;
gap: 2px;
}
.ios-emoji-tab {
flex: 1;
height: 30px;
display: grid;
place-items: center;
border: none;
background: transparent;
border-radius: 10px;
cursor: pointer;
transition: background 0.18s, transform 0.18s, opacity 0.18s;
opacity: 0.55;
}
.ios-emoji-tab:hover {
opacity: 1;
transform: scale(1.1);
}
.ios-emoji-tab.active {
opacity: 1;
background: rgba(255, 255, 255, 0.22) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
.ios-emoji-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
max-height: 220px;
overflow-y: auto;
padding: 2px;
}
.ios-emoji-grid::-webkit-scrollbar {
width: 4px;
}
.ios-emoji-grid::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.25);
border-radius: 4px;
}
.ios-emoji-grid .emoji-btn,
.emoji-btn {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
display: grid !important;
place-items: center !important;
border-radius: 10px !important;
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 !important;
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.15s !important;
user-select: none;
}
.ios-emoji-grid .emoji-btn:hover,
.emoji-btn:hover {
background: rgba(255, 255, 255, 0.15) !important;
border: none !important;
box-shadow: none !important;
transform: scale(1.32) translateY(-2px) !important;
z-index: 10 !important;
}
.ios-emoji-grid .emoji-btn:active,
.emoji-btn:active,
.emoji-btn.tapped {
transform: scale(0.85) !important;
background: rgba(255, 255, 255, 0.25) !important;
}
.ios-emoji-cat-title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.6px;
color: rgba(255, 255, 255, 0.45);
padding: 2px 4px 0 4px;
user-select: none;
}
.ios-emoji-empty {
grid-column: 1 / -1;
text-align: center;
padding: 30px 10px;
color: rgba(255, 255, 255, 0.5);
font-size: 13.5px;
}
@media (max-width: 600px) {
.emoji-pop {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
border-radius: 28px 28px 0 0 !important;
padding: 12px 16px 28px 16px !important;
transform: translateY(100%) !important;
max-height: 70vh !important;
}
.emoji-pop.open {
transform: translateY(0) !important;
}
.ios-emoji-grid {
grid-template-columns: repeat(8, 1fr);
max-height: 50vh;
}
}
/* =========================================================
@MENTIONS
========================================================= */
.mention {
color: var(--accent);
background: var(--accent-soft);
padding: 0 4px;
border-radius: 4px;
font-weight: 500;
}
.mention-me {
background: var(--accent);
color: #fff;
}
.chat-row.mentioned .chat-bubble {
border-left: 3px solid var(--accent);
}
/* =========================================================
PING INDICATOR
========================================================= */
.dock-ping {
display: flex; align-items: center; gap: 6px;
font-size: 11px;
color: var(--muted);
padding: 0 6px;
cursor: help;
}
.ping-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--muted);
}
.ping-value.good { color: var(--good); }
.ping-value.good ~ .ping-dot,
.dock-ping:has(.ping-value.good) .ping-dot { background: var(--good); }
.ping-value.ok { color: #facc15; }
.dock-ping:has(.ping-value.ok) .ping-dot { background: #facc15; }
.ping-value.bad { color: var(--danger); }
.dock-ping:has(.ping-value.bad) .ping-dot { background: var(--danger); }
/* =========================================================
SETTINGS MODAL
========================================================= */
.settings-card {
max-width: 560px;
max-height: 85vh;
padding: 0;
display: flex;
flex-direction: column;
}
.settings-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 22px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.settings-head h2 { font-size: 17px; }
.settings-body {
overflow-y: auto;
padding: 8px 22px 22px;
flex: 1;
}
.set-section { margin-top: 18px; }
.set-section h4 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--muted);
font-weight: 600;
margin: 0 0 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.set-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 9px 0;
border-bottom: 1px solid var(--border);
}
.set-row:last-child { border-bottom: 0; }
.set-label {
font-size: 13px;
color: var(--text);
flex: 1;
min-width: 0;
}
.set-label small {
display: block;
color: var(--muted);
font-size: 11px;
margin-top: 2px;
}
.set-ctrl {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.set-ctrl input[type="range"] {
width: 110px;
accent-color: var(--accent);
}
.set-val {
font-size: 11px;
color: var(--muted);
min-width: 36px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.set-about {
margin-top: 22px;
padding: 12px 14px;
background: var(--surface-2);
border-radius: var(--radius);
font-size: 11px;
color: var(--muted);
text-align: center;
}
.set-about kbd { margin: 0 2px; }
/* iOS-like switch */
.switch {
position: relative;
display: inline-block;
width: 36px; height: 20px;
flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
position: absolute; inset: 0;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 999px;
cursor: pointer;
transition: background .18s, border-color .18s;
}
.switch span::before {
content: "";
position: absolute;
width: 14px; height: 14px;
left: 2px; top: 2px;
background: var(--soft);
border-radius: 50%;
transition: transform .18s, background .18s;
}
.switch input:checked + span {
background: var(--accent);
border-color: var(--accent);
}
.switch input:checked + span::before {
transform: translateX(16px);
background: #fff;
}
/* =========================================================
v3 ADDITIONS: glass, vu-meter, reactions, scroll-down
========================================================= */
/* Glassmorphism overrides */
.dock {
background: color-mix(in srgb, var(--surface) 70%, transparent);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-color: color-mix(in srgb, var(--border) 75%, transparent);
}
.menu-pop {
background: color-mix(in srgb, var(--surface) 78%, transparent);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
}
.modal-card {
background: color-mix(in srgb, var(--surface) 82%, transparent);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.hdr {
background: color-mix(in srgb, var(--bg) 72%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Compact dock โ tighter and narrower */
.dock {
gap: 8px !important;
padding: 6px 10px !important;
border-radius: 999px !important;
}
.dock-self { gap: 8px; max-width: 160px; }
.dock-avatar { width: 30px; height: 30px; font-size: 12px; }
.dock-name { font-size: 12px; max-width: 90px; }
.dock-presence { font-size: 10px; }
.dock-divider { height: 22px; opacity: .5; }
.dock-ping { font-size: 11px; }
.dock-actions { gap: 2px; }
.dock-btn {
width: 32px !important;
height: 32px !important;
border-radius: 999px !important;
}
.dock-btn svg { width: 15px; height: 15px; }
/* VU meter (mic level) */
.vu-meter {
display: flex;
align-items: center;
margin-left: 2px;
}
.vu-bar {
width: 36px;
height: 4px;
background: color-mix(in srgb, var(--border) 60%, transparent);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.vu-fill {
display: block;
height: 100%;
width: 0%;
background: hsl(140, 80%, 55%);
border-radius: 999px;
transition: width .08s linear, background .15s linear;
box-shadow: 0 0 6px currentColor;
}
/* Reactions */
.chat-stack { position: relative; }
.react-trigger {
position: absolute;
top: -10px; right: -6px;
width: 28px; height: 22px;
padding: 0;
font-size: 11px;
border-radius: 999px;
background: var(--surface);
border: 1px solid var(--border);
color: var(--muted);
cursor: pointer;
opacity: 0;
transition: opacity .15s, transform .15s, color .15s;
}
.chat-row.me .react-trigger { right: auto; left: -6px; }
.chat-row:hover .react-trigger { opacity: 1; transform: translateY(-2px); }
.react-trigger:hover { color: var(--text); border-color: var(--accent); }
.reactions-bar {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
}
.reaction-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
font-size: 12px;
border-radius: 999px;
background: color-mix(in srgb, var(--surface) 70%, transparent);
border: 1px solid var(--border);
color: var(--text);
cursor: pointer;
transition: transform .12s, background .15s, border-color .15s;
}
.reaction-chip:hover { transform: scale(1.06); }
.reaction-chip.mine {
background: color-mix(in srgb, var(--accent) 22%, transparent);
border-color: var(--accent);
}
.reaction-chip .r-emoji { font-size: 14px; line-height: 1; }
.reaction-chip .r-count { font-variant-numeric: tabular-nums; }
.react-picker {
position: absolute;
bottom: 100%;
margin-bottom: 6px;
display: flex;
gap: 2px;
padding: 4px;
background: color-mix(in srgb, var(--surface) 88%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--border);
border-radius: 999px;
box-shadow: 0 8px 24px rgba(0,0,0,.35);
z-index: 5;
animation: rpPop .14s ease both;
}
.chat-row.me .react-picker { right: 0; }
.chat-row:not(.me) .react-picker { left: 0; }
.react-picker.flip-down {
bottom: auto;
top: 100%;
margin-bottom: 0;
margin-top: 6px;
}
@keyframes rpPopDown {
from { opacity: 0; transform: translateY(-4px) scale(.92); }
to { opacity: 1; transform: none; }
}
.react-picker.flip-down { animation-name: rpPopDown; }
.rp-btn {
width: 30px; height: 30px;
padding: 0;
border: none; background: transparent;
font-size: 18px; cursor: pointer;
border-radius: 50%;
transition: transform .12s, background .12s;
}
.rp-btn:hover { transform: scale(1.25); background: color-mix(in srgb, var(--accent) 18%, transparent); }
@keyframes rpPop {
from { opacity: 0; transform: translateY(4px) scale(.92); }
to { opacity: 1; transform: none; }
}
/* Scroll-down-to-newest button */
.col-chat { position: relative; }
.scroll-down-btn {
position: absolute;
bottom: 78px;
right: 18px;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: var(--accent);
color: #fff;
border: none;
font-size: 13px;
cursor: pointer;
box-shadow: 0 6px 18px rgba(0,0,0,.32);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .18s, transform .18s, visibility .18s;
z-index: 6;
}
.scroll-down-btn.visible {
opacity: 1; visibility: visible; transform: none;
}
.scroll-down-btn .sd-arrow { font-size: 16px; line-height: 1; }
.scroll-down-btn .sd-count {
background: rgba(255,255,255,.22);
padding: 1px 6px;
border-radius: 999px;
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.scroll-down-btn .sd-count:empty { display: none; }
/* speaking ring around dock avatar (nice touch) */
.dock-avatar { position: relative; }
.dock-avatar::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 50%;
border: 2px solid transparent;
transition: border-color .15s, box-shadow .15s;
pointer-events: none;
}
/* =========================================================
v4 โ LIQUID GLASS (iOS 26-style) + WELCOME 2-COL
========================================================= */
/* Animated colorful blobs in the background โ gives the
backdrop-filter something rich to refract through. */
body::before {
content: "";
position: fixed;
inset: -20%;
pointer-events: none;
z-index: 0;
background:
radial-gradient(closest-side at 20% 25%, var(--accent), transparent 65%),
radial-gradient(closest-side at 80% 30%, hsl(280, 80%, 60%), transparent 60%),
radial-gradient(closest-side at 70% 80%, hsl(200, 90%, 55%), transparent 60%),
radial-gradient(closest-side at 25% 85%, hsl(330, 85%, 60%), transparent 60%);
filter: blur(30px) saturate(135%);
opacity: .55;
animation: bgFloat 28s ease-in-out infinite alternate;
}
body:is([data-theme="white"],[data-theme="nord"])::before { opacity: .35; }
body::after {
/* fine grain noise to break up the gradient */
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 3px 3px;
mix-blend-mode: overlay;
opacity: .6;
}
@keyframes bgFloat {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(2%, -3%, 0) scale(1.05); }
100% { transform: translate3d(-3%, 2%, 0) scale(1); }
}
/* Liquid-glass utility โ apply via .glass class */
.glass {
position: relative;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--surface) 38%, transparent) 0%,
color-mix(in srgb, var(--surface) 26%, transparent) 100%);
backdrop-filter: blur(28px) saturate(180%) brightness(1.05);
-webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.05);
border: 1px solid color-mix(in srgb, #fff 14%, transparent);
box-shadow:
0 1px 0 rgba(255,255,255,.16) inset, /* top edge specular */
0 0 0 1px rgba(255,255,255,.05) inset, /* hairline */
0 30px 60px -20px rgba(0,0,0,.55), /* soft drop */
0 12px 30px -10px rgba(0,0,0,.35);
border-radius: var(--radius-lg);
overflow: hidden;
}
/* Specular highlight stripe at top */
.glass::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 50%;
background: linear-gradient(180deg,
rgba(255,255,255,.10) 0%,
rgba(255,255,255,.02) 60%,
transparent 100%);
pointer-events: none;
z-index: 0;
}
/* Light-theme glass tweak */
body:is([data-theme="white"],[data-theme="nord"]) .glass {
background:
linear-gradient(180deg,
rgba(255,255,255,.62) 0%,
rgba(255,255,255,.42) 100%);
border: 1px solid rgba(255,255,255,.7);
box-shadow:
0 1px 0 rgba(255,255,255,.85) inset,
0 30px 60px -20px rgba(20,20,40,.18),
0 8px 24px -8px rgba(20,20,40,.10);
}
.glass > * { position: relative; z-index: 1; }
/* Apply glass look to existing chrome (override v3) */
.dock,
.menu-pop,
.modal-card {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--surface) 42%, transparent) 0%,
color-mix(in srgb, var(--surface) 28%, transparent) 100%);
backdrop-filter: blur(30px) saturate(180%) brightness(1.06);
-webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.06);
border: 1px solid color-mix(in srgb, #fff 14%, transparent);
box-shadow:
0 1px 0 rgba(255,255,255,.16) inset,
0 30px 60px -20px rgba(0,0,0,.55),
0 12px 30px -10px rgba(0,0,0,.35);
position: relative;
}
body:is([data-theme="white"],[data-theme="nord"]) .dock,
body:is([data-theme="white"],[data-theme="nord"]) .menu-pop,
body:is([data-theme="white"],[data-theme="nord"]) .modal-card {
background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.45));
border: 1px solid rgba(255,255,255,.75);
box-shadow:
0 1px 0 rgba(255,255,255,.9) inset,
0 30px 60px -20px rgba(20,20,40,.18);
}
.hdr {
background: color-mix(in srgb, var(--bg) 55%, transparent);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border-bottom-color: color-mix(in srgb, #fff 8%, transparent);
}
/* =========================================================
WELCOME โ two-column layout
========================================================= */
.welcome {
display: block;
padding: 48px 24px 80px;
min-height: calc(100vh - var(--hdr-h));
}
.welcome-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 24px;
max-width: 1080px;
margin: 0 auto;
align-items: start;
}
@media (max-width: 880px) {
.welcome-grid { grid-template-columns: 1fr; }
}
.welcome-card {
padding: 40px 36px 32px;
width: auto;
max-width: none;
}
.welcome-card .form { gap: 4px; }
.hero-eyebrow {
display: inline-block;
padding: 4px 10px;
margin-bottom: 14px;
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--soft);
background: color-mix(in srgb, var(--accent) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
border-radius: 999px;
}
.welcome h1 {
font-size: 44px;
line-height: 1.05;
letter-spacing: -0.035em;
background: linear-gradient(180deg, var(--text), color-mix(in srgb, var(--text) 65%, var(--accent)));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.welcome-sub {
margin: 10px 0 28px;
font-size: 15px;
max-width: 42ch;
}
.hero-features {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid color-mix(in srgb, #fff 8%, transparent);
}
.hero-features span {
font-size: 12px;
color: var(--soft);
padding: 4px 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--surface) 50%, transparent);
border: 1px solid color-mix(in srgb, #fff 8%, transparent);
}
/* Rooms sidebar */
.rooms-side {
padding: 24px 22px;
position: sticky;
top: calc(var(--hdr-h) + 24px);
}
.rooms-side .rooms-head {
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid color-mix(in srgb, #fff 8%, transparent);
}
.rooms-side .rooms-title {
font-size: 13px;
font-weight: 600;
letter-spacing: .04em;
color: var(--text);
text-transform: none;
}
.rooms-side .rooms-list {
max-height: min(60vh, 480px);
gap: 6px;
}
/* Room item โ chip card */
.rooms-side .room-item {
padding: 12px 14px;
border-radius: 12px;
background: color-mix(in srgb, var(--surface) 45%, transparent);
border: 1px solid color-mix(in srgb, #fff 6%, transparent);
transition: transform .15s ease, background .15s, border-color .15s;
position: relative;
overflow: hidden;
}
.rooms-side .room-item:hover {
background: color-mix(in srgb, var(--accent) 14%, transparent);
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
transform: translateY(-1px);
}
.rooms-side .room-item::before {
/* live dot on each room */
content: "";
position: absolute;
left: 14px; top: 50%; transform: translateY(-50%);
width: 6px; height: 6px;
border-radius: 50%;
background: var(--good);
box-shadow: 0 0 8px var(--good);
}
.rooms-side .room-item .room-name {
margin-left: 16px;
font-size: 14px;
font-weight: 500;
}
.rooms-side .room-item .room-count {
color: var(--soft);
font-size: 12px;
background: color-mix(in srgb, var(--surface) 60%, transparent);
padding: 2px 8px;
border-radius: 999px;
}
/* Inputs in welcome โ glass-styled */
.welcome-card input[type="text"] {
background: color-mix(in srgb, var(--surface) 55%, transparent);
border: 1px solid color-mix(in srgb, #fff 10%, transparent);
transition: border-color .15s, background .15s, box-shadow .15s;
}
.welcome-card input[type="text"]:focus {
background: color-mix(in srgb, var(--surface) 75%, transparent);
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
/* button stays solid for emphasis but with subtle glow */
.welcome-card .btn-primary {
background: var(--accent);
box-shadow:
0 1px 0 rgba(255,255,255,.18) inset,
0 8px 24px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}
/* In-room columns: wrap in glass too */
.col-users, .col-chat {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--surface) 35%, transparent),
color-mix(in srgb, var(--surface) 22%, transparent));
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
border: 1px solid color-mix(in srgb, #fff 10%, transparent);
border-radius: var(--radius-lg);
box-shadow:
0 1px 0 rgba(255,255,255,.12) inset,
0 20px 50px -20px rgba(0,0,0,.5);
overflow: hidden;
}
body:is([data-theme="white"],[data-theme="nord"]) .col-users,
body:is([data-theme="white"],[data-theme="nord"]) .col-chat {
background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.38));
border: 1px solid rgba(255,255,255,.65);
}
.user-card {
background: color-mix(in srgb, var(--surface) 35%, transparent);
border: 1px solid color-mix(in srgb, #fff 6%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.user-card:hover {
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.chat-bubble {
background: color-mix(in srgb, var(--surface) 60%, transparent);
border: 1px solid color-mix(in srgb, #fff 6%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
body:is([data-theme="white"],[data-theme="nord"]) .chat-bubble {
background: rgba(255,255,255,.72);
border-color: rgba(255,255,255,.85);
}
/* =========================================================
v6 โ CENTERED WELCOME (hero + composer + rooms grid)
========================================================= */
.welcome {
display: block;
padding: 56px 20px 100px;
min-height: calc(100vh - var(--hdr-h));
}
.welcome-stack {
max-width: 1080px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
/* Two-column row: join panel + rooms panel side by side */
.welcome-row {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: 10px;
align-items: stretch;
}
@media (max-width: 880px) {
.welcome-row { grid-template-columns: 1fr; }
}
.join-panel,
.rooms-panel {
padding: 24px 22px;
display: flex;
flex-direction: column;
min-height: 360px;
}
.panel-title {
font-size: 11px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 14px;
}
/* Vertical composer inside join panel */
.composer-vert {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.cv-field {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 14px;
border-radius: 14px;
background: color-mix(in srgb, var(--surface) 35%, transparent);
border: 1px solid color-mix(in srgb, #fff 8%, transparent);
transition: border-color .15s, background .15s, box-shadow .15s;
cursor: text;
}
.cv-field:focus-within {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.cv-field .composer-label {
font-size: 10px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
}
.cv-field input[type="text"] {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
font-size: 15px;
font-weight: 500;
color: var(--text);
outline: none;
box-shadow: none !important;
width: 100%;
}
.cv-field input::placeholder { color: var(--muted); opacity: .6; }
.composer-go-wide {
margin-top: 6px;
height: 48px;
border-radius: 14px !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 600;
box-shadow:
0 1px 0 rgba(255,255,255,.18) inset,
0 8px 24px -6px color-mix(in srgb, var(--accent) 60%, transparent) !important;
transition: transform .12s, box-shadow .15s;
}
.composer-go-wide:hover { transform: translateY(-1px); }
.composer-go-wide:active { transform: scale(.98); }
/* Rooms panel grid */
.rooms-panel { gap: 0; }
.rooms-panel .rooms-head {
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid color-mix(in srgb, #fff 8%, transparent);
display: flex;
align-items: center;
justify-content: space-between;
}
.rooms-panel .rooms-title {
font-size: 11px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
}
.rooms-panel .rooms-grid {
flex: 1;
overflow-y: auto;
max-height: 380px;
padding-right: 4px;
}
/* Hero */
.welcome-stack .hero {
text-align: center;
max-width: 560px;
animation: fadeUp .35s ease both;
}
.welcome-stack .hero h1 {
font-size: 52px;
line-height: 1;
letter-spacing: -0.04em;
margin: 12px 0 12px;
background: linear-gradient(180deg,
var(--text) 0%,
color-mix(in srgb, var(--text) 60%, var(--accent)) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.welcome-stack .welcome-sub {
margin: 0 auto;
font-size: 16px;
line-height: 1.55;
color: var(--soft);
max-width: 46ch;
}
/* Composer pill โ single horizontal capsule */
.composer {
width: 100%;
max-width: 640px;
display: flex;
align-items: stretch;
padding: 6px;
border-radius: 999px !important;
gap: 0;
animation: fadeUp .4s .05s ease both;
}
.composer-field {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px 18px;
border-radius: 999px;
transition: background .15s;
}
.composer-field:focus-within {
background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.composer-label {
font-size: 10px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 1px;
}
.composer-field input[type="text"] {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
font-size: 15px;
font-weight: 500;
color: var(--text);
outline: none;
box-shadow: none !important;
width: 100%;
min-width: 0;
}
.composer-field input::placeholder { color: var(--muted); opacity: .65; }
.composer-sep {
align-self: center;
color: var(--muted);
font-weight: 600;
font-size: 14px;
padding: 0 6px;
user-select: none;
}
.composer-go {
flex-shrink: 0;
width: 52px;
height: 52px;
padding: 0 !important;
border-radius: 50% !important;
display: grid;
place-items: center;
align-self: center;
margin-left: 6px;
box-shadow:
0 1px 0 rgba(255,255,255,.18) inset,
0 8px 24px -6px color-mix(in srgb, var(--accent) 60%, transparent) !important;
transition: transform .12s, box-shadow .15s;
}
.composer-go:hover { transform: scale(1.06); }
.composer-go:active { transform: scale(.95); }
@media (max-width: 560px) {
.composer { flex-direction: column; border-radius: 22px !important; padding: 10px; gap: 6px; }
.composer-field { border-radius: 14px; padding: 10px 14px; }
.composer-sep { display: none; }
.composer-go { width: 100%; height: 44px; border-radius: 14px !important; margin-left: 0; }
}
/* Features chips row */
.welcome-stack .hero-features {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-top: 0;
padding-top: 0;
border-top: 0;
animation: fadeUp .4s .1s ease both;
}
/* Rooms section: heading + grid of pill cards */
.rooms-section {
width: 100%;
margin-top: 16px;
animation: fadeUp .4s .15s ease both;
}
.rooms-section .rooms-head {
margin-bottom: 14px;
padding-bottom: 0;
border-bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.rooms-section .rooms-title {
font-size: 12px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
}
.rooms-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-auto-rows: max-content !important;
align-content: start !important;
gap: 10px;
}
.rooms-grid .empty {
grid-column: 1 / -1;
padding: 24px;
text-align: center;
color: var(--muted);
font-size: 13px;
border: 1px dashed color-mix(in srgb, #fff 10%, transparent);
border-radius: 14px;
}
.rooms-grid .room-item {
padding: 6px 10px !important;
border-radius: 10px !important;
background: color-mix(in srgb, var(--surface) 32%, transparent);
border: 1px solid color-mix(in srgb, #fff 8%, transparent);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
box-shadow: 0 1px 0 rgba(255,255,255,.10) inset;
cursor: pointer;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
position: relative;
overflow: hidden;
height: auto !important;
min-height: 38px !important;
max-height: 44px !important;
align-self: start !important;
transition: transform .15s, background .15s, border-color .15s;
}
.rooms-grid .room-item:hover {
transform: translateY(-2px);
background: color-mix(in srgb, var(--accent) 16%, transparent);
border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.rooms-grid .room-item::before {
/* live dot */
content: "";
position: absolute;
top: 12px; right: 12px;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--good);
box-shadow: 0 0 8px var(--good);
}
.rooms-grid .room-name {
font-size: 15px;
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rooms-grid .room-count {
font-size: 12px;
color: var(--soft);
margin-top: 2px;
}
.rooms-grid .room-item > div { display: flex; flex-direction: column; min-width: 0; }
/* =========================================================
v5 โ SETTINGS LIQUID-GLASS + DRAGGABLE FLOATING DOCK
========================================================= */
/* Settings modal: deeper glass + nested glass sections */
.modal {
background: rgba(0, 0, 0, 0.45) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
}
body:is([data-theme="white"],[data-theme="nord"]) .modal {
background: rgba(20, 20, 35, 0.18) !important;
}
.settings-card {
max-width: 600px !important;
padding: 24px !important;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--surface) 38%, transparent),
color-mix(in srgb, var(--surface) 22%, transparent)) !important;
backdrop-filter: blur(34px) saturate(190%) brightness(1.06) !important;
-webkit-backdrop-filter: blur(34px) saturate(190%) brightness(1.06) !important;
border: 1px solid color-mix(in srgb, #fff 16%, transparent) !important;
box-shadow:
0 1px 0 rgba(255,255,255,.20) inset,
0 0 0 1px rgba(255,255,255,.06) inset,
0 40px 80px -20px rgba(0,0,0,.6),
0 16px 40px -12px rgba(0,0,0,.4) !important;
position: relative;
overflow: hidden;
}
.settings-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 50%;
pointer-events: none;
background: linear-gradient(180deg,
rgba(255,255,255,.12) 0%,
rgba(255,255,255,.02) 60%,
transparent 100%);
}
body:is([data-theme="white"],[data-theme="nord"]) .settings-card {
background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.52)) !important;
border: 1px solid rgba(255,255,255,.8) !important;
box-shadow:
0 1px 0 rgba(255,255,255,.95) inset,
0 40px 80px -20px rgba(20,20,40,.18) !important;
}
.settings-head, .settings-body, .set-about { position: relative; z-index: 1; }
.settings-head {
margin-bottom: 6px;
padding-bottom: 14px;
border-bottom: 1px solid color-mix(in srgb, #fff 10%, transparent);
}
/* Each section becomes its own glass tile */
.set-section {
margin-top: 16px !important;
padding: 14px 16px;
background: color-mix(in srgb, var(--surface) 32%, transparent);
border: 1px solid color-mix(in srgb, #fff 8%, transparent);
border-radius: 14px;
box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
body:is([data-theme="white"],[data-theme="nord"]) .set-section {
background: rgba(255,255,255,.45);
border-color: rgba(255,255,255,.7);
}
.set-section h4 {
margin: 0 0 10px !important;
color: var(--soft);
}
.set-row {
padding: 8px 0 !important;
border-bottom: 1px solid color-mix(in srgb, #fff 6%, transparent) !important;
}
.set-row:last-child { border-bottom: 0 !important; }
.set-section .btn {
background: color-mix(in srgb, var(--surface) 60%, transparent);
border: 1px solid color-mix(in srgb, #fff 12%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background .15s, border-color .15s, transform .1s;
}
.set-section .btn:hover {
background: color-mix(in srgb, var(--accent) 22%, transparent);
border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.set-section input[type="range"] { accent-color: var(--accent); }
.set-about {
margin-top: 18px !important;
padding: 10px 14px !important;
text-align: center;
color: var(--muted);
font-size: 11px;
background: color-mix(in srgb, var(--surface) 24%, transparent) !important;
border: 1px solid color-mix(in srgb, #fff 6%, transparent) !important;
border-radius: 10px;
}
/* Settings body scroll prettier */
.settings-body::-webkit-scrollbar { width: 6px; }
.settings-body::-webkit-scrollbar-thumb {
background: color-mix(in srgb, #fff 14%, transparent);
border-radius: 999px;
}
/* =========================================================
FLOATING DRAGGABLE DOCK
========================================================= */
/* Dock pinned to bottom-center, no drag. */
.dock {
position: fixed !important;
left: 50% !important;
bottom: 24px !important;
top: auto !important;
right: auto !important;
transform: translateX(-50%) !important;
z-index: 9999 !important;
user-select: none;
-webkit-user-select: none;
transition: box-shadow .2s;
animation: none !important;
}
.dock.visible {
transform: translateX(-50%) !important;
}
@media (max-width: 640px) {
.dock {
left: 12px !important;
right: 12px !important;
transform: none !important;
}
.dock.visible { transform: none !important; }
}
.dock.dragging {
cursor: grabbing;
animation: none;
transition: none;
box-shadow:
0 1px 0 rgba(255,255,255,.22) inset,
0 30px 70px -10px rgba(0,0,0,.65),
0 12px 30px -8px rgba(0,0,0,.45) !important;
}
.dock-handle {
width: 18px;
margin-left: -2px;
margin-right: 2px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
cursor: grab;
flex-shrink: 0;
opacity: .35;
transition: opacity .15s;
}
.dock:hover .dock-handle { opacity: .8; }
.dock-handle .h-dot {
width: 3px; height: 3px;
border-radius: 50%;
background: currentColor;
}
/* Disable drag-cursor on interactive children */
.dock-btn, .dock-actions, .vu-meter, .dock-name, .dock-presence,
.dock-ping, .dock-avatar { cursor: default; }
.dock-btn { cursor: pointer; }
@keyframes dockFloat {
0%, 100% { translate: 0 0; }
50% { translate: 0 -3px; }
}
@media (max-width: 640px) {
.dock { left: 12px !important; right: 12px !important; }
.dock-handle { display: none; }
}
/* =========================================================
v9 โ Discord-like single-screen layout (polished)
Page never scrolls; only inner lists/chat do.
========================================================= */
/* ---------- VIEWPORT LOCK ---------- */
html, body { height: 100vh; overflow: hidden; }
body { display: flex; flex-direction: column; }
.hdr { flex-shrink: 0; }
.page {
flex: 1;
min-height: 0;
max-width: none;
width: 100%;
margin: 0;
padding: 0;
display: flex;
overflow: hidden;
}
/* ---------- WELCOME (centered card) ---------- */
.welcome {
flex: 1;
min-height: 0;
padding: 24px;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
}
.welcome-card {
width: 100%;
max-width: 460px;
max-height: 100%;
display: flex;
flex-direction: column;
padding: 28px 28px 22px;
border-radius: 22px;
box-sizing: border-box;
}
/* Redesigned Room Creation Card */
.welcome-card {
width: 100%;
max-width: 500px;
padding: 32px 30px 24px;
background: color-mix(in srgb, var(--surface) 75%, rgba(12, 14, 20, 0.85));
border: 1px solid color-mix(in srgb, var(--border) 60%, rgba(255, 255, 255, 0.12));
border-radius: 24px;
box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.5), 0 0 40px -15px color-mix(in srgb, var(--accent) 25%, transparent);
backdrop-filter: blur(20px) saturate(160%);
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.welcome-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899, #3b82f6);
background-size: 200% 100%;
animation: wcGlowGradient 6s ease infinite;
}
@keyframes wcGlowGradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.wc-header-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.wc-brand {
display: flex; align-items: center; gap: 8px;
font-weight: 600; font-size: 13px;
color: var(--soft);
}
.wc-brand-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.wc-brand-name { letter-spacing: -0.01em; }
.wc-live-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 20px;
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.25);
color: #4ade80;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
}
.wc-live-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 8px #22c55e;
animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.6; }
}
.wc-hero-text {
margin-bottom: 20px;
}
.wc-title {
font-size: 32px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.03em;
background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #94a3b8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0 0 6px;
}
.wc-sub {
font-size: 13.5px;
line-height: 1.55;
color: var(--soft);
margin: 0;
}
.cv-nick-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 14px;
background: color-mix(in srgb, var(--bg) 60%, rgba(255, 255, 255, 0.03));
border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
margin-bottom: 14px;
}
.cv-nick-avatar {
width: 36px;
height: 36px;
border-radius: 10px;
background: linear-gradient(135deg, var(--accent), #818cf8);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 15px;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
flex-shrink: 0;
}
.cv-nick-label {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.cv-nick-value {
font-weight: 600;
font-size: 14px;
color: var(--text);
}
.cv-field-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.wc-random-btn {
background: none;
border: none;
color: var(--accent);
font-size: 12px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 6px;
transition: background 0.15s, color 0.15s, transform 0.15s;
}
.wc-random-btn:hover {
background: var(--accent-soft);
color: #fff;
transform: translateY(-1px);
}
.cv-input-wrapper {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.cv-input-icon {
position: absolute;
left: 12px;
font-size: 15px;
color: var(--muted);
pointer-events: none;
user-select: none;
}
.cv-input-wrapper input {
padding-left: 36px !important;
padding-right: 40px !important;
height: 44px !important;
border-radius: 12px !important;
}
.cv-eye-btn {
position: absolute;
right: 8px;
background: none;
border: none;
font-size: 16px;
cursor: pointer;
padding: 4px 6px;
border-radius: 6px;
opacity: 0.7;
transition: opacity 0.15s, transform 0.15s;
}
.cv-eye-btn:hover {
opacity: 1;
transform: scale(1.1);
}
.wc-presets-row {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 4px;
}
.wc-presets-label {
font-size: 11px;
color: var(--muted);
font-weight: 500;
}
.wc-presets-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.preset-pill {
background: color-mix(in srgb, var(--surface-2) 70%, rgba(255, 255, 255, 0.05));
border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
color: var(--soft);
padding: 5px 11px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.preset-pill:hover {
background: var(--accent-soft);
border-color: var(--accent);
color: #fff;
transform: translateY(-1.5px);
box-shadow: 0 4px 10px rgba(99, 102, 241, 0.25);
}
.wc-join-btn {
height: 48px !important;
font-size: 15px !important;
font-weight: 600 !important;
border-radius: 14px !important;
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
box-shadow: 0 6px 20px -4px rgba(99, 102, 241, 0.5) !important;
margin-top: 8px !important;
gap: 8px !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.wc-join-btn:hover:not(:disabled) {
transform: translateY(-2px) scale(1.01) !important;
box-shadow: 0 10px 25px -4px rgba(99, 102, 241, 0.7) !important;
background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%) !important;
}
.wc-join-arrow {
transition: transform 0.2s ease;
}
.wc-join-btn:hover .wc-join-arrow {
transform: translateX(4px);
}
.wc-form { display: flex; flex-direction: column; gap: 12px; }
/* Divider with label */
.wc-divider {
display: flex; align-items: center; gap: 12px;
margin: 20px 0 14px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--muted);
}
.wc-divider::before,
.wc-divider::after {
content: ""; flex: 1; height: 1px;
background: color-mix(in srgb, var(--border) 80%, transparent);
}
/* Rooms section */
.wc-rooms {
display: flex; flex-direction: column;
min-height: 0;
flex: 1 1 auto;
}
.wc-rooms-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
flex-shrink: 0;
}
.wc-rooms-title-group {
display: flex;
align-items: center;
gap: 8px;
}
.wc-rooms-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--muted);
font-weight: 600;
}
.wc-rooms-badge {
font-size: 10px;
font-weight: 700;
padding: 1px 6px;
border-radius: 10px;
background: rgba(99, 102, 241, 0.15);
color: #818cf8;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.wc-refresh-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
transition: transform 0.3s ease;
}
.wc-refresh-btn:hover {
transform: rotate(180deg);
}
.wc-rooms .rooms-grid,
.wc-col-right .wc-rooms .rooms-grid {
flex: 1;
min-height: 0;
max-height: 260px !important;
overflow-y: auto;
padding-right: 4px;
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
grid-auto-rows: max-content !important;
align-content: start !important;
gap: 10px !important;
}
.wc-rooms .rooms-grid .room-item {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 10px !important;
padding: 8px 12px !important;
height: auto !important;
min-height: 46px !important;
max-height: 54px !important;
align-self: start !important;
border-radius: 12px !important;
background: color-mix(in srgb, var(--surface-2) 60%, rgba(255, 255, 255, 0.03)) !important;
border: 1px solid color-mix(in srgb, var(--border) 55%, transparent) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
cursor: pointer;
position: relative;
overflow: hidden;
transition: transform .15s ease, background .15s, border-color .15s, box-shadow .15s !important;
}
.wc-rooms .rooms-grid .room-item:hover {
background: color-mix(in srgb, var(--accent) 14%, var(--surface)) !important;
border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--accent) 40%, transparent) !important;
}
.wc-rooms .rooms-grid .room-item-icon {
width: 30px;
height: 30px;
border-radius: 8px;
background: color-mix(in srgb, var(--accent) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}
.wc-rooms .rooms-grid .room-item.locked .room-item-icon {
background: color-mix(in srgb, #eab308 18%, transparent);
border-color: color-mix(in srgb, #eab308 30%, transparent);
color: #eab308;
}
.wc-rooms .rooms-grid .room-item-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.wc-rooms .rooms-grid .room-name {
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
color: var(--text) !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wc-rooms .rooms-grid .room-count {
font-size: 12px !important;
line-height: 1.2 !important;
color: var(--muted) !important;
display: flex;
align-items: center;
gap: 4px;
}
.wc-rooms .rooms-grid .room-online-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 5px #10b981;
display: inline-block;
}
.wc-rooms .rooms-grid .room-join-arrow {
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.07);
color: var(--muted);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s ease;
}
.wc-rooms .rooms-grid .room-item:hover .room-join-arrow {
background: var(--accent);
color: #ffffff;
transform: translateX(1px);
box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
}
/* Features */
.wc-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.wc-feat-item {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 7px 4px;
border-radius: 10px;
background: color-mix(in srgb, var(--bg) 50%, transparent);
border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
font-size: 11.5px;
font-weight: 500;
color: var(--soft);
}
/* ---------- ROOM VIEW ---------- */
.room-view {
flex: 1;
min-height: 0;
height: auto;
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 16px 20px 104px; /* bottom reserves space for floating dock */
box-sizing: border-box;
gap: 16px;
}
.room-view .col { min-height: 0; }
.col-users .users-list,
.col-chat .chat-messages { min-height: 0; }
/* ---------- SHORT VIEWPORTS (โค 760px tall) ---------- */
@media (max-height: 760px) {
.welcome { padding: 16px; }
.welcome-card { padding: 22px 24px 18px; }
.wc-title { font-size: 26px; margin: 10px 0 4px; }
.wc-sub { font-size: 13px; margin-bottom: 14px; }
.wc-form { gap: 8px; }
.wc-form .cv-field { padding: 8px 12px; }
.wc-form .composer-go-wide{ height: 40px; }
.wc-divider { margin: 14px 0 10px; }
.wc-rooms .rooms-grid { max-height: 160px; }
.wc-features { margin-top: 12px; padding-top: 10px; }
.room-view { padding: 12px 16px 96px; }
}
/* ---------- VERY SHORT (โค 620px tall) ---------- */
@media (max-height: 620px) {
.wc-sub, .wc-features { display: none; }
.wc-title { font-size: 22px; }
.wc-rooms .rooms-grid { max-height: 120px; }
}
/* ---------- MOBILE: restore normal scrolling ---------- */
@media (max-width: 860px) {
html, body { height: auto; overflow: auto; }
.page { display: block; overflow: visible; }
.welcome { overflow: visible; padding: 20px 16px; }
.room-view { display: grid; padding: 12px 12px 140px; }
}
/* ---------- chat links + system messages + edited tag ---------- */
.chat-bubble .chat-link {
color: var(--accent);
text-decoration: underline;
word-break: break-all;
}
.chat-bubble .chat-link:hover {
color: var(--accent-hover);
}
.chat-row.chat-system {
justify-content: center;
margin: 4px 0;
}
.chat-row.chat-system .chat-stack {
flex-direction: row;
align-items: center;
gap: 8px;
max-width: 90%;
}
.chat-system-bubble {
font-size: 12px;
color: var(--muted);
background: transparent;
border: 1px dashed var(--border);
padding: 4px 10px;
border-radius: 999px;
text-align: center;
user-select: none;
}
.chat-row.chat-system .chat-time {
font-size: 11px;
color: var(--muted);
opacity: .6;
}
.chat-edited {
font-size: 10px;
color: var(--muted);
margin-left: 6px;
opacity: .7;
font-style: italic;
}
.chat-row.deleted .chat-bubble {
font-style: italic;
color: var(--muted);
opacity: .7;
}
.chat-row .chat-row-menu {
display: none;
position: absolute;
top: 4px;
right: 4px;
gap: 4px;
}
.chat-row.me {
position: relative;
}
.chat-row.me:hover .chat-row-menu {
display: flex;
}
.chat-row-menu .row-menu-btn {
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--soft);
width: 22px;
height: 22px;
border-radius: 6px;
font-size: 11px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.chat-row-menu .row-menu-btn:hover {
background: var(--accent-soft);
color: var(--text);
border-color: var(--accent);
}
.chat-row-menu .row-menu-btn.danger:hover {
background: rgba(248, 113, 113, .15);
border-color: var(--danger);
color: var(--danger);
}
.set-row .set-ctrl select {
background: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 6px 8px;
min-width: 180px;
font-size: 13px;
}
/* =========================================================
Connection Quality Dot
========================================================= */
.quality-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-left: 6px;
background: #6b7280;
box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.18);
transition: background 200ms ease, box-shadow 200ms ease;
vertical-align: middle;
flex-shrink: 0;
}
.quality-dot[data-quality="good"] {
background: #22c55e;
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.22);
}
.quality-dot[data-quality="medium"] {
background: #f59e0b;
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.22);
}
.quality-dot[data-quality="bad"] {
background: #ef4444;
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
animation: qualityBadPulse 1.6s ease-in-out infinite;
}
.quality-dot[data-quality="unknown"] {
background: #6b7280;
opacity: 0.6;
}
.conn-type {
margin-left: 5px;
font-size: 11px;
line-height: 1;
vertical-align: middle;
cursor: help;
}
.conn-type[data-conn="direct"] { opacity: 0.55; }
.conn-type[data-conn="relay"] { opacity: 1; }
@keyframes qualityBadPulse {
0%, 100% { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25); }
50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10); }
}
/* =========================================================
Screen Share Panel
========================================================= */
.screen-theater {
position: fixed;
left: 50%;
top: calc(var(--hdr-h) + 14px);
transform: translateX(-50%);
z-index: 60;
width: min(760px, 94vw);
display: flex;
flex-direction: column;
background: rgba(14, 16, 20, 0.92);
backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 16px;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.screen-theater[hidden] { display: none; }
/* Title bar */
.st-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
cursor: move;
touch-action: none;
user-select: none;
}
body.st-dragging { cursor: move; user-select: none; }
body.st-dragging .screen-tile video { pointer-events: none; }
.st-title {
font-size: 13px;
font-weight: 600;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.st-bar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.st-act {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border: none;
border-radius: 8px;
background: rgba(255, 255, 255, 0.08);
color: #fff;
font-size: 14px;
cursor: pointer;
transition: background 0.14s;
}
.st-act:hover { background: rgba(255, 255, 255, 0.18); }
#stStopBtn { background: rgba(239, 68, 68, 0.22); }
#stStopBtn:hover { background: rgba(239, 68, 68, 0.4); }
/* Spotlight */
.st-stage { position: relative; background: #000; }
.st-stage-inner {
width: 100%;
aspect-ratio: 16 / 9;
display: grid;
place-items: stretch;
}
.st-stage-inner .screen-tile {
width: 100%;
height: 100%;
border-radius: 0;
box-shadow: none;
border: none;
cursor: default;
}
.st-stage-inner .screen-tile video { object-fit: contain; }
.st-stage.fit-cover .st-stage-inner .screen-tile video { object-fit: cover; }
/* Player control bar โ overlaid on the spotlight, auto-hiding */
.st-controls {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
opacity: 0;
transform: translateY(6px);
transition: opacity 0.18s, transform 0.18s;
pointer-events: none;
z-index: 3; /* above the annotation canvas (z-index:1) so its buttons stay clickable while drawing */
}
.st-stage.controls-visible .st-controls,
.st-controls:hover {
opacity: 1;
transform: none;
pointer-events: auto;
}
.st-spacer { flex: 1; }
.st-cbtn {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: none;
border-radius: 8px;
background: rgba(255, 255, 255, 0.14);
color: #fff;
font-size: 15px;
cursor: pointer;
transition: background 0.14s;
}
.st-cbtn:hover { background: rgba(255, 255, 255, 0.28); }
.st-cbtn.active { background: var(--accent); }
.st-vol {
width: 90px;
accent-color: var(--accent);
cursor: pointer;
}
.st-vol:disabled { opacity: 0.4; cursor: default; }
/* Annotation overlay โ transparent canvas over a screen-share tile */
.annot-layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
touch-action: none;
}
.annot-layer.annot-active { cursor: crosshair; }
.annot-layer.annot-pointing { cursor: crosshair; }
/* Guided remote pointer โ DOM cursor markers above the canvas */
.annot-cursors {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
overflow: hidden;
}
.annot-cursor {
position: absolute;
transform: translate(-2px, -2px);
will-change: left, top;
transition: left 0.05s linear, top 0.05s linear;
}
.annot-cursor-arrow {
width: 0;
height: 0;
border-left: 7px solid currentColor;
border-top: 7px solid currentColor;
border-right: 7px solid transparent;
border-bottom: 7px solid transparent;
border-top-left-radius: 2px;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.annot-cursor-label {
position: absolute;
left: 12px;
top: 10px;
white-space: nowrap;
font-size: 11px;
font-weight: 600;
color: #fff;
padding: 1px 6px;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
/* Click pulse */
.annot-pulse {
position: absolute;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border: 2px solid #34d399;
border-radius: 50%;
pointer-events: none;
animation: annotPulse 0.6s ease-out forwards;
}
@keyframes annotPulse {
from { transform: scale(0.4); opacity: 0.9; }
to { transform: scale(2.6); opacity: 0; }
}
/* Annotation toolbar bits show only while draw mode is on */
.st-anno-on { display: none; }
.st-controls.annotating .st-anno-on { display: inline-flex; }
.st-anno-color {
width: 30px;
height: 30px;
padding: 0;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
background: none;
cursor: pointer;
}
.st-anno-color::-webkit-color-swatch { border: none; border-radius: 5px; }
.st-anno-color::-webkit-color-swatch-wrapper { padding: 0; }
/* Resize grip โ bottom-right corner */
.st-resize {
position: absolute;
right: 2px;
bottom: 2px;
width: 16px;
height: 16px;
cursor: nwse-resize;
z-index: 2;
background:
linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 60%, transparent 60%,
transparent 72%, rgba(255, 255, 255, 0.5) 72%, rgba(255, 255, 255, 0.5) 82%, transparent 82%);
touch-action: none;
}
.screen-theater.minimized .st-resize { display: none; }
/* Thumbnail strip */
.st-strip {
display: flex;
gap: 8px;
padding: 8px;
overflow-x: auto;
background: rgba(255, 255, 255, 0.03);
}
.st-strip[hidden] { display: none; }
.st-strip .screen-tile {
flex: 0 0 auto;
width: 132px;
aspect-ratio: 16 / 9;
cursor: pointer;
opacity: 0.78;
outline: 2px solid transparent;
transition: opacity 0.14s, outline-color 0.14s;
}
.st-strip .screen-tile:hover { opacity: 1; }
.st-strip .screen-tile.camera-tile { width: 104px; aspect-ratio: 4 / 3; }
.st-strip .screen-tile video { object-fit: cover; }
/* Minimized โ collapse to just the title bar */
.screen-theater.minimized { width: min(340px, 88vw); }
.screen-theater.minimized .st-stage,
.screen-theater.minimized .st-strip { display: none; }
/* Tile base (shared by spotlight + thumbnails) */
.screen-tile {
position: relative;
background: #000;
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.screen-tile video {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
}
.screen-tile-label {
position: absolute;
left: 8px;
bottom: 8px;
padding: 3px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
color: #fff;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
pointer-events: none;
max-width: calc(100% - 16px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Overlay controls on the local camera tile (torch + flip) */
.screen-tile .tile-controls {
position: absolute;
top: 8px;
right: 8px;
display: flex;
gap: 6px;
z-index: 3;
}
.tile-ctrl-btn {
width: 36px;
height: 36px;
border-radius: 9px;
display: inline-grid;
place-items: center;
color: #fff;
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.25);
cursor: pointer;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.tile-ctrl-btn:hover { background: rgba(0, 0, 0, 0.7); }
.tile-ctrl-btn:active { transform: scale(0.94); }
.tile-ctrl-btn.active { background: var(--accent); border-color: transparent; }
.tile-ctrl-btn[hidden] { display: none; }
/* Too small to be useful on strip thumbnails โ only on the focused/stage tile */
.st-strip .tile-controls { display: none; }
/* Active dock buttons */
#screenShareBtn.active { background: var(--accent); color: #fff; }
#cameraToggleBtn.active { background: var(--accent); color: #fff; }
@media (max-width: 600px) {
.screen-theater {
left: 8px;
right: 8px;
width: auto;
transform: none;
top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px) + 10px);
}
.screen-theater.minimized { width: auto; }
/* Bigger touch targets on the player bar */
.st-cbtn { width: 38px; height: 38px; }
.st-resize { width: 22px; height: 22px; }
}
/* ========================================================================
Whiteboard panel
======================================================================== */
.wb-panel {
position: fixed;
right: 16px;
top: 80px;
width: 560px;
height: 420px;
background: rgba(17, 19, 27, 0.96);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
z-index: 60;
overflow: hidden;
backdrop-filter: blur(8px);
}
.wb-panel.hidden { display: none; }
.wb-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wb-handle {
flex: 1;
cursor: move;
user-select: none;
padding: 2px 4px;
}
.wb-title {
font-weight: 600;
font-size: 13px;
color: var(--fg, #e8eaf2);
letter-spacing: 0.3px;
}
.wb-tools {
display: flex;
align-items: center;
gap: 6px;
}
.wb-tools input[type="color"] {
width: 28px;
height: 28px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 6px;
background: transparent;
cursor: pointer;
}
.wb-tools input[type="range"] {
width: 90px;
}
.wb-tbtn {
background: rgba(255, 255, 255, 0.06);
color: var(--fg, #e8eaf2);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
width: 30px;
height: 28px;
cursor: pointer;
font-size: 13px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
transform: none !important;
transition: background 0.18s ease, border-color 0.18s ease, filter 0.18s ease !important;
}
.wb-tbtn:hover { background: rgba(255, 255, 255, 0.14) !important; border-color: rgba(255, 255, 255, 0.22) !important; transform: none !important; }
.wb-tbtn.active { background: var(--accent) !important; color: #fff; transform: none !important; }
#wbCanvas {
flex: 1;
width: 100%;
background: #11131b;
cursor: crosshair;
touch-action: none;
display: block;
}
.wb-resize {
position: absolute;
right: 0;
bottom: 0;
width: 16px;
height: 16px;
cursor: nwse-resize;
background:
linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.25) 50%);
}
#whiteboardToggleBtn.active { background: var(--accent); color: #fff; }
/* ========================================================================
Watch-together panel
======================================================================== */
.yt-panel {
position: fixed;
right: 16px;
bottom: 100px;
width: 480px;
background: rgba(17, 19, 27, 0.96);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
z-index: 60;
overflow: hidden;
backdrop-filter: blur(8px);
}
.yt-panel.hidden { display: none; }
.yt-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.yt-handle {
flex: 1;
cursor: move;
user-select: none;
display: flex;
align-items: center;
gap: 8px;
padding: 2px 4px;
}
.yt-title {
font-weight: 600;
font-size: 13px;
color: var(--fg, #e8eaf2);
}
.yt-status {
font-size: 11px;
color: var(--muted, #8a90a3);
}
.yt-tools { display: flex; gap: 6px; align-items: center; }
.yt-tbtn {
background: rgba(255, 255, 255, 0.06);
color: var(--fg, #e8eaf2);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
height: 28px;
padding: 0 12px;
cursor: pointer;
font-size: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
line-height: 1;
box-sizing: border-box;
vertical-align: middle;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
transform: none !important;
transition: background 0.18s ease, border-color 0.18s ease, filter 0.18s ease !important;
}
.yt-tbtn:hover {
background: rgba(255, 255, 255, 0.14) !important;
border-color: rgba(255, 255, 255, 0.22) !important;
transform: none !important;
}
.yt-tbtn.yt-load { background: var(--accent) !important; color: #fff; border-color: transparent !important; }
.yt-tbtn.yt-load:hover { filter: brightness(1.15) !important; transform: none !important; }
.yt-tbtn svg {
display: block;
flex-shrink: 0;
}
.yt-tools .yt-tbtn,
#ytPaste,
#ytFile {
width: 28px;
height: 28px;
padding: 0;
flex-shrink: 0;
}
.yt-input-row {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
background: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.yt-input-row input {
flex: 1;
height: 28px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
color: var(--fg, #e8eaf2);
padding: 0 10px;
font-size: 13px;
outline: none;
}
.yt-input-row input:focus { border-color: var(--accent); }
/* ---- UAKino catalog browser ---- */
.wp-catalog { display: none; flex-direction: column; min-height: 0; }
.yt-panel.catalog-open .wp-catalog { display: flex; }
/* While browsing the catalog, hide the player + volume + paste row. */
.yt-panel.catalog-open .yt-player-wrap,
.yt-panel.catalog-open .yt-vol-row,
.yt-panel.catalog-open .yt-input-row { display: none; }
.wp-cat-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wp-cat-tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
flex: 1;
min-width: 0;
}
.wp-cat-tab {
background: transparent;
color: var(--muted, #8a90a3);
border: 1px solid transparent;
border-radius: 6px;
height: 26px;
padding: 0 9px;
cursor: pointer;
font-size: 12px;
white-space: nowrap;
}
.wp-cat-tab:hover { color: var(--fg, #e8eaf2); background: rgba(255, 255, 255, 0.06); }
.wp-cat-tab.active {
color: #fff;
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.12);
}
.wp-cat-search {
display: flex;
gap: 6px;
padding: 8px 10px;
background: rgba(0, 0, 0, 0.12);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wp-cat-search input {
flex: 1;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
color: var(--fg, #e8eaf2);
padding: 6px 10px;
font-size: 13px;
outline: none;
}
.wp-cat-search input:focus { border-color: var(--accent); }
.wp-cat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
gap: 12px 10px;
padding: 12px 10px;
overflow-y: auto;
max-height: 48vh;
align-content: start;
}
.wp-cat-card {
display: flex;
flex-direction: column;
gap: 5px;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
color: var(--fg, #e8eaf2);
text-align: left;
}
.wp-cat-thumb {
position: relative;
display: block;
width: 100%;
aspect-ratio: 2 / 3;
border-radius: 8px;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.wp-cat-thumb.noimg::after {
content: "๐ฌ";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
opacity: 0.4;
}
.wp-cat-poster {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.wp-cat-card:hover .wp-cat-thumb {
transform: translateY(-3px);
border-color: var(--accent);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}
/* Quality (top-left) + IMDB (top-right) badges, like uakino's cards */
.wp-cat-badge {
position: absolute;
top: 6px;
font-size: 10px;
font-weight: 600;
line-height: 1;
padding: 3px 5px;
border-radius: 5px;
backdrop-filter: blur(2px);
}
.wp-cat-q {
left: 6px;
background: rgba(0, 0, 0, 0.72);
color: #fff;
}
.wp-cat-imdb {
right: 6px;
background: rgba(245, 197, 24, 0.92);
color: #1a1205;
}
/* Hover play overlay (uakino's go-watch circle) */
.wp-cat-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #fff;
background: rgba(0, 0, 0, 0.42);
opacity: 0;
transition: opacity 0.15s;
}
.wp-cat-play::before {
content: "";
position: absolute;
width: 38px;
height: 38px;
border-radius: 999px;
background: var(--accent, #4d8dff);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.wp-cat-play { padding-left: 2px; }
.wp-cat-card:hover .wp-cat-play,
.wp-cat-card:focus-visible .wp-cat-play { opacity: 1; }
.wp-cat-name {
font-size: 11px;
line-height: 1.25;
color: var(--fg, #e8eaf2);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.wp-cat-meta {
font-size: 10px;
color: var(--muted, #8a90a3);
line-height: 1;
}
.wp-cat-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
min-height: 22px;
}
.wp-cat-status { font-size: 11px; color: var(--muted, #8a90a3); }
.wp-cat-more.hidden { display: none; }
.yt-vol-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px 8px;
background: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.yt-vol-row.hidden { display: none; }
.yt-vol-icon {
font-size: 14px;
cursor: pointer;
user-select: none;
width: 20px;
text-align: center;
}
.yt-vol {
flex: 1;
accent-color: var(--accent, #4d8dff);
cursor: pointer;
height: 4px;
}
.yt-vol-val {
font-size: 11px;
color: var(--muted, #8a90a3);
min-width: 34px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.yt-player-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
}
.yt-player-wrap iframe,
.yt-player-wrap > div {
width: 100% !important;
height: 100% !important;
}
/* Fullscreen: the wrap fills the screen, so drop the 16:9 box constraint. */
.yt-player-wrap:fullscreen {
aspect-ratio: auto;
width: 100vw;
height: 100vh;
}
/* Resize grip โ bottom-right corner */
.yt-resize {
position: absolute;
right: 2px;
bottom: 2px;
width: 16px;
height: 16px;
cursor: nwse-resize;
z-index: 3;
touch-action: none;
background:
linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0.45) 60%, transparent 60%,
transparent 72%, rgba(255, 255, 255, 0.45) 72%, rgba(255, 255, 255, 0.45) 82%, transparent 82%);
}
/* Spin feedback when re-syncing */
@keyframes yt-spin { to { transform: rotate(360deg); } }
.yt-tbtn.spin { animation: yt-spin 0.6s linear; }
#watchPartyToggleBtn.active { background: var(--accent); color: #fff; }
@media (max-width: 600px) {
.wb-panel, .yt-panel {
right: 8px;
left: 8px;
width: auto;
}
.wb-panel { height: 60vh; }
}
/* ========================================================================
Soundboard panel
======================================================================== */
.sb-panel {
position: fixed;
left: 16px;
bottom: 100px;
width: 360px;
max-height: 70vh;
background: rgba(17, 19, 27, 0.96);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
z-index: 60;
overflow: hidden;
backdrop-filter: blur(8px);
}
.sb-panel.hidden { display: none; }
.sb-panel.dragover { outline: 2px dashed var(--accent); }
.sb-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sb-handle {
flex: 1;
cursor: move;
user-select: none;
display: flex;
align-items: center;
gap: 8px;
padding: 2px 4px;
}
.sb-title { font-weight: 600; font-size: 13px; color: var(--fg, #e8eaf2); }
.sb-status { font-size: 11px; color: var(--muted, #8a90a3); }
.sb-tools { display: flex; align-items: center; gap: 8px; }
.sb-vol {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--muted, #8a90a3);
}
.sb-vol input[type="range"] { width: 80px; }
.sb-tbtn {
background: rgba(255, 255, 255, 0.06);
color: var(--fg, #e8eaf2);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
width: 30px;
height: 28px;
cursor: pointer;
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
transform: none !important;
transition: background 0.18s ease, border-color 0.18s ease, filter 0.18s ease !important;
}
.sb-tbtn:hover { background: rgba(255, 255, 255, 0.14) !important; border-color: rgba(255, 255, 255, 0.22) !important; transform: none !important; }
.sb-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
padding: 10px;
overflow-y: auto;
}
.sb-pad {
background: rgba(255, 255, 255, 0.06);
color: var(--fg, #e8eaf2);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 12px 6px;
font-size: 12px;
cursor: pointer;
transition: transform 0.05s, background 0.15s;
text-align: center;
line-height: 1.3;
}
.sb-pad:hover { background: rgba(255, 255, 255, 0.12); }
.sb-pad:active { transform: scale(0.96); background: var(--accent); color: #fff; }
.sb-pad-wrap { position: relative; }
.sb-pad.sb-custom { background: rgba(110, 90, 200, 0.18); border-color: rgba(110, 90, 200, 0.4); width: 100%; }
.sb-del {
position: absolute;
top: 2px;
right: 2px;
width: 18px;
height: 18px;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 10px;
cursor: pointer;
line-height: 1;
display: none;
}
.sb-pad-wrap:hover .sb-del { display: block; }
.sb-hint {
padding: 8px 10px 10px;
font-size: 11px;
color: var(--muted, #8a90a3);
text-align: center;
}
#soundboardToggleBtn.active { background: var(--accent); color: #fff; }
@media (max-width: 600px) {
.sb-panel {
right: 8px;
left: 8px;
width: auto;
}
.sb-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ========== PROFILE: avatar image rendering + editor ========== */
.avatar.has-image,
.dock-avatar.has-image,
.profile-avatar.has-image,
.profile-preview.has-image {
background-color: transparent;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: transparent;
}
/* Big avatar in profile modal */
.profile-avatar {
width: 88px;
height: 88px;
border-radius: 50%;
margin: 0 auto 14px;
display: grid;
place-items: center;
color: #fff;
font-weight: 700;
font-size: 32px;
background: var(--accent);
box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
/* Profile editor row in settings */
.set-row.profile-row {
align-items: center;
gap: 14px;
}
.profile-preview {
width: 56px;
height: 56px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
font-weight: 700;
font-size: 20px;
flex-shrink: 0;
background: var(--accent);
}
.profile-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.btn.btn-ghost {
background: transparent;
border: 1px solid var(--border);
}
.btn.btn-ghost:disabled {
opacity: .5;
cursor: not-allowed;
}
/* Native color picker - make it match the rest of the controls */
.color-input {
width: 44px;
height: 32px;
padding: 0;
border: 1px solid var(--border);
border-radius: 8px;
background: transparent;
cursor: pointer;
}
.color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.color-input::-webkit-color-swatch { border: none; border-radius: 6px; }
/* Bio textarea inside settings */
#profileBioInput {
font-family: inherit;
line-height: 1.4;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-2, var(--surface));
color: var(--text);
}
/* ========== Welcome card: nick badge (input lives in Settings) ========== */
.cv-nick-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
background: var(--surface-2, var(--surface));
border: 1px solid var(--border);
border-radius: 10px;
}
.cv-nick-label {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.cv-nick-value {
font-size: 14px;
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cv-nick-value.is-empty {
color: var(--muted);
font-weight: 500;
font-style: italic;
}
.cv-nick-edit {
flex-shrink: 0;
padding: 6px 12px;
font-size: 13px;
}
/* ========== Watch-together: per-provider panel sizing ========== */
/* Default panel keeps 16:9 for YouTube/Twitch/Vimeo. */
/* TikTok shorts are vertical (9:16). Make the panel narrower and the
player wrapper match the natural aspect ratio so nothing is cropped. */
.yt-panel.provider-tiktok {
width: 360px;
max-width: calc(100vw - 24px);
}
.yt-panel.provider-tiktok .yt-player-wrap {
aspect-ratio: 9 / 16;
/* TT embed has its own chrome (likes, comments). Give it some headroom
so the video itself stays fully visible. */
max-height: min(78vh, 720px);
}
/* SoundCloud is audio with a compact visual widget - no need for 16:9. */
.yt-panel.provider-soundcloud .yt-player-wrap {
aspect-ratio: auto;
height: 180px;
}
/* Allow the panel itself to grow vertically up to the viewport so the
tall TikTok player isn''t clipped by a hard-coded outer height. */
.yt-panel {
max-height: calc(100vh - 140px);
}
@media (max-width: 600px) {
.yt-panel.provider-tiktok {
width: auto;
}
.yt-panel.provider-tiktok .yt-player-wrap {
max-height: 70vh;
}
}
/* ---- Inline error feedback (e.g. join "room exists") ---- */
.input-error {
border-color: #ff5d6c !important;
box-shadow: 0 0 0 3px rgba(255, 93, 108, 0.18) !important;
animation: shake 0.32s cubic-bezier(.36,.07,.19,.97);
}
@keyframes shake {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX(2px); }
30%, 50%, 70% { transform: translateX(-4px); }
40%, 60% { transform: translateX(4px); }
}
.flash-highlight {
animation: flashHighlight 1.5s ease-out;
}
@keyframes flashHighlight {
0% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0); background-color: rgba(96, 165, 250, 0.18); }
20% { box-shadow: 0 0 0 6px rgba(96, 165, 250, 0.35); }
100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0); background-color: transparent; }
}
/* =========================================================
PHONE / TOUCH RESPONSIVE (added)
Goal: keep everything usable on 320โ480px wide screens.
========================================================= */
/* Tablet & smaller phones (โค640px) ---------------------------------- */
@media (max-width: 640px) {
:root { --hdr-h: 52px; }
/* Lock viewport: nothing scrolls except inner lists/chat. */
html, body {
height: 100dvh !important;
height: 100vh;
overflow: hidden !important;
}
body { display: flex; flex-direction: column; }
.hdr { padding: env(safe-area-inset-top, 0px) 12px 0; flex-shrink: 0; }
.hdr-left,
.hdr-right { gap: 10px; }
.logo-name { font-size: 14px; }
.badge { font-size: 11px; padding: 3px 8px; }
.page {
flex: 1;
min-height: 0;
display: flex !important;
overflow: hidden !important;
padding: 0 !important;
}
/* Room view: single column, both cols share remaining height. */
.room-view {
display: flex !important;
flex-direction: column;
flex: 1;
min-height: 0;
grid-template-columns: 1fr !important;
padding: 8px 8px calc(var(--dock-h, 108px) + 8px) !important;
gap: 8px;
overflow: hidden;
}
/* Higher-specificity guard so `hidden` still wins over the rule above. */
.room-view[hidden] { display: none !important; }
.col-stage { display: none; }
.room-hero { flex-shrink: 0; padding: 10px 12px; }
.room-hero .rh-name { font-size: 17px; }
.room-hero .invite-btn { height: 36px; padding: 0 12px; }
.col { border-radius: 12px; min-height: 0; }
.col-head { padding: 8px 12px; flex-shrink: 0; }
.col-title { font-size: 14px; }
.col-sub { font-size: 11px; }
/* Members/chat are tabbed on phones โ each one gets the full height
instead of a cramped 30/70 split. */
.room-tabs { display: flex; gap: 6px; flex-shrink: 0; }
.room-tab {
flex: 1;
padding: 9px 10px;
border-radius: 10px;
background: var(--surface);
border: 1px solid var(--border);
color: var(--muted);
font-size: 13px;
font-weight: 600;
position: relative;
}
.room-tab.active {
background: var(--accent-soft);
color: var(--accent);
border-color: var(--accent);
}
.room-tab.has-unread::after {
content: "";
position: absolute;
top: 7px;
right: 10px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
}
.room-view .col-users,
.room-view .col-chat { flex: 1 1 auto; }
.room-view.mtab-chat .col-users { display: none; }
.room-view.mtab-users .col-chat { display: none; }
.users-list,
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; }
.search-wrap .mini-input { max-width: 120px; font-size: 12px; }
.chat-input-row { padding: 8px 10px; gap: 6px; flex-shrink: 0; }
.chat-input-row .btn { height: 38px; padding: 0 12px; font-size: 13px; }
.chat-input-wrap input { font-size: 16px; } /* prevent iOS zoom on focus */
/* Welcome: only form + rooms list visible, fits viewport, no scroll. */
.welcome {
flex: 1;
min-height: 0;
padding: 10px !important;
overflow: hidden !important;
display: flex;
align-items: stretch;
justify-content: center;
}
.welcome-card {
padding: 12px !important;
border-radius: 16px;
max-height: 100%;
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
}
/* Hide everything except the form and the active-rooms list. */
.welcome-card .wc-brand,
.welcome-card .wc-title,
.welcome-card .wc-sub,
.welcome-card .wc-divider,
.welcome-card .wc-features { display: none !important; }
.wc-form { gap: 6px; flex-shrink: 0; }
.wc-form .cv-field { padding: 6px 10px; }
.wc-form .cv-field input,
.wc-form .cv-field input[type="text"],
.wc-form .cv-field input[type="password"] { font-size: 16px; } /* prevent iOS zoom */
.wc-form .composer-go-wide { height: 40px; }
.wc-rooms { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 4px; }
.wc-rooms-head { flex-shrink: 0; }
.wc-rooms-title { font-size: 12px; }
.wc-rooms .rooms-grid { flex: 1; min-height: 0; max-height: none !important; overflow-y: auto; }
.cv-nick-row { flex-wrap: wrap; gap: 6px; }
.cv-nick-edit { font-size: 12px; padding: 6px 10px; }
/* Modals: full-bleed-ish on phones, scrollable */
.modal { padding: 12px; align-items: flex-start; padding-top: 8vh; }
.modal-card { padding: 20px; max-width: 100%; max-height: 84vh; overflow-y: auto; border-radius: 14px; }
.settings-card { padding: 0; max-height: 88vh; }
.settings-head { padding: 14px 16px; }
.settings-body { padding: 6px 16px 16px; }
/* Dock: 2-row compact layout pinned to bottom */
.dock {
gap: 8px !important;
padding: 8px 10px !important;
bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
left: 8px !important;
right: 8px !important;
flex-wrap: wrap;
justify-content: center;
border-radius: 16px;
}
.dock-handle { display: none; }
.dock-self { max-width: none; flex: 1 1 auto; min-width: 0; gap: 8px; }
.dock-avatar { width: 30px; height: 30px; font-size: 12px; }
.dock-name { font-size: 12px; max-width: 110px; }
.dock-presence { font-size: 10px; }
.vu-meter { display: none; }
.dock-divider { display: none; }
.dock-ping { font-size: 11px; flex: 0 0 auto; }
.dock-actions {
flex: 1 1 100%;
order: 2;
justify-content: space-between;
gap: 4px;
}
.dock-btn { width: 36px; height: 36px; border-radius: 9px; }
.dock-btn svg { width: 16px; height: 16px; }
/* Toasts and log popover: full-width strips */
.toasts { top: 60px; right: 8px; left: 8px; }
.toast { max-width: none; font-size: 12px; }
.log-pop { left: 8px !important; right: 8px !important; width: auto !important; }
}
/* Very small phones (โค380px) ---------------------------------------- */
@media (max-width: 380px) {
.hdr-left .logo-name { display: none; }
.badge { font-size: 10px; padding: 2px 6px; }
.wc-title { font-size: 20px !important; }
.welcome-card { padding: 14px 12px 12px !important; }
/* Drop the meta block to fit ping + 8 actions */
.dock-self { gap: 6px; }
.dock-meta { display: none; }
.dock-btn { width: 34px; height: 34px; }
.dock-btn svg { width: 15px; height: 15px; }
}
/* Landscape phones (very short) ------------------------------------- */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
.room-view { padding-bottom: 90px !important; }
.dock { bottom: 6px !important; padding: 6px 8px !important; }
.dock-btn { width: 32px; height: 32px; }
.dock-btn svg { width: 14px; height: 14px; }
.col-users { max-height: none; min-height: 160px; }
.col-chat { min-height: 220px; }
}
/* Touch hover-state cleanup ----------------------------------------- */
@media (hover: none) {
.dock-btn:hover:not(:disabled),
.icon-btn:hover { background: inherit; }
}
/* =========================================================
MOBILE / LOW-POWER PERFORMANCE
Frosted blur, the two animated blurred background layers, and
forever-running decorative animations are the main sources of
jank on phones. Drop them on small / touch devices โ every
surface keeps its own background colour, so the look degrades
gracefully while the GPU stops doing per-frame blur work.
========================================================= */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
/* 1. Kill every backdrop blur at once (~40 call sites). */
*, *::before, *::after {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* 2. Remove the decorative blurred/animated background layers โ they
exist only to be refracted by the blur we just disabled. */
.app-bg,
body::before,
body::after { display: none !important; }
/* 3. Stop infinite decorative animations from repainting forever. */
.badge.online::before,
.quality-dot[data-quality="bad"] { animation: none !important; }
/* 4. No per-item entrance animation when a burst of rows renders. */
.chat-row, .user-card { animation: none !important; }
/* 5. Let the browser skip rendering off-screen list rows while scrolling. */
.chat-row { content-visibility: auto; contain-intrinsic-size: auto 56px; }
.user-card { content-visibility: auto; contain-intrinsic-size: auto 64px; }
/* 6. Lighter shadows are cheaper to composite. */
.dock, .modal-card, .screen-theater, .col {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}
}
/* ===== Virtual background controls ===== */
.vbg-controls { display: flex; flex-direction: column; gap: 8px; }
.vbg-controls select,
.vbg-controls input[type="range"],
.vbg-controls input[type="color"] { max-width: 220px; }
.vbg-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vbg-row .composer-label { min-width: 60px; opacity: .75; font-size: 12px; }
.vbg-img-name { font-size: 12px; opacity: .7; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ===== Spatial audio panel (3D positional) ===== */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px);
}
.modal-content {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
width: 100%;
max-width: 420px;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
color: var(--text);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid var(--border);
}
.modal-header h2 { margin: 0; font-size: 16px; font-weight: 600; }
.modal-header .close-btn {
background: none;
border: none;
color: var(--muted);
font-size: 22px;
line-height: 1;
cursor: pointer;
padding: 2px 6px;
border-radius: var(--radius-sm);
}
.modal-header .close-btn:hover { color: var(--text); background: var(--surface-2); }
.modal-body { padding: 16px 18px; overflow-y: auto; }
.spatial-audio-body { display: flex; flex-direction: column; gap: 16px; }
.spatial-audio-body h3 { margin: 0 0 8px; font-size: 13px; color: var(--soft); font-weight: 600; }
.setting-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.setting-row label { font-size: 13px; color: var(--soft); }
.setting-row select,
.setting-row input[type="range"] {
flex: 1;
min-width: 120px;
accent-color: var(--accent);
}
.setting-row select {
background: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 5px 8px;
}
.toggle-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.toggle-label input { accent-color: var(--accent); }
.hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
/* Top-down position map */
.spatial-position-map {
position: relative;
width: 300px;
max-width: 100%;
height: 300px;
margin: 8px auto 0;
border: 1px solid var(--border-2);
border-radius: var(--radius);
background:
radial-gradient(circle at center, var(--accent-soft) 0, transparent 60%),
var(--surface-2);
overflow: hidden;
touch-action: none;
}
.spatial-position-map .map-center {
position: absolute;
left: 50%; top: 50%;
width: 8px; height: 8px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: var(--border-2);
}
.spatial-position-map .map-listener {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
pointer-events: none;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.spatial-position-map .peer-marker {
position: absolute;
width: 34px; height: 34px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: var(--accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
cursor: grab;
user-select: none;
border: 2px solid var(--surface);
box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.spatial-position-map .peer-marker.dragging { cursor: grabbing; transform: translate(-50%, -50%) scale(1.12); }
.btn-secondary {
background: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 7px 12px;
cursor: pointer;
font-size: 13px;
}
.btn-secondary:hover { background: var(--border); }
/* ========================================================================
Accounts, friends & direct messages
======================================================================== */
/* --- Header account chip + dropdown --- */
.acc-chip-wrap { position: relative; }
.acc-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 10px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface, rgba(255,255,255,0.05));
color: var(--text, #e8eaf2);
font-size: 13px;
font-weight: 600;
cursor: pointer;
max-width: 200px;
}
.acc-chip:hover { background: var(--surface-2, rgba(255,255,255,0.08)); }
.acc-chip.is-auth { border-color: var(--accent); }
.acc-verified { color: var(--accent); font-weight: 800; }
.acc-guest-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted, #8a90a3); }
.acc-caret { opacity: 0.6; font-size: 10px; }
.acc-menu {
position: absolute;
top: 36px;
right: 0;
min-width: 220px;
background: var(--surface, #15171f);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
padding: 6px;
z-index: 200;
}
.acc-menu[hidden] { display: none; }
.acc-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
color: var(--text, #e8eaf2);
padding: 9px 10px;
border-radius: 7px;
font-size: 13px;
cursor: pointer;
}
.acc-menu-item:hover { background: var(--accent-soft, rgba(77,141,255,0.15)); }
.cv-nick-acc-btn {
height: 36px;
padding: 0 12px;
font-size: 13px;
font-weight: 600;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: auto;
}
.cv-nick-acc-btn.is-auth {
color: #ef4444;
border-color: color-mix(in srgb, #ef4444 30%, transparent);
}
.cv-nick-acc-btn.is-auth:hover {
background: color-mix(in srgb, #ef4444 15%, transparent);
}
@media (max-width: 600px) {
.acc-chip {
max-width: 120px;
padding: 0 6px;
font-size: 12px;
height: 28px;
}
.cv-nick-acc-btn {
height: 38px;
padding: 0 10px;
font-size: 13px;
}
}
/* --- Account modals --- */
.acc-modal-ov {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
display: grid;
place-items: center;
z-index: 300;
padding: 16px;
}
.acc-modal {
width: min(420px, 94vw);
background: var(--surface, #15171f);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
padding: 18px;
}
.acc-modal-title { font-size: 16px; font-weight: 700; color: var(--text, #fff); margin-bottom: 12px; }
.acc-modal-body { margin-bottom: 16px; }
.acc-modal-foot { display: flex; justify-content: flex-end; gap: 8px; }
.acc-label { display: block; font-size: 12px; color: var(--muted, #8a90a3); margin-bottom: 6px; }
.acc-input {
width: 100%;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text, #e8eaf2);
padding: 9px 11px;
font-size: 14px;
outline: none;
}
.acc-input:focus { border-color: var(--accent); }
.acc-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.acc-hint { font-size: 12px; color: var(--muted, #8a90a3); margin: 8px 0 0; }
.acc-warn { color: #f0b24b; }
.acc-btn {
border: 1px solid var(--border);
background: var(--surface-2, rgba(255,255,255,0.06));
color: var(--text, #e8eaf2);
border-radius: 8px;
padding: 8px 14px;
font-size: 13px;
cursor: pointer;
}
.acc-btn:hover { background: var(--border); }
.acc-btn-primary { background: var(--accent); border-color: transparent; color: #fff; }
.acc-btn-primary:hover { filter: brightness(1.1); }
.acc-btn-tg {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
background: #0088cc;
border: none;
color: #ffffff;
font-weight: 600;
padding: 10px 16px;
border-radius: 8px;
font-size: 14px;
text-decoration: none;
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease;
}
.acc-btn-tg:hover { background: #0077bb; transform: translateY(-1px); }
.acc-btn-tg:active { transform: translateY(0); }
.acc-btn-tg-link {
width: 100%;
border: 1px dashed rgba(0, 136, 204, 0.4);
background: rgba(0, 136, 204, 0.08);
color: #40b5ff;
border-radius: 8px;
padding: 9px 12px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
.acc-btn-tg-link:hover { background: rgba(0, 136, 204, 0.18); }
.acc-tg-box {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 6px 0;
}
.acc-tg-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 20px 0;
color: var(--muted, #8a90a3);
font-size: 13px;
}
.acc-tg-spinner {
width: 24px;
height: 24px;
border: 3px solid rgba(0, 136, 204, 0.2);
border-top-color: #0088cc;
border-radius: 50%;
animation: accTgSpin 0.8s linear infinite;
}
@keyframes accTgSpin {
to { transform: rotate(360deg); }
}
.acc-tg-code {
display: inline-block;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 26px;
font-weight: 700;
letter-spacing: 6px;
color: #40b5ff;
background: rgba(0, 136, 204, 0.12);
border: 1px solid rgba(0, 136, 204, 0.35);
border-radius: 10px;
padding: 8px 18px;
margin-top: 6px;
user-select: all;
}
.acc-tg-status {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 16px;
font-size: 12px;
color: var(--muted, #8a90a3);
}
.acc-tg-pulse {
width: 8px;
height: 8px;
background: #0088cc;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(0, 136, 204, 0.7);
animation: accTgPulse 1.5s infinite;
}
@keyframes accTgPulse {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 136, 204, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(0, 136, 204, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 136, 204, 0); }
}
/* --- Verified badge next to a nickname --- */
.verified-badge {
display: inline-block;
color: var(--accent);
font-weight: 800;
font-size: 0.85em;
}
/* --- Friends panel --- */
.fr-panel {
position: fixed;
right: 16px;
bottom: 100px;
width: 340px;
max-height: 70vh;
display: flex;
flex-direction: column;
background: var(--surface, rgba(17,19,27,0.97));
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
z-index: 120;
overflow: hidden;
}
.fr-panel.hidden { display: none; }
.fr-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
background: var(--surface-2, rgba(255,255,255,0.04));
border-bottom: 1px solid var(--border);
cursor: move;
touch-action: none;
user-select: none;
}
.fr-title { font-weight: 700; font-size: 14px; color: var(--text, #fff); }
.fr-x {
border: none; background: rgba(255,255,255,0.06); color: var(--text, #fff);
width: 28px; height: 28px; border-radius: 7px; cursor: pointer;
}
.fr-x:hover { background: rgba(255,255,255,0.14); }
.fr-tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--border); }
.fr-tab {
flex: 1;
position: relative;
background: none;
border: 1px solid transparent;
color: var(--muted, #8a90a3);
border-radius: 8px;
padding: 7px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.fr-tab.active { background: var(--accent-soft, rgba(77,141,255,0.15)); color: var(--accent); }
.fr-badge {
display: inline-grid;
place-items: center;
min-width: 16px; height: 16px;
margin-left: 4px; padding: 0 4px;
border-radius: 8px;
background: var(--accent); color: #fff;
font-size: 10px; font-weight: 700;
}
.fr-badge[hidden] { display: none; }
.fr-body { overflow-y: auto; padding: 8px; }
.fr-pane.hidden { display: none; }
.fr-empty { text-align: center; color: var(--muted, #8a90a3); font-size: 13px; padding: 24px 8px; }
.fr-hint { font-size: 12px; color: var(--muted, #8a90a3); margin: 4px 0 10px; }
.fr-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
border-radius: 10px;
}
.fr-item:hover { background: var(--surface-2, rgba(255,255,255,0.04)); }
.fr-ava {
flex: 0 0 auto;
width: 36px; height: 36px;
border-radius: 50%;
display: grid; place-items: center;
color: #fff; font-weight: 700; font-size: 15px;
background-size: cover; background-position: center;
}
.fr-meta { flex: 1; min-width: 0; }
.fr-name { font-size: 13px; font-weight: 600; color: var(--text, #e8eaf2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-sub { font-size: 11px; color: var(--muted, #8a90a3); }
.fr-on { color: #46d369; }
.fr-off { color: #6b7280; }
.fr-acts { display: flex; gap: 4px; flex-shrink: 0; }
.fr-mini {
border: 1px solid var(--border);
background: var(--surface-2, rgba(255,255,255,0.06));
color: var(--text, #e8eaf2);
border-radius: 7px;
height: 28px; padding: 0 8px;
font-size: 12px; cursor: pointer;
}
.fr-mini:hover { background: var(--border); }
.fr-join { background: var(--accent); border-color: transparent; color: #fff; }
.fr-add-row { display: flex; gap: 6px; }
.fr-input {
flex: 1;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text, #e8eaf2);
padding: 8px 10px; font-size: 13px; outline: none;
}
.fr-input:focus { border-color: var(--accent); }
.fr-btn {
border: 1px solid var(--border);
background: var(--surface-2, rgba(255,255,255,0.06));
color: var(--text, #e8eaf2);
border-radius: 8px; padding: 8px 12px; font-size: 13px; cursor: pointer;
}
.fr-btn-primary { background: var(--accent); border-color: transparent; color: #fff; }
.fr-btn-primary:hover { filter: brightness(1.1); }
/* --- DM windows --- */
.dm-win {
position: fixed;
bottom: 16px;
right: 16px;
width: 300px;
height: 380px;
display: flex;
flex-direction: column;
background: var(--surface, #15171f);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 20px 55px rgba(0, 0, 0, 0.55);
z-index: 130;
overflow: hidden;
}
.dm-win.hidden { display: none; }
.dm-head {
display: flex; align-items: center; justify-content: space-between;
padding: 9px 12px;
background: var(--surface-2, rgba(255,255,255,0.04));
border-bottom: 1px solid var(--border);
}
.dm-name { font-weight: 600; font-size: 13px; color: var(--text, #fff); }
.dm-x { border: none; background: none; color: var(--muted, #8a90a3); cursor: pointer; font-size: 14px; }
.dm-x:hover { color: var(--text, #fff); }
.dm-msgs { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.dm-msg { display: flex; }
.dm-msg.mine { justify-content: flex-end; }
.dm-bubble {
max-width: 80%;
padding: 7px 10px;
border-radius: 12px;
font-size: 13px;
line-height: 1.35;
word-break: break-word;
background: var(--surface-2, rgba(255,255,255,0.07));
color: var(--text, #e8eaf2);
}
.dm-msg.mine .dm-bubble { background: var(--accent); color: #fff; }
.dm-input-row { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border); }
.dm-input {
flex: 1;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text, #e8eaf2);
padding: 8px 10px; font-size: 13px; outline: none;
}
.dm-input:focus { border-color: var(--accent); }
.dm-send {
border: none; background: var(--accent); color: #fff;
border-radius: 8px; width: 38px; cursor: pointer; font-size: 14px;
}
.dm-send:hover { filter: brightness(1.1); }
@media (max-width: 600px) {
.fr-panel { right: 8px; left: 8px; width: auto; bottom: 80px; }
.dm-win { right: 8px; left: 8px; width: auto; }
}
/* =========================================================
MODERN REFRESH (2026)
Appended layer โ glass surfaces, depth, softer geometry,
gradient accents. Uses existing theme tokens, so every
data-theme keeps working. Pure visual; no layout logic.
========================================================= */
:root {
/* elevation scale โ soft premium depth (v8) */
--shadow-sm: 0 1px 2px rgba(0,0,0,.3);
--shadow-md: 0 8px 24px -10px rgba(0,0,0,.55);
--shadow-lg: 0 28px 64px -24px rgba(0,0,0,.7);
--glass-blur: 0px;
/* translucent surface derived from the active theme */
--glass: color-mix(in srgb, var(--surface) 64%, transparent);
--glass-2: color-mix(in srgb, var(--surface) 80%, transparent);
--ring: color-mix(in srgb, var(--accent) 38%, transparent);
}
/* premium geometry โ generous soft corners (v8) */
:root {
--radius: 10px;
--radius-sm: 8px;
--radius-lg: 14px;
}
/* ---- bolder, more colorful aurora background ---- */
.app-bg::before { opacity: .62; filter: blur(70px); }
.app-bg::after {
opacity: .52; filter: blur(70px);
background: radial-gradient(circle at center,
color-mix(in srgb, var(--accent-hover) 78%, #fff 22%), transparent 62%);
}
/* ---- frosted header ---- */
.hdr {
background: color-mix(in srgb, var(--bg) 58%, transparent);
-webkit-backdrop-filter: saturate(185%) blur(var(--glass-blur));
backdrop-filter: saturate(185%) blur(var(--glass-blur));
border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}
.logo-dot { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 14px var(--accent); }
/* ---- gradient brand wordmark + welcome title ---- */
.logo-name, .wc-brand-name, .wc-title {
background: linear-gradient(92deg, var(--text) 30%, var(--accent));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* ---- welcome card: frosted, lifted, gradient hairline ---- */
.welcome-card {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--surface) 92%, var(--accent) 8%),
var(--surface) 38%);
border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
box-shadow: var(--shadow-lg),
0 0 60px color-mix(in srgb, var(--accent) 22%, transparent);
position: relative;
}
.welcome-card::before {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 45%, transparent), transparent 42%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
pointer-events: none;
}
/* ---- columns: depth + smoother hover ---- */
.col {
box-shadow: var(--shadow-md);
border-color: color-mix(in srgb, var(--border) 85%, transparent);
}
/* ---- inputs: focus glow ring ---- */
.form input:focus,
.chat-input-row input:focus,
.wc-form .cv-field:focus-within,
.mini-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--ring);
}
/* ---- buttons: gradient primary with accent glow ---- */
.btn { border-radius: var(--radius); }
.btn-primary {
background: linear-gradient(180deg, var(--accent-hover), var(--accent));
box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 38%, transparent);
}
.btn-primary:hover:not(:disabled) {
background: linear-gradient(180deg,
color-mix(in srgb, var(--accent-hover) 88%, #fff),
var(--accent-hover));
box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 50%, transparent);
transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) { transform: translateY(0) scale(.99); }
/* ---- frosted floating dock ---- */
.dock {
background: var(--glass);
-webkit-backdrop-filter: saturate(170%) blur(var(--glass-blur));
backdrop-filter: saturate(170%) blur(var(--glass-blur));
border: 1px solid color-mix(in srgb, var(--border-2) 70%, transparent);
border-radius: 18px;
box-shadow: var(--shadow-lg);
}
.dock-btn { border-radius: 12px; }
.dock-btn:hover:not(:disabled) { transform: translateY(-1px); }
.dock-avatar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
/* ---- frosted modals / popovers ---- */
.modal-card,
.menu-pop,
.log-pop {
background: var(--glass-2);
-webkit-backdrop-filter: saturate(160%) blur(var(--glass-blur));
backdrop-filter: saturate(160%) blur(var(--glass-blur));
box-shadow: var(--shadow-lg);
}
/* ---- richer status pill + room hero ---- */
.status-pill { backdrop-filter: blur(8px); }
/* graceful fallback: if backdrop-filter is unsupported, stay opaque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.hdr { background: var(--bg); }
.dock, .modal-card, .menu-pop, .log-pop { background: var(--surface); }
}
/* =========================================================
v6 โ INTERFACE POLISH PASS
Purely additive refinements layered on top of the existing
design system. Uses only theme tokens (--accent, --ring,
--shadow-*, --surfaceโฆ) so every data-theme keeps working.
Touches micro-interactions, focus, welcome, room + mobile โ
no layout logic is changed.
========================================================= */
/* ---- unified motion curve + tokens ---- */
:root {
--ease-out: cubic-bezier(.22, 1, .36, 1); /* snappy, decelerating */
--ring-soft: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
}
/* ---- crisper, consistent keyboard focus ---- */
button:focus-visible,
input:focus-visible,
a:focus-visible,
.theme-option:focus-visible,
.room-item:focus-visible,
.dock-btn:focus-visible,
.icon-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* pointer clicks shouldn't show the keyboard ring */
button:focus:not(:focus-visible),
.icon-btn:focus:not(:focus-visible),
.dock-btn:focus:not(:focus-visible) { outline: none; }
/* ---- primary button: subtle top-sheen + lift + focus ring ---- */
.btn-primary {
background:
linear-gradient(180deg,
color-mix(in srgb, #fff 12%, var(--accent)) 0%,
var(--accent) 55%,
color-mix(in srgb, #000 6%, var(--accent)) 100%);
box-shadow:
0 1px 0 rgba(255,255,255,.18) inset,
0 6px 18px -8px color-mix(in srgb, var(--accent) 60%, transparent);
transition: background .15s, box-shadow .18s var(--ease-out), transform .12s var(--ease-out);
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow:
0 1px 0 rgba(255,255,255,.24) inset,
0 10px 26px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn-primary:active:not(:disabled) { transform: translateY(0) scale(.985); }
.btn-primary:focus-visible { box-shadow: var(--ring-soft); outline-offset: 3px; }
/* ---- icon buttons: gentler hover feedback ---- */
.icon-btn { transition: color .15s, background .15s, transform .12s var(--ease-out); }
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0) scale(.94); }
/* ---- connection badge: softer pill ---- */
.badge { transition: color .2s, border-color .2s, background .2s; }
.badge.online { background: color-mix(in srgb, var(--good) 12%, transparent); }
/* =========================================================
WELCOME
========================================================= */
/* brand dot: soft living pulse (frozen under reduced-motion below) */
.wc-brand-dot { animation: wcDotPulse 2.6s var(--ease-out) infinite; }
@keyframes wcDotPulse {
0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft); }
50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 8%, transparent); }
}
/* room cards: richer hover, accent bloom + staggered entrance */
.rooms-grid .room-item {
transition:
transform .18s var(--ease-out),
background .18s, border-color .18s,
box-shadow .18s var(--ease-out);
animation: roomCardIn .32s var(--ease-out) both;
}
.rooms-grid .room-item:hover {
box-shadow:
0 1px 0 rgba(255,255,255,.12) inset,
0 12px 26px -12px color-mix(in srgb, var(--accent) 55%, transparent);
}
.rooms-grid .room-item:active { transform: translateY(-1px) scale(.99); }
/* live dot gets a soft breathing ring */
.rooms-grid .room-item::before { animation: liveDot 2.4s var(--ease-out) infinite; }
@keyframes liveDot {
0%, 100% { box-shadow: 0 0 6px var(--good); }
50% { box-shadow: 0 0 10px var(--good), 0 0 0 3px color-mix(in srgb, var(--good) 20%, transparent); }
}
@keyframes roomCardIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* light stagger for the first several cards */
.rooms-grid .room-item:nth-child(1) { animation-delay: .02s; }
.rooms-grid .room-item:nth-child(2) { animation-delay: .06s; }
.rooms-grid .room-item:nth-child(3) { animation-delay: .10s; }
.rooms-grid .room-item:nth-child(4) { animation-delay: .14s; }
.rooms-grid .room-item:nth-child(5) { animation-delay: .18s; }
.rooms-grid .room-item:nth-child(6) { animation-delay: .22s; }
/* nick row: align hover affordance with the rest */
.cv-nick-edit { transition: color .15s, background .15s, transform .12s var(--ease-out); }
.cv-nick-edit:hover { transform: translateY(-1px); }
/* =========================================================
ROOM
========================================================= */
/* hero icon: inner specular + accent ring for depth */
.rh-icon {
background:
linear-gradient(180deg,
color-mix(in srgb, #fff 16%, var(--accent)),
var(--accent));
box-shadow:
0 1px 0 rgba(255,255,255,.25) inset,
0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}
/* invite button already .btn-primary โ inherits sheen above */
/* status pill: readable hover + smoother dot */
.status-pill { transition: border-color .2s, background .2s; }
.status-pill .sp-dot { transition: background .25s, box-shadow .25s; }
/* dock buttons: clearer active state with accent glow */
.dock-btn { transition: background .15s, color .15s, border-color .15s, transform .12s var(--ease-out), box-shadow .18s; }
.dock-btn.active {
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
0 4px 14px -6px color-mix(in srgb, var(--accent) 65%, transparent);
}
.dock-btn.dock-leave:hover:not(:disabled) {
box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--danger) 55%, transparent);
}
/* thin, themed scrollbars for the scrolling panels */
.users-list, .chat-messages, .rooms-grid, .settings-body {
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--accent) 40%, transparent) transparent;
}
.users-list::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
.rooms-grid::-webkit-scrollbar,
.settings-body::-webkit-scrollbar { width: 8px; }
.users-list::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb,
.rooms-grid::-webkit-scrollbar-thumb,
.settings-body::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--accent) 32%, transparent);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
.users-list::-webkit-scrollbar-thumb:hover,
.chat-messages::-webkit-scrollbar-thumb:hover,
.rooms-grid::-webkit-scrollbar-thumb:hover,
.settings-body::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, var(--accent) 55%, transparent);
background-clip: padding-box;
}
/* =========================================================
MOBILE (โค640) โ bigger touch targets, tidier tabs
========================================================= */
@media (max-width: 640px) {
/* comfortable minimum tap target for dock controls */
.dock-btn { min-width: 40px; min-height: 40px; }
/* active tab: accent underline instead of only a fill */
.room-tab {
transition: color .15s, background .15s, border-color .15s;
overflow: hidden;
}
.room-tab.active::before {
content: "";
position: absolute;
left: 14px; right: 14px; bottom: 4px;
height: 2px; border-radius: 2px;
background: var(--accent);
}
.room-tab:active { transform: scale(.98); }
/* tap feedback on room cards */
.rooms-grid .room-item:active { transform: scale(.98); }
}
/* =========================================================
MOTION SAFETY โ freeze the added ambient animations
========================================================= */
@media (prefers-reduced-motion: reduce) {
.wc-brand-dot,
.rooms-grid .room-item,
.rooms-grid .room-item::before { animation: none !important; }
}
/* =========================================================
v8 โ PREMIUM / ELEGANT (authoritative identity layer)
Linear / Vercel / Apple-inspired: deep near-black, refined
muted-indigo accent, Geist type, hairline borders, soft
diffuse depth, generous radii, lots of air. Flat surfaces โ
no glassmorphism, no aurora. Comes LAST so it is the final look.
========================================================= */
/* ---- backdrop: clean, single faint top glow ---- */
.app-bg { display: none !important; }
body::before {
inset: 0 !important;
background:
radial-gradient(80% 55% at 50% -8%,
color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%) !important;
background-size: auto !important;
background-position: 0 0 !important;
filter: none !important;
opacity: 1 !important;
animation: none !important;
mix-blend-mode: normal !important;
}
/* ---- remove all frosted glass -> flat elevated surfaces ---- */
.glass, .welcome-card, .welcome-card.glass,
.dock, .modal-card, .menu-pop, .log-pop, .emoji-pop,
.col-users, .col-chat, .user-card, .hdr {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* ---- type: Geist; tight elegant headings, quiet labels ---- */
.logo-name, .wc-brand-name {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -.01em;
text-transform: none !important;
background: none !important;
-webkit-text-fill-color: currentColor !important;
color: var(--text) !important;
}
h1, h2, h3, .wc-title, .rh-name, .modal-card h2 {
font-family: var(--font-display) !important;
font-weight: 600;
letter-spacing: -.03em;
background: none !important;
-webkit-text-fill-color: currentColor !important;
color: var(--text) !important;
}
.wc-title { letter-spacing: -.04em; }
/* quiet, refined meta-labels (undo any uppercase/mono) */
.composer-label, .wc-rooms-title, .col-title, .col-sub,
.badge, .ping-value, .status-pill, .dock-presence, .dock-name,
.wc-features, .wc-divider, .rh-stat {
font-family: var(--font-body) !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
.composer-label, .wc-rooms-title { color: var(--muted); font-weight: 500; font-size: 12px; }
/* brand dot: small, soft, glowing */
.logo-dot, .wc-brand-dot {
border-radius: 50% !important;
width: 8px; height: 8px;
background: var(--accent) !important;
box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent) !important;
animation: none !important;
}
/* ---- welcome card: flat elevated slab, hairline, soft shadow ---- */
.welcome-card {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 18px !important;
box-shadow:
0 1px 0 rgba(255,255,255,.04) inset,
0 28px 64px -28px rgba(0,0,0,.75) !important;
}
.welcome-card::before { display: none !important; }
.wc-divider { color: var(--muted); font-size: 12px; }
/* ---- buttons: refined, soft, subtle press ---- */
.btn {
border-radius: 10px !important;
border: 1px solid var(--border-2) !important;
background: var(--surface-2) !important;
color: var(--text) !important;
font-family: var(--font-body);
font-weight: 500;
letter-spacing: 0;
box-shadow: none !important;
transition: background .15s, border-color .15s, transform .08s, box-shadow .15s;
}
.btn:hover:not(:disabled) {
background: var(--elevated) !important;
border-color: color-mix(in srgb, #fff 20%, transparent) !important;
}
.btn:active:not(:disabled) { transform: translateY(.5px); }
.btn-primary,
.welcome-card .btn-primary,
.col .btn-primary {
background: var(--accent) !important;
color: #fff !important;
border: 1px solid color-mix(in srgb, #fff 22%, var(--accent)) !important;
font-weight: 600;
box-shadow: 0 1px 2px rgba(0,0,0,.35),
0 4px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent) !important;
}
.btn-primary:hover:not(:disabled),
.welcome-card .btn-primary:hover:not(:disabled),
.col .btn-primary:hover:not(:disabled) {
background: var(--accent-hover) !important;
transform: translateY(-1px);
box-shadow: 0 1px 2px rgba(0,0,0,.35),
0 6px 22px -6px color-mix(in srgb, var(--accent) 80%, transparent) !important;
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }
.icon-btn {
border-radius: 9px !important;
border: 1px solid transparent !important;
transition: background .15s, border-color .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-2) !important; border-color: var(--border) !important; }
/* ---- inputs: flat, hairline, soft focus ring ---- */
.welcome-card input[type="text"], .welcome-card input[type="password"],
.cv-field input, .mini-input, #chatInput, .modal-card input {
border-radius: 10px !important;
border: 1px solid var(--border) !important;
background: var(--surface-2) !important;
box-shadow: none !important;
transition: border-color .15s, box-shadow .15s;
}
.welcome-card input[type="text"]:focus, .welcome-card input[type="password"]:focus,
.cv-field input:focus, .mini-input:focus, #chatInput:focus, .modal-card input:focus {
border-color: color-mix(in srgb, var(--accent) 65%, transparent) !important;
box-shadow: 0 0 0 3px var(--accent-soft) !important;
outline: none !important;
}
/* ---- room cards: flat hairline, soft hover lift ---- */
.rooms-grid .room-item {
border-radius: 12px !important;
border: 1px solid var(--border) !important;
background: var(--surface-2) !important;
box-shadow: none !important;
animation: none !important;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s, background .15s !important;
}
.rooms-grid .room-item:hover {
border-color: var(--border-2) !important;
background: var(--elevated) !important;
transform: translateY(-2px) !important;
box-shadow: 0 16px 32px -16px rgba(0,0,0,.7) !important;
}
.rooms-grid .room-item:active { transform: translateY(0) !important; }
.rooms-grid .room-item::before { box-shadow: none !important; animation: none !important; }
/* ---- room hero: flat panel, gradient accent icon ---- */
.room-hero {
border: 1px solid var(--border) !important;
border-radius: 16px !important;
background: var(--surface) !important;
box-shadow: var(--shadow-md) !important;
}
.rh-icon {
border-radius: 12px !important;
background: linear-gradient(160deg, var(--accent-hover), var(--accent)) !important;
color: #fff !important;
border: 1px solid color-mix(in srgb, #fff 18%, var(--accent)) !important;
box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 65%, transparent) !important;
font-family: var(--font-display);
font-weight: 600;
}
.rh-name { font-weight: 600; letter-spacing: -.02em; }
/* ---- dock: flat elevated bar, rounded, soft shadow ---- */
.dock {
border-radius: 16px !important;
border: 1px solid var(--border-2) !important;
background: var(--surface) !important;
box-shadow: var(--shadow-lg) !important;
}
.dock-avatar { border-radius: 10px !important; }
.dock-name { font-family: var(--font-display); font-weight: 600; }
.dock-btn {
border-radius: 10px !important;
border: 1px solid var(--border) !important;
background: var(--surface-2) !important;
box-shadow: none !important;
transition: background .15s, border-color .15s, color .15s, transform .08s !important;
}
.dock-btn:hover:not(:disabled) { background: var(--elevated) !important; border-color: var(--border-2) !important; }
.dock-btn.active {
background: var(--accent) !important;
color: #fff !important;
border-color: color-mix(in srgb, #fff 22%, var(--accent)) !important;
box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--accent) 70%, transparent) !important;
}
.dock-btn.dock-leave:hover:not(:disabled) {
background: var(--danger) !important;
color: #fff !important;
border-color: color-mix(in srgb, #fff 22%, var(--danger)) !important;
}
/* ---- in-room columns + user cards: flat, hairline ---- */
.col-users, .col-chat {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 14px !important;
box-shadow: var(--shadow-md) !important;
}
.user-card {
background: var(--surface-2) !important;
border: 1px solid var(--border) !important;
border-radius: 10px !important;
box-shadow: none !important;
transition: border-color .15s, background .15s;
}
.user-card:hover { border-color: var(--border-2) !important; background: var(--elevated) !important; }
/* ---- header: solid, hairline rule ---- */
.hdr {
background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
border-bottom: 1px solid var(--border) !important;
}
/* ---- modals: flat, big soft shadow, rounded ---- */
.modal-card {
border-radius: 18px !important;
border: 1px solid var(--border-2) !important;
background: var(--surface) !important;
box-shadow: var(--shadow-lg) !important;
}
/* ---- badges + status: soft pills ---- */
.badge {
border-radius: 999px !important;
border: 1px solid var(--border-2);
background: var(--surface-2);
font-size: 12px; font-weight: 500;
}
.badge.online {
border-color: color-mix(in srgb, var(--good) 45%, transparent);
color: var(--good);
background: color-mix(in srgb, var(--good) 12%, transparent);
}
.status-pill { border-radius: 999px !important; border: 1px solid var(--border) !important; font-size: 12px; }
/* ---- toasts: flat, soft ---- */
.toast {
border-radius: 12px !important;
border: 1px solid var(--border-2) !important;
box-shadow: var(--shadow-lg) !important;
font-family: var(--font-body);
letter-spacing: 0;
}
/* ---- light themes: hairlines + elevated read on paper ---- */
body:is([data-theme="white"],[data-theme="nord"]) {
--border: rgba(0,0,0,.10);
--border-2: rgba(0,0,0,.16);
--elevated: #f2f3f5;
}
body:is([data-theme="white"],[data-theme="nord"])::before {
background: radial-gradient(80% 55% at 50% -8%,
color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%) !important;
}
/* =========================================================
v8b โ center stage polish (premium)
The video stage was transparent -> a black void when empty.
Give it the same flat elevated panel as the side columns and
a refined empty-state so an idle room still reads as designed.
========================================================= */
.col-stage {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 14px !important;
box-shadow: var(--shadow-md) !important;
padding: 16px !important;
}
/* elegant empty stage: soft ring icon + title + hint */
.stage-empty {
gap: 14px !important;
padding: 56px 24px !important;
color: var(--muted) !important;
}
.stage-empty .se-title {
font-family: var(--font-display);
font-size: 15px; font-weight: 600;
color: var(--soft);
}
.stage-empty .se-icon {
display: grid; place-items: center;
width: 64px; height: 64px;
margin-bottom: 2px;
border-radius: 50%;
font-size: 28px; opacity: 1 !important;
color: var(--soft);
background: var(--surface-2);
border: 1px solid var(--border-2);
box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 7%, transparent);
}
/* stage tiles: match card radius + soft depth */
.stage-tile {
border-radius: 14px !important;
background: var(--surface-2) !important;
box-shadow: var(--shadow-sm) !important;
}
.stage-tile:hover {
border-color: var(--border-2) !important;
background: var(--elevated) !important;
box-shadow: var(--shadow-md) !important;
}
.stage-avatar {
background: linear-gradient(160deg, var(--accent-hover), var(--accent)) !important;
box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 60%, transparent) !important;
}
.stage-host {
border-radius: 999px !important;
text-transform: none !important;
font-weight: 600 !important;
font-size: 11px !important;
}
/* Input error & shake animation */
.input-error {
border-color: var(--danger, #e5484d) !important;
box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.25) !important;
animation: inputShake 0.35s ease-in-out;
}
@keyframes inputShake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-6px); }
40%, 80% { transform: translateX(6px); }
}
.modal-error-banner {
background: rgba(229, 72, 77, 0.15);
border: 1px solid rgba(229, 72, 77, 0.4);
color: #ff6b6b;
padding: 8px 12px;
border-radius: var(--radius-sm, 8px);
font-size: 13px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 6px;
}
/* Side-by-side 2-column welcome hub layout */
.welcome-card {
max-width: 860px !important;
padding: 28px 28px 24px !important;
}
.welcome-body-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 28px;
align-items: stretch;
width: 100%;
}
.wc-col-left {
display: flex;
flex-direction: column;
gap: 14px;
}
.wc-col-right {
display: flex;
flex-direction: column;
border-left: 1px solid color-mix(in srgb, var(--border) 60%, rgba(255, 255, 255, 0.08));
padding-left: 28px;
}
.wc-col-right .wc-rooms {
height: 100%;
display: flex;
flex-direction: column;
}
.wc-col-right .wc-rooms .rooms-grid {
max-height: 260px !important;
grid-template-columns: 1fr !important;
grid-auto-rows: max-content !important;
align-content: start !important;
gap: 8px !important;
}
@media (max-width: 768px) {
.welcome-card {
max-width: 480px !important;
padding: 20px 18px !important;
}
.welcome-body-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.wc-col-right {
border-left: none;
border-top: 1px solid color-mix(in srgb, var(--border) 60%, rgba(255, 255, 255, 0.08));
padding-left: 0;
padding-top: 18px;
}
.wc-col-right .wc-rooms .rooms-grid {
max-height: 220px !important;
grid-template-columns: 1fr 1fr !important;
}
}
/* Dynamic screen-adaptive chat sizing & precise view height fit */
.room-view {
height: calc(100vh - var(--hdr-h, 56px) - 108px) !important;
max-height: calc(100vh - var(--hdr-h, 56px) - 108px) !important;
min-height: 420px !important;
overflow: hidden !important;
box-sizing: border-box !important;
padding-bottom: 0 !important;
}
.col-chat {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
max-height: 100% !important;
min-height: 0 !important;
flex: 1 1 auto !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.col-chat .chat-messages {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: none !important;
overflow-y: auto !important;
}
.col-chat .chat-onboard {
margin: auto !important;
}
.col-chat .chat-input-row {
flex: 0 0 auto !important;
margin-top: auto !important;
position: relative !important;
bottom: 0 !important;
z-index: 2 !important;
}
@media (max-width: 860px) {
.room-view {
height: calc(100dvh - var(--hdr-h, 56px) - 120px) !important;
max-height: calc(100dvh - var(--hdr-h, 56px) - 120px) !important;
}
}
/* Ultra-compact & micro-neat room creation form */
.cv-field {
padding: 5px 10px !important;
border-radius: 10px !important;
gap: 1px !important;
background: color-mix(in srgb, var(--surface-2) 65%, rgba(255, 255, 255, 0.03)) !important;
border: 1px solid color-mix(in srgb, var(--border) 60%, rgba(255, 255, 255, 0.1)) !important;
box-shadow: none !important;
}
.cv-field:focus-within {
border-color: var(--accent) !important;
background: color-mix(in srgb, var(--surface-2) 85%, var(--accent)) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent) !important;
}
.cv-field-header {
margin-bottom: 0 !important;
}
.cv-field .composer-label {
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: var(--muted) !important;
opacity: 0.8;
}
.wc-random-btn {
font-size: 10px !important;
padding: 1px 6px !important;
border-radius: 4px !important;
}
.cv-input-wrapper {
position: relative !important;
display: flex !important;
align-items: center !important;
width: 100% !important;
}
.cv-input-icon {
left: 1px !important;
font-size: 12px !important;
color: var(--accent) !important;
}
.cv-input-wrapper input,
.cv-field input[type="text"],
.cv-field input[type="password"] {
height: 26px !important;
min-height: 26px !important;
font-size: 12.5px !important;
padding: 0 24px 0 20px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
color: var(--text) !important;
}
.cv-eye-btn {
right: 0px !important;
font-size: 12px !important;
padding: 1px 3px !important;
}
.cv-nick-row {
padding: 6px 10px !important;
border-radius: 10px !important;
}
.cv-nick-avatar {
width: 26px !important;
height: 26px !important;
font-size: 12px !important;
}
.cv-nick-value {
font-size: 12.5px !important;
}
.wc-join-btn {
height: 36px !important;
border-radius: 10px !important;
font-size: 13px !important;
font-weight: 600 !important;
margin-top: 2px !important;
}
/* =========================================================
ShadeAdmin Super-Privileges & Admin Panel Styling
========================================================= */
.acc-admin-crown {
color: #ffcc00;
font-size: 1.1em;
filter: drop-shadow(0 0 6px rgba(255, 204, 0, 0.6));
animation: pulseCrown 2s infinite ease-in-out;
}
@keyframes pulseCrown {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(255, 204, 0, 0.6)); }
50% { transform: scale(1.15); filter: drop-shadow(0 0 10px rgba(255, 204, 0, 0.9)); }
}
.admin-panel-ov .admin-modal-content {
max-width: 680px;
width: 92vw;
background: rgba(18, 20, 29, 0.96) !important;
border: 1px solid rgba(255, 51, 102, 0.4) !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 51, 102, 0.15) !important;
border-radius: 16px !important;
}
.admin-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.admin-panel-title {
font-size: 1.15rem;
font-weight: 700;
background: linear-gradient(135deg, #ff3366, #ffcc00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.admin-close-x {
background: transparent;
border: none;
color: #888;
font-size: 1.4rem;
cursor: pointer;
transition: color 0.2s;
}
.admin-close-x:hover { color: #fff; }
.admin-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 14px 0;
}
.admin-stat-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
padding: 10px;
text-align: center;
}
.admin-stat-card .stat-value {
font-size: 1.3rem;
font-weight: 800;
color: #fff;
}
.admin-stat-card .stat-value.text-gold {
color: #ffcc00;
}
.admin-stat-card .stat-label {
font-size: 0.72rem;
color: #8a92a6;
margin-top: 2px;
}
.admin-section {
margin-top: 14px;
}
.admin-section-title {
font-size: 0.85rem;
font-weight: 600;
color: #ccc;
margin-bottom: 8px;
}
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.adm-mini-btn {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #ddd;
border-radius: 6px;
padding: 3px 8px;
font-size: 0.75rem;
cursor: pointer;
}
.adm-mini-btn:hover { background: rgba(255, 255, 255, 0.15); }
.admin-input-flex {
display: flex;
gap: 8px;
}
.admin-input-flex .acc-input {
flex: 1;
}
.adm-rooms-container {
max-height: 280px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
}
.adm-room-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
padding: 10px;
}
.adm-room-hdr {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.adm-room-name {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.88rem;
}
.adm-room-badge {
background: rgba(255, 255, 255, 0.1);
font-size: 0.72rem;
padding: 2px 6px;
border-radius: 10px;
color: #bbb;
}
.adm-tag {
font-size: 0.7rem;
padding: 1px 5px;
border-radius: 4px;
}
.adm-tag.lock { background: rgba(255, 51, 102, 0.2); color: #ff6688; }
.adm-room-actions {
display: flex;
gap: 6px;
}
.adm-btn-act {
background: rgba(255, 255, 255, 0.08);
border: none;
color: #fff;
font-size: 0.75rem;
padding: 4px 8px;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s;
}
.adm-btn-act.adm-join { background: rgba(51, 153, 255, 0.25); color: #77b5ff; }
.adm-btn-act.adm-join:hover { background: rgba(51, 153, 255, 0.4); }
.adm-btn-act.adm-clear { background: rgba(255, 204, 0, 0.2); color: #ffd633; }
.adm-btn-act.adm-clear:hover { background: rgba(255, 204, 0, 0.35); }
.adm-btn-act.adm-close { background: rgba(255, 51, 51, 0.25); color: #ff7777; }
.adm-btn-act.adm-close:hover { background: rgba(255, 51, 51, 0.4); }
.adm-room-members {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.adm-member-chip {
display: flex;
align-items: center;
gap: 4px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
padding: 2px 8px;
font-size: 0.76rem;
color: #ddd;
}
.adm-mem-btn {
background: transparent;
border: none;
cursor: pointer;
font-size: 0.75rem;
opacity: 0.7;
transition: opacity 0.15s;
padding: 0 2px;
}
.adm-mem-btn:hover { opacity: 1; transform: scale(1.2); }
/* Global Admin Announcement Banner */
.global-admin-banner {
position: fixed;
top: -100px;
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 520px;
background: linear-gradient(135deg, rgba(30, 20, 45, 0.96), rgba(60, 20, 35, 0.96));
border: 1px solid rgba(255, 51, 102, 0.6);
box-shadow: 0 10px 40px rgba(255, 51, 102, 0.35), 0 0 15px rgba(255, 204, 0, 0.2);
border-radius: 14px;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 12px;
z-index: 999999;
transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
backdrop-filter: blur(12px);
}
.global-admin-banner.visible {
top: 20px;
}
.gab-icon {
font-size: 1.8rem;
animation: pulseCrown 1.5s infinite ease-in-out;
}
.gab-content {
flex: 1;
}
.gab-title {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #ffcc00;
}
.gab-msg {
font-size: 0.88rem;
color: #fff;
margin-top: 2px;
line-height: 1.35;
}
.gab-close-btn {
background: transparent;
border: none;
color: #aaa;
font-size: 1.3rem;
cursor: pointer;
}
.gab-close-btn:hover { color: #fff; }
/* Camera tile mirror option (mirrored by default for all participant cameras) */
.screen-tile.camera-tile video {
transform: scaleX(-1);
}
.screen-tile.cam-mirrored video {
transform: scaleX(-1) !important;
}
.screen-tile.camera-tile.cam-unmirrored video,
.screen-tile.camera-tile.cam-back video {
transform: none !important;
}