/**
 * Hubito Social: wall feed, follow buttons, profile stats and modals.
 * RTL-first, matches the Esanj psychology design language.
 */

/* ---------- Instagram-style profile stat row ---------- */
.hcs-ig-statrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:14px 0 4px;}
.hcs-ig-stats{display:flex;gap:8px;}
.hcs-ig-stat{font-family: 'YekanBakh', system-ui, sans-serif; appearance:none;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 14px;border-radius:14px;transition:background .15s;}
.hcs-ig-stat:hover{background:rgba(26,37,53,.05);}
.hcs-ig-stat b{font-size:17px;font-weight:800;color:var(--ink,#1a2535);}
.hcs-ig-stat span{font-size:12px;color:var(--ink-mute,#68758a);}

.hcs-follow-btn{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:14px;padding:10px 22px;font:inherit;font-size:14px;font-weight:700;background:var(--teal-700,#0f766e);color:#fff;transition:background .15s,transform .1s;}
.hcs-follow-btn:hover{filter:brightness(1.08);}
.hcs-follow-btn:active{transform:scale(.97);}
.hcs-follow-btn svg,.hcs-follow-btn i{width:17px;height:17px;}
.hcs-follow-btn.is-following{background:rgba(26,37,53,.07);color:var(--ink,#1a2535);}
.hcs-follow-btn-sm{padding:7px 14px;font-size:12.5px;border-radius:11px;}

/* ---------- Wall page shell ---------- */
.hcs-wall{max-width:640px;margin:0 auto;padding:8px 0 48px;}
.hcs-wall:has([data-wall-explore]:not([hidden])){max-width:900px;}

/* ---------- Top-level view tabs (feed | explore) ---------- */
.hcs-wall-views{display:flex;gap:8px;margin:0 0 14px;border-bottom:2px solid rgba(26,37,53,.07);}
.hcs-wall-views button{appearance:none;flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;background:none;cursor:pointer;padding:13px 12px;font:inherit;font-size:15px;font-weight:800;color:var(--ink-mute,#68758a);margin-bottom:-2px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;}
.hcs-wall-views button.is-active{color:var(--teal-700,#0f766e);border-bottom-color:var(--teal-700,#0f766e);}
.hcs-wall-views button svg,.hcs-wall-views button i{width:18px;height:18px;}

/* ---------- Explore search ---------- */
.hcs-wall-search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid rgba(26,37,53,.1);border-radius:16px;padding:4px 16px;margin:0 0 14px;}
.hcs-wall-search svg,.hcs-wall-search i{width:18px;height:18px;color:var(--ink-mute,#68758a);flex:none;}
.hcs-wall-search input{flex:1;border:0;background:none;outline:none;font:inherit;font-size:14.5px;padding:10px 0;color:var(--ink,#1a2535);}
.hcs-wall-search input::-webkit-search-cancel-button{-webkit-appearance:none;}

/* ---------- Explore grid ---------- */
.hcs-wall-explore{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.hcs-wall-explore .hcs-wall-empty,.hcs-wall-explore .hcs-wall-loading{grid-column:1/-1;}
.hcs-tile-hover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:18px;background:rgba(11,18,32,.45);opacity:0;transition:opacity .18s;color:#fff;font-size:13.5px;font-weight:800;}
.hcs-tile-hover b{display:inline-flex;align-items:center;gap:6px;}
.hcs-tile-hover svg,.hcs-tile-hover i{width:17px;height:17px;fill:#fff;}
.hcs-wall-tile:hover .hcs-tile-hover,.hcs-wall-tile:focus-visible .hcs-tile-hover{opacity:1;}
.hcs-wall-login{text-align:center;margin:18px 0;}
.hcs-wall-tabs{display:flex;gap:8px;margin:18px 0 14px;background:rgba(26,37,53,.05);border-radius:16px;padding:5px;}
.hcs-wall-tabs button{appearance:none;flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;font-weight:700;color:var(--ink-mute,#68758a);background:none;cursor:pointer;}
.hcs-wall-tabs button.is-active{background:#fff;color:var(--teal-700,#0f766e);box-shadow:0 2px 10px rgba(26,37,53,.08);}
.hcs-wall-tabs button svg,.hcs-wall-tabs button i{width:16px;height:16px;}
.hcs-wall-empty{text-align:center;color:var(--ink-mute,#68758a);padding:34px 12px;font-size:14.5px;}
.hcs-wall-more{margin:16px auto 0;display:flex !important;}
.hcs-wall-loading{height:80px;border-radius:20px;background:linear-gradient(100deg,rgba(26,37,53,.05) 40%,rgba(26,37,53,.1) 50%,rgba(26,37,53,.05) 60%);background-size:200% 100%;animation:hcsShimmer 1.2s infinite;}
@keyframes hcsShimmer{to{background-position:-200% 0;}}

/* ---------- Composer ---------- */
.hcs-wall-composer{background:#fff;border:1px solid rgba(26,37,53,.08);border-radius:20px;padding:16px;box-shadow:0 6px 24px rgba(26,37,53,.05);}
.hcs-wall-composer-head{display:flex;gap:12px;align-items:flex-start;}
.hcs-wall-composer-head img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;}
.hcs-wall-composer-head textarea{flex:1;border:0;resize:vertical;min-height:48px;font:inherit;font-size:14.5px;line-height:1.9;background:none;outline:none;color:var(--ink,#1a2535);}
.hcs-wall-composer-previews{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 0;}
.hcs-wall-preview{position:relative;width:72px;height:72px;border-radius:14px;overflow:hidden;background:rgba(26,37,53,.06);display:flex;align-items:center;justify-content:center;}
.hcs-wall-preview img{width:100%;height:100%;object-fit:cover;}
.hcs-wall-preview svg,.hcs-wall-preview i{width:24px;height:24px;color:var(--ink-mute,#68758a);}
.hcs-wall-preview-x{position:absolute;top:4px;left:4px;width:20px;height:20px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.hcs-wall-composer-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid rgba(26,37,53,.06);}
.hcs-wall-attach{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;font-weight:700;color:var(--teal-700,#0f766e);}
.hcs-wall-attach svg,.hcs-wall-attach i{width:18px;height:18px;}
.hcs-wall-composer-status{margin:8px 0 0;font-size:13px;color:var(--ink-mute,#68758a);min-height:1em;}

/* ---------- Feed post card ---------- */
.hcs-post{background:#fff;border:1px solid rgba(26,37,53,.08);border-radius:22px;margin:16px 0;overflow:hidden;box-shadow:0 6px 24px rgba(26,37,53,.04);}
.hcs-post-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;}
.hcs-post-author{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;}
.hcs-post-author img{width:42px;height:42px;border-radius:50%;object-fit:cover;}
.hcs-post-author b{display:flex;align-items:center;gap:5px;font-size:14px;color:var(--ink,#1a2535);}
.hcs-post-author small{display:block;font-size:11.5px;color:var(--ink-mute,#68758a);margin-top:2px;}
.hcs-post-verified{width:15px;height:15px;color:var(--teal-700,#0f766e);}
.hcs-post-del{appearance:none;border:0;background:none;cursor:pointer;color:var(--ink-mute,#68758a);padding:6px;border-radius:10px;}
.hcs-post-del:hover{color:#dc2626;background:rgba(220,38,38,.08);}
.hcs-post-del svg,.hcs-post-del i{width:17px;height:17px;}

.hcs-post-media{position:relative;background:#0b1220;}
.hcs-post-media-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
.hcs-post-media-track::-webkit-scrollbar{display:none;}
.hcs-post-slide{flex:none;width:100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;max-height:560px;}
.hcs-post-slide img,.hcs-post-slide video{width:100%;max-height:560px;object-fit:contain;display:block;}
.hcs-post-dots{position:absolute;bottom:10px;right:0;left:0;display:flex;justify-content:center;gap:5px;pointer-events:none;}
.hcs-post-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);}
.hcs-post-dots span.is-on{background:#fff;}

.hcs-post-actions{display:flex;gap:6px;padding:10px 12px 0;}
.hcs-post-actions button{appearance:none;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:12px;font:inherit;font-size:13.5px;font-weight:700;color:var(--ink,#1a2535);transition:background .15s;}
.hcs-post-actions button:hover{background:rgba(26,37,53,.05);}
.hcs-post-actions svg,.hcs-post-actions i{width:20px;height:20px;}
.hcs-post-like.is-liked{color:#e11d48;}
.hcs-post-like.is-liked svg{fill:#e11d48;}

.hcs-post-caption{padding:6px 16px 0;margin:0;font-size:14px;line-height:2;color:var(--ink,#1a2535);white-space:pre-wrap;word-break:break-word;}
.hcs-post-caption b{display:inline-flex;align-items:center;gap:4px;margin-left:6px;}

.hcs-post-comments{padding:8px 16px 4px;}
.hcs-post-comment{display:flex;gap:9px;align-items:flex-start;margin:8px 0;}
.hcs-post-comment img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;margin-top:3px;}
.hcs-post-comment p{margin:0;font-size:13px;line-height:1.9;color:var(--ink,#1a2535);word-break:break-word;}
.hcs-post-comment b{margin-left:5px;}

/* Instagram-style comment threads */
.hcs-comment-body{flex:1;min-width:0;}
.hcs-comment-meta{display:flex;align-items:center;gap:14px;margin-top:2px;}
.hcs-comment-meta small{font-size:11px;color:var(--ink-mute,#68758a);}
.hcs-comment-reply,.hcs-comment-del,.hcs-comment-toggle{appearance:none;border:0;background:none;cursor:pointer;padding:0;font:inherit;font-size:11.5px;font-weight:700;color:var(--ink-mute,#68758a);}
.hcs-comment-reply:hover{color:var(--teal-700,#0f766e);}
.hcs-comment-del:hover{color:#dc2626;}
.hcs-comment-toggle{display:inline-flex;align-items:center;gap:8px;margin:6px 0 2px;}
.hcs-comment-toggle::before{content:"";width:22px;height:1px;background:rgba(26,37,53,.2);}
.hcs-comment-replies{margin-top:4px;}
.hcs-post-comment--reply{margin:6px 0;}
.hcs-post-comment--reply img{width:22px;height:22px;}
.hcs-comment-like{appearance:none;border:0;background:none;cursor:pointer;flex:none;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 2px;color:var(--ink-mute,#68758a);}
.hcs-comment-like svg,.hcs-comment-like i{width:13px;height:13px;}
.hcs-comment-like b{font-size:10.5px;font-weight:700;}
.hcs-comment-like.is-liked{color:#e11d48;}
.hcs-comment-like.is-liked svg{fill:#e11d48;}

.hcs-post-viewall{appearance:none;border:0;background:none;cursor:pointer;display:block;padding:2px 16px 6px;font:inherit;font-size:12.5px;font-weight:700;color:var(--ink-mute,#68758a);}
.hcs-post-viewall:hover{color:var(--teal-700,#0f766e);}

.hcs-reply-hint{order:-1;flex:0 0 100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:10px;appearance:none;border:0;background:rgba(15,118,110,.08);border-radius:12px;cursor:pointer;font:inherit;font-size:11.5px;font-weight:700;color:var(--teal-700,#0f766e);padding:7px 12px;line-height:1.4;}
.hcs-reply-hint span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.hcs-reply-hint i,.hcs-reply-hint svg{width:14px;height:14px;flex:none;opacity:.8;}
.hcs-reply-hint:hover{background:rgba(15,118,110,.14);}

.hcs-post-comment-form{display:flex;gap:8px;padding:10px 16px 14px;flex-wrap:wrap;align-items:center;}
.hcs-post-comment-form input{flex:1;min-width:0;border:1px solid rgba(26,37,53,.1);border-radius:13px;padding:10px 14px;font:inherit;font-size:13.5px;outline:none;background:rgba(26,37,53,.02);}
.hcs-post-comment-form input:focus{border-color:var(--teal-700,#0f766e);}
.hcs-post-comment-form button{appearance:none;border:0;border-radius:13px;background:var(--teal-700,#0f766e);color:#fff;width:42px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.hcs-post-comment-form svg,.hcs-post-comment-form i{width:16px;height:16px;}

/* ---------- Profile posts grid ---------- */
.hcs-wall-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.hcs-wall-tile{appearance:none;position:relative;border:0;padding:0;cursor:pointer;aspect-ratio:1;border-radius:12px;overflow:hidden;background:rgba(26,37,53,.06);}
.hcs-wall-tile img,.hcs-wall-tile video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s;}
.hcs-wall-tile:hover img,.hcs-wall-tile:hover video{transform:scale(1.05);}
.hcs-tile-badge{position:absolute;top:8px;left:8px;width:17px;height:17px;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));}
.hcs-tile-text{display:flex;align-items:center;justify-content:center;height:100%;padding:10px;font-size:12px;line-height:1.8;color:var(--ink-mute,#68758a);text-align:center;}

/* ---------- Modals (follow lists + single post) ---------- */
.hcs-social-modal{position:fixed;inset:0;z-index:620;background:rgba(11,18,32,.55);display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(3px);}
.hcs-social-modal-box{background:#fff;border-radius:22px;width:100%;max-width:420px;max-height:82vh;display:flex;flex-direction:column;overflow:hidden;}
.hcs-social-modal-post .hcs-social-modal-box{max-width:560px;}
.hcs-social-modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(26,37,53,.07);font-size:14.5px;}
.hcs-social-modal-head button{appearance:none;border:0;background:none;cursor:pointer;font-size:14px;color:var(--ink-mute,#68758a);padding:4px 8px;}
.hcs-social-modal-list{overflow-y:auto;padding:8px 16px 16px;}
.hcs-social-modal-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;}
.hcs-social-modal-row a,.hcs-social-modal-row>span{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink,#1a2535);font-size:13.5px;font-weight:700;min-width:0;}
.hcs-social-modal-row img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;}
.hcs-social-modal-post .hcs-post{margin:0;border:0;border-radius:0;box-shadow:none;overflow-y:auto;}

@media (max-width:560px){
	.hcs-ig-statrow{gap:10px;}
	.hcs-ig-stat{padding:6px 10px;}
	.hcs-wall{padding:4px 0 40px;}
	.hcs-post{border-radius:16px;margin:12px 0;}
	.hcs-wall-grid{gap:4px;}
}