<!-- IzyPost | Main Version: 316 / Correcting Preview Card -->
<!-- IzyPost | Main Version: 315 / Continue Intro Design Card -->
<!-- IzyPost | Main Version: 314 / Unified Intro Design And Live Preview -->
<!-- IzyPost | Main Version: 313 / changing Editor Layout -->
<!-- IzyPost | Main Version: 312 / Final Unified Media Preview Workspace -->
<!-- IzyPost | Main Version: 311 / Locked Media Preview Card Graphics -->
<!-- IzyPost | Main Version: 310 / Media Preview Corrections -->
<!-- IzyPost | Main Version: 309 / Fixed Square Editor Preview Stage -->
<!-- IzyPost | Main Version: 308 / Fixed Square Media Preview Stage -->
<!-- IzyPost | Main Version: 307 / Compact Preview Player And Quick Audio Controls -->
<!-- IzyPost | Main Version: 306 / Cached Interactive Media Preview -->
<!-- IzyPost | Main Version: 305 / Gain 200 And Seekable Media Preview -->
<!-- IzyPost | Main Version: 304 / Audio Mixer Inside Media Section Preview -->
<!-- IzyPost | Main Version: 303 / Responsive Four Source Audio Mixer -->
<!-- IzyPost | Main Version: 302 / Video Slot Minimum Time Only -->
<!-- IzyPost | Main Version: 301 / Template Minimum Video Duration Guidance -->
<!-- IzyPost | Main Version: 300 / Global Language Button On Every Card -->
<!-- IzyPost | Main Version: 299 / Absolute Last Selected AI Voice -->
<!-- IzyPost | Main Version: 298 / Reset And New Project Action -->
<!-- IzyPost | Main Version: 297 / Selectable Speech Entrance Effects -->
<!-- IzyPost | Main Version: 296 / Stable Toolbar And Music Label Row -->
<!-- IzyPost | Main Version: 295 / Separate Media Preview Row -->
<!-- IzyPost | Main Version: 294 / Independent Sequence Live Preview -->
<!-- IzyPost | Main Version: 293 / Full Timeline Live Preview -->
<!-- IzyPost | Main Version: 292 / Manual Media Time And Live Remaining Time -->
<!-- IzyPost | Main Version: 291 / Speech Reading Time Limits -->
<!-- IzyPost | Main Version: 290 / MOV Template Thumbnail -->
<!-- IzyPost | Main Version: 289 / Stable Local Video Thumbnail -->
<!-- IzyPost | Main Version: 288 / AI Fixed Voice  -->
<!-- IzyPost | Main Version: 287 / Independent Mobile Workspace Layout -->
<!-- IzyPost | Main Version: 286 / Integrated Logo Action Buttons -->
<!-- IzyPost | Main Version: 285 / Separate Fill And Text Color Counts -->
<!-- IzyPost | Main Version: 284 / Four By Four Text Colors -->
<!-- IzyPost | Main Version: 283 / Right Aligned Background Buttons -->
<!-- IzyPost | Main Version: 282 / Balanced Logo Text Color Circles -->
<!-- IzyPost | Main Version: 281 / Unified Logo Text Style Panel -->
<!-- IzyPost | Main Version: 280 / Video Album Multi Delete -->
<!-- IzyPost | Main Version: 279 / Video Album Multi Delete -->
<!-- IzyPost | Main Version: 278 / Independent Video Album Card -->
<!-- IzyPost | Main Version: 277 / Timeline Video Album Access -->
<!-- IzyPost | Main Version: 276 / Adaptive Timeline Music Actions -->
<!-- IzyPost | Main Version: 275 / Direct Grid Video Preview And Selection -->
<!-- IzyPost | Main Version: 274 / Ordered Timeline Header Controls -->
<!-- IzyPost | Main Version: 273 / Correct Template Media Type Confirmation -->
<!-- IzyPost | Main Version: 272 / Template Messages -->
<!-- IzyPost | Main Version: 271 / Typed Non Clickable Template Slots -->
<!-- IzyPost | Main Version: 270 / Complete Timeline Template Slots -->
<!-- IzyPost | Main Version: 269 / Compact Template Buttons -->
<!-- IzyPost | Main Version: 268 / Working Template Manager -->
<!-- IzyPost | Main Version: 267 / Local Design Templates V1 -->
<!-- IzyPost | Main Version: 266 / Half Second Speech Gap -->
<!-- IzyPost | Main Version: 265 / Professional Sequential Speech Insertion -->
<!-- IzyPost | Main Version: 264 / Single Speech Voice Playback Lock -->
<!-- IzyPost | Main Version: 263 / Trim Save Visual Confirmation -->
<!-- IzyPost | Main Version: 262 / Compact Left Editor Rows -->
<!-- IzyPost | Main Version: 261 / Compact Bilingual Video Duration Message -->
<!-- IzyPost | Main Version: 260 / Inline Music Status Between Actions -->
<!-- IzyPost | Main Version: 259 / Independent Background Music Track -->
<!-- IzyPost | Main Version: 258 / Stable Music Engine Bridge -->
<!-- IzyPost | Main Version: 257 / Timeline Video Original Audio Playback -->
<!-- IzyPost | Main Version: 256 / Stable Right Column Trim Row -->
<!-- IzyPost | Main Version: 255 / Independent Preview And Trim Column -->
<!-- IzyPost | Main Version: 254 / Video Only Trim Workspace -->
<!-- IzyPost | Main Version: 253 / Save And Close Directly Below Speech -->
<!-- IzyPost | Main Version: 252 / Timeline Media Opening Recovery -->
<!-- IzyPost | Main Version: 251 / Compact Trim Workspace And Speech Footer -->
<!-- IzyPost | Main Version: 250 / Trim Corrections -->
<!-- IzyPost | Main Version: 249 / Automatic Speech And Media Duration Growth — Replaced By Version 292 Manual Media Timing -->
<!-- IzyPost | Main Version: 248 / Connected Intro Text Color Controls -->
<!-- IzyPost | Main Version: 247 / Full Width Intro Layout Cards -->
<!-- IzyPost | Main Version: 246 / Locked Single Row Intro Workspace -->
<!-- IzyPost | Main Version: 245 / Three Column Intro Design Workspace -->
<!-- IzyPost | Main Version: 244 / Compact Intro Layout And Frame Workspace -->
<!-- IzyPost | Main Version: 243 / Live Intro Preview Cover Update -->
<!-- IzyPost | Main Version: 242 / Intro Preview Cover Image Controls -->
<!-- IzyPost | Main Version: 241 / Compact Intro Design Workspace -->
<!-- IzyPost | Main Version: 240 / Compact Outro Duration And Information Access -->
<!-- IzyPost | Main Version: 239 / Outro Display Specificity Fix -->
<!-- IzyPost | Main Version: 238 / Borderless Outro Information Display -->
<!-- IzyPost | Main Version: 237 / Clear Read Only Outro Information -->
<!-- IzyPost | Main Version: 236 / Automatic Default Form Text Clearing -->
<!-- IzyPost | Main Version: 235 / Anti Elevator Free Media Actions -->
<!-- IzyPost | Main Version: 234 / Compact Free Media Card Actions -->
<!-- IzyPost | Main Version: 233 / Compact Percentage Music Card -->
<!-- IzyPost | Main Version: 232 / Main Footer Inside Timeline Workspace -->
<!-- IzyPost | Main Version: 231 / Centered Timeline Actions Above Sequences -->
<!-- IzyPost | Main Version: 230 / Timeline Reset Keeps Workspace Visible -->
<!-- IzyPost | Main Version: 229 / Two Line Stable Total Time Card -->
<!-- IzyPost | Main Version: 228 / Total time Font Size -->
<!-- IzyPost | Main Version: 227 / Total time changes --> 
<!-- IzyPost | Main Version: 226 / Localized And Enlarged Workspace Buttons -->
<!-- IzyPost | Main Version: 225 / Highlighted Total Time Inside Motion Control -->
<!-- IzyPost | Main Version: 224 / Motion Speed Inside Workspace Menu -->
<!-- IzyPost | Main Version: 223 / Direct Header Output Ratio Selector -->
<!-- IzyPost | Main Version: 222 / Clean Free Media Start And Working Language Control -->
<!-- IzyPost | Main Version: 221 / Branded Timeline Workspace Header -->
<!-- IzyPost | Main Version: 220 / Exclusive Active Card Workspace -->
<!-- IzyPost | Main Version: 219 / Timeline Central Workspace -->
<!-- IzyPost | Main Version: 218 / Visible Active Motion Speed -->
<!-- IzyPost | Main Version: 217 / Direct Timeline Motion Speed Control -->
<!-- IzyPost | Main Version: 216 / Logo Background Selection Confirmation -->
<!-- IzyPost | Main Version: 215 / Direct Logo Background Selection Without Preview -->
<!-- IzyPost | Main Version: 214 / Direct Free Photo Selection Without Preview -->
<!-- IzyPost | Main Version: 213 / Free Media Default Search And Responsive Preview -->
<!-- IzyPost | Main Version: 212 / Automatic Timeline After Media Selection -->
<!-- IzyPost | Main Version: 211 / Horizontal Percentage Music Card -->
<!-- IzyPost | Main Version: 210 / Horizontal Percentage Timeline Editor -->
<!-- IzyPost | Main Version: 209 / Complete Direct Timeline Controls -->
<!-- IzyPost | Main Version: 208 / Direct Timeline Media Controls -->
<!-- IzyPost | Main Version: 207 / Horizontal Percentage Timeline Card -->
<!-- IzyPost | Main Version: 206 / Horizontal Percentage Outro Card -->
<!-- IzyPost | Main Version: 205 / Horizontal Percentage Intro Preview Card -->
<!-- IzyPost | Main Version: 204 / Horizontal Percentage Intro Card -->
<!-- IzyPost | Main Version: 203 / Horizontal Percentage Free Media Card -->
<!-- IzyPost | Main Version: 202 / Horizontal Percentage Output Size Card -->
<!-- IzyPost | Main Version: 201 / Horizontal Percentage Logo Background Card -->
<!-- IzyPost | Main Version: 200 / Percentage Responsive Logo Maker And Persistent Design -->
<!-- IzyPost | Main Version: 199 / Horizontal 2026 Logo Maker -->
<!-- IzyPost | Main Version: 198 / Information Fields Vertical Layout -->
<!-- IzyPost | Main Version: 197 / Information Button Design System -->
<!-- IzyPost | Main Version: 196 / Horizontal 2026 Information Card -->
<!-- IzyPost | Main Version: 195 / Integrated 2026 Dashboard -->
<!-- IzyPost | Main Version: 194 / Invisible Main Forwarding -->
<!-- IzyPost | Main Version: 193 / Start 2026 Navigation Bridge -->
<!-- IzyPost | Main Version: 192 / Intro Outro Overlay Timing Sync -->
<!-- IzyPost | Main Version: 191 / Timeline Duration Live Sync -->
<!-- IzyPost | Main Version: 190 / Saved Crop View And Mobile Tap Control -->
<!-- IzyPost | Main Version: 189 / Persistent Timeline Crop Fix -->
<!-- IzyPost | Main Version: 188 / Clean Timeline Editor Footer -->
<!-- IzyPost | Main Version: 187 / Numbered Speech Voice Source -->
<!-- IzyPost | Main Version: 186 / Connected Speech Editing Group -->
<!-- IzyPost | Main Version: 185 / One Line Speech Timing Summary -->
<!-- IzyPost | Main Version: 184 / Speech Editor Order And Duration Highlight -->
<!-- IzyPost | Main Version: 183 / Media Duration Above Timeline Preview -->
<!-- IzyPost | Main Version: 182 / Remove Selected Music -->
<!-- IzyPost | Main Version: 181 / Stop Music Preview On Card Close -->
<!-- IzyPost | Main Version: 180 / Intro Outro Duration Inside Own Cards -->
<!-- IzyPost | Main Version: 179 / Intro Outro Timeline Card Controls -->
<!-- IzyPost | Main Version: 178 / Four Column Clean Timeline -->
<!-- IzyPost | Main Version: 177 / Audio Source Function Syntax Fix -->
<!-- IzyPost | Main Version: 176 / Uploaded Voice Preview Close Fix -->
<!-- IzyPost | Main Version: 175 / AI And Uploaded Voice Only -->
<!-- IzyPost | Main Version: 174 / Absolute Speech Audio Timeline -->
<!-- IzyPost | Main Version: 173 / Clean Timed Speech Voice Stage 05 -->
<!-- IzyPost | Main Version: 172 / Clean Timed Visual Speech Stage 04 -->
<!-- IzyPost | Main Version: 171 / Clean Motion And Transition Stage 03 -->
<!-- IzyPost | Main Version: 170 / Clean Intro And Outro Stage 02 -->
<!-- IzyPost | Main Version: 169 / Clean Media Core Stage 01 -->
<!-- IzyPost | Main Version: 168 / Mobile Local Video Memory Fix -->
<!-- IzyPost | Main Version: 167 / Adjustable Media And Speech Timeline -->
<!-- IzyPost | Main Version: 166 / Visual Speech Timeline And Direct Media Delete -->
<!-- IzyPost | Main Version: 165 / Fixed Speech Preview Position -->
<!-- IzyPost | Main Version: 164 / Simple Immediate Video Cancel -->
<!-- IzyPost | Main Version: 163 / Complete Inner White Logo Border -->
<!-- IzyPost | Main Version: 162 / Raised White Logo Border -->
<!-- IzyPost | Main Version: 161 / Intro Logo Correction -->
<!-- IzyPost | Main Version: 160 / Permanent Video Library -->
<!-- IzyPost | Main Version: 159 / Compact Intro Preview Size Controls -->
<!-- IzyPost | Main Version: 158 / Live Intro Element Size Controls -->
<!-- IzyPost | Main Version: 157 / Live Intro Frame Color Preview -->
<!-- IzyPost | Main Version: 156 / All Independent Cards System -->
<!-- IzyPost | Main Version: 155 / Independent Logo Maker Card -->
<!-- IzyPost | Main Version: 154 / Independent Free Media Card -->
<!-- IzyPost | Main Version: 153 / Stop Automatic Timeline Opening -->
<!-- IzyPost | Main Version: 152 / Overlay Layer Recovery -->
<!-- IzyPost | Main Version: 151 / Intro Preview Code Recovery -->
<!-- IzyPost | Main Version: 150 / Independent Intro Preview Card -->
<!-- IzyPost | Main Version: 149 / Independent Intro Card -->
<!-- IzyPost | Main Version: 148 / Compact Edit Card Footer -->
<!-- IzyPost | Main Version: 147 / Timeline Card Corrections-->
<!-- IzyPost | Main Version: 146 / Creating Album -->
<!-- IzyPost | Main Version: 145 / External Voice Label And Microphone Recording -->
<!-- IzyPost | Main Version: 144 / Uploaded Voice Duration And AI Controls Fix -->
<!-- IzyPost | Main Version: 143 / Uploaded Speech Voice -->
<!-- IzyPost | Main Version: 142 / Speech Audio Source Selector -->
<!-- IzyPost | Main Version: 141 / Video Build And Result Card -->
<!-- IzyPost | Main Version: 140 / Moving Speech Preview Dock -->
<!-- IzyPost | Main Version: 139 / Compact Bilingual Speech Color Palette -->
<!-- IzyPost | Main Version: 138 / Speech Color Palette With Done Button -->
<!-- IzyPost | Main Version: 137 / Small Corrections -->
<!-- IzyPost | Main Version: 136 / Speech Final UI Completion -->
<!-- IzyPost | Main Version: 135 / Live Speech Preview Size And Position -->
<!-- IzyPost | Main Version: 134 / Photo Speech Add And Editor Contrast Fix -->
<!-- IzyPost | Main Version: 133 / Multiple Speech Timeline Editor -->
<!-- IzyPost | Main Version: 132 / Media Speech List Foundation -->
<!-- IzyPost | Main Version: 131 / Fixed Rainbow Caption Color Button -->
<!-- IzyPost | Main Version: 130 / Rainbow Intro Text Color Buttons -->
<!-- IzyPost | Main Version: 129 / Per Media Caption Color -->
<!-- IzyPost | Main Version: 128 / Duration Based Caption Limit -->
<!-- IzyPost | Main Version: 127 / Intro Text Colors -->
<!-- IzyPost | Main Version: 126 / Live Frame Thickness Preview -->
<!-- IzyPost | Main Version: 125 / Compact Live Intro Layout Preview -->
<!-- IzyPost | Main Version: 124 / Timeline Intro Outro Controls -->
<!-- IzyPost | Main Version: 123 / Responsive Intro Layouts -->
<!-- IzyPost | Main Version: 122 / Intro Layout Selector -->
<!-- IzyPost | Main Version: 121 / Always Visible Timeline -->
<!-- IzyPost | Main Version: 120 / Independent Intro Clear -->
<!-- IzyPost | Main Version: 119 / Main Reset Keeps Timeline -->
<!-- IzyPost | Main Version: 118 / Timeline Output Size Indicator -->
<!-- IzyPost | Main Version: 117 / Timeline Reset Storage Fix -->
<!-- IzyPost | Main Version: 116 / Decimal Outro Duration -->
<!-- IzyPost | Main Version: 115 / Remove Obsolete Platform Time Guard -->
<!-- IzyPost | Main Version: 114 / Timeline Total Duration -->
<!-- IzyPost | Main Version: 113 / Optional Intro Outro -->
<!-- IzyPost | Main Version: 112 / Timeline Duration Controls -->
<!-- IzyPost | Main Version: 111 / Timeline Intro Outro Sequences -->
<!-- IzyPost | Main Version: 110 / Timeline Media Name Duration -->
<!-- IzyPost | Main Version: 109 / Timeline Card Title Subtitle -->
<!-- IzyPost | Main Version: 108 / Timeline Button New Position -->
<!-- IzyPost | Main Version: 107 / Intro Preview Download -->
<!-- IzyPost | Main Version: 106 / Intro Preview Modal Lock -->
<!-- IzyPost | Main Version: 105 / New Cover Image Place -->
<!-- IzyPost | Main Version: 104 / Intro Title & Subtitle Place -->
<!-- IzyPost | Main Version: 103 / Timeline Media Download -->
<!-- IzyPost | Main Version: 102 / Scaled Edit Preview -->
<!-- IzyPost | Main Version: 101 / Timeline Edit Swap Modes -->
<!-- IzyPost | Main Version: 100 / Timeline Swap Move -->
<!-- IzyPost | Main Version: 99 / 30 Media Timeline Grid -->
<!-- IzyPost | Main Version: 98 / Media Loading Percent -->
<!-- IzyPost | Main Version: 97 / Top Opening Cards -->
<!-- IzyPost | Main Version: 96 / Independent Timeline Card -->
<!-- IzyPost | Main Version: 95 / Full Reset Except Information -->
<!-- IzyPost | Main Version: 94 / Re-Crop From Original -->
<!-- IzyPost | Main Version: 93 / IndexedDB Project Recovery -->
<!-- IzyPost | Main Version: 92 / Timeline Crop Thumbnail Sync -->
<!-- IzyPost | Main Version: 91 / Free Selection Card Overlay -->
<!-- IzyPost | Main Version: 90 / Keep Free Selections Across Pages -->
<!-- IzyPost | Main Version: 89 / Free Original To Timeline -->
<!-- IzyPost | Main Version: 88 / Load More Replace Results -->
<!-- IzyPost | Main Version: 87 / Free Media 9 Items -->
<!-- IzyPost | Main Version: 86 / High Quality Free Crop -->
<!-- IzyPost | Main Version: 85 / Free Video Timeline Move -->
<!-- IzyPost | Main Version: 84 / Relative Cards -->
<!-- IzyPost | Main Version: 83 / Dual Timeline Trim Handles -->
<!-- IzyPost | Main Version: 82 / Timeline End Marker Mode -->
<!-- IzyPost | Main Version: 81 / Timeline Video Trim -->
<!-- IzyPost | Main Version: 80 / Default Info Logo Profile -->
<!-- IzyPost | Main Version: 79 / Intro Layout Profile Logo -->
<!-- IzyPost | Main Version: 78 / Information Photo Logo Preview -->
<!-- IzyPost | Main Version: 77 / Profile Photo In Information -->
<!-- IzyPost | Main Version: 76 / Intro Frame Thickness -->
<!-- IzyPost | Main Version: 75 / Intro Frame Option -->
<!-- IzyPost | Main Version: 74 / Equal Main Button Gaps -->
<!-- IzyPost | Main Version: 73 / Intro Save Close Button -->
<!-- IzyPost | Main Version: 72 / Intro Preview Return Fix -->
<!-- IzyPost | Main Version: 71 / Normal Intro Card -->
<!-- IzyPost | Main Version: 70 / Intro Preview Size Sync -->
<!-- IzyPost | Main Version: 69 / Normal Intro Preview Card -->
<!-- IzyPost | Main Version: 68 / Intro Frame Preview -->
<!-- IzyPost | Main Version: 67 / Independent Logo Text Size Control -->
<!-- IzyPost | Main Version: 66 / Logo Text Vertical Control -->
<!-- IzyPost | Main Version: 65 / Raised 3D Logo Depth -->
<!-- IzyPost | Main Version: 64 / Turkish Uppercase Logo Fix -->
<!-- IzyPost | Main Version: 63 / 3D Logo Shape Engine -->
<!-- IzyPost | Main Version: 62 / Logo Background Shortcuts -->
<!-- IzyPost | Main Version: 61 / Logo Background Search -->
<!-- IzyPost | Main Version: 60 / Logo Maker Top Box -->
<!-- IzyPost | Main Version: 59 / Media Preparing Spinner -->
<!-- IzyPost | Main Version: 58 / Real Video Duration Guard -->
<!-- IzyPost | Main Version: 57 / Your Media Mobile Videos -->
<!-- IzyPost | Main Version: 56 / Clear Information Button -->
<!-- IzyPost | Main Version: 55 / Logo Maker Turkish Fix-->
<!-- IzyPost | Main Version: 54 / Raised Logo Border-->
<!-- IzyPost | Main Version: 53 / Logo Download Button-->
<!-- IzyPost | Main Version: 52 / Logo Font Control Desk-->
<!-- IzyPost | Main Version: 51 / More Compact Logo Maker-->
<!-- IzyPost | Main Version: 50 / Logo Color Row + Independent Fit-->
<!-- IzyPost | Main Version: 49 / Logo Text Fit-->
<!-- IzyPost | Main Version: 48 / Compact Text Logo Maker-->
<!-- IzyPost | Main Version: 47 / Text Logo Maker-->
<!-- IzyPost | Main Version: 46 / Footer Gap-->
<!-- IzyPost | Main Version: 45 / Music Dropdown System-->
<!-- IzyPost | Main Version: 44 / Music Update-->
<!-- IzyPost | Main Version: 43 / Free Media Popup-->
<!-- IzyPost | Main Version: 42 / Persistent Information Intro Only-->
<!-- IzyPost | Main Version: 41 / Auto Cache Buster-->
<!-- IzyPost | Main Version: 40 / Localized Default Texts-->
<!-- IzyPost | Main Version: 39 / Root Absolute Paths-->
<!-- IzyPost | Main Version: 38 / Absolute Domain Paths-->
<!-- IzyPost | Main Version: 37 / Video Delete Label-->
<!-- IzyPost | Main Version: 36 / Video Preview Selection-->
<!-- IzyPost | Main Version: 35 / Free Media Videos-->
<!-- IzyPost | Main Version: 34 / Per Slide Voice Gender-->
<!-- IzyPost | Main Version: 33 / Voice Gender-->
<!-- IzyPost | Main Version: 32 / Slide Voice Buttons-->
<!-- IzyPost | Main Version: 31 / Footer Translation-->
<!-- IzyPost | Main Version: 30 / Footer Contact-->
<!-- IzyPost | Main Version: 29 / Horizontal Crop Movement-->
<!-- IzyPost | Main Version: 28 / Cover Frame Color-->
<!-- IzyPost | Main Version: 27 / Intro Cover Preview-->
<!-- IzyPost | Main Version: 26 / Intro Cover Image-->
<!-- IzyPost | Main Version: 25 / Crop in Mobie-->
<!-- IzyPost | Main Version: 24 / Crop in Free-->
<!-- IzyPost | Main Version: 23 / Free Closing-->
<!-- IzyPost | Main Version: 22 / Touch & Move-->
<!-- IzyPost | Main Version: 21 / Preview Corrections-->
<!-- IzyPost | Main Version: 20 / New Structure-->
<!-- IzyPost | Main Version: 19 / Back to Free Selection-->
<!-- IzyPost | Main Version: 18 / Working Time Line-->
<!-- IzyPost | Main Version: 17 / Music-->
<!-- IzyPost | Main Version: 16 / Fixing Outro-->
<!-- IzyPost | Main Version: 15 / Reset + Small Changes-->
<!-- IzyPost | Main Version: 14 / Transactions-->
<!-- IzyPost | Main Version: 13 / Timing-->
<!-- IzyPost | Main Version: 12 / Move Photos-->
<!-- IzyPost | Main Version: 11 / Free Photos-->
<!-- IzyPost | Main Version: 10 / New Icons-->
<!-- IzyPost | Main Version: 09 / More Options-->
<!-- IzyPost | Main Version: 08 / New Layout-->
<!-- IzyPost | Main Version: 07 / 2 Columns-->
<!-- IzyPost | Main Version: 06 / Information-->
<!-- IzyPost | Main Version: 05 / Design Corrections-->
<!-- IzyPost | Main Version: 04 / One Box-->
<!-- IzyPost | Main Version: 03 / Size & Crop -->
<!-- IzyPost | Main Version: 02 / Sngine Seperation -->
<!-- IzyPost | Main Version: 01 / Start -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google" content="notranslate">
<meta http-equiv="Content-Language" content="en">

<title>IzyPost - Main</title>

<style>

/* ***** 01 - BASE ***** */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255,138,0,.22), transparent 34%),
    radial-gradient(circle at bottom right, rgba(21,101,192,.24), transparent 36%),
    linear-gradient(135deg, #0f2f5f 0%, #1565c0 42%, #ff8a00 100%);
  color: #ffffff;
  text-align: center;
  padding: 26px 14px;
  min-height: 100vh;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* ***** 02 - MAIN CARD ***** */
.box {
  width: 94%;
  max-width: 520px;
  margin: 0 auto;
  background: rgba(255,255,255,.94);
  color: #1f2937;
  border-radius: 28px;
  padding: 24px 20px 28px;
  box-shadow:
    0 34px 80px rgba(0,0,0,.34),
    0 12px 28px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
}

/* ***** 03 - BRAND AREA ***** */
.logo {
  width: 100px;
  height: auto;
  display: block;
  margin: -5px auto 2px auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

/* ***** 03A - LANGUAGE BUTTON ***** */
.lang {
  position: relative;
  top: auto;
  left: auto;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width:
    clamp(68px, 8vw, 92px);

  min-height:
    clamp(40px, 4.3vw, 50px);

  margin: 0;
  padding:
    clamp(7px, .9vw, 11px);

  border:
    1px solid rgba(116,178,255,.24);

  border-radius:
    clamp(10px, 1.2vw, 14px);

  background:
    linear-gradient(
      135deg,
      rgba(48,145,255,.14),
      rgba(84,81,255,.10)
    );

  color: #b9d9ff;

  font-size:
    clamp(11px, 1.15vw, 14px);

  font-weight: 900;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);

  cursor: pointer;
  user-select: none;
}

/* ***** GLOBAL CARD LANGUAGE CONTROL ***** */

.ip-language-card-host {
  position: relative !important;
}

.ip-card-language-btn {
  position: absolute;
  top:
    clamp(10px, 1.4vw, 18px);
  right:
    clamp(10px, 1.4vw, 18px);

  z-index: 50;

  display: flex;
  align-items: center;
  justify-content: center;

  width: auto;
  min-width:
    clamp(48px, 5vw, 62px);

  min-height:
    clamp(38px, 4vw, 48px);

  margin: 0;
  padding:
    clamp(6px, .8vw, 10px)
    clamp(9px, 1.1vw, 14px);

  border:
    1px solid rgba(145,196,255,.35);

  border-radius:
    clamp(10px, 1.2vw, 14px);

  background:
    linear-gradient(
      135deg,
      rgba(23,61,108,.96),
      rgba(40,92,158,.96) 55%,
      rgba(32,45,112,.96)
    );

  color: #ffffff;

  font-size:
    clamp(11px, 1.1vw, 14px);

  font-weight: 900;
  line-height: 1;

  white-space: nowrap;

  box-shadow:
    0 8px 18px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.14);

  cursor: pointer;
}

.ip-card-language-btn:active {
  transform: scale(.95);
}

@media
  (max-width: 767px) {

  .ip-card-language-btn {
    top:
      clamp(8px, 2.5vw, 12px);

    right:
      clamp(8px, 2.5vw, 12px);

    min-width:
      clamp(43px, 13vw, 52px);

    min-height:
      clamp(35px, 10vw, 42px);

    padding:
      clamp(5px, 1.6vw, 8px)
      clamp(7px, 2vw, 10px);
  }

}

/* Video Album language button only */

#videoAlbumCard .ip-card-language-btn {
  top: 4%;
  right: 4%;

  min-width:
    clamp(42px, 4.5vw, 54px);

  min-height:
    clamp(28px, 3vw, 34px);

  padding:
    clamp(3px, .45vw, 5px)
    clamp(7px, .8vw, 10px);

  border-radius:
    clamp(7px, .8vw, 10px);

  font-size:
    clamp(9px, .9vw, 11px);

  box-shadow:
    0 4px 10px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
}

@media
  (max-width: 767px) {

  #videoAlbumCard .ip-card-language-btn {
    top: 3%;
    right: 3%;

    min-width:
      clamp(38px, 11vw, 46px);

    min-height:
      clamp(25px, 7vw, 30px);

    padding:
      clamp(2px, 1vw, 4px)
      clamp(6px, 1.7vw, 8px);

    font-size:
      clamp(8px, 2.2vw, 10px);
  }

}

h1 {
  color: #1565c0;
  margin: 0 0 8px;
}

.subtitle {
  margin: 8px 0 4px;

  color: #0f2f5f;

  font-size: 14px;
  font-weight: 800;

  line-height: 1.4;
  text-align: center;

  letter-spacing: .4px;

  text-shadow:
      0 1px 0 #ffffff,
      0 2px 0 rgba(255,255,255,.85),
      0 3px 6px rgba(21,101,192,.25),
      0 6px 12px rgba(0,0,0,.15);

  transform: translateZ(0);
}

/* ***** 03B - HEADER DIVIDER ***** */

.header-divider {
  width: 100%;
  height: 1px;

  margin: 18px 0 20px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(21,101,192,.15) 10%,
      rgba(21,101,192,.65) 50%,
      rgba(21,101,192,.15) 90%,
      transparent 100%
    );
}

/* ***** 04 - FORM CONTROLS ***** */
input,
button {
  margin: 2px 0;
  font-size: 16px;
}

button {
  padding: 12px 24px;
  border: 0;
  border-radius: 12px;
  background: #ff8a00;
  color: white;
  font-weight: bold;
  cursor: pointer;

  touch-action: manipulation;

  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#createVideoBtn{
  width:100%;
  border:none;
  background:transparent;
  box-shadow:none;
  padding:0;
  margin-top:10px;
}

/* ***** 04A - CONTACT CARD BOX ***** */
.contact-card-box {
  display: none;

  position: relative;
  top: auto;
  left: auto;
  transform: none;

  width: 86%;
  max-width: 430px;
  max-height: none;
  overflow: visible;

  z-index: 10010;

  margin: 18px auto 26px;
  padding: 20px;

  color: #1f2937;
  text-align: left;

  border-radius: 22px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(21,101,192,.22);

  box-shadow:
    0 35px 90px rgba(0,0,0,.36),
    0 12px 30px rgba(0,0,0,.22);
}

.contact-card-box input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(21,101,192,.25);
}

.info-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
  margin: 12px 0 8px;
  text-align: center;
}

.info-preview-title {
  font-size: 13px;
  font-weight: 900;
  color: #1565c0;
  margin-bottom: 6px;
}

.profile-photo-preview,
.logo-photo-preview {
  display: none;
  width: 108px;
  height: 108px;
  margin: 0 auto 4px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #ff8a00;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.logo-photo-preview {
  border-radius: 18px;
  object-fit: contain;
  background: rgba(21,101,192,.06);
}

/* ***** 04B - SMALL OPTION BUTTONS ***** */
.option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  gap: 3px;
  margin: -8px 0 8px;
}

.option-btn{
  width:100%;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
}

.option-btn img{
  width:100%;
  max-width:210px;
  height:auto;
  display:block;
  margin:0 auto;
}

.option-btn:active{
  transform:scale(.96);
}


/* ***** 04E - PHOTO TEXT LIST ***** */

#timelineCardBox {
  display: none;
}

body.ip-timeline-card-active #timelineCardBox {
  display: block;

  position: relative;
  top: auto;
  left: auto;
  transform: none;

  width: 86%;
  max-width: 430px;

  z-index: 10005;

  margin: 18px auto 26px;
  padding: 14px;

  border-radius: 22px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(21,101,192,.22);

  box-shadow:
    0 35px 90px rgba(0,0,0,.36),
    0 12px 30px rgba(0,0,0,.22);

  text-align: left;
  overflow: visible;
}

.timeline-title-row {
  position: relative;
  min-height: 30px;
  margin: 0 0 4px;
}

#timelineCardTitle {
  color: #1565c0;
  font-size: 22px;
  font-weight: 900;
  line-height: 30px;
  text-align: center;
}

#timelineOutputSizeIndicator {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  gap: 5px;

  min-width: 54px;
  padding: 4px 6px;

  border-radius: 10px;
  background: rgba(21,101,192,.10);
  color: #1565c0;

  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.timeline-output-shape {
  flex: 0 0 auto;
  border: 2px solid #1565c0;
  border-radius: 2px;
  transition:
    width .2s ease,
    height .2s ease;
}

.timeline-output-shape.ratio-1-1 {
  width: 15px;
  height: 15px;
}

.timeline-output-shape.ratio-4-5 {
  width: 13px;
  height: 17px;
}

.timeline-output-shape.ratio-9-16 {
  width: 10px;
  height: 18px;
}

.timeline-output-shape.ratio-16-9 {
  width: 19px;
  height: 11px;
}

.timeline-sequence-toggle-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 10px;
}

.timeline-sequence-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-width: 0;
  margin: 0;
  padding: 8px 6px;

  border-radius: 12px;
  background: rgba(21,101,192,.09);
  color: #1565c0;

  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.timeline-sequence-toggle input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: #ff8a00;
}

#timelineTotalDuration {
  margin: 12px 0 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(21,101,192,.10);
  color: #1565c0;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

#timelineCardToolbar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}

#timelineCardToolbar button {
  padding: 10px 4px;
  font-size: 13px;
}

#resetTimelineOnlyBtn {
  background: #c62828;
}

.timeline-selected-music {
  display: none;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0 4%;

  align-items: center;
  justify-content: center;

  color: #e5c2ff;

  font-size:
    inherit;

  font-weight: 900;
  line-height: 1.2;
  text-align: center;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-selected-music.visible {
  display: flex;
}

.timeline-selected-music strong {
  min-width: 0;

  margin-left: .35em;

  color: #ffad61;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#editTimelineBtn,
#moveTimelineBtn {
  background: #9e9e9e;
}

#editTimelineBtn.active {
  background: #ff8a00;
}

#moveTimelineBtn.active {
  background: #ff8a00;
}

#closeTimelineCardBtn {
  background: #ff8a00;
}

#openTimelineCardBtn {
  width: 100%;
  max-width: 210px;
  margin: 6px auto 8px;
  display: block;
  background: #1565c0;
  border-radius: 14px;
  font-size: 14px;
}

#photoTextList {
  margin-top: 8px;
  text-align: left;

  max-height: none;
  overflow: visible;

  padding-right: 0;
}

#photoTextList:empty {
  display: none;
  margin: 0;
  padding: 0;
}

body.ip-timeline-card-active #photoTextList {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.photo-text-row {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr 38px 42px;
  gap: 8px;
  align-items: center;
  margin: 6px 0;
}

body.ip-timeline-card-active .photo-text-row {
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 14px;
  background: rgba(21,101,192,.08);
}

.timeline-media-number {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ff8a00;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  line-height: 22px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.3);
}

.timeline-sequence-info {
  display: none;
}

body.ip-timeline-card-active .timeline-sequence-info {
  display: grid;
  gap: 4px;

  padding: 5px 3px 7px;

  text-align: center;
  line-height: 1.2;
}

.timeline-sequence-name {
  color: #1565c0;
  font-size: 11px;
  font-weight: 900;
}

.timeline-sequence-duration {
  margin-top: 2px;
  color: #52616f;
  font-size: 10px;
  font-weight: 800;
}

.timeline-duration-control {
  display: grid;
  grid-template-columns: 18px 1fr 18px;
  gap: 2px;
  align-items: center;
  margin-top: 2px;
}

.timeline-duration-btn {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: #1565c0;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
}

.timeline-duration-btn:active {
  transform: scale(.90);
}

.timeline-fixed-sequence {
  background: rgba(255,138,0,.10) !important;
  border: 2px solid rgba(255,138,0,.55);
  overflow: visible;

  transition:
    opacity .18s ease,
    filter .18s ease;
}

.timeline-fixed-sequence .photo-thumb {
  cursor: pointer;
}

.timeline-fixed-sequence .timeline-sequence-name {
  color: #ff8a00;
}

/* Intro / Outro inactive state */

.timeline-fixed-sequence.inactive {
  background: rgba(117,117,117,.09) !important;
  border-color: rgba(117,117,117,.38);
  opacity: .72;
}

.timeline-fixed-sequence.inactive .photo-thumb {
  filter: grayscale(1);
}

.timeline-fixed-sequence.inactive
.timeline-sequence-name,
.timeline-fixed-sequence.inactive
.timeline-sequence-duration {
  color: #757575;
}

/* Red active button / gray inactive button */

.timeline-fixed-toggle-btn {
  display: block;

  width: 100%;
  min-width: 0;
  height: auto;
  min-height:
    clamp(27px, 3vw, 35px);

  margin: 0 auto;
  padding:
    clamp(4px, .55vw, 7px);

  border:
    1px solid rgba(255,255,255,.18);

  border-radius:
    clamp(7px, .8vw, 10px);

  background:
    linear-gradient(
      135deg,
      #17634d,
      #24916d 55%,
      #164d42
    );

  color: #ffffff;

  font-size:
    clamp(10px, 1.05vw, 14px);

  font-weight: 900;
  line-height: 1;
  text-align: center;

  box-shadow:
    0 5px 12px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.timeline-fixed-sequence.inactive
.timeline-fixed-toggle-btn {
  background:
    linear-gradient(
      135deg,
      #48121c,
      #75202c 55%,
      #3c1019
    );

  color: #ffffff;
}

/* ***** INTRO / OUTRO DURATION INSIDE OWN CARDS ***** */

.fixed-card-duration-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    42px
    58px
    42px;

  gap: 6px;
  align-items: center;

  margin: 8px 0 10px;
  padding: 7px 8px;

  border-radius: 12px;
  background: rgba(21,101,192,.08);
  border: 1px solid rgba(21,101,192,.16);
}

.fixed-card-duration-row.compact {
  margin: 4px 0 8px;
  padding: 6px 7px;
}

.fixed-card-duration-label {
  min-width: 0;

  color: #1565c0;

  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.fixed-card-duration-btn {
  width: 42px;
  min-width: 42px;
  height: 36px;

  margin: 0;
  padding: 0;

  border-radius: 10px;
  background: #1565c0;

  font-size: 21px;
  font-weight: 900;
  line-height: 36px;
  text-align: center;
}

.fixed-card-duration-btn:active {
  transform: scale(.93);
}

.fixed-card-duration-value {
  min-width: 0;

  color: #52616f;

  font-size: 13px;
  font-weight: 900;
  line-height: 36px;
  text-align: center;
  white-space: nowrap;
}

.photo-text-row.timeline-swap-selected {
  outline: 4px solid #1565c0;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255,138,0,.45);
}

.photo-thumb {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  object-fit: cover;
  background: #000;

  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

body.ip-timeline-card-active .photo-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  display: block;
}

body.ip-timeline-card-active #photoTextList .photo-caption-input,
body.ip-timeline-card-active #photoTextList .slide-gender-btn,
body.ip-timeline-card-active #photoTextList .slide-voice-btn,
body.ip-timeline-card-active #photoTextList .photo-time-input {
  display: none;
}

body.ip-timeline-card-active .photo-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  display: block;
}

body.ip-timeline-card-active #photoTextList .photo-caption-input,
body.ip-timeline-card-active #photoTextList .slide-gender-btn,
body.ip-timeline-card-active #photoTextList .slide-voice-btn,
body.ip-timeline-card-active #photoTextList .photo-time-input {
  display: none;
}

.photo-caption-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 10px;
  border: 1px solid rgba(21,101,192,.25);
}

.timeline-speech-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.timeline-media-time-summary {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(21,101,192,.10);
  color: #1565c0;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}

.timeline-speech-overview {
  margin: 0 0 10px;
  padding: 9px;

  border-radius: 12px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(21,101,192,.18);
}

.timeline-speech-overview-time {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 5px;

  color: #52616f;
  font-size: 10px;
  font-weight: 900;
}

.timeline-speech-overview-rail {
  position: relative;

  width: 100%;
  height: 52px;

  overflow: visible;

  touch-action: none;
  user-select: none;
  -webkit-user-select: none;

  border-radius: 9px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(21,101,192,.10) 0,
      rgba(21,101,192,.10) 1px,
      transparent 1px,
      transparent 10%
    ),
    #eef4ff;
}

.timeline-speech-overview-block {
  position: absolute;
  top: 10px;
  height: 32px;

  min-width: 5px;

  border: 2px solid #ffffff;
  border-radius: 7px;

  background: #1565c0;

  box-shadow:
    0 3px 8px rgba(0,0,0,.20);

  cursor: pointer;
}

.timeline-speech-overview-block.selected {
  background: #ff8a00;
  z-index: 2;
}

.timeline-speech-overview-block {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.timeline-speech-handle {
  display: none;

  position: absolute;
  top: 50%;

  width: 34px;
  height: 44px;

  z-index: 5;

  transform: translateY(-50%);

  border: 3px solid #ffffff;
  border-radius: 12px;

  box-shadow:
    0 4px 10px rgba(0,0,0,.30);

  touch-action: none;
  cursor: ew-resize;
}

.timeline-speech-overview-block.selected
.timeline-speech-handle {
  display: block;
}

.timeline-speech-handle.start {
  left: -17px;
  background: #ff8a00;
}

.timeline-speech-handle.end {
  right: -17px;
  background: #1565c0;
}

.timeline-speech-overview-block.dragging {
  z-index: 10;
  box-shadow:
    0 5px 14px rgba(0,0,0,.34);
}

.timeline-edit-media-duration {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  gap: 7px;
  align-items: center;

  width: 100%;
  margin: 0 0 8px;
  padding: 8px;

  border-radius: 12px;
  background: rgba(21,101,192,.10);
}

.timeline-edit-media-duration button {
  width: 42px;
  min-width: 42px;
  height: 38px;

  margin: 0;
  padding: 0;

  border-radius: 10px;
  background: #1565c0;

  font-size: 20px;
  line-height: 38px;
}

.timeline-edit-media-duration-info {
  color: #1565c0;

  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}

.timeline-edit-media-duration-seconds {
  color: #ff8a00;

  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.timeline-edit-media-duration-seconds {
  color: #ff8a00;

  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.timeline-edit-media-duration.video {
  grid-template-columns: 1fr;
}

.timeline-edit-media-duration.video button {
  display: none;
}

.timeline-speech-overview-empty {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 42px;

  color: #52616f;
  font-size: 11px;
  font-weight: 800;
}

.timeline-media-delete-btn {
  position: static;

  display: block;

  width: 27px;
  min-width: 27px;
  height: 27px;

  margin: 0 auto;
  padding: 0;

  border: 2px solid #ffffff;
  border-radius: 50%;

  background: #c62828;
  color: #ffffff;

  font-size: 18px;
  font-weight: 900;
  line-height: 23px;
  text-align: center;

  box-shadow:
    0 4px 9px rgba(0,0,0,.24);
}

.timeline-speech-current-time {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(21,101,192,.10);
  color: #1565c0;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.timeline-speech-add-btn {
  min-width: 0;
  margin: 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: #1565c0;
  font-size: 12px;
  font-weight: 900;
}

.timeline-speech-list {
  display: grid;
  gap: 6px;
  margin-bottom: 9px;
}

.timeline-speech-item {
  display: grid;
  grid-template-columns: 92px 1fr 34px;
  gap: 7px;
  align-items: center;

  padding: 7px;
  border: 2px solid transparent;
  border-radius: 11px;

  background: rgba(21,101,192,.07);
  cursor: pointer;
}

.timeline-speech-item.selected {
  border-color: #ff8a00;
  background: #ffffff;
}

.timeline-speech-time {
  color: #1565c0;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

.timeline-speech-text {
  min-width: 0;
  overflow: hidden;
  color: #52616f;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.timeline-speech-delete {
  width: 32px;
  min-width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: #c62828;
  font-size: 18px;
  line-height: 32px;
}

.timeline-speech-time-row {
  display: none;
}

.timeline-speech-time-label {
  color: #1565c0;
  font-size: 12px;
  font-weight: 900;
}

#timelineSpeechStartInput {
  width: 90px;
  margin: 0;
  padding: 8px 7px;
  border-radius: 10px;
  border: 1px solid rgba(21,101,192,.25);
  color: #1565c0;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.timeline-speech-duration-info {
  color: #52616f;
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.timeline-caption-color-row {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 10px;
  align-items: center;

  width: 100%;
  margin: 2px 0 0;
}

.timeline-caption-color-btn {
  position: relative;

  display: block;

  width: 52px;
  min-width: 52px;
  height: 52px;
  min-height: 52px;

  margin: 0;
  padding: 0;

  border-radius: 50%;
  border: 3px solid #ffffff;

  background:
    conic-gradient(
      #f44336,
      #ff9800,
      #ffd600,
      #0b8f3a,
      #00bcd4,
      #1565c0,
      #8e24aa,
      #e91e63,
      #f44336
    );

  box-shadow:
    0 0 0 2px rgba(21,101,192,.28),
    0 5px 14px rgba(0,0,0,.22);
}

.timeline-caption-color-btn::after {
  content: "";

  position: absolute;
  inset: 7px;

  border-radius: 50%;

  background:
    var(--caption-selected-color, #ffffff);

  border: 2px solid rgba(255,255,255,.95);

  box-shadow:
    0 3px 8px rgba(0,0,0,.32);
}

.timeline-caption-color-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.timeline-speech-color-palette {
  display: none;

  grid-column: 1 / span 2;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;

  width: 52%;
  max-width: 190px;

  justify-self: center;

  margin-top: 6px;
  padding: 6px;

  border-radius: 11px;

  background: rgba(255,255,255,.98);
  border: 2px solid rgba(21,101,192,.22);

  box-shadow:
    0 8px 18px rgba(0,0,0,.18);
}

.timeline-speech-color-palette.open {
  display: grid;
}

.timeline-speech-color-option {
  width: 100%;
  aspect-ratio: 1 / 1;

  min-width: 0;
  margin: 0;
  padding: 0;

  border-radius: 50%;
  border: 2px solid #ffffff;

  box-shadow:
    0 3px 7px rgba(0,0,0,.20);
}

.timeline-speech-color-option.selected {
  outline: 3px solid #ff8a00;
  outline-offset: 2px;
}

#timelineSpeechColorDoneBtn {
  grid-column: 1 / span 5;

  width: 100%;
  height: 30px;

  margin-top: 2px;
  padding: 0 8px;

  border-radius: 8px;
  background: #1565c0;

  font-size: 12px;
  line-height: 30px;
}

.timeline-caption-capacity {
  width: 100%;

  margin: 6px 0 9px;
  padding: 8px 4px;

  border-radius: 10px;
  background: rgba(21,101,192,.08);
  color: #1565c0;

  font-size: clamp(9px, 2.7vw, 11px);
  font-weight: 900;
  line-height: 1.2;
  text-align: center;

  white-space: nowrap;
}

.timeline-caption-value{
  display:inline-block;

  color:#ff8a00;

  font-size:13px;
  font-weight:900;
  line-height:1;

  text-shadow:
    0 1px 0 rgba(255,255,255,.85);
}

.timeline-speech-number{
  color:#ff8a00;

  font-size:13px;
  font-weight:900;
  line-height:1.2;
}

.timeline-voice-speech-number{
  color:#ff8a00;

  font-size:15px;
  font-weight:900;
}

.timeline-caption-capacity.over-limit{
  background: rgba(198,40,40,.13);
  color: #ff8f8f;

  border:
    1px solid rgba(255,95,95,.42);
}

.timeline-caption-warning {
  display: block;

  margin-top: .55em;

  color: #ff8f8f;

  font-size:
    clamp(9px, 1vw, 12px);

  font-weight: 900;
  line-height: 1.35;
  text-align: center;

  white-space: normal;
}

#timelineCaptionInput.caption-over-limit {
  border-color: #c62828 !important;
  background: rgba(198,40,40,.06);
}

#timelineVoiceBtn:disabled {
  background: #9e9e9e !important;
  opacity: .55;
  cursor: not-allowed;
}

#extendTimelineCaptionDurationBtn {
  display: none;
  width: 100%;
  margin-top: 7px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #1565c0;
  font-size: 12px;
  font-weight: 900;
}

/* ***** SELECTABLE SPEECH EFFECT ***** */

.timeline-speech-effect-box {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, .42fr);

  gap:
    clamp(6px, .9vw, 11px);

  align-items: stretch;

  width: 100%;
  min-width: 0;

  margin:
    clamp(7px, 1vw, 12px)
    0;

  padding:
    clamp(8px, 1.1vw, 13px);

  border:
    1px solid rgba(141,87,255,.20);

  border-radius:
    clamp(11px, 1.4vw, 17px);

  background:
    linear-gradient(
      135deg,
      rgba(141,87,255,.10),
      rgba(48,145,255,.06)
    );
}

.timeline-speech-effect-field {
  display: grid;

  grid-template-columns:
    minmax(0, 38fr)
    minmax(0, 62fr);

  gap:
    clamp(5px, .7vw, 9px);

  align-items: center;

  min-width: 0;
}

.timeline-speech-effect-label {
  min-width: 0;

  color: #d4a9ff;

  font-size:
    clamp(10px, 1.1vw, 14px);

  font-weight: 900;
  line-height: 1.2;
}

#timelineSpeechEffectSelect {
  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(8px, 1vw, 12px);

  border:
    1px solid rgba(185,217,255,.36);

  border-radius:
    clamp(8px, 1vw, 12px);

  outline: none;

  background:
    rgba(225,235,250,.94);

  color: #17233b;

  font-size:
    clamp(10px, 1.05vw, 13px);

  font-weight: 850;
}

#previewTimelineSpeechEffectBtn {
  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(7px, .9vw, 11px);

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:
    clamp(8px, 1vw, 12px);

  background:
    linear-gradient(
      135deg,
      #17634d,
      #24916d 55%,
      #164d42
    );

  color: #ffffff;

  font-size:
    clamp(10px, 1.05vw, 13px);

  font-weight: 900;
  line-height: 1.15;

  box-shadow:
    0 7px 15px rgba(0,0,0,.19),
    inset 0 1px 0 rgba(255,255,255,.11);
}

@media
  (max-width: 520px) {

  .timeline-speech-effect-box {
    grid-template-columns:
      minmax(0, 1fr);
  }

}

/* ***** SELECTABLE SPEECH EFFECT ***** */

.timeline-speech-effect-box {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, .42fr);

  gap:
    clamp(6px, .9vw, 11px);

  align-items: stretch;

  width: 100%;
  min-width: 0;

  margin:
    clamp(7px, 1vw, 12px)
    0;

  padding:
    clamp(8px, 1.1vw, 13px);

  border:
    1px solid rgba(141,87,255,.20);

  border-radius:
    clamp(11px, 1.4vw, 17px);

  background:
    linear-gradient(
      135deg,
      rgba(141,87,255,.10),
      rgba(48,145,255,.06)
    );
}

.timeline-speech-effect-field {
  display: grid;

  grid-template-columns:
    minmax(0, 38fr)
    minmax(0, 62fr);

  gap:
    clamp(5px, .7vw, 9px);

  align-items: center;

  min-width: 0;
}

.timeline-speech-effect-label {
  min-width: 0;

  color: #d4a9ff;

  font-size:
    clamp(10px, 1.1vw, 14px);

  font-weight: 900;
  line-height: 1.2;
}

#timelineSpeechEffectSelect {
  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(8px, 1vw, 12px);

  border:
    1px solid rgba(185,217,255,.36);

  border-radius:
    clamp(8px, 1vw, 12px);

  outline: none;

  background:
    rgba(225,235,250,.94);

  color: #17233b;

  font-size:
    clamp(10px, 1.05vw, 13px);

  font-weight: 850;
}

#previewTimelineSpeechEffectBtn {
  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(7px, .9vw, 11px);

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:
    clamp(8px, 1vw, 12px);

  background:
    linear-gradient(
      135deg,
      #17634d,
      #24916d 55%,
      #164d42
    );

  color: #ffffff;

  font-size:
    clamp(10px, 1.05vw, 13px);

  font-weight: 900;
  line-height: 1.15;

  box-shadow:
    0 7px 15px rgba(0,0,0,.19),
    inset 0 1px 0 rgba(255,255,255,.11);
}

@media
  (max-width: 520px) {

  .timeline-speech-effect-box {
    grid-template-columns:
      minmax(0, 1fr);
  }

}

/* ***** SELECTABLE SPEECH EFFECT ***** */

.timeline-speech-effect-box {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, .42fr);

  gap:
    clamp(6px, .9vw, 11px);

  align-items: stretch;

  width: 100%;
  min-width: 0;

  margin:
    clamp(7px, 1vw, 12px)
    0;

  padding:
    clamp(8px, 1.1vw, 13px);

  border:
    1px solid rgba(141,87,255,.20);

  border-radius:
    clamp(11px, 1.4vw, 17px);

  background:
    linear-gradient(
      135deg,
      rgba(141,87,255,.10),
      rgba(48,145,255,.06)
    );
}

.timeline-speech-effect-field {
  display: grid;

  grid-template-columns:
    minmax(0, 38fr)
    minmax(0, 62fr);

  gap:
    clamp(5px, .7vw, 9px);

  align-items: center;

  min-width: 0;
}

.timeline-speech-effect-label {
  min-width: 0;

  color: #d4a9ff;

  font-size:
    clamp(10px, 1.1vw, 14px);

  font-weight: 900;
  line-height: 1.2;
}

#timelineSpeechEffectSelect {
  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(8px, 1vw, 12px);

  border:
    1px solid rgba(185,217,255,.36);

  border-radius:
    clamp(8px, 1vw, 12px);

  outline: none;

  background:
    rgba(225,235,250,.94);

  color: #17233b;

  font-size:
    clamp(10px, 1.05vw, 13px);

  font-weight: 850;
}

#previewTimelineSpeechEffectBtn {
  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(7px, .9vw, 11px);

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:
    clamp(8px, 1vw, 12px);

  background:
    linear-gradient(
      135deg,
      #17634d,
      #24916d 55%,
      #164d42
    );

  color: #ffffff;

  font-size:
    clamp(10px, 1.05vw, 13px);

  font-weight: 900;
  line-height: 1.15;

  box-shadow:
    0 7px 15px rgba(0,0,0,.19),
    inset 0 1px 0 rgba(255,255,255,.11);
}

@media
  (max-width: 520px) {

  .timeline-speech-effect-box {
    grid-template-columns:
      minmax(0, 1fr);
  }

}

.slide-voice-btn {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  background: #9e9e9e;
  font-size: 20px;
  line-height: 42px;
}

.slide-voice-btn.ready {
  background: #1b8f3a;
}

.slide-voice-btn.loading {
  background: #ff8a00;
}

.slide-gender-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ***** 04EAA - HORIZONTAL 2026 TIMELINE CARD ***** */

body.ip-timeline-card-active #timelineCardBox {
  display: grid;

  position: relative;
  top: auto;
  left: auto;
  transform: none;

  width: 96%;
  max-width: none;

  z-index: 10005;

  grid-template-columns:
    minmax(0, 1fr);

  gap: clamp(10px, 1.4vw, 18px);

  margin: 2% auto 4%;
  padding: clamp(14px, 2.3vw, 32px);

  color: #f7f8ff;
  text-align: left;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius:
    clamp(24px, 3vw, 40px);

  background:
    radial-gradient(
      circle at 7% 4%,
      rgba(48,145,255,.24),
      transparent 29%
    ),
    radial-gradient(
      circle at 93% 8%,
      rgba(84,81,255,.19),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      rgba(28,34,63,.98),
      rgba(8,11,26,.99)
    );

  box-shadow:
    0 34px 90px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.09);

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  overflow: hidden;
}

body.ip-timeline-card-active
#timelineCardBox::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  border-radius: inherit;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.07),
      transparent 25%,
      transparent 72%,
      rgba(48,145,255,.05)
    );
}

/* Header */

.timeline-card-header {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  gap: clamp(10px, 1.5vw, 18px);
  align-items: center;

  width: 100%;
  min-width: 0;

  padding-bottom:
    clamp(12px, 1.5vw, 18px);

  border-bottom:
    1px solid rgba(255,255,255,.10);
}

.timeline-card-header-icon {
  width:
    clamp(52px, 6vw, 68px);

  height:
    clamp(52px, 6vw, 68px);

  display: grid;
  place-items: center;

  border:
    1px solid rgba(116,178,255,.38);

  border-radius:
    clamp(16px, 2vw, 22px);

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,.25),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #3091ff,
      #5451ff
    );

  box-shadow:
    0 15px 32px rgba(48,145,255,.22),
    inset 0 1px 0 rgba(255,255,255,.34);
}

.timeline-card-header-icon img {
  width: 76%;
  height: 76%;

  display: block;

  object-fit: contain;

  filter:
    drop-shadow(
      0 5px 10px rgba(0,0,0,.25)
    );
}

.timeline-card-heading {
  width: 100%;
  min-width: 0;
}

.timeline-card-header #xLangBtn {
  display: flex !important;
  position: relative;
  z-index: 2;
}

body.ip-timeline-card-active
#timelineCardTitle {
  margin: 0 0 5px;

  color: #ffffff;

  font-size:
    clamp(23px, 3vw, 34px);

  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.7px;
  text-align: left;
}

.timeline-card-subtitle {
  color: #c5ccdf;

  font-size:
    clamp(11px, 1.15vw, 14px);

  font-weight: 650;
  line-height: 1.45;
  text-align: left;
}

/* Direct output ratio selector */

.timeline-header-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;

  gap:
    clamp(8px, 1.1vw, 14px);

  width: auto;
  min-width: 0;
}

.timeline-header-controls
#timelineWorkspaceTemplatesBtn {
  order: 1;
}

.timeline-header-controls
#timelineWorkspaceAlbumBtn {
  order: 2;

  margin-right:
    clamp(18px, 2.4vw, 32px);
}

.timeline-header-controls
#timelineOutputSizeIndicator {
  order: 3;
}

.timeline-header-controls
#xLangBtn {
  order: 4;
}

.timeline-card-header
.timeline-header-controls
#xLangBtn {
  flex: 0 0 auto;

  width: auto;
  min-width:
    clamp(4.25rem, 8vw, 5.75rem);

  justify-self: auto;
}

.timeline-card-header
.timeline-header-controls
#timelineOutputSizeIndicator {
  position: relative;
  top: auto;
  right: auto;

  flex: 0 0
    clamp(15rem, 22vw, 19rem);

  width:
    clamp(15rem, 22vw, 19rem);

  min-width: 0;

  transform: none;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 5%;

  align-items: center;

  padding: 0;
  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
}

.timeline-header-size-option {
  position: relative;

  width: 100%;
  max-width: none;

  aspect-ratio: 1 / 1;

  display: grid;
  place-items: center;

  justify-self: stretch;

  margin: 0;
  padding: 0;

  border:
    1px solid rgba(116,178,255,.20);

  border-radius:
    clamp(9px, 1.1vw, 13px);

  background:
    linear-gradient(
      135deg,
      rgba(48,145,255,.09),
      rgba(84,81,255,.06)
    );

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06);
}

.timeline-header-size-option input {
  position: absolute;

  width: 1px;
  height: 1px;

  margin: 0;

  opacity: 0;
  pointer-events: none;
}

.timeline-header-size-shape {
  display: block;

  border:
    2px solid #91c4ff;

  border-radius: 3px;

  background:
    rgba(48,145,255,.10);
}

.timeline-header-size-shape.ratio-4-5 {
  width: 36%;
  aspect-ratio: 4 / 5;
}

.timeline-header-size-shape.ratio-1-1 {
  width: 42%;
  aspect-ratio: 1 / 1;
}

.timeline-header-size-shape.ratio-9-16 {
  width: 27%;
  aspect-ratio: 9 / 16;
}

.timeline-header-size-shape.ratio-16-9 {
  width: 53%;
  aspect-ratio: 16 / 9;
}

.timeline-header-size-check {
  position: absolute;

  top: 3%;
  right: 3%;

  width:
    clamp(14px, 1.5vw, 18px);

  aspect-ratio: 1 / 1;

  display: none;
  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #3091ff,
      #5451ff
    );

  color: #ffffff;

  font-size:
    clamp(8px, .8vw, 10px);

  font-weight: 900;
  line-height: 1;

  box-shadow:
    0 4px 9px rgba(48,145,255,.32);
}

.timeline-header-size-option:has(input:checked) {
  border-color:
    rgba(145,196,255,.92);

  background:
    linear-gradient(
      135deg,
      #173d6c,
      #285c9e 55%,
      #202d70
    );

  box-shadow:
    0 0 0 3px rgba(48,145,255,.13),
    0 7px 16px rgba(48,145,255,.20),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.timeline-header-size-option:has(input:checked)
.timeline-header-size-check {
  display: grid;
}

.timeline-header-size-option:has(input:checked)
.timeline-header-size-shape {
  border-color: #ffffff;

  background:
    rgba(145,196,255,.20);
}

/* Motion speed control */

.timeline-motion-speed {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 42fr)
    minmax(0, 58fr);

  grid-template-areas:
    "duration title"
    "duration options";

  column-gap: 3%;
  row-gap: 7%;

  align-content: center;
  align-items: center;

  width: 100%;
  min-width: 0;
  min-height:
    clamp(54px, 6vw, 72px);

  margin: 0;

  padding:
    clamp(6px, .8vw, 10px);

  border:
    1px solid rgba(255,255,255,.10);

  border-radius:
    clamp(9px, 1.1vw, 14px);

  background:
    linear-gradient(
      145deg,
      #202a3b,
      #344156
    );

  box-shadow:
    0 7px 15px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.timeline-motion-speed-title {
  grid-area: title;

  min-width: 0;

  color: #b9d9ff;

  font-size:
    clamp(11px, 1.2vw, 16px);

  font-weight: 950;
  line-height: 1.15;
  text-align: center;

  letter-spacing: -.01em;
}

.timeline-motion-speed-options {
  grid-area: options;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 2%;

  width: 100%;
  min-width: 0;
}

.timeline-motion-speed-option {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 2%;

  width: 100%;
  min-width: 0;

  min-height:
    clamp(24px, 2.5vw, 31px);

  margin: 0;
  padding:
    clamp(3px, .35vw, 5px);

  border:
    1px solid rgba(255,255,255,.10);

  border-radius:
    clamp(9px, 1.1vw, 13px);

  background:
    linear-gradient(
      135deg,
      #202a3b,
      #344156
    );

  color: #c5ccdf;

  font-size:
    clamp(10px, 1.1vw, 14px);

  font-weight: 900;
  line-height: 1.1;
  text-align: center;

  cursor: pointer;

  box-shadow:
    0 7px 14px rgba(0,0,0,.17),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.timeline-motion-speed-option input {
  position: absolute;

  width: 1px;
  height: 1px;

  margin: 0;

  opacity: 0;
  pointer-events: none;
}

.timeline-motion-check {
  display: none;

  width:
    clamp(14px, 1.5vw, 18px);

  aspect-ratio: 1 / 1;

  place-items: center;

  flex: 0 0 auto;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #3091ff,
      #5451ff
    );

  color: #ffffff;

  font-size:
    clamp(10px, 1.1vw, 13px);

  font-weight: 900;
  line-height: 1;

  box-shadow:
    0 5px 12px rgba(48,145,255,.28);
}

.timeline-motion-speed-option.active {
  border-color:
    rgba(145,196,255,.82);

  background:
    linear-gradient(
      135deg,
      #3091ff,
      #5451ff 55%,
      #285c9e
    );

  color: #ffffff;

  box-shadow:
    0 0 0 3px rgba(48,145,255,.16),
    0 9px 20px rgba(48,145,255,.26),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.timeline-motion-speed-option.active
.timeline-motion-check {
  display: grid;
}

/* Intro and Outro are opened directly from their timeline tiles */

#timelineWorkspaceIntroBtn,
#timelineWorkspaceOutroBtn {
  display: none !important;
}

/* Media gallery */

body.ip-timeline-card-active
#photoTextList {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap:
    clamp(7px, 1vw, 13px);

  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(10px, 1.4vw, 17px);

  border:
    1px solid rgba(48,145,255,.22);

  border-radius:
    clamp(16px, 2vw, 24px);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(48,145,255,.12),
      transparent 45%
    ),
    rgba(255,255,255,.04);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08);
}

body.ip-timeline-card-active
#photoTextList:empty {
  display: none;
}

body.ip-timeline-card-active
.photo-text-row {
  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  border:
    1px solid rgba(255,255,255,.09);

  border-radius:
    clamp(11px, 1.4vw, 17px);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.025)
    );

  box-shadow:
    0 9px 20px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06);

  overflow: hidden;
}

body.ip-timeline-card-active
.photo-thumb {
  width: 100%;
  height: auto;

  aspect-ratio: 1 / 1;

  display: block;

  border-radius:
    clamp(10px, 1.3vw, 16px)
    clamp(10px, 1.3vw, 16px)
    0 0;

  object-fit: cover;
}

body.ip-timeline-card-active
.timeline-media-number {
  top: 5%;
  left: 5%;

  width:
    clamp(21px, 2.4vw, 29px);

  height: auto;
  aspect-ratio: 1 / 1;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(255,255,255,.70);

  background:
    linear-gradient(
      145deg,
      #3091ff,
      #5451ff
    );

  font-size:
    clamp(10px, 1.1vw, 13px);

  line-height: 1;

  box-shadow:
    0 5px 13px rgba(0,0,0,.32);
}

body.ip-timeline-card-active
.timeline-sequence-info {
  display: grid;

  gap:
    clamp(3px, .45vw, 6px);

  padding:
    clamp(6px, .8vw, 10px);

  text-align: center;
}

body.ip-timeline-card-active
.timeline-sequence-name {
  color: #ffffff;

  font-size:
    clamp(10px, 1.05vw, 13px);

  font-weight: 900;
  line-height: 1.2;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.ip-timeline-card-active
.timeline-sequence-duration {
  margin:
    clamp(2px, .35vw, 5px)
    0 0;

  color: #b9d9ff;

  font-size:
    clamp(13px, 1.35vw, 18px);

  font-weight: 900;
  line-height: 1.15;
}

/* Direct Delete and Swap controls */

.timeline-media-action-row {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(4px, .55vw, 7px);

  width: 100%;
  min-width: 0;

  margin:
    clamp(2px, .35vw, 4px)
    0;
}

.timeline-media-preview-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  width: 100%;
  min-width: 0;

  margin:
    clamp(2px, .35vw, 4px)
    0 0;
}

body.ip-timeline-card-active
.timeline-media-action-row button,
body.ip-timeline-card-active
.timeline-media-preview-row button {
  width: 100%;
  min-width: 0;

  height: auto;
  min-height:
    clamp(27px, 3vw, 35px);

  margin: 0;
  padding:
    clamp(4px, .55vw, 7px)
    clamp(2px, .4vw, 5px);

  border:
    1px solid rgba(255,255,255,.14);

  border-radius:
    clamp(7px, .8vw, 10px);

  color: #ffffff;

  font-size:
    clamp(9px, 1vw, 13px);

  font-weight: 900;
  line-height: 1.05;

  white-space: nowrap;

  box-shadow:
    0 5px 12px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.11);
}

body.ip-timeline-card-active
.timeline-media-delete-btn {
  position: static;

  display: block;

  width: 100%;
  min-width: 0;
  height: auto;

  margin: 0;

  border-radius:
    clamp(7px, .8vw, 10px);

  background:
    linear-gradient(
      135deg,
      #48121c,
      #75202c 55%,
      #3c1019
    );

  font-size:
    clamp(15px, 1.6vw, 20px);

  line-height: 1;
}

.timeline-media-swap-btn {
  display: block;

  width: 100%;
  min-width: 0;

  margin: 0;

  background:
    linear-gradient(
      135deg,
      #173d6c,
      #285c9e 55%,
      #202d70
    );
}

.timeline-sequence-preview-btn {
  display: block;

  width: 100%;
  min-width: 0;

  margin: 0;

  background:
    linear-gradient(
      135deg,
      #17634d,
      #24916d 55%,
      #164d42
    );
}

body.ip-timeline-card-active
.photo-text-row.timeline-swap-selected
.timeline-media-swap-btn {
  border-color:
    rgba(145,196,255,.85);

  background:
    linear-gradient(
      135deg,
      #3091ff,
      #5451ff
    );

  box-shadow:
    0 0 0 3px rgba(48,145,255,.15),
    0 7px 16px rgba(48,145,255,.25),
    inset 0 1px 0 rgba(255,255,255,.18);
}

/* Intro and Outro tiles */

body.ip-timeline-card-active
.timeline-fixed-sequence {
  border-color:
    rgba(116,178,255,.40);

  background:
    linear-gradient(
      145deg,
      rgba(48,145,255,.15),
      rgba(84,81,255,.08)
    ) !important;
}

body.ip-timeline-card-active
.timeline-fixed-sequence
.timeline-sequence-name {
  color: #91c4ff;
}

body.ip-timeline-card-active
.timeline-fixed-sequence.inactive {
  border-color:
    rgba(158,166,187,.25);

  background:
    rgba(255,255,255,.035) !important;

  opacity: .58;
}

body.ip-timeline-card-active
.timeline-fixed-toggle-btn {
  width: 100%;
  min-width: 0;

  height: auto;
  min-height:
    clamp(27px, 3vw, 35px);

  margin: 0 auto;

  aspect-ratio: auto;
}

body.ip-timeline-card-active
.timeline-media-delete-btn {
  width: 100%;
  min-width: 0;

  height: auto;
  min-height:
    clamp(27px, 3vw, 35px);

  margin: 0;

  aspect-ratio: auto;
}

/* Highlighted total duration */

body.ip-timeline-card-active
#timelineTotalDuration {
  position: relative;
  z-index: 1;

  grid-area: duration;

  width: 100%;
  min-width: 0;
  height: auto;

  min-height:
    clamp(62px, 7vw, 82px);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap:
    clamp(4px, .55vw, 7px);

  margin: 0;
  padding:
    clamp(6px, .8vw, 10px);

  border:
    1px solid rgba(145,196,255,.68);

  border-radius:
    clamp(9px, 1.1vw, 14px);

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(255,255,255,.18),
      transparent 46%
    ),
    linear-gradient(
      145deg,
      #174f83,
      #267ab2 52%,
      #253d88
    );

  color: #ffffff;

  font-size:
    clamp(10px, 1.1vw, 14px);

  font-weight: 900;
  line-height: 1.15;
  text-align: center;

  white-space: nowrap;

  text-shadow:
    0 2px 6px rgba(0,0,0,.36);

  box-shadow:
    0 0 0 3px rgba(48,145,255,.12),
    0 9px 20px rgba(48,145,255,.24),
    inset 0 1px 0 rgba(255,255,255,.20);
}

.timeline-total-label {
  display: block;

  width: 100%;
  min-width: 0;

  font-size:
    clamp(10px, 1.1vw, 14px);

  font-weight: 900;
  line-height: 1.15;
  text-align: center;

  white-space: nowrap;
}

.timeline-total-value {
  display: block;

  width: 100%;
  min-width: 0;

  font-size:
    clamp(16px, 1.9vw, 24px);

  font-weight: 950;
  line-height: 1;
  text-align: center;

  white-space: nowrap;

  color: #ffffff;
}

/* Timeline workspace footer */

body.ip-timeline-card-active
.timeline-workspace-footer {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 4%;

  width: 100%;
  min-width: 0;

  margin:
    clamp(1rem, 2vw, 1.6rem)
    0 0;

  padding:
    clamp(.9rem, 1.5vw, 1.3rem)
    2%
    0;

  border-top:
    .08rem solid rgba(255,255,255,.10);

  color: #aeb8cf;

  text-align: left;
}

body.ip-timeline-card-active
.timeline-footer-publisher {
  min-width: 0;

  font-size:
    clamp(.72rem, 1.05vw, .9rem);

  font-weight: 750;
  line-height: 1.4;
}

body.ip-timeline-card-active
.timeline-footer-publisher a {
  margin: 0;

  color: #91c4ff;

  text-decoration: none;
}

body.ip-timeline-card-active
.timeline-footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;

  gap:
    clamp(.8rem, 2vw, 1.5rem);
}

body.ip-timeline-card-active
.timeline-workspace-footer
.telegram-link {
  display: inline-flex;
  align-items: center;

  gap: 12%;

  margin: 0;

  color: #b9d9ff;

  font-size:
    clamp(.72rem, 1.05vw, .9rem);

  font-weight: 850;
  line-height: 1;

  text-decoration: none;
}

body.ip-timeline-card-active
.timeline-workspace-footer
.telegram-link img {
  width:
    clamp(1.7rem, 2.7vw, 2.3rem);

  height: auto;
  aspect-ratio: 1 / 1;

  object-fit: contain;
}

.timeline-footer-email-icon {
  font-size:
    clamp(1.5rem, 2.7vw, 2.2rem);

  line-height: 1;
}

/* Footer actions */

body.ip-timeline-card-active
#timelineCardToolbar {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  align-items: center;

  gap: 4%;

  width: 56%;
  min-width: 0;

  justify-self: center;

  margin: 0 auto;
  padding: 0;

  border: 0;

  transition:
    width .24s ease,
    gap .24s ease;
}

body.ip-timeline-card-active
#timelineCardToolbar:has(
  #selectedMusicLabel.visible
) {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  column-gap: 4%;
  row-gap:
    clamp(.45rem, 1vw, .75rem);

  width: 68%;
}

body.ip-timeline-card-active
#timelineCardToolbar button[hidden] {
  display: none !important;
}

body.ip-timeline-card-active
#resetTimelineOnlyBtn {
  grid-column: 1;
  grid-row: 1;
}

body.ip-timeline-card-active
#previewTimelineBtn {
  grid-column: 2;
  grid-row: 1;
}

body.ip-timeline-card-active
#closeTimelineCardBtn {
  grid-column: 3;
  grid-row: 1;
}

body.ip-timeline-card-active
#selectedMusicLabel {
  grid-column: 1 / -1;
  grid-row: 2;

  justify-self: center;

  width: 100%;
  min-width: 0;
}

body.ip-timeline-card-active
#timelineCardToolbar button {
  width: 100%;
  min-width: 0;

  min-height: 3.2em;

  margin: 0;
  padding: 4% 6%;

  border:
    .08em solid rgba(255,255,255,.12);

  border-radius: .85em;

  color: #ffffff;

  font-size:
    clamp(.72rem, 1.2vw, .95rem);

  font-weight: 900;
  line-height: 1.15;

  box-shadow:
    0 .55em 1.15em rgba(0,0,0,.22),
    inset 0 .08em 0 rgba(255,255,255,.12);
}

body.ip-timeline-card-active
#resetTimelineOnlyBtn {
  background:
    linear-gradient(
      135deg,
      #48121c,
      #75202c 55%,
      #3c1019
    );
}

body.ip-timeline-card-active
#editTimelineBtn,
body.ip-timeline-card-active
#moveTimelineBtn {
  background:
    linear-gradient(
      135deg,
      #202a3b,
      #344156
    );
}

body.ip-timeline-card-active
#editTimelineBtn.active,
body.ip-timeline-card-active
#moveTimelineBtn.active {
  border-color:
    rgba(116,178,255,.52);

  background:
    linear-gradient(
      135deg,
      #173d6c,
      #285c9e 55%,
      #202d70
    );

  box-shadow:
    0 9px 20px rgba(48,145,255,.18),
    inset 0 1px 0 rgba(255,255,255,.13);
}

body.ip-timeline-card-active
#closeTimelineCardBtn {
  width: 100%;
  max-width: none;

  background:
    linear-gradient(
      135deg,
      #ff8a00,
      #e93d91 55%,
      #b72d78
    );
}

/* ***** TABLET ***** */

@media
  (min-width: 768px)
  and (max-width: 1100px) {

  body.ip-timeline-card-active
  #timelineCardBox {
    width: 97%;

    padding:
      clamp(13px, 2vw, 22px);
  }

  body.ip-timeline-card-active
  #photoTextList {
    grid-template-columns:
      repeat(5, minmax(0, 1fr));

    gap: 1.2%;
  }

}

/* ***** MOBILE LANDSCAPE ***** */

@media
  (max-width: 767px)
  and (orientation: landscape) {

  body.ip-timeline-card-active
  #timelineCardBox {
    width: 98%;

    gap: 7px;

    margin: 1% auto 3%;
    padding:
      clamp(10px, 1.8vw, 15px);

    border-radius:
      clamp(18px, 3vw, 26px);
  }

  .timeline-card-header {
    padding-bottom: 9px;
  }

  body.ip-timeline-card-active
  #photoTextList {
    grid-template-columns:
      repeat(6, minmax(0, 1fr));

    gap: 1%;
    padding:
      clamp(7px, 1.2vw, 10px);
  }

  body.ip-timeline-card-active
  .timeline-sequence-info {
    padding:
      clamp(4px, .7vw, 7px);
  }

  body.ip-timeline-card-active
  #timelineCardToolbar {
    gap: 1.2%;
    padding-top: 9px;
  }

  body.ip-timeline-card-active
  #timelineCardToolbar button {
    min-height:
      clamp(34px, 8vh, 44px);

    font-size:
      clamp(10px, 1.7vw, 13px);
  }

}

/* ***** MOBILE PORTRAIT ***** */

@media
  (max-width: 767px)
  and (orientation: portrait) {

  body.ip-timeline-card-active
  #timelineCardBox {
    width: 96%;

    margin: 3% auto 5%;
    padding:
      clamp(12px, 4vw, 18px);

    border-radius:
      clamp(20px, 6vw, 28px);
  }

  .timeline-card-header {
    grid-template-columns:
      auto
      minmax(0, 1fr);
  }

  .timeline-header-controls {
    grid-column: 1 / -1;

    width: 100%;

    justify-content: flex-end;

    gap:
      clamp(6px, 1.8vw, 10px);
  }

  .timeline-header-controls
  #timelineWorkspaceTemplatesBtn {
    margin-right: 0;
  }

  .timeline-header-controls
  #timelineWorkspaceAlbumBtn {
    margin-right:
      clamp(12px, 3.5vw, 20px);
  }

  .timeline-header-template-btn {
    min-width: 0;

    padding-left:
      clamp(8px, 2.5vw, 12px);

    padding-right:
      clamp(8px, 2.5vw, 12px);
  }

  .timeline-header-template-icon {
    display: none;
  }

  .timeline-header-size-selector {
    flex: 1;

    grid-template-columns:
      repeat(4, minmax(0, 1fr));

    gap:
      clamp(6px, 2vw, 10px);
  }

  .timeline-header-size-option {
    width: 100%;
    max-width: 54px;

    justify-self: center;
  }

  .timeline-motion-speed {
    grid-template-columns:
      minmax(0, 42fr)
      minmax(0, 58fr);

    grid-template-areas:
      "duration title"
      "duration options";

    column-gap: 3%;
    row-gap:
      clamp(7px, 2vw, 10px);
  }

  .timeline-motion-speed-title {
    text-align: center;
  }

  body.ip-timeline-card-active
  #timelineTotalDuration {
    min-height:
      clamp(58px, 17vw, 72px);

    gap: 4%;

    padding: 4%;

    white-space: nowrap;
  }

  .timeline-total-label {
    font-size:
      clamp(8px, 2.6vw, 11px);
  }

  .timeline-total-value {
    font-size:
      clamp(15px, 4.4vw, 20px);
  }

  body.ip-timeline-card-active
  #photoTextList {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap:
      clamp(7px, 2.2vw, 11px);
  }

  body.ip-timeline-card-active
  #timelineCardToolbar {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    width: 64%;
    gap: 5%;
  }

  body.ip-timeline-card-active
  #timelineCardToolbar:has(
    #selectedMusicLabel.visible
  ) {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    width: 100%;

    column-gap: 2%;
    row-gap:
      clamp(.4rem, 2vw, .65rem);
  }

  body.ip-timeline-card-active
  #closeTimelineCardBtn {
    width: 100%;
  }

  body.ip-timeline-card-active
  .timeline-workspace-footer {
    grid-template-columns:
      minmax(0, 1fr);

    justify-items: center;

    gap:
      clamp(.7rem, 3vw, 1rem);

    padding-left: 3%;
    padding-right: 3%;

    text-align: center;
  }

  body.ip-timeline-card-active
  .timeline-footer-links {
    justify-content: center;

    width: 100%;
  }

}

/* ***** EXTRA-NARROW MOBILE ***** */

@media
  (max-width: 390px)
  and (orientation: portrait) {

  body.ip-timeline-card-active
  #photoTextList {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  body.ip-timeline-card-active
  #timelineCardToolbar {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    width: 72%;
    gap: 4%;
  }

  body.ip-timeline-card-active
  #timelineCardToolbar:has(
    #selectedMusicLabel.visible
  ) {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    width: 100%;

    column-gap: 1.5%;
    row-gap:
      clamp(.35rem, 2vw, .55rem);
  }

  body.ip-timeline-card-active
  #timelineCardToolbar button {
    padding-left: 3%;
    padding-right: 3%;

    font-size:
      clamp(.62rem, 2.7vw, .76rem);
  }

  body.ip-timeline-card-active
  #selectedMusicLabel {
    font-size:
      clamp(.58rem, 2.5vw, .72rem);
  }

}


/* ***** LOCAL TEMPLATE LIBRARY ***** */

.timeline-header-template-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  gap:
    clamp(5px, .7vw, 9px);

  flex: 0 0 auto;

  width: auto;
  min-width:
    clamp(7.2rem, 10vw, 9rem);

  min-height:
    clamp(40px, 4.3vw, 50px);

  margin: 0;
  padding:
    clamp(6px, .8vw, 10px)
    clamp(10px, 1.2vw, 16px);

  border:
    1px solid rgba(255,176,91,.32);

  border-radius:
    clamp(10px, 1.2vw, 14px);

  background:
    linear-gradient(
      135deg,
      #4b2a14,
      #785126 55%,
      #45301c
    );

  color: #ffffff;

  font-size:
    clamp(10px, 1.05vw, 13px);

  font-weight: 900;
  line-height: 1;

  white-space: nowrap;

  box-shadow:
    0 7px 15px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.timeline-header-template-icon {
  display: grid;
  place-items: center;

  width:
    clamp(22px, 2.4vw, 29px);

  aspect-ratio: 1 / 1;

  border-radius:
    clamp(6px, .8vw, 9px);

  background:
    linear-gradient(
      145deg,
      #ff8a00,
      #ff516d
    );

  color: #ffffff;

  font-size:
    clamp(12px, 1.3vw, 16px);

  line-height: 1;
}

.timeline-header-template-btn:active {
  transform: scale(.96);
}

#templateLibraryBox {
  display: none;

  position: relative;
  z-index: 10010;

  width: 96%;
  max-width: 980px;

  margin: 2% auto 4%;
  padding:
    clamp(14px, 2.3vw, 30px);

  color: #f7f8ff;
  text-align: left;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius:
    clamp(22px, 3vw, 38px);

  background:
    radial-gradient(
      circle at 8% 5%,
      rgba(255,138,0,.22),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(28,34,63,.98),
      rgba(8,11,26,.99)
    );

  box-shadow:
    0 34px 90px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.09);
}

.template-library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 4%;

  padding-bottom: 3%;

  border-bottom:
    1px solid rgba(255,255,255,.10);
}

.template-library-title {
  font-size:
    clamp(22px, 3vw, 34px);

  font-weight: 900;
}

.template-library-subtitle {
  margin-top: .35em;

  color: #c5ccdf;

  font-size:
    clamp(11px, 1.2vw, 14px);
}

.template-section-title {
  margin:
    clamp(14px, 2vw, 22px)
    0
    clamp(8px, 1vw, 12px);

  color: #ffad61;

  font-size:
    clamp(14px, 1.5vw, 19px);

  font-weight: 900;
  line-height: 1.2;
}

.template-save-row {
  display: grid;

  grid-template-columns:
    42%
    auto;

  justify-content: start;

  gap: 2%;

  margin: 3% 0;
}

#templateNameInput {
  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 1em;

  border:
    1px solid rgba(255,255,255,.18);

  border-radius: .9em;

  outline: none;

  background:
    rgba(255,255,255,.09);

  color: #ffffff;

  font-weight: 800;
}

#templateNameInput::placeholder {
  color: #aeb8cf;
}

#saveCurrentTemplateBtn {
  width: fit-content;
  min-width: 0;

  justify-self: start;

  margin: 0;
  padding:
    clamp(9px, 1vw, 12px)
    clamp(16px, 1.8vw, 24px);

  white-space: nowrap;

  background:
    linear-gradient(
      135deg,
      #17634d,
      #24916d 55%,
      #164d42
    );
}

#templateList {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    clamp(8px, 1.3vw, 15px);
}

.template-item {
  padding: 7%;

  border:
    1px solid rgba(255,255,255,.10);

  border-radius:
    clamp(13px, 1.7vw, 20px);

  background:
    rgba(255,255,255,.05);
}

.template-item-name {
  color: #ffffff;

  font-size:
    clamp(14px, 1.5vw, 19px);

  font-weight: 900;

  overflow-wrap: anywhere;
}

.template-item-meta {
  margin-top: .5em;

  color: #b9d9ff;

  font-size:
    clamp(10px, 1vw, 12px);
}

.template-item-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  gap:
    clamp(7px, 1vw, 11px);

  margin-top: 8%;
}

.template-load-btn {
  width: fit-content;
  min-width: 0;

  margin: 0;
  padding:
    clamp(8px, .9vw, 11px)
    clamp(14px, 1.6vw, 21px);

  white-space: nowrap;

  background:
    linear-gradient(
      135deg,
      #173d6c,
      #285c9e 55%,
      #202d70
    );
}

.template-delete-btn {
  min-width: 2.8em;

  margin: 0;
  padding-left: .7em;
  padding-right: .7em;

  background:
    linear-gradient(
      135deg,
      #48121c,
      #75202c 55%,
      #3c1019
    );
}

.template-library-footer {
  display: flex;
  justify-content: center;

  margin-top: 3%;
  padding-top: 3%;

  border-top:
    1px solid rgba(255,255,255,.10);
}

#closeTemplateLibraryBtn {
  width: fit-content;
  min-width: 0;

  margin: 0;
  padding:
    clamp(9px, 1vw, 12px)
    clamp(24px, 3vw, 38px);

  white-space: nowrap;

  background:
    linear-gradient(
      135deg,
      #4c1837,
      #71305f 52%,
      #38213f
    );
}

.template-empty {
  grid-column: 1 / -1;

  padding: 8%;

  color: #c5ccdf;
  text-align: center;

  border:
    1px dashed rgba(255,255,255,.18);

  border-radius: 1em;
}

body.ip-timeline-card-active
.photo-text-row.template-media-slot {
  border:
    .12em dashed rgba(255,173,97,.72);

  background:
    linear-gradient(
      145deg,
      rgba(255,138,0,.13),
      rgba(255,81,109,.055)
    );
}

body.ip-timeline-card-active
.photo-text-row.template-media-slot
.photo-thumb {
  cursor: default;

  object-fit: cover;

  background:
    linear-gradient(
      145deg,
      #202a3b,
      #344156
    );
}

body.ip-timeline-card-active
.photo-text-row.template-media-slot
.timeline-sequence-name {
  color: #ffad61;
}

@media
  (max-width: 767px) {

  #templateList {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .template-save-row {
    grid-template-columns:
      minmax(0, 1fr);
  }

  #saveCurrentTemplateBtn {
    width: fit-content;

    justify-self: center;

    margin-top: 3%;
  }

  #closeTemplateLibraryBtn {
    width: fit-content;
  }

}

@media
  (max-width: 390px) {

  #templateList {
    grid-template-columns:
      minmax(0, 1fr);
  }

}


/* ***** 04EA - PHOTO ARRANGE MODE ***** */

.photo-arrange-bar {
  display: none !important;
}

#arrangePhotosBtn {
  padding: 8px 14px;
  border-radius: 14px;
  background: #1565c0;
  font-size: 14px;
}

#photoTimeBtn {
  padding: 8px 14px;
  border-radius: 14px;
  background: #1565c0;
  font-size: 14px;
}

#transitionBtn {
  padding: 8px 14px;
  border-radius: 14px;
  background: #1565c0;
  font-size: 14px;
}

.photo-time-input {
  display: none;
}

body.ip-time-active {
  overflow: hidden;
}

body.ip-time-active #photoTextList {
  position: fixed;
  inset: 0;
  z-index: 10001;

  max-height: none;
  overflow-y: visible;

  margin: 0;
  padding: 120px 14px 24px;

  background: rgba(15,47,95,.96);

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-content: start;
  align-items: start;

  text-align: center;
}


body.ip-time-active .photo-text-row {
  display: block;
  margin: 0;
  padding: 8px;

  border-radius: 16px;
  background: rgba(255,255,255,.12);
}

body.ip-time-active .photo-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
}

body.ip-time-active .photo-caption-input {
  display: none;
}

body.ip-time-active .photo-time-input {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;

  border-radius: 12px;
  border: 0;

  text-align: center;
  font-size: 15px;
  font-weight: 800;
}

body.ip-time-active #arrangeToolbar {
  display: flex;
  position: fixed;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 10002;

  justify-content: space-between;
  align-items: center;

  padding: 10px 12px;
  border-radius: 18px;

  background: rgba(255,255,255,.96);
  color: #1565c0;

  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}

#timeModeNote {
  display: none;
}

body.ip-time-active #timeModeNote {
  display: block;

  position: fixed;
  top: 72px;
  left: 14px;
  right: 14px;

  z-index: 10002;

  padding: 8px 12px;

  border-radius: 14px;

  background: rgba(255,255,255,.16);

  color: #ffffff;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

#arrangeToolbar {
  display: none;
}

body.ip-arrange-active {
  overflow: hidden;
}

body.ip-arrange-active #photoTextList {
  position: fixed;
  inset: 0;
  z-index: 10001;

  max-height: none;
  overflow-y: auto;

  margin: 0;
  padding: 78px 14px 24px;

  background: rgba(15,47,95,.96);

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-content: start;
  align-items: start;

  text-align: center;
}

body.ip-arrange-active .photo-text-row {
  display: block;
  margin: 0;
  padding: 0;
  height: auto;
  align-self: start;

  border-radius: 16px;
  background: rgba(255,255,255,.12);

  touch-action: none;
}

body.ip-arrange-active .photo-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
}

body.ip-arrange-active .photo-caption-input {
  display: none;
}

body.ip-arrange-active #arrangeToolbar {
  display: flex;
  position: fixed;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 10002;

  justify-content: space-between;
  align-items: center;

  padding: 10px 12px;
  border-radius: 18px;

  background: rgba(255,255,255,.96);
  color: #1565c0;

  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}

#arrangeTitle {
  font-size: 15px;
  font-weight: 800;
}

#doneArrangeBtn {
  padding: 8px 16px;
  border-radius: 14px;
  background: #ff8a00;
  font-size: 14px;
}

.photo-text-row.dragging {
  opacity: .45;
}

/* ***** 04F - PHOTO PREVIEW POPUP ***** */

#photoPreviewBox {
  display: none;

  position: relative;
  top: auto;
  left: auto;
  transform: none;

  width: 86%;
  max-width: 430px;

  margin: 18px auto 26px;
  padding: 12px;

  z-index: 10020;

  background: rgba(255,255,255,.98);
  border: 1px solid rgba(21,101,192,.18);
  border-radius: 20px;

  text-align: center;

  box-shadow:
    0 35px 90px rgba(0,0,0,.36),
    0 12px 30px rgba(0,0,0,.22);
}

body.ip-photo-preview-active #timelineCardBox {
  display: none !important;
}

body.ip-photo-preview-active #photoPreviewBox {
  display: block;
}

#photoPreviewFrame {
  position: relative;

  width: 100%;
  max-width: 420px;
  max-height: none;

  margin: 0 auto;

  transform-origin: top center;

  aspect-ratio: 4 / 5;

  border-radius: 18px;
  overflow: hidden;
  background: #000;

  box-shadow: 0 24px 70px rgba(0,0,0,.45);

  touch-action: none;
  cursor: grab;
}

#timelineSpeechPreviewText {
  position: absolute;
  left: 50%;
  top: 72%;

  z-index: 8;

  width: 78%;

  transform:
    translate(-50%, -50%);

  color: #ffffff;

  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;

  white-space: normal;
  overflow-wrap: anywhere;

  pointer-events: none;

  text-shadow:
    0 0 4px rgba(0,0,0,1),
    0 0 9px rgba(0,0,0,.95),
    0 2px 4px rgba(0,0,0,.90);
}

#timelineSpeechLiveDock {
  width: 100%;
  margin: 0 0 7px;
  padding: 7px;

  border-radius: 14px;
  background: rgba(255,255,255,.98);
  border: 2px solid rgba(255,138,0,.55);

  box-shadow:
    0 10px 24px rgba(0,0,0,.16);
}

#timelineSpeechList > #timelineSpeechLiveDock {
  grid-column: 1 / -1;
}

.timeline-speech-live-controls {
  display: grid;
  grid-template-columns:
    minmax(0, .85fr)
    minmax(0, 1.35fr)
    52px;

  gap: 5px;
  align-items: center;
  margin-top: 7px;
}

.timeline-speech-live-size {
  display: grid;
  grid-template-columns: 29px 1fr 29px;
  gap: 3px;
  align-items: center;
}

.timeline-speech-live-position {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}

.timeline-speech-live-size button,
.timeline-speech-live-position button {
  min-width: 0;
  width: 100%;
  height: 30px;

  margin: 0;
  padding: 0;

  border-radius: 8px;

  font-size: 15px;
  font-weight: 900;
  line-height: 30px;
}

.timeline-speech-live-size button {
  background: #ff8a00;
}

.timeline-speech-live-position button {
  background: #1565c0;
}

#timelineSpeechSizeInfo {
  min-width: 0;
  height: 30px;
  padding: 0 2px;

  border-radius: 8px;
  background: rgba(21,101,192,.10);
  color: #1565c0;

  font-size: 10px;
  font-weight: 900;
  line-height: 30px;
  text-align: center;
}

.timeline-live-crop-btn {
  width: 52px;
  min-width: 52px;
  height: 30px;

  margin: 0;
  padding: 0 3px;

  border-radius: 8px;
  background: #ff8a00;

  font-size: 10px;
  font-weight: 900;
  line-height: 30px;
}

#timelineSpeechList #photoPreviewFrame {
  width: 100%;
  max-width: 310px;
  margin: 0 auto;
}

#timelineSpeechList .timeline-speech-item.selected {
  margin-top: 0;
}

#photoPreviewImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#photoPreviewInner {
  text-align: center;
}

#photoPreviewActions {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  margin-top: 12px;
}

#photoPreviewActions button {
  min-width: 0;
  height: 40px;

  margin: 0;
  padding: 0 18px;

  border-radius: 10px;

  font-size: 12px;
  font-weight: 900;
  line-height: 40px;
  white-space: nowrap;
}

#deletePreviewPhotoBtn,
#downloadPreviewMediaBtn {
  display: none !important;
}

#closePreviewPhotoBtn {
  width: 56%;
  max-width: 210px;
  background: #1565c0;
}

#saveCropPhotoBtn {
  background: #ff8a00;
}

#cancelFreePreviewBtn {
  background: #1565c0;
}

.timeline-audio-source-box {
  margin-top: 10px;
  padding: 8px;

  border-radius: 13px;
  background: rgba(21,101,192,.07);
}

.timeline-audio-source-title {
  margin-bottom: 7px;

  color: #1565c0;

  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.timeline-audio-source-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.timeline-audio-source-btn {
  min-width: 0;
  height: 42px;

  margin: 0;
  padding: 4px 3px;

  border: 2px solid transparent;
  border-radius: 10px;

  background: #eef4ff;
  color: #1565c0;

  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
}

.timeline-audio-source-btn.selected {
  border-color: #ff8a00;
  background: #ffffff;
  color: #ff8a00;

  box-shadow:
    0 5px 14px rgba(255,138,0,.20);
}

.timeline-audio-source-panel {
  display: none;
  margin-top: 8px;
}

.timeline-audio-source-panel.open {
  display: block;
}

.timeline-audio-source-placeholder {
  padding: 8px 10px;

  border-radius: 10px;
  background: rgba(21,101,192,.08);
  color: #52616f;

  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.timeline-voice-action-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}

#timelineAiVoiceControls {
  display: flex !important;
  justify-content: center;
  align-items: center;

  width: 100%;
  gap: 18px;

  margin-top: 10px;
}

#timelineAiVoiceControls.audio-source-hidden {
  display: none !important;
}

.timeline-upload-voice-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.timeline-upload-voice-actions button {
  min-width: 0;
  margin: 0;
  padding: 9px 5px;
  border-radius: 10px;
  font-size: 12px;
}

#timelineChooseVoiceFileBtn {
  background: #1565c0;
}

#timelineRemoveVoiceFileBtn {
  display: none;
  background: #c62828;
}

#timelineUploadedVoiceInfo {
  margin-top: 7px;
  padding: 7px 8px;

  border-radius: 10px;
  background: rgba(21,101,192,.08);
  color: #52616f;

  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;

  overflow-wrap: anywhere;
}

#timelineUploadedVoicePreview {
  display: none;
  width: 100%;
  margin-top: 7px;
}

.timeline-record-voice-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.timeline-record-voice-actions button {
  min-width: 0;
  margin: 0;
  padding: 9px 5px;
  border-radius: 10px;
  font-size: 12px;
}

#timelineStartVoiceRecordBtn {
  background: #c62828;
}

#timelineStopVoiceRecordBtn {
  display: none;
  background: #1565c0;
}

#timelineRemoveRecordedVoiceBtn {
  display: none;
  background: #c62828;
}

#timelineRecordedVoiceInfo {
  margin-top: 7px;
  padding: 7px 8px;

  border-radius: 10px;
  background: rgba(21,101,192,.08);
  color: #52616f;

  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

#timelineRecordedVoicePreview {
  display: none;
  width: 100%;
  margin-top: 7px;
}

#timelineRecordedVoiceInfo.recording {
  background: rgba(198,40,40,.10);
  color: #c62828;
}

#timelineGenderBtn,
#timelineVoiceBtn {
  width: 66px;
  height: 66px;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#timelineGenderBtn img {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain;
}

#timelineVoiceBtn {
  font-size: 34px !important;
  line-height: 1 !important;
}

/* ***** 04FAB - HORIZONTAL 2026 TIMELINE EDITOR ***** */

/*
  Important:
  - Visual redesign only
  - No HTML structure changed
  - No ID changed
  - No JavaScript or editor logic changed
*/

/* Main editor card */

body.ip-photo-preview-active
#photoPreviewBox {
  position: relative;
  top: auto;
  left: auto;
  transform: none;

  width: 96%;
  max-width: none;
  min-width: 0;

  margin: 2% auto 4%;
  padding: clamp(14px, 2.3vw, 32px);

  color: #f7f8ff;
  text-align: left;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius:
    clamp(24px, 3vw, 40px);

  background:
    radial-gradient(
      circle at 7% 4%,
      rgba(48,145,255,.24),
      transparent 29%
    ),
    radial-gradient(
      circle at 93% 8%,
      rgba(141,87,255,.20),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      rgba(28,34,63,.98),
      rgba(8,11,26,.99)
    );

  box-shadow:
    0 34px 90px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.09);

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  overflow: hidden;
}

body.ip-photo-preview-active
#photoPreviewBox::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  border-radius: inherit;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.07),
      transparent 25%,
      transparent 72%,
      rgba(141,87,255,.06)
    );
}

/*
  Two-part editor:
  Left  = controls
  Right = preview, trim and speeches
*/

body.ip-photo-preview-active
#photoPreviewInner {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 42fr)
    minmax(0, 58fr);

  grid-template-areas:
    "duration right"
    "controls right"
    "actions right";

  grid-template-rows:
    max-content
    max-content
    minmax(0, 1fr);

  column-gap:
    clamp(14px, 2.2vw, 34px);

  row-gap:
    clamp(9px, 1.2vw, 16px);

  align-content: start;
  align-items: start;

  width: 100%;
  min-width: 0;

  text-align: left;
}

/* Independent right column */

body.ip-photo-preview-active
#timelineRightColumn {
  grid-area: right;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  grid-auto-flow: row;
  grid-auto-rows: max-content;

  gap:
    clamp(5px, .7vw, 9px);

  align-content: start;
  align-items: start;
  align-self: start;

  width: 100%;
  min-width: 0;
}

body.ip-photo-preview-active
#timelineRightColumn >
#timelineSpeechLiveDock,
body.ip-photo-preview-active
#timelineRightColumn >
#timelineTrimWorkspace {
  grid-area: auto;
  grid-column: 1;
  width: 100%;
  min-width: 0;
}

/* Shared panel appearance */

body.ip-photo-preview-active
#timelineEditMediaDuration,
body.ip-photo-preview-active
#timelineSpeechLiveDock,
body.ip-photo-preview-active
#timelineEditControls,
body.ip-photo-preview-active
#timelineVideoTrimBox,
body.ip-photo-preview-active
#timelineVideoVisibleRange,
body.ip-photo-preview-active
#timelineTrimPlayBtn {
  position: relative;
  z-index: 1;

  width: 100%;
  min-width: 0;

  margin: 0;
}

/* Media duration — upper left */

body.ip-photo-preview-active
#timelineEditMediaDuration {
  grid-area: duration;

  grid-template-columns:
    minmax(34px, 14%)
    minmax(0, 72%)
    minmax(34px, 14%);

  gap:
    clamp(5px, .8vw, 9px);

  padding:
    clamp(10px, 1.3vw, 16px);

  border:
    1px solid rgba(116,178,255,.22);

  border-radius:
    clamp(14px, 1.7vw, 20px);

  background:
    linear-gradient(
      135deg,
      rgba(48,145,255,.14),
      rgba(84,81,255,.08)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08);
}

body.ip-photo-preview-active
#timelineEditMediaDuration.video {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height:
    clamp(54px, 6vw, 72px);

  padding:
    clamp(8px, 1vw, 12px)
    4%;
}

body.ip-photo-preview-active
#timelineEditMediaDuration button {
  width: 100%;
  min-width: 0;
  height: auto;

  min-height:
    clamp(38px, 4vw, 48px);

  margin: 0;
  padding: 0;

  border:
    1px solid rgba(255,255,255,.13);

  border-radius:
    clamp(9px, 1.1vw, 13px);

  background:
    linear-gradient(
      135deg,
      #173d6c,
      #285c9e 55%,
      #202d70
    );

  color: #ffffff;

  font-size:
    clamp(18px, 2vw, 25px);

  font-weight: 900;
  line-height: 1;

  box-shadow:
    0 7px 15px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.12);
}

body.ip-photo-preview-active
#timelineEditMediaDurationInfo {
  width: 100%;
  min-width: 0;

  color: #b9d9ff;

  font-size:
    clamp(12px, 1.3vw, 16px);

  font-weight: 900;
  line-height: 1.35;
  text-align: center;

  white-space: normal;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}

/* Preview panel — right */

body.ip-photo-preview-active
#timelineSpeechLiveDock {
  grid-area: preview;

  padding:
    clamp(10px, 1.4vw, 18px);

  border:
    1px solid rgba(141,87,255,.26);

  border-radius:
    clamp(17px, 2vw, 25px);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(141,87,255,.15),
      transparent 48%
    ),
    rgba(255,255,255,.045);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 16px 35px rgba(0,0,0,.20);
}

body.ip-photo-preview-active
#photoPreviewStage {
  position: relative;

  display: grid;
  place-items: center;

  width: 72%;
  max-width: none;
  min-width: 0;

  aspect-ratio: 1 / 1;

  margin: 0 auto;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.13);

  border-radius:
    clamp(14px, 1.8vw, 23px);

  background: #000000;

  box-shadow:
    0 24px 55px rgba(0,0,0,.42),
    0 0 0 4px rgba(141,87,255,.07);
}

body.ip-photo-preview-active
#photoPreviewFrame {
  position: relative;

  width: 80%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;

  margin: 0;

  overflow: hidden;

  border: 0;
  border-radius:
    clamp(11px, 1.5vw, 18px);

  background: #000000;

  box-shadow: none;

  transform-origin: center;
}

body.ip-photo-preview-active
#photoPreviewImage,
body.ip-photo-preview-active
#photoPreviewVideo {
  width: 100%;
  height: 100%;

  border-radius: inherit;

  object-fit: cover;
}

/* Controls directly under preview */

body.ip-photo-preview-active
.timeline-speech-live-controls {
  display: grid;

  grid-template-columns:
    minmax(0, 26fr)
    minmax(0, 54fr)
    minmax(0, 20fr);

  gap:
    clamp(5px, .8vw, 10px);

  width: 100%;
  min-width: 0;

  margin-top:
    clamp(9px, 1.2vw, 15px);

  padding:
    clamp(8px, 1.1vw, 13px);

  border:
    1px solid rgba(255,255,255,.09);

  border-radius:
    clamp(11px, 1.4vw, 17px);

  background:
    rgba(255,255,255,.045);
}

body.ip-photo-preview-active
.timeline-speech-live-size {
  grid-template-columns:
    minmax(0, 28fr)
    minmax(0, 44fr)
    minmax(0, 28fr);

  gap:
    clamp(3px, .45vw, 6px);
}

body.ip-photo-preview-active
.timeline-speech-live-position {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    clamp(3px, .45vw, 6px);
}

body.ip-photo-preview-active
.timeline-speech-live-size button,
body.ip-photo-preview-active
.timeline-speech-live-position button,
body.ip-photo-preview-active
#saveCropPhotoBtn {
  width: 100%;
  min-width: 0;

  height: auto;
  min-height:
    clamp(34px, 3.7vw, 43px);

  margin: 0;
  padding:
    clamp(5px, .7vw, 9px);

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:
    clamp(8px, 1vw, 12px);

  color: #ffffff;

  font-size:
    clamp(12px, 1.35vw, 17px);

  font-weight: 900;
  line-height: 1;

  box-shadow:
    0 7px 14px rgba(0,0,0,.19),
    inset 0 1px 0 rgba(255,255,255,.11);
}

body.ip-photo-preview-active
.timeline-speech-live-size button {
  background:
    linear-gradient(
      135deg,
      #4b2a14,
      #785126
    );
}

body.ip-photo-preview-active
.timeline-speech-live-position button {
  background:
    linear-gradient(
      135deg,
      #173d6c,
      #285c9e
    );
}

body.ip-photo-preview-active
#timelineSpeechSizeInfo {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height:
    clamp(34px, 3.7vw, 43px);

  display: grid;
  place-items: center;

  padding:
    clamp(4px, .6vw, 8px);

  border:
    1px solid rgba(116,178,255,.17);

  border-radius:
    clamp(8px, 1vw, 12px);

  background:
    rgba(48,145,255,.10);

  color: #b9d9ff;

  font-size:
    clamp(10px, 1.1vw, 14px);

  line-height: 1;
}

body.ip-photo-preview-active
#saveCropPhotoBtn {
  background:
    linear-gradient(
      135deg,
      #4c1837,
      #71305f 52%,
      #38213f
    );
}

/* ***** COMPACT SPEECH D-PAD AND AUDIO MIX ***** */

body.ip-photo-preview-active
.timeline-speech-live-controls {
  grid-template-columns:
    minmax(0, 42fr)
    minmax(68px, 28fr)
    minmax(54px, 30fr);

  align-items: center;
}

body.ip-photo-preview-active
.timeline-speech-dpad {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  grid-template-rows:
    repeat(3, minmax(0, 1fr));

  gap:
    clamp(2px, .35vw, 4px);

  width:
    clamp(68px, 7vw, 84px);

  max-width: 100%;

  aspect-ratio: 1 / 1;

  justify-self: center;
}

body.ip-photo-preview-active
.timeline-speech-dpad button,
body.ip-photo-preview-active
.timeline-speech-dpad-center {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;

  display: grid;
  place-items: center;

  margin: 0;
  padding: 0;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:
    clamp(5px, .7vw, 8px);

  color: #ffffff;

  font-size:
    clamp(10px, 1.15vw, 14px);

  font-weight: 900;
  line-height: 1;

  background:
    linear-gradient(
      135deg,
      #173d6c,
      #285c9e
    );

  box-shadow:
    0 4px 9px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}

body.ip-photo-preview-active
.timeline-speech-dpad-center {
  color: #91c4ff;

  background:
    rgba(48,145,255,.10);
}

.timeline-speech-dpad-up {
  grid-column: 2;
  grid-row: 1;
}

.timeline-speech-dpad-left {
  grid-column: 1;
  grid-row: 2;
}

.timeline-speech-dpad-center {
  grid-column: 2;
  grid-row: 2;
}

.timeline-speech-dpad-right {
  grid-column: 3;
  grid-row: 2;
}

.timeline-speech-dpad-down {
  grid-column: 2;
  grid-row: 3;
}

.timeline-audio-mix-control {
  width: 100%;
  min-width: 0;
}

#timelineAudioMixToggleBtn {
  width: auto;

  min-width:
    clamp(145px, 18vw, 205px);

  min-height:
    clamp(36px, 3.8vw, 45px);

  display: flex;

  align-items: center;
  justify-content: center;

  gap:
    clamp(5px, .8vw, 9px);

  margin: 0;
  padding:
    clamp(6px, .8vw, 10px)
    clamp(8px, 1vw, 13px);

  border:
    1px solid rgba(87,235,218,.28);

  border-radius:
    clamp(8px, 1vw, 12px);

  background:
    linear-gradient(
      135deg,
      #164d42,
      #17634d 50%,
      #173d6c
    );

  color: #ffffff;

  font-size:
    clamp(10px, 1.1vw, 14px);

  font-weight: 900;
  line-height: 1.1;

  box-shadow:
    0 7px 15px rgba(0,0,0,.19),
    inset 0 1px 0 rgba(255,255,255,.11);
}

#timelineAudioMixToggleBtn.open {
  border-color:
    rgba(87,235,218,.70);

  background:
    linear-gradient(
      135deg,
      #17634d,
      #24916d 55%,
      #174f83
    );
}

#timelineAudioMixToggleLabel {
  min-width: 0;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#timelineAudioMixSummary {
  min-width:
    clamp(34px, 3.8vw, 46px);

  padding:
    clamp(4px, .5vw, 6px);

  border-radius:
    clamp(6px, .8vw, 9px);

  background:
    rgba(255,255,255,.11);

  color: #b9fff0;

  text-align: center;
  white-space: nowrap;
}

.timeline-audio-mix-panel {
  display: none;

  grid-column: 1 / -1;

  width: 100%;
  min-width: 0;

  margin-top:
    clamp(4px, .7vw, 8px);

  padding:
    clamp(8px, 1.1vw, 13px);

  border:
    1px solid rgba(87,235,218,.18);

  border-radius:
    clamp(10px, 1.3vw, 16px);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(48,208,216,.11),
      transparent 54%
    ),
    rgba(7,11,26,.72);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

.timeline-audio-mix-panel.open {
  display: grid;

  gap:
    clamp(6px, .8vw, 10px);
}

.timeline-audio-mix-row {
  display: grid;

  grid-template-columns:
    minmax(92px, 24fr)
    minmax(90px, 48fr)
    minmax(42px, 10fr)
    minmax(64px, 18fr);

  gap:
    clamp(5px, .8vw, 10px);

  align-items: center;

  width: 100%;
  min-width: 0;

  padding:
    clamp(5px, .7vw, 8px);

  border-radius:
    clamp(7px, .9vw, 11px);

  background:
    rgba(255,255,255,.045);
}

.timeline-audio-mix-row label {
  min-width: 0;

  color: #dce1f0;

  font-size:
    clamp(9px, 1vw, 13px);

  font-weight: 850;
  line-height: 1.15;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-audio-mix-row input[type="range"] {
  width: 100%;
  min-width: 0;

  margin: 0;

  accent-color: #30d0d8;
}

.timeline-audio-mix-row output {
  min-width: 0;

  color: #ffad61;

  font-size:
    clamp(10px, 1.05vw, 13px);

  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.timeline-audio-default-btn {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(28px, 3vw, 35px);

  margin: 0;
  padding:
    clamp(4px, .55vw, 7px);

  border:
    1px solid rgba(255,255,255,.10);

  border-radius:
    clamp(6px, .8vw, 9px);

  background:
    linear-gradient(
      135deg,
      #4b2a14,
      #785126
    );

  color: #ffffff;

  font-size:
    clamp(8px, .9vw, 11px);

  font-weight: 900;
  line-height: 1;
}

@media
  (max-width: 767px)
  and (orientation: portrait) {

  body.ip-photo-preview-active
  .timeline-speech-live-controls {
    grid-template-columns:
      minmax(0, 34fr)
      minmax(70px, 28fr)
      minmax(0, 38fr);

    align-items: center;
  }

  body.ip-photo-preview-active
  #saveCropPhotoBtn {
    grid-column: 1 / -1;
  }

  .timeline-audio-mix-panel {
    grid-column: 1 / -1;
  }

  .timeline-audio-mix-row {
    grid-template-columns:
      minmax(78px, 26fr)
      minmax(70px, 44fr)
      minmax(38px, 12fr)
      minmax(58px, 18fr);
  }

}

@media
  (max-width: 390px)
  and (orientation: portrait) {

  .timeline-audio-mix-row {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1.25fr)
      auto;

    gap:
      clamp(4px, 1.4vw, 7px);
  }

  body.ip-photo-preview-active
  .timeline-audio-default-btn {
    grid-column: 1 / -1;

    width: fit-content;

    justify-self: end;

    padding-left: 4%;
    padding-right: 4%;
  }

}

/* Compact trim workspace */

body.ip-photo-preview-active
#timelineTrimWorkspace {
  grid-area: trim;

  display: none;

  grid-template-columns:
    minmax(0, 58fr)
    minmax(0, 21fr)
    minmax(0, 21fr);

  gap:
    clamp(7px, 1vw, 12px);

  align-items: stretch;

  width: 100%;
  min-width: 0;

  margin: 0;
}

body.ip-photo-preview-active
#timelineTrimWorkspace:has(
  #timelineVideoTrimBox[style*="display: block"]
) {
  display: grid;
}

body.ip-photo-preview-active
#timelineTrimWorkspace
#timelineVideoTrimBox,
body.ip-photo-preview-active
#timelineTrimWorkspace
#timelineTrimPlayBtn,
body.ip-photo-preview-active
#timelineTrimWorkspace
#timelineVideoVisibleRange {
  grid-area: auto;

  width: 100%;
  min-width: 0;
  height: 100%;

  margin: 0 !important;
}

/* Current visible video range */

body.ip-photo-preview-active
#timelineVideoVisibleRange {
  min-height:
    clamp(76px, 8vw, 104px);

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    clamp(7px, .9vw, 11px) !important;

  border:
    1px solid rgba(116,178,255,.18);

  border-radius:
    clamp(10px, 1.2vw, 14px);

  background:
    rgba(48,145,255,.09);

  color: #b9d9ff !important;

  font-size:
    clamp(11px, 1.15vw, 15px) !important;

  text-align: center;
}

/* Play trim */

body.ip-photo-preview-active
#timelineTrimPlayBtn {
  min-height:
    clamp(76px, 8vw, 104px);

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    clamp(7px, .9vw, 11px);

  border:
    1px solid rgba(116,178,255,.23);

  border-radius:
    clamp(10px, 1.2vw, 14px);

  background:
    linear-gradient(
      135deg,
      #173d6c,
      #285c9e 55%,
      #202d70
    ) !important;

  color: #ffffff;

  font-size:
    clamp(11px, 1.2vw, 15px);

  font-weight: 900;

  box-shadow:
    0 8px 18px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.11);
}

/* Video trim panel */

body.ip-photo-preview-active
#timelineVideoTrimBox {
  grid-area: trim;

  padding:
    clamp(10px, 1.4vw, 17px);

  border:
    1px solid rgba(141,87,255,.22);

  border-radius:
    clamp(14px, 1.7vw, 21px);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(141,87,255,.12),
      transparent 48%
    ),
    rgba(255,255,255,.045);
}

body.ip-photo-preview-active
#timelineVideoTrimInfo {
  margin-bottom:
    clamp(7px, .9vw, 11px);

  color: #d4a9ff;

  font-size:
    clamp(11px, 1.2vw, 15px);

  font-weight: 900;
}

body.ip-photo-preview-active
.timeline-trim-label-row {
  color: #c5ccdf;

  font-size:
    clamp(10px, 1.05vw, 13px);
}

body.ip-photo-preview-active
#timelineTrimRail {
  margin:
    clamp(8px, 1vw, 12px)
    0;

  border:
    1px solid rgba(255,255,255,.10);

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.08),
      rgba(141,87,255,.13)
    );
}

body.ip-photo-preview-active
#saveTimelineVideoTrimBtn {
  min-height:
    clamp(40px, 4.3vw, 50px);

  margin-top:
    clamp(7px, .9vw, 11px) !important;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:
    clamp(10px, 1.2vw, 14px);

  background:
    linear-gradient(
      135deg,
      #17634d,
      #24916d 55%,
      #164d42
    ) !important;

  color: #ffffff;

  font-size:
    clamp(11px, 1.2vw, 15px);

  font-weight: 900;

  box-shadow:
    0 8px 18px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.11);

  transition:
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

body.ip-photo-preview-active
#saveTimelineVideoTrimBtn.trim-saved {
  background:
    linear-gradient(
      135deg,
      #174f83,
      #267ab2 55%,
      #253d88
    ) !important;

  box-shadow:
    0 0 0 3px rgba(48,145,255,.14),
    0 9px 20px rgba(48,145,255,.24),
    inset 0 1px 0 rgba(255,255,255,.18);
}

/* Main speech/control panel — left */

body.ip-photo-preview-active
#timelineEditControls {
  grid-area: controls;

  width: 100%;
  min-width: 0;

  margin: 0 !important;
  padding:
    clamp(12px, 1.6vw, 20px) !important;

  border:
    1px solid rgba(255,255,255,.09);

  border-radius:
    clamp(17px, 2vw, 25px) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.025)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

/* Add speech toolbar */

body.ip-photo-preview-active
.timeline-speech-toolbar {
  grid-template-columns:
    minmax(0, 30fr)
    minmax(0, 70fr);

  gap:
    clamp(6px, .9vw, 11px);

  width: 100%;
  min-width: 0;

  margin-bottom:
    clamp(8px, 1.1vw, 13px);
}

body.ip-photo-preview-active
#timelineSpeechCurrentTime,
body.ip-photo-preview-active
#addTimelineSpeechBtn {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(40px, 4.3vw, 50px);

  margin: 0;
  padding:
    clamp(7px, .9vw, 11px);

  border:
    1px solid rgba(255,255,255,.11);

  border-radius:
    clamp(9px, 1.1vw, 13px);

  font-size:
    clamp(11px, 1.15vw, 14px);

  font-weight: 900;
}

body.ip-photo-preview-active
#timelineSpeechCurrentTime {
  display: grid;
  place-items: center;

  background:
    rgba(48,145,255,.10);

  color: #b9d9ff;
}

body.ip-photo-preview-active
#addTimelineSpeechBtn {
  background:
    linear-gradient(
      135deg,
      #173d6c,
      #285c9e 55%,
      #202d70
    );

  color: #ffffff;

  box-shadow:
    0 8px 18px rgba(0,0,0,.19),
    inset 0 1px 0 rgba(255,255,255,.11);
}

/* Speech visual timeline */

body.ip-photo-preview-active
#timelineSpeechOverview {
  margin:
    0 0 clamp(9px, 1.2vw, 14px);

  padding:
    clamp(9px, 1.2vw, 14px);

  border:
    1px solid rgba(141,87,255,.22);

  border-radius:
    clamp(12px, 1.5vw, 18px);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(141,87,255,.12),
      transparent 52%
    ),
    rgba(255,255,255,.045);
}

body.ip-photo-preview-active
.timeline-speech-overview-time {
  color: #c5ccdf;

  font-size:
    clamp(10px, 1vw, 13px);
}

body.ip-photo-preview-active
#timelineSpeechOverviewRail {
  border:
    1px solid rgba(255,255,255,.10);

  background:
    repeating-linear-gradient(
      90deg,
      rgba(145,196,255,.13) 0,
      rgba(145,196,255,.13) 1px,
      transparent 1px,
      transparent 10%
    ),
    rgba(7,11,26,.72);
}

body.ip-photo-preview-active
.timeline-speech-overview-block {
  border-color:
    rgba(255,255,255,.80);

  background:
    linear-gradient(
      135deg,
      #3091ff,
      #5451ff
    );

  box-shadow:
    0 5px 12px rgba(0,0,0,.28);
}

body.ip-photo-preview-active
.timeline-speech-overview-block.selected {
  background:
    linear-gradient(
      135deg,
      #ff8a00,
      #ff516d
    );
}

/* Speech list */

body.ip-photo-preview-active
#timelineSpeechList {
  display: grid;

  gap:
    clamp(6px, .8vw, 10px);

  width: 100%;
  min-width: 0;

  margin-bottom:
    clamp(9px, 1.2vw, 14px);
}

body.ip-photo-preview-active
.timeline-speech-item {
  grid-template-columns:
    minmax(0, 29fr)
    minmax(0, 61fr)
    minmax(30px, 10fr);

  gap:
    clamp(5px, .7vw, 9px);

  width: 100%;
  min-width: 0;

  padding:
    clamp(7px, .9vw, 11px);

  border:
    1px solid rgba(255,255,255,.09);

  border-radius:
    clamp(10px, 1.3vw, 16px);

  background:
    rgba(255,255,255,.045);

  color: #dce1f0;
}

body.ip-photo-preview-active
.timeline-speech-item.selected {
  border-color:
    rgba(255,138,0,.72);

  background:
    linear-gradient(
      135deg,
      rgba(255,138,0,.15),
      rgba(255,81,109,.07)
    );

  box-shadow:
    0 0 0 3px rgba(255,138,0,.08),
    inset 0 1px 0 rgba(255,255,255,.08);
}

body.ip-photo-preview-active
.timeline-speech-time {
  color: #b9d9ff;

  font-size:
    clamp(10px, 1.05vw, 13px);
}

body.ip-photo-preview-active
.timeline-speech-text {
  color: #dce1f0;

  font-size:
    clamp(10px, 1.05vw, 13px);
}

body.ip-photo-preview-active
.timeline-speech-delete {
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 1 / 1;

  margin: 0;
  padding: 0;

  border:
    1px solid rgba(255,255,255,.14);

  background:
    linear-gradient(
      135deg,
      #48121c,
      #75202c
    );

  font-size:
    clamp(14px, 1.5vw, 19px);

  line-height: 1;
}

/* Caption and color */

body.ip-photo-preview-active
.timeline-caption-color-row {
  grid-template-columns:
    minmax(42px, 12%)
    minmax(0, 88%);

  gap:
    clamp(8px, 1.1vw, 13px);

  width: 100%;
  min-width: 0;

  margin:
    clamp(5px, .7vw, 9px)
    0 0;
}

body.ip-photo-preview-active
#timelineCaptionColorBtn {
  width: 100%;
  min-width: 0;
  max-width: 58px;
  height: auto;
  aspect-ratio: 1 / 1;

  justify-self: center;

  margin: 0;

  border:
    clamp(2px, .25vw, 3px)
    solid rgba(255,255,255,.78);

  box-shadow:
    0 0 0 3px rgba(48,145,255,.10),
    0 8px 18px rgba(0,0,0,.25);
}

body.ip-photo-preview-active
#timelineCaptionInput {
  width: 100% !important;
  min-width: 0;

  min-height:
    clamp(82px, 9vw, 112px);

  margin: 0;
  padding:
    clamp(9px, 1.1vw, 14px) !important;

  border:
    1px solid rgba(185,217,255,.42) !important;

  border-radius:
    clamp(10px, 1.2vw, 14px) !important;

  outline: none;

  background:
    rgba(225,235,250,.90);

  color: #17233b;

  font-size:
    clamp(12px, 1.2vw, 15px) !important;

  font-weight: 700;
  line-height: 1.45 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 7px 18px rgba(0,0,0,.10);
}

body.ip-photo-preview-active
#timelineCaptionInput:focus {
  border-color:
    rgba(48,145,255,.92) !important;

  background:
    rgba(239,245,255,.97);

  color: #101b31;

  box-shadow:
    0 0 0 3px rgba(48,145,255,.16),
    inset 0 1px 0 rgba(255,255,255,.95),
    0 9px 22px rgba(0,0,0,.12);
}

/* Speech color palette */

body.ip-photo-preview-active
#timelineSpeechColorPalette {
  width: 64%;
  max-width: none;

  gap:
    clamp(4px, .6vw, 8px);

  margin-top:
    clamp(6px, .8vw, 10px);

  padding:
    clamp(7px, 1vw, 12px);

  border:
    1px solid rgba(255,255,255,.13);

  border-radius:
    clamp(11px, 1.4vw, 17px);

  background:
    rgba(15,20,42,.98);

  box-shadow:
    0 14px 30px rgba(0,0,0,.35);
}

body.ip-photo-preview-active
.timeline-speech-color-option {
  border-color:
    rgba(255,255,255,.78);
}

body.ip-photo-preview-active
#timelineSpeechColorDoneBtn {
  height: auto;
  min-height:
    clamp(32px, 3.5vw, 40px);

  border-radius:
    clamp(8px, 1vw, 12px);

  background:
    linear-gradient(
      135deg,
      #173d6c,
      #285c9e
    );

  color: #ffffff;
}

/* Character capacity */

body.ip-photo-preview-active
#timelineCaptionCapacity {
  margin:
    clamp(7px, .9vw, 11px)
    0;

  padding:
    clamp(8px, 1vw, 12px);

  border:
    1px solid rgba(116,178,255,.15);

  border-radius:
    clamp(9px, 1.1vw, 13px);

  background:
    rgba(48,145,255,.08);

  color: #b9d9ff;

  font-size:
    clamp(10px, 1.05vw, 13px);

  white-space: normal;
}

body.ip-photo-preview-active
.timeline-caption-value,
body.ip-photo-preview-active
.timeline-speech-number,
body.ip-photo-preview-active
.timeline-voice-speech-number {
  color: #ffad61;
}

/* Extend scene */

body.ip-photo-preview-active
#extendTimelineCaptionDurationBtn {
  min-height:
    clamp(39px, 4.2vw, 48px);

  margin:
    clamp(7px, .9vw, 11px)
    0 0;

  border:
    1px solid rgba(255,176,91,.18);

  border-radius:
    clamp(9px, 1.1vw, 13px);

  background:
    linear-gradient(
      135deg,
      #4b2a14,
      #785126 55%,
      #45301c
    );

  color: #ffffff;

  font-size:
    clamp(11px, 1.1vw, 14px);
}

/* Voice source */

body.ip-photo-preview-active
.timeline-audio-source-box {
  margin-top:
    clamp(10px, 1.3vw, 16px);

  padding:
    clamp(10px, 1.4vw, 17px);

  border:
    1px solid rgba(141,87,255,.20);

  border-radius:
    clamp(13px, 1.6vw, 19px);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(141,87,255,.11),
      transparent 50%
    ),
    rgba(255,255,255,.04);
}

body.ip-photo-preview-active
.timeline-audio-source-title {
  margin-bottom:
    clamp(7px, .9vw, 11px);

  color: #d4a9ff;

  font-size:
    clamp(11px, 1.2vw, 15px);

  text-align: left;
}

body.ip-photo-preview-active
.timeline-audio-source-grid {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(6px, .9vw, 11px);
}

body.ip-photo-preview-active
.timeline-audio-source-btn {
  width: 100%;
  min-width: 0;

  height: auto;
  min-height:
    clamp(40px, 4.3vw, 50px);

  margin: 0;
  padding:
    clamp(7px, .9vw, 11px);

  border:
    1px solid rgba(255,255,255,.11);

  border-radius:
    clamp(9px, 1.1vw, 13px);

  background:
    linear-gradient(
      135deg,
      #202a3b,
      #344156
    );

  color: #dce1f0;

  font-size:
    clamp(10px, 1.1vw, 14px);

  box-shadow:
    0 7px 14px rgba(0,0,0,.17),
    inset 0 1px 0 rgba(255,255,255,.09);
}

body.ip-photo-preview-active
.timeline-audio-source-btn.selected {
  border-color:
    rgba(178,112,255,.72);

  background:
    linear-gradient(
      135deg,
      #38264f,
      #654078
    );

  color: #ffffff;

  box-shadow:
    0 8px 18px rgba(141,87,255,.20),
    inset 0 1px 0 rgba(255,255,255,.12);
}

body.ip-photo-preview-active
.timeline-audio-source-panel {
  margin-top:
    clamp(8px, 1vw, 12px);
}

body.ip-photo-preview-active
.timeline-upload-voice-actions {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(6px, .9vw, 11px);
}

body.ip-photo-preview-active
.timeline-upload-voice-actions button {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(38px, 4vw, 47px);

  margin: 0;
  padding:
    clamp(6px, .8vw, 10px);

  border:
    1px solid rgba(255,255,255,.11);

  border-radius:
    clamp(9px, 1.1vw, 13px);

  color: #ffffff;

  font-size:
    clamp(10px, 1.05vw, 13px);
}

body.ip-photo-preview-active
#timelineChooseVoiceFileBtn {
  background:
    linear-gradient(
      135deg,
      #173d6c,
      #285c9e
    );
}

body.ip-photo-preview-active
#timelineRemoveVoiceFileBtn {
  background:
    linear-gradient(
      135deg,
      #48121c,
      #75202c
    );
}

body.ip-photo-preview-active
#timelineUploadedVoiceInfo {
  margin-top:
    clamp(7px, .9vw, 11px);

  padding:
    clamp(8px, 1vw, 12px);

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    clamp(9px, 1.1vw, 13px);

  background:
    rgba(255,255,255,.045);

  color: #c5ccdf;

  font-size:
    clamp(10px, 1vw, 13px);
}

/* AI voice controls */

body.ip-photo-preview-active
#timelineAiVoiceControls {
  width: 100%;

  gap:
    clamp(12px, 2vw, 24px);

  margin-top:
    clamp(11px, 1.5vw, 18px);
}

body.ip-photo-preview-active
#timelineGenderBtn,
body.ip-photo-preview-active
#timelineVoiceBtn {
  width: 15%;
  min-width: 58px;
  max-width: 82px;
  height: auto;
  aspect-ratio: 1 / 1;

  margin: 0;

  border:
    1px solid rgba(255,255,255,.15);

  background:
    linear-gradient(
      145deg,
      #3091ff,
      #5451ff
    ) !important;

  box-shadow:
    0 12px 25px rgba(48,145,255,.22),
    inset 0 1px 0 rgba(255,255,255,.18);
}

body.ip-photo-preview-active
#timelineGenderBtn img {
  width: 82% !important;
  height: 82% !important;
}

/* Footer */

body.ip-photo-preview-active
#photoPreviewActions {
  grid-area: actions;

  align-self: center;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  min-width: 0;

  height: 100%;

  margin: 0;
  padding: 0;

  border-top: 0;
}

body.ip-photo-preview-active
#photoPreviewActions button {
  min-height:
    clamp(43px, 4.7vw, 54px);

  height: auto;

  margin: 0;
  padding:
    clamp(8px, 1vw, 12px);

  border:
    1px solid rgba(255,255,255,.13);

  border-radius:
    clamp(10px, 1.2vw, 14px);

  color: #ffffff;

  font-size:
    clamp(12px, 1.3vw, 16px);

  font-weight: 900;
  line-height: 1.15;

  box-shadow:
    0 9px 20px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.13);
}

body.ip-photo-preview-active
#closePreviewPhotoBtn {

  align-self: center;

  height:
    clamp(42px,4vw,48px);

  min-height:
    clamp(42px,4vw,48px);

  margin: 0;
  width: 100%;
  max-width: none;

  background:
    linear-gradient(
      135deg,
      #4c1837,
      #71305f 52%,
      #38213f
    );
}

body.ip-photo-preview-active
#cancelFreePreviewBtn {
  background:
    linear-gradient(
      135deg,
      #28223f,
      #49335f 55%,
      #30213e
    );
}

/* ***** TABLET ***** */

@media
  (min-width: 768px)
  and (max-width: 1100px) {

  body.ip-photo-preview-active
  #photoPreviewBox {
    width: 97%;

    padding:
      clamp(13px, 2vw, 22px);
  }

  body.ip-photo-preview-active
  #photoPreviewInner {
    grid-template-columns:
      minmax(0, 45fr)
      minmax(0, 55fr);

    column-gap: 1.7%;
  }

  body.ip-photo-preview-active
  #photoPreviewStage {
    width: 82%;
  }

  body.ip-photo-preview-active
  #closePreviewPhotoBtn {
    width: 44%;
  }

}

/* ***** MOBILE LANDSCAPE ***** */

@media
  (max-width: 767px)
  and (orientation: landscape) {

  body.ip-photo-preview-active
  #photoPreviewBox {
    width: 98%;

    margin: 1% auto 3%;
    padding:
      clamp(10px, 1.8vw, 15px);

    border-radius:
      clamp(18px, 3vw, 26px);
  }

  body.ip-photo-preview-active
  #photoPreviewInner {
    grid-template-columns:
      minmax(0, 44fr)
      minmax(0, 56fr);

    column-gap: 1.5%;
    row-gap: 7px;
  }

  body.ip-photo-preview-active
  #timelineEditMediaDuration,
  body.ip-photo-preview-active
  #timelineEditControls,
  body.ip-photo-preview-active
  #timelineSpeechLiveDock,
  body.ip-photo-preview-active
  #timelineVideoTrimBox {
    padding:
      clamp(7px, 1.2vw, 11px) !important;

    border-radius:
      clamp(12px, 2vw, 17px);
  }

  body.ip-photo-preview-active
  #photoPreviewStage {
    width: 74%;
  }

  body.ip-photo-preview-active
  .timeline-speech-live-controls {
    padding:
      clamp(5px, .9vw, 8px);

    gap: 1%;
  }

  body.ip-photo-preview-active
  #closePreviewPhotoBtn {
    width: 46%;
  }

}

/* ***** MOBILE PORTRAIT ***** */

@media
  (max-width: 767px)
  and (orientation: portrait) {

  body.ip-photo-preview-active
  #photoPreviewBox {
    width: 96%;

    margin: 3% auto 5%;
    padding:
      clamp(12px, 4vw, 18px);

    border-radius:
      clamp(20px, 6vw, 28px);
  }

  body.ip-photo-preview-active
  #photoPreviewInner {
    grid-template-columns:
      minmax(0, 1fr);

    grid-template-areas:
      "duration"
      "right"
      "controls"
      "actions";

    gap:
      clamp(9px, 2.5vw, 14px);
  }

  body.ip-photo-preview-active
  #photoPreviewStage {
    width: 100%;
  }

  body.ip-photo-preview-active
  #timelineTrimWorkspace {
    grid-template-columns:
      minmax(0, 56fr)
      minmax(0, 22fr)
      minmax(0, 22fr);

    gap:
      clamp(5px, 1.5vw, 8px);
  }

  body.ip-photo-preview-active
  #timelineTrimPlayBtn,
  body.ip-photo-preview-active
  #timelineVideoVisibleRange {
    min-height:
      clamp(68px, 18vw, 86px);

    padding:
      clamp(5px, 1.5vw, 8px) !important;

    font-size:
      clamp(9px, 2.5vw, 12px) !important;

    line-height: 1.25;
  }

  body.ip-photo-preview-active
  .timeline-speech-live-controls {
    grid-template-columns:
      minmax(0, 1fr);

    gap:
      clamp(7px, 2vw, 10px);
  }

  body.ip-photo-preview-active
  .timeline-speech-live-size,
  body.ip-photo-preview-active
  .timeline-speech-live-position {
    width: 100%;
  }

  body.ip-photo-preview-active
  #timelineEditMediaDuration {
    grid-template-columns:
      minmax(40px, 18%)
      minmax(0, 64%)
      minmax(40px, 18%);
  }

  body.ip-photo-preview-active
  #timelineSpeechColorPalette {
    width: 100%;
  }

  body.ip-photo-preview-active
  #timelineGenderBtn,
  body.ip-photo-preview-active
  #timelineVoiceBtn {
    width: 20%;
    min-width: 60px;
  }

  body.ip-photo-preview-active
  #closePreviewPhotoBtn {
    width: 100%;
  }

}

/* ***** EXTRA-NARROW MOBILE ***** */

@media
  (max-width: 390px)
  and (orientation: portrait) {

  body.ip-photo-preview-active
  .timeline-speech-toolbar,
  body.ip-photo-preview-active
  .timeline-audio-source-grid,
  body.ip-photo-preview-active
  .timeline-upload-voice-actions {
    grid-template-columns:
      minmax(0, 1fr);
  }

  body.ip-photo-preview-active
  .timeline-caption-color-row {
    grid-template-columns:
      minmax(0, 1fr);
  }

  body.ip-photo-preview-active
  #timelineCaptionColorBtn {
    width: 18%;
  }

}

body.ip-photo-preview-active
#photoPreviewActions
#closePreviewPhotoBtn {
  width: 100%;
  max-width: none;
}

/* ***** 04FAC - COMPACT UNIFIED MEDIA EDITOR ***** */

body.ip-photo-preview-active
#timelineAudioMixToggleBtn {
  display: none !important;
}

body.ip-photo-preview-active
#timelineRightColumn {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  gap:
    clamp(7px, 1vw, 12px);

  align-content: start;
}

body.ip-photo-preview-active
#timelineRightTools {
  display: grid;

  grid-template-columns:
    minmax(0, 42fr)
    minmax(0, 58fr);

  grid-template-areas:
    "effect voice"
    "effect voicebuttons";

  gap:
    clamp(7px, 1vw, 12px);

  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(8px, 1.1vw, 13px);

  border:
    1px solid rgba(141,87,255,.20);

  border-radius:
    clamp(13px, 1.7vw, 20px);

  background:
    linear-gradient(
      145deg,
      rgba(141,87,255,.09),
      rgba(48,145,255,.045)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

body.ip-photo-preview-active
#timelineRightTools
.timeline-speech-effect-box {
  grid-area: effect;

  align-self: stretch;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  grid-template-rows:
    auto auto;

  gap:
    clamp(6px, .8vw, 10px);

  margin: 0;
  padding:
    clamp(8px, 1vw, 12px);
}

body.ip-photo-preview-active
#timelineRightTools
.timeline-speech-effect-field {
  grid-template-columns:
    minmax(0, 34fr)
    minmax(0, 66fr);
}

body.ip-photo-preview-active
#timelineRightTools
#previewTimelineSpeechEffectBtn {
  min-height:
    clamp(36px, 3.8vw, 45px);
}

body.ip-photo-preview-active
#timelineRightTools
.timeline-audio-source-box {
  grid-area: voice;

  align-self: start;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(8px, 1vw, 12px);
}

body.ip-photo-preview-active
#timelineRightTools
.timeline-audio-source-title {
  margin-bottom:
    clamp(5px, .7vw, 8px);

  text-align: center;
}

body.ip-photo-preview-active
#timelineRightTools
.timeline-audio-source-grid {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(5px, .7vw, 8px);
}

body.ip-photo-preview-active
#timelineRightTools
.timeline-audio-source-btn {
  min-height:
    clamp(35px, 3.8vw, 44px);

  padding:
    clamp(5px, .7vw, 8px);
}

body.ip-photo-preview-active
#timelineRightTools
#timelineAiVoiceControls {
  grid-area: voicebuttons;

  display: flex !important;

  align-items: center;
  justify-content: center;

  gap:
    clamp(10px, 1.5vw, 18px);

  width: 100%;

  margin:
    clamp(5px, .7vw, 8px)
    0 0;
}

body.ip-photo-preview-active
#timelineRightTools
#timelineGenderBtn,
body.ip-photo-preview-active
#timelineRightTools
#timelineVoiceBtn {
  width:
    clamp(48px, 6vw, 66px);

  min-width: 0;
  max-width: none;

  margin: 0;
}

body.ip-photo-preview-active
#timelineEditControls {
  padding:
    clamp(10px, 1.3vw, 16px) !important;
}

body.ip-photo-preview-active
#timelineEditControls
.timeline-speech-toolbar {
  margin-bottom:
    clamp(6px, .8vw, 10px);
}

body.ip-photo-preview-active
#timelineSpeechOverview {
  margin-bottom:
    clamp(7px, .9vw, 11px);
}

body.ip-photo-preview-active
#timelineCaptionInput {
  min-height:
    clamp(68px, 7vw, 90px);
}

body.ip-photo-preview-active
#timelineCaptionCapacity {
  margin-bottom: 0;
}

body.ip-photo-preview-active
#photoPreviewActions {
  margin-top: 0;
}

@media
  (max-width: 767px)
  and (orientation: portrait) {

  body.ip-photo-preview-active
  #timelineRightTools {
    grid-template-columns:
      minmax(0, 1fr);

    grid-template-areas:
      "effect"
      "voice"
      "voicebuttons";
  }

}

/* ***** 04FAD - FINAL COMPACT MEDIA EDITOR ALIGNMENT ***** */

/* Crop stays beside Zoom and Position */

body.ip-photo-preview-active
.timeline-speech-live-controls {
  grid-template-columns:
    minmax(0, 38fr)
    minmax(68px, 27fr)
    minmax(82px, 35fr);

  grid-template-areas:
    "size position crop";

  align-items: center;

  gap:
    clamp(5px, .75vw, 9px);
}

body.ip-photo-preview-active
.timeline-speech-live-size {
  grid-area: size;
}

body.ip-photo-preview-active
.timeline-speech-dpad {
  grid-area: position;
}

body.ip-photo-preview-active
#saveCropPhotoBtn {
  grid-area: crop;

  width: 100%;
  min-width: 0;

  align-self: center;

  min-height:
    clamp(36px, 3.8vw, 45px);

  margin: 0;
}

body.ip-photo-preview-active
.timeline-audio-mix-control,
body.ip-photo-preview-active
#timelineAudioMixPanel {
  display: none !important;
}

/* Right side: Text Effect in one horizontal row */

body.ip-photo-preview-active
#timelineRightTools {
  display: block;

  width: 100%;
  min-width: 0;

  margin: 0;

  padding:
    clamp(7px, .9vw, 11px);
}

body.ip-photo-preview-active
#timelineRightTools
.timeline-speech-effect-box {
  display: grid;

  grid-template-columns:
    minmax(0, 72fr)
    minmax(92px, 28fr);

  gap:
    clamp(6px, .8vw, 10px);

  align-items: center;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(7px, .9vw, 11px);
}

body.ip-photo-preview-active
#timelineRightTools
.timeline-speech-effect-field {
  display: grid;

  grid-template-columns:
    minmax(76px, 29fr)
    minmax(0, 71fr);

  gap:
    clamp(5px, .7vw, 9px);

  align-items: center;

  width: 100%;
  min-width: 0;
}

body.ip-photo-preview-active
#timelineRightTools
.timeline-speech-effect-label {
  white-space: nowrap;

  font-size:
    clamp(10px, 1vw, 13px);
}

body.ip-photo-preview-active
#timelineRightTools
#timelineSpeechEffectSelect {
  min-height:
    clamp(36px, 3.8vw, 44px);

  padding:
    clamp(6px, .8vw, 9px);
}

body.ip-photo-preview-active
#timelineRightTools
#previewTimelineSpeechEffectBtn {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(36px, 3.8vw, 44px);

  margin: 0;
  padding:
    clamp(6px, .8vw, 9px);
}

/* Left side: Voice Source and AI icons in one row */

body.ip-photo-preview-active
#timelineEditControls
.timeline-audio-source-box {
  display: grid;

  grid-template-columns:
    minmax(92px, 23fr)
    minmax(0, 51fr)
    minmax(88px, 26fr);

  grid-template-areas:
    "title sources actions"
    "panel panel panel";

  gap:
    clamp(6px, .8vw, 10px);

  align-items: center;

  width: 100%;
  min-width: 0;

  margin:
    clamp(7px, .9vw, 11px)
    0 0;

  padding:
    clamp(7px, .9vw, 11px);
}

body.ip-photo-preview-active
#timelineEditControls
.timeline-audio-source-title {
  grid-area: title;

  min-width: 0;

  margin: 0;

  font-size:
    clamp(9px, .95vw, 12px);

  line-height: 1.2;
  text-align: left;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.ip-photo-preview-active
#timelineEditControls
.timeline-audio-source-grid {
  grid-area: sources;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(5px, .65vw, 8px);

  width: 100%;
  min-width: 0;
}

body.ip-photo-preview-active
#timelineEditControls
.timeline-audio-source-btn {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(35px, 3.7vw, 43px);

  margin: 0;
  padding:
    clamp(5px, .7vw, 8px);

  font-size:
    clamp(9px, .95vw, 12px);
}

body.ip-photo-preview-active
#timelineEditControls
#timelineAiVoiceControls {
  grid-area: actions;

  display: flex !important;

  align-items: center;
  justify-content: flex-end;

  gap:
    clamp(6px, .8vw, 10px);

  width: 100%;
  min-width: 0;

  margin: 0;
}

body.ip-photo-preview-active
#timelineEditControls
#timelineGenderBtn,
body.ip-photo-preview-active
#timelineEditControls
#timelineVoiceBtn {
  width:
    clamp(38px, 4.2vw, 48px);

  min-width:
    clamp(38px, 4.2vw, 48px);

  max-width: none;

  height: auto;
  aspect-ratio: 1 / 1;

  margin: 0;
}

body.ip-photo-preview-active
#timelineEditControls
#timelineGenderBtn img {
  width: 82% !important;
  height: 82% !important;
}

body.ip-photo-preview-active
#timelineEditControls
#timelineVoiceBtn {
  font-size:
    clamp(20px, 2.4vw, 28px) !important;
}

/* Upload controls open in a second row only when selected */

body.ip-photo-preview-active
#timelineEditControls
.timeline-audio-source-panel {
  grid-area: panel;

  width: 100%;
  min-width: 0;

  margin-top:
    clamp(3px, .5vw, 6px);
}

body.ip-photo-preview-active
#timelineEditControls
#timelineAudioSourceAiPanel {
  margin: 0;
  padding: 0;
}

/* Reduce unused vertical spacing */

body.ip-photo-preview-active
#timelineEditControls {
  align-self: stretch;

  padding:
    clamp(9px, 1.2vw, 14px) !important;
}

body.ip-photo-preview-active
#timelineEditControls
#timelineSpeechList {
  margin-bottom:
    clamp(5px, .7vw, 8px);
}

body.ip-photo-preview-active
#timelineEditControls
#timelineCaptionCapacity {
  margin:
    clamp(5px, .7vw, 8px)
    0 0;
}

body.ip-photo-preview-active
#timelineRightColumn {
  align-self: stretch;
}

@media
  (max-width: 767px)
  and (orientation: portrait) {

  body.ip-photo-preview-active
  .timeline-speech-live-controls {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(72px, 28fr)
      minmax(80px, 32fr);

    grid-template-areas:
      "size position crop";
  }

  body.ip-photo-preview-active
  #timelineEditControls
  .timeline-audio-source-box {
    grid-template-columns:
      minmax(0, 1fr);

    grid-template-areas:
      "title"
      "sources"
      "actions"
      "panel";
  }

  body.ip-photo-preview-active
  #timelineEditControls
  .timeline-audio-source-title {
    text-align: center;
  }

  body.ip-photo-preview-active
  #timelineEditControls
  #timelineAiVoiceControls {
    justify-content: center;
  }

  body.ip-photo-preview-active
  #timelineRightTools
  .timeline-speech-effect-box {
    grid-template-columns:
      minmax(0, 1fr);
  }

}

/* ***** 04FAE - FINAL EDITOR ACTION ROW ***** */

body.ip-photo-preview-active
#timelineRightTools {
  display: grid;

  grid-template-columns:
    minmax(0, 76fr)
    minmax(125px, 24fr);

  gap:
    clamp(6px, .8vw, 10px);

  align-items: stretch;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(7px, .9vw, 11px);
}

body.ip-photo-preview-active
#timelineRightTools
.timeline-speech-effect-box {
  display: grid;

  grid-template-columns:
    minmax(0, 72fr)
    minmax(105px, 28fr);

  gap:
    clamp(6px, .8vw, 10px);

  align-items: center;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(6px, .8vw, 10px);
}

body.ip-photo-preview-active
#timelineRightTools
.timeline-speech-effect-field {
  display: grid;

  grid-template-columns:
    auto
    minmax(145px, 1fr);

  gap:
    clamp(6px, .8vw, 10px);

  align-items: center;

  width: 100%;
  min-width: 0;
}

body.ip-photo-preview-active
#timelineRightTools
.timeline-speech-effect-label {
  min-width: fit-content;

  white-space: nowrap;

  font-size:
    clamp(10px, 1vw, 13px);
}

body.ip-photo-preview-active
#timelineRightTools
#timelineSpeechEffectSelect {
  width:
    clamp(145px, 18vw, 225px);

  max-width: 100%;
  min-width: 0;

  justify-self: start;

  min-height:
    clamp(35px, 3.7vw, 43px);

  margin: 0;
  padding:
    clamp(5px, .7vw, 8px);
}

body.ip-photo-preview-active
#timelineRightTools
#previewTimelineSpeechEffectBtn {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(35px, 3.7vw, 43px);

  margin: 0;
  padding:
    clamp(5px, .7vw, 8px)
    clamp(7px, .9vw, 11px);

  white-space: nowrap;
}

body.ip-photo-preview-active
#timelineRightTools
#photoPreviewActions {
  display: flex;

  align-items: stretch;
  justify-content: stretch;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;
}

body.ip-photo-preview-active
#timelineRightTools
#photoPreviewActions
#closePreviewPhotoBtn {
  width: 100%;
  max-width: none;
  min-width: 0;

  min-height:
    clamp(47px, 5vw, 58px);

  margin: 0;
  padding:
    clamp(7px, .9vw, 11px);

  border:
    1px solid rgba(255,255,255,.13);

  border-radius:
    clamp(9px, 1.1vw, 13px);

  font-size:
    clamp(10px, 1.1vw, 14px);

  line-height: 1.15;
  white-space: normal;
}

body.ip-photo-preview-active
#photoPreviewInner {
  grid-template-areas:
    "duration right"
    "controls right";
}

body.ip-photo-preview-active
#timelineEditControls {
  align-self: start;
}

@media
  (max-width: 767px)
  and (orientation: portrait) {

  body.ip-photo-preview-active
  #timelineRightTools {
    grid-template-columns:
      minmax(0, 1fr);
  }

  body.ip-photo-preview-active
  #timelineRightTools
  .timeline-speech-effect-box {
    grid-template-columns:
      minmax(0, 1fr);
  }

  body.ip-photo-preview-active
  #timelineRightTools
  .timeline-speech-effect-field {
    grid-template-columns:
      auto
      minmax(0, 1fr);
  }

  body.ip-photo-preview-active
  #timelineRightTools
  #timelineSpeechEffectSelect {
    width: 100%;
  }

}

/* ***** 04FAF - FINAL MEDIA EDITOR ROW LOCK ***** */

/* Right: Effect + Preview + Save & Close in one row */

body.ip-photo-preview-active
#timelineRightTools {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    fit-content(24%);

  gap:
    clamp(8px, 1vw, 13px);

  align-items: center;
  align-content: center;

  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;

  margin: 0;
  padding:
    clamp(8px, 1vw, 12px);
}

body.ip-photo-preview-active
#timelineRightTools
.timeline-speech-effect-box {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    fit-content(30%);

  gap:
    clamp(10px, 1.2vw, 16px);

  align-items: center;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(7px, .9vw, 11px);
}

body.ip-photo-preview-active
#timelineRightTools
.timeline-speech-effect-field {
  display: grid;

  grid-template-columns:
    fit-content(32%)
    minmax(0, 1fr);

  gap:
    clamp(7px, .9vw, 11px);

  align-items: center;

  width: 100%;
  min-width: 0;
}

body.ip-photo-preview-active
#timelineRightTools
.timeline-speech-effect-label {
  min-width: 0;

  font-size:
    clamp(9px, .9vw, 12px);

  white-space: nowrap;
}

body.ip-photo-preview-active
#timelineRightTools
#timelineSpeechEffectSelect {
  width:
    clamp(120px, 13vw, 170px);

  max-width: 100%;
  min-width: 0;

  justify-self: start;

  min-height:
    clamp(35px, 3.7vw, 43px);

  margin: 0;
  padding:
    clamp(5px, .7vw, 8px);
}

body.ip-photo-preview-active
#timelineRightTools
#previewTimelineSpeechEffectBtn {
  width: fit-content;
  min-width:
    clamp(92px, 10vw, 126px);

  max-width: 100%;

  min-height:
    clamp(35px, 3.7vw, 43px);

  margin: 0;
  padding:
    clamp(5px, .7vw, 8px)
    clamp(8px, 1vw, 13px);

  justify-self: end;

  font-size:
    clamp(9px, .9vw, 12px);

  white-space: nowrap;
}

body.ip-photo-preview-active
#timelineRightTools
#photoPreviewActions {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  width: auto;
  min-width: 0;

  margin: 0;
  padding: 0;
}

body.ip-photo-preview-active
#timelineRightTools
#photoPreviewActions
#closePreviewPhotoBtn {
  width: fit-content;
  min-width:
    clamp(104px, 11vw, 140px);

  max-width: none;

  min-height:
    clamp(35px, 3.7vw, 43px);

  margin: 0;
  padding:
    clamp(5px, .7vw, 8px)
    clamp(9px, 1.1vw, 14px);

  font-size:
    clamp(9px, .9vw, 12px);

  line-height: 1.15;
  white-space: nowrap;
}

/* Left: Title + AI + AI icons + Upload in the correct order */

body.ip-photo-preview-active
#timelineEditControls
.timeline-audio-source-box {
  display: grid;

  grid-template-columns:
    fit-content(24%)
    minmax(72px, 20fr)
    minmax(82px, 28fr)
    minmax(82px, 28fr);

  grid-template-areas:
    "title ai actions upload"
    "panel panel panel panel";

  gap:
    clamp(5px, .7vw, 9px);

  align-items: center;

  width: 100%;
  min-width: 0;

  margin:
    clamp(7px, .9vw, 11px)
    0 0;

  padding:
    clamp(7px, .9vw, 11px);
}

body.ip-photo-preview-active
#timelineEditControls
.timeline-audio-source-title {
  grid-area: title;

  min-width: 0;

  margin: 0;

  font-size:
    clamp(8px, .85vw, 11px);

  line-height: 1.15;
  text-align: left;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.ip-photo-preview-active
#timelineEditControls
.timeline-audio-source-grid {
  display: contents;
}

body.ip-photo-preview-active
#timelineEditControls
#timelineAudioSourceAiBtn {
  grid-area: ai;
}

body.ip-photo-preview-active
#timelineEditControls
#timelineAudioSourceUploadBtn {
  grid-area: upload;
}

body.ip-photo-preview-active
#timelineEditControls
.timeline-audio-source-btn {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(34px, 3.6vw, 42px);

  margin: 0;
  padding:
    clamp(4px, .6vw, 7px);

  font-size:
    clamp(8px, .85vw, 11px);

  white-space: nowrap;
}

body.ip-photo-preview-active
#timelineEditControls
#timelineAiVoiceControls {
  grid-area: actions;

  display: flex !important;

  align-items: center;
  justify-content: center;

  gap:
    clamp(4px, .55vw, 7px);

  width: 100%;
  min-width: 0;

  margin: 0;
}

body.ip-photo-preview-active
#timelineEditControls
#timelineGenderBtn,
body.ip-photo-preview-active
#timelineEditControls
#timelineVoiceBtn {
  width:
    clamp(34px, 3.6vw, 42px);

  min-width:
    clamp(34px, 3.6vw, 42px);

  max-width: none;

  height: auto;
  aspect-ratio: 1 / 1;

  margin: 0;
  padding: 0 !important;
}

body.ip-photo-preview-active
#timelineEditControls
#timelineGenderBtn img {
  width: 82% !important;
  height: 82% !important;
}

body.ip-photo-preview-active
#timelineEditControls
#timelineVoiceBtn {
  font-size:
    clamp(18px, 2vw, 24px) !important;
}

body.ip-photo-preview-active
#timelineEditControls
.timeline-audio-source-panel {
  grid-area: panel;

  width: 100%;
  min-width: 0;

  margin-top:
    clamp(3px, .45vw, 6px);
}

/* Prevent old rules from stretching either block */

body.ip-photo-preview-active
#timelineRightColumn,
body.ip-photo-preview-active
#timelineRightTools,
body.ip-photo-preview-active
#timelineEditControls {
  align-self: start;
}

@media
  (max-width: 767px)
  and (orientation: portrait) {

  body.ip-photo-preview-active
  #timelineRightTools {
    grid-template-columns:
      minmax(0, 1fr);
  }

  body.ip-photo-preview-active
  #timelineRightTools
  .timeline-speech-effect-box {
    grid-template-columns:
      minmax(0, 1fr);
  }

  body.ip-photo-preview-active
  #timelineRightTools
  #previewTimelineSpeechEffectBtn,
  body.ip-photo-preview-active
  #timelineRightTools
  #photoPreviewActions,
  body.ip-photo-preview-active
  #timelineRightTools
  #closePreviewPhotoBtn {
    width: 100%;
    justify-self: stretch;
  }

  body.ip-photo-preview-active
  #timelineEditControls
  .timeline-audio-source-box {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    grid-template-areas:
      "title title"
      "ai actions"
      "upload upload"
      "panel panel";
  }

}

/* ***** 04FAG - FINAL EDITOR COMPACT LOCK ***** */

/* Left column:
   controls begin immediately below Media Duration */

body.ip-photo-preview-active
#photoPreviewInner {
  grid-template-columns:
    minmax(0, 42fr)
    minmax(0, 58fr);

  grid-template-areas:
    "duration right"
    "controls right";

  grid-template-rows:
    max-content
    minmax(0, 1fr);

  column-gap:
    clamp(14px, 2.2vw, 34px);

  row-gap:
    clamp(8px, 1vw, 13px);

  align-content: start;
  align-items: start;
}

body.ip-photo-preview-active
#timelineEditMediaDuration {
  grid-column: 1;
  grid-row: 1;

  align-self: start;
}

body.ip-photo-preview-active
#timelineEditControls {
  grid-column: 1;
  grid-row: 2;

  align-self: start;

  margin: 0 !important;
}

/* Right column spans both left rows */

body.ip-photo-preview-active
#timelineRightColumn {
  grid-column: 2;
  grid-row: 1 / span 2;

  align-self: start;
}

/* Effect, Preview and Save in one single row */

body.ip-photo-preview-active
#timelineRightTools {
  display: block;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(8px, 1vw, 12px);
}

body.ip-photo-preview-active
#timelineRightTools
.timeline-speech-effect-box {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    auto;

  gap:
    clamp(9px, 1.1vw, 14px);

  align-items: center;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(7px, .9vw, 11px);
}

body.ip-photo-preview-active
#timelineRightTools
.timeline-speech-effect-field {
  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  gap:
    clamp(6px, .8vw, 10px);

  align-items: center;

  width: 100%;
  min-width: 0;
}

body.ip-photo-preview-active
#timelineRightTools
#timelineSpeechEffectSelect {
  width:
    clamp(150px, 16vw, 205px);

  max-width: 100%;
  min-width: 0;

  margin: 0;
}

body.ip-photo-preview-active
#timelineRightTools
#previewTimelineSpeechEffectBtn {
  width: fit-content;

  min-width:
    clamp(94px, 9.5vw, 120px);

  min-height:
    clamp(35px, 3.7vw, 43px);

  margin: 0;

  padding:
    clamp(5px, .7vw, 8px)
    clamp(8px, .9vw, 12px);

  white-space: nowrap;
}

body.ip-photo-preview-active
#timelineRightTools
.timeline-speech-effect-box
#photoPreviewActions {
  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;

  display: flex;

  align-items: center;
  justify-content: center;

  width: auto;
  min-width: 0;
  height: auto !important;

  margin: 0;
  padding: 0;
}

body.ip-photo-preview-active
#timelineRightTools
.timeline-speech-effect-box
#photoPreviewActions
#closePreviewPhotoBtn {
  width: fit-content;

  min-width:
    clamp(104px, 10vw, 132px);

  max-width: none;

  height:
    clamp(35px, 3.7vw, 43px) !important;

  min-height:
    clamp(35px, 3.7vw, 43px);

  margin: 0;

  padding:
    clamp(5px, .7vw, 8px)
    clamp(9px, 1vw, 13px);

  font-size:
    clamp(9px, .9vw, 12px);

  line-height: 1.15;
  white-space: nowrap;
}

/* Mobile keeps a clean stacked layout */

@media
  (max-width: 767px)
  and (orientation: portrait) {

  body.ip-photo-preview-active
  #photoPreviewInner {
    grid-template-columns:
      minmax(0, 1fr);

    grid-template-areas:
      "duration"
      "right"
      "controls";

    grid-template-rows:
      auto
      auto
      auto;
  }

  body.ip-photo-preview-active
  #timelineRightColumn {
    grid-column: 1;
    grid-row: 2;
  }

  body.ip-photo-preview-active
  #timelineEditControls {
    grid-column: 1;
    grid-row: 3;
  }

  body.ip-photo-preview-active
  #timelineRightTools {
    grid-template-columns:
      minmax(0, 1fr);

    grid-template-areas:
      "effect"
      "save";
  }

  body.ip-photo-preview-active
  #timelineRightTools
  #photoPreviewActions,
  body.ip-photo-preview-active
  #timelineRightTools
  #closePreviewPhotoBtn {
    width: 100%;
  }

}

/* ***** 04C - POPUP BOX ***** */
.popup-box {
  display: none;

  position: relative;
  top: auto;
  left: auto;
  transform: none;

  width: 86%;
  max-width: 430px;
  max-height: none;
  overflow: visible;

  z-index: 10010;

  margin: 18px auto 26px;
  padding: 20px;

  color: #1f2937;
  text-align: left;

  border-radius: 22px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(21,101,192,.22);

  box-shadow:
    0 35px 90px rgba(0,0,0,.36),
    0 12px 30px rgba(0,0,0,.22);
}

.popup-box input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(21,101,192,.25);
}

/* ***** 04D - POPUP TITLES AND FORM FIELDS ***** */

.popup-title {
  display: block;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 16px 0;
}

.form-label {
  display: block;
  font-size: 18px;
  font-weight: 600;
  margin: 24px 0 0px 0;
}

.text-logo-box .form-label{
  font-size:15px;
  margin:5px 0 1px 0;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  font-size: 15px;
}

.popup-box input[type="radio"] {
  width: auto;
  margin: 0;
  flex-shrink: 0;
}

/* ***** 04CA - HORIZONTAL 2026 OUTPUT SIZE CARD ***** */

#outputSettingsBox {
  display: none;

  position: relative;
  top: auto;
  left: auto;
  transform: none;

  width: 96%;
  max-width: none;

  z-index: 10010;

  margin: 2% auto 4%;
  padding: clamp(16px, 2.5vw, 34px);

  color: #f7f8ff;
  text-align: left;

  border: 1px solid rgba(255,255,255,.11);
  border-radius: clamp(24px, 3vw, 40px);

  background:
    radial-gradient(
      circle at 7% 5%,
      rgba(141,87,255,.25),
      transparent 28%
    ),
    radial-gradient(
      circle at 93% 10%,
      rgba(209,70,216,.18),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      rgba(28,34,63,.98),
      rgba(8,11,26,.99)
    );

  box-shadow:
    0 34px 90px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.09);

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  overflow: hidden;
}

#outputSettingsBox::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  border-radius: inherit;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.07),
      transparent 25%,
      transparent 72%,
      rgba(209,70,216,.05)
    );
}

.output-size-header {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;

  gap: clamp(10px, 1.5vw, 18px);

  width: 100%;
  min-width: 0;

  margin-bottom: clamp(16px, 2vw, 25px);
  padding-bottom: clamp(12px, 1.5vw, 18px);

  border-bottom: 1px solid rgba(255,255,255,.10);
}

.output-size-header-icon {
  width: clamp(52px, 6vw, 68px);
  height: clamp(52px, 6vw, 68px);

  flex:
    0 0 clamp(52px, 6vw, 68px);

  display: grid;
  place-items: center;

  border: 1px solid rgba(190,130,255,.38);
  border-radius: clamp(16px, 2vw, 22px);

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,.25),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #8d57ff,
      #d146d8
    );

  box-shadow:
    0 15px 32px rgba(141,87,255,.22),
    inset 0 1px 0 rgba(255,255,255,.34);
}

.output-size-header-icon svg {
  width: 58%;
  height: 58%;

  fill: none;
  stroke: #ffffff;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.output-size-heading {
  min-width: 0;
}

#outputSettingsBox #xOutputTitle {
  display: block;

  margin: 0 0 5px;

  color: #ffffff;

  font-size: clamp(23px, 3vw, 34px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.7px;
}

.output-size-subtitle {
  color: #c5ccdf;

  font-size: clamp(11px, 1.15vw, 14px);
  font-weight: 650;
  line-height: 1.45;
}

.output-size-grid {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: clamp(9px, 1.4vw, 18px);

  width: 100%;
  min-width: 0;
}

.output-size-option {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  min-width: 0;
  min-height: clamp(180px, 19vw, 260px);

  margin: 0;
  padding: clamp(13px, 1.7vw, 22px);

  border: 2px solid transparent;
  border-radius: clamp(17px, 2vw, 25px);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(141,87,255,.13),
      transparent 47%
    ),
    rgba(255,255,255,.05);

  color: #dce1f0;

  text-align: center;
  cursor: pointer;

  box-shadow:
    0 13px 28px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.07);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.output-size-option:hover {
  transform: translateY(-3px);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(141,87,255,.20),
      transparent 48%
    ),
    rgba(255,255,255,.075);
}

.output-size-option:active {
  transform: scale(.985);
}

.output-size-option input {
  position: absolute;

  width: 1px !important;
  height: 1px;

  margin: 0;

  opacity: 0;
  pointer-events: none;
}

.output-size-option:has(input:checked) {
  border-color: rgba(178,112,255,.82);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(141,87,255,.31),
      transparent 52%
    ),
    linear-gradient(
      145deg,
      rgba(86,50,124,.45),
      rgba(35,28,64,.64)
    );

  box-shadow:
    0 15px 34px rgba(141,87,255,.23),
    0 0 0 3px rgba(141,87,255,.10),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.output-size-shape-area {
  flex: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 0;

  padding: 4%;
}

.output-size-shape {
  position: relative;

  display: block;

  border:
    clamp(2px, .25vw, 4px)
    solid rgba(255,255,255,.84);

  border-radius:
    clamp(5px, .7vw, 10px);

  background:
    linear-gradient(
      145deg,
      rgba(141,87,255,.34),
      rgba(209,70,216,.15)
    );

  box-shadow:
    0 13px 30px rgba(0,0,0,.29),
    inset 0 1px 0 rgba(255,255,255,.17);

  transition:
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.output-size-option:has(input:checked)
.output-size-shape {
  border-color: #ffffff;

  transform: scale(1.04);

  box-shadow:
    0 15px 32px rgba(141,87,255,.34),
    0 0 20px rgba(209,70,216,.18),
    inset 0 1px 0 rgba(255,255,255,.24);
}

.output-size-shape.ratio-4-5 {
  width: 50%;
  aspect-ratio: 4 / 5;
}

.output-size-shape.ratio-1-1 {
  width: 58%;
  aspect-ratio: 1 / 1;
}

.output-size-shape.ratio-9-16 {
  width: 38%;
  aspect-ratio: 9 / 16;
}

.output-size-shape.ratio-16-9 {
  width: 76%;
  aspect-ratio: 16 / 9;
}

.output-size-check {
  position: absolute;

  top: clamp(9px, 1vw, 14px);
  right: clamp(9px, 1vw, 14px);

  width: clamp(23px, 2.3vw, 31px);
  aspect-ratio: 1 / 1;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;

  background: rgba(22,26,48,.82);
  color: transparent;

  font-size: clamp(12px, 1.3vw, 17px);
  font-weight: 900;
  line-height: 1;
}

.output-size-option:has(input:checked)
.output-size-check {
  background:
    linear-gradient(
      145deg,
      #8d57ff,
      #d146d8
    );

  color: #ffffff;

  box-shadow:
    0 7px 16px rgba(141,87,255,.30),
    inset 0 1px 0 rgba(255,255,255,.30);
}

.output-size-name {
  display: block;

  margin-top: clamp(8px, 1vw, 14px);

  color: #ffffff;

  font-size: clamp(13px, 1.4vw, 18px);
  font-weight: 900;
  line-height: 1.18;
}

.output-size-ratio {
  display: block;

  margin-top: clamp(4px, .6vw, 8px);

  color: #d4a9ff;

  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 850;
  line-height: 1.15;
}

.output-size-use {
  display: block;

  margin-top: clamp(4px, .6vw, 8px);

  color: #9fa8c2;

  font-size: clamp(9px, .95vw, 12px);
  font-weight: 700;
  line-height: 1.3;
}

.output-size-actions {
  position: relative;
  z-index: 1;

  display: flex;
  justify-content: center;

  width: 100%;

  margin-top: clamp(16px, 2vw, 25px);
  padding-top: clamp(14px, 1.7vw, 21px);

  border-top: 1px solid rgba(255,255,255,.10);
}

#saveOutputSettingsBtn {
  width: clamp(34%, 42vw, 52%);
  min-width: 0;
  min-height: clamp(44px, 4.7vw, 54px);

  margin: 0;
  padding: clamp(8px, 1vw, 12px);

  border: 1px solid rgba(255,255,255,.13);
  border-radius: clamp(10px, 1.2vw, 14px);

  background:
    linear-gradient(
      135deg,
      #4c1837 0%,
      #71305f 52%,
      #38213f 100%
    );

  color: #ffffff;

  font-size: clamp(12px, 1.3vw, 16px);
  font-weight: 900;
  line-height: 1.15;

  box-shadow:
    0 9px 20px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.14);
}

/* ***** TABLET ***** */

@media
  (min-width: 768px)
  and (max-width: 1100px) {

  #outputSettingsBox {
    width: 97%;
    padding: clamp(14px, 2vw, 24px);
  }

  .output-size-grid {
    gap: 1.3%;
  }

  .output-size-option {
    min-height: clamp(170px, 23vw, 230px);
  }

}

/* ***** MOBILE LANDSCAPE ***** */

@media
  (max-width: 767px)
  and (orientation: landscape) {

  #outputSettingsBox {
    width: 98%;

    margin: 1% auto 3%;
    padding: clamp(10px, 1.8vw, 15px);

    border-radius: clamp(18px, 3vw, 26px);
  }

  .output-size-header {
    margin-bottom: 10px;
    padding-bottom: 9px;
  }

  .output-size-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));

    gap: 1.2%;
  }

  .output-size-option {
    min-height: clamp(145px, 42vh, 195px);

    padding: clamp(7px, 1.2vw, 11px);

    border-radius: clamp(12px, 2vw, 17px);
  }

  .output-size-shape-area {
    padding: 2%;
  }

  .output-size-name {
    font-size: clamp(10px, 1.65vw, 13px);
  }

  .output-size-ratio {
    font-size: clamp(10px, 1.5vw, 12px);
  }

  .output-size-use {
    font-size: clamp(8px, 1.25vw, 10px);
  }

  .output-size-actions {
    margin-top: 10px;
    padding-top: 9px;
  }

  #saveOutputSettingsBtn {
    width: 48%;
    min-height: clamp(35px, 8vh, 44px);
  }

}

/* ***** MOBILE PORTRAIT ***** */

@media
  (max-width: 767px)
  and (orientation: portrait) {

  #outputSettingsBox {
    width: 96%;

    margin: 3% auto 5%;
    padding: clamp(12px, 4vw, 18px);

    border-radius: clamp(20px, 6vw, 28px);
  }

  .output-size-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: clamp(8px, 2.5vw, 13px);
  }

  .output-size-option {
    min-height: clamp(175px, 53vw, 225px);

    padding: clamp(10px, 3vw, 15px);
  }

  .output-size-shape.ratio-4-5 {
    width: 45%;
  }

  .output-size-shape.ratio-1-1 {
    width: 55%;
  }

  .output-size-shape.ratio-9-16 {
    width: 34%;
  }

  .output-size-shape.ratio-16-9 {
    width: 72%;
  }

  #saveOutputSettingsBtn {
    width: 100%;
  }

}

/* ***** 04G - FREE PHOTOS MODULE ***** */

.free-photos-box {
  display: none;

  position: relative;
  top: auto;
  left: auto;
  transform: none;

  width: 86%;
  max-width: 430px;
  max-height: none;
  overflow: visible;

  z-index: 10010;

  margin: 18px auto 26px;
  padding: 14px;

  color: #1f2937;
  text-align: left;

  border-radius: 22px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(21,101,192,.22);

  box-shadow:
    0 35px 90px rgba(0,0,0,.36),
    0 12px 30px rgba(0,0,0,.22);
}

.free-photos-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 14px;
}

.free-photos-search input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(21,101,192,.25);
}

.free-photos-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  min-height: 120px;
  overflow: visible;
}

#freePhotoPreviewBox {
  position: relative;
  top: auto;
  left: auto;
  transform: none;

  width: 100%;
  max-width: none;

  z-index: auto;

  padding: 14px;
  border-radius: 18px;

  background: rgba(255,255,255,.98);
  border: 2px solid rgba(255,138,0,.45);

  box-shadow:
    0 18px 42px rgba(0,0,0,.20);
}

.free-photos-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

#loadMoreFreePhotosBtn{
  background:#1565c0;
}

#closeFreePhotosBtn{
  background:#1565c0;
}

#addFreePhotosBtn{
  background:#ff8a00;
}

.photo-card{
  position:relative;
  border-radius:50%;
  overflow:hidden;
  cursor:pointer;
  border:3px solid transparent;
}

.photo-card img,
.photo-card .free-grid-video {
  width: 100%;
  height: 100%;

  aspect-ratio: 1 / 1;

  display: block;

  object-fit: cover;

  border-radius: 12px;
}

.photo-card .free-grid-video {
  background: #000000;
}

.photo-card.free-video-playing {
  border-color: #30d0d8;

  box-shadow:
    0 0 0 3px rgba(48,208,216,.18),
    0 12px 26px rgba(0,0,0,.27);
}

.photo-card.free-video-playing .video-badge {
  display: none;
}

.photo-card.selected{
  border-color:#ff8a00;
}

.photo-check{
  position:absolute;
  top:8px;
  right:8px;

  width:34px;
  height:34px;

  border-radius:50%;

  background:#ff8a00;
  color:#fff;

  display:none;
  align-items:center;
  justify-content:center;

  font-size:22px;
  font-weight:900;

  box-shadow:0 4px 14px rgba(0,0,0,.35);
}

.photo-card.selected .photo-check{
  display:flex;
}

.free-media-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:0 0 12px;
}

.free-media-tab{
  width:100%;
  padding:10px 8px;
  border-radius:12px;
  background:#1565c0;
  font-size:14px;
}

.free-media-tab.active{
  background:#ff8a00;
}

.video-badge{
  position:absolute;
  left:8px;
  bottom:8px;

  padding:5px 8px;
  border-radius:999px;

  background:rgba(0,0,0,.72);
  color:#fff;

  font-size:12px;
  font-weight:900;
}

.preview-video-player{
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
}

.free-video-trim-box{
  display:none;
  margin-top:10px;
  padding:10px;
  border-radius:14px;
  background:rgba(21,101,192,.08);
  text-align:center;
}

.free-video-trim-info{
  color:#1565c0;
  font-size:13px;
  font-weight:900;
  margin-bottom:8px;
}

.free-video-trim-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.free-video-trim-row button{
  padding:9px 6px;
  font-size:13px;
  border-radius:12px;
}

.timeline-trim-rail{
  position:relative;
  height:46px;
  margin:8px 0 10px;
  border-radius:18px;
  background:linear-gradient(90deg,#d7dce5,#eef4ff);
  overflow:hidden;
}

.timeline-trim-shade-left,
.timeline-trim-shade-right{
  position:absolute;
  top:0;
  bottom:0;
  background:rgba(15,47,95,.35);
  backdrop-filter:blur(3px);
  z-index:1;
}

.timeline-trim-selected{
  position:absolute;
  top:0;
  bottom:0;
  background:rgba(255,138,0,.28);
  z-index:2;
}

.timeline-trim-range{
  position:absolute;
  left:0;
  right:0;
  top:8px;
  width:100%;
  z-index:3;
  pointer-events:none;
  background:transparent;
  appearance:none;
}

.timeline-trim-range::-webkit-slider-thumb{
  appearance:none;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#ff8a00;
  border:4px solid #ffffff;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  pointer-events:auto;
}

.timeline-trim-range.end::-webkit-slider-thumb{
  background:#1565c0;
}

.timeline-trim-label-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  font-size:12px;
  font-weight:900;
  color:#1565c0;
}
/* ***** 04H - HORIZONTAL PERCENTAGE 2026 MUSIC CARD ***** */

#musicSettingsBox {
  position: relative;
  top: auto;
  left: auto;
  transform: none;

  width: 58%;
  max-width: none;
  min-width: 0;

  z-index: 10010;

  margin: 2% auto 4%;
  padding:
    clamp(14px, 2.3vw, 32px);

  color: #f7f8ff;
  text-align: left;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius:
    clamp(24px, 3vw, 40px);

  background:
    radial-gradient(
      circle at 7% 4%,
      rgba(209,70,216,.22),
      transparent 29%
    ),
    radial-gradient(
      circle at 93% 8%,
      rgba(141,87,255,.20),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      rgba(28,34,63,.98),
      rgba(8,11,26,.99)
    );

  box-shadow:
    0 34px 90px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.09);

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  overflow: hidden;
}

#musicSettingsBox::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  border-radius: inherit;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.07),
      transparent 25%,
      transparent 72%,
      rgba(209,70,216,.05)
    );
}

/* Header */

.music-card-header {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;

  gap:
    clamp(10px, 1.5vw, 18px);

  width: 100%;
  min-width: 0;

  margin-bottom:
    clamp(14px, 1.8vw, 22px);

  padding-bottom:
    clamp(12px, 1.5vw, 18px);

  border-bottom:
    1px solid rgba(255,255,255,.10);
}

.music-card-header-icon {
  width:
    clamp(52px, 6vw, 68px);

  height:
    clamp(52px, 6vw, 68px);

  flex:
    0 0 clamp(52px, 6vw, 68px);

  display: grid;
  place-items: center;

  border:
    1px solid rgba(221,126,255,.38);

  border-radius:
    clamp(16px, 2vw, 22px);

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,.25),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #8d57ff,
      #d146d8
    );

  box-shadow:
    0 15px 32px rgba(141,87,255,.22),
    inset 0 1px 0 rgba(255,255,255,.34);
}

.music-card-header-icon svg {
  width: 58%;
  height: 58%;

  fill: none;
  stroke: #ffffff;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.music-card-heading {
  width: 100%;
  min-width: 0;
}

#musicSettingsBox
#xMusicTitle {
  display: block;

  margin: 0 0 5px;

  color: #ffffff;

  font-size:
    clamp(23px, 3vw, 34px);

  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.7px;
}

.music-card-subtitle {
  margin: 0;

  color: #c5ccdf;

  font-size:
    clamp(11px, 1.15vw, 14px);

  font-weight: 650;
  line-height: 1.45;
}

/* Main content */

.music-card-content {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 42fr)
    minmax(0, 58fr);

  gap:
    clamp(12px, 2vw, 28px);

  width: 100%;
  min-width: 0;

  align-items: stretch;
}

.music-preview-panel,
.music-choice-grid {
  width: 100%;
  min-width: 0;

  margin: 0;

  padding:
    clamp(12px, 1.6vw, 20px);

  border:
    1px solid rgba(255,255,255,.09);

  border-radius:
    clamp(15px, 1.9vw, 23px);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.025)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

/* Audio preview */

.music-preview-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;

  border-color:
    rgba(209,70,216,.22);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(209,70,216,.13),
      transparent 50%
    ),
    rgba(255,255,255,.045);
}

#musicPreviewAudio {
  display: block;

  width: 100%;
  min-width: 0;

  margin: 0;

  accent-color: #8d57ff;
}

#selectedMusicInfo {
  width: 100%;
  min-width: 0;
  min-height:
    clamp(38px, 4vw, 48px);

  display: flex;
  align-items: center;
  justify-content: center;

  margin:
    clamp(10px, 1.3vw, 16px)
    0 0;

  padding:
    clamp(8px, 1vw, 12px);

  border:
    1px solid rgba(209,70,216,.16);

  border-radius:
    clamp(9px, 1.1vw, 13px);

  background:
    rgba(209,70,216,.08);

  color: #e5c2ff;

  font-size:
    clamp(11px, 1.15vw, 14px);

  font-weight: 850;
  line-height: 1.35;
  text-align: center;

  overflow-wrap: anywhere;
}

/* Music choices */

.music-choice-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(8px, 1.2vw, 15px);

  align-items: stretch;
}

.music-choice-col {
  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 0;

  padding:
    clamp(10px, 1.3vw, 16px);

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    clamp(11px, 1.4vw, 17px);

  background:
    rgba(255,255,255,.04);
}

.music-choice-col label {
  display: block;

  margin:
    0 0 clamp(7px, .9vw, 11px);

  color: #dce1f0;

  font-size:
    clamp(11px, 1.2vw, 15px);

  font-weight: 850;
  line-height: 1.3;
}

#vahidMusicSelect,
#chooseUserMusicBtn {
  width: 100%;
  min-width: 0;

  height: auto;
  min-height:
    clamp(42px, 4.6vw, 54px);

  margin: auto 0 0;

  padding:
    clamp(8px, 1vw, 12px);

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:
    clamp(10px, 1.2vw, 14px);

  font-size:
    clamp(11px, 1.2vw, 15px);

  font-weight: 850;
}

#vahidMusicSelect {
  outline: none;

  background:
    rgba(233,225,249,.94);

  color: #24203a;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 8px 18px rgba(0,0,0,.13);
}

#vahidMusicSelect:focus {
  border-color:
    rgba(209,70,216,.78);

  box-shadow:
    0 0 0 3px rgba(209,70,216,.12),
    inset 0 1px 0 rgba(255,255,255,.95);
}

#chooseUserMusicBtn {
  background:
    linear-gradient(
      135deg,
      #38264f,
      #654078 55%,
      #40264f
    );

  color: #ffffff;

  box-shadow:
    0 8px 18px rgba(141,87,255,.20),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* Footer */

.music-action-row {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    clamp(8px, 1.3vw, 17px);

  width: 76%;
  min-width: 0;

  margin:
    clamp(14px, 1.8vw, 22px)
    auto 0;

  padding-top:
    clamp(13px, 1.6vw, 20px);

  border-top:
    1px solid rgba(255,255,255,.10);
}

.music-action-row button {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(42px, 4.6vw, 54px);

  margin: 0;

  padding:
    clamp(8px, 1vw, 12px);

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:
    clamp(10px, 1.2vw, 14px);

  color: #ffffff;

  font-size:
    clamp(11px, 1.2vw, 15px);

  font-weight: 900;
  line-height: 1.15;

  box-shadow:
    0 8px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.12);
}

#addMusicBtn {
  background:
    linear-gradient(
      135deg,
      #17634d,
      #24916d 55%,
      #164d42
    );
}

#removeMusicBtn {
  background:
    linear-gradient(
      135deg,
      #48121c,
      #75202c 55%,
      #3c1019
    );
}

#removeMusicBtn:disabled {
  border-color:
    rgba(255,255,255,.07);

  background:
    linear-gradient(
      135deg,
      #282d38,
      #3b414e
    );

  color: #8e95a6;

  opacity: .60;
  cursor: default;
}

#closeMusicBtn {
  background:
    linear-gradient(
      135deg,
      #4c1837,
      #71305f 52%,
      #38213f
    );
}

/* Main card button */

#musicSettingsBtn {
  width: 100%;

  display: block;

  margin: 0 auto;
  padding: 0;

  border: none;

  background: transparent;
  box-shadow: none;
}

#musicSettingsBtn img {
  width: 100%;
  max-width: 210px;
  height: auto;

  display: block;

  margin: 0 auto;
}

/* ***** TABLET ***** */

@media
  (min-width: 768px)
  and (max-width: 1100px) {

  #musicSettingsBox {
    width: 82%;

    padding:
      clamp(13px, 2vw, 22px);
  }

  .music-action-row {
    width: 88%;
  }

  .music-card-content {
    grid-template-columns:
      minmax(0, 40fr)
      minmax(0, 60fr);

    gap: 1.7%;
  }

}

/* ***** MOBILE LANDSCAPE ***** */

@media
  (max-width: 767px)
  and (orientation: landscape) {

  #musicSettingsBox {
    width: 98%;

    margin: 1% auto 3%;

    padding:
      clamp(10px, 1.8vw, 15px);

    border-radius:
      clamp(18px, 3vw, 26px);
  }

  .music-card-header {
    margin-bottom: 9px;
    padding-bottom: 9px;
  }

  .music-card-content {
    grid-template-columns:
      minmax(0, 40fr)
      minmax(0, 60fr);

    gap: 1.5%;
  }

  .music-preview-panel,
  .music-choice-grid {
    padding:
      clamp(7px, 1.2vw, 11px);
  }

  .music-choice-col {
    padding:
      clamp(6px, 1vw, 9px);
  }

  .music-action-row {
    width: 90%;

    gap: 1.2%;

    margin: 9px auto 0;
    padding-top: 9px;
  }

  .music-action-row button {
    min-height:
      clamp(34px, 8vh, 44px);

    font-size:
      clamp(10px, 1.7vw, 13px);
  }

}

/* ***** MOBILE PORTRAIT ***** */

@media
  (max-width: 767px)
  and (orientation: portrait) {

  #musicSettingsBox {
    width: 96%;

    margin: 3% auto 5%;

    padding:
      clamp(12px, 4vw, 18px);

    border-radius:
      clamp(20px, 6vw, 28px);
  }

  .music-card-content {
    grid-template-columns:
      minmax(0, 1fr);

    gap:
      clamp(9px, 2.5vw, 14px);
  }

  .music-choice-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .music-action-row {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    width: 100%;
  }

}

/* ***** EXTRA-NARROW MOBILE ***** */

@media
  (max-width: 390px)
  and (orientation: portrait) {

  .music-choice-grid {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .music-action-row {
    grid-template-columns:
      minmax(0, 1fr);
  }

}

/* ***** 04GA - HORIZONTAL 2026 FREE MEDIA CARD ***** */

/*
  This design applies only to the normal Free Media card.
  Logo Background mode keeps its own independent design.
*/

.free-media-card-header {
  display: none;
}

.free-photos-box:not(.logo-background-mode) {
  display: none;

  position: relative;

  width: 96%;
  max-width: none;

  margin: 2% auto 4%;
  padding: clamp(14px, 2.3vw, 32px);

  color: #f7f8ff;
  text-align: left;

  border: 1px solid rgba(255,255,255,.11);
  border-radius: clamp(24px, 3vw, 40px);

  background:
    radial-gradient(
      circle at 7% 4%,
      rgba(48,208,216,.23),
      transparent 29%
    ),
    radial-gradient(
      circle at 93% 9%,
      rgba(67,214,161,.18),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      rgba(28,34,63,.98),
      rgba(8,11,26,.99)
    );

  box-shadow:
    0 34px 90px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.09);

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  overflow: hidden;

  grid-template-columns:
    minmax(0, 35fr)
    minmax(0, 65fr);

  grid-template-areas:
    "header header"
    "tabs results"
    "search results"
    "status results"
    "actions results"
    "preview results";

  column-gap: clamp(14px, 2.2vw, 34px);
  row-gap: clamp(9px, 1.2vw, 16px);
}

.free-photos-box:not(.logo-background-mode)[style*="display: block"] {
  display: grid !important;
}

.free-photos-box:not(.logo-background-mode):not([style*="display: block"]) {
  display: none !important;
}

.free-photos-box:not(.logo-background-mode)::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  border-radius: inherit;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.07),
      transparent 25%,
      transparent 72%,
      rgba(48,208,216,.05)
    );
}

/* Header */

.free-photos-box:not(.logo-background-mode)
.free-media-card-header {
  position: relative;
  z-index: 1;

  grid-area: header;

  display: flex;
  align-items: center;

  gap: clamp(10px, 1.5vw, 18px);

  width: 100%;
  min-width: 0;

  margin-bottom: clamp(4px, .6vw, 8px);
  padding-bottom: clamp(12px, 1.5vw, 18px);

  border-bottom: 1px solid rgba(255,255,255,.10);
}

.free-media-card-icon {
  width: clamp(52px, 6vw, 68px);
  height: clamp(52px, 6vw, 68px);

  flex:
    0 0 clamp(52px, 6vw, 68px);

  display: grid;
  place-items: center;

  border: 1px solid rgba(87,235,218,.36);
  border-radius: clamp(16px, 2vw, 22px);

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,.25),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #30d0d8,
      #43d6a1
    );

  box-shadow:
    0 15px 32px rgba(48,208,216,.20),
    inset 0 1px 0 rgba(255,255,255,.34);
}

.free-media-card-icon svg {
  width: 58%;
  height: 58%;

  fill: none;
  stroke: #ffffff;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.free-media-card-heading {
  min-width: 0;
}

#freeMediaCardTitle {
  display: block;

  margin: 0 0 5px;

  color: #ffffff;

  font-size: clamp(23px, 3vw, 34px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.7px;
}

.free-media-card-subtitle {
  color: #c5ccdf;

  font-size: clamp(11px, 1.15vw, 14px);
  font-weight: 650;
  line-height: 1.45;
}

/* Photo / Video tabs */

.free-photos-box:not(.logo-background-mode)
.free-media-tabs {
  position: relative;
  z-index: 1;

  grid-area: tabs;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: clamp(7px, 1vw, 12px);

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: clamp(9px, 1.2vw, 14px);

  border: 1px solid rgba(255,255,255,.09);
  border-radius: clamp(13px, 1.6vw, 19px);

  background: rgba(255,255,255,.045);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

.free-photos-box:not(.logo-background-mode)
.free-media-tab {
  width: 100%;
  min-width: 0;

  min-height: clamp(40px, 4.3vw, 50px);

  margin: 0;
  padding: clamp(7px, .9vw, 11px);

  border: 1px solid rgba(255,255,255,.11);
  border-radius: clamp(9px, 1.1vw, 13px);

  background:
    linear-gradient(
      135deg,
      #202a3b,
      #344156
    );

  color: #dce1f0;

  font-size: clamp(11px, 1.2vw, 15px);
  font-weight: 900;

  box-shadow:
    0 7px 14px rgba(0,0,0,.17),
    inset 0 1px 0 rgba(255,255,255,.09);
}

.free-photos-box:not(.logo-background-mode)
.free-media-tab.active {
  border-color: rgba(87,235,218,.45);

  background:
    linear-gradient(
      135deg,
      #123f4b,
      #17616a 54%,
      #123f46
    );

  color: #ffffff;

  box-shadow:
    0 9px 20px rgba(48,208,216,.18),
    inset 0 1px 0 rgba(255,255,255,.13);
}

/* Search */

.free-photos-box:not(.logo-background-mode)
.free-photos-search {
  position: relative;
  z-index: 1;

  grid-area: search;

  display: grid;

  grid-template-columns:
    minmax(0, 72fr)
    minmax(0, 28fr);

  gap: clamp(6px, .8vw, 10px);

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: clamp(10px, 1.4vw, 16px);

  border: 1px solid rgba(255,255,255,.09);
  border-radius: clamp(13px, 1.6vw, 19px);

  background: rgba(255,255,255,.045);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

.free-photos-box:not(.logo-background-mode)
.free-photos-search input {
  width: 100%;
  min-width: 0;

  height: clamp(39px, 4vw, 48px);

  margin: 0;
  padding: 0 clamp(9px, 1vw, 14px);

  border: 1px solid rgba(255,255,255,.13);
  border-radius: clamp(9px, 1.1vw, 13px);

  outline: none;

  background: rgba(255,255,255,.075);
  color: #ffffff;

  font-size: clamp(11px, 1.15vw, 14px);
  font-weight: 750;
}

.free-photos-box:not(.logo-background-mode)
.free-photos-search input::placeholder {
  color: #9fa8c2;
}

.free-photos-box:not(.logo-background-mode)
#freePhotoSearchBtn {
  width: 100%;
  min-width: 0;

  min-height: clamp(39px, 4vw, 48px);

  margin: 0;
  padding: clamp(6px, .8vw, 10px);

  border: 1px solid rgba(87,235,218,.22);
  border-radius: clamp(9px, 1.1vw, 13px);

  background:
    linear-gradient(
      135deg,
      #123f4b,
      #17616a 54%,
      #123f46
    );

  color: #ffffff;

  font-size: clamp(11px, 1.15vw, 14px);
  font-weight: 900;
}

/* Status */

.free-photos-box:not(.logo-background-mode)
#freePhotosStatus {
  position: relative;
  z-index: 1;

  grid-area: status;

  width: 100%;
  min-width: 0;

  min-height: clamp(32px, 3.4vw, 40px);

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 !important;
  padding: clamp(7px, .8vw, 10px);

  border-radius: clamp(9px, 1vw, 12px);

  background: rgba(48,208,216,.08);

  color: #a9eee4 !important;

  font-size: clamp(10px, 1vw, 13px) !important;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

/* Selected preview */

.free-photos-box:not(.logo-background-mode)
#freePhotoPreviewBox {
  position: relative;
  z-index: 1;

  grid-area: preview;

  width: 100%;
  min-width: 0;
  max-width: 100%;

  margin: 0 !important;
  padding: clamp(9px, 1.2vw, 14px);

  border: 1px solid rgba(87,235,218,.30);
  border-radius: clamp(14px, 1.7vw, 20px);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(48,208,216,.13),
      transparent 48%
    ),
    rgba(255,255,255,.045);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08);
}

.free-photos-box:not(.logo-background-mode)
#freePhotoPreviewBox[style*="display: none"] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.free-photos-box:not(.logo-background-mode)
#freePhotoCropFrame {
  width: auto !important;
  max-width: 100% !important;

  height: 50vh;
  height: 50dvh;

  max-height: 50vh;
  max-height: 50dvh;

  aspect-ratio: 16 / 9;

  margin: 0 auto !important;

  border-radius:
    clamp(11px, 1.4vw, 17px) !important;
}

.free-photos-box:not(.logo-background-mode)
#freePhotoPreviewImage,
.free-photos-box:not(.logo-background-mode)
#freeVideoPreviewPlayer {
  width: 100% !important;
  height: 100% !important;

  max-width: 100%;
  max-height: 100%;

  object-fit: cover;
}

.free-photos-box:not(.logo-background-mode)
#freeVideoTrimBox {
  margin-top: clamp(7px, 1vw, 11px);
  padding: clamp(8px, 1.1vw, 12px);

  border: 1px solid rgba(255,255,255,.09);
  border-radius: clamp(10px, 1.3vw, 15px);

  background: rgba(255,255,255,.05);
}

.free-photos-box:not(.logo-background-mode)
.free-video-trim-info {
  color: #a9eee4;
}

.free-photos-box:not(.logo-background-mode)
#setFreeVideoStartBtn,
.free-photos-box:not(.logo-background-mode)
#setFreeVideoEndBtn {
  min-width: 0;

  background:
    linear-gradient(
      135deg,
      #172d4d,
      #234b67 55%,
      #183443
    ) !important;
}

.free-photos-box:not(.logo-background-mode)
#selectFreePreviewBtn {
  background:
    linear-gradient(
      135deg,
      #17634d,
      #24916d 55%,
      #164d42
    ) !important;
}

.free-photos-box:not(.logo-background-mode)
#closeFreePreviewBtn {
  background:
    linear-gradient(
      135deg,
      #28223f,
      #49335f 55%,
      #30213e
    ) !important;
}

/* Search results */

.free-photos-box:not(.logo-background-mode)
.free-photos-grid {
  position: relative;
  z-index: 1;

  grid-area: results;

  width: 100%;
  min-width: 0;

  min-height: 0;

  align-content: start;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: clamp(7px, 1vw, 13px);

  margin: 0;
  padding: clamp(10px, 1.4vw, 17px);

  overflow: visible;

  border: 1px solid rgba(48,208,216,.22);
  border-radius: clamp(16px, 2vw, 24px);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(48,208,216,.12),
      transparent 45%
    ),
    rgba(255,255,255,.04);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08);
}

.free-photos-box:not(.logo-background-mode)
.photo-card {
  width: 100%;
  min-width: 0;

  aspect-ratio: 1 / 1;

  border: 2px solid transparent;
  border-radius: clamp(11px, 1.4vw, 17px);

  background: rgba(255,255,255,.05);

  overflow: hidden;

  box-shadow:
    0 9px 20px rgba(0,0,0,.22);
}

.free-photos-box:not(.logo-background-mode)
.photo-card img,
.free-photos-box:not(.logo-background-mode)
.photo-card .free-grid-video {
  width: 100%;
  height: 100%;

  aspect-ratio: 1 / 1;

  display: block;

  object-fit: cover;

  border-radius: inherit;
}

.free-photos-box:not(.logo-background-mode)
.photo-card .free-grid-video {
  background: #000000;
}

.free-photos-box:not(.logo-background-mode)
.photo-card.selected {
  border-color: #43d6a1;

  box-shadow:
    0 0 0 3px rgba(67,214,161,.16),
    0 12px 26px rgba(0,0,0,.27);
}

.free-photos-box:not(.logo-background-mode)
.photo-check {
  top: 5%;
  right: 5%;

  width: clamp(25px, 2.8vw, 36px);
  height: auto;
  aspect-ratio: 1 / 1;

  background:
    linear-gradient(
      145deg,
      #30d0d8,
      #43d6a1
    );

  font-size: clamp(14px, 1.6vw, 21px);
}

/* Footer */

.free-photos-box:not(.logo-background-mode)
.free-photos-actions {
  position: relative;
  z-index: 1;

  grid-area: actions;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 3%;

  align-self: start;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding-top: 2%;

  border-top:
    .08em solid rgba(255,255,255,.10);
}

.free-photos-box:not(.logo-background-mode)
.free-photos-actions button {
  width: 100%;
  min-width: 0;

  min-height: 3.1em;

  margin: 0;
  padding: 5% 2%;

  border:
    .08em solid rgba(255,255,255,.12);

  border-radius: .85em;

  color: #ffffff;

  font-size:
    clamp(.62rem, 1vw, .82rem);

  font-weight: 900;
  line-height: 1.1;

  white-space: nowrap;

  box-shadow:
    0 .55em 1.1em rgba(0,0,0,.22),
    inset 0 .08em 0 rgba(255,255,255,.12);
}

.free-photos-box:not(.logo-background-mode)
#loadMoreFreePhotosBtn {
  background:
    linear-gradient(
      135deg,
      #172d4d,
      #234b67 55%,
      #183443
    );
}

.free-photos-box:not(.logo-background-mode)
#addFreePhotosBtn {
  background:
    linear-gradient(
      135deg,
      #17634d,
      #24916d 55%,
      #164d42
    );
}

.free-photos-box:not(.logo-background-mode)
#closeFreePhotosBtn {
  background:
    linear-gradient(
      135deg,
      #28223f,
      #49335f 55%,
      #30213e
    );
}

/* ***** TABLET ***** */

@media
  (min-width: 768px)
  and (max-width: 1100px) {

  .free-photos-box:not(.logo-background-mode) {
    width: 97%;

    grid-template-columns:
      minmax(0, 39fr)
      minmax(0, 61fr);

    column-gap: 1.7%;

    padding: clamp(13px, 2vw, 22px);
  }

  .free-photos-box:not(.logo-background-mode)
  .free-photos-grid {
    min-height: clamp(300px, 52vw, 570px);
  }

}

/* ***** MOBILE LANDSCAPE ***** */

@media
  (max-width: 767px)
  and (orientation: landscape) {

  .free-photos-box:not(.logo-background-mode) {
    width: 98%;

    margin: 1% auto 3%;
    padding: clamp(10px, 1.8vw, 15px);

    border-radius: clamp(18px, 3vw, 26px);

    grid-template-columns:
      minmax(0, 40fr)
      minmax(0, 60fr);

    column-gap: 1.5%;
    row-gap: 7px;
  }

  .free-photos-box:not(.logo-background-mode)
  .free-media-card-header {
    margin-bottom: 1px;
    padding-bottom: 9px;
  }

  .free-photos-box:not(.logo-background-mode)
  .free-media-tabs,
  .free-photos-box:not(.logo-background-mode)
  .free-photos-search {
    padding: clamp(6px, 1.1vw, 9px);
  }

  .free-photos-box:not(.logo-background-mode)
  .free-media-tab {
    min-height: clamp(31px, 7vh, 39px);

    padding: 3px;

    font-size: clamp(9px, 1.55vw, 12px);
  }

  .free-photos-box:not(.logo-background-mode)
  .free-photos-search {
    grid-template-columns:
      minmax(0, 68fr)
      minmax(0, 32fr);
  }

  .free-photos-box:not(.logo-background-mode)
  .free-photos-grid {
    min-height: clamp(250px, 66vh, 470px);

    gap: 6px;
    padding: clamp(7px, 1.2vw, 10px);
  }

  .free-photos-box:not(.logo-background-mode)
  .free-photos-actions {
    padding-top: 9px;
  }

  .free-photos-box:not(.logo-background-mode)
  .free-photos-actions button {
    min-height: clamp(34px, 8vh, 44px);

    font-size: clamp(10px, 1.7vw, 13px);
  }

}

/* ***** MOBILE PORTRAIT ***** */

@media
  (max-width: 767px)
  and (orientation: portrait) {

  .free-photos-box:not(.logo-background-mode) {
    width: 96%;

    margin: 3% auto 5%;
    padding: clamp(12px, 4vw, 18px);

    border-radius: clamp(20px, 6vw, 28px);

    grid-template-columns:
      minmax(0, 1fr);

    grid-template-areas:
      "header"
      "tabs"
      "search"
      "status"
      "preview"
      "results"
      "actions";
  }

  .free-photos-box:not(.logo-background-mode)
  .free-photos-actions {
    width: 100%;

    margin: 0;

    padding-top: 4%;
  }

  .free-photos-box:not(.logo-background-mode)
  .free-photos-actions button {
    font-size:
      clamp(.65rem, 2.8vw, .82rem);
  }

  .free-photos-box:not(.logo-background-mode) {
    gap:
      clamp(9px, 2.5vw, 14px);
  }

  .free-photos-box:not(.logo-background-mode)
  .free-photos-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    min-height: 0;
  }

}

/* Extra-narrow mobile */

@media
  (max-width: 390px)
  and (orientation: portrait) {

  .free-photos-box:not(.logo-background-mode)
  .free-photos-search {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .free-photos-box:not(.logo-background-mode)
  .free-photos-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .free-photos-box:not(.logo-background-mode)
  .free-photos-actions {
    grid-template-columns:
      minmax(0, 1fr);
  }

}

/* Logo Background must never show the normal Free Media header */

.free-photos-box.logo-background-mode
.free-media-card-header {
  display: none;
}

/* ***** LOGO BACKGROUND CONFIRMATION ***** */

.logo-background-confirmation {
  position: fixed;

  left: 50%;
  top: 50%;

  z-index: 20050;

  width: min(86%, 430px);

  transform:
    translate(-50%, -50%)
    scale(.96);

  padding:
    clamp(15px, 2vw, 22px);

  border:
    1px solid rgba(255,255,255,.22);

  border-radius:
    clamp(15px, 2vw, 22px);

  background:
    linear-gradient(
      145deg,
      rgba(23,99,77,.98),
      rgba(36,145,109,.98)
    );

  color: #ffffff;

  font-size:
    clamp(13px, 1.5vw, 18px);

  font-weight: 900;
  line-height: 1.4;
  text-align: center;

  box-shadow:
    0 24px 65px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.18);

  opacity: 0;
  pointer-events: none;

  transition:
    opacity .18s ease,
    transform .18s ease;
}

.logo-background-confirmation.show {
  opacity: 1;

  transform:
    translate(-50%, -50%)
    scale(1);
}

/* ***** 04IA - HORIZONTAL 2026 LOGO BACKGROUND CARD ***** */

.logo-background-card-header {
  display: none;
}

/*
  These rules activate only in Logo Background mode.
  The normal Free Media card remains unchanged.
*/

.free-photos-box.logo-background-mode {
  position: relative;

  width: 96%;
  max-width: none;

  margin: 2% auto 4%;
  padding: clamp(14px, 2.3vw, 32px);

  color: #f7f8ff;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius:
    clamp(24px, 3vw, 40px);

  background:
    radial-gradient(
      circle at 7% 4%,
      rgba(48,208,216,.22),
      transparent 29%
    ),
    radial-gradient(
      circle at 93% 8%,
      rgba(67,214,161,.17),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      rgba(28,34,63,.98),
      rgba(8,11,26,.99)
    );

  box-shadow:
    0 34px 90px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.09);

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  overflow: hidden;

  display: grid;

  grid-template-columns:
    minmax(0, 39fr)
    minmax(0, 61fr);

  grid-template-areas:
    "header header"
    "search results"
    "shortcuts results"
    "status results"
    "actions actions";

  column-gap:
    clamp(14px, 2.2vw, 34px);

  row-gap:
    clamp(9px, 1.2vw, 16px);
}

.free-photos-box.logo-background-mode::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  border-radius: inherit;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.07),
      transparent 25%,
      transparent 72%,
      rgba(48,208,216,.05)
    );
}

/* Header */

.free-photos-box.logo-background-mode
.logo-background-card-header {
  position: relative;
  z-index: 1;

  grid-area: header;

  display: flex;
  align-items: center;

  gap:
    clamp(10px, 1.5vw, 18px);

  width: 100%;
  min-width: 0;

  margin-bottom:
    clamp(4px, .6vw, 8px);

  padding-bottom:
    clamp(12px, 1.5vw, 18px);

  border-bottom:
    1px solid rgba(255,255,255,.10);
}

.logo-background-card-icon {
  width:
    clamp(52px, 6vw, 68px);

  height:
    clamp(52px, 6vw, 68px);

  flex:
    0 0 clamp(52px, 6vw, 68px);

  display: grid;
  place-items: center;

  border:
    1px solid rgba(87,235,218,.36);

  border-radius:
    clamp(16px, 2vw, 22px);

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,.25),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #30d0d8,
      #43d6a1
    );

  box-shadow:
    0 15px 32px rgba(48,208,216,.20),
    inset 0 1px 0 rgba(255,255,255,.34);
}

.logo-background-card-icon svg {
  width: 58%;
  height: 58%;

  fill: none;
  stroke: #ffffff;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logo-background-card-heading {
  min-width: 0;
}

.free-photos-box.logo-background-mode
#xFreePhotosTitle {
  display: block;

  margin: 0 0 5px;

  color: #ffffff;

  font-size:
    clamp(23px, 3vw, 34px);

  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.7px;
}

.logo-background-card-subtitle {
  display: none;
}

.free-photos-box.logo-background-mode
.logo-background-card-subtitle {
  display: block;

  color: #c5ccdf;

  font-size:
    clamp(11px, 1.15vw, 14px);

  font-weight: 650;
  line-height: 1.45;
}

/* Hide the unnecessary Photos tab in Logo Background mode */

.free-photos-box.logo-background-mode
.free-media-tabs {
  display: none;
}

/* Search panel */

.free-photos-box.logo-background-mode
.free-photos-search {
  position: relative;
  z-index: 1;

  grid-area: search;

  display: grid;

  grid-template-columns:
    minmax(0, 72fr)
    minmax(0, 28fr);

  gap:
    clamp(6px, .8vw, 10px);

  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(10px, 1.4vw, 16px);

  border:
    1px solid rgba(255,255,255,.09);

  border-radius:
    clamp(13px, 1.6vw, 19px);

  background:
    rgba(255,255,255,.045);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

.free-photos-box.logo-background-mode
.free-photos-search input {
  width: 100%;
  min-width: 0;

  height:
    clamp(39px, 4vw, 48px);

  margin: 0;
  padding:
    0 clamp(9px, 1vw, 14px);

  border:
    1px solid rgba(255,255,255,.13);

  border-radius:
    clamp(9px, 1.1vw, 13px);

  outline: none;

  background:
    rgba(255,255,255,.075);

  color: #ffffff;

  font-size:
    clamp(11px, 1.15vw, 14px);

  font-weight: 750;
}

.free-photos-box.logo-background-mode
.free-photos-search input::placeholder {
  color: #9fa8c2;
}

.free-photos-box.logo-background-mode
#freePhotoSearchBtn {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(39px, 4vw, 48px);

  margin: 0;
  padding:
    clamp(6px, .8vw, 10px);

  border:
    1px solid rgba(87,235,218,.22);

  border-radius:
    clamp(9px, 1.1vw, 13px);

  background:
    linear-gradient(
      135deg,
      #123f4b,
      #17616a 54%,
      #123f46
    );

  color: #ffffff;

  font-size:
    clamp(11px, 1.15vw, 14px);

  font-weight: 900;
}

/* Quick background categories */

.free-photos-box.logo-background-mode
.logo-bg-shortcuts {
  position: relative;
  z-index: 1;

  grid-area: shortcuts;

  width: 100%;
  min-width: 0;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    clamp(6px, .8vw, 10px);

  margin: 0;
  padding:
    clamp(10px, 1.4vw, 16px);

  border:
    1px solid rgba(255,255,255,.09);

  border-radius:
    clamp(13px, 1.6vw, 19px);

  background:
    rgba(255,255,255,.045);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

.free-photos-box.logo-background-mode
.logo-bg-shortcuts button {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(37px, 4vw, 46px);

  margin: 0;
  padding:
    clamp(5px, .7vw, 9px);

  border:
    1px solid rgba(255,255,255,.11);

  border-radius:
    clamp(9px, 1.1vw, 13px);

  background:
    linear-gradient(
      135deg,
      #202a3b,
      #344156
    );

  color: #dce1f0;

  font-size:
    clamp(11px, 1.15vw, 14px);

  font-weight: 900;
  line-height: 1.15;

  white-space: normal;
  overflow-wrap: anywhere;

  box-shadow:
    0 7px 14px rgba(0,0,0,.17),
    inset 0 1px 0 rgba(255,255,255,.09);
}

.free-photos-box.logo-background-mode
.logo-bg-shortcuts button:active {
  transform: scale(.97);
}

/* Search status */

.free-photos-box.logo-background-mode
#freePhotosStatus {
  position: relative;
  z-index: 1;

  grid-area: status;

  width: 100%;
  min-width: 0;

  margin: 0 !important;
  padding:
    clamp(7px, .8vw, 10px);

  border-radius:
    clamp(9px, 1vw, 12px);

  background:
    rgba(48,208,216,.08);

  color: #a9eee4 !important;

  font-size:
    clamp(10px, 1vw, 13px) !important;

  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

/* Selected background preview removed */

.free-photos-box.logo-background-mode
#freePhotoPreviewBox {
  display: none !important;
}

/* Legacy preview rules */

.free-photos-box.logo-background-mode
#freePhotoPreviewBox {
  position: relative;
  z-index: 1;

  grid-area: preview;

  width: 100%;
  min-width: 0;
  max-width: 100%;

  margin: 0 !important;
  padding:
    clamp(9px, 1.2vw, 14px);

  border:
    1px solid rgba(87,235,218,.30);

  border-radius:
    clamp(14px, 1.7vw, 20px);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(48,208,216,.13),
      transparent 48%
    ),
    rgba(255,255,255,.045);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08);
}

.free-photos-box.logo-background-mode
#freePhotoCropFrame {
  width: 100% !important;
  max-width: none !important;

  aspect-ratio: 16 / 9;

  margin: 0 auto !important;

  border-radius:
    clamp(11px, 1.4vw, 17px) !important;
}

.free-photos-box.logo-background-mode
#selectFreePreviewBtn,
.free-photos-box.logo-background-mode
#closeFreePreviewBtn {
  min-width: 0;

  padding:
    clamp(7px, .9vw, 11px)
    clamp(10px, 1.2vw, 16px);

  border-radius:
    clamp(9px, 1.1vw, 13px);

  font-size:
    clamp(11px, 1.1vw, 14px);

  font-weight: 900;
}

.free-photos-box.logo-background-mode
#selectFreePreviewBtn {
  background:
    linear-gradient(
      135deg,
      #17634d,
      #24916d 55%,
      #164d42
    ) !important;
}

.free-photos-box.logo-background-mode
#closeFreePreviewBtn {
  background:
    linear-gradient(
      135deg,
      #28223f,
      #49335f 55%,
      #30213e
    ) !important;
}

/* Search result gallery */

.free-photos-box.logo-background-mode
.logo-background-empty {
  grid-column: 1 / -1;

  width: 100%;

  align-self: center;

  padding:
    clamp(25px, 5vw, 60px)
    clamp(10px, 2vw, 22px);

  color: #aab3cc;

  font-size:
    clamp(12px, 1.2vw, 15px);

  font-weight: 750;
  line-height: 1.5;
  text-align: center;
}

.free-photos-box.logo-background-mode
.free-photos-grid {
  position: relative;
  z-index: 1;

  grid-area: results;

  width: 100%;
  min-width: 0;

  min-height:
    clamp(300px, 42vw, 650px);

  align-content: start;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    clamp(7px, 1vw, 13px);

  margin: 0;
  padding:
    clamp(10px, 1.4vw, 17px);

  overflow: visible;

  border:
    1px solid rgba(48,208,216,.22);

  border-radius:
    clamp(16px, 2vw, 24px);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(48,208,216,.12),
      transparent 45%
    ),
    rgba(255,255,255,.04);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08);
}

.free-photos-box.logo-background-mode
.photo-card {
  width: 100%;
  min-width: 0;

  aspect-ratio: 1 / 1;

  border:
    2px solid transparent;

  border-radius:
    clamp(11px, 1.4vw, 17px);

  background:
    rgba(255,255,255,.05);

  overflow: hidden;

  box-shadow:
    0 9px 20px rgba(0,0,0,.22);
}

.free-photos-box.logo-background-mode
.photo-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;

  object-fit: cover;

  border-radius: inherit;
}

.free-photos-box.logo-background-mode
.photo-card.selected {
  border-color: #43d6a1;

  box-shadow:
    0 0 0 3px rgba(67,214,161,.16),
    0 12px 26px rgba(0,0,0,.27);
}

/* Footer buttons */

.free-photos-box.logo-background-mode
.free-photos-actions {
  position: relative;
  z-index: 1;

  grid-area: actions;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    clamp(8px, 1.3vw, 17px);

  width: 100%;
  min-width: 0;

  margin:
    clamp(5px, .8vw, 10px)
    0 0;

  padding-top:
    clamp(13px, 1.6vw, 20px);

  border-top:
    1px solid rgba(255,255,255,.10);
}

.free-photos-box.logo-background-mode
.free-photos-actions button {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(42px, 4.5vw, 52px);

  margin: 0;
  padding:
    clamp(8px, 1vw, 12px);

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:
    clamp(10px, 1.2vw, 14px);

  color: #ffffff;

  font-size:
    clamp(11px, 1.2vw, 15px);

  font-weight: 900;
  line-height: 1.15;

  box-shadow:
    0 8px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.free-photos-box.logo-background-mode
#loadMoreFreePhotosBtn {
  background:
    linear-gradient(
      135deg,
      #172d4d,
      #234b67 55%,
      #183443
    );
}

.free-photos-box.logo-background-mode
#addFreePhotosBtn {
  display: none;
}

.free-photos-box.logo-background-mode
#closeFreePhotosBtn {
  grid-column: 2 / 3;

  background:
    linear-gradient(
      135deg,
      #28223f,
      #49335f 55%,
      #30213e
    );
}

/* ***** TABLET ***** */

@media
  (min-width: 768px)
  and (max-width: 1100px) {

  .free-photos-box.logo-background-mode {
    width: 97%;

    grid-template-columns:
      minmax(0, 42fr)
      minmax(0, 58fr);

    column-gap: 1.7%;

    padding:
      clamp(13px, 2vw, 22px);
  }

  .free-photos-box.logo-background-mode
  .free-photos-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    min-height:
      clamp(280px, 50vw, 540px);
  }

}

/* ***** MOBILE LANDSCAPE ***** */

@media
  (max-width: 767px)
  and (orientation: landscape) {

  .free-photos-box.logo-background-mode {
    width: 98%;

    margin: 1% auto 3%;
    padding:
      clamp(10px, 1.8vw, 15px);

    border-radius:
      clamp(18px, 3vw, 26px);

    grid-template-columns:
      minmax(0, 43fr)
      minmax(0, 57fr);

    column-gap: 1.5%;
    row-gap: 7px;
  }

  .free-photos-box.logo-background-mode
  .logo-background-card-header {
    margin-bottom: 1px;
    padding-bottom: 9px;
  }

  .free-photos-box.logo-background-mode
  .free-photos-search {
    padding:
      clamp(6px, 1.1vw, 9px);

    grid-template-columns:
      minmax(0, 68fr)
      minmax(0, 32fr);
  }

  .free-photos-box.logo-background-mode
  .logo-bg-shortcuts {
    padding:
      clamp(6px, 1.1vw, 9px);

    gap: 5px;
  }

  .free-photos-box.logo-background-mode
  .logo-bg-shortcuts button {
    min-height:
      clamp(29px, 7vh, 37px);

    padding: 3px;

    font-size:
      clamp(9px, 1.55vw, 12px);
  }

  .free-photos-box.logo-background-mode
  .free-photos-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    min-height:
      clamp(240px, 62vh, 450px);

    gap: 6px;
    padding:
      clamp(7px, 1.2vw, 10px);
  }

  .free-photos-box.logo-background-mode
  .free-photos-actions {
    padding-top: 9px;
  }

  .free-photos-box.logo-background-mode
  .free-photos-actions button {
    min-height:
      clamp(34px, 8vh, 44px);

    font-size:
      clamp(10px, 1.7vw, 13px);
  }

}

/* ***** MOBILE PORTRAIT ***** */

@media
  (max-width: 767px)
  and (orientation: portrait) {

  .free-photos-box.logo-background-mode {
    width: 96%;

    margin: 3% auto 5%;
    padding:
      clamp(12px, 4vw, 18px);

    border-radius:
      clamp(20px, 6vw, 28px);

    grid-template-columns:
      minmax(0, 1fr);

    grid-template-areas:
      "header"
      "search"
      "shortcuts"
      "status"
      "results"
      "actions";

    gap:
      clamp(9px, 2.5vw, 14px);
  }

  .free-photos-box.logo-background-mode
  .free-photos-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    min-height: 0;
  }

  .free-photos-box.logo-background-mode
  .logo-bg-shortcuts {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

}

/* Extra-narrow mobile */

@media
  (max-width: 390px)
  and (orientation: portrait) {

  .free-photos-box.logo-background-mode
  .free-photos-search {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .free-photos-box.logo-background-mode
  .free-photos-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .free-photos-box.logo-background-mode
  .free-photos-actions {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .free-photos-box.logo-background-mode
  #closeFreePhotosBtn {
    grid-column: auto;
  }

}

/* ***** 04J - HORIZONTAL 2026 TEXT LOGO MAKER ***** */

.logo-action-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin:0 0 18px;
}

#createTextLogoBtn{
  background:
    linear-gradient(
      135deg,
      #28223f 0%,
      #49335f 55%,
      #30213e 100%
    );
}

.text-logo-box{
  display:none;

  position:relative;
  top:auto;
  left:auto;
  transform:none;

  width:min(1320px, calc(100% - 28px));
  max-width:1320px;

  z-index:10010;

  margin:18px auto 32px;
  padding:clamp(20px, 3vw, 34px);

  color:#f7f8ff;
  text-align:left;

  border:1px solid rgba(255,255,255,.11);
  border-radius:clamp(26px, 3vw, 40px);

  background:
    radial-gradient(
      circle at 6% 4%,
      rgba(141,87,255,.24),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 9%,
      rgba(209,70,216,.19),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      rgba(28,34,63,.98),
      rgba(8,11,26,.99)
    );

  box-shadow:
    0 34px 90px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.09);

  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}

.text-logo-box::before{
  content:"";

  position:absolute;
  inset:0;

  border-radius:inherit;

  pointer-events:none;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.07),
      transparent 24%,
      transparent 72%,
      rgba(209,70,216,.05)
    );
}

.logo-maker-header{
  position:relative;
  z-index:1;

  display:flex;
  align-items:center;
  gap:16px;

  margin-bottom:24px;
  padding-bottom:18px;

  border-bottom:1px solid rgba(255,255,255,.10);
}

.logo-maker-header-icon{
  width:68px;
  height:68px;
  flex:0 0 68px;

  display:grid;
  place-items:center;

  border:1px solid rgba(190,130,255,.38);
  border-radius:22px;

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,.25),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #8d57ff,
      #d146d8
    );

  box-shadow:
    0 15px 32px rgba(141,87,255,.22),
    inset 0 1px 0 rgba(255,255,255,.34);
}

.logo-maker-header-icon svg{
  width:39px;
  height:39px;

  stroke:#ffffff;
  fill:none;

  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.logo-maker-heading{
  min-width:0;
}

#xTextLogoTitle{
  display:block;

  margin:0 0 5px;

  color:#ffffff;

  font-size:clamp(23px, 3vw, 34px);
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.7px;
}

.logo-maker-subtitle{
  color:#c5ccdf;

  font-size:14px;
  font-weight:650;
  line-height:1.45;
}

.logo-maker-layout{
  position:relative;
  z-index:1;

  display:grid;

  grid-template-columns:
    minmax(510px, 1fr)
    minmax(560px, 1.08fr);

  gap:clamp(22px, 3vw, 42px);
  align-items:start;
}

.logo-maker-preview-panel,
.logo-maker-controls-panel{
  min-width:0;

  padding:clamp(18px, 2.4vw, 28px);

  border:1px solid rgba(255,255,255,.09);
  border-radius:25px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.025)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

.logo-maker-preview-panel{
  border-color:rgba(141,87,255,.26);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(141,87,255,.16),
      transparent 48%
    ),
    rgba(255,255,255,.045);
}

.logo-maker-section-title{
  margin:0 0 14px;

  color:#ffffff;

  font-size:16px;
  font-weight:900;
  line-height:1.25;
}

.text-logo-name-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;

  margin:0 0 18px;
}

.text-logo-name-grid label{
  display:block;

  margin:0;

  color:#dce1f0;

  font-size:13px;
  font-weight:800;
  line-height:1.25;
}

.text-logo-name-grid input{
  width:100%;
  height:44px;

  margin:0;
  padding:0 13px;

  border:1px solid rgba(255,255,255,.13);
  border-radius:13px;

  outline:none;

  background:rgba(255,255,255,.075);
  color:#ffffff;

  font-size:14px;
  font-weight:700;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06);
}

.text-logo-name-grid input:focus{
  border-color:rgba(141,87,255,.90);

  background:rgba(255,255,255,.11);

  box-shadow:
    0 0 0 3px rgba(141,87,255,.13),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.logo-live-desk{
  display:grid;

  grid-template-columns:
    minmax(155px, 1.18fr)
    repeat(3, minmax(76px, .72fr));

  gap:10px;
  align-items:stretch;

  width:100%;
  min-width:0;

  margin:0 0 18px;
}

#textLogoCanvas{
  display:block;

  width:100%;
  max-width:210px;
  height:auto;
  aspect-ratio:1 / 1;

  margin:0 auto;

  border:1px solid rgba(255,255,255,.13);
  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.035)
    );

  box-shadow:
    0 20px 42px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.logo-control-card{
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:150px;
  overflow:hidden;

  display:grid;
  grid-template-columns:1fr 1fr;
  align-content:center;
  gap:8px;

  padding:12px;

  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;

  background:rgba(255,255,255,.055);
  color:#dce1f0;

  font-size:11px;
  font-weight:900;
  line-height:1.15;
  text-align:center;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

.logo-control-card span,
.logo-control-card .logo-font-name{
  grid-column:1 / -1;
}

.logo-control-card button{
  width:100%;
  height:36px;

  margin:0;
  padding:0;

  border:1px solid rgba(255,255,255,.12);
  border-radius:11px;

  background:
    linear-gradient(
      135deg,
      #202a3b,
      #344156
    );

  color:#ffffff;

  font-size:15px;
  font-weight:900;
  line-height:36px;

  box-shadow:
    0 7px 14px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}

#logoFontNextBtn{
  grid-column:1 / -1;
}

#logoSizeResetBtn{
  grid-column:1 / -1;

  background:
    linear-gradient(
      135deg,
      #4b162d,
      #74223f
    );
}

.logo-font-name{
  min-width:0;

  color:#d4a9ff;

  font-size:11px;
  font-weight:900;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.logo-preview-grid{
  display:grid;

  grid-template-columns:
    42px repeat(3, minmax(0, 1fr));

  gap:8px;

  margin:0;
}

.logo-preview-card,
.logo-preview-shape{
  min-height:48px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:6px;

  border:2px solid transparent;
  border-radius:13px;

  background:rgba(255,255,255,.055);
  color:#d8dced;

  font-size:11px;
  font-weight:900;
  line-height:1.15;
  text-align:center;
  white-space:pre-line;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06);
}

.logo-preview-shape{
  color:#d4a9ff;
  font-size:22px;
}

.logo-preview-card.active{
  border-color:#9f69e8;

  background:
    linear-gradient(
      145deg,
      rgba(141,87,255,.24),
      rgba(209,70,216,.13)
    );

  color:#ffffff;

  box-shadow:
    0 8px 20px rgba(141,87,255,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.logo-maker-control-group{
  margin:0 0 18px;
  padding:16px;

  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;

  background:rgba(255,255,255,.045);
}

.text-logo-box .form-label{
  display:block;

  margin:0 0 8px;

  color:#dce1f0;

  font-size:13px;
  font-weight:850;
  line-height:1.25;
}

.text-logo-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));

  gap:10px;

  margin:0;
}

.logo-mini-btn{
  min-width:0;
  min-height:42px;

  margin:0;
  padding:8px 5px;

  border:1px solid rgba(255,255,255,.11);
  border-radius:12px;

  background:
    linear-gradient(
      135deg,
      #202a3b,
      #344156
    );

  color:#dce1f0;

  font-size:11px;
  font-weight:900;
  line-height:1.15;

  box-shadow:
    0 7px 14px rgba(0,0,0,.17),
    inset 0 1px 0 rgba(255,255,255,.09);
}

.logo-mini-btn.active{
  border-color:rgba(178,112,255,.72);

  background:
    linear-gradient(
      135deg,
      #38264f,
      #654078
    );

  color:#ffffff;

  box-shadow:
    0 8px 18px rgba(141,87,255,.20),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.logo-color-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;

  gap:6px;

  width:100%;
  max-width:100%;
  margin:0;

  overflow:visible;
}

.logo-color-btn{
  flex:0 0 29px;

  width:29px;
  height:29px;

  margin:0;
  padding:0;

  border:2px solid rgba(255,255,255,.78);
  border-radius:50%;

  box-shadow:
    0 4px 10px rgba(0,0,0,.24);
}

.logo-fill-background-group{
  width:100%;
  min-width:0;

  margin-bottom:
    clamp(10px,1.35vw,18px);

  padding:
    clamp(10px,1.3vw,16px);

  border-radius:
    clamp(12px,1.5vw,18px);

  overflow:hidden;
}

.logo-fill-background-headings{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto
    minmax(0,1fr);

  gap:
    clamp(8px,1.2vw,16px);

  align-items:center;

  width:100%;
  min-width:0;

  margin-bottom:
    clamp(7px,.9vw,11px);
}

.logo-fill-background-headings
.form-label{
  margin:0;
}

.logo-fill-background-headings
#xLogoFrameColorLabel{
  text-align:left;
}

.logo-fill-background-headings
#xLogoBackgroundLabel{
  text-align:right;
}

.logo-fill-background-or{
  color:#d4a9ff;

  font-size:
    clamp(10px,1vw,13px);

  font-weight:900;
  line-height:1;
  text-align:center;
}

.logo-fill-background-content{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

  gap:
    clamp(18px,3vw,38px);

  align-items:start;

  width:100%;
  min-width:0;
}

.logo-fill-background-content
#logoFrameColors{
  display:grid;

  grid-template-columns:
    repeat(5,minmax(0,1fr));

  gap:
    clamp(5px,.65vw,8px);

  width:100%;
  min-width:0;

  align-content:start;
  justify-items:center;

  overflow:visible;
}

.logo-fill-background-content
#logoFrameColors
.logo-color-btn{
  width:100%;
  max-width:31px;
  height:auto;
  min-width:0;

  justify-self:center;

  margin:0;

  aspect-ratio:1 / 1;
}

.logo-background-row{
  display:flex;
  flex-direction:column;
  align-items:flex-end;

  gap:
    clamp(8px,1vw,12px);

  width:100%;
  min-width:0;

  margin:0;
}

.logo-background-row button{
  width:
    clamp(150px,82%,210px);

  min-width:0;
  min-height:44px;

  margin:0;
  padding:8px 10px;

  border:1px solid rgba(255,255,255,.12);
  border-radius:13px;

  color:#ffffff;

  font-size:12px;
  font-weight:900;
  line-height:1.15;

  box-shadow:
    0 8px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.12);
}

#logoBackgroundSearchBtn{
  background:
    linear-gradient(
      135deg,
      #172d4d 0%,
      #234b67 55%,
      #183443 100%
    );
}

#logoBackgroundClearBtn{
  background:
    linear-gradient(
      135deg,
      #48121c 0%,
      #75202c 55%,
      #3c1019 100%
    );
}

.logo-bg-shortcuts{
  display:none;

  grid-template-columns:repeat(3, minmax(0, 1fr));

  gap:10px;

  margin:14px 0 0;
}

.logo-bg-shortcuts button{
  min-width:0;
  min-height:38px;

  margin:0;
  padding:6px;

  border:1px solid rgba(255,255,255,.10);
  border-radius:11px;

  background:
    linear-gradient(
      135deg,
      #202a3b,
      #344156
    );

  color:#dce1f0;

  font-size:11px;
  font-weight:900;
}

.text-logo-action-row{
  position:relative;
  z-index:1;

  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));

  gap:18px;

  margin-top:24px;
  padding-top:20px;

  border-top:1px solid rgba(255,255,255,.10);
}

.text-logo-action-row button{
  min-width:0;
  min-height:48px;

  margin:0;
  padding:10px 12px;

  border:1px solid rgba(255,255,255,.13);
  border-radius:13px;

  color:#ffffff;

  font-size:14px;
  font-weight:900;
  line-height:1.15;
  white-space:nowrap;

  box-shadow:
    0 8px 18px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.13);
}

#useTextLogoBtn{
  background:
    linear-gradient(
      135deg,
      #4c1837 0%,
      #71305f 52%,
      #38213f 100%
    );
}

#downloadTextLogoBtn{
  background:
    linear-gradient(
      135deg,
      #172d4d 0%,
      #234b67 55%,
      #183443 100%
    ) !important;
}

#closeTextLogoBtn{
  background:
    linear-gradient(
      135deg,
      #28223f 0%,
      #49335f 55%,
      #30213e 100%
    ) !important;
}

@media (max-width:1100px){

  .logo-maker-layout{
    grid-template-columns:
      minmax(440px, 1fr)
      minmax(470px, 1.05fr);

    gap:18px;
  }

  .logo-live-desk{
    grid-template-columns:
      minmax(145px, 1.08fr)
      repeat(3, minmax(72px, .72fr));

    gap:8px;
  }

  .logo-control-card{
    min-height:138px;
    padding:8px;
  }

  .logo-color-row{
    gap:5px;
  }

  .logo-color-btn{
    flex-basis:27px;
    width:27px;
    height:27px;
  }

}

@media (max-width:760px) and (orientation:portrait){

  .text-logo-box{
    width:calc(100% - 22px);
    padding:18px;
    border-radius:27px;
  }

  .logo-maker-layout{
    grid-template-columns:1fr;
    gap:16px;
  }

  .logo-live-desk{
    grid-template-columns:
      minmax(145px, 1.1fr)
      repeat(3, minmax(70px, .7fr));
  }

}

@media (max-width:560px){

  .logo-maker-header-icon{
    width:57px;
    height:57px;
    flex-basis:57px;

    border-radius:18px;
  }

  .logo-maker-header-icon svg{
    width:32px;
    height:32px;
  }

  .logo-maker-preview-panel,
  .logo-maker-controls-panel{
    padding:15px;
  }

  .logo-live-desk{
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap:8px;
  }

  #textLogoCanvas{
    grid-column:1 / -1;

    width:170px;
    max-width:170px;
  }

  .logo-control-card{
    min-height:126px;
  }

  .logo-preview-grid{
    grid-template-columns:
      38px repeat(3, minmax(0, 1fr));
  }

  .text-logo-row{
    gap:7px;
  }

  .logo-background-row{
    gap:10px;
  }

  .text-logo-action-row{
    gap:10px;
  }

}

@media (max-width:410px){

  .text-logo-row{
    grid-template-columns:1fr;
  }

  .logo-background-row{
    grid-template-columns:1fr;
  }

  .text-logo-action-row{
    grid-template-columns:1fr;
  }

}

/* ***** 04JA - PERCENTAGE RESPONSIVE LOGO MAKER ***** */

/*
  Percentage Rule:
  - Desktop
  - Tablet
  - Mobile portrait
  - Mobile landscape
*/

.text-logo-box {
  width: 96%;
  max-width: none;

  margin: 2% auto 4%;
  padding: clamp(14px, 2.3vw, 32px);

  overflow-x: hidden;
}

.logo-maker-header {
  gap: clamp(10px, 1.5vw, 18px);

  margin-bottom: clamp(14px, 2vw, 24px);
  padding-bottom: clamp(12px, 1.5vw, 18px);
}

.logo-maker-header-icon {
  width: clamp(52px, 6vw, 68px);
  height: clamp(52px, 6vw, 68px);
  flex: 0 0 clamp(52px, 6vw, 68px);

  border-radius: clamp(16px, 2vw, 22px);
}

.logo-maker-header-icon svg {
  width: 58%;
  height: 58%;
}

.logo-maker-subtitle {
  font-size: clamp(11px, 1.15vw, 14px);
}

/* Desktop: Preview 47% / Controls 53% */

.logo-maker-layout {
  width: 100%;

  grid-template-columns:
    minmax(0, 47fr)
    minmax(0, 53fr);

  gap: clamp(14px, 2.2vw, 34px);
}

.logo-maker-preview-panel,
.logo-maker-controls-panel {
  width: 100%;
  min-width: 0;
  max-width: 100%;

  padding: clamp(13px, 1.8vw, 25px);

  border-radius: clamp(17px, 2vw, 25px);

  overflow: hidden;
}

.logo-maker-section-title {
  margin-bottom: clamp(9px, 1.2vw, 14px);

  font-size: clamp(14px, 1.4vw, 17px);
}

.text-logo-name-grid {
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);

  column-gap: clamp(6px, .8vw, 10px);
  row-gap: 0;

  align-items: center;

  margin-bottom: clamp(11px, 1.4vw, 18px);
}

.text-logo-name-grid label {
  margin: 0;

  font-size: clamp(11px, 1.1vw, 14px);

  white-space: nowrap;
}

.text-logo-name-grid input {
  width: 100%;
  min-width: 0;
  height: clamp(38px, 4vw, 46px);

  margin: 0;
  padding: 0 clamp(9px, 1vw, 14px);

  font-size: clamp(12px, 1.2vw, 15px);
}

/* Canvas and three control cards remain inside their parent */

.logo-live-desk {
  width: 100%;
  min-width: 0;
  max-width: 100%;

  grid-template-columns:
    minmax(0, 34fr)
    repeat(3, minmax(0, 22fr));

  gap: clamp(5px, .8vw, 11px);

  margin-bottom: clamp(11px, 1.4vw, 18px);
}

#textLogoCanvas {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;

  margin: 0;

  border-radius: clamp(12px, 1.7vw, 20px);
}

.logo-control-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;

  min-height: 0;
  height: auto;

  padding: clamp(5px, .8vw, 11px);
  gap: clamp(4px, .55vw, 8px);

  border-radius: clamp(11px, 1.4vw, 18px);

  font-size: clamp(9px, .95vw, 12px);

  overflow: hidden;
}

.logo-control-card button {
  width: 100%;
  min-width: 0;

  height: auto;
  min-height: clamp(29px, 3vw, 38px);

  padding: 0;

  border-radius: clamp(7px, 1vw, 11px);

  font-size: clamp(13px, 1.5vw, 18px);
  line-height: 1;
}

.logo-font-name {
  width: 100%;
  min-width: 0;

  font-size: clamp(8px, .9vw, 11px);
}

/* Shape and name model grid */

.logo-preview-grid {
  width: 100%;
  min-width: 0;

  grid-template-columns:
    minmax(0, 24fr)
    repeat(3, minmax(0, 25.33fr));

  gap: clamp(5px, .7vw, 9px);
}

.logo-preview-card,
.logo-preview-shape {
  width: 100%;
  min-width: 0;
  min-height: clamp(42px, 5vw, 58px);

  padding: clamp(5px, .7vw, 9px);

  border-radius: clamp(9px, 1.2vw, 14px);

  font-size: clamp(12px, 1.25vw, 16px);
  line-height: 1.18;

  white-space: normal;
  overflow-wrap: anywhere;
}

.logo-preview-shape {
  color: #e3c4ff;

  font-size: clamp(11px, 1.2vw, 15px);
  font-weight: 900;
}

/* Right-side groups */

.logo-maker-control-group {
  width: 100%;
  min-width: 0;
  max-width: 100%;

  margin-bottom: clamp(10px, 1.35vw, 18px);
  padding: clamp(10px, 1.3vw, 16px);

  border-radius: clamp(12px, 1.5vw, 18px);

  overflow: hidden;
}

.text-logo-box .form-label {
  margin-bottom: clamp(6px, .8vw, 9px);

  font-size: clamp(12px, 1.15vw, 15px);
}

.text-logo-row {
  width: 100%;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: clamp(6px, .8vw, 11px);
}

.logo-mini-btn {
  width: 100%;
  min-width: 0;

  min-height: clamp(39px, 4vw, 48px);

  padding: clamp(6px, .75vw, 10px);

  border-radius: clamp(9px, 1.1vw, 13px);

  font-size: clamp(12px, 1.2vw, 15px);
  line-height: 1.18;

  white-space: normal;
  overflow-wrap: anywhere;
}

/* Desktop: all 16 colors in one responsive row */

.logo-color-row {
  display: grid;

  grid-template-columns:
    repeat(16, minmax(0, 1fr));

  gap: clamp(3px, .45vw, 6px);

  width: 100%;
  min-width: 0;
  max-width: 100%;

  overflow: hidden;
}

.logo-color-btn {
  width: 100%;
  max-width: 31px;
  height: auto;
  aspect-ratio: 1 / 1;

  min-width: 0;

  justify-self: center;

  margin: 0;

  border-width: clamp(1px, .2vw, 2px);
}

.logo-background-row {
  width: 100%;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: clamp(7px, 1vw, 14px);
}

.logo-background-row button {
  width: 72%;
  min-width: 0;

  align-self: flex-end;

  min-height: clamp(39px, 4vw, 47px);

  padding: clamp(6px, .8vw, 10px);

  font-size: clamp(11px, 1.1vw, 14px);

  white-space: normal;
}

/* Unified text style panel */

.logo-text-style-group {
  padding:
    clamp(10px, 1.3vw, 16px);
}

.logo-text-style-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    clamp(7px, 1vw, 13px);

  width: 100%;
  min-width: 0;

  align-items: stretch;
}

.logo-text-style-column {
  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 0;

  padding:
    clamp(7px, .9vw, 11px);

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    clamp(9px, 1.2vw, 14px);

  background:
    rgba(255,255,255,.035);
}

.logo-text-style-column
.form-label {
  min-height: 2.5em;

  display: flex;
  align-items: center;
  justify-content: center;

  margin:
    0 0 clamp(6px, .8vw, 9px);

  color: #dce1f0;

  font-size:
    clamp(10px, 1.05vw, 13px);

  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.logo-text-style-options {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  gap:
    clamp(5px, .65vw, 8px);

  width: 100%;
  min-width: 0;
}

.logo-text-style-options
.logo-mini-btn {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(34px, 3.6vw, 43px);

  margin: 0;
  padding:
    clamp(5px, .65vw, 8px)
    3%;

  font-size:
    clamp(10px, 1.05vw, 13px);

  white-space: normal;
}

#logoTextColors {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    clamp(5px, .65vw, 8px);

  width: 100%;
  min-width: 0;

  align-content: start;
  justify-items: center;

  overflow: visible;
}

#logoTextColors
.logo-color-btn {
  width: 100%;
  max-width: 31px;
  height: auto;
  min-width: 0;

  justify-self: center;

  margin: 0;

  aspect-ratio: 1 / 1;
}

@media
  (max-width: 767px) {

  .logo-text-style-grid {
    gap: 1.5%;
  }

  .logo-text-style-column {
    padding:
      clamp(5px, 1.6vw, 8px);
  }

  .logo-text-style-column
  .form-label {
    min-height: 2.8em;

    font-size:
      clamp(8px, 2.5vw, 11px);
  }

  .logo-text-style-options
  .logo-mini-btn {
    min-height:
      clamp(31px, 9vw, 39px);

    font-size:
      clamp(8px, 2.4vw, 11px);
  }

  #logoTextColors {
    gap:
      clamp(3px, 1vw, 5px);
  }

  #logoTextColors
  .logo-color-btn {
    width: 100%;
    max-width: 31px;
  }

}

/* Footer buttons */

.text-logo-action-row {
  width: 100%;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: clamp(8px, 1.4vw, 18px);

  margin-top: clamp(15px, 2vw, 24px);
  padding-top: clamp(14px, 1.7vw, 20px);
}

.text-logo-action-row button {
  width: 100%;
  min-width: 0;

  min-height: clamp(43px, 4.6vw, 52px);

  padding: clamp(8px, 1vw, 12px);

  font-size: clamp(12px, 1.3vw, 16px);

  white-space: normal;
}

/* ***** TABLET ***** */

@media
  (min-width: 768px)
  and (max-width: 1100px) {

  .text-logo-box {
    width: 97%;
    padding: clamp(13px, 2vw, 22px);
  }

  .logo-maker-layout {
    grid-template-columns:
      minmax(0, 48fr)
      minmax(0, 52fr);

    gap: 1.7%;
  }

  .logo-live-desk {
    grid-template-columns:
      minmax(0, 36fr)
      repeat(3, minmax(0, 21.33fr));

    gap: 1.4%;
  }

  .logo-color-row {
    grid-template-columns:
      repeat(8, minmax(0, 1fr));

    row-gap: 7px;
  }

  .logo-color-btn {
    max-width: 28px;
  }

}

/* ***** MOBILE LANDSCAPE ***** */

@media
  (max-width: 767px)
  and (orientation: landscape) {

  .text-logo-box {
    width: 98%;

    margin: 1% auto 3%;
    padding: clamp(10px, 1.8vw, 15px);

    border-radius: clamp(18px, 3vw, 26px);
  }

  .logo-maker-header {
    margin-bottom: 10px;
    padding-bottom: 9px;
  }

  .logo-maker-layout {
    grid-template-columns:
      minmax(0, 48fr)
      minmax(0, 52fr);

    gap: 1.5%;
  }

  .logo-maker-preview-panel,
  .logo-maker-controls-panel {
    padding: clamp(8px, 1.6vw, 12px);
    border-radius: 15px;
  }

  .logo-maker-section-title {
    margin-bottom: 7px;
    font-size: clamp(12px, 2vw, 14px);
  }

  .text-logo-name-grid {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto
      minmax(0, 1fr);

    column-gap: 1.2%;
    row-gap: 0;

    margin-bottom: 8px;
  }

  .text-logo-name-grid label {
    font-size: clamp(9px, 1.45vw, 11px);
  }

  .text-logo-name-grid input {
    height: clamp(31px, 6vh, 38px);

    padding-left: 3%;
    padding-right: 3%;
  }

  .logo-live-desk {
    grid-template-columns:
      minmax(0, 35fr)
      repeat(3, minmax(0, 21.66fr));

    gap: 1.2%;
    margin-bottom: 8px;
  }

  .logo-control-card {
    padding: 4px;
    gap: 3px;

    font-size: clamp(8px, 1.4vw, 10px);
  }

  .logo-control-card button {
    min-height: clamp(24px, 6vh, 31px);
    font-size: clamp(12px, 2.1vw, 15px);
  }

  .logo-preview-grid {
    grid-template-columns:
      minmax(0, 24fr)
      repeat(3, minmax(0, 25.33fr));

    gap: 1.2%;
  }

  .logo-preview-card,
  .logo-preview-shape {
    min-height: clamp(34px, 8vh, 44px);

    padding: 3px;

    font-size: clamp(9px, 1.7vw, 12px);
  }

  .logo-maker-control-group {
    margin-bottom: 7px;
    padding: clamp(6px, 1.1vw, 9px);
  }

  .text-logo-box .form-label {
    margin-bottom: 4px;
    font-size: clamp(10px, 1.7vw, 12px);
  }

  .logo-mini-btn {
    min-height: clamp(31px, 7vh, 39px);

    padding: 3px;

    font-size: clamp(9px, 1.6vw, 12px);
  }

  .logo-color-row {
    grid-template-columns:
      repeat(8, minmax(0, 1fr));

    gap: 4px;
    row-gap: 5px;
  }

  .logo-color-btn {
    width: 78%;
    max-width: 26px;
  }

  .logo-background-row button {
    min-height: clamp(31px, 7vh, 39px);
    font-size: clamp(9px, 1.6vw, 12px);
  }

  .text-logo-action-row {
    gap: 1.5%;

    margin-top: 10px;
    padding-top: 9px;
  }

  .text-logo-action-row button {
    min-height: clamp(35px, 8vh, 44px);

    font-size: clamp(10px, 1.8vw, 13px);
  }

}

/* ***** MOBILE PORTRAIT ***** */

@media
  (max-width: 767px)
  and (orientation: portrait) {

  .text-logo-box {
    width: 96%;

    margin: 3% auto 5%;
    padding: clamp(12px, 4vw, 18px);

    border-radius: clamp(20px, 6vw, 28px);
  }

  .logo-maker-layout {
    grid-template-columns:
      minmax(0, 1fr);

    gap: clamp(12px, 4vw, 18px);
  }

  .logo-live-desk {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 2%;
  }

  #textLogoCanvas {
    grid-column: 1 / -1;

    width: 48%;
    max-width: 190px;

    justify-self: center;
  }

  .logo-control-card {
    min-height: 116px;
  }

  .logo-preview-grid {
    grid-template-columns:
      minmax(0, 24fr)
      repeat(3, minmax(0, 25.33fr));
  }

  .logo-color-row {
    grid-template-columns:
      repeat(8, minmax(0, 1fr));

    row-gap: 7px;
  }

  .logo-color-btn {
    width: 76%;
    max-width: 30px;
  }

  .text-logo-action-row {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

}

/* Extra-narrow mobile */

@media
  (max-width: 390px)
  and (orientation: portrait) {

  .text-logo-row {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .logo-background-row {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .text-logo-action-row {
    grid-template-columns:
      minmax(0, 1fr);
  }

}

/* ***** 04HA - NORMAL INTRO CARD ***** */

#outroSettingsBox,
#musicSettingsBox {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  z-index: 10010;
}

#textSettingsBox {
  display: none;

  position: relative;
  top: auto;
  left: auto;
  transform: none;

  width: 86%;
  max-width: 430px;

  z-index: 10010;

  margin: 18px auto 26px;
  padding: 20px;

  max-height: none;
  overflow: visible;

  color: #1f2937;
  text-align: left;

  border-radius: 22px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(21,101,192,.22);

  box-shadow:
    0 35px 90px rgba(0,0,0,.36),
    0 12px 30px rgba(0,0,0,.22);
}

body.ip-intro-card-active #textSettingsBox {
  display: block;
}

body.ip-intro-preview-active #textSettingsBox {
  display: none !important;
}

.intro-frame-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 4px;
  color: #1565c0;
  font-size: 15px;
  font-weight: 800;
}

.intro-frame-toggle-row input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: #ff8a00;
}

.intro-frame-option-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 10px 0 4px;
}

.intro-frame-thickness-line {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
}

.intro-frame-thickness-label {
  margin: 0;
  color: #1565c0;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.intro-frame-thickness-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.intro-frame-thickness-btn {
  min-width: 0;
  padding: 7px 3px;
  border-radius: 10px;
  background: #eef4ff;
  color: #1565c0;
  font-size: 12px;
  font-weight: 900;
  border: 2px solid transparent;
}

.intro-frame-thickness-btn.selected {
  background: #ffffff;
  color: #ff8a00;
  border-color: #ff8a00;
  box-shadow: 0 6px 18px rgba(255,138,0,.22);
}

/* ***** 04HAB - HORIZONTAL 2026 INTRO CARD ***** */

#textSettingsBox {
  display: none;

  position: relative;
  top: auto;
  left: auto;
  transform: none;

  width: 96%;
  max-width: none;

  z-index: 10010;

  margin: 2% auto 4%;
  padding: clamp(14px, 2.3vw, 32px);

  color: #f7f8ff;
  text-align: left;

  border: 1px solid rgba(255,255,255,.11);
  border-radius: clamp(24px, 3vw, 40px);

  background:
    radial-gradient(
      circle at 7% 4%,
      rgba(255,138,0,.25),
      transparent 29%
    ),
    radial-gradient(
      circle at 93% 8%,
      rgba(255,81,109,.19),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      rgba(28,34,63,.98),
      rgba(8,11,26,.99)
    );

  box-shadow:
    0 34px 90px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.09);

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  overflow: hidden;

  grid-template-columns:
    minmax(0, 42fr)
    minmax(0, 58fr);

  column-gap: clamp(14px, 2.2vw, 34px);
  row-gap: clamp(9px, 1.2vw, 16px);
}

body.ip-intro-card-active
#textSettingsBox {
  display: grid;
}

#textSettingsBox::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  border-radius: inherit;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.07),
      transparent 25%,
      transparent 72%,
      rgba(255,81,109,.05)
    );
}

/* Header */

.intro-card-header {
  position: relative;
  z-index: 1;

  grid-column: 1 / -1;

  display: flex;
  align-items: center;

  gap: clamp(10px, 1.5vw, 18px);

  width: 100%;
  min-width: 0;

  margin-bottom: clamp(4px, .6vw, 8px);
  padding-bottom: clamp(12px, 1.5vw, 18px);

  border-bottom: 1px solid rgba(255,255,255,.10);
}

.intro-card-header-icon {
  width: clamp(52px, 6vw, 68px);
  height: clamp(52px, 6vw, 68px);

  flex:
    0 0 clamp(52px, 6vw, 68px);

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,176,91,.38);
  border-radius: clamp(16px, 2vw, 22px);

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,.25),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #ff8a00,
      #ff516d
    );

  box-shadow:
    0 15px 32px rgba(255,95,109,.22),
    inset 0 1px 0 rgba(255,255,255,.34);
}

.intro-card-header-icon svg {
  width: 58%;
  height: 58%;

  fill: none;
  stroke: #ffffff;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.intro-card-heading {
  min-width: 0;
}

#textSettingsBox
#xTextTitle {
  display: block;

  margin: 0 0 5px;

  color: #ffffff;

  font-size: clamp(23px, 3vw, 34px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.7px;
}

.intro-card-subtitle {
  color: #c5ccdf;

  font-size: clamp(11px, 1.15vw, 14px);
  font-weight: 650;
  line-height: 1.45;
}

#textSettingsBox
.intro-duration-top {
  width: 52%;
  min-width: 0;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(30px, 14%)
    minmax(42px, 18%)
    minmax(30px, 14%);

  gap: clamp(4px, .6vw, 7px);

  margin:
    clamp(7px, .8vw, 10px)
    0
    0;

  padding:
    clamp(5px, .7vw, 8px);

  border-color: rgba(255,138,0,.20);

  background:
    linear-gradient(
      135deg,
      rgba(255,138,0,.10),
      rgba(255,81,109,.06)
    );
}

#textSettingsBox
.intro-duration-top
.fixed-card-duration-btn {
  min-height: clamp(28px, 3vw, 36px);
}

#textSettingsBox
.intro-duration-top
.fixed-card-duration-value {
  font-size: clamp(12px, 1.25vw, 16px);
}

/* Compact Intro text and cover row */

.intro-top-grid {
  position: relative;
  z-index: 1;

  grid-column: 1 / -1;

  display: grid;

  grid-template-columns:
    minmax(0, 64fr)
    minmax(0, 36fr);

  gap: clamp(10px, 1.5vw, 20px);

  width: 100%;
  min-width: 0;
}

.intro-copy-panel,
.intro-cover-panel {
  width: 100%;
  min-width: 0;
}

.intro-copy-panel {
  display: flex;
  align-items: stretch;
}

.intro-cover-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: clamp(11px, 1.5vw, 18px);

  border: 1px solid rgba(255,138,0,.22);
  border-radius: clamp(15px, 1.8vw, 22px);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255,138,0,.13),
      transparent 48%
    ),
    rgba(255,255,255,.045);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

/* Left side */

#textSettingsBox
.intro-text-field-grid {
  position: relative;
  z-index: 1;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: clamp(12px, 1.6vw, 20px);

  border: 1px solid rgba(255,255,255,.09);
  border-radius: clamp(15px, 1.8vw, 22px);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.025)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

#textSettingsBox
.intro-text-field-grid {
  grid-template-columns:
    max-content
    clamp(30px, 3vw, 38px)
    minmax(0, 1fr);

  column-gap:
    clamp(7px, .8vw, 11px);

  row-gap:
    clamp(7px, 1vw, 12px);
}

#textSettingsBox
.intro-text-field-grid
.form-label {
  color: #dce1f0;

  font-size: clamp(11px, 1.2vw, 15px);
  font-weight: 850;
  line-height: 1.25;
}

#textSettingsBox
.intro-text-field-grid
textarea {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(39px, 4.2vw, 48px);

  height:
    clamp(39px, 4.2vw, 48px);

  margin: 0;

  padding:
    clamp(9px, 1vw, 12px)
    clamp(9px, 1vw, 14px);

  border:
    1px solid rgba(255,255,255,.13);

  border-radius:
    clamp(9px, 1.1vw, 13px);

  outline: none;

  background:
    rgba(255,255,255,.075);

  color: #ffffff;

  font-family: Arial, sans-serif;

  font-size:
    clamp(12px, 1.25vw, 15px);

  font-weight: 750;
  line-height: 1.35;

  resize: none;
  overflow: hidden;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06);
}

#textSettingsBox
.intro-text-field-grid
textarea:focus {
  border-color:
    rgba(255,138,0,.90);

  background:
    rgba(255,255,255,.11);

  box-shadow:
    0 0 0 3px rgba(255,138,0,.13),
    inset 0 1px 0 rgba(255,255,255,.08);
}

#textSettingsBox
.intro-text-color-trigger {
  width: 100%;
  min-width: 0;
  max-width: 36px;

  height: auto;
  aspect-ratio: 1 / 1;

  justify-self: center;
}

.intro-cover-row {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 68fr)
    minmax(0, 32fr);

  gap: clamp(8px, 1.2vw, 15px);
  align-items: center;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;
}

#chooseIntroCoverBtn {
  width: 100%;
  min-width: 0;

  min-height: clamp(42px, 4.5vw, 52px);

  margin: 0;
  padding: clamp(8px, 1vw, 12px);

  border: 1px solid rgba(255,176,91,.20);
  border-radius: clamp(10px, 1.2vw, 14px);

  background:
    linear-gradient(
      135deg,
      #4b2a14,
      #785126 55%,
      #45301c
    );

  color: #ffffff;

  font-size: clamp(11px, 1.2vw, 15px);
  font-weight: 900;

  box-shadow:
    0 8px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.12);
}

#textSettingsBox
#introCoverPreview {
  display: none;

  width: 100% !important;
  max-width: 120px;
  height: auto !important;
  aspect-ratio: 1 / 1;

  justify-self: center;

  margin: 0 !important;

  border:
    clamp(2px, .3vw, 4px)
    solid rgba(255,138,0,.88) !important;

  border-radius: 50% !important;

  object-fit: cover;

  box-shadow:
    0 12px 26px rgba(0,0,0,.32),
    0 0 0 4px rgba(255,138,0,.08);
}

#savedIntroCoverInfo {
  position: relative;
  z-index: 1;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: clamp(7px, .9vw, 11px);

  border-radius: clamp(9px, 1vw, 12px);

  background: rgba(255,138,0,.08);

  color: #ffc48b;

  font-size: clamp(10px, 1vw, 13px);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

#textSettingsBox
.fixed-card-duration-row {
  position: relative;
  z-index: 1;

  grid-column: 1;

  width: 100%;
  min-width: 0;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(34px, 12%)
    minmax(48px, 18%)
    minmax(34px, 12%);

  gap: clamp(5px, .8vw, 9px);

  margin: 0;
  padding: clamp(9px, 1.2vw, 14px);

  border: 1px solid rgba(255,255,255,.09);
  border-radius: clamp(13px, 1.6vw, 18px);

  background: rgba(255,255,255,.045);
}

#textSettingsBox
.fixed-card-duration-label {
  color: #dce1f0;

  font-size: clamp(10px, 1.1vw, 14px);
}

#textSettingsBox
.fixed-card-duration-btn {
  width: 100%;
  min-width: 0;
  height: auto;

  min-height: clamp(34px, 3.7vw, 43px);

  margin: 0;
  padding: 0;

  border: 1px solid rgba(255,255,255,.11);
  border-radius: clamp(8px, 1vw, 12px);

  background:
    linear-gradient(
      135deg,
      #4b2a14,
      #785126
    );

  font-size: clamp(17px, 2vw, 23px);
  line-height: 1;
}

#textSettingsBox
.fixed-card-duration-value {
  min-width: 0;
  height: auto;

  color: #ffad61;

  font-size: clamp(13px, 1.4vw, 17px);
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

/* Right side */

#textSettingsBox
.intro-layout-title {
  position: relative;
  z-index: 1;

  grid-column: 2;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: clamp(9px, 1.1vw, 13px);

  border-radius: clamp(10px, 1.2vw, 14px);

  background: rgba(255,138,0,.09);

  color: #ffb36c;

  font-size: clamp(12px, 1.3vw, 16px);
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

#textSettingsBox
.intro-layout-grid {
  position: relative;
  z-index: 1;

  grid-column: 2;

  width: 100%;
  min-width: 0;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap: clamp(5px, .8vw, 10px);

  margin: 0;
  padding: clamp(10px, 1.4vw, 17px);

  border: 1px solid rgba(255,138,0,.20);
  border-radius: clamp(15px, 1.9vw, 23px);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255,138,0,.12),
      transparent 48%
    ),
    rgba(255,255,255,.04);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

#textSettingsBox
.intro-layout-btn {
  width: 100%;
  min-width: 0;

  margin: 0;
  padding: clamp(4px, .6vw, 8px);

  border: 2px solid transparent;
  border-radius: clamp(9px, 1.2vw, 14px);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.035)
    );

  color: #dce1f0;

  box-shadow:
    0 8px 17px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.07);
}

#textSettingsBox
.intro-layout-btn.selected {
  border-color: rgba(255,138,0,.88);

  background:
    linear-gradient(
      145deg,
      rgba(255,138,0,.24),
      rgba(255,81,109,.13)
    );

  color: #ffffff;

  box-shadow:
    0 0 0 3px rgba(255,138,0,.10),
    0 10px 22px rgba(255,95,109,.15);
}

#textSettingsBox
.intro-layout-preview {
  width: 100%;
  min-width: 0;

  border-radius: clamp(6px, .8vw, 10px);

  background:
    linear-gradient(
      145deg,
      rgba(255,138,0,.24),
      rgba(32,38,69,.95)
    );
}

#textSettingsBox
.intro-layout-name {
  margin-top: clamp(4px, .5vw, 7px);

  color: #ffb36c;

  font-size: clamp(9px, 1vw, 13px);
}

#textSettingsBox
.intro-frame-option-grid {
  position: relative;
  z-index: 1;

  grid-column: 2;

  width: 100%;
  min-width: 0;

  gap: clamp(8px, 1vw, 12px);

  margin: 0;
  padding: clamp(10px, 1.4vw, 17px);

  border: 1px solid rgba(255,255,255,.09);
  border-radius: clamp(14px, 1.7vw, 20px);

  background: rgba(255,255,255,.045);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

#textSettingsBox
.intro-frame-toggle-row {
  margin: 0;

  color: #dce1f0;

  font-size: clamp(11px, 1.15vw, 14px);
}

#textSettingsBox
.intro-frame-toggle-row input {
  flex: 0 0 auto;

  width: clamp(18px, 2vw, 23px);
  height: clamp(18px, 2vw, 23px);

  accent-color: #ff8a00;
}

#textSettingsBox
.intro-frame-thickness-line {
  grid-template-columns:
    minmax(0, 30fr)
    minmax(0, 70fr);

  gap: clamp(7px, 1vw, 12px);
}

#textSettingsBox
.intro-frame-thickness-label {
  color: #dce1f0;

  font-size: clamp(10px, 1.1vw, 14px);

  white-space: normal;
}

#textSettingsBox
.intro-frame-thickness-row {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: clamp(5px, .7vw, 8px);
}

#textSettingsBox
.intro-frame-thickness-btn {
  width: 100%;
  min-width: 0;

  min-height: clamp(34px, 3.7vw, 43px);

  margin: 0;
  padding: clamp(5px, .7vw, 9px);

  border: 1px solid rgba(255,255,255,.11);
  border-radius: clamp(8px, 1vw, 12px);

  background:
    linear-gradient(
      135deg,
      #202a3b,
      #344156
    );

  color: #dce1f0;

  font-size: clamp(10px, 1.05vw, 13px);
  font-weight: 900;

  box-shadow:
    0 7px 14px rgba(0,0,0,.17),
    inset 0 1px 0 rgba(255,255,255,.09);
}

#textSettingsBox
.intro-frame-thickness-btn.selected {
  border-color: rgba(255,138,0,.78);

  background:
    linear-gradient(
      135deg,
      #633315,
      #9b5722
    );

  color: #ffffff;

  box-shadow:
    0 8px 18px rgba(255,138,0,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
}

#textSettingsBox
#previewIntroFrameBtn {
  grid-column: 2;
}

#textSettingsBox
#xIntroFrameColorLabel {
  position: relative;
  z-index: 1;

  grid-column: 2;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: clamp(8px, 1vw, 12px);

  border-radius: clamp(9px, 1.1vw, 13px);

  background: rgba(255,138,0,.09);

  color: #ffb36c;

  font-size: clamp(11px, 1.2vw, 15px);
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

#textSettingsBox
.intro-frame-color-grid {
  position: relative;
  z-index: 1;

  grid-column: 2;

  width: 100%;
  min-width: 0;

  grid-template-columns:
    repeat(10, minmax(0, 1fr));

  gap: clamp(4px, .65vw, 8px);

  margin: 0;
  padding: clamp(9px, 1.2vw, 15px);

  border: 1px solid rgba(255,255,255,.09);
  border-radius: clamp(13px, 1.6vw, 19px);

  background: rgba(255,255,255,.045);

  overflow: hidden;
}

#textSettingsBox
.intro-frame-color {
  width: 82%;
  min-width: 0;
  max-width: 38px;

  justify-self: center;

  border:
    clamp(1px, .2vw, 2px)
    solid rgba(255,255,255,.50);

  border-radius: clamp(5px, .7vw, 8px);
}

#textSettingsBox
.intro-frame-color.selected {
  border-color: #ff8a00;

  box-shadow:
    0 0 0 3px rgba(255,138,0,.13),
    0 7px 16px rgba(0,0,0,.22);
}

#textSettingsBox > br {
  display: none;
}

/* Footer */

.intro-card-actions {
  position: relative;
  z-index: 1;

  grid-column: 1 / -1;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: clamp(8px, 1.4vw, 18px);

  width: 100%;
  min-width: 0;

  margin-top: clamp(5px, .8vw, 10px);
  padding-top: clamp(13px, 1.6vw, 20px);

  border-top: 1px solid rgba(255,255,255,.10);
}

.intro-card-actions button {
  width: 100%;
  min-width: 0;

  min-height: clamp(43px, 4.7vw, 54px);

  margin: 0;
  padding: clamp(8px, 1vw, 12px);

  border: 1px solid rgba(255,255,255,.13);
  border-radius: clamp(10px, 1.2vw, 14px);

  color: #ffffff;

  font-size: clamp(12px, 1.3vw, 16px);
  font-weight: 900;
  line-height: 1.15;

  box-shadow:
    0 9px 20px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.13);
}

#saveTextSettingsBtn {
  background:
    linear-gradient(
      135deg,
      #4c1837,
      #71305f 52%,
      #38213f
    );
}

#clearIntroSettingsBtn {
  background:
    linear-gradient(
      135deg,
      #48121c,
      #75202c 55%,
      #3c1019
    ) !important;
}

/* ***** TABLET ***** */

@media
  (min-width: 768px)
  and (max-width: 1100px) {

  #textSettingsBox {
    width: 97%;

    grid-template-columns:
      minmax(0, 43fr)
      minmax(0, 57fr);

    column-gap: 1.7%;

    padding: clamp(13px, 2vw, 22px);
  }

  .intro-top-grid {
    grid-template-columns:
      minmax(0, 60fr)
      minmax(0, 40fr);

    gap: 1.7%;
  }

  #textSettingsBox
  .intro-layout-grid {
    gap: 1.1%;
  }

  #textSettingsBox
  .intro-frame-color-grid {
    grid-template-columns:
      repeat(10, minmax(0, 1fr));
  }

}

/* ***** MOBILE LANDSCAPE ***** */

@media
  (max-width: 767px)
  and (orientation: landscape) {

  #textSettingsBox {
    width: 98%;

    margin: 1% auto 3%;
    padding: clamp(10px, 1.8vw, 15px);

    border-radius: clamp(18px, 3vw, 26px);

    grid-template-columns:
      minmax(0, 44fr)
      minmax(0, 56fr);

    column-gap: 1.5%;
    row-gap: 7px;
  }

  .intro-card-header {
    margin-bottom: 1px;
    padding-bottom: 9px;
  }

  #textSettingsBox
  .intro-duration-top {
    width: 62%;
  }

  .intro-top-grid {
    grid-template-columns:
      minmax(0, 58fr)
      minmax(0, 42fr);

    gap: 1.5%;
  }

  .intro-cover-panel {
    padding: clamp(6px, 1.1vw, 9px);
  }

  .intro-cover-row {
    grid-template-columns:
      minmax(0, 66fr)
      minmax(0, 34fr);

    gap: 4px;
  }

  #textSettingsBox
  .intro-text-field-grid,
  .intro-cover-row,
  #textSettingsBox
  .fixed-card-duration-row,
  #textSettingsBox
  .intro-layout-grid,
  #textSettingsBox
  .intro-frame-option-grid,
  #textSettingsBox
  .intro-frame-color-grid {
    padding: clamp(6px, 1.1vw, 9px);
  }

  #textSettingsBox
  .intro-text-field-grid {
    grid-template-columns:
      max-content
      clamp(25px, 4vw, 32px)
      minmax(0, 1fr);

    column-gap: 4px;
    row-gap: 4px;
  }

  #textSettingsBox
  .intro-text-field-grid
  input[type="text"] {
    height: clamp(31px, 7vh, 39px);
  }

  #textSettingsBox
  .intro-layout-grid {
    gap: 4px;
  }

  #textSettingsBox
  .intro-layout-btn {
    padding: 3px;
  }

  #textSettingsBox
  .intro-frame-thickness-btn {
    min-height: clamp(29px, 7vh, 37px);

    padding: 3px;

    font-size: clamp(9px, 1.55vw, 12px);
  }

  #textSettingsBox
  .intro-frame-color-grid {
    gap: 3px;
  }

  #textSettingsBox
  .intro-frame-color {
    width: 75%;
  }

  .intro-card-actions {
    gap: 1.5%;

    padding-top: 9px;
  }

  .intro-card-actions button {
    min-height: clamp(35px, 8vh, 44px);

    font-size: clamp(10px, 1.8vw, 13px);
  }

}

/* ***** MOBILE PORTRAIT ***** */

@media
  (max-width: 767px)
  and (orientation: portrait) {

  #textSettingsBox {
    width: 96%;

    margin: 3% auto 5%;
    padding: clamp(12px, 4vw, 18px);

    border-radius: clamp(20px, 6vw, 28px);

    grid-template-columns:
      minmax(0, 1fr);

    gap: clamp(9px, 2.5vw, 14px);
  }

  .intro-top-grid {
    grid-template-columns:
      minmax(0, 1fr);

    gap: clamp(9px, 2.5vw, 14px);
  }

  #textSettingsBox
  .intro-duration-top {
    width: 100%;
  }

  #textSettingsBox
  .intro-card-header,
  #textSettingsBox
  .intro-text-field-grid,
  #textSettingsBox
  .intro-cover-row,
  #textSettingsBox
  #savedIntroCoverInfo,
  #textSettingsBox
  .fixed-card-duration-row,
  #textSettingsBox
  .intro-layout-title,
  #textSettingsBox
  .intro-layout-grid,
  #textSettingsBox
  .intro-frame-option-grid,
  #textSettingsBox
  #previewIntroFrameBtn,
  #textSettingsBox
  #xIntroFrameColorLabel,
  #textSettingsBox
  .intro-frame-color-grid,
  #textSettingsBox
  .intro-card-actions {
    grid-column: 1;
  }

  #textSettingsBox
  .intro-layout-grid {
    grid-template-columns:
      repeat(6, minmax(0, 1fr));
  }

  #textSettingsBox
  .intro-frame-color-grid {
    grid-template-columns:
      repeat(10, minmax(0, 1fr));
  }

}

/* Extra-narrow mobile */

@media
  (max-width: 390px)
  and (orientation: portrait) {

  #textSettingsBox
  .intro-text-field-grid {
    grid-template-columns:
      max-content
      clamp(25px, 4vw, 32px)
      minmax(0, 1fr);

    column-gap: #textSettingsBox
  .intro-text-field-grid {
    grid-template-columns:
      max-content
      30px
      minmax(0, 1fr);
  }4px;
    row-gap: 4px;
  }

  #textSettingsBox
  .intro-layout-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  #textSettingsBox
  .intro-frame-color-grid {
    grid-template-columns:
      repeat(5, minmax(0, 1fr));
  }

  .intro-card-actions {
    grid-template-columns:
      minmax(0, 1fr);
  }

}

/* ***** 04HAB-1 - COMPACT INTRO DESIGN CORRECTIONS ***** */

/* 01 — Strong and visible Intro duration */

#textSettingsBox
.intro-duration-top {
  width: 72%;

  grid-template-columns:
    minmax(0, 42fr)
    minmax(0, 16fr)
    minmax(0, 26fr)
    minmax(0, 16fr);

  gap: 2%;

  margin:
    clamp(8px, 1vw, 12px)
    0 0;

  padding:
    clamp(8px, 1.1vw, 13px);

  border:
    1px solid rgba(255,176,91,.52);

  border-radius:
    clamp(11px, 1.4vw, 17px);

  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(255,255,255,.14),
      transparent 52%
    ),
    linear-gradient(
      135deg,
      rgba(255,138,0,.28),
      rgba(255,81,109,.16)
    );

  box-shadow:
    0 8px 19px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
}

#textSettingsBox
.intro-duration-top
.fixed-card-duration-label {
  color: #ffffff;

  font-size:
    clamp(12px, 1.35vw, 17px);

  font-weight: 950;
  line-height: 1.2;
}

#textSettingsBox
.intro-duration-top
.fixed-card-duration-btn {
  width: 100%;
  min-width: 0;

  height: auto;
  min-height:
    clamp(34px, 3.7vw, 44px);

  margin: 0;
  padding: 0;

  border:
    1px solid rgba(255,255,255,.17);

  border-radius:
    clamp(9px, 1.1vw, 13px);

  background:
    linear-gradient(
      135deg,
      #8a4518,
      #b25f24
    );

  color: #ffffff;

  font-size:
    clamp(19px, 2.2vw, 27px);

  font-weight: 950;
  line-height: 1;

  box-shadow:
    0 6px 14px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.14);
}

#textSettingsBox
.intro-duration-top
.fixed-card-duration-value {
  min-width: 0;

  display: grid;
  place-items: center;

  min-height:
    clamp(34px, 3.7vw, 44px);

  border-radius:
    clamp(9px, 1.1vw, 13px);

  background:
    rgba(9,13,37,.48);

  color: #ffffff;

  font-size:
    clamp(18px, 2.1vw, 26px);

  font-weight: 950;
  line-height: 1;
  text-align: center;

  text-shadow:
    0 3px 8px rgba(0,0,0,.42);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08);
}


/* 02 — Hide cover-image selection from this card */

#textSettingsBox
.intro-cover-panel {
  display: none !important;
}


/* 03 — Title and Subtitle in one horizontal row */

#textSettingsBox
.intro-top-grid {
  grid-template-columns:
    minmax(0, 1fr);

  gap: 0;
}

#textSettingsBox
.intro-copy-panel {
  width: 100%;
}

#textSettingsBox
.intro-text-field-grid {
  display: grid;

  grid-template-columns:
    max-content
    clamp(30px, 3vw, 38px)
    minmax(0, 1fr)
    max-content
    clamp(30px, 3vw, 38px)
    minmax(0, 1fr);

  column-gap:
    clamp(6px, .7vw, 9px);

  row-gap:
    clamp(5px, .8vw, 10px);

  align-items: center;

  padding:
    clamp(9px, 1.2vw, 14px);
}

#textSettingsBox
.intro-text-color-palette {
  grid-column: 1 / -1;
}


/* 04 — Compact Layout and Frame workspace */

#textSettingsBox {
  grid-template-columns:
    minmax(0, 1fr);

  gap:
    clamp(7px, 1vw, 12px);
}

#textSettingsBox
.intro-card-header,
#textSettingsBox
.intro-top-grid,
#textSettingsBox
.intro-layout-frame-workspace {
  grid-column: 1;
}

#textSettingsBox
.intro-layout-frame-workspace {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 76fr)
    minmax(0, 24fr);

  gap:
    clamp(8px, 1.2vw, 15px);

  align-items: stretch;

  width: 100%;
  min-width: 0;
}

#textSettingsBox
.intro-layout-workspace-main {
  display: grid;

  grid-template-rows:
    auto
    minmax(0, 1fr);

  gap:
    clamp(5px, .7vw, 9px);

  width: 100%;
  min-width: 0;
}

#textSettingsBox
.intro-layout-title {
  width: 100%;

  margin: 0;

  padding:
    clamp(6px, .8vw, 10px);
}

#textSettingsBox
.intro-layout-grid {
  display: grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap:
    clamp(4px, .55vw, 7px);

  width: 100%;
  min-width: 0;

  margin: 0;

  padding:
    clamp(6px, .8vw, 10px);
}

#textSettingsBox
.intro-layout-btn {
  width: 100%;
  min-width: 0;

  padding:
    clamp(2px, .35vw, 5px);
}

#textSettingsBox
.intro-layout-preview {
  width: 100%;

  aspect-ratio: 5 / 4;
}

#textSettingsBox
.intro-layout-name {
  margin-top:
    clamp(2px, .3vw, 4px);

  font-size:
    clamp(8px, .85vw, 11px);
}

#textSettingsBox
.intro-frame-option-grid {
  display: flex;
  flex-direction: column;
  justify-content: center;

  gap:
    clamp(7px, 1vw, 12px);

  width: 100%;
  min-width: 0;

  margin: 0;

  padding:
    clamp(8px, 1.1vw, 13px);
}

#textSettingsBox
.intro-frame-toggle-row {
  justify-content: center;

  width: 100%;

  margin: 0;

  text-align: center;
}

#textSettingsBox
.intro-frame-thickness-line {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  gap:
    clamp(6px, .8vw, 10px);

  width: 100%;
}

#textSettingsBox
.intro-frame-thickness-label {
  width: 100%;

  text-align: center;
}

#textSettingsBox
.intro-frame-thickness-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  gap:
    clamp(5px, .7vw, 8px);

  width: 100%;
}

#textSettingsBox
.intro-frame-thickness-btn {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(30px, 3.2vw, 38px);

  padding:
    clamp(4px, .55vw, 7px);
}


/* 05 — Compact colors and centered footer buttons */

#textSettingsBox
#previewIntroFrameBtn {
  grid-column: 1 / -1;
}

#textSettingsBox
#xIntroFrameColorLabel {
  grid-column: 1 / -1;

  padding:
    clamp(6px, .8vw, 10px);
}

#textSettingsBox
.intro-frame-color-grid {
  grid-column: 1 / -1;

  padding:
    clamp(7px, 1vw, 12px);
}

#textSettingsBox
.intro-frame-color {
  width: 70%;
  max-width: 34px;
}

#textSettingsBox
.intro-card-actions {
  grid-column: 1 / -1;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    clamp(8px, 1vw, 13px);

  width: 100%;
  min-width: 0;

  margin:
    clamp(6px, 1vw, 12px)
    auto 0;

  padding-top:
    clamp(10px, 1.3vw, 16px);
}

#textSettingsBox
.intro-card-actions button {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(40px, 4.4vw, 51px);

  padding:
    clamp(7px, .9vw, 11px)
    5%;

  font-size:
    clamp(11px, 1.2vw, 15px);

  white-space: nowrap;
}


/* Tablet */

@media
  (min-width: 768px)
  and (max-width: 1100px) {

  #textSettingsBox
  .intro-duration-top {
    width: 78%;
  }

  #textSettingsBox {
    grid-template-columns:
      minmax(0, 1fr);
  }

  #textSettingsBox
  .intro-layout-frame-workspace {
    grid-template-columns:
      minmax(0, 73fr)
      minmax(0, 27fr);
  }

  #textSettingsBox
  .intro-text-field-grid {
    grid-template-columns:
      minmax(0, 13fr)
      minmax(27px, 6fr)
      minmax(0, 31fr)
      minmax(0, 13fr)
      minmax(27px, 6fr)
      minmax(0, 31fr);
  }

  #textSettingsBox
  .intro-card-actions {
    width: 70%;
  }

}


/* Mobile landscape */

@media
  (max-width: 767px)
  and (orientation: landscape) {

  #textSettingsBox
  .intro-duration-top {
    width: 76%;
  }

  #textSettingsBox {
    grid-template-columns:
      minmax(0, 1fr);
  }

  #textSettingsBox
  .intro-layout-frame-workspace {
    grid-template-columns:
      minmax(0, 72fr)
      minmax(0, 28fr);
  }

  #textSettingsBox
  .intro-layout-preview {
    aspect-ratio: 3 / 2;
  }

  #textSettingsBox
  .intro-text-field-grid {
    grid-template-columns:
      minmax(0, 12fr)
      minmax(24px, 5fr)
      minmax(0, 33fr)
      minmax(0, 12fr)
      minmax(24px, 5fr)
      minmax(0, 33fr);
  }

  #textSettingsBox
  .intro-frame-thickness-btn {
    min-height:
      clamp(28px, 7vh, 36px);

    padding: 3%;
  }

  #textSettingsBox
  .intro-card-actions {
    width: 68%;
    gap: 3%;
  }

}


/* Mobile portrait */

@media
  (max-width: 767px)
  and (orientation: portrait) {

  #textSettingsBox {
    grid-template-columns:
      minmax(0, 1fr);
  }

  #textSettingsBox
  .intro-duration-top {
    width: 100%;
  }

  #textSettingsBox
  .intro-text-field-grid {
    grid-template-columns:
      minmax(0, 14fr)
      minmax(28px, 8fr)
      minmax(0, 78fr);
  }

  #textSettingsBox
  .intro-text-field-grid
  #xIntroSubtitleLabel {
    grid-column: 1;
  }

  #textSettingsBox
  .intro-text-field-grid
  #introSubtitleColorBtn {
    grid-column: 2;
  }

  #textSettingsBox
  .intro-text-field-grid
  #introSubtitle {
    grid-column: 3;
  }

  #textSettingsBox
  .intro-layout-frame-workspace {
    grid-template-columns:
      minmax(0, 68fr)
      minmax(0, 32fr);

    gap: 3%;
  }

  #textSettingsBox
  .intro-layout-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  #textSettingsBox
  .intro-layout-preview {
    aspect-ratio: 4 / 3;
  }

  #textSettingsBox
  .intro-frame-option-grid {
    display: flex;
  }

  #textSettingsBox
  .intro-frame-thickness-row {
    grid-template-columns:
      minmax(0, 1fr);
  }

  #textSettingsBox
  .intro-card-actions {
    width: 100%;
    gap: 3%;
  }

  #textSettingsBox
  .intro-card-actions button {
    padding-left: 3%;
    padding-right: 3%;

    font-size:
      clamp(10px, 3vw, 13px);
  }

}


/* Extra-narrow mobile */

@media
  (max-width: 390px)
  and (orientation: portrait) {

  #textSettingsBox
  .intro-layout-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  #textSettingsBox
  .intro-layout-frame-workspace {
    grid-template-columns:
      minmax(0, 64fr)
      minmax(0, 36fr);
  }

  #textSettingsBox
  .intro-frame-option-grid {
    display: flex;
  }

  #textSettingsBox
  .intro-card-actions {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    width: 100%;
  }

}


/* ***** 04HAB-2 - FINAL THREE COLUMN INTRO WORKSPACE ***** */

#textSettingsBox
.intro-layout-frame-workspace {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  grid-template-rows:
    auto
    auto;

  gap:
    clamp(8px, 1.1vw, 14px);

  align-items: stretch;

  grid-column: 1 / -1;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;
}

#textSettingsBox
.intro-layout-workspace-main,
#textSettingsBox
.intro-frame-color-workspace,
#textSettingsBox
.intro-frame-option-grid {
  width: 100%;
  min-width: 0;

  margin: 0;

  border:
    1px solid rgba(255,255,255,.09);

  border-radius:
    clamp(13px, 1.6vw, 19px);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.025)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

#textSettingsBox
.intro-layout-workspace-main {
  grid-column: 1 / -1;
  grid-row: 1;
}

#textSettingsBox
.intro-frame-color-workspace {
  grid-column: 1;
  grid-row: 2;
}

#textSettingsBox
.intro-frame-option-grid {
  grid-column: 2;
  grid-row: 2;
}

#textSettingsBox
.intro-layout-workspace-main {
  display: grid;

  grid-template-rows:
    auto
    auto
    minmax(0, 1fr);

  gap:
    clamp(7px, .9vw, 11px);

  padding:
    clamp(7px, .9vw, 11px);
}

#textSettingsBox
.intro-layout-primary-actions {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(8px, 1vw, 13px);

  width: 100%;
  min-width: 0;
}

#textSettingsBox
.intro-layout-primary-actions button {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(39px, 4vw, 48px);

  margin: 0;

  padding:
    clamp(7px, .9vw, 11px)
    clamp(10px, 1.2vw, 15px);

  border:
    1px solid rgba(255,255,255,.13);

  border-radius:
    clamp(9px, 1.1vw, 13px);

  color: #ffffff;

  font-size:
    clamp(10px, 1.05vw, 13px);

  font-weight: 900;
  line-height: 1.15;

  white-space: nowrap;
}

#textSettingsBox
.intro-layout-primary-actions
#changeIntroPreviewCoverBtn {
  background:
    linear-gradient(
      135deg,
      #4b2a14,
      #785126 55%,
      #45301c
    );
}

#textSettingsBox
.intro-layout-primary-actions
#clearIntroSettingsBtn {
  background:
    linear-gradient(
      135deg,
      #48121c,
      #75202c 55%,
      #3c1019
    ) !important;
}

#textSettingsBox
.intro-layout-title,
#textSettingsBox
.intro-frame-color-title {
  grid-column: 1;

  width: 100%;
  min-width: 0;

  margin: 0;

  padding:
    clamp(5px, .7vw, 8px);

  border-radius:
    clamp(8px, 1vw, 12px);

  background:
    rgba(255,138,0,.09);

  color: #ffb36c;

  font-size:
    clamp(10px, 1.05vw, 14px);

  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

#textSettingsBox
.intro-layout-grid {
  display: grid;

  grid-column: 1;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap:
    clamp(7px, .9vw, 12px);

  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(3px, .4vw, 6px);

  border: 0;
  border-radius: 0;

  background: transparent;
}

#textSettingsBox
.intro-layout-btn {
  width: 100%;
  min-width: 0;

  margin: 0;

  padding:
    clamp(2px, .3vw, 4px);
}

#textSettingsBox
.intro-layout-preview {
  width: 100%;

  aspect-ratio: 5 / 4;
}

#textSettingsBox
.intro-frame-color-workspace {
  display: grid;

  grid-template-rows:
    auto
    minmax(0, 1fr);

  gap:
    clamp(7px, .9vw, 11px);

  align-content: center;

  padding:
    clamp(7px, .9vw, 11px);
}

#textSettingsBox
.intro-frame-color-grid {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  grid-template-rows:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(6px, .8vw, 10px);

  align-content: center;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;

  overflow: visible;
}

#textSettingsBox
.intro-frame-color {
  width: 76%;
  min-width: 0;
  max-width: none;

  aspect-ratio: 1 / 1;

  justify-self: center;
  align-self: center;

  margin: 0;
  padding: 0;

  border-radius:
    clamp(5px, .7vw, 8px);
}

#textSettingsBox
.intro-frame-color span {
  display: block;

  width: 100%;
  height: 100%;

  border-radius: inherit;
}

#textSettingsBox
.intro-frame-option-grid {
  display: flex;
  flex-direction: column;
  justify-content: center;

  gap:
    clamp(7px, .9vw, 11px);

  padding:
    clamp(7px, .9vw, 11px);
}

#textSettingsBox
.intro-frame-toggle-row {
  display: flex;
  align-items: center;
  justify-content: center;

  gap:
    clamp(5px, .7vw, 8px);

  width: 100%;
  min-width: 0;

  margin: 0;

  font-size:
    clamp(9px, 1vw, 13px);

  line-height: 1.2;
  text-align: center;
}

#textSettingsBox
.intro-frame-toggle-row input {
  flex: 0 0 auto;
}

#textSettingsBox
.intro-frame-thickness-line {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  gap:
    clamp(6px, .8vw, 9px);

  width: 100%;
  min-width: 0;
}

#textSettingsBox
.intro-frame-thickness-label {
  width: 100%;

  font-size:
    clamp(9px, 1vw, 13px);

  line-height: 1.2;
  text-align: center;
}

#textSettingsBox
.intro-frame-thickness-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  gap:
    clamp(5px, .7vw, 8px);

  width: 100%;
  min-width: 0;
}

#textSettingsBox
.intro-frame-thickness-btn {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(29px, 3vw, 36px);

  margin: 0;

  padding:
    clamp(4px, .5vw, 6px);

  font-size:
    clamp(9px, 1vw, 13px);
}

#textSettingsBox
#previewIntroFrameBtn {
  grid-column: 1;
}


/* Tablet */

@media
  (min-width: 768px)
  and (max-width: 1100px) {

  #textSettingsBox
  .intro-layout-frame-workspace {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-rows:
      auto
      auto;

    gap: 1.5%;
  }

  #textSettingsBox
  .intro-layout-grid {
    grid-template-columns:
      repeat(6, minmax(0, 1fr));
  }

}


/* Mobile landscape */

@media
  (max-width: 767px)
  and (orientation: landscape) {

  #textSettingsBox
  .intro-layout-frame-workspace {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-rows:
      auto
      auto;

    gap: 1.5%;
  }

  #textSettingsBox
  .intro-layout-workspace-main,
  #textSettingsBox
  .intro-frame-color-workspace,
  #textSettingsBox
  .intro-frame-option-grid {
    padding:
      clamp(5px, .8vw, 8px);
  }

  #textSettingsBox
  .intro-layout-grid {
    grid-template-columns:
      repeat(6, minmax(0, 1fr));

    gap: 3px;
  }

  #textSettingsBox
  .intro-frame-color-grid {
    gap: 4px;
  }

}


/* Mobile portrait */

@media
  (max-width: 767px)
  and (orientation: portrait) {

  #textSettingsBox
  .intro-layout-frame-workspace {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-rows:
      auto
      auto;

    gap: 2%;
  }

  #textSettingsBox
  .intro-layout-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    grid-template-rows:
      repeat(2, minmax(0, 1fr));
  }

  #textSettingsBox
  .intro-layout-preview {
    aspect-ratio: 4 / 3;
  }

  #textSettingsBox
  .intro-layout-workspace-main,
  #textSettingsBox
  .intro-frame-color-workspace,
  #textSettingsBox
  .intro-frame-option-grid {
    padding: 3%;
  }

  #textSettingsBox
  .intro-frame-color-grid {
    grid-template-columns:
      repeat(5, minmax(0, 1fr));

    gap: 5%;
  }

  #textSettingsBox
  .intro-frame-color {
    width: 88%;
  }

  #textSettingsBox
  .intro-frame-toggle-row {
    flex-direction: column;

    gap: 3%;
  }

  #textSettingsBox
  .intro-frame-thickness-btn {
    min-height:
      clamp(27px, 8vw, 34px);

    padding: 2%;
  }

}


/* Extra-narrow mobile */

@media
  (max-width: 390px)
  and (orientation: portrait) {

  #textSettingsBox
  .intro-layout-frame-workspace {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-rows:
      auto
      auto;

    gap: 2%;
  }

  #textSettingsBox
  .intro-layout-title,
  #textSettingsBox
  .intro-frame-color-title,
  #textSettingsBox
  .intro-frame-thickness-label,
  #textSettingsBox
  .intro-frame-toggle-row {
    font-size:
      clamp(8px, 2.4vw, 10px);
  }

  #textSettingsBox
  .intro-layout-name {
    font-size:
      clamp(7px, 2vw, 9px);
  }

  #textSettingsBox
  .intro-frame-thickness-btn {
    font-size:
      clamp(8px, 2.2vw, 10px);
  }

}


/* ***** 04HAC - HORIZONTAL 2026 OUTRO CARD ***** */

#outroSettingsBox {
  display: none;

  position: relative;
  top: auto;
  left: auto;
  transform: none;

  width: 58%;
  max-width: none;

  z-index: 10010;

  margin: 2% auto 4%;
  padding: clamp(14px, 2.3vw, 32px);

  color: #f7f8ff;
  text-align: left;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius:
    clamp(24px, 3vw, 40px);

  background:
    radial-gradient(
      circle at 7% 4%,
      rgba(75,94,255,.24),
      transparent 29%
    ),
    radial-gradient(
      circle at 93% 8%,
      rgba(170,72,207,.18),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      rgba(28,34,63,.98),
      rgba(8,11,26,.99)
    );

  box-shadow:
    0 34px 90px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.09);

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  overflow: hidden;
}

#outroSettingsBox::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  border-radius: inherit;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.07),
      transparent 25%,
      transparent 72%,
      rgba(170,72,207,.05)
    );
}

/* Header */

.outro-card-header {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;

  gap:
    clamp(10px, 1.5vw, 18px);

  width: 100%;
  min-width: 0;

  margin-bottom:
    clamp(14px, 2vw, 24px);

  padding-bottom:
    clamp(12px, 1.5vw, 18px);

  border-bottom:
    1px solid rgba(255,255,255,.10);
}

.outro-card-header-icon {
  width:
    clamp(52px, 6vw, 68px);

  height:
    clamp(52px, 6vw, 68px);

  flex:
    0 0 clamp(52px, 6vw, 68px);

  display: grid;
  place-items: center;

  border:
    1px solid rgba(154,143,255,.38);

  border-radius:
    clamp(16px, 2vw, 22px);

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,.25),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #4b5eff,
      #aa48cf
    );

  box-shadow:
    0 15px 32px rgba(75,94,255,.22),
    inset 0 1px 0 rgba(255,255,255,.34);
}

.outro-card-header-icon svg {
  width: 58%;
  height: 58%;

  fill: none;
  stroke: #ffffff;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.outro-card-heading {
  width: 100%;
  min-width: 0;
}

#outroSettingsBox
#xOutroTitle {
  display: block;

  margin: 0 0 5px;

  color: #ffffff;

  font-size:
    clamp(23px, 3vw, 34px);

  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.7px;
}

.outro-card-subtitle {
  color: #c5ccdf;

  font-size:
    clamp(11px, 1.15vw, 14px);

  font-weight: 650;
  line-height: 1.45;
}

/* Duration under subtitle */

#outroSettingsBox
.outro-duration-top {
  width: 72%;
  min-width: 0;

  grid-template-columns:
    minmax(0, 42fr)
    minmax(0, 16fr)
    minmax(0, 26fr)
    minmax(0, 16fr);

  gap: 2%;

  margin:
    clamp(8px, 1vw, 12px)
    0 0;

  padding:
    clamp(8px, 1.1vw, 13px);

  border:
    1px solid rgba(154,143,255,.52);

  border-radius:
    clamp(11px, 1.4vw, 17px);

  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(255,255,255,.14),
      transparent 52%
    ),
    linear-gradient(
      135deg,
      rgba(75,94,255,.27),
      rgba(170,72,207,.17)
    );

  box-shadow:
    0 8px 19px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
}

#outroSettingsBox
.outro-duration-top
.fixed-card-duration-label {
  color: #ffffff;

  font-size:
    clamp(12px, 1.35vw, 17px);

  font-weight: 950;
  line-height: 1.2;
}

#outroSettingsBox
.outro-duration-top
.fixed-card-duration-btn {
  width: 100%;
  min-width: 0;

  height: auto;
  min-height:
    clamp(34px, 3.7vw, 44px);

  margin: 0;
  padding: 0;

  border:
    1px solid rgba(255,255,255,.16);

  border-radius:
    clamp(9px, 1.1vw, 13px);

  background:
    linear-gradient(
      135deg,
      #3046ca,
      #6349ad
    );

  color: #ffffff;

  font-size:
    clamp(19px, 2.2vw, 27px);

  font-weight: 950;
  line-height: 1;

  box-shadow:
    0 6px 14px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.14);
}

#outroSettingsBox
.outro-duration-top
.fixed-card-duration-value {
  min-width: 0;

  display: grid;
  place-items: center;

  min-height:
    clamp(34px, 3.7vw, 44px);

  border-radius:
    clamp(9px, 1.1vw, 13px);

  background:
    rgba(9,13,37,.46);

  color: #ffffff;

  font-size:
    clamp(18px, 2.1vw, 26px);

  font-weight: 950;
  line-height: 1;
  text-align: center;

  text-shadow:
    0 3px 8px rgba(0,0,0,.42);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* Fields */

.outro-fields-grid {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(10px, 1.5vw, 20px);

  width: 100%;
  min-width: 0;

  padding:
    clamp(12px, 1.7vw, 22px);

  border:
    1px solid rgba(255,255,255,.09);

  border-radius:
    clamp(16px, 2vw, 24px);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(75,94,255,.10),
      transparent 48%
    ),
    rgba(255,255,255,.04);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

.outro-field-group {
  width: 100%;
  min-width: 0;
}

#outroSettingsBox
.outro-field-group
.form-label {
  display: block;

  margin:
    0 0 clamp(6px, .8vw, 9px);

  color: #dce1f0;

  font-size:
    clamp(11px, 1.2vw, 15px);

  font-weight: 850;
  line-height: 1.25;
}

#outroSettingsBox
.outro-field-group
input:not(.outro-info-display) {
  width: 100%;
  min-width: 0;

  height:
    clamp(40px, 4.3vw, 50px);

  margin: 0;

  padding:
    0 clamp(10px, 1.1vw, 15px);

  border:
    1px solid rgba(255,255,255,.13);

  border-radius:
    clamp(10px, 1.2vw, 14px);

  outline: none;

  background:
    rgba(255,255,255,.075);

  color: #ffffff;

  font-size:
    clamp(12px, 1.25vw, 15px);

  font-weight: 750;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06);
}

#outroSettingsBox
.outro-field-group
input:not(.outro-info-display):focus {
  border-color:
    rgba(119,133,255,.90);

  background:
    rgba(255,255,255,.11);

  box-shadow:
    0 0 0 3px rgba(75,94,255,.14),
    inset 0 1px 0 rgba(255,255,255,.08);
}

#outroSettingsBox
.outro-info-display {
  display: block;

  width: 100%;
  min-width: 0;
  height: auto;

  margin:
    clamp(5px, .7vw, 9px)
    0 0;

  padding: 0;

  border: 0;
  border-radius: 0;
  outline: 0;

  background: transparent;

  color: #b9b7e8;

  font-size:
    clamp(13px, 1.45vw, 18px);

  font-weight: 800;
  line-height: 1.45;
  text-align: left;

  cursor: default;
  caret-color: transparent;
  pointer-events: none;

  box-shadow: none;
  opacity: 1;
}

#outroSettingsBox
.outro-info-display:focus,
#outroSettingsBox
.outro-info-display:hover,
#outroSettingsBox
.outro-info-display:active {
  border: 0;
  outline: 0;

  background: transparent;

  color: #b9b7e8;

  box-shadow: none;
}

.outro-information-notice {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  gap:
    clamp(8px, 1.1vw, 14px);

  width: 100%;
  min-width: 0;

  margin:
    0 0 clamp(12px, 1.6vw, 20px);

  padding:
    clamp(13px, 1.7vw, 20px);

  border:
    1px solid rgba(154,143,255,.42);

  border-radius:
    clamp(12px, 1.5vw, 18px);

  background:
    linear-gradient(
      135deg,
      rgba(75,94,255,.20),
      rgba(170,72,207,.13)
    );

  color: #ffffff;

  font-size:
    clamp(13px, 1.45vw, 18px);

  font-weight: 850;
  line-height: 1.5;
  text-align: center;

  box-shadow:
    0 8px 20px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.outro-information-icon {
  flex: 0 0 auto;

  display: grid;
  place-items: center;

  width:
    clamp(27px, 3vw, 36px);

  aspect-ratio: 1 / 1;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #596cff,
      #9d53d4
    );

  color: #ffffff;

  font-size:
    clamp(15px, 1.7vw, 21px);

  font-weight: 900;
  line-height: 1;

  box-shadow:
    0 6px 15px rgba(75,94,255,.25);
}

/* Footer */

.outro-card-actions {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 4%;

  justify-content: center;

  width: 68%;
  min-width: 0;

  margin:
    clamp(15px, 2vw, 24px)
    auto 0;

  padding-top:
    clamp(14px, 1.7vw, 20px);

  border-top:
    1px solid rgba(255,255,255,.10);
}

#editOutroInformationBtn,
#saveOutroSettingsBtn {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(41px, 4.5vw, 52px);

  margin: 0;

  padding:
    clamp(7px, .9vw, 11px)
    5%;

  border:
    1px solid rgba(255,255,255,.13);

  border-radius:
    clamp(10px, 1.2vw, 14px);

  color: #ffffff;

  font-size:
    clamp(11px, 1.2vw, 15px);

  font-weight: 900;
  line-height: 1.15;

  white-space: nowrap;

  box-shadow:
    0 9px 20px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.13);
}

#editOutroInformationBtn {
  background:
    linear-gradient(
      135deg,
      #173d6c,
      #285c9e 55%,
      #202d70
    );
}

#saveOutroSettingsBtn {
  background:
    linear-gradient(
      135deg,
      #4c1837,
      #71305f 52%,
      #38213f
    );
}

/* Tablet */

@media
  (min-width: 768px)
  and (max-width: 1100px) {

  #outroSettingsBox {
    width: 82%;

    padding:
      clamp(13px, 2vw, 22px);
  }

  #outroSettingsBox
  .outro-duration-top {
    width: 78%;
  }

  .outro-card-actions {
    width: 76%;
  }

}

/* Mobile landscape */

@media
  (max-width: 767px)
  and (orientation: landscape) {

  #outroSettingsBox {
    width: 98%;

    margin: 1% auto 3%;

    padding:
      clamp(10px, 1.8vw, 15px);

    border-radius:
      clamp(18px, 3vw, 26px);
  }

  .outro-card-header {
    margin-bottom: 10px;
    padding-bottom: 9px;
  }

  #outroSettingsBox
  .outro-duration-top {
    width: 76%;
  }

  .outro-fields-grid {
    gap: 1.5%;

    padding:
      clamp(7px, 1.3vw, 11px);
  }

  #outroSettingsBox
  .outro-field-group
  input {
    height:
      clamp(32px, 7vh, 40px);
  }

  .outro-card-actions {
    margin-top: 10px;
    padding-top: 9px;
  }

  .outro-card-actions {
    width: 72%;
    gap: 3%;
  }

  #editOutroInformationBtn,
  #saveOutroSettingsBtn {
    min-height:
      clamp(35px, 8vh, 44px);

    font-size:
      clamp(10px, 1.8vw, 13px);
  }

}

/* Mobile portrait */

@media
  (max-width: 767px)
  and (orientation: portrait) {

  #outroSettingsBox {
    width: 96%;

    margin: 3% auto 5%;

    padding:
      clamp(12px, 4vw, 18px);

    border-radius:
      clamp(20px, 6vw, 28px);
  }

  #outroSettingsBox
  .outro-duration-top {
    width: 100%;
  }

  .outro-fields-grid {
    grid-template-columns:
      minmax(0, 1fr);

    gap:
      clamp(9px, 2.5vw, 14px);
  }

  .outro-card-actions {
    width: 100%;
    gap: 3%;
  }

  #editOutroInformationBtn,
  #saveOutroSettingsBtn {
    width: 100%;

    padding-left: 3%;
    padding-right: 3%;

    font-size:
      clamp(10px, 3vw, 13px);
  }

}

/* ***** 04HAA - INTRO TEXT COLORS ***** */

.intro-text-field-grid {
  display: grid;
  grid-template-columns: 82px 34px 1fr;
  gap: 10px 8px;
  align-items: center;
  margin-bottom: 10px;
}

.intro-text-color-trigger {
  position: relative;

  width: 30px;
  height: 30px;
  min-width: 30px;

  margin: 0;
  padding: 0;

  border-radius: 50%;
  border: 3px solid #ffffff;

  background:
    conic-gradient(
      #f44336,
      #ff9800,
      #ffd600,
      #0b8f3a,
      #00bcd4,
      #1565c0,
      #8e24aa,
      #e91e63,
      #f44336
    );

  box-shadow:
    0 0 0 2px rgba(21,101,192,.28),
    0 4px 10px rgba(0,0,0,.20);
}

.intro-text-color-trigger::after {
  content: "";

  position: absolute;
  inset: 4px;

  border-radius: 50%;

  background:
    var(--intro-selected-color, #ffffff);

  border: 2px solid rgba(255,255,255,.95);

  box-shadow:
    0 2px 6px rgba(0,0,0,.32);
}

.intro-text-color-trigger.active {
  box-shadow:
    0 0 0 3px #ff8a00,
    0 5px 12px rgba(0,0,0,.24);
}

.intro-text-color-palette {
  display: none;
  grid-column: 1 / span 3;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(21,101,192,.08);
}

.intro-text-color-palette.open {
  display: grid;
}

.intro-text-color-option {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0,0,0,.20);
}

.intro-text-color-option.selected {
  outline: 3px solid #ff8a00;
  outline-offset: 1px;
}

/* ***** 04HB - INTRO LAYOUT SELECTOR ***** */

.intro-layout-title {
  margin: 4% 0 2%;
  color: #1565c0;
  font-size: 15px;
  font-weight: 900;
}

.intro-layout-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.2%;
  margin: 1.5% 0 3%;
}

.intro-layout-btn {
  width: 100%;
  min-width: 0;
  padding: 4%;
  border-radius: 8px;
  background: #eef4ff;
  border: 2px solid transparent;
  color: #1565c0;
}

.intro-layout-btn.selected {
  background: #ffffff;
  border-color: #ff8a00;
  box-shadow: 0 6px 18px rgba(255,138,0,.24);
}

.intro-layout-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(
      145deg,
      rgba(21,101,192,.22),
      rgba(15,47,95,.72)
    );
}

.intro-layout-photo,
.intro-layout-logo {
  position: absolute;
  border-radius: 50%;
  background: #ff8a00;
  border: 2px solid #ffffff;
}

.intro-layout-photo {
  width: 26%;
  aspect-ratio: 1 / 1;
}

.intro-layout-logo {
  width: 22%;
  aspect-ratio: 1 / 1;
  background: #1565c0;
}

.intro-layout-text {
  position: absolute;
  width: 48%;
}

.intro-layout-text::before,
.intro-layout-text::after {
  content: "";
  display: block;
  height: 5%;
  min-height: 3px;
  margin-bottom: 5%;
  border-radius: 999px;
  background: #ffffff;
}

.intro-layout-text::before {
  width: 100%;
}

.intro-layout-text::after {
  width: 72%;
  opacity: .72;
}

.intro-layout-text.text-left::before,
.intro-layout-text.text-left::after {
  margin-left: 0;
  margin-right: auto;
}

.intro-layout-text.text-center::before,
.intro-layout-text.text-center::after {
  margin-left: auto;
  margin-right: auto;
}

.intro-layout-text.text-right::before,
.intro-layout-text.text-right::after {
  margin-left: auto;
  margin-right: 0;
}

.intro-layout-name {
  display: block;
  margin-top: 4%;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

/* Layout 1 — Media Bottom / Text Top Left */

.intro-layout-btn[data-intro-layout="layout-1"] .intro-layout-photo {
  left: 8%;
  bottom: 8%;
}

.intro-layout-btn[data-intro-layout="layout-1"] .intro-layout-logo {
  right: 8%;
  bottom: 8%;
}

.intro-layout-btn[data-intro-layout="layout-1"] .intro-layout-text {
  left: 8%;
  top: 10%;
}

/* Layout 2 — Media Bottom / Text Top Center */

.intro-layout-btn[data-intro-layout="layout-2"] .intro-layout-photo {
  left: 8%;
  bottom: 8%;
}

.intro-layout-btn[data-intro-layout="layout-2"] .intro-layout-logo {
  right: 8%;
  bottom: 8%;
}

.intro-layout-btn[data-intro-layout="layout-2"] .intro-layout-text {
  left: 26%;
  top: 10%;
  text-align: center;
}

/* Layout 3 — Media Top / Text Bottom Left */

.intro-layout-btn[data-intro-layout="layout-3"] .intro-layout-photo {
  left: 8%;
  top: 8%;
}

.intro-layout-btn[data-intro-layout="layout-3"] .intro-layout-logo {
  right: 8%;
  top: 8%;
}

.intro-layout-btn[data-intro-layout="layout-3"] .intro-layout-text {
  left: 8%;
  bottom: 10%;
}

/* Layout 4 — Media Top / Text Bottom Center */

.intro-layout-btn[data-intro-layout="layout-4"] .intro-layout-photo {
  left: 8%;
  top: 8%;
}

.intro-layout-btn[data-intro-layout="layout-4"] .intro-layout-logo {
  right: 8%;
  top: 8%;
}

.intro-layout-btn[data-intro-layout="layout-4"] .intro-layout-text {
  left: 26%;
  bottom: 10%;
  text-align: center;
}

/* Layout 5 — Media Bottom / Text Exact Center */

.intro-layout-btn[data-intro-layout="layout-5"] .intro-layout-photo {
  left: 8%;
  bottom: 8%;
}

.intro-layout-btn[data-intro-layout="layout-5"] .intro-layout-logo {
  right: 8%;
  bottom: 8%;
}

.intro-layout-btn[data-intro-layout="layout-5"] .intro-layout-text {
  left: 26%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

/* Layout 6 — Media Top / Text Exact Center */

.intro-layout-btn[data-intro-layout="layout-6"] .intro-layout-photo {
  left: 8%;
  top: 8%;
}

.intro-layout-btn[data-intro-layout="layout-6"] .intro-layout-logo {
  right: 8%;
  top: 8%;
}

.intro-layout-btn[data-intro-layout="layout-6"] .intro-layout-text {
  left: 26%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

/* ***** 04I - INTRO FRAME COLORS ***** */

.intro-frame-color-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 5px;

  margin: 7px 0 2px;
  padding: 0 2px;
}

.intro-frame-color {
  position: relative;

  width: 100%;
  aspect-ratio: 1 / 1;

  margin: 0;
  padding: 0;

  border-radius: 7px;
  border: 2px solid transparent;

  cursor: pointer;
  box-shadow: 0 4px 9px rgba(0,0,0,.20);

  touch-action: manipulation;
}

.intro-frame-color.selected {
  border-color: #ff8a00;
  transform: scale(1.05);
}

.intro-frame-color.selected::after {
  content: "✓";

  position: absolute;
  top: -4px;
  right: -4px;

  width: 15px;
  height: 15px;

  border-radius: 50%;
  background: #ff8a00;
  color: #ffffff;

  font-size: 11px;
  font-weight: 900;
  line-height: 15px;
  text-align: center;

  box-shadow: 0 3px 7px rgba(0,0,0,.30);
}

.intro-frame-color span {
  display: block;

  width: 100%;
  height: 100%;

  border-radius: 5px;
}

/* ***** 04K - HORIZONTAL PERCENTAGE INTRO PREVIEW ***** */

#previewIntroFrameBtn {
  width: 100%;

  margin-top: 14px;

  background:
    linear-gradient(
      135deg,
      #4b2a14,
      #785126 55%,
      #45301c
    );
}

.intro-preview-box {
  display: none;

  position: relative;
  top: auto;
  left: auto;
  transform: none;

  width: 96%;
  max-width: none;

  z-index: 10020;

  margin: 2% auto 4%;
  padding: clamp(14px, 2.3vw, 32px);

  color: #f7f8ff;
  text-align: left;

  border: 1px solid rgba(255,255,255,.11);
  border-radius: clamp(24px, 3vw, 40px);

  background:
    radial-gradient(
      circle at 7% 4%,
      rgba(255,138,0,.25),
      transparent 29%
    ),
    radial-gradient(
      circle at 93% 8%,
      rgba(255,81,109,.19),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      rgba(28,34,63,.98),
      rgba(8,11,26,.99)
    );

  box-shadow:
    0 34px 90px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.09);

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  overflow: hidden;
}

.intro-preview-box::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  border-radius: inherit;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.07),
      transparent 25%,
      transparent 72%,
      rgba(255,81,109,.05)
    );
}

body.ip-intro-preview-active #textSettingsBox {
  display: none !important;
}

body.ip-intro-preview-active #introPreviewBox {
  display: block;
}

/* Header */

.intro-preview-header {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;

  gap: clamp(10px, 1.5vw, 18px);

  width: 100%;
  min-width: 0;

  margin-bottom: clamp(14px, 2vw, 24px);
  padding-bottom: clamp(12px, 1.5vw, 18px);

  border-bottom: 1px solid rgba(255,255,255,.10);
}

.intro-preview-header-icon {
  width: clamp(52px, 6vw, 68px);
  height: clamp(52px, 6vw, 68px);

  flex:
    0 0 clamp(52px, 6vw, 68px);

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,176,91,.38);
  border-radius: clamp(16px, 2vw, 22px);

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,.25),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #ff8a00,
      #ff516d
    );

  box-shadow:
    0 15px 32px rgba(255,95,109,.22),
    inset 0 1px 0 rgba(255,255,255,.34);
}

.intro-preview-header-icon svg {
  width: 58%;
  height: 58%;

  fill: none;
  stroke: #ffffff;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.intro-preview-heading {
  min-width: 0;
}

#xIntroPreviewTitle {
  display: block;

  margin: 0 0 5px;

  color: #ffffff;

  font-size: clamp(23px, 3vw, 34px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.7px;
}

.intro-preview-subtitle {
  color: #c5ccdf;

  font-size: clamp(11px, 1.15vw, 14px);
  font-weight: 650;
  line-height: 1.45;
}

/* Two-column layout */

.intro-preview-layout {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 48fr)
    minmax(0, 52fr);

  gap: clamp(14px, 2.2vw, 34px);

  width: 100%;
  min-width: 0;

  align-items: start;
}

.intro-preview-canvas-panel,
.intro-preview-controls-panel {
  width: 100%;
  min-width: 0;

  padding: clamp(12px, 1.8vw, 24px);

  border: 1px solid rgba(255,255,255,.09);
  border-radius: clamp(17px, 2vw, 25px);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.025)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

.intro-preview-canvas-panel {
  display: flex;
  align-items: center;
  justify-content: center;

  border-color: rgba(255,138,0,.24);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255,138,0,.15),
      transparent 48%
    ),
    rgba(255,255,255,.04);
}

#introPreviewCanvas {
  display: block;

  width: auto;
  max-width: 100%;

  height: auto;
  max-height: clamp(360px, 61vh, 720px);

  margin: 0 auto;

  border: 1px solid rgba(255,255,255,.14);
  border-radius: clamp(12px, 1.7vw, 20px);

  background: #000000;

  box-shadow:
    0 24px 60px rgba(0,0,0,.40),
    0 0 0 4px rgba(255,138,0,.06);
}

/* Controls */

.intro-preview-controls-panel {
  display: flex;
  flex-direction: column;
}

.intro-preview-controls-title {
  width: 100%;

  margin: 0 0 clamp(9px, 1.2vw, 14px);
  padding: clamp(8px, 1vw, 12px);

  border-radius: clamp(9px, 1.1vw, 13px);

  background: rgba(255,138,0,.09);

  color: #ffb36c;

  font-size: clamp(12px, 1.3vw, 16px);
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

.intro-preview-size-panel {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: clamp(7px, 1vw, 12px);

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: clamp(10px, 1.4vw, 17px);

  border: 1px solid rgba(255,255,255,.09);
  border-radius: clamp(14px, 1.7vw, 20px);

  background: rgba(255,255,255,.045);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

.intro-preview-size-row {
  display: grid;

  grid-template-rows:
    auto
    minmax(36px, auto)
    minmax(36px, auto);

  gap: clamp(6px, .8vw, 10px);

  width: 100%;
  min-width: 0;

  padding: clamp(7px, 1vw, 12px);

  border: 1px solid rgba(255,255,255,.09);
  border-radius: clamp(11px, 1.4vw, 17px);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.07),
      rgba(255,255,255,.025)
    );

  text-align: center;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06);
}

.intro-preview-size-label {
  min-width: 0;
  min-height: clamp(25px, 3vw, 34px);

  display: flex;
  align-items: center;
  justify-content: center;

  color: #dce1f0;

  font-size: clamp(10px, 1.1vw, 14px);
  font-weight: 900;
  line-height: 1.15;
  text-align: center;

  white-space: normal;
  overflow-wrap: anywhere;
}

.intro-preview-size-row button {
  width: 100%;
  min-width: 0;

  height: auto;
  min-height: clamp(36px, 4vw, 46px);

  margin: 0;
  padding: 0;

  border: 1px solid rgba(255,176,91,.18);
  border-radius: clamp(8px, 1vw, 12px);

  background:
    linear-gradient(
      135deg,
      #4b2a14,
      #785126 55%,
      #45301c
    );

  color: #ffffff;

  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 900;
  line-height: 1;

  box-shadow:
    0 7px 15px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.11);

  cursor: pointer;
  touch-action: manipulation;

  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.intro-preview-size-row button:active {
  transform: scale(.95);
}

.intro-preview-size-value {
  display: none;
}

/* Footer actions */

#introPreviewActions {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: clamp(8px, 1.2vw, 15px);

  width: 100%;
  min-width: 0;

  margin-top: clamp(14px, 1.8vw, 22px);
  padding-top: clamp(13px, 1.6vw, 20px);

  border-top: 1px solid rgba(255,255,255,.10);
}

#introPreviewActions button {
  width: 100%;
  min-width: 0;

  min-height: clamp(42px, 4.6vw, 53px);

  margin: 0;
  padding: clamp(8px, 1vw, 12px);

  border: 1px solid rgba(255,255,255,.13);
  border-radius: clamp(10px, 1.2vw, 14px);

  color: #ffffff;

  font-size: clamp(11px, 1.2vw, 15px);
  font-weight: 900;
  line-height: 1.15;

  box-shadow:
    0 9px 20px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.13);
}

#downloadIntroPreviewBtn {
  background:
    linear-gradient(
      135deg,
      #4c1837,
      #71305f 52%,
      #38213f
    );
}

#closeIntroPreviewBtn {
  background:
    linear-gradient(
      135deg,
      #28223f,
      #49335f 55%,
      #30213e
    );
}

#introPreviewCoverActions {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 4%;

  width: 82%;
  min-width: 0;

  margin:
    auto auto
    clamp(8px, 1.1vw, 13px);

  padding-top:
    clamp(12px, 1.5vw, 18px);

  border-top:
    1px solid rgba(255,255,255,.10);
}

#introPreviewCoverActions button {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(40px, 4.4vw, 51px);

  margin: 0;

  padding:
    clamp(7px, .9vw, 11px)
    4%;

  border:
    1px solid rgba(255,255,255,.13);

  border-radius:
    clamp(10px, 1.2vw, 14px);

  color: #ffffff;

  font-size:
    clamp(10px, 1.15vw, 14px);

  font-weight: 900;
  line-height: 1.15;

  white-space: nowrap;

  box-shadow:
    0 8px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.12);
}

#changeIntroPreviewCoverBtn {
  background:
    linear-gradient(
      135deg,
      #4b2a14,
      #785126 55%,
      #45301c
    );
}

#removeIntroPreviewCoverBtn {
  background:
    linear-gradient(
      135deg,
      #48121c,
      #75202c 55%,
      #3c1019
    );
}

#removeIntroPreviewCoverBtn:disabled {
  border-color:
    rgba(255,255,255,.07);

  background:
    linear-gradient(
      135deg,
      #282d38,
      #3b414e
    );

  color: #8e95a6;

  opacity: .58;
  cursor: default;
}

/* Tablet */

@media
  (min-width: 768px)
  and (max-width: 1100px) {

  .intro-preview-box {
    width: 97%;
    padding: clamp(13px, 2vw, 22px);
  }

  .intro-preview-layout {
    grid-template-columns:
      minmax(0, 47fr)
      minmax(0, 53fr);

    gap: 1.7%;
  }

}

/* Mobile landscape */

@media
  (max-width: 767px)
  and (orientation: landscape) {

  .intro-preview-box {
    width: 98%;

    margin: 1% auto 3%;
    padding: clamp(10px, 1.8vw, 15px);

    border-radius: clamp(18px, 3vw, 26px);
  }

  .intro-preview-header {
    margin-bottom: 10px;
    padding-bottom: 9px;
  }

  .intro-preview-layout {
    grid-template-columns:
      minmax(0, 46fr)
      minmax(0, 54fr);

    gap: 1.5%;
  }

  .intro-preview-canvas-panel,
  .intro-preview-controls-panel {
    padding: clamp(7px, 1.4vw, 11px);

    border-radius: clamp(12px, 2vw, 16px);
  }

  #introPreviewCanvas {
    max-height: 72vh;
  }

  .intro-preview-size-panel {
    gap: 4px;
    padding: clamp(6px, 1.1vw, 9px);
  }

  .intro-preview-size-row {
    gap: 4px;
    padding: 5px;
  }

  .intro-preview-size-row button {
    min-height: clamp(29px, 7vh, 38px);

    font-size: clamp(16px, 3vw, 22px);
  }

  #introPreviewCoverActions {
    width: 88%;
    gap: 2%;

    margin-bottom: 7px;
    padding-top: 8px;
  }

  #introPreviewActions {
    gap: 1.5%;

    margin-top: 9px;
    padding-top: 9px;
  }

  #introPreviewCoverActions button,
  #introPreviewActions button {
    min-height:
      clamp(34px, 8vh, 44px);

    font-size:
      clamp(9px, 1.65vw, 12px);
  }

}

/* Mobile portrait */

@media
  (max-width: 767px)
  and (orientation: portrait) {

  .intro-preview-box {
    width: 96%;

    margin: 3% auto 5%;
    padding: clamp(12px, 4vw, 18px);

    border-radius: clamp(20px, 6vw, 28px);
  }

  .intro-preview-layout {
    grid-template-columns:
      minmax(0, 1fr);

    gap: clamp(12px, 4vw, 18px);
  }

  .intro-preview-canvas-panel {
    width: 100%;
  }

  #introPreviewCanvas {
    width: auto;
    max-width: 100%;
    max-height: 68vh;
  }

  .intro-preview-size-panel {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }

}

/* Extra-narrow mobile */

@media
  (max-width: 390px)
  and (orientation: portrait) {

  .intro-preview-size-panel {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

    #introPreviewCoverActions,
  #introPreviewActions {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  #introPreviewCoverActions {
    width: 100%;
    gap: 3%;
  }

  #introPreviewCoverActions button {
    padding-left: 2%;
    padding-right: 2%;

    font-size:
      clamp(9px, 2.7vw, 12px);
  }

}

/* ***** 04KX - FULL TIMELINE LIVE PREVIEW ***** */

#timelineLivePreviewCard {
  display: none;

  position: relative;
  z-index: 10028;

  width: 96%;
  max-width: 980px;

  margin: 2% auto 4%;
  padding:
    clamp(14px, 2.3vw, 30px);

  color: #f7f8ff;
  text-align: center;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius:
    clamp(22px, 3vw, 38px);

  background:
    radial-gradient(
      circle at 8% 5%,
      rgba(48,145,255,.22),
      transparent 30%
    ),
    radial-gradient(
      circle at 92% 8%,
      rgba(141,87,255,.19),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(28,34,63,.98),
      rgba(8,11,26,.99)
    );

  box-shadow:
    0 34px 90px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.09);

  overflow: hidden;
}

#timelineLivePreviewCard.open {
  display: block;
}

.timeline-live-preview-title {
  margin-bottom:
    clamp(10px, 1.5vw, 18px);

  color: #ffffff;

  font-size:
    clamp(22px, 3vw, 34px);

  font-weight: 900;
  line-height: 1.15;
}

#timelineLivePreviewStage {
  position: relative;

  display: grid;
  place-items: center;

  width:
    min(
      100%,
      72vh,
      42rem
    );

  max-width: 100%;
  aspect-ratio: 1 / 1;

  margin: 0 auto;

  padding:
    clamp(7px, 1vw, 12px);

  overflow: hidden;

  border:
    1px solid rgba(145,196,255,.28);

  border-radius:
    clamp(15px, 2vw, 24px);

  background: #000000;

  box-shadow:
    0 24px 55px rgba(0,0,0,.42),
    0 0 0 4px rgba(48,145,255,.07);
}

#timelineLivePreviewCanvas {
  display: block;

  width: auto;
  height: auto;

  max-width: none;
  max-height: none;

  flex: 0 0 auto;

  border-radius:
    clamp(11px, 1.5vw, 18px);

  background: #000000;
}

#timelineLivePreviewStatus {
  margin:
    clamp(9px, 1.2vw, 14px)
    auto 0;

  color: #b9d9ff;

  font-size:
    clamp(11px, 1.15vw, 15px);

  font-weight: 900;
  line-height: 1.4;
}

.timeline-live-preview-transport {
  display: none;

  width:
    min(100%, 760px);

  margin:
    clamp(10px, 1.4vw, 17px)
    auto 0;

  padding:
    clamp(8px, 1vw, 12px);

  border:
    1px solid rgba(145,196,255,.20);

  border-radius:
    clamp(10px, 1.3vw, 16px);

  background:
    rgba(255,255,255,.045);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06);
}

.timeline-live-preview-transport.visible {
  display: grid;

  gap:
    clamp(7px, 1vw, 11px);
}

#timelineLivePreviewSeek {
  width: 100%;
  min-width: 0;

  margin: 0;

  accent-color: #30d0d8;

  cursor: pointer;
}

.timeline-live-preview-transport-row {
  display: grid;

  grid-template-columns:
    auto
    minmax(105px, .55fr)
    minmax(210px, 1fr);

  gap:
    clamp(6px, .9vw, 11px);

  align-items: center;
}

.timeline-live-preview-transport-row button {
  min-width: 0;

  margin: 0;

  border:
    1px solid rgba(145,196,255,.22);

  color: #ffffff;

  font-weight: 900;
  line-height: 1;

  white-space: nowrap;
}

.timeline-preview-main-play {

}

.timeline-preview-play-icon{
  display:block;

  font-size:clamp(28px,2.8vw,38px);
  line-height:1;

  margin:0;
  padding:0;

  transform:translateX(2%);
}
  width:
    clamp(42px, 4.7vw, 54px);

  aspect-ratio: 1 / 1;

  padding: 0;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #17634d,
      #24916d 55%,
      #164d42
    );

  font-size:
    clamp(18px, 2vw, 24px);

  box-shadow:
    0 7px 16px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.14);
}

#timelineLivePreviewPlayPauseBtn {
  background:
    linear-gradient(
      135deg,
      #17634d,
      #24916d 55%,
      #164d42
    );
}

#timelineLivePreviewPlayPauseBtn.paused {
  background:
    linear-gradient(
      135deg,
      #4b2a14,
      #785126 55%,
      #45301c
    );
}

.timeline-preview-quick-audio {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    clamp(4px, .65vw, 8px);

  width: 100%;
  min-width: 0;
}

.timeline-preview-audio-icon {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(40px, 4.4vw, 52px);

  padding:
    clamp(4px, .55vw, 7px);

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  gap:
    clamp(3px, .45vw, 6px);

  align-items: center;
  justify-content: center;

  border-radius:
    clamp(8px, 1vw, 12px);

  background:
    linear-gradient(
      135deg,
      #173d6c,
      #285c9e 55%,
      #202d70
    );

  box-shadow:
    0 6px 13px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.timeline-preview-audio-icon span {
  font-size:
    clamp(14px, 1.6vw, 20px);

  line-height: 1;
}

.timeline-preview-audio-icon small {
  min-width: 0;

  color: #b9d9ff;

  font-size:
    clamp(8px, .9vw, 11px);

  font-weight: 900;
  line-height: 1;

  text-align: center;

  white-space: nowrap;
}

.timeline-preview-audio-icon.active {
  border-color:
    rgba(87,235,218,.72);

  background:
    linear-gradient(
      135deg,
      #17634d,
      #24916d 55%,
      #174f83
    );

  box-shadow:
    0 0 0 3px rgba(48,208,216,.10),
    0 7px 16px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.14);
}

.timeline-preview-audio-icon:disabled {
  opacity: .34;
  cursor: not-allowed;
}

.timeline-live-preview-time {
  min-width: 0;

  padding:
    clamp(7px, .9vw, 11px);

  border-radius:
    clamp(8px, 1vw, 12px);

  background:
    rgba(255,255,255,.065);

  color: #b9d9ff;

  font-size:
    clamp(10px, 1.05vw, 13px);

  font-weight: 900;
  text-align: center;

  white-space: nowrap;
}

@media
  (max-width: 560px) {

  .timeline-live-preview-transport-row {
    grid-template-columns:
      auto
      minmax(0, 1fr);
  }

  .timeline-preview-quick-audio {
    grid-column: 1 / -1;
  }

  .timeline-preview-audio-icon {
    grid-template-columns:
      minmax(0, 1fr);

    gap: 3px;
  }

  .timeline-preview-audio-icon span {
    font-size:
      clamp(15px, 5vw, 20px);
  }

  .timeline-preview-audio-icon small {
    font-size:
      clamp(8px, 2.7vw, 11px);
  }

}

.timeline-live-preview-audio-mix-host {
  display: none;

  width:
    min(100%, 760px);

  margin:
    clamp(12px, 1.6vw, 20px)
    auto 0;

  padding:
    clamp(9px, 1.2vw, 14px);

  border:
    1px solid rgba(87,235,218,.18);

  border-radius:
    clamp(12px, 1.5vw, 18px);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(48,208,216,.12),
      transparent 54%
    ),
    rgba(255,255,255,.045);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

.timeline-live-preview-audio-mix-host.visible {
  display: grid;

  gap:
    clamp(7px, 1vw, 11px);
}

 .timeline-live-preview-audio-mix-host
.timeline-audio-mix-control {
  display: none !important;
}

.timeline-live-preview-audio-mix-host
.timeline-audio-mix-panel {
  width:
    min(100%, 620px);

  margin:
    clamp(6px, .8vw, 10px)
    auto 0;
}

.timeline-live-preview-audio-mix-host
.timeline-audio-mix-panel.open {
  display: grid;
}

.timeline-live-preview-audio-mix-host
.timeline-audio-mix-row {
  display: none;
}

.timeline-live-preview-audio-mix-host
.timeline-audio-mix-row.quick-visible {
  display: grid;
}

.timeline-live-preview-audio-mix-host
.timeline-audio-mix-panel {
  grid-column: auto;

  margin-top: 0;
}

.timeline-live-preview-audio-mix-host
.timeline-audio-mix-panel.open {
  display: grid;
}

@media
  (max-width: 767px)
  and (orientation: portrait) {

  .timeline-live-preview-audio-mix-host {
    width: 100%;

    padding:
      clamp(7px, 2.2vw, 11px);
  }

  .timeline-live-preview-audio-mix-host
  .timeline-audio-mix-row {
    grid-template-columns:
      minmax(78px, 26fr)
      minmax(70px, 44fr)
      minmax(38px, 12fr)
      minmax(58px, 18fr);
  }

}

@media
  (max-width: 390px)
  and (orientation: portrait) {

  .timeline-live-preview-audio-mix-host
  .timeline-audio-mix-row {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1.25fr)
      auto;
  }

  .timeline-live-preview-audio-mix-host
  .timeline-audio-default-btn {
    grid-column: 1 / -1;

    width: fit-content;

    justify-self: end;

    padding-left: 4%;
    padding-right: 4%;
  }

}

.timeline-live-preview-actions {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(8px, 1.2vw, 14px);

  width:
    min(100%, 430px);

  margin:
    clamp(12px, 1.6vw, 20px)
    auto 0;
}

.timeline-live-preview-actions button {
  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(9px, 1.1vw, 13px);

  border:
    1px solid rgba(255,255,255,.13);

  border-radius:
    clamp(10px, 1.2vw, 14px);

  color: #ffffff;

  font-size:
    clamp(11px, 1.2vw, 15px);

  font-weight: 900;

  box-shadow:
    0 9px 20px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.13);
}

#stopTimelineLivePreviewBtn {
  background:
    linear-gradient(
      135deg,
      #48121c,
      #75202c 55%,
      #3c1019
    );
}

#closeTimelineLivePreviewBtn {
  background:
    linear-gradient(
      135deg,
      #4c1837,
      #71305f 52%,
      #38213f
    );
}

#previewTimelineBtn {
  background:
    linear-gradient(
      135deg,
      #17634d,
      #24916d 55%,
      #164d42
    );
}

/* ***** TWO COLUMN MEDIA PREVIEW WORKSPACE ***** */

.timeline-live-preview-workspace {
  display: grid;

  grid-template-columns:
    minmax(0, 66fr)
    minmax(260px, 34fr);

  gap:
    clamp(14px, 2vw, 26px);

  align-items: start;

  width: 100%;
  min-width: 0;
}

.timeline-live-preview-left,
.timeline-live-preview-right {
  width: 100%;
  min-width: 0;
}

.timeline-live-preview-left {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  gap:
    clamp(8px, 1vw, 13px);
}

.timeline-live-preview-right {
  display: flex;
  flex-direction: column;

  align-self: stretch;

  gap:
    clamp(12px, 1.5vw, 18px);
}

.timeline-live-preview-workspace
#timelineLivePreviewStage {
  width: 100%;
  margin: 0;
}

.timeline-live-preview-workspace
#timelineLivePreviewStatus {
  margin:
    clamp(7px, .9vw, 11px)
    auto 0;
}

.timeline-live-preview-workspace
.timeline-live-preview-transport {
  width: 100%;
  margin:
    clamp(6px, .8vw, 10px)
    0 0;
}

.timeline-live-preview-workspace
.timeline-live-preview-transport-row {
  grid-template-columns:
    auto
    minmax(0, 1fr);
}

.timeline-live-preview-workspace
.timeline-preview-quick-audio {
  display: none !important;
}

/* Full mixer always visible in right column */

.timeline-live-preview-right
.timeline-live-preview-audio-mix-host {
  display: grid;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(10px, 1.25vw, 15px);

  gap:
    clamp(8px, 1vw, 12px);
}

.timeline-live-preview-right
.timeline-audio-mix-control {
  display: none !important;
}

.timeline-live-preview-right
.timeline-audio-mix-panel,
.timeline-live-preview-right
.timeline-audio-mix-panel.open {
  display: grid !important;

  width: 100%;
  min-width: 0;

  margin: 0;

  gap:
    clamp(8px, 1vw, 12px);
}

.timeline-live-preview-right
.timeline-audio-mix-row,
.timeline-live-preview-right
.timeline-audio-mix-row.quick-visible {
  display: grid !important;

  grid-template-columns:
    minmax(78px, 25fr)
    minmax(75px, 43fr)
    minmax(40px, 12fr)
    minmax(58px, 20fr);

  gap:
    clamp(5px, .7vw, 9px);

  padding:
    clamp(7px, .9vw, 11px);
}

/* Stop and Close at bottom of right column */

.timeline-live-preview-right
.timeline-live-preview-actions {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  width: 100%;

  margin-top: auto;
  margin-left: 0;
  margin-right: 0;
}

/* Tablet */

@media
  (min-width: 768px)
  and (max-width: 1100px) {

  .timeline-live-preview-workspace {
    grid-template-columns:
      minmax(0, 62fr)
      minmax(230px, 38fr);

    gap:
      clamp(10px, 1.5vw, 18px);
  }

  .timeline-live-preview-right
  .timeline-audio-mix-row {
    grid-template-columns:
      minmax(68px, 28fr)
      minmax(60px, 40fr)
      minmax(36px, 12fr)
      minmax(52px, 20fr);
  }

}

/* Mobile */

@media
  (max-width: 767px) {

  .timeline-live-preview-workspace {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .timeline-live-preview-right {
    gap:
      clamp(9px, 2.5vw, 13px);
  }

  .timeline-live-preview-right
  .timeline-audio-mix-row {
    grid-template-columns:
      minmax(75px, 26fr)
      minmax(70px, 42fr)
      minmax(38px, 12fr)
      minmax(56px, 20fr);
  }

}

/* ***** FINAL LOCKED MEDIA PREVIEW CARD ***** */

/* Main two-column workspace */

.timeline-live-preview-workspace {
  grid-template-columns:
    minmax(0, 72fr)
    minmax(250px, 28fr);

  gap:
    clamp(14px, 1.8vw, 24px);

  align-items: stretch;
}

.timeline-live-preview-left {
  align-content: start;
}

.timeline-live-preview-right {
  display: flex;
  flex-direction: column;

  align-self: stretch;

  min-height: 100%;

  gap:
    clamp(10px, 1.2vw, 15px);
}

/* Mixer fills the right column cleanly */

.timeline-live-preview-right
.timeline-live-preview-audio-mix-host {
  display: flex;

  flex: 1 1 auto;
  flex-direction: column;

  width: 100%;
  min-width: 0;

  margin: 0;

  padding:
    clamp(10px, 1.1vw, 14px);

  border-radius:
    clamp(13px, 1.5vw, 18px);
}

.timeline-live-preview-right
.timeline-audio-mix-panel,
.timeline-live-preview-right
.timeline-audio-mix-panel.open {
  display: grid !important;

  flex: 1 1 auto;

  grid-template-columns:
    minmax(0, 1fr);

  grid-template-rows:
    repeat(4, minmax(0, 1fr));

  gap:
    clamp(8px, 1vw, 12px);

  width: 100%;
  min-width: 0;

  margin: 0;
}

/* Each audio channel becomes a spacious two-line control */

.timeline-live-preview-right
.timeline-audio-mix-row,
.timeline-live-preview-right
.timeline-audio-mix-row.quick-visible {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    auto;

  grid-template-areas:
    "label value reset"
    "range range range";

  column-gap:
    clamp(6px, .7vw, 9px);

  row-gap:
    clamp(7px, .8vw, 10px);

  align-content: center;
  align-items: center;

  width: 100%;
  min-width: 0;

  padding:
    clamp(10px, 1vw, 14px);

  border:
    1px solid rgba(255,255,255,.06);

  border-radius:
    clamp(10px, 1.2vw, 14px);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.025)
    );
}

.timeline-live-preview-right
.timeline-audio-mix-row label {
  grid-area: label;

  min-width: 0;

  font-size:
    clamp(10px, 1.05vw, 13px);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-live-preview-right
.timeline-audio-mix-row output {
  grid-area: value;

  min-width:
    clamp(34px, 3vw, 44px);

  font-size:
    clamp(10px, 1vw, 13px);

  text-align: right;
}

.timeline-live-preview-right
.timeline-audio-mix-row input[type="range"] {
  grid-area: range;

  width: 100%;
  min-width: 0;

  margin: 0;
}

/* Compact universal Reset button */

.timeline-live-preview-right
.timeline-audio-default-btn {
  grid-area: reset;

  position: relative;

  width:
    clamp(28px, 2.8vw, 34px);

  min-width:
    clamp(28px, 2.8vw, 34px);

  height: auto;
  aspect-ratio: 1 / 1;

  margin: 0;
  padding: 0;

  display: grid;
  place-items: center;

  border-radius: 50%;

  font-size: 0;

  background:
    linear-gradient(
      135deg,
      #4b2a14,
      #785126
    );
}

.timeline-live-preview-right
.timeline-audio-default-btn::before {
  content: "↺";

  color: #ffffff;

  font-size:
    clamp(15px, 1.5vw, 19px);

  font-weight: 900;
  line-height: 1;
}

/* Stop and Close stay directly under the mixer */

.timeline-live-preview-right
.timeline-live-preview-actions {
  flex: 0 0 auto;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(8px, 1vw, 12px);

  width: 100%;

  margin:
    clamp(2px, .4vw, 5px)
    0 0;
}

.timeline-live-preview-right
.timeline-live-preview-actions button {
  min-height:
    clamp(40px, 4vw, 48px);

  padding:
    clamp(8px, .9vw, 11px);

  font-size:
    clamp(11px, 1.1vw, 14px);
}

/* Compact transport below the square */

.timeline-live-preview-workspace
.timeline-live-preview-transport {
  margin:
    clamp(5px, .7vw, 8px)
    0 0;

  padding:
    clamp(8px, .9vw, 11px);
}

.timeline-live-preview-workspace
.timeline-live-preview-transport-row {
  grid-template-columns:
    auto
    minmax(0, 1fr);

  gap:
    clamp(7px, .8vw, 10px);
}

/* Play / Pause always uses a universal icon */

#timelineLivePreviewPlayPauseBtn {
  position: relative;

  width:
    clamp(42px, 4.2vw, 50px);

  min-width:
    clamp(42px, 4.2vw, 50px);

  aspect-ratio: 1 / 1;

  padding: 0;

  display: grid;
  place-items: center;

  border-radius: 50%;

  font-size: 0;
}

#timelineLivePreviewPlayPauseBtn::before {
  content: "⏸";

  color: #ffffff;

  font-size:
    clamp(18px, 1.9vw, 23px);

  font-weight: 900;
  line-height: 1;
}

#timelineLivePreviewPlayPauseBtn.paused::before {
  content: "▶";

  padding-left: 7%;

  font-size:
    clamp(20px, 2.1vw, 25px);
}

#timelineLivePreviewPlayPauseBtn
.timeline-preview-play-icon {
  display: none;
}

/* Time counter remains calm and readable */

.timeline-live-preview-time {
  min-height:
    clamp(42px, 4.2vw, 50px);

  display: grid;
  place-items: center;

  padding:
    clamp(7px, .8vw, 10px);

  font-size:
    clamp(10px, 1.05vw, 13px);
}

/* Tablet */

@media
  (min-width: 768px)
  and (max-width: 1100px) {

  .timeline-live-preview-workspace {
    grid-template-columns:
      minmax(0, 68fr)
      minmax(230px, 32fr);

    gap:
      clamp(10px, 1.4vw, 17px);
  }

  .timeline-live-preview-right
  .timeline-audio-mix-row {
    padding:
      clamp(8px, .9vw, 11px);
  }

}

/* Mobile returns to one clean column */

@media
  (max-width: 767px) {

  .timeline-live-preview-workspace {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .timeline-live-preview-right {
    min-height: 0;
  }

  .timeline-live-preview-right
  .timeline-audio-mix-panel,
  .timeline-live-preview-right
  .timeline-audio-mix-panel.open {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-rows:
      repeat(2, minmax(0, 1fr));
  }

}

/* ***** FINAL UNIFIED MEDIA PREVIEW WORKSPACE ***** */

#timelineLivePreviewCard {
  width: 96%;
  max-width:
    min(1120px, 96vw);

  margin:
    clamp(8px, 1vw, 14px)
    auto
    clamp(12px, 1.6vw, 22px);

  padding:
    clamp(10px, 1.5vw, 20px);
}

/* Compact title */

.timeline-live-preview-title {
  margin:
    0 0
    clamp(6px, .7vw, 9px);

  font-size:
    clamp(17px, 2vw, 24px);

  line-height: 1.05;
}

/* Final two-column geometry */

.timeline-live-preview-workspace {
  display: grid;

  grid-template-columns:
    minmax(0, 61fr)
    minmax(280px, 39fr);

  gap:
    clamp(12px, 1.6vw, 22px);

  align-items: start;

  width: 100%;
  min-width: 0;
}

.timeline-live-preview-left {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  align-content: start;

  width: 100%;
  min-width: 0;

  gap:
    clamp(6px, .8vw, 10px);
}

.timeline-live-preview-right {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  grid-template-rows:
    auto
    auto
    auto;

  align-content: start;

  gap:
    clamp(7px, .85vw, 11px);

  width: 100%;
  min-width: 0;
}

/* Square preview becomes approximately 20% smaller */

.timeline-live-preview-workspace
#timelineLivePreviewStage {
  width: 80%;
  max-width: 100%;

  justify-self: start;

  margin: 0;
  padding:
    clamp(5px, .65vw, 8px);

  border-radius:
    clamp(12px, 1.5vw, 19px);
}

.timeline-live-preview-workspace
#timelineLivePreviewStatus {
  width: 80%;

  margin:
    clamp(4px, .5vw, 7px)
    0 0;

  font-size:
    clamp(9px, .9vw, 12px);

  line-height: 1.2;
  text-align: center;
}

/* Compact mixer */

.timeline-live-preview-right
.timeline-live-preview-audio-mix-host {
  display: block;

  width: 100%;
  min-width: 0;

  margin: 0;

  padding:
    clamp(7px, .8vw, 10px);

  border-radius:
    clamp(10px, 1.2vw, 15px);
}

.timeline-live-preview-right
.timeline-audio-mix-control {
  display: none !important;
}

.timeline-live-preview-right
.timeline-audio-mix-panel,
.timeline-live-preview-right
.timeline-audio-mix-panel.open {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr);

  grid-template-rows:
    repeat(4, auto);

  gap:
    clamp(4px, .5vw, 7px);

  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(6px, .7vw, 9px);
}

.timeline-live-preview-right
.timeline-audio-mix-row,
.timeline-live-preview-right
.timeline-audio-mix-row.quick-visible {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    auto;

  grid-template-areas:
    "label value reset"
    "range range range";

  column-gap:
    clamp(5px, .55vw, 7px);

  row-gap:
    clamp(3px, .4vw, 5px);

  align-items: center;

  width: 100%;
  min-width: 0;

  padding:
    clamp(5px, .6vw, 8px);

  border-radius:
    clamp(8px, .9vw, 11px);
}

.timeline-live-preview-right
.timeline-audio-mix-row label {
  grid-area: label;

  min-width: 0;

  font-size:
    clamp(9px, .9vw, 12px);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-live-preview-right
.timeline-audio-mix-row output {
  grid-area: value;

  min-width:
    clamp(34px, 3vw, 42px);

  font-size:
    clamp(9px, .9vw, 12px);

  font-weight: 900;
  text-align: right;
}

.timeline-live-preview-right
.timeline-audio-mix-row input[type="range"] {
  grid-area: range;

  width: 100%;
  min-width: 0;

  margin: 0;
}

/* Small universal reset icon */

.timeline-live-preview-right
.timeline-audio-default-btn {
  grid-area: reset;

  position: relative;

  width:
    clamp(24px, 2.4vw, 30px);

  min-width:
    clamp(24px, 2.4vw, 30px);

  height: auto;
  aspect-ratio: 1 / 1;

  display: grid;
  place-items: center;

  margin: 0;
  padding: 0;

  border-radius: 50%;

  font-size: 0;
}

.timeline-live-preview-right
.timeline-audio-default-btn::before {
  content: "↺";

  color: #ffffff;

  font-size:
    clamp(13px, 1.3vw, 17px);

  font-weight: 900;
  line-height: 1;
}

/* Transport directly under mixer */

.timeline-live-preview-right
.timeline-live-preview-transport {
  width: 100%;
  min-width: 0;

  margin: 0;

  padding:
    clamp(7px, .8vw, 10px);

  border-radius:
    clamp(9px, 1vw, 13px);
}

.timeline-live-preview-right
.timeline-live-preview-transport.visible {
  display: grid;

  gap:
    clamp(5px, .6vw, 8px);
}

.timeline-live-preview-right
.timeline-live-preview-transport-row {
  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  gap:
    clamp(6px, .7vw, 9px);

  align-items: center;
}

.timeline-live-preview-right
.timeline-preview-quick-audio {
  display: none !important;
}

/* Pure icon Play / Pause */

#timelineLivePreviewPlayPauseBtn {
  position: relative;

  width:
    clamp(38px, 3.7vw, 46px);

  min-width:
    clamp(38px, 3.7vw, 46px);

  aspect-ratio: 1 / 1;

  display: grid;
  place-items: center;

  margin: 0;
  padding: 0;

  border-radius: 50%;

  font-size: 0;
}

#timelineLivePreviewPlayPauseBtn::before {
  content: "⏸";

  color: #ffffff;

  font-size:
    clamp(16px, 1.7vw, 21px);

  font-weight: 900;
  line-height: 1;
}

#timelineLivePreviewPlayPauseBtn.paused::before {
  content: "▶";

  padding-left: 7%;

  font-size:
    clamp(18px, 1.9vw, 23px);
}

#timelineLivePreviewPlayPauseBtn
.timeline-preview-play-icon {
  display: none;
}

.timeline-live-preview-right
.timeline-live-preview-time {
  min-height:
    clamp(38px, 3.7vw, 46px);

  display: grid;
  place-items: center;

  padding:
    clamp(5px, .6vw, 8px);

  font-size:
    clamp(9px, .9vw, 12px);
}

/* Stop and Close directly below player */

.timeline-live-preview-right
.timeline-live-preview-actions {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(7px, .8vw, 10px);

  width: 100%;

  margin: 0;
}

.timeline-live-preview-right
.timeline-live-preview-actions button {
  width: 100%;
  min-width: 0;

  min-height:
    clamp(36px, 3.7vw, 44px);

  margin: 0;

  padding:
    clamp(6px, .7vw, 9px);

  font-size:
    clamp(10px, 1vw, 13px);
}

/* Tablet */

@media
  (min-width: 768px)
  and (max-width: 1100px) {

  .timeline-live-preview-workspace {
    grid-template-columns:
      minmax(0, 58fr)
      minmax(260px, 42fr);

    gap:
      clamp(9px, 1.2vw, 15px);
  }

  .timeline-live-preview-workspace
  #timelineLivePreviewStage,
  .timeline-live-preview-workspace
  #timelineLivePreviewStatus {
    width: 86%;
  }

}

/* Mobile */

@media
  (max-width: 767px) {

  .timeline-live-preview-workspace {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .timeline-live-preview-workspace
  #timelineLivePreviewStage,
  .timeline-live-preview-workspace
  #timelineLivePreviewStatus {
    width: 100%;
  }

  .timeline-live-preview-right
  .timeline-audio-mix-panel,
  .timeline-live-preview-right
  .timeline-audio-mix-panel.open {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-rows:
      repeat(2, auto);
  }

}

/* ***** 04L - VIDEO BUILD AND RESULT CARD ***** */

#videoBuildCard {
  display: none;

  position: relative;
  top: auto;
  left: auto;
  transform: none;

  width: 86%;
  max-width: 430px;

  z-index: 10030;

  margin: 18px auto 26px;
  padding: 16px;

  border-radius: 22px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(21,101,192,.22);

  box-shadow:
    0 35px 90px rgba(0,0,0,.36),
    0 12px 30px rgba(0,0,0,.22);

  color: #1f2937;
  text-align: center;
  overflow: visible;
}

#videoBuildCard.open {
  display: block;
}

#videoBuildTitle {
  margin-bottom: 12px;

  color: #1565c0;

  font-size: 22px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

#videoBuildCard #buildingBox {
  margin-top: 6px !important;
}

#cancelVideoBuildBtn {
  display: none;

  width: 100%;
  margin: 14px 0 0;
  padding: 11px 10px;

  border-radius: 12px;
  background: #c62828;
  color: #ffffff;

  font-size: 14px;
  font-weight: 900;
}

#cancelVideoBuildBtn.visible {
  display: block;
}

#videoBuildCard #preview {
  display: none;

  width: 100%;
  max-width: 360px;

  margin: 8px auto 0;
}

#videoBuildActions {
  display: none;

  grid-template-columns: 1fr 1fr;
  gap: 8px;

  margin-top: 12px;
}

#videoBuildActions.ready {
  display: grid;
}

#videoBuildActions #download {
  display: block;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 12px 8px;

  border-radius: 12px;
  background: #ff8a00;
  color: #ffffff;

  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
}

#closeVideoBuildCardBtn {
  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 12px 8px;

  background: #1565c0;

  font-size: 14px;
}

#viewLastVideoBtn {
  display: none;

  width: 100%;
  max-width: 210px;

  margin: 4px auto 10px;
  padding: 10px 12px;

  background: #1565c0;

  font-size: 13px;
}

/* ***** 04LA - VIDEO ALBUM CARD ***** */

#videoAlbumCard {
  display: none;

  position: relative;
  top: auto;
  left: auto;
  transform: none;

  width: 86%;
  max-width: 430px;

  z-index: 10030;

  margin: 18px auto 26px;
  padding: 16px;

  border-radius: 22px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(21,101,192,.22);

  box-shadow:
    0 35px 90px rgba(0,0,0,.36),
    0 12px 30px rgba(0,0,0,.22);

  color: #1f2937;
  text-align: center;
  overflow: visible;
}

#videoAlbumCard.open {
  display: block;
}

#videoAlbumTitle {
  margin-bottom: 12px;
  color: #1565c0;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.25;
}

#videoAlbumList {
  display: grid;
  gap: 10px;
}

.video-album-empty {
  padding: 24px 10px;

  border-radius: 14px;
  background: rgba(21,101,192,.08);
  color: #52616f;

  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}

.video-album-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;

  padding: 8px;

  border-radius: 15px;
  background: rgba(21,101,192,.08);
  border: 1px solid rgba(21,101,192,.18);

  text-align: left;
}

.video-album-thumbnail {
  grid-row: 1 / span 3;

  position: relative;

  width: 92px;
  height: 92px;

  overflow: hidden;

  margin: 0;
  padding: 0;

  border-radius: 12px;
  background: #000000;

  cursor: pointer;
}

.video-album-thumbnail img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.video-album-play-mark {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 38px;
  height: 38px;

  transform: translate(-50%, -50%);

  border-radius: 50%;
  background: rgba(21,101,192,.88);
  color: #ffffff;

  font-size: 19px;
  font-weight: 900;
  line-height: 38px;
  text-align: center;

  box-shadow: 0 5px 14px rgba(0,0,0,.34);
}

.video-album-info {
  min-width: 0;
}

.video-album-name {
  min-width: 0;

  color: #1565c0;

  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-album-date {
  margin-top: 3px;

  color: #52616f;

  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
}

.video-album-actions {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 1%;

  min-width: 0;
  margin-top: 3%;
}

.video-album-actions button,
.video-album-actions a {
  display: block;

  width: 100%;
  min-width: 0;
  height: 34px;

  margin: 0;
  padding: 0 2px;

  border-radius: 8px;

  color: #ffffff;

  font-size: 10px;
  font-weight: 900;
  line-height: 34px;
  text-align: center;
  text-decoration: none;

  touch-action: manipulation;
}

.video-album-play,
.video-album-rename {
  background: #1565c0;
}

.video-album-download {
  background: #ff8a00;
}

.video-album-select {
  background: #52616f;
}

.video-album-select.selected {
  background: #1b8f3a;
}

.video-album-delete {
  background: #c62828;
}

.video-album-item.multi-selected {
  border-color: #1b8f3a;

  background:
    rgba(27,143,58,.12);

  box-shadow:
    0 0 0 .18em
    rgba(27,143,58,.12);
}

.video-album-player {
  display: none;

  grid-column: 1 / span 2;

  width: 100%;
  max-width: none;

  margin: 8px 0 0;

  border-radius: 12px;
  background: #000000;
}

.video-album-player.open {
  display: block;
}

#videoAlbumFooter {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 3%;

  width: 100%;

  margin:
    3% auto 0;
}

#videoAlbumFooter button {
  width: 20%;
  min-width: 0;

  margin: 0;
}

#videoAlbumFooter button {
  flex: 1;
  min-width: 0;

  height: clamp(38px,4vw,46px);

  margin: 0;
  padding: 0 14px;

  white-space: nowrap;
}

#deleteSelectedVideosBtn {
  display: none;

  flex: 1;

  background: #c62828;
}

#deleteSelectedVideosBtn.visible {
  display: block;
}

#closeVideoAlbumBtn {
  display: block;

  flex: 1;

  background: #1565c0;
}

/* ***** 05 - VIDEO PREVIEW AREA ***** */
canvas,
video {
  display: block;

  width: 100%;
  max-width: 420px;

  margin: 6px auto 0 auto;

  border-radius: 18px;
  background: #000;
}

/* ***** 06 - DOWNLOAD LINK ***** */
a {
  display: inline-block;
  margin-top: 18px;
  margin-bottom: 22px;
  color: #1565c0;
  font-weight: bold;
}

/* ***** 06A - FOOTER ***** */

.app-footer{
  margin-top:18px;
  padding-top:10px;

  border-top:1px solid rgba(21,101,192,.18);

  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}

.app-footer a{
  margin-top:0;
  margin-bottom:0;
}

.telegram-link{
  display:inline-flex;
  align-items:center;
  gap:10px;

  text-decoration:none;
  color:#1565c0;

  font-size:14px;
  font-weight:700;
}

.telegram-link img{
  width:34px;
  height:34px;
}

#mediaPreparingBox{
  display:none;
  position:fixed;
  inset:0;
  z-index:10020;
  background:rgba(15,47,95,.62);
  backdrop-filter:blur(3px);
  align-items:flex-start;
  justify-content:center;
  padding-top:72px;
  box-sizing:border-box;
}

.media-preparing-card{
  width:82%;
  max-width:320px;
  padding:24px 18px;
  border-radius:22px;
  background:rgba(255,255,255,.98);
  color:#1565c0;
  text-align:center;
  box-shadow:0 28px 70px rgba(0,0,0,.34);
}

.media-spinner{
  width:44px;
  height:44px;
  margin:0 auto 14px;
  border:5px solid rgba(21,101,192,.18);
  border-top-color:#ff8a00;
  border-radius:50%;
  animation:mediaSpin .85s linear infinite;
}

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

#mediaPreparingText{
  font-size:16px;
  font-weight:900;
  line-height:1.4;
}

/* ***** 06AA - HORIZONTAL 2026 INFORMATION CARD ***** */

.contact-card-box {
  display: none;

  position: relative;
  top: auto;
  left: auto;
  transform: none;

  width: min(1180px, calc(100% - 28px));
  max-width: 1180px;
  max-height: none;
  overflow: visible;

  z-index: 10010;

  margin: 18px auto 32px;
  padding: clamp(20px, 3vw, 34px);

  color: #f7f8ff;
  text-align: left;

  border: 1px solid rgba(255,255,255,.11);
  border-radius: clamp(26px, 3vw, 40px);

  background:
    radial-gradient(
      circle at 7% 5%,
      rgba(255,118,72,.27),
      transparent 27%
    ),
    radial-gradient(
      circle at 92% 12%,
      rgba(255,79,136,.20),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      rgba(28,34,63,.98),
      rgba(8,11,26,.99)
    );

  box-shadow:
    0 34px 90px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.09);

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.contact-card-box::before {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;

  pointer-events: none;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.07),
      transparent 24%,
      transparent 72%,
      rgba(255,79,136,.05)
    );
}

.info-card-header {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  gap: 16px;

  margin-bottom: 24px;
  padding-bottom: 18px;

  border-bottom: 1px solid rgba(255,255,255,.10);
}

.info-card-header-icon {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,153,106,.38);
  border-radius: 22px;

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,.24),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #ff7648,
      #ff4f88
    );

  box-shadow:
    0 15px 32px rgba(255,79,136,.22),
    inset 0 1px 0 rgba(255,255,255,.34);
}

.info-card-header-icon svg {
  width: 39px;
  height: 39px;

  stroke: #ffffff;
  fill: none;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.info-card-heading {
  min-width: 0;
}

.info-card-heading-title {
  display: block;

  margin: 0 0 5px;

  color: #ffffff;

  font-size: clamp(23px, 3vw, 34px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.7px;
}

#xContactTitle {
  display: block;

  color: #c5ccdf;

  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
}

.info-card-layout {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(320px, .88fr);

  gap: clamp(22px, 4vw, 50px);
  align-items: stretch;
}

.info-card-fields,
.info-card-visuals {
  min-width: 0;
}

.info-card-fields {
  display: grid;
  align-content: start;
  gap: 13px;

  padding: clamp(18px, 2.4vw, 28px);

  border: 1px solid rgba(255,255,255,.09);
  border-radius: 25px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.025)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

.info-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  align-items: start;
}

.info-field-row label {
  display: block;

  margin: 0 0 1px;

  color: #dce1f0;

  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

.contact-card-box input[type="text"] {
  width: 100%;
  height: 48px;

  margin: 0;
  padding: 0 15px;

  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;

  outline: none;

  background: rgba(255,255,255,.075);
  color: #ffffff;

  font-size: 15px;
  font-weight: 700;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06);

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.contact-card-box input[type="text"]:focus {
  border-color: rgba(255,118,72,.90);

  background: rgba(255,255,255,.11);

  box-shadow:
    0 0 0 3px rgba(255,118,72,.13),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.info-card-visuals {
  display: flex;
  flex-direction: column;

  padding: clamp(18px, 2.4vw, 28px);

  border: 1px solid rgba(255,118,72,.24);
  border-radius: 25px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255,118,72,.15),
      transparent 46%
    ),
    rgba(255,255,255,.045);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08);
}

.info-visual-title {
  margin: 0 0 16px;

  color: #ffffff;

  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

.info-preview-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;
  align-items: stretch;

  margin: 0 0 18px;
  text-align: center;
}

.info-preview-card {
  min-width: 0;
  min-height: 205px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding: 16px 10px;

  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;

  background: rgba(255,255,255,.055);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

.info-preview-title {
  margin: 0 0 12px;

  color: #ff9a67;

  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
}

.profile-photo-preview,
.logo-photo-preview {
  display: none;

  width: 118px;
  height: 118px;

  margin: 0 auto 7px;

  border: 4px solid rgba(255,118,72,.92);
  border-radius: 50%;

  object-fit: cover;

  box-shadow:
    0 15px 30px rgba(0,0,0,.34),
    0 0 0 5px rgba(255,118,72,.09);
}

.logo-photo-preview {
  border-radius: 23px;

  object-fit: contain;

  background: rgba(255,255,255,.94);
}

#savedProfilePhotoInfo,
#savedLogoInfo {
  min-height: 18px;

  margin-top: 6px !important;

  color: #c5ccdf !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35;
  text-align: center !important;

  overflow-wrap: anywhere;
}

.info-upload-button {
  width: 100%;
  min-height: 46px;

  margin: 0 0 18px;
  padding: 10px 12px;

  border: 1px solid rgba(112,146,190,.28);
  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      #172d4d 0%,
      #234b67 55%,
      #183443 100%
    );

  color: #ffffff;

  font-size: 13px;
  font-weight: 850;

  box-shadow:
    0 8px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.13);

  transition:
    transform .18s ease,
    filter .18s ease;
}

.info-upload-button:hover {
  filter: brightness(1.09);
}

.info-upload-button:active {
  transform: scale(.98);
}

.logo-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 18px;

  margin: 0 0 18px;
}

.logo-action-grid button {
  min-width: 0;
  min-height: 46px;

  margin: 0;
  padding: 9px 8px;

  border: 1px solid rgba(255,255,255,.13);
  border-radius: 13px;

  color: #ffffff;

  font-size: 13px;
  font-weight: 850;

  box-shadow:
    0 8px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.12);

  transition:
    transform .18s ease,
    filter .18s ease;
}

.logo-action-grid button:hover {
  filter: brightness(1.09);
}

.logo-action-grid button:active {
  transform: scale(.98);
}

#chooseLogoBtn {
  background:
    linear-gradient(
      135deg,
      #4b162d 0%,
      #74223f 55%,
      #431326 100%
    );
}

#createTextLogoBtn {
  background:
    linear-gradient(
      135deg,
      #28223f 0%,
      #49335f 55%,
      #30213e 100%
    );
}

#xLogoNote {
  margin: 0 !important;

  color: #9fa8c2 !important;

  font-size: 11px !important;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
}

.info-card-actions {
  position: relative;
  z-index: 1;

  display: flex;
  justify-content: flex-end;

  gap: 20px;

  margin-top: 24px;
  padding-top: 20px;

  border-top: 1px solid rgba(255,255,255,.10);
}

#saveUserInfoBtn,
#clearUserInfoBtn {
  width: auto !important;
  min-width: 170px;

  margin: 0;
  padding: 13px 22px !important;

  border: 1px solid rgba(255,255,255,.13);
  border-radius: 13px;

  color: #ffffff;

  font-size: 14px !important;
  font-weight: 900;

  box-shadow:
    0 8px 18px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.13);

  transition:
    transform .18s ease,
    filter .18s ease;
}

#saveUserInfoBtn:hover,
#clearUserInfoBtn:hover {
  filter: brightness(1.09);
}

#saveUserInfoBtn:active,
#clearUserInfoBtn:active {
  transform: scale(.98);
}

#saveUserInfoBtn {
  background:
    linear-gradient(
      135deg,
      #4c1837 0%,
      #71305f 52%,
      #38213f 100%
    );
}

#clearUserInfoBtn {
  background:
    linear-gradient(
      135deg,
      #48121c 0%,
      #75202c 55%,
      #3c1019 100%
    ) !important;
}

@media (max-width: 760px) and (orientation: portrait) {

  .contact-card-box {
    width: calc(100% - 22px);
    padding: 18px;
    border-radius: 27px;
  }

  .info-card-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .info-field-row {
    gap: 7px;
  }

  .info-preview-card {
    min-height: 190px;
  }

  .profile-photo-preview,
  .logo-photo-preview {
    width: 105px;
    height: 105px;
  }

  .info-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #saveUserInfoBtn,
  #clearUserInfoBtn {
    width: 100% !important;
    min-width: 0;
    padding: 12px 8px !important;
  }

}

@media (max-width: 430px) {

  .info-card-header-icon {
    width: 57px;
    height: 57px;
    flex-basis: 57px;
    border-radius: 18px;
  }

  .info-card-header-icon svg {
    width: 32px;
    height: 32px;
  }

  .info-card-fields,
  .info-card-visuals {
    padding: 15px;
  }

  .info-preview-grid {
    gap: 9px;
  }

  .info-preview-card {
    min-height: 173px;
    padding: 13px 6px;
  }

  .profile-photo-preview,
  .logo-photo-preview {
    width: 91px;
    height: 91px;
  }

  .logo-action-grid {
    grid-template-columns: 1fr;
  }

}

/* ***** 06B - INTEGRATED 2026 HOME DASHBOARD ***** */

.ip-home-dashboard {
  --ip-home-text: #f7f8ff;
  --ip-home-muted: #b5bdd4;

  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: clamp(18px, 2.8vw, 38px);
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.11);
  border-radius: clamp(26px, 3vw, 44px);

  color: var(--ip-home-text);

  background:
    radial-gradient(circle at 8% 3%, rgba(255,105,45,.24), transparent 25%),
    radial-gradient(circle at 90% 12%, rgba(65,96,255,.23), transparent 29%),
    radial-gradient(circle at 65% 100%, rgba(166,55,255,.18), transparent 32%),
    linear-gradient(
      145deg,
      rgba(28,34,63,.96),
      rgba(8,11,26,.98)
    );

  box-shadow:
    0 32px 90px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.08);

  text-align: left;
}

.ip-home-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  margin-bottom: clamp(22px, 3vw, 38px);
}

.ip-home-brand {
  display: flex;
  align-items: center;
  gap: 17px;
  min-width: 0;
}

.ip-home-logo-box {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,183,84,.28);
  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(255,138,0,.28),
      rgba(239,63,143,.13)
    );

  box-shadow:
    0 18px 40px rgba(255,104,48,.18),
    inset 0 1px 0 rgba(255,255,255,.16);
}

.ip-home-logo-box img {
  width: 82px;
  height: 82px;
  object-fit: contain;

  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.36));
}

.ip-home-brand-name {
  margin: 0;

  font-size: clamp(31px, 4vw, 50px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -1.8px;

  background:
    linear-gradient(
      90deg,
      #ff8a00,
      #ffbb72 43%,
      #ffffff 76%
    );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ip-home-tagline {
  margin: 9px 0 0;

  color: #c8cde0;

  font-size: clamp(12px, 1.4vw, 16px);
  font-weight: 650;
}

#ipHomeLanguageBtn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  padding: 0;
  margin: 0;

  border: 1px solid rgba(130,154,255,.28);
  border-radius: 16px;

  background: rgba(26,34,66,.72);
  color: #edf0ff;

  font-size: 14px;
  font-weight: 850;
}

.ip-home-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: clamp(12px, 1.55vw, 22px);
}

.ip-home-tile {
  --ip-a: #ff8a00;
  --ip-b: #ef3f8f;

  position: relative;

  min-width: 0;
  min-height: clamp(172px, 18vw, 242px);

  margin: 0;
  padding: clamp(17px, 2vw, 25px);

  overflow: hidden;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--ip-a) 45%,
      transparent
    );

  border-radius:
    clamp(22px, 2.2vw, 31px);

  color: #ffffff;
  text-align: left;

  background:
    radial-gradient(
      circle at 22% 8%,
      color-mix(
        in srgb,
        var(--ip-a) 28%,
        transparent
      ),
      transparent 43%
    ),
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--ip-a) 18%,
        rgba(22,26,49,.90)
      ),
      rgba(13,17,36,.94) 68%
    );

  box-shadow:
    0 17px 38px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.10);

  touch-action: manipulation;

  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

.ip-home-tile:hover {
  transform: translateY(-5px);

  box-shadow:
    0 25px 55px rgba(0,0,0,.34),
    0 0 32px
      color-mix(
        in srgb,
        var(--ip-a) 15%,
        transparent
      );
}

.ip-home-tile:active {
  transform: scale(.985);
}

.ip-home-tile::after {
  content: "";

  position: absolute;

  width: 140px;
  height: 140px;

  right: -58px;
  bottom: -68px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--ip-b) 34%,
        transparent
      ),
      transparent 67%
    );

  pointer-events: none;
}

.ip-home-icon {
  position: relative;
  z-index: 1;

  width: clamp(68px, 7vw, 96px);
  height: clamp(68px, 7vw, 96px);

  display: grid;
  place-items: center;

  margin-bottom:
    clamp(14px, 1.5vw, 20px);

  border:
    1px solid
    color-mix(
      in srgb,
      var(--ip-a) 55%,
      white 7%
    );

  border-radius: 31%;

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,.22),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--ip-a) 72%,
        white 5%
      ),
      color-mix(
        in srgb,
        var(--ip-b) 54%,
        #161a36
      )
    );

  box-shadow:
    0 14px 28px
      color-mix(
        in srgb,
        var(--ip-a) 19%,
        transparent
      ),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -10px 20px rgba(0,0,0,.15);
}

.ip-home-icon svg {
  width: 57%;
  height: 57%;

  stroke: #ffffff;
  fill: none;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;

  filter:
    drop-shadow(0 5px 9px rgba(0,0,0,.32));
}

.ip-home-title {
  position: relative;
  z-index: 1;

  display: block;

  margin: 0;

  font-size: clamp(18px, 1.8vw, 25px);
  font-weight: 880;
  line-height: 1.08;
  letter-spacing: -.45px;
}

.ip-home-description {
  position: relative;
  z-index: 1;

  display: block;

  margin: 9px 0 0;

  color: var(--ip-home-muted);

  font-size: clamp(11px, 1.15vw, 15px);
  font-weight: 560;
  line-height: 1.35;
}

.ip-home-arrow {
  position: absolute;

  right: 18px;
  top: 18px;

  z-index: 1;

  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background: rgba(255,255,255,.075);
  color: rgba(255,255,255,.70);

  font-size: 17px;
}

.ip-home-tile[data-home-action="information"] {
  --ip-a: #ff7648;
  --ip-b: #ff4f88;
}

.ip-home-tile[data-home-action="output"] {
  --ip-a: #8d57ff;
  --ip-b: #d146d8;
}

.ip-home-tile[data-home-action="media"] {
  --ip-a: #397dff;
  --ip-b: #6d5cff;
}

.ip-home-tile[data-home-action="free-media"] {
  --ip-a: #30d0d8;
  --ip-b: #43d6a1;
}

.ip-home-tile[data-home-action="intro"] {
  --ip-a: #ff8a00;
  --ip-b: #ff5f6d;
}

.ip-home-tile[data-home-action="outro"] {
  --ip-a: #ff516d;
  --ip-b: #a84cff;
}

.ip-home-tile[data-home-action="timeline"] {
  --ip-a: #ffc857;
  --ip-b: #ff8a00;
}

.ip-home-tile[data-home-action="music"] {
  --ip-a: #aa55ff;
  --ip-b: #ef3f8f;
}

.ip-home-bottom {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: clamp(18px, 3vw, 44px);

  margin-top:
    clamp(24px, 3.2vw, 42px);

  padding-top:
    clamp(20px, 2.6vw, 34px);
}

.ip-home-bottom::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  top: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #ff8a00 18%,
      #ef3f8f 52%,
      #8c4dff 82%,
      transparent
    );

  box-shadow:
    0 0 18px rgba(239,63,143,.50);
}

.ip-home-utility {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 10px 12px;
}

.ip-home-utility button,
.ip-home-utility a {
  min-height: 44px;

  display: inline-flex;
  align-items: center;

  gap: 9px;

  margin: 0;
  padding: 0 15px;

  border:
    1px solid rgba(255,255,255,.10);

  border-radius: 14px;

  background: rgba(255,255,255,.055);
  color: #d8dced;

  font-size: 13px;
  font-weight: 750;

  text-decoration: none;
}

.ip-home-company {
  width: 100%;

  color: #858da7;

  font-size: 11px;
  font-weight: 620;
}

.ip-home-company a {
  margin: 0;

  color: #b9bfd2;

  text-decoration: none;
}

#ipHomeCreateBtn {
  position: relative;

  min-width: clamp(235px, 25vw, 350px);
  min-height: 68px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  margin: 0;
  padding: 0 30px;

  overflow: hidden;

  border: 0;
  border-radius: 24px;

  color: #ffffff;

  font-size: clamp(17px, 1.8vw, 23px);
  font-weight: 900;

  background:
    linear-gradient(
      105deg,
      #ff9d00,
      #ff663e 46%,
      #d934a1
    );

  box-shadow:
    0 17px 38px rgba(238,58,119,.30),
    inset 0 1px 0 rgba(255,255,255,.38);
}

#ipHomeCreateBtn svg {
  width: 25px;
  height: 25px;

  stroke: #ffffff;
  fill: none;

  stroke-width: 1.8;
}

/* Hide the old dashboard only */

.box > .logo,
.box > #xSubtitle,
.box > .header-divider,
.option-grid > #contactCardBtn,
.option-grid > #outputSettingsBtn,
.option-grid > #choosePhotosBtn,
.option-grid > #freePhotosBtn,
.option-grid > #textSettingsBtn,
.option-grid > #outroSettingsBtn,
.option-grid > div:has(#openTimelineCardBtn),
.option-grid > div:has(#musicSettingsBtn),
#createVideoBtn,
#viewLastVideoBtn,
.box > .app-footer {
  display: none !important;
}

.option-grid {
  display: block;
  margin: 0;
}

.box {
  width: min(1400px, 100%);
  max-width: 1400px;

  padding: 0;

  background: transparent;

  border: 0;

  box-shadow: none;

  backdrop-filter: none;
}

@media (max-width: 900px) {

  .ip-home-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .ip-home-tile {
    min-height: 180px;
  }

  .ip-home-bottom {
    grid-template-columns: 1fr;
  }

  #ipHomeCreateBtn {
    width: 100%;
    min-width: 0;
  }

}

@media (max-width: 520px) {

  .ip-home-dashboard {
    padding: 18px;
    border-radius: 28px;
  }

  .ip-home-logo-box {
    width: 72px;
    height: 72px;

    flex-basis: 72px;

    border-radius: 22px;
  }

  .ip-home-logo-box img {
    width: 61px;
    height: 61px;
  }

  #ipHomeLanguageBtn {
    width: 43px;
    height: 43px;
    min-width: 43px;
  }

  .ip-home-grid {
    gap: 10px;
  }

  .ip-home-tile {
    min-height: 164px;

    padding: 15px;

    border-radius: 21px;
  }

  .ip-home-icon {
    width: 62px;
    height: 62px;

    margin-bottom: 13px;
  }

  .ip-home-utility {
    display: grid;

    grid-template-columns:
      1fr 1fr;
  }

  .ip-home-utility button,
  .ip-home-utility a {
    justify-content: center;

    padding: 0 9px;

    font-size: 12px;
  }

  .ip-home-company {
    grid-column: 1 / -1;

    text-align: center;
  }

}

/* ***** 219 - TIMELINE CENTRAL WORKSPACE ***** */

#ipHomeDashboard {
  display: none !important;
}

body.ip-timeline-card-active {
  padding:
    clamp(8px, 1.5vw, 22px);
}

body.ip-timeline-card-active
#timelineCardBox {
  margin:
    0 auto clamp(18px, 3vw, 40px);
}

.timeline-workspace-menu {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr))
    minmax(0, 3fr);

  gap: 1%;

  width: 100%;
  min-width: 0;

  margin: 0;

  padding:
    clamp(7px, 1vw, 12px);

  border:
    1px solid rgba(255,255,255,.11);

  border-radius:
    clamp(13px, 1.6vw, 19px);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.065),
      rgba(48,145,255,.055)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08);
}

.timeline-workspace-menu button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap:
    clamp(5px, .6vw, 8px);

  width: 100%;
  min-width: 0;

  min-height:
    clamp(62px, 7vw, 82px);

  margin: 0;

  padding:
    clamp(6px, .8vw, 10px)
    clamp(3px, .45vw, 6px);

  border:
    1px solid rgba(255,255,255,.10);

  border-radius:
    clamp(9px, 1.1vw, 14px);

  background:
    linear-gradient(
      145deg,
      #202a3b,
      #344156
    );

  color: #dce1f0;

  font-size:
    clamp(11px, 1.2vw, 16px);

  font-weight: 950;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-align: center;

  box-shadow:
    0 7px 15px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.timeline-workspace-menu button:active {
  transform: scale(.96);
}

.timeline-workspace-menu-icon {
  display: grid;
  place-items: center;

  width:
    clamp(30px, 3.6vw, 44px);

  aspect-ratio: 1 / 1;

  border-radius:
    clamp(8px, 1vw, 12px);

  background:
    linear-gradient(
      145deg,
      #3091ff,
      #5451ff
    );

  color: #ffffff;

  font-size:
    clamp(16px, 2vw, 24px);

  font-weight: 900;
  line-height: 1;

  box-shadow:
    0 6px 14px rgba(48,145,255,.23),
    inset 0 1px 0 rgba(255,255,255,.20);
}

#timelineWorkspaceIntroBtn
.timeline-workspace-menu-icon {
  background:
    linear-gradient(
      145deg,
      #ff8a00,
      #ff516d
    );
}

#timelineWorkspaceOutroBtn
.timeline-workspace-menu-icon {
  background:
    linear-gradient(
      145deg,
      #8d57ff,
      #d146d8
    );
}

#timelineWorkspaceMusicBtn
.timeline-workspace-menu-icon {
  background:
    linear-gradient(
      145deg,
      #d146d8,
      #8d57ff
    );
}

#timelineWorkspaceDeviceMediaBtn
.timeline-workspace-menu-icon,
#timelineWorkspaceFreeMediaBtn
.timeline-workspace-menu-icon {
  background:
    linear-gradient(
      145deg,
      #30d0d8,
      #43d6a1
    );
}

body.ip-timeline-card-active
#closeTimelineCardBtn {
  background:
    linear-gradient(
      105deg,
      #ff9d00,
      #ff663e 46%,
      #d934a1
    );

  box-shadow:
    0 12px 26px rgba(238,58,119,.25),
    inset 0 1px 0 rgba(255,255,255,.30);
}

/* Tablet */

@media
  (min-width: 768px)
  and (max-width: 1100px) {

  .timeline-workspace-menu {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));

    gap: 1.2%;
  }

  .timeline-motion-speed {
    grid-column: 1 / -1;

    grid-template-columns:
      minmax(0, 24fr)
      minmax(0, 76fr);

    gap: 2%;
  }

}

/* Mobile landscape */

@media
  (max-width: 767px)
  and (orientation: landscape) {

  .timeline-workspace-menu {
    grid-template-columns:
      repeat(4, minmax(0, 1fr))
      minmax(0, 3fr);

    gap: 1%;
  }

  .timeline-workspace-menu button {
    min-height:
      clamp(44px, 12vh, 58px);

    padding: 4px 2px;

    font-size:
      clamp(8px, 1.45vw, 11px);
  }

}

.timeline-mobile-library-btn {
  display: none !important;
}

/* Mobile portrait */

@media
  (max-width: 767px)
  and (orientation: portrait) {

  .timeline-header-controls
  #timelineWorkspaceTemplatesBtn,
  .timeline-header-controls
  #timelineWorkspaceAlbumBtn {
    display: none !important;
  }

  .timeline-workspace-menu {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap:
      clamp(6px, 2vw, 9px);
  }

  .timeline-workspace-menu button {
    min-height:
      clamp(58px, 17vw, 72px);

    font-size:
      clamp(9px, 2.7vw, 12px);
  }

  .timeline-mobile-library-btn {
    display: flex !important;
  }

  #timelineWorkspaceInformationBtn {
    order: 1;
  }

  #timelineWorkspaceMusicBtn {
    order: 2;
  }

  #timelineMobileTemplatesBtn {
    order: 3;
  }

  #timelineWorkspaceDeviceMediaBtn {
    order: 4;
  }

  #timelineWorkspaceFreeMediaBtn {
    order: 5;
  }

  #timelineMobileAlbumBtn {
    order: 6;
  }

  #timelineMotionSpeed {
    order: 7;
  }

  #timelineMobileTemplatesBtn
  .timeline-workspace-menu-icon {
    background:
      linear-gradient(
        145deg,
        #ff8a00,
        #ff516d
      );
  }

  #timelineMobileAlbumBtn
  .timeline-workspace-menu-icon {
    background:
      linear-gradient(
        145deg,
        #8d57ff,
        #d146d8
      );
  }

  .timeline-motion-speed {
    grid-column: 1 / -1;

    grid-template-columns:
      minmax(0, 38fr)
      minmax(0, 62fr);

    grid-template-areas:
      "duration title"
      "duration options";

    column-gap: 3%;
    row-gap:
      clamp(6px, 2vw, 9px);

    min-height: auto;
  }

  .timeline-motion-speed-title {
    min-width: 0;

    text-align: center;
  }

  body.ip-timeline-card-active
  #timelineTotalDuration {
    width: 100%;
    min-width: 0;

    min-height:
      clamp(64px, 19vw, 78px);

    padding:
      clamp(6px, 2vw, 10px);

    gap:
      clamp(4px, 1.2vw, 7px);

    overflow: hidden;

    white-space: normal;
  }

  body.ip-timeline-card-active
  #timelineTotalDuration
  .timeline-total-label {
    width: 100%;
    min-width: 0;

    font-size:
      clamp(8px, 2.45vw, 10.5px);

    line-height: 1.2;

    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  body.ip-timeline-card-active
  #timelineTotalDuration
  .timeline-total-value {
    width: 100%;
    min-width: 0;

    font-size:
      clamp(15px, 4.5vw, 20px);

    line-height: 1;

    white-space: nowrap;
  }

}

/* Extra narrow */

@media
  (max-width: 390px)
  and (orientation: portrait) {

  .timeline-workspace-menu {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

}

/* ***** VERSION 314 - UNIFIED INTRO DESIGN AND LIVE PREVIEW ***** */

body.ip-intro-card-active
#textSettingsBox {
  position: relative;
  top: auto;
  left: auto;
  transform: none;

  display: grid !important;

  grid-template-columns:
    minmax(0, 46fr)
    minmax(0, 54fr);

  grid-template-areas:
    "header header"
    "tools preview";

  column-gap:
    clamp(14px, 2.2vw, 34px);

  row-gap:
    clamp(10px, 1.3vw, 18px);

  align-items: start;

  width: 96%;
  max-width: none;
  min-width: 0;

  margin: 2% auto 4%;
  padding:
    clamp(14px, 2.3vw, 32px);

  overflow: hidden;
}

body.ip-intro-card-active
#textSettingsBox >
.intro-card-header {
  grid-area: header;

  display: grid;

  grid-template-columns:
    minmax(0, 46fr)
    minmax(0, 54fr);

  gap:
    clamp(14px, 2.2vw, 34px);

  align-items: end;

  width: 100%;
  min-width: 0;
}

body.ip-intro-card-active
#introHeaderLeft {
  display: flex;

  align-items: center;

  gap:
    clamp(10px, 1.5vw, 18px);

  width: 100%;
  min-width: 0;
}

body.ip-intro-card-active
.intro-card-header
.intro-copy-panel {
  display: block;

  width: 100%;
  min-width: 0;

  align-self: end;
}

body.ip-intro-card-active
.intro-card-header
.intro-text-field-grid {
  display: grid;

  grid-template-columns:
    max-content
    clamp(30px, 3vw, 38px)
    minmax(0, 1fr);

  grid-template-rows:
    auto
    auto;

  column-gap:
    clamp(7px, .8vw, 11px);

  row-gap:
    clamp(7px, .9vw, 10px);

  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(9px, 1.1vw, 13px);
}

body.ip-intro-card-active
#introUnifiedTools
.intro-top-grid {
  display: none;
}

body.ip-intro-card-active
#introUnifiedTools {
  grid-area: tools;

  display: block;

  width: 100%;
  min-width: 0;

  align-self: start;
}

body.ip-intro-card-active
#textSettingsBox >
#introPreviewBox {
  grid-area: preview;

  position: relative;
  inset: auto;
  transform: none;

  display: block !important;

  width: 100%;
  max-width: none;
  min-width: 0;

  margin: 0;
  padding:
    clamp(10px, 1.4vw, 18px);

  align-self: start;

  overflow: hidden;
}

body.ip-intro-card-active
#introPreviewBox
.intro-preview-header {
  margin-bottom:
    clamp(9px, 1.2vw, 15px);

  padding-bottom:
    clamp(8px, 1vw, 13px);
}

/* Intro Design already owns the language control.
   Do not show a second language button inside Intro Preview. */

body.ip-intro-card-active
#introPreviewBox
.ip-card-language-btn {
  display: none !important;
}

body.ip-intro-card-active
#introPreviewBox
.intro-preview-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  gap:
    clamp(9px, 1.2vw, 15px);

  width: 100%;
  min-width: 0;
}

/* Fixed square Preview stage */

body.ip-intro-card-active
#introPreviewBox
.intro-preview-canvas-panel {
  position: relative;

  display: block;

  width: 82%;
  max-width: none;
  min-width: 0;
  min-height: 0;

  aspect-ratio: 1 / 1;

  justify-self: center;

  margin: 0;
  padding: 0;

  overflow: hidden;

  background: #000000;
}

/*
  Permanent square stage.
  Every real output ratio stays centered and fully
  contained inside this square.
*/

body.ip-intro-card-active
#introPreviewCanvas {
  position: absolute !important;

  top: 50% !important;
  left: 50% !important;

  display: block;

  width: auto !important;
  height: auto !important;

  max-width: 94% !important;
  max-height: 94% !important;

  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;

  object-fit: contain;

  transform:
    translate(-50%, -50%) !important;

  transform-origin: center center;

  background: #000000;
}

body.ip-intro-card-active
#introPreviewBox
.intro-preview-controls-panel {
  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    clamp(9px, 1.2vw, 15px);
}

/* Compact Element Size inside Intro Design */

body.ip-intro-card-active
#introUnifiedTools
.intro-preview-controls-panel {
  width: 100%;
  min-width: 0;

  margin:
    clamp(8px, 1vw, 12px)
    0;

  padding:
    clamp(7px, .9vw, 11px);

  border:
    1px solid rgba(141,87,255,.18);

  border-radius:
    clamp(11px, 1.4vw, 16px);

  background:
    linear-gradient(
      145deg,
      rgba(141,87,255,.08),
      rgba(48,145,255,.04)
    );
}

body.ip-intro-card-active
#introUnifiedTools
.intro-preview-controls-title {
  margin:
    0 0 clamp(6px, .8vw, 9px);

  padding:
    clamp(5px, .65vw, 8px);

  font-size:
    clamp(10px, 1vw, 13px);
}

body.ip-intro-card-active
#introUnifiedTools
.intro-preview-size-panel {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    clamp(5px, .7vw, 8px);

  padding:
    clamp(6px, .8vw, 9px);
}

body.ip-intro-card-active
#introUnifiedTools
.intro-preview-size-row {
  grid-template-rows:
    auto auto;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(4px, .55vw, 7px);

  padding:
    clamp(5px, .65vw, 8px);
}

body.ip-intro-card-active
#introUnifiedTools
.intro-preview-size-label {
  grid-column: 1 / -1;

  min-height: 0;

  font-size:
    clamp(9px, .9vw, 11px);
}

body.ip-intro-card-active
#introUnifiedTools
.intro-preview-size-row button {
  min-height:
    clamp(28px, 3vw, 34px);

  font-size:
    clamp(15px, 1.6vw, 20px);
}

body.ip-intro-card-active
#introPreviewBox
#introPreviewCoverActions,
body.ip-intro-card-active
#introPreviewBox
#introPreviewActions {
  width: 100%;
}

/* Hidden engine trigger remains operational */

body.ip-intro-card-active
#previewIntroFrameBtn {
  display: none !important;
}

/* Tablet */

@media
  (min-width: 768px)
  and (max-width: 1100px) {

  body.ip-intro-card-active
  #textSettingsBox {
    width: 97%;

    grid-template-columns:
      minmax(0, 48fr)
      minmax(0, 52fr);

    column-gap: 1.7%;
  }

  body.ip-intro-card-active
  #introPreviewBox
  .intro-preview-canvas-panel {
    width: 92%;
  }

}

/* Mobile */

@media
  (max-width: 767px) {

  body.ip-intro-card-active
  #textSettingsBox {
    width: 96%;

    grid-template-columns:
      minmax(0, 1fr);

    grid-template-areas:
      "header"
      "tools"
      "preview";

    row-gap:
      clamp(10px, 3vw, 16px);
  }

  body.ip-intro-card-active
  #introPreviewBox
  .intro-preview-canvas-panel {
    width: 100%;
  }

}

</style>
</head>

<body>

<!-- ***** 07 - MAIN CONTAINER ***** -->
<div class="box" style="position:relative;">

<!-- ***** 07A - INTEGRATED 2026 HOME DASHBOARD ***** -->

<section class="ip-home-dashboard"
         id="ipHomeDashboard">

  <header class="ip-home-topbar">

    <div class="ip-home-brand">

      <div class="ip-home-logo-box">

        <img src="/Assets/Images/ip-logo.png"
             alt="IzyPost">

      </div>

      <div>

        <h1 class="ip-home-brand-name">
          IzyPost
        </h1>

        <p class="ip-home-tagline"
           id="ipHomeTagline">
          Smart Video Creator
        </p>

      </div>

    </div>

    <button type="button"
            id="ipHomeLanguageBtn">
      TR
    </button>

  </header>

  <div class="ip-home-grid">

    <button type="button"
            class="ip-home-tile"
            data-home-action="information">

      <span class="ip-home-arrow">
        ↗
      </span>

      <span class="ip-home-icon">

        <svg viewBox="0 0 48 48">

          <circle cx="24"
                  cy="16"
                  r="7">
          </circle>

          <path d="M11 39c2-8 7-12 13-12s11 4 13 12M7 8h7M10.5 4.5v7">
          </path>

        </svg>

      </span>

      <span class="ip-home-title"
            data-home-en="Information"
            data-home-tr="Bilgiler">
        Information
      </span>

      <span class="ip-home-description"
            data-home-en="Identity, logo and contact details"
            data-home-tr="Kimlik, logo ve iletişim bilgileri">
        Identity, logo and contact details
      </span>

    </button>

    <button type="button"
            class="ip-home-tile"
            data-home-action="output">

      <span class="ip-home-arrow">
        ↗
      </span>

      <span class="ip-home-icon">

        <svg viewBox="0 0 48 48">

          <rect x="10"
                y="7"
                width="28"
                height="34"
                rx="5">
          </rect>

          <path d="M17 16h14M17 24h14M17 32h8M34 29l5 5-5 5">
          </path>

        </svg>

      </span>

      <span class="ip-home-title"
            data-home-en="Output Size"
            data-home-tr="Çıktı Boyutu">
        Output Size
      </span>

      <span class="ip-home-description"
            data-home-en="Post, Reel, Story or YouTube"
            data-home-tr="Gönderi, Reels, Hikâye veya YouTube">
        Post, Reel, Story or YouTube
      </span>

    </button>

    <button type="button"
            class="ip-home-tile"
            data-home-action="media">

      <span class="ip-home-arrow">
        ↗
      </span>

      <span class="ip-home-icon">

        <svg viewBox="0 0 48 48">

          <rect x="8"
                y="11"
                width="28"
                height="26"
                rx="5">
          </rect>

          <circle cx="17"
                  cy="19"
                  r="3">
          </circle>

          <path d="M11 34l9-9 6 6 4-4 6 7M38 16h5M40.5 13.5v5">
          </path>

        </svg>

      </span>

      <span class="ip-home-title"
            data-home-en="Your Media"
            data-home-tr="Medyanız">
        Your Media
      </span>

      <span class="ip-home-description"
            data-home-en="Choose your photos and videos"
            data-home-tr="Fotoğraf ve videolarınızı seçin">
        Choose your photos and videos
      </span>

    </button>

    <button type="button"
            class="ip-home-tile"
            data-home-action="free-media">

      <span class="ip-home-arrow">
        ↗
      </span>

      <span class="ip-home-icon">

        <svg viewBox="0 0 48 48">

          <circle cx="24"
                  cy="24"
                  r="15">
          </circle>

          <path d="M9 24h30M24 9c5 5 7 10 7 15s-2 10-7 15c-5-5-7-10-7-15s2-10 7-15M34 11l3 3 5-5">
          </path>

        </svg>

      </span>

      <span class="ip-home-title"
            data-home-en="Free Media"
            data-home-tr="Ücretsiz Medya">
        Free Media
      </span>

      <span class="ip-home-description"
            data-home-en="Search ready-to-use photos and videos"
            data-home-tr="Hazır fotoğraf ve videoları arayın">
        Search ready-to-use photos and videos
      </span>

    </button>

    <button type="button"
            class="ip-home-tile"
            data-home-action="intro">

      <span class="ip-home-arrow">
        ↗
      </span>

      <span class="ip-home-icon">

        <svg viewBox="0 0 48 48">

          <path d="M10 13h28v24H10zM18 8l4 5M28 8l-4 5M20 20l10 5-10 5z">
          </path>

        </svg>

      </span>

      <span class="ip-home-title"
            data-home-en="Intro"
            data-home-tr="Başlangıç">
        Intro
      </span>

      <span class="ip-home-description"
            data-home-en="Cover, title, layout and opening"
            data-home-tr="Kapak, başlık, düzen ve açılış">
        Cover, title, layout and opening
      </span>

    </button>

    <button type="button"
            class="ip-home-tile"
            data-home-action="outro">

      <span class="ip-home-arrow">
        ↗
      </span>

      <span class="ip-home-icon">

        <svg viewBox="0 0 48 48">

          <path d="M10 12h28v24H10zM17 18h14M17 24h10M17 30h14M35 8v8M31 12h8">
          </path>

        </svg>

      </span>

      <span class="ip-home-title"
            data-home-en="Outro"
            data-home-tr="Kapanış">
        Outro
      </span>

      <span class="ip-home-description"
            data-home-en="Brand ending and contact details"
            data-home-tr="Marka kapanışı ve iletişim bilgileri">
        Brand ending and contact details
      </span>

    </button>

    <button type="button"
            class="ip-home-tile"
            data-home-action="timeline">

      <span class="ip-home-arrow">
        ↗
      </span>

      <span class="ip-home-icon">

        <svg viewBox="0 0 48 48">

          <rect x="7"
                y="12"
                width="34"
                height="24"
                rx="5">
          </rect>

          <path d="M13 18h7v12h-7zM23 18h7v12h-7zM33 18h3v12h-3M10 40h28">
          </path>

        </svg>

      </span>

      <span class="ip-home-title"
            data-home-en="Timeline"
            data-home-tr="Zaman Çizelgesi">
        Timeline
      </span>

      <span class="ip-home-description"
            data-home-en="Review, edit, arrange and add speech"
            data-home-tr="İnceleyin, düzenleyin ve konuşma ekleyin">
        Review, edit, arrange and add speech
      </span>

    </button>

    <button type="button"
            class="ip-home-tile"
            data-home-action="music">

      <span class="ip-home-arrow">
        ↗
      </span>

      <span class="ip-home-icon">

        <svg viewBox="0 0 48 48">

          <path d="M20 34V13l17-4v21M20 19l17-4">
          </path>

          <ellipse cx="14"
                   cy="35"
                   rx="6"
                   ry="4">
          </ellipse>

          <ellipse cx="31"
                   cy="31"
                   rx="6"
                   ry="4">
          </ellipse>

        </svg>

      </span>

      <span class="ip-home-title"
            data-home-en="Music"
            data-home-tr="Müzik">
        Music
      </span>

      <span class="ip-home-description"
            data-home-en="Choose or upload background music"
            data-home-tr="Arka plan müziği seçin veya yükleyin">
        Choose or upload background music
      </span>

    </button>

  </div>

  <footer class="ip-home-bottom">

    <div class="ip-home-utility">

      <button type="button"
              data-home-action="album">

        <span>
          ▣
        </span>

        <span data-home-en="Video Library"
              data-home-tr="Video Arşivi">
          Video Library
        </span>

      </button>

      <a href="https://t.me/IzyPost"
         target="_blank"
         rel="noopener noreferrer">

        <span>
          ✦
        </span>

        <span>
          Telegram
        </span>

      </a>

      <a href="mailto:info@aegeantek.tr">

        <span>
          ✉
        </span>

        <span>
          Email
        </span>

      </a>

      <div class="ip-home-company">

        <span data-home-en="Designed & Published by"
              data-home-tr="Tasarım ve Yayın">
          Designed & Published by
        </span>

        ·

        <a href="https://www.aegeantek.tr"
           target="_blank"
           rel="noopener noreferrer">
          Aegeantek
        </a>

      </div>

    </div>

    <button type="button"
            id="ipHomeCreateBtn"
            data-home-action="create">

      <svg viewBox="0 0 32 32">

        <path d="M16 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2 2-5zM25 18l1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3zM5 19h11v10H5zM9 22l4 2-4 2z">
        </path>

      </svg>

      <span data-home-en="Create Video"
            data-home-tr="Video Oluştur">
        Create Video
      </span>

    </button>

  </footer>

</section>

<!-- ***** 08 - HEADER ***** -->

<!-- Main brand and language control are now inside the workspace header -->

<!-- ***** 08AA - MAIN OPTION BUTTONS ***** -->
<div class="option-grid">

<button type="button"
        class="option-btn"
        id="contactCardBtn">
<img id="m1Btn"
src="/Assets/Icons/m1-en.png">
</button>

<button type="button"
        class="option-btn"
        id="outputSettingsBtn">
<img id="m2Btn"
src="/Assets/Icons/m2-en.png">
</button>

<label class="option-btn"
       id="choosePhotosBtn"
       for="photos">
<img id="m3Btn"
src="/Assets/Icons/m3-1-en.png">
</label>

<button type="button"
        class="option-btn"
        id="freePhotosBtn">
<img id="m32Btn"
src="/Assets/Icons/m3-2-en.png">
</button>

<div id="timelineCardBox">

  <div class="timeline-card-header">

    <div class="timeline-card-header-icon">
      <img src="/Assets/Images/ip-logo.png"
           alt="IzyPost Logo">
    </div>

    <div class="timeline-card-heading">

      <div id="timelineCardTitle">
        IzyPost
      </div>

      <div id="timelineCardSubtitle"
           class="timeline-card-subtitle">
        Professional Social Video Studio
      </div>

    </div>

    <div class="timeline-header-controls">

      <button type="button"
              id="timelineWorkspaceTemplatesBtn"
              class="timeline-header-template-btn">

        <span class="timeline-header-template-icon">
          ▣
        </span>

        <span data-home-en="Templates"
              data-home-tr="Şablonlar">
          Templates
        </span>

      </button>

      <button type="button"
              id="timelineWorkspaceAlbumBtn"
              class="timeline-header-template-btn">

        <span class="timeline-header-template-icon">
          ▶
        </span>

        <span data-home-en="Video Album"
              data-home-tr="Video Arşivi">
          Video Album
        </span>

      </button>

      <div class="lang"
           id="xLangBtn">
        🌐 TR
      </div>

      <div class="timeline-header-size-selector"
           id="timelineOutputSizeIndicator">

        <label class="timeline-header-size-option"
               title="4:5"
               aria-label="4:5">

          <input type="radio"
                 name="videoSize"
                 value="4:5"
                 checked>

          <span class="timeline-header-size-shape ratio-4-5">
          </span>

          <span class="timeline-header-size-check">
            ✓
          </span>

        </label>

        <label class="timeline-header-size-option"
               title="1:1"
               aria-label="1:1">

          <input type="radio"
                 name="videoSize"
                 value="1:1">

          <span class="timeline-header-size-shape ratio-1-1">
          </span>

          <span class="timeline-header-size-check">
            ✓
          </span>

        </label>

        <label class="timeline-header-size-option"
               title="9:16"
               aria-label="9:16">

          <input type="radio"
                 name="videoSize"
                 value="9:16">

          <span class="timeline-header-size-shape ratio-9-16">
          </span>

          <span class="timeline-header-size-check">
            ✓
          </span>

        </label>

        <label class="timeline-header-size-option"
               title="16:9"
               aria-label="16:9">

          <input type="radio"
                 name="videoSize"
                 value="16:9">

          <span class="timeline-header-size-shape ratio-16-9">
          </span>

          <span class="timeline-header-size-check">
            ✓
          </span>

        </label>

        <span id="timelineOutputShape"
              hidden>
        </span>

        <span id="timelineOutputRatio"
              hidden>
          4:5
        </span>

      </div>

    </div>

  </div>

  <nav class="timeline-workspace-menu"
       id="timelineWorkspaceMenu">

    <button type="button"
            id="timelineWorkspaceInformationBtn">

      <span class="timeline-workspace-menu-icon">
        👤
      </span>

      <span data-home-en="Information"
            data-home-tr="Bilgiler">
        Information
      </span>

    </button>


    <button type="button"
            id="timelineWorkspaceIntroBtn">

      <span class="timeline-workspace-menu-icon">
        ▶
      </span>

      <span data-home-en="Intro"
            data-home-tr="Başlangıç">
        Intro
      </span>

    </button>

    <button type="button"
            id="timelineWorkspaceOutroBtn">

      <span class="timeline-workspace-menu-icon">
        ■
      </span>

      <span data-home-en="Outro"
            data-home-tr="Bitiş">
        Outro
      </span>

    </button>

    <button type="button"
            id="timelineWorkspaceMusicBtn">

      <span class="timeline-workspace-menu-icon">
        ♪
      </span>

      <span data-home-en="Music"
            data-home-tr="Müzik">
        Music
      </span>

    </button>

    <button type="button"
            id="timelineWorkspaceDeviceMediaBtn">

      <span class="timeline-workspace-menu-icon">
        ＋
      </span>

      <span data-home-en="Your Media"
            data-home-tr="Medyanız">
        Your Media
      </span>

    </button>

    <button type="button"
            id="timelineWorkspaceFreeMediaBtn">

      <span class="timeline-workspace-menu-icon">
        ✦
      </span>

      <span data-home-en="Free Media"
            data-home-tr="Ücretsiz Medya">
        Free Media
      </span>

    </button>

    <button type="button"
            class="timeline-mobile-library-btn"
            id="timelineMobileTemplatesBtn"
            onclick="document.getElementById('timelineWorkspaceTemplatesBtn').click();">

      <span class="timeline-workspace-menu-icon">
        ▣
      </span>

      <span data-home-en="Templates"
            data-home-tr="Şablonlar">
        Templates
      </span>

    </button>

    <button type="button"
            class="timeline-mobile-library-btn"
            id="timelineMobileAlbumBtn"
            onclick="document.getElementById('timelineWorkspaceAlbumBtn').click();">

      <span class="timeline-workspace-menu-icon">
        ▶
      </span>

      <span data-home-en="Album"
            data-home-tr="Arşiv">
        Album
      </span>

    </button>

    <div class="timeline-motion-speed"
         id="timelineMotionSpeed">

      <div id="timelineTotalDuration">
        Total Video Time: 0s
      </div>

      <div class="timeline-motion-speed-title"
           id="timelineMotionSpeedTitle">
        Photo Motion Speed
      </div>

      <div class="timeline-motion-speed-options">

        <label class="timeline-motion-speed-option">

          <input type="radio"
                 name="transitionMode"
                 value="soft">

          <span id="timelineMotionSoftText">
            Soft
          </span>

          <span class="timeline-motion-check">
            ✓
          </span>

        </label>

        <label class="timeline-motion-speed-option">

          <input type="radio"
                 name="transitionMode"
                 value="normal"
                 checked>

          <span id="timelineMotionNormalText">
            Normal
          </span>

          <span class="timeline-motion-check">
            ✓
          </span>

        </label>

        <label class="timeline-motion-speed-option">

          <input type="radio"
                 name="transitionMode"
                 value="dynamic">

          <span id="timelineMotionDynamicText">
            Dynamic
          </span>

          <span class="timeline-motion-check">
            ✓
          </span>

        </label>

      </div>

    </div>

  </nav>

  <div style="display:none;">

    <input type="checkbox"
           id="introEnabledToggle"
           checked>

    <span id="xIntroEnabledText">
      Include Intro
    </span>

    <input type="checkbox"
           id="outroEnabledToggle"
           checked>

    <span id="xOutroEnabledText">
      Include Outro
    </span>

  </div>

  <div id="timelineCardToolbar">

    <button type="button"
        id="resetTimelineOnlyBtn">
  Reset & New Project
</button>

    <button type="button"
            id="previewTimelineBtn">
      Preview
    </button>

    <div id="selectedMusicLabel"
         class="timeline-selected-music">
    </div>

    <button type="button"
            id="editTimelineBtn"
            hidden>
      Edit
    </button>

    <button type="button"
            id="moveTimelineBtn"
            hidden>
      Swap
    </button>

    <button type="button"
            id="closeTimelineCardBtn">
      Create Video
    </button>

  </div>

  <div id="photoTextList"></div>

  <footer class="app-footer timeline-workspace-footer">

    <div class="timeline-footer-publisher">
      <span id="xFooterDesignedBy">
        Designed & Published by:
      </span>

      <strong>
        <a href="https://www.aegeantek.tr"
           target="_blank"
           rel="noopener noreferrer">
          Aegeantek
        </a>
      </strong>
    </div>

    <div class="timeline-footer-links">

      <a class="telegram-link"
         href="https://t.me/IzyPost"
         target="_blank"
         rel="noopener noreferrer">

        <img src="/Assets/Images/telegram.png"
             alt="Telegram">

        <span id="xTelegramContact">
          Telegram
        </span>

      </a>

      <a class="telegram-link"
         href="mailto:info@aegeantek.tr">

        <span class="timeline-footer-email-icon">
          ✉️
        </span>

        <span id="xEmailContact">
          Email
        </span>

      </a>

    </div>

  </footer>

</div>

<div id="photoPreviewBox">
  <div id="photoPreviewInner">

    <div id="timelineEditMediaDuration"
         class="timeline-edit-media-duration">

      <button type="button"
              id="timelineMediaDurationMinusBtn">
        −
      </button>

      <div id="timelineEditMediaDurationInfo"
           class="timeline-edit-media-duration-info">
        Media Duration: 10s
      </div>

      <button type="button"
              id="timelineMediaDurationPlusBtn">
        +
      </button>

    </div>

    <div id="timelineSpeechLiveDock">

  <div id="photoPreviewStage">

    <div id="photoPreviewFrame">
      <img id="photoPreviewImage" src="">

      <video id="photoPreviewVideo"
             class="preview-video-player"
             controls
             playsinline>
      </video>

      <div id="timelineSpeechPreviewText">
      </div>

    </div>

  </div>

  <div class="timeline-speech-live-controls">

    <div class="timeline-speech-live-size">

      <button type="button"
              id="timelineSpeechSmallerBtn">
        −
      </button>

      <div id="timelineSpeechSizeInfo">
        100%
      </div>

      <button type="button"
              id="timelineSpeechBiggerBtn">
        +
      </button>

    </div>

    <div class="timeline-speech-dpad"
         aria-label="Speech position">

      <button type="button"
              id="timelineSpeechUpBtn"
              class="timeline-speech-dpad-up">
        ↑
      </button>

      <button type="button"
              id="timelineSpeechLeftBtn"
              class="timeline-speech-dpad-left">
        ←
      </button>

      <div class="timeline-speech-dpad-center">
        •
      </div>

      <button type="button"
              id="timelineSpeechRightBtn"
              class="timeline-speech-dpad-right">
        →
      </button>

      <button type="button"
              id="timelineSpeechDownBtn"
              class="timeline-speech-dpad-down">
        ↓
      </button>

    </div>

    <div class="timeline-audio-mix-control">

      <button type="button"
              id="timelineAudioMixToggleBtn"
              class="timeline-audio-mix-toggle"
              aria-expanded="false">
        <span id="timelineAudioMixToggleLabel">
          🔊 Audio Mix
        </span>
      </button>

    </div>

    <button type="button"
            id="saveCropPhotoBtn"
            class="timeline-live-crop-btn">
      Crop
    </button>

    <div id="timelineAudioMixPanel"
         class="timeline-audio-mix-panel">

      <div class="timeline-audio-mix-row">

        <label id="timelineAiVolumeLabel"
               for="timelineAiVolumeRange">
          AI Voice
        </label>

        <input type="range"
               id="timelineAiVolumeRange"
               min="0"
               max="200"
               step="1"
               value="100">

        <output id="timelineAiVolumeValue"
                for="timelineAiVolumeRange">
          100%
        </output>

        <button type="button"
                id="timelineAiVolumeDefaultBtn"
                class="timeline-audio-default-btn">
          Default
        </button>

      </div>

      <div class="timeline-audio-mix-row">

        <label id="timelineVideoVolumeLabel"
               for="timelineVideoVolumeRange">
          Video Audio
        </label>

        <input type="range"
               id="timelineVideoVolumeRange"
               min="0"
               max="200"
               step="1"
               value="70">

        <output id="timelineVideoVolumeValue"
                for="timelineVideoVolumeRange">
          70%
        </output>

        <button type="button"
                id="timelineVideoVolumeDefaultBtn"
                class="timeline-audio-default-btn">
          Default
        </button>

      </div>

      <div class="timeline-audio-mix-row">

        <label id="timelineMusicVolumeLabel"
               for="timelineMusicVolumeRange">
          Music
        </label>

        <input type="range"
               id="timelineMusicVolumeRange"
               min="0"
               max="200"
               step="1"
               value="40">

        <output id="timelineMusicVolumeValue"
                for="timelineMusicVolumeRange">
          40%
        </output>

        <button type="button"
                id="timelineMusicVolumeDefaultBtn"
                class="timeline-audio-default-btn">
          Default
        </button>

      </div>

      <div class="timeline-audio-mix-row">

        <label id="timelineUploadedVolumeLabel"
               for="timelineUploadedVolumeRange">
          Uploaded Voice
        </label>

        <input type="range"
               id="timelineUploadedVolumeRange"
               min="0"
               max="200"
               step="1"
               value="100">

        <output id="timelineUploadedVolumeValue"
                for="timelineUploadedVolumeRange">
          100%
        </output>

        <button type="button"
                id="timelineUploadedVolumeDefaultBtn"
                class="timeline-audio-default-btn">
          Default
        </button>

      </div>

    </div>

  </div>

</div>

<div id="timelineTrimWorkspace">

  <div id="timelineVideoTrimBox"
       class="free-video-trim-box">

    <div id="timelineVideoTrimInfo"
         class="free-video-trim-info">
      Start: 0.0s / End: 0.0s
    </div>

    <div class="timeline-trim-label-row">
      <div id="timelineStartLabel">Start</div>
      <div id="timelineEndLabel">End</div>
    </div>

    <div id="timelineTrimRail"
         class="timeline-trim-rail">

      <div id="timelineTrimShadeLeft"
           class="timeline-trim-shade-left"></div>

      <div id="timelineTrimSelected"
           class="timeline-trim-selected"></div>

      <div id="timelineTrimShadeRight"
           class="timeline-trim-shade-right"></div>

      <input type="range"
             id="setTimelineVideoStartBtn"
             class="timeline-trim-range start"
             min="0"
             max="10"
             step="0.1"
             value="0">

      <input type="range"
             id="setTimelineVideoEndBtn"
             class="timeline-trim-range end"
             min="0"
             max="10"
             step="0.1"
             value="10">

    </div>

    <button type="button"
            id="saveTimelineVideoTrimBtn"
            style="
            width:100%;
            margin-top:8px;
            background:#ff8a00;">
      Save Trim
    </button>

  </div>

  <button type="button"
          id="timelineTrimPlayBtn"
          style="
          display:none;
          width:100%;
          margin-top:8px;
          background:#1565c0;">
    ▶ Play Trim
  </button>

  <div id="timelineVideoVisibleRange"
       style="
       margin-top:6px;
       color:#1565c0;
       font-size:13px;
       font-weight:900;
       text-align:center;">
  </div>

</div>

    <div id="timelineEditControls"
     style="
     margin-top:10px;
     padding:10px;
     border-radius:14px;
     background:rgba(21,101,192,.08);
     display:none;">

  <div class="timeline-speech-toolbar">

    <div id="timelineSpeechCurrentTime"
         class="timeline-speech-current-time">
      0.0s
    </div>

    <button type="button"
            id="addTimelineSpeechBtn"
            class="timeline-speech-add-btn">
      + Add Speech Here
    </button>

  </div>

  <div id="timelineSpeechOverview"
       class="timeline-speech-overview">

    <div class="timeline-speech-overview-time">

      <span>0s</span>

      <span id="timelineSpeechOverviewDuration">
        10s
      </span>

    </div>

    <div id="timelineSpeechOverviewRail"
         class="timeline-speech-overview-rail">
    </div>

  </div>

  <div id="timelineSpeechList"
       class="timeline-speech-list">
  </div>

  <div class="timeline-speech-time-row">

    <div id="timelineSpeechStartLabel"
         class="timeline-speech-time-label">
      Start
    </div>

    <input type="number"
           id="timelineSpeechStartInput"
           min="0"
           step="0.1"
           value="0">

    <div id="timelineSpeechDurationInfo"
         class="timeline-speech-duration-info">
    </div>

  </div>

  <div class="timeline-caption-color-row">

    <button type="button"
            id="timelineCaptionColorBtn"
            class="timeline-caption-color-btn"
            title="Speech Color">
    </button>

    <textarea id="timelineCaptionInput"
              rows="3"
              style="
              width:100%;
              padding:9px 10px;
              border-radius:10px;
              border:1px solid rgba(21,101,192,.25);
              font-family:Arial,sans-serif;
              font-size:13px;
              line-height:1.4;
              resize:none;"></textarea>

    <input type="color"
           id="timelineCaptionColorInput"
           class="timeline-caption-color-input"
           value="#ffffff">

    <div id="timelineSpeechColorPalette"
         class="timeline-speech-color-palette">

      <button type="button"
              class="timeline-speech-color-option"
              data-speech-color="#ffffff"
              style="background:#ffffff;">
      </button>

      <button type="button"
              class="timeline-speech-color-option"
              data-speech-color="#111111"
              style="background:#111111;">
      </button>

      <button type="button"
              class="timeline-speech-color-option"
              data-speech-color="#1565c0"
              style="background:#1565c0;">
      </button>

      <button type="button"
              class="timeline-speech-color-option"
              data-speech-color="#ff8a00"
              style="background:#ff8a00;">
      </button>

      <button type="button"
              class="timeline-speech-color-option"
              data-speech-color="#f44336"
              style="background:#f44336;">
      </button>

      <button type="button"
              class="timeline-speech-color-option"
              data-speech-color="#0b8f3a"
              style="background:#0b8f3a;">
      </button>

      <button type="button"
              class="timeline-speech-color-option"
              data-speech-color="#ffd600"
              style="background:#ffd600;">
      </button>

      <button type="button"
              class="timeline-speech-color-option"
              data-speech-color="#8e24aa"
              style="background:#8e24aa;">
      </button>

      <button type="button"
              class="timeline-speech-color-option"
              data-speech-color="#e91e63"
              style="background:#e91e63;">
      </button>

      <button type="button"
              class="timeline-speech-color-option"
              data-speech-color="#00bcd4"
              style="background:#00bcd4;">
      </button>

      <button type="button"
              id="timelineSpeechColorDoneBtn">
        Done
      </button>

    </div>

  </div>

  <div id="timelineCaptionCapacity"
       class="timeline-caption-capacity">
    0 / 80
  </div>

  <div class="timeline-speech-effect-box">

    <div class="timeline-speech-effect-field">

      <label id="timelineSpeechEffectLabel"
             class="timeline-speech-effect-label"
             for="timelineSpeechEffectSelect">
        Text Effect
      </label>

      <select id="timelineSpeechEffectSelect">

        <option value="zoom">
          Zoom In
        </option>

        <option value="blur">
          Blur Focus
        </option>

        <option value="bounce">
          Soft Bounce
        </option>

        <option value="rise">
          Rise Up
        </option>

        <option value="fade">
          Fade Only
        </option>

      </select>

    </div>

    <button type="button"
            id="previewTimelineSpeechEffectBtn">
      Preview Effect
    </button>

  </div>

  <button type="button"
          id="extendTimelineCaptionDurationBtn">
    Extend Scene
  </button>

  <div class="timeline-audio-source-box">

    <div id="timelineAudioSourceTitle"
         class="timeline-audio-source-title">
      Voice Source
    </div>

    <div class="timeline-audio-source-grid">

      <button type="button"
              id="timelineAudioSourceAiBtn"
              class="timeline-audio-source-btn selected"
              data-audio-source="ai">
        AI Voice
      </button>

      <button type="button"
              id="timelineAudioSourceUploadBtn"
              class="timeline-audio-source-btn"
              data-audio-source="upload">
        Upload Voice
      </button>


    </div>

    <div id="timelineAudioSourceAiPanel"
         class="timeline-audio-source-panel open">
    </div>

    <div id="timelineAudioSourceUploadPanel"
         class="timeline-audio-source-panel">

      <input type="file"
             id="timelineUploadedVoiceInput"
             accept="audio/*,.mp3,.m4a,.wav,.aac,.webm,.ogg"
             style="display:none;">

      <div class="timeline-upload-voice-actions">

        <button type="button"
                id="timelineChooseVoiceFileBtn">
          Choose Voice File
        </button>

        <button type="button"
                id="timelineRemoveVoiceFileBtn">
          Remove Voice
        </button>

      </div>

      <div id="timelineUploadedVoiceInfo">
        No voice file selected.
      </div>

      <audio id="timelineUploadedVoicePreview"
             controls
             preload="metadata">
      </audio>

    </div>


  </div>

  <div class="timeline-voice-action-row"
       id="timelineAiVoiceControls">

    <button type="button"
            id="timelineGenderBtn"
            style="background:#1565c0;">
      Voice
    </button>

    <button type="button"
            id="timelineVoiceBtn"
            style="background:#1565c0;">
      🔇
    </button>

  </div>

</div>

<div id="photoPreviewActions">

  <button type="button"
          id="deletePreviewPhotoBtn"
          style="display:none;">
    Delete
  </button>

  <button type="button"
          id="downloadPreviewMediaBtn"
          style="display:none;">
    Download
  </button>

  <button type="button"
          id="closePreviewPhotoBtn">
    Save & Close
  </button>

  <button type="button"
          id="cancelFreePreviewBtn"
          style="display:none;">
    Close
  </button>

</div>
  </div>
</div>

<button type="button"
        class="option-btn"
        id="textSettingsBtn">
<img id="m4Btn"
src="/Assets/Icons/m4-en.png">
</button>

<button type="button"
        class="option-btn"
        id="outroSettingsBtn">
<img id="m5Btn"
src="/Assets/Icons/m5-en.png">
</button>

<div style="
     grid-column:1 / span 2;
     text-align:center;
     ">

<button type="button"
        id="openTimelineCardBtn">
  Timeline
</button>

<div id="photoCount"
     style="
     font-size:15px;
     color:#1565c0;
     font-weight:700;
     margin-top:4px;
     text-align:center;">
</div>

</div>

<div
     style="
     grid-column:1 / span 2;
     text-align:center;
     ">

<button type="button"
        class="option-btn"
        id="musicSettingsBtn">
<img id="m7Btn"
src="/Assets/Icons/m7-en.png">
</button>


</div>

</div>

<!-- ***** 08AC - MEDIA PREPARING OVERLAY ***** -->
<div id="mediaPreparingBox">
  <div class="media-preparing-card">
    <div class="media-spinner"></div>
    <div id="mediaPreparingText">
      Preparing your media...<br>
      Please wait...
    </div>

    <div id="mediaPreparingPercent"
         style="
         margin-top:10px;
         font-size:24px;
         font-weight:900;
         color:#ff8a00;">
      0%
    </div>
  </div>
</div>


<!-- ***** LOCAL TEMPLATE LIBRARY ***** -->

<div id="templateLibraryBox">

  <div class="template-library-header">

    <div>

      <div id="templateLibraryTitle"
           class="template-library-title">
        My Templates
      </div>

      <div id="templateLibrarySubtitle"
           class="template-library-subtitle">
        Save and reopen your complete design without external media.
      </div>

    </div>

  </div>

  <div class="template-section-title"
       id="templateSaveSectionTitle">
    Save Current Design as Template
  </div>

  <div class="template-save-row">

    <input id="templateNameInput"
           type="text"
           maxlength="60"
           placeholder="Template name">

    <button type="button"
            id="saveCurrentTemplateBtn">
      Save Template
    </button>

  </div>

  <div class="template-section-title"
       id="templateLibrarySectionTitle">
    My Templates
  </div>

  <div id="templateList"></div>

  <div class="template-library-footer">

    <button type="button"
            id="closeTemplateLibraryBtn">
      Close
    </button>

  </div>

</div>


<!-- ***** 08AB - CONTACT OVERLAY ***** -->
<div id="contactOverlay"
     style="
     display:none;
     position:fixed;
     inset:0;
     background:rgba(15,47,95,.58);
     backdrop-filter:blur(3px);
     z-index:9998;
     ">
</div>

<!-- ***** 08B - CONTACT CARD BOX ***** -->
<div class="contact-card-box"
     id="contactCardBox">

  <div class="info-card-header">

    <div class="info-card-header-icon">

      <svg viewBox="0 0 48 48"
           aria-hidden="true">

        <circle cx="24"
                cy="16"
                r="7">
        </circle>

        <path d="M11 39c2-8 7-12 13-12s11 4 13 12M7 8h7M10.5 4.5v7">
        </path>

      </svg>

    </div>

    <div class="info-card-heading">

      <span class="info-card-heading-title">
        Information
      </span>

      <b id="xContactTitle">
        This information will be shown in your videos.
      </b>

    </div>

  </div>

  <div class="info-card-layout">

    <div class="info-card-fields">

      <div class="info-field-row">

        <label id="xNameLabel">
          Name
        </label>

        <input type="text"
               id="outroName"
               value="Full Name">

      </div>

      <div class="info-field-row">

        <label id="xProfessionLabel">
          Profession
        </label>

        <input type="text"
               id="outroProfession"
               value="Profession">

      </div>

      <div class="info-field-row">

        <label id="xPhoneLabel">
          Phone
        </label>

        <input type="text"
               id="outroPhone"
               value="Tel Number">

      </div>

      <div class="info-field-row">

        <label id="xContactLabel">
          Website / Instagram
        </label>

        <input type="text"
               id="outroContact"
               value="URL">

      </div>

    </div>

    <div class="info-card-visuals">

      <div class="info-visual-title">
        Photo & Logo
      </div>

      <input type="file"
             id="outroLogo"
             accept="image/*"
             style="display:none;">

      <input type="file"
             id="profilePhoto"
             accept="image/*"
             style="display:none;">

      <div class="info-preview-grid">

        <div class="info-preview-card">

          <div class="info-preview-title"
               id="xProfilePhotoPreviewTitle">
            Profile Photo
          </div>

          <img id="profilePhotoPreview"
               class="profile-photo-preview"
               src="">

          <div id="savedProfilePhotoInfo">
          </div>

        </div>

        <div class="info-preview-card">

          <div class="info-preview-title"
               id="xLogoPreviewTitle">
            Logo
          </div>

          <img id="logoPhotoPreview"
               class="logo-photo-preview"
               src="">

          <div id="savedLogoInfo">
          </div>

        </div>

      </div>

      <button type="button"
              id="chooseProfilePhotoBtn"
              class="info-upload-button">
        Choose Profile Photo
      </button>

      <div class="logo-action-grid">

        <button type="button"
                id="chooseLogoBtn">
          Choose Logo
        </button>

        <button type="button"
                id="createTextLogoBtn">
          Logo Maker
        </button>

      </div>

      <div id="xLogoNote">
        Recommended logo size: under 150 KB
      </div>

    </div>

  </div>

  <div class="info-card-actions">

    <button type="button"
            id="clearUserInfoBtn">
      Clear Information
    </button>

    <button type="button"
            id="saveUserInfoBtn">
      Save & Close
    </button>

  </div>

</div>

<!-- ***** 08BA - TEXT LOGO MAKER ***** -->
<div class="text-logo-box"
     id="textLogoMakerBox">

  <div class="logo-maker-header">

    <div class="logo-maker-header-icon">

      <svg viewBox="0 0 48 48"
           aria-hidden="true">

        <path d="M10 11h28v26H10z">
        </path>

        <path d="M16 30l8-15 8 15M19 25h10">
        </path>

        <path d="M36 7v8M32 11h8">
        </path>

      </svg>

    </div>

    <div class="logo-maker-heading">

      <b id="xTextLogoTitle">
        Text Logo Maker
      </b>

      <div class="logo-maker-subtitle">
        Create and customize your logo
      </div>

    </div>

  </div>

  <div class="logo-maker-layout">

    <div class="logo-maker-preview-panel">

      <div class="logo-maker-section-title">
        Live Preview
      </div>

      <div class="text-logo-name-grid">

        <label id="xLogoFirstNameLabel">
          First Name
        </label>

        <input type="text"
               id="logoFirstName"
               value="">

        <label id="xLogoLastNameLabel">
          Last Name
        </label>

        <input type="text"
               id="logoLastName"
               value="">

      </div>

      <div class="logo-live-desk">

        <canvas id="textLogoCanvas"
                width="600"
                height="600">
        </canvas>

        <div class="logo-control-card">

          <span id="xLogoControlNameLabel">
            Name
          </span>

          <button type="button"
                  id="logoFirstUpBtn">
            ▲
          </button>

          <button type="button"
                  id="logoFirstBiggerBtn">
            +
          </button>

          <button type="button"
                  id="logoFirstDownBtn">
            ▼
          </button>

          <button type="button"
                  id="logoFirstSmallerBtn">
            −
          </button>

        </div>

        <div class="logo-control-card">

          <span id="xLogoControlLastNameLabel">
            Last Name
          </span>

          <button type="button"
                  id="logoLastUpBtn">
            ▲
          </button>

          <button type="button"
                  id="logoLastBiggerBtn">
            +
          </button>

          <button type="button"
                  id="logoLastDownBtn">
            ▼
          </button>

          <button type="button"
                  id="logoLastSmallerBtn">
            −
          </button>

        </div>

        <div class="logo-control-card">

          <span id="xLogoControlFontLabel">
            Font
          </span>

          <div class="logo-font-name"
               id="logoFontName">
            Arial
          </div>

          <button type="button"
                  id="logoFontNextBtn">
            ↕
          </button>

          <button type="button"
                  id="logoSizeResetBtn">
            Reset
          </button>

        </div>

      </div>

      <div class="logo-preview-grid"
           id="logoPreviewGrid">
      </div>

    </div>

    <div class="logo-maker-controls-panel">

      <div class="logo-maker-section-title">
        Logo Style
      </div>

      <div class="logo-maker-control-group logo-text-style-group">

        <div class="logo-text-style-grid">

          <div class="logo-text-style-column">

            <label class="form-label"
                   id="xLogoCaseLabel">
              Text Case
            </label>

            <div class="logo-text-style-options">

              <button type="button"
                      class="logo-mini-btn active"
                      data-logo-case="all">
                ALL CAPS
              </button>

              <button type="button"
                      class="logo-mini-btn"
                      data-logo-case="title">
                Title Case
              </button>

              <button type="button"
                      class="logo-mini-btn"
                      data-logo-case="turkish">
                Turkish Style
              </button>

            </div>

          </div>

          <div class="logo-text-style-column">

            <label class="form-label"
                   id="xLogoGradientLabel">
              Gradient Direction
            </label>

            <div class="logo-text-style-options">

              <button type="button"
                      class="logo-mini-btn active"
                      data-logo-gradient="linear">
                Linear
              </button>

              <button type="button"
                      class="logo-mini-btn"
                      data-logo-gradient="angle">
                Angle
              </button>

              <button type="button"
                      class="logo-mini-btn"
                      data-logo-gradient="radial">
                Radial
              </button>

            </div>

          </div>

          <div class="logo-text-style-column">

            <label class="form-label"
                   id="xLogoTextColorLabel">
              Text Colors
            </label>

            <div class="logo-color-row"
                 id="logoTextColors">
            </div>

          </div>

        </div>

      </div>

      <div class="logo-fill-background-group">

        <div class="logo-fill-background-headings">

          <label class="form-label"
                 id="xLogoFrameColorLabel">
            Fill Colors
          </label>

          <span class="logo-fill-background-or">
            OR
          </span>

          <label class="form-label"
                 id="xLogoBackgroundLabel">
            Background Image
          </label>

        </div>

        <div class="logo-fill-background-content">

          <div class="logo-color-row"
               id="logoFrameColors">
          </div>

          <div class="logo-background-row">

            <button type="button"
                    id="logoBackgroundSearchBtn">
              Search Background
            </button>

            <button type="button"
                    id="logoBackgroundClearBtn">
              Clear
            </button>

          </div>

        </div>

      </div>

      <div class="text-logo-action-row">

        <button type="button"
                id="useTextLogoBtn">
          Use Logo
        </button>

        <button type="button"
                id="downloadTextLogoBtn">
          Download
        </button>

        <button type="button"
                id="closeTextLogoBtn">
          Close
        </button>

      </div>

    </div>

  </div>

</div>

<!-- ***** 08BB - FREE MEDIA MODULE ***** -->
<div class="free-photos-box"
     id="freePhotosBox">

  <div class="free-media-card-header">

    <div class="free-media-card-icon">

      <svg viewBox="0 0 48 48"
           aria-hidden="true">

        <circle cx="24"
                cy="24"
                r="15">
        </circle>

        <path d="M9 24h30M24 9c5 5 7 10 7 15s-2 10-7 15c-5-5-7-10-7-15s2-10 7-15">
        </path>

        <path d="M34 11l3 3 5-5">
        </path>

      </svg>

    </div>

    <div class="free-media-card-heading">

      <b id="freeMediaCardTitle">
        Free Media
      </b>

      <div id="freeMediaCardSubtitle"
           class="free-media-card-subtitle">
        Search and add free photos or videos
      </div>

    </div>

  </div>

  <div class="logo-background-card-header">

    <div class="logo-background-card-icon">

      <svg viewBox="0 0 48 48"
           aria-hidden="true">

        <rect x="8"
              y="10"
              width="32"
              height="28"
              rx="5">
        </rect>

        <circle cx="18"
                cy="19"
                r="4">
        </circle>

        <path d="M11 34l9-9 6 6 5-5 6 8">
        </path>

        <path d="M34 7v8M30 11h8">
        </path>

      </svg>

    </div>

    <div class="logo-background-card-heading">

      <b id="xFreePhotosTitle"
         class="popup-title">
        Free Media
      </b>

      <div id="logoBackgroundCardSubtitle"
           class="logo-background-card-subtitle">
        Choose a background texture for your logo
      </div>

    </div>

  </div>

  <div class="free-media-tabs">
    <button type="button"
            class="free-media-tab active"
            id="freePhotosTabBtn">
      Photos
    </button>

    <button type="button"
            class="free-media-tab"
            id="freeVideosTabBtn">
      Videos
    </button>
  </div>

  <div class="free-photos-search">
    <input type="text"
           id="freePhotoSearchInput"
           placeholder="Search free media">

    <button type="button" id="freePhotoSearchBtn">
      Search
    </button>
  </div>

  <div class="logo-bg-shortcuts" id="logoBgShortcuts">
    <button type="button" data-logo-bg-query="marble">Marble</button>
    <button type="button" data-logo-bg-query="gold texture">Gold</button>
    <button type="button" data-logo-bg-query="silver texture">Silver</button>
    <button type="button" data-logo-bg-query="wood texture">Wood</button>
    <button type="button" data-logo-bg-query="carbon fiber">Carbon</button>
    <button type="button" data-logo-bg-query="leather texture">Leather</button>
    <button type="button" data-logo-bg-query="fabric texture">Fabric</button>
    <button type="button" data-logo-bg-query="water texture">Water</button>
    <button type="button" data-logo-bg-query="sky background">Sky</button>
  </div>

  <div id="freePhotosStatus"
       style="font-size:13px;color:#52616f;margin-bottom:10px;">
  </div>
  <div id="freePhotoPreviewBox"
       style="
       display:none;
       margin:10px 0 14px;
       text-align:center;
       ">

    <div id="freePhotoCropFrame"
         style="
         width:100%;
         max-width:420px;
         aspect-ratio:16/9;
         margin:0 auto;
         overflow:hidden;
         border-radius:16px;
         background:#000;
         touch-action:none;
         cursor:grab;
         ">

      <img id="freePhotoPreviewImage"
           src=""
           style="
           width:100%;
           height:100%;
           object-fit:cover;
           object-position:center center;
           display:block;
           ">

      <video id="freeVideoPreviewPlayer"
             class="preview-video-player"
             controls
             playsinline
             muted>
      </video>

    </div>

    <div id="freeVideoTrimBox"
         class="free-video-trim-box">

      <div id="freeVideoTrimInfo"
           class="free-video-trim-info">
        Start: 0.0s / End: 8.0s
      </div>

      <div class="free-video-trim-row">
        <button type="button"
                id="setFreeVideoStartBtn"
                style="background:#1565c0;">
          Set Start
        </button>

        <button type="button"
                id="setFreeVideoEndBtn"
                style="background:#1565c0;">
          Set End
        </button>
      </div>

    </div>

    <div style="
         margin-top:10px;
         display:flex;
         gap:10px;
         justify-content:center;
         ">

      <button type="button"
              id="selectFreePreviewBtn"
              style="background:#ff8a00;">
        Select
      </button>

      <button type="button"
              id="closeFreePreviewBtn"
              style="background:#1565c0;">
        Close
      </button>

    </div>

  </div>
  <div class="free-photos-grid" id="freePhotosGrid">
    <div style="
grid-column:1/3;
text-align:center;
color:#52616f;
font-size:14px;
padding:40px 10px;
">
Search free media.
</div>
  </div>

  <div class="free-photos-actions">
    <button type="button"
        id="loadMoreFreePhotosBtn">
  Load More
</button>
    <button type="button" id="addFreePhotosBtn">
      Add Selected
    </button>

    <button type="button" id="closeFreePhotosBtn">
      Close
    </button>
  </div>

</div>

<!-- ***** 08C - OUTPUT SIZE ***** -->

<div class="popup-box"
     id="outputSettingsBox">

  <div class="output-size-header">

    <div class="output-size-header-icon">

      <svg viewBox="0 0 48 48"
           aria-hidden="true">

        <rect x="10"
              y="7"
              width="28"
              height="34"
              rx="5">
        </rect>

        <path d="M17 16h14M17 24h14M17 32h8M34 29l5 5-5 5">
        </path>

      </svg>

    </div>

    <div class="output-size-heading">

      <b id="xOutputTitle">
        Output Size
      </b>

      <div class="output-size-subtitle">
        Choose the best format for your platform
      </div>

    </div>

  </div>

  <div class="output-size-grid">

    <label class="output-size-option">

      <input type="radio"
             name="videoSizeLegacy"
             value="4:5"
             checked>

      <span class="output-size-check">
        ✓
      </span>

      <span class="output-size-shape-area">

        <span class="output-size-shape ratio-4-5">
        </span>

      </span>

      <span class="output-size-name">
        Instagram Reel
      </span>

      <span class="output-size-ratio">
        4:5
      </span>

      <span class="output-size-use">
        Feed portrait
      </span>

    </label>

    <label class="output-size-option">

      <input type="radio"
             name="videoSizeLegacy"
             value="1:1">

      <span class="output-size-check">
        ✓
      </span>

      <span class="output-size-shape-area">

        <span class="output-size-shape ratio-1-1">
        </span>

      </span>

      <span class="output-size-name">
        Instagram Post
      </span>

      <span class="output-size-ratio">
        1:1
      </span>

      <span class="output-size-use">
        Square post
      </span>

    </label>

    <label class="output-size-option">

      <input type="radio"
             name="videoSizeLegacy"
             value="9:16">

      <span class="output-size-check">
        ✓
      </span>

      <span class="output-size-shape-area">

        <span class="output-size-shape ratio-9-16">
        </span>

      </span>

      <span class="output-size-name">
        Story / Shorts
      </span>

      <span class="output-size-ratio">
        9:16
      </span>

      <span class="output-size-use">
        Full-screen vertical
      </span>

    </label>

    <label class="output-size-option">

      <input type="radio"
             name="videoSizeLegacy"
             value="16:9">

      <span class="output-size-check">
        ✓
      </span>

      <span class="output-size-shape-area">

        <span class="output-size-shape ratio-16-9">
        </span>

      </span>

      <span class="output-size-name">
        YouTube
      </span>

      <span class="output-size-ratio">
        16:9
      </span>

      <span class="output-size-use">
        Widescreen video
      </span>

    </label>

  </div>

  <div class="output-size-actions">

    <button type="button"
            id="saveOutputSettingsBtn">

      <span id="xSaveOutputBtn">
        Save Output Size
      </span>

    </button>

  </div>

</div>

<!-- ***** 08D - INTRO CONTENT ***** -->
<div class="popup-box"
     id="textSettingsBox">

  <div class="intro-card-header">

    <div class="intro-card-header-icon">

      <svg viewBox="0 0 48 48"
           aria-hidden="true">

        <rect x="9"
              y="12"
              width="30"
              height="25"
              rx="5">
        </rect>

        <path d="M18 8l4 4M30 8l-4 4M20 20l10 5-10 5z">
        </path>

      </svg>

    </div>

    <div class="intro-card-heading">

      <b id="xTextTitle">
        Intro Design
      </b>

      <div id="introCardSubtitle"
           class="intro-card-subtitle">
        Create the opening cover, text, layout and frame for your video
      </div>

      <div class="fixed-card-duration-row compact intro-duration-top">

        <div id="xIntroDurationLabel"
             class="fixed-card-duration-label">
          Intro Duration
        </div>

        <button type="button"
                id="introDurationMinusBtn"
                class="fixed-card-duration-btn">
          −
        </button>

        <div id="introDurationValue"
             class="fixed-card-duration-value">
          5s
        </div>

        <button type="button"
                id="introDurationPlusBtn"
                class="fixed-card-duration-btn">
          +
        </button>

      </div>

    </div>

  </div>

  <div class="intro-top-grid">

    <div class="intro-copy-panel">

      <div class="intro-text-field-grid">

    <label id="xIntroTitleLabel"
           class="form-label"
           style="margin:0;">
      Title
    </label>

    <button type="button"
            id="introTitleColorBtn"
            class="intro-text-color-trigger"
            title="Title Color">
    </button>

    <textarea
      id="introTitle"
      rows="1"
      style="margin:0;"
    >Post Title</textarea>

    <label id="xIntroSubtitleLabel"
           class="form-label"
           style="margin:0;">
      Subtitle
    </label>

    <button type="button"
            id="introSubtitleColorBtn"
            class="intro-text-color-trigger"
            title="Subtitle Color">
    </button>

    <textarea
      id="introSubtitle"
      rows="1"
      style="margin:0;"
    >Short subtitle</textarea>

    <div id="introTextColorPalette"
         class="intro-text-color-palette">

      <button type="button"
              class="intro-text-color-option"
              data-intro-text-color="#ffffff"
              style="background:#ffffff;">
      </button>

      <button type="button"
              class="intro-text-color-option"
              data-intro-text-color="#111111"
              style="background:#111111;">
      </button>

      <button type="button"
              class="intro-text-color-option"
              data-intro-text-color="#1565c0"
              style="background:#1565c0;">
      </button>

      <button type="button"
              class="intro-text-color-option"
              data-intro-text-color="#ff8a00"
              style="background:#ff8a00;">
      </button>

      <button type="button"
              class="intro-text-color-option"
              data-intro-text-color="#f44336"
              style="background:#f44336;">
      </button>

      <button type="button"
              class="intro-text-color-option"
              data-intro-text-color="#0b8f3a"
              style="background:#0b8f3a;">
      </button>

      <button type="button"
              class="intro-text-color-option"
              data-intro-text-color="#ffd600"
              style="background:#ffd600;">
      </button>

      <button type="button"
              class="intro-text-color-option"
              data-intro-text-color="#8e24aa"
              style="background:#8e24aa;">
      </button>

      <button type="button"
              class="intro-text-color-option"
              data-intro-text-color="#e91e63"
              style="background:#e91e63;">
      </button>

      <button type="button"
              class="intro-text-color-option"
              data-intro-text-color="#00bcd4"
              style="background:#00bcd4;">
      </button>

    </div>

      </div>

    </div>

    <div class="intro-cover-panel">

  <input type="file"
         id="introCoverImage"
         accept="image/*"
         style="display:none;">

  <div class="intro-cover-row">

    <button type="button"
            id="chooseIntroCoverBtn"
            style="margin:0;">
      Choose Cover Image
    </button>

    <img id="introCoverPreview"
         src=""
         style="
         display:none;
         width:120px;
         height:120px;
         margin:0;
         border-radius:50%;
         object-fit:cover;
         border:3px solid #1565c0;">

  </div>

  <div id="savedIntroCoverInfo"
       style="display:none;">
  </div>

    </div>

  </div>

  <div class="intro-layout-frame-workspace">

    <div class="intro-layout-workspace-main">

      <div class="intro-layout-primary-actions">

        <button type="button"
                id="changeIntroPreviewCoverBtn">
          Choose / Change Image
        </button>

        <button type="button"
                id="removeIntroPreviewCoverBtn">
          Remove Image
        </button>

      </div>

      <div class="intro-layout-title"
           id="xIntroLayoutTitle">
        Choose Intro Layout
      </div>

      <div class="intro-layout-grid"
           id="introLayoutGrid">

        <button type="button"
                class="intro-layout-btn selected"
                data-intro-layout="layout-1">

          <div class="intro-layout-preview">
            <div class="intro-layout-photo"></div>
            <div class="intro-layout-logo"></div>
            <div class="intro-layout-text text-left"></div>
          </div>

          <span class="intro-layout-name">1</span>
        </button>

        <button type="button"
                class="intro-layout-btn"
                data-intro-layout="layout-2">

          <div class="intro-layout-preview">
            <div class="intro-layout-photo"></div>
            <div class="intro-layout-logo"></div>
            <div class="intro-layout-text text-center"></div>
          </div>

          <span class="intro-layout-name">2</span>
        </button>

        <button type="button"
                class="intro-layout-btn"
                data-intro-layout="layout-3">

          <div class="intro-layout-preview">
            <div class="intro-layout-photo"></div>
            <div class="intro-layout-logo"></div>
            <div class="intro-layout-text text-left"></div>
          </div>

          <span class="intro-layout-name">3</span>
        </button>

        <button type="button"
                class="intro-layout-btn"
                data-intro-layout="layout-4">

          <div class="intro-layout-preview">
            <div class="intro-layout-photo"></div>
            <div class="intro-layout-logo"></div>
            <div class="intro-layout-text text-center"></div>
          </div>

          <span class="intro-layout-name">4</span>
        </button>

        <button type="button"
                class="intro-layout-btn"
                data-intro-layout="layout-5">

          <div class="intro-layout-preview">
            <div class="intro-layout-photo"></div>
            <div class="intro-layout-logo"></div>
            <div class="intro-layout-text text-center"></div>
          </div>

          <span class="intro-layout-name">5</span>
        </button>

        <button type="button"
                class="intro-layout-btn"
                data-intro-layout="layout-6">

          <div class="intro-layout-preview">
            <div class="intro-layout-photo"></div>
            <div class="intro-layout-logo"></div>
            <div class="intro-layout-text text-center"></div>
          </div>

          <span class="intro-layout-name">6</span>
        </button>

      </div>

    </div>

    <div class="intro-frame-color-workspace">

      <div id="xIntroFrameColorLabel"
           class="intro-frame-color-title">
        Frame Color
      </div>

      <div class="intro-frame-color-grid">

        <button type="button" class="intro-frame-color" data-color="blue">
          <span style="background:linear-gradient(135deg,#061733,#8fb4ff,#123a7a);"></span>
        </button>

        <button type="button" class="intro-frame-color" data-color="silver">
          <span style="background:linear-gradient(135deg,#222,#ffffff,#777);"></span>
        </button>

        <button type="button" class="intro-frame-color" data-color="gold">
          <span style="background:linear-gradient(135deg,#3a2500,#ffd86b,#8a5a00);"></span>
        </button>

        <button type="button" class="intro-frame-color" data-color="rose">
          <span style="background:linear-gradient(135deg,#4a1d14,#ffc2ad,#a45a48);"></span>
        </button>

        <button type="button" class="intro-frame-color" data-color="red">
          <span style="background:linear-gradient(135deg,#3a0505,#ff7777,#9b111e);"></span>
        </button>

        <button type="button" class="intro-frame-color" data-color="green">
          <span style="background:linear-gradient(135deg,#052b12,#7dff9d,#0b6b2a);"></span>
        </button>

        <button type="button" class="intro-frame-color" data-color="purple">
          <span style="background:linear-gradient(135deg,#21003d,#c77dff,#5b168f);"></span>
        </button>

        <button type="button" class="intro-frame-color" data-color="teal">
          <span style="background:linear-gradient(135deg,#003336,#75ffff,#008a91);"></span>
        </button>

        <button type="button" class="intro-frame-color" data-color="bronze">
          <span style="background:linear-gradient(135deg,#3b1d00,#ffb45c,#8a4b12);"></span>
        </button>

        <button type="button" class="intro-frame-color" data-color="black">
          <span style="background:linear-gradient(135deg,#050505,#666,#111);"></span>
        </button>

      </div>

    </div>

    <div class="intro-frame-option-grid">

      <label class="intro-frame-toggle-row">

        <input type="checkbox"
               id="introFrameToggle"
               checked>

        <span id="xIntroFrameToggleText">
          Show decorative frame
        </span>

      </label>

      <div class="intro-frame-thickness-line">

        <div class="intro-frame-thickness-label"
             id="xIntroFrameThicknessLabel">
          Frame Thickness
        </div>

        <div class="intro-frame-thickness-row">

          <button type="button"
                  class="intro-frame-thickness-btn selected"
                  data-thickness="thick"
                  id="introFrameThickBtn">
            Thick
          </button>

          <button type="button"
                  class="intro-frame-thickness-btn"
                  data-thickness="normal"
                  id="introFrameNormalBtn">
            Normal
          </button>

          <button type="button"
                  class="intro-frame-thickness-btn"
                  data-thickness="thin"
                  id="introFrameThinBtn">
            Thin
          </button>

        </div>

      </div>

    </div>

  </div>

  <button type="button"
          id="previewIntroFrameBtn"
          style="display:none;">
    Preview Intro
  </button>


<div class="intro-card-actions">

<button type="button"
        id="saveTextSettingsBtn">
  <span id="xSaveTextBtn">
    Save & Close
  </span>
</button>

<button type="button"
        id="downloadIntroPreviewBtn">
  Download
</button>

<button type="button"
        id="clearIntroSettingsBtn">
  Clear Intro
</button>

</div>
</div>

<!-- ***** 08DA - INTRO FRAME PREVIEW ***** -->
<div class="intro-preview-box" id="introPreviewBox">

  <div class="intro-preview-header">

    <div class="intro-preview-header-icon">

      <svg viewBox="0 0 24 24"
           aria-hidden="true">

        <rect x="3"
              y="4"
              width="18"
              height="16"
              rx="3">
        </rect>

        <path d="M8 2v4"></path>
        <path d="M16 2v4"></path>
        <path d="M8 10l6 3-6 3z"></path>

      </svg>

    </div>

    <div class="intro-preview-heading">

      <b id="xIntroPreviewTitle">
        Intro Preview
      </b>

      <div id="introPreviewSubtitle"
           class="intro-preview-subtitle">
        Review and resize the elements of your opening cover
      </div>

    </div>

  </div>

  <div class="intro-preview-layout">

    <div class="intro-preview-canvas-panel">

      <canvas id="introPreviewCanvas"
              width="1080"
              height="1920">
      </canvas>

    </div>

    <div class="intro-preview-controls-panel">

      <div class="intro-preview-size-panel">

    <div class="intro-preview-size-row">

      <div class="intro-preview-size-label"
           id="xIntroTitleSizeLabel">
        Title
      </div>

      <button type="button"
              id="introTitleBiggerBtn">
        +
      </button>

      <button type="button"
              id="introTitleSmallerBtn">
        −
      </button>

      <div class="intro-preview-size-value"
           id="introTitleSizeValue">
      </div>

    </div>

    <div class="intro-preview-size-row">

      <div class="intro-preview-size-label"
           id="xIntroSubtitleSizeLabel">
        Subtitle
      </div>

      <button type="button"
              id="introSubtitleBiggerBtn">
        +
      </button>

      <button type="button"
              id="introSubtitleSmallerBtn">
        −
      </button>

      <div class="intro-preview-size-value"
           id="introSubtitleSizeValue">
      </div>

    </div>

    <div class="intro-preview-size-row">

      <div class="intro-preview-size-label"
           id="xIntroPhotoSizeLabel">
        Photo
      </div>

      <button type="button"
              id="introPhotoBiggerBtn">
        +
      </button>

      <button type="button"
              id="introPhotoSmallerBtn">
        −
      </button>

      <div class="intro-preview-size-value"
           id="introPhotoSizeValue">
      </div>

    </div>

    <div class="intro-preview-size-row">

      <div class="intro-preview-size-label"
           id="xIntroLogoSizeLabel">
        Logo
      </div>

      <button type="button"
              id="introLogoBiggerBtn">
        +
      </button>

      <button type="button"
              id="introLogoSmallerBtn">
        −
      </button>

      <div class="intro-preview-size-value"
           id="introLogoSizeValue">
      </div>

    </div>

      </div>


    </div>

  </div>

</div>

<!-- ***** 08E - OUTRO CONTENT ***** -->
<div class="popup-box"
     id="outroSettingsBox">

  <div class="outro-card-header">

    <div class="outro-card-header-icon">

      <svg viewBox="0 0 48 48"
           aria-hidden="true">

        <rect x="9"
              y="11"
              width="30"
              height="26"
              rx="5">
        </rect>

        <path d="M18 19h12M18 25h12M18 31h8">
        </path>

        <path d="M33 7v8M29 11h8">
        </path>

      </svg>

    </div>

    <div class="outro-card-heading">

      <b id="xOutroTitle">
        Outro Design
      </b>

      <div id="xOutroNote"
           class="outro-card-subtitle">
        Add the final title, identity and contact information shown at the end of your video
      </div>

      <div class="fixed-card-duration-row compact outro-duration-top">

        <div id="xOutroDurationLabel"
             class="fixed-card-duration-label">
          Outro Duration
        </div>

        <button type="button"
                id="outroDurationMinusBtn"
                class="fixed-card-duration-btn">
          −
        </button>

        <div id="outroDurationValue"
             class="fixed-card-duration-value">
          5.0s
        </div>

        <button type="button"
                id="outroDurationPlusBtn"
                class="fixed-card-duration-btn">
          +
        </button>

      </div>

    </div>

  </div>

  <div id="outroInformationNotice"
       class="outro-information-notice">

    <span class="outro-information-icon"
          aria-hidden="true">
      ℹ
    </span>

    <span>
      These details are imported from the Information card.
      To edit them, return to the Information card.
    </span>

  </div>

  <div class="outro-fields-grid">

    <div class="outro-field-group">

      <label id="xOutroMainTitleLabel"
             class="form-label">
        Title
      </label>

      <input type="text"
             id="videoOutroTitle"
             class="outro-info-display"
             readonly
             tabindex="-1">

    </div>

    <div class="outro-field-group">

      <label id="xOutroNameLabel"
             class="form-label">
        Name
      </label>

      <input type="text"
             id="videoOutroName"
             class="outro-info-display"
             readonly
             tabindex="-1">

    </div>

    <div class="outro-field-group">

      <label id="xOutroProfessionLabel"
             class="form-label">
        Profession
      </label>

      <input type="text"
             id="videoOutroProfession"
             class="outro-info-display"
             readonly
             tabindex="-1">

    </div>

    <div class="outro-field-group">

      <label id="xOutroContactLabel"
             class="form-label">
        Website / Instagram
      </label>

      <input type="text"
             id="videoOutroContact"
             class="outro-info-display"
             readonly
             tabindex="-1">

    </div>

  </div>

  <div class="outro-card-actions">

    <button type="button"
            id="editOutroInformationBtn">

      <span id="xEditOutroInformationBtn">
        Edit Information
      </span>

    </button>

    <button type="button"
            id="saveOutroSettingsBtn">

      <span id="xSaveOutroBtn">
        Save & Close
      </span>

    </button>

  </div>

</div>

  <!-- ***** 09 - PHOTO INPUT ***** -->
  <input type="file"
       id="photos"
       accept="image/*,video/*"
       multiple
       onchange="updateSelectedPhotosCounter()"
       style="
         position:absolute;
         width:1px;
         height:1px;
         opacity:0;
         pointer-events:none;
       ">


<div class="photo-arrange-bar" id="photoArrangeBar">

  <button type="button" id="arrangePhotosBtn">
    ↕ Move
  </button>

  <button type="button" id="photoTimeBtn">
    ⏱ Time
  </button>

  <button type="button" id="transitionBtn">
    ✨ Motion
  </button>

</div>

<div id="arrangeToolbar">

  <div id="arrangeTitle">
    Move photos
  </div>

  <button type="button" id="doneArrangeBtn">
    Done
  </button>

</div>

<div id="timeModeNote">
  Default duration for each photo is 10 seconds. You can change it.
</div>

<div class="popup-box"
     id="transitionBox"
     style="display:none;">

  <b id="xTransitionTitle"
     class="popup-title">
    Motion
  </b>

  <button type="button"
          id="saveTransitionBtn">
    <span id="xSaveTransitionBtn">
      Save Motion
    </span>
  </button>

</div>
  <div class="popup-box" id="musicSettingsBox">

    <div class="music-card-header">

      <div class="music-card-header-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24">
          <path d="M9 18V5l11-2v13"></path>
          <circle cx="6" cy="18" r="3"></circle>
          <circle cx="17" cy="16" r="3"></circle>
        </svg>
      </div>

      <div class="music-card-heading">
        <b id="xMusicTitle" class="popup-title">Music</b>

        <div id="xMusicNote" class="music-card-subtitle">
          Preview and select an instrumental music.
        </div>
      </div>

    </div>

    <div class="music-card-content">

      <div class="music-preview-panel">

        <audio id="musicPreviewAudio" controls></audio>

        <div id="selectedMusicInfo"></div>

      </div>

      <div class="music-choice-grid">

        <div class="music-choice-col">

          <label id="xVahidMusicLabel">
            By Vahid Nazemi
          </label>

          <select id="vahidMusicSelect">
            <option value="">Select music</option>
            <option value="/Music/Aging.mp3" data-name="Aging">Aging</option>
            <option value="/Music/CanBe.mp3" data-name="Can Be">Can Be</option>
            <option value="/Music/Destiny.mp3" data-name="Destiny">Destiny</option>
            <option value="/Music/Discovery.mp3" data-name="Discovery">Discovery</option>
            <option value="/Music/Disgrace.mp3" data-name="Disgrace">Disgrace</option>
            <option value="/Music/Doubt.mp3" data-name="Doubt">Doubt</option>
            <option value="/Music/Gift.mp3" data-name="Gift">Gift</option>
            <option value="/Music/Human.mp3" data-name="Human">Human</option>
            <option value="/Music/King.mp3" data-name="King">King</option>
            <option value="/Music/Landscape.mp3" data-name="Landscape">Landscape</option>
            <option value="/Music/Migrant.mp3" data-name="Migrant">Migrant</option>
            <option value="/Music/Ocean.mp3" data-name="Ocean">Ocean</option>
            <option value="/Music/Passed.mp3" data-name="Passed">Passed</option>
            <option value="/Music/Spectacular.mp3" data-name="Spectacular">Spectacular</option>
            <option value="/Music/Spin.mp3" data-name="Spin">Spin</option>
            <option value="/Music/Start.mp3" data-name="Start">Start</option>
            <option value="/Music/Tale.mp3" data-name="Tale">Tale</option>
            <option value="/Music/Unstable.mp3" data-name="Unstable">Unstable</option>
            <option value="/Music/Wish.mp3" data-name="Wish">Wish</option>
            <option value="/Music/World.mp3" data-name="World">World</option>
          </select>

        </div>

        <div class="music-choice-col">

          <label id="xUserMusicLabel">
            Your Music
          </label>

          <input
            type="file"
            id="userMusicFile"
            accept="audio/*"
            style="display:none;">

          <button type="button" id="chooseUserMusicBtn">
            Choose
          </button>

        </div>

      </div>

    </div>

    <div class="music-action-row">

      <button type="button" id="addMusicBtn">
        Add Music
      </button>

      <button type="button" id="removeMusicBtn">
        Remove Music
      </button>

      <button type="button" id="closeMusicBtn">
        Close
      </button>

    </div>

  </div>

  <!-- ***** 10 - CREATE BUTTON ***** -->
  <button id="createVideoBtn"
          onclick="guardedCreateVideo()">

    <img id="m6Btn"
         src="/Assets/Icons/m6-en.png"
         style="
         width:100%;
         max-width:200px;
         height:auto;
         display:block;
         margin:0 auto;">

  </button>

  <button type="button"
          id="viewLastVideoBtn">
    Video Album
  </button>

  <!-- ***** 10A - VIDEO ALBUM CARD ***** -->

  <div id="videoAlbumCard">

    <div id="videoAlbumTitle">
      Video Album
    </div>

    <div id="videoAlbumList">
    </div>

    <div id="videoAlbumFooter">

      <button type="button"
              id="deleteSelectedVideosBtn">
        Delete Selected
      </button>

      <button type="button"
              id="closeVideoAlbumBtn">
        Close
      </button>

    </div>

  </div>

  <!-- ***** 10A - FULL TIMELINE LIVE PREVIEW ***** -->

  <div id="timelineLivePreviewCard">

    <div id="timelineLivePreviewTitle"
         class="timeline-live-preview-title">
      Video Preview
    </div>

    <div class="timeline-live-preview-workspace">

      <div class="timeline-live-preview-left">

        <div id="timelineLivePreviewStage">

      <canvas id="timelineLivePreviewCanvas"
              width="1080"
              height="1350">
      </canvas>

    </div>

    <div id="timelineLivePreviewStatus">
      Ready to preview
    </div>

      </div>

      <div class="timeline-live-preview-right">

        <div id="timelineLivePreviewAudioMixHost"
             class="timeline-live-preview-audio-mix-host">
        </div>

        <div id="timelineLivePreviewTransport"
             class="timeline-live-preview-transport">

          <input type="range"
                 id="timelineLivePreviewSeek"
                 min="0"
                 max="0"
                 step="0.1"
                 value="0">

          <div class="timeline-live-preview-transport-row">

            <button type="button"
                    id="timelineLivePreviewPlayPauseBtn"
                    class="timeline-preview-main-play"
                    aria-label="Play">
              <span class="timeline-preview-play-icon">▶</span>
            </button>

            <div id="timelineLivePreviewTime"
                 class="timeline-live-preview-time">
              00:00 / 00:00
            </div>

          </div>

        </div>

        <div class="timeline-live-preview-actions">

          <button type="button"
                  id="stopTimelineLivePreviewBtn">
            Stop
          </button>

          <button type="button"
                  id="closeTimelineLivePreviewBtn">
            Close
          </button>

        </div>

      </div>

    </div>

  </div>

  <!-- ***** 10B - VIDEO BUILD AND RESULT CARD ***** -->

  <div id="videoBuildCard">

    <div id="videoBuildTitle">
      Creating Video
    </div>

    <div id="buildingBox"
         style="
         display:none;
         margin-top:20px;
         color:#666;">

      <div style="
           font-size:15px;
           margin-bottom:10px;">
        🎬 Your video is being created...
      </div>

      <div style="
           width:100%;
           height:10px;
           background:#e6e9f0;
           border-radius:20px;
           overflow:hidden;">

        <div id="progressBar"
             style="
             width:0%;
             height:100%;
             background:#ff8a00;
             border-radius:20px;">
        </div>

      </div>

      <div id="progressText"
           style="
           font-size:13px;
           margin-top:8px;">
        0%
      </div>

      <button type="button"
              id="cancelVideoBuildBtn">
        Cancel
      </button>

    </div>

    <video id="preview"
           controls
           playsinline>
    </video>

    <div id="videoBuildActions">

      <a id="download"
         style="display:none;">
        Download Video
      </a>

      <button type="button"
              id="closeVideoBuildCardBtn">
        Close
      </button>

    </div>

  </div>

  <!-- ***** 11 - CANVAS ***** -->

  <canvas id="canvas"
          width="1080"
          height="1920"
          style="display:none;">
  </canvas>


<script>

/* ***** 12B - AUTO CACHE BUSTER ***** */

const ipCacheVersion =
  new Date()
    .toISOString()
    .replace(/[-:.TZ]/g, "");

function ipNoCache(path) {
  return path + "?v=" + ipCacheVersion;
}

function refreshStaticAssetsCache() {

  document
    .querySelectorAll('img[src^="/Assets/"], audio source[src^="/songs/"]')
    .forEach(function (el) {

      const src =
        el.getAttribute("src");

      if (!src) return;

      el.setAttribute(
        "src",
        ipNoCache(src.split("?")[0])
      );

    });

}

/* ***** 13 - ELEMENT REFERENCES ***** */
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const photosInput = document.getElementById("photos");
const preview = document.getElementById("preview");
const download = document.getElementById("download");
const buildingBox = document.getElementById("buildingBox");
const progressBar = document.getElementById("progressBar");
const progressText = document.getElementById("progressText");
const introTitle = document.getElementById("introTitle");
const introSubtitle = document.getElementById("introSubtitle");
const introTitleColorBtn = document.getElementById("introTitleColorBtn");
const introSubtitleColorBtn = document.getElementById("introSubtitleColorBtn");
const introTextColorPalette = document.getElementById("introTextColorPalette");
const introCoverImage = document.getElementById("introCoverImage");
const chooseIntroCoverBtn = document.getElementById("chooseIntroCoverBtn");
const savedIntroCoverInfo = document.getElementById("savedIntroCoverInfo");
const introCoverPreview = document.getElementById("introCoverPreview");
const previewIntroFrameBtn = document.getElementById("previewIntroFrameBtn");
const introPreviewBox = document.getElementById("introPreviewBox");
const introPreviewCanvas = document.getElementById("introPreviewCanvas");
const introPreviewCtx = introPreviewCanvas.getContext("2d");
const closeIntroPreviewBtn =
  document.getElementById(
    "closeIntroPreviewBtn"
  );

const downloadIntroPreviewBtn =
  document.getElementById(
    "downloadIntroPreviewBtn"
  );

const changeIntroPreviewCoverBtn =
  document.getElementById(
    "changeIntroPreviewCoverBtn"
  );

const removeIntroPreviewCoverBtn =
  document.getElementById(
    "removeIntroPreviewCoverBtn"
  );

const xIntroPreviewTitle =
  document.getElementById(
    "xIntroPreviewTitle"
  );

const introPreviewSubtitle =
  document.getElementById("introPreviewSubtitle");

/* ***** VERSION 314 - UNIFIED INTRO WORKSPACE ***** */

let introLivePreviewTimer = null;

function scheduleIntroLivePreview() {

  clearTimeout(introLivePreviewTimer);

  introLivePreviewTimer =
    setTimeout(function () {

      if (
        document.body.classList.contains(
          "ip-intro-card-active"
        ) &&
        getIntroPreviewSourceImage()
      ) {

        previewIntroFrameBtn.click();

      }

    }, 90);

}

function ensureUnifiedIntroWorkspace() {

  let toolsColumn =
    document.getElementById(
      "introUnifiedTools"
    );

  const introHeader =
    textSettingsBox.querySelector(
      ".intro-card-header"
    );

  if (!toolsColumn) {

    toolsColumn =
      document.createElement("div");

    toolsColumn.id =
      "introUnifiedTools";

    Array.from(
      textSettingsBox.children
    ).forEach(function (child) {

      if (
        child !== introHeader &&
        child !== introPreviewBox
      ) {

        toolsColumn.appendChild(
          child
        );

      }

    });

    textSettingsBox.appendChild(
      toolsColumn
    );

  }

  let introHeaderLeft =
    document.getElementById(
      "introHeaderLeft"
    );

  if (!introHeaderLeft) {

    introHeaderLeft =
      document.createElement("div");

    introHeaderLeft.id =
      "introHeaderLeft";

    const headerIcon =
      introHeader.querySelector(
        ".intro-card-header-icon"
      );

    const headerHeading =
      introHeader.querySelector(
        ".intro-card-heading"
      );

    introHeaderLeft.appendChild(
      headerIcon
    );

    introHeaderLeft.appendChild(
      headerHeading
    );

    introHeader.prepend(
      introHeaderLeft
    );

  }

  const introCopyPanel =
    textSettingsBox.querySelector(
      ".intro-copy-panel"
    );

  if (
    introCopyPanel &&
    introCopyPanel.parentElement !==
      introHeader
  ) {

    introHeader.appendChild(
      introCopyPanel
    );

  }

  if (
    introPreviewBox.parentElement !==
    textSettingsBox
  ) {

    textSettingsBox.appendChild(
      introPreviewBox
    );

  }

  const introSizeControls =
    introPreviewBox.querySelector(
      ".intro-preview-controls-panel"
    );

  const introFinalActions =
    toolsColumn.querySelector(
      ".intro-card-actions"
    );

  if (
    introSizeControls &&
    introFinalActions &&
    introSizeControls.parentElement !==
      toolsColumn
  ) {

    toolsColumn.insertBefore(
      introSizeControls,
      introFinalActions
    );

  }

  introPreviewBox.style.display =
    "block";

  if (
    textSettingsBox.dataset
      .introLiveBound !== "yes"
  ) {

    introTitle.addEventListener(
      "input",
      scheduleIntroLivePreview
    );

    introSubtitle.addEventListener(
      "input",
      scheduleIntroLivePreview
    );

    introFrameToggle.addEventListener(
      "change",
      scheduleIntroLivePreview
    );

    textSettingsBox.dataset
      .introLiveBound = "yes";

  }

}

const xIntroTitleSizeLabel =
  document.getElementById("xIntroTitleSizeLabel");

const xIntroSubtitleSizeLabel =
  document.getElementById("xIntroSubtitleSizeLabel");

const xIntroPhotoSizeLabel =
  document.getElementById("xIntroPhotoSizeLabel");

const xIntroLogoSizeLabel =
  document.getElementById("xIntroLogoSizeLabel");

const introTitleSmallerBtn =
  document.getElementById("introTitleSmallerBtn");

const introTitleBiggerBtn =
  document.getElementById("introTitleBiggerBtn");

const introSubtitleSmallerBtn =
  document.getElementById("introSubtitleSmallerBtn");

const introSubtitleBiggerBtn =
  document.getElementById("introSubtitleBiggerBtn");

const introPhotoSmallerBtn =
  document.getElementById("introPhotoSmallerBtn");

const introPhotoBiggerBtn =
  document.getElementById("introPhotoBiggerBtn");

const introLogoSmallerBtn =
  document.getElementById("introLogoSmallerBtn");

const introLogoBiggerBtn =
  document.getElementById("introLogoBiggerBtn");

const introTitleSizeValue =
  document.getElementById("introTitleSizeValue");

const introSubtitleSizeValue =
  document.getElementById("introSubtitleSizeValue");

const introPhotoSizeValue =
  document.getElementById("introPhotoSizeValue");

const introLogoSizeValue =
  document.getElementById("introLogoSizeValue");

const outroName = document.getElementById("outroName");
const outroProfession = document.getElementById("outroProfession");
const outroPhone = document.getElementById("outroPhone");
const outroContact = document.getElementById("outroContact");
const contactCardBtn = document.getElementById("contactCardBtn");
const contactCardBox = document.getElementById("contactCardBox");
const contactOverlay = document.getElementById("contactOverlay");
const outroLogo = document.getElementById("outroLogo");
const profilePhoto = document.getElementById("profilePhoto");
const chooseProfilePhotoBtn = document.getElementById("chooseProfilePhotoBtn");
const profilePhotoPreview = document.getElementById("profilePhotoPreview");
const savedProfilePhotoInfo = document.getElementById("savedProfilePhotoInfo");
const xProfilePhotoPreviewTitle = document.getElementById("xProfilePhotoPreviewTitle");
const logoPhotoPreview = document.getElementById("logoPhotoPreview");
const xLogoPreviewTitle = document.getElementById("xLogoPreviewTitle");
const chooseLogoBtn = document.getElementById("chooseLogoBtn");
const savedLogoInfo = document.getElementById("savedLogoInfo");
const xLangBtn = document.getElementById("xLangBtn");
const xSubtitle = document.getElementById("xSubtitle");
const xContactTitle = document.getElementById("xContactTitle");
const xNameLabel = document.getElementById("xNameLabel");
const xProfessionLabel = document.getElementById("xProfessionLabel");
const xPhoneLabel = document.getElementById("xPhoneLabel");
const xContactLabel = document.getElementById("xContactLabel");
const xLogoNote = document.getElementById("xLogoNote");
const saveUserInfoBtn = document.getElementById("saveUserInfoBtn");
const clearUserInfoBtn = document.getElementById("clearUserInfoBtn");
const outputSettingsBtn = document.getElementById("outputSettingsBtn");
const outputSettingsBox = document.getElementById("outputSettingsBox");
const textSettingsBtn = document.getElementById("textSettingsBtn");
const textSettingsBox = document.getElementById("textSettingsBox");
const saveOutputSettingsBtn = document.getElementById("saveOutputSettingsBtn");
const saveTextSettingsBtn = document.getElementById("saveTextSettingsBtn");
const clearIntroSettingsBtn = document.getElementById("clearIntroSettingsBtn");
const xOutputBtn = document.getElementById("xOutputBtn");
const xTextBtn = document.getElementById("xTextBtn");
const xOutputTitle = document.getElementById("xOutputTitle");
const xSaveOutputBtn = document.getElementById("xSaveOutputBtn");
const xTextTitle = document.getElementById("xTextTitle");
const xIntroTitleLabel = document.getElementById("xIntroTitleLabel");
const xIntroSubtitleLabel = document.getElementById("xIntroSubtitleLabel");
const xIntroFrameColorLabel = document.getElementById("xIntroFrameColorLabel");
const xIntroLayoutTitle = document.getElementById("xIntroLayoutTitle");

const xIntroDurationLabel =
  document.getElementById(
    "xIntroDurationLabel"
  );

const introDurationMinusBtn =
  document.getElementById(
    "introDurationMinusBtn"
  );

const introDurationValue =
  document.getElementById(
    "introDurationValue"
  );

const introDurationPlusBtn =
  document.getElementById(
    "introDurationPlusBtn"
  );

const introLayoutGrid = document.getElementById("introLayoutGrid");
const introEnabledToggle = document.getElementById("introEnabledToggle");
const xIntroEnabledText = document.getElementById("xIntroEnabledText");
const introFrameToggle = document.getElementById("introFrameToggle");
const xIntroFrameToggleText = document.getElementById("xIntroFrameToggleText");
const xIntroFrameThicknessLabel = document.getElementById("xIntroFrameThicknessLabel");
const introFrameThickBtn = document.getElementById("introFrameThickBtn");
const introFrameNormalBtn = document.getElementById("introFrameNormalBtn");
const introFrameThinBtn = document.getElementById("introFrameThinBtn");
const xSaveTextBtn = document.getElementById("xSaveTextBtn");
const choosePhotosBtn = document.getElementById("choosePhotosBtn");
const xChoosePhotosBtn = document.getElementById("xChoosePhotosBtn");
const outroSettingsBtn = document.getElementById("outroSettingsBtn");
const xOutroBtn = document.getElementById("xOutroBtn");
const outroSettingsBox = document.getElementById("outroSettingsBox");
const videoOutroTitle = document.getElementById("videoOutroTitle");
const videoOutroName = document.getElementById("videoOutroName");
const videoOutroProfession = document.getElementById("videoOutroProfession");
const videoOutroContact = document.getElementById("videoOutroContact");
const saveOutroSettingsBtn = document.getElementById("saveOutroSettingsBtn");

const editOutroInformationBtn =
  document.getElementById(
    "editOutroInformationBtn"
  );

const xEditOutroInformationBtn =
  document.getElementById(
    "xEditOutroInformationBtn"
  );

const xOutroTitle = document.getElementById("xOutroTitle");
const xOutroNote = document.getElementById("xOutroNote");
const outroEnabledToggle = document.getElementById("outroEnabledToggle");
const xOutroEnabledText = document.getElementById("xOutroEnabledText");
const xOutroMainTitleLabel = document.getElementById("xOutroMainTitleLabel");
const xOutroNameLabel = document.getElementById("xOutroNameLabel");
const xOutroProfessionLabel = document.getElementById("xOutroProfessionLabel");
const xOutroContactLabel = document.getElementById("xOutroContactLabel");

const xOutroDurationLabel =
  document.getElementById(
    "xOutroDurationLabel"
  );

const outroDurationMinusBtn =
  document.getElementById(
    "outroDurationMinusBtn"
  );

const outroDurationValue =
  document.getElementById(
    "outroDurationValue"
  );

const outroDurationPlusBtn =
  document.getElementById(
    "outroDurationPlusBtn"
  );

const xSaveOutroBtn = document.getElementById("xSaveOutroBtn");
const photoCount = document.getElementById("photoCount"); let selectedPhotoTotal = 0;
const photoTextList = document.getElementById("photoTextList");
const openTimelineCardBtn = document.getElementById("openTimelineCardBtn");
const timelineCardBox = document.getElementById("timelineCardBox");
const timelineCardTitle = document.getElementById("timelineCardTitle");
const timelineCardSubtitle = document.getElementById("timelineCardSubtitle");
const timelineOutputSizeIndicator = document.getElementById("timelineOutputSizeIndicator");
const timelineOutputShape = document.getElementById("timelineOutputShape");
const timelineOutputRatio = document.getElementById("timelineOutputRatio");
const timelineTotalDuration = document.getElementById("timelineTotalDuration");
const resetTimelineOnlyBtn = document.getElementById("resetTimelineOnlyBtn");
const editTimelineBtn = document.getElementById("editTimelineBtn");
const moveTimelineBtn = document.getElementById("moveTimelineBtn");
const closeTimelineCardBtn =
  document.getElementById(
    "closeTimelineCardBtn"
  );

const previewTimelineBtn =
  document.getElementById(
    "previewTimelineBtn"
  );

const timelineLivePreviewCard =
  document.getElementById(
    "timelineLivePreviewCard"
  );

const timelineLivePreviewCanvas =
  document.getElementById(
    "timelineLivePreviewCanvas"
  );

const timelineLivePreviewTitle =
  document.getElementById(
    "timelineLivePreviewTitle"
  );

const timelineLivePreviewStatus =
  document.getElementById(
    "timelineLivePreviewStatus"
  );

const timelineLivePreviewAudioMixHost =
  document.getElementById(
    "timelineLivePreviewAudioMixHost"
  );

const timelineLivePreviewTransport =
  document.getElementById(
    "timelineLivePreviewTransport"
  );

const timelineLivePreviewSeek =
  document.getElementById(
    "timelineLivePreviewSeek"
  );

const timelineLivePreviewPlayPauseBtn =
  document.getElementById(
    "timelineLivePreviewPlayPauseBtn"
  );

const timelineQuickAiBtn =
  document.getElementById(
    "timelineQuickAiBtn"
  );

const timelineQuickVideoBtn =
  document.getElementById(
    "timelineQuickVideoBtn"
  );

const timelineQuickMusicBtn =
  document.getElementById(
    "timelineQuickMusicBtn"
  );

const timelineQuickUploadedBtn =
  document.getElementById(
    "timelineQuickUploadedBtn"
  );

const timelineLivePreviewTime =
  document.getElementById(
    "timelineLivePreviewTime"
  );

const stopTimelineLivePreviewBtn =
  document.getElementById(
    "stopTimelineLivePreviewBtn"
  );

const closeTimelineLivePreviewBtn =
  document.getElementById(
    "closeTimelineLivePreviewBtn"
  );

const timelineWorkspaceInformationBtn =
  document.getElementById(
    "timelineWorkspaceInformationBtn"
  );

const timelineWorkspaceOutputBtn =
  document.getElementById(
    "timelineWorkspaceOutputBtn"
  );

const timelineWorkspaceIntroBtn =
  document.getElementById(
    "timelineWorkspaceIntroBtn"
  );

const timelineWorkspaceOutroBtn =
  document.getElementById(
    "timelineWorkspaceOutroBtn"
  );

const timelineWorkspaceMusicBtn =
  document.getElementById(
    "timelineWorkspaceMusicBtn"
  );

const timelineWorkspaceDeviceMediaBtn =
  document.getElementById(
    "timelineWorkspaceDeviceMediaBtn"
  );

const timelineWorkspaceFreeMediaBtn =
  document.getElementById(
    "timelineWorkspaceFreeMediaBtn"
  );

const photoArrangeBar = document.getElementById("photoArrangeBar");
const arrangePhotosBtn = document.getElementById("arrangePhotosBtn");
const photoTimeBtn = document.getElementById("photoTimeBtn");
const transitionBtn = document.getElementById("transitionBtn");
const transitionBox = document.getElementById("transitionBox");

const timelineMotionSpeedTitle =
  document.getElementById(
    "timelineMotionSpeedTitle"
  );

const timelineMotionSoftText =
  document.getElementById(
    "timelineMotionSoftText"
  );

const timelineMotionNormalText =
  document.getElementById(
    "timelineMotionNormalText"
  );

const timelineMotionDynamicText =
  document.getElementById(
    "timelineMotionDynamicText"
  );
const saveTransitionBtn = document.getElementById("saveTransitionBtn");
const xTransitionTitle = document.getElementById("xTransitionTitle");
const xSaveTransitionBtn = document.getElementById("xSaveTransitionBtn");
const arrangeToolbar = document.getElementById("arrangeToolbar");
const arrangeTitle = document.getElementById("arrangeTitle");
const doneArrangeBtn = document.getElementById("doneArrangeBtn");
const timeModeNote = document.getElementById("timeModeNote");
let isArrangeMode = false;
let isTimeMode = false;
let photoDurations = [];

const IP_CAPTION_CHARS_PER_SECOND = 8;

function getMediaCaptionDuration(file, index) {

  if (!file) {
    return 10;
  }

  const duration =
    Number(photoDurations[index]) ||
    Number(file.duration) ||
    10;

  return Math.max(1, duration);

}

function getMediaCaptionLimit(file, index) {

  return Math.max(
    8,
    Math.floor(
      getMediaCaptionDuration(file, index) *
      IP_CAPTION_CHARS_PER_SECOND
    )
  );

}

function getRequiredCaptionDuration(characterCount) {

  return Math.max(
    2,
    Math.ceil(
      (
        Number(characterCount || 0) /
        IP_CAPTION_CHARS_PER_SECOND
      ) *
      10
    ) /
    10
  );

}

function getMinimumSpeechDuration(
  speech
) {

  if (!speech) {
    return 0.1;
  }

  const text =
    String(
      speech.text || ""
    );

  if (!text.trim()) {
    return 0.1;
  }

  return Math.max(
    0.1,
    getRequiredCaptionDuration(
      text.length
    )
  );

}

function autoGrowTimelineSpeechDuration(
  file,
  mediaIndex,
  speech
) {

  if (
    !file ||
    !speech ||
    mediaIndex === null ||
    mediaIndex < 0
  ) {
    return false;
  }

  const list =
    ensureMediaSpeechList(file);

  const speechIndex =
    list.findIndex(
      function (item) {
        return item.id === speech.id;
      }
    );

  if (speechIndex < 0) {
    return false;
  }

  const mediaDuration =
    getCurrentMediaDuration(
      file,
      mediaIndex
    );

  const startTime =
    Math.max(
      0,
      Number(speech.startTime) || 0
    );

  const nextSpeech =
    list[
      speechIndex + 1
    ] || null;

  const maximumEnd =
    nextSpeech
      ? Math.min(
          mediaDuration,
          Math.max(
            startTime + 0.1,
            Number(
              nextSpeech.startTime
            ) || mediaDuration
          )
        )
      : mediaDuration;

  const maximumDuration =
    Math.max(
      0.1,
      maximumEnd -
      startTime
    );

  const requiredDuration =
    getMinimumSpeechDuration(
      speech
    );

  const currentDuration =
    Math.max(
      0.1,
      Number(speech.duration) || 0.1
    );

  const newDuration =
    Math.min(
      maximumDuration,
      Math.max(
        currentDuration,
        requiredDuration
      )
    );

  const timingChanged =
    Math.abs(
      newDuration -
      currentDuration
    ) > 0.001;

  speech.duration =
    Number(
      newDuration.toFixed(1)
    );

  normalizeTimelineSpeechTiming(
    file
  );

  return timingChanged;

}

function mediaCaptionFitsDuration(file, index) {

  const captionLength =
    (file && file.caption
      ? file.caption
      : ""
    ).length;

  return (
    captionLength <=
    getMediaCaptionLimit(file, index)
  );

}

let timelineIntroEnabled =
  localStorage.getItem("ip_introEnabled") !== "no";

let timelineOutroEnabled =
  localStorage.getItem("ip_outroEnabled") !== "no";

let timelineIntroDuration =
  Math.max(
    1,
    Math.min(
      10,
      Number(localStorage.getItem("ip_introDuration")) || 2
    )
  );

let timelineOutroDuration =
  Math.max(
    3,
    Math.min(
      10,
      Number(localStorage.getItem("ip_outroDuration")) || 5
    )
  );

introEnabledToggle.checked =
  timelineIntroEnabled;

outroEnabledToggle.checked =
  timelineOutroEnabled;

introEnabledToggle.onchange = function () {

  timelineIntroEnabled =
    introEnabledToggle.checked;

  localStorage.setItem(
    "ip_introEnabled",
    timelineIntroEnabled ? "yes" : "no"
  );

  buildPhotoTextList();
  refreshTimelineTotalDuration();

};

outroEnabledToggle.onchange = function () {

  timelineOutroEnabled =
    outroEnabledToggle.checked;

  if (
    timelineOutroEnabled &&
    timelineOutroDuration < 3
  ) {
    timelineOutroDuration = 3;
  }

  localStorage.setItem(
    "ip_outroEnabled",
    timelineOutroEnabled ? "yes" : "no"
  );

  localStorage.setItem(
    "ip_outroDuration",
    String(timelineOutroDuration)
  );

  buildPhotoTextList();
  refreshTimelineTotalDuration();

};

function refreshIntroOutroDurationControls() {

  if (
    xIntroDurationLabel
  ) {

    xIntroDurationLabel.textContent =
      currentLanguage === "en"
        ? "Intro Duration"
        : "Başlangıç Süresi";

  }

  if (
    xOutroDurationLabel
  ) {

    xOutroDurationLabel.textContent =
      currentLanguage === "en"
        ? "Outro Duration"
        : "Bitiş Süresi";

  }

  if (
    introDurationValue
  ) {

    introDurationValue.textContent =
      Number(
        timelineIntroDuration
      ).toFixed(1) +
      (
        currentLanguage === "en"
          ? "s"
          : " sn"
      );

  }

  if (
    outroDurationValue
  ) {

    outroDurationValue.textContent =
      Number(
        timelineOutroDuration
      ).toFixed(1) +
      (
        currentLanguage === "en"
          ? "s"
          : " sn"
      );

  }

}

function saveIntroDuration(
  nextDuration
) {

  timelineIntroDuration =
    Math.max(
      1,
      Math.min(
        10,
        Math.round(
          (
            Number(nextDuration) ||
            5
          ) *
          10
        ) /
        10
      )
    );

  localStorage.setItem(
    "ip_introDuration",
    String(
      timelineIntroDuration
    )
  );

  refreshIntroOutroDurationControls();
  buildPhotoTextList();
  refreshTimelineTotalDuration();

}

function saveOutroDuration(
  nextDuration
) {

  timelineOutroDuration =
    Math.max(
      3,
      Math.min(
        10,
        Math.round(
          (
            Number(nextDuration) ||
            5
          ) *
          10
        ) /
        10
      )
    );

  localStorage.setItem(
    "ip_outroDuration",
    String(
      timelineOutroDuration
    )
  );

  refreshIntroOutroDurationControls();
  buildPhotoTextList();
  refreshTimelineTotalDuration();

}

introDurationMinusBtn.onclick =
  function () {

    saveIntroDuration(
      timelineIntroDuration - 0.1
    );

  };

introDurationPlusBtn.onclick =
  function () {

    saveIntroDuration(
      timelineIntroDuration + 0.1
    );

  };

outroDurationMinusBtn.onclick =
  function () {

    saveOutroDuration(
      timelineOutroDuration - 0.1
    );

  };

outroDurationPlusBtn.onclick =
  function () {

    saveOutroDuration(
      timelineOutroDuration + 0.1
    );

  };

let draggedPhotoIndex = null;
let draggedTargetPhotoIndex = null;
let timelineSwapMode = false;
let timelineSwapFirstIndex = null;
let photoCaptions = [];
let selectedPhotos = [];
let currentPreviewIndex = null;
let currentSpeechId = null;
let timelineEndMarkerMode = false;

function getCurrentMediaDuration(file, index) {

  if (!file) {
    return 10;
  }

  const isVideo =
    file.type === "video" ||
    file.isFreeVideo;

  if (isVideo) {

    const trimStart =
      Number(file.startTime) || 0;

    const trimEnd =
      Number(file.endTime) || 0;

    const trimmedDuration =
      trimEnd > trimStart
        ? trimEnd - trimStart
        : 0;

    return Math.max(
      1,
      trimmedDuration,
      Number(file.duration) || 0
    );

  }

  return Math.max(
    1,
    Number(file.duration) || 0,
    Number(photoDurations[index]) || 0
  );

}

function getSelectedSpeech(file) {

  const list =
    ensureMediaSpeechList(file);

  if (!list.length) {
    return null;
  }

  let speech =
    list.find(function (item) {
      return item.id === currentSpeechId;
    });

  if (!speech) {
    speech = list[0];
    currentSpeechId = speech.id;
  }

  return speech;

}

function getSpeechAvailableDuration(
  file,
  mediaIndex,
  speech
) {

  if (!speech) {
    return 0.1;
  }

  const mediaDuration =
    getCurrentMediaDuration(
      file,
      mediaIndex
    );

  const startTime =
    Math.max(
      0,
      Number(speech.startTime) || 0
    );

  const maximumDuration =
    Math.max(
      0.1,
      mediaDuration -
      startTime
    );

  return Math.max(
    0.1,
    Math.min(
      maximumDuration,
      Number(speech.duration) ||
      maximumDuration
    )
  );

}

function normalizeTimelineSpeechTiming(
  file
) {

  if (!file) {
    return;
  }

  const list =
    ensureMediaSpeechList(file);

  const mediaDuration =
    getCurrentMediaDuration(
      file,
      currentPreviewIndex
    );

  list.sort(
    function (a, b) {

      return (
        Number(a.startTime || 0) -
        Number(b.startTime || 0)
      );

    }
  );

  list.forEach(
    function (speech, index) {

      const previousSpeech =
        list[index - 1];

      const previousEnd =
        previousSpeech
          ? (
              Number(
                previousSpeech.startTime
              ) || 0
            ) +
            (
              Number(
                previousSpeech.duration
              ) || 0.1
            )
          : 0;

      speech.startTime =
        Math.max(
          previousEnd,
          Math.min(
            mediaDuration - 0.1,
            Number(speech.startTime) || 0
          )
        );

      const nextSpeech =
        list[index + 1];

      const maximumEnd =
        nextSpeech
          ? Number(
              nextSpeech.startTime
            ) || mediaDuration
          : mediaDuration;

      const minimumDuration =
        getMinimumSpeechDuration(
          speech
        );

      const availableDuration =
        Math.max(
          0.1,
          maximumEnd -
          speech.startTime
        );

      speech.duration =
        Math.min(
          availableDuration,
          Math.max(
            minimumDuration,
            Number(speech.duration) ||
            minimumDuration
          )
        );

    }
  );

}

function getCurrentPreviewSpeechTime(file) {

  const isVideo =
    file &&
    (
      file.type === "video" ||
      file.isFreeVideo
    );

  if (
    isVideo &&
    photoPreviewVideo &&
    isFinite(photoPreviewVideo.currentTime)
  ) {

    const trimStart =
      Number(file.startTime) || 0;

    return Math.max(
      0,
      photoPreviewVideo.currentTime -
      trimStart
    );

  }

  return 0;

}

function getSpeechEditorTextColor(color) {

  const hex =
    String(color || "#ffffff")
      .replace("#", "");

  if (hex.length !== 6) {
    return "#111111";
  }

  const red =
    parseInt(hex.slice(0, 2), 16);

  const green =
    parseInt(hex.slice(2, 4), 16);

  const blue =
    parseInt(hex.slice(4, 6), 16);

  const brightness =
    (
      red * 299 +
      green * 587 +
      blue * 114
    ) / 1000;

  return brightness > 175
    ? "#111111"
    : color;

}

function getTimelineSpeechEffectTimings(
  speechDuration
) {

  const safeDuration =
    Math.max(
      0.1,
      Number(
        speechDuration
      ) || 0.1
    );

  let entranceDuration =
    Math.max(
      0.25,
      Math.min(
        3,
        safeDuration * 0.20
      )
    );

  let exitDuration =
    Math.max(
      0.20,
      Math.min(
        2,
        safeDuration * 0.15
      )
    );

  const maximumAnimatedDuration =
    safeDuration * 0.72;

  if (
    entranceDuration +
    exitDuration >
    maximumAnimatedDuration
  ) {

    const adjustmentRatio =
      maximumAnimatedDuration /
      Math.max(
        0.01,
        entranceDuration +
        exitDuration
      );

    entranceDuration *=
      adjustmentRatio;

    exitDuration *=
      adjustmentRatio;

  }

  return {
    entranceDuration:
      Math.max(
        0.05,
        entranceDuration
      ),

    exitDuration:
      Math.max(
        0.05,
        exitDuration
      ),

    holdDuration:
      Math.max(
        0,
        safeDuration -
        entranceDuration -
        exitDuration
      )
  };

}

function previewSelectedTimelineSpeechEffect() {

  if (
    currentPreviewIndex === null ||
    !timelineSpeechPreviewText
  ) {
    return;
  }

  const file =
    selectedPhotos[
      currentPreviewIndex
    ];

  if (!file) {
    return;
  }

  const speech =
    getSelectedSpeech(
      file
    );

  if (
    !speech ||
    !String(
      speech.text || ""
    ).trim()
  ) {
    return;
  }

  const effect =
    [
      "zoom",
      "blur",
      "bounce",
      "rise",
      "fade"
    ].includes(
      speech.animationEffect
    )
      ? speech.animationEffect
      : "zoom";

  const speechDuration =
    Math.max(
      0.1,
      Number(
        speech.duration
      ) || 0.1
    );

  const timings =
    getTimelineSpeechEffectTimings(
      speechDuration
    );

  timelineSpeechPreviewText
    .getAnimations()
    .forEach(
      function (
        animation
      ) {

        animation.cancel();

      }
    );

  timelineSpeechPreviewText.style.opacity =
    "1";

  timelineSpeechPreviewText.style.filter =
    "none";

  timelineSpeechPreviewText.style.transform =
    "translate(-50%, -50%)";

  const entranceKeyframes = {

    zoom: [
      {
        transform:
          "translate(-50%, -50%) scale(.82)",
        opacity: 1
      },
      {
        transform:
          "translate(-50%, -50%) scale(1)",
        opacity: 1
      }
    ],

    blur: [
      {
        transform:
          "translate(-50%, -50%) scale(.97)",
        filter:
          "blur(6px)",
        opacity: .78
      },
      {
        transform:
          "translate(-50%, -50%) scale(1)",
        filter:
          "blur(0)",
        opacity: 1
      }
    ],

    bounce: [
      {
        transform:
          "translate(-50%, -50%) scale(.84)",
        opacity: 1
      },
      {
        transform:
          "translate(-50%, -50%) scale(1.06)",
        opacity: 1,
        offset: .68
      },
      {
        transform:
          "translate(-50%, -50%) scale(.985)",
        opacity: 1,
        offset: .86
      },
      {
        transform:
          "translate(-50%, -50%) scale(1)",
        opacity: 1
      }
    ],

    rise: [
      {
        transform:
          "translate(-50%, calc(-50% + 28px))",
        opacity: .78
      },
      {
        transform:
          "translate(-50%, -50%)",
        opacity: 1
      }
    ],

    fade: [
      {
        transform:
          "translate(-50%, -50%)",
        opacity: .38
      },
      {
        transform:
          "translate(-50%, -50%)",
        opacity: 1
      }
    ]

  };

  const entranceAnimation =
    timelineSpeechPreviewText.animate(
      entranceKeyframes[
        effect
      ],
      {
        duration:
          timings.entranceDuration *
          1000,

        easing:
          "cubic-bezier(.16,1,.3,1)",

        fill:
          "forwards"
      }
    );

  entranceAnimation.onfinish =
    function () {

      setTimeout(
        function () {

          timelineSpeechPreviewText.animate(
            [
              {
                opacity: 1
              },
              {
                opacity: 0
              }
            ],
            {
              duration:
                timings.exitDuration *
                1000,

              easing:
                "ease-in-out",

              fill:
                "forwards"
            }
          );

        },
        timings.holdDuration *
        1000
      );

    };

}

function refreshTimelineSpeechPreview() {

  if (
    currentPreviewIndex === null ||
    !timelineSpeechPreviewText
  ) {
    return;
  }

  const file =
    selectedPhotos[currentPreviewIndex];

  if (!file) {
    timelineSpeechPreviewText.textContent = "";
    return;
  }

  const speech =
    getSelectedSpeech(file);

  if (!speech) {
    timelineSpeechPreviewText.textContent = "";
    return;
  }

  timelineSpeechPreviewText
    .getAnimations()
    .forEach(
      function (
        animation
      ) {

        animation.cancel();

      }
    );

  timelineSpeechPreviewText.style.opacity =
    "1";

  timelineSpeechPreviewText.style.filter =
    "none";

  timelineSpeechPreviewText.style.transform =
    "translate(-50%, -50%)";

  timelineSpeechPreviewText.textContent =
    speech.text || "";

  timelineSpeechPreviewText.style.color =
    speech.color || "#ffffff";

  timelineSpeechPreviewText.style.fontSize =
    (
      18 *
      (
        Number(speech.fontScale) ||
        1
      )
    ) +
    "px";

  timelineSpeechPreviewText.style.left =
    (
      Number(speech.positionX) ||
      50
    ) +
    "%";

  timelineSpeechPreviewText.style.top =
    (
      Number(speech.positionY) ||
      72
    ) +
    "%";

  timelineSpeechSizeInfo.textContent =
    Math.round(
      (
        Number(speech.fontScale) ||
        1
      ) *
      100
    ) +
    "%";

}

function syncLegacyCaptionFromSpeechList(file) {

  const list =
    ensureMediaSpeechList(file);

  const firstSpeech =
    list[0] || null;

  file.caption =
    firstSpeech
      ? firstSpeech.text || ""
      : "";

  file.captionColor =
    firstSpeech
      ? firstSpeech.color || "#ffffff"
      : "#ffffff";

  file.voiceGender =
    firstSpeech &&
    (
      firstSpeech.voiceGender === "male" ||
      firstSpeech.voiceGender === "female"
    )
      ? firstSpeech.voiceGender
      : getLastSelectedAiVoiceGender();

  file.voiceUrl =
    firstSpeech
      ? firstSpeech.voiceUrl || ""
      : "";

  file.voiceText =
    firstSpeech
      ? firstSpeech.voiceText || ""
      : "";

  file.voiceLanguage =
    firstSpeech
      ? firstSpeech.voiceLanguage || ""
      : "";

  file.audioSource =
    firstSpeech
      ? firstSpeech.audioSource || "ai"
      : "ai";

  file.uploadedAudioUrl =
    firstSpeech
      ? firstSpeech.uploadedAudioUrl || ""
      : "";

  file.uploadedAudioName =
    firstSpeech
      ? firstSpeech.uploadedAudioName || ""
      : "";

  file.uploadedAudioDuration =
    firstSpeech
      ? Number(
          firstSpeech.uploadedAudioDuration
        ) || 0
      : 0;

  file.recordedAudioUrl =
    firstSpeech
      ? firstSpeech.recordedAudioUrl || ""
      : "";

  file.recordedAudioName =
    firstSpeech
      ? firstSpeech.recordedAudioName || ""
      : "";

  file.recordedAudioDuration =
    firstSpeech
      ? Number(
          firstSpeech.recordedAudioDuration
        ) || 0
      : 0;

  if (currentPreviewIndex !== null) {
    photoCaptions[currentPreviewIndex] =
      file.caption;
  }

}
let selectedCropX = 50;
let selectedCropY = 50;
let selectedCropStartX = 0;
let selectedCropStartY = 0;
let selectedCropStartValueX = 50;
let selectedCropStartValueY = 50;
let selectedCropDragging = false;
const photoPreviewBox = document.getElementById("photoPreviewBox");
const photoPreviewImage = document.getElementById("photoPreviewImage");
const photoPreviewVideo = document.getElementById("photoPreviewVideo");
const photoPreviewFrame = document.getElementById("photoPreviewFrame");
const deletePreviewPhotoBtn = document.getElementById("deletePreviewPhotoBtn");
const downloadPreviewMediaBtn = document.getElementById("downloadPreviewMediaBtn");
const closePreviewPhotoBtn = document.getElementById("closePreviewPhotoBtn");
const saveCropPhotoBtn = document.getElementById("saveCropPhotoBtn");
const cancelFreePreviewBtn = document.getElementById("cancelFreePreviewBtn");
const timelineEditControls = document.getElementById("timelineEditControls");
const timelineSpeechLiveDock = document.getElementById("timelineSpeechLiveDock");
const photoPreviewInner = document.getElementById("photoPreviewInner");
const timelineSpeechCurrentTime = document.getElementById("timelineSpeechCurrentTime");
const addTimelineSpeechBtn =
  document.getElementById(
    "addTimelineSpeechBtn"
  );

const timelineEditMediaDuration =
  document.getElementById(
    "timelineEditMediaDuration"
  );

const timelineEditMediaDurationInfo =
  document.getElementById(
    "timelineEditMediaDurationInfo"
  );

const timelineMediaDurationMinusBtn =
  document.getElementById(
    "timelineMediaDurationMinusBtn"
  );

const timelineMediaDurationPlusBtn =
  document.getElementById(
    "timelineMediaDurationPlusBtn"
  );

const timelineSpeechOverview =
  document.getElementById("timelineSpeechOverview");

const timelineSpeechOverviewDuration =
  document.getElementById("timelineSpeechOverviewDuration");

const timelineSpeechOverviewRail =
  document.getElementById("timelineSpeechOverviewRail");

const timelineSpeechList = document.getElementById("timelineSpeechList");
const timelineSpeechStartLabel = document.getElementById("timelineSpeechStartLabel");
const timelineSpeechStartInput = document.getElementById("timelineSpeechStartInput");
const timelineSpeechDurationInfo = document.getElementById("timelineSpeechDurationInfo");
const timelineCaptionInput = document.getElementById("timelineCaptionInput");
const timelineCaptionColorBtn = document.getElementById("timelineCaptionColorBtn");
const timelineCaptionColorInput = document.getElementById("timelineCaptionColorInput");
const timelineSpeechColorPalette = document.getElementById("timelineSpeechColorPalette");
const timelineSpeechColorDoneBtn = document.getElementById("timelineSpeechColorDoneBtn");
const timelineCaptionCapacity =
  document.getElementById(
    "timelineCaptionCapacity"
  );

const timelineSpeechEffectLabel =
  document.getElementById(
    "timelineSpeechEffectLabel"
  );

const timelineSpeechEffectSelect =
  document.getElementById(
    "timelineSpeechEffectSelect"
  );

const previewTimelineSpeechEffectBtn =
  document.getElementById(
    "previewTimelineSpeechEffectBtn"
  );

const timelineCaptionEditor =
  timelineCaptionInput.closest(
    ".timeline-caption-color-row"
  );

const timelineSpeechToolbar =
  timelineEditControls.querySelector(
    ".timeline-speech-toolbar"
  );

if (
  timelineCaptionEditor &&
  timelineSpeechOverview &&
  timelineCaptionCapacity &&
  timelineSpeechToolbar
) {

  timelineEditControls.insertBefore(
    timelineCaptionEditor,
    timelineSpeechToolbar
  );

  timelineEditControls.insertBefore(
    timelineSpeechOverview,
    timelineSpeechToolbar
  );

  timelineEditControls.insertBefore(
    timelineCaptionCapacity,
    timelineSpeechToolbar
  );

}

const timelineSpeechPreviewText = document.getElementById("timelineSpeechPreviewText");
const timelineSpeechSmallerBtn = document.getElementById("timelineSpeechSmallerBtn");
const timelineSpeechBiggerBtn = document.getElementById("timelineSpeechBiggerBtn");
const timelineSpeechSizeInfo = document.getElementById("timelineSpeechSizeInfo");
const timelineSpeechLeftBtn = document.getElementById("timelineSpeechLeftBtn");
const timelineSpeechRightBtn = document.getElementById("timelineSpeechRightBtn");
const timelineSpeechUpBtn = document.getElementById("timelineSpeechUpBtn");
const timelineSpeechDownBtn =
  document.getElementById(
    "timelineSpeechDownBtn"
  );

const timelineAudioMixToggleBtn =
  document.getElementById(
    "timelineAudioMixToggleBtn"
  );

const timelineAudioMixToggleLabel =
  document.getElementById(
    "timelineAudioMixToggleLabel"
  );


const timelineAudioMixPanel =
  document.getElementById(
    "timelineAudioMixPanel"
  );

const timelineAiVolumeLabel =
  document.getElementById(
    "timelineAiVolumeLabel"
  );

const timelineVideoVolumeLabel =
  document.getElementById(
    "timelineVideoVolumeLabel"
  );

const timelineMusicVolumeLabel =
  document.getElementById(
    "timelineMusicVolumeLabel"
  );

const timelineUploadedVolumeLabel =
  document.getElementById(
    "timelineUploadedVolumeLabel"
  );

const timelineAiVolumeRange =
  document.getElementById(
    "timelineAiVolumeRange"
  );

const timelineVideoVolumeRange =
  document.getElementById(
    "timelineVideoVolumeRange"
  );

const timelineMusicVolumeRange =
  document.getElementById(
    "timelineMusicVolumeRange"
  );

const timelineUploadedVolumeRange =
  document.getElementById(
    "timelineUploadedVolumeRange"
  );

const timelineAiVolumeValue =
  document.getElementById(
    "timelineAiVolumeValue"
  );

const timelineVideoVolumeValue =
  document.getElementById(
    "timelineVideoVolumeValue"
  );

const timelineMusicVolumeValue =
  document.getElementById(
    "timelineMusicVolumeValue"
  );

const timelineUploadedVolumeValue =
  document.getElementById(
    "timelineUploadedVolumeValue"
  );

const timelineAiVolumeDefaultBtn =
  document.getElementById(
    "timelineAiVolumeDefaultBtn"
  );

const timelineVideoVolumeDefaultBtn =
  document.getElementById(
    "timelineVideoVolumeDefaultBtn"
  );

const timelineMusicVolumeDefaultBtn =
  document.getElementById(
    "timelineMusicVolumeDefaultBtn"
  );

const timelineUploadedVolumeDefaultBtn =
  document.getElementById(
    "timelineUploadedVolumeDefaultBtn"
  );

const extendTimelineCaptionDurationBtn =
  document.getElementById(
    "extendTimelineCaptionDurationBtn"
  );
const timelineGenderBtn = document.getElementById("timelineGenderBtn");
const timelineVoiceBtn = document.getElementById("timelineVoiceBtn");

const storedAiVoiceGender =
  localStorage.getItem(
    "izyPostAiVoiceGender"
  );

let currentAiVoiceGender =
  (
    storedAiVoiceGender === "male" ||
    storedAiVoiceGender === "female"
  )
    ? storedAiVoiceGender
    : "male";

function getLastSelectedAiVoiceGender() {

  const storedGender =
    localStorage.getItem(
      "izyPostAiVoiceGender"
    );

  if (
    storedGender === "male" ||
    storedGender === "female"
  ) {

    currentAiVoiceGender =
      storedGender;

  }

  return currentAiVoiceGender;

}

const timelineAudioSourceTitle =
  document.getElementById("timelineAudioSourceTitle");

const timelineAudioSourceAiBtn =
  document.getElementById("timelineAudioSourceAiBtn");

const timelineAudioSourceUploadBtn =
  document.getElementById("timelineAudioSourceUploadBtn");

const timelineAudioSourceAiPanel =
  document.getElementById("timelineAudioSourceAiPanel");

const timelineAudioSourceUploadPanel =
  document.getElementById("timelineAudioSourceUploadPanel");

const timelineUploadedVoiceInput =
  document.getElementById("timelineUploadedVoiceInput");

const timelineChooseVoiceFileBtn =
  document.getElementById("timelineChooseVoiceFileBtn");

const timelineRemoveVoiceFileBtn =
  document.getElementById("timelineRemoveVoiceFileBtn");

const timelineUploadedVoiceInfo =
  document.getElementById("timelineUploadedVoiceInfo");

const timelineUploadedVoicePreview =
  document.getElementById("timelineUploadedVoicePreview");


const timelineAiVoiceControls =
  document.getElementById("timelineAiVoiceControls");


const IZYPOST_AUDIO_DEFAULTS = {
  ai: 1,
  video: 0.70,
  music: 0.40,
  uploaded: 1
};

function clampIzyPostAudioVolume(
  value,
  fallback
) {

  const numericValue =
    Number(value);

  return Number.isFinite(
    numericValue
  )
    ? Math.max(
        0,
        Math.min(
          2,
          numericValue
        )
      )
    : fallback;

}

function getIzyPostCurrentMedia() {

  if (
    currentPreviewIndex === null
  ) {
    return null;
  }

  return (
    selectedPhotos[
      currentPreviewIndex
    ] ||
    null
  );

}

function getIzyPostCurrentSpeech() {

  const file =
    getIzyPostCurrentMedia();

  return file
    ? getSelectedSpeech(
        file
      )
    : null;

}

function getIzyPostMusicVolume() {

  const track =
    window.ipBackgroundMusicTrack;

  if (
    track &&
    Number.isFinite(
      Number(
        track.volume
      )
    )
  ) {

    return clampIzyPostAudioVolume(
      track.volume,
      IZYPOST_AUDIO_DEFAULTS.music
    );

  }

  return clampIzyPostAudioVolume(
    localStorage.getItem(
      "ip_musicUserVolume"
    ),
    IZYPOST_AUDIO_DEFAULTS.music
  );

}

function setIzyPostMusicVolume(
  volume
) {

  const safeVolume =
    clampIzyPostAudioVolume(
      volume,
      IZYPOST_AUDIO_DEFAULTS.music
    );

  localStorage.setItem(
    "ip_musicUserVolume",
    String(
      safeVolume
    )
  );

  if (
    !window.ipBackgroundMusicTrack ||
    typeof window.ipBackgroundMusicTrack !==
      "object"
  ) {

    window.ipBackgroundMusicTrack = {
      enabled: false,
      url: "",
      name: "",
      source: "",
      volume:
        safeVolume,
      fadeInSeconds: 1,
      fadeOutSeconds: 1.2
    };

  } else {

    window.ipBackgroundMusicTrack.volume =
      safeVolume;

  }

  if (
    typeof window
      .updateIzyPostLiveAudioVolumes ===
    "function"
  ) {

    window.updateIzyPostLiveAudioVolumes();

  }

}

function updateIzyPostVolumeOutput(
  range,
  output
) {

  if (
    !range ||
    !output
  ) {
    return;
  }

  output.textContent =
    Math.round(
      Number(
        range.value
      ) || 0
    ) +
    "%";

  refreshTimelineQuickAudioValues();

}

function refreshTimelineQuickAudioValues() {

  const quickAiValue =
    document.getElementById(
      "timelineQuickAiValue"
    );

  const quickVideoValue =
    document.getElementById(
      "timelineQuickVideoValue"
    );

  const quickMusicValue =
    document.getElementById(
      "timelineQuickMusicValue"
    );

  const quickUploadedValue =
    document.getElementById(
      "timelineQuickUploadedValue"
    );

  if (quickAiValue) {
    quickAiValue.textContent =
      timelineAiVolumeValue.textContent;
  }

  if (quickVideoValue) {
    quickVideoValue.textContent =
      timelineVideoVolumeValue.textContent;
  }

  if (quickMusicValue) {
    quickMusicValue.textContent =
      timelineMusicVolumeValue.textContent;
  }

  if (quickUploadedValue) {
    quickUploadedValue.textContent =
      timelineUploadedVolumeValue.textContent;
  }

}

function applyIzyPostEditorPreviewVolumes() {

  const file =
    getIzyPostCurrentMedia();

  const speech =
    getIzyPostCurrentSpeech();

  if (
    file &&
    photoPreviewVideo
  ) {

    photoPreviewVideo.volume =
      Math.min(
        1,
        clampIzyPostAudioVolume(
          file.videoVolume,
          IZYPOST_AUDIO_DEFAULTS.video
        )
      );

  }

  if (
    speech &&
    timelineUploadedVoicePreview
  ) {

    timelineUploadedVoicePreview.volume =
      Math.min(
        1,
        clampIzyPostAudioVolume(
          speech.uploadedVolume,
          IZYPOST_AUDIO_DEFAULTS.uploaded
        )
      );

  }

}

function refreshTimelineAudioMixControls(
  file,
  speech
) {

  if (
    !file ||
    !speech
  ) {
    return;
  }

  file.videoVolume =
    clampIzyPostAudioVolume(
      file.videoVolume,
      IZYPOST_AUDIO_DEFAULTS.video
    );

  speech.aiVolume =
    clampIzyPostAudioVolume(
      speech.aiVolume,
      IZYPOST_AUDIO_DEFAULTS.ai
    );

  speech.uploadedVolume =
    clampIzyPostAudioVolume(
      speech.uploadedVolume,
      IZYPOST_AUDIO_DEFAULTS.uploaded
    );

  const musicVolume =
    getIzyPostMusicVolume();

  timelineAiVolumeRange.value =
    Math.round(
      speech.aiVolume *
      100
    );

  timelineVideoVolumeRange.value =
    Math.round(
      file.videoVolume *
      100
    );

  timelineMusicVolumeRange.value =
    Math.round(
      musicVolume *
      100
    );

  timelineUploadedVolumeRange.value =
    Math.round(
      speech.uploadedVolume *
      100
    );

  updateIzyPostVolumeOutput(
    timelineAiVolumeRange,
    timelineAiVolumeValue
  );

  updateIzyPostVolumeOutput(
    timelineVideoVolumeRange,
    timelineVideoVolumeValue
  );

  updateIzyPostVolumeOutput(
    timelineMusicVolumeRange,
    timelineMusicVolumeValue
  );

  updateIzyPostVolumeOutput(
    timelineUploadedVolumeRange,
    timelineUploadedVolumeValue
  );


  timelineAudioMixToggleLabel.textContent =
    currentLanguage === "en"
      ? "🔊 Audio Mix"
      : "🔊 Ses Miksajı";

  timelineAiVolumeLabel.textContent =
    currentLanguage === "en"
      ? "AI Voice"
      : "Yapay Zekâ";

  timelineVideoVolumeLabel.textContent =
    currentLanguage === "en"
      ? "Video Audio"
      : "Video Sesi";

  timelineMusicVolumeLabel.textContent =
    currentLanguage === "en"
      ? "Music"
      : "Müzik";

  timelineUploadedVolumeLabel.textContent =
    currentLanguage === "en"
      ? "Uploaded Voice"
      : "Yüklenen Ses";

  [
    timelineAiVolumeDefaultBtn,
    timelineVideoVolumeDefaultBtn,
    timelineMusicVolumeDefaultBtn,
    timelineUploadedVolumeDefaultBtn
  ].forEach(
    function (
      button
    ) {

      button.textContent =
        currentLanguage === "en"
          ? "Default"
          : "Varsayılan";

    }
  );

  timelineVideoVolumeRange.disabled =
    !(
      file.type === "video" ||
      file.isFreeVideo
    );

  timelineUploadedVolumeRange.disabled =
    !speech.uploadedAudioUrl;

  timelineUploadedVolumeDefaultBtn.disabled =
    !speech.uploadedAudioUrl;

  if (timelineQuickVideoBtn) {
    timelineQuickVideoBtn.disabled =
      timelineVideoVolumeRange.disabled;
  }

  if (timelineQuickUploadedBtn) {
    timelineQuickUploadedBtn.disabled =
      timelineUploadedVolumeRange.disabled;
  }

  refreshTimelineQuickAudioValues();

  applyIzyPostEditorPreviewVolumes();

}

function restartTimelineMediaPreviewAudio() {

  if (
    activeTimelinePreviewSectionType !==
      "media" ||
    activeTimelinePreviewMediaIndex ===
      null ||
    !timelineLivePreviewCard
      .classList
      .contains(
        "open"
      )
  ) {
    return;
  }

  clearTimeout(
    timelineAudioMixRestartTimer
  );

  timelineAudioMixRestartTimer =
    setTimeout(
      async function () {

        if (
          typeof window
            .stopIzyPostLivePreview ===
          "function"
        ) {

          window
            .stopIzyPostLivePreview();

        }

        if (
          typeof window
            .waitIzyPostLivePreviewStopped ===
          "function"
        ) {

          await window
            .waitIzyPostLivePreviewStopped();

        }

        timelineLivePreviewStatus.textContent =
          currentLanguage === "en"
            ? "Updating audio preview..."
            : "Ses ön izlemesi güncelleniyor...";

        if (
          typeof window
            .startIzyPostSectionPreview !==
          "function"
        ) {
          return;
        }

        await window
          .startIzyPostSectionPreview(
            timelineLivePreviewCanvas,
            "media",
            activeTimelinePreviewMediaIndex,
            function (
              message
            ) {

              timelineLivePreviewStatus.textContent =
                message;

            }
          );

      },
      180
    );

}

function saveIzyPostAudioMixChange() {

  saveProjectPhotos();

  applyIzyPostEditorPreviewVolumes();

  if (
    typeof window
      .updateIzyPostLiveAudioVolumes ===
    "function"
  ) {

    window.updateIzyPostLiveAudioVolumes();

  }

}

const timelineVideoTrimBox = document.getElementById("timelineVideoTrimBox");
const timelineVideoVisibleRange = document.getElementById("timelineVideoVisibleRange");
const timelineTrimPlayBtn = document.getElementById("timelineTrimPlayBtn");
const timelineVideoTrimInfo = document.getElementById("timelineVideoTrimInfo");
const setTimelineVideoStartBtn = document.getElementById("setTimelineVideoStartBtn");
const setTimelineVideoEndBtn = document.getElementById("setTimelineVideoEndBtn");
const saveTimelineVideoTrimBtn = document.getElementById("saveTimelineVideoTrimBtn");
const timelineTrimShadeLeft = document.getElementById("timelineTrimShadeLeft");
const timelineTrimShadeRight = document.getElementById("timelineTrimShadeRight");
const timelineTrimSelected = document.getElementById("timelineTrimSelected");
const timelineStartLabel = document.getElementById("timelineStartLabel");
const timelineEndLabel = document.getElementById("timelineEndLabel");
const m1Btn = document.getElementById("m1Btn");
const m2Btn = document.getElementById("m2Btn");
const m3Btn = document.getElementById("m3Btn");
const freePhotosBtn = document.getElementById("freePhotosBtn");
const m32Btn = document.getElementById("m32Btn");
const freePhotosBox = document.getElementById("freePhotosBox");
const xFreePhotosTitle = document.getElementById("xFreePhotosTitle");
const freePhotoSearchInput = document.getElementById("freePhotoSearchInput");
const freePhotoSearchBtn = document.getElementById("freePhotoSearchBtn");
const freePhotosStatus = document.getElementById("freePhotosStatus");
const freePhotosGrid = document.getElementById("freePhotosGrid");
const addFreePhotosBtn = document.getElementById("addFreePhotosBtn");
const loadMoreFreePhotosBtn = document.getElementById("loadMoreFreePhotosBtn");
const closeFreePhotosBtn = document.getElementById("closeFreePhotosBtn");
const logoBgShortcuts =
  document.getElementById("logoBgShortcuts");

const logoBackgroundCardSubtitle =
  document.getElementById(
    "logoBackgroundCardSubtitle"
  );
const freePhotosTabBtn = document.getElementById("freePhotosTabBtn");
const freeVideosTabBtn = document.getElementById("freeVideosTabBtn");
let freePhotoResults = []; 
let selectedFreePhotos = []; 
let selectedFreeVideos = [];
let freePhotoCropMap = {};
let freeMediaMode = "photo";
let logoBackgroundSelectMode = false;
let currentSearchQuery = ""; 
let currentSearchPage = 1;
let previewFreePhotoUrl = null;
let previewFreeVideoObject = null;
let freeVideoTrimStart = 0;
let freeVideoTrimEnd = 8;
let freeVideoRealDuration = 0;
let freeCropX = 50;
let freeCropY = 50;
let freeCropStartX = 0;
let freeCropStartY = 0;
let freeCropStartValueX = 50;
let freeCropStartValueY = 50;
let freeCropDragging = false;
const freePhotoPreviewBox = document.getElementById("freePhotoPreviewBox");
const freePhotoPreviewImage = document.getElementById("freePhotoPreviewImage");
const freeVideoPreviewPlayer = document.getElementById("freeVideoPreviewPlayer");
const freePhotoCropFrame = document.getElementById("freePhotoCropFrame");
const selectFreePreviewBtn = document.getElementById("selectFreePreviewBtn");
const closeFreePreviewBtn = document.getElementById("closeFreePreviewBtn");
const freeVideoTrimBox = document.getElementById("freeVideoTrimBox");
const freeVideoTrimInfo = document.getElementById("freeVideoTrimInfo");
const setFreeVideoStartBtn = document.getElementById("setFreeVideoStartBtn");
const setFreeVideoEndBtn = document.getElementById("setFreeVideoEndBtn");
const m4Btn = document.getElementById("m4Btn");
const m5Btn = document.getElementById("m5Btn");
const m6Btn = document.getElementById("m6Btn");
const m7Btn = document.getElementById("m7Btn");
const xTelegramContact = document.getElementById("xTelegramContact");
const xFooterDesignedBy = document.getElementById("xFooterDesignedBy");
const xEmailContact = document.getElementById("xEmailContact");
const musicSettingsBtn = document.getElementById("musicSettingsBtn");
const musicSettingsBox = document.getElementById("musicSettingsBox");
const xMusicBtn = document.getElementById("xMusicBtn");
const xMusicTitle = document.getElementById("xMusicTitle");
const xMusicNote = document.getElementById("xMusicNote");
const musicPreviewAudio = document.getElementById("musicPreviewAudio");
const selectedMusicInfo = document.getElementById("selectedMusicInfo");
const selectedMusicLabel = document.getElementById("selectedMusicLabel");
const vahidMusicSelect = document.getElementById("vahidMusicSelect");
const userMusicFile = document.getElementById("userMusicFile");
const chooseUserMusicBtn = document.getElementById("chooseUserMusicBtn");
const addMusicBtn =
  document.getElementById(
    "addMusicBtn"
  );

const removeMusicBtn =
  document.getElementById(
    "removeMusicBtn"
  );

const xVahidMusicLabel =
  document.getElementById(
    "xVahidMusicLabel"
  );
const xUserMusicLabel = document.getElementById("xUserMusicLabel");
const closeMusicBtn = document.getElementById("closeMusicBtn");
const createTextLogoBtn = document.getElementById("createTextLogoBtn");
const textLogoMakerBox = document.getElementById("textLogoMakerBox");
const closeTextLogoBtn = document.getElementById("closeTextLogoBtn");
const useTextLogoBtn = document.getElementById("useTextLogoBtn");
const logoFirstName = document.getElementById("logoFirstName");
const logoLastName = document.getElementById("logoLastName");
const textLogoCanvas = document.getElementById("textLogoCanvas");
const logoPreviewGrid = document.getElementById("logoPreviewGrid");
const logoFrameColors = document.getElementById("logoFrameColors");
const logoTextColors = document.getElementById("logoTextColors");
const xTextLogoTitle = document.getElementById("xTextLogoTitle");
const xLogoFirstNameLabel = document.getElementById("xLogoFirstNameLabel");
const xLogoLastNameLabel = document.getElementById("xLogoLastNameLabel");
const xLogoPreviewLabel = document.getElementById("xLogoPreviewLabel");
const xLogoCaseLabel = document.getElementById("xLogoCaseLabel");
const xLogoGradientLabel = document.getElementById("xLogoGradientLabel");
const xLogoFrameColorLabel = document.getElementById("xLogoFrameColorLabel");
const xLogoTextColorLabel = document.getElementById("xLogoTextColorLabel");
const xLogoBackgroundLabel = document.getElementById("xLogoBackgroundLabel");
const logoBackgroundSearchBtn = document.getElementById("logoBackgroundSearchBtn");
const logoBackgroundClearBtn = document.getElementById("logoBackgroundClearBtn");
const xLogoBgSearchBtn = logoBackgroundSearchBtn;
const xLogoBgClearBtn = logoBackgroundClearBtn;
const logoFirstUpBtn = document.getElementById("logoFirstUpBtn");
const logoFirstDownBtn = document.getElementById("logoFirstDownBtn");
const logoLastUpBtn = document.getElementById("logoLastUpBtn");
const logoLastDownBtn = document.getElementById("logoLastDownBtn");
const logoFirstBiggerBtn = document.getElementById("logoFirstBiggerBtn");
const logoFirstSmallerBtn = document.getElementById("logoFirstSmallerBtn");
const logoLastBiggerBtn = document.getElementById("logoLastBiggerBtn");
const logoLastSmallerBtn = document.getElementById("logoLastSmallerBtn");
const logoFontNextBtn = document.getElementById("logoFontNextBtn");
const logoFontName = document.getElementById("logoFontName");
const logoSizeResetBtn = document.getElementById("logoSizeResetBtn");
const downloadTextLogoBtn = document.getElementById("downloadTextLogoBtn");
const xLogoControlNameLabel = document.getElementById("xLogoControlNameLabel");
const xLogoControlLastNameLabel = document.getElementById("xLogoControlLastNameLabel");
const xLogoControlFontLabel = document.getElementById("xLogoControlFontLabel");
const mediaPreparingBox = document.getElementById("mediaPreparingBox");
const mediaPreparingText = document.getElementById("mediaPreparingText");
const mediaPreparingPercent = document.getElementById("mediaPreparingPercent");

const videoBuildCard =
  document.getElementById("videoBuildCard");

const videoBuildTitle =
  document.getElementById("videoBuildTitle");

const videoBuildActions =
  document.getElementById("videoBuildActions");

const closeVideoBuildCardBtn =
  document.getElementById("closeVideoBuildCardBtn");

const cancelVideoBuildBtn =
  document.getElementById("cancelVideoBuildBtn");

const viewLastVideoBtn =
  document.getElementById("viewLastVideoBtn");

const videoAlbumCard =
  document.getElementById("videoAlbumCard");

const videoAlbumTitle =
  document.getElementById("videoAlbumTitle");

const videoAlbumList =
  document.getElementById("videoAlbumList");

const closeVideoAlbumBtn =
  document.getElementById("closeVideoAlbumBtn");

const deleteSelectedVideosBtn =
  document.getElementById(
    "deleteSelectedVideosBtn"
  );

let selectedVideoAlbumIds =
  new Set();

let ipLastBuiltVideoUrl =
  "";

let ipLastBuiltVideoExtension =
  "mp4";

let ipBuiltVideoAlbum =
  [];

const IP_VIDEO_LIBRARY_DB_NAME =
  "IzyPostVideoLibraryDB";

const IP_VIDEO_LIBRARY_DB_VERSION =
  1;

const IP_VIDEO_LIBRARY_STORE =
  "videos";

let ipVideoLibraryDb =
  null;

function openVideoLibraryDb() {

  if (ipVideoLibraryDb) {
    return Promise.resolve(
      ipVideoLibraryDb
    );
  }

  return new Promise(
    function (resolve, reject) {

      const request =
        indexedDB.open(
          IP_VIDEO_LIBRARY_DB_NAME,
          IP_VIDEO_LIBRARY_DB_VERSION
        );

      request.onupgradeneeded =
        function (event) {

          const db =
            event.target.result;

          if (
            !db.objectStoreNames.contains(
              IP_VIDEO_LIBRARY_STORE
            )
          ) {

            const store =
              db.createObjectStore(
                IP_VIDEO_LIBRARY_STORE,
                {
                  keyPath: "id"
                }
              );

            store.createIndex(
              "createdAt",
              "createdAt",
              {
                unique: false
              }
            );

          }

        };

      request.onsuccess =
        function (event) {

          ipVideoLibraryDb =
            event.target.result;

          resolve(
            ipVideoLibraryDb
          );

        };

      request.onerror =
        function () {

          reject(
            request.error
          );

        };

    }
  );

}

async function saveVideoLibraryRecord(
  record
) {

  const db =
    await openVideoLibraryDb();

  return new Promise(
    function (resolve, reject) {

      const transaction =
        db.transaction(
          IP_VIDEO_LIBRARY_STORE,
          "readwrite"
        );

      transaction
        .objectStore(
          IP_VIDEO_LIBRARY_STORE
        )
        .put(record);

      transaction.oncomplete =
        function () {
          resolve();
        };

      transaction.onerror =
        function () {
          reject(
            transaction.error
          );
        };

    }
  );

}

async function deleteVideoLibraryRecord(
  videoId
) {

  const db =
    await openVideoLibraryDb();

  return new Promise(
    function (resolve, reject) {

      const transaction =
        db.transaction(
          IP_VIDEO_LIBRARY_STORE,
          "readwrite"
        );

      transaction
        .objectStore(
          IP_VIDEO_LIBRARY_STORE
        )
        .delete(videoId);

      transaction.oncomplete =
        function () {
          resolve();
        };

      transaction.onerror =
        function () {
          reject(
            transaction.error
          );
        };

    }
  );

}

async function loadVideoLibraryRecords() {

  const db =
    await openVideoLibraryDb();

  return new Promise(
    function (resolve) {

      const transaction =
        db.transaction(
          IP_VIDEO_LIBRARY_STORE,
          "readonly"
        );

      const request =
        transaction
          .objectStore(
            IP_VIDEO_LIBRARY_STORE
          )
          .getAll();

      request.onsuccess =
        function () {

          const records =
            request.result || [];

          records.sort(
            function (a, b) {
              return (
                Number(b.createdAt) -
                Number(a.createdAt)
              );
            }
          );

          resolve(records);

        };

      request.onerror =
        function () {
          resolve([]);
        };

    }
  );

}

function revokeVideoAlbumUrls() {

  ipBuiltVideoAlbum.forEach(
    function (albumItem) {

      if (albumItem.url) {
        URL.revokeObjectURL(
          albumItem.url
        );
      }

    }
  );

}

async function loadPersistentVideoAlbum() {

  try {

    const records =
      await loadVideoLibraryRecords();

    revokeVideoAlbumUrls();

    ipBuiltVideoAlbum =
      records.map(
        function (record) {

          return {
            id: record.id,
            name: record.name,
            extension:
              record.extension || "mp4",
            createdAt:
              record.createdAt,
            thumbnail:
              record.thumbnail || "",
            blob:
              record.blob,
            url:
              URL.createObjectURL(
                record.blob
              )
          };

        }
      );

    const newestVideo =
      ipBuiltVideoAlbum[0];

    ipLastBuiltVideoUrl =
      newestVideo
        ? newestVideo.url
        : "";

    ipLastBuiltVideoExtension =
      newestVideo
        ? newestVideo.extension
        : "mp4";

    viewLastVideoBtn.style.display =
      ipBuiltVideoAlbum.length
        ? "block"
        : "none";

    buildVideoAlbumList();

  } catch (error) {

    console.error(
      "Video library load failed:",
      error
    );

  }

}

function makeVideoLibraryId() {

  return (
    "video-" +
    Date.now() +
    "-" +
    Math.random()
      .toString(36)
      .slice(2, 9)
  );

}

function makeDefaultVideoName(
  createdAt
) {

  const date =
    new Date(createdAt);

  const year =
    date.getFullYear();

  const month =
    String(
      date.getMonth() + 1
    ).padStart(2, "0");

  const day =
    String(
      date.getDate()
    ).padStart(2, "0");

  const hour =
    String(
      date.getHours()
    ).padStart(2, "0");

  const minute =
    String(
      date.getMinutes()
    ).padStart(2, "0");

  return (
    "IzyPost " +
    year +
    "-" +
    month +
    "-" +
    day +
    " " +
    hour +
    "-" +
    minute
  );

}

function createMovFileThumbnail() {

  const canvas =
    document.createElement(
      "canvas"
    );

  const context =
    canvas.getContext(
      "2d"
    );

  canvas.width = 360;
  canvas.height = 360;

  const backgroundGradient =
    context.createLinearGradient(
      0,
      0,
      canvas.width,
      canvas.height
    );

  backgroundGradient.addColorStop(
    0,
    "#172d4d"
  );

  backgroundGradient.addColorStop(
    0.52,
    "#285c9e"
  );

  backgroundGradient.addColorStop(
    1,
    "#38264f"
  );

  context.fillStyle =
    backgroundGradient;

  context.fillRect(
    0,
    0,
    canvas.width,
    canvas.height
  );

  const lightGradient =
    context.createRadialGradient(
      110,
      70,
      10,
      110,
      70,
      260
    );

  lightGradient.addColorStop(
    0,
    "rgba(145,196,255,.34)"
  );

  lightGradient.addColorStop(
    1,
    "rgba(145,196,255,0)"
  );

  context.fillStyle =
    lightGradient;

  context.fillRect(
    0,
    0,
    canvas.width,
    canvas.height
  );

  context.strokeStyle =
    "rgba(255,255,255,.38)";

  context.lineWidth = 5;

  context.beginPath();

  context.roundRect(
    38,
    38,
    284,
    284,
    30
  );

  context.stroke();

  context.fillStyle =
    "rgba(255,255,255,.12)";

  context.beginPath();

  context.arc(
    180,
    118,
    50,
    0,
    Math.PI * 2
  );

  context.fill();

  context.fillStyle =
    "#ffffff";

  context.beginPath();

  context.moveTo(
    164,
    88
  );

  context.lineTo(
    164,
    148
  );

  context.lineTo(
    214,
    118
  );

  context.closePath();

  context.fill();

  context.fillStyle =
    "#ffffff";

  context.textAlign =
    "center";

  context.textBaseline =
    "middle";

  context.font =
    "900 64px Arial";

  context.fillText(
    "MOV",
    180,
    218
  );

  context.fillStyle =
    "#b9d9ff";

  context.font =
    "900 25px Arial";

  context.fillText(
    "VIDEO FILE",
    180,
    273
  );

  return canvas.toDataURL(
    "image/jpeg",
    0.88
  );

}

function createVideoThumbnail(
  videoBlob
) {

  return new Promise(
    function (resolve) {

      const video =
        document.createElement(
          "video"
        );

      const thumbnailCanvas =
        document.createElement(
          "canvas"
        );

      const thumbnailContext =
        thumbnailCanvas.getContext(
          "2d"
        );

      const temporaryUrl =
        URL.createObjectURL(
          videoBlob
        );

      let finished =
        false;

      function finish(
        thumbnail
      ) {

        if (finished) {
          return;
        }

        finished = true;

        URL.revokeObjectURL(
          temporaryUrl
        );

        video.remove();

        resolve(
          thumbnail || ""
        );

      }

      function drawThumbnail() {

        try {

          const videoWidth =
            video.videoWidth || 320;

          const videoHeight =
            video.videoHeight || 180;

          const maximumSize =
            360;

          const scale =
            Math.min(
              maximumSize / videoWidth,
              maximumSize / videoHeight,
              1
            );

          thumbnailCanvas.width =
            Math.max(
              1,
              Math.round(
                videoWidth * scale
              )
            );

          thumbnailCanvas.height =
            Math.max(
              1,
              Math.round(
                videoHeight * scale
              )
            );

          thumbnailContext.drawImage(
            video,
            0,
            0,
            thumbnailCanvas.width,
            thumbnailCanvas.height
          );

          finish(
            thumbnailCanvas.toDataURL(
              "image/jpeg",
              0.78
            )
          );

        } catch (error) {

          finish("");

        }

      }

      video.muted = true;
      video.playsInline = true;
      video.preload = "auto";

      video.onloadeddata =
        function () {

          try {

            video.currentTime =
              Math.min(
                0.12,
                Math.max(
                  0,
                  Number(video.duration) -
                  0.05
                )
              );

          } catch (error) {

            drawThumbnail();

          }

        };

      video.onseeked =
        drawThumbnail;

      video.onerror =
        function () {
          finish("");
        };

      video.src =
        temporaryUrl;

      video.load();

      setTimeout(
        function () {

          if (!finished) {
            drawThumbnail();
          }

        },
        2500
      );

    }
  );

}

function getDefaultIzyPostLogoSrc() {
  return "/Assets/Images/ip-logo.png";
}

function getDefaultBlankProfileSrc() {
  return "data:image/svg+xml;charset=UTF-8," +
    encodeURIComponent(
      '<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">' +
      '<rect width="400" height="400" fill="#ffffff"/>' +
      '</svg>'
    );
}

function refreshInformationPreviews() {

  const lang =
    localStorage.getItem("ip_language") || "en";

  const userLogo =
    localStorage.getItem("ip_outroLogo");

  const userProfile =
    localStorage.getItem("ip_profilePhoto");

  logoPhotoPreview.src =
    userLogo || getDefaultIzyPostLogoSrc();

  logoPhotoPreview.style.display = "block";

  savedLogoInfo.innerHTML =
    userLogo
      ? (lang === "tr" ? "✓ Logo mevcut" : "✓ Logo exists")
      : (lang === "tr" ? "IzyPost varsayılan logosu" : "Default IzyPost logo");

  profilePhotoPreview.src =
    userProfile || getDefaultBlankProfileSrc();

  profilePhotoPreview.style.display = "block";

  savedProfilePhotoInfo.innerHTML =
    userProfile
      ? (lang === "tr" ? "✓ Profil fotoğrafı seçildi" : "✓ Profile photo selected")
      : (lang === "tr" ? "Varsayılan boş fotoğraf" : "Default blank photo");

}

refreshStaticAssetsCache();


/* ***** 13A - INDEXEDDB PROJECT RECOVERY ***** */

const IP_PROJECT_DB_NAME = "IzyPostProjectDB";
const IP_PROJECT_DB_VERSION = 1;
const IP_PROJECT_STORE = "activeProject";
const IP_PROJECT_KEY = "current";

let ipProjectDb = null;
let ipProjectSaveTimer = null;
let ipProjectReady = false;

function openIzyPostProjectDb() {

  return new Promise(function(resolve, reject){

    const request =
      indexedDB.open(
        IP_PROJECT_DB_NAME,
        IP_PROJECT_DB_VERSION
      );

    request.onupgradeneeded = function(event){

      const db =
        event.target.result;

      if (!db.objectStoreNames.contains(IP_PROJECT_STORE)) {
        db.createObjectStore(IP_PROJECT_STORE);
      }

    };

    request.onsuccess = function(event){
      ipProjectDb = event.target.result;
      resolve(ipProjectDb);
    };

    request.onerror = function(){
      reject(request.error);
    };

  });

}

async function getIzyPostProjectDb() {

  if (ipProjectDb) {
    return ipProjectDb;
  }

  return await openIzyPostProjectDb();

}

async function saveIzyPostProjectNow() {

  if (!ipProjectReady) return;

  const db =
    await getIzyPostProjectDb();

  const selectedSizeInput =
    document.querySelector(
      'input[name="videoSize"]:checked'
    );

  const projectData = {
    projectSchemaVersion: 2,
    selectedPhotos: selectedPhotos,
    photoCaptions: photoCaptions,
    photoDurations: photoDurations,
    selectedPhotoTotal: selectedPhotoTotal,
    selectedMusicUrl: selectedMusicUrl,
    selectedMusicName: selectedMusicName,
    selectedMusicSource:
      selectedMusicUrl && selectedMusicUrl.indexOf("/Music/") === 0
        ? "vahid"
        : selectedMusicUrl
          ? "user"
          : "",
    outputSize: selectedSizeInput ? selectedSizeInput.value : "4:5",
    transitionMode: window.transitionMode || "normal",
    savedAt: Date.now()
  };

  return new Promise(function(resolve, reject){

    const tx =
      db.transaction(IP_PROJECT_STORE, "readwrite");

    const store =
      tx.objectStore(IP_PROJECT_STORE);

    store.put(projectData, IP_PROJECT_KEY);

    tx.oncomplete = function(){
      resolve();
    };

    tx.onerror = function(){
      reject(tx.error);
    };

  });

}

function scheduleIzyPostProjectSave() {

  clearTimeout(ipProjectSaveTimer);

  ipProjectSaveTimer =
    setTimeout(function(){
      saveIzyPostProjectNow().catch(function(){});
    }, 300);

}

async function loadIzyPostSavedProject() {

  const db =
    await getIzyPostProjectDb();

  return new Promise(function(resolve){

    const tx =
      db.transaction(IP_PROJECT_STORE, "readonly");

    const store =
      tx.objectStore(IP_PROJECT_STORE);

    const request =
      store.get(IP_PROJECT_KEY);

    request.onsuccess = function(){
      resolve(request.result || null);
    };

    request.onerror = function(){
      resolve(null);
    };

  });

}

async function clearIzyPostSavedProject() {

  const db =
    await getIzyPostProjectDb();

  return new Promise(function(resolve){

    const tx =
      db.transaction(IP_PROJECT_STORE, "readwrite");

    const store =
      tx.objectStore(IP_PROJECT_STORE);

    store.delete(IP_PROJECT_KEY);

    tx.oncomplete = function(){
      resolve();
    };

    tx.onerror = function(){
      resolve();
    };

  });

}


/* ***** LOCAL TEMPLATE LIBRARY ENGINE ***** */

const timelineWorkspaceTemplatesBtn =
  document.getElementById(
    "timelineWorkspaceTemplatesBtn"
  );

const timelineWorkspaceAlbumBtn =
  document.getElementById(
    "timelineWorkspaceAlbumBtn"
  );

const templateLibraryBox =
  document.getElementById(
    "templateLibraryBox"
  );

const templateNameInput =
  document.getElementById(
    "templateNameInput"
  );

const saveCurrentTemplateBtn =
  document.getElementById(
    "saveCurrentTemplateBtn"
  );

const closeTemplateLibraryBtn =
  document.getElementById(
    "closeTemplateLibraryBtn"
  );

const templateList =
  document.getElementById(
    "templateList"
  );

const templateLibraryTitle =
  document.getElementById(
    "templateLibraryTitle"
  );

const templateLibrarySubtitle =
  document.getElementById(
    "templateLibrarySubtitle"
  );


const IP_TEMPLATE_DB_NAME =
  "IzyPostTemplatesDB";

const IP_TEMPLATE_DB_VERSION =
  1;

const IP_TEMPLATE_STORE =
  "templates";

let ipTemplateDb = null;

let ipPendingTemplateSpeeches =
  null;

let ipTargetTemplateSlotIndex =
  null;


function normalizeTemplateBlueprint(
  blueprint,
  index
) {

  if (
    Array.isArray(
      blueprint
    )
  ) {

    return {
      slotIndex:
        index,

      mediaType:
        "photo",

      duration:
        10,

      speeches:
        blueprint.map(
          cleanSpeechForTemplate
        )
    };

  }

  return {
    slotIndex:
      index,

    mediaType:
      (
        blueprint &&
        blueprint.mediaType === "video"
      )
        ? "video"
        : "photo",

    duration:
      Math.max(
        1,
        Number(
          blueprint &&
          blueprint.duration
        ) || 10
      ),

    speeches:
      Array.isArray(
        blueprint &&
        blueprint.speeches
      )
        ? blueprint.speeches.map(
            cleanSpeechForTemplate
          )
        : []
  };

}


function createTemplateSlotPreview(
  mediaType,
  requiredDuration
) {

  const isVideo =
    mediaType === "video";

  const safeRequiredDuration =
    Math.max(
      1,
      Number(
        requiredDuration
      ) || 10
    );

  const minimumTimeText =
    isVideo
      ? (
          currentLanguage === "tr"
            ? (
                "MİN " +
                safeRequiredDuration
                  .toFixed(1)
                  .replace(".0", "") +
                " sn"
              )
            : (
                "Min " +
                safeRequiredDuration
                  .toFixed(1)
                  .replace(".0", "") +
                "s"
              )
        )
      : "";

  const title =
    currentLanguage === "tr"
      ? (
          isVideo
            ? "VİDEO ALANI"
            : "FOTOĞRAF ALANI"
        )
      : (
          isVideo
            ? "VIDEO SLOT"
            : "PHOTO SLOT"
        );


  const mediaIcon =
    isVideo
      ? (
          '<rect x="275" y="225" width="250" height="180" rx="35" fill="none" stroke="#ffad61" stroke-width="24"/>' +
          '<path d="M370 275l105 40-105 40z" fill="#ffad61"/>'
        )
      : (
          '<rect x="270" y="220" width="260" height="190" rx="35" fill="none" stroke="#ffad61" stroke-width="24"/>' +
          '<circle cx="350" cy="285" r="25" fill="#ffad61"/>' +
          '<path d="M300 375l70-70 48 48 35-35 47 57z" fill="#ffad61"/>'
        );

  const svg =
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">' +
      '<defs>' +
        '<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">' +
          '<stop offset="0%" stop-color="#202a3b"/>' +
          '<stop offset="100%" stop-color="#344156"/>' +
        '</linearGradient>' +
      '</defs>' +
      '<rect width="800" height="800" rx="80" fill="url(#g)"/>' +
      mediaIcon +
      '<text x="400" y="515" fill="#ffffff" font-family="Arial" font-size="58" font-weight="900" text-anchor="middle">' +
        title +
      '</text>' +

      (
        isVideo
          ? (
              '<text x="400" y="635" fill="#ffad61" font-family="Arial" font-size="56" font-weight="900" text-anchor="middle">' +
                minimumTimeText
                  .replace("MİN ", "Min ")
                  .replace(" sn", "s") +
              '</text>'
            )
          : ""
      ) +

    '</svg>';

  return (
    "data:image/svg+xml;charset=UTF-8," +
    encodeURIComponent(
      svg
    )
  );

}


function createTemplateMediaSlot(
  blueprint,
  index
) {

  const normalized =
    normalizeTemplateBlueprint(
      blueprint,
      index
    );

  return {
    id:
      createPhotoId(),

    type:
      "template-slot",

    name:
      currentLanguage === "tr"
        ? (
            normalized.mediaType === "video"
              ? "Video Alanı"
              : "Fotoğraf Alanı"
          )
        : (
            normalized.mediaType === "video"
              ? "Video Slot"
              : "Photo Slot"
          ),

    isTemplateSlot:
      true,

    templateSlotIndex:
      index,

    templateMediaType:
      normalized.mediaType,

    isPhonePhoto:
      false,

    isFreePhoto:
      false,

    isFreeVideo:
      false,

    url:
      createTemplateSlotPreview(
        normalized.mediaType,
        normalized.duration
      ),

    thumbnail:
      createTemplateSlotPreview(
        normalized.mediaType,
        normalized.duration
      ),

    caption:
      "",

    duration:
      normalized.duration,

    requiredDuration:
      normalized.duration,

    speechList:
      normalized.speeches.map(
        cleanSpeechForTemplate
      ),

    voiceUrl:
      "",

    voiceText:
      "",

    voiceGender:
      getLastSelectedAiVoiceGender()
  };

}


function getTemplateSlotIndexes() {

  const indexes = [];

  selectedPhotos.forEach(
    function (file, index) {

      if (
        file &&
        file.isTemplateSlot
      ) {
        indexes.push(
          index
        );
      }

    }
  );

  if (
    Number.isInteger(
      ipTargetTemplateSlotIndex
    )
  ) {

    const targetPosition =
      indexes.indexOf(
        ipTargetTemplateSlotIndex
      );

    if (
      targetPosition > 0
    ) {

      indexes.splice(
        targetPosition,
        1
      );

      indexes.unshift(
        ipTargetTemplateSlotIndex
      );

    }

  }

  return indexes;

}


function installMediaIntoTemplateSlots(
  mediaItems
) {

  const incomingMedia =
    Array.isArray(
      mediaItems
    )
      ? mediaItems
      : [];

  const slotIndexes =
    getTemplateSlotIndexes();

  let shortVideoFound =
    false;

  let shortVideoRequiredDuration =
    0;

  let shortVideoSelectedDuration =
    0;

  incomingMedia.forEach(
    function (media) {

      const slotIndex =
        slotIndexes.length
          ? slotIndexes.shift()
          : -1;

      if (
        slotIndex < 0
      ) {

        selectedPhotos.push(
          media
        );

        return;

      }

      const slot =
        selectedPhotos[
          slotIndex
        ];

      const requiredDuration =
        Math.max(
          1,
          Number(
            slot.requiredDuration ||
            slot.duration
          ) || 10
        );

      const isVideo =
  media.type === "video" ||
  media.isFreeVideo;

const slotWasVideo =
  slot.templateMediaType === "video";

if (
  slotWasVideo !== isVideo
) {

  const accepted =
    confirm(

      slotWasVideo

        ? (

            currentLanguage === "tr"

              ? "Bu alan aslında bir videoydu.\nYerine fotoğraf koymak istediğinizden emin misiniz?"

              : "This slot was originally a video.\nAre you sure you want to use a photo?"

          )

        : (

            currentLanguage === "tr"

              ? "Bu alan aslında bir fotoğraftı.\nYerine video koymak istediğinizden emin misiniz?"

              : "This slot was originally a photo.\nAre you sure you want to use a video?"

          )

    );

  if (!accepted) {
    return;
  }

}

      const realVideoDuration =
        Math.max(
          0,
          Number(
            media.realDuration
          ) || 0,
          Number(
            media.duration
          ) || 0,
          (
            Number(
              media.endTime
            ) || 0
          ) -
          (
            Number(
              media.startTime
            ) || 0
          )
        );

      if (
        isVideo &&
        realVideoDuration + 0.05 <
        requiredDuration
      ) {

        shortVideoFound =
          true;

        shortVideoRequiredDuration =
          requiredDuration;

        shortVideoSelectedDuration =
          realVideoDuration;

        return;

      }

      media.duration =
        requiredDuration;

      media.caption =
        "";

      media.speechList =
        ensureMediaSpeechList(
          slot
        ).map(
          cleanSpeechForTemplate
        );

      if (
        isVideo
      ) {

        media.realDuration =
          realVideoDuration;

        media.startTime =
          0;

        media.endTime =
          requiredDuration;

      } else {

        media.cropX =
          50;

        media.cropY =
          50;

      }

      selectedPhotos[
        slotIndex
      ] =
        media;

    }
  );

  ipTargetTemplateSlotIndex =
    null;

  if (
    shortVideoFound
  ) {

    const requiredSeconds =
      Math.max(
        1,
        Number(
          shortVideoRequiredDuration
        ) || 10
      );

    const selectedSeconds =
      Math.max(
        0,
        Number(
          shortVideoSelectedDuration
        ) || 0
      );

    const requiredLabel =
      requiredSeconds
        .toFixed(1)
        .replace(".0", "");

    const selectedLabel =
      selectedSeconds
        .toFixed(1)
        .replace(".0", "");

    alert(
      currentLanguage === "tr"
        ? (
            "Bu şablon için video en az " +
            requiredLabel +
            " saniye olmalıdır.\n" +
            "Seçilen video: " +
            selectedLabel +
            " saniye."
          )
        : (
            "This template requires a video of at least " +
            requiredLabel +
            " seconds.\n" +
            "Selected video: " +
            selectedLabel +
            " seconds."
          )
    );

  }

}


function openIzyPostTemplateDb() {

  return new Promise(
    function (resolve, reject) {

      const request =
        indexedDB.open(
          IP_TEMPLATE_DB_NAME,
          IP_TEMPLATE_DB_VERSION
        );

      request.onupgradeneeded =
        function (event) {

          const db =
            event.target.result;

          if (
            !db.objectStoreNames.contains(
              IP_TEMPLATE_STORE
            )
          ) {

            db.createObjectStore(
              IP_TEMPLATE_STORE,
              {
                keyPath: "id"
              }
            );

          }

        };

      request.onsuccess =
        function (event) {

          ipTemplateDb =
            event.target.result;

          resolve(
            ipTemplateDb
          );

        };

      request.onerror =
        function () {

          reject(
            request.error
          );

        };

    }
  );

}


async function getIzyPostTemplateDb() {

  return (
    ipTemplateDb ||
    await openIzyPostTemplateDb()
  );

}


function collectTemplateLocalSettings() {

  const settings = {};

  for (
    let i = 0;
    i < localStorage.length;
    i++
  ) {

    const key =
      localStorage.key(i);

    if (
      !key ||
      key.indexOf("ip_") !== 0
    ) {
      continue;
    }

    if (
      key === "ip_selectedMusicUrl" ||
      key === "ip_selectedMusicName" ||
      key === "ip_selectedMusicSource" ||
      key === "ip_pendingTemplateSpeeches" ||
      key === "ip_templateOutputSize"
    ) {
      continue;
    }

    settings[key] =
      localStorage.getItem(key);

  }

  return settings;

}


function cleanSpeechForTemplate(
  speech
) {

  return {

    id:
      createSpeechId(),

    startTime:
      Number(
        speech.startTime
      ) || 0,

    duration:
      Number(
        speech.duration
      ) || 2,

    text:
      String(
        speech.text || ""
      ),

    color:
      speech.color ||
      "#ffffff",

    voiceGender:
      (
        speech.voiceGender === "male" ||
        speech.voiceGender === "female"
      )
        ? speech.voiceGender
        : getLastSelectedAiVoiceGender(),

    voiceUrl:
      "",

    voiceText:
      "",

    voiceLanguage:
      "",

    audioSource:
      "ai",

    uploadedAudioUrl:
      "",

    uploadedAudioName:
      "",

    uploadedAudioDuration:
      0,

    recordedAudioUrl:
      "",

    recordedAudioName:
      "",

    recordedAudioDuration:
      0,

    fontScale:
      Number(
        speech.fontScale
      ) || 1,

    positionX:
      Number(
        speech.positionX
      ) || 50,

    positionY:
      Number(
        speech.positionY
      ) || 72

  };

}


function collectTemplateSpeechBlueprints() {

  return selectedPhotos.map(
    function (file, index) {

      const mediaType =
        (
          file.type === "video" ||
          file.isFreeVideo
        )
          ? "video"
          : "photo";

      return {
        slotIndex:
          index,

        mediaType:
          mediaType,

        duration:
          Math.max(
            1,
            Number(
              file.requiredDuration ||
              file.duration
            ) || 10
          ),

        speeches:
          ensureMediaSpeechList(
            file
          ).map(
            cleanSpeechForTemplate
          )
      };

    }
  );

}


async function saveCurrentIzyPostTemplate() {

  const name =
    templateNameInput.value.trim();

  if (!name) {

    alert(
      currentLanguage === "tr"
        ? "Şablon adını yazın."
        : "Enter a template name."
    );

    return;

  }

  const selectedSize =
    document.querySelector(
      'input[name="videoSize"]:checked'
    );

  const template = {

    id:
      "tpl_" +
      Date.now() +
      "_" +
      Math.random()
        .toString(36)
        .slice(2, 8),

    name:
      name,

    createdAt:
      Date.now(),

    settings:
      collectTemplateLocalSettings(),

    outputSize:
      selectedSize
        ? selectedSize.value
        : "4:5",

    transitionMode:
      window.transitionMode ||
      "normal",

    speechBlueprints:
      collectTemplateSpeechBlueprints()

  };

  const db =
    await getIzyPostTemplateDb();

  await new Promise(
    function (resolve, reject) {

      const tx =
        db.transaction(
          IP_TEMPLATE_STORE,
          "readwrite"
        );

      tx.objectStore(
        IP_TEMPLATE_STORE
      ).put(
        template
      );

      tx.oncomplete =
        resolve;

      tx.onerror =
        function () {

          reject(
            tx.error
          );

        };

    }
  );

  templateNameInput.value =
    "";

  await renderIzyPostTemplates();

}


async function getAllIzyPostTemplates() {

  const db =
    await getIzyPostTemplateDb();

  return await new Promise(
    function (resolve) {

      const tx =
        db.transaction(
          IP_TEMPLATE_STORE,
          "readonly"
        );

      const request =
        tx.objectStore(
          IP_TEMPLATE_STORE
        ).getAll();

      request.onsuccess =
        function () {

          resolve(
            (
              request.result ||
              []
            ).sort(
              function (a, b) {

                return (
                  b.createdAt -
                  a.createdAt
                );

              }
            )
          );

        };

      request.onerror =
        function () {

          resolve([]);

        };

    }
  );

}


async function deleteIzyPostTemplate(
  id
) {

  const db =
    await getIzyPostTemplateDb();

  await new Promise(
    function (resolve) {

      const tx =
        db.transaction(
          IP_TEMPLATE_STORE,
          "readwrite"
        );

      tx.objectStore(
        IP_TEMPLATE_STORE
      ).delete(
        id
      );

      tx.oncomplete =
        resolve;

      tx.onerror =
        resolve;

    }
  );

  await renderIzyPostTemplates();

}


function applyTemplateSettings(
  settings
) {

  Object.keys(
    settings || {}
  ).forEach(
    function (key) {

      localStorage.setItem(
        key,
        settings[key]
      );

    }
  );

}


async function loadIzyPostTemplate(
  template
) {

  applyTemplateSettings(
    template.settings ||
    {}
  );

  const blueprints =
    Array.isArray(
      template.speechBlueprints
    )
      ? template.speechBlueprints
      : [];

  const templateSlots =
    blueprints.map(
      function (
        blueprint,
        index
      ) {

        return createTemplateMediaSlot(
          blueprint,
          index
        );

      }
    );

  localStorage.removeItem(
    "ip_pendingTemplateSpeeches"
  );

  localStorage.setItem(
    "ip_transitionMode",
    template.transitionMode ||
    "normal"
  );

  localStorage.setItem(
    "ip_templateOutputSize",
    template.outputSize ||
    "4:5"
  );

  const db =
    await getIzyPostProjectDb();

  await new Promise(
    function (
      resolve,
      reject
    ) {

      const tx =
        db.transaction(
          IP_PROJECT_STORE,
          "readwrite"
        );

      tx.objectStore(
        IP_PROJECT_STORE
      ).put(
        {
          projectSchemaVersion:
            3,

          selectedPhotos:
            templateSlots,

          photoCaptions:
            templateSlots.map(
              function () {
                return "";
              }
            ),

          photoDurations:
            templateSlots.map(
              function (slot) {
                return slot.duration;
              }
            ),

          selectedPhotoTotal:
            templateSlots.length,

          selectedMusicUrl:
            "",

          selectedMusicName:
            "",

          selectedMusicSource:
            "",

          outputSize:
            template.outputSize ||
            "4:5",

          transitionMode:
            template.transitionMode ||
            "normal",

          savedAt:
            Date.now()
        },
        IP_PROJECT_KEY
      );

      tx.oncomplete =
        resolve;

      tx.onerror =
        function () {

          reject(
            tx.error
          );

        };

    }
  );

  location.reload();

}


function applyPendingTemplateSpeechesToMedia() {

  localStorage.removeItem(
    "ip_pendingTemplateSpeeches"
  );

  ipPendingTemplateSpeeches =
    null;

}


async function renderIzyPostTemplates() {

  const templates =
    await getAllIzyPostTemplates();

  templateList.innerHTML =
    "";

  if (!templates.length) {

    templateList.innerHTML =
      '<div class="template-empty">' +
      (
        currentLanguage === "tr"
          ? "Henüz şablon kaydedilmedi."
          : "No templates saved yet."
      ) +
      "</div>";

    return;

  }

  templates.forEach(
    function (template) {

      const item =
        document.createElement(
          "div"
        );

      item.className =
        "template-item";

      const date =
        new Date(
          template.createdAt
        ).toLocaleDateString();

      item.innerHTML =
        '<div class="template-item-name"></div>' +
        '<div class="template-item-meta"></div>' +
        '<div class="template-item-actions">' +
        '<button type="button" class="template-load-btn"></button>' +
        '<button type="button" class="template-delete-btn">×</button>' +
        "</div>";

      item.querySelector(
        ".template-item-name"
      ).textContent =
        template.name;

      item.querySelector(
        ".template-item-meta"
      ).textContent =
        (
          template.outputSize ||
          "4:5"
        ) +
        " • " +
        date;

      item.querySelector(
        ".template-load-btn"
      ).textContent =
        currentLanguage === "tr"
          ? "Şablonu Aç"
          : "Open Template";

      item.querySelector(
        ".template-load-btn"
      ).onclick =
        function () {

          loadIzyPostTemplate(
            template
          );

        };

      item.querySelector(
        ".template-delete-btn"
      ).onclick =
        function () {

          const accepted =
            confirm(
              currentLanguage === "tr"
                ? "Şablon silinsin mi?"
                : "Delete this template?"
            );

          if (accepted) {

            deleteIzyPostTemplate(
              template.id
            );

          }

        };

      templateList.appendChild(
        item
      );

    }
  );

}


function refreshTemplateLanguage() {

  if (
    !templateLibraryTitle
  ) {
    return;
  }

  templateLibraryTitle.textContent =
    currentLanguage === "tr"
      ? "Şablonlarım"
      : "My Templates";

  templateLibrarySubtitle.textContent =
    currentLanguage === "tr"
      ? "Harici medya olmadan tasarımınızı kaydedin ve yeniden açın."
      : "Save and reopen your complete design without external media.";

  templateNameInput.placeholder =
    currentLanguage === "tr"
      ? "Şablon adı"
      : "Template name";

  document.getElementById(
    "templateSaveSectionTitle"
  ).textContent =
    currentLanguage === "tr"
      ? "Mevcut Tasarımı Şablon Olarak Kaydet"
      : "Save Current Design as Template";

  document.getElementById(
    "templateLibrarySectionTitle"
  ).textContent =
    currentLanguage === "tr"
      ? "Şablonlarım"
      : "My Templates";

  saveCurrentTemplateBtn.textContent =
    currentLanguage === "tr"
      ? "Şablonu Kaydet"
      : "Save Template";

  closeTemplateLibraryBtn.textContent =
    currentLanguage === "tr"
      ? "Kapat"
      : "Close";

}


timelineWorkspaceTemplatesBtn.onclick =
  async function () {

    refreshTemplateLanguage();

    openIndependentCard(
      templateLibraryBox
    );

    await renderIzyPostTemplates();

  };


timelineWorkspaceAlbumBtn.onclick =
  function () {

    openVideoAlbum();

  };


saveCurrentTemplateBtn.onclick =
  function () {

    saveCurrentIzyPostTemplate()
      .catch(
        function () {

          alert(
            currentLanguage === "tr"
              ? "Şablon kaydedilemedi."
              : "Template save failed."
          );

        }
      );

  };


closeTemplateLibraryBtn.onclick =
  function () {

    closeIndependentCard(
      templateLibraryBox
    );

  };


/* ***** 14 - CANVAS SIZE ***** */
const W = canvas.width;
const H = canvas.height;

/* ***** 15 - START ***** */

/* ***** 15A - CONTACT CARD CONTROL ***** */

contactCardBtn.onclick = function () {

  if (
    freePhotosBox.style.display ===
    "block"
  ) {
    resetFreePhotosPanel();
  }

  refreshInformationPreviews();

  openIndependentCard(
    contactCardBox
  );

};

function openIndependentCard(cardElement) {

  if (!cardElement) return;

  document.body.classList.remove(
    "ip-timeline-card-active"
  );

  if (
    cardElement.parentElement !==
    document.body
  ) {

    document.body.insertBefore(
      cardElement,
      document.body.firstChild
    );

  }

  cardElement.style.display =
    "block";

  contactOverlay.style.display =
    "block";

  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });

}

function closeIndependentCard(cardElement) {

  if (cardElement) {
    cardElement.style.display =
      "none";
  }

  document.body.classList.add(
    "ip-timeline-card-active"
  );

  contactOverlay.style.display =
    "none";

  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });

}

function openCommandCardNearElement(
  cardElement,
  anchorElement
) {

  openIndependentCard(
    cardElement
  );

}

/* ***** 15AA - SETTINGS POPUP CONTROL ***** */

outputSettingsBtn.onclick = function () {

  if (
    freePhotosBox.style.display ===
    "block"
  ) {
    resetFreePhotosPanel();
  }

  openIndependentCard(
    outputSettingsBox
  );

};
textSettingsBtn.onclick = function () {

  if (
    freePhotosBox.style.display ===
    "block"
  ) {
    resetFreePhotosPanel();
  }

  refreshIntroOutroDurationControls();

  if (
    textSettingsBox.parentElement !==
    document.body
  ) {

    document.body.insertBefore(
      textSettingsBox,
      document.body.firstChild
    );

  }

  ensureUnifiedIntroWorkspace();

  document.body.classList.remove(
    "ip-timeline-card-active"
  );

  document.body.classList.remove(
    "ip-intro-preview-active"
  );

  document.body.classList.add(
    "ip-intro-card-active"
  );

  textSettingsBox.style.display =
    "grid";

  introPreviewBox.style.display =
    "block";

  contactOverlay.style.display =
    "block";

  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });

  requestAnimationFrame(
    function () {

      if (
        getIntroPreviewSourceImage()
      ) {

        previewIntroFrameBtn.click();

      }

    }
  );

};

outroSettingsBtn.onclick = function () {

  if (freePhotosBox.style.display === "block") {
    resetFreePhotosPanel();
  }

  refreshIntroOutroDurationControls();
  
  videoOutroTitle.value = introTitle.value;
  videoOutroName.value = outroName.value;
  videoOutroProfession.value = outroProfession.value;
  videoOutroContact.value = outroContact.value;

  if (videoOutroContact.value === "@username") {
    videoOutroContact.value = "URL";
  }

  openCommandCardNearElement(
    outroSettingsBox,
    outroSettingsBtn
  );

};

transitionBtn.onclick = function () {

  openTimelineCard();

};

musicSettingsBtn.onclick = function () {

  if (freePhotosBox.style.display === "block") {
    resetFreePhotosPanel();
  }
  
  openCommandCardNearElement(
    musicSettingsBox,
    musicSettingsBtn
  );
};

/* ***** 219 - TIMELINE WORKSPACE MENU CONTROL ***** */

timelineWorkspaceInformationBtn.onclick =
  function () {

    contactCardBtn.click();

  };

if (timelineWorkspaceOutputBtn) {

  timelineWorkspaceOutputBtn.onclick =
    function () {

      outputSettingsBtn.click();

    };

}

timelineWorkspaceIntroBtn.onclick =
  function () {

    textSettingsBtn.click();

  };

timelineWorkspaceOutroBtn.onclick =
  function () {

    outroSettingsBtn.click();

  };

timelineWorkspaceMusicBtn.onclick =
  function () {

    musicSettingsBtn.click();

  };

timelineWorkspaceDeviceMediaBtn.onclick =
  function () {

    photosInput.click();

  };

timelineWorkspaceFreeMediaBtn.onclick =
  function () {

    freePhotosBtn.click();

  };

contactOverlay.onclick = function () {

  return;

};

saveOutputSettingsBtn.onclick = function () {

  saveProjectPhotos();
  applyPhotoPreviewRatio();
  refreshTimelineOutputSizeIndicator();
  
  closeIndependentCard(
    outputSettingsBox
  );

};

document.querySelectorAll(
  '.timeline-header-size-option input[name="videoSize"]'
).forEach(
  function (sizeInput) {

    sizeInput.addEventListener(
      "change",
      function () {

        if (!sizeInput.checked) return;

        applyPhotoPreviewRatio();
        refreshTimelineOutputSizeIndicator();
        saveProjectPhotos();

        if (
          typeof window
            .syncIzyPostPreviewCanvasSize ===
            "function"
        ) {

          window
            .syncIzyPostPreviewCanvasSize(
              timelineLivePreviewCanvas
            );

        }

        requestAnimationFrame(
          function () {

            fitTimelinePreviewCanvasInsideSquare();

          }
        );

      }
    );

  }
);

saveTextSettingsBtn.onclick = function () {

  timelineIntroEnabled =
    introEnabledToggle.checked;

  localStorage.setItem(
    "ip_introEnabled",
    timelineIntroEnabled ? "yes" : "no"
  );

  localStorage.setItem("ip_introTitle", introTitle.value);
  localStorage.setItem("ip_introSubtitle", introSubtitle.value);

  localStorage.setItem(
    "ip_introTitleColor",
    getIntroTitleColor()
  );

  localStorage.setItem(
    "ip_introSubtitleColor",
    getIntroSubtitleColor()
  );

  localStorage.setItem(
    "ip_introShowFrame",
    introFrameToggle.checked ? "yes" : "no"
  );

  localStorage.setItem(
    "ip_introFrameThickness",
    localStorage.getItem("ip_introFrameThickness") || "thick"
  );

  localStorage.setItem(
    "ip_introLayout",
    getSelectedIntroLayout()
  );

  buildPhotoTextList();

  textSettingsBox.style.display =
    "none";

  document.body.classList.remove(
    "ip-intro-card-active"
  );

  document.body.classList.add(
    "ip-timeline-card-active"
  );

  contactOverlay.style.display =
    "none";

  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });

};

clearIntroSettingsBtn.onclick = function () {

  if (
    !confirm(
      currentLanguage === "en"
        ? "Clear all Intro settings?"
        : "Tüm başlangıç ayarları temizlensin mi?"
    )
  ) return;

  localStorage.removeItem("ip_introTitle");
  localStorage.removeItem("ip_introSubtitle");
  localStorage.removeItem("ip_introCoverImage");
  localStorage.removeItem("ip_introCoverBlank");
  localStorage.removeItem("ip_introShowFrame");
  localStorage.removeItem("ip_introFrameThickness");
  localStorage.removeItem("ip_introFrameColor");
  localStorage.removeItem("ip_introLayout");
  localStorage.removeItem("ip_introTitleColor");
  localStorage.removeItem("ip_introSubtitleColor");

  localStorage.removeItem("ip_introTitleScale");
  localStorage.removeItem("ip_introSubtitleScale");
  localStorage.removeItem("ip_introPhotoScale");
  localStorage.removeItem("ip_introLogoScale");

  introTitle.value =
    currentLanguage === "en"
      ? "Post Title"
      : "Gönderi Başlığı";

  introSubtitle.value =
    currentLanguage === "en"
      ? "Short subtitle"
      : "Kısa alt başlık";

  introCoverImage.value = "";
  introCoverPreview.removeAttribute("src");
  introCoverPreview.style.display = "none";

  savedIntroCoverInfo.innerHTML = "";
  savedIntroCoverInfo.style.display = "none";

  introFrameToggle.checked = true;

  localStorage.setItem("ip_introShowFrame", "yes");
  localStorage.setItem("ip_introFrameThickness", "thick");
  localStorage.setItem("ip_introFrameColor", "blue");
  localStorage.setItem("ip_introLayout", "layout-1");
  localStorage.setItem("ip_introTitleColor", "#ffffff");
  localStorage.setItem("ip_introSubtitleColor", "#ffffff");

  introTextColorPalette.classList.remove("open");

  refreshIntroTextColorControls();
  refreshIntroLayoutButtons();
  refreshIntroFrameColorButtons();
  refreshIntroFrameThicknessButtons();
  refreshIntroSizeControls();
  buildPhotoTextList();

};

editOutroInformationBtn.onclick =
  function () {

    closeIndependentCard(
      outroSettingsBox
    );

    contactCardBtn.click();

  };

saveOutroSettingsBtn.onclick = function () {

  timelineOutroEnabled =
    outroEnabledToggle.checked;

  if (
    timelineOutroEnabled &&
    timelineOutroDuration < 3
  ) {
    timelineOutroDuration = 3;
  }

  localStorage.setItem(
    "ip_outroEnabled",
    timelineOutroEnabled ? "yes" : "no"
  );

  localStorage.setItem(
    "ip_outroDuration",
    String(timelineOutroDuration)
  );

  buildPhotoTextList();

  closeIndependentCard(
    outroSettingsBox
  );

};

function applyTimelineMotionMode(
  mode
) {

  const safeMode =
    mode === "soft" ||
    mode === "dynamic"
      ? mode
      : "normal";

  localStorage.setItem(
    "ip_transitionMode",
    safeMode
  );

  window.transitionMode =
    safeMode;

  const radio =
    document.querySelector(
      'input[name="transitionMode"][value="' +
      safeMode +
      '"]'
    );

  document
    .querySelectorAll(
      ".timeline-motion-speed-option"
    )
    .forEach(
      function (option) {

        const optionRadio =
          option.querySelector(
            'input[name="transitionMode"]'
          );

        const isActive =
          optionRadio &&
          optionRadio.value === safeMode;

        option.classList.toggle(
          "active",
          isActive
        );

        if (optionRadio) {
          optionRadio.checked = isActive;
        }

      }
    );

  saveProjectPhotos();

}

document
  .querySelectorAll(
    'input[name="transitionMode"]'
  )
  .forEach(
    function (radio) {

      radio.addEventListener(
        "change",
        function () {

          if (!radio.checked) {
            return;
          }

          applyTimelineMotionMode(
            radio.value
          );

        }
      );

    }
  );

saveTransitionBtn.onclick = function () {

  const selected =
    document.querySelector(
      'input[name="transitionMode"]:checked'
    );

  applyTimelineMotionMode(
    selected
      ? selected.value
      : "normal"
  );

};

function resetFreePhotosPanel() {

  logoBackgroundSelectMode = false;

  freePhotosBox.classList.remove(
    "logo-background-mode"
  );

  if (freeVideosTabBtn) {
    freeVideosTabBtn.style.display = "";
  }

  if (logoBgShortcuts) {
    logoBgShortcuts.style.display = "none";
  }

  freePhotosTabBtn.textContent =
    currentLanguage === "en" ? "Photos" : "Fotoğraflar";

  freeVideosTabBtn.textContent =
    currentLanguage === "en" ? "Videos" : "Videolar";

  freePhotoSearchBtn.textContent =
    currentLanguage === "en" ? "Search" : "Ara";

  loadMoreFreePhotosBtn.textContent =
    currentLanguage === "en" ? "Load More" : "Daha Fazla";

  addFreePhotosBtn.textContent =
    currentLanguage === "en" ? "Add Selected" : "Seçilenleri Ekle";

  closeFreePhotosBtn.textContent =
    currentLanguage === "en" ? "Close" : "Kapat";

  if (xFreePhotosTitle) {
    xFreePhotosTitle.textContent =
      currentLanguage === "en"
        ? "Free Media"
        : "Ücretsiz Medya";
  }

  const freeMediaCardTitle =
    document.getElementById(
      "freeMediaCardTitle"
    );

  const freeMediaCardSubtitle =
    document.getElementById(
      "freeMediaCardSubtitle"
    );

  if (freeMediaCardTitle) {

    freeMediaCardTitle.textContent =
      currentLanguage === "en"
        ? "Free Media"
        : "Ücretsiz Medya";

  }

  if (freeMediaCardSubtitle) {

    freeMediaCardSubtitle.textContent =
      currentLanguage === "en"
        ? "Search and add free photos or videos"
        : "Ücretsiz fotoğraf veya video arayın ve ekleyin";

  }

  freePhotosBox.style.display = "none";
  freePhotoPreviewBox.style.display = "none";
  freePhotoPreviewImage.src = "";
  freePhotoPreviewImage.style.display = "block";
  freeVideoPreviewPlayer.pause();
  freeVideoPreviewPlayer.removeAttribute("src");
  freeVideoPreviewPlayer.style.display = "none";

    freePhotoResults = [];
  selectedFreePhotos = [];
  selectedFreeVideos = [];
  freePhotoCropMap = {};
  currentSearchQuery = "";
  currentSearchPage = 1;
  previewFreePhotoUrl = null;
  previewFreeVideoObject = null;
  freeMediaMode = "photo";

  if (freePhotosTabBtn && freeVideosTabBtn) {
    freePhotosTabBtn.classList.add("active");
    freeVideosTabBtn.classList.remove("active");
  }

  freePhotoSearchInput.value = "";
  freePhotoSearchInput.placeholder =
    currentLanguage === "en"
      ? "Search free photos"
      : "Ücretsiz fotoğraf ara";

  freePhotosStatus.innerHTML = "";

  freePhotosGrid.innerHTML =
    '<div style="grid-column:1/3;text-align:center;color:#52616f;font-size:14px;padding:40px 10px;">Search free media.</div>';

}

closeFreePhotosBtn.onclick = function () {

  const returnToLogoMaker =
    logoBackgroundSelectMode;

  resetFreePhotosPanel();

  if (returnToLogoMaker) {

    textLogoMakerBox.style.display =
      "block";

    contactOverlay.style.display =
      "block";

    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });

    return;

  }

  document.body.classList.add(
    "ip-timeline-card-active"
  );

  contactOverlay.style.display =
    "none";

};

const FREE_MEDIA_RANDOM_QUERIES = [
  "People",
  "Nature",
  "Business",
  "City",
  "Technology",
  "Travel",
  "Animals",
  "Family"
];

freePhotosBtn.onclick = function () {

  resetFreePhotosPanel();

  freeMediaMode = "photo";

  freePhotosTabBtn.classList.add(
    "active"
  );

  freeVideosTabBtn.classList.remove(
    "active"
  );

  freePhotoSearchInput.value =
    FREE_MEDIA_RANDOM_QUERIES[
      Math.floor(
        Math.random() *
        FREE_MEDIA_RANDOM_QUERIES.length
      )
    ];

  if (
    freePhotosBox.parentElement !==
    document.body
  ) {

    document.body.insertBefore(
      freePhotosBox,
      document.body.firstChild
    );

  }

  document.body.classList.remove(
    "ip-timeline-card-active"
  );

  freePhotosBox.style.display =
    "block";

  contactOverlay.style.display =
    "block";

  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });

  runFreePhotoSearch(false);

};

chooseLogoBtn.onclick = function () {
  outroLogo.click();
};

chooseProfilePhotoBtn.onclick = function () {
  profilePhoto.click();
};

chooseIntroCoverBtn.onclick = function () {
  introCoverImage.click();
};

changeIntroPreviewCoverBtn.onclick =
  function () {

    introCoverImage.value = "";

    introCoverImage.click();

  };

removeIntroPreviewCoverBtn.onclick =
  async function () {

    const blankCoverSource =
      createBlankIntroCoverSource();

    localStorage.setItem(
      "ip_introCoverImage",
      blankCoverSource
    );

    localStorage.setItem(
      "ip_introCoverBlank",
      "yes"
    );

    introCoverImage.value = "";

    introCoverPreview.removeAttribute(
      "src"
    );

    introCoverPreview.style.display =
      "none";

    savedIntroCoverInfo.innerHTML =
      currentLanguage === "en"
        ? "✓ Intro without background image"
        : "✓ Arka plan görseli olmayan başlangıç";

    savedIntroCoverInfo.style.display =
      "block";

    removeIntroPreviewCoverBtn.disabled =
      true;

    currentIntroPreviewCoverImage =
      await ipLoadImageForPreview(
        blankCoverSource
      );

    renderCurrentIntroPreview();

    buildPhotoTextList();

  };

function downloadIntroPreviewImage() {

  const link =
    document.createElement("a");

  link.download = "IzyPost-Intro-Preview.png";
  link.href = introPreviewCanvas.toDataURL("image/png");

  document.body.appendChild(link);
  link.click();
  link.remove();

}

downloadIntroPreviewBtn.onclick = function () {
  downloadIntroPreviewImage();
};

function getIntroPreviewOutputSize() {

  const selected =
    document.querySelector(
      'input[name="videoSize"]:checked'
    );

  const size =
    selected
      ? selected.value
      : "4:5";

  if (size === "1:1") {
    return { width: 1080, height: 1080 };
  }

  if (size === "9:16") {
    return { width: 1080, height: 1920 };
  }

  if (size === "16:9") {
    return { width: 1920, height: 1080 };
  }

  return { width: 1080, height: 1350 };

}

function ipLoadImageForPreview(src) {

  return new Promise(function (resolve, reject) {

    const img =
      new Image();

    img.onload = function () {
      resolve(img);
    };

    img.onerror = function () {
      reject();
    };

    img.src = src;

  });

}

function createBlankIntroCoverSource() {

  const blankCanvas =
    document.createElement("canvas");

  blankCanvas.width = 8;
  blankCanvas.height = 8;

  const blankContext =
    blankCanvas.getContext("2d");

  blankContext.clearRect(
    0,
    0,
    blankCanvas.width,
    blankCanvas.height
  );

  return blankCanvas.toDataURL("image/png");

}

function getIntroPreviewSourceImage() {

  const savedCover =
    localStorage.getItem("ip_introCoverImage");

  if (savedCover) {
    return savedCover;
  }

  const firstImage =
    selectedPhotos.find(function (item) {
      return item.type === "image" && item.url;
    });

  return firstImage
    ? firstImage.url
    : "";

}

const IP_INTRO_SIZE_SETTINGS = {

  title: {
    key: "ip_introTitleScale",
    min: 0.70,
    max: 1.60
  },

  subtitle: {
    key: "ip_introSubtitleScale",
    min: 0.70,
    max: 1.50
  },

  photo: {
    key: "ip_introPhotoScale",
    min: 0.65,
    max: 1.40
  },

  logo: {
    key: "ip_introLogoScale",
    min: 0.65,
    max: 1.40
  }

};

let currentIntroPreviewCoverImage =
  null;

let currentIntroPreviewLogoImage =
  null;

let currentIntroPreviewProfileImage =
  null;

function getIntroElementScale(type) {

  const settings =
    IP_INTRO_SIZE_SETTINGS[type];

  if (!settings) {
    return 1;
  }

  return Math.max(
    settings.min,
    Math.min(
      settings.max,
      Number(
        localStorage.getItem(
          settings.key
        )
      ) || 1
    )
  );

}

function refreshIntroSizeControls() {

  introTitleSizeValue.textContent =
    Math.round(
      getIntroElementScale("title") *
      100
    ) + "%";

  introSubtitleSizeValue.textContent =
    Math.round(
      getIntroElementScale("subtitle") *
      100
    ) + "%";

  introPhotoSizeValue.textContent =
    Math.round(
      getIntroElementScale("photo") *
      100
    ) + "%";

  introLogoSizeValue.textContent =
    Math.round(
      getIntroElementScale("logo") *
      100
    ) + "%";

  xIntroTitleSizeLabel.textContent =
    currentLanguage === "en"
      ? "Title"
      : "Başlık";

  xIntroSubtitleSizeLabel.textContent =
    currentLanguage === "en"
      ? "Subtitle"
      : "Alt Başlık";

  xIntroPhotoSizeLabel.textContent =
    currentLanguage === "en"
      ? "Photo"
      : "Fotoğraf";

  xIntroLogoSizeLabel.textContent =
    currentLanguage === "en"
      ? "Logo"
      : "Logo";

}

function renderCurrentIntroPreview() {

  if (
    !currentIntroPreviewCoverImage ||
    typeof drawVideoCover !== "function"
  ) {
    return;
  }

  drawVideoCover(
    currentIntroPreviewCoverImage,
    currentIntroPreviewLogoImage,
    currentIntroPreviewProfileImage,
    1
  );

  introPreviewCanvas.width =
    canvas.width;

  introPreviewCanvas.height =
    canvas.height;

  introPreviewCtx.clearRect(
    0,
    0,
    introPreviewCanvas.width,
    introPreviewCanvas.height
  );

  introPreviewCtx.drawImage(
    canvas,
    0,
    0,
    introPreviewCanvas.width,
    introPreviewCanvas.height
  );

  refreshIntroSizeControls();

}

function changeIntroElementScale(
  type,
  amount
) {

  const settings =
    IP_INTRO_SIZE_SETTINGS[type];

  if (!settings) {
    return;
  }

  const nextValue =
    Math.max(
      settings.min,
      Math.min(
        settings.max,
        getIntroElementScale(type) +
        amount
      )
    );

  localStorage.setItem(
    settings.key,
    nextValue.toFixed(2)
  );

  renderCurrentIntroPreview();

}

introTitleSmallerBtn.onclick =
  function () {
    changeIntroElementScale(
      "title",
      -0.05
    );
  };

introTitleBiggerBtn.onclick =
  function () {
    changeIntroElementScale(
      "title",
      0.05
    );
  };

introSubtitleSmallerBtn.onclick =
  function () {
    changeIntroElementScale(
      "subtitle",
      -0.05
    );
  };

introSubtitleBiggerBtn.onclick =
  function () {
    changeIntroElementScale(
      "subtitle",
      0.05
    );
  };

introPhotoSmallerBtn.onclick =
  function () {
    changeIntroElementScale(
      "photo",
      -0.05
    );
  };

introPhotoBiggerBtn.onclick =
  function () {
    changeIntroElementScale(
      "photo",
      0.05
    );
  };

introLogoSmallerBtn.onclick =
  function () {
    changeIntroElementScale(
      "logo",
      -0.05
    );
  };

introLogoBiggerBtn.onclick =
  function () {
    changeIntroElementScale(
      "logo",
      0.05
    );
  };

previewIntroFrameBtn.onclick = async function () {

  const sourceImage =
    getIntroPreviewSourceImage();

  if (!sourceImage) {

    alert(
      currentLanguage === "en"
        ? "Please choose a cover image or add at least one photo."
        : "Lütfen bir kapak görseli seçin veya en az bir fotoğraf ekleyin."
    );

    return;

  }

  if (typeof drawVideoCover !== "function") {

    alert(
      currentLanguage === "en"
        ? "Video engine is not ready yet."
        : "Video motoru henüz hazır değil."
    );

    return;

  }

  const previewSize =
    getIntroPreviewOutputSize();

  canvas.width =
    previewSize.width;

  canvas.height =
    previewSize.height;

  const coverImage =
    await ipLoadImageForPreview(
      sourceImage
    );

  const savedLogoData =
    localStorage.getItem("ip_outroLogo") ||
    getDefaultIzyPostLogoSrc();

  const logoImage =
    await ipLoadImageForPreview(
      savedLogoData
    );

  const savedProfilePhotoData =
    localStorage.getItem("ip_profilePhoto");

  let profileImage =
    coverImage;

  if (savedProfilePhotoData) {

    const loadedProfileImage =
      await ipLoadImageForPreview(
        savedProfilePhotoData
      );

    if (loadedProfileImage) {
      profileImage =
        loadedProfileImage;
    }

  }

  currentIntroPreviewCoverImage =
    coverImage;

  currentIntroPreviewLogoImage =
    logoImage;

  currentIntroPreviewProfileImage =
    profileImage;

  renderCurrentIntroPreview();

  ensureUnifiedIntroWorkspace();

  document.body.classList.remove(
    "ip-intro-preview-active"
  );

  document.body.classList.add(
    "ip-intro-card-active"
  );

  textSettingsBox.style.display =
    "grid";

  introPreviewBox.style.display =
    "block";

  contactOverlay.style.display =
    "block";

};


/* ***** 15B - LOAD SAVED USER DATA ***** */

function readSavedText(key, fallback) {

  const value =
    localStorage.getItem(key);

  if (!value) {
    return fallback;
  }

  if (value === "@username") {
    return "URL";
  }

  if (value === "+90" || value === "+90 ...") {
    return "Tel Number";
  }

  return value;

}

outroName.value =
  readSavedText("ip_outroName", outroName.value);

outroProfession.value =
  readSavedText("ip_outroProfession", outroProfession.value);

outroPhone.value =
  readSavedText("ip_outroPhone", outroPhone.value);

outroContact.value =
  readSavedText("ip_outroContact", outroContact.value);

introTitle.value =
  readSavedText("ip_introTitle", introTitle.value);

introSubtitle.value =
  readSavedText("ip_introSubtitle", introSubtitle.value);

const savedLogo =
  localStorage.getItem("ip_outroLogo") || getDefaultIzyPostLogoSrc();

const savedProfilePhoto =
  localStorage.getItem("ip_profilePhoto") || getDefaultBlankProfileSrc();

refreshInformationPreviews();

const savedIntroCover =
  localStorage.getItem("ip_introCoverImage");

if (savedIntroCover) {

  const introCoverIsBlank =
    localStorage.getItem(
      "ip_introCoverBlank"
    ) === "yes";

  if (introCoverIsBlank) {

    introCoverPreview.removeAttribute(
      "src"
    );

    introCoverPreview.style.display =
      "none";

    savedIntroCoverInfo.innerHTML =
      "✓ Intro without background image";

  } else {

    introCoverPreview.src =
      savedIntroCover;

    introCoverPreview.style.display =
      "block";

    savedIntroCoverInfo.innerHTML =
      "✓ Cover image selected";

  }

  removeIntroPreviewCoverBtn.disabled =
    introCoverIsBlank;

} else {

  removeIntroPreviewCoverBtn.disabled =
    true;

}


/* ***** 15C - AUTO CLEAR DEFAULT FORM TEXT ***** */

function enableAutomaticDefaultTextClear(
  input,
  defaultTexts
) {

  input.addEventListener(
    "beforeinput",
    function (event) {

      if (
        !event.inputType ||
        !event.inputType.startsWith("insert")
      ) return;

      if (
        defaultTexts.includes(
          input.value.trim()
        )
      ) {
        input.value = "";
      }

    }
  );

}

enableAutomaticDefaultTextClear(
  outroName,
  [
    "Full Name",
    "Dr. Name",
    "Ad Soyad"
  ]
);

enableAutomaticDefaultTextClear(
  outroProfession,
  [
    "Profession",
    "Medical Specialist",
    "Meslek"
  ]
);

enableAutomaticDefaultTextClear(
  outroPhone,
  [
    "Tel Number",
    "Tel. Number",
    "Telefon Numarası",
    "+90",
    "+90 ..."
  ]
);

enableAutomaticDefaultTextClear(
  outroContact,
  [
    "URL"
  ]
);

enableAutomaticDefaultTextClear(
  introTitle,
  [
    "Post Title",
    "Your Post Title",
    "Gönderi Başlığı"
  ]
);

enableAutomaticDefaultTextClear(
  introSubtitle,
  [
    "Short subtitle",
    "Your short subtitle",
    "Kısa alt başlık"
  ]
);


/* ***** 15D - AUTO SAVE USER DATA ***** */

outroName.addEventListener("input", function () {

  localStorage.setItem(
    "ip_outroName",
    outroName.value
  );

});

outroProfession.addEventListener("input", function () {

  localStorage.setItem(
    "ip_outroProfession",
    outroProfession.value
  );

});

outroPhone.addEventListener("input", function () {

  localStorage.setItem(
    "ip_outroPhone",
    outroPhone.value
  );

});

outroContact.addEventListener("input", function () {

  localStorage.setItem(
    "ip_outroContact",
    outroContact.value
  );

});

function autoGrowIntroTextField(
  field
) {

  if (!field) return;

  field.style.height =
    "auto";

  field.style.height =
    Math.max(
      field.scrollHeight,
      39
    ) + "px";

}

introTitle.addEventListener(
  "input",
  function () {

    autoGrowIntroTextField(
      introTitle
    );

    localStorage.setItem(
      "ip_introTitle",
      introTitle.value
    );

  }
);

introSubtitle.addEventListener(
  "input",
  function () {

    autoGrowIntroTextField(
      introSubtitle
    );

    localStorage.setItem(
      "ip_introSubtitle",
      introSubtitle.value
    );

  }
);

requestAnimationFrame(
  function () {

    autoGrowIntroTextField(
      introTitle
    );

    autoGrowIntroTextField(
      introSubtitle
    );

  }
);
  
/* ***** 15D - SAVE LOGO ***** */

outroLogo.addEventListener("change", function () {

  const file = outroLogo.files[0];

  if (!file) return;

  const reader = new FileReader();

  reader.onload = function (e) {

    localStorage.setItem(
      "ip_outroLogo",
      e.target.result
    );
    logoPhotoPreview.src = e.target.result;
    logoPhotoPreview.style.display = "block";

    savedLogoInfo.innerHTML =
  currentLanguage === "en"
    ? "✓ Logo exists"
    : "✓ Logo mevcut";

  };

  reader.readAsDataURL(file);

});

profilePhoto.addEventListener("change", function () {

  const file = profilePhoto.files[0];

  if (!file) return;

  const reader = new FileReader();

  reader.onload = function (e) {

    localStorage.setItem(
      "ip_profilePhoto",
      e.target.result
    );

    profilePhotoPreview.src = e.target.result;
    profilePhotoPreview.style.display = "block";

    savedProfilePhotoInfo.innerHTML =
      currentLanguage === "en"
        ? "✓ Profile photo selected"
        : "✓ Profil fotoğrafı seçildi";

  };

  reader.readAsDataURL(file);

});

/* ***** 15DX - TEXT LOGO MAKER ***** */

const logoColors = [
  "#1565c0", "#ff8a00", "#0b8f3a", "#8e24aa",
  "#e91e63", "#111111", "#ffffff", "#0f2f5f",
  "#00bcd4", "#f44336", "#f6b000", "#6d4c41",
  "#2ecc71", "#607d8b", "#ff6f61", "#d4a9ff"
];

const logoFonts = [
  "Arial",
  "Verdana",
  "Tahoma",
  "Trebuchet MS",
  "Georgia",
  "Times New Roman",
  "Courier New",
  "Impact"
];

let logoState = {
  model: "full",
  frame: "circle",
  caseMode: "all",
  gradient: "linear",
  frameColor1: "#1565c0",
  frameColor2: "#8e24aa",
  textColor1: "#ffffff",
  textColor2: "#ff8a00",
  firstFontDelta: 0,
  lastFontDelta: 0,
  firstYDelta: 0,
  lastYDelta: 0,
  fontIndex: 0,
  backgroundImage: ""
};

let logoBackgroundImageObject = null;

const IP_TEXT_LOGO_STATE_KEY =
  "ip_textLogoMakerState";

function getTextLogoMakerSaveData() {

  return {
    firstName:
      logoFirstName.value,

    lastName:
      logoLastName.value,

    state: {
      model:
        logoState.model,

      frame:
        logoState.frame,

      caseMode:
        logoState.caseMode,

      gradient:
        logoState.gradient,

      frameColor1:
        logoState.frameColor1,

      frameColor2:
        logoState.frameColor2,

      textColor1:
        logoState.textColor1,

      textColor2:
        logoState.textColor2,

      firstFontDelta:
        logoState.firstFontDelta,

      lastFontDelta:
        logoState.lastFontDelta,

      firstYDelta:
        logoState.firstYDelta,

      lastYDelta:
        logoState.lastYDelta,

      fontIndex:
        logoState.fontIndex,

      backgroundImage:
        logoState.backgroundImage || ""
    }
  };

}

function saveTextLogoMakerState() {

  try {

    localStorage.setItem(
      IP_TEXT_LOGO_STATE_KEY,
      JSON.stringify(
        getTextLogoMakerSaveData()
      )
    );

    return true;

  } catch (error) {

    console.warn(
      "Text Logo Maker state could not be saved.",
      error
    );

    return false;

  }

}

function refreshTextLogoMakerSelectedButtons() {

  document
    .querySelectorAll(
      "[data-logo-case]"
    )
    .forEach(
      function (button) {

        button.classList.toggle(
          "active",
          button.getAttribute(
            "data-logo-case"
          ) ===
          logoState.caseMode
        );

      }
    );

  document
    .querySelectorAll(
      "[data-logo-gradient]"
    )
    .forEach(
      function (button) {

        button.classList.toggle(
          "active",
          button.getAttribute(
            "data-logo-gradient"
          ) ===
          logoState.gradient
        );

      }
    );

}

function loadTextLogoMakerState() {

  let savedData = null;

  try {

    savedData =
      JSON.parse(
        localStorage.getItem(
          IP_TEXT_LOGO_STATE_KEY
        ) ||
        "null"
      );

  } catch (error) {

    savedData = null;

  }

  if (
    !savedData ||
    !savedData.state
  ) {

    return false;

  }

  logoFirstName.value =
    typeof savedData.firstName === "string"
      ? savedData.firstName
      : "";

  logoLastName.value =
    typeof savedData.lastName === "string"
      ? savedData.lastName
      : "";

  logoState = {
    ...logoState,
    ...savedData.state
  };

  logoState.fontIndex =
    Math.max(
      0,
      Math.min(
        logoFonts.length - 1,
        Number(
          logoState.fontIndex
        ) || 0
      )
    );

  refreshTextLogoMakerSelectedButtons();

  if (
    logoState.backgroundImage
  ) {

    loadLogoBackgroundImage(
      logoState.backgroundImage
    );

  } else {

    logoBackgroundImageObject = null;

  }

  return true;

}

function splitLogoName() {
  const savedName =
    outroName.value.trim();

  if (
    savedName === "Full Name" ||
    savedName === "Ad Soyad"
  ) {
    logoFirstName.value = "";
    logoLastName.value = "";
    return;
  }

  const parts =
    savedName.split(/\s+/).filter(Boolean);

  logoFirstName.value =
    parts[0] || "";

  logoLastName.value =
    parts.slice(1).join(" ") || "";
}

function titleCaseText(text) {
  return text
    .toLowerCase()
    .replace(/\b\w/g, function (c) {
      return c.toUpperCase();
    });
}

function toTurkishUpperCase(text) {
  return text
    .replace(/i/g, "İ")
    .replace(/ı/g, "I")
    .toUpperCase();
}

function applyLogoCase(first, last) {

  if (logoState.caseMode === "title") {
    return {
      first: titleCaseText(first),
      last: titleCaseText(last)
    };
  }

  if (logoState.caseMode === "turkish") {
    return {
      first: titleCaseText(first),
      last: toTurkishUpperCase(last)
    };
  }

  return {
    first: first.toUpperCase(),
    last: last.toUpperCase()
  };

}

function getLogoText() {

  const first =
    logoFirstName.value.trim() || "Name";

  const last =
    logoLastName.value.trim() || "Surname";

  const cased =
    applyLogoCase(first, last);

  if (logoState.model === "name") {
    return cased.first;
  }

  if (logoState.model === "compressed") {
    return cased.first.charAt(0) + "." + cased.last;
  }

  return cased.first + "\n" + cased.last;

}

function makeLogoGradient(ctxLogo, type, c1, c2) {

  if (type === "radial") {
    const g =
      ctxLogo.createRadialGradient(300,300,20,300,300,300);
    g.addColorStop(0,c1);
    g.addColorStop(1,c2);
    return g;
  }

  if (type === "angle") {
    const g =
      ctxLogo.createLinearGradient(0,600,600,0);
    g.addColorStop(0,c1);
    g.addColorStop(1,c2);
    return g;
  }

  const g =
    ctxLogo.createLinearGradient(0,0,600,600);
  g.addColorStop(0,c1);
  g.addColorStop(1,c2);
  return g;

}

function loadLogoBackgroundImage(dataUrl) {

  logoBackgroundImageObject = null;

  if (!dataUrl) {
    drawTextLogo();
    return;
  }

  const img =
    new Image();

  img.onload = function () {
    logoBackgroundImageObject = img;
    drawTextLogo();
  };

  img.src = dataUrl;

}

function drawLogoBackgroundCover(logoCtx) {

  if (!logoBackgroundImageObject) return;

  const img =
    logoBackgroundImageObject;

  const ratio =
    img.naturalWidth / img.naturalHeight;

  const canvasRatio =
    1;

  let drawW;
  let drawH;

  if (ratio > canvasRatio) {
    drawH = 600;
    drawW = drawH * ratio;
  } else {
    drawW = 600;
    drawH = drawW / ratio;
  }

  logoCtx.drawImage(
    img,
    (600 - drawW) / 2,
    (600 - drawH) / 2,
    drawW,
    drawH
  );

  logoCtx.fillStyle = "rgba(0,0,0,.24)";
  logoCtx.fillRect(0,0,600,600);

}

function fillLogoShape(logoCtx, fallbackFill) {

  if (logoBackgroundImageObject) {

    logoCtx.save();
    logoCtx.clip();
    drawLogoBackgroundCover(logoCtx);
    logoCtx.restore();

  } else {

    logoCtx.fillStyle = fallbackFill;
    logoCtx.fill();

  }

}

function drawLogo3DLighting(logoCtx, shape) {

  logoCtx.save();

  if (shape === "circle") {
    logoCtx.beginPath();
    logoCtx.arc(300,300,230,0,Math.PI * 2);
    logoCtx.clip();
  }

  if (shape === "oval") {
    logoCtx.beginPath();
    logoCtx.ellipse(300,300,245,160,0,0,Math.PI * 2);
    logoCtx.clip();
  }

  if (shape === "square") {
    logoCtx.beginPath();
    logoCtx.roundRect(100,100,400,400,42);
    logoCtx.clip();
  }

  const darkDepth =
    logoCtx.createRadialGradient(190,150,40,300,300,330);

  darkDepth.addColorStop(0,"rgba(255,255,255,.28)");
  darkDepth.addColorStop(.38,"rgba(255,255,255,.06)");
  darkDepth.addColorStop(.72,"rgba(0,0,0,.18)");
  darkDepth.addColorStop(1,"rgba(0,0,0,.52)");

  logoCtx.fillStyle = darkDepth;
  logoCtx.fillRect(0,0,600,600);

  const shine =
    logoCtx.createRadialGradient(205,150,8,205,150,185);

  shine.addColorStop(0,"rgba(255,255,255,.58)");
  shine.addColorStop(.35,"rgba(255,255,255,.18)");
  shine.addColorStop(1,"rgba(255,255,255,0)");

  logoCtx.fillStyle = shine;
  logoCtx.fillRect(0,0,600,600);

  logoCtx.restore();

}

function drawLogo3DShapeStroke(logoCtx, shape) {

  logoCtx.save();

  logoCtx.lineWidth = 12;
  logoCtx.strokeStyle = "rgba(0,0,0,.38)";

  if (shape === "circle") {
    logoCtx.beginPath();
    logoCtx.arc(300,300,230,0,Math.PI * 2);
    logoCtx.stroke();
  }

  if (shape === "oval") {
    logoCtx.beginPath();
    logoCtx.ellipse(300,300,245,160,0,0,Math.PI * 2);
    logoCtx.stroke();
  }

  if (shape === "square") {
    logoCtx.beginPath();
    logoCtx.roundRect(100,100,400,400,42);
    logoCtx.stroke();
  }

  logoCtx.lineWidth = 4;
  logoCtx.strokeStyle = "rgba(255,255,255,.20)";

  if (shape === "circle") {
    logoCtx.beginPath();
    logoCtx.arc(300,300,213,0,Math.PI * 2);
    logoCtx.stroke();
  }

  if (shape === "oval") {
    logoCtx.beginPath();
    logoCtx.ellipse(300,300,226,142,0,0,Math.PI * 2);
    logoCtx.stroke();
  }

  if (shape === "square") {
    logoCtx.beginPath();
    logoCtx.roundRect(122,122,356,356,34);
    logoCtx.stroke();
  }

  logoCtx.restore();

}

function drawLogoRaisedHighlight(logoCtx, shape) {

  logoCtx.save();

  logoCtx.lineWidth = 5;
  logoCtx.strokeStyle = "rgba(255,255,255,.42)";
  logoCtx.shadowColor = "rgba(255,255,255,.55)";
  logoCtx.shadowBlur = 14;
  logoCtx.shadowOffsetX = -3;
  logoCtx.shadowOffsetY = -3;

  if (shape === "circle") {
    logoCtx.beginPath();
    logoCtx.arc(300,300,228,0,Math.PI * 2);
    logoCtx.stroke();
  }

  if (shape === "oval") {
    logoCtx.beginPath();
    logoCtx.ellipse(300,300,243,158,0,0,Math.PI * 2);
    logoCtx.stroke();
  }

  if (shape === "square") {
    logoCtx.beginPath();
    logoCtx.roundRect(102,102,396,396,40);
    logoCtx.stroke();
  }

  logoCtx.restore();

}

function drawLogoWhiteBorder(
  logoCtx,
  shape
) {

  if (
    !shape ||
    shape === "none"
  ) {
    return;
  }

  const borderWidth = 28;
  const halfBorder = borderWidth / 2;

  logoCtx.save();

  logoCtx.lineWidth =
    borderWidth;

  logoCtx.strokeStyle =
    "rgba(255,255,255,.98)";

  logoCtx.shadowColor =
    "rgba(0,0,0,.68)";

  logoCtx.shadowBlur = 14;
  logoCtx.shadowOffsetX = 0;
  logoCtx.shadowOffsetY = 6;

  if (shape === "circle") {

    logoCtx.beginPath();

    logoCtx.arc(
      300,
      300,
      230 - halfBorder,
      0,
      Math.PI * 2
    );

    logoCtx.stroke();

  }

  if (shape === "oval") {

    logoCtx.beginPath();

    logoCtx.ellipse(
      300,
      300,
      245 - halfBorder,
      160 - halfBorder,
      0,
      0,
      Math.PI * 2
    );

    logoCtx.stroke();

  }

  if (shape === "square") {

    logoCtx.beginPath();

    logoCtx.roundRect(
      100 + halfBorder,
      100 + halfBorder,
      400 - borderWidth,
      400 - borderWidth,
      42 - halfBorder
    );

    logoCtx.stroke();

  }

  logoCtx.restore();

}

function drawTextLogo() {

  const c = textLogoCanvas;
  const logoCtx = c.getContext("2d");

  logoCtx.clearRect(0,0,600,600);

  const frameGradient =
    makeLogoGradient(
      logoCtx,
      logoState.gradient,
      logoState.frameColor1,
      logoState.frameColor2
    );

  logoCtx.save();

  if (logoState.frame !== "none") {

    logoCtx.shadowColor = "rgba(0,0,0,.62)";
    logoCtx.shadowBlur = 54;
    logoCtx.shadowOffsetY = 34;

    if (logoState.frame === "circle") {
      logoCtx.beginPath();
      logoCtx.arc(300,300,230,0,Math.PI * 2);
      fillLogoShape(logoCtx, frameGradient);
    }

    if (logoState.frame === "oval") {
      logoCtx.beginPath();
      logoCtx.ellipse(300,300,245,160,0,0,Math.PI * 2);
      fillLogoShape(logoCtx, frameGradient);
    }

    if (logoState.frame === "square") {
      logoCtx.beginPath();
      logoCtx.roundRect(100,100,400,400,42);
      fillLogoShape(logoCtx, frameGradient);
    }

    logoCtx.shadowColor = "transparent";
    logoCtx.shadowBlur = 0;
    logoCtx.shadowOffsetY = 0;

    drawLogo3DLighting(
      logoCtx,
      logoState.frame
    );

    drawLogo3DShapeStroke(
      logoCtx,
      logoState.frame
    );

    drawLogoRaisedHighlight(
      logoCtx,
      logoState.frame
    );

    drawLogoWhiteBorder(
      logoCtx,
      logoState.frame
    );

  }

  logoCtx.restore();

  const textGradient =
    makeLogoGradient(
      logoCtx,
      logoState.gradient,
      logoState.textColor1,
      logoState.textColor2
    );

  const text =
    getLogoText();

  const lines =
    text.split("\n");

  const maxTextWidth =
    logoState.frame === "oval"
      ? 455
      : logoState.frame === "none"
        ? 540
        : 410;

  const activeFont =
    logoFonts[logoState.fontIndex] || "Arial";

  if (logoFontName) {
    logoFontName.textContent = activeFont;
  }

  const fontSizes =
    lines.map(function(line, index){

      let size =
        lines.length > 1 ? 82 : 98;

      if (index === 0) {
        size += logoState.firstFontDelta;
      }

      if (index === 1) {
        size += logoState.lastFontDelta;
      }

      while (size > 30) {

        logoCtx.font =
          "900 " + size + "px " + activeFont;

        if (logoCtx.measureText(line).width <= maxTextWidth) {
          break;
        }

        size -= 2;

      }

      return size;

    });

  const lineGap =
    lines.length > 1
      ? 86
      : 0;

  const startY =
    lines.length > 1
      ? 258
      : 300;

  logoCtx.fillStyle = textGradient;
  logoCtx.textAlign = "center";
  logoCtx.textBaseline = "middle";
  logoCtx.shadowColor = "rgba(0,0,0,.74)";
  logoCtx.shadowBlur = 14;
  logoCtx.shadowOffsetX = 3;
  logoCtx.shadowOffsetY = 8;

  lines.forEach(function(line, index){

    logoCtx.font =
      "900 " + fontSizes[index] + "px " + activeFont;

    logoCtx.fillText(
      line,
      300,
      startY + index * lineGap + (index === 0 ? logoState.firstYDelta : logoState.lastYDelta)
    );

  });

  logoCtx.shadowColor = "transparent";
  logoCtx.shadowBlur = 0;
  logoCtx.shadowOffsetX = 0;
  logoCtx.shadowOffsetY = 0;

  /*
    Save every completed design change.
    The canvas itself is saved only by Use Logo;
    this stores the editable Logo Maker state.
  */

  saveTextLogoMakerState();

}

function buildLogoPreviewGrid() {

  const models = currentLanguage === "en"
    ? [
        { id:"full", label:"Full Name" },
        { id:"name", label:"Name" },
        { id:"compressed", label:"Compressed" }
      ]
    : [
        { id:"full", label:"Ad Soyad" },
        { id:"name", label:"Ad" },
        { id:"compressed", label:"Kısa" }
      ];

  const frames =
    currentLanguage === "en"
      ? [
          {
            id: "circle",
            label: "Circle"
          },
          {
            id: "oval",
            label: "Oval"
          },
          {
            id: "square",
            label: "Square"
          },
          {
            id: "none",
            label: "No Frame"
          }
        ]
      : [
          {
            id: "circle",
            label: "Daire"
          },
          {
            id: "oval",
            label: "Oval"
          },
          {
            id: "square",
            label: "Kare"
          },
          {
            id: "none",
            label: "Çerçevesiz"
          }
        ];

  logoPreviewGrid.innerHTML = "";

  frames.forEach(function(frame){

    const shape =
      document.createElement("div");

    shape.className = "logo-preview-shape";

    shape.textContent =
      frame.label;

    logoPreviewGrid.appendChild(shape);

    models.forEach(function(model){

      const btn =
        document.createElement("button");

      btn.type = "button";
      btn.className = "logo-preview-card";
      btn.textContent = model.label;

      if (
        logoState.frame === frame.id &&
        logoState.model === model.id
      ) {
        btn.classList.add("active");
      }

      btn.onclick = function(){
        logoState.frame = frame.id;
        logoState.model = model.id;
        buildLogoPreviewGrid();
        drawTextLogo();
      };

      logoPreviewGrid.appendChild(btn);

    });

  });

}

function buildLogoColorButtons(targetBox, type) {

  targetBox.innerHTML = "";

  const visibleLogoColors =
    type === "frame"
      ? logoColors.slice(0, 15)
      : logoColors;

  visibleLogoColors.forEach(function(color){

    const btn =
      document.createElement("button");

    btn.type = "button";
    btn.className = "logo-color-btn";
    btn.style.background = color;

    btn.onclick = function(){

      if (type === "frame") {
        logoState.frameColor1 = logoState.frameColor2;
        logoState.frameColor2 = color;
      } else {
        logoState.textColor1 = logoState.textColor2;
        logoState.textColor2 = color;
      }

      drawTextLogo();

    };

    targetBox.appendChild(btn);

  });

}

document.querySelectorAll("[data-logo-case]").forEach(function(btn){
  btn.onclick = function(){
    document.querySelectorAll("[data-logo-case]").forEach(function(b){
      b.classList.remove("active");
    });
    btn.classList.add("active");
    logoState.caseMode = btn.getAttribute("data-logo-case");
    drawTextLogo();
  };
});

document.querySelectorAll("[data-logo-gradient]").forEach(function(btn){
  btn.onclick = function(){
    document.querySelectorAll("[data-logo-gradient]").forEach(function(b){
      b.classList.remove("active");
    });
    btn.classList.add("active");
    logoState.gradient = btn.getAttribute("data-logo-gradient");
    drawTextLogo();
  };
});

function refreshTextLogoMakerLanguage() {

  chooseLogoBtn.textContent =
    currentLanguage === "en" ? "Choose Logo" : "Logo Seç";

  createTextLogoBtn.textContent =
    currentLanguage === "en" ? "Logo Maker" : "Logo Oluştur";

  xTextLogoTitle.textContent =
    currentLanguage === "en" ? "Text Logo Maker" : "Metin Logo Oluştur";

  xLogoFirstNameLabel.textContent =
    currentLanguage === "en" ? "First Name" : "Ad";

  xLogoLastNameLabel.textContent =
    currentLanguage === "en" ? "Last Name" : "Soyad";

  xLogoControlNameLabel.textContent =
    currentLanguage === "en" ? "Name" : "Ad";

  xLogoControlLastNameLabel.textContent =
    currentLanguage === "en" ? "Last Name" : "Soyad";

  xLogoControlFontLabel.textContent =
    currentLanguage === "en" ? "Font" : "Yazı Tipi";

  logoSizeResetBtn.textContent =
    currentLanguage === "en" ? "Reset" : "Sıfırla";

  xLogoCaseLabel.textContent =
    currentLanguage === "en" ? "Text Case" : "Yazı Biçimi";

  xLogoGradientLabel.textContent =
    currentLanguage === "en" ? "Gradient Direction" : "Gradyan Yönü";

  xLogoFrameColorLabel.textContent =
    currentLanguage === "en" ? "Fill Colors" : "Dolgu Renkleri";

  xLogoTextColorLabel.textContent =
    currentLanguage === "en" ? "Text Colors" : "Yazı Renkleri";

  xLogoBackgroundLabel.textContent =
    currentLanguage === "en" ? "Background Image" : "Arka Plan Görseli";

  xLogoBgSearchBtn.textContent =
    currentLanguage === "en" ? "Search Background" : "Arka Plan Ara";

  xLogoBgClearBtn.textContent =
    currentLanguage === "en" ? "Clear" : "Temizle";

  useTextLogoBtn.textContent =
    currentLanguage === "en" ? "Use Logo" : "Kullan";

  downloadTextLogoBtn.textContent =
    currentLanguage === "en" ? "Download" : "İndir";

  closeTextLogoBtn.textContent =
    currentLanguage === "en" ? "Close" : "Kapat";

  document.querySelector('[data-logo-case="all"]').textContent =
    currentLanguage === "en" ? "ALL CAPS" : "BÜYÜK";

  document.querySelector('[data-logo-case="title"]').textContent =
    currentLanguage === "en" ? "Title Case" : "Baş Harf";

  document.querySelector('[data-logo-case="turkish"]').textContent =
    currentLanguage === "en" ? "Turkish Style" : "Türk Stili";

  document.querySelector('[data-logo-gradient="linear"]').textContent =
    currentLanguage === "en" ? "Linear" : "Düz";

  document.querySelector('[data-logo-gradient="angle"]').textContent =
    currentLanguage === "en" ? "Angle" : "Çapraz";

  document.querySelector('[data-logo-gradient="radial"]').textContent =
    currentLanguage === "en" ? "Radial" : "Dairesel";

}

function openLogoBackgroundSearch() {

  logoBackgroundSelectMode = true;
  freeMediaMode = "photo";

  freePhotosBox.classList.add(
    "logo-background-mode"
  );

  if (
    logoBackgroundCardSubtitle
  ) {

    logoBackgroundCardSubtitle.textContent =
      currentLanguage === "en"
        ? "Choose a background texture for your logo"
        : "Logonuz için bir arka plan dokusu seçin";

  }

  freePhotoResults = [];
  selectedFreePhotos = [];
  selectedFreeVideos = [];
  freePhotoCropMap = {};
  currentSearchQuery = "";
  currentSearchPage = 1;
  previewFreePhotoUrl = null;
  previewFreeVideoObject = null;

  freePhotosTabBtn.classList.add("active");
  freeVideosTabBtn.classList.remove("active");
  freeVideosTabBtn.style.display = "none";

  if (logoBgShortcuts) {
    logoBgShortcuts.style.display = "grid";
  }

  freePhotosTabBtn.textContent =
    currentLanguage === "en" ? "Photos" : "Fotoğraflar";

  freePhotoSearchBtn.textContent =
    currentLanguage === "en" ? "Search" : "Ara";

  loadMoreFreePhotosBtn.textContent =
    currentLanguage === "en" ? "Load More" : "Daha Fazla";

  addFreePhotosBtn.textContent =
    currentLanguage === "en" ? "Select" : "Seç";

  closeFreePhotosBtn.textContent =
    currentLanguage === "en" ? "Close" : "Kapat";

  xFreePhotosTitle.textContent =
    currentLanguage === "en"
      ? "Logo Background"
      : "Logo Arka Planı";

  freePhotoSearchInput.value =
    "marble";

  freePhotoSearchInput.placeholder =
    currentLanguage === "en"
      ? "Search logo background"
      : "Logo arka planı ara";

  freePhotosStatus.innerHTML =
    currentLanguage === "en"
      ? "Loading marble backgrounds..."
      : "Mermer arka planları yükleniyor...";

  freePhotosGrid.innerHTML =
    '<div class="logo-background-empty">' +
    (
      currentLanguage === "en"
        ? "Loading marble backgrounds..."
        : "Mermer arka planları yükleniyor..."
    ) +
    '</div>';

  if (
    freePhotosBox.parentElement !==
    document.body
  ) {

    document.body.insertBefore(
      freePhotosBox,
      document.body.firstChild
    );

  }

  freePhotosBox.style.display =
    "block";

  contactOverlay.style.display =
    "block";

  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });

  runFreePhotoSearch(false);

}

document.querySelectorAll("[data-logo-bg-query]").forEach(function(btn){

  btn.onclick = function () {
    freePhotoSearchInput.value =
      btn.getAttribute("data-logo-bg-query");

    runFreePhotoSearch(false);
  };

});

logoBackgroundSearchBtn.onclick = function () {

  textLogoMakerBox.style.display =
    "none";

  openLogoBackgroundSearch();

};

logoBackgroundClearBtn.onclick = function () {
  logoState.backgroundImage = "";
  logoBackgroundImageObject = null;
  drawTextLogo();
};

createTextLogoBtn.onclick = function () {

  refreshTextLogoMakerLanguage();

  const restoredLogoDesign =
    loadTextLogoMakerState();

  if (
    !restoredLogoDesign
  ) {

    splitLogoName();

  }

  buildLogoPreviewGrid();

  buildLogoColorButtons(
    logoFrameColors,
    "frame"
  );

  buildLogoColorButtons(
    logoTextColors,
    "text"
  );

  refreshTextLogoMakerSelectedButtons();
  drawTextLogo();

  if (
    textLogoMakerBox.parentElement !==
    document.body
  ) {

    document.body.insertBefore(
      textLogoMakerBox,
      document.body.firstChild
    );

  }

  contactCardBox.style.display =
    "none";

  textLogoMakerBox.style.display =
    "block";

  contactOverlay.style.display =
    "block";

  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });

};

logoFirstName.oninput = function () {

  drawTextLogo();
  saveTextLogoMakerState();

};

logoLastName.oninput = function () {

  drawTextLogo();
  saveTextLogoMakerState();

};

logoFirstUpBtn.onclick = function(){
  logoState.firstYDelta -= 5;
  drawTextLogo();
};

logoFirstDownBtn.onclick = function(){
  logoState.firstYDelta += 5;
  drawTextLogo();
};

logoLastUpBtn.onclick = function(){
  logoState.lastYDelta -= 5;
  drawTextLogo();
};

logoLastDownBtn.onclick = function(){
  logoState.lastYDelta += 5;
  drawTextLogo();
};

logoFirstBiggerBtn.onclick = function(){
  logoState.firstFontDelta += 4;
  drawTextLogo();
};

logoFirstSmallerBtn.onclick = function(){
  logoState.firstFontDelta -= 4;
  drawTextLogo();
};

logoLastBiggerBtn.onclick = function(){
  logoState.lastFontDelta += 4;
  drawTextLogo();
};

logoLastSmallerBtn.onclick = function(){
  logoState.lastFontDelta -= 4;
  drawTextLogo();
};

logoFontNextBtn.onclick = function(){
  logoState.fontIndex =
    (logoState.fontIndex + 1) % logoFonts.length;
  drawTextLogo();
};

logoSizeResetBtn.onclick = function(){
  logoState.firstFontDelta = 0;
  logoState.lastFontDelta = 0;
  logoState.firstYDelta = 0;
  logoState.lastYDelta = 0;
  drawTextLogo();
};

function createTrimmedTextLogoCanvas() {

  drawTextLogo();

  const sourceCanvas =
    textLogoCanvas;

  const outputCanvas =
    document.createElement("canvas");

  let cropX = 0;
  let cropY = 0;
  let cropWidth = sourceCanvas.width;
  let cropHeight = sourceCanvas.height;

  if (logoState.frame === "circle") {

    cropX = 70;
    cropY = 70;
    cropWidth = 460;
    cropHeight = 460;

  } else if (logoState.frame === "oval") {

    cropX = 55;
    cropY = 140;
    cropWidth = 490;
    cropHeight = 320;

  } else if (logoState.frame === "square") {

    cropX = 100;
    cropY = 100;
    cropWidth = 400;
    cropHeight = 400;

  } else {

    const sourceContext =
      sourceCanvas.getContext("2d");

    const pixels =
      sourceContext.getImageData(
        0,
        0,
        sourceCanvas.width,
        sourceCanvas.height
      );

    let minimumX =
      sourceCanvas.width;

    let minimumY =
      sourceCanvas.height;

    let maximumX =
      -1;

    let maximumY =
      -1;

    for (
      let y = 0;
      y < sourceCanvas.height;
      y++
    ) {

      for (
        let x = 0;
        x < sourceCanvas.width;
        x++
      ) {

        const alpha =
          pixels.data[
            (
              y *
              sourceCanvas.width +
              x
            ) *
            4 +
            3
          ];

        if (alpha > 0) {

          minimumX =
            Math.min(
              minimumX,
              x
            );

          minimumY =
            Math.min(
              minimumY,
              y
            );

          maximumX =
            Math.max(
              maximumX,
              x
            );

          maximumY =
            Math.max(
              maximumY,
              y
            );

        }

      }

    }

    if (
      maximumX >= minimumX &&
      maximumY >= minimumY
    ) {

      cropX =
        minimumX;

      cropY =
        minimumY;

      cropWidth =
        maximumX -
        minimumX +
        1;

      cropHeight =
        maximumY -
        minimumY +
        1;

    }

  }

  outputCanvas.width =
    Math.max(
      1,
      cropWidth
    );

  outputCanvas.height =
    Math.max(
      1,
      cropHeight
    );

  const outputContext =
    outputCanvas.getContext("2d");

  outputContext.clearRect(
    0,
    0,
    outputCanvas.width,
    outputCanvas.height
  );

  outputContext.drawImage(
    sourceCanvas,
    cropX,
    cropY,
    cropWidth,
    cropHeight,
    0,
    0,
    outputCanvas.width,
    outputCanvas.height
  );

  return outputCanvas;

}

downloadTextLogoBtn.onclick = function () {

  const exportCanvas =
    createTrimmedTextLogoCanvas();

  const link =
    document.createElement("a");

  link.download = "IzyPost-Logo.png";

  link.href =
    exportCanvas.toDataURL(
      "image/png"
    );

  document.body.appendChild(
    link
  );

  link.click();
  link.remove();

};

closeTextLogoBtn.onclick = function () {

  drawTextLogo();
  saveTextLogoMakerState();

  textLogoMakerBox.style.display =
    "none";

  contactCardBox.style.display =
    "block";

  contactOverlay.style.display =
    "block";

  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });

};

useTextLogoBtn.onclick = function () {

  const exportCanvas =
    createTrimmedTextLogoCanvas();

  const logoData =
    exportCanvas.toDataURL(
      "image/png"
    );

  localStorage.setItem(
    "ip_outroLogo",
    logoData
  );

  saveTextLogoMakerState();

  logoPhotoPreview.src = logoData;
  logoPhotoPreview.style.display = "block";

  savedLogoInfo.innerHTML =
    currentLanguage === "en"
      ? "✓ Logo exists"
      : "✓ Logo mevcut";

  textLogoMakerBox.style.display =
    "none";

  contactCardBox.style.display =
    "block";

  contactOverlay.style.display =
    "block";

  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });

};

/* ***** 15DA - SAVE INTRO COVER IMAGE ***** */

introCoverImage.addEventListener("change", function () {

  const file = introCoverImage.files[0];

  if (!file) return;

  const reader = new FileReader();

  reader.onload = async function (e) {

    const selectedCoverSource =
      e.target.result;

    localStorage.setItem(
      "ip_introCoverImage",
      selectedCoverSource
    );

    localStorage.removeItem(
      "ip_introCoverBlank"
    );

    introCoverPreview.src =
      selectedCoverSource;

    introCoverPreview.style.display =
      "block";

    removeIntroPreviewCoverBtn.disabled =
      false;

    savedIntroCoverInfo.innerHTML =
      currentLanguage === "en"
        ? "✓ Cover image selected"
        : "✓ Kapak görseli seçildi";

    savedIntroCoverInfo.style.display =
      "block";

    currentIntroPreviewCoverImage =
      await ipLoadImageForPreview(
        selectedCoverSource
      );

    if (
      !localStorage.getItem(
        "ip_profilePhoto"
      )
    ) {

      currentIntroPreviewProfileImage =
        currentIntroPreviewCoverImage;

    }

    renderCurrentIntroPreview();

    buildPhotoTextList();

  };

  reader.readAsDataURL(file);

});

/* ***** 15DA - INTRO TITLE SUBTITLE COLORS ***** */

let activeIntroTextColorTarget =
  "title";

function getIntroTitleColor() {

  return (
    localStorage.getItem("ip_introTitleColor") ||
    "#ffffff"
  );

}

function getIntroSubtitleColor() {

  return (
    localStorage.getItem("ip_introSubtitleColor") ||
    "#ffffff"
  );

}

function refreshIntroTextColorControls() {

  const titleColor =
    getIntroTitleColor();

  const subtitleColor =
    getIntroSubtitleColor();

  introTitleColorBtn.style.setProperty(
    "--intro-selected-color",
    titleColor
  );

  introSubtitleColorBtn.style.setProperty(
    "--intro-selected-color",
    subtitleColor
  );

  const activeColor =
    activeIntroTextColorTarget === "title"
      ? titleColor
      : subtitleColor;

  document
    .querySelectorAll(".intro-text-color-option")
    .forEach(function (btn) {

      if (
        btn
          .getAttribute("data-intro-text-color")
          .toLowerCase() ===
        activeColor.toLowerCase()
      ) {
        btn.classList.add("selected");
      } else {
        btn.classList.remove("selected");
      }

    });

  introTitleColorBtn.classList.toggle(
    "active",
    activeIntroTextColorTarget === "title" &&
    introTextColorPalette.classList.contains("open")
  );

  introSubtitleColorBtn.classList.toggle(
    "active",
    activeIntroTextColorTarget === "subtitle" &&
    introTextColorPalette.classList.contains("open")
  );

}

function openIntroTextColorPalette(target) {

  activeIntroTextColorTarget =
    target;

  introTextColorPalette.classList.add("open");

  refreshIntroTextColorControls();

}

introTitleColorBtn.onclick = function () {

  if (
    activeIntroTextColorTarget === "title" &&
    introTextColorPalette.classList.contains("open")
  ) {
    introTextColorPalette.classList.remove("open");
  } else {
    openIntroTextColorPalette("title");
  }

  refreshIntroTextColorControls();

};

introSubtitleColorBtn.onclick = function () {

  if (
    activeIntroTextColorTarget === "subtitle" &&
    introTextColorPalette.classList.contains("open")
  ) {
    introTextColorPalette.classList.remove("open");
  } else {
    openIntroTextColorPalette("subtitle");
  }

  refreshIntroTextColorControls();

};

document
  .querySelectorAll(".intro-text-color-option")
  .forEach(function (btn) {

    btn.onclick = function () {

      const selectedColor =
        btn.getAttribute(
          "data-intro-text-color"
        );

      if (
        activeIntroTextColorTarget ===
        "title"
      ) {

        localStorage.setItem(
          "ip_introTitleColor",
          selectedColor
        );

      } else {

        localStorage.setItem(
          "ip_introSubtitleColor",
          selectedColor
        );

      }

      introTextColorPalette.classList.remove("open");

      refreshIntroTextColorControls();

      openIntroPreviewFromTop();

    };

  });

refreshIntroTextColorControls();

/* ***** 15DAA - INTRO LAYOUT SELECTOR ***** */

function openIntroPreviewFromTop() {

  if (
    document.body.classList.contains(
      "ip-intro-card-active"
    )
  ) {

    scheduleIntroLivePreview();

  }

}

function getSelectedIntroLayout() {

  return (
    localStorage.getItem("ip_introLayout") ||
    "layout-1"
  );

}

function refreshIntroLayoutButtons() {

  const selectedLayout =
    getSelectedIntroLayout();

  document
    .querySelectorAll(".intro-layout-btn")
    .forEach(function (btn) {

      if (
        btn.getAttribute("data-intro-layout") ===
        selectedLayout
      ) {
        btn.classList.add("selected");
      } else {
        btn.classList.remove("selected");
      }

    });

}

document
  .querySelectorAll(".intro-layout-btn")
  .forEach(function (btn) {

    btn.onclick = function () {

      localStorage.setItem(
        "ip_introLayout",
        btn.getAttribute("data-intro-layout")
      );

      refreshIntroLayoutButtons();

      openIntroPreviewFromTop();

    };

  });

refreshIntroLayoutButtons();

/* ***** 15DB - SAVE INTRO FRAME COLOR ***** */

function refreshIntroFrameColorButtons() {

  const selectedColor =
    localStorage.getItem("ip_introFrameColor") ||
    "blue";

  document
    .querySelectorAll(".intro-frame-color")
    .forEach(function (btn) {

      if (btn.getAttribute("data-color") === selectedColor) {
        btn.classList.add("selected");
      } else {
        btn.classList.remove("selected");
      }

    });

}

document
  .querySelectorAll(".intro-frame-color")
  .forEach(function (btn) {

    btn.onclick = function () {

      localStorage.setItem(
        "ip_introFrameColor",
        btn.getAttribute("data-color")
      );

      refreshIntroFrameColorButtons();

      openIntroPreviewFromTop();

    };

  });

const savedIntroShowFrame =
  localStorage.getItem("ip_introShowFrame");

if (savedIntroShowFrame === "no") {
  introFrameToggle.checked = false;
}

introFrameToggle.onchange = function () {

  localStorage.setItem(
    "ip_introShowFrame",
    introFrameToggle.checked ? "yes" : "no"
  );

};

function refreshIntroFrameThicknessButtons() {

  const selectedThickness =
    localStorage.getItem("ip_introFrameThickness") ||
    "thick";

  document
    .querySelectorAll(".intro-frame-thickness-btn")
    .forEach(function (btn) {

      if (btn.getAttribute("data-thickness") === selectedThickness) {
        btn.classList.add("selected");
      } else {
        btn.classList.remove("selected");
      }

    });

}

document
  .querySelectorAll(".intro-frame-thickness-btn")
  .forEach(function (btn) {

    btn.onclick = function () {

      localStorage.setItem(
        "ip_introFrameThickness",
        btn.getAttribute("data-thickness")
      );

      refreshIntroFrameThicknessButtons();

      openIntroPreviewFromTop();

    };

  });

refreshIntroFrameColorButtons();
refreshIntroFrameThicknessButtons();

/* ***** 15E - SAVE USER INFORMATION ***** */

saveUserInfoBtn.onclick = function () {

  localStorage.setItem(
    "ip_outroName",
    outroName.value
  );

  localStorage.setItem(
    "ip_outroProfession",
    outroProfession.value
  );

  localStorage.setItem(
    "ip_outroPhone",
    outroPhone.value
  );

  localStorage.setItem(
    "ip_outroContact",
    outroContact.value
  );
  
  closeIndependentCard(
    contactCardBox
  );

};

clearUserInfoBtn.onclick = function () {

  if (
    !confirm(
      currentLanguage === "en"
        ? "Clear saved information?"
        : "Kaydedilen bilgiler silinsin mi?"
    )
  ) return;

  localStorage.removeItem("ip_outroName");
  localStorage.removeItem("ip_outroProfession");
  localStorage.removeItem("ip_outroPhone");
  localStorage.removeItem("ip_outroContact");
  localStorage.removeItem("ip_outroLogo");
  localStorage.removeItem("ip_profilePhoto");

  outroName.value =
    currentLanguage === "en" ? "Full Name" : "Ad Soyad";

  outroProfession.value =
    currentLanguage === "en" ? "Profession" : "Meslek";

  outroPhone.value =
    currentLanguage === "en" ? "Tel Number" : "Telefon Numarası";

  outroContact.value = "URL";

  outroLogo.value = "";
  profilePhoto.value = "";
  refreshInformationPreviews();

};

/* ***** 15F - LOAD TRANSITION MODE ***** */

const savedTransitionMode =
  localStorage.getItem("ip_transitionMode") ||
  "normal";

const savedTransitionRadio =
  document.querySelector(
    'input[name="transitionMode"][value="' + savedTransitionMode + '"]'
  );

const safeSavedTransitionMode =
  savedTransitionMode === "soft" ||
  savedTransitionMode === "dynamic"
    ? savedTransitionMode
    : "normal";

window.transitionMode =
  safeSavedTransitionMode;

document
  .querySelectorAll(
    ".timeline-motion-speed-option"
  )
  .forEach(
    function (option) {

      const optionRadio =
        option.querySelector(
          'input[name="transitionMode"]'
        );

      const isActive =
        optionRadio &&
        optionRadio.value ===
          safeSavedTransitionMode;

      option.classList.toggle(
        "active",
        isActive
      );

      if (optionRadio) {
        optionRadio.checked = isActive;
      }

    }
  );

/* ***** 15G - MUSIC SYSTEM ***** */

/*
  Compatibility variables remain available only for
  project saving and recovery.

  The video engine no longer receives background music
  through window.selectedMusicUrl.
*/

let selectedMusicUrl = "";
let selectedMusicName = "";

let pendingMusicUrl = "";
let pendingMusicName = "";
let pendingMusicSource = "";
let pendingUserMusicObjectUrl = "";

window.selectedMusicUrl = "";
window.selectedMusicName = "";

function getIzyPostSavedMusicVolume() {

  const savedVolume =
    Number(
      localStorage.getItem(
        "ip_musicUserVolume"
      )
    );

  return Number.isFinite(
    savedVolume
  )
    ? Math.max(
        0,
        Math.min(
          1,
          savedVolume
        )
      )
    : 0.40;

}

window.ipBackgroundMusicTrack = {
  enabled: false,
  url: "",
  name: "",
  source: "",
  volume:
    getIzyPostSavedMusicVolume(),
  fadeInSeconds: 1,
  fadeOutSeconds: 1.2
};

function commitIndependentBackgroundMusic(
  url,
  name,
  source
) {

  const safeUrl =
    String(
      url || ""
    ).trim();

  const safeName =
    String(
      name || ""
    ).trim();

  const safeSource =
    String(
      source || ""
    ).trim();

  selectedMusicUrl =
    safeUrl;

  selectedMusicName =
    safeName;

  window.ipBackgroundMusicTrack = {
    enabled:
      Boolean(
        safeUrl
      ),

    url:
      safeUrl,

    name:
      safeName,

    source:
      safeSource,

    volume:
      getIzyPostSavedMusicVolume(),

    fadeInSeconds:
      1,

    fadeOutSeconds:
      1.2
  };

  /*
    Keep the old engine music route disabled.
  */

  window.selectedMusicUrl =
    "";

  window.selectedMusicName =
    "";

}

function syncSelectedMusicWithEngine() {

  const safeMusicUrl =
    String(
      selectedMusicUrl ||
      ""
    ).trim();

  const safeMusicName =
    String(
      selectedMusicName ||
      ""
    ).trim();

  window.selectedMusicUrl =
    safeMusicUrl;

  window.selectedMusicName =
    safeMusicName;

  if (safeMusicUrl) {

    localStorage.setItem(
      "ip_selectedMusicUrl",
      safeMusicUrl
    );

    localStorage.setItem(
      "ip_selectedMusicName",
      safeMusicName
    );

  } else {

    localStorage.removeItem(
      "ip_selectedMusicUrl"
    );

    localStorage.removeItem(
      "ip_selectedMusicName"
    );

  }

}

function refreshMusicOptions() {

  const track =
    window.ipBackgroundMusicTrack &&
    window.ipBackgroundMusicTrack.enabled
      ? window.ipBackgroundMusicTrack
      : null;

  selectedMusicInfo.textContent =
    track
      ? "● " + track.name
      : (
          currentLanguage === "en"
            ? "No music selected."
            : "Müzik seçilmedi."
        );

  if (selectedMusicLabel) {

    if (track) {

      selectedMusicLabel.classList.add(
        "visible"
      );

      selectedMusicLabel.innerHTML =
        currentLanguage === "en"
          ? 'Selected Music: <strong>' +
            track.name +
            '</strong>'
          : 'Seçilen Müzik: <strong>' +
            track.name +
            '</strong>';

    } else {

      selectedMusicLabel.classList.remove(
        "visible"
      );

      selectedMusicLabel.textContent =
        "";

    }

  }

  if (removeMusicBtn) {

    removeMusicBtn.disabled =
      !track;

  }

}

function previewPendingMusic(url, name, source) {

  pendingMusicUrl = url;
  pendingMusicName = name;
  pendingMusicSource = source;

  musicPreviewAudio.pause();
  musicPreviewAudio.src = pendingMusicUrl;
  musicPreviewAudio.load();

  musicPreviewAudio.play().catch(function () {});

  selectedMusicInfo.textContent =
    "● " + pendingMusicName;

}

vahidMusicSelect.onchange = function () {

  const selectedOption =
    vahidMusicSelect.options[vahidMusicSelect.selectedIndex];

  if (!vahidMusicSelect.value) {
    return;
  }

  previewPendingMusic(
    vahidMusicSelect.value,
    selectedOption.getAttribute("data-name") || selectedOption.textContent,
    "vahid"
  );

};

chooseUserMusicBtn.onclick = function () {
  userMusicFile.value = "";
  userMusicFile.click();
};

userMusicFile.onchange = function () {

  const file =
    userMusicFile.files[0];

  if (!file) return;

  const reader =
    new FileReader();

  reader.onload = function (e) {

    pendingUserMusicObjectUrl =
      e.target.result;

    vahidMusicSelect.value = "";

    previewPendingMusic(
      pendingUserMusicObjectUrl,
      file.name,
      "user"
    );

  };

  reader.readAsDataURL(file);

};

addMusicBtn.onclick = function () {

  if (
    !pendingMusicUrl ||
    !pendingMusicName
  ) {
    return;
  }

  commitIndependentBackgroundMusic(
    pendingMusicUrl,
    pendingMusicName,
    pendingMusicSource
  );

  refreshMusicOptions();

  saveProjectPhotos();

  musicPreviewAudio.pause();
  musicPreviewAudio.currentTime = 0;

  closeIndependentCard(
    musicSettingsBox
  );

};

removeMusicBtn.onclick =
  function () {

    musicPreviewAudio.pause();
    musicPreviewAudio.currentTime = 0;
    musicPreviewAudio.removeAttribute(
      "src"
    );
    musicPreviewAudio.load();

    pendingMusicUrl = "";
    pendingMusicName = "";
    pendingMusicSource = "";
    pendingUserMusicObjectUrl = "";

    commitIndependentBackgroundMusic(
      "",
      "",
      ""
    );

    vahidMusicSelect.value = "";
    userMusicFile.value = "";

    refreshMusicOptions();
    saveProjectPhotos();

  };

closeMusicBtn.onclick = function () {

  musicPreviewAudio.pause();
  musicPreviewAudio.currentTime = 0;

  closeIndependentCard(
    musicSettingsBox
  );

};

/* ***** 16 - LANGUAGE SYSTEM ***** */

let currentLanguage = "en";

refreshIntroOutroDurationControls();
refreshIntroSizeControls();
refreshMusicOptions();

/* ***** 15BB - LOAD SESSION PHOTOS ***** */

initializeIzyPostProject();

function createPhotoId() {
  return "ip_" + Date.now() + "_" + Math.random().toString(16).slice(2);
}

function createSpeechId() {

  return (
    "speech_" +
    Date.now() +
    "_" +
    Math.random()
      .toString(16)
      .slice(2)
  );

}

function createDefaultMediaSpeech(file) {

  const caption =
    file && file.caption
      ? String(file.caption)
      : "";

  return {
    id: createSpeechId(),
    startTime: 0,
    duration: 2,
    text: caption,
    color:
      file && file.captionColor
        ? file.captionColor
        : "#ffffff",
    voiceGender:
      file &&
      (
        file.voiceGender === "male" ||
        file.voiceGender === "female"
      )
        ? file.voiceGender
        : getLastSelectedAiVoiceGender(),
    voiceUrl:
      file && file.voiceUrl
        ? file.voiceUrl
        : "",
    voiceText:
      file && file.voiceText
        ? file.voiceText
        : "",
    voiceLanguage:
      file && file.voiceLanguage
        ? file.voiceLanguage
        : "",

    audioSource:
      file && file.audioSource
        ? file.audioSource
        : "ai",

    uploadedAudioUrl:
      file && file.uploadedAudioUrl
        ? file.uploadedAudioUrl
        : "",

    uploadedAudioName:
      file && file.uploadedAudioName
        ? file.uploadedAudioName
        : "",

    uploadedAudioDuration:
      file && file.uploadedAudioDuration
        ? Number(file.uploadedAudioDuration)
        : 0,

    aiVolume:
      file &&
      Number.isFinite(
        Number(file.aiVolume)
      )
        ? Math.max(
            0,
            Math.min(
              1,
              Number(file.aiVolume)
            )
          )
        : 1,

    uploadedVolume:
      file &&
      Number.isFinite(
        Number(file.uploadedVolume)
      )
        ? Math.max(
            0,
            Math.min(
              1,
              Number(file.uploadedVolume)
            )
          )
        : 1,

    recordedAudioUrl:
      file && file.recordedAudioUrl
        ? file.recordedAudioUrl
        : "",

    recordedAudioName:
      file && file.recordedAudioName
        ? file.recordedAudioName
        : "",

    recordedAudioDuration:
      file && file.recordedAudioDuration
        ? Number(file.recordedAudioDuration)
        : 0,

    fontScale:
      file && file.fontScale
        ? Number(file.fontScale)
        : 1,

    positionX:
      file && file.positionX !== undefined
        ? Number(file.positionX)
        : 50,

    positionY:
      file && file.positionY !== undefined
        ? Number(file.positionY)
        : 72,

    animationEffect:
      file &&
      [
        "zoom",
        "blur",
        "bounce",
        "rise",
        "fade"
      ].includes(
        file.animationEffect
      )
        ? file.animationEffect
        : "zoom"
  };

}

function ensureMediaSpeechList(file) {

  if (!file) {
    return [];
  }

  if (!Array.isArray(file.speechList)) {

    file.speechList = [
      createDefaultMediaSpeech(file)
    ];

  }

  if (!file.speechList.length) {

    file.speechList.push(
      createDefaultMediaSpeech({
        caption: "",
        captionColor: "#ffffff",
        voiceGender:
          getLastSelectedAiVoiceGender()
      })
    );

  }

  file.speechList.forEach(
    function (speech) {

      if (!speech.id) {
        speech.id =
          createSpeechId();
      }

      speech.startTime =
        Math.max(
          0,
          Number(speech.startTime) || 0
        );

      if (
        !Number.isFinite(
          Number(speech.duration)
        ) ||
        Number(speech.duration) <= 0
      ) {

        const speechIndex =
          file.speechList.indexOf(
            speech
          );

        const nextSpeech =
          file.speechList[
            speechIndex + 1
          ];

        const mediaDuration =
          Math.max(
            0.1,
            Number(file.duration) || 10
          );

        const calculatedEnd =
          nextSpeech
            ? Number(
                nextSpeech.startTime
              ) || mediaDuration
            : mediaDuration;

        speech.duration =
          Math.max(
            0.1,
            calculatedEnd -
            speech.startTime
          );

      } else {

        speech.duration =
          Math.max(
            0.1,
            Number(speech.duration)
          );

      }

      speech.text =
        speech.text !== undefined
          ? String(speech.text)
          : "";

      speech.animationEffect =
        [
          "zoom",
          "blur",
          "bounce",
          "rise",
          "fade"
        ].includes(
          speech.animationEffect
        )
          ? speech.animationEffect
          : "zoom";

      speech.color =
        speech.color ||
        "#ffffff";

      speech.voiceGender =
        (
          speech.voiceGender === "male" ||
          speech.voiceGender === "female"
        )
          ? speech.voiceGender
          : getLastSelectedAiVoiceGender();

      speech.voiceUrl =
        speech.voiceUrl ||
        "";

      speech.voiceText =
        speech.voiceText ||
        "";

      speech.voiceLanguage =
        speech.voiceLanguage ||
        "";

      speech.audioSource =
        (
          speech.audioSource === "upload" ||
          speech.audioSource === "record"
        )
          ? speech.audioSource
          : "ai";

      speech.uploadedAudioUrl =
        speech.uploadedAudioUrl ||
        "";

      speech.uploadedAudioName =
        speech.uploadedAudioName ||
        "";

      speech.uploadedAudioDuration =
        Math.max(
          0,
          Number(
            speech.uploadedAudioDuration
          ) || 0
        );

      speech.aiVolume =
        Number.isFinite(
          Number(
            speech.aiVolume
          )
        )
          ? Math.max(
              0,
              Math.min(
                1,
                Number(
                  speech.aiVolume
                )
              )
            )
          : 1;

      speech.uploadedVolume =
        Number.isFinite(
          Number(
            speech.uploadedVolume
          )
        )
          ? Math.max(
              0,
              Math.min(
                1,
                Number(
                  speech.uploadedVolume
                )
              )
            )
          : 1;

      speech.recordedAudioUrl =
        speech.recordedAudioUrl ||
        "";

      speech.recordedAudioName =
        speech.recordedAudioName ||
        "";

      speech.recordedAudioDuration =
        Math.max(
          0,
          Number(
            speech.recordedAudioDuration
          ) || 0
        );

      speech.fontScale =
        Math.max(
          0.60,
          Math.min(
            1.80,
            Number(speech.fontScale) || 1
          )
        );

      speech.positionX =
        Math.max(
          12,
          Math.min(
            88,
            Number(speech.positionX) || 50
          )
        );

      speech.positionY =
        Math.max(
          18,
          Math.min(
            82,
            Number(speech.positionY) || 72
          )
        );

    }
  );

  file.speechList.sort(
    function (a, b) {

      return (
        Number(a.startTime || 0) -
        Number(b.startTime || 0)
      );

    }
  );

  return file.speechList;

}

function migrateAllMediaSpeechLists() {

  selectedPhotos.forEach(
    function (file) {
      ensureMediaSpeechList(file);
    }
  );

}

async function initializeIzyPostProject() {

  await loadProjectPhotos();

  ipProjectReady = true;

}

async function loadProjectPhotos() {

  const savedProject =
    await loadIzyPostSavedProject();

  if (savedProject && Array.isArray(savedProject.selectedPhotos)) {

    selectedPhotos =
      savedProject.selectedPhotos;

    /*
      Blob URLs do not survive a page reload.
      Recreate a fresh Object URL from the
      File/Blob stored in IndexedDB.
    */

    selectedPhotos.forEach(
      function (file) {

        if (
          file &&
          (
            file.type === "video" ||
            file.isFreeVideo
          ) &&
          file.mediaBlob instanceof Blob
        ) {

          file.url =
            URL.createObjectURL(
              file.mediaBlob
            );

        }

      }
    );

    migrateAllMediaSpeechLists();

    photoCaptions =
      savedProject.photoCaptions || selectedPhotos.map(function(photo){
        return photo.caption || "";
      });

    photoDurations =
      savedProject.photoDurations || selectedPhotos.map(function(photo){
        return photo.duration || 10;
      });

    selectedPhotoTotal =
      selectedPhotos.length;

    const templateOutputSize =
      localStorage.getItem(
        "ip_templateOutputSize"
      );

    if (templateOutputSize) {

      savedProject.outputSize =
        templateOutputSize;

      localStorage.removeItem(
        "ip_templateOutputSize"
      );

    }

    if (savedProject.outputSize) {

      const sizeInput =
        document.querySelector(
          'input[name="videoSize"][value="' + savedProject.outputSize + '"]'
        );

      if (sizeInput) {
        sizeInput.checked = true;
      }

    }

    if (savedProject.transitionMode) {
      window.transitionMode = savedProject.transitionMode;
      localStorage.setItem("ip_transitionMode", savedProject.transitionMode);
    }

    if (
      savedProject.selectedMusicUrl &&
      savedProject.selectedMusicName
    ) {

      commitIndependentBackgroundMusic(
        savedProject.selectedMusicUrl,
        savedProject.selectedMusicName,
        savedProject.selectedMusicSource ||
          ""
      );

    } else {

      commitIndependentBackgroundMusic(
        "",
        "",
        ""
      );

    }

    refreshMusicOptions();

  } else {

    selectedPhotos = [];
    photoCaptions = [];
    photoDurations = [];
    selectedPhotoTotal = 0;

  }

  window.selectedPhotos = selectedPhotos;
  window.photoDurations = photoDurations;

  updatePhotoCounter();
  buildPhotoTextList();

}

function saveProjectPhotos() {

  applyPendingTemplateSpeechesToMedia();

  migrateAllMediaSpeechLists();

  window.selectedPhotos = selectedPhotos;
  window.photoDurations = photoDurations;

  scheduleIzyPostProjectSave();

}


function applyLocalizedDefaultTexts() {

  if (currentLanguage === "tr") {

    if (
      outroName.value === "Full Name" ||
      outroName.value === "Dr. Name"
    ) {
      outroName.value = "Ad Soyad";
    }

    if (
      outroProfession.value === "Profession" ||
      outroProfession.value === "Medical Specialist"
    ) {
      outroProfession.value = "Meslek";
    }

    if (
      introTitle.value === "Post Title" ||
      introTitle.value === "Your Post Title"
    ) {
      introTitle.value = "Gönderi Başlığı";
    }

    if (
      introSubtitle.value === "Short subtitle" ||
      introSubtitle.value === "Your short subtitle"
    ) {
      introSubtitle.value = "Kısa alt başlık";
    }

    if (
      videoOutroTitle.value === "Post Title" ||
      videoOutroTitle.value === "Your Post Title"
    ) {
      videoOutroTitle.value = "Gönderi Başlığı";
    }

    if (
      videoOutroName.value === "Full Name" ||
      videoOutroName.value === "Dr. Name"
    ) {
      videoOutroName.value = "Ad Soyad";
    }

    if (
      videoOutroProfession.value === "Profession" ||
      videoOutroProfession.value === "Medical Specialist"
    ) {
      videoOutroProfession.value = "Meslek";
    }

  } else {

    if (outroName.value === "Ad Soyad") {
      outroName.value = "Full Name";
    }

    if (outroProfession.value === "Meslek") {
      outroProfession.value = "Profession";
    }

    if (introTitle.value === "Gönderi Başlığı") {
      introTitle.value = "Post Title";
    }

    if (introSubtitle.value === "Kısa alt başlık") {
      introSubtitle.value = "Short subtitle";
    }

    if (videoOutroTitle.value === "Gönderi Başlığı") {
      videoOutroTitle.value = "Post Title";
    }

    if (videoOutroName.value === "Ad Soyad") {
      videoOutroName.value = "Full Name";
    }

    if (videoOutroProfession.value === "Meslek") {
      videoOutroProfession.value = "Profession";
    }

  }

  if (
  !outroPhone.value ||
  outroPhone.value === "+90 ..." ||
  outroPhone.value === "+90"
) {
  outroPhone.value =
    currentLanguage === "en"
      ? "Tel. Number"
      : "Telefon Numarası";
}

}

xLangBtn.onclick = function () {

  if (currentLanguage === "en") {

    currentLanguage = "tr";
    localStorage.setItem("ip_language","tr");

    if (xSubtitle) {
      xSubtitle.textContent =
        "Profesyonel sosyal videolar oluşturun.";
    }

xLangBtn.innerHTML = "🌐 EN";

document
  .querySelectorAll(
    "#timelineWorkspaceMenu [data-home-tr]"
  )
  .forEach(function (element) {

    element.textContent =
      element.dataset.homeTr;

  });

m1Btn.src=ipNoCache("/Assets/Icons/m1-tr.png");
m2Btn.src=ipNoCache("/Assets/Icons/m2-tr.png");
m3Btn.src=ipNoCache("/Assets/Icons/m3-1-tr.png");
m32Btn.src=ipNoCache("/Assets/Icons/m3-2-tr.png");
m4Btn.src=ipNoCache("/Assets/Icons/m4-tr.png");
m5Btn.src=ipNoCache("/Assets/Icons/m5-tr.png");
m6Btn.src=ipNoCache("/Assets/Icons/m6-tr.png");
m7Btn.src=ipNoCache("/Assets/Icons/m7-tr.png");
xContactTitle.textContent = "Bu bilgiler videolarınızda gösterilecektir.";
xNameLabel.textContent = "Ad Soyad";
xProfessionLabel.textContent = "Meslek / Uzmanlık";
xPhoneLabel.textContent = "Telefon";
xContactLabel.textContent = "Web sitesi / Instagram";
xLogoNote.textContent = "Önerilen logo boyutu: 150 KB altında";
chooseProfilePhotoBtn.textContent = "Profil Fotoğrafı Seç";
xProfilePhotoPreviewTitle.textContent = "Profil Fotoğrafı";
xLogoPreviewTitle.textContent = "Logo";
if (localStorage.getItem("ip_profilePhoto")) {
  savedProfilePhotoInfo.innerHTML = "✓ Profil fotoğrafı seçildi";
}
saveUserInfoBtn.textContent = "Kaydet ve Kapat";
clearUserInfoBtn.textContent = "Bilgileri Sil";
xOutroTitle.textContent =
  "Bitiş Tasarımı";

xOutroNote.textContent =
  "Videonuzun sonunda gösterilecek bilgileri inceleyin ve Bitiş süresini ayarlayın.";
xOutroEnabledText.textContent = "Bitişi Videoya Ekle";
xOutroMainTitleLabel.textContent = "Başlık";
xOutroNameLabel.textContent = "Ad Soyad";
xOutroProfessionLabel.textContent = "Meslek / Uzmanlık";
xOutroContactLabel.textContent = "Web sitesi / Instagram";
document.getElementById(
  "outroInformationNotice"
).textContent =
  "Bu bilgiler Bitiş bölümünde gösterilecektir. Değiştirmek için Information kartını kullanın.";

xEditOutroInformationBtn.textContent =
  "Bilgileri Düzenle";

xSaveOutroBtn.textContent =
  "Süreyi Kaydet ve Kapat";
xOutputTitle.textContent = "Çıkış Boyutu";
xSaveOutputBtn.textContent = "Çıkış Boyutunu Kaydet";
xTextTitle.textContent = "Başlangıç Tasarımı";

document.getElementById(
  "introCardSubtitle"
).textContent =
  "Videonuzun açılış kapağını, metnini, düzenini ve çerçevesini oluşturun";

xIntroEnabledText.textContent = "Başlangıcı Videoya Ekle";
xIntroTitleLabel.textContent = "Başlık";
xIntroSubtitleLabel.textContent = "Alt başlık";
introTitleColorBtn.title = "Başlık Rengi";
introSubtitleColorBtn.title = "Alt Başlık Rengi";
xIntroFrameColorLabel.textContent = "Çerçeve Rengi";
xIntroLayoutTitle.textContent = "Başlangıç Düzenini Seçin";
refreshIntroOutroDurationControls();
xIntroFrameToggleText.textContent = "Dekoratif çerçeveyi göster";
xIntroFrameThicknessLabel.textContent = "Çerçeve Kalınlığı";
introFrameThickBtn.textContent = "Kalın";
introFrameNormalBtn.textContent = "Normal";
introFrameThinBtn.textContent = "İnce";
chooseIntroCoverBtn.textContent = "Kapak Görseli Seç";
previewIntroFrameBtn.textContent = "Başlangıcı Önizle";
xIntroPreviewTitle.textContent = "Başlangıç Önizleme";

introPreviewSubtitle.textContent =
  "Açılış kapağındaki öğeleri inceleyin ve boyutlandırın";

changeIntroPreviewCoverBtn.textContent =
  "Görsel Seç / Değiştir";

removeIntroPreviewCoverBtn.textContent =
  "Görseli Kaldır";

downloadIntroPreviewBtn.textContent =
  "İndir";

closeIntroPreviewBtn.textContent =
  "Kapat";

if (
  localStorage.getItem(
    "ip_introCoverBlank"
  ) === "yes"
) {

  savedIntroCoverInfo.innerHTML =
    "✓ Arka plan görseli olmayan başlangıç";

} else if (
  localStorage.getItem(
    "ip_introCoverImage"
  )
) {

  savedIntroCoverInfo.innerHTML =
    "✓ Kapak görseli seçildi";

}
xSaveTextBtn.textContent = "Kaydet ve Kapat";
clearIntroSettingsBtn.textContent = "Başlangıcı Temizle";
deletePreviewPhotoBtn.textContent = "Sil";
downloadPreviewMediaBtn.textContent = "İndir";
saveCropPhotoBtn.textContent = "Kırp";
closePreviewPhotoBtn.textContent = "Kaydet ve Kapat";
arrangePhotosBtn.textContent = "↕ Taşı";
photoTimeBtn.textContent = "⏱ Süre";
transitionBtn.textContent = "✨ Hareket";
xTransitionTitle.textContent = "Hareket";
xSaveTransitionBtn.textContent = "Hareketi Kaydet";

timelineMotionSpeedTitle.textContent =
  "Fotoğraf Hareket Hızı";

timelineMotionSoftText.textContent =
  "Yumuşak";

timelineMotionNormalText.textContent =
  "Normal";

timelineMotionDynamicText.textContent =
  "Dinamik";
arrangeTitle.textContent = "Fotoğrafları taşı";
doneArrangeBtn.textContent = "Tamam";
timeModeNote.textContent = "Her fotoğraf için varsayılan süre 10 saniyedir. Değiştirebilirsiniz.";
xTelegramContact.textContent = "Telegram";
xFooterDesignedBy.textContent = "Tasarım ve Yayın:";
xEmailContact.textContent = "E-Posta";
chooseLogoBtn.textContent = "Logo Seç";
createTextLogoBtn.textContent = "Logo Oluştur";
xTextLogoTitle.textContent = "Metin Logo Oluştur";
xLogoFirstNameLabel.textContent = "Ad";
xLogoLastNameLabel.textContent = "Soyad";
if (xLogoPreviewLabel) {
  xLogoPreviewLabel.textContent = "Önizleme";
}
xLogoCaseLabel.textContent = "Yazı Biçimi";
xLogoGradientLabel.textContent = "Gradyan Yönü";
xLogoFrameColorLabel.textContent = "Çerçeve Renkleri";
xLogoTextColorLabel.textContent = "Yazı Renkleri";
useTextLogoBtn.textContent = "Kullan";
downloadTextLogoBtn.textContent = "İndir";
closeTextLogoBtn.textContent = "Kapat";
xMusicTitle.textContent = "Müzik";
xMusicNote.textContent = "Müziği önizleyin ve videoya ekleyin.";
xVahidMusicLabel.textContent = "Vahid Nazemi'den";
xUserMusicLabel.textContent = "Kendi Müziğiniz";
chooseUserMusicBtn.textContent = "Seç";
addMusicBtn.textContent = "Müzik Ekle";
removeMusicBtn.textContent = "Müziği Sil";
closeMusicBtn.textContent = "Kapat";
refreshTextLogoMakerLanguage();
refreshMusicOptions();
vahidMusicSelect.options[0].textContent = "Müzik seç";
if (savedLogo) {
  savedLogoInfo.innerHTML = "✓ Logo mevcut";
  loadMoreFreePhotosBtn.textContent = "Daha Fazla";
}

applyLocalizedDefaultTexts();

updatePhotoCounter();
buildPhotoTextList();

  }

  else {

    currentLanguage = "en";
    localStorage.setItem("ip_language","en");
        if (xSubtitle) {
      xSubtitle.textContent =
        "Create professional social videos.";
    }

xLangBtn.innerHTML = "🌐 TR";

document
  .querySelectorAll(
    "#timelineWorkspaceMenu [data-home-en]"
  )
  .forEach(function (element) {

    element.textContent =
      element.dataset.homeEn;

  });

m1Btn.src=ipNoCache("/Assets/Icons/m1-en.png");
m2Btn.src=ipNoCache("/Assets/Icons/m2-en.png");
m3Btn.src=ipNoCache("/Assets/Icons/m3-1-en.png");
m32Btn.src=ipNoCache("/Assets/Icons/m3-2-en.png");
m4Btn.src=ipNoCache("/Assets/Icons/m4-en.png");
m5Btn.src=ipNoCache("/Assets/Icons/m5-en.png");
m6Btn.src=ipNoCache("/Assets/Icons/m6-en.png");
m7Btn.src=ipNoCache("/Assets/Icons/m7-en.png");
xContactTitle.textContent = "This information will be shown in your videos.";
xNameLabel.textContent = "Name";
xProfessionLabel.textContent = "Profession";
xPhoneLabel.textContent = "Phone";
xContactLabel.textContent = "Website / Instagram";
xLogoNote.textContent = "Recommended logo size: under 150 KB";
chooseProfilePhotoBtn.textContent = "Choose Profile Photo";
xProfilePhotoPreviewTitle.textContent = "Profile Photo";
xLogoPreviewTitle.textContent = "Logo";
if (localStorage.getItem("ip_profilePhoto")) {
  savedProfilePhotoInfo.innerHTML = "✓ Profile photo selected";
}
saveUserInfoBtn.textContent = "Save & Close";
clearUserInfoBtn.textContent = "Clear Information";
xOutroTitle.textContent =
  "Outro Design";

xOutroNote.textContent =
  "Review the information that will appear at the end of your video and set the Outro duration";
xOutroEnabledText.textContent = "Include Outro";
xOutroMainTitleLabel.textContent = "Title";
xOutroNameLabel.textContent = "Name";
xOutroProfessionLabel.textContent = "Profession";
xOutroContactLabel.textContent = "Website / Instagram";
document.getElementById(
  "outroInformationNotice"
).textContent =
  "These details will be displayed in the Outro. To change them, please use the Information card.";

xEditOutroInformationBtn.textContent =
  "Edit Information";

xSaveOutroBtn.textContent =
  "Save Duration & Close";
xOutputTitle.textContent = "Output Size";
xSaveOutputBtn.textContent = "Save Output Size";
xTextTitle.textContent = "Intro Design";

document.getElementById(
  "introCardSubtitle"
).textContent =
  "Create the opening cover, text, layout and frame for your video";

xIntroEnabledText.textContent = "Include Intro";
xIntroTitleLabel.textContent = "Title";
xIntroSubtitleLabel.textContent = "Subtitle";
introTitleColorBtn.title = "Title Color";
introSubtitleColorBtn.title = "Subtitle Color";
xIntroFrameColorLabel.textContent = "Frame Color";
xIntroLayoutTitle.textContent = "Choose Intro Layout";
refreshIntroOutroDurationControls();
xIntroFrameToggleText.textContent = "Show decorative frame";
xIntroFrameThicknessLabel.textContent = "Frame Thickness";
introFrameThickBtn.textContent = "Thick";
introFrameNormalBtn.textContent = "Normal";
introFrameThinBtn.textContent = "Thin";
chooseIntroCoverBtn.textContent = "Choose Cover Image";
previewIntroFrameBtn.textContent = "Preview Intro";
xIntroPreviewTitle.textContent = "Intro Preview";

introPreviewSubtitle.textContent =
  "Review and resize the elements of your opening cover";

changeIntroPreviewCoverBtn.textContent =
  "Choose / Change Image";

removeIntroPreviewCoverBtn.textContent =
  "Remove Image";

downloadIntroPreviewBtn.textContent =
  "Download";

closeIntroPreviewBtn.textContent =
  "Close";

if (
  localStorage.getItem(
    "ip_introCoverBlank"
  ) === "yes"
) {

  savedIntroCoverInfo.innerHTML =
    "✓ Intro without background image";

} else if (
  localStorage.getItem(
    "ip_introCoverImage"
  )
) {

  savedIntroCoverInfo.innerHTML =
    "✓ Cover image selected";

}
xSaveTextBtn.textContent = "Save & Close";
clearIntroSettingsBtn.textContent = "Clear Intro";
deletePreviewPhotoBtn.textContent = "Delete";
downloadPreviewMediaBtn.textContent = "Download";
saveCropPhotoBtn.textContent = "Crop";
closePreviewPhotoBtn.textContent = "Save & Close";
arrangePhotosBtn.textContent = "↕ Move";
photoTimeBtn.textContent = "⏱ Time";
transitionBtn.textContent = "✨ Motion";
xTransitionTitle.textContent = "Motion";
xSaveTransitionBtn.textContent = "Save Motion";

timelineMotionSpeedTitle.textContent =
  "Photo Motion Speed";

timelineMotionSoftText.textContent =
  "Soft";

timelineMotionNormalText.textContent =
  "Normal";

timelineMotionDynamicText.textContent =
  "Dynamic";
arrangeTitle.textContent = "Move photos";
doneArrangeBtn.textContent = "Done";
timeModeNote.textContent = "Default duration for each photo is 10 seconds. You can change it.";
xTelegramContact.textContent = "Telegram";
xFooterDesignedBy.textContent = "Designed & Published by:";
xEmailContact.textContent = "Email";
chooseLogoBtn.textContent = "Choose Logo";
createTextLogoBtn.textContent = "Logo Maker";
xTextLogoTitle.textContent = "Text Logo Maker";
xLogoFirstNameLabel.textContent = "First Name";
xLogoLastNameLabel.textContent = "Last Name";
if (xLogoPreviewLabel) {
  xLogoPreviewLabel.textContent = "Preview";
}
xLogoCaseLabel.textContent = "Text Case";
xLogoGradientLabel.textContent = "Gradient Direction";
xLogoFrameColorLabel.textContent = "Fill Colors";
xLogoTextColorLabel.textContent = "Text Colors";
useTextLogoBtn.textContent = "Use Logo";
downloadTextLogoBtn.textContent = "Download";
closeTextLogoBtn.textContent = "Close";
xMusicTitle.textContent = "Music";
xMusicNote.textContent = "Preview music and add it to your video.";
xVahidMusicLabel.textContent = "By Vahid Nazemi";
xUserMusicLabel.textContent = "Your Music";
chooseUserMusicBtn.textContent = "Choose";
addMusicBtn.textContent = "Add Music";
removeMusicBtn.textContent = "Remove Music";
closeMusicBtn.textContent = "Close";
refreshTextLogoMakerLanguage();
refreshMusicOptions();
vahidMusicSelect.options[0].textContent = "Select music";
if (savedLogo) {
  savedLogoInfo.innerHTML = "✓ Logo exists";
  loadMoreFreePhotosBtn.textContent = "Load More";
}

applyLocalizedDefaultTexts();

loadPhotoDurations();
saveCurrentPhotoOrder();
savePhotoDurations();
updatePhotoCounter();
buildPhotoTextList();
    
  }

};

/* ***** 17 - PHOTO COUNTER ***** */

const IP_MAX_TIMELINE_MEDIA = 30;

function showTimelineLimitAlert() {

  alert(
    currentLanguage === "en"
      ? "You can add up to 30 media items to the timeline."
      : "Zaman çizelgesine en fazla 30 medya ekleyebilirsiniz."
  );

}

function getTimelineRemainingSlots() {

  return Math.max(
    0,
    IP_MAX_TIMELINE_MEDIA - selectedPhotos.length
  );

}

function updateMediaPreparingPercent(percent) {

  const safePercent =
    Math.max(
      0,
      Math.min(100, Math.round(percent || 0))
    );

  mediaPreparingPercent.textContent =
    safePercent + "%";

}

function showMediaPreparing() {

  mediaPreparingText.innerHTML =
    currentLanguage === "en"
      ? "Preparing your media...<br>Please wait..."
      : "Medyanız hazırlanıyor...<br>Lütfen bekleyin...";

  updateMediaPreparingPercent(0);

  mediaPreparingBox.style.display = "flex";

}

function hideMediaPreparing() {

  updateMediaPreparingPercent(0);
  mediaPreparingBox.style.display = "none";

}

function updateSelectedPhotosCounter() {

  let newPhoneFiles =
    Array.from(photosInput.files);

  if (newPhoneFiles.length === 0) {
    return;
  }

  const remainingSlots =
    getTimelineRemainingSlots();

  if (remainingSlots <= 0) {
    photosInput.value = "";
    showTimelineLimitAlert();
    return;
  }

  if (newPhoneFiles.length > remainingSlots) {
    newPhoneFiles =
      newPhoneFiles.slice(0, remainingSlots);

    showTimelineLimitAlert();
  }

  showMediaPreparing();

  let loadedBytes = 0;

  const fileProgressMap =
    newPhoneFiles.map(function () {
      return 0;
    });

  const totalBytes =
    newPhoneFiles.reduce(function (sum, file) {
      return sum + (file.size || 0);
    }, 0) || 1;

  function updateFileProgress(fileIndex, loaded) {

    fileProgressMap[fileIndex] = loaded || 0;

    loadedBytes =
      fileProgressMap.reduce(function (sum, value) {
        return sum + value;
      }, 0);

    updateMediaPreparingPercent(
      (loadedBytes / totalBytes) * 100
    );

  }

  const readers =
    newPhoneFiles.map(function (file, fileIndex) {

      return new Promise(function (resolve) {

        if (file.type && file.type.indexOf("video/") === 0) {

          const videoUrl =
            URL.createObjectURL(file);

          const tempVideo =
            document.createElement("video");

          tempVideo.preload =
            "metadata";

          tempVideo.muted =
            true;

          tempVideo.playsInline =
            true;

          tempVideo.setAttribute(
            "playsinline",
            ""
          );

          tempVideo.setAttribute(
            "webkit-playsinline",
            ""
          );

          tempVideo.src =
            videoUrl;

          async function finishPhoneVideo(
            duration
          ) {

            let videoThumbnail =
              "";

            const videoFileName =
              String(
                file.name || ""
              ).toLowerCase();

            const videoFileType =
              String(
                file.type || ""
              ).toLowerCase();

            const isMovFile =
              videoFileName.endsWith(
                ".mov"
              ) ||
              videoFileType.includes(
                "quicktime"
              );

            if (isMovFile) {

              videoThumbnail =
                createMovFileThumbnail();

            } else {

              try {

                videoThumbnail =
                  await createVideoThumbnail(
                    file
                  );

              } catch (error) {

                videoThumbnail =
                  "";

              }

            }

            updateFileProgress(
              fileIndex,
              file.size || 0
            );

            resolve({
              id: createPhotoId(),
              type: "video",
              name:
                file.name ||
                "Phone Video",
              isPhonePhoto: true,
              isFreePhoto: false,
              isFreeVideo: false,

              /*
                Keep the original File/Blob in
                IndexedDB instead of converting
                the complete video to Base64.
              */
              mediaBlob: file,

              /*
                This Object URL is used during
                the current page session.
              */
              url: videoUrl,

              thumbnail: videoThumbnail,
              caption: "",
              duration: duration,
              realDuration: duration,
              voiceUrl: "",
              voiceText: "",
              voiceGender:
                getLastSelectedAiVoiceGender()
            });

          }

          tempVideo.onloadedmetadata =
            function () {

              const realDuration =
                Math.max(
                  1,
                  Math.ceil(
                    Number(
                      tempVideo.duration
                    ) || 10
                  )
                );

              finishPhoneVideo(
                realDuration
              );

            };

          tempVideo.onerror =
            function () {

              finishPhoneVideo(
                10
              );

            };

          try {

            tempVideo.load();

          } catch (error) {

            finishPhoneVideo(
              10
            );

          }

          return;

        }

        const reader = new FileReader();

        reader.onprogress = function (event) {
          if (event.lengthComputable) {
            updateFileProgress(fileIndex, event.loaded);
          }
        };

        reader.onload = function (e) {

          updateFileProgress(fileIndex, file.size || 0);
          resolve({
            id: createPhotoId(),
            type: "image",
            name: file.name || "Phone Photo",
            isPhonePhoto: true,
            isFreePhoto: false,
            isFreeVideo: false,
            url: e.target.result,
            originalUrl: e.target.result,
            caption: "",
            duration: 10,
            voiceUrl: "",
            voiceText: "",
            voiceGender:
              getLastSelectedAiVoiceGender()
          });
        };

        reader.readAsDataURL(file);

      });

    });

  Promise.all(readers).then(function (newPhonePhotos) {

    installMediaIntoTemplateSlots(
      newPhonePhotos
    );

    photoCaptions =
      selectedPhotos.map(function (photo) {
        return photo.caption || "";
      });

    photoDurations =
      selectedPhotos.map(function (photo) {
        return photo.duration || 10;
      });

    selectedPhotoTotal =
      selectedPhotos.length;

    saveProjectPhotos();

    updatePhotoCounter();
    buildPhotoTextList();

    photosInput.value = "";

    hideMediaPreparing();

    openTimelineCardBtn.click();

  }).catch(function () {

    photosInput.value = "";
    hideMediaPreparing();

  });

}

function updatePhotoCounter() {

  photoArrangeBar.style.display = "none";
  openTimelineCardBtn.style.display = "block";

  if (currentLanguage === "en") {

    photoCount.innerHTML =
      selectedPhotoTotal === 0
        ? "0 media selected"
        : "✓ " +
          selectedPhotoTotal +
          " media item(s) selected";

    openTimelineCardBtn.textContent =
      "Timeline";

  } else {

    photoCount.innerHTML =
      selectedPhotoTotal === 0
        ? "0 medya seçildi"
        : "✓ " +
          selectedPhotoTotal +
          " medya seçildi";

    openTimelineCardBtn.textContent =
      "Zaman Çizelgesi";

  }

}

function refreshTimelineOutputSizeIndicator() {

  const selected =
    document.querySelector(
      'input[name="videoSize"]:checked'
    );

  const size =
    selected
      ? selected.value
      : "4:5";

  timelineOutputRatio.textContent =
    size;

  timelineOutputShape.className =
    "timeline-output-shape";

  if (size === "1:1") {
    timelineOutputShape.classList.add("ratio-1-1");
    return;
  }

  if (size === "9:16") {
    timelineOutputShape.classList.add("ratio-9-16");
    return;
  }

  if (size === "16:9") {
    timelineOutputShape.classList.add("ratio-16-9");
    return;
  }

  timelineOutputShape.classList.add("ratio-4-5");

}

function applyPhotoPreviewRatio() {

  const selected =
    document.querySelector(
      'input[name="videoSize"]:checked'
    );

  const size =
    selected
      ? selected.value
      : "4:5";

  photoPreviewFrame.style.width =
    "";

  photoPreviewFrame.style.height =
    "";

  if (size === "1:1") {

    photoPreviewFrame.style.aspectRatio =
      "1 / 1";

    photoPreviewFrame.style.width =
      "100%";

    photoPreviewFrame.style.height =
      "100%";

    return;

  }

  if (size === "9:16") {

    photoPreviewFrame.style.aspectRatio =
      "9 / 16";

    photoPreviewFrame.style.width =
      "56.25%";

    photoPreviewFrame.style.height =
      "100%";

    return;

  }

  if (size === "16:9") {

    photoPreviewFrame.style.aspectRatio =
      "16 / 9";

    photoPreviewFrame.style.width =
      "100%";

    photoPreviewFrame.style.height =
      "56.25%";

    return;

  }

  photoPreviewFrame.style.aspectRatio =
    "4 / 5";

  photoPreviewFrame.style.width =
    "80%";

  photoPreviewFrame.style.height =
    "100%";

}

/* ***** 18 - PHOTO TEXT LIST ***** */

function getVoiceLanguageCode() {
  return currentLanguage === "tr"
    ? "tr-TR"
    : "en-US";
}

function refreshSlideVoiceButton(btn, file) {

  const text =
    (file.caption || "").trim();

  if (file.voiceUrl && file.voiceText === text) {
    btn.textContent = "🔊";
    btn.classList.add("ready");
    btn.classList.remove("loading");
    return;
  }

  btn.textContent = "🔇";
  btn.classList.remove("ready");
  btn.classList.remove("loading");

}

async function createSlideVoice(file, btn) {

  const text =
    (file.caption || "").trim();

  const fileIndex =
    selectedPhotos.indexOf(file);

  if (
    fileIndex >= 0 &&
    !mediaCaptionFitsDuration(
      file,
      fileIndex
    )
  ) {

    alert(
      currentLanguage === "en"
        ? "This text is too long for the selected scene time."
        : "Bu metin seçilen sahne süresi için çok uzun."
    );

    return;

  }

  if (!text) {
    alert(
      currentLanguage === "en"
        ? "Please write a caption first."
        : "Önce fotoğraf yazısını yazın."
    );
    return;
  }

  if (file.voiceUrl && file.voiceText === text) {
    const audio = new Audio(file.voiceUrl);
    audio.play();
    return;
  }

  btn.textContent = "…";
  btn.classList.add("loading");

  const response =
    await fetch(
      "/Supports/free-photo-search.php?tts=1",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          text: text,
          lang: getVoiceLanguageCode(),
          gender: file.voiceGender || "female"
        })
      }
    );

  const data =
    await response.json();

  if (!data.audioUrl) {
    btn.textContent = "🔇";
    btn.classList.remove("loading");
    alert(
      currentLanguage === "en"
        ? "Voice could not be created."
        : "Ses oluşturulamadı."
    );
    return;
  }

  file.voiceUrl = data.audioUrl;
  file.voiceText = text;
  file.voiceLanguage = getVoiceLanguageCode();

  saveProjectPhotos();

  refreshSlideVoiceButton(btn, file);

  const audio = new Audio(file.voiceUrl);
  audio.play();

}

async function createTimelineSpeechVoice(
  speech,
  btn,
  file
) {

  if (btn._speechVoiceBusy) {
    return;
  }

  const text =
    (speech.text || "").trim();

  if (!text) {

    alert(
      currentLanguage === "en"
        ? "Please write a Speech first."
        : "Önce bir konuşma yazın."
    );

    return;

  }

  btn._speechVoiceBusy = true;
  btn.disabled = true;

  function releaseSpeechVoiceLock() {

    btn._speechVoiceBusy = false;
    btn._activeSpeechAudio = null;

    refreshTimelineVoiceButton(
      file
    );

  }

  function playSpeechVoice(
    audioUrl
  ) {

    const audio =
      new Audio(audioUrl);

    audio.volume =
      clampIzyPostAudioVolume(
        speech.aiVolume,
        IZYPOST_AUDIO_DEFAULTS.ai
      );

    btn._activeSpeechAudio =
      audio;

    audio.addEventListener(
      "ended",
      releaseSpeechVoiceLock,
      { once: true }
    );

    audio.addEventListener(
      "error",
      releaseSpeechVoiceLock,
      { once: true }
    );

    const playPromise =
      audio.play();

    if (
      playPromise &&
      typeof playPromise.catch ===
      "function"
    ) {

      playPromise.catch(
        releaseSpeechVoiceLock
      );

    }

  }

  if (
    speech.voiceUrl &&
    speech.voiceText === text
  ) {

    playSpeechVoice(
      speech.voiceUrl
    );

    return;

  }

  btn.textContent = "…";
  btn.classList.add("loading");

  try {

    const response =
      await fetch(
        "/Supports/free-photo-search.php?tts=1",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            text: text,
            lang: getVoiceLanguageCode(),
            gender:
              speech.voiceGender ||
              "female"
          })
        }
      );

    const data =
      await response.json();

    if (!data.audioUrl) {

      releaseSpeechVoiceLock();

      alert(
        currentLanguage === "en"
          ? "Voice could not be created."
          : "Ses oluşturulamadı."
      );

      return;

    }

    speech.voiceUrl =
      data.audioUrl;

    speech.voiceText =
      text;

    speech.voiceLanguage =
      getVoiceLanguageCode();

    syncLegacyCaptionFromSpeechList(
      file
    );

    saveProjectPhotos();

    btn.textContent = "🔊";
    btn.classList.remove("loading");
    btn.classList.add("ready");

    playSpeechVoice(
      speech.voiceUrl
    );

  } catch (error) {

    releaseSpeechVoiceLock();

    alert(
      currentLanguage === "en"
        ? "Voice could not be created."
        : "Ses oluşturulamadı."
    );

  }

}

function refreshTimelineGenderButton(file) {

  const speech =
    getSelectedSpeech(file);

  const isFemale =
    !speech ||
    (speech.voiceGender || "female") === "female";

  timelineGenderBtn.innerHTML =
    '<img src="/Assets/Icons/' +
    (isFemale ? 'Speaker-Female.webp' : 'Speaker-Male.webp') +
    '" style="width:64px;height:34px;display:block;margin:auto;">';

}

function refreshTimelineVoiceButton(file) {

  const speech =
    getSelectedSpeech(file);

  if (!speech) {
    timelineVoiceBtn.textContent = "🔇";
    timelineVoiceBtn.classList.remove("ready");
    timelineVoiceBtn.disabled = true;
    return;
  }

  const text =
    (speech.text || "").trim();

  if (
    speech.voiceUrl &&
    speech.voiceText === text
  ) {
    timelineVoiceBtn.textContent = "🔊";
    timelineVoiceBtn.classList.add("ready");
    timelineVoiceBtn.disabled = false;
    return;
  }

  timelineVoiceBtn.textContent = "🔇";
  timelineVoiceBtn.classList.remove("ready");
  timelineVoiceBtn.disabled = false;

}

function parkTimelineSpeechLiveDock() {

  if (
    !timelineSpeechLiveDock ||
    !photoPreviewInner ||
    !timelineEditControls
  ) {
    return;
  }

  const trimWorkspace =
    document.getElementById(
      "timelineTrimWorkspace"
    );

  const speechEffectBox =
    document.querySelector(
      ".timeline-speech-effect-box"
    );

  const audioSourceBox =
    document.querySelector(
      ".timeline-audio-source-box"
    );

  let rightColumn =
    document.getElementById(
      "timelineRightColumn"
    );

  if (!rightColumn) {

    rightColumn =
      document.createElement(
        "div"
      );

    rightColumn.id =
      "timelineRightColumn";

    photoPreviewInner.insertBefore(
      rightColumn,
      timelineEditControls
    );

  }

  if (
    timelineSpeechLiveDock.parentElement !==
      rightColumn
  ) {

    rightColumn.appendChild(
      timelineSpeechLiveDock
    );

  }

  let rightTools =
    document.getElementById(
      "timelineRightTools"
    );

  if (!rightTools) {

    rightTools =
      document.createElement(
        "div"
      );

    rightTools.id =
      "timelineRightTools";

    rightColumn.appendChild(
      rightTools
    );

  }

  if (
    speechEffectBox &&
    speechEffectBox.parentElement !==
      rightTools
  ) {

    rightTools.appendChild(
      speechEffectBox
    );

  }

  const previewActions =
    document.getElementById(
      "photoPreviewActions"
    );

  if (
    previewActions &&
    speechEffectBox &&
    previewActions.parentElement !==
      speechEffectBox
  ) {

    speechEffectBox.appendChild(
      previewActions
    );

  }

  if (
    audioSourceBox &&
    audioSourceBox.parentElement !==
      timelineEditControls
  ) {

    timelineEditControls.appendChild(
      audioSourceBox
    );

  }

  if (
    audioSourceBox &&
    timelineAiVoiceControls &&
    timelineAiVoiceControls.parentElement !==
      audioSourceBox
  ) {

    audioSourceBox.appendChild(
      timelineAiVoiceControls
    );

  }

  if (
    trimWorkspace &&
    trimWorkspace.parentElement !==
      rightColumn
  ) {

    rightColumn.appendChild(
      trimWorkspace
    );

  }

}

function moveTimelineSpeechLiveDockToSelected() {

  parkTimelineSpeechLiveDock();

}

function refreshTimelineSpeechOverview(
  file
) {

  if (
    !file ||
    currentPreviewIndex === null ||
    !timelineSpeechOverviewRail
  ) {
    return;
  }

  normalizeTimelineSpeechTiming(
    file
  );

  const mediaDuration =
    getCurrentMediaDuration(
      file,
      currentPreviewIndex
    );

  const list =
    ensureMediaSpeechList(file);

  timelineSpeechOverviewDuration.textContent =
    mediaDuration
      .toFixed(1)
      .replace(".0", "") +
    "s";

  timelineSpeechOverviewRail.innerHTML =
    "";

  if (!list.length) {

    const empty =
      document.createElement("div");

    empty.className =
      "timeline-speech-overview-empty";

    empty.textContent =
      currentLanguage === "en"
        ? "No Speech"
        : "Konuşma Yok";

    timelineSpeechOverviewRail.appendChild(
      empty
    );

    return;

  }

  function getTimeFromPointer(
    event
  ) {

    const rect =
      timelineSpeechOverviewRail
        .getBoundingClientRect();

    const pointerX =
      Math.max(
        0,
        Math.min(
          rect.width,
          event.clientX -
          rect.left
        )
      );

    return (
      pointerX /
      Math.max(
        1,
        rect.width
      )
    ) *
    mediaDuration;

  }

  list.forEach(
    function (speech) {

      const start =
        Math.max(
          0,
          Number(
            speech.startTime
          ) || 0
        );

      const duration =
        getSpeechAvailableDuration(
          file,
          currentPreviewIndex,
          speech
        );

      const end =
        Math.min(
          mediaDuration,
          start + duration
        );

      const leftPercent =
        mediaDuration > 0
          ? (
              start /
              mediaDuration
            ) *
            100
          : 0;

      const widthPercent =
        mediaDuration > 0
          ? (
              duration /
              mediaDuration
            ) *
            100
          : 100;

      const block =
        document.createElement(
          "div"
        );

      block.className =
        "timeline-speech-overview-block" +
        (
          speech.id ===
          currentSpeechId
            ? " selected"
            : ""
        );

      block.style.left =
        leftPercent + "%";

      block.style.width =
        Math.max(
          2,
          Math.min(
            100 - leftPercent,
            widthPercent
          )
        ) +
        "%";

      block.title =
        start.toFixed(1) +
        "s → " +
        end.toFixed(1) +
        "s";

      const startHandle =
        document.createElement(
          "div"
        );

      startHandle.className =
        "timeline-speech-handle start";

      const endHandle =
        document.createElement(
          "div"
        );

      endHandle.className =
        "timeline-speech-handle end";

      block.appendChild(
        startHandle
      );

      block.appendChild(
        endHandle
      );

      block.onclick =
        function () {

          currentSpeechId =
            speech.id;

          refreshTimelineEditControls();

        };

      function beginSpeechDrag(
        event,
        dragMode
      ) {

        event.preventDefault();
        event.stopPropagation();

        currentSpeechId =
          speech.id;

        const originalStart =
          Number(
            speech.startTime
          ) || 0;

        const originalDuration =
          Number(
            speech.duration
          ) || 0.1;

        const originalPointerTime =
          getTimeFromPointer(
            event
          );

        block.classList.add(
          "dragging"
        );

        try {

          block.setPointerCapture(
            event.pointerId
          );

        } catch (error) {}

        document.body.style.userSelect =
          "none";

        document.body.style.webkitUserSelect =
          "none";

        function moveSpeech(
          moveEvent
        ) {

          moveEvent.preventDefault();

          const pointerTime =
            getTimeFromPointer(
              moveEvent
            );

          const difference =
            pointerTime -
            originalPointerTime;

          if (
            dragMode === "start"
          ) {

            const originalEnd =
              originalStart +
              originalDuration;

            const minimumDuration =
              getMinimumSpeechDuration(
                speech
              );

            const newStart =
              Math.max(
                0,
                Math.min(
                  originalEnd -
                  minimumDuration,
                  originalStart +
                  difference
                )
              );

            speech.startTime =
              Number(
                newStart.toFixed(1)
              );

            speech.duration =
              Number(
                (
                  originalEnd -
                  newStart
                ).toFixed(1)
              );

          } else if (
            dragMode === "end"
          ) {

            const minimumDuration =
              getMinimumSpeechDuration(
                speech
              );

            const newEnd =
              Math.max(
                originalStart +
                minimumDuration,
                Math.min(
                  mediaDuration,
                  originalStart +
                  originalDuration +
                  difference
                )
              );

            speech.duration =
              Number(
                (
                  newEnd -
                  originalStart
                ).toFixed(1)
              );

          } else {

            const newStart =
              Math.max(
                0,
                Math.min(
                  mediaDuration -
                  originalDuration,
                  originalStart +
                  difference
                )
              );

            speech.startTime =
              Number(
                newStart.toFixed(1)
              );

          }

          const liveStart =
            Math.max(
              0,
              Number(
                speech.startTime
              ) || 0
            );

          const liveDuration =
            Math.max(
              0.1,
              Number(
                speech.duration
              ) || 0.1
            );

          const liveLeftPercent =
            mediaDuration > 0
              ? (
                  liveStart /
                  mediaDuration
                ) *
                100
              : 0;

          const liveWidthPercent =
            mediaDuration > 0
              ? (
                  liveDuration /
                  mediaDuration
                ) *
                100
              : 0;

          block.style.left =
            liveLeftPercent +
            "%";

          block.style.width =
            Math.max(
              2,
              Math.min(
                100 -
                liveLeftPercent,
                liveWidthPercent
              )
            ) +
            "%";

          block.title =
            liveStart.toFixed(1) +
            "s → " +
            Math.min(
              mediaDuration,
              liveStart +
              liveDuration
            ).toFixed(1) +
            "s";

          timelineSpeechStartInput.value =
            liveStart.toFixed(1);

          timelineSpeechDurationInfo.textContent =
            (
              currentLanguage === "en"
                ? "Duration: "
                : "Süre: "
            ) +
            liveDuration
              .toFixed(1)
              .replace(".0", "") +
            (
              currentLanguage === "en"
                ? "s"
                : " sn"
            );

          refreshTimelineCaptionCapacity();

        }

        function endSpeechDrag(
          endEvent
        ) {

          window.removeEventListener(
            "pointermove",
            moveSpeech
          );

          window.removeEventListener(
            "pointerup",
            endSpeechDrag
          );

          window.removeEventListener(
            "pointercancel",
            endSpeechDrag
          );

          block.classList.remove(
            "dragging"
          );

          document.body.style.userSelect =
            "";

          document.body.style.webkitUserSelect =
            "";

          try {

            if (
              endEvent &&
              block.hasPointerCapture(
                endEvent.pointerId
              )
            ) {

              block.releasePointerCapture(
                endEvent.pointerId
              );

            }

          } catch (error) {}

          normalizeTimelineSpeechTiming(
            file
          );

          syncLegacyCaptionFromSpeechList(
            file
          );

          saveProjectPhotos();

          refreshTimelineEditControls();

        }

        window.addEventListener(
          "pointermove",
          moveSpeech,
          {
            passive: false
          }
        );

        window.addEventListener(
          "pointerup",
          endSpeechDrag
        );

        window.addEventListener(
          "pointercancel",
          endSpeechDrag
        );

      }

      startHandle.onpointerdown =
        function (event) {

          beginSpeechDrag(
            event,
            "start"
          );

        };

      endHandle.onpointerdown =
        function (event) {

          beginSpeechDrag(
            event,
            "end"
          );

        };

      block.onpointerdown =
        function (event) {

          if (
            event.target ===
              startHandle ||
            event.target ===
              endHandle
          ) {
            return;
          }

          beginSpeechDrag(
            event,
            "move"
          );

        };

      timelineSpeechOverviewRail
        .appendChild(
          block
        );

    }
  );

}

function refreshTimelineSpeechList(file) {

  parkTimelineSpeechLiveDock();

  const list =
    ensureMediaSpeechList(file);

  timelineSpeechList.innerHTML = "";

  const orderedList =
    list.slice().sort(
      function (a, b) {

        return (
          Number(a.startTime || 0) -
          Number(b.startTime || 0)
        );

      }
    );

  const displayList =
    orderedList.slice().reverse();

  displayList.forEach(function (speech) {

    const speechNumber =
      orderedList.findIndex(
        function (item) {
          return item.id === speech.id;
        }
      ) + 1;

    const item =
      document.createElement("div");

    item.className =
      "timeline-speech-item" +
      (
        speech.id === currentSpeechId
          ? " selected"
          : ""
      );

    const time =
      document.createElement("div");

    time.className =
      "timeline-speech-time";

    const speechStart =
      Math.max(
        0,
        Number(speech.startTime) || 0
      );

    const mediaDuration =
      getCurrentMediaDuration(
        file,
        currentPreviewIndex
      );

    const speechEnd =
      Math.min(
        mediaDuration,
        speechStart +
        (
          Number(speech.duration) ||
          0.1
        )
      );

    time.innerHTML =
      (
        currentLanguage === "en"
          ? "Speech "
          : "Konuşma "
      ) +
      '<span class="timeline-speech-number">' +
      speechNumber +
      "</span><br>" +
      speechStart
        .toFixed(1)
        .replace(".0", "") +
      "s → " +
      Math.max(
        speechStart + 0.1,
        speechEnd
      )
        .toFixed(1)
        .replace(".0", "") +
      "s";

    const text =
      document.createElement("div");

    text.className =
      "timeline-speech-text";

    const hasExternalVoice =
      (
        speech.audioSource === "upload" &&
        speech.uploadedAudioUrl
      ) ||
      (
        speech.audioSource === "record" &&
        speech.recordedAudioUrl
      );

    text.textContent =
      speech.text ||
      (
        hasExternalVoice
          ? (
              currentLanguage === "en"
                ? "External Voice — Ready for Text"
                : "Harici Ses — Metin İçin Hazır"
            )
          : (
              currentLanguage === "en"
                ? "Empty Speech"
                : "Boş Konuşma"
            )
      );

    const deleteBtn =
      document.createElement("button");

    deleteBtn.type =
      "button";

    deleteBtn.className =
      "timeline-speech-delete";

    deleteBtn.textContent =
      "×";

    item.onclick = function () {

      currentSpeechId =
        speech.id;

      refreshTimelineEditControls();

    };

    deleteBtn.onclick =
      function (event) {

        event.stopPropagation();

        const deleteConfirmed =
          confirm(
            currentLanguage === "en"
              ? "Delete this Speech?"
              : "Bu konuşma silinsin mi?"
          );

        if (!deleteConfirmed) {
          return;
        }

        const speechIndex =
          list.findIndex(function (item) {
            return item.id === speech.id;
          });

        if (speechIndex < 0) {
          return;
        }

        list.splice(
          speechIndex,
          1
        );

        if (!list.length) {

          const newSpeech =
            createDefaultMediaSpeech({
              caption: "",
              captionColor: "#ffffff",
              voiceGender:
                getLastSelectedAiVoiceGender()
            });

          list.push(newSpeech);
          currentSpeechId =
            newSpeech.id;

        } else {

          const nextIndex =
            Math.max(
              0,
              Math.min(
                speechIndex,
                list.length - 1
              )
            );

          currentSpeechId =
            list[nextIndex].id;

        }

        syncLegacyCaptionFromSpeechList(file);
        saveProjectPhotos();
        refreshTimelineEditControls();

      };

    item.appendChild(time);
    item.appendChild(text);
    item.appendChild(deleteBtn);

    timelineSpeechList.appendChild(item);

  });

  moveTimelineSpeechLiveDockToSelected();

  refreshTimelineSpeechOverview(
    file
  );

}

function refreshTimelineCaptionCapacity() {

  if (currentPreviewIndex === null) {
    return;
  }

  const file =
    selectedPhotos[currentPreviewIndex];

  if (!file) {
    return;
  }

  const speech =
    getSelectedSpeech(file);

  if (!speech) {
    return;
  }

  const mediaDuration =
    getCurrentMediaDuration(
      file,
      currentPreviewIndex
    );

  const startTime =
    Math.max(
      0,
      Number(speech.startTime) || 0
    );

  const duration =
    getSpeechAvailableDuration(
      file,
      currentPreviewIndex,
      speech
    );

  const speechEnd =
    Math.min(
      mediaDuration,
      startTime +
      duration
    );

  const remainingDuration =
    Math.max(
      0,
      mediaDuration -
      speechEnd
    );

  const requiredDuration =
    getMinimumSpeechDuration(
      speech
    );

  const maximumTextDuration =
    Math.max(
      0.1,
      mediaDuration -
      startTime
    );

  const hasText =
    String(
      speech.text || ""
    ).trim().length > 0;

  const noRemainingTextTime =
    hasText &&
    requiredDuration >=
    maximumTextDuration - 0.001;

  const formattedStart =
    startTime
      .toFixed(1)
      .replace(".0", "");

  const formattedDuration =
    duration
      .toFixed(1)
      .replace(".0", "");

  const formattedRemain =
    remainingDuration
      .toFixed(1)
      .replace(".0", "");

  const timeSummary =
    currentLanguage === "en"
      ? (
          'Start: <span class="timeline-caption-value">' +
          formattedStart +
          '</span>s&nbsp;&nbsp;|&nbsp;&nbsp;Duration: <span class="timeline-caption-value">' +
          formattedDuration +
          '</span>s&nbsp;&nbsp;|&nbsp;&nbsp;Remain: <span class="timeline-caption-value">' +
          formattedRemain +
          '</span>s'
        )
      : (
          'Başlangıç: <span class="timeline-caption-value">' +
          formattedStart +
          '</span> sn&nbsp;&nbsp;|&nbsp;&nbsp;Süre: <span class="timeline-caption-value">' +
          formattedDuration +
          '</span> sn&nbsp;&nbsp;|&nbsp;&nbsp;Kalan: <span class="timeline-caption-value">' +
          formattedRemain +
          '</span> sn'
        );

  const warningMessage =
    currentLanguage === "en"
      ? (
          '<span class="timeline-caption-warning">' +
          'No remaining media time. Increase media duration or shorten the text.' +
          '</span>'
        )
      : (
          '<span class="timeline-caption-warning">' +
          'Kalan medya süresi yok. Medya süresini artırın veya metni kısaltın.' +
          '</span>'
        );

  timelineCaptionCapacity.innerHTML =
    timeSummary +
    (
      noRemainingTextTime
        ? warningMessage
        : ""
    );

  timelineCaptionCapacity.classList.toggle(
    "over-limit",
    noRemainingTextTime
  );

  timelineCaptionInput.classList.toggle(
    "caption-over-limit",
    noRemainingTextTime
  );

  extendTimelineCaptionDurationBtn.style.display =
    "none";

}

function getTimelineSpeechNumber(
  speech
) {

  if (
    !speech ||
    currentPreviewIndex === null
  ) {
    return 1;
  }

  const file =
    selectedPhotos[
      currentPreviewIndex
    ];

  if (!file) {
    return 1;
  }

  const orderedList =
    ensureMediaSpeechList(file)
      .slice()
      .sort(
        function (a, b) {

          return (
            Number(a.startTime || 0) -
            Number(b.startTime || 0)
          );

        }
      );

  const speechIndex =
    orderedList.findIndex(
      function (item) {
        return item.id === speech.id;
      }
    );

  return speechIndex >= 0
    ? speechIndex + 1
    : 1;

}

function refreshTimelineAudioSourceControls(
  speech
) {

  if (!speech) {
    return;
  }

  /*
    Old recorded voices are treated as uploaded
    files so previous projects are not destroyed.
  */

  if (
    speech.audioSource === "record"
  ) {

    if (
      !speech.uploadedAudioUrl &&
      speech.recordedAudioUrl
    ) {

      speech.uploadedAudioUrl =
        speech.recordedAudioUrl;

      speech.uploadedAudioName =
        speech.recordedAudioName ||
        "Voice File";

      speech.uploadedAudioDuration =
        Number(
          speech.recordedAudioDuration
        ) || 0;

    }

    speech.audioSource =
      speech.uploadedAudioUrl
        ? "upload"
        : "ai";

  }

  const source =
    speech.audioSource === "upload"
      ? "upload"
      : "ai";

  [
    timelineAudioSourceAiBtn,
    timelineAudioSourceUploadBtn
  ].forEach(function (button) {

    button.classList.toggle(
      "selected",
      button.dataset.audioSource === source
    );

  });

  timelineAudioSourceAiPanel.classList.toggle(
    "open",
    source === "ai"
  );

  timelineAudioSourceUploadPanel.classList.toggle(
    "open",
    source === "upload"
  );

  timelineAiVoiceControls.classList.toggle(
    "audio-source-hidden",
    source !== "ai"
  );

  const activeSpeechNumber =
    getTimelineSpeechNumber(
      speech
    );

  timelineAudioSourceTitle.innerHTML =
    currentLanguage === "en"
      ? (
          'Voice Source for Speech ' +
          '<span class="timeline-voice-speech-number">' +
          activeSpeechNumber +
          '</span>'
        )
      : (
          'Konuşma ' +
          '<span class="timeline-voice-speech-number">' +
          activeSpeechNumber +
          '</span>' +
          ' için Ses Kaynağı'
        );

  timelineAudioSourceAiBtn.textContent =
    currentLanguage === "en"
      ? "AI Voice"
      : "Yapay Zekâ Sesi";

  timelineAudioSourceUploadBtn.textContent =
    currentLanguage === "en"
      ? "Upload Voice"
      : "Ses Yükle";

  timelineChooseVoiceFileBtn.textContent =
    currentLanguage === "en"
      ? (
          speech.uploadedAudioUrl
            ? "Replace Voice"
            : "Choose Voice File"
        )
      : (
          speech.uploadedAudioUrl
            ? "Sesi Değiştir"
            : "Ses Dosyası Seç"
        );

  timelineRemoveVoiceFileBtn.textContent =
    currentLanguage === "en"
      ? "Remove Voice"
      : "Sesi Sil";

  timelineRemoveVoiceFileBtn.style.display =
    speech.uploadedAudioUrl
      ? "block"
      : "none";

  if (
    speech.uploadedAudioUrl
  ) {

    const duration =
      Number(
        speech.uploadedAudioDuration
      ) || 0;

    timelineUploadedVoiceInfo.textContent =
      (
        speech.uploadedAudioName ||
        (
          currentLanguage === "en"
            ? "Uploaded Voice"
            : "Yüklenen Ses"
        )
      ) +
      " — " +
      duration
        .toFixed(1)
        .replace(".0", "") +
      (
        currentLanguage === "en"
          ? "s"
          : " sn"
      );

    if (
      timelineUploadedVoicePreview.src !==
      speech.uploadedAudioUrl
    ) {

      timelineUploadedVoicePreview.src =
        speech.uploadedAudioUrl;

      timelineUploadedVoicePreview.load();

    }

    timelineUploadedVoicePreview.volume =
      clampIzyPostAudioVolume(
        speech.uploadedVolume,
        IZYPOST_AUDIO_DEFAULTS.uploaded
      );

    timelineUploadedVoicePreview.style.display =
      "block";

  } else {

    timelineUploadedVoiceInfo.textContent =
      currentLanguage === "en"
        ? "No voice file selected."
        : "Ses dosyası seçilmedi.";

    timelineUploadedVoicePreview.pause();

    timelineUploadedVoicePreview.removeAttribute(
      "src"
    );

    timelineUploadedVoicePreview.style.display =
      "none";

  }

}

function refreshTimelineEditControls() {

  if (currentPreviewIndex === null) {
    timelineEditControls.style.display = "none";
    return;
  }

  const file =
    selectedPhotos[currentPreviewIndex];

  if (!file) {
    timelineEditControls.style.display = "none";
    return;
  }

  timelineEditControls.style.display =
    "block";

  const list =
    ensureMediaSpeechList(file);

  if (!currentSpeechId) {
    currentSpeechId =
      list[0].id;
  }

  const speech =
    getSelectedSpeech(file);

  const currentTime =
    getCurrentPreviewSpeechTime(file);

  const mediaDuration =
    getCurrentMediaDuration(
      file,
      currentPreviewIndex
    );

  timelineSpeechCurrentTime.className =
    "timeline-media-time-summary";

  timelineSpeechCurrentTime.textContent =
    currentLanguage === "en"
      ? (
          "Media " +
          (currentPreviewIndex + 1)
        )
      : (
          "Medya " +
          (currentPreviewIndex + 1)
        );

  const isVideoMedia =
    file.type === "video" ||
    file.isFreeVideo;

  timelineEditMediaDuration.classList.toggle(
    "video",
    isVideoMedia
  );

  const formattedMediaDuration =
    mediaDuration
      .toFixed(1)
      .replace(".0", "");

  if (isVideoMedia) {

    timelineEditMediaDurationInfo.innerHTML =
      currentLanguage === "en"
  ? (
      "Video Duration: " +
      '<span class="timeline-edit-media-duration-seconds">' +
      formattedMediaDuration +
      "s</span>" +
      " · Changes with Trim and/or Speech"
    )
  : (
      "Video Süresi: " +
      '<span class="timeline-edit-media-duration-seconds">' +
      formattedMediaDuration +
      " sn</span>" +
      " · Kırpma ve/veya Konuşma ile değişir"
    );

  } else {

    timelineEditMediaDurationInfo.innerHTML =
      currentLanguage === "en"
        ? (
            "Media Duration: " +
            '<span class="timeline-edit-media-duration-seconds">' +
            formattedMediaDuration +
            "s</span>"
          )
        : (
            "Medya Süresi: " +
            '<span class="timeline-edit-media-duration-seconds">' +
            formattedMediaDuration +
            " sn</span>"
          );

  }

  addTimelineSpeechBtn.textContent =
    currentLanguage === "en"
      ? "+ Add Speech"
      : "+ Konuşma Ekle";

  timelineSpeechStartLabel.textContent =
    currentLanguage === "en"
      ? "Start"
      : "Başlangıç";

  timelineCaptionInput.placeholder =
    currentLanguage === "en"
      ? "Write this Speech..."
      : "Bu konuşmayı yazın...";

  timelineCaptionColorBtn.title =
    currentLanguage === "en"
      ? "Speech Color"
      : "Konuşma Rengi";

  timelineSpeechColorDoneBtn.textContent =
    currentLanguage === "en"
      ? "Done"
      : "Tamam";

  timelineSpeechEffectLabel.textContent =
    currentLanguage === "en"
      ? "Text Effect"
      : "Metin Efekti";

  previewTimelineSpeechEffectBtn.textContent =
    currentLanguage === "en"
      ? "Preview Effect"
      : "Efekti Ön İzle";

  const effectOptions = {

    zoom:
      currentLanguage === "en"
        ? "Zoom In"
        : "Yaklaşma",

    blur:
      currentLanguage === "en"
        ? "Blur Focus"
        : "Bulanıklıktan Netliğe",

    bounce:
      currentLanguage === "en"
        ? "Soft Bounce"
        : "Yumuşak Sekme",

    rise:
      currentLanguage === "en"
        ? "Rise Up"
        : "Yukarı Yükselme",

    fade:
      currentLanguage === "en"
        ? "Fade Only"
        : "Yalnızca Belirme"

  };

  Array.from(
    timelineSpeechEffectSelect.options
  ).forEach(
    function (
      option
    ) {

      option.textContent =
        effectOptions[
          option.value
        ];

    }
  );

  refreshTimelineSpeechList(file);

  if (!speech) {
    return;
  }

  timelineSpeechStartInput.max =
    mediaDuration;

  timelineSpeechStartInput.value =
    Number(speech.startTime || 0)
      .toFixed(1);

  const availableDuration =
    getSpeechAvailableDuration(
      file,
      currentPreviewIndex,
      speech
    );

  timelineSpeechDurationInfo.textContent =
    currentLanguage === "en"
      ? (
          "Duration: " +
          availableDuration
            .toFixed(1)
            .replace(".0", "") +
          "s"
        )
      : (
          "Süre: " +
          availableDuration
            .toFixed(1)
            .replace(".0", "") +
          " sn"
        );

  timelineCaptionInput.value =
    speech.text || "";

  timelineSpeechEffectSelect.value =
    [
      "zoom",
      "blur",
      "bounce",
      "rise",
      "fade"
    ].includes(
      speech.animationEffect
    )
      ? speech.animationEffect
      : "zoom";

  const selectedColor =
    speech.color || "#ffffff";

  timelineCaptionColorInput.value =
    selectedColor;

  timelineCaptionColorBtn.style.setProperty(
    "--caption-selected-color",
    selectedColor
  );

    timelineCaptionInput.style.color =
    getSpeechEditorTextColor(
      selectedColor
    );

  refreshTimelineAudioSourceControls(
    speech
  );

  refreshTimelineGenderButton(file);
  refreshTimelineVoiceButton(file);
  refreshTimelineCaptionCapacity();
  refreshTimelineSpeechPreview();

}

function changeCurrentTimelineMediaDuration(
  changeAmount
) {

  if (currentPreviewIndex === null) {
    return;
  }

  const file =
    selectedPhotos[
      currentPreviewIndex
    ];

  if (!file) {
    return;
  }

  const isVideo =
    file.type === "video" ||
    file.isFreeVideo;

  if (isVideo) {
    return;
  }

  const currentDuration =
    getCurrentMediaDuration(
      file,
      currentPreviewIndex
    );

  const newDuration =
    Math.max(
      1,
      Math.min(
        180,
        Math.round(
          (
            currentDuration +
            changeAmount
          ) *
          10
        ) /
        10
      )
    );

  file.duration =
    newDuration;

  photoDurations[
    currentPreviewIndex
  ] =
    newDuration;

  const list =
    ensureMediaSpeechList(file);

  list.forEach(
    function (speech) {

      speech.startTime =
        Math.min(
          Number(speech.startTime) || 0,
          newDuration - 0.1
        );

      speech.duration =
        Math.max(
          0.1,
          Math.min(
            Number(speech.duration) || 0.1,
            newDuration -
            speech.startTime
          )
        );

    }
  );

  normalizeTimelineSpeechTiming(
    file
  );

  syncLegacyCaptionFromSpeechList(
    file
  );

  saveProjectPhotos();

  buildPhotoTextList();
  refreshTimelineTotalDuration();
  refreshTimelineEditControls();

}

timelineMediaDurationMinusBtn.onclick =
  function () {

    changeCurrentTimelineMediaDuration(
      -1
    );

  };

timelineMediaDurationPlusBtn.onclick =
  function () {

    changeCurrentTimelineMediaDuration(
      1
    );

  };

addTimelineSpeechBtn.onclick = function () {

  if (currentPreviewIndex === null) return;

  const file =
    selectedPhotos[currentPreviewIndex];

  if (!file) return;

  const list =
    ensureMediaSpeechList(file);

  list.sort(function (a, b) {
    return (
      Number(a.startTime || 0) -
      Number(b.startTime || 0)
    );
  });

  const mediaDuration =
    getCurrentMediaDuration(
      file,
      currentPreviewIndex
    );

  const selectedSpeech =
    list.find(function (speech) {
      return (
        speech.id === currentSpeechId
      );
    });

  let selectedTime = 0;
  let speechDuration = 2;
  let insertBeforeSelected = false;

  if (selectedSpeech) {

    const selectedIndex =
      list.indexOf(selectedSpeech);

    const selectedStart =
      Math.max(
        0,
        Number(
          selectedSpeech.startTime
        ) || 0
      );

    const selectedDuration =
      Math.max(
        0.1,
        Number(
          selectedSpeech.duration
        ) || 0.1
      );

    const selectedEnd =
      selectedStart +
      selectedDuration;

    if (
      selectedIndex === 0 &&
      selectedStart >= 0.2
    ) {

      selectedTime = 0;

      speechDuration =
        Math.max(
          0.1,
          Math.min(
            2,
            selectedStart
          )
        );

      insertBeforeSelected = true;

    } else {

      selectedTime =
        selectedEnd + 0.5;

      const followingSpeeches =
        list.filter(
          function (speech) {

            return (
              speech.id !==
                selectedSpeech.id &&
              (
                Number(
                  speech.startTime
                ) || 0
              ) >=
                selectedEnd - 0.05
            );

          }
        );

      followingSpeeches.forEach(
        function (speech) {

          speech.startTime =
            Number(
              (
                (
                  Number(
                    speech.startTime
                  ) || 0
                ) +
                speechDuration +
                0.5
              ).toFixed(1)
            );

        }
      );

    }

  } else {

    const lastSpeech =
      list.length
        ? list[list.length - 1]
        : null;

    selectedTime =
      lastSpeech
        ? (
            (
              Number(
                lastSpeech.startTime
              ) || 0
            ) +
            (
              Number(
                lastSpeech.duration
              ) || 0.1
            ) +
            0.5
          )
        : 0;

  }

  selectedTime =
    Math.max(
      0,
      Number(
        selectedTime.toFixed(1)
      )
    );

  const requiredDuration =
    selectedTime +
    speechDuration;

  if (
    !insertBeforeSelected &&
    requiredDuration >
      mediaDuration
  ) {

    file.duration =
      Number(
        requiredDuration.toFixed(1)
      );

    photoDurations[
      currentPreviewIndex
    ] =
      file.duration;

  }

  const speech = {
    id: createSpeechId(),

    startTime:
      Number(
        selectedTime.toFixed(1)
      ),

    duration:
      Number(
        speechDuration.toFixed(1)
      ),

    text: "",
    color: "#ffffff",
    voiceGender:
      getLastSelectedAiVoiceGender(),

    voiceUrl: "",
    voiceText: "",
    voiceLanguage: "",

    audioSource: "ai",

    uploadedAudioUrl: "",
    uploadedAudioName: "",
    uploadedAudioDuration: 0,

    recordedAudioUrl: "",
    recordedAudioName: "",
    recordedAudioDuration: 0,

    fontScale: 1,
    positionX: 50,
    positionY: 72,

    animationEffect: "zoom"
  };

  list.push(speech);

  list.sort(function (a, b) {
    return (
      Number(a.startTime || 0) -
      Number(b.startTime || 0)
    );
  });

  const finalSpeechEnd =
    list.reduce(
      function (
        maximumEnd,
        item
      ) {

        return Math.max(
          maximumEnd,
          (
            Number(
              item.startTime
            ) || 0
          ) +
          (
            Number(
              item.duration
            ) || 0.1
          )
        );

      },
      0
    );

  if (
    finalSpeechEnd >
    getCurrentMediaDuration(
      file,
      currentPreviewIndex
    )
  ) {

    file.duration =
      Number(
        finalSpeechEnd.toFixed(1)
      );

    photoDurations[
      currentPreviewIndex
    ] =
      file.duration;

  }

  currentSpeechId =
    speech.id;

  normalizeTimelineSpeechTiming(
    file
  );

  syncLegacyCaptionFromSpeechList(
    file
  );

  saveProjectPhotos();

  buildPhotoTextList();
  refreshTimelineTotalDuration();
  refreshTimelineEditControls();

  setTimeout(
    function () {

      timelineCaptionInput.focus();

      const textLength =
        timelineCaptionInput.value.length;

      timelineCaptionInput.setSelectionRange(
        textLength,
        textLength
      );

      timelineCaptionInput.scrollIntoView({
        behavior: "smooth",
        block: "nearest"
      });

    },
    0
  );

};

timelineSpeechStartInput.onchange = function () {

  if (currentPreviewIndex === null) return;

  const file =
    selectedPhotos[currentPreviewIndex];

  if (!file) return;

  const speech =
    getSelectedSpeech(file);

  if (!speech) return;

  const mediaDuration =
    getCurrentMediaDuration(
      file,
      currentPreviewIndex
    );

  speech.startTime =
    Math.min(
      Math.max(
        0,
        Number(
          timelineSpeechStartInput.value
        ) || 0
      ),
      Math.max(
        0,
        mediaDuration - 0.1
      )
    );

  const minimumDuration =
    getMinimumSpeechDuration(
      speech
    );

  speech.startTime =
    Math.min(
      speech.startTime,
      Math.max(
        0,
        mediaDuration -
        minimumDuration
      )
    );

  speech.duration =
    Math.min(
      mediaDuration -
      speech.startTime,
      Math.max(
        minimumDuration,
        Number(speech.duration) ||
        minimumDuration
      )
    );

  normalizeTimelineSpeechTiming(
    file
  );

  file.speechList.sort(
    function (a, b) {
      return (
        Number(a.startTime || 0) -
        Number(b.startTime || 0)
      );
    }
  );

  saveProjectPhotos();
  refreshTimelineEditControls();

};

timelineSpeechEffectSelect.onchange =
  function () {

    if (
      currentPreviewIndex === null
    ) {
      return;
    }

    const file =
      selectedPhotos[
        currentPreviewIndex
      ];

    if (!file) {
      return;
    }

    const speech =
      getSelectedSpeech(
        file
      );

    if (!speech) {
      return;
    }

    speech.animationEffect =
      [
        "zoom",
        "blur",
        "bounce",
        "rise",
        "fade"
      ].includes(
        timelineSpeechEffectSelect.value
      )
        ? timelineSpeechEffectSelect.value
        : "zoom";

    syncLegacyCaptionFromSpeechList(
      file
    );

    saveProjectPhotos();

    refreshTimelineSpeechPreview();

    requestAnimationFrame(
      function () {

        previewSelectedTimelineSpeechEffect();

      }
    );

  };

previewTimelineSpeechEffectBtn.onclick =
  function () {

    refreshTimelineSpeechPreview();

    requestAnimationFrame(
      function () {

        previewSelectedTimelineSpeechEffect();

      }
    );

  };

timelineCaptionColorBtn.onclick = function () {

  if (currentPreviewIndex === null) return;

  const file =
    selectedPhotos[currentPreviewIndex];

  const speech =
    getSelectedSpeech(file);

  if (!speech) return;

  timelineSpeechColorPalette.classList.toggle(
    "open"
  );

  document
    .querySelectorAll(".timeline-speech-color-option")
    .forEach(function (btn) {

      const buttonColor =
        btn.getAttribute(
          "data-speech-color"
        );

      btn.classList.toggle(
        "selected",
        buttonColor.toLowerCase() ===
        String(
          speech.color || "#ffffff"
        ).toLowerCase()
      );

    });

};

document
  .querySelectorAll(".timeline-speech-color-option")
  .forEach(function (btn) {

    btn.onclick = function () {

      if (currentPreviewIndex === null) return;

      const file =
        selectedPhotos[currentPreviewIndex];

      const speech =
        getSelectedSpeech(file);

      if (!speech) return;

      speech.color =
        btn.getAttribute(
          "data-speech-color"
        ) || "#ffffff";

      timelineCaptionColorInput.value =
        speech.color;

      timelineCaptionColorBtn.style.setProperty(
        "--caption-selected-color",
        speech.color
      );

      timelineCaptionInput.style.color =
        getSpeechEditorTextColor(
          speech.color
        );

      document
        .querySelectorAll(".timeline-speech-color-option")
        .forEach(function (colorBtn) {

          colorBtn.classList.toggle(
            "selected",
            colorBtn === btn
          );

        });

      syncLegacyCaptionFromSpeechList(file);
      saveProjectPhotos();
      refreshTimelineSpeechPreview();

    };

  });

timelineSpeechColorDoneBtn.onclick =
  function () {

    timelineSpeechColorPalette.classList.remove(
      "open"
    );

  };

timelineCaptionColorInput.oninput = function () {

  if (currentPreviewIndex === null) return;

  const file =
    selectedPhotos[currentPreviewIndex];

  const speech =
    getSelectedSpeech(file);

  if (!speech) return;

  speech.color =
    timelineCaptionColorInput.value ||
    "#ffffff";

  timelineCaptionColorBtn.style.setProperty(
    "--caption-selected-color",
    speech.color
  );

  timelineCaptionInput.style.color =
    getSpeechEditorTextColor(
      speech.color
    );

  syncLegacyCaptionFromSpeechList(file);
  saveProjectPhotos();
  refreshTimelineSpeechPreview();

};

timelineCaptionInput.oninput = function () {

  if (currentPreviewIndex === null) return;

  const file =
    selectedPhotos[currentPreviewIndex];

  const speech =
    getSelectedSpeech(file);

  if (!speech) return;

  speech.text =
    timelineCaptionInput.value;

  speech.voiceUrl = "";
  speech.voiceText = "";

  const timingChanged =
    autoGrowTimelineSpeechDuration(
      file,
      currentPreviewIndex,
      speech
    );

  syncLegacyCaptionFromSpeechList(file);
  saveProjectPhotos();

  if (timingChanged) {

    buildPhotoTextList();
    refreshTimelineTotalDuration();

  }

  refreshTimelineSpeechList(file);
  refreshTimelineSpeechOverview(file);
  refreshTimelineVoiceButton(file);
  refreshTimelineCaptionCapacity();
  refreshTimelineSpeechPreview();

  const availableDuration =
    getSpeechAvailableDuration(
      file,
      currentPreviewIndex,
      speech
    );

  timelineSpeechDurationInfo.textContent =
    currentLanguage === "en"
      ? (
          "Duration: " +
          availableDuration
            .toFixed(1)
            .replace(".0", "") +
          "s"
        )
      : (
          "Süre: " +
          availableDuration
            .toFixed(1)
            .replace(".0", "") +
          " sn"
        );

  const mediaDuration =
    getCurrentMediaDuration(
      file,
      currentPreviewIndex
    );

  const formattedMediaDuration =
    mediaDuration
      .toFixed(1)
      .replace(".0", "");

  if (
    file.type !== "video" &&
    !file.isFreeVideo
  ) {

    timelineEditMediaDurationInfo.innerHTML =
      currentLanguage === "en"
        ? (
            "Media Duration: " +
            '<span class="timeline-edit-media-duration-seconds">' +
            formattedMediaDuration +
            "s</span>"
          )
        : (
            "Medya Süresi: " +
            '<span class="timeline-edit-media-duration-seconds">' +
            formattedMediaDuration +
            " sn</span>"
          );

  }

};

function updateSelectedSpeechLayout(
  propertyName,
  changeAmount,
  minimum,
  maximum
) {

  if (currentPreviewIndex === null) {
    return;
  }

  const file =
    selectedPhotos[currentPreviewIndex];

  const speech =
    getSelectedSpeech(file);

  if (!speech) {
    return;
  }

  const currentValue =
    Number(speech[propertyName]) || 0;

  speech[propertyName] =
    Math.max(
      minimum,
      Math.min(
        maximum,
        currentValue + changeAmount
      )
    );

  saveProjectPhotos();
  refreshTimelineSpeechPreview();

}

[
  timelineSpeechSmallerBtn,
  timelineSpeechBiggerBtn,
  timelineSpeechLeftBtn,
  timelineSpeechRightBtn,
  timelineSpeechUpBtn,
  timelineSpeechDownBtn
].forEach(function (button) {

  button.addEventListener(
    "click",
    function (event) {
      event.stopPropagation();
    }
  );

});

timelineSpeechSmallerBtn.onclick =
  function () {

    updateSelectedSpeechLayout(
      "fontScale",
      -0.10,
      0.60,
      1.80
    );

  };

timelineSpeechBiggerBtn.onclick =
  function () {

    updateSelectedSpeechLayout(
      "fontScale",
      0.10,
      0.60,
      1.80
    );

  };

timelineSpeechLeftBtn.onclick =
  function () {

    updateSelectedSpeechLayout(
      "positionX",
      -3,
      12,
      88
    );

  };

timelineSpeechRightBtn.onclick =
  function () {

    updateSelectedSpeechLayout(
      "positionX",
      3,
      12,
      88
    );

  };

timelineSpeechUpBtn.onclick =
  function () {

    updateSelectedSpeechLayout(
      "positionY",
      -3,
      18,
      82
    );

  };

timelineSpeechDownBtn.onclick =
  function () {

    updateSelectedSpeechLayout(
      "positionY",
      3,
      18,
      82
    );

  };

timelineAiVolumeRange.oninput =
  function () {

    const speech =
      getIzyPostCurrentSpeech();

    if (!speech) {
      return;
    }

    speech.aiVolume =
      clampIzyPostAudioVolume(
        Number(
          timelineAiVolumeRange.value
        ) /
        100,
        IZYPOST_AUDIO_DEFAULTS.ai
      );

    updateIzyPostVolumeOutput(
      timelineAiVolumeRange,
      timelineAiVolumeValue
    );

    saveIzyPostAudioMixChange();

  };

timelineAiVolumeRange.onchange =
  function () {

    saveIzyPostAudioMixChange();

  };

timelineVideoVolumeRange.oninput =
  function () {

    const file =
      getIzyPostCurrentMedia();

    if (!file) {
      return;
    }

    file.videoVolume =
      clampIzyPostAudioVolume(
        Number(
          timelineVideoVolumeRange.value
        ) /
        100,
        IZYPOST_AUDIO_DEFAULTS.video
      );

    updateIzyPostVolumeOutput(
      timelineVideoVolumeRange,
      timelineVideoVolumeValue
    );

    saveIzyPostAudioMixChange();

  };

timelineMusicVolumeRange.oninput =
  function () {

    const volume =
      clampIzyPostAudioVolume(
        Number(
          timelineMusicVolumeRange.value
        ) /
        100,
        IZYPOST_AUDIO_DEFAULTS.music
      );

    setIzyPostMusicVolume(
      volume
    );

    updateIzyPostVolumeOutput(
      timelineMusicVolumeRange,
      timelineMusicVolumeValue
    );

    saveIzyPostAudioMixChange();

  };

timelineUploadedVolumeRange.oninput =
  function () {

    const speech =
      getIzyPostCurrentSpeech();

    if (!speech) {
      return;
    }

    speech.uploadedVolume =
      clampIzyPostAudioVolume(
        Number(
          timelineUploadedVolumeRange.value
        ) /
        100,
        IZYPOST_AUDIO_DEFAULTS.uploaded
      );

    updateIzyPostVolumeOutput(
      timelineUploadedVolumeRange,
      timelineUploadedVolumeValue
    );

    saveIzyPostAudioMixChange();

  };

timelineUploadedVolumeRange.onchange =
  function () {

    saveIzyPostAudioMixChange();

  };

timelineAiVolumeDefaultBtn.onclick =
  function () {

    timelineAiVolumeRange.value =
      100;

    timelineAiVolumeRange.dispatchEvent(
      new Event(
        "input"
      )
    );

  };

timelineVideoVolumeDefaultBtn.onclick =
  function () {

    timelineVideoVolumeRange.value =
      70;

    timelineVideoVolumeRange.dispatchEvent(
      new Event(
        "input"
      )
    );

  };

timelineMusicVolumeDefaultBtn.onclick =
  function () {

    timelineMusicVolumeRange.value =
      40;

    timelineMusicVolumeRange.dispatchEvent(
      new Event(
        "input"
      )
    );

  };

timelineUploadedVolumeDefaultBtn.onclick =
  function () {

    timelineUploadedVolumeRange.value =
      100;

    timelineUploadedVolumeRange.dispatchEvent(
      new Event(
        "input"
      )
    );

  };

[
  timelineAudioMixToggleBtn,
  timelineAiVolumeRange,
  timelineVideoVolumeRange,
  timelineMusicVolumeRange,
  timelineUploadedVolumeRange,
  timelineAiVolumeDefaultBtn,
  timelineVideoVolumeDefaultBtn,
  timelineMusicVolumeDefaultBtn,
  timelineUploadedVolumeDefaultBtn
].forEach(
  function (
    control
  ) {

    control.addEventListener(
      "click",
      function (
        event
      ) {

        event.stopPropagation();

      }
    );

  }
);

function closeTimelineQuickAudioControl() {

  timelineAudioMixPanel
    .classList
    .remove(
      "open"
    );

  timelineAudioMixPanel
    .querySelectorAll(
      ".timeline-audio-mix-row"
    )
    .forEach(
      function (
        row
      ) {

        row.classList.remove(
          "quick-visible"
        );

      }
    );

  [
    timelineQuickAiBtn,
    timelineQuickVideoBtn,
    timelineQuickMusicBtn,
    timelineQuickUploadedBtn
  ]
    .filter(Boolean)
    .forEach(
      function (
        button
      ) {

        button.classList.remove(
          "active"
        );

      }
    );

}

function openTimelineQuickAudioControl(
  type,
  button
) {

  if (
    !button ||
    button.disabled
  ) {
    return;
  }

  const rowMap = {
    ai:
      timelineAiVolumeRange.closest(
        ".timeline-audio-mix-row"
      ),

    video:
      timelineVideoVolumeRange.closest(
        ".timeline-audio-mix-row"
      ),

    music:
      timelineMusicVolumeRange.closest(
        ".timeline-audio-mix-row"
      ),

    uploaded:
      timelineUploadedVolumeRange.closest(
        ".timeline-audio-mix-row"
      )
  };

  const selectedRow =
    rowMap[type];

  const wasOpen =
    button.classList.contains(
      "active"
    );

  closeTimelineQuickAudioControl();

  if (
    wasOpen ||
    !selectedRow
  ) {
    return;
  }

  selectedRow.classList.add(
    "quick-visible"
  );

  timelineAudioMixPanel
    .classList
    .add(
      "open"
    );

  button.classList.add(
    "active"
  );

}

[
  timelineQuickAiBtn,
  timelineQuickVideoBtn,
  timelineQuickMusicBtn,
  timelineQuickUploadedBtn
]
  .filter(Boolean)
  .forEach(
    function (
      button
    ) {

      button.onclick =
        function (
          event
        ) {

          event.preventDefault();
          event.stopPropagation();

          openTimelineQuickAudioControl(
            button.dataset.audioRow,
            button
          );

        };

    }
  );

timelineAudioMixToggleBtn.onclick =
  function (
    event
  ) {

    event.preventDefault();
    event.stopPropagation();

    const shouldOpen =
      !timelineAudioMixPanel
        .classList
        .contains(
          "open"
        );

    timelineAudioMixPanel
      .classList
      .toggle(
        "open",
        shouldOpen
      );

    timelineAudioMixToggleBtn
      .classList
      .toggle(
        "open",
        shouldOpen
      );

    timelineAudioMixToggleBtn
      .setAttribute(
        "aria-expanded",
        shouldOpen
          ? "true"
          : "false"
      );

  };

extendTimelineCaptionDurationBtn.onclick =
  function () {};

timelineGenderBtn.onclick = function () {

  if (currentPreviewIndex === null) return;

  const file =
    selectedPhotos[currentPreviewIndex];

  const speech =
    getSelectedSpeech(file);

  if (!speech) return;

  speech.voiceGender =
    (speech.voiceGender || currentAiVoiceGender) === "female"
      ? "male"
      : "female";

  currentAiVoiceGender =
    speech.voiceGender;

  localStorage.setItem(
    "izyPostAiVoiceGender",
    currentAiVoiceGender
  );

  speech.voiceUrl = "";
  speech.voiceText = "";

  syncLegacyCaptionFromSpeechList(file);
  saveProjectPhotos();

  refreshTimelineGenderButton(file);
  refreshTimelineVoiceButton(file);

  refreshTimelineAudioMixControls(
    file,
    speech
  );

  closeTimelineQuickAudioControl();

};

function readTimelineVoiceBlobAsDataUrl(
  blob
) {

  return new Promise(function (
    resolve,
    reject
  ) {

    const reader =
      new FileReader();

    reader.onload =
      function () {
        resolve(reader.result);
      };

    reader.onerror =
      function () {
        reject(reader.error);
      };

    reader.readAsDataURL(blob);

  });

}

function readTimelineVoiceFileAsDataUrl(
  file
) {

  return new Promise(function (
    resolve,
    reject
  ) {

    const reader =
      new FileReader();

    reader.onload =
      function () {
        resolve(reader.result);
      };

    reader.onerror =
      function () {
        reject(reader.error);
      };

    reader.readAsDataURL(file);

  });

}

function getTimelineVoiceDuration(
  audioUrl
) {

  return new Promise(function (
    resolve,
    reject
  ) {

    const audio =
      document.createElement("audio");

    audio.preload =
      "metadata";

    audio.onloadedmetadata =
      function () {

        const duration =
          Number(audio.duration);

        if (
          !isFinite(duration) ||
          duration <= 0
        ) {
          reject(
            new Error(
              "Invalid audio duration"
            )
          );
          return;
        }

        resolve(duration);

      };

    audio.onerror =
      function () {
        reject(
          new Error(
            "Audio could not be read"
          )
        );
      };

    audio.src =
      audioUrl;

  });

}

function getNextTimelineSpeech(
  file,
  speech
) {

  const list =
    ensureMediaSpeechList(file);

  const speechIndex =
    list.findIndex(function (item) {
      return item.id === speech.id;
    });

  if (
    speechIndex < 0 ||
    speechIndex >= list.length - 1
  ) {
    return null;
  }

  return list[
    speechIndex + 1
  ];

}

function validateTimelineExternalVoiceDuration(
  file,
  speech,
  audioDuration
) {

  const isVideo =
    file.type === "video" ||
    file.isFreeVideo;

  if (!isVideo) {

    const currentMediaDuration =
      Math.max(
        1,
        Number(file.duration) || 0,
        Number(
          photoDurations[
            currentPreviewIndex
          ]
        ) || 0
      );

    file.duration =
      currentMediaDuration;

    photoDurations[
      currentPreviewIndex
    ] =
      currentMediaDuration;

  }

  const availableDuration =
    getSpeechAvailableDuration(
      file,
      currentPreviewIndex,
      speech
    );

  if (
    audioDuration <=
    availableDuration
  ) {
    return true;
  }

  const nextSpeech =
    getNextTimelineSpeech(
      file,
      speech
    );

  if (isVideo) {

    alert(
      currentLanguage === "en"
        ? "This voice is " +
          audioDuration.toFixed(1) +
          " seconds, but only " +
          availableDuration.toFixed(1) +
          " seconds are available. Please shorten the voice."
        : "Bu ses " +
          audioDuration.toFixed(1) +
          " saniye, ancak yalnızca " +
          availableDuration.toFixed(1) +
          " saniye kullanılabilir. Lütfen sesi kısaltın."
    );

    return false;

  }

  if (nextSpeech) {

    alert(
      currentLanguage === "en"
        ? "This voice reaches the next Speech. Please shorten the voice or move the next Speech."
        : "Bu ses bir sonraki konuşmaya ulaşıyor. Lütfen sesi kısaltın veya sonraki konuşmayı taşıyın."
    );

    return false;

  }

  const requiredMediaDuration =
    Math.ceil(
      (
        Number(speech.startTime) ||
        0
      ) +
      audioDuration +
      3
    );

  if (
    requiredMediaDuration > 180
  ) {

    alert(
      currentLanguage === "en"
        ? "The required photo duration would exceed 180 seconds."
        : "Gerekli fotoğraf süresi 180 saniyeyi aşar."
    );

    return false;

  }

  file.duration =
    requiredMediaDuration;

  photoDurations[
    currentPreviewIndex
  ] =
    requiredMediaDuration;

  refreshTimelineTotalDuration();

  return true;

}

function selectTimelineAudioSource(
  source
) {

  if (currentPreviewIndex === null) {
    return;
  }

  const file =
    selectedPhotos[currentPreviewIndex];

  if (!file) {
    return;
  }

  const speech =
    getSelectedSpeech(file);

  if (!speech) {
    return;
  }

  speech.audioSource =
    source === "upload"
      ? "upload"
      : "ai";

  syncLegacyCaptionFromSpeechList(file);
  saveProjectPhotos();

  refreshTimelineAudioSourceControls(
    speech
  );

  refreshTimelineSpeechList(file);

  refreshTimelineAudioMixControls(
    file,
    speech
  );

  timelineAudioMixPanel
    .classList
    .add(
      "open"
    );

  timelineAudioMixPanel
    .querySelectorAll(
      ".timeline-audio-mix-row"
    )
    .forEach(
      function (
        row
      ) {

        row.classList.add(
          "quick-visible"
        );

      }
    );

}

timelineAudioSourceAiBtn.onclick =
  function () {

    selectTimelineAudioSource(
      "ai"
    );

  };

timelineAudioSourceUploadBtn.onclick =
  function () {

    selectTimelineAudioSource(
      "upload"
    );

  };

timelineChooseVoiceFileBtn.onclick =
  function () {

    timelineUploadedVoiceInput.value =
      "";

    timelineUploadedVoiceInput.click();

  };

timelineUploadedVoiceInput.onchange =
  async function () {

    if (currentPreviewIndex === null) {
      return;
    }

    const file =
      selectedPhotos[currentPreviewIndex];

    const speech =
      getSelectedSpeech(file);

    const voiceFile =
      timelineUploadedVoiceInput.files[0];

    if (
      !file ||
      !speech ||
      !voiceFile
    ) {
      return;
    }

    if (
      voiceFile.type &&
      !voiceFile.type.startsWith("audio/")
    ) {

      alert(
        currentLanguage === "en"
          ? "Please choose an audio file."
          : "Lütfen bir ses dosyası seçin."
      );

      timelineUploadedVoiceInput.value =
        "";

      return;

    }

    let audioUrl;
    let audioDuration;

    try {

      audioUrl =
        await readTimelineVoiceFileAsDataUrl(
          voiceFile
        );

      audioDuration =
        await getTimelineVoiceDuration(
          audioUrl
        );

    } catch (error) {

      alert(
        currentLanguage === "en"
          ? "This audio file could not be read."
          : "Bu ses dosyası okunamadı."
      );

      timelineUploadedVoiceInput.value =
        "";

      return;

    }

    const isVideo =
      file.type === "video" ||
      file.isFreeVideo;

    if (!isVideo) {

      const currentMediaDuration =
        Math.max(
          1,
          Number(file.duration) || 0,
          Number(
            photoDurations[
              currentPreviewIndex
            ]
          ) || 0
        );

      file.duration =
        currentMediaDuration;

      photoDurations[
        currentPreviewIndex
      ] =
        currentMediaDuration;

    }

    const availableDuration =
      getSpeechAvailableDuration(
        file,
        currentPreviewIndex,
        speech
      );

    const nextSpeech =
      getNextTimelineSpeech(
        file,
        speech
      );

    if (
      audioDuration >
      availableDuration
    ) {

      if (isVideo) {

        alert(
          currentLanguage === "en"
            ? "This voice is " +
              audioDuration.toFixed(1) +
              " seconds, but only " +
              availableDuration.toFixed(1) +
              " seconds are available. Please shorten the voice file."
            : "Bu ses " +
              audioDuration.toFixed(1) +
              " saniye, ancak yalnızca " +
              availableDuration.toFixed(1) +
              " saniye kullanılabilir. Lütfen ses dosyasını kısaltın."
        );

        timelineUploadedVoiceInput.value =
          "";

        return;

      }

      if (nextSpeech) {

        alert(
          currentLanguage === "en"
            ? "This voice reaches the next Speech. Please shorten the voice or move the next Speech."
            : "Bu ses bir sonraki konuşmaya ulaşıyor. Lütfen sesi kısaltın veya sonraki konuşmayı taşıyın."
        );

        timelineUploadedVoiceInput.value =
          "";

        return;

      }

      const requiredMediaDuration =
        Math.ceil(
          (
            Number(speech.startTime) ||
            0
          ) +
          audioDuration +
          3
        );

      if (
        requiredMediaDuration > 180
      ) {

        alert(
          currentLanguage === "en"
            ? "The required photo duration would exceed 180 seconds."
            : "Gerekli fotoğraf süresi 180 saniyeyi aşar."
        );

        timelineUploadedVoiceInput.value =
          "";

        return;

      }

      file.duration =
        requiredMediaDuration;

      photoDurations[
        currentPreviewIndex
      ] =
        requiredMediaDuration;

      refreshTimelineTotalDuration();

    }

    speech.audioSource =
      "upload";

    speech.uploadedAudioUrl =
      audioUrl;

    speech.uploadedAudioName =
      voiceFile.name;

    speech.uploadedAudioDuration =
      Math.round(
        audioDuration * 10
      ) / 10;

    syncLegacyCaptionFromSpeechList(
      file
    );

    saveProjectPhotos();

    refreshTimelineAudioSourceControls(
      speech
    );

    refreshTimelineSpeechList(
      file
    );

    refreshTimelineEditControls();

  };

timelineRemoveVoiceFileBtn.onclick =
  function () {

    if (currentPreviewIndex === null) {
      return;
    }

    const file =
      selectedPhotos[currentPreviewIndex];

    const speech =
      getSelectedSpeech(file);

    if (!file || !speech) {
      return;
    }

    if (
      !confirm(
        currentLanguage === "en"
          ? "Remove this uploaded voice?"
          : "Yüklenen bu ses silinsin mi?"
      )
    ) {
      return;
    }

    timelineUploadedVoicePreview.pause();

    speech.uploadedAudioUrl =
      "";

    speech.uploadedAudioName =
      "";

    speech.uploadedAudioDuration =
      0;

    syncLegacyCaptionFromSpeechList(
      file
    );

    saveProjectPhotos();

    refreshTimelineAudioSourceControls(
      speech
    );

    refreshTimelineSpeechList(
      file
    );

  };

timelineVoiceBtn.onclick = function () {

  if (currentPreviewIndex === null) return;

  const file =
    selectedPhotos[currentPreviewIndex];

  const speech =
    getSelectedSpeech(file);

  if (!speech) return;

  createTimelineSpeechVoice(
    speech,
    timelineVoiceBtn,
    file
  );

};

function openPhotoPreviewNearElement(anchorElement) {

  refreshTimelineEditControls();

  if (
    photoPreviewBox.parentElement !==
    document.body
  ) {

    document.body.insertBefore(
      photoPreviewBox,
      document.body.firstChild
    );

  }


  document.body.classList.add(
    "ip-photo-preview-active"
  );

  contactOverlay.style.display =
    "block";

  photoPreviewBox.style.display =
    "block";

  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });

}

function updateTimelineVideoTrimInfo() {

  if (!timelineVideoTrimInfo) return;
  if (currentPreviewIndex === null) return;

  const file =
    selectedPhotos[currentPreviewIndex];

  if (!file) return;

  const realDuration =
    Number(file.realDuration) ||
    Number(file.originalDuration) ||
    Number(file.duration) ||
    10;

  const start =
    Number(file.startTime) || 0;

  const end =
    Number(file.endTime) || realDuration;

  setTimelineVideoStartBtn.max = realDuration;
  setTimelineVideoEndBtn.max = realDuration;

  setTimelineVideoStartBtn.value = start;
  setTimelineVideoEndBtn.value = end;

  const startPercent =
    realDuration > 0 ? (start / realDuration) * 100 : 0;

  const endPercent =
    realDuration > 0 ? (end / realDuration) * 100 : 100;

  timelineTrimShadeLeft.style.left = "0%";
  timelineTrimShadeLeft.style.width = startPercent + "%";

  timelineTrimSelected.style.left = startPercent + "%";
  timelineTrimSelected.style.width = Math.max(0, endPercent - startPercent) + "%";

  timelineTrimShadeRight.style.left = endPercent + "%";
  timelineTrimShadeRight.style.width = Math.max(0, 100 - endPercent) + "%";

  timelineVideoTrimInfo.textContent =
    currentLanguage === "en"
      ? "Start: " + start.toFixed(1) + "s / End: " + end.toFixed(1) + "s"
      : "Başlangıç: " + start.toFixed(1) + "sn / Bitiş: " + end.toFixed(1) + "sn";

  if (timelineVideoVisibleRange) {
    timelineVideoVisibleRange.textContent =
      currentLanguage === "en"
        ? "Preview range: " + start.toFixed(1) + "s → " + end.toFixed(1) + "s"
        : "Önizleme aralığı: " + start.toFixed(1) + "sn → " + end.toFixed(1) + "sn";
  }

}

function refreshTimelineVideoTrimLanguage() {

  timelineStartLabel.textContent =
    currentLanguage === "en"
      ? "Start"
      : "Başlangıç";

  timelineEndLabel.textContent =
    currentLanguage === "en"
      ? "End"
      : "Bitiş";

  saveTimelineVideoTrimBtn.textContent =
    currentLanguage === "en"
      ? "Save Trim"
      : "Kesmeyi Kaydet";

}

function normalizeTimelineVideoTrim(file) {

  const realDuration =
    Number(file.realDuration) ||
    Number(file.originalDuration) ||
    Number(file.duration) ||
    10;

  file.startTime =
    Math.max(0, Number(file.startTime) || 0);

  file.endTime =
    Number(file.endTime) || realDuration;

  if (file.endTime <= file.startTime) {
    file.endTime =
      Math.min(realDuration, file.startTime + 1);
  }

  if (file.endTime > realDuration) {
    file.endTime = realDuration;
  }

  file.duration =
    Math.max(1, file.endTime - file.startTime);

}

function refreshTimelineTotalDuration() {

  let totalSeconds = 0;

  if (timelineIntroEnabled) {
    totalSeconds +=
      Number(timelineIntroDuration) || 0;
  }

  selectedPhotos.forEach(function (file) {

    totalSeconds +=
      Number(file.duration) || 10;

  });

  if (timelineOutroEnabled) {
    totalSeconds +=
      Number(timelineOutroDuration) || 0;
  }

  totalSeconds =
    Math.max(0, Math.round(totalSeconds * 10) / 10);

  const wholeMinutes =
    Math.floor(totalSeconds / 60);

  const remainingSeconds =
    Math.round((totalSeconds - wholeMinutes * 60) * 10) / 10;

  const formattedTime =
    wholeMinutes > 0
      ? wholeMinutes + "m " +
        remainingSeconds.toFixed(1).replace(".0", "") + "s"
      : remainingSeconds.toFixed(1).replace(".0", "") + "s";

  const durationLabel =
    currentLanguage === "en"
      ? "Total Video Time:"
      : "Toplam Video Süresi:";

  timelineTotalDuration.innerHTML =
    '<span class="timeline-total-label">' +
      durationLabel +
    '</span>' +
    '<span class="timeline-total-value">' +
      formattedTime +
    '</span>';

}

function createTimelineDurationControl(
  durationSeconds,
  minimumSeconds,
  maximumSeconds,
  stepSeconds,
  onDurationChange
) {

  const durationControl =
    document.createElement("div");

  durationControl.className =
    "timeline-duration-control";

  const minusBtn =
    document.createElement("button");

  minusBtn.type = "button";
  minusBtn.className =
    "timeline-duration-btn";

  minusBtn.textContent = "−";

  const durationText =
    document.createElement("div");

  durationText.className =
    "timeline-sequence-duration";

  const plusBtn =
    document.createElement("button");

  plusBtn.type = "button";
  plusBtn.className =
    "timeline-duration-btn";

  plusBtn.textContent = "+";

  let currentDuration =
    Math.max(
      minimumSeconds,
      Math.min(
        maximumSeconds,
        Number(durationSeconds) || minimumSeconds
      )
    );

  function refreshDurationText() {

    const formattedDuration =
      stepSeconds === 0.1
        ? currentDuration.toFixed(1)
        : currentDuration.toFixed(1).replace(".0", "");

    durationText.textContent =
      currentLanguage === "en"
        ? formattedDuration + "s"
        : formattedDuration + " sn";

  }

  minusBtn.onclick = function (event) {

    event.stopPropagation();

    if (currentDuration <= minimumSeconds) {
      return;
    }

    currentDuration =
      Math.max(
        minimumSeconds,
        Math.round(
          (currentDuration - stepSeconds) * 10
        ) / 10
      );

    refreshDurationText();
    onDurationChange(currentDuration);
    refreshTimelineTotalDuration();

  };

  plusBtn.onclick = function (event) {

    event.stopPropagation();

    if (currentDuration >= maximumSeconds) {
      return;
    }

    currentDuration =
      Math.min(
        maximumSeconds,
        Math.round(
          (currentDuration + stepSeconds) * 10
        ) / 10
      );

    refreshDurationText();
    onDurationChange(currentDuration);
    refreshTimelineTotalDuration();

  };

  refreshDurationText();

  durationControl.appendChild(minusBtn);
  durationControl.appendChild(durationText);
  durationControl.appendChild(plusBtn);

  return durationControl;

}

function createTimelineFixedSequence(
  sequenceType,
  imageSource,
  durationSeconds
) {

  const isIntro =
    sequenceType === "intro";

  const isEnabled =
    isIntro
      ? timelineIntroEnabled
      : timelineOutroEnabled;

  const row =
    document.createElement("div");

  row.className =
    "photo-text-row timeline-fixed-sequence";

  if (!isEnabled) {

    row.classList.add(
      "inactive"
    );

  }

  const img =
    document.createElement("img");

  img.className =
    "photo-thumb";

  img.draggable =
    false;

  img.src =
    imageSource ||
    getDefaultIzyPostLogoSrc();

  const sequenceInfo =
    document.createElement("div");

  sequenceInfo.className =
    "timeline-sequence-info";

  const sequenceName =
    document.createElement("div");

  sequenceName.className =
    "timeline-sequence-name";

  sequenceName.textContent =
    isIntro
      ? (
          currentLanguage === "en"
            ? "Intro"
            : "Başlangıç"
        )
      : (
          currentLanguage === "en"
            ? "Outro"
            : "Bitiş"
        );

  const toggleBtn =
    document.createElement(
      "button"
    );

  toggleBtn.type =
    "button";

  toggleBtn.className =
    "timeline-fixed-toggle-btn";

  toggleBtn.textContent =
    isEnabled
      ? "On"
      : "Off";

  toggleBtn.title =
    isEnabled
      ? (
          currentLanguage === "en"
            ? "Turn Off"
            : "Kapat"
        )
      : (
          currentLanguage === "en"
            ? "Turn On"
            : "Aç"
        );

  const previewBtn =
    document.createElement(
      "button"
    );

  previewBtn.type =
    "button";

  previewBtn.className =
    "timeline-sequence-preview-btn";

  previewBtn.textContent =
    currentLanguage === "en"
      ? "Preview"
      : "Ön İzleme";

  previewBtn.title =
    isIntro
      ? (
          currentLanguage === "en"
            ? "Preview Intro"
            : "Başlangıcı Ön İzle"
        )
      : (
          currentLanguage === "en"
            ? "Preview Outro"
            : "Bitişi Ön İzle"
        );

  previewBtn.onclick =
    function (event) {

      event.stopPropagation();

      if (!isEnabled) {

        alert(
          currentLanguage === "en"
            ? (
                isIntro
                  ? "Intro is turned off."
                  : "Outro is turned off."
              )
            : (
                isIntro
                  ? "Başlangıç kapalı."
                  : "Bitiş kapalı."
              )
        );

        return;

      }

      startTimelineSectionPreview(
        isIntro
          ? "intro"
          : "outro",
        null
      );

    };

  const sequenceDurationText =
    document.createElement("div");

  sequenceDurationText.className =
    "timeline-sequence-duration";

  const formattedDuration =
    isIntro
      ? Number(
          durationSeconds
        )
          .toFixed(1)
          .replace(".0", "")
      : Number(
          durationSeconds
        ).toFixed(1);

  sequenceDurationText.textContent =
    formattedDuration +
    (
      currentLanguage === "en"
        ? "s"
        : " sn"
    );

  function setSequenceEnabled(
    enabled
  ) {

    if (isIntro) {

      timelineIntroEnabled =
        enabled;

      introEnabledToggle.checked =
        enabled;

      localStorage.setItem(
        "ip_introEnabled",
        enabled
          ? "yes"
          : "no"
      );

    } else {

      timelineOutroEnabled =
        enabled;

      outroEnabledToggle.checked =
        enabled;

      localStorage.setItem(
        "ip_outroEnabled",
        enabled
          ? "yes"
          : "no"
      );

    }

    buildPhotoTextList();
    refreshTimelineTotalDuration();

  }

  toggleBtn.onclick =
    function (event) {

      event.stopPropagation();

      setSequenceEnabled(
        !isEnabled
      );

    };

  row.onclick =
    function (event) {

      if (
        event.target === toggleBtn ||
        event.target === previewBtn
      ) {
        return;
      }

      event.stopPropagation();

      if (isIntro) {

        textSettingsBtn.click();

      } else {

        outroSettingsBtn.click();

      }

    };

  img.onclick =
    function (event) {

      event.stopPropagation();

      if (isIntro) {

        textSettingsBtn.click();

      } else {

        outroSettingsBtn.click();

      }

    };

  sequenceInfo.appendChild(
    sequenceName
  );

  sequenceInfo.appendChild(
    toggleBtn
  );

  sequenceInfo.appendChild(
    previewBtn
  );

  sequenceInfo.appendChild(
    sequenceDurationText
  );

  row.appendChild(
    img
  );

  row.appendChild(
    sequenceInfo
  );

  return row;

}
function getTimelineIntroImageSource() {

  const savedCover =
    localStorage.getItem("ip_introCoverImage");

  if (savedCover) {
    return savedCover;
  }

  const firstVisualMedia =
    selectedPhotos.find(function (item) {
      return item && (item.thumbnail || item.url);
    });

  if (!firstVisualMedia) {
    return getDefaultIzyPostLogoSrc();
  }

  return firstVisualMedia.thumbnail ||
    firstVisualMedia.url ||
    getDefaultIzyPostLogoSrc();

}

function getTimelineOutroImageSource() {

  return localStorage.getItem("ip_outroLogo") ||
    getDefaultIzyPostLogoSrc();

}

function buildPhotoTextList() {

  refreshTimelineOutputSizeIndicator();

  photoTextList.innerHTML = "";

  photoTextList.appendChild(
    createTimelineFixedSequence(
      "intro",
      getTimelineIntroImageSource(),
      timelineIntroDuration
    )
  );

  selectedPhotos.forEach(function (file, index) {

    const row = document.createElement("div");
    row.className = "photo-text-row";
    row.dataset.index = index;

    if (
      file.isTemplateSlot
    ) {

      row.classList.add(
        "template-media-slot"
      );

    }

    const directDeleteBtn =
      document.createElement(
        "button"
      );

    directDeleteBtn.type =
      "button";

    directDeleteBtn.className =
      "timeline-media-delete-btn";

    directDeleteBtn.textContent =
      file.isTemplateSlot
        ? (
            currentLanguage === "en"
              ? "Device"
              : "Cihaz"
          )
        : (
            currentLanguage === "en"
              ? "Delete"
              : "Sil"
          );

    directDeleteBtn.title =
      file.isTemplateSlot
        ? (
            currentLanguage === "en"
              ? "Choose Media from Device"
              : "Cihazdan Medya Seç"
          )
        : (
            currentLanguage === "en"
              ? "Delete Media"
              : "Medyayı Sil"
          );

    directDeleteBtn.onclick =
      function (event) {

        event.stopPropagation();

        if (
          file.isTemplateSlot
        ) {

          ipTargetTemplateSlotIndex =
            index;

          photosInput.click();

          return;

        }

        deleteTimelineMediaAtIndex(
          index,
          false
        );

      };

    const directSwapBtn =
      document.createElement(
        "button"
      );

    directSwapBtn.type =
      "button";

    directSwapBtn.className =
      "timeline-media-swap-btn";

    directSwapBtn.textContent =
      file.isTemplateSlot
        ? (
            currentLanguage === "en"
              ? "Free"
              : "Ücretsiz"
          )
        : (
            currentLanguage === "en"
              ? "Swap"
              : "Değiştir"
          );

    directSwapBtn.title =
      file.isTemplateSlot
        ? (
            currentLanguage === "en"
              ? "Choose Free Media"
              : "Ücretsiz Medya Seç"
          )
        : (
            currentLanguage === "en"
              ? "Swap Media"
              : "Medyayı Değiştir"
          );

    directSwapBtn.onclick =
      function (event) {

        event.stopPropagation();

        if (
          file.isTemplateSlot
        ) {

          ipTargetTemplateSlotIndex =
            index;

          freePhotosBtn.click();

          return;

        }

        if (selectedPhotos.length < 2) {
          return;
        }

        timelineSwapMode = true;

        refreshTimelineMoveButton();

        handleTimelineSwapClick(
          index
        );

      };

    const directPreviewBtn =
      document.createElement(
        "button"
      );

    directPreviewBtn.type =
      "button";

    directPreviewBtn.className =
      "timeline-sequence-preview-btn";

    directPreviewBtn.textContent =
      currentLanguage === "en"
        ? "Preview"
        : "Ön İzleme";

    directPreviewBtn.title =
      currentLanguage === "en"
        ? "Preview This Media"
        : "Bu Medyayı Ön İzle";

    directPreviewBtn.onclick =
      function (event) {

        event.stopPropagation();

        if (
          file.isTemplateSlot
        ) {
          return;
        }

        startTimelineSectionPreview(
          "media",
          index
        );

      };

    const sequenceInfo =
      document.createElement("div");

    sequenceInfo.className =
      "timeline-sequence-info";

    const sequenceName =
      document.createElement("div");

    sequenceName.className =
      "timeline-sequence-name";

    sequenceName.textContent =
      file.isTemplateSlot
        ? (
            currentLanguage === "en"
              ? (
                  file.templateMediaType === "video"
                    ? "Video Slot " + (index + 1)
                    : "Photo Slot " + (index + 1)
                )
              : (
                  file.templateMediaType === "video"
                    ? "Video Alanı " + (index + 1)
                    : "Fotoğraf Alanı " + (index + 1)
                )
          )
        : (
            currentLanguage === "en"
              ? "Media " + (index + 1)
              : "Medya " + (index + 1)
          );

    const visibleDuration =
      Number(file.duration) || 10;

    const sequenceDurationElement =
      document.createElement("div");

    sequenceDurationElement.className =
      "timeline-sequence-duration";

    sequenceDurationElement.textContent =
      currentLanguage === "en"
        ? visibleDuration
            .toFixed(1)
            .replace(".0", "") +
          "s"
        : visibleDuration
            .toFixed(1)
            .replace(".0", "") +
          " sn";

    const sequenceActionRow =
      document.createElement("div");

    sequenceActionRow.className =
      "timeline-media-action-row";

    const sequencePreviewRow =
      document.createElement("div");

    sequencePreviewRow.className =
      "timeline-media-preview-row";

    sequenceActionRow.appendChild(
      directDeleteBtn
    );

    sequenceActionRow.appendChild(
      directSwapBtn
    );

    sequencePreviewRow.appendChild(
      directPreviewBtn
    );

    sequenceInfo.appendChild(
      sequenceName
    );

    sequenceInfo.appendChild(
      sequenceActionRow
    );

    sequenceInfo.appendChild(
      sequencePreviewRow
    );

    sequenceInfo.appendChild(
      sequenceDurationElement
    );

let didLongPress = false;
  
    const img = document.createElement("img");
    img.className = "photo-thumb";
    img.draggable = false;
    img.src =
  file.thumbnail
    ? file.thumbnail
    : (
      file.url
        ? file.url
        : URL.createObjectURL(file)
    );

    if (file.type === "video" || file.isFreeVideo) {
      img.style.border = "3px solid #ff8a00";
    }

    img.onclick = function () {

  if (didLongPress) {
    return;
  }

  if (
    file.isTemplateSlot
  ) {

    return;

  }

  currentPreviewIndex = index;
  applyPhotoPreviewRatio();

  if (file.type === "video" || file.isFreeVideo) {

    photoPreviewImage.style.display = "none";
    photoPreviewImage.src = "";

    photoPreviewVideo.src = file.url;
    photoPreviewVideo.style.display = "block";
    photoPreviewVideo.controls = false;
    photoPreviewVideo.muted = false;
    photoPreviewVideo.defaultMuted = false;

    file.videoVolume =
      clampIzyPostAudioVolume(
        file.videoVolume,
        IZYPOST_AUDIO_DEFAULTS.video
      );

    photoPreviewVideo.volume =
      file.videoVolume;

    timelineTrimPlayBtn.style.display = "block";

    timelineTrimPlayBtn.onclick = function () {

      const trimStart =
        Number(file.startTime) || 0;

      if (photoPreviewVideo.paused) {
        photoPreviewVideo.currentTime = trimStart;
        photoPreviewVideo.play();
        timelineTrimPlayBtn.textContent =
          currentLanguage === "en" ? "❚❚ Pause Trim" : "❚❚ Duraklat";
      } else {
        photoPreviewVideo.pause();
        timelineTrimPlayBtn.textContent =
          currentLanguage === "en" ? "▶ Play Trim" : "▶ Kesmeyi Oynat";
      }

    };

    photoPreviewVideo.onloadedmetadata = function () {

      file.realDuration =
        photoPreviewVideo.duration && isFinite(photoPreviewVideo.duration)
          ? photoPreviewVideo.duration
          : (Number(file.realDuration) || Number(file.duration) || 10);

      if (!file.endTime) {
        file.endTime = file.realDuration;
      }

      normalizeTimelineVideoTrim(file);

      photoPreviewVideo.currentTime =
        Number(file.startTime) || 0;

      updateTimelineVideoTrimInfo();

    };

    photoPreviewVideo.ontimeupdate = function () {

      const trimStart =
        Number(file.startTime) || 0;

      const trimEnd =
        Number(file.endTime) || file.realDuration || 0;

      const trimDuration =
        Math.max(0, trimEnd - trimStart);

      const currentTrimTime =
        Math.max(0, photoPreviewVideo.currentTime - trimStart);

      if (timelineVideoVisibleRange) {
        timelineVideoVisibleRange.textContent =
          currentLanguage === "en"
            ? "Trimmed preview: " + currentTrimTime.toFixed(1) + "s / " + trimDuration.toFixed(1) + "s"
            : "Kesilmiş önizleme: " + currentTrimTime.toFixed(1) + "sn / " + trimDuration.toFixed(1) + "sn";
      }

      if (
        trimEnd > trimStart &&
        photoPreviewVideo.currentTime >= trimEnd
      ) {
        photoPreviewVideo.pause();
        photoPreviewVideo.currentTime = trimStart;

        if (timelineTrimPlayBtn) {
          timelineTrimPlayBtn.textContent =
            currentLanguage === "en" ? "▶ Play Trim" : "▶ Kesmeyi Oynat";
        }
      }

    };

    photoPreviewVideo.onseeking = null;

    photoPreviewVideo.onplay = function () {

      const trimStart =
        Number(file.startTime) || 0;

      if (photoPreviewVideo.currentTime < trimStart) {
        photoPreviewVideo.currentTime = trimStart;
      }

    };

    photoPreviewVideo.load();

    timelineEndMarkerMode = false;

    timelineVideoTrimBox.style.display = "block";
    refreshTimelineVideoTrimLanguage();
    updateTimelineVideoTrimInfo();

    saveCropPhotoBtn.style.display = "none";

    deletePreviewPhotoBtn.textContent =
      currentLanguage === "en"
        ? "Delete"
        : "Sil";

    openPhotoPreviewNearElement(img);
    return;

  }

  photoPreviewVideo.pause();
  photoPreviewVideo.controls = true;
  photoPreviewVideo.onclick = null;
  photoPreviewVideo.removeAttribute("src");
  photoPreviewVideo.style.display = "none";

  photoPreviewImage.style.display = "block";
  saveCropPhotoBtn.style.display = "";
  timelineVideoTrimBox.style.display = "none";

  photoPreviewVideo.ontimeupdate = null;
  photoPreviewVideo.onseeking = null;
  photoPreviewVideo.onplay = null;
  photoPreviewVideo.onloadedmetadata = null;

  deletePreviewPhotoBtn.textContent =
    currentLanguage === "en"
      ? "Delete"
      : "Sil";

  saveCropPhotoBtn.textContent =
    currentLanguage === "en"
      ? "Crop"
      : "Kırp";

  selectedCropX =
    Number.isFinite(
      Number(file.cropX)
    )
      ? Number(file.cropX)
      : 50;

  selectedCropY =
    Number.isFinite(
      Number(file.cropY)
    )
      ? Number(file.cropY)
      : 50;

  photoPreviewImage.style.objectPosition =
    selectedCropX +
    "% " +
    selectedCropY +
    "%";

  photoPreviewImage.src =
    file.originalUrl ||
    file.url ||
    img.src;

  openPhotoPreviewNearElement(img);

};

    const input = document.createElement("input");
    input.className = "photo-caption-input";
    input.type = "text";
    input.placeholder =
      currentLanguage === "en"
        ? "Optional text for media " + (index + 1)
        : (index + 1) + ". medya için isteğe bağlı metin";
        input.value =
  file.caption || "";

    input.oninput = function () {

  const previousCaption =
    file.caption || "";

  const limit =
    getMediaCaptionLimit(
      file,
      index
    );

  if (
    input.value.length > limit &&
    input.value.length >
      previousCaption.length
  ) {

    input.value =
      previousCaption;

  }

  file.caption = input.value;
  photoCaptions[index] = input.value;

  file.voiceUrl = "";
  file.voiceText = "";

  saveProjectPhotos();

  refreshSlideVoiceButton(voiceBtn, file);

};

    const timeInput = document.createElement("input");
timeInput.className = "photo-time-input";
timeInput.type = "number";
timeInput.min = "1";
timeInput.max = "180";
timeInput.value = file.duration || 10;

timeInput.oninput = function () {

  let value =
    parseInt(timeInput.value, 10);

  if (!value || value < 1) {
    value = 1;
  }

  file.duration = value;
photoDurations[index] = value;
saveProjectPhotos();
validatePhotoDurationTotal(false);

if (
  currentPreviewIndex === index
) {
  refreshTimelineCaptionCapacity();
}

};

const genderBtn = document.createElement("button");
genderBtn.type = "button";
genderBtn.className = "slide-gender-btn";

function refreshGenderBtn() {

  const isFemale =
    (file.voiceGender || "female") === "female";

  genderBtn.innerHTML =
    '<img src="/Assets/Icons/' +
    (isFemale ? 'Speaker-Female.webp' : 'Speaker-Male.webp') +
    '" style="width:64px;height:34px;display:block;margin:auto;">';

}

refreshGenderBtn();

genderBtn.onclick = function () {

  file.voiceGender =
    (file.voiceGender || "female") === "female"
      ? "male"
      : "female";

  file.voiceUrl = "";
  file.voiceText = "";

  saveProjectPhotos();

  refreshGenderBtn();
  refreshSlideVoiceButton(voiceBtn, file);

};

const voiceBtn = document.createElement("button");
voiceBtn.type = "button";
voiceBtn.className = "slide-voice-btn";

refreshSlideVoiceButton(voiceBtn, file);

voiceBtn.onclick = function () {
  createSlideVoice(file, voiceBtn);
};

row.appendChild(img);
row.appendChild(sequenceInfo);
row.appendChild(input);
row.appendChild(genderBtn);
row.appendChild(voiceBtn);
row.appendChild(timeInput);

photoTextList.appendChild(row);
  });

  photoTextList.appendChild(
    createTimelineFixedSequence(
      "outro",
      getTimelineOutroImageSource(),
      timelineOutroDuration
    )
  );

  refreshTimelineTotalDuration();

}

function loadPhotoCaptions() {

  photoCaptions =
    selectedPhotos.map(function (photo) {
      return photo.caption || "";
    });

}

function savePhotoCaptions() {

}

/* ***** 19 - PHOTO PREVIEW ACTIONS ***** */
function showFreePhotoPreview(photoUrl){

  previewFreePhotoUrl = photoUrl;

  photoPreviewImage.src = photoUrl;

  deletePreviewPhotoBtn.style.display = "none";
  closePreviewPhotoBtn.classList.remove("secondary-btn");
  closePreviewPhotoBtn.classList.add("primary-btn");

  closePreviewPhotoBtn.textContent =
    currentLanguage==="en"
    ? "Close"
    : "Kapat";

  closePreviewPhotoBtn.onclick = function(){
    closePhotoPreview();
  };

  const selectBtn = document.createElement("button");

  selectBtn.id = "selectFreePhotoBtn";

  selectBtn.textContent =
    currentLanguage==="en"
    ? "Select"
    : "Seç";

  selectBtn.onclick = function(){

    toggleFreePhotoSelection();

    closePreviewPhotoBtn.onclick = defaultClosePreviewHandler;

  };

  const actions =
    document.getElementById("photoPreviewActions");

  const oldBtn =
    document.getElementById("selectFreePhotoBtn");

  if(oldBtn) oldBtn.remove();

  actions.appendChild(selectBtn);

  photoPreviewBox.style.display = "flex";

}

function toggleFreePhotoSelection(){

  if(!previewFreePhotoUrl) return;

  if(
      selectedFreePhotos.includes(
        previewFreePhotoUrl
      )
    ){

      selectedFreePhotos =
        selectedFreePhotos.filter(
          p => p !== previewFreePhotoUrl
        );

  }else{

      selectedFreePhotos.push(
        previewFreePhotoUrl
      );

  }

  renderFreePhotos();

  previewFreePhotoUrl = null;

  deletePreviewPhotoBtn.style.display = "";

  closePreviewPhotoBtn.textContent =
    currentLanguage==="en"
    ? "Close"
    : "Kapat";

  closePhotoPreview();
}
closePreviewPhotoBtn.onclick = function () {

  saveProjectPhotos();

  if (
    timelineUploadedVoicePreview
  ) {

    try {

      timelineUploadedVoicePreview.pause();

      timelineUploadedVoicePreview.currentTime =
        0;

    } catch (error) {}

  }

  if (
    previewFreePhotoUrl
  ) {

    toggleFreePhotoSelection();
    return;

  }

  closePhotoPreview();

};

photoPreviewBox.onclick = function (e) {
  if (e.target === photoPreviewBox) {
    closePhotoPreview();
  }
};

function updateSelectedCropPosition() {

  photoPreviewImage.style.objectPosition =
    selectedCropX + "% " + selectedCropY + "%";

}

photoPreviewFrame.onpointerdown = function(e){

  if (currentPreviewIndex === null) return;

  selectedCropDragging = true;

  selectedCropStartX = e.clientX;
  selectedCropStartY = e.clientY;

  selectedCropStartValueX = selectedCropX;
  selectedCropStartValueY = selectedCropY;

  photoPreviewFrame.style.cursor = "grabbing";

  if (photoPreviewFrame.setPointerCapture) {
    photoPreviewFrame.setPointerCapture(e.pointerId);
  }

  e.preventDefault();

};

photoPreviewFrame.onpointermove = function(e){

  if (!selectedCropDragging) return;

  const frameWidth =
    photoPreviewFrame.clientWidth || 1;

  const frameHeight =
    photoPreviewFrame.clientHeight || 1;

  selectedCropX =
    selectedCropStartValueX -
    ((e.clientX - selectedCropStartX) / frameWidth) * 100;

  selectedCropY =
    selectedCropStartValueY -
    ((e.clientY - selectedCropStartY) / frameHeight) * 100;

  if (selectedCropX < 0) selectedCropX = 0;
  if (selectedCropX > 100) selectedCropX = 100;
  if (selectedCropY < 0) selectedCropY = 0;
  if (selectedCropY > 100) selectedCropY = 100;

  updateSelectedCropPosition();

  e.preventDefault();

};

photoPreviewFrame.onpointerup = function(){

  selectedCropDragging = false;
  photoPreviewFrame.style.cursor = "grab";

};

photoPreviewFrame.onpointercancel = function(){

  selectedCropDragging = false;
  photoPreviewFrame.style.cursor = "grab";

};

async function createSelectedCroppedImage(photoUrl) {

  let finalPhotoUrl =
    photoUrl;

  if (
    photoUrl.indexOf("http://") === 0 ||
    photoUrl.indexOf("https://") === 0
  ) {

    const response =
      await fetch(
        "/Supports/free-photo-search.php?image=" +
        encodeURIComponent(photoUrl)
      );

    const data =
      await response.json();

    if (data.dataUrl) {
      finalPhotoUrl = data.dataUrl;
    }

  }

  return new Promise(function(resolve){

    const img = new Image();

    img.onload = function(){

      const outputSize =
        getIntroPreviewOutputSize();

      const frameWidth =
        outputSize.width;

      const frameHeight =
        outputSize.height;

      const cropCanvas =
        document.createElement("canvas");

      const cropCtx =
        cropCanvas.getContext("2d");

      cropCanvas.width = frameWidth;
      cropCanvas.height = frameHeight;

      const scale =
        Math.max(
          frameWidth / img.naturalWidth,
          frameHeight / img.naturalHeight
        );

      const sourceWidth =
        frameWidth / scale;

      const sourceHeight =
        frameHeight / scale;

      const sourceX =
        (img.naturalWidth - sourceWidth) *
        (selectedCropX / 100);

      const sourceY =
        (img.naturalHeight - sourceHeight) *
        (selectedCropY / 100);

      cropCtx.drawImage(
        img,
        sourceX,
        sourceY,
        sourceWidth,
        sourceHeight,
        0,
        0,
        frameWidth,
        frameHeight
      );

      resolve(
        cropCanvas.toDataURL("image/jpeg", 0.98)
      );

    };

    img.src = finalPhotoUrl;

  });

}

setTimelineVideoStartBtn.oninput = function () {

  if (currentPreviewIndex === null) return;

  const file =
    selectedPhotos[currentPreviewIndex];

  if (!file || !(file.type === "video" || file.isFreeVideo)) return;

  file.startTime =
    Math.max(0, Number(setTimelineVideoStartBtn.value) || 0);

  if (file.startTime >= file.endTime) {
    file.startTime =
      Math.max(0, file.endTime - 0.5);
  }

  normalizeTimelineVideoTrim(file);

  photoPreviewVideo.pause();
  photoPreviewVideo.currentTime = file.startTime;

  updateTimelineVideoTrimInfo();

};

setTimelineVideoEndBtn.oninput = function () {

  if (currentPreviewIndex === null) return;

  const file =
    selectedPhotos[currentPreviewIndex];

  if (!file || !(file.type === "video" || file.isFreeVideo)) return;

  file.endTime =
    Math.max(0, Number(setTimelineVideoEndBtn.value) || 0);

  if (file.endTime <= file.startTime) {
    file.endTime =
      file.startTime + 0.5;
  }

  normalizeTimelineVideoTrim(file);

  photoPreviewVideo.pause();
  photoPreviewVideo.currentTime = file.endTime;

  updateTimelineVideoTrimInfo();

};

saveTimelineVideoTrimBtn.onclick = function () {

  if (currentPreviewIndex === null) return;

  const file =
    selectedPhotos[currentPreviewIndex];

  if (!file || !(file.type === "video" || file.isFreeVideo)) return;

  normalizeTimelineVideoTrim(file);

  photoDurations[currentPreviewIndex] =
    file.duration;

  saveProjectPhotos();

  buildPhotoTextList();

  clearTimeout(
    saveTimelineVideoTrimBtn._trimSavedTimer
  );

  saveTimelineVideoTrimBtn.disabled = true;

  saveTimelineVideoTrimBtn.classList.add(
    "trim-saved"
  );

  saveTimelineVideoTrimBtn.textContent =
    currentLanguage === "en"
      ? "✓ Trim Saved"
      : "✓ Kesme Kaydedildi";

  saveTimelineVideoTrimBtn._trimSavedTimer =
    setTimeout(
      function () {

        saveTimelineVideoTrimBtn.disabled = false;

        saveTimelineVideoTrimBtn.classList.remove(
          "trim-saved"
        );

        saveTimelineVideoTrimBtn.textContent =
          currentLanguage === "en"
            ? "Save Trim"
            : "Kesmeyi Kaydet";

      },
      1800
    );

};

function getTimelineDownloadFileName(file) {

  const extension =
    (file.type === "video" || file.isFreeVideo)
      ? "mp4"
      : "jpg";

  return "IzyPost-Media-" +
    (currentPreviewIndex + 1) +
    "." +
    extension;

}

async function downloadCurrentTimelineMedia() {

  if (currentPreviewIndex === null) return;

  const file =
    selectedPhotos[currentPreviewIndex];

  if (!file) return;

  const mediaUrl =
    file.url || file.originalUrl;

  if (!mediaUrl) return;

  const fileName =
    getTimelineDownloadFileName(file);

  const response =
    await fetch(mediaUrl);

  const blob =
    await response.blob();

  const blobUrl =
    URL.createObjectURL(blob);

  const link =
    document.createElement("a");

  link.href = blobUrl;
  link.download = fileName;

  document.body.appendChild(link);
  link.click();
  link.remove();

  setTimeout(function () {
    URL.revokeObjectURL(blobUrl);
  }, 1000);

}

downloadPreviewMediaBtn.onclick = function () {
  downloadCurrentTimelineMedia();
};

saveCropPhotoBtn.onclick = async function () {

  if (currentPreviewIndex === null) {
    return;
  }

  const file =
    selectedPhotos[currentPreviewIndex];

  if (
    !file ||
    file.type === "video" ||
    file.isFreeVideo
  ) {
    return;
  }

  const sourcePhoto =
    file.originalUrl ||
    file.url;

  if (!sourcePhoto) {
    return;
  }

  file.originalUrl =
    sourcePhoto;

  saveCropPhotoBtn.disabled =
    true;

  saveCropPhotoBtn.textContent =
    currentLanguage === "en"
      ? "Saving..."
      : "Kaydediliyor...";

  try {

    const croppedPhoto =
      await createSelectedCroppedImage(
        sourcePhoto
      );

    file.url =
      croppedPhoto;

    file.thumbnail =
      croppedPhoto;

    /*
      Keep the original source and remember the
      exact crop position selected by the user.
    */

    file.cropX =
      selectedCropX;

    file.cropY =
      selectedCropY;

    photoPreviewImage.src =
      file.originalUrl ||
      croppedPhoto;

    photoPreviewImage.style.objectPosition =
      selectedCropX +
      "% " +
      selectedCropY +
      "%";

    await saveProjectPhotos();

    buildPhotoTextList();

    saveCropPhotoBtn.textContent =
      currentLanguage === "en"
        ? "Saved"
        : "Kaydedildi";

  } catch (error) {

    console.error(
      "Timeline crop failed:",
      error
    );

    saveCropPhotoBtn.textContent =
      currentLanguage === "en"
        ? "Try Again"
        : "Tekrar Dene";

  } finally {

    saveCropPhotoBtn.disabled =
      false;

    setTimeout(
      function () {

        saveCropPhotoBtn.textContent =
          currentLanguage === "en"
            ? "Crop"
            : "Kırp";

      },
      900
    );

  }

};

function deleteTimelineMediaAtIndex(
  mediaIndex,
  closePreviewAfterDelete
) {

  if (
    mediaIndex < 0 ||
    mediaIndex >= selectedPhotos.length
  ) {
    return;
  }

  const file =
    selectedPhotos[mediaIndex];

  const isVideo =
    file &&
    (
      file.type === "video" ||
      file.isFreeVideo
    );

  const deleteMessage =
    currentLanguage === "en"
      ? (
          isVideo
            ? "Delete this video from the timeline?"
            : "Delete this photo from the timeline?"
        )
      : (
          isVideo
            ? "Bu video zaman çizelgesinden silinsin mi?"
            : "Bu fotoğraf zaman çizelgesinden silinsin mi?"
        );

  if (!confirm(deleteMessage)) {
    return;
  }

  selectedPhotos.splice(
    mediaIndex,
    1
  );

  photoCaptions.splice(
    mediaIndex,
    1
  );

  photoDurations.splice(
    mediaIndex,
    1
  );

  selectedPhotoTotal =
    selectedPhotos.length;

  if (
    currentPreviewIndex === mediaIndex
  ) {

    currentPreviewIndex =
      null;

    currentSpeechId =
      null;

  } else if (
    currentPreviewIndex !== null &&
    currentPreviewIndex > mediaIndex
  ) {

    currentPreviewIndex -= 1;

  }

  saveProjectPhotos();
  updatePhotoCounter();
  buildPhotoTextList();
  refreshTimelineTotalDuration();

  if (closePreviewAfterDelete) {
    closePhotoPreview();
  }

}

deletePreviewPhotoBtn.onclick =
  function () {

    if (
      currentPreviewIndex === null
    ) {
      return;
    }

    deleteTimelineMediaAtIndex(
      currentPreviewIndex,
      true
    );

  };

function closePhotoPreview() {

  photoPreviewBox.style.display =
    "none";

  document.body.classList.remove(
    "ip-photo-preview-active"
  );

  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });

  if (
    freePhotosBox.style.display !== "block" &&
    contactCardBox.style.display !== "block" &&
    outputSettingsBox.style.display !== "block" &&
    textSettingsBox.style.display !== "block" &&
    outroSettingsBox.style.display !== "block" &&
    transitionBox.style.display !== "block" &&
    musicSettingsBox.style.display !== "block" &&
    textLogoMakerBox.style.display !== "block" &&
    introPreviewBox.style.display !== "block" &&
    !document.body.classList.contains("ip-timeline-card-active")
  ) {
    contactOverlay.style.display = "none";
  }

  photoPreviewImage.src = "";
  photoPreviewImage.style.display = "block";

  photoPreviewVideo.pause();
  photoPreviewVideo.removeAttribute("src");
  photoPreviewVideo.style.display = "none";

  saveCropPhotoBtn.style.display = "";
  timelineEndMarkerMode = false;
  timelineVideoTrimBox.style.display = "none";

  if (timelineVideoVisibleRange) {
    timelineVideoVisibleRange.textContent = "";
  }

  if (timelineTrimPlayBtn) {
    timelineTrimPlayBtn.style.display = "none";
    timelineTrimPlayBtn.onclick = null;
    timelineTrimPlayBtn.textContent =
      currentLanguage === "en" ? "▶ Play Trim" : "▶ Kesmeyi Oynat";
  }

    photoPreviewVideo.ontimeupdate = null;
  photoPreviewVideo.onseeking = null;
  photoPreviewVideo.onplay = null;
  photoPreviewVideo.onloadedmetadata = null;

  if (
    timelineUploadedVoicePreview
  ) {

    try {

      timelineUploadedVoicePreview.pause();

      timelineUploadedVoicePreview.currentTime =
        0;

    } catch (error) {}

  }

  if (
    timelineUploadedVoiceInput
  ) {

    timelineUploadedVoiceInput.value =
      "";

  }

  deletePreviewPhotoBtn.textContent =
    currentLanguage === "en"
      ? "Delete"
      : "Sil";

  downloadPreviewMediaBtn.textContent =
    currentLanguage === "en"
      ? "Download"
      : "İndir";

  saveCropPhotoBtn.textContent =
    currentLanguage === "en"
      ? "Crop"
      : "Kırp";

  closePreviewPhotoBtn.textContent =
    currentLanguage === "en"
      ? "Save & Close"
      : "Kaydet ve Kapat";

  currentPreviewIndex = null;

  timelineEditControls.style.display = "none";
  timelineCaptionInput.value = "";

  deletePreviewPhotoBtn.style.display = "";

  cancelFreePreviewBtn.style.display = "none";

  if (document.body.classList.contains("ip-timeline-card-active")) {

    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });

  }

}

cancelFreePreviewBtn.onclick = function(){

  previewFreePhotoUrl = null;

  closePhotoPreview();

};
/* ***** 19A - INDEPENDENT TIMELINE CARD ***** */

openTimelineCardBtn.onclick = function () {

  if (
    timelineCardBox.parentElement !==
    document.body
  ) {

    document.body.insertBefore(
      timelineCardBox,
      document.body.firstChild
    );

  }


  document.body.classList.add(
    "ip-timeline-card-active"
  );

  contactOverlay.style.display =
    "block";

  resetTimelineOnlyBtn.textContent =
    currentLanguage === "en"
      ? "Reset & New Project"
      : "Sıfırla ve Yeni Proje";

  closeTimelineCardBtn.textContent =
    currentLanguage === "en"
      ? "Create Video"
      : "Video Oluştur";

  timelineCardTitle.textContent =
    "IzyPost";

  timelineCardSubtitle.textContent =
    currentLanguage === "en"
      ? "Professional Social Video Studio"
      : "Profesyonel Sosyal Video Stüdyosu";

  refreshTimelineMoveButton();

  buildPhotoTextList();

  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });

};

function refreshTimelineMoveButton() {

  editTimelineBtn.textContent =
    currentLanguage === "en" ? "Edit" : "Düzenle";

  moveTimelineBtn.textContent =
    currentLanguage === "en" ? "Swap" : "Değiştir";

  if (timelineSwapMode) {
    editTimelineBtn.classList.remove("active");
    moveTimelineBtn.classList.add("active");
  } else {
    editTimelineBtn.classList.add("active");
    moveTimelineBtn.classList.remove("active");
  }

}

function clearTimelineSwapSelection() {

  timelineSwapFirstIndex = null;

  document
    .querySelectorAll(".photo-text-row.timeline-swap-selected")
    .forEach(function (item) {
      item.classList.remove("timeline-swap-selected");
    });

}

function handleTimelineSwapClick(index) {

  if (timelineSwapFirstIndex === null) {

    timelineSwapFirstIndex = index;

    document
      .querySelectorAll(".photo-text-row.timeline-swap-selected")
      .forEach(function (item) {
        item.classList.remove("timeline-swap-selected");
      });

    const selectedRow =
      photoTextList.querySelector(
        '.photo-text-row[data-index="' + index + '"]'
      );

    if (selectedRow) {
      selectedRow.classList.add("timeline-swap-selected");
    }

    return;

  }

  if (timelineSwapFirstIndex === index) {

    timelineSwapMode = false;

    clearTimelineSwapSelection();
    refreshTimelineMoveButton();

    return;
  }

  swapTimelineMedia(
    timelineSwapFirstIndex,
    index
  );

  timelineSwapMode = false;

  clearTimelineSwapSelection();
  refreshTimelineMoveButton();

}

function swapTimelineMedia(firstIndex, secondIndex) {

  if (firstIndex < 0) return;
  if (secondIndex < 0) return;
  if (firstIndex >= selectedPhotos.length) return;
  if (secondIndex >= selectedPhotos.length) return;

  const temp =
    selectedPhotos[firstIndex];

  selectedPhotos[firstIndex] =
    selectedPhotos[secondIndex];

  selectedPhotos[secondIndex] =
    temp;

  photoCaptions =
    selectedPhotos.map(function (photo) {
      return photo.caption || "";
    });

  photoDurations =
    selectedPhotos.map(function (photo) {
      return photo.duration || 10;
    });

  saveProjectPhotos();
  buildPhotoTextList();

}

editTimelineBtn.onclick = function () {

  timelineSwapMode = false;
  clearTimelineSwapSelection();
  refreshTimelineMoveButton();

};

moveTimelineBtn.onclick = function () {

  if (selectedPhotos.length < 2) {
    return;
  }

  timelineSwapMode = true;
  clearTimelineSwapSelection();
  refreshTimelineMoveButton();

};

let activeTimelinePreviewSectionType =
  "";

let activeTimelinePreviewMediaIndex =
  null;

let timelineAudioMixRestartTimer =
  null;

let timelineLivePreviewCurrentSecond =
  0;

let timelineLivePreviewDuration =
  0;

let timelineLivePreviewPaused =
  false;

let timelineLivePreviewSeekTimer =
  null;

let timelineFullPreviewSections =
  [];

let timelineFullPreviewActiveSectionIndex =
  -1;

let timelineFullPreviewPlaying =
  false;

let timelineFullPreviewTransitioning =
  false;

let timelineFullPreviewToken =
  0;

function formatTimelinePreviewClock(
  totalSeconds
) {

  const safeSeconds =
    Math.max(
      0,
      Number(
        totalSeconds
      ) || 0
    );

  const minutes =
    Math.floor(
      safeSeconds / 60
    );

  const seconds =
    Math.floor(
      safeSeconds % 60
    );

  return (
    String(minutes)
      .padStart(
        2,
        "0"
      ) +
    ":" +
    String(seconds)
      .padStart(
        2,
        "0"
      )
  );

}

function updateTimelinePreviewTransport(
  currentSecond,
  duration
) {

  timelineLivePreviewCurrentSecond =
    Math.max(
      0,
      Number(
        currentSecond
      ) || 0
    );

  timelineLivePreviewDuration =
    Math.max(
      0.1,
      Number(
        duration
      ) || 0.1
    );

  timelineLivePreviewSeek.max =
    String(
      timelineLivePreviewDuration
    );

  timelineLivePreviewSeek.value =
    String(
      Math.min(
        timelineLivePreviewDuration,
        timelineLivePreviewCurrentSecond
      )
    );

  timelineLivePreviewTime.textContent =
    formatTimelinePreviewClock(
      timelineLivePreviewCurrentSecond
    ) +
    " / " +
    formatTimelinePreviewClock(
      timelineLivePreviewDuration
    );

}

async function restartTimelineSectionPreviewAt(
  requestedSecond
) {

  const safeSecond =
    Math.max(
      0,
      Math.min(
        timelineLivePreviewDuration,
        Number(
          requestedSecond
        ) || 0
      )
    );

  if (
    activeTimelinePreviewSectionType ===
      "full"
  ) {

    await prepareTimelineFullPreviewAt(
      safeSecond,
      !timelineLivePreviewPaused
    );

    return;

  }

  if (
    typeof window
      .seekIzyPostFastSectionPreview ===
    "function"
  ) {

    await window
      .seekIzyPostFastSectionPreview(
        safeSecond
      );

  }

  updateTimelinePreviewTransport(
    safeSecond,
    timelineLivePreviewDuration
  );

}

function refreshTimelineLivePreviewLanguage() {

  previewTimelineBtn.textContent =
    currentLanguage === "en"
      ? "Preview"
      : "Ön İzleme";

  timelineLivePreviewTitle.textContent =
    currentLanguage === "en"
      ? "Video Preview"
      : "Video Ön İzleme";

  stopTimelineLivePreviewBtn.textContent =
    currentLanguage === "en"
      ? "Stop"
      : "Durdur";

  closeTimelineLivePreviewBtn.textContent =
    currentLanguage === "en"
      ? "Close"
      : "Kapat";

}

function closeTimelineLivePreview() {

  if (
    typeof window
      .destroyIzyPostFastSectionPreview ===
    "function"
  ) {

    window
      .destroyIzyPostFastSectionPreview();

  }

  if (
    typeof window
      .stopIzyPostLivePreview ===
    "function"
  ) {

    window.stopIzyPostLivePreview();

  }

  timelineLivePreviewCard.classList.remove(
    "open"
  );

  timelineLivePreviewAudioMixHost
    .classList
    .remove(
      "visible"
    );

  timelineLivePreviewTransport
    .classList
    .remove(
      "visible"
    );

  timelineLivePreviewPaused =
    false;

  timelineLivePreviewCurrentSecond =
    0;

  timelineLivePreviewDuration =
    0;

  closeTimelineQuickAudioControl();

  timelineAudioMixToggleBtn
    .classList
    .remove(
      "open"
    );

  timelineAudioMixToggleBtn
    .setAttribute(
      "aria-expanded",
      "false"
    );

  activeTimelinePreviewSectionType =
    "";

  activeTimelinePreviewMediaIndex =
    null;

  document.body.classList.add(
    "ip-timeline-card-active"
  );

  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });

}

function prepareTimelinePreviewState() {

  if (
    timelineOutroEnabled &&
    timelineOutroDuration < 3
  ) {

    timelineOutroDuration = 3;

  }

  localStorage.setItem(
    "ip_introEnabled",
    timelineIntroEnabled
      ? "yes"
      : "no"
  );

  localStorage.setItem(
    "ip_outroEnabled",
    timelineOutroEnabled
      ? "yes"
      : "no"
  );

  localStorage.setItem(
    "ip_introDuration",
    String(
      timelineIntroDuration
    )
  );

  localStorage.setItem(
    "ip_outroDuration",
    String(
      timelineOutroDuration
    )
  );

  window.photoDurations =
    photoDurations;

  saveProjectPhotos();

  if (
    typeof window.applySelectedCanvasSize ===
    "function"
  ) {

    window.applySelectedCanvasSize();

  }

}

function moveTimelineAudioMixToPreviewCard(
  sectionType,
  mediaIndex
) {

  if (
    !timelineLivePreviewAudioMixHost ||
    !timelineAudioMixToggleBtn ||
    !timelineAudioMixPanel
  ) {
    return;
  }

  const isMediaPreview =
    sectionType === "media" &&
    Number.isInteger(
      Number(mediaIndex)
    ) &&
    selectedPhotos[
      Number(mediaIndex)
    ];

  const referenceIndex =
    isMediaPreview
      ? Number(mediaIndex)
      : (
          Number.isInteger(
            Number(currentPreviewIndex)
          ) &&
          selectedPhotos[
            Number(currentPreviewIndex)
          ]
            ? Number(currentPreviewIndex)
            : 0
        );

  const file =
    selectedPhotos[
      referenceIndex
    ];

  timelineLivePreviewAudioMixHost
    .classList
    .toggle(
      "visible",
      Boolean(file)
    );

  timelineLivePreviewTransport
    .classList
    .toggle(
      "visible",
      Boolean(file)
    );

  if (!file) {
    return;
  }

  currentPreviewIndex =
    referenceIndex;

  timelineLivePreviewAudioMixHost
    .appendChild(
      timelineAudioMixToggleBtn
        .closest(
          ".timeline-audio-mix-control"
        )
    );

  timelineLivePreviewAudioMixHost
    .appendChild(
      timelineAudioMixPanel
    );

  ensureMediaSpeechList(
    file
  );

  const speech =
    getSelectedSpeech(
      file
    );

  refreshTimelineAudioMixControls(
    file,
    speech
  );

  timelineAudioMixPanel
    .classList
    .add(
      "open"
    );

  timelineAudioMixPanel
    .querySelectorAll(
      ".timeline-audio-mix-row"
    )
    .forEach(
      function (
        row
      ) {

        row.classList.add(
          "quick-visible"
        );

      }
    );

}

function openTimelinePreviewCard(
  previewTitle
) {

  refreshTimelineLivePreviewLanguage();

  timelineLivePreviewTitle.textContent =
    previewTitle;

  document.body.classList.remove(
    "ip-timeline-card-active"
  );

  timelineLivePreviewCard.classList.add(
    "open"
  );

  timelineLivePreviewStatus.textContent =
    currentLanguage === "en"
      ? "Preparing preview..."
      : "Ön izleme hazırlanıyor...";

  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });

}

function fitTimelinePreviewCanvasInsideSquare() {

  if (
    !timelineLivePreviewCanvas ||
    !timelineLivePreviewStage
  ) {
    return;
  }

  const canvasWidth =
    Number(
      timelineLivePreviewCanvas.width
    );

  const canvasHeight =
    Number(
      timelineLivePreviewCanvas.height
    );

  if (
    !canvasWidth ||
    !canvasHeight
  ) {
    return;
  }

  const stageStyle =
    window.getComputedStyle(
      timelineLivePreviewStage
    );

  const horizontalPadding =
    parseFloat(
      stageStyle.paddingLeft
    ) +
    parseFloat(
      stageStyle.paddingRight
    );

  const verticalPadding =
    parseFloat(
      stageStyle.paddingTop
    ) +
    parseFloat(
      stageStyle.paddingBottom
    );

  const availableWidth =
    Math.max(
      1,
      timelineLivePreviewStage.clientWidth -
      horizontalPadding
    );

  const availableHeight =
    Math.max(
      1,
      timelineLivePreviewStage.clientHeight -
      verticalPadding
    );

  const canvasRatio =
    canvasWidth /
    canvasHeight;

  let displayWidth;
  let displayHeight;

  if (
    canvasRatio >=
    availableWidth /
    availableHeight
  ) {

    displayWidth =
      availableWidth;

    displayHeight =
      availableWidth /
      canvasRatio;

  } else {

    displayHeight =
      availableHeight;

    displayWidth =
      availableHeight *
      canvasRatio;

  }

  timelineLivePreviewCanvas.style.width =
    displayWidth + "px";

  timelineLivePreviewCanvas.style.height =
    displayHeight + "px";

}

function buildTimelineFullPreviewSections() {

  const sections = [];

  let startSecond =
    0;

  if (
    timelineIntroEnabled
  ) {

    const duration =
      Math.max(
        0.1,
        Number(
          timelineIntroDuration
        ) || 0.1
      );

    sections.push({
      type:
        "intro",

      mediaIndex:
        null,

      start:
        startSecond,

      duration:
        duration
    });

    startSecond +=
      duration;

  }

  selectedPhotos.forEach(
    function (
      file,
      index
    ) {

      const duration =
        Math.max(
          0.1,
          getCurrentMediaDuration(
            file,
            index
          )
        );

      sections.push({
        type:
          "media",

        mediaIndex:
          index,

        start:
          startSecond,

        duration:
          duration
      });

      startSecond +=
        duration;

    }
  );

  if (
    timelineOutroEnabled
  ) {

    const duration =
      Math.max(
        0.1,
        Number(
          timelineOutroDuration
        ) || 0.1
      );

    sections.push({
      type:
        "outro",

      mediaIndex:
        null,

      start:
        startSecond,

      duration:
        duration
    });

    startSecond +=
      duration;

  }

  timelineFullPreviewSections =
    sections;

  return {
    sections:
      sections,

    duration:
      Math.max(
        0.1,
        startSecond
      )
  };

}

function findTimelineFullPreviewSection(
  globalSecond
) {

  const total =
    buildTimelineFullPreviewSections();

  const safeSecond =
    Math.max(
      0,
      Math.min(
        total.duration,
        Number(
          globalSecond
        ) || 0
      )
    );

  let selectedIndex =
    total.sections.length - 1;

  for (
    let index = 0;
    index < total.sections.length;
    index++
  ) {

    const section =
      total.sections[index];

    if (
      safeSecond <
        section.start +
        section.duration ||
      index ===
        total.sections.length - 1
    ) {

      selectedIndex =
        index;

      break;

    }

  }

  const section =
    total.sections[
      selectedIndex
    ];

  return {
    section:
      section,

    index:
      selectedIndex,

    totalDuration:
      total.duration,

    localSecond:
      section
        ? Math.max(
            0,
            Math.min(
              section.duration,
              safeSecond -
              section.start
            )
          )
        : 0
  };

}

async function prepareTimelineFullPreviewAt(
  globalSecond,
  shouldPlay
) {

  const target =
    findTimelineFullPreviewSection(
      globalSecond
    );

  if (
    !target.section ||
    typeof window
      .prepareIzyPostUniversalPreviewSection !==
    "function"
  ) {
    return;
  }

  const localToken =
    ++timelineFullPreviewToken;

  timelineFullPreviewActiveSectionIndex =
    target.index;

  timelineFullPreviewPlaying =
    Boolean(
      shouldPlay
    );

  await window
    .prepareIzyPostUniversalPreviewSection(
      timelineLivePreviewCanvas,
      target.section.type,
      target.section.mediaIndex,
      function (
        message
      ) {

        if (
          localToken !==
          timelineFullPreviewToken
        ) {
          return;
        }

        timelineLivePreviewStatus.textContent =
          message;

      },
      function (
        localSecond,
        localDuration
      ) {

        if (
          localToken !==
          timelineFullPreviewToken
        ) {
          return;
        }

        const currentGlobalSecond =
          Math.min(
            target.totalDuration,
            target.section.start +
            Number(
              localSecond
            )
          );

        updateTimelinePreviewTransport(
          currentGlobalSecond,
          target.totalDuration
        );

        if (
          !timelineFullPreviewPlaying ||
          timelineFullPreviewTransitioning ||
          Number(
            localSecond
          ) <
            Number(
              localDuration
            ) -
            0.02
        ) {
          return;
        }

        if (
          target.index >=
          timelineFullPreviewSections.length - 1
        ) {

          timelineFullPreviewPlaying =
            false;

          timelineLivePreviewPaused =
            true;

          timelineLivePreviewPlayPauseBtn
            .classList
            .add(
              "paused"
            );

          timelineLivePreviewPlayPauseBtn.textContent =
            "▶";

          return;

        }

        timelineFullPreviewTransitioning =
          true;

        const nextSection =
          timelineFullPreviewSections[
            target.index + 1
          ];

        Promise.resolve()
          .then(
            async function () {

              await prepareTimelineFullPreviewAt(
                nextSection.start,
                true
              );

            }
          )
          .finally(
            function () {

              timelineFullPreviewTransitioning =
                false;

            }
          );

      }
    );

  if (
    localToken !==
    timelineFullPreviewToken
  ) {
    return;
  }

  fitTimelinePreviewCanvasInsideSquare();

  await window
    .seekIzyPostFastSectionPreview(
      target.localSecond
    );

  updateTimelinePreviewTransport(
    target.section.start +
      target.localSecond,
    target.totalDuration
  );

  if (
    shouldPlay
  ) {

    await window
      .playIzyPostFastSectionPreview();

  }

}

async function startTimelineSectionPreview(
  sectionType,
  mediaIndex
) {

  prepareTimelinePreviewState();

  activeTimelinePreviewSectionType =
    sectionType;

  activeTimelinePreviewMediaIndex =
    sectionType === "media"
      ? Number(mediaIndex)
      : null;

  timelineFullPreviewPlaying =
    false;

  moveTimelineAudioMixToPreviewCard(
    sectionType,
    mediaIndex
  );

  const sectionTitle =
    sectionType === "intro"
      ? (
          currentLanguage === "en"
            ? "Intro Preview"
            : "Başlangıç Ön İzleme"
        )
      : sectionType === "outro"
        ? (
            currentLanguage === "en"
              ? "Outro Preview"
              : "Bitiş Ön İzleme"
          )
        : (
            currentLanguage === "en"
              ? "Media " +
                (
                  Number(mediaIndex) +
                  1
                ) +
                " Preview"
              : "Medya " +
                (
                  Number(mediaIndex) +
                  1
                ) +
                " Ön İzleme"
          );

  openTimelinePreviewCard(
    sectionTitle
  );

  if (
    typeof window
      .prepareIzyPostUniversalPreviewSection !==
    "function"
  ) {

    alert(
      currentLanguage === "en"
        ? "Preview engine is not available."
        : "Ön izleme motoru kullanılamıyor."
    );

    closeTimelineLivePreview();
    return;

  }

  await window
    .prepareIzyPostUniversalPreviewSection(
      timelineLivePreviewCanvas,
      sectionType,
      mediaIndex,
      function (
        message
      ) {

        timelineLivePreviewStatus.textContent =
          message;

      },
      function (
        currentSecond,
        duration
      ) {

        updateTimelinePreviewTransport(
          currentSecond,
          duration
        );

      }
    );

  fitTimelinePreviewCanvasInsideSquare();

  timelineLivePreviewPaused =
    true;

  timelineLivePreviewPlayPauseBtn
    .classList
    .add(
      "paused"
    );

  timelineLivePreviewPlayPauseBtn.textContent =
    "▶";

}

window.addEventListener(
  "resize",
  function () {

    if (
      timelineLivePreviewCard &&
      timelineLivePreviewCard
        .classList
        .contains(
          "open"
        )
    ) {

      fitTimelinePreviewCanvasInsideSquare();

    }

  }
);

previewTimelineBtn.onclick =
  async function () {

    activeTimelinePreviewSectionType =
      "full";

    activeTimelinePreviewMediaIndex =
      null;

    moveTimelineAudioMixToPreviewCard(
      "full",
      null
    );

    if (
      !Array.isArray(
        selectedPhotos
      ) ||
      selectedPhotos.length === 0
    ) {

      alert(
        currentLanguage === "en"
          ? "Please choose some media first."
          : "Lütfen önce medya seçin."
      );

      return;

    }

    prepareTimelinePreviewState();

    openTimelinePreviewCard(
      currentLanguage === "en"
        ? "Video Preview"
        : "Video Ön İzleme"
    );

    timelineLivePreviewPaused =
      true;

    timelineFullPreviewPlaying =
      false;

    timelineLivePreviewPlayPauseBtn
      .classList
      .add(
        "paused"
      );

    timelineLivePreviewPlayPauseBtn.textContent =
      "▶";

    await prepareTimelineFullPreviewAt(
      0,
      false
    );

  };

timelineLivePreviewPlayPauseBtn.onclick =
  async function () {

    if (
      timelineLivePreviewPaused
    ) {

      timelineLivePreviewPaused =
        false;

      timelineLivePreviewPlayPauseBtn
        .classList
        .remove(
          "paused"
        );

      timelineLivePreviewPlayPauseBtn.textContent =
        "❚❚";

      if (
        activeTimelinePreviewSectionType ===
          "full"
      ) {

        timelineFullPreviewPlaying =
          true;

      }

      if (
        typeof window
          .playIzyPostFastSectionPreview ===
        "function"
      ) {

        await window
          .playIzyPostFastSectionPreview();

      }

      return;

    }

    timelineLivePreviewPaused =
      true;

    timelineFullPreviewPlaying =
      false;

    timelineLivePreviewPlayPauseBtn
      .classList
      .add(
        "paused"
      );

    timelineLivePreviewPlayPauseBtn.textContent =
      "▶";

    if (
      typeof window
        .pauseIzyPostFastSectionPreview ===
      "function"
    ) {

      window
        .pauseIzyPostFastSectionPreview();

    }

  };

timelineLivePreviewSeek.oninput =
  function () {

    const requestedSecond =
      Number(
        timelineLivePreviewSeek.value
      ) || 0;

    timelineLivePreviewTime.textContent =
      formatTimelinePreviewClock(
        requestedSecond
      ) +
      " / " +
      formatTimelinePreviewClock(
        timelineLivePreviewDuration
      );

  };

timelineLivePreviewSeek.onchange =
  function () {

    clearTimeout(
      timelineLivePreviewSeekTimer
    );

    timelineLivePreviewSeekTimer =
      setTimeout(
        function () {

          restartTimelineSectionPreviewAt(
            Number(
              timelineLivePreviewSeek.value
            ) || 0
          );

        },
        80
      );

  };

stopTimelineLivePreviewBtn.onclick =
  async function () {

    timelineLivePreviewPaused =
      true;

    timelineFullPreviewPlaying =
      false;

    timelineLivePreviewPlayPauseBtn
      .classList
      .add(
        "paused"
      );

    timelineLivePreviewPlayPauseBtn.textContent =
      "▶";

    if (
      activeTimelinePreviewSectionType ===
        "full"
    ) {

      await prepareTimelineFullPreviewAt(
        0,
        false
      );

    } else {

      if (
        typeof window
          .pauseIzyPostFastSectionPreview ===
        "function"
      ) {

        window
          .pauseIzyPostFastSectionPreview();

      }

      if (
        typeof window
          .seekIzyPostFastSectionPreview ===
        "function"
      ) {

        await window
          .seekIzyPostFastSectionPreview(
            0
          );

      }

      updateTimelinePreviewTransport(
        0,
        timelineLivePreviewDuration
      );

    }

    timelineLivePreviewStatus.textContent =
      currentLanguage === "en"
        ? "Preview stopped."
        : "Ön izleme durduruldu.";

  };

closeTimelineLivePreviewBtn.onclick =
  function () {

    closeTimelineLivePreview();

  };

closeTimelineCardBtn.onclick = function () {

  if (
    timelineOutroEnabled &&
    timelineOutroDuration < 3
  ) {
    timelineOutroDuration = 3;
  }

  localStorage.setItem(
    "ip_introEnabled",
    timelineIntroEnabled ? "yes" : "no"
  );

  localStorage.setItem(
    "ip_outroEnabled",
    timelineOutroEnabled ? "yes" : "no"
  );

  localStorage.setItem(
    "ip_introDuration",
    String(timelineIntroDuration)
  );

  localStorage.setItem(
    "ip_outroDuration",
    String(timelineOutroDuration)
  );

  window.photoDurations =
    photoDurations;

  saveProjectPhotos();

  timelineSwapMode = false;

  clearTimelineSwapSelection();

  refreshTimelineMoveButton();

  guardedCreateVideo();

};

resetTimelineOnlyBtn.onclick = async function () {

  if (
    !confirm(
      currentLanguage === "en"
        ? "Start a new project? The current project will be cleared."
        : "Yeni bir proje başlatılsın mı? Mevcut proje temizlenecek."
    )
  ) return;

  clearTimeout(ipProjectSaveTimer);
  ipProjectSaveTimer = null;

  selectedPhotos = [];
  photoCaptions = [];
  photoDurations = [];

  window.selectedPhotos = [];
  window.photoDurations = [];

  selectedPhotoTotal = 0;

  photosInput.value = "";
  photoTextList.innerHTML = "";

  timelineSwapMode = false;
  clearTimelineSwapSelection();
  refreshTimelineMoveButton();

  await clearIzyPostSavedProject();

  clearLastBuiltVideo();

  updatePhotoCounter();
  buildPhotoTextList();
  refreshTimelineTotalDuration();

  document.body.classList.add("ip-timeline-card-active");
  contactOverlay.style.display = "none";

  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });

};

/* ***** 20 - ARRANGE PHOTOS ***** */

arrangePhotosBtn.onclick = function () {

  if (selectedPhotos.length < 2) {
    return;
  }

  isArrangeMode = true;
  document.body.classList.add("ip-arrange-active");
  buildPhotoTextList();

};

doneArrangeBtn.onclick = function () {

  if (isTimeMode) {

    if (!validatePhotoDurationTotal(true)) {
      return;
    }

    isTimeMode = false;
    document.body.classList.remove("ip-time-active");
    savePhotoDurations();
    buildPhotoTextList();
    return;

  }

  isArrangeMode = false;
  draggedPhotoIndex = null;
    document
    .querySelectorAll(".photo-text-row.dragging")
    .forEach(function (item) {
      item.classList.remove("dragging");
    });
  document.body.classList.remove("ip-arrange-active");
  buildPhotoTextList();

};

function movePhotoToNewPosition(fromIndex, toIndex) {

  if (fromIndex === null) return;
  if (fromIndex === toIndex) return;
  if (fromIndex < 0) return;
  if (toIndex < 0) return;
  if (fromIndex >= selectedPhotos.length) return;
  if (toIndex >= selectedPhotos.length) return;

  const movedPhoto =
    selectedPhotos.splice(fromIndex, 1)[0];

  selectedPhotos.splice(toIndex, 0, movedPhoto);

  photoCaptions =
    selectedPhotos.map(function (photo) {
      return photo.caption || "";
    });

  photoDurations =
    selectedPhotos.map(function (photo) {
      return photo.duration || 10;
    });

  saveProjectPhotos();
  buildPhotoTextList();

}

function saveCurrentPhotoOrder() {

  window.selectedPhotos = selectedPhotos;

}
/* ***** 21 - PHOTO TIME ***** */

photoTimeBtn.onclick = function () {

  if (selectedPhotos.length === 0) {
    return;
  }

  loadPhotoDurations();

  isTimeMode = true;
  isArrangeMode = false;

  arrangeTitle.textContent =
    currentLanguage === "en"
      ? "Time"
      : "Süre";

  doneArrangeBtn.textContent =
    currentLanguage === "en"
      ? "Done"
      : "Tamam";

  document.body.classList.add("ip-time-active");
  buildPhotoTextList();

};

function loadPhotoDurations() {

  photoDurations =
    selectedPhotos.map(function (photo) {
      return photo.duration || 10;
    });

  window.photoDurations = photoDurations;

}

function savePhotoDurations() {

  window.photoDurations = photoDurations;

}

function refreshVideoBuildCardLanguage() {

  if (!videoBuildTitle) {
    return;
  }

  const videoReady =
    Boolean(ipLastBuiltVideoUrl) &&
    preview.style.display === "block";

  videoBuildTitle.textContent =
    videoReady
      ? (
          currentLanguage === "en"
            ? "Your Video"
            : "Videonuz"
        )
      : (
          currentLanguage === "en"
            ? "Creating Video"
            : "Video Oluşturuluyor"
        );

  viewLastVideoBtn.textContent =
    currentLanguage === "en"
      ? "Video Album"
      : "Video Albümü";

  closeVideoBuildCardBtn.textContent =
    currentLanguage === "en"
      ? "Close"
      : "Kapat";

  cancelVideoBuildBtn.textContent =
    currentLanguage === "en"
      ? "Cancel"
      : "İptal";

  download.textContent =
    currentLanguage === "en"
      ? "Download Video"
      : "Videoyu İndir";

}

function openVideoBuildCard(buildingMode) {

  if (
    videoBuildCard.parentElement !==
    document.body
  ) {

    document.body.insertBefore(
      videoBuildCard,
      document.body.firstChild
    );

  }

  videoBuildCard.classList.add(
    "open"
  );

  contactOverlay.style.display =
    "block";

  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });

  if (buildingMode) {

    buildingBox.style.display =
      "block";

    cancelVideoBuildBtn.classList.add(
      "visible"
    );

    preview.pause();
    preview.style.display =
      "none";

    download.style.display =
      "none";

    videoBuildActions.classList.remove(
      "ready"
    );

    videoBuildTitle.textContent =
      currentLanguage === "en"
        ? "Creating Video"
        : "Video Oluşturuluyor";

  } else {

    buildingBox.style.display =
      "none";

    cancelVideoBuildBtn.classList.remove(
      "visible"
    );

    preview.style.display =
      "block";

    download.style.display =
      "block";

    videoBuildActions.classList.add(
      "ready"
    );

    videoBuildTitle.textContent =
      currentLanguage === "en"
        ? "Your Video"
        : "Videonuz";

  }

  refreshVideoBuildCardLanguage();

}

function closeVideoBuildCard() {

  preview.pause();

  videoBuildCard.classList.remove(
    "open"
  );

  contactOverlay.style.display =
    "none";

  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });

}

function refreshVideoAlbumLanguage() {

  viewLastVideoBtn.textContent =
    currentLanguage === "en"
      ? "Video Album"
      : "Video Albümü";

  videoAlbumTitle.textContent =
    currentLanguage === "en"
      ? "Video Album"
      : "Video Albümü";

  closeVideoAlbumBtn.textContent =
    currentLanguage === "en"
      ? "Close"
      : "Kapat";

  const selectedCount =
    selectedVideoAlbumIds.size;

  deleteSelectedVideosBtn.textContent =
    currentLanguage === "en"
      ? (
          "Delete Selected (" +
          selectedCount +
          ")"
        )
      : (
          "Seçilenleri Sil (" +
          selectedCount +
          ")"
        );

}

function formatVideoAlbumDate(
  createdAt
) {

  return new Intl.DateTimeFormat(
    currentLanguage === "en"
      ? "en-GB"
      : "tr-TR",
    {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit"
    }
  ).format(
    new Date(createdAt)
  );

}

function safeVideoDownloadName(
  albumItem
) {

  const safeName =
    String(
      albumItem.name ||
      "IzyPost Video"
    )
      .replace(
        /[\\/:*?"<>|]+/g,
        "-"
      )
      .trim();

  return (
    safeName +
    "." +
    (
      albumItem.extension ||
      "mp4"
    )
  );

}

function buildVideoAlbumList() {

  videoAlbumList.innerHTML =
    "";

  if (
    ipBuiltVideoAlbum.length === 0
  ) {

    const emptyMessage =
      document.createElement(
        "div"
      );

    emptyMessage.className =
      "video-album-empty";

    emptyMessage.textContent =
      currentLanguage === "en"
        ? "No videos have been created yet."
        : "Henüz oluşturulmuş video yok.";

    videoAlbumList.appendChild(
      emptyMessage
    );

    refreshVideoAlbumLanguage();

    return;

  }

  ipBuiltVideoAlbum.forEach(
    function (albumItem, index) {

      const item =
        document.createElement(
          "div"
        );

      item.className =
        "video-album-item";

      const thumbnailButton =
        document.createElement(
          "button"
        );

      thumbnailButton.type =
        "button";

      thumbnailButton.className =
        "video-album-thumbnail";

      const thumbnailImage =
        document.createElement(
          "img"
        );

      thumbnailImage.alt =
        albumItem.name || "Video";

      thumbnailImage.src =
        albumItem.thumbnail ||
        getDefaultIzyPostLogoSrc();

      const playMark =
        document.createElement(
          "span"
        );

      playMark.className =
        "video-album-play-mark";

      playMark.textContent =
        "▶";

      thumbnailButton.appendChild(
        thumbnailImage
      );

      thumbnailButton.appendChild(
        playMark
      );

      const info =
        document.createElement(
          "div"
        );

      info.className =
        "video-album-info";

      const name =
        document.createElement(
          "div"
        );

      name.className =
        "video-album-name";

      name.textContent =
        albumItem.name;

      const date =
        document.createElement(
          "div"
        );

      date.className =
        "video-album-date";

      date.textContent =
        formatVideoAlbumDate(
          albumItem.createdAt
        );

      info.appendChild(name);
      info.appendChild(date);

      const actions =
        document.createElement(
          "div"
        );

      actions.className =
        "video-album-actions";

      const playBtn =
        document.createElement(
          "button"
        );

      playBtn.type =
        "button";

      playBtn.className =
        "video-album-play";

      playBtn.textContent =
        currentLanguage === "en"
          ? "Play"
          : "Oynat";

      const downloadLink =
        document.createElement(
          "a"
        );

      downloadLink.className =
        "video-album-download";

      downloadLink.href =
        albumItem.url;

      downloadLink.download =
        safeVideoDownloadName(
          albumItem
        );

      downloadLink.textContent =
        currentLanguage === "en"
          ? "Download"
          : "İndir";

      const renameBtn =
        document.createElement(
          "button"
        );

      renameBtn.type =
        "button";

      renameBtn.className =
        "video-album-rename";

      renameBtn.textContent =
        currentLanguage === "en"
          ? "Rename"
          : "Adlandır";

      const selectBtn =
        document.createElement(
          "button"
        );

      selectBtn.type =
        "button";

      selectBtn.className =
        "video-album-select";

      const isSelected =
        selectedVideoAlbumIds.has(
          albumItem.id
        );

      if (isSelected) {

        item.classList.add(
          "multi-selected"
        );

        selectBtn.classList.add(
          "selected"
        );

      }

      selectBtn.textContent =
        isSelected
          ? (
              currentLanguage === "en"
                ? "Selected"
                : "Seçildi"
            )
          : (
              currentLanguage === "en"
                ? "Select"
                : "Seç"
            );

      const deleteBtn =
        document.createElement(
          "button"
        );

      deleteBtn.type =
        "button";

      deleteBtn.className =
        "video-album-delete";

      deleteBtn.textContent =
        currentLanguage === "en"
          ? "Delete"
          : "Sil";

      const player =
        document.createElement(
          "video"
        );

      player.className =
        "video-album-player";

      player.controls = true;
      player.playsInline = true;
      player.preload = "metadata";
      player.src = albumItem.url;

      function togglePlayer() {

        document
          .querySelectorAll(
            "#videoAlbumList video"
          )
          .forEach(
            function (otherPlayer) {

              if (
                otherPlayer !== player
              ) {
                otherPlayer.pause();
                otherPlayer.classList.remove(
                  "open"
                );
              }

            }
          );

        if (
          player.classList.contains(
            "open"
          )
        ) {

          player.pause();

          player.classList.remove(
            "open"
          );

          return;

        }

        player.classList.add(
          "open"
        );

        player.play().catch(
          function () {}
        );

      }

      thumbnailButton.onclick =
        togglePlayer;

      playBtn.onclick =
        togglePlayer;

      renameBtn.onclick =
        async function () {

          const newName =
            prompt(
              currentLanguage === "en"
                ? "Enter the new video name:"
                : "Yeni video adını yazın:",
              albumItem.name
            );

          if (
            newName === null ||
            !newName.trim()
          ) {
            return;
          }

          albumItem.name =
            newName.trim();

          await saveVideoLibraryRecord({
            id: albumItem.id,
            name: albumItem.name,
            extension:
              albumItem.extension,
            createdAt:
              albumItem.createdAt,
            thumbnail:
              albumItem.thumbnail,
            blob:
              albumItem.blob
          });

          buildVideoAlbumList();

        };

      selectBtn.onclick =
        function () {

          if (
            selectedVideoAlbumIds.has(
              albumItem.id
            )
          ) {

            selectedVideoAlbumIds.delete(
              albumItem.id
            );

          } else {

            selectedVideoAlbumIds.add(
              albumItem.id
            );

          }

          buildVideoAlbumList();

        };

      deleteBtn.onclick =
        async function () {

          const confirmed =
            confirm(
              currentLanguage === "en"
                ? "Delete this video permanently?"
                : "Bu video kalıcı olarak silinsin mi?"
            );

          if (!confirmed) {
            return;
          }

          player.pause();

          await deleteVideoLibraryRecord(
            albumItem.id
          );

          selectedVideoAlbumIds.delete(
            albumItem.id
          );

          if (albumItem.url) {
            URL.revokeObjectURL(
              albumItem.url
            );
          }

          ipBuiltVideoAlbum.splice(
            index,
            1
          );

          const newestVideo =
            ipBuiltVideoAlbum[0];

          ipLastBuiltVideoUrl =
            newestVideo
              ? newestVideo.url
              : "";

          ipLastBuiltVideoExtension =
            newestVideo
              ? newestVideo.extension
              : "mp4";

          viewLastVideoBtn.style.display =
            ipBuiltVideoAlbum.length
              ? "block"
              : "none";

          buildVideoAlbumList();

          if (
            ipBuiltVideoAlbum.length === 0
          ) {

            videoAlbumCard.classList.remove(
              "open"
            );

            contactOverlay.style.display =
              "none";

          }

        };

      actions.appendChild(playBtn);
      actions.appendChild(downloadLink);
      actions.appendChild(renameBtn);
      actions.appendChild(selectBtn);
      actions.appendChild(deleteBtn);

      item.appendChild(
        thumbnailButton
      );

      item.appendChild(info);
      item.appendChild(actions);
      item.appendChild(player);

      videoAlbumList.appendChild(
        item
      );

    }
  );

  deleteSelectedVideosBtn.classList.toggle(
    "visible",
    selectedVideoAlbumIds.size > 0
  );

  refreshVideoAlbumLanguage();

}

deleteSelectedVideosBtn.onclick =
  async function () {

    const selectedIds =
      Array.from(
        selectedVideoAlbumIds
      );

    if (!selectedIds.length) {
      return;
    }

    const confirmed =
      confirm(
        currentLanguage === "en"
          ? (
              "Delete " +
              selectedIds.length +
              " selected videos permanently?"
            )
          : (
              selectedIds.length +
              " seçili video kalıcı olarak silinsin mi?"
            )
      );

    if (!confirmed) {
      return;
    }

    document
      .querySelectorAll(
        "#videoAlbumList video"
      )
      .forEach(
        function (videoElement) {
          videoElement.pause();
        }
      );

    for (
      const selectedId
      of selectedIds
    ) {

      await deleteVideoLibraryRecord(
        selectedId
      );

    }

    ipBuiltVideoAlbum =
      ipBuiltVideoAlbum.filter(
        function (albumItem) {

          if (
            !selectedVideoAlbumIds.has(
              albumItem.id
            )
          ) {
            return true;
          }

          if (albumItem.url) {

            URL.revokeObjectURL(
              albumItem.url
            );

          }

          return false;

        }
      );

    selectedVideoAlbumIds.clear();

    const newestVideo =
      ipBuiltVideoAlbum[0];

    ipLastBuiltVideoUrl =
      newestVideo
        ? newestVideo.url
        : "";

    ipLastBuiltVideoExtension =
      newestVideo
        ? newestVideo.extension
        : "mp4";

    viewLastVideoBtn.style.display =
      ipBuiltVideoAlbum.length
        ? "block"
        : "none";

    if (
      ipBuiltVideoAlbum.length === 0
    ) {

      closeVideoAlbum();

      return;

    }

    buildVideoAlbumList();

  };

function openVideoAlbum() {

  if (
    ipBuiltVideoAlbum.length === 0
  ) {
    return;
  }

  document.body.classList.remove(
    "ip-timeline-card-active"
  );

  selectedVideoAlbumIds.clear();

  if (
    videoAlbumCard.parentElement !==
    document.body
  ) {

    document.body.insertBefore(
      videoAlbumCard,
      document.body.firstChild
    );

  }

  buildVideoAlbumList();

  videoAlbumCard.classList.add(
    "open"
  );

  contactOverlay.style.display =
    "block";

  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });

}

function closeVideoAlbum() {

  selectedVideoAlbumIds.clear();

  deleteSelectedVideosBtn.classList.remove(
    "visible"
  );

  document
    .querySelectorAll("#videoAlbumList video")
    .forEach(function (videoElement) {
      videoElement.pause();
    });

  videoAlbumCard.classList.remove(
    "open"
  );

  document.body.classList.add(
    "ip-timeline-card-active"
  );

  contactOverlay.style.display =
    "none";

  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });

}

function clearLastBuiltVideo() {

  preview.pause();

  ipBuiltVideoAlbum.forEach(
    function (albumItem) {

      if (albumItem.url) {
        URL.revokeObjectURL(
          albumItem.url
        );
      }

    }
  );

  ipBuiltVideoAlbum =
    [];

  selectedVideoAlbumIds.clear();

  ipLastBuiltVideoUrl =
    "";

  ipLastBuiltVideoExtension =
    "mp4";

  preview.removeAttribute(
    "src"
  );

  preview.load();

  download.removeAttribute(
    "href"
  );

  download.style.display =
    "none";

  buildingBox.style.display =
    "none";

  videoBuildActions.classList.remove(
    "ready"
  );

  viewLastVideoBtn.style.display =
    "none";

  videoBuildCard.classList.remove(
    "open"
  );

  videoAlbumCard.classList.remove(
    "open"
  );

  videoAlbumList.innerHTML =
    "";

}

window.handleIzyPostVideoReady =
  async function (
    videoUrl,
    videoExtension
  ) {

    ipLastBuiltVideoUrl =
      videoUrl;

    ipLastBuiltVideoExtension =
      videoExtension || "mp4";

    openVideoBuildCard(
      false
    );

    try {

      const response =
        await fetch(videoUrl);

      const videoBlob =
        await response.blob();

      const createdAt =
        Date.now();

      const thumbnail =
        await createVideoThumbnail(
          videoBlob
        );

      const record = {
        id:
          makeVideoLibraryId(),

        name:
          makeDefaultVideoName(
            createdAt
          ),

        extension:
          videoExtension || "mp4",

        createdAt:
          createdAt,

        thumbnail:
          thumbnail,

        blob:
          videoBlob
      };

      await saveVideoLibraryRecord(
        record
      );

      ipBuiltVideoAlbum.unshift({
        id: record.id,
        name: record.name,
        extension:
          record.extension,
        createdAt:
          record.createdAt,
        thumbnail:
          record.thumbnail,
        blob:
          record.blob,
        url:
          URL.createObjectURL(
            record.blob
          )
      });

      viewLastVideoBtn.style.display =
        "block";

      buildVideoAlbumList();

    } catch (error) {

      console.error(
        "Video library save failed:",
        error
      );

      alert(
        currentLanguage === "en"
          ? "The video was created, but it could not be saved in the Video Album."
          : "Video oluşturuldu ancak Video Albümüne kaydedilemedi."
      );

    }

  };

cancelVideoBuildBtn.onclick =
  function () {

    if (
      typeof window.cancelIzyPostVideoCreation ===
      "function"
    ) {

      window.cancelIzyPostVideoCreation();

    }

    cancelVideoBuildBtn.classList.remove(
      "visible"
    );

    buildingBox.style.display =
      "none";

    updateProgress(0);

    closeVideoBuildCard();

  };

closeVideoBuildCardBtn.onclick =
  function () {

    closeVideoBuildCard();

  };

closeVideoAlbumBtn.onclick =
  function () {

    closeVideoAlbum();

  };

viewLastVideoBtn.onclick =
  function () {

    openVideoAlbum();

  };

download.addEventListener(
  "click",
  function () {

    setTimeout(
      function () {

        closeVideoBuildCard();

      },
      250
    );

  }
);

xLangBtn.addEventListener(
  "click",
  function () {

    setTimeout(
      function () {

        refreshVideoBuildCardLanguage();
        refreshVideoAlbumLanguage();
        refreshTimelineLivePreviewLanguage();

        if (
          videoAlbumCard.classList.contains(
            "open"
          )
        ) {
          buildVideoAlbumList();
        }

      },
      0
    );

  }
);

refreshVideoBuildCardLanguage();

loadPersistentVideoAlbum();

/* ***** INTEGRATED 2026 HOME DASHBOARD CONTROL ***** */

const ipHomeLanguageBtn =
  document.getElementById(
    "ipHomeLanguageBtn"
  );

const ipHomeTagline =
  document.getElementById(
    "ipHomeTagline"
  );

function refreshIzyPostHomeLanguage() {

  const isTurkish =
    currentLanguage === "tr";

  document
    .querySelectorAll(
      "[data-home-en][data-home-tr]"
    )
    .forEach(
      function (element) {

        element.textContent =
          isTurkish
            ? element.dataset.homeTr
            : element.dataset.homeEn;

      }
    );

  if (
    ipHomeLanguageBtn
  ) {

    ipHomeLanguageBtn.textContent =
      isTurkish
        ? "EN"
        : "TR";

  }

  if (
    ipHomeTagline
  ) {

    ipHomeTagline.textContent =
      isTurkish
        ? "Akıllı Video Oluşturucu"
        : "Smart Video Creator";

  }

  refreshIzyPostCardLanguageButtons();

}

function refreshIzyPostCardLanguageButtons() {

  document
    .querySelectorAll(
      ".ip-card-language-btn"
    )
    .forEach(
      function (
        button
      ) {

        button.textContent =
          currentLanguage === "tr"
            ? "🌐 EN"
            : "🌐 TR";

        button.setAttribute(
          "aria-label",
          currentLanguage === "tr"
            ? "Change language to English"
            : "Dili Türkçe olarak değiştir"
        );

        button.title =
          currentLanguage === "tr"
            ? "English"
            : "Türkçe";

      }
    );

}

function installIzyPostCardLanguageButtons() {

  const cardSelectors = [
    "#contactCardBox",
    "#outputSettingsBox",
    "#textSettingsBox",
    "#introPreviewBox",
    "#outroSettingsBox",
    "#transitionBox",
    "#musicSettingsBox",
    "#freePhotosBox",
    "#textLogoMakerBox",
    "#photoPreviewBox",
    "#templateLibraryBox",
    "#videoAlbumCard",
    "#videoBuildCard"
  ];

  cardSelectors.forEach(
    function (
      selector
    ) {

      const card =
        document.querySelector(
          selector
        );

      if (
        !card ||
        card.querySelector(
          ":scope > .ip-card-language-btn"
        )
      ) {
        return;
      }

      card.classList.add(
        "ip-language-card-host"
      );

      const languageButton =
        document.createElement(
          "button"
        );

      languageButton.type =
        "button";

      languageButton.className =
        "ip-card-language-btn";

      languageButton.addEventListener(
        "click",
        function (
          event
        ) {

          event.preventDefault();
          event.stopPropagation();

          if (
            xLangBtn
          ) {

            xLangBtn.click();

          }

          setTimeout(
            function () {

              refreshIzyPostHomeLanguage();
              refreshIzyPostCardLanguageButtons();

            },
            0
          );

        }
      );

      card.appendChild(
        languageButton
      );

    }
  );

  refreshIzyPostCardLanguageButtons();

}

function runIzyPostHomeAction(
  action
) {

  if (
    action === "information"
  ) {

    contactCardBtn.click();
    return;

  }

  if (
    action === "output"
  ) {

    outputSettingsBtn.click();
    return;

  }

  if (
    action === "media"
  ) {

    photosInput.click();
    return;

  }

  if (
    action === "free-media"
  ) {

    freePhotosBtn.click();
    return;

  }

  if (
    action === "intro"
  ) {

    textSettingsBtn.click();
    return;

  }

  if (
    action === "outro"
  ) {

    outroSettingsBtn.click();
    return;

  }

  if (
    action === "timeline"
  ) {

    openTimelineCardBtn.click();
    return;

  }

  if (
    action === "music"
  ) {

    musicSettingsBtn.click();
    return;

  }

  if (
    action === "album"
  ) {

    openVideoAlbum();
    return;

  }

  if (
    action === "create"
  ) {

    guardedCreateVideo();

  }

}

document
  .querySelectorAll(
    "[data-home-action]"
  )
  .forEach(
    function (element) {

      element.addEventListener(
        "click",
        function () {

          runIzyPostHomeAction(
            element.dataset.homeAction
          );

        }
      );

    }
  );

if (
  ipHomeLanguageBtn
) {

  ipHomeLanguageBtn.addEventListener(
    "click",
    function () {

      xLangBtn.click();

      setTimeout(
        refreshIzyPostHomeLanguage,
        0
      );

    }
  );

}

installIzyPostCardLanguageButtons();

refreshIzyPostHomeLanguage();

/* ***** 219 - START DIRECTLY IN TIMELINE WORKSPACE ***** */

setTimeout(
  function () {

    openTimelineCardBtn.click();

  },
  0
);


function guardedCreateVideo() {

  loadPhotoDurations();

  const invalidCaptionIndex =
    selectedPhotos.findIndex(
      function (file, index) {

        return !mediaCaptionFitsDuration(
          file,
          index
        );

      }
    );

  if (invalidCaptionIndex >= 0) {

    const file =
      selectedPhotos[invalidCaptionIndex];

    const used =
      (file.caption || "").length;

    const limit =
      getMediaCaptionLimit(
        file,
        invalidCaptionIndex
      );

    alert(
      currentLanguage === "en"
        ? "Media " +
          (invalidCaptionIndex + 1) +
          " has " +
          used +
          " characters, but its scene time allows " +
          limit +
          "."
        : (invalidCaptionIndex + 1) +
          ". medyada " +
          used +
          " karakter var. Sahne süresi en fazla " +
          limit +
          " karaktere izin veriyor."
    );

    return;

  }

  window.selectedPhotos =
    selectedPhotos;

  window.photoDurations =
    photoDurations;

  /*
    The obsolete background-music input remains empty.
    Version 14 reads only ipBackgroundMusicTrack.
  */

  window.selectedMusicUrl =
    "";

  window.selectedMusicName =
    "";

  openVideoBuildCard(
    true
  );

  createVideo();

}

function validatePhotoDurationTotal() {

  savePhotoDurations();
  return true;

}
/* ***** FREE MEDIA SEARCH ***** */

freePhotosTabBtn.onclick = function () {

  previewFreeVideoObject = null;

  freeMediaMode = "photo";
  freePhotosTabBtn.classList.add("active");
  freeVideosTabBtn.classList.remove("active");

  freePhotoResults = [];
  selectedFreePhotos = [];
  selectedFreeVideos = [];
  freePhotoCropMap = {};
  currentSearchQuery = "";
  currentSearchPage = 1;

  freePhotoSearchInput.placeholder =
    currentLanguage === "en"
      ? "Search free photos"
      : "Ücretsiz fotoğraf ara";

  freePhotoSearchInput.value =
    FREE_MEDIA_RANDOM_QUERIES[
      Math.floor(
        Math.random() *
        FREE_MEDIA_RANDOM_QUERIES.length
      )
    ];

  runFreePhotoSearch(false);

};

freeVideosTabBtn.onclick = function () {

  previewFreeVideoObject = null;

  freeMediaMode = "video";
  freePhotosTabBtn.classList.remove("active");
  freeVideosTabBtn.classList.add("active");

  freePhotoResults = [];
  selectedFreePhotos = [];
  selectedFreeVideos = [];
  freePhotoCropMap = {};
  currentSearchQuery = "";
  currentSearchPage = 1;

  freePhotoSearchInput.placeholder =
    currentLanguage === "en"
      ? "Search free videos"
      : "Ücretsiz video ara";

  freePhotoSearchInput.value =
    FREE_MEDIA_RANDOM_QUERIES[
      Math.floor(
        Math.random() *
        FREE_MEDIA_RANDOM_QUERIES.length
      )
    ];

  runFreePhotoSearch(false);

};

freePhotoSearchBtn.onclick = function () {
  runFreePhotoSearch(false);
};

loadMoreFreePhotosBtn.onclick =
function(){

  runFreePhotoSearch(true);

};

freePhotoSearchInput.addEventListener(
  "keydown",
  function(e){

    if(e.key==="Enter"){
      runFreePhotoSearch(false);
    }

});

function runFreePhotoSearch(loadMore=false){

  previewFreeVideoObject = null;

  const query =
    freePhotoSearchInput.value.trim();

  if(!query){
    return;
  }

  if(
      !loadMore ||
      query !== currentSearchQuery
    ){

      currentSearchQuery = query;
      currentSearchPage = 1;
      freePhotoResults = [];

  }else{

      currentSearchPage++;

  }

  freePhotosStatus.innerHTML =
    currentLanguage==="en"
    ? "Searching..."
    : "Aranıyor...";

  fetch(
    "/Supports/free-photo-search.php?q="
    +
    encodeURIComponent(query)
    +
    "&page=" + currentSearchPage + "&per_page=9" +
    "&type=" + encodeURIComponent(freeMediaMode) +
    "&size=" +
    encodeURIComponent(
      document.querySelector('input[name="videoSize"]:checked')?.value || "4:5"
    )
  )

  .then(r=>r.json())

  .then(function(data){

      if (loadMore) {
        previewFreePhotoUrl = null;
        previewFreeVideoObject = null;
        freePhotoPreviewBox.style.display = "none";
      }

      freePhotoResults = data;

      renderFreePhotos();

      if (freePhotoResults.length === 0) {

        freePhotosStatus.innerHTML =
          currentLanguage === "en"
            ? "No media was found for your search."
            : "Aramanız için medya bulunamadı.";

      } else {

        freePhotosStatus.innerHTML =
          currentLanguage === "en"
            ? freePhotoResults.length + " " + (freeMediaMode === "video" ? "videos" : "photos")
            : freePhotoResults.length + " " + (freeMediaMode === "video" ? "video" : "fotoğraf");

      }

  })

  .catch(function(){

      freePhotosStatus.innerHTML =
      "Connection error";

  });

}
function applyFreePhotoPreviewRatio() {

  if (logoBackgroundSelectMode) {
    freePhotoCropFrame.style.aspectRatio = "1 / 1";
    return;
  }

  const selected =
    document.querySelector(
      'input[name="videoSize"]:checked'
    );

  const size =
    selected ? selected.value : "4:5";

  if (size === "1:1") {
    freePhotoCropFrame.style.aspectRatio = "1 / 1";
  } else if (size === "9:16") {
    freePhotoCropFrame.style.aspectRatio = "9 / 16";
  } else if (size === "16:9") {
    freePhotoCropFrame.style.aspectRatio = "16 / 9";
  } else {
    freePhotoCropFrame.style.aspectRatio = "4 / 5";
  }

}

function updateFreeVideoTrimInfo() {

  if (!freeVideoTrimInfo) return;

  freeVideoTrimInfo.textContent =
    currentLanguage === "en"
      ? "Start: " + freeVideoTrimStart.toFixed(1) + "s / End: " + freeVideoTrimEnd.toFixed(1) + "s"
      : "Başlangıç: " + freeVideoTrimStart.toFixed(1) + "sn / Bitiş: " + freeVideoTrimEnd.toFixed(1) + "sn";

}

function normalizeFreeVideoTrim() {

  if (freeVideoTrimEnd <= freeVideoTrimStart) {
    freeVideoTrimEnd = freeVideoTrimStart + 1;
  }

  if (freeVideoRealDuration > 0 && freeVideoTrimEnd > freeVideoRealDuration) {
    freeVideoTrimEnd = freeVideoRealDuration;
  }

  if (freeVideoTrimEnd <= freeVideoTrimStart) {
    freeVideoTrimStart = Math.max(0, freeVideoTrimEnd - 1);
  }

  updateFreeVideoTrimInfo();

}

function renderFreePhotos(){

  freePhotosGrid.innerHTML = "";

  freePhotoPreviewBox.style.display = "none";

  freePhotoResults.forEach(function(photo){

      const card =
        document.createElement("div");

      card.className = "photo-card";
      card.dataset.freeMediaUrl = photo.url;

      const videoIsSelected =
        freeMediaMode === "video" &&
        selectedFreeVideos.some(function(item){
          return item.url === photo.url;
        });

      const videoIsPlaying =
        freeMediaMode === "video" &&
        previewFreeVideoObject &&
        previewFreeVideoObject.url === photo.url &&
        !videoIsSelected;

      if(
        freeMediaMode === "photo" &&
        selectedFreePhotos.includes(photo.url)
      ){
        card.classList.add("selected");
      }

      if(videoIsSelected){
        card.classList.add("selected");
      }

      if(videoIsPlaying){
        card.classList.add(
          "free-video-playing"
        );
      }

      let mediaElement;

      if(videoIsPlaying){

        const video =
          document.createElement("video");

        video.className =
          "free-grid-video";

        video.src =
          photo.url;

        video.poster =
          photo.thumbnail || "";

        video.controls = true;
        video.playsInline = true;
        video.preload = "metadata";

        mediaElement = video;

      } else {

        const img =
          document.createElement("img");

        img.src =
          photo.thumbnail || photo.url;

        mediaElement = img;

      }

      const check =
        document.createElement("div");

      check.className = "photo-check";
      check.innerHTML = "✓";

      if (
        freeMediaMode === "video" &&
        !videoIsPlaying
      ) {

        const badge =
          document.createElement("div");

        badge.className = "video-badge";
        badge.innerHTML = "▶";

        card.appendChild(badge);

      }

      card.onclick = async function(event){

        if (
          event.target.closest(
            ".free-grid-video"
          )
        ) {

          if (
            previewFreeVideoObject &&
            previewFreeVideoObject.url ===
              photo.url
          ) {

            if (
              selectedPhotos.length +
              selectedFreePhotos.length +
              selectedFreeVideos.length >=
              IP_MAX_TIMELINE_MEDIA
            ) {
              showTimelineLimitAlert();
              return;
            }

            selectedFreeVideos.push({
              url: photo.url,
              thumbnail:
                photo.thumbnail || "",
              startTime: 0,
              endTime: 0,
              duration:
                Number(photo.duration) || 10
            });

            previewFreeVideoObject = null;

            renderFreePhotos();

          }

          return;

        }

        if (
          freeMediaMode === "photo" &&
          !logoBackgroundSelectMode
        ) {

          if (
            selectedFreePhotos.includes(
              photo.url
            )
          ) {

            selectedFreePhotos =
              selectedFreePhotos.filter(
                function(item){
                  return item !== photo.url;
                }
              );

          } else {

            if (
              selectedPhotos.length +
              selectedFreePhotos.length +
              selectedFreeVideos.length >=
              IP_MAX_TIMELINE_MEDIA
            ) {
              showTimelineLimitAlert();
              return;
            }

            selectedFreePhotos.push(
              photo.url
            );

          }

          previewFreePhotoUrl = null;

          renderFreePhotos();

          return;

        }

        if (
          freeMediaMode === "video" &&
          videoIsSelected
        ) {

          selectedFreeVideos =
            selectedFreeVideos.filter(
              function(item){
                return item.url !== photo.url;
              }
            );

          previewFreeVideoObject = null;

          renderFreePhotos();

          return;

        }

        if (freeMediaMode === "video") {

          if (
            previewFreeVideoObject &&
            previewFreeVideoObject.url ===
              photo.url
          ) {

            if (
              selectedPhotos.length +
              selectedFreePhotos.length +
              selectedFreeVideos.length >=
              IP_MAX_TIMELINE_MEDIA
            ) {
              showTimelineLimitAlert();
              return;
            }

            selectedFreeVideos.push({
              url: photo.url,
              thumbnail:
                photo.thumbnail || "",
              startTime: 0,
              endTime: 0,
              duration:
                Number(photo.duration) || 10
            });

            previewFreeVideoObject = null;

            renderFreePhotos();

            return;

          }

          previewFreePhotoUrl = null;

          previewFreeVideoObject = {
            url: photo.url,
            thumbnail:
              photo.thumbnail || "",
            duration:
              Number(photo.duration) || 10
          };

          renderFreePhotos();

          requestAnimationFrame(
            function(){

              const cards =
                freePhotosGrid.querySelectorAll(
                  ".photo-card"
                );

              cards.forEach(
                function(resultCard){

                  if (
                    resultCard.dataset
                      .freeMediaUrl !==
                    photo.url
                  ) {
                    return;
                  }

                  const video =
                    resultCard.querySelector(
                      ".free-grid-video"
                    );

                  if (!video) {
                    return;
                  }

                  const playPromise =
                    video.play();

                  if (
                    playPromise &&
                    typeof playPromise.catch ===
                      "function"
                  ) {
                    playPromise.catch(
                      function(){}
                    );
                  }

                }
              );

            }
          );

          return;

        }

        if (logoBackgroundSelectMode) {

          const confirmation =
            showLogoBackgroundConfirmation();

          freeCropX = 50;
          freeCropY = 50;

          const croppedPhoto =
            await createFreeCroppedImage(
              photo.url
            );

          if (!croppedPhoto) {

            hideLogoBackgroundConfirmation();

            return;

          }

          logoState.backgroundImage =
            croppedPhoto;

          loadLogoBackgroundImage(
            croppedPhoto
          );

          freePhotoPreviewBox.style.display =
            "none";

          freePhotoPreviewImage.src = "";

          previewFreePhotoUrl = null;

          freePhotosBox.style.display =
            "none";

          textLogoMakerBox.style.display =
            "block";

          contactOverlay.style.display =
            "block";

          resetFreePhotosPanel();

          requestAnimationFrame(
            function () {

              textLogoMakerBox.scrollIntoView({
                behavior: "smooth",
                block: "start"
              });

            }
          );

          setTimeout(
            function () {

              hideLogoBackgroundConfirmation();

            },
            1400
          );

          return;

        }

      };

      card.appendChild(mediaElement);
      card.appendChild(check);

      freePhotosGrid.appendChild(card);

  });

}


async function createFreeCroppedImage(photoUrl) {

  const response =
    await fetch(
      "/Supports/free-photo-search.php?image="
      +
      encodeURIComponent(photoUrl)
    );

  const data =
    await response.json();

  if (!data.dataUrl) {
    return null;
  }

  return new Promise(function(resolve){

    const img = new Image();

    img.onload = function(){

      const outputSize =
        getIntroPreviewOutputSize();

      const frameWidth =
        outputSize.width;

      const frameHeight =
        outputSize.height;

      const cropCanvas =
        document.createElement("canvas");

      const cropCtx =
        cropCanvas.getContext("2d");

      cropCanvas.width = frameWidth;
      cropCanvas.height = frameHeight;

      const scale =
        Math.max(
          frameWidth / img.naturalWidth,
          frameHeight / img.naturalHeight
        );

      const sourceWidth =
        frameWidth / scale;

      const sourceHeight =
        frameHeight / scale;

      const sourceX =
        (img.naturalWidth - sourceWidth) *
        (freeCropX / 100);

      const sourceY =
        (img.naturalHeight - sourceHeight) *
        (freeCropY / 100);

      cropCtx.drawImage(
        img,
        sourceX,
        sourceY,
        sourceWidth,
        sourceHeight,
        0,
        0,
        frameWidth,
        frameHeight
      );

      resolve(
        cropCanvas.toDataURL("image/jpeg", 0.98)
      );

    };

    img.src = data.dataUrl;

  });

}

function updateFreeCropPosition() {

  freePhotoPreviewImage.style.objectPosition =
    freeCropX + "% " + freeCropY + "%";

}

freePhotoCropFrame.onpointerdown = function(e){

  freeCropDragging = true;

  freeCropStartX = e.clientX;
  freeCropStartY = e.clientY;

  freeCropStartValueX = freeCropX;
  freeCropStartValueY = freeCropY;

  freePhotoCropFrame.style.cursor = "grabbing";

  if (freePhotoCropFrame.setPointerCapture) {
    freePhotoCropFrame.setPointerCapture(e.pointerId);
  }

  e.preventDefault();

};

freePhotoCropFrame.onpointermove = function(e){

  if (!freeCropDragging) return;

  const frameWidth =
    freePhotoCropFrame.clientWidth || 1;

  const frameHeight =
    freePhotoCropFrame.clientHeight || 1;

  freeCropX =
    freeCropStartValueX -
    ((e.clientX - freeCropStartX) / frameWidth) * 100;

  freeCropY =
    freeCropStartValueY -
    ((e.clientY - freeCropStartY) / frameHeight) * 100;

  if (freeCropX < 0) freeCropX = 0;
  if (freeCropX > 100) freeCropX = 100;
  if (freeCropY < 0) freeCropY = 0;
  if (freeCropY > 100) freeCropY = 100;

  updateFreeCropPosition();

  e.preventDefault();

};

freePhotoCropFrame.onpointerup = function(){

  freeCropDragging = false;
  freePhotoCropFrame.style.cursor = "grab";

};

freePhotoCropFrame.onpointercancel = function(){

  freeCropDragging = false;
  freePhotoCropFrame.style.cursor = "grab";

};

setFreeVideoStartBtn.onclick = function () {

  if (freeMediaMode !== "video") return;

  freeVideoTrimStart =
    Math.max(0, freeVideoPreviewPlayer.currentTime || 0);

  if (freeVideoTrimEnd <= freeVideoTrimStart) {
    freeVideoTrimEnd =
      Math.min(
        freeVideoTrimStart + 1,
        freeVideoRealDuration || freeVideoTrimStart + 1
      );
  }

  normalizeFreeVideoTrim();

};

setFreeVideoEndBtn.onclick = function () {

  if (freeMediaMode !== "video") return;

  freeVideoTrimEnd =
    Math.max(0, freeVideoPreviewPlayer.currentTime || 0);

  normalizeFreeVideoTrim();

};

function showLogoBackgroundConfirmation(){

  let confirmation =
    document.getElementById(
      "logoBackgroundConfirmation"
    );

  if (!confirmation) {

    confirmation =
      document.createElement("div");

    confirmation.id =
      "logoBackgroundConfirmation";

    confirmation.className =
      "logo-background-confirmation";

    document.body.appendChild(
      confirmation
    );

  }

  confirmation.textContent =
    currentLanguage === "en"
      ? "Your selected photo is now the logo background."
      : "Seçtiğiniz fotoğraf logo arka planı oldu.";

  confirmation.classList.add(
    "show"
  );

  return confirmation;

}

function hideLogoBackgroundConfirmation(){

  const confirmation =
    document.getElementById(
      "logoBackgroundConfirmation"
    );

  if (!confirmation) {
    return;
  }

  confirmation.classList.remove(
    "show"
  );

}

selectFreePreviewBtn.onclick = async function(){

  if (freeMediaMode === "video") {

    if (!previewFreeVideoObject) return;

    selectedFreeVideos =
      selectedFreeVideos.filter(function(item){
        return item.url !== previewFreeVideoObject.url;
      });

    previewFreeVideoObject.startTime = 0;
    previewFreeVideoObject.endTime = 0;
    previewFreeVideoObject.duration =
      Number(previewFreeVideoObject.duration) || 10;

    if (
      selectedPhotos.length +
      selectedFreePhotos.length +
      selectedFreeVideos.length >=
      IP_MAX_TIMELINE_MEDIA
    ) {
      showTimelineLimitAlert();
      return;
    }

    selectedFreeVideos.push(previewFreeVideoObject);

    freeVideoPreviewPlayer.pause();
    freeVideoPreviewPlayer.removeAttribute("src");
    freeVideoPreviewPlayer.style.display = "none";

    freePhotoPreviewBox.style.display = "none";

    previewFreeVideoObject = null;

    renderFreePhotos();

    return;

  }

  if(!previewFreePhotoUrl) return;

  if (logoBackgroundSelectMode) {

    const croppedPhoto =
      await createFreeCroppedImage(previewFreePhotoUrl);

    if (!croppedPhoto) {
      return;
    }

    logoState.backgroundImage =
      croppedPhoto;

    loadLogoBackgroundImage(croppedPhoto);

    freePhotoPreviewBox.style.display = "none";
    freePhotoPreviewImage.src = "";
    previewFreePhotoUrl = null;

    freePhotosBox.style.display = "none";
    textLogoMakerBox.style.display = "block";
    contactOverlay.style.display = "block";

    resetFreePhotosPanel();

    requestAnimationFrame(function () {

      textLogoMakerBox.scrollIntoView({
        behavior: "smooth",
        block: "start"
      });

    });

    return;

  }

  if(
    selectedFreePhotos.includes(previewFreePhotoUrl)
  ){

    selectedFreePhotos =
      selectedFreePhotos.filter(
        p => p !== previewFreePhotoUrl
      );

  } else {

    if (
      selectedPhotos.length +
      selectedFreePhotos.length +
      selectedFreeVideos.length >=
      IP_MAX_TIMELINE_MEDIA
    ) {
      showTimelineLimitAlert();
      return;
    }

    selectedFreePhotos.push(previewFreePhotoUrl);

  }

  freePhotoPreviewBox.style.display = "none";
  freePhotoPreviewImage.src = "";
  previewFreePhotoUrl = null;

  renderFreePhotos();

};

closeFreePreviewBtn.onclick = function(){

  freePhotoPreviewBox.style.display = "none";

  freePhotoPreviewImage.src = "";
  freePhotoPreviewImage.style.display = "block";

  freeVideoPreviewPlayer.pause();
  freeVideoPreviewPlayer.removeAttribute("src");
  freeVideoPreviewPlayer.style.display = "none";

  freeVideoTrimBox.style.display = "none";
  selectFreePreviewBtn.textContent =
    currentLanguage === "en"
      ? "Select"
      : "Seç";

  previewFreePhotoUrl = null;
  previewFreeVideoObject = null;

};

addFreePhotosBtn.onclick =
async function(){

  if(
    freeMediaMode === "photo" &&
    selectedFreePhotos.length === 0
  ){
    return;
  }

  if(
    freeMediaMode === "video" &&
    selectedFreeVideos.length === 0
  ){
    return;
  }

  const convertedPhotos = [];

  if (freeMediaMode === "photo") {

    for(const photoUrl of selectedFreePhotos){

        const finalPhotoUrl =
          freePhotoCropMap[photoUrl] || photoUrl;

        convertedPhotos.push({

          id:createPhotoId(),

          type:"image",

          name:"Free Photo",

          isPhonePhoto:false,

          isFreePhoto:true,

          isFreeVideo:false,

          url:finalPhotoUrl,

          originalUrl:photoUrl,

          thumbnail:photoUrl,

          caption:"",

          duration:10,

          voiceUrl:"",

          voiceText:"",

          voiceGender:
            getLastSelectedAiVoiceGender()

        });

    }

  }

  if (freeMediaMode === "video") {

    selectedFreeVideos.forEach(function(video){

      convertedPhotos.push({

        id:createPhotoId(),

        type:"video",

        name:"Free Video",

        isPhonePhoto:false,

        isFreePhoto:false,

        isFreeVideo:true,

        url:video.url,

        thumbnail:video.thumbnail || "",

        caption:"",

        startTime:Number(video.startTime) || 0,

        endTime:Number(video.endTime) || ((Number(video.startTime) || 0) + (Number(video.duration) || 10)),

        duration:Number(video.duration) || Math.max(1, (Number(video.endTime) || 10) - (Number(video.startTime) || 0)),

        voiceUrl:"",

        voiceText:"",

        voiceGender:
          getLastSelectedAiVoiceGender()

      });

    });

  }

  const remainingSlots =
    getTimelineRemainingSlots();

  if (remainingSlots <= 0) {
    showTimelineLimitAlert();
    return;
  }

  if (convertedPhotos.length > remainingSlots) {
    convertedPhotos.splice(remainingSlots);
    showTimelineLimitAlert();
  }

  installMediaIntoTemplateSlots(
    convertedPhotos
  );

  selectedPhotoTotal =
    selectedPhotos.length;

  photoCaptions =
    selectedPhotos.map(
      p => p.caption || ""
    );

  photoDurations =
    selectedPhotos.map(
      p => p.duration || 10
    );

  saveProjectPhotos();
  updatePhotoCounter();

  buildPhotoTextList();

  selectedFreePhotos = [];
  selectedFreeVideos = [];
  freePhotoCropMap = {};
  previewFreeVideoObject = null;

  freePhotosBox.style.display = "none";
  contactOverlay.style.display = "none";

  openTimelineCardBtn.click();

};

</script>
<script>
document.write(
  '<script src="/Supports/ip-video-engine.js?t=' +
  Date.now() +
  '"><\/script>'
);
</script>
</body>
</html>