/* Conversations › the right side panel's ten modules (public/conversations-panel.js).
   Measured against GHL's screens: a pale panel, white cards with a hairline
   border, a 17px module title with "+ Add" and × on the right, and the rail
   of 40px buttons with the keyboard button pinned to its foot. */

.conv { grid-template-columns: 52px 300px minmax(0, 1fr) 420px; }
.conv.cg-panel-hidden { grid-template-columns: 52px 300px minmax(0, 1fr) 62px; }
.conv.cg-menu-open { grid-template-columns: 230px 300px minmax(0, 1fr) 420px; }
.conv.cg-menu-open.cg-panel-hidden { grid-template-columns: 230px 300px minmax(0, 1fr) 62px; }
.conv-detail.cg-side .cg-panel-body { background: #f6f8fc; }
.cg-mini-panel { width: 62px; gap: 10px; background: #eef0f4; }
.cg-mini-btn { position: relative; color: #1d2939; width: 44px; height: 44px; border-radius: 10px; }
.cg-mini-btn.on { background: #fff; color: var(--brand); box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
.cp-rail-grow { flex: 1; }
.cp-kbd-btn { background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
.cp-rail-badge {
  position: absolute; left: -2px; bottom: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #d92d20; color: #fff; font-size: 11px; font-weight: 600;
  display: grid; place-items: center; border: 2px solid #eef0f4;
}
.cp-rail-badge[hidden] { display: none; }

.cp-loading { padding: 24px; color: var(--dim); font-size: 13px; }
.cp-head {
  position: sticky; top: 0; z-index: 3; background: #f6f8fc;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 18px 16px 14px; border-bottom: 1px solid #e4e7ec;
}
.cp-title { font-size: 17px; font-weight: 500; color: #101828; white-space: nowrap; }
.cp-tz { color: var(--muted); font-size: 14px; font-weight: 400; }
.cp-head-acts { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cp-head-link {
  display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; cursor: pointer;
  color: #475467; font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap;
}
.cp-head-link:hover { color: var(--brand); }
.cp-add {
  display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer;
  color: #344054; font: inherit; font-size: 13.5px; font-weight: 600; padding: 4px 6px; border-radius: 6px;
}
.cp-add:hover { background: #eaecf0; }
.cp-x { color: #475467; }
.cp-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 20px; }
.cp-muted { color: var(--muted); font-size: 12.5px; }
.cp-blue { color: var(--brand); }
.cp-grow { flex: 1; }
.cp-link {
  display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; cursor: pointer; padding: 0;
  color: var(--brand); font: inherit; font-size: 13px; text-decoration: none; align-self: flex-start;
}
.cp-count { font-size: 13.5px; color: #344054; }

/* search + filter */
.cp-search {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 12px;
  border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; color: #667085;
}
.cp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--text); }
.cp-filter { color: #475467; }

/* segmented tabs */
.cp-seg { display: flex; border: 1px solid #e4e7ec; border-radius: 8px; overflow: hidden; background: #fff; }
.cp-seg-btn {
  flex: 1; border: 0; background: #fff; padding: 7px 6px; font: inherit; font-size: 13.5px; color: #344054;
  cursor: pointer; border-left: 1px solid #e4e7ec;
}
.cp-seg-btn:first-child { border-left: 0; }
.cp-seg-btn.on { background: #eaecf0; font-weight: 500; color: #101828; }

/* empty state */
.cp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 8px; }
.cp-empty-ico { width: 52px; height: 52px; border-radius: 50%; background: #eaecf0; color: #475467; display: grid; place-items: center; }
.cp-empty-title { font-size: 15px; font-weight: 600; color: #475467; }
.cp-empty-desc { font-size: 13.5px; color: #667085; max-width: 300px; line-height: 1.45; }
.cp-empty-btn { margin-top: 4px; background: #fff; }

/* cards */
.cp-card {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: #fff;
  border: 1px solid #e4e7ec; border-radius: 8px; font-size: 13px; text-align: left; font-family: inherit; color: inherit;
}
button.cp-card { cursor: pointer; width: 100%; }
button.cp-card:hover { border-color: #b2ccff; }
.cp-card-top { display: flex; align-items: flex-start; gap: 8px; }
.cp-card-title { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; color: #101828; word-break: break-word; }
.cp-line { display: flex; align-items: center; gap: 6px; color: #475467; font-size: 13px; }
.cp-kebab { margin: -4px -6px 0 0; color: #475467; }
.cp-tag { align-self: flex-start; font-size: 12px; padding: 2px 8px; border-radius: 4px; background: #f2f4f7; color: #344054; }
.cp-chip { align-self: flex-start; font-size: 13px; padding: 2px 8px; border-radius: 4px; background: #eff8ff; color: #175cd3; }
.cp-status { font-size: 12px; font-weight: 500; color: var(--brand); }
.cp-status.won, .cp-status.confirmed, .cp-status.showed, .cp-status.completed { color: #027a48; }
.cp-status.lost, .cp-status.cancelled, .cp-status.no_show, .cp-status.abandoned { color: #b42318; }
.cp-text-body { color: #344054; white-space: pre-wrap; word-break: break-word; line-height: 1.45; }
.cp-text-body.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cp-overdue { color: #d92d20; font-weight: 600; }
.cp-menu-rule { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.cg-menu-item.danger { color: #b42318; }
.cg-menu-item:disabled { opacity: .5; cursor: not-allowed; }

/* contact details */
.cp-contact { display: flex; flex-direction: column; gap: 14px; }
.cp-ccard { background: #fff; border: 1px solid #e4e7ec; border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.cp-ccard-top { display: flex; align-items: center; gap: 12px; }
.cp-cav { width: 42px; height: 42px; border-radius: 50%; background: #e3f5c7; color: #3b7d0f; display: grid; place-items: center; font-weight: 500; font-size: 14px; flex: none; }
.cp-cname { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; color: #101828; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* RecordFollowers: "flex gap-3 items-start", each field "flex-1 space-y-1",
   the label an HLText lg medium in gray-600. */
.cp-of { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.cp-of-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; }
.cp-of-col.up-field { flex: 1; }
.cp-of-label { font-size: 16px; font-weight: 500; line-height: 24px; color: #475467; }
.cp-pill-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid #d0d5dd;
  border-radius: 18px; background: #fff; font: inherit; font-size: 14px; color: #344054; cursor: pointer; max-width: 100%; align-self: flex-start;
}
.cp-pill-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-tags-head { display: flex; align-items: center; gap: 4px; font-size: 14px; color: #475467; }
.cp-tag-add { color: var(--brand); }
.cp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Colour comes from the tag (GHL's tagChipColors); gray on gray without one. */
.cp-tagchip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 6px 3px 10px; border-radius: 14px; background: #f2f4f7; color: #475467; font-size: 13px; font-weight: 500; line-height: 18px; box-sizing: border-box; }
.cp-tagchip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-tagchip-x { flex: none; width: 16px; height: 16px; border: 0; border-radius: 50%; background: none; cursor: pointer; color: inherit; opacity: .6; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.cp-tagchip-x:hover { opacity: 1; background: #10182824; }
.cp-tags-more { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 2px 4px; font: inherit; font-size: 12px; font-weight: 500; color: #155eef; cursor: pointer; }
.cp-tags-more .ico { transition: transform .2s; }
.cp-tags-more .cp-tags-more-up { transform: rotate(180deg); }
.cp-ctab { display: flex; flex-direction: column; gap: 10px; }
.cp-acc { background: #f2f4f7; border: 1px solid #e4e7ec; border-radius: 10px; overflow: hidden; }
.cp-acc-head {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 16px; border: 0; background: none;
  font: inherit; cursor: pointer; color: #101828; text-align: left;
}
.cp-acc-title { flex: 1; font-size: 15px; font-weight: 500; }
.cp-acc-body { display: flex; flex-direction: column; gap: 8px; background: #fff; }
.cp-acc.open .cp-acc-body { padding: 12px 16px; border-top: 1px solid #e4e7ec; }
.cp-acc-body .conv-detail-sec { border: 0; padding: 0; margin: 0; }
.cp-acc-row { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px solid #f2f4f7; }
.cp-acc-name { font-weight: 500; font-size: 13.5px; }
.cp-cfoot { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid #e4e7ec; font-size: 13.5px; }
.cp-audit { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }

/* Contact Details › DND: GHL's one "DND" card of checkboxes. */
.cp-acc.cp-dnd { background: #f2f4f7; }
.cp-dnd-body { gap: 0; }
.cp-acc.open .cp-dnd-body { padding: 0; }
.cp-dnd-row { display: flex; align-items: center; gap: 12px; padding: 7px 16px; cursor: pointer; }
.cp-dnd-row.cp-dnd-all { padding: 14px 16px; border-bottom: 1px solid #e4e7ec; }
.cp-dnd-ico { width: 20px; height: 20px; flex: none; display: grid; place-items: center; color: #101828; }
.cp-dnd-ico svg { width: 18px; height: 18px; }
.cp-dnd-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cp-dnd-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: #344054; }
.cp-dnd-tip { display: inline-flex; color: #344054; cursor: help; }
.cp-dnd-note { font-size: 11.5px; color: var(--muted); }
.cp-dnd-list { display: flex; flex-direction: column; padding: 6px 0 14px; }
.cp-dnd-or {
  display: flex; align-items: center; gap: 10px; margin: 6px 16px 8px; font-size: 13px; color: #344054;
}
.cp-dnd-or::before, .cp-dnd-or::after { content: ''; flex: 1; border-top: 1px solid #d0d5dd; }
.cp-check {
  appearance: none; width: 18px; height: 18px; flex: none; margin: 0; border: 1px solid #98a2b3; border-radius: 4px;
  background: #fff; cursor: pointer; display: grid; place-items: center;
}
.cp-check:checked { background: var(--brand); border-color: var(--brand); }
.cp-check:checked::after {
  content: ''; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg);
}
.cp-check:disabled { opacity: .55; cursor: not-allowed; }

/* Contact Details › Actions: GHL's empty Opportunities, Workflows chips and
   the Client portal pickers. */
.cp-acts-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 0 44px; }
.cp-acts-empty-title { font-size: 13.5px; font-weight: 600; color: #101828; }
.cp-acts-empty-btns { display: flex; gap: 12px; }
.cp-btn-outline, .cp-btn-soft {
  padding: 8px 14px; border-radius: 6px; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}
.cp-btn-outline { background: #fff; border: 1px solid #d0d5dd; color: #344054; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.cp-btn-outline:hover { background: #f9fafb; }
.cp-btn-soft { background: #eff4ff; border: 1px solid #eff4ff; color: #155eef; }
.cp-btn-soft:hover { background: #d1e0ff; }
.cp-wf { display: flex; flex-direction: column; gap: 8px; }
.cp-wf-head { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #344054; }
.cp-wf-head + .cp-wf-head, .cp-wf-chips + .cp-wf-head { margin-top: 4px; }
.cp-wf-add { border: 0; background: none; padding: 0; color: #155eef; cursor: pointer; display: inline-flex; }
.cp-wf-add svg { width: 22px; height: 22px; stroke-width: 1.6; }
.cp-wf-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cp-wf-chip {
  display: inline-flex; align-items: center; max-width: 100%; border: 1px solid #d0d5dd; border-radius: 4px; background: #fff;
}
.cp-wf-open {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 2px 8px 2px 10px; border: 0; background: none;
  font: inherit; font-size: 14px; color: #344054; cursor: pointer;
}
.cp-wf-open:hover { color: var(--brand); }
.cp-wf-open svg { flex: none; color: #667085; }
.cp-wf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-wf-x { border: 0; border-left: 1px solid #e4e7ec; background: none; padding: 4px 6px; color: #667085; cursor: pointer; display: inline-flex; }
.cp-portal { display: flex; flex-direction: column; gap: 14px; }
.cp-portal-field { display: flex; flex-direction: column; gap: 8px; }
.cp-portal-label { font-size: 15px; color: #344054; }
.cp-portal-select {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 6px 12px 6px 14px; border: 1px solid #d0d5dd;
  border-radius: 8px; background: #fff; font: inherit; color: #344054; cursor: pointer; text-align: left;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.cp-portal-select > svg { flex: none; color: #667085; }
.cp-portal-values { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.cp-portal-ph { color: #667085; font-size: 15px; }
.cp-portal-chip { padding: 1px 8px; border-radius: 12px; background: #f2f4f7; font-size: 13px; }
.cp-pop-search { width: 100%; box-sizing: border-box; margin-bottom: 6px; padding: 7px 10px; border: 1px solid #d0d5dd; border-radius: 6px; font: inherit; font-size: 13.5px; }
.cp-pop-list { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; min-width: 240px; }
.cp-pop-check { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 13.5px; cursor: pointer; }
.cp-pop-check:hover { background: #f2f4f7; }
.cp-pop-check.disabled { opacity: .6; cursor: not-allowed; }

/* activity */
.cp-module-flex { display: flex; flex-direction: column; }
.cp-activity { flex: 1; gap: 14px; }
.cp-day { font-size: 13.5px; font-weight: 600; color: #475467; letter-spacing: .02em; }
.cp-event { display: flex; gap: 12px; }
.cp-event-ico { width: 32px; height: 32px; border-radius: 50%; background: #f4ebff; color: #6941c6; display: grid; place-items: center; flex: none; }
.cp-event-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cp-event-title { font-size: 15px; color: #101828; }
.cp-event-box { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border: 1px solid #e4e7ec; border-radius: 8px; background: #fff; }
.cp-event-text { font-size: 14px; color: #101828; word-break: break-word; }
.cp-event-meta { display: flex; align-items: center; gap: 10px; justify-content: space-between; color: #667085; font-size: 13px; }
.cp-event-link { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: #667085; text-decoration: none; }
.cp-event-link > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.cp-more { text-align: center; padding: 6px 0; }
.cp-more .cp-link { align-self: center; }
.cp-attr { position: sticky; bottom: 0; display: flex; flex-direction: column; background: #f6f8fc; border-top: 1px solid #e4e7ec; margin-top: auto; }
.cp-attr-row { display: flex; gap: 4px; align-items: baseline; padding: 10px 16px; border: 0; border-bottom: 1px solid #e4e7ec; background: none; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; color: #101828; }
.cp-attr-row:last-child { border-bottom: 0; }
.cp-attr-row strong { font-weight: 600; }

/* associations */
.cp-assoc { gap: 0; padding: 0; }
.cp-assoc-sec { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #e4e7ec; }
.cp-assoc-head { display: flex; align-items: center; gap: 6px; }
.cp-assoc-title { flex: 1; font-size: 15px; color: #101828; }
.cp-assoc-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 0; }
.cp-assoc-none { font-size: 13.5px; font-weight: 600; color: #101828; }
.cp-assoc-btns { display: flex; gap: 12px; }
.cp-soft { background: #eff4ff; color: var(--brand); border-color: transparent; }

/* opportunities */
.cp-opp { gap: 8px; padding: 0; }
.cp-opp > * { padding-left: 16px; padding-right: 16px; }
.cp-opp-top { display: flex; align-items: center; gap: 2px; padding-top: 14px; font-size: 15px; min-width: 0; }
.cp-opp-pipe { font-weight: 600; color: #101828; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.cp-opp-stage { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: #93370d; font-weight: 500; flex: none; }
.cp-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cp-opp-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: #344054; }
.cp-status-btn { border: 0; background: none; font: inherit; font-size: 14px; cursor: pointer; padding: 0; }
.cp-status-btn .cp-status { font-size: 14px; }
.cp-opp-foot { display: flex; align-items: center; gap: 6px; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid #e4e7ec; margin-top: 4px; }
.cp-opp-foot .cp-kebab { margin: 0; }
.cp-avatar-btn { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #eff4ff; color: #475467; display: grid; place-items: center; cursor: pointer; }
.cp-avatar { font-size: 11px; font-weight: 600; color: var(--brand); }

/* tasks, notes */
.cp-task { flex-direction: row; align-items: flex-start; gap: 10px; }
.cp-task > input { margin-top: 3px; }
.cp-task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cp-task.done .cp-card-title { text-decoration: line-through; color: var(--dim); }
.cp-pin { color: var(--brand); }
.cp-note-meta { justify-content: space-between; font-size: 12px; color: #667085; }
.cp-note.note-yellow { background: #fefbe8; border-color: #fdf0b2; }
.cp-note.note-blue { background: #eff8ff; border-color: #d1e9ff; }
.cp-note.note-green { background: #ecfdf3; border-color: #d1fadf; }
.cp-note.note-pink { background: #fdf2fa; border-color: #fce7f6; }
.cp-note.note-purple { background: #f4f3ff; border-color: #ebe9fe; }
.cp-note.note-gray { background: #f9fafb; border-color: #eaecf0; }

/* documents */
.cp-crumb { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.cp-doc { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid #e4e7ec; border-radius: 8px; }
.cp-doc-ico { width: 34px; height: 34px; border-radius: 8px; background: #f2f4f7; color: #475467; display: grid; place-items: center; flex: none; }
.cp-doc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; padding: 0; color: inherit; }
.cp-doc-name { font-size: 13.5px; font-weight: 500; color: #101828; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-doc-meta { font-size: 12px; color: #667085; }
.cp-doc .cp-kebab { margin: 0; }

/* payments */
.cp-pay-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cp-pay-sum { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.cp-pay-sum .cp-muted { font-size: 14px; }
.cp-actions { display: inline-flex; align-items: center; gap: 6px; background: #fff; height: 38px; padding: 0 14px; font-size: 14.5px; }
.cp-pay-card { background: #fff; border: 1px solid #e4e7ec; border-radius: 10px; overflow: hidden; }
.cp-pay-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-size: 15px; color: #101828; }
.cp-pay-table { display: flex; flex-direction: column; }
.cp-pay-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; padding: 10px 16px; font-size: 13.5px; color: #344054; align-items: center; border-top: 1px solid #f2f4f7; }
.cp-pay-row.head { background: #f9fafb; color: #475467; border-top: 0; }
.cp-pay-empty { padding: 34px 16px; text-align: center; color: #475467; font-size: 14px; }
.cp-pay-st { justify-self: start; font-size: 12.5px; padding: 2px 8px; border-radius: 6px; background: #f2f4f7; color: #344054; border: 1px solid transparent; }
.cp-pay-st.overdue, .cp-pay-st.failed, .cp-pay-st.past_due, .cp-pay-st.unpaid { background: #fef3f2; color: #d92d20; border-color: #fecdca; }
.cp-pay-st.paid, .cp-pay-st.succeeded, .cp-pay-st.active { background: #ecfdf3; color: #027a48; border-color: #abefc6; }

/* agent logs */
.cp-ai-card { display: flex; gap: 12px; padding: 18px 16px; background: #fff; border: 1px solid #e4e7ec; border-radius: 10px; }
.cp-ai-ico { width: 36px; height: 36px; border-radius: 8px; background: #eff4ff; color: var(--brand); display: grid; place-items: center; flex: none; }
.cp-ai-title { font-size: 15.5px; font-weight: 600; color: #101828; margin-bottom: 4px; }
.cp-ai-sub { font-size: 14px; color: #475467; line-height: 1.45; margin-bottom: 12px; }
.cp-ai-sub .cp-link { display: inline; font-size: 14px; }
.cp-ai-cta { display: inline-flex; align-items: center; gap: 6px; }
.cp-logs-bar { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; }
.cp-logs-bar .cp-link { color: #344054; font-size: 14px; }
.cp-log-sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cp-sugg { border-color: #b2ccff; background: #f5f8ff; }
.cp-sugg-acts { display: flex; gap: 8px; }

/* keyboard shortcuts drawer */
.cp-kbd-back { position: fixed; inset: 0; z-index: 1100; background: rgba(16, 24, 40, .25); display: flex; justify-content: flex-end; }
.cp-kbd-drawer { width: min(420px, 100vw); height: 100%; background: #f6f8fc; box-shadow: -12px 0 32px rgba(16, 24, 40, .16); overflow-y: auto; }
.cp-kbd-sec { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: 6px; }
.cp-kbd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid #e4e7ec; border-radius: 8px; font-size: 13.5px; }
.cp-kbd-keys { display: inline-flex; gap: 4px; }
.cp-kbd-keys kbd { min-width: 24px; padding: 2px 6px; border: 1px solid #d0d5dd; border-bottom-width: 2px; border-radius: 5px; background: #fff; font: inherit; font-size: 12px; text-align: center; }

@media (max-width: 1280px) {
  .conv, .conv.cg-panel-hidden { grid-template-columns: 52px 270px minmax(0, 1fr); }
}