/* ============================================================
   Messages (role-aware chat) page.
   Structure in @layer layout, paint in @layer design. Content-named
   classes only — no legacy/appearance names, no hardcoded color.
   Reuses .app-screen and .btn/.btn--primary from elements.css and the
   .search-box pattern. The same sheet renders the light desk theme and
   the dark participant theme: it paints only with --t-* tokens, which
   the theme layer rebinds per persona. See docs/FRONTEND-ARCHITECTURE.md.
   ============================================================ */

@layer layout {
  .messages__intro { display: grid; gap: var(--mea-space-1); }
  .messages__title, .messages__subtitle { margin: 0; }

  /* Two panes: a conversation list and the open thread. They stack on a
     narrow container and split side-by-side once there is room. */
  .messages__layout { display: grid; gap: var(--mea-space-4);
                      grid-template-columns: 1fr; align-items: start;
                      min-block-size: 28rem; }
  @container (min-width: 44rem) {
    .messages__layout { grid-template-columns: minmax(16rem, 22rem) 1fr; }
  }

  /* Conversation list pane. */
  .conversation-list { display: grid; grid-template-rows: auto 1fr;
                       gap: var(--mea-space-3);
                       padding: var(--mea-space-3); border-radius: var(--mea-radius-xl);
                       max-block-size: 34rem; min-inline-size: 0; }
  .conversation-search { flex: initial; display: flex; align-items: center;
                         gap: var(--mea-space-2); margin: 0;
                         padding: var(--mea-space-2) var(--mea-space-3);
                         border-radius: var(--mea-radius-md); }
  .search-box__input { flex: 1; min-inline-size: 0; min-height: var(--t-target-min, 44px);
                       border: 0; background: transparent; padding: 0; }
  .conversation-list__items { display: grid; gap: var(--mea-space-1);
                              margin: 0; padding: 0; list-style: none;
                              overflow-y: auto; min-block-size: 0; }
  .conversation-list__empty { margin: 0; padding: var(--mea-space-6) var(--mea-space-3);
                              text-align: center; }

  .conversation { display: grid; grid-template-columns: auto 1fr auto;
                  gap: var(--mea-space-3); align-items: start;
                  padding: var(--mea-space-3); border-radius: var(--mea-radius-lg);
                  cursor: pointer; }
  .conversation__avatar { display: inline-flex; align-items: center; justify-content: center;
                          inline-size: 2.5rem; block-size: 2.5rem; flex-shrink: 0;
                          border-radius: var(--mea-radius-circle); }
  .conversation__detail { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .conversation__top { display: flex; align-items: baseline;
                       justify-content: space-between; gap: var(--mea-space-2); }
  .conversation__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .conversation__time { flex-shrink: 0; }
  .conversation__role { margin: 0; }
  .conversation__preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .conversation__unread { display: inline-flex; align-items: center; justify-content: center;
                          min-inline-size: 1.5rem; block-size: 1.5rem; flex-shrink: 0;
                          padding-inline: var(--mea-space-1);
                          border-radius: var(--mea-radius-pill); }

  /* Thread pane: header, scrolling body, composer. */
  .thread { display: grid; grid-template-rows: auto 1fr auto;
            border-radius: var(--mea-radius-xl); overflow: hidden;
            min-inline-size: 0; max-block-size: 34rem; }
  .thread__header { padding: var(--mea-space-3) var(--mea-space-4); }
  .thread__name, .thread__role { margin: 0; }
  .thread__body { display: flex; flex-direction: column; gap: var(--mea-space-3);
                  padding: var(--mea-space-4); overflow-y: auto; min-block-size: 0; }
  .thread__empty { margin: auto; text-align: center; }

  .thread__composer { display: grid; gap: var(--mea-space-2);
                      padding: var(--mea-space-3) var(--mea-space-4); }
  .thread__composer[hidden] { display: none; }
  .thread__error { margin: 0; }
  .thread__error[hidden] { display: none; }
  .thread__compose-row { display: grid; grid-template-columns: 1fr auto;
                         gap: var(--mea-space-2); align-items: end; }
  .thread__field { display: grid; min-inline-size: 0; }
  /* The label repeats the placeholder; expose it to assistive tech only. */
  .thread__field-label { position: absolute; inline-size: 1px; block-size: 1px;
                         padding: 0; margin: -1px; overflow: hidden;
                         clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .thread__input { inline-size: 100%; min-height: var(--t-target-min, 44px);
                   padding: var(--mea-space-2) var(--mea-space-3);
                   border-radius: var(--mea-radius-md); resize: vertical;
                   font: inherit; }
  .thread__send { flex-shrink: 0; }

  /* Message rows: own messages align trailing, others leading. */
  .message { display: flex; }
  .message--own { justify-content: flex-end; }
  .message--other { justify-content: flex-start; }
  .message__bubble { display: grid; gap: var(--mea-space-1);
                     max-inline-size: min(85%, 32rem);
                     padding: var(--mea-space-2) var(--mea-space-3);
                     border-radius: var(--mea-radius-lg); }
  .message__sender, .message__body, .message__time { margin: 0; }
  .message__time { justify-self: end; }
  .message__time--other { justify-self: start; }

  /* Participant-only support prompt shown when no thread exists yet. */
  .support-prompt { display: grid; place-items: center;
                    padding: var(--mea-space-6) var(--mea-space-4); block-size: 100%; }
  .support-prompt__card { display: grid; gap: var(--mea-space-3); justify-items: start;
                          inline-size: 100%; max-inline-size: 28rem;
                          padding: var(--mea-space-5); border-radius: var(--mea-radius-2xl); }
  .support-prompt__title, .support-prompt__desc { margin: 0; }
}

@layer design {
  .messages__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-2xl);
                     font-weight: var(--mea-w-bold); color: var(--t-text); }
  .messages__subtitle { font-size: var(--mea-text-md); color: var(--t-text-secondary); }

  .conversation-list { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                       box-shadow: var(--mea-shadow-sm); }
  .conversation-search { background: var(--t-bg-elevated); border: 1px solid var(--t-border); }
  .conversation-search:focus-within { border-color: var(--t-border-focus); }
  .search-box__icon { color: var(--t-text-muted); }
  .search-box__input { color: var(--t-text); font-size: var(--mea-text-md); }
  .search-box__input::placeholder { color: var(--t-text-muted); }

  .conversation-list__empty { font-size: var(--mea-text-sm); color: var(--t-text-muted); }

  .conversation { transition: background var(--mea-dur-fast); }
  .conversation:hover { background: var(--t-bg-recessed); }
  .conversation--selected { background: var(--t-bg-active); }
  .conversation__avatar { background: var(--t-accent); color: var(--t-accent-text);
                          font-size: var(--mea-text-sm); font-weight: var(--mea-w-bold); }
  .conversation__name { font-size: var(--mea-text-base); font-weight: var(--mea-w-semibold);
                        color: var(--t-text); }
  .conversation__time { font-size: var(--mea-text-xs); color: var(--t-text-muted); }
  .conversation__role { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
                        color: var(--t-accent); }
  .conversation__preview { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }
  .conversation__preview-empty { font-style: italic; color: var(--t-text-muted); }
  .conversation__unread { background: var(--t-accent); color: var(--t-accent-text);
                          font-size: var(--mea-text-xs); font-weight: var(--mea-w-bold); }

  .thread { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
            box-shadow: var(--mea-shadow-sm); }
  .thread__header { background: var(--t-bg-recessed); border-block-end: 1px solid var(--t-border);
                    font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .thread__name { font-family: var(--mea-font-citizen); font-size: var(--mea-text-md);
                  font-weight: var(--mea-w-bold); color: var(--t-text); }
  .thread__role { font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .thread__empty { font-size: var(--mea-text-sm); color: var(--t-text-muted); }

  .thread__composer { border-block-start: 1px solid var(--t-border); }
  .thread__error { font-size: var(--mea-text-sm); color: var(--t-error-text); }
  .thread__input { background: var(--t-bg-elevated); color: var(--t-text);
                   border: 1px solid var(--t-border); font-size: var(--mea-text-md); }
  .thread__input::placeholder { color: var(--t-text-muted); }
  .thread__input:focus { outline: none; border-color: var(--t-border-focus); }

  .message__bubble--own { background: var(--t-accent); color: var(--t-accent-text);
                          box-shadow: var(--mea-shadow-sm); }
  .message__bubble--other { background: var(--t-bg-recessed); color: var(--t-text); }
  .message__sender { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
                     color: var(--t-text-muted); }
  .message__body { font-size: var(--mea-text-md); line-height: var(--mea-lh-snug); }
  .message__time { font-size: var(--mea-text-xs); }
  .message__time--own { color: var(--t-accent-text); }
  .message__time--other { color: var(--t-text-muted); }

  .support-prompt__card { background: var(--t-bg-recessed); border: 1px solid var(--t-card-border);
                          box-shadow: var(--mea-shadow-sm); }
  .support-prompt__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                           font-weight: var(--mea-w-bold); color: var(--t-text); }
  .support-prompt__desc { font-size: var(--mea-text-md); color: var(--t-text-secondary);
                          line-height: var(--mea-lh-normal); }
}