/* =====================================================================
   Responsive Breakpoints & Device Ergonomics
   phone   : < 600px
   tablet  : 600px – 1023px
   desktop : >= 1024px
   compact : phone, or a short landscape touch screen
   ===================================================================== */

feed-compose-fab {
  display: none;
}

/* =====================================================================
   Compact: Phones in Portrait & Landscape
   ===================================================================== */

@media (max-width: 599px),
       (max-height: 500px) and (pointer: coarse) {

  feed-panel[data-view="timeline"] composer-section {
    display: none;
  }

  /* Floating Action Button (FAB) */
  feed-compose-fab {
    display: grid;
    place-items: center;
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    border-radius: 16px;                        /* Modern rounded squircloid FAB */
    background: var(--accent, #4f46e5);
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35);
    border: none;
    cursor: pointer;
    z-index: 20;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  feed-compose-fab:active {
    transform: scale(0.95);
  }

  feed-section {
    padding-inline: 0;
  }

  composer-section.collapsed .action-bar,
  composer-section.collapsed file-preview-gallery,
  composer-section.collapsed emoji-picker-container,
  composer-section.collapsed reply-comment-notification {
    display: none;
  }
}

/* =====================================================================
   Tablet & Desktop: Centered Feed Column
   ===================================================================== */

@media (min-width: 600px) {
  feed-section {
    max-width: 600px;
    margin-inline: auto;
  }
}

/* =====================================================================
   Ergonomics: Touch vs. Pointer
   ===================================================================== */

/* Touch screens: thumb-friendly minimum tap targets */
@media (pointer: coarse) {
  .post-actions button {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Mouse pointer: fine hover interactions */
@media (hover: hover) and (pointer: fine) {
  .post-actions button {
    border-radius: 8px;
    transition: background-color 0.12s ease;
  }

  .post-actions button:hover {
    background: var(--surface-hover, rgba(22, 24, 27, 0.04));
  }
}