/* ================= Lato Ai — Mini App additions ================= */

/* ----- Enhanced Header profile block ----- */
.lato-profile {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, rgba(255,179,0,0.08), rgba(0,0,0,0.03));
    padding: 6px 10px 6px 6px; border-radius: 28px;
    border: 1px solid rgba(0,0,0,0.05);
    cursor: pointer; transition: transform 0.2s;
}
.lato-profile:active { transform: scale(0.96); }
.lato-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg,#111,#444);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:15px; overflow:hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.lato-avatar img { width:100%; height:100%; object-fit:cover; }
.lato-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.lato-name { font-size:12px; font-weight:700; color:#111; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lato-id { font-size:10px; color:#8E8E93; font-weight:600; }

/* ----- Store / Purchase Sheet ----- */
.lato-store-btn {
    position: fixed; bottom: 100px; left: 20px;
    background: linear-gradient(135deg,#FFB300,#FF8F00);
    color:#fff; border:none; width:56px; height:56px; border-radius:50%;
    box-shadow: 0 10px 25px rgba(255,143,0,0.4);
    display:flex; align-items:center; justify-content:center;
    z-index:80; cursor:pointer; font-size:22px;
    animation: latoStoreFloat 3s ease-in-out infinite;
}
@keyframes latoStoreFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

.lato-sheet { z-index: 1500 !important; }
.lato-pack-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px;
}
.lato-pack {
    background: linear-gradient(160deg,#FFFFFF,#FFF8E1);
    border:1px solid rgba(255,179,0,0.25);
    border-radius: 22px; padding: 18px 14px;
    display:flex; flex-direction:column; gap:10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
    position:relative; overflow:hidden;
    transition: transform .2s;
    cursor: pointer;
}
.lato-pack:active { transform: scale(0.97); }
.lato-pack.popular { border-color:#FF8F00; }
.lato-pack.popular::after {
    content:'محبوب'; position:absolute; top:10px; left:10px;
    background:#FF8F00; color:#fff; font-size:10px; font-weight:700;
    padding:3px 8px; border-radius:10px;
}
.lato-pack.best { border-color:#111; }
.lato-pack.best::after {
    content:'بهترین قیمت'; position:absolute; top:10px; left:10px;
    background:#111; color:#fff; font-size:10px; font-weight:700;
    padding:3px 8px; border-radius:10px;
}
.lato-pack-qty { font-size:32px; font-weight:900; color:#111; letter-spacing:-1px; }
.lato-pack-label { font-size:12px; color:#8E8E93; font-weight:600; }
.lato-pack-price { font-size:15px; font-weight:800; color:#FF8F00; margin-top:2px; }
.lato-pack-per { font-size:11px; color:#8E8E93; }
.lato-pack-buy {
    background:#111; color:#fff; border:none; border-radius:14px;
    padding:10px; font-weight:700; margin-top:6px; cursor:pointer;
    font-size:13px;
}

.lato-single-pack {
    grid-column: 1 / -1; background: linear-gradient(135deg,#111,#333); color:#fff;
    border:none;
}
.lato-single-pack .lato-pack-qty { color:#FFB300; }
.lato-single-pack .lato-pack-label,
.lato-single-pack .lato-pack-per { color: rgba(255,255,255,0.7); }
.lato-single-pack .lato-pack-price { color:#FFB300; }

.lato-support-cta {
    display:flex; align-items:center; justify-content:center; gap:8px;
    background: #229ED9; color:#fff; border:none;
    width:100%; padding:14px; border-radius:18px;
    font-weight:700; font-size:15px; margin-top:16px;
    text-decoration:none; cursor:pointer;
}

.lato-user-stats {
    display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px;
}
.lato-stat-mini {
    background:#F2F2F7; border-radius:16px; padding:14px;
    display:flex; align-items:center; gap:12px;
}
.lato-stat-mini i { font-size:20px; color:#FF8F00; }
.lato-stat-mini .lato-stat-v { font-size:20px; font-weight:800; color:#111; }
.lato-stat-mini .lato-stat-l { font-size:11px; color:#8E8E93; }

/* Hide fetchUserPoints original badge; we manage credits ourselves */
#userPoints { display:none !important; }


/* ----- Responsive Mini-App header ----- */
.ios-header { padding-top: max(8px, env(safe-area-inset-top)); }
.lato-profile { max-width: min(220px, 42vw); }
.lato-id { white-space: nowrap; }
@media (max-width: 560px) {
    .ios-header { min-height: 58px; padding-left: 8px; padding-right: 8px; gap: 3px; }
    .header-left, .header-right { gap: 4px; min-width: 0; }
    .header-left { flex: 1.25; }
    .header-right { flex: .72; }
    .header-title-container { flex: .7; min-width: 0; }
    .header-title-container h1 { font-size: 17px; white-space: nowrap; }
    .lato-profile { gap: 6px; padding: 4px 7px 4px 4px; max-width: 164px; }
    .lato-avatar { width: 31px; height: 31px; font-size: 13px; }
    .lato-name { max-width: 78px; font-size: 11px; }
    .lato-id { font-size: 9px; }
    .header-badge { padding: 5px 7px; margin-right: 0; }
    .header-badge span { display: none; }
    #latoAdminBtn { width: 32px; height: 32px; font-size: 14px; }
    .bottom-sheet.lato-sheet { padding: 24px 16px calc(22px + env(safe-area-inset-bottom)); max-height: 90vh; }
    .lato-pack-grid { gap: 9px; }
    .lato-pack { border-radius: 17px; padding: 13px 10px; }
    .lato-pack-qty { font-size: 27px; }
}
@media (max-width: 360px) {
    .header-left > .header-btn { display: none; }
    .lato-profile { max-width: 142px; }
    .lato-name { max-width: 58px; }
    .header-title-container { display: none; }
}