/* ===================================================================
   NDN Timeline — Nâng cấp UX/UI
   • Popup Đăng bài / Chỉnh sửa bài viết
   • Popup Đang theo dõi / Người theo dõi (tabs + tìm kiếm + hành động)
   Tải SAU ndn-timeline-frontend.css để ghi đè/bổ sung.
   =================================================================== */

/* ---------- Tokens ---------- */
:root{
  --ndn-brand:#1d4ed8;
  --ndn-brand-2:#7c3aed;
  --ndn-grad:linear-gradient(135deg,#1d4ed8,#7c3aed);
  --ndn-ring:rgba(29,78,216,.16);
}

/* ===================================================================
   1) POPUP ĐĂNG BÀI / CHỈNH SỬA
   =================================================================== */

/* Khung modal sang hơn: bo góc lớn, viền mảnh, đổ bóng sâu */
.ndn-cmodal-box{
  border-radius:20px !important;
  box-shadow:0 32px 90px rgba(15,23,42,.32),0 2px 8px rgba(15,23,42,.08) !important;
  border:1px solid rgba(15,23,42,.06);
}

/* Header: nền gradient nhẹ tạo điểm nhấn thương hiệu */
.ndn-cmodal-hd{
  background:linear-gradient(180deg,rgba(29,78,216,.05),rgba(124,58,237,.02));
  padding:16px 18px 14px !important;
}
.ndn-cmodal-user{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.ndn-cmodal-avatar{
  width:48px !important;height:48px !important;
  box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ndn-ring);
}
.ndn-cmodal-name{font-size:15.5px !important;letter-spacing:-.01em}
.ndn-cmodal-audience{
  background:#fff !important;border:1px solid #e2e8f0 !important;
  box-shadow:0 1px 2px rgba(15,23,42,.05);
}
.ndn-cmodal-audience:hover{background:#f8fafc !important;border-color:#cbd5e1 !important}

/* Băng-rôn chế độ chỉnh sửa */
.ndn-cmodal.ndn-cmode-edit .ndn-cmodal-box::before{
  content:"✏️ Đang chỉnh sửa bài viết";
  display:block;
  background:linear-gradient(135deg,#f59e0b,#f97316);
  color:#fff;font-size:12.5px;font-weight:700;
  text-align:center;padding:7px 12px;letter-spacing:.01em;
}

/* Chip danh mục: pill mềm mại, có hiệu ứng nhấc nhẹ khi chọn */
.ndn-ccat{
  padding:6px 13px !important;border-radius:999px !important;
  border:1.5px solid #e8eaed !important;
}
.ndn-ccat:hover{transform:translateY(-1px)}
.ndn-ccat.active{
  box-shadow:0 3px 10px color-mix(in srgb, var(--cc) 30%, transparent);
  transform:translateY(-1px);
}

/* Vùng soạn thảo dễ thở hơn */
.ndn-cmodal-editor-wrap{padding:14px 18px 2px !important;min-height:200px !important}
.ndn-editor{font-size:16.5px !important;line-height:1.7 !important;min-height:180px !important}

/* Dropdown phạm vi: bo góc, bóng mềm */
.ndn-vis-dropdown{border-radius:14px !important;box-shadow:0 12px 36px rgba(15,23,42,.18) !important}
.ndn-vis-opt{padding:11px 15px !important}
.ndn-vis-opt.active{box-shadow:inset 3px 0 0 var(--ndn-brand)}

/* Thanh công cụ + nút đăng */
.ndn-cmodal-ft{
  background:#fcfcfd;padding:12px 18px !important;
  border-top:1px solid #eef0f3 !important;
}
.ndn-cmt-btn{border-radius:12px;transition:background .15s,transform .12s}
.ndn-cmt-btn:hover{background:#eef2ff;transform:translateY(-1px)}
.ndn-cmodal-submit{
  background:var(--ndn-grad) !important;
  box-shadow:0 6px 16px rgba(29,78,216,.32);
  padding:10px 26px !important;
  letter-spacing:.01em;
}
.ndn-cmodal-submit:hover{filter:brightness(1.05);box-shadow:0 8px 22px rgba(29,78,216,.4)}
.ndn-cmodal-submit:disabled{box-shadow:none}

/* Lưới ảnh & thẻ YouTube mềm mại hơn */
.ndn-cm-image-grid,.ndn-cm-yt-card{border-radius:14px !important}
.ndn-img-item{border-radius:12px;overflow:hidden}
.ndn-img-rm{backdrop-filter:blur(2px)}

@media (max-width:560px){
  .ndn-cmodal{padding:0 !important;align-items:flex-end !important}
  .ndn-cmodal-box{
    max-width:100% !important;width:100% !important;
    border-radius:20px 20px 0 0 !important;max-height:94vh !important;
  }
}

/* ===================================================================
   2) POPUP ĐANG THEO DÕI / NGƯỜI THEO DÕI
   =================================================================== */

.ndn-follow-box{max-width:520px !important;padding:22px 20px 18px !important}
.ndn-follow-box .ndn-modal-title{margin-bottom:14px !important}

/* Tabs trượt */
.ndn-follow-tabs{
  position:relative;display:flex;background:#f1f3f6;
  border-radius:12px;padding:4px;margin-bottom:14px;
}
.ndn-follow-tab{
  position:relative;z-index:1;flex:1;border:none;background:none;cursor:pointer;
  padding:9px 8px;border-radius:9px;font-size:13.5px;font-weight:700;color:#65676b;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:color .2s;font-family:inherit;
}
.ndn-follow-tab.active{color:var(--ndn-brand)}
.ndn-follow-tab-count{
  min-width:20px;height:18px;padding:0 5px;border-radius:9px;
  background:#e2e6ec;color:#65676b;font-size:11px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;transition:background .2s,color .2s;
}
.ndn-follow-tab.active .ndn-follow-tab-count{background:var(--ndn-brand);color:#fff}
.ndn-follow-tab-count:empty{display:none}
.ndn-follow-tab-ind{
  position:absolute;top:4px;left:4px;z-index:0;
  width:calc(50% - 4px);height:calc(100% - 8px);
  background:#fff;border-radius:9px;
  box-shadow:0 2px 8px rgba(15,23,42,.1);
  transition:transform .25s cubic-bezier(.32,.72,0,1);
}

/* Ô tìm kiếm trong popup */
.ndn-follow-search{
  position:relative;display:flex;align-items:center;gap:8px;
  background:#f1f3f6;border:1.5px solid transparent;border-radius:11px;
  padding:0 12px;margin-bottom:12px;transition:border-color .15s,background .15s;
}
.ndn-follow-search:focus-within{background:#fff;border-color:var(--ndn-brand);box-shadow:0 0 0 3px var(--ndn-ring)}
.ndn-follow-search svg{width:17px;height:17px;stroke:#94a3b8;flex-shrink:0}
.ndn-follow-search input{
  flex:1;border:none;background:none;outline:none;
  padding:10px 0;font-size:14px;color:#1c1e21;font-family:inherit;
}
.ndn-follow-search-clear{
  border:none;background:#e2e6ec;color:#65676b;cursor:pointer;
  width:20px;height:20px;border-radius:50%;font-size:11px;
  display:none;align-items:center;justify-content:center;flex-shrink:0;
}
.ndn-follow-search-clear:hover{background:#cbd2db;color:#1c1e21}

/* Danh sách + item */
.ndn-follow-list{
  display:flex;flex-direction:column;gap:2px;
  max-height:56vh;overflow-y:auto;margin:0 -6px;padding:0 6px;
  scrollbar-width:thin;scrollbar-color:#d0d3da transparent;
}
.ndn-follow-list::-webkit-scrollbar{width:6px}
.ndn-follow-list::-webkit-scrollbar-thumb{background:#d0d3da;border-radius:3px}
.ndn-follow-item{
  display:flex;align-items:center;gap:12px;padding:9px 10px !important;
  border-radius:12px !important;background:transparent !important;transition:background .12s;
}
.ndn-follow-item:hover{background:#f4f6f9 !important}
.ndn-follow-avatar-link{flex-shrink:0;display:block;position:relative}
.ndn-follow-item .ndn-ba{
  width:46px !important;height:46px !important;
  box-shadow:0 0 0 2px #fff,0 1px 3px rgba(15,23,42,.12);
}
.ndn-follow-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ndn-follow-name{
  display:flex;align-items:center;gap:5px;
  font-size:14.5px !important;font-weight:700 !important;
  color:#1c1e21 !important;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ndn-follow-name:hover{color:var(--ndn-brand) !important}
.ndn-follow-name .ndn-kyc-badge{
  flex-shrink:0;width:15px;height:15px;border-radius:50%;
  background:var(--ndn-brand);color:#fff;font-size:9px;font-weight:900;
  display:inline-flex;align-items:center;justify-content:center;
}
.ndn-follow-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ndn-follow-score{
  font-size:12px !important;color:#64748b !important;font-weight:600;
  background:#f1f5f9;padding:1px 8px;border-radius:8px;
}
.ndn-follow-tagm{
  font-size:10.5px;font-weight:700;color:#0891b2;
  background:#ecfeff;padding:1px 8px;border-radius:8px;
}
.ndn-follow-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ndn-follow-msg-btn{
  width:34px;height:34px;border-radius:50%;
  border:1.5px solid #e2e8f0;background:#fff;cursor:pointer;
  font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s,transform .12s;
}
.ndn-follow-msg-btn:hover{background:#eff6ff;border-color:var(--ndn-brand);transform:translateY(-1px)}
.ndn-follow-actions .ndn-follow-btn{padding:6px 13px !important}

/* Trạng thái rỗng đẹp hơn */
.ndn-follow-empty{text-align:center;padding:34px 16px !important}
.ndn-follow-empty-ic{font-size:40px;line-height:1;margin-bottom:10px;opacity:.9}
.ndn-follow-empty p{margin:0 0 4px;font-size:15px;font-weight:700;color:#1c1e21}
.ndn-follow-empty span{font-size:13px;color:#65676b;display:block;max-width:280px;margin:0 auto}

@media (max-width:560px){
  .ndn-modal{padding:0 !important;align-items:flex-end !important}
  .ndn-follow-box{
    max-width:100% !important;width:100% !important;
    border-radius:18px 18px 0 0 !important;max-height:92vh !important;
  }
  .ndn-follow-list{max-height:64vh}
}