/* Small additions on top of Bootstrap 5. */
.contacts-table th { white-space: nowrap; }
.contacts-table td { max-width: 22rem; }
.contacts-table td:first-child { min-width: 13rem; }
.headline-cell { max-width: 20rem; }
.context-text { white-space: pre-wrap; word-break: break-word; max-height: 28rem; overflow-y: auto; }
.detail-list dt { font-weight: 500; color: var(--bs-secondary-color); }
.detail-list dd { margin-bottom: .6rem; }

/* Fade the table while HTMX loads new results. */
#results.htmx-request, .htmx-request #results { opacity: .55; transition: opacity .15s; }

/* --- Contact page (M4) --------------------------------------------------- */
.icon { width: 1em; height: 1em; vertical-align: -.125em; stroke: currentColor; fill: none;
        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.avatar { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--bs-primary); color: #fff;
          display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.2rem; flex-shrink: 0; }
.contact-meta a, .contact-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.stat-tile { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .45rem .85rem; min-width: 7.5rem;
             background: var(--bs-body-bg); }
.stat-tile .value { font-weight: 600; }
.stat-tile .label { font-size: .8rem; color: var(--bs-secondary-color); }
.action-bar .btn { display: inline-flex; align-items: center; gap: .4rem; }
.notes-box { border: 1px dashed var(--bs-border-color); border-radius: .5rem; background: var(--bs-tertiary-bg); padding: .75rem 1rem; }
.notes-box .notes-text { white-space: pre-wrap; word-break: break-word; }
.action-panel { border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-tertiary-bg); padding: 1rem; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline-item { display: flex; gap: .75rem; padding: .85rem 0; border-bottom: 1px solid var(--bs-border-color-translucent); }
.timeline-item:last-child { border-bottom: 0; }
.timeline-icon { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.timeline-item .email-body { white-space: pre-wrap; word-break: break-word; max-height: 22rem; overflow-y: auto; }
#activity.htmx-request .action-panel, #activity .htmx-request.btn { opacity: .6; }
.min-w-0 { min-width: 0; }