/* Timelines (branches), compare view, bookmarks, search modal, message fork/bookmark actions. Loaded last.
   Uses the shared tokens (--card-bg, --border-*, --primary, --accent-gold) and the chart tokens (--sc-*). */

/* ---------- header: buttons + badge ---------- */
.tlm-btn { white-space: nowrap; font-size: 0.74rem; color: #c4c4cf; border-color: var(--border-color); }
.branch-badge {
    font: inherit; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.12rem 0.55rem; border-radius: 999px; cursor: pointer;
    background: rgba(139, 92, 246, 0.16); border: 1px solid rgba(139, 92, 246, 0.5); color: #ddd6fe; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.branch-badge:hover { background: rgba(139, 92, 246, 0.3); color: #fff; }
.branch-badge[hidden], .tlm-btn[hidden] { display: none; }
.link-btn { background: none; border: none; padding: 0; color: var(--primary); text-decoration: underline; cursor: pointer; font: inherit; font-size: 0.78rem; }
.link-btn:hover { color: #fff; }

/* ---------- message actions ---------- */
.message-actions-bar { flex-wrap: wrap; }
.msg-bookmark.on { color: var(--accent-gold); }
.msg-bookmark-note {
    display: block; align-self: flex-start; margin-top: 0.25rem; max-width: 100%; text-align: left; font: inherit; font-size: 0.74rem; color: var(--accent-gold);
    background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.3); border-radius: 6px; padding: 0.1rem 0.5rem; cursor: pointer; overflow-wrap: anywhere;
}
.msg-bookmark-note:hover { background: rgba(251, 191, 36, 0.16); }
.message-wrapper.is-bookmarked .chat-bubble { box-shadow: -3px 0 0 var(--accent-gold); }
.message-wrapper.role-player .msg-bookmark-note { align-self: flex-end; }

/* ---------- popover-like panels (timelines, bookmarks) ---------- */
.modal-overlay.tlm-overlay { align-items: flex-start; justify-content: flex-end; padding: 4.2rem 1rem 1rem; background: rgba(0, 0, 0, 0.35); }
.modal-card-timelines { max-width: 520px; width: min(520px, 100%); max-height: calc(100vh - 5.5rem); }
.modal-card-timelines .modal-header { gap: 0.75rem; }
.modal-card-timelines .modal-header .modal-title { flex: 1; }
.tlm-help { margin-bottom: 0.6rem; line-height: 1.4; }
.tlm-footer { justify-content: space-between; }
.tlm-tree { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.tlm-row {
    --indent: calc(var(--depth, 0) * 1.1rem);
    margin-left: var(--indent); display: flex; gap: 0.6rem; justify-content: space-between; align-items: flex-start;
    padding: 0.6rem 0.7rem; border: 1px solid var(--border-color); border-radius: 8px; background: #14141c; position: relative;
}
.tlm-row.is-child::before { content: ''; position: absolute; left: -0.7rem; top: 0; bottom: 50%; width: 0.55rem; border-left: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); border-bottom-left-radius: 6px; }
.tlm-row.is-active { border-color: var(--primary); background: rgba(139, 92, 246, 0.09); }
.tlm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.tlm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; }
.tlm-name { font-weight: 700; font-size: 0.92rem; overflow-wrap: anywhere; }
.tlm-active { font-size: 0.68rem; font-weight: 700; color: #c4b5fd; letter-spacing: 0.04em; text-transform: uppercase; }
.tlm-pick-label { margin-left: auto; font-size: 0.72rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; }
.tlm-note { font-size: 0.78rem; color: #d4d4d8; border-left: 2px solid var(--accent-gold); padding-left: 0.5rem; white-space: pre-line; overflow-wrap: anywhere; }
.tlm-preview { font-size: 0.78rem; color: var(--text-muted); font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tlm-meta { font-size: 0.72rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; align-items: center; }
.tlm-tips { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.tlm-chip {
    display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.68rem; padding: 0 0.45rem; border-radius: 999px; line-height: 1.5;
    border: 1px solid var(--border-light); color: #c4c4cf; background: #1d1d27; white-space: nowrap;
}
.tlm-chip b { color: #fff; }
.tlm-chip.is-active { border-color: rgba(139, 92, 246, 0.6); color: #ddd6fe; }
.tlm-chip.is-other { border-color: rgba(251, 191, 36, 0.5); color: var(--accent-gold); }
.tlm-actions { display: flex; flex-direction: column; gap: 0.3rem; flex: none; align-items: stretch; }
.tlm-actions .btn-small { white-space: nowrap; }

/* ---------- bookmarks ---------- */
.bm-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.bm-row { display: flex; gap: 0.6rem; justify-content: space-between; align-items: flex-start; padding: 0.6rem 0.7rem; border: 1px solid var(--border-color); border-radius: 8px; background: #14141c; }
.bm-row.is-here { border-color: rgba(251, 191, 36, 0.4); }
.bm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.bm-head { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: center; font-size: 0.72rem; color: var(--text-muted); }
.bm-note { font-size: 0.8rem; color: var(--accent-gold); overflow-wrap: anywhere; }
.bm-text { font-size: 0.8rem; color: #d4d4d8; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bm-actions-row { display: flex; gap: 0.3rem; }
.bm-row .tlm-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; max-width: 11rem; }

/* ---------- compare ---------- */
.modal-card-compare { max-width: 1100px; width: 96vw; max-height: 92vh; }
.cmp-pickers { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; }
.cmp-pickers label { display: inline-flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 12rem; }
.cmp-pickers select { flex: 1; min-width: 0; }
.cmp-tag { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; border-radius: 6px; font-size: 0.72rem; font-weight: 800; background: #272733; color: #fff; }
.cmp-body { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.8rem; }
.cmp-common { border: 1px dashed var(--border-light); border-radius: 8px; padding: 0.45rem 0.7rem; font-size: 0.8rem; color: var(--text-muted); }
.cmp-common summary { cursor: pointer; }
.cmp-shared { margin: 0.5rem 0 0 1.1rem; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.76rem; color: #c4c4cf; }
.cmp-heads, .cmp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.7rem; }
.cmp-heads { position: sticky; top: -1px; z-index: 2; background: var(--card-bg); padding: 0.35rem 0; }
.cmp-colhead { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; padding: 0.4rem 0.6rem; border-radius: 8px; background: #1d1d27; border: 1px solid var(--border-light); }
.cmp-colhead.side-a { border-top: 3px solid #38bdf8; }
.cmp-colhead.side-b { border-top: 3px solid #f59e0b; }
.cmp-rows { display: flex; flex-direction: column; gap: 0.6rem; }
.cmp-cell { padding: 0.55rem 0.7rem; border-radius: 8px; background: #14141c; border: 1px solid var(--border-color); min-width: 0; font-size: 0.85rem; line-height: 1.5; }
.cmp-cell.role-player { background: #1a1727; border-color: #3b2d54; }
.cmp-cell.side-a { border-left: 3px solid #38bdf8; }
.cmp-cell.side-b { border-left: 3px solid #f59e0b; }
.cmp-cell.cmp-empty { border-style: dashed; background: transparent; display: grid; place-items: center; min-height: 3rem; }
.cmp-role { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 700; margin-bottom: 0.2rem; }
/* the A / B tag inside a message is only needed when the columns stack (phones) */
.cmp-cell-tag { display: none; margin-right: 0.4rem; min-width: 1.1rem; height: 1.1rem; font-size: 0.62rem; vertical-align: middle; }
.cmp-text { overflow-wrap: anywhere; }
.cmp-text.is-clamped { max-height: 9.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.cmp-section { display: flex; flex-direction: column; gap: 0.4rem; }
.cmp-stats th.num { text-align: right; }
.cmp-stats th[scope=row] { color: var(--sc-text-2); font-weight: 600; }
.cmp-up { color: var(--sc-up); } .cmp-down { color: var(--sc-down); }
.cmp-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.7rem; }
.cmp-facts-col { padding: 0.5rem 0.7rem; border: 1px solid var(--border-color); border-radius: 8px; background: #14141c; font-size: 0.8rem; }
.cmp-facts-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.25rem; }
.cmp-facts-col ul { margin-left: 1rem; display: flex; flex-direction: column; gap: 0.15rem; }

/* ---------- search ---------- */
.modal-overlay.search-overlay { align-items: flex-start; padding-top: 8vh; }
.modal-card-search { max-width: 760px; width: 100%; max-height: 82vh; }
.sr-head, .sr-tabs, .sr-filters, .sr-status-line, .sr-foot { flex: none; }
.search-input::-webkit-search-cancel-button, .search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.sr-head { display: flex; align-items: center; border-bottom: 1px solid var(--border-color); padding-right: 0.5rem; }
.sr-head .search-input { flex: 1; border: none; min-width: 0; }
.sr-head .modal-close-btn { flex: none; }
.sr-tabs { display: flex; gap: 0.25rem; padding: 0.45rem 0.7rem 0; border-bottom: 1px solid var(--border-color); overflow-x: auto; }
.sr-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font: inherit; font-size: 0.8rem; padding: 0.3rem 0.7rem; cursor: pointer; white-space: nowrap; }
.sr-tab:hover { color: #fff; }
.sr-tab.on { color: #fff; border-bottom-color: var(--primary); font-weight: 600; }
.sr-filters { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; padding: 0.5rem 0.7rem; }
.sr-filter { width: auto; padding: 0.2rem 0.4rem; font-size: 0.78rem; }
.sr-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: #c4c4cf; cursor: pointer; }
.sr-status-line { padding: 0 0.8rem 0.35rem; min-height: 1.2em; }
.sr-list { overflow-y: auto; padding: 0 0.5rem 0.5rem; display: flex; flex-direction: column; gap: 0.6rem; min-height: 5rem; flex: 1 1 auto; }
.sr-empty { margin: 1.4rem 0.5rem; }
.sr-group { display: flex; flex-direction: column; gap: 0.2rem; }
.sr-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; padding: 0.25rem 0.4rem; font-size: 0.85rem; position: sticky; top: 0; background: var(--card-bg); z-index: 1; }
.sr-status { font-size: 0.65rem; padding: 0 0.4rem; border-radius: 8px; border: 1px solid var(--border-light); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.sr-status-completed { color: var(--accent-gold); border-color: rgba(251, 191, 36, 0.4); }
.sr-item { padding: 0.4rem 0.6rem; border-radius: 6px; cursor: pointer; border: 1px solid transparent; display: flex; flex-direction: column; gap: 0.15rem; }
.sr-item.active { background: rgba(139, 92, 246, 0.22); border-color: rgba(139, 92, 246, 0.45); }
.sr-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; align-items: center; font-size: 0.7rem; color: var(--text-muted); }
.sr-type { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.64rem; color: #c4b5fd; }
.sr-type-customer { color: #7dd3fc; } .sr-type-ledger { color: var(--accent-gold); }
.sr-role { color: #d4d4d8; }
.sr-snippet { font-size: 0.85rem; line-height: 1.45; color: #e4e4e7; overflow-wrap: anywhere; }
.sr-snippet mark { background: rgba(251, 191, 36, 0.3); color: #fff; border-radius: 3px; padding: 0 0.1rem; }
.sr-more { align-self: center; margin: 0.3rem 0; }
.sr-foot { display: flex; gap: 1rem; padding: 0.4rem 0.8rem; border-top: 1px solid var(--border-color); }
.sr-foot kbd { margin-right: 0.15rem; }
.sr-error { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }

/* ---------- responsive ---------- */
@media (max-width: 700px) {
    .modal-overlay.tlm-overlay { padding: 0; align-items: stretch; justify-content: stretch; }
    .modal-card-timelines { width: 100%; max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
    .tlm-row, .bm-row { flex-direction: column; }
    .tlm-row { margin-left: calc(var(--depth, 0) * 0.6rem); }
    .tlm-actions, .bm-row .tlm-actions { flex-direction: row; flex-wrap: wrap; max-width: none; justify-content: flex-start; }
    .modal-card-compare { width: 100% !important; max-width: 100% !important; max-height: 100% !important; height: 100%; border-radius: 0; }
    .cmp-heads { grid-template-columns: 1fr; position: static; }
    .cmp-row, .cmp-facts { grid-template-columns: 1fr; }
    .cmp-cell-tag { display: inline-grid; }
    .modal-overlay.search-overlay { padding: 0; align-items: stretch; }
    .modal-card-search { max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
    .sr-foot { display: none; }
    .branch-badge { max-width: 11rem; }
}