inbox.css

/*
  styling for the inbox

  layout
  converstations list
  conversation
*/



/* layout
============================================================================ */
#pos-chat-inbox {
  display: grid;
  grid-template-columns: auto 1fr;
  overflow: hidden;
}



/* conversations list
============================================================================ */
.pos-chat-conversations {
  padding: calc(var(--pos-padding-page) / 2);
  position: relative;
  overflow: auto;
  display: flex;
  flex-direction: column;

  border-inline-end: 1px solid var(--pos-color-divider);
}

  .pos-chat-conversations li:not(:last-child) {
    padding-block-end: var(--pos-gap-list);
  }

  .pos-chat-conversations a:hover {
    color: inherit;
  }


/* conversation card */
.pos-chat-conversationCard {
  padding: var(--pos-padding-panel);
  display: grid;
  grid-template-columns: 48px auto;
  grid-template-areas:
    'avatar name'
    'avatar message';
  column-gap: var(--pos-padding-panel);

  border-radius: var(--pos-radius-panel);

  transition: background-color .1s linear;
}

  .pos-chat-conversations a:focus-visible .pos-chat-conversationCard {
    background-color: color-mix(in srgb, var(--pos-color-navigation-hover) 50%, transparent 50%);

    color: var(--pos-color-interactive-hover);
  }

  /* fallback for browsers that don't support anchor-name */
  .pos-chat-conversationCard:hover {
    background-color: color-mix(in srgb, var(--pos-color-navigation-hover) 50%, transparent 50%);
  }
  /* end fallback */

  /* list hover effect */
  @supports (anchor-name: --pos-chat-conversation-active) {
    /* disable fallback */
    .pos-chat-conversationCard:hover {
      background-color: transparent;
    }

    #pos-chat-conversations:before {
      width: anchor-size(width);
      height: anchor-size(height);
      position: absolute;
      z-index: -1;
      position-anchor: --pos-chat-conversation-active;
      inset-block-start: anchor(start);
  
      border-radius: var(--pos-radius-panel);
      background-color: color-mix(in srgb, var(--pos-color-navigation-hover) 50%, transparent 50%);

      content: '';
  
      transition: all .2s ease-in-out;
    }

    .pos-chat-conversations:not(:has(.pos-chat-conversationCard:hover)) .pos-chat-conversationCard.active {
      anchor-name: --pos-chat-conversation-active;
    }

    .pos-chat-conversations li:hover .pos-chat-conversationCard {
      anchor-name: --pos-chat-conversation-active;
    }
  }
  /* end list hover effect */

  .pos-chat-conversationCard.active {
    border-radius: var(--pos-radius-panel);
    background-color: var(--pos-color-navigation-hover);
  }

.pos-chat-conversationCard .pos-avatar {
  grid-row: 1 / 3;
  align-self: center;
  justify-self: center;
}

.pos-chat-conversationCard-name {
  max-width: 230px;
  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
}

.pos-chat-conversationCard-lastMessage {
  display: flex;
  gap: var(--pos-gap-navigation);
  justify-content: space-between;

  font-size: .9em;
  color: var(--pos-color-content-supplementary);
}

  .pos-chat-conversationCard-lastMessage small {
    max-width: 150px;
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
  }


/* conversation
============================================================================ */
.pos-chat-inbox-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pos-chat-loadingIndicator {
  position: absolute;
  inset-inline: 0;
  inset-block-start: var(--pos-padding-page);
  display: flex;
  justify-content: center;

  opacity: 0;

  translate: 0 -4rem;
  transition: all .2s ease-in-out;
}

  .pos-chat-loadingIndicator.active {
    opacity: 1;

    translate: 0 0;
  }

  .pos-chat-loadingIndicator span {
    padding: .5em 1em;

    background-color: var(--pos-color-colorful-background);
    border-radius: var(--pos-radius-panel);

    color: var(--pos-color-colorful-foreground);
  }

.pos-chat-conversation {
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: auto;
}

.pos-chat-conversation-header {
  padding: var(--pos-gap-navigation) var(--pos-padding-page);
  display: flex;
  gap: calc(var(--pos-gap-navigation) / 2);

  border-block-end: 1px solid var(--pos-color-divider);

  font-weight: 500;
}

.pos-chat-conversation-messagesContainer {
  position: relative;
  overflow: auto;
  scrollbar-gutter: stable;
}

.pos-chat-messages {
  padding: var(--pos-padding-page);
  display: flex;
  flex-direction: column;
  gap: var(--pos-gap-navigation);
}

.pos-chat-message {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--pos-gap-list);
}

.pos-chat-message-authored {
  align-items: end;
}

.pos-chat-message time {
  font-size: .9rem;
  color: var(--pos-color-content-supplementary);
}

.pos-chat-message-content {
  padding: calc(var(--pos-padding-panel) / 2) calc(var(--pos-padding-panel) / 1.5);

  background-color: color-mix(in srgb, var(--pos-color-content-supplementary) 30%, transparent 70%);
  border-radius: var(--pos-radius-panel)
}

  .pos-chat-message-authored .pos-chat-message-content {
    background-color: var(--pos-color-highlighted);
  }


/* new message panel
============================================================================ */
.pos-chat-conversation-new {
  padding: var(--pos-gap-navigation) var(--pos-padding-page) var(--pos-gap-navigation);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--pos-gap-navigation);
  overflow: auto;
  scrollbar-gutter: stable;
}

.pos-chat-conversation-input {
  padding: calc(var(--pos-padding-panel) / 2) calc(var(--pos-padding-panel) / 1.5);

  border-radius: var(--pos-radius-panel);
  background-color: color-mix(in srgb, var(--pos-color-content-supplementary) 30%, transparent 70%);

  transition: background-color .1s linear
}

.pos-chat-conversation-input:focus {
  background-color: color-mix(in srgb, var(--pos-color-content-supplementary) 20%, transparent 80%);
}