.email-compose {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: email-fade-in 0.15s ease;
}

.email-compose-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
}

.email-compose-dialog {
  position: relative;
  width: 680px;
  max-width: calc(100vw - 32px);
  min-height: 560px;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  background: var(--sk-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(31, 31, 30, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: visible;
  animation: email-slide-up 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.email-compose-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 0.5px solid var(--sk-border);
  background: var(--sk-bg-surface);
  flex-shrink: 0;
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--sk-bg-surface);
}

.email-compose-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--sk-text);
}

.email-compose-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--sk-text-secondary);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.email-compose-close:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--sk-text);
}

.email-compose-close:focus-visible {
  outline: none;
  outline-offset: 2px;
}

.email-from-trigger:focus-visible,
.email-from-item:focus-visible,
.email-compose-toggle-cc button:focus-visible,
.email-error-action-btn:focus-visible {
  outline: none;
  outline-offset: 2px;
}

.email-compose-fields {
  padding: 0;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  background: var(--sk-bg-surface);
  flex-shrink: 0;
}

.email-compose-field {
  display: flex;
  align-items: center;
  padding: 0 16px;
  min-height: 38px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
}

.email-compose-field:last-child {
  border-bottom: none;
}

/* Subject row mixes 13px label + 16px value (iOS-zoom floor) — center-alignment
   sank the value's baseline visibly below the label's (Mortens fund 17/7).
   Baseline-align the row so the two texts sit on ONE line; scoped to subject
   (the To-row's chips are boxes and must stay center-aligned). */
.email-compose-subject-row {
  align-items: baseline;
}

.email-compose-field label {
  font-size: var(--font-size-base);
  color: var(--sk-text-secondary);
  font-weight: var(--font-weight-medium);
  min-width: 48px;
  flex-shrink: 0;
}

.email-compose-field input {
  flex: 1;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--sk-text);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  outline: none !important;
  box-shadow: none !important;
  padding: 0;
}

.email-compose-field input:focus,
.email-compose-field input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none;
}

.email-compose-field input::placeholder {
  color: var(--sk-text-secondary);
  opacity: 0.6;
}

.email-from-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  height: 36px;
  padding: 0 24px 0 0;
  border: none;
  background: transparent;
  color: var(--sk-text);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  cursor: pointer;
  text-align: left;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  transition: color 180ms;
}
.email-from-trigger:hover { color: var(--sk-text); }
.email-from-trigger.open { color: var(--sk-text); }

.email-from-menu {
  position: absolute;
  top: 100%;
  left: -12px;
  right: -12px;
  background: var(--sk-bg-surface);
  border: 0.5px solid var(--sk-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  z-index: 1020;
  padding: 4px;
  margin-top: 2px;
}

.email-from-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  color: var(--sk-text);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 120ms;
}
.email-from-item:hover { background: rgba(0, 0, 0, 0.04); color: var(--sk-text); }
.email-from-item.active { background: rgba(0, 0, 0, 0.04); color: var(--sk-text); font-weight: var(--font-weight-semibold); padding: 8px 12px;
  padding: 4px 8px;
}

.email-compose-toggle-cc {
  padding: 4px 16px 8px;
  border-bottom: 0.5px solid var(--sk-border);
}

.email-compose-toggle-cc button {
  border: none;
  background: transparent;
  color: var(--sk-text);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  cursor: pointer;
  min-height: 44px;
  padding: 8px 0;
}

.email-compose-toggle-cc button:hover {
  text-decoration: underline;
}

.email-compose-body-wrap {
  flex: 1;
  overflow-y: auto;
  min-height: 200px;
  background: var(--sk-bg-surface);
}

.email-compose-body {
  min-height: 280px;
  flex: 1;
  padding: 16px;
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--sk-text);
  line-height: 1.6;
  outline: none !important;
  box-shadow: none !important;
}

.email-compose-body.email-compose-quill,
.email-compose-body.ql-container {
  height: auto;
  min-height: 280px;
  border: 0 !important;
  padding: 0;
  font-family: var(--font-family);
}

.email-compose-body .ql-editor {
  min-height: 280px;
  padding: 20px;
  color: var(--sk-text);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.6;
  outline: none !important;
  overflow-y: visible;
}

.email-compose-body .ql-editor.ql-blank::before {
  left: 20px;
  right: 20px;
  color: var(--sk-text-secondary);
  font-style: normal;
  opacity: 0.62;
}

.email-compose-body .ql-editor p {
  margin: 1em 0;
}

.email-compose-body .ql-editor > p:first-child {
  margin-top: 0;
}

.email-compose-body .ql-editor h1,
.email-compose-body .ql-editor h2,
.email-compose-body .ql-editor h3,
.email-compose-body .ql-editor h4 {
  margin: 1em 0 0.4em;
  line-height: 1.35;
}

.email-compose-body .ql-editor h1 { font-size: 1.55em; }
.email-compose-body .ql-editor h2 { font-size: 1.3em; }
.email-compose-body .ql-editor h3 { font-size: 1.12em; }
.email-compose-body .ql-editor h4 { font-size: 1em; font-weight: 600; }

.email-compose-body .ql-editor ol,
.email-compose-body .ql-editor ul {
  margin: 0.75em 0;
  padding-left: 1.5em;
}

.email-compose-body .ql-editor li {
  margin: 0.25em 0;
}

.email-compose-body .ql-editor > *:first-child {
  margin-top: 0;
}

.email-compose-body .ql-editor blockquote {
  margin: 8px 0;
  padding: 0 0 0 12px;
  border-left: 2px solid rgba(110, 138, 126, 0.42);
  color: var(--sk-text-secondary);
}

.email-compose-body .email-signature-host {
  padding: 0 20px 16px;
  box-sizing: border-box;
}

.email-compose-body .email-quoted-collapse-host {
  padding: 0 20px 16px;
  /* Editable region (see manageQuoteCollapseHost) — a default arrow read as "read-only". */
  cursor: text;
}

.email-compose-body .email-quoted-collapse-host:focus,
.email-compose-body .email-quoted-collapse-host:focus-visible {
  outline: none;
}

.email-compose-body .email-quoted-collapse-host summary,
.email-compose-body .email-quoted-remove {
  cursor: pointer;
}

.email-compose-body .email-quoted-collapse-host .email-quoted {
  margin: 12px 0 0;
  padding: 10px 0 0 12px;
  border: none;
  border-left: 2px solid rgba(110, 138, 126, 0.22);
  color: #5C4D43;
  font-size: var(--font-size-sm);
  line-height: 1.55;
}

/* The quoted/forwarded block sits outside the editable area, so Delete can never reach it.
   This is its only exit — kept quiet until the block is hovered or the button is focused. */
.email-compose-body .email-quoted {
  position: relative;
}

.email-compose-body .email-quoted-remove {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(228, 220, 212, 0.7);
  border-radius: 50%;
  background: var(--sk-surface, #FFFEFB);
  color: #9A8E82;
  font-size: var(--font-size-base);
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.email-compose-body .email-quoted:hover .email-quoted-remove,
.email-compose-body .email-quoted-remove:focus-visible {
  opacity: 1;
}

.email-compose-body .email-quoted-remove:hover {
  color: #5C4D43;
  background: rgba(228, 220, 212, 0.35);
}

.email-compose-body .email-quoted-remove:focus-visible {
  outline: 2px solid rgba(110, 138, 126, 0.5);
  outline-offset: 2px;
}

/* Touch and keyboard users get no hover — never hide the only exit from them. */
@media (hover: none) {
  .email-compose-body .email-quoted-remove { opacity: 1; }
}

.email-quote-undo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 20px 12px;
  padding: 8px 12px;
  border: 1px solid rgba(228, 220, 212, 0.7);
  border-radius: 10px;
  background: rgba(228, 220, 212, 0.18);
  color: #5C4D43;
  font-size: var(--font-size-xs);
}

.email-quote-undo__btn {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid rgba(228, 220, 212, 0.9);
  border-radius: 8px;
  background: var(--sk-surface, #FFFEFB);
  color: #5C4D43;
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: pointer;
}

.email-quote-undo__btn:hover {
  background: rgba(228, 220, 212, 0.35);
}

.email-quote-undo__btn:focus-visible {
  outline: 2px solid rgba(110, 138, 126, 0.5);
  outline-offset: 2px;
}

.email-compose-body .email-quoted-collapse-host .email-quoted > div:first-child {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: #9A8E82;
  letter-spacing: 0.01em;
  margin: 0 0 4px;
  line-height: 1.35;
}

.email-compose-body .email-quoted-collapse-host summary {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 12px 5px 10px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: #5C4D43;
  border: 1px solid rgba(228, 220, 212, 0.7);
  border-radius: 10px;
  background: transparent;
  list-style: none;
  user-select: none;
  transition: background 0.15s ease;
}

.email-compose-body .email-quoted-collapse-host summary:hover {
  background: rgba(228, 220, 212, 0.25);
}

.email-compose-body .email-quoted-collapse-host summary:focus-visible {
  outline: 2px solid rgba(110, 138, 126, 0.5);
  outline-offset: 2px;
}

.email-compose-body .email-quoted-collapse-host summary::-webkit-details-marker {
  display: none;
}

.email-compose-body .email-quoted-collapse-host summary::before {
  content: '\203A';
  display: inline-block;
  margin-right: 6px;
  font-size: 1.1em;
  line-height: 1;
  transition: transform 0.15s ease;
}

.email-compose-body .email-quoted-collapse-host details[open] > summary::before {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .email-compose-body .email-quoted-collapse-host summary::before {
    transition: none;
  }
}

.email-compose-body .email-quoted-collapse-host details[open] {
  margin-top: 8px;
  padding: 8px 0 4px 12px;
  border-left: 2px solid rgba(110, 138, 126, 0.22);
}

.email-compose-body .email-quoted-collapse-host .email-quoted:has(details[open]) {
  border-left-color: transparent;
}

.email-compose-body .email-quoted-collapse-host details[open] * {
  color: #5C4D43 !important;
  font-family: inherit !important;
}

.email-compose-body .email-quoted-collapse-host details[open] a {
  color: #5C4D43 !important;
  text-decoration: underline;
  text-decoration-color: rgba(154, 142, 130, 0.4);
}

.email-compose-body .email-quoted-collapse-host details[open] a:hover {
  color: #4A7A68 !important;
}

.email-compose-body .email-quoted-collapse-host details[open] ul {
  list-style: none;
  padding-left: 16px;
}

.email-compose-body .email-quoted-collapse-host details[open] ul li::before {
  content: '\2022';
  color: #9A8E82;
  display: inline-block;
  width: 12px;
  margin-left: -12px;
  font-size: var(--font-size-xs);
}

.email-compose-body .email-quoted-collapse-host details[open] ol {
  padding-left: 20px;
}

.email-compose-body .email-quoted-collapse-host details[open] ol::marker,
.email-compose-body .email-quoted-collapse-host details[open] li::marker {
  color: #9A8E82;
}

.email-compose-body .email-quoted-collapse-host details[open] strong,
.email-compose-body .email-quoted-collapse-host details[open] b {
  color: #3A2F26 !important;
  font-weight: 600;
}

.email-compose-body .email-quoted-collapse-host details[open] h1,
.email-compose-body .email-quoted-collapse-host details[open] h2,
.email-compose-body .email-quoted-collapse-host details[open] h3,
.email-compose-body .email-quoted-collapse-host details[open] h4 {
  font-size: var(--font-size-sm) !important;
  font-weight: 600;
  margin: 8px 0 4px;
}

.email-compose-body .email-quoted-collapse-host details[open] blockquote {
  border-left: 2px solid rgba(110, 138, 126, 0.14);
  padding-left: 10px;
  margin: 4px 0 4px 4px;
  color: #9A8E82 !important;
}

.email-compose-body .email-quoted-collapse-host details[open] img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.email-compose-body .email-quoted-collapse-host details[open] p {
  margin: 4px 0;
}

.email-compose-body:focus,
.email-compose-body:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.email-compose-body p {
  margin: 1em 0;
}
.email-compose-body .email-quoted p {
  margin: 0;
}

.email-compose-body:empty::before {
  content: attr(data-placeholder);
  color: var(--sk-text-secondary);
  pointer-events: none;
}

.email-compose-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  margin-top: 4px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
  background: var(--sk-bg-surface);
  flex-shrink: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  position: relative;
}

.email-compose-footer .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.email-compose-spacer {
  flex: 1;
}

.email-compose-dictate {
  display: none;
}

.email-compose-attach,
.email-compose-discard {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--sk-text-muted);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.email-compose-discard {
  margin-left: auto;
}

.email-compose-attach:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--sk-text);
}

.email-compose-discard:hover {
  background: rgba(194,75,96,0.08);
  color: var(--sk-danger);
}

.email-compose-close-confirm {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(248, 250, 252, 0.82);
  backdrop-filter: blur(4px);
}

.email-compose-close-confirm__box {
  width: min(420px, 100%);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: var(--radius-lg);
  background: var(--sk-bg-surface, #fff);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
  padding: 18px;
  color: var(--sk-text, #111827);
}

.email-compose-close-confirm__box h3 {
  margin: 0 0 8px;
  font-size: var(--font-size-lg);
  line-height: 1.25;
  letter-spacing: 0;
}

.email-compose-close-confirm__box p {
  margin: 0;
  color: var(--sk-text-secondary, #475569);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.email-compose-close-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.email-compose-close-confirm__actions button {
  min-height: 38px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 0 13px;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.email-compose-close-confirm__actions button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.email-compose-close-confirm__secondary {
  border-color: var(--sk-border, rgba(15, 23, 42, 0.12)) !important;
  background: var(--sk-bg-surface, #fff);
  color: var(--sk-text-secondary, #475569);
}

.email-compose-close-confirm__danger {
  border-color: rgba(220, 38, 38, 0.18) !important;
  background: rgba(220, 38, 38, 0.08);
  color: var(--sk-danger, #b91c1c);
}

.email-compose-close-confirm__primary {
  background: var(--email-control-fill, var(--sk-text, #111827));
  color: var(--email-control-on-fill, #fff);
}

.email-compose-close-confirm__actions button:hover:not(:disabled),
.email-compose-close-confirm__actions button:focus-visible {
  outline: none;
  outline-offset: 2px;
}

[data-theme="dark"] .email-compose-close-confirm {
  background: rgba(2, 6, 23, 0.72);
}

[data-theme="dark"] .email-compose-close-confirm__box {
  border-color: rgba(255, 255, 255, 0.10);
  background: var(--color-card, #111827);
  box-shadow: 0 18px 45px rgba(20, 18, 15, 0.42);
}

[data-theme="dark"] .email-compose-close-confirm__secondary {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 767px) {
  .email-compose-close-confirm {
    padding: 16px;
  }

  .email-compose-close-confirm__box {
    width: 100%;
  }

  .email-compose-close-confirm__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .email-compose-close-confirm__actions button {
    width: 100%;
    min-height: 44px;
  }
}

/* ── Inline discard confirm ────────────────────────────────── */

.email-compose-discard-confirm {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 8px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--sk-bg, #fff);
  border: 1px solid var(--sk-border, #ddd);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  animation: email-slide-up 0.15s ease;
}

.email-compose-discard-confirm__yes {
  background: #dc3545;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 14px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
}

.email-compose-discard-confirm__yes:hover {
  background: #c82333;
}

.email-compose-discard-confirm__no {
  background: none;
  border: 1px solid var(--sk-border, #ccc);
  border-radius: 6px;
  padding: 5px 14px;
  font-size: var(--font-size-sm);
  cursor: pointer;
  color: var(--sk-text, #333);
}

.email-compose-discard-confirm__no:hover {
  background: var(--sk-bg-hover, #f0f0f0);
}

/* ── Dark mode overrides ───────────────────────────────────── */

[data-theme="dark"] .email-compose-discard-confirm {
  background: var(--sk-bg, #1e1e1e);
  border-color: var(--sk-border, #444);
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}

[data-theme="dark"] .email-compose-discard-confirm__no {
  border-color: var(--sk-border, #555);
  color: var(--sk-text, #ddd);
}

[data-theme="dark"] .email-compose-discard-confirm__no:hover {
  background: var(--sk-bg-hover, #2a2a2a);
}

@media (max-width: 767px) {
  .email-compose-discard-confirm {
    right: 4px;
    left: 4px;
    justify-content: center;
  }
}

@keyframes email-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes email-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.email-accounts-modal {
  animation: email-fade-in 0.15s ease;
}

.email-accounts-dialog {
  animation: email-slide-up 0.2s ease;
}

.email-compose-btn {
  background: var(--sk-text);
  color: var(--email-control-on-fill);
}
.email-compose-btn:hover {
  filter: brightness(0.9);
  background: var(--sk-text);
}

.email-undo-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--sk-toast-bg, #3A2F26); color: var(--sk-toast-text, #FFFEFB); padding: 12px 20px; border-radius: var(--radius-md);
  display: flex; align-items: center; gap: 16px; z-index: 10000; font-size: var(--font-size-md);
  box-shadow: var(--sk-toast-shadow, 0 4px 12px rgba(0, 0, 0, 0.15)); min-width: 260px; overflow: hidden;
}
.email-undo-toast span { flex: 1; }
.email-undo-btn {
  background: transparent; border: 0.5px solid rgba(255,255,255,0.4);
  color: rgba(255, 255, 255, 0.90); font-weight: var(--font-weight-semibold); font-size: var(--font-size-md); padding: 4px 14px;
  border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap;
}
.email-undo-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.email-undo-progress {
  position: absolute; bottom: 0; left: 0; height: 3px; width: 100%;
  background: rgba(0, 0, 0, 0.20); animation: undo-countdown 5s linear forwards;
  transform-origin: left;
}
@keyframes undo-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* The embed host loads email-compose.css WITHOUT email-blod-bolge.css, so bare
   --sk-* tokens are unset there in light mode — an unset background rendered
   the list TRANSPARENT on top of the form (Morten live-find 3/7). Every token
   here falls back to the shared /assets/css/variables.css tokens, which every
   host loads and which follow dark mode by themselves. */
.email-autocomplete { position: absolute; top: 100%; left: 45px; right: 0; background: var(--sk-bg-surface, var(--color-card, #FFFEFB)); border: 0.5px solid var(--sk-border, var(--color-border, rgba(58, 47, 38, 0.14))); border-radius: var(--radius-md); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); max-height: 264px; max-height: min(264px, 40dvh); overflow-y: auto; overscroll-behavior: contain; z-index: 1010; min-width: 250px; scrollbar-width: thin; scrollbar-color: var(--sk-border, var(--color-border, rgba(58, 47, 38, 0.2))) transparent; }
/* The OS-default scrollbar reads dark and fat inside the small dropdown;
   keep it hairline and theme-tinted (the vars flip with [data-theme]). */
.email-autocomplete::-webkit-scrollbar { width: 8px; }
.email-autocomplete::-webkit-scrollbar-track { background: transparent; }
.email-autocomplete::-webkit-scrollbar-thumb { background-color: var(--sk-border, var(--color-border, rgba(58, 47, 38, 0.2))); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.email-autocomplete::-webkit-scrollbar-thumb:hover { background-color: var(--sk-text-tertiary, var(--color-text-secondary, #6B675E)); }
.email-autocomplete-item { padding: 8px 12px; cursor: pointer; font-size: var(--font-size-base); display: flex; flex-direction: column; }
.email-autocomplete-item:hover, .email-autocomplete-item.active { background: rgba(0, 0, 0, 0.04); }
.email-autocomplete-name { font-weight: var(--font-weight-semibold); color: var(--sk-text, var(--color-text-primary, #3A2F26)); }
.email-autocomplete-email { font-size: var(--font-size-sm); color: var(--sk-text-secondary, var(--color-text-secondary, #6B675E)); }


.email-quoted {
  border-left: 3px solid var(--sk-border);
  padding-left: 12px;
  margin-left: 4px;
  color: var(--sk-text-secondary);
}

.chip-input-container {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 4px 0;
  border: none;
  background: transparent;
  cursor: text;
  overflow: hidden;
  transition: border-color 180ms ease;
}

.chip-input-container:focus-within {
  outline: none;
  border-color: var(--color-border);
  box-shadow: none;
}

.chip-input-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 220px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--sk-text);
  line-height: 1.4;
  user-select: none;
  cursor: default;
  animation: chip-appear 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

@keyframes chip-appear {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.chip-input-chip.selected {
  background: var(--sk-text);
  color: var(--email-control-on-fill);
}

.chip-input-chip.selected .chip-input-remove {
  color: rgba(255, 255, 255, 0.7);
}

.chip-input-chip.selected .chip-input-remove:hover {
  color: var(--email-control-on-fill);
  background: rgba(255, 255, 255, 0.2);
}

.chip-input-chip.invalid {
  background: rgba(194, 75, 96, 0.10);
  color: var(--sk-danger);
}

.chip-input-chip.invalid .chip-input-remove {
  color: rgba(220, 38, 38, 0.5);
}

.chip-input-chip.invalid .chip-input-remove:hover {
  color: var(--sk-danger);
  background: rgba(194, 75, 96, 0.12);
}

.chip-input-chip .chip-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-input-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--sk-text-secondary);
  font-size: var(--font-size-md);
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms ease, color 120ms ease;
}

.chip-input-remove:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--sk-text);
}

.chip-input-remove:focus-visible {
  outline: none;
  outline-offset: 0;
}

.chip-input-typing {
  flex: 1;
  min-width: 80px;
  padding: 2px 0;
  border: none;
  outline: none;
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--sk-text);
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip-input-typing::placeholder {
  color: var(--sk-text-secondary);
  opacity: 0.6;
}

.chip-input-typing.has-content::placeholder {
  opacity: 0;
}

/* Chrome paints its own blue autofill wash (#e8f0fe) over the recipient inputs
   the moment the typed address matches a saved browser suggestion. That wash is
   a UA-internal background, so `background: transparent !important` does not
   remove it — clipping the background to the glyphs does, and the very long
   transition covers engines that ignore background-clip on inputs. Keep the
   text/caret colours explicit, otherwise Chrome also recolours them. */
.chip-input-typing:-webkit-autofill,
.chip-input-typing:-webkit-autofill:hover,
.chip-input-typing:-webkit-autofill:focus,
.chip-input-typing:-webkit-autofill:active,
.chip-input-typing:autofill {
  -webkit-background-clip: text;
  background-clip: text;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-text-fill-color: var(--sk-text, #3A2F26);
  caret-color: var(--sk-text, #3A2F26);
  transition: background-color 100000s ease-in-out 0s;
}

[data-theme="dark"] .chip-input-typing:-webkit-autofill,
[data-theme="dark"] .chip-input-typing:-webkit-autofill:hover,
[data-theme="dark"] .chip-input-typing:-webkit-autofill:focus,
[data-theme="dark"] .chip-input-typing:-webkit-autofill:active,
[data-theme="dark"] .chip-input-typing:autofill {
  -webkit-text-fill-color: var(--email-dark-text, var(--bb-warm-text, #E8E3DB));
  caret-color: var(--email-dark-sage, var(--bb-warm-text, #E8E3DB));
}

.email-compose-field:has(.chip-input-container) {
  position: relative;
}

[data-theme="dark"] .chip-input-chip {
  background: rgba(255, 255, 255, 0.15);
  color: var(--sk-text);
}

[data-theme="dark"] .chip-input-chip.selected {
  background: var(--sk-text);
  color: var(--email-control-on-fill);
}

[data-theme="dark"] .chip-input-chip.invalid {
  background: rgba(194, 75, 96, 0.18);
  color: var(--color-error);
}

[data-theme="dark"] .chip-input-chip.invalid .chip-input-remove {
  color: rgba(248, 113, 113, 0.6);
}

[data-theme="dark"] .chip-input-chip.invalid .chip-input-remove:hover {
  color: var(--color-error);
  background: rgba(194, 75, 96, 0.15);
}

[data-theme="dark"] .chip-input-remove {
  color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .chip-input-remove:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}

.email-send-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  animation: email-fade-in 200ms ease;
}

.email-send-status--sending {
  color: var(--sk-text);
}

.email-send-status--sent {
  color: var(--sk-success);
}

.email-send-status--failed {
  color: var(--sk-danger);
}

.email-send-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: email-send-spin 600ms linear infinite;
  flex-shrink: 0;
}

@keyframes email-send-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .email-compose-chip { animation: none; }
  .email-send-spinner { animation: none; }
  .email-undo-countdown { animation: none; }
}

.email-undo-toast.email-sending-toast {
  gap: 12px;
}

.email-undo-toast.email-sending-toast .email-send-spinner {
  border-color: rgba(0, 0, 0, 0.20);
  border-right-color: transparent;
}

.email-undo-toast.email-sent-toast {
  background: var(--color-success);
  color: var(--sk-text-on-accent, #FFFEFB);
}

.email-undo-toast.email-sent-toast .email-sent-check {
  color: var(--sk-text-on-accent, #FFFEFB);
  flex-shrink: 0;
}

.email-error-action-btn {
  background: transparent;
  border: 0.5px solid rgba(255,255,255,0.4);
  color: var(--color-error);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  padding: 4px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms;
}
.email-error-action-btn:hover {
  background: rgba(255,255,255,0.1);
}

.email-sent-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--sk-text-secondary);
  white-space: nowrap;
  line-height: 1;
}
.email-sent-badge svg {
  flex-shrink: 0;
}

.email-delivery-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 0;
  padding: 2px 8px;
  border: 1px solid rgba(74, 122, 104, 0.22);
  border-radius: 999px;
  background: rgba(74, 122, 104, 0.08);
  color: rgb(74, 122, 104);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.email-delivery-status svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.25;
  opacity: 0.85;
}
.email-delivery-status--sent {
  color: rgb(74, 122, 104);
}
.email-delivery-status--scheduled {
  color: var(--sk-text);
}

[data-theme="dark"] .email-sent-badge {
  color: var(--sk-text-secondary);
}
[data-theme="dark"] .email-delivery-status--sent {
  color: rgb(74, 122, 104);
}
[data-theme="dark"] .email-undo-toast.email-sent-toast {
  background: var(--sk-success-bg);
}

[data-theme="dark"] .email-autocomplete {
  background: var(--sk-bg-secondary);
  border-color: var(--sk-border);
  box-shadow: 0 4px 16px rgba(20, 18, 15, 0.15);
}
[data-theme="dark"] .email-autocomplete-item:hover,
[data-theme="dark"] .email-autocomplete-item.active {
  background: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] .email-autocomplete-name {
  color: var(--sk-text);
}
[data-theme="dark"] .email-autocomplete-email {
  color: var(--sk-text-secondary);
}

/* ── Confirmation dialog (body portal, outside .email-app) ── */

#email-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity .15s ease;
}

.email-confirm-dialog {
  width: 380px;
  max-width: calc(100vw - 32px);
  background: var(--color-card, #fff);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-modal, 0 12px 40px rgba(0, 0, 0, .15));
  padding: 24px;
  transform: scale(0.95);
  transition: transform .15s ease;
}

.email-confirm-title {
  margin: 0 0 8px;
  font-size: var(--font-size-md, 16px);
  font-weight: 600;
  color: var(--color-text-primary, #566a7f);
}

.email-confirm-msg {
  margin: 0 0 20px;
  font-size: var(--font-size-base, 14px);
  color: var(--color-text-secondary, #8e99a4);
  line-height: 1.5;
}

.email-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.email-confirm-cancel {
  padding: 8px 16px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--color-border, #ddd);
  background: transparent;
  color: var(--color-text-secondary, #8e99a4);
  font-size: var(--font-size-base, 14px);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}

.email-confirm-cancel:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text-primary, #566a7f);
}

.email-confirm-cancel:focus-visible {
  outline: 2px solid var(--color-primary, #079aa2);
  outline-offset: 2px;
}

.email-confirm-ok {
  padding: 8px 16px;
  border-radius: var(--radius-md, 8px);
  border: none;
  background: var(--color-primary, #079aa2);
  color: var(--color-text-inverted, #fff);
  font-size: var(--font-size-base, 14px);
  font-weight: 500;
  cursor: pointer;
  transition: filter 120ms;
}

.email-confirm-ok:hover {
  filter: brightness(0.9);
}

.email-confirm-ok:active {
  filter: brightness(0.85);
}

.email-confirm-ok:focus-visible {
  outline: 2px solid var(--color-primary, #079aa2);
  outline-offset: 2px;
}

[data-theme="dark"] #email-confirm-overlay {
  background: rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .email-confirm-dialog {
  background: var(--color-card, #1e1e1e);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .email-confirm-title {
  color: var(--color-text-primary, #e8e6e1);
}

[data-theme="dark"] .email-confirm-msg {
  color: var(--color-text-secondary, #a0a0a0);
}

[data-theme="dark"] .email-confirm-cancel {
  border-color: var(--color-border, #444);
  color: var(--color-text-secondary, #a0a0a0);
}

[data-theme="dark"] .email-confirm-cancel:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-primary, #e8e6e1);
}

[data-theme="dark"] .email-confirm-ok {
  color: var(--color-text-inverted, #fff);
}

[data-theme="dark"] .email-confirm-ok:focus-visible {
  outline-color: var(--color-primary, #079aa2);
}

@media (max-width: 767px) {
  .email-confirm-dialog {
    max-width: calc(100vw - 24px);
  }

  .email-confirm-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .email-confirm-cancel,
  .email-confirm-ok {
    min-height: 44px;
    width: 100%;
  }
}

/* ── Mobile compose approved spec (#1851) ──────────────────────── */

@media (max-width: 767px) {
  .email-compose-titlebar {
    min-height: 56px;
    padding: 0 8px 0 16px;
  }

  .email-compose-field {
    min-height: 44px;
    padding-inline: 12px;
  }

  .email-compose-field label {
    min-width: 42px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sk-text-muted, #8b7e74);
  }

  .email-compose-subject-row input {
    height: 44px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .chip-input-container {
    min-height: 28px;
    gap: 4px;
  }

  .chip-input-chip {
    max-width: 200px;
    height: 28px;
    padding: 0 4px 0 10px;
    gap: 2px;
    font-size: var(--font-size-sm);
    line-height: 28px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .chip-input-remove {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  .chip-input-remove svg {
    width: 12px;
    height: 12px;
  }

  .chip-input-typing {
    min-width: 0;
    flex: 0 0 0px;
  }
  .chip-input-typing:not(.has-content):not(:focus) {
    display: none;
  }
  /* collapsed (0px) while idle by design — but a focused input must have real
     width or the caret and typed address are invisible; the row wraps, so
     120px drops to its own line between the chips and the Cc/Bcc links */
  .chip-input-typing:focus {
    flex: 1 1 auto;
    min-width: 120px;
  }

  .email-compose-recipient-link {
    min-height: 28px !important;
    min-width: 28px;
    padding: 2px 6px !important;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.04);
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-medium);
    /* 19/7 QA F9: 28px-high pill keeps its look; a transparent ::before
       stretches the tap target to the 44px minimum on touch. */
    position: relative;
  }

  .email-compose-recipient-link::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: 44px;
    transform: translate(-50%, -50%);
  }

  .email-compose-footer {
    gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    min-height: 64px;
    margin-top: 0;
    background: #FFFEFB !important;
    border-top: 0.5px solid rgba(0, 0, 0, 0.08);
  }

  .email-compose-footer .btn-primary,
  .email-compose-footer .btn.btn-primary {
    height: 44px;
    min-height: 44px;
    padding: 0 22px;
    border-radius: var(--radius-sm);
    background: #6E8A7E;
    border: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: #fff;
    white-space: nowrap;
  }

  .email-compose-attach {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--sk-text-secondary);
    flex-shrink: 0;
  }

  .email-compose-spacer {
    display: none !important;
  }

  /* The #1848 mobile refresh hid the discard button along with the spacer,
     which left phones with no way to delete a kladde at all (open draft ->
     compose has no delete, list delete is hover-only, X re-saves). Keep the
     button: margin-left auto parks it at the footer's right edge, far from
     Send, and discardCompose() already runs the inline Slet kladde? confirm
     before anything is deleted. */
  .email-compose-discard-confirm__yes,
  .email-compose-discard-confirm__no {
    min-height: 44px;
    padding: 10px 16px;
  }

  /* #2859: compose dictation now lives in the toolbar mic beside the speaker.
     The footer mic stays in the DOM (it mirrors the shared controller state)
     but stays hidden so only one primary mic shows per viewport. */
  .email-compose-dictate {
    display: none;
  }

  [data-theme="dark"] .email-compose-footer {
    background: var(--color-card, #151923) !important;
  }

  [data-theme="dark"] .email-compose-attach {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--sk-text-secondary);
  }

  [data-theme="dark"] .email-compose-recipient-link {
    background: rgba(255, 255, 255, 0.08);
  }

}

/* ── Svarvagten: "Mind mig, hvis ingen svarer" (compose footer chip) ─────────
   Quiet by default (matches attach/dictate), sage when armed. Shared by the
   /email/ page and the chat embed (same composer include + modules). */
.email-reply-watch-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--sk-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.email-reply-watch-chip:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--sk-text);
}
.email-reply-watch-chip.is-on {
  background: rgba(95, 114, 99, 0.12);
  color: var(--sk-sage, #5F7263);
}
.email-reply-watch-chip.is-on:hover {
  background: rgba(95, 114, 99, 0.18);
  color: var(--sk-sage, #5F7263);
}
.email-reply-watch-chip svg {
  flex-shrink: 0;
}

/* Popover box = the autocomplete family's exact recipe: SOLID background with
   SHARED-token fallbacks — the chat embed loads email-compose.css WITHOUT
   email-blod-bolge.css, so a bare var(--sk-bg-surface) is UNSET there and the
   menu rendered TRANSPARENT over the toolbar (Morten repro 12/7). JS positions
   it fixed-from-body, anchored above the chip. */
.email-reply-watch-menu {
  position: fixed;
  /* Fixed-from-body: must clear the family's HIGHEST layer (10300 in this
     file — measured; no 20k layer exists anywhere in email css). */
  z-index: 10400;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  padding: 4px;
  border-radius: var(--radius-md, 10px);
  border: 0.5px solid var(--sk-border, var(--color-border, rgba(58, 47, 38, 0.14)));
  background: var(--sk-bg-surface, var(--color-card, #FFFEFB));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.email-reply-watch-menu-item {
  border: none;
  background: transparent;
  text-align: left;
  padding: 9px 12px;
  border-radius: var(--radius-sm, 6px);
  font-size: var(--font-size-sm);
  color: var(--sk-text, var(--color-text-primary, #2C2C2A));
  cursor: pointer;
  white-space: nowrap;
}
.email-reply-watch-menu-item:hover,
.email-reply-watch-menu-item:focus-visible {
  background: rgba(95, 114, 99, 0.10);
  outline: none;
}
.email-reply-watch-menu-item.is-selected {
  color: var(--sk-sage, #5F7263);
  font-weight: 600;
}
.email-reply-watch-menu-off {
  color: var(--sk-text-muted, var(--color-text-secondary, #6B6259));
  border-top: 0.5px solid var(--sk-border, var(--color-border, rgba(58, 47, 38, 0.12)));
  border-radius: 0;
  margin-top: 2px;
}

[data-theme="dark"] .email-reply-watch-chip {
  color: var(--email-dark-text-secondary, rgba(232, 221, 212, 0.66)) !important;
}
[data-theme="dark"] .email-reply-watch-chip:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .email-reply-watch-chip.is-on {
  background: rgba(124, 184, 164, 0.16) !important;
  color: #7CB8A4 !important;
}
[data-theme="dark"] .email-reply-watch-chip.is-on:hover {
  background: rgba(124, 184, 164, 0.22) !important;
  color: #7CB8A4 !important;
}
[data-theme="dark"] .email-reply-watch-menu {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: var(--email-dark-panel, #201b18) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45) !important;
}
[data-theme="dark"] .email-reply-watch-menu-item {
  color: var(--email-dark-text, #e8ddd4) !important;
}
[data-theme="dark"] .email-reply-watch-menu-item:hover {
  background: rgba(255, 255, 255, 0.07) !important;
}
[data-theme="dark"] .email-reply-watch-menu-item.is-selected {
  color: #7CB8A4 !important;
}
[data-theme="dark"] .email-reply-watch-menu-off {
  border-top-color: rgba(255, 255, 255, 0.10) !important;
  color: var(--email-dark-text-secondary, rgba(232, 221, 212, 0.66)) !important;
}

@media (max-width: 767px) {
  /* Mobile side of the 767/768 nav cut (repo canon: email-responsive.css +
     bb-mobile-nav.css both cut at max-width: 767px): footer is tight (Send +
     attach + dictate + discard at 44px each) — the chip stays icon-only at
     the full 44px touch minimum; the armed state still shows via sage fill. */
  .email-reply-watch-label {
    display: none;
  }
  .email-reply-watch-chip {
    width: 44px;
    height: 44px;
    min-width: 44px;
    justify-content: center;
    padding: 0;
  }
  /* Touch targets: menu options must hit the 44px minimum too. */
  .email-reply-watch-menu-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* Nano refined the number: one soft pulse so the change has a visible cause. */
@keyframes ss-rw-pulse-light {
  0% { background: rgba(95, 114, 99, 0.32); }
  100% { background: rgba(95, 114, 99, 0.12); }
}
@keyframes ss-rw-pulse-dark {
  0% { box-shadow: 0 0 0 5px rgba(124, 184, 164, 0.28); }
  100% { box-shadow: 0 0 0 0 rgba(124, 184, 164, 0); }
}
.email-reply-watch-chip.is-nano-refined {
  animation: ss-rw-pulse-light 700ms ease-out;
}
[data-theme="dark"] .email-reply-watch-chip.is-nano-refined {
  animation: ss-rw-pulse-dark 700ms ease-out;
}