html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Private Chat Page */

.chat-box {
        height: 300px;
        overflow-y: auto;
        border: 1px solid #ccc;
        padding: 10px;
        background-color: #f8f9fa;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .message {
        padding: 10px 15px;
        border-radius: 20px;
        max-width: 70%;
        word-wrap: break-word;
    }

    .received {
        background-color: #e2e3e5;
        align-self: flex-start;
    }

    .sent {
        background-color: #007bff;
        color: white;
        align-self: flex-end;
    }

/*video screen*/

.video-container {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.video-player {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  max-width: 100%;
  background-color: black;
  width: 100%;
  height: auto;
  display: block;
}

/* Picture-in-Picture layout when both videos are active */
.video-container.pip-mode {
  position: relative;
}

.video-container.pip-mode #remote-video {
  width: 100%;
  height: auto;
  display: block;
}

.video-container.pip-mode #video-feed {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 200px;
  height: auto;
  max-width: 30%;
  z-index: 10;
  border: 3px solid white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* When only local video is active */
.video-container:not(.pip-mode) #video-feed {
  width: 100%;
  height: auto;
  display: block;
}

/* ringing bell */

#bellIcon {
  display: inline-block; /* Allows transform and animation */
  transform-origin: top center;
  color: #ffc107;
}


.bell-wrapper {
  display: inline-block; /* Allows transform and animation */
}


@keyframes ring {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(15deg); }
  50%  { transform: rotate(-15deg); }
  75%  { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}

#bellIcon.ringing {
  animation: ring 0.5s infinite;
  color: #ffc107;
  font-size: 2rem;
}

/* Make toast less transparent */
.toast {
    --bs-toast-bg: rgba(var(--bs-body-bg-rgb), 0.95);
}

.toast-header {
    --bs-toast-header-bg: rgba(var(--bs-body-bg-rgb), 0.95);
}