/* ============================= */
/* Timeline View Styles          */
/* ============================= */

/* Accessibility Styles */
.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

/* Skip link for accessibility */
.skip-link {
   position: absolute;
   top: -40px;
   left: 6px;
   background: #000;
   color: #fff;
   padding: 8px;
   text-decoration: none;
   border-radius: 4px;
   z-index: 9999;
   font-weight: bold;
}

.skip-link:focus {
   top: 6px;
}

.timeline-skip {
   left: 12px; /* Fixed left position to prevent cut-off */
   transform: none;
}

/* Enhanced focus indicators for timeline cards */
.timeline-card:focus {
   outline: 3px solid #0066cc;
   outline-offset: 2px;
   box-shadow: 0 0 0 5px rgba(0, 102, 204, 0.2);
}

.timeline-card:focus-visible {
   outline: 3px solid #0066cc;
   outline-offset: 2px;
}

/* Focus indicators for editable fields */
.timeline-text-display:focus,
.timeline-title-display:focus {
   outline: 2px solid #0066cc;
   outline-offset: 1px;
   background-color: rgba(0, 102, 204, 0.05);
}

/* Keyboard navigation indicators */
.timeline-card[aria-current="true"] {
   border-left: 4px solid #0066cc;
}

/* Enhanced focus indicators for welcome cards */
.welcome-card:focus {
   outline: 3px solid #0066cc;
   outline-offset: 2px;
   box-shadow: 0 0 0 5px rgba(0, 102, 204, 0.2);
}

.welcome-card:focus-visible {
   outline: 3px solid #0066cc;
   outline-offset: 2px;
}

#chat-and-timeline-wrapper {
   position: relative;
   flex: 1; /* {{ Make chat-and-timeline-wrapper take up available vertical space }} */
   overflow: hidden;
   margin-bottom: 2vh;
}

#timeline-area {
   position: absolute;
   border-radius: 12px;
   overflow-x: hidden;
   display: flex;
   flex-direction: column;
   justify-content: center;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   transition: all 0.3s ease-in-out;
   z-index: 1;
}

/* Hide timeline when welcome content is visible */
.welcome-content.visible ~ #chat-and-timeline-wrapper #timeline-area {
   display: none !important;
}
.welcome-content.visible ~ #chat-and-timeline-wrapper {
   display: none !important;
}

/* Default (widescreen) scroll container */
.timeline-scroll-container {
   display: flex;
   gap: 24px;
   padding: 24px 24px; /* Increased vertical padding */
   min-height: 200px;
   scroll-behavior: smooth;
   overflow-x: auto;
   scroll-snap-type: x proximity;
   /* This offset centers cards in wide view */
   padding: 24px calc(50% - 200px);
   cursor: grab;
}

.timeline-scroll-container:active {
   cursor: grabbing;
}

/* Updated .timeline-card transition */
.timeline-card {
   flex: 0 0 500px;
   height: auto;
   min-height: 380px;
   max-height: 777px;
   background: #ffffff;
   border-radius: 16px;
   display: flex;
   flex-direction: column;
   cursor: pointer;
   scroll-snap-align: center;
   opacity: 1;
   transform: none;
   box-shadow: 0 4px 6px rgba(0,0,0,0.1);
   padding: 0; /* Remove padding to allow thumbnail to fill width */
   position: relative; /* For absolute positioning of elements */
   overflow: hidden; /* For the scroll fade effect */
}

.timeline-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 28px rgba(63, 87, 107, 0.15), 0 8px 10px rgba(24, 26, 44, 0.1);
}

/* Scene number section - positioned absolutely on top of the thumbnail */
.timeline-scene-number {
   position: absolute;
   top: 10px;
   left: 10px;
   font-size: 24px;
   font-weight: bold;
   color: #ffffff;
   background: rgba(0, 0, 0, 0.8);
   border-radius: 12px;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2;
   margin: 0;
}

/* 16:9 Thumbnail container - reduced height */
.timeline-thumbnail {
   width: 100%;
   height: 0;
   padding-top: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625 = 56.25%) */
   position: relative;
   overflow: hidden;
   margin: 0;
   box-sizing: border-box;
   background-color: #596771; /* Darker background for better contrast */
}

.timeline-thumbnail img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
   transition: transform 0.5s ease-in-out; /* Smoother transition */
   margin: 0;
   padding: 0;
}

/* Focal point visualization overlay */
.focal-point-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
   z-index: 3;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

.focal-point-indicator {
   position: absolute;
   border: 2px solid #ffd000;
   background-color: rgba(255, 208, 0, 0.15);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 0 8px rgba(255, 208, 0, 0.5);
   pointer-events: none;
   transition: all 0.3s ease-in-out;
   margin: 0;
   padding: 0;
   transform: translate(0, 0); /* Reset any transforms */
   box-sizing: border-box;
}

/* Toggle for focal point preview */
.focal-point-toggle {
   background: rgba(0, 0, 0, 0.7);
   color: white;
   border: none;
   border-radius: 4px;
   padding: 6px 10px;
   font-size: 12px;
   font-weight: 500;
   cursor: pointer;
   transition: background-color 0.2s ease;
}

/* Show the toggle on hover */
.timeline-card:hover .focal-point-toggle {
   opacity: 1 !important;
}

.focal-point-toggle:hover {
   background: rgba(0, 0, 0, 0.9);
}

/* Keep the toggle visible when preview is active */
.timeline-thumbnail.preview-active .focal-point-toggle {
   opacity: 1 !important;
}

/* Class for when focal point preview is active */
.timeline-thumbnail.preview-active img {
   /* Transform is now applied dynamically in JavaScript */
   transition: transform 0.5s ease-in-out;
}

/* Hide the focal point indicator when preview is active */
.timeline-thumbnail.preview-active .focal-point-indicator {
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Hide the indicator in collapsed state */
#main-app.player-visible .timeline-card.collapsed .timeline-thumbnail.preview-active::after {
   display: none;
}

/* Title container below the image */
.timeline-title-container {
   padding: 16px;
   width: 100%;
   box-sizing: border-box;
}

.timeline-title-display {
   font-size: 18px;
   font-weight: 600;
   color: #1f2937;
   line-height: 1.3;
   cursor: text;
}

/* Inline editing style */
.timeline-title-display[contenteditable="true"] {
   background: #f3f4f6;
   padding: 8px;
   border-radius: 4px;
   margin: -8px;
}

/* Scrollable content area - adjusted for better fit */
.timeline-collapsible {
   flex: 1;
   overflow-y: auto;
   padding: 0 16px;
   margin-bottom: 50px; /* Reduced space for the sticky footer */
   max-height: none; /* Removed max-height limit to allow expansion */
}

.timeline-card-body {
   display: flex;
   flex-direction: column;
   gap: 16px;
   padding-bottom: 16px;
}

.timeline-field-label {
   font-size: 12px;
   font-weight: 600;
   color: #6b7280;
   text-transform: uppercase;
   margin-bottom: 4px;
}

.timeline-field-group {
   margin-bottom: 12px;
   position: relative;
}

.timeline-field-group:last-child {
   margin-bottom: 0;
}

/* Header row for field labels with inline buttons */
.timeline-field-header {
   display: flex !important;
   justify-content: space-between !important;
   align-items: center !important;
   margin-bottom: 8px;
}

/* Inline button styling for field headers */
.timeline-field-header .refresh-scene-button,
.timeline-field-header .focal-point-toggle {
   font-size: 0.7rem !important;
   padding: 0.2rem 0.5rem !important;
   border: 1px solid #d1d5db !important;
   background-color: #f9fafb !important;
   color: #374151 !important;
   border-radius: 4px !important;
   cursor: pointer !important;
   transition: all 0.2s ease !important;
   min-width: auto !important;
   height: auto !important;
   font-weight: 500 !important;
   text-transform: none !important;
   letter-spacing: normal !important;
}

.timeline-field-header .refresh-scene-button:hover,
.timeline-field-header .focal-point-toggle:hover {
   background-color: #e5e7eb !important;
   color: #1f2937 !important;
   border-color: #9ca3af !important;
}

.timeline-field-header .refresh-scene-button:focus,
.timeline-field-header .focal-point-toggle:focus {
   outline: 2px solid #0066cc !important;
   outline-offset: 1px !important;
   background-color: #dbeafe !important;
   border-color: #3b82f6 !important;
}

/* Improve the appearance of text displays */
.timeline-text-display {
   font-size: 14px;
   line-height: 1.5;
   color: #1f2937;
   padding: 8px;
   background: #f9fafb;
   border-radius: 6px;
   white-space: pre-wrap;
   min-height: 24px;
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

/* Style for when text display is being edited */
.timeline-text-display[contenteditable="true"] {
   background: #ffffff;
   border: 1px solid #3b82f6;
   box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
   outline: none;
   padding: 7px; /* Adjust for the border */
}

/* Sticky footer with delete button - reduced height */
.timeline-card-footer {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: #ffffff;
   padding: 8px 16px; /* Reduced padding */
   border-top: 1px solid #e5e7eb;
   z-index: 3;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.timeline-actions-left {
   display: flex;
   gap: 8px;
   padding: 8px;
}

.timeline-actions {
   display: flex;
   gap: 8px;
   justify-content: flex-end;
   padding: 8px;
}

.timeline-actions button {
   background: rgba(255, 255, 255, 0.05);
   color: #373737;
   border: none;
   border-radius: 50%;
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
   opacity: 0.7;
   padding: 0;
}

/* Edit focal point button in right actions should be rectangular with text */
.timeline-actions button.edit-focal-point-button {
   border-radius: 6px;
   color: #000000;
   width: auto;
   padding: 0 12px;
   gap: 6px;
   font-size: 14px;
   font-weight: 500;
   white-space: nowrap;
}

.timeline-actions-left button {
   background: rgba(0, 0, 0, 0.05);
   color: #000000;
   border: none;
   border-radius: 6px;
   height: 36px;
   padding: 0 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   cursor: pointer;
   transition: all 0.2s ease;
   opacity: 0.7;
   font-size: 14px;
   font-weight: 500;
   white-space: nowrap;
}

/* Delete button in left actions should be circular like other action buttons */
.timeline-actions-left button[title="Delete scene"] {
   border-radius: 50%;
   width: 36px;
   padding: 0;
   gap: 0;
}

.timeline-card:hover .timeline-actions button,
.timeline-card:hover .timeline-actions-left button {
   opacity: 1;
}

.timeline-actions button:hover,
.timeline-actions-left button:hover {
   background: rgba(248, 141, 141, 0.1);
   color: rgb(236, 68, 68);
}

/* Override red hover for edit focal point button - use neutral hover */
.timeline-actions button.edit-focal-point-button:hover {
   background: rgba(0, 0, 0, 0.1) !important;
   color: #000000 !important;
}

.timeline-actions button i {
   font-size: 16px;
}

/* Scroll fade gradient at the bottom - adjusted position */
.timeline-card::after {
   content: '';
   position: sticky;
   bottom: 50px; /* Position above the sticky footer */
   left: 0;
   right: 0;
   height: 50px; /* Reduced height of gradient */
   background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
   pointer-events: none; /* Allow clicks to pass through */
   z-index: 2;
}

/* ============================= */
/* Narrow View Styles            */
/* (Triggered by .player-visible) */
/* ============================= */

/* Fix timeline area height to roughly 500px in narrow view */
#main-app.player-visible #timeline-area {
   height: 100%; /* {{ Set timeline-area height to 100% in narrow view }} */
   display: flex;
   align-items: center;
   padding: 0; /* Remove padding to prevent shadow clipping */
   overflow-x: visible; /* Allow horizontal overflow for shadow */
 }

#main-app.player-visible #chat-and-timeline-wrapper {
   height: 500px; /* {{ Limit height of chat-and-timeline-wrapper in narrow view }} */
}

 /* Narrow view scroll container: stack cards vertically */
 #main-app.player-visible .timeline-scroll-container {
   flex-direction: column;
   width: 100%;
   height: 100%;
   padding: 16px 16px;
   gap: 14px;
   overflow-y: auto;
   cursor: default;
 }

 /* Force cards to full width in narrow view */
 #main-app.player-visible .timeline-card {
   width: 100% !important;
   margin: 0;
   box-sizing: border-box;
   transform: translateZ(0); /* Force hardware acceleration to prevent text blur on hover */
   -webkit-font-smoothing: antialiased; /* Improve text rendering */
 }

 /* COLLAPSED state in narrow view (default) */
 #main-app.player-visible .timeline-card.collapsed {
   height: 60px !important;
   min-height: 60px !important;
   max-height: 60px !important;
   overflow: hidden;
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 0;
   cursor: pointer; /* Consistent cursor for collapsed cards */
 }

 #main-app.player-visible .timeline-card.collapsed .timeline-scene-number {
   position: static;
   width: 30px;
   height: 30px;
   font-size: 16px;
   margin: 0 12px;
   flex-shrink: 0;
   display: flex; /* Show scene number in collapsed state */
 }

 /* Hide thumbnail in collapsed state for cleaner interface */
 #main-app.player-visible .timeline-card.collapsed .timeline-thumbnail {
   display: none; /* Hide the thumbnail completely in collapsed state */
 }

 #main-app.player-visible .timeline-card.collapsed .timeline-title-container {
   flex: 1;
   min-width: 0;
   padding: 0;
   margin-right: 12px; /* Add right margin since thumbnail is now hidden */
   cursor: pointer; /* Ensure consistent cursor throughout the container */
 }

 #main-app.player-visible .timeline-card.collapsed .timeline-title-display {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 14px;
   cursor: pointer; /* Override text cursor in collapsed state to prevent blur */
   user-select: none; /* Prevent text selection in collapsed state */
 }

 /* Hide collapsible content and footer in collapsed state */
 #main-app.player-visible .timeline-card.collapsed .timeline-collapsible,
 #main-app.player-visible .timeline-card.collapsed .timeline-card-footer,
 #main-app.player-visible .timeline-card.collapsed::after {
   display: none;
 }

 /* Focus indicators for collapsed cards in narrow view */
 #main-app.player-visible .timeline-card.collapsed:focus {
   outline: 3px solid #0066cc;
   outline-offset: 2px;
   box-shadow: 0 0 0 5px rgba(0, 102, 204, 0.2);
 }

 #main-app.player-visible .timeline-card.collapsed:focus-visible {
   outline: 3px solid #0066cc;
   outline-offset: 2px;
 }

 /* EXPANDED state in narrow view - adjusted max height */
 #main-app.player-visible .timeline-card.expanded {
   height: auto !important;
   max-height: none; /* Changed from 400px to none to allow full expansion */
   display: flex;
   flex-direction: column;
 }

 #main-app.player-visible .timeline-card.expanded .timeline-scene-number {
   position: absolute;
   top: 12px;
   left: 12px;
 }

 #main-app.player-visible .timeline-card.expanded .timeline-thumbnail {
   width: 100%;
   padding-top: 56.25%; /* 16:9 aspect ratio */
 }

 #main-app.player-visible .timeline-card.expanded .timeline-title-container {
   padding: 16px;
 }

 #main-app.player-visible .timeline-card.expanded .timeline-title-display {
   cursor: text; /* Show text cursor when editing is allowed */
   user-select: text; /* Allow text selection when editing is allowed */
 }

 /* Show collapsible content and footer in expanded state */
 #main-app.player-visible .timeline-card.expanded .timeline-collapsible,
 #main-app.player-visible .timeline-card.expanded .timeline-card-footer,
 #main-app.player-visible .timeline-card.expanded::after {
   display: block;
 }

 /* Footer positioning for expanded narrow view - match standard view */
 #main-app.player-visible .timeline-card.expanded .timeline-card-footer {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: #ffffff;
   padding: 8px 16px;
   border-top: 1px solid #e5e7eb;
   z-index: 7;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 #main-app.player-visible .timeline-card.expanded .timeline-actions-left {
   display: flex;
   gap: 8px;
   padding: 8px;
 }

 #main-app.player-visible .timeline-card.expanded .timeline-actions {
   display: flex;
   gap: 8px;
   justify-content: flex-end;
   padding: 8px;
 }

 #main-app.player-visible .timeline-card.expanded .timeline-actions button {
   background: rgba(255, 255, 255, 0.05);
   color: #000000;
   border: none;
   border-radius: 50%;
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
   opacity: 0.7;
   padding: 0;
 }

 /* Edit focal point button in right actions should be rectangular with text in narrow view */
 #main-app.player-visible .timeline-card.expanded .timeline-actions button.edit-focal-point-button {
   border-radius: 6px;
   color: #000000;
   width: auto;
   padding: 0 12px;
   gap: 6px;
   font-size: 14px;
   font-weight: 500;
   white-space: nowrap;
 }

 #main-app.player-visible .timeline-card.expanded .timeline-actions-left button {
   background: rgba(0, 0, 0, 0.05);
   color: #000000;
   border: none;
   border-radius: 6px;
   height: 36px;
   padding: 0 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   cursor: pointer;
   transition: all 0.2s ease;
   opacity: 0.7;
   font-size: 14px;
   font-weight: 500;
   white-space: nowrap;
 }

 /* Delete button in left actions should be circular like other action buttons in narrow view */
 #main-app.player-visible .timeline-card.expanded .timeline-actions-left button[title="Delete scene"] {
   border-radius: 50%;
   width: 36px;
   padding: 0;
   gap: 0;
 }

 #main-app.player-visible .timeline-card.expanded .timeline-actions-left button:hover {
   opacity: 1;
   background: rgba(248, 141, 141, 0.1);
   color: rgb(236, 68, 68);
 }

 /* Override red hover for edit focal point button in narrow view - use neutral hover */
 #main-app.player-visible .timeline-card.expanded .timeline-actions button.edit-focal-point-button:hover {
   background: rgba(0, 0, 0, 0.1) !important;
   color: #000000 !important;
 }

 /* Enhanced focus indicators for action buttons in narrow view */
 #main-app.player-visible .timeline-card.expanded .timeline-actions button:focus,
 #main-app.player-visible .timeline-card.expanded .timeline-actions-left button:focus {
   outline: 2px solid #0066cc;
   outline-offset: 2px;
   box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.2);
 }

 #main-app.player-visible .timeline-card.expanded .timeline-actions button:focus-visible,
 #main-app.player-visible .timeline-card.expanded .timeline-actions-left button:focus-visible {
   outline: 2px solid #0066cc;
   outline-offset: 2px;
 }

 /* Enhanced focus indicators for focal point buttons in narrow view */
 #main-app.player-visible .timeline-card.expanded .focal-point-toggle:focus,
 #main-app.player-visible .timeline-card.expanded .focal-point-edit:focus {
   outline: 2px solid #0066cc;
   outline-offset: 2px;
   box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.2);
 }

 #main-app.player-visible .timeline-card.expanded .focal-point-toggle:focus-visible,
 #main-app.player-visible .timeline-card.expanded .focal-point-edit:focus-visible {
   outline: 2px solid #0066cc;
   outline-offset: 2px;
 }

/* Prevent event propagation for interactive elements in narrow view */
#main-app.player-visible .timeline-text-display,
#main-app.player-visible .focal-point-controls,
#main-app.player-visible .timeline-actions button,
#main-app.player-visible .timeline-thumbnail img {
  pointer-events: auto;
}

/* Make sure the focal point controls are visible in narrow view */
#main-app.player-visible .timeline-card.expanded .focal-point-controls {
  opacity: 1;
}

#main-app.player-visible .timeline-card.expanded .focal-point-toggle,
#main-app.player-visible .timeline-card.expanded .focal-point-edit {
  padding: 8px 12px;
  font-size: 14px;
}

/* Ensure the title is clickable for editing in narrow view */
#main-app.player-visible .timeline-card.expanded .timeline-title-display {
  pointer-events: auto;
}

/* Ensure editable fields are properly interactive in narrow view */
#main-app.player-visible .timeline-card.expanded .timeline-text-display {
  position: relative;
  z-index: 10;
  cursor: text;
  transition: background-color 0.2s, border-color 0.2s;
  min-height: 24px;
  padding: 8px;
  background: #f9fafb;
  border-radius: 6px;
  border: 1px solid transparent;
}

#main-app.player-visible .timeline-card.expanded .timeline-text-display:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

#main-app.player-visible .timeline-card.expanded .timeline-text-display:focus {
  outline: 2px solid #0066cc;
  outline-offset: 1px;
  background-color: rgba(0, 102, 204, 0.05);
}

#main-app.player-visible .timeline-card.expanded .timeline-text-display[contenteditable="true"] {
  background: #ffffff;
  border: 1px solid #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
  outline: none;
  padding: 7px; /* Adjust for the border */
}

/* Field group interactions in narrow view */
#main-app.player-visible .timeline-card.expanded .timeline-field-group {
  position: relative;
  z-index: 5;
  margin-bottom: 12px;
}

#main-app.player-visible .timeline-card.expanded .timeline-field-group:hover {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 4px;
}

/* Focus-within styles for keyboard navigation */
#main-app.player-visible .timeline-card.expanded .timeline-field-group:focus-within {
  background: rgba(0, 102, 204, 0.05);
  border-radius: 4px;
  border: 1px solid rgba(0, 102, 204, 0.2);
}

/* Field labels in narrow view */
#main-app.player-visible .timeline-card.expanded .timeline-field-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  margin-bottom: 4px;
  pointer-events: none; /* Prevent interfering with text field clicks */
}

/* Title editing in narrow view */
#main-app.player-visible .timeline-card.expanded .timeline-title-display {
  cursor: text; /* Show text cursor when editing is allowed */
  user-select: text; /* Allow text selection when editing is allowed */
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

#main-app.player-visible .timeline-card.expanded .timeline-title-display:hover {
  background: rgba(0, 0, 0, 0.02);
}

#main-app.player-visible .timeline-card.expanded .timeline-title-display:focus {
  outline: 2px solid #0066cc;
  outline-offset: 1px;
  background-color: rgba(0, 102, 204, 0.05);
}

#main-app.player-visible .timeline-card.expanded .timeline-title-display[contenteditable="true"] {
  background: #f3f4f6;
  padding: 8px;
  border-radius: 4px;
  margin: -8px;
  border: 1px solid #d1d5db;
}

/* Ensure the collapsible content area is properly scrollable in narrow view */
#main-app.player-visible .timeline-card.expanded .timeline-collapsible {
  position: relative;
  z-index: 5;
  max-height: 165px; /* Changed from 200px to properly fit */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px;
  margin-bottom: 50px; /* Space for the sticky footer */
}

/* Improve spacing for field groups in narrow view */
#main-app.player-visible .timeline-card.expanded .timeline-card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0;
}

#main-app.player-visible .timeline-card.expanded .timeline-field-group {
  margin-bottom: 12px;
  position: relative;
}

 #main-app.player-visible .timeline-card.expanded .timeline-field-group:last-child {
    margin-bottom: 0;
 }

 /* Inline buttons in narrow view */
 #main-app.player-visible .timeline-card.expanded .timeline-field-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 6px;
 }

 #main-app.player-visible .timeline-card.expanded .timeline-field-header .refresh-scene-button,
 #main-app.player-visible .timeline-card.expanded .timeline-field-header .focal-point-toggle {
    font-size: 0.65rem !important;
    padding: 0.15rem 0.4rem !important;
 }

/* Fix the scroll fade gradient to not interfere with input focus */
#main-app.player-visible .timeline-card.expanded::after {
  content: '';
  position: absolute;
  bottom: 50px; /* Position above the footer */
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  z-index: 4;
  pointer-events: none;
}

/* ==== Sticky Scene Card Footer ==== */
.timeline-card-footer {
  position: sticky;
  left: 0;
  right: 0;
  bottom: 0;
}

#main-app.player-visible .timeline-card.expanded .timeline-card-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Ensure other buttons remain visible */
#main-app.player-visible .chat-input-footer button {
   display: flex;
   opacity: 1;
}

/* Add spacing between glyph and text in buttons */
#main-app.player-visible .chat-input-footer button {
   gap: 8px; /* Add space between icon and text */
   padding: 12px 16px; /* Ensure consistent padding */
}

/* Update chat input footer in narrow mode */
#main-app.player-visible .chat-input-footer {
   flex-direction: row;
   gap: 8px;
   padding: 12px;
   justify-content: space-between;
}

#main-app.player-visible #create-video-button,
#main-app.player-visible #send-button {
   display: inline-flex;
   flex: 1;
   min-width: 120px;
   justify-content: center;
   padding: 12px 16px;
   font-size: 14px;
}

/* Hide screenshot buttons in narrow mode */
#main-app.player-visible .upload-image-button,
#main-app.player-visible .snagit-library-button {
   display: none !important;
}

/* ============================= */
/* Focal Point Editor Styles     */
/* ============================= */

/* Focal point editor container */
.focal-point-editor-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 4;
}

/* Main focal point editor */
.focal-point-editor {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px dashed #ffd000;
  background-color: rgba(255, 208, 0, 0.2);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 0 8px rgba(255, 208, 0, 0.5);
  box-sizing: border-box;
  cursor: move;
  pointer-events: all;
  touch-action: none;
  transform: translate(0, 0);
  z-index: 5;
  transition: width 0.1s ease, height 0.1s ease, transform 0.1s ease;
}

/* Resize handles */
.resize-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background-color: white;
  border: 2px solid #ffd000;
  border-radius: 50%;
  pointer-events: all;
  z-index: 6;
}

/* Position handles at the corners */
.resize-handle.nw {
  top: -7px;
  left: -7px;
  cursor: nwse-resize;
}

.resize-handle.ne {
  top: -7px;
  right: -7px;
  cursor: nesw-resize;
}

.resize-handle.sw {
  bottom: -7px;
  left: -7px;
  cursor: nesw-resize;
}

.resize-handle.se {
  bottom: -7px;
  right: -7px;
  cursor: nwse-resize;
}

/* Confirmation dialog styling */
.confirmation-modal .modal-content {
  max-width: 500px;
}

.focal-point-info {
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 12px;
  margin-top: 16px;
}

.focal-point-info ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.focal-point-info li {
  margin-bottom: 4px;
}

/* Update button styling */
.update-scene-button {
  position: relative;
  background-color: #ffd000 !important;
  color: #000000 !important;
  border: none;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  margin-left: 16px !important;
}

.update-scene-button:hover {
  background-color: #ffda3a !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-1px) !important;
}

.update-scene-button:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.update-scene-button i {
  font-size: 16px !important;
}

/* Notification styling */
#storyboard-notification {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: #333;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1010;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#storyboard-notification.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scene updating animation */
.timeline-card.updating .timeline-thumbnail::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 208, 0, 0.3), transparent);
  background-size: 200% 100%;
  animation: updating-animation 1s ease-in-out infinite;
  pointer-events: none;
}

@keyframes updating-animation {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ============================= */
/* End Focal Point Editor Styles */
/* ============================= */

/* Refresh button specific styles */
.refresh-scene-button {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #666 !important;
}

.refresh-scene-button:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  color: #333 !important;
}

.refresh-scene-button[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.refresh-scene-button .fa-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Card updating state */
.timeline-card.updating {
  position: relative;
  overflow: hidden;
}

.timeline-card.updating::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #333333, transparent);
  animation: loading-bar 1.5s infinite ease-in-out;
  z-index: 10;
}

@keyframes loading-bar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.timeline-card.updating .timeline-thumbnail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #333;
  z-index: 5;
  animation: updating-animation 2s infinite ease-in-out;
}

@keyframes updating-animation {
  0% { background-color: rgba(255, 255, 255, 0.7); }
  50% { background-color: rgba(0, 0, 0, 0.05); }
  100% { background-color: rgba(255, 255, 255, 0.7); }
}

/* ==== Scrollable Scene Card Adjustment ==== */
.timeline-card.expanded {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Preserve hidden overflow for collapsed cards */
.timeline-card.collapsed {
  overflow: hidden;
}

/* Inner collapsible section should inherit scroll from card */
.timeline-card.expanded .timeline-collapsible {
  overflow: visible;
}

/* Narrow player view adjustments - restore old scrolling behavior */
#main-app.player-visible .timeline-card.expanded {
  overflow: hidden; /* Card doesn't scroll - image/title stay fixed */
}

#main-app.player-visible .timeline-card.expanded .timeline-collapsible {
  overflow-y: auto; /* Only the collapsible content scrolls */
  max-height: 165px; /* Restore previous max-height constraint */
}