/* Focus and History timeline (B-033). Dashed 2px line on the left; 40px circles for items with a
   card, 16px empty circles for changelog rows. */
.timeline { display: flex; flex-direction: column; gap: var(--sp-7); }
.tl-section-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); min-height: 32px; }
.tl-section-head {
  display: inline-flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-2); border: 0; background: none;
  color: var(--text); font: inherit; cursor: pointer; border-radius: var(--r-sm);
}
.tl-section-head:focus-visible { outline: 2px solid var(--border-focus); }
.tl-section-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-lg); }
.tl-section-caret { width: 16px; height: 16px; color: var(--text); transition: transform var(--t-med) var(--ease); }
.tl-section.is-collapsed .tl-section-caret { transform: rotate(-90deg); }
.tl-section.is-collapsed .tl-section-body { display: none; }
.tl-section-body { margin-top: var(--sp-5); }
.tl-expand { font-weight: var(--fw-regular); color: var(--text); font-size: var(--fs-md); }

.tl-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.tl-chip {
  height: 28px; padding: 0 var(--sp-4); border: 0; border-radius: var(--r-sm); background: none; color: var(--text);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.tl-chip:hover { background: var(--bg-hover); }
.tl-chip.is-active { background: var(--bg-selected); color: var(--link); }
.tl-chip:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }

.tl-list { position: relative; display: flex; flex-direction: column; gap: var(--sp-5); }
.tl-list::before {
  content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; border-left: 2px dashed var(--tl-line);
}
.tl-item { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.tl-circle {
  position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-surface); box-shadow: var(--shadow-raised); color: var(--text-2);
}
.tl-circle .ic, .tl-circle svg { width: 16px; height: 16px; display: block; }
.tl-dot {
  position: relative; z-index: 1; justify-self: center; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%;
  background: var(--bg-surface); border: 1px solid var(--border-strong);
}
.tl-body { position: relative; min-width: 0; }
.tl-card {
  min-width: 0; padding: var(--sp-5) var(--sp-9) var(--sp-5) var(--sp-6); border-radius: var(--r-md);
  background: var(--bg-surface); box-shadow: var(--shadow-raised);
}
.tl-plain { padding: 0 var(--sp-9) 0 0; }
.tl-toggle {
  position: absolute; top: var(--sp-4); right: var(--sp-4); display: grid; place-items: center; width: 24px; height: 24px;
  padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); cursor: pointer;
}
.tl-item.is-small .tl-toggle { top: -2px; right: 0; }
.tl-toggle:hover { background: var(--bg-hover); color: var(--text); }
.tl-toggle:focus-visible { outline: 2px solid var(--border-focus); }
.tl-toggle .ic, .tl-toggle svg { width: 14px; height: 14px; display: block; }
.tl-item.is-expanded .tl-toggle svg { transform: rotate(180deg); }

/* Hamid 2026-10-16: the activity's '...' menu sits just left of the expand arrow. */
.tl-act-more { position: absolute; top: var(--sp-4); right: calc(var(--sp-4) + 28px); }
.tl-kind-activity .tl-card-head { padding-right: 56px; }
.popover .tl-act-menu { min-width: 180px; }
.tl-card-head { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.tl-check {
  flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); color: var(--text-inverse);
}
.tl-check.is-done { background: var(--green); border-color: var(--green); }
.tl-check .ic, .tl-check svg { width: 12px; height: 12px; display: block; }
.tl-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-title.is-done { text-decoration: line-through; color: var(--text-2); }
.tl-meta { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-sm); }
.tl-due.is-overdue { color: var(--red); }
.tl-due.is-today { color: var(--green); }
.tl-more { display: none; }
.tl-item.is-expanded .tl-more { display: block; }
.tl-act-note { margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-sm); background: var(--bg-note); }
/* A booked activity's note (the client's answers): always shown, 3 lines until 'Show all'. */
.tl-booked-note-text {
  line-height: var(--lh-md); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tl-booked-note-text.is-plain { white-space: pre-line; }
.tl-booked-note-text p { margin: 0; }
.tl-booked-note.is-open .tl-booked-note-text, .tl-item.is-expanded .tl-booked-note-text { display: block; -webkit-line-clamp: unset; }
.tl-item.is-expanded .tl-booked-note-more { display: none; }
.tl-booked-note-more { margin-top: var(--sp-2); padding: 0; height: auto; font: inherit; font-size: var(--fs-sm); color: var(--link); }

.tl-note { background: var(--bg-note); }
.tl-note-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.tl-note-head .tl-meta { margin: 0; }
.tl-note-text {
  margin-top: var(--sp-3); line-height: var(--lh-md); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tl-item.is-expanded .tl-note-text { display: block; -webkit-line-clamp: unset; }
.tl-note-text p { margin: 0; }
.tl-note-text ul, .tl-note-text ol { margin: var(--sp-2) 0; padding-left: var(--sp-7); }
.tl-note-text a, .tl-file-name { color: var(--link); }
.mention { padding: 0 var(--sp-2); border-radius: var(--r-sm); background: var(--mention-bg); color: var(--link); font-weight: var(--fw-semibold); white-space: nowrap; }
.tl-snippet { margin-top: var(--sp-3); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-item.is-expanded .tl-snippet { white-space: normal; }

.tl-line { line-height: var(--lh-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-item.is-expanded .tl-line { white-space: normal; overflow-wrap: anywhere; }
.tl-arrow { color: var(--text-2); }
.tl-won { color: var(--green); }
.tl-lost { color: var(--red); }

.tl-empty { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; padding: var(--sp-4) 0; color: var(--text-2); }
.timeline[aria-busy="true"][data-loaded="1"] .tl-list { opacity: 0.7; transition: opacity var(--t-med) var(--ease); }

/* Empty value in a change row: a small grey dash pill. */
.tl-empty-val {
  display: inline-block; min-width: 20px; padding: 0 var(--sp-3); border-radius: var(--r-sm); background: var(--bg-hover);
  color: var(--text-2); font-weight: var(--fw-regular); text-align: center;
}

/* ---- Note card actions and comments (B-034) ---- */
.tl-item.is-bare { grid-template-columns: minmax(0, 1fr); z-index: 1; }
.note-actions { display: flex; align-items: center; gap: var(--sp-1); flex: none; margin-right: var(--sp-2); }
.note-link {
  height: 24px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-sm); background: none; color: var(--link);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; white-space: nowrap;
}
.note-link:hover { background: rgba(33, 35, 44, 0.06); }
.note-act {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--text-2); cursor: pointer; transition: background var(--t-fast) var(--ease);
}
.note-act:hover, .note-act[aria-expanded="true"] { background: rgba(33, 35, 44, 0.08); color: var(--text); }
.note-act.is-static { cursor: default; }
.note-act.is-static:hover { background: none; color: var(--text-2); }
.note-link:focus-visible, .note-act:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.note-act .ic, .note-act svg { width: 16px; height: 16px; display: block; }
.tl-note.is-pinned .note-act[data-testid="note-pin"] { color: var(--text); }
.tl-note-head .tl-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popover .note-more-menu { min-width: 200px; }

.tl-note .note-edit-panel { padding: 0; margin-top: var(--sp-4); animation: none; }
.tl-note .note-edit-panel .note-editor { min-height: 80px; background: var(--bg-surface); border-color: var(--border); }
.tl-note .note-edit-panel .note-editor:focus { border-color: var(--yellow-icon); }
.tl-note.is-editing .tl-note-text { display: block; }

.note-thread { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid rgba(33, 35, 44, 0.1); }
.note-thread[hidden] { display: none; }
.note-av { width: 32px; height: 32px; }
.note-comment-new, .note-comment { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--sp-4); align-items: start; }
.note-comment-new { grid-template-columns: 32px minmax(0, 1fr); }
.note-comment-box { display: flex; flex-direction: column; gap: var(--sp-4); }
.note-comment-input {
  width: 100%; min-height: 32px; max-height: 200px; padding: var(--sp-3) var(--sp-5); resize: none;
  background: var(--bg-surface); line-height: var(--lh-md); font: inherit;
}
.note-comment-input.has-error { border-color: var(--red); }
.note-comment-foot { display: flex; justify-content: flex-end; gap: var(--sp-4); }
.note-comment-list { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-5); }
.note-comment-list:empty { display: none; }
.note-comment-meta { margin: 0 0 var(--sp-1); }
.note-comment-text { line-height: var(--lh-md); overflow-wrap: anywhere; }
.note-comment-text p { margin: 0; }
.note-comment-del { opacity: 0; }
.note-comment:hover .note-comment-del, .note-comment-del:focus-visible { opacity: 1; }
@media (hover: none) { .note-comment-del { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tl-section-caret, .tl-chip, .note-act { transition: none; } }

/* ---- File item (B-032, file-item.js) ---- */
.file-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-width: 0; }
.file-name-line { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.file-doc-ic, .file-doc-ic svg { width: 16px; height: 16px; flex: none; color: var(--text-2); display: block; }
.file-link {
  color: var(--link); font-weight: var(--fw-semibold); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-link:hover { text-decoration: underline; }
.file-link:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.popover .file-menu { min-width: 160px; }

/* ---- Email items (B-057) ---- */
.tl-mail-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); min-width: 0; }
.tl-mail-subject { min-width: 0; font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.tl-mail-ago { color: var(--text-2); font-size: var(--fs-sm); }
.tl-mail-spacer { flex: 1; }
.tl-pill {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--sp-4); border-radius: var(--r-pill);
  background: var(--bg-hover); color: var(--text-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
.tl-pill.is-draft { background: var(--bg-note); color: var(--yellow-text); }
.tl-pill.is-scheduled { background: var(--bg-info); color: var(--link); }
.tl-mail-reply { display: inline-flex; align-items: center; gap: var(--sp-2); }
.tl-mail-reply .ic, .tl-mail-reply svg { width: 14px; height: 14px; display: block; }
.tl-mail-reply .tl-mail-caret, .tl-mail-reply .tl-mail-caret svg { width: 8px; height: 8px; }
/* Client replies (fix round): inbound 'Mark as unread' sits next to Reply; the email that came in unread this visit
   keeps a 'New reply' pill (kit.css .rply-pill), a bold subject and a blue left edge. */
.tl-mail-unread { display: inline-flex; align-items: center; gap: var(--sp-2); }
.tl-mail-unread .ic, .tl-mail-unread svg { width: 14px; height: 14px; display: block; }
.tl-mail-subject.is-new-reply { font-weight: 700; color: var(--text); }
.tl-mail.is-new-reply { box-shadow: var(--shadow-raised), inset 3px 0 0 var(--reply-blue); }
.tl-mail-addr { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-6); margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text); overflow-wrap: anywhere; }
.tl-mail-k { color: var(--text-2); }
.tl-mail-body {
  margin-top: var(--sp-4); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.tl-item.is-expanded .tl-mail-body { color: var(--text); white-space: normal; overflow-wrap: anywhere; line-height: var(--lh-md); cursor: auto; }
.tl-mail-body p { margin: 0 0 var(--sp-3); }
.tl-mail-body a { color: var(--link); }
.tl-mail-full img { max-width: 100%; height: auto; vertical-align: middle; }
.tl-mail-full blockquote { margin: var(--sp-2) 0 0; padding: 0 0 0 var(--sp-5); border-left: 2px solid var(--border-strong); color: var(--text-2); }
.tl-mail-foot { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.tl-mail-link { color: var(--link); }
.tl-mail.is-draft { box-shadow: var(--shadow-raised), inset 3px 0 0 var(--yellow-icon); }

/* ---- UX-064: lead panel's empty Focus (title + one grey line above the quick scheduler) ---- */
.tl-focus-intro { padding: var(--sp-5) var(--sp-6) var(--sp-6); text-align: center; }
.tl-focus-intro[hidden], .tl-section.is-collapsed .tl-focus-intro { display: none; }
.tl-focus-intro-title { font-size: calc(var(--fs-lg) + 2px); line-height: var(--lh-lg); font-weight: var(--fw-semibold); color: var(--text); }
.tl-focus-intro-text { max-width: 330px; margin: var(--sp-3) auto 0; color: var(--text-2); font-size: var(--fs-md); line-height: var(--lh-md); }
/* 'Converted to deal: <title> ↗' in a lead's History. */
.tl-converted-link { display: inline; color: var(--link); font-weight: var(--fw-semibold); text-decoration: none; overflow-wrap: anywhere; }
.tl-converted-link:hover .tl-converted-title { text-decoration: underline; }
.tl-converted-link:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; border-radius: var(--r-sm); }
.tl-converted-ic { display: inline-block; margin-left: var(--sp-2); vertical-align: -1px; }
.tl-converted-ic, .tl-converted-ic svg { width: 12px; height: 12px; }
.tl-line.tl-converted { display: block; }

/* Client replies (Build A): an incoming attachment's 'From email' shows the email's subject on hover. */
.tl-mail-head .matt-clip { align-self: center; }
.file-from-mail { cursor: default; }

/* ---- UX-173: who did it. A 16px round mark just before an item's time; the words are in its tooltip. It sits
   on the text baseline inside the 16px line, so a row is exactly as tall with or without it (no layout shift). ---- */
.tl-who {
  display: inline-block; vertical-align: top; flex: none; width: 16px; height: 16px; margin: 0 6px 0 0; padding: 0;
  border: 0; border-radius: 50%; background: none; color: inherit; font: inherit; line-height: 0; cursor: default;
}
.tl-who:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.tl-who-av {
  display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  background: var(--label-darkgrey); color: var(--text-inverse);
  font-size: 7px; font-weight: var(--fw-semibold); line-height: 1; letter-spacing: 0; overflow: hidden;
}
.tl-who-glyph {
  display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border); color: var(--text-muted);
  font-size: 9px; line-height: 1;
}
.tl-who-av .avatar-img { width: 16px; height: 16px; }
.tl-who-glyph .ic, .tl-who-glyph svg { display: block; width: 10px; height: 10px; }
/* The AI's part: a small violet spark on a faint tint, the same spark the Leads list uses. */
.tl-who-glyph.is-ai, .tl-who.is-ai .tl-who-glyph {
  color: #6b4eff; background: color-mix(in srgb, #6b4eff 10%, var(--bg-surface)); box-shadow: none;
}
.tl-mail-ago:has(.tl-who) { display: inline-flex; align-items: center; }
.tl-mail-ago .tl-who { margin-right: 5px; }

/* 'By person' chip and its menu (small photos beside the names). */
.tl-person-chip { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); }
.tl-person-chip.is-active { color: var(--link); }
.tl-person-caret, .tl-person-caret svg { width: 8px; height: 8px; display: block; }
.tl-person-menu .menu-item { gap: 8px; }
.tl-person-menu .menu-item[aria-checked="true"] .menu-label { font-weight: var(--fw-semibold); }
.tl-person-menu .tl-who-av, .tl-person-menu .tl-who-glyph { flex: none; }