/* Image Board Styles */
.image-board-container {
  position: absolute;
  bottom: 33%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 500px;
  background-color: rgba(255, 255, 255, 0.95); /* Match other boards */
  border-radius: 12px 12px 0 0;
  padding: 0; /* Padding will be on title/content areas */
  z-index: 100;
  border: 2px solid rgba(173, 216, 230, 0.5); /* Light blue border */
  border-bottom: none; /* Consistent with infoboard */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Consistent shadow */
  color: #333; /* Default dark grey text */
  margin-bottom: 0;
  display: none;
}

.image-board-title {
  padding: 12px 15px;
  background-color: rgba(173, 216, 230, 0.3); /* Light blue background */
  border-bottom: 2px solid rgba(40, 197, 250, 0.7); /* Darker blue border */
  color: #222; /* Darker text for title */
  text-align: center;
  margin-bottom: 10px; /* Spacing before items */
  font-size: 1.3rem; /* Consistent font size */
  font-weight: 700; /* Consistent font weight */
  letter-spacing: normal; /* Reset letter spacing */
  text-transform: none; /* Reset text transform */
}

.image-board-items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 0 15px 15px; /* Padding for items */
  max-height: calc(70vh - 120px); /* Adjust based on title height and desired overall height */
  overflow-y: auto;
}

.image-board-item {
  background: rgba(255, 255, 255, 0.8); /* Light background for items */
  border-radius: 8px; /* Slightly larger radius */
  padding: 10px; /* Increased padding */
  border: 1px solid rgba(173, 216, 230, 0.4); /* Light blue border */
  transition: all 0.2s ease;
  cursor: pointer;
  width: 160px;
  height: 190px; /* Adjusted height for new padding */
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow for items */
}

.image-board-item:hover {
  border-color: rgba(40, 197, 250, 0.7); /* Darker blue border on hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.image-board-item img {
  width: 100%; /* Make image responsive within padding */
  height: 120px;
  object-fit: cover;
  border-radius: 6px; /* Consistent radius */
  margin-bottom: 8px;
}

/* Keep QR codes square and readable */
.image-board-item img[src^="data:image/png;base64"] {
  object-fit: contain;
}

.image-board-caption {
  color: #555; /* Dark grey for caption */
  font-size: 0.9em;
  text-align: center;
  margin-top: auto;
  width: 100%; /* Use full width within padding */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}