/*
 * 颜色邮箱系统 identity layer
 * Visual-only overrides shared by the administrator and alias workspaces.
 * Business behavior, permissions and responsive layout contracts stay in the
 * existing stylesheets.
 */

:root {
  --yanse-ink: #241d35;
  --yanse-ink-soft: #5f586d;
  --yanse-canvas: #f4f1f7;
  --yanse-panel: #ffffff;
  --yanse-line: #e8e2ed;
  --yanse-violet: #6f3dc0;
  --yanse-violet-dark: #432568;
  --yanse-coral: #f05e75;
  --yanse-mint: #30b896;
  --yanse-sidebar: #1b1628;
  --yanse-sidebar-soft: #2b2040;
}

body {
  color: var(--yanse-ink);
  background: var(--yanse-canvas);
}

.startup-screen {
  background:
    radial-gradient(circle at 20% 20%, rgba(240, 94, 117, 0.22), transparent 28%),
    radial-gradient(circle at 82% 74%, rgba(83, 184, 244, 0.2), transparent 30%),
    linear-gradient(145deg, #1a1428, #3f2567 60%, #6d3182);
  color: #fff;
}
.startup-screen img {
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
}
.startup-screen p {
  color: rgba(255, 255, 255, 0.66);
}
.startup-retry {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.button {
  border-radius: 12px;
}
.button.primary {
  background: linear-gradient(110deg, #312044, #6d3ca2);
  box-shadow: 0 8px 20px rgba(75, 42, 113, 0.22);
}
.button.primary:hover {
  background: linear-gradient(110deg, #251735, #5c318b);
}
.button.ghost {
  border-color: var(--yanse-line);
  background: #fff;
}
input:focus,
select:focus,
textarea:focus {
  border-color: #9167cc;
  box-shadow: 0 0 0 3px rgba(111, 61, 192, 0.1);
}

.modal {
  border: 1px solid rgba(67, 37, 104, 0.12);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(27, 22, 40, 0.24);
}
.modal::backdrop {
  background: rgba(24, 18, 36, 0.55);
  backdrop-filter: blur(5px);
}
.modal header {
  background: linear-gradient(90deg, #fbf9fd, #f6f1fb);
}
.modal header,
.modal footer {
  border-color: var(--yanse-line);
}
.modal header h3 {
  color: var(--yanse-ink);
}
.modal header > .icon-button.close-dialog {
  border-color: #e6deec;
  background: #fff;
}
.toast,
.toast[popover] {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  background: #21192f;
  box-shadow: 0 18px 48px rgba(27, 22, 40, 0.28);
}

@media (min-width: 701px) {
  .app-shell {
    grid-template-columns: 272px minmax(0, 1fr);
    gap: 0;
    background:
      radial-gradient(circle at 92% 0, rgba(151, 92, 213, 0.09), transparent 30rem),
      var(--yanse-canvas);
  }

  .sidebar {
    padding: 1.35rem 1rem 1rem;
    border-right: 0;
    background:
      radial-gradient(circle at 20% 6%, rgba(135, 73, 191, 0.42), transparent 12rem),
      linear-gradient(175deg, var(--yanse-sidebar-soft), var(--yanse-sidebar) 48%);
    color: #fff;
    box-shadow: 14px 0 44px rgba(36, 29, 53, 0.11);
  }
  .sidebar::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 150px;
    pointer-events: none;
    background: radial-gradient(circle at 12% 100%, rgba(240, 94, 117, 0.18), transparent 62%);
  }
  .sidebar .brand {
    position: relative;
    z-index: 1;
    gap: 0.8rem;
    padding: 0.15rem 0.65rem 1.65rem;
    color: #fff;
    font-size: 1.05rem;
  }
  .sidebar .brand-logo {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  }
  .compose-dock {
    position: relative;
    z-index: 1;
  }
  .sidebar .compose {
    width: calc(100% - 0.5rem);
    min-height: 48px;
    margin: 0 0.25rem 1.15rem;
    justify-content: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 15px;
    background: linear-gradient(105deg, #f36a7e, #9b56c8) !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(10, 6, 20, 0.25) !important;
  }
  .sidebar .compose:hover {
    border-color: rgba(255, 255, 255, 0.34);
    background: linear-gradient(105deg, #f7788b, #a967d1) !important;
    transform: translateY(-1px);
  }
  .nav {
    position: relative;
    z-index: 1;
    gap: 0.18rem;
  }
  .desktop-mail-nav-label,
  .admin-nav small {
    padding: 0.55rem 0.85rem 0.4rem;
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
  }
  .nav button {
    min-height: 42px;
    padding: 0.56rem 0.82rem;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.68);
  }
  .nav button:hover {
    background: rgba(255, 255, 255, 0.075);
    color: #fff;
  }
  .nav button.active {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.08));
    color: #fff;
    box-shadow: inset 3px 0 #ff7188;
  }
  .desktop-nav-icon {
    color: rgba(255, 255, 255, 0.7);
  }
  .nav button.active .desktop-nav-icon {
    color: #fff;
  }
  .nav button b {
    background: #f06a80;
    color: #fff;
  }
  .admin-nav {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .account-card {
    z-index: 2;
    margin: auto 0.2rem 0;
    padding: 0.75rem 0;
    border-color: rgba(255, 255, 255, 0.1);
  }
  .account-menu-trigger {
    padding: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.055);
  }
  .account-menu-trigger:hover,
  .account-menu-trigger[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.11);
  }
  .account-copy strong {
    color: #fff;
  }
  .account-copy small,
  .account-menu-chevron {
    color: rgba(255, 255, 255, 0.5);
  }
  .account-menu {
    left: 0;
    right: 0;
    border-color: #e6dfeb;
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(14, 9, 22, 0.35);
  }

  .workspace {
    background: transparent;
  }
  .topbar {
    min-height: 92px;
    flex-basis: 92px;
    padding: 1.35rem 1.5rem 1rem;
    background: transparent;
  }
  .search {
    min-width: min(46vw, 680px);
    height: 50px;
    border: 1px solid #e5dfeb;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 22px rgba(55, 39, 76, 0.06);
  }
  .search:focus-within {
    border-color: #9870ca;
    box-shadow: 0 0 0 4px rgba(111, 61, 192, 0.08), 0 12px 28px rgba(55, 39, 76, 0.08);
  }
  .topbar-refresh {
    width: 42px;
    height: 42px;
    border: 1px solid #e5dfeb;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.8);
    color: #665d70;
  }
  .topbar-refresh:hover,
  .topbar-refresh:focus-visible {
    background: #fff;
    color: var(--yanse-violet);
  }
  .content {
    padding: 0 1.5rem 1.5rem;
  }

  .gmail-shell,
  .message-page {
    border: 1px solid rgba(67, 37, 104, 0.08);
    border-radius: 22px;
    background: var(--yanse-panel);
    box-shadow: 0 14px 40px rgba(55, 39, 76, 0.08);
  }
  .list-toolbar {
    min-height: 56px;
    border-color: #eee9f1;
    background: linear-gradient(90deg, #fff, #fdfbfe);
  }
  .toolbar-action:hover,
  .list-pagination .page-button:hover:not(:disabled) {
    background: #f1ebf7;
    color: var(--yanse-violet);
  }
  .select-box.checked,
  .select-box.partial {
    border-color: var(--yanse-violet);
    background: var(--yanse-violet);
  }
  .gmail-row {
    border-color: #eee9f1;
    background: #fbfafd;
    color: var(--yanse-ink);
  }
  .gmail-row.unread {
    background: #fff;
    box-shadow: inset 3px 0 #8c5ac7;
  }
  .gmail-row.selected {
    background: #eee7f5;
  }
  .gmail-row:hover {
    background: #f8f3fb;
    box-shadow: inset 3px 0 #f06a80, 0 5px 16px rgba(67, 37, 104, 0.1);
  }
  .gmail-row .recipient-chip,
  .search-folder-chip,
  .mailbox-tag {
    background: #eee8f3;
    color: #655872;
  }
  .gmail-row .star.active,
  .detail-toolbar-star.active {
    color: #f3a621 !important;
  }
  .message-page .detail-toolbar,
  .message-footer-actions {
    border-color: #eee9f1;
    background: #fff;
  }
  .message-page .detail-toolbar .icon-button:hover,
  .detail-more-menu > summary:hover,
  .detail-more-menu[open] > summary {
    background: #f1ebf7;
    color: var(--yanse-violet);
  }
  .gmail-action-pill {
    border-color: #d9cfe2;
    color: #554b61;
  }
  .gmail-action-pill:hover {
    border-color: #9b75c9;
    background: #f7f2fa;
  }

  .toolbar,
  .blocked-senders-heading {
    margin-bottom: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid rgba(67, 37, 104, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 10px 30px rgba(55, 39, 76, 0.06);
  }
  .table-card,
  .card,
  .domain-row,
  .blocked-sender-row {
    border-color: rgba(67, 37, 104, 0.1);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(55, 39, 76, 0.055);
  }
  .table-card {
    overflow: hidden;
  }
  .data-table th {
    background: #f7f3fa;
    color: #71677c;
  }
  .data-table th,
  .data-table td {
    border-color: #eee9f1;
  }
  .data-table tbody tr:hover td {
    background: #fbf7fd;
  }
  .status.on {
    background: #e2f7f0;
    color: #168665;
  }
  .status.off {
    background: #f0edf2;
    color: #756b7e;
  }

  .compose-modal form {
    border-radius: 22px;
    overflow: hidden;
  }
  .compose-modal .compose-header {
    background: linear-gradient(100deg, #2d203d, #5f397d);
    color: #fff;
  }
  .compose-modal .compose-header h3 {
    color: #fff;
  }
  .compose-modal .compose-header .close-dialog {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
  }
  .compose-modal .compose-header .close-dialog::before,
  .compose-modal .compose-header .close-dialog::after {
    background: #fff;
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  .app-shell {
    grid-template-columns: 86px minmax(0, 1fr);
  }
  .sidebar {
    padding-inline: 0.6rem;
  }
  .sidebar .brand {
    justify-content: center;
    padding-inline: 0;
  }
  .sidebar .compose {
    width: 100%;
    margin-inline: 0;
    justify-content: center;
  }
}

@media (min-width: 901px) {
  /* Restore a true product header and a bottom account area. The legacy shell
   * merged both into one top card; this layout is intentionally distinct. */
  .sidebar > .brand {
    display: flex;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0.15rem 0.65rem 1.65rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
  }
  .sidebar > .compose-dock {
    order: initial;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .sidebar > .compose-dock .compose {
    width: calc(100% - 0.5rem);
    min-height: 48px;
    justify-content: flex-start;
    gap: 0.7rem;
    margin: 0 0.25rem 1.15rem;
    padding: 0.72rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 15px;
    background: linear-gradient(105deg, #f36a7e, #9b56c8) !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(10, 6, 20, 0.25) !important;
  }
  .sidebar > .compose-dock .compose:hover {
    border: 1px solid rgba(255, 255, 255, 0.34);
    background: linear-gradient(105deg, #f7788b, #a967d1) !important;
    box-shadow: 0 14px 30px rgba(10, 6, 20, 0.3) !important;
  }
  .sidebar > .compose-dock .desktop-compose-mark {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: none;
  }
  .sidebar > .account-card {
    order: initial;
    z-index: 35;
    width: auto;
    margin: auto 0.2rem 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .sidebar > .account-card .account-menu-trigger {
    display: grid;
    width: 100%;
    min-height: 54px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 0.55rem;
    padding: 0.52rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: none;
  }
  .sidebar > .account-card .account-menu-trigger:hover,
  .sidebar > .account-card .account-menu-trigger[aria-expanded="true"] {
    border-color: rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.11);
    box-shadow: none;
  }
  .sidebar > .account-card .avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 11px;
  }
  .sidebar > .account-card .account-copy strong {
    display: block;
    color: #fff;
    font-size: 0.8rem;
  }
  .sidebar > .account-card .account-copy small {
    max-width: 148px;
    margin-top: 0.12rem;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.68rem;
  }
  .sidebar > .account-card .account-menu-chevron::before {
    border-color: rgba(255, 255, 255, 0.55);
  }
  .sidebar > .account-card .account-menu {
    inset: auto 0 calc(100% + 0.4rem);
    border-radius: 14px;
  }
}

@media (max-width: 700px) {
  .topbar {
    background:
      radial-gradient(circle at 88% 10%, rgba(151, 92, 213, 0.42), transparent 9rem),
      linear-gradient(110deg, #21182f, #42285e);
    box-shadow: 0 8px 24px rgba(37, 25, 52, 0.19);
  }
  .mobile-nav-trigger {
    color: #fff;
  }
  .mobile-nav-trigger:active {
    background: rgba(255, 255, 255, 0.11);
  }
  .search {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 18px rgba(10, 5, 18, 0.16);
  }
  .mobile-account-trigger {
    background: rgba(255, 255, 255, 0.08);
  }
  .sidebar {
    border-right: 0;
    background:
      radial-gradient(circle at 16% 4%, rgba(135, 73, 191, 0.44), transparent 12rem),
      linear-gradient(175deg, var(--yanse-sidebar-soft), var(--yanse-sidebar) 50%);
    color: #fff;
    box-shadow: 14px 0 42px rgba(21, 14, 32, 0.35);
  }
  .sidebar .brand,
  .sidebar .account-copy strong {
    color: #fff;
  }
  .sidebar .compose {
    border-color: rgba(255, 255, 255, 0.16);
    background: linear-gradient(105deg, #f36a7e, #9b56c8) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(10, 6, 20, 0.25) !important;
  }
  .sidebar .nav button {
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7);
  }
  .sidebar .nav button:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }
  .sidebar .nav button.active {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    box-shadow: inset 3px 0 #ff7188;
  }
  .sidebar .admin-nav {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .sidebar .admin-nav small,
  .sidebar .desktop-mail-nav-label {
    color: rgba(255, 255, 255, 0.38);
  }
  .content,
  .gmail-shell {
    background: #f4f1f7;
  }
  .gmail-row {
    border-color: #e7e0eb;
    background: #faf8fc;
  }
  .gmail-row.unread {
    background: #fff;
    box-shadow: inset 3px 0 #8450bd;
  }
  .gmail-row.selected {
    background: #eee7f5;
  }
  .gmail-row .recipient-chip,
  .search-folder-chip,
  .mailbox-tag {
    background: #eee8f3;
    color: #655872;
  }
  .list-toolbar {
    border-color: #e7e0eb;
    background: #fff;
  }
  .message-page {
    background: #fff;
  }
  .message-page .detail-toolbar,
  .message-footer-actions {
    border-color: #e9e3ed;
  }
  .mobile-compose-button {
    background: linear-gradient(135deg, #f0647a, #7540ad);
    color: #fff;
    box-shadow: 0 12px 28px rgba(77, 42, 114, 0.3);
  }
  .mobile-account-menu {
    border-color: #e3dbe9;
    box-shadow: 0 18px 46px rgba(28, 20, 41, 0.27);
  }
  .mobile-pull-refresh {
    border-color: #dfd5e7;
    color: #6b5a78;
  }
  .modal {
    border-radius: 22px 22px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar .compose,
  .login-submit.button.primary {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
 * Workspace layout v2
 *
 * The desktop product is deliberately a top-navigation workspace rather than
 * a mail-client sidebar. This changes the visual silhouette for both admin and
 * alias accounts while preserving every existing DOM hook and permission rule.
 * -------------------------------------------------------------------------- */

@media (min-width: 901px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .app-shell:not(.hidden) {
    width: 100%;
    height: 100vh;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 76px minmax(0, 1fr);
    overflow: hidden;
  }

  .sidebar {
    position: relative;
    z-index: 50;
    top: auto;
    grid-row: 1;
    width: 100%;
    height: 76px;
    min-height: 76px;
    padding: 0 1.2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.7rem;
    overflow: visible;
    border: 0;
    background:
      radial-gradient(circle at 7% 0, rgba(240, 94, 117, 0.28), transparent 15rem),
      radial-gradient(circle at 92% 0, rgba(83, 184, 244, 0.18), transparent 16rem),
      linear-gradient(100deg, #1d152b 0%, #352049 52%, #43265a 100%);
    box-shadow: 0 8px 30px rgba(30, 20, 43, 0.22);
  }

  .sidebar::after {
    display: none;
  }

  .sidebar > .brand {
    width: auto;
    min-width: max-content;
    min-height: 0;
    flex: 0 0 auto;
    margin: 0 0.45rem 0 0;
    padding: 0;
    gap: 0.65rem;
  }

  .sidebar > .brand .brand-logo {
    width: 39px;
    height: 39px;
    border-radius: 12px;
  }

  .sidebar > .brand span:last-child {
    font-size: 0.94rem;
    white-space: nowrap;
  }

  .sidebar > .compose-dock {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
  }

  .sidebar > .compose-dock .compose {
    width: auto;
    min-width: 105px;
    min-height: 42px;
    margin: 0;
    padding: 0.48rem 0.82rem;
    gap: 0.55rem;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(8, 4, 14, 0.24) !important;
  }

  .sidebar > .compose-dock .desktop-compose-mark {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
    border-radius: 8px;
  }

  .sidebar > .nav {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.18rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .sidebar > .nav::-webkit-scrollbar {
    display: none;
  }

  .sidebar .desktop-mail-nav-label,
  .sidebar .admin-nav small {
    display: none;
  }

  .sidebar > .nav > button,
  .sidebar .admin-nav > button {
    min-width: max-content;
    min-height: 40px;
    flex: 0 0 auto;
    padding: 0.5rem 0.62rem;
    border-radius: 11px;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.77rem;
  }

  .sidebar > .nav > button:hover,
  .sidebar .admin-nav > button:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
  }

  .sidebar > .nav > button.active,
  .sidebar .admin-nav > button.active {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    box-shadow: inset 0 -3px #ff7890;
  }

  .sidebar .desktop-nav-entry {
    gap: 0.42rem;
  }

  .sidebar .desktop-nav-icon {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
    color: currentColor;
  }

  .sidebar .nav button b {
    min-width: 18px;
    height: 18px;
    margin-left: 0.2rem;
    padding: 0 0.3rem;
    background: #f36b82;
    font-size: 0.6rem;
  }

  .sidebar .admin-nav {
    min-width: max-content;
    flex: 0 0 auto;
    margin: 0 0 0 0.35rem;
    padding: 0 0 0 0.55rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.18rem;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }

  .sidebar > .account-card {
    width: 188px;
    min-width: 188px;
    flex: 0 0 188px;
    margin: 0 0 0 0.2rem;
    padding: 0 0 0 0.7rem;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }

  .sidebar > .account-card .account-menu-trigger {
    min-height: 48px;
    padding: 0.4rem 0.5rem;
    border-radius: 12px;
  }

  .sidebar > .account-card .account-copy small {
    max-width: 104px;
  }

  .sidebar > .account-card .account-menu {
    inset: calc(100% + 0.45rem) 0 auto;
    border-radius: 14px;
  }

  .workspace {
    grid-row: 2;
    width: 100%;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .topbar {
    min-height: 76px;
    flex: 0 0 76px;
    padding: 0.8rem 1.5rem;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.12)),
      transparent;
  }

  .search {
    width: min(760px, calc(100% - 70px));
    min-width: 340px;
    height: 48px;
    border-radius: 999px;
  }

  .content {
    min-height: 0;
    flex: 1 1 auto;
    padding: 0 1.5rem 1.5rem;
    overflow: auto;
  }

  .content:has(> .message-page) {
    overflow: hidden;
  }

  .gmail-shell,
  .message-page {
    height: 100%;
    min-height: 0;
    border-radius: 24px;
  }

  .gmail-shell {
    overflow: clip;
  }

  .list-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .toolbar,
  .blocked-senders-heading {
    border-radius: 20px;
  }

  .table-card,
  .domain-row,
  .blocked-sender-row,
  .card {
    border-radius: 20px;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .sidebar {
    padding-inline: 0.85rem;
    gap: 0.45rem;
  }

  .sidebar > .brand span:last-child,
  .sidebar > .account-card .account-copy,
  .sidebar > .compose-dock .desktop-compose-label {
    display: none;
  }

  .sidebar > .brand {
    margin-right: 0;
  }

  .sidebar > .compose-dock .compose {
    min-width: 43px;
    width: 43px;
    justify-content: center;
    padding: 0;
  }

  .sidebar > .account-card {
    width: 58px;
    min-width: 58px;
    flex-basis: 58px;
    padding-left: 0.55rem;
  }

  .sidebar > .account-card .account-menu-trigger {
    display: grid;
    grid-template-columns: 36px;
    justify-content: center;
    padding: 0.28rem;
  }

  .sidebar > .account-card .account-menu-chevron {
    display: none;
  }

  .sidebar > .account-card .account-menu {
    right: 0;
    left: auto;
    width: 190px;
  }
}

@media (max-width: 700px) {
  .gmail-list {
    padding: 0.38rem 0 0.7rem;
  }

  .gmail-row {
    width: calc(100% - 0.9rem);
    margin: 0.38rem 0.45rem;
    border: 1px solid #e5ddea;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(52, 34, 72, 0.055);
  }

  .gmail-row.unread {
    border-color: #d8cae4;
    box-shadow: inset 3px 0 #8450bd, 0 6px 18px rgba(52, 34, 72, 0.075);
  }

  .gmail-row:hover,
  .gmail-row:active {
    box-shadow: inset 3px 0 #f06a80, 0 7px 20px rgba(52, 34, 72, 0.1);
  }
}