/* ── Overlay ─────────────────────────────────────────────────────── */
#tgs-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(3px);
}
#tgs-overlay.tgs-visible { display: flex; }

/* ── Modal Box ───────────────────────────────────────────────────── */
#tgs-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 360px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    animation: tgs-pop 0.22s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@keyframes tgs-pop {
    from { transform: scale(0.88); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* ── Header ──────────────────────────────────────────────────────── */
#tgs-modal-header {
    background: linear-gradient(135deg, #229ED9 0%, #1A7FB0 100%); /* Telegram blue */
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 16px 20px;
    text-transform: uppercase;
}

/* ── Body ────────────────────────────────────────────────────────── */
#tgs-modal-body {
    padding: 28px 24px 22px;
    text-align: center;
    color: #1a1a1a;
}

/* ── Spinner ─────────────────────────────────────────────────────── */
.tgs-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid #e3f1f9;
    border-top-color: #229ED9;
    border-radius: 50%;
    animation: tgs-spin 0.7s linear infinite;
    margin: 0 auto 14px;
}
@keyframes tgs-spin { to { transform: rotate(360deg); } }
.tgs-checking { color: #777; font-size: 14px; margin: 0; }

/* ── Profile ─────────────────────────────────────────────────────── */
.tgs-photo-wrap {
    width: 96px;
    height: 96px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #e3f1f9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(34, 158, 217, 0.25);
}
.tgs-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tgs-photo-placeholder {
    font-size: 38px;
    color: #229ED9;
    font-weight: 700;
}

.tgs-recipient-name {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 2px;
    word-break: break-word;
}
.tgs-recipient-username {
    font-size: 13px;
    color: #229ED9;
    margin: 0 0 4px;
    font-weight: 600;
}
.tgs-sub {
    font-size: 13px;
    color: #888;
    margin: 0 0 18px;
}

/* ── Star summary chip ───────────────────────────────────────────── */
.tgs-summary {
    background: #fffbe6;
    border: 1px solid #ffe58f;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: #644800;
    margin-bottom: 16px;
    font-weight: 600;
}
.tgs-summary .tgs-stars { color: #d48806; }

/* ── Icons (error etc.) ──────────────────────────────────────────── */
.tgs-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-weight: 700;
}
.tgs-icon-err { background: #fdecea; color: #e74c3c; }
.tgs-error-msg {
    font-size: 14px;
    color: #c0392b;
    margin: 0 0 18px;
    font-weight: 600;
    line-height: 1.4;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
#tgs-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 4px;
}
#tgs-modal-actions button {
    border: none;
    padding: 11px 22px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
    min-width: 110px;
}
#tgs-modal-actions button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
#tgs-confirm {
    background: linear-gradient(135deg, #229ED9, #1A7FB0);
    color: #fff;
}
#tgs-cancel {
    background: #2c2c2c;
    color: #fff;
}

@media (max-width: 480px) {
    #tgs-modal { max-width: 92%; }
    #tgs-modal-actions button { min-width: 0; flex: 1; padding: 11px 14px; }
}