:root {
      --blue: #0077cc;
      --mint: #83c5be;
      --teal-dark: #004d4d;
      --dark: #333;
      --light: #f9f9ff;
      --border-radius: 12px;
      --chat-bg: #e6f2f2;
      --input-bg: #fff;
    }

    * {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f0f0f0;
    }

    body {
      display: flex;
      flex-direction: column;
    }

    .chat-container {
      display: flex;
      flex-direction: row;
      height: 100dvh;
      overflow: hidden;
    }

    .sidebar {
      width: 280px;
      background-color: var(--teal-dark);
      color: white;
      display: flex;
      flex-direction: column;
      padding: 1rem;
      flex-shrink: 0;
    }

    .sidebar h2 {
      margin: 0 0 1rem 0;
      font-weight: 700;
      font-size: 1.4rem;
      border-bottom: 1px solid rgba(255,255,255,0.3);
      padding-bottom: 0.5rem;
    }

    .contacts {
      flex: 1;
      overflow-y: auto;
    }

    .contact {
      background: var(--mint);
      color: var(--teal-dark);
      padding: 0.6rem 0.8rem;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      border: 2px solid transparent;
      transition: background 0.3s;
    }

    .chat-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: var(--chat-bg);
      height: 100%;
      position: relative;
    }

    .chat-header {
      font-weight: 700;
      font-size: 1.3rem;
      color: var(--teal-dark);
      padding: 1rem;
      border-bottom: 1px solid #ccc;
      flex-shrink: 0;
    }

    .messages {
      flex: 1;
      overflow-y: auto;
      padding: 1rem;
    }

    .input-area {
      display: flex;
      gap: 0.5rem;
      background: var(--input-bg);
      border-top: 1px solid #ccc;
      padding: 0.75rem;
      flex-shrink: 0;
    }

    .input-area textarea {
      flex: 1;
      padding: 0.6rem 1rem;
      border-radius: var(--border-radius);
      border: 1px solid #ccc;
      resize: none;
      font-size: 1rem;
      height: 45px;
      font-family: inherit;
    }

    .input-area textarea:focus {
      outline: none;
      border-color: var(--blue);
      box-shadow: 0 0 5px var(--blue);
    }

    .input-area button {
      background-color: var(--blue);
      border: none;
      color: white;
      padding: 0 1.2rem;
      border-radius: var(--border-radius);
      font-weight: 700;
      cursor: pointer;
      transition: background-color 0.3s;
      font-size: 1.1rem;
    }

    .input-area button:hover {
      background-color: #005fa3;
    }

    .messages::-webkit-scrollbar,
    .contacts::-webkit-scrollbar {
      width: 8px;
    }

    .messages::-webkit-scrollbar-thumb,
    .contacts::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.15);
      border-radius: 4px;
    }

    @media (max-width: 768px) {
      .chat-container {
        flex-direction: column;
      }

      .sidebar {
        width: 100%;
        padding: 1rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 10;
      }

      .contacts {
        display: none;
      }

      .chat-area {
        height: calc(100dvh - 80px);
      }

      .input-area {
        position: sticky;
        bottom: 0;
        z-index: 10;
      }
    }

    .message {
      display: flex;
      margin: 5px 0;
    }

    .message.you {
      justify-content: flex-end;
    }

    .message.stranger {
      justify-content: flex-start;
    }

    .bubble {
      max-width: 70%;
      padding: 10px;
      border-radius: 15px;
      font-size: 14px;
      line-height: 1.4;
      word-wrap: break-word;
    }

    .message.you .bubble {
      background-color: #0084ff;
      color: white;
      border-bottom-right-radius: 4px;
      text-align: right;
    }

    .message.stranger .bubble {
      background-color: #e4e6eb;
      color: black;
      border-bottom-left-radius: 4px;
      text-align: left;
    }

    .typing {
      font-style: italic;
      color: gray;
      margin-top: 5px;
    }

    .message.system {
      text-align: center;
      color: gray;
      font-style: italic;
      margin: 10px 0;
    }
    #chatBox {
  height: 400px;          /* your fixed height */
  overflow-y: auto;       /* allow scrolling */

  /* Hide scrollbar for WebKit browsers (Chrome, Safari) */
  scrollbar-width: none;  /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */

}

/* For Chrome, Safari, and Opera */
#chatBox::-webkit-scrollbar {
  display: none;
}