/* ==================================================
   Root Variables & Global Styles
================================================== */
:root {
  --primary-color: #0a3c0e;
  --secondary-color: #134a1a;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --bg-blur: rgba(255, 255, 255, 0.989);
  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --navigation-width: 260px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ==================================================
   Order ID Badge (Top Right of the Card)
================================================== */
.my-timeline-order-id-top {
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--primary-color);
  padding: 4px 8px;
  border: 1px solid var(--primary-color);
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: normal;
  z-index: 10;
}

/* ==================================================
   Base Timeline Container & Date Header
================================================== */
.my-timeline-container {
  width: 100%;
  margin: 0 auto;
  padding: 2rem calc(var(--navigation-width) + 3rem) 2rem 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 2rem;
  position: relative;
}

.my-timeline-date-header {
  grid-column: 1 / -1;
  padding: 1rem 2rem;
  margin: 1rem 0;
  background: linear-gradient(95deg, #f8fafc 0%, #f1f5f9 100%);
  border-left: 4px solid var(--primary-color);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.my-timeline-date-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 25%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 75%
  );
  animation: shine 2.5s infinite;
}

@keyframes shine {
  100% {
    left: 100%;
  }
}

/* ==================================================
   Highlight Animation for Specific Reviews
================================================== */
.highlight-review {
  animation: blink 1s infinite;
  border: 4px solid #FF0000;
  background-color: rgba(255, 0, 0, 0.1);
}

@keyframes blink {
  0% { background-color: rgba(255, 0, 0, 0.1); }
  50% { background-color: rgba(255, 0, 0, 0.3); }
  100% { background-color: rgba(255, 0, 0, 0.1); }
}

/* ==================================================
   Timeline Items
================================================== */
.my-timeline-item {
  position: relative;
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  transition: all 0.3s var(--transition-ease);
  display: flex;
  flex-direction: column;
  min-height: 360px;
  border: 1px solid rgba(241, 245, 249, 0.6);
  overflow: hidden;
  cursor: pointer;
}

.my-timeline-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.my-timeline-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 2px solid transparent;
  background: linear-gradient(145deg,
    rgba(59, 130, 246, 0.1) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(59, 130, 246, 0.1) 100%
  ) border-box;
  mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  transition: all 0.4s var(--transition-ease);
}

/* ==================================================
   Content Elements (Date, Image, Title, Text)
================================================== */
.my-timeline-date {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.my-timeline-image {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
  position: relative;
}

.my-timeline-image.loading {
  position: relative;
  background-color: #f1f5f9;
}

.my-timeline-image.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 2;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.my-timeline-image.loading img {
  opacity: 0;
}

.my-timeline-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.4s var(--transition-ease), opacity 0.4s ease;
}

.my-timeline-image:hover img {
  transform: scale(1.05);
}

.my-timeline-image.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f5f9;
  height: 200px;
  border-radius: 12px;
  margin-bottom: 1.25rem;
}

.my-timeline-image.placeholder .placeholder-text {
  font-size: 1rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.my-timeline-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  line-height: 1.4;
  position: relative;
  display: inline-block;
}

.my-timeline-title::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--primary-color);
  transition: width 0.3s var(--transition-ease);
}

.my-timeline-item:hover .my-timeline-title::after {
  width: 80px;
}

.my-timeline-text {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==================================================
   Tags Slider (with Advanced Left/Right Arrows)
================================================== */
.tags-slider {
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
}
.tags-container {
  white-space: nowrap;
  transition: transform 0.3s ease;
}
.timeline-tag {
  display: inline-block;
  background-color: var(--secondary-color);
  color: #fff;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  margin-right: 4px;
}
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #e0e0e0;
  color: var(--primary-color);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.3s ease, transform 0.3s ease;
}
.slider-arrow:hover {
  background: var(--primary-color);
  color: #fff;
  transform: scale(1.1);
}
.slider-arrow.left {
  left: 4px;
}
.slider-arrow.right {
  right: 4px;
}

/* ==================================================
   Social Share Buttons on Card (Circular with Font Awesome)
================================================== */
.my-timeline-share a,
.popup-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  color: var(--primary-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-decoration: none;
  font-size: 1.2rem;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.my-timeline-share a:hover,
.popup-share a:hover {
  background: var(--primary-color);
  color: #fff;
  transform: scale(1.1);
}

/* ==================================================
   Navigation Sidebar / Bar
================================================== */
.my-timeline-navigation {
  position: fixed;
  top: 70%;
  right: 2rem;
  transform: translateY(-50%);
  background: var(--bg-blur);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: var(--navigation-width);
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid rgba(241, 245, 249, 0.3);
}

.my-timeline-years-months {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.my-timeline-month-link {
  font-size: 0.95rem;
  color: var(--primary-color);
  padding: 0.5rem 1rem;
  border-radius: 10px;
  transition: all 0.25s var(--transition-ease);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  background: rgba(241, 245, 249, 0.4);
}

.my-timeline-month-link:hover {
  background: rgba(59, 130, 246, 0.1);
  transform: translateX(6px);
}

.my-timeline-month-link::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 0;
  background: var(--primary-color);
  border-radius: 2px;
  transition: height 0.3s var(--transition-ease);
}

.my-timeline-month-link:hover::before {
  height: 60%;
}

/* ==================================================
   Popup Modal Styles
================================================== */
.my-timeline-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background: rgba(211, 211, 211, 0.955);
  border-radius: 24px;
  padding: 2rem;
  width: 90%;
  max-width: 880px;
  max-height: 90vh;
  overflow: auto;
  display: none;
  z-index: 9999;
  animation: popupIn 0.4s var(--transition-ease) forwards;
}

@keyframes popupIn {
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.popup-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.my-timeline-popup img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.popup-title {
  font-size: 1.8rem;
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.popup-description {
  line-height: 1.7;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.popup-order-id {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(241, 245, 249, 0.6);
  color: var(--text-primary);
}

.popup-order-id strong {
  font-weight: bold;
}

.popup-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: 0;
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}

.popup-close:hover {
  color: var(--primary-color);
}

/* ==================================================
   Responsive Design
================================================== */
@media (min-width: 1600px) {
  .my-timeline-container {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .popup-content {
    grid-template-columns: 40% 60%;
  }
}

@media (max-width: 1200px) {
  .my-timeline-container {
    padding-right: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
  
  .my-timeline-navigation {
    bottom: 1.5rem;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-height: 64px;
    overflow-x: auto;
    padding: 0.75rem;
  }
  
  .my-timeline-years-months {
    flex-direction: row;
    gap: 0.5rem;
  }
}

@media (max-width: 768px) {
  .my-timeline-container {
    padding: 1.5rem;
    gap: 1.5rem;
  }
  
  .my-timeline-item {
    min-height: auto;
  }
  
  .my-timeline-image img {
    height: 160px;
  }
  
  .popup-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .my-timeline-popup {
    padding: 1rem;
  }
  
  .popup-title {
    font-size: 1.5rem;
  }
}

/* ==================================================
   Scrollbar Styling
================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(241, 245, 249, 0.4);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 4px;
}

/* ==================================================
   Load More Button
================================================== */
.load-more-container {
  text-align: center;
  margin: 2rem 0;
}

.beautiful-load-more {
  background: linear-gradient(135deg, #f6d365, #fda085);
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 25px;
  cursor: pointer;
  transition: transform 0.3s var(--transition-ease);
}

.beautiful-load-more:hover {
  transform: translateY(-4px);
}

/* ==================================================
   Toast Notification
================================================== */
.toast-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #0a3c0e;
  color: #fff;
  padding: 12px 20px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 0.9rem;
  z-index: 99999;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast-notification.show {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Enhanced Search Form Styles ===== */
.my-timeline-search {
    margin-bottom: 1rem;
    text-align: left;
    padding-left: 1rem;
}

.search-input-wrapper {
    position: relative;
    width: 100%;  /* full width */
    margin: 0;
}

.search-input-wrapper input {
    width: 100%;
    padding: 0.6rem 2.5rem 0.6rem 3rem;  /* increased left padding */
    border: 1px solid #ccc;
    border-radius: 25px;
    font-size: 1rem;
    transition: box-shadow 0.3s ease;
}

.search-input-wrapper input:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(10, 60, 14, 0.5);
}

.search-input-wrapper .search-icon {
    position: absolute;
    top: 50%;
    right: 2.5rem;  /* moved to the right side */
    transform: translateY(-50%);
    color: #888;
    font-size: 1.2rem;
}

.search-input-wrapper .clear-search {
    position: absolute;
    top: 50%;
    right: 0.8rem;
    transform: translateY(-50%);
    color: #888;
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.3s ease;
}

.search-input-wrapper .clear-search:hover {
    color: var(--primary-color);
}


/* ==========================================================================
   Multi-image reviews
   A review can carry several screenshots. The card shows the first with a
   count badge; the popup shows a selectable strip underneath the main image.
   ========================================================================== */

.my-timeline-image-count {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.68);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  pointer-events: none;
}

.popup-media {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.popup-gallery {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.popup-gallery-thumb {
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.6;
  border: 2px solid transparent;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.popup-gallery-thumb:hover,
.popup-gallery-thumb.is-active {
  opacity: 1;
  border-color: var(--primary-color);
}

.my-timeline-rating {
  color: #f5a623;
  letter-spacing: 0.1em;
  font-size: 1rem;
  margin: 0.25rem 0 0.5rem;
}

/* ==================================================
   IMAGE-FIRST GALLERY (v2.4)

   A review IS its screenshot. The old layout put a 200px `object-fit: cover`
   thumbnail inside a padded white card — which cropped the top and bottom off
   every portrait chat screenshot, hiding the actual review, and then framed
   what was left in chrome nobody came to look at.

   Now the image IS the card at its natural proportions, with the title/date and
   the tags/text/share controls drawn over it in two scrims. Rules below
   deliberately override the earlier card styles rather than editing them, so
   the original design stays readable in one piece above.
================================================== */

/* The container is now a plain block; each month renders its own masonry. */
.my-timeline-container {
  display: block;
  gap: 0;
}

.my-timeline-masonry {
  columns: 3;
  column-gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (max-width: 1200px) {
  .my-timeline-masonry { columns: 2; }
}

@media (max-width: 768px) {
  .my-timeline-masonry { columns: 1; }
}

/* Card = image. No padding, no background, no fixed height. */
.my-timeline-item {
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  min-height: 0;
  padding: 0;
  margin: 0 0 1.5rem;
  background: transparent;
  border: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.my-timeline-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

/* Kill the decorative gradient ring — it framed a card that no longer exists. */
.my-timeline-item::after { content: none; }

.my-timeline-image {
  margin: 0;
  border-radius: 0;
  overflow: hidden;
}

/* The whole screenshot, never cropped: width fills the column, height follows
   the image's own aspect ratio. */
.my-timeline-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: initial;
}

.my-timeline-item:hover .my-timeline-image img {
  transform: none; /* zooming a screenshot just blurs the text */
}

.my-timeline-image.placeholder {
  height: 260px;
  margin: 0;
  border-radius: 0;
}

/* ---- Scrims: everything else, drawn on the image ---- */
.my-timeline-scrim {
  position: absolute;
  left: 0;
  right: 0;
  padding: 0.85rem 1rem;
  color: #fff;
  pointer-events: none;
}

.my-timeline-scrim > *,
.my-timeline-scrim a,
.my-timeline-scrim .tags-slider {
  pointer-events: auto;
}

.my-timeline-scrim-top {
  top: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 60%, transparent 100%);
}

.my-timeline-scrim-bottom {
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 55%, transparent 100%);
}

.my-timeline-scrim-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.my-timeline-scrim-main { min-width: 0; }

.my-timeline-scrim-side {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* ---- Typography inside the scrims ---- */
.my-timeline-scrim .my-timeline-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.my-timeline-scrim .my-timeline-title::after { content: none; }

.my-timeline-scrim .my-timeline-date {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.85);
  margin: 0.15rem 0 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.my-timeline-scrim .my-timeline-text {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.92);
  margin: 0 0 0.5rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.my-timeline-scrim .my-timeline-text p { margin: 0; }

.my-timeline-rating {
  font-size: 0.85rem;
  color: #fbbf24;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Order id and image count as pills on the image */
.my-timeline-order-id-top,
.my-timeline-image-count {
  position: static;
  display: inline-block;
  margin-top: 0.45rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  border: none;
  color: rgba(255,255,255,0.92);
  font-size: 0.7rem;
  font-weight: 500;
  z-index: auto;
}

.my-timeline-image-count { margin-top: 0; }

/* ---- Tags and share, restyled for a dark scrim ---- */
.my-timeline-scrim .tags-slider {
  margin: 0 0 0.5rem;
  background: transparent;
}

.my-timeline-scrim .timeline-tag {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: none;
  backdrop-filter: blur(4px);
}

.my-timeline-scrim .slider-arrow { color: rgba(255,255,255,0.8); }

.my-timeline-scrim .my-timeline-share {
  display: flex;
  gap: 0.4rem;
  margin: 0;
  border: none;
  padding: 0;
}

.my-timeline-scrim .my-timeline-share a {
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.16);
  color: #fff;
  backdrop-filter: blur(4px);
  border: none;
}

.my-timeline-scrim .my-timeline-share a:hover {
  background: rgba(255,255,255,0.32);
  color: #fff;
}

/* On narrow screens the scrims crowd a small image, so ease the padding. */
@media (max-width: 480px) {
  .my-timeline-scrim { padding: 0.7rem 0.8rem; }
  .my-timeline-scrim .my-timeline-text { -webkit-line-clamp: 1; line-clamp: 1; }
}

/* ==========================================================================
   Homepage review slider  [my_timeline_slider]
   One horizontal row, native scroll-snap. No slider library: the browser's
   own overflow scrolling gives correct touch momentum and keyboard behaviour,
   and costs the homepage nothing.
   ========================================================================== */

.my-timeline-slider {
  --slide-w: 260px;
  width: 100%;
  margin: 2rem 0;
}

.my-timeline-slider-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.my-timeline-slider-title {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.25;
  margin: 0 0 0.35rem;
  color: var(--text-primary, #111);
}

.my-timeline-slider-sub {
  margin: 0;
  color: var(--text-secondary, #666);
  font-size: 0.95rem;
}

.my-timeline-slider-viewport {
  position: relative;
}

.my-timeline-slider-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-left: 0.25rem;
  padding: 0.25rem 0.25rem 1rem;
  margin: 0;
  list-style: none;
  /* Firefox */
  scrollbar-width: thin;
}

.my-timeline-slider-track::-webkit-scrollbar {
  height: 6px;
}

.my-timeline-slider-track::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
}

.my-timeline-slider-track:focus-visible {
  outline: 2px solid var(--primary-color, #2563eb);
  outline-offset: 4px;
  border-radius: 12px;
}

.my-timeline-slide {
  position: relative;
  flex: 0 0 var(--slide-w);
  width: var(--slide-w);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.my-timeline-slide:hover,
.my-timeline-slide:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.13);
  outline: none;
}

/* Screenshots are portrait chat captures — contain, never crop, or the
   message itself is the part that gets cut off. */
.my-timeline-slide-media {
  position: relative;
  height: 220px;
  background: linear-gradient(180deg, #f6f7f9, #eceef1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  flex-shrink: 0;
}

.my-timeline-slide-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.my-timeline-slide-count {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(0, 0, 0, 0.66);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
}

.my-timeline-slide-placeholder {
  color: var(--text-secondary, #888);
  font-size: 0.85rem;
}

.my-timeline-slide-body {
  padding: 0.85rem 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.my-timeline-slide-title {
  font-size: 0.98rem;
  line-height: 1.3;
  margin: 0;
  color: var(--text-primary, #111);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.my-timeline-slide-chip {
  align-self: flex-start;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.09);
  color: var(--primary-color, #2563eb);
}

.my-timeline-slide-stars {
  color: #f5a623;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  line-height: 1;
}

.my-timeline-slide-excerpt {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary, #666);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.my-timeline-slide-date {
  margin-top: auto;
  font-size: 0.75rem;
  color: var(--text-secondary, #999);
}

.my-timeline-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  color: var(--text-primary, #222);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  transition: background 0.15s ease, transform 0.15s ease;
}

.my-timeline-slider-arrow:hover {
  background: var(--primary-color, #2563eb);
  color: #fff;
}

.my-timeline-slider-arrow[hidden] {
  display: none;
}

.my-timeline-slider-arrow.prev { left: -14px; }
.my-timeline-slider-arrow.next { right: -14px; }

.my-timeline-slider-footer {
  text-align: center;
  margin-top: 0.5rem;
}

.my-timeline-slider-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--primary-color, #2563eb);
  text-decoration: none;
}

.my-timeline-slider-link:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .my-timeline-slider { --slide-w: 78vw; }
  .my-timeline-slider-arrow { display: none; }
  .my-timeline-slide-media { height: 200px; }
}

/* Someone who asked the OS to stop moving things means it. */
@media (prefers-reduced-motion: reduce) {
  .my-timeline-slider-track { scroll-behavior: auto; }
  .my-timeline-slide { transition: none; }
  .my-timeline-slide:hover { transform: none; }
}