/* ==========================================================================
   Share: "Your agent" chip, "picked for you" card, and the Send to a client builder.
   Loaded after app.css. Floating UI uses the carbon surface of the toast, tooltip and
   presentation HUD; the builder reuses .modal, .field, .input, .seg, .chip and .btn.
   ========================================================================== */

.sh-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Floating chip and card (bottom left) ---------- */
.sh-ref {
  position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 46;
  max-width: calc(100vw - 32px); color: #fff;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s;
}
.sh-ref.away { opacity: 0; transform: translateY(10px); visibility: hidden; pointer-events: none; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t); }
.sh-chip, .sh-card { background: rgba(23, 26, 28, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: var(--r-card); }
.sh-ref :focus-visible { outline-color: #fff; }

.sh-chip { display: flex; align-items: center; gap: 2px; padding: 6px; }
.sh-av { flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; font-size: 13px; font-weight: 600; }
.sh-av img { width: 100%; height: 100%; object-fit: cover; }
.sh-av i { font-size: 18px; }
.sh-who { display: grid; min-width: 0; padding: 0 10px 0 8px; line-height: 1.3; }
.sh-who b { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-k { font-size: 12px; color: rgba(255, 255, 255, .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-ib {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-btn);
  background: transparent; color: #fff; text-decoration: none; cursor: pointer; transition: background-color var(--t);
}
.sh-ib:hover { background: rgba(255, 255, 255, .12); }
.sh-ib i { font-size: 18px; }

.sh-card { width: 348px; max-width: 100%; padding: 12px 12px 14px; display: grid; gap: 12px; }
.sh-card-head { display: flex; align-items: center; gap: 2px; }
.sh-card-head .sh-who { flex: 1; }
.sh-note { margin: 0 4px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .9); white-space: pre-line; overflow-wrap: anywhere; }
.sh-picks-h { margin: 0 4px -4px; font-size: 12px; color: rgba(255, 255, 255, .62); }
.sh-picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 196px; overflow-y: auto; overscroll-behavior: contain; }
.sh-picks button {
  width: 100%; min-height: 40px; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 0 10px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .06); color: #fff; font-size: 13.5px; text-align: left; cursor: pointer;
  transition: background-color var(--t);
}
.sh-picks button:hover { background: rgba(255, 255, 255, .12); }
.sh-picks b { font-weight: 600; white-space: nowrap; }
.sh-picks .sh-meta { color: rgba(255, 255, 255, .66); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-picks .sh-price { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.sh-picks .status::before { width: 8px; height: 8px; }
.sh-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sh-card-foot .btn { min-height: 36px; }
.sh-card-foot .btn:not(.primary) { background: rgba(255, 255, 255, .1); color: #fff; }
.sh-card-foot .btn:not(.primary):hover { background: rgba(255, 255, 255, .18); }
.sh-foot-ic { display: flex; margin-left: auto; }

body.present .sh-ref, body.menu-open .sh-ref, body.kiosk .sh-ref, html.kiosk .sh-ref { display: none; }
body.edit .sh-ref { bottom: 60px; }

/* Phones: the card sits above the sticky contact bar; the agent-only chip stays hidden
   (the bar already calls the agent), the chip returns only to reopen a shared selection. */
@media (max-width: 759.98px) {
  .sh-ref { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: none; }
  body.ct-bar-on .sh-ref { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  .sh-ref[data-mode="chip"]:not(.has-picks) { display: none; }
  .sh-ref[data-mode="chip"] { left: auto; }
  .sh-chip .sh-mail { display: none; }
  .sh-card { width: auto; max-height: min(62svh, 480px); overflow-y: auto; overscroll-behavior: contain; }
  .sh-picks { max-height: none; overflow: visible; }
}

/* ---------- Send to a client builder ---------- */
.sh-modal { width: min(860px, calc(100% - 32px)); overscroll-behavior: contain; }
.sh-modal .modal-body { padding-top: 0; }
.sh-lede { margin: 0 0 18px; font-size: 14px; }
.sh-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.sh-in { display: grid; gap: 22px; }
.sh-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sh-opt { font-weight: 400; color: var(--fog); }
.sh-modal .check { font-size: 13px; font-weight: 400; letter-spacing: normal; color: var(--graphite); }

.sh-sel { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 236px; overflow-y: auto; overscroll-behavior: contain; }
.sh-sel:focus { outline: none; }
.sh-sel li {
  min-height: 44px; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 0 4px 0 12px; border-radius: 8px; background: var(--ash); font-size: 14px;
}
.sh-sel b { font-weight: 600; color: var(--carbon); white-space: nowrap; }
.sh-sel .sh-meta { color: var(--pewter); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-sel .sh-price { color: var(--carbon); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.sh-sel .sh-x { width: 32px; min-height: 32px; }
.sh-sel .sh-x i { font-size: 16px; }
.sh-sel li.sh-empty { display: block; padding: 12px 14px; color: var(--pewter); font-size: 13px; line-height: 1.5; }
.sh-msg { margin: 0; color: var(--reserved); }
.sh-add { display: flex; gap: 8px; }
.sh-add .input { flex: 1; min-width: 0; }
.sh-add .btn { min-height: 44px; }
.sh-quick:empty { display: none; }
.sh-quick .chip { background: var(--ash); color: var(--graphite); }
.sh-quick .chip:hover { background: var(--ash-2); color: var(--carbon); }
.sh-quick .chip i { font-size: 15px; }

.sh-seg { align-self: start; justify-self: start; max-width: 100%; flex-wrap: wrap; }
.sh-seg button[aria-checked="true"] { background: var(--canvas); color: var(--carbon); }
.sh-seg button:hover { color: var(--carbon); }
.sh-note-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sh-modal textarea.input { min-height: 84px; }
.sh-modal .field > .fine { margin: 0; }

.sh-out { display: grid; gap: 16px; padding: 20px; border-radius: var(--r-card); background: var(--ash); }
.sh-link { display: flex; gap: 8px; }
.sh-link .input { flex: 1; min-width: 0; font-size: 13px; color: var(--graphite); text-overflow: ellipsis; }
.sh-link .btn { min-height: 44px; flex: none; }
.sh-send { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sh-send .btn { min-width: 0; min-height: 44px; padding: 0 12px; background: var(--canvas); }
.sh-send .btn:hover { background: var(--ash-2); }
.sh-send .btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sh-send .sh-native { grid-column: 1 / -1; }
.sh-qr { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: center; }
.sh-qr-img { width: 132px; aspect-ratio: 1; padding: 6px; border-radius: 8px; background: #fff; }
.sh-qr-img svg { width: 100%; height: 100%; }
.sh-qr-copy { display: grid; gap: 6px; justify-items: start; }
.sh-qr-copy b { font-weight: 600; color: var(--carbon); font-size: 14px; }
.sh-qr-copy .fine { margin: 0; }
.sh-qr-copy .btn { background: var(--canvas); }
.sh-qr-copy .btn:hover { background: var(--ash-2); }
.sh-status { margin: 0; min-height: 1.45em; color: var(--accent); font-weight: 600; }
.sh-status:empty { display: none; }
.sh-foot { margin: 0; }
.sh-foot .link { font-size: 12px; color: var(--graphite); box-shadow: inset 0 -1px 0 currentColor; }

@media (max-width: 760px) {
  .sh-grid { grid-template-columns: 1fr; }
  .sh-out { padding: 16px; }
}
@media (max-width: 420px) {
  .sh-modal .modal-head, .sh-modal .modal-body { padding-left: 16px; padding-right: 16px; }
  .sh-sel li { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .sh-sel .sh-price { display: none; }
  .sh-qr { grid-template-columns: 112px minmax(0, 1fr); }
  .sh-qr-img { width: 112px; }
  .sh-note-foot { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-ref, .sh-ref.away { transition: none; transform: none; }
}
@media print { .sh-ref, .sh-modal { display: none !important; } }