/* ============================================================================
   SOCIAL PROFILES — viewProfile() overlay + privacy toggles. Brand: navy/gold/white.
   Reuses the .day-detail-overlay / .day-detail-panel / .ddp-* shell already styled.
   ============================================================================ */

/* Tappable author chips (community posts + Find People cards) */
.pc-avatar, .pc-name, .duc-avatar, .duc-name, .duc-info { cursor: pointer; }
.pc-name:hover { text-decoration: underline; }

/* Profile header */
.pf-head { text-align: center; padding: 1.25rem 1rem 0.4rem; display: flex; flex-direction: column; align-items: center; }
.pf-avatar {
    width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 0.6rem;
    background: var(--gold, #c8a03c); color: #0a1628;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 700; overflow: hidden;
}
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-name { font-size: 1.25rem; font-weight: 700; color: #fff; }
.pf-sub { font-size: 0.85rem; color: rgba(255,255,255,0.6); text-transform: capitalize; margin-top: 2px; }
.pf-counts { display: flex; gap: 1.5rem; justify-content: center; margin: 0.7rem 0; color: rgba(255,255,255,0.75); font-size: 0.85rem; }
.pf-counts b { color: #fff; font-size: 1rem; }
.pf-actions { margin: 0.4rem 0 1rem; }
.pf-follow-btn {
    background: var(--gold, #c8a03c); color: #0a1628; border: none; border-radius: 8px;
    padding: 0.6rem 2.2rem; font-weight: 700; font-size: 0.95rem; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pf-follow-btn.pf-muted { background: rgba(255,255,255,0.12); color: #fff; }
.pf-follow-btn:disabled { opacity: 0.7; cursor: default; }

/* Actions row: Follow + Message side by side */
.pf-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
/* Message button: outline variant of .pf-follow-btn (navy/gold) */
.pf-msg-btn {
    background: transparent; color: var(--gold, #c8a03c);
    border: 1px solid var(--gold, #c8a03c);
}
.pf-msg-btn:hover { background: rgba(200,160,60,0.12); }
.pf-msg-btn:active { background: rgba(200,160,60,0.2); }

/* Online/offline sidebar user rows are now tappable (open profile) */
.dc-clickable-user { cursor: pointer; border-radius: 6px; transition: background 0.15s; }
.dc-online-user.dc-clickable-user:hover { background: rgba(255,255,255,0.05); }

/* Follow gate (not yet allowed to view) */
.pf-gate { text-align: center; padding: 2.5rem 1.5rem; color: rgba(255,255,255,0.6); }
.pf-gate svg { color: var(--gold, #c8a03c); margin-bottom: 0.8rem; }
.pf-gate b { color: #fff; }

/* Activity sections */
.pf-section { padding: 0.4rem 1rem 0.9rem; border-top: 1px solid rgba(255,255,255,0.07); }
.pf-sec-title { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold, #c8a03c); font-weight: 700; margin: 0.7rem 0 0.5rem; }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pf-photo { aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,0.05); }
.pf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.9rem; }
.pf-row-main { color: #fff; }
.pf-row-meta { color: rgba(255,255,255,0.5); font-size: 0.8rem; white-space: nowrap; }
.pf-note { padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.pf-note-title { color: #fff; font-weight: 600; font-size: 0.9rem; }
.pf-note-body { color: rgba(255,255,255,0.7); font-size: 0.85rem; margin-top: 2px; }

/* Privacy toggle switch (profile page) */
.pf-switch { position: relative; display: inline-block; width: 44px; height: 26px; }
.pf-switch input { opacity: 0; width: 0; height: 0; }
.pf-switch-track { position: absolute; inset: 0; background: rgba(255,255,255,0.2); border-radius: 26px; transition: 0.2s; cursor: pointer; }
.pf-switch-track::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.2s; }
.pf-switch input:checked + .pf-switch-track { background: var(--gold, #c8a03c); }
.pf-switch input:checked + .pf-switch-track::before { transform: translateX(18px); }

/* Privacy detail sub-row */
.pf-subitem { padding-left: 1.25rem !important; }
.settings-item-subtext { color: rgba(255,255,255,0.55); font-size: 0.8rem; }
.pf-switch-sm { transform: scale(0.82); }

/* Albums on a profile */
.pf-albums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.pf-album { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 0; overflow: hidden; cursor: pointer; text-align: left; }
.pf-album-cover { aspect-ratio: 16 / 10; background: rgba(255,255,255,0.05); overflow: hidden; }
.pf-album-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-album-label { color: #fff; font-weight: 600; font-size: 0.88rem; padding: 0.5rem 0.6rem 0; }
.pf-album-count { color: rgba(255,255,255,0.5); font-size: 0.75rem; padding: 0 0.6rem 0.55rem; }
.pf-grid-lg { grid-template-columns: repeat(3, 1fr); }

/* Photo gallery: album filter bar */
.igal-album-bar { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.5rem 0.75rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.igal-album-bar::-webkit-scrollbar { display: none; }
.igal-album-chip { flex: 0 0 auto; background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.8rem; cursor: pointer; white-space: nowrap; }
.igal-album-chip.active { background: var(--gold, #c8a03c); color: #0a1628; border-color: var(--gold, #c8a03c); font-weight: 700; }
.igal-album-chip span { opacity: 0.6; }
.igal-album-new { color: var(--gold, #c8a03c); border-style: dashed; }

/* Dashboard gold "Water" quick-log button (top log row) */
.db-log-btn--gold { background: var(--gold, #c8a03c) !important; color: #0a1628 !important; border-color: var(--gold, #c8a03c) !important; }
.db-log-btn--gold svg { stroke: #0a1628 !important; }

/* Photo gallery: assign-to-album control in the detail view */
.igal-album-assign { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.igal-album-assign-label { color: rgba(255,255,255,0.6); font-size: 0.8rem; }
.igal-album-select { flex: 1; background: #16223c; color: #fff; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 0.5rem; font-size: 0.85rem; }

/* Photo: Upload / Take chooser */
.qa-photo-choose { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.qa-photo-opt-alt { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; padding: 0.7rem; font-size: 0.9rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* In-app camera (centered shutter, flip bottom-right, mode bottom-left) */
.cam-overlay { position: fixed; inset: 0; z-index: 4000; background: #000; display: flex; align-items: center; justify-content: center; }
.cam-video { width: 100%; height: 100%; object-fit: cover; }
.cam-close { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: 16px; width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff; border: none; display: flex; align-items: center; justify-content: center; z-index: 2; cursor: pointer; }
.cam-countdown { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: 7rem; font-weight: 800; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.6); z-index: 2; }
.cam-controls { position: absolute; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; padding: 0 30px; z-index: 2; }
.cam-shutter { width: 74px; height: 74px; border-radius: 50%; background: transparent; border: 4px solid #fff; padding: 0; cursor: pointer; flex: 0 0 auto; }
.cam-shutter span { display: block; width: 58px; height: 58px; margin: 4px auto; border-radius: 50%; background: #fff; transition: 0.15s; }
.cam-overlay.cam-is-video .cam-shutter span { background: #e0392b; }
.cam-overlay.cam-recording .cam-shutter span { border-radius: 8px; width: 30px; height: 30px; margin: 18px auto; background: #e0392b; }
.cam-flip, .cam-mode { height: 54px; border-radius: 999px; background: rgba(255,255,255,0.16); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.cam-flip { width: 54px; }
.cam-mode { min-width: 54px; padding: 0 16px; font-size: 0.8rem; font-weight: 600; }

/* ── Camera rework: Android-style layout ─────────────────────────────────── */
/* Grey play-icon fix: fade the live feed in only once frames flow. */
.cam-video { opacity: 0; background: #000; transition: opacity 0.25s ease; }
.cam-video.ready { opacity: 1; }
/* Top bar: close (left) · recording indicator (centre) · self-timer cog (right). */
.cam-topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top,0px)) 16px 12px; z-index: 3; }
.cam-icon-btn { width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; flex: 0 0 auto; }
.cam-cog-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--gold,#c8a03c); color: #0a1628; font-size: 0.6rem; font-weight: 800; line-height: 16px; text-align: center; }
.cam-rec-indicator { display: none; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,0.5); color: #fff; font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cam-overlay.cam-recording .cam-rec-indicator { display: flex; }
.cam-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #e0392b; animation: camRecBlink 1s ease-in-out infinite; }
@keyframes camRecBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
/* Self-timer popup menu (anchored under the cog). */
.cam-timer-menu { position: absolute; top: calc(60px + env(safe-area-inset-top,0px)); right: 16px; display: flex; flex-direction: column; gap: 2px; background: rgba(0,0,0,0.72); border-radius: 12px; padding: 5px; z-index: 4; }
.cam-timer-opt { background: transparent; border: none; color: #fff; font-size: 0.85rem; font-weight: 600; padding: 8px 18px; border-radius: 8px; cursor: pointer; }
.cam-timer-opt.selected { background: rgba(200,160,60,0.25); color: var(--gold,#c8a03c); }
/* Photo | Video toggle, just above the shutter row. */
.cam-mode-toggle { position: absolute; left: 0; right: 0; bottom: calc(118px + env(safe-area-inset-bottom,0px)); display: flex; justify-content: center; gap: 6px; z-index: 2; }
.cam-mode-opt { background: rgba(0,0,0,0.4); border: none; color: rgba(255,255,255,0.6); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; cursor: pointer; }
.cam-mode-opt.selected { color: var(--gold,#c8a03c); }
/* Gallery shortcut (bottom-left). */
.cam-gallery { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.16); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }

/* Profile activity calendar — compact month grid with gold activity dots */
.pf-cal { margin: 0.2rem 0 0.4rem; }
.pf-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.pf-cal-label { color: #fff; font-weight: 700; font-size: 0.92rem; }
.pf-cal-nav { background: rgba(255,255,255,0.08); color: var(--gold, #c8a03c); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; width: 30px; height: 30px; font-size: 1.2rem; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pf-cal-nav:hover { background: rgba(200,160,60,0.14); }
.pf-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pf-cal-wd { text-align: center; color: rgba(255,255,255,0.45); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 2px; }
.pf-cal-cell { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 7px; background: #16223c; }
.pf-cal-empty { background: transparent; }
.pf-cal-num { color: rgba(255,255,255,0.78); font-size: 0.78rem; line-height: 1; }
.pf-cal-dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; margin-top: 3px; }
.pf-cal-active .pf-cal-dot { background: var(--gold, #c8a03c); }
.pf-cal-active .pf-cal-num { color: #fff; font-weight: 600; }
.pf-cal-today { outline: 1px solid var(--gold, #c8a03c); outline-offset: -1px; }