/* Qubble Chat — Recent Chats / Contacts list + QR share modal */

#recent-chats {
    margin-top: 18px;
    text-align: left;
    border-top: 1px solid rgba(123, 47, 247, .18);
    padding-top: 12px;
}
.recents-title {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: .62rem;
    letter-spacing: .18em;
    color: rgba(0, 212, 255, .65);
    margin-bottom: 8px;
}
.recent-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 6px;
}
.recent-open {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(18, 18, 31, .6);
    border: 1px solid rgba(123, 47, 247, .25);
    border-radius: 10px;
    color: var(--color-text, #e8e8f0);
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background .15s, transform .1s;
    min-height: 44px;
}
.recent-open:hover { border-color: rgba(0, 212, 255, .5); background: rgba(0, 212, 255, .06); }
.recent-open:active { transform: scale(.99); }
.recent-star { font-size: .9rem; color: #fbbf24; width: 14px; text-align: center; flex-shrink: 0; }
.recent-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: rgba(0, 212, 255, .5); }
.recent-label {
    flex: 1;
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: .82rem;
    letter-spacing: .04em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recent-time {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: .62rem;
    color: rgba(232, 232, 240, .45);
    flex-shrink: 0;
}
.recent-x {
    width: 38px;
    background: transparent;
    border: 1px solid rgba(244, 114, 182, .25);
    border-radius: 10px;
    color: rgba(244, 114, 182, .7);
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
}
.recent-x:hover { border-color: rgba(244, 114, 182, .6); background: rgba(244, 114, 182, .08); }

/* extra share-banner buttons (match COPY) */
#share-native-btn, #share-qr-btn, #save-contact-btn {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: .6rem;
    letter-spacing: .08em;
    padding: 6px 9px;
    border-radius: 6px;
    border: 1px solid rgba(0, 212, 255, .35);
    background: rgba(0, 212, 255, .06);
    color: var(--color-secondary, #00d4ff);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
#share-native-btn:hover, #share-qr-btn:hover, #save-contact-btn:hover { background: rgba(0, 212, 255, .14); }
#save-contact-btn { border-color: rgba(251, 191, 36, .4); color: #fbbf24; background: rgba(251, 191, 36, .06); }

/* QR modal */
#qbc-qr-modal { position: fixed; inset: 0; z-index: 9200; display: none; align-items: center; justify-content: center; }
#qbc-qr-modal.show { display: flex; }
.qr-veil { position: absolute; inset: 0; background: rgba(10, 10, 15, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.qr-card {
    position: relative;
    background: linear-gradient(180deg, rgba(18, 18, 31, .98), rgba(10, 10, 15, .98));
    border: 1px solid rgba(123, 47, 247, .4);
    border-radius: 18px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
    animation: qr-rise .35s cubic-bezier(.2, .9, .25, 1.2);
}
@keyframes qr-rise { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
.qr-title {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: .8rem; letter-spacing: .16em; color: var(--color-text, #e8e8f0); margin-bottom: 14px;
}
#qbc-qr-canvas { display: inline-block; padding: 10px; background: #fff; border-radius: 10px; line-height: 0; }
#qbc-qr-canvas img, #qbc-qr-canvas canvas { display: block; }
.qr-sub { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: .68rem; color: rgba(232, 232, 240, .55); margin-top: 14px; }
.qr-close {
    margin-top: 16px; padding: 10px 24px; border-radius: 999px;
    border: 1px solid rgba(0, 212, 255, .5); background: transparent; color: var(--color-secondary, #00d4ff);
    font-family: var(--font-display, 'Orbitron', sans-serif); font-size: .7rem; letter-spacing: .12em; cursor: pointer;
}