@layer components {
  .message-list {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    overflow: hidden;
  }

  .message-item {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s4) var(--s5);
    border-bottom: 1px solid var(--ink-100);
    cursor: pointer;
    transition: background var(--transition);
    text-decoration: none;
    color: inherit;
  }
  .message-item:last-child { border-bottom: none; }
  .message-item:hover { background: var(--ink-50); }

  .message-item.unread { background: var(--forest-50); border-left: 3px solid var(--forest-700); }
  .message-item.unread .message-subject { font-weight: 600; }

  .message-content { flex: 1; min-width: 0; }

  .message-top-row {
    display: flex;
    align-items: baseline;
    gap: var(--s3);
    margin-bottom: 2px;
  }
  .message-sender { font-size: 13px; font-weight: 600; color: var(--ink-600); }
  .message-time { font-size: 12px; color: var(--ink-400); margin-left: auto; }

  .message-subject { font-size: 15px; color: var(--ink-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .message-preview { font-size: 14px; color: var(--ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

  .message-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--forest-600); flex-shrink: 0; }

  /* Inbox table */
  .inbox-unread td { background: var(--forest-50); }
  .clickable-row { cursor: pointer; }
  .clickable-row:hover td { background: var(--ink-50); }
  .inbox-unread.clickable-row:hover td { background: var(--forest-100); }

  /* Show page */
  .message-show { max-width: 680px; }

  .message-show-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: var(--s6);
  }

  .message-show-header {
    display: flex;
    align-items: center;
    gap: var(--s4);
    margin-bottom: var(--s5);
    padding-bottom: var(--s5);
    border-bottom: 1px solid var(--ink-100);
  }
  .message-show-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--forest-100);
    color: var(--forest-700);
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .message-show-sender { font-size: 15px; font-weight: 600; color: var(--ink-800); }
  .message-show-date { font-size: 13px; color: var(--ink-400); margin-top: 1px; }

  .message-show-subject {
    font-size: 19px;
    font-weight: 600;
    color: var(--ink-900);
    margin-bottom: var(--s4);
  }

  .message-show-body {
    font-size: 15px;
    line-height: 1.8;
    color: var(--ink-700);
  }
  .message-show-body p { margin-bottom: var(--s3); }
  .message-show-body p:last-child { margin-bottom: 0; }

  .message-show-nav { margin-bottom: var(--s4); }
  .message-show-footer { margin-top: var(--s5); }

  /* Admin compose */
  .message-body-card {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-700);
    padding: var(--s6);
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    margin-bottom: var(--s6);
  }

  /* Unread badge in sidebar */
  .unread-badge {
    background: var(--forest-700);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    margin-left: auto;
  }

  @media (max-width: 768px) {
    .message-item {
      min-height: 44px;
      padding: var(--s3) var(--s4);
    }

    .message-show-card { padding: var(--s4); }

    .message-show-header { gap: var(--s3); margin-bottom: var(--s4); padding-bottom: var(--s4); }

    .message-show-subject { font-size: 17px; }

    .message-body-card { padding: var(--s4); }
  }

  @media (max-width: 480px) {
    .message-item { padding: var(--s3); }

    .message-preview { display: none; }

    .message-show-card { padding: var(--s3); }

    .message-show-subject { font-size: 16px; margin-bottom: var(--s3); }

    .message-body-card { padding: var(--s3); }
  }
}