@media (max-width: 1000px) {
  .modal-content {
    width: 50%;
  }
}

@media (max-width: 1366px) {
  /* main container */
  #main {
    grid-template-columns: 35% auto;
  }

  /* message area */
  .message-status {
    font-size: 10px;
  }
  .message {
    font-size: 14px;
  }

  /* input area */
  #input-area {
    box-sizing: border-box;
    overflow: hidden;
  }
  #skip-btn,
  #send-btn {
    height: 42px;
    font-size: 14px;
    padding: 0 14px;
  }
  #message-input {
    height: 42px;
    font-size: 14px;
  }
}

@media (max-width: 800px) {
  /* main container */
  #main {
    grid-template-columns: auto;
    grid-template-rows: 8% 40% auto 7%;
    grid-template-areas:
      'top'
      'vid'
      'msg'
      'inp';
  }

  /* top bar */
  #top-bar {
    padding: 8px 16px;
  }
  #logo img {
    height: 24px;
    width: 24px;
  }
  #logo h1 {
    font-size: 1.15rem;
  }
  #peopleOnline p {
    font-size: 12px;
  }

  /* video container */
  #videos {
    margin: 10px;
  }
  #self {
    width: 30%;
  }

  /* message area */
  #message-area {
    margin: 10px;
    margin-bottom: 6px;
    padding: 14px;
  }

  /* input area */
  #input-area {
    box-sizing: border-box;
    overflow: hidden;
  }

  .modal-content {
    width: 78%;
    padding: 22px;
  }
}

@media (max-width: 550px) {
  /* video container */
  #videos {
    margin: 8px;
    border-radius: var(--radius-md);
  }
  #self {
    width: 34%;
    right: 10px;
    bottom: 10px;
  }
  #peer::before,
  #self::before {
    font-size: 9px;
    padding: 4px 8px;
  }
  #peer::after {
    background-size:
      16px 2px, 2px 16px,
      16px 2px, 2px 16px,
      16px 2px, 2px 16px,
      16px 2px, 2px 16px;
    background-position:
      top 10px left 10px, top 10px left 10px,
      top 10px right 10px, top 10px right 10px,
      bottom 10px left 10px, bottom 10px left 10px,
      bottom 10px right 10px, bottom 10px right 10px;
  }
  #peer-video-loader {
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
  }

  /* input area — collapse to icon-only actions to keep everything reachable */
  #input-area {
    padding: 0 10px 10px;
    gap: 6px;
  }
  .btn-label,
  .btn-key {
    display: none;
  }
  #skip-btn,
  #send-btn,
  #feedback-btn {
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .modal-content {
    width: 84%;
  }
}

@media (max-width: 416px) {
  #peopleOnline {
    margin-right: 8px;
    padding: 6px 10px;
  }
  #peopleOnline p {
    font-size: 11px;
  }
}