/* Copying a decision into another session's conversation (js/cardclip.js). Clean, quiet controls. */

/* the copy button */
.cardclip-copy { flex: none; width: 28px; height: 28px; padding: 0; display: inline-grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; transition: background var(--d-fast), color var(--d-fast); }
.cardclip-copy:hover { background: var(--sunken); color: var(--fg); }
.cardclip-copy.is-done { color: var(--accent); }
.cardclip-copy .cardclip-ico { width: 17px; height: 17px; stroke-width: 1.8; rotate: none; }

/* in the Focus window: beside read-aloud and close, and also where those two are in the top bar */
.focus .focus-card-ends > .cardclip-copy, .focus[data-single] .focus-card[data-marks] .focus-card-ends > button.cardclip-copy { display: grid; width: 32px; height: 32px; border-radius: 50%; }
/* on a Desk row: beside the clock, under the pointer or the keyboard only */
.inbox-when > .cardclip-copy { width: 24px; height: 24px; margin: -4px 0; opacity: 0; color: inherit; transition: opacity 100ms ease-out, background var(--d-fast); }
.inbox-row:hover .inbox-when > .cardclip-copy, .inbox-row:focus-within .inbox-when > .cardclip-copy, .inbox-row.is-current .inbox-when > .cardclip-copy, .inbox-when > .cardclip-copy.is-done { opacity: 1; }
.inbox-when > .cardclip-copy .cardclip-ico { width: 15px; height: 15px; }

/* the quiet confirmation */
.cardclip-note { position: fixed; z-index: 2500; left: 50%; bottom: calc(124px + env(safe-area-inset-bottom)); translate: -50% 0; margin: 0; padding: 7px 12px; border-radius: 8px; background: var(--fg); color: var(--bg); font: 500 var(--t-sm)/1.3 var(--font); white-space: nowrap; box-shadow: var(--shadow-md); pointer-events: none; }
.cardclip-note[hidden] { display: none; }

/* chips: above a composer, and in a message */
.cardclip-bar { flex: 0 0 100%; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 4px; }
.cardclip-bar[hidden] { display: none; }
.cardclip-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; height: 28px; padding: 0 4px 0 9px; border-radius: 8px; background: var(--sunken); color: var(--fg); font: 500 var(--t-xs)/1 var(--font); text-decoration: none; }
.cardclip-chip b { flex: none; font-weight: 600; color: var(--muted); }
.cardclip-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cardclip-answer { flex: 0 1 auto; min-width: 3em; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); font-weight: 600; }
.cardclip-off { flex: none; width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--muted); font: 400 16px/1 var(--font); cursor: pointer; }
.cardclip-off:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); color: var(--fg); }
.cardclip-offer { display: inline-flex; align-items: center; height: 28px; padding: 0 3px 0 0; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); }
.cardclip-paste { height: 28px; padding: 0 4px 0 10px; border: 0; background: none; color: inherit; font: 500 var(--t-xs)/1 var(--font); white-space: nowrap; cursor: pointer; }
.cardclip-offer:hover, .cardclip-offer:focus-within { color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }

/* in a message: a quiet line of linked chips */
.cardclip-row { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; margin: 0 0 4px; }
.msg-user .cardclip-row { justify-content: flex-end; }
.cardclip-chip.is-link { padding-right: 9px; box-shadow: inset 0 0 0 1px var(--line); background: none; }
.cardclip-chip.is-link:hover { background: var(--sunken); }
.cardclip-chip.is-link:hover .cardclip-title { text-decoration: underline; text-underline-offset: 3px; }

/* quick send in the bar: the chips float above the field; the offer only while one writes there */
.quick .cardclip-bar { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 2; width: max-content; max-width: 100%; padding: 0; }
/* in a session the field hangs at the top of the page: the chips stand under it */
body:not([data-scope="all"]):not([data-page]) .quick .cardclip-bar, body:not([data-scope="all"]):not([data-page]) .quick[data-files] .cardclip-bar { bottom: auto; top: calc(100% + 8px); }
.quick[data-files] .cardclip-bar { bottom: calc(100% + 44px); }
.quick .cardclip-chip, .quick .cardclip-offer { background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm); }
.quick:not(:focus-within) .cardclip-offer { display: none; }

/* on an answered question (Desk, pile "Answered"): at the end of its line, always there */
.inbox-done-sub > .cardclip-copy { width: 24px; height: 24px; margin: -5px 0; vertical-align: middle; }
.inbox-done-sub > .cardclip-copy .cardclip-ico { width: 15px; height: 15px; }

/* a finger has no hover: the button on a Desk row is always there, quietly */
@media (hover: none) { .inbox-when > .cardclip-copy { opacity: .75; } }
@media (max-width: 860px) { .cardclip-note { bottom: calc(176px + env(safe-area-inset-bottom)); } }
/* The copy icon, the number and the clock stand at the top right of a Desk row: the question keeps clear of them. */
.inbox-content:has(.inbox-when > .cardclip-copy) .inbox-question { padding-right: 82px; }
/* (a narrow row with a head puts them on the line of the head, above the question) */
@container rows (max-width: 560px) { .inbox-content:has(> .inbox-row-head:not(:empty)):has(.inbox-when > .cardclip-copy) .inbox-question { padding-right: 0; } }

/* Phone polish (docs/qa-phone-design.md): a finger needs 40px, in the card's corner as for its neighbours there. */
@container focus (max-width: 699.98px) {
  .focus .focus-card-ends > .cardclip-copy, .focus[data-single] .focus-card[data-marks] .focus-card-ends > button.cardclip-copy { width: 40px; height: 40px; }
}