/* styles-additions-v32.css — MB12: Identity prominence + Q1 popover + Q3 refine
 *
 * Loaded AFTER v31.css. Cache buster v=235.
 *
 * Sections:
 *   1. Identity pills (M1/M2) — recipient name + role + account badges
 *   2. Composer header redesign (M1)
 *   3. Contact panels identity (M2a)
 *   4. Activity list identity (M2b)
 *   5. Account header identity (M2c)
 *   6. Q1 contact card quick actions popover
 *   7. Q2 smart intake suggestion chips + tooltips
 *   8. Q3 type-your-own + Refine button
 */


/* =============================================================
 * 1. Identity pills — reusable token classes
 * ============================================================= */

/* Primary name pill — black bg, yellow text. Use for recipient names. */
.id-pill-name {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: #171717;
  color: var(--color-accent, #FFD500);
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-family: inherit;
}

/* Role badge — outlined, neutral. Use for titles/positions. */
.id-pill-role {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--surface-card, #fff);
  color: var(--text-primary, #171717);
  border: 1.5px solid #171717;
  border-radius: 999px;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Account/company chip — subtle yellow tint */
.id-pill-account {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: rgba(255, 213, 0, 0.18);
  color: #171717;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
}

/* Stack of pills with consistent gap */
.id-pill-stack {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* Status modifier — recent / dormant / new */
.id-pill-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.id-pill-status[data-status="new"] {
  background: rgba(255, 213, 0, 0.25);
  color: #171717;
}
.id-pill-status[data-status="recent"] {
  background: rgba(22, 163, 74, 0.18);
  color: #16a34a;
}
.id-pill-status[data-status="dormant"] {
  background: var(--surface-subtle, #f8f8f7);
  color: var(--text-tertiary, #a3a3a3);
}


/* =============================================================
 * 2. Composer header redesign (M1)
 *
 * Replaces the small "Compose email · OES Equipment · Houston, TX"
 * subtitle line with a bold identity block.
 * ============================================================= */

.ec-header {
  padding: var(--space-4, 16px) var(--space-5, 20px);
  border-bottom: 1px solid var(--border-default, #e5e5e5);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3, 12px);
}

.ec-header-identity {
  flex: 1;
  min-width: 0;
}

/* Eyebrow text — "Compose email" or "Re-engaging" etc. */
.ec-header-eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary, #525252);
  margin-bottom: 6px;
}

/* Identity row — main pill stack */
.ec-header-identity-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* Context line — account name + location below identity */
.ec-header-context {
  font-size: 12px;
  color: var(--text-secondary, #525252);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ec-header-context-sep {
  color: var(--text-tertiary, #a3a3a3);
}

.ec-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: var(--text-secondary, #525252);
  flex-shrink: 0;
}
.ec-close:hover {
  background: var(--surface-subtle, #f8f8f7);
}

/* Batch badge restyled to fit new header */
.ec-modal[data-batch-mode="true"] .ec-header-eyebrow {
  color: #171717;
}
.ec-modal[data-batch-mode="true"] .ec-header-eyebrow::before {
  content: '⚡ ';
  color: var(--color-accent, #FFD500);
}

/* Migration aid: hide the old #ec-title if present */
.ec-header-identity #ec-title {
  display: none;
}


/* =============================================================
 * 3. Contact panels identity (M2a)
 * ============================================================= */

/* Account panel contact rows get pill treatment for names */
.tcpanel-contacts-row,
.tcpr-contact-row {
  padding: var(--space-2, 8px) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  border-bottom: 1px solid var(--border-subtle, #f0f0f0);
}
.tcpanel-contacts-row:last-child,
.tcpr-contact-row:last-child {
  border-bottom: none;
}

/* MB12 M2a: contact-link rendered as a name pill */
.tcpr-contact-link {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: #171717;
  color: var(--color-accent, #FFD500);
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.tcpr-contact-link:hover {
  background: #2a2a2a;
}
.tcpr-contact-role {
  font-size: 12px;
  color: var(--text-secondary, #525252);
  margin-left: 8px;
}


/* =============================================================
 * 4. Activity list identity (M2b)
 * ============================================================= */

.al-row-contact-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  background: #171717;
  color: var(--color-accent, #FFD500);
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
}
.al-row-time {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-tertiary, #a3a3a3);
  margin-left: auto;
}


/* =============================================================
 * 5. Account header identity (M2c)
 * ============================================================= */

.account-header-name-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  background: var(--color-accent, #FFD500);
  color: #171717;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}


/* =============================================================
 * 6. Q1 — contact card quick actions popover
 * ============================================================= */

.qa-popover {
  position: absolute;
  z-index: 9999;
  background: #171717;
  color: #fff;
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
  animation: qa-fade-in 120ms ease-out;
}

@keyframes qa-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.qa-popover-action {
  background: transparent;
  border: none;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qa-popover-action:hover {
  background: rgba(255, 213, 0, 0.18);
  color: var(--color-accent, #FFD500);
}
.qa-popover-action-primary {
  background: var(--color-accent, #FFD500);
  color: #171717;
  font-weight: 600;
}
.qa-popover-action-primary:hover {
  background: #fcc500;
  color: #171717;
}
.qa-popover-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 8px;
}


/* =============================================================
 * 7. Q2 — smart intake suggestion chips + tooltips
 * ============================================================= */

/* Suggested chip — pulses subtly to indicate AI suggestion */
.ec-chip[data-suggested="true"] {
  position: relative;
  border-color: var(--color-accent, #FFD500) !important;
  background: rgba(255, 213, 0, 0.15);
}
.ec-chip[data-suggested="true"]::after {
  content: '✨';
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 10px;
  background: var(--color-accent, #FFD500);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Suggestion "why" hint — small italic text below carousel */
.ec-suggestion-hint {
  font-size: 11px;
  font-style: italic;
  color: var(--text-secondary, #525252);
  margin-top: 6px;
  padding-left: var(--space-2, 8px);
  border-left: 2px solid var(--color-accent, #FFD500);
}
.ec-suggestion-hint-icon {
  margin-right: 4px;
  font-style: normal;
}

/* Further-actions row — appears below intake carousel when relevant */
.ec-further-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-2, 8px);
  padding: var(--space-2, 8px);
  background: rgba(255, 213, 0, 0.08);
  border-radius: 6px;
  border: 1px dashed var(--color-accent, #FFD500);
}
.ec-further-actions-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary, #525252);
  width: 100%;
  margin-bottom: 2px;
}
.ec-further-action-chip {
  background: var(--surface-card, #fff);
  border: 1px solid var(--text-primary, #171717);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-primary, #171717);
}
.ec-further-action-chip:hover {
  background: var(--color-accent, #FFD500);
}


/* =============================================================
 * 8. Q3 — type-your-own + Refine mode
 * ============================================================= */

/* "Refine with AI" button — shown when body has user content + no drafts yet */
.ec-refine-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--surface-subtle, #f8f8f7);
  border: 1px solid var(--border-default, #e5e5e5);
  border-radius: 6px;
  margin-top: var(--space-2, 8px);
}
.ec-refine-bar[data-visible="true"] {
  display: flex;
}
.ec-refine-bar-text {
  font-size: 12px;
  color: var(--text-secondary, #525252);
}
.ec-refine-bar-text strong {
  color: var(--text-primary, #171717);
}
.ec-refine-btn {
  background: var(--color-accent, #FFD500);
  color: #171717;
  border: none;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ec-refine-btn:hover {
  background: #fcc500;
}
.ec-refine-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* When drafts panel is in "refine" mode — different header */
.ec-drafts-panel[data-mode="refine"] .ec-drafts-header::before {
  content: '✨ Refinement suggestions · ';
  font-weight: 600;
}