:root {
      --primary: #0078ff;
      --accent: #00bfa5;
      --bg: #f0f4f8;
      --card-bg: #fff;
      --text: #222;
      --radius: 12px;
      --shadow: 0 3px 12px rgba(0,0,0,0.1);
    }

    body {
      font-family: "Segoe UI", Roboto, Arial, sans-serif;
      background: var(--bg);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      padding: 20px;
      color: var(--text);
    }

    .chat-wrapper {
      width: 100%;
      max-width: 450px;
      background: var(--card-bg);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    h2 {
      margin: 0;
      text-align: center;
      color: var(--primary);
    }

    #chat {
      flex: 1;
      border-radius: var(--radius);
      border: 1px solid #ddd;
      background: #f9f9f9;
      padding: 10px;
      height: 300px;
      overflow-y: auto;
      font-size: 14px;
    }

    .msg {
      margin: 5px 0;
      padding: 8px 12px;
      border-radius: var(--radius);
      max-width: 75%;
      word-wrap: break-word;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .msg.self {
      background: var(--primary);
      color: white;
      margin-left: auto;
    }

    .msg.other {
      background: #e1e9f0;
    }

    input[type="text"], input[type="file"] {
      width: 100%;
      border: 1px solid #ccc;
      border-radius: var(--radius);
      padding: 10px;
      font-size: 14px;
      box-sizing: border-box;
    }

    .buttons, .join-area {
      display: flex;
      gap: 10px;
    }

    button {
      background: var(--primary);
      color: white;
      border: none;
      border-radius: var(--radius);
      padding: 10px 15px;
      cursor: pointer;
      transition: background 0.2s ease;
      font-size: 14px;
    }

    button:hover {
      background: var(--accent);
    }

    @media (max-width: 480px) {
      .chat-wrapper {
        padding: 15px;
      }
      #chat {
        height: 250px;
      }
    }