/* ============================================================
   feed-mobile.css — TFS Final v4
   ============================================================ */

:root {
  --mobile-nav-h: 58px;
  --accent: #4f46e5;
  --accent-light: #ede9fe;
  --text-primary: #111827;
  --text-muted: #6b7280;
  --border-color: #e5e7eb;
}

/* ── GLOBAL ── */
/* Desktop: no padding */
body { padding-bottom: 0 !important; }

@media (max-width: 991px) {
  body {
    padding-bottom: var(--mobile-nav-h) !important;
  }
  .tfs-feed-shell { padding-left:0!important; padding-right:0!important; overflow-x:hidden; }
  .tfs-feed-row { margin:0!important; }
  main[class*="col-"] { width:100%!important; max-width:100%!important; flex:0 0 100%!important; padding:0!important; }
  .tfs-feed-page { padding-top:6px!important; }
}

/* iPhone safe area — mobile only */
@media (max-width: 991px) {
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    body { padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)) !important; }
    .tfs-footer-nav { padding-bottom: env(safe-area-inset-bottom); height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)) !important; }
  }
}

/* ── COMPOSER ── */
@media (max-width: 767px) {
  .tfs-composer-card { border-radius:0!important; margin:0 0 8px 0!important; padding:12px 14px!important; box-shadow:none!important; border:none!important; border-bottom:6px solid #f3f4f6!important; }
  .tfs-composer-top { display:flex; align-items:flex-start; gap:10px; }
  .tfs-composer-avatar { width:42px!important; height:42px!important; min-width:42px!important; border-radius:50%!important; object-fit:cover; }
  textarea.tfs-composer-input { flex:1; font-size:14px!important; padding:8px 12px!important; border-radius:20px!important; border:1px solid var(--border-color)!important; resize:none!important; min-height:40px!important; background:#f9fafb; }
  textarea.tfs-composer-input:focus { border-color:var(--accent)!important; background:#fff; outline:none!important; box-shadow:none!important; }
  .tfs-composer-actions { display:flex!important; align-items:center!important; justify-content:space-between!important; margin-top:10px!important; padding-top:10px!important; border-top:1px solid var(--border-color); gap:8px; }
  .tfs-composer-tools { display:flex!important; gap:4px!important; flex-wrap:nowrap!important; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; flex:1; }
  .tfs-composer-tools::-webkit-scrollbar { display:none; }
  .tfs-tool-btn { display:flex!important; align-items:center!important; justify-content:center!important; padding:7px 10px!important; border-radius:8px!important; background:#f3f4f6!important; border:none!important; color:#374151!important; cursor:pointer!important; white-space:nowrap!important; min-height:34px; min-width:34px; }
  .tfs-tool-btn i { font-size:18px!important; }
  .tfs-tool-btn span { display:none!important; }
  .tfs-post-submit, button.tfs-post-submit { padding:8px 22px!important; font-size:14px!important; font-weight:600!important; border-radius:20px!important; white-space:nowrap!important; width:auto!important; min-width:70px!important; flex-shrink:0; }
}

/* ── POST CARDS ── */
@media (max-width: 767px) {
  .post-card { border-radius:0!important; padding:14px!important; margin-bottom:0!important; box-shadow:none!important; border:none!important; border-bottom:8px solid #f3f4f6!important; background:#fff; }
  .post-card img.post-user-avatar, .post-card img.avatar, .d-flex img.avatar { width:42px!important; height:42px!important; min-width:42px!important; border-radius:50%!important; object-fit:cover!important; }
  .post-text { font-size:14px!important; line-height:1.55!important; }
  .post-img { border-radius:10px!important; width:100%!important; max-height:380px; object-fit:cover; margin-top:10px; }
  .post-video { width:100%!important; border-radius:10px!important; max-height:320px; }
  .action-btn { width:34px!important; height:34px!important; display:flex!important; align-items:center; justify-content:center; border-radius:50%; border:none!important; background:none!important; cursor:pointer; }
  .dropdown-menu { font-size:14px!important; border-radius:12px!important; box-shadow:0 4px 20px rgba(0,0,0,.12)!important; }
  .dropdown-item { padding:10px 16px!important; }
}

/* ── POST ACTIONS BAR ── */
@media (max-width: 767px) {
  .post-actions-bar { display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important; align-items:center!important; padding-top:8px!important; border-top:1px solid var(--border-color)!important; margin-top:8px!important; gap:0!important; width:100%!important; }
  .post-actions-bar .post-action-item, .post-actions-bar > button, .post-actions-bar > div { flex:1 1 0!important; min-width:0!important; display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:center!important; gap:4px!important; padding:8px 2px!important; min-height:40px!important; font-size:12px!important; border:none!important; background:none!important; color:var(--text-muted)!important; cursor:pointer!important; border-radius:6px; }
  .post-actions-bar i { font-size:17px!important; }
  .post-actions-bar strong { font-size:12px!important; font-weight:500!important; }
  .post-actions-bar .reaction-trigger { flex:1 1 0!important; position:relative; }
  .post-actions-bar .reaction-main-btn { width:100%!important; display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:center!important; gap:4px!important; padding:8px 2px!important; min-height:40px!important; border:none!important; background:none!important; color:var(--text-muted)!important; cursor:pointer!important; font-size:12px!important; }
  .post-actions-bar .reaction-main-btn.is-active { color:var(--accent)!important; }
  .post-actions-bar .reaction-main-btn.is-active.is-love { color:#ef4444!important; }
  .post-actions-bar .reaction-main-btn i { font-size:17px!important; }
  .post-actions-bar .reaction-main-btn strong { font-size:12px!important; font-weight:500!important; }
  .save-post-inline.is-saved i { color:var(--accent)!important; }
  .reaction-picker { bottom:46px!important; left:0!important; border-radius:24px!important; padding:6px 8px!important; box-shadow:0 4px 20px rgba(0,0,0,.15)!important; }
  .reaction-badge { width:38px!important; height:38px!important; }
}

/* ── COMMENTS ── */
@media (max-width: 767px) {
  .comment-list .avatar { width:32px!important; height:32px!important; min-width:32px; }
  .comment-form .form-control { border-radius:20px!important; padding:7px 14px!important; font-size:13px; }
  .comment-form .btn-primary { border-radius:20px!important; padding:7px 14px!important; font-size:13px; }
  .reply-indent { margin-left:24px!important; }
  .comment-meta { font-size:11px!important; }
  .post-reactions-top { font-size:12px!important; margin-bottom:4px; }
}

/* ── MODALS ── */
@media (max-width: 767px) {
  #postModal .modal-dialog { margin:0!important; max-width:100vw!important; height:100dvh!important; border-radius:0!important; }
  #postModal .modal-content { height:100dvh!important; border-radius:0!important; border:none!important; }
  #postModal .modal-body { padding:0!important; }
  .post-modal-wrap { display:flex!important; flex-direction:column!important; height:100%; }
  .post-modal-wrap .media-col { width:100%!important; max-height:42vh; overflow:hidden; background:#000; flex-shrink:0; }
  .post-modal-wrap .media-col img, .post-modal-wrap .media-col video { width:100%!important; max-height:42vh!important; object-fit:contain; }
  .post-modal-wrap .side-col { flex:1; overflow-y:auto; padding:14px!important; }
  #articleModal .modal-dialog { margin:0!important; max-width:100vw!important; position:fixed!important; bottom:0!important; left:0!important; right:0!important; border-radius:18px 18px 0 0!important; }
  #articleModal .modal-content { border-radius:18px 18px 0 0!important; border:none!important; max-height:88vh; overflow-y:auto; }
  #likersModal .modal-dialog, #confirmDeleteModal .modal-dialog, #contactInfoModal .modal-dialog { margin:auto 0 0!important; max-width:100vw!important; border-radius:18px 18px 0 0!important; }
  #likersModal .modal-content, #confirmDeleteModal .modal-content, #contactInfoModal .modal-content { border-radius:18px 18px 0 0!important; border:none!important; max-height:75vh; overflow-y:auto; }
  #confirmDeleteModal .modal-footer { gap:10px; }
  #confirmDeleteModal .modal-footer .btn { flex:1; padding:10px!important; font-size:14px; }
  .tfs-modal { align-items:flex-end!important; padding:0!important; }
  .tfs-modal-content { width:100%!important; border-radius:18px 18px 0 0!important; padding:18px 16px!important; max-height:65vh; }
  .tfs-modal-actions { flex-direction:row!important; gap:10px; margin-top:12px; }
  .tfs-modal-actions button { flex:1; padding:10px!important; font-size:14px!important; border-radius:10px!important; }
}

/* ── MISC ── */
@media (max-width: 767px) {
  .loader { text-align:center; padding:16px; font-size:13px; color:var(--text-muted); }
  .composer-attach.show { margin:8px 0 4px!important; border-radius:10px!important; overflow:hidden; }
  .composer-attach img, .composer-attach video { width:100%!important; max-height:200px; object-fit:cover; }
  .remove-attach { width:28px!important; height:28px!important; font-size:18px!important; top:6px!important; right:6px!important; }
  #repost-preview { font-size:13px!important; }
  #repost-preview-body { max-height:120px!important; border-radius:10px!important; padding:10px!important; }
}

/* ══════════════════════════════════════════════
   MOBILE BOTTOM NAV — TFS Purple Theme
   ══════════════════════════════════════════════ */
.tfs-mobile-nav { display:none!important; } /* hide old nav */

/* Apply Popup */
.tfs-apply-popup-overlay {
  display: none;
  position: fixed; inset:0;
  background: rgba(0,0,0,.5);
  z-index: 1080;
  align-items: flex-end;
  justify-content: center;
}
.tfs-apply-popup-overlay.show { display:flex; }

.tfs-apply-popup {
  background: #fff;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 520px;
  padding-bottom: env(safe-area-inset-bottom,0px);
  animation: tfsSlideUp .22s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}

@keyframes tfsSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.tfs-popup-header {
  background: linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);
  padding: 16px 20px 14px;
  display: flex; align-items:center; justify-content:space-between;
}
.tfs-popup-header h4 {
  font-size:16px; font-weight:700; margin:0; color:#fff;
  display:flex; align-items:center; gap:8px;
}
.tfs-popup-header h4::before {
  content:''; display:inline-block;
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.6);
}
.tfs-popup-header button {
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.2); border:none;
  color:#fff; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.tfs-popup-header button:hover { background:rgba(255,255,255,.35); }

.tfs-popup-link {
  display: flex; align-items:center; gap:14px;
  padding: 14px 20px;
  font-size:14px; font-weight:600; color:#111827;
  text-decoration:none;
  border-bottom:1px solid #f3f4f6;
  transition: background .12s;
}
.tfs-popup-link:last-child { border-bottom:none; }
.tfs-popup-link:hover, .tfs-popup-link:active { background:#f5f3ff; color:#4f46e5; text-decoration:none; }
.tfs-popup-link-icon {
  width:40px; height:40px; border-radius:12px;
  background:#ede9fe; color:#4f46e5;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.tfs-popup-link-icon i { font-size:18px; }
.tfs-popup-link-text strong { display:block; font-size:14px; font-weight:700; }
.tfs-popup-link-text span  { display:block; font-size:12px; color:#9ca3af; margin-top:1px; }

/* Bottom Nav Bar */
.tfs-footer-nav {
  display: none;
  position: fixed; bottom:0; left:0; right:0;
  z-index: 1040;
  height: var(--mobile-nav-h);
  background: #fff;
  border-top: 1px solid var(--border-color);
  box-shadow: 0 -4px 16px rgba(79,70,229,.08);
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom,0px);
  overflow: visible;
}

@media (max-width: 991px) {
  .tfs-footer-nav { display:flex; }
}

.tfs-footer-item {
  flex: 1;
  display: flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  background: none; border:none;
  color: #9ca3af;
  font-size: 10px; font-weight:600;
  text-decoration: none;
  padding: 5px 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s;
  position: relative;
}
.tfs-footer-item i { font-size:20px; line-height:1; }
.tfs-footer-item span { line-height:1; }
.tfs-footer-item:hover, .tfs-footer-item.active { color:#4f46e5; text-decoration:none; }

/* Active indicator dot */
.tfs-footer-item.active::after {
  content:'';
  position:absolute; bottom:3px;
  width:4px; height:4px; border-radius:50%;
  background:#4f46e5;
}

/* Apply button — special purple center button */
.tfs-footer-item.apply-btn {
  color: #fff;
  overflow: visible;
  padding-top: 0;
  justify-content: flex-end;
  padding-bottom: 8px;
}
.tfs-footer-item.apply-btn .apply-icon {
  width: 48px; height: 48px; border-radius:50%;
  background: linear-gradient(135deg,#4f46e5,#7c3aed);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 14px rgba(79,70,229,.4);
  margin-bottom: 3px;
  margin-top: -14px;
  transition: transform .15s;
  flex-shrink: 0;
}
.tfs-footer-item.apply-btn .apply-icon i { font-size:22px; color:#fff; }
.tfs-footer-item.apply-btn span { color:#4f46e5; font-weight:700; font-size:10px; line-height:1; }
.tfs-footer-item.apply-btn:active .apply-icon { transform:scale(.93); }
.tfs-footer-item.apply-btn::after { display:none; }

/* Nav badge */
.tfs-fnav-badge {
  position:absolute; top:4px; right:calc(50% - 20px);
  background:#ef4444; color:#fff;
  font-size:9px; font-weight:800;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
}