/*
 * The thread of one order: guest on the left, restaurant and hub on the
 * right. Used on the kitchen card (dialog) and in the order list (details).
 */
@layer components {
  .chat-thread {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: start;
  }

  .chat-thread__item {
    max-inline-size: 85%;
    padding: 8px 12px;
    border-radius: var(--radius-card);
    background-color: var(--color-ink-lightest);
    align-self: flex-start;
  }

  .chat-thread__item--out {
    align-self: flex-end;
    background-color: var(--color-accent-soft);
  }

  .chat-thread__item--auto {
    background-color: transparent;
    border: 1px dashed var(--color-ink-medium);
    color: var(--color-ink-dark);
    font-size: var(--text-small);
  }

  .chat-thread__item--unread {
    outline: 2px solid var(--color-accent);
  }

  .chat-thread__body {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .chat-thread__meta {
    margin: 4px 0 0;
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
    font-variant-numeric: tabular-nums;
  }

  .chat-thread__empty {
    margin: 0;
    color: var(--color-ink-dark);
    font-size: var(--text-small);
  }

  /* Order list: the thread folds out under the order */
  .order-list__details > summary {
    display: grid;
    gap: 4px;
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }
  }

  .order-list__badges {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  .order-list__thread {
    margin-block-start: 12px;
    padding: 12px;
    border: 1px dashed var(--color-ink-medium);
    border-radius: var(--radius-card);
  }
}