/* ============================================================
   MODAL (move contact, confirm, share)
   ============================================================ */
.kb-modal { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(12, 13, 14, .45); }
.kb-modal__dialog { position: relative; width: 100%; max-width: 460px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .4); padding: var(--sp-7); }
.kb-modal__close { position: absolute; top: 10px; right: 12px; background: none; border: 0; cursor: pointer; font-size: 22px; line-height: 1; color: var(--muted); padding: var(--sp-2) var(--sp-4); border-radius: 8px; }
.kb-modal__close:hover { background: var(--rail); color: var(--ink); }
.kb-modal__heading { margin: 0 0 14px; font-family: var(--display); font-size: var(--fs-7); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
/* Dashboard follow-up call modal. The dialog is a flex column capped to the
   viewport: the body scrolls (so a long transcript never runs off-screen) while
   the resolve footer stays pinned at the bottom. Width is 640px of content + the
   two --sp-6 body paddings, so the inner area stays at least 640px on a roomy
   screen and shrinks to fit smaller ones. */
.kb-modal__dialog--call { width: calc(640px + 2 * var(--sp-6)); max-width: 100%; max-height: 86vh; padding: 0; display: flex; flex-direction: column; overflow: hidden; border: 0; }

.cl-callmodal { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-6); }

.cl-callmodal__head { display: flex; align-items: center; gap: var(--sp-4); padding-bottom: var(--sp-5); }
.cl-callmodal__ident { min-width: 0; display: flex; flex-direction: column; }
.cl-callmodal__line { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
.cl-callmodal__line .kb-call__contact-company { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cl-callmodal__when { margin-left: auto; flex: none; display: flex; align-items: baseline; gap: var(--sp-3); }
.cl-callmodal__time { font-family: var(--read); color: var(--muted); font-size: var(--fs-3); }
.cl-callmodal__date { font-family: var(--read); color: var(--muted); font-size: var(--fs-3); }
.cl-callmodal__date:hover { color: var(--ink); text-decoration: underline; }
/* No status column here (unlike the list), so drop the .cl-thread left indent
   and align the summary/comments/composer with the header avatar (a hair of
   left spacing to breathe). Needs the descendant selector to outrank .cl-thread,
   which loads after this file. */
.cl-callmodal .cl-callmodal__thread { margin: var(--sp-5) 0 0; padding-left: var(--sp-2); }

.cl-callmodal__bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); background: var(--side-bg); }
.cl-callmodal__bar form { margin: 0; }

/* Deep-link footer, pinned below the scrolling body: a light bar with centred,
   divided links. */
.cl-callmodal__footer { flex: none; display: flex; align-items: stretch; justify-content: center; padding: var(--sp-5) var(--sp-6); background: var(--rail); border-top: 1px solid var(--line); }
.cl-callmodal__flink { display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-7); font-family: var(--read); font-size: var(--fs-3); color: var(--muted); text-decoration: none; }
.cl-callmodal__flink + .cl-callmodal__flink { border-left: 1px solid var(--line-2); }
.cl-callmodal__flink:hover { color: var(--accent); }

.kb-move-contact { display: flex; flex-direction: column; gap: var(--sp-5); }
.kb-move-contact__label { margin: 0; color: var(--ink-2); }
.kb-move-contact__actions { display: flex; gap: var(--sp-4); justify-content: flex-end; }

/* Full-colored label chip */
.cl-chip { display: inline-flex; align-items: center; font-size: var(--fs-2); font-weight: 600; padding: 3px 9px; border-radius: 999px; letter-spacing: .02em; background: var(--blue); color: var(--white); }
.cl-chip--red { background: var(--red); color: var(--white); }
.cl-chip--amber { background: var(--amber); color: var(--white); }
.cl-chip--green { background: var(--green); color: var(--white); }
.cl-chip--blue { background: var(--blue); color: var(--white); }
.cl-chip--violet { background: var(--violet); color: var(--white); }
.cl-chip--teal { background: var(--teal); color: var(--white); }
/* Route chip carries an icon + name, so it needs a gap the plain chips don't. */
.cl-chip--route { gap: var(--sp-2); }