/* Banner Generator specific styles */
#textOptions{
  display: flex;
  gap:20px;
  flex-direction: row;
}

#aiSuggestionsContainer{
  display: none !important;
}
/* Preview formats */
.preview-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.format-item {
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.format-item:hover {
  background-color: #f0f5ff;
}

.format-item.selected {
  background-color: var(--brand-blue);
  color: white;
  border-color: var(--brand-blue);
}

/* Format options */
.format-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.format-option {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 8px 12px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.format-option:hover {
  background-color: #f0f5ff;
}

.format-option.selected {
  background-color: var(--brand-blue);
  color: white;
  border-color: var(--brand-blue);
}

.format-option-ratio {
  font-size: 10px;
  color: #999;
  margin-top: 4px;
}

.format-option.selected .format-option-ratio {
  color: rgba(255, 255, 255, 0.7);
}

/* Preview container */
.preview-container {
  display: flex; /* Changed from grid to flex */
  flex-wrap: wrap; /* Ensure items wrap to the next line */
  gap: 20px; /* Spacing between items */
  margin-top: 20px;
  align-items: flex-start; /* Align items to the start of the cross axis */
  justify-content: flex-start; /* Align items to the start of the main axis */
}

.preview-item {
  margin-bottom: 20px; 
}

.preview-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.preview-item-title {
  font-size: 14px;
  font-weight: 600;
}

/* Banner styles */
.banner-preview {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden; /* Changed from scroll to hidden for cleaner previews */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Base banner structure (e.g., .banner-instagram1x1) */
[class^="banner-"] { /* Applies to all banner format containers */
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Aspect ratio classes */
.banner-instagram4x5 { aspect-ratio: 4/5; max-width: 400px; }
.banner-website16x9 { aspect-ratio: 16/9; max-width: 480px; }
.banner-instagram1x1 { aspect-ratio: 1/1; max-width: 400px; }
.banner-instagramStory { aspect-ratio: 9/16; max-width: 270px; }


/* Banner elements */
.banner-image, .banner-video { /* Common styling for media elements */
  display: block; /* Ensure it behaves like a block */
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: grab; /* Add grab cursor for draggable images */
}

.banner-image:active {
  cursor: grabbing; /* Change cursor while dragging */
}

.media-area { /* Container for image/video in flex layouts */ 
  position: relative; /* For absolute positioning of logo/flash if they are over media */
  overflow: hidden; /* Clip media if needed */
}

.banner-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events:none;
  width: 100%;
  height: 100%; /* Gradient covers more area */
  background: linear-gradient(180deg,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.7) 100%);
  z-index: 1; /* Ensure it's above media but below text */
}

/* Color Blocks - general styling for when they are part of flex */
.color-block-area {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertical centering for text-container */
  align-items: stretch; /* Default, can be overridden */
  padding: 0 15px; /* Default padding, adjust per layout if needed */
  box-sizing: border-box;
  position: relative; /* For absolute positioning of text if not flex child */
  overflow: hidden; /* Prevent text overflow issues */
  z-index: 2;
}

/* Text containers */
.text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Ensures children (like CTA) don't stretch to full width */
  z-index: 2; /* Above gradient/color blocks */
  box-sizing: border-box;
  width: 100%; /* Take full width of parent color block or positioning context */
}

/* Layout specific styles using Flexbox */
.layout-full-img .text-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding:30px;
}

.banner-display-banner-300x250.layout-full-img .text-container {
  padding:15px;
}

/* For layouts using flexbox (added via JS .flex-row or .flex-column) */
.banner-preview > div.flex-row { display: flex; flex-direction: row; }
.banner-preview > div.flex-column { display: flex; flex-direction: column; }

.layout-bottom-block .media-area { flex: 2; } /* Image takes 2/3 height */
.layout-bottom-block .color-block-area { flex: 1; } /* Color block takes 1/3 height */
.layout-bottom-block .text-container {
  /* Centered by parent flex, specific alignment if needed */
  text-align: left; /* Or center, depending on design */
}

.layout-right-block .media-area { flex: 2; order: 1; } /* Image on left */
.layout-right-block .color-block-area { flex: 1; order: 2; } /* Color block on right */
.layout-right-block .text-container {
  text-align: left; /* Or center */
}

.layout-left-block .color-block-area { flex: 1; order: 1; } /* Color block on left */
.layout-left-block .media-area { flex: 2; order: 2; } /* Image on right */
.layout-left-block .text-container {
  text-align: left; /* Or center */
}

.layout-full-color .color-block-area { /* Takes full space */
  width: 100%;
  height: 100%;
}
.layout-full-color .text-container {
  justify-content: center; /* Center content vertically */
  align-items: flex-start; /* Center content horizontally */
  text-align: left;
  padding: 20px;
}


.sponsor-logos-container{
  position: absolute; /* Keep absolute for overlaying */
  bottom:30px; /* Adjust as needed */
  right:30px; /* Adjust as needed */
  z-index: 3; /* Above text container if necessary, or adjust text-container z-index */
  display: flex;
  align-items: flex-end;
  gap: 5px;
}

.sponsor-logos-container img{
  max-height: 40px; /* Adjust based on typical banner sizes */
  max-width: 110px; /* Adjust */
  object-fit: contain;
}


/* Text positioning classes (used by JS to style .text-container) */
/* These are now more about internal text alignment if parent is flex centering */
.text-bottom {
  /* For full-img or bottom-block where text is at bottom of its area */
  justify-content: flex-end; /* If text-container itself is flex and needs to push content down */
  padding: 15px 20px;
}

.text-center-left, .text-center-right, .text-full-color {
  /* For block layouts, parent .color-block-area handles centering. */
  /* These classes can define text-align if not default. */
  padding: 10px; /* Internal padding for text within its block */
}
.text-center-left { text-align: left; }
.text-center-right { text-align: right; }
.text-full-color { text-align: center; }


/* Three-column layout styles */
.page-content-wrapper {
  display: flex;
  gap: 20px; 
  margin-top: 20px;
  height: calc(100vh - 120px); 
  grid-column: 1 / -1; 
}

.left-column {
  width: 380px; 
  flex-shrink: 0;
  overflow-y: auto; 
  height: 100%;
  border-right: 1px solid var(--border-color);
  background-color: white;
  padding: 20px;
  border-radius: 8px; 
  box-shadow: var(--shadow); 
}

.center-column {
  flex-grow: 1; 
  overflow-y: auto; 
  height: 100%;
  background-color: white;
  border-radius: 8px; 
  box-shadow: var(--shadow); 
}

.right-column {
  width: 350px; 
  flex-shrink: 0;
  overflow-y: auto; 
  height: 100%;
  border-left: 1px solid var(--border-color);
  background-color: white;
  padding: 20px;
  border-radius: 8px; 
  box-shadow: var(--shadow); 
}

.input-form {
  box-shadow: none;
  padding: 0; 
}

.output-header-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
}

#textOptionsContainer,
#aiSuggestionsContainer,
#creativeRationale {
  width: 100%;
  margin-bottom: 20px;
}

.export-options {
  margin-top: 20px; 
  padding-top: 15px;
  border-top: 1px solid var(--border-color);
}


/* Mini Navigation Styles */
.mini-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 20px; /* Adjusted padding */
  margin-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
  position: sticky; 
  top: 0;
  background-color: var(--background-color, #fff); 
  z-index: 20; 
}

.mini-nav-item {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-color-secondary);
  background-color: var(--background-color-light);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.mini-nav-item:hover {
  background-color: var(--brand-blue-light);
  color: var(--brand-blue);
}

.mini-nav-item.active {
  background-color: var(--brand-blue);
  color: white;
  border-color: var(--brand-blue);
}

.preview-container {
  display: flex;
  flex-direction: column; 
  gap: 30px; /* Increased gap */
  align-items: center; 
  padding: 20px; /* Add padding to container */
}

.preview-item {
   width: auto; /* Let content define width up to max-width of banner-preview */
   max-width: 100%; /* Ensure it doesn't overflow center column */
   margin-left: auto;
   margin-right: auto;
}


/* Banner text styles */
.banner-headline {
  color: white;
  font-size: 28px; /* Base, will be scaled by JS */
  font-weight: 700; /* Default for image backgrounds */
  line-height: 1.15;
  margin-bottom: var(--headline-subline-spacing, 8px); /* Use CSS var or default */
  width: 100%;
  margin-bottom: 5px;
}
.layout-full-color .banner-headline,
.color-block-area .banner-headline {
  font-weight: 600; /* Semibold on color backgrounds */
}


.banner-headline[contenteditable="true"]:focus {
  outline: 1px dashed rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.2);
}

.banner-subline {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px; /* Base, will be scaled by JS */
  font-weight: 400;
  line-height: 1.3;
  max-width: 100%;
  min-height: 1.2em; /* Ensure space even if empty */
}

.banner-subline[contenteditable="true"]:focus {
  outline: 1px dashed rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.2);
}

/* CTA and Flash styles */
.banner-cta {
  display: block; /* Changed from inline-block */
  width: -moz-fit-content; /* Fit to content width */
  width: fit-content;     /* Fit to content width */
  background-color: var(--orange);
  color: white;
  font-size: 14px; /* Base, will be scaled by JS */
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 8px;
  margin-top: 15px;
  align-self: flex-start; /* Align to start of cross-axis if parent is flex */
  min-height: 1.2em;
  max-width: 200px; /* Still useful as an upper limit */
  text-align: center;
  text-decoration: none;
  box-sizing: border-box; /* Ensure padding is included in width calculations */
}

.banner-cta[contenteditable="true"]:focus {
  outline: 1px dashed rgba(255, 255, 255, 0.5);
  background: rgba(243, 112, 33, 0.8);
}

.banner-logo {
  position: absolute;
  top: 25px; /* Adjusted padding */
  left: 30px; /* Adjusted padding */
  z-index: 10;
  background: transparent; 
  padding: 0; 
}

.banner-logo img {
  display: block; 
  max-width: 130px; /* Slightly smaller default */
  max-height: 45px; 
  width: auto; 
  height: auto; 
}
/* Example: Specific logo size for a smaller banner */
#preview-item-banner-instagramStory .banner-logo img,
#preview-item-banner-mobile-300x50 .banner-logo img { /* Assuming a mobile banner format */
  max-width: 60px;
  max-height: 20px;
}


.banner-flash {
  position: absolute;
  width: 100px; /* Base, will be scaled by JS */
  height: 100px; /* Base, will be scaled by JS */
  padding: 5px; /* Adjust padding for text */
  box-sizing: border-box;
  border-radius: 50%;
  background-color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 14px; /* Base, will be scaled by JS */
  transform: rotate(10deg);
  text-align: center;
  z-index: 10;
  cursor: grab; 
}

.banner-flash:active {
  cursor: grabbing; 
}

.banner-flash-top-right { top: 10px; right: 10px; }
.banner-flash-top-left { top: 10px; left: 10px; }
.banner-flash-bottom-right { bottom: 10px; right: 10px; }
.banner-flash-bottom-left { bottom: 10px; left: 10px; }

.banner-flash .flash-content{
  font-weight:500;
  max-width:75%;
}


.banner-flash[contenteditable="true"]:focus {
  outline: 1px dashed rgba(255, 255, 255, 0.5);
  background: rgba(243, 112, 33, 0.8);
}

/* Flash positioning control */
.flash-positions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.flash-position-option {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.flash-position-option:hover {
  background-color: #f0f5ff;
}

.flash-position-option.selected {
  background-color: var(--brand-blue);
  color: white;
  border-color: var(--brand-blue);
}

/* Headline/Subline options */
.headline-options, 
.subline-options {
  margin-top: 15px;
}

.text-options {
  margin-top: 10px;
}

.text-option {
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.text-option:hover {
  background-color: #f0f5ff;
}

.text-option.selected {
  border-color: var(--brand-blue);
  background-color: #f0f7ff;
}

.text-option-content {
  font-weight: 600;
  margin-bottom: 4px;
}

.text-option-rationale {
  font-size: 12px;
  color: #666;
}

/* AI suggestions */
.ai-suggestions-container {
  margin-top: 15px;
  padding: 12px;
  background-color: #f0f7ff;
  border-radius: 8px;
  border-left: 3px solid var(--brand-blue);
}

.ai-suggestions-title {
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--brand-blue);
}

.ai-suggestion-item {
  margin-bottom: 8px;
  font-size: 14px;
}

.ai-suggestion-label {
  font-weight: 600;
  margin-right: 5px;
}

/* Success/Error messages */
.success-message, 
.error-message {
  margin: 15px 0;
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  width: 100%;
}

.success-message {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.error-message {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Style image container */
.styled-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.styled-image {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Reference image */
.reference-image {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 4px;
  margin-top: 10px;
  border: 1px solid var(--border-color);
}

/* Reference images preview */
.reference-images-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  min-height: 100px;
  max-height: 200px;
  overflow-y: auto;
}

/* Styles moved from index.html and not found in shared.css or existing banner.css */

.api-key-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
  align-items: center;
  justify-content: center;
}

.api-key-modal.active {
  display: flex;
}

.api-key-modal .modal-content { /* Scoped to API key modal */
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px; /* Specific max-width for this modal */
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.api-key-input {
  margin-bottom: 16px;
}

.api-key-input label {
  display: block;
  margin-bottom: 6px;
}

.api-key-input input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: monospace;
}

.ai-controls {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 12px;
  margin-top: 15px;
}

.full-width {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}
  
.description-text {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}
  
.loading-container {
  margin: 20px 0;
  display: none;
}
  
.result-container {
  margin: 20px 0;
  display: none;
}
  
.preview-image {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
  
/* Specific button group styling for modals */
.image-generation-modal .modal-content .button-group {
    justify-content: flex-end;
}
  
.action-button { /* This was in index.html, seems unused or very specific */
  display: none;
}

/* Specific loading indicator styling for column layout */
.ai-thinking .loading-indicator,
#styleProcessingIndicator .loading-indicator,
#generatingIndicator .loading-indicator {
  flex-direction: column;
  align-items: center; 
}

/* Ensure loading dots within these specific indicators are centered */
.ai-thinking .loading-dots,
#styleProcessingIndicator .loading-dots,
#generatingIndicator .loading-dots {
    justify-content: center;
}

.style-processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  text-align: center;
}


.banner-social-story-9x16 .banner-headline{
  font-size: 50px !important; /* Adjusted for story format */
}

.banner-social-story-9x16 .banner-subline{
  font-size: 20px !important; /* Adjusted for story format */
}

.banner-social-story-9x16 .banner-cta{
  font-size: 20px !important; /* Adjusted for story format */
}

.banner-display-banner-300x250 .banner-color-block-bottom{
  padding:20px 0 !important;
}

.banner-social-story-9x16.layout-right-block .banner-headline{
  font-size: 35px !important; /* Adjusted for story format */
}


.banner-social-linkedin-1x1 .banner-logo{
  top:30px;
  left:30px;
}

.banner-social-linkedin-1x1 .banner-headline,.banner-social-instagram-4x5 .banner-headline{
  font-size: 38px !important; /* Adjusted for story format */
}

.banner-social-linkedin-1x1 .banner-subline,.banner-social-instagram-4x5 .banner-subline{ 
  font-size: 18px !important; /* Adjusted for story format */
}
.banner-social-linkedin-1x1 .banner-cta,.banner-social-instagram-4x5 .banner-cta{
  font-size: 18px !important; /* Adjusted for story format */
}


.banner-website-hero-16x9.layout-right-block .banner-headline,.banner-website-hero-16x9.layout-left-block .banner-headline{
  font-size: 50px !important; /* Adjusted for story format */
}

.banner-website-hero-16x9.layout-right-block .banner-subline,.banner-website-hero-16x9.layout-left-block .banner-subline{
  font-size: 20px !important; /* Adjusted for story format */
}

.banner-website-hero-16x9.layout-right-block .banner-cta,.banner-website-hero-16x9.layout-left-block .banner-cta{
  font-size: 20px !important; /* Adjusted for story format */
}

.banner-newsletter-hero.layout-right-block .banner-headline,.banner-newsletter-hero.layout-left-block .banner-headline{
  font-size: 35px !important; /* Adjusted for story format */
}

.banner-newsletter-hero.layout-right-block .banner-subline,.banner-newsletter-hero.layout-left-block .banner-subline{
  font-size: 18px !important; /* Adjusted for story format */
}

.banner-newsletter-hero.layout-right-block .banner-cta,.banner-newsletter-hero.layout-left-block .banner-cta{
  font-size: 18px !important; /* Adjusted for story format */
}

.banner-display-banner-300x250 .banner-logo{
  top:15px;
  left:15px;
}

.banner-display-banner-300x250 .banner-cta{
  margin-top:10px;
}

.banner-display-banner-300x250 .sponsor-logos-container{
  bottom:15px;
  right:15px;
}

.banner-display-banner-300x250 .sponsor-logos-container img{
 max-height:25px;
}


.banner-display-banner-300x250 .banner-logo img{
  width:70px;
}

.banner-display-banner-300x250  .banner-flash{
  width:68px !important;
  height:68px !important;
}

.banner-newsletter-hero .banner-flash{
  width:107px !important;
  height:107px !important;
}

.banner-newsletter-hero .sponsor-logos-container{
  right:3%;
  bottom:5%;
}

/* Basic styling for the server assets modal */
.server-assets-list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #eee;
  padding: 10px;
}
.server-asset-item {
  padding: 8px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.server-asset-item:hover {
  background-color: #f9f9f9;
}
.server-asset-item:last-child {
  border-bottom: none;
}
.server-asset-item .asset-type {
  font-size: 0.8em;
  color: #777;
  background-color: #eee;
  padding: 2px 6px;
  border-radius: 3px;
}

/* Enhanced Server Assets Modal Styling */
#serverAssetsModal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1050; /* Ensure it's above other content */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll if needed, though content should scroll */
  background-color: rgba(0,0,0,0.6); /* Darker semi-transparent background */
  align-items: center; /* For flex centering */
  justify-content: center; /* For flex centering */
}

#serverAssetsModal.active {
  display: flex; /* Use flex to center content */
}

#serverAssetsModal .modal-content {
  background-color: #fff;
  margin: auto; /* Fallback for non-flex centering, works with flex too */
  padding: 25px;
  border: 1px solid #888;
  width: 80%;
  max-width: 700px; /* Max width of the modal */
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  position: relative; /* For close button positioning */
  max-height: 85vh; /* Max height */
  display: flex;
  flex-direction: column;
}

#serverAssetsModal .modal-content h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.5em;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

#serverAssetsModal .close-btn {
  color: #aaa;
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

#serverAssetsModal .close-btn:hover,
#serverAssetsModal .close-btn:focus {
  color: #333;
  text-decoration: none;
}

.server-assets-list {
  max-height: calc(85vh - 150px); /* Adjust based on padding and h2 height */
  overflow-y: auto;
  border: 1px solid #ddd; /* Lighter border */
  padding: 0; /* Remove padding, items will have it */
  border-radius: 4px;
  background-color: #fdfdfd;
}

.server-asset-item {
  padding: 12px 15px; /* Increased padding */
  cursor: pointer;
  border-bottom: 1px solid #eee; /* Lighter border */
  display: flex;
  align-items: center; /* Vertically align items */
  gap: 15px; /* Space between thumbnail and text */
  transition: background-color 0.2s ease;
}

.server-asset-item:hover {
  background-color: #f0f5ff; /* Consistent hover */
}

.server-asset-item:last-child {
  border-bottom: none;
}

.server-asset-item .asset-thumbnail {
  width: 60px;
  height: 60px;
  background-color: #e9ecef; /* Placeholder bg */
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Clip image */
  flex-shrink: 0; /* Prevent shrinking */
  border: 1px solid #ddd;
}

.server-asset-item .asset-thumbnail img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
}

.server-asset-item .asset-thumbnail .video-icon {
  font-size: 24px; /* Simple text icon for video */
  color: #6c757d;
}


.server-asset-item .asset-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Allow info to take remaining space */
  overflow: hidden; /* Prevent long names from breaking layout */
}

.server-asset-item .asset-name {
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Add ellipsis for long names */
}

.server-asset-item .asset-type {
  font-size: 0.8em;
  color: #555; /* Darker for better readability */
  background-color: #e9ecef; /* Slightly different bg */
  padding: 3px 8px; /* Adjusted padding */
  border-radius: 3px;
  margin-top: 4px;
  align-self: flex-start; /* Keep it with the text */
}

#expansionControlsContainer{
  background-color: var(--brand-blue);
  border-radius:8px;
}

#videoTransformStatusArea{
  background-color: white;;
}