@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/inter-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-600.woff2') format('woff2');
}
:root {
  --bg-surface-0: #121212;
  --bg-surface-1: #1a1a1a;
  --bg-surface-2: #222222;
  --bg-surface-3: #2a2a2a;
  --tc-surface-normal: #d1d1d1;
  --tc-surface-low: #888888;
  --border-subtle: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.12);
  --btn-bg-hover: rgba(255,255,255,0.19);
  --surface-glass: rgba(26,26,26,0.80);
  --surface-input: rgba(18,18,18,0.70);
  --radius: 12px;
  --font-primary: 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(0.4,0,0.2,1);
  --dur: 0.3s;
  --primary-color: #555555;
  --on-primary-color: #d1d1d1;
  --primary-container-color: rgba(255,255,255,0.09);
  --on-primary-container-color: #d1d1d1;
}
* { font-family: var(--font-primary) !important; -webkit-font-smoothing: antialiased; }
body, #root { background: var(--bg-surface-0) !important; color: var(--tc-surface-normal) !important; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333333; border-radius: 50px; }
::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }
[class*="Sidebar"], [class*="sidebar"] { background: var(--surface-glass) !important; backdrop-filter: blur(12px) !important; border-right: 1px solid var(--border-subtle) !important; }
[class*="RoomHeader"], header { background: var(--surface-glass) !important; backdrop-filter: blur(12px) !important; border-bottom: 1px solid var(--border-subtle) !important; }
[class*="RoomInput"], [class*="MessageInput"] { background: var(--surface-glass) !important; backdrop-filter: blur(12px) !important; border-top: 1px solid var(--border-subtle) !important; }
[contenteditable] { background: var(--surface-input) !important; border: 1px solid var(--border-subtle) !important; border-radius: var(--radius) !important; color: var(--tc-surface-normal) !important; }
[contenteditable]:focus { border-color: var(--border-strong) !important; outline: none !important; }
button:hover { background: var(--btn-bg-hover) !important; }