/* RevSquad - email in the deal (MAIL). One reader for a customer email thread, shared by the
   Deal Room, the customer page, the dashboard and the floating Coach. Behaviour lives in
   email-thread.js. Everything is prefixed em- and carries its own tokens (the RevSquad palette,
   nothing else), so it looks the same on every page and page styles cannot reach in.
   Solid colours only, hairline borders, soft shadows, short eased motion that switches off for
   anyone who asks for reduced motion. */

:root {
  --em-primary: #2557E8; --em-primary-hover: #1A41B8; --em-primary-tint: #ECF1FD; --em-primary-soft: #F5F8FF;
  --em-ink: #101623; --em-body: #37404F; --em-text-2: #5E6675; --em-text-3: #8A94A8;
  --em-line: #E3E8EF; --em-line-soft: #EEF1F6; --em-bg: #F4F6FA; --em-surface: #FFFFFF;
  --em-amber: #FFB02E; --em-amber-bg: #FFF6E5; --em-amber-text: #8A5A00; --em-amber-line: #F5DDA8;
  --em-risk: #C03A29; --em-risk-bg: #FDEEEB; --em-ok: #0B7A55; --em-ok-bg: #E9F8F1;
  --em-chip: #EEF1F6; --em-scribe: #0B7A55;
  --em-role-decision: #8A5A00; --em-role-approver: #2557E8; --em-role-champion: #0B7A55;
  --em-role-influencer: #5E6675; --em-role-blocker: #C03A29; --em-role-user: #8A94A8;
  --em-ease: cubic-bezier(.2, .8, .2, 1);
  --em-ring: 0 0 0 3px rgba(37, 87, 232, .18);
  --em-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --em-shadow-md: 0 8px 24px -8px rgba(16, 24, 40, .14), 0 2px 6px -2px rgba(16, 24, 40, .06);
  --em-shadow-lg: 0 28px 64px -18px rgba(16, 24, 40, .30), 0 8px 20px -8px rgba(16, 24, 40, .10);
}

/* ---------------- pieces any page can place in its own lists ---------------- */

.em-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Whose turn it is: the customer is waiting on us (amber), or we are waiting on them (quiet grey). */
.em-state { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
            line-height: 1; white-space: nowrap; background: var(--em-chip); color: var(--em-text-2); }
.em-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.em-state.us { background: var(--em-amber-bg); color: var(--em-amber-text); }
.em-state.us.late { background: var(--em-risk-bg); color: var(--em-risk); }
.em-faces { display: inline-flex; align-items: center; padding-left: 3px; }
.em-face { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: -3px; border-radius: 50%; flex: none;
           background: var(--em-c, var(--em-text-3)); color: var(--em-surface); font-size: 9.5px; font-weight: 600; letter-spacing: .02em;
           box-shadow: 0 0 0 2px var(--em-surface); user-select: none; }
.em-face.ours { --em-c: var(--em-ink); }
.role-decision_maker { --em-c: var(--em-role-decision); } .role-approver { --em-c: var(--em-role-approver); }
.role-champion { --em-c: var(--em-role-champion); } .role-influencer { --em-c: var(--em-role-influencer); }
.role-blocker { --em-c: var(--em-role-blocker); } .role-user { --em-c: var(--em-role-user); }
.em-unread { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--em-primary); flex: none; }

/* ---------------- the reader ---------------- */

.em-root { position: fixed; inset: 0; z-index: 64; font: 400 14px/1.5 "Funnel Sans", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
           color: var(--em-body); -webkit-font-smoothing: antialiased; }
.em-root, .em-root * { box-sizing: border-box; }
.em-root[hidden], .em-root [hidden] { display: none !important; }
.em-root button, .em-root input, .em-root textarea { font: inherit; color: inherit; letter-spacing: normal; margin: 0; }
.em-root button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.em-root :focus-visible { outline: none; box-shadow: var(--em-ring); }
.em-root a { color: var(--em-primary); text-decoration: none; }
.em-root a:hover { text-decoration: underline; text-underline-offset: 3px; }

.em-backdrop { position: absolute; inset: 0; background: var(--em-ink); opacity: .2; animation: em-fade .2s var(--em-ease); }
.em-sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(760px, 100%); display: flex; flex-direction: column; min-height: 0;
            background: var(--em-surface); box-shadow: var(--em-shadow-lg); animation: em-in .24s var(--em-ease);
            transition: width .24s var(--em-ease); }
.em-sheet.wide { width: min(1140px, 100%); }
@keyframes em-in { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes em-fade { from { opacity: 0; } }
@keyframes em-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes em-pulse { 50% { opacity: .5; } }
@keyframes em-dots { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* header */
.em-head { display: flex; align-items: flex-start; gap: 16px; padding: 20px 20px 14px 26px; border-bottom: 1px solid var(--em-line); }
.em-head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.em-title { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.012em; color: var(--em-ink); overflow-wrap: anywhere;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.em-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: var(--em-text-2); }
.em-meta .em-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--em-text-3); }
.em-head-actions { display: flex; align-items: center; gap: 2px; margin-top: -2px; }
.em-icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--em-text-2);
               transition: background .14s var(--em-ease), color .14s var(--em-ease); }
.em-icon-btn:hover { background: var(--em-primary-soft); color: var(--em-primary); }
.em-icon-btn[disabled] { opacity: .45; cursor: default; background: transparent; color: var(--em-text-2); }
a.em-icon-btn:hover { text-decoration: none; }

/* the deal the thread is filed on, and the menu that moves it */
.em-menu-wrap { position: relative; display: inline-flex; }
.em-deal { display: inline-flex; align-items: center; gap: 6px; max-width: 320px; height: 26px; padding: 0 8px 0 10px; border: 0; border-radius: 999px;
           background: var(--em-primary-tint); color: var(--em-primary); font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: background .14s var(--em-ease); }
.em-deal span { overflow: hidden; text-overflow: ellipsis; }
.em-deal:hover { box-shadow: inset 0 0 0 1px currentColor; }
.em-deal.pick { background: var(--em-amber-bg); color: var(--em-amber-text); }
.em-deal.pick:hover { box-shadow: inset 0 0 0 1px currentColor; }
.em-deal .em-ico { width: 13px; height: 13px; }
.em-deal.static { cursor: default; }
.em-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; min-width: 240px; max-width: 340px; max-height: 320px; overflow-y: auto; padding: 6px;
           display: flex; flex-direction: column; background: var(--em-surface); border: 1px solid var(--em-line); border-radius: 12px; box-shadow: var(--em-shadow-md);
           animation: em-rise .14s var(--em-ease); }
.em-head-actions .em-menu { left: auto; right: 0; }
.em-menu > button, .em-menu > a { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent;
           color: var(--em-ink); font-size: 13.5px; text-align: left; text-decoration: none; overflow-wrap: anywhere; }
.em-menu > button:hover, .em-menu > a:hover { background: var(--em-primary-soft); color: var(--em-primary); text-decoration: none; }
.em-menu > button.now { color: var(--em-primary); font-weight: 600; }
.em-menu > button.danger { color: var(--em-risk); }
.em-menu > button.danger:hover { background: var(--em-risk-bg); color: var(--em-risk); }
.em-menu .em-menu-k { padding: 6px 10px 2px; font-size: 11.5px; font-weight: 600; color: var(--em-text-3); }
.em-menu .em-menu-note { padding: 4px 10px 8px; font-size: 12.5px; color: var(--em-text-2); }
.em-menu .em-menu-row { display: flex; gap: 6px; padding: 2px 6px 4px; }

/* body: the conversation, and on wide screens the team's answers beside the reply box */
.em-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.em-sheet.wide .em-body { grid-template-columns: minmax(0, 1fr) 360px; }
.em-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.em-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 26px 24px; scrollbar-width: thin; scrollbar-color: var(--em-line) transparent; }

.em-people { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 13px; color: var(--em-text-2); min-width: 0; }
.em-people .em-faces { flex: none; }
.em-people span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Scribe's reading: where the thread stands and what the customer asked */
.em-brief { margin-bottom: 18px; padding: 14px 16px; border-radius: 12px; background: var(--em-bg); animation: em-rise .24s var(--em-ease); }
.em-brief-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--em-text-2); }
.em-bot { position: relative; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: var(--em-scribe); color: var(--em-surface);
          font-size: 8.5px; font-weight: 700; letter-spacing: .02em; }
/* a squad member wears its portrait (Scribe green, Mail Bot red underneath); letters only if it cannot load */
.em-bot-mail { background: var(--em-risk); }
.em-bot.has-face { color: transparent; }
.em-bot img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; pointer-events: none; }
.em-gist { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--em-ink); overflow-wrap: anywhere; }
.em-asks { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.em-asks li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; font-size: 13.5px; color: var(--em-body); }
.em-asks li .mark { width: 7px; height: 7px; border-radius: 50%; background: var(--em-amber); margin-left: 4px; transform: translateY(-1px); }
.em-asks li.done { color: var(--em-text-2); }
.em-asks li.done .mark { width: 12px; height: 12px; margin-left: 1px; background: transparent; color: var(--em-ok); transform: translateY(1px); }
.em-asks li.done .mark .em-ico { width: 12px; height: 12px; stroke-width: 2.4; }
.em-asks li .who { font-size: 12px; color: var(--em-text-3); white-space: nowrap; }
.em-brief.loading .em-sk { display: block; height: 12px; border-radius: 6px; background: var(--em-line-soft); animation: em-pulse 1.2s ease-in-out infinite; }
.em-brief.loading .em-sk + .em-sk { margin-top: 8px; width: 62%; }

/* the messages */
.em-msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.em-msg { border-top: 1px solid var(--em-line-soft); }
.em-msg:first-child { border-top: 0; }
.em-msg.fresh { animation: em-rise .3s var(--em-ease); }
.em-msg-head { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0;
               background: transparent; text-align: left; border-radius: 10px; }
.em-msg:not(.open) .em-msg-head:hover .em-snip, .em-msg:not(.open) .em-msg-head:hover b { color: var(--em-ink); }
.em-msg-head .em-face { width: 32px; height: 32px; margin: 0; font-size: 11.5px; box-shadow: none; }
.em-who { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.em-who .line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.em-who b { font-weight: 600; color: var(--em-ink); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* its own name: pages also load squad.css, whose global .tag is a mono chip */
.em-who .em-sent { flex: none; font-size: 11.5px; font-weight: 600; color: var(--em-primary); }
.em-snip { font-size: 13px; color: var(--em-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-to { font-size: 12.5px; color: var(--em-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-when { font-size: 12.5px; color: var(--em-text-3); white-space: nowrap; }
.em-msg.open .em-msg-head { cursor: default; padding-bottom: 6px; }
.em-msg-body { padding: 0 0 18px 44px; animation: em-rise .2s var(--em-ease); }
.em-text { font-size: 14.5px; line-height: 1.62; color: var(--em-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.em-text a { overflow-wrap: anywhere; }
.em-quote-btn { display: inline-flex; align-items: center; justify-content: center; height: 18px; min-width: 32px; margin-top: 10px; padding: 0 8px; border: 0;
                border-radius: 999px; background: var(--em-chip); color: var(--em-text-2); font-size: 13px; font-weight: 700; letter-spacing: .12em; line-height: 1; }
.em-quote-btn:hover { background: var(--em-line); color: var(--em-ink); }
.em-quoted { margin-top: 10px; padding: 2px 0 2px 14px; border-left: 2px solid var(--em-line); font-size: 13.5px; line-height: 1.55; color: var(--em-text-2);
             white-space: pre-wrap; overflow-wrap: anywhere; }
.em-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.em-file { display: inline-flex; align-items: center; gap: 7px; max-width: 280px; height: 30px; padding: 0 11px; border: 1px solid var(--em-line); border-radius: 9px;
           font-size: 12.5px; color: var(--em-ink); background: var(--em-surface); }
.em-file span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-file .size { color: var(--em-text-3); flex: none; }
.em-file .em-ico { width: 14px; height: 14px; color: var(--em-text-2); }
.em-msg-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--em-text-3); }
.em-fold { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--em-line-soft); background: transparent;
           color: var(--em-primary); font-size: 13px; font-weight: 600; text-align: left; }
.em-fold::before { content: ""; width: 32px; height: 1px; background: var(--em-line); }
.em-fold:hover { color: var(--em-primary-hover); }
.em-loading { padding: 4px 0; }
.em-loading i { display: block; height: 44px; margin: 10px 0; border-radius: 10px; background: var(--em-line-soft); animation: em-pulse 1.2s ease-in-out infinite; }
.em-error { padding: 18px 0; color: var(--em-risk); font-size: 14px; }

/* ---------------- the reply box ---------------- */

.em-compose { flex: none; border-top: 1px solid var(--em-line); background: var(--em-surface); padding: 12px 26px 16px; }
.em-compose-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.em-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
          border: 1px solid var(--em-line); background: var(--em-surface); color: var(--em-ink); white-space: nowrap; box-shadow: var(--em-shadow-xs);
          transition: border-color .14s var(--em-ease), background .14s var(--em-ease), color .14s var(--em-ease), box-shadow .14s var(--em-ease); }
.em-btn:hover:not([disabled]) { border-color: var(--em-text-3); }
.em-btn.primary { background: var(--em-primary); border-color: var(--em-primary); color: var(--em-surface); }
.em-btn.primary:hover:not([disabled]) { background: var(--em-primary-hover); border-color: var(--em-primary-hover); }
.em-btn.coach { color: var(--em-primary); border-color: var(--em-primary-tint); background: var(--em-primary-soft); box-shadow: none; }
.em-btn.coach:hover:not([disabled]) { border-color: var(--em-primary); background: var(--em-primary-tint); }
.em-btn.quiet { border-color: transparent; background: transparent; box-shadow: none; color: var(--em-text-2); padding: 0 10px; }
.em-btn.quiet:hover:not([disabled]) { color: var(--em-ink); background: var(--em-bg); border-color: transparent; }
.em-btn.quiet.on { color: var(--em-primary); background: var(--em-primary-soft); }
.em-btn[disabled] { opacity: .55; cursor: default; }
.em-btn .em-ico { width: 15px; height: 15px; }
.em-bar-gap { flex: 1; }
.em-line { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 13.5px; color: var(--em-text-2); }
.em-line a { font-weight: 600; }

.em-compose.open { padding-top: 6px; box-shadow: 0 -10px 24px -18px rgba(16, 24, 40, .18); }
.em-field { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 40px; border-bottom: 1px solid var(--em-line-soft);
            font-size: 13.5px; }
.em-field > label { color: var(--em-text-3); font-size: 13px; }
.em-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px 0; min-width: 0; position: relative; }
.em-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 260px; height: 26px; padding: 0 4px 0 10px; border-radius: 999px; background: var(--em-chip);
           color: var(--em-ink); font-size: 13px; }
.em-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-chip button { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: var(--em-text-2); }
.em-chip button:hover { background: var(--em-line); color: var(--em-ink); }
.em-chip button .em-ico { width: 12px; height: 12px; }
.em-chip.bad { background: var(--em-risk-bg); color: var(--em-risk); }
.em-chips input { flex: 1 1 120px; min-width: 120px; height: 28px; border: 0; padding: 0 4px; background: transparent; font-size: 13.5px; color: var(--em-ink); }
.em-chips input:focus { outline: none; }
.em-suggest { position: absolute; top: 100%; left: 0; z-index: 6; min-width: 260px; max-width: 100%; padding: 6px; background: var(--em-surface); border: 1px solid var(--em-line);
              border-radius: 12px; box-shadow: var(--em-shadow-md); display: flex; flex-direction: column; animation: em-rise .12s var(--em-ease); }
.em-suggest button { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; }
.em-suggest button:hover, .em-suggest button.on { background: var(--em-primary-soft); }
.em-suggest b { font-weight: 600; color: var(--em-ink); font-size: 13.5px; }
.em-suggest small { color: var(--em-text-2); font-size: 12px; }
.em-cc-toggle { border: 0; background: transparent; color: var(--em-text-2); font-size: 13px; font-weight: 600; padding: 4px 6px; border-radius: 6px; }
.em-cc-toggle:hover { color: var(--em-primary); }
.em-subject { width: 100%; height: 40px; border: 0; border-bottom: 1px solid var(--em-line-soft); padding: 0; background: transparent; font-size: 14px; font-weight: 600; color: var(--em-ink); }
.em-subject:focus { outline: none; border-bottom-color: var(--em-primary); }

.em-editor { position: relative; margin-top: 10px; }
.em-editor textarea { display: block; width: 100%; min-height: 132px; max-height: 42vh; resize: none; overflow-y: auto; border: 1px solid var(--em-line); border-radius: 12px;
                      padding: 12px 14px; font-size: 14.5px; line-height: 1.6; color: var(--em-ink); background: var(--em-surface);
                      transition: border-color .14s var(--em-ease), box-shadow .14s var(--em-ease); }
.em-editor textarea:focus { outline: none; border-color: var(--em-primary); box-shadow: var(--em-ring); }
.em-editor textarea::placeholder { color: var(--em-text-3); }
/* while Coach writes, the box shows a calm line and stays out of reach */
.em-editor.writing textarea { color: transparent; caret-color: transparent; background: var(--em-primary-soft); border-color: var(--em-primary-tint); }
.em-writing { position: absolute; left: 14px; top: 12px; right: 14px; display: none; flex-direction: column; gap: 9px; pointer-events: none; }
.em-editor.writing .em-writing { display: flex; }
/* while Coach writes, the box's hint hides too (its words already do), so only Coach's line shows */
.em-editor.writing textarea::placeholder { color: transparent; }
.em-writing .who { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--em-primary); }
.em-writing .who i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: em-dots 1.2s infinite; }
.em-writing .who i:nth-child(3) { animation-delay: .15s; } .em-writing .who i:nth-child(4) { animation-delay: .3s; }
.em-writing .bar { height: 9px; border-radius: 5px; background: var(--em-primary-tint); animation: em-pulse 1.4s ease-in-out infinite; }
.em-writing .bar:nth-of-type(2) { width: 88%; } .em-writing .bar:nth-of-type(3) { width: 64%; }
.em-writing .later { font-size: 12.5px; font-weight: 500; color: var(--em-text-2); }
.em-drafted { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--em-text-2); animation: em-rise .2s var(--em-ease); }
.em-drafted .em-bot { background: var(--em-risk); }
.em-drafted button { border: 0; background: transparent; padding: 2px 4px; border-radius: 6px; color: var(--em-primary); font-weight: 600; font-size: 12.5px; }
.em-drafted button:hover { text-decoration: underline; text-underline-offset: 3px; }
.em-compose-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.em-err { font-size: 13px; color: var(--em-risk); flex: 1 1 100%; order: 9; }
.em-err:empty { display: none; }

/* ---------------- how your team answered ---------------- */

.em-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--em-bg); border-left: 1px solid var(--em-line); animation: em-fade .2s var(--em-ease); }
.em-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 18px 8px 20px; }
.em-panel-head h3 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--em-ink); }
.em-panel-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 18px 20px 20px; display: flex; flex-direction: column; gap: 12px;
                 scrollbar-width: thin; scrollbar-color: var(--em-line) transparent; }
.em-ex { display: flex; flex-direction: column; gap: 9px; padding: 14px 15px 12px; border: 1px solid var(--em-line); border-radius: 12px; background: var(--em-surface);
         box-shadow: var(--em-shadow-xs); animation: em-rise .24s var(--em-ease) both; transition: border-color .14s var(--em-ease), box-shadow .14s var(--em-ease); }
.em-ex:hover { box-shadow: var(--em-shadow-md); }
.em-ex.chosen { border-color: var(--em-primary); box-shadow: var(--em-ring); }
.em-ex-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.em-ex-head b { font-weight: 600; color: var(--em-ink); }
.em-ex-head time { margin-left: auto; color: var(--em-text-3); font-size: 12px; white-space: nowrap; }
.em-ex-head .em-face { width: 22px; height: 22px; margin: 0; box-shadow: none; }
.em-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.em-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--em-chip); color: var(--em-text-2); font-size: 11.5px; font-weight: 600; }
.em-ex-ask { margin: 0; padding-left: 10px; border-left: 2px solid var(--em-line); font-size: 12.5px; line-height: 1.5; color: var(--em-text-2); overflow-wrap: anywhere;
             display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.em-ex-reply { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--em-body); white-space: pre-wrap; overflow-wrap: anywhere;
               display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.em-ex.full .em-ex-reply { display: block; -webkit-line-clamp: unset; }
.em-ex-how { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.45; color: var(--em-ink); }
.em-ex-how .em-ico { width: 14px; height: 14px; margin-top: 1px; color: var(--em-scribe); }
.em-outs { display: flex; flex-wrap: wrap; gap: 4px; }
.em-out { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
          background: var(--em-ok-bg); color: var(--em-ok); white-space: nowrap; }
.em-out .em-ico { width: 11px; height: 11px; stroke-width: 2.4; }
.em-out.plain { background: var(--em-chip); color: var(--em-text-2); }
.em-ex-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 2px; }
.em-tbtn { border: 0; background: transparent; padding: 3px 2px; border-radius: 6px; color: var(--em-primary); font-size: 13px; font-weight: 600; }
.em-tbtn:hover { color: var(--em-primary-hover); text-decoration: underline; text-underline-offset: 3px; }
.em-tbtn.muted { color: var(--em-text-2); font-weight: 500; }
.em-panel-empty { padding: 8px 2px; font-size: 13px; color: var(--em-text-2); }
.em-panel-sk i { display: block; height: 150px; border-radius: 12px; background: var(--em-surface); border: 1px solid var(--em-line-soft); animation: em-pulse 1.2s ease-in-out infinite; }
.em-panel-sk i + i { margin-top: 12px; height: 120px; }

/* the toast the reader leaves behind (Sent, Moved) */
.em-toast { position: fixed; z-index: 72; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 10px 16px; border-radius: 10px; background: var(--em-ink);
            color: var(--em-surface); font: 500 13.5px/1.4 "Funnel Sans", "IBM Plex Sans Arabic", system-ui, sans-serif; box-shadow: var(--em-shadow-md);
            animation: em-rise .2s var(--em-ease); }

/* ---------------- smaller screens ---------------- */

/* Below this width the team's answers sit inside the conversation, above the reply box. */
@media (max-width: 1100px) {
  .em-sheet.wide { width: min(760px, 100%); }
  .em-sheet.wide .em-body { grid-template-columns: minmax(0, 1fr); }
  .em-panel { border-left: 0; border-top: 1px solid var(--em-line); max-height: 46vh; }
}
@media (max-width: 640px) {
  .em-sheet, .em-sheet.wide { width: 100%; }
  .em-head { padding: 14px 10px 12px 16px; gap: 8px; }
  .em-title { font-size: 17px; }
  .em-scroll { padding: 14px 16px 20px; }
  .em-compose { padding: 10px 16px 14px; }
  .em-msg-body { padding-left: 0; }
  .em-msg-head { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; }
  .em-deal { max-width: 230px; }
  /* The File on menu opens leftward from the chip's right edge, so it never runs off the screen. */
  .em-meta .em-menu { left: auto; right: 0; max-width: calc(100vw - 32px); }
  .em-panel { max-height: 52vh; }
  .em-panel-head { padding: 14px 12px 6px 16px; }
  .em-panel-list { padding: 6px 12px 16px 16px; }
  .em-compose-bar .em-btn.quiet span { display: none; }
  .em-editor textarea { min-height: 120px; max-height: 34vh; }
}
@media (hover: none) { .em-msg-head:hover b { color: inherit; } }
@media (prefers-reduced-motion: reduce) {
  .em-backdrop, .em-sheet, .em-brief, .em-msg.fresh, .em-msg-body, .em-menu, .em-suggest, .em-ex, .em-panel, .em-drafted, .em-toast, .em-draft { animation: none; }
  .em-sheet { transition: none; }
  .em-writing .bar, .em-writing .who i, .em-loading i, .em-panel-sk i, .em-brief.loading .em-sk { animation: none; }
  .em-btn, .em-icon-btn, .em-deal, .em-ex, .em-editor textarea { transition: none; }
}
@media print { .em-root { display: none !important; } }

/* The reply card: under the last message, scrolling with the conversation, like a mail client's
   inline reply. Its words sit straight on the card; the card shows focus. */
.em-draft { margin: 14px 0 4px; padding: 4px 16px 12px; border: 1px solid var(--em-line); border-radius: 14px; background: var(--em-surface);
            box-shadow: var(--em-shadow-xs); animation: em-rise .22s var(--em-ease); transition: border-color .14s var(--em-ease), box-shadow .14s var(--em-ease), background .2s var(--em-ease); }
.em-draft:focus-within { border-color: var(--em-primary-tint); box-shadow: var(--em-shadow-md); }
.em-draft .em-field:last-of-type { border-bottom-color: var(--em-line-soft); }
.em-draft .em-editor { margin-top: 4px; }
.em-draft .em-editor textarea { border: 0; border-radius: 0; padding: 10px 0 4px; min-height: 150px; background: transparent; box-shadow: none; }
.em-draft .em-editor textarea:focus { box-shadow: none; }
.em-draft:has(.em-editor.writing) { background: var(--em-primary-soft); border-color: var(--em-primary-tint); }
.em-draft .em-editor.writing textarea { background: transparent; }
.em-draft .em-writing { left: 0; right: 0; top: 12px; }
.em-compose.open .em-compose-foot { margin-top: 0; }
/* a new email: the card is the whole sheet */
.em-sheet.new .em-draft { margin: 0; padding: 0; border: 0; box-shadow: none; animation: none; background: transparent; }
.em-sheet.new .em-draft:focus-within { box-shadow: none; }
.em-sheet.new .em-draft .em-editor textarea { min-height: 320px; max-height: none; }
.em-body { grid-template-rows: minmax(0, 1fr); }
@media (max-width: 1100px) { .em-body { grid-template-rows: minmax(0, 1fr) auto; } }
@media (prefers-reduced-motion: reduce) { .em-draft { animation: none; transition: none; } }
/* On a phone, Coach's draft leads the bar on its own line; Reply and Reply all share the next one. */
@media (max-width: 640px) {
  .em-compose-bar .em-btn.coach { order: -1; flex: 1 1 100%; }
  .em-compose-bar .em-bar-gap { display: none; }
  .em-compose-bar .em-btn:not(.coach) { flex: 1 1 0; }
  .em-compose-foot .em-btn.coach span:not(.em-bot) { display: none; }
  .em-compose-foot .em-btn.coach { width: 40px; padding: 0; }
}