/* (A) WHOLE PAGE */
* {
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
  }
  body {background: #f3f3f3; }
  body, input, #chat-name, #chat-send, .chat-row { padding: 10px; }
  
  /* (B) WRAPPER */
  #chat-wrap {
    max-width: 600px;
    border: 1px solid #cbcbcb;
  }
  
  /* (C) CHAT MESSAGES */
  #chat-messages {
    padding: 15px;
    height: 800px;
    overflow: auto;
    background: #fff;
  }
  .chat-row {
    display: flex;
    align-items: top;
  }
  .chat-name {
    padding: 5px;
    margin-right: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #c31e1e;
    /*background: #fff3f3;*/
  }
  .chat-msg { font-size: 18px; }
  
  /* (D) CHAT NAME + MESSAGE */
  .hide { display: none !important; }
  #chat-name, #chat-send {
    display: flex;
    background: #e2e2e2;
  }
  input { border: 0; }
  input[type=text] { flex-grow: 1; }
  input[type=submit] {
    width: 80px;
    color: #fff;
    background: #06b20f;
    cursor: pointer;
  }
  input[type=submit]:disabled { background: #b9b9b9; }


  
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  grid-template-rows: auto auto; /* 2 rows */
  gap: 10px; /* Space between grid items */
  grid-template-areas: 
    "item1 item2"
    "item3 item3" /* item3 spans both columns */
    "item4 item4"; /* Adjust if you want item4 to behave differently */
}

.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { 
  grid-area: item3;
 display:block;
}
.item4 { grid-area: item4; }

/* Responsive design for smaller screens */
@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr; /* 1 column */
    grid-template-areas: 
      "item1"
      "item2"
      "item3"
      "item4";
  }
}