/* Posts specific styles */

/* Post sheet with context menu */
.post-sheet {
  position: relative;
}

/* Context menu positioned in top-right */
.post-context-menu {
  position: absolute;
  top: var(--size-3);
  right: var(--size-3);
  z-index: 10;
}

/* Broadcast notice at top of post */
.broadcast-notice {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
  border-radius: var(--radius-medium);
  padding: var(--size-3) var(--size-4);
  margin-bottom: var(--size-4);
  color: var(--on-primary);
  font-size: var(--font-size-body-medium);
  text-align: center;
  box-shadow: var(--elevation-1);
}

/* Pinned notice at top of post */
.pinned-notice {
  background: var(--tertiary-container);
  border-radius: var(--radius-medium);
  padding: var(--size-3) var(--size-4);
  margin-bottom: var(--size-4);
  color: var(--on-tertiary-container);
  font-size: var(--font-size-body-medium);
  text-align: center;
  box-shadow: var(--elevation-1);
}

.pinned-notice .flex {
  color: var(--on-tertiary-container);
  font-weight: var(--font-weight-medium);
}

.pinned-notice svg {
  color: var(--on-tertiary-container);
  transform: rotate(45deg);
}

.broadcast-notice .flex {
  color: var(--on-primary);
  font-weight: var(--font-weight-medium);
}

.broadcast-notice svg {
  color: var(--on-primary);
}

/* Context menu styles for posts */
.context-menu-option.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.context-menu-option.disabled:hover {
  background: transparent;
}

/* Pinned Posts */
.pinned-post {
  border-color: var(--primary);
  border-width: 2px;
  position: relative;
}

.pinned-indicator {
  display: flex;
  align-items: center;
  gap: var(--size-1);
  color: var(--primary);
  font-size: var(--font-size-body-small);
  font-weight: 600;
  margin-bottom: var(--size-2);
}

.pinned-indicator svg {
  transform: rotate(45deg);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .post-context-menu {
    top: var(--size-2);
    right: var(--size-2);
  }
  
  .broadcast-notice {
    margin-bottom: var(--size-3);
    padding: var(--size-2) var(--size-3);
    font-size: var(--font-size-body-small);
  }
  
  .broadcast-notice svg {
    width: 16px;
    height: 16px;
  }
}