/* =============================================================================
   SGraph Send — Upload Step Done — Styles
   Step 6: Done / Share Results
   ============================================================================= */

:host {
    display: block;
}

/* ── Success banner ────────────────────────────────────────────────────────── */

.success-banner {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background: rgba(78, 205, 196, 0.08);
    border: 1px solid rgba(78, 205, 196, 0.25);
    border-radius: var(--radius-sm, 6px);
    margin-bottom: var(--space-4, 1rem);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-success, #4ECDC4);
    font-weight: var(--weight-semibold, 600);
}

.success-banner__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* ── File summary ──────────────────────────────────────────────────────────── */

.file-summary {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background: var(--color-surface, #1E2A4A);
    border: 1px solid var(--color-border, rgba(78, 205, 196, 0.15));
    border-radius: var(--radius-sm, 6px);
    margin-bottom: var(--space-4, 1rem);
}

.file-summary--compact {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
}

.file-summary__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.file-summary__name {
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--weight-medium, 500);
    color: var(--color-text, #E0E0E0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-summary__meta {
    font-size: var(--text-small, 0.75rem);
    color: var(--color-text-secondary, #8892A0);
}

/* ── File info bar (token mode v0.2.8) ─────────────────────────────────────── */

.file-info-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: 0.5rem 0.75rem;
    margin-bottom: var(--space-4, 1rem);
    background: var(--bg-secondary, #16213E);
    border: 1px solid var(--color-border, rgba(78, 205, 196, 0.15));
    border-radius: var(--radius-sm, 6px);
    font-size: var(--text-sm, 0.875rem);
}

.file-info-bar__icon {
    font-size: 1.1rem;
}

.file-info-bar__name {
    color: var(--color-text, #E0E0E0);
    font-weight: var(--weight-medium, 500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.file-info-bar__size {
    color: var(--color-text-secondary, #8892A0);
    white-space: nowrap;
}

/* ── Delivery choice ───────────────────────────────────────────────────────── */

.delivery-choice {
    margin-bottom: var(--space-3, 0.75rem);
    font-size: var(--text-sm, 0.875rem);
}

.delivery-choice__label {
    color: var(--color-text-secondary, #8892A0);
    margin-right: var(--space-2, 0.5rem);
}

.delivery-choice__value {
    color: var(--color-text, #E0E0E0);
}

/* ── Mode header ───────────────────────────────────────────────────────────── */

.mode-header {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background: rgba(78, 205, 196, 0.06);
    border: 1px solid var(--color-border, rgba(78, 205, 196, 0.15));
    border-radius: var(--radius-sm, 6px);
    margin-bottom: var(--space-4, 1rem);
}

.mode-header__icon {
    font-size: 1.25rem;
}

.mode-header__title {
    font-weight: var(--weight-semibold, 600);
    color: var(--color-primary, #4ECDC4);
    flex: 1;
}

.mode-change {
    background: none;
    border: none;
    color: var(--color-text-secondary, #8892A0);
    font-size: var(--text-small, 0.75rem);
    cursor: pointer;
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    border-radius: var(--radius-xs, 4px);
}

.mode-change:hover {
    color: var(--color-primary, #4ECDC4);
    background: rgba(78, 205, 196, 0.08);
}

/* ── Share value blocks ────────────────────────────────────────────────────── */

.share-value {
    margin-top: var(--space-3, 0.75rem);
}

.share-value + .share-value {
    margin-top: var(--space-4, 1rem);
}

.share-label {
    display: block;
    font-weight: var(--weight-semibold, 600);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #8892A0);
    margin-bottom: var(--space-2, 0.5rem);
}

.share-row {
    display: flex;
    gap: var(--space-2, 0.5rem);
    align-items: center;
}

.share-box {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm, 0.875rem);
    background: var(--bg-secondary, #16213E);
    border: 1px solid var(--color-border, rgba(78, 205, 196, 0.15));
    border-radius: var(--radius-sm, 6px);
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    overflow-x: auto;
    color: var(--color-text, #E0E0E0);
}

.share-box--token {
    font-size: var(--text-lg, 1.25rem);
    letter-spacing: 0.1em;
    font-weight: var(--weight-semibold, 600);
    text-align: center;
    color: var(--color-primary, #4ECDC4);
}

.share-box--key {
    font-size: var(--text-small, 0.75rem);
    word-break: break-all;
    white-space: normal;
}

.share-box--friendly {
    font-size: var(--text-lg, 1.25rem);
    letter-spacing: 0.05em;
    font-weight: var(--weight-semibold, 600);
    text-align: center;
    color: var(--color-primary, #4ECDC4);
}

.share-guidance {
    font-size: var(--text-micro, 0.625rem);
    color: var(--color-text-secondary, #8892A0);
    opacity: 0.7;
    margin-top: var(--space-1, 0.25rem);
}

/* ── Open link ─────────────────────────────────────────────────────────────── */

.open-link {
    display: inline-block;
    margin-top: var(--space-2, 0.5rem);
    font-size: var(--text-small, 0.75rem);
    color: var(--color-text-secondary, #8892A0);
    text-decoration: none;
}

.open-link:hover {
    color: var(--color-primary, #4ECDC4);
}

/* ── Security note ─────────────────────────────────────────────────────────── */

.security-note {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    margin-top: var(--space-4, 1rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    font-size: var(--text-small, 0.75rem);
    color: var(--color-text-secondary, #8892A0);
    background: rgba(78, 205, 196, 0.04);
    border-radius: var(--radius-sm, 6px);
}

/* ── Timings breakdown ─────────────────────────────────────────────────────── */

.timings {
    margin-top: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem);
    background: var(--bg-secondary, #16213E);
    border: 1px solid var(--color-border, rgba(78, 205, 196, 0.15));
    border-radius: var(--radius-sm, 6px);
}

.timings__title {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #8892A0);
    margin-bottom: var(--space-2, 0.5rem);
    font-weight: var(--weight-semibold, 600);
}

.timings__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
}

.timings__row {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #8892A0);
}

.timings__label {
    min-width: 110px;
}

.timings__bar {
    flex: 1;
    height: 4px;
    background: var(--color-border, rgba(78, 205, 196, 0.15));
    border-radius: 2px;
    overflow: hidden;
}

.timings__bar-fill {
    height: 100%;
    background: var(--accent, #4ECDC4);
    border-radius: 2px;
}

.timings__ms {
    min-width: 50px;
    text-align: right;
    font-family: var(--font-mono, monospace);
}

/* ── QR + open link row ────────────────────────────────────────────────────── */

.qr-open-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: var(--space-5, 1.25rem);
    margin-top: var(--space-5, 1.25rem);
    padding: var(--space-5, 1.25rem);
    background: var(--bg-secondary, #16213E);
    border: 1px solid var(--color-border, rgba(78, 205, 196, 0.15));
    border-radius: var(--radius-md, 12px);
}

.qr-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.qr-code {
    width: 120px;
    height: 120px;
    padding: 6px;
    background: #ffffff;
    border-radius: var(--radius-sm, 6px);
}

.qr-code svg {
    width: 100%;
    height: 100%;
}

.qr-label {
    font-size: var(--text-small, 0.75rem);
    color: var(--color-text-secondary, #8892A0);
    margin-top: var(--space-2, 0.5rem);
    opacity: 0.7;
}

.qr-open-row__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex: 1;
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    border: 1px solid var(--color-border, rgba(78, 205, 196, 0.2));
    border-radius: var(--radius-sm, 6px);
    background: rgba(78, 205, 196, 0.04);
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    cursor: pointer;
}

.qr-open-row__link:hover {
    border-color: var(--color-primary, #4ECDC4);
    background: rgba(78, 205, 196, 0.1);
    transform: translateY(-1px);
}

.qr-open-row__link-icon {
    font-size: 2rem;
    color: var(--color-primary, #4ECDC4);
    margin-bottom: var(--space-2, 0.5rem);
}

.qr-open-row__link-text {
    font-size: var(--text-base, 1rem);
    font-weight: var(--weight-semibold, 600);
    color: var(--color-primary, #4ECDC4);
}

.qr-open-row__link-hint {
    font-size: var(--text-small, 0.75rem);
    color: var(--color-text-secondary, #8892A0);
    margin-top: var(--space-2, 0.5rem);
    opacity: 0.7;
}

/* ── Share mode cards (picker mode) ────────────────────────────────────────── */

.step-title {
    font-size: var(--text-body, 1rem);
    font-weight: var(--weight-semibold, 600);
    color: var(--color-text, #E0E0E0);
    margin: 0 0 var(--space-2, 0.5rem) 0;
}

.share-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
    margin-top: var(--space-4, 1rem);
}

.share-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-4, 1rem);
    border: 1px solid var(--color-border, rgba(78, 205, 196, 0.15));
    border-radius: var(--radius-md, 12px);
    background: var(--color-surface, #1E2A4A);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.share-card:hover {
    border-color: var(--color-primary, #4ECDC4);
    background: var(--accent-subtle, rgba(78, 205, 196, 0.12));
    transform: translateY(-1px);
}

.share-card--active {
    border-color: var(--color-primary, #4ECDC4);
    background: var(--accent-subtle, rgba(78, 205, 196, 0.08));
}

.share-card__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.share-card__body {
    flex: 1;
    min-width: 0;
}

.share-card__title {
    font-size: var(--text-body, 1rem);
    font-weight: var(--weight-semibold, 600);
    color: var(--color-text, #E0E0E0);
    margin-bottom: var(--space-1, 0.25rem);
}

.share-card__desc {
    font-size: var(--text-small, 0.75rem);
    color: var(--color-text-secondary, #8892A0);
    line-height: 1.5;
    margin-bottom: var(--space-2, 0.5rem);
}

.share-card__hint {
    font-size: var(--text-micro, 0.625rem);
    color: var(--color-primary, #4ECDC4);
    opacity: 0.8;
}

/* ── Copy button ───────────────────────────────────────────────────────────── */

.copy-btn {
    border: 1px solid var(--color-border, rgba(78, 205, 196, 0.3));
    background: transparent;
    color: var(--color-text, #E0E0E0);
    padding: 0.4rem 1rem;
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--weight-medium, 500);
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    white-space: nowrap;
    min-width: 60px;
}

.copy-btn:hover {
    border-color: var(--color-primary, #4ECDC4);
    color: var(--color-primary, #4ECDC4);
    background: rgba(78, 205, 196, 0.08);
}

/* ── Email link button ─────────────────────────────────────────────────────── */

.email-link-btn {
    border: 1px solid var(--color-border, rgba(78, 205, 196, 0.3));
    background: transparent;
    color: var(--color-text, #E0E0E0);
    padding: 0.4rem 1rem;
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--weight-medium, 500);
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    white-space: nowrap;
    margin-top: var(--space-3, 0.75rem);
}

.email-link-btn:hover {
    border-color: var(--color-primary, #4ECDC4);
    color: var(--color-primary, #4ECDC4);
    background: rgba(78, 205, 196, 0.08);
}

/* ── Send another button ───────────────────────────────────────────────────── */

.send-another-wrap {
    margin-top: var(--space-6, 1.5rem);
    text-align: center;
}

.send-another-btn {
    font-size: var(--text-base, 1rem);
    padding: 0.625rem 2rem;
    border: 1px solid var(--color-border, rgba(78, 205, 196, 0.25));
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--color-text-secondary, #8892A0);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.send-another-btn:hover {
    border-color: var(--color-text-secondary, #8892A0);
    color: var(--color-text, #E0E0E0);
    background: rgba(136, 146, 160, 0.08);
}

/* ── Mobile ────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .share-row {
        flex-direction: column;
        align-items: stretch;
    }

    .share-row .copy-btn {
        width: 100%;
    }

    .share-card {
        padding: var(--space-3, 0.75rem);
    }

    .qr-open-row {
        flex-direction: column;
        gap: var(--space-3, 0.75rem);
    }
}
