.container-sm {
  padding-top: 0.5rem;
  padding-bottom: calc(var(--messagerie-height) + 1rem);;
}

.company-id, .driver-id {
  gap: 1rem;
}

@media screen and (max-width: 365px) {
  .company-id, .driver-id {
    gap: 0.5rem;
  }
}

.company-id .company-logo, .driver-id .driver-picture {
  width: 82px;
  height: 56px;
  padding: 0.2rem;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
}

.company-id .company-logo img, .driver-id .driver-picture img {
  max-width: 100%;
  max-height: 100%;
  flex-shrink: 0;
}

.company-id .company-logo img, .driver-id .driver-picture svg {
  max-width: 100%;
  max-height: 100%;
  flex-shrink: 0;
}

@media screen and (max-width: 365px) {
  .company-id .company-logo, .driver-id .driver-picture {
    width: 60px;
    height: 35px;
  }
}

@media screen and (max-width: 365px) {
  .company-id, .driver-id {
    font-size: 13px;
    line-height: 14px;
  }
}

@media screen and (max-height: 715px) {
  .company-id, .driver-id {
    font-size: 14px;
    line-height: 14px;
  }
}

.main-card {
  background-color: white;
  border-radius: 12px;
  padding: 26px;
  box-shadow: 0 1px 10px 0 #d4deee;
}

@media screen and (max-height: 715px) {
  .main-card {
    padding: 15px;
  }
}

.main-card .main-card__head {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.main-card .main-card__head .car-icon {
  max-width: 64px;
  margin: 0 auto 1.8rem;
}

@media screen and (max-height: 715px) {
  .main-card .main-card__head .car-icon {
    margin-bottom: 1rem;
    max-width: 50px;
  }
}

@media screen and (max-height: 645px) {
  .main-card .main-card__head .car-icon {
    display: none;
  }
}

.main-card h1 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 1.8rem;
}

@media screen and (max-height: 715px) {
  .main-card h1 {
    margin-bottom: 1rem;
    font-size: 16px;
  }
}

@media screen and (max-height: 500px) {
  .main-card h1 {
    font-size: 15px;
  }
}

.main-card h2 {
  font-size: 15px;
  font-weight: 700;
}

@media screen and (max-height: 715px) {
  .main-card h2 {
    margin-bottom: 0.3rem;
  }
}

@media screen and (max-height: 715px) {
  .main-card .company-id {
    font-size: 14px;
    line-height: 16px;
  }
}

.main-card .main-card__body .intervention-infos {
  line-height: 19px;
  margin-bottom: 1rem;
}

@media screen and (max-height: 715px) {
  .main-card .main-card__body .intervention-infos {
    margin-bottom: 0.3rem;
    line-height: 17px;
  }
}

@media screen and (max-height: 500px) {
  .main-card .main-card__body .intervention-infos {
    margin-bottom: 0.2rem;
    font-size: 14px;
  }
}

.main-card .main-card__body .intervention-infos div:first-of-type {
  font-weight: 600;
}

@media screen and (max-height: 500px) {
  .main-card .main-card__body .intervention-infos div:first-of-type {
    font-size: 12px;
  }
}

.loading-block .loader {
  margin: 1.3rem 0;
}

@media screen and (max-height: 715px) {
  .loading-block .loader {
    margin: 0.5rem 0;
  }
}

.position-button {
  min-height: 50px;
}

.check-button {
  min-width: 50px;
  height: 50px;
  pointer-events: none;
}

.check-button svg {
  margin-right: 0;
  width: 22px;
  height: 17px;
}

@media screen and (max-width: 365px) {
  .check-button svg {
    display: inline-block;
  }
}

/* Rounded action buttons of the beneficiary chat. Shared by the bottom action
   bar and the buttons inside the geolocation cards, so they live here rather
   than in one component's scoped styles. */
.btn.action-pill {
  border-radius: var(--border-radius-pill);
  padding: 0.8rem 1.6rem;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.btn.action-pill--ghost {
  background-color: transparent;
  border: 1px solid var(--gray-800);
  color: var(--gray-800);
}

.btn.action-pill--ghost:hover,
.btn.action-pill--ghost:focus {
  background-color: var(--gray-800);
  color: var(--white);
}

@media screen and (max-width: 365px) {
  .btn.action-pill {
    font-size: 14px;
    padding: 0.7rem 1.1rem;
  }
}

/* A run of consecutive driver messages shows the avatar only once, on the first
   bubble. The column stays reserved (visibility, not display) so the bubbles of
   the run keep the same left edge. */
.feed .message--after-driver > .chat-row--driver:first-child .chat-row__avatar,
.feed .message--after-driver .typing-row__avatar {
  visibility: hidden;
}