/* آرتم نیوز — استایل صفحات اجتماعی نسخه ۲ */

/* ===== صفحه پروفایل ===== */
.profile-page{overflow:hidden;margin-bottom:18px}
.banner{height:170px;background:#f1f2f4}
.banner-img{width:100%;height:100%;object-fit:cover;display:block}
.banner-default{background:linear-gradient(120deg,var(--accent) 0%,#7b1e63 55%,#2b1029 100%)}
.profile-top{display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px;margin-top:-44px}
.profile-avatar{width:110px;height:110px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:var(--shadow);background:#fff}
.profile-btns{display:flex;gap:10px;padding-bottom:8px;align-items:center}
.profile-info{padding:10px 22px 20px}
.profile-name{display:flex;align-items:center;gap:6px;font-size:21px;margin:0 0 2px}
.profile-info .handle{color:var(--text-2);font-size:14px;direction:ltr;text-align:right}
.profile-bio{margin:12px 0 0;font-size:14.5px;color:#374151}
.profile-stats{display:flex;gap:26px;margin-top:14px;font-size:13px}
.profile-stats b{font-size:15px}
.profile-stats span{color:var(--text-2)}
.profile-edit{margin:0 22px 20px;border:1px dashed var(--line);border-radius:14px;padding:18px;background:#fafafa}

.repost-flag{
  display:flex;align-items:center;gap:7px;color:#9ca3af;
  font-size:12.5px;font-weight:700;padding:0 8px 8px 0;
}
.repost-flag .icon{color:var(--accent)}

/* ===== پیشنهادها و ترندها ===== */
.follow-row{display:flex;align-items:center;gap:10px;padding:9px 0}
.follow-row .avatar{width:42px;height:42px;border-radius:50%;object-fit:cover}
.follow-row .f-name{font-size:14px;font-weight:700}
.follow-row .f-handle{font-size:12px;color:var(--text-2);direction:ltr;text-align:right}
.follow-row .btn{margin-right:auto;flex:0 0 auto}
.trend-list{list-style:none;margin:0;padding:0}
.trend-list li{padding:9px 0;border-bottom:1px solid var(--line)}
.trend-list li:last-child{border-bottom:none}
.trend-list .t-rank{color:var(--text-2);font-size:12px;display:block}
.trend-list a{font-weight:700;font-size:14px;display:block}
.trend-list a:hover{color:var(--accent)}
.trend-list .t-count{color:var(--text-2);font-size:12px}
.side-card h4{margin:0 0 12px;font-size:15px;display:flex;align-items:center;gap:6px}

/* ===== چت (گرید مستقل) ===== */
.chat-page{
  max-width:1100px;margin:0 auto;padding:20px 16px 90px;
  display:grid;grid-template-columns:320px minmax(0,1fr);
  gap:20px;align-items:start;
}
.chat-list{padding:0;overflow:hidden;height:calc(100vh - 130px);display:flex;flex-direction:column}
.chat-list-head{padding:16px 18px;font-weight:800;font-size:17px;border-bottom:1px solid var(--line)}
.chat-list-search{padding:10px 12px;border-bottom:1px solid var(--line)}
.chat-list-search input{
  width:100%;padding:9px 14px;border-radius:999px;border:1px solid var(--line);
  font-family:inherit;font-size:13px;outline:none;background:#fafafa;
}
#chat-conv-list{overflow-y:auto;flex:1}
.conv-row{
  display:flex;align-items:center;gap:11px;padding:12px 16px;
  cursor:pointer;border-bottom:1px solid var(--line);transition:.15s;
}
.conv-row:hover,.conv-row.active{background:var(--accent-soft)}
.conv-row .avatar{width:46px;height:46px;border-radius:50%;object-fit:cover}
.conv-body{min-width:0;flex:1}
.conv-name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:4px}
.conv-name .v-badge{color:var(--blue);display:inline-flex}
.conv-last{font-size:12.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-badge{
  background:var(--accent);color:#fff;font-size:11px;font-weight:800;
  min-width:20px;height:20px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 6px;
}
.conv-start{
  font-size:11px;font-weight:800;color:var(--accent);white-space:nowrap;
  background:var(--accent-soft);padding:5px 10px;border-radius:999px;
}

.chat-window{height:calc(100vh - 130px);display:flex;flex-direction:column;overflow:hidden;padding:0}
.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-2);gap:8px;text-align:center}
.chat-head{display:flex;align-items:center;gap:11px;padding:13px 18px;border-bottom:1px solid var(--line);background:#fff}
.chat-head .avatar{width:42px;height:42px;border-radius:50%;object-fit:cover}
.chat-head .ch-name{font-weight:800;font-size:15px}
.chat-head .ch-handle{font-size:12px;color:var(--text-2);direction:ltr;text-align:right}
.chat-msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;background:#f7f8fa}
.msg{max-width:72%;display:flex;flex-direction:column;gap:3px}
.msg-them{align-self:flex-start}
.msg-mine{align-self:flex-end}
.msg-text{padding:10px 15px;border-radius:18px;font-size:14px;line-height:1.9;box-shadow:var(--shadow);word-break:break-word}
.msg-them .msg-text{background:#fff;border:1px solid var(--line);border-top-right-radius:5px}
.msg-mine .msg-text{background:var(--blue);color:#fff;border-top-left-radius:5px}
.msg-time{font-size:10.5px;color:#9ca3af;padding:0 6px}
.msg-mine .msg-time{text-align:left}
.chat-input{display:flex;gap:9px;padding:12px;border-top:1px solid var(--line);background:#fff}
.chat-input input{
  flex:1;padding:12px 16px;border-radius:999px;border:1px solid var(--line);
  font-family:inherit;font-size:14px;outline:none;background:#fafafa;
}
.chat-input input:focus{border-color:var(--accent);background:#fff}
.chat-send{
  width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  background:var(--accent);color:#fff;display:flex;align-items:center;
  justify-content:center;transition:.15s;flex:0 0 auto;
}
.chat-send:hover{background:var(--accent-dark)}
.chat-send:disabled{opacity:.5;cursor:default}

/* ===== اعلان‌ها ===== */
.notif-card{padding:0;overflow:hidden;margin-bottom:18px}
.notif-head{padding:16px 20px;border-bottom:1px solid var(--line)}
.notif-head h1{display:flex;align-items:center;gap:8px;font-size:18px;margin:0}
.notif-row{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);transition:.15s}
.notif-row:hover{background:var(--accent-soft)}
.notif-row:last-child{border-bottom:none}
.notif-row .avatar{width:42px;height:42px;border-radius:50%;object-fit:cover}
.notif-icon{color:var(--accent);flex:0 0 auto}
.notif-body{flex:1;min-width:0;font-size:14px}
.notif-body .v-badge{color:var(--blue);display:inline-flex;vertical-align:middle}
.notif-text{color:#374151}
.notif-post{display:block;color:var(--text-2);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-time{color:#9ca3af;font-size:12px;white-space:nowrap}

/* ===== کیف پول ===== */
.wallet-card{padding:24px 26px}
.wallet-head h1{display:flex;align-items:center;gap:8px;font-size:19px;margin:0 0 18px}
.wallet-balance{
  background:linear-gradient(135deg,#1e1b4b 0%,#312e81 60%,#4c1d95 100%);
  border-radius:18px;padding:28px 24px;text-align:center;color:#fff;margin-bottom:18px;
}
.wb-num{font-size:38px;font-weight:900;letter-spacing:1px}
.wb-label{font-size:13px;opacity:.8;margin-top:4px}
.wb-value{font-size:14px;font-weight:700;margin-top:10px;background:rgba(255,255,255,.12);display:inline-block;padding:5px 16px;border-radius:999px}
.wallet-rows{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.wallet-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px;border-bottom:1px solid var(--line);font-size:14px;
}
.wallet-row:last-child{border-bottom:none}
.wallet-row span{display:flex;align-items:center;gap:9px;color:#374151}
.wallet-row span .icon{color:var(--accent)}
.wallet-note{margin-top:14px;font-size:13px;color:var(--text-2);background:var(--accent-soft);border-radius:12px;padding:12px 16px;color:var(--accent-dark)}

/* ===== ریسپانسیو ===== */
@media (max-width:768px){
  .chat-page{grid-template-columns:1fr;padding:12px 10px 90px}
  .chat-list,.chat-window{height:calc(100vh - 200px)}
  .banner{height:120px}
  .profile-avatar{width:88px;height:88px}
  .profile-top{margin-top:-34px;padding:0 14px}
  .profile-info{padding:10px 14px 16px}
  .profile-name{font-size:18px}
  .profile-stats{gap:18px}
  .profile-btns{flex-direction:column;gap:6px}
  .notif-row{padding:12px 14px}
  .wallet-card{padding:18px 16px}
}