/* Conversations › Trigger Links (public/conversations-trigger-links.js).
   The page reuses the Snippets sheet's .sn-* table, tabs, buttons, menus and
   modals; what is Trigger Links' own is prefixed tlk-. Sizes follow GHL's
   template: a 4xl bold title, 2xs controls, a 350px chart. */

.tlk-page { --tlk-gray-200: #eaecf0; --tlk-gray-300: #d0d5dd; --tlk-gray-400: #98a2b3; --tlk-gray-500: #667085; }
.tlk-page .sn-head { align-items: center; }
.tlk-titles { flex: 1; min-width: 0; }
.tlk-h1 { font-size: 30px; line-height: 38px; font-weight: 700; color: #101828; }
.tlk-page .sn-sub { color: #344054; max-width: 900px; }

/* ---------- toolbars ---------- */
.tlk-bar { justify-content: flex-end; min-height: 52px; }
.tlk-bar > div:first-child { flex: 1; }
.tlk-search { width: 200px; max-width: 200px; position: relative; }
.tlk-clear { border: 0; background: none; padding: 0; color: var(--tlk-gray-400); cursor: pointer; display: inline-flex; }
.tlk-clear:hover { color: #475467; }
.tlk-clear[hidden] { display: none; }

.tlk-analyze-bar { display: flex; align-items: center; gap: 8px; max-width: 600px; margin: 0 0 12px auto; }
.tlk-refresh {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0;
  border: 1px solid #155eef; border-radius: 8px; background: #155eef; color: #fff; cursor: pointer;
}
.tlk-refresh:hover { background: #004eeb; }
.tlk-refresh:disabled { opacity: .6; cursor: progress; }

/* ---------- the Links table ---------- */
.tlk-table { min-width: 760px; }
.tlk-name { font-weight: 500; color: #101828; word-break: break-word; }
.tlk-clamp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlk-key { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tlk-key-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlk-copy { border: 0; background: none; padding: 2px; color: #475467; cursor: pointer; display: inline-flex; border-radius: 4px; }
.tlk-copy:hover { color: #155eef; background: #eff4ff; }
.tlk-tip-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.tlk-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #0c111d; color: #fff; font-size: 12px; font-weight: 500; line-height: 18px;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 60;
}
.tlk-tip-wrap:hover .tlk-tip, .tlk-tip-wrap:focus-within .tlk-tip { opacity: 1; visibility: visible; }
.tlk-empty-ico { display: inline-flex; color: var(--tlk-gray-500); }
.tlk-foot { justify-content: flex-end; }

/* ---------- Analyze ---------- */
.tlk-chart-host:not(:empty) { margin-bottom: 12px; }
.tlk-chart { background: #fff; border: 1px solid var(--tlk-gray-200); border-radius: 8px; padding: 8px 8px 14px; }
.tlk-chart-stage { position: relative; width: 100%; height: 350px; }
.tlk-chart-stage svg { display: block; font-family: inherit; }
.tlk-hit { cursor: crosshair; }
.tlk-chart-tip {
  position: absolute; pointer-events: none; background: #000; color: #fff; font-weight: 700; font-size: 14px;
  padding: 6px 10px; border-radius: 4px; white-space: nowrap; z-index: 2;
}
.tlk-chart-tip[hidden] { display: none; }
.tlk-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 15px; padding: 4px 8px 0; max-height: 96px; overflow-y: auto; }
.tlk-legend-item {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 2px 0;
  font: inherit; font-size: 12px; color: #333; cursor: pointer;
}
.tlk-legend-item.off { color: #ccc; }
.tlk-legend-item.off .tlk-legend-dot { background: #ccc !important; }
.tlk-legend-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.tlk-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: middle; }
.tlk-name-link { color: #3b82f6; text-decoration: underline; cursor: pointer; }
.tlk-name-link:hover { color: #1d4ed8; }
.tlk-name-plain { color: #344054; }

/* the date range (HighRise DatePicker, daterange, 2xs) */
.tlk-range { position: relative; min-width: 280px; flex: 1; }
.tlk-range-field {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; box-sizing: border-box;
  border: 1px solid var(--tlk-gray-300); border-radius: 8px; background: #fff; padding: 0 10px;
  font: inherit; font-size: 14px; color: #101828; cursor: pointer;
}
.tlk-range-field.open, .tlk-range-field:focus-visible { outline: none; border-color: #84adff; box-shadow: 0 0 0 4px #eff4ff; }
.tlk-range-field .ico { color: var(--tlk-gray-500); flex-shrink: 0; }
.tlk-range-val { flex: 1; text-align: center; }
.tlk-range-val.ph { color: var(--tlk-gray-500); }
.tlk-range-sep { color: var(--tlk-gray-400); }
.tlk-range-pop {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; background: #fff;
  border: 1px solid var(--tlk-gray-200); border-radius: 8px;
  box-shadow: 0 12px 16px -4px #10182814, 0 4px 6px -2px #10182808;
}
.tlk-cals { display: flex; }
.tlk-cal { padding: 12px 12px 8px; width: 252px; }
.tlk-cal + .tlk-cal { border-left: 1px solid var(--tlk-gray-200); }
.tlk-cal-head { display: flex; align-items: center; gap: 2px; margin-bottom: 8px; }
.tlk-cal-title { flex: 1; text-align: center; font-size: 14px; font-weight: 500; color: #101828; }
.tlk-cal-nav { border: 0; background: none; width: 24px; height: 24px; border-radius: 4px; cursor: pointer; color: var(--tlk-gray-500); font-size: 14px; line-height: 1; }
.tlk-cal-nav:hover { background: #f2f4f7; }
.tlk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.tlk-cal-wd { text-align: center; font-size: 12px; color: var(--tlk-gray-500); padding: 4px 0; }
.tlk-cal-day { border: 0; background: none; height: 28px; font: inherit; font-size: 13px; color: #344054; cursor: pointer; border-radius: 6px; }
.tlk-cal-day:hover { background: #f2f4f7; }
.tlk-cal-day.out { color: var(--tlk-gray-400); }
.tlk-cal-day.today { font-weight: 600; color: #155eef; }
.tlk-cal-day.in { background: #eff4ff; border-radius: 0; }
.tlk-cal-day.edge { background: #155eef; color: #fff; }
.tlk-range-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--tlk-gray-200); padding: 8px 12px; }
.tlk-range-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.tlk-btn-xs {
  display: inline-flex; align-items: center; font: inherit; font-size: 12px; line-height: 18px; font-weight: 500;
  padding: 3px 10px; border-radius: 6px; border: 1px solid var(--tlk-gray-300); background: #fff; color: #344054; cursor: pointer;
}
.tlk-btn-xs:hover { background: #f9fafb; }
.tlk-btn-xs.primary { background: #155eef; border-color: #155eef; color: #fff; }
.tlk-btn-xs.primary:hover { background: #004eeb; }
.tlk-btn-xs:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Delete modal and notifications ---------- */
.tlk-delete .sn-modal-title { color: #101828; }
.tlk-delete .sn-confirm { margin: 0; }

.tlk-notes { position: fixed; top: 16px; right: 16px; z-index: 1300; display: flex; flex-direction: column; gap: 8px; }
.tlk-note {
  display: flex; align-items: center; gap: 10px; min-width: 300px; max-width: 420px; padding: 12px 12px 12px 14px; border-radius: 8px;
  background: #fff; border: 1px solid; font-size: 14px; line-height: 20px; box-shadow: 0 12px 16px -4px rgba(16, 24, 40, .08);
}
.tlk-note.green { border-color: #75e0a7; background: #f6fef9; color: #067647; }
.tlk-note.red { border-color: #fda29b; background: #fffbfa; color: #b42318; }
.tlk-note-text { flex: 1; color: #344054; }
.tlk-note-x { border: 0; background: none; padding: 2px; color: #98a2b3; cursor: pointer; display: inline-flex; }

@media (max-width: 720px) {
  .tlk-analyze-bar { flex-wrap: wrap; max-width: none; }
  .tlk-range { min-width: 0; flex-basis: 100%; }
  .tlk-search { width: 100%; max-width: none; flex: 1; }
  .tlk-cals { flex-direction: column; }
  .tlk-cal + .tlk-cal { border-left: 0; border-top: 1px solid var(--tlk-gray-200); }
  .tlk-range-pop { right: auto; left: 0; }
}

/* The app's midnight theme: GHL's chart is white on white, so it gets the
   card's colours instead (CSS wins over the SVG's presentation attributes). */
[data-theme="midnight"] .tlk-c-bg, [data-theme="midnight"] .tlk-c-sym { fill: #121625; }
[data-theme="midnight"] .tlk-c-ink { fill: #dbe0ee; }
[data-theme="midnight"] .tlk-c-grid { stroke: #262b3d; }
[data-theme="midnight"] .tlk-chart-tip { background: #000; color: #fff; }