platform-core-ng 21.1.0

package/styles/components/mail-client.scss

@@ -0,0 +1,2165 @@
+.mail-client-host {
+  display: block;
+  height: 100%;
+  min-height: 0;
+}
+
+.content-route-page--mail {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  padding-bottom: 13px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.content-route-page--mail > .mail-client-host {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.list-page-layout--mail-client {
+  --list-page-layout-sidebar-width: 200px;
+  --list-page-layout-gap: 0;
+  --list-page-layout-main-gap: 0;
+  --list-page-layout-main-padding: 0;
+  --list-page-layout-desktop-radius: 0;
+  --mail-client-list-column: minmax(300px, 360px);
+  --mail-client-toolbar-height: 52px;
+  --mail-client-list-header-height: 54px;
+  --mail-client-row-x-padding: 18px;
+  --mail-client-detail-x-padding: 24px;
+  --mail-client-compose-topbar-height: 52px;
+  --mail-client-compose-tabs-height: 52px;
+  --mail-client-compose-x-padding: 18px;
+  --mail-client-compose-control-height: 36px;
+  --mail-client-compose-gap: 12px;
+  --mail-client-compose-settings-width: 210px;
+  --mail-client-border-color: color-mix(
+    in srgb,
+    var(--color-border) 78%,
+    transparent
+  );
+  --mail-client-muted-color: var(--color-text-secondary);
+  --mail-client-star-active-color: var(--color-warning);
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: 8px 8px 0 0;
+  background: var(--color-surface);
+  box-shadow: 0 16px 36px rgba(25, 31, 37, 0.08);
+}
+.list-page-layout--mail-client .list-page-layout__grid {
+  display: grid;
+  grid-template-columns: var(--list-page-layout-sidebar-width) minmax(0, 1fr);
+  height: 100%;
+  min-height: 0;
+}
+.list-page-layout--mail-client .list-page-layout__sidebar {
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  border-right: 1px solid var(--mail-client-border-color);
+  background: #fff;
+}
+.list-page-layout--mail-client .list-page-sidebar {
+  display: grid;
+  height: 100%;
+  min-height: 0;
+  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
+  gap: 8px;
+  padding: 18px 18px 0;
+  overflow: hidden;
+  background: #fff;
+}
+.mail-client-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 36px;
+  color: var(--color-text-primary);
+  font-size: 18px;
+  font-weight: 800;
+}
+.mail-client-brand__mark,
+.mail-client-account__avatar,
+.mail-client-detail__avatar {
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
+  color: #fff;
+  background: linear-gradient(135deg, var(--color-primary) 0%, #2f64d6 100%);
+}
+.mail-client-brand__mark {
+  width: 28px;
+  height: 28px;
+  border-radius: 7px;
+  font-size: 16px;
+}
+.list-page-layout--mail-client .list-page-sidebar__actions {
+  grid-template-columns: minmax(0, 1fr);
+}
+.list-page-layout--mail-client .list-page-sidebar__actions button {
+  width: 100%;
+  height: 38px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 14px;
+  border: 0;
+  border-radius: 6px;
+  background: linear-gradient(
+    135deg,
+    var(--color-primary),
+    var(--color-primary-active)
+  );
+  color: var(--color-primary-contrast);
+  font-size: 15px;
+  font-weight: 800;
+  line-height: 1;
+  box-shadow: 0 8px 20px
+    color-mix(in srgb, var(--color-primary) 28%, transparent);
+}
+.list-page-layout--mail-client .list-page-sidebar__actions button lucide-icon {
+  flex: 0 0 auto;
+  color: currentColor;
+  line-height: 0;
+}
+.list-page-layout--mail-client .list-page-sidebar__actions button span {
+  line-height: 1;
+  white-space: nowrap;
+}
+.mail-client-nav-section {
+  display: grid;
+  gap: 2px;
+}
+.mail-client-nav-section__title {
+  padding: 0 8px;
+  color: color-mix(in srgb, var(--color-text-secondary) 86%, #27364a);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 24px;
+}
+.mail-client-account,
+.mail-client-labels button {
+  width: 100%;
+  min-width: 0;
+  min-height: 34px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: color-mix(in srgb, var(--color-text-secondary) 82%, #253247);
+  font-size: 15px;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+}
+.mail-client-account {
+  display: grid;
+  grid-template-columns: 22px minmax(0, 1fr) auto;
+  align-items: center;
+  justify-items: start;
+}
+.mail-client-labels button {
+  display: grid;
+  grid-template-columns: 22px minmax(0, 1fr);
+  align-items: center;
+  justify-items: start;
+  justify-content: stretch;
+  column-gap: 12px;
+}
+.mail-client-account:hover,
+.mail-client-labels button:hover {
+  background: color-mix(in srgb, var(--color-primary) 7%, #fff);
+  color: var(--color-primary);
+}
+.mail-client-account.is-active {
+  background: color-mix(in srgb, var(--color-primary) 13%, #fff);
+  color: var(--color-primary);
+  font-weight: 800;
+}
+.mail-client-account span:nth-child(2) {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mail-client-account__avatar {
+  width: 20px;
+  height: 20px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 800;
+}
+.mail-client-account:not(.is-active) .mail-client-account__avatar {
+  border-color: color-mix(in srgb, var(--color-text-muted) 55%, transparent);
+  background: transparent;
+  color: var(--color-text-secondary);
+}
+.mail-client-account s-badge {
+  margin-left: auto;
+  align-self: center;
+  justify-self: end;
+}
+.mail-client-account .badge__indicator {
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--color-primary);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 20px;
+  box-shadow: 0 4px 10px color-mix(in srgb, var(--color-primary) 18%, transparent);
+}
+.mail-client-account__count {
+  margin-left: auto;
+  justify-self: end;
+  color: var(--color-text-muted);
+  font-size: 13px;
+  font-weight: 700;
+}
+.list-page-layout--mail-client .list-page-sidebar__tree {
+  display: grid;
+  align-content: start;
+  gap: 2px;
+  min-height: 0;
+  overflow: visible;
+}
+.mail-client-labels {
+  align-self: stretch;
+  align-content: start;
+  min-height: 0;
+  padding-top: 12px;
+  overflow: hidden;
+}
+.mail-client-label-dot {
+  display: block;
+  justify-self: center;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+}
+.mail-client-label-text {
+  min-width: 0;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mail-client-label-dot--important {
+  background: var(--color-error);
+}
+.mail-client-label-dot--work {
+  background: var(--color-primary);
+}
+.mail-client-label-dot--personal {
+  background: var(--color-success);
+}
+.mail-client-label-dot--todo {
+  background: var(--color-warning);
+}
+.mail-client-labels__add {
+  color: var(--color-text-muted) !important;
+  font-weight: 500 !important;
+}
+.mail-client-labels__add-icon {
+  justify-self: center;
+  color: currentColor;
+}
+.mail-client-sidebar-footer {
+  min-height: 56px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  align-items: center;
+  gap: 8px;
+  margin: 8px -18px 0;
+  padding: 12px 18px;
+  border-top: 1px solid var(--mail-client-border-color);
+  background: rgba(255, 255, 255, 0.96);
+  box-sizing: border-box;
+}
+.mail-client-sidebar-footer button {
+  width: 34px;
+  height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  justify-self: center;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: color-mix(in srgb, var(--color-text-secondary) 82%, #253247);
+  cursor: pointer;
+}
+.mail-client-sidebar-footer button:hover {
+  background: color-mix(in srgb, var(--color-primary) 8%, #fff);
+  color: var(--color-primary);
+}
+.list-page-layout--mail-client .list-page-layout__main {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--color-surface);
+}
+.list-page-layout--mail-client .list-page-layout__header {
+  border-bottom: 1px solid var(--mail-client-border-color);
+  background: rgba(255, 255, 255, 0.96);
+}
+.list-page-layout--mail-client .mail-client-toolbar {
+  min-height: var(--mail-client-toolbar-height);
+  display: grid;
+  grid-template-columns: var(--mail-client-list-column) minmax(0, 1fr) auto;
+  grid-template-areas: 'left actions right';
+  align-items: center;
+  gap: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+.list-page-layout--mail-client .mail-client-toolbar__left,
+.list-page-layout--mail-client .mail-client-toolbar__actions,
+.list-page-layout--mail-client .mail-client-toolbar__right {
+  min-width: 0;
+  min-height: var(--mail-client-toolbar-height);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.list-page-layout--mail-client .mail-client-toolbar__left {
+  grid-area: left;
+  gap: 12px;
+  padding: 6px var(--mail-client-row-x-padding);
+  border-right: 1px solid var(--mail-client-border-color);
+  box-sizing: border-box;
+}
+.list-page-layout--mail-client .mail-client-toolbar__actions {
+  grid-area: actions;
+  justify-content: flex-end;
+  align-self: stretch;
+  padding: 6px 10px 6px var(--mail-client-row-x-padding);
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  box-sizing: border-box;
+}
+.list-page-layout--mail-client .mail-client-toolbar__actions::-webkit-scrollbar {
+  display: none;
+}
+.list-page-layout--mail-client .mail-client-toolbar__right {
+  grid-area: right;
+  align-self: stretch;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 6px var(--mail-client-row-x-padding) 6px 0;
+  box-sizing: border-box;
+}
+.mail-client-search {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1 1 280px;
+  min-width: 220px;
+  max-width: 420px;
+  height: 34px;
+  padding: 0 11px;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+  box-sizing: border-box;
+}
+.mail-client-search:focus-within {
+  border-color: color-mix(
+    in srgb,
+    var(--color-primary) 48%,
+    var(--color-border)
+  );
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--color-primary) 12%, transparent);
+}
+.mail-client-search input {
+  min-width: 0;
+  width: 100%;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--color-text-primary);
+  font: inherit;
+}
+.mail-client-search input::placeholder {
+  color: var(--color-text-muted);
+}
+.mail-client-search kbd {
+  flex: 0 0 auto;
+  color: var(--color-text-muted);
+  font-size: 12px;
+  font-family: inherit;
+}
+.list-page-layout--mail-client .mail-client-toolbar__left .mail-client-search {
+  flex: 1 1 auto;
+  max-width: none;
+}
+.list-page-layout--mail-client .mail-client-toolbar__left > .card__icon-button,
+.list-page-layout--mail-client .mail-client-toolbar__right > .card__icon-button {
+  flex: 0 0 30px;
+  width: 30px;
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+.list-page-layout--mail-client .mail-client-toolbar__actions {
+  gap: 8px;
+}
+.list-page-layout--mail-client .mail-client-toolbar__actions > button {
+  position: relative;
+  flex: 0 0 30px;
+  width: 30px;
+  min-width: 30px;
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border-color: transparent;
+  background: transparent;
+  color: var(--color-text-secondary);
+  box-shadow: none;
+}
+.list-page-layout--mail-client .mail-client-toolbar__actions > button:hover,
+.list-page-layout--mail-client .card__icon-button:hover {
+  background: var(--color-primary-subtle);
+  color: var(--color-primary);
+}
+.list-page-layout--mail-client .mail-client-toolbar__actions > button span {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+.list-page-layout--mail-client
+  .mail-client-toolbar__actions
+  > button
+  lucide-icon:last-child:not(:first-child) {
+  display: none;
+}
+.list-page-layout--mail-client .mail-client-toolbar lucide-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.list-page-layout--mail-client .mail-client-toolbar lucide-icon svg {
+  display: block;
+}
+.list-page-layout--mail-client .mail-client-toolbar__right {
+  gap: 8px;
+}
+.mail-client-profile {
+  position: relative;
+  width: 34px;
+  height: 34px;
+  flex: 0 0 34px;
+  display: inline-grid;
+  place-items: center;
+  border: 0;
+  border-radius: 999px;
+  background: linear-gradient(135deg, var(--color-primary), #6a86ff);
+  color: #fff;
+  font-size: 15px;
+  font-weight: 800;
+  box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 22%, transparent);
+  cursor: pointer;
+}
+.mail-client-profile i {
+  position: absolute;
+  right: 0;
+  bottom: 1px;
+  width: 9px;
+  height: 9px;
+  border: 2px solid #fff;
+  border-radius: 999px;
+  background: var(--color-success);
+}
+.list-page-layout--mail-client .list-page-layout__content {
+  min-height: 0;
+  overflow: hidden;
+}
+.list-page-layout--mail-client .list-page-layout__content-desktop {
+  display: grid;
+  grid-template-columns: var(--mail-client-list-column) minmax(0, 1fr);
+  height: 100%;
+  min-height: 0;
+  background: var(--color-surface);
+}
+.list-page-layout--mail-client .mail-client-list {
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  border-right: 1px solid var(--mail-client-border-color);
+  background: #fff;
+}
+.mail-client-list-header {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  min-height: var(--mail-client-list-header-height);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0 var(--mail-client-row-x-padding);
+  border-bottom: 1px solid var(--mail-client-border-color);
+  background: rgba(255, 255, 255, 0.98);
+}
+.mail-client-list-header h1 {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: 18px;
+  font-weight: 800;
+  line-height: 1.3;
+}
+.mail-client-list-header h1 span {
+  font-weight: 700;
+}
+.mail-client-filter {
+  position: relative;
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 4px;
+  color: var(--color-text-secondary);
+  font-size: 13px;
+  cursor: pointer;
+}
+.mail-client-filter select {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  opacity: 0;
+  cursor: pointer;
+}
+.list-page-layout--mail-client .mail-client-group {
+  display: none;
+}
+.list-page-layout--mail-client .mail-client-row__state {
+  display: inline-flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 3px;
+}
+.list-page-layout--mail-client .mail-client-row__state lucide-icon {
+  display: none;
+}
+.list-page-layout--mail-client input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--color-primary);
+}
+.list-page-layout--mail-client .mail-client-row__preview-text {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.list-page-layout--mail-client .mail-client-row__preview {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.list-page-layout--mail-client .mail-client-row__badges {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  height: 16px;
+  min-height: 0;
+  color: var(--color-text-muted);
+  pointer-events: none;
+}
+.list-page-layout--mail-client .mail-client-row__badges:empty {
+  display: none;
+}
+.list-page-layout--mail-client .mail-client-row__badges .badge__indicator {
+  width: 7px;
+  min-width: 7px;
+  height: 7px;
+  padding: 0;
+  border-radius: 999px;
+  background: var(--color-primary);
+  color: transparent;
+  overflow: hidden;
+  font-size: 0;
+}
+.list-page-layout--mail-client .mail-client-row__star {
+  width: 30px;
+  height: 30px;
+  color: var(--color-text-muted);
+}
+.mail-client-detail {
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
+  overflow: hidden;
+  background: var(--color-surface);
+}
+.mail-client-detail__header,
+.mail-client-detail__sender,
+.mail-client-detail__labels,
+.mail-client-detail__body,
+.mail-client-detail__attachments,
+.mail-client-detail__footer {
+  min-width: 0;
+  max-width: 100%;
+}
+.mail-client-detail__header,
+.mail-client-detail__sender,
+.mail-client-detail__footer {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+.mail-client-detail__header {
+  min-height: 88px;
+  justify-content: space-between;
+  padding: 18px var(--mail-client-detail-x-padding) 14px;
+  border-bottom: 1px solid var(--mail-client-border-color);
+}
+.mail-client-detail__subject {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.mail-client-detail__subject h2 {
+  margin: 0;
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: 20px;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mail-client-detail__meta {
+  display: flex;
+  gap: 8px;
+  min-width: 0;
+  margin-top: 7px;
+  color: var(--color-text-secondary);
+  font-size: 14px;
+}
+.mail-client-detail__meta span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mail-client-detail__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+}
+.list-page-layout--mail-client .card__icon-button {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  color: var(--color-text-secondary);
+}
+.mail-client-detail__sender {
+  min-height: 62px;
+  padding: 12px var(--mail-client-detail-x-padding);
+  border-bottom: 1px solid var(--mail-client-border-color);
+}
+.mail-client-detail__avatar {
+  width: 38px;
+  height: 38px;
+  border-radius: 999px;
+  font-size: 18px;
+  font-weight: 800;
+}
+.mail-client-detail__identity {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: grid;
+  gap: 4px;
+}
+.mail-client-detail__identity strong,
+.mail-client-detail__identity span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mail-client-detail__identity strong {
+  color: var(--color-text-primary);
+  font-size: 15px;
+}
+.mail-client-detail__identity span,
+.mail-client-detail__sender time {
+  color: var(--color-text-secondary);
+  font-size: 14px;
+}
+.mail-client-detail__sender time {
+  margin-left: auto;
+  white-space: nowrap;
+}
+.mail-client-detail__labels {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 12px var(--mail-client-detail-x-padding) 0;
+}
+.mail-client-detail__labels span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 24px;
+  padding: 0 9px;
+  border-radius: 999px;
+  background: var(--color-primary-subtle);
+  color: var(--color-primary);
+  font-size: 12px;
+  font-weight: 700;
+}
+.mail-client-detail__body {
+  min-height: 0;
+  overflow: auto;
+  padding: 20px var(--mail-client-detail-x-padding);
+  color: var(--color-text-primary);
+  font-size: 15px;
+  line-height: 1.7;
+  overflow-wrap: anywhere;
+}
+.mail-client-detail__body p {
+  margin: 0 0 12px;
+}
+.mail-client-detail__html {
+  max-width: 100%;
+}
+.mail-client-detail__html :first-child {
+  margin-top: 0;
+}
+.mail-client-detail__html :last-child {
+  margin-bottom: 0;
+}
+.mail-client-detail__attachments {
+  display: grid;
+  gap: 8px;
+  padding: 0 var(--mail-client-detail-x-padding) 14px;
+}
+.mail-client-detail__attachments h3 {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: 13px;
+  font-weight: 700;
+}
+.mail-client-detail__attachments button {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  min-height: 38px;
+  padding: 0 12px;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  text-align: left;
+  cursor: pointer;
+}
+.mail-client-detail__attachments span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mail-client-detail__attachments small {
+  color: var(--color-text-secondary);
+}
+.mail-client-detail__footer {
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 12px var(--mail-client-detail-x-padding) 20px;
+}
+.mail-client-detail__footer button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 92px;
+  height: 38px;
+  padding: 0 14px;
+  border-color: var(--mail-client-border-color);
+  border-radius: 6px;
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+  box-shadow: none;
+}
+.mail-client-detail__footer button:hover {
+  border-color: color-mix(in srgb, var(--color-primary) 42%, var(--mail-client-border-color));
+  background: var(--color-primary-subtle);
+  color: var(--color-primary);
+}
+.mail-client-detail__footer button lucide-icon {
+  flex: 0 0 auto;
+  color: currentColor;
+  line-height: 0;
+}
+.mail-client-detail__footer button span {
+  line-height: 1;
+  white-space: nowrap;
+}
+.mail-client-detail__empty {
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 8px;
+  height: 100%;
+  min-height: 320px;
+  color: var(--color-text-secondary);
+  text-align: center;
+}
+.mail-client-detail__empty strong {
+  color: var(--color-text-primary);
+  font-size: 16px;
+}
+
+.list-page-layout--mail-client {
+  --list-page-layout-sidebar-width: 200px;
+  --mail-client-list-column: minmax(320px, 352px);
+  --mail-client-list-header-height: 56px;
+  --mail-client-row-x-padding: 16px;
+  --mail-client-detail-x-padding: 16px;
+  --mail-client-accent: #6266f1;
+  --mail-client-border-color: #e7ebf3;
+  border-color: #e4e8f0;
+  background: #fff;
+  box-shadow:
+    0 1px 2px rgba(20, 28, 44, 0.06),
+    0 8px 20px rgba(31, 41, 55, 0.04);
+}
+
+.list-page-layout--mail-client .list-page-layout__sidebar,
+.list-page-layout--mail-client .mail-client-list,
+.mail-client-detail,
+.list-page-layout--mail-client .list-page-layout__content-desktop {
+  background: #fff;
+}
+
+.list-page-layout--mail-client .list-page-sidebar {
+  grid-template-rows: auto auto auto auto minmax(0, 1fr);
+  gap: 10px;
+  padding: 14px 10px 0;
+}
+
+.mail-client-sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+  min-height: 40px;
+  padding: 0;
+}
+
+.mail-client-sidebar-header h1 {
+  margin: 0;
+  color: #111827;
+  font-size: 17px;
+  font-weight: 800;
+  line-height: 1.2;
+}
+
+.mail-client-sidebar-header button {
+  flex: 0 0 auto;
+  height: 34px;
+  min-width: 66px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 10px;
+  border: 1px solid #e3e7f0;
+  border-radius: 8px;
+  background: #fff;
+  color: var(--mail-client-accent);
+  font-size: 14px;
+  font-weight: 800;
+  box-shadow: 0 1px 2px rgba(34, 42, 66, 0.04);
+  cursor: pointer;
+}
+
+.mail-client-sidebar-header button:hover,
+.mail-client-sidebar-header button.is-active {
+  border-color: color-mix(in srgb, var(--mail-client-accent) 24%, #e3e7f0);
+  background: color-mix(in srgb, var(--mail-client-accent) 7%, #fff);
+}
+
+.mail-client-sidebar-search {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: none;
+  min-width: 0;
+  height: 34px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 8px;
+  background: #f4f6fa;
+  color: #8b95a7;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
+}
+
+.mail-client-sidebar-search input {
+  font-size: 14px;
+}
+
+.mail-client-sidebar-search kbd {
+  display: none;
+}
+
+.mail-client-nav-section__title {
+  padding: 0 6px;
+  color: #8b95a7;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.list-page-layout--mail-client .list-page-sidebar__tree {
+  gap: 3px;
+}
+
+m-list.mail-client-folder-list > .m-list.m-list--menu {
+  border: 0;
+  border-radius: 0;
+  overflow: visible;
+  background: transparent;
+  box-shadow: none;
+}
+
+.mail-client-folder-item .m-item {
+  --m-item-avatar-size: 20px;
+  --m-item-gap: 8px;
+  --m-item-min-height: 42px;
+  min-height: 42px;
+  padding: 0 6px;
+  border-radius: 7px;
+  background: transparent;
+}
+
+.mail-client-folder-item .m-item__row--primary {
+  column-gap: 8px;
+}
+
+.mail-client-folder-item .m-item--clickable:hover {
+  background: #f5f7fb;
+}
+
+.mail-client-folder-item .m-item.m-item--active {
+  background: #f1f0ff;
+  color: var(--mail-client-accent);
+}
+
+.mail-client-folder-item .m-item__title {
+  color: inherit;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.mail-client-folder-item .m-item__meta {
+  color: #8e99aa;
+  max-width: 28px;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.mail-client-folder-item .m-item.m-item--active .m-item__title,
+.mail-client-folder-item .m-item.m-item--active .m-item__meta,
+.mail-client-folder-item .m-item.m-item--active lucide-icon {
+  color: var(--mail-client-accent);
+}
+
+.mail-client-labels {
+  padding-top: 4px;
+}
+
+.mail-client-labels button {
+  min-height: 36px;
+  padding: 0 6px;
+  border-radius: 8px;
+  color: #344054;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.mail-client-label-dot {
+  width: 9px;
+  height: 9px;
+}
+
+.mail-client-sidebar-footer {
+  display: none;
+}
+
+.list-page-layout--mail-client:not(.list-page-layout--mail-compose) .list-page-layout__main {
+  grid-template-rows: minmax(0, 1fr);
+}
+
+.list-page-layout--mail-client:not(.list-page-layout--mail-compose) .list-page-layout__header {
+  display: none;
+}
+
+.list-page-layout--mail-client .mail-client-list {
+  border-right-color: var(--mail-client-border-color);
+}
+
+.mail-client-list-header {
+  align-items: flex-start;
+  min-height: var(--mail-client-list-header-height);
+  padding: 14px var(--mail-client-row-x-padding) 8px;
+  border-bottom: 0;
+  background: rgba(255, 255, 255, 0.98);
+}
+
+.mail-client-list-header h1 {
+  font-size: 18px;
+  line-height: 1.2;
+}
+
+.mail-client-list-header h1 span {
+  color: #111827;
+}
+
+.mail-client-filter {
+  height: 28px;
+  margin-top: -1px;
+  padding: 0;
+  color: #7b8496;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.mail-client-message-list .m-list {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.mail-client-message-list .mail-client-row .m-item {
+  width: auto;
+  min-height: 76px;
+  margin: 0;
+  padding: 10px 16px;
+  border-radius: 0;
+}
+
+.mail-client-message-list .mail-client-row .m-item--clickable:hover {
+  background: #f7f8fc;
+}
+
+.mail-client-message-list .mail-client-row .m-item--active {
+  background: linear-gradient(135deg, #f0efff, #f7f7ff);
+  box-shadow: none;
+}
+
+.mail-client-message-list .mail-client-row .m-item--active::after {
+  display: block;
+}
+
+.mail-client-message-list .mail-client-row .m-item--bordered::after {
+  right: 16px;
+  left: 52px;
+  background: #eef1f6;
+}
+
+.mail-client-message-list .mail-client-row .m-item__body {
+  gap: 4px;
+}
+
+.mail-client-message-list .mail-client-row .m-item__title {
+  color: #1f2937;
+  font-size: 16px;
+  font-weight: 800;
+  line-height: 20px;
+}
+
+.mail-client-message-list .mail-client-row .m-item__meta {
+  max-width: 56px;
+  color: #7f889a;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.mail-client-message-list .mail-client-row .m-item__description {
+  color: #344054;
+  font-size: 14px;
+  font-weight: 650;
+  line-height: 20px;
+}
+
+.mail-client-message-list .mail-client-row .m-item__footer {
+  color: #8b95a7;
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.list-page-layout--mail-client .mail-client-row__state {
+  width: 24px;
+  height: 24px;
+  flex: 0 0 24px;
+  padding-top: 3px;
+}
+
+.list-page-layout--mail-client input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+}
+
+.list-page-layout--mail-client .mail-client-row__star {
+  width: 28px;
+  height: 28px;
+}
+
+.mail-client-detail {
+  grid-template-rows: 44px 56px auto auto minmax(0, 1fr) auto auto;
+}
+
+.mail-client-detail__toolbar {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 5px var(--mail-client-detail-x-padding);
+  box-sizing: border-box;
+}
+
+.mail-client-detail__actions {
+  gap: 8px;
+}
+
+.list-page-layout--mail-client .card__icon-button {
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #3b4455;
+  box-shadow: none;
+}
+
+.list-page-layout--mail-client .card__icon-button:hover {
+  background: #f4f6fb;
+  color: var(--color-primary);
+}
+
+.mail-client-detail__sender {
+  min-height: 56px;
+  padding: 0 var(--mail-client-detail-x-padding);
+  border-bottom: 0;
+}
+
+.mail-client-detail__avatar {
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, #6574ff, #4f46e5);
+  font-size: 16px;
+}
+
+.mail-client-detail__identity {
+  gap: 5px;
+}
+
+.mail-client-detail__identity strong {
+  color: #1f2937;
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.mail-client-detail__identity span,
+.mail-client-detail__sender time {
+  color: #8b95a7;
+  font-size: 13px;
+}
+
+.mail-client-detail__sender time {
+  align-self: flex-start;
+  padding-top: 4px;
+}
+
+.mail-client-detail__header {
+  min-height: 0;
+  display: block;
+  padding: 12px var(--mail-client-detail-x-padding) 10px;
+  border-bottom: 0;
+}
+
+.mail-client-detail__subject {
+  display: grid;
+  gap: 8px;
+}
+
+.mail-client-detail__subject h2 {
+  color: #111827;
+  font-size: 18px;
+  font-weight: 800;
+  line-height: 1.35;
+  white-space: normal;
+}
+
+.mail-client-detail__mailbox-chip {
+  justify-self: start;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 12px;
+  border-radius: 999px;
+  background: #f1f3f6;
+  color: #8b95a7;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.mail-client-detail__labels {
+  padding: 0 var(--mail-client-detail-x-padding) 2px;
+}
+
+.mail-client-detail__body {
+  padding: 12px var(--mail-client-detail-x-padding);
+  color: #374151;
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.mail-client-detail__body p {
+  margin-bottom: 12px;
+}
+
+.mail-client-detail__attachments {
+  padding: 0 var(--mail-client-detail-x-padding) 14px;
+}
+
+.mail-client-detail__footer {
+  display: grid;
+  gap: 8px;
+  margin: 0 var(--mail-client-detail-x-padding) 16px;
+  padding: 12px;
+  border: 1px solid #e4e8f0;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 4px 12px rgba(31, 41, 55, 0.04);
+}
+
+.mail-client-detail__footer button {
+  min-width: 0;
+  height: 34px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.mail-client-detail__footer .mail-client-reply-box {
+  width: 100%;
+  height: 36px;
+  justify-content: flex-start;
+  color: #a0a8b8;
+  font-size: 14px;
+  font-weight: 700;
+  text-align: left;
+}
+
+.mail-client-reply-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.mail-client-reply-tools {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.mail-client-detail__footer .mail-client-reply-tools button {
+  width: 28px;
+  height: 28px;
+  display: inline-grid;
+  place-items: center;
+  color: #8b95a7;
+}
+
+.mail-client-detail__footer .mail-client-reply-tools button:hover {
+  color: var(--color-primary);
+}
+
+.mail-client-detail__footer .mail-client-reply-send {
+  width: 72px;
+  height: 44px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #6d77ff, #5b5ff0);
+  color: #fff;
+  font-size: 16px;
+  font-weight: 800;
+  box-shadow: 0 4px 12px rgba(91, 95, 240, 0.14);
+}
+
+.list-page-layout--mail-compose .mail-client-toolbar {
+  display: none;
+}
+
+.list-page-layout--mail-compose {
+  --mail-client-compose-topbar-height: 44px;
+  --mail-client-compose-tabs-height: 44px;
+  --mail-client-compose-x-padding: 16px;
+  --mail-client-compose-control-height: 36px;
+  --mail-client-compose-gap: 12px;
+  --mail-client-compose-settings-width: 224px;
+  --mail-client-compose-field-label-width: 56px;
+  --mail-client-compose-soft-border: #e7ebf3;
+  --mail-client-compose-muted-bg: #f7f9fc;
+  --mail-client-compose-muted-text: #98a2b3;
+}
+
+.list-page-layout--mail-compose .list-page-layout__grid {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.list-page-layout--mail-compose .list-page-layout__sidebar {
+  display: none;
+}
+
+.list-page-layout--mail-compose .list-page-layout__header {
+  min-height: var(--mail-client-compose-topbar-height);
+}
+
+.list-page-layout--mail-compose .list-page-layout__content-desktop {
+  display: block;
+  overflow: hidden;
+}
+
+.list-page-layout--mail-compose .list-page-sidebar__actions button.is-active {
+  box-shadow:
+    0 4px 12px color-mix(in srgb, var(--color-primary) 18%, transparent),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.36);
+}
+
+.mail-client-compose-topbar,
+.mail-client-compose-tabs,
+.mail-client-compose-sendbar,
+.mail-client-compose-grid,
+.mail-client-compose-formatbar,
+.mail-client-compose-editor-footer,
+.mail-client-compose-attachments footer,
+.mail-client-compose-topbar__actions,
+.mail-client-compose-send,
+.mail-client-compose-settings__row {
+  display: flex;
+  align-items: center;
+}
+
+.mail-client-compose-topbar {
+  min-height: var(--mail-client-compose-topbar-height);
+  justify-content: space-between;
+  gap: var(--mail-client-compose-gap);
+  padding: 0 var(--mail-client-compose-x-padding);
+  box-sizing: border-box;
+}
+
+.mail-client-compose-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 70px;
+  height: 36px;
+  padding: 0 8px 0 0;
+  border: 0;
+  background: transparent;
+  color: #344054;
+  font-size: 14px;
+  font-weight: 700;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.mail-client-compose-search {
+  flex: 0 1 320px;
+  height: 36px;
+  margin-left: auto;
+  margin-right: auto;
+  border-color: #e2e6ef;
+  border-radius: 8px;
+  background: #f7f8fc;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.9),
+    0 1px 2px rgba(31, 41, 55, 0.03);
+}
+
+.mail-client-compose-topbar__actions {
+  justify-content: flex-end;
+  gap: 8px;
+  min-width: 0;
+}
+
+.mail-client-compose-notify {
+  position: relative;
+}
+
+.mail-client-compose-notify span {
+  position: absolute;
+  top: -3px;
+  right: -2px;
+  min-width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  background: var(--color-error);
+  color: #fff;
+  font-size: 10px;
+  line-height: 16px;
+}
+
+.mail-client-compose-profile {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 58px;
+  height: 36px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+
+.mail-client-compose-profile > span {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #6ea8ff, #3667f7);
+  color: #fff;
+  font-weight: 800;
+}
+
+.mail-client-compose-profile i {
+  width: 9px;
+  height: 9px;
+  margin-left: -14px;
+  margin-top: 20px;
+  border: 2px solid #fff;
+  border-radius: 999px;
+  background: var(--color-success);
+}
+
+.mail-client-compose-page {
+  height: 100%;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  overflow: hidden;
+  background: #fff;
+}
+
+.mail-client-compose-tabs {
+  justify-content: space-between;
+  gap: var(--mail-client-compose-gap);
+  min-height: var(--mail-client-compose-tabs-height);
+  padding: 0 var(--mail-client-compose-x-padding);
+  border-top: 1px solid #eef1f6;
+  border-bottom: 1px solid #eef1f6;
+  background: #fff;
+  box-sizing: border-box;
+}
+
+.mail-client-compose-tabs nav {
+  display: flex;
+  align-items: stretch;
+  gap: 20px;
+  align-self: stretch;
+  min-width: 0;
+}
+
+.mail-client-compose-tabs nav button {
+  position: relative;
+  min-width: 78px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #4b5565;
+  font-size: 15px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.mail-client-compose-tabs nav button.is-active {
+  color: var(--color-primary);
+}
+
+.mail-client-compose-tabs nav button.is-active::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 3px;
+  border-radius: 999px 999px 0 0;
+  background: var(--color-primary);
+}
+
+.mail-client-compose-tabs nav button lucide-icon {
+  margin-left: 6px;
+  vertical-align: -2px;
+}
+
+.mail-client-compose-sendbar {
+  justify-content: flex-end;
+  gap: 10px;
+  flex: 0 0 auto;
+}
+
+.mail-client-compose-save {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 36px;
+  min-width: 100px;
+  justify-content: center;
+  padding: 0 16px;
+  border: 1px solid #e5e9f2;
+  border-radius: 8px;
+  background: #fff;
+  color: #344054;
+  font-size: 14px;
+  font-weight: 800;
+  box-shadow: 0 1px 2px rgba(31, 41, 55, 0.04);
+  cursor: pointer;
+}
+
+.mail-client-compose-save:disabled,
+.mail-client-compose-send button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.mail-client-compose-send {
+  overflow: hidden;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 18%, transparent);
+}
+
+.mail-client-compose-send button {
+  height: 40px;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.mail-client-compose-send button:first-child {
+  min-width: 76px;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.mail-client-compose-send button:last-child {
+  width: 40px;
+  min-width: 40px;
+  border-left: 1px solid rgba(255, 255, 255, 0.28);
+  padding: 0;
+}
+
+.mail-client-compose-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) var(--mail-client-compose-settings-width);
+  align-items: stretch;
+  gap: var(--mail-client-compose-gap);
+  min-height: 0;
+  padding: 12px var(--mail-client-compose-x-padding) 16px;
+  overflow: auto;
+  background: #fff;
+}
+
+.mail-client-compose-editor {
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto auto auto minmax(260px, 1fr) auto;
+  gap: 12px;
+  overflow: visible;
+}
+
+.mail-client-compose-field {
+  display: grid;
+  grid-template-columns: var(--mail-client-compose-field-label-width) minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+}
+
+.mail-client-compose-field > label {
+  color: #1f2937;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.mail-client-compose-field--cc {
+  grid-template-columns: var(--mail-client-compose-field-label-width) minmax(0, 1fr);
+}
+
+.mail-client-compose-recipients,
+.mail-client-compose-subject,
+.mail-client-compose-settings select,
+.mail-client-compose-settings input[type="text"] {
+  min-height: var(--mail-client-compose-control-height);
+  border: 1px solid var(--mail-client-compose-soft-border);
+  border-radius: 8px;
+  background: #fff;
+  box-sizing: border-box;
+}
+
+.mail-client-compose-recipients {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+  padding: 4px 12px;
+}
+
+.mail-client-compose-recipients:focus-within,
+.mail-client-compose-subject:focus,
+.mail-client-compose-settings select:focus,
+.mail-client-compose-settings input[type="text"]:focus {
+  border-color: color-mix(
+    in srgb,
+    var(--color-primary) 48%,
+    var(--color-border)
+  );
+  outline: 0;
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--color-primary) 12%, transparent);
+}
+
+.mail-client-compose-recipients input,
+.mail-client-compose-subject {
+  min-width: 160px;
+  flex: 1 1 160px;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--color-text-primary);
+  font: inherit;
+}
+
+.mail-client-compose-subject {
+  width: 100%;
+  padding: 0 12px;
+}
+
+.mail-client-compose-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: min(320px, 100%);
+  height: 28px;
+  padding: 0 8px 0 10px;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-surface-muted);
+  color: var(--color-text-primary);
+  font-weight: 600;
+}
+
+.mail-client-compose-chip span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mail-client-compose-add-cc {
+  height: 32px;
+  padding: 0 2px;
+  border: 0;
+  background: transparent;
+  color: var(--color-primary);
+  font-size: 14px;
+  font-weight: 800;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.mail-client-compose-card {
+  min-width: 0;
+  border: 1px solid var(--mail-client-compose-soft-border);
+  border-radius: 8px;
+  background: #fff;
+}
+
+.mail-client-compose-card--editor {
+  min-height: 260px;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  overflow: hidden;
+  box-shadow: none;
+}
+
+.mail-client-compose-formatbar {
+  flex-wrap: wrap;
+  gap: 6px;
+  min-height: 44px;
+  padding: 8px 12px;
+  border-bottom: 1px solid #eef1f6;
+  box-sizing: border-box;
+}
+
+.mail-client-compose-formatbar button,
+.mail-client-compose-formatbar select {
+  height: 28px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: #344054;
+  font: inherit;
+}
+
+.mail-client-compose-formatbar button {
+  min-width: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 0 6px;
+  cursor: pointer;
+}
+
+.mail-client-compose-formatbar button:hover,
+.mail-client-compose-formatbar select:hover {
+  border-color: #e5e9f2;
+  background: #f6f8fb;
+}
+
+.mail-client-compose-formatbar select {
+  min-width: 62px;
+  padding: 0 8px;
+}
+
+.mail-client-compose-text-color {
+  font-weight: 800;
+  text-decoration: underline;
+  text-decoration-color: var(--color-primary);
+  text-decoration-thickness: 2px;
+}
+
+.mail-client-compose-body {
+  min-height: 180px;
+  height: 100%;
+  padding: 16px;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: #fff !important;
+  color: #1f2937;
+  font-size: 14px;
+  line-height: 1.7;
+  overflow: auto;
+  box-shadow: none !important;
+}
+
+.mail-client-compose-body:empty::before {
+  content: attr(data-placeholder);
+  color: var(--color-text-muted);
+}
+
+.mail-client-compose-body table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.mail-client-compose-body td {
+  min-width: 80px;
+  min-height: 28px;
+  padding: 6px;
+  border: 1px solid var(--color-border);
+}
+
+.mail-client-compose-editor-footer {
+  justify-content: flex-end;
+  gap: 4px;
+  min-height: 34px;
+  padding: 0 12px;
+  border-top: 1px solid #eef1f6;
+  color: var(--mail-client-compose-muted-text);
+  font-size: 14px;
+}
+
+.mail-client-compose-attachments {
+  display: grid;
+  gap: 10px;
+  min-height: 96px;
+  padding: 12px;
+}
+
+.mail-client-compose-attachments header strong {
+  color: #1f2937;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.mail-client-compose-attachment-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 8px;
+}
+
+.mail-client-compose-attachment {
+  display: grid;
+  grid-template-columns: 26px minmax(0, 1fr) 26px;
+  align-items: center;
+  gap: 8px;
+  min-height: 48px;
+  padding: 6px 8px;
+  border: 1px solid var(--mail-client-compose-soft-border);
+  border-radius: 8px;
+  background: var(--mail-client-compose-muted-bg);
+  box-sizing: border-box;
+}
+
+.mail-client-compose-attachment__type {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 30px;
+  border-radius: 5px;
+  background: var(--color-success);
+  color: #fff;
+  font-weight: 800;
+}
+
+.mail-client-compose-attachment span:nth-child(2) {
+  min-width: 0;
+  display: grid;
+  gap: 2px;
+}
+
+.mail-client-compose-attachment strong,
+.mail-client-compose-attachment small {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mail-client-compose-attachment small {
+  color: var(--color-text-secondary);
+}
+
+.mail-client-compose-attachment button {
+  width: 26px;
+  height: 26px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+
+.mail-client-compose-attachments footer {
+  justify-content: space-between;
+  gap: 10px;
+  flex-wrap: wrap;
+  color: var(--mail-client-compose-muted-text);
+  font-size: 13px;
+}
+
+.mail-client-compose-attachments footer button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.mail-client-compose-settings {
+  width: 100%;
+  min-width: 0;
+  display: grid;
+  align-content: start;
+  gap: 0;
+  overflow: auto;
+  border: 1px solid var(--mail-client-compose-soft-border);
+  border-radius: 8px;
+  background: #fbfcff;
+}
+
+.mail-client-compose-settings > label,
+.mail-client-compose-settings > section {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border-bottom: 1px solid #eef1f6;
+}
+
+.mail-client-compose-settings > label > span,
+.mail-client-compose-settings strong {
+  color: #344054;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.mail-client-compose-settings select,
+.mail-client-compose-settings input[type="text"] {
+  width: 100%;
+  height: 36px;
+  padding: 0 12px;
+  color: #344054;
+  font: inherit;
+}
+
+.mail-client-compose-settings input[type="text"]:disabled {
+  color: var(--mail-client-compose-muted-text);
+  background: #fff;
+}
+
+.mail-client-compose-settings__row {
+  justify-content: space-between;
+}
+
+.mail-client-compose-switch {
+  position: relative;
+  width: 32px;
+  height: 18px;
+}
+
+.mail-client-compose-switch input {
+  position: absolute;
+  opacity: 0;
+}
+
+.mail-client-compose-switch span {
+  display: block;
+  width: 32px;
+  height: 18px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-text-muted) 30%, #fff);
+}
+
+.mail-client-compose-switch span::after {
+  content: "";
+  display: block;
+  width: 14px;
+  height: 14px;
+  margin: 2px;
+  border-radius: 999px;
+  background: #fff;
+  transition: transform 160ms ease;
+}
+
+.mail-client-compose-switch input:checked + span {
+  background: var(--color-primary);
+}
+
+.mail-client-compose-switch input:checked + span::after {
+  transform: translateX(14px);
+}
+
+.mail-client-compose-date {
+  position: relative;
+}
+
+.mail-client-compose-date lucide-icon {
+  position: absolute;
+  right: 14px;
+  top: 50%;
+  color: var(--mail-client-compose-muted-text);
+  transform: translateY(-50%);
+}
+
+.mail-client-compose-check {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #667085;
+  font-size: 14px;
+}
+
+.mail-client-compose-check input {
+  accent-color: var(--color-primary);
+}
+
+.mail-client-compose-settings > button {
+  justify-self: start;
+  margin: 12px;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+@media (max-width: 1320px) {
+  .list-page-layout--mail-client {
+    --list-page-layout-sidebar-width: 200px;
+    --mail-client-list-column: minmax(300px, 360px);
+  }
+
+  .list-page-layout--mail-client .list-page-layout__content-desktop {
+    grid-template-columns: var(--mail-client-list-column) minmax(0, 1fr);
+  }
+
+  .list-page-layout--mail-client .mail-client-toolbar__right .card__text {
+    display: none;
+  }
+
+  .mail-client-compose-settings {
+    flex-basis: 210px;
+  }
+}
+
+@media (max-width: 1180px) {
+  .list-page-layout--mail-client .mail-client-toolbar {
+    min-height: var(--mail-client-toolbar-height);
+    grid-template-columns: var(--mail-client-list-column) minmax(0, 1fr) auto;
+    gap: 0;
+  }
+
+  .list-page-layout--mail-client .mail-client-toolbar__actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+
+  .list-page-layout--mail-client .mail-client-toolbar__actions > button,
+  .list-page-layout--mail-client .mail-client-toolbar__left > .card__icon-button,
+  .list-page-layout--mail-client .mail-client-toolbar__right > .card__icon-button {
+    flex-basis: 30px;
+    width: 30px;
+    min-width: 30px;
+    height: 30px;
+  }
+
+  .mail-client-profile {
+    width: 34px;
+    height: 34px;
+    flex-basis: 34px;
+  }
+}
+
+@media (max-width: 1080px) {
+  .list-page-layout--mail-client {
+    --mail-client-list-column: minmax(280px, 340px);
+  }
+
+  .list-page-layout--mail-client .mail-client-toolbar {
+    min-height: calc(var(--mail-client-toolbar-height) * 2);
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      'left right'
+      'actions actions';
+    align-content: center;
+  }
+
+  .list-page-layout--mail-client .mail-client-toolbar__actions {
+    justify-content: flex-start;
+  }
+
+  .list-page-layout--mail-client .list-page-layout__content-desktop {
+    grid-template-columns: var(--mail-client-list-column) minmax(0, 1.05fr);
+  }
+
+  .mail-client-detail__header,
+  .mail-client-detail__sender,
+  .mail-client-detail__body,
+  .mail-client-detail__attachments,
+  .mail-client-detail__footer {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
+  .mail-client-compose-grid {
+    grid-template-columns: minmax(0, 1fr);
+    overflow: auto;
+  }
+
+  .mail-client-compose-settings {
+    width: 100%;
+  }
+}
+
+@media (max-width: 900px) {
+  .list-page-layout--mail-client {
+    --list-page-layout-sidebar-width: 200px;
+    --mail-client-list-column: minmax(0, 1fr);
+    --mail-client-row-x-padding: 16px;
+  }
+
+  .list-page-layout--mail-client .list-page-layout__content-desktop {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .list-page-layout--mail-client:not(.list-page-layout--mail-compose) .mail-client-detail {
+    display: none;
+  }
+
+  .mail-client-message-list .mail-client-row .m-item {
+    margin: 0;
+  }
+}
+
+@media (max-width: 680px) {
+  .list-page-layout--mail-client {
+    --list-page-layout-sidebar-width: 200px;
+    --mail-client-row-x-padding: 16px;
+  }
+
+  .list-page-layout--mail-client .list-page-sidebar {
+    gap: 10px;
+    padding: 14px 10px 0;
+  }
+
+  .mail-client-sidebar-header {
+    gap: 8px;
+    padding: 0;
+  }
+
+  .mail-client-sidebar-header h1 {
+    font-size: 17px;
+  }
+
+  .mail-client-sidebar-header button {
+    min-width: 66px;
+    padding: 0 10px;
+  }
+
+  .mail-client-sidebar-search {
+    height: 34px;
+  }
+}