*{box-sizing:border-box}
:root{
  --bg:#090b0e;--panel:#11151a;--line:#29323d;--muted:#7e8996;--text:#f2f4f6;
  --content:980px;--chat:820px;--header-h:52px;--rail-h:96px;
}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
body{overflow:hidden}
button,input,textarea{font:inherit}
button{cursor:pointer}
.app-shell{height:100dvh;min-height:420px;display:grid;grid-template-rows:var(--header-h) var(--rail-h) minmax(0,1fr);overflow:hidden}

.topbar{height:var(--header-h);display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--line);min-width:0}
.brand{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:12px;letter-spacing:1.2px}
.brand-mark{width:28px;height:28px;border-radius:7px;background:#f2f3f4;color:#090b0e;display:grid;place-items:center;font-weight:800}
.project-name{min-width:80px;width:220px;border:0;outline:0;background:transparent;color:#e7e9eb;font-weight:600;font-size:12px}
.generate{margin-left:auto;flex:none;border:0;border-radius:8px;background:#f2f3f4;color:#090b0e;padding:8px 13px;font-size:11px;font-weight:750}

.scene-rail-wrap{height:var(--rail-h);display:flex;align-items:center;gap:10px;width:min(var(--content),calc(100% - 28px));margin:0 auto;border-bottom:1px solid var(--line);min-width:0}
.scene-rail{display:flex;align-items:center;gap:10px;overflow-x:auto;overflow-y:hidden;min-width:0;flex:1;padding:11px 1px 8px;scrollbar-width:none}
.scene-rail::-webkit-scrollbar{display:none}
.scene-card{position:relative;flex:0 0 132px;width:132px;height:66px;border:1px solid #34404c;border-radius:8px;background:#11161c;color:#eef1f3;padding:0;overflow:hidden;text-align:left}
.scene-card.active{border-color:#eef1f3}
.scene-thumb{height:43px;background:#050607 center/cover no-repeat}
.scene-label{height:22px;display:flex;align-items:flex-start;padding:3px 9px 0;font-size:11px;line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene-index{color:#66727f;margin-right:4px}
.scene-delete{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;border:1px solid #3b4651;background:rgba(8,10,12,.9);color:#aab2bb;display:grid;place-items:center;padding:0;font-size:12px;line-height:1}
.scene-delete:hover{color:#fff;border-color:#707b87}
.round-button{border:1px solid #3a4652;background:#141a21;color:#edf0f2;border-radius:50%;padding:0;display:grid;place-items:center}
.scene-add{width:32px;height:32px;flex:0 0 32px;font-size:17px}

.chat-shell{position:relative;min-height:0;width:min(var(--chat),calc(100% - 28px));margin:0 auto;overflow:hidden}
.messages{position:absolute;inset:0 0 78px 0;overflow-y:auto;padding:28px 8px 18px;overscroll-behavior:contain}
.message{display:flex;align-items:flex-start;gap:10px;margin:0 0 20px}
.avatar{flex:0 0 28px;width:28px;height:28px;border-radius:7px;background:#202733;display:grid;place-items:center;font-size:11px;font-weight:800}
.message p{margin:5px 0 0;font-size:13px;line-height:1.5;max-width:680px}
.message.user{justify-content:flex-end}
.message.user .avatar{order:2;background:#eef0f2;color:#090b0e}

.composer-wrap{position:absolute;left:0;right:0;bottom:0;padding:8px 0 12px;background:linear-gradient(to bottom,rgba(9,11,14,0),#090b0e 18px,#090b0e 100%);z-index:10}
.composer{min-height:58px;max-height:160px;display:flex;align-items:flex-end;gap:9px;border:1px solid #3a4652;border-radius:18px;background:var(--panel);padding:10px}
.attach{width:32px;height:32px;flex:0 0 32px;font-size:17px}
.composer textarea{display:block;flex:1;min-width:0;min-height:32px;max-height:128px;overflow-y:auto;resize:none;border:0;outline:0;background:transparent;color:#f3f5f6;padding:7px 3px;font-size:13px;line-height:18px}
.composer textarea::placeholder{color:#7e8996}
.send{width:34px;height:34px;flex:0 0 34px;border:0;border-radius:50%;background:#f1f2f3;color:#090b0e;font-weight:800}

.render-preview{height:260px;width:min(720px,calc(100% - 28px));margin:14px auto 0}
#preview{height:100%;border:1px solid var(--line);border-radius:10px;background:#030405;color:#74808c;display:grid;place-items:center}

@media(max-width:620px){
  :root{--rail-h:90px}
  .topbar{padding:0 9px;gap:8px}
  .brand strong{font-size:11px}
  .project-name{width:110px;font-size:11px}
  .generate{padding:7px 10px}
  .scene-rail-wrap{width:calc(100% - 14px);gap:7px}
  .scene-card{flex-basis:118px;width:118px}
  .chat-shell{width:calc(100% - 20px)}
  .messages{padding-top:22px}
}
@media(max-height:560px){
  :root{--rail-h:82px}
  .scene-card{height:58px}
  .scene-thumb{height:36px}
  .messages{padding-top:16px}
  .composer-wrap{padding-bottom:8px}
}
/* V0.9.5: ChatGPT-style viewport anchoring */
@media(max-height:430px){
  :root{--header-h:50px;--rail-h:88px}
  .messages{inset:0 0 72px 0;padding-top:18px}
  .composer-wrap{padding-bottom:7px}
  .composer{min-height:54px}
}

/* V0.9.6 — viewport flex architecture */
.app-shell{
  height:100dvh;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.topbar{
  flex:0 0 var(--header-h);
  height:var(--header-h);
}
.scene-rail-wrap{
  flex:0 0 var(--rail-h);
  height:var(--rail-h);
}
.chat-shell{
  position:static;
  flex:1 1 auto;
  min-height:0;
  width:min(var(--chat),calc(100% - 28px));
  margin:0 auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.messages{
  position:static;
  inset:auto;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:28px 8px 18px;
}
.composer-wrap{
  position:static;
  left:auto;
  right:auto;
  bottom:auto;
  flex:0 0 auto;
  padding:8px 0 12px;
  background:var(--bg);
  z-index:auto;
}
.composer{
  flex:0 0 auto;
}

/* Scene rail scroll indicator restored */
.scene-rail{
  scrollbar-width:thin;
  scrollbar-color:#55606c transparent;
  padding-bottom:8px;
}
.scene-rail::-webkit-scrollbar{
  display:block;
  height:5px;
}
.scene-rail::-webkit-scrollbar-track{
  background:transparent;
}
.scene-rail::-webkit-scrollbar-thumb{
  background:#55606c;
  border-radius:99px;
}

/* Keep the same structure in short windows; only tighten spacing. */
@media(max-height:430px){
  .messages{position:static;inset:auto;flex:1 1 auto;padding:16px 8px 8px}
  .composer-wrap{position:static;padding:6px 0 7px}
}

/* V0.9.7 — floating composer inside the correctly-sized chat viewport */
.chat-shell{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
.messages{
  position:absolute;
  inset:0;
  overflow-y:auto;
  padding:28px 8px 96px;
  min-height:0;
}
.composer-wrap{
  position:absolute;
  left:0;
  right:0;
  bottom:10px;
  padding:0;
  z-index:20;
  pointer-events:none;
  background:transparent;
}
.composer{
  pointer-events:auto;
  min-height:58px;
  max-height:160px;
  box-shadow:0 8px 28px rgba(0,0,0,.28);
}
@media(max-height:430px){
  .messages{
    position:absolute;
    inset:0;
    padding:16px 8px 88px;
  }
  .composer-wrap{
    position:absolute;
    left:0;
    right:0;
    bottom:8px;
    padding:0;
  }
}

/* V0.9.8 — compact render preview; layout stays stable */
.render-preview{
  flex:0 0 112px;
  width:min(260px,calc(100% - 28px));
  height:112px;
  margin:8px auto 0;
}
#preview{
  width:100%;
  height:100%;
  border-radius:8px;
  overflow:hidden;
}
#preview video,#preview img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* V0.9.9 — scene rail becomes the render rail */
.scene-card.render-complete{border-color:#46515c}
.scene-card.render-active{border-color:#dfe4e8;box-shadow:0 0 0 1px #dfe4e8 inset}
.scene-card.render-queued{opacity:.48}
.scene-card .render-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:#242c35}
.scene-card .render-progress>span{display:block;height:100%;background:#e9edf0;width:0}
.scene-card .render-status{margin-left:auto;color:#8f9aa5;font-size:9px}
.scene-card.render-active .scene-thumb{background-color:#080b0e}
.render-lock{
  position:absolute;left:0;right:0;bottom:10px;z-index:30;
  display:flex;align-items:center;justify-content:center;gap:12px;
  min-height:58px;border:1px solid #3a4652;border-radius:18px;
  background:#11151a;padding:10px 14px;
}
.render-lock strong{font-size:12px}
.render-lock span{font-size:10px;color:#8d98a4}
.render-lock button{margin-left:auto;border:1px solid #46515c;border-radius:8px;background:#181e25;color:#eef1f3;padding:7px 11px;font-size:10px}

/* V0.11.0 — clean render-state layout rebuilt from the working V0.10.x base */
body.rendering .chat-shell{display:none}
body.rendering .scene-rail-wrap{border-bottom:1px solid var(--line)}

body.rendering .render-preview{
  flex:1 1 auto;
  min-height:0;
  width:100%;
  height:auto;
  margin:0;
  padding:12px 14px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
body.rendering #preview{
  width:100%;
  height:100%;
  min-height:0;
  border:0;
  border-radius:0;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* The whole render unit is sized from BOTH viewport width and remaining viewport height.
   This guarantees media + labels + progress + Cancel stay visible at 100% browser zoom. */
.expanded-preview-frame{
  --render-w:min(640px, calc(100vw - 48px), calc((100dvh - var(--header-h) - var(--rail-h) - 116px) * 4 / 3));
  flex:0 0 auto;
  width:var(--render-w);
  max-width:100%;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.expanded-preview-media{
  flex:0 0 auto;
  width:100%;
  aspect-ratio:4 / 3;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#030405;
  border:1px solid #29323d;
  border-radius:10px;
}
.expanded-h3-preview{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.expanded-preview-waiting{
  color:#74808c;
  font-size:12px;
}

/* These are tied to the exact media width, not the page width. */
.expanded-preview-meta{
  flex:0 0 30px;
  width:100%;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:16px;
  padding:0 8px;
  border:0;
  color:#9aa5af;
  font-size:11px;
}
.expanded-preview-meta span{
  justify-self:start;
  white-space:nowrap;
}
.expanded-preview-meta strong{
  justify-self:end;
  min-width:3ch;
  text-align:right;
  white-space:nowrap;
  color:#eef1f3;
  font-size:11px;
}
.expanded-preview-progress{
  flex:0 0 3px;
  width:100%;
  height:3px;
  overflow:hidden;
  background:#242c35;
}
.expanded-preview-progress span{
  display:block;
  height:100%;
  width:0;
  background:#e9edf0;
  transition:width .12s linear;
}
.expanded-preview-actions{
  flex:0 0 42px;
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:8px 0 0;
  border:0;
  background:transparent;
}
.expanded-preview-actions button{
  border:1px solid #46515c;
  border-radius:8px;
  background:#181e25;
  color:#eef1f3;
  padding:7px 13px;
  font-size:10px;
}
.expanded-preview-actions button:hover{background:#202730}

/* Short screens: preserve the same layout; the computed render width shrinks the 4:3 media. */
@media(max-height:560px){
  body.rendering .render-preview{padding-top:7px;padding-bottom:7px}
  .expanded-preview-frame{
    --render-w:min(640px, calc(100vw - 36px), calc((100dvh - var(--header-h) - var(--rail-h) - 94px) * 4 / 3));
  }
  .expanded-preview-meta{flex-basis:26px}
  .expanded-preview-actions{flex-basis:36px;padding-top:5px}
}

.typing-caret{display:inline-block;margin-left:2px;animation:autofilmBlink .8s steps(1) infinite}.message.streaming p{white-space:pre-wrap}@keyframes autofilmBlink{50%{opacity:0}}



/* V0.15.1 — finished video lives inside normal conversation flow.
   It no longer consumes a separate app-shell flex row. */
.finished-review-card{
  width:min(320px,calc(100% - 56px));
  margin:4px auto 24px;
  flex:0 0 auto;
}
.finished-review-video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:contain;
  background:#030405;
  border:1px solid #29323d;
  border-radius:9px;
}
@media(max-width:480px){
  .finished-review-card{width:min(280px,calc(100% - 36px));}
}

/* V0.15.2 — Modern AutoFilm scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.30);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}



/* V0.15.3 — Give the conversation scrollbar breathing room */
#messages {
  padding-right: 16px;
  scrollbar-gutter: stable;
}


/* =========================================================
   V0.16.0 — Clean conversational shell
   Finished/planning state follows a full-width scroll viewport
   with centered content and an independently anchored composer.
   ========================================================= */

/* Keep the app itself locked to the viewport; only conversation scrolls. */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}

body {
  margin: 0;
}

.app,
#app {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

/* Chat owns the remaining viewport and never creates page overflow. */
.chat {
  position: relative;
  min-height: 0;
  overflow: hidden !important;
}

/* Full-width scroll viewport: scrollbar stays at the far-right edge. */
#messages {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 28px max(24px, calc((100% - 760px) / 2)) 128px !important;
  scrollbar-gutter: auto !important;
  scroll-padding-bottom: 128px;
}

/* Messages form the centered conversational column. */
#messages > .message,
#messages > .finished-video-message {
  box-sizing: border-box;
  width: 100%;
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Comfortable rhythm instead of stacked fixed panels. */
#messages > .message {
  margin-top: 0;
  margin-bottom: 22px;
}

/* Finished media behaves like an attachment in the conversation. */
#messages > .finished-video-message {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 2px 0 24px;
}

#messages > .finished-video-message video,
#messages .finished-review-video,
#messages .finished-video {
  display: block;
  width: min(320px, 72vw) !important;
  max-width: 320px !important;
  height: auto !important;
  max-height: 240px !important;
  object-fit: contain !important;
  border-radius: 10px;
  background: #000;
}

/* Composer is independent of message height and remains cleanly anchored. */
.composer-wrap,
.composerWrap,
#composerWrap {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 18px !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box;
  width: min(820px, calc(100% - 32px)) !important;
  max-width: 820px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 20;
}

/* Prevent the composer itself from inheriting viewport-sized rules. */
.composer {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Narrow-window behavior matching the same hierarchy rather than scaling UI. */
@media (max-width: 640px) {
  #messages {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 22px !important;
    padding-bottom: 112px !important;
    scroll-padding-bottom: 112px;
  }

  #messages > .finished-video-message video,
  #messages .finished-review-video,
  #messages .finished-video {
    width: min(280px, calc(100vw - 64px)) !important;
    max-width: 280px !important;
    max-height: 210px !important;
  }

  .composer-wrap,
  .composerWrap,
  #composerWrap {
    width: calc(100% - 24px) !important;
    bottom: 12px !important;
  }
}

/* Modern, unobtrusive scrollbars. */
#messages {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
#messages::-webkit-scrollbar { width: 6px; }
#messages::-webkit-scrollbar-track { background: transparent; }
#messages::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}
#messages::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.30);
}

/* V0.17.0 — one visual reference */
.composer{position:relative}
.reference-chip{
  position:absolute;
  left:14px;
  bottom:calc(100% + 10px);
  width:72px;
  height:72px;
  border-radius:12px;
  overflow:visible;
  background:#202020;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.reference-chip[hidden]{display:none!important}
.reference-chip img{
  display:block;width:100%;height:100%;object-fit:cover;border-radius:11px;
}
.reference-chip button{
  position:absolute;right:-7px;top:-7px;width:22px;height:22px;border:0;border-radius:50%;
  background:#303030;color:#fff;font-size:16px;line-height:20px;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.reference-chip button:hover{background:#454545}

/* V0.18.0 — compact persistent six-reference UI */
.reference-chip{display:none!important}
.reference-badge{
  flex:0 0 auto;height:30px;min-width:42px;padding:0 7px;border:1px solid rgba(255,255,255,.12);
  border-radius:15px;background:#242424;color:#ddd;display:flex;align-items:center;gap:5px;cursor:pointer;
}
.reference-badge[hidden]{display:none!important}
#referenceMiniStack{display:flex;align-items:center;width:24px;height:22px;position:relative}
#referenceMiniStack img{
  position:relative;width:20px;height:20px;object-fit:cover;border-radius:5px;border:1px solid #444;
  margin-right:-14px;background:#111;
}
#referenceCount{font-size:12px;font-weight:600;min-width:9px;text-align:center}
.reference-popover{
  position:absolute;left:10px;bottom:calc(100% + 10px);width:250px;max-height:300px;overflow:auto;
  padding:10px;border-radius:14px;background:#202020;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 35px rgba(0,0,0,.38);z-index:50;
}
.reference-popover[hidden]{display:none!important}
.reference-popover-title{
  display:flex;justify-content:space-between;align-items:center;padding:2px 4px 9px;
  font-size:12px;font-weight:600;color:#ddd;
}
#referenceSlots{font-weight:400;color:#888}
.reference-list{display:flex;flex-direction:column;gap:6px}
.reference-row{
  display:grid;grid-template-columns:36px 1fr 26px;align-items:center;gap:8px;
  min-height:40px;padding:4px 5px;border-radius:9px;background:rgba(255,255,255,.035);
}
.reference-row img{width:36px;height:36px;object-fit:cover;border-radius:7px}
.reference-row span{font-size:12px;color:#ddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reference-row button{
  width:24px;height:24px;border:0;border-radius:50%;background:transparent;color:#aaa;font-size:18px;cursor:pointer;
}
.reference-row button:hover{background:#383838;color:#fff}

#addScene:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}

.new-film{margin-left:auto;flex:none;border:1px solid var(--line);border-radius:8px;background:transparent;color:#e7e9eb;padding:8px 13px;font-size:11px;font-weight:700;cursor:pointer}
.new-film:hover{background:#171b21}
.new-film:disabled{opacity:.45;cursor:not-allowed}
.topbar .new-film + .generate{margin-left:0}
@media(max-width:700px){.new-film{padding:7px 9px}}

.media-ref-icon,.mini-media{display:flex;align-items:center;justify-content:center;background:#2a2a2a;color:#ddd;border-radius:8px;font-size:16px}.media-ref-icon{width:42px;height:42px;flex:0 0 42px}.mini-media{width:24px;height:24px;border:2px solid #181818;margin-left:-6px}.reference-row small{color:#777;font-size:10px}

.film-length{
  height:38px;padding:0 12px;border:1px solid rgba(255,255,255,.14);
  border-radius:10px;background:rgba(255,255,255,.06);color:inherit;
  font:inherit;font-weight:600;outline:none;cursor:pointer;
}
.film-length:focus{border-color:rgba(255,255,255,.32)}
.film-length option{background:#171717;color:#fff}


/* AutoFilm mobile portrait controls fix */
@media (max-width: 700px) and (orientation: portrait) {
  /* Keep the composer and generation controls inside the viewport. */
  .composer,
  .composer-row,
  .input-row,
  .chat-input-row {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Allow the controls to wrap instead of pushing Generate off-screen. */
  .composer-row,
  .input-row,
  .chat-input-row {
    flex-wrap: wrap;
  }

  #filmLength {
    flex: 0 0 auto;
    max-width: 112px;
  }

  #generate {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 1 1 120px;
    min-width: 105px;
    max-width: 100%;
    position: relative;
    right: auto;
    transform: none;
  }

  /* If Generate is positioned in the composer actions area, keep that area visible. */
  .composer-actions,
  .input-actions,
  .chat-actions {
    display: flex !important;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    gap: 8px;
    overflow: visible;
  }

  body, .app, main {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* Temporary: film/project name removed from visible UI */
.film-name, .film-title, .project-name, #filmName, #filmTitle, #projectName {
  display:none !important;
}

/* Strong mobile portrait composer fix */
@media (max-width: 700px) and (orientation: portrait) {
  .bottom-bar, .composer, .composer-wrap, .composer-inner,
  .prompt-bar, .input-area, .input-wrap {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }
  #generate {
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:static !important;
    transform:none !important;
    right:auto !important;
    left:auto !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    flex:1 0 100% !important;
    margin-top:8px !important;
    box-sizing:border-box !important;
    justify-content:center !important;
    z-index:50 !important;
  }
  #filmLength {
    display:block !important;
    position:static !important;
    width:100% !important;
    max-width:none !important;
    flex:1 0 100% !important;
    box-sizing:border-box !important;
  }
  body { overflow-x:hidden !important; }
}

/* Final portrait safety: do not alter chat layout; only guarantee generation controls. */
@media (max-width:700px) and (orientation:portrait){
 #generate{
   display:flex!important; visibility:visible!important; opacity:1!important;
   position:fixed!important; left:12px!important; right:12px!important;
   bottom:76px!important; width:auto!important; max-width:none!important;
   z-index:9999!important; justify-content:center!important;
 }
 body.rendering #generate, #generate[disabled]{ visibility:visible!important; }
}

/* Checked mobile portrait controls: keep buttons in normal document flow. */
@media (max-width:700px) and (orientation:portrait){
  .topbar{display:flex!important;flex-wrap:wrap!important;gap:8px!important;justify-content:center!important}
  #filmLength,#generate,#newFilm{
    display:inline-flex!important;visibility:visible!important;opacity:1!important;
    position:static!important;transform:none!important;left:auto!important;right:auto!important;
    max-width:100%!important;box-sizing:border-box!important;
  }
  #generate{min-width:110px!important}
}


/* =========================================================
   AUTOFILM FINAL MOBILE PORTRAIT LAYOUT
   CSS-only. Overrides earlier experimental mobile rules.
   ========================================================= */
@media (max-width:700px) and (orientation:portrait) {
  :root{
    --header-h:auto;
    --rail-h:82px;
  }

  html,body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .app-shell{
    height:100dvh !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }

  /* Compact two-row header */
  .topbar{
    flex:0 0 auto !important;
    height:auto !important;
    min-height:0 !important;
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr auto !important;
    grid-template-areas:
      "brand newfilm"
      "length generate" !important;
    align-items:center !important;
    justify-content:stretch !important;
    gap:10px 10px !important;
    padding:12px 14px !important;
    border-bottom:1px solid var(--line) !important;
  }

  .brand{
    grid-area:brand !important;
    justify-self:start !important;
    min-width:0 !important;
  }
  .brand-mark{
    width:34px !important;
    height:34px !important;
    border-radius:9px !important;
  }
  .brand strong{
    font-size:12px !important;
    letter-spacing:1.4px !important;
  }

  #newFilm{
    grid-area:newfilm !important;
    justify-self:end !important;
    position:static !important;
    width:auto !important;
    min-width:0 !important;
    height:38px !important;
    margin:0 !important;
    padding:0 14px !important;
    border-radius:10px !important;
    box-sizing:border-box !important;
  }

  #filmLength{
    grid-area:length !important;
    display:block !important;
    position:static !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:42px !important;
    margin:0 !important;
    padding:0 12px !important;
    border:1px solid #34404c !important;
    border-radius:10px !important;
    background:#11151a !important;
    color:var(--text) !important;
    box-sizing:border-box !important;
    font-size:14px !important;
  }

  #generate{
    grid-area:generate !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:static !important;
    inset:auto !important;
    transform:none !important;
    width:auto !important;
    min-width:116px !important;
    max-width:none !important;
    height:42px !important;
    margin:0 !important;
    padding:0 18px !important;
    border-radius:10px !important;
    z-index:auto !important;
    flex:none !important;
    box-sizing:border-box !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  /* Scene strip */
  .scene-rail-wrap{
    flex:0 0 82px !important;
    height:82px !important;
    width:100% !important;
    margin:0 !important;
    padding:7px 14px !important;
    gap:8px !important;
    border-bottom:1px solid var(--line) !important;
    overflow:hidden !important;
  }
  .scene-rail{
    height:100% !important;
    padding:0 !important;
    gap:8px !important;
  }
  .scene-card{
    flex:0 0 106px !important;
    width:106px !important;
    height:62px !important;
    border-radius:8px !important;
  }
  .scene-thumb{height:39px !important}
  .scene-label{
    height:22px !important;
    padding:3px 7px 0 !important;
    font-size:10px !important;
  }
  .scene-add{
    flex:0 0 34px !important;
    width:34px !important;
    height:34px !important;
  }

  /* Chat takes all remaining height */
  .chat-shell{
    flex:1 1 auto !important;
    min-height:0 !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 14px !important;
    overflow:hidden !important;
  }
  .messages{
    inset:0 14px 92px 14px !important;
    padding:22px 0 14px !important;
  }
  .message{
    gap:10px !important;
    margin-bottom:18px !important;
  }
  .message p{
    font-size:14px !important;
    line-height:1.45 !important;
  }

  /* Composer stays cleanly above Safari toolbar */
  .composer-wrap{
    left:14px !important;
    right:14px !important;
    bottom:0 !important;
    width:auto !important;
    padding:10px 0 max(12px,env(safe-area-inset-bottom)) !important;
  }
  .composer{
    width:100% !important;
    min-height:58px !important;
    padding:10px !important;
    gap:8px !important;
    border-radius:20px !important;
  }
  .composer textarea{
    font-size:16px !important; /* prevents iOS input zoom */
    min-height:34px !important;
    padding:7px 2px !important;
  }
  .attach{
    width:36px !important;
    height:36px !important;
    flex-basis:36px !important;
  }
  .send{
    width:38px !important;
    height:38px !important;
    flex-basis:38px !important;
  }

  /* Render preview remains contained on phone */
  .render-preview{
    flex:0 0 auto !important;
    width:calc(100% - 28px) !important;
    height:auto !important;
    aspect-ratio:16/9 !important;
    margin:10px auto 0 !important;
  }
}

/* Narrow phones */
@media (max-width:390px) and (orientation:portrait) {
  .topbar{padding-left:10px !important;padding-right:10px !important;gap:8px !important}
  #newFilm{padding:0 11px !important}
  #generate{min-width:104px !important;padding:0 13px !important}
  .scene-rail-wrap{padding-left:10px !important;padding-right:10px !important}
  .chat-shell{padding-left:10px !important;padding-right:10px !important}
  .composer-wrap{left:10px !important;right:10px !important}
}


/* =========================================================
   AUTOFILM MOBILE v2 — final specificity override
   Fixes legacy #composerWrap/.composerWrap centering rules.
   ========================================================= */
@media (max-width:700px) and (orientation:portrait) {
  .chat,
  .chat-shell {
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  #messages,
  .messages {
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    padding-left:30px !important;
    padding-right:30px !important;
    padding-bottom:110px !important;
    overflow-x:hidden !important;
  }

  .composer-wrap,
  .composerWrap,
  #composerWrap {
    position:absolute !important;
    left:14px !important;
    right:14px !important;
    bottom:10px !important;
    transform:none !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    overflow:visible !important;
    z-index:50 !important;
  }

  .composer,
  #composer {
    position:relative !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }

  .composer textarea,
  #composer textarea {
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;
    font-size:16px !important;
    box-sizing:border-box !important;
  }
}

@media (max-width:390px) and (orientation:portrait) {
  .composer-wrap,
  .composerWrap,
  #composerWrap {
    left:10px !important;
    right:10px !important;
  }
  #messages,
  .messages {
    padding-left:20px !important;
    padding-right:20px !important;
  }
}


/* Mobile portrait: expose the EXISTING render Cancel button. CSS only. */
@media (max-width:700px) and (orientation:portrait) {
  #cancelRender {
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    bottom:max(18px, env(safe-area-inset-bottom)) !important;
    transform:translateX(-50%) !important;
    width:auto !important;
    min-width:118px !important;
    height:42px !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 18px !important;
    z-index:10050 !important;
    box-sizing:border-box !important;
    pointer-events:auto !important;
  }
}


/* =========================================================
   MOBILE RENDER CANCEL — verified against app.js DOM
   During rendering .chat-shell is hidden, so #cancelRender
   is hidden with it. The visible render screen creates
   #expandedCancelRender dynamically inside #preview.
   ========================================================= */
@media (max-width:700px) and (orientation:portrait) {
  body.rendering #expandedCancelRender {
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    bottom:max(22px, env(safe-area-inset-bottom)) !important;
    transform:translateX(-50%) !important;
    width:120px !important;
    min-width:120px !important;
    height:42px !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 18px !important;
    border:1px solid #46515c !important;
    border-radius:10px !important;
    background:#181e25 !important;
    color:#eef1f3 !important;
    font-size:13px !important;
    line-height:1 !important;
    z-index:2147483647 !important;
    pointer-events:auto !important;
    box-sizing:border-box !important;
  }

  /* The action row no longer needs to reserve clipped space on mobile;
     the actual button is fixed safely inside the viewport. */
  body.rendering .expanded-preview-actions {
    flex:0 0 0 !important;
    height:0 !important;
    min-height:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }

  /* Keep long stage text inside the preview instead of running off-screen. */
  body.rendering .expanded-preview-waiting {
    width:calc(100% - 24px) !important;
    max-width:100% !important;
    padding:0 12px !important;
    text-align:center !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    line-height:1.35 !important;
    box-sizing:border-box !important;
  }
}
/* =========================================================
   AUTOFILM MOBILE PORTRAIT — render percentage visibility
   Keep existing render DOM/JS unchanged.
   ========================================================= */
@media (max-width:700px) and (orientation:portrait) {

  body.rendering .expanded-preview-frame {
    width:calc(100vw - 28px) !important;
    max-width:100% !important;
  }

  body.rendering .expanded-preview-meta {
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;

    grid-template-columns:minmax(0,1fr) auto !important;
    width:100% !important;
    min-height:32px !important;
    height:32px !important;
    flex:0 0 32px !important;

    align-items:center !important;
    gap:10px !important;
    padding:0 6px !important;

    overflow:visible !important;
    box-sizing:border-box !important;
  }

  body.rendering .expanded-preview-meta span {
    display:block !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  body.rendering .expanded-preview-meta strong {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    justify-self:end !important;
    min-width:4ch !important;
    width:auto !important;

    text-align:right !important;
    white-space:nowrap !important;

    color:#eef1f3 !important;
    font-size:12px !important;
    font-weight:700 !important;
  }

  body.rendering .expanded-preview-progress {
    display:block !important;
    visibility:visible !important;
    width:100% !important;
    height:3px !important;
    flex:0 0 3px !important;
  }
}
/* AutoFilm portrait render HUD — percentage above Cancel */
@media (max-width:700px) and (orientation:portrait) {

  body.rendering .expanded-preview-meta strong {
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;

    position:fixed !important;
    left:50% !important;
    right:auto !important;
    bottom:max(76px, calc(env(safe-area-inset-bottom) + 76px)) !important;
    transform:translateX(-50%) !important;

    width:auto !important;
    min-width:64px !important;
    height:32px !important;

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

    padding:0 12px !important;
    margin:0 !important;

    color:#eef1f3 !important;
    background:#181e25 !important;
    border:1px solid #46515c !important;
    border-radius:8px !important;

    font-size:14px !important;
    font-weight:700 !important;
    line-height:32px !important;

    z-index:10001 !important;
    pointer-events:none !important;
  }
}
/* Portrait HUD upgrade — show Segment + Percentage together */
@media (max-width:700px) and (orientation:portrait) {

  body.rendering .expanded-preview-meta {
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;

    position:fixed !important;
    left:50% !important;
    right:auto !important;
    bottom:max(76px, calc(env(safe-area-inset-bottom) + 76px)) !important;
    transform:translateX(-50%) !important;

    width:auto !important;
    min-width:180px !important;
    height:34px !important;

    align-items:center !important;
    justify-content:center !important;
    gap:18px !important;

    padding:0 14px !important;
    margin:0 !important;

    background:#181e25 !important;
    border:1px solid #46515c !important;
    border-radius:8px !important;

    z-index:10001 !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }

  body.rendering .expanded-preview-meta span,
  body.rendering .expanded-preview-meta strong {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:static !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;

    width:auto !important;
    min-width:0 !important;
    height:auto !important;

    padding:0 !important;
    margin:0 !important;

    color:#eef1f3 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;

    line-height:1 !important;
    white-space:nowrap !important;
  }

  body.rendering .expanded-preview-meta span {
    font-size:12px !important;
    font-weight:500 !important;
  }

  body.rendering .expanded-preview-meta strong {
    font-size:14px !important;
    font-weight:700 !important;
  }
}
/* AutoFilm finished-video download */
.finished-video-actions{
  display:flex;
  justify-content:center;
  width:100%;
  margin-top:10px;
}

.finished-download-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:38px;
  padding:0 18px;

  background:#181e25;
  border:1px solid #46515c;
  border-radius:8px;

  color:#eef1f3;
  font-size:13px;
  font-weight:600;
  text-decoration:none;

  cursor:pointer;
  transition:
    background .15s ease,
    border-color .15s ease;
}

.finished-download-btn:hover{
  background:#222a33;
  border-color:#65717d;
}

.finished-download-btn:active{
  transform:translateY(1px);
}

@media (max-width:700px){
  .finished-video-actions{
    margin-top:8px;
  }

  .finished-download-btn{
    width:100%;
    min-height:42px;
    box-sizing:border-box;
  }
}
#chatAttach.uploading{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  cursor:wait;
  opacity:.8;
}

#chatAttach .upload-spinner{
  display:block;
  width:14px;
  height:14px;
  flex:0 0 14px;
  box-sizing:border-box;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:autofilm-spin .7s linear infinite;
}

@keyframes autofilm-spin{
  to{transform:rotate(360deg)}
}
/* AutoFilm simplified UI — hide scene rail */
.scene-rail-wrap{
  display:none !important;
}
.generated-chat-image{max-width:260px}.generated-chat-image img{display:block;max-width:100%;border-radius:12px;margin:4px 0 6px}.generated-chat-image small{opacity:.7}


/* ========================================================================
   AutoFilm Beta — integrated account/time status
   Status is part of the real topbar layout and can never overlay controls.
   ======================================================================== */

.topbar{
  display:flex;
  align-items:center;
  min-width:0;
}

.topbar .brand{
  flex:0 0 auto;
}

.topbar-actions{
  margin-left:auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

/* Undo older individual auto-margin behavior now that controls have
   their own right-side flex container. */
.topbar-actions .new-film,
.topbar-actions .generate{
  margin-left:0;
  flex:0 0 auto;
}

.beta-account-status{
  display:flex;
  align-items:center;
  flex:0 1 auto;
  min-width:0;
  height:30px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:#dfe4e8;
  white-space:nowrap;
  font-size:11px;
  font-weight:650;
  line-height:1;
}

.beta-account-status[hidden]{
  display:none !important;
}

.beta-account-name{
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.beta-account-separator{
  margin:0 7px;
  color:#68727d;
}

.beta-time-remaining{
  color:#f2f4f6;
  font-variant-numeric:tabular-nums;
}

/* Keep all header controls contained inside the 52px header. */
.topbar .film-length{
  flex:0 0 auto;
  height:34px;
  padding:0 10px;
}

.topbar #newFilm,
.topbar #generate{
  height:34px;
  white-space:nowrap;
}


/* Medium/narrow screens:
   Keep remaining time visible; sacrifice the account name first. */
@media(max-width:760px){
  .topbar{
    padding-left:9px;
    padding-right:9px;
    gap:7px;
  }

  .topbar-actions{
    gap:6px;
  }

  .beta-account-name,
  .beta-account-separator{
    display:none;
  }

  .beta-account-status{
    padding:0 8px;
  }

  .topbar #newFilm{
    padding-left:8px;
    padding-right:8px;
  }

  .topbar .film-length{
    padding-left:7px;
    padding-right:7px;
  }

  .topbar #generate{
    padding-left:9px;
    padding-right:9px;
  }
}


/* Very narrow screens:
   Logo mark stays, long AUTOFILM text disappears.
   Time balance remains visible. */
@media(max-width:520px){
  .topbar .brand strong{
    display:none;
  }

  .topbar .brand{
    gap:0;
  }

  .topbar-actions{
    flex:1 1 auto;
  }

  .beta-account-status{
    margin-right:auto;
  }
}


/* Critical override for older mobile portrait rules that previously forced
   #generate to full width. Inside the topbar Generate must remain a compact
   header control. */
@media(max-width:700px) and (orientation:portrait){
  .topbar #generate{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    visibility:visible !important;
    opacity:1 !important;
    position:static !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    flex:0 0 auto !important;
    margin:0 !important;
    margin-top:0 !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
  }

  .topbar #filmLength{
    flex:0 0 auto !important;
    width:auto !important;
    max-width:90px !important;
  }
}


/* AutoFilm admin return button — visible only for admin accounts */
.admin-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:transparent;
  color:#e7e9eb;
  text-decoration:none;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  flex:0 0 auto;
}

.admin-link:hover{
  background:#171b21;
}

.admin-link[hidden]{
  display:none !important;
}

@media(max-width:760px){
  .admin-link{
    padding-left:8px;
    padding-right:8px;
  }
}

/* AUTOFILM MOBILE HEADER FIX */
@media (max-width:700px) {
  .topbar {
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    justify-content:space-between !important;
    align-items:center !important;
    grid-template-areas:none !important;
    height:54px !important;
    min-height:54px !important;
    padding:0 8px !important;
    gap:5px !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }
  .topbar .brand {
    flex:0 1 auto !important;
    min-width:0 !important;
    gap:4px !important;
    white-space:nowrap !important;
  }
  .topbar .brand-mark {
    width:23px !important;
    height:23px !important;
    flex:0 0 23px !important;
  }
  .topbar .brand strong {
    font-size:clamp(8px,2.5vw,11px) !important;
    letter-spacing:0 !important;
  }
  .topbar #newFilm,
  .topbar #generate,
  .topbar #filmLength {
    display:inline-flex !important;
    position:static !important;
    visibility:visible !important;
    opacity:1 !important;
    transform:none !important;
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:34px !important;
    margin:0 !important;
    padding:0 7px !important;
    font-size:11px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    box-sizing:border-box !important;
    grid-area:auto !important;
  }
  .topbar #generate {
    font-weight:750 !important;
  }
}

/* AUTOFILM NEW BUTTON ALIGNMENT */
.topbar #newFilm {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  min-height: 40px !important;
  padding: 0 15px !important;
  line-height: 1 !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
}

@media (max-width: 700px) {
  .topbar #newFilm {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
  }
}

/* AUTOFILM CREATE BUTTON ALIGNMENT */
.topbar #generate {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 15px !important;
  line-height: 1 !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
}

@media (max-width: 700px) {
  .topbar #generate {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
  }
}


/* AUTOFILM_MOBILE_HEADER_V2 */
@media (max-width:700px) and (orientation:portrait) {
  .topbar {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    height:auto !important;
    min-height:98px !important;
    padding:9px 12px 10px !important;
    gap:9px !important;
    align-items:center !important;
    justify-content:stretch !important;
    overflow:visible !important;
  }

  .topbar .brand {
    display:flex !important;
    width:auto !important;
    min-width:0 !important;
    gap:6px !important;
    justify-self:start !important;
  }

  .topbar .brand strong {
    display:inline !important;
    font-size:12px !important;
  }

  .topbar-actions {
    display:grid !important;
    grid-template-columns:
      minmax(0,0.8fr)
      minmax(0,1fr)
      minmax(0,0.8fr)
      minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    width:100% !important;
    min-width:0 !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 !important;
    align-items:center !important;
    justify-content:stretch !important;
  }

  .topbar .beta-account-status {
    grid-column:1 / 4 !important;
    grid-row:1 !important;
    justify-self:start !important;
    margin:0 !important;
    max-width:100% !important;
    height:26px !important;
  }

  .topbar #adminLink {
    grid-column:4 !important;
    grid-row:1 !important;
    justify-self:end !important;
  }

  .topbar #newFilm {
    grid-column:1 !important;
    grid-row:2 !important;
  }

  .topbar #filmLength {
    grid-column:2 !important;
    grid-row:2 !important;
  }

  .topbar #renderQuality {
    grid-column:3 !important;
    grid-row:2 !important;
  }

  .topbar #generate {
    grid-column:4 !important;
    grid-row:2 !important;
    margin:0 !important;
  }

  .topbar #newFilm,
  .topbar #filmLength,
  .topbar #renderQuality,
  .topbar #generate {
    display:block !important;
    position:static !important;
    visibility:visible !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 5px !important;
    font-size:11px !important;
    text-align:center !important;
    box-sizing:border-box !important;
    transform:none !important;
  }

  .topbar #filmLength,
  .topbar #renderQuality {
    text-align-last:center !important;
  }
}


/* AUTOFILM_UNLIMITED_HEADER */
.topbar .beta-account-status {
  display:none !important;
}


/* AUTOFILM_MOBILE_SINGLE_ROW_V3 */
@media (max-width:700px) and (orientation:portrait) {

  .topbar {
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    height:54px !important;
    min-height:54px !important;
    padding:0 7px !important;
    gap:6px !important;
    align-items:center !important;
    justify-content:space-between !important;
  }

  .topbar .brand {
    display:flex !important;
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    gap:3px !important;
  }

  .topbar .brand strong {
    display:inline !important;
    font-size:9px !important;
    letter-spacing:-0.3px !important;
  }

  .topbar .brand-mark {
    width:17px !important;
    height:17px !important;
    font-size:10px !important;
  }

  .topbar-actions {
    display:flex !important;
    flex:1 1 auto !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    width:auto !important;
    min-width:0 !important;
    gap:4px !important;
    align-items:center !important;
    justify-content:flex-end !important;
  }

  .topbar .beta-account-status {
    display:none !important;
  }

  .topbar #newFilm,
  .topbar #filmLength,
  .topbar #renderQuality,
  .topbar #generate {
    display:block !important;
    position:static !important;
    flex:0 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:30px !important;
    min-height:30px !important;
    padding:0 4px !important;
    margin:0 !important;
    font-size:10px !important;
    white-space:nowrap !important;
    transform:none !important;
  }

  .topbar #filmLength {
    max-width:76px !important;
  }

  .topbar #renderQuality {
    max-width:65px !important;
  }

  .topbar #generate {
    flex-shrink:0 !important;
  }
}


/* Match Sign Out with the Account and Admin navigation links. */
.topbar-actions .signout-form {
  display:inline-flex;
  align-items:center;
  margin:0;
  padding:0;
  flex:0 0 auto;
}
.topbar-actions .signout-button {
  -webkit-appearance:none;
  appearance:none;
  box-sizing:border-box;
  font-family:inherit;
  font-size:11px;
  font-weight:700;
  line-height:normal;
  height:34px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:transparent;
  color:#e7e9eb;
  text-decoration:none;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.topbar-actions .signout-button:hover {
  background:#171b21;
}
@media(max-width:760px) {
  .topbar-actions .signout-button {
    padding-left:8px;
    padding-right:8px;
  }
}

/* AUTOFILM AO ACCOUNT DROPDOWN V1 */
.topbar-actions .ao-account-menu {
  position:relative;
  display:inline-flex;
  flex:0 0 auto;
  margin:0;
  padding:0;
}

.ao-account-menu > summary {
  cursor:pointer;
  list-style:none;
  user-select:none;
  font-family:inherit;
  box-sizing:border-box;
}

.ao-account-menu > summary::-webkit-details-marker {
  display:none;
}

.ao-account-menu > summary::after {
  content:"⌄";
  margin-left:6px;
  font-size:12px;
}

.ao-account-dropdown {
  position:absolute;
  z-index:10000;
  top:calc(100% + 7px);
  right:0;
  width:185px;
  padding:5px;
  background:#171b21;
  border:1px solid var(--line);
  border-radius:9px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}

.ao-account-menu:not([open]) .ao-account-dropdown {
  display:none;
}

.ao-account-dropdown .ao-menu-item {
  display:flex;
  width:100%;
  min-height:36px;
  align-items:center;
  padding:0 11px;
  margin:0;
  box-sizing:border-box;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#e7e9eb;
  text-decoration:none;
  font-family:inherit;
  font-size:12px;
  font-weight:500;
  text-align:left;
  cursor:pointer;
  white-space:nowrap;
}

.ao-account-dropdown .ao-menu-item:hover {
  background:#303842;
}

.ao-account-dropdown form {
  margin:0;
  padding:0;
}

.topbar {
  overflow:visible;
}


/* AUTOFILM MOBILE SINGLE ROW V3 */

.ao-menu-mobile-label { display:none; }

.ao-account-dropdown #adminLink {
  display:flex;
  width:100%;
  height:36px;
  padding:0 11px;
  border:0;
  border-radius:6px;
  font-size:12px;
  font-weight:500;
  justify-content:flex-start;
}

.ao-account-dropdown #adminLink[hidden] {
  display:none !important;
}

@media (max-width:700px) {

  .topbar {
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    justify-content:space-between !important;
    align-items:center !important;
    width:100% !important;
    height:54px !important;
    min-height:54px !important;
    padding:0 6px !important;
    gap:5px !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }

  .topbar .brand {
    display:flex !important;
    flex:0 0 26px !important;
    width:26px !important;
    min-width:26px !important;
    max-width:26px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .topbar .brand strong {
    display:none !important;
  }

  .topbar .brand-mark {
    width:25px !important;
    height:25px !important;
    flex:0 0 25px !important;
  }

  .topbar .topbar-actions {
    display:flex !important;
    flex:1 1 auto !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    justify-content:space-between !important;
    align-items:center !important;
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    gap:4px !important;
  }

  .topbar .ao-account-menu {
    display:block !important;
    position:relative !important;
    flex:0 0 34px !important;
    width:34px !important;
    min-width:34px !important;
    grid-column:auto !important;
    grid-row:auto !important;
  }

  .ao-menu-desktop-label {
    display:none !important;
  }

  .ao-menu-mobile-label {
    display:inline !important;
    font-size:18px !important;
    line-height:1 !important;
  }

  .topbar .ao-account-menu > summary {
    display:flex !important;
    width:34px !important;
    height:34px !important;
    padding:0 !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
  }

  .topbar .ao-account-menu > summary::after {
    display:none !important;
  }

  .topbar .ao-account-dropdown {
    position:absolute !important;
    top:calc(100% + 7px) !important;
    left:0 !important;
    right:auto !important;
    width:185px !important;
    max-width:calc(100vw - 20px) !important;
    box-sizing:border-box !important;
    z-index:10000 !important;
  }

  .topbar #newFilm,
  .topbar #filmLength,
  .topbar #renderQuality,
  .topbar #generate {
    display:block !important;
    position:static !important;
    grid-column:auto !important;
    grid-row:auto !important;
    flex:0 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:34px !important;
    min-height:34px !important;
    margin:0 !important;
    padding:0 5px !important;
    font-size:10px !important;
    white-space:nowrap !important;
    box-sizing:border-box !important;
  }

  .topbar #filmLength {
    max-width:76px !important;
  }

  .topbar #renderQuality {
    max-width:65px !important;
  }

  .topbar #generate {
    flex-shrink:0 !important;
  }

  html, body {
    max-width:100% !important;
    overflow-x:hidden !important;
  }
}