/* Upload preview: compact corner Tips and room for floating browser controls. */
.create-screen { --create-browser-clearance: 0px; }
@media (max-width: 600px) {
  .create-screen { --create-browser-clearance: 68px; }
}
.create-screen .create-layout {
  padding: 12px 14px calc(12px + var(--create-browser-clearance) + env(safe-area-inset-bottom));
  gap: 12px;
}
.create-screen .lml-create-header { overflow: visible; position: relative; z-index: 20; }
.create-screen .create-header > .lml-create-toolbar,
.create-screen .create-upload-actions { margin-inline: 0; }
.lml-create-toolbar, .lml-create-leading { display: flex; align-items: center; gap: 8px; }
.lml-create-toolbar { justify-content: space-between; }
.create-screen .lml-create-toolbar button { min-width: 40px; min-height: 40px; }
.lml-tips-trigger {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 12px; border: 1px solid #ffffff26; border-radius: 24px;
  color: #fff; background: #101012d9; font: 600 14px/1 -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}
.lml-tips-trigger svg { width: 20px; height: 20px; color: #ffb52b; }
.lml-tips-trigger[aria-expanded="true"] { border-color: #ffb52b; }
.lml-tips-popover {
  position: absolute; top: 50px; left: 0; width: min(310px, 100%); max-height: calc(var(--create-viewport-height, 100svh) - 200px);
  overflow: auto; padding: 10px; border: 1px solid #ffffff26; border-radius: 16px;
  background: #151517f5; color: white; box-shadow: 0 12px 36px #0008;
}
.lml-tips-title { display: flex; align-items: center; justify-content: space-between; padding-left: 4px; font-size: 14px; }
.lml-tips-title button { width: 40px; height: 40px; color: white; font-size: 26px; line-height: 1; background: transparent; }
.lml-tips-popover .create-tips { background: transparent; border: 0; backdrop-filter: none; padding: 8px 0 4px; }
.lml-tips-popover .create-tips li { font-size: 12px; line-height: 1.25; }
.lml-tips-popover .create-tips li > svg { width: 26px; height: 26px; margin-bottom: 8px; }
.create-screen .create-upload-actions > button { min-height: 50px; border-radius: 28px; }
.create-screen .create-photo-picker { bottom: var(--create-browser-clearance); max-height: calc(100% - var(--create-browser-clearance) - 12px); }
.create-screen button:focus-visible { outline: 2px solid #ffb52b; outline-offset: 3px; }
@media (max-height: 400px) { .create-screen .create-layout { padding-top: 8px; } }

/* Expanded Tips replaces the top control row instead of covering the video. */
.lml-create-header:has(.lml-tips-popover) .lml-create-toolbar { display: none; }
.create-screen .lml-tips-popover {
  position: relative; top: auto; left: auto; width: 100%; height: 44px;
  max-height: none; padding: 0 4px 0 8px; border-radius: 22px;
  display: flex; flex-direction: row-reverse; align-items: center;
  overflow: hidden; box-shadow: none; background: #151517ed;
}
.lml-tips-popover .lml-tips-title { display: contents; }
.lml-tips-popover .lml-tips-title strong { display: none; }
.lml-tips-popover .lml-tips-title button { flex: 0 0 36px; width: 36px; height: 40px; font-size: 24px; }
.lml-tips-popover .create-tips { flex: 1; min-width: 0; padding: 0; }
.lml-tips-popover .create-tips ul { gap: 5px; }
.lml-tips-popover .create-tips li { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; font-size: 10px; line-height: 12px; text-align: left; }
.lml-tips-popover .create-tips li > svg { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; }