/* DESKTOP APP SPECIFIC STYLES */
body.desktop-app {
  margin: 0; padding: 0;
  height: 100vh; overflow: hidden;
  background: #080A13; color: #FFF;
  font-family: 'Inter', sans-serif;
  display: flex;
}
.merge-voiceover-card{padding:14px;border:1px solid rgba(34,211,238,.28);border-radius:12px;background:rgba(34,211,238,.055)}.merge-voiceover-card>label{display:flex;align-items:center;justify-content:space-between;gap:12px}.merge-voiceover-card>label small{color:#67e8f9}.merge-voiceover-input{display:flex;gap:8px;margin:10px 0 7px}.merge-voiceover-input input{min-width:0;flex:1;padding:10px;border:1px dashed var(--line-strong);border-radius:8px;background:var(--surface-3)}.merge-voiceover-input button{width:42px;border:1px solid rgba(248,113,113,.4);border-radius:8px;background:rgba(248,113,113,.1);color:#fca5a5}.grok-final-dialogue-option{border-color:rgba(34,211,238,.35)!important;background:rgba(34,211,238,.07)!important}
.galaxy-container {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; overflow: hidden; pointer-events: none; background: #000;
}
.galaxy-bg {
  position: absolute; top: -5%; left: -5%; width: 110%; height: 110%;
  background: url('assets/galaxy_bg.png') center/cover no-repeat;
  opacity: 0.3; filter: saturate(0.8) contrast(1.2); 
  animation: pan-galaxy 60s infinite linear alternate;
}
.astro-layer {
  position: absolute; background-position: center; background-size: contain; background-repeat: no-repeat;
  mix-blend-mode: screen; /* Magic: makes the solid black background of generated images transparent! */
}
.astronaut {
  width: 450px; height: 450px; background-image: url('assets/astronaut.png');
  top: 15%; left: 5%; opacity: 0.35;
  animation: float-astro 25s infinite ease-in-out alternate;
}
.spaceship {
  width: 550px; height: 550px; background-image: url('assets/spaceship.png');
  bottom: 5%; right: 2%; opacity: 0.4;
  animation: float-ship 30s infinite ease-in-out alternate-reverse;
}
#shooting-stars {
  position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1;
}

@keyframes pan-galaxy {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.1) translate(-20px, -20px); }
}
@keyframes float-astro {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(60px, -40px) rotate(10deg); }
}
@keyframes float-ship {
  0% { transform: translate(0, 0) scale(1) rotate(-5deg); }
  100% { transform: translate(-80px, 40px) scale(1.05) rotate(5deg); }
}

.desktop-shell {
  display: flex; width: 100vw; height: 100vh;
  background: transparent;
  position: relative; z-index: 1;
}
/* SIDEBAR */
.desktop-sidebar {
  width: 280px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10, 19, 34, 0.72), rgba(5, 12, 24, 0.62)),
    radial-gradient(circle at 8% 18%, rgba(0, 242, 254, 0.08), transparent 34%);
  border-right: 1px solid rgba(116, 231, 255, 0.18);
  display: flex; flex-direction: column;
  padding: 24px 16px;
  box-shadow: 16px 0 48px rgba(0, 4, 14, 0.26), inset -1px 0 rgba(255, 255, 255, 0.035);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
  backdrop-filter: blur(26px) saturate(135%);
}
.desktop-sidebar::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,0.055), transparent 23%, transparent 76%, rgba(0,242,254,0.035)),
    radial-gradient(circle at 18% 2%, rgba(79,172,254,0.16), transparent 22%);
}
.desktop-sidebar::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0,242,254,0.52) 28%, rgba(79,172,254,0.16) 72%, transparent);
  opacity: 0.65;
}
.brand-zone {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px; margin-bottom: 40px; padding: 0 8px;
}
.brand-zone .brand-mark {
  width: 40px; height: 40px; background: linear-gradient(135deg, #00F2FE, #4FACFE);
  border: 1px solid rgba(255,255,255,0.34);
  border-radius: 11px; display: grid; place-items: center; font-weight: 900; color: #000;
  box-shadow: 0 10px 26px rgba(0, 178, 255, 0.2), inset 0 1px rgba(255,255,255,0.4);
}
.brand-zone b { font-size: 18px; letter-spacing: 1px; display: block; margin-bottom: 2px; }
.brand-zone small { font-size: 10px; color: #00F2FE; letter-spacing: 1.5px; text-transform: uppercase; }

.desktop-nav {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 242, 254, 0.28) transparent;
}
.desktop-nav::-webkit-scrollbar { width: 4px; }
.desktop-nav::-webkit-scrollbar-track { background: transparent; }
.desktop-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(0, 242, 254, 0.24);
}
.desktop-nav .tab {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.012); border: 1px solid transparent; color: #9eacc0;
  padding: 16px; text-align: left; border-radius: 12px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.desktop-nav .tab i { font-size: 20px; color: #9aaac0; transition: color .2s ease, filter .2s ease; }
.desktop-nav .tab:hover {
  background: linear-gradient(100deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025));
  border-color: rgba(155, 226, 255, 0.11);
  color: #f3fbff;
  transform: translateX(2px);
}
.desktop-nav .tab:hover i { color: #d8f8ff; }
.desktop-nav .tab.active {
  background: linear-gradient(100deg, rgba(0, 242, 254, 0.17), rgba(79, 172, 254, 0.075));
  border-color: rgba(0, 242, 254, 0.2);
  color: #39f3ff;
  box-shadow: inset 3px 0 0 #00F2FE, 0 9px 26px rgba(0, 11, 24, 0.18), inset 0 1px rgba(255,255,255,0.055);
}
.desktop-nav .tab.active i {
  color: #22f2ff;
  filter: drop-shadow(0 0 7px rgba(0,242,254,0.34));
}

.sidebar-bottom { position: relative; z-index: 1; padding-top: 20px; border-top: 1px solid rgba(167,224,255,0.11); display: flex; gap: 8px; }
.sidebar-bottom #theme {
  background: rgba(255,255,255,0.025);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.sidebar-bottom #theme:hover {
  background: rgba(0,242,254,0.075);
  border-color: rgba(0,242,254,0.24) !important;
  color: #dffcff !important;
  transform: translateY(-1px);
}

/* Keep every primary destination visible at normal browser zoom on common
   laptop/desktop heights. Width and application behavior remain unchanged. */
@media (max-height: 1050px) {
  .desktop-sidebar { padding-block: 14px; }
  .brand-zone { margin-bottom: 18px; }
  .desktop-nav { gap: 5px; }
  .desktop-nav .tab {
    flex: 0 0 auto;
    min-height: 43px;
    padding: 10px 13px;
    border-radius: 10px;
    font-size: 13px;
    gap: 10px;
  }
  .desktop-nav .tab i { font-size: 18px; }
  .sidebar-bottom { padding-top: 10px; }
  .sidebar-bottom #theme { min-height: 38px; padding-block: 8px; }
}

@media (max-height: 780px) {
  .desktop-sidebar { padding-block: 10px; }
  .brand-zone { margin-bottom: 10px; }
  .desktop-nav { gap: 3px; }
  .desktop-nav .tab { min-height: 39px; padding-block: 7px; }
  .sidebar-bottom { padding-top: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .desktop-nav .tab,
  .desktop-nav .tab i,
  .sidebar-bottom #theme { transition: none; }
  .desktop-nav .tab:hover,
  .sidebar-bottom #theme:hover { transform: none; }
}

/* VIDEO COMPOSER */
.merge-workspace {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding-bottom: 36px;
}
.merge-page-header {
  position: relative;
  overflow: hidden;
  padding: 21px 24px;
  border: 1px solid rgba(99, 221, 255, 0.18);
  border-radius: 17px;
  background: linear-gradient(120deg, rgba(10, 26, 43, 0.82), rgba(7, 17, 31, 0.62));
  box-shadow: 0 18px 48px rgba(0, 5, 16, 0.2), inset 0 1px rgba(255,255,255,0.035);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}
.merge-page-header::after {
  content: "";
  position: absolute;
  right: -55px;
  top: -85px;
  width: 260px;
  height: 210px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0,242,254,0.14), transparent 68%);
}
.merge-page-header h2 { display: flex; align-items: center; gap: 10px; color: #f4fbff; }
.merge-page-header h2 i { color: #35effb; filter: drop-shadow(0 0 9px rgba(0,242,254,.22)); }
.merge-page-header p { margin: 7px 0 0; color: #91a5b9; font-size: 12px; }
.merge-eyebrow { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: #68edf5; font-size: 9px; font-weight: 900; letter-spacing: 1.35px; }

#merge .merge-studio {
  max-width: none !important;
  padding: 18px !important;
  border-color: rgba(115, 220, 255, 0.15);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(9, 22, 38, 0.74), rgba(5, 14, 27, 0.62));
  box-shadow: 0 22px 58px rgba(0, 4, 14, 0.22), inset 0 1px rgba(255,255,255,0.035);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}
#merge .field > label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: #b8c7d8;
  font-size: 11px;
  font-weight: 800;
}
#merge .field > label i { color: #55eaf4; font-size: 15px; }
.merge-source-card,
.merge-clarity-card,
.merge-audio-card,
.merge-settings-grid .field {
  padding: 15px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 13px;
  background: rgba(8, 18, 31, 0.58);
  box-shadow: inset 0 1px rgba(255,255,255,0.025);
}
.merge-source-card { border-color: rgba(0,242,254,0.16); }
#merge #clips {
  min-height: 92px;
  padding: 27px 18px !important;
  border-color: rgba(0,242,254,0.28) !important;
  background: linear-gradient(135deg, rgba(0,242,254,0.045), rgba(79,172,254,0.02)) !important;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
#merge #clips:hover,
#merge #clips:focus {
  border-color: rgba(0,242,254,0.62) !important;
  background: rgba(0,242,254,0.075) !important;
  box-shadow: 0 0 0 3px rgba(0,242,254,0.055);
}
.merge-settings-grid {
  display: grid !important;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 12px !important;
}
.merge-settings-grid .field { min-width: 0; }
#merge select {
  height: 43px;
  border-color: rgba(157, 218, 255, 0.13);
  border-radius: 9px;
  background-color: rgba(3, 10, 20, 0.7);
}
.merge-clarity-card > small { max-width: 880px; }
.merge-audio-card { margin-top: 12px !important; }
#merge #beatSyncAudio { min-height: 48px; border-color: rgba(111,215,255,.18) !important; }
#merge label:has(#enableBeatSync) {
  width: 100% !important;
  box-sizing: border-box;
  justify-content: flex-start;
  margin-top: 11px !important;
  border-color: rgba(0,242,254,0.2) !important;
  background: linear-gradient(100deg, rgba(0,242,254,0.095), rgba(79,172,254,0.035)) !important;
}
.merge-guide {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,242,254,0.15);
  border-radius: 11px;
  background: rgba(0,242,254,0.035);
}
.merge-guide summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: #dffcff;
  cursor: pointer;
  list-style: none;
  transition: background .2s ease;
}
.merge-guide summary::-webkit-details-marker { display: none; }
.merge-guide summary:hover { background: rgba(0,242,254,0.055); }
.merge-guide summary > i:first-child { color: #ffd86b; font-size: 19px; }
.merge-guide summary > i:last-child { margin-left: auto; color: #66dce5; transition: transform .2s ease; }
.merge-guide[open] summary > i:last-child { transform: rotate(180deg); }
.merge-guide summary span { display: grid; gap: 2px; }
.merge-guide summary b { color: #5cf3fc; font-size: 11px; text-transform: uppercase; letter-spacing: .35px; }
.merge-guide summary small { color: #7f94aa; font-size: 9px; }
.merge-guide-content { padding: 0 15px 14px 43px; color: #b5c4d3; font-size: 11px; line-height: 1.58; }
.merge-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
  padding: 0 4px;
}
.merge-list-heading span { display: flex; align-items: center; gap: 8px; color: #eefaff; font-size: 12px; font-weight: 900; }
.merge-list-heading span i { color: #42edf7; font-size: 17px; }
.merge-list-heading small { color: #71869c; font-size: 9px; }
.merge-table-head { margin-top: 10px !important; padding: 0 28px 0 20px !important; color: #71869c !important; font-size: 9px !important; letter-spacing: .45px; }
#merge .merge-clip-list {
  min-height: 168px !important;
  margin-bottom: 13px !important;
  padding: 10px !important;
  border: 1px solid rgba(255,255,255,0.065);
  border-radius: 12px !important;
  background: rgba(2, 9, 18, 0.42) !important;
}
#merge .merge-clip-list:empty::before {
  content: "Các clip đã chọn sẽ xuất hiện tại đây";
  display: grid;
  place-items: center;
  min-height: 145px;
  color: #64798f;
  font-size: 11px;
  border: 1px dashed rgba(157, 218, 255, 0.1);
  border-radius: 9px;
}
#merge .clip {
  padding: 9px 8px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 9px;
  background: linear-gradient(105deg, rgba(18,35,53,.78), rgba(8,18,31,.68));
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
#merge .clip:hover { border-color: rgba(0,242,254,.2); background: rgba(17,38,55,.82); transform: translateY(-1px); }
#merge .drag-handle { color: #6f859a; cursor: grab; }
#merge .clip-order { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: rgba(0,242,254,.1); color: #4ef2fc; font-size: 9px; font-weight: 900; }
#merge .clip-tools button { min-height: 29px; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; background: rgba(255,255,255,.025); color: #b7c8d8; }
#merge .clip-tools button:hover:not(:disabled) { border-color: rgba(0,242,254,.28); color: #52f1fb; }
.merge-action-bar {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1.35fr;
  gap: 10px !important;
  margin: 0 !important;
  padding: 13px;
  border: 1px solid rgba(112,221,255,.12);
  border-radius: 13px;
  background: rgba(5,14,26,.72);
  box-shadow: 0 12px 30px rgba(0,4,14,.18);
}
.merge-action-bar button { min-width: 0; margin: 0; border-radius: 9px !important; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.merge-action-bar button:hover:not(:disabled) { transform: translateY(-2px); }
#merge #mergeBtn { background: linear-gradient(115deg,#00e5ee,#4facfe); box-shadow: 0 9px 22px rgba(0,197,255,.17); }
#merge #mergeBtn:hover:not(:disabled) { box-shadow: 0 12px 28px rgba(0,216,255,.25); filter: brightness(1.06); }
.merge-export-actions { margin-top: 10px !important; }
.merge-export-actions[hidden] { display: none !important; }
.merge-result-video { border: 1px solid rgba(0,242,254,.18); box-shadow: 0 16px 40px rgba(0,0,0,.28); }

@media (max-width: 850px) {
  .merge-settings-grid { grid-template-columns: 1fr; }
  .merge-table-head { display: none !important; }
  #merge .clip { grid-template-columns: 24px 24px minmax(0,1fr) !important; }
  #merge .clip > small,
  #merge .clip > .clip-transition,
  #merge .clip > .opening-label,
  #merge .clip > div:not(.clip-tools) { display: none; }
  #merge .clip-tools { grid-column: 3; justify-content: flex-start !important; flex-wrap: wrap; }
  .merge-action-bar { grid-template-columns: 1fr 1fr; }
  #merge #mergeBtn { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .merge-page-header { padding: 17px; }
  #merge .merge-studio { padding: 12px !important; }
  .merge-source-card, .merge-clarity-card, .merge-audio-card, .merge-settings-grid .field { padding: 12px; }
  .merge-list-heading small { display: none; }
  .merge-action-bar { grid-template-columns: 1fr; }
  #merge #mergeBtn { grid-column: auto; }
  .merge-guide-content { padding-left: 14px; }
}

/* MAIN AREA */
.tool-update-card { max-width: 600px; margin: 24px auto 0; padding: 22px; border: 1px solid rgba(92,224,255,.24); border-radius: 14px; background: linear-gradient(135deg,rgba(9,26,43,.82),rgba(7,15,28,.72)); box-shadow: 0 16px 38px rgba(0,5,17,.2); }
.tool-update-head { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 12px; }
.tool-update-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg,rgba(0,242,254,.22),rgba(79,172,254,.12)); color: #53f1fa; font-size: 23px; box-shadow: inset 0 0 0 1px rgba(0,242,254,.16); }
.tool-update-head small { color: #62eaf3; font-size: 8px; font-weight: 900; letter-spacing: 1.2px; }
.tool-update-head h3 { margin: 3px 0; color: #fff; font-size: 16px; }
.tool-update-head p { margin: 0; color: #8196aa; font-size: 10px; line-height: 1.45; }
.tool-update-version { padding: 6px 9px; border: 1px solid rgba(0,242,254,.2); border-radius: 999px; background: rgba(0,242,254,.06); color: #70f3fb; font-size: 9px; font-weight: 900; }
.tool-update-status { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.075); border-radius: 9px; background: rgba(0,0,0,.17); color: #a8b8c8; font-size: 10px; }
.tool-update-status i { color: #58e7a0; font-size: 16px; }.tool-update-status.error i,.tool-update-status.error { color: #f87171; }.tool-update-status.ready i,.tool-update-status.ready { color: #fbbf24; }
.tool-update-progress { height: 7px; margin-top: 10px; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.07); }.tool-update-progress>div { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg,#00f2fe,#4facfe); transition: width .2s ease; }
.tool-update-actions { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 8px; margin-top: 13px; }.tool-update-actions button { min-width: 0; padding: 10px 8px; font-size: 9px; }
.tool-update-help { margin-top: 12px; color: #71869b; font-size: 9px; }.tool-update-help summary { color: #8ca4b9; cursor: pointer; }.tool-update-help p { margin: 8px 0 0; line-height: 1.55; }
@media(max-width:620px){.tool-update-head{grid-template-columns:44px 1fr}.tool-update-version{grid-column:1/-1;width:max-content}.tool-update-actions{grid-template-columns:1fr}.tool-update-card{padding:16px}}

.desktop-main {
  flex: 1; height: 100vh; overflow-y: auto; overflow-x: hidden;
  background: transparent;
  padding: 32px 40px;
}
.desktop-main::-webkit-scrollbar { width: 8px; }
.desktop-main::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.page { display: none; }
.page.active { display: block; animation: fade-in 0.4s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* STEP 1 SPLIT LAYOUT */
.split-layout { display: flex; gap: 24px; height: calc(100vh - 100px); }
.split-left { flex: 1; display: flex; flex-direction: column; }
.split-right { width: 440px; overflow-y: auto; padding-right: 8px; display: flex; flex-direction: column; gap: 16px; }
.split-right::-webkit-scrollbar { width: 4px; }
.split-right::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }

.editor-card {
  flex: 1; display: flex; flex-direction: column;
  background: rgba(13,19,33,0.6); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; overflow: hidden;
}
.editor-header {
  padding: 16px 20px; background: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex; justify-content: space-between; align-items: center;
}
.editor-header h3 { margin: 0; font-size: 14px; color: #00F2FE; display: flex; align-items: center; gap: 8px; }
#story {
  flex: 1; background: transparent; border: none; color: #e2e8f0;
  padding: 24px; font-size: 15px; line-height: 1.8; resize: none; outline: none;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
}
#story::selection {
  background: rgba(0, 242, 254, 0.3);
  color: #fff;
}
#story:focus {
  background: rgba(0, 242, 254, 0.02);
}

.config-panel {
  background: rgba(13,19,33,0.6); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 20px;
  transition: 0.3s ease;
}
.config-panel:hover {
  border-color: rgba(0, 242, 254, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.config-panel h4 { 
  margin: 0 0 20px; font-size: 13px; text-transform: uppercase; 
  letter-spacing: 1.5px; color: #e2e8f0; display: flex; align-items: center; gap: 8px;
  font-weight: 700;
}
.config-panel h4 i { 
  font-size: 18px; 
  background: linear-gradient(135deg, #00F2FE, #4FACFE); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
}
/* STEP 2 GRID */
.scenes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 28px; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }

/* SCENE CARD COLORS & COPIED STATE */
.scene { position: relative; }
.scene:nth-child(4n+1) { border-top: 4px solid #00F2FE; }
.scene:nth-child(4n+1) .badge { background: rgba(0,242,254,0.15); color: #00F2FE; }
.scene:nth-child(4n+1) .dialogue { border-left-color: #00F2FE; }

.scene:nth-child(4n+2) { border-top: 4px solid #b620e0; }
.scene:nth-child(4n+2) .badge { background: rgba(182,32,224,0.15); color: #b620e0; }
.scene:nth-child(4n+2) .dialogue { border-left-color: #b620e0; }

.scene:nth-child(4n+3) { border-top: 4px solid #10b981; }
.scene:nth-child(4n+3) .badge { background: rgba(16,185,129,0.15); color: #10b981; }
.scene:nth-child(4n+3) .dialogue { border-left-color: #10b981; }

.scene:nth-child(4n+4) { border-top: 4px solid #f5a623; }
.scene:nth-child(4n+4) .badge { background: rgba(245,166,35,0.15); color: #f5a623; }
.scene:nth-child(4n+4) .dialogue { border-left-color: #f5a623; }

.scene.copied {
  border: 2px solid #10b981 !important;
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.2);
  background: rgba(16, 185, 129, 0.05);
}
.scene.copied::after {
  content: 'ĐÃ COPY ✓';
  position: absolute;
  top: -14px;
  right: 20px;
  background: #10b981;
  color: #000;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 11px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* SCENE DROPZONE FOR ANCHOR FRAME */
.scene-dropzone {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px dashed rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.scene-dropzone:hover, .scene-dropzone.drag-over {
  background: rgba(0, 242, 254, 0.08);
  border-color: #00F2FE;
  transform: translateY(-2px);
}
.scene-dropzone i {
  font-size: 28px;
  color: #00F2FE;
}
.scene-dropzone span {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}
.scene-dropzone b {
  color: #FFF;
  display: block;
  font-size: 13.5px;
  margin-bottom: 2px;
}
.preview-wrapper {
  position: relative;
  display: flex;
}
.extracted-preview {
  width: 52px;
  height: 74px;
  object-fit: cover;
  border-radius: 8px;
  border: 1.5px solid #00F2FE;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.3);
  flex-shrink: 0;
}
.preview-large {
  position: absolute;
  bottom: 100%;
  left: 0;
  transform: translateX(20px) translateY(0);
  width: 340px;
  height: auto;
  border-radius: 12px;
  border: 2px solid #00F2FE;
  box-shadow: 0 16px 40px rgba(0,0,0,0.8), 0 0 24px rgba(0,242,254,0.3);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  z-index: 100;
  pointer-events: none;
  background: #000;
}
.preview-wrapper:hover .preview-large {
  opacity: 1;
  visibility: visible;
  transform: translateX(20px) translateY(-12px);
}
.download-anchor-btn, .grok-jump-btn {
  display: inline-block;
  background: #10b981;
  color: #000;
  border: none;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}
.download-anchor-btn:hover { background: #0ea5e9; transform: translateY(-1px); }
.grok-jump-btn { background: #00F2FE; color: #000; }
.grok-jump-btn:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 0 10px rgba(0,242,254,0.5); }

/* Nút Mở Grok Cảnh 1 Siêu Bự */
.grok-scene1-btn {
  background: linear-gradient(135deg, #00F2FE, #4FACFE);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.4);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 15px rgba(0,242,254,0.3);
  animation: pulse-glow 2s infinite;
}
.grok-scene1-btn:hover {
  background: linear-gradient(135deg, #4FACFE, #00F2FE);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(0,242,254,0.6);
  color: #fff;
}
@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(0,242,254,0.7); }
  70% { box-shadow: 0 0 0 10px rgba(0,242,254,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,242,254,0); }
}

/* XƯỞNG GHÉP VIDEO (CLIP LIST) */
.clip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink);
  flex-shrink: 0;
}
.clip .drag-handle {
  cursor: grab;
  color: var(--muted);
  font-size: 16px;
}
.clip .clip-order {
  background: rgba(0, 242, 254, 0.2);
  color: #00F2FE;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  font-size: 11px;
}
.clip b {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.clip-transition {
  width: 110px;
  padding: 4px;
  font-size: 11px;
  border-radius: 4px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.clip-tools {
  display: flex;
  gap: 4px;
}
.clip-tools button {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #ccc;
  border-radius: 4px;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 12px;
}
.clip-tools button:hover { background: rgba(255,255,255,0.15); color: #fff; }
.clip-tools button.remove-clip:hover { background: #ef4444; color: #fff; border-color: #ef4444; }
.opening-label {
  width: 110px;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  font-size: 11px;
}

.grok-folder-config {
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px;padding:13px 15px;
  border:1px solid rgba(0,242,254,.28);border-radius:12px;background:rgba(5,18,30,.78);
}
.grok-folder-config>div:first-child{display:flex;align-items:center;gap:11px;min-width:0}
.grok-folder-config>div:first-child>i{font-size:25px;color:#00f2fe}
.grok-folder-config span{display:flex;flex-direction:column;gap:3px;min-width:0}
.grok-folder-config b{color:#fff;font-size:13px}.grok-folder-config small{color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.grok-folder-actions{display:flex;gap:8px;flex:0 0 auto}.grok-folder-actions button{padding:7px 10px;font-size:11px}
.grok-folder-config[data-ready="true"]{border-color:rgba(16,185,129,.45);background:rgba(16,185,129,.07)}
.grok-folder-config[data-ready="true"]>div:first-child>i{color:#10b981}
.settings-storage-card{
  max-width:600px;margin:0 auto 24px;padding:20px;align-items:flex-start;
  border-color:rgba(0,242,254,.32);background:linear-gradient(145deg,rgba(5,18,30,.94),rgba(7,25,40,.82));
  box-shadow:0 10px 30px rgba(0,242,254,.08);
}
.settings-storage-card .grok-folder-copy{align-items:flex-start!important}
.settings-storage-card .grok-folder-copy>i{margin-top:2px;font-size:28px}
.settings-storage-card .grok-folder-copy b{font-size:15px;letter-spacing:.2px}
.settings-storage-card .grok-folder-copy small{line-height:1.5}
.settings-storage-card #grokFolderStatus{margin-top:6px;color:#8be9f0;font-weight:600}
.settings-storage-card .grok-folder-actions{flex-direction:column;min-width:142px}
.settings-storage-card .grok-folder-actions button{
  display:inline-flex!important;align-items:center;justify-content:center;gap:7px;width:100%;min-height:38px;
  padding:9px 12px!important;border-radius:9px!important;font-weight:700!important;font-size:11px!important;
  cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.settings-storage-card .grok-folder-primary{
  color:#04131d!important;background:linear-gradient(135deg,#22d3ee,#38bdf8)!important;
  border:1px solid rgba(103,232,249,.85)!important;box-shadow:0 5px 16px rgba(34,211,238,.18)!important;
}
.settings-storage-card .grok-folder-danger{
  color:#fda4af!important;background:rgba(127,29,29,.18)!important;border:1px solid rgba(251,113,133,.38)!important;
}
.settings-storage-card .grok-folder-actions button:hover{transform:translateY(-1px)}
.character-library-card{border-color:rgba(167,139,250,.38);background:linear-gradient(145deg,rgba(17,13,38,.94),rgba(10,25,42,.84))}
.character-library-card .grok-folder-copy>i{color:#a78bfa!important}
.character-library-card #characterLibraryStatus{margin-top:6px;color:#c4b5fd;font-weight:600}
.character-library-card[data-ready="true"]{border-color:rgba(52,211,153,.48);background:rgba(16,185,129,.07)}
@media (max-width:760px){.settings-storage-card{flex-direction:column}.settings-storage-card .grok-folder-actions{width:100%;flex-direction:row}.settings-storage-card .grok-folder-actions button{flex:1}}

/* WORKFLOW TRACKER */
.workflow-tracker {
  position: fixed;
  bottom: 32px;
  left: 310px;
  background: rgba(10, 15, 25, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 242, 254, 0.3);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 242, 254, 0.1);
  z-index: 1000;
  min-width: 260px;
  pointer-events: none;
}
.workflow-tracker h4 {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: #00F2FE;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.workflow-tracker [data-character-library-step]{cursor:pointer}
.tracker-step {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #64748b;
  transition: all 0.3s;
}
.tracker-step:last-child { margin-bottom: 0; }
.tracker-step.done { color: #10b981; }
.tracker-step.active {
  color: #fff;
  font-weight: 600;
  animation: blink-step-text 1.5s infinite;
}
.step-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  font-size: 12px;
}
.tracker-step.done .step-icon {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}
.tracker-step.active .step-icon {
  background: #00F2FE;
  color: #000;
  animation: blink-step-icon 1.5s infinite;
}
@keyframes blink-step-text {
  0%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(0, 242, 254, 0.6); }
  50% { opacity: 0.7; text-shadow: none; }
}
@keyframes blink-step-icon {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.7); }
  50% { box-shadow: 0 0 0 6px rgba(0, 242, 254, 0); }
}
@keyframes spin-vinyl {
  100% { transform: rotate(360deg); }
}

/* TIKTOK PLAYER STYLES */
.tiktok-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 80px;
    color: rgba(255, 255, 255, 0.8);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 10;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}
.tiktok-play-icon.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}
.tiktok-progress-bar-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.3);
    z-index: 10;
}
.tiktok-progress-bar-fill {
    height: 100%;
    background: #fff;
    width: 0%;
}

/* WORKFLOW TRACKER */
.workflow-tracker {
  position: fixed;
  bottom: 24px;
  left: calc(280px + (100vw - 280px) / 2);
  transform: translateX(-50%);
  background: rgba(10, 15, 25, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 242, 254, 0.3);
  border-radius: 50px;
  padding: 12px 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 242, 254, 0.1);
  z-index: 1000;
  pointer-events: none;
  white-space: nowrap;
}
.workflow-tracker[hidden],
.workflow-tracker:empty {
  display: none;
}
.workflow-tracker h4 {
  margin: 0;
  font-size: 13px;
  color: #00F2FE;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tracker-step {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: #64748b;
  transition: all 0.3s;
}
.tracker-step.done { color: #10b981; }
.tracker-step.active {
  color: #fff;
  font-weight: 600;
  animation: blink-step-text 1.5s infinite;
}
.step-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  font-size: 12px;
}
.tracker-step.done .step-icon {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}
.tracker-step.active .step-icon {
  background: #00F2FE;
  color: #000;
  animation: blink-step-icon 1.5s infinite;
}
@keyframes blink-step-text {
  0%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(0, 242, 254, 0.6); }
  50% { opacity: 0.7; text-shadow: none; }
}
@keyframes blink-step-icon {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.7); }
  50% { box-shadow: 0 0 0 6px rgba(0, 242, 254, 0); }
}

/* STEP 3 RENDER WORKSPACE */
.render-workspace { display: flex; flex-direction: column; height: calc(100vh - 64px); }
.render-player-zone {
  flex: 1; display: flex; justify-content: center; align-items: center;
  background: #000; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 24px; position: relative; overflow: hidden;
}
.render-timeline-zone {
  height: 240px; background: rgba(13,19,33,0.8); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 16px; display: flex; flex-direction: column;
}
.timeline-tracks { flex: 1; display: flex; gap: 8px; overflow-x: auto; align-items: center; padding: 10px; background: rgba(0,0,0,0.3); border-radius: 8px; }
.timeline-tracks::-webkit-scrollbar { height: 8px; }
.timeline-tracks::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
.timeline-tracks .clip {
  min-width: 160px; height: 90px; background: rgba(0, 242, 254, 0.1);
  border: 1px solid rgba(0, 242, 254, 0.3); border-radius: 8px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  color: #fff; font-size: 12px; position: relative; cursor: pointer;
}
.timeline-tracks .clip:hover { border-color: #00F2FE; }

/* OVERRIDES FOR DARK INPUTS */
.desktop-app input, .desktop-app select {
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); 
  color: #fff; border-radius: 8px; padding: 12px 14px; width: 100%; box-sizing: border-box;
  font-size: 14px; transition: all 0.2s ease;
}
.desktop-app input:focus, .desktop-app select:focus {
  background: rgba(0,0,0,0.4);
  border-color: #00f2fe;
  box-shadow: 0 0 12px rgba(0,242,254,0.25);
  outline: none;
}
select option {
  background: #080A13;
  color: #FFF;
}

.desktop-app select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2300F2FE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}

.desktop-app input[type="file"] {
  background: rgba(0, 242, 254, 0.05);
  border: 1px dashed rgba(0, 242, 254, 0.3);
  color: #00F2FE;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
}
.desktop-app input[type="file"]::file-selector-button {
  background: linear-gradient(135deg, #00F2FE, #4FACFE);
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  margin-right: 12px;
}
.desktop-app input[type="file"]:hover {
  background: rgba(0, 242, 254, 0.15);
  border-color: #00F2FE;
}

.desktop-app input[type="radio"] {
  appearance: none;
  width: 18px; height: 18px; padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  display: inline-block; vertical-align: middle;
  cursor: pointer; position: relative; margin-right: 4px;
}
.desktop-app input[type="radio"]:checked {
  border-color: #00F2FE;
}
.desktop-app input[type="radio"]:checked::after {
  content: ''; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 8px; height: 8px; background: #00F2FE; border-radius: 50%;
}
.desktop-app input[type="radio"]:focus { box-shadow: none; }

.desktop-app .btn-primary { 
  background: linear-gradient(135deg, #00F2FE, #4FACFE); 
  color: #000; border: none; padding: 12px 24px; border-radius: 8px; 
  font-weight: 800; cursor: pointer; transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(0, 242, 254, 0.3);
  display: inline-flex; align-items: center; gap: 8px;
}
.desktop-app .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 242, 254, 0.5);
  filter: brightness(1.1);
}

.desktop-app .btn-outline { 
  background: transparent; border: 1px solid rgba(0,242,254,0.3); 
  color: #00F2FE; padding: 10px 20px; border-radius: 8px; 
  font-weight: bold; cursor: pointer; transition: 0.3s;
  display: inline-flex; align-items: center; gap: 8px;
}
.desktop-app .btn-outline:hover {
  background: rgba(0,242,254,0.1); border-color: #00F2FE;
}

.desktop-app .field { margin-bottom: 16px; }
.desktop-app .field label { 
  display: block; margin-bottom: 8px; font-size: 12px; 
  color: #94a3b8; font-weight: 600; 
}

/* POST HISTORY METRICS & BADGES */
.history-metrics {
  display: flex;
  justify-content: space-between;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
  border: 1px solid rgba(255,255,255,0.05);
}
.metric-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}
.metric-like { color: #FF2D55; }
.metric-comment { color: #00F2FE; }
.metric-share { color: #10B981; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bold;
}
.status-badge.scheduled {
  background: rgba(245, 166, 35, 0.15);
  color: #F5A623;
  border: 1px solid rgba(245, 166, 35, 0.3);
}
.status-badge.published {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}


/* KHO HANG STYLES */

.warehouse-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(0, 242, 254, 0.2);
    padding-bottom: 12px;
}

.w-tab {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.w-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.w-tab.active {
    color: #00F2FE;
    background: rgba(0, 242, 254, 0.1);
    box-shadow: inset 0 0 0 1px rgba(0, 242, 254, 0.3);
}

.w-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 3px;
    background: #00F2FE;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 -2px 10px rgba(0, 242, 254, 0.8);
    animation: tabPulse 2s infinite;
}

@keyframes tabPulse {
    0% { box-shadow: 0 -2px 10px rgba(0, 242, 254, 0.5); }
    50% { box-shadow: 0 -2px 20px rgba(0, 242, 254, 1); }
    100% { box-shadow: 0 -2px 10px rgba(0, 242, 254, 0.5); }
}

.w-tab-content {
    display: none;
    animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.w-tab-content.active {
    display: block;
}

.w-section-title {
    margin-bottom: 16px;
}

.w-section-title h3 {
    margin: 0;
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.w-section-title h3 i {
    color: #00F2FE;
    font-size: 20px;
}

/* CHANNELS */
.w-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.w-channel-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.w-channel-btn i {
    font-size: 18px;
    color: var(--muted);
    transition: color 0.3s ease;
}

.w-channel-btn:hover {
    border-color: #00F2FE;
    box-shadow: 0 4px 15px rgba(0, 242, 254, 0.15);
    transform: translateY(-2px);
}

.w-channel-btn:hover i {
    color: #00F2FE;
}

/* PIPELINE */
.w-pipeline {
    display: flex;
    align-items: center;
    overflow-x: auto;
    padding: 10px 0 20px 0;
    gap: 16px;
}

.w-pipe-card {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}

.w-pipe-card:hover {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    transform: translateY(-4px);
}

.w-pipe-card:hover .pipe-icon i {
    filter: drop-shadow(0 0 8px currentColor);
}

.pipe-icon {
    font-size: 28px;
    color: #10B981;
    margin-bottom: 12px;
}

.pipe-label {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
}

.pipe-value {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    font-family: monospace;
}

.pipe-arrow {
    color: var(--muted);
    font-size: 24px;
}

/* METRICS GRID */
.w-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.w-metric-card {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.w-metric-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 242, 254, 0.5);
    box-shadow: 0 8px 25px rgba(0, 242, 254, 0.2);
    transform: translateY(-4px) scale(1.02);
}

.w-metric-card .metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #00F2FE;
}

.w-metric-card:hover .metric-icon {
    background: rgba(255, 255, 255, 0.1);
}

.w-metric-card .m-label {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
}

.w-metric-card .m-value {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

/* BATCH GRID */
.w-batch-grid {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.w-batch-row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr 1fr 1fr;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    align-items: center;
    font-size: 13px;
    transition: background 0.2s ease;
}

.w-batch-row:last-child {
    border-bottom: none;
}

.w-batch-row:not(.header):hover {
    background: rgba(255, 255, 255, 0.03);
}

.w-batch-row.header {
    background: rgba(0, 0, 0, 0.2);
    color: var(--muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* BADGES */
.badge {
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: bold;
    display: inline-block;
}

.w-badge-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.w-badge-success {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.w-badge-process {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* WMS SPECIFIC STYLES */

/* SKU Card */
.wms-sku-card {
    background: linear-gradient(145deg, rgba(20,20,30,0.8), rgba(10,10,15,0.9));
    border: 1px solid rgba(0, 242, 254, 0.3);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wms-sku-card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 15px 40px rgba(0, 242, 254, 0.2);
    border-color: rgba(0, 242, 254, 0.6);
}

.wms-sku-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg, #00F2FE, #4FACFE);
}

.wms-sku-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sku-img-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    color: var(--muted);
    border: 1px dashed rgba(255,255,255,0.2);
}

.sku-info h2 {
    margin: 0 0 8px 0;
    font-size: 20px;
    color: #fff;
}

.sku-info p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-family: monospace;
}

.sku-info .highlight {
    color: #00F2FE;
    background: rgba(0,242,254,0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.wms-sku-details {
    display: flex;
    gap: 24px;
    background: rgba(0,0,0,0.3);
    padding: 16px;
    border-radius: 12px;
}

.sku-prop {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sku-prop span {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
}

.sku-prop b {
    color: #fff;
    font-size: 14px;
}

/* Report Grid */
.wms-report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.report-box {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.3s ease;
}

.report-box:hover {
    border-color: rgba(0, 242, 254, 0.4);
    background: rgba(0, 242, 254, 0.05);
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 10px 25px rgba(0, 242, 254, 0.15);
}

.report-box:hover i {
    color: #00F2FE;
    transform: scale(1.2);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.report-box i {
    font-size: 24px;
    color: var(--muted);
}

.report-box div {
    font-size: 12px;
    color: var(--muted);
}

.report-box b {
    font-size: 18px;
    color: #fff;
}

/* AI Alerts */
.wms-alert-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wms-alert {
    display: flex;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: var(--surface-2);
    border-left: 4px solid transparent;
}

.wms-alert i {
    font-size: 28px;
}

.wms-alert.alert-critical {
    border-left-color: #EF4444;
    background: rgba(239, 68, 68, 0.05);
}

.wms-alert.alert-critical i { color: #EF4444; }

.wms-alert.alert-high {
    border-left-color: #F59E0B;
    background: rgba(245, 158, 11, 0.05);
}

.wms-alert.alert-high i { color: #F59E0B; }

.wms-alert.alert-medium {
    border-left-color: #3B82F6;
    background: rgba(59, 130, 246, 0.05);
}

.wms-alert.alert-medium i { color: #3B82F6; }

.alert-content h4 {
    margin: 0 0 4px 0;
    color: #fff;
    font-size: 14px;
}

.alert-content p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

/* Transfer Flow */
.wms-transfer-flow {
    display: flex;
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--line);
    padding: 24px;
    border-radius: 12px;
    gap: 12px;
    overflow-x: auto;
}

.t-node {
    background: rgba(0, 242, 254, 0.1);
    border: 1px solid #00F2FE;
    color: #00F2FE;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
}

.t-node.terminal {
    background: rgba(239, 68, 68, 0.1);
    border-color: #EF4444;
    color: #EF4444;
}

.t-arrow {
    color: var(--muted);
    font-size: 20px;
}

/* Subtabs for Channels */
.w-subtab {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 12px;
    font-weight: bold;
    padding: 6px 16px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.w-subtab.active {
    background: #00F2FE;
    color: #000;
}

.w-subtab-content {
    display: none;
    animation: fadeIn 0.3s;
}

.w-subtab-content.active {
    display: block;
}

/* MODAL TẠO SẢN PHẨM */
.wms-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

.wms-modal-overlay.active {
    display: flex;
}

.wms-modal-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    width: 900px;
    max-width: 95vw;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,242,254,0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

.wms-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.02);
}

.wms-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wms-modal-header h3 i {
    color: #00F2FE;
    font-size: 24px;
}

.wms-close-btn {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 24px;
    cursor: pointer;
    transition: color 0.3s;
}

.wms-close-btn:hover {
    color: #EF4444;
}

.wms-modal-body {
    display: flex;
    padding: 24px;
    gap: 32px;
}

.wms-modal-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wms-modal-right {
    width: 320px;
}

.wms-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wms-form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.wms-input {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--line);
    padding: 12px;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s;
    outline: none;
}

.wms-input:focus {
    border-color: #00F2FE;
    box-shadow: 0 0 0 2px rgba(0,242,254,0.2);
}

.wms-btn-icon {
    background: rgba(0,242,254,0.1);
    border: 1px solid rgba(0,242,254,0.3);
    color: #00F2FE;
    padding: 0 16px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    transition: all 0.3s;
}

.wms-btn-icon:hover {
    background: rgba(0,242,254,0.2);
}

/* Dropzones */
.wms-media-dropzone {
    border: 2px dashed var(--line);
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.wms-media-dropzone:hover {
    border-color: #00F2FE;
    background: rgba(0,242,254,0.05);
}

.wms-media-dropzone i {
    font-size: 32px;
    color: var(--muted);
    margin-bottom: 8px;
    transition: color 0.3s;
}

.wms-media-dropzone:hover i {
    color: #00F2FE;
}

.wms-media-dropzone span {
    font-size: 13px;
    font-weight: bold;
    color: var(--muted);
}

.wms-media-dropzone small {
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    margin-top: 4px;
}

.video-zone {
    height: 180px;
}

.img-zone {
    height: 100px;
}

.wms-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--line);
    background: rgba(255,255,255,0.02);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.wms-btn-secondary {
    background: transparent;
    border: 1px solid var(--line);
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
}

.wms-btn-secondary:hover {
    background: rgba(255,255,255,0.1);
}

.wms-btn-primary {
    background: linear-gradient(90deg, #00F2FE, #4FACFE);
    border: none;
    color: #000;
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0,242,254,0.4);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wms-btn-primary:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0,242,254,0.7);
}

.wms-btn-primary i {
    transition: transform 0.3s ease;
}

.wms-btn-primary:hover i {
    transform: rotate(15deg) scale(1.2);
}
/* AI ASSISTANT CHAT UI */
.ai-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00F2FE, #4FACFE);
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,242,254,0.4);
    z-index: 9999;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ai-fab:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 30px rgba(0,242,254,0.6);
}
.ai-fab{touch-action:none;user-select:none;-webkit-user-select:none}.ai-fab.is-dragging{transition:none!important;transform:none!important;cursor:grabbing!important}.ai-fab[data-custom-position="true"]{right:auto!important;bottom:auto!important}
.ai-fab .badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #EF4444;
    color: #fff;
    font-size: 10px;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 2px solid #0f1016;
}

.ai-chat-window {
    position: fixed;
    bottom: 96px;
    right: 24px;
    width: min(440px, calc(100vw - 48px));
    height: min(680px, calc(100vh - 120px));
    max-height: calc(100vh - 120px);
    background: linear-gradient(145deg, rgba(20,20,30,0.95), rgba(10,10,15,0.98));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 242, 254, 0.3);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0,242,254,0.1);
    display: flex;
    flex-direction: column;
    z-index: 9998;
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.ai-chat-window.active {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: all;
}

.ai-chat-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.2);
}

.ai-chat-header h3 {
    margin: 0;
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    white-space: nowrap;
}
.ai-chat-header h3 i {
    color: #00F2FE;
    font-size: 20px;
}
.ai-chat-header-actions { display:flex; align-items:center; gap:6px; flex:0 0 auto; margin-left:10px; }
.ai-chat-icon-btn {
    width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
    color:#9feaf0; border:1px solid rgba(0,242,254,.18); font-size:18px;
    cursor:pointer; background:transparent;
}
.ai-chat-icon-btn.active { background:rgba(0,242,254,.14); color:#00f2fe; }
.ai-chat-icon-btn.is-teaching {
    color:#041822;
    border-color:rgba(103,232,249,.9);
    background:linear-gradient(135deg,#22d3ee,#60a5fa);
    box-shadow:0 0 18px rgba(34,211,238,.3);
}
.ai-teaching-panel[hidden] { display:none!important; }
.ai-teaching-panel {
    max-height:330px;
    overflow-y:auto;
    padding:12px 14px;
    border-bottom:1px solid rgba(34,211,238,.18);
    background:linear-gradient(180deg,rgba(8,26,42,.98),rgba(5,16,29,.98));
}
.ai-teaching-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.ai-teaching-head strong { display:block; color:#e8fbff; font-size:13px; }
.ai-teaching-head small { display:block; margin-top:3px; color:#8fa8b7; font-size:11px; line-height:1.35; }
.ai-teaching-head>span { flex:0 0 auto; padding:4px 8px; border:1px solid rgba(34,211,238,.25); border-radius:999px; background:rgba(34,211,238,.08); color:#73edf6; font-size:10px; font-weight:800; }
.ai-teaching-steps { display:grid; gap:7px; }
.ai-teaching-step { display:grid; grid-template-columns:24px minmax(0,1fr); gap:8px; align-items:start; padding:8px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(255,255,255,.035); }
.ai-teaching-step b { width:24px; height:24px; display:grid; place-items:center; border-radius:8px; background:rgba(34,211,238,.12); color:#65eaf4; font-size:10px; }
.ai-teaching-step span { color:#d5e8f2; font-size:12px; line-height:1.4; word-break:break-word; }
.ai-teaching-empty { padding:16px 10px; border:1px dashed rgba(34,211,238,.2); border-radius:10px; color:#7f98a8; font-size:11px; line-height:1.45; text-align:center; }
.ai-teaching-actions { display:grid; grid-template-columns:1fr 1.45fr; gap:8px; margin-top:10px; }
.ai-teaching-actions button { min-height:36px; border:1px solid rgba(34,211,238,.22); border-radius:9px; background:rgba(255,255,255,.035); color:#b8d6df; font-size:11px; font-weight:750; cursor:pointer; }
#aiTeachingFinish { border-color:rgba(34,211,238,.6); background:linear-gradient(135deg,#18cfdf,#4caaf7); color:#041822; }

.ai-chat-close {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 20px;
    cursor: pointer;
    transition: color 0.3s;
}
.ai-chat-close:hover {
    color: #EF4444;
}

/* ProjectRun progress: project -> scene -> verified step. */
.grok-scene-summary{display:grid;gap:7px;margin:0 0 12px}.grok-phase{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;align-items:center;padding:8px 9px;border:1px solid rgba(148,184,205,.13);border-radius:9px;color:#71879a}.grok-phase span{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.grok-phase b{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.grok-phase.active{color:#83f7ff;border-color:rgba(0,242,254,.5);background:rgba(0,242,254,.06)}.grok-phase.done{color:#65f0a5;border-color:rgba(101,240,165,.2)}.grok-phase.error{color:#ff8b8b;border-color:rgba(239,68,68,.48);background:rgba(239,68,68,.06)}.grok-step-details{border-top:1px solid rgba(148,184,205,.13);padding-top:10px}.grok-step-details summary{cursor:pointer;color:#b7faff;font-size:10px;font-weight:800;margin-bottom:9px}

/* Remotion is the presentation stage after the HyperFrames quality master. */
.rm-modal{position:fixed;inset:0;z-index:2147483647;display:grid;place-items:center;padding:18px;background:rgba(2,7,16,.82);backdrop-filter:blur(14px)}
.rm-modal[hidden]{display:none!important}.rm-dialog{width:min(1100px,96vw);max-height:94vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(42,226,242,.5);border-radius:24px;background:linear-gradient(155deg,rgba(6,22,39,.98),rgba(4,13,28,.98));box-shadow:0 32px 100px rgba(0,0,0,.62),0 0 44px rgba(0,242,254,.08)}
.rm-header{display:grid;grid-template-columns:58px 1fr 42px;gap:16px;align-items:center;padding:22px 24px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(110deg,rgba(0,242,254,.08),transparent 60%)}
.rm-brand-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,#13d9e8,#4da9ff);color:#04202a;font-size:26px;box-shadow:0 10px 28px rgba(0,214,232,.22)}
.rm-header small{display:block;color:#56e8f2;font-size:11px;font-weight:850;letter-spacing:1.2px}.rm-header h3{margin:4px 0 3px;color:#fff;font-size:24px}.rm-header p{margin:0;color:#91a4b8;font-size:13px}.rm-close{width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#cbd9e8;font-size:19px;cursor:pointer}.rm-close:hover{border-color:#ff6475;color:#ff7181}
.rm-body{padding:20px 24px;overflow-y:auto}.rm-source{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;padding:12px 15px;border-radius:14px;border:1px solid rgba(55,231,174,.25);background:rgba(32,188,140,.07);margin-bottom:16px}.rm-source>i{font-size:24px;color:#48e6ae}.rm-source small{display:block;color:#7398a5;font-size:10px;font-weight:800}.rm-source strong{display:block;color:#eafcff;font-size:14px;margin-top:2px}.rm-source>span{color:#61e6b3;font-size:11px;font-weight:750}
.rm-workspace{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(420px,1.6fr);gap:14px}.rm-panel{border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.025);padding:16px}.rm-panel-title{display:flex;gap:11px;align-items:flex-start;margin-bottom:14px}.rm-panel-title>i{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(0,242,254,.09);color:#48e9f2;font-size:18px}.rm-panel-title strong{display:block;color:#f5fbff;font-size:14px}.rm-panel-title small{display:block;color:#8194aa;font-size:11px;margin-top:3px}
.rm-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.rm-field>span{color:#aab9ca;font-size:11px;font-weight:720}.rm-field input,.rm-field select{width:100%;height:42px;border:1px solid rgba(116,150,180,.25);border-radius:10px;background:rgba(2,10,22,.72);color:#eefaff;padding:0 12px;font:600 13px inherit;outline:none}.rm-field input:focus,.rm-field select:focus{border-color:rgba(0,242,254,.65);box-shadow:0 0 0 3px rgba(0,242,254,.06)}
.rm-timeline{display:grid;grid-template-columns:20% 60% 20%;height:34px;overflow:hidden;border-radius:9px;margin-bottom:14px;border:1px solid rgba(255,255,255,.08)}.rm-timeline span{display:grid;place-items:center;font-size:9px;font-weight:850;letter-spacing:.8px}.rm-timeline .intro{background:rgba(48,208,229,.25);color:#8cf6ff}.rm-timeline .content{background:rgba(56,112,180,.18);color:#b9d9ff}.rm-timeline .outro{background:rgba(255,80,143,.18);color:#ff9dc2}.rm-copy-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.rm-copy-grid .rm-wide{grid-column:1/-1}.rm-toggle-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.rm-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:9px 11px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.025);color:#e5f4fb}.rm-toggle>span{display:grid;grid-template-columns:22px 1fr;align-items:center;column-gap:5px}.rm-toggle i{grid-row:1/3;color:#54e8f2;font-size:17px}.rm-toggle b{font-size:11px}.rm-toggle small{grid-column:2;color:#74889c;font-size:9px;line-height:1.3}.rm-toggle input{accent-color:#18dce9}
.rm-quality-note,.rm-success{display:flex;gap:12px;align-items:center;margin-top:14px;padding:13px 15px;border:1px solid rgba(55,231,174,.22);border-radius:13px;background:rgba(23,169,123,.06)}.rm-success[hidden]{display:none!important}.rm-quality-note>i,.rm-success>i{font-size:24px;color:#4fe3ad}.rm-quality-note strong,.rm-success strong{display:block;color:#bfffe3;font-size:12px}.rm-quality-note span,.rm-success small{display:block;color:#8ba5ae;font-size:10px;margin-top:2px;line-height:1.4}.rm-progress{margin-top:14px;padding:14px;border-radius:13px;background:rgba(2,10,22,.66)}.rm-progress>div:first-child{display:flex;justify-content:space-between;color:#e9f8ff;font-size:12px}.rm-progress-track{height:7px;margin:10px 0;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}.rm-progress-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,#0bd9e8,#52e8ad);transition:width .25s}.rm-progress small{color:#8296aa;font-size:10px}.rm-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 24px;border-top:1px solid rgba(255,255,255,.08);background:rgba(1,7,16,.72)}.rm-actions>span{margin-right:auto;color:#7f96a9;font-size:10px}.rm-actions>span i{color:#5ee6af}.rm-actions button{min-width:150px}
.rm-success{position:relative;border-color:rgba(79,227,173,.52);background:linear-gradient(110deg,rgba(17,132,104,.2),rgba(9,83,114,.16));box-shadow:0 0 0 1px rgba(79,227,173,.06),0 12px 30px rgba(0,0,0,.18);overflow:hidden}.rm-success.is-visible{animation:rmSuccessArrive .48s ease-out both}.rm-success-mark{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:50%;color:#05261d;background:#5ee6af;box-shadow:0 0 0 6px rgba(94,230,175,.1),0 0 22px rgba(94,230,175,.32);font-size:21px}.rm-success>div{min-width:0;flex:1}.rm-success strong{font-size:13px}.rm-success small{font-size:11px}.rm-success-badge{padding:5px 9px;border:1px solid rgba(94,230,175,.35);border-radius:999px;color:#72efbd;background:rgba(94,230,175,.08);font-size:11px;font-weight:800}@keyframes rmSuccessArrive{0%{opacity:0;transform:translateY(8px) scale(.985)}70%{transform:translateY(-2px) scale(1.005)}100%{opacity:1;transform:none}}
.remotion-final-btn{border-color:rgba(58,218,242,.48)!important;background:linear-gradient(110deg,rgba(0,242,254,.12),rgba(74,132,255,.12))!important;color:#9cf7ff!important}.remotion-final-btn:hover{box-shadow:0 0 18px rgba(0,242,254,.16)}
@media(max-width:800px){.rm-workspace{grid-template-columns:1fr}.rm-toggle-row{grid-template-columns:1fr}.rm-dialog{max-height:98vh}.rm-header p{display:none}.rm-actions>span{display:none}.rm-actions button{min-width:0;flex:1}}

.ai-chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ai-chat-messages::-webkit-scrollbar { width: 6px; }
.ai-chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.chat-msg {
    display: flex;
    gap: 12px;
    max-width: 90%;
    animation: fadeInUp 0.3s ease forwards;
}
.chat-msg.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    flex-shrink: 0;
}
.chat-msg.ai .chat-avatar {
    background: rgba(0, 242, 254, 0.1);
    color: #00F2FE;
    border: 1px solid rgba(0,242,254,0.3);
}
.chat-msg.user .chat-avatar {
    background: linear-gradient(135deg, #e8f9ff, #9eefff);
    color: #06202a;
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 4px 12px rgba(0,242,254,.16);
}

.chat-bubble {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #fff;
}
.chat-msg.ai .chat-bubble {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-top-left-radius: 4px;
}
.agent-reply { white-space: normal; }
.agent-reply strong { color: #f5fbff; font-weight: 750; }
.agent-bullet { color: #42e8f5; font-weight: 800; }
.chat-msg.user .chat-bubble {
    background: linear-gradient(135deg, rgba(0,242,254,0.2), rgba(79,172,254,0.2));
    border: 1px solid rgba(0,242,254,0.3);
    border-top-right-radius: 4px;
}

.chat-typing {
    display: flex;
    gap: 4px;
    padding: 14px 16px;
}
.chat-typing span {
    width: 6px;
    height: 6px;
    background: #00F2FE;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}
.chat-typing span:nth-child(1) { animation-delay: -0.32s; }
.chat-typing span:nth-child(2) { animation-delay: -0.16s; }

.ai-chat-input-area {
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.ai-chat-compose-row { display:flex; flex-direction:column; gap:8px; width:100%; padding:9px; box-sizing:border-box; border:1px solid rgba(83,222,237,.24); border-radius:17px; background:linear-gradient(145deg,rgba(17,27,41,.96),rgba(9,17,30,.98)); box-shadow:0 10px 28px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.035); }
.ai-chat-compose-row:focus-within { border-color:rgba(0,242,254,.58); box-shadow:0 0 0 3px rgba(0,242,254,.07),0 12px 30px rgba(0,0,0,.25); }
.ai-chat-compose-toolbar,.ai-chat-compose-tools{display:flex;align-items:center}.ai-chat-compose-toolbar{justify-content:space-between;gap:10px}.ai-chat-compose-tools{gap:7px;min-width:0}.ai-chat-compose-tools>span{margin-left:2px;color:#71869a;font-size:9px;white-space:nowrap}.ai-chat-compose-tools kbd{padding:2px 4px;border:1px solid rgba(148,184,205,.22);border-radius:4px;background:rgba(255,255,255,.04);color:#9fb4c6;font:700 8px inherit}
.ai-compose-btn {
    width:34px; height:34px; flex:0 0 34px; border-radius:10px; cursor:pointer;
    display:grid; place-items:center; border:1px solid rgba(0,242,254,.25);
    background:rgba(255,255,255,.05); color:#9feaf0; font-size:18px;
}
.ai-compose-btn:hover { background:rgba(0,242,254,.12); color:#00f2fe; }
.ai-compose-btn.recording { background:rgba(239,68,68,.18); color:#ff6b6b; border-color:#ef4444; animation:aiRecordPulse 1.2s infinite; }
.ai-compose-btn.processing { opacity:.72; animation:aiRecordPulse 1.2s infinite; }
.ai-compose-btn.voice-enabled { background:rgba(16,185,129,.16); color:#66f4c5; border-color:rgba(52,211,153,.55); }
.ai-compose-btn.voice-error { background:rgba(239,68,68,.16);color:#ff8b8b;border-color:rgba(239,68,68,.55); }
.ai-voice-reply-toggle{width:auto;min-width:68px;padding:0 8px;display:flex;gap:5px}.ai-voice-reply-toggle small{font-size:9px;font-weight:700;white-space:nowrap}
.ai-chat-input-area{position:relative}.ai-chat-input-area.drag-active::after{content:'Thả file hoặc hình ảnh vào đây';position:absolute;inset:8px;z-index:6;display:grid;place-items:center;border:2px dashed rgba(0,242,254,.72);border-radius:16px;background:rgba(5,20,34,.94);color:#9cf8ff;font-size:12px;font-weight:800;letter-spacing:.02em;pointer-events:none;box-shadow:0 0 30px rgba(0,242,254,.14)}
.scene-automation-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}.grok-automation-panel{position:sticky;top:18px;padding:16px;border:1px solid rgba(0,242,254,.28);border-radius:14px;background:rgba(5,17,29,.96);box-shadow:0 18px 45px rgba(0,0,0,.28)}.grok-automation-panel[hidden]{display:none}.grok-auto-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:13px}.grok-auto-head small{display:block;color:#8498aa;margin-top:3px}.grok-auto-state{padding:4px 7px;border-radius:99px;background:rgba(0,242,254,.1);color:#84f6ff;font-size:9px;font-weight:800;white-space:nowrap}.grok-auto-state.paused{background:rgba(245,158,11,.15);color:#f59e0b}.grok-auto-state.cancelled{background:rgba(148,163,184,.15);color:#94a3b8}.grok-auto-state.error{background:rgba(239,68,68,.15);color:#ff8b8b}.grok-step-list{display:grid;gap:7px}.grok-step{display:grid;grid-template-columns:24px 1fr;gap:8px;padding:8px;border:1px solid rgba(148,184,205,.13);border-radius:9px;color:#71879a}.grok-step i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.05)}.grok-step b{display:block;color:inherit;font-size:10px}.grok-step small{display:block;margin-top:2px;font-size:9px;line-height:1.35}.grok-step.done{color:#65f0a5;border-color:rgba(101,240,165,.2)}.grok-step.active{color:#83f7ff;border-color:rgba(0,242,254,.5);background:rgba(0,242,254,.06)}.grok-step.active i{animation:aiRecordPulse 1.1s infinite}.grok-step.error{color:#ff8b8b;border-color:rgba(239,68,68,.48);background:rgba(239,68,68,.06)}.grok-auto-error{margin-top:10px;padding:9px;border-radius:8px;background:rgba(239,68,68,.08);color:#ff9b9b;font-size:10px;line-height:1.45}.grok-auto-actions{display:grid;grid-template-columns:repeat(2, 1fr);gap:6px;margin-top:10px}.grok-auto-actions button{padding:6px 8px;font-size:11px;font-weight:600;border-radius:8px;border:1px solid rgba(0,242,254,.3);background:rgba(0,242,254,.08);color:#b7faff;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all 0.2s ease}.grok-auto-actions button:hover{background:rgba(0,242,254,.16);border-color:rgba(0,242,254,.5)}.grok-auto-actions button.danger{border-color:rgba(239,68,68,.35);color:#ff9b9b;background:rgba(239,68,68,.07)}.grok-auto-actions button.danger:hover{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.5)}.grok-auto-run-btn{border-color:rgba(101,240,165,.5)!important;color:#65f0a5!important}
.grok-phase-dot{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;flex:1}.grok-phase-dot::after{content:'';position:absolute;top:13px;left:calc(50% + 14px);width:calc(100% - 28px);height:2px;background:rgba(255,255,255,.08);z-index:1}.grok-phase-dot:last-child::after{display:none}.grok-phase-circle{width:28px;height:28px;border-radius:50%;background:#0b1926;border:2px solid #23394d;display:grid;place-items:center;font-size:11px;font-weight:800;color:#71879a;z-index:2;transition:all 0.3s ease}.grok-phase-dot.done .grok-phase-circle{background:rgba(16,185,129,.15);border-color:#10b981;color:#10b981}.grok-phase-dot.active .grok-phase-circle{background:rgba(59,130,246,.15);border-color:#3b82f6;color:#3b82f6;box-shadow:0 0 10px rgba(59,130,246,.5)}.grok-phase-dot.error .grok-phase-circle{background:rgba(239,68,68,.15);border-color:#ef4444;color:#ef4444}.grok-phase-dot.done::after{background:#10b981}.grok-phase-dot.active::after{background:linear-gradient(90deg, #3b82f6, rgba(255,255,255,.08))}.grok-phase-label{font-size:10px;font-weight:700;color:#71879a;text-transform:uppercase}.grok-phase-dot.active .grok-phase-label{color:#3b82f6}.grok-phase-dot.done .grok-phase-label{color:#10b981}.grok-phase-dot.error .grok-phase-label{color:#ef4444}
@media(max-width:1150px){.scene-automation-layout{grid-template-columns:1fr}.grok-automation-panel{position:static;grid-row:1}}
.ai-compose-status { min-height:16px; color:#93a4b8; font-size:11px; padding-left:4px; }
.ai-compose-status.error { color:#ff7b7b; }
.ai-attachment-list { display:flex; gap:8px; overflow-x:auto; width:100%; padding:2px 0 4px; }
.ai-attachment-chip { position:relative;display:flex; align-items:center; gap:7px; min-width:0; max-width:210px; padding:6px 8px; border-radius:10px; background:rgba(0,242,254,.08); border:1px solid rgba(0,242,254,.2); color:#d9fbff; font-size:11px; }
.ai-attachment-chip img{width:38px;height:38px;flex:0 0 38px;object-fit:cover;border-radius:7px;border:1px solid rgba(255,255,255,.12)}
.ai-attachment-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ai-attachment-chip button { border:0; background:transparent; color:#ff8b8b; cursor:pointer; padding:0; }
.chat-attachment-summary{display:grid;gap:7px;margin-top:9px;color:#b7c7d9;font-size:11px}.chat-sent-image{position:relative;display:grid;width:min(230px,100%);padding:0;overflow:hidden;border:1px solid rgba(100,225,239,.3);border-radius:11px;background:rgba(3,15,27,.75);color:#d9f8ff;cursor:zoom-in;text-align:left}.chat-sent-image img{display:block;width:100%;max-height:180px;object-fit:cover;background:#06111e}.chat-sent-image span{padding:7px 30px 7px 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.chat-sent-image>i{position:absolute;right:8px;bottom:8px;color:#65edf3}.chat-sent-file{display:block}.ai-image-viewer{position:fixed;inset:0;z-index:2147483647;display:grid;place-items:center;padding:34px;background:rgba(1,6,14,.88);backdrop-filter:blur(12px);cursor:zoom-out}.ai-image-viewer img{display:block;max-width:min(1100px,92vw);max-height:88vh;object-fit:contain;border-radius:14px;border:1px solid rgba(118,231,242,.35);box-shadow:0 30px 90px rgba(0,0,0,.65)}.ai-image-viewer button{position:fixed;top:22px;right:24px;width:42px;height:42px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(8,20,33,.9);color:#fff;font-size:20px;cursor:pointer}
.ai-activity-panel { flex:1; overflow:hidden; padding:14px 16px; }
.ai-activity-panel[hidden] { display:none; }
.ai-activity-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:12px; }
.ai-activity-heading div { display:flex; flex-direction:column; gap:3px; }
.ai-activity-heading strong { font-size:14px; color:#fff; }
.ai-activity-heading small { color:#8392a8; font-size:11px; }
.ai-activity-heading button { border:1px solid rgba(255,255,255,.12); background:transparent; color:#9fb0c4; border-radius:8px; padding:7px 9px; cursor:pointer; }
.ai-activity-list { height:100%; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-bottom:42px; }
.ai-activity-item { display:grid; grid-template-columns:28px 1fr auto; gap:9px; align-items:start; padding:10px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.ai-activity-item > i { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:rgba(0,242,254,.09); color:#55e7f0; }
.ai-activity-item.error > i { color:#ff7373; background:rgba(239,68,68,.12); }
.ai-activity-item strong { display:block; font-size:12px; color:#edf8ff; margin-bottom:3px; }
.ai-activity-item p { margin:0; font-size:11px; line-height:1.35; color:#96a8bc; word-break:break-word; }
.ai-activity-item time { font-size:10px; color:#6f8197; white-space:nowrap; }
.ai-chat-input {
    width:100%;
    box-sizing:border-box;
    background: transparent;
    border: 0;
    border-radius: 10px;
    padding: 8px 9px 4px;
    color: #fff;
    font-size: 14px;
    resize: none;
    outline: none;
    min-height: 68px;
    max-height: 180px;
    line-height:1.5;
    font-family: inherit;
    transition: all 0.3s;
}
.ai-chat-input:focus {
    background: rgba(255,255,255,0.015);
}
.ai-chat-send {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #00F2FE;
    color: #000;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.3s;
}
.ai-chat-send:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,242,254,0.4);
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}
.ai-fab {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    background: transparent !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    z-index: 2147483647 !important; /* Max z-index */
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
@keyframes aiRecordPulse { 50% { box-shadow:0 0 0 7px rgba(239,68,68,0); } 0%,100% { box-shadow:0 0 0 2px rgba(239,68,68,.2); } }
@media (max-width: 520px) {
    .ai-chat-window { left:8px; right:8px; bottom:82px; width:auto; height:min(680px, calc(100vh - 96px)); }
    .ai-chat-header { padding:13px 14px; }
    .ai-chat-input-area { padding:10px; }
    .ai-chat-messages { padding:14px; }
    .chat-msg { max-width:96%; }
}
.ai-fab:hover {
    transform: scale(1.15) !important;
}
.ai-svg-orb {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 16px rgba(0, 242, 254, 0.5));
    animation: floatOrb 3s ease-in-out infinite;
}
@keyframes floatOrb {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.orb-pulse {
    animation: orbPulse 2s infinite alternate ease-in-out;
}
@keyframes orbPulse {
    0% { r: 35; }
    100% { r: 42; }
}
.orb-core {
    animation: corePulse 1.5s infinite alternate ease-in-out;
}
@keyframes corePulse {
    0% { opacity: 0.5; r: 12; }
    100% { opacity: 1; r: 16; }
}
.ai-fab .badge {
    position: absolute !important;
    top: 0px !important;
    right: 0px !important;
    background: #EF4444 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: bold !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 50% !important;
    border: 2px solid #0f1016 !important;
    z-index: 2 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
}

.ai-chat-close {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
}
.ai-chat-close:hover {
    background: rgba(239, 68, 68, 0.9) !important;
    color: #fff !important;
    transform: scale(1.05) !important;
}