/* ============================================================
   GOOGLE FLOW — EXACT PIXEL-PERFECT DARK THEME STYLESHEET
   Matching flow.google.com exactly
   ============================================================ */

/* ============================================================
   GOOGLE FLOW PRODUCTION CSS TOKENS & VARIABLES
   Extracted directly from flow.google.com production build
   ============================================================ */

@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/googlesans/v62/4UaRrENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iq2vgCIhM907w.woff2) format('woff2');
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/googlesans/v62/4UaRrENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iq2vgCIhM907w.woff2) format('woff2');
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/googlesans/v62/4UaRrENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iq2vgCIhM907w.woff2) format('woff2');
}
@font-face {
  font-family: 'Google Sans Display';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/googlesansdisplay/v13/ea8FacM9Wef3EJPWRrHjgE4B6CnlZxHVDv79oT3ZQZQ.woff2) format('woff2');
}

@font-face {
  font-family: 'Google Symbols';
  font-style: normal;
  font-weight: 100 700;
  src: url('../assets/GoogleSymbols.woff2') format('woff2');
  font-display: block;
}

.material-symbols-rounded,
.google-symbols {
  font-family: 'Google Symbols', 'Material Symbols Rounded', 'Material Icons', sans-serif;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-display: block;
  /* FOUT Protection: Constrain width/height so long ligature text never breaks layout before font loads */
  width: 1em;
  height: 1em;
  overflow: hidden;
  vertical-align: middle;
  user-select: none;
}

:root {
  --color-white: #fff;
  --color-white-90: rgba(255,255,255,0.9);
  --color-white-75: rgba(255,255,255,0.75);
  --color-white-50: rgba(255,255,255,0.5);
  --color-white-25: rgba(255,255,255,0.25);
  --color-white-15: rgba(255,255,255,0.15);
  --color-white-05: rgba(255,255,255,0.05);
  --color-black: #000;
  --color-black-50: rgba(0,0,0,0.5);
  --color-grey-90: rgba(22,23,24,0.9);
  --tile-scrim-gradient: linear-gradient(180deg,transparent,rgba(0,0,0,0.04) 20%,rgba(0,0,0,0.12) 40%,rgba(0,0,0,0.25) 60%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5));

  --foreground-color-100: #202124;
  --foreground-color-200: #3c4043;
  --foreground-color-300: #80868b;
  --foreground-neutral-000: #000;
  --foreground-neutral-100: #202124;
  --foreground-neutral-200: #3c4043;
  --foreground-neutral-300: #5f6368;
  --foreground-neutral-400: #80868b;
  --foreground-state-90: rgba(22,23,24,0.9);
  --foreground-state-75: rgba(22,23,24,0.75);
  --foreground-state-60: rgba(22,23,24,0.6);
  --foreground-state-50: rgba(22,23,24,0.5);
  --foreground-state-25: rgba(22,23,24,0.25);
  --foreground-state-15: rgba(22,23,24,0.15);
  --foreground-state-10: rgba(22,23,24,0.1);
  --foreground-state-08: rgba(22,23,24,0.08);
  --foreground-state-05: rgba(22,23,24,0.05);
  --foreground-state-base: #161718;
  --foreground-color-danger: #fe6e6e;

  --background-color-100: #f1f3f4;
  --background-color-200: #e8eaed;
  --background-color-300: #dadce0;
  --background-neutral-000: #fff;
  --background-neutral-100: #f1f3f4;
  --background-neutral-200: #e8eaed;
  --background-neutral-300: #dadce0;
  --background-neutral-400: #bdc1c6;
  --background-state-90: rgba(218,220,224,0.9);
  --background-state-75: rgba(218,220,224,0.75);
  --background-state-50: rgba(218,220,224,0.5);
  --background-state-25: rgba(218,220,224,0.25);
  --background-state-15: rgba(218,220,224,0.15);
  --background-state-10: rgba(218,220,224,0.1);
  --background-state-05: rgba(218,220,224,0.05);

  --header-desktop-height: 5rem;
  --ogb-account-switcher-block-size: 2.5rem;
  --project-card-max-width: 40rem;

  --mat-sys-body-large: 400 1rem/1.5rem 'Google Sans Text', 'Google Sans', sans-serif;
  --mat-sys-body-medium: 400 0.875rem/1.25rem 'Google Sans Text', 'Google Sans', sans-serif;
  --mat-sys-body-small: 400 0.75rem/1rem 'Google Sans Text', 'Google Sans', sans-serif;
  --mat-sys-display-large: 400 3.562rem/4rem 'Google Sans', sans-serif;
  --mat-sys-display-medium: 400 2.812rem/3.25rem 'Google Sans', sans-serif;
  --mat-sys-display-small: 400 2.25rem/2.75rem 'Google Sans', sans-serif;
  --mat-sys-headline-large: 400 2rem/2.5rem 'Google Sans', sans-serif;
  --mat-sys-headline-medium: 400 1.75rem/2.25rem 'Google Sans', sans-serif;
  --mat-sys-headline-small: 400 1.5rem/2rem 'Google Sans', sans-serif;
  --mat-sys-label-large: 500 0.875rem/1.25rem 'Google Sans Text', 'Google Sans', sans-serif;
  --mat-sys-label-medium: 500 0.75rem/1rem 'Google Sans Text', 'Google Sans', sans-serif;
  --mat-sys-label-small: 500 0.688rem/1rem 'Google Sans Text', 'Google Sans', sans-serif;
  --mat-sys-title-large: 400 1.375rem/1.75rem 'Google Sans', sans-serif;
  --mat-sys-title-medium: 500 1rem/1.5rem 'Google Sans Text', 'Google Sans', sans-serif;
  --mat-sys-title-small: 500 0.875rem/1.25rem 'Google Sans Text', 'Google Sans', sans-serif;

  /* Legacy aliases for compatibility */
  --bg-black: #000000;
  --accent-teal: #00897b;
  --accent-blue: #8ab4f8;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --font-family: 'Google Sans Text', 'Google Sans', sans-serif;
}

body.dark-theme, body.theme-dark {
  --foreground-color-100: #f1f3f4;
  --foreground-color-200: #e8eaed;
  --foreground-color-300: #dadce0;
  --foreground-neutral-000: #fff;
  --foreground-neutral-100: #f1f3f4;
  --foreground-neutral-200: #e8eaed;
  --foreground-neutral-300: #dadce0;
  --foreground-neutral-400: #bdc1c6;
  --foreground-state-90: rgba(218,220,224,0.9);
  --foreground-state-75: rgba(218,220,224,0.75);
  --foreground-state-60: rgba(218,220,224,0.6);
  --foreground-state-50: rgba(218,220,224,0.5);
  --foreground-state-25: rgba(218,220,224,0.25);
  --foreground-state-15: rgba(218,220,224,0.15);
  --foreground-state-10: rgba(218,220,224,0.1);
  --foreground-state-08: rgba(218,220,224,0.08);
  --foreground-state-05: rgba(218,220,224,0.05);
  --foreground-state-base: #dadce0;
  --foreground-color-danger: #fe6e6e;

  --background-color-100: #202124;
  --background-color-200: #3c4043;
  --background-color-300: #80868b;
  --background-neutral-000: #000;
  --background-neutral-100: #202124;
  --background-neutral-200: #3c4043;
  --background-neutral-300: #5f6368;
  --background-neutral-400: #80868b;
  --background-state-90: rgba(22,23,24,0.9);
  --background-state-75: rgba(22,23,24,0.75);
  --background-state-50: rgba(22,23,24,0.5);
  --background-state-25: rgba(22,23,24,0.25);
  --background-state-15: rgba(22,23,24,0.15);
  --background-state-10: rgba(22,23,24,0.1);
  --background-state-05: rgba(22,23,24,0.05);

  --header-blur-background: linear-gradient(180deg,#000,color-mix(in srgb,#000 50%,transparent) 75%,transparent);
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Google Flow Exact Custom Slim Scrollbar */
::-webkit-scrollbar {
  width: .5rem;
  height: .5rem;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--foreground-state-15);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--foreground-state-25);
}

html, body {
  margin: 0;
  block-size: 100%;
  isolation: isolate;
}

body.theme-dark, body.dark-theme {
  background-color: var(--color-black);
  color: var(--foreground-neutral-000);
  font-family: var(--font-family);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Google Flow exact scroll container */
.aisandbox-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: none;
  scrollbar-gutter: stable;
}

.aisandbox-content::-webkit-scrollbar {
  width: .5rem;
  height: .5rem;
}
.aisandbox-content::-webkit-scrollbar-track {
  background: transparent;
}
.aisandbox-content::-webkit-scrollbar-thumb {
  background: var(--foreground-state-15);
  border-radius: 999px;
}

@media (max-width: 900px) {
  .aisandbox-content {
    overflow-y: visible;
    scrollbar-gutter: auto;
  }
  .aisandbox-content::-webkit-scrollbar {
    display: none;
  }
}

button {
  font-family: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.hidden {
  display: none !important;
}

/* ============================================================
   1. TOP NAVBAR (flow.google.com Exact Header)
   ============================================================ */
.flow-header {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  isolation: isolate;
  width: 100%;
  height: var(--header-desktop-height);
  padding-block: 1rem;
  padding-inline: 1rem;
  z-index: 1;
  background: -webkit-linear-gradient(top, color-mix(in srgb, var(--background-neutral-000) 20%, transparent) 60%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--background-neutral-000) 20%, transparent) 60%, transparent);
}

@media (min-width: 600px) {
  .flow-header {
    padding-inline: 1.5rem;
  }
}

.header-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 60%, rgba(0,0,0,.8) 80%, rgba(0,0,0,.4) 90%, rgba(0,0,0,.2) 95%, rgba(0,0,0,.1) 97%, transparent);
  mask-image: linear-gradient(180deg, #000 0, #000 60%, rgba(0,0,0,.8) 80%, rgba(0,0,0,.4) 90%, rgba(0,0,0,.2) 95%, rgba(0,0,0,.1) 97%, transparent);
  z-index: -1;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-title {
  font: var(--mat-sys-title-medium);
  color: var(--foreground-neutral-000);
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

#nav-brand {
  display: flex;
  align-items: center;
}

#nav-brand .header-title-link {
  font-family: 'Google Sans', sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #ffffff;
}

.header-title-link {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.project-nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-title-text {
  font: var(--mat-sys-title-small);
  color: var(--foreground-neutral-000);
}

.nav-icon-btn {
  background: transparent;
  border: none;
  color: var(--foreground-neutral-000);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s;
}

.nav-icon-btn:hover:not(.static-btn) {
  background-color: var(--foreground-state-15);
  color: var(--color-white);
}

.static-btn {
  cursor: default;
}

/* Center Search Bar (in project view) */
.nav-center {
  flex: 1;
  max-width: 480px;
  margin: 0 24px;
}

.nav-search-bar {
  display: flex;
  align-items: center;
  background-color: var(--foreground-state-10);
  border: 1px solid var(--foreground-state-15);
  border-radius: 9999px;
  height: 36px;
  padding: 0 14px;
  gap: 8px;
}

.nav-search-bar .search-icon {
  font-size: 17px;
  color: var(--foreground-state-60);
}

.nav-search-bar input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-white);
  font-size: 13px;
  font-family: inherit;
}

.search-filter-btn {
  background: transparent;
  border: none;
  color: var(--foreground-state-60);
  display: flex;
  align-items: center;
  cursor: default;
}

.search-filter-btn span {
  font-size: 17px;
}

/* Header Right Section */
.header-right {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

@media (min-width: 600px) {
  .header-right {
    gap: 1.5rem;
  }
}

.header-music-button,
.header-tv-button {
  height: 2.75rem;
  border-radius: 999px;
  background-color: var(--color-white-05);
  border: 1px solid var(--color-white-15);
  padding: 0 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--foreground-neutral-100);
  font: var(--mat-sys-title-small);
  text-decoration: none;
  cursor: default;
  transition: background-color .15s ease;
  user-select: none;
}

.header-music-button:hover,
.header-tv-button:hover {
  background-color: var(--color-white-15);
}

.header-music-button .mdc-button__label,
.header-tv-button .mdc-button__label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.flow-music-icon {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: .1875rem;
  object-fit: cover;
  flex-shrink: 0;
}

.flow-icon-l {
  font-size: 1.25rem;
  line-height: 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
}

.flow-icon-xl {
  font-size: 1.5rem;
  line-height: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-icon-m {
  font-size: 1.125rem;
  line-height: 1.125rem;
  width: 1.125rem;
  height: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.disabled-pill {
  pointer-events: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.header-social-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--foreground-neutral-000);
  padding-inline: .625rem;
  height: 2.75rem;
  cursor: pointer;
  text-decoration: none;
}

.header-social-link:after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--foreground-state-15);
  opacity: 0;
  transition: opacity .2s ease-in-out;
}

.header-social-link:active:after,
.header-social-link:hover:after {
  opacity: 1;
}

.header-social-link .flow-icon-m svg {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
}

.header-social-link .flow-icon-xl svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

.header-help-button,
.more-options-trigger {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--foreground-neutral-000);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease;
  padding: 0;
}

.header-help-button:hover,
.more-options-trigger:hover {
  background-color: var(--foreground-state-15);
}

.header-help-button .material-symbols-rounded,
.more-options-trigger .material-symbols-rounded {
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.project-nav-icons {
  display: flex;
  align-items: center;
  gap: .25rem;
}

/* User Button & Tier Chip */
.header-user-button {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.header-user-button.has-tier {
  height: 2.625rem;
  border-radius: 21px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(255, 255, 255, 0.08);
  padding: 0 0.3rem 0 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  transition: background-color 0.15s;
}

.header-user-button.has-tier:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.tier-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.45rem;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.12);
  font-family: 'Google Sans Text', 'Google Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: 0.05em;
  line-height: 1;
}

.account-switcher-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  flex-shrink: 0;
}

.user-avatar-circle {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: #d93025;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 0.875rem/1 'Google Sans Text', 'Google Sans', sans-serif;
}

.google-one-ring {
  position: absolute;
  inset: 0;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  box-sizing: border-box;
  background: conic-gradient(from 220deg, #a9a8ff 0%, #3286fe 70%, #1a73e8 180%, #3286fe 270%, #a9a8ff 360%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
}

/* ============================================================
   2. VIEW A: HOMEPAGE / DASHBOARD (HERO BANNER & PROJECTS GRID)
   Matching flow.google.com exactly
   ============================================================ */
.flow-dashboard-view {
  width: 100%;
  background-color: var(--color-black);
  position: relative;
  flex-shrink: 0;
}

/* Hero Promotion Banner */
.promotion-banner-container {
  display: flex;
  flex-direction: column;
  padding-block: 0 2.5rem;
  padding-inline: 1.5rem 1rem;
  height: 31.25rem;
  overflow: hidden;
  opacity: 1;
  transition: opacity .2s ease;
  color: var(--color-white);
  width: 100%;
}

@media (max-width: 600px) {
  .promotion-banner-container {
    height: 37.5rem;
    padding: .5rem;
  }
}

.promotion-banner-inner {
  position: relative;
  flex: 1;
  overflow: hidden;
  border: 1px solid var(--foreground-state-15);
  border-radius: 16px;
}

@media (max-width: 600px) {
  .promotion-banner-inner {
    border: none;
    border-radius: 0;
  }
}

.promotion-banner-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.promotion-banner-overlay {
  position: absolute;
  inset: 0;
  background: -webkit-linear-gradient(right, transparent, rgba(0,0,0,.6));
  background: linear-gradient(270deg, transparent, rgba(0,0,0,.6));
}

.promotion-banner-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  padding: 1.875rem 2.5rem 3rem;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .promotion-banner-content {
    padding: .5rem .5rem 2rem;
    justify-content: flex-end;
    gap: 1rem;
  }
}

.promotion-banner-text {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: 34rem;
}

.promotion-banner-headline {
  font: var(--mat-sys-display-large);
  margin: 0;
  letter-spacing: -0.5px;
  line-height: 1.15;
}

@media (max-width: 600px) {
  .promotion-banner-headline {
    font: var(--mat-sys-display-medium);
  }
}

.promotion-banner-caption {
  font: var(--mat-sys-body-large);
  margin: 0;
  color: var(--color-white-90);
  line-height: 1.5;
}

@media (max-width: 600px) {
  .promotion-banner-caption {
    font: var(--mat-sys-body-medium);
  }
}

.promotion-banner-cta-container {
  position: absolute;
  bottom: 3rem;
  inset-inline-start: 2.5rem;
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
}

@media (max-width: 600px) {
  .promotion-banner-cta-container {
    position: static;
    justify-content: flex-start;
  }
}

.promotion-banner-primary-cta {
  height: 2.5rem;
  border-radius: 999px;
  background-color: var(--color-white);
  color: var(--color-black);
  padding: 0 1.5rem;
  font: var(--mat-sys-label-large);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, transform .15s ease;
}

.promotion-banner-primary-cta:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: scale(1.02);
}

.promotion-banner-nav-dashes {
  position: absolute;
  bottom: 1.5rem;
  inset-inline-start: 2.5rem;
  z-index: 2;
  display: flex;
  flex-direction: row;
  gap: .375rem;
  align-items: center;
}

@media (max-width: 600px) {
  .promotion-banner-nav-dashes {
    bottom: .75rem;
    inset-inline-start: 1rem;
    max-width: calc(100% - 2rem);
    width: auto;
  }
}

.promotion-banner-nav-dash {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  height: .25rem;
  width: 3.75rem;
  border-radius: 1px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--color-white-25);
  overflow: hidden;
  transition: background-color .15s ease;
}

.promotion-banner-nav-dash:hover {
  background: var(--color-white-50);
}

@media (max-width: 600px) {
  .promotion-banner-nav-dash {
    flex: 1 1 0;
    min-width: 0;
    max-width: 3rem;
    width: auto;
  }
}

@keyframes promotion-fill-progress {
  0% { width: 0; }
  100% { width: 100%; }
}

.promotion-banner-progress-bar {
  background: var(--color-white);
  height: 100%;
  animation: promotion-fill-progress 6000ms linear forwards;
}

.promotion-banner-close-button {
  position: absolute;
  inset-inline-end: .5rem;
  top: .5rem;
  z-index: 3;
  opacity: .5;
  transition: opacity .2s ease, background-color .15s ease;
  background: transparent;
  border: none;
  color: var(--color-white);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.promotion-banner-close-button:hover {
  opacity: 1;
  background-color: var(--color-white-15);
}

.promotion-banner-close-button .material-symbols-rounded {
  font-size: 1.25rem;
}

.dashboard-container {
  width: 100%;
  max-width: 100%;
}

@keyframes content-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.projects-grid {
  --project-card-max-width: 40rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  padding-block: 0 1rem;
  padding-inline: 1.5rem 1rem;
  animation: content-fade-in .5s ease-in-out .2s both;
}

.projects-grid:has(.projects-grid-item:nth-child(4)) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, var(--project-card-max-width)));
  justify-content: center;
}

@media (max-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  .projects-grid {
    grid-template-columns: 1fr !important;
    padding-inline: 1rem;
  }
}

.projects-grid-item {
  flex: 1 1 calc(33.3333333333% - 0.6666666667rem);
  max-width: var(--project-card-max-width);
  min-width: 0;
}

.project-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  transition: background-color .2s ease;
  flex: 1;
  height: 100%;
  width: 100%;
  max-width: var(--project-card-max-width, 40rem);
}

.project-card:hover {
  background-color: var(--foreground-state-05);
}

.project-card:focus-within .footer-button,
.project-card:hover .footer-button {
  opacity: 1;
}

.project-thumbnail-container {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background-color: var(--foreground-state-15);
  outline: 1px solid var(--foreground-state-05);
  cursor: pointer;
  text-decoration: none;
}

.project-thumbnail-container video,
.project-thumbnail-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  pointer-events: none;
}

.project-thumbnail-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(--foreground-state-15);
  border-radius: 16px;
}

.project-card-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: .25rem 1rem;
  min-height: 2.5rem;
}

.project-title-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  word-break: break-word;
  hyphens: auto;
  font: var(--mat-sys-body-large);
  color: var(--foreground-state-90);
}

.footer-button {
  opacity: 0;
  transition: opacity .2s;
  background: transparent;
  border: none;
  color: var(--foreground-state-75);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  padding: 0;
}

.footer-button:hover {
  color: var(--color-white);
  background-color: var(--foreground-state-15);
}

.footer-button .material-symbols-rounded {
  font-size: 1.125rem;
  line-height: 1.125rem;
}

.footer-button.delete-btn:hover {
  color: #fe6e6e;
  background-color: rgba(254, 110, 110, 0.15);
}

.title-input {
  border-radius: .25rem;
  padding: .25rem .5rem;
  background: var(--foreground-state-15);
  border: 1px solid var(--foreground-state-25);
  color: var(--color-white);
  outline: 0;
  box-shadow: none;
  font: var(--mat-sys-body-large);
  max-width: 220px;
}

.title-input:focus {
  border-color: rgba(255, 255, 255, 0.5);
}

.page-footer {
  height: 14rem;
}

/* ============================================================
   STABLE FLOATING NEW PROJECT BUTTON
   Google Flow exact class .new-project-button
   ============================================================ */
.new-project-button {
  position: fixed;
  bottom: 3.5rem;
  inset-inline-start: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  height: 8rem;
  width: 12rem;
  border: 1px solid var(--foreground-state-15);
  border-radius: 32px;
  background-color: var(--foreground-state-25);
  color: var(--foreground-state-75);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  font: var(--mat-sys-body-large);
  -webkit-transition: -webkit-transform .4s ease-out;
  transition: transform .4s ease-out, -webkit-transform .4s ease-out;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 50;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  padding-left: 20px;
  padding-right: 20px;
  line-height: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.new-project-button:hover:not(:disabled) {
  -webkit-transform: translateX(-50%) translateY(-8px);
  transform: translateX(-50%) translateY(-8px);
}

.new-project-button:hover:not(:disabled):after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 100%;
  height: 12px;
}

.new-project-button:disabled {
  cursor: not-allowed;
  background-color: var(--foreground-state-15);
  color: var(--foreground-state-50);
}

.new-project-button .material-symbols-rounded {
  font-size: 1.5rem;
  line-height: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: -8px;
  margin-right: 12px;
}

/* ============================================================
   3. VIEW B: PROJECT INTERIOR VIEW (Google Flow Exact)
   ============================================================ */
.flow-project-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: var(--bg-black);
  position: relative;
  overflow: hidden;
}

.page-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

/* ── Project Header ── */
.header-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--project-header-desktop-height, 4.75rem);
  padding-inline: 1.25rem 1.5rem;
  flex-shrink: 0;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: transparent;
  color: var(--text-main);
}

.header-desktop {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.header-desktop-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--project-header-desktop-height, 4.75rem);
  width: 100%;
}

.header-left-container {
  display: flex;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  max-width: 50vw;
}

.nav-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-white);
  min-width: 0;
}

.nav-icon-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.nav-icon-btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--text-white);
}

.nav-icon-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.nav-icon-btn .material-symbols-rounded {
  font-size: 1.25rem;
}

.back-button {
  color: var(--text-white);
}

.back-button .material-symbols-rounded {
  font-size: 1.375rem;
}

.header-title {
  font: var(--mat-sys-body-large, 500 0.9375rem/1.5rem 'Google Sans Text', sans-serif);
  color: var(--text-white);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.editable-text-container {
  display: flex;
  align-items: center;
  min-width: 0;
}

.editable-text-input {
  font: 500 0.9375rem/1.5rem 'Google Sans Text', sans-serif;
  color: var(--text-white);
  width: 100%;
  min-width: 0;
  max-width: 31.25rem;
  text-overflow: ellipsis;
  background: transparent;
  border: 0;
  outline: 0;
  caret-color: transparent;
}

.editable-text-input:focus {
  caret-color: auto;
}

.more-options-button {
  color: var(--text-muted);
}

.more-options-button .material-symbols-rounded {
  font-size: 1.25rem;
}

/* Center: Search Bar */
.header-center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 1 26rem;
  max-width: 28rem;
  min-width: 0;
  transition: flex 0.3s ease, max-width 0.3s ease;
}

.header-center-container:focus-within {
  flex: 0 1 36rem;
  max-width: 36rem;
}

.header-center-container:focus-within ~ .header-right-container {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.search-bar-container {
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.search-input-container {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1;
  padding-inline: 0.25rem 0.75rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(80px);
  -webkit-backdrop-filter: blur(80px);
  background-color: rgba(255, 255, 255, 0.08);
  min-width: 0;
  height: 100%;
}

.search-button {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
}

.search-button .material-symbols-rounded {
  font-size: 1.125rem !important;
}

.search-input {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font: 400 0.9375rem/1.5rem 'Google Sans Text', sans-serif;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.filter-button {
  border-radius: 50%;
  height: 2.25rem;
  width: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.filter-button:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.filter-button .material-symbols-rounded {
  font-size: 1.125rem !important;
}

/* Right Container */
.header-right-container {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.tools-container {
  display: flex;
  align-items: center;
}

.tools-button-group {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* ── Sidenav ── */
.project-sidenav-container {
  flex: 1;
  display: flex;
  min-height: 0;
}

.project-sidenav-container.has-header-offset {
  --sidenav-offset: var(--project-header-desktop-height, 4.75rem);
}

.sidenav-wrapper {
  display: flex;
  flex: 1;
  min-height: 0;
}

.project-sidenav {
  width: var(--sidenav-expanded-width, 14.5rem);
  padding-block-start: var(--sidenav-offset, 0.875rem);
  background-color: var(--bg-black);
  transition: width 0.2s ease-in-out;
  flex-shrink: 0;
  overflow: hidden;
}

.project-sidenav.collapsed {
  width: var(--sidenav-collapsed-width, 4rem);
}

.project-sidenav.collapsed .sidenav-item-label {
  display: none;
}

.sidenav-inner-container {
  width: 100%;
  height: 100%;
  overflow: hidden auto;
}

.project-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  width: 100%;
  padding-inline: 1rem;
  padding-block: 0 3rem;
  box-sizing: border-box;
}

.sidenav-top-group {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.sidenav-bottom-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.sidenav-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-block: 0.5rem;
}

.sidenav-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0 0.75rem;
  height: 3rem;
  background: transparent;
  border: none;
  border-radius: 16px;
  color: var(--text-white);
  font: 500 0.875rem/1.25rem 'Google Sans Text', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}

.sidenav-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.sidenav-item.active {
  background-color: rgba(255, 255, 255, 0.15);
}

.sidenav-item-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  font-variation-settings: 'FILL' 0, 'wght' 300;
}

.sidenav-item-icon.rotated-icon {
  transform: rotate(90deg);
}

.sidenav-item-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Content Area ── */
.sidenav-content {
  flex-grow: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.page-container {
  flex-grow: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-block-start: var(--project-header-desktop-height, 4.75rem);
  isolation: isolate;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  overscroll-behavior: none;
}

.page-container::-webkit-scrollbar {
  width: 0.5rem;
}

.page-container::-webkit-scrollbar-track {
  background: transparent;
  margin-block-start: var(--project-header-desktop-height, 4.75rem);
}

.page-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}

.content-container {
  padding-inline: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ── Empty State ── */
.empty-project-message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  gap: 1.75rem;
}

.empty-project-illustration {
  width: 2.8125rem;
  height: 4.8125rem;
  color: var(--text-white);
  opacity: 0.9;
  image-rendering: pixelated;
}

.empty-project-text {
  color: var(--text-main);
  font: 400 1.375rem/1.75rem 'Google Sans', sans-serif;
}

/* ── Tiles Grid (Flow Labs Justified Layout) ── */
.tiles-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  flex-grow: 1;
  align-items: flex-start;
  align-content: flex-start;
  padding: 0;
  padding-bottom: 3rem;
  box-sizing: border-box;
}

/* ── Prompt Dock ── */
.prompt-box-container {
  position: fixed;
  z-index: 120;
  bottom: var(--prompt-box-bottom-spacing, 2rem);
  left: 50%;
  max-width: 37.5rem;
  width: 100%;
  transform: translateX(-50%);
}

.wrapper-container,
.prompt-box-content {
  width: 100%;
}

.base-prompt-box {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: var(--prompt-box-min-height, 5.625rem);
  max-height: var(--prompt-box-max-height, min(28.75rem, 65vh));
  padding-inline: 1rem 0.75rem;
  padding-block: 0.85rem 0.65rem;
  background-color: #1e1f20;
  width: 100%;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.base-prompt-box:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

.base-prompt-box:focus-within {
  border-color: rgba(255, 255, 255, 0.22);
}

/* Prompt Input */
.prompt-top-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: 0.25rem;
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 1;
}

.prompt-input {
  flex: 1;
  min-width: 0;
  min-height: 1.6875rem;
  align-self: stretch;
  padding-inline: 0.25rem;
  padding-block: 0.25rem 0.5rem;
  overflow-y: auto;
  cursor: text;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font: 400 1rem/1.5rem 'Google Sans Text', sans-serif;
  resize: none;
  max-height: 120px;
  caret-color: #ffffff;
}

.prompt-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.top-right-actions {
  flex-shrink: 0;
}

/* Bottom Controls */
.bottom-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  position: relative;
  z-index: 1;
}

.submit-controls {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.add-menu-container {
  display: contents;
}

.add-menu-trigger {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.add-menu-trigger:hover {
  background-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.add-menu-icon {
  font-size: 1.25rem;
  font-variation-settings: 'wght' 200;
}

/* Agent Chip */
.agent-mode-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 0.875rem;
  border: none;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  cursor: pointer;
  font: 500 0.75rem/1rem 'Google Sans Text', sans-serif;
  color: rgba(255, 255, 255, 0.85);
  transition: background-color 0.15s, color 0.15s;
}

.agent-mode-chip:hover {
  background-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.agent-mode-chip[aria-pressed="true"] {
  background-color: #ffffff;
  color: #131314;
}

.agent-mode-chip-label {
  position: relative;
  z-index: 2;
}

/* Settings Trigger */
.settings-trigger-button {
  height: 32px;
  padding: 0 0.875rem;
  background-color: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.85);
  font: 500 0.75rem/1rem 'Google Sans Text', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  transition: background-color 0.15s, color 0.15s;
}

.settings-trigger-button:hover {
  background-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.settings-summary {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.flow-icon-m {
  font-size: 1.125rem;
  height: 1.125rem;
  width: 1.125rem;
  line-height: 1.125rem;
}

/* Generate Arrow Button (Flow Labs style) */
.generate-icon-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: #1e1f20;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.generate-icon-button:hover:not(:disabled) {
  background-color: #f0f0f0;
  transform: scale(1.05);
}

.generate-icon-button:active:not(:disabled) {
  transform: scale(0.96);
}

/* Unclickable when prompt is empty */
.generate-icon-button:disabled {
  background-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.28);
  cursor: default;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* Footer Disclaimer */
.footer-disclaimer-text {
  position: fixed;
  bottom: 0.5rem;
  left: 0.5rem;
  font: 400 0.75rem/1rem 'Google Sans Text', sans-serif;
  color: rgba(255, 255, 255, 0.35);
  user-select: none;
  pointer-events: none;
  text-align: left;
  white-space: nowrap;
  margin: 0;
  z-index: 100;
}

.dock-status-msg {
  position: fixed;
  bottom: calc(var(--prompt-box-bottom-spacing, 2rem) + 6.5rem);
  left: 50%;
  transform: translateX(-50%);
  max-width: 37.5rem;
  width: 90%;
  background-color: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e2e8f0;
  font-size: 12px;
  padding: 6px 16px;
  border-radius: 9999px;
  text-align: center;
  z-index: 130;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
}

.dock-status-msg.error {
  background-color: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}
/* ============================================================
   4. SETTINGS POPUP (FLOATING)
   ============================================================ */
.settings-popup-overlay {
  position: fixed;
  z-index: 150;
  bottom: 86px;
  right: calc(50% - 256px);
}

.settings-popup-card {
  width: 296px;
  background-color: #161718;
  border: none;
  border-radius: 18px;
  padding: 8px;
  box-shadow: rgba(0, 0, 0, 0.6) 0px 16px 32px -8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: "Google Sans Text", "Google Sans", "Roboto", sans-serif;
  line-height: 24px;
}

.settings-row {
  width: 100%;
}

.settings-divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.08);
  margin: 2px 0;
  width: 100%;
}

.segmented-control {
  background-color: rgba(218, 220, 224, 0.05);
  border-radius: 12px;
  padding: 0px;
  display: flex;
  gap: 0px;
  width: 100%;
}

.segment-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 12px;
  height: 34px;
  padding: 0px 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  white-space: nowrap;
  font-family: "Google Sans Text", "Google Sans", "Roboto", sans-serif;
  line-height: 16px;
}

.segment-btn span.material-symbols-rounded {
  font-size: 18px;
  color: inherit;
}

/* Standard Active Button (Aspect Ratio, Resolution, Duration, Multiplier): Subtle gray translucent pill with white text */
.segment-btn.active {
  background-color: rgba(218, 220, 224, 0.14);
  color: rgb(255, 255, 255);
  font-weight: 500;
}

/* Emphasized Active Button (ONLY Image/Video and Frames/Ingredients): Light gray / white pill with dark text */
.variant-emphasized .segment-btn.active {
  background-color: rgb(241, 243, 244);
  color: rgb(32, 33, 36);
  font-weight: 500;
}

.variant-emphasized .segment-btn.active span.material-symbols-rounded {
  color: rgb(32, 33, 36);
}

.segment-btn:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.06);
  color: rgb(255, 255, 255);
}

.segment-btn:disabled,
.segment-btn.locked {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
}

.segment-btn.locked:hover,
.segment-btn:disabled:hover {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.seg-lock-icon {
  font-size: 12px !important;
  line-height: 1 !important;
  margin-left: 2px !important;
  vertical-align: middle !important;
  opacity: 0.75;
  display: inline-block;
}

/* Aspect ratio groups (both Video and Image) - column layout (icon on top, text below) */
.ratio-image-grid {
  gap: 0px;
}

.ratio-col-btn {
  flex-direction: column !important;
  padding: 6px 2px !important;
  gap: 2px !important;
  font-size: 11px !important;
  height: 48px !important;
}

.ratio-col-btn span.material-symbols-rounded {
  font-size: 20px !important;
  font-variation-settings: 'wght' 300, 'FILL' 0;
}

/* Model row - relative for dropdown positioning */
.model-row {
  position: relative;
}

/* Model icon inside dropdown options */
.model-icon {
  font-size: 18px !important;
  vertical-align: middle;
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.7);
}

/* Model Select Button */
.model-select-btn {
  width: 100%;
  background-color: rgba(218, 220, 224, 0.05);
  border: none;
  border-radius: 12px;
  height: 34px;
  padding: 0px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgb(255, 255, 255);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  font-family: "Google Sans Text", "Google Sans", "Roboto", sans-serif;
  transition: background-color 0.15s;
}

.model-select-btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.model-select-btn span.material-symbols-rounded {
  color: rgba(255, 255, 255, 0.5);
  font-size: 20px;
}

.model-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 6px;
  background-color: #161718;
  border: none;
  border-radius: 18px;
  padding: 4px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0px;
  box-shadow: rgba(0, 0, 0, 0.6) 0px 16px 32px -8px;
}

.ratio-svg-icon {
  display: block;
  stroke: currentColor;
  margin-bottom: 2px;
}

.pill-ratio-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  color: inherit;
  margin: 0 4px;
}

.pill-ratio-icon svg {
  display: block;
  stroke: currentColor;
}

.model-dropdown.hidden {
  display: none;
}

.model-option {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 12px;
  height: 36px;
  padding: 0px 12px;
  color: rgb(255, 255, 255);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.1s;
  font-family: "Google Sans Text", "Google Sans", "Roboto", sans-serif;
  display: flex;
  align-items: center;
}

.model-option:hover {
  background-color: rgba(218, 220, 224, 0.08);
}

.model-option.active {
  background-color: rgba(218, 220, 224, 0.12);
}

.settings-footer {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  padding-top: 4px;
  padding-bottom: 2px;
  border-top: none;
  font-family: "Google Sans Text", "Google Sans", "Roboto", sans-serif;
}

.settings-footer span span {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
}

/* ============================================================
   5. USER AVATAR POPUP (GOOGLE ACCOUNT DETAILS)
   ============================================================ */
/* ============================================================
   5. USER AVATAR POPUP (GOOGLE ACCOUNT DETAILS)
   ============================================================ */
/* ============================================================
   5. USER AVATAR POPUP (GOOGLE ACCOUNT DETAILS)
   ============================================================ */
.user-popup-overlay {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 1000;
}

.user-popup-card {
  width: 358px;
  background-color: #161718;
  border: none;
  border-radius: 28px;
  padding: 18px 21px 22px 21px;
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.75);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Google Sans Text', sans-serif;
  box-sizing: border-box;
}

.user-popup-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-bottom: 2px;
}

.google-logo-text {
  font-family: 'Google Sans', sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.2px;
  text-align: center;
  line-height: 40px;
  margin: 0;
  padding: 0;
}

.user-popup-close-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.08);
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}

.user-popup-close-btn:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

.user-popup-close-btn span {
  font-size: 22px;
  font-weight: 300;
}

/* Account Info Row */
.user-account-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 2px 0 4px 0;
}

.user-popup-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #00897b;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  outline: none;
  border: none;
}

.user-account-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.user-display-name {
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.25;
}

.user-email-text {
  font-size: 13px;
  color: #c4c7c5;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.switch-account-link {
  font-size: 13px;
  color: #a8c7fa;
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
  margin-left: auto;
  align-self: flex-start;
  margin-top: 1px;
}

/* Credits & Upgrade Card */
.user-credits-card {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 14px 16px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: none;
}

.user-credits-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.flow-clapper-credit-icon {
  flex-shrink: 0;
  color: #ffffff;
}

.flow-credits-link {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 15px;
  font-weight: 400;
  font-family: 'Google Sans Text', sans-serif;
  cursor: pointer;
  letter-spacing: -0.1px;
}

.flow-credits-link * {
  text-decoration: none !important;
}

.flow-credits-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* User Action Buttons */
.user-action-btn {
  width: 100%;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Google Sans Text', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  border: none;
  user-select: none;
  transition: background 0.15s;
  box-sizing: border-box;
}

.primary-action-btn {
  height: 44px;
  background-color: #c4c7c5;
  color: #1f1f1f;
  font-size: 15px;
  font-weight: 500;
}

.primary-action-btn:hover {
  background-color: #d8dad8;
}

.secondary-action-btn {
  height: 44px;
  background-color: rgba(255, 255, 255, 0.08);
  border: none;
  color: #ffffff;
}

.secondary-action-btn:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.secondary-action-btn svg {
  color: #ffffff;
  flex-shrink: 0;
}

.signout-btn {
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s;
}

.signout-btn:hover {
  background-color: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
}

/* Watermarking Row */
.watermarking-toggle-row {
  height: 48px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.08);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  user-select: none;
  box-sizing: border-box;
}

.watermarking-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #c4c7c5;
  font-family: 'Google Sans Text', sans-serif;
}

.watermark-svg-icon {
  color: #c4c7c5;
  flex-shrink: 0;
}

.mock-switch {
  width: 44px;
  height: 26px;
  border-radius: 13px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.06);
  padding: 2.5px;
  display: flex;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
}

.switch-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #c4c7c5;
}

/* Footer */
.user-popup-footer {
  text-align: center;
  padding-top: 8px;
  border-top: none;
}

.policy-links {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Google Sans Text', sans-serif;
  margin-bottom: 6px;
}

.recaptcha-notice {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
  font-family: 'Google Sans Text', sans-serif;
}

.recaptcha-notice a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: underline;
}

/* ============================================================
/* ============================================================
   6. THEATER VIDEO MODAL (ULTRA-PREMIUM ENTERPRISE DESIGN)
   ============================================================ */
@keyframes modalOverlayFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalCardScale {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes spinnerRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.flow-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(5, 7, 13, 0.88);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modalOverlayFade 0.22s ease-out;
}

.flow-modal-card {
  width: 100%;
  max-width: 880px;
  max-height: 94vh;
  background: radial-gradient(120% 120% at 50% 0%, #151924 0%, #0b0d14 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 100px -15px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  display: flex;
  flex-direction: column;
  animation: modalCardScale 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.flow-modal-card.portrait {
  max-width: 530px;
  width: 95vw;
}

.flow-modal-card.portrait .modal-footer {
  padding: 12px 18px;
}

.flow-modal-card.portrait .modal-actions {
  gap: 8px;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

.flow-modal-card.portrait .modal-btn {
  padding: 8px 12px;
  font-size: 12px;
  gap: 5px;
  flex-shrink: 0;
}

.flow-modal-card.portrait .modal-btn.secondary#modal-reuse-btn {
  margin-right: 0;
  flex-shrink: 0;
}

.flow-modal-card.portrait .btn-quality-pill {
  padding: 1px 6px;
  font-size: 9.5px;
}

@media (max-width: 480px) {
  .flow-modal-card.portrait .modal-actions {
    flex-wrap: wrap;
    justify-content: stretch;
  }
  .flow-modal-card.portrait .modal-actions .modal-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

.modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.modal-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.modal-badge-icon {
  color: #38bdf8;
  font-size: 19px;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.5));
}

.modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.2px;
}

.modal-close {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-50%) rotate(90deg);
}

.modal-video-container {
  width: 100%;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 64vh;
  position: relative;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
}

.modal-video-container.portrait {
  max-height: 56vh;
}

.modal-video-container video {
  width: 100%;
  max-height: 64vh;
  outline: none;
  border: none;
}

.modal-video-container.portrait video {
  aspect-ratio: 9 / 16;
  max-height: 56vh;
  width: auto;
  border-radius: 8px;
}

.modal-video-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  z-index: 20;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-video-spinner.hidden {
  display: none !important;
}

.video-loading-ring {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: spinnerRotate 0.75s linear infinite;
}

/* Shutter Flash Animation for Frame Capture */
.snapshot-flash {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  z-index: 30;
  transition: opacity 0.35s ease-out;
}

.snapshot-flash.active {
  opacity: 0.85;
  transition: none;
}

/* Floating Snapshot Button (Top Right of Video Player) */
.video-snapshot-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(15, 23, 42, 0.84);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  padding: 8px 15px;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  animation: modalOverlayFade 0.2s ease-out;
}

.video-snapshot-btn:hover {
  background: rgba(30, 41, 59, 0.96);
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.45), 0 8px 24px rgba(0, 0, 0, 0.75);
  transform: translateY(-1px);
  color: #38bdf8;
}

.video-snapshot-btn:active {
  transform: translateY(0);
}

.video-snapshot-btn .material-symbols-rounded {
  font-size: 18px;
  color: #38bdf8;
  transition: transform 0.2s ease;
}

.video-snapshot-btn:hover .material-symbols-rounded {
  transform: scale(1.1);
}

.video-snapshot-btn.success {
  background: rgba(16, 185, 129, 0.22);
  border-color: rgba(16, 185, 129, 0.65);
  color: #34d399;
}

.video-snapshot-btn.success .material-symbols-rounded {
  color: #34d399;
}

/* Variant Switcher */
.modal-variant-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background-color: #0e111a;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.variant-bar-title {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
}

.variant-chips-wrapper {
  display: flex;
  gap: 8px;
}

.variant-pill {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  padding: 4px 12px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.variant-pill.active {
  background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);
  color: #ffffff;
  font-weight: 700;
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.4);
}

/* 1080p Preparation Micro-Interaction Banner */
.modal-process-banner {
  background: linear-gradient(135deg, rgba(14, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
  border-top: 1px solid rgba(56, 189, 248, 0.25);
  border-bottom: 1px solid rgba(6, 182, 212, 0.2);
  padding: 14px 24px;
  position: relative;
  overflow: hidden;
  animation: modalOverlayFade 0.2s ease-out;
}

.process-banner-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

.process-spinner-ring {
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(56, 189, 248, 0.2);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: spinnerRotate 0.75s linear infinite;
  flex-shrink: 0;
}

.process-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.process-title {
  color: #38bdf8;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.1px;
}

.process-subtitle {
  color: #94a3b8;
  font-size: 11px;
}

.process-pct {
  color: #38bdf8;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.process-progress-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.process-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #38bdf8 0%, #818cf8 100%);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
  transition: width 0.1s linear;
}

/* Modal Footer & Dual Download Buttons */
.modal-footer {
  padding: 16px 24px;
  background: rgba(11, 13, 20, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
}

.modal-btn {
  padding: 10px 18px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  border: none;
  outline: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

/* Reuse Button (pinned left) */
.modal-btn.secondary#modal-reuse-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-right: auto;
}

.modal-btn.secondary#modal-reuse-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

/* Download 720p Button */
.modal-btn.download-720-btn {
  background: rgba(255, 255, 255, 0.07);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.modal-btn.download-720-btn:hover {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

/* Download 1080p Ultra HD Button */
.modal-btn.download-1080-btn {
  background: linear-gradient(135deg, #0284c7 0%, #4f46e5 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 18px rgba(79, 70, 229, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.modal-btn.download-1080-btn:hover {
  background: linear-gradient(135deg, #0369a1 0%, #4338ca 100%);
  box-shadow: 0 6px 24px rgba(79, 70, 229, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

.modal-btn.download-1080-btn:active {
  transform: translateY(0);
}

.modal-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn-quality-pill {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 2px;
}

/* ============================================================
   7. AUTH MODAL
   ============================================================ */
.flow-auth-card {
  width: 100%;
  max-width: 400px;
  background-color: #1e1f22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85);
}

.auth-header {
  text-align: center;
  margin-bottom: 24px;
}

.google-logo-auth {
  font-family: 'Google Sans', sans-serif;
  font-size: 28px;
  font-weight: 400;
  color: #ffffff;
}

.auth-sub-brand {
  font-size: 18px;
  color: var(--accent-blue);
  font-weight: 500;
  margin-top: -4px;
}

.auth-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
}

.auth-tabs {
  display: flex;
  background-color: #121316;
  border-radius: 14px;
  padding: 3px;
  margin-bottom: 20px;
}

.auth-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 11px;
  padding: 8px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.auth-tab.active {
  background-color: #ffffff;
  color: #000000;
  font-weight: 600;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

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

.form-group input {
  background-color: #121316;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  height: 42px;
  padding: 0 14px;
  color: #ffffff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
}

.form-group input:focus {
  border-color: var(--accent-blue);
}

.auth-submit-btn {
  width: 100%;
  height: 44px;
  border-radius: 9999px;
  background-color: #ffffff;
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  margin-top: 10px;
  transition: opacity 0.15s;
}

.auth-submit-btn:hover {
  opacity: 0.9;
}

.auth-msg-box {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 12px;
  text-align: center;
}

.auth-msg-box.error {
  background-color: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.auth-msg-box.success {
  background-color: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
}

/* ============================================================ */
/* 8. PROMPT INGREDIENT / REFERENCE PREVIEW (Google Flow Match) */
/* ============================================================ */
.prompt-ingredient-bar {
  display: flex;
  align-items: center;
  padding: 8px 12px 2px 12px;
  width: 100%;
  z-index: 5;
}

.prompt-ingredient-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.prompt-ingredient-item {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  background: #111213;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.prompt-ingredient-item:hover {
  border-color: rgba(255, 255, 255, 0.45);
}

.prompt-ingredient-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.prompt-ingredient-remove-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, background 0.15s ease;
  z-index: 3;
  border-radius: 10px;
  color: #ffffff;
  padding: 0;
}

.prompt-ingredient-item:hover .prompt-ingredient-remove-overlay,
.prompt-ingredient-remove-overlay:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.prompt-ingredient-remove-overlay:hover {
  background: rgba(0, 0, 0, 0.75);
}

.prompt-ingredient-remove-overlay .material-symbols-rounded {
  font-size: 20px;
  color: #ffffff;
  font-variation-settings: 'wght' 500;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
  transform: scale(0.85);
  transition: transform 0.18s ease;
}

.prompt-ingredient-item:hover .prompt-ingredient-remove-overlay .material-symbols-rounded {
  transform: scale(1);
}

/* ============================================================ */
/* ============================================================ */
/* 9. GOOGLE FLOW MEDIA CARD LONG-PRESS & CONTEXT MENU MODAL    */
/* ============================================================ */
.flow-video-tile,
.flow-image-tile,
.tile-media-wrapper,
.tile-thumbnail {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.flow-context-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background-color: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1), visibility 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.flow-context-backdrop.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.flow-card-context-menu {
  width: calc(100% - 24px);
  max-width: 440px;
  background-color: #202125;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 22px 14px 20px 14px;
  margin: 0 auto;
  margin-bottom: calc(142px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.04);
  user-select: none;
  -webkit-user-select: none;
  transform: translateY(0);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  pointer-events: auto;
}

.flow-context-backdrop.in-trash-mode .flow-card-context-menu {
  margin-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.flow-context-backdrop.hidden .flow-card-context-menu {
  transform: translateY(28px) scale(0.96);
  opacity: 0;
}

.flow-context-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 20px;
  column-gap: 4px;
  width: 100%;
}

.flow-context-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  border: none;
  padding: 6px 2px;
  border-radius: 16px;
  cursor: pointer;
  color: #f1f5f9;
  text-align: center;
  outline: none;
  transition: background-color 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.flow-context-item:active,
.flow-context-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
  transform: scale(0.96);
}

.flow-context-item-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 6px;
  color: #f1f5f9;
}

.flow-context-item-icon-wrapper .material-symbols-rounded {
  font-size: 26px;
  color: #f1f5f9;
}

.flow-context-item-icon-wrapper .material-symbols-rounded.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  color: #f43f5e;
}

.flow-context-custom-svg {
  width: 26px;
  height: 26px;
  stroke: #f1f5f9;
}

.flow-context-item-label {
  font-family: 'Google Sans Text', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  color: #f1f5f9;
  text-align: center;
  word-break: normal;
}

.flow-context-item.danger {
  color: #f87171;
}

.flow-context-item.danger .flow-context-item-icon-wrapper .material-symbols-rounded {
  color: #f87171;
}

@media (min-width: 769px) {
  .flow-context-backdrop {
    align-items: center;
  }
  .flow-card-context-menu {
    margin-bottom: 0;
    max-width: 400px;
    padding: 24px 18px;
    border-radius: 28px;
  }
}

/* ============================================================ */
/* 10. GOOGLE FLOW ASSET PICKER MODAL (ADD TO PROMPT)           */
/* ============================================================ */
.flow-asset-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: modalFadeIn 0.15s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.flow-asset-modal {
  width: 760px;
  max-width: 92vw;
  height: 540px;
  max-height: 86vh;
  background-color: #1e1f20;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Google Sans Text', sans-serif;
}

.asset-modal-header {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background-color: #1e1f20;
}

.asset-project-selector {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  height: 36px;
  padding: 0 14px;
  color: #e3e3e3;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.asset-project-selector:hover {
  background: rgba(255, 255, 255, 0.1);
}

.asset-search-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  height: 36px;
  padding: 0 14px;
}

.asset-search-icon {
  font-size: 18px;
  color: #9aa0a6;
}

.asset-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 13px;
  outline: none;
}

.asset-search-input::placeholder {
  color: #80868b;
}

.asset-sort-container {
  display: flex;
  align-items: center;
}

.asset-sort-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  height: 36px;
  padding: 0 14px;
  color: #c4c7c5;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.asset-sort-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.asset-modal-close-btn {
  display: none;
}

.asset-modal-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.asset-modal-sidebar {
  width: 175px;
  background-color: #1e1f20;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 10px 14px 12px;
  flex-shrink: 0;
}

.asset-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.asset-tab-btn {
  width: 100%;
  height: 38px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: transparent;
  border: none;
  color: #c4c7c5;
  font-family: 'Google Sans Text', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}

.asset-tab-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.asset-tab-btn.active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.asset-sidebar-upload-wrap {
  padding-top: 4px;
}

.asset-upload-btn {
  width: 100%;
  height: 38px;
  border-radius: 9999px;
  background: transparent;
  border: none;
  color: #c4c7c5;
  font-family: 'Google Sans Text', sans-serif;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  justify-content: flex-start;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.asset-upload-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.asset-modal-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.asset-list-container {
  width: 250px;
  overflow-y: auto;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.asset-list-empty {
  padding: 24px 12px;
  text-align: center;
  color: #80868b;
  font-size: 13px;
}

.asset-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  background: transparent;
  transition: background 0.12s;
}

.asset-list-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.asset-list-item.selected {
  background: rgba(255, 255, 255, 0.12);
}

.asset-item-thumb {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
  background: #202124;
  flex-shrink: 0;
}

.asset-item-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 2px;
}

.asset-item-name {
  font-size: 13px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.asset-item-type {
  font-size: 11px;
  color: #9aa0a6;
}

.asset-preview-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #131415;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 18px;
  margin: 0 14px 14px 4px;
  overflow: hidden;
}

.asset-preview-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}

.asset-preview-content img,
.asset-preview-content video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 14px;
  object-fit: contain;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.asset-preview-placeholder {
  color: #80868b;
  font-size: 13px;
}

.asset-preview-footer {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background-color: transparent;
}

.asset-add-prompt-btn {
  width: 100%;
  max-width: 340px;
  height: 38px;
  border-radius: 9999px;
  background: #37393b;
  color: #8e918f;
  font-family: 'Google Sans Text', sans-serif;
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: not-allowed;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.asset-add-prompt-btn:not(:disabled) {
  background: #ffffff;
  color: #1e1f20;
  cursor: pointer;
}

.asset-add-prompt-btn:not(:disabled):hover {
  background: #f1f3f4;
}

/* ============================================================ */
/* 11. MEDIA TILES ON CANVAS (Flow Labs Style)                  */
/* ============================================================ */

/* ── Base Video Tile ── */
.flow-video-tile {
  position: relative;
  background: #28292a;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.2s ease;
  flex-shrink: 0;
  flex-grow: 0;
  width: 498px;
  height: 280px;
  max-width: 100%;
  box-sizing: border-box;
}

.flow-video-tile.portrait {
  width: 158px;
  height: 280px;
}

.flow-video-tile[data-aspect-ratio="1:1"] {
  width: 280px;
  height: 280px;
}

.flow-video-tile:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Small tiles get smaller border-radius (Flow Labs behavior) */
.flow-video-tile.small-tile {
  border-radius: 8px;
}

/* ── Tile Media ── */
.tile-media-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.tile-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Play Button (top-left, Flow Labs circle) ── */
.tile-play-btn {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.tile-play-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

.tile-play-btn svg {
  width: 12px;
  height: 12px;
  fill: #fff;
  margin-left: 1px;
}

/* Hide top-left play button when tile is hovered (matching Google Flow) */
.flow-video-tile:hover .tile-play-btn {
  opacity: 0;
  pointer-events: none;
}

/* Percentage Badge (top-right, for generating tile) */
.tile-percent-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 500;
  font-family: 'Google Sans', sans-serif;
  z-index: 4;
  letter-spacing: 0.01em;
}

/* Duration, ratio, and size badges: removed completely per Google Flow */
.tile-badge-top,
.tile-badge-variant {
  display: none !important;
}

/* ── Hover Overlay (Google Flow exact layout) ── */
.tile-hover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.35) 40%,
    rgba(0, 0, 0, 0.05) 70%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 10px 6px 10px;
  z-index: 4;
  pointer-events: none;
}

.flow-video-tile:hover .tile-hover-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* ── Google Flow Top-Right Action Pill (Favorite, Reuse, More Options) ── */
.tile-top-actions {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(30, 31, 32, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 2px 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}

.tile-action-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.tile-action-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  transform: scale(1.08);
}

.tile-action-btn .material-symbols-rounded {
  font-size: 16px;
}

/* Favorite heart icon */
.tile-action-btn.tile-fav-btn .fav-icon {
  font-variation-settings: 'FILL' 0, 'wght' 400;
  transition: color 0.15s ease, transform 0.15s ease;
}

.tile-action-btn.tile-fav-btn.active {
  color: #f43f5e;
}

.tile-action-btn.tile-fav-btn.active .fav-icon {
  font-variation-settings: 'FILL' 1, 'wght' 400;
  color: #f43f5e;
}

/* ── Google Flow Bottom Bar: Play + Prompt + Timeline Scrubber ── */
.tile-bottom-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  pointer-events: auto;
}

.tile-bottom-content {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.tile-bottom-play-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.tile-bottom-play-btn:hover {
  transform: scale(1.15);
  opacity: 0.9;
}

.tile-bottom-play-btn .material-symbols-rounded {
  font-size: 18px;
}

.tile-bottom-prompt {
  color: #ffffff;
  font-family: 'Google Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  min-width: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  letter-spacing: 0.01em;
}

.tile-timeline-bar {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  overflow: hidden;
}

.tile-timeline-progress {
  width: 0%;
  height: 100%;
  background: #ffffff;
  border-radius: 2px;
  transition: width 0.1s linear;
}

/* Prompt Box Highlight animation on reuse */
@keyframes prompt-reused-glow {
  0% {
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.35);
  }
  100% {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  }
}
.base-prompt-box.prompt-reused {
  animation: prompt-reused-glow 0.8s ease-out;
}

/* ═══════════════════════════════════════════════════════════════
   GENERATING TILE (Flow Labs Style)
   - Metallic silver/gray gradient (matching Flow Labs exactly)
   - Play button icon top-left
   - Percentage text top-right
   ═══════════════════════════════════════════════════════════════ */
.flow-video-tile.generating {
  cursor: default;
  background: linear-gradient(
    160deg,
    #3a3c40 0%,
    #5a5d63 20%,
    #47494e 35%,
    #606369 50%,
    #4a4d52 65%,
    #58595e 80%,
    #3e4044 100%
  );
  animation: metalShimmer 4s ease-in-out infinite alternate;
}

.flow-video-tile.generating:hover {
  transform: none;
  box-shadow: none;
}

@keyframes metalShimmer {
  0% {
    background: linear-gradient(160deg, #3a3c40 0%, #5a5d63 20%, #47494e 35%, #606369 50%, #4a4d52 65%, #58595e 80%, #3e4044 100%);
  }
  50% {
    background: linear-gradient(160deg, #45474b 0%, #636670 20%, #515358 35%, #6a6d73 50%, #535660 65%, #5f6166 80%, #44464a 100%);
  }
  100% {
    background: linear-gradient(160deg, #3d3f43 0%, #5d6066 20%, #4a4c51 35%, #63666c 50%, #4d5055 65%, #5b5c61 80%, #414347 100%);
  }
}

/* ── Error Tile ── */
.flow-video-tile.error-tile {
  cursor: default;
  background: #1e1f20;
}

/* ── Uploading Tile (Image / Video) ── */
.flow-image-tile.uploading,
.flow-video-tile.uploading {
  cursor: default;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: radial-gradient(circle at 75% 20%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.03) 45%, transparent 70%),
              linear-gradient(165deg, #36393f 0%, #2b2d32 40%, #1e2024 100%);
}

.flow-image-tile.uploading::after,
.flow-video-tile.uploading::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.06) 55%,
    transparent 65%
  );
  animation: uploadMetallicSweep 3.5s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes uploadMetallicSweep {
  0% {
    transform: translate(-10%, -10%);
  }
  100% {
    transform: translate(10%, 10%);
  }
}

.flow-image-tile.uploading:hover,
.flow-video-tile.uploading:hover {
  transform: none;
  box-shadow: none;
}

.tile-upload-icon {
  position: absolute;
  top: 12px;
  left: 12px;
  color: rgba(255, 255, 255, 0.7);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.tile-upload-icon .material-symbols-rounded {
  font-size: 20px;
  font-variation-settings: 'FILL' 0, 'wght' 350;
}

.flow-video-tile.error-tile:hover {
  transform: none;
  box-shadow: none;
}

.generating-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px;
  text-align: center;
}

.generating-stage {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
}

.generating-prompt {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  max-width: 85%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Image Tile ── */
.flow-image-tile {
  position: relative;
  background: #1e1f20;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.2s ease;
  flex-shrink: 0;
  flex-grow: 0;
  width: 498px;
  height: 280px;
  max-width: 100%;
  box-sizing: border-box;
}

.flow-image-tile.portrait {
  width: 158px;
  height: 280px;
}

.flow-image-tile[data-aspect-ratio="1:1"] {
  width: 280px;
  height: 280px;
}

.flow-image-tile:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.flow-image-tile .tile-thumbnail,
.flow-video-tile .tile-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.flow-image-tile:hover .tile-thumbnail,
.flow-video-tile:hover .tile-thumbnail {
  transform: scale(1.03);
}

.flow-image-tile.small-tile {
  border-radius: 8px;
}

/* ── Context Menu Button ── */
.flow-media-tile-menu-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  cursor: pointer;
  z-index: 5;
}

.flow-image-tile:hover .flow-media-tile-menu-btn,
.flow-video-tile:hover .flow-media-tile-menu-btn {
  opacity: 1;
}

.flow-media-tile-menu-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* Responsive handled by JS justifyTileLayout() */

/* ═══════════════════════════════════════════════════════════════
   LOCKED / NOT-ALLOWED FEATURES (Google Flow Style)
   ═══════════════════════════════════════════════════════════════ */
.flow-locked-feature,
.flow-locked-feature *,
button.flow-locked-feature,
input.flow-locked-feature {
  cursor: not-allowed !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.search-bar-container.flow-locked-feature {
  cursor: not-allowed !important;
}

.search-bar-container.flow-locked-feature input {
  cursor: not-allowed !important;
  caret-color: transparent !important;
}

.asset-tab-btn.flow-locked-feature:hover,
.sidenav-item.flow-locked-feature:hover {
  background-color: transparent !important;
  color: #c4c7c5 !important;
}

/* Ensure no text selection I-beam anywhere on decorative texts */
.empty-project-message,
.empty-project-text,
.footer-disclaimer-text,
.tier-chip,
.sidenav-item-label,
.project-title-text {
  user-select: none;
  -webkit-user-select: none;
}

/* ═══════════════════════════════════════════════════════════════
   TRASH VIEW (GOOGLE FLOW EXACT)
   ═══════════════════════════════════════════════════════════════ */

/* Sidenav Trash Items Toggle */
.sidenav-item.trash-only-item {
  display: none;
}

.project-sidenav.in-trash-mode .trash-only-item {
  display: flex !important;
}

.project-sidenav.in-trash-mode [data-tab="characters"],
.project-sidenav.in-trash-mode [data-tab="scenes"],
.project-sidenav.in-trash-mode [data-tab="tools"],
.project-sidenav.in-trash-mode .sidenav-divider,
.project-sidenav.in-trash-mode #sidebar-trash {
  display: none !important;
}

/* Header in Trash Mode */
#project-header.in-trash-mode .tools-button-group > button:not([title="View settings"]),
#project-header.in-trash-mode #btn-project-more-options,
#project-header.in-trash-mode #project-title-container {
  display: none !important;
}

#project-header.in-trash-mode #project-trash-title {
  display: inline-block !important;
}

.trash-title-text {
  font-family: 'Google Sans', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #e3e3e3;
  line-height: 24px;
}

/* Floating Prompt Dock Hidden in Trash Mode */
.flow-project-view.in-trash-mode #prompt-box-container {
  display: none !important;
}

/* Trash Floating Action Bar & Pill */
.trash-action-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 0 22px;
  width: 100%;
}

.trash-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: #1e1f20;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  padding: 6px 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

.trash-count-text {
  font-family: 'Google Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #9aa0a6;
  white-space: nowrap;
}

.trash-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #e3e3e3;
  font-family: 'Google Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.trash-pill-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.trash-pill-btn.danger:hover {
  background: rgba(242, 139, 130, 0.12);
  color: #f28b82;
}

.trash-pill-btn .material-symbols-rounded {
  font-size: 17px;
}

/* In Trash Mode: Hide tile bottom bar & fav/reuse, keep play button visible */
.in-trash-mode .tile-bottom-bar,
.in-trash-mode .tile-fav-btn,
.in-trash-mode .tile-reuse-btn {
  display: none !important;
}

.in-trash-mode .flow-video-tile:hover .tile-play-btn {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ============================================================ */
/* GOOGLE FLOW 1:1 MOBILE RESPONSIVE ENGINE (max-width: 768px)  */
/* ============================================================ */

/* Desktop hide for mobile-only elements */
.asset-mobile-toolbar {
  display: none;
}

@media (max-width: 768px) {
  /* Prevent horizontal scrolling & wiggling */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    touch-action: pan-y pinch-zoom;
  }

  .aisandbox-content,
  .flow-dashboard-view,
  .flow-project-view,
  .flow-projects-page,
  .project-sidenav-container,
  .sidenav-wrapper,
  .sidenav-content,
  .page-container,
  .content-container {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── 1. Top Navbar (Dashboard) ── */
  .flow-header {
    height: 3.75rem !important;
    padding: 0.5rem 1rem !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
  }

  .nav-left {
    display: flex !important;
    align-items: center !important;
  }

  .header-title {
    font-family: 'Google Sans', sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  .header-title-link {
    color: inherit !important;
    text-decoration: none !important;
  }

  .header-music-button,
  .header-tv-button,
  .header-social-link,
  .header-help-button {
    display: none !important;
  }

  .header-right {
    display: flex !important;
    align-items: center !important;
    gap: 1.25rem !important;
  }

  .more-options-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 50% !important;
    color: rgba(255, 255, 255, 0.85) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  .more-options-trigger .material-symbols-rounded {
    font-size: 1.25rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }

  .header-user-button.has-tier {
    height: 2.375rem !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
    padding: 0.1875rem 0.25rem 0.1875rem 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  .tier-chip {
    font-family: 'Google Sans', sans-serif !important;
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    padding: 0.2rem 0.5rem !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
  }

  .account-switcher-placeholder {
    position: relative !important;
    width: 2rem !important;
    height: 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .user-avatar-circle {
    width: 1.5rem !important;
    height: 1.5rem !important;
    border-radius: 50% !important;
    background-color: #7baaf7 !important;
    color: #ffffff !important;
    font-family: 'Google Sans Text', 'Google Sans', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
  }

  .google-one-ring {
    position: absolute !important;
    inset: 1px !important;
    width: calc(2rem - 2px) !important;
    height: calc(2rem - 2px) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
    background: conic-gradient(from 45deg, #4285f4 0%, #ea4335 30%, #fbbc04 60%, #34a853 85%, #4285f4 100%) !important;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)) !important;
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)) !important;
  }

  /* ── 2. Promotion Banner (Dashboard) ── */
  .promotion-banner-container {
    height: calc(100dvh - 4.5rem) !important;
    min-height: 36rem !important;
    padding: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .promotion-banner-inner {
    position: relative !important;
    flex: 1 !important;
    height: 100% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .promotion-banner-content {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 1.25rem !important;
    flex: 1 !important;
    padding: 1rem 1rem 3.75rem 1rem !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 2 !important;
  }

  .promotion-banner-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    max-width: 100% !important;
  }

  .promotion-banner-headline {
    font-family: 'Google Sans', sans-serif !important;
    font-size: 2.125rem !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
  }

  .promotion-banner-caption {
    font-family: 'Google Sans Text', sans-serif !important;
    font-size: 0.9375rem !important;
    line-height: 1.35 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 !important;
  }

  .promotion-banner-cta-container {
    position: static !important;
    display: flex !important;
    justify-content: flex-start !important;
    margin-top: 0.25rem !important;
  }

  .promotion-banner-primary-cta {
    height: 2.625rem !important;
    padding: 0 1.5rem !important;
    border-radius: 9999px !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    font-family: 'Google Sans Text', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }

  .promotion-banner-nav-dashes {
    position: absolute !important;
    bottom: 0.875rem !important;
    inset-inline-start: 1rem !important;
    right: 1rem !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.375rem !important;
    max-width: calc(100% - 2rem) !important;
  }

  .promotion-banner-nav-dash {
    display: flex !important;
    align-items: stretch !important;
    height: 0.25rem !important;
    flex: 1 1 0% !important;
    max-width: 3rem !important;
    border-radius: 2px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    overflow: hidden !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
  }

  .promotion-banner-progress-bar {
    background: #ffffff !important;
    height: 100% !important;
  }

  /* ── 3. Projects Grid & Floating New Project (Dashboard) ── */
  .projects-grid {
    grid-template-columns: 1fr !important;
    padding: 1rem 1rem 12rem 1rem !important;
    gap: 1.25rem !important;
  }

  .projects-grid-item,
  .project-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .project-thumbnail-container {
    border-radius: 16px !important;
  }

  .new-project-button {
    position: fixed !important;
    bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    height: 8rem !important;
    width: 12rem !important;
    border-radius: 32px !important;
    background-color: rgba(218, 220, 224, 0.22) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: 'Google Sans', sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    z-index: 100 !important;
    cursor: pointer !important;
    transition: transform 0.25s ease-out, background-color 0.2s ease !important;
  }

  .new-project-button:hover:not(:disabled) {
    transform: translateX(-50%) translateY(-4px) !important;
  }

  .new-project-button:active {
    transform: translateX(-50%) scale(0.97) !important;
  }

  .new-project-button .material-symbols-rounded {
    font-size: 1.375rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }

  /* ── 4. Project Interior View (Canvas & Sidenav) ── */
  /* Sidebar completely hidden on mobile to give 100% canvas width */
  .project-sidenav {
    display: none !important;
  }

  .project-sidenav-container.has-header-offset {
    --sidenav-offset: 0px !important;
  }

  .sidenav-wrapper {
    width: 100% !important;
  }

  .sidenav-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .page-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-block-start: 6.75rem !important;
    padding-bottom: 8rem !important;
    scrollbar-gutter: auto !important;
    box-sizing: border-box !important;
  }

  .content-container {
    padding-inline: 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── 5. Project Interior Header (Exact 2-Row Google Flow Mobile) ── */
  #project-header,
  .header-base.header-desktop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    min-height: 6.25rem !important;
    padding: 0.5rem 0.75rem 0.5rem 0.75rem !important;
    background: #000000 !important;
    z-index: 50 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  .header-desktop-main-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: auto !important;
    gap: 0.35rem 0 !important;
    width: 100% !important;
  }

  /* Row 1 Left: Home + Title + Project More Options */
  .header-left-container {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 9rem) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.125rem !important;
    overflow: hidden !important;
  }

  .nav-header {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    gap: 0.25rem !important;
  }

  .back-button {
    flex: 0 0 2rem !important;
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
  }

  .back-button .material-symbols-rounded {
    font-size: 1.35rem !important;
  }

  .header-title {
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .editable-text-container {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .editable-text-input {
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding: 0 !important;
  }

  .header-left-container .more-options-button {
    display: inline-flex !important;
    flex: 0 0 1.5rem !important;
    width: 1.5rem !important;
    height: 2rem !important;
    min-width: 1.5rem !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
  }

  .header-left-container .more-options-button .material-symbols-rounded {
    font-size: 1.2rem !important;
  }

  /* Row 1 Right: Add + Help + More + Avatar (Exact 1:1 with Original) */
  .header-right-container {
    order: 2 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.2rem !important;
    white-space: nowrap !important;
  }

  .tools-container {
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
    max-width: none !important;
  }

  .tools-button-group {
    display: flex !important;
    align-items: center !important;
    gap: 0.125rem !important;
  }

  .tools-button-group button[title="View settings"],
  .tools-button-group button[aria-label="Tile grid settings"] {
    display: none !important;
  }

  .tools-button-group button {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
  }

  .tools-button-group button .material-symbols-rounded {
    font-size: 1.25rem !important;
  }

  /* Mobile Project Avatar: NO tier chip pill! Clean 32px circular avatar with Google One ring */
  #project-btn-user-avatar {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    padding: 0 !important;
    margin: 0 0 0 0.15rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }

  #project-btn-user-avatar .tier-chip {
    display: none !important;
  }

  #project-btn-user-avatar .account-switcher-placeholder {
    width: 2rem !important;
    height: 2rem !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
  }

  #project-btn-user-avatar .user-avatar-circle {
    width: 1.625rem !important;
    height: 1.625rem !important;
    font-size: 0.8125rem !important;
    border-radius: 50% !important;
    background: #6ba5ed !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 500 !important;
  }

  #project-btn-user-avatar .google-one-ring {
    position: absolute !important;
    inset: 1px !important;
    width: calc(2rem - 2px) !important;
    height: calc(2rem - 2px) !important;
    pointer-events: none !important;
  }

  /* Row 2: Search Bar + Filter Button */
  .header-center-container {
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 0 100% !important;
    margin-top: 0.35rem !important;
    padding: 0 !important;
  }

  .search-bar-container {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    height: 2.375rem !important;
  }

  .search-input-container {
    flex: 1 1 auto !important;
    height: 100% !important;
    border-radius: 9999px !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    padding-inline-start: 0.5rem !important;
  }

  .search-input-container .search-button {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.6) !important;
    width: 2rem !important;
    height: 2rem !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .search-input-container .search-button .material-symbols-rounded {
    font-size: 1.25rem !important;
  }

  .search-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-size: 0.875rem !important;
    width: 100% !important;
  }

  .filter-button {
    flex: 0 0 2.5rem !important;
    width: 2.5rem !important;
    height: 2.375rem !important;
    border-radius: 12px !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    color: #ffffff !important;
  }

  .filter-button .material-symbols-rounded {
    font-size: 1.25rem !important;
  }

  /* ── 6. Canvas & Video Tiles ── */
  .empty-project-message:not(.hidden) {
    position: absolute !important;
    top: 45% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .empty-project-illustration {
    width: 2.8125rem !important;
    height: 4.8125rem !important;
    margin: 0 auto 1.25rem auto !important;
    display: block !important;
  }

  .empty-project-text {
    font-size: 1.125rem !important;
    text-align: center !important;
  }

  .tiles-container:not(.hidden) {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0.625rem !important;
    width: 100% !important;
    padding: 0 1rem !important;
    padding-bottom: 8rem !important;
    box-sizing: border-box !important;
  }

  .flow-video-tile,
  .flow-image-tile {
    border-radius: 16px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  }

  /* 9:16 Portrait Tiles (Exactly 2 slots per row on mobile, matching Google Flow 1:1) */
  .flow-video-tile,
  .flow-image-tile,
  .flow-video-tile.portrait,
  .flow-image-tile.portrait,
  .flow-video-tile[data-aspect-ratio="9:16"],
  .flow-image-tile[data-aspect-ratio="9:16"],
  .flow-image-tile.uploading,
  .flow-video-tile.uploading,
  .flow-video-tile.generating {
    width: calc((100% - 0.625rem) / 2) !important;
    max-width: calc((100% - 0.625rem) / 2) !important;
    flex: 0 0 calc((100% - 0.625rem) / 2) !important;
    aspect-ratio: 9 / 16 !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* 1:1 Square Tiles (Two slots per row on mobile) */
  .flow-video-tile[data-aspect-ratio="1:1"],
  .flow-image-tile[data-aspect-ratio="1:1"],
  .flow-image-tile.uploading[data-aspect-ratio="1:1"],
  .flow-video-tile.uploading[data-aspect-ratio="1:1"],
  .flow-video-tile.generating[data-aspect-ratio="1:1"] {
    width: calc((100% - 0.625rem) / 2) !important;
    max-width: calc((100% - 0.625rem) / 2) !important;
    flex: 0 0 calc((100% - 0.625rem) / 2) !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* 16:9 Landscape Tiles (Full width slot on mobile) */
  .flow-video-tile.landscape,
  .flow-image-tile.landscape,
  .flow-video-tile[data-aspect-ratio="16:9"],
  .flow-image-tile[data-aspect-ratio="16:9"],
  .flow-image-tile.uploading.landscape,
  .flow-video-tile.uploading.landscape,
  .flow-video-tile.generating.landscape {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    margin: 0 !important;
  }

  .tile-media-wrapper {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .tile-thumbnail {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Play button top-left on video tiles (Mobile Google Flow exact styling) */
  .flow-video-tile .tile-play-btn {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    top: 10px !important;
    left: 10px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(235, 238, 242, 0.78) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    z-index: 5 !important;
  }

  .flow-video-tile .tile-play-btn svg {
    width: 14px !important;
    height: 14px !important;
    fill: #1a1a1a !important;
    margin-left: 2px !important;
  }

  .flow-video-tile:hover .tile-play-btn {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .tile-hover-overlay {
    opacity: 1 !important;
    background: transparent !important;
    pointer-events: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 0 !important;
  }

  .tile-top-actions {
    display: none !important;
  }

  .tile-bottom-bar {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.75) 100%) !important;
    padding: 0.8rem 0.5rem 0.45rem 0.5rem !important;
    margin-top: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .tile-timeline-bar {
    display: none !important;
  }

  .tile-bottom-content {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }

  .tile-bottom-play-btn {
    width: 1.15rem !important;
    height: 1.15rem !important;
    min-width: 1.15rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .tile-bottom-play-btn .material-symbols-rounded {
    font-size: 1.15rem !important;
    font-variation-settings: 'FILL' 0, 'wght' 350 !important;
  }

  .tile-bottom-prompt {
    font-size: 0.75rem !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: 'Google Sans Text', sans-serif !important;
  }

  /* Mobile Prompt Dock: Hide Agent Chip */
  .agent-mode-chip,
  #agent-mode-chip {
    display: none !important;
  }

  /* ── 7. Floating Prompt Dock ── */
  .prompt-box-container {
    width: calc(100% - 1.25rem) !important;
    max-width: calc(100% - 1.25rem) !important;
    bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .base-prompt-box {
    border-radius: 24px !important;
    padding: 0.625rem 0.875rem !important;
    background-color: rgba(30, 31, 32, 0.94) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
    min-height: auto !important;
  }

  .prompt-input {
    font-size: 0.9375rem !important;
    line-height: 1.35rem !important;
    min-height: 1.5rem !important;
    max-height: 80px !important;
  }

  .bottom-controls {
    gap: 0.375rem !important;
  }

  .add-menu-trigger {
    width: 2rem !important;
    height: 2rem !important;
  }

  .settings-trigger-button {
    height: 2rem !important;
    padding-inline: 0.625rem !important;
  }

  .settings-summary {
    font-size: 0.75rem !important;
    gap: 0.35rem !important;
  }

  .generate-icon-button {
    width: 2rem !important;
    height: 2rem !important;
  }

  .footer-disclaimer-text {
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    width: 100% !important;
    font-size: 0.6875rem !important;
    bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px)) !important;
    white-space: normal !important;
    padding-inline: 1rem !important;
    box-sizing: border-box !important;
  }

  /* ── 8. Mobile Asset Picker Drawer (Full Screen Google Flow Exact) ── */
  .flow-asset-modal-overlay:not(.hidden) {
    background-color: #131415 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
  }

  .flow-asset-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    background-color: #131415 !important;
    box-shadow: none !important;
  }

  .asset-modal-header {
    height: 3.25rem !important;
    padding: 0 1rem !important;
    justify-content: space-between !important;
    background-color: #131415 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  .asset-project-selector {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 1.0625rem !important;
    font-weight: 500 !important;
    color: #ffffff !important;
  }

  .asset-modal-header .asset-search-container,
  .asset-modal-header .asset-sort-container {
    display: none !important;
  }

  .asset-modal-close-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    cursor: pointer !important;
  }

  .asset-modal-close-btn .material-symbols-rounded {
    font-size: 1.375rem !important;
  }

  /* Mobile Toolbar */
  .asset-mobile-toolbar {
    display: flex !important;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    background-color: #131415;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 10;
  }

  .mobile-cat-dropdown-wrap {
    position: relative;
    flex-shrink: 0;
  }

  .mobile-cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.375rem;
    padding: 0 0.875rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    color: #ffffff;
    font-family: 'Google Sans Text', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
  }

  .mobile-cat-btn:active {
    background: rgba(255, 255, 255, 0.15);
  }

  .mobile-cat-icon {
    font-size: 1.125rem;
  }

  .mobile-cat-arrow {
    font-size: 1.125rem;
    margin-left: -2px;
  }

  .mobile-cat-menu:not(.hidden) {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 11.5rem;
    background: #202124;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8);
    z-index: 1000;
    padding: 0.375rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    animation: modalFadeIn 0.15s ease-out;
  }

  .mobile-cat-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 2.5rem;
    padding: 0 0.875rem;
    border-radius: 12px;
    background: transparent;
    border: none;
    color: #e3e3e3;
    font-family: 'Google Sans Text', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background 0.12s;
  }

  .mobile-cat-item:hover,
  .mobile-cat-item.active {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
  }

  .mobile-cat-item .material-symbols-rounded {
    font-size: 1.125rem;
  }

  .mobile-search-pill {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.375rem;
    padding: 0 0.875rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    color: #9aa0a6;
    min-width: 0;
  }

  .mobile-search-pill .material-symbols-rounded {
    font-size: 1.125rem;
    flex-shrink: 0;
  }

  .mobile-search-pill input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-family: 'Google Sans Text', sans-serif;
    font-size: 0.875rem;
    min-width: 0;
  }

  .mobile-search-pill input::placeholder {
    color: #80868b;
  }

  .mobile-upload-btn {
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
  }

  .mobile-upload-btn:active {
    background: rgba(255, 255, 255, 0.15);
  }

  .mobile-upload-btn .material-symbols-rounded {
    font-size: 1.25rem;
  }

  /* Body */
  .asset-modal-body {
    flex: 1 !important;
    display: flex !important;
    overflow: hidden !important;
    background-color: #131415 !important;
  }

  .asset-modal-sidebar,
  .asset-preview-pane {
    display: none !important;
  }

  .asset-modal-content {
    width: 100% !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .asset-list-container {
    width: 100% !important;
    flex: 1 !important;
    padding: 1rem !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    align-content: flex-start !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  .asset-list-empty {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 50vh !important;
    text-align: center !important;
    color: #9aa0a6 !important;
    padding: 2rem 1rem !important;
  }

  .asset-empty-flower {
    width: 3rem !important;
    height: 4.8rem !important;
    color: #9aa0a6 !important;
    margin-bottom: 1rem !important;
    opacity: 0.8 !important;
  }

  .asset-list-item {
    display: flex !important;
    flex-direction: column !important;
    background: #202124 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    cursor: pointer !important;
    transition: transform 0.12s ease, border-color 0.12s ease !important;
  }

  .asset-list-item:active {
    transform: scale(0.97) !important;
  }

  .asset-item-thumb {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 96px !important;
    height: 96px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    background-color: #2a2b2d !important;
    display: block !important;
  }

  .asset-item-info {
    padding: 0.5rem 0.625rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .asset-item-name {
    font-size: 0.8125rem !important;
  }

  /* ── 9. Settings Popup Mobile Optimization ── */
  .settings-popup-overlay:not(.hidden) {
    position: fixed !important;
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 24px) !important;
    max-width: 320px !important;
    z-index: 150 !important;
    padding: 0 !important;
  }

  .settings-popup-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  /* ── 10. Theater / Preview Modal Mobile Responsiveness ── */
  .flow-modal-overlay {
    padding: 10px 8px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .flow-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px !important;
    margin: 0 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .flow-modal-card.portrait,
  .flow-modal-card.landscape,
  .flow-modal-card.square {
    width: 100% !important;
    max-width: 100% !important;
  }

  .modal-header {
    padding: 10px 14px !important;
    min-height: 44px !important;
  }

  .modal-title-group {
    max-width: calc(100% - 40px) !important;
    justify-content: flex-start !important;
  }

  .modal-title {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .modal-close {
    right: 10px !important;
    width: 30px !important;
    height: 30px !important;
  }

  .modal-video-container {
    width: 100% !important;
    max-height: 52vh !important;
    background: #000000 !important;
  }

  .modal-video-container video {
    width: 100% !important;
    max-height: 52vh !important;
    object-fit: contain !important;
  }

  .modal-video-container.portrait video {
    aspect-ratio: 9 / 16 !important;
    max-height: 52vh !important;
    width: auto !important;
  }

  .modal-video-container.landscape video {
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    height: auto !important;
  }

  .modal-video-container.square video {
    aspect-ratio: 1 / 1 !important;
    max-height: 46vh !important;
    width: auto !important;
  }

  .modal-variant-bar {
    padding: 8px 12px !important;
    overflow-x: auto !important;
  }

  .variant-chips-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
  }

  .variant-pill {
    flex-shrink: 0 !important;
    padding: 4px 10px !important;
    font-size: 11.5px !important;
  }

  .modal-footer {
    padding: 10px 12px !important;
    background: rgba(11, 13, 20, 0.95) !important;
  }

  .modal-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Row 1: Reuse and Download 720p side-by-side */
  .modal-btn.secondary#modal-reuse-btn {
    flex: 1 1 calc(50% - 4px) !important;
    margin-right: 0 !important;
    justify-content: center !important;
    padding: 9px 12px !important;
    font-size: 12px !important;
  }

  .modal-btn.download-720-btn {
    flex: 1 1 calc(50% - 4px) !important;
    justify-content: center !important;
    padding: 9px 12px !important;
    font-size: 12px !important;
  }

  /* Row 2: Download 1080p full width */
  .modal-btn.download-1080-btn {
    flex: 1 0 100% !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 14px !important;
    font-size: 12.5px !important;
  }

  .modal-btn .material-symbols-rounded {
    font-size: 18px !important;
  }

  .modal-btn .btn-quality-pill {
    padding: 2px 6px !important;
    font-size: 9.5px !important;
  }

  .modal-process-banner {
    padding: 10px 14px !important;
  }

  .process-title {
    font-size: 12px !important;
  }

  .process-subtitle {
    font-size: 10px !important;
  }
}