/* =========================================
   MESSAGE COMPOSER
========================================= */

.message-send-form {
  margin:
    0;

  padding:
    16px 22px 18px;

  background-color:
    #ffffff;
}


/* =========================================
   COMPOSER HEADING
========================================= */

.message-compose-heading {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    8px;
}


.message-compose-title {
  margin:
    0;

  color:
    var(--navy);

  font-size:
    0.98rem;

  font-weight:
    850;

  line-height:
    1.3;
}


.message-compose-help {
  margin:
    3px 0 0;

  color:
    #6a7784;

  font-size:
    0.76rem;

  line-height:
    1.4;
}


/* =========================================
   COMPOSER FIELD
========================================= */

.message-compose-field {
  width:
    100%;
}


/* =========================================
   TEXTAREA
========================================= */

.message-compose-textarea {
  display:
    block;

  width:
    100%;

  min-height:
    72px;

  padding:
    11px 13px;

  box-sizing:
    border-box;

  color:
    var(--navy);

  background-color:
    #f8fafc;

  border:
    1px solid
    #c7d2dc;

  border-radius:
    9px;

  outline:
    none;

  resize:
    vertical;

  font-family:
    inherit;

  font-size:
    0.88rem;

  line-height:
    1.45;

  box-shadow:
    inset 0 1px 2px
    rgba(
      24,
      36,
      51,
      0.03
    );

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}


.message-compose-textarea::placeholder {
  color:
    #97a4b0;
}


.message-compose-textarea:hover {
  border-color:
    #aebbc6;
}


.message-compose-textarea:focus {
  background-color:
    #ffffff;

  border-color:
    var(--orange-dark);

  box-shadow:
    0 0 0 3px
    rgba(
      230,
      126,
      0,
      0.11
    );
}


/* =========================================
   SEND BUTTON AREA
========================================= */

.message-send-buttons {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  margin-top:
    8px;
}


/* =========================================
   SEND BUTTON
========================================= */

.message-send-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    135px;

  min-height:
    38px;

  padding:
    0 15px;

  margin:
    0;

  color:
    var(--navy);

  background-color:
    var(--orange);

  border:
    1px solid
    var(--orange);

  border-radius:
    8px;

  font-family:
    inherit;

  font-size:
    0.78rem;

  font-weight:
    850;

  line-height:
    1;

  cursor:
    pointer;

  box-shadow:
    none;

  transition:
    transform 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}


.message-send-button:hover {
  transform:
    translateY(-1px);

  color:
    #ffffff;

  background-color:
    var(--orange-dark);

  border-color:
    var(--orange-dark);
}


/* =========================================
   DISABLED BUTTON
========================================= */

.message-send-button:disabled {
  opacity:
    0.6;

  cursor:
    not-allowed;

  transform:
    none;
}


/* =========================================
   MOBILE
========================================= */

@media screen and (max-width: 768px) {

  .message-send-form {
    padding:
      14px;
  }


  .message-compose-heading {
    flex-direction:
      column;

    gap:
      3px;

    margin-bottom:
      7px;
  }


  .message-compose-title {
    font-size:
      0.94rem;
  }


  .message-compose-help {
    font-size:
      0.73rem;
  }


  .message-compose-textarea {
    min-height:
      68px;

    padding:
      10px 11px;

    font-size:
      0.86rem;
  }


  .message-send-buttons {
    flex-direction:
      column;

    align-items:
      stretch;

    margin-top:
      7px;
  }


  .message-send-button {
    width:
      100%;

    min-width:
      0;

    min-height:
      38px;
  }

}


/* =========================================
   COMPOSER POLISH
========================================= */

.message-send-form {
  border-top:
    1px solid
    #dbe3e9;

  box-shadow:
    0 -4px 12px
    rgba(
      15,
      23,
      42,
      0.025
    );
}



/* =========================================
   COMPACT MOBILE COMPOSER
========================================= */

@media screen and (max-width: 768px) {

  .message-send-form {
    padding:
      10px;
  }


  .message-compose-heading {
    margin-bottom:
      6px;
  }


  .message-compose-title {
    font-size:
      0.86rem;
  }


  .message-compose-help {
    font-size:
      0.66rem;

    line-height:
      1.3;
  }


  .message-compose-textarea {
    min-height:
      56px;

    padding:
      9px 10px;

    font-size:
      0.82rem;

    resize:
      none;
  }


  .message-send-buttons {
    margin-top:
      6px;
  }


  .message-send-button {
    min-height:
      34px;

    font-size:
      0.72rem;
  }

}



/* =========================================
   COMPACT DESKTOP COMPOSER
========================================= */

@media screen and (min-width: 769px) {

  .message-send-form {
    padding:
      12px 18px 14px;
  }


  .message-compose-heading {
    margin-bottom:
      6px;
  }


  .message-compose-title {
    font-size:
      0.9rem;
  }


  .message-compose-help {
    font-size:
      0.7rem;
  }


  .message-compose-textarea {
    min-height:
      60px;

    padding:
      9px 11px;

    font-size:
      0.84rem;
  }


  .message-send-buttons {
    margin-top:
      6px;
  }


  .message-send-button {
    min-height:
      34px;

    min-width:
      125px;

    font-size:
      0.74rem;
  }

}


/* =========================================
   MOBILE CHAT COMPOSER
========================================= */

@media screen and (max-width: 768px) {

  .message-send-form {
    display:
      grid;

    grid-template-columns:
      minmax(0, 1fr)
      auto;

    gap:
      8px;

    align-items:
      end;

    padding:
      8px;
  }

  .message-compose-heading {
    display:
      none;
  }

  .message-compose-field {
    min-width:
      0;
  }

  .message-compose-textarea {
    min-height:
      42px;

    max-height:
      110px;

    padding:
      10px 11px;

    border-radius:
      11px;

    font-size:
      16px;

    line-height:
      1.25;
  }

  .message-send-buttons {
    margin:
      0;
  }

  .message-send-button {
    width:
      auto;

    min-width:
      64px;

    min-height:
      42px;

    padding:
      0 13px;

    border-radius:
      11px;

    font-size:
      0.7rem;
  }

}


/* =========================================
   DESKTOP CHAT COMPOSER
========================================= */

@media screen and (min-width: 769px) {

  .message-send-form {
    display:
      grid;

    grid-template-columns:
      minmax(0, 1fr)
      auto;

    align-items:
      end;

    gap:
      10px;

    padding:
      10px 16px 12px;
  }

  .message-compose-heading {
    display:
      none;
  }

  .message-compose-field {
    min-width:
      0;
  }

  .message-compose-textarea {
    min-height:
      44px;

    max-height:
      120px;

    padding:
      10px 11px;

    border-radius:
      10px;

    resize:
      vertical;
  }

  .message-send-buttons {
    margin:
      0;
  }

  .message-send-button {
    min-width:
      110px;

    min-height:
      44px;

    border-radius:
      10px;
  }

}