/* LFLOW-1308 — call ID chip: "#" + 8 characters, click copies the full ID (assets/js/call-id.js).
   Rendered on handover tiles, in the Conversations table and in the details panel. Muted on
   purpose: it is a reference, not content. Tokens only, so both themes follow. */
.call-id-chip {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.6875rem;
    line-height: 1.35;
    color: var(--text-secondary);
    background: var(--surface-variant);
    border: 0;
    border-radius: 4px;
    padding: 0.125rem 0.375rem;
    cursor: copy;
    white-space: nowrap;
    flex: none;
}
.call-id-chip:hover { color: var(--text-primary); }
.call-id-chip:focus-visible { outline: var(--hub-focus-ring-width) solid var(--hub-focus-ring); outline-offset: 1px; }
.call-id-chip.is-copied { background: var(--hub-mint); color: var(--hub-mint-ink); }

/* Past handover tiles copy on a click anywhere outside their buttons. */
.hc.is-historic { cursor: copy; }
.hc.is-historic button, .hc.is-historic a { cursor: pointer; }

/* Details panel: the full ID as selectable text, with an icon button that copies it. One grid
   cell (the panel's rows are label | value), so the button stays beside the ID. */
.call-id-value { display: inline-flex; align-items: flex-start; gap: 0.25rem; min-width: 0; }
.call-id-full { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.75rem; word-break: break-all; min-width: 0; }
.call-id-copy {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    padding: 0 0.25rem;
    cursor: copy;
    font-size: 0.8125rem;
}
.call-id-copy:hover { color: var(--text-primary); }
.call-id-copy:focus-visible { outline: var(--hub-focus-ring-width) solid var(--hub-focus-ring); outline-offset: 1px; }
.call-id-copy.is-copied { color: var(--hub-focus-ring); font-size: 0.75rem; }