/* =============================================================================
   fh-photos.css v1.0.0
   Photo Album: albums grid, photo grid, lightbox, comments, upload
   ============================================================================= */

/* ── Panel Layout ── */
.gp-pa-panel { display:flex; flex-direction:column; min-height:360px; }
.gp-pa-toolbar { display:flex; align-items:center; justify-content:space-between; padding:10px 20px; border-bottom:1px solid #e2e8f0; background:#f8fafc; flex-shrink:0; gap:8px; }
.gp-pa-toolbar-left { display:flex; align-items:center; gap:10px; }
.gp-pa-toolbar h4 { margin:0; font-size:14px; color:#475569; font-weight:600; }
.gp-pa-toolbar-btns { display:flex; gap:6px; }
.gp-pa-back-btn { background:none; border:none; color:#6366f1; cursor:pointer; font-size:13px; font-weight:600; padding:4px 8px; border-radius:6px; transition:background .15s; }
.gp-pa-back-btn:hover { background:rgba(99,102,241,.08); }

/* ── Empty State ── */
.gp-pa-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 20px; color:#94a3b8; text-align:center; }
.gp-pa-empty i { font-size:2.5em; opacity:.35; margin-bottom:10px; }
.gp-pa-empty p { margin:0; font-size:14px; }

/* ── Albums Grid ── */
.gp-pa-albums-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:14px; padding:16px 20px; overflow-y:auto; max-height:430px; }
.gp-pa-album-card { border-radius:12px; overflow:hidden; background:#fff; border:1px solid #e2e8f0; cursor:pointer; transition:transform .2s, box-shadow .2s; }
.gp-pa-album-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.08); }
.gp-pa-album-cover { position:relative; width:100%; height:130px; background:#f1f5f9; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.gp-pa-album-placeholder-icon { font-size:2em; color:#cbd5e1; }
.gp-pa-album-count { position:absolute; bottom:6px; left:8px; background:rgba(0,0,0,.55); color:#fff; font-size:11px; padding:2px 8px; border-radius:10px; backdrop-filter:blur(4px); }
.gp-pa-album-count i { margin-right:3px; font-size:10px; }
.gp-pa-album-actions-overlay { position:absolute; top:6px; right:6px; display:flex; gap:4px; opacity:0; transition:opacity .2s; }
.gp-pa-album-card:hover .gp-pa-album-actions-overlay { opacity:1; }
.gp-pa-album-actions-overlay button { width:26px; height:26px; border-radius:50%; border:none; background:rgba(0,0,0,.5); color:#fff; cursor:pointer; font-size:11px; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.gp-pa-album-actions-overlay button:hover { background:rgba(0,0,0,.75); }
.gp-pa-album-actions-overlay .gp-pa-album-del:hover { background:#ef4444; }
.gp-pa-album-info { padding:10px 12px; }
.gp-pa-album-title { margin:0; font-size:14px; font-weight:600; color:#0f172a; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gp-pa-album-desc { margin:3px 0 0; font-size:12px; color:#94a3b8; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Photo Grid ── */
.gp-pa-photo-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:6px; padding:12px 16px; overflow-y:auto; max-height:430px; }
.gp-pa-photo-card { position:relative; border-radius:8px; overflow:hidden; cursor:pointer; aspect-ratio:1; background:#f1f5f9; }
.gp-pa-photo-card img { width:100%; height:100%; object-fit:cover; transition:transform .3s; display:block; }
.gp-pa-photo-card:hover img { transform:scale(1.05); }
.gp-pa-photo-overlay { position:absolute; bottom:0; left:0; right:0; padding:6px 10px; background:linear-gradient(transparent, rgba(0,0,0,.55)); display:flex; gap:10px; justify-content:flex-start; opacity:0; transition:opacity .2s; }
.gp-pa-photo-card:hover .gp-pa-photo-overlay { opacity:1; }
.gp-pa-photo-overlay span { color:#fff; font-size:12px; display:flex; align-items:center; gap:3px; }

/* ── Lightbox ── */
.gp-pa-lightbox-overlay { position:fixed; inset:0; z-index:100000; background:rgba(0,0,0,.92); display:flex; }
.gp-pa-lightbox-main { flex:1; display:flex; flex-direction:column; position:relative; }
.gp-pa-lightbox-header { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; flex-shrink:0; }
.gp-pa-lightbox-header span { color:#94a3b8; font-size:13px; }
.gp-pa-lb-close-btn { width:36px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,.1); color:#fff; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.gp-pa-lb-close-btn:hover { background:rgba(255,255,255,.2); }

.gp-pa-lightbox-view { flex:1; display:flex; align-items:center; justify-content:center; position:relative; min-height:0; padding:0 48px; }
.gp-pa-lightbox-view img { max-width:100%; max-height:100%; object-fit:contain; border-radius:4px; user-select:none; }

.gp-pa-lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; transition:all .2s; z-index:2; }
.gp-pa-lb-nav:hover { background:rgba(255,255,255,.25); transform:translateY(-50%) scale(1.1); }
.gp-pa-lb-nav.prev { left:8px; }
.gp-pa-lb-nav.next { right:8px; }

.gp-pa-lightbox-footer { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; flex-shrink:0; }
.gp-pa-lb-caption-text { color:#e2e8f0; font-size:14px; flex:1; }
.gp-pa-lb-meta-text { color:#94a3b8; font-size:12px; }
.gp-pa-lb-actions { display:flex; gap:8px; align-items:center; }
.gp-pa-lb-action-btn { background:none; border:1px solid rgba(255,255,255,.2); color:#e2e8f0; padding:5px 12px; border-radius:20px; cursor:pointer; font-size:13px; display:flex; align-items:center; gap:5px; transition:all .15s; }
.gp-pa-lb-action-btn:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.35); }
.gp-pa-lb-action-btn.gp-pa-liked { color:#ef4444; border-color:#ef4444; }
.gp-pa-lb-action-btn.gp-pa-lb-del-btn { border-color:rgba(239,68,68,.4); color:#f87171; }
.gp-pa-lb-action-btn.gp-pa-lb-del-btn:hover { background:rgba(239,68,68,.15); }

/* ── Lightbox Sidebar (Comments) ── */
.gp-pa-lightbox-sidebar { width:340px; flex-shrink:0; background:#111827; border-left:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; }
.gp-pa-lb-sidebar-header { padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.gp-pa-lb-sidebar-header h4 { margin:0; color:#e2e8f0; font-size:14px; font-weight:600; }
.gp-pa-lb-comments-list { flex:1; overflow-y:auto; padding:12px 14px; }
.gp-pa-lb-comment-input-area { padding:10px 14px; border-top:1px solid rgba(255,255,255,.08); display:flex; gap:8px; align-items:flex-end; }
.gp-pa-lb-comment-input-area textarea { flex:1; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:16px; color:#e2e8f0; padding:8px 12px; font-size:13px; font-family:inherit; resize:none; outline:none; line-height:1.4; }
.gp-pa-lb-comment-input-area textarea:focus { border-color:rgba(99,102,241,.5); }
.gp-pa-lb-comment-input-area textarea::placeholder { color:#64748b; }
.gp-pa-lb-send-btn { width:32px; height:32px; border-radius:50%; border:none; background:#6366f1; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; flex-shrink:0; }
.gp-pa-lb-send-btn:hover { background:#4f46e5; }
.gp-pa-lb-send-btn:disabled { background:#475569; cursor:not-allowed; }

/* ── Comments Styling ── */
.gp-pa-comment { padding:8px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.gp-pa-comment:last-child { border-bottom:none; }
.gp-pa-comment-head { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.gp-pa-comment-author { font-size:13px; font-weight:600; color:#a5b4fc; }
.gp-pa-comment-time { font-size:11px; color:#64748b; }
.gp-pa-comment-body { margin:0; font-size:13px; color:#cbd5e1; line-height:1.5; word-break:break-word; }
.gp-pa-comment-actions { display:flex; gap:8px; margin-top:4px; }
.gp-pa-comment-actions button { background:none; border:none; color:#64748b; cursor:pointer; font-size:12px; padding:0; transition:color .15s; }
.gp-pa-comment-actions button:hover { color:#a5b4fc; }
.gp-pa-comment-actions .gp-pa-comment-del:hover { color:#f87171; }
.gp-pa-no-comments { color:#64748b; font-size:13px; text-align:center; padding:20px 0; }
.gp-pa-comments-loading { text-align:center; padding:20px; color:#64748b; }
.gp-pa-comments-err { color:#f87171; font-size:13px; text-align:center; padding:20px 0; }

/* Reply form slot */
.gp-pa-reply-form-slot { margin-top:6px; margin-left:20px; }
.gp-pa-reply-form-slot textarea { width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:10px; color:#e2e8f0; padding:6px 10px; font-size:12px; font-family:inherit; resize:none; outline:none; }
.gp-pa-reply-form-slot textarea:focus { border-color:rgba(99,102,241,.5); }
.gp-pa-reply-form-slot textarea::placeholder { color:#64748b; }
.gp-pa-reply-btns { display:flex; gap:6px; justify-content:flex-end; margin-top:4px; }
.gp-pa-reply-btns .gp-btn-sm { font-size:11px; padding:3px 10px; }

/* ── Upload Modal Extras ── */
.gp-pa-upload-previews { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; max-height:180px; overflow-y:auto; }
.gp-pa-upload-thumb { width:80px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.gp-pa-upload-thumb img { width:80px; height:60px; object-fit:cover; border-radius:6px; border:1px solid #e2e8f0; }
.gp-pa-upload-thumb span { font-size:10px; color:#94a3b8; text-align:center; word-break:break-all; line-height:1.2; }

/* ── Scrollbar ── */
.gp-pa-albums-grid::-webkit-scrollbar,
.gp-pa-photo-grid::-webkit-scrollbar,
.gp-pa-lb-comments-list::-webkit-scrollbar { width:5px; }
.gp-pa-albums-grid::-webkit-scrollbar-track,
.gp-pa-photo-grid::-webkit-scrollbar-track,
.gp-pa-lb-comments-list::-webkit-scrollbar-track { background:transparent; }
.gp-pa-albums-grid::-webkit-scrollbar-thumb,
.gp-pa-photo-grid::-webkit-scrollbar-thumb { background:rgba(0,0,0,.1); border-radius:3px; }
.gp-pa-lb-comments-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:3px; }

/* ── Responsive ── */
@media (max-width:768px) {
    .gp-pa-lightbox-overlay { flex-direction:column; }
    .gp-pa-lightbox-sidebar { width:100%; max-height:45vh; border-left:none; border-top:1px solid rgba(255,255,255,.08); }
    .gp-pa-lightbox-view { padding:0 40px; }
    .gp-pa-albums-grid { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); max-height:340px; }
    .gp-pa-photo-grid { grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); max-height:340px; }
}
@media (max-width:480px) {
    .gp-pa-lightbox-sidebar { width:100%; max-height:40vh; }
    .gp-pa-lb-nav { width:32px; height:32px; font-size:14px; }
    .gp-pa-albums-grid { grid-template-columns:repeat(2, 1fr); gap:10px; padding:12px; }
    .gp-pa-photo-grid { grid-template-columns:repeat(3, 1fr); gap:4px; padding:8px; }
    .gp-pa-toolbar { flex-wrap:wrap; }
}