/* ===================================================================
   iCloud Photos - Live Photo Extractor (.icp-live)
   Builds on backlink-maker.css, icloud-tools.css and photos.css.
   =================================================================== */

.icp-live { gap: 16px; }
#icpLiveApp { display: grid; gap: 16px; min-width: 0; }

/* ---------- Explanation card ---------- */
.icpl-explain {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center;
    padding: 16px; border: 1px solid var(--bm-line); border-radius: 16px;
    background: linear-gradient(135deg, var(--bm-accent-soft), var(--bm-surface) 70%);
}
.icpl-equation { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--bm-ink-3); }
.icpl-eq-tile {
    display: grid; place-items: center; gap: 2px; width: 64px; height: 64px; border-radius: 16px;
    background: var(--bm-surface); border: 1px solid var(--bm-line); box-shadow: var(--bm-shadow);
    color: var(--bm-accent-strong); font-size: 1.3rem;
}
.icpl-eq-tile small { font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--bm-ink-3); }
.icpl-explain h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; color: var(--bm-ink); }
.icpl-explain p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--bm-ink-2); }
.icpl-explain ul { margin: 6px 0 0; padding-left: 18px; font-size: .86rem; color: var(--bm-ink-2); }
@media (max-width: 640px) { .icpl-explain { grid-template-columns: minmax(0, 1fr); } .icpl-equation { justify-content: center; } }

/* ---------- Summary bar ---------- */
.icpl-results { display: grid; gap: 18px; min-width: 0; }
.icpl-bar { display: grid; gap: 12px; }
.icpl-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .icpl-counts { grid-template-columns: minmax(0, 1fr); } }
.icpl-count { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--bm-line); border-radius: 14px; background: var(--bm-surface); min-width: 0; }
.icpl-count-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 11px; background: var(--bm-line-2); color: var(--bm-ink-3); }
.icpl-count.is-accent .icpl-count-icon { background: var(--bm-accent-soft); color: var(--bm-accent-strong); }
.icpl-count.is-warn .icpl-count-icon { background: var(--ic-warn-soft); color: var(--ic-warn); }
.icpl-count-text { display: flex; flex-direction: column; min-width: 0; font-size: .8rem; color: var(--bm-ink-3); }
.icpl-count-text strong { font-size: 1.3rem; line-height: 1.1; color: var(--bm-ink); font-variant-numeric: tabular-nums; }
.icpl-bar .bm-btn-primary { min-height: 46px; }

.icpl-section { display: grid; gap: 12px; min-width: 0; }
.icpl-h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--bm-ink); }
.icpl-h i { color: var(--bm-accent-strong); }
.icpl-h:focus { outline: none; }

/* ---------- Pair cards ---------- */
.icpl-pairs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); margin: 0; padding: 0; list-style: none; }
.icpl-pair {
    display: grid; gap: 10px; align-content: start; padding: 14px; min-width: 0;
    border: 1px solid var(--bm-line); border-radius: 16px; background: var(--bm-surface);
    transition: border-color .16s, box-shadow .16s, transform .16s var(--bm-ease);
    animation: bm-rise .35s var(--bm-ease) both;
}
.icpl-pair:hover { border-color: color-mix(in srgb, var(--bm-accent) 40%, var(--bm-line)); box-shadow: var(--bm-shadow-lg); }
.icpl-pair.is-warn { border-color: color-mix(in srgb, var(--ic-warn) 35%, var(--bm-line)); }
.icpl-pair-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; min-width: 0; }
.icpl-pair-title { margin: 0; font-size: 1rem; font-weight: 800; color: var(--bm-ink); min-width: 0; overflow-wrap: anywhere; }
.icpl-badges { display: flex; flex-wrap: wrap; gap: 4px; }

.icpl-media { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: center; }
.icpl-tile { position: relative; min-width: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bm-line-2); }
.icpl-tile .icp-thumb-wrap { position: absolute; inset: 0; aspect-ratio: auto; }
.icpl-tile-tag {
    position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 12px);
    padding: 2px 7px; border-radius: 999px; font-size: .68rem; font-weight: 800; color: #fff; background: rgba(16, 22, 43, .72);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.icpl-link {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--bm-accent-soft); color: var(--bm-accent-strong); font-size: .8rem; box-shadow: 0 0 0 4px var(--bm-surface);
}
.icpl-tile-video { background: linear-gradient(150deg, #1d2440, #10162b); }
.icpl-play {
    position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 6px; width: 100%;
    border: 0; background: transparent; color: #fff; font: inherit; cursor: pointer;
}
.icpl-play-icon {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); transition: transform .16s var(--bm-ease), background-color .16s;
}
.icpl-play:hover .icpl-play-icon, .icpl-play:focus-visible .icpl-play-icon { transform: scale(1.08); background: var(--bm-accent); }
.icpl-play-text { font-size: .78rem; font-weight: 800; }
.icpl-play:focus-visible { outline: 3px solid var(--bm-accent-ring); outline-offset: -3px; }

.icpl-player { background: #000; display: grid; place-items: center; }
.icpl-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.icpl-fallback { display: flex; gap: 6px; align-items: flex-start; margin: 0; padding: 10px 40px 10px 10px; font-size: .78rem; font-weight: 700; line-height: 1.4; color: #fff; }
.icpl-fallback i { margin-top: 2px; color: #ffd48a; }
.icpl-close { position: absolute; right: 6px; top: 6px; z-index: 2; }

.icpl-files { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: .84rem; }
.icpl-files dt { font-weight: 700; color: var(--bm-ink-3); }
.icpl-files dd { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; min-width: 0; color: var(--bm-ink); }
.icpl-fname { font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.icpl-size { font-size: .76rem; color: var(--bm-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.icpl-mini { font-size: .78rem; }

.icpl-notes { display: grid; gap: 4px; }
.icpl-notes:empty { display: none; }
.icpl-note { margin: 0; padding: 6px 9px; border-radius: 9px; font-size: .78rem; line-height: 1.45; background: var(--bm-line-2); color: var(--bm-ink-2); overflow-wrap: anywhere; }
.icpl-note.is-warn { background: var(--ic-warn-soft); color: var(--ic-warn); }
.icpl-cid { margin: 0; font-size: .74rem; color: var(--bm-ink-3); overflow-wrap: anywhere; }

.icpl-pair-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.icpl-pair-actions .bm-btn { min-height: 36px; padding: 0 11px; font-size: .82rem; flex: 1 1 auto; }

/* ---------- Leftovers + manual pairing ---------- */
.icpl-left { padding: 14px; border: 1px dashed var(--bm-line); border-radius: 16px; background: var(--bm-bg); }
.icpl-left-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 700px) { .icpl-left-cols { grid-template-columns: minmax(0, 1fr); } }
.icpl-left-col { min-width: 0; }
.icpl-left-col h4 { margin: 0 0 8px; font-size: .9rem; font-weight: 800; color: var(--bm-ink); }
.icpl-chips { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; max-height: 420px; overflow: auto; }
.icpl-chip {
    display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 56px;
    padding: 4px 10px 4px 4px; border: 1px solid var(--bm-line); border-radius: 12px; background: var(--bm-surface);
    font: inherit; text-align: left; color: var(--bm-ink); cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.icpl-chip:hover { border-color: var(--bm-accent); }
.icpl-chip.is-selected { border-color: var(--bm-accent); background: var(--bm-accent-soft); box-shadow: 0 0 0 3px var(--bm-accent-ring); }
.icpl-chip-thumb { position: relative; width: 48px; height: 48px; aspect-ratio: auto; border-radius: 9px; overflow: hidden; }
.icpl-chip-thumb .icp-thumb-ph span { display: none; }
.icpl-chip-thumb .icp-thumb-ph i { font-size: 1rem; }
.icpl-chip-video { display: grid; place-items: center; background: linear-gradient(150deg, #1d2440, #10162b); color: #fff; }
.icpl-chip-text { display: flex; flex-direction: column; min-width: 0; font-size: .84rem; }
.icpl-chip-text .icpl-fname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icpl-chip-check { color: var(--bm-ink-3); }
.icpl-chip.is-selected .icpl-chip-check { color: var(--bm-accent-strong); }

.icpl-pairbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: var(--bm-surface); border: 1px solid var(--bm-line); }
.icpl-pairbar.is-ready { border-color: var(--bm-accent); box-shadow: 0 0 0 3px var(--bm-accent-ring); }
.icpl-pairbar-text { margin: 0; font-size: .86rem; font-weight: 600; color: var(--bm-ink-2); min-width: 0; overflow-wrap: anywhere; flex: 1 1 220px; }

/* ---------- Touch + narrow ---------- */
@media (pointer: coarse) {
    .icp-live .icpl-pair-actions .bm-btn, .icp-live .icpl-chip { min-height: 44px; }
    .icp-live .icpl-close { width: 44px; height: 44px; }
    .icp-live .bm-link-btn { min-height: 44px; }
}
@media (max-width: 400px) {
    .icpl-pair { padding: 10px; }
    .icpl-link { width: 24px; height: 24px; font-size: .7rem; }
    .icpl-tile-tag { font-size: .6rem; }
    .icpl-play-icon { width: 38px; height: 38px; }
}