/* Synthetic Hearts — Chat realtime UI v1 */

/* DESKTOP:
   The wrapper itself grows naturally with the text, but can never exceed 50%
   of the central conversation column. Only after that point may text wrap. */
@media (min-width: 761px) {
  .message-row{
    width:100% !important;
    min-width:0 !important;
  }

  .message-row > div:not(.message-avatar){
    box-sizing:border-box !important;
    width:fit-content !important;
    min-width:0 !important;
    max-width:50% !important;
    flex:0 1 50% !important;
  }

  .message-row.from-user > div:not(.message-avatar){
    margin-left:auto !important;
  }

  .message-row.from-character > div:not(.message-avatar){
    margin-right:auto !important;
  }

  .message-bubble{
    box-sizing:border-box !important;
    display:block !important;
    width:max-content !important;
    min-width:0 !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    hyphens:none !important;
  }

  .message-row time{
    display:block !important;
    width:100% !important;
    margin-top:5px !important;
  }

  .message-row.from-user time{
    text-align:right !important;
  }
}

/* Mobile keeps the usual wider chat bubbles. */
@media (max-width:760px){
  .message-row > div:not(.message-avatar){
    max-width:88% !important;
  }
  .message-bubble{
    width:auto !important;
    max-width:100% !important;
  }
}

/* Relationship bars animate when the background analysis returns. */
.relation-track i{
  transition:width .45s ease !important;
}