/* ═════════════════════════════════════════════════════════════════════════════
   js/email-v2.css — WIP-UI-EMAIL-01 Phase 1
   Three pulse states (new/warn/urgent), smart filter chips, signature card,
   sidebar Comms pulse dot. Classes namespaced em2-* / sig-* to avoid
   colliding with the existing email-* / em-* markup.
   ═════════════════════════════════════════════════════════════════════════════ */

:root {
  --em2-ok-fg: #15803D;
  --em2-ok-light: #22C55E;
  --em2-warn-fg: #D97706;
  --em2-warn-light: #F59E0B;
  --em2-urgent-fg: #DC2626;
  --em2-urgent-light: #F87171;
}

/* ─── Pulse keyframes (per spec Section 2) ─────────────────────────── */
@keyframes em2-pulse-new {
  0%, 100% { box-shadow: inset 3px 0 0 0 var(--em2-ok-fg),    0 0 0 0 rgba(21,128,61,.25); }
  50%      { box-shadow: inset 3px 0 0 0 var(--em2-ok-light), 0 0 0 4px rgba(21,128,61,0); }
}
@keyframes em2-pulse-warn {
  0%, 100% { box-shadow: inset 3px 0 0 0 var(--em2-warn-fg),    0 0 0 0 rgba(217,119,6,.3); }
  50%      { box-shadow: inset 3px 0 0 0 var(--em2-warn-light), 0 0 0 4px rgba(217,119,6,0); }
}
@keyframes em2-pulse-urgent {
  0%, 100% { box-shadow: inset 3px 0 0 0 var(--em2-urgent-fg),    0 0 0 0 rgba(220,38,38,.4); }
  50%      { box-shadow: inset 3px 0 0 0 var(--em2-urgent-light), 0 0 0 5px rgba(220,38,38,0); }
}
@keyframes em2-dot-green  { 0%, 100% { box-shadow: 0 0 0 0 rgba(21,128,61,.5); }  50% { box-shadow: 0 0 0 5px rgba(21,128,61,0); } }
@keyframes em2-dot-yellow { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,6,.5); }  50% { box-shadow: 0 0 0 5px rgba(217,119,6,0); } }
@keyframes em2-dot-red    { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.6); }  50% { box-shadow: 0 0 0 6px rgba(220,38,38,0); } }
@keyframes em2-pulse-sidebar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
  70%      { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

/* Apply pulses to email rows. Targets rows that the existing email renderer
   produces — we tag the wrapper TR/DIV via JS post-render injection. The
   .em2-pulse-* classes go on the existing list-row element regardless of
   what selector that element uses internally. */
.em2-pulse-new {
  background: linear-gradient(90deg, rgba(21,128,61,.05) 0%, transparent 70%);
  animation: em2-pulse-new 2.4s ease-in-out infinite;
  position: relative;
}
.em2-pulse-warn {
  background: linear-gradient(90deg, rgba(217,119,6,.06) 0%, transparent 70%);
  animation: em2-pulse-warn 2.0s ease-in-out infinite;
  position: relative;
}
.em2-pulse-urgent {
  background: linear-gradient(90deg, rgba(220,38,38,.08) 0%, transparent 70%);
  animation: em2-pulse-urgent 1.8s ease-in-out infinite;
  position: relative;
}

.em2-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
}
.em2-dot.new    { background: var(--em2-ok-fg);     animation: em2-dot-green 1.6s ease-in-out infinite; }
.em2-dot.warn   { background: var(--em2-warn-fg);   animation: em2-dot-yellow 1.6s ease-in-out infinite; }
.em2-dot.urgent { background: var(--em2-urgent-fg); animation: em2-dot-red 1.4s ease-in-out infinite; }

/* Age tags */
.em2-age-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 5px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  vertical-align: middle;
}
.em2-age-tag.new    { background: #DCFCE7; color: var(--em2-ok-fg);    border: 1px solid rgba(21,128,61,.18); }
.em2-age-tag.warn   { background: #FEF3C7; color: var(--em2-warn-fg);  border: 1px solid rgba(146,64,14,.18); }
.em2-age-tag.urgent { background: #FEE2E2; color: var(--em2-urgent-fg); border: 1px solid rgba(220,38,38,.25); }

/* Reduced-motion gate (per Constraint #5) */
@media (prefers-reduced-motion: reduce) {
  .em2-pulse-new, .em2-pulse-warn, .em2-pulse-urgent,
  .em2-dot, .em2-sidebar-pulse-dot, .em2-needs-attention-heading::before {
    animation: none !important;
  }
}

/* ─── Smart filter chip row ─────────────────────────────────────────── */
.em2-filter-bar {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 11px;
  box-shadow: var(--shadow-rest);
  margin-bottom: 12px;
}
.em2-filter-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  font-size: 11.5px; font-weight: 700;
  color: var(--s500, #78716C);
  background: var(--s50, #FAFAF9);
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.005em;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
}
.em2-filter-chip:hover { color: var(--ink, #0A0A0A); border-color: var(--s300, #D6D3D1); }
.em2-filter-chip.on {
  background: var(--ink, #0A0A0A);
  color: #fff;
  border-color: var(--ink, #0A0A0A);
}
.em2-filter-chip .c {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 5px;
  font-size: 10px; font-weight: 800;
  border-radius: 5px;
  background: rgba(0,0,0,.06);
  font-variant-numeric: tabular-nums;
}
.em2-filter-chip.on .c { background: rgba(255,255,255,.18); }
.em2-filter-chip.new   .c { background: rgba(21,128,61,.15); color: var(--em2-ok-fg); }
.em2-filter-chip.warn  .c { background: rgba(217,119,6,.15); color: var(--em2-warn-fg); }
.em2-filter-chip.urgent .c { background: rgba(220,38,38,.15); color: var(--em2-urgent-fg); }
.em2-filter-chip.new.on .c, .em2-filter-chip.warn.on .c, .em2-filter-chip.urgent.on .c {
  background: rgba(255,255,255,.18); color: #fff;
}
.em2-filter-divider {
  width: 1px; height: 22px;
  background: var(--s200, #E7E5E4);
}
.em2-filter-search {
  flex: 1; min-width: 200px;
  position: relative;
}
.em2-filter-search input {
  width: 100%;
  padding: 6px 12px;
  font-size: 11.5px;
  font-family: inherit;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 8px;
  background: var(--s50, #FAFAF9);
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.em2-filter-search input:focus {
  outline: none; background: #fff;
  border-color: var(--ink, #0A0A0A);
  box-shadow: 0 0 0 3px rgba(10,10,10,.05);
}

/* "Needs attention" section heading injected above the pulsing rows */
.em2-needs-attention-heading {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--em2-urgent-fg);
  padding: 12px 16px 6px;
  display: flex; align-items: center; gap: 8px;
}
.em2-needs-attention-heading::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--em2-urgent-fg);
  animation: em2-dot-red 1.4s ease-in-out infinite;
}
.em2-inbox-heading {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--s500, #78716C);
  padding: 14px 16px 6px;
  border-top: 1px solid var(--s100, #F5F5F4);
  margin-top: 4px;
}

/* ─── Signature card (replaces the raw HTML bug) ────────────────────── */
.signature {
  margin-top: 24px;
  padding: 16px 18px;
  background: linear-gradient(180deg, var(--s50, #FAFAF9) 0%, #fff 100%);
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 12px;
  display: flex; gap: 14px;
  align-items: flex-start;
  font-family: 'Archivo', system-ui, sans-serif;
}
.sig-logo {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--ink, #0A0A0A);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 14px;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.sig-logo::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--red, #C41230);
}
.sig-mid {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.sig-name-row {
  display: flex; align-items: baseline;
  gap: 8px; flex-wrap: wrap;
}
.sig-name {
  font-size: 14px; font-weight: 800;
  color: var(--ink, #0A0A0A);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.sig-title {
  font-size: 11px; color: var(--s500, #78716C);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.sig-title .sep { margin: 0 5px; color: var(--s300, #D6D3D1); }
.sig-title b { color: var(--s700, #44403C); font-weight: 700; }
.sig-contact-row {
  display: flex; flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 2px;
}
.sig-contact-item {
  display: inline-flex; align-items: center;
  gap: 5px;
  font-size: 11.5px; font-weight: 600;
  color: var(--s700, #44403C);
}
.sig-contact-item .ico {
  width: 12px; height: 12px;
  color: var(--red, #C41230);
}
.sig-contact-item a {
  color: var(--s700, #44403C);
  text-decoration: none;
}
.sig-contact-item a:hover {
  color: var(--ink, #0A0A0A);
  text-decoration: underline;
}
.sig-branches {
  display: flex; align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--s500, #78716C);
  font-weight: 600;
}
.sig-branches .branch {
  display: inline-flex; align-items: center;
  padding: 1px 7px;
  background: var(--s100, #F5F5F4);
  color: var(--s700, #44403C);
  border-radius: 5px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.04em;
}
.sig-disclaimer {
  margin-top: 6px;
  font-size: 9.5px;
  color: var(--s500, #78716C);
  font-weight: 500;
  line-height: 1.5;
  font-style: italic;
}

/* Composer signature wrapper — sits below contenteditable body */
.composer-signature-wrapper {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--s200, #E7E5E4);
}
.composer-signature-label {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--s500, #78716C);
  margin-bottom: 6px;
  display: flex; align-items: center;
  gap: 8px;
}
.composer-signature-label .action-link {
  font-size: 10px; font-weight: 700;
  color: var(--red, #C41230);
  cursor: pointer;
  letter-spacing: -0.005em;
  text-transform: none;
  background: none; border: none;
  font-family: inherit;
}
.composer-signature-label .action-link:hover { text-decoration: underline; }

/* ─── Sidebar Comms pulse dot (Section 3) ───────────────────────────── */
.em2-sidebar-pulse-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--em2-ok-fg);
  animation: em2-pulse-sidebar 1.6s ease-in-out infinite;
  margin-left: 6px;
  flex-shrink: 0;
}

/* ─── Inbox header (above the list, below the filter bar) ──────────── */
.em2-inbox-h {
  padding: 10px 16px 6px;
  display: flex; align-items: center; justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid var(--s100, #F5F5F4);
}
.em2-inbox-h-l {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--s500, #78716C);
  display: flex; align-items: center; gap: 8px;
}
.em2-inbox-h-sub {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--s500, #78716C);
  text-transform: none;
}
.em2-attention-c {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 6px;
  background: rgba(220, 38, 38, .12);
  color: var(--em2-urgent-fg);
  border-radius: 5px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
}
.em2-attention-c-mute {
  background: var(--s100, #F5F5F4);
  color: var(--s500, #78716C);
}

/* ─── Email row (the meat of the list) ─────────────────────────────── */
.em2-row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px 12px 17px;
  border-bottom: 1px solid var(--s100, #F5F5F4);
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background 180ms cubic-bezier(.4,0,.2,1);
}
.em2-row:hover { background: var(--s50, #FAFAF9); }
.em2-row.is-selected {
  background: var(--pale-red, #FBF3F4);
  box-shadow: inset 3px 0 0 var(--red, #C41230);
}
.em2-row.is-unread .em2-row-name,
.em2-row.is-unread .em2-row-subj { font-weight: 800; color: var(--ink, #0A0A0A); }
.em2-row-av {
  width: 36px; height: 36px;
  border-radius: 9px;
  color: #fff;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.em2-row-mid {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 3px;
}
.em2-row-head {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.em2-row-name {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 700;
  color: var(--ink, #0A0A0A);
  letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.em2-row-time {
  font-size: 11px; font-weight: 600;
  color: var(--s500, #78716C);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.em2-row.em2-pulse-urgent .em2-row-time { color: var(--em2-urgent-fg); font-weight: 800; }
.em2-row.em2-pulse-warn   .em2-row-time { color: var(--em2-warn-fg);   font-weight: 800; }
.em2-row-subj {
  font-size: 12.5px; font-weight: 600;
  color: var(--s700, #44403C);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: -0.005em;
}
.em2-row-preview {
  font-size: 11.5px; font-weight: 500;
  color: var(--s500, #78716C);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.em2-row-chips {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 4px;
}
.em2-unread-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--em2-ok-fg);
  flex-shrink: 0;
  margin-top: 13px;
  align-self: flex-start;
  box-shadow: 0 0 0 2px #fff;
}
.em2-row.em2-pulse-urgent .em2-unread-dot { background: var(--em2-urgent-fg); animation: em2-dot-red 1.4s ease-in-out infinite; }
.em2-row.em2-pulse-warn   .em2-unread-dot { background: var(--em2-warn-fg);   animation: em2-dot-yellow 1.6s ease-in-out infinite; }
.em2-row.em2-pulse-new    .em2-unread-dot { animation: em2-dot-green 1.6s ease-in-out infinite; }

/* Per-row context chips (Deals / Leads / Follow-up / Urgent / ref number) */
.em2-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.em2-chip-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
}
.em2-chip-deal     { background: #DCFCE7; color: var(--em2-ok-fg); }
.em2-chip-deal .em2-chip-dot     { background: var(--em2-ok-fg); }
.em2-chip-lead     { background: #DBEAFE; color: #1D4ED8; }
.em2-chip-lead .em2-chip-dot     { background: #1D4ED8; }
.em2-chip-followup { background: #FEF3C7; color: var(--em2-warn-fg); }
.em2-chip-followup .em2-chip-dot { background: var(--em2-warn-fg); }
.em2-chip-urgent   { background: #FEE2E2; color: var(--em2-urgent-fg); }
.em2-chip-urgent .em2-chip-dot   { background: var(--em2-urgent-fg); }
.em2-chip-ref {
  background: var(--s100, #F5F5F4);
  color: var(--s700, #44403C);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* Per-row hover actions (archive / delete) — fade in when row is hovered */
.em2-row:hover .em2-row-actions { opacity: 1 !important; }
.em2-row-act:hover { background: var(--s100, #F5F5F4) !important; color: var(--ink, #0A0A0A) !important; }
.em2-row-act[data-action="email-delete"]:hover { background: #FEE2E2 !important; color: #DC2626 !important; }