/* P2P transfer page (sender and receiver). Shared pieces (dropzone, file card, link box) are in app.css. */

.p2p {
    display: grid;
    gap: 1.5rem;
    width: 100%;
    max-width: 620px;
}

/* Grid items default to min-width: auto, which lets a long link stretch the card. */
.p2p > *,
.p2p-panel > *,
.p2p-share > * { min-width: 0; }

.p2p__head { text-align: center; }
.p2p__head p { max-width: 520px; margin: 0.6rem auto 0; }

.p2p-panel { display: grid; gap: 1.1rem; padding: 1.5rem; }

/* Link for the recipient: QR code for phones next to the short link. */
.p2p-share {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1.1rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-sunken);
}

.p2p-share__qr {
    width: 148px;
    height: 148px;
    border-radius: var(--radius-sm);
    background: var(--color-white);
}

.p2p-share__body { display: grid; justify-items: start; gap: 0.55rem; }
.p2p-share .form-label { margin: 0; color: var(--color-text-muted); font-size: 0.9rem; }

.p2p-share__link {
    max-width: 100%;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
    user-select: all;
}

.p2p-share__hint { color: var(--color-text-subtle); font-size: 0.85rem; }

/* Status line with the "keep this tab open" hint next to it */
.p2p-status-row { display: flex; align-items: center; gap: 0.6rem; }
.p2p-status-row .p2p-status { flex: 1; min-width: 0; }

.p2p-status {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.p2p-status .icon { margin-top: 0.1rem; }
.p2p-status--ok { background: var(--color-white); border-color: var(--color-white); color: var(--color-ink); }
.p2p-status--error { background: var(--color-danger-surface); border-color: var(--color-danger-border); }

.p2p-progress { display: grid; gap: 0.45rem; }

.p2p-progress__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.87rem;
    font-variant-numeric: tabular-nums;
}

.p2p-actions { display: flex; justify-content: center; }

@media (max-width: 520px) {
    .p2p-panel { padding: 1.15rem; }
    .p2p-share { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .p2p-share__body { justify-items: center; }
}