/* =========================================================================
   Patient view — session timeline, before/after carousels
   ========================================================================= */

.patient-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.thumbnail-container {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
}

.thumbnail-image {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s ease, border-color 0.15s ease;
  background: var(--canvas);
}
.thumbnail-image:hover { transform: scale(1.06); border-color: var(--brand-500); }
.thumbnail-image.before { box-shadow: inset 0 0 0 1px var(--line); }
.thumbnail-image.after { box-shadow: inset 0 0 0 1px var(--brand-300); }

.carousel-section {
  margin: 2.5rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.carousel-section h4 { font-size: 1.15rem; }

.session-carousel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  margin-bottom: 1.4rem;
  box-shadow: var(--shadow-sm);
}

.session-header {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink-700);
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.session-carousel .carousel-inner { border-radius: var(--radius-md); overflow: hidden; background: var(--canvas); }
.session-carousel .carousel-inner,
.session-carousel img { height: 420px; }
.session-carousel img { object-fit: contain; width: 100%; }

.carousel-controls {
  margin-top: 0.85rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.modal-enlarge img { max-height: 82vh; width: auto; margin: 0 auto; display: block; border-radius: var(--radius-sm); }

.image-error::after {
  content: "Image unavailable";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  color: var(--danger);
  background: var(--danger-bg);
  font-size: 0.8rem;
}

@media (max-width: 600px) {
  .session-carousel .carousel-inner,
  .session-carousel img { height: 280px; }
}