/* List view: mail rows, bulk toolbar, thread reader, and search results. */

.mail-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mail-row {
  position: relative;
  display: grid;
  grid-template-columns: 28px 28px minmax(150px, 200px) 1fr auto auto;
  align-items: center;
  gap: var(--wf-space-3);
  min-height: 44px;
  padding: var(--wf-space-2) var(--wf-space-4);
  border-bottom: 1px solid var(--wf-border);
  background: var(--wf-gray-25);
}

.mail-row:hover {
  background: var(--wf-gray-100);
}

.mail-row[data-unread="true"] {
  background: var(--wf-white);
}

.mail-row[data-unread="true"]:hover {
  background: var(--wf-gray-50);
}

.mail-row[data-selected="true"],
.mail-row[data-selected="true"]:hover {
  background: var(--wf-gray-200);
}

.mail-row__select,
.mail-row__star {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
}

.mail-row__star {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--wf-radius-2);
  background: transparent;
  color: var(--wf-gray-400);
}

.mail-row__star:hover {
  background: var(--wf-gray-200);
  color: var(--wf-gray-600);
}

.mail-row__star .wf-icon {
  width: 16px;
  height: 16px;
}

.mail-row__star[aria-pressed="true"] {
  color: var(--wf-gray-700);
}

.mail-row__star[aria-pressed="true"] .wf-icon svg {
  fill: var(--wf-gray-600);
}

.mail-row__from {
  min-width: 0;
  overflow: hidden;
  font-size: var(--wf-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-row[data-unread="true"] .mail-row__from,
.mail-row[data-unread="true"] .mail-row__subject strong {
  font-weight: 700;
}

.mail-row__count {
  margin-left: var(--wf-space-1);
  color: var(--wf-text-subtle);
  font-size: var(--wf-text-xs);
}

.mail-row__link {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: var(--wf-text-sm);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Resolves against .mail-row, so the whole row opens the message. */
.mail-row__link::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
}

.mail-row__link:hover {
  text-decoration: none;
}

.mail-row__subject strong {
  font-weight: 400;
}

.mail-row__snippet {
  color: var(--wf-text-subtle);
}

.mail-row__snippet::before {
  content: " — ";
}

.mail-row__marks {
  display: flex;
  align-items: center;
  gap: var(--wf-space-2);
  color: var(--wf-gray-500);
}

.mail-row__marks .wf-icon {
  width: 15px;
  height: 15px;
}

.mail-row__time {
  min-width: 64px;
  color: var(--wf-text-subtle);
  font-size: var(--wf-text-xs);
  text-align: right;
  white-space: nowrap;
}

.mail-row__actions {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: var(--wf-space-3);
  display: none;
  gap: var(--wf-space-1);
  padding: 2px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-2);
  background: var(--wf-white);
  box-shadow: var(--wf-shadow-1);
  transform: translateY(-50%);
}

.mail-row:hover .mail-row__actions,
.mail-row:focus-within .mail-row__actions {
  display: flex;
}

.mail-row__actions .wf-button {
  width: 28px;
  height: 28px;
  min-height: 28px;
}

.mail-row__actions .wf-icon {
  width: 15px;
  height: 15px;
}

.mail-list__end {
  padding: var(--wf-space-5);
  color: var(--wf-text-subtle);
  font-size: var(--wf-text-sm);
  text-align: center;
}

.mail-list__loading {
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-3);
  padding: var(--wf-space-4);
}

.mail-list__loading .wf-skeleton:nth-child(1) { width: 62%; }
.mail-list__loading .wf-skeleton:nth-child(2) { width: 78%; }
.mail-list__loading .wf-skeleton:nth-child(3) { width: 54%; }

/* Bulk toolbar */

.mail-bulk {
  display: none;
  align-items: center;
  gap: var(--wf-space-2);
  min-height: 52px;
  padding: var(--wf-space-2) var(--wf-space-4);
  border-bottom: 1px solid var(--wf-border);
  background: var(--wf-gray-100);
}

.mail-bulk[data-active="true"] {
  display: flex;
}

.mail-bulk[data-active="true"] ~ .app-toolbar {
  display: none;
}

.mail-bulk__count {
  font-size: var(--wf-text-sm);
  font-weight: 700;
}

.mail-bulk .wf-button .wf-icon,
.app-toolbar .wf-button .wf-icon {
  width: 16px;
  height: 16px;
}

/* Thread reader */

.thread {
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-4);
  padding: var(--wf-space-6);
}

.thread__head {
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-2);
}

.thread__subject {
  margin: 0;
  font-size: var(--wf-text-2xl);
  font-weight: 400;
  line-height: var(--wf-line-tight);
}

.thread__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wf-space-3);
  color: var(--wf-text-subtle);
  font-size: var(--wf-text-sm);
}

.message {
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-4);
  background: var(--wf-surface);
}

.message + .message {
  margin-top: var(--wf-space-3);
}

.message__summary {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--wf-space-3);
  padding: var(--wf-space-3) var(--wf-space-4);
  border: 0;
  border-radius: var(--wf-radius-4);
  background: transparent;
  text-align: left;
}

.message__summary:hover {
  background: var(--wf-gray-50);
}

.message__who {
  min-width: 0;
  flex: 0 0 auto;
  font-size: var(--wf-text-sm);
  font-weight: 700;
}

.message__preview {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--wf-text-subtle);
  font-size: var(--wf-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message__time {
  color: var(--wf-text-subtle);
  font-size: var(--wf-text-xs);
  white-space: nowrap;
}

.message[data-expanded="true"] .message__summary {
  display: none;
}

.message__full[hidden] {
  display: none;
}

.message__header {
  display: flex;
  align-items: flex-start;
  gap: var(--wf-space-3);
  padding: var(--wf-space-4);
  border-bottom: 1px solid var(--wf-border);
}

.message__identity {
  flex: 1;
  min-width: 0;
}

.message__sender {
  font-size: var(--wf-text-sm);
  font-weight: 700;
}

.message__address {
  color: var(--wf-text-subtle);
  font-size: var(--wf-text-xs);
}

.message__recipients {
  margin: var(--wf-space-1) 0 0;
  color: var(--wf-text-subtle);
  font-size: var(--wf-text-xs);
}

.message__tools {
  display: flex;
  align-items: center;
  gap: var(--wf-space-1);
}

.message__tools .wf-button {
  width: 32px;
  height: 32px;
  min-height: 32px;
}

.message__tools .wf-icon {
  width: 16px;
  height: 16px;
}

.message__body {
  padding: var(--wf-space-4);
  font-size: var(--wf-text-sm);
}

.message__body p {
  margin: 0 0 var(--wf-space-3);
}

.message__body p:last-child {
  margin-bottom: 0;
}

.message__images {
  display: flex;
  align-items: center;
  gap: var(--wf-space-3);
  padding: var(--wf-space-2) var(--wf-space-4);
  border-bottom: 1px solid var(--wf-border);
  background: var(--wf-gray-50);
  color: var(--wf-text-muted);
  font-size: var(--wf-text-xs);
}

.message__images .wf-icon {
  width: 15px;
  height: 15px;
}

.message__images-text {
  flex: 1;
}

.message__figure {
  display: grid;
  place-items: center;
  height: 120px;
  margin: var(--wf-space-3) 0;
  border: 1px dashed var(--wf-border-strong);
  border-radius: var(--wf-radius-3);
  background: var(--wf-gray-50);
  color: var(--wf-gray-500);
  font-size: var(--wf-text-xs);
}

.message__figure[data-loaded="true"] {
  border-style: solid;
  background:
    repeating-linear-gradient(
      45deg,
      var(--wf-gray-100),
      var(--wf-gray-100) 10px,
      var(--wf-gray-200) 10px,
      var(--wf-gray-200) 20px
    );
  color: var(--wf-gray-600);
}

.message__quote-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--wf-space-1);
  min-height: 22px;
  padding: 0 var(--wf-space-2);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-2);
  background: var(--wf-gray-100);
  color: var(--wf-text-muted);
}

.message__quote-toggle .wf-icon {
  width: 14px;
  height: 14px;
}

.message__quote {
  margin: var(--wf-space-3) 0 0;
  padding-left: var(--wf-space-3);
  border-left: 2px solid var(--wf-border-strong);
  color: var(--wf-text-subtle);
}

.message__quote[hidden] {
  display: none;
}

.message__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-space-2);
  padding: var(--wf-space-3) var(--wf-space-4);
  border-top: 1px solid var(--wf-border);
}

.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--wf-space-2);
  min-height: 32px;
  padding: 0 var(--wf-space-3);
  border: 1px solid var(--wf-border-strong);
  border-radius: var(--wf-radius-2);
  background: var(--wf-gray-50);
  font-size: var(--wf-text-xs);
}

.attachment-chip .wf-icon {
  width: 14px;
  height: 14px;
  color: var(--wf-gray-500);
}

.attachment-chip__size {
  color: var(--wf-text-subtle);
}

.attachment-chip button {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--wf-radius-1);
  background: transparent;
  color: var(--wf-text-subtle);
}

.attachment-chip button:hover {
  background: var(--wf-gray-200);
}

.message__actions {
  display: flex;
  gap: var(--wf-space-2);
  padding: var(--wf-space-3) var(--wf-space-4);
  border-top: 1px solid var(--wf-border);
}

.message__actions .wf-icon {
  width: 15px;
  height: 15px;
}

/* Inline reply */

.thread__reply {
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-3);
  padding: var(--wf-space-4);
  border: 1px solid var(--wf-border-strong);
  border-radius: var(--wf-radius-4);
  background: var(--wf-surface);
}

.thread__reply[hidden] {
  display: none;
}

.thread__reply-head {
  display: flex;
  align-items: center;
  gap: var(--wf-space-2);
  padding-bottom: var(--wf-space-3);
  border-bottom: 1px solid var(--wf-border);
}

.thread__reply-mode {
  display: inline-flex;
  align-items: center;
  gap: var(--wf-space-2);
  font-size: var(--wf-text-sm);
  font-weight: 500;
}

.thread__reply-mode .wf-icon {
  width: 15px;
  height: 15px;
}

.thread__reply-from {
  color: var(--wf-text-subtle);
  font-size: var(--wf-text-xs);
}

.thread__reply-body {
  min-height: 168px;
}

/* Cc and Bcc sit at the end of the To row so a lone remaining button does not
   read as an orphan beneath the recipient field. */
.thread__reply-to-line {
  display: flex;
  align-items: flex-start;
  gap: var(--wf-space-2);
}

.thread__reply-to-line > .wf-tags-input {
  flex: 1;
  min-width: 0;
}

.thread__reply-to-line > .compose__reveal {
  padding-top: var(--wf-space-1);
}

/* The reply form reuses the compose row grid, but sits in a narrower column,
   so the label gutter is tightened to keep the fields usable. */
.thread__reply .compose__row {
  grid-template-columns: 48px 1fr;
  gap: var(--wf-space-2);
}

.thread__reply .compose__footer {
  padding-top: var(--wf-space-3);
}

/* Search results */

[data-search-query-state][hidden],
[data-local-result-group][hidden] {
  display: none;
}

.result-group + .result-group {
  margin-top: var(--wf-space-6);
}

.result-group__head {
  display: flex;
  align-items: baseline;
  gap: var(--wf-space-3);
  padding-bottom: var(--wf-space-2);
  border-bottom: 1px solid var(--wf-border);
}

.result-group__title {
  margin: 0;
  font-size: var(--wf-text-sm);
  font-weight: 700;
}

.result-group__note {
  color: var(--wf-text-subtle);
  font-size: var(--wf-text-xs);
}

.result {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--wf-space-1) var(--wf-space-4);
  padding: var(--wf-space-3) var(--wf-space-2);
  border-bottom: 1px solid var(--wf-border);
}

.result:hover {
  background: var(--wf-gray-50);
}

.result[hidden] {
  display: none;
}

.result__subject {
  color: inherit;
  font-size: var(--wf-text-sm);
  font-weight: 700;
  text-decoration: none;
}

.result__subject:hover {
  text-decoration: underline;
}

.result__time {
  color: var(--wf-text-subtle);
  font-size: var(--wf-text-xs);
  text-align: right;
  white-space: nowrap;
}

.result__meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wf-space-2);
  color: var(--wf-text-subtle);
  font-size: var(--wf-text-xs);
}

.result__snippet {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--wf-text-muted);
  font-size: var(--wf-text-sm);
}

.result mark {
  padding: 0 2px;
  background: var(--wf-gray-200);
  color: var(--wf-text);
  font-weight: 700;
}

/* Compose */

.compose {
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-4);
}

.compose__row {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: start;
  gap: var(--wf-space-3);
}

.compose__row[hidden] {
  display: none;
}

.compose__row > .wf-label {
  padding-top: var(--wf-space-2);
}

.compose__reveal {
  display: flex;
  gap: var(--wf-space-2);
}

.compose__reveal .wf-button {
  min-height: 30px;
  padding: 0 var(--wf-space-2);
  font-size: var(--wf-text-xs);
}

.compose__reveal .wf-button[hidden] {
  display: none;
}

.compose__body {
  min-height: 240px;
}

.compose__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-space-2);
}

.compose__attachments:empty {
  display: none;
}

.compose__footer {
  display: flex;
  align-items: center;
  gap: var(--wf-space-2);
  padding-top: var(--wf-space-4);
  border-top: 1px solid var(--wf-border);
}

.compose__footer .wf-icon {
  width: 15px;
  height: 15px;
}

/* Accounts and connection form */

.account-card {
  display: flex;
  align-items: flex-start;
  gap: var(--wf-space-4);
  padding: var(--wf-space-5);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-4);
  background: var(--wf-surface);
}

.account-card + .account-card {
  margin-top: var(--wf-space-4);
}

.account-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-3);
}

.account-card__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wf-space-2);
  font-size: var(--wf-text-md);
  font-weight: 700;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--wf-space-4);
}

@media (max-width: 899.98px) {
  .mail-row {
    grid-template-columns: 28px 28px 1fr auto;
    align-items: start;
    padding-block: var(--wf-space-3);
  }

  .mail-row__from {
    grid-column: 3;
  }

  .mail-row__link {
    grid-column: 3 / -1;
    white-space: normal;
  }

  .mail-row__marks {
    grid-column: 3;
    grid-row: 3;
  }

  .mail-row__time {
    grid-column: 4;
    grid-row: 1;
  }

  .mail-row__actions {
    display: none !important;
  }

  .thread,
  .app-pad {
    padding: var(--wf-space-4);
  }

  .compose__row {
    grid-template-columns: 1fr;
  }
}

.wf-field[aria-invalid="true"] .wf-tags-input {
  border-color: var(--wf-gray-700);
  background: var(--wf-gray-50);
}

.search-result-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--wf-space-2);
}

/* Action buttons inside an alert must not be squeezed into wrapping. */
.wf-alert > .wf-row {
  flex: 0 0 auto;
  align-self: center;
}

.wf-alert .wf-button {
  white-space: nowrap;
}
/* Thread conversation details mirror Chat mode's right-side information panel. */
.details-block + .details-block {
  margin-top: var(--wf-space-5);
  padding-top: var(--wf-space-5);
  border-top: 1px solid var(--wf-border);
}

.details-block__title {
  margin: 0 0 var(--wf-space-3);
  font-size: var(--wf-text-sm);
  font-weight: 700;
}