/*
 * fp-feed.css — FriendPost Premium Social Feed UI
 * Facebook-inspired, fully custom, 2026 modern design
 * Include in layouts/app.blade.php: <link rel="stylesheet" href="{{ asset('css/fp-feed.css') }}">
 */

/* ═══════════════════════════════════════════════════════════
   1. DESIGN TOKENS (extend existing --c-* variables)
   ═══════════════════════════════════════════════════════════ */
:root {
  --fp-radius-card: 12px;
  --fp-radius-btn:  8px;
  --fp-radius-full: 9999px;
  --fp-shadow-card: 0 1px 4px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  --fp-shadow-menu: 0 8px 24px rgba(0,0,0,.15);
  --fp-transition:  180ms cubic-bezier(.4,0,.2,1);
  --fp-gap:         12px;
  --fp-font-sm:     13px;
  --fp-font-md:     14px;
  --fp-font-lg:     15px;

  /* Feed colours — inherit from theme or fallback */
  --fp-bg:          var(--c-bg, #f0f2f5);
  --fp-surface:     var(--c-surface, #ffffff);
  --fp-border:      var(--c-border, #e4e6eb);
  --fp-text:        var(--c-text, #050505);
  --fp-muted:       var(--c-text-muted, #65676b);
  --fp-primary:     var(--c-primary, #1877f2);
  --fp-primary-bg:  color-mix(in srgb, var(--fp-primary) 10%, transparent);
  --fp-like:        #e41e3f;
  --fp-save:        var(--fp-primary);
  --fp-danger:      #e53935;
  --fp-success:     #2e7d32;
}

/* ═══════════════════════════════════════════════════════════
   2. AVATAR
   ═══════════════════════════════════════════════════════════ */
.fp-avatar {
  border-radius: var(--fp-radius-full);
  object-fit: cover;
  flex-shrink: 0;
}
.fp-avatar--sm { width: 32px; height: 32px; }
.fp-avatar--md { width: 40px; height: 40px; }
.fp-avatar--lg { width: 48px; height: 48px; }

/* ═══════════════════════════════════════════════════════════
   3. CREATE POST — TRIGGER CARD
   ═══════════════════════════════════════════════════════════ */
.fp-create-wrapper { position: relative; }

.fp-create-card {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-card);
  box-shadow: var(--fp-shadow-card);
  overflow: hidden;
  transition: box-shadow var(--fp-transition);
}
.fp-create-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.12); }

.fp-create-trigger {
  display: flex;
  align-items: center;
  gap: var(--fp-gap);
  padding: 12px 16px 8px;
}

.fp-create-input-btn {
  flex: 1;
  padding: 10px 16px;
  border-radius: var(--fp-radius-full);
  border: 1px solid var(--fp-border);
  background: var(--fp-bg);
  color: var(--fp-muted);
  font-size: var(--fp-font-md);
  text-align: left;
  cursor: pointer;
  transition: background var(--fp-transition);
}
.fp-create-input-btn:hover { background: color-mix(in srgb, var(--fp-border) 40%, var(--fp-bg)); }

.fp-create-quick-bar {
  display: flex;
  border-top: 1px solid var(--fp-border);
  padding: 4px 8px;
  gap: 4px;
}

.fp-quick-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
  padding: 8px 4px;
  border-radius: var(--fp-radius-btn);
  font-size: var(--fp-font-sm);
  font-weight: 600;
  color: var(--fp-muted);
  cursor: pointer;
  transition: background var(--fp-transition);
  border: none;
  background: transparent;
}
.fp-quick-btn:hover { background: var(--fp-bg); }
.fp-quick-btn svg { width: 20px; height: 20px; }
.fp-quick-btn--photo { color: #45bd62; }
.fp-quick-btn--feeling { color: #f7b928; }
.fp-quick-btn--poll { color: #8a5cf6; }

/* ═══════════════════════════════════════════════════════════
   4. COMPOSER OVERLAY & MODAL
   ═══════════════════════════════════════════════════════════ */
.fp-composer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 1100; /* above topbar(40), mobile-nav(50), any sidebar */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* Ensure this stacking context is isolated from sidebar transforms */
  isolation: isolate;
}

.fp-composer {
  background: var(--fp-surface);
  border-radius: var(--fp-radius-card);
  box-shadow: var(--fp-shadow-menu);
  width: 100%;
  max-width: 540px;
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  /* scroll-snap for smooth overflow */
  overscroll-behavior: contain;
  /* Allow location dropdown to escape */
  position: relative;
}

.fp-composer-enter { transition: opacity .2s, transform .2s; }
.fp-composer-enter-start { opacity: 0; transform: scale(.96) translateY(8px); }
.fp-composer-enter-end   { opacity: 1; transform: scale(1) translateY(0); }

.fp-composer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--fp-border);
  position: sticky;
  top: 0;
  background: var(--fp-surface);
  z-index: 1;
}
.fp-composer-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--fp-text);
}
.fp-composer-close {
  width: 36px;
  height: 36px;
  border-radius: var(--fp-radius-full);
  background: var(--fp-bg);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fp-text);
  transition: background var(--fp-transition);
}
.fp-composer-close:hover { background: var(--fp-border); }
.fp-composer-close svg { width: 18px; height: 18px; }

.fp-composer-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.fp-composer-username {
  font-size: var(--fp-font-md);
  font-weight: 700;
  color: var(--fp-text);
  line-height: 1.2;
}

.fp-privacy-selector {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 8px;
  border-radius: 6px;
  background: var(--fp-bg);
  border: 1px solid var(--fp-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--fp-text);
  cursor: pointer;
  position: relative;
  user-select: none;
  margin-top: 4px;
}
.fp-privacy-selector:hover { background: var(--fp-border); }
.fp-chevron { width: 12px; height: 12px; }

.fp-composer-body { padding: 0 16px; }

.fp-composer-textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--fp-text);
  font-size: 18px;
  line-height: 1.5;
  min-height: 80px;
  font-family: inherit;
  padding: 4px 0;
}
.fp-composer-textarea--full { min-height: 120px; }
.fp-composer-textarea--compact { min-height: 60px; font-size: 15px; }
.fp-composer-textarea::placeholder { color: var(--fp-muted); }

.fp-char-counter { text-align: right; font-size: 12px; padding: 0 0 4px; }

/* Live link preview card inside the composer (pasting a Friendse
   post/status link) */
.fp-link-preview{display:flex;align-items:center;gap:10px;margin:6px 0 10px;padding:8px 10px;border:1px solid var(--fp-border);border-radius:10px;background:var(--fp-bg);animation:fpLinkPreviewIn .2s ease;}
.fp-link-preview--loading{color:var(--fp-muted);font-size:13px;gap:8px;}
.fp-link-preview-img{width:52px;height:52px;border-radius:8px;object-fit:cover;flex-shrink:0;}
.fp-link-preview-icon{width:52px;height:52px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--fp-border);font-size:20px;}
.fp-link-preview-title{margin:0;font-weight:600;font-size:13px;color:var(--fp-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fp-link-preview-text{margin:2px 0 0;font-size:12px;color:var(--fp-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.fp-link-preview-remove{margin-left:auto;flex-shrink:0;width:26px;height:26px;border-radius:50%;border:none;background:transparent;color:var(--fp-muted);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.fp-link-preview-remove:hover{background:var(--fp-border);}
@keyframes fpLinkPreviewIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}

/* Infinite-scroll sentinel + end-of-feed message (replaces numbered
   pagination on Feed / Home / Profile) */
.fp-infinite-sentinel{display:flex;align-items:center;justify-content:center;padding:18px 0;min-height:40px;}
.fp-infinite-sentinel .fp-infinite-spinner{width:26px;height:26px;border-radius:50%;border:3px solid var(--fp-border);border-top-color:#1877f2;animation:fpSpin .7s linear infinite;opacity:0;transition:opacity .15s;}
.fp-infinite-sentinel--active .fp-infinite-spinner{opacity:1;}
.fp-infinite-end{text-align:center;padding:18px 0 26px;color:var(--fp-muted);font-size:13px;font-weight:500;}
@keyframes fpSpin{to{transform:rotate(360deg);}}
.fp-char-warn { color: #e65c00; }
.fp-char-danger { color: var(--fp-danger); }

/* ═══════════════════════════════════════════════════════════
   5. IMAGE GRID (composer preview)
   ═══════════════════════════════════════════════════════════ */
.fp-image-grid {
  display: grid;
  gap: 4px;
  margin: 8px 16px;
  border-radius: 10px;
  overflow: hidden;
}
.fp-image-grid--1 { grid-template-columns: 1fr; }
.fp-image-grid--2 { grid-template-columns: 1fr 1fr; }
.fp-image-grid--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.fp-image-grid--3 .fp-image-preview:first-child { grid-row: 1 / 3; }
.fp-image-grid--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.fp-image-grid--5 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.fp-image-grid--5 .fp-image-preview:nth-child(-n+2) { grid-column: span 1; }

.fp-image-preview {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
}
.fp-image-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fp-image-preview--more::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}
.fp-image-more-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  z-index: 1;
}
.fp-image-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: var(--fp-radius-full);
  background: rgba(0,0,0,.65);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* ── Upload preview — scrollable, responsive, shows media in full ── */
.fp-upload-preview-scroll {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 10px;
  margin: 8px 16px;
  min-height: 180px;
  max-height: none;
  overflow-y: visible;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  scrollbar-width: thin;
}
.fp-upload-preview-scroll::-webkit-scrollbar { width: 6px; }
.fp-upload-preview-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 999px; }
.fp-upload-preview-item {
  position: relative;
  width: 100%;
  min-height: 180px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fp-upload-preview-media {
  width: 100%;
  height: auto;
  max-height: 55vh;
  min-height: 180px;
  object-fit: contain;
  background: #000;
  display: block;
}
.fp-upload-preview-uploading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  z-index: 3;
}
.fp-upload-preview-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  z-index: 1;
}
.fp-upload-preview-index {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  z-index: 1;
}
.fp-upload-preview-hint {
  text-align: center;
  font-size: 12px;
  color: var(--fp-muted);
  margin: -4px 16px 8px;
}
@media (max-width: 640px) {
  .fp-upload-preview-scroll { min-height: 180px; max-height: none; margin: 8px 12px; overflow-y: visible; }
  .fp-upload-preview-media { min-height: 180px; max-height: 50vh; }
}

/* ═══════════════════════════════════════════════════════════
   6. FEELING PICKER
   ═══════════════════════════════════════════════════════════ */
.fp-feeling-picker {
  margin: 0 16px 8px;
  background: var(--fp-bg);
  border-radius: 10px;
  padding: 12px;
}
.fp-feeling-picker-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fp-muted);
  margin-bottom: 10px;
}
.fp-feeling-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.fp-feeling-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  transition: background var(--fp-transition), border-color var(--fp-transition);
}
.fp-feeling-item:hover { background: var(--fp-surface); }
.fp-feeling-item--active { background: var(--fp-primary-bg); border-color: var(--fp-primary); }
.fp-feeling-emoji { font-size: 22px; }
.fp-feeling-label { font-size: 11px; color: var(--fp-text); font-weight: 500; }

.fp-feeling-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 16px 4px;
  padding: 4px 10px;
  border-radius: var(--fp-radius-full);
  background: var(--fp-primary-bg);
  font-size: 13px;
  color: var(--fp-primary);
  font-weight: 500;
}
.fp-pill-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fp-primary);
  font-size: 11px;
  line-height: 1;
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════
   7. ADD TO POST BAR
   ═══════════════════════════════════════════════════════════ */
.fp-add-to-post {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 16px;
  padding: 8px 12px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
}
.fp-add-label {
  font-size: var(--fp-font-sm);
  font-weight: 600;
  color: var(--fp-text);
}
.fp-add-actions { display: flex; gap: 4px; }
.fp-add-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fp-radius-full);
  border: none;
  cursor: pointer;
  background: transparent;
  transition: background var(--fp-transition);
}
.fp-add-btn:hover { background: var(--fp-bg); }
.fp-add-btn svg { width: 20px; height: 20px; }
.fp-add-btn--photo   { color: #45bd62; }
.fp-add-btn--tag     { color: #1877f2; }
.fp-add-btn--feeling { color: #f7b928; }
.fp-add-btn--location{ color: #e53935; }
.fp-add-btn--hashtag { color: #8e44ad; }
.fp-add-btn--bold    { color: var(--fp-text); }
.fp-add-btn--active  { background: var(--fp-primary-bg); color: var(--fp-primary); }
.fp-hashtag-hint {
  margin: -4px 16px 8px;
  font-size: 12px;
  color: var(--fp-muted);
}

.fp-location-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 16px 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--fp-bg);
  position: relative; /* needed for dropdown positioning */
  overflow: visible; /* allow dropdown to escape */
}
.fp-location-icon { width: 18px; height: 18px; color: #e53935; flex-shrink: 0; }
.fp-location-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--fp-font-md);
  color: var(--fp-text);
}

/* Location autocomplete dropdown */
.fp-location-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  z-index: 1500;
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
}
.fp-location-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: var(--fp-font-md);
  color: var(--fp-text);
  transition: background var(--fp-transition);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.fp-location-dropdown-item:hover,
.fp-location-dropdown-item:focus {
  background: var(--fp-bg);
  outline: none;
}
.fp-location-dropdown-item .fp-loc-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.fp-location-dropdown-item .fp-loc-name {
  font-weight: 600;
  font-size: 13.5px;
}
.fp-location-dropdown-item .fp-loc-country {
  font-size: 12px;
  color: var(--fp-muted);
  margin-top: 1px;
}
.fp-location-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  color: var(--fp-muted);
  font-size: 13px;
  gap: 8px;
}
.fp-location-spinner::before {
  content: '';
  width: 14px; height: 14px;
  border: 2px solid var(--fp-border);
  border-top-color: var(--fp-primary);
  border-radius: 50%;
  animation: fp-spin .6s linear infinite;
}
@keyframes fp-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   8. SUBMIT BUTTON
   ═══════════════════════════════════════════════════════════ */
.fp-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 32px);
  margin: 8px 16px 16px;
  padding: 10px;
  border-radius: var(--fp-radius-btn);
  font-size: var(--fp-font-md);
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background var(--fp-transition), opacity var(--fp-transition);
}
.fp-submit-btn--active {
  background: var(--fp-primary);
  color: #fff;
}
.fp-submit-btn--active:hover { filter: brightness(1.08); }
.fp-submit-btn--disabled {
  background: var(--fp-border);
  color: var(--fp-muted);
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════
   9. POST CARD
   ═══════════════════════════════════════════════════════════ */
.fp-post-card {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-card);
  box-shadow: var(--fp-shadow-card);
  margin-bottom: 12px;
  /* FIX: was overflow:hidden. A short post (e.g. just a shared link) has
     a short card, but its 3-dot dropdown menu (position:absolute,
     rendered inside the card) is taller than that. overflow:hidden here
     clipped/hid the lower dropdown items instead of letting them show
     over the next card. Rounded corners are already handled per-element
     (image/video wrappers have their own overflow:hidden), so the card
     itself doesn't need to clip. */
  overflow: visible;
  transition: box-shadow var(--fp-transition);
  position: relative;
}
.fp-post-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.12); }

/* Header */
.fp-post-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px 8px;
}
.fp-post-author {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}
.fp-post-author-info { min-width: 0; }
.fp-post-author-name {
  font-size: var(--fp-font-md);
  font-weight: 700;
  color: var(--fp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fp-verified {
  color: var(--fp-primary);
  font-size: 13px;
}
.fp-post-meta {
  font-size: 12px;
  color: var(--fp-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.fp-post-handle { color: var(--fp-muted); }
.fp-privacy-icon { font-size: 11px; }

/* Three-dot menu */
.fp-post-menu { position: relative; flex-shrink: 0; }
.fp-menu-trigger {
  width: 36px;
  height: 36px;
  border-radius: var(--fp-radius-full);
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fp-muted);
  transition: background var(--fp-transition);
}
.fp-menu-trigger:hover { background: var(--fp-bg); }
.fp-menu-trigger svg { width: 20px; height: 20px; }

/* Dropdown */
.fp-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: auto;
  min-width: 260px;
  max-width: calc(100vw - 32px);
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  box-shadow: var(--fp-shadow-menu);
  z-index: 200;
  overflow: hidden;
  padding: 6px;
}
.fp-dropdown--right { right: 0; left: auto; }

.fp-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background var(--fp-transition);
}
.fp-dropdown-item:hover { background: var(--fp-bg); }
.fp-dropdown-item--active { background: var(--fp-primary-bg); }
.fp-dropdown-item--danger { color: var(--fp-danger); }
.fp-dropdown-icon { font-size: 20px; flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--fp-radius-full); background: var(--fp-bg); }
.fp-dropdown-item--danger .fp-dropdown-icon { background: #ffeaea; }
.fp-dropdown-label { font-size: var(--fp-font-sm); font-weight: 600; color: var(--fp-text); line-height: 1.2; }
.fp-dropdown-sub { font-size: 12px; color: var(--fp-muted); line-height: 1.3; margin-top: 1px; }
.fp-dropdown-item--danger .fp-dropdown-label { color: var(--fp-danger); }

/* ── Status card ⋯ options menu — redesigned (feed reel cards) ──
   Trigger stays a small round glass button on the video itself; the
   menu it opens is teleported to <body> (see status-reel-card.blade.php)
   and rendered as a floating rounded card anchored under the trigger
   on desktop. On mobile it becomes a full-width bottom sheet — that
   override lives inside status-reel-card.blade.php's own <style>
   push, right next to the (same-pattern) share-sheet override, since
   it has to target the teleported element directly. */
.fp-status-menu-trigger {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--fp-transition), transform 120ms ease;
}
.fp-status-menu-trigger:hover { background: rgba(0, 0, 0, .65); }
.fp-status-menu-trigger:active { transform: scale(.9); }
.fp-status-menu-trigger[aria-expanded="true"] { background: var(--fp-primary); }

.fp-status-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 9996;
}

/* Centered popup — same spot (screen middle) on mobile AND desktop,
   instead of anchoring under the ⋯ trigger / turning into a bottom
   sheet on small screens. top:50%/left:50% + translate(-50%,-50%)
   keeps it centered at any viewport size; width uses min() so it
   never touches the screen edges on phones but also never grows
   past a sane size on desktop. */
.fp-status-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9997;
  width: min(320px, calc(100vw - 32px));
  max-height: min(80vh, 440px);
  overflow-y: auto;
  background: var(--fp-surface);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .32), 0 4px 14px rgba(0, 0, 0, .14);
  padding: 10px;
  box-sizing: border-box;
}

.fp-status-menu-handle { display: none; }

.fp-status-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 8px;
  border: none;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: background var(--fp-transition);
  box-sizing: border-box;
}
.fp-status-menu-item:hover { background: var(--fp-bg); }
.fp-status-menu-item:disabled { cursor: default; opacity: .55; }
.fp-status-menu-item:disabled:hover { background: transparent; }
.fp-status-menu-item + .fp-status-menu-item { margin-top: 2px; }

.fp-status-menu-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--fp-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--fp-bg);
}
.fp-status-menu-item--danger .fp-status-menu-icon { background: #fdecea; }
.fp-status-menu-item--danger .fp-status-menu-title { color: var(--fp-danger); }

.fp-status-menu-text { min-width: 0; flex: 1 1 auto; }
.fp-status-menu-title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fp-text);
  line-height: 1.25;
  white-space: normal;
}
.fp-status-menu-desc {
  display: block;
  font-size: 11px;
  color: var(--fp-muted);
  line-height: 1.3;
  margin-top: 1px;
  white-space: normal;
}

.fp-status-menu-enter { transition: opacity .18s ease, transform .18s ease; }
.fp-status-menu-enter-start { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
.fp-status-menu-enter-end { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Post body */
.fp-post-body { padding: 0 16px 10px; text-align: left; margin-left: 0; }
.fp-post-text {
  font-size: var(--fp-font-lg);
  line-height: 1.55;
  color: var(--fp-text);
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
  margin-left: 0;
}
/* FIX: Post text was rendering shifted away from the left edge on some
   posts (looked centered inside the card) — same class of bug as the old
   post-title alignment issue. Force it the same way: zero out any
   left margin/padding beyond the card's standard 16px gutter and pin
   text-align left with !important so nothing in the cascade (theme
   rules, dark mode, a stray inherited style) can shift it again. */
.fp-post-card .fp-post-body,
#posts-list .fp-post-body,
.friende-card .fp-post-body {
  text-align: left !important;
  padding-left: 16px !important;
  margin-left: 0 !important;
}
.fp-post-card .fp-post-text,
#posts-list .fp-post-text,
.friende-card .fp-post-text {
  text-align: left !important;
  margin-left: 0 !important;
}

.fp-see-more {
  display: inline;
  background: none;
  border: none;
  color: var(--fp-muted);
  font-size: var(--fp-font-sm);
  font-weight: 600;
  cursor: pointer;
  padding: 0 0 0 4px;
}
.fp-see-more:hover { color: var(--fp-text); }
.fp-hashtag {
  color: var(--fp-primary);
  text-decoration: none;
  font-weight: 500;
}
.fp-hashtag:hover { text-decoration: underline; }
.fp-mention {
  color: var(--fp-primary);
  text-decoration: none;
  font-weight: 600;
}
.fp-mention:hover { text-decoration: underline; }

/* Post image */
.fp-post-media { background: #000; overflow: hidden; }
.fp-post-image {
  width: 100%;
  max-height: 550px;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
  transition: opacity var(--fp-transition);
}
.fp-post-image:hover { opacity: .97; }

/* Lightbox */
.fp-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.fp-lightbox-img {
  max-width: 96vw;
  max-height: 96vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.fp-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: var(--fp-radius-full);
  background: rgba(255,255,255,.15);
  color: #fff;
  border: none;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--fp-transition);
}
.fp-lightbox-close:hover { background: rgba(255,255,255,.3); }

/* Stats bar — modernized Facebook-style reaction/comment/share summary */
.fp-post-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin: 0 12px;
  font-size: 13px;
  color: var(--fp-muted);
  border-bottom: 1px solid var(--fp-border);
}
.fp-stat-reactions { display: flex; align-items: center; gap: 4px; }
.fp-reaction-emoji { font-size: 14px; }
.fp-stat-right { display: flex; align-items: center; gap: 6px; }
.fp-stat-link {
  background: none;
  border: none;
  color: var(--fp-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  transition: color var(--fp-transition);
}
.fp-stat-link:hover { text-decoration: underline; color: var(--fp-text); }
.fp-stat-sep { color: var(--fp-border); font-size: 10px; }

/* Modern comment/share count chips — small rounded pill with an icon,
   matching the reaction-bubble treatment used for the like count. */
.fp-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--fp-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 3px 9px 3px 7px;
  border-radius: var(--fp-radius-full);
  transition: background var(--fp-transition), color var(--fp-transition);
  white-space: nowrap;
}
.fp-stat-chip:hover { background: color-mix(in srgb, var(--fp-primary) 8%, var(--fp-bg)); color: var(--fp-text); }
.fp-stat-chip--static { cursor: default; }
.fp-stat-chip--static:hover { background: var(--fp-bg); color: var(--fp-muted); }
.fp-stat-chip-icon { width: 14px; height: 14px; flex-shrink: 0; opacity: .85; }

/* Reaction bubbles + count, shown in the stats bar */
.fp-reaction-bubbles-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  background: var(--fp-bg);
  border-radius: var(--fp-radius-full);
  cursor: default;
  transition: background var(--fp-transition), box-shadow var(--fp-transition);
}
.fp-reaction-bubbles-wrap:hover { background: color-mix(in srgb, var(--fp-primary) 8%, var(--fp-bg)); }
.fp-reaction-bubbles-wrap > span:last-child { font-weight: 600; color: var(--fp-text); }

/* Action bar — soft rounded "segmented" bar so it reads as modern
   even at rest, not only on hover. */
.fp-post-actions {
  display: flex;
  align-items: stretch;
  padding: 4px;
  margin: 8px 12px;
  gap: 4px;
  background: var(--fp-bg);
  border-radius: 14px;
}
/* Every direct child (Like wrapper, Comment, Share wrapper, Save) takes
   exactly the same width so the row is perfectly even edge to edge. */
.fp-post-actions > * { flex: 1 1 0; min-width: 0; }
.fp-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 9px 4px;
  margin: 0;
  line-height: 1;
  border-radius: var(--fp-radius-full);
  border: none;
  background: transparent;
  color: var(--fp-muted);
  font-size: var(--fp-font-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fp-transition), color var(--fp-transition), transform .12s ease;
  white-space: nowrap;
}
.fp-action-btn:hover { background: var(--fp-surface); color: var(--fp-text); box-shadow: 0 1px 3px rgba(0,0,0,.10); transform: translateY(-1px); }
.fp-action-btn:active { transform: translateY(0); box-shadow: none; }
.fp-action-btn--liked { color: var(--fp-like); background: color-mix(in srgb, var(--fp-like) 10%, var(--fp-surface)); }
.fp-action-btn--liked:hover { color: var(--fp-like); background: color-mix(in srgb, var(--fp-like) 16%, var(--fp-surface)); }
.fp-action-btn--saved { color: var(--fp-save); }
.fp-action-btn--disabled,
.fp-action-btn--disabled:hover {
  opacity: .45;
  cursor: not-allowed;
  background: transparent;
  color: var(--fp-muted);
  transform: none;
}
.fp-action-btn--disabled:active .fp-action-icon { transform: none; }
.fp-action-icon {
  font-size: 17px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  transition: transform .2s;
}
.fp-action-btn:active .fp-action-icon { transform: scale(1.25); }
.fp-action-share { position: relative; flex: 1 1 0; min-width: 0; display: flex; }
.fp-share-dropdown { top: auto; bottom: calc(100% + 4px); right: 0; left: auto; min-width: 200px; }

/* ═══════════════════════════════════════════════════════════
   10. COMMENTS
   ═══════════════════════════════════════════════════════════ */
.fp-comments-section {
  border-top: 1px solid var(--fp-border);
  padding: 10px 16px 12px;
}
.fp-comments-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }

.fp-comment {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.fp-comment--new { animation: fpSlideIn .25s ease; }
@keyframes fpSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fp-comment-body { flex: 1; min-width: 0; }
.fp-comment-bubble {
  display: inline-block;
  background: var(--fp-bg);
  border-radius: 16px;
  padding: 8px 12px;
  max-width: 100%;
  word-break: break-word;
}
.fp-comment-author {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--fp-text);
  text-decoration: none;
  margin-bottom: 2px;
}
.fp-comment-text { font-size: var(--fp-font-sm); color: var(--fp-text); line-height: 1.45; }
.fp-comment-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 3px;
  padding-left: 4px;
  font-size: 12px;
  color: var(--fp-muted);
}
.fp-comment-delete {
  background: none;
  border: none;
  color: var(--fp-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}
.fp-comment-delete:hover { color: var(--fp-danger); }
.fp-no-comments {
  font-size: var(--fp-font-sm);
  color: var(--fp-muted);
  text-align: center;
  padding: 8px 0;
}

/* Comment input */
.fp-comment-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fp-comment-form { flex: 1; }
.fp-comment-input-wrap {
  display: flex;
  align-items: center;
  border-radius: var(--fp-radius-full);
  border: 1px solid var(--fp-border);
  background: var(--fp-bg);
  padding: 6px 8px 6px 16px;
  transition: border-color var(--fp-transition);
}
.fp-comment-input-wrap:focus-within { border-color: var(--fp-primary); }
.fp-comment-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--fp-font-sm);
  color: var(--fp-text);
  font-family: inherit;
}
.fp-comment-input::placeholder { color: var(--fp-muted); }
.fp-comment-send {
  width: 32px;
  height: 32px;
  border-radius: var(--fp-radius-full);
  background: var(--fp-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  transition: filter var(--fp-transition);
}
.fp-comment-send:hover { filter: brightness(1.1); }
.fp-comment-send svg { width: 16px; height: 16px; }

/* ═══════════════════════════════════════════════════════════
   11. EDIT MODAL
   ═══════════════════════════════════════════════════════════ */
.fp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.fp-modal {
  background: var(--fp-surface);
  border-radius: var(--fp-radius-card);
  box-shadow: var(--fp-shadow-menu);
  width: 100%;
  max-width: 500px;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   11b. CONFIRM MODAL (e.g. "Remove comment?") — same shape as
   Facebook's delete confirmation: a centered card on desktop,
   a bottom action-sheet on small screens.
   ═══════════════════════════════════════════════════════════ */
.fp-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.fp-confirm-sheet {
  background: var(--fp-surface);
  color: var(--fp-text);
  border-radius: var(--fp-radius-card);
  box-shadow: var(--fp-shadow-menu);
  width: 100%;
  max-width: 360px;
  padding: 20px;
  text-align: center;
}
.fp-confirm-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
}
.fp-confirm-body {
  font-size: 14px;
  color: var(--fp-muted);
  margin: 0 0 18px;
  line-height: 1.4;
}
.fp-confirm-actions {
  display: flex;
  gap: 10px;
}
.fp-confirm-btn {
  flex: 1;
  padding: 10px 14px;
  border-radius: var(--fp-radius-btn);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}
.fp-confirm-btn--cancel {
  background: var(--fp-bg);
  color: var(--fp-text);
}
.fp-confirm-btn--danger {
  background: var(--fp-danger);
  color: #fff;
}
/* Profile → Drafts tab cards */
.fp-draft-btn {
  padding: 7px 16px;
  border-radius: var(--fp-radius-btn);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}
.fp-draft-btn--primary {
  background: var(--c-primary, #1877f2);
  color: #fff;
}
.fp-draft-btn--danger {
  background: transparent;
  color: var(--fp-danger, #e0245e);
  border: 1px solid var(--fp-danger, #e0245e);
}

/* Discard/Save-as-draft dialog has 3 actions instead of 2 — stack them
   full-width instead of squeezing three flex:1 buttons into one row. */
.fp-confirm-actions--stack {
  flex-direction: column;
  gap: 8px;
}
.fp-confirm-actions--stack .fp-confirm-btn {
  width: 100%;
}
.fp-confirm-actions--stack .fp-confirm-btn--cancel {
  background: transparent;
  color: var(--fp-muted);
  font-weight: 500;
  padding: 8px 14px;
}
.fp-confirm-enter { transition: opacity .18s ease, transform .18s ease; }
.fp-confirm-enter-start { opacity: 0; transform: translateY(8px) scale(.98); }
.fp-confirm-enter-end { opacity: 1; transform: translateY(0) scale(1); }

/* Mobile: bottom action-sheet, same as Facebook's mobile delete popup */
@media (max-width: 480px) {
  .fp-confirm-overlay { align-items: flex-end; padding: 0; }
  .fp-confirm-sheet {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  }
  .fp-confirm-actions { flex-direction: column-reverse; }
  .fp-confirm-actions--stack { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════
   12. TOAST
   ═══════════════════════════════════════════════════════════ */
.fp-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--fp-text);
  color: var(--fp-surface);
  padding: 10px 20px;
  border-radius: var(--fp-radius-full);
  font-size: var(--fp-font-sm);
  font-weight: 600;
  z-index: 3000;
  box-shadow: var(--fp-shadow-menu);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   13. FEED MISC
   ═══════════════════════════════════════════════════════════ */
.fp-alert {
  padding: 12px 16px;
  border-radius: var(--fp-radius-btn);
  font-size: var(--fp-font-sm);
  font-weight: 500;
  margin-bottom: 12px;
}
.fp-alert--success { background: #e8f5e9; color: var(--fp-success); border: 1px solid #c8e6c9; }

.fp-empty-state {
  text-align: center;
  padding: 60px 24px;
  background: var(--fp-surface);
  border-radius: var(--fp-radius-card);
  border: 1px solid var(--fp-border);
  box-shadow: var(--fp-shadow-card);
}
.fp-empty-icon { font-size: 48px; margin-bottom: 12px; }
.fp-empty-title { font-size: 20px; font-weight: 700; color: var(--fp-text); margin-bottom: 6px; }
.fp-empty-sub { font-size: var(--fp-font-md); color: var(--fp-muted); }

.fp-pagination { margin-top: 16px; display: flex; justify-content: center; }

.fp-error {
  font-size: 13px;
  color: var(--fp-danger);
  padding: 4px 16px;
  margin-top: 4px;
}

/* Spinner */
.fp-spinner-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: fpSpin .7s linear infinite;
}
@keyframes fpSpin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   14. SKELETON LOADER
   ═══════════════════════════════════════════════════════════ */
.fp-skeleton-card {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-card);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--fp-shadow-card);
}
.fp-skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--fp-bg) 25%, color-mix(in srgb, var(--fp-border) 60%, var(--fp-bg)) 50%, var(--fp-bg) 75%);
  background-size: 200% 100%;
  animation: fpShimmer 1.4s ease infinite;
  margin-bottom: 8px;
}
@keyframes fpShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════
   15. RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .fp-create-trigger { padding: 10px 12px 6px; }

  /* Bottom-sheet style on mobile: slides up from bottom, full width */
  .fp-composer-overlay {
    align-items: flex-end;
    padding: 0;
    /* Always cover mobile-nav (z-index 50) */
    z-index: 1100;
  }
  .fp-composer {
    border-radius: 20px 20px 0 0;
    max-height: 92dvh; /* use dvh so virtual keyboard doesn't cut it off */
    width: 100%;
    max-width: 100%;
  }

  /* Quick bar labels hide on small screens */
  .fp-quick-btn span { display: none; }
  /* Labels hide on phones — the icon then sits dead-centre in an
     equal-width column (no leftover gap pushing it off-centre). */
  .fp-action-btn span:last-child { display: none; }
  .fp-action-btn { gap: 0; padding: 9px 0; }
  .fp-feeling-grid { grid-template-columns: repeat(3, 1fr); }

  /* Images/videos show full width in composer so user sees the whole media */
  .fp-post-image { max-height: 380px; }
  .fp-image-grid { margin: 0 0 8px; border-radius: 0; }
  .fp-image-preview-img { object-fit: contain; max-height: 260px; background: #000; }
  .fp-image-preview { border-radius: 8px; overflow: hidden; }

  /* Single image: full width in mobile composer */
  .fp-image-grid--1 .fp-image-preview { height: auto; max-height: 280px; }
  .fp-image-grid--1 .fp-image-preview-img { width: 100%; height: auto; max-height: 280px; object-fit: contain; }

  .fp-share-dropdown { right: auto; left: 0; }
  .fp-add-to-post { flex-direction: column; gap: 8px; align-items: stretch; }
  .fp-add-actions { justify-content: space-around; }

  /* Location dropdown covers full width on mobile */
  .fp-location-dropdown {
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
    border-radius: 0 0 12px 12px;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .fp-feeling-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   16. DARK MODE
   ═══════════════════════════════════════════════════════════ */
[data-color-mode="dark"] .fp-create-input-btn,
.dark .fp-create-input-btn {
  background: var(--fp-bg);
  border-color: var(--fp-border);
}
[data-color-mode="dark"] .fp-post-card,
.dark .fp-post-card {
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
[data-color-mode="dark"] .fp-lightbox { background: rgba(0,0,0,.96); }

/* ═══════════════════════════════════════════════════════════
   FIXES v17
   ═══════════════════════════════════════════════════════════ */

/* FIX: Composer overlay must cover EVERYTHING including right sidebar */
.fp-composer-overlay {
  z-index: 1200 !important;
}

/* FIX: Post image — center it like Facebook (black bars sides) */
.fp-post-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.fp-post-image {
  width: 100%;
  max-width: 100%;
  max-height: 560px;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* FIX: Post image inside COMPOSER modal preview - single image centered */
.fp-image-grid--1 .fp-image-preview {
  aspect-ratio: unset;
  min-height: 180px;
  max-height: 320px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fp-image-grid--1 .fp-image-preview-img {
  width: auto;
  max-width: 100%;
  max-height: 320px;
  height: auto;
  object-fit: contain;
}

/* FIX: Location dropdown on MOBILE — goes above overlay */
@media (max-width: 600px) {
  .fp-location-dropdown {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    top: auto !important;
    z-index: 1300 !important;
    max-height: 260px;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.3);
  }
}

/* FIX: Right sidebar / friende-rightbar must not overlay the modal.
   .friende-rightbar is `position: sticky`, which — regardless of its
   z-index — creates its own stacking context, so it competes directly
   with any fixed-position overlay (like the bulk-delete confirm modal)
   instead of just sitting quietly in normal flow. Pinning it to a very
   low explicit z-index, plus giving the modal backdrop an explicit high
   one below, removes any ambiguity about which one paints on top. */
.friende-rightbar {
  z-index: 1 !important;
}
.fp-modal-backdrop {
  z-index: 99999 !important;
}

/* FIX: Post title display on card.
   FORCED LEFT ALIGN — Facebook always left-aligns the post title/body,
   never centers it. Explicit text-align here (rather than relying on
   inheritance) guarantees it stays left regardless of any ancestor
   theme rule or a stray text-align picked up elsewhere in the cascade. */
.fp-post-title {
  font-size: clamp(14px, 3.5vw, 17px);
  font-weight: 700;
  color: var(--fp-text);
  padding: 10px 16px 4px;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: break-word;
  text-align: left !important;
}
/* FIX: Post title always left — new and old posts both */
.fp-post-card .fp-post-title,
#posts-list .fp-post-title {
  text-align: left !important;
}

/* FIX: Title input in composer */
.fp-title-input {
  width: 100%;
  font-size: 20px;
  font-weight: 700;
  color: var(--fp-text);
  background: transparent;
  border: none;
  outline: none;
  padding: 8px 16px 4px;
  resize: none;
  line-height: 1.3;
  font-family: inherit;
}
.fp-title-input::placeholder {
  color: var(--fp-muted);
  font-weight: 400;
  font-size: 18px;
}

/* FIX: Status sidebar — when collapsed, viewer card expands to fill */
#fs-player-root {
  transition: none;
}
#fs-player-root .fs-sidebar {
  transition: width .3s cubic-bezier(.22,1,.36,1), opacity .25s;
}
/* Viewer card should flex-grow to fill the space when sidebar hidden */
#fs-viewer-card, .fs-viewer-card {
  flex: 1 1 0%;
  min-width: 0;
  transition: flex .3s, width .3s;
}

/* ═══════════════════════════════════════════════════════════════════
   FRIENDSE FIXES v2 — All screenshot issues addressed
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. FEED POST IMAGE: Facebook-style (max 500px, cover) ─────── */
.fp-post-media {
  background: #000;
  overflow: hidden;
  border-radius: 0;
}
.fp-post-image {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  object-position: center top;
  display: block;
  cursor: zoom-in;
}
@media (max-width: 600px) {
  .fp-post-image { max-height: 320px; }
}

/* ── 2. VIDEO IN FEED POST ─────────────────────────────────────── */
/* Same "no black bars" technique used by the Status viewer
   (status-show.blade.php / .friende-viewer-media): a blurred, scaled-up
   copy of the video fills the box edge-to-edge as a backdrop, and the
   real (sharp) video sits centered on top with object-fit:contain.
   Whatever the source video's aspect ratio is, it's always fully
   visible — the gaps are filled with a soft blur instead of solid
   black, exactly like TikTok / Instagram / Facebook feeds. */
.fp-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5; /* sensible default box until the real video's ratio is known */
  max-height: 620px;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fp-video-wrap--repost { max-height: 420px; aspect-ratio: 16 / 9; }
.fp-video-bg {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  filter: blur(32px) brightness(.55) saturate(1.2);
  transform: scale(1.05);
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.fp-video-fg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: transparent;
}
@media (max-width: 600px) {
  .fp-video-wrap { max-height: 70vh; }
  .fp-video-wrap--repost { max-height: 50vh; }
}

/* ── Reel-style overlay chrome on feed videos (mute toggle, center play,
   right-side like/comment/share rail) — Facebook Reels look. ──────── */
.fp-reel-video video.fp-video-fg { cursor: pointer; }
.fp-reel-playbtn,
.fp-reel-mute {
  transition: transform .12s, background .15s;
}
.fp-reel-playbtn:hover,
.fp-reel-mute:hover { background: rgba(0,0,0,.6) !important; }
.fp-reel-playbtn:active,
.fp-reel-mute:active { transform: scale(.92); }
.fp-reel-rail-btn { transition: transform .12s; }
.fp-reel-rail-btn:active { transform: scale(1.15); }
.fp-reel-rail-btn:active span:first-child { background: rgba(0,0,0,.55) !important; }
.fp-reel-rail-btn[disabled] { cursor: not-allowed; opacity: .6; }

/* ── Reel scrub bar + speed control + buffering indicator — brings the
   feed-embedded reel card (status-reel-card.blade.php) up to parity with
   the full-screen status viewer's own player (#fs-scrubber / #fs-speed-
   toast in status-show.blade.php), which already has both. Purely a
   presentation/UX layer: it does not change which statuses are eligible
   for view-tracking or monetization — pingView()'s dwell timer is wall-
   clock/visibility based (see startViewObserver in status-reel-card.js),
   not tied to video.currentTime, so scrubbing or speeding up playback
   can't be used to fast-forward a counted view. ── */
.fp-reel-scrubber-wrap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14px;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  padding-bottom: 2px;
}
.fp-reel-scrubber-track {
  position: relative;
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,.25);
}
.fp-reel-scrubber-buffered,
.fp-reel-scrubber-played {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  pointer-events: none;
}
.fp-reel-scrubber-buffered { background: rgba(255,255,255,.4); }
.fp-reel-scrubber-played { background: var(--fp-primary); }
.fp-reel-scrubber-input {
  position: absolute;
  inset: -7px 0;
  width: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.fp-reel-scrubber-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.25);
  cursor: pointer;
  margin-top: 0;
}
.fp-reel-scrubber-input::-moz-range-thumb {
  width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 0; cursor: pointer;
}
.fp-reel-scrubber-input::-moz-range-track { background: transparent; border: none; }

.fp-reel-speed-toast {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(0,0,0,.72);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 999px;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
.fp-reel-speed-toast.fp-reel-speed-toast--show { opacity: 1; }

.fp-reel-buffer-spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: fpSpin .7s linear infinite;
}

/* Legacy single-<video> markup (kept for anything not yet migrated to
   .fp-video-wrap) — still capped sensibly, no behaviour change. */
.fp-post-media--video { background: #000; }
.fp-post-video {
  width: 100%;
  max-height: 500px;
  display: block;
  background: #000;
}
@media (max-width: 600px) {
  .fp-post-video { max-height: 300px; }
}

/* ── 3. FIXED SIDEBARS — only middle content scrolls ───────────── */
/* Left sidebar: already sticky in friende-themes.css (sticky top:84px)   */
/* Right sidebar: make it sticky too (was height:fit-content — now fixed) */
/* FIX: only pin/scroll the rightbar on desktop. On phones/tablets the
   fixed height turned the whole column into a short inner scroll box, so
   "People you may know" showed its heading with an empty cropped area
   underneath. Below 1024px it now flows in the page like a normal card. */
@media (min-width: 1024px) {
  .friende-rightbar {
    position: sticky !important;
    top: 84px !important;
    height: calc(100vh - 104px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
  }
}
@media (max-width: 1023.98px) {
  .friende-rightbar {
    position: static !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}
/* No empty space on sides — content column fills available space */
.friende-app-shell {
  align-items: start !important;
}
/* Middle feed scrolls naturally, sidebars stay fixed */
.friende-app-shell > section {
  min-height: 100vh;
}

/* ── 4. WATERMARK: Transparent (glass-style, no white background) ─ */
/* This is handled in PHP (PostController stampWatermark uses imagecopy  */
/* instead of imagecopymerge). CSS for any visible watermark HTML:       */
/* FIX (dark mode): mix-blend-mode:multiply made any HTML watermark
   disappear completely over dark photos and in dark theme — multiply keeps
   the darker of the two layers, so a dark mark on a dark image renders as
   nothing. We keep the background transparent (no white box) but composite
   normally, and lift the mark with a soft contrast shadow so it stays
   readable on both light and dark backgrounds. */
[class*="watermark"],
.fp-watermark,
.friende-watermark {
  background: transparent !important;
  background-color: transparent !important;
  mix-blend-mode: normal;
  opacity: 0.9;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.dark [class*="watermark"],
.dark .fp-watermark,
.dark .friende-watermark {
  /* On dark surfaces the shadow should glow light instead of dark, otherwise
     a dark logo has nothing to separate it from the background. */
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.65));
}

.dark [class*="watermark"] img,
.dark .fp-watermark img,
.dark .friende-watermark img {
  /* Dark-navy logo files are unreadable on black media; brighten them so the
     mark is visible without changing the light-theme rendering. */
  filter: brightness(1.9) contrast(1.05);
}
/* The "Friendse." text watermark on posts — transparent bg */
.fp-post-image ~ .fp-watermark-text,
.fp-post-media .fp-watermark-text {
  background: transparent !important;
}

/* ── FEELING/LOCATION SENTENCE — shown right under the author's name,
   Facebook-style: plain text with just the feeling word / place name
   bolded, instead of a separate blue pill under the post text. ── */
.fp-post-feeling-line {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fp-text);
  word-break: break-word;
}
.fp-post-feeling-line strong { font-weight: 700; }

/* ── BOLD POST TEXT — new posts only have one composer field, so the
   body text itself now carries the bold "title" look that used to live
   on the separate title input, instead of showing thin/regular weight
   further down the card. Posts that still have a real title (older
   posts) keep this off since the title element already covers it. ── */
.fp-post-text--bold {
  font-weight: 700;
}

/* ── 5. MOBILE TITLE FIX — title shows properly on small screens ──
   (previously a duplicate .fp-post-title rule here silently overrode
   the real one above and stripped its top padding, which made the
   title crowd/overlap the avatar+username row right above it on
   phones — that duplicate is gone now, this only adds the extra
   small-screen tweak) */
@media (max-width: 480px) {
  .fp-post-title { padding: 8px 12px 4px; }
  .fp-post-author-name { font-size: 13px; }
  .fp-post-meta { font-size: 11px; }
}

/* ── 6. NO EMPTY WHITE SPACE ON SIDES OF FEED ─────────────────── */
/* Remove excess padding/margin that causes empty space */
@media (min-width: 821px) {
  .fp-post-card {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ── 7. PROFILE SECTION TABS — organized layout ────────────────── */
.fp-profile-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--c-border, #e5e7eb);
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.fp-profile-tabs::-webkit-scrollbar { display: none; }
.fp-profile-tab {
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  color: var(--c-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.fp-profile-tab.active,
.fp-profile-tab:hover {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}
.fp-profile-section { display: none; }
.fp-profile-section.active { display: block; }

/* ── 8. STATUS SIDEBAR TOGGLE on status/show page ──────────────── */
/* Already handled in status/show.blade.php JS — CSS ensures smooth  */
#fs-player-root.sidebar-hidden .fs-sidebar {
  width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: none !important;
}
#fs-player-root.sidebar-hidden #fs-stage {
  border-radius: 16px !important;
}

/* ── 9. 9:16 VIDEO RESPONSIVE (status upload & post) ───────────── */
.fp-video-9x16 {
  aspect-ratio: 9/16;
  max-height: 560px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  display: block;
  background: #000;
}
@media (max-width: 600px) {
  .fp-video-9x16 { max-height: 420px; }
}

/* ── 10. POST CARD — no excess blank space between cards ────────── */
.fp-post-card {
  margin-bottom: 12px !important;
}
#posts-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── 11. COMPOSER VIDEO PREVIEW — proper display ────────────────── */
.fp-image-preview video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* ── PROFILE TABS CSS ───────────────────────────────────────────── */
.fp-profile-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--c-border, #e5e7eb);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 8px;
}
.fp-profile-tabs::-webkit-scrollbar { display: none; }
.fp-profile-tab {
  padding: 12px 18px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--c-text-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  flex-shrink: 0;
}
.fp-profile-tab.active,
.fp-profile-tab:hover {
  color: var(--c-primary, #3b82f6);
  border-bottom-color: var(--c-primary, #3b82f6);
}
.fp-profile-tab[x-bind\:class*="active"] {
  /* Alpine handles active class dynamically */
}

/* ═══════════════════════════════════════════════════════════
   FIXES v19 (round 4)
   ═══════════════════════════════════════════════════════════ */

/* Delete-comment confirm modal + edit-post modal are now teleported
   to <body> (same fix as the composer overlay), but bump z-index too
   as a belt-and-suspenders safeguard so nothing (sidebar widgets
   included) can ever render above them. */
.fp-confirm-overlay { z-index: 1200 !important; }
.fp-modal-overlay    { z-index: 1200 !important; }

/* FIX: "Discard post?" confirm popup was invisible when closing the
   composer. Both .fp-composer-overlay and .fp-confirm-overlay ended up
   at the SAME z-index (1200 !important, see "FIXES v17" above and the
   .fp-composer-overlay override further up this file). With equal
   z-index, paint order falls back to DOM order — and since the composer
   is teleported to <body> AFTER the confirm popup, it rendered on top
   and hid it. Confirm/modal overlays must always sit above the composer. */
.fp-confirm-overlay { z-index: 1300 !important; }
.fp-modal-overlay    { z-index: 1300 !important; }

/* Edit-post modal: title field + 1-hour-lock message */
.fp-composer-title-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-btn);
  font-size: 15px;
  font-weight: 700;
  background: var(--fp-surface);
  color: var(--fp-text);
}
.fp-composer-title-input:disabled {
  opacity: .6;
  cursor: not-allowed;
  background: var(--fp-bg);
}
.fp-title-locked-msg {
  font-size: 13px;
  color: var(--fp-danger, #e41e3f);
  background: rgba(228, 30, 63, .08);
  border: 1px solid rgba(228, 30, 63, .25);
  border-radius: var(--fp-radius-btn);
  padding: 8px 10px;
  margin: 0 0 10px;
}

/* Post-level reactions/comments/shares summary strip — likes as small
   overlapping emoji "bubbles" + counts, Facebook-style. */
.fp-post-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--fp-muted);
  border-bottom: 1px solid var(--fp-border);
}
.fp-post-stats-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fp-reaction-bubbles {
  display: flex;
  align-items: center;
}
.fp-reaction-bubbles span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--fp-surface);
  border: 1.5px solid var(--fp-surface);
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.12);
  font-size: 11px;
  margin-left: -6px;
  transition: transform .15s ease;
}
.fp-reaction-bubbles span:first-child { margin-left: 0; }
.fp-reaction-bubbles-wrap:hover .fp-reaction-bubbles span { transform: translateY(-1px); }
.fp-post-stats-right {
  display: flex;
  gap: 12px;
}
.fp-post-stats-right span { cursor: pointer; }
.fp-post-stats-right span:hover { text-decoration: underline; }

/* Content-responsibility checkbox in the composer.
   FIX: the text span had no min-width:0, which is the classic flex
   overflow bug — a flex item defaults to min-width:auto, so long text
   refuses to wrap and instead pushes past the row/modal edge (this is
   exactly what pushed the "Post" button out of view / off-screen).
   Also constrain the row itself to the composer's own width so it can
   never force the modal wider than its container on small screens. */
.fp-terms-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fp-muted);
  margin: 10px 0 4px;
  padding: 0 2px 2px;
  cursor: pointer;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.fp-terms-row input[type="checkbox"] {
  /* Reset ALL sides — the old rule only overrode margin-top, so the
     browser's default right/bottom/left margin on a checkbox (varies by
     browser, ~3-4px) was still adding extra, uneven space around it on
     top of the row's own `gap`. That's what made the tick mark look like
     it was sitting slightly outside/off from the text next to it. */
  margin: 2px 0 0 0;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--fp-primary, #1877f2);
}
.fp-terms-row span {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  white-space: normal;
}
.fp-terms-link {
  color: var(--fp-primary, #1877f2);
  font-weight: 600;
  text-decoration: underline;
}
.fp-terms-link:hover { text-decoration: none; }

/* Small screens: give the row a little extra breathing room so the
   checkbox never sits flush against the composer's rounded bottom
   edge (which is what made it look like it was "spilling outside"
   the card). */
@media (max-width: 480px) {
  .fp-terms-row {
    font-size: 11.5px;
    gap: 6px;
    padding: 0 2px 6px;
  }
}

/* Profile cover photo: fixed 3:1 ratio on every screen size, so an
   image uploaded at the recommended 1200x400px size is never cropped
   on any side (mobile or desktop) — was previously h-40 md:h-56 which
   gave mobile and desktop two different crop ratios. */
.fp-cover-media {
  width: 100%;
  aspect-ratio: 3 / 1;
  height: auto;
  max-height: 400px;
}

/* Facebook-style reaction picker (hover on desktop / long-press on
   mobile shows Like/Love/Haha/Wow/Sad/Angry as a small emoji strip
   above the Like button). */
.fp-reaction-wrap {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}
.fp-reaction-wrap .fp-action-btn { width: 100%; }
.fp-reaction-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 2px;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-full, 999px);
  padding: 6px 8px;
  box-shadow: var(--fp-shadow-menu), 0 0 0 1px rgba(0,0,0,.04);
  z-index: 50;
}
/* Invisible hover bridge: fills the 8px gap between the Like button and
   the picker above it, so moving the mouse from the button up into the
   picker never crosses "dead" space that isn't part of either element —
   without this, mouseleave fires on .fp-reaction-wrap while crossing the
   gap and the picker disappears before the emoji can be clicked. */
.fp-reaction-picker::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
}
.fp-reaction-picker-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 4px;
  border-radius: 50%;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), background .15s;
}
.fp-reaction-picker-btn:hover { transform: scale(1.4) translateY(-4px); background: var(--fp-bg); }

/* ══════════════════════════════════════════════════════
   FIX: Formatting toolbar in post composer
   ══════════════════════════════════════════════════════ */
.fp-fmt-toolbar {
  display: flex;
  gap: 4px;
  padding: 6px 0 6px;
  border-bottom: 1px solid var(--fp-border, #e5e7eb);
  margin-bottom: 6px;
}
.fp-fmt-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--fp-border, #e5e7eb);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fp-text);
  transition: background .15s, border-color .15s;
}
.fp-fmt-btn:hover { background: var(--fp-bg); }
.fp-fmt-btn--active {
  background: var(--c-primary, #2563eb) !important;
  color: #fff !important;
  border-color: var(--c-primary, #2563eb) !important;
}

/* ══════════════════════════════════════════════════════
   CREATE POST — Friendse Clay Studio refresh
   Visual-only overrides scoped to the post composer. All existing
   Alpine actions, fields, validation and upload behavior stay intact.
   ══════════════════════════════════════════════════════ */
.fp-create-post-composer {
  --fp-clay-brand: var(--c-primary, #2f6bff);
  --fp-clay-brand-soft: color-mix(in srgb, var(--fp-clay-brand) 11%, var(--fp-surface));
  --fp-clay-green: #22a45d;
  --fp-clay-green-soft: color-mix(in srgb, var(--fp-clay-green) 11%, var(--fp-surface));
  --fp-clay-yellow: #f2ae12;
  --fp-clay-yellow-soft: color-mix(in srgb, var(--fp-clay-yellow) 12%, var(--fp-surface));
  --fp-clay-red: #ef5048;
  --fp-clay-red-soft: color-mix(in srgb, var(--fp-clay-red) 11%, var(--fp-surface));
  width: min(100%, 520px);
  max-width: 520px;
  max-height: min(92dvh, 860px);
  border: 1px solid color-mix(in srgb, var(--fp-primary) 8%, var(--fp-border));
  border-radius: 28px;
  background: var(--fp-surface);
  box-shadow: 0 30px 70px -24px color-mix(in srgb, var(--fp-text) 34%, transparent);
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  animation: fpClayIn 420ms cubic-bezier(.34,.85,.3,1) both;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--fp-primary) 25%, transparent) transparent;
}
@keyframes fpClayIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.fp-create-post-composer .fp-composer-header {
  padding: 18px 22px 14px;
  border-bottom-color: color-mix(in srgb, var(--fp-border) 72%, transparent);
  border-radius: 28px 28px 0 0;
}
.fp-create-post-composer .fp-composer-title {
  font-family: 'Outfit', 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 20px;
  letter-spacing: 0;
  color: var(--fp-text);
}
.fp-create-post-composer .fp-composer-close {
  width: 38px;
  height: 38px;
  background: var(--fp-clay-red-soft);
  color: var(--fp-clay-red);
  transition: transform var(--fp-transition), background var(--fp-transition);
}
.fp-create-post-composer .fp-composer-close:hover { background: color-mix(in srgb, var(--fp-clay-red) 18%, var(--fp-surface)); transform: scale(1.04); }
.fp-create-post-composer .fp-composer-user { padding: 14px 22px 10px; gap: 11px; }
.fp-create-post-composer .fp-avatar--md { width: 44px; height: 44px; box-shadow: 0 0 0 3px var(--fp-clay-brand-soft); }
.fp-create-post-composer .fp-composer-username { font-family: 'Outfit', 'Figtree', sans-serif; font-size: 15px; }
.fp-create-post-composer .fp-privacy-selector {
  margin-top: 5px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--fp-clay-brand-soft);
  color: var(--fp-clay-brand);
}
.fp-create-post-composer .fp-composer-body { padding: 0 22px; }
.fp-create-post-composer .fp-fmt-toolbar { gap: 6px; padding: 8px 0; border-bottom: 0; margin-bottom: 4px; }
.fp-create-post-composer .fp-fmt-toolbar::before {
  content: 'FORMAT';
  align-self: center;
  margin-right: 2px;
  color: var(--fp-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}
.fp-create-post-composer .fp-fmt-btn {
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  background: var(--fp-bg);
}
.fp-create-post-composer .fp-fmt-btn:hover { border-color: color-mix(in srgb, var(--fp-primary) 35%, var(--fp-border)); color: var(--fp-primary); }
.fp-create-post-composer .fp-fmt-btn--active { border-color: var(--fp-clay-brand) !important; background: var(--fp-clay-brand) !important; }
.fp-create-post-composer .fp-composer-textarea {
  min-height: 92px;
  padding: 9px 2px 7px;
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
.fp-create-post-composer .fp-composer-textarea--compact { min-height: 68px; }
.fp-create-post-composer .fp-upload-preview-scroll { margin: 10px 22px 12px; border-radius: 20px; }
.fp-create-post-composer .fp-upload-preview-item {
  border-radius: 20px;
  background: var(--fp-bg);
  border: 1px solid var(--fp-border);
  animation: fpClayImageIn 460ms cubic-bezier(.34,.85,.3,1) both;
}
@keyframes fpClayImageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fp-create-post-composer .fp-upload-preview-media { background: var(--fp-bg); }
.fp-create-post-composer .fp-image-remove {
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  background: color-mix(in srgb, var(--fp-surface) 92%, transparent);
  color: var(--fp-text);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--fp-text) 18%, transparent);
}
.fp-create-post-composer .fp-upload-preview-index { left: 10px; bottom: 10px; padding: 4px 9px; }
.fp-create-post-composer .fp-add-to-post {
  margin: 10px 22px;
  padding: 10px 12px;
  border-color: var(--fp-border);
  border-radius: 18px;
  background: var(--fp-bg);
}
.fp-create-post-composer .fp-add-label { font-family: 'Outfit', 'Figtree', sans-serif; font-size: 13px; }
.fp-create-post-composer .fp-add-actions { gap: 3px; }
.fp-create-post-composer .fp-add-btn { width: 38px; height: 38px; background: var(--fp-surface); border: 1px solid var(--fp-border); }
.fp-create-post-composer .fp-add-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 12px -7px color-mix(in srgb, var(--fp-text) 45%, transparent); }
.fp-create-post-composer .fp-add-btn--photo { color: var(--fp-clay-green); }
.fp-create-post-composer .fp-add-btn--tag { color: var(--fp-clay-brand); }
.fp-create-post-composer .fp-add-btn--feeling { color: var(--fp-clay-yellow); }
.fp-create-post-composer .fp-add-btn--location { color: var(--fp-clay-red); }
.fp-create-post-composer .fp-feeling-picker,
.fp-create-post-composer .fp-location-row { margin-left: 22px; margin-right: 22px; border-radius: 16px; border: 1px solid var(--fp-border); }
.fp-create-post-composer .fp-terms-row {
  margin: 11px 22px 5px;
  width: calc(100% - 44px);
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--fp-clay-green) 16%, var(--fp-border));
  border-radius: 16px;
  background: var(--fp-clay-green-soft);
  color: var(--fp-text);
}
.fp-create-post-composer .fp-terms-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--fp-clay-green); }
.fp-create-post-composer .fp-review-notice {
  margin: 7px 22px 0;
  padding: 10px 12px;
  border-color: color-mix(in srgb, var(--fp-clay-yellow) 18%, var(--fp-border));
  border-radius: 16px;
  background: var(--fp-clay-yellow-soft);
  color: var(--fp-muted);
}
.fp-create-post-composer .fp-submit-btn {
  width: calc(100% - 44px);
  margin: 13px 22px 20px;
  padding: 13px 16px;
  border-radius: 999px;
  font-family: 'Outfit', 'Figtree', sans-serif;
  font-size: 15px;
  letter-spacing: 0;
}
.fp-create-post-composer .fp-submit-btn--active {
  background: var(--fp-clay-brand);
  box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--fp-clay-brand) 70%, transparent);
}
.fp-create-post-composer .fp-submit-btn--disabled { background: var(--fp-bg); color: var(--fp-muted); border: 1px solid var(--fp-border); }
@media (max-width: 600px) {
  .fp-create-post-composer { max-height: 94dvh; border-radius: 24px 24px 0 0; }
  .fp-create-post-composer .fp-composer-header { border-radius: 24px 24px 0 0; padding: 15px 16px 12px; }
  .fp-create-post-composer .fp-composer-user { padding-left: 16px; padding-right: 16px; }
  .fp-create-post-composer .fp-composer-body { padding: 0 16px; }
  .fp-create-post-composer .fp-upload-preview-scroll,
  .fp-create-post-composer .fp-add-to-post,
  .fp-create-post-composer .fp-feeling-picker,
  .fp-create-post-composer .fp-location-row { margin-left: 16px; margin-right: 16px; }
  .fp-create-post-composer .fp-add-to-post { flex-direction: row; align-items: center; gap: 8px; }
  .fp-create-post-composer .fp-add-actions { overflow-x: auto; justify-content: flex-start; }
  .fp-create-post-composer .fp-terms-row,
  .fp-create-post-composer .fp-submit-btn { width: calc(100% - 32px); margin-left: 16px; margin-right: 16px; }
  .fp-create-post-composer .fp-review-notice { margin-left: 16px; margin-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-create-post-composer,
  .fp-create-post-composer .fp-upload-preview-item { animation: none; }
}

/* ══════════════════════════════════════════════════════
   FIX: Post title ALWAYS left — all posts (old + new)
   ══════════════════════════════════════════════════════ */
.fp-post-title,
.fp-post-card .fp-post-title,
#posts-list .fp-post-title,
.friende-card .fp-post-title {
  text-align: left !important;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════
   FIX: Stories — mobile scroll, video thumbnails
   ══════════════════════════════════════════════════════ */
.friende-story-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  /* Trailing space so the last card gets breathing room instead of
     sitting flush against the row's edge — that flush edge is what
     reads as "cut off" rather than "scroll for more". */
  padding-right: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scroll-behavior: smooth;
}
.friende-story-row::-webkit-scrollbar { height: 3px; }
.friende-story-row::-webkit-scrollbar-thumb { background: var(--fp-border); border-radius: 2px; }
.friende-story {
  min-width: 100px;
  height: 170px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  padding: 8px;
  text-decoration: none;
  color: #fff;
  scroll-snap-align: start;
  overflow: hidden;
  position: relative;
}

/* FIX: on phones the stories were sized for desktop (100×170) and simply
   didn't fit the screen width, so the last card always got sliced by the
   viewport edge instead of settling into a full, clean "peek" like FB's
   app. Sizing down on small screens lets more cards fit and keeps the
   scrollable overflow feeling intentional (FB-style) rather than broken. */
@media (max-width: 520px) {
  .friende-story-row { gap: 6px; padding-right: 8px; }
  .friende-story { min-width: 78px; height: 122px; border-radius: 10px; }
}
@media (max-width: 380px) {
  .friende-story { min-width: 70px; height: 112px; }
}

/* Soft right-edge fade on the story tray's parent card — a subtle,
   Facebook-style visual cue that there is more to scroll to, instead of
   a hard, ambiguous crop at the container boundary. Only shown while the
   row can actually still scroll further right. */
.friende-story-row-wrap { position: relative; }
.friende-story-row-wrap::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 4px;
  width: 28px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--fp-surface, var(--c-surface, #fff)) 92%);
  border-radius: 0 12px 12px 0;
  opacity: 0;
  transition: opacity .2s ease;
}
.friende-story-row-wrap.is-scrollable::after { opacity: 1; }

/* ══════════════════════════════════════════════════════
   FIX: Sidebar sticky + responsive (no cut-off mobile)
   ══════════════════════════════════════════════════════ */
.friende-sidebar {
  overflow-y: auto;
  max-height: calc(100vh - 84px);
  scrollbar-width: thin;
}
@media (max-width: 768px) {
  .friende-sidebar { display: none; }
}

/* ══════════════════════════════════════════════════════
   FIX: Advanced search dropdown
   ══════════════════════════════════════════════════════ */
.friende-search {
  min-width: 200px;
  max-width: 360px;
}
@media (max-width: 640px) {
  .friende-search { min-width: 140px; max-width: 200px; }
}

/* ══════════════════════════════════════════════════════
   FEATURE: Double-tap-to-like heart burst (reel video)
   ══════════════════════════════════════════════════════ */
.fp-heart-enter { transition: transform .45s cubic-bezier(.17,.89,.32,1.49), opacity .6s ease; }
.fp-heart-enter-start { transform: scale(0.3); opacity: 0; }
.fp-heart-enter-end { transform: scale(1); opacity: 1; }

/* ══════════════════════════════════════════════════════
   FEATURE: Reel bottom-overlay audio-track marquee
   ══════════════════════════════════════════════════════ */
@keyframes fpAudioMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════
   FORCE-OVERRIDE: modern Like/Comment/Share bar
   High-specificity + !important so this always wins,
   regardless of load order or any leftover inline style.
   ══════════════════════════════════════════════════════ */
article .fp-post-stats {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  margin: 0 12px !important;
  border-bottom: 1px solid var(--fp-border) !important;
  border-top: none !important;
}
article .fp-reaction-bubbles-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px 4px 6px !important;
  background: var(--fp-bg) !important;
  border-radius: 999px !important;
  transition: background .18s ease !important;
}
article .fp-reaction-bubbles-wrap:hover { background: color-mix(in srgb, var(--fp-primary) 8%, var(--fp-bg)) !important; }
article .fp-reaction-bubbles span {
  width: 19px !important;
  height: 19px !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.12) !important;
  margin-left: -6px !important;
}
article .fp-reaction-bubbles span:first-child { margin-left: 0 !important; }
article .fp-post-actions {
  display: flex !important;
  align-items: stretch !important;
  padding: 4px !important;
  margin: 8px 12px !important;
  gap: 4px !important;
  background: var(--fp-bg) !important;
  border-radius: 14px !important;
  border-top: none !important;
}
article .fp-post-actions > * { flex: 1 1 0 !important; min-width: 0 !important; }
article .fp-post-actions .fp-action-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 38px !important;
  line-height: 1 !important;
  padding: 9px 4px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: none !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background .18s ease, color .18s ease, transform .12s ease !important;
}
article .fp-post-actions .fp-action-btn:hover {
  background: var(--fp-surface) !important;
  color: var(--fp-text) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.10) !important;
  transform: translateY(-1px) !important;
}
article .fp-post-actions .fp-action-btn--liked {
  color: var(--fp-like) !important;
  background: color-mix(in srgb, var(--fp-like) 10%, var(--fp-surface)) !important;
}
article .fp-post-actions .fp-action-icon {
  font-size: 17px !important;
  line-height: 1 !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
@media (max-width: 600px) {
  article .fp-post-actions .fp-action-btn { gap: 0 !important; padding: 9px 0 !important; }
}

/* ── Modern Follow button (post card header + reel overlay) ──
   Facebook-style pill: solid blue "Follow" with a plus icon,
   flips to a subtle outlined "Following" with a check icon,
   and turns red on hover to invite an unfollow — all driven by
   the existing Alpine `following` state, no logic changes. */
 .fp-follow-btn {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   gap: 5px !important;
   flex-shrink: 0 !important;
   padding: 5px 12px !important;
   border-radius: 8px !important;
   font-size: 12.5px !important;
   font-weight: 600 !important;
   line-height: 1 !important;
   cursor: pointer !important;
   border: 1.5px solid transparent !important;
   transition: background .18s ease, color .18s ease, border-color .18s ease,
               box-shadow .18s ease, transform .12s ease !important;
   -webkit-tap-highlight-color: transparent;
   min-height: 30px; box-shadow: none !important;
 }
.fp-follow-btn__icon { flex-shrink: 0; transition: transform .18s ease; }

/* Mobile: keep the Follow button a normal, consistent size next to the
   author name — never wraps, never shrinks to a sliver. */
@media (max-width: 640px) {
  .fp-follow-btn {
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
    min-height: 30px;
    box-shadow: none !important;
  }
  .fp-follow-btn:hover:not(:disabled) { transform: none !important; box-shadow: none !important; }
  .fp-follow-btn__icon { width: 11px; height: 11px; }
}
.fp-follow-btn:active:not(:disabled) { transform: scale(.95) !important; }
.fp-follow-btn:disabled { opacity: .6 !important; cursor: default !important; transform: none !important; }

 .fp-follow-btn--follow {
   background: #1877f2 !important;
   border-color: #1877f2 !important;
   color: #fff !important;
   box-shadow: none !important;
 }
 .fp-follow-btn--follow:hover:not(:disabled) {
   background: #1568d1 !important;
   box-shadow: none !important;
   transform: none !important;
 }

.fp-follow-btn--following {
  background: var(--fp-surface) !important;
  border-color: var(--fp-border) !important;
  color: var(--fp-text) !important;
}
.fp-follow-btn--following:hover:not(:disabled) {
  background: rgba(237,59,59,.09) !important;
  border-color: rgba(237,59,59,.45) !important;
  color: #ed3b3b !important;
}

/* Reel/story overlay variant: compact, sits on video, translucent glass look */
.fp-follow-btn--reel {
  padding: 3px 11px !important;
  font-size: 11px !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.fp-follow-btn--reel.fp-follow-btn--follow {
  background: linear-gradient(180deg,#3b90ff,#1877f2) !important;
  border-color: #1877f2 !important;
  box-shadow: 0 1px 5px rgba(0,0,0,.35) !important;
}
.fp-follow-btn--reel.fp-follow-btn--following {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.65) !important;
  color: #fff !important;
}
.fp-follow-btn--reel.fp-follow-btn--following:hover:not(:disabled) {
  background: rgba(237,59,59,.4) !important;
  border-color: rgba(237,59,59,.8) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════
   FIX v18 — Create Post modal must look NORMAL on both
   desktop and mobile. It must NOT fill the whole screen
   on phones / narrow windows: keep it a centered card
   with even gaps on the left, right, top and bottom.
   (Screenshot fix: modal was glued to the screen edges.)
   ══════════════════════════════════════════════════════ */
.fp-composer-overlay {
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.fp-composer,
.fp-create-post-composer {
  margin: auto;
  border-radius: 22px;
  width: 100%;
  max-width: 520px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
}
.fp-create-post-composer .fp-composer-header {
  border-radius: 22px 22px 0 0;
}

@media (max-width: 600px) {
  .fp-composer-overlay {
    align-items: center;
    padding: 18px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .fp-composer,
  .fp-create-post-composer {
    border-radius: 20px;
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 36px - env(safe-area-inset-bottom, 0px));
  }
  .fp-create-post-composer .fp-composer-header {
    border-radius: 20px 20px 0 0;
  }
}

@media (max-width: 380px) {
  .fp-composer-overlay { padding: 12px 10px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .fp-composer,
  .fp-create-post-composer { max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px)); }
}

/* Sticky header/footer stay inside the rounded card */
.fp-create-post-composer .fp-composer-header { position: sticky; top: 0; z-index: 3; background: var(--fp-surface); }


/* ═══════════════════════════════════════════════════════════
   POLL — replaces the removed Live Broadcasting placeholder
   ═══════════════════════════════════════════════════════════ */

/* --- Composer: poll builder --- */
.fp-add-btn--poll { color: #8a5cf6; }
.fp-add-btn--poll.fp-add-btn--active {
  background: color-mix(in srgb, #8a5cf6 12%, transparent);
}
.fp-poll-builder {
  margin: 10px 0 4px;
  padding: 12px;
  border: 1px solid var(--fp-border);
  border-radius: 12px;
  background: var(--fp-bg);
}
.fp-poll-builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.fp-poll-builder-title {
  font-size: var(--fp-font-md);
  font-weight: 700;
  color: var(--fp-text);
}
.fp-poll-builder-remove {
  border: none;
  background: transparent;
  color: var(--fp-muted);
  font-size: var(--fp-font-sm);
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--fp-radius-btn);
  transition: background var(--fp-transition), color var(--fp-transition);
}
.fp-poll-builder-remove:hover { background: var(--fp-surface); color: var(--fp-like); }
.fp-poll-input {
  width: 100%;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  background: var(--fp-surface);
  padding: 10px 12px;
  font-size: var(--fp-font-md);
  color: var(--fp-text);
  outline: none;
  transition: border-color var(--fp-transition), box-shadow var(--fp-transition);
}
.fp-poll-input:focus {
  border-color: #8a5cf6;
  box-shadow: 0 0 0 3px color-mix(in srgb, #8a5cf6 18%, transparent);
}
.fp-poll-input--question { font-weight: 600; margin-bottom: 10px; }
.fp-poll-builder .fp-poll-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.fp-poll-option-num {
  flex: 0 0 22px;
  height: 22px;
  border-radius: var(--fp-radius-full);
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--fp-muted);
}
.fp-poll-option-del {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--fp-muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 6px;
  border-radius: var(--fp-radius-full);
  transition: background var(--fp-transition), color var(--fp-transition);
}
.fp-poll-option-del:hover { background: var(--fp-surface); color: var(--fp-like); }
.fp-poll-add-option {
  border: 1px dashed var(--fp-border);
  background: transparent;
  color: #8a5cf6;
  font-size: var(--fp-font-sm);
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  transition: background var(--fp-transition), border-color var(--fp-transition);
}
.fp-poll-add-option:hover {
  background: color-mix(in srgb, #8a5cf6 8%, transparent);
  border-color: #8a5cf6;
}
.fp-poll-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--fp-border);
}
.fp-poll-setting {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fp-font-sm);
  color: var(--fp-muted);
  font-weight: 600;
  cursor: pointer;
}
.fp-poll-setting input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #8a5cf6;
  cursor: pointer;
}
.fp-poll-select {
  border: 1px solid var(--fp-border);
  border-radius: 8px;
  background: var(--fp-surface);
  color: var(--fp-text);
  font-size: var(--fp-font-sm);
  font-weight: 600;
  padding: 6px 8px;
  cursor: pointer;
  outline: none;
}

/* --- Post card: poll display --- */
.fp-poll {
  margin: 10px 0 2px;
  padding: 12px;
  border: 1px solid var(--fp-border);
  border-radius: 12px;
  background: var(--fp-bg);
}
.fp-poll-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.fp-poll-badge {
  font-size: 11px;
  font-weight: 700;
  color: #8a5cf6;
  background: color-mix(in srgb, #8a5cf6 12%, transparent);
  padding: 3px 8px;
  border-radius: var(--fp-radius-full);
}
.fp-poll-meta { font-size: 12px; color: var(--fp-muted); font-weight: 600; }
.fp-poll-question {
  margin: 0 0 10px;
  font-size: var(--fp-font-lg);
  font-weight: 700;
  color: var(--fp-text);
  line-height: 1.35;
}
.fp-poll-options { display: flex; flex-direction: column; gap: 8px; }
.fp-poll .fp-poll-option {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  background: var(--fp-surface);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color var(--fp-transition), transform var(--fp-transition);
}
.fp-poll .fp-poll-option:hover { border-color: #8a5cf6; }
.fp-poll .fp-poll-option:active { transform: scale(.995); }
.fp-poll-option--mine { border-color: #8a5cf6; }
.fp-poll-option--locked { cursor: default; }
.fp-poll-option--locked:hover { border-color: var(--fp-border); }
.fp-poll-option--mine.fp-poll-option--locked:hover { border-color: #8a5cf6; }
.fp-poll-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: color-mix(in srgb, #8a5cf6 14%, transparent);
  transition: width 420ms cubic-bezier(.4,0,.2,1);
}
.fp-poll-option--mine .fp-poll-bar { background: color-mix(in srgb, #8a5cf6 24%, transparent); }
.fp-poll-option-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fp-poll-option-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fp-font-md);
  font-weight: 600;
  color: var(--fp-text);
  word-break: break-word;
}
.fp-poll-check { color: #8a5cf6; font-weight: 800; }
.fp-poll-option-pct {
  flex: 0 0 auto;
  font-size: var(--fp-font-sm);
  font-weight: 700;
  color: var(--fp-muted);
}
.fp-poll-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.fp-poll-hint { font-size: 12px; color: var(--fp-muted); }
.fp-poll-close-btn {
  border: 1px solid var(--fp-border);
  background: var(--fp-surface);
  color: var(--fp-muted);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: var(--fp-radius-btn);
  cursor: pointer;
  transition: background var(--fp-transition), color var(--fp-transition);
}
.fp-poll-close-btn:hover { background: var(--fp-bg); color: var(--fp-text); }
.fp-poll-error {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--fp-like);
}

@media (max-width: 480px) {
  .fp-poll, .fp-poll-builder { padding: 10px; }
  .fp-poll-question { font-size: var(--fp-font-md); }
  .fp-poll-settings { gap: 10px; }
}

/* FIX 1 — Multilingual post text spacing/alignment.
   The legacy feed rules force text-align:left with !important, which makes
   Urdu/Nastaleeq leave an awkward empty side of the card. Use the resolved
   direction instead and keep a consistent card gutter. */
.fp-post-card .fp-post-body[dir="auto"],
#posts-list .fp-post-body[dir="auto"],
.friende-card .fp-post-body[dir="auto"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
  text-align: start !important;
  overflow-wrap: anywhere;
}
.fp-post-card .fp-post-body[dir="auto"]:dir(rtl),
#posts-list .fp-post-body[dir="auto"]:dir(rtl),
.friende-card .fp-post-body[dir="auto"]:dir(rtl) {
  direction: rtl !important;
  text-align: right !important;
}
.fp-post-card .fp-post-text[dir="auto"],
#posts-list .fp-post-text[dir="auto"],
.friende-card .fp-post-text[dir="auto"] {
  display: inline;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  text-align: start !important;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: pre-wrap;
}
.fp-post-card .fp-post-text[dir="auto"]:dir(rtl),
#posts-list .fp-post-text[dir="auto"]:dir(rtl),
.friende-card .fp-post-text[dir="auto"]:dir(rtl) {
  direction: rtl !important;
  text-align: right !important;
  line-height: 1.85 !important;
  letter-spacing: 0 !important;
}
.fp-post-card .fp-see-more {
  margin-inline-start: 4px !important;
  white-space: nowrap;
}

/* FIX 5 — Keep the content-policy acknowledgement visible
   (selectors use .fp-composer — the class the modal really has) while long Urdu/
   multilingual text is entered. The auto-grow script may otherwise make the
   textarea taller than the modal viewport and push the acknowledgement below
   the fold. The text box scrolls internally after a comfortable reading height. */
.fp-composer .fp-composer-textarea {
  max-height: 260px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.fp-composer .fp-terms-row,
.fp-composer .fp-review-notice,
.fp-composer .fp-submit-btn {
  flex-shrink: 0 !important;
}
.fp-composer .fp-review-notice {
  max-height: 112px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.fp-composer .fp-terms-row {
  position: relative;
  z-index: 4;
}
@media (max-width: 600px) {
  .fp-composer .fp-composer-textarea {
    max-height: 210px !important;
  }
  .fp-composer .fp-review-notice {
    max-height: 100px;
  }
}