/* =====================================
   Layout container
===================================== */
.container {
  display: flex;
  gap: 25px;
}

/* =====================================
   Sidebar feed box (300x740)
===================================== */
.sidebar-feed {
  width: 300px;
  height: 740px;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  position: sticky;
  top: 20px;
  box-sizing: border-box;
}

/* Header */
.sidebar-feed h3 {
  margin: 0;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background: #c51c2b;
  color: #fff;
  font-size: 16px;
  border-bottom: 1px solid #ddd;
}

/* =====================================
   Feed scroll area
===================================== */
#feed {
  width: 100%;
  height: calc(740px - 44px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* Scrollbar */
/* #feed::-webkit-scrollbar {
  width: 6px;
} */

#feed::-webkit-scrollbar-thumb {
  background: #cfcfcf;
  border-radius: 4px;
}

#feed::-webkit-scrollbar-thumb:hover {
  background: #b5b5b5;
}


/* =====================================
   iframe scaling (shrinks font)
   400px * 0.75 = 300px
===================================== */
.bluesky-embed iframe {

  width: 300px !important;
  max-width: none !important;

  transform: scale(0.93);
  transform-origin: top left;

  border: none !important;
  display: block;
}

.bluesky-embed {
    width: 100%;
    overflow: hidden;
    clip-path: inset(0 10px 0 0); /* removes right overflow */
}

/* Ensure media never overflows */
.bluesky-embed img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}




/* =====================================
   Loading / error states
===================================== */
.post-loading {
  text-align: center;
  color: #666;
  padding: 20px;
  font-style: italic;
}

.error {
  color: #d32f2f;
  text-align: center;
  padding: 10px;
  border: 1px solid #ffcdd2;
  border-radius: 6px;
  background: #ffebee;
  margin: 6px;
}

/* =====================================
   Mobile layout
===================================== */
@media (max-width: 900px) {

  .container {
    flex-direction: column;
  }

  .sidebar-feed {
    width: 100%;
    height: 500px;
    position: static;
  }

  #feed {
    height: calc(500px - 44px);
  }

}