:root {
      --bg:       #0c0c10;
      --bg2:      #15151b;
      --bg3:      #1c1c24;
      --bg4:      #23232c;
      --rail-bg:  #101015;
      --border:   rgba(255,255,255,.07);
      --border-strong: rgba(255,255,255,.13);
      --text:     #eef0f5;
      --text2:    rgba(238,240,245,.74);
      --muted:    rgba(238,240,245,.42);
      --accent:   #2787F5;
      --accent-d: #1f6fd4;
      --accent-soft: #2787F526;
      --online:   #4bb34b;
      --bubble-in: #22222c;
      --input-bg: #1c1c24;
      --date-pill: rgba(0,0,0,.45);
      --green:    #34d05c;
      --red:      #f05252;
      --amber:    #e8960a;
      --shadow:   0 2px 12px rgba(0,0,0,.4);
      --shadow-lg: 0 16px 48px rgba(0,0,0,.65);
      --ease:     cubic-bezier(.16,1,.3,1);
      --bubble-r: 16px;
      --nav-pad:  10px 14px;
      --surface3: var(--bg4);
      --chat-base: #15171b;
      --chat-bg: radial-gradient(ellipse at 82% 8%, rgba(39,135,245,.09), transparent 48%), radial-gradient(ellipse at 12% 92%, rgba(106,78,196,.07), transparent 45%), linear-gradient(145deg, #17191e 0%, #131519 100%);
      --empty-chat-bg: #202124;
      --sidebar:  248px;
      --list:     368px;
      --profile:  320px;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    [hidden] { display: none !important; }
    html, body { height: 100%; overflow: hidden; }
    .app {
      display: grid;
      grid-template-columns: var(--sidebar) var(--list) 1fr;
      height: 100vh;
      overflow: hidden;
    }
    .app.profile-open { grid-template-columns: var(--sidebar) var(--list) 1fr var(--profile); }
    .app:not(.profile-open) .profile-pane { display: none; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Arial, system-ui, sans-serif;
      background: var(--bg); color: var(--text);
      font-size: 14px; line-height: 1.45;
      -webkit-font-smoothing: antialiased;
      font-feature-settings: 'cv02','cv03','cv04';
      letter-spacing: -.01em;
    }
    button { cursor: pointer; font: inherit; }
    input, textarea { font: inherit; }
    img { display: block; }

    /* ─── Scrollbars ─── */
    ::-webkit-scrollbar { width: 3px; height: 3px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); }