/* Account-based record browsing; load after styles.css and reader-tools.css. */

.header-account-switcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 7px;
  min-width: 70px;
  min-height: 46px;
  padding: 6px 8px;
  border: 1px solid #d8e2eb;
  border-radius: 9px;
  background: #f8fafc;
  color: #54718a;
}

.header-account-switcher:hover,
.header-account-switcher[aria-expanded="true"] {
  border-color: #bad2e5;
  background: var(--pale);
}

.header-account-switcher .avatar {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  font-size: 10px;
}

.header-account-switcher .avatar svg {
  width: 17px;
  height: 17px;
}

.header-account-switcher > svg:last-child,
.header-account-switcher .account-chevron {
  width: 12px;
  height: 12px;
  flex-basis: 12px;
  margin: 0;
}

.account-switcher {
  width: 100%;
  margin: 0 0 18px;
}

button.account-switcher,
.account-switcher > button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 70px;
  padding: 12px 10px;
  border: 1px solid #d8e2eb;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  box-shadow: 0 1px 3px #16324b05;
}

button.account-switcher:hover,
.account-switcher > button:hover,
button.account-switcher[aria-expanded="true"],
.account-switcher > button[aria-expanded="true"] {
  border-color: #bad2e5;
  background: #f5f9fd;
}

.account-switcher .avatar {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  font-size: 11px;
}

.account-summary {
  display: block;
  flex: 1;
  min-width: 0;
}

.account-name {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-role {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
}

.account-chevron,
button.account-switcher > svg:last-child,
.account-switcher > button > svg:last-child {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin-left: 1px;
  color: #6c8397;
  stroke-width: 1.7;
}

.sidebar .folders {
  margin-top: 2px;
}

.sidebar .folder {
  gap: 11px;
  min-height: 44px;
}

.sidebar .folder > span:nth-of-type(1) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar .folder > span:nth-of-type(2) {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.mailbox-note {
  margin: 19px 10px 0;
  padding: 15px 2px 0;
  border-top: 1px solid #dde5ed;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.mailbox-note p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

#mailboxScope {
  display: block;
  margin-top: 6px;
  color: #617487;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.active-mailbox-bar {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 9px;
  min-height: 63px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.active-mailbox-bar .avatar {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  font-size: 9px;
}

.active-mailbox-bar > div,
.active-mailbox-bar .account-summary {
  flex: 1;
  min-width: 0;
}

#activeMailboxName {
  display: block;
  overflow: hidden;
  color: #2d465c;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#activeMailboxRole {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
}

#changeAccountButton {
  flex: 0 0 auto;
  min-height: 36px;
  margin-left: auto;
  padding: 6px 7px;
  font-size: 11px;
}

.mailbox-breadcrumb {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}

.row-top .row-sender {
  flex: 1;
  min-width: 0;
}

.row-direction {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-direction strong {
  color: #4a647b;
  font-weight: 500;
}

.source-heading {
  flex-wrap: wrap;
  gap: 6px 9px;
}

.source-heading .direction-chip {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 3px 6px;
  border: 1px solid #d6e3ee;
  border-radius: 4px;
  background: #edf4fa;
  color: #4c6d87;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
}

.account-picker {
  max-width: 600px;
  padding: 30px;
}

.account-picker h2 {
  margin-bottom: 10px;
}

.account-picker .dialog-hint {
  margin: 0 0 19px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.account-results {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: min(62dvh, 600px);
  padding: 3px;
  overflow: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 8px;
}

.account-option {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  width: 100%;
  min-height: 65px;
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink);
  text-align: left;
}

.account-option:hover {
  border-color: #e0e8f0;
  background: #f4f8fc;
}

.account-option.active,
.account-option[aria-pressed="true"],
.account-option[aria-current="true"] {
  border-color: #c5dbee;
  background: #eaf3fc;
  box-shadow: inset 3px 0 #1766a2;
}

.account-option .avatar {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  font-size: 12px;
}

.account-option .account-name {
  font-size: 14px;
  line-height: 1.4;
}

.account-option .account-role {
  font-size: 11px;
}

.account-count {
  flex: 0 0 auto;
  max-width: 104px;
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.account-count strong {
  display: block;
  color: #46637c;
  font-size: 13px;
  font-weight: 600;
}

.account-count small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
}

.account-option[data-account="all"]:not(.active):not([aria-pressed="true"]) {
  border-color: #e0e7ee;
  background: #f8fafc;
}

@media (max-width: 1180px) {
  button.account-switcher,
  .account-switcher > button {
    min-height: 75px;
    padding: 13px 11px;
  }

  .account-switcher .account-name {
    font-size: 14px;
  }

  .account-switcher .avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .mailbox-note {
    margin-top: 21px;
    font-size: 12px;
  }
}

@media (max-width: 820px) {
  .header-account-switcher {
    gap: 5px;
    min-width: 64px;
    min-height: 44px;
    padding: 5px 6px;
  }

  .active-mailbox-bar {
    min-height: 65px;
    padding: 10px 20px;
    background: #f7fafc;
  }

  .active-mailbox-bar .avatar {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    font-size: 10px;
  }

  #activeMailboxName {
    font-size: 13px;
  }

  #activeMailboxRole {
    font-size: 11px;
  }

  #changeAccountButton {
    min-height: 44px;
    padding-inline: 9px;
    font-size: 12px;
  }

  .mailbox-breadcrumb {
    font-size: 12px;
  }

  .row-direction {
    font-size: 12px;
  }

  .account-picker {
    padding: 28px 20px 22px;
  }

  .account-results {
    max-height: 57dvh;
    gap: 4px;
  }

  .account-option {
    min-height: 68px;
    padding: 12px 10px;
    gap: 10px;
  }
}

@media (max-width: 420px) {
  .account-picker .account-option .avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    font-size: 10px;
  }

  .account-option .account-name {
    font-size: 13px;
  }

  .account-count {
    max-width: 82px;
    font-size: 10px;
  }

  .account-count strong {
    font-size: 12px;
  }

  .account-count small {
    font-size: 9px;
  }

  .source-heading .direction-chip {
    font-size: 10px;
  }
}

/* Keep the complete archive visible while the people list scrolls. */
.collection-account { margin-top: 12px; }
.account-picker .account-option .account-name { white-space: normal; overflow: visible; text-overflow: clip; }
@media (max-width: 820px) {
  .account-results { max-height: min(57dvh, calc(88dvh - 285px)); }
  .account-option { min-height: 60px; padding-block: 9px; }
  .collection-account { margin-top: 10px; }
}

/* Direct account navigation keeps the people visible beside their folders. */
.header-mailbox-label { color: var(--ink); font-size: 12px; font-weight: 600; padding-inline: 3px; }
.mailbox-directory { flex: 0 0 auto; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 15px; }
.mailbox-directory h2 { margin: 0 10px 8px; color: var(--muted); font-size: 11px; font-weight: 650; }
.mailbox-shortcut { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 38px; padding: 6px 10px; border-radius: 7px; color: #4b6073; text-align: left; }
.mailbox-shortcut > span:nth-child(2) { flex: 1; min-width: 0; font-size: 12px; line-height: 1.4; }
.mailbox-shortcut .avatar { width: 24px; height: 24px; flex-basis: 24px; font-size: 8px; }
.mailbox-shortcut .avatar svg { width: 14px; height: 14px; }
.mailbox-shortcut .mailbox-check { visibility: hidden; font-size: 12px; }
.mailbox-shortcut:hover { background: #e6ecf2; }
.mailbox-shortcut[aria-current="true"] { color: #185d94; background: #dceaf8; font-weight: 650; }
.mailbox-shortcut[aria-current="true"] .mailbox-check { visibility: visible; }
.mailbox-shortcut[data-mailbox="all"] { margin-top: 5px; }
.sidebar .folders { flex: 0 0 auto; }
.sidebar-foot { padding-top: 18px; }
@media (min-width: 1181px) {
  .sidebar { padding-top: 16px; }
  button.account-switcher { min-height: 62px; margin-bottom: 12px; padding-block: 10px; flex: 0 0 auto; }
  .sidebar .folder { min-height: 40px; padding-block: 10px; margin-bottom: 2px; }
  .mailbox-directory { margin-top: 12px; padding-top: 12px; }
}
@media (max-width: 1180px) {
  .mailbox-shortcut { min-height: 44px; }
  .mailbox-shortcut > span:nth-child(2) { font-size: 13px; }
}
@media (max-width: 820px) {
  .header-mailbox-label { display: none; }
}