/* Shared visual treatment for image upload entry points. */
.site-image-upload {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  height: 116px !important;
  min-height: 116px !important;
  flex: 0 0 100px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #f4f5f7 !important;
  color: #718095 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  transform: none !important;
  cursor: pointer !important;
}

.site-image-upload:hover {
  background: #eff1f4 !important;
  color: #62748b !important;
}

.site-image-upload .upload-badge {
  position: absolute !important;
  z-index: 2;
  top: 7px !important;
  left: 8px !important;
  margin: 0 !important;
  padding: 3px 8px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #8291a5 !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

.site-image-upload .upload-plus {
  display: block !important;
  margin: 0 !important;
  color: #a6b1bf !important;
  font-size: 31px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
}

.site-image-upload .upload-label {
  display: block !important;
  max-width: calc(100% - 12px);
  margin: 0 !important;
  color: inherit !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

.site-image-upload input[type="file"] {
  display: none !important;
}

/* Keep the chat composer compact while matching the shared card proportions. */
.reference-upload-add.site-image-upload {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 68px !important;
  min-height: 68px !important;
  flex-basis: 58px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 13px !important;
}

.reference-upload-add.site-image-upload .upload-badge {
  top: 5px !important;
  left: 6px !important;
  padding: 2px 6px !important;
  font-size: 9px !important;
}

.reference-upload-add.site-image-upload .upload-plus {
  font-size: 22px !important;
}

.reference-upload-add.site-image-upload .upload-label {
  font-size: 10px !important;
}

.composer-upload.site-image-upload {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  height: 116px !important;
  min-height: 116px !important;
  flex-basis: 100px !important;
}

.composer-upload.site-image-upload img.preview {
  z-index: 1;
  transform: none !important;
}

.detail-upload-add.site-image-upload {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  height: 116px !important;
  min-height: 116px !important;
  flex-basis: 100px !important;
  margin: 3px 0 0 7px;
}

.asset-tile.site-image-upload .asset-limit {
  color: #8291a5 !important;
  font-size: 10px !important;
}

.asset-tile.site-image-upload .tile-name {
  z-index: 2;
}

.asset-grid:has(.site-image-upload) .site-image-upload {
  margin: 0;
}

.material-library.source-menu {
  width: min(300px, calc(100vw - 32px));
  height: auto;
  max-height: none;
  padding: 8px;
  border-radius: 18px;
}

.reference-source-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.reference-source-options button {
  min-width: 0;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid #e8ebf0;
  border-radius: 14px;
  background: #fff;
  color: #263347;
  cursor: pointer;
}

.reference-source-options button:hover {
  border-color: #b9d2ff;
  background: #f5f8ff;
}

.reference-source-options button.active,
.reference-source-options button[aria-pressed="true"] {
  border-color: #075bea;
  background: #075bea;
  color: #fff;
  box-shadow: 0 4px 12px #075bea30;
}

.reference-source-options img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.reference-source-options strong {
  font-size: 12px;
}

.material-library-back {
  width: 26px;
  height: 28px;
  flex: 0 0 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #f2f4f7;
  color: #69778a;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.reference-source-empty {
  padding: 24px 14px;
  border-radius: 13px;
  background: #f5f6f8;
  color: #7e8999;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.works-reference-grid .material-library-card {
  cursor: pointer;
}

.works-reference-grid .material-library-card > span {
  opacity: 1;
}
.works-reference-grid .material-library-card video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 92px;
  object-fit: cover;
  border-radius: 11px;
  background: #17191d;
}
.works-reference-grid .work-audio-icon {
  min-height: 92px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #edf2fb;
  color: #526985;
  font-size: 32px;
}
.official-media-grid .official-media-card {
  display: flex;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
  padding: 7px;
  border: 1px solid #e8e9ef;
  border-radius: 13px;
  background: #f7f8fa;
}
.official-video-preview { position: relative; display: block; min-height: 82px; flex: 1 1 auto; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 9px; background: #111827; }
.official-media-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
  background: #111827;
}
.official-media-card strong,
.official-media-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.official-media-card strong { font-size: 11px; }
.official-media-card small { color: #8290a3; font-size: 9px; }
.official-media-card button {
  min-height: 28px;
  border: 0;
  border-radius: 8px;
  background: #075bea;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
}
.official-media-grid .official-audio-card {
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: auto;
  align-self: flex-start;
  padding: 12px 10px;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #fff 0%, #f7f9fd 100%);
}
.official-audio-play {
  position: relative;
  display: grid;
  width: 76px;
  min-height: 0 !important;
  height: 76px;
  flex: 0 0 76px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--audio-accent, #3478c8) 13%, white) !important;
  color: var(--audio-accent, #3478c8) !important;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.official-audio-play:hover { transform: translateY(-2px); box-shadow: 0 7px 18px color-mix(in srgb, var(--audio-accent, #3478c8) 22%, transparent); }
.official-audio-play .work-audio-icon {
  display: grid;
  width: 58px;
  min-height: 0;
  height: 58px;
  flex: 0 0 58px;
  place-items: center;
  border-radius: 50%;
  background: var(--audio-accent, #3478c8);
  color: #fff;
  font-size: 29px;
  line-height: 1;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--audio-accent, #3478c8) 25%, transparent);
}
.official-audio-play-state { position: absolute; right: -1px; bottom: 1px; display: grid; width: 23px; height: 23px; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #17243a; color: #fff; font-size: 8px; font-weight: 700; }
.official-audio-card.is-playing .official-audio-play .work-audio-icon { animation: official-audio-pulse 1.2s ease-in-out infinite; }
@keyframes official-audio-pulse { 50% { transform: scale(.92); } }
.official-media-grid .official-audio-card .official-audio-name { width: 100%; color: #17243a; font-size: 14px; font-weight: 750; line-height: 1.25; text-align: center; }
.official-media-grid .official-audio-card small { max-width: 100%; color: #8290a3; font-size: 10px; text-align: center; }
.official-media-grid .official-audio-card > button[data-material-media-url] { width: 100%; min-height: 30px; margin-top: auto; }
.official-audio-card audio[hidden] { display: none; }
.asset-card video,
.asset-card .asset-audio-preview {
  display: grid;
  width: 100%;
  aspect-ratio: 1 / 1;
  place-items: center;
  object-fit: contain;
  background: #eef2f7;
  color: #62748b;
  font-size: 38px;
}
.asset-card video {
  background: #111827;
}

@media (max-width: 760px) {
  .site-image-upload:not(.reference-upload-add) {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    height: 102px !important;
    min-height: 102px !important;
    flex-basis: 88px !important;
  }
}
/* Empty upload cards use a dashed outline across image, video and audio inputs. */
.site-image-upload{border:1px dashed #d5dce7!important}.site-image-upload:has(img.preview),.site-image-upload:has(img.preview-image),.site-image-upload.has-upload{border-style:solid!important;border-color:#d5dce7!important}.site-image-upload:hover{border-color:#a9c6ff!important}.style-guide-upload-examples{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}.style-guide-upload{box-sizing:border-box;border:1px dashed #d5dce7;background:#f4f5f7}.asset-tile{border:1px dashed #d5dce7!important}.media-reference-tile.has-media{border-style:solid!important;border-color:#cfe4c0!important}


.reference-source-options.has-online-link { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.video-link-row.is-link-entry { outline: 2px solid #075bea; outline-offset: 2px; border-radius: 14px; }
.video-link-row[hidden]{display:none!important}
.video-link-row.online-video-link-overlay{position:fixed;z-index:1200;left:50%;top:38%;transform:translate(-50%,-50%);box-sizing:border-box;width:min(520px,calc(100vw - 32px));margin:0;padding:9px 42px 9px 10px;border:1px solid #dbe5f3;border-radius:15px;background:#fff;box-shadow:0 18px 60px #15243c38}
.video-link-row.online-video-link-overlay input{height:36px;padding:0 8px;border:0;background:transparent;font-size:12px}
.video-link-row.online-video-link-overlay select{height:34px;padding:0 8px;border:1px solid #e4eaf2;border-radius:9px;background:#fff;font-size:12px}
.video-link-row.online-video-link-overlay [data-add-media]{height:34px;flex:none;padding:0 14px;border-radius:10px}
.video-link-row.online-video-link-overlay .video-link-close{position:absolute;right:8px;top:50%;width:27px;height:27px;padding:0;transform:translateY(-50%);border:0;border-radius:50%;background:#f1f4f8;color:#64748b;font-size:20px;line-height:1}
body.dark-theme .video-link-row.online-video-link-overlay{background:#1a2638;border-color:#35465d;box-shadow:0 18px 60px #0009}
body.dark-theme .video-link-row.online-video-link-overlay select{background:#111c2c;color:#e5edf8;border-color:#35465d}
body.dark-theme .video-link-row.online-video-link-overlay .video-link-close{background:#26364d;color:#c4d1e2}
[data-media-status]:empty{display:none}

.official-video-cover { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 9px; background: #111827; }
.official-video-source { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }